joshcp

  for(let elem of document.querySelectorAll('*')) {
    elem.addEventListener("click", e => console.log(`Capturing: ${elem.tagName}`), true);
    elem.addEventListener("click", e => console.log(`Bubbling: ${elem.tagName}`));
  }

joshcp

<!-- iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="https://wompme.blob.core.windows.net/7728/dds-mentoring-ios-1125x2436.png" data-wm="appshell">
<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="https://wompme.blob.core.windows.net/7728/dds-mentoring-ios-750x1334.png" data-wm="appshell">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="https://wompme.blob.core.windows.net/7728/dds-mentoring-ios-1242x2208.png" data-wm="appshell">
<!-- iPhone 5 (640px x 1136px) -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="https://wo

joshcp

{{[rel="amphtml"]}}
{{[rel="manifest"]}}
{{[rel*="icon"]}}
{{[rel="canonical"]}}
{{[rel="alternate"]}}
{{[rel="publisher"]}}
{{meta:not([name="viewport"])}}
{{[type="application/ld+json"]}}

joshcp

<form action-xhr="https://ampedupkids.com/OrderTrike" method="post">
  <fieldset>
    <amp-selector layout="container" class="colorPicker" name="color">
      <!-- color picker -->
    </amp-selector>
    <div class="orderform">
      <!-- qty select and BUY button -->
    </div>
  </fieldset>
  <div submit-success>

joshcp

<!-- a simple like button -->
<form id="like-btn" class="vote parent" method="POST" target="_top" action-xhr="https://AmpedUpKids.com/castVote">
  
  <div class="fill">
    <!-- download form data and pre-populate form using amp-list -->
    <amp-list layout="fill" src="https://AmpedUpKids.com/WompKidsInit?assetID=000">
      <template type="amp-mustache">
        <!-- single click form by nesting radio input inside submit button -->
        <button class="votes-up" type="submit" value="make-vote">
          <label class="wm-icon" for="vote-up">Vote Up</label>

joshcp

#modal-hider {
  display: none;
}

.full-screen {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;

joshcp

<form action-xhr="https://AmpedUpKids.com/OrderTrike" method="post">
  <fieldset>
    <!-- form inputs here -->
  </fieldset>
  <div submit-success>
    <template id="payTemplate" type="amp-mustache">
      <!-- checkout here -->
    </template>
  </div>
  <div submit-error>

joshcp

.ampTabContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
}
.tabButton {
  list-style: none;
  flex-grow: 1;
  text-align: center;

joshcp

<div id="ampTabs">
  <amp-selector role="tablist" layout="container" class="ampTabContainer">
      
      <div class="tabButton" selected option="a">Tab one</div>
      <div class="tabContent">Tab one content... </div>
      
      <div class="tabButton" option="b">Tab two</div>
      <div class="tabContent">Tab two content... </div>
      
      <div class="tabButton" option="c">Tab three</div>

joshcp

#What AMP can teach us about performance ##Abstract Let's take a look at the Google Accelerated Mobile Pages Project to learn a few things about how they designed the "lightning fast" load times of AMP, and we'll take away a few things we can apply to our own web projects to improve performance.

##Other Info This talk will be based on a talk that I gave to the Web Designers Unite! group in Bellingham, WA in March 2016. I plan to flesh it out a bit more, focus more on specific take-away items that can be applied to more general web projects, and incorporate any new materials as I learn more about AMP and performance.

Here's my slides from the March 2016 talk