if you're arguing with a six-year-old you're losing

02:37Hello. It is Thursday. graefchen Morning. limesHi
This is the Lobster's Office Hour stream. So let's put the message in chat. So here's Lobster's screen. pushcx This is the Lobsters office hours, drop questions in chat anytime!
Ah, hey, Great Jack.

03:03So this is probably going to be a slightly short stream. I'm thinking like two hours because I'm looking at all the stuff I've got to do before the weekend gets here. Excuse me. Sorry. Gold Lobster's office hours is for folks to ask any kind of questions or have any kind of discussions about the site, the codebase, the community, why I designed a feature in some particular weird way. As we ended the last stream, Gryffchen had a question about a subtle one. Let's actually come back to that one.

04:07Epic_Ninja_Elephant Hi.
I don't have a lot more to say to it, but we had talked about how logged in users will see why a story was removed and not logged in visitors will not. And it occurred to me that I should probably just explain that thinking on the single story page. Epic_Ninja_Elephant Anyone else getting stuttering audio or just me?
Because it clearly looks like a bug to the person who wrote that GitHub issue. You story show. Oh, cat, there's your feeder. We've got the boy. Oh. Shit, it's me. Sorry. graefchen Yes. I also had stuttering audio.
You should be good now. I'm sorry. So I was just saying that I wanted to come back to... where we left off on the last stream. Sorry, it's a bug in my setup. Epic_Ninja_Elephant yes, better.
I ran into somebody, I think on Fuse Sky, who had that bug. Let's see if I can find that, where basically it is very, very silly, but it feels like it's a buffer under run. I have the volume monitor open when its little meters are bouncing up and down, we don't have the stuttering awful audio.

05:59So let's see. Maybe another is gone check here somewhere.

06:16So I was thinking the removal notice, I go back and forth on whether it should include the moderator username. There's kind of a accountability transparency thing of like who specifically did this, but then there's also a, well, the point is it's site policy and folks are generally on the same page, so it shouldn't matter. Leave that alone for the moment. There's the clicks folder. It's over in the story. There's a method for, and this is so flaky. Oh, it's over in the single story view, isn't it? Yeah.

07:24No, single detail. Yeah, so if it's gone and you're a user, you see why, right? Let's stop that wrapping. Yeah, so there's the story removed by

08:00where does this code happen let's think of an example of a story that's removed just one this right so let's go look in the mod log but i'm not logged in oh yeah slightly grumpy note on that one okay so just the text story was removed let me see it's got its own custom so I even wrote a comment that was the thing I explained at the end of the last stream. I forgot that there was a comment I wanted to say was, let's just put this here.

09:19We'll just say it's a reasonable first draft. Like, let's explain what's happening, that there's a difference for logged in users versus not. So if there isn't a user, there is a user.

...49You have him.

10:08let's see yes we don't

...39How do I explain this? So there's a there's an old political saying that if you're explaining you're losing in American politics, and there's kind of a version of that, that I always think of when I'm visiting with kids like my nieces and nephews which is like if you're arguing with a six-year-old you're losing and the point of some of these trolls is if you have to acknowledge they're trolling you're losing and so they're submitting really stupid or gross things because if you have to say how do we want to put it Trying to think of a good example. If you have to say, no, you can't submit, I don't know, thirst traps. I don't think we've ever seen that. Like, it's mildly embarrassing. And if we have a page like this that's a permanent public tombstone of, oh, well, if you go to this lobster's page, you see that they have to deal with thirst traps. It's sort of a way of trying to stick you with the embarrassing thing forever, right? So one of the reasons blocks work differently on Blue Sky than other social networks, they call it the nuclear block. So if Alice blocks Bob on Let's say what Twitter used to be Bob would still Bob's replies to Alice or Bob's retweets of Alice would still appear on Bob's profile. And so if Bob said something offensive or dumb or something like that, Alice would block Bob, but Bob would still have all that content. And then on blue sky, they, they kind of do the nuclear block where. When Alice blocks Bob, those replies disappear from Bob's timeline. And if you click on the little replies tab, you don't see those at all. So Bob no longer has the satisfaction of having posted some trolly thing. And that's kind of the spirit of this, of not wanting to give the trolls a like a convenient thing they can link to be like ha ha ha look i punked them and you know i keep talking about trolling like i don't know 95 of these are please stop submitting business news or gripes about your boss or other off-topic stuff rather than gross messed up stuff but Some of the moderation features have to be designed for the most extreme scenario, unfortunately. So let's say we don't want to.

14:35twitchtd hi pushcx
Thomas. So there we go. So let's say what's actually happening. I'm trying to be really specific about what's happening. So that's like the third time I've made this message more specific. Because the more specific I can get about what's happening and why and what are the visitors seeing, the fewer questions people will have. Logged out visitors only see stories removed because we can get trolls conveniently logged in.

15:23All right, so Gravechen, that was kind of prompted by your question on the last stream. And I know when you asked about... I'm in the middle of recheck stuff. Okay, let's bet commit. And rebase. Let's shove this thing we just changed into its own commit. So this one will be, what's it called? This one will be, not just one, but explain that visitors don't see a lot.

16:24This one is just me. If you had watched one of the Recheck demos, you may have seen that I had split out Recheck into a base and a Rails version. And I realized from looking at another gem how I could collapse that back down. I'd much rather have one gem than two. So let's edit Let's make this main. this should be good that kind of editing a commit and shoving the branches around it's gotten real comfortable in jujitsu the last what have i been using it for maybe three months last month or so i just kind of zipped through that stuff between split absorb The rebase is a little clunky, and I've kind of figured out why. I think it's because if you look at rebases, oh, I'm going to resplit. If you look at rebases help, there are a couple of ways that you can specify what is getting rebased. branch source revisions and there are three options for destination after before. And only some of these combinations are valid. And this help page doesn't tell you which choices are valid or not. and I think I would like to maybe PR an improvement there to this text and the longer help text, which it sort of gets into this, but it doesn't say that there's a compatibility issue. until somewhere way down here. Maybe it doesn't. I don't know. I just have to play with that tool a little more. Oh, 31 second deploy. We're slowing down. So anyways, as I come back to it, Gravechen, if you had any more questions about why this works the way it does or that issue we were looking at that someone submitted that led to this, Let's talk about it there.

19:46Hang on, which one was it? This one I commented on.

20:04This one's still a puzzle. I'd like to spend some time on that one, though, because I keep seeing duplicate comments and it's really irritating.

...45graefchen The only question I would have had is that why the message is not so upfront for not logged in users. limesLurk
This one.

21:00I'm not sure I follow your question. Not so upfront for not logged in users. So it says that the story was removed, but it's not specific about whether it was the moderator or the submitter. Is that what you mean? I think that's a reasonable detail to add back.

...27Yeah, it could be fine.

...36or is there a specific piece of information? So when you say like upfront, it is deliberately less informative, but I'm wondering which part of it being less informative is concerning.

22:01graefchen More to that logged in users can see the reason why. Like "Only logged in user can see the reason". limesLurk
Let's just say it was moderated.

...12The reason is because of abuse. Did you maybe tune out for a minute? Because I kind of rambled about it for a minute.

...34That's better. Yeah, that's fine.

...45With this emoji is that you've used work. So I don't actually know the implied meaning of. Why not have that issue?

23:06It's the. So I added this message on 14. Start explaining that realized. actually run the specs but the gist of it the very short version is because we've had some people we've had trolls who submit things that are deliberately embarrassing in that if you have to explain that thirst traps or i don't know heavy drug use or these other things are not appropriate you look silly for even having to say it because this page can't give you the context maybe that's part of it so one of the reasons trolls do that sort of thing is the viewers won't have the context to see To echo something awful like user was banned for this post where when we've seen really bad stuff. I guess I guess the implication there is Oh, if you have to say thirst traps are off topic on lobsters. No, you can't post thirst trap right if there's a little tombstone page and that's the reason why this story was removed. The point of a troll submitting that is so that they can point to it and laugh and say, oh, look at these people with all these problems with thirst traps. Because a viewer seeing it for the first time can't know how unusual something is. And so I don't know how to fit that context in. And I guess because I'm thinking of the data model. Right, like a reason is 200-ish characters rather than a novel, rather than linking to policy. Those are all things we can improve. But that is a much bigger change than pushing some copy around like this.

25:42I'm going to keep thinking about that because it seems like we've changed this behavior.

26:08yeah it seems like the real challenge here is building context and the abuse is coming that i'm concerned about is coming when it gives people a way it gives trolls a way to do things out of context that look especially embarrassing or become abusive that's a really interesting idea If the big point is the lack of context and it's a thing that informs a lot of design decisions because lobsters at a glance looks very much like the site we forked off of hacker news or very much like the site it's based on reddit and both of those are you know. Depending what metric you use hacker news is hundred to 1000 to 10,000 times more. Anything that lobsters. And Reddit is probably the same amount above that. So people assume that we work and have norms like those sites. Let's think about that.

28:02I am.

29:06graefchen I think my "problem" is that Lobster wants to be very upfront with its moderation so the simple message of "The Story was removed" for logged out user seems so off to me. With the context of not wanting tomb stones I can personally understand why it is only this short message. I personally would prefer some message that is more clear like: "This Story was removed. To see the reason why it was removed, please log in." Or something similar to that. I guess it is just personal preference.
Don't expect either of you to see the story title. We said that in the other test, so yes.

...40This test failed.

30:00Thank you.

...31Oh, that's interesting to explain in the other direction that users can see it.

31:05Would that message be helpful or just irritating? Because there's two cases there. If the person has an account and is logged out, they can go, oh, right, I'll log in. I forgot I'm not logged in on my phone. If they don't have an account, they go down the rabbit hole of, oh, how do I sign up? And what's this about invitations? And then IRC. And it just... It seems rude to suggest to them something they can't actually do in any small amount of time. I don't know.

