Magento PWA Studio, 14 Feb 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PWA Studio Community Meeting 14 February, 2020

Description

Core Team demos: Image defect, Quantity Update component, Filters Component
Community Corner: Update to SEOSnap read.me

A

Alright, let's get down to business, exaggerated, hi everybody and welcome happy Friday. We have another kind of community synching demo for today. I think our content for today is relatively light on our side for demos. So we'll do a couple of demos on what the team has worked on this week. We have a particularly nasty defect. How that Andy's been working on we've got some of the quantity selector feature work that Stephan, alongside of Brendan falkowski, has been working on community and then we'll kind of open up to any questions and a thoughts.

A

Any feedback from the community. Everybody on the line so yeah.

A

B

Don't start with this.

B

Symptoms: yeah! Yes, so if you're using our image this week on our demo site- and we had some reports from people using it community folks using it as far back as 400, that some images weren't just weren't showing up. So we didn't push any changes this week.

B

But we noticed that chromium blink release version 80 at the beginning this week so kind of right from the beginning, we had an inkling that that was related. So we started to investigate these images. Are loaded, lazy, loaded, so they're using the loading equals, lazy, attribute relatively and it's been around six months or so I guess and the image component is applying a styling display:none, two images that haven't loaded yet and then once they have loaded via the on the attribute.

B

We display them. So we determined that the onload callback was never firing and that's odd because that's been around forever tried and true, and that was because the browser was never requesting the images in the first place as of this week.

B

So, let's see yeah. So we realized that was because of the display:none and combined with the fact that the images are a Seif lazy loaded, so chromium browsers can use whatever here stick they want. This is like not spec, this ty hat when the browser should request these images. The lazy loaded images I mean so they can use whatever here sick they want, and so we think that they are making CSS and specifically display:none into account if they should fire off a request for these images.

B

So it should also be noted that only some of the images weren't working like most, notably the logo, was wasn't showing up so that was kind of a big deal. Then we also saw some product images that weren't showing up, and things like that so I think. That's weird wonder why that is so dug into that, because actually also a placeholder request.

B

If the image dimensions aren't set like, if you don't set a height and width, it sends out this like placeholder request and it fetches the first two kilobytes of the image it downloads that and it's time to figure out like the height and width and how much base on the page this image is gonna. Take like you know how to lay it out. So there's no jank and jumping once the image actually lives.

B

So we found out that the images that weren't working did have their height and width explicitly set. So this other placeholder request was never taking place, which meant that the omelet was never firing, which meant that we never show the images so yeah, so that caused the bug to happen sometimes and other anyway, there's a whole mess. My hair's been a fire all week, trying to figure this thing out, because it really has nothing to do with us.

B

But anyway, the fix- that's numbering now in PR form, is moving away from display:none to visibility:hidden, and that was kind of we determined the smallest, because this is gonna have to be like a hot fix or gonna release this to y'all. But in the meantime, if you want to do it before we just change the image from when it's not loaded to this from display:none view visibility:hidden, we still got.

B

B

Yeah, that was just a rollercoaster whirlwind of My Week this week and it's not done yet so yeah I'll keep you posted, but we.

A

All thank you for jumping on this particular issue. Yesterday the PR is 2164, so image issue, or you think, even more importantly, contribute to the Deaf part of helping feel free to go into the the PRI 2164 and and check it out. Alright Oh any questions for Andy.

B

Did I should mention also that there's lots of good ideas about how to make the image component better and we had those issues, but for this specific PR, it's just trying to like, like I, said kind of the smallest fix possible hot fix type of action, so not trying to refactor the whole thing, even though that probably is coming.

A

Alright great so next we have Steven.

C

Alright, so I was working over the last couple weeks, along with Brendon falkowski who started the start of the PR, got this a good state and then I'm been trying to work on actually I'm like hooking it up to the back end, so that when you, when you update the quantity, the totals and everything changes first, you can notice what any was talking about on here. The images are unloading and that's because of that display:none issue. So we can. We can actually just like.

C

But we know why that's happening, and so once we get that fix out, they'll start showing up again, and this won't look like a wireframe, so yeah the quantity, the quantity select or the update quantity component here looks pretty simple, but it's a little bit involved. That said, this is a text input and you can, you know, set this to whatever quantity. You want. There's a blue right now, there's a blur effect. So when you tap out it, you might have seen it on the screen. I, don't know it's a little bit.

C

It's not too much contrast there, but it kind of like Gray's out and disables everything for a second and then it updates, and it's really really quick. You see the the price has changed over here. You could also use the toggle button, see it grayed out again to change the quantity we have in all the defaults so that when you span this button you know it doesn't submit a bunch of requests, but it does.

C

It waits just as just like a second or 500 milliseconds after the last press to actually end that call additionally right now, the current user experiences to when the user entered 0 and leaves it's actually the same as removing a thing. So, whether that's drawing or not, you know, this is the design that we came up with to use, but you can't actually go to 0 by clicking the negative button.

C

