### Lighthouse Node Module Usage Example

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/tools/lighthouse/v3/migration.md

Demonstrates how to use the Lighthouse Node.js module to run audits. It shows how to pass configuration flags, such as `onlyCategories` and `output`, which were previously handled differently or ignored in v2.

```javascript
const fs = require('fs');
const lighthouse = require('lighthouse');

async function run() {
  // `onlyCategories` was previously only available as a config setting.
  // `output` was previously only available in CLI.
  const flags = {onlyCategories: ['performance'], output: 'html'};
  const html = (await lighthouse('https://google.com/', flags)).report;
  fs.writeFileSync('report.html', html);
}
```

--------------------------------

### Display Images

Source: https://github.com/google/webfundamentals/blob/main/src/tests/blink-component-bad.md

Demonstrates how to display images using HTML `<img>` tags and Markdown syntax. Includes examples of image sources and alt text.

```html
<img src="/web/images/web-fundamentals-icon192x192.png">
```

```markdown
![Alt text](web-fundamentals-icon192x192.png "WF Logo")
```

--------------------------------

### Polymer Responsive Element Example

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/cds/2013/polymer.md

Illustrates how to create responsive elements using Polymer by binding to a `queryMatches` attribute. This allows elements to react to media queries.

```html
<polymer-media-query query="max-width:640px" queryMatches="{isPhone}"></polymer-media-query>
```

--------------------------------

### Polymer App Composition Example

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/cds/2013/polymer.md

Shows the concept of composing a full application by nesting custom elements, including a root `<my-app>` element.

```html
<my-app></my-app>
```

--------------------------------

### Image Tag Example

Source: https://github.com/google/webfundamentals/blob/main/src/tests/good-article.md

Demonstrates embedding an image using a standard HTML img tag. Includes attributes for source and alt text.

```html
<img src="/web/images/web-fundamentals-icon192x192.png">

```

--------------------------------

### Scheme-Relative URL Example

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/cds/2013/got-ssl.md

Demonstrates how to use a scheme-relative URL to ensure resources are loaded over HTTPS on an HTTPS page, preventing mixed content warnings.

```html
<style src="//foo.com/style.css">

```

--------------------------------

### Polymer AJAX Element Example

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/cds/2013/polymer.md

Demonstrates the usage of the `<polymer-ajax>` element for making HTTP requests. It shows how to specify the URL and parameters declaratively within the HTML tag.

```html
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
               params='{"alt":"json"}'></polymer-ajax>
```

--------------------------------

### Liquid Template Variable Example

Source: https://github.com/google/webfundamentals/blob/main/src/tests/good-article.md

Demonstrates the use of a Liquid template variable, indicated by double curly braces. This syntax is used to output dynamic content.

```liquid
{{Donec lacus mauris}}

```

--------------------------------

### Service Worker Install Handler

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/cds/2014/lets-build-some-apps-with-polymer.md

Cache essential resources within the service worker's install event handler. This ensures fallback content, including application data, is available when the user is offline.

```javascript
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/app.js'
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});
```

--------------------------------

### Lighthouse CLI Flag Migration (v2 to v3)

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/tools/lighthouse/v3/migration.md

This section details the changes in command-line interface (CLI) flags between Lighthouse v2 and v3. It covers scenarios like throttling methods and preset configurations, illustrating how to adapt existing commands for the new version.

```APIDOC
Lighthouse CLI Flag Changes (v2 vs v3):

Scenario: DevTools 3G Throttling
  v2 Flags: None (default behavior)
  v3 Flags: --throttling-method=devtools

Scenario: No Throttling
  v2 Flags: --disable-network-throttling --disable-cpu-throttling
  v3 Flags: --throttling-method=provided

Scenario: Network Throttling, No CPU Throttling
  v2 Flags: --disable-cpu-throttling
  v3 Flags: --throttling-method=devtools --throttling.cpuSlowdownMultiplier=1

Scenario: Run Performance Audits
  v2 Flags: --perf
  v3 Flags: --preset=perf

Scenario: Run Mixed Content Audits
  v2 Flags: --mixed-content
  v3 Flags: --preset=mixed-content
```

--------------------------------

### CSS for Related Guides Styling

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/_shared/related-guides/heading.html

This CSS snippet defines styles for elements related to guides. It targets the `.wf-related-guide` class for potential margin adjustments (commented out) and styles the first link within these guides to have a small font size.

```css
.wf-related-guide { /\*margin-left: 24px;/\* } .wf-related-guide a:first-of-type { font-size: small; }
```

--------------------------------

### Project Configuration Files

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/blinkon/6/blinkon-6-day-1-talk-2-ignition-an-interpreter-for-v8.md

Details on project and book configuration files within the web fundamentals project.

```yaml
project_path: /web/_project.yaml
book_path: /web/shows/_book.yaml
```

--------------------------------

### Display JavaScript Alert

Source: https://github.com/google/webfundamentals/blob/main/src/tests/script-tags.md

A simple JavaScript alert box to display a message. This is a basic client-side scripting example.

```javascript
alert('hello world');
```

--------------------------------

### Project Configuration Files

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/blinkon/6/blinkon-6-day-1-talk-1-state-of-web-platform.md

These are paths to configuration files within the project structure, likely used for project management and book publishing.

```yaml
project_path: /web/_project.yaml
book_path: /web/shows/_book.yaml
```

--------------------------------

### Project and Book Configuration

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/blinkon/4/blink-moving-security-forward.md

This snippet shows configuration paths for a project and a book within a web development context. It uses a YAML format, likely for build or project management tools.

```yaml
project_path: /web/_project.yaml
book_path: /web/shows/_book.yaml
```

--------------------------------

### Project Configuration

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/polycasts/season-1/core-header-panel.md

YAML configuration files specifying project and book paths.

```YAML
project_path: /web/_project.yaml
```

```YAML
book_path: /web/shows/_book.yaml
```

--------------------------------

### Project Configuration

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/cds/2013/keynote.md

This snippet shows project configuration details, likely from a YAML file. It specifies the project path and book path, providing metadata for the project's structure and content.

```yaml
project_path: /web/_project.yaml
book_path: /web/shows/_book.yaml
```

--------------------------------

### Presentation Slides Link

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/blinkon/6/blinkon-6-day-1-talk-2-ignition-an-interpreter-for-v8.md

A direct link to the presentation slides for the talk.

```text
Slides: https://docs.google.com/presentation/d/1OqjVqRhtwlKeKfvMdX6HaCIu9wpZsrzqpIVIwQSuiXQ/edit
```

--------------------------------

### Presentation Slides Link

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/blinkon/6/blinkon-6-day-2-talk-2-client-side-performance-from-the-perspective-of-a-developer.md

Provides a direct link to the presentation slides in Keynote format.

```markdown
Slides: https://www.dropbox.com/s/dyvyv8vp8elf14z/web%20speed%20blinkon.key?dl=0
```

--------------------------------

### ESLint Configuration for Babel

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/ttt/series-2/es2015.md

A JSON configuration file for ESLint that specifies 'babel-eslint' as the parser, enabling linting of Babel-specific syntax. It also includes an example of disabling the 'strict' rule.

```JSON
{
  "parser": "babel-eslint",
  "rules": {
    "strict": 0
  }
}
```

--------------------------------

### Subscription Link

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/ttt/series-1/perf-auditing.md

Provides a markdown link to subscribe to the Google Developers Channel on YouTube. The link uses a URL shortener.

```markdown
[Subscribe](https://goo.gl/mQyv5L) to the Google Developers Channel
```

--------------------------------

### Project and Book Metadata

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/blinkon/6/blinkon-6-day-2-talk-7-qa-panel.md

This snippet demonstrates the use of YAML for defining project paths and book paths. It also shows custom metadata comments, likely for build or content management systems.

```yaml
project_path: /web/_project.yaml
book_path: /web/shows/_book.yaml

{# wf_updated_on: 2016-06-22 #}
{# wf_published_on: 2016-06-22 #}
{# wf_youtube_id: iaE8NCDa6JM #}
```

--------------------------------

### YouTube Video Link

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/polycasts/season-2/AskPolymer_PC27.md

This entry represents a link to a YouTube video, often used for referencing external content or supplementary material. The URL includes parameters for playback control and starting position.

```youtube
https://www.youtube.com/watch?v=LMqM4PfrFxs&feature=youtu.be&t=26m54s
```

```youtube
https://www.youtube.com/watch?v=k1eR_3KqJms&list=PLNYkxOF6rcIDdS7HWIC_BYRunV6MHs5xo&index=1
```

```youtube
https://youtu.be/mw0ozps3jLM?t=19m46s
```

--------------------------------

### Content Navigation Generation

Source: https://github.com/google/webfundamentals/blob/main/gae/includes/upper-tabs.html

