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

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

Flat | Top-Level Comments Only

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.

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.

Those Text/Action Tags are being inserted by the Dreamwidth Tools extension, which isn't something we control unfortunately. I recommend reaching out to the author and asking them to update?

I removed it for now once I figured out that it was I, Luigi, who was the idiot. So that totally removes the rest of the issues I had and I apologize for boohooing over things that were obviously on my end but I had had a brainfart over. Thanks for getting back to me, though. I appreciate you guys taking the time in a clustercluck. Everything for me is fixed (including the tiny text) except for the width of the comment box. Height grows and decreases, but not width. Other than that, it's all good ♥

Thank you guys. You do good work.

Oh no worries at all, we definitely appreciate the comments and feedback! Keeps us on our toes and helps us build something great.

Petty whining never helps, but you guys have always been awesome about fixing what gets twisted during a code push and all of your fixes are actually useful for your userbase and you're not all about the Benjamins, which I totally respect and admire.

This is a labor of love for sure.

Although I will say that in this case the changes are more for us, we basically rewrote the quickreply form (a massive undertaking) so that we can actually improve it in the future.

It was 20 year old code that everybody was afraid to touch and was broken in some subtle and terrible ways and summoned an ancient one every month... but now it's modern code and we can work on it and give it new features and cool stuff.

Of course the process of literally rebuilding it from the inside out means some things change and we have to go through the entire process of getting it to work on all 900,000 browsers people use... which is definitely A Process.

So thank you for your patience & feedback & comments. Much appreciated for sure.

Heya, are you using the Dreamwidth Tools extension? The "action tag" / "text tag" buttons aren't part of the normal comment form, so when the extension adds them, the container just has to react as best it can to try to fit them in. Right now, it doesn't really know what to do about them.

The extension developer will have to roll a fix for that -- sorry! Once they get time, they should be able to override the spacing of those controls pretty easily; overriding the flexbox CSS for that top row will let them do pretty much anything.

I think that's probably also what's responsible for the skewed buttons down below; the free user shouldn't have a "browse" label down there, and I think the extension might be adding that.

Edited (mistakenly had a title in the comment) 2019-06-23 05:08 (UTC)

I was, and I'm a total weenie about it and forgot because I don't actually use it, so I forget that it's a thing. I am the true Moron. It is Me. (From all that I've heard recently, the developer has 'A BIG THING' happening in their lives, so it might be awhile before they have the mind energy to do so).

You're right about all of it, so I'm currently just patiently waiting for the box fix. You guys are brilliant and if I could actually send you guys cookies of whatever flavor you liked, I'd do so. ♥

Question, while you're here, since you are so willing to help us figure stuff out! (Thank you!) Other than account switching, what do you use the Dreamwidth Tools extension for? We haven't done a lot of poking at it but there may be bits we can add to the site itself if it's stuff people really are using.

Not at all. I mostly used it for the browse function. I have more free accts than paid ones, and I don't like to pay for an account unless I'm positive I'm going to use it for an extended time. Since my icon naming has a theme that carries into all my accounts, it can be hard to keep track of what 'Look - 1' is for which acct. But with the new way that you can cycle through/down in the quick-reply, that halves the issue, since then it would only be on the longer more options form where I couldn't actively see the icon. Other than that, I have one char account that has a specific personality dynamic split, so I use a different font for their speech and text, and that was what I'd had set in the text buttons.

Gotcha, thanks! I'll poke at those a bit.

Apparently I spoke too soon about glitches. I'm using a Planet Caravan theme for my journal style and it's... something's done gone wrong with it. If you go look at my journal, you can see that the entries themselves have been thinned down significantly to where it looks terrible. It happens to be a style by the user that you listed up in the style editing, so whatever they did seems to have done something else. I clicked back in my entries to see if it was possibly something to do with the fact my sticky nav page has a gif on it, but even non-image posts are minimized like that. The obvious fix is just to pick a new style, but since I'd spent time tweaking that the way I liked it, I kind of don't want to.

Is this any better? We made some tweaks to Planet Caravan last night.

Thumbs up from me. You guys are bosses.

This should be fixed now - there was a small accidental bug with Planet Caravan that was causing it to get double the margin, but we pushed a fix last night.

It's working lovely now, than you for the amazingly quick fix in a marginal problem.

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

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject