Layer5 Websites, 20 Jun 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Websites Weekly Meeting (June 20th, 2022)

Description

Layer5 Websites Meeting - June 20th, 2022

Agenda:
layer5.io
- MeshMap CTA
- Vote for your favorite logo
- Pricing page updates #2909
- (Volunteer needed) Separate Meshery Cloud page, using a query parameter, to distinguish between sign in and sign up.
- Dark mode updates #2910
- Rotational Call to Action framework

smp-spec.io
- Suggestions on the vertical sidebar color

meshery.io
- UI: Copy to clipboard tooltip is not aligned/scroll always visible #715
- Some questions about the catalog
- Sorting of columns in past results page of compatibility matrix and some updates

Join the community at https://layer5.io/community

Find Layer5 on:
GitHub: https://github.com/layer5io
Twitter: https://twitter.com/layer5
LinkedIn: https://www.linkedin.com/company/layer5
Docker Hub: https://hub.docker.com/u/layer5/

A

So hi everyone welcome to the websites call. So, let's begin with the introduction of our newest members. So if you're on this call and you're attending, this call for the first time uh feel free to introduce yourself to everybody over here. So do we have anyone who's attending the websites call for the first time.

A

I think I see a couple of names, so you could volunteer or I'll start calling out your names in a minute.

A

Anyone who's new on the call, and you want to introduce yourself to everyone yet.

A

uh Meanwhile I'll add the meeting minutes link to the chat uh style. If you want, you can unmute and you know, introduce yourself.

B

C

Hello- everyone, I'm sahin and I'm currently pursuing the tech guns um cac from vit ap and I'm currently working in um uh js issue in the earlier phase, but due to um other some people are not uh there and they are on vacation. That's why it is on hold right now, so I thought I will work on some other issue which is uh league of legends in this meeting. I guess thank you.

A

uh Thank you, sahih anyone else, who's attending the call for the first time here.

A

Deep, I don't think I've heard from you before is this: your first website's call.

D

No, it's not my question um uh or the earlier member.

A

Okay, okay, so I hope everyone has added their names to the meeting minutes. I think we can begin with the agenda items. If you have anything to discuss today. Please add it to the minutes. So the first topic is by me. So uh recently we added uh a call to action for mesh map, so this is how it looks now I sort of had a different animation, but lee worked on it a little bit as well, and this is the final state. So uh what do you guys think about this?

A

Any suggestions views anything.

A

Do you guys, like it.

D

Yeah, it's wonderful. I also like tweeted on twitter, also about it.

A

uh All right so talking about mesh map, I've added it to most of the pages like uh most of the project. This is the main projects page. We have the docker extension one over here, but I think I removed it because we have the docker extension mentioned here as well. It's on the smp page smi page and the docker extension page for now, since our main focus has shifted to mesh map right now we want. You know people to get directed to mesh map from everywhere.

A

So uh talking about this, our next step has to be like making this waves. The mesh map, page prettier, so uh first things. First, we have a what going on for the logo for choosing a logo for mesh map. So if you haven't voted, you know what the for the logo that you like the most out of these options. Please do so I've output.

A

Did you have something to say.

D

No sorry, it was unmuted. No sorry.

A

Okay uh right, so you guys can go vote for your favorite logo, so uh we have added small features like this maximize minimize uh feature to the images here, but this page still needs a lot of work because now, since we're linking it from all the other pages, it's on the nav bar, as you can see it's the main button here, so this has to be the most good looking page on the entire site.

A

So if you guys have any ideas as to how to improve this, please feel free to uh you know either work on it or share your ideas with us. Anything works so yeah. That's all about mess map page. Anyone with any suggestions right now about the call out or about the page itself.

B

Yeah, the callouts, the call to actions they're a little big, actually potentially yeah.

B

I don't know just uh food for thought. um People won't miss him, that's good um there. So, just for clarification, we had been speaking about a call to action like rotational framework in which people would create small advertisements like this one like a call to action and that those call to actions could be inserted into a framework that would help rotate different uh advertisements different call to actions through collections like blogs and news.

B