This snippet demonstrates a templating loop used to generate navigation links. It iterates through 'upper_tabs' and conditionally creates markdown links based on the presence of specific content paths, linking to guides and other content.

```Jinja2
{% for tab in bookYaml.upper_tabs %}*   {% if tab.lower_tabs.other.0.contents.0.path %} [{% else %}]({{ tab.lower_tabs.other.0.contents.0.path }}) [{% endif %} {{ tab.name }}]({{ tab.lower_tabs.guides.0.path }})
{% endfor %}
*   [warning STAGING warning](https://github.com/google/WebFundamentals)
```

--------------------------------

### Project Configuration Files

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/webrtc/2015/krankygeek-07-mozilla.md

These YAML files define project paths and configurations. The `_project.yaml` file likely outlines the structure or metadata for the web project, while `_book.yaml` might specify settings for a book or documentation within that project.

```yaml
project_path: /web/_project.yaml
```

```yaml
book_path: /web/shows/_book.yaml
```

--------------------------------

### Developer Diary YouTube Playlist Embed

Source: https://github.com/google/webfundamentals/blob/main/src/templates/shows/index.md

Embeds the 'Developer Diary with Paul Lewis' YouTube video series, offering an exclusive walkthrough of how Google Developer Advocates build websites, using the Chrome Dev Summit site as an example.

```html
<div class="video-wrapper">
  <iframe class="devsite-embedded-youtube-video"
          src="//www.youtube.com/embed/videoseries?list=PLNYkxOF6rcIBykcJ7bvTpqU7vt-oey72J"
          data-autohide="1" data-showinfo="0" frameborder="0" allowfullscreen>
  </iframe>
</div>
```

--------------------------------

### JSHint: JavaScript Linting in Sublime Text

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/ttt/series-1/sublime-text-plugins.md

JSHint is a JavaScript linter that analyzes code for potential errors and bad practices. The SublimeLinter-jshint package integrates JSHint into Sublime Text, highlighting issues directly in the editor and providing error messages. It requires SublimeLinter and SublimeLinter-jshint packages to be installed.

```javascript
var foo = { bar: 'Hello, World.' };
var msg = fo.bar;
```

--------------------------------

### Google I/O 2016 Talk Links

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/google-io/2016/devtools-in-2016-accelerate-your-workflow-google-io-2016.md

Provides links to watch more Chrome talks from Google I/O 2016 and subscribe to the Chrome Developers YouTube channel.

```text
* Watch more Chrome talks at I/O 2016 here: <https://goo.gl/JoMLpB>
* See all the talks from Google I/O 2016 here: <https://goo.gl/olw6kV>
* Subscribe to the Chrome Developers channel at <https://goo.gl/LLLNvf>
```

--------------------------------

### Transpile ES2015 to ES5 with Gulp and Babel

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/ttt/series-2/es2015.md

Demonstrates how to use Gulp and gulp-babel to transpile a single JavaScript file from ES2015 to ES5 for browser compatibility. This setup allows developers to use modern JavaScript syntax while ensuring it runs in environments that do not yet support ES2015 features.

```javascript
var gulp = require('gulp');
var babel = require('gulp-babel');

gulp.task('default', function () {
    return gulp.src('src/app.js')
        .pipe(babel())
        .pipe(gulp.dest('dist'));
});
```

--------------------------------

### iron-ajax Element for AJAX

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/polycasts/season-2/iron-ajax.md

The iron-ajax element is a Polymer element designed to simplify making AJAX requests. It handles request setup, sending, and response processing, integrating seamlessly with Polymer's data binding system. It supports various HTTP methods and provides properties for configuring requests and handling responses.

```APIDOC
iron-ajax:
  Purpose: Makes AJAX requests.
  Dependencies: Polymer 1.x or later.

  Properties:
    url: string
      The URL to which the request is sent.
    method: string (GET, POST, PUT, DELETE, etc.)
      The HTTP method to use.
    params: Object
      A hash of parameters to be sent with the request.
    handleAs: string (json, text, blob, arraybuffer)
      The expected response type.
    body: any
      The body of the request, for methods like POST or PUT.
    headers: Object
      A hash of headers to send with the request.
    withCredentials: boolean
      Whether to send cookies or authorization headers.

  Events:
    response: Fired when the request completes successfully.
      detail.response: The response payload.
    error: Fired when the request fails.
      detail.error: The error object.

  Usage Example:
    <iron-ajax url="/api/data" on-response="handleResponse" last-response='{{data}}'></iron-ajax>
    <script>
      Polymer({
        is: 'my-element',
        handleResponse: function(e, detail) {
          console.log('Data received:', detail.response);
        }
      });
    </script>
```

