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

[roadrunnertwice]

Hello! Time for another code tour.

Most of the changes from this tour and the last one aren't live on the site yet, but will be soon.

Issue 2437: [#2437] Extract talkform into template (pull request)
Category: TT Conversion, Grudges
Patch by: nfagerlund
Description: The "talkform" is the "slow reply" form — you end up there if you click "More options" on the quickreply, when commenting anonymously, or in a few other cases. The function that generated it was....... bad.

Issue 2462: switch to working as community does not work on "your layers" page (pull request)
Category: Bug fix, TT Conversion
Patch by: rshatch
Description: A form got slightly mangled during TT conversion on the custom layers page.

Issue 2465: classes missing from navigation inner links (pull request)
Category: Styles
Patch by: rshatch
Description: momijizukamori added classes to nav link <li>s so people could use custom CSS to hide or style specific items (like Recent Entries, Reading Page, etc.). But then the <a> elements inside those <li>s lost their classes! Now it's fixed.

Issue 2468: Quote button in reply form doesn't work on iOS (pull request)
Category: Telephone love, Slapstick
Patch by: nfagerlund
Description: Some of the reply forms have a "Quote" button that grabs highlighted text, wraps it in a quote element, and pastes it into the textarea. It was technically possible to use it on mobile... in the same sense that it's technically possible to parry every hit of Chun Li's super. (video reference; content warning: lots of swearing.) Now it should just work.

No issue: Many code removals, including options for serving a mixture of HTTPS and plaintext content (combined diff)
Category: Code machete
Patch by: zorkian
Description: Well, some nights it's just you alone in the room with the machete, its mocking voice growing louder and louder in the silence of your mind until you finally give in. Anyway, there was some unused or useless code, mostly in the form of on/off switches where only one of the two options ever made any sense.

This spree also removed the code for serving parts of the site securely and other parts insecurely — now it's just one or the other (PREFERABLY THE ONE). mark previously posted about this. As I understand it, this was technical debt in the "actual US currency" sense of "debt," such that once upon a time this complex code probably allowed Brad of LJ to avoid buying one half of an additional webserver.

Issue 2474: Fix undeclared $do_gzip var (pull request)
Issue 2475: Load GTop module (pull request)
Issue 2476: Make http/https a global setting (pull request)
Category: Machete marks in the drywall
Patch by: nfagerlund
Description: A couple small things we needed got nicked during code removal.

Issue 2478: Resolve mysterious tidyall Travis failures (hopefully!) (pull request)
Category: Automation, Quality of Dev-Life
Patch by: nfagerlund
Description: Remember how we delegated all our pedantry to a robot? Well, sometimes robots randomly go berserk. It's just a fact of life.

If you're like me you wouldn't expect a CLI tool for formatting Perl 5 code to be under aggressive development in 2019, but Perltidy recently overhauled its rules for aligning nearby equals signs and => arrows, so all of a sudden the version of Perltidy all the devs used started disagreeing with the version that runs automatically on pull requests. Some truly classic "DOES NOT COMPUTE" shenanigans, smoke coming out of the console and everything.

Issue 2486: Styles: Modernize image constraints (pull request)
Issue 2489: Styles: Wrong keyword value in image fix (OOPS) (pull request)
Category: Styles
Patch by: nfagerlund
Description: Sometimes entries and comments include huge images. Sideways overflows suck, so journal styles are supposed to gently shrink images to keep them inside their entry/comment containers. But they weren't doing it very well, because the "gently" part used to be impossible — simple max-width: and max-height: CSS can squash the aspect ratio if an <img> tag includes height= and width= attributes. So we were splitting the difference, accepting squash sadness on mobile and overflow sadness on desktop.

But modern CSS supports have-cake: while-eating, so now we can limit the width of images AND respect aspect ratios! As a bonus, we can also limit image heights, so a portrait of someone will always fit on one page without cutting the chin off.

If you need to override the limits for a single image (like a very tall comic strip), you can use an inline style — CSS's min- properties can override the max- ones, and setting object-fit: fill will let you distort the aspect ratio (if you're into that??). Do something like this:

