#BlackLivesMatter
Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP

The AMP Project Roadmap

The ongoing development of AMP is conducted in working groups, each with knowledge or interest in a specific area of AMP.

To make their work visible to the community all groups provide regular status updates with details of what they have accomplished and what's up next.

All of the updates listed here are available as issues on GitHub and we'd love you to join the conversation there!

Select working groups

User Interface & Accessibility

Status Update Fri Jul 31 2020

What was accomplished

Becca Worked on documents (I2I and I2D) for amp-youtube and amp-img

Kevin Bento implemented a new way of handling children, how to style the individual social share components

Caroline Working on inline gallery features for amp-base-carousel, amp-base-carousel extension is live Allowlisted amp accordion actions in email, fixed template rendering bug for ssr code

Wassim Merged a PR to allowlist select menus Has a PR in review for supporting icon fonts in amp-next-page

Lessons learned

Becca Learned about the flow required for creating new major features in amp

Kevin How shadow group works and how children function in bento

Caroline Did a WFH physical health checkup, and learned you should take a standing break every hour

All details on GitHub

What's next

Becca Design review for Amp-img and amp-youtube

Kevin Working on tests for amp-social-share

Caroline Amp-base-carousel, amp-inline-gallery, accessibility changes

Wassim Fixing as many amp-next-page issues as possible Completing transition elements

All details on GitHub

User Interface & Accessibility

Status Update Fri Jul 17 2020

What was accomplished

Alan Completed design of Video components for Bento and reviewed with Bento team

Caroline Implemented and merged Bento Carousel features including: smooth scrolling and looping Amp version of component and default arrows feature currently in review

Kevin Merged moving of handling iOS target links from AMP to Preact for Social-Share Discussed approach for color of social-share-icons and handling of children with Bento team

Wassim Reviewed Whatsapp implementation Transition out of UI team in progress In process of looking for new host for intern

Lessons learned

All details on GitHub

What's next

Alan Begin implementation of video components

Caroline Typedefs for existing bento components Continue on Carousel

Kevin Work on passthrough-non-empty children handling for bento and other Social Share features

All details on GitHub

User Interface & Accessibility

Status Update Mon Jul 06 2020

What was accomplished

OpenJS World Summit

Bento

  • Foundational Preact prototype for amp-base-carousel
  • Documenting Bento component design principles
All details on GitHub

Lessons learned

What's next

  • Kris goes on Paternity leave again.

Bento

  • Continued progress on amp-base-carousel and friends
  • Changes in review for amp-social-share open items
  • Documentation of amp-social-share
All details on GitHub

User Interface & Accessibility

Status Update Mon Jun 22 2020

What was accomplished

  • Final changes in for <amp-social-share> in Bento

  • amp-img documentation for <img> cache transform.

  • amp-youtube ad configuration parameter.

  • amp-next-page infinite loop issue

  • Team-wide dogfooding exercise

  • Team-wide Fix-it

Lessons learned

  • A lot of stale issues
  • Lots of setbacks dogfooding!
All details on GitHub

What's next

  • OpenJS World summit next week!
  • I2I amp-youtube ad configuration parameter.
  • Launch Storybook AMP addon
  • Planning priorities for rest of the year.
All details on GitHub

User Interface & Accessibility

Status Update Mon Jun 08 2020

What was Accomplished

  • Alan - Workaround for virtual keyboards for datepickers inside lightboxes
  • Caroline - Added Bento support for intrinsic and responsive layout, Sizer elements now have a spot to go into shadow DOM when relevant
  • Kevin - Completed another iteration on Social-Share, removing bindings from Preact component
  • Naina - Completed recording a talk for JS Conference
  • Rebecca - Complete amp-img bug (errors were being thrown from event helper in runtime), Draft PR in progress for next bug

Lessons Learned

  • Caroline - amp-carousel:0.2 does not directly rely on amp-base-carousel
  • Kevin - Empty commits can be used to kickoff failed travis build on github, Learned more about Closure compiler and type annotations
  • Rebecca - More experience with xcode, how to edit host file, how to use travis, how to read pantheon, Learned that you can restart only the broken part of a travis build
All details on GitHub

What's Next

  • All - Fixit week!
  • Alan - Video in Bento, Amp story animation docs
  • Caroline - Prototyping carousel for bento
  • Kevin - Create a design doc for social share to document the various designs and the tradeoffs for them
  • Naina - Recording more talks (including Amp contributor summit talk)
All details on GitHub

User Interface & Accessibility

