GitLab Pair Programming - Frontend, 15 Jan 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Pair Programming - Whats up with this zero-width-space hack?

Description

Result: https://gitlab.com/gitlab-org/gitlab/merge_requests/22553#note_272090432

A

Okay, all right so I can drive or 20 if you guys want drives, but the to do here and let me share my screen, so we can introduce what we're doing here ah here we go. There was a comment to do replace this hack with zero width white space. When we have rich text from B II, we have rich text from B II, but now we really don't know.

A

If we can do this or not, and we really don't know what's going on so our options are, we could just remove the comment, but this below line, which is doing something weird with some zero wit space is a little weird or we could do with the comment says, or we confirmed that we don't need this anymore and I think we're gonna start with option three to try to confirm that we don't need this line anymore. Is that.

B

Okay, when I was working this yesterday, I started by just I just removed this entire block, all of the via fail CFL stuff, because that would kind of simulate having nothing and I just never got to the point where GDK was like working in my favor. Oh man.

C

A

B

Is I think where we should start okay.

A

Hey I'm glad you're here, I'm also recording it for you. Alright. So since I'm wearing chairman screen, I'll I'll go ahead and drive, but I probably would need you guys help with making sure I'm doing all this right.

A

So I'm over here in customers, I have which is not wearing and I, also have a gift. Atlanta checkout, which is not where I hate to be either I'm, gonna check out master and at least know.

D

A

Have it the phone for fetch, origin and then row? Oh, okay, alright, once everyone's looking, that's one things: I.

D

Got folk, okay,.

A

And I need to set up my gek, it's not running right now, so Itamar I get to show off my team ox man.

A

This is usually my. This is my usual team up setup I have up here my GDK folder I have down here my good lab, folder and I run I. Have this helper bash function, which young runs yarn, install and bundle and all the other things to kind of reset whenever I check out a branch, I usually run this thing first and then I start my GDK, and this thing also runs like the database, migrations and other things, and but right now something tells me that it's removing temp cache and that's taking some time.

A

Oh now, it's running our install so just a little bit of time. We should be up and running but see we're getting like. We couldn't find modules because we haven't run bundle yet.

A

Oh, come on Willie yarn.

A

Okay, now we're running bundle; okay, what I usually do over here since since others planning on talking about this with amar I, then run some notes over here. So I'm like some of them, where I have my different notes that I'm working on, if I'm like reviewing something. This is kind of I'd manage.

D

To do is personally and I could resize this painting very nicely by pushing it over to the right like 40 there we go nice happy amount of spirit.

E

D

All right, it'll need the answer that call right now he's flexing two months: yeah.

A

Okay, all right this is Ron. Okay, no amar has asked me multiple times to record something about and I have this, that I don't have much configuration to us all. So I'm gonna just record getting started with two months because that's all I'm at is just getting started, but it's totally changed my torn mental lives all right now we're just waiting for GDK to do its thing. It might be a good old, restart.

D

No, it's doing a thing starting all the jobs I was.

B

Stuck on, you could actually refuse yesterday for like 10 minutes, yeah.

A

If you see like ever, usually if you're stuck there for a while I'll I'll run GDK tail just to make sure that it's not something's not hung up on an air.

A

If it's on this gets faster, though oh come on, I know you're there. No it's taken about it.

A

E

A

We're listening to the UNIX socket alright.

A

A

So usually, when I see this kind of thing, it's a restart, the GDK I could probably just restart my pack, but I tend to attend that overkill. These kind of things.

A

All right so, while this is going on, let's find that piece of code that we are looking at, remove extraneous comic.

A

A

Different different, okay, great so what I was gonna do is I was gonna, create a suggestion that had some filled in lines, empty lines and then filled in line. We're gonna see what happens in the middle there under different permutations of how we it'll guess. If it's like, we don't need this thing at all. Then listen music I tried to find so Oswald. It was the first one to he introduced this line, so he might have some context of why this was needed.

A

Maybe it's time you did it all it's under the commit States test specs. So maybe there's just a test. We need to fix. um It should be interesting. So alright.

D

You've gotten to the work once part of its dance, I, actually.

F

Have a theory about why it's there, okay I, don't know, that's the appropriate time, share it or not. Well,.

A

I'm gonna write and overhear my notes. Here's the carry theory, that's a pretty good one. Carry.

F

Theory is that the value of text can be nil or an otherwise empty string.

A

F

And so this or rich text- well, no I mean originally. Why why it was put in there? Okay, not breaking species out of there, so then like, if you didn't, have anything to display there. What would JavaScript do like if the value of text before we have the rich text option? First, if text was no, what would have happened? I would imagine that that line would just not be displayed and would be collapsed and cause a wierd display snafu, and that's why that number you spaces there.

F

It's like kind of like strut, open, HTML and hold that display space. So.

A

F