This one isn't one of those. I don't think, um but but I wonder if we have our first rotational call to action just yet.

B

Does anybody know so um mesh made nikhil worked on this he's he had demoted it once or twice.

A

Yeah, I don't think we have an example up yet, like the framework is there, but we are not using it anywhere as of now okay, he is included mainly for the blogs page.

B

A

B

No support for news just yet then.

A

I'm not sure about news I'll have to check because last time on the call he mentioned blogs, I don't know if he made updates to it later on, uh so we could use it for any of the upcoming blocks or add it in one of the older ones.

B

Nice, okay, yeah I'll, take a note in the meeting minutes about the possibility of a contributor taking that same rotational framework and well, first, just verifying whether or not it's supported in the news collection. Wait is that right? We want it in news.

B

Maybe I'll have to think about that. Maybe that's not such a good thing to do um so. Aside from that suggestion, perhaps um I'll take a note to the extent that someone wants to try it out for the first time. So hopefully, everyone on the call has a little bit of um has an idea as to what this rotational call to action framework.

B

Is it so if you're, a site visitor you're reading a blog post, um maybe the blog post at some point says: oh hey, come join us on the discussion forum or have a look at the docker extension or try out mesh map or whatever. That message is that call to action message.

B

Is that this mock-up that we're looking at right now identifies three areas to drop in a message, um and it's it's nice, because that way the messages, the call to actions they can be kept fresh, which is to say that they that they're not necessarily hard coded into the page itself.

B

So, at the time that this particular blog post was written, it called it said: hey go, do this, and actually whatever that message was it might be old or it might have been like um hey. We have an upcoming beta for the meshery extension inside of docker and come come, try it, but after three months it's like well, no, no, it's not in beta anymore, it's out so just come, so we would want for that message to change and be refreshed and so without having to go through all of the old blog posts.

B

um This dynamic framework allows us to centrally control which messages are shown and that way we can rotate them through.

B

So I don't think anyone has put it to use just yet I'll put a note in the meeting minutes in case someone wants to try it out for the first time. So this would be I'm good.

A

So uh yeah moving on.

A

uh If anyone wants to try it out, uh you know you can do it you, you can open an issue for us to keep track uh on github and move forward with it uh right. So next up, I have the pricing page updates from last week. So that's live that's published on the website now.

A

So this is the first iteration. This is uh yeah, so we have a button. We have a switcher, monthly and yearly yearly being the default right now, the switcher. You cannot see the function functionality of the switcher because we have removed the price for now, but once we add prices, you can change it with the switcher, so I've added the collapsible uh detail section the cards as well.

A

For now, so we have free enterprise team and uh this one is disabled for now, but once we are ready for team, we'll have something we'll have the button say something else, and this one is the highlighted one. This is what we want our users to begin with, so this is like moving the. This is just a summary. Moving on. We have the detailed comparison table. This also has details for what the values for what the categories are.

A

There are categories, as you can see and uh like clearly distinguishes what which tier can you know do and what they can have, and this is from last day we have the uh reviews and the faqs so yeah. These are the updates. This is the first iteration. We will work on it more and more.

A

So what do you guys think about this.

A

If you have any other suggestions, maybe about the background or anything else, uh feel free to drop it in.

B

Yeah or maybe about how features are compared so so this is um so this set. This page is new if the page isn't and unless I'm mistaken, it's not linked to anywhere, um but it is a public facing page and at some point in the very near future, there will be any number of links pointing to it, um and hopefully it is.

B

It achieves a couple of objectives. One is easy for people to understand like um one of the questions that I'm I might have as a visitor to this, so this is for measuring.

B

um It might be that I would come here and for me being the cheap bastard that I am I like free things, so I would be you know I would hone in on the free like free. They had me at free. I probably wouldn't necessarily go beyond that. I might want to explore and look at what I'm missing just to know that I'm okay with missing those things, but so so I started free one of the first things I mean.

B

If I was really being detailed about this- maybe maybe you know, but if I would it says free for you know it's oriented toward personal use, it doesn't say the word oriented, but I might infer that I'm sorry. I might um deduce that from the inference that they've put here by the word personal um boy do the words infer and insinuate. So often like switched around someone, it's like someone's saying, like oh they've, got a bug bite they're like yeah they're like yeah. I just have to itch it. It's like!

