Multiple UX/Usability Issues in Markdown Preview DevToy

[kkm000]

What improvement do you think would an existing feature or tool in DevToys?

Markdown keyhole pane is too small

Worth a thousand words. Do you like pixels? I love pixels! I counted 'em all! You know what fraction of the whole window area is inside the red box? To the 3rd decimal, 18.2%. If somehow magically we could give half of the total window to each pane, this number would've barely gone over 1/3 of what the pane would get. So, 2/3 of the potential work area has been wasted.

Of course, this is the upper bound: we can never give the whole window to the two panes... Wait, why not? YouTube viewer can be shown in the "theatre mode", using the full window width. Press t to toggle. But this is an advanced feature, let's think of something simple. The blue highlight covers the area which can be freed up right now, by rearranging, rebuttoning and sizing down or even (I'm trembling while saying that) removing existing elements.

Rebuttoning???

Yeah. Why is this electric box with a humongous lever on the side fixed to that massive headboard? No, I'm not asking where else you could've mounted it, I'm wondering what it's for. For your night table light? Haha, ya kidding me! Uh? What??? But… but… of course… but of course you need to turn it on and off. M-m-m, look, I have an idea. I dunno, but have you thought of a button switch, like all your other lights have?

Just put another button into the row of buttons to toggle light/dark mode, and throw away this ridiculous contraption. It doesn't even have to visually sink or pop up: it's rather easy to tell whether the preview panel is in the light or dark mode…

And this button does say what?

Suppose you want to play with your favourite DevToy. Which one is your favourite? Mine is the Markdown Preview! I copy text from an editor and paste it into the Markdown box, like this… Uh, these two lines stuck together… See, I can even edit the text I just pasted, and the rendered preview changes. And I'll fix this... and this... Now I'll copy it and paste back into my text editor. And there is even this nice Copy button. See? Just click it, and here we go back into the editor, Ctrl-A select all, Ctrl-V paste… A-a-a-a-a-a-a-a-a-a-a-a!!!

No, really, there is a paste button and a copy button. One with an icon, another with text, but still, you of course mentally pair them. And you'll only find out what a cruel joke has been played on you when you fall for it.

Solution/Idea

Whither, therefore?

1. When I look at the UI, I'm wondering whether any button makes sense at all. The left pane has Open and Paste buttons to get the text in, but has no Save or Copy to get the text out. I don't know if people really use the paste button, the telemetry is on your firebase. But Ancient Greeks have already discovered that Ctrl-C is for copy and Ctrl-V is for paste. It's the first two Ctrl/Cmd shortcuts that people learn. (I don't really know if the users of the MD panel use any shortcuts, but if they do, I guarantee these are Ctrl-C and Ctrl-V).
2. Besides, you use Ctrl-A Ctrl-C anyway to get the MD back out when you've made any changes, this is the only way. Do you need a tool button for Ctrl-V then? I'd say no.
3. Open without Save? Also vote against.
4. Copy HTML? What does the telemetry say, is it ever used? Of course, the telemetry won't tell you why is it used, and I have really no idea. If the feature is in high demand, there is an option to put an MD–to–HTML convertor into the collection of converters.
5. And do people really need quick access to preview in light/dark modes? The goal of the whole Toy is to fix MD formatting issues, not to estimate the aesthetics of how the document looks in different lighting modes. I think that by following the global application light/dark/auto setting, you will lose very little value, but by expanding the panes, you'll gain a lot: the screen estate is at the highest premium.
6. The only remaining button with the possible useful use for those who don't do Ctrl-A Del in the edit box out of philosophical, political or aesthetic reasons is the Clear button. Now let's think of all the programs which present edit boxes. Does Notepad have a Clear button? It has File/New, true, but that also breaks an association with the open file. To clear the text without breaking this connection, the only way to go is Ctrl-A Del. I think we'll quickly discover that there is hardly any program that has it. For one, the box I'm typing this message into has a whole toolbar, but there is no Clear button. And maybe it's even a good thing, not a bad thing…

If you think of tablets, place the tool buttons on the window's header. Otherwise, probably just ditch them all.

If I read newspapers, then someone edits them, right?

Right. But in an entirely different sense of the word "edit" than we're talking about here. And, as any ornithologist knows, an alligator is narrower than longer. The two panes are tall and narrow. If we manage to salvage some space, we'll make them taller, but there's little space to make them wider. And the window is taller than it's wide when the side panel is open.

The heading line of the document that is shown on my screenshot is folded into 3(!!!) lines. It normally fits one... The thing is, editing unwrapped lines without having to scroll left and right through a narrow column is much more natural than… than what I currently have to do. Text lines are about 3 to 6 times longer than the column width. It's a very weird workflow: lines in the preview wrap where you've never seen them wrapping (a list with short items), and in the editor on the left, the text you need to fix is always to the left or to the right of the edit box opening. OK, not true, not always. Sometimes even I get lucky. But most of the text is off-screen to the left or right at any moment.

This is unnatural because we're used to editing long files of many lines, sometimes very long, so scrolling up and down is what we all used to. When you get a text of a few very long lines, you first cast a number of magic spells, which shall not be reproduced here, at someone who wrote that file, then fumble for the line wrap option. That's a strong argument for preferring wide even if short panes to the current narrow and tall.

Please make arranging panes one above the other at least an option. Probably on by default. Or even make it non-optional (although people have screens of all unimaginable aspect ratios, so an option is warranted indeed).

Comments

When Mummy puts me to bed, I always ask her where my DevToys are. I can't sleep if I'm not hugging them!