32:30twitchtd we need a new book: the art of moderation by pushcx
I've got two. Where's mine? I have a chore I've got to do. I'm going to be AFK for about 60 seconds.

36:42graefchen Moderation honestly is an Art indeed. limesD
okay back i didn't hit the right button so you didn't see the little message that i was like okay bad streamer no oh so thomas i have actually been taking notes towards a book i think there's a lot to be written about moderation of just do you set community norms how do you explain stuff how do you build trust and some of it is collected from the discussions i have with the other moderators of lobsters and some of it is actually a lot of it is discussions because i i back up and i'm like why am i doing this thing or it's from our meta threads where i'm like let me explain that a community is like a garden party that never leaves your backyard

37:53So we expected it to conclude by moderator. Oh, it says by a moderator.

38:07Why did these not both fail?

...25onion_warrior feature request: move the markdown explanation expando below the submit button, so that when I tab-move through DOM i don't have to skip over it to send a comment.
backslash output.

...37Hi, warrior, welcome. That is a great little feature request. You know, rather than moving it, we could actually just fix the layout. Because I noticed that it's on its own line since it became a summary details. So I think that the two things to do there about the markdown would be to put them on the same line and then to use a tab index so that you can go from the comment to the post, because I think that's a good point that people don't need to see the markdown help so often. Onion Warrior, do you know HTML? Do you want to do these two things?

39:30onion_warrior no, I'm a grug bash kludge basher
Let's just use the same grammar.

...39If not that small enough, maybe we want to knock it out. A grug bash fledgebacker. Okay. So you work in DevOps, is what they're saying.

40:06So I didn't say it, but one of the reasons I do want to show submitter verse moderator to visitors even is we see a lot of confusion. Now, let me back that up. We have had a handful of incidents. It's such a big war, maybe two or three times while I've been moderating. another social network like reddit or i think it was twitter is like oh this thing happened there but they didn't know how lobsters worked and so like a submitter removed a story or a user oh that was the specific one a user deleted their own account and because they didn't know our copy they assumed the person was banned and so they went lobsters banned this person it's like no that's when it says the user is gone that means they chose to leave and it was that kind of misunderstanding that has me beating this copy with a hammer over and over and over and it'll never be done especially as long as there are you know these other similar looking sites that are 100 times bigger than us But it would be nice if we avoid the very basic misunderstandings of... Did somebody get banned for this? I don't remember what the username was, but... Yeah, there was a... God, what has this been? It must be like three or four years. And... They assume not only that we had banned someone who deleted their own account, they assumed we did it because there were trends, which was not the case. So where's the comment box? Let's get up the server running.

43:30graefchen bash basher limesNoted Seems to be better thean studying student ... so many papers I still *need* to read, including the *currently* 4 most importent computer linguistics paper. lilith3Lost
Thank you.

44:00Let me come back to these comments, because I haven't seen these since the last screen.

...16Let's create these topics.

...26That's that. And then we want to look at the down help position and tab order. So you got to write down these topics or I jump around too much and I lose track of things.

...48Yeah, so this was what we chewed on on the last stream.

...59Change the links and remove comments to link to a search page with too much of their body.

45:14This story didn't get deleted. Vek, are you maybe watching? I'm not. I know you tune into some of these. I'll follow your suggestions. not going to keep but these comments haven't been removed and deleted comments are not present in the search engine it at least gets that right

46:07Well that's interesting so he's. yeah they're suggesting. Like if you filter out windows. twitchtd graefchen What are your top papers you've read
We could put a special border on it that's really nice design touch actually. Because I think when you go to the tag view. shows you immediately. It's under .

...44It does not show you if you're filtering it out. Well, it definitely should. All right, hold on. We're adding more.

47:06Get a bunch of feature requests today. These are nice little features too.

48:17Let's just keep this up.

49:21And we also, I think if we show stories. chamlis_ hi all!
We have a text. Yeah, we have said that if the story is hidden, but we don't actually have a, if story is filtered out. Hey, Chalice. shouldn't give tag filters out of the story.

50:23graefchen @twitchtd The best one, a
You know, Gretchen, if any of these papers haven't been submitted to lobsters, please do.

...51So let's also said,

52:39graefchen @graefchen The first one, after i li bit of search, is "Mathematical Modeling of the Spreading of Innovations in the Ancient World", the best more related to the field of Computer Science would be "Quality Estamation for Japanese Haiku Poems Using Neural Networks" limesLurk
you

54:00So I'm trying to explain that all of these things are trade-offs. And I think a lot about both what the site behavior and functionality encourage, but then also what are the second order effects of that, of all of the different versions of what we can do. And a lot of the times you get the primary effect you want, but the secondary is very bad and worse than fixing the primary or it creates new problems or Even your solution has problems. And I would like people to... I figure the more I explain these things, the more people are prompted to figure out where I've made mistakes. Because sometimes I misvalue things. Or also just to talk about these things as trade-offs. Because there are rarely anything that is so good and clear and has so few downsides that you should never do it. Or you should always do it. So... Let's look at changes. So let's do equal to you're going to start hitting the database all the time for the tags filtered by the current user. We move that into the... You know, I just watched a nice presentation where someone was talking about breaking up business concerns from HTTP concerns in Rails controllers. And this is the kind of thing where it's like, yeah, it's a business logic, but it's also a performance thing. So it's both.

