GitLab GDK and Gitpod walkthroughs, 17 Feb 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Reviewing a merge request at a high level in GitPod & documenting changes (Design coworking)

Description

General design review with documentation.

A

There so I'm gonna review nmr using gitpod, because I haven't been doing that a lot lately and gitpod is awesome. So I'm looking at this, mr around the assignees widget, because we're widgetizing things in the sidebar and we want to make them real time, and this, mr, isn't necessarily like the polish of it, but I do want to make note of any anything we should improve there.

A

So first, let's think about what the current assignees sidebar item looks like.

A

And this is pertaining to the board as well, so we're looking at uh the signings widget in the board. Well, so.

A

I'm gonna play with it.

A

um I feel bad for assigning someone but oops all right. So, let's think about what this looks like now, based off of this, mr um I got signed out of gitpod. I did have it running. This always happens to me because I I get it running and then I kind of like go, do something and forget about it when it's in this tab, but that's okay, so we'll just start it again and I'm already in on this branch.

A

So for anyone watching who doesn't know how to do this, you just kind of get the name of the branch or start typing it in you. Don't really need many um characters, even so I went here from this area.

A

I started typing this in and I clicked this and that's just switching to the branch from the main branch. So I already did that. There's no feature flag, so we're good to go. um Let's go to a.

B

A

I'm actually going to go down to my weight and we're going to start typing things in here.

B

A

All right, so, let's see what the assignee widget looks like in the board. um This doesn't look too much different. So far,.

A

ah That looks different, so there's one assignee, so it's just called assignment.

A

Let's see if we assign no one okay, so it says zero put the same thing here: yeah, okay, so behavior hasn't changed, um sign myself, yep all right, so, okay, okay, so far, sorry get lab back. Okay to.

A

Assignees, what did I just do I just double clicked? Okay,.

B

A

A

All right, I don't know, what's going on there, I didn't notice that earlier.

A

Okay, so this is for signings, but it's only showing that one.

A

A

A

Do the signings and then it just shows brunetta.

B

A

All right, let's see if this is happening.

A

ah You know what I think this is a licensing thing, maybe because I can't apply swim lanes- um and it's mentioned in this, mr that we want to check out swim lanes. um It could be because, as we update we're refactoring um with graphql, so I'm kind of wondering if it's something to do with that like this, only applies to the newer boards.

A

um Let me see, I'm gonna go grab a license and then I'll be right back okay, so I tried to go into um the licensing area and it was yelling at me.

A

I think part of the changes we made recently. That's okay. I found some old licenses. This is why I don't always use git pod, um just because there's like little things like this, where it doesn't have the license ultimate license every time. um Things like that that I kind of forget about and then when I'm just trying to review something quickly.

A

I have to kind of set things up again, so I often just turn to my local gdk. Even if it's uh you know not quite as great of any experience. Okay hold on I'm gonna upload this okay, oh my gosh. I just spent a really long time, not understanding why my license wasn't uploading and I hadn't clicked this, so I'm actually gonna just kind of screenshot this.

A

um What I do is I screenshot things that like confuse me and um make note to make an issue about them later. So, okay, I'm gonna upload license. Hopefully that worked cool ultimate awesome, all right.

A

I don't know what that was supposed to be under my name, but you know what it's fine. This is the instance, so I think we're okay, all right. um Let's see if this changed anything. So now, okay, we have three four signees, let's see if that actually applies this time, all right it did so. I don't know what that was, but I should probably mention it so gosh. This, mr, is huge all right. um So I'm not like doing the full thing here, but let's say I mentioned.

A

Okay, so I'm just gonna like remind myself to make a note about this, because I want to keep reviewing all right, so that looks normal and it looks like there wasn't any huge like changing changes in spacing there or anything.

A

Might be a little larger than.

B

A

A

It's like nine pixels between those two things which is kind of weird and then like 10. No, that's one not.

A