Status Update Tue May 26 2020

What was accomplished

Storybook 📖

  • Worked on open sourcing the Storybook addon for AMP

Bento 🍱

  • Preact modifications to SocialShare merged, ongoing discussions on AMP modifications
  • Merged initial amp-selector and amp-fit-text implementations
  • Modified PreactBaseElement to create a slot for internal AMP services, i.e. the sizer for layout=responsive
  • Bumped Bento components by a full integer (0.1 => 1.0 instead of 0.1 => 0.2)

Bugs 🐛

  • Kevin's first week on triage!! 🎉
  • amp-img missing src leads to obscure error message bug fix
  • amp-carousel:0.2 autoadvance during prerender bug fix
All details on GitHub

UX 🖥️

  • amp-lightbox and amp-image-lightbox for AMP4Email

Other

  • Validating amp-story-animation & docs

Lessons learned

  • return type of internal objects should be a struct
  • static methods inside component functions should be hoisted to improve performance (instantiation)
  • Preact props need to be quoted, otherwise they get obscured by the compiler
  • You need a computer to do things
  • Zewen doesn't like dark mode during the day -- the range of colors expressing the information hierarchy leaves more to be desired

What's next

  • modifications to amp-social-share
  • ongoing discussion & design review for lightbox in email
  • prototype carousels for Bento
  • more bugs to be fixed
All details on GitHub

User Interface & Accessibility

Status Update Mon May 11 2020

What was accomplished

Kevin: - Progress on amp-social-share Preact mode - More React training!

Caroline: - amp-list[layout=container] available: - launched on email! - experimental elsewhere - Progress on amp-selector for Bento - Progress on amp-fit-text for Bento - Was on release duty - Rolled out display locking, in testing for one week - a11y vendor conversations - Discussed amp-lightbox in email

Wassim: - amp-imgur format fix - amp-facebook fullscreen ongoing - Storybook --addon-amp

Alan: - amp-story-animation code complete - Turned on ECMASCRIPT 2020 :)

Rebecca: - Ramping up with new extension Codelab.

Lessons learned

All details on GitHub

What's next

  • amp-social-share Preact mode
  • More Bento: amp-selector, amp-fit-text, starting discussions for amp-carousel
  • Testing display locking using CSS property instead of an attribute.
  • Launching amp-story-animation
  • Investigating migrating amp-carousel 0.1 to 0.2
  • (Reproing amp-carousel 0.2 in amp-lightbox bug)
  • Finalizing design for video on Bento mode
All details on GitHub

User Interface & Accessibility

Status Update Mon Apr 27 2020

What was accomplished

Bento: - Design review for styling - Progress on amp-selector - Progress on design for amp-social-share in Preact mode - amp-social-share Storybook examples

amp-carousel 0.2: - Investigated stability issues.

amp-list[layout=container]: - Progress on launching

amp-story-animation: - Done: scoping selectors to an element - Done: sequencing

Display locking: - Setting up infrastructure for experiment rollout

amp-next-page 0.2: - Bugfix for deep parsing - Bugfix for recommendation box not rendering

Storybook: - Styled JSX

Lessons learned

  • URL expansion is async and specific to AMP—some components on Preact mode need a different solution.

  • Closure doesn't have intersection types :(

  • Wassim learned a lot on how custom fonts work on AMP

  • optional ?? fallback syntax for nullish values

All details on GitHub

What's next

  • Rebecca joining us!
  • More on design for amp-social-share on Preact mode
  • amp-story-animation: viewport units/CSS extensions
  • Using only amp-animation spec format for amp-story presets.
  • Rollout display locking
  • Caroline on release duty next week
  • amp-selector in Bento
  • amp-fit-text in Bento
  • Reviewing font strategy change
  • Transformer for font-display: optional on Google Fonts URLs.
All details on GitHub

User Interface & Accessibility

Status Update Mon Apr 13 2020

What was accomplished

  • Enabled prerendering on amp-social-share
  • Stabilized visual-diff tests:
  • amp-sidebar
  • amp-accordion
  • amp-list[layout=container] P0, rollback, post mortems
  • amp-selector:0.2 in Bento
  • Support for amp-animation in Stories
  • writing base tests to increase confidence
  • implementation in progress
  • Fixed navigator.share causing an exception on user cancel for amp-social-share
  • Fixed amp-social-share:0.2 assertion for type=system
  • amp-list[single-items] accessibility fix for role attribute
  • amp-recaptcha-input[global] attribute support
  • amp-form supporting encoding type attribute for form submission
  • gulp storybook tasks
  • amp-next-page url issue fix