56:32So I What I really want to do is immediately hydrate their filter tags. But I guess I don't want you to do that all the time. And as long as I'm deliberate about saying user. We have two features. So this is interacting with the fact that you can filter tags by cookie or by being logged in.

57:12So I think I'm going to end up making a helper.

...22That is basically this.

...58It's a little ugly because I really want to memo this.

58:07Because of this index by that's making a data structure. onion_warrior graef, have you seen the one about how villages were spread about ~5 km apart?
I guess as long as I hydrate once off of tag filter tags, that's basically free, right? That's fine.

...37Let's make one.

59:08graefchen Probably not. limesHmm
Now, if I say u.tagfilters, we hit it, and the cache is now, and we hit the cache again, but that might be because this is a development console. That's a helper. Tagfilter tags.

...48This is. Part time about that manifestation, right? I just don't want to step on that value.

01:00:26Okay, so in prod, that'll be cache. It's just that the cache on the association is disabled in dev mode. Index by, and we're walking an array of realistically 0 to 2. Worst case, 0 to 100. I don't care if we do that twice. That's fine. Memoize. Yeah, it's really fine.

...54we look it up anywhere else oh yes

01:01:43This is almost the same function.

...55So let's make that generic index by over here. This one where it falls, it can be.

01:03:22This piece.

01:04:17This is repeated. onion_warrior ugh, can't find the ID now. anyway, i'm off, back to investigating a scuffed deploy
graefchen But also the 5~ km seems like a very very very context depending paper. limesLurk Just bases on my knowledge of prehistoric archaeology in Europe. limesNoted
Find these different. Because this first one should be text. So that's a bug that I can fix.

...59This one already changes to text, so that's fine. Good.

01:05:12These things are all fine. Then those are down in the model layer, so they could be good. So now that we have that helper, that we can use everywhere, I can say, where's the style? Because I know we have a helper for it. I just don't know where it's defined.

...54So we have just crossed an hour. So I will do my little bumper that this is Lobster's office hours. You can ask any questions about the site of the community anytime. Otherwise, just hang out and watch me maintain. We chat about stuff and people apparently today are coming up with lots of features and they're all great little features. So we're going to hack through a bunch of those.

01:06:36He don't have a helper. Look at this guy. Maybe this is just one or two. Easier.

...59Most commonly tagged. Yeah, we need to make up. This.

01:07:46have one, we just didn't use it consistently. Okay, that's really I thought we this wants to be link tag.

01:08:15This wants to say, last, I think I can just pass an overlay here. I don't think I need to call compact, but I can say.

...42And filters include this tag. Let's break this out.

01:09:17So filters controller, why does it not have tag filters? It's filter tags, isn't it?

...57Okay, cool.

01:10:03So we've been scored tags. Turned underscore tags. Why is that not available? You have to declare the helper somehow. I never remember this one.

...36So helper method. This. I can just call the helper from the. This feels like a bad idea.

01:11:46TheYagich hey, what's on your plate today?
Okay, so now it has the class. Is there any other links to tags that I need to clean up?

01:12:01Layout application. No.

...14Single detail. And that's it. We're pretty good about using the helper.

...44Tag ID. Well, that's the controller one. So these all changed ID because they're not working on filters now. They're working on the tags. Good. Good.

01:13:25So now let's add that styling. Hey, Yagich. We are hacking on a few things. Just a lot of small quality of life features. And a bunch of them are prompted by this issue, 1706.

...51which I guess even included that one. And then we'll see, we are definitely gonna run out of time before I get to touch the holes. So we'll do these little features and call it a good stream.

01:14:42Instead of changing the whole border declaration, can I just change?

...57Got it.

01:15:04Border style sets the line style. That's just what I wanted.

...20That's not really visible. Let's try dashed.

...36Two straight lines. Oh, and are implementation specific. That's a recipe for confusion. Let's try that, though. know what that person did in their demo. Okay.

01:16:24That's not visible.

...34That's almost too visible.

...43I don't know, reasonable middle ground? What are our other options here? We've got dashed. Yeah, if it's one pixel wide, you're never going to see those things. Let's try inset and outset, just because I sure can't picture them. Or double. Yeah.

01:17:14I mean, it's visibly different, but you can't say why. Can I say 1 and 1 half pixel dashed?

...36I think that's about as good as that's going to get. We will just go ahead and call that ugly. Oh, we've got ridge and groove that I didn't play with. Sure.

...53That's not it. That's weirder.

01:18:06We're gonna go with dotted.

...30TheYagich i don't know if decimal pixels work in borders 🤔
It does seem to be visibly different from one, right? two versus 1.5 yeah no that it's definitely using that fractional it's been a long time since the px measurement in css was a literal pixel and i guess we can blame apple for increasing display densities but it's hard to blame them for something we're busy thanking them for

