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.
Meta viewport done right.
AMP Start source code and templates .
The AMP Project Website.
pbakaus/domvas 353
Domvas implements the missing piece that connects the DOM and Canvas.
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
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.
comment created time in 11 hours
issue commentgoogle/web-stories-wp
nope, we'll have to do this after 1.0 stable. Great suggestion though!
comment created time in 17 hours
issue commentgoogle/web-stories-wp
Scroll wheel in edit mode does not zoom the image/video
No.
comment created time in 17 hours
issue commentgoogle/web-stories-wp
Letterboxing when viewing story via Instagram in-app browser
Not need for stable.
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.
comment created time in 13 days
PR opened google/web-stories-wp
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.
pr created time in 16 days
Pull request review commentgoogle/web-stories-wp
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:
- a scrollbar that is styled the way we want to
- 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:
- Compromise on styling, but do auto-hide (note: the always-visible scrollbar would still be styled)
- 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.
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.
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.
comment created time in 24 days
pull request commentampproject/amphtml
[amp-story-player] AMP extension for the amp-story-player
OMG amazing!
comment created time in a month
issue commentgoogle/web-stories-wp
Wellbeing Template: Use correct font weight for Source Serif Pro
nice!
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.
comment created time in a month
push eventpbakaus/videoTester
commit sha f81756fce9e4ed0dbf17a279b86cd170bcceef5c
initial commit
push 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.
comment created time in a month
issue openedampproject/amp.dev
Link anchors don't jump to the right heading
Helloooooo!
Just found this bug:
- Open this link: https://amp.dev/documentation/components/amp-story/#live-story
- 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!
comment created time in a month
pull request commentgoogle/web-stories-wp
Templates: Beauty Base Animations & Links
Looks awesome!
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.
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.
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 backdropfit- subset of object-fit, can be set to eitherfill(default, stretches the backdrop to fill the container) orcover.
Additional context
This is what this looks like:
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.
comment created time in a month
issue commentgoogle/web-stories-wp
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 :)
comment created time in a month
issue commentgoogle/web-stories-wp
@samitron7 love it! Ship ship ship :)
comment created time in a month
issue commentgoogle/web-stories-wp
+1. I sense that users will want this, but OK for me to wait until this turns out to be true.
comment created time in a month
pull request commentampproject/amp-wp
Optimize AMP_Tag_And_Attribute_Sanitizer::get_missing_mandatory_attributes()
OMG
comment created time in a month
push eventgoogle/web-stories-wp
commit sha b4f37e31afe967c72d7cc400497d36b0a7f5c239
initial micro site commit
commit sha 855cbd0c761e19f1ad54705bfb2b96854868af43
optimized images
commit sha 11495b6fca804d516f9c4c454e0efc6037d201b0
fluid design + fonts for Desktop + tablet
commit sha 10ceeb59765c91f7f732cde726916b096ba7df07
alright, here's a mobile version
commit sha d43ace357ef3a03dda59cc5cb5cb9df4cdd16bf5
Merge branch 'gh-pages' into beta-micro-site
commit sha dfba5180cf6a332cab6bad6990f561a5aae911e3
Update redirect URL
commit sha 695abc2db83b03a7c3d67fe98060a0e4d6dc74ec
Optimize template image
commit sha 56bf69faf7d2244603c391694366724f3072ea6f
a few fixes, link colors etc.
commit sha 85184e37e2e02c3bea96ed02b9f4f862dd026472
added tips story, numerous other improvements and fixes
commit sha edad989fa34a60e749cbc3675557cf22325861c1
remove link to feedback form until we get privacy clearance, fix some small issues
commit sha 068dcb3db5204f23846bc84046f194654b156953
smaller border radius
commit sha fd4414217d27fe93e53ed109371d716690cad435
Update beta/index.html Co-authored-by: Pascal Birchler <[email protected]>
commit sha f8d9d5fae372feaa26e78a99be7486f801ef27be
added correct download links for beta
commit sha 4c82c2ccfe4bd765e30f1d873ec311c48d411f78
Remove .DS_Store file
commit sha 99037e8eba7fabb8f714f33ef98185e923e1554b
Merge pull request #2832 from google/beta-micro-site Beta micro site
push time in a month
PR merged google/web-stories-wp
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..
<!-- Please reference the issue(s) this PR addresses. -->
Fixes #2650
pr closed time in a month
push eventgoogle/web-stories-wp
commit sha f8d9d5fae372feaa26e78a99be7486f801ef27be
added correct download links for beta
push time in a month
PR opened google/web-stories-wp
This fixes a remaining beauty template image and replaces it with a royalty free image and copy.
pr created time in a month
issue commentgoogle/web-stories-wp
Dashboard results scrolling to top on pagination
Confirmed in UAT.
comment created time in a month
push eventgoogle/web-stories-wp
commit sha fd4414217d27fe93e53ed109371d716690cad435
Update beta/index.html Co-authored-by: Pascal Birchler <[email protected]>
push time in a month
push eventgoogle/web-stories-wp
commit sha 068dcb3db5204f23846bc84046f194654b156953
smaller border radius
push time in a month
push eventgoogle/web-stories-wp
commit sha edad989fa34a60e749cbc3675557cf22325861c1
remove link to feedback form until we get privacy clearance, fix some small issues
push time in a month
push eventgoogle/web-stories-wp
commit sha 85184e37e2e02c3bea96ed02b9f4f862dd026472
added tips story, numerous other improvements and fixes
push time in a month
Pull request review commentgoogle/web-stories-wp
+<!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 > 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
comment created time in a month
push eventgoogle/web-stories-wp
commit sha 56bf69faf7d2244603c391694366724f3072ea6f
a few fixes, link colors etc.
push time in a month
pull request commentgoogle/web-stories-wp
Alright, getting too sleepy now but managed to squeeze in fluidity on Desktop and a mobile breakpoint for common mobile devices.
comment created time in a month
push eventgoogle/web-stories-wp
commit sha 10ceeb59765c91f7f732cde726916b096ba7df07
alright, here's a mobile version
push time in a month
pull request commentgoogle/web-stories-wp
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.
comment created time in a month
push eventgoogle/web-stories-wp
commit sha 11495b6fca804d516f9c4c454e0efc6037d201b0
fluid design + fonts for Desktop + tablet
push time in a month
PR opened google/web-stories-wp
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
pr created time in a month
push eventgoogle/web-stories-wp
commit sha 855cbd0c761e19f1ad54705bfb2b96854868af43
optimized images
push 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.
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
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.
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#
comment created time in 2 months
issue commentgoogle/web-stories-wp
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.
comment created time in 2 months
issue commentgoogle/web-stories-wp
Add description copy to templates
I'll do it.
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.
comment created time in 2 months
pull request commentgoogle/web-stories-wp
Single blob shape + fix blob alignment
works for me! Thanks
comment created time in 2 months
issue commentgoogle/web-stories-wp
Images added as different sizes when dragging vs clicking
yep that behavior sgtm.
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.
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.
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.
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
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.
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.
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.
comment created time in 2 months
issue openedXaymar/obs-StreamFX
<!-- 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
comment created time in 2 months
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..
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.
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
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.
comment created time in 3 months