Then the way that no it's written like makes me think that, like in the future, we'll have rich text as our like and that we'll always have like at least a default fallback option that would hold this open. But couldn't rich text be empty.

A

F

A

This isn't because.

F

The way that we're doing it with a highlighter the way the highlighting code works as we take the text and we shove it into the highlighter and the highlighter spits back out daiquiri content. So for.

A

This for this lines of code here, for all intents and purposes, if rich text or texts are null or empty string, that's basically synonymous!

A

So if text, maybe no we've seen rich tags can never be no, but it could be an empty string. I think you're you hit the nail on the head. I think it has to do with table collapsing stuff, which is why we needed to drop this in here, rather than even just an empty space we could have done, but maybe that would cause some other weird-looking issues.

A

If this can be empty string, we still need to fall back to make sure there's always something here, maybe but I think I think you're getting really really close. That sounds rational but hey, let's all just hop on a call and dive into it together. Exactly that.

B

Is that is the case, then we can probably handle this when we load the data rather than in the UI, probably say if the day that comes back as empty string or null then fill it in with something.

A

Yeah and that's a good idea and I think and I think that's an interesting question of. Where does this responsibility lie and to me this is a presentation concern because I wouldn't want it to be done in back in which might be what's suggested. Suggest suggested here in this comment would be we're just gonna drop this part in the back end, but I I feel, like back end, serves more clients than just front end and I'd rather have data purity there as much as we can. Until we get to the messy HTML front, end land.

C

A

I am let's: let's drop a suggestion somewhere I'm going to my nodejs Express project thing: I have a looks like I. Have a merger quest update something okay cool so.

A

We're saying I can draw here's a suggestion. Oh let me just hit my cool insert suggestion button and so we're saying let me drop some empty lines and then something else right like this I guess maybe I'll make it go back. A few.

A

um Okay, so I'm gonna I'm gonna go ahead and commit this or not commit it. But I'm gonna comment this and then let's dive into it and see what's going on, I think.

B

Those lines aren't actually um P, though, because they have newline characters. Yeah, that's why I was asking earlier if it's ever possible to actually have an empty line. Yeah.

A

We might not I mean sort of. Let's see this is line content, okay, so this is got it. This is right here. So here is the content.

A

That is a here.

E

Is one that is empty.

A

Yeah, but here's where we have an empty span. So if I actually just remove this see what happens, we might be able to haunt and might be hot reloading things, but I don't on a percent trust hot reloading, so I just refresh.

A

F

A

C

At how weird now then- and the line is still there, but it's like not highlighted but salir yeah.

A

That is weird and it kind of makes me wonder all right: yeah, yeah, yeah, okay, let's add Rihanna this band, maybe there's a CSS solution of this. Maybe we're just not styling line content right. Oh that's!.

F

Funny is the highlighting applied to the span, then enough difference.

A

When I'm thinking or overall.

F

All children's fans of these divs get the color I.

A

Don't know it probably has to do with some table weirdness.

A

Let's see the line, content old, we're giving it this background color, to give it a display of blog. It shouldn't need that content I delete this. Why in the world yeah, as you see how this this ah you see it? It has no this because there's nothing in it, this cell, but that's really no width either. It should borrow the height from its. It should have the same height, as can.

B

We just use the CSS content pack like make the content of the cell base.

B

A

I, don't know and maybe well yeah I guess I think you can only do that on. Maybe you can only do that on pseudo selectors, oh yeah, you're.

B

Right, yeah, that's right!.

A

That's right, you're right, um which would mean that how come this doesn't count like how come that's not affecting the size of this thing. So the really weird is happening with this, but if I change, if we find oh here's, a CSS solution to this I have a strong feeling. My content has a lot of history behind it.

A

B

How long have we had suggestions? Suggestion was.

B

A

It's been a it's been probably a little under a year, I'd say: okay,.

B

Well so the very least we know this is entirely a fernand problem with the way that suggestions are displayed.

A

Yeah I I wish I knew why? Oh, oh, look at this.

B

Okay, because it's okay, so it's changing the default cell display cells are not display:block doing. Oh, that's right! You treat a few strings that walk to display:table-cell cuz.

B

Why do we need you want it? Yeah.

F

B

The question is well.

A

That day, so we could really because I know my incontinence gotta be news all over the place, so we're not yeah I I, don't feel like changing this everywhere. No.

B

A

Especially cuz I know where am I going. Okay, don't wonder if D table cell is actually a thing, but it looks like it's not. Is there a bootstrap utility class.

C

Looks like it could be a thing: why do we need to be a block? I, don't know it's like, though it seems like a separate reason right well,.

A

But maybe it's there for four different contacts and maybe I could just override it here. We don't need it to be a blah blah yeah, that's what I'm thinking, but you see it seems to handle word wrapping nicely and thanks look at this. Look how nice that is! Oh, wait.

E

B

A

That else, no wonder.

B

It's working perfectly I know.

A

