خارطة طريق مشروع AMP

What was accomplished

• Working through amp-next-page viewer bugs
• amp-render brainstorming and requirements--subset of amp-list
• amp-fit-text ResizeObserver bugs fix and test
• amp-carousel observe child elements bug fix
• legal review for TCF PostMessage Proxy API

Lessons learned

What's next

• New SESSION_ID macro
• amp-form CORS error
• GA4
• amp-render design review

What was accomplished

• amp-consent CSS fix for docs served from viewer
• amp-carousel cherry pick revert for CSS styling overriding publisher styling
• amp-render discussions with DevRel & Bento team
• block-rtc & always-serve-npa PR merged

Lessons learned

• Careful with !important styling as pubs may want to use their own styling

What's next

• Granular Consent design review
• GA4 discussions
• amp-render & amp-list continued design work

What was accomplished

• Design doc for amp-render completed, design review on 12/02
• Code complete for Serving NPA ads (publishing in Q1 2021
• amp-ima-video bugfixes
• amp-fit-text accessibility fix in review

What's next

• Begin implementing amp-render after getting feedback from design review
• Begin design for amp-list v2
• Working on finalizing design for granular consent
• Working on e2e test for amp-fit-text a11y update
• Update from GA4 team coming 12/4

What was accomplished

• Added support for prefetch in amp-autocomplete
• amp-sidebar layout bug fix
• amp-render design
• Coordinating documentation and announcements for validation changes for amp-img deprecation
• Running worker in iframe design finalized
• analytics-chunk experiment cleanup
• backupCid experiment turned on in canary & prod
• Publishers signaling to always serve NPA design finalized
• Fixed video-analytics single percentage bug
• Fixed RTL edge calculations bug for amp-base-carousel
• Fixed scroll snap alignment for amp-carousel

What's next

• amp-render finalize design
• worker-dom in iframe implementation
• continue talking to GA team to create design for GA4 support in amp-analytics
• Purpose 1 consent signal

What was accomplished

• Exposed consentMetadata to 3p ad
• Exposed CONSENT_STRING macro to analytics
• Turned on visibility-trigger-improvements experiments in canary. This experiment supports multi selector and non AMP element’s visibility trigger
• Fixed bug on base carousel currentIndex
• Added visual diff test for amp-carousel
• Fixed bug on amp-autocomplete where the first focus event is not received (PR not merged due to experimentA build failure)
• Add support to prefetch remote data in amp-autocomplete
• Created example pages to demonstrate that <img> doesn’t work well with <amp-consent> <amp-image-lightbox> <amp-analytics> and <amp-bind>
• Created valid and invalid <img> examples and their corresponding validator output files
• Tested web worker behaviors in cross origin iframe/non origin iframe created by srcdoc/non origin iframe created by data:text/html) in different browsers

What's next

• <amp-render>
• Easy way for publishers to always serve npa
• Add a new sandbox nodom version of worker dom

What was accomplished

• A11y Fixit Week
• Backup CID in localStorage (in experiment)
• <amp-list> infinite scroll performance improvement

What's next

• TCF v2 API support
• <amp-carousel> visual diff test
• Validator change to support native <img>

What was accomplished

Becca

• Led Design Review for amp-img deprecation
• Phase 1 - Approved - moving forward, digging into Validator to make img's valid amp

Caroline

• Finalizing launch for pixi
• Transitioning back to bento, planning for developer preview, e2e tests for carousel
• Prototype stream-gallery

Kevin

• Finished up tests and storybook for amp-date-countdown
• Starting to take a look amp-accordion

Priyam

• Led Design Review for amp-youtube (bento)
• Prototyped amp-youtube and automated tests

Analytics - Inabox ad visibility tracking: Listen to window resize event - Enable CMP iframe to run in the background for 1 second so they can send out update after user action - Easy configuration to always serve non personalized ad - Backup CLIENT_ID in localStorage - Debugging: Analytics not loading when user scroll to the bottom fast

Lessons learned

What's next

Becca

• Update Validator and and working on a few other components for img deprecation

Caroline

• Thumbnails for stream-gallery
• Go to slide issue for amp-base-gallery

Kevin

• Continue work on amp-accordion

Priyam

• Adding prefixes for Preact base-element
• Starting work on amp-lightbox

Analytics - Analytics service listen to img's onload event (part of the effort of <amp-img> deprecation) - Discussion: Element level granularity consent decision support - Discussion: Pass TCF 2.0 consent string via postMessages to iframes

What was accomplished

Lessons learned

What's next

What was accomplished

Lessons learned

What's next

What was accomplished

Kevin - Completed Design Doc for Handling Colors in Bento Social Share - Started protoype of Preact Component for amp-date-countdown (Bento)

Priyam

• PR in review for Facebook Comments component for attribute deprecation
• Created Design Doc for Preact Component for Facebook Comments 🎉 🎉
• Prototype in Progress for Preact Component

Rebecca

• Continue to work on design doc
• Completed design review for amp-img
• Collected examples and constructed example sets, what we'll be replacing amp-img

Lessons learned

Priyam

• First time writing design doc @ Google!
• Understanding structure of AMP component and AMP framework

Rebecca

• Dev tools can be set to a particular device (such as an iphone), adjust size of screen, behave with or w/o 3G

What's next

Kevin

• Deep dive on Handling Colors for Social Share Bento
• Continue to build out amp-date-countdown (bento)

Priyam

• Go over design doc in design review
• Complete Preact Component
• Start work on Facebook Likes Component

Rebecca

• Continue to progress on amp-img work

What was accomplished

amp-img

• Wrote up intent-to-deprecate and presented at design review

Bento

• Welcome Priyam 🎉 🎉 🎉 who is ramping up on AMP and Bento
• Video docking feature
• Prototyped two approaches to amp-inline-gallery
• Type definitions and SVGs for amp-social-share
• Deep dive about passthroughNonEmpty and amp-social-share

AMP page experience tool

• Ramped up on amp.dev infrastructure, AMP linter, project architecture
• Implemented skeleton pipeline

Display locking API

• content-visibility: hiddenmatchable and beforematch are available in Chrome Canary, experiment with amp-accordion-display-locking here!

Lessons learned

• AMP components are cool

What's next

amp-img

• Acting on feedback from design review

Bento

• Video docking performance issues
• Design for amp-facebook-* components
• Design doc for colors and styling in amp-social-share
• Storybook samples for amp-social-share
• Investigating amp-sidebar

AMP page experience tool

• Implement 100% of checks, prepare for QA.

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

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

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

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

What was accomplished

OpenJS World Summit

Bento

• Foundational Preact prototype for amp-base-carousel
• Documenting Bento component design principles

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

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!

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.

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

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)

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

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

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

• API for addons on Storybook.
• MutationObserver follows disconnected subtrees.

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

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

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.

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)

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

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

What's next

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

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

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

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.

What's next

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