B

Well, no, no, yes, you mean scratch it, but okay anyway. I guess that. Maybe that doesn't happen where you guys look um is the the first question that I might have is whether okay. So what are the open source features, because I see that these are the free ones and that's you know great, but this builds on top of the the features that I'm already getting just using the open source project, and so, if I sign up I'm entitled to this additional list of features, that's great.

B

I wonder if there's reference for what's in open source as well, um that might be a question that someone had or that that might be a question that I would have I'm not sure um and then, as I look through actually, if I click okay, one thing too is I: if I click join for free great, it's um it. It brings me to well a sign up page, although.

B

Again this is you know, although I might not understand this is a sign up page um there's a docker software engineer, an engineer that works at docker is um using meshri and it reached out recently saying hey. You know what uh I want to use this even more. You know where's the best place to go to sign up to get an account, and um he had already seen this screen, but I think his his presumption was that this isn't a sign up screen.

B

This is like hey if you're already in the cool club- and you already have an account- you can come sign in here- but not sign up like sign up is a different thing, and so so my sense of that issue is that most of us are so well trained that there's a difference between sign up and sign in that that sign up inevitably has empty text fields that you fill in your email address your first name, your name, your email address your username.

B

Whatever those fields are, I think that actually threw him off and sent him having to send an email to ask for an account.

B

So just two things that come to my mind about: maybe people would have questions on I'll put those into the meeting minutes as well so cause. I know um aditya his fingers hurt today. So he's not gonna be taking any mediums.

A

uh But are we working towards making a sign up page, so people are right because sign up and sign in difference.

B

Mr cambodge, I don't know, is that something you're working on.

E

uh Yeah, I will work it uh work on it after the docker theme.

B

Nice. Okay. That means that probably maybe that is open for someone else to work on yeah his fingers might hurt as well.

B

Yeah she's got a few, so actually there's some jokes flying some sarcasm flying around, but actually so the reason that we discussed the type of thing this type of thing on this call is there's a simple web page, it's a single page that has these four buttons.

B

um It also has a modal if you hover over sign in or question sign in questions um at the at the. If you go yeah um right, there's a modal here where people can get like hey. Why do I have to sign in? Or what do I get or which kind of relates back to the pricing page that says: here's what you get anyway there we're in need of a similar form of this page that has an alternate set of inputs, so this particular um so this particular repo, this particular page.

B

It's part of measuring cloud. So this is of interest to someone um just signal in now or in chat, or what have you? um I created a bug recently and I forget who I was speaking to at the time, but there's a there's I'll mention this in the meeting minutes as well. There's a bug in the bottom footer, uh where youtube is slightly of a charcoal color, not of the same coloring of the rest, and so it's just a simple svg update, but just another one.

B

A

Anyone's interested.

B

In creating a sign up, then.

A

We should also like, I think, do something about this, because it wasn't very clear to me that this is a clickable thing. So maybe something about this part as well.

A

Okay, so I don't think we have elizabeth with us, she said she'll send her updates later uh her. Let's move with your topic, uh do you want to share your screen.

E

Oh yes, I'm feeling this.

A

E

Okay, sorry am I audible now.

A

E

Okay, so I was working on a dark theme of a layer 5 website, so the update is here. Basically, I almost completed all the pages in a dark theme and we have a svg's in a white now, if here it is dark and if it goes to light him, it goes back to his original color.

E

So yes, this is done yet and all the pages are now converted.

E

Okay, wait a second. I think it's lagging my screen.

E

uh So I think I can't show my all the pages of course here, so I recommend everyone to check out this pr. I created on a github. So yes, this is the update and I will complete it. I think in one or two days I will be done with the start theme.

E

Yes, that's it.

A

That's great, I think, in on the last call we were discussing uh moving to local storage rather than using cookies. Did you incorporate that as well.

E

