Markdown Previewer Feedback Please!

Code Feedback
1

Just finished my markdown previewer. Appreciate all feedback,

I used JS, React, Sass, Bootstrap.

Live version: https://rs-markdown-previewer.netlify.app/
Repo: https://github.com/rsheppard83/markdown_previewer

2

This is a really nice job! There aren’t any major issues to discuss here so I am going to be a little picky just to have some things to talk about :slight_smile:

  • I would make the keyboard focus indicators on the resize buttons stand out more. They are there (and I applaud you for that) but they aren’t much darker than the background and so may be hard to see for some people. I would also add a focus indicator for the editor window. Yes, the cursor does blink in there, but it’s a skinny little thing that is not always easy to see. Don’t be afraid to let keyboard users know where the focus is. They will appreciate it.

  • Semantically, you should probably have one <h1> that is something like “Markdown Previewer” and then two <h2>s (for the Editor and Previewer headings). And all of this should be wrapped in a <main>. Could probably make a case for making each window a <section>.

  • When I narrow the browser, the editor window gets skinnier but the previewer window remains the same (until the break point where they rearrange to a single column). Maybe this was an intentional design decision? I do think that the editor window gets a little too skinny though. And when the editor window gets real skinny the pencil icon jumps above the Editor heading.

  • In addition to responsiveness to view port width changes I always test for responsiveness to text size changes. When I crank up the text size, the code block in the preview window gets its own horizontal scroll bar but some things, like the table, do not, and as I narrow the browser the table breaks out of the right side of preview box. This is a tough one because we all want to avoid the dreaded horizontal scroll bar but we also don’t want content bleeding out where it shouldn’t. Tables can only get so narrow so I think you might have to accept the scroll bar here. I’m referring to putting a horizontal scroll bar on the entire preview window itself. That would allow you to get rid of horizontal scroll bar on just the code block too. That’s just my personal opinion.

  • You allow the preview window to grow as tall as necessary for the content but yet the editor window has a fixed height with a vertical scroll. So if I want to see the bottom of the preview window I have to scroll the entire page down to the bottom, but then I lose the editor window and have to scroll back up again to edit. It might make more sense if you make both windows the same height (take up the entire height of the view port) and then have vertical scrolls on both of them for overflow. That way you never lose the editor window. Just a thought.

As I said, overall a very nice job.

2 Likes
3

Thanks for taking the time to review my code. I will try and make the fixes you suggested.

The textarea doesn’t allow a min-height css prop so will need to work out a work around.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.