Lessons learned

  • There are different levels of logging based on assertion types i.e. devAssert vs user().warn()
  • Write tests early and often -- when we don't have tests for a feature and other features are written on top of it that don't allow it to write tests, you have to refactor existing features before you can even add tests.
  • Some unit tests unnecessarily manipulate internal component state instead of waiting for lifecycle signals as natural cues (forcing buildCallback instead of waiting for whenBuilt)
All details on GitHub

What's next

  • amp-carousel:0.2 stability related bugs
  • Adding features to <amp-story-animation>: CSS extension support, viewport units and sequencing
  • React training
  • Storybook examples for a component
All details on GitHub

User Interface & Accessibility

Status Update Mon Mar 30 2020

What was accomplished

  • Documenting CSS cases where AMP cannot guarantee that the layout won't shift.
  • Removed layout shift by position prop on <amp-consent>.
  • <amp-app-banner> using AmpDoc API to get <meta> information on shadow roots, etc.
  • Reviewed 3p player component changes
  • Documentation for <amp-sidebar>, new amp.dev example merged
  • <amp-list> single-item a11y fix
  • <amp-recaptcha> fix for changing endpoint for “global” attribute
  • Merged <amp-social-share> for Bento
  • Introduced unit tests for <amp-timeago> in Bento
  • Investigated layout shift in <amp-social-share>
  • Introduced <amp-autocomplete> to the email format
  • Began work on <amp-selector> in Bento

Lessons learned

All details on GitHub

What's next

  • <amp-form> support Content-Type: encoded requests
  • <amp-selector> in Bento
  • Aliased video players: runtime implementation
All details on GitHub

User Interface & Accessibility

Status Update Mon Mar 16 2020

What was accomplished

  • amp-list supporting layout="container"
  • introduce "disable-inline-width" attribute to pair with "sizes" attribute
  • amp-timeago code-complete
  • amp-social-share undergoing code review
  • fixed longstanding bug that fires default high trust on amp-carousel v1 slideChange event
  • design doc for styling in Bento
  • display locking API setting up metrics and Origin Trial
  • blocked PR that sends document innerhtml to third party
  • set amp-consent to position: fixed !important to make sure it never causes reflow
  • meeting with performance teams for a list of components that cause reflow
  • proposal for bot for i2i new extension check lists
  • proposal for prettier on html
  • replacement for gulp serve to integrate with module/no module
  • wfh setup
  • wordpress editor work: masking, cti links
  • AMP release duty
  • working with ads on scroll-to-expand UX

Lessons learned

  • Kris is about to pay $600/mo for internet
All details on GitHub

What's next

  • investigating composite components in Bento (accordion, sidebar, selector, etc.)
  • outlining launch steps for Bento components
  • constant team video chat room open to join and have one-off conversations
  • amp-time-picker component UX
  • work on bot for i2i new extension checklists
  • work on prettier on html
  • good first issues for new team member
  • prepare additional manual test cases for QA
All details on GitHub

User Interface & Accessibility

Status Update Mon Mar 02 2020