uh Yes, I applied a local storage here. uh Basically, it's not uh uh available in this pr uh if it is not saved yet. But yes, yet, yes, uh I'm done with this local storage. I shipped it to the look cookies to local storage and navbar has also changed. uh I think in our previous meeting that bar was not set, and it's now in a dark team now, so that's it.

A

Okay and so what what did you do about the png images that are on the side like the svg or changing the colors, without the maybe on the blog post or stuff, like that.

E

uh Blog post, uh actually I I think I did that. uh I think here uh no, no, I have not done yet. I think wait.

E

Oh, no, it's not working.

E

I think just uh border it with the light colors it's not working yet I think I messed up somewhere in a part of code. I think it was working and it's not working now, but yet yes, uh it will be done in one or two days and things aren't working.

A

Yet, okay, so once you push your final updates, maybe just send in a load about the ones which are yet to do the ones which are completed, and anyone on the call you can go and review uh because, like this will need a lot of tv since it's an entire conversion department, so yeah, I I think it looks good like apart from I'll, have to review and I'll.

B

You know, apart from all of the mess-ups, you know just know that yeah so who doesn't love a dark mode like um most everyone or mo a lot of software engineers um appreciate a dark mode like maybe get some of that blue light out of their eyes.

B

um But there is a choice it looks like um so our has designed in the switcher at the top um yeah. So our when you're ready. It would really be helpful for others that are on the call to give feedback on this pr, because it is such a significant change and it is quite easy to to to overlook actually like here's.

B

Here's an example: it's quite easy to overlook um how you would make certain colors inverted if you were to scroll down a little bit to the section that has four of the projects listed like here, so I um so there's a shadow and- and this might be more of a style question than like- then it is actual guidance. It might be more of a question which is the cards themselves have shadows.

B

um I think, on the regular on the light colored site, those are just um black colored shadows or, like they're they're, quite diffused right there. It's very soft, very soft and near as I can tell in the proposed dark mode that it that conversion is pretty accurate. Like it's still quite a soft um background, it's the same. Color same color is used, so it's not like a light green like we use in south in other areas, the like visual element that grid of dots on the right hand side.

B

I don't know that there was a need for I don't it doesn't. I don't think that there was any change there and I don't know that there was a need for any change, but this type of an analysis or this type of a review is, is really what's needed to make sure that and actually our it would be really good. If you, if you wrote this down on your pr or which is um programmatically, what have you changed or like hey?

B

You went from the light theme and, as you put as you made the dark theme equivalent, what what's the conversion that you're doing so if it was light, if light had this color dark, had this color, okay and um well, how how are you doing that mapping?

B

I'm curious. um Did you find throughout the site like half the time, the cup, the theme colors were used and half the time someone just specified a color locally, a hard-coded one.

E

Okay, so basically, how we change the colors here is that we have this file. Basically honestly uh here. Yes, so if we, uh this is theme styles and it is basically for white color themes, so in our light mode- and this is for dark colors, basically- and if I change the hair, if I change the colors here uh and also change the colors here, it will basically change all the elements of this community text. Basically, and this is how it works.

E

This is how it is centralized, and this is how we change the themes here and this is it.

B

Okay, close okay, not good enough, but close to uh thanks for pointing that out. My ask of you is um to present the the difference, the conversion that you've done the difference between what was in light and what you're using for dark. So we can see what that difference is and evaluate and confirm that, like yeah, that was appropriate, or that was the direct in invert.

B

um The other part of my question was how, in what areas do you find that the colors were hard-coded versus using the theme.

E

I'm actually going deep down to the code that which colors how to put it there and when it is hard coded, I am directly changing it to the centralized codes. Basically, that's why I'm working on this.

B

Nice, how about what percentage of the time would you say that the theme was used versus hard-coded color.

E

uh I think uh majority was not hard-coded, there's been many of them. This was hard-coded like this was the hardcoded.

E

Navbar is hard-coded and many colors were actually, I think, majority of them, but uh was not hardcoded. Yes, that's it.

B

Okay and then, as you switch as you, identify those and update them, what do you, how are you updating them.

E

