ICE Code Editor on Resize

‹prev | My Chain | next›

I had a look through some of the changes Mr Doob's code editor (which is now called htmleditor). Naturally, they're much nicer than mine. I hate that guy. But not really. He's awesome.

Anyhow, many of the changes involved the CodeMirror editor and the esprima JavaScript parser. I like both of those, but I think it best to stick with ACE code editor for 3D Game Programming for Kids—the error feedback (at least the default) is slightly more helpful for beginner coders.

One of the changes in which I am keenly interested is the refresh on resize approach. Mr.doob no longer updates the visualization layer when resizing. This seemingly obvious change has two advantages: fewer screen updates make for fewer screen artifacts and debug output remains in place with the JavaScript console is shown. I have suffered through both problems sporadically for months now without a good solution. This is why Mr.doob maintains awesome projects and I write books, I suppose.

Anyhow, I delete the resize handler from my fork:

window.addEventListener( 'resize', function ( event ) {
  clearTimeout( interval );
  interval = setTimeout( update, 300 );
} );

And, sure enough, I can open and close the JavaScript console without restarting the visualization:



I cannot believe that did not occur to me. Sigh.

Actual window resizing will not cause a visualization update. That is a relatively rare event and there is that big “Update” button on the screen that programmers can use to force a visualization update if needed.

There is another nifty addition to upstream—the sharing experience is much improved. Instead of putting a sharable URL in the address bar and hoping the user notices, Mr.doob has a popup that displays the URL. In the hopes that I can cherry pick most of this commit, I add the original repository to my local copy as remote “upstream”:

➜  code-editor git:(gamingjs) ✗ git remote add upstream git://github.com/mrdoob/htmleditor.git
➜  code-editor git:(gamingjs) ✗ git fetch upstream
remote: Counting objects: 85, done.
remote: Compressing objects: 100% (34/34), done.
remote: Total 72 (delta 44), reused 65 (delta 38)
Unpacking objects: 100% (72/72), done.
From git://github.com/mrdoob/htmleditor
 * [new branch]      master     -> upstream/master

But after cherry picking the appropriate commit, I find that I am out of luck. I moved all of my JavaScript into a library file whereas the original repository has everything, JavaScript and all, in index.html. Bother.

So I manually copy the code from the commit into my editor.js and eventually get:



That is actually pretty slick. I can Ctrl+C to copy that URL immediately and it works. I will have to add some instructions to make it more beginner friendly, but that is nice. I end tonight by removing some resize handling code in the popup. Ironically, it includes code to reposition the popup on resize. I replace it with code that simply removes the popup on resize. That seems reasonable behavior for something that is unlikely to happen often.

Tomorrow, I will pick back up incorporating this into a URL shortener. No one should have to share a link as long as: http://gamingjs.com/ice/#B/jZKxTsMwEIZ3nuKUpU6HuAWKEE0ZisSAxELzAo5zioMSX2QbWt4e4zRpWlWlWZy7//sy/HGaU/HznPJw3KRWmqp1YI1cRcq59onzUjSVLt82iaSGZ8ogJp828krHXiG9KEMNvlY7tJdUvpFkMCdhihOs5/wbwLcwYAcSVqBxCweVxUsPHYDETwCuatCwuBskfWlX0Faz+Wy/Cjxb9KPCumWTNQLuJNY1ageOAIVUQE6hSSYe5NM/VLQt6uIdrRUlsihD62Ae7b9zLry9FN71YXO0vh+c4kRY+ASm/IzzEMVLCHvOwaIbvDXlURyC46K6Dh5noUBJ2lKNSU0lGzElulA1i/+hMl/4VdAHNqLS/rIEevTPR88v—especially kids.


Day #667