I’ve done a little work on my markdown previewer and would really appreciate some critique on how it is at the moment. There is no functioning toolbar at the moment, I’m still looking into how to best go about that. If anyone knows of the simplest way to insert text into the textarea I would be very grateful.
I managed to implement DOMPurify to sanitize the input and hope that someone can confirm that I have done that correctly or not! I think I’ve done it right.
The React Way:
One question I have about the proper way to use React is this:
Is it ok to write a function outside of any component and then call that function from within a component?
With regards to styling:
I struggled somewhat with the layout of the textarea element and label. I was trying to implement this: Center textarea with label flush top left where the textarea label is flush to the top left of the textarea and then the textarea itself centered in it’s own grid column. Strangely enough I just couldn’t achieve it and had to resort to using padding-left in order to force the textarea off the left hand side of the container.
So, as I said, I would love some critique on this project, particularly in my use of React and if anyone has any feed back on the points and questions I’ve raised, I would be most grateful.
I think the media query kicks in very late, meaning even if the window width is very small, the editor and the preview are still side-by-side
I think that’s totally fine, you want to do this when you need a function in different components, e.g. to convert or format something; you would mostly use a folder named utils or helpers
hey @miku86 thank you for the rapid response! it is very much appreciated.
Why would this be so? Is there something I can do to alleviate this problem? It’s not something I’ve seen myself. My small screen size is defined at 567px, is this the problem and do I need to accomodate smaller screens specifically?
…and then you would import these functions rather having them written in the React app itself?
Thanks again for your input, it is most welcome.
Kind regards,
LT
I fiddled around with your code and I felt the my personal best user experience with a media query of 1200px (instead of 567px). But this depends a lot on personal preferences.
When I add media queries, I ask myself a simple question:
Can the user use the core features without any friction?
Here is a screenshot with a screen width of 600px:
Hi @miku86,
Thanks for getting back to me. I really should have checked how the app worked on a physical mobile device rather than purely relying on the browser developer tools’ ‘Responsive Mode’ My thoughts were that the user could use the app with the editor and preview side by side while their phone was in landscape orientation. However, after checking it on my mobile I discovered that the app doesn’t rotate when the phone is rotated. I’m presuming this is because of the virtual keyboard that needs to pop up from the bottom? Anyhow, armed with that knowledge I’m inclined to agree with you about the media query break point. Although I still remember when a decent resolution website was 800 x 600. How times move on!!
So on the top level is the src folder and I have a components folder in it. Then I simply add a utils folder also into src :
This is good to know I’ll do this when I set my ide up to write React apps. I don’t have this option within CodePen unfortunately, which is quite a shame. CodePen doesn’t really set you up for real world web development and the file structures that you need to implement. But saying that, it is a place where you can just get down to business of writing code with a real time preview, very useful at times.
Thanks again for the input and feedback, it is all very welcome.
LT