Okay, I am updating them. Basically, I'm adding a new color section like here, I added a project, shadow colors and it was basically black in original one. So I created this variable project shadow black- and I created this for our light theme also and I'm changing the colors directly from our global styles. Basically from that, there.

B

Okay, so you're removing the hard coding making reference to the global style. One of the first things that we could do to get some traction on your um new feature is to is actually that is where there's hard coding put in a central theme reference to the light theme, and we can move forward with that and begin to merge those changes um and then that will set us up for being able to move forward even more easily with the dark mode.

B

I might suggest just for my own peace of mind that potentially you you use the same file for light mode and dark mode, because one of the things that I'm nervous about is like some colors not having been taken into consideration or that they were taking into consideration, but the proposed dark color, the dark version of of it is perhaps not ideal.

B

So seeing them side by side would help with that understanding and then seeing them side by side for developers that reference it later might be helpful because you can see the difference, especially if a new color was ever added. They could see um adjacent to one another. What the difference is, if you're, adding things like shadow well, there are some shadow yeah. You would not want yeah go ahead.

E

No okay, yes, it is easily can be done. Basically, I can move this. uh I think object like thing in here and we can compare it to side by side like this. I think this is what we want here.

D

E

Yeah, I think so yes, it will be easy, it can be done easily. I will make those changes today itself and make a pr about this.

B

Okay in the for the hard-coded light theme: colors: okay, yes,.

F

A

uh Also, uh if you go back to your theme, the styles, uh there are some colors which are repeated right, like uh you can see side text diagrams. These are the same colors so, and these were already present in the like in the previous sheet that we have the things that we have so to avoid that, like, basically, I think what level of suggesting is. uh We have one color in the light theme cells and we have a second color for the dark theme cells, which is an invert of that direction.

A

So you don't have to pick up every component and have different. You know variables for the the colors. We just have suppose you have uh white over here. The exact opposite will be black over there. If you have a shadow color over here, the opposite will be something else in the dark so and since we use only our brand colors throughout the site, uh we shouldn't have such a wide range of colors that we have, it will just be a set of colors, and you know the opposites that we use in the right head.

A

So uh try to avoid the repetition in the colors that you have over here and you don't have the exact conversion possible. I know in some places it won't be possible, but you know to the maximum level that you can.

E

uh Yes, I will consider this. Thank you very much, uh basically, is some components are hard coded with a black color only so yes, I have to change the. I have to create a new color for that on a dark theme or a light theme. Yes, but uh if you have a primary color and the primary color should be a dark side, you know dark themed. Styles, I got the point just here, so yes, I will try my best to create less colors here and make this perfect.

A

Thank you anything else for me.

E

uh Should I stop sharing or any questions on this.

A

Yeah, so I think everyone will have to review the pr ones so once you have a detailed review, uh please add your suggestions on the pr itself. It will be very helpful so and try to make it detailed like like leave a suggestion right now, so that it's.

E

A

And for everyone else.

E

Okay: okay, okay, thank you. I will consider everything that you said guys said. Thank you very much.

A

Thank you, uh okay. So next we have uh aditya so baby. I think so. You have a couple of topics. Let's have you cover all of them at once,.

F

Yeah, okay uh I'll share my screen.

F

So, first, uh since I was working on the dashboard page, there was there were some suggestions regarding the color change of the sidebar, which I could not. You know actually figure out what color to keep, because any color I choose it was looking ugly. So I any suggestions for this would be great. uh I tried to change the toggle bar and I to make it more like the measuring ui page. If it's okay, then wait, then, if not, then I have to work on it again.

F

So yeah, I'm looking for suggestions on this one.

B

Yeah, just as any other color other than other than the same, the same color almost like if it was yellow like of the chevron. That's there if it was yellow, it might be a little too much of a but um cutting the opacity by half would produce a lighter um shade of green, but that is still of the same um base. Color or something like that might work.

E

F

Okay, okay, so decrease the opacity could be yeah and for the.

B

Sidebar right, yeah or, like the so, the when you go to the brand colors for smp, um which is on layer, five dot, io, slash brand well you'll end up finding is that that odometer with the or the speedometer, rather that icon or that logo, it contains a couple of shades of gray, a couple of shades of blue and a couple of shades of green.