Sorry, my my zoom, my loom face is on top of what I'm trying to look at. Of course, all.

A

A

A

Why is this confusing too? Oh? Okay, it's eight! Oh gosh! No! I need coffee, I'm just trying to figure out what that what the space between these two things is. Okay, so right so there's like 13.

A

huh Okay, so no that's not right, weird! Okay! So there's like 18 pixels between each of these objects and like nine at the.

B

B

A

All right, so this is the same. That's kind of weird yeah, all right, so it's like 13 again and then there's like only five to the left of the object and then like 13 to the right.

B

A

Okay, I don't know, but it's the same. So if we uh want to tweak that we could it's not a new change, at least so what I'm trying to figure out is like how far apart all these things are and if we've changed anything and then, if we haven't changed anything I just kind of want to know why and get some contacts there. So now I think this is larger, so it's eight, maybe not, but yeah, there's a little larger space.

A

So how many divs? Okay, so it's 13 there all right! So eight minus the line height like this.

A

huh Okay, yeah.

A

So because the lionhead's incumbent, I wonder why maybe check on this. Sometimes I just like literally take screenshots, while I'm looking at stuff just so I remember to make a comment about it, but.

A

And let's remember what this.

B

A

A

So this the line height, grew the new version. So let me just figure out what's going on there, because I don't yeah, I don't think the line height it seems off on both so and so that's why this one has less space between the avatars and the label, because the line height is less so all right.

A

Okay, so write more comment on that later, just kind of figure out what's going on, but it it interacts in the way that we would expect. um Let's see this link, uh we're updating these, I think, to tertiary buttons, so that should be okay.

A

I think there's some kind of consistency, things going on yeah. I think I think I'll ask to make this blue just to be consistent for now, unless um unless we're like changing buttons very soon, so what I'm saying is this is uh not a link color. I mean this isn't really a link color either, but for now we could at least be consistent with what we have and then work on um making this the tertiary button styling.

A

So, okay, I don't even need a screenshot for that. One I'll just make a note to myself here. um Edit link is three zero. Three zero.

A

And then we'll talk about this more later, as we keep flushing it out all right. So then there's some really obvious things in here. If you notice, oh, I think they were obvious. So that looks good now, but then, when you uncheck everything, you should be um indented a bit.

A

So you know when you're selecting things are kind of moving around, which is not great, so we want everything to just be um have a little more space on the left so that they're not wiggling around when you slap them I'll, show you what I mean so yeah. The styling is a little bit different. Add some space to the left there.

A

um But the check mark looks okay. I know we're updating that anyway. Actually it looks a little different.

A

I don't know I'll to see what's intended, so this I mean a lot of times too I'll, be looking at pajamas and be like okay. We have three different things here which is closest to where we're heading but um yeah. This ah sorry all right, yeah this. That is, it looks weird anyway.

A

So maybe we actually just updated this icon to the svg or a better svd, but it does look. I don't know, but let's make sure the color is correct. So I'm gonna make a note to myself to look at the check, icon, check, icon, color and also is it aligned here.

A

Can I spell a line? No, I can't can't spell mine, need more coffee, okay, cool, so check on that.

A

All right, that's that's a big one. Okay, we still have this weird behavior, where, like the entire, the entire drop down starts scrolling, but it's not terrible here. Don't think. Let me see this is where I forget kind of yeah. I was like. I don't think that that search bar is supposed to scroll and sometimes when you're reviewing.

A

Mrs, you just like forget the kind of simplest things but yeah the scroll bar well, the search should not scroll, so search is scrolling away, which we don't want, because we want people to be able to search for someone at any time, but that okay, do we want to show that I don't know if we want to show unassigned when you're searching because you're searching yeah, so we just want to show the results um so on search just show results, not who is selected unless we've made some change to like better show who's been selected in the list.

A

Even when searching I'm not sure, I could look into that, but I'm assuming we don't want to show this. We just want to show no results here, so we also need to add that kind of, like add copy.

