You are viewing...

I Deployed Today and Recommend react-draft-wysiwyg as a text editor

Updated on March 11, 2018 at the 18th hour
Posted under:

DISCLAIMER: Expressed views on this blog are my own.

Alright, so I deployed a new version of the blog to support canonical URLs, new text editor for the backend, and fixed how lists get shown in a post.

Fixed list numbered elements going out of bounds.

Very small update, but lists' numbered elements were showing out of the post boundaries and all that needed to happen was modify the list css to push in the numbered elements back into the boundaries. Took a google search to find the solution unfortunately.

Canonical URLs (SEO)

I've learned that canonical urls are important in telling a search engine which page is the authoritative page. It makes sense to push it to the website owner considering a search engine would have to randomly pick a page out of "duplicates". Duplicates cause your search engine rank to drop or pages will be de-indexed all together. For some reason, a url ending in / and without are seen as different. As a human, I say it makes no difference. It makes a big difference path-wise. / could lead to an index page while without the '/' it would be a folder. The best way to deal with that is to just redirect from / to no '/'. 

I decided to instead use the canonical link element <link rel="canonical"/> on my pages. Why? Redirects are cheap but this is cheaper. Web server pushes content and calls it a day and both the search engine bot and user are happy.

Another part of this is choosing a preferred root domain a.k.a the battle between www and no-www (i.e. and Most sites prefer www, so I did too. Google Webmaster tools is odd in that it needs you to register four different properties (http/https, www/no-www). Bing Webmaster tools has it all under one roof! Bing knows what they are doing at least!

The Search for the Best Text Editor

Oh boy, I went through 2 text editors already and both are JS based, so they work without React and need a React-{lib} integration library to make it "work" with React. Hah, I went through React-Trumbowyg and React-Quill. I liked their designs, but they are too immature to use. With Trumbowyg and Quill, they have this problem where if you paste then the page will scroll all the way up. Super annoying, my guess is the editor is cleared and then text put back, so the editor shrinks and then comes back. I don't remember what it was about Quill and linking, but something was not working well there. I liked Quill's inline toolbar.

The winner is...... React-Draft-Wysiwyg (draft.js) 

Draft.js is a library made specially for React, so of course it was going to work well. I cling to my pre-react days where I could get any library I wanted and use it easily! React-Draft-Wysiwyg makes it easy to use draft.js since it can be cumbersome to get draft.js to where you will need it. I really like how configurable it is on both js and css sides. I made my toolbar a sticky using css, so it will follow me as I type going down, love it! I am spoiled and wanted an inline disappearing toolbar, but hah I'll settle for this.

Shoutout to jpuri for making this library! You made my life easier!

Alrighty, so where do I go from here? I have a couple of blog ideas jotted down. Some are edgy (I will mark them as such!) and majority are opinion or help articles. I'll blog on interviews being arbitrary for sure. I am glad I am done with interviews.

You just read "I Deployed Today and Recommend react-draft-wysiwyg as a text editor". Please share if you liked it!
You can read more recent posts here.