And so then, what I guess I could do here is I could just have one span and then do something like well. No, because one has to be HTML and one has to be actual text right. Okay, is there every case where we need to do? We need to worry about text anymore? Are we always gonna get rich tanks.

B

That's a question that only carry carrots are probably.

F

The only time that you won't, you will get an utterly nil value for rich text is for the so called meta lines.

A

B

A

We'll leave that checked there just just for safety, but yeah. It looks like adding this utility class could be a solution to not needing to do any kind of weird hacky zero with stuff. It's.

B

B

Table-Cell important gross yeah.

A

D

A

I know you're I'm gonna, try not to and smell food star people request, they're, not they're, not the best utility classes, but you know they're, not the they're, not the hero. We needed they're the hero. We deserve I'm, close Batman, but yes, all right. I guess this could be the fix and unless someone can answer why D table-cell could be problematic. In our case, the.

B

Only thing a big oath is that there's a there's, an actual need for these things to be block, but we.

A

Let's look at maybe some other places where we do I.

A

Can't think of one I can't think of one, why we would need it.

B

Yeah display block coming from the white content class. Is that? What is that? What's causing that yeah.

A

That's yeah, it was kind of strict from I was coming from code lienholder line. Let's see what happens if I drop in this is.

A

Is this there's code, but these are just fans, oh I, wonder if line contents isn't always used on a TV, maybe sometimes it's use not on a TV.

A

Let's see, let's see what we can see when I was introduced. um Where is that such.

F

A generic II kind of word anyway, oh.

D

A

This is true and line 499 of DIF that CSS.

A

199 this was introduced ten months ago, restructure and deduplicate table that code spine. Okay,.

D

Let's compare with previous revision.

A

Table that code is doing stuff back here. Blank content seems oh, this is from six years.

E

A

Let's do it delete it immediately, so I wonder if it's because of I wonder if it's because of margin border padding stuff, um because they definitely won't apply to that.

B

Does all by ourselves or anything.

A

In volume border doesn't what does padding padding can't connect, apply to sell yeah, I guess so, adding a margin or anything if it's not blocked display.

A

Hope, but look at this look at this when we do parallel, we actually have to override this make a table so.

A

A

um Well, I would suggest moving forward with getting rid of that zero with space cuz. It's happier than doing this, the table-cell thing I can't, and at least, if we do it just on suggestion, changes its isolated to this.

B

A

Can do one of those good, you know those good old production tests and push it out so everyone to see it and then wait to see if there's any issues on it, yeah perfect carries the carry is like the front Enders. Is this how you test yourself.

F

No, it's only half of what's going through my brain right now: okay, the other half, is we only push once a month, my god.

B

A

I'll make this commit, you know, I'll push it up, but if, if we can assign um do.

F

You want to just attack it Paul. Do you want to stack it on to that.

A

Yeah I'm: yes, all.

F

A

F

I think it's a good idea.

A

Me to check that out, I'll push up this commit on top of it and we'll go from there. So let me find master I.

E

What Ford, okay I have a suggestion.

E

Display:Table-Cell only if the two conditions are not met, so we don't break a lot of things. Yeah.

B

So adding a condition was like yeah, that's that's. Gonna get Zen, it's no rich tax. Am their tech.

B

A

Do we know do we know why, like we still don't know why we have it as d-block in the first place right correct, we don't know I, wouldn't.

E

Be related to ie6 7 8.

B

A

I'm gonna I'm gonna push this up and then yeah. If Thomas, if you want to add that condition to what Maura was suggesting would be be helpful, but then maybe it's wise for us to do some cross-browser testing on it and yeah I. Guess that's it. So this is fun. Let's make the commit and then and then we'll call it a day. Let me get the branch, that's the wrong.

D

A

We go, oh man, so it's a thousand convexity.

A

All right, it's gonna complain if I try to just commend without doing this, so I'm, saying: hey, remove z, c, WS, p and.

A

It's way Henderson said: I knew.

E

A

Was gonna be upset about that all right? We just have it's.

A

It looks like lying fronting as display.

A

Rather than changing this underwear.

D

Let's just use a strap.

D

We don't know why.

D

Here is the branch name.

D

Oh yeah, okay. Cherry pick, my master, oh.

A

No, what why are you upset, oh because we've removed that comments?

A

D

A

So this thing should just be me: actually I didn't save the changes. This happens to me all the time where I think I've resolved something but I didn't save my conflict resolution and then I end up committing the conflict thing. Okay,.

A

All right, awesome, hey Lamar, Thomas Carey, thanks so much I learned something about lion content today and, more importantly, I learned something about myself.

A

Actually, I don't know if that's true but I, don't you! This is true. I didn't get something about the love, Lovecraftian universe, all right! Well, thanks! Everybody I will upload this recording and Amara thanks for huffing on last minute, to all three exception to the sweet, I will pin you on thanks, Thomas, well, I Cheers,.