Code Tour: 2019-06-13 to 2019-09-29

[roadrunnertwice]

Okay my buds, strap in: we edited some code on Dreamwidth dot org this summer.

All of these changes are live on the site now! Themes this time around: Actual cash money, more messing with the reply forms, style fixes, at-mentions, and a few general-purpose bug fixes and cleanups.

Dep't of 💸

Pull request 2577: Stripe integration
Category: Actual cash money
Patch by: zorkian
Description: It's possible to buy paid features again!!! 🙌🏼 (See dw_maintenance for previous episodes in this saga: one, two, three, four, conclusion.)

Dep't of Replying Quickly

We redesigned the quick-reply to make it more usable on mobile! And then we shipped it and uhhhhhhh learned some things. 😅 Really, however much you test something, the entire Dreamwidth userbase is gonna test it harder.

Many thanks to everyone who gave feedback on this ongoing redesign. The reply form is crucial, and we want it to work well for everyone, mobile and desktop alike. The first pass turned out to be rougher than we thought, but with your help, we're slowly starting to get there. (There's at least one more batch of design tweaks still on the way, which will show the current username again and tidy up the icon buttons a bit.)

Pull request 2504: Jun19 reply fixes
Pull request 2511: Fix quickreply appearing in center of the page on sitescheme/lightscheme
Category: Quick-reply
Patch by: nfagerlund
Description: Some scrambling to fix urgent bugs after the launch. The message body field couldn't be resized, the font sizes were very messed up, and the form would drift out into the middle of the page on site-skin pages.

Pull request 2509: Quickreply: Re-redesign to reduce annoyances
Category: Quick-reply
Patch by: nfagerlund
Description: First pass of revisions. For the initial redesign, I made the main quick-reply look like the "quicker" reply form on the reading page and journal home page. But that form's design was less popular than we thought it was, and it also didn't have obvious homes for some of the extra controls:

• The icon browser button didn't have a visible label, which confused a lot of people.
• The "random" button was new to this design, so I put it at the bottom, which was a bad place for it.
• Having the icon dropdown and the subject on the same line was really unpopular.
• The default width on desktop was too small.

So those were the first things we needed to change.

Pull request 2517: Quickreply Re-re-re-design: Brutalist Ziggurat Edition
Issue 2519: Add whitespace around QR buttons
Pull request 2520: Quickreply tweaks: combined Android rampage and claustrophobia edition
Category: Quick-reply
Reported by: rshatch
Patch by: nfagerlund
Description: Second pass of revisions. In the prior pass I tried to make the icon controls line up squarely with everything, but it ended up looking bad in too many situations. So we scrapped that and went with a sort of blocky triangular ziggurat shape, while also trying to fix some bizarre Android browser issues on the site skins.

This was the revision where the spellcheck checkbox went away, RIP. Spellcheck is still available in the "more options" / slow-reply form for now, but we're phasing it out because it's a pretty bad spellchecker and the built-in ones in most web browsers are better.

Issue 2528: QR: change order of post buttons
Issue 2535: QR: Don't smoosh down if there's plenty of room to the left
Issue 2545: QR: Tighten up no-icon and no-default-icon behavior
Pull request 2544: Quick-reply, 4th of July edition: don't squish, smarter button positions
Category: Quick-reply
Patch by: nfagerlund
Description: Third pass of revisions. This is the batch that just went live a few days ago, in the code push that re-enabled payments. The big changes this time were:

• The "Post comment" button goes on the right now. That matches what almost everyone else does on the web, so it should cause less mental whiplash in the long run. (Those first few days are brutal, though; sorry.)
• In really deep comment threads, the form now expands to the left if it would otherwise be too tiny.
• The "Quote" button goes by the subject now. (I wanted to do that from the start, but I had to fix the form getting tiny first because otherwise the button could crush the subject.)

This also fixed some bugs in the icon preview for users with no icons or no default icon.

Pull request 2578: quick-reply: quick fix for temporary resize bug
Category: Quick-reply
Patch by: nfagerlund
Description: The third revision broke resizing the message body AGAIN, with a totally different cause from last time. 😩

