Adam @ Bitscribe

Here’s a source code editor I wrote in javascript, inspired by CodePress. Feel free to snag and use in your application or modify to your needs. Syntax highlighting and indenting for Ruby is hardcoded, but it could easily be modified by swapping out ruby_syntax.js with your own class. I used Prototype just out of habit, but it could be factored out very easily - I just use it for a couple of simple things like Event.observe.

One thing that really struck me working on this is just how powerful javascript and DHTML have become. I mean, writing a programmer’s editor is hard, right? But I cranked this out in a few evenings. And yeah, I know it’s far from full-featured; but it really blew me away just how easy this was. The only part that was even mildly challenging was handling selections.

I’ve worked with a number of different display paradigms over the years. Early on I was doing character-based output, drawing little boxes and menus and so forth using the upper 127 ASCII line drawing characters. This was great because it was so easy, mostly because everything fit onto a grid.

Later I started working with graphics by manipulating the raw pixels. It took a pretty massive amount of time to do something as simple as make a button, let alone something complicated like a scrolling panel or tabs.

A few more years passed and now there were various sorts of GUI toolkits. I started with hideous, barely usable ones like Motif and the raw Win32 libs. Later I moved on to more enlightened toolkits like Qt and GTK. The box model they offered for packing widgets, coupled with some good visual design tools, made the process of building the display portion of your app pretty reasonable.

Still, it was difficult to mix freeform drawing like lines or shapes with the box-model widgets. And either way, it was just nowhere near the ease of working with those simple character-based displays. That’s the price of progress though, right?

Nope. Somehow - and I’m not sure how or when it happened - DHTML managed to evolve into a combination of the box model (for auto-adjusting layouts) and the canvas model (for freeform drawing). And somehow, working with it, I had a strange sense of deja-vu: working with DHTML is very pleasantly reminiscent of the good ol’ fashioned character grid from my old 80×24 text mode programs.

Maybe because, at it’s core, HTML really is just a bunch of characters. But it’s divided into container nodes that can easily be positioned however, including using box model stuff to get them to line up neatly and dynamically resize with their content. And then it’s like a canvas in that you’re free to position things however, breaking them out of the grid if you want. And then when I see the amazing things you can now do with inline SVG, all I can say is: the sky’s the limit.

Exploring variables visually with the Gyre console.

Ruby people don’t need a debugger, because our language is so incredibly elegant that we nevercreate any bugs, right?

Er, maybe not. It does seem like my code tends to work right the first time I run it a lot more with Rails, but this only causes me to tackle yet more complex problems. The tools offered by a traditional IDE environment, though such things are generally scorned by Rails types (and this is a vim user talking here), can be quite effective in certain situations.

Thus I’ve created Gyre, a visual debugger for Rails that runs in a web browser. It’s still very raw - in fine open source tradition, I’m releasing early, releasing often. But it does work, and I’ve already found it to be of use in tracking down gnarly issues in some of my own apps.