--------------------------------

### Liquid Include for Sample Code

Source: https://github.com/google/webfundamentals/blob/main/src/tests/good-article.md

Includes content from another file, likely a sample code snippet or component. This uses the Liquid templating language.

```liquid
{% include "web/_shared/sample.html" %}

```

--------------------------------

### Lighthouse Results Object (LHR) v2 vs v3 Changes

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/tools/lighthouse/v3/migration.md

This section details the changes in the Lighthouse Results Object (LHR) between version 2 and version 3. It provides a mapping of deprecated v2 properties to their v3 equivalents and includes notes on significant structural or value modifications, such as changes to categories, scoring modes, and the details object.

```APIDOC
Lighthouse Results Object (LHR) v2 vs v3 Changes:

This documentation outlines the evolution of the Lighthouse Results Object (LHR) from version 2 to version 3, focusing on property renames and structural adjustments.

**General Structure Changes:**
- The top-level `lhr` property in v3 contains the results, replacing the v2 top-level JSON output.

**Property Mappings and Changes:**

- **initialUrl** (v2) -> **requestedUrl** (v3)
  Description: Direct replacement.

- **url** (v2) -> **finalUrl** (v3)
  Description: Direct replacement.

- **generatedTime** (v2) -> **fetchedTime** (v3)
  Description: Direct replacement.

- **reportCategories** (v2) -> **categories** (v3)
  Description: Changed from an array to a keyed object.

- **reportGroups** (v2) -> **categoryGroups** (v3)
  Description: Direct replacement.

- **audits.<var>ID</var>.name** (v2) -> **audits.<var>ID</var>.id** (v3)
  Description: Direct replacement.

- **audits.<var>ID</var>.description** (v2) -> **audits.<var>ID</var>.title** (v3)
  Description: Direct replacement.

- **audits.<var>ID</var>.helpText** (v2) -> **audits.<var>ID</var>.description** (v3)
  Description: Direct replacement.

- **audits.<var>ID</var>.scoringMode** (v2) -> **audits.<var>ID</var>.scoreDisplayMode** (v3)
  Description: Possible values have been expanded to `numeric`, `binary`, `manual`, `informative`, `not-applicable`, `error`.

- **audits.<var>ID</var>.score** (v2) -> **audits.<var>ID</var>.score** (v3)
  Description: Scores are always a number between 0 and 1 (not 0-100) when `scoreDisplayMode` is `numeric` or `binary`. Scores are always `null` for other display modes.

- **audits.<var>ID</var>.displayValue** (v2) -> **audits.<var>ID</var>.displayValue** (v3)
  Description: Can now be an array of printf-style arguments for string interpolation.

- **audits.<var>ID</var>.debugString** (v2) -> **audits.<var>ID</var>.explanation**, **audits.<var>ID</var>.errorMessage**, **audits.<var>ID</var>.warnings** (v3)
  Description: `debugString` values have been converted to one of the three properties above depending on their intent.

- **audits.<var>ID</var>.details** (v2) -> **audits.<var>ID</var>.details** (v3)
  Description: Structure of details has shifted to be more consumable. Each entry in `.items` is an object with reliable keys instead of `any[]`.

- **audits.<var>ID</var>.error** (v2) -> **audits.<var>ID</var>.scoreDisplayMode === 'error'** (v3)
  Description: Indicates an error state.

- **audits.<var>ID</var>.notApplicable** (v2) -> **audits.<var>ID</var>.scoreDisplayMode === 'not-applicable'** (v3)
  Description: Indicates the audit was not applicable.

- **audits.<var>ID</var>.informative** (v2) -> **audits.<var>ID</var>.scoreDisplayMode === 'informative'** (v3)
  Description: Indicates an informative audit.

- **audits.<var>ID</var>.manual** (v2) -> **audits.<var>ID</var>.scoreDisplayMode === 'manual'** (v3)
  Description: Indicates a manual audit.

- **audits.<var>ID</var>.extendedInfo** (v2) -> Removed (v3)
  Description: Removed. Use `details` instead.
```

--------------------------------

### Project Configuration Files

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/blinkon/6/blinkon-6-day-1-talk-5-web-platform-predictability.md

These YAML entries specify project and book paths within a web development project structure. They are typically used for build or configuration management.

```yaml
project_path: /web/_project.yaml
```