<img src="some-url" style="object-fit: fill; min-width: 300px; min-height: 1200px;">

But now that you're a certified CSS Witch, please be a good reading page citizen and only use this power sparingly. 🙏 It's usually kinder to let the image shrink and add a link for viewing it full-size.

Issue 2490: Fix thick-bottomed userpic boxes (pull request)
Category: Mind the Gap
Patch by: nfagerlund
Description: There was a really persistent and really annoying little empty gap at the bottom of every user icon, and it was driving me nuts. 😬 Journal styles used various tricks to hide it, but it still showed up sometimes, like when hovering on an icon to show the quick actions pop-up. Now it should be fixed everywhere.

There are pictures in the pull request to show what I'm talking about, but that gap is so "can't unsee it" that you should consider not looking. In fact, while you're at it, maybe forget you ever read this whole issue description.

Issue 2491: Change several JS setup handlers to DOMContentLoaded (pull request)
Category: Browser support, Speed
Patch by: nfagerlund
Description: When a browser loads a web page, one of the things it does is build a sort of idealized model of all the objects in the page (called "the DOM"). While it's doing that it also runs any JavaScript it finds in the page, but a lot of JavaScript needs the DOM to do anything useful, and won't work right if the browser happens to run it before the model is ready. So browsers give you a way to say "Hold off on this code until after you have the DOM figured out." Problem solved!

Well, almost: some ancient browsers had incompatible ways to say "wait for the DOM" (or just did the wrong thing entirely), and it used to be a huge pain in the butt. So sometimes people gave up and said "Run this after everything is loaded, even images," which was slower and not what they wanted but which at least worked the same way everywhere.

But today that cure ("slow and wrong") is worse than the disease ("doesn't work in browsers that were already bad ten years ago"), so we're dropping Internet Explorer 8 support from a bunch of our JavaScript. (Old browsers should fall back to the non-JavaScript versions of any affected features, and we're committed to keeping DW usable without JavaScript.)

Among other things, we think this will help fix a bug that sometimes made the inbox controls unresponsive.

13 total issues resolved
Contributors: nfagerlund, rshatch, zorkian

Comments

[cesy]

Yay!

[azurelunatic]

Whee!

[kaberett]

I am endlessly grateful to you for (i) code and (ii) code tour.

[roadrunnertwice]

Aw 💖

[ilyena_sylph]

Yay a code tour!

Yay more code machete!

Yaaaaaaaaaaaaaaaay to Issue 2490 being fiiiiiiiiixed!

And YAY YOU for writing the code tour!

[roadrunnertwice]

💖

[metahacker]

"object-fit: fill"

Today I learned! (and it's not like I'm a css newb...)

[roadrunnertwice]

Man, I filed that PR the same day I learned about object-fit. It's so helpful! (And such an elegant solution to a thorny problem: decouple the box from the actual image, and be explicit about how the image reacts.)

[sporky_rat]

I read this three times before it was official and I'm reading it before I start work this morning and I promise, I'm probably going to read it again.

A++ entertainment.

[roadrunnertwice]

Haha, you know the way to a technical writer's heart. 😛

[brainwane]

Thanks for the code tour! And as always I'm particularly happy to see further confirmation that Dreamwidth is All HTTPS. :)

[ayebydan]

yay for being told in advance as ever!!!!

[oldtoadwoman]

y'all rock

[reimpaled]

It feels like the text within the comment fields is a LOT smaller than the text on screen (in posts or comments proper). Is there a way to adjust that?

[amorality]

+1, not being able to adjust width for the comment box is not so great, and the tiny text size is difficult to read. I can already feel a headache building from how I have to squint at it.

[skygaze]

+1 Everything else can sort of be adjusted to. Change takes time to get use to. But the text size does make it very difficult.

[diabolicaloser]

