Smalltalk Labs

Smalltalk Labs Browser for blogs is available…. NOW!

http://slbrowserfb.appspot.com interactive installation instructions are at the very bottom (click on “configuration”).

It’s free and open source, licensed under the Apache License Version 2.0 (both the client and the server). I had originally planned to release this under the MIT license but the Apache License was a better fit for reasons too numerous to name here.

You can try it out right here, just click on one of these classes (if you use a WebKit or Mozilla web browser that is): ByteString, SmallInteger, OrderedCollection. You can move the window around by dragging the title bar, or just let the auto positioning do it’s job which always tries to center the window over the clicked class name while not going over the window/document edges.

If you click on a class name with a web browser not supported by Smalltalk Labs Browser for blogs (let’s just call it slbrowserfb or SLBfb), or if you’re viewing the blog post in an RSS reader or on Planet Smalltalk, you are directed to the SLBfb website which then displays the class instead. You can try this by right clicking and choosing “open in new tab” on one of the class names, when doing that the code browser doesn’t open up. This was just a quick hack, there can be done a lot more with the layout by adding a few more interactive/dynamic elements here and there, but I think it’s pretty neat already.

This is only the beginning, at the moment there’s a lot left to be desired although initial reactions were quite positive. Next up is making the window resizable and providing a public API so that you can better integrate it with your blog’s / website’s design and hook into all the events to modify the functionality. I hope that as soon as the design can be easily changed, people will contribute some better looking default designs to the project as I’m not a designer and can only do so much (although IMHO it looks quite good like it is, but taste differs). The design is completely done in CSS 3, no images, so it’s modifiable completely without having to use an image editor.

One last thing and then I’m off. This is the first release so I’m the only one who tested it, aside from the pre-release that was available on Pharocasts. I advise you that if you include this on your website, try it out thoroughly to see if it messes up your website’s design in any way. It shouldn’t, it didn’t in my tests, but I might have missed something. The widget is sandboxed in an iframe so that outside CSS doesn’t mess it’s design up (the pre-release version wasn’t, so Pharocasts’ design changed the fonts used), the CSS is prefixed with slb_ and the JavaScript is namespaced with SLB, so there should be no clashes. JavaScript doesn’t technically have namespace support but there’s a neat trick to tack it on. Also, at the moment if there should be an error when communicating with the database server (timeout, etc.), SLBfb gets stuck. This will be fixed soon, probably tomorrow.

I’ve worked over the weekend to get a pre-release version of Smalltalk Labs Browser for blogs (I should really have chosen a shorter name for this one although really long product names are kind of funny) ready, exclusively for the newest episode of Pharocasts.

Head on over there now with a WebKit or Mozilla powered browser if you’d like to play around with it: http://www.pharocasts.com/2010/11/lightsout-game.html

If you use an unsupported browser, you won’t even notice that SLBfb is there, because then the class names that would usually be clickable to open the browser are replaced with pure text. This means if you put this on your website or blog you don’t have to tell your readers that it only works in WebKit and Mozilla browsers, they won’t even notice it’s there if their browser isn’t supported. I think that’s a rather nice solution. I might add support for Opera later on.

The design changed a bit since the last video I posted. I removed the area at the top that displayed the class comment so that there is more space for the list, which now holds the class comment, class definition, instance and class methods.

You can click on “hide list” and the list slides out of the way so that the full view space can be used to browse code. The public release version will probably allow you to move around in the list by using your keyboard in this view and additionally I might display small clickable controls to do that without the keyboard, so that even in full code view you can switch to the next or previous method.

This Pharocasts exclusive pre-release version doesn’t yet communicate with a backend server which holds all the source code for Pharo and other Smalltalks, that part I got only finished today. Thanks to the awesomeness that is Google App Engine, I barely had to do write any code which is nice ^^

You’ll be able to add this to your own blog (or any kind of website) very soon, probably even tomorrow. As always, never believe release dates when they come from me or any programmer for that matter, but it should be ready tomorrow. It works on most popular free blog hosts, including Tumblr and Blogger, the only requirement is that you are able to include custom JavaScript in your blog or website’s theme. SLBfb itself is hosted on Google servers so it should always be blazingly fast to load. Gzipped it’s only a bit over 1 kb in size, 6 kb uncompressed. Adding this to your website is so easy a two year old could do it although I’m sure I’ll manage to make the instructions look seriously complicated (it’s a gift).

I had wanted to make jQuery an optional requirement but since then I’ve used it for so many parts of SLBfb that making jQuery optional isn’t really that good a decision anymore. But I made sure that if you use some other JavaScript framework already, jQuery won’t interfere with it. jQuery is served from Google’s servers and cached in the user’s browser. Most websites do that now and this means that usually, jQuery does not have to be downloaded more than once so this doesn’t really add to the page size since people usually already have jQuery cached from visiting some other website in the past. So all in all, even though jQuery is now a requirement, it doesn’t really matter and you can regard it as a non-issue.

If you have any issues with the pre-release version on Pharocasts or have suggestions for improvement or additional features, feel free to comment here or send me a Tweet @HaiColon or an email, HaiColon at gmail dot com.

This video shows how Smalltalk Labs Browser for blogs opens up when you click on a Smalltalk class in a blog post.

The animations use jQuery so you won’t see them if you don’t add jQuery to your blog, everything will be displayed instantly then.

The class loading is simulated, I haven’t written the backend on Google App Engine for that yet. Syntax highlighting isn’t shown here because it’s a pain to use it while working on the code since Google Chrome has very strict local file JavaScript security settings and the syntax plugin for jQuery loads JavaScript on demand to keep the size as small as possible.

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.