Markdown Previewer Project - Feedback

Hi everyone!

I’m so glad I’m done with this project. Almost driving me nuts.
I would like to hear some of your comments and suggestions. These are my very first React projects, this particular one took me a couple of days to complete (that maximize button was complicated). Anyway, I’m all ears.

https://codepen.io/ezequiel_/full/zgwOqm

Wow! nice, man!
You did a pretty good job!
Maybe give the cod-like stuff a border-radius of 2px and a bit of padding.

1 Like

@eze
Whoa!!! Is this what it is supposed to look like?

no not really.

works fine on Firefox. What browser are you using?

I’m using chrome. It works fine.

Thin you should reload the page?

mine looks like this:

1 Like

It works but doesn’t look very good. You could use a better font and some colors :slight_smile:

1 Like

Hi @eze, your previewer looks good. I have a more than one project on GitHub and I write markdown readme’s a lot. What I did was take some of my README.md content and pasted them into your editor. My feedback;

  • the background color is a little dark. It makes it hard to see links. Possibly lighten the background or choose another color for the links that will contrast a little better.
  • I think a sans-serif font is easier to read
  • add a little padding or margin on the left side so things aren’t banged right up against it
  • not sure if this is in the scope of the project (I’m not that far yet). The couple of markdown previewers that I’ve used allow users to put in a snippet of code and preface it with the code used and it will render it so it looks like the code. Your previewer highlights it but doesn’t make it look like the code used. As stated, it may be out of scope.

Good job!

2 Likes

Hi @Roma :slight_smile: thanks for the feedback. Really appreciate your thoughts and suggestions. I will work on this project to improve it.

1 Like

@eze I am using Firefox version 68. It is still not loading properly.
@ConnerOw1115 I reloaded the page; same look.
Here it is in Chrome.


@eze Is this how it should look?

2 Likes

Yes it should also be centered.

Just my $0.02.

On my MacBook Pro I normally use Chrome and the md previewer rendered fine. Out of curiosity, I viewed it with Firefox (v68.0.1) and it still renders correctly.

Nothing but respect for you @brandon_wallace, you always give good feedback. Not sure why FF is messing up with you.

1 Like

@Roma

As do you my brother. We are all learning here, none of us are going to make a perfect webpage. Looking at the code closely enough there will always be some improvement that can be made. That is why I try to give feedback to truly help the person.

By the way, I am using Firefox v68.0.0.0.0.0.1. I think I need to upgrade. Lol, just joking.

@eze Carnalito, aquí están mis sugerencias.

  • How about making the top area take up 50% of the height and the bottom area take up 50% of the height? Just an idea. Or maybe a 40% / 60% split in height?
  • Consider adding a dark/light theme??
  • I agree with the idea of @Roma to use a sans-serif font. Serif fonts make my eyes hurt most of the time on the webpage, but it is a good font for reading. There are of exquisite sans-serif fonts you could use such as Open Sans or Lato.
  • I believe the top and bottom windows should be the same width.
  • Add padding to the bottom window to push the text into the center would be nice.
  • Brighter colors would be nice, in my opinion.

Bueno, hiciste muy bien en tu proyecto.

This is what it looks like in the Chromium browser. Is it supposed to look like this?
I cannot get to the div underneath.

1 Like

Gracias @brandon_wallace! I really appreciate your feedback and I will get back to work on this project soon.

  • Regarding the height, these have been established with window.screen.height-600+"px"; so I guess I will have to re-think another way to refactor my code.
var normalH = window.screen.height-600+"px";

document.getElementById("toolbar").style.height= normalH ;

I still struggle with height and width % and centering content. (such a noob!) :laughing:

Anyway, I’ll give you a head’s up when the ‘improved’ version is up.

BTW, I have no idea how to make the page compatible with Chromium browser.

That’s what it’s supposed to look like.

@eze Do not worry. We are here to help you with your project. Look at how you can easily center objects with flexbox (code below of example layout). I also added media queries for mobile view. vh (view height) is what you use to set the height of the objects in the viewport. 30vh would be 30% of the viewable area of the webpage.
HTML:

<div class="container">
  <div class="row top"></div>
  <div class="row bottom"></div>
</div>

CSS:

body {
  margin: 0;
  background-color: #DDDDDD;
}

.container {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.row {
  width: 70%;
}

.top {
  height: 30vh;
  border: 4px solid #CC0000;
}

.bottom {
  height: 70vh;
  border: 4px solid #0000FF;
}

@media screen and (max-width: 900px) {
  .row {
    width: 80%;
  }
}

@media screen and (max-width: 600px) {
  .row {
    width: 96%;
  }
}

@media screen and (max-width: 400px) {
  .row {
    width: 100%;
  }
}

You can paste that into Codepen or click on this example.
https://codepen.io/anon/pen/gVGejL?editors=1100

@ConnerOw1115 The top div overlaps the bottom one and I am not able to read the text underneath.