Smalltalk Labs

Small status update on my Smalltalk & Newspeak projects

Mon, 13 Dec 2010 11:01:22 +0100

I don’t have time right now to keep working on my Smalltalk & Newspeak projects because one of my commercial software projects has reached beta status and I’m trying to get it ready for release in January (bills sadly don’t pay themselves).

I will however work full time on my Newspeak and Smalltalk projects over the holidays, between Christmas and New Year’s which should allow me to get a lot done.

The current plan is to release an update to SL Browser which fixes a few annoyances and improves the code editor and an update for SLBfb which fixes a few annoyances but doesn’t introduce anything new, add Squeak and Newspeak support to SLBfb and release an initial version of the interactive Newspeak tutorial, Speaktorial. There is still a bug in Newspeak which keeps me from putting the code evaluation aspect into Speaktorial, but instead I’ll add a few screencasts to the tutorial and fake Newspeak code evaluation with JavaScript for now. I think the combination of a text tutorial and short screencast videos scattered in the text can be pretty good if it’s done right, we’ll see how it works out. Speaktorial will also make use of SLBfb where it makes sense.

Smalltalk Labs Browser for blogs released!

Sat, 13 Nov 2010 04:06:32 +0100

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.

SLBfb in action at Pharocasts

Tue, 02 Nov 2010 22:17:13 +0100

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.

Smalltalk Labs Browser for blogs preview video

Thu, 28 Oct 2010 15:50:58 +0200

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.

Smalltalk Labs Browser for blogs

Wed, 27 Oct 2010 01:30:03 +0200

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.

Render static HTML with Seaside

Sun, 24 Oct 2010 04:12:56 +0200

Render static HTML with Seaside:

Found this on the Seaside mailing list. If you want to generate html code but don’t want to use it to drive a Seaside website, to save it as a file for example, you can easily do this and still use all the cool html brushes Seaside provides to write the html in Smalltalk.

Print or inspect the code in a Workspace and you’ll get a ByteString with the html code.

http://gist.github.com/642973

Search as you type with Seaside & jQuery example code

Sat, 23 Oct 2010 15:51:00 +0200

Before I implemented search as you type filtering in Smalltalk Labs Browser, I wrote a little test app to try it out. I had done something like this before but that was a year ago so I wasn’t sure if I still knew how to do it :)

The code for this test app is very short so I thought I’d share it so that you can easily see how to integrate search as you type into your own Seaside apps, without having to browse through the Smalltalk Labs Browser code.

Just create a new Seaside application and replace the renderContentOn: code with this snippet. This snippet makes use of jQuery so you will have to add the JQDeployment or JQDevelopment library to your application with the /config tool to make it work. I wrote this using Pharo so I’m not sure if the method asWords I use to create the test data is available in all Smalltalk implementations, it probably only works in Squeak and Pharo.

http://gist.github.com/642173

Smalltalk Labs Browser first version released!

Sat, 23 Oct 2010 01:26:00 +0200

Smalltalk Labs Browser first version released!:

I spent the last week fixing all the bugs I could find in SL-Browser, my web based code browser for the Seaside web framework, and now it’s finally here, the first release is available for download for Pharo and Squeak.. NOW! ^^ I call it version 1.0 beta since I was the only tester, there might still be bugs I just never encountered myself.

As this is my first real Smalltalk project it might not be that good yet but I hope people will find it useful and I am going to improve it as I learn more about Smalltalk and Seaside.

Oh no, a new blog! But it's about Smalltalk (and Newspeak).

Fri, 22 Oct 2010 07:24:48 +0200

The reason

I never had good experiences with blogs. I never update them, I’m way too lazy for that. But I also want to document my experience with learning and using the Smalltalk and Newspeak programming languages, so I will try again. I will fail, there’s no question about that, but that’s half the fun, isn’t it?

The path

“I tried out Squeak before, many years ago, but I was quickly turned off by… Well, everything I guess. Nowadays it looks a lot better.”

“Gilad Bracha’s vision for Newspeak and software development in general is just too cool to miss out on.”

