💻 Address Bar Code Editor Bookmarklet Part 2 (876b) - Keeping it dark

#README.md

💻 Address Bar Code Editor Bookmarklet Part 2 (876b) - Keeping It Dark

Part 1: 💻 Address Bar Code Editor Bookmarklet (841b)

I just learned about an easy way to enable "Dark Mode" on any web page with:

:root { color-scheme:dark; }

I initially used filter:invert( which was okay, but it also inverted the colors in the emojis if you used any. And perhaps it was a bit harsh on the eyes given that it made the background black. This method gives you a lighter gray background color which gives less contrast with the white text. This addition has increased my code by 35b but the app weighs still less than 1kb (841b) so I'm happy. I'm all for new features, especially when I was complaining to myself when using the app in the dark with a bright screen. I could lower the brightness of my screen, but I just wanted the app to be dark to begin with and I was able to accomplish this easily with this line of code.

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="1em" font-size="72">&%23128187;</text></svg>'><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 style=position:fixed;bottom:1;background:%23333></p><script>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=`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}textarea,iframe{width:50%;height:100%;vertical-align:top}

Copy paste the above code into a bookmark or address bar to try it out!

🆕 Updates

• Dark mode for the whole screen, not just the left-half.
• Includes dark mode code within the starting code template.

📱 App Overview

• Simple HTML code editor that runs in your address bar (a bookmarklet)!
• Ctrl + Enter runs the code.
• Starting template code includes dark mode which I use when starting a new app.
• Display the current cursor line, column, position, selected length, and length of entire code base.
• Favicon uses an emoji.

I have used this app on daily basis to quickly create small apps which sometimes turn into bigger ones. Especially when I come across a JSON data set that I want to analyze or extract to form a subset of data, I copy-paste that data into the app and manipulate the code to output what I want from it.

For example, I was looking for dirty words for alpha-numeric serial numbers. I only cared about words with 3 letters or less, so I found a dirty-word list and extracted the 3-letter words. There was also additional information about each word, but I only extracted the words. I didn't even save the app I created for it because that's all I needed.

I hope you find this useful as I have. To me, this is a great way to very quickly learn and experiment with code, and also turn ideas into apps.