New in AMP: Date picker, easier CSS development, and more AMP By Example content
We’re back with another post to highlight the most notable changes to AMP in the past few months.
amp-date-picker experimental beta
Our new date picker is now available for experimenting with. To get started, make sure that you enable the Dev Channel and run the following command in the devtools console:
Full details for opting into experimental features can be found here. While we don’t have our documentation for this component live yet, basic details can be found on the Github issue and you can check out our example implementations (generic example, travel example).
Since this component is still experimental, you won’t be able to launch with it yet. Instead please try it out and let us know any feedback on the Github issue.
replace-important npm package
Developers using AMP will already be familiar with some of its CSS restrictions. After hearing feedback that a few of these in particular have been stumbling blocks in the wild, we started thinking about how to make styling AMP pages a little easier. One of the first resources we’re rolling out is an npm package that replaces “!important” styles (which are disallowed in AMP) with equivalent rules that validate.
AMP by Example updates
We recently held a short sprint to get some new samples in AMP by Example—check out some of the results here:
- E-commerce checkout flow
- Basics of scrollbound effects: a fidget spinner built with AMP!
- Load more: a button that pulls in additional content with user interaction.
- Scroll-to-top button
- Favorite button: a comprehensive, dynamic “favorite” button.
- Dynamic content after user-interaction & mixing dynamic and cached data: two patterns for incorporating highly dynamic data into AMP pages.
- Linked dropdowns: a highly-requested sample demonstrating how to link multiple dropdown menus.
- Paged list: a pattern to help users navigate through long lists of dynamic content.
- amp-timeago: a long-awaited sample for this little gem of an extension.
As part of building our checkout flow sample, we also tested integrations with different payment providers. We were able to successfully build form submissions integrating with Authorize.net, Vantiv, WorldPay, and Card Connect. But don’t just take our word for it – try it out and let us know if you have trouble with your implementation.
A fidget spinner example built during our recent AMP By Example sprint
The best of the rest
- We’ve launched implementations for the Media session API, for both amp-audio and amp-video.
- AMP Showcase on AMPproject.org highlights websites using key features of AMP.
- makes it possible to apply AMP’s layout system to arbitrary containers.
- now automatically loads the scripts for AMP extensions that appear inside of updates.
- A new error trigger for use with amp-analytics that can capture and report problems attributable to the author of the page or to software that is used in publishing the page.
- We’ve launched the ability to serve video ads with a built-in video player to AMP pages from Doubleclick and other vendors that support the IMA SDK.
- Publishers can now schedule their ads to refresh after a set time interval.
The roadmap ahead
- Improvements to <amp-image-lightbox>
- Full launch of the date picker mentioned above
- More new templates and simple configuration for AMP Start
- Various enhancements inspired by GDPR requirements
- Messaging between amp-iframe and other elements in the parent document
- Video features, including minimizing video to the corner of the viewport
See more in the full roadmap.
* * *
Posted by Rudy Galfi, Product Manager, AMP Project