Is Good Simple URL Shortening

‹prev | My Chain | next›

I copied the nifty code sharing feature in Mr.doob's code editor into the fork that I am using for 3D Game Programming for Kids. It is nice and slick looking:



But I am not sure that it enough for kids and beginners. For one, it would benefit a bit from instructional text. Second, it would be nice if there were an easy way to submit the very long URLs to a URL shortener. The latter is the more difficult problem so I will start with that first.

To date, the in-browser code-editor that I have kids/beginners use in the book is entirely self-contained inside an application cache. I could see a need for a significant backend if I were trying to build up a community around this. And a community might be nice—a bunch of beginners showing off new projects and encouraging each other. But community with kids is a tricky thing for numerous reasons. So if I can avoid backend infrastructure, then I will do so.

Unfortunately, most URL shortening services seem to require an API key which they use to help throttle usage from particular applications. That is not exactly conducive to an open source editor that anyone can use. I could run a simple node.js proxy service (or even roll my own URL shortener), but I hope to avoid that.

And the is.gd URL shortener seems like it will allow me to do just that. The sharing popup already encodes the contents of the editor (I'm using the ACE code editor) in the share-code popup:

var menuShare = function() {
  var el = document.createElement( 'li' );
  el.textContent = 'share';
  el.addEventListener( 'click', function ( event ) {
    var dom = document.createElement( 'input' );
    dom.value = 'http://gamingjs.com/ice/#B/' + encode( ace.getValue() );
    // ...
  });
};

While I am building up the DOM elements for the sharing popup, I can also add a link to is.gd:

    // ...
    var link = document.createElement( 'a' );
    link.href = 'http://is.gd/create.php?url=' + encodeURIComponent(dom.value);
    link.textContent = 'shorten';
    var shortener = document.createElement( 'div' );
    shortener.appendChild(link);
    // ...

Happily, that just works:



I am slowly internalizing the lesson from last night that the best code is that code never written. So, unless a significant reason comes along that might require that I have my own URL shortening service, I will be content to live with this solution.

I take a bit more time to make the popup as pretty and as informative as possible:



And then call it a night. Up tomorrow I think that I will explore sharing links with the code hidden by default or with a parameter. Hopefully most of my readers will be eager to show off their work without all that pesky code getting in the way.


Day #668