What was accomplished

  • new UI person 🎉🎉🎉
  • React Training
  • styling in Bento discussion and design document
  • fullscreen action versus fullscreenEnter event -- aliased action for backwards compatibility/interface consistency
  • amp-video-iframe jwplayer integration default (it's easier now)
  • annotated media components with common i-amphtml-media-component class name
  • amp-carousel autoplay bug on amp4ads
  • static configured component transformer -- first step towards declarative video players
  • proposal to use structured data for describing hero videos for a transform

Lessons learned

If there is a certain interface inconsistency, fix it under one cohesive implementation and keep the redundant concept as an alias for backwards compatibility. We have certain things in the codebase where the name changes but the concept stays the same.

All details on GitHub

What's next

  • Launch timeago v2 under experimental
  • amp-list layout=container resolution
  • declarative video players
  • video docking interactivity/nudging between multiple videos
All details on GitHub

User Interface & Accessibility

Status Update Fri Feb 14 2020

What was accomplished

  • Bento amp-timeago, ongoing discussions
  • amp-read-aloud component - design
  • Data-param-* attributes for amp video iframe
  • Amp-inline-gallery in, amp-stream-gallery in
  • Workaround for max age amp-addthis bug
  • amp-video-iframe vendor documents
  • Aliased components transform
  • Docking rectangle refactor
  • amp-next-page—host page visibility and analytics support
  • Unordered gesture swipes bug in prod
  • Advising UX design for stories editor
  • Advised AMP stories team about adaptive streaming and reducing rebuffers
  • Post processing on build output after closure compiler to output smaller code that is functionally equivalent
All details on GitHub

What's next

  • React Training
  • amp-timeago continued progress
  • amp-social-share continued progress
  • Renudging videos
  • consolidating classes for media components so that they can be hidden for display locking
  • video features for Bento
  • validation for amp-next-page
  • open source WP editor repo
All details on GitHub

User Interface & Accessibility

Status Update Fri Jan 31 2020

What was accomplished

  • Open sourced @ampproject/filesize, a library for monitoring file size changes
  • amp-auto-lightbox:
  • Fix to prevent working on unlaid out <amp-img>s
  • Use new mutator API (#26587)
  • Proposal for aliased 3rd party video players, vendor extensions can configured declaratively rather than writing a full implementation.
  • Work on amp-carousel v2 performance
  • Started a playground repo for trying Bento components inside React apps
  • Support for templated separator elements in amp-next-page
  • Investigating the state of AMP websites in 2020
All details on GitHub

What's next

  • Coordinate with Quality Assurance on amp-carousel v2 performance
  • Merge amp-analytics support for amp-next-page
  • Merge support for remote loading of articles in amp-next-page
  • Bento timeago component
  • Take the declarative 3rd party video player proposal to design review
All details on GitHub

User Interface & Accessibility

Status Update Fri Jan 17 2020

What was accomplished

  • Plans to launch amp-carousel v2
  • Simplify video docking logic
  • Performance measurement extension
  • amp-next-page infinite loading (+ unload/reload pages from memory)
  • amp-next-page unit tests
  • Investigating metrics for Display Locking on amp-accordion
  • Fixed bug to remask an amp-inputmask input element on form state change
  • Fixed bug to reverify form after textarea value changes on form state change
  • Discussed amp-consent accessibility

Lessons learned

  • Time to interactive (performance metric) is only available as a polyfill so far
All details on GitHub

What's next

  • amp-next-page default separators and more box + transitions (stretch goal)
  • Ongoing Display Locking work
  • React foundations for Bento
All details on GitHub

User Interface & Accessibility

Status Update Fri Jan 03 2020

What was accomplished

  • amp-next-page 1.0 design review
  • Sticky, hidden and fixed elements in amp-next-page + history manipulation
  • Light refactor and documentation for amp-next-page
  • Display Locking implementation on amp-accordion, findings, and feedback -- go/display-locking-accordion
  • go/a11y-in-amp-public discussion with AMP AC
  • Inline autocomplete launched
  • amp-img[sizes] ongoing discussion
  • More keyboard support for amp-nested-menu

Lessons learned

  • Scrolling is tricky with visual diffs!
All details on GitHub

What's next

  • amp-next-page infinite page loading + separators/recommendation box
  • amp-img[sizes] attribute naming bikeshed
  • Preact/React fundamentals for Bento
  • Deprecating amp-sidebar 2.0 (merge work from 2.0 into 1.0)
All details on GitHub

User Interface & Accessibility

Status Update Fri Dec 06 2019

What was accomplished

  • Video Docking: Scroll back up to the original video
  • Visual tests for docking
  • Fixed an issue with fonts
  • Inline autocomplete experimentally launched! 👏👏
  • Changes for inline-gallery in base-carousel
  • [UI] Validator badges design

Lessons learned

  • Video docking is stable now (manual tests)!
  • Learned about a11y and pointer-events: none
  • Should use touch-action / pointer-events instead of gestures.js
  • Visual diff API is easy to use!
  • It is possible to reducing the bundle size by adding code!
All details on GitHub

What's next

  • Document lack of support for docking in the viewer
  • Docking interaction for multiple videos
  • Display locking
  • More inline autocomplete
  • Merging inline gallery + documentation
  • Look into blurry placeholders
  • Unify fonts inside AMP
All details on GitHub

User Interface & Accessibility

Status Update Fri Nov 22 2019

What was accomplished

  • Video docking fixes (draft)
  • Looked into optimizing css for documents (adaptive css limit), most documents are including all of the website’s css instead of the css for that document so that optimization is enough
  • Dead CSS elimination once we get a separate binary for development mode
  • Addressed security vulnerabilities on the animations library
  • AMP Validator Chrome Extension status icons design
  • Wordpress Editor UI with Sam
  • Inline autocomplete cleanup and unit tests
  • Investigate a11y bug in amp-carousel 0.1
  • Brainstormed better accessibility in AMP
  • Deprecated amp-user-location
  • PR to inject MultidocManager’s dependencies and reduce amp-next-page’s size
  • PR for the initial implementation of amp-next-page v2
  • Nit type fix on PositionObserver

Lessons learned

  • @alanorozco can paint and DJ
  • Engineers have an artistic side too! 🎨
  • You can have a conditional on a boolean 😮! The more you know!
All details on GitHub

What's next

  • Inline autocomplete visual, e2e, validation tests
  • Display locking
  • Merge PRs for amp-next-page / MultidocManager
  • Take amp-next-page v2 to design review
  • Controls disappearing on the docked video
  • Continue work on the Wordpress Editor UI
All details on GitHub

User Interface & Accessibility

Status Update Fri Nov 08 2019

What was accomplished

  • Manual document visibility management for amp-next-page (fixes amp-pixel)
  • Fixed amp-mow-player
  • Fix for social sharing buttons
  • Multiple fixes, refactor and cleanup for amp-carousel
  • Tracking amp-nested-menu and amp-mega-menu launches
  • Refactored error handling for amp-list load-more
  • Server side rendering on auto-complete code complete
  • Inline autocomplete refactor and accessibility audit
  • Adding autocomplete to the amp for email spec
  • Fix amp-carousel bug where keys are interacting with the email client
  • P0 amp-form submission redirect was broken with SSR
  • 🎉Zewen joined, will be looking into UX for amp-carousel, page transitions and amp-next-page

Lessons learned

  • Unexplained bad code can become worse code
  • If you do something hacky, say it’s hacky (comment)
  • P0s are scary 😱
All details on GitHub

What's next

  • Bug bash for amp-next-page <> amp-analytics
  • Fix URLs not reverting when scrolling back on amp-next-page
  • Fix arrow-key handling on amp-carousel 0.2
  • amp-carousel bug bash
  • Tests for amp-autocomplete inline
  • Security review for amp-autocomplete (for email)
All details on GitHub

User Interface & Accessibility

Status Update Fri Oct 25 2019

What was accomplished

  • built a workaround for amp-live-list on Google AMP cache (approach not taken)
  • Validation & documentation for mega menu
  • Clear some launch blockers for nested menu
  • inline-autocomplete
  • design review and implementation
  • initial bug bash
  • fixing bugs for amp-form in AMP Email
  • maintenance around extensions generator
  • give ownership to outreach/ui wg
  • core video files ownership to ui wg
  • 3p video components on review (amp-empower, amp-redbull-player)

Lessons learned

  • If you think you have fix for validation/cache, it could be for just one level of caching
  • If engineering cost becomes too high, we can make requirements more flexible
All details on GitHub

What's next

  • Start hiring process for ui wg
  • Get mega menu ready for launch
  • Revisit launch requirements for sidebar v2 + nested menu, validation & docs document recommendation for video player creation
  • if video is docked and ad is playing, change controls with button to go back to inline
  • Support SSR on amp-autocomplete
  • Inline autocomplete continued implementation
  • autocomplete in AMP for Email security proposal
All details on GitHub

User Interface & Accessibility

Status Update Fri Sep 27 2019

What was accomplished

  • mega menu: building up a prototype / demo, figuring out a11y strategy
  • tested voice over (MacOS, NVDA), still need to test on JAWS
  • feedback from @dvoytenko on sidebar
  • API, history questions, will move forward with simplest solution for now
  • drill down component API more clear
  • parallax PR is getting ready, behind experiment flag for both desktop and mobile
  • PR for some parallax changes to amp-orientation-observer
  • amp-bind for audio and video
  • 2020 planning
  • fixing carousel 0.1 bug on ios13, investigate cherry pick
  • OWNERS changes for all UI components to the wg-ui-and-a11y alias.
  • Prepare a11y presentation for Contributor Summit
  • inline autocomplete:
  • define MVP requirements
  • investigate pulling in 3p library (tributejs) versus building from scratch

Lessons learned

  • aria-haspopup="true" is only for menus, not all screen readers support aria-haspopup="dialog" etc
  • test screen readers with both tab navigation and by lists, headings, etc.
  • interesting screen usage survery results
All details on GitHub

What's next

  • continue refining mega menu and schedule a11y audit
  • investigate amp-next-page bugs
  • amp-stream-gallery
All details on GitHub