Pull request 2559: Talkform / QR: Fix bugs with preview button
Pull request 2525: Quickreply: WELCOME BACK, quick-er reply
Category: Quick-reply, talkform
Patch by: nfagerlund
Description: Then there was some smaller stuff! For example, the form on the reading page and recent entries page now includes the "Preview" and "Quote" buttons.

Issue 1858: Quick reply on post requiring captcha fails
Pull request 2533: Rewrite talkform javascript
Category: Quick-reply, positive vibes blast radius
Patch by: nfagerlund
Reported by: wohali
Description: And the form on reading/recent doesn't give you an inscrutable error if you try to comment on a post that has a captcha.

Dep't of Replying Slowly

So there's the quick-reply, and then there's another reply form called the "talkform" (AKA slow-reply, "more options," etc.). This was LJ's original reply form before the quick-reply existed.

In an issue that appeared last code tour, I extracted that form into a template, because, uh... it made me angry. Of course, cleaning up a crappy fifteen-year-old markup salad is hilariously dangerous and error-prone, so that turned up some new and interesting bugs. (Fewer than I expected, though.)

Issue 2532: Talkform: site user fields are hidden if no one's logged in, and also for openid
Pull request 2533: Rewrite talkform javascript
Category: Talkform, JavaScript
Patch by: nfagerlund
Description: While I was cleaning up the form itself, I repaired some JavaScript that would never run because it was listening for a nonexistent event. This turned out to be a The Ring-style "YOU WEREN'T SUPPOSED TO HELP HER!" move, and it broke part of the form.

The surrounding JavaScript was so outlandishly bad that fixing this would have taken longer than just rewriting it, so I did the latter.

Pull request 2514: Talkform: Don't treat users as logged-out if there's a captcha
Category: Talkform
Patch by: nfagerlund
Description: Some confusing code in the old talkform markup was working around confusing code in two OTHER places in deep Old LJ Depths, and my initial guess at how it all worked was like 85% accurate. I could explain that in more detail, but tbh it's kind of gross.

