CINXE.COM

<!doctype html><html amp lang="vi" i-amphtml-binding i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="preload" href="/static/fonts/poppins-v5-latin-700.woff2" as="font" crossorigin><link rel="preload" href="/static/fonts/noto-sans-v7-latin-700.woff2" as="font" crossorigin><meta name="theme-color" content="#005af0"><meta name="robots" content="noindex,follow"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Roadmap"><meta name="twitter:creator" content="@ampproject"><meta name="twitter:site" content="@ampproject"><meta name="twitter:image" content="https://amp.dev/static/img/sharing/default-600x314.png"><meta property="og:title" content="Roadmap"><meta property="og:url" content="https://amp.dev/vi/community/roadmap/"><meta property="og:image" content="https://amp.dev/static/img/sharing/default-600x314.png"><meta property="og:image:width" content="600"><meta property="og:image:height" content="314"><meta name="supported-amp-formats" content="websites,stories,ads,email"><meta name="page-locale" content="vi"><meta http-equiv="origin-trial" content="AviuuiVhVdQ3GpVtxSpyMT+XsL/qGGYmyiyLvYSKPL3rRDLipe/ard5x+DXVlrATtolwX75VtpSKc9IEzLDd4AkAAABmeyJvcmlnaW4iOiJodHRwczovL2FtcC5kZXY6NDQzIiwiZmVhdHVyZSI6IkV4cGVyaW1lbnRhbEF1dG9wbGF5RHluYW1pY0RlbGVnYXRpb24iLCJleHBpcnkiOjE1NzA1Nzg0NDF9"><style amp-runtime i-amphtml-version="012406131415000">html{overflow-x:hidden!important}html.i-amphtml-fie{height:100%!important;width:100%!important}html:not([amp4ads]),html:not([amp4ads]) body{height:auto!important}html:not([amp4ads]) body{margin:0!important}body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y pinch-zoom;touch-action:pan-y pinch-zoom}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}#i-amphtml-wrapper+body{visibility:visible}#i-amphtml-wrapper+body .i-amphtml-lightbox-element,#i-amphtml-wrapper+body[i-amphtml-lightbox]{visibility:hidden}#i-amphtml-wrapper+body[i-amphtml-lightbox] .i-amphtml-lightbox-element{visibility:visible}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}amp-instagram{padding:54px 0px 0px!important;background-color:#fff}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}amp-experiment,amp-live-list>[update]{display:none}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list [fetch-error],amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-list[diffable] div[role=list]{display:block}amp-story-page,amp-story[standalone]{min-height:1px!important;display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#000!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .amp-active>div,amp-story .i-amphtml-loader-background{display:none!important}amp-story-page:not(:first-of-type):not([distance]):not([active]){transform:translateY(1000vh)!important}amp-autocomplete{position:relative!important;display:inline-block!important}amp-autocomplete>input,amp-autocomplete>textarea{padding:0.5rem;border:1px solid rgba(0,0,0,.33)}.i-amphtml-autocomplete-results,amp-autocomplete>input,amp-autocomplete>textarea{font-size:1rem;line-height:1.5rem}[amp-fx^=fly-in]{visibility:hidden}amp-script[nodom],amp-script[sandboxed]{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden} /*# sourceURL=/css/ampdoc.css*/[hidden]{display:none!important}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;pointer-events:none}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][heights]:not([layout]):not(.i-amphtml-layout-responsive),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic,[layout=intrinsic][width][height]:not(.i-amphtml-layout-intrinsic){display:inline-block;position:relative;max-width:100%}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]:not(.i-amphtml-layout-fixed-height){display:block;position:relative}.i-amphtml-layout-fill,.i-amphtml-layout-fill.i-amphtml-notbuilt,[layout=fill]:not(.i-amphtml-layout-fill),body noscript>*{display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}body noscript>*{position:absolute!important;width:100%;height:100%;z-index:2}body noscript{display:inline!important}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}@supports (aspect-ratio:1/1){i-amphtml-sizer.i-amphtml-disable-ar{display:none!important}}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*,[width][height][heights]:not([layout]):not(.i-amphtml-element)>*,[width][height][sizes]:not([layout]):not(.i-amphtml-element)>*{display:none}amp-img:not(.i-amphtml-element)[i-amphtml-ssr]>img.i-amphtml-fill-content{display:block}.i-amphtml-notbuilt:not(.i-amphtml-layout-container),[layout]:not([layout=container]):not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){color:transparent!important;line-height:0!important}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder],[width][height][heights]:not([layout]):not(.i-amphtml-element)>[placeholder],[width][height][sizes]:not([layout]):not(.i-amphtml-element)>[placeholder]{display:block;line-height:normal}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}amp-img[i-amphtml-ssr]:not(.i-amphtml-element)>[placeholder]{z-index:auto}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden;display:initial;line-height:normal}.i-amphtml-layout-size-defined>[overflow]{position:absolute}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-analytics,amp-auto-ads,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}amp-story{visibility:hidden!important}html.i-amphtml-fie>amp-analytics{position:initial!important}[visible-when-invalid]:not(.visible),form [submit-error],form [submit-success],form [submitting]{display:none}amp-accordion{display:block!important}@media (min-width:1px){:where(amp-accordion>section)>:first-child{margin:0;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}:where(amp-accordion>section)>:last-child{margin:0}}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}amp-accordion,amp-accordion>section{margin:0}amp-accordion:not(.i-amphtml-built)>section>:last-child{display:none!important}amp-accordion:not(.i-amphtml-built)>section[expanded]>:last-child{display:block!important} /*# sourceURL=/css/ampshared.css*/</style><script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" custom-element="amp-analytics" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async src="https://cdn.ampproject.org/v0/amp-animation-0.1.mjs" custom-element="amp-animation" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" crossorigin="anonymous" custom-element="amp-animation"></script><script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.mjs" custom-element="amp-bind" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" crossorigin="anonymous" custom-element="amp-bind"></script><script async src="https://cdn.ampproject.org/v0/amp-consent-0.1.mjs" custom-element="amp-consent" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-consent-0.1.js" crossorigin="anonymous" custom-element="amp-consent"></script><script async src="https://cdn.ampproject.org/v0/amp-geo-0.1.mjs" custom-element="amp-geo" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-geo-0.1.js" crossorigin="anonymous" custom-element="amp-geo"></script><script async src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.mjs" custom-element="amp-install-serviceworker" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js" crossorigin="anonymous" custom-element="amp-install-serviceworker"></script><script async src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.mjs" custom-element="amp-position-observer" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js" crossorigin="anonymous" custom-element="amp-position-observer"></script><link rel="shortcut icon" href="/static/img/favicon.png"><link rel="canonical" href="https://amp.dev/vi/community/roadmap/"><link rel="alternate" hreflang="x-default" href="https://amp.dev/community/roadmap/"><link rel="alternate" hreflang="en" href="https://amp.dev/community/roadmap/"><link rel="alternate" hreflang="de" href="https://amp.dev/de/community/roadmap/"><link rel="alternate" hreflang="fr" href="https://amp.dev/fr/community/roadmap/"><link rel="alternate" hreflang="ar" href="https://amp.dev/ar/community/roadmap/"><link rel="alternate" hreflang="es" href="https://amp.dev/es/community/roadmap/"><link rel="alternate" hreflang="it" href="https://amp.dev/it/community/roadmap/"><link rel="alternate" hreflang="id" href="https://amp.dev/id/community/roadmap/"><link rel="alternate" hreflang="ja" href="https://amp.dev/ja/community/roadmap/"><link rel="alternate" hreflang="ko" href="https://amp.dev/ko/community/roadmap/"><link rel="alternate" hreflang="pt_BR" href="https://amp.dev/pt_br/community/roadmap/"><link rel="alternate" hreflang="ru" href="https://amp.dev/ru/community/roadmap/"><link rel="alternate" hreflang="tr" href="https://amp.dev/tr/community/roadmap/"><link rel="alternate" hreflang="zh_CN" href="https://amp.dev/zh_cn/community/roadmap/"><link rel="alternate" hreflang="pl" href="https://amp.dev/pl/community/roadmap/"><title>Roadmap - amp.dev</title><script type="application/ld+json">{"@context":"http://schema.org","@type":"Webpage","url":"https://amp.dev/vi/community/roadmap/ ","name":"amp.dev","headline":"Roadmap","mainEntityOfPage":{"@type":"WebPage","@id":"https://amp.dev"},"publisher":{"@type":"Organization","name":"AMP Project","logo":{"url":"https://amp.dev/static/img/icons/icon-512x512.png","width":512,"height":512,"@type":"ImageObject"}},"image":{"@type":"ImageObject","url":"https://amp.dev/static/img/sharing/default-600x314.png","width":600,"height":314}}</script><style amp-custom>.ap-a-pill{display:inline-block;margin:5px;padding:5px 10px;border:none;border-radius:25px;background:var(--background-color,#fff);line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-weight:700;box-shadow:0 10px 25px 0 rgba(0,0,0,.15);color:var(--color,#8c8f94);font-family:Noto Sans,system;transition:background-color .2s ease-in,color .2s ease-in,box-shadow .25s ease-in;cursor:pointer}@media(min-width:550px){.ap-a-pill{padding:5px 20px;margin:5px 10px}}@media(min-width:768px){.ap-a-pill{margin:5px;padding:5px 20px}}.ap-a-pill.filtered,.ap-a-pill:hover{box-shadow:0 2px 5px 0 rgba(0,0,0,.15);background:#005af0;color:#fff}.ap-a-pill-link{color:#005af0}.ap-a-pill-small{padding:2px 12px}.ap-a-pill-flat{box-shadow:none;background-color:#ebebf0}.ap-a-pill-meta{box-shadow:none;background-color:#48525c;color:#fff;pointer-events:none}.ap-a-pill-bento{background-color:#d45a5a;color:#fff}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Ubuntu Light"),local("Segoe UI Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:300;src:local(".SFNSText-LightItalic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Light Italic"),local("Segoe UI Light Italic"),local("Roboto-LightItalic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:400;src:local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Italic"),local("Segoe UI Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:500;src:local(".SFNSText-Medium"),local(".HelveticaNeueDeskInterface-MediumP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium"),local("Segoe UI Semibold"),local("Roboto-Medium"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:500;src:local(".SFNSText-MediumItalic"),local(".HelveticaNeueDeskInterface-MediumItalicP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium Italic"),local("Segoe UI Semibold Italic"),local("Roboto-MediumItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Segoe UI Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:700;src:local(".SFNSText-BoldItalic"),local(".HelveticaNeueDeskInterface-BoldItalic"),local(".LucidaGrandeUI"),local("Ubuntu Bold Italic"),local("Roboto-BoldItalic"),local("DroidSans-Bold"),local("Segoe UI Bold Italic"),local("Tahoma Bold")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:400;font-display:optional;src:local("Noto Sans"),local("NotoSans"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff) format("woff")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:700;font-display:optional;src:local("Noto Sans Bold"),local("NotoSans-Bold"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff) format("woff")}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:optional;src:local("Poppins Bold"),local("Poppins-Bold"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff) format("woff")}@font-face{font-family:Fira Mono;font-style:normal;font-weight:400;font-display:optional;src:local("Fira Mono"),local("FiraMono"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff2) format("woff2"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff) format("woff")}*{box-sizing:border-box}body,html{padding:0;margin:0;min-width:240px;color:#48525c;background-color:#fff;font-size:16px;font-family:Noto Sans,system;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}@media(max-width:240px){body,html{font-size:14px}}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button{width:3em;height:3em;border-radius:50%;box-shadow:0 10px 15px 0 rgba(0,0,0,.4);transition:.4s;background-color:#fff;position:relative;box-sizing:border-box;margin:1em;border-style:none;background-position:50% 50%;background-repeat:no-repeat;z-index:10;pointer-events:all}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0' %3E%3Cpath d='M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button:hover{cursor:pointer;box-shadow:0 20px 30px 0 rgba(0,0,0,.2);background-color:#fff}:target:before{content:"";display:block;visibility:hidden;height:120px;margin-top:-120px}@media(min-width:1024px){h1:target:before{height:75px;margin-top:-75px}h2:target:before{height:81px;margin-top:-81px}h3:target:before{height:87px;margin-top:-87px}h4:target:before{height:90px;margin-top:-90px}h5:target:before{height:93px;margin-top:-93px}h6:target:before{height:97px;margin-top:-97px}}h1,h2,h3,h4,h5{margin-top:1.5rem;margin-bottom:.75em;font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}h1{font-size:2.2rem;margin-top:3rem}section.-t h1:first-of-type{margin-top:0}@media(min-width:768px){section.-t h1:first-of-type{margin-bottom:2rem}}h2{font-size:1.8rem;margin-top:2rem}h3{font-size:1.414rem;margin-top:1.8rem}h4{font-size:1.2rem}h5{font-size:1rem}.-t .intro,.ap--section .intro{font-size:1rem;padding:0}.-t .intro *,.ap--section .intro *{font-size:inherit}.-t p,.ap--section p{line-height:1.6rem;font-weight:400;color:#48525c;display:block;margin-top:1.1em;margin-bottom:0;font-size:1rem}.-t p small,.ap--section p small{font-size:.875rem}.-t code,.ap--section code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em}.-t code,.-t p,.ap--section code,.ap--section p{overflow-wrap:break-word}.-t a,.ap--section a{position:relative;z-index:10}.-t a code,.ap--section a code{color:#005af0;z-index:-1}.-t pre,.ap--section pre{font-family:Fira Mono,monospace;font-weight:500;font-size:1rem;white-space:pre-wrap}.-t>ol,.-t>ul,.ap--section>ol,.ap--section>ul{line-height:1.6rem;font-weight:400;color:#48525c;display:block;padding-left:2em;margin:1.5em 0}.-t>ol ol,.-t>ol ul,.-t>ul ol,.-t>ul ul,.ap--section>ol ol,.ap--section>ol ul,.ap--section>ul ol,.ap--section>ul ul{padding-left:2em;margin:0}.-t>ol li,.-t>ul li,.ap--section>ol li,.ap--section>ul li{padding-left:.5em}.-t>ol li p,.-t>ul li p,.ap--section>ol li p,.ap--section>ul li p{font-size:1em}.-t figure figcaption,.ap--section figure figcaption{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;margin-top:.3em}.-t hr,.ap--section hr{height:1px;margin:.75em 0;background-color:#ebebf0;border:none}.-n{display:flex;align-items:center;text-decoration:none;padding:0 0 1.5em;margin:0}.-r{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-weight:700;color:#005af0;line-height:1.3;transition:transform .3s ease}.-i{fill:#005af0;padding:.438em 0;margin-bottom:auto;margin-right:.625em;box-sizing:initial;transition:transform .3s ease}.-n:hover .-i,.-n:hover .-r{transform:translateX(10px)}.-s{border-bottom:1px solid #ebebf0}.-s .-r{font-size:1rem;font-family:Poppins,system;font-weight:700;color:#000;padding-left:10px}.-s .-i{width:1.375em;height:1.375em;fill:#fff;background-color:#005af0;overflow:hidden;padding:.563em}.-s .-i,.-s:hover .-i{box-shadow:0 10px 20px 0 rgba(0,0,0,.25)}.-s:hover .-i svg{animation:duepduep .3s ease}a{font-weight:700;text-decoration:none;color:#005af0}a code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em;color:#005af0}.ap-a-ico{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:1em;height:1em}.ap-a-btn{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1em;color:#fff;display:inline-block;max-width:100%;width:auto;height:auto;padding:.75em 1.75em;margin:0;text-decoration:none;text-align:center;border-radius:3px;background-color:#005af0;border:none;cursor:pointer;box-shadow:0 15px 35px -5px rgba(0,0,0,.25);transition:transform .3s ease,box-shadow .3s ease}.ap-a-btn:hover{transform:translateY(-.125em);box-shadow:0 25px 20px -15px rgba(0,0,0,.15)}@media(min-width:768px){.ap-a-btn{padding:1em 2em}}.-o{right:20px;left:auto;bottom:20px;width:calc(100% - 40px);padding:15px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;background-color:#fff;box-shadow:0 15px 30px 0 rgba(0,0,0,.15);border-radius:8px}@media(min-width:768px){.-o{max-width:500px}}.-u{position:absolute;right:15px;top:15px;-webkit-appearance:none;background-color:transparent;border:none;padding:0}.-u svg{width:10px;height:10px}.-o button{cursor:pointer}.ap--footer{position:relative;z-index:15;padding:3em 0 2em;line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem;color:#fff;background:linear-gradient(45deg,#48525c,#20202a)}.-a{width:100%;max-width:1440px;padding:0 20px;margin:0 auto}.-f{padding-bottom:4em}@media(min-width:768px){.-f{display:flex;align-items:center}}.-l{display:flex;flex-direction:column;margin-left:auto}@media(min-width:1024px){.-l{flex-direction:row}}.-c{margin:3em 2em 1em 0;color:#fff}@media(min-width:768px){.-c{margin:auto 2em auto 1em}}.-h{display:flex;list-style:none;padding:0;margin:0}.-p{flex:1 0 auto}@media(min-width:768px){.-p{margin:16px}}.-d{width:2.5em;height:2.5em;fill:#fff}@media(max-width:240px){.-d{font-size:14px}}@media(min-width:768px){.-v{display:grid;grid-gap:30px;grid-template-columns:repeat(12,1fr)}}.-m{flex:1 1 100%}.-m:nth-child(odd){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(odd){grid-column:span 6}}.-m:nth-child(2n+2){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(2n+2){grid-column:span 6}}.-g{color:#fff}.-y{list-style:none;padding:0}@media(min-width:768px){.-y+.-g{margin-top:2.5em}}.-b{position:relative}.-w{padding-left:35px;font-size:.8125rem;color:#fff}.-x{position:absolute;left:10px;top:8px;width:12px;height:12px;fill:#fff}.-k{display:flex;flex-direction:column;padding-top:4em}@media(min-width:768px){.-k{flex-direction:row;align-items:flex-end}}.-_{width:50%;max-width:200px;margin-bottom:40px;margin-right:auto}@media(min-width:768px){.-_{margin-bottom:0}}.-j{list-style:none;padding:0;margin:0}.-q{display:inline-block;margin-right:1em}.-z{font-size:.8125rem;font-weight:400;color:#fff}.-te{display:block;font-size:.875rem;margin-top:2em;color:#e2e5e6}.-te a{color:#fafafc}.ap-o-filter-bubbles-list{grid-column:7/19;display:flex;flex-wrap:wrap;padding:15px 0;margin:0 -10px}@media(min-width:550px){.ap-o-filter-bubbles-list{padding:30px 10px;margin:0;width:auto}}@media(min-width:768px){.ap-o-filter-bubbles-list{padding:30px 0}}.ap-m-tip{display:flex;padding:15px;margin-bottom:20px;border-radius:4px;background-color:#ebebf0;border:1px solid #e2e5e6}@media(min-width:768px){.ap-m-tip{padding:30px}}.ap-m-tip code{white-space:normal}.ap-m-tip-icon{width:36px;height:36px;margin-top:5px;margin-right:14px}@media(min-width:768px){.ap-m-tip-icon{margin-right:26px}}.ap-m-tip-content{font-size:.875rem;min-width:0}.ap-m-tip-content h4{font-size:1rem;margin:0 0 .75em}.ap-m-tip-content ol,.ap-m-tip-content p,.ap-m-tip-content ul{font-size:.875rem}.ap-m-tip-content ol:first-child,.ap-m-tip-content p:first-child,.ap-m-tip-content ul:first-child{margin-top:0}.-is{overflow:hidden}.-i_{background:linear-gradient(225deg,#00dcc0,#005af0 75%);grid-column:1/-1;position:relative;width:100%;margin-left:30px;border-bottom-left-radius:4em;-webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 2em),4em 100%,0 100%);clip-path:polygon(0 0,100% 0,100% calc(100% - 2em),4em 100%,0 100%)}@media(min-width:768px){.-i_{margin-left:64px;border-bottom-left-radius:6.25em;-webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 3em),6.25em 100%,0 100%);clip-path:polygon(0 0,100% 0,100% calc(100% - 3em),6.25em 100%,0 100%)}}.-i_ div.-tc{padding:0 2em}@media(min-width:768px){.-i_ div.-tc{padding:0 2.5em;margin-left:-64px}}.-ij{position:relative;margin:10vw 0 22vw}@media(min-width:768px){.-ij{grid-column:3/13;margin:7vw 0 11vw 3em}}@media(min-width:1024px){.-ij{grid-column:3/19;margin-left:5em}}@media(min-width:1280px){.-ij{grid-column:3/16}}.-iq{fill:#fff;display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:1.375em;height:1.375em;position:absolute;left:0;bottom:calc(100% + 1em);padding:.5em;border:1px solid #fff;border-radius:50%}@media(min-width:768px){.-iq{left:auto;bottom:auto;right:calc(100% + .75em);top:-.6em}}@media(min-width:1024px){.-iq{width:3em;height:3em;right:calc(100% + 1em);top:-1.5em;padding:1em;border-width:2px}}.-iz{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1.65rem;color:#fff;margin:0}@media(min-width:768px){.-iz{font-size:2.125rem}}@media(min-width:1024px){.-iz{font-size:4rem}}@media(min-width:768px){.-iz br{display:none}}.-se{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem;color:#fff;margin-top:0;margin-bottom:.75em}@media(min-width:768px){.-se{font-size:.875rem}}@media(min-width:1024px){.-se{font-size:1.125rem}}.-st{color:#005af0;background-color:#fff;margin-top:20px}.ap--main>.-tf:first-child{padding-top:54px;padding-bottom:3rem}.-ud{padding:0 15px;background:#fafafc}@media(min-width:768px){.-ud{display:grid;grid-template-columns:repeat(24,1fr);grid-gap:30px;max-width:1920px;margin:auto;padding:0}.-ud .-is{grid-column:1/25}}.-ud .-is.-tc{width:calc(100% + 30px);margin:0 -15px}@media(min-width:768px){.-ud .-is.-tc{width:100%;margin:0}}.-ud .-is .-i_{margin-bottom:50px}.-ud .-is .-ij{margin:15em 0 2em}@media(min-width:768px){.-ud .-is .-ij{margin:7vw 0 11vw}}.-ud .-is .-uv{position:absolute;top:0;right:0;width:100%;height:100%}@media(min-width:768px){.-ud .-is .-uv{width:56%}}@media(min-width:1024px){.-ud .-is .-uv{width:45%}}@media(min-width:768px){.-ud .-is+.-t{margin-top:-15%}}.-ud .-is+.-t h1{font-size:2.125rem}@media(min-width:768px){.-ud .-is+.-t h1{font-size:2.125rem}}@media(min-width:1024px){.-ud .-is+.-t h1{font-size:4.5rem}}.-ud .-tc{position:relative;display:flex;flex-wrap:wrap;width:100%;padding:0;margin-left:auto;margin-right:auto;max-width:1920px}@media(max-width:767px){.-ud .-tc>div,.-ud .-tc section{min-width:0}}@media(min-width:768px){.-ud .-tc{display:grid;grid-gap:30px;grid-template-columns:repeat(24,minmax(0,1fr));padding:0}}.-ud .-t{grid-column:1;position:relative;width:100%;max-width:600px;margin:0 auto}@media(min-width:768px){.-ud .-t{grid-column:9/25}}@media(min-width:1024px){.-ud .-t{grid-column:7/25}.-ud .-t p.limit{max-width:70%}}.-um{margin-bottom:0}.-ug{margin-left:17px}@media(min-width:768px){.-ug{margin-left:0}.-um{grid-column:3/22}}@media(min-width:1024px){.-um{grid-column:8/20}.-um h4{display:none}}@media(min-width:1920px){.-um{grid-column:8/18}}.-uy{grid-column:3/23;display:flex;flex-wrap:wrap;padding-top:50px;margin-bottom:50px}@media(min-width:768px){.-uy{padding-top:60px}}@media(min-width:1024px){.-uy{grid-column:8/23}}@media(min-width:1920px){.-uy{grid-column:8/20}}.-ub{margin-top:0}.-uw{display:flex;flex-wrap:wrap}.-uw .ap-a-pill-text{color:#91979d}.-uw .ap-a-pill.active,.-uw .ap-a-pill:hover{background-color:currentColor}.-uw .ap-a-pill.active .ap-a-pill-text,.-uw .ap-a-pill:hover .ap-a-pill-text{color:#fff}.-ux{position:relative;grid-column:2/23}@media(min-width:768px){.-ux{grid-column:2/24;display:flex}}@media(min-width:1280px){.-ux{grid-column:3/23}}@media(min-width:1920px){.-ux{grid-column:4/20}}.-uk{display:none;width:20%}@media(min-width:768px){.-uk{display:block}}.-u_{position:sticky;top:50px;padding-top:40px;margin-bottom:368px}.-uj{position:relative;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0;border:0;background:transparent}.-uq{margin:18px 0;font-size:22px;white-space:nowrap;cursor:pointer}@media(min-width:1024px){.-uq{margin:15px 0;font-size:28px}}.-uz{flex:1 0 auto;height:2px;margin-left:20px;opacity:0;background:#e2e5e6}.-ae{margin-bottom:100px}@media(min-width:768px){.-ae{margin-left:-2px;width:80%}}.-at{position:relative;padding-top:20px}.-at:first-child{padding-top:0}@media(min-width:768px){.-at:first-child{padding-top:20px}}.-at:last-child .-an{display:none}@media(min-width:768px){.-ar{position:absolute;top:-50px;height:calc(90vh - 210px)}}.-ar h3{font-size:28px;opacity:.2}@media(min-width:768px){.-ar h3{display:none}}.-ai{position:absolute;top:-50px;height:50px}.-as{display:none;position:absolute;left:0;top:70px;background:#e2e5e6}@media(min-width:768px){.-as{display:flex}}.-an{width:2px;height:100%}.-ao{width:7%;height:2px}.-au{height:14px;width:14px;margin-left:-6px;margin-top:-6px;border-radius:7px;border:4px solid #fafafc;background:#e2e5e6}.-aa{position:relative;min-height:200px;padding:15px 15px 8px 20px;overflow:hidden;border-radius:8px;border:2px solid #e2e5e6;transition:transform .25s ease-in,background .25s ease-in,box-shadow .3s ease-in,border-color .3s ease-in}@media(min-width:768px){.-aa{margin-left:auto;width:93%;padding:30px 30px 30px 50px}.-aa:hover{transform:translateY(-.125em);border-color:transparent;background:#fff;box-shadow:0 15px 30px 0 rgba(0,0,0,.15)}.-aa:hover:after{background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff 65%)}.-af{position:absolute;top:0;left:0;height:100%;width:8px}}.-aa li,.-aa p{font-size:14px;line-height:23px}.-al{position:relative;cursor:pointer}.-ac{margin:5px 0;font-size:22px}.-ah{font-size:12px;color:#48525c}.-ap{position:absolute;display:flex;justify-content:flex-end;top:0;right:0;width:100%;height:100%;padding:17px;transition:transform .2s ease-out;cursor:pointer}@media(min-width:768px){.-ap{padding:30px}}.-ap svg{width:21px;height:21px;margin-top:5px;fill:#48525c;transition:transform .25s cubic-bezier(0,0,.3,1)}.-ad{position:relative;height:7em;overflow:hidden;margin-top:15px;border-top:1px solid #e2e5e6;display:flex;flex-direction:column}@media(min-width:768px){.-ad{flex-direction:row;height:8em}}.-av{padding-right:5px}@media(min-width:768px){.-av{padding-right:20px;width:50%}}.-av .-n{margin-top:25px}.-ad h1,.-ad h2,.-ad h3{margin:20px 0 7px;font-size:16px;color:#48525c}.-ad ol,.-ad ul{padding-left:18px;margin:0}.-ad li,.-ad p{margin:0;line-height:2}.-ad code{font-family:Fira Mono,monospace;font-weight:500;display:inline;padding:2px 4px;color:#000;background:#e2e5e6;font-size:.9em}.-aa:after{content:"";position:absolute;bottom:0;left:8px;width:100%;height:80px;background:linear-gradient(180deg,rgba(250,250,252,0),#fafafc 65%)}@media(min-width:768px){.-at.expanded .-aa{transform:translateY(-.125em);border-color:transparent;background:#fff;box-shadow:0 15px 30px 0 rgba(0,0,0,.15)}}.-at.expanded .-ap{height:100px}.-at.expanded .-ap svg{transform:rotate(180deg)}.-at.expanded .-ad{height:auto}.-at.expanded .-aa:after{display:none}.ap-o-burger-menu{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;padding:110px 20px 80px;z-index:16;background-color:#fff}@media(max-width:240px){.ap-o-burger-menu{padding:37px 20px 0}.has-banner~.ap-o-burger-menu{padding:calc(37px + 31px) 0 0 20px}}.ap-o-burger-menu-label{position:fixed;z-index:1001;top:12px;right:20px;cursor:pointer}.ap-o-burger-menu-label.mainmenuopen{z-index:1004}.has-banner+.ap-o-burger-menu-label{top:calc(12px + 31px)}.amp-hidden+.has-banner+.ap-o-burger-menu-label,amp-user-notification[hidden]+.has-banner+.ap-o-burger-menu-label{top:12px}@media(min-width:768px){.ap-o-burger-menu-label{right:30px}}@media(min-width:1024px){.ap-o-burger-menu-label{display:none}}.ap-o-burger-menu-icon{width:30px;height:30px}@media(min-width:1024px){.ap-o-burger-menu{display:none}}.ap-o-burger-menu.mainmenuopen{display:block;z-index:1003}.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px)}.has-banner+.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px - 31px)}.ap-o-burger-menu.mainmenuopen~.ap--footer{display:none}.-th{list-style:none;display:flex;flex-direction:column;height:100%;margin:1rem 0 0;padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(max-width:240px){.-th{padding:1rem 0}}.-th .-th{margin-top:1rem}.-th .-th .-tp:last-child{margin-bottom:0}.-tp{margin-bottom:1rem;position:relative}.-tp:last-child{margin-top:auto}.-tp ul{display:none}.-td{position:absolute;left:0;top:0;width:100%;height:36px;padding:0;margin:0;background:none transparent;border:none;cursor:pointer;-webkit-appearance:none}.-td:focus{outline:5px auto -webkit-focus-ring-color}.-td:checked~ul{display:block}.-td:checked+.nav-icon .ap-a-ico{transform:rotate(0)}.-td+.nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.-tp .ap-a-ico{height:.6em;margin-bottom:.3em;margin-left:.3em;width:.6em}.-tv{position:relative;margin-right:20px;padding-bottom:10px;display:none}@media(max-width:240px){.-tv{margin-right:0}}@media(min-width:1024px){.-tv{margin-right:0;padding-right:30px;display:block}}.-tm{display:flex;align-items:center;font-size:11px;border:none;background:0 0}.-tm:hover{color:#005af0}.-tg{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;border:0;-webkit-appearance:none}@media(min-width:1024px){.-tg{width:calc(100% - 30px)}}.-ty{width:10px;height:10px;margin-left:5px}.-tb{list-style:none;display:none;position:absolute;right:15%;margin:0;padding:2px 8px;background:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}@media(max-width:240px){.-tb{overflow:auto;max-height:calc(100vh - 55px - 31px)}}.-tb:hover,.-tg:checked~.-tb,.-tg:hover~.-tb,.-tv .-tw{display:block}.-tb:focus-within{display:block}.mainmenuopen .-tv{display:block}.-tw{font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#000}@media(min-width:1024px){.-tw{font-size:1rem}}.-tx{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}@media(min-width:1024px){.-tx{font-size:.875rem}}.-tx.active{text-decoration:underline}.-tw:hover{color:#005af0}.-tw.active{font-weight:700;color:#005af0}.ap--header{width:100%;max-width:2020px;margin:0 auto;position:-webkit-sticky;position:sticky;top:0;z-index:1001;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}.ap--header.mainmenuopen{z-index:1004}.ap--header.mainmenuopen~.ap--main{max-width:100vw;overflow-x:hidden}@media(min-width:1024px){.ap--header{top:0}.ap--header.has-banner{top:-31px}}.ap-o-header{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;max-width:1460px;padding:10px 0 0 20px;margin:0 auto}@media(min-width:1024px){.ap-o-header{display:flex;padding-left:30px}}.ap-o-header-home{position:-webkit-sticky;position:sticky;top:10px;display:flex;align-items:center;margin-right:auto;padding-bottom:10px;overflow:hidden}.ap-o-header-home-logo{height:30px;margin-right:6px;width:30px}.ap-o-header-home-sub-title,.ap-o-header-home-title{margin-left:4px;font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#005af0}@media(min-width:1024px){.ap-o-header-home-sub-title,.ap-o-header-home-title{font-size:1.125rem}}.ap-o-header-home-sub-title{color:#000;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ap-o-header-main{display:none;flex:1 1 auto;padding:0 30px}@media(min-width:1024px){.ap-o-header-main{display:flex}}.ap-o-header-main-item{position:relative;display:flex;align-items:center;margin:0 18px -5px}.ap-o-header-main-link{display:flex;align-items:center;padding:0 0 14px;border:0;background:0 0}.ap-o-header-main-link-icon{font-size:8px;margin-left:5px;transform:rotate(0);transition:transform .2s ease}.ap-o-header-flyout:hover,.ap-o-header-main-link:focus~.ap-o-header-flyout,.ap-o-header-main-link:hover~.ap-o-header-flyout{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout:focus-within{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);position:absolute;top:95%;left:0;margin:0;padding:0 0 10px;pointer-events:none;opacity:0;list-style:none;background:#fff;border-radius:0 0 4px 4px;transition:opacity .2s ease}.ap-o-header-flyout:before{content:"";display:block;background:linear-gradient(180deg,rgba(0,0,0,.07) 0,hsla(0,0%,100%,.07));height:8px;margin-bottom:10px}.ap-o-header-flyout-item-secondary{margin:20px 0;white-space:nowrap;min-width:200px}.ap-o-header-flyout-item-secondary a:hover{color:#005af0}.ap-o-header-flyout-item-title{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-family:Poppins,system;font-weight:700;color:#000;line-height:1.4em}.ap-o-header-flyout-item-title.secondary{padding:0 15px}.ap-o-header-flyout-item-description{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;opacity:.75;line-height:1.25em}.ap-o-header-flyout-primary-item{position:relative;width:300px}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);background-color:#005af0}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info>*{color:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon{fill:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.email,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.stories{fill:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.websites{background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.stories{background:linear-gradient(225deg,#ec6600,#ffdc00 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.ads{background:linear-gradient(225deg,#eb49e1,#5500d7 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.email{background:linear-gradient(225deg,#09a600,#e1eb64 75%)}.ap-o-header-flyout-primary-item-link{display:flex;align-items:center;border-radius:4px;padding:10px;margin:0 5px}.ap-o-header-flyout-primary-item-link-info{margin:0 20px 0 15px}.ap-o-header-flyout-primary-item-link-icon{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:2em;height:2em}.ap-o-header-flyout-primary-item-link-icon.websites{fill:url(#gradient-websites) #000}.ap-o-header-flyout-primary-item-link-icon.stories{fill:url(#gradient-stories) #000}.ap-o-header-flyout-primary-item-link-icon.ads{fill:url(#gradient-ads) #000}.ap-o-header-flyout-primary-item-link-icon.email{fill:url(#gradient-email) #000}#blm-banner{background:#111;color:#eee;display:block;text-align:center;padding:.5em}</style><link rel="manifest" href="/manifest.json"></head><body class="ap--websites"> <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="stackoverflow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 25"><path d="M14.2 14.7h1.6V25H0V14.7h1.6v8.6h12.5c.1-2.8.1-5.7.1-8.6zM9.5 3.2c1.8 2.7 3.6 5.4 5.4 8.2.6-.4 1.1-.8 1.7-1.2C14.8 7.5 13 4.8 11.2 2c-.5.5-1.1.8-1.7 1.2zm5.1 8.5c-2.8-1.7-5.5-3.3-8.2-5-.4.6-.7 1.2-1.1 1.8 2.7 1.7 5.5 3.3 8.2 5 .4-.6.8-1.2 1.1-1.8zM17.4 0c-.7.1-1.3.2-2 .4.5 3.2 1.1 6.5 1.6 9.7.7-.1 1.3-.2 2-.4-.5-3.2-1.1-6.5-1.6-9.7zm-4 14.1c-3.1-.9-6.2-1.7-9.2-2.6-.2.7-.4 1.4-.5 2 3.1.9 6.2 1.7 9.2 2.6.1-.6.3-1.3.5-2zm-.9 5.5H3v2.1h9.5v-2.1zm.3-2.7c-3.2-.3-6.3-.6-9.5-.9-.1.7-.1 1.4-.2 2.1 3.2.3 6.3.6 9.5.9 0-.8.1-1.4.2-2.1z"/></symbol><symbol id="github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M32 0.792c-17.68 0-32 14.328-32 32 0 14.141 9.168 26.133 21.88 30.36 1.6 0.301 2.187-0.688 2.187-1.539 0-0.76-0.027-2.773-0.040-5.44-8.901 1.931-10.779-4.293-10.779-4.293-1.456-3.693-3.56-4.68-3.56-4.68-2.899-1.984 0.224-1.944 0.224-1.944 3.213 0.224 4.901 3.296 4.901 3.296 2.853 4.893 7.491 3.48 9.32 2.661 0.288-2.069 1.112-3.48 2.027-4.28-7.107-0.8-14.576-3.552-14.576-15.813 0-3.493 1.24-6.347 3.293-8.587-0.36-0.808-1.44-4.061 0.28-8.469 0 0 2.68-0.859 8.8 3.28 2.56-0.712 5.28-1.064 8-1.080 2.72 0.016 5.44 0.368 8 1.080 6.080-4.139 8.76-3.28 8.76-3.28 1.72 4.408 0.64 7.661 0.32 8.469 2.040 2.24 3.28 5.093 3.28 8.587 0 12.293-7.48 15-14.6 15.787 1.12 0.96 2.16 2.923 2.16 5.92 0 4.283-0.040 7.723-0.040 8.763 0 0.84 0.56 1.84 2.2 1.52 12.803-4.197 21.963-16.197 21.963-30.317 0-17.672-14.328-32-32-32z"/> </symbol><symbol id="wordpress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M57.251 18.2A28.688 28.688 0 0 1 60.766 32c0 10.611-5.749 19.883-14.301 24.867l8.787-25.405c1.64-4.107 2.187-7.389 2.187-10.304 0-1.08-.069-2.08-.187-2.96zm-21.283.277c1.725-.08 3.285-.28 3.285-.28 1.552-.2 1.371-2.48-.179-2.397 0 0-4.68.36-7.68.36-2.837 0-7.6-.4-7.6-.4-1.56-.08-1.763 2.28-.2 2.36 0 0 1.44.163 3 .24l4.48 12.28-6.32 18.88L14.277 18.4c1.731-.08 3.291-.267 3.291-.267 1.56-.2 1.376-2.48-.173-2.389 0 0-4.656.368-7.664.368-.533 0-1.168-.021-1.84-.04C13.096 8.4 21.96 3.24 32 3.24a28.642 28.642 0 0 1 19.429 7.555c-.123-.008-.243-.024-.376-.024-2.827 0-4.832 2.461-4.832 5.104 0 2.373 1.368 4.381 2.827 6.749 1.096 1.92 2.373 4.381 2.373 7.939 0 2.44-.944 5.317-2.189 9.277l-2.867 9.56-10.4-30.96.003.037zM32 60.757c-2.824 0-5.549-.408-8.128-1.165l8.632-25.083 8.84 24.232c.064.141.133.269.208.397A28.794 28.794 0 0 1 32 60.762zM3.229 32c0-4.171.896-8.133 2.493-11.707L19.439 57.89C9.85 53.226 3.231 43.389 3.228 31.999zM32 0C14.36 0 0 14.36 0 32s14.36 32 32 32 32-14.36 32-32S49.64 0 32 0z"/></symbol><symbol id="youtube" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M62.664 16.542c-.773-2.708-2.862-4.797-5.514-5.556l-.057-.014c-4.989-1.336-25.065-1.336-25.065-1.336s-20.026-.027-25.065 1.337c-2.708.773-4.797 2.862-5.556 5.514l-.014.057C.507 21.107 0 26.354 0 31.72l.001.327v-.017.252a83.84 83.84 0 0 0 1.475 15.695l-.083-.521c.773 2.708 2.862 4.797 5.513 5.556l.057.014c4.983 1.339 25.065 1.339 25.065 1.339s20.023 0 25.065-1.339c2.708-.773 4.797-2.862 5.556-5.514l.014-.057c.85-4.469 1.336-9.609 1.336-14.863l-.002-.595v.03c.002-.184.002-.403.002-.621 0-5.255-.486-10.396-1.416-15.38l.08.515zM25.621 41.608V22.42l16.71 9.609z"/></symbol><symbol id="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M63.875 12.186c-2.36 1.037-4.88 1.744-7.533 2.067 2.704-1.629 4.784-4.197 5.768-7.261-2.536 1.48-5.346 2.557-8.338 3.157-2.389-2.557-5.794-4.157-9.576-4.157-7.245 0-13.119 5.874-13.119 13.111 0 1.040 0.12 2.040 0.339 2.997-10.906-0.515-20.572-5.752-27.042-13.669-1.139 1.925-1.776 4.162-1.776 6.6 0 4.56 2.32 8.568 5.834 10.922-2.152-0.069-4.176-0.661-5.941-1.643v0.163c0 6.36 4.514 11.663 10.522 12.871-1.101 0.296-2.264 0.456-3.456 0.456-0.837 0-1.64-0.080-2.443-0.229 1.683 5.208 6.52 9.005 12.277 9.112-4.48 3.517-10.157 5.613-16.271 5.613-1.040 0-2.077-0.061-3.12-0.179 5.837 3.717 12.714 5.89 20.151 5.89 24.143 0 37.329-19.989 37.329-37.294 0-0.557 0-1.12-0.040-1.68 2.563-1.837 4.8-4.16 6.56-6.794l-0.125-0.053z"/> </symbol><symbol id="download" viewBox="0 0 64 64"> <path d="M8.8 62.32c0-0.88 0.72-1.68 1.68-1.68 10.8 0 32.32 0 43.040 0 0.88 0 1.68 0.72 1.68 1.68 0 0.88-0.72 1.68-1.68 1.68-10.8 0-32.32 0-43.040 0-0.96 0-1.68-0.72-1.68-1.68z"/> <path d="M49.44 34.56c0.72-0.72 0.72-1.84 0-2.56s-1.84-0.72-2.56 0l-13.040 13.040v-43.28c0-0.96-0.88-1.76-1.84-1.76-1.040 0-1.84 0.8-1.84 1.76v43.28l-13.040-13.12c-0.72-0.72-1.84-0.72-2.56 0s-0.72 1.84 0 2.56l16.24 16.24c0.72 0.72 1.84 0.72 2.56 0l16.080-16.16z"/> </symbol><symbol id="internal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M43.16 10.18c-0.881-0.881-2.322-0.881-3.203 0s-0.881 2.322 0 3.203l16.335 16.335h-54.051c-1.281 0-2.242 1.041-2.242 2.242 0 1.281 0.961 2.322 2.242 2.322h54.051l-16.415 16.335c-0.881 0.881-0.881 2.322 0 3.203s2.322 0.881 3.203 0l20.259-20.259c0.881-0.881 0.881-2.322 0-3.203l-20.179-20.179z"/></symbol><symbol id="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M39.503 32l22.963-22.963c2.046-2.046 2.046-5.457 0-7.503s-5.456-2.046-7.503 0l-22.963 22.963-22.963-22.963c-2.046-2.046-5.457-2.046-7.503 0s-2.046 5.457 0 7.503l22.963 22.963-22.963 22.963c-2.046 2.046-2.046 5.456 0 7.503s5.457 2.046 7.503 0l22.963-22.963 22.963 22.963c2.046 2.046 5.456 2.046 7.503 0s2.046-5.456 0-7.503l-22.963-22.963z"/> </symbol><symbol id="speech-bubble" viewBox="0 0 38 38"><g fill="none" fill-rule="evenodd"><path stroke="#005AF0" stroke-width="1.94" d="M1.544 19.002c0 9.64 7.816 17.457 17.457 17.457 3.707 0 6.783-.838 9.61-2.809.936-.653 7.057 3.628 7.848 2.809.71-.737-3.264-7.394-2.69-8.247 1.868-2.78 2.69-5.61 2.69-9.21C36.459 9.36 28.642 1.544 19 1.544c-9.639 0-17.456 7.817-17.456 17.458z"/><path fill="#005AF0" fill-rule="nonzero" d="M17.621 28.71h-1.14l1.127-6.824-3.49.005-.049.001c-.314 0-.569-.255-.569-.57 0-.134.126-.362.126-.362l6.272-10.46 1.159.005-1.156 6.834 3.509-.004.055-.001c.315 0 .57.254.57.569 0 .127-.05.24-.122.335L17.621 28.71z"/></g></symbol><symbol id="roadmap-header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 805 297"> <defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFF"/><stop offset="100%" stop-color="#FFF" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFF" stop-opacity="0"/><stop offset="100%" stop-color="#FFF"/></linearGradient></defs><g fill="none"><path fill="#FFF" d="M332 17.5c-66.55 0-120.5 53.95-120.5 120.5S265.45 258.5 332 258.5 452.5 204.55 452.5 138 398.55 17.5 332 17.5zm0 5c63.789 0 115.5 51.711 115.5 115.5S395.789 253.5 332 253.5 216.5 201.789 216.5 138 268.211 22.5 332 22.5z"/><path fill="#FFF" d="M351.465 68.546l-12.736-.052-45.976 78.209a12.913 12.913 0 00-.954 2.212c-.188.602-.299 1.163-.299 1.728 0 3.604 2.824 6.56 6.374 6.685h.503l.146-.003 22.179-.033-8.13 50.208h12.59l46.07-78.209-.09.128c.862-1.171 1.358-2.498 1.358-3.943 0-3.684-2.944-6.688-6.603-6.688l-.46.007-22.306.025 8.334-50.274zm-9.883 4.959l3.99.016-8.339 50.307 28.664-.04c.875 0 1.603.743 1.603 1.688 0 .3-.12.619-.386.981l-.075.103-44.735 75.94h-3.859l8.133-50.216-28.249.044-.223.004c-.828 0-1.529-.67-1.6-1.542l-.006-.147c0 .03.02-.072.07-.232.032-.102.072-.214.118-.333l.073-.182c.134-.32.27-.596.346-.738l44.475-75.653zM553 177.75c-32.723 0-59.25 26.527-59.25 59.25s26.527 59.25 59.25 59.25 59.25-26.527 59.25-59.25-26.527-59.25-59.25-59.25zm0 4.5c30.238 0 54.75 24.512 54.75 54.75s-24.512 54.75-54.75 54.75-54.75-24.512-54.75-54.75 24.512-54.75 54.75-54.75z"/><path fill="#FFF" d="M564.647 201.777l-8.22-.032-23.88 38.99a7.674 7.674 0 00-.378.754c-.08.185-.152.37-.213.557a3.71 3.71 0 00-.206 1.181c0 2.392 1.962 4.313 4.357 4.313l.236-.004 10.204-.013-4.171 24.727h8.14l23.919-38.971-.096.134c.572-.747.911-1.617.911-2.581 0-2.323-1.846-4.2-4.145-4.308l-.257-.005-.209.003-10.268.011 4.276-24.756zm-5.705 4.477l.364.001-4.28 24.785 15.514-.019-22.541 36.729h-.301l4.174-24.735-15.458.022.013-.023 22.515-36.76zM687 72.313c-24.68 0-44.688 20.007-44.688 44.687 0 24.68 20.008 44.688 44.688 44.688 24.68 0 44.688-20.008 44.688-44.688 0-24.68-20.008-44.688-44.688-44.688zm0 3.374c22.816 0 41.313 18.497 41.313 41.313 0 22.816-18.497 41.313-41.313 41.313-22.816 0-41.313-18.497-41.313-41.313 0-22.816 18.497-41.313 41.313-41.313z"/><path fill="#FFF" d="M695.8 90.333l-6.14-.024-17.76 29.542a5.552 5.552 0 00-.436.986 2.807 2.807 0 00-.152.88 3.254 3.254 0 003.255 3.251l.177-.003 7.575-.011-3.102 18.734h6.082l17.785-29.525-.068.097c.422-.561.672-1.213.672-1.933a3.252 3.252 0 00-3.07-3.245l-.374-.003-7.624.009 3.18-18.755zm-4.236 3.358l.242.001-3.182 18.776 11.549-.015-16.781 27.859h-.195l3.103-18.738-11.505.016.028-.054 16.741-27.845zM436.548 193.33l1.122-2.782 64.782 26.122-1.122 2.782zm219.047-46.949l2.024 2.214-60.214 55.024-2.024-2.214z"/><path fill="url(#a)" d="M726 134.331l.9-2.331 78.1 36.669-.9 2.331z" transform="translate(0 -1)"/><path fill="url(#b)" d="M.474 3.24L1.635.474 221.526 92.76l-1.161 2.766z" transform="translate(0 -1)"/></g> </symbol><symbol id="menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M2.133 13.867h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 28.8h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 43.733h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> </symbol><symbol id="wrench" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M64 18.267c0 1.608-0.214 3.21-0.636 4.767l0.008 0.169c0.028 0.598-0.186 1.18-0.592 1.619-2.713 7.035-9.527 11.712-17.107 11.712-1.852 0-3.671-0.275-5.427-0.819l-25.943 25.854c-1.573 1.567-3.667 2.431-5.889 2.431s-4.318-0.864-5.89-2.431l-0.087-0.087c-3.25-3.238-3.25-8.508 0-11.747l23.75-23.669c0.66-0.657 1.046-1.529 1.090-2.456l0.173-3.404c-0.070-0.657-0.105-1.308-0.105-1.939 0-10.074 8.221-18.267 18.327-18.267 3.298 0 6.532 0.883 9.353 2.555 0.602 0.357 1.005 0.979 1.083 1.675 0.011 0.098 0.017 0.161 0.020 0.237 0.044 1.158-0.297 1.536-9.858 10.586l3.847 3.921c1.149-1.058 3.185-2.929 8.997-8.27 0.542-0.497 1.293-0.697 2.010-0.534 0.719 0.163 1.311 0.668 1.583 1.351 0.856 2.147 1.291 4.418 1.292 6.745zM59.819 22.4c0.395-1.346 0.595-2.737 0.594-4.132 0-1.194-0.141-2.367-0.422-3.507-2.922 2.685-8.959 8.231-9.040 8.307-0.536 0.494-1.37 0.474-1.88-0.046l-6.953-7.087c-0.252-0.258-0.39-0.605-0.384-0.965s0.158-0.702 0.42-0.95c2.985-2.825 7.47-7.107 9.54-9.166-1.884-0.84-3.936-1.278-6.022-1.278-8.129 0-14.742 6.59-14.742 14.691 0 0.533 0.032 1.090 0.096 1.654 0.007 0.071 0.010 0.142 0.007 0.214l-0.174 3.646c-0.087 1.818-0.847 3.528-2.138 4.816l-23.75 23.668c-1.85 1.844-1.85 4.844 0 6.688l0.087 0.087c0.897 0.893 2.088 1.385 3.356 1.385s2.46-0.492 3.355-1.385l26.429-26.338c0.2-0.199 0.419-0.39 0.693-0.601 0.377-0.292 0.882-0.363 1.326-0.187 1.743 0.692 3.578 1.044 5.456 1.044 6.243 0 11.831-3.943 13.905-9.811 0.044-0.126 0.107-0.244 0.187-0.351-0.002-0.134 0.016-0.268 0.054-0.396z"/> </symbol><symbol id="template" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M1.44 0h62.56v64h-64v-64h1.44zM20.64 60.88v-39.52h-17.76v39.6h17.76zM23.44 21.36v39.6h37.44v-39.6h-37.44zM2.88 18.24h58.080v-15.36h-58.080v15.36z"/></symbol><symbol id="learn" viewBox="0 0 64 64"> <path d="M57.674 35.257c0 1.779 1.416 3.221 3.163 3.221s3.163-1.442 3.163-3.221c0-1.155-0.602-2.16-1.498-2.728v-8.973c0-0.682-0.401-1.297-1.018-1.563l-29.585-12.716c-0.413-0.178-0.881-0.178-1.295 0l-29.586 12.716c-0.617 0.265-1.018 0.881-1.018 1.563s0.401 1.297 1.018 1.562l6.662 2.863v17.587c0 4.624 7.288 9.29 23.571 9.29s23.571-4.666 23.571-9.29v-17.587l4.349-1.869v6.417c-0.896 0.569-1.497 1.573-1.497 2.728zM51.491 45.567c0 1.575-4.797 5.898-20.24 5.898s-20.24-4.323-20.24-5.898v-16.155l19.593 8.421c0.207 0.089 0.427 0.134 0.647 0.134s0.441-0.045 0.647-0.134l19.593-8.421v16.155zM31.251 34.43l-25.303-10.875 25.303-10.875 25.302 10.875-25.302 10.875z"/> </symbol><symbol id="examples-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 20"><g><path d="M20 19.3a.9.9 0 1 1 0-1.7 1.9 1.9 0 0 0 1.9-1.9v-3a3.6 3.6 0 0 1 1.3-2.7 3.6 3.6 0 0 1-1.3-2.8v-3A1.9 1.9 0 0 0 20 2.3a.9.9 0 1 1 0-1.7 3.6 3.6 0 0 1 3.6 3.6v3a1.9 1.9 0 0 0 2 2v1.6a1.9 1.9 0 0 0-2 2v3a3.6 3.6 0 0 1-3.6 3.5zm-14 0a3.6 3.6 0 0 1-3.6-3.6v-3a1.9 1.9 0 0 0-2-1.9V9.1a1.9 1.9 0 0 0 2-1.9v-3A3.6 3.6 0 0 1 6 .6a.9.9 0 1 1 0 1.8A1.9 1.9 0 0 0 4 4.2v3A3.6 3.6 0 0 1 2.8 10a3.6 3.6 0 0 1 1.3 2.7v3A1.9 1.9 0 0 0 6 17.6a.9.9 0 1 1 0 1.7z"/><g transform="translate(5.8 8.5)"><circle cx="12.3" cy="1.4" r="1.4"/><circle cx="7.3" cy="1.4" r="1.4"/><circle cx="2.2" cy="1.4" r="1.4"/></g></g></symbol><symbol id="components-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 22"><path d="M8.7 17l-2.5-2.2-4-3.5-.9-.8v1l2.5-2.2 4-3.5 1-.8c.2-.3.2-.8 0-1a.8.8 0 0 0-1.2 0L5.1 6l-4 3.6-.8.8c-.3.2-.3.8 0 1l2.5 2.2 4 3.6.8.8c.3.2.8.3 1.1 0 .3-.3.3-.8 0-1.1zM19.3 5l2.5 2.2 4 3.5.9.8v-1l-2.5 2.2-4 3.5-.9.8c-.3.3-.3.8 0 1 .3.4.8.3 1 0L23 16l4-3.6.9-.8c.3-.2.3-.8 0-1l-2.5-2.3-4-3.5-1-.8c-.2-.3-.7-.3-1 0-.3.3-.3.8 0 1zm-8 16.4l.7-2 1.6-5a3563.7 3563.7 0 0 1 2-5.8l1.7-5.1.8-2.5c.2-.4-.1-.9-.5-1a.8.8 0 0 0-1 .6c-.1.7-.4 1.3-.6 2l-1.6 4.9-2 5.9-1.7 5-.8 2.6c-.2.4.1.8.5 1a.8.8 0 0 0 1-.6z"/></symbol><symbol id="guides-documents" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 32"><path d="M6.7 28H1.2c-.4 0-.6-.4-.6-.8L.5.7c0-.4.3-.7.7-.7h21.1c.5 0 .7.3.7.7V2c0 .5-.2.7-.7.7-.4 0-.6-.2-.6-.7v-.6H1.8L2 26.6h4.8c.4 0 .7.2.7.6 0 .4-.3.7-.7.7z"/><path d="M8 6.8H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 10.9H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 15H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 19H6c-.4 0-.7-.2-.7-.6 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7z"/><path d="M29.8 4H8.7c-.5 0-.7.4-.7.8v26.5c0 .4.3.7.7.7h21.1c.4 0 .7-.3.7-.7V4.8c0-.4-.3-.7-.7-.7zm-.6 26.6H9.4V5.4h19.8v25.2z"/><path d="M18.1 22.8h-.6l.6-3.8h-1.9c-.2 0-.3-.1-.3-.3v-.2l3.4-5.8h.7l-.7 3.8h2c.2 0 .3.1.3.3v.2L18 22.8z"/></symbol><symbol id="start" viewBox="0 0 64 64"> <path d="M63.195 1.874c-0.143-0.52-0.549-0.926-1.069-1.069-10.765-2.978-20.385 2.978-24.355 6.948l-11.452 11.452-5.421-1.756c-3.551-1.163-7.454-0.217-10.078 2.443l-3.359 3.359c-0.582 0.594-0.582 1.544 0 2.138l7.329 7.329-4.199 6.948c-0.343 0.593-0.25 1.342 0.229 1.832l11.681 11.605c0.471 0.504 1.223 0.63 1.832 0.305l6.948-4.123h0.076l7.329 7.329c0.594 0.582 1.544 0.582 2.138 0l3.359-3.359c2.66-2.624 3.606-6.527 2.443-10.078l-1.756-5.421 11.452-11.452c3.894-4.047 9.849-13.666 6.871-24.431zM23.799 50.126l-9.925-9.925 3.13-5.268 12.063 12.063-5.268 3.13zM54.109 24.015l-12.139 12.139c-0.4 0.399-0.547 0.987-0.382 1.527l2.061 6.337c0.783 2.448 0.136 5.128-1.68 6.948l-2.29 2.29-29.012-29.012 2.29-2.29c1.819-1.815 4.5-2.463 6.948-1.68l6.337 2.061c0.54 0.165 1.128 0.018 1.527-0.382l12.216-12.063c3.436-3.359 11.452-8.398 20.461-6.337 2.061 9.085-2.978 17.102-6.337 20.461z"/> <path d="M10.667 51.195l-9.009 9.009c-0.478 0.358-0.703 0.963-0.576 1.547s0.583 1.040 1.167 1.167c0.584 0.127 1.188-0.098 1.547-0.576l9.009-9.009c0.456-0.608 0.396-1.459-0.142-1.996s-1.388-0.598-1.996-0.142z"/> <path d="M11.66 63.563c0.594 0.582 1.544 0.582 2.138 0l4.581-4.581c0.456-0.608 0.395-1.459-0.142-1.996s-1.388-0.598-1.996-0.142l-4.581 4.581c-0.582 0.594-0.582 1.544 0 2.138z"/> <path d="M1.505 52.798c0.403-0.006 0.787-0.17 1.069-0.458l4.581-4.581c0.478-0.358 0.703-0.963 0.576-1.547s-0.583-1.040-1.167-1.167c-0.584-0.127-1.188 0.098-1.547 0.576l-4.581 4.581c-0.428 0.436-0.554 1.086-0.322 1.65s0.78 0.937 1.391 0.945z"/> <path d="M43.726 13.021c-2.003 2.003-2.003 5.25 0 7.253s5.25 2.003 7.253 0c2.003-2.003 2.003-5.25 0-7.253s-5.25-2.003-7.253 0zM48.841 18.136c-0.699 0.692-1.79 0.794-2.605 0.243s-1.127-1.601-0.745-2.508c0.382-0.907 1.351-1.417 2.315-1.219s1.653 1.050 1.646 2.033c-0.004 0.545-0.223 1.067-0.611 1.451z"/> </symbol><symbol id="amp-email" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-email" x1="76.2776137%" x2="20.8316146%" y1="-25.8400575%" y2="121.578822%"> <stop offset="0%" stop-color="#F1F068"/> <stop offset="46.2139774%" stop-color="#96D64F"/> <stop offset="100%" stop-color="#2DB932"/> </linearGradient> </defs> <path d="M64 14.080c0-3.291-2.56-5.851-5.851-5.851h-52.297c-3.291 0-5.851 2.56-5.851 5.851v35.84c0 3.291 2.56 5.851 5.851 5.851h52.297c3.291 0 5.851-2.56 5.851-5.851v-35.84zM5.851 11.154h52.297c0.183 0 0.366 0 0.549 0l-24.503 25.417c-0.549 0.549-1.28 0.914-2.194 0.914-0.731 0-1.646-0.366-2.194-0.914l-24.32-25.417c0 0 0.183 0 0.366 0zM2.926 14.080c0-0.366 0-0.731 0.183-1.097l15.36 16.091-15.543 19.2v-34.194zM58.149 52.846h-52.297c-0.731 0-1.646-0.366-2.194-0.914l16.823-20.663 7.131 7.497c1.097 1.097 2.56 1.829 4.206 1.829s3.109-0.731 4.206-1.829l6.583-6.949 17.371 20.114c-0.366 0.549-1.097 0.914-1.829 0.914v0zM61.074 48.274l-16.091-18.834 15.909-16.64c0.183 0.366 0.183 0.731 0.183 1.097v34.377z"/> </symbol><symbol id="amp-ads" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-ads" x1="100%" x2="14.5415777%" y1="0%" y2="123.368881%"> <stop offset="0%" stop-color="#FF52E1"/> <stop offset="100%" stop-color="#5500D7"/> </linearGradient> </defs> <path d="M56.399 14.68c3.654-3.846 9.616-10.963 6.924-13.847-2.885-2.885-10.001 3.269-13.847 6.731l-0.577-0.577c-0.385-0.385-0.962-0.577-1.539-0.385l-15.963 3.077c-0.385 0-0.577 0.192-0.769 0.385l-30.195 30.195c-0.577 0.577-0.577 1.731 0 2.308l20.963 20.963c0.385 0.385 0.769 0.385 1.154 0.385s0.769-0.192 1.154-0.385l30.003-30.003c0.192-0.192 0.385-0.577 0.385-0.769v0l3.077-15.963c0.192-0.577 0-1.154-0.385-1.539l-0.385-0.577zM53.899 16.988l-2.885 14.424-28.464 28.656-18.655-18.655 28.656-28.656 14.424-2.885c-1.539 1.731-4.039 4.423-5.962 7.116-1.923-0.192-3.654 0.385-5.193 1.923-2.5 2.5-2.5 6.731 0 9.232s6.731 2.5 9.232 0c1.346-1.346 2.116-3.27 1.923-5.193-0.192-1.154-0.577-2.308-1.154-3.077-0.192-0.385-0.385-0.577-0.769-0.769-0.192-0.192-0.577-0.577-0.769-0.769 1.154-1.731 2.885-3.654 5.193-5.962l2.5 2.5 1.923 2.116zM43.321 24.873c-0.192 0.385-0.385 0.577-0.577 0.962-1.346 1.346-3.27 1.346-4.616 0s-1.346-3.27 0-4.616c0.192-0.192 0.577-0.385 0.962-0.577 1.154-0.577 2.308-0.385 3.462 0.385 0.192 0 0.192 0.192 0.385 0.192 0 0 0.192 0.192 0.192 0.385 0.577 0.962 0.769 2.116 0.192 3.27zM54.091 12.372l-2.5-2.5c4.039-3.846 7.308-5.77 8.847-6.347-0.577 1.539-2.5 4.616-6.347 8.847z"/> </symbol><symbol id="amp-stories" viewBox="0 0 36 32"> <defs> <linearGradient id="gradient-stories" x1="81.726943%" x2="23.7165981%" y1="-28.3832685%" y2="119.978062%"> <stop offset="0%" stop-color="#FFF300"/> <stop offset="100%" stop-color="#FF8F00"/> </linearGradient> </defs> <path d="M7.111 0h21.333v32h-21.333v-32zM9.481 2.37v27.259h16.593v-27.259h-16.593zM0 4.741h2.37v22.519h-2.37v-22.519zM33.185 4.741h2.37v22.519h-2.37v-22.519z"/> </symbol><symbol id="amp-websites" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-websites" x1="81.8129399%" x2="33.8766928%" y1="0%" y2="94.4849088%"> <stop offset="0%" stop-color="#00DCC0"/> <stop offset="100%" stop-color="#005AF0"/> </linearGradient> </defs> <path d="M63.196 4.646h-62.253c-0.566 0-0.943 0.377-0.943 0.755v53.010c0 0.566 0.377 0.943 0.943 0.943h62.253c0.566 0 0.755-0.377 0.755-0.755v-53.198c0.189-0.377-0.189-0.755-0.755-0.755zM3.395 18.040h57.348v33.202h-57.348v-33.202zM60.744 7.853v6.98h-57.348v-6.98h57.348zM3.395 56.147v-1.509h57.348v1.509h-57.348zM9.055 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM12.828 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM18.487 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM51.123 39.734l-11.13-13.96c-0.189-0.189-0.377-0.377-0.755-0.377v0c-0.189 0-0.566 0-0.755 0.377l-8.3 9.621-4.716-6.225c-0.189-0.189-0.377-0.377-0.755-0.377s-0.566 0-0.755 0.377l-8.866 10.376c-0.377 0.377-0.189 0.943 0 1.132s0.377 0.189 0.566 0.189c0.189 0 0.566 0 0.754-0.377l8.3-9.621 4.528 5.471-2.452 3.018c-0.377 0.377-0.189 0.943 0 1.132 0.377 0.189 0.943 0.189 1.132 0l11.319-13.017 10.376 13.205c0.189 0.189 0.377 0.377 0.755 0.377 0.189 0 0.377 0 0.566-0.189 0.377-0.377 0.566-0.943 0.189-1.132zM27.165 26.718c1.509 0 2.641-1.132 2.641-2.641 0-1.321-1.132-2.641-2.641-2.641s-2.641 1.132-2.641 2.641c0 1.509 1.132 2.641 2.641 2.641zM27.165 23.322c0.566 0 0.943 0.377 0.943 0.943s-0.377 0.943-0.943 0.943-0.943-0.377-0.943-0.943c0-0.566 0.377-0.943 0.943-0.943z"/> </symbol><symbol id="angle-down-solid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M56.293 16.003c1.761-1.645 4.553-1.645 6.314 0 1.857 1.734 1.857 4.623 0 6.357l-27.45 25.638c-1.761 1.645-4.553 1.645-6.314 0l-27.45-25.638c-0.899-0.839-1.393-1.963-1.393-3.178s0.494-2.339 1.393-3.178c1.761-1.645 4.553-1.645 6.314 0l24.293 22.689 24.293-22.689z"/> </symbol><symbol id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g fill="none" fill-rule="evenodd"><path fill="#FFF" d="M0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15C6.716 0 0 6.716 0 15z"/><path fill="#005AF0" fill-rule="nonzero" d="M13.85 24.098h-1.14l1.128-6.823-3.49.005h-.05a.57.57 0 0 1-.568-.569c0-.135.125-.363.125-.363l6.272-10.46 1.16.005-1.156 6.834 3.508-.004h.056c.314 0 .569.254.569.568 0 .128-.05.24-.121.335L13.85 24.098zM15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15z"/></g></symbol> </defs> </svg> <header class="ap--header " [class]="'ap--header ' + (mainmenuopen ? 'mainmenuopen' : '')" i-amphtml-binding> <div class="ap-o-header"> <a class="ap-o-header-home" href="/vi/"> <svg class="ap-o-header-home-logo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"/></svg> <span class="ap-o-header-home-title">AMP</span> </a> <nav class="ap-o-header-main"> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Giới thiệu <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link websites" href="/vi/about/websites/"> <div class="ap-o-header-flyout-primary-item-link-icon websites"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-websites"> <div class="ap-o-header-flyout-item-title">Website AMP</div> <div class="ap-o-header-flyout-item-description">Tạo các trải nghiệm web hoàn hảo</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link stories" href="/vi/about/stories/"> <div class="ap-o-header-flyout-primary-item-link-icon stories"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-stories"> <div class="ap-o-header-flyout-item-title">Web Stories</div> <div class="ap-o-header-flyout-item-description">Câu chuyện Ăn liền cho tất cả mọi người</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link ads" href="/vi/about/ads/"> <div class="ap-o-header-flyout-primary-item-link-icon ads"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-ads"> <div class="ap-o-header-flyout-item-title">Quảng cáo AMP</div> <div class="ap-o-header-flyout-item-description">Quảng cáo cực nhanh trên web</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link email" href="/vi/about/email/"> <div class="ap-o-header-flyout-primary-item-link-icon email"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-email"> <div class="ap-o-header-flyout-item-title">Email AMP</div> <div class="ap-o-header-flyout-item-description">Email thế hệ kế tiếp</div> </div> </a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/about/how-amp-works/">Cách thức hoạt động của AMP</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/about/mission-and-vision/">Tầm nhìn & Sứ mệnh</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/about/use-cases/">Trường hợp sử dụng</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/success-stories/">Câu chuyện thành công</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Tài liệu <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/documentation/">Bắt đầu</a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/vi/documentation/guides-and-tutorials/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guides-documents"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Hướng dẫn & Tập luyện</div> <div class="ap-o-header-flyout-item-description">Bắt đầu với AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/vi/documentation/components/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#components-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Thành phần</div> <div class="ap-o-header-flyout-item-description">Thư viện AMP hoàn chỉnh</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/vi/documentation/examples/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#examples-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Ví dụ</div> <div class="ap-o-header-flyout-item-description">Hands-on introduction to AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/vi/documentation/courses/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#learn"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Khóa học</div> <div class="ap-o-header-flyout-item-description">Tìm hiểu về AMP thông qua các khóa học miễn phí</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/vi/documentation/templates/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#template"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Khuôn mẫu</div> <div class="ap-o-header-flyout-item-description">Sẵn sàng sử dụng</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/vi/documentation/tools/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wrench"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Công cụ</div> <div class="ap-o-header-flyout-item-description">Bắt đầu tạo</div> </div> </a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Cộng đồng <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/documentation/guides-and-tutorials/contribute/">Đóng góp</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/community/roadmap/">Lộ trình</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/community/governance/">Quản lý</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/community/working-groups/access-subscriptions/">Nhóm làm việc</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Sự kiện <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/events/amp-fest-2020/">AMP Fest 2020</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/events/amp-roadshow/">AMP Roadshow</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <a class="ap-o-header-main-link -tw" href="https://blog.amp.dev">Blog</a> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Hỗ trợ <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/support/">Trợ giúp</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/support/faq/">Câu hỏi thường gặp</a> </li> </ul> </div> </nav> <div class="-tv"> <span class="-tm" aria-label="Chọn một ngôn ngữ" tabindex="-1"> <span class="-tw">VI</span> <div class="ap-a-ico -ty"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </span> <input class="-tg" type="checkbox" name="language-selector"> <div class="-tb" role="list"> <a class="-tw" href="/community/roadmap/" role="listitem">English</a> <a class="-tw" href="/de/community/roadmap/" role="listitem">Deutsch</a> <a class="-tw" href="/fr/community/roadmap/" role="listitem">Français</a> <a class="-tw" href="/ar/community/roadmap/" role="listitem">العربية</a> <a class="-tw" href="/es/community/roadmap/" role="listitem">Español</a> <a class="-tw" href="/it/community/roadmap/" role="listitem">Italiano</a> <a class="-tw" href="/id/community/roadmap/" role="listitem">Indonesia</a> <a class="-tw" href="/ja/community/roadmap/" role="listitem">日本語</a> <a class="-tw" href="/ko/community/roadmap/" role="listitem">한국어</a> <a class="-tw" href="/pt_br/community/roadmap/" role="listitem">Português</a> <a class="-tw" href="/ru/community/roadmap/" role="listitem">Русский</a> <a class="-tw" href="/tr/community/roadmap/" role="listitem">Türkçe</a> <a class="-tw" href="/zh_cn/community/roadmap/" role="listitem">中文</a> <a class="-tw" href="/pl/community/roadmap/" role="listitem">Polski</a> </div> </div> </div> </header> <label class="ap-o-burger-menu-label" on="tap:AMP.setState({mainmenuopen: !mainmenuopen, noScrollState: !noScrollState})" [class]="'ap-o-burger-menu-label ' + (mainmenuopen ? 'mainmenuopen ' : '')" for="burger-menu" tabindex="0" role="button" aria-label="Menu Burger" i-amphtml-binding> <div class="ap-a-ico ap-o-burger-menu-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu"/></svg> </div> </label> <nav class="ap-o-burger-menu" [class]="mainmenuopen ? 'ap-o-burger-menu mainmenuopen' : 'ap-o-burger-menu'" i-amphtml-binding> <ul class="-th"> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Giới thiệu </label> <input class="-td" type="checkbox" aria-label="About"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/about/websites/"> Website AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/about/stories/"> Web Stories </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/about/ads/"> Quảng cáo AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/about/email/"> Email AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/about/how-amp-works/"> Cách thức hoạt động của AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/about/mission-and-vision/"> Tầm nhìn & Sứ mệnh </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/about/use-cases/"> Trường hợp sử dụng </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/success-stories/"> Câu chuyện thành công </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Tài liệu </label> <input class="-td" type="checkbox" aria-label="Documentation"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/documentation/"> Bắt đầu </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/documentation/guides-and-tutorials/"> Hướng dẫn & Tập luyện </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/documentation/components/"> Thành phần </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/documentation/examples/"> Ví dụ </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/documentation/courses/"> Khóa học </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/documentation/templates/"> Khuôn mẫu </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/documentation/tools/"> Công cụ </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Cộng đồng </label> <input class="-td" type="checkbox" aria-label="Community"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/documentation/guides-and-tutorials/contribute/"> Đóng góp </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/community/roadmap/"> Lộ trình </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/community/governance/"> Quản lý </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/community/working-groups/access-subscriptions/"> Nhóm làm việc </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Sự kiện </label> <input class="-td" type="checkbox" aria-label="Events"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/events/amp-fest-2020/"> AMP Fest 2020 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/events/amp-roadshow/"> AMP Roadshow </a> </li> </ul> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw" href="https://blog.amp.dev">Blog</a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw " href="/vi/support/"> Trợ giúp </a> </li> </ul> </nav> <main class="ap--main -ud"> <section class="-is -tc"> <div class="-i_"> <div class="-tc"> <div class="-ij"> <h1 class="-iz">Lộ trình cho Dự án AMP</h1> </div> <div class="-uv"> <svg style="height: 80%; width: 100%;"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#roadmap-header"/></svg> </div> </div> </div> </section> <section class="-um"> <p class="-ug">The ongoing development of AMP is conducted in <a href="/vi/community/working-groups/access-subscriptions/">working groups</a>, each with knowledge or interest in a specific area of AMP.<br><br>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.</p> <div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"/></svg> </div> <div class="ap-m-tip-content"> <p>All of the updates listed here are available as issues on GitHub and we'd love you to join the conversation there!</p> </div> </div> </section> <section class="-uy" id="status-updates"> <h2 class="-ub">Select working groups</h2> <div class="-uw"> <a class="ap-a-pill reset active" href="/vi/community/roadmap/#status-updates" style="color: #005AF0;"> <span class="ap-a-pill-text">Tất cả</span> </a> <a class="ap-a-pill components " href="/vi/community/roadmap/?category=components#status-updates" style="color: #48525C"> <span class="ap-a-pill-text">User Interface & Accessibility</span> </a> <a class="ap-a-pill amp4email " href="/vi/community/roadmap/?category=amp4email#status-updates" style="color: #A6E22E"> <span class="ap-a-pill-text">AMP for Email</span> </a> <a class="ap-a-pill infra " href="/vi/community/roadmap/?category=infra#status-updates" style="color: #00DCC0"> <span class="ap-a-pill-text">Infrastructure</span> </a> <a class="ap-a-pill runtime " href="/vi/community/roadmap/?category=runtime#status-updates" style="color: #09A600"> <span class="ap-a-pill-text">Runtime</span> </a> <a class="ap-a-pill caching " href="/vi/community/roadmap/?category=caching#status-updates" style="color: #EC6600"> <span class="ap-a-pill-text">Caching</span> </a> <a class="ap-a-pill viewers " href="/vi/community/roadmap/?category=viewers#status-updates" style="color: #FF7272"> <span class="ap-a-pill-text">Viewers</span> </a> <a class="ap-a-pill stories " href="/vi/community/roadmap/?category=stories#status-updates" style="color: #FFDC00"> <span class="ap-a-pill-text">Stories</span> </a> <a class="ap-a-pill analytics " href="/vi/community/roadmap/?category=analytics#status-updates" style="color: #5500D7"> <span class="ap-a-pill-text">Analytics</span> </a> <a class="ap-a-pill monetization " href="/vi/community/roadmap/?category=monetization#status-updates" style="color: #005AF0"> <span class="ap-a-pill-text">Monetization</span> </a> <a class="ap-a-pill performance " href="/vi/community/roadmap/?category=performance#status-updates" style="color: #C80000"> <span class="ap-a-pill-text">Performance</span> </a> <a class="ap-a-pill bento " href="/vi/community/roadmap/?category=bento#status-updates" style="color: #45184B"> <span class="ap-a-pill-text">Bento</span> </a> </div> </section> <section class="-ux"> <div class="-uk"> <div class="-u_"> <amp-animation id="anim-q3-2022" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":".3s","fill":"both","direction":"alternate","animations":[{"selector":".nav-item-title","keyframes":{"opacity":".3"}},{"selector":"#nav-item-q3-2022","keyframes":{"opacity":"1"}},{"selector":".nav-item-timeline","keyframes":{"opacity":"0"}},{"selector":"#nav-item-timeline-q3-2022","keyframes":{"opacity":"1"}}]}</script> </amp-animation> <button class="-uj" on="tap:status-updates.scrollTo(duration=500)"> <h3 class="-uq nav-item-title" id="nav-item-q3-2022"> Q3 2022 </h3> <span class="-uz nav-item-timeline" id="nav-item-timeline-q3-2022"> </span> </button> <amp-animation id="anim-q2-2022" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":".3s","fill":"both","direction":"alternate","animations":[{"selector":".nav-item-title","keyframes":{"opacity":".3"}},{"selector":"#nav-item-q2-2022","keyframes":{"opacity":"1"}},{"selector":".nav-item-timeline","keyframes":{"opacity":"0"}},{"selector":"#nav-item-timeline-q2-2022","keyframes":{"opacity":"1"}}]}</script> </amp-animation> <button class="-uj" on="tap:q2-2022.scrollTo(duration=500)"> <h3 class="-uq nav-item-title" id="nav-item-q2-2022"> Q2 2022 </h3> <span class="-uz nav-item-timeline" id="nav-item-timeline-q2-2022"> </span> </button> <amp-animation id="anim-q1-2022" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":".3s","fill":"both","direction":"alternate","animations":[{"selector":".nav-item-title","keyframes":{"opacity":".3"}},{"selector":"#nav-item-q1-2022","keyframes":{"opacity":"1"}},{"selector":".nav-item-timeline","keyframes":{"opacity":"0"}},{"selector":"#nav-item-timeline-q1-2022","keyframes":{"opacity":"1"}}]}</script> </amp-animation> <button class="-uj" on="tap:q1-2022.scrollTo(duration=500)"> <h3 class="-uq nav-item-title" id="nav-item-q1-2022"> Q1 2022 </h3> <span class="-uz nav-item-timeline" id="nav-item-timeline-q1-2022"> </span> </button> <amp-animation id="anim-q4-2021" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":".3s","fill":"both","direction":"alternate","animations":[{"selector":".nav-item-title","keyframes":{"opacity":".3"}},{"selector":"#nav-item-q4-2021","keyframes":{"opacity":"1"}},{"selector":".nav-item-timeline","keyframes":{"opacity":"0"}},{"selector":"#nav-item-timeline-q4-2021","keyframes":{"opacity":"1"}}]}</script> </amp-animation> <button class="-uj" on="tap:q4-2021.scrollTo(duration=500)"> <h3 class="-uq nav-item-title" id="nav-item-q4-2021"> Q4 2021 </h3> <span class="-uz nav-item-timeline" id="nav-item-timeline-q4-2021"> </span> </button> <amp-animation id="anim-q3-2021" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":".3s","fill":"both","direction":"alternate","animations":[{"selector":".nav-item-title","keyframes":{"opacity":".3"}},{"selector":"#nav-item-q3-2021","keyframes":{"opacity":"1"}},{"selector":".nav-item-timeline","keyframes":{"opacity":"0"}},{"selector":"#nav-item-timeline-q3-2021","keyframes":{"opacity":"1"}}]}</script> </amp-animation> <button class="-uj" on="tap:q3-2021.scrollTo(duration=500)"> <h3 class="-uq nav-item-title" id="nav-item-q3-2021"> Q3 2021 </h3> <span class="-uz nav-item-timeline" id="nav-item-timeline-q3-2021"> </span> </button> <amp-animation id="anim-q2-2021" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":".3s","fill":"both","direction":"alternate","animations":[{"selector":".nav-item-title","keyframes":{"opacity":".3"}},{"selector":"#nav-item-q2-2021","keyframes":{"opacity":"1"}},{"selector":".nav-item-timeline","keyframes":{"opacity":"0"}},{"selector":"#nav-item-timeline-q2-2021","keyframes":{"opacity":"1"}}]}</script> </amp-animation> <button class="-uj" on="tap:q2-2021.scrollTo(duration=500)"> <h3 class="-uq nav-item-title" id="nav-item-q2-2021"> Q2 2021 </h3> <span class="-uz nav-item-timeline" id="nav-item-timeline-q2-2021"> </span> </button> <amp-animation id="anim-q1-2021" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":".3s","fill":"both","direction":"alternate","animations":[{"selector":".nav-item-title","keyframes":{"opacity":".3"}},{"selector":"#nav-item-q1-2021","keyframes":{"opacity":"1"}},{"selector":".nav-item-timeline","keyframes":{"opacity":"0"}},{"selector":"#nav-item-timeline-q1-2021","keyframes":{"opacity":"1"}}]}</script> </amp-animation> <button class="-uj" on="tap:q1-2021.scrollTo(duration=500)"> <h3 class="-uq nav-item-title" id="nav-item-q1-2021"> Q1 2021 </h3> <span class="-uz nav-item-timeline" id="nav-item-timeline-q1-2021"> </span> </button> <amp-animation id="anim-q4-2020" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":".3s","fill":"both","direction":"alternate","animations":[{"selector":".nav-item-title","keyframes":{"opacity":".3"}},{"selector":"#nav-item-q4-2020","keyframes":{"opacity":"1"}},{"selector":".nav-item-timeline","keyframes":{"opacity":"0"}},{"selector":"#nav-item-timeline-q4-2020","keyframes":{"opacity":"1"}}]}</script> </amp-animation> <button class="-uj" on="tap:q4-2020.scrollTo(duration=500)"> <h3 class="-uq nav-item-title" id="nav-item-q4-2020"> Q4 2020 </h3> <span class="-uz nav-item-timeline" id="nav-item-timeline-q4-2020"> </span> </button> <amp-animation id="anim-q3-2020" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":".3s","fill":"both","direction":"alternate","animations":[{"selector":".nav-item-title","keyframes":{"opacity":".3"}},{"selector":"#nav-item-q3-2020","keyframes":{"opacity":"1"}},{"selector":".nav-item-timeline","keyframes":{"opacity":"0"}},{"selector":"#nav-item-timeline-q3-2020","keyframes":{"opacity":"1"}}]}</script> </amp-animation> <button class="-uj" on="tap:q3-2020.scrollTo(duration=500)"> <h3 class="-uq nav-item-title" id="nav-item-q3-2020"> Q3 2020 </h3> <span class="-uz nav-item-timeline" id="nav-item-timeline-q3-2020"> </span> </button> <amp-animation id="anim-q2-2020" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":".3s","fill":"both","direction":"alternate","animations":[{"selector":".nav-item-title","keyframes":{"opacity":".3"}},{"selector":"#nav-item-q2-2020","keyframes":{"opacity":"1"}},{"selector":".nav-item-timeline","keyframes":{"opacity":"0"}},{"selector":"#nav-item-timeline-q2-2020","keyframes":{"opacity":"1"}}]}</script> </amp-animation> <button class="-uj" on="tap:q2-2020.scrollTo(duration=500)"> <h3 class="-uq nav-item-title" id="nav-item-q2-2020"> Q2 2020 </h3> <span class="-uz nav-item-timeline" id="nav-item-timeline-q2-2020"> </span> </button> <amp-animation id="anim-q1-2020" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":".3s","fill":"both","direction":"alternate","animations":[{"selector":".nav-item-title","keyframes":{"opacity":".3"}},{"selector":"#nav-item-q1-2020","keyframes":{"opacity":"1"}},{"selector":".nav-item-timeline","keyframes":{"opacity":"0"}},{"selector":"#nav-item-timeline-q1-2020","keyframes":{"opacity":"1"}}]}</script> </amp-animation> <button class="-uj" on="tap:q1-2020.scrollTo(duration=500)"> <h3 class="-uq nav-item-title" id="nav-item-q1-2020"> Q1 2020 </h3> <span class="-uz nav-item-timeline" id="nav-item-timeline-q1-2020"> </span> </button> <amp-animation id="anim-q4-2019" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":".3s","fill":"both","direction":"alternate","animations":[{"selector":".nav-item-title","keyframes":{"opacity":".3"}},{"selector":"#nav-item-q4-2019","keyframes":{"opacity":"1"}},{"selector":".nav-item-timeline","keyframes":{"opacity":"0"}},{"selector":"#nav-item-timeline-q4-2019","keyframes":{"opacity":"1"}}]}</script> </amp-animation> <button class="-uj" on="tap:q4-2019.scrollTo(duration=500)"> <h3 class="-uq nav-item-title" id="nav-item-q4-2019"> Q4 2019 </h3> <span class="-uz nav-item-timeline" id="nav-item-timeline-q4-2019"> </span> </button> <amp-animation id="anim-q3-2019" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":".3s","fill":"both","direction":"alternate","animations":[{"selector":".nav-item-title","keyframes":{"opacity":".3"}},{"selector":"#nav-item-q3-2019","keyframes":{"opacity":"1"}},{"selector":".nav-item-timeline","keyframes":{"opacity":"0"}},{"selector":"#nav-item-timeline-q3-2019","keyframes":{"opacity":"1"}}]}</script> </amp-animation> <button class="-uj" on="tap:q3-2019.scrollTo(duration=500)"> <h3 class="-uq nav-item-title" id="nav-item-q3-2019"> Q3 2019 </h3> <span class="-uz nav-item-timeline" id="nav-item-timeline-q3-2019"> </span> </button> <amp-animation id="anim-q2-2019" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":".3s","fill":"both","direction":"alternate","animations":[{"selector":".nav-item-title","keyframes":{"opacity":".3"}},{"selector":"#nav-item-q2-2019","keyframes":{"opacity":"1"}},{"selector":".nav-item-timeline","keyframes":{"opacity":"0"}},{"selector":"#nav-item-timeline-q2-2019","keyframes":{"opacity":"1"}}]}</script> </amp-animation> <button class="-uj" on="tap:q2-2019.scrollTo(duration=500)"> <h3 class="-uq nav-item-title" id="nav-item-q2-2019"> Q2 2019 </h3> <span class="-uz nav-item-timeline" id="nav-item-timeline-q2-2019"> </span> </button> <amp-animation id="anim-q1-2019" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":".3s","fill":"both","direction":"alternate","animations":[{"selector":".nav-item-title","keyframes":{"opacity":".3"}},{"selector":"#nav-item-q1-2019","keyframes":{"opacity":"1"}},{"selector":".nav-item-timeline","keyframes":{"opacity":"0"}},{"selector":"#nav-item-timeline-q1-2019","keyframes":{"opacity":"1"}}]}</script> </amp-animation> <button class="-uj" on="tap:q1-2019.scrollTo(duration=500)"> <h3 class="-uq nav-item-title" id="nav-item-q1-2019"> Q1 2019 </h3> <span class="-uz nav-item-timeline" id="nav-item-timeline-q1-2019"> </span> </button> </div> </div> <div class="-ae"> <div class="-at" id="stories-105"> <amp-position-observer intersection-ratios=".95" target="q3-2022" on="enter:anim-q3-2022.start" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <aside class="-ar" id="q3-2022"> <h3>Q3 2022</h3> </aside> <aside class="-ai" id="scroll-stories-105"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FFDC00"></span> <div class="-al"> <h4 class="-ac">Stories</h4> <span class="-ah">Status Update Mon Aug 01 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="amp-story-paywall">AMP Story Paywall</h3> <ul> <li>📖 amp-story-subscriptions documentation <a href="https://github.com/ampproject/amphtml/issues/38179">#38179</a></li> <li>✨ Validator changes to launch amp-story-subscriptions <a href="https://github.com/ampproject/amphtml/issues/38194">#38194</a></li> </ul> <h3 id="story-analytics">Story analytics</h3> <ul> <li>✨ Added previous page index <a href="https://github.com/ampproject/amphtml/issues/38289">#38289</a></li> </ul> <h3 id="story-videocache">Story videocache</h3> <ul> <li>🐛 Video cache doesn't add crossorigin attribute to video element <a href="https://github.com/ampproject/amphtml/issues/38222">#38222</a></li> <li>🔥 Apply hasAudio flag behind experiment <a href="https://github.com/ampproject/amphtml/issues/38285">#38285</a></li> </ul> <h3 id="story-localization">Story localization</h3> <ul> <li>🚀 Removed localization strings from js <a href="https://github.com/ampproject/amphtml/issues/38280">#38280</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/105" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="story-video">Story video</h3> <ul> <li>🐛 Prerendered video unmounted fails to play <a href="https://github.com/ampproject/amphtml/issues/38263">#38263</a></li> <li>🐛 Prerendered video unmounted fails to play <a href="https://github.com/ampproject/amphtml/issues/38264">#38264</a></li> </ul> <h3 id="story-bodymoving">Story bodymoving</h3> <ul> <li>✨ Support amp-bodymovin-animation on amp-story-grid-layer <a href="https://github.com/ampproject/amphtml/issues/38239">#38239</a></li> </ul> <h3 id="story-mediapool">Story mediapool</h3> <ul> <li>🔥 Fix videos from mediapool with noaudio don't have audio when reused. <a href="https://github.com/ampproject/amphtml/issues/38216">#38216</a></li> </ul> <h3 id="others">Others</h3> <ul> <li>Bad loading experience in Story: Flash of white between video poster and video playback <a href="https://github.com/ampproject/amphtml/issues/31358">#31358</a></li> </ul> <h2 id="what's-next">What's next</h2> <a href="https://github.com/ampproject/wg-stories/issues/105" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:stories-105.toggleClass(class='expanded'), scroll-stories-105.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-73"> <amp-position-observer intersection-ratios=".95" target="q2-2022" on="enter:anim-q2-2022.start" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <aside class="-ar" id="q2-2022"> <h3>Q2 2022</h3> </aside> <aside class="-ai" id="scroll-monetization-73"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Mon May 09 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - 2 new ad network integrations - Google ads now having top sticky ads launched</p> <p><strong>Story ads</strong> - New round of auto ad+CTA experiment being launched - New CTA button option being tested - Progress bar overflow bug fixed - Story ads click rate decrease investigation</p> <a href="https://github.com/ampproject/wg-monetization/issues/73" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Story ads</strong> - Await auto advance+CTA experiment results</p> <a href="https://github.com/ampproject/wg-monetization/issues/73" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-73.toggleClass(class='expanded'), scroll-monetization-73.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-112"> <aside class="-ai" id="scroll-performance-112"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Mon May 09 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Finished work on new render blocking font loading</li> <li>Written design document for version locking alternate binaries (such as ones without css in the JS binary)</li> </ul> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/112" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <ul> <li>additional monitoring for server services</li> <li>amp e2e use mjs files</li> </ul> <a href="https://github.com/ampproject/wg-performance/issues/112" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-112.toggleClass(class='expanded'), scroll-performance-112.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="stories-103"> <aside class="-ai" id="scroll-stories-103"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FFDC00"></span> <div class="-al"> <h4 class="-ac">Stories</h4> <span class="-ah">Status Update Mon May 02 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="story-preview">Story Preview</h3> <ul> <li>✨ Allow all story pages and grid layers to be rendered in preview mode <a href="https://github.com/ampproject/amphtml/issues/38030">#38030</a></li> <li>✨ Enable stories to play when in preview mode <a href="https://github.com/ampproject/amphtml/issues/38121">#38121</a></li> <li>🐛 Enable amp-video to play in preview mode <a href="https://github.com/ampproject/amphtml/issues/38149">#38149</a></li> </ul> <h3 id="amp-story-360">amp story 360</h3> <ul> <li>🐛 Remove GL context handling <a href="https://github.com/ampproject/amphtml/issues/38144">#38144</a></li> </ul> <h3 id="amp-story-captions">Amp story captions</h3> <ul> <li>Allow Players to get/set the captions state <a href="https://github.com/ampproject/amphtml/issues/37898">#37898</a></li> <li>Render video captions with amp-story-captions when in an amp-story doc and served from cache <a href="https://github.com/ampproject/amphtml/issues/37899">#37899</a></li> <li>Implement default, overridable CSS <a href="https://github.com/ampproject/amphtml/issues/37900">#37900</a></li> <li>✨ style-preset attribute with styles <a href="https://github.com/ampproject/amphtml/issues/37967">#37967</a></li> <li>✨ get and set captions state from viewer <a href="https://github.com/ampproject/amphtml/issues/38009">#38009</a></li> </ul> <h3 id="i18n">i18n</h3> <ul> <li>Do not use concatenation in localizable UI strings <a href="https://github.com/ampproject/amphtml/issues/38060">#38060</a></li> </ul> <h3 id="amp-story-shopping">amp story shopping</h3> <ul> <li>📖 documentation <a href="https://github.com/ampproject/amphtml/issues/37987">#37987</a></li> <li>🌐 i18n "reviews" string capitalization description <a href="https://github.com/ampproject/amphtml/issues/38032">#38032</a></li> <li>📖 CTA casing in docs. Remove "draft" from doc metadata. <a href="https://github.com/ampproject/amphtml/issues/38119">#38119</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/103" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="amp-story-shopping">amp-story-shopping</h3> <ul> <li>Allow for a custom cta <a href="https://github.com/ampproject/amphtml/issues/38080">#38080</a></li> <li>Make call to action case consistent <a href="https://github.com/ampproject/amphtml/issues/38082">#38082</a></li> </ul> <h3 id="story-attachment">Story attachment</h3> <ul> <li>🐛 Fix cta-image=none showing link icon <a href="https://github.com/ampproject/amphtml/issues/38109">#38109</a></li> </ul> <h3 id="story-system-layer">Story system-layer</h3> <ul> <li>✨ Add CC Icon that toggles captions <a href="https://github.com/ampproject/amphtml/issues/37884">#37884</a></li> </ul> <h3 id="amp-animation">amp-animation</h3> <ul> <li>✨ Adds a new attr that allows to override pan scaling factor. <a href="https://github.com/ampproject/amphtml/issues/37965">#37965</a></li> </ul> <h3 id="others">Others</h3> <ul> <li>amp-story-cta-layer I2D <a href="https://github.com/ampproject/amphtml/issues/34450">#34450</a></li> <li>🚀 amp-story: Use Services.urlForDoc instead of util functions <a href="https://github.com/ampproject/amphtml/issues/38026">#38026</a></li> <li>🐛 amp-story-shopping does not display CTA if all tags are invalid and Fixes remote shopping data loading on refresh with page attachment open <a href="https://github.com/ampproject/amphtml/issues/38035">#38035</a></li> <li>🌐 amp story shopping "Shop now" CTA casing <a href="https://github.com/ampproject/amphtml/issues/38096">#38096</a></li> <li>🧪 Experiment: story auto advance and new cta button <a href="https://github.com/ampproject/amphtml/issues/38097">#38097</a></li> <li>🐛 Move directories of md files for broken links (story-shopping, story-page-attachment, story-page-outlink) <a href="https://github.com/ampproject/amphtml/issues/38134">#38134</a></li> <li>Added the possibility to get page count to the story messaging api <a href="https://github.com/ampproject/amphtml/issues/38170">#38170</a></li> </ul> <h2 id="what's-next">What's next</h2> <ul> <li>amp story captions update docs <a href="https://github.com/ampproject/amphtml/pull/38146">#38146</a></li> <li>amp-video cache through amp-orig-src <a href="https://github.com/ampproject/amphtml/issues/37425">#37425</a></li> <li>Bad loading experience in Story: Flash of white between video poster and video playback <a href="https://github.com/ampproject/amphtml/issues/31358">#31358</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/103" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:stories-103.toggleClass(class='expanded'), scroll-stories-103.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-74"> <aside class="-ai" id="scroll-monetization-74"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Mon May 02 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Story ads</strong> - Fixed the issue that the progress bar appears while seeing ads</p> <a href="https://github.com/ampproject/wg-monetization/issues/74" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Story ads</strong> - auto advance+CTA experiment restarts next week</p> <a href="https://github.com/ampproject/wg-monetization/issues/74" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-74.toggleClass(class='expanded'), scroll-monetization-74.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="stories-101"> <aside class="-ai" id="scroll-stories-101"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FFDC00"></span> <div class="-al"> <h4 class="-ac">Stories</h4> <span class="-ah">Status Update Fri Apr 08 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="amp-animation">amp-animation</h3> <ul> <li>✨ Adds a new attr that allows to override pan scaling factor. <a href="https://github.com/ampproject/amphtml/issues/37965">#37965</a></li> </ul> <h3 id="story-performance">Story performance</h3> <ul> <li>Not load all page attachment images when loading story <a href="https://github.com/ampproject/amphtml/issues/35534">#35534</a></li> <li>Lazy-load non-critical extensions <a href="https://github.com/ampproject/amphtml/issues/37680">#37680</a></li> <li>🚀 Fix CLS caused from AMP runtime CSS showing story before amp-story.css <a href="https://github.com/ampproject/amphtml/issues/37990">#37990</a></li> </ul> <h3 id="story-animations">Story animations</h3> <ul> <li>🐛 Center vertical panning <a href="https://github.com/ampproject/amphtml/issues/38017">#38017</a></li> </ul> <h3 id="amp-story-shopping">amp-story-shopping</h3> <ul> <li>Add productDescription to all templates and max length <a href="https://github.com/ampproject/amphtml/issues/37993">#37993</a></li> </ul> <h3 id="amp-story-captions">amp story captions</h3> <ul> <li>🐛 Close voice tags in example html .vtt files <a href="https://github.com/ampproject/amphtml/issues/37977">#37977</a></li> </ul> <h3 id="page-attachments">Page Attachments</h3> <ul> <li>🚀 Ensure that the page attachment container is not inadvertently rendered by the AMP Resources manager <a href="https://github.com/ampproject/amphtml/issues/37961">#37961</a></li> <li>🖍 Add the 'Read more' string for translation <a href="https://github.com/ampproject/amphtml/issues/37991">#37991</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/101" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="amp-story-shopping">amp story shopping</h3> <ul> <li>documentation <a href="https://github.com/ampproject/amphtml/issues/37894">#37894</a></li> <li>♻️ Change "vendor" to "brand" <a href="https://github.com/ampproject/amphtml/issues/37958">#37958</a></li> </ul> <h3 id="amp-story-page-attachment">amp story page attachment</h3> <ul> <li>🐛 add path metadata docs <a href="https://github.com/ampproject/amphtml/issues/37988">#37988</a></li> </ul> <h3 id="amp-story-paywall">AMP Story Paywall</h3> <ul> <li>✨ Handles grant status and show/hide paywall dialog in amp-story-subscriptions <a href="https://github.com/ampproject/amphtml/issues/37892">#37892</a></li> </ul> <h3 id="story-analytics">Story analytics</h3> <ul> <li>🐛 Fix prerender analytics not firing <a href="https://github.com/ampproject/amphtml/issues/37975">#37975</a></li> </ul> <h3 id="story-localization">Story localization</h3> <ul> <li>🚀 <a href="https://github.com/ampproject/amphtml/issues/37969">#37969</a></li> </ul> <h3 id="others">Others</h3> <ul> <li>♻️ Story: refactor to treat story ad pages as story pages <a href="https://github.com/ampproject/amphtml/issues/37940">#37940</a></li> <li>🚀 amp-story: Use Services.urlForDoc instead of util functions <a href="https://github.com/ampproject/amphtml/issues/38026">#38026</a></li> </ul> <h2 id="what's-next">What's next</h2> <ul> <li><a href="https://github.com/ampproject/amphtml/issues/31358">ad loading experience in Story: Flash of white between video poster and video playback</a></li> <li><a href="https://github.com/ampproject/amphtml/pull/36042">✨ [Story interactive] Enable interactive disclaimer dialog</a></li> <li><a href="https://github.com/ampproject/amphtml/pull/36668">🐛 [Story performance] Disabling animations on initial page when first loaded</a></li> <li><a href="https://github.com/ampproject/amphtml/issues/37211">amp-story-player: previous and next story buttons not visible in Safari</a></li> <li><a href="https://github.com/ampproject/amphtml/issues/37425">[I2R] amp-video cache through amp-orig-src</a></li> <li><a href="https://github.com/ampproject/amphtml/pull/38032">🌐 [amp story shopping] i18n "reviews" string capitalization description</a></li> <li><a href="https://github.com/ampproject/amphtml/pull/37965">✨ [amp-animation] Adds a new attr that allows to override pan scaling factor.</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/101" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:stories-101.toggleClass(class='expanded'), scroll-stories-101.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-111"> <aside class="-ai" id="scroll-performance-111"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Sat Apr 02 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>created document for render blocking font loading</li> <li>added render blocking font loading classes (to be reviewed)</li> </ul> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/111" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <ul> <li>additional monitoring for server services</li> <li>amp e2e use mjs files</li> <li>design document for version locking alternate binaries (such as ones without css in the JS binary)</li> </ul> <a href="https://github.com/ampproject/wg-performance/issues/111" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-111.toggleClass(class='expanded'), scroll-performance-111.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-110"> <aside class="-ai" id="scroll-performance-110"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Fri Apr 01 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>amp story translations server changes design document</li> <li>amp-story request transformer changes to handle translation language fallback</li> </ul> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/110" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <ul> <li>amp e2e use mjs files</li> <li>design document for version locking alternate binaries (such as ones without css in the JS binary)</li> </ul> <a href="https://github.com/ampproject/wg-performance/issues/110" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-110.toggleClass(class='expanded'), scroll-performance-110.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="stories-100"> <amp-position-observer intersection-ratios=".95" target="q1-2022" on="enter:anim-q1-2022.start" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <aside class="-ar" id="q1-2022"> <h3>Q1 2022</h3> </aside> <aside class="-ai" id="scroll-stories-100"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FFDC00"></span> <div class="-al"> <h4 class="-ac">Stories</h4> <span class="-ah">Status Update Wed Mar 02 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="amp-story-page-attachment">amp story page attachment</h3> <ul> <li>CTA tab-able inline CTA <a href="https://github.com/ampproject/amphtml/issues/37933">#37933</a></li> </ul> <h3 id="video-cache">video cache</h3> <ul> <li>✨ Append captions track from cache response <a href="https://github.com/ampproject/amphtml/issues/37893">#37893</a></li> </ul> <h3 id="story-localization">Story localization</h3> <ul> <li>✨ Fetch strings for localization files if in experiment <a href="https://github.com/ampproject/amphtml/issues/37843">#37843</a></li> <li>✨ Localize system layer async <a href="https://github.com/ampproject/amphtml/issues/37870">#37870</a></li> </ul> <h3 id="story-performance">Story performance</h3> <ul> <li>🚀 Remove FOUT on font loading of amp-story-education <a href="https://github.com/ampproject/amphtml/issues/37928">#37928</a></li> <li>🚀 Remove CLS from system layer when adding buttons <a href="https://github.com/ampproject/amphtml/issues/37929">#37929</a></li> <li>🚀 Set disabled animation on first page to 1 <a href="https://github.com/ampproject/amphtml/issues/37157">#37157</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/100" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="observable">Observable</h3> <ul> <li>✨ Make observable safe to remove handler while firing. <a href="https://github.com/ampproject/amphtml/issues/37887">#37887</a></li> </ul> <h3 id="story-system-layer">Story system-layer</h3> <ul> <li>🚮 Removing unused storyHasAudio state property <a href="https://github.com/ampproject/amphtml/issues/37220">#37220</a></li> </ul> <h3 id="amp-story-shopping">amp story shopping</h3> <ul> <li>Remove multi line border radius code <a href="https://github.com/ampproject/amphtml/issues/37808">#37808</a></li> <li>✨ Change productBrand to productVendor and make it optional <a href="https://github.com/ampproject/amphtml/issues/37897">#37897</a></li> </ul> <h2 id="what's-next">What's next</h2> <ul> <li>Launch amp-story-shopping (analytics, validation & documentation)</li> <li>amp-story-captions (customizable CSS with smart default, automatically use amp-story-captions component)</li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/100" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:stories-100.toggleClass(class='expanded'), scroll-stories-100.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-72"> <aside class="-ai" id="scroll-monetization-72"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Wed Mar 02 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - Added synchronous UACH macro for amp-ad-exit use - Analysis of top sticky ads metrics</p> <p><strong>Story ads</strong> - Refactoring story pages to include ad pages - Analyzing a regression happened on story ads performance </p> <a href="https://github.com/ampproject/wg-monetization/issues/72" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Amp monetization</strong> - Ads auto advance launch</p> <p><strong>Story ads</strong> - Ads progress bar visual update - Different ads performance analysis</p> <a href="https://github.com/ampproject/wg-monetization/issues/72" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-72.toggleClass(class='expanded'), scroll-monetization-72.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-109"> <aside class="-ai" id="scroll-performance-109"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Wed Mar 02 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/109" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <a href="https://github.com/ampproject/wg-performance/issues/109" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-109.toggleClass(class='expanded'), scroll-performance-109.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-96"> <aside class="-ai" id="scroll-components-96"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Tue Mar 01 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p>Alan * OOO This sprint</p> <p>Beck * Presented Bento resize guard at design review</p> <p>Dhruv * Investigated changes required for amp-analytics to be compatible with GA4 * Investigated bug relating to amp-img and amp-render</p> <p>Keshav * Maintainance work on tests, such as remap dependencies, enhancements to standalone unit tests and e2e tests</p> <p>William * Worked with formidable on their porting of bento PRS</p> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-components/issues/96" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Implement bento resize guard</li> <li>Launch mustache support for bento date display and date countdown web components</li> <li>Upgrade mustache in third_part/</li> <li>Continue to enhance testing</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/96" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-96.toggleClass(class='expanded'), scroll-components-96.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="stories-98"> <aside class="-ai" id="scroll-stories-98"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FFDC00"></span> <div class="-al"> <h4 class="-ac">Stories</h4> <span class="-ah">Status Update Tue Mar 01 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="story-localization">Story localization</h3> <ul> <li>✨ Use inlined JSONs for localization bundles <a href="https://github.com/ampproject/amphtml/issues/37836">#37836</a></li> </ul> <h3 id="story-attachment">Story attachment</h3> <ul> <li>🐛 Opening outlink error for closeButton being null <a href="https://github.com/ampproject/amphtml/issues/37833">#37833</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/98" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="amp-story-shopping">amp story shopping</h3> <ul> <li>PDP Details section open / closing state setting <a href="https://github.com/ampproject/amphtml/issues/37763">#37763</a></li> <li>Support newlines in productDescription <a href="https://github.com/ampproject/amphtml/issues/37787">#37787</a></li> <li>🖍 Border radius on single image in RTL <a href="https://github.com/ampproject/amphtml/issues/37803">#37803</a></li> <li>✨ Optionally render rating <a href="https://github.com/ampproject/amphtml/issues/37805">#37805</a></li> <li>Error when loading story on page that uses remote data <a href="https://github.com/ampproject/amphtml/issues/37749">#37749</a></li> </ul> <h2 id="what's-next">What's next</h2> <ul> <li>Shipping the shopping components</li> <li>Finish story subscriptions component</li> <li>Lazy load localization strings</li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/98" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:stories-98.toggleClass(class='expanded'), scroll-stories-98.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-71"> <aside class="-ai" id="scroll-monetization-71"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Tue Mar 01 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - Fixed a Google Ads issue breaking ads' FIE rendering - Auto advance launch experiment data analysis</p> <p><strong>Story ads</strong></p> <a href="https://github.com/ampproject/wg-monetization/issues/71" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Amp monetization</strong> - Ads auto advance launch</p> <p><strong>Story ads</strong> - Ads progress bar visual update</p> <a href="https://github.com/ampproject/wg-monetization/issues/71" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-71.toggleClass(class='expanded'), scroll-monetization-71.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-108"> <aside class="-ai" id="scroll-performance-108"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Tue Mar 01 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/108" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <a href="https://github.com/ampproject/wg-performance/issues/108" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-108.toggleClass(class='expanded'), scroll-performance-108.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-70"> <aside class="-ai" id="scroll-monetization-70"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Wed Feb 02 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - Auto ads to allow vendors to modify remote ads config - Fix viewer and top sticky ads conflict: now the ads will show below the anchor</p> <p><strong>Story ads</strong> - Ad badge and icon position update PR</p> <a href="https://github.com/ampproject/wg-monetization/issues/70" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Story ads</strong> - New design: Move the ad badge to bottom - Auto advance launch - Ads progress bar visual update</p> <a href="https://github.com/ampproject/wg-monetization/issues/70" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-70.toggleClass(class='expanded'), scroll-monetization-70.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-106"> <aside class="-ai" id="scroll-performance-106"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Wed Feb 02 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/106" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <a href="https://github.com/ampproject/wg-performance/issues/106" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-106.toggleClass(class='expanded'), scroll-performance-106.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="stories-96"> <aside class="-ai" id="scroll-stories-96"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FFDC00"></span> <div class="-al"> <h4 class="-ac">Stories</h4> <span class="-ah">Status Update Tue Feb 01 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="story-video">Story video</h3> <ul> <li>🚀 Use the inlined video response instead of issuing an XHR request, for the 1st video of the 1st web story page <a href="https://github.com/ampproject/amphtml/issues/37499">#37499</a></li> </ul> <h3 id="story-documentation">Story documentation</h3> <ul> <li>📖 Fix page attachment docs location <a href="https://github.com/ampproject/amphtml/issues/37669">#37669</a></li> </ul> <h3 id="amp-story-page-attachment">amp story page attachment</h3> <ul> <li>🖍️ Box shadow on header <a href="https://github.com/ampproject/amphtml/issues/37579">#37579</a></li> <li>🐛 fix attribute typo on CTA active toggle <a href="https://github.com/ampproject/amphtml/issues/37633">#37633</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/96" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="amp-story-shopping">amp story shopping</h3> <ul> <li>Product tag functionality <a href="https://github.com/ampproject/amphtml/issues/36734">#36734</a></li> <li>Attachment template logic <a href="https://github.com/ampproject/amphtml/issues/36735">#36735</a></li> <li>PLP template logic <a href="https://github.com/ampproject/amphtml/issues/36736">#36736</a></li> <li>PDP template logic <a href="https://github.com/ampproject/amphtml/issues/36738">#36738</a></li> <li>PDP carousel <a href="https://github.com/ampproject/amphtml/issues/37091">#37091</a></li> <li>🐛 Do not render shopping CTA if no shopping tags are on the page <a href="https://github.com/ampproject/amphtml/issues/37503">#37503</a></li> <li>✅ Move i18n CTA label logic into shopping-attachment component <a href="https://github.com/ampproject/amphtml/issues/37515">#37515</a></li> <li>♻️ Rename tag-id to product-id <a href="https://github.com/ampproject/amphtml/issues/37527">#37527</a></li> </ul> <h3 id="others">Others</h3> <ul> <li>🖍 Added shopping tag flip on too far position to the right <a href="https://github.com/ampproject/amphtml/issues/37195">#37195</a></li> <li>✨added camelCase to amp-story-shoppping component <a href="https://github.com/ampproject/amphtml/issues/37533">#37533</a></li> <li>🐛 amp-story-shopping Added correct margins for RTL mode <a href="https://github.com/ampproject/amphtml/issues/37568">#37568</a></li> </ul> <h2 id="what's-next">What's next</h2> <ul> <li>Shopping Dev Preview</li> <li>Amp story subscriptions (paywall) </li> <li>Performance</li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/96" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:stories-96.toggleClass(class='expanded'), scroll-stories-96.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-69"> <aside class="-ai" id="scroll-monetization-69"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Tue Feb 01 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - Vendor config updates</p> <p><strong>Story ads</strong> - Ad badge and icon position update - New analytics macro update: experiment started - Auto advance launch starting</p> <a href="https://github.com/ampproject/wg-monetization/issues/69" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Amp monetization</strong> - Fix the top sticky ads/viewer banner conflict issue</p> <h2 id="story-ads"><strong>Story ads</strong></h2> <a href="https://github.com/ampproject/wg-monetization/issues/69" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-69.toggleClass(class='expanded'), scroll-monetization-69.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-105"> <aside class="-ai" id="scroll-performance-105"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Tue Feb 01 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/105" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <a href="https://github.com/ampproject/wg-performance/issues/105" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-105.toggleClass(class='expanded'), scroll-performance-105.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="stories-91"> <aside class="-ai" id="scroll-stories-91"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FFDC00"></span> <div class="-al"> <h4 class="-ac">Stories</h4> <span class="-ah">Status Update Tue Jan 04 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="performance">Performance</h3> <ul> <li>🧪 Lazy load share menu on desktop on-demand <a href="https://github.com/ampproject/amphtml/issues/37044">#37044</a></li> <li>🚀 Disable animations on first page if story is transformed <a href="https://github.com/ampproject/amphtml/issues/37135">#37135</a></li> <li>♻️ Extract performance service into variable <a href="https://github.com/ampproject/amphtml/issues/37137">#37137</a></li> <li>🚀 Remove unused strings from localization bundles <a href="https://github.com/ampproject/amphtml/issues/37229">#37229</a></li> <li>🚀 Remove share menu from main amp-story bundle <a href="https://github.com/ampproject/amphtml/issues/37235">#37235</a></li> <li>🌐 Removed sound text localizations after removal from system layer <a href="https://github.com/ampproject/amphtml/issues/37218">#37218</a></li> <li>🚀 Move share menu to separate bundle <a href="https://github.com/ampproject/amphtml/issues/37179">#37179</a></li> </ul> <h3 id="pagination-buttons">Pagination buttons</h3> <ul> <li>🐛 Pagination forward button visibility state <a href="https://github.com/ampproject/amphtml/issues/37098">#37098</a></li> </ul> <h3 id="shopping">Shopping</h3> <ul> <li>Set active product data in store service <a href="https://github.com/ampproject/amphtml/issues/37013">#37013</a></li> <li>Optional product-tag-text for shopping tag <a href="https://github.com/ampproject/amphtml/issues/37105">#37105</a></li> <li>🖍 Prevent shopping tag dot and image from shrinking <a href="https://github.com/ampproject/amphtml/issues/37149">#37149</a></li> <li>Currency i18n <a href="https://github.com/ampproject/amphtml/issues/37246">#37246</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/91" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="system-layer-icons">System layer icons</h3> <ul> <li>🖍 Replaced icons and styles <a href="https://github.com/ampproject/amphtml/issues/37122">#37122</a></li> </ul> <h3 id="videos">Videos</h3> <ul> <li>✨ Added ACAO headers <a href="https://github.com/ampproject/amphtml/issues/37160">#37160</a></li> </ul> <h2 id="what's-next">What's next</h2> <ul> <li>Reduce bundle size further with more removal of page-attachment ui, localization strings, and CSS</li> <li>Work on shopping tags and attachment</li> <li>Make system layer more responsive, add CC icon and update "Ad" tag</li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/91" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:stories-91.toggleClass(class='expanded'), scroll-stories-91.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-67"> <aside class="-ai" id="scroll-monetization-67"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Tue Jan 04 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - Web interstitial implementation PR</p> <p><strong>Story ads</strong> - Ad badge overlapping with close button fix </p> <a href="https://github.com/ampproject/wg-monetization/issues/67" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Amp monetization</strong> - Incoming ad network integrations</p> <p><strong>Story ads</strong> - Discover more ways for publishers to monetize - Story ads meta analytics tag implementation</p> <a href="https://github.com/ampproject/wg-monetization/issues/67" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-67.toggleClass(class='expanded'), scroll-monetization-67.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-102"> <aside class="-ai" id="scroll-performance-102"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Tue Jan 04 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>🚀 Launched amp-story inlining css experiment.</li> <li>🐛 Fix "latestVersion" bug in amp-toolbox.</li> <li>🧪 Created tests for <code>amp-toolbox</code> AmpStoryCssTransformer in regards to LTS.</li> <li>💅 Add TS to Core and Bento.</li> <li>🚀 Migrated build system to esbuild.</li> <li>🐛 Fixes for AMP LCP for various LCP issues in amp-analytics. </li> </ul> <a href="https://github.com/ampproject/wg-performance/issues/102" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <ul> <li>Manual testing for amp-geo experiment</li> <li>Amp cache url rewriting code in amp-toolbox</li> <li>Typechecking more Bento directories</li> <li>WASM Jolt prototype</li> </ul> <a href="https://github.com/ampproject/wg-performance/issues/102" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-102.toggleClass(class='expanded'), scroll-performance-102.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="stories-95"> <aside class="-ai" id="scroll-stories-95"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FFDC00"></span> <div class="-al"> <h4 class="-ac">Stories</h4> <span class="-ah">Status Update Mon Jan 03 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="amp-story-shopping">amp story shopping</h3> <ul> <li>PLP template presentational structure and styling <a href="https://github.com/ampproject/amphtml/issues/36732">#36732</a></li> <li>🐛 shopping CTA label fix <a href="https://github.com/ampproject/amphtml/issues/37502">#37502</a></li> </ul> <h3 id="story-analytics">Story analytics</h3> <ul> <li>📖 Use amp-story-share-menu for share analytics <a href="https://github.com/ampproject/amphtml/issues/37475">#37475</a></li> <li>✅ Add test to check sharing happens with the right tag and eventType <a href="https://github.com/ampproject/amphtml/issues/37488">#37488</a></li> </ul> <h3 id="amp-story-page-attachment">Amp story page attachment</h3> <ul> <li>Refreshing page while attachment is open throws error. <a href="https://github.com/ampproject/amphtml/issues/37430">#37430</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/95" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="story-video">Story video</h3> <ul> <li>✨ Check if cache response contains audio <a href="https://github.com/ampproject/amphtml/issues/36283">#36283</a></li> </ul> <h3 id="story-performance">Story performance</h3> <ul> <li>🚀 Remove interactive host styles <a href="https://github.com/ampproject/amphtml/issues/37472">#37472</a></li> </ul> <h3 id="amp-story">amp story</h3> <ul> <li>🐛 Change toggleAttribute to set/removeAttribute <a href="https://github.com/ampproject/amphtml/issues/37420">#37420</a></li> </ul> <h2 id="what's-next">What's next</h2> <ul> <li>Shopping PLP and tags</li> <li>Amp story subscriptions (paywall)</li> <li>Performance</li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/95" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:stories-95.toggleClass(class='expanded'), scroll-stories-95.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-104"> <aside class="-ai" id="scroll-performance-104"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Mon Jan 03 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/104" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <a href="https://github.com/ampproject/wg-performance/issues/104" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-104.toggleClass(class='expanded'), scroll-performance-104.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-95"> <aside class="-ai" id="scroll-components-95"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Sat Jan 01 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Fixed long outstanding bug where client id is missing on next page in viewer (#36984)</li> <li>Continue work on Bento refactor to update the class hierarchy for Bento & AMP components</li> <li>Continue work on React storybook tests</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-components/issues/95" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Build and publish @bentoproject/core</li> <li>Remove <code>bento</code> experiment flag</li> <li>Start Investigating bento-analytics, bento port of amp-analytics</li> <li>Finish React storybook tests</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/95" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-95.toggleClass(class='expanded'), scroll-components-95.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="stories-92"> <aside class="-ai" id="scroll-stories-92"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FFDC00"></span> <div class="-al"> <h4 class="-ac">Stories</h4> <span class="-ah">Status Update Sat Jan 01 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="story-performance">Story performance</h3> <ul> <li>🚀 Move building share menu to share-menu.js <a href="https://github.com/ampproject/amphtml/issues/37209">#37209</a></li> <li>🚀 Move open page attachment UI to extension <a href="https://github.com/ampproject/amphtml/issues/37278">#37278</a></li> <li>🚀 Remove logging and development UI from the amp-story bundle <a href="https://github.com/ampproject/amphtml/issues/37279">#37279</a></li> <li>🚀 Remove affiliate links <a href="https://github.com/ampproject/amphtml/issues/37280">#37280</a></li> <li>🚀 Remove story access <a href="https://github.com/ampproject/amphtml/issues/37281">#37281</a></li> </ul> <h3 id="story-attachments">Story attachments</h3> <ul> <li>🐛 Fix attachment Firebase demos <a href="https://github.com/ampproject/amphtml/issues/37335">#37335</a></li> </ul> <h3 id="story-system-layer">Story system layer</h3> <ul> <li>🖍 New ad badge <a href="https://github.com/ampproject/amphtml/issues/37311">#37311</a></li> <li>⏪ Audio icon disappears when story has background audio <a href="https://github.com/ampproject/amphtml/issues/37314">#37314</a></li> </ul> <h3 id="amp-story">amp story</h3> <ul> <li>🐛 Replay/next page button bug fix <a href="https://github.com/ampproject/amphtml/issues/37316">#37316</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/92" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="amp-story-shopping">amp story shopping</h3> <ul> <li>Currency i18n <a href="https://github.com/ampproject/amphtml/issues/37126">#37126</a></li> </ul> <h3 id="story-documentation">Story documentation</h3> <ul> <li>📖 Cleanup experiment descriptions <a href="https://github.com/ampproject/amphtml/issues/37290">#37290</a></li> </ul> <h3 id="others">Others</h3> <ul> <li>Reduced area of amp-story-attachment <a href="https://github.com/ampproject/amphtml/issues/37234">#37234</a></li> <li>❄️ Skipping failing test for viewer <a href="https://github.com/ampproject/amphtml/issues/37245">#37245</a></li> </ul> <h2 id="what's-next">What's next</h2> <ul> <li>Bad loading experience in Story: Flash of white between video poster and video playback <a href="https://github.com/ampproject/amphtml/issues/31358">#31358</a></li> <li>[Story video] Check if cache response contains audio <a href="https://github.com/ampproject/amphtml/pull/36283">#36283</a></li> <li>amp-story-player: previous and next story buttons not visible in Safari <a href="https://github.com/ampproject/amphtml/issues/37211">#37211</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/92" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:stories-92.toggleClass(class='expanded'), scroll-stories-92.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-68"> <aside class="-ai" id="scroll-monetization-68"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Sat Jan 01 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - Web interstitial user experience discussion</p> <p><strong>Story ads</strong> - Ad badge overlapping with close button fix UX discussion - New analytics macro proposal: used for story ads<br> - Analyzed story ads apparent regression - amp-img server side rendering launched on Google transformer</p> <a href="https://github.com/ampproject/wg-monetization/issues/68" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <h2 id="amp-monetization"><strong>Amp monetization</strong></h2> <p><strong>Story ads</strong> - Discover more ways for publishers to monetize - Story ads meta analytics tag implementation</p> <a href="https://github.com/ampproject/wg-monetization/issues/68" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-68.toggleClass(class='expanded'), scroll-monetization-68.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-103"> <aside class="-ai" id="scroll-performance-103"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Sat Jan 01 2022</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/103" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <a href="https://github.com/ampproject/wg-performance/issues/103" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-103.toggleClass(class='expanded'), scroll-performance-103.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-66"> <amp-position-observer intersection-ratios=".95" target="q4-2021" on="enter:anim-q4-2021.start" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <aside class="-ar" id="q4-2021"> <h3>Q4 2021</h3> </aside> <aside class="-ai" id="scroll-monetization-66"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Mon Dec 06 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - Web interstitial implementation PR</p> <p><strong>Story ads</strong> - Decided: add story ads meta tags for analytics purposes - Investigated reported story ads bugs</p> <a href="https://github.com/ampproject/wg-monetization/issues/66" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Amp monetization</strong> - Web interstitial use storage review: for frequency capping - 3p iframe going to have a deterministic subdomain</p> <p><strong>Story ads</strong> - Discover more ways for publishers to monetize</p> <a href="https://github.com/ampproject/wg-monetization/issues/66" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-66.toggleClass(class='expanded'), scroll-monetization-66.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-101"> <aside class="-ai" id="scroll-performance-101"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Mon Dec 06 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/101" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <a href="https://github.com/ampproject/wg-performance/issues/101" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-101.toggleClass(class='expanded'), scroll-performance-101.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-65"> <aside class="-ai" id="scroll-monetization-65"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Mon Nov 08 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - amp-ad sticky ad query parameter fix and auto hiding fix for doubleclick - Reviewed proposals for Bento Google Ads</p> <p><strong>Story ads</strong> - Ads CTA missing investigation</p> <a href="https://github.com/ampproject/wg-monetization/issues/65" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Amp monetization</strong> - Web interstitial implementation - Ads transformer: experiment with amp-pixel server-side rendering removal</p> <p><strong>Story ads</strong> - Collect story metrics from traffic using Adsense/DoubleClick</p> <a href="https://github.com/ampproject/wg-monetization/issues/65" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-65.toggleClass(class='expanded'), scroll-monetization-65.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-100"> <aside class="-ai" id="scroll-performance-100"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Mon Nov 08 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/100" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <a href="https://github.com/ampproject/wg-performance/issues/100" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-100.toggleClass(class='expanded'), scroll-performance-100.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-94"> <aside class="-ai" id="scroll-components-94"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Fri Nov 05 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>move shared dependencies into <code>bento.js</code></li> <li>e2e testing of bento standalone components</li> <li>preparation for bento launch</li> <li>refactoring stories templating to use JSX (instead of <code>htmlFor()</code> and other templating strategies)</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-components/issues/94" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>release Bento (🎉)</li> <li>bentojs.dev + next.js app for documenting bento usage</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/94" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-94.toggleClass(class='expanded'), scroll-components-94.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="stories-87"> <aside class="-ai" id="scroll-stories-87"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FFDC00"></span> <div class="-al"> <h4 class="-ac">Stories</h4> <span class="-ah">Status Update Fri Nov 05 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="story-performance">Story performance</h3> <ul> <li>🚀 Remove default translation and use english as default <a href="https://github.com/ampproject/amphtml/issues/36632">#36632</a></li> <li>🚀 Rewrite styles only on desktop one-panel or bot rendering <a href="https://github.com/ampproject/amphtml/issues/36692">#36692</a></li> <li>🚀 Remove media query matcher <a href="https://github.com/ampproject/amphtml/issues/36747">#36747</a></li> </ul> <h3 id="amp-story-shopping">amp story shopping</h3> <ul> <li>Scaffold component <a href="https://github.com/ampproject/amphtml/issues/36429">#36429</a></li> <li>Build shopping CTA <a href="https://github.com/ampproject/amphtml/issues/36697">#36697</a></li> </ul> <h3 id="amp-story-page-advancement">amp story page advancement</h3> <ul> <li>♻️ handle clicks on drawer <a href="https://github.com/ampproject/amphtml/issues/36715">#36715</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/87" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="story">Story</h3> <ul> <li>storyContentLoaded event doesn't fire when loading story on page index != 0 <a href="https://github.com/ampproject/amphtml/issues/36571">#36571</a></li> </ul> <h3 id="others">Others</h3> <ul> <li>✨ Add volume attribute to amp-video for use in amp-story-page <a href="https://github.com/ampproject/amphtml/issues/36693">#36693</a></li> <li>🐛 Added back JS for vh <a href="https://github.com/ampproject/amphtml/issues/36719">#36719</a></li> </ul> <h2 id="what's-next">What's next</h2> <ul> <li>Continued work on the <a href="https://github.com/ampproject/amphtml/projects/129">story shopping initiative</a></li> <li>Investigation of technical approaches for embedding stories</li> <li>Investigation of compatibility of <code>amp-subscriptions</code> in <code>amp-story</code></li> <li>Investigation of performance and user experience improvements for initial page load</li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/87" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:stories-87.toggleClass(class='expanded'), scroll-stories-87.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="stories-88"> <aside class="-ai" id="scroll-stories-88"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FFDC00"></span> <div class="-al"> <h4 class="-ac">Stories</h4> <span class="-ah">Status Update Tue Nov 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="amp-story-shopping">Amp story shopping</h3> <ul> <li>Get and set JSON data <a href="https://github.com/ampproject/amphtml/issues/36699">#36699</a></li> <li>Add Object typedef for shopping data <a href="https://github.com/ampproject/amphtml/issues/36911">#36911</a></li> <li>♻️ Attachment as element child <a href="https://github.com/ampproject/amphtml/issues/36989">#36989</a></li> </ul> <h3 id="story-performance">Story performance</h3> <ul> <li>🚀 Use dvh if available, instead of vh <a href="https://github.com/ampproject/amphtml/issues/37003">#37003</a></li> </ul> <h3 id="story-responsiveness">Story responsiveness</h3> <ul> <li>🐛 Need to overflow visible with presets <a href="https://github.com/ampproject/amphtml/issues/36912">#36912</a></li> </ul> <h3 id="story-audio">Story audio</h3> <ul> <li>🖍 Move audio equalizer from video to story system layer <a href="https://github.com/ampproject/amphtml/issues/36264">#36264</a></li> </ul> <h3 id="documentation">Documentation</h3> <ul> <li>📖 Added amp-video documentation that cache is not compatible with crossorigin <a href="https://github.com/ampproject/amphtml/issues/36772">#36772</a></li> </ul> <h3 id="amp-story-360">amp story 360</h3> <ul> <li>♻️ Use JSX <a href="https://github.com/ampproject/amphtml/issues/36942">#36942</a></li> </ul> <h3 id="amp-story-panning-media">amp story panning media</h3> <ul> <li>🚮 Remove unnecessary private variable <a href="https://github.com/ampproject/amphtml/issues/36846">#36846</a></li> <li>♻️ implicit returns <a href="https://github.com/ampproject/amphtml/issues/36930">#36930</a></li> </ul> <p>Hint: hit control+c anytime to enter REPL.</p> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="amp-story-shopping">Amp story shopping</h3> <ul> <li>Get and set JSON data <a href="https://github.com/ampproject/amphtml/issues/36699">#36699</a></li> <li>Add Object typedef for shopping data <a href="https://github.com/ampproject/amphtml/issues/36911">#36911</a></li> <li>♻️ Attachment as element child <a href="https://github.com/ampproject/amphtml/issues/36989">#36989</a></li> </ul> <h3 id="story-performance">Story performance</h3> <ul> <li>🚀 Use dvh if available, instead of vh <a href="https://github.com/ampproject/amphtml/issues/37003">#37003</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/88" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="story-responsiveness">Story responsiveness</h3> <ul> <li>🐛 Need to overflow visible with presets <a href="https://github.com/ampproject/amphtml/issues/36912">#36912</a></li> </ul> <h3 id="story-audio">Story audio</h3> <ul> <li>🖍 Move audio equalizer from video to story system layer <a href="https://github.com/ampproject/amphtml/issues/36264">#36264</a></li> </ul> <h3 id="documentation">Documentation</h3> <ul> <li>📖 Added amp-video documentation that cache is not compatible with crossorigin <a href="https://github.com/ampproject/amphtml/issues/36772">#36772</a></li> </ul> <h3 id="amp-story-360">amp story 360</h3> <ul> <li>♻️ Use JSX <a href="https://github.com/ampproject/amphtml/issues/36942">#36942</a></li> </ul> <h3 id="amp-story-panning-media">amp story panning media</h3> <ul> <li>🚮 Remove unnecessary private variable <a href="https://github.com/ampproject/amphtml/issues/36846">#36846</a></li> <li>♻️ implicit returns <a href="https://github.com/ampproject/amphtml/issues/36930">#36930</a></li> </ul> <h3 id="amp-story-page-attachment">amp-story-page-attachment</h3> <ul> <li>♻️ revise cta text in docs <a href="https://github.com/ampproject/amphtml/issues/36426">#36426</a></li> </ul> <h3 id="story-documentation">Story documentation</h3> <ul> <li>📖 Update embedded components documentation <a href="https://github.com/ampproject/amphtml/issues/36904">#36904</a></li> </ul> <h3 id="story-embeds">Story embeds</h3> <ul> <li>🚀 Remove support for expanded components like amp-twitter <a href="https://github.com/ampproject/amphtml/issues/36851">#36851</a></li> </ul> <h3 id="rel=stylesheet">rel=stylesheet</h3> <ul> <li>✨Allow link which points to the amp-story-1.0.css in a transformed amp document <a href="https://github.com/ampproject/amphtml/issues/36844">#36844</a></li> </ul> <h3 id="others">Others</h3> <ul> <li>Web Stories preview in FireFox browser has virtual devices spilling off screen <a href="https://github.com/ampproject/amphtml/issues/36964">#36964</a></li> </ul> <h2 id="what's-next">What's next</h2> <ul> <li>✨ [Story interactive] Enable interactive disclaimer dialog</li> <li>🐛 [Story performance] Disabling animations on initial page when first loaded</li> <li>✨ [Story video] Check if cache response contains audio</li> <li>🚀 [Story performance] Removed duplicated share styles [WIP]</li> <li>🚀 [Story performance] Only change dvh if the transformer doesn't do that already. Bad loading experience in Story: Flash of white between video poster and video playback</li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/88" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:stories-88.toggleClass(class='expanded'), scroll-stories-88.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-93"> <aside class="-ai" id="scroll-components-93"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Sat Oct 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Manual verification of Bento standalone mode + updating snippets in README</li> <li>E2E testing of Bento standalone mode</li> <li><code>bento-timeago</code></li> <li><code>bento-youtube</code></li> <li><code>bento-fit-text</code></li> <li>Shipping Bento standalone as part of NPM</li> <li>Shipping <code>bento.js</code></li> <li>Remove <code>dist/</code> from z-index CSS checks </li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-components/issues/93" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Moving shared dependencies into <code>bento.js</code></li> <li>Rendering dynamic templates in Standalone mode without Mustache</li> <li>AMP implementation of <code>dailymotion</code> in Bento</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/93" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-93.toggleClass(class='expanded'), scroll-components-93.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="stories-85"> <aside class="-ai" id="scroll-stories-85"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FFDC00"></span> <div class="-al"> <h4 class="-ac">Stories</h4> <span class="-ah">Status Update Sat Oct 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="story-performance">Story performance</h3> <ul> <li>🚀 Move aspect-ratio logic to CSS for styling <a href="https://github.com/ampproject/amphtml/issues/36061">#36061</a></li> <li>🚀 Add css to show story from beginning <a href="https://github.com/ampproject/amphtml/issues/36333">#36333</a></li> </ul> <h3 id="amp-story-page-outlink">amp-story-page-outlink</h3> <ul> <li>🐛 Force page outlinks to use target='_top' in order to prevent navigation from breaking on Safari <a href="https://github.com/ampproject/amphtml/issues/36428">#36428</a></li> </ul> <h3 id="story-ads">story-ads</h3> <ul> <li>🐛 use target=_top <a href="https://github.com/ampproject/amphtml/issues/36419">#36419</a></li> </ul> <h3 id="amp-story-360">amp story 360</h3> <ul> <li>🚮 Remove unnecessary .then statement <a href="https://github.com/ampproject/amphtml/issues/36409">#36409</a></li> </ul> <h3 id="story-documentation">Story documentation</h3> <ul> <li>📖 Added that autoplay is required on videos <a href="https://github.com/ampproject/amphtml/issues/36398">#36398</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/85" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="story-devtools">Story devtools</h3> <ul> <li>🐛 Fixed validator not loading <a href="https://github.com/ampproject/amphtml/issues/36404">#36404</a></li> </ul> <h3 id="story-loading">Story loading</h3> <ul> <li>🐛 Send storyContentLoaded during prerendering <a href="https://github.com/ampproject/amphtml/issues/36307">#36307</a></li> </ul> <h3 id="amp-story-panning-media">Amp story panning media</h3> <ul> <li>🐛 Set width and height of amp img element <a href="https://github.com/ampproject/amphtml/issues/36340">#36340</a></li> </ul> <h3 id="desktop-one-page">desktop one page</h3> <ul> <li>2021-background preset not optimally aligning <a href="https://github.com/ampproject/amphtml/issues/35796">#35796</a></li> </ul> <h2 id="what's-next">What's next</h2> <ul> <li>Shopping experience development -LCP improvements</li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/85" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:stories-85.toggleClass(class='expanded'), scroll-stories-85.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-64"> <aside class="-ai" id="scroll-monetization-64"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Sat Oct 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - amp-lightbox amp-ad sticky css conflict fixed - amp-ad sticky attribute validator updated to allow top and bottom-right - amp-ad sticky ad query parameter fix and auto hiding fix for doubleclick</p> <p><strong>Story ads</strong> - Analytics timestamp missing issue is fixed - Exploration of ideas to loosen amp ads requirement - Fixed bug with yellow progress bar not filling correctly - Fixed bug around using top=_blank on swipe </p> <a href="https://github.com/ampproject/wg-monetization/issues/64" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Amp monetization</strong> - sticky ad experiment restart - Web interstitial ads frequency capping discussion</p> <p><strong>Story ads</strong> - Analytics redesign - Run auto-advance with new CTA to monitor impact - Finish doc for adding new inventory - New demo page for opt-in experiments</p> <a href="https://github.com/ampproject/wg-monetization/issues/64" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-64.toggleClass(class='expanded'), scroll-monetization-64.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-99"> <aside class="-ai" id="scroll-performance-99"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Sat Oct 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/99" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <a href="https://github.com/ampproject/wg-performance/issues/99" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-99.toggleClass(class='expanded'), scroll-performance-99.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="stories-84"> <aside class="-ai" id="scroll-stories-84"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FFDC00"></span> <div class="-al"> <h4 class="-ac">Stories</h4> <span class="-ah">Status Update Fri Oct 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="story-performance">Story performance</h3> <ul> <li>🖍 Set css units on desktop for supports-landscape and regular one-panel <a href="https://github.com/ampproject/amphtml/issues/36033">#36033</a></li> <li>🖍 Remove standalone classes <a href="https://github.com/ampproject/amphtml/issues/36127">#36127</a></li> </ul> <h3 id="story-video">Story video</h3> <ul> <li>Add codec information received from video cache <a href="https://github.com/ampproject/amphtml/issues/36228">#36228</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/84" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="amp-story-panning-media">amp-story-panning-media</h3> <ul> <li>🐛 Set width on amp-img el <a href="https://github.com/ampproject/amphtml/issues/36217">#36217</a></li> </ul> <h3 id="others">Others</h3> <ul> <li>🚮 Clean up dead amp-sidebar code within stories <a href="https://github.com/ampproject/amphtml/issues/36178">#36178</a></li> <li>🧪 Set animations experiment to 0 <a href="https://github.com/ampproject/amphtml/issues/36248">#36248</a></li> <li>amp-story-shopping design document.</li> </ul> <h2 id="what's-next">What's next</h2> <ul> <li>Developing amp-story-shopping design document</li> <li>Story video codec development</li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/84" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:stories-84.toggleClass(class='expanded'), scroll-stories-84.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-63"> <aside class="-ai" id="scroll-monetization-63"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Fri Oct 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - Sticky ads gutter launched - amp-sticky-ad to amp-ad upgrade experiment ran again: better-performing than before-fix, but still needs investigation - amp-auto-ads supports inserting top sticky ads - Resolving big backlog of new network integration PRs</p> <p><strong>Story ads</strong> - Analytics redesign discussion - Auto-advance launch analysis</p> <a href="https://github.com/ampproject/wg-monetization/issues/63" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Amp monetization</strong> - amp-sticky-ad to amp-ad upgrade experiment investigation - Fast fetch ad network timestamps</p> <p><strong>Story ads</strong> - Analytics redesign - Analytics timestamp investigation - Run auto-advance with new CTA to monitor impact</p> <a href="https://github.com/ampproject/wg-monetization/issues/63" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-63.toggleClass(class='expanded'), scroll-monetization-63.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-98"> <aside class="-ai" id="scroll-performance-98"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Fri Oct 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/98" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <a href="https://github.com/ampproject/wg-performance/issues/98" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-98.toggleClass(class='expanded'), scroll-performance-98.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-73"> <aside class="-ai" id="scroll-bento-73"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Fri Oct 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished-🍱">What was accomplished 🍱</h2> <ul> <li>bento cdn & npm builds + bento css</li> <li>documentation</li> <li>e2e testing</li> <li>knowledge transfer</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/73" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next-⏩">What's next ⏩</h2> <ul> <li>amp-jwplayer</li> <li>amp-analytics</li> <li>more components</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/73" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-73.toggleClass(class='expanded'), scroll-bento-73.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="stories-83"> <amp-position-observer intersection-ratios=".95" target="q3-2021" on="enter:anim-q3-2021.start" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <aside class="-ar" id="q3-2021"> <h3>Q3 2021</h3> </aside> <aside class="-ai" id="scroll-stories-83"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FFDC00"></span> <div class="-al"> <h4 class="-ac">Stories</h4> <span class="-ah">Status Update Thu Sep 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="attachment-forms">Attachment Forms</h3> <ul> <li>🖍 Shorten the width of the publisher domain label <a href="https://github.com/ampproject/amphtml/issues/36114">#36114</a></li> <li>✨ Create status indicators that display the page attachment form's submission status <a href="https://github.com/ampproject/amphtml/pull/36039">#36039</a></li> </ul> <h3 id="amp-story-player">Amp story player</h3> <ul> <li>✨ Launch panel player <a href="https://github.com/ampproject/amphtml/issues/35423">#35423</a></li> </ul> <h3 id="panning-media">Panning media</h3> <ul> <li>Validation <a href="https://github.com/ampproject/amphtml/issues/31506">#31506</a></li> <li>Handle base zoom of aspect ratio wider than image <a href="https://github.com/ampproject/amphtml/issues/31515">#31515</a></li> </ul> <h3 id="story-interactives">Story interactives</h3> <ul> <li>📖 Added docs for info dialog <a href="https://github.com/ampproject/amphtml/issues/36079">#36079</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/83" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="story-performance">Story performance</h3> <ul> <li>🖍 Added CSS rules for units, and exaple stories <a href="https://github.com/ampproject/amphtml/issues/36007">#36007</a></li> </ul> <h3 id="video">Video</h3> <ul> <li>fallback on origin sources if request to video cache fails <a href="https://github.com/ampproject/amphtml/issues/36071">#36071</a></li> </ul> <h3 id="others">Others</h3> <ul> <li>Amp-story translations <a href="https://github.com/ampproject/amphtml/issues/35333">#35333</a></li> <li>🖍 Restrict page attachment sticky header to non-iOS, non-Safari surfaces <a href="https://github.com/ampproject/amphtml/issues/36133">#36133</a></li> </ul> <h2 id="what's-next">What's next</h2> <ul> <li>Amp story shopping technical design</li> <li>LCP improvements</li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/83" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:stories-83.toggleClass(class='expanded'), scroll-stories-83.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-62"> <aside class="-ai" id="scroll-monetization-62"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Thu Sep 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - Sticky ads gutter code complete (120px wide, on viewport >1024px wide) - amp-sticky-ad to amp-ad upgrade experiment fix - <code>attribution-reporting</code> work code complete in viewer</p> <p><strong>Story ads</strong> - Pipeline fixes - Analytics improvements docs</p> <a href="https://github.com/ampproject/wg-monetization/issues/62" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Amp monetization</strong> - Web interstitial new design to be on the design review</p> <p><strong>Story ads</strong> - Launch new placement algorithm - Creative type based analytics</p> <a href="https://github.com/ampproject/wg-monetization/issues/62" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-62.toggleClass(class='expanded'), scroll-monetization-62.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-96"> <aside class="-ai" id="scroll-performance-96"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Thu Sep 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/96" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <a href="https://github.com/ampproject/wg-performance/issues/96" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-96.toggleClass(class='expanded'), scroll-performance-96.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-72"> <aside class="-ai" id="scroll-bento-72"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Thu Sep 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished-🍱">What was accomplished 🍱</h2> <ul> <li><code>amp-reddit</code>: testing</li> <li><code>amp-iframe</code>: implement <a href="https://amp.dev/documentation/components/amp-iframe/#iframe-viewability">viewability feature</a></li> <li><code>amp-mathml</code>: converted to Bento</li> <li><code>amp-lightbox-gallery</code>: bug fixes</li> <li><code>worker-dom</code>: improving performance</li> <li>more documentation!</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/72" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next-⏩">What's next ⏩</h2> <ul> <li><code>amp-dailymotion</code>: converting to bento</li> <li><code>amp-analytics</code>: converting to bento</li> <li><code>amp-jwplayer</code>: converting to bento</li> <li>publishing bento packages to npm</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/72" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-72.toggleClass(class='expanded'), scroll-bento-72.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="stories-81"> <aside class="-ai" id="scroll-stories-81"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FFDC00"></span> <div class="-al"> <h4 class="-ac">Stories</h4> <span class="-ah">Status Update Wed Sep 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="story-performance">Story performance</h3> <ul> <li>🚀 Set "load first page only" experiment to 50% <a href="https://github.com/ampproject/amphtml/issues/35770">#35770</a></li> <li>🚀 Set up story prestyle <a href="https://github.com/ampproject/amphtml/issues/35829">#35829</a></li> <li>♻️ Simplify templates CSS by using attr instead of class <a href="https://github.com/ampproject/amphtml/issues/35861">#35861</a></li> <li>🚀 Set load first page only experiment to 1 <a href="https://github.com/ampproject/amphtml/issues/35970">#35970</a></li> </ul> <h3 id="story-animations">Story animations</h3> <ul> <li>🐛 Fix prerender resume animation <a href="https://github.com/ampproject/amphtml/issues/35987">#35987</a></li> </ul> <h3 id="story-videos">Story videos</h3> <ul> <li>📖 Add video documentation for Google cache <a href="https://github.com/ampproject/amphtml/issues/35609">#35609</a></li> </ul> <h3 id="story-images">Story images</h3> <ul> <li>On iOS 15 stories, long pressing on images expands the image <a href="https://github.com/ampproject/amphtml/issues/35381">#35381</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/81" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="amp-story-page-attachment">Amp story page attachment</h3> <ul> <li>🐛 Propagate title attribute to draggable drawer header <a href="https://github.com/ampproject/amphtml/issues/35863">#35863</a></li> </ul> <h3 id="animation-presets">Animation presets</h3> <ul> <li>Desktop panels mode, start animations after page transition <a href="https://github.com/ampproject/amphtml/issues/29753">#29753</a></li> </ul> <h3 id="others">Others</h3> <ul> <li>amp-story-page-outlink default value for cta-accent-color attribute <a href="https://github.com/ampproject/amphtml/issues/34983">#34983</a></li> <li>Pause button on story player not functional <a href="https://github.com/ampproject/amphtml/issues/35640">#35640</a></li> <li>🐛 Reset page attachment scroll position upon attachment close <a href="https://github.com/ampproject/amphtml/issues/35778">#35778</a></li> <li>Remove desktop 3 panel UI and associated code. <a href="https://github.com/ampproject/amphtml/issues/35623">#35623</a></li> <li>Resolve ScreenOrientation lock Illegal invocation error on Chrome <a href="https://github.com/ampproject/amphtml/issues/35659">#35659</a></li> <li>🐛 Toggle desktop attribute on tooltip overlay <a href="https://github.com/ampproject/amphtml/issues/35772">#35772</a></li> </ul> <h2 id="what's-next">What's next</h2> <ul> <li>Shopping integration in stories</li> <li>Translated strings update</li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/81" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:stories-81.toggleClass(class='expanded'), scroll-stories-81.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-61"> <aside class="-ai" id="scroll-monetization-61"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Wed Sep 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - <code>attribution-reporting</code> e2e testing</p> <p><strong>Story ads</strong> - Ecosystem analytics improvements - New CTA experiment starting - auto-advance launch rollout</p> <a href="https://github.com/ampproject/wg-monetization/issues/61" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Amp monetization</strong> - <code>attribution-reporting</code> support across different viewers - web interstitial ads</p> <p><strong>Story ads</strong> - Monitor new CTA performance - Scoping auto-generated DV3 ads</p> <a href="https://github.com/ampproject/wg-monetization/issues/61" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-61.toggleClass(class='expanded'), scroll-monetization-61.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-95"> <aside class="-ai" id="scroll-performance-95"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Wed Sep 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>did investigatory work for non amp team [internal]</li> </ul> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/95" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <ul> <li>get baseline performance numbers for amp-story</li> <li>possibly incorporate changes needed to accomodate stories requirement for SemiTransformedDocument</li> </ul> <a href="https://github.com/ampproject/wg-performance/issues/95" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-95.toggleClass(class='expanded'), scroll-performance-95.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-70"> <aside class="-ai" id="scroll-bento-70"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Wed Sep 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished-🍱">What was accomplished 🍱</h2> <h3 id="components">Components</h3> <ul> <li><code>BentoDailymotion</code> code complete</li> <li><code>useIntersectionObserver</code> custom hook merged and in use by <code>amp-timeago</code>, <code>amp-iframe</code></li> <li><code>BentoCarousel</code> bug fixes in RTL support</li> <li>Added support for toggling placeholder and fallback and consumed in AMP mode ampproject/amphtml#35821</li> <li>Renamed Bento Preact components to be <code>Bento</code> prefixed</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/70" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="tooling">Tooling</h3> <ul> <li>Ongoing Storybook migration from knobs (deprecated) to controls</li> <li>Storybook doc updates to <code>testing.md</code> and styling recommendations</li> <li>Fix for <code>eslint-plugin-react</code> where it would consider lowercase names (<code><div></code>) as used variables https://github.com/yannickcr/eslint-plugin-react/pull/3070</li> <li><code>README.md</code> files created for npm publishing for existing Bento components</li> </ul> <h2 id="what's-next-⏩">What's next ⏩</h2> <ul> <li>Build extension twice for Bento vs. AMP Web Components (bento-<em>.js and amp-</em>.js)</li> <li>Last mile bits for documentation following last sprint</li> <li><code>amp-mathml</code>/<code>bento-mathml</code>/<code>BentoMathml</code> continued progress</li> <li><code>amp-dailymotion</code>/<code>bento-dailymotion</code> continued progress</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/70" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-70.toggleClass(class='expanded'), scroll-bento-70.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="stories-80"> <aside class="-ai" id="scroll-stories-80"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FFDC00"></span> <div class="-al"> <h4 class="-ac">Stories</h4> <span class="-ah">Status Update Tue Aug 03 2021</span> </div> <div class="-ad"> <div class="-av"> <h3 id="amp-story">Amp story</h3> <ul> <li>Resolve ScreenOrientation lock Illegal invocation error on Chrome <a href="https://github.com/ampproject/amphtml/issues/35659">#35659</a></li> <li>🐛 Toggle desktop attribute on tooltip overlay <a href="https://github.com/ampproject/amphtml/issues/35772">#35772</a></li> </ul> <h3 id="story-performance">Story performance</h3> <ul> <li>🚀 Set "load first page only" experiment to 50% <a href="https://github.com/ampproject/amphtml/issues/35770">#35770</a></li> </ul> <h3 id="animation-presets">Animation presets</h3> <ul> <li>Desktop panels mode, start animations after page transition <a href="https://github.com/ampproject/amphtml/issues/29753">#29753</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/80" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="others">Others</h3> <ul> <li>Pause button on story player not functional <a href="https://github.com/ampproject/amphtml/issues/35640">#35640</a></li> <li>🐛 Reset page attachment scroll position upon attachment close <a href="https://github.com/ampproject/amphtml/issues/35778">#35778</a></li> <li>[Page Attachment Forms] Remove the soft keyboard from view when the page attachment is closed <a href="https://github.com/ampproject/amphtml/pull/35798">#35798</a> (PR pending)</li> </ul> <h2 id="what's-next">What's next</h2> <ul> <li>Remove desktop 3 panel code <a href="https://github.com/ampproject/amphtml/issues/35623">#35623</a></li> <li>[Panning media] support portrait images and officially launch <a href="https://github.com/ampproject/amphtml/issues/31515">#31515</a></li> <li>[Story video] Optimize media play/pause operations on page navigation <a href="https://github.com/ampproject/amphtml/issues/29508">#29508</a></li> <li>[Story performance] Set up story prestyle <a href="https://github.com/ampproject/amphtml/pull/35829">#35829</a></li> <li>Allow amp-form in Story Page Attachments <a href="https://github.com/ampproject/amphtml/issues/35569">#35569</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/80" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:stories-80.toggleClass(class='expanded'), scroll-stories-80.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-94"> <aside class="-ai" id="scroll-performance-94"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Tue Aug 03 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/94" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <a href="https://github.com/ampproject/wg-performance/issues/94" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-94.toggleClass(class='expanded'), scroll-performance-94.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-69"> <aside class="-ai" id="scroll-bento-69"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Tue Aug 03 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished-🍱">What was accomplished 🍱</h2> <ul> <li><a href="https://github.com/ampproject/amphtml/issues/35812"><code>amp-date-display</code>: Support <code>timeZoneName</code> and <code>timeZoneNameShort</code></a></li> <li><a href="https://github.com/ampproject/amphtml/pull/35774"><code>amp-iframe</code>: wrap iframe in shadow-dom and ContainWrapper</a></li> <li><a href="https://github.com/ampproject/amphtml/issues/35741">fixed broken npm bento packages</a></li> <li><a href="https://github.com/ampproject/amphtml/issues/35485">fixed sporadic render issues on SSR'd AMP pages</a></li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/69" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next-⏩">What's next ⏩</h2> <ul> <li>Documentation Sprint</li> <li><a href="https://github.com/ampproject/amphtml/pull/35835"><code>useIntersectionObserver</code>: custom hook</a></li> <li><a href="https://github.com/ampproject/amphtml/issues/35789"><code>amp-tiktok</code>: fixing CLS issue</a></li> <li><code>bento-dailymotion</code>: wip</li> <li><code>bento-reddit</code>: wip</li> <li><a href="https://github.com/issues/assigned">fix Placeholder / Fallback toggling across Bento components</a></li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/69" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-69.toggleClass(class='expanded'), scroll-bento-69.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="stories-77"> <aside class="-ai" id="scroll-stories-77"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FFDC00"></span> <div class="-al"> <h4 class="-ac">Stories</h4> <span class="-ah">Status Update Mon Aug 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="story-performance">Story performance</h3> <ul> <li>🚀 Make inactive pages not trigger LCP <a href="https://github.com/ampproject/amphtml/issues/35323">#35323</a></li> <li>🚀 Disable animations in first page under experiment <a href="https://github.com/ampproject/amphtml/issues/35356">#35356</a></li> <li>📖 Not turn off experiment on example story on visibility if hashString is not present <a href="https://github.com/ampproject/amphtml/issues/35417">#35417</a></li> </ul> <h3 id="story-interactive">Story interactive</h3> <ul> <li>Add support for emojis on the slider <a href="https://github.com/ampproject/amphtml/issues/35113">#35113</a></li> <li>🖍 Color Logic for A/B/C/D Bubbles for Image Quizzes <a href="https://github.com/ampproject/amphtml/issues/35174">#35174</a></li> <li>🐛 Post-Selection Fill Bug Fix for Image Quizzes and Polls <a href="https://github.com/ampproject/amphtml/issues/35274">#35274</a></li> <li>🐛 Fix Post-Selection Animation Inaccuracies for Image Quizzes <a href="https://github.com/ampproject/amphtml/issues/35292">#35292</a></li> <li>✨ Activate interactive disclaimer and add documentation <a href="https://github.com/ampproject/amphtml/issues/35293">#35293</a></li> <li>🖍 Text Shadow for Percentage Text for Image Quizzes and Polls <a href="https://github.com/ampproject/amphtml/issues/35324">#35324</a></li> <li>Disable overlay on slider when dragging on mobile <a href="https://github.com/ampproject/amphtml/issues/35358">#35358</a></li> <li>✅ Add Image Quizzes and Polls with Invalid Endpoints to Examples <a href="https://github.com/ampproject/amphtml/issues/35359">#35359</a></li> <li>✨ Scaffolding for New Results Component <a href="https://github.com/ampproject/amphtml/issues/35400">#35400</a></li> <li>🖍 Styling for Image Quizzes and Polls with Missing Images <a href="https://github.com/ampproject/amphtml/issues/35420">#35420</a></li> <li>🖍 Adapt slider styles to work on Firefox <a href="https://github.com/ampproject/amphtml/issues/35432">#35432</a></li> <li>RTL support <a href="https://github.com/ampproject/amphtml/issues/35340">#35340</a></li> </ul> <h3 id="amp-story-player">Amp story player</h3> <ul> <li>Experiment setup <a href="https://github.com/ampproject/amphtml/issues/34953">#34953</a></li> <li>✨ Hide buttons if full-bleed story. <a href="https://github.com/ampproject/amphtml/issues/35397">#35397</a></li> <li>amp-story-desktop-one-panel player swipe-ability desktop UX <a href="https://github.com/ampproject/amphtml/issues/35268">#35268</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/77" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="video">Video</h3> <ul> <li>Track video-cache experiment through CSI. <a href="https://github.com/ampproject/amphtml/issues/35242">#35242</a></li> <li>Unify CacheState tracking for both legacy and remote video caching systems. <a href="https://github.com/ampproject/amphtml/issues/35252">#35252</a></li> <li>Prerender and preload remote video cache. <a href="https://github.com/ampproject/amphtml/issues/35272">#35272</a></li> <li>Only serve evergreen non cached video sources to crawlers. <a href="https://github.com/ampproject/amphtml/issues/35357">#35357</a> </li> <li>Experiment to limit max video bitrate on first page of a story. <a href="https://github.com/ampproject/amphtml/issues/35389">#35389</a></li> </ul> <h3 id="others">Others</h3> <ul> <li>Cannot use SVGs with <feBlend> in stories <a href="https://github.com/ampproject/amphtml/issues/35430">#35430</a></li> <li>Improve screen orientation locking for stories <a href="https://github.com/ampproject/amphtml/issues/35478">#35478</a></li> <li>amp-story-desktop-one-panelbackground-blur Include videos in selector <a href="https://github.com/ampproject/amphtml/issues/35131">#35131</a> </li> </ul> <h2 id="what's-next">What's next</h2> <ul> <li>Documentation / validation and launch of new interactive components (image quiz & polls / slider)</li> <li>Desktop one panel launch</li> <li>Video improvements</li> <li>iOS15 bug fixes</li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/77" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:stories-77.toggleClass(class='expanded'), scroll-stories-77.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-59"> <aside class="-ai" id="scroll-monetization-59"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Mon Aug 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - Web interstitial ads design review - f.js deprecation notice started to be sent out</p> <h2 id="story-ads"><strong>Story ads</strong></h2> <a href="https://github.com/ampproject/wg-monetization/issues/59" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Amp monetization</strong> - Server-sider controlled experiment of rendering amp-sticky-ad with amp-ad ramping up this week - Further work on web interstitial ads UI - Left/right sticky ads experimental support w/ a conservative size limit</p> <h2 id="story-ads"><strong>Story ads</strong></h2> <a href="https://github.com/ampproject/wg-monetization/issues/59" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-59.toggleClass(class='expanded'), scroll-monetization-59.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-89"> <aside class="-ai" id="scroll-performance-89"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Mon Aug 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/89" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <a href="https://github.com/ampproject/wg-performance/issues/89" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-89.toggleClass(class='expanded'), scroll-performance-89.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-67"> <aside class="-ai" id="scroll-bento-67"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Mon Aug 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="general-updates-🆕">General updates 🆕</h2> <ul> <li>Welcome to the team @kvchari 🎉 🎉 🎉 </li> </ul> <h2 id="what-was-accomplished-🍱">What was accomplished 🍱</h2> <ul> <li><code>amp-audio</code> implementation has begun</li> <li><code>amp-brightcove</code> port complete</li> <li><code>amp-copy</code> implementation has begun</li> <li><code>amp-dailymotion</code> port in progress (Preact layer done)</li> <li><code>amp-iframe</code> investigation against native iframe - <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-iframe/amp-iframe-vs-native-iframe.md">findings</a></li> <li><code>amp-lightbox-gallery</code> port complete, barring gestures feature</li> <li><code>amp-sidebar</code> port complete, also barring gestures feature</li> <li><code>amp-render</code> launch follow-up bug fixes</li> <li><code>amp-twitter</code> placeholder bug fix </li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/67" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next-⏩">What's next ⏩</h2> <ul> <li><code>amp-analytics</code> early investigations and design</li> <li><code>amp-audio</code> continued progress</li> <li><code>amp-copy</code> discussion at design review</li> <li><code>amp-dailymotion</code> port in progress (AMP layer)</li> <li><code>amp-iframe</code> continued progress</li> <li>Investigate existing gestures library and solutions going forward in Bento</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/67" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-67.toggleClass(class='expanded'), scroll-bento-67.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-92"> <aside class="-ai" id="scroll-components-92"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Sun Aug 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Fixed two <code>amp-render</code> issues re: single template root element.</li> <li>Autoplay workaround for <code>amp-dailymotion</code> (Classic)</li> <li><code>amp-consent</code>:</li> <li>Remove two old experiment flags.</li> <li>Allow <code>SOURCE_URL</code> substitution.</li> <li>Support <code>CONSENT_INFO</code> and <code>CONSENT_PAGE_VIEW_ID_64</code></li> <li>Investigate <code>promptUI</code> flashing issue, design for a new API to prevent it.</li> <li>Clearing up undefined behavior for <code>amp-story-consent</code></li> <li>Remove redundant <code>amp-story</code> check for <code>amp-audio</code> actions</li> <li>Fix CSS selector leaking into rendered amp.dev examples</li> <li>Forbidden terms maintenance</li> <li>Progress on Bento ports and compatibility:</li> <li><code>amp-iframe</code> resizing</li> <li><code>amp-analytics</code> design</li> <li>Port of <code>amp-dailymotion</code></li> <li>Port of <code>amp-reddit</code></li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-components/issues/92" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><em>Kidist leaves us this week. Make sure to say goodbye!</em></p> <ul> <li>Finishing features for <code>amp-iframe</code> (intersection entries)</li> <li>Fix for an <code>amp-next-page</code> issue</li> <li>Progress on Bento ports and compatibility:</li> <li><code>amp-iframe</code> resizing</li> <li><code>amp-analytics</code> design</li> <li>Port of <code>amp-dailymotion</code></li> <li>Port of <code>amp-reddit</code></li> <li>Building separate <code>bento-*</code> binaries</li> <li><code>amp-consent</code>: Support relabeling of post-prompt button according to server response.</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/92" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-92.toggleClass(class='expanded'), scroll-components-92.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="stories-78"> <aside class="-ai" id="scroll-stories-78"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FFDC00"></span> <div class="-al"> <h4 class="-ac">Stories</h4> <span class="-ah">Status Update Sun Aug 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="story-performance">Story performance</h3> <ul> <li>Disable animations on first page to 50% <a href="https://github.com/ampproject/amphtml/issues/35476">#35476</a></li> <li>Added load outside viewport to experiments <a href="https://github.com/ampproject/amphtml/issues/35548">#35548</a></li> <li>Set "load inactive pages outside viewport" experiment to 0.5 <a href="https://github.com/ampproject/amphtml/issues/35653">#35653</a></li> </ul> <h3 id="amp-story">Amp story</h3> <ul> <li>Activate desktop one panel experiment to 1. <a href="https://github.com/ampproject/amphtml/issues/35453">#35453</a></li> <li>Null check on screen.orientation <a href="https://github.com/ampproject/amphtml/issues/35639">#35639</a></li> </ul> <h3 id="story-sidebar">Story sidebar</h3> <ul> <li>Removed sidebar from docs <a href="https://github.com/ampproject/amphtml/issues/35616">#35616</a></li> </ul> <h3 id="page-attachments">Page attachments</h3> <ul> <li>CSS code cleanup <a href="https://github.com/ampproject/amphtml/issues/34316">#34316</a></li> <li>Write amp.dev docs <a href="https://github.com/ampproject/amphtml/issues/34790">#34790</a></li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/78" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="amp-story-docs">AMP Story Docs</h3> <ul> <li>Animation information hard to find <a href="https://github.com/ampproject/amphtml/issues/35398">#35398</a></li> </ul> <h3 id="story-player">Story Player</h3> <ul> <li>Swipe animation appears to be broken on some integrations <a href="https://github.com/ampproject/amphtml/issues/31193">#31193</a></li> </ul> <h3 id="others">Others</h3> <ul> <li>Amp Story Desktop One Panel I2I <a href="https://github.com/ampproject/amphtml/issues/34479">#34479</a></li> <li>Amp Story Desktop One Panel I2S <a href="https://github.com/ampproject/amphtml/issues/35267">#35267</a></li> <li>amp-story-desktop-one-panel background-blur Do not support images with transparency. <a href="https://github.com/ampproject/amphtml/issues/35441">#35441</a></li> </ul> <h2 id="what's-next">What's next</h2> <ul> <li>Launch performance experiments</li> <li>Launch new interactive components</li> <li>Launch forms in page attachments</li> </ul> <a href="https://github.com/ampproject/wg-stories/issues/78" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:stories-78.toggleClass(class='expanded'), scroll-stories-78.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-60"> <aside class="-ai" id="scroll-monetization-60"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Sun Aug 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - Investigating an issue reported with respect to ads on Safari 11 - User agent client hint parameters proposed and implemented - Permitting ad attribution reporting - Correct Doubleclick extension ad request parameters for amp-ad sticky ads - Clean up amp-ad vendor list on amp.dev (Adding missing ones) - Preventing high-frequency repeated ad resizing requests </p> <h2 id="story-ads"><strong>Story ads</strong></h2> <a href="https://github.com/ampproject/wg-monetization/issues/60" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Amp monetization</strong> - Follow-up work on web interstitial ads - Restarting amp-sticky-ad to amp-ad experiments </p> <h2 id="story-ads"><strong>Story ads</strong></h2> <a href="https://github.com/ampproject/wg-monetization/issues/60" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-60.toggleClass(class='expanded'), scroll-monetization-60.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-93"> <aside class="-ai" id="scroll-performance-93"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Sun Aug 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/93" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <a href="https://github.com/ampproject/wg-performance/issues/93" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-93.toggleClass(class='expanded'), scroll-performance-93.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-68"> <aside class="-ai" id="scroll-bento-68"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Sun Aug 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished-🍱">What was accomplished 🍱</h2> <ul> <li>Auto-envelope is ready</li> <li><code>amp-analytics:0.1</code> feature scoping and design discussions</li> <li><code>amp-facebook-*</code> components now valid AMP</li> <li><code>amp-iframe</code> runtime-less dynamic resizing via <code>IntersectionObserver</code> in progress https://github.com/ampproject/amphtml/pull/35566</li> <li><code>amp-ima-video</code> in progress</li> <li>Preparing example documentation for React/Preact and Bento modes</li> <li><code>ProxyIframeEmbed</code> extrapolation from AMP-specific runtime dependencies (build constants, <code>getMode</code>, etc.)</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/68" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next-⏩">What's next ⏩</h2> <ul> <li><code>amp-analytics</code> Services inventory and investigation</li> <li><code>amp-dailymotion</code> WIP</li> <li><code>amp-iframe</code> WIP</li> <li><code>amp-ima-video</code> WIP</li> <li><code>amp-reddit</code> WIP</li> <li>React/Preact compatibility improvements</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/68" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-68.toggleClass(class='expanded'), scroll-bento-68.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-89"> <aside class="-ai" id="scroll-components-89"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Wed Jul 07 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li><code>amp-render</code> is code-complete. 🎉</li> <li><code>amp-tiktok</code> is code-complete. 🎉</li> <li>Finishing up session support on <code>amp-analytics</code>.</li> <li>Finishing up multiple element selection for video events on <code>amp-analytics</code>.</li> <li>Bugfixes on <code>amp-next-page</code> and <code>amp-analytics</code></li> <li>Support <code>new Set(iterable)</code> on IE</li> <li>Fixed <code>html-template</code> lint rule for invalid multiline self-closing tags, and auto-fix related SVG tags.</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-components/issues/89" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Port <code>amp-iframe</code> to Bento.</li> <li><code>amp-carousel</code> issue on iOS 15.</li> <li><code>amp-dailymotion</code> to Bento.</li> <li>Land Auto-Envelope to run components without <code>v0.js</code></li> <li>Generically propagating browser events as analytics events</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/89" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-89.toggleClass(class='expanded'), scroll-components-89.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-87"> <aside class="-ai" id="scroll-performance-87"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Wed Jul 07 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/87" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <a href="https://github.com/ampproject/wg-performance/issues/87" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-87.toggleClass(class='expanded'), scroll-performance-87.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-65"> <aside class="-ai" id="scroll-bento-65"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Wed Jul 07 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>auto envelope changes to use restrictive methods</li> <li>IE polyfill for new Set</li> <li><code>amp-lightbox-gallery</code> basic, grouping, captioning, and uniqueness features</li> <li><code>forceChangeHeight</code> -> <code>attemptChangeHeight</code> in Bento components for the AMP layer</li> <li>started on <code>amp-iframe</code></li> <li><code>amp-render</code> final launch bits, including <code>resizeToContents</code>, validations, and blog</li> <li><code>amp-tiktok</code> is merged</li> <li>getting Bento compiler thread safe</li> <li>Remove <code>amp-viz-vega</code></li> <li>Consolidating <code>amp-facebook</code> discussed at design review + implementation</li> <li><code>overflow</code> support in <code>PreactBaseElement</code></li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/65" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>taking over GA4</li> <li>land auto-envelope, going to split work to restrictive access of this methods</li> <li>amp-lightbox-gallery video support, analytics events, and validations</li> <li>AMP 0.1 component changes over the next few weeks to extract from their <code>buildCallback</code>s - separating pieces that modify DOM, including <code>amp-fit-text</code></li> <li><code>amp-dailymotion</code> implementation</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/65" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-65.toggleClass(class='expanded'), scroll-bento-65.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-90"> <aside class="-ai" id="scroll-components-90"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Thu Jul 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Progress on propagating browser events to Analytics.</li> <li>Bento amp-iframe ongoing (base PR, placeholder behavior)</li> <li>Fixed skipped tests in <code>amp-titkok</code></li> <li>Verified iOS scroll snap bug on <code>amp-carousel</code></li> <li>Fixed Storybook issue with <code>~</code> in output filenames</li> <li>Fixed broken <code>z-index</code> formatting, and generating it</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <p>Some WebKit changes are upstreamed only on browser betas, and some of the introduced bugs appear on iOS only. It's important to run manual testing passes on iOS betas before release.</p> <a href="https://github.com/ampproject/wg-components/issues/90" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p>(@dmanek OOO this week) (@alanorozco is Build Cop)</p> <ul> <li>Bento <code>amp-iframe</code>: resizing at runtime and consent data</li> <li>Bento <code>amp-dailymotion</code></li> <li>Land propagating browser events</li> <li>GA4</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/90" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-90.toggleClass(class='expanded'), scroll-components-90.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-58"> <aside class="-ai" id="scroll-monetization-58"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Thu Jul 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - Web interstitial ads planning. Working with Google AdSense & GAM team to clarify the technical boundary between AMP and vendors, finalize the interface. - Web interstitial ads prototype works. Design review next week. - Fix the old style sticky ad deprecation notice</p> <p><strong>Story ads</strong> - Discussion around story ads strategy for emerging markets - Started shared experiment with viewer for auto-advancing ads & pages - Fixed bug to send correct size for desktop support - Fixed flaky experiment tests</p> <a href="https://github.com/ampproject/wg-monetization/issues/58" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Amp monetization</strong> - Web interstitial ads - Experiment rendering amp-sticky-ad with amp-ad</p> <p><strong>Story ads</strong> - Launch auto-advancing ads</p> <a href="https://github.com/ampproject/wg-monetization/issues/58" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-58.toggleClass(class='expanded'), scroll-monetization-58.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-88"> <aside class="-ai" id="scroll-performance-88"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Thu Jul 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/88" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <a href="https://github.com/ampproject/wg-performance/issues/88" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-88.toggleClass(class='expanded'), scroll-performance-88.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-85"> <amp-position-observer intersection-ratios=".95" target="q2-2021" on="enter:anim-q2-2021.start" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <aside class="-ar" id="q2-2021"> <h3>Q2 2021</h3> </aside> <aside class="-ai" id="scroll-components-85"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Mon Jun 07 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Session Analytics PRs out for SessionId, CreationTimestamp, and SessionCount (https://github.com/ampproject/amphtml/issues/33990)</li> <li>AMP form rollback, adding missing support for validation on change (https://github.com/ampproject/amphtml/pull/34849)</li> <li><code>amp-render</code> binding API change</li> <li><code>amp-render</code> validation changes</li> <li>launched <code>amp-tiktok</code></li> <li><code>amp-dailymotion</code> bento version PRs</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-components/issues/85" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Session Analytics: <code>LastEventTimestamp</code> and <code>Engaged</code></li> <li>New AMP component for quicklinks, design</li> <li><code>amp-iframe</code> bug</li> <li><code>amp-render</code> finish misc PRs</li> <li> <h2 id="amp-dailymotion-continue-work"><code>amp-dailymotion</code> continue work</h2> </li> </ul> <a href="https://github.com/ampproject/wg-components/issues/85" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-85.toggleClass(class='expanded'), scroll-components-85.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-56"> <aside class="-ai" id="scroll-monetization-56"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Mon Jun 07 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - Top sticky ad implementation merged - Top sticky ad profiling - Web interstitial ads prototype started - INI InOb turned off on inabox to alleviate performance issues - Fixed <code><gwd-animation></code> bug in no-sigining - Support for new conversion tracking API in amp-ad-exit</p> <p><strong>Story ads</strong> - New yellow progress bar variant implementation</p> <a href="https://github.com/ampproject/wg-monetization/issues/56" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Amp monetization</strong></p> <p><strong>Story ads</strong> - Start yellow progress experiment - New CTA design - Viewer experiment coordination design and review</p> <a href="https://github.com/ampproject/wg-monetization/issues/56" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-56.toggleClass(class='expanded'), scroll-monetization-56.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-64"> <aside class="-ai" id="scroll-bento-64"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Mon Jun 07 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p>General - Improving performance of <code>...rest</code> object spread operator: - Share <code>objectWithoutProperties</code> helper across modules (size reduction, ampproject/amphtml#34601) - Hoist omitted keys (runtime performance, babel/babel#13384) - <a href="https://docs.google.com/document/d/1sgwzmWQV-XmBtCV_vkXmngoKFe2DZMaQNr_dhbf2EPY/edit#heading=h.45r1v07xhtc9">Bento onboarding doc</a> is a central location for Bento-related resources - npm automated publishing is live now</p> <p>Components - <code>amp-dailymotion</code> implementation has begun - <code>Facebook</code> and <code>amp-facebook</code> now code complete - <code>amp-render</code> last mile bits: - <code>binding</code> support - documentation - remaining TODOs and bug fixes - Unit tests for <code>LightboxGallery</code>, <code>Facebook</code>, <code>amp-fit-text</code> - <code>Toolbar</code> addition to <code>Sidebar</code> merged</p> <a href="https://github.com/ampproject/wg-bento/issues/64" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p>General - Auto envelope (so Bento components will be usable without v0 on the page!) - 3p Iframe Bento Contribution Guide - <code>src/core</code> migration continues, we may be able to start type checking Bento components this sprint</p> <p>Components - continued work on <code>amp-dailymotion</code> - <code>VideoProxyIframe</code> for <code>amp-ima-video</code> implementation - <code>amp-facebook-page</code> and <code>amp-facebook-like</code> - <code>LightboxGallery</code> UI features</p> <a href="https://github.com/ampproject/wg-bento/issues/64" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-64.toggleClass(class='expanded'), scroll-bento-64.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-88"> <aside class="-ai" id="scroll-components-88"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Wed Jun 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Finished final details for <code>amp-tiktok</code></li> <li>Continued work on bento <code>amp-dailymotion</code></li> <li>Landed <code>SessionId</code> for <code>amp-analytics</code> (https://github.com/ampproject/amphtml/pull/34521)</li> <li>PRs out for Session Analytics: Last Event Timestamp (https://github.com/ampproject/amphtml/pull/34816) and Session Count (https://github.com/ampproject/amphtml/pull/34850)</li> <li>Opt-in Same Domain Matching for Linker (https://github.com/ampproject/amphtml/pull/34821)</li> <li><code>amp-ima-video</code> bugfix for livestream controls (https://github.com/ampproject/amphtml/pull/34865)</li> <li>PR for Multi-Video Selector for <code>amp-analytics</code> in progress (https://github.com/ampproject/amphtml/pull/34841) </li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-components/issues/88" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Land the rest of Session Analytics + engaged macro</li> <li>Design Review for GeoHash Experiment</li> <li>Land Auto-Envelope</li> <li>Land Bento dailymotion</li> <li>Design for Custom Browser Events for <code>amp-analytics</code></li> <li>Launch <code>amp-render</code></li> </ul> <a href="https://github.com/ampproject/wg-components/issues/88" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-88.toggleClass(class='expanded'), scroll-components-88.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-57"> <aside class="-ai" id="scroll-monetization-57"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Wed Jun 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - Top sticky ad validator change - 3p Vendor splitting launched to 100%</p> <p><strong>Story ads</strong> - Starting story experiment for auto advance</p> <a href="https://github.com/ampproject/wg-monetization/issues/57" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Amp monetization</strong> - Web interstitial ads performance considerations - Deprecate <code><amp sticky</code> with empty sticky attribute</p> <p><strong>Story ads</strong></p> <a href="https://github.com/ampproject/wg-monetization/issues/57" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-57.toggleClass(class='expanded'), scroll-monetization-57.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="performance-86"> <aside class="-ai" id="scroll-performance-86"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #C80000"></span> <div class="-al"> <h4 class="-ac">Performance</h4> <span class="-ah">Status Update Wed Jun 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons Learned</h2> <a href="https://github.com/ampproject/wg-performance/issues/86" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's Next</h2> <a href="https://github.com/ampproject/wg-performance/issues/86" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:performance-86.toggleClass(class='expanded'), scroll-performance-86.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-84"> <aside class="-ai" id="scroll-components-84"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Sun May 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Session Analytics Privacy Review go ahead, <code>sessionId</code> macro support started</li> <li>Continue looking into SSR <code>amp-consent</code> inline consent dialogs</li> <li><code>amp-render</code> placeholder, fallback, loader, and binding attribute support, and documentation</li> <li><code>amp-tiktok</code> placeholder, loader, and validation </li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-components/issues/84" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Bento dailymotion component</li> <li>Supplementary session data support</li> <li><code>amp-render</code> look into layout container support + miscellaneous tasks</li> <li><code>amp-next-page</code> issues</li> <li>Look into <code>amp-consent</code> reported issue</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/84" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-84.toggleClass(class='expanded'), scroll-components-84.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-55"> <aside class="-ai" id="scroll-monetization-55"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Sun May 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - Top sticky ad to not adjust padding-top - In amp-auto-ads, inserting ads above is mostly unseen but causes CLS - 3p vendor splitting ramping up to 50% - Investigated a regression w/ infra</p> <p><strong>Story ads</strong></p> <a href="https://github.com/ampproject/wg-monetization/issues/55" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Amp monetization</strong> - AMP domain migration - between-navigation ads design - amp-img to img migration</p> <p><strong>Story ads</strong></p> <a href="https://github.com/ampproject/wg-monetization/issues/55" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-55.toggleClass(class='expanded'), scroll-monetization-55.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-63"> <aside class="-ai" id="scroll-bento-63"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Sun May 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li><code>amp-facebook</code> consolidating internal implementations and testing in progress</li> <li><code>amp-render</code> </li> <li>fallback Support</li> <li>placeholder Support</li> <li>validation</li> <li><code>amp-sidebar</code></li> <li>preact SSR implementation of Toolbar</li> <li>NPM Publishing</li> <li>Initial conversations with Dev Rel for NPM Readme creation</li> <li>13 components completed conversion required for publishing (latest was <code>amp-base-carousel</code>)</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/63" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li><code>amp-render</code></li> <li>loading indicator</li> <li>support for binding</li> <li><code>amp-sidebar</code></li> <li>amp SSR implementation of Toolbar</li> <li>NPM Publishing</li> <li>Convert two remaining components from Dev Preview</li> <li>Updates needed to package file and generation scripts</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/63" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-63.toggleClass(class='expanded'), scroll-bento-63.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-83"> <aside class="-ai" id="scroll-components-83"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Sat May 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Supporting text fragment highlight within the Viewer</li> <li><code>amp-render</code> URL variable substitution support</li> <li><code>amp-analytics</code> Session Analytics design review</li> <li>Remove <code>amp-consent</code> consent storage limit on the Viewer</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-components/issues/83" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Session Analytics design review Privacy review for supplementary data</li> <li><code>amp-analytics</code> <code>SESSION_ID</code> low entropy support</li> <li><code>amp-consent</code> reducing LCP for inline consent prompts</li> <li><code>amp-render</code> fallback/placeholder support + miscellaneous fixes </li> <li><code>amp-next-page</code> bugfixes</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/83" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-83.toggleClass(class='expanded'), scroll-components-83.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-62"> <aside class="-ai" id="scroll-bento-62"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Sat May 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li><a href="https://github.com/ampproject/amphtml/blob/main/contributing/building-a-bento-video-player.md">Guide to building a Bento video player</a></li> <li>Support <code>amp make-extension</code> flag <code>--nojss</code></li> <li><code>amp-video-iframe</code> merged with validation</li> <li><code>amp-vimeo</code> merged with validation</li> <li><code>amp-ima-video</code> port in progress </li> <li>Requires restructuring <code>ProxyIframeEmbed</code> for combined use with <code>VideoBaseElement</code></li> <li>Changes to iframe loaded by both versoins: structured children and uniform method names</li> <li>OWNERS change and test cleanup</li> <li><code>amp-ima-video</code> user experience improvements</li> <li>Investigate introducing <code>sandbox</code> attribute to <code>amp-facebook-*</code> components </li> <li>Preact <code>Twitter</code> component and Storybooks merged</li> <li>npm publishing</li> <li>10 components on npm i.e. <a href="https://www.npmjs.com/package/@ampproject/amp-fit-text"><code>amp-fit-text</code></a></li> <li>4 additional components require file structure conversion to publish</li> <li><code>amp-sidebar</code> toolbar Preact implementation merged</li> <li>(Invalid AMP): Support for <code>img</code> in components that integrate with <code>amp-img</code> in progress</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/62" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Continue in-progress tasks:</li> <li><code>amp-ima-video</code></li> <li><code>amp-sidebar</code> toolbar</li> <li><code>img</code> support</li> <li>npm publication</li> <li>Bento video players to pass consent with the consent Service in AMP layer</li> <li>Bento port of <code>amp-brightcove</code></li> <li>Investigate safely removing <code>examples/</code> which are exhaustively covered via Storybook samples</li> <li>Bento port of other <code>amp-facebook</code> components</li> <li><code>amp-render</code> support for <code>placeholder</code></li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/62" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-62.toggleClass(class='expanded'), scroll-bento-62.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-81"> <aside class="-ai" id="scroll-components-81"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Fri Apr 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li><code>amp-next-page</code> bugfix where children shadow docs were not utilizing Viewer CID like the hostpage was </li> <li>GA4 meeting, creating design doc on Session Analytics in <code>amp-analytics</code></li> <li>Discussing with Viewer team existing localStorage size limitations to allow larger consent information entries to be stored</li> <li><code>amp-render</code>: XSSI prefix support and refresh functionality </li> <li><code>amp-next-page</code> bugfix for replacing history incorrectly when served in Viewer</li> <li><code>amp-tiktok</code>: Validator support, loader support, and fallback support</li> <li></li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-components/issues/81" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Session Analytics Design Review</li> <li>Intern planning</li> <li><code>amp-render</code> url replacement support</li> <li><code>amp-render</code> placeholder and fallback support</li> <li>more <code>amp-next-page</code> P1s</li> <li><code>amp-img</code> deprecation</li> <li><code>SESSION_ID</code> in <code>amp-analytics</code></li> </ul> <a href="https://github.com/ampproject/wg-components/issues/81" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-81.toggleClass(class='expanded'), scroll-components-81.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-53"> <aside class="-ai" id="scroll-monetization-53"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Fri Apr 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - 3p vendor splitting ramped up to 10% of prod - Top sticky ad implementation done - Merged a preliminary fix resolving a CLS issue on amp-auto-ads, with more investigation to go - Launching a holdback experiment to test the revenue impact of the amp-auto-ads CLS fix - Fixed broken A4A envelop on the dev server because of a missing CORS header - Project planning meeting for Web interstitials. Design draft reviewed with AdSense and Arrow team. - Launched no signing</p> <p><strong>Story ads</strong> - Auto advanced ads experiment - Video serving enhancement planning - Added a new branch to placement experiment (10 density) - New ad badge - Fixed bug where ad pages were being counted as organic pages in auto-analytics</p> <a href="https://github.com/ampproject/wg-monetization/issues/53" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Amp monetization</strong> - Web interstitials design - Top sticky ad - amp-auto-ads CLS further investigation</p> <p><strong>Story ads</strong> - Auto advanced ads - Video serving follow up - Review ad placement experiment results</p> <a href="https://github.com/ampproject/wg-monetization/issues/53" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-53.toggleClass(class='expanded'), scroll-monetization-53.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-61"> <aside class="-ai" id="scroll-bento-61"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Fri Apr 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li><code>amp-facebook-comments</code> initial implementation</li> <li><code>amp-render</code></li> <li><code>xssi-prefix</code> and subobject support</li> <li>URL replacement substitutions in review</li> <li><code>amp-sidebar</code> toolbar feature discussed in design review</li> <li><code>amp-video-iframe</code> implementation in review</li> <li><code>amp-vimeo</code> implementation</li> <li>Validation contributions for developer preview components</li> <li>Removed concept of a "lite" viewer</li> <li>Extension generator implementation is now shared for Bento and Classic.</li> <li>Chore: Deprecating Storybook use of <code>withAlly</code> and replaced with updated config</li> <li>Chore: Updated some OWNERS files to belong to Bento/Components</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/61" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li><code>amp-facebook-*</code> follow-up tasks and components:</li> <li>Try including <code>sandbox</code> (previously excluded for these only)</li> <li>Branch component embeds by enum rather than custom element tag name</li> <li><code>amp-render</code></li> <li>placeholder and fallback support </li> <li><code>layout=container</code></li> <li><code>amp-sidebar</code></li> <li>investigate CLS</li> <li>execute on toolbar feature with design review learnings</li> <li>manually publishing Bento components to npm</li> <li>Deep dive for handling 3rd party issues and contributions</li> <li>Design Review for compiling mustache into JSX</li> <li>Reworking autoplay detection.</li> <li>Next Bento video player, likely <code>amp-brightcove</code> or <code>amp-dailymotion</code></li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/61" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-61.toggleClass(class='expanded'), scroll-bento-61.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-80"> <aside class="-ai" id="scroll-components-80"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Thu Apr 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li><code>amp-tiktok</code> merged</li> <li>Working on <code>amp-img</code> validation for standalone images</li> <li>Work started for <code>SESSION_ID</code> macro in <code>amp-analytics</code></li> <li>Work on <code>amp-render</code> (amp-script support, fallback/placeholder)</li> <li><code>amp-next-page</code> triggering scroll events early bug fixed</li> <li><code>amp-carousel</code> indexing and shakey slides bugs fixed</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-components/issues/80" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Design for GA4 MVP support</li> <li><code>amp-next-page</code> CLIENT_ID bug</li> <li>Implement <code>session_id</code> macro</li> <li>Finish TikTok tests</li> <li>Continue <code>amp-render</code> work</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/80" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-80.toggleClass(class='expanded'), scroll-components-80.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-60"> <aside class="-ai" id="scroll-bento-60"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Thu Apr 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished-🍱-✅">What was accomplished 🍱 ✅</h2> <ul> <li><code>amp-render</code> bindable src PR merged</li> <li>Collaboration with caching team on validator changes for developer preview components (still under experiment)</li> <li>Storybook upgraded to version 6</li> <li>Display locking removed from <code>amp-accordion</code> due to chrome team change in API</li> <li>Early Bento feedback(technical/ product) <a href="https://docs.google.com/document/d/14zL2p69YaK8IT3nAuA6EMBd_wpjbw_i7sbA9mnJK0As/edit#heading=h.wyiniml9yzng">here</a></li> <li>Bento Compiler in security and privacy review</li> <li>Presented on Shadow DOM on Deep Dive 4/6 - <a href="https://docs.google.com/presentation/d/1tlSw5wXRRhbCP3on7CZCHX0Ns-9W-PV93qBIvn50naM/edit?usp=sharing&resourcekey=0-4xIy5Ctrqw_oNuxWWyrJZg">slides</a>, <a href="https://drive.google.com/file/d/16oshtkxjH8WdouyBjqQ2wVx_78f2Y4-_/view">video</a></li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/60" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next-⏩">What's next ⏩</h2> <ul> <li>Continue Validator work on all developer preview components (still under experiment)</li> <li><code>amp-render</code> support for object and amp-render</li> <li><code>amp-sidebar</code> toolbar feature in AMP mode</li> <li><code>amp-twitter</code> ongoing work</li> <li><code>amp-next-page</code> initial assessment</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/60" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-60.toggleClass(class='expanded'), scroll-bento-60.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-77"> <amp-position-observer intersection-ratios=".95" target="q1-2021" on="enter:anim-q1-2021.start" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <aside class="-ar" id="q1-2021"> <h3>Q1 2021</h3> </aside> <aside class="-ai" id="scroll-components-77"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Wed Mar 03 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Various <code>amp-render</code> PRs out </li> <li><code>amp-next-page</code> analytics <code>amp-next-page-scroll</code> bug</li> <li><code>amp-tiktok</code> e2e tests out</li> <li><code>SESSION_ID</code> macro design review</li> <li><code>amp-carousel</code> event propagation to viewer bugfix</li> <li>US Privacy String sent to doubleclick and adsense in A4A</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-components/issues/77" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Continue work on <code>amp-render</code> (placeholder + fallback, dynamic resizing, amp-script case)</li> <li><code>SESSION_ID</code> implementation</li> <li>Submit <code>amp-tiktok</code> PRs</li> <li><code>amp-img</code> depreciation</li> <li>User Agent Client Hints low entropy in <code>amp-analytics</code></li> <li>Demographics and Interests Analytics in <code>amp-analytics</code></li> </ul> <a href="https://github.com/ampproject/wg-components/issues/77" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-77.toggleClass(class='expanded'), scroll-components-77.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-57"> <aside class="-ai" id="scroll-bento-57"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Tue Mar 02 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished-🍱-✅">What was accomplished 🍱 ✅</h2> <ul> <li>Automated design review issue creation</li> <li>Started validating developer preview components (still under experiment)</li> <li>Wrapped up CLS investigations on carousel components</li> <li>Introduced scheduling for Bento components, i.e. lightbox and sidebar</li> <li>Merged <code>Sidebar</code> <code>Toolbar</code> feature in Preact mode</li> <li>Now generating npm binaries during build/dist for npm publishing</li> <li><code>amp-render</code> initial implementation with support for remote, bindable <code>src</code> and <code>amp-state</code> protocol</li> <li>Prototype for <code>amp-twitter</code></li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/57" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next-⏩">What's next ⏩</h2> <ul> <li>Working with infra 👋 🏗️ to release npm binaries</li> <li>Validate all developer preview components (still under experiment)</li> <li><code>amp-sidebar</code> toolbar feature in AMP mode</li> <li><code>amp-render</code> support for <code>amp-script</code> protocol and <code>placeholder</code></li> <li><code>amp-twitter</code> ongoing work</li> <li>Tune in for shadow DOM demo in next week's deep dive</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/57" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-57.toggleClass(class='expanded'), scroll-bento-57.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-76"> <aside class="-ai" id="scroll-components-76"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Mon Mar 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li><code>amp-tiktok</code> PR out for review</li> <li><code>amp-render</code> continued work</li> <li><code>amp-next-page</code> scrollTo bug fix</li> <li>Discussions around support <code>us_privacy</code> parameter in a4a</li> <li>Partial Launch of TCF PostMessage API</li> <li>Granular Consent developer documentation</li> <li>Supporting <code>form</code> attribute for <code><input></code>s outside of <code>amp-form</code></li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-components/issues/76" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Submit <code>amp-tiktok</code></li> <li>Finish <code>amp-render</code></li> <li><code>amp-next-page</code> replace history bug</li> <li><code>session_id</code> macro in <code>amp-analytics</code></li> <li>Splitting linker/cookie writer module from <code>amp-analytics</code> & <code>amp-consent</code> design</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/76" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-76.toggleClass(class='expanded'), scroll-components-76.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-74"> <aside class="-ai" id="scroll-components-74"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Mon Mar 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Perf</li> <li><a href="https://github.com/ampproject/amphtml/projects/72">Fix it week</a>, focus on code health & test coverage (12 issues closed, 7 more in progress)</li> <li><code>amp-consent</code> TCF PostMessage Proxy API out, gathering feedback</li> <li><code>addtl_consent</code> added to doubleclick and adsense request urls</li> <li>Text Fragment highlighting, exploring server side transformation</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-components/issues/74" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li><code>amp-consent</code> granular consent launch</li> <li><code>session_id</code> MACRO in <code>amp-analytics</code></li> <li><code>amp-tiktok</code> implementation </li> <li><code>amp-render</code> implementation</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/74" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-74.toggleClass(class='expanded'), scroll-components-74.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-49"> <aside class="-ai" id="scroll-monetization-49"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Mon Mar 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>AMP Monetization</strong> - Passed version info from ads to FIE - Launched no-signing - Improved vendor JS building performance using esbuild, restarted building them in tests and in the release process</p> <p><strong>Story Ads</strong> - Introduced swipe tracking trigger - Fixed bug where mediapool was not recognizing ad page distance - Introduced new <code>StoryAdPagemanager</code> class as part of placement algorithm refactor</p> <a href="https://github.com/ampproject/wg-monetization/issues/49" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what-is-next">What is next</h2> <p><strong>AMP Monetization</strong> - Launch vendor splitting experiment!</p> <p><strong>Story ads</strong> - Implement existing algorithm as new <code>StoryAdPlacementAlgorithm</code> subclass - Implement new placement algorithm</p> <a href="https://github.com/ampproject/wg-monetization/issues/49" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-49.toggleClass(class='expanded'), scroll-monetization-49.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-48"> <aside class="-ai" id="scroll-monetization-48"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Mon Mar 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Fix it week</strong> - Fixed/closed 7 issues. 2 more in progress - (Code complete, pending security review) change 3p iframe to use deterministic domain for frame.html - AMPHTML-AD Visual diff test reenabled https://github.com/ampproject/amphtml/issues/31199 - Allow AMP polyfills in no-signing - Make test-amp-a4a.js not as flaky - Move Story Ads CTA to shadow DOM - Update Adsense docs for story ads</p> <p><strong>AMP Monetization</strong></p> <p><strong>Story Ads</strong></p> <a href="https://github.com/ampproject/wg-monetization/issues/48" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what-is-next">What is next</h2> <p><strong>AMP Monetization</strong> - 3p frame splitting PR reverted for affecting CI performance, will start the experiment once fixed - Launch no signing !</p> <p><strong>Story ads</strong> - Meeting to discuss new placement tradeoffs. - Encapsulation of placement algorithm. - Implement swipe tracking</p> <a href="https://github.com/ampproject/wg-monetization/issues/48" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-48.toggleClass(class='expanded'), scroll-monetization-48.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-56"> <aside class="-ai" id="scroll-bento-56"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Mon Mar 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished-🍱-✅">What was accomplished 🍱 ✅</h2> <ul> <li><code>amp-fit-text</code> server-side experiment to measure performance with v0</li> <li><code>amp-render</code> base implementation</li> <li><code>amp-sidebar</code> toolbar design</li> <li>Investigating CLS in <code>amp-carousel</code>, <code>amp-base-carousel</code>, and related</li> </ul> <h2 id="lessons-learned-👩‍🎓">Lessons learned 👩‍🎓</h2> <ul> <li><a href="https://amp.dev/documentation/guides-and-tutorials/contribute/contribute-documentation/formatting/">We have docs on how to format docs!</a></li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/56" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next-⏩">What's next ⏩</h2> <ul> <li>Bento npm publishing</li> <li><code>amp-render</code><ul> <li>loading from <code>amp-script</code></li> <li>placeholder support</li> </ul> </li> <li>Fixing some carousel CLS issues</li> <li>First look at <code>amp-twitter</code></li> <li>Video docking active development</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/56" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-56.toggleClass(class='expanded'), scroll-bento-56.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-55"> <aside class="-ai" id="scroll-bento-55"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Mon Mar 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished-✅">What was accomplished ✅</h2> <h3 id="fix-it-week-🔨">Fix it week 🔨</h3> <ul> <li><code>amp-youtube</code> supports <code>currentTime</code> and <code>duration</code> in imperative API https://github.com/ampproject/amphtml/pull/32804</li> <li><code>amp-selector</code> has stylistic support for hybrid <code>disabled</code> + <code>selected</code> state https://github.com/ampproject/amphtml/pull/32825</li> <li><code>amp-accordion</code> <code>0.1</code> and <code>1.0</code> respect pre-existing <code>role</code> attributes https://github.com/ampproject/amphtml/pull/32915</li> <li><code>amp-timeago</code> <code>0.1</code> and <code>1.0</code> migrated to latest <code>timeago.js</code> library (from <code>third_party/</code> to <code>node_modules</code>) and now have support for 7 more languages</li> <li>e2e tests for <code>amp-sidebar</code> https://github.com/ampproject/amphtml/pull/32837, <code>amp-social-share</code> https://github.com/ampproject/amphtml/pull/32881, and <code>amp-accordion</code> https://github.com/ampproject/amphtml/pull/32958</li> <li>Documented <a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-html-responsive-attributes.md">media-based attributes</a> and enabled on <code>amp-fit-text</code> https://github.com/ampproject/amphtml/pull/32824</li> <li><code>BaseElement['props']</code> refactor to simplify children configurations https://github.com/ampproject/amphtml/pull/32936</li> <li><code>objstr</code>:<ul> <li>used in more components https://github.com/ampproject/amphtml/pull/32893</li> <li>compiles down https://github.com/ampproject/amphtml/pull/32872</li> </ul> </li> <li>JSS:<ul> <li>transform compiled output to <code>export const className</code> for filesize https://github.com/ampproject/amphtml/pull/32888</li> <li>collect z-index https://github.com/ampproject/amphtml/pull/32847</li> </ul> </li> <li>Shadow DOM polyfill https://github.com/ampproject/amphtml/pull/32820</li> </ul> <h3 id="general-🍱">General 🍱</h3> <ul> <li><code>LightboxGallery</code> Preact implementation</li> <li>component file restructuring for npm packaging</li> <li>NPM binary generation with ES build</li> <li>design review for <a href="https://docs.google.com/document/d/14M9lSsE3FXTqEBK7sV_iepu9lSc2-8sTdAnFljCdgfg/edit#heading=h.ab36dwby1ncy">deferred build and async pause systems</a> </li> <li>Use <code>gulp get-zindex [--fix]</code> to make sure <code>css/Z_INDEX.md</code> is up to date</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/55" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="lessons-learned-👩‍🎓">Lessons learned 👩‍🎓</h2> <ul> <li>We can <a href="https://github.com/ampproject/amphtml/issues/27198">stop prettier from exploding the boilerplate code</a> on HTML documents by disabling prettier for the <code><head></code> node.</li> </ul> <h2 id="what's-next-⏩">What's next ⏩</h2> <ul> <li><code>amp-lightbox-gallery</code> AMP layer</li> <li><code>amp-sidebar</code> active development</li> <li>video docking active development</li> <li>Analysis of <code>amp-fit-text</code> <code>0.1</code> -> <code>1.0</code> auto upgrade performance implications</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/55" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-55.toggleClass(class='expanded'), scroll-bento-55.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-73"> <aside class="-ai" id="scroll-components-73"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Mon Feb 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li><code>amp-next-page</code> handling multiple consents submitted</li> <li><code>amp-render</code> design review </li> <li><code>amp-tiktok</code> work</li> <li><code>amp-fit-text</code> deflaking e2e test</li> <li><code>amp-consent</code> TCF 2.0 PostMessage API & Granular Consent PRs</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-components/issues/73" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li><code>amp-render</code> implementation</li> <li><code>amp-next-page</code> reader ID issue </li> <li><code>amp-tiktok</code></li> <li><code>amp-fit-text</code> CSS issue</li> <li><code>amp-consent</code> TCF 2.0 PostMessage API & Granular Consent</li> <li>Split Linker/Cookie Writer design</li> <li>Use <code>addtl_consent</code> in a4a url requests</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/73" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-73.toggleClass(class='expanded'), scroll-components-73.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-71"> <aside class="-ai" id="scroll-components-71"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Mon Feb 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>PR to handle <code>amp-consent</code> within <code>amp-next-page</code></li> <li><code>amp-render</code> design</li> <li><code>amp-tiktok</code> design review</li> <li><code>amp-fit-text</code> adding better testing</li> <li>CID syncing in <code>amp-consent</code> via CookieWriter</li> <li><code>amp-consent</code> TCF PostMessage API legal approval</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-components/issues/71" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>GA4 Planning</li> <li>Granular Consent</li> <li>amp-tiktok</li> <li>Text fragment highlighting support</li> <li>amp-render</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/71" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-71.toggleClass(class='expanded'), scroll-components-71.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-47"> <aside class="-ai" id="scroll-monetization-47"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Mon Feb 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>AMP Monetization</strong> - AMP now builds separate 3p iframe integration.js, and refactors done to allow dynamically choosing JS for 3p iframe - AMP-AD CSS experiment turned on (blocking top banner sticky ad) - Ran a CWV experiment that turns off ads render-on-idle . Result it very noisy. Didn’t get enough data points from canary traffic. - Launched eager building of fie/inabox amp elements - Allow ad networks to opt out of client side validation in no-signing</p> <p><strong>Story Ads</strong> - Exploration of new story ads algorithm impact </p> <a href="https://github.com/ampproject/wg-monetization/issues/47" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what-is-next">What is next</h2> <p><strong>AMP Monetization</strong> - Turn on amp-ad 3p vendor splitting for more vendors - Launch no signing</p> <p><strong>Story ads</strong> - Encapsulate logic for placement algorithm - Start new algorithm implementation</p> <a href="https://github.com/ampproject/wg-monetization/issues/47" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-47.toggleClass(class='expanded'), scroll-monetization-47.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-54"> <aside class="-ai" id="scroll-bento-54"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Mon Feb 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>npm packaging in progress</li> <li>Video docking in progress</li> <li>Contributing to obj-str Babel transformations for an improved classname construction</li> <li>Sidebar animations completed</li> <li>Started the load experiment for Bento components in AMP using amp-fit-text</li> <li>Progress on component isolation: measurements, pause/resume and deferred build. Presenting at tomorrow's design review.</li> <li>aspect-ratio rollout is continuing</li> <li>Started the project to refactor log writers.</li> <li>Started work on lightbox gallery</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <ul> <li>We've been rendering and testing visual diffs on different browser versions, which explains some flakes.</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/54" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Fixit week</li> <li>Working on the next set of Bento component priorities.</li> <li>Continued progress on video docking, sidebar, and lightbox gallery.</li> <li>Continued progress on component isolation</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/54" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-54.toggleClass(class='expanded'), scroll-bento-54.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-53"> <aside class="-ai" id="scroll-bento-53"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Mon Feb 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>🎉 We launched our <a href="https://blog.amp.dev/2021/01/28/bento/">dev preview!</a></li> <li>🎯 <code>amp-social-share:focus</code> support through shadow DOM </li> <li>⬆️ <code>amp-date-countdown</code> <code>countUp</code> feature</li> <li>📦 Design doc for <a href="https://docs.google.com/document/d/1uJdH836Q8U5nhtCfVWc24kha2BNxU-Nkp-5riSgyI3k/edit">releasing Bento components on npm</a></li> <li>✅ e2e tests now support sharing fixtures across component versions</li> <li>⏰ Dispatch DOM events in Bento components</li> <li>📝 Document <a href="https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/?format=websites&_gl=1*1oo6498*_ga*YW1wLTVrcDR1bGNQYlJRZ0VkTHVaT2JiRUE.#interacting-with-bento-components">imperative API for Bento mode</a></li> <li>🛥️ Draft Preact docking implementation</li> <li>📸 <code>aspect-ratio</code> rollout</li> <li>🐛 Various bug fixes:</li> <li>iOS web scrolling</li> <li>non-zero <code>line-height</code> for <code>[placeholder]</code> elements</li> <li>media attributes</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-bento/issues/53" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>📝 Documentation / Deep Dive for <code>delegatesFocus</code> </li> <li>📂 Demo changes in component file structure to prepare for releasing on npm</li> <li>🛥️ Continued progress with media docking</li> <li>💡 <code>LightboxGallery</code> design and implementation</li> <li>🔖 <code>Sidebar</code> continued progress</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/53" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-53.toggleClass(class='expanded'), scroll-bento-53.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-69"> <aside class="-ai" id="scroll-components-69"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Tue Jan 05 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li><code>amp-consent</code> CSS fix for docs served from viewer</li> <li><code>amp-carousel</code> cherry pick revert for CSS styling overriding publisher styling</li> <li><code>amp-render</code> discussions with DevRel & Bento team</li> <li><code>block-rtc</code> & <code>always-serve-npa</code> PR merged</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <ul> <li>Careful with <code>!important</code> styling as pubs may want to use their own styling</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/69" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Granular Consent design review</li> <li>GA4 discussions</li> <li><code>amp-render</code> & <code>amp-list</code> continued design work</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/69" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-69.toggleClass(class='expanded'), scroll-components-69.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-50"> <aside class="-ai" id="scroll-bento-50"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Tue Jan 05 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Most folks OOO</li> <li>Bug fixes from year end bug bash</li> <li>Imperative API</li> <li>Work started on amp-sidebar</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <ul> <li>box-styles propagation through <code>display: contents</code> <a href="https://gist.github.com/caroqliu/93ad857263c7bce17a3eb1a9e0ba38a1">1-pager</a></li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/50" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Preparing amp.dev with high level Bento information and usage guides</li> <li>Developer preview of our first 16 components</li> <li><code>amp-truncate-text</code></li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/50" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-50.toggleClass(class='expanded'), scroll-bento-50.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-70"> <aside class="-ai" id="scroll-components-70"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Fri Jan 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Working through <code>amp-next-page</code> viewer bugs</li> <li><code>amp-render</code> brainstorming and requirements--subset of <code>amp-list</code></li> <li><code>amp-fit-text</code> ResizeObserver bugs fix and test</li> <li><code>amp-carousel</code> observe child elements bug fix</li> <li>legal review for TCF PostMessage Proxy API</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-components/issues/70" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>New SESSION_ID macro</li> <li><code>amp-form</code> CORS error</li> <li>GA4</li> <li><code>amp-render</code> design review</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/70" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-70.toggleClass(class='expanded'), scroll-components-70.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-45"> <aside class="-ai" id="scroll-monetization-45"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Fri Jan 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>AMP Monetization</strong> - Introduced CLIENT_ID macro for use in RTC requests - Launched separate resource manager for FIE ads to 100% (experiment results were positive) - Regression caught by RTC change was determined to be likely WAI. Another experiment started to validate the hypothesis. - AMP-AD CSS change experiment started - Investigated scroll reactive ad implementation and its performance limitation</p> <p><strong>Story Ads</strong> - Started design doc for ad placement - Impression counting change running at small percentage</p> <a href="https://github.com/ampproject/wg-monetization/issues/45" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what-is-next">What is next</h2> <p><strong>AMP Monetization</strong> - Top banner sticky ad implementation - Animated sticky ad creative format - wg-monetization to take over amp-access</p> <p><strong>Story ads</strong> - Complete design doc for ad placement</p> <a href="https://github.com/ampproject/wg-monetization/issues/45" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-45.toggleClass(class='expanded'), scroll-monetization-45.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-52"> <aside class="-ai" id="scroll-bento-52"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Fri Jan 01 2021</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Ready for dev preview. Waiting for some amp.dev updates to go public.</li> <li>Dev-preview related minor fixes.</li> <li>Sidebar: RTL and styling fixes</li> <li>We now have ResizeObserver polyfill across all of AMP</li> <li>Initial resize-code refactoring.</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-bento/issues/52" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Continuing: Video docking</li> <li>Start: lightbox gallery</li> <li>Social share: focus outline work</li> <li>Continuing: amp-truncated-text</li> <li>Upgrading storybook</li> <li>Start: npm packages for (P)react components</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/52" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-52.toggleClass(class='expanded'), scroll-bento-52.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-47"> <amp-position-observer intersection-ratios=".95" target="q4-2020" on="enter:anim-q4-2020.start" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <aside class="-ar" id="q4-2020"> <h3>Q4 2020</h3> </aside> <aside class="-ai" id="scroll-infra-47"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Mon Dec 07 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Internal release pipeline improvements</li> <li>Maintenance for custom AMP GitHub apps</li> <li>AMP closure compiler was upgraded from May to November</li> <li>Progress on code coverage measurements during tests</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/47" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Refactor Travis-specific CI pipeline code</li> <li>Continue work on other ongoing projects</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/47" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-47.toggleClass(class='expanded'), scroll-infra-47.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-48"> <aside class="-ai" id="scroll-bento-48"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Mon Dec 07 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Most of carousel baseline features completed</li> <li>Accordion: display locking completed.</li> <li>Imperative APIs: design completed.</li> <li>Troubleshooting IntersectionObserver spec problems.</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-bento/issues/48" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Bug bash</li> <li>Sidebar</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/48" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-48.toggleClass(class='expanded'), scroll-bento-48.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-68"> <aside class="-ai" id="scroll-components-68"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Wed Dec 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Design doc for <code>amp-render</code> completed, design review on 12/02 </li> <li>Code complete for Serving NPA ads (publishing in Q1 2021</li> <li><code>amp-ima-video</code> bugfixes</li> <li><code>amp-fit-text</code> accessibility fix in review</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/68" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Begin implementing <code>amp-render</code> after getting feedback from design review</li> <li>Begin design for <code>amp-list</code> v2</li> <li>Working on finalizing design for granular consent</li> <li>Working on e2e test for <code>amp-fit-text</code> a11y update</li> <li>Update from GA4 team coming 12/4</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/68" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-68.toggleClass(class='expanded'), scroll-components-68.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-46"> <aside class="-ai" id="scroll-infra-46"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Mon Nov 09 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Ushered 2-week release freeze (beta channel updated, but not stable / lts)</li> <li>Migrated AMP project CLA to latest <a href="https://gist.github.com/rsimha/a6ccff0a410b8927b05f57a872a57ee3">OpenJS agreement</a></li> <li>Progress on Visual diff infrastructure redesign</li> <li>Progress on instrumenting minified code for coverage during E2E tests</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/46" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Fixes to AMP closure compiler build pipeline</li> <li>Explore technology options for a status page for AMP</li> <li>Explore automating asset downloading + page freezing for visual diff tests</li> <li>Continue work on other ongoing projects</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/46" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-46.toggleClass(class='expanded'), scroll-infra-46.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-46"> <aside class="-ai" id="scroll-bento-46"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Mon Nov 09 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Video iframe code merged for Preact</li> <li>Progress on docking</li> <li>Static Storybook deployment</li> <li>Implemented CE disconnect/connect as Preact mount/unmount</li> <li>Built support for media attributes, including boolean media attributes</li> <li>amp-bind is supported in the Storybook</li> <li>Imperative API for accordion completed</li> <li>Bind protocol for accordion completed</li> <li>Continued progress on viewportCallback removal</li> <li>Started lightbox implementation</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-bento/issues/46" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>amp-video-iframe binding for video iframe</li> <li>auto-advance in carousel</li> <li>carousel thumbnails</li> <li>carousel snapping features</li> <li>DOM event support for accordion</li> <li>Restructure accordion for better Preact semantics and support display locking</li> <li>Preact and AMP bindings implementation of lightbox</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/46" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-46.toggleClass(class='expanded'), scroll-bento-46.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="components-67"> <aside class="-ai" id="scroll-components-67"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #48525C"></span> <div class="-al"> <h4 class="-ac">User Interface & Accessibility</h4> <span class="-ah">Status Update Mon Nov 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Added support for <code>prefetch</code> in <code>amp-autocomplete</code> </li> <li><code>amp-sidebar</code> layout bug fix </li> <li><code>amp-render</code> design </li> <li>Coordinating documentation and announcements for validation changes for <code>amp-img</code> deprecation</li> <li>Running worker in iframe design finalized</li> <li><code>analytics-chunk</code> experiment cleanup</li> <li><code>backupCid</code> experiment turned on in canary & prod</li> <li>Publishers signaling to always serve NPA design finalized</li> <li>Fixed video-analytics single percentage bug</li> <li>Fixed RTL edge calculations bug for <code>amp-base-carousel</code></li> <li>Fixed scroll snap alignment for <code>amp-carousel</code></li> </ul> <a href="https://github.com/ampproject/wg-components/issues/67" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li><code>amp-render</code> finalize design</li> <li>worker-dom in iframe implementation</li> <li>continue talking to GA team to create design for GA4 support in <code>amp-analytics</code></li> <li>Purpose 1 consent signal</li> </ul> <a href="https://github.com/ampproject/wg-components/issues/67" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:components-67.toggleClass(class='expanded'), scroll-components-67.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-47"> <aside class="-ai" id="scroll-bento-47"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Mon Nov 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li><code>amp-accordion</code>: </li> <li>external API restructure </li> <li>accessibility attributes</li> <li><code>amp-base-carousel</code> <code>snap-align</code> feature to view slides either at <code>start</code> or <code>center</code> of carousel viewport</li> <li><code>amp-lightbox</code> initial implementation</li> <li><code>amp-selector</code>:</li> <li><code>keyboard-select-mode</code> feature for Arrow key navigation and selection configuration</li> <li>Preact unit tests</li> <li>Ongoing fixes for resource loaders and intersection observers</li> <li>Imperative API design and discussion</li> <li>Documentation written for <code>amp-instagram</code>, <code>amp-youtube</code>, <code>amp-lightbox</code></li> <li>Removed <code>viewportCallback</code> from <code>BaseElement</code></li> <li>PR deploy bot integration with Storybook</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <ul> <li>You can run Preact Devtools in Storybook by adding <code>import 'preact/debug';</code> to the start of the story.</li> <li>We make sure <a href="https://github.com/ampproject/amphtml/blob/master/css/ampshared.css#L21-L29"><code>hidden</code> is <code>display:none</code> in AMP</a> but it is much more fragile (overridable) to use it in Bento mode.</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/47" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Finalizing dev preview feature set and planning for beta</li> <li>Continued progress on imperative API </li> <li><code>amp-accordion</code>:</li> <li>display locking</li> <li>final touches</li> <li><code>amp-base-carousel</code>:</li> <li>e2e tests</li> <li><code>orientation</code> feature to configure the carousel as horizontal or vertical scrolling</li> <li><code>dir="rtl"</code> support</li> <li><code>amp-selector</code> integration with forms</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/47" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-47.toggleClass(class='expanded'), scroll-bento-47.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-45"> <aside class="-ai" id="scroll-infra-45"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Fri Oct 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Infra updates for release freeze from <a href="https://github.com/ampproject/meta-tsc/issues/51">10/26-11/8</a></li> <li>AMP has fully moved off Google CLA to <a href="https://cla-assistant.io/ampproject/amphtml">OpenJS CLA</a></li> <li>Package management has been <a href="https://github.com/ampproject/amphtml/pull/30694">migrated</a> from Yarn to NPM</li> <li>Travis integration <a href="https://travis-ci.com/github/ampproject/amphtml/builds">migrated</a> from travis-ci.org to travis-ci.com</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/45" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Continue work on assorted ongoing projects</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/45" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-45.toggleClass(class='expanded'), scroll-infra-45.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-45"> <aside class="-ai" id="scroll-bento-45"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Fri Oct 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Prototypes created for mixed-length and streaming carousel types</li> <li>Accordion: a11y support and styling.</li> <li>Accordion: work started on imperative APIs.</li> <li>Video iframes and YouTube components are code complete.</li> <li>Started lightbox components. Presented in design review.</li> <li>Replacing <code>viewportCallback</code> with <code>IntersectionObserver</code> throughout the runtime.</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-bento/issues/45" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Continue work on video docking</li> <li>Continue work on stream and mixed-length carousel types.</li> <li>Continue work on lightbox components.</li> <li>Continue work on accordion imperative APIs, a11y, and structure.</li> <li>Support media-query attributes.</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/45" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-45.toggleClass(class='expanded'), scroll-bento-45.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-43"> <aside class="-ai" id="scroll-infra-43"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Thu Oct 01 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Internal improvements to release process, including freezing from <a href="https://github.com/ampproject/meta-tsc/issues/51">10/26-11/8</a></li> <li>Beta browsers / OSs are included in manual testing matrix</li> <li>Coverage data can now be collected during E2E and manual testing</li> <li>Deployed new OpenJS CLA for <code>ampproject</code> (not blocking yet, will eventually replace Google CLA)</li> <li>Fixes to package management (Yarn 1 is reaching end-of-life)</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/43" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Design review for package management solution (Yarn 1 vs. Yarn 2 vs. NPM)</li> <li>Test result collection and reporting for automated tests</li> <li>Documentation for release process and error reporting</li> <li>Syntax checks for OWNERS files</li> <li>Continue work on ongoing release projects</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/43" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-43.toggleClass(class='expanded'), scroll-infra-43.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-42"> <amp-position-observer intersection-ratios=".95" target="q3-2020" on="enter:anim-q3-2020.start" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <aside class="-ar" id="q3-2020"> <h3>Q3 2020</h3> </aside> <aside class="-ai" id="scroll-infra-42"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Wed Sep 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>IE 11 integration tests are now blocking</li> <li>Investigated running Karma tests on an iOS simulator</li> <li>Internal infrastructure improvements to cherry-picks and generation of visual tests</li> <li>Upgraded custom AMP closure compiler to September, discovered crash (https://github.com/ampproject/amp-closure-compiler/issues/22#issuecomment-699145802)</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/42" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Fix closure crash</li> <li>Refactor internal CI code</li> <li>Investigate alternatives that allow for iOS testing</li> <li>Incorporate beta browsers / OSs in manual testing matrix</li> <li>Continue with ongoing projects (coverage, release infra, compilation toolchain)</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/42" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-42.toggleClass(class='expanded'), scroll-infra-42.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-44"> <aside class="-ai" id="scroll-runtime-44"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Wed Sep 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-runtime/issues/44" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <a href="https://github.com/ampproject/wg-runtime/issues/44" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-44.toggleClass(class='expanded'), scroll-runtime-44.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-33"> <aside class="-ai" id="scroll-analytics-33"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Wed Sep 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-was-accomplished">What was accomplished</h3> <ul> <li>Inabox ad visibility tracking: Listen to window resize event</li> <li>Enable CMP iframe to run in the background for 1 second so they can send out update after user action</li> <li>Easy configuration to always serve non personalized ad</li> <li>Backup CLIENT_ID in localStorage</li> <li>Debugging: Analytics not loading when user scroll to the bottom fast</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/33" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-coming-next">What's coming next</h3> <ul> <li>Analytics service listen to img's onload event (part of the effort of <code><amp-img></code> deprecation)</li> <li>Discussion: Element level granularity consent decision support</li> <li>Discussion: Pass TCF 2.0 consent string via postMessages to iframes</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/33" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-33.toggleClass(class='expanded'), scroll-analytics-33.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-41"> <aside class="-ai" id="scroll-infra-41"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Tue Sep 01 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Updates to visual diff internals (plus stability fixes during release process)</li> <li>Updates to cherry pick internals during release process</li> <li>Initial planning for improvements to CI pipeline</li> <li>Instrumented minified builds for code coverage measurements</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/41" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Instrument minified runtime in dev-server and during automated testing</li> <li>Begin consolidating code specific to CI service across build-system</li> <li>Initial planning for reorganizing of AMP source code directories</li> <li>Continue work on other in-flight projects</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/41" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-41.toggleClass(class='expanded'), scroll-infra-41.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-43"> <aside class="-ai" id="scroll-runtime-43"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Tue Sep 01 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="accomplished">Accomplished</h2> <ul> <li>Justin</li> <li>Progress on Bento auto-envelope</li> <li>Make auto-injected script tags parse as modules in ESM</li> <li>Fix to Closure Compiler to correctly support sequence expressions in destructures</li> <li>Jake</li> <li>Bento styling<ul> <li>Design review (https://docs.google.com/document/d/1EiBj4Hy7cxhgl8GXw-8FeW7zIyL8reRI7NC9dJB7SR0)</li> <li>Deterministic classname generation and watch mode support (https://github.com/ampproject/amphtml/pull/30065, https://github.com/ampproject/amphtml/pull/30115)</li> </ul> </li> <li>Fixes:<ul> <li>Teach babel-plugin-tests how to pass on Windows machines (https://github.com/ampproject/amphtml/pull/30165)</li> <li>Protocol adapters: support load-more attr (https://github.com/ampproject/amphtml/pull/30101)</li> <li>Resources system IntersectionObserver experiment bugs:</li> <li>Using outdated measure: https://github.com/ampproject/amphtml/pull/30188</li> <li>Fill layout skips layout: https://github.com/ampproject/amphtml/pull/30167</li> </ul> </li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/43" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="next">Next</h2> <ul> <li>Justin </li> <li>Finish auto-envelope, write doc</li> <li>Begin amp-img SSR tests</li> <li>Update perf metrics to handle SSR experiments</li> <li>Jake</li> <li>Dockerized optimizer: blocked on reviews</li> <li>Integration tests for layout sizing during build</li> <li>Wrap up Bento styling work</li> <li>Research better experiment analytics for runtime/internal csi</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/43" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-43.toggleClass(class='expanded'), scroll-runtime-43.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-32"> <aside class="-ai" id="scroll-analytics-32"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Tue Sep 01 2020</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-was-accomplished">What was accomplished</h3> <ul> <li>Support Consent meta data collection via macros</li> <li>Check element size in additional to intersectRatio when report visibility</li> <li>Design: Backup CLIENT_ID in localStorage</li> <li>Debug: Incorrect visibility trigger due to fluid inabox ad resizing in viewport</li> <li>Debug: Video-played-percentage trigger issue with stories team</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/32" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-coming-next">What's coming next</h3> <ul> <li>Introduce an easy way to bypass user consent decision and always serve non personalized ad</li> <li>Granular Consent Support Design</li> <li>Running 3p service provider script in web worker (<a href="https://github.com/ampproject/amphtml/issues/30193">I2I</a>)</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/32" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-32.toggleClass(class='expanded'), scroll-analytics-32.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-40"> <aside class="-ai" id="scroll-infra-40"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Mon Aug 03 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Improvements to guts of visual testing</li> <li>Improvements to workflow for generating github releases</li> <li>AMP can now be built and tested on Windows</li> <li>Discovered cause of test flakes on Safari (incomplete iframe cleanup)</li> <li>Investigated code coverage for minified builds</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/40" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Planning for improvements to CI pipeline</li> <li>Instrument minified builds, augment dev server middleware</li> <li>Continue work on in-flight projects mentioned above</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/40" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-40.toggleClass(class='expanded'), scroll-infra-40.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-42"> <aside class="-ai" id="scroll-runtime-42"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Mon Aug 03 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="accomplished">Accomplished</h2> <ul> <li>Justin <ul> <li>amp-img SSR CLs have landed <ul> <li>Made sure SSR'd <code><img></code> is visible: https://github.com/ampproject/amphtml/pull/29955 </li> </ul> </li> <li>Various bug fixes <ul> <li>https://github.com/ampproject/amphtml/pull/29951 </li> <li>https://github.com/ampproject/amphtml/pull/29950 </li> <li>https://github.com/ampproject/amphtml/pull/29947 </li> </ul> </li> <li>Worked on auto-envelope </li> </ul> </li> <li>Jake <ul> <li>🎉Launched strict experiment (ampproject/amphtml/pull/29929) </li> <li>Merged bento styling babel transform (ampproject/amphtml/pull/29777) </li> <li>📈  Opened up pull request to add Dockerized AMP Optimizer into amp-toolbox </li> <li>Fixes <ul> <li><code><amp-script></code>: don’t assign onerror if init failed (ampproject/amphtml/pull/29875) </li> <li><code><amp-script></code>: improved error messages (ampproject/amphtml/pull/29875) </li> <li><code>worker-dom</code>: dirty flag for value hydration (ampproject/worker-dom/pull/913) </li> <li><code>worker-dom</code>: .click() support (ampproject/worker-dom/pull/919) </li> </ul> </li> </ul> </li> <li>Will <ul> <li>Left wg-runtime. Farewell Will! 🎺😿 </li> </ul> </li> </ul> <h2 id="learned">Learned</h2> <a href="https://github.com/ampproject/wg-runtime/issues/42" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="next">Next</h2> <ul> <li>Justin <ul> <li>Finish auto-envelope </li> <li>Fix follow ups with amp-img SSR </li> <li>Fixit: <ul> <li>amp-bind SSR support in extension </li> </ul> </li> </ul> </li> <li>Jake <ul> <li>Get AMP Optimizer through amp-toolbox review </li> <li>Bento Styling:  <ul> <li>Design review </li> <li>Deterministic classname generation </li> <li>Run through css optimizer / decide on jss plugins </li> </ul> </li> <li>fixits:  <ul> <li><code><amp-script></code> validator extension bug: ampproject/amphtml#29457</li> </ul> </li> </ul> </li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/42" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-42.toggleClass(class='expanded'), scroll-runtime-42.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-40"> <aside class="-ai" id="scroll-runtime-40"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Mon Aug 03 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>amp-img SSR work is almost done, cleaning up the code now before creating CL</li> <li>Bento Reviews for Context and Styles</li> <li>TC39: logical assignment operators will be in ES2021</li> <li>Merged protocol-adapters for amp-list, <code>amp-script[nodom]</code> (https://github.com/ampproject/amphtml/pull/29329, https://github.com/ampproject/amphtml/pull/29541)</li> <li>"nodom" binary for worker-dom (https://github.com/ampproject/worker-dom/pull/882)</li> <li>Investigating 1% ads query regression in <code>intersect-resources</code> and created another candidate fix</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <ul> <li>For changes that may affect ads, start minimal and incrementally diverge instead of starting with a big refactor and paring down</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/40" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Auto-envelope pattern for Bento binaries</li> <li>Fix more TODOs with amp-img SSR</li> <li>Support <code><link rel=preload imagesrcset></code></li> <li>Support auto srcset generation for SSR'd <code><img></code></li> <li>Cleanup code paths</li> <li>Research inputmask bug to see if related to the strict experiment</li> <li>Follow up on removeCalcTask & content prioritization. CSI effects seemed negligible.</li> <li>Documentation for new amp-list/amps-script features and launch experiment: ampproject/amphtml#29603</li> <li>Implement Bento JSS Proposal</li> <li>Fixit: </li> <li>Clean up "layoutbox-invalidate-on-scroll" experiment ampproject/amphtml#25203</li> <li>amp-bind: remove the need for treewalking ampproject/amphtml#27590</li> <li>Fixit: </li> <li><code><amp-script></code> improve hash error: ampproject/amphtml#29614</li> <li><code><amp-script></code> validator extension bug: ampproject/amphtml#29457</li> <li>Fixit: AMP.navigateTo</li> <li>ampproject/amphtml#26248</li> <li>ampproject/amphtml#24798</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/40" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-40.toggleClass(class='expanded'), scroll-runtime-40.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-31"> <aside class="-ai" id="scroll-analytics-31"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Mon Aug 03 2020</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-was-accomplished">What was accomplished</h3> <ul> <li>Support Begin-to-Render signal in a4a ads</li> <li>Removed consent string size restriction on publisher's origin when Storage API is not used. </li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/31" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>[Discussion] Running 3p scripts in web worker in iframe</li> <li>Support Consent meta data collection via macros</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/31" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-31.toggleClass(class='expanded'), scroll-analytics-31.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-29"> <aside class="-ai" id="scroll-analytics-29"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Mon Aug 03 2020</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-was-accomplished">What was accomplished</h3> <ul> <li><code>SESSION_ID</code>: Decided to store to session storage and bypass the storage API as first step.</li> <li>Analytics to temporary collect element width/height & viewport width/height at maximum intersect ratio (For debugging)</li> <li>Consent UI to support dir=rtl</li> <li>Disable <code>promptUISrc</code> from <code><amp-story-consent></code></li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/29" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>Benchmark delay of creating a web worker within a non origin iframe</li> <li>More granular consent blocking on client side</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/29" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-29.toggleClass(class='expanded'), scroll-analytics-29.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-39"> <aside class="-ai" id="scroll-infra-39"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Sat Aug 01 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Started deprecating old RTVs > 6 months old</li> <li>Started automating new release creation as part of cherry-pick workflow</li> <li>Added a windows native compiler to <code>ampproject/amp-closure-compiler</code></li> <li>Fixed race in <code>watch</code> logic of default <code>gulp</code> server</li> <li>New database for test case level reporting for unit / integration tests</li> <li>Error reporting / monitoring for module/nomodule rollout</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/39" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Infrastructure enhancements around release creation / tagging</li> <li>Scale up visual testing</li> <li>Publish native compiler to npm under <code>@ampproject/amp-closure-compiler</code></li> <li>Add reporting for E2E tests</li> <li>Instrument minified code with mapping to original source code</li> <li>Automate error report issue creation</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/39" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-39.toggleClass(class='expanded'), scroll-infra-39.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-41"> <aside class="-ai" id="scroll-runtime-41"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Sat Aug 01 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h3 id="justin">Justin</h3> <ul> <li>CL reviews for amp-img ssr work, finding bugs in other go transformers</li> <li>Helped with debugging cherry-pick issues</li> <li>https://github.com/ampproject/amphtml/pull/29771</li> <li>https://github.com/ampproject/amphtml/pull/29775</li> <li>Cleaned up 2 ancient experiments (fixit!)</li> <li>https://github.com/ampproject/amphtml/pull/29728</li> <li>https://github.com/ampproject/amphtml/pull/29665</li> <li>Worked on auto-envelope, but unhappy with it</li> <li>Bundling 2 element implementations seems wasteful for amp-mode, and bundling specific code in bento-mode</li> <li>Created experimental cache transform for amp-bind</li> </ul> <h3 id="jake">Jake</h3> <ul> <li>🎉 Launched protocol adapters (ampproject/amphtml/pull/29689)</li> <li>📈 Made headway on bento css integration (ampproject/amphtml/pull/29713, ampproject/amphtml/pull/29794)</li> <li>🔎 Made a prototype amp-optimizer docker image</li> <li>🛠️ Fixes:</li> <li>inputmask incorrect usage static this: of ampproject/amphtml/pull/29646</li> <li>inputmask attempting to mask svgs: ampproject/amphtml/pull/29624</li> <li><code><amp-script></code> improve hash error: ampproject/amphtml#29614</li> </ul> <h3 id="will">Will</h3> <ul> <li>Rolled out “intersect-resources” to 100% prod</li> <li>Fixed a couple email-related bugs in amp-list (ampproject/amphtml#29726)</li> <li>Fix-it bugs related to AMP.navigateTo</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <ul> <li>In our error logs, we get a referrer url which can significantly help reproducing issues</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/41" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <h3 id="justin">Justin</h3> <ul> <li>Finish CL of amp-img ssr and related transformers</li> <li>Finish auto-envelope for Bento</li> <li>Update amp-bind code to support SSR transform</li> </ul> <h3 id="jake">Jake</h3> <ul> <li>Continue work on bento css + amp-optimizer docker image</li> <li>🤞 Launch StrictCompilation</li> <li>fixits: </li> <li><code><amp-script></code> validator extension bug: ampproject/amphtml#29457</li> </ul> <h3 id="will">Will</h3> <ul> <li>Transition plan</li> <li>Fix-it: clean up old TODOs</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/41" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-41.toggleClass(class='expanded'), scroll-runtime-41.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-30"> <aside class="-ai" id="scroll-analytics-30"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Sat Aug 01 2020</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-was-accomplished">What was accomplished</h3> <ul> <li>Web Worker in iframe: Non origin iframe: around 80ms delay in initialization, but can still access IndexDb db. 3P iframe: around 300ms delay in initialization. </li> <li>Support visibility tracking of non AMP element</li> <li>Consent UI Lightbox mode PR merged</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/30" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>Consent: Remove consent string size restriction on publisher's origin when Storage API is not used. </li> <li>Store CID to localStorage on origin as backup</li> <li>Analytics: Visibility tracking to check element's size before using the intersectionRatio value from IntersectionObserver.</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/30" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-30.toggleClass(class='expanded'), scroll-analytics-30.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-38"> <aside class="-ai" id="scroll-runtime-38"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Mon Jul 06 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-runtime/issues/38" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <a href="https://github.com/ampproject/wg-runtime/issues/38" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-38.toggleClass(class='expanded'), scroll-runtime-38.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-27"> <aside class="-ai" id="scroll-analytics-27"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Mon Jul 06 2020</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-was-accomplished">What was accomplished</h3> <ul> <li>Fixed amp-analytics FID, LCP collection</li> <li>Investigated and Fixed IntersectionObserver polyfill issue in inabox</li> <li>Fixed scroll trigger issue</li> <li>Expanded <code><amp-story-consent></code> config support</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/27" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>Pause analytics trigger in <code><amp-next-page></code></li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/27" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-27.toggleClass(class='expanded'), scroll-analytics-27.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-39"> <aside class="-ai" id="scroll-runtime-39"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Thu Jul 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Merged PRs for validator to support amp-img SSR</li> <li>Code reviews for Bento, including Context APIs in AMP code</li> <li>Merged experiment to remove calcTaskTimeout (https://github.com/ampproject/amphtml/pull/28453/commits)</li> <li>Merged server experiment for compiling v0/extensions in strict mode (https://github.com/ampproject/amphtml/pull/28793) </li> <li>Merged cross-document navigation for AMP.goBack (https://github.com/ampproject/amphtml/pull/26585)</li> <li>Fixed too-small rootMargin vs. loadRect in “intersect-resources”</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <ul> <li>Kittens are cute</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/39" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Finishing amp-img SSR cache transforms</li> <li>Prototyping Bento "auto-envelope" pattern to support components in/out of AMP runtime</li> <li>Wrap up in-progress worker-dom feature work</li> <li>Lite binary for worker-dom (https://github.com/ampproject/worker-dom/pull/882)</li> <li>Protocol adapters (https://github.com/ampproject/amphtml/pull/29329)</li> <li>Continue investigating the ~1% regression in ad queries for "intersect-resources"</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/39" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-39.toggleClass(class='expanded'), scroll-runtime-39.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-28"> <aside class="-ai" id="scroll-analytics-28"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Thu Jul 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-was-accomplished">What was accomplished</h3> <ul> <li>Update <code><amp-story-consent></code> to support config in new format</li> <li><code><amp-consent></code> doc improvement (metaData, TCF support, promptUISrc, inline postPromptUI)</li> <li><code><amp-consent></code> UI lightbox mode when initial height is greater than 80vh. (<a href="https://github.com/ampproject/amphtml/pull/29204">#29204</a>)</li> <li>Decided to keep analytics service running and maintain states when the ampdoc becomes inactive. (This means the lower level timer trigger will continue to fire unless there's a <code>stopSpec</code>)</li> <li>All 3rd background cross origin iframe usage in AMP will NOT be allowed w/o special approval. (<a href="https://github.com/ampproject/amphtml/issues/28471">#28471</a>)</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/28" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>SESSION_ID to support a session id that expires after a defined time</li> <li>Support tracking visibility of non AMP elements</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/28" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-28.toggleClass(class='expanded'), scroll-analytics-28.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-37"> <amp-position-observer intersection-ratios=".95" target="q2-2020" on="enter:anim-q2-2020.start" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <aside class="-ar" id="q2-2020"> <h3>Q2 2020</h3> </aside> <aside class="-ai" id="scroll-runtime-37"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Tue Jun 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-runtime/issues/37" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <a href="https://github.com/ampproject/wg-runtime/issues/37" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-37.toggleClass(class='expanded'), scroll-runtime-37.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-26"> <aside class="-ai" id="scroll-analytics-26"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Tue Jun 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-was-accomplished">What was accomplished</h3> <ul> <li>Fixit week 9 closed issues</li> <li>Consent Metadata PRs landed. Introduced <code>getConsentMetadata</code> to get TCF v2 related consent meta data including consent string type, gdprApplies and additional consent string info.</li> <li>Consent UI Lightbox design </li> <li>Enabled <code>data-vars</code> attribute for analytics events by default</li> <li>Further expanded the consent info storage limit to 1200 in chars</li> <li>Add <code>expireCache</code> support to amp-consent reprompt action</li> <li>Deprecated and clean up the analytics mApp support. </li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/26" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>OpenJS World Summit</li> <li>Consent UI lightbox mode API Design</li> <li>InOb Polyfill usage in analytics investigation</li> <li>Expand iframe-transport feature to all analytics vendors (still under discussion)</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/26" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-26.toggleClass(class='expanded'), scroll-analytics-26.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-37"> <aside class="-ai" id="scroll-infra-37"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Sat May 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Deployed <a href="https://amp-error-issue-bot.uc.r.appspot.com/">Error Monitor UI</a> (in beta)</li> <li><code>gulp</code> tasks can now programmatically build runtime during tests (#28326)</li> <li>Established grouping & reviewer assignment for Renovate PRs (#28322)</li> <li>Investigated / debugged disconnection failures due to Sauce Labs (#28343)</li> <li>Added performance tests to Travis CI (#28148)</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/37" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Move generation of release binaries to open source via <code>gulp release</code> </li> <li>Automatically create issues for commonly seen runtime errors</li> <li>Add a presubmit check for <code>renovate</code> configuration changes</li> <li>Test / deploy new version of <code>karma-sauce-launcher</code></li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/37" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-37.toggleClass(class='expanded'), scroll-infra-37.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-36"> <aside class="-ai" id="scroll-runtime-36"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Sat May 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="recap">Recap</h2> <p>Justin  * Opened PR for deferring buildCallback  * Doesn't affect LCP as much as we thought, maybe it'll help FID  * PR Reviews </p> <p>Jake  * Submitted a fix so that we don’t send documentHeight until it is ready. Potentially two bugs with one stone: (b/154603596, b/143078110).  * In-progress  * New metrics eer/ser (https://github.com/ampproject/amphtml/pull/28401)  * Improved e2e viewer tests (https://github.com/ampproject/amphtml/pull/28531).  * Adding runtime pages to the gulp performance (https://github.com/ampproject/amphtml/pull/28503).  * Protocol adapters worker-dom implementation (https://github.com/ampproject/worker-dom/pull/850). </p> <p>Will  * intersect-resources  * Candidate fix for idle render merged, pending ads metrics </p> <h2 id="learned">Learned</h2> <ul> <li>Use DCL to normalize metrics like LCP   </li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/36" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="next">Next</h2> <p>Justin  * Finish buildCallback PR  * Finally write doc about WorkerDOM/amp-bind in same-origin iframe (with sync messaging)  * Look into removing Owners System, replace with InOb polyfill </p> <p>Jake  * IE11 Minimum support explorations  * Continue many in-progress PRs with the goal of eventually optimizing  * Load rect  * Resource loading prioritization </p> <p>Will  * intersect-resources  * Prod rollout and manual QA test plan</p> <a href="https://github.com/ampproject/wg-runtime/issues/36" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-36.toggleClass(class='expanded'), scroll-runtime-36.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-24"> <aside class="-ai" id="scroll-analytics-24"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Sat May 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-was-accomplished">What was accomplished</h3> <ul> <li>Turned on <code>analytics-chunks</code> experiment in canary. </li> <li>Expanded consent string size limit to 1kb</li> <li>Decided to introduce Consent UI new lightbox mode <a href="https://docs.google.com/document/d/1T-R1dAv1YwSfBnTh5os710qT2vQ17ssv5-cky06alMw/edit">docs</a></li> <li>Decided NOT to proceed with the Standalone analytics solution for AMPHTML Ad for now. </li> <li>Decided keep the existing linker coverage. Will NOT auto launch linker to all browsers for now.</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/24" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>Consent metadata & Consent Vendor API redesign</li> <li>Consent UI lightbox mode</li> <li>Next step on granular consent support</li> <li>Grouping target elements for CustomEvent & StoryEvent <a href="https://github.com/ampproject/amphtml/issues/28348">Issue</a></li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/24" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-24.toggleClass(class='expanded'), scroll-analytics-24.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-35"> <aside class="-ai" id="scroll-runtime-35"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Fri May 01 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="recap">Recap</h2> <ul> <li>Justin <ul> <li>Auto link stacktrace frames to code in bug reports </li> <li>Added support for module/nomodule script pairs </li> <li>Fixed devAssert/userAssert for closure's type narrowing </li> <li>Persistent browserify caching! </li> <li>Helped remove AmpPass, various fixes to infra builds </li> <li>Added linting to chai assertions, fixed tests </li> <li>Added a few missing unresolved element CSS styles </li> <li>Made blurry-image non-interactable when it's <code>opacity: 0</code>. </li> <li>Fixed CEv1 in Safari 9 and Yandex </li> <li>Made <code>getMode().test</code> and friends DCE in prod (again) </li> </ul> </li> <li>Jake <ul> <li>documentHeight bugfix, unit test, and integration test. </li> <li>amp-script worker exceptions caught as user errors instead of dev errors.  </li> <li>Protocol Adapters unit tests and manual e2e test. </li> <li>Small improvements to the e2e testing flow (--extensions and --fast options) </li> </ul> </li> <li>Will <ul> <li>“intersect-resources” experiment <ul> <li>Fixed ads regression </li> <li>Looks like 1-2% LCP, 5-6% FID improvement </li> </ul> </li> <li>Reviewed to-date progress on code mauve in CSI data </li> </ul> </li> </ul> <h2 id="learned">Learned</h2> <ul> <li>Persistent module state in unit tests is tricky </li> <li>Old browsers still get a small (but noticeable) percentage in traffic <ul> <li>Does this effectively constrain our true browser support set? </li> </ul> </li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/35" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="next">Next</h2> <ul> <li>Justin <ul> <li>Hoping to add persistent file transform cache to Babel </li> <li>Deferring buildCallback (should be easier, now that I've looked into it) <ul> <li>See if any elements expect really early buildCallback </li> </ul> </li> </ul> </li> <li>Jake <ul> <li>New metric for in-viewport but not rendered latency </li> <li>worker-dom Protocol Adapters PRs </li> <li>IE11 Minimum support explorations </li> </ul> </li> <li>Will <ul> <li>Figure out and run a manual QA plan and start prod rollout 🤞</li> </ul> </li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/35" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-35.toggleClass(class='expanded'), scroll-runtime-35.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-23"> <aside class="-ai" id="scroll-analytics-23"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Fri May 01 2020</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-was-accomplished">What was accomplished</h3> <ul> <li>Performance Improvement</li> <li>Running <code>analytics-chunks</code> experiment in canary. (Exclude AMPHTML ad)</li> <li> <p>Two existing errors surfaced due to the above experiment <a href="https://github.com/ampproject/amphtml/issues/28264">Issue</a> <a href="https://github.com/ampproject/amphtml/issues/28220">Issue</a></p> </li> <li> <p>Consent</p> </li> <li>Discussion on allowing consent dialog to take over fullScreen on page load <a href="https://github.com/ampproject/amphtml/issues/26229#issuecomment-625429562">Issue</a></li> <li>Add metadata on top of the raw consent string. <a href="https://github.com/ampproject/amphtml/pull/28187">PR</a></li> <li>Fixed consent dialog UI when the navigation bar is displayed. <a href="https://github.com/ampproject/amphtml/issues/28133">Issue</a></li> <li>Agreed on expanding raw consent string storage limit up to 1kb.<ul> <li>The AMP team will monitor the "storage size exceed limit" error rate. </li> <li>Update from Google AMP Viewer: open to expand the size limit to each domain, if it's the current limit is too small for the TCF V2 consent string. </li> </ul> </li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/23" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>Store consent metadata & pass metadata to vendors</li> <li>Standalone analytics solution for AMPHTML Ad. Looking for early thoughts and ideas! <a href="https://github.com/ampproject/amphtml/pull/28247">Draft PR</a> <a href="https://github.com/ampproject/amphtml/pull/28155">Draft PR</a>.</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/23" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-23.toggleClass(class='expanded'), scroll-analytics-23.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="bento-58"> <aside class="-ai" id="scroll-bento-58"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #45184B"></span> <div class="-al"> <h4 class="-ac">Bento</h4> <span class="-ah">Status Update Mon Apr 06 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished-🍱-✅">What was accomplished 🍱 ✅</h2> <ul> <li><code>amp-render</code> bindable src PR merged</li> <li>Collaboration with caching team on validator changes for developer preview components (still under experiment)</li> <li>Storybook upgraded to version 6</li> <li>Investigating a visual diff test that outputs CLS changes</li> <li>Discussion with bento.dev and legal for naming</li> <li>Reviewing element that may cause issues for existing / future bento migrations</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/58" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next-⏩">What's next ⏩</h2> <ul> <li>Remove existing implementation of display locking per changes to chromium team's support</li> <li>Working with infra 👋 🏗️ to release npm binaries</li> <li>Validate all developer preview components (still under experiment)</li> <li><code>amp-sidebar</code> toolbar feature in AMP mode</li> <li><code>amp-render</code> support for <code>amp-script</code> protocol and <code>placeholder</code></li> <li><code>amp-twitter</code> ongoing work</li> <li>Tune in for shadow DOM demo in today's deep dive</li> </ul> <a href="https://github.com/ampproject/wg-bento/issues/58" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:bento-58.toggleClass(class='expanded'), scroll-bento-58.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-34"> <aside class="-ai" id="scroll-runtime-34"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Thu Apr 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="recap">Recap</h2> <ul> <li>Justin <ul> <li>Fixed CEv1 in IE 11, again </li> <li>Fixed integration test in IE11, added simple amp-img test </li> <li>Opened PR to use localName/tagName based on whether using uppercase/lowercase </li> <li>Quick <code>Promise.resolve()</code> transform to share instance </li> <li>Banning newer ES features, removingPromise.p.finally use </li> </ul> </li> <li>Jake <ul> <li>Mauve related <ul> <li>Removed force option from toggleLoading. Afterwards: fixed bugs it caused (gh/27508, gh/27905) </li> <li>Removed unnecessary measures from the toggleLoading calls in hide() and the video-player (gh/27730, gh/27654, gh/27760, ) </li> </ul> </li> <li>Other <ul> <li>Implemented draft of protocol adapter support in worker-dom (gh/worker-dom/850) </li> <li>Found/fixed an iOS bug where we were missing a needed measure (gh/27729) </li> <li>amp-script: improved illegal mutation messaging (gh/27834) </li> <li>Added [data-tweetid] to the validator (gh/27787) </li> </ul> </li> </ul> </li> <li>Will <ul> <li>Finished IntersectionObserver test plan, fixed a few more edge cases, and enabled in canary (4/28) </li> <li>Wrapped up some email-related tasks in amp-list </li> <li>Found documentHeight/premature remeasure bug </li> </ul> </li> </ul> <h2 id="learned">Learned</h2> <ul> <li>We need an integration test for documentHeight for email (do we have any for other viewer messages?) </li> <li>Closure's Conformance config won't ban prototype accesses with BANNED_NAME </li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/34" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="next">Next</h2> <ul> <li>Justin <ul> <li>Finish connectedCallback PR <ul> <li>Reduce dom mutations </li> <li>Defer buildCallback </li> </ul> </li> </ul> </li> <li>Jake <ul> <li>Mauve <ul> <li>Fix documentHeight bug </li> <li>Runtime perf test pages </li> </ul> </li> <li>Other <ul> <li>Protocol adapters </li> </ul> </li> <li>Discuss: intern/step </li> </ul> </li> <li>Will <ul> <li>Try out IntersectionObserver in canary</li> </ul> </li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/34" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-34.toggleClass(class='expanded'), scroll-runtime-34.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-22"> <aside class="-ai" id="scroll-analytics-22"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Thu Apr 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-was-accomplished">What was accomplished</h3> <ul> <li>amp-geo</li> <li>Landed <code>preset-us-ca</code> support</li> <li>self hosting amp-geo API supports subdivision</li> <li>Performance improvement </li> <li>Split analytics initialization into chunks. (need to run 'analytics-chunks' experiment with AMPHTML ads first)</li> <li>Added analytics request handler to performance test to find potential delay on pageview delay </li> <li>Created test pages array </li> <li>Consent</li> <li>Fix flaky e2e tests</li> <li>Improved vendor facing docs</li> <li>PRs on passing TCF required <code>gdprApplies</code> variable, and consent string type</li> <li>Allowed fullScreen consent dialog when user open it via the <code>postPromptUI</code> button</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/22" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>Plan to launch Linker to all browsers (still under discussion)</li> <li>AMP Consent TCF v2 related features support</li> <li>Test and launch <code>analytics-chunks</code> experiment</li> <li>Visibility trigger to support non-AMP element</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/22" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-22.toggleClass(class='expanded'), scroll-analytics-22.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-33"> <aside class="-ai" id="scroll-runtime-33"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Wed Apr 01 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>First <code>PreactBaseElement</code> was merged!</li> <li>Minimal CEv1 Polyfill launched</li> <li>Work on IntersectionObserver based Resources, now enabled in experimental build</li> <li>Updated enabling development mode for amp-script</li> <li>amp-state can now be the source for an amp-list</li> <li>Using <code>performance.now</code> for metrics deltas</li> <li>DomPurify is now <strong>much</strong> faster for pages that have multiple amp-mustache templates</li> <li>Caching amp-access evaluations, for faster evaluations</li> <li>Fixed sourcemaps, multiple times.</li> <li>Fixed iOS scrolling issues</li> <li>Removed remeasure from toggleLoading</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <ul> <li>The venerable 2015 MBP is slowly showing its age…</li> <li>Verify Resource prototypes on real pages</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/33" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Delaying <code>BaseElement</code> construction until <code>connectedCallback</code></li> <li>Speeding/prioritizing <code>connectedCallback</code>/<code>buildCallback</code></li> <li>Protocol adapters for remote data</li> <li>InOb verification and fixes</li> <li>More Perf work!</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/33" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-33.toggleClass(class='expanded'), scroll-runtime-33.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-32"> <aside class="-ai" id="scroll-runtime-32"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Wed Apr 01 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="recap">Recap</h2> <ul> <li>Justin <ul> <li>TC39 </li> <li>Reviewed with Babel minifier transforms </li> <li>Fixing sourcemaps (again) </li> <li>Opened PR to delay constructing BaseElement construct until connectedCallback </li> </ul> </li> <li>Jake <ul> <li>optimization: removed remeasure from toggleLoading (gh/27482) </li> <li>refactor: slightly cleaned up toggleLoading flow (gh/27527) </li> <li>more toggleLoading changes in-flight </li> </ul> </li> <li>Will <ul> <li>IntersectionObserver testing & edge cases </li> <li>Other stuff </li> </ul> </li> </ul> <h2 id="learned">Learned</h2> <ul> <li>Justin needs to get a new computer </li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/32" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="next">Next</h2> <ul> <li>Justin <ul> <li>Land delaying BaseElement construction to connectedCallback </li> <li>Make connectedCallback less expensive  </li> </ul> </li> <li>Jake <ul> <li>Complete inflight changes to toggleLoading </li> <li>Create unit tests for <code>loader.js</code> and <code>amp-loader.js</code> </li> <li>Protocol adapters </li> <li>Performance <ul> <li>Skip amp-bind tree walking </li> <li>Reduce cost of reparenting </li> <li>Prioritize layout of in-viewport elements </li> </ul> </li> </ul> </li> <li>Will <ul> <li>Finish testing & enable IntersectionObserver in canary</li> </ul> </li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/32" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-32.toggleClass(class='expanded'), scroll-runtime-32.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-21"> <aside class="-ai" id="scroll-analytics-21"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Wed Apr 01 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Opened PR to for gulp performance task to test locally hosted websites</li> <li>Fixed bug with analytics variable expansion handling null</li> <li>Worked on TCF v2 <code>gdprApplies</code> field for CMPs and publishers in amp-consent</li> <li>Allowed one tracking iframe per AMP document</li> <li>Support US-CA detection in <code><amp-geo></code> via <code>preset-us-ca</code></li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/21" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Continue adding support for <code>gdprApplies</code></li> <li>Land performance task PR</li> <li>Merge inline and vendor config server side</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/21" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-21.toggleClass(class='expanded'), scroll-analytics-21.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-52"> <aside class="-ai" id="scroll-monetization-52"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Wed Apr 01 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Amp monetization</strong> - Experiment for adding <code>type=module crossorigin=anonymous</code> on Google ready to be launched - Investigation of no-signing integration failures</p> <p><strong>Story ads</strong> - Fix story-ad-click regression - Design for auto-advance experiment - Monitoring placement change results</p> <a href="https://github.com/ampproject/wg-monetization/issues/52" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <p><strong>Amp monetization</strong> - No signing cleanup - Sticky ad CSS experiment follow-up</p> <p><strong>Story ads</strong> - Launch auto advance experiment - Animation in x-domain iframes</p> <a href="https://github.com/ampproject/wg-monetization/issues/52" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-52.toggleClass(class='expanded'), scroll-monetization-52.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="amp4email-16"> <amp-position-observer intersection-ratios=".95" target="q1-2020" on="enter:anim-q1-2020.start" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <aside class="-ar" id="q1-2020"> <h3>Q1 2020</h3> </aside> <aside class="-ai" id="scroll-amp4email-16"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #A6E22E"></span> <div class="-al"> <h4 class="-ac">AMP for Email</h4> <span class="-ah">Status Update Wed Mar 04 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="highlights">Highlights</h2> <ul> <li>A lot of consensus on standardization efforts</li> </ul> <h2 id="wg-meeting-notes-(12/13,-1/10,-2/13)">WG Meeting Notes (12/13, 1/10, 2/13)</h2> <ul> <li>Unified sender registration form still in review across providers</li> <li>Consensus on allowing CSS attribute selectors in spec</li> <li>Consensus on banning <code>AMP-Redirect-To</code> feature in <code>amp-form</code></li> <li>Consensus on standardizing <code>meta</code>-based whitelists (https://github.com/ampproject/amphtml/issues/27094)</li> <li>Consensus on allowing <code>input[type=button]</code> in spec, links with <code>tel:</code> URI scheme</li> <li>Reviewed process <a href="https://docs.google.com/document/d/1OEBoJsKe1eBxQZXX1nZVJommeyuw8kMnd7wkUHCuO2E/edit">proposal</a> for incremental adoption of new AMP components</li> <li>Discussed optional enforcement of email CSS rules in validator</li> <li>Discussed standardizing enforcement of DMARC</li> <li>Discussed standardizing email "hyper-collapsing"</li> <li>Discussed standardization of MIME tree corner cases</li> <li>Continued reviewing new email auth proposal</li> <li>Created new "AMP for Email Ecosystem" <a href="https://groups.google.com/forum/#!forum/ampforemail-ecosystem">group</a> and <a href="https://app.slack.com/client/T0ADHJGD6/GQFP7LR8W">Slack channel</a></li> </ul> <a href="https://github.com/ampproject/wg-amp4email/issues/16" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="focus-areas">Focus areas</h2> <ul> <li>Standardizing AMP for email behavior across providers by using AMP4EMAIL spec as single source of truth</li> </ul> <a href="https://github.com/ampproject/wg-amp4email/issues/16" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:amp4email-16.toggleClass(class='expanded'), scroll-amp4email-16.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-31"> <aside class="-ai" id="scroll-runtime-31"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Tue Mar 03 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-runtime/issues/31" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <a href="https://github.com/ampproject/wg-runtime/issues/31" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-31.toggleClass(class='expanded'), scroll-runtime-31.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-20"> <aside class="-ai" id="scroll-analytics-20"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Tue Mar 03 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Enhanced gulp performance task to intercept and time requests based upon different team needs (also helps with pinpointing regressions)</li> <li>Launch visibility trigger multi-selector capabilities to config size in amp-analytics </li> <li>Decided to chunk the analytics initialization by triggers to reduce long tasks</li> <li>More US-CA support work on server</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/20" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Monitor analytics request delay using performance task on master for noise and evaluate it's effectiveness </li> <li>QuerySelectorAll for visibility trigger </li> <li>TCF v2 <code>gdprApplies</code> field for CMPs and publishers in amp-consent</li> <li>analytics for ad design</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/20" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-20.toggleClass(class='expanded'), scroll-analytics-20.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-50"> <aside class="-ai" id="scroll-monetization-50"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Tue Mar 03 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>AMP Monetization</strong> - Vendor splitting and ES module code 100% complete, experiment on - Discussed with Greg the technical routes of setting up client side experiments on Google AMP viewer, design doc TBD - IMA video not getting the canonical URL causing ad revenue loss: Coordinated a fix on the IMA SDK first - Web interstitial ads design WIP - Fixed bug in no singing around body attributes and restart experiment. - Fixed bug setting extension versions in template based ads.</p> <p><strong>Story Ads</strong> - Finished refactoring of story ads to isolate placement logic. - Started new experiment to test placement in shorter stories</p> <a href="https://github.com/ampproject/wg-monetization/issues/50" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what-is-next">What is next</h2> <p><strong>AMP Monetization</strong> - Notifying ad vendors to test the vendor splitting - Evaluate vendor splitting outcome - Top sticky ad implementation - IMA video RTC design</p> <p><strong>Story ads</strong> - Set up auto advancing experiment - Placement design review</p> <a href="https://github.com/ampproject/wg-monetization/issues/50" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-50.toggleClass(class='expanded'), scroll-monetization-50.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-29"> <aside class="-ai" id="scroll-runtime-29"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Mon Mar 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-runtime/issues/29" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <a href="https://github.com/ampproject/wg-runtime/issues/29" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-29.toggleClass(class='expanded'), scroll-runtime-29.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-17"> <aside class="-ai" id="scroll-analytics-17"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Mon Mar 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-was-accomplished">What was accomplished</h3> <ul> <li>ANALYTICS_VENDOR_SPLIT Clean up is done. Vendors need to submit .json file instead of .js file in the future</li> <li>Consent String size limit was increased from 150 bytes to 200 bytes. Future increase is still under discussion</li> <li><code><amp-geo></code> falls back to <code>geoApi</code> when geo hot patch is not available. (e.g. self hosting)</li> <li>Visibility trigger improvements for <code><amp-analytics></code>: multi-selector, querySelectorAll, and non-amp elements</li> <li><code><amp-consent></code> UX and a11y improvements rolled out</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/17" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>Benchmark individual features and heavy operations performance</li> <li>Explore webworker solution for heavy operations</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/17" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-17.toggleClass(class='expanded'), scroll-analytics-17.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-30"> <aside class="-ai" id="scroll-runtime-30"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Sun Mar 01 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-runtime/issues/30" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <a href="https://github.com/ampproject/wg-runtime/issues/30" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-30.toggleClass(class='expanded'), scroll-runtime-30.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-19"> <aside class="-ai" id="scroll-analytics-19"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Sun Mar 01 2020</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-was-accomplished">What was accomplished</h3> <ul> <li>Benchmark <code><amp-analytics></code> performance and pageView delay</li> <li>Use existing performance testing framework to also measure request delay. </li> <li>Explore solutions to reduce analytics related long tasks. (chunk, worker)</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/19" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li><code><amp-consent></code> <code>gdprApplies</code> field</li> <li>Continue work to reduce analytics related long tasks</li> <li>Reduce <code><amp-analytics></code> pageView delay. Some proposals include: include vendor predefined config inline, introduce a lite component for ads.</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/19" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-19.toggleClass(class='expanded'), scroll-analytics-19.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-25"> <aside class="-ai" id="scroll-infra-25"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Mon Feb 03 2020</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-we-did">What we did</h3> <ul> <li>Updated amp.dev <a href="https://amp.dev/documentation/guides-and-tutorials/learn/spec/release-schedule/">release schedule</a> page</li> <li>Release tagging is live (<code>PR Use: In Stable / Beta / Experimental</code>)</li> <li>Updated cherry-pick template with new release channel names</li> <li>Added a way to build only the core runtime via <code>gulp build | dist | watch --core_runtime_only</code></li> <li>Clarified process for adding <code>amphtml</code> dependencies using <code>yarn</code></li> <li>Triaged backlog of infrastructure issues</li> <li>Renaming <code>AMP_CANARY</code> cookie to <code>__Host-AMP_OPT_IN</code></li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/25" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>Default minified build (<code>gulp dist</code>) will now add <code>AMP_CONFIG</code> to runtime files</li> <li>Performance tests as part of CI / release workflow</li> <li>Make LTS and nightly channel widely available</li> <li>Take steps to reduce CI flakiness (sauce labs, percy)</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/25" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-25.toggleClass(class='expanded'), scroll-infra-25.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-28"> <aside class="-ai" id="scroll-runtime-28"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Mon Feb 03 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-runtime/issues/28" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <a href="https://github.com/ampproject/wg-runtime/issues/28" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-28.toggleClass(class='expanded'), scroll-runtime-28.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-16"> <aside class="-ai" id="scroll-analytics-16"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Mon Feb 03 2020</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-was-accomplished">What was accomplished</h3> <ul> <li><code><amp-consent></code> a11y redesign implementation</li> <li><code><amp-consent>``enterFullScreen</code> API is now only allowed after user interaction</li> <li><code><amp-consent></code> supports new API for CMPs to collect error messages</li> <li>Design proposal to have <code><amp-geo></code> detect California in the format of ISO 3166-2 code</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/16" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>Fully launch the <code><amp-consent></code> UI enhancement including the tasks above (now protected by experimental flag)</li> <li>Patch ISO 3166-2 code to <code>amp-geo-0.1.js</code></li> <li>Allow <code><amp-geo></code> to fallback to fetch geo location from a remote endpoint. (Discussion from #25873)</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/16" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-16.toggleClass(class='expanded'), scroll-analytics-16.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="viewers-3"> <aside class="-ai" id="scroll-viewers-3"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FF7272"></span> <div class="-al"> <h4 class="-ac">Viewers</h4> <span class="-ah">Status Update Sat Feb 01 2020</span> </div> <div class="-ad"> <div class="-av"> <h1 id="what-was-accomplished">What was accomplished</h1> <ul> <li>@newmuis wrote an <a href="https://github.com/ampproject/amphtml/issues/24539#issuecomment-546399932">I2I for the AMP Story Player</a> which is independent from the <a href="https://github.com/ampproject/amp-viewer">amp-viewer project</a></li> <li>It has a narrower scope than the existing player so it was decided to start from scratch.</li> <li>@Enriqe is in progress of implementing the feature.</li> </ul> <a href="https://github.com/ampproject/wg-viewers/issues/3" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <a href="https://github.com/ampproject/wg-viewers/issues/3" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:viewers-3.toggleClass(class='expanded'), scroll-viewers-3.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="monetization-46"> <aside class="-ai" id="scroll-monetization-46"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #005AF0"></span> <div class="-al"> <h4 class="-ac">Monetization</h4> <span class="-ah">Status Update Sat Feb 01 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>AMP Monetization</strong> - Merged a few prerequisites for amp-ad 3p vendor splitting, building vendor-specific integration Javascript files - FIE element eager building is ready to launch - Sticky ad through amp-ad merged in - PageEx + AMP ads workshop</p> <p><strong>Story Ads</strong> - Story ads placement design - Bug where desktop CTD ads are broken at certain window sizes</p> <a href="https://github.com/ampproject/wg-monetization/issues/46" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what-is-next">What is next</h2> <p><strong>AMP Monetization</strong> - Amp-ad 3p vendor splitting (I2I forthcoming) - Top sticky ad (https://github.com/ampproject/amphtml/issues/31513) - Working with Kargo to provide a reference implementation of certain new ad formats - Ship eager building for inabox - One more pass at no signing optimizations</p> <p><strong>Story ads</strong> - Encapsulate logic for placement algorithm - Start new algorithm implementation</p> <a href="https://github.com/ampproject/wg-monetization/issues/46" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:monetization-46.toggleClass(class='expanded'), scroll-monetization-46.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-22"> <aside class="-ai" id="scroll-infra-22"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Mon Jan 06 2020</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-we-did">What we did</h3> <ul> <li>LTS: Updated validator and other parts to support new release type</li> <li>GH releases are now auto-published</li> <li>WIP: Updates to release schedule</li> <li>New cherry picking section of release dashboard</li> <li>Network logging for E2E tests</li> <li>Added coverage instrumentation for unminified builds</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/22" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>Wrap up docs / comms for LTS</li> <li>Improve changelog creation</li> <li>Network logging API for E2E tests</li> <li>Measure code coverage during integration tests</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/22" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-22.toggleClass(class='expanded'), scroll-infra-22.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-26"> <aside class="-ai" id="scroll-runtime-26"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Mon Jan 06 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-runtime/issues/26" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <a href="https://github.com/ampproject/wg-runtime/issues/26" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-26.toggleClass(class='expanded'), scroll-runtime-26.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-24"> <aside class="-ai" id="scroll-infra-24"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Thu Jan 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-we-did">What we did</h3> <ul> <li>Updated Release documentation</li> <li>Forbid iframe-ing experiments page to prevent clickjacking</li> <li>Release tagging works</li> <li>Updated / unflaked e2e tests with new selenium version</li> <li>Enforced JSDoc-based access controls in source code</li> <li>New <code>--core_runtime_only</code> flag for <code>gulp {build|watch|dist}</code></li> <li>Published Infra doc for OpenJS</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/24" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>Interactive visualization for release schedule/cadence</li> <li>Announce / monitor LTS launch</li> <li>Rename <code>AMP_CANARY</code> cookie to <code>__Host-AMP_OPT_IN</code></li> <li>Automate deployment of internal GitHub apps</li> <li>Refactor <code>gulp changelog</code></li> <li>Integrate perf tests into CI</li> <li>Fix Sauce Labs disconnects (with help from Karma & Sauce)</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/24" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-24.toggleClass(class='expanded'), scroll-infra-24.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-27"> <aside class="-ai" id="scroll-runtime-27"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Thu Jan 02 2020</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-runtime/issues/27" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <a href="https://github.com/ampproject/wg-runtime/issues/27" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-27.toggleClass(class='expanded'), scroll-runtime-27.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-21"> <amp-position-observer intersection-ratios=".95" target="q4-2019" on="enter:anim-q4-2019.start" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <aside class="-ar" id="q4-2019"> <h3>Q4 2019</h3> </aside> <aside class="-ai" id="scroll-infra-21"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Mon Dec 09 2019</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-we-did">What we did</h3> <ul> <li>Release names: <code>stable, beta, experimental, nightly, lts</code></li> <li>Design reviews for nightly and lts</li> <li>Opt-in cookie for arbitrary RTVs</li> <li>Fixed ~5k unit / integration tests that were using global sandbox</li> <li>Added support for checking bundle-size of all JS files</li> <li>Legacy bluebird promise cleanup</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/21" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>Deploy automated release tagger</li> <li>More work on LTS and nightly releases</li> <li>Validator changes to recognize LTS releases</li> <li>Network logging for E2E tests</li> <li>Enforce bundle-size check for JS files that opt in</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/21" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-21.toggleClass(class='expanded'), scroll-infra-21.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-25"> <aside class="-ai" id="scroll-runtime-25"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Mon Dec 09 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-runtime/issues/25" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <a href="https://github.com/ampproject/wg-runtime/issues/25" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-25.toggleClass(class='expanded'), scroll-runtime-25.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="amp4email-12"> <aside class="-ai" id="scroll-amp4email-12"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #A6E22E"></span> <div class="-al"> <h4 class="-ac">AMP for Email</h4> <span class="-ah">Status Update Wed Dec 04 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="highlights">Highlights</h2> <ul> <li>Held email mini-summit at <a href="https://amp.dev/events/amp-cs-2019">ACS 2019</a> in NYC</li> <li>Outlook.com launches AMP for Email to developer preview</li> <li>VerizonMedia merged an OSS Java implementation of the AMP validator</li> <li>Gmail rolls out AMP for Email to Android</li> </ul> <h2 id="wg-meeting-notes-(9/12,-10/17,-11/8)">WG Meeting Notes (9/12, 10/17, 11/8)</h2> <ul> <li>Working on unified sender registration process (shared form in review)</li> <li>Received feedback on proposed shared HTML/CSS whitelist standards</li> <li>Consensus on standardizing max email size (200KB), max template SSR size, etc. (#4)</li> <li>More discussion on "CORS for email" proposal (#7)</li> <li>New proposal for email sender authentication (ecosystem-friendly replacement for proxy assertion tokens)</li> <li>Discussed AMP validator versioning and mitigating version skew across providers</li> <li>Consensus on allowing limited CSS attribute selectors (e.g. useful for <code>amp-selector</code>)</li> <li>Proposed new component in AMP4EMAIL spec: <code>amp-autocomplete</code></li> <li>Self-hosting AMP JS and rollout patterns</li> <li>New outreach channels for email senders and ESPs</li> </ul> <a href="https://github.com/ampproject/wg-amp4email/issues/12" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="focus-areas">Focus areas</h2> <ul> <li>Standardizing AMP for email behavior across providers by using AMP4EMAIL spec as single source of truth</li> </ul> <a href="https://github.com/ampproject/wg-amp4email/issues/12" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:amp4email-12.toggleClass(class='expanded'), scroll-amp4email-12.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-20"> <aside class="-ai" id="scroll-infra-20"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Fri Nov 01 2019</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-we-did">What we did</h3> <ul> <li>OWNERS syntax check via API</li> <li>Eliminating use of global sinon</li> <li>Fixed breaks due to new Node LTS</li> <li>Owners bot GCE → GAE (with tree, teams, and syntax guide)</li> <li>Test infra for amp-github-apps</li> <li>Fixed npm security vulnerabilities </li> <li>Premium Travis VMs are live</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/20" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>Automate GitHub release creation and improve content</li> <li>Auto-label PRs on release</li> <li>Track bundle-size for extensions</li> <li>Automate node LTS upgrades</li> <li> <h2 id="upgrade-sinon-and-eliminate-the-use-of-global-sandbox">Upgrade sinon and eliminate the use of global sandbox</h2> </li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/20" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-20.toggleClass(class='expanded'), scroll-infra-20.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-23"> <aside class="-ai" id="scroll-runtime-23"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Fri Nov 01 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <h2 id="lessons-learned">Lessons learned</h2> <a href="https://github.com/ampproject/wg-runtime/issues/23" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <a href="https://github.com/ampproject/wg-runtime/issues/23" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-23.toggleClass(class='expanded'), scroll-runtime-23.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-17"> <aside class="-ai" id="scroll-infra-17"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Wed Oct 02 2019</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-we-did">What we did</h3> <ul> <li>New build-pipeline check for unknown dependencies</li> <li>Automating GitHub release publication (tracking release CLs)</li> <li>Owners Bot migrated to AppEngine w/ virtual repository</li> <li>Public-facing owners tree & status pages</li> <li>New style check for non-JS files (OWNERS, docs): <code>gulp prettify</code></li> <li>Lots of small documentation fixes</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/17" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>Make owners bot repo agnostic</li> <li>Travis check for OWNERS syntax</li> <li>First steps on monthly release channels</li> <li>Automate GitHub release creation and improve content</li> <li>Track bundle-size for extensions</li> <li>Adopt new bundle-size checker</li> <li>Un-break <code>amphtml-validator</code> for users of older Node versions</li> <li>Automate node upgrades across all <code>package.json</code> files</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/17" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-17.toggleClass(class='expanded'), scroll-infra-17.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-22"> <aside class="-ai" id="scroll-runtime-22"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Wed Oct 02 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Custom Elements v1 shipped</li> <li>With IE11 cherry-pick</li> <li>CL out for non-polyfill in supported browsers</li> <li>Resources now invalidates children of Scroll boxes</li> <li>Goal after of Layers failure</li> <li>CL for removing query params before navigate (ITP 2.3)</li> <li>CLs for Action Trust</li> <li>Actions should propagate the trust they receive</li> <li>Breaking async cycles</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <ul> <li>IE11's HTMLElement class does not extend from Function</li> <li>So, HTMLElement.call doesn't exist</li> <li>Errors in cross-origin scripts aren't reported, still.</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/22" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>@choumx away at summit & training</li> <li>@jridgewell on release duty</li> <li>Adding crossorigin=anonymous to AMP scripts</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/22" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-22.toggleClass(class='expanded'), scroll-runtime-22.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="caching-12"> <aside class="-ai" id="scroll-caching-12"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #EC6600"></span> <div class="-al"> <h4 class="-ac">Caching</h4> <span class="-ah">Status Update Wed Oct 02 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished?">What was accomplished?</h2> <ul> <li>Removed error categories in AMP Validator, and rev’d to Node 12.</li> <li>Above caused some incompatibility issues, which have now been resolved.</li> <li>Added <code>SameSite=none</code> to AMP CID cookie.</li> </ul> <a href="https://github.com/ampproject/wg-caching/issues/12" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <a href="https://github.com/ampproject/wg-caching/issues/12" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:caching-12.toggleClass(class='expanded'), scroll-caching-12.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-16"> <aside class="-ai" id="scroll-infra-16"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Tue Oct 01 2019</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-we-did">What we did</h3> <ul> <li>Owners check is now blocking</li> <li>Enabled automatic reviewer assignment</li> <li>Added <code>bundle-size</code> support for arbitrary binaries / extensions</li> <li>Reorganized <code>build-system</code> and repo root directory for better code ownership boundaries</li> <li>Investigated ways to check owners file changes during CI</li> <li>Presented 2019 Infra highlights during contributor summit</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/16" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>Deploy <code>bundle-size</code> checks for a few non-<code>v0.js</code> files</li> <li>Investigate / fix missing PR-deploy button for some folks</li> <li>Add a CI check for <code>OWNERS</code> file formatting</li> <li>Follow up on open requests from contributor summit</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/16" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-16.toggleClass(class='expanded'), scroll-infra-16.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-21"> <aside class="-ai" id="scroll-runtime-21"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Tue Oct 01 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>AMP Contributor Summit</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <ul> <li>ACS Debrief</li> <li>Let’s improve documentation</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/21" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>📧Email</li> <li>Recursive XHR issue</li> <li>Unified sender registration</li> <li>SSR-dependent “documentHeight” message</li> <li>🍱React-based AMP components</li> <li>Launch plan</li> <li>⚙Runtime</li> <li>CSI migration design</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/21" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-21.toggleClass(class='expanded'), scroll-runtime-21.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-17"> <amp-position-observer intersection-ratios=".95" target="q3-2019" on="enter:anim-q3-2019.start" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <aside class="-ar" id="q3-2019"> <h3>Q3 2019</h3> </aside> <aside class="-ai" id="scroll-runtime-17"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Tue Sep 03 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>[WIP] React-based AMP components</li> <li>amp-script: amp-state [WIP], improved docs</li> <li>Fixed DOM clobbering of AMP globals</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/17" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>React-based AMP components</li> <li>amp-script + amp-state</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/17" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-17.toggleClass(class='expanded'), scroll-runtime-17.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="caching-11"> <aside class="-ai" id="scroll-caching-11"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #EC6600"></span> <div class="-al"> <h4 class="-ac">Caching</h4> <span class="-ah">Status Update Tue Sep 03 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished?">What was accomplished?</h2> <ul> <li>Prep for SXG Contributor Summit Talk next week</li> </ul> <a href="https://github.com/ampproject/wg-caching/issues/11" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <a href="https://github.com/ampproject/wg-caching/issues/11" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:caching-11.toggleClass(class='expanded'), scroll-caching-11.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-19"> <aside class="-ai" id="scroll-runtime-19"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Mon Sep 02 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Opt in for individual AMP experiments now uses LocalStorage instead of cookies.</li> <li>Tons o' work on amp-bind</li> <li>Perf improvements</li> <li>amp-script launched!</li> <li>Inline scripts support</li> <li>Canvas support</li> <li>LocalStorage support</li> <li>AMP setState support</li> <li>1-pass build work</li> <li>Concatenate and prune intermediate module dependencies into a single final JS file</li> <li>Fix sourcemaps</li> <li>Fixit week:</li> <li>Faster ads/analytics configuration parsing via <code>JSON.parse</code></li> <li>amp-list DOM diffing instead of <code>innerHTML</code></li> <li>Bento</li> <li>Exploring using React internally to simplify components</li> <li>Exploring how to wrap React in AMP and "Bento" modes</li> <li>Layers was disabled and removed</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/19" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>AMP Contributor Summit!</li> <li>Continuing Bento explorations</li> <li>Better support for AMP Emails</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/19" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-19.toggleClass(class='expanded'), scroll-runtime-19.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-14"> <aside class="-ai" id="scroll-infra-14"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Sun Sep 01 2019</span> </div> <div class="-ad"> <div class="-av"> <h3 id="what-we-did">What we did</h3> <ul> <li>Deployed owners bot after design review</li> <li>Owners is now a non-blocking check on Github</li> <li>Enabled brotli size tracking via bundle-size bot (not yet default)</li> <li>Lazy-build is default <code>gulp</code> mode (to disable: <code>--eager_build</code>)</li> <li>Re-wrote dev server as an in-process server</li> <li>Sauce Labs start / stop scripts supported on Linux and Mac OS</li> <li>Fixed bug that caused frequent Travis cache corruption</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/14" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>Owners bot: always / never notify owners, auto-assign reviewers, syntax checks</li> <li>Improve Travis greenness</li> <li>Release tooling (“is my PR in production?”)</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/14" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-14.toggleClass(class='expanded'), scroll-infra-14.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-18"> <aside class="-ai" id="scroll-runtime-18"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Sun Sep 01 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <a href="https://github.com/ampproject/wg-runtime/issues/18" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <a href="https://github.com/ampproject/wg-runtime/issues/18" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-18.toggleClass(class='expanded'), scroll-runtime-18.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="caching-10"> <aside class="-ai" id="scroll-caching-10"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #EC6600"></span> <div class="-al"> <h4 class="-ac">Caching</h4> <span class="-ah">Status Update Sun Sep 01 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished?">What was accomplished?</h2> <ul> <li>Convert amppkg from dep to go mod</li> <li>Validator verifies that template=”” matches a template id on the page</li> <li>Beginning work on ACME cert renewal in amppkg</li> <li>Welcome Allan Banaag to https://github.com/ampproject/wg-caching</li> <li><code><style amp-custom-length-check></code> special error in AMP Validator</li> </ul> <p>This update includes several previous weeks.</p> <a href="https://github.com/ampproject/wg-caching/issues/10" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <a href="https://github.com/ampproject/wg-caching/issues/10" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:caching-10.toggleClass(class='expanded'), scroll-caching-10.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="amp4email-9"> <aside class="-ai" id="scroll-amp4email-9"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #A6E22E"></span> <div class="-al"> <h4 class="-ac">AMP for Email</h4> <span class="-ah">Status Update Thu Aug 01 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="highlights">Highlights</h2> <ul> <li>Planning in-person meeting at <a href="https://amp.dev/events/amp-cs-2019">ACS 2019</a> in NYC</li> <li>Microsoft and VerizonMedia implementations still in progress</li> </ul> <h2 id="wg-meeting-notes-(6/14,-7/12,-8/9)">WG Meeting Notes (6/14, 7/12, 8/9)</h2> <ul> <li>Expanded wg-amp4email GitHub membership</li> <li>Progress on alignment across provider-specific HTML/CSS whitelists and AMP4EMAIL spec</li> <li>Consensus on deprecating proxy assertion tokens to avoid senders potentially only supporting large providers</li> <li>Documented <a href="https://amp.dev/documentation/guides-and-tutorials/contribute/email-viewer">AMP viewer implementation guidelines</a></li> <li>Consensus on approach for shared sender registration/whitelisting (with long-term goal of not having a sender whitelist at all)</li> <li>Discussions on a new CORS mechanism specifically for AMP4EMAIL (#7)</li> <li>Discussions on standardizing AMP MIME part expiry, max size, and max number of AMP elements (#4)</li> </ul> <a href="https://github.com/ampproject/wg-amp4email/issues/9" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="focus-areas">Focus areas</h2> <ul> <li>Adapting the AMP4EMAIL spec to avoid potential ecosystem fragmentation</li> </ul> <p>/cc @jasti</p> <a href="https://github.com/ampproject/wg-amp4email/issues/9" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:amp4email-9.toggleClass(class='expanded'), scroll-amp4email-9.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-16"> <aside class="-ai" id="scroll-runtime-16"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Thu Aug 01 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Fix-it</li> <li>Launch amp-script</li> <li><code>jsonConfiguration()</code></li> <li>amp-list: DOM diffing and error UI</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <ul> <li>Code branching on const private props are not DCE’d </li> </ul> <div class="-ta"><pre><span></span><code><span class="cm">/** @const */</span> <span class="k">this</span><span class="p">.</span><span class="nx">nope_</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">nope_</span><span class="p">)</span> <span class="p">{</span> <span class="nx">foo</span><span class="p">();</span> <span class="c1">// Still bundled.</span> <span class="p">}</span> </code></pre></div> <a href="https://github.com/ampproject/wg-runtime/issues/16" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>amp-script + amp-state</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/16" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-16.toggleClass(class='expanded'), scroll-runtime-16.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-11"> <aside class="-ai" id="scroll-analytics-11"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Thu Aug 01 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>Add <code>PAGE_VIEW_ID_64</code> support</li> <li>Add <code>AD_START</code> <code>AD_END</code> events in video analytics </li> <li>Analytics Linker: No longer decorate internal navigation</li> <li>Load analytics vendor's config lazily (currently running experiment)</li> <li>Resolves <code>NAV_TIMING</code> macro earlier depending on the performance timing signal</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/11" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li><code><amp-experiment></code> 1.0 implementation review</li> <li>Launch the improvement to load analytics vendor's config</li> <li>Launch & Document nested macro feature</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/11" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-11.toggleClass(class='expanded'), scroll-analytics-11.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-13"> <aside class="-ai" id="scroll-infra-13"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Mon Jul 08 2019</span> </div> <div class="-ad"> <div class="-av"> <h3 id="release-quality">Release quality</h3> <ul> <li>Initial version of PR deploy bot</li> <li>Fixed <code>amp-date-picker</code> bug, wrote post mortem</li> <li>Enabled dormant conformance checks for runtime code</li> </ul> <h3 id="developer-experience">Developer experience</h3> <ul> <li>Migrated CJS runtime deps to ESM</li> <li>Babel transforms for multipass</li> <li>Fixed babel global transform config</li> <li>Fixed <code>gulp watch</code> bug (cancel on compilation error)</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/13" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>More work on PR deploy bot</li> <li>Re-deploy owners bot with new reviewers assignment algorithm</li> <li>Generate externs for all typedefs found in 3p/ads/bind</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/13" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-13.toggleClass(class='expanded'), scroll-infra-13.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-10"> <aside class="-ai" id="scroll-analytics-10"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Mon Jul 08 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Issue triaging</strong> - Triaged 120 issues. Attached <code>component</code> labels. Closed 16 obsolete ones. Prioritized ~20 for fixit week.</p> <p><strong>Bug Fixes</strong> - Investigated a regression caused by [PR] (https://github.com/ampproject/amphtml/pull/22812). Cherrypicked a revert PR to inabox canary.</p> <p><strong>amp-experiment v2</strong> - support selecting multiple elements PR pending</p> <a href="https://github.com/ampproject/wg-analytics/issues/10" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what-is-next">What is next</h2> <ul> <li>Lazily load analytics vendor config</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/10" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-10.toggleClass(class='expanded'), scroll-analytics-10.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="runtime-15"> <aside class="-ai" id="scroll-runtime-15"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #09A600"></span> <div class="-al"> <h4 class="-ac">Runtime</h4> <span class="-ah">Status Update Tue Jul 02 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>amp-script: Local storage, better reference docs</li> <li>worker-dom: Unwrap author script, upgrade TS, bug fixes and code clean up</li> <li>1-pass: Source map compat for intermediate bundles</li> <li>AMP4EMAIL: Investigate mustache rules at runtime</li> <li>amp-bind: Fix bug in canary</li> <li>@jridgewell on release duty</li> </ul> <h2 id="lessons-learned">Lessons learned</h2> <ul> <li>Read APIs carefully for DOM traversal edge cases</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/15" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Launch amp-script</li> <li>amp-script: Actions/events as component interface</li> <li>Bento: Start design and prototyping for service decoupling</li> <li>AMP4EMAIL: Error UI for amp-list and DOM diffing</li> </ul> <a href="https://github.com/ampproject/wg-runtime/issues/15" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:runtime-15.toggleClass(class='expanded'), scroll-runtime-15.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="viewers-1"> <aside class="-ai" id="scroll-viewers-1"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #FF7272"></span> <div class="-al"> <h4 class="-ac">Viewers</h4> <span class="-ah">Status Update Mon Jul 01 2019</span> </div> <div class="-ad"> <div class="-av"> <h1 id="what-was-accomplished">What was accomplished</h1> <ul> <li>Published <a href="https://github.com/ampproject/amphtml/blob/master/extensions/amp-viewer-integration/amp-doc-viewer-api.md">AMP Viewer API Documentation</a></li> <li>Published <a href="https://github.com/ampproject/wg-amp4email">AMP for Email</a> specific viewer <a href="https://amp.dev/documentation/guides-and-tutorials/contribute/email-viewer/?format=email">documentation</a></li> </ul> <a href="https://github.com/ampproject/wg-viewers/issues/1" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <a href="https://github.com/ampproject/wg-viewers/issues/1" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:viewers-1.toggleClass(class='expanded'), scroll-viewers-1.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="infra-12"> <amp-position-observer intersection-ratios=".95" target="q2-2019" on="enter:anim-q2-2019.start" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <aside class="-ar" id="q2-2019"> <h3>Q2 2019</h3> </aside> <aside class="-ai" id="scroll-infra-12"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #00DCC0"></span> <div class="-al"> <h4 class="-ac">Infrastructure</h4> <span class="-ah">Status Update Sun Jun 02 2019</span> </div> <div class="-ad"> <div class="-av"> <h3 id="release-quality">Release quality</h3> <ul> <li>Fixed saucelabs safari 12.1 bug</li> <li>Run integration tests on IE 11</li> </ul> <h3 id="developer-experience">Developer experience</h3> <ul> <li>Refactor of <code>gulp test</code> into <code>gulp unit|integration|a4a</code></li> <li>WIP: Bot to deploy in-flight PR code for demo / testing (on-demand)</li> <li>Refactored / sped up unminified builds by 15%</li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/12" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h3 id="what's-next">What's next</h3> <ul> <li>Redeploy owners bot with new reviewers assignment algorithm</li> <li>Generate externs for all typedefs found in <code>3p/ads/bind</code></li> </ul> <a href="https://github.com/ampproject/wg-infra/issues/12" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:infra-12.toggleClass(class='expanded'), scroll-infra-12.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="caching-7"> <aside class="-ai" id="scroll-caching-7"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #EC6600"></span> <div class="-al"> <h4 class="-ac">Caching</h4> <span class="-ah">Status Update Sun Jun 02 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished?">What was accomplished?</h2> <ul> <li>Released amppkg v2.</li> <li>Fixed etag issue with AMP Packager’s certificates.</li> <li>Meta tag fix to transformers in AMP Cache, cease moving them all to head.</li> </ul> <a href="https://github.com/ampproject/wg-caching/issues/7" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <a href="https://github.com/ampproject/wg-caching/issues/7" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:caching-7.toggleClass(class='expanded'), scroll-caching-7.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-9"> <aside class="-ai" id="scroll-analytics-9"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Sun Jun 02 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>New Features</strong> - <code><amp-experiment></code> support mutating class attribute <a href="https://github.com/ampproject/amphtml/pull/22679">PR</a> - Introduce <code>requestOrigin</code> to <code><amp-analytics></code> requests config fields. <a href="https://github.com/ampproject/amphtml/issues/19759">Issue</a> - Introduce <code>$EQUALS</code> macro support in <code><amp-analytics></code> <a href="https://github.com/ampproject/amphtml/issues/22160">Issue</a> - Convert all Analytics vendor config from js file to json file. This is part of the effort to lazily load analytics vendor configs. - Change Analytics Linker's default behavior to decorate all subdomains - Introduce <code>$COOKIE</code> macro support in <code><amp-analytics></code> <a href="https://github.com/ampproject/amphtml/issues/22160">Issue</a> - Allow setting custom cookie expiration time when setting cookie with <code><amp-analytics></code>'s cookie config <a href="https://github.com/ampproject/amphtml/issues/22422">Issue</a></p> <p><strong>Bug Fixes</strong> - Fix regression where Analytics Linker decorate fragment url - Fix a race condition when resolving <code>performanceTiming.loadEventEnd</code> [PR] (https://github.com/ampproject/amphtml/pull/22812) - Fix race condition where <code>video-percentage-played</code> doesn't trigger <a href="https://github.com/ampproject/amphtml/issues/22701">Issue</a> - Fix nested macro expansion bug <a href="https://github.com/ampproject/amphtml/issues/20816">Issue</a></p> <a href="https://github.com/ampproject/wg-analytics/issues/9" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what-is-next">What is next</h2> <ul> <li><code><amp-experiment></code> v2 to support selecting multiple elements</li> <li><code><amp-experiment></code> v2 to support mutating <code>style</code> and <code>src</code> attribute</li> <li>Lazily load analytics vendor config</li> </ul> <a href="https://github.com/ampproject/wg-analytics/issues/9" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-9.toggleClass(class='expanded'), scroll-analytics-9.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="caching-6"> <aside class="-ai" id="scroll-caching-6"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #EC6600"></span> <div class="-al"> <h4 class="-ac">Caching</h4> <span class="-ah">Status Update Sat Jun 01 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished?">What was accomplished?</h2> <ul> <li>Restore dns-prefetch cache transformers; broken recently.</li> <li>Major changes to Email Validator to better match Gmail filtering rules.</li> <li>Javascript fix to implement the 1000 byte inline CSS limit.</li> <li>Fixed inner != outer <a href="https://github.com/ampproject/amppackager/issues/310">issue</a> in amppackager.</li> <li>WIP improving/defining amppkg release process</li> </ul> <a href="https://github.com/ampproject/wg-caching/issues/6" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <a href="https://github.com/ampproject/wg-caching/issues/6" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:caching-6.toggleClass(class='expanded'), scroll-caching-6.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="caching-5"> <aside class="-ai" id="scroll-caching-5"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #EC6600"></span> <div class="-al"> <h4 class="-ac">Caching</h4> <span class="-ah">Status Update Thu May 02 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished?">What was accomplished?</h2> <ul> <li>Basic image preloading in amppkg</li> </ul> <a href="https://github.com/ampproject/wg-caching/issues/5" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <a href="https://github.com/ampproject/wg-caching/issues/5" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:caching-5.toggleClass(class='expanded'), scroll-caching-5.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="amp4email-2"> <aside class="-ai" id="scroll-amp4email-2"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #A6E22E"></span> <div class="-al"> <h4 class="-ac">AMP for Email</h4> <span class="-ah">Status Update Wed May 01 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="highlights">Highlights</h2> <ul> <li>Launched in Gmail in March!</li> <li>Commitment from Microsoft, Yahoo, and Mail.ru</li> <li>AMP Conf '19: <a href="https://www.youtube.com/watch?v=hTd67bMGkNA&list=PLXTOW_XMsIDSY0USlzgoaIkRyPcHklrEl&index=24&t=0s">"AMP for Email: Pushing the boundaries of email with AMP"</a></li> <li>Early Gmail partner results are promising: 2x CTR for one, 60% higher CTR and 60% higher conversions for another.</li> </ul> <h2 id="wg-meeting-notes-(5/10)">WG Meeting Notes (5/10)</h2> <ul> <li>Shared goal: AMP4EMAIL spec is the source of truth for rendering compatibility in email providers</li> <li>Corollary: Shared sender tooling that works across providers</li> <li>Corollary: Migrating provider-specific whitelists (HTML/CSS) to AMP4EMAIL spec</li> <li>Implementation details of provider adoption e.g. integrating a production-grade AMP validator</li> <li>@ampproject/wg-caching is investigating open-sourcing internal C++ validator</li> <li>Discussed 3P authentication with <a href="https://developers.google.com/gmail/ampemail/authenticating-requests#proxy_assertion_tokens">proxy assertion tokens</a></li> <li>Discussed wg-amp4email GitHub membership</li> </ul> <a href="https://github.com/ampproject/wg-amp4email/issues/2" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="focus-areas">Focus areas</h2> <ul> <li>Cross-provider compatibility per AMP4EMAIL spec (above)</li> <li>Allowing more components in AMP4EMAIL e.g. amp-animation, amp-analytics</li> </ul> <p>/cc @jasti</p> <a href="https://github.com/ampproject/wg-amp4email/issues/2" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:amp4email-2.toggleClass(class='expanded'), scroll-amp4email-2.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-8"> <aside class="-ai" id="scroll-analytics-8"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Wed May 01 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>Fixit week</strong> - Added doc for Linker wildcard feature - Added amp-analytics integration tests for PWA - Fixing nest macro bug in var - Writing cookies to eTLD+1 to be consistent with CLIENT_ID - WIP amp-call-tracking bug</p> <p><strong>amp-experiment v2</strong> - Introducing mutation limit and config size limit</p> <a href="https://github.com/ampproject/wg-analytics/issues/8" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what-is-next">What is next</h2> <p><strong>amp-experiment v2</strong> - Working towards GA launch with Optimizely</p> <p><strong>Linker</strong> - Enable Linker for eTLD+1 by default</p> <a href="https://github.com/ampproject/wg-analytics/issues/8" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-8.toggleClass(class='expanded'), scroll-analytics-8.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-6"> <aside class="-ai" id="scroll-analytics-6"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Tue Apr 02 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>amp-experiment v2</strong> - Integrated with Action Network, had demo in AMP Conf</p> <a href="https://github.com/ampproject/wg-analytics/issues/6" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what-is-next">What is next</h2> <p><strong>amp-experiment v2</strong> - Working towards GA launch with Optimizely</p> <p><strong>ITP2.2</strong> - Evaluate impact </p> <p><strong>Bugs</strong> - Fix nested macro bug #20816 - amp-call-tracking in AdWords #20551</p> <a href="https://github.com/ampproject/wg-analytics/issues/6" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-6.toggleClass(class='expanded'), scroll-analytics-6.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-5"> <amp-position-observer intersection-ratios=".95" target="q1-2019" on="enter:anim-q1-2019.start" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <aside class="-ar" id="q1-2019"> <h3>Q1 2019</h3> </aside> <aside class="-ai" id="scroll-analytics-5"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Fri Mar 01 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>amp-experiment v2</strong> - Fixed a render-delaying service regression #21193</p> <p><strong>amp-analytics</strong> - a CSP friendly way for user to opt-out tracking WIP</p> <p><strong>Linker</strong> - Allow LINKER_PARAM to be used outside WIP</p> <a href="https://github.com/ampproject/wg-analytics/issues/5" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what-is-next">What is next</h2> <p><strong>amp-experiment v2</strong> - Version bump - Implement config parser - Security review</p> <p><strong>Linker</strong> - Allow LINKER_PARAM to be used outside cookie writer</p> <p><strong>amp-analytics</strong> - a CSP friendly way for user to opt-out tracking</p> <a href="https://github.com/ampproject/wg-analytics/issues/5" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-5.toggleClass(class='expanded'), scroll-analytics-5.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="analytics-4"> <aside class="-ai" id="scroll-analytics-4"> </aside> <span class="-as -an"></span> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #5500D7"></span> <div class="-al"> <h4 class="-ac">Analytics</h4> <span class="-ah">Status Update Sat Feb 02 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <p><strong>amp-experiment v2</strong> - bench mark for mutation operations. decided on mutation limit.</p> <p><strong>Linker</strong> - Support wildcard in destination domain setting</p> <a href="https://github.com/ampproject/wg-analytics/issues/4" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what-is-next">What is next</h2> <p><strong>amp-experiment v2</strong> - Version bump - Implement config parser - Fix Render-delaying services - Security review</p> <p><strong>Linker</strong> - Allow LINKER_PARAM to be used outside cookie writer</p> <p><strong>amp-analytics</strong> - lazy load vendor config design - a CSP friendly way for user to opt-out tracking</p> <a href="https://github.com/ampproject/wg-analytics/issues/4" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:analytics-4.toggleClass(class='expanded'), scroll-analytics-4.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> <div class="-at" id="caching-1"> <aside class="-ai" id="scroll-caching-1"> </aside> <span class="-as -ao"> <span class="-au"></span> </span> <div class="-aa"> <span class="-af" style="background: #EC6600"></span> <div class="-al"> <h4 class="-ac">Caching</h4> <span class="-ah">Status Update Wed Jan 02 2019</span> </div> <div class="-ad"> <div class="-av"> <h2 id="what-was-accomplished">What was accomplished</h2> <ul> <li>AMP actions validator rules now available.</li> <li>Correct handling of document fragments in the cache. #19688</li> <li>Transformed AMP SXG now include</li> <li>version of transformers used</li> <li>original CSS string fragments</li> <li>protect against data:... in CSS</li> <li>css escaping logic</li> <li>Validation of transformer cdn and version</li> </ul> <a href="https://github.com/ampproject/wg-caching/issues/1" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> <div class="-av"> <h2 id="what's-next">What's next</h2> <ul> <li>Transformed AMP SXG to</li> <li>strip comments from script tags</li> <li>Validator to enable/disable tagspec based on type identifiers.</li> </ul> <a href="https://github.com/ampproject/wg-caching/issues/1" class="-n" target="_blank" rel="noopener"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">All details on GitHub</span> </a> </div> </div> <div class="-ap" on="tap:caching-1.toggleClass(class='expanded'), scroll-caching-1.scrollTo(duration=250)" role="button" tabindex="0"> <svg class="ap-t-roadmap-list-item-issue-header-toggle"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </div> </div> </div> </section> </main> <footer class="ap--footer"> <div class="-a"> <div class="-f"> <div class="ap-o-footer-hint">Dĩ nhiên, website này được tạo bằng AMP!</div> <div class="-l"> <h5 class="-c">Theo dõi chúng tôi</h5> <ul class="-h"> <li class="-p"> <a class="ap-a-ico -d" href="https://twitter.com/AMPhtml" rel="noopener" title="Twitter"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" rel="noopener" title="YouTube"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#youtube"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://blog.amp.dev/" rel="noopener"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wordpress" title="WordPress"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://github.com/ampproject" title="GitHub"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"/></svg> </a></li> <li class="-p"> <a class="ap-a-ico -d" href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" title="Stackoverflow"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stackoverflow"/></svg></a> </li> </ul> </div> </div> <div class="-v"> <div class="-m"> <h5 class="-g">Tổng quan</h5> <ul class="-y"> <li class="-b"><a href="/vi/about/websites/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Khung AMP</a></li> <li class="-b"><a href="/vi/about/use-cases/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trường hợp sử dụng</a></li> <li class="-b"><a href="/vi/success-stories/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Câu chuyện thành công</a></li> <li class="-b"><a href="/vi/about/how-amp-works/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Chức năng</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Tài liệu</h5> <ul class="-y"> <li class="-b"><a href="/vi/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Bắt đầu</a></li> <li class="-b"><a href="/vi/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Hướng dẫn và Tập luyện</a></li> <li class="-b"><a href="/vi/documentation/components/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Thành phần</a></li> <li class="-b"><a href="/vi/documentation/examples/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Ví dụ</a></li> <li class="-b"><a href="/vi/documentation/templates/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Khuôn mẫu Thiết kế</a></li> <li class="-b"><a href="/vi/documentation/tools/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Công cụ</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Cộng đồng</h5> <ul class="-y"> <li class="-b"><a href="/vi/support/faq/platform-and-vendor-partners/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Nền tảng và Đối tác Cung cấp</a></li> <li class="-b"><a href="/vi/documentation/guides-and-tutorials/contribute/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Đóng góp</a></li> <li class="-b"><a href="/vi/community/roadmap/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Lộ trình</a></li> </ul> <h5 class="-g">OpenJS Foundation</h5> <ul class="-y"> <li class="-b"><a class="-w" href="https://openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>The OpenJS Foundation</a></li> <li class="-b"><a class="-w" href="https://bylaws.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>OpenJS Foundation Bylaws</a></li> <li class="-b"><a class="-w" href="https://trademark-policy.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark Policy</a></li> <li class="-b"><a class="-w" href="https://trademark-list.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark List</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Sự kiện</h5> <ul class="-y"> <li class="-b"><a href="https://blog.amp.dev/2020/02/20/amp-conf-2020-return-to-nyc/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Hội nghị AMP 2020</a></li> <li class="-b"><a href="/vi/events/amp-cs-2019/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Contributor Summit 2019</a></li> </ul> <h5 class="-g">Tài liệu Thương hiệu AMP</h5> <ul class="-y"> <li class="-b"><a href="/static/files/brand-material/AMP_Mini_Styleguide.pdf" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>Hướng dẫn phong cách</a></li> <li class="-b"><a href="/static/files/brand-material/AMP_Logo_Rebrush.zip" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>Logo</a></li> </ul> </div> </div> <div class="-k"> <div class="-_"> <amp-img src="/static/img/logo-openjsf.svg" alt="Logo of the OpenJS Foundation" width="315" height="100" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:31.746%"></i-amphtml-sizer></amp-img> </div> <ul class="-j"> <li class="-q"><a class="-z" href="https://terms-of-use.openjsf.org" rel="noopener">Terms of Use</a></li> <li class="-q"><a class="-z" href="https://privacy-policy.openjsf.org" rel="noopener">Chính sách Quyền Riêng tư</a></li> <li class="-q"><a class="-z" href="https://www.linuxfoundation.org/cookies" rel="noopener">Cookie Policy</a></li> </ul> </div> <div class="-te"> © <a href="https://openjsf.org">OpenJS Foundation</a> and AMP Project contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. <br><br> The services available at <a href="https://cdn.ampproject.org">cdn.ampproject.org</a> are provided by Google and the respective <a href="https://policies.google.com/privacy?hl=en">privacy policy</a> applies. </div> </div> </footer> <amp-analytics type="gtag" data-credentials="include" data-block-on-consent class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:1px;height:1px;" i-amphtml-layout="fixed"> <script type="application/json">{"extraUrlParams":{"cd2":"${ampdocHost}"},"requests":{"CWV_EVENT":"${base}?v=1\u0026t=event\u0026tid=${gtag_id}\u0026cid=0\u0026ec=cwv","base":"https://google-analytics.com/collect/"},"triggers":{"banner":{"on":"click","selector":"#top-banner","vars":{"event_action":"click","event_category":"other","event_label":"banner","event_name":"banner"}},"cls":{"extraUrlParams":{"cls":"${cumulativeLayoutShift}"},"on":"visible","request":"CWV_EVENT"},"defaultPageview":{"on":"visible","request":"pageview","vars":{"title":"{{title}}"}},"fid":{"extraUrlParams":{"fid":"${firstInputDelay}"},"on":"visible","request":"CWV_EVENT"},"lcp":{"extraUrlParams":{"lcp":"${largestContentfulPaint}"},"on":"visible","request":"CWV_EVENT"},"navigation":{"on":"click","selector":".ap--header a, .ap-o-burger-menu-link","vars":{"event_action":"link","event_category":"other","event_label":"navigation","event_name":"navigation"}},"scrolledEnd":{"on":"scroll","scrollSpec":{"verticalBoundaries":[90]},"vars":{"event_action":"end","event_category":"other","event_label":"scroll","event_name":"scroll"}},"scrolledHalf":{"on":"scroll","scrollSpec":{"verticalBoundaries":[50]},"vars":{"event_action":"half","event_category":"other","event_label":"scroll","event_name":"scroll"}},"searchButton":{"on":"click","selector":"#searchTriggerOpen","vars":{"event_action":"open","event_category":"search","event_label":"search","event_name":"search"}}},"vars":{"config":{"G-TYM9BH1XCX":{"groups":"default"}},"gtag_id":"G-TYM9BH1XCX"}}</script> </amp-analytics><amp-geo layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"ISOCountryGroups":{"eu":["preset-eea"],"doubleOptIn":["de","at","no","gr","lu"]}}</script> </amp-geo> <amp-consent id="consent" class="-o i-amphtml-layout-nodisplay" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"consentInstanceId":"consent","promptUI":"consent-popup","consentRequired":false,"geoOverride":{"eu":{"consentRequired":true}}}</script> <div id="consent-popup" class="consent-popup"> <button type="reset" class="-u" on="tap:consent.dismiss" role="button" tabindex="0" aria-label="Chấp thuận và đóng"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"/></svg> </button> <p class="ap-o-consent-text"> We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href="https://policies.google.com/technologies/cookies">use of cookies</a> and <a href="https://policies.google.com/privacy">privacy policy</a>. </p> <button on="tap:consent.accept" class="ap-a-btn" role="button" aria-label="Chấp nhận việc sử dụng cookie">Đã hiểu!</button> </div> </amp-consent> <amp-install-serviceworker src="/serviceworker.js" data-iframe-src="https://amp.dev/serviceworker.html" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"></amp-install-serviceworker> <style amp-keyframes>@keyframes duepduep{0%{transform:translate(0)}49%{transform:translate(40px)}50%{transform:translate(-40px)}to{transform:translate(0)}}</style></body></html>