create account

[Tool] Make posting UI better without any browser plugin by asbear

View this thread on: hive.blogpeakd.comecency.com
· @asbear · (edited)
$63.45
[Tool] Make posting UI better without any browser plugin
![Screen Shot 2017-10-04 at 22.19.07.png](https://steemitimages.com/DQmavptD3WxhLMCBtUzp8nfuAUx8tkDqDo6fhaq8JvvbeFr/Screen%20Shot%202017-10-04%20at%2022.19.07.png)

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.

![Screen Shot 2017-10-04 at 22.17.00.png](https://steemitimages.com/DQmTnUZ21iicx3rhjWhKJ19KggfDnpq2F5n5t7hvBsN4JRQ/Screen%20Shot%202017-10-04%20at%2022.17.00.png)

Adjusting the editing window remains working so that you can find out the best formation.

![Screen Shot 2017-10-04 at 22.17.16.png](https://steemitimages.com/DQmPhz7TW7xwGk9EZEd6zNaKPAsh4g5czJT4k1F7HrVkKXp/Screen%20Shot%202017-10-04%20at%2022.17.16.png)


# 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!  :-)
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , , ,
properties (23)
authorasbear
permlinktool-make-posting-ui-better-without-installing-any-browser-plugin
categorysteemdev
json_metadata{"tags":["steemdev","coding","steemit","dev","kr"],"image":["https://steemitimages.com/DQmavptD3WxhLMCBtUzp8nfuAUx8tkDqDo6fhaq8JvvbeFr/Screen%20Shot%202017-10-04%20at%2022.19.07.png","https://steemitimages.com/DQmTozUMuUEo11iVnhUWJ2LVvV75an5eovzUVdbTH5KwXDM/Screen%20Shot%202017-10-04%20at%2022.16.21.png","https://steemitimages.com/DQmXDBjc8P4Wm4fnfVvu5EgxJKPmMVnYbfRnDtYspGcGPPr/Screen%20Shot%202017-10-04%20at%2022.16.50.png","https://steemitimages.com/DQmTnUZ21iicx3rhjWhKJ19KggfDnpq2F5n5t7hvBsN4JRQ/Screen%20Shot%202017-10-04%20at%2022.17.00.png","https://steemitimages.com/DQmPhz7TW7xwGk9EZEd6zNaKPAsh4g5czJT4k1F7HrVkKXp/Screen%20Shot%202017-10-04%20at%2022.17.16.png"],"links":["https://gist.github.com/ianpark/c033e91c26048427c7c00ebb3ed16a6f"],"app":"steemit/0.1","format":"markdown"}
created2017-10-04 22:13:57
last_update2017-10-05 17:50:39
depth0
children16
last_payout2017-10-11 22:13:57
cashout_time1969-12-31 23:59:59
total_payout_value48.236 HBD
curator_payout_value15.214 HBD
pending_payout_value0.000 HBD
promoted2.000 HBD
body_length4,349
author_reputation76,617,948,082,616
root_title"[Tool] Make posting UI better without any browser plugin"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id16,802,989
net_rshares25,970,578,718,601
author_curate_reward""
vote details (27)
@cheerup ·
$0.12
Cheer Up! 음~? ν₯미둜운 ν¬μŠ€νŒ…μ΄κ΅°μš”.
- from Clean STEEM activity supporter
πŸ‘  
properties (23)
authorcheerup
permlinkre-asbear-tool-make-posting-ui-better-without-installing-any-browser-plugin-20171004t231443682z
categorysteemdev
json_metadata{"app":"cheerup/test"}
created2017-10-04 23:14:45
last_update2017-10-04 23:14:45
depth1
children1
last_payout2017-10-11 23:14:45
cashout_time1969-12-31 23:59:59
total_payout_value0.118 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length64
author_reputation16,047,829,467,981
root_title"[Tool] Make posting UI better without any browser plugin"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id16,806,201
net_rshares48,736,812,763
author_curate_reward""
vote details (1)
@asbear ·
ν₯미둜운데 λ­ν˜”λ‹€κ³  λ†€λ¦¬λŠ”κ±°λ‹ˆ μΉ˜μ–Όμ—…μ•„? -_-++
properties (22)
authorasbear
permlinkre-cheerup-re-asbear-tool-make-posting-ui-better-without-installing-any-browser-plugin-20171005t125530303z
categorysteemdev
json_metadata{"tags":["steemdev"],"app":"steemit/0.1"}
created2017-10-05 12:55:36
last_update2017-10-05 12:55:36
depth2
children0
last_payout2017-10-12 12:55:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length28
author_reputation76,617,948,082,616
root_title"[Tool] Make posting UI better without any browser plugin"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id16,856,566
net_rshares0
@cryptokas ·
$0.11
Good job! However what makes this more save then a plugin? We need to run javascript too. We also can review the js code of a browser plugin... so there is no difference. I suggest you pack the script as a plugin :-) while keeping the source code on github. You'll get more users.
πŸ‘  
properties (23)
authorcryptokas
permlinkre-asbear-tool-make-posting-ui-better-without-installing-any-browser-plugin-20171011t114736183z
categorysteemdev
json_metadata{"tags":["steemdev"],"app":"steemit/0.1"}
created2017-10-11 11:47:33
last_update2017-10-11 11:47:33
depth1
children1
last_payout2017-10-18 11:47:33
cashout_time1969-12-31 23:59:59
total_payout_value0.082 HBD
curator_payout_value0.026 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length280
author_reputation202,843,773,596
root_title"[Tool] Make posting UI better without any browser plugin"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id17,387,016
net_rshares45,016,126,903
author_curate_reward""
vote details (1)
@asbear · (edited)
Thanks! :)

I don't think it is the same. Plugin is no more safe when your PC is compromised, even if the plugin source code is safe. Malware could twick the plugin to do something else that was originally not intended. What if the plugin is no more working due to Steemit.com's UI update and if it asks updating? Who can guarantee the new version is safe? How can we trust them? I would not trust anyone. And if your PC or browser is compromised? Plugin suddenly become a super useful tool for the hackers to grep the private information.

My short script cannot do anything else but readjusting the div tags. Easy to understand what it does and you don't need to worry about what it does behind the scene or what it would do if your PC is compromised. It is definitely million miles safer than installing plugin in my opinion.

I won't get more users if I make this code embedded into a plugin because then it won't be any better than the plugin which is already working well with tons of features. My script is only useful when you don't trust plugin.

Thanks for your opinion, I really appriciate it. I want more discussion about security and the code :)
properties (22)
authorasbear
permlinkre-cryptokas-re-asbear-tool-make-posting-ui-better-without-installing-any-browser-plugin-20171011t124044232z
categorysteemdev
json_metadata{"tags":["steemdev"],"app":"steemit/0.1"}
created2017-10-11 12:40:42
last_update2017-10-11 12:46:51
depth2
children0
last_payout2017-10-18 12:40:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,158
author_reputation76,617,948,082,616
root_title"[Tool] Make posting UI better without any browser plugin"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id17,390,979
net_rshares0
@dayoung ·
$0.10
μ—¬κΈ°κ°€ κ·Έ 유λͺ…ν•œ 냉동고 μ΄κ΅°μš” γ…‹γ…‹
πŸ‘  
properties (23)
authordayoung
permlinkre-asbear-tool-make-posting-ui-better-without-installing-any-browser-plugin-20171005t101841781z
categorysteemdev
json_metadata{"tags":["steemdev"],"app":"steemit/0.1"}
created2017-10-05 10:18:42
last_update2017-10-05 10:18:42
depth1
children1
last_payout2017-10-12 10:18:42
cashout_time1969-12-31 23:59:59
total_payout_value0.079 HBD
curator_payout_value0.025 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length20
author_reputation9,607,201,569,130
root_title"[Tool] Make posting UI better without any browser plugin"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id16,845,495
net_rshares43,117,856,492
author_curate_reward""
vote details (1)
@asbear ·
νŒŒμΉ΄λŠ”μ±™κ²¨μ˜€μ…¨μ₯¬?
properties (22)
authorasbear
permlinkre-dayoung-re-asbear-tool-make-posting-ui-better-without-installing-any-browser-plugin-20171005t125427277z
categorysteemdev
json_metadata{"tags":["steemdev"],"app":"steemit/0.1"}
created2017-10-05 12:54:27
last_update2017-10-05 12:54:27
depth2
children0
last_payout2017-10-12 12:54:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length9
author_reputation76,617,948,082,616
root_title"[Tool] Make posting UI better without any browser plugin"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id16,856,484
net_rshares0
@gniksivart ·
$0.10
Wow this is awesome thanks for sharing. Anxiously awaiting/hoping someone verifies this.
πŸ‘  
properties (23)
authorgniksivart
permlinkre-asbear-2017104t22523303z
categorysteemdev
json_metadata{"tags":"steemdev","app":"esteem/1.4.6","format":"markdown+html","community":"esteem"}
created2017-10-05 03:05:24
last_update2017-10-05 03:05:24
depth1
children1
last_payout2017-10-12 03:05:24
cashout_time1969-12-31 23:59:59
total_payout_value0.076 HBD
curator_payout_value0.025 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length88
author_reputation74,197,147,678,652
root_title"[Tool] Make posting UI better without any browser plugin"
beneficiaries
0.
accountesteemapp
weight500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id16,818,777
net_rshares43,931,400,954
author_curate_reward""
vote details (1)
@asbear ·
hey, @gniksivart, thanks for your comment. I guess no one reads my article as I have no follower outside of KR channel, but I really hope someone found it helpful.
properties (22)
authorasbear
permlinkre-gniksivart-re-asbear-2017104t22523303z-20171005t103119208z
categorysteemdev
json_metadata{"tags":["steemdev"],"users":["gniksivart"],"app":"steemit/0.1"}
created2017-10-05 10:31:21
last_update2017-10-05 10:31:21
depth2
children0
last_payout2017-10-12 10:31:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length163
author_reputation76,617,948,082,616
root_title"[Tool] Make posting UI better without any browser plugin"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id16,846,378
net_rshares0
@paolobeneforti ·
$0.10
amazing tool. thx! :)
πŸ‘  
properties (23)
authorpaolobeneforti
permlinkre-asbear-tool-make-posting-ui-better-without-installing-any-browser-plugin-20171011t102723392z
categorysteemdev
json_metadata{"tags":["steemdev"],"app":"steemit/0.1"}
created2017-10-11 10:27:21
last_update2017-10-11 10:27:21
depth1
children1
last_payout2017-10-18 10:27:21
cashout_time1969-12-31 23:59:59
total_payout_value0.077 HBD
curator_payout_value0.025 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length21
author_reputation261,623,768,067,201
root_title"[Tool] Make posting UI better without any browser plugin"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id17,381,055
net_rshares42,304,312,030
author_curate_reward""
vote details (1)
@asbear ·
you are welcome. thanks! :)
properties (22)
authorasbear
permlinkre-paolobeneforti-re-asbear-tool-make-posting-ui-better-without-installing-any-browser-plugin-20171011t124316481z
categorysteemdev
json_metadata{"tags":["steemdev"],"app":"steemit/0.1"}
created2017-10-11 12:43:15
last_update2017-10-11 12:43:15
depth2
children0
last_payout2017-10-18 12:43:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length27
author_reputation76,617,948,082,616
root_title"[Tool] Make posting UI better without any browser plugin"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id17,391,176
net_rshares0
@steemitboard ·
Congratulations @asbear! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/commented.png)](http://steemitboard.com/@asbear) Award for the number of comments received

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click [here](https://steemit.com/@steemitboard)

If you no longer want to receive notifications, reply to this comment with the word `STOP`

> By upvoting this notification, you can help all Steemit users. Learn how [here](https://steemit.com/steemitboard/@steemitboard/http-i-cubeupload-com-7ciqeo-png)!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-asbear-20171005t075202000z
categorysteemdev
json_metadata{"image":["https://steemitboard.com/img/notifications.png"]}
created2017-10-05 07:52:00
last_update2017-10-05 07:52:00
depth1
children1
last_payout2017-10-12 07:52:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length696
author_reputation38,975,615,169,260
root_title"[Tool] Make posting UI better without any browser plugin"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id16,836,359
net_rshares0
@asbear ·
hey, I'm not in the mood. leave me alone.
properties (22)
authorasbear
permlinkre-steemitboard-steemitboard-notify-asbear-20171005t125449189z
categorysteemdev
json_metadata{"tags":["steemdev"],"app":"steemit/0.1"}
created2017-10-05 12:54:48
last_update2017-10-05 12:54:48
depth2
children0
last_payout2017-10-12 12:54:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length41
author_reputation76,617,948,082,616
root_title"[Tool] Make posting UI better without any browser plugin"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id16,856,508
net_rshares0
@yoon ·
$0.10
κ·Έλž˜λ„ λŒ“κΈ€ ν•œ λΆ„ μžˆμ—ˆλ„€μš” γ…Žγ…Ž 2봇과 ν•¨κ»˜. γ…Žγ…Ž
πŸ‘  
properties (23)
authoryoon
permlinkre-asbear-tool-make-posting-ui-better-without-installing-any-browser-plugin-20171005t105642479z
categorysteemdev
json_metadata{"tags":["steemdev"],"app":"steemit/0.1"}
created2017-10-05 10:56:42
last_update2017-10-05 10:56:42
depth1
children3
last_payout2017-10-12 10:56:42
cashout_time1969-12-31 23:59:59
total_payout_value0.076 HBD
curator_payout_value0.024 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length29
author_reputation173,293,211,289,240
root_title"[Tool] Make posting UI better without any browser plugin"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id16,848,169
net_rshares41,490,767,568
author_curate_reward""
vote details (1)
@asbear ·
λ§žμŠ΅λ‹ˆλ‹€ 저뢄이 인증만 되면 μ¨λ³΄κ³ μ‹Άμ–΄ν•˜λŠ”λ° 아무도 검증을 μ•ˆν—€μ£Όμ‹œ κ²°κ΅­ μ•ˆμ“°μ‹œκ² μ£ .. ^^
properties (22)
authorasbear
permlinkre-yoon-re-asbear-tool-make-posting-ui-better-without-installing-any-browser-plugin-20171005t125404583z
categorysteemdev
json_metadata{"tags":["steemdev"],"app":"steemit/0.1"}
created2017-10-05 12:54:06
last_update2017-10-05 12:54:06
depth2
children2
last_payout2017-10-12 12:54:06
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length51
author_reputation76,617,948,082,616
root_title"[Tool] Make posting UI better without any browser plugin"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id16,856,461
net_rshares0
@segyepark ·
$0.70
ν•΄μ™Έ κ³ λž˜λΆ„κ»˜ λ°œκ΅΄λ˜μ„œ μ—„μ²­λ‚œ 보상을 λ°›κ³  μžˆλŠ”λ°μš”? γ…Žγ…Ž
이게 쑰금만 빨리 λ°œκ΅΄λ˜μ—ˆμ–΄λ„ ν•΄μ™Έ μœ μ €λ“€λ„ 많이 μ°Έμ—¬ν–ˆμ„κ±° 같은데 λ­”κ°€ 살짝 μ•„μ‰½λ„€μš”. κ·Έλž˜λ„ μ΄λŒ€λ‘œλ§Œ μ­‰ ν•˜μ‹œλ©΄ κ³§ ν•΄μ™ΈκΆŒ μ§„μΆœ κ°€λŠ₯ν•˜μ‹€κ±° κ°™μŠ΅λ‹ˆλ‹€ :)
πŸ‘  
properties (23)
authorsegyepark
permlinkre-asbear-re-yoon-re-asbear-tool-make-posting-ui-better-without-installing-any-browser-plugin-20171009t101425548z
categorysteemdev
json_metadata{"tags":["steemdev"],"app":"steemit/0.1"}
created2017-10-09 10:14:24
last_update2017-10-09 10:14:24
depth3
children1
last_payout2017-10-16 10:14:24
cashout_time1969-12-31 23:59:59
total_payout_value0.528 HBD
curator_payout_value0.175 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length120
author_reputation38,236,253,472,970
root_title"[Tool] Make posting UI better without any browser plugin"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id17,186,370
net_rshares286,581,693,483
author_curate_reward""
vote details (1)