So really the only way to remove the item is either to click the kebab and then click remove or to manually, set this to zero and tap away. There's also some validation stuff that I think we've run into. So this is a text input, but we have to mask it because technically, if you make it a number input, the letter E is a valid number as an as an exponent, at least in chrome. So this was a number type in the field and then you put like you know: 20 22, I.

C

Think it's like or e. You know.

D

Like like, if you text in, will you get like the whole keyboard and not a number input? The primaries? Oh.

C

That's actually a really interesting point, so maybe maybe given that, if we're trying to be mobile first, it would be better to make this number input and then do some sort of masking that prevents e for being a but right now right now, if you don't, if you put, you know you can put numbers, you can't put anything else in Chrome I'm like pressing random buttons, you guys, and if you try to press a life-, that's also not working so right. Now.

C

It's just messing that input so that desktop I can only in put numbers but yeah I haven't actually tried this on mobile. So thanks Tommy, that's got you covered, don't worry! These are anyway. That's.

E

A really good, that's a really good catch man that.

C

Actually yeah, it actually is totally valid for you whenever you're entering something. So anyway, it's a little more work, probably to do on this. It's not quite emerged yet so you'll just see the basic like it's low, like minus one plus on the current develop branch, but soon this will get merged and and that'll just be one step closer to the card completion.

C

F

Close yeah awesome any questions.

A

Receive it I think I can also show those filters, tough.

C

Question in chat: oh yeah, Zeppelin.

A

Nevermind, ignoring is it a question for me, are you sure evaluate, has an exponent and that as Euler's number II, approximately two point, seven, seven, one eight! Oh, you know what I don't know that.

C

That's a good question.

C

You know I mean honestly, honestly. Maybe we don't care, because if, if you use cases mostly that people are gonna be entering numbers to the phone, then they're not going to be pressing heat or, if they're on desktop and they happen to press key like.

D

Know what happening yeah do you want to prevent nobody from body and exponential again.

C

E

I didn't actually know, I didn't actually know, but just this number input that this number input have a step attribute. Yeah.

C

So that was actually that's another interesting point Island. So on chrome. This is a text input now, but when it was a number input number type input, there was actually a stepper that would show up here. That was totally like. Like Native, it was a browser thing. So so we have like our step buttons and there's like this little thing over here that you might accidentally click on so I actually feel like making it just a text. Input is a better experience, but.

D

C

D

Still tell it to like pop the number.

C

E

Control is style, able, I, believe, I. Think it's as pseudo elements. You know you'd want to check on support of that, but I think like Tommy said, if you use the input type number it gives you that advantage of the correct keyboard, some people even use input type tell for telephone number, which is like I, can get a numpad yeah like we, you can style the thing I believe.

C

Yeah, it would be like I when I picked this up. Most of it was already pre styled and pre-written, so these are actually separate poets, these these plus in my oak ends. So if it was something like as easy as making this a number and then applying the CSS to make it, those like increment decrement, move over to the side and be buttons, then sure I could give that a shot. I, don't know how easy that's gonna be. This is kind of dictated by grid.

C

It definitely be some some CSS taking there yeah.

G

C

It's not merged and there's been some, you know it's close, but but it's not more accessible in progress is something I can work on.

C

Any other questions any other guesses as to what E is.

C

Another thing I've been working on so I.

H

Wouldn't push in on that selector? Can you guys hear me? This is Manish, so so some of the Magento clients this is the configuration from the backend where we can enable this single points for selling. Let's say I mean Windows the sailcloth, so the silicon decimal points. So if we are not allowing float here, then it will break that functionality.

C

Good point so you're saying that back in configuration there are awesome, it's possible to set a non whole number. Yes,.

H

So this is the back in configuration where we can define whether or not the point that's.

C

Not even something that I had taken into consideration when I when I pick this up, but we can talk about it afterwards or we can are the pr's up I, don't it's a 1-1 nine? So if you have, if you have a feedback, I definitely would appreciate or it's PR 2115.

C

If you have feedback I, don't want to talk about it in here. That'd be great.

C

We can also open up follow-up issues to sort of follow on to expand the use cases because, as it is, it's already gone through review his current form. So if we change up the functionality to much, it's gonna be kind of resetting that that clock, but that's a very that's a.

D

Valid point we should talk about it offline is that, unlike the b2b radar, that's usually more like.

A

We have accounted for b2b to date, so I mean in the end. We we will definitely explore that if we follow up.

A

C

Aneesh yeah I hadn't, even yeah I, just going off the spec I think yeah all right, no more questions.

C

There was a filter, though this is in progress and it may break a little preface there, but everyone is probably familiar with a filter button that you see when you're on the category page of the search page right now, this pops out- and this was populated by some craft fuel- a response data that told us what was filterable in two three four that has changed from this filters, object response to what's called aggregations now and there's still some back and forth as to what is what constitutes a valid thing to filter on, because these are these are customizable dynamic attributes.

C

So you know not all your products will have a style. Not all your products will have a material or color, though these these attributes have to come back into schema, but basically doing a doing sort of an intersection between between what this product attribute filter input allows. So you see, it's got fashion, color material fashion, style price, all this stuff and what comes back from from aggregations, which are just a just a bunch of codes and labels and and and what options are, are possible.

