profile
viewpoint

ChromeDevTools/awesome-chrome-devtools 4242

Awesome tooling and resources in the Chrome DevTools & DevTools Protocol ecosystem

GoogleChromeLabs/ProjectVisBug 3868

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug

pbakaus/scroller 3774

Accelerated panning and zooming for HTML and Canvas

ampproject/amp-wp 1572

Enable AMP on your WordPress site, the WordPress way.

pbakaus/viewporter 594

Meta viewport done right.

ampproject/ampstart 418

AMP Start source code and templates .

ampproject/amp.dev 390

The AMP Project Website.

pbakaus/domvas 353

Domvas implements the missing piece that connects the DOM and Canvas.

google/web-stories-wp 293

Web Stories for WordPress

issue commentgoogle/web-stories-wp

Ensure keyboard navigation is possible across editor and dashboard

also, @swissspidy as cc, who I made the owner around a11y for now

bmattb

comment created time in 11 hours

issue commentgoogle/web-stories-wp

Ensure keyboard navigation is possible across editor and dashboard

Well, guidelines exist, but this issue is so broad that it is not super useful maybe. Would be great for @carlos-kelly and @barklund to break this up into individual tickets around dashboard and the editor.

bmattb

comment created time in 11 hours

issue commentgoogle/web-stories-wp

Latest Stories Block

nope, we'll have to do this after 1.0 stable. Great suggestion though!

digitalsetups

comment created time in 17 hours

issue commentgoogle/web-stories-wp

Letterboxing when viewing story via Instagram in-app browser

Not need for stable.

mattyrose

comment created time in 17 hours

issue commentgoogle/web-stories-wp

Upload Modal Triggering Library Refresh

Correct - users should never see the loading message for any loading state in the editor (not just media) if loading is quick. @jhtin is setting a duration time for this of 500ms. I'm not sure what that perfect time is. @pbakaus if you have a suggestion.

Seems OK. Let's try it out and see how it feels.

jauyong

comment created time in 13 days

PR opened google/web-stories-wp

Replaced support link with feedback form

Summary

Adds the feedback form link to the micro site.

Testing Instructions

Can't be tested using our usual method. QA needs to be skipped.

+1 -1

0 comment

1 changed file

pr created time in 16 days

create barnchgoogle/web-stories-wp

branch : feedbackform

created branch time in 16 days

Pull request review commentgoogle/web-stories-wp