A

um The no results state and again I'm going to clean up this list because I'd feel bad being a teammate with this kind of you know brain brain barf, so I will refine that, but I won't make you a watch not that you're, probably watching now, but that's okay. um This clear icon also looks like it's too close to the right edge here. So we need to look at that.

A

Alignment, your icon to close to right edge, needs padding or something I don't know. Let's figure this out, I mean it looks better than this icon at least right, so we updated that that looks good.

A

I'm assuming it's like yeah eight. It should be.

B

A

I know what it is looks like it's like just totally on the edge with no padding there.

A

A

And you know the reason why it's so important is. I think this is the first one or one of the first ones they're working on, so if we can get it in a state where they could start kind of reusing this, that would be good, so, okay, that should, I believe, close the drop down.

A

So if I select that it should close it and then if I select that it should close it, which it does so, let's test my my hypothesis here: does that close it I'm gonna, add myself and then, if I click on yeah, so I would expect it to close it. I mean there's a lot of things we can work on here, um but for now, let's stay consistent, um clicking and put um okay drop down input.

A

Should apply and close drop down cool I'm like okay,.

B

A

Awesome all right and yeah feel like this is so small.

A

My height looks kind of small.

A

I know there's shortcuts, I'm just it's my friday today, so all right, what is going on all right, so that is.

A

Okay, so it's actually all right.

A

What's that margin about eight.

A

Okay, there's gonna be eight margin above this probably yep all right. I guess that's okay, but this looks looks like there's a lot of space there. Oh, maybe not.

A

Okay, so there's there's like four extra pixels of margin between these two items. I don't know why so four extra.

A

B

A

A

And when I, when I send this over, I usually take screenshots or take a little giffy jiffy. If it's something like super confusing just so, everyone knows what I'm talking.

B

A

And a lot of times I'll fix it and I'll just say like before and after you can put that in the table, it's really nice just try to be as clear as I can so there's, not a ton of back and forth um okay cool. So this styling thing. I think we already mentioned that right or did we?

A

No, we didn't okay, so style. Oh gosh,.

B

A

That's fine, I mean now you'll know what it's like being me.

A

I don't know I have so much coffee all right, so um it's probably padding or something.

A

Next to avatars.

A

Okay, again I'll go through and clean that up, but it's good for now, okay, and also it's really helpful, just to look at the component in the pajamas and I'm trying to figure this out. Okay before I look at the component of pajamas like I just talked about so we have like these two buckets right, which is helpful here. I'm assuming this is kind of like the selected bucket, but it's not labeled.

A

So, for example, I'm assuming when I click on poorly, it should say selected or like assigned, or I don't.

B

A

Think we have that currently and maybe that's why so, okay, so we.

B

Don't have that currently so.

A

No we'll just leave that, as is, and then probably create an issue around that I think there there probably is one floating around, but it could be a little more clear that there's I mean it is clear right there there are check marks, but I don't know it doesn't hurt to be very explicit. Oh.

B

No okay, I'm wrong. It says.

A

The signings, so once it's selected, it should say assignments so I'll just show you actually.

A

The before and after table that I was talking about before y'all all know this, but okay.

A

This is an ugly comment, all right so a lot of times I'll. Do this.

A

Mention um missing subheader kind of things in there and I'll be like okay. This is what it looks like now.

A

Actually, I need to label that better I'll, tell you so now, when I select someone now when I select someone there's no header.

B

A

That they're in that pocket for a reason.

A

um And let me label this a little bit current, no.

A

Just before, and after I mean it makes sense to me, but someone reading this might be like um current and, let's see like this branch and also let me know, if there's a better way to do this, but um I just make these smaller, sometimes especially with like a huge comment like this is going to be um it's nice to format it's a little better. So what I'm doing right now is just adding html to uh resize these photos and they're not photos they're screenshots,.

A

Okay, so maybe I did something.