01:19:08That's reasonable. We could also do something like... Is it not style? Is it just style?

...33I can't remember these. That might help. Yeah, I kind of like that.

01:20:00Okay, so now if I click over to the tag page, yeah, it shows there. That's nice. It shows here on the stories and I click into the story. It shows here like it's consistently showing it. I think that's a significant improvement. So let's run the specs to figure out what I broke because surely I didn't get that shotgun refactoring correct, right? I mean, I fixed a couple along the way, but I've got to have missed one. Yeah, there we go. Sometimes I have an intuition for whether code's going to work, and mostly that intuition is if I touch it, it's going to break.

...43So we're looking for tags filtered by cookie. Oh, yeah, because of course that's not in the helper.

...58TheYagich my intuition towards breaking code has never failed me. i wish it worked the other way too sometimes
But it needs to be.

01:21:06I even chose the exact same memoized variable name. That's trouble. Yay for tests.

01:22:16Yeah, we're going to just go ahead and say tags any. So this is intended to, I should comment this.

01:23:02It's funny, one handy thing about babbling as I stream is I find myself explaining things and being like, why doesn't the code explain that? Improving those. Tag filter cookie, that's because it's up in the controller, isn't it?

...36I really don't want to figure out what's the namespace above these things.

...47So I'm going to do that.

...58That's promising. Now let's run the whole suite.

01:24:16Okay, four failures, not too bad. It's not called tag filters, it's called filtered tags. So where did I do that? Comments controller.

...55Great. So now we have a consistent visual styling for tags that are filtered out.

01:25:09And then now we want to explain if this can be one commit.

...42So this is up in tag. And we will say. I really want the styling from that story show. Yeah.

01:26:07We could do it both places. If tagFilters. I think any takes a block, right?

...23Let's double check that in zeal.

...36Whether any block returns a truthy value. Right.

...47filtered tags, if any of those match any of the, really what I want to do is union, right? So if I have the story has foo, I just say r foo,

01:27:21I want to be more expressive. Seems so. One of my hunches about Ruby, speaking of code intuitions, is a numerical probably has a method for it. And.

...46What I really want is.

...53not to be able to say, to have to say, like, I want to intersect. I just want to say, do any of these, do they have an intersection? Because that can get short-circuited, but I don't want to write the logic for short-circuiting. I know this is like n equals 3 kind of code, but I'm trying to be expressive. And it just annoys me to have to write the n squared. Where are we here? The webcam is falling off of the monitor. Give me one second. The cat has taken up the supervisor.

01:29:25Man, what is wrong with this webcam? It used to, like, just sit in position, and now it's fighting me. So it's on a little, it's got a little adjustable base, and every time I take my hand off it, it adjusts itself to point at the ceiling, which is not where the cat is.

...56Thank you. come on sir cat's gonna leave before i get the damn webcam sorted

01:30:31Yeah, that's... That's not gonna behave. I don't know what the fuck is wrong with the webcam. Oh, there we go. What a struggle. Alright. Yep, there he goes. That's the noise of the cat jumping down. After all I did to put you on TV, sir. No supervisor for this stream. What a shame. TheYagich a great tragedy
I can't pay the cap tax. Which is such a disappointment. We're just going to write this code.

01:31:21Great. After all that, you want to come and sit on the mouse just to make sure I'm annoyed?

01:32:28You know, I could one-liner that.

01:33:54So that was the single tag view, right? I think so.

01:34:05No, that was the single story view. There we go. So this stuff down here is mod UI. Story has tags you've filtered. Tags, plural, huh?

01:35:02you

...40Good. Do I want to say has tagged or is tagged with? We're not super consistent on that verb. Let's just say has tagged.

01:36:25So I did this out of the order I planned. But it really doesn't need to be multi-tag story view.

...56So we will grab this.

01:37:10So let's go look at the tag page.

...21You're going to be so wide, sir.

01:38:17And their comments will not be shown elsewhere on the site. And then this could just be you have, this doesn't need a link post, that's wrong.

01:39:21Good. What's another? Let's go to the multi-view.

...40OK, so this multi-tag view also doesn't respect filter tags.

01:40:04You have filtered. Let's go to that.

01:41:15You know, now that I've said shown elsewhere three times, it feels like a little bit of a fib, but I think it's reasonably clear what's happened.

...33Yeah, I would rather have a rough first draft on this message than beat this particular copy to death, because I feel like it's reasonably clear what's happening here. All right. Let's grab those commits, this one, to visually indicate to the story view,

01:42:40So that will be d. There we go.

01:43:15Why didn't it link this one? GitHub. I didn't rewrite that commit, did I?

...39Maybe I tweaked the commit.

...49So there's F B D. Yeah. I must've changed the commit a little bit between when I started that comment, but then these didn't get, oh, you gotta, you gotta push there. You know, the comments before GitHub will know they exist. For all its annoyances, this one's not actually a bug in GitHub.

01:44:36There we go.

