I made a Tiny Code Editor inspired by @MaximeEuziere's (Xem) Mini Code Editor. I got excited when I saw his implementation and realized that you could put the code into a bookmark and made some adjustments as well.
I made a Tiny Code Editor inspired by @MaximeEuziere 's Mini Code Editor. I got excited when I saw his implementation and realized that you could put the code into a bookmark. I made some adjustments as well. https://t.co/vYgicNOC1k pic.twitter.com/mY2JAzVBWu
— Lewis Nakao (@lewdev) August 30, 2021
Xem was impressively able to "code golf" this feature down to 62 bytes (characters). But I found it this tool useful for when I wanted to try new things or start new projects.
I was able to get the editor to have a dark theme and stretch both the editor and outputs vertically or horizontally. These additional features bloated the code to 300 bytes (chars), but it's much more usable. You can find both variations and others on my repo:
tiny-code-editor (GitHub repo)
data:text/html,
I have seen code that starts with data:text/html, where you can insert code into the address bar and instantly have a text editor and realized I could do this for the code editor! You can try it now by copying this code and pasting it into your address bar (tested on Chrome and Firefox only). You can also save the code in a bookmark to use it again.
data:text/html,<textarea oninput=f.srcdoc=value spellcheck=false></textarea><iframe id=f></iframe><style>html,body{height:100%}*{box-sizing:border-box;-moz-box-sizing:border-box;margin:0;vertical-align:top}textarea,iframe{width:100%;height:50%}textarea{resize:none;filter:invert(1)hue-rotate(180deg)}
Here's a really simple text editor you can instantly in your browser.
data:text/html,<html contenteditable>
Happy coding
There's much to learn with HTML, CSS, and JavaScript and at least recently, I'm looking for ways to try out new methods to coding and this will definitely help me get started on new projects, which has lead to some new projects recently and I hope it does for you too.
If you have code snippets you think would be useful in a bookmark, share them with me in the comments.