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.