The following was posted on Medium by Sebastian Benz, Developer Advocate, Google.
A lot has happened since I last wrote about AMP by Example. This post gives you a quick overview about new samples and what’s new on the site itself.
A new Design
We completely re-designed www.ampbyexample.com using the brand-new AMPStart template and component library. The other big change: samples no longer use a three column layout. Instead, code snippets and live previews are embedded into the documentation.
Interactive AMP Playground
If you want to play around with the sample code: all samples can now be opened in an interactive playground. At the moment it’s limited to only editing existing samples, but we plan to make this even more useful by making it possible to share samples with others.
AMP Component Updates
There have been quite a few updates to the AMP component samples:
- amp-bind: the sample for the component making AMP pages Turing complete now uses the new object-literal syntax.
- amp-call-tracking: brand-new component for landing pages replacing static phone numbers with dynamically generated phone numbers used for call tracking analytics.
- amp-fx-parallax: yay! Parallax scrolling support is coming to AMP.
- amp-gist: developers rejoice, finally it’s possible to embed Github Gists into AMPs.
- amp-iframe: update to the existing sample demonstrating how amp-iframes can resize themselves. This can be very useful when embedding third-party content via iframe.
More AMP Use Cases
New samples demonstrating how to combine AMP components to solve complex use cases:
- Tab Panels in AMP: eBay contributed a sample demonstrating how to implement tabs in AMP. One thing to note: while creating the sample, eBay discovered that the current implementation doesn’t fulfill their accessibility requirements yet. This is the issue tracking what needs to be done to fix this.
- Poll Sample: how to implement a single page poll in AMP making sure that users can only vote once.
- Star Rating Sample: important for ecommerce websites, how to implement a accessible star rating.
- Custom Loading Indicator: sample demonstrating that you can even customize AMP’s default loading animations.
AMP Ads galore!
Big update to the AMP Ads section demonstrating how to build AMP ads:
- AMP Ad sample previews are now served as real AMP ads via DFP. Previously, AMP ad previews were embedded using iframes which didn’t make use of the optimized AMP ad rendering performance.
- Hello World Sample: learn how to create an AMP Ad.
- Video Ad Sample: a sample ad really showing off what is possible with AMP.
- Speed comparison: see how fast an AMP Ad loads in comparison to a regular ad. Best viewed on a 3G connection.
What’s next?
We’ll continue providing samples for new AMP components, but also plan to focus more on how complex use cases can be solved by combining existing AMP components. Please let us know if there any specific use cases where you would like to see samples.
Posted by Sebastian Benz, Developer Advocate, Google.