...46Okay, so there's a bunch of features that I did not expect that we would be doing on this stream. But do improve the UI around tag filtering. So now if we go look at the list of tags, why is this one not using it? It's using strikethrough.

01:45:45actually need to pass them but they're coming down within the controller so i don't want to change that behavior right this second okay and it adds the word filter that's pretty clear makes it real clear why this has the border and the stripe through i like that all right

01:46:21It's not slash index, it's slash tags. And then do we do the same thing on filters? We don't cross it out, but that's OK. Because I think on this page that's like editing UI, you want to be able to read that easier. The check mark makes it clear enough. I think we're OK with that inconsistency.

...56All right, so let's go back to Onion Warrior's feature suggestion of improving the comment box. I said reply. So this the thing that bugged me is that this is two lines and I think it could just be one and then the buttons can get shoved under if it's actually open. And then second, if we hit tab, yeah, we get the markdown formatting instead of directly going to post. That's going to break some muscle memory for folks, but it'll be an improvement. So let's go over to the comment blocks.

01:48:15Skip it.

...33So we have the markdown helper.

01:49:00What do you call it? Markdown help summary. So this is a level of playing with the styling for a detail summary that I haven't done before.

...26And what I really want to say is that the inputs are on the same line. Chambliss, does this feel like a CSS grid thing to you if you're still listening?

...43TheYagich when in doubt, grid it out
chamlis_ I think there should be a way to have them all in a flexbox and push the markdown to the right
Because I kind of want to make the summary an inline float. is if I float it right, then it doesn't take up a position. And then here, Yeah. TheYagich when in doubt... flex it out?
Can I nerd snipe you with that part of it? No worries if not. Flex it out, grid it out. I mean, it's one of the two. Help.

01:50:37chamlis_ I don't mind giving that a go, but I'm not immediately available
TheYagich when in doubt, abandon the web and go back to early 00s UI toolkits
Yeah, there's no rush. This is not a thing that has to happen in the next two seconds. chamlis_ is the request written up anywhere for reference?
So if you want to take that, yeah, I would appreciate it. After any positive. So I think we just want to say tab index is zero on the markdown help. No, but I can file an issue for it so you can keep track of it.

01:51:24chamlis_ if it's just "put them on the same line" that's enough for me, just wasn't sure if there were any other auxiliary requests
That was an extra that was adding tab index to must be tabbing to the summary, not the element.

...41chamlis_ nice
No, that's the only thing I'm going to handle the tab index right now.

...52It's not there.

01:52:03Negative means the element is not. Positive would be focusable and sequential keyboard.

...18That's kind of a ridiculous hard-coded number to see. That's some old school HTML.

...35Wait, why do I not? I have them in a logical sequence. All right. So if I just say tab index zero on these other ones, do I get what I want?

01:53:06So i'm just trying to shove markdown help last So do I want to set the others to be zero or it some focusable. Have a tf tab index of zero under the hood. up there summary.

...44know looking at this red angry thing i actually get what i want i get most of what i want if i out of the box if i don't do that and i swap these oh the wearable hats are gonna They also need to be part of this layout. This is a little complicated because it's going to start running into screen with issues when the user has hats. Yeah, so now the tab index is correct because I'm just letting the browser handle it. But now it's really out of position.

01:54:38So I guess what I want is for them to be in a grid that's buttons, the hat control, which isn't visible, and then the details or the summary.

01:55:01But then when the details is visible, it should be between the text and the button because it's I guess it could be under. It's help text. Yeah, it doesn't need to push the buttons down. All right, let's see where we get there. Maybe I will try and... Let's get you into a div.

...35Call this controls. And I guess buttons. These are not great names.

01:56:26get them in the order we want and get rid of this and just put a hats on it all right and then

01:57:02We'll say we have a controls our display grid. And I think that automatically gets me the generic layout I want. No, this is its own line. Probably because of some padding or margin or something that has been shoved in here.

...43Let's just inspect.

...53This can get rid of that.

01:58:03where's that even set 921 yeah so that can go away and become a problem for the grid and then this calc can go away that's probably what's moving it around

...37graefchen I think it is the text-align limesHmm
buttons and then help where's this

01:59:09There's somewhere here Chambliss added a grid, right? Or did we drop it from the comments? It's been long enough that I'm getting flaky in my memory. Yeah, let's go to settings. That one's definitely grid.

...29Grid template columns. And then do I have to assign these things to columns offhand, I think they automatically become

02:00:33Better. I mean, worse, but better. So these buttons must have some padding on them, right? Margin top, yeah. So we want that to be handled by the grid.

...58Right, 68.

02:01:13Did that width just change? Because I know we just recently fixed it. Why did you just leap over to get a big padding on your left?

...53That warm comfort.

02:02:56I'll align this guy to the right.

02:03:10We do this in the heading, don't we? So let's see how we do that in the heading.

...40Do flex on these.

02:04:04Let's copy that.

02:05:00Almost there. What's up with the inbox link? I thought it was margin left. Display inline, does that matter? No, it does not. That's probably dead code. But it's the margin left that matters. So what did I get different about it?