Hey, not really a fan of this new comment layout. It's super wonky in mobile for me, and the inability to drag the text box horizontally is a pretty big pain. I already have the font on my browser magnified, and the text in the boxes still feels too small.

[mark]

We're investigating what's up with that, it definitely doesn't look like that on any of my devices.

[assholic]

Also chiming in about the wee-tiny font on here, and the browse option is sneaky and hidden (hover over user image). I also rely on being able to drag the comment box in all directions, since there's so much space on the page for me on a desktop, I can often fit all of what I'm writing in one visible 'chunk' for me to read over than having to scroll to see it. But this tiny font is really bad, and I'm not certain why the text and action tag aren't on the same line and why the subject and default icon are. I would have thought you'd switch Subject and Action Tag, since that makes more sense visibly and aesthetically.

I do appreciate code pushes and fixes, but this seems to have caused more confusion and a visibility issue for people like myself.

[assholic]

To expand on what I mean in terms of the action/text thing, I think this actually has to do with both the difference between a paid and unpaid account, and the length of text for the name of the usericons.

This is an unpaid account with shorter icon names

This is a paid account with a few icons with longer names

Even without the Text/Action Tags being oddly misplaced, the bottom buttons for post comment/preview are being skewed oddly. I'm not entirely sure why.

[sun_fried]

So far I'm not digging the new comment box either. It isn't utilizing the space available on the page, and I don't really know what was wrong with the old one. I mean I sometimes type my replies on discord or notepad first, so I could just do that all the time, but I like having all the options available. Wish I had something more constructive, I just am having trouble putting it into words.

[sushicat]

did this code push change the subject emojis. i got 16 blank faces staring at me.

[roadrunnertwice]

Lol, I see what you're talking about and that definitely was not supposed to happen. That's fallout from the single scariest change we made in this timespan, and also I think you're the first one to notice it. We'll look into it, thank you.

[(Anonymous)]

Just my two cents but I don't really understand the point of tucking away the icon browser function. The old comment box seemed fine to me, and if I hadn't read the comments here I'd never have known where to browse my icons except on 'more options' page, which would be annoying.

That being said, thank you all for the hard work! I can't begin to imagine the effort it takes to improve DW and keep it running so smoothly. The little icon preview is especially neat! I know it'll be useful to me in the future.

[madfilkentist]

"we're committed to keeping DW usable without JavaScript."

Thank you!

[kate_nepveu]

once upon a time this complex code probably allowed Brad of LJ to avoid buying one half of an additional webserver

I enjoy these greatly, such as this!

[denise]

Poor roadrunnertwice, who is new to working on the DW code (and we love their willingness to dig in and do the annoying stuff SO MUCH OMG and they deserve ALL the appreciation for it) has learned very quickly that if there's something they look at and go "wait, what?" that they will inevitably get a very entertaining history lecture about that time in 2002 when everything was terrible and we had to do something that is even more terrible today now that there's different options but we've never had the chance to rewrite it. I swear, working on this codebase in 2019 is at least half archaeology, not programming.

[kore]

Well, sometimes robots randomly go berserk. It's just a fact of life.

Best code tour ever.

(Also is that username from the Modern Lovers?? Nice if so!)

[roadrunnertwice]

🎵~radio on,~🎵

[lefey]

Hey! Just a heads up, I think something got a wee bit botched. You can use the markdown @ user in comments now which is nice, but I went to go link someone to the markdown FAQ page https://www.dreamwidth.org/support/faqbrowse?faqid=260&q=markdown&lang= and it seems to be parsing the examples when it didn't prior. (Was markdown in comments even an intended thing? Was that this time or did I miss it before?)

[roadrunnertwice]

The @ replies being way too rowdy is a known issue — a few instances are patched, but it needs a deeper fix, which mark is duly pondering rn.

But I think you might be the first to point out that they’re getting wild in the FAQ entries, too! That’s kind of funny. Well, funny to me.

Anyway: working on it, sorry bout the dust.