[Tool] Make posting UI better without any browser plugin
steemdev·@asbear·
0.000 HBD[Tool] Make posting UI better without any browser plugin
Hello guys,
I am the one of those who are sick of writing using the horrible posting UI. The editing area and the preview are aligned vertically so writing and checking cannat be done without scrolling up and down. I usually do this thousand times as I tend to write quite lengthy posts with lots of pharagraphs, images and also codes occasionally so that I end up with headache and stiff neck after finishing it. I really want this to be side by side, but no work has been done by the Steemit development team at all.
Installing browser plugins? That's really seriously **no no** for me. After working on the web security area for a couple of years, and being a software engineer for more than 15 years ,now I believe a browser plugin is the first thing a hacker can think of in order to steal someone else's credentials. Yes, browser plugin would be very useful tool for them indeed.
Even if the plugin itself is pure and safe, and even if you blocked the auto upgrade feature, it still could be a perfect gateway to help the private information leaked if the host PC is compormised. If a browser plugin becomes so popular and installed on the majority of Steemians' PC, the area will definitely look like a great gold mine to the hackers. I repeat, once your PC is compromised anyhow, a browser plugin will suddenly become a very attractive tool to access your secret.
Long story short, I made a very simple solution to make your posting enjoyable without installing any plugins. By clicking a button, you can enjoy the side by side writing environment.
<table><tr><td>
https://steemitimages.com/DQmTozUMuUEo11iVnhUWJ2LVvV75an5eovzUVdbTH5KwXDM/Screen%20Shot%202017-10-04%20at%2022.16.21.png<br><center>Before</center></td><td>
https://steemitimages.com/DQmXDBjc8P4Wm4fnfVvu5EgxJKPmMVnYbfRnDtYspGcGPPr/Screen%20Shot%202017-10-04%20at%2022.16.50.png<br><center>After</center></td></tr></table>
Also, the editor shrinks or expands as you resize the window. This means you can take full advantage of your wide monitor indeed.
Adjusting the editing window remains working so that you can find out the best formation.
# How to apply?
First, right click on your bookmark bar, and click "Add Page"
Second, copy the javascript below and paste in the textbox for "URL", save
>javascript:"undefined"==typeof window.reform_loop&&(window.reform_loop=setInterval(function(){var e,t,l,o;try{e=document.querySelectorAll(".vframe")[0],t=e.querySelectorAll(".Preview")[0],l=e.querySelectorAll(".ReplyEditor__body")[0],o=l.getElementsByTagName("textarea")[0];try{document.querySelectorAll(".ReplyEditor")[0].className=""}catch(r){}}catch(r){return}t.style.position||(e.style.position="relative",o.style.height="500px",o.style.width="50%",t.style.position="absolute",t.style.right="0px",t.style.top="50px",t.style.overflowY="scroll");var i=l.getBoundingClientRect(),y=o.getBoundingClientRect(),n=i.width-y.width-10,s=y.height-10;t.style.width=n+"px",t.style.maxHeight=s+"px"},500));
That's it. Simply click the created bookmark in the posting UI. Remember that refreshing the page will deactivate it so you need to click it again. That is why I use book mark. Instead, you can paste the code to the Javascript console of your Browser's developer tool.
# Is the script safe?
Yes I can guarantee that it is 100% safe. But actually, you do not and should not need to trust me. Just check the script. The Javascript code is very obvious, and just does change the CSS of the components so that the input textarea and the preview box can be aligned horizontally. Also, needless to say, no one can sneak in any change to the script once you add it to your bookmark. If anyone can review and verify the safety of my code, please do.
**You can find the non-minified source code here:**
https://gist.github.com/ianpark/c033e91c26048427c7c00ebb3ed16a6f
Enjoy! :-)