Auto-hide scrollbars

 export const GlobalStyle = createGlobalStyle`   } `; +const GlobalObtrusiveScrollbarStyle = createGlobalStyle`+  /*+   * Custom dark scrollbars for Chromium & Firefox.+   * Scoped to <Editor> to make sure we don't mess with WP dialogs+   * like the Backbone Media Gallery dialog.+   */+  * {+    scrollbar-width: thin;+    scrollbar-color: ${({ theme }) => theme.colors.bg.v10}+    ${({ theme }) => rgba(theme.colors.bg.v0, 0.1)};+  }++  *::-webkit-scrollbar {+    width: ${SCROLLBAR_WIDTH}px;+    height: ${SCROLLBAR_WIDTH}px;+    position:fixed;+  }

I'm super confused by this entire thread.

AFAIK, with the use of hasObstrusiveScrollbars, and as clearly outlined in this tutorial, we can fix precisely the mentioned issue. We can have:

  1. a scrollbar that is styled the way we want to
  2. a scrollbar that auto-hides

The downside, as is correctly pointed out, is that the auto-hiding scrollbar is the OS level scrollbar which cannot be styled. Thus, if @samitron7's requirement is proper styling for the scrollbar no matter what, we have two choices:

  1. Compromise on styling, but do auto-hide (note: the always-visible scrollbar would still be styled)
  2. Style the scrollbars, but make them thin and always visible (roughly what we already have)

At this point, I pretty much just need @samitron7 to vote on one vs two.

swissspidy

comment created time in 23 days

issue commentgoogle/web-stories-wp

New Font Picker: Curate editor supported fonts list to a manageable list

I guess it happened since implementing the new font picker was divided into smaller quite specific pieces and none of these was specifically addressing that part.

We could alternatively (to having this as a blocker) create a new issue for performance (virtualized list) instead.

The curated list of fonts is almost ready, however, even in the new curated list scenario, a user can still type a font into the box and get to a filter of the whole 1000 fonts. That still needs to be fast. If that requires opening another performance ticket, then yes, please do.

o-fernandez

comment created time in 24 days

issue commentgoogle/web-stories-wp

New Font Picker: Curate editor supported fonts list to a manageable list

Regarding #2530 - I don't fully get why the font picker has to render all 1000 fonts at once. Certainly this could use a virtualized list to make things a bit smarter?

+1, I also don't understand that at all.

o-fernandez

comment created time in 24 days

pull request commentampproject/amphtml

[amp-story-player] AMP extension for the amp-story-player

OMG amazing!

Enriqe

comment created time in a month

issue commentgoogle/web-stories-wp

Scrollbars should auto-hide (respect OS level settings)

@miina correct. The scrollbar behavior should follow OS level settings, or otherwise we a) don't make it feel native, and b) break A11Y. Some people deliberately make scrollbars always show because they need to.

The link I pasted in the description is actually an excellent writeup on the topic. If you follow that post, you'll be in a good state I believe.

pbakaus

comment created time in a month

push eventpbakaus/videoTester

Paul Bakaus

commit sha f81756fce9e4ed0dbf17a279b86cd170bcceef5c

initial commit

view details

push time in a month

create barnchpbakaus/videoTester

branch : master

created branch time in a month

created repositorypbakaus/videoTester

Test runner to test HTML5 video support on different platforms and devices. WIP.

created time in a month

issue commentampproject/amp.dev

Link anchors don't jump to the right heading

ah interesting! Hopefully pretty straight forward fix then.

pbakaus

comment created time in a month

issue openedampproject/amp.dev

Link anchors don't jump to the right heading

Helloooooo!

Just found this bug:

  1. Open this link: https://amp.dev/documentation/components/amp-story/#live-story
  2. Note how it does not jump to the "Live Story" heading.

That's it :)

created time in a month

pull request commentgoogle/web-stories-wp

Templates: Fitness Base Animations

Looks great in the gif!

littlemilkstudio

comment created time in a month

pull request commentgoogle/web-stories-wp

Templates: Beauty Base Animations & Links

Looks awesome!

littlemilkstudio

comment created time in a month

issue commentampproject/amphtml

FR: Auto-blurred 'frame' for media

I'll let you all make the call here - imho would be a pretty awesome feature if it can be done responsibly!

Re: only doing it for the poster image for videos: Afraid that that won't be enough for the desired effect, as the borders of a frame can change greatly through the course of a video.

pbakaus

comment created time in a month

issue commentampproject/amphtml

FR: Auto-blurred 'frame' for media

Just want to note that we've actually found this to have really bad performance using CSS filter.

Can you quantify bad? I'm surprised it would be very noticeable for a single image at a time. Are we speaking > 100ms or significantly more?

We should explore what happens if we generate the image in JS, e.g. off-thread in a worker and/or server-side on the AMP cache.

Agree. Note that the video codepen uses a canvas to reproject the video, not sure if that's faster or not, but I'm guessing not..

@pbakaus was any consideration made for generating the blurred asset server-side on the origin?

We can certainly do that for images, but likely prohibitive for video. If we can get the performance to an acceptable state, it would be much more developer friendly when done on the client.

pbakaus

comment created time in a month

issue openedampproject/amphtml

FR: Auto-blurred 'frame' for media

Describe the new feature or change to an existing feature you'd like to see

Specifically for AMP Stories, but likely generally useful for all of AMP, I'd like to propose a feature that will allow you to blow up the 'box' of a media element to whatever size one desires, and have the background filled with a blurred version of it.

As potential API, I'd propose something like this:

<amp-media-backdrop blur="50px">
<amp-img src="..." width="..." height="..." layout="...">
</amp-media-backdrop>

<amp-media-backdrop blur="20px">
<amp-video src="..." width="..." height="..." layout="...">
</amp-media-backdrop>

amp-media-backdrop is essentially a supercharged amp-layout element, so it can be sized, scaled etc., but with the characteristic that AMP will always fill the box with a blown up, blurred version of the first media element it finds as child.

I would probably expose the following additional attributes:

  • blur - controls the amount of Gaussian blur applied to the backdrop
  • fit - subset of object-fit, can be set to either fill (default, stretches the backdrop to fill the container) or cover.

Additional context

This is what this looks like: image

I've produced two CodePens for inspirational purposes (there are probably smarter ways to do this):

/cc @raovs @newmuis

created time in a month

issue commentgoogle/web-stories-wp

Implement multi-resolution preview as pre-publish step

@samitron7 that's correct.

jauyong

comment created time in a month

issue commentgoogle/web-stories-wp

UX for Managing Background

To me, this is one of those P3's that is a very delightful surprise if discovered, doesn't do any harm, but also is definitely not important :)

jauyong

comment created time in a month

issue commentgoogle/web-stories-wp

Plugin activation notice

@samitron7 love it! Ship ship ship :)

swissspidy

comment created time in a month

issue commentgoogle/web-stories-wp

Media - External Embeds

+1. I sense that users will want this, but OK for me to wait until this turns out to be true.

jauyong

comment created time in a month

push eventgoogle/web-stories-wp

Paul Bakaus

commit sha b4f37e31afe967c72d7cc400497d36b0a7f5c239

initial micro site commit

view details

Paul Bakaus

commit sha 855cbd0c761e19f1ad54705bfb2b96854868af43

optimized images

view details

Paul Bakaus

commit sha 11495b6fca804d516f9c4c454e0efc6037d201b0

fluid design + fonts for Desktop + tablet

view details

Paul Bakaus

commit sha 10ceeb59765c91f7f732cde726916b096ba7df07

alright, here's a mobile version

view details

Pascal Birchler

commit sha d43ace357ef3a03dda59cc5cb5cb9df4cdd16bf5

Merge branch 'gh-pages' into beta-micro-site

view details

Pascal Birchler

commit sha dfba5180cf6a332cab6bad6990f561a5aae911e3

Update redirect URL

view details

Pascal Birchler

commit sha 695abc2db83b03a7c3d67fe98060a0e4d6dc74ec

Optimize template image

view details

Paul Bakaus

commit sha 56bf69faf7d2244603c391694366724f3072ea6f

a few fixes, link colors etc.

view details

Paul Bakaus

commit sha 85184e37e2e02c3bea96ed02b9f4f862dd026472

added tips story, numerous other improvements and fixes

view details

Paul Bakaus

commit sha edad989fa34a60e749cbc3675557cf22325861c1

remove link to feedback form until we get privacy clearance, fix some small issues

view details

Paul Bakaus

commit sha 068dcb3db5204f23846bc84046f194654b156953

smaller border radius

view details

Paul Bakaus

commit sha fd4414217d27fe93e53ed109371d716690cad435

Update beta/index.html Co-authored-by: Pascal Birchler <pascalb@google.com>

view details

Paul Bakaus

commit sha f8d9d5fae372feaa26e78a99be7486f801ef27be

added correct download links for beta

view details

Pascal Birchler

commit sha 4c82c2ccfe4bd765e30f1d873ec311c48d411f78

Remove .DS_Store file

view details

Paul Bakaus

commit sha 99037e8eba7fabb8f714f33ef98185e923e1554b

Merge pull request #2832 from google/beta-micro-site Beta micro site

view details

push time in a month

delete branch google/web-stories-wp

delete branch : beta-micro-site

delete time in a month

PR merged google/web-stories-wp

Beta micro site Type: Enhancement cla: yes

Summary

Adds the micro site for the beta in Github Pages under /beta.

To-do

  • There's a placeholder in the top section that @samitron7 still needs to provide.
  • Need to wait for @swissspidy to generate release to replace download link placeholders.
  • CSS clean up. General markup structure should be pretty sound, but the CSS is rapidly coded. Then again, it's a site that will only exist a few weeks..

localhost_web-stories-wp_beta_

<!-- Please reference the issue(s) this PR addresses. -->

Fixes #2650

+1531 -1

5 comments

30 changed files

pbakaus

pr closed time in a month

push eventgoogle/web-stories-wp

Paul Bakaus

commit sha f8d9d5fae372feaa26e78a99be7486f801ef27be

added correct download links for beta

view details

push time in a month

PR opened google/web-stories-wp

Fix beauty template image

This fixes a remaining beauty template image and replaces it with a royalty free image and copy.

+2 -2

0 comment

3 changed files

pr created time in a month

create barnchgoogle/web-stories-wp

branch : fix-beauty-template

created branch time in a month

issue commentgoogle/web-stories-wp

Dashboard results scrolling to top on pagination

Confirmed in UAT.

BrittanyIRL

comment created time in a month

push eventgoogle/web-stories-wp

Paul Bakaus

commit sha fd4414217d27fe93e53ed109371d716690cad435

Update beta/index.html Co-authored-by: Pascal Birchler <pascalb@google.com>

view details

push time in a month

push eventgoogle/web-stories-wp

Paul Bakaus

commit sha 068dcb3db5204f23846bc84046f194654b156953

smaller border radius

view details

push time in a month

push eventgoogle/web-stories-wp

Paul Bakaus

commit sha edad989fa34a60e749cbc3675557cf22325861c1

remove link to feedback form until we get privacy clearance, fix some small issues

view details

push time in a month

push eventgoogle/web-stories-wp

Paul Bakaus

commit sha 85184e37e2e02c3bea96ed02b9f4f862dd026472

added tips story, numerous other improvements and fixes

view details

push time in a month

Pull request review commentgoogle/web-stories-wp

Beta micro site

+<!doctype html>+<html ⚡>+<head>+    <meta charset="utf-8">+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">+    <meta name="description" content="Web Stories for WordPress - Download the Beta">+    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">+    <link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin>+    <script async src="https://cdn.ampproject.org/v0.js"></script>+    <!-- Import other AMP Extensions here -->+    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>+    <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>+    <script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>+    <style amp-custom>+    html, body {+        margin: 0;+        padding: 0;+        font-family: Roboto;+        font-size: 16px;+        background: #F8F8F8;+        text-rendering: optimizeLegibility;+    }++    header,+    footer,+    section {+        padding: 0 142px;+    }++    /*+    * HEADER+    */++    header,+    footer {+        display: flex;+        align-items: center;+        line-height: 44px;+        margin-top: 29px;+        height: 44px;+    }++    header .google,+    footer .google {+        width: 55px;+    }++    header img,+    footer img {+        height: 22px;+    }++    header h1 {+        font-style: normal;+        font-weight: normal;+        font-size: 1rem;+        line-height: 44px;+        margin: 0;+        margin-left: 24px;+    }++    header ul,+    footer ul {+        margin: 0;+        padding: 0;+        flex: 1 1 auto;+        text-align: right;+        display: flex;+        justify-content: flex-end;+        list-style: none;+    }++    header ul li,+    footer ul li {+        margin: 0;+        padding: 0;+    }++    header ul li a,+    footer ul li a {+        color: #000;+        text-decoration: none;+        border-right: 1px solid #999;+        padding-right: 16px;+        padding-left: 16px;+    }++    header ul li:first-child a,+    footer ul li:first-child a {+        padding-left: 0;+    }++    header ul li:nth-child(3) a,+    footer ul li:nth-child(4) a {+        border: none;+        padding-right: 0;+    }++    header a.download {+        margin-left: 40px;+        color: #1A73E8;+        text-decoration: none;+        border: none;+    }++    /*+    * HEADER+    */++    section.teaser {+        padding-top: 186px;+        padding-bottom: 252px;+        display: flex;+        padding-right: 0;+    }++    section.teaser h2 {+        font-style: normal;+        font-weight: normal;+        text-transform: uppercase;+        font-size: 13px;+        line-height: 20px;+        color: #000000;+        opacity: 0.54;+        margin: 0;+        margin-bottom: 33px;+        margin-top: 50px;+    }++    section.teaser h3 {+        font-family: Roboto;+        font-style: normal;+        font-weight: 100;+        font-size: 78px;+        line-height: 1.08;+        margin: 0;+    }++    section.teaser p {+        font-size: 23px;+        line-height: 44px;+        opacity: 0.64;+    }++    section.teaser .left {+        flex: 1 1 33.3%;+        margin-right: 133px;+        min-width: 480px;+        padding-bottom: 58px;+    }++    section.teaser .right {+        flex: 1 1 66.6%;+        background: #333;+        text-align: center;+        color: #fff;+        box-shadow: 0px 0px 40px #00000047;+    }++    section.teaser a.download {+        background: #3474E0;+        color:#fff;+        font-weight: 500;+        font-size: 23px;+        line-height: 29px;+        text-align: center;+        text-decoration: none;+        padding: 8px 18px;+        transition: 0.1s ease-out;+        display: inline-block;+        margin-top: 20px;+        box-shadow: 0px 0px 40px #00000047;+    }++    section.teaser a.download:hover {+        background: #000;+        color: #fff;+    }++    /*+    * ABOUT+    */++    section.about {+        background: #fff;+        padding-top: 156px;+    }++    section.about h2 {+        font-weight: bold;+        font-size: 16px;+        line-height: 24px;+        text-align: center;+        text-transform: uppercase;+    }++    section.about h2 a {+        border-bottom: 4px solid;+    }++    section.about p {+        font-weight: 500;+        font-size: 58px;+        line-height: 1.32;+        text-align: center;+        opacity: 0.84;+        margin-top: 156px;+        margin-bottom: 0;+        padding: 0 11vw;+        padding-bottom: 152px;+    }++    /*+    * ABOUT VIDEO+    */++    section.about-video {+        background: linear-gradient(63.89deg, #010218 2.16%, #1B0418 102.6%);+        color: #fff;+        text-align: center;+        padding-bottom: 112px;+        position: relative;+    }++    section.about-video::before {+        display: block;+        content: "";+        position: absolute;+        bottom: 0;+        right: 0;+        left: 0;+        height: 353px;+        z-index: 1;+        background: linear-gradient(0deg, #020219 37.25%, rgba(28, 6, 25, 0) 100%);+    }++    section.about-video p {+        font-weight: 500;+        font-size: 26px;+        line-height: 52px;+        opacity: 0.84;+        margin: 0;+        padding-top: 104px;+        padding-bottom: 17px;+    }++    section.about-video amp-video {+        opacity: 0;+        will-change: transform;+    }++    /*+    * TEMPLATES+    */+    section.templates {+        background: #fff;+        padding-top: 149px;+        padding-bottom: 120px;+    }++    section.templates p {+        font-weight: 500;+        font-size: 26px;+        line-height: 52px;+        opacity: 0.84;+        text-align: center;+        margin: 0;+    }++    section.templates ul {+        margin: 0;+        padding: 0;+        list-style: none;+        display: flex;+    }++    section.templates ul li {+        margin: 0;+        padding: 0;+        flex: 1 1 auto;+    }++    section.templates ul amp-img {+        will-change: transform;+        transition: 0.2s ease-out;+        opacity: 0;+    }++    section.templates ul amp-img:hover {+        transform: scale(1.1);+    }++    /*+    * FAQ+    */++    section.faq {+        padding-top: 158px;+        padding-bottom: 142px;+    }++    section.faq h2 {+        font-weight: bold;+        font-size: 16px;+        line-height: 24px;+        text-align: center;+        text-transform: uppercase;+    }++    section.faq h2 a {+        border-bottom: 4px solid;+    }++    section.faq dl {+        padding: 0 11vw;+        padding-top: 158px;+    }++    section.faq dt {+        font-weight: bold;+        font-size: 28px;+        line-height: 44px;+    }++    section.faq dd {+        font-size: 18px;+        line-height: 28px;+        color: rgba(0,0,0,0.84);+        margin: 0;+        padding-top: 10px;+        padding-bottom: 50px;+        max-width: 850px;+    }++    /*+    * Footer+    */++    footer {+        border-top: 1px solid transparent;+        width: 545px;+        margin: 0 auto;+        margin-bottom: 106px;+        position: relative;+        padding-top: 83px;+    }++    footer::before {+        content: "";+        display: block;+        height: 1px;+        background: linear-gradient(0.11deg, #010218 2.16%, #1B0418 102.6%);+        opacity: 0.3;+        position: absolute;+        top: 0;+        left: 0;+        right: 0;+    }++    /*+    * Reponsiveness (TODO: check with Sam)+    */+    header, footer, section {+        padding: 0 7.4vw;+    }++    section.teaser {+        padding-bottom: 13.13vw;+        padding-top: 9.69vw;+    }++    section.teaser h3 {+        font-size: calc(32px + 2.4vw);+    }++    section.about {+        padding-top: 8.13vw;+    }++    section.about p {+        margin-top: 8.13vw;+        padding-bottom: 7.92vw;+        font-size: calc(20px + 1.98vw);+    }++    section.about-video p {+        padding-top: 5.42vw;+    }++    section.templates {+        padding-top: 7.76vw;+        padding-bottom: 6.25vw;+    }++    section.faq {+        padding-top: 8.13vw;+        padding-bottom: 7.4vw;+    }++    section.faq dl {+        padding-top: 8.13vw;+    }++    @media (max-width: 1000px) {+        section.templates ul {+            flex-wrap: wrap;+        }+        section.templates p {+            padding-bottom: 30px;+        }+        section.templates ul li {+            flex: 1 1 25%;+        }+    }++    @media (max-width: 500px) {+        header {+            flex-wrap: wrap;+        }+        header ul, footer ul {+            justify-content: flex-start;+            text-align: left;+            flex-wrap: wrap;+        }+        header a.download {+            display: none;+        }+        section.teaser .left {+            min-width: auto;+            margin-right: 7.4vw;+        }+        section.teaser .right {+            display: none;+        }+        section.about-video {+            padding-bottom: 42px;+        }+        section.about-video::before {+            height: 90px;+        }+        footer {+            width: auto;+            flex-wrap: wrap;+        }+        footer .google {+            margin: 20px auto;+        }+    }++    </style>+    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>++    <link rel="canonical" href=".">+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap" rel="stylesheet">+    <title>Web Stories for WordPress - Download the Beta</title>+</head>+<body>+    +    <header>+        <div class="google"><amp-img width="120" height="48" layout="responsive" src="./assets/google.svg" alt="Google"></div>+        <h1>Web Stories for WordPress</h1>+        <ul>+            <li><a href="#about">About</a></li>+            <li><a href="#faq">FAQ</a></li>+            <li><a href="https://github.com/google/web-stories-wp">GitHub</a></li>+            <li><a href="#" class="download">Download Beta</a></li>+        </ul>+    </header>++    <section class="teaser">+        <div class="left">+            <h2>Stories Editor</h2>+            <h3>Get Ready to Tell Stories on WordPress</h3>+            <p>We're not quite ready for prime time yet, but if you like to live dangerously, we invite you to try our first public beta.</p>+            <a href="#" class="download">Download the Beta</a>            +        </div>+        <div class="right">PLACEHOLDER</div>+    </section>++    <section class="about">+        <h2><a id="about">About</a></h2>+        <p>With Stories for WordPress, we're bringing first-class Web Stories support to WordPress.</p>+    </section>++    <amp-animation id="videoAnim" layout="nodisplay">+        <script type="application/json">+          {+            "selector": "amp-video",+            "duration": "2s",+            "delay": "0",+            "easing": "cubic-bezier(0.075, 0.820, 0.165, 1.000)",+            "iterations": "1",+            "fill": "both",+            "keyframes": [+                {"transform": "translate(0px, 100px)", "opacity": 0 },+                {"transform": "translate(0px, 0px)", "opacity": 1 }+            ]+          }+        </script>+    </amp-animation>    +    <section class="about-video">+        <amp-position-observer+            intersection-ratios="0.4"+            on="enter:videoAnim.start"+            layout="nodisplay"+            once=""+        >+        </amp-position-observer>+        <p>WYSIWYG all the way</p>+        <amp-video width="3686" height="2304" layout="responsive" title="Stories for WordPress in action" src="./assets/wysiwyg.mp4" loop muted autoplay></video>+    </section>++    <amp-animation id="templateAnim" layout="nodisplay">+    <script type="application/json">+      {+        "selector": ".template",+        "--duration": "2.4s",+        "duration": "var(--duration)",+        "--delay": "0.1s",+        "delay": "calc(var(--delay) * (length() - index() - 1) * var(--easeOutCircFactor))",+        "easing": "cubic-bezier(0.075, 0.820, 0.165, 1.000)",+        "iterations": "1",+        "fill": "both",+        "keyframes": [+            {"transform": "translate(0px, 300px)", "opacity": 0 },+            {"transform": "translate(0px, 0px)", "opacity": 1 }+        ],+        "subtargets": [+            {+                "index": 7,+                "--easeOutCircFactor": 0.4841229182759271+            },+            {+                "index": 6,+                "delay": "calc(var(--delay) * (length() - index() - 1) * 0.6614378277661477)"+            },+            {+                "index": 5,+                "delay": "calc(var(--delay) * (length() - index() - 1) * 0.7806247497997998)"+            },+            {+                "index": 4,+                "delay": "calc(var(--delay) * (length() - index() - 1) * 0.8660254037844386)"+            },+            {+                "index": 3,+                "delay": "calc(var(--delay) * (length() - index() - 1) * 0.9270248108869579)"+            },+            {+                "index": 2,+                "delay": "calc(var(--delay) * (length() - index() - 1) * 0.9682458365518543)"+            },+            {+                "index": 1,+                "delay": "calc(var(--delay) * (length() - index() - 1) * 0.9921567416492215)"+            },+            {+                "index": 0,+                "delay": "calc(var(--delay) * (length() - index() - 1) * 1)"+            } +        ]+      }+    </script>+    </amp-animation>+    <section class="templates">+        <amp-position-observer+            intersection-ratios="0.5"+            on="enter:templateAnim.start"+            layout="nodisplay"+            once=""+        >+        </amp-position-observer>+        <p>Expressive Templates</p>+        <ul>+            <li><amp-img class="template" layout="responsive" width="542" height="840" src="./assets/templates/1.png"></amp-img></li>+            <li><amp-img class="template" layout="responsive" width="542" height="840" src="./assets/templates/2.png"></amp-img></li>+            <li><amp-img class="template" layout="responsive" width="542" height="840" src="./assets/templates/3.png"></amp-img></li>+            <li><amp-img class="template" layout="responsive" width="542" height="840" src="./assets/templates/4.png"></amp-img></li>+            <li><amp-img class="template" layout="responsive" width="542" height="840" src="./assets/templates/5.png"></amp-img></li>+            <li><amp-img class="template" layout="responsive" width="542" height="840" src="./assets/templates/6.png"></amp-img></li>+            <li><amp-img class="template" layout="responsive" width="542" height="840" src="./assets/templates/7.png"></amp-img></li>+            <li><amp-img class="template" layout="responsive" width="542" height="840" src="./assets/templates/8.png"></amp-img></li>+        </ul>+    </section>++     <section class="media-gallery">+     </section>++     <section class="faq">+        <h2><a id="faq">FAQ</a></h2>+        <dl>+            <dt>Where can I learn more about Web Stories?</dt>+            <dd><a href="https://amp.dev/about/stories/">Web Stories</a> are tappable, engaging visual stories brought to the web. They’re powered by AMP technology, so learn more about them on <a href="https://amp.dev/about/stories/">amp.dev</a>.</dd>+        +            <dt>How do I install the Stories for WordPress plugin?</dt>+            <dd>+                As soon as we’re graduating from beta, the plugin will be available on WordPress.org. While we’re in beta, the plugin has to be downloaded as zip. After that:++                <ol>+                    <li>Navigate to Plugins &gt; Add New.</li>+                    <li>Click the Upload Plugin button at the top of the screen.</li>+                    <li>Select the zip file from your local filesystem.</li>+                    <li>Click the Install Now button.</li>+                    <li>When installation is complete, you’ll see “Plugin installed successfully.” Click the Activate Plugin button at the bottom of the page.</li>+                </ol>+            </dd>+        +            <dt>I found a bug or missing feature! How do I report it?</dt>+            <dd>Awesome! That’s exactly what the beta is for. Please submit feedback via <a href="https://docs.google.com/forms/d/e/1FAIpQLSfRK9gFWMavvGbEWPFUFz8PDgrDE6XdVuh3B9e1Fu549V8BxQ/viewform">this feedback form</a> or <a href="https://github.com/google/web-stories-wp/issues">file a bug or feature request on Github</a>. Your help is greatly appreciated.</dd>

Good catch, done

pbakaus

comment created time in a month

push eventgoogle/web-stories-wp

Paul Bakaus

commit sha 56bf69faf7d2244603c391694366724f3072ea6f

a few fixes, link colors etc.

view details

push time in a month

pull request commentgoogle/web-stories-wp

Beta micro site

Alright, getting too sleepy now but managed to squeeze in fluidity on Desktop and a mobile breakpoint for common mobile devices.

pbakaus

comment created time in a month

push eventgoogle/web-stories-wp

Paul Bakaus

commit sha 10ceeb59765c91f7f732cde726916b096ba7df07

alright, here's a mobile version

view details

push time in a month

pull request commentgoogle/web-stories-wp

Beta micro site

Really nice work! Just please hold off on merging this until I change the GitHub pages deployment (which I aim to do today). Otherwise it will be overridden with the next deployment of the storybook.

Thanks! AFAIK though there should be no overwrite, as in our travis config, keep_history is set to true, thus not force pushing to gh-pages. I haven't tested it, but building storybook should not wipe this.

pbakaus

comment created time in a month

push eventgoogle/web-stories-wp

Paul Bakaus

commit sha 11495b6fca804d516f9c4c454e0efc6037d201b0

fluid design + fonts for Desktop + tablet

view details

push time in a month

PR opened google/web-stories-wp

Beta micro site

Summary

Adds the micro site for the beta in Github Pages under /beta.

To-do

  • There's a placeholder in the top section that @samitron7 still needs to provide.
  • CSS clean up. General markup structure should be pretty sound, but the CSS is rapidly coded. Then again, it's a site that will only exist a few weeks..

<!-- Please reference the issue(s) this PR addresses. -->

Fixes #2650

+537 -0

0 comment

11 changed files

pr created time in a month

push eventgoogle/web-stories-wp

Paul Bakaus

commit sha 855cbd0c761e19f1ad54705bfb2b96854868af43

optimized images

view details

push time in a month

create barnchgoogle/web-stories-wp

branch : beta-micro-site

created branch time in a month

issue commentgoogle/web-stories-wp

Media Library - Keyboard Navigation

re: load more: I'm not sure this is the right compromise here.. but what we could try is that we don't trigger infinite scroll when the user is using a keyboard (instead, we only trigger infinite scroll if we detect that a) the trigger element at the bottom is visible and b) there were scroll events in a short time period before on the list...or something).

This is a little tricky because I'm not sure we can reliably distinguish scroll from keyboard and scroll from pan/mouse, but we could try.

jauyong

comment created time in a month

issue commentgoogle/web-stories-wp

Edit mode slider has no visible focus state

@samitron7 small correction: I won't be able to take on all a11y work, but I am writing guidelines and am happy to coordinate. Eng and QA still needs to help track and implement fixes.

/cc @dvoytenko, who might be the best candidate to look at doing a pass around keyboard nav and focus states

pbakaus

comment created time in 2 months

issue commentgoogle/web-stories-wp

Media Library - Keyboard Navigation

@samitron7 actually passing this over to Fontaine makes me most sense here - I don't think I know her Github handle, but I'll get an email thread going. My A11Y doc focuses on general guidelines. The feature specific work still needs to happen in the feature specs.

jauyong

comment created time in 2 months

issue commentgoogle/web-stories-wp

Add description copy to templates

Here's a first pass, lmk if that works: https://docs.google.com/document/d/1tewOPzegX0QBcualXs7VMlgcCACwWAXiKRE3QFogNWM/edit#

BrittanyIRL

comment created time in 2 months

issue commentgoogle/web-stories-wp

Page Attachments

Curious to hear from the format team on this. AFAIK, we should for now just clarify that whether it's swipe up or a new window depends on the platform or app the story is displayed on. It's a frustrating complication, but that's how I understand it.

jauyong

comment created time in 2 months

issue commentgoogle/web-stories-wp

Add description copy to templates

I'll do it.

BrittanyIRL

comment created time in 2 months

issue commentgoogle/web-stories-wp

Images are sometimes broken (blob URLs)

A couple of questions:

  • Do we know why these failures are occurring?
  • Are the reasons for the failures deterministic so we can just prevent/block the whole thing to begin with?

If not, and we have to just after the fact figure out what to do, then I think the right solution would be to delete the element but also show the user a warning indicating so. Something along the lines of: "An [image or video] failed to upload and was removed from the story."

@samitron7 @pbakaus thoughts?

That's a last resort, but yes. Better than just erring out.

merapi

comment created time in 2 months

pull request commentgoogle/web-stories-wp

Single blob shape + fix blob alignment

works for me! Thanks

wassgha

comment created time in 2 months

issue commentgoogle/web-stories-wp

Images added as different sizes when dragging vs clicking

yep that behavior sgtm.

jauyong

comment created time in 2 months

issue commentgoogle/web-stories-wp

Text edit mode: background color same as white text

I think the line height and line wrap jumps are very jarring - more jarring than the switch from highlight to solid, so disagree. might make sense to prototype both. I also still don't understand why they can't be exactly the same - it's CSS on both ends? is the edit mode adding any styling we can't override?

Also disagree on the border radius. I also prefer highlight without radius (slightly), but border radius on highlight text is a popular look. It's so popular that in fact there's no way to not have border radius on Instagram. Just because we don't love it is imho not a great reason to get rid of it.

miina

comment created time in 2 months

pull request commentgoogle/web-stories-wp

Dashboard: Integrating amp-animations into a generated amp-story

@mariano-formidable nice, this looks good at first glance! No bandwidth to do a full review, but I think @dvoytenko would probably catch everything.

mariano-formidable

comment created time in 2 months

issue commentgoogle/web-stories-wp

Define min/max values for input fields

@o-fernandez mostly seems good, but I would not limit width/height to 10. Otherwise you can't create thin rectangle lines, something we found today is needed as workaround until we have lines / borders.

o-fernandez

comment created time in 2 months

issue commentgoogle/web-stories-wp

Drag and dropping shapes results in a shape that is bigger than thumbnail being added

ooooh - yes, the blobs were always wrong, AFAIK. Need to be corrected. Maybe something for @wassgha

jhtin

comment created time in 2 months

issue commentgoogle/web-stories-wp

Drag and dropping shapes results in a shape that is bigger than thumbnail being added

This must have been broken recently. Was working perfectly before the aspect ratio changes.

jhtin

comment created time in 2 months

issue commentgoogle/web-stories-wp

Stories need to appear in the default loop / WP homepage feed

Nice! This is good enough for now imho, agree with Omar.

pbakaus

comment created time in 2 months

issue commentgoogle/web-stories-wp

Stories need to appear in the default loop / WP homepage feed

Confirming that we'll scratch auto-post for now, and go with something @o-fernandez has said. We just need to make it super trivial to create the new post after publishing the story.

pbakaus

comment created time in 2 months

MemberEvent

issue openedXaymar/obs-StreamFX

macOS building from source: clang: error: invalid argument '-compatibility_version 0.8.0' only allowed with '-dynamiclib'

<!-- Hi, thank you for taking the time to report a bug/crash/freeze. --> <!-- Please make sure that you fill this out in it's entirety. --> <!-- Unfortunately I will have to close issues if it has not been filled out. -->

Description

<!-- Please describe the bug/crash/freeze in its entirety, including how you made this happen. --> <!-- If you have screenshots of the broken behavior, please attach them. --> <!-- Additionally, if you have log files, please ATTACH them. Do not paste them into this -->

Hi, I'm trying to compile on MacOS as per your instructions, and make fails with the following error:

[ 99%] Building CXX object UI/frontend-plugins/streamfx/CMakeFiles/StreamFX.dir/source/gfx/shader/gfx-shader-param-matrix.cpp.o
[ 99%] Building CXX object UI/frontend-plugins/streamfx/CMakeFiles/StreamFX.dir/source/gfx/shader/gfx-shader-param-texture.cpp.o
[ 99%] Building CXX object UI/frontend-plugins/streamfx/CMakeFiles/StreamFX.dir/source/UYX5XTB5RZ/qrc_streamfx.cpp.o
[100%] Linking CXX shared module StreamFX.so
clang: error: invalid argument '-compatibility_version 0.8.0' only allowed with '-dynamiclib'
make[2]: *** [UI/frontend-plugins/streamfx/StreamFX.so] Error 1
make[1]: *** [UI/frontend-plugins/streamfx/CMakeFiles/StreamFX.dir/all] Error 2

I'm not sure if at all related to #229 as the errors are completely different, but it is suspicious that we seem to be having problems around similar system conditions. Let me know if I can provide any more info!

System Information

<!-- Either fill out the following or attach a DxDiag file. -->

  • Software Version: 0.8.0 (I think?)
  • Operating System: MacOS 10.15.5 (Catalina)
  • XCode: 11.5

created time in 2 months

issue commentgoogle/web-stories-wp

Stories need to have valid OpenGraph & Schema.org metadata

@pbakaus should we implement things like Twitter Cards or Open Graph tags ourselves to meet the minimum requirements for this? Or rely solely on third-party plugins like Yoast SEO (see #113)?

Yes, we should definitely add these ourselves. We can allow Yoast and other plugins to override/complete them though. Sharing our stories should render nice previews out of the box on Twitter & FB. /cc @o-fernandez

pbakaus

comment created time in 2 months

MemberEvent

issue commentgoogle/web-stories-wp

Add confirm dialog when trashing a story

Most app and editor separate managing and creating. I would like remove the Move to trash button from the Document settings and allow managing stories only in the dashboard. @pbakaus If you're good with this?

yep. @o-fernandez chime in if you have thoughts here as well. I always found it supremely strange behavior in Google Docs, for instance..

swissspidy

comment created time in 3 months

issue commentgoogle/web-stories-wp

Changing font family can result in "multiple" for font weight

/cc @o-fernandez

My vote goes to allowing 'faux bold' (system level bolding) as fallback for when there's no bold variant.

miina

comment created time in 3 months

issue closedgoogle/web-stories-wp

Background img does not respect containment boundaries at center position

Bug Description

When the background layer is dragged and perfectly centered, it ignores the containment/boundaries of the page.

Expected Behaviour

Background should always be covering the page.

Steps to Reproduce

Drag the background img, and position exactly in the center. For more pronounced effect, drag your cursor to the bottom of the page.

Screenshots

Screen Shot 2020-02-22 at 7 56 55 PM


Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

QA Instructions

closed time in 3 months

pbakaus

issue commentgoogle/web-stories-wp

Background img does not respect containment boundaries at center position

Can't repro anymore, let's close for now.

pbakaus

comment created time in 3 months

more