...28You're only seeing the summary. I wonder if it's that the summary isn't what present it's the details. Okay. So, Hey, That's the layout we want. This width is off. And then what I really want is to shove the details down onto their own line.

02:06:22Yeah, it's not the text align. We've got it aligned now. Chambliss, if you're listening and have a second of attention, this is correct, but what I wanna say is that the details stay put, but then its contents pop out. Well, that's rough because the summary is in the details and it should stay put.

02:07:06I guess I could say that the table should pop out.

...50chamlis_ I don't know if/how that's possible, I'm afraid. I'm never sure what the best way to proceed is when you go beyond strict "boxes in boxes in boxes"
With flex, can I have, does it have a concept of multiple rows? Multiline flex containers with flex wrap. If they're too large, they'll wrap.

02:08:24That's basically what I want. I want to treat the table as a separate item from this summary. graefchen I have the feelign that you maybe could do it with some subgrid trickery. limesHmm
This probably isn't going to work. That's Oh man, I am so burned by subgrid that I don't want to add that. Why do you have a huge padding on your left?

02:09:25Does the table have a max width?

...35That's so strange. I don't understand where the summary's width is coming from.

...51Something odd is happening with the margins.

...59Thank you. I saw it for a second when I was inspecting.

02:10:07There we go. So the markdown underscore help.

...16But then you're not showing it here. So you say auto on the left for the margin. Oh, OK. So when it's open, I don't want the margin. If I get rid of it, it doesn't go all the way to the right. Why?

...41Why does it want to be just a little narrow?

02:11:03All right, is this... Is this acceptably ugly? chamlis_ I think just how with details works, the summary+contents together have to be a box, and for the layout we're aiming for the buttons would have to overlap that box
Yes, it should be outdented, but I think I can suffer that. And I would like that to stay still, but it's definitely not going to. Yeah. Yeah, I would really... Like the summary. So this is just me being an old CSS coder. I keep wanting to float it out of the layout. So it stays put here.

02:12:01chamlis_ maybe the best option is to open the summary with javascript so they can be completely independent in the DOM?
Oh, I was so happy to get rid of the JavaScript on this with detail summary.

...17Maybe the answer is to have a second set of buttons and use the checkbox hack to hide the first one and make the second set appear, because that's not a maintainability nightmare. That would be painful. srkedmi Thanks for all your work! A question if I may, I couldn't find an answer on the repo, but do you think Lobste.rs codebase could support Right-to-left languages? I'm thinking on starting a new sister instance
That would be both the buttons, which have their own conditional logic around when cancel shows, and the hat thing that I haven't even tried to get into the layout.

02:13:15How do I target the summary when it's open?

...29Use the attributes open. OK, so if I said.

...40Sorry. So I said markdown help that's open. Did I do that on the summary or on that cat? So what, sir? I did it on the summary.

02:14:07Oh, hey. Sir Kedmi, welcome. There is someone who has already started a port to Arabic. So I have no idea your answer, because I have very little experience doing internationalization, and definitely not with a right-to-left language.

...34Should be a minus one, huh? But there is someone... It tweaks just a little, but that's basically what I want. All right, so who was it? They showed up in the issues, and I think they mentioned right to left.

02:15:13That's not helpful.

...46Yeah, there was this guy, but there was someone else. I swear, someone asked about right to left, and I'm just not finding it.

02:16:08I guess I would say, can we see them in the forks? All right.

...21So that issue I clicked past, while that's rendering, that issue I clicked past was, I don't know this name, CodePure. To reduce vulnerabilities? Oh, they pinned a bunch of versions. That's just some confused bot. That's not actually helping them. If we sort by recently updated, do any of these names pop out at me?

02:17:08Yuanji, that's who it was, right?

...44I know what's happening with the search.

...55I know he's filed issues.

02:18:11And I know there's a way There we go. So let's find everything. Because it's not any of these other ones, right?

...29So to answer your question, someone is already working on it, and I'm pretty sure it was this person, yuanji-dev. pushcx https://github.com/yuanji-dev
So if you want to talk to someone about right to left I think they've already started so i'll grab you that link. srkedmi Thanks! I'll try to reach out yuanji-dev
and I said I I tab past it in that issue but.

02:19:08My I should mention that my basic. I'm very, very deliberate and limited in what kinds of code I'm willing to maintain that don't benefit the live instance of lobsters. Like, I understand why sister sites would like everything to have i18n formatters everywhere, but it makes it harder to run this instance. If there is stuff for write to lev that doesn't add a maintenance burden for me, I am very happy to have it upstream. But that's such a my understanding is that's a very it's going to touch a lot of code points and I am unwilling to take on a big maintenance hassle for it. So I will wish you the best of luck, but it's going to be yours to merge. So why does this jump just a little? What's wrong with one line height?

02:20:22Is there an extra bit of margin in here? Extra bit of padding?

...42Is it this?

...49Why is one line height not one line height?