A

Wrong: okay, the first time I've done this and of course I did it when I was recording myself. So it's image, src, I'm not trying to do a link.

A

I'm busting out that html I learned when I was like 12., okay cool. So, instead of it being like super huge, you can set the width and height, I'm sure you all know, but just whatever um okay!

A

Otherwise did I notice anything really strange? I don't think so.

A

B

A

So this mentions swim lanes also, so I'm gonna make sure I look at swim lanes because you know that's one of those things you assume it's gonna be the same, and when you look at one instance of it it'll be fine. You don't have to look at the other, but nope okay tied up.

A

Maybe click on side issue, okay, so this is the the classic board as we call it and we would look through this you're probably going to keep looking through it just because you know it's easier to think when you're not talking or recording yourself, but we pointed out a lot of things to start on.

A

I like that we got rid of this double line here. I don't know what that is um cool so and we're seeing you know also, of course, that it is applying as we would expect. Oh, that's, nice, okay! So let's screenshot that did you all see that it kind of like the hover.

B

Effect, I don't know.

A

What was going on, but it messed up the avatars.

A

Right, the entire weirdness all right. Obviously I will go through and describe the weirdest. Let's see, if that happens now, actually does it nope, okay, cool poor, floorie, I'm sorry flory, oh no, that was mine, so I'm going to put it back on. No, that's, not mine! Okay.

A

I thought I was assigning myself to all of flurries issues. Okay, so that doesn't currently happen. So that's weird, so we'll figure that out and does it tell me three more signs yeah. So that looks like it's doing what it's supposed to do there? Let's see what takes me to the assigning page yep, let's see what it that's, what I think it does, but okay cool. So it's still behaving as we would expect in that way.

A

Also, I think we have the basics of the classic board, and sometimes you know I I feel like we have so many things here that that's a good start um and we could tell the other person working on this about these.

A

They could start working on them and then we might want to review again because you know sometimes when you make those changes, it then kind of either like break something else or it allows you to better review because you're not noticing all the little things and then you can get deeper or the big things and then get deeper into the like more granular um interactions. So, okay, so we're on classic boards. I want to go to swimlane boards.

A

I just did: let's see what this looks like you can see, the sidebar is a little different because we're working on it, it's a drawer now and the width is larger right now. You know something we're working on so otherwise I'm noticing pretty much all the same things. So it looks like there's extra margin here between these two items. Ooh the focus state, looks nice. um We're still not this header here and.

A

The alignment of avatars is so weird, you know they're jumping around and that's not unassigned as well, and this sound is not. It looks like it's a lighter weight than it is currently, but I honestly don't mind that, but I guess we can make note of it. So.

A

um And that's everywhere: it's not just just in swim lanes.

A

Sometimes I'll just be like: okay, like I'm, noticing.

A

Okay, I'm like hey, I noticed this like. Is that intended just to open the conversation just to make sure I'm not telling telling someone to do something? That's not defined um like? Maybe this was an improvement, so I would go then and look at gitlab ui kind of understand if there's any changes to the component and then also ask right, so I don't need to know every single thing I can. You know rely on my teammates right. We can work together.

A

um Otherwise I think this is pretty much exactly the same. It's just the the width is a little wider just because the drawer is wider, so uh yeah so like the hover on edit. It's not blue things like that. So you know I think, I'd like us to just work on those buttons and get the buttons in place, because I know jeremy and tori were working on that, but otherwise it looks right.

A

Not right, it looks the same as what we just did. So that's fine. I just want to check the interactions on the issue so this so it doesn't do that strange, hover thingy, where the the avatars change.

A

It does okay, so that is only on classic board. So that's good to know so that means I then should perhaps split this out.

A

So you know I could either say like both classic and swimming and then like swim lanes and then, like classic, and I said, classy lovesick all right, you know I could do something like that and then list everything out so most would go in here. Anything I noticed just on swim lanes, anything I noticed just in plastic board and then I could list this out to to better articulate what I'm trying to say about each of these things trying to think about the way.

A

I am um writing this comment, just because our asynchronous communication is so important. Otherwise I think it's okay, I'm just going to check one more time. Five signees, I see five.

A

The sign is on the card more signings. It reflects so. I think it's okay. This spinner looks right. Ooh that hm that looks like kind of close right. Yeah looks like it needs a little more space in between that avatar and the one more just because it's like you've seen it like. I just try to click on it and it opens up that hover yeah. So there's like no space there.

A

I would think it's probably about eight. It should be eight.

B

A

Screenshot and be like hey, like needs more space here, more space, all the.

A

A

Let's see how much space again, um I'm being bad here it shouldn't, we shouldn't rely on um the current product. We should rely on general ui, which I usually do and I'll check it later. But, okay, I don't want to use real people. So, let's, let's first check and just make sure this is also happening on plastic boards and then let's go to like another branch and kind of play with this. So.

A

Why are you going to work.

A

A

A

A

A

All right, this is that time where I'm like hoping I'm not supposed to be a meeting right now: okay, but let's go to.

B

A

I'll have to test that out and see if, like what why that was happening. Okay, it doesn't have more space than my client has more space, but it doesn't. I don't know okay, but I did notice it hover like the there was. Oh, it does have tiny bit of space here and the hover is blue, like there's link styling, so this one has five, so it should be like eight, I would say I don't know.

A

What's with the five everywhere on the avatars yeah, I don't know, okay, so I'd assume it would be like eight, because I don't see what this does.

A

Do you have a pattern with me. What.

A

Is I will figure this out, but.

A

And this yes, the hover is a little different okay. So again, this is one that's a little different on between the two board types. So we should make note of that.

A

Okay, so we're gonna do that thing where we do the before or no not before, for.

B

Here I might have.

A

A table and then I'd be like classic board and swim lane board kind of like this one, just to show the very tiny differences between the two. But let me just make sure let me standardly check myself the epic board or that swimwing board does have less space and it has yeah the heather's different okay. So no hover and there's less space on here and we want like eight, eight or so between these two. So it's like not there.

A

B

A

No cover, I wonder if this should just be link styling all the time I don't know, but we'll look into that. It's like first, you just kind of get this consistent and working, and then you could start getting into the more more polishy details. Alright, what was I going to check here? Oh, I wanted to see what the space is on the current board. So let's go to master.

A

I'm betting, it's five because that's what's on the plastic, one!

A

Okay, so it's gonna switch to master, see.

A

B

A

I know it is because it says it is okay and I want to be on notebook classic.

B

A

I'm not sure if my internet just hates me or what, but sometimes it just seems to take a really long time pause. So you don't have to stare at me. Yes or okay. They listened to me. I knew I was about to pause, so it decided to work. Okay.

A

That is, I always notice that the button is loading kind of weird, so anyway, we'll create another issue. Okay, so this is the current experience I believe in master yep see these are aligned properly now, and this is bold and all that and we have the assignees and we have that weird double double line. Okay, so, let's see whoa whoa. What is this?

A

Okay? That's confusing. I don't know.

B

A

What okay, I'm just I'm gonna, create a screenshot for myself and remember to look into that because it's not relevant to what I'm looking into now. But that's weird: huh why is it doing anything all right? Maybe I'm just forgetting we'll figure that out okay.

A

So let's see the spacing remember what we were trying to do and that was to see all right, so the link styling is really kind of better yeah, so kind of like I suspected it has like five five pixels okay, so we want it to at least be five, but I'd like it to be at eight. So we'll look into that. So I think we have a good start. We will now.

A

I will now go through this kind of refine. It make it easier to read and not just in you know my my gibberish and then send it on over and keep working on it with the team, but cool thanks for reviewing that, mr with me, and maybe we'll do it again later talk to y'all later bye have a good one.