B

So if you exit this, but if you scroll down a little bit, okay, it uh yeah, they could see the colors here, the colors section. If you scroll down a little bit more so there's a I guess, it doesn't call them all out that wait keep going a little bit okay, I guess it doesn't call them all out, but there's a teal blue there that might work for it's kind of a second. It's not your super bright primary yellow button, but sort of a secondary teal blue.

B

That still, you know, indicates to people that something else is going on there, but um doesn't have to be as eye-catching as the yellow.

B

If you download the um brand kit for smp um it will most likely will probably have a color scheme inside of it inside the bundle that should have the the the two or three other grays that are within there or the other shades of blue that are within there as well.

F

And that might give you another color to work with.

E

F

uh I'll try like with everyone and I'll ask for feedback, and if it looks good then then it will be done all right. uh That's for smp, and another thing I was working on is the uh catalog page uh I did manage to uh like the pagination like I did manage to work with pagination and it was working fine, but I was editing something right before the call and it just broke everything.

F

So I'm sorry, I'm really sorry that I could not show that pagination thing, uh but I have add few questions uh so uh in in this link uh when we are trying to go to a new new page for each pad each catalog pattern. uh We are specifying uh with this thing, but I could not find where this url is coming from, like it's not on the front matter, adding.

A

The smp page right.

F

No, no, this is for catalog.

A

Yeah yeah, I don't see the catalogue. Oh.

F

F

Yeah, okay, so we are referencing the url as pattern.url, but I cannot find this url in any of the front matter or where it is coming from. So I was kind of stuck here.

G

uh Okay, so that's what happens when you use a collection, so basically the need for using a collection was to have individual pages for all the patterns right. So uh that's how you reference uh these pages, like that's, how these pages are generated.

G

So if you go through the jekyll docs uh like if you use it like, they have a variable called page. So if you use page dot url, it creates a separate. It creates separate pages for all the entries in the collections. So that's uh that's very.

F

G

Dot url here yep.

F

So for this collection, uh jk itself create a ui.

G

F

With name in this, so: okay, okay, that's that's it yeah and another thing.

F

I think. uh Let's move to other thing, I have not set up the docs website, I'll set it up and share. It share my screen again.

A

A

So next up we have prohibited.

D

D

uh So I was working on a pr, um an issue where there was a responsiveness issue and there was an extra white space uh one. Second, yes yeah, so this clipboard, the copy clipboard tooltip, wasn't aligned properly.

D

So um I actually made a pr that sold the clipboard and the white space extra white space over here wasn't handled properly. So uh I created a pr where it fixed all that and let me bring it up.

D

D

Yeah, so um I actually made this quite a bit responsive, but I need some solution or need some suggestion on how I should handle this tooltip when it is in a mobile set uh when it is in a normal, desktop stage. It behaves fine, but during mobile uh during a mobile screen, should I you know stack it stack the buttons or keep it the same way or like how it is, and also when it is in um yeah the mobile state. I, uh the initial state, have all the content was.

D

You know fixed to the site, but in mobile um yeah, my mobile screen, essentially after you, it's better. If you use the entire screen real estate uh to your advantage, so I tried moving it in center and uh my by my opinion, I think it looks better but yeah. I wanted to know your thoughts.

A

Can you show the current one? How is it right now.

D

Okay, one second.

A

And for the buttons, I think, uh stacked buttons.

D

Yeah stack button, I was thinking the same actually.

A

D

So yeah tooltip is not aligned properly. That is how it is behaving right now and um if I move it to responsiveness, also yeah the I mean yeah, it's not aligned properly and then uh yeah everything is moved towards, so it's aligned left side right. So I just you know, use I just aligned it in center so that it looks kind of nice. So that's what I was thinking.

A

uh Yeah, the center alignment looks good just that on top, if you go scroll up yeah, this tag deployment tag that you see that, on the left side itself.

D

Okay, that should be in the lecture: okay,.

A

But otherwise everything looks good if you align the buttons.

D

I just have to align these buttons uh stack with it, so yeah yeah, um so I'll just do that today and then I'll create an.