02:21:17chamlis_ is it the padding etc on the buttons?
It's awful. Is it 1.2? Is it the padding on the buttons? Is there padding on the buttons? Oh, because the... So it's 1.2 exactly. Or, you know, rounds to zero at this zoom level. Do the buttons have... It could just be that they're taller than one line height.

02:22:02chamlis_ yeah I think they have padding top and bottom
Can I say that the controls buttons, yeah, I'm sure they, and then the, buttons, dot controls, hats, and dot controls, markdown, help. Summary has a height of, well, let's just say a silly number, 4m, because I'm just trying to make sure I'm applying the right style. And then I'll dial in a reasonable value.

...54yeah so they got the height so if this becomes 2m well if this becomes two line height and then this becomes minus two line height i'm just trying to specify the same value. I'll make it like a variable or something. Yeah, there we go. That's what we want. So let's say that this height is 1.5, 1.5. Give them a little bit of padding underneath, and that's fine.

02:23:47Can I shove this into a variable? because otherwise I have to write comments that link the two of them.

02:24:44You know, vim is actually mad, or it's just one of those where there's enough distance between the two things that it stops syntax highlighting correctly.

02:25:02No, it really doesn't like that. Oh, can I not put a unit on it? no and this one the other one is going to want to be the inverse right i mean i can use calc i guess bar that controls height

02:26:10chamlis_ you had `calv` instead of `calc` there
You are 1.2 instead of minus 1.2. You had Cal, you're right, good eye. There we go. All right, let's look at the comment box on top of the page.

...44Mod stuff. There's this one. That's fine. And then there's the story text, or the story submission form. Yeah, this is... That's pretty bad. So let's make that toggle only happen when we're here in the controls, which is comment controls, and we can do story later or something.

02:27:41Yeah. Right. Where did this extra left come from, or extra alignment come from?

02:28:16Is it because I removed something? It was depending on a max width. I don't think I deleted a max width.

...31There was a padding left. That shouldn't have changed anything. This. This summary is for the story box. I should put it back.

02:29:11That looks fine. It's a little bit different. It's a little funny these things don't lay out right, but that's all fine. Where did you come from? Extra markdown on the story form. Why do we render it twice?

...37chamlis_ a style so good we show it twice
So it's here, but then it's also in the story form.

...46Yeah, that's just a bug. So we want to throw away the lower one, which is this. Right? So that's there. I deleted one, and there's still two. Oh, so this is the story new page. It's different than the story edit page, which is generally good, but it means we have a little bit of redundancy here. Redundancy. There we go. All right. So I'm going to throw up the last call banner because I am over the time I wanted. Let's kind of skim this to make sure I'm not doing anything too weird.

02:31:01Double check that the tests are good. So we're coming up on the end here. If this build is green, I'm pretty happy with this diff. There are some minor tweaks I could make, but I'm really out of time. Nice to have a stream that's all just polishing UI, actually. That's satisfying. Tab position. Is that correct for all of these? So how about for story? Yeah, for story, you kind of have to tab through those. And then for comments, if I'm saying I'm going to... Why didn't the reply form open? I broke that page. I stopped it while loading. Yeah, so this indent is a little bit funny. Is it like that on the story pages as well? This indent is too big. Did I break that? Or is it already broken?

02:32:19All of these are too deep. And then that's extra. Channels, didn't we just fix this indent? Or did I just file an issue and then forgot about it?

...55chamlis_ it looks about the same as on prod atm
chamlis_ but I do recall you fixing it
Looks about the same on prod. Hmm, then maybe I won't YOLO it. Preview. This is what I was thinking of. Oh, you know what? It looks better there. Yeah, it's getting worse, whatever it is. The comment box is slowly shrinking. It's like a senior citizen.

02:33:50That's not something I want to take on because there are so many places that we present the comment box in so many locations and styles. chamlis_ run a GSoC with the sole goal of modernising all of the styling on the story pages
I just don't want to start that because it's one of those things that feels like it's like, oh, I'll just tweak the one line of CSS and then I have to check everywhere and then I have to tweak and I have to check everywhere. Oh. I have no idea how one gets signed up for those. But if ‑‑ what is this C? Did I accidentally duplicate? Yep. That is one jujitsu thing that's bit me a little bit is because it adds files by default, It is very easy to accidentally save a copy of a file or have a temp file around and then commit that. I know I've already done that once or twice on lobsters.

02:35:21All right, so onion somebody. I don't remember it anymore. Onion Warrior. Thank you for suggesting that fix. Let's deploy it.

...38And then that's going to be the end of the stream here. Thanks for hanging out with me today, folks. Good to see you around the site. I'm not even going to wait for this to finish. I'm ready to roll. All right, everybody. chamlis_ thanks for the stream!
Next stream will not be on Monday. I'm going to be offline. So next stream will be one week from now, same time, Thursday, 9 a.m. Chicago time. And then after that one, there might be one more and then I'll be offline for like two weeks. I just have a bunch of travel and it all landed in the same... like month, six week period. So I'll update on the next stream. But yeah, next stream will be next Thursday. Take care, folks.