Smalltalk Labs

I thought it would be cool if a reader could click on any Smalltalk class I mention in a blog post and then a mini version of my Smalltalk Labs browser would pop up as a floating div and display this class for him so that he can browse the docs or the methods and hopefully understand my blog post better, without the need to have a Smalltalk image at hand. Could be pretty handy for tutorials too. Well, I started working on it right away, which means today :)

Here’s a first screenshot:

(The design and layout is subject to change, the class/instance method selector is missing and I’ll have to put the displayed code’s copyright and License info somewhere, probably as a hyperlink to the license)

You’ll be able to use this on any blog, it’s a JavaScript widget so you don’t need to use a blog written in Seaside. I’ll probably provide instructions on how to add this to Tumblr, Wordpress and Blogger.

It will probably take about a week (or longer if something else comes in between) before this is ready for use. I already got pretty far today though.

How it’s done

(Unless I change my mind about an implementation detail of course ^^)

I will have a webservice running on Google App Engine (yay free hosting!) which has all the standard Smalltalk classes and some popular libraries in a database, which are created beforehand by a Smalltalk script.

The browser widget connects to this service and then fetches all the information about a class it needs (method names, method code, class doc) as JSON and then displays it.

If you want to use the browser for a class that is not in the database, when you write a blog about your own projects for example, you can add this class easily to the browser as JSON, only for your blog. You don’t have to write this JSON code yourself, I’ll provide a Smalltalk class that outputs the necessary code that you then only need to copy and paste into your blog. You’ll probably just do something like this in a Workspace:

SLBrowserForBlogs convertClasses: #('MyOwnClass' 'MyOtherClass')

At first the database will have only Pharo classes, then I’ll add Squeak and other Smalltalks where the license permits code redistribution (meaning no commercial smalltalks). Newspeak should work too.

I’m not yet sure how you will use the browser in a blog post. You’ll probably use an html tag like

<span class="slbrowser squeak">ByteString</span>

which then gets automatically turned into a clickable link that opens the browser on the ByteString class of Squeak Smalltalk, positioned just above the link.

The syntax highlighting is done through a jQuery plugin right now. Adding this to your blog will be optional as some people might use a different JavaScript framework on their blog (now why would you do that? ^^). Maybe I’ll even do the syntax highlighting server side, we’ll see, both options have their upsides and downsides.