C

We we end up with a with this with this view, so it's that intersection of the aggregations and the possible filters that results in this filter modal selections. So you can see, I can apply here and now we're actually applying those filters to the top. Probably won't look accurate, because the data is a little bit crazy and some of these things don't don't look like their images. I guess the colors may be off, but we're we are sending these filters now to the server graph, kills responding with new products and were displaying those products.

C

So that's that PR is also currently in progress.

C

Is PR 2166 if you have any thoughts or opinions on that, I definitely like to hear it. I've been running into some weirdness with how historically luma has done things and how filter how how people intend filters to be used, for example, prices, price and category filtering on a category pages a little bit odd, so I'm still trying to understand with those right now. But the cool thing is after this PRS merge, hopefully we'll have filtering a filter view that actually functions, and you know, instead of just being a UI I know, that's been asking.

I

Quick-Quick pension, so will you stop the filters response as well from Nvidia creations or the new version only supports the aggregation response and you are yeah.

C

So so, if you look at the products query, you see the products query very gusto and okay, one expand. So you see here they're the filters response, the old thing that we were doing to to see what was filterable or a given page was. We were requesting this filters object. Apparently that is deprecated and they were recommending with these aggregations instead and so aggregations are just like for the current set of data that you're getting back. What further filters can you apply to that to, though, to that information to further filter down?

C

So so that's this list of that's that's what we get when we're querying for products.

C

But when you're, when you're requesting when you're actually requesting so this is the response right here, but when you're requesting information you have to pass a filter, and so this is see these are predefined in the schema.

C

So I guess that's what I was saying where we have to do like an intersection of what is possible input and what and what the API is telling us are options that we can say if that makes sense a little bit like we couldn't just. We couldn't just display based on this input, because we don't know what possible options there are right like if we just say: okay, fashion material is an input. How do we know in the filter model what to display? So that's what aggregations tells us it says for fashion material.

C

These are the possible options that you can select that was previously given to us by filters. But now that's deprecated, I, don't actually know if I answered your question.

I

I'm asking this because they'll we already started to build on top of the theaters response. You're.

C

Using this and.

I

I, just I'm just wondering how much how much effort it will be T today. Oh it's.

C

Actually, it was actually not a lot of work to switch in this pru. If you look at it, you'll see some places where there is I just went through and I met what the filters response had and then what aggregations gives and they're pretty much there's there's like some place. It was like value and now it's like value ID or something someplace that might have been named, but it was actually labeled in the response.

C

So I just did some some changing of where we deconstruct that data and and it all works, just fine, so I would recommend taking a look at the pr to kind of see how where, where I'm doing that, where I'm using the word aggregations now and you'll see what I'm doing to make that switch. But it was pretty minor that that specific part, I'm moving from filters to aggregations. Thank.

I

G

Yeah, we feel your PIN, though we built the modal off of filters and out Center education.

A

Yeah, it's so we're an active conversation. I think support ecology, where I can active conversation of working with the graph QL team to work through something I think the issues here make some requests and so well of course, keep everyone up to date with how that's going I think as we either make additional requests or maybe make bug items here will comment on the PR. The issue about it so active definite, active.

C

All right, no more questions.

A

So normally Jordan is here to talk about community corner. He had a mandatory company meeting as he has a day job, so you could not make today's meeting, but he did want to call out that for SEO snap, which obviously he demoed for the larger group during her SSR meeting and he's talked about a couple times and our the open source solution for SSR that that he presented he did update some of the documentation in the readme for SEO snap.

A

So if you were asking questions about better documentation, it is there now- and he asked me to cover that particular for him today. So I don't have a demo for it. Obviously, but hey gasps Jordan about it.

A

So we don't have anything I think in general. If a community corner today will call up again next week, so any just kind of open floor for any questions, comments. Jimmy James, you guys have anything on the line before you jump in here.

E

No thanks, I'm good there's a lot of stuff in the pipeline and I'm excited to share it when it's ready, but not before, because those demos are frustrating.

G

Yeah we're mostly just trying to get the all the cart work wrapped up and merged in, so that we can actually start looking at the next major chunk of work in the next major ethnic here. We'll check out.

F

A

Anyone else any other questions on the line.

A

Great well, that's it for day, then we'll wrap it up a little bit short today and then Montesa.

B

We've got the magenta you folks.

A

Creating a helping curry course, content for magenta you or a PWA.

J

Everybody here do a tremendous job. The course has been developed bouquets. It is basically a three-day course has been developed. It's going to be taught first as a special structure, late-- class and then we'll be on request, but then, after that will be an on-demand class. The other thing is is that we also created the happy session for imagine day on PWA, and we have two folks here, two partners who are going to deliver it, though, that.

G

J

I gotta tell you the effort that they did was just tremendous, and so it's too bad they're in the room. So they heard me say this, but really they just ended absolute, fantastic job and you know thank you, for you know providing Ravenna iron James.

J

You know really truly just great players in this and, of course, you can see the rest are all partners right, so partners carried the day and so anyway, just just again. Thank you. Everybody.

B

E

Practiced every time.