martes, 27 de septiembre de 2011

Bihain de uindou

Demasiadas veces mirando por su ventana y quedándome en blanco. veo
que algo se mueve ahé dentro, y veo la ventana mirándome, y la veo a
ella mirandome a través de la ventana. A veces, incluso me veo a mi a
través de ella a través de la ventana.

Y aún no sé qué decir (me y le). Y te.

Señalar con el dedo y ver el nombre en verde.
Clicar. Cerrar. Clicar. Cerrar. Y repetir.

sábado, 17 de septiembre de 2011

Amber language (former jtalk), digging deeper


Lots of changes have happened in jtalk world since last week.
  • Jtalk is now Amber. The project has changed its name when the 0.9 release happened. That means that the repo is now different, and the website too.
  • JQuery bindings have been removed from the system. Now we can access javascript objects directly, and use asJQuery in the same way, so there's no drawback, only the way to deal with jquery is more smalltalkish. Counter new appendToJQuery: 'body' asJQuery works perfectly, so no problem.
Creating functions
If you want to know a bit more on amber, you have to keep in mind that it's a smalltalk, so you can explore everything in your IDE. Let's try to find out a bit more on how the compilation from smalltalk to js works. This will allow us to debug our in a lower level than usual, and find glitches in our codes, or detect where our closure is missing the variables (when interfacing with js, sometimes it's useful to see the whole js code, and make conclusions on js).

Let's create a new class Foo with a method that gets a block (callback) and executes it. Now, to find out how it's compiled, we'll make amber print the compiled source of the method:
(Foo methodDictionary at: 'get:') fn compiledSource "print it".

If we print it, the result will be the js source of the method



You can try variations like returning explicit values, try to pass instVars to the closure, and see what is the translation to js. This helps sometimes to find out your way.

Can I inspect?
Inspector is there, but for the moment, it's in very early stage.

Debugger
Debugger is also there, also in early development. You can see the stacktrace, and inspect the methods, but not changing values and so.

NodeJS

We can use amber for the server side, running the generated javascript on node.js. Due to the hability of Amber to interoperate with plain js, we can use a shitload of libraries from amber. Here follow a couple of examples of amber on node.js

Server
Nicolas Petton wrote a fileserver meant to be used in the node.js side. This allows us to commit changes to our files transparently without the need of webdav,python(see last post), or any external server. It's Amber all way down.

The usage is fairly easy. Just cd to the root amber directory and run ./bin/server, that will run ./server/FileServer* things.

IRCBot
Trying the node.js part of amber, we can try to build a small program, and as no programming language is complete unless it has a IRC bot in it, let's solve this issue:) Btw, I hacked a couple of emacs functions to deal with st files a bit better.

domingo, 11 de septiembre de 2011

can your editor^W OS do this?



Here is an emacs feature that it's hard to believe until you see it working.

m-x butterfly


Unbelievable, no?

Well, let's link this amazing functionality to the gesturing strokes-mode.

m-x strokes-mode
m-x strokes-global-set-stroke


Then, click in the buffer that appeared, and draw(drag) a circle with your mouse. when you end, press the right button.

now emacs will ask you for a command. Now it's the butterfly turn. write 'butterfly'.

Ok, now you have configured and amazing mouse gesture that will flip bits on your hard drive only by reproducing the figure (circle) you just did before.

in any buffer, press shift and draw a circle dragging the second mouse button (mouse wheel probably).

ENJOY!

PS: I've changed the shortcut from the second button to first, and now I can use my tablet to manage emacs. And here's another great thing of the ubiquity of emacs: You can use it to manage things related to irc,jabber,mail,text editing, playlist managing and even pdf reading. neat.

viernes, 9 de septiembre de 2011

emacs and smalltalk, a bit closer

Today I've been hacking around with jtalk. Implementing something for the node.js backend means that probably you'll be using your editor of choice.

I've downloaded paolo bonzini's smalltalk-mode.el

I've hacked some shortcuts to navigate through classes using emacs narrowing feature.

Here's the hack:

jueves, 8 de septiembre de 2011

HN Frenzy

HackerNews is not in its greatest moments lately, but today, lots of diferent great articles/links appeared. It's a bit overflow of info in just one moment, you open a handful of links and you face.



Not in HN but a tiny example of how cool is the project that's driving some of smalltalkers to sleep 4 hours per night.Jtalk. Credits on that go to Bromagosa

lunes, 5 de septiembre de 2011

Routing tutorials in rails 2.X

For me, one of the most confusing things in Rails is routing. The DSL, all those automagic methods, abuse of method_missing (it's starting to feel usual), and RESTful conventions, mixed with namespacing,

I've found three detailed tutorials (well, series of tutorials) that seem to explain all what's needed to get into the routing thing. Here are the links to

under-the-hood-rails-routing-dsl
under-the-hood-route-recognition-in-rails
under-the-hood-route-generation-in-rails

A couple of articles on extending routing system
monkey-patching-rails-extending-routes-1
monkey-patching-rails-extending-routes-2

Here's the starting point of a super-detailed explanation and hands on tutorial on rails 2.X routing.

beginners-tutorial-routing-in-rails-20-with-rest-part-1-of-n

There are 6 parts in this last tutorial.

Btw, both blogs seem good sources of information. Good explanation on different topics, always quite detailed, and well written. For example, here's a series of posts on AJAX (from the bottom up).

Bye!

domingo, 4 de septiembre de 2011

Jtalk tutorial. (Valid until the end of this week)





TL;DR
write this in a workspace, select, and click 'DoIt'. Instant reward.
Counter new appendToJQuery: 'body' asJQuery




You know Smalltalk, it is an object oriented programming language developed at Xerox PARC during the 70's by Alan Kay, Dan Ingalls and other brillant guys. It is known that Kay, and probably other members of the team, was born from the leg of Zeus. Jtalk is an implementation of Smalltalk that runs on top of JavaScript, developed by Nicolas Petton. It allows the use of Smalltalk for client side applications. Even more, Jtalk allows you to use the famous IDE from the Smalltalk world directly in your browser. It compiles to JavaScript, and follows Pharo, a fork of the Squeak Smalltalk implementation.

The canonical "Hello World" looks like this:


You create a subclass of Widget, and you implement the #renderOn: method. Jtalk will pass an HtmlCanvas instance that we call html in our code. This object provides some "brushes" allowing to "paint" into the html canvas by message passing. We created a div element by sending the div message to html. The div element has it's class and id attributes defined, and it contains a h1 element. Everything is performed by passing messages to the html object. Those familiar with the Seaside web framework will recognize the html canvas. After the HelloWorld class is
defined, you can see it in the browser by appending an instance to the page's body using JQuery:

HelloWorld new appendToJQuery: 'body' asJQuery


A JQuery object is created by passing the #asJQuery message to the string object 'body'. Then we pass the #append message to the JQuery object, with an instance of HelloWorld as argument. You can evaluate this expression in the Workspace and see it in action.

Another way to do the same is going to JQuery class, and send the #body message.

Where is the Counter?
If you know Seaside you'll want to look at the Counter example. I will reproduce the example from the Jtalk website, which you can find also with the IDE's class browser. It is a good example because it shows how you can write stateful applications in Samalltalk, by simply using its object system as you would do in any application:

As in Seaside, the button definition is beautiful. Since the object itself holds the state of the application, you simply bind a Smalltlak code block to the onclick event, and Jtalk will take it from there.

Interacting with the DOM with JQuery and JS evaluation

As you can see, there is JQuery support provided by the JQuery class. We just used it for appending a piece of html to the body element of our page. There is support for a good part of the JQuery api, as you can see by browsing the methods implemented in the JQuery class. You can do DOM insertion, css manipulation, event handling, etc. If something you like is not implemented, you can evaluate JS code by enclosing it with the "<" and ">" characters. A wrapper for ajax is also available:



Here we create an Ajax object and then we send some messages to it. As you can see, we use Samlltalk blocks as callbacks, this blocks are compiled to JavaScript anonymous functions for execution. There are other messages availables in an Ajax object, like #onCompleteDo. Dictionary like syntax is provided for passing additional settings to the Ajax object:



As test, I wrote a small HTTP service interfacing a CouchDb instance. I did it in Python using the small but cool Flask framework:



Please consider it almost pseudo code. You can note its very simple stuff. We serve the Jtalk DE at "/", and we provide access to the database in "/get/<doc_id>". Now, we could build a small wrapper for accessing this service:



We provide a single method called get:onSuccess: allowing the client code to request a document and executing a callback block on the resulting data. Smalltalk blocks are constructed using brackets, and they are like anonymous functions. Temporary named arguments are declared with the :argName, and after the bar you can write any Smalltalk statement. Our onSuccessDo callback takes the data received form the Ajax request as argument. This data comes in JSON format, so we
use an instance of the Smalltalk object to translate this to a Jtalk object, and then we pass that to the block provided by the client code, which we called "aBlock".

An experiment using Rasta.js for data persistence

Rasta.js
is a very simple key/value storage service. It provides a REST API and a client library:

<script src="http://rastajs.errorjs.com/rasta.min.js" type="text/javascript">

We can use this for looking at how can we delegate execution to a JavaScript object and also for providing some data persistence to a static website.



That was easy. The Rasta class has one instance variable, called "rasta". Instance attributes are private in Smalltalk, you have to implement methods if you want to access them from the outside. But in this case, our rasta attribute is for internal use, we don't need the stinky accessors. The Rasta.js API provides two simple JS functions:

Rasta.get('age', function(val){
/* val == '100' */
})

Rasta.set('age','100', function(){
/* */
})
Since they use an upper cased name, and in Smalltalk those are reserved for classes, we have to use a special trick. Jtalk will get confused if you try to evaluate "Rasta" directly. This not happens with lower case JS names, which are available directly in the Jtalk IDE (you can try
console log: 'fooBar' for an example in the Workspace.) So, we will use our "rasta" instance attribute for storing the JS object, we use the <jsobject> notation for getting a sort of proxy object which will delegate messages in the JS one, and we can access it under the "rasta"
name in our messages. Now we can use the Rasta.js KISS service for our data storage:
database := Rasta new.
database get: 'aKey' onSuccess: [ :data | 'div#container' asJQuery append: data ].

Ok, usualy you will want to format the data. We can wrap this into a Widget subclass and implement a #renderOn: method. At this point we can put all these features together in our mind: you get a nice programming environment which promotes good code practices like layers and concerns separation, clean and readable syntax, testing facilities, and who knows
what, with an IDE accessible directly from the browser.

On code persistence

I will just say it. If you press "F5" (or "r" if you are a hacker) you will lose your code. The IDE features a "Commit category" button, which sends a PUT request with the compiled ST in the body. But as Jtalk is focused in client side coding, it is your responsability to handle the
request and save the code into the "js/" folder, next to the Jtalk library. I will show you the "almost pseudo code" thing again, with Flask and Python:



Note that I used the secure_filename from werkzeug to sanitize the data, since I use it to build the path. You don't want to allow write to your .zshrc or similar.

Concluding

Jtalk can help you to write heavy client side applications by taking advantage of the ancient wisdom from the Smalltalk world. It still has some sharp edges but it is there for you to try it. Allows you to write stateful client code easily, and to port known and tested patterns to
the web browser, for great justice. And there is a plus. Jtalk is part of a legendary story, the Smalltalk one. After all, I have told you, these guys came from the leg of a god.

A moving target

In the couple of days that Rodrigo Bistolfi and me have been experimenting with Jtalk and writing this article (In fact he wrote most of the article), a bunch of things changed already, or are going to change shortly. For example, Capitalized Javascript objects are parsed now without problems in Jtalk. On the JQuery side, Nicolas Petton recently said that JQuery binding is going to disappear from jtalk bundle. It seems we'll be able to fetch DOM nodes directly with jtalk. So better be up to date with the jtalk git repo, because jtalk is moving fast.

Btw, there's a lot more related to Jtalk. Goran Krampe wrote jtalkc, that compiles jtalk code to js able to run in node.js. I haven't digged on that yet, but seems it also opens a shitload of possibilities... :)

Cya!

jueves, 1 de septiembre de 2011

more git workflows. Getting closer to sanity

Toady, a new article of git workflows appeared in HN. The nice thing of it is that at my workplace, we use exactly the same workflow. I just post it here for future reference

And now that we're at it, I link another git workflow related post that talks about merge --squash. A nice thing to make your history cleaner

Btw, I recently discovered a couple of interesting git man pages: gittutorial and gitworkflows. Interesting information there too.