I started learning Smalltalk about six months ago (has it been really that long?). I tried out Squeak before, many years ago, but I was quickly turned off by… Well, everything I guess. Nowadays it looks a lot better. Since I did a lot of Objective-C and Ruby development I always wanted to check out Smalltalk which heavily influenced those languages and Newspeak, which is kind of a successor to Smalltalk, intrigued me. Gilad Bracha’s vision for Newspeak and software development in general is just too cool to miss out on.

I didn’t have much time to do Smalltalk and Newspeak stuff since I’m always swamped with work on other projects, but in the little free time I had I started reading through the Newspeak tutorial, the Pharo and Squeak by Example books and then watched a few screencasts from Smalltalk Television and Pharocasts. There was a comment on one of the Pharocast videos that asked for someone to record his voice for the screencasts. I thought why not use this as a neat way to both help out and learn more about Smalltalk, so from then on I did the voice for all the Pharocast episodes and also contributed two screencasts myself.

“I was very intrigued by the idea of editing a website’s code from within the browser.”

After writing only a very tiny amount of Smalltalk code and mainly trying out the different Smalltalk implementations, I started my first real Smalltalk project about a month ago, for the Seaside web framework using Pharo. Seaside comes with a code browser that lets you edit your website’s code from within the web browser, but it’s missing a lot of functionality and since it doesn’t make use of AJAX, every click reloads the whole website which is annoying since this also resets the scroll position in all the lists. I was very intrigued by the idea of editing a website’s code from within the browser.

I had already started creating a web based interactive tutorial for Newspeak, called Speaktorial, where I have to create development tools as JavaScript widgets, so doing the same thing for Seaside fits together nicely since what I learn while doing this can be applied to both projects.

Smalltalk Labs Browser

Which is why I started writing a web based code browser for Seaside, called Smalltalk Labs Browser, or SL-Browser for short. Since I wanted to write this mainly to learn Smalltalk, I wrote it completely from scratch instead of basing it on the browser that comes with Seaside. It was very tricky to figure out how to do this, being completely new to Smalltalk and all (and my experience with JavaScript is also limited), but I learned a lot of stuff along the way by browsing through the Pharo and Seaside code, so it was well worth the effort. Sometimes it was really frustrating, there was absolutely no documentation on how to use JQuery together with Seaside for example so I had to do a lot of trial & error.

I did manage to pull it off though and the first beta release is going to be available for download later today. There’s already a huge page of information and an overview and tutorial video, available on the projects site (in the menu to the left).

What I learned about Smalltalk this far

“It’s really hard for me now to use a language that doesn’t give me this kind of power”

I love the Objective-C syntax so the Smalltalk syntax is a natural fit for me since Smalltalk just removes the square brackets around methods calls and terminates a line with a dot instead of a semi-colon.

I usually write code in text editors instead of IDEs. XCode is the only IDE I ever liked, NetBeans, IntelliJ Idea and Eclipse always turn me off after a while because they are so huge and slow even though they can be very, very helpful. The more I used the Squeak/Pharo tools though, the more I started to like them. The refactoring is awesome and the ability to always be able to look up an object’s methods and the method’s implementation is very helpful. And Squeak/Pharo always starts in under a second thanks to being image based and since I can save the image where I left off, it’s just as quick as opening a text editor on some file but gives me all the power of an IDE and more.

Being able to change the tools you use so easily is something very powerful. The first thing I did in Smalltalk after only about half an hour of reading the Squeak By Example book was implementing Windows 7 style window docking (move a window to the left, maximize the window so that it fills the left half of the screen, same for the right side..). I think it took me 10 minutes to do this and that included figuring out how Squeak handles windows, the inspector tool was very handy for that.

Then, yesterday, I wanted to see a version by version comparison of a monticello package (diff of version 1 to version 2, 2 to 3, 3 to 4 and so on) but I wasn’t able to find a tool that did that. In just five lines of Smalltalk code, I quickly wrote a script that did the job by recombining already available tools and objects.

It’s really hard for me now to use a language that doesn’t give me this kind of power :)