A

Api, uh not only like you already have a pr right. You can.

D

Just yeah I already have up here, yeah yeah, uh any else uh anything else that is need to be addressed or uh that's it for me.

A

Yeah anyone else any other suggestions for him.

G

uh So right, I was just going through this pr, so the thing is it's responsive in the mobile view, but if you, uh if you just keep shrinking the size of the page, there are there's like this huge portion where it where the text gets cut off because of the responsiveness. So, ideally we wanted the model to be responsive in all the sizes of the screen. So there's this uh there's.

G

This uh portion, like uh from I think, thousand pixel to like 600 pixels, where it's where the text is getting cut off so yeah you'll want to take a look at that as well sure.

D

I'll just add a media query and handle that too yep.

G

D

A

A

Okay, we don't have abhianth with us today. We.

A

No, I don't think so. uh Aditya are you ready with your next item.

F

Yeah yeah I'll share my screen.

F

So next item, for me, was to you know: actually it was allow user to sort different columns uh like when they click the column. The the column should be shorted or sending or descending order. uh So I have done that uh and like uh what we do in this uh integration test is that we uh ascend all the results in descending order.

F

So uh all everything here it's in descenting order, so what I thought of it was was an approach was that when the user click any of these columns, uh we just flip the table up, so it will be in ascending order.

F

So yeah, that's what I have done and like this is. These are all in this tests are now in all ascending order, and if user clicks in this uh this this, these tests will all be in descending order.

B

So betty, if they click on one column, to sort and then they want to choose a secondary column, to sort um you're leaving the primary column sorted, can they click a second one? No, no! No! It's like uh that. That doesn't work like I will.

B

Look, I might be interested in, uh you know, understanding things only on for measuring istio, for example, and then not the edge stuff, but like only the stable stuff. So I want it sorted on measuring istio and then on the secondary column, and so and so I'm just giving you I'm just I'm just math like that is a real use case, but I'm but but you've definitely taken it.

B

As far as I would have expected, I mean like um if people really want that they'll highlight the table copy and paste it into their spreadsheet and they can have fun with it over there. So you can tell them to go. Stick it. You know good to go uh to go. Stick it into their spreadsheet is what I meant to say um anyway. This is great, I'm curious um what you, what tech did you use to um quickly deliver like sortable columns.

F

uh So, for the descending order for the default shade we use, we are using jkl only because landing page is exactly only, but when we click it. I I'm using javascript to just flip the table upside down. Nice yeah.

B

Is that from a particular library, or is that just a small, routine playing javascript? Oh okay, yeah I'd be curious, so that's a probably a highly useful um thing for some of this for, like a number of the sites in general, where actually sahil who's on the call he just got done doing table sorting.

B

This was done gatsby for the service mesh patterns, but we've got three or four other jekyll sites or just regular html sites, whether irrespective of what tech is used underneath it's just like you said it's just some javascript to help with that locally. um A couple of thoughts come to mind.

B

One is that, like that becomes a useful like so jekyll doesn't has a framework. It doesn't have components, as you would imagine and kind of react. Having said that, it does have includes, which is they can they can be small or very large, snippets of code that become reusable.

B

You just include that piece of code that that component, if you will- and so um there are a few includes on the meshery docs, if there was whether it was done as an include or just a table template like that piece of functionality is, um is nice for others to to copy from and to like? Oh hey for the rest of the tables, they should probably just come standard with the ability to sort.

B

So there's I don't know okay, so it could be that you open up an issue and ask for volunteers to propagate that same feature across the rest of the tables on the site. It could be that you make a note like in in the contributing docs for measuring docs.

B

You might make a note about the fact that there's an available capability- and you know when you're doing a table here, do it like this. There are contributing docs to mesh redox, because there's a number of things that are special to the project itself.

F

Yeah, that's good yeah. I I want to like note like one thing, uh this approach works only because I'm already sorting in decreasing order, like jkl, already starts in decreasing order, so that flipping thing works, but if uh other like, if any other table has you know random, randomly ordered, then I think this will not work. Oh okay. So when.

B

