reveal

Cover

ꋖꍩꈼ ꈼꀰꂦ꒒ꐇꋖꂑꂦꋊ ꂦꄞ ꁲꂵꉣ

ꉣꁲꌈ꒒ ꒒꒐

Profile

ꉣꁲꌈ꒒ ꒒꒐

  • Front End engineer
  • HTML / JavaScript / CSS
  • work @ Verizon Media
  • facebook: mei.studio.li
  • #DoRightThings

Agenda

Agenda

  • - What's AMP ?
  • - More stable more reliance
  • - CSS limitation
  • - Payment friendly
  • - Mighty amp-component
  • - Remote SD fetching
  • - Think more & gain more

What's AMP ?

What's AMP ?

AMP is a web component framework to easily create user-first websites / stories / ads / emails.

10:21

amp.dev

More stable more reliance

unfold 
More stable more reliance



Yes! We have another choice for require AMP extensions. Why not use Long-Term Stable version.


How to Opt-In ?

// Standard AMP HTML runtime and extension scripts 
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script
  async
  custom-element="amp-ad"
  src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"
></script>



// LTS AMP HTML runtime and extension scripts 
<script async src="https://cdn.ampproject.org/lts/v0.js"></script>
<script
  async
  custom-element="amp-ad"
  src="https://cdn.ampproject.org/lts/v0/amp-ad-0.1.js"
></script>
10:21

amp.dev

CSS limitation

CSS limitation

Whether your style is a professional journalist website or bohemian ecommerce emails, AMP now gives you more room to show it.

10:21

tw.bid.yahoo.com

Payment Request API friendly

unfold 
Payment friendly



The whole new attitude for convience payment experience - Payment Request API



<amp-iframe
  height="44"
  class="payment"
  allowpaymentrequest
  sandbox="allow-scripts allow-same-origin allow-top-navigation allow-modals"
  layout="fixed-height"
  frameborder="0"
  src="https://your-domain.com/amp-payment-request-api-inner.html?_=RANDOM"
>
</amp-iframe>
10:21

blog.lalacube.com

Mighty <amp-list />

Mighty <amp-list />

Once the worst amp-component has mutated as the best component ever. Let's take a look what it changed ?

10:21

tw.bid.yahoo.com

Remote SD fetching

Remote SD fetching

Use structured data to help Google understand the content of your site and enable special Search result features for your pages.

10:21

www.google.com

Remote SD fetching

unfold 
Remote SD fetching



Use amp-component to do remote structured data fetching.


// CSS 
<style amp-custom>
.remote-sd-fetching {
  position: fixed;
  left: 0;
  top: 0;
  visibility: hidden;
  pointer-events: none;
}
</style>


// amp component 
<amp-list
  class="remote-sd-fetching"
  width="1"
  height="1"
  layout="fixed"
  items="."
  single-item
  binding="no"
  src="web-service-for-remote-sd-fetching.php"
>
  <template type="amp-mustache">
    <script type="application/ld+json">
      {{{.}}}
    </script>
  </template>
</amp-list>
10:21

tw.mall.yahoo.com

Remote SD fetching

Validation

Developers could verify structured data through validation tool which provide from google.

10:21

search.google.com/

Think more & gain more

unfold 
Think more & gain more



Sometimes developer could use CSS to gain same effect as same as amp-component.



// Style
<style amp-custom>
.carousel-shell {
  width: 100%;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
  overflow-x: scroll;
}

.carousel-shell__queue {
  display: flex;
  justify-content: flex-start;
  scroll-snap-type: x mandatory;
}
.carousel-shell__queue .unit {
  flex-grow: 0;
  flex-shrink: 0;
  scroll-snap-align: center;
}
</style>


// HTML
<div class="carousel-shell">
  <div class="carousel-shell__queue">  
    <div class="unit">...</div>
    <div class="unit">...</div>
    <div class="unit">...</div>
    ...
  </div>
</div>
10:21

tw.bid.yahoo.com

Recap

Recap

  • - More stable more reliance (lts)
  • - CSS limitation (75K)
  • - Payment friendly
  • - Mighty <amp-list />
  • - Remote SD fetching
  • - Think more & gain more

thankful

Thanks, all of you.