### Install latest packages

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md

Installs or updates npm packages to their latest versions.

```shell
npm install
```

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

### Install LTS Node.js

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md

Installs the latest Long Term Support (LTS) version of Node.js using nvm.

```shell
nvm install --lts
```

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

### Add a new dependency

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md

Installs a new development dependency and updates package.json and package-lock.json.

```shell
npm install --save-dev [packagename]
```

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

### Start local AMP server

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md

Starts the local development server for AMP.

```shell
amp
```

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

### Install Node.js LTS

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md

Commands to install the latest LTS version of Node.js using nvm.

```shell
# macOS / Linux
nvm install --lts

# Windows
nvm list available
nvm install <lts_version>
nvm use <lts_version>
```

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

### Checkout main branch

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md

Switches to the main branch of the repository.

```shell
git checkout main
```

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

### Pull Request Branch Comparison

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md

Example of how the branch comparison will look on the 'Open a pull request' page.

```sh
amproject/amphtml / main … <username>/amphtml / <branch name>
```

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

### Commit all changes

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md

Stages all modified files and creates a commit with a specified message.

```shell
git commit -a -m "<your commit message>"
```

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

### Run unit tests

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md

Executes the unit tests for AMP without building the runtime.

```shell
amp unit
```

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

### Clone your fork of amphtml repository

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md

Downloads your personal fork of the amphtml repository to your local machine.

```shell
git clone git@github.com:<your username>/amphtml.git
```

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

### Run tests with watch mode

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md

Automatically re-runs tests when files change.

```shell
amp [unit|integration] --watch
```

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

### Run integration tests

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md

Executes the integration tests for AMP, including building the runtime.

```shell
amp integration
```

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

### Pushing changes to a branch

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md

Commands to check out a branch and push it to the remote repository.

```shell
git checkout <branch name>
git push -u origin <branch name>
```

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

### Create a new branch

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md

Creates a new branch for development and switches to it, based on the main branch.

```shell
git checkout -b <branch name> main
```

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

### Run tests in specified files

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md

Executes unit or integration tests for a specific set of files using a glob pattern.

```shell
amp [unit|integration] --files=<test-files-path-glob>
```

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

### Add upstream remote

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md

Adds an alias 'upstream' to refer to the main ampproject/amphtml repository.

```shell
git remote add upstream git@github.com:ampproject/amphtml.git
```

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

### Run integration tests without building

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md

Executes integration tests, skipping the build step if it was recently performed.

```shell
amp integration --nobuild
```

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

### Fetch upstream main branch

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md

Fetches the latest data from the main branch of the upstream repository.

```shell
git fetch upstream main
```

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

### Checkout a different branch

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md

This command switches to the specified branch.

```sh
git checkout <branch_name>
```

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

### Megaphone Episode (Custom Start Time)

Source: https://github.com/ampproject/amphtml/blob/main/examples/megaphone.amp.html

An example of a Megaphone episode with a custom start time.

```html
<amp-megaphone layout="fill" skin="dark" data-start-time="10">
  <amp-img layout="fill" src="https://ampbyexample.com/samples_images/megaphone-dark.jpg"></amp-img>
</amp-megaphone>
```

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

### Serve Mode: Default

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md

Accessing the local server with unminified AMP JavaScript, suitable for local development.

```url
http://localhost:8000/serve_mode=default
```

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

### CORS GET request example

Source: https://github.com/ampproject/amphtml/blob/main/extensions/amp-user-notification/amp-user-notification.md

This example shows the query string fields appended to the `data-show-if-href` attribute for a CORS GET request.

```http
https://foo.com/api/show-api?timestamp=1234567890&elementId=notification1&ampUserId=cid-value
```

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

### amp-smartlinks installation

Source: https://github.com/ampproject/amphtml/blob/main/extensions/amp-smartlinks/amp-smartlinks.md

Example of how to install amp-smartlinks in an AMP page.

```html
<!DOCTYPE html>
<html ⚡ lang="en">
  <head>
    ...
    <meta
      name="amp-link-rewriter-priorities"
      content="amp-smartlinks amp-other-affiliate"
    />
    <script
      async
      custom-element="amp-smartlinks"
      src="https://cdn.ampproject.org/v0/amp-smartlinks-0.1.js"
    ></script>
    ...
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    ...
    <amp-smartlinks
      layout="nodisplay"
      nrtv-account-name="supercoolpublisher"
      linkmate
    >
    </amp-smartlinks>
    ...
  </body>
</html>
```

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

### Serve Mode: Compiled

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md

Accessing the local server with minified AMP JavaScript, available after running `amp dist --fortesting`.

```url
http://localhost:8000/serve_mode=compiled
```

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

### Peeking sides carousel, start aligned

Source: https://github.com/ampproject/amphtml/blob/main/test/fixtures/e2e/amp-base-carousel/peeking-sides-start-aligned.amp.html