You click on meschery component version, uh the third column does it so it doesn't quite do it doesn't quite get there um and that's yeah, so you're you're to your point, you're literally, not sorting, you're, just inverting um and so okay, that's I get that. um What you might want to do is in the jekyll query is, is actually have your primary secondary tertiary sort happening because jekyll should be able to handle that.

B

And and in that way the other sorts here won't be a lie. You know it won't be a misrepresentation because, because currently they are it's just like like that. Third column is not necessarily sequenced or ordered, and we're saying that you can and you can't all you're doing is inverting the.

F

Yeah yeah so like modify the jql query for sorting.

B

More yeah, I think you should it should be, you should be able to handle it within the same query. I think that that you're able to have sort by one thing by one or more.

B

F

Okay, that I think I I'll have a look to it.

B

If you can't, then we then we may want like, then you have a bug on your hands already. So basically, if you can't, then we have to figure something else out. You either have to sort in java like actually sort in javascript or something else. Otherwise, it's a misrepresentation.

F

uh So for this like uh to be acceptable, uh when we click measure command version, if first everything should come in edge, then it should come in v v for v3 v5, right yeah.

B

But even then right right right because others are all others are all sorted like it's well or they or you think that they're sorted just because we've been on 112 for one like technically they're, not like. If you were to go on long enough, uh yeah yeah, there you go right, so 113 is doesn't that come before 112 yeah it does, and then we got 111.

F

So I like, how do we handle these like? There are conflicting.

B

Things yeah um there's a couple of there's there's like there's a bunch of ways um to do it. um The first thing you've done, which is having at least one column sorted using jekyll, is great. You should be able to add multiple columns like hey you'd, say that your primary is status so that it's sorted in descending order. Your secondary is probably component version, because the component will consistently be the same on this page. It will always be mystery. Istio, so you'd probably skip to that third column and say that's your secondary sort.

B

You should be able to use jekyll to do that, because it's just like it's more they're trying to mimic a sql query and you can just have multi multi-column swords. So one is the primary one. Is the secondary um to the extent that that either isn't easy or doesn't work well or something? On the javascript side, you might seek out a table function. An open source table function that performs at such a sort.

B

If not um yeah I mean, because you know generically you can take a table, you can take the inner h. You can take the html here and pull the table into an array and the html elements into an array and then perform an alphabetical sort from there and then rewrite the table based on, and that would be. That would be like what a jquery function or something else would do.

B

B

I think bootstrap is integrated into the site. I don't know how much is being used that both jquery and bootstrap libraries, I think, are available.

F

Yeah, okay, I'll explore and experiment things. Okay and I'll come back with you, though. Thank you, nice sounds good. Thank you. That was it for me.

A

Thank you. So we are right on time and I don't think we have any other topics for today uh gaurav if you're on the call. Would you like to briefly mention about this part.

E

Yeah, hey sure I'll quickly show.

E

Yeah, so, um okay, so this topic is about machine ui uh restructuring. So currently we are at uh v6 daughterly uh release candidate.

E

So parallel to it, we are refracting the whole machine ui to according to the roadmap set by set 4.7.

E

So in machine ui restructuring, we have created a branch called machine, ui restriction, so you can make a pr against this branch and for this one you can uh have a look at the proposal that we have 4.7 in this. We are using uh react: 18, material, ui5 and redux as a state management tool.

E

So you could have a look at this docs how we are proceeding with the v7 proposal and we have also have our progress tracker.

E

So let me share the link of progress tracker in chat. So in this progress tracker you can pick up any of the components from the machine. Ui and re, implement it using the uh proposal that we have for it so yeah that was all in machine refactoring. So if you are into front end and love doing javascript and react, this one is for you, so you should definitely go and like pick up any of the items from mission ui, so it's a call for volunteer for all the front.

E

End lovers so yeah that was a quick um intro about machine refactoring.

A

A

Okay, so uh that brings us to the end of the call today anything else uh that you guys will discuss about topics that we had to do anything generally.

A

Assuming that's a no okay, so thank you. Everyone for joining. Today's call see you all next week, bye.

B

Thank you, deborah bye, bye, bye,.