Erb is string soup
Streamed
Replaced blurry PNG merge icon with crisp SVG from #1472. Started work on βcabinetβ, a component preview system like Storybook to help refactor ERB templates. Fixed HTML validation issues and cleaned up data URLs. Investigated MariaDB deadlock from #1238 caused by duplicate comment submission.
scratch
topics
data urls https://github.com/lobsters/lobsters/issues/1472
updated_at columns https://github.com/lobsters/lobsters/issues/1471
close li tags https://github.com/lobsters/lobsters/pull/1470
story merging https://github.com/lobsters/lobsters/issues/1456
title
post-stream
stream archive missing chat from 'no gift' onwards
archive: ical links, link https://paul.af/twitch-ical for people w tz hassles
Transcripts are generated with whisperx, so they mistranscribe basically every username and technical term. They're OK but not great, advice appreciated.
Recording
02:37This is the start of the Lobster's office hour stream. I'm Peter. And if I suddenly disappear for a second, it's because I'm having a mild allergy attack the cat got me just as I was sitting down. So it goes. So... This is Lobster's. Nice website about computing. Unicode code points. And if you have any questions about the site or the code base, feel free to drop them in the chat any time. Otherwise, I tend to work on whatever is hanging around. And lately, that's a bunch of stuff related to story merging. So usually I start with pull request reviews. There are a couple I just closed. Oh, it's the wrong order. So this one a couple of days ago fixed the docs. This one added Docker for a local environment. That's probably not worth streaming, but I got to play with that at some point to see how it works. One of my very deliberate strategies as a developer has been to avoid learning some things. I have avoided learning Docker. It's just there's only so many hours in the day, so many hours you can read things, practice, tinker, yak shave. So I've deliberately avoided Docker for a long time, but I think it is probably time I start learning it. Both so that we can have this local development environment, which looks real straightforward. I do wonder about what makes it It doesn't look particularly repeatable to me because by default, people seem to pull in these Docker images that are possible to be updated, like I would expect to see a SHA-1 or something in the source. So I will learn. And the nice thing about that is it also opens up the potential of using Kamal to deploy lobsters. And if you've seen how much time I spend mad at Ansible, Well, that might be nice to try something else. So this one that I touched on stream is still hanging out. I didn't get back to it. Been a busy couple of days.
05:50If you saw on Blue Sky that I posted about starting the stream, this was the bug slash old performance kludge that I wanted to clean out. So a couple of streams ago, I worked on adding this icon here for showing how many stories are merged in. And a stream regular, DZWDZ, noted that it's blurry. And I thought, that's weird. But after looking at it, I was like, oh, yeah, it is actually just blurry. We don't even remember where it came from. We think it was probably made by JCS. And where it was used before was a smaller font size than is using up here. And so can I just grab this image? Yeah. I don't think I've ever downloaded an attached file off of a GitHub issue before. So I'm going to just drop that in lobsters. I guess public. It's always weird to me that there's the distinction between app assets and public. And I don't actually know which I want because I don't know that we have any images in the code base right now just kind of a funny place to be yeah So these are not actively in use. I think maybe this select to icon is in use.
07:54yeah. So if I stick things in this images folder, assets, I think I get the nice caching behavior where everything gets a hash attached to it. So I'm going to stick it in there. So that's lobsters app assets. And I've got the... Firefox image dialog or file dialog off screen. So what do we call this? Let's call it Merge SVG. There we go.
08:36Oh, we have a note about that select to.
...51That's right. When I dropped that, that was the last in the code base. And so I say last image, but there is conspicuously the site logo. And the way that works is then the way merge icon works is this kind of data URL. So when I say no images, I was kind of meaning no image files. And this is a HTTP one era performance hack. Because there was a fairly high overhead to each additional asset. And in the early days of HTTP 1.0, they actually had to tear down and rebuild the TCP connection between each. And then at least the connection became reusable in, I want to say, 1.1. But that was still slower. And now HTTP2 has pipelining and all this. So all of this stuff is just... ready to replace because there is no performance overhead to having separate asset files, or it's just not worth even thinking about. So let's get the local Rails server running. So I'm going to replace that image, and then I want to replace the others as well. Did I have a merge story around? Need you to do in the database.
10:51So let's just grab the most recent of these.
11:06All right, so there's our icon.
If I zoom a little, yeah, it is blurry.
dzwdz hi what'd i miss
So I want to see if I can just name the image because my one hassle with the.
...31pushcx https://github.com/lobsters/lob…
Hey, DC, I'm talking through your.
bug report and fix I should throw the link here in the chat, but I was saying that.
I appreciated you redrawing this as SVG and then also.
This is a old performance hack to inline these things as data URLs and so I wanted to break them out as their own.
12:00So I want to say I just reference it as images slash merge SVG but that's probably going to be wrong.
...14dzwdz i like how it's blurry on your screen too
yeah so that vanished where's the.
there's got to be a rails guide about assets and how to refer to images.
...36All this stuff about.
...52So there's my setup.
13:02Automatic reloading.
...16this but no like how do you reference an image this is not helpful yeah i zoomed in on on mine to make sure it was visible
...49I see rails four. Oh, here we go. If you were using rails seven with prop shaft, you can just reference with no path. All right. Let's see what rails does with that.
14:17Oh, there we go.
Wow, there's your redraw.
dzwdz you need to change the height too, i think you didn't do that
And it looks nice at different sizes.
Easy peasy.
dzwdz it's 2px taller
And since I'm... You know, you're right.
I think, well, it's the width and height for the span rather than the image itself, but let's check.
15:00Honestly, if we just take this off and let it set itself it's yeah because it's a span rather than a well SVG don't have an explicit height that's why I wanted to. Do this. So that looks fine.
...36I just wonder if I should just replace it with an image tag rather than be clever about using the CSS background.
...51dzwdz still misaligned but at least it's not awkwardly cropped now
Let's think about that one for a second.
...59Yeah. It could be a hair higher than the baseline. yeah that's not it so that's switching it to vertical line top which is too much and also changes the height somehow oh it's these down here changing and shoving against their top yeah where's the let's grab zeal
16:33vertical let's try vertical line baseline see if that gets us something nicer no it is actually acting like that's invalid because i'm getting basically top what if i said bottom yeah
17:13wish I could just refer to the line height and say line height. Is there a CSS unit for that?
...33H L H. Okay. So what if I said that you were one L H tall
...45Can I turn off the width now?
1m wide.
And your vertical line was now baseline.
It doesn't look like that baseline.
Which is strange.
dzwdz 0.6875lh
That actually looks...
dzwdz er, for the width
dzwdz so it's in the same unit
pretty reasonable yeah let's pull that in so that was width will be one m height will be one line height vertical line will be middle point six eight seven five let's try it that's all right well oh for width yeah
18:55make sense. Okay.
19:23Make sure that's what we want. What's the, we got to get 1472.
...57Just go ahead and...
keep moving on these so this ought to say i didn't push push that up all right so that changed closed great so let's look at the other ones
because there's not really any benefit to having them inline.
And you can see that they do stuff like break my text wrapping and stuff or the CSS highlighting where because the line is so long, this gets chopped off and they can be cached independently.
Yeah.
So.
There's another couple of PNGs.
There's...
I don't remember what this one is.
And then there's the logo.
And I think this is the same image.
Just kind of glancing back and forth, it looks like the same thing repeated.
So...
That's the logo.
Close this out.
dzwdz looks kinda different imo
And say, what looks different?
Oh, you're saying the two SVGs look different?
22:00dzwdz the second one is longer
You're right, they are.
This guy has a B slash.
This one has an FY slash.
Unless there's extra stuff and it's line breaking funny.
Here, let's grab this one.
Paste it in.
The second one is definitely longer.
That's strange.
I don't know why the logo would be different.
Oh, it's I was just assuming because I saw a media query that it was a.
...50dzwdz wait what even is happening there
The mobile layout, but it's a alternate logo that's higher resolution for.
high DPI displays like phones.
Because when the site was started, phones had significantly higher DPIs than most monitors.
dzwdz why is it in :after outside of the media query, and directly on #logo in the media query
Things have sort of settled out, but one more reason to use SVG, right?
So what was it called?
Logo color?
23:23I don't know. Alright, so there's the logo, the color changed because instead of having a Oh, it's the part of this is the clever Easter egg about traffic level influencing the red in the background. And I can see that it's misaligned too. So let's just look at this.
24:07Yeah, so that's on red. That's on black. And that's, I think that's totally unused at this point. So what we really want is a new SVG that has the L with no background color so that it can get filled in.
...30And then
...38mjiig What's the traffic level a percentage of?
Actually, no, I can see it here, right?
...49The traffic level is a percentage of how much activity there has been in the last, I want to say six weeks or three months.
dzwdz i think you can change the color of individual svg elements from css
So it's over in Traffic Helper.
It's funny, this used to be a significant
times suck, but it counts activity as a vote.
And then the number of comments and the number of stories.
And it's weighted.
dzwdz huh, i assumed it was server load
So a vote is one, a comment is 10, and a story is 20, which would kind of flip.
And then it
counts in 15-minute increments over the last, what is this, 60 days?
90 days.
No, it's not server load.
So it's very much the actual community activity.
A lot of people really like this.
It's just a cute little thing, but it's funny.
If it breaks, and it's been a little brittle, so it's broken a few times over the years,
dzwdz lol
Somebody reports it within a half an hour, just immediately spots that it's pegged at 0 or 100%, which are the two ways it breaks, and gets it sorted out.
So I'm going to have to make the L, which is a little different than taking the L. And I want to know what this image is.
I believe it's going to be the logo.
I just want to see it.
26:48Let's search for a logo. No. That's filtering. Come here.
27:03So there's my logo.
Firefox, you want to show me the image?
Because it's not enough to have.
That's not so helpful.
Let's just swap it in so I can see it.
vinitkme Hello, Hello!
So if I say we're going to use this here and just immediately override that and I reload.
vinitkme Good to catch your stream
Yeah, OK, so it's just an upscaled image.
Oh, hey, Vinay Kumar.
Nice to see you.
So what I want is this.
And then this code can just go away, I think.
28:07We'll make a logo transparent. I'm just going to fire up Inkscape and open up the logo. Come here. All right, everybody who's watching in dark mode, get ready, because Inkscape sure isn't going to be in dark mode.
...29Why can I not?
...38Inkscape is doing something funky.
dzwdz i think you should be also able to change the background color in logo-color to currentColor
Is it floating?
Come here.
dzwdz then it will inherit the text color
Let's see.
It's not full screen.
It's not maximized.
There we go.
Inkscape was being weird in my window manager.
So we've got Inkscape up.
It's open.
Where is it?
Code, lobsters, app, assets, images, logo.
Why are you giant and floating?
Inkscape really wants to be maximized.
All right, so can I just ungroup this?
There we go.
And then can I just delete the red?
No, not the whole thing.
30:18Change the background color and logo color to current.
Well, it's not the L I want to change.
dzwdz yeah no that's what i mean
It's the background here.
...37The fill will inherit?
dzwdz that's how icon fonts work
chamlis_ you're in the export tab on the right there, I think
Let's take a look at that.
All right, so it's, there's the traffic color.
Let me grab the code back up and I'm going to change this to say logo color to make sure we see it.
All right.
So now you're saying let's try it in the inspector.
It sounds like, you know, SVG is a lot better than I do.
dzwdz but i think there's some dumb stuff related to how you include the svg
So it has a background color.
31:26dzwdz don't remember the details off the top of my head sadly
And DZ, can you say which... Oh, I despair of tweaking this HTML and CSS.
It was real fiddly to get things to display correctly.
Okay.
...55OK, mask.
32:28dzwdz https://css-tricks.com/cascadin…
So instead of saying that, and I'm just going to comment this out, I'll say mask image.
33:01let's grab your tab over here so you say ah css tricks svg fill colon let the fill cascade to the svg okay so how is the Trying to remember how the traffic helper actually... So it does all the math, figures out the current activity, figures out the current intensity. This has more SVGs that we could break out, doesn't it? No, it's doing it just as styling. Okay. So then...
34:11current intensity, cached current intensity.
dzwdz actually this might require you to embed the svg in the html now that i think about it
Who actually calls that?
...32OK, so we set it as a background color using a CSS style.
...43Well, I was trying to cut down the size. Let's see how that works. Let's bring this.
35:06dzwdz it doesn't work if you use it in an <img> and the other ways of embedding an svg are somewhat wonky
Doesn't seem to like our SVG as a mask.
...18Limited on desktop size at 1080p, so there's going to be a lot of dinking around with window sizes here.
...45I don't even see the mask declaration.
36:01So we've got a logo, and the logo after should be right here. But maybe I have to change this to just say the logo should have the mask image. And then probably all of that's going to be broken too.
...39All right, so why don't you like this?
Invalid property name mask image.
twitchtd mask image is mispelled
Was it just mask?
No, it's mask-image.
37:00twitchtd you have mask iamge
And it should be supported.
...17Mask image is misspelled. Yes, it is. Good eye. Thank you.
...28All right, so now it has it, and it knows it has it. And so was that saying that we add the fill property? Let's just try it here.
38:01Doesn't look like it did anything for me. Am I filling on the SVG? The CSS is similar to a background image.
...34Channel of the element.
39:14dzwdz here's an example of what i meant https://dzwdz.net/tmp/lobs.html
Let's pull that in.
Well, that's interesting.
That's what we want, right?
But you've had to put the raw SVG elements here.
dzwdz yeah, that's the dumb part
You can't reference them as separate files.
...45Hmm. That's not what we want, though, so. Hmm.
40:07dzwdz i mean, at least you know it'll be aligned exactly as it should
This mask looks almost right because using SVG and backgrounds.
Yeah, alignment would be nice.
Had a weird amount of hassles with that.
So we can say background color is red and then mask image with the SVG, which is exactly what I've done.
...43Let's look at his CSS pen. Oh, OK. That's an unfortunate outage.
41:05Let's just mention. Look at that can't type mask image. Oh, Google got it though. That's part of the element.
...26So this is what I want. We set a background color. We set a mask image.
...49But it's not actually masking. And I guess we sort of want the inverse of that demo. But that's what our SVG looks like, where only the inside of the L is filled.
42:13That's cute.
...34So this looks like this is exactly what we want because we're going to have an inverted image.
...51I guess we would want an inverted logo where
43:00Sounds like the mask image probably has an option for reversing. Let's try grabbing these. Is it possible it's just making the mask image a funny size and position? No.
...51dzwdz how is this better than making the logo transparent
yeah so i see where you're going with the mask image thing but this doesn't want to work the thing about it being better is just that if it had worked we would have one fewer image which would be nice but if it's not gonna work too bad for us
44:24dzwdz open it in a text editor and remove the top path
dzwdz and that's it
yeah so it is the right size and if i swap it in as the background image it's fine so let's puzzle out how to make this background transparent i just change this fill to say that it has a that should be it let's
Save as I'm going to call it logo transparent.
And then here in this, let's change this to say, don't need that.
45:25That looks good.
I had to make another image, but it's fine.
Does that look aligned correctly to people?
So I have a hassle.
So...
I have some vision issues.
And I see... Oh, come on.
It's...
pushcx https://en.wikipedia.org/wiki/C…
stereo right there we go so i see this effect really strongly where if i turn my head it looks like the words on these backgrounds are moving left and right i see such a strong 3d illusion and this is probably related to
why I have motion sickness when I play 3D video games.
But this is particularly hard for me with lobsters because I see this with the white on red of the logo.
And so the logo never looks correctly aligned to me.
There's a really neat history here, seeing it in stained glass.
So I think that's correct, but I literally am the worst person to tell.
dzwdz you could set the background to black for now maybe
It's scaling very nicely.
dzwdz looks alright though
The bigger it is, the relatively less the thing is.
All right, I'm going to call that a line until someone reports it different.
47:19That's actually a good idea.
dzwdz *maybe* i'd move it slightly to the left
Let's set this to what?
Yeah, that looks fun to me.
If you hear me clapping, there's some little nap.
I think I don't want to keep playing with it all stream, so I'm going to call it good enough.
And I think I can get rid of this content, too, now that we're not an after.
So let's cut that down.
And yeah, that all looks fine.
All right.
So what do we do?
Anything else about the logo in here?
48:26ChaelCodes I just joined. Why are we changing the logo?
Man, I did this with all these comments because I didn't yet know about how to use CSS variables.
So I didn't want to...
So I didn't know to just extract those.
pushcx https://github.com/lobsters/lob…
We're not really changing the logo.
There is a...
I don't know how much scroll back you get, but there is this bug that we just closed.
dzwdz merger with lenovo
And there was this PNG in the CSS as a data URL.
And as long as we fix that,
By replacing it with an SVG, let's make sure the rest of these are correct too.
Merger with Lenovo, yeesh.
49:13So putting images inline in CSS is a very, it's sort of an expired performance hack, or expired. I think that's it. Yeah, that's it. Great. Go ahead and push that up too. Oh, hi Dependabot. I saw one of these two streams ago and it was pretty minor. I'm going to peek at this real quick. I guess I can close Inkscape.
50:04I don't think that matters to us, but let's bump for it. So while bundle update runs, this is the potential vulnerability that if someone carefully crafts. Yeah, we don't actually use basic auth, so I don't think this affects us. But I'm going to take the fix right now.
...48Get that deploy running.
All right, so I can close out some of these CSS research tabs, huh?
All right, and then this is done too.
So if you saw me tweet, this was, we finished up both DZ's replacement for the merge icon and then also replacing the other inlined images because we don't need them anymore.
Oh, let's just close that.
I'll make a new one.
So where's, and I don't think they're anymore like data URLs, right?
No.
Good.
All right, so that's running.
I was talking the other day to the guy who runs Game Dev City, and he did a big update of the last six months, which I didn't realize how many breaking changes we had until he ran it and ran into all of them.
He also had tried to tweak his Ruby setup because Ubuntu wasn't behaving for him.
And then that put him into this weird state where he would run with bundle exec and it would change to the wrong Ruby version and use the wrong sets of gems.
It was very strange.
AnakimLuke sounds nasty
So there's one more for, well, all right.
if there's no nice way to manage our dependencies oh hey anakin nice to see you again then maybe we do have to push over to docker for development and kamal for production i don't know
It was just so painful trying to talk him through it and debug it.
And he was fairly tech savvy.
53:00So I should probably run down this bug as long as I'm hanging out on stream.
So I've been going for a minute, 53 minutes.
This is the Lobster's office hours stream.
If you have questions about the site or codebase, feel free to ask anytime.
And I work on the codebase when nobody has questions.
And so I'm just kind of picking off some small bugs right now.
And then I'll get into the story merging UI stuff.
pushcx https://github.com/lobsters/lob…
So I'll share this link so folks can follow along.
But the gist of it is that Rails has
sort of taken ownership over the column named updated app.
And there were a few more places we use that.
And so I figured I should get them fixed.
All right.
So these, this could be an aware, but
54:24and then this field is always gonna be present. So I'm gonna just drop this option. Yeah.
...39Oh, we're back at Traffic Helper. So votes, votes I gotta think at, because we have a, I guess it is safe to keep using updated at, Most of these... So Rails has this idea of timestamps on tables where by default it wants to create timestamps called createdAt and updatedAt. And the change which happened 10, 12 years ago that bit us last week is that Rails kind of thinks that we want to use its Russian doll caching and it can use the updatedAt to track that feed data Cash invalidation and we used it for the business value of when was this comment last edited. And I don't want to have a fight with rails about that so i'm just kind of replacing updated at and the votes is a little odd because we use it for. When did this vote happen and we just tweak the vote records actually I guess this one's okay we're using it in the same way rails is. Yeah. Oh, this is the read ribbon.
56:20Read ribbon does want to have an updated app. See, it feels like there's a little bit of a foot gun here where these values cascade. And it got us with comment. But then like votes and read ribbon are very thin objects that don't really have business logic behind them. And they're not rendered to they don't map to a visual element on the page the way story and comment do. I guess this does and shows the little unread marks on comments.
57:20And the question of updated at here should invalidate the cache for that user. So I guess I have to leave it. Rails doesn't really have, it has the Russian doll caching, but you have to add, say, the user ID to the key, which point, why are you bothering caching? So I'm gonna leave these alone. I didn't tag this one, good first issue, because you've got to know a ton about the site. So this one should be last edited at. So we do render, JSON of comments for folks. And we don't use it on the front end, and I've been really reluctant to provide any guarantees around the API, which is why I'm comfortable breaking things like this. Because everybody who looks at updated at did just take a breaking change there with that. All right. So is editable. Yeah. This one is also using the last edited last I said, edit or edited past tense. Okay. Yeah. Overthinking it. So this is always going to be present.
59:05This is some JCS code. He didn't know about the helper.
...18It's always going to be present, so we can just delete this. And then I'm just going to leave that logic alone, I think.
...40Actually, no, I'm going to make the change. We don't need all this interaction.
01:00:00to run the tests for that.
...18dzwdz https://dzwdz.net/tmp/new-lobst…
If anybody really knows Rails and you know what this warning is, it seems like it's spurious.
You make something silly?
Oh.
chamlis_ haha nice
man you weren't kidding about us getting it acquired by logo or lenovo so we could have a new logo very classy you got that modern sans serif that's great i gotta save a copy of this so
Is this the Lenovo style or is this like Supreme, the fashion brand?
01:01:15dzwdz it's the lenovo font
dzwdz i already forgot the name
It's the Lenovo font.
All right.
dzwdz yeah it's funny how similar they are
Because there's also... Yeah.
It's in the neighborhood of these guys.
Just got to make it italic.
...42All right. So let's go back to these. I didn't break that timestamp editing because I believe we do have a proper test of that.
...57Okay, read ribbons, so those we're keeping. My mouse is sliding around because the cat is on the table and flopping around. He's kind of inconsiderate that way. These are all vote that are going to stay. And then these are old versions of replying comments view that needs to just go away at some point. Q schema, DV schema.
01:02:29Hold migrations. Things in config. That's fine.
01:03:00Oh, this is actually a different field.
...11This one becomes, I think I added it fairly recently, the last comment at field.
...31Yeah. How did this not end up touching unused variable? Yeah, we don't even need to touch that table and do a query.
01:04:35AnakimLuke @ChaelCodes hii KPOPheart
I feel like this pub date should change to say last edited ad.
...50All right. One more time on the test suite. I don't think anything should break, but just in case I added any typos.
01:05:33Update more. All right, let's see. Place comments.updated with last edited at 1471. And let's push that. This is the one I just fixed. You always end up seeing these for an extra commit.
01:06:10Okay.
01:07:13pushcx https://github.com/lobsters/lob…
let's see no oh yeah there was this pull request i was thinking there was one hanging out this one's sort of funny because i've had two versions of it well let me grab this id so i can put it in the topic list
...46And then the pull request for closing allies. This one's really not exciting code. So if you want the more exciting stuff where I ramble about stuff, you got to ask questions. Otherwise, I do sometimes very not exciting code. And in this case, someone who is scraping the site figured out that we have some mismatched tags in comments. This may even be related to that other open issue about how newly added comments are not exactly in the right spot. And I say we had this PR twice because There was another user, like Tomcat, I want to say like 256 or something, opened this exact PR. And then GitHub, I guess, banned that account as spam, even though I had replied to the PR and talked about the template. And then the... PR vanished from my view. I contacted GitHub support and I was like, hey, I want that back so I can merge that. And they were like, no, the other person needs to prove their identity or something. We're going to make them jump through hoops. And I was like, but you're hiding it from me. That was code I wanted to merge. And they were like, ah, sucks for you. It was a really strange interaction. But I'm assuming there is some kind of giant anti-spam hassle for them that I'm not seeing. So the issue here is that we're generating slightly invalid HTML. I wanted to... Let's grab a page that has a lot of comments on it. Oh, you remember my Zoom, huh? And grab all of this source. and use the HTML validator on it. HTML4? I just want to verify that the errors the validator gives sound like they can be plausibly fixed by that. So we got a whole lot of warnings, which, fine, I can go ahead and delete those, but no space between attributes. That's just a typo. All right, hang on. Let's tidy all of these weird little things just so I can see more. errors so it's saying first get rid of all these trailing slashes so i'll do that and then back up reload this and we're just going to go one at a time maybe two at a time these are kind of tedious and generally quite small all right is there a stats i would love to see some kind of you know oh there are 200 and then be able to burn down
01:12:08Trying to find the edge of the table and the source. No, there's no summary, but there's 493. OK. Trailing slash on void elements. Didn't I just delete that? Must be the style sheet link tag is still generating them. That's not a level of detail I want to fight Rails about. This is the really exciting part of maintaining a website.
01:13:14these kind of fiddly little things. And I try and fix them as I see them, because if they go on forever, they break in surprising ways five or 10 years on.
...34Open true, escape true.
...52ChaelCodes If not this part, what *is* your favorite part of maintaining Lobste.rs?
I actually do kind of like these little chores.
I don't dislike them.
They're just not exciting.
There's nothing glamorous about it.
ChaelCodes @AnakimLuke HIIIIIII!!!!!
My favorite part of maintaining lobsters though, probably the surprises of seeing how people reuse the code base.
pushcx https://github.com/Shopify/yjit…
A lot of people, like there's the big, oh, that just finished actually.
so why jet is the, just in time compiler that was added by Shopify to Ruby in the last year or two, maybe a year and a half to, and then it was neat to see that it gets used by the widget team.
Where did Maxine say it?
ChaelCodes That was where I first heard about lobste.rs.
When the YJIT team members try and implement small optimizations, we look at performance differences on lobsters a lot because it's the biggest benchmark.
Oh, that's neat.
So I like seeing the way the code gets reused.
And I chipped in on that discussion.
You can all read it.
Oh, YJIT is where you first heard about lobsters.
Neat.
I forget, did you do a lot of Rails coding?
ChaelCodes lol, yes
I know it's been a minute since you streamed.
01:15:16OK.
...26So let's say I grab this.
...47Let's see if that does what we think it's going to do here. So yeah, these stylesheet link tag links have the slash. Now they don't. Nice to drop a warning. So I'm going to scroll past these. No space between attributes. This looks like I missed a quote on links. So that's going to be List detail.
01:16:26Yep. And that's just one of those where with ERB, it is so easy to have mismatched attributes. Yeah, we were just generating invalid HTML on literally every story link. HTML is very forgiving, but That's not supposed to be there. That's just because ERB is string soup. All right. So a lot of these errors are going to be that repeated. So let's go ahead and recheck.
01:17:10Div is not allowed as span. Oh, I'm not touching nulls because I know I'll break the mark up there. Ahrefs not allowed? That's a strange...
...48A role, content info.
01:18:11So I guess it doesn't like the role equals heading here. Let's check this out.
...27I'm really... Yeah, so there's no href here.
...38But try to use h1, h6 again.
dzwdz that's dumb
I'm so reluctant to touch anything that's ARIA-related because I don't.
have any kind of comprehensive knowledge of it.
And if I break stuff, I feel pretty bad about it.
Using label, you must use the heading rule.
Don't go over level six.
01:19:17ChaelCodes iirc, aria are only needed if you're not using semantic html
overrides level of heading is being exposed hmm okay so i could see well that's fair we're not using semantic html for these but they're not really
Headings over sections.
If nobody is complaining, I'm just gonna leave that one alone, I think.
Name is obsolete.
That's bad.
So what I'm looking for now, because I'm actually OK with some of these.
I'll come back for that, I guess.
God, that one's going to break comment highlighting, isn't it?
We have a lot of comments.
Let's hide warnings for now.
Ah, there's my summary.
01:20:39The type is unnecessary. This is coming from the plugin. So this is actually not complaining that we have any invalid li tags, is it?
...56Let's try a different story, I suppose. because it's very possible that it's something about the structure of the comments where the particular pattern of replies is causing this bug. Or it could be that the validator is very helpfully
01:21:33dzwdz oh hey i didn't realize we're doing microformats
inserting the allies automatically yeah we have a little bit of micro formats not a lot but a little bit so i don't if i'm not getting any errors that we have unclosed li tags why do we think we have unclosed li tags
erb produces kind of soupy html too so mystery tomcat says when we're popping depth and ol for the very first comment
01:22:50chamlis_ a quick "grep | wc -l" on a page gives me the same number of opening and closing lis
That's a good thought, actually.
That's a real, yeah.
All right, I'm going to ask Tom to demonstrate it.
01:23:34Shamos, would you like... Can I cite you by name here?
Or would you rather just say...
I'd just say somebody.
chamlis_ I don't mind
Actually, let me...
I don't mind.
Okay.
So let me grab this.
So you were doing curl at pipe.
01:24:12dzwdz that picks up <link> tags
What did I do wrong that I get 12?
Picks up link tags.
chamlis_ I had 'grep -E "<li(>| )"' and 'grep -E "</li(>| )'
Ah, thank you.
So then here it must be a space or a close bracket.
So I get 16.
...40I'm going to just grab your grip. Thank you.
...53Did I miss something? All right. I must have typoed somehow in the copy and paste.
01:25:10chamlis_ you pasted both with english between them
Oh, I see.
Yeah, I saw that capital E for the Perl regular expression.
And I just kind of switched off my brain because you can do anything in Perl regex.
So, all right.
And then you had just the same thing with a slash here.
...47chamlis_ ooh
So I'm getting 12 and 16 for this.
Is it... Shameless, can you paste a URL you tried?
Because, you know, I'm just grabbing a story off a...
chamlis_ I did /s/bfvovo
I bet if I swap this into production, there might have been another comment since my snapshot.
Might have been several comments since my last snapshot.
Yeah.
So I get 99 to 81.
And you did SBF VOVO.
01:26:41chamlis_ and thinking about it I saved the page out of firefox, which might've fixed up the html
So you get 18 versus 13.
yeah so i think all right so we can't say that the naive thing counts correctly but if this has the wrong number and it's implausible
Why aren't we getting an error?
dzwdz isn't <li>1<li>2 valid
Because there's no error here that looks like, hey, you forgot to close a tag.
01:27:39But this is just a hallucination.
...49Ending li tag, but there are open elements.
01:28:07You know, DZ, that seems like a... Well, let's check it, because I can just say, let's grab all of this up here. and rip out the whole body. Let's say it doesn't consider that an error. You're right.
...49Is that an option somewhere? No. And you know, now that you say it, I remember doing it back in like 1995, 96, and I guess the spec allowed it. Oh.
01:29:22dzwdz xhtml tried to save us
So does anybody have a, what is this new checker?
Is there an old checker?
XHTML, oh, I wanted to like XHTML.
This is the one I used, isn't it?
Yeah, it's just going back in a circle.
...48HTML's behavior of if you break something, you get nothing was just never going to work, especially when we have so much tag soup generating our markup like Let's see if somebody has made another validator that does not have that specific. Because I could see someone writing a naive validator.
01:30:34The rev is the name. Do you have a filter? Because I don't want to see all of these things. Oh, no. Look at this. It's based on validator.new. So they're just a fork. This is not going to give me anything different.
01:31:11chamlis_ the PR links to https://www.aliciaramirez.com/c…
Invalid element name, line one, column two.
Yeah, you don't like HTML?
You don't like doctype?
...39Here we go. This implies some of it. Let's look at that one, though. I didn't realize the PR link to someone. I'm not sure this was in the first one. After I saw the first one, I didn't really reread. OK.
01:32:09okay so it's saying a bunch of these comments sub trees aren't closed all right so maybe there really is an issue here that yeah all that stuff the html validator was i might as well commit that but what is all these
...43What changed here? Trailing slashes in application RB. Why am I seeing these twice?
01:33:13Oh, I must have, I didn't think I changed anything here and I don't actually see a difference.
chamlis_ you removed the bogus %
So I'm using DiffTastic, which is structural.
So sometimes it doesn't show me white space changes.
I removed the bogus percent.
Oh, that's what it is.
Yes.
And then it's repeated by heinous inline partial.
Okay.
...46So now let's go back to this.
...57AnakimLuke any reason you use erb instead of haml? I'm new to the ruby ecosystem
And the pull request says, we use ERB because Haml didn't exist.
And if you look at the stream archives, actually, I can just go to
Flex.
pushcx https://push.cx/tags#phlex
Yeah.
So there were a couple of streams here where I talked with Joel Draper about his Flex library, which feels a little similar to Haml.
01:34:37And I like it because it's just Ruby. Haml has a bunch of... I used it a bunch when it first came out. But it never quite got enough adoption for me to want to take a dependency on it. I don't know. So I'm lightly, I'm kind of griping a bunch about ERB because it's so easy to have these basic string building errors.
01:35:22So what I'm expecting is if I just do the one at the end outside of the loop and I reload, I will go from four to three, right? Didn't do anything.
...47And let's double check that this isn't going to start giving me an error about an extra slash li.
And it's not.
But didn't I just?
Oh, it's the trailing slash on the mini profiler, isn't it?
Oh, no, there's one place.
twitchtd I really enjoyed using haml back in the day
Hidden story ID.
01:36:24Okay, I'm going to leave that alone.
Yeah, I like Hamill.
twitchtd though there were a bunch of gotchas with it
It's more expressive, but I don't know.
It just seemed to be one more thing to learn.
If I wanted one more small thing to learn, yeah, there were some gotchas.
I don't know.
I do like the style of Flex a lot, and...
Joel is gearing up to release Flex 2.0 tomorrow.
I talked with him a little about whether he wants to do the benchmarking.
Because my concern is pretty similar to the one that... Let's see, you want to hear it?
I don't know how the heck Tom would have found these.
Such a pain in the butt.
01:37:26Hey, okay. I guess I'll take it.
...44All right.
...52Guess I don't need this comment.
01:38:43I've spent some time playing with Jujutsu since the last stream, and I like it a bunch. It seems to fix a lot of workflow issues I've had with Git. I'm not quite ready to bring it over and start using it daily on my primary repo here, Maybe on some smaller stuff i've talked with Joel about contributing to FLEX oh I lost the train of thought there with all the validation and whatnot so he's releasing FLEX 2.0 tomorrow and I talked with him about whether he wanted to do the. benchmarking that we would really want to see before migrating comment over to our. over to being a flex component or indeed all of our erb over to being a flex component because i like the code base a lot i like the way templates end up looking in flex it feels like just ruby in all the right ways I'm not willing to take a huge performance hit on it. Because if you look at... I mean, you even see it here where I tweak one thing and multiple files change because of the... Actually, I should bounce the server to make sure that I'm not shooting myself in the foot with heinous inline partial. Okay, good. And so Joel has made... some pretty strong performance claims about Flex. That was actually where I learned about it, was a thread that I later looked back at on Lobsters, and I saw Joel and Jean, who was the author in that YJIT thread I showed earlier, or pull request earlier, had some pretty strong disagreement on how best to write a benchmark. and what was appropriate to put in a benchmark. And one of the nice things about having lobsters as a code base is I don't have to care about what the benchmark says. I care about what we actually see in production. And so if we could wrap some performance monitoring around it and benchmark that locally, you know, what's the naive partial rendering, what's the heinous inline partial, and what's flex, that would give me a lot of confidence to be willing to deploy Flex. And if Flex 8 are comment partial, it would be real tempting to just burn through all of the views and move everything over to Flex. Because this is just, I mean, how do you read this stuff? You're just constantly jumping into and out of contexts. I didn't love it back in the PHP days. I still don't love it now. All right. So if I've got that done, and I don't need these open anymore. Oh, I was going to, on the pull request that, let's see.
01:42:31This is kind of a thanks for the contribution.
01:43:08On clipboard. There we go.
...58some little gnat we have a lot of plants in the house and every once in a while somebody gets some little gnats or spider mites or something so that's why i'm clapping i'm not celebrating writing a comment where i'm talking about not having an sla or deprecation policy on our sudo api
01:45:01I know I've said this before.
...27Yeah.
01:46:03Why does this... I don't know why that says JSON on the end. Rails has some funny ideas about alternate formats for pages where it really thinks every page is going to be available in every format and fights me about it. Loves throwing production errors about that. As if somebody tweaking a URL to put JSON at the end is something that is a server side error so which one of these was the story merging okay so there's the roundup oh 1472 that's our repeat that's the one i already saw So i've been going for an hour 45 it's good time to remind that this is lobsters office hours, if you have any questions about the site and code base, you can pop up anytime and just ask. And when nobody is asking questions work on the code base. This one actually
01:47:18pushcx https://news.ycombinator.com/it…
I think I mentioned here on a last stream of the one before that I was just talking about story merging on Hacker News where someone suggested that Hacker News should adopt the idea of merge stories rather than moving comments around between submissions or just flagging them, which a lot of people read as
censorship or imposing their political view when a lot of times the mod making a story disappears the way they're just dealing with dupes i think it is unlikely that they ever adopt a feature like it but it would be handy if they did because then we could stop explaining it all the time because it's not a feature that anybody else has all right so
Here's displaying the count of stories.
That was the one that had the icon fix.
Put the submitter of the first story.
Ah, right.
So let's go back to this one.
A very confusing thing is, so these lines all say, here's the domain, and then the avatar, and who did it?
Why is it?
Avatar should be next to, not before the word via.
So let's fix that too.
But then this last one and the list of flags, instead of being on the first one is way at the bottom, which people have found very confusing because it looks like it goes with this one.
So we're going to change that.
And then let's do the avatar as well.
So authored by Via, and we have some weird whitespace.
01:49:28Let's put that inline.
...48dr3ig I was surprised lobsters doesn't display the count of comments when you collapse a thread
That could be a nice feature.
...57So that's nice, and then we'll put that up here and load. All right, so that immediately reads better to me. So odd space there.
01:50:19This byline must have some padding on it.
...32Yeah, there it is, a margin left of 0.5. I don't think we need that. That's fine. Should these domains be italic?
01:51:01I don't know why I made it italic, though. That looks fine. Why did I make them italic?
...32So if I turn that off, let's look at the homepage.
I guess it makes them visually a little lighter.
And it's easier to pick them out against the comments.
All right, I'm going to leave that alone for now.
Breaking enough people's muscle memory.
So this last one, because it's printed differently, didn't get the avatar.
But we're going to
Epic_Ninja_Elephant Oh hey.
Just change that to list them all the same way, rather than list the first one differently.
So where's the other avatar?
Hey, epic ninja elephant.
So, Drag, I'm thinking about that idea of collapsing comments and showing the number.
I think that could be nice.
It could go over here.
Honestly, this link should move over to the timestamp like everybody else has, just to shrink this a little.
I think that's a little breaking change worth making.
01:53:20dr3ig Look how it's displayed in HN
one more yeah i don't want to move our comment folder off to the right that's a little weird
01:54:27dr3ig I did not even realize the button to collapse was on the right :O
dr3ig As in that it differs from lobstery
yeah they added it i mean fairly recently as these things go maybe five years ago that's just kind of my gut feeling it's been a minute that one's
Kind of a bold change.
Why did it not highlight?
Because this is a label.
And the label has the, it's not a label.
I thought it was, let's go look at that helper.
We just touched it the other day.
01:55:31Okay, so it's called a how long ago label, but it generates a span. Okay.
01:56:12Get rid of that. Why didn't you change? These fucking Nets are driving me nuts.
...46Editing the right thing, right? Yup.
01:57:23We're not previewing. Ah, I see. There we go. I swapped the state. All right. Better. Wrong number of arguments. So this one also needs the comment path.
01:58:00There we go. Has the title, links to the comment. It's a breaking change, but it's nicer, and it saves us some horizontal room, which is nice, especially when you're logged in, because it's getting a little long.
...26All right. Why don't we put the...
...35get tweaked so one little style thing about the repo i guess not is that it runs in chicago time and all of our timestamps are in chicago time And I think it took 10 years for somebody to notice. I guess we've always had the actual time zone listed.
01:59:20It's on story times. Yeah, we still do because it's using the same helper. Might as well leave it. I'm already making... There's like that tension between how many breaking changes do I want between while like, well, as long as I'm breaking UI. All right.
...47So there's this avatar and then this. So what I would like is consistency.
02:00:05pushcx https://github.com/lobsters/lob…
And what's happening and it's a kind of higher level here.
What's happening with this is I'm working through making the UI nicer to build up intuition and comfort for driving out the changes I know we need to the database model.
Because the way merge stories are modeled is a bug factory.
But it's not super clear to me which of several roughly equivalent paths I should take.
So I wanted to tweak UI and get more comfortable with it and touch all of these things and see where I settle on.
02:01:04So... Yeah. Let's put this here.
...59Epic_Ninja_Elephant Hah, I watch your stream is fullscreen on my 27 inch 4K, and I just noticed you run everything at 80%. I have everything set to 150%
So I'm gonna, let's checkpoint some of these, just have smaller.
02:02:13I'm not sure what you mean by 80%.
Are you talking about the UI?
I have, it's on my stream to-do list to find the setting for Firefox that scales these UI components.
Epic_Ninja_Elephant Yes, your browser is zoomed out.
I don't remember what it is.
I wrote it.
It's yeah.
Oh, you're saying up here, my browser is zoomed out.
Yeah, it's trying to.
So you have a 27 inch monitor, I have actually a 46 or 48 inch widescreen monitor, I don't remember.
But Twitch will only let me stream 1080p of it.
So this section.
And on my personal browser, I have found the, what is it?
Epic_Ninja_Elephant Your eyesight is better than mine, it seems.
Yeah, God knows what personal settings are in here.
So if I search for DPI, yeah, this is not that.
I don't think it's, and it's not called scaling, it's, is it called scale?
I don't think it's that I have better eyesight, I just have a much bigger monitor.
And I'm trying to use as much of my 1080p that I can, but... Dev pixels per px.
02:04:03So change it from minus one. Okay.
...21Maybe this is the thing.
...30Okay. That is the setting i'm looking for. Thanks for bringing it up so let's kind of. get back to that's a little more reasonable right so can folks read the current font size of like tab titles in the URL. Because i'm fine with this, but I don't know how well it shows up on stream. And then, if I also. Does that also affect the default zoom? Yeah, that's a little small for me. How do I turn off the default zoom now? Settings, general, language, appearance, zoom. I'm going to do that off screen.
02:05:18So settings.
...24My default zoom is 100%. I guess it's remembering it on a per site basis. Let's go with 0.8. A little more comfortable. We'll see how that goes.
...50See, this is what jujitsu is made for. I have two changes tangled up together.
02:07:17So I think all of this is like if single story and then story merge stories. Yeah.
...34So I think what I want to do here is loop all story objects because they're at this point they're effectively links. are connected and treat them all the same so there's like the merge span that like there's a checklist item to just remove those redundant merge icons because it's obvious what's happening from the fact that there's multiple links up here
02:08:16And I guess the question is, as long as I'm changing merge story views, so here's a non-merged story. And then here's the home page. Oh, where did that jump away to? Oh, it made a new window. Come here. Let's come back.
...53So we have this display of a story on the homepage. I don't really want to change that. Then we have this display of a single story. And I probably don't want to change that. I mean, I want to fix this same avatar username thing. But then this display.
02:09:24This is the confusing thing.
...37I guess this is a little redundant here. I guess what I want to do is like split out a headline and have this icon and then list all of the links. Yeah, let's see what that looks like making it quite different.
02:10:15So don't be misled by this CSS name, single story, because it's not actually a single story. It's the concept of, are we showing this headline in a list or are we showing it in a single story view where you can see the comments.
...53Yeah, it's probably not great that this has to do these. That's probably redundant. with the four presentation that was. Yeah.
02:11:16So let's. Get rid of that. And then make sure that we didn't just introduce a one plus N. Nope. And then. What I really want here is to loop all of the stories. Actually, let me finish the avatar thing. So this avatar view
02:12:28There are two paths. You see something different if you're previewing? That should not be the case. And it's just for that replacement of just now. So yeah, let's drop that, move this up here. Put this in front of the display of the username. And this can be deduplicated. This is deduplicated. OK. So there's a lot of redundancy removed. So now these two should swap position. Yeah. So it always goes avatar username, avatar username. And then...
02:13:45I think I really want to replace list detail entirely. Because we're fundamentally doing a different thing. Wait. Why is this nil?
02:14:35Oh, merge is deleted to submitter. That's not doing what I thought it was doing. It's showing all of them to everyone. So if a story is merged into another story, even if the one that was merged is deleted, everyone sees it, as opposed to just the submitter and moderators, which is what not deleted is trying to do. I must have written that code in a hurry.
02:15:18So one of the things about ERB is it's really hard to kind of zoom out and see the structure of these things.
...33So this kind of complexity, I don't really want to have to replace and maintain between the two. What I can do is say
02:16:12Story doc or story ID? No.
...22Can't be seen by stories count greater than zero. Okay. That's the, if I want, so let's fork here and say, if otherwise.
...53So on the single story view, what we want to loop is, I want to do the story first, but I want to make a partial within a partial because I know heinous inline partial can't handle that because that way lies madness and loops, but
02:17:40Can I make a scope that does what I want? Probably. What if I said scope with merged stories that said where the ID is self id or it is actually i could just say where id is oh i don't want to select the merge story ids and hit the database an extra time all right so
02:18:48Let's grab that short ID and check this.
02:19:21It's in the comma.
...31There you go. I called it with merge stories.
...59for that part of time. Scope with merge. Oh, scope is going to be up at the story class level, and I wanted it at the... That's fine. I can just...
02:20:37So one is just like one flat collection of the stories that doesn't treat the first one, the merge target, as special. I can't remember the syntax for procs.
02:21:10One, two, three, four, one, two. All right, so this story does have four total links. So there we go. That's what I want. So this is going to say story with merge stories. Story, say not deleted for presentation. So that should hit exactly what we want. Undefined method with merge stories, first class story. I just made it.
...46Oh, missing I. Speaking of eyesight, I sighted an I. There we go. Good. Now the first one is repeated, but I expected that.
02:22:22kind of have so this is where flex would really shine is we kind of have a couple of things happening where it would be nice if i could break this out into a method So there's this idea of what a line looks like when it's a merge story, what a line looks like when it's the first thing, what a line looks like when it's alone. And I'm just split up in the wrong places. Because all this is mostly repeated in here.
02:23:31Let's have.
...41And make these allies. I will probably remove the bullet points, but they are logically a list.
02:24:08Let's swap these. We'll say if it's 0, because that's the common case. And I will bring up this else.
...20That's what's happening. So the logic of reprinting a single story versus multiples.
...51I'm trying to avoid repeating things. So where we're slowly evolving with these merge stories is there's this idea of these multiple links that are submitted versus a top level headline, I guess. I'm not sure what the database structure is going to be, whether there will be a new headline object or this will be the story object and these will be, I don't know, story links or something. I'm trying to avoid the redundancy for the common case of listing something twice because that's heinous.
02:26:09Guess what I really want to say is. Where's the title?
...54jumping into and out of this if over and over all right let's make a helper
02:27:33Getting disorganized. More than a little.
...51NoGoodNick_ hello folks
I'm no good, Nick.
02:28:03NoGoodNick_ I just now realized there's no syntax colors
If there's no merge stories, I keep it pretty light.
The italic is syntax highlighting.
And you'll occasionally see other stuff, like spelling, but I keep it pretty minimal.
...31So if there's
...38NoGoodNick_ that italic looks like cursive
NoGoodNick_ interesting how people's visual systems are different
pushcx https://push.cx/stream
NoGoodNick_ oh no no no I will not be going to that
can be seen yeah it is a cursive it's called operator sans mono it's linked off of the stream description page so if you go to this link and you scroll down to the fact there's links off to the fonts
NoGoodNick_ that cursive looks quite hard to read for me, I absolutely do not want that font
So I want to say, OK. What do I want to say here?
I want to say, if there are no merge stories,
A lot of people do like the Roman for operator sans.
02:29:53So if there's no merge stories, I want to link.
02:30:03if single story so if we're on the single story view that's when this happens if we're not you always get the first link i guess and then if we are on the single story view If there's no merge stories, you get a href. If there are, you just get the story title.
02:31:05See how that looks. Yeah, didn't change. Didn't change. Yeah, the avatar jumped, but that's something else. Ah, there we go. So now it's treating the title differently on this view. The font size changed and such, but we're getting there. And now this line, I'm going to just add caches to these others. And then from 227, we're going to keep that. Actually, maybe I should just move it up. I think that would be a lot nicer because it's a little weird that there's stuff injected in the middle in the first place. So, all right. Bring that up. Man, this is... I have an issue open about creating a little storybook view for the site. This is making me want it already.
02:32:32So I want to bring up this byline section.
02:33:05Put it there I think.
...13Better. This part is repeated. Why is this part repeated?
...34Who in the byline is printing tags? I don't think this is in the byline, is it? Yeah, it is. So it's redundant.
02:34:05So hard to follow markup.
...17Did I make a bigger change than I expect?
...26So here's the FB's home index. Let's just look at this detail.
...40So there's the title fixes. And that section went away. And then inserted. 160 looks pretty bad.
02:36:11Where's this extra domain and tags coming from?
02:37:04Kind of want to call it like a multi-link story.
02:38:07Can't read that. So we'll say if.
...53Undefined method has suggestions. Oh, I wrote has suggestions instead of has merge stories because I was glancing over at the wrong.
02:39:10It's a question mark. Okay, better. And then this part.
...41This really is coming back around to, boy, I want multiple views of this.
02:40:21and there's just it is just shotgun with booleans and booleans on booleans and the thing i'm trying to express over and over is that there is this one place that lists detail this one circumstance of is a single story and has merged stories and that gets a very different treatment
02:41:02And it's so hard to
...40So I've just popped all of that in progress work. And I mentioned wanting a storybook kind of controller. I think I have to do that. Because otherwise, I can't really iterate on these things. Is it storybook, playbook? I guess I didn't make an issue for it. And I didn't have a clever name. I really wanted a clever name for it because I don't know, just be something fun for a meta thing. But so storybook.
02:42:34Why are we starting so low?
...41Is this tool for saying hey we have a bunch of components let's make them all viewable and the thing that i like about it is you can just kind of click through all these different ui states and variants and it's very much written for react but we have this same kind of thing where I want to see the list detail on a page. I want to see it on a single story. I want to see it with one link. I want to see it multiple links. And I want to see all of them at the same time. Because otherwise, there's just so much state to keep in my head. And it's nice to see the view of it, like what did it call with. So...
02:43:56I'm just going to call it cabinet, because a cabinet is a thing with many drawers that you put lots of things in. I'm probably going to end up needing a helper.
02:44:20So let's leave this for a second.
...55And I think I'm fine with leaving this visible to users. I'm going to have to edit the gem file, though, because I'm going to want... What's the name of that gem for generating? Not factory. Oh, factory. So many of these things are scopes that they have to be in the database, don't they? Oh, rails. So it's Faker I'm thinking of.
02:46:36See if I can get something basic working. I've got about 15 minutes left on the stream, because I tend to go about three hours. So now is a good time to ask questions if you haven't.
02:47:21NoGoodNick_ why no syntax coloring?
NoGoodNick_ is this vim or nvim?
This is regular Vim.
I've kind of bounced off of NeoVim.
...35NoGoodNick_ why bounce off?
Where was that other?
...44I didn't understand how to set it up to install plugins. I was able to pull in my config file and then the instructions for installing plugins were to install something. I don't remember its name. It was like lazy loader, something. And then when I clicked on its docs, it was like, here's how to develop a plugin. And I never want to do that. And it just didn't make any sense to me. So I'm missing something pretty obvious there.
02:48:47NoGoodNick_ gotcha
Epic_Ninja_Elephant Neovim docs are not great, unfortunately.
NoGoodNick_ my buddy is a vim user and he found nvim to be noticeably slower so he went back
Yeah, what's it called?
...57Frici mini.nvim and lazy.nvm seem to be the way yeah
NeoVim, and then I actually thought the docs were pretty strong.
Frici but the way those work and needing so much work.. is a bit of a turnoff
Frici also Hi π
Oh, hey, Fritchie.
Lazy NBIM, that's the one.
dr3ig there is a new issue
dr3ig https://github.com/lobsters/lob…
I was thinking it was called Lazy something.
Yeah.
So I went to the installation page and let's see.
So I started getting started and it was like, okay, yeah, I want a modern plugin manager.
Everything said, you know, you want to install this.
dr3ig https://github.com/lobsters/lob…
So, okay, here's all the cool features.
I want all the cool features.
And I went to installation.
And then it has one of the things I hate most.
There are multiple ways to install LazyVim and Vim.
I just wanted one explanation.
So like I had to make a decision and I don't really have enough info to make a decision.
So I don't know what to do with that.
This is appearing at the wrong place because it's telling me a thing to do after installation before I install.
There's this setup stuff.
So I did.
I don't remember which of these I did.
Probably this one.
And then.
There's like add your plugins here, but I don't know what I'm supposed to be adding.
And then I click next and it's into some kind of specification for developing packages.
So I like went to examples and then I don't know where this snippet goes or what this other, like are these packages?
I don't know.
It just didn't make any sense.
And if it's not gonna explain,
Oh, we have a bug.
Frici Yeah this is where my knowledge ends, I haven't really looked all that much towards nvim
All comments are being flagged.
That's a bug.
02:51:28So what did I do? Drake, you're linking to this diff from a couple of weeks ago. Loading moderations. Oh, flag zero, is this not equivalent?
02:52:10dr3ig flags was positive, while currently it looks at 0 as well
ah you're right that's the difference all right so let's save all that stash just doesn't let's pop the stash let's add everything let's try again i know why github does that it's just such a foot gun
...53Are there any other instances of that in this diff? Because I remember writing the comment where we added this range pattern 30 days ago, 30 days ago, one month ago. OK, no, that's the only thing.
02:53:40So Drake, I'm assuming, as usual, that you don't want to be thanked here? Because you did just run down this bug.
02:54:01dr3ig no, dont' mention it
I guess I got a bit of lag.
I am going to assume not, because you usually don't.
Okay.
...49Epic_Ninja_Elephant @dr3ig You could ask him to sing a song or something.
He's going to get, well, Dreg's going to get a lot of songs if I have to sing one every time they catch a bug because Dreg catches a lot of bugs.
Not just live on stream, but in the code base.
dr3ig hey gotta keep my channel vip up to date
Oh, my God.
Why do you fight me?
02:55:20Well, you know, I'm only allowed so many VIPs, and I don't know what the thing is that bumps up the limit, but I'm close to it.
...34Frici speaking of potential stream related bugs, are the archives meant to no longer include chat ?
So I will actually have to either boot people or get more followers or something like that.
No, if the archives aren't including chat, that's just a bug bug.
Frici if i recall it's based on viewership numbers
I did recently.
So I used to manually download the chat.
And then I tried to automate that.
Frici there is no gift someone can give that obliges them to give more gifts
So I probably broke the automation that was downloading the chat archive.
02:56:20Frici everything after this and including it has no chat
Yeah.
Well, then that's a bug.
DMC Creator can unlock more VIP badges by getting more viewers to chat during streams. Specifically, getting 10/15/20/25/50/100/200 unique chatters in a stream will unlock 20/30/40/50/80/100 additional VIP badges.
Let me put that on my after stream work.
...43I'm coming up on the end of this stream, so I don't want to start debugging a whole giant thing.
Oh, getting 10, 15, 20.
All right, so more unique chatters.
Thank you, DMC.
That is exactly what I was thinking of Thank you.
microNS hi i am a unique chatter
chamlis_ minor stream bug is that it shows two "chicago" tags for me
hi micro ns Thank you.
02:57:27Frici oh right, it's unique chatters specifically.
shows two Chicago tags.
I will have to look at that.
02:58:01see this is one of those places where what i want to do is something totally straightforward but because of how rails couples views is going to end up being incredibly painful because views are coupled by you just set some instance variables and then they magically get passed over to the views rather than, you know, this is basically a function call where I'm naming the function and passing the args. There's this implicit way they are passed on instance variables where action pack scrapes the instance variables off of your controller and then makes them available to erb and so all of our views most of our views less so with partials but they do assume a global variable like user and that's going to affect the render of these things and i think they're i think they're it's even possible that they're two-way mutable like if i change the The one in the view changes back up in the controller. I don't know. Let's just see if I can get anything rendering.
02:59:45That's a lot of nothing.
...51I don't even get an error. Oh, I'm off on the...
03:00:04I'm also probably not using the right bundle. Yeah.
...16All right, Rails, what are you mad about at boot time? Whatever this syntax error is? Yes.
...36unterminated string is that the star here you don't like there we go that is probably what the error is so let's start the server tab It didn't instantly crash. Better.
03:01:40missing partial story all right so it's doing the rewrite of file names and i put the leading underscore on list detail is it stories yes it is 20 years and i still fight with rails about pluralization
03:02:10Epic_Ninja_Elephant I just tried to add the Twitch iCal feed to my calendar, and it seems to be missing timezone information.
missing local story good so that's okay so let's say there's going to be more let's go look at list detail you know i swear we debugged the time zone stuff about the twitch ical i think
Are you using an uncommon calendar?
Epic_Ninja_Elephant I'm on Fastmail?
I think we determined that it was something specific to some client.
Okay, so here's me saying render Fastmail.
Okay, I don't know anything about Fastmail.
All right, so it didn't actually render though.
So we had the capture.
So I can return render partial.
So what if I just explicitly said
03:03:44Now I should get my error about not having the local, right? Yes.
...59And I know this is redundant.
I'm just trying to figure out where is this error creeping in?
Is it something about star args?
No, it's just not capturing and printing.
I need a concat, I bet.
All right.
Yes, there we go.
microNS Epic_Ninja_Elephant wheres the twitch ical feed?
That's not so bad, because I split these things out into partials.
So now can I just make this concat?
Epic_Ninja_Elephant There's a URL in the Stream FAQ.
There we go.
All right.
So now I can call render.
debug render on this page and see.
03:04:50It also should be linked from the Twitch page if you're looking at it in a browser rather than in an app.
03:05:42microNS I am in browser but there is no obvious icon or word for me to click on. Looking at the FAQ now.
pushcx https://www.twitch.tv/pushcx/sc…
maybe it was on the about ah yeah there we go so there's this is twitch's page and then i linked to it from my stream archive on the fact it's like in the first two paragraphs but i don't know what the hassle is with the time zone information we we fought it months ago
And then the person eventually determined it was something odd about their setup.
03:06:26I almost want factory girl here.
03:07:25microNS its weird when i go to that /schedule page i see all the navigation buttons (home, about, schedule, videos, chat). But the home page hides that nav. Thanks.
I don't know what to tell you, micro-ons.
I'm sorry.
It's weird.
So we'll make a user.
And we'll make a title.
...54I just want to see how far I can get with this.
03:08:04microNS I appreciate pronouncing my full handle, but you can shorten to micro.
Find attribute tag for story.
It'll be tags.
...14microNS or microns if thats easier to remember
Find method user path for an instance of class.
That's going to be... Hmm.
Microns?
Sure.
Or micro.
Yeah, I never know.
And honestly, I'm not doing a great job of keeping track of tags and pronouns for people.
I would love to make a integration for Twitch, but I can't, unfortunately.
03:09:05It's funny that user's path is blowing up on an actual user object. What is it mad about here? It really wants it to be a persisted object, I guess. Come back to that one. Now it's assuming a createdAt. going to assume a probably other things but okay there we go
03:11:11Story needs to be in an LI, right? Yeah.
...30There we go. I don't need to print this. Let's figure out the user thing. What's blowing up here? Undefined method user's path, but it literally doesn't call that method here. Oh, see, and one other thing is because everything is coupled with global variables, I'm going to have to just edit the hell out of things to try and put them into this state rather than i don't know i think if i replace this instance variable maybe i'm so nervous about it though because like that's a security control and so if i render the mod view am i making someone a mod for the duration of that page that would be bad
03:12:41Where is this method? Application helper.
03:13:02So all of this stuff.
...11Let's username size. That should all be fine.
...38What am I going to do? I left off the closing parentheses.
...48See, it's strange that it's saying class when it should just be saying user. Like, where is this anonymous class coming from? But when I say user.last, it renders fine.
03:14:23I'm actually going to swap these around so that I see the thing and then the source.
...55Greg, are you still here? It's an annoying Rails issue. You're smart about these. So if I pass a user object, I get this nonsensical error that you can't call usersPath on that. What if I back this up and I say usersPath user.new, username, asdf2. Let's make it clear what I'm printing. Does that error out? Yes. So even though I passed a user to user's path, it's mad at me.
03:15:52dr3ig maybe singular ?
This is some kind of,
03:16:00Oh, yeah, you're right. It should be user path. Huh? Did I typo here somewhere that I'm saying? Because you're right, that's the difference. So users underscore path does not exist. So why is this code when called from the partial this way trying to call Well, what if instead of saying that avatar image passes an avatar tag, and then we'll drop back to detail.
03:17:03Okay, so that style of, you're supposed to be able to just pass a model and you get the singular route, but I guess that doesn't work in whatever this context is slightly different at. So this next one is an error in the styled user link, right?
...36Where is that?
...49Insert.
03:18:04All right, just a little spouse chat. So it's users helper. So it links to the username. See here, we do it again and it doesn't like it now. I hope that is in scope. I guess it is. No route matches required missing key ID. So that's bear. We do have a, let's say, backpack. Drop this out. Same error. The story doesn't have a short ID because I didn't give it one.
03:19:34Story with zero merges. All right.
...42Okay.
...48Now, if I grab this, I can say story.
03:20:15So that's this, and then pass single story through. I've got some kind of bad indenting happening. Oh, that's a slash OL. What am I writing, XML? So those are the same. And I'm wanting to reuse the stories. You can just kind of eyeball between them. And then we want story list detail.
03:21:14And then another at this.
...47I haven't added any yet, but we will.
...55User didn't get duplicated. Is there a shallow versus deep copy thing happening here?
03:22:21Yes, copies the object's attributes only. Does not preserve timestamps. Deep copy is your problem. All right, deep copy is my problem.
...53And I guess timestamps really are my problem as well.
03:23:34microNS @Epic_Ninja_Elephant Its a twitch api bug, they prefix TZID with /, which is invalid.
microNS Someone made a val.town function to strip it https://paul.af/twitch-ical
You know, I sure don't remember which stream we went through that on, but we went through the timezone stuff, and a leading slash is valid in some contexts, I think.
03:24:10microNS oh, well then iCal is ignoring it or misapplying it
microNS Anyway, that val worked for me.
yeah so it's a global id rather than a reference to a v time zone that's not defined yeah i cal much like the you don't have to close li tags and it's considered valid there is an enormous amount of complexity in i cal and a lot of forgiving things
So I'm sorry you had to look it up, but I couldn't remember the details until you said it.
...47You know, let me just grab that. And I will put it in my notes.
03:25:03microNS do you have any bots for commands?
So thank you, Micrones.
No, no bots.
I can't create bots or plugins for twitch because I don't want to enable sim swapping and unless you give twitch a phone number you can't get an API key to make bots and things.
...36microNS LUL twitch only has MFA with phone numbers?
to enable multi-factor auth.
I think they support TOTP, but to enable it, you have to give them a phone number.
And if you give them a phone number, they will use that to override TOTP.
It's such a strange choice to me because I would think that given the scale of some of their streamers and the way
Gaming culture sometimes has roles, to put it politely.
I would expect people to be sim swapping Twitch channels because it would be a pretty easy thing to look up and take over.
I don't understand that one.
I've talked with them a little and they've said, yeah, you know, to heck with you.
The other part of it is...
Because I have some of those same hassles running a fairly popular site.
The numbers I have are all VoIP because the VoIP provider is more resistant to SIM swapping attacks because they're savvy and know what they are in the way.
microNS I attribute most of discord's positive UX on the fact that they chose to make a comms app for one of the most hostile enviroments possible.
If you have a, I don't know, a big mobile national carrier, not to pick on anyone in particular, and they have a store that you can walk into.
There is some low-level employee who can effectively do a SIM swapping attack, and they're trained to have happy customers leaving, not be a serious security control.
03:27:08microNS (around moderation)
It's funny you say that.
Discord's UX drives me up the wall.
It's so slow.
Around moderation, yeah.
I've only just started looking at it, but yeah.
There's a...
So Lobsters has a IRC chatroom.
pushcx https://lobste.rs/chat https://push.cx/discord-vs-irc-…
IRC because it's been around forever and we're old.
microNS oh yeah, ive been trying to use halloy, i should rejoin lobsters irc
And every once in a while we've kicked around the idea of do we want to move to Discord because it's the new hot thing.
And so I finally wrote up the years of discussions.
Short answer is no.
microNS ircv3.2.willfixeverything.com/metallica.jpg
I have no idea what Halloy is.
I'm guessing an IRC client by context?
I haven't heard of it, if so.
03:28:02Yeah. There's a section of that doc about IRC3.
...24I expected the number to appear here, but I'm going to hand them off on the, I put a branch up. So I almost want to drag in factory bot.
...54dr3ig does it matter that story is not persisted ?
I didn't for the fake data.
I don't remember if it predated the use of factory bot in the tests or what.
I think I'm getting to a point where I'm a little bit fried here.
Well, so it shouldn't, but the way stories are coupled, it will.
Because some of the code I literally just wrote was...
The it's not on this because I stashed it.
Was to look up the merge stories.
So I dropped off of that branch, but.
I was going to add these here.
That's why it didn't appear.
03:29:59Because you can just... add these so if i said i'm just gonna throw this on here twice to kind of bulk up the numbers see we're getting there and then the last thing would be single story true is clearly not firing so that's the part that's hitting the so The fact that this has a scope on it means it's not going to use this cache thing. It's going to go and hit the database. And if it hits the database, it's not going to actually see anything persisted. And so Rails' thin separation of concerns here is the fact that you can't really layer anything, and it encourages you to do this. I would like this to not just be a dev thing. I would like this to be available live. I think it would be just kind of neat. But Rails really wants to fight me on that.
03:31:16I think I'm going to rewind the stream down here. I've been going for three and a half hours, so it's a little bit long. And this mostly works. So I'm going to take all this. to make a cabinet branch. And I will push that up to GitHub. So Dreg, if you're curious, you can kick it there. And I'm going to call that, why did that just Did it not switch me to the cabinet? God damn it. That just pushed to master. We're going to do a force push. Yeah. So switch over to cabinet.
03:32:24Let's make sure we save that on the branch. Yes. Go back to master.
...40dr3ig how is the mariadb deadlock status? do you keep track of how often it happens ?
do i have the branches i expect there's one for jujitsu huh i would not have made that hassle and push force take that let's go check the github i was just saying getting tired i make mistakes when i'm tired all right so
The cabinet branch didn't get pushed.
It happens typically once a month.
I think it is just bad luck that I got it instantly after that last stream.
And I say instantly, but you know, 12 hours, 16 hours.
03:33:38All right, let's make a PR just so people can see it. That'll add some visibility.
03:36:46dr3ig can you show what other requests happened at the same time (+/- few seconds) when the Deadlock error occurred ?
pushcx https://github.com/lobsters/lob…
probably yes i could dig that up let me see if i can do that right here before i end the stream all right so there's there's that branch for anybody who's curious about that and
03:37:21So did I, I didn't paste the, so I didn't pull the timestamp off the log server. I pulled the one out of the 500 I get. So let me say, so yes, so that was February 11 and off screen here, I am SSH into the server, going into log directory, Is it in this file? Yes.
03:38:02So if I search for, is there a timestamp on this? Yes. 0107 colon 44. So I'm doing all this off stream because I try not to show people's IPs.
...32I said 2.11. There's supposed to be a post to the slash comments endpoint, and I'm not seeing one. So let me grab a Quick alternate terminal here. Because then I can just grab all these and share them.
03:39:17If I take off the... Some of these are the enumerator.
...29All right.
...45So here's a bunch from that timestamp. And I literally don't see a post. Yeah.
03:40:02So I'm going to leave those up on stream, Drake, because maybe you'll spot something interesting. And then I'm going to compare against that exception again, which has an IP. And it's an IPv6 in there.
...28Let me just search for the text of the comment, because that should be in the log. Maybe I just have the wrong timestamp somehow. Yes, I have the wrong timestamp somehow. 07.07. So it's a...
03:41:03The timestamp in my email was six hours off, so these are irrelevant timestamp in my email is not using utc, but this log is so I do see the exception here. Let me grab all of the ones that are this timestamp seven.
...32So I'm going to grab
03:42:04of these so unsurprisingly 7 a.m chicago time or no i guess it's still just 1am but it's a lot busier there's a lot more here so this top one is Home controller. 41, 42.
03:43:08Sorry, the lines are kind of blurring together.
And the fact that I can't just paste things makes it a little harder.
All right.
So I have all the lines.
dr3ig 7am chicago time, just about when east coast starts work and europe is at lunch
And let me quickly replace, throw away the remote IPs.
...37It's 107 Chicago time. So one in the morning Chicago time.
03:44:01So it's a busy time for the East coast or I'm sorry, Europe. Right, there we go. So here's
03:45:00pushcx https://github.com/lobsters/lob…
so there you go drake if you look at the end of that comment there let me get this stuff off screen before i screw up and show it because it would be a shame to have done all that so i would so here's the deadlock and what i expect to see is that there's going to be a
Post to vote at the same time.
So here's the request that deadlocked.
And then here's a post to slash comments.
Yes, so that's it.
Here's the post.
Oh, is it two at the same time?
I think they deadlocked themselves.
Trying to post a duplicate comment?
Oh, that's really interesting.
Good thinking, Drake.
So there is a bunch of code that tries to avoid creating duplicate comments.
03:46:22But if they're running in parallel, they don't see each other.
...39What's the difference in time?
44, 793.
So, seven hundredths of a second.
If I'm reading that right.
dr3ig it's the top that deadlocks
No, I'm not.
Seven, nine, versus nine, two.
Let's make the font bigger.
It's the top that deadlocks.
03:47:16dr3ig the top one
But I can kind of skim these methods, and there's only gets ahead of it.
...26So somehow it's... Yeah, I see the exception here.
...47does this one get a 200 back method post format yes if exception is null they got back a 200. yeah i don't know how maria db chooses which one gets kicked but
03:48:17All right.
...56dr3ig am i seeing correctly that their timestamps are identical ?
dr3ig almost to the second
They're they're identical to the second but not the 10th of a second.
03:49:17dr3ig yes, but still, it means they clicked twice somehow or what
So that's a someone double clicked the boast button or.
selected it with the keyboard and hit enter twice or space twice.
Yeah.
...56dr3ig but rails should disable the form button (i believe)
that disabling is going to happen with JavaScript and we have a non-trivial
percentage of our users who don't load JavaScript like they use the no script extension or they have it turned off in their browser for personal taste reasons so we do see more of these very odd sorts of things
I'm pretty sure we have custom JavaScript to disable the comment posting button, but it's possible that the selector changed.
And so the JavaScript is not correctly targeting it.
There are, I would be happy for a defense in depth approach to fixing this bug of yes, disable the button and on the backend open the correct transaction at the correct time to avoid this kind of hassle.
03:50:58All right. Well, thank you for asking, Greg. That's very thoughtful.
03:51:11All right, I'm going to wind down the stream here.
If you want to come back, the next scheduled stream is Monday at 2 p.m. Chicago time, which may or may not be visible in the iCal file from Twitch.
And thanks for joining me.
dr3ig thanks for the logs, its useful, bye!
Thanks for helping catch my bugs and typos.
Frici take care π
Speaking of my bugs and typos, I will sort out why the chat is missing from the last couple of stream archives as I post this one.
It's useful.
It's funny to see you say thank you for you helping me find this bug.
So thank you, sir.
Or person.
All right.
Take care, folks.
Bye.