```yaml
book_path: /web/shows/_book.yaml
```

--------------------------------

### Interactive Button and Response Creation (JavaScript)

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/_shared/multichoice.html

This JavaScript code defines functions to manage interactive elements on a web page. It includes a function to disable all buttons and another to create buttons with associated response areas, handling click events and analytics data. The main script logic iterates through feedback choices to build the UI.

```javascript
function disableButtons() {
  var buttons = document.querySelectorAll('button');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].disabled = true;
  }
}

function makeButtonAndResponse(choice, responseContainer) {
  var b = document.createElement('button');
  var response = document.createElement('aside');
  var classes = 'button gc-analytics-event' + (choice.button.primary ? ' button-primary' : '');
  response.className = 'note';
  response.style.display = 'none';
  response.innerHTML = choice.response;
  b.textContent = choice.button.text;
  b.type = 'button';
  b.className = classes;
  b.dataset.value = choice.analytics.hasOwnProperty('value') ? choice.analytics.value : 1;
  b.dataset.label = choice.analytics.label;
  b.dataset.category = feedback.category;
  b.addEventListener('click', function(e) {
    response.style.display = 'block';
    disableButtons();
  });
  document.body.appendChild(b);
  responseContainer.appendChild(response);
}

var responseContainer = document.createElement('div');
if (feedback.hasOwnProperty('question')) {
  var question = document.createElement('p');
  question.textContent = feedback.question;
  document.body.appendChild(question);
}

for (var i = 0; i < feedback.choices.length; i++) {
  var choice = feedback.choices[i];
  makeButtonAndResponse(choice, responseContainer);
}

document.body.appendChild(responseContainer);
```

--------------------------------

### Related Resources and Hashtags

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/google-io/2016/how-amp-achieves-its-speed-google-io-2016.md

This section provides links to additional Google I/O 2016 talks, the Chrome Developers channel, and relevant hashtags for social media engagement.

```markdown
* Watch more Chrome talks at I/O 2016 here: <https://goo.gl/JoMLpB>
* See all the talks from Google I/O 2016 here: <https://goo.gl/olw6kV>
* Subscribe to the Chrome Developers channel at <https://goo.gl/LLLNvf>

`#io16` `#GoogleIO` `#GoogleIO2016`
```

--------------------------------

### Project and Book Configuration Paths

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/cds/2014/tls-all-the-things.md

Specifies the file paths for project and book configurations, likely used in a build or content management system.

```yaml
project_path: /web/_project.yaml
book_path: /web/shows/_book.yaml
```

--------------------------------

### Page Title and Metadata

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/ttt/series-1/perf-auditing.md

Markdown comments and directives used for page title and metadata. Includes update/publish dates and YouTube video ID, often used by static site generators.

```markdown
# Totally Tooling Tips: Performance Auditing {: .page-title }

{# wf_updated_on: 2017-07-25 #}
{# wf_published_on: 2015-07-14 #}
{# wf_youtube_id: yeNUytByylk #}
```

--------------------------------

### NodeList: Live vs. Static

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/http203/podcast/vr-api-design-lockdown.md

Explains the difference between live and static NodeLists in the DOM. Live NodeLists update automatically when the underlying document changes, while static NodeLists are snapshots.

```APIDOC
NodeList Properties:
  - Live NodeLists:
    - Automatically update when the DOM changes.
    - Example: `document.querySelectorAll()` often returns a live NodeList.
  - Static NodeLists:
    - Are snapshots of the DOM at the time of creation.
    - Do not update automatically.
  - Rationale for static NodeLists:
    - Predictability in certain iteration scenarios.
    - Performance considerations in some implementations.
```

--------------------------------

### HTTP/2 Server Push

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/http203/podcast/http-203-springy-css-storage-and-bisecting.md

An article discussing the concept and implementation of HTTP/2 Server Push, a feature that allows servers to proactively send resources to the client before they are explicitly requested, improving page load times.

```html
* [HTTP/2 Push](https://www.igvita.com/2013/06/12/innovating-with-http-2.0-server-push/)
```

--------------------------------

### Project Configuration Files

Source: https://github.com/google/webfundamentals/blob/main/src/content/en/shows/google-io/2016/building-for-billions-on-the-web-google-io-2016.md

These YAML files define project paths and configurations, commonly used in build systems or project management tools. They specify the location of project-level and book-level configuration files.

```yaml
project_path: /web/_project.yaml
book_path: /web/shows/_book.yaml
```