- Part 1: 💻 Address Bar Code Editor Bookmarklet (841b)
- Part 2: 💻 Address Bar Code Editor Bookmarklet Part 2 (876b) - Keeping It Dark
- Part 3: 💻 Address Bar Code Editor Bookmarklet Part 3 (988b) - Toggle Horizontal-Vertical Views
+59b in this update to enable additional toggled views to include a full screen text editor view and full screen iframe view. Sometimes I want to run something in the editor in full screen so this makes the app a bit more usable. Sometimes I even pull this app out as a text editor and the iframe is in the way. So having the text editing part in full screen is useful as well.
I have mentioned this on twitter when I first shared this project, but I realized that I haven't credited the inspiration for this project in my blog. This started with xem's mini code editor, which was really cool. When I figured out how to run the HTML with Ctrl+Enter and run this in the address bar, I really got into it.
This is one of the reasons why I appreciate tiny code (code golfing, etc.). It's because apps are minimal and so it's really quick to understand and then build off of if you wanted. Starting off with barebones functionality allows you to have a minimal start and then allow you to enhance further. Xem's creations have inspired a lot of my projects as well as others' that I have seen.
Here's the code. Copy-paste this into your address bar to try it out. Save as a bookmark to use it anytime.
data:text/html,<title>code</title><link rel=icon href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 99"><text y="85" font-size="72">&%23128187;</text></svg>'><body id=b><textarea id=d spellcheck=false onkeypress=e=event;k=e.keyCode;(e.ctrlKey&&k==13)||k==10?f.srcdoc=d.value:0 style=resize:none><style>:root{color-scheme:dark}</style>%0d<p id=o></p>%0d<script>%0do.innerHTML = 0;%0d</script></textarea><iframe id=f></iframe><p id=p></p><script>h=D=0,d.onkeyup=d.onclick=n=>{clearTimeout(D),D=setTimeout(n=>{A=d.selectionStart,B=d.selectionEnd,V=d.value,E=V.substr(0,B).split`\n`,p.innerHTML=`<button onclick=b.className='mhqr'[++h%4]>H</button> Ln:${E.length}, Col:${E.pop().length+1}, ${A==B?"Pos:"+B:"Sel:"+(B-A)}, Len:${V.length}`},99)}</script><style>*{color-scheme:dark;box-sizing:border-box;margin:0}%23d,%23f{width:50%;height:100%;vertical-align:top}.h>%23d,.h>%23f{width:100%;height:50%}%23p{position:fixed;bottom:1;background:%23333}.h>%23p{bottom:50%}.q>%23d,.r>%23f{width:100%}.r>%23d,.q>%23f{display:none}Some potential next features:
Ctrl + SSave as html fileCtrl + GGo to lineCtrl + HSearch and replace
I have breached 1k characters for this projected. I'd say about 2k might be the actual limit but we'll see. For how little code we have and its usefulness for me is so great. It's easy to have this little set of code and run it anywhere and add more customization if you'd like. You could even add other starting template code if you like to quick-start your projects. You could reference a CDN library as well to try things out.
Until next time. I hope you find this useful!