Float is so hard to keep working
Streamed
Reviewed OTP recovery codes PR - discussing number of codes and disabling 2FA. Merged 1+n query fix and user profile CSS fix. Deep dive into CSS grid layout proposal to replace floats, discussing subgrids and mobile views. Fixed search parser bug causing 500s on quoted stopwords.
scratch
topics
PR review
OTP recovery codes https://github.com/lobsters/lobsters/pull/1483
1 + n https://github.com/lobsters/lobsters/pull/1509
user profile css https://github.com/lobsters/lobsters/pull/1507
issues
reloading story submission https://github.com/lobsters/lobsters/issues/1505
fix modlog link https://github.com/lobsters/lobsters/issues/1506
title
post-stream
Transcripts are generated with whisperx, so they mistranscribe basically every username and technical term. They're OK but not great, advice appreciated.
Recording
05:05So this is Lobster's.
And this is Lobster's office hours.
So if you have any questions about the site or the code base, jump in any time.
Otherwise, oh man, big mood.
Otherwise, I work on the code base website.
pushcx Drop a question in the chat anytime!
I guess the first thing is I've got a bunch of pull requests to review because I've looked at most of these.
Yeah.
So I'll leave that over there in the chat.
I just did this this morning.
Go away.
Yeah.
Okay, so this one's been something that got reviewed and then Hunter got busy for a bit and the others are new things.
So let's take a look at, let's start with this one from Hunter.
I reviewed this and there were a couple of small changes to make and an open question or two.
06:47Yeah, I expected, let's see, two factor auth.
07:11OK, so we have one commit that bumps some things. Security is failing.
...25This is the breakman bug we already know about. Okay. That's fine. So let's review the diff.
...42That's... Okay, that'll need a wording touch or two.
...54Okay, so there's the disabling 2FA like we had talked about. And here we generate a half a dozen codes. Fine.
08:13I don't remember overall. Did enabling 2FA make a new set of codes?
...28I guess what I'm thinking about is if using a recovery code is going to disable 2FA and enabling 2FA creates recovery codes. And it does. There's not a lot of value to making six of them. They've become sort of a, you can only use one in the set before. Hmm. Well, GitHub sure doesn't work that way. because that prompt I got and clicked through told me to have recovery codes. I want to say it listed 10 or 12 of them. I see one of those places where, all right.
09:50chamlis_ I don't really know ruby so may be way off here, but I think `disable_2fa` should be `disable_2fa!`
Oh, did I see that was closed?
...58I knew it was similar to their other Shameless, you're right. Yes. Okay. And then they have a new bug that is the same bug.
10:24Hmm. Okay, so this person knows that they're duping the bug, and then this one should do it. chamus we'll get to your pull requests in a couple of minutes i was hoping you'd drop in before i started reviewing them but the answer to your implied question about ruby is the question mark or exclamation point at the end of a method name is just you can have that as a valid character at the end of a method name it doesn't mean anything or force any semantics on you so There's no sense of like, oh, if you make an exclamation mark name, running it without the exclamation mark also does something automatically. Because no, there isn't any meaning to it. So if the diff is missing that exclamation, it's just a bug.
11:53All right, so this one's open.
13:05No, it doesn't sound like there's any benefit.
14:36Counting how many recovery codes I have for GitHub.
...53It's like 16.
16:15So I'm probably.
...37And, you know, Irene has the rate limiting question. A lot of the site could use rate limiting at a couple of different levels of abstraction. So we'll see how that goes.
17:19Let's fix this language real quick. So there's some grammar stuff that tells me Hunter wrote this in a hurry, but then also... I can't rewrite it until we have the disabled question settled.
...45Yeah, I don't think there's any point in...
doing that review until we have this question settled.
I don't think I even need to say it.
pushcx https://github.com/lobsters/lob…
All right.
Oh, I didn't, I didn't grab the URL here.
So that was 1483.
And we are doing recovery codes.
And now, Chamlus, we're going to take a look at yours if you are still present.
Do you have a preference on which I start with?
What do we have?
We have 1 plus n. That makes me happy.
And a CSS.
So these both sound fairly small.
18:58chamlis_ I think the two non-drafts should be relatively simple to review
pushcx https://github.com/lobsters/lob… https://github.com/lobsters/lob…
All right.
19:04chamlis_ on the CSS grid one any feedback would be useful really
Well, then, let's just start with the one I have in front of me.
This is going to be Brakeman Failure.
Yep.
Let me see if Brakeman updated.
Nope, not yet.
At some point, they'll release that bug fix that's getting us.
Yeah, I'm really curious about that one.
We've talked a bunch here on Office Hours streams about how much jank there is.
I was just reading a story, I think it was submitted a while ago, where it was a retrospective by Evie.
Her name is E-E-V-E-E. Really interesting.
chamlis_ I know of her yeah, mostly for "on a technicality"
blog and she wrote about how there were these different errors in css it was a big nostalgic oh well that's a darn easy bug fix and someone in the comments on lobsters mentioned that oh yeah the days of having to use float left for alignment were so painful and it was like oh man
You have not inspected source on lobsters.
Our site uses float for most everything except the top nav.
All right.
21:00Just the base merge so it can just go right in. Great. And then let's look at this.
...20How have I not seen this in dev?
...36Oh, because it's only happening on the, yeah, this is a page I never look at in dev because it works. All right, that's legit. So if we eager load, yeah, because categories, I only added categories, what, two years ago? I guess it says that's how long it's been since I have loaded that page in dev.
22:14Oh no, longer. Wow. Almost five years. All right. Well, happy to have it.
...29chamlis_ 2020 wasn't five years ago, hush
I guess that also says I don't have any smoke test on that page, but that's okay.
I want to redo a lot of the mod interface anyways.
...51Well, great.
Good call there, Jamless.
Yeah, I know.
I mean, I did say...
I did look like that was saying August.
CaiusHardcore Crumbs, just got interested enough to look up my join date. May 2014 :-/
So, you know, call it four and a half, but... All right, so there's...
So, Jamless, good call that it's real easy to review your two PRs.
Thank you for those bug fixes.
That's great to have.
And then...
Yes, I saw this, and it was such an exciting title.
23:31Line height in VR, huh?
...37Yeah, speaking of the eras.
Let's find that poster real quick.
pushcx https://eev.ee/blog/2020/02/01/…
So this one, yes, this is the one I'm thinking of.
...57Yeah, Caius, it's, it sneaks up on you. I want to say I joined about five or six weeks after the site started. And then it was, you know, there's a saying something like the days drag and the years fly by.
24:47CaiusHardcore Definitely. Long days, short years is what my friend usually paraphrases it as
Long days, short years.
Yeah, that's legit.
Did I see... Huh.
Is it my monitor, or is this hat overlapping funny?
And the top of it is one pixel into the brim?
It's bright enough in here, I can't really tell.
Anyways, I don't think that's Shamless's bug.
25:38chamlis_ opening the images in tabs and switching between them might show the differences well
chamlis_ there were some hat-based line-height shenanigans so it might be on me
okay well let's the other way to know is pull up somebody's profile that has a hat so if i grab this and figure out where the heck it dumped on my file system to
View it.
There we go.
26:16Looks like it's a pre-existing bug. This is probably something I broke, you know, years ago and nobody ever noticed because it's a pretty subtle design issue. All right. Kind of a strange way.
...47Why this name to do? Because it's in progress or is there another meaning?
27:01Spread, spread.
...18chamlis_ yeah I wasn't sure where things would end up, like if there'd need to be different grid setups around the place
Yeah.
chamlis_ this PR isn't ready to go as is for sure
Yeah, that's really my primary question about is thinking about the page overall.
Yeah, I wasn't going to race to hit merge just yet.
Yeah, so these are the kinds of Oh, I see it's a label now.
28:05So there's minor, did you change the full layout of the page? I'm curious why these Is it just that one is a little bit tall? That's why the aspect ratio is changing. One is a little taller, and so we're just zooming funny. OK, that's fine. So let's zoom them both out to 40% just to have an equivalence.
...32And unmute.
...43You know, I never noticed that this was misaligned, but now I can't unsee it. Hmm.
29:12chamlis_ I think that was line-height
Yeah, probably it's just float is so hard to keep working.
It is.
You look at it funny.
It breaks.
Yeah, the the existing CSS selectors are really big on this kind of structural.
Extra information.
am very happy to see more of these gone all right so if we have a grid we're going to template with what is fr in grid units
Fractional unit, okay, yeah.
Column gap, row gap.
30:38Why am I not spotting the width of the labels? Oh, because it's that 13m min content. What is min content? We're out at the limits of my CSS grid. That's not what I meant to click.
31:16chamlis_ that should be 12em I hacked that around later
chamlis_ before they were 12em wide, I'm forcing a 1rem gap between them there essentially
Okay.
...47I noticed you're mixing and matching between M and REM. Did you have a strong preference on that? I thought the general guidance was to say always use REM. I assume we just have a lot of old stuff.
32:18chamlis_ I've always been pro-rem, but the width before was specified as em so I was matching that
sure i think it's fair to say that a lot of the stuff is not if you see something odd in our css it's almost certainly not a very carefully considered design decision it's programmers who don't have a lot of experience in visual design saying this looks roughly correct so there isn't a lot of you don't have to treat the existing stuff as
Holy, it's just all rough draft almost.
33:15Did you entirely drop the box wide glass then?
chamlis_ not quite, there's a big todo list in the initial comment but a ton of pages didn't use it at all
didn't see it get deleted from the css ah you haven't deleted it because some pages still use it of course breakouts oh yeah this one i am so happy with this copy it has saved a bunch of hassle it's been around for maybe two years now
But it's really lowered the temperature on that particular kind of request because now folks understand what's going to happen and get exactly what they want.
Which is very nice.
It's one of those places where a line of copy fixes a process.
34:23That's a lot easier to read.
...44That's.
...52Well, thank you for catching these indent bugs that have creeped in over the years.
35:04I'm sure this kind of shotgun surgery can't have been very easy. And it's very hard to look at stuff and feel very confident about what changing it is going to do with CSS.
...29So to do grid, and I'm saying this just so that I understand this to do grid is created for our really common pattern of having like keys and values, because this is how the user profile works.
chamlis_ yes, exactly
This is how most forms are laid out.
Is that fair to say?
Is that what you were going for?
36:01Or is that the sub grid? No, it's got to be the top level.
...11So where does sub grid come into it?
...29chamlis_ subgrid is for pages where there's two sets of key-values that can't both be direct children of the grid itself
Yes, okay I wondered if we would need.
chamlis_ you could make them two separate grids, but using subgrids means they line up with each other, not just with themselves
Are there pages where we have two sets of key values.
...44chamlis_ the user settings page uses them
I can't, can you give me an example I can't think of one right off yeah.
...58User settings.
37:04Let's get the Rails server stood up.
...15So here's one. Because these are in divs or something. That makes sense.
...39This is not good copy. I should actually explain what that means.
38:06chamlis_ well the key-values have to be inside different forms, so you can't make them share the same top-level grid
Yes, that's it.
Good call.
I forgot that this is... Yeah, this page is multiple forms.
Okay.
chamlis_ I don't know if the slightly lesser support for subgrids is an issue?
And do we... Is it this calc that's around min content that you're concerned about?
Because otherwise they would just...
repeat the styles and all have the 12 M wide labels, right?
And wouldn't that be enough to visually line them up?
See, I thought subgrids were going to come into it with comments.
chamlis_ if a label couldn't be broken less than 12em, the column would have to be wider
Yeah, I don't think, I'm not too worried about subgrids because again, our label, except for comments, our layouts are pretty simple.
chamlis_ maybe that's not an issue worth worrying about
Then this is the mobile view.
39:25I see you did let it breathe a little more.
...45And you've seen one of my minor pet peeves is that all of the mod UI is pretty clunky and not at all adapted for mobile. It's a cobbler's shoes thing. Okay. This is a real minor thing, the way this loses its length. But overall, these are like you've recreated the layout of the page. And the way you've changed the vertical spacing here is an improvement, I'd say.
40:28chamlis_ I think you might have before and after mixed up
chamlis_ with the "aaaaaa" in reason is the after I think
Okay.
...34I think so.
...42I mean, it's more likely I have the CSS bug than with width. Yeah, the way Firefox opens tabs is hard. Let's just reopen them and make sure I'm looking at the right order. So before this big hash starts 984, after, Also starts at 985. All right. So 428. 428. Come on. What do you end with? Capital A. End with K. All right. So capital A. The URL is different again. Oh, my God. This URL is so long I can't even tell. Let's just close all these extra guys out.
41:36All right, yes, before does not have the As.
...44After does. And despite what that Firefox animation said, after is on the right.
...57All right, so you tightened it up. That's fine.
42:15chamlis_ I tried to tighten values with their respective keys there
Yeah, I see what you're getting at.
And it is... Yeah, I'm gonna reverse myself.
It is nicer to have the two a little closer together.
...34So I guess overall, I have three big pieces of feedback.
The first one is thanks for taking on a giant project.
The second one is... Maybe let's...
I didn't even expand your list of all of the pages because I know it's enormous.
Yeah.
Would you be open to doing this as multiple PRs or...
I mean, if you're really sure that you want to cross everything off of this list, I just...
chamlis_ I can do multiple, sure
I fear seeing this PR abandoned and having it half finished.
You've heard me talk on stream about encouraging folks to continue.
And I definitely...
chamlis_ maybe just profile, or profile+settings for the first one
I guess I'm trying to say I want to make sure that you're hitting checkpoints and it doesn't feel like you've taken on an overwhelming project.
and doing multiple PRs lets you succeed at several smaller?
Yeah.
I think that would be a great way to structure your work.
So there's one more thing that you haven't listed, which is this whole page overall could use a CSS grid, I think.
because the way that things line up, you haven't looked at comments.
There's a clever thing that happens with comments on desktop that I would like to preserve.
AnakimLuke greetings
Let's go look at localhost.
44:34Hey, Anna Kim. you can actually you can see it here the clever thing that happens with page layout is basically the page is the vertical alignment the left edge of the page is between active and the username and that lines up pretty much everywhere except on top level stories and comments the voters hang in what is effectively the left gutter of the page, and the comment folder hangs in the left gutter of the page, and they are horizontally aligned with the center of the logo. And down at the bottom of the page, there isn't anything that happens in that gutter. I had sort of thought of this as the tricky place that you were going to end up using grid and subgrid. because I can't quite picture what the overall page structure is going to be. But I think there's no way that, you know, this whole thing, this and this are going to have the same single parent element, especially with the nonsense I'm doing to the story emerging UI.
46:04And so far your profile work has all been on pages that don't use the gutter. And I don't know if that's even, I don't think that term the gutter is in the CSS, but that's the term from like comics that I know. I am sure the, if I pulled bring Hearst off the shelf, he'd call it the left margin or something.
...37chamlis_ that is nice, I'll think about how best to go about that
And the reason I'm kind of harping on it is it's so easy to break.
Almost every time I touch the CSS around stories and comments, I end up breaking that and having to do it again and tweaking it.
I haven't committed it much.
Once or twice we've gotten like a pixel off that's been committed, but otherwise big breaks I've caught.
chamlis_ is there a simpler page than the full story+comments that features that?
It's just the one really clever thing that's happening on the overall page.
47:15Well, you see it on here. So this at least doesn't also have comments on it. So this is all in app views home.
...32And I think that's it. It's just those story and comment indicators. Yeah, search doesn't do it. Tags doesn't do it. Did I miss? Yes. Yeah, nobody does it except story and comment. I thought about it for filtered tags, but then the word hide was a little too wide. So I think that's really it. Yeah. Yeah, this is the other thing I was thinking of where there's a clever bit of CSS to replace one bullet point with an emoji.
48:29Okay. So,
...49chamlis_ I'll look to get that gridded in the first PR then, to verify the approach for the main page doesn't make that impossible to do
AnakimLuke what u working on now?
pushcx https://github.com/lobsters/lob…
AnakimLuke CSS? WutFace
didn't i relates to but doesn't close 1279 anakin we are reviewing shameless's draft pr about laying out pages with css grid because right now we use a lot of floating that is very brittle especially
yeah css oh and chamlus one of the did i call it out not especially the yeah i really okay that's fine
49:43Part of the motivation was the story submit form, if you want to prioritize, because this fetch title button and the replacement of the tags with the one from tom select those are it feels like between various browsers desktop and mobile one of these things is always broken just and I think right now it's the width of the replacement tags box is broken in mobile Safari I don't know. It's just the browsers are still just a little bit incomplete. Like they tend to lay out the text a little bit differently. So when it tries to do clever things with the width and float, either the title breaks onto the next line, which is, you know, it's okay on mobile. I think it would be better if it matched that. But then again, these guys don't match a width. And then this select... it has a different font size or something and all of these are measured in rem or m and so then when the tom select replaces it it goes from correct to wrong so this story form is just constantly has some minor visual bug that really was the especially irritating bit that made me go oh gosh we just have to redo this with css grid because we'll never make floats reliable because if after what 14 years we can't get it right
51:53chamlis_ haha yeah, I'll look at that too
AnakimLuke do you use all home brewed css, or do you use a framework?
chamlis_ I'll probably close that draft PR and open another with a clearer scope
Our CSS is all homebrewed.
We do not have a framework.
We do not have a reset.
What is today, the third?
I would rather you
like name your grid better than to do.
And we can brainstorm a name there and merge this down and start making incremental progress rather than throw it away and start over.
And that's just my hunch around what tends to lead towards things getting done rather than, I don't know, every time I have like a big wooly project and I start over, I end up no closer to done.
But if you know how you work and how structure works for you best, and that's a new PR, I am happy to have a new PR.
I guess what I'm rambling about is trying to say, I want you to succeed and I am trying to help you as best I can.
54:00chamlis_ fair, appreciated!
I guess there's, yeah.
...24chamlis_ uncharacteristically honest username?
And you know, one of the things about that,
...33Yeah, true.
AnakimLuke omg LUL
For anybody viewing this on the archive, you won't see the spam message I just deleted from someone named Disreputable Criminal, and then it looks like a keyboard smash after that.
But they were just spamming viewers.
When I delete chat messages, they do not show up in the archive.
I think it's actually a limitation of the Twitch API
55:06So channels when you look at this one of the reasons it's brittle is also it was written before CSS calc, and so there is a big comment in the CSS that is looking at, and it was written before CSS variables so it's like. Looking at this other element, we know that it's you know 12 pixels wide or whatever. And then we know this part is 15. And so we are going to subtract those two. And that's how we came up with this random image. Let me just show this.
...45AnakimLuke what does the suggest button do>?
Let's see, voters.
The Suggest button is for users to help fix titles and tags.
AnakimLuke ah cool
So users can say, oh, you forgot to tag this with Rust.
And then they can hit Suggest.
They get the story form.
56:18Yeah. So I'm thinking of this.
...33There's this big comment.
...40I don't think I'm thinking of this little one. I think there's a bigger one. Maybe I did eventually. Or that. Now, here it is, this is what I'm thinking of. So this div inside for arranging things, okay, it is now using calc, but it's not using variables, so I just kind of explained where all of these random numbers are coming from as it mixes pixels and rem. This is the kind of stuff that it would be very nice to delete with CSS Grid.
57:38Oh, where'd my comic go?
59:01I also, let's see one of these pages, I want to say one of these pages gets it wrong too.
Yeah.
So there's a subtly different view of comments that appears when they're not in the tree where the folders are inside like this.
So this is an inconsistency and it is sort of deliberate where we're trying to line up these voters.
But Chambliss, I don't remember if you were here for last Thursday's stream where, or maybe it was the one before where I tinkered with putting the voters in line or the folder, I think here underneath the one
That's the sort of thing that would improve all of these pages.
So if you want to tinker along those lines, if we get something that's clear and removes this inconsistency, that would probably be a benefit because it would improve both this page where the comments are just a list and then the tree style view of comments.
Actually, can you sound off if you were here last stream?
Because there was a whole big thing I kind of ranted about where
chamlis_ I think I missed that
AnakimLuke I didn't know latin was so popular in lobsters :D
I try and be really cautious changing high touch, hot path UI, because even when people can't explain what changes, a deep part of them feels the difference and gets put out by it.
chamlis_ oh I remember that wrt via and profile pictures swapping
AnakimLuke :D :D
Well, you know, we only chat in Latin when we're summoning demons.
I want to say there's another inconsistency.
Like if I search for stories and I search for
Yeah.
Oh yeah.
Chandler, if you, that was exactly what that was.
Yes.
That was the example I gave.
And speaking of profile picture swapping, you mentioned that you were still using float on the user profile page.
We're not married to that layout on the user profile page.
If there is a slightly better way to do it with the grid, it's okay to change.
These things don't have to be maintained perfectly because so many of them were not deliberate decisions.
There's just that caveat.
And I'm sorry, I can't give a simple rule.
There's a lot of janky and inconsistent UI that's worth cleaning up.
chamlis_ I'm aware of my skills as a designer so the ideal for me is switching to grid but having identical rendering as before haha
And I want to be really deliberate about the hot path.
high touch the thing you look at all of the time you know because so like i want to be deliberate about these story list details and i want to be deliberate about the comment headings and that doesn't mean they can't change just they have to be worth the change because it disrupts everybody but otherwise very little of the site is highly polished
one of these, yeah, so this is using that alternate style where the folder is in line.
I thought one of these views, maybe it's the, so let's look at one of these test users.
Maybe it's the user view of stories submitted or the user view of comments posted.
One of them, maybe I fixed it.
Because this is like a half-remembered thing, so maybe it's been a half a dozen years.
01:03:05Yeah, okay, I guess I fixed it.
AnakimLuke didn't lobsters have an option for signing up without an invite and hope someone lets you in?
One of them used to not hang the folders or not hang the voters in the left margin, and it was just inconsistent jank, and I guess I got it.
AnakimLuke I can't find the page
I don't know that I noticed this one where deleted comments don't have voters.
And so then they get their own left alignment.
This is one of those things that should go on the cabinet page.
Oh, Anna Kim, you are thinking of the invite requests.
So that is a site-wide setting.
The code is still in the code base and most of the sister sites turn it on, but it has not been on, on the lobsters for, oh gosh, I don't know, 10 years, something like that.
AnakimLuke really?
AnakimLuke I could've sworn I had seen it active
I'm really deliberate about not including code that lobsters doesn't use, but when the maintenance burden is roughly zero, I'm fine with it.
Yeah.
01:04:37I didn't edit this.
Yeah, this is just...
Okay, so this is me moving the settings.
Yeah, so he enabled it in 2014.
So there's that 10 years I'm thinking of.
i jump back a commit i'm probably gonna lose that yeah so i'm not finding the exact commit where they were disabled but it was before i became the admin like what is that almost seven years ago a little more it's been a long time since that's been on
would like to revise this but it's below it is waiting behind some other improvements to story suggestion story merging and self promo and some of that is technical and some of that is i don't know how to say it better cultural the
Story submission form got some refactoring recently and the story editing form got some refactoring recently that was early prep for this, but the way story suggestions work is gonna change in the database so that they are sort of draft stories rather than being a suggested taggings table and a suggested titles table.
They will just be a like story draft table that just serializes this form.
And then users who suggest edits can also suggest edits to the text and also suggest edits to this checkbox and also suggest edits to merges because all of that stuff can get rolled up in the form instead of having to be a different table for everything and special logic for everything.
And then also, once there's an idea of a draft story, we can improve the functionality around self-promo so that new users who try to submit self-promo, instead of getting an error, that draft gets saved and kind of put into a queue for other users to evaluate rather than just posted live to the site.
And then ideally, it can get highlighted to their inviter, and their inviter can give them advice on how to better fit into the community and make sure that they are following the rules.
Acculturating, in short.
And then, oh, and Channelist, just looking at it, I remembered, you talked about the grid and the subgrid, and we talked about how this key value structure shows up all over the site.
If it hasn't yet popped out at you, notice that these are not as wide as the keys on the user profile page.
So again, that is not a deliberate inconsistency.
That's just where this page landed over time because everything was hand-coded.
chamlis_ hadn't noticed, thanks for pointing that out
So then once there's an idea of draft stories and everything,
I think we can get more open to invites and public signups because we'll have a better, the big, big value of invites as a system has been, it allows us to maintain our own culture because people join at a slow enough pace that they learn how the site works and want to fit into a community.
If we had open signups,
I mean, the first time the site was linked on Hacker News, the entire culture would be replaced with the Hacker News culture because it's 1,000 times larger.
And so if 1% of people clicking through from a Hacker News link signed up for lobsters, they would be 10 times larger than the existing user base, right?
And so that just zaps away your culture.
That's part of why Reddit kind of
there's not a lot of differences between the subreddits.
There's kind of a, like the shit posting teenager subreddits.
And then there's the vast middle of almost all subreddits that all feel entirely the same.
And then there's a teeny tiny sliver of things like ask historians that have to be incredibly strict about rules to maintain any kind of different culture.
And if you look at their,
discussions you will see that they are holding back the tide to keep from turning into the other two categories.
01:10:03So anyways, big ramble, but... Fourth thing was...
...42Thank you.
01:11:40I'm mostly writing up that summary, Shameless, so it's easier for you to review back to those key points as you tinker on this.
And then I wanted folks to...
Anybody who's not watching this stream doesn't know that I put a bunch of time into talking through this with you, and I want to make sure that people who just come and look at the repo see that pull requests get attention.
And...
how eager I am to start merging it and how thankful I am that you're taking it on.
So that's why I'm writing what feels like a redundant comment there.
So that's all the pull requests, I think.
The others are inactive.
And I guess the...
I guess the...
Idlebot isn't working?
Updated last week.
AnakimLuke has anyone ever made a visualization of lobsters' invite tree? I think using something like Gource might be fun
I don't remember this being updated last week.
Yeah, January 28 is the last commit.
I don't know if you've
I don't see the note that he force-pushed.
That's really odd.
And this says updated last week.
This says updated last week.
Is it the... No, the label of stale didn't appear.
I don't know gorse.
Ah.
So I don't know that anyone has made a lot visualization of lobsters invite tree, besides the one that already exists.
01:13:45Right, so we do display it as a. tree and branch structure but that's the closest there is. That's a lot of camera bloom. Or light bloom, whatever that effect is called. Or it looks like I haven't cleaned my glasses. Could be fun.
01:14:22Alright. So I knew there were a couple of... UI things to look at. I've seen some activity. Ah, and I have no idea how to pronounce this username. I know who this is. They're certainly irregular, but OK. Well, let's fix this bug.
01:15:14I'm going to do the easy fix and just take that extra parameter off.
...32So this is going to give me a 400. And then if I delete this, OK, I got it. Great. So let's just fix that.
...56What was that ID number? 1506.
01:16:11Pull in Chalice's fixes to be able to push my own. And then that closed, great. And then, oh yeah, this one I hacked up and just wrote up real quick during a stream. Ah, speaking of, Chalice, this one was you again. Let me set auto-complete.
...48Oh, and someone has even taken a shot at it. Okay, did I? All right, that's tagged. All right, well, yeah, channels, it sounds like you figured this out. Huh. That's a really... I don't understand why they would choose to overload autocomplete.
01:17:18Oh my gosh, this is a long bug. And it's 14 years old, so that behavior is not changing.
...40Thank you.
01:19:35chamlis_ yeah I've hit this one before
let's encourage i'm gonna guess her to submit that i don't think i know who this is yeah i don't recognize her username i know someone with the male version of that name all right good
Nice to fix a bug and have another one fixed.
So, Chanlis, you've really been doing a lot of front-end fixes and contributions.
I just wanted to say thanks.
I really appreciate all your help.
AnakimLuke yay?
Now I just got to teach you Rails and make you the primary maintainer of the code base, and I can take a vacation to a beach?
chamlis_ this is how they get you...
No, seriously, I really do appreciate it.
This kind of stuff has been very, very handy.
Yeah, it's an old reference that people don't get anymore, but on the off chance you're, yeah, I don't even remember if you're an American, but there's a famous American novel called Tom Sawyer, where the
chamlis_ I took the hour to figure out setting up ruby so now doing fixes is much less effort
main character tom sawyer is very clever and gets in a bunch of trouble it's set in like 1850 and one of the things he does is trick neighborhood children into helping whitewash his fence he has this big tedious chore of having to paint the fence and he makes it out to be this very exciting thing
And so he suckers his friends into thinking that they are doing something fun when they are doing a big chore.
And I always think of this, but apparently this book is not assigned in school anymore.
And so nobody gets the reference.
But I am constantly trying to get people to help whitewash the fence of fixing stuff on Lobster.
So I really appreciate that you have.
Oh, yeah.
I mean, if you got those screenshots, you've definitely got Ruby working.
If you're on Linux, BSD, Mac OS, it's not too bad.
I think Windows is still a little clunky with Ruby, but if you want any help fixing anything in your dev environment, feel free to grab me on chat or bring it to office hours because if it's going to get me pull requests, I'm really happy to contribute to helping people sort out setup issues.
01:22:16chamlis_ cheers, rbenv has been solid
All right.
chamlis_ I'm on arch
So let's see, where are we at?
Hour 22.
Yeah, I really like rbenv.
Oh, I am also on Arch using rbenv.
Of course, I can't remember its commands, but yeah.
...46And then I think, well, let me do this off stream, because I don't think there will be anything. Oh, yeah, that one I don't want to show. Gem, Ruby. How did I set that?
01:23:28rebelelder I'm also use rbenv + direnv, but on freebsd
I had a bit of rbenv clever hackery, but I think I must have deleted it and just forgotten I deleted it because it's been long enough.
Doesn't matter.
rbenv and direnv.
Yeah, I've been...
I never have quite enough projects to actually use direnv and...
Rails has sort of reinvented that wheel of how do you store your local config settings enough.
AnakimLuke does lobsters have a json api endpoint? (im asking because otherwise i'll have to parse the rendered html to get the invite tree)
And I pretty much only do Rails and Ruby lately, but I can see how Durand is useful in other projects and probably going to become standard-ish over the next five, 10 years, because it's nicer to have one solution to that than every project has to integrate its own reimplementation.
01:24:38I'm not sure if lobsters has JSON for the user tree.
...48So we have slash users. What takes a dot format?
01:25:00I don't think this does JSON.
No.
rebelelder On non BSD machines I've been trialing nix, nix + direnv is really nice for moving between projects and languages. cd into the project and you're straight into a dev shell with all dependencies you need to dev
AnakimLuke the hard way it is!!
so we don't have lobsters doesn't have a full json api we have a couple of really big things and then we have whatever the front end needs our front end
...40Ah, well, Rebel Elder, it sounds like you're living the dream there.
I can see how you would get there with Nyx and Durand.
That must be really nice.
I have not had any success with Nyx, but it's been, I don't know, five years since I last tried.
Maybe they have improved the docks.
I don't know.
AnakimLuke what about for getting info for a specific user?
I would very much like it to work, but I think there is just some kind of fundamental impedance mismatch between the way I think about stuff and the way Nix likes to explain stuff.
There is info for a specific user, yes.
So if we go to slash user slash pushcx.json, we should get, no?
AnakimLuke hmmm
That's not right.
01:26:47Oh, it's not.
This is me being wrong.
Wrong URL.
It's tilde... Yeah, there we go.
AnakimLuke okay! thanks!
So you can say tilde username and get JSON.
And I think...
I don't remember... No, the frontend never uses this.
rebelelder agreed's I'm old school Unix (hence BSD) and the way nix messes with the path irks me, but as with all things it's a trade off
This is one of the couple of places where I've added JSON because...
People with third-party tools are making user scripts get so much utility out of it.
Oh, I think the way Nyx messes with Path is the most clever part of it.
But I can see how it would be unsettling to have something that feels like your personal customization for 20 years start getting edited by a tool.
It takes a long time to build that kind of trust when something you're very comfortable with tweaks.
01:28:11chamlis_ I've been semi-tempted to try nixos instead of debian on a laptop
I didn't grab the dang URLs.
rebelelder yeah! but I'm trying to dog food, so going through the pains
So that was, yeah, I've done that.
I've done Nixos instead of arch on.
A laptop and I also did it on a shell box just because it's a you know it's going to get some real use but it's not the end of the world if it doesn't work out the way it is for my primary machine and.
That did not succeed for me.
01:29:08andriibeee is this vim or whatever unholy emacs & vim obelisk
pushcx https://push.cx/stream
hey andrew what is it andry i can't read the tiny font andry b welcome it is vim and if you go to i could just type it here in the stream chat just as fast this page there's a little bit of faq around what are you looking at and what is the color scheme and all that all right
...47So let's see, we are an hour and a half into the stream, which is roughly halfway.
I usually go about three hours.
So it is a good time for a bumper that this is office hours for lobsters.
chamlis_ I need to head off, thanks for all the feedback and the stream as ever
If anybody has questions about the site or the community, why things work the way they do, bugs to report, I am happy to talk through whatever you have.
It is an open door kind of policy.
And if nobody... Ah, well, thanks for dropping in, Channelist.
I will see you later.
AnakimLuke from the rails point of view, how come if I prepend .json to /users it still returns me a page? how does the routing work? im new to rails
Looks like I may have broken the build.
And then otherwise, I was going to say that I work on the site and do fixes, but mostly I seem to be introducing bugs.
01:30:45Anakin, that is, I think it's a misdesign in Rails.
andriibeee @pushcx this is obvs vim but kinda curious what terminal multiplexor is this
I know I've talked about it on stream, but the way Rails handles alternate formats, either I have been misunderstanding something about it for like 10 years, or it doesn't work.
Andre, it is Vim, actually.
Vim is the terminal multiplexer.
I'm using the tabs and the colon term command.
so that display at the top here is a couple of vim tabs my first stream or two i used tmux but then i was like ah it's redundant let's just use vim directly so let's see
01:32:02I've seen this error for a minute, and I thought it was going to. I know I mentioned JSON.
...31So. Where is it?
...43JSON format.
...55Probably this guy. It's going to link to it.
01:33:06There is somewhere in here, and I can't find it right off, but there is an issue in here where I have done a deep dive into this Rails behavior where even if you don't specify a .format, Rails will try to permit all kinds of formats. And it's just a source of bugs for us.
...42AnakimLuke aaaand it does it silently? :s
Because even though... Now it's going to bug me.
Even though we don't...
AnakimLuke that's unfortunate
Here we go.
Here we go.
Finally, enough cross-references.
Yeah, so...
01:34:09pushcx https://github.com/lobsters/lob… https://github.com/lobsters/lob…
so let me just share these urls so you can check them out for yourself because there's a bunch of deep dive but the gist of it is rails seems to assume that actions should respond to all mime types it knows and it knows about html and json i think even images and so
Even though we don't say that slash user supports JSON or slash recent supports JSON, it just sort of assumes we wanted to and then throws a 500 when we don't have a template for those formats that we have never supported and never implied that we support.
It's very strange.
I don't understand why it wants to throw an exception and throw a 500 instead of a 400.
or even just a 404, like either of those would be fine and defendable.
The comment here that I have on screen is my big investigation of it.
And it fundamentally feels to me like either I have misunderstood something about configuring routes or, because I don't know why everyone isn't irritated by this behavior.
Or we have some odd bit of config.
I don't know what's going on with that one.
AnakimLuke intereting!]
Very strange.
AnakimLuke thanks for hte pointers~!]
I've kind of made my peace with it, though, in that we at least are not throwing 500s in production anymore.
And I think it's listed.
Now I have to find it.
Where's that catch?
01:36:06Yeah. So I did the fix that was least clever of yeah. And then there was another bug and then there was another I'm saying, well, rails, if you're going to throw missing template and this one is, this one is not a great fix, especially I had to fix it for development mode, but This also means that if you typo the name of a template in an action or in a render call from a template, you get a 404 instead of getting the nice exception page. I would like in production, if I say render, you know, users seven, you know, I just typo the word users and there's a seven on the end of it. I should get a 500 for that in production. That is a bug, but this swallows it and assumes that it's a client side bug because Rails doesn't differentiate between you asked for a format that the site has never claimed to support versus the site tried to render a template that doesn't exist. It's so strange to me. Every time I see someone talk about like capital S software, capital F freedom,
01:37:36I wonder if we're going to have a flame war.
...52All right. Is this? OK, that's the abstract.
01:38:03That's fine.
...09So let's see, since nobody else is popping up with questions about the site or the community, and I have run through all of the issues and pull requests. Oh, I broke the build. That's what it is. Let's fix the build. And I don't know if this is gonna be the break man thing or something else, but I can see over in my inbox that I have yeah the emails i have about the build failing are just that it's brakeman so we are waiting for the brakeman project to cut a new release to be able to deploy that yeah so the tests are fine that's the important one and then here's the false error okay so the yes the build is broken but it's fine for now and i don't want to hassle the brakeman project about When are you going to cut a new release? Because I assume they have a responsible process. They are a very well-run project that I appreciate the hell out of, so I don't want to give them a hard time. Next, I know actually there is an issue with the search engine that does not have an issue on GitHub. because I haven't pasted out of my email because I have been busy with family stuff. So what did someone search for that didn't work?
01:39:47Ah, they're trying. They're trying some kind of nonsense.
...59Hmm. All right, so let's reproduce this bug.
01:40:17So I got a couple of exceptions out of the search engine that someone was trying to search for something and got a 500. This is their search query.
...33And I don't, in title index of includes.
So I don't know what search engine they think this is, but they're searching for something.
This is probably just an exploit.
And I know it's not customized for us because all of the syntax is wrong.
For us, it is title colon, not in title.
There is no support for parentheses, though I would like to add it someday.
You do not have to say explicitly and.
And there is no support for negative, although I would also like to support it someday.
So this is the bug.
And I would like this to not throw a 500.
rebelelder bug is, "stop teying to hack up"
And it is probably something that I changed recently.
01:41:27round short words like of so if i get rid of of yeah so you get the the feedback of hey boy are you using our search engine wrong and that's fine let's make this a minimal test case so if i just search for index of what do i get
01:42:00OK, it's actually doing a search that's going to take a minute. So I'm going to assume that one was fine. That's fine. I lost the.
...30Lost the user input in all of this. So this is the one that doesn't work. I'm going to pull this into a test and make a test case and cut it down there. Otherwise, I'll be going back and forth forever with the search engine. So that is a bug in the search parser.
01:43:03Yeah, you know, if they weren't all get requests, when I see these attempts to run exploit engines on the site, it's really tempting to ban those people. And we do have a little bit of it, but we require that there be doing a post because you can get people to do gets just by having image tags on a page. And that would be bad if you could get any arbitrary person blocked from lobsters by getting them to view your web page.
...45Even with the warning, that's going to be faster than the web page. This is the wrong spec.
01:44:24I don't care about the trees. I'm trying to find the right place in this file to add it.
01:45:04That's not the whole thing. Where was? I don't actually care what it parses to. I just care that it parses. Yeah, so I'm going to copy this.
...49What was that edit? Grab the new thing.
...59Ah, there we go. So I accidentally replaced some code somehow. That's one of the hassles of Vim sometimes, is your keystrokes are also your content. So here... We expect this to parse, and I'm going to do this so I can just paste in the quotes without having to think about single verse double.
01:46:40I guess he didn't use both, so I don't have to. All right. And does this parse? You should see a nice error. Good. All right, so let's minimize this test case some index of. I wonder what the hell this is even from.
01:47:20I would have to look through, because there were more than one exceptions. This could be an exploit engine that was trying to build up things because they can tell the difference between getting a 200 out of the search engine and a 500. And it's so common to get SQL injection errors on things like search engines that it's really tempting to make your bot fairly clever about throwing syntax at a thing and trying to make a minimal attack case for Come here. Delete. Or the user.
01:48:04It's this one.
...11OK, so that fails. And I don't think these parentheses are going to matter.
...26no you know i want to keep the whole full user input hang on so this was so there's my full user input and now here is my progress on minimal test case let's confirm because i want to have this test do the minimal and then do the full thing just when i'm making regression tests for user input i like to make sure they include everything like you know get the minimal test case and see it in context okay so that doesn't fail So is it, I don't think it's gonna be this, is it?
01:49:36Okay.
...41So that parse is, if I get rid of index.
...53parses, okay? What if I change that to foo?
01:50:05Fail. OK. So it's not about this operator. And if I take the quotes off of credentials?
...20Fail.
...31I don't think index is a stop word. Good.
...48All right, so if anyone has been staring at the parser on the left and the bug on the right and has spotted the bug before me, now is an excellent time to speak up. because it saves me time. And if you spot a bug before I do, you get to be the channel, a channel VIP. And it's going to be something about this stop word, because if I change this to say like ZZ, I bet it's going to go away. I'm only suspicious of stop word because it's the last code I touched in this. Yeah. So it's going to be something about the interaction between stop words and quotes. or stop words and quotes and this prefix, because when that went away, does it care that there's a colon?
01:52:00Or does it just care that there's something before the quote? It cares that there's a colon, okay.
...16Wait, why did that? Oh, because it's I didn't check correctly.
...29OK, so it does care that there's a colon. I hadn't edited the ZZ back to of. OK. So what do we have? So we take all the words, and they have to be followed by a non-word character, or end of file. And I remember tinkering with this a bit, so I'm real suspicious about this followed by. So if I put a space here,
01:53:21Yeah. Close the wrong thing.
...50I do wish I want to see the full error without any wrapping. I do wish I got better debugging out of this, because I would like to see the... That's not that sweet. Just this one.
01:54:23At line one, char one. Yeah, so it's just telling me the whole string. If I said... Where's that debug I had? That marswip debug.
...52That... didn't get me anything extra it's not dot it's underscore with debug
01:55:28I'm trying to run just this one spec instead of the, yeah. Okay.
...39Extra input after last repetition at line one, char 13. Where's 13? Zero, one, two, three, four, five, six, seven, eight, nine. That's a weird place.
01:56:15Extra input after last repetition. So it doesn't like the space after the quote.
...41See, it didn't like the quote.
...51See, this is the rule it should be running, and then it's failing at space q.
01:57:04So it did consume the close quote.
...13Was that the problem is that it's consuming the non word character as part of the stop word. As opposed to doing a peek ahead.
...42That could be it. So if it's consuming the quote as part of the stop word instead of consuming... See, a lot of these end with space question mark. So each rule... finishes, so if I then said space question mark here, what did I get?
01:58:26Parse. Hang on.
...39Well, it didn't fail. I'm not sure it's correct, but it didn't fail. Is that the problem, that it did not... All right, so what if I said...
01:59:04I should still get a passing test, yeah.
...13So do we understand why this fixes it? Yeah, because all of these rules start with the word chars and then finish by optionally consuming any whitespace after them.
...43So I think what's happening is this is garbage. So it becomes a term. Then there's a colon that also becomes a term. Or it just gets ignored. Yeah, it goes into catch-all. So that's what's consuming the opening quote.
02:00:19OK.
...42Not a failure. All right. So let me... I'm typing off stream for a second.
02:01:01Let's see. Can I make this window bigger? Yes. All right. So off stream. I'm doing a quick skim for other... All right. This is a bug. So this is someone searching for a title. So let's grab this.
...50So this is someone's search.
02:02:04Dash e, not dash n. OK. So that fixed this other thing. This threw an error in production. and if i look do i see a username in here no so when i get 500s out of production i look to see if they were logged in and i will email people and say hey you saw a 500 in prod it's fixed or here's the github bug if you want to track it yeah oh that's So this is going to be the same bug as the last time, but I'm going to show it as the first one, but I want to put it on stream. So another one here is index of parent directory. This is someone looking for some particular exploit. And I don't know what it is, but seeing parent directory tells me they're searching for
02:03:20Yeah, they're looking for some kind of known exploit in software. Or they're just trying to enumerate pages on the site. There is a constant, constant flow of this kind of stuff. And I honestly don't know how much of it is... Oh, we're getting hit by some kind of meta search engine. So this one, this one's not an exploit.
...59They are searching for index of, so this is probably they're looking for things created by mod index, which is the Apache module for listing folders. And then they are searching for Zelda that says MP3 or AUG. This is some kind of meta search engine. Who is this badly behaved? bot that's throwing garbage at us. Yeah, obviously the user is not logged in. What's your IP?
02:04:39Who is this sending this?
...48Whipper?
02:05:01This is just some random, let's see.
...25This is just gonna be some random home VPN bullshit where this is a residential connection that somebody has popped, and either they installed a dodgy VPN that is funneling bot traffic for them, or they're running some metadata crawling thing for themselves, something-ish. Yeah. I expected this was going to say some meta search engine or a Tor endpoint or something.
02:06:10See if we have any other searches. Yeah. Another search for it's this search for index of all these things are trying to find pages where we're listing files. So somebody else looking for Zelda music, someone searching for a simple serialization system. This one's real user input.
...42The double space is what caught my eye and it's interesting. All right. So yeah, that's fine. Is this an actual user that I should email? Nope. They were not logged in. Tried twice. So I'm running down. Yeah. Someone searching for credentials, credentials minus dork. So maybe this was a real user rather than a bot, but they're just using some kind of strange meta search engine.
02:07:33Random Indonesia, right? That says Germany, but this says Indonesia. It means it's probably Indonesia. All right. Any others? So there's this person trying to search for things, especially looking for word credentials. very suspicious but i don't really care who they are all right and that's it for the search engine bug so let's make sure that everything is running and then i can push that fix and get fewer exceptions in prod
02:09:19that deploying. So that's also Jamless's fixes and a couple of other small pieces of code.
...48You know, unless folks have questions, I think I'm going to make this a short stream. We're at two hours, 10 minutes ish. And I don't want to dive into story emerging because the place I left off at is kind of dodgy where yeah you have to go look at the last stream archive for it but it worked but it was ugly and I'm not sure if it was ugly or just different and I just have to stare at it and play with it and sleep on it which is not interesting streaming yeah all right so there's all of that deployed and no more issue or pull request activity while i've been streaming no okay yeah so unless so if you have a last question about the site or code base you can throw it in the twitch chat now or This is not exactly speak now or forever hold your peace because the next Lobster's Office Hours will be on Monday at 2 p.m. Chicago time. And in the meantime, you can DM me on the site. You can email me. You can direct message me on IRC if you have gray in your hair. You can message me on Blue Sky or on Mastodon. You can put up smoke signals in downtown Chicago. There are lots of ways to reach out to me. And I'm happy to have any of them. And then otherwise, I'm gonna wind up this stream. Yeah. I didn't say anything funny. Maybe I'll look back at the transcript and see if there was anything in the mention of bad user input.
02:11:59There's a little warning about spacing. I'm surprised. I thought standard RB would have fixed it on. Yeah. It's just confused. All right. Well, this has been Lobster's Office Hours. Thanks for hanging out with me. I hope to see you again on Monday. Feel free to reach out anytime and take care.