This is an example of a peeking sides carousel with start alignment.

```html
<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <link
    href="https://fonts.googleapis.com/css?family=Questrial"
    rel="stylesheet">
  <style amp-custom>
    body {
      max-width: 527px;
      font-family: 'Questrial', Arial;
    }
    amp-base-carousel img {
      object-fit: cover;
    }
    .slide {
      padding: 4px;
    }
  </style>
  <style amp-boilerplate>.amp-boilerplate { boilerplate-animation.amp-boilerplate }</style>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
</head>
<body>
  <amp-base-carousel
    class="peeking-sides"
    peek="40"
    loop
    snap
    align="start">
    <div class="slide" fallback>
      <amp-img
        src="/img/samples/base-carousel/slide-1.jpg"
        width="527"
        height="350"
        layout="responsive"></amp-img>
    </div>
    <div class="slide" fallback>
      <amp-img
        src="/img/samples/base-carousel/slide-2.jpg"
        width="527"
        height="350"
        layout="responsive"></amp-img>
    </div>
    <div class="slide" fallback>
      <amp-img
        src="/img/samples/base-carousel/slide-3.jpg"
        width="527"
        height="350"
        layout="responsive"></amp-img>
    </div>
    <div class="slide" fallback>
      <amp-img
        src="/img/samples/base-carousel/slide-4.jpg"
        width="527"
        height="350"
        layout="responsive"></amp-img>
    </div>
    <div class="slide" fallback>
      <amp-img
        src="/img/samples/base-carousel/slide-5.jpg"
        width="527"
        height="350"
        layout="responsive"></amp-img>
    </div>
  </amp-base-carousel>
</body>
</html>
```

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

### Autocomplete Search Example

Source: https://github.com/ampproject/amphtml/blob/main/examples/amp-autocomplete.ssr.html

An example demonstrating AMP autocomplete search functionality using GET requests to httpbin.org.

```html
<amp-autocomplete name="search"
  id="amp-autocomplete"
  layout="container"
  src="/amp-autocomplete-data.json"
  query-first-char-count="1">
  <input type="text" name="q" placeholder="Search"
    required>
</amp-autocomplete>
```

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

### Basic Outbrain Widget Installation

Source: https://github.com/ampproject/amphtml/blob/main/ads/vendors/outbrain.md

Basic example of how to install an Outbrain widget using amp-embed.

```html
<amp-embed
    width="100"
    height="100"
    type="outbrain"
    layout="responsive"
    data-widgetIds="AMP_1,AMP_2"
>
</amp-embed>
```

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

### Deleting a remote branch

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md

Command to delete a branch from the GitHub fork.

```shell
git push -d origin <branch name>
```

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

### Basic InFeed Widget Installation

Source: https://github.com/ampproject/amphtml/blob/main/ads/vendors/whopainfeed.md

Example of how to install the Whopa InFeed widget using amp-embed.

```html
<amp-embed
  width="100"
  height="100"
  type="whopainfeed"
  layout="responsive"
  heights="(min-width:1907px) 39%, (min-width:1200px) 46%, (min-width:780px) 64%, (min-width:480px) 98%, (min-width:460px) 167%, 196%"
  data-siteId="1234"
  data-template="default"
>
</amp-embed>
```

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

### Basic Bringhub Mini-Storefront Installation

Source: https://github.com/ampproject/amphtml/blob/main/ads/vendors/bringhub.md

This is a basic example of how to install the Bringhub Mini-Storefront using an amp-embed tag.

```html
<amp-embed
  width="600"
  height="320"
  type="bringhub"
  layout="responsive"
  heights="(max-width: 270px) 1280px, (max-width:553px) 640px, 338px"
>
</amp-embed>
```

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

### Run tests in a single file

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md

Command to run unit tests for a specific file.

```sh
amp unit --files=extensions/amp-youtube/0.1/test/test-amp-youtube.js
```

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

### View remote repositories

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md

Command to view the configured remote repositories for your local clone.

```sh
git remote -v
```

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

### Serve Mode: CDN

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md

Accessing the local server with minified AMP JavaScript served from the official CDN.

```url
http://localhost:8000/serve_mode=cdn
```

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

### Run unit tests locally

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md

Command to run unit tests affected by local changes.

```sh
amp unit --local_changes
```

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

### Ad Start trigger example

Source: https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-video-analytics.md

Example configuration for the `video-ad-start` trigger, which fires when an advertisement begins playing.

```javascript
"triggers": {
  "adStart": {
    "on": "video-ad-start",
    "request": "event",
    "selector": "#myVideo"
  }
}
```

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

### Example #1 - Close button on the start position

Source: https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-story-player.md

Configuration for an amp-story-player to display the close button on the start position.

```html
<amp-story-player>
 <script type="application/json">
   {
     "controls": [
       {
         "name": "close",
         "position": "start"
       }
     ],
   }
 </script>
 ...
</amp-story-player>
```

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

### Experiment Configuration Example

Source: https://github.com/ampproject/amphtml/blob/main/docs/running-server-side-experiment.md

Example of how to set an experiment flag to true in experiment-consts.json.

```json
{
  "MY_EXPERIMENT": true,
}
```

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

### Deleting a local branch

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-quick.md

Commands to switch to the main branch and delete a local branch.

```shell
git checkout main
git branch -D <branch name>
```

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

### Run tests in multiple files

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md

Command to run unit tests for multiple specified files.

```sh
amp unit --files=extensions/amp-story/1.0/test/test-amp-story-embedded-component.js --files=extensions/amp-story/1.0/test/test-amp-story-hint.js
```

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

### Using Actions and Events in HTML

Source: https://github.com/ampproject/amphtml/blob/main/docs/building-an-amp-extension.md

HTML example demonstrating how to listen to events and trigger actions on elements.

```html
<form
  on="submit-success:my-success-lightbox.open;submit-error:my-error-lightbox.open"
></form>
```

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

### Hello World Example

Source: https://github.com/ampproject/amphtml/blob/main/extensions/amp-script/amp-script.md

A basic example demonstrating the use of getElementById, addEventListener, createElement, textContent, and appendChild.

```js
const button = document.getElementById('textarea');

button.addEventListener('click', () => {
  const h1 = document.createElement('h1');
  h1.textContent = 'Hello World!';
  document.body.appendChild(h1);
});
```

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

### Push changes to GitHub fork for the first time

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md

Command to push your local branch to your GitHub fork and set up tracking.

```sh
git push -u origin <branch name>
```

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

### Actions - Start and End Today

Source: https://github.com/ampproject/amphtml/blob/main/examples/date-picker.amp.html

Demonstrates setting start and end dates relative to today.

```html
<amp-date-picker id="date-picker-start-end-today" mode="range"></amp-date-picker>
<button on="tap:date-picker-start-end-today.setDates(dates=['today'])">Start Today</button>
<button on="tap:date-picker-start-end-today.setDates(dates=['tomorrow'])">End Tomorrow</button>
<button on="tap:date-picker-start-end-today.setDates(dates=['this week'])">Select one week</button>
<button on="tap:date-picker-start-end-today.setDates(dates=['next week'])">Select next week</button>
<button on="tap:date-picker-start-end-today.clear">Clear</button>
```

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

### AMP BySide Content Example

Source: https://github.com/ampproject/amphtml/blob/main/examples/amp-byside-content.amp.html

This snippet shows a basic AMP BySide content setup.

```html
<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-byside" src="https://cdn.ampproject.org/v0/amp-byside-0.1.js"></script>
  <link rel="canonical" href="https://www.example.com/">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><style amp-custom>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}html { font-family: "Roboto", Helvetica, sans-serif; } amp-byside-content { color: #222; }</style>
</head>
<body>
  <amp-byside>
    <div placeholder>This is placeholder content.</div>
    <p>This is the main content.</p>
  </amp-byside>
</body>
</html>
```

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

### Enable git pre-push hook

Source: https://github.com/ampproject/amphtml/blob/main/docs/getting-started-e2e.md

Script to enable the git pre-push hook for automatic critical checks before pushing.

```sh
./build-system/common/enable-git-pre-push.sh
```

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

### Search (GET xhr same origin)

Source: https://github.com/ampproject/amphtml/blob/main/examples/amp-form.ssr.html

Demonstrates a GET request for a search form using XHR and is same origin.

```html
<form method="get" action-xhr="https://httpbin.org/get?q=my+search+string" target="_top">
  <input type="text" name="q" placeholder="Search">
  <button>Search</button>
</form>
```

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

### Search (GET non-xhr same origin)

Source: https://github.com/ampproject/amphtml/blob/main/examples/amp-form.ssr.html

Demonstrates a GET request for a search form that does not use XHR and is same origin.

```html
<form method="get" target="_top" action="https://httpbin.org/get?q=my+search+string">
  <input type="text" name="q" placeholder="Search">
  <button>Search</button>
</form>
```

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

### Experiment Configuration Example

Source: https://github.com/ampproject/amphtml/blob/main/docs/running-server-side-experiment.md

Example of how to add an experiment to the experiments-config.json file, including name, environment, issue tracker link, expiration date, and the define_experiment_constant.

```json
{
  "experimentA": {
    "name": "myExperimentName",
    "environment": "AMP",
    "issue": "Link to the experiment tracking issue",
    "expiration_date_utc": "Date in YYYY-MM-DD format, in UTC",
    "define_experiment_constant": "MY_EXPERIMENT"
  },
  "experimentB": {},
  "experimentC": {}
}
```