Issue 2508: Sixteen blank faces staring creepily
Pull request 2512: [#2508] Fix endless and expanding choir of dead-eyed faces
Category: Talkform, hauntings
Patch by: nfagerlund
Description: So,

Obviously I should have left it like that. I apologize for the fix.

Pull request 2552: Talkform: Fix incorrect 'for' ID on logged-in OpenID label
Category: Talkform
Patch by: nfagerlund
Description: With HTML radio buttons or checkboxes, there's a nice accessibility option that lets people click the text label if they don't want to click the tiny circle/square. There was a typo that broke that on one radio button (out of five).

Pull request 2547: Talkform: always include quote button
Category: Talkform
Patch by: nfagerlund
Description: The talkform used to hide the quote button if you weren't logged in or if you whiffed a captcha. I faithfully ported that behavior to the templatized version, then thought about it later and went "wait, that's complete nonsense."

Pull request 2546: Fix glitch in "don't autoformat" text string
Category: Talkform
Patch by: nfagerlund
Description: Our template system puts checkboxes and their labels in a particular order, and the localized string for one of those labels was written to go in the reverse order.

Pull request 2541: Talkform javascript: fix typo
Pull request 2559: Talkform / QR: Fix bugs with preview button
Category: Talkform, own-goals
Patch by: nfagerlund
Description: There's a JS thing in the quick-reply that keeps it from double-posting if you click "submit" again before it finishes. I brought that over to the talkform, but I made a typo that kept it from working. BUT, the typo was preventing ANOTHER bug, where clicking the "Preview" button would instantly post your comment without previewing... so then I fixed the typo, and pranked myself on my dev server.

Luckily, the insta-post bug never went live on the main site. 😓

Dep't of Don't @ Me

No issue: Enable @username mentions
Commit: ec1b4f9a6
Category: Markup and text
Patch by: zorkian
Description: There's an ongoing project to modernize and improve the way we write text on DW, and one of the modern idioms we've now adopted is @username for linking to a user's page. (Previously you had to do an HTML-like <user name="username">, which still works but is kind of unwieldy in comparison.)

Making @names work predictably is still an ongoing project. We're aware of some problems with the current implementation, and we're trying to take our time and come up with something durable. Until we finish that, some older posts that use the @ sign in other ways might be slightly wonky. If possible, we recommend that you try and leave those older posts alone instead of adjusting their syntax; there's a decent chance we'll be coming up with a way to exempt older content from the newer idiom.

Oh, and if you need to make a literal @something string like I've been doing here, you can put a backslash (\) in front of the @ sign.

Issue 2526: @user breaks sharing custom CSS/custom layouts in textboxes
Commit: a8d0cebfde10
Category: Markup and text
Reported by: rahaeli
Patch by: zorkian
Description: The initial implementation of @mentions was a bit too rowdy, and it had a special taste for mangling CSS that people were trying to share. (CSS often includes strings like @media, which do not have anything to do with a user named "media.")

Styles and Site Skins

Issue 2538: Styles: "Blue for Motion" CSS is criminal
Pull requests: 2539
Category: Styles
Patch by: nfagerlund
Description: The "Motion" layout was doing some self-destructive CSS stuff that was probably very clever back in the 00’s. Even if you lived through it, it's hard to truly understand how bad CSS used to suck.

Pull request 2513: Remove non-standard form control styling from non-foundation site skins
Nonfree pull request 125: Remove non-standard form control styling from non-foundation site skins
Category: Site skins, code machete
Patch by: nfagerlund
Description: The site skins had some weird extra CSS for form controls. It didn't seem to be doing anything useful, it was uglifying the quick-reply, and it was over a decade old, so good luck figuring out what it was intended for. Anyway, 🔪

Pull request 2492: Fix CSS typo (.a -> a)
Category: Styles
Patch by: nfagerlund
Description: We've all had those days. :|

Pull request 2506: Fixes for TR module weirdness and narrow column in Planet Caravan
Category: Styles
Patch by: rshatch
Description: Oh, huh, I think those bugs might have been my fault. Some global CSS changes had unintended local effects, making some styles look bad.

Pull request 2516: fix image overflow CSS issue with poll code
Category: Styles
Patch by: kareila
Description: The thing we did to shrink images without hosing their aspect ratios broke the poll result bar graphs. Turns out we make those bar graphs by, wait for it, hosing the aspect ratio of a tiny red image. (Requisite XKCD.)

Pull request 2543: Styles: Tabula Rasa and children: Break long words in headers
Pull request 2576: core2base: Combine overflow-wrap with word-wrap for more compatibility
Category: Styles
Patch by: nfagerlund
Description: Sometimes the only appropriate title for a post is "jdalksdjksldfklafjlasjfdlsakjfaasdkjfaldkjflkahsdgladfjdlksfjklhgadjsfalkdsjfkadhgkladjfljkdslkhasgkadfjlsaldskhgkadlfjslasjkoaksljdlfkjadklshgadkjhfkldsjaflsdjflhadsklghadfhakdjffasdljfadshfldjsaklfjdslkhgflkasjfklasdjflkahsdflkajsd," and that's valid. But it shouldn't trash your page layout, so we changed a bunch of styles to break long words in the middle if there's no other way to make it fit.

Pull request 2561: Fix some miscellaneous siteskin bugs
Category: Site skins
Patch by: nfagerlund
Description: Fixin' some jank. Here's some before/after shots:

Also, a CSS framework we rely on had a variable named $small that actually meant "only use this style on big screens," so that was funny.

Issue 126: Port style fixes to nonfree layouts
Category: Styles
Patch by: nfagerlund
Description: Some journal styles still needed the image-shrinking fix and the gap-under-icon fix.

Pull request 2441: [#2432] Enable responsive comment thread indentation (opt-in)
Pull request 2503: Styles/Practicality: Only add userpic placeholder float when .has-userpic
Category: Styles, experiments
Patch by: nfagerlund
Description: This is an off-by-default experiment, investigating ways to make deeply nested comment threads more readable on mobile browsers. I learned a lot from this, but I don't actually recommend turning it on yet. We'll be coming back to this at some point.

Dep't of 🔪

Pull request 2515: reinstate use lines for Net::OpenID modules
Category: Machete marks in the drywall
Patch by: alierak
Description: We removed some unnecessary code, except that it was doing something necessary as one of its side-effects, so that broke the thing that lets you use Dreamwidth to sign into other sites.

Pull request 2575: Cleanups and groundwork for upcoming features (Aug19 megamix 1: safe noops)
Category: Foreshadowing, janitorial work
Patch by: nfagerlund
Description: Some miscellaneous cleanups with no visible effect on the site, which definitely won't turn out to be important later.

Issue 2549: Return to same page on logout
Pull requests: 2554, 2550
Category: Machete marks in the drywall
Patch by: nfagerlund
Description: Traditionally, the logout button logs you out and returns you to the same page you were on. That got lost in some code modernization, but now the old behavior is back.

Issue 2320: yank badpassword support
Pull request 2502: badpassword code machete
Category: Code machete
Patch by: kareila
Reported by: rahaeli
Description: Some code for disallowing certain specific passwords went to go live on a farm upstate.

Dep't of Old-School Deep Fried Bugs

Issue 2497: Update fanfiction.net icon to use https
Pull requests: 2499
Category: Bugs, speed
Patch by: kareila
Description: There was this thing where sometimes you'd browse to the inbox and it'd lock up and refuse to let you do anything for a couple minutes. This was two boring problems combining into a badass fusion form: the JavaScript was waiting for images when it didn't need to (see last code tour), and an image was refusing to load. We fixed the JavaScript earlier, and this fixed the problem with the image.

Pull request 2518: userpicfactory.js: Revert to using an on-load handler
Category: Bugs, de-modernization
Patch by: nfagerlund
Description: The page where you can crop an image to make a userpic broke. Remember how I said you usually don't want to wait for every last part of the page to load before having your JavaScript do its thing? Sometimes you do.

Issue 1303: investigate report of wandering tagnav element
Pull request 2566: [#1303] Fix wandering tagnav dialog
Category: Bugs, set noclip
Patch by: nfagerlund
Reported by: kareila
Description: There's a feature where you can go back and forward within a specific tag on someone's journal, which is pretty cool. But the controls would jump around to weird places on journal-styled entry pages for entries longer than a single screen.

Issue 2353: /manage/logins needs a purged user check
Pull request 2501: [#2353] early return from active_sessions
Category: Bugs, admin controls
Patch by: kareila
Description: If a site admin tried to view the session history for a user whose account was purged, things would blow up, since it's impossible for a purged user to have active login sessions and the page in question wasn't expecting that kind of paradox.

Issue 2487: inbox/markspam form is sending multiple form_auths
Pull request 2495: Properly close form on markspam. Fixes #2487
Category: Bugs
Patch by: rshatch
Reported by: kareila
Description: An HTML <form> element wasn't closed properly, which made it interfere with another <form> element further down the page.

Pull request 2505: Control strip: Don't rely on .userpic class to fix gap below icon
Category: Bugs, attack of the giant icon
Patch by: nfagerlund
Description: Right after the annoying-gap-under-icons fix, the control strip got ridiculously huge in several journal styles. I was trying to fix an icon gap in the control strip by re-using a CSS class that (it turns out) journal styles do a bunch of RANDOM STUFF with. "Hey, this plant seems kind of sickly; I'd better pour this tube of experimental mutagen on it."

Issue 2496: points conversion needs more formauth checking
Pull request 2500: [#2496] check form_auth in refundtopoints controller
Category: Bugs
Patch by: kareila
Reported by: rahaeli
Description: This page was checking who you were when you loaded it, but wasn't double-checking when you submitted the form, and you could confuse it REAL bad by switching accounts in another tab.

Pull request 2498: pre-code push fixes
Category: Bugs, tests
Patch by: kareila
Description: Some bugs and inconsistencies, most of them because uhhhh no one had run the tests for a little while.

And that's a wrap!!!

58 total issues and/or pull requests resolved

Contributors: zorkian, nfagerlund, rshatch, wohali, rahaeli, kareila, alierak

Comments

[brainwane]

Goodness, what a swathe! Thanks as always and congrats on the payment processor switch!

[mark]

Hehe, thanks. Stripe is about 100x better than the random merchant bank we were using before... so that's a good thing.

[jazzyjj]

Thanks as always for all everyone's hard work on Dreamwidth. I don't have time to read through all this at the moment, as I'm headed downstairs in a bit for the weekly meeting here in my apartment complex. First weekly meeting with my new next-door neighbors, woo-hoo! But I'll eventually get the low-down thanks to reading. Although the payment thing didn't affect me since I don't pay for my time here, I'm sure it was a nightmare for all involved. Cheers for now!

[runpunkrun]

I love reading these, and I really appreciate they're put into language a non-techie can understand. Thanks to everyone for their hard work!

[ilyena_sylph]

I love the code tour boom-de-yadda!

[mark]

Thx for earworm.

[ilyena_sylph]

You're welcome! +grinning widely+

[rosefox]

Sometimes the only appropriate title for a post is "jdalksdjksldfklafjlasjfdlsakjfaasdkjfaldkjflkahsdgladfjdlksfjklhgadjsfalkdsjfkadhgkladjfljkdslkhasgkadfjlsaldskhgkadlfjslasjkoaksljdlfkjadklshgadkjhfkldsjaflsdjflhadsklghadfhakdjffasdljfadshfldjsaklfjdslkhgflkasjfklasdjflkahsdflkajsd," and that's valid. But it shouldn't trash your page layout, so we changed a bunch of styles to break long words in the middle if there's no other way to make it fit.

This is what a fandom-centric business looks like.

Thanks for all your hard work.

[roadrunnertwice]

🌻

[kalloway]

Issue 2538: Styles: "Blue for Motion" CSS is criminal

Oh, I have a community that uses this and am pretty sure I'm the one who (accidentally) brought this to your attention when the buttons went all wonky after the last big push.

The community seems to load/function better now, so thank you, again.

[roadrunnertwice]

Yeah wait, actually your name looks familiar! 😂

The things that theme was doing to the poor innocent float property… my god.

[roadrunnertwice]

Just kidding, float isn’t innocent at all.

[allen]

lol, truer words...

[niqaeli]

I am fucking DYING at bug #2508, AND ITS PATCH. oh my god. 😂

[sporky_rat]

I desperately want to make roadrunnertwice a slow gif of the sixteen staring faces.

[silveradept]

An entertaining code tour, thank you greatly.

Comment Thread Indentation

[pinterface]

Since there's work happening in that area, I'll toss out an idea I've had for displaying nested threads in a way that cuts down on the indentation diving to the right. (Caveat: I've not taken the time to play with it to see how well it works out in practice.)

Only indent if there's more than one reply to a comment. E.g., in a comment thread structured like the following, everything would be aligned the same. (Presumably with a different marker to the left indicating the increasing depth.)

• comment!
  • reply!
    • another reply!
      • still chatting!

Which should be easy enough to do via the :only-child pseudo-class in CSS. That way a long back-and-forth is presented like a linear conversation, leaving indentation to distinguish threads with multiple replies.

None of that is to disparage the work on the responsive indentation. The screenshots of that look great! This is just an idea for something in addition to that.

(Edit: Of course, the CSS bit assumes threading is represented by nesting in the markup, which I think nfagerlund's patch does, but haven't looked because I really should be working right now.)

[jjhunter]

When I get my brain back, there's at least one really good dreanwidth_haikai seed lurking in here.

Thank you all for all your hard work & persistence. And thank you, roadrunnertwice, for a hilarious & evocative code tour. :D

[ilyena_sylph]

dreamwidth_haikai are the Best, so yay!

[silverflight8]

Just laughed so loudly at the red poll bar bug. I LOVE IT

[denise]

Your code tours are consistently hilarious and I love them

[roadrunnertwice]

Thank you! 🌻💖