dira ⋅ geek ⋅ girl

GMap_to_static: one-click static maps creation

2010-06-01T12:16:22Z

GMap_to_static is a bookmarklet for creating a static map that looks just like a given dynamic Google Map. It is useful when you want to embed a Google Map as a ligthweight image, not as a full frame.

Note: In early 2011 this tool stopped working, as more aggressive minification of the map information hid the essential properties used by the algorithm.

Go to ~~dira.ro/code/GMap-to-static to install it and~~ github to watch the project.

Here’s how it works:

Why I wanted it

In order to create a Static Map image, you need the coordinates of all your markers and paths.

I already had a map with a lot of nice colorful markers spread across South America. But there is no tool to export it as a static map, so I was left with manually getting the coordinates of each marker… or writing a tool to get them.

I boldly chose the “write a tool” option.

But it’s not a piece of cake

The good news is that calling window.gApplication.getMap() in a Google Maps page will return the current map.

The bad news is that most of its properties and functions have been minified to cruel one or two-letter identifiers. So, except getBounds, getCenter and some conversion functions, there are no recognizable names in sight.

Enthusiastically digging through the tree of minified JS properties, I found out that the markers are minified too, but only partially. They still have some typical functions, like infoWindow and latlng, exposed fullname.

Quite a handy discovery, but relying on a path like map.Kd.St[0] is not a long-term solution. The path will probably change each time Google Maps is deployed.

Luckily, backtracking was invented for this kind of tasks. So, I’m searching the entire map object tree, looking for properties that “quack” like a marker. Finders, keepers!

Once the secret of markers is exposed, a similar strategy can be applied to paths and shapes. They too quack in a specific way, as they are the only ones having the function getVertex. The difference is that paths have the property name, while shapes don’t. ~~However, shapes are not yet supported by the Static Maps API, so only their contour is rendered in the static image.~~

Guessing the zoom level

Another property that is minified is the zoom level. Unfortunately, it is just a number, so the quack-based detection does not really work to find it.

I observed that the map’s longitude span (in degrees) and its width (in pixels) are proportional within the same zoom level (thank you rectangular projection!).

When zoom = 3, for example, longitude_span.map_width/ ~= 0.175 for any Google Map.

Even more, for each increment in the zoom level, the longitude span is multiplied by 2.

Therefore, an easy formula can be created to compute the zoom for a map:

zoom = 3 + log2(0.175 * map_width / longitude_span)

Viewport optimization

The size of the static map’s URL is limited to 2048 characters. This means that we should strive not to put unused information in it. :)

This is why I optimized the URL generation by including only the markers and the path segments that are actually visible in the current viewport and left out the others.

Also, the algorithm starts by trying to include as much precision in the coordinates as appropriate for the zoom level, and decreases the precision if the resulting URL is too long.

Limitations

the map width and height are limited by the Static Maps API to 640
the URL size is limited to 2048 characters. This basically means that maps with complicated paths (such as those of Directions for long distances) cannot be made static as the URL would be too big.
the map type for the static map is the default one: roadmap. If you want a different kind of map, you can change the maptype parameter from roadmap to satellite, terrain or hybrid.

Conclusion

GMap_to_static is one of the most challenging and rewarding pet projects I created. Using nice algorithms and playing with logarithms reminds me of the high-school days. And being able to easily generate static maps is wonderful (and addictive, beware!).

Heroku, S3, canvas and the Security Error of doom

2011-10-17T12:17:14Z

Let’s say you have a nice little project, involving Heroku, S3 and <canvas>. It works like a charm… that is, until you need to do something totally crazy. Such as, stitching some of your images together in a canvas and uploading the result to your application. That should be easy, right? But… browsers throw a security error when you do it, and you find out that you cannot access the data in a canvas that contains images loaded from a different domain.

Update: In September 2012, Amazon added CORS support for S3. See more about how this helps.

Enter postMessage

Cross-document messaging, represented by postMessage, a little-known hero of the browser world, comes to the rescue. It allows to send messages to other windows in the current browser, and receive messages (asynchronously). It works in all modern browsers.

The sender specifies the recipient <window> and domain, and the message as a string. The receiver can see, for each message, from what domain it comes, and take into account only the trusted ones.

How does this help with image loading?

You create an HTML file that will act as a proxy loader, and upload it on S3, next to the images. The proxy’s job is to receive the URL of an image, and return that image serialized as a string.

The application commands, via postMessage: "load /image_path". The proxy, being on the same domain as the image, loads it without any restriction, and replies: "loaded /image_path, here is it, serialized". Now the application can create a new image from the serialization, and the image’s origin will be the application’s domain, not S3.

The good news is, you don’t have to create the proxy or image loading handlers by yourself. I already wrote that code so you can steal my shiny implementation. Check out the live demo to see it in action.

In conclusion

postMessage saves the day and, with a few lines of code, you can get rid of the Same Origin Browser Security error. You can load your images from S3, process then in a <canvas>, and then access the resulting pixels, save the canvas as an image, or whatever else you fancy.

I’ve put the full working code for the demo on github. Let me know if it helps you and, if you have any questions or suggestions, drop me a note to @dira_geek_girl on twitter.

P.S.

This code is extracted from Tzigla, a lovely collaborative art project with tiles and pixel art. You should definitely make some tiles there, it’s pretty fun.

OmniAuth strategy for everything else

2010-11-30T12:24:22Z

OmniAuth makes it incredibly easy to authenticate users using an extensive list of external providers. But, what about using a provider that it does not support out of the box - let's say, a PHP forum?

I had to authenticate users from Pixelation into Tzigla, a Rails app that already used OmniAuth with Facebook and Twitter. So, I wrote a custom OmniAuth strategy which, in collaboration with a tiny PHP script on the Pixelation server, made this possible.

I'll first explain a bit about how OmniAuth works and then I'll show you the actual Pixelation authorization strategy.

How OmniAuth works

OmniAuth assumes that any authorization process has two phases: request and callback. Here's the request dance of an authentication process:

The request is typically a redirect to the provider's website. The provider authenticates the user and (optionally) asks permission to share information about him with the application. Then the provider redirects again to our application, sending along data about the user.

Looking more into detail, OmniAuth has two parts: the core library and strategies for using various providers. Here's how strategies fit in the grand scheme of things:

The core library intercepts all the authentication URLs, determines which is the strategy to use (based on the provider parameter in the URL), and then steps out of the way and lets the strategy decide what to do.

This means that the Facebook strategy will redirect to a Facebook URL and expect, in the callback, data about the user in the format from the Facebook specification. Of course, the Twitter strategy will be different and act according the Twitter spec, and so on.

The Pixelation authorization strategy

Since OmniAuth is doing all the dirty work, we need to implement just a few things:

redirect to the authentication URL on the Pixelation forum for the request phase
receive the user's id, username and avatar in the callback phase
be able to check that the callback comes from Pixelation and not from some identity thief.

First, we have to configure our provider. We need a Pixelation URL for the request phase and a shared secret known only by our app and the Pixelation forum. At the callback phase, the data about the user will be signed by Pixelation with this secret.

Like with all providers, we setup the parameters in a Rails initializer. Since we're not bundled with OmniAuth, we also need to autoload our class:

# config/initializers/omniauth.rb
module OmniAuth
  module Strategies
    # tell OmniAuth to load our strategy
    autoload :Pixelation, 'lib/pixelation_strategy'
  end
end

Rails.application.config.middleware.use OmniAuth::Builder do
  provider :twitter, "app_name", "secret"
  provider :facebook, "app_name", "secret", :scope => ''
  # pass the 2 parameters to the constructor
  provider :pixelation, "secret", "redirect URL"
end

In the Pixelation strategy we save the received parameters…

# receive parameters from the strategy declaration and save them
def initialize(app, secret, auth_redirect, options = {})
  @secret = secret
  @auth_redirect = auth_redirect
  super(app, :pixelation, options)
end

…then use the redirect URL in the request phase…

# redirect to the Pixelation website
def request_phase
  r = Rack::Response.new
  r.redirect @auth_redirect
  r.finish
end

…and use the secret to verify the received data in the callback phase:

def callback_phase
  uid, username = request.params["uid"], request.params["username"]
  avatar, token = request.params["avatar"], request.params["token"]
  sha1 = Digest::SHA1.hexdigest("a mix of #{@secret}, #{uid}, #{username}, #{avatar}")

 # check if the request comes from Pixelation or not
  if sha1 == token
    @uid, @username, @avatar = uid, username, avatar
    super # OmniAuth takes care of the rest
  else
    fail!(:invalid_credentials) # OmniAuth takes care of the rest
  end
end

Check out the Pixelation class: http://gist.github.com/722793

Conclusion

Writing a new OmniAuth strategy was a lot easier than I expected. I hope that sharing my experience will help you better understand how OmniAuth works and how you can develop new strategies on top of it.

Huge background picker

2010-11-16T12:17:30Z

I think it is impossible to choose a background color using a normal-size color picker. The color that you see in the tiny box seems perfect; and then, when applied to a big surface, it looks totally different.

Say hello to huge background picker, a nice little app I wrote to solve this. Choose a color and you will see it the way you intend to use it – as background.

Stylish buttons - so easy with CSS3 and Sass

2010-10-30T12:28:29Z

Yesterday I found the super yummy pure-CSS buttons designed by Web Designer Wall.

Wondering how one could use this design wisdom despite not posessing the art of subtle gradients and matching colors, I created code that does this by magic. And by magic I mean Sass, its color functions, and some formulas to derive the colors for gradients, border and text starting from the base color.

So now I can get these

… with this little code:

@import "_buttons"

.button
  +button
  +color(#d22)

Go to the project’s page for the full description and the mixin.

Or, if you don’t fancy Sass (although you should), I created a page to generate the CSS for yummy buttons in the color of your choosing.

April 2013: SCSS with compass implementation by Adam Johnson

Fixed bugs for fun. Rails BugMash

2009-08-14T12:15:18Z

Last weekend I took part in Rails BugMash – a ‘bug squashing’ event organized by RailsBridge.

From the beginning I found some ActiveRecord issues that seemed very interesting. What I learned is that digging through ActiveRecord is a lot easier in concept than through source code. Therefore, I managed to produce only a partial patch. The bright side is that it was a lot easier with tests, so I was more productive on this side.

Even if it didn’t add many points on my scorecard, the “ActiveRecord adventure” was indeed very interesting. Here are some useful tips for ActiveRecord testing:

recreate the tables after changing the schema: you have to do it yourself if running a single ActiveRecord test

# update the schema
rake test_mysql TEST=test/cases/aaa_create_tables_test.rb
# run a specific test
rake test_mysql TEST=test/cases/associations/has_many_through_associations_test.rb

# this will create the tables
rake test_mysql

looking for the SQL generated during a test? activerecord/debug.log

verify if an associated object is loaded? The way to do it depends on the realation type:

# Cat has_many Toys. Are they loaded?
cat.toys.loaded? # false
cat.toys
cat.toys.loaded? # true

# Cat belongs_to Human. Is it loaded?
cat.instance_variable_get('@human').present? # false
cat.human
cat.instance_variable_get('@human').present? # true

adding an ActiveRecord test? it’s preferred to reuse the existing models rather than create new ones. Even if some models look a bit abused after so much use :), I guess it’s better than having a couple of new models for every patch

I was impressed by the energy and collaboration in the (virtual) room: issue creation, verification, testing & patching seemed to flow from person to person. This meant that I got feedback fast on my contributions, which was great.

Big Kudos to RailsBridge for organizing the event and easing the ‘contributing to Rails learning curve’. It allowed me to use my Ruby & Rails skills to the max, even if it was the first time I contributed.

Back from Euruko 2009

2009-05-12T12:11:10Z

Euruko – the European Ruby conference – was in Barcelona this year. It was a blend of enthusiastic community and interesting talks, in two intense days, facilitated by wonderful organization.

Besides language/programming-oriented talks, there was an abundance of presentations about what you can do with ruby in various fields: games programming, image processing, system configuration automation, voip, mobile apps, music.

The lightning talks sessions were very popular – the 5 minutes format (and the terrifying gong sound) was ‘fast & furious’ – and the information overload was appreciated.

foto by Emili Parreño

I had a lightning talk about vimmish – presented what it can do and what I am working on now: generating random vim command strings, based on the grammar.

When I got to the part about parsing the vimmish grammar itself using treetop’s meta-grammar half of the audience was giving me facial hints that I did not explain that well enough (well, I had 5 minutes for all the talk.. :) ). But everyone understood what I meant when I got to the examples – randomly generated metal band names and manager speeches from the crazy italian site polygen.

Some people told me it was the geekiest lightning talk of the first day – not sure whether it was the topic, the fact that I delivered the presentation as a sequence tabs in firefox (don’t ever do that, you’ll mess the ctrl-tab under the merciless spotlights. twice.) or the polygen examples, or their effect combined :).

Next year, Euruko will be in Kraków, Poland – there were more than 20 polish developers this year and they were very enthusiastic about the conference. So, see everybody again next year, in Poland!

vimmish - vim translator

2009-05-07T12:31:18Z

Vimmish is a translator from VIM cryptic commands to human-readable explanations. I built it using a parsing expression grammar the wonderful Treetop library.

So, you can feed vimmish with a sequence of commands that you got from a cryptic guru, and it will tell you what it means.

Example

Input:

iDon't know vim :(.<ESC>^2WBc2wbetter now<ESC><RIGHT>Da.<ESC>II can understan<ESC><RIGHT>~dE

Output:

                  i => insert before cursor:
 Don't know vim :(. => type Don't know vim :(.
              <ESC> => go to normal mode
                  ^ => move to the begining of the line (not blank character)
                 2W => move to the begining of the next space-separated word, 2 times
                  B => move backwards one space-separated-word
                c2w => change to the begining of the next word, 2 times
         better now => type better now
              <ESC> => go to normal mode
            <RIGHT> => move one character to the right
                  D => delete the rest of the current line
                  a => append after cursor:
                  . => type .
              <ESC> => go to normal mode
                  I => insert to the begining of the current line:
    I can understan => type I can understan
              <ESC> => go to normal mode
            <RIGHT> => move one character to the right
                  ~ => change character case
                 dE => delete to the end of the next space-separated-word

Cool! Now all that gibberish makes sense!

small-print disclaimer: while vimmish doesn t cover (yet) all the possible commands, it is fairly powerful as it understands a lot of them (and combinations).

And what about these grammars...

If you re new to grammars, you can think of them as regular expressions taken to the next level. That is, with power to express more things.

For example, with a regular expression you could search for all lines in a file that end with ;:

/.*;$/

But you cannot build a regular expression that will tell you if a sequence of text is formed from parenthesis that are closed correctly (no one missing, no one extra, no one closed if there was not a corresponding opening one.. you get the idea). But you could do that with a grammar:

grammar OnlyParenthesis
  rule parenthesis_sequence
    ''
    /
    '(' parenthesis_sequence ')'
  end
end

The / operator means or. So a parenthesis_sequence is either an empty string or a pair of parenthesis that contains another parenthesis_sequence. This recursion is, of course, one of the key powers of grammars.

So according to this grammar, is correct, so is (), and so is (()) - it has a pair of parenthesis () that contain a string that matches the rule. But ()) is not correct as the outer parenthesis do not contain a correct sequence.

Having a grammar that defines acceptable texts - that is, a language - you can build a parser that verifies whether a given string belongs to that language or not. This is exactly what the Treetop library offers.

And.. what are grammars *really* useful for? Defining & parsing complex languages - think DSLs. Or, parsing vim commands :D See the grammar.

Deploying a non-trivial app on Heroku

2009-05-05T12:13:14Z

I tried heroku – the ‘instant ruby platform’ for one of my pet projects. The deploy was indeed very fast – less than 20 minutes from 0 to working app, but with a few glitches for advanced features.

Heroku does not give you bash access, instead you have a bunch of commands that cover all common tasks. You can use it as a script/console (that runs on your server) and to run rake tasks. Together with the admin functions available on the website, it covered everything that I needed.

Installing the app and getting the web part to work, with the db data from my local application, was a breeze; less than 20 minutes.
Heroku is tightly integrated with git – so whenever you push to your heroku git repository, the code is deployed. Live. Automatically :) Your gems will be installed, code updated, and if everything is ok the web server will be restarted.

But you have to migrate the database yourself. This was not obvious for me so I had 2 minutes of downtime until figuring it out. It would have been nice to run db:migrate automatically, but I guess that is too much of a semantic stretch for a git push.
The architecture looks awesome. Grid, cloud, mash – you name it, they have it, with ‘high-performance’ adornment.
Heroku specifics:
- you have to declare the gems that you need in a gem manifest (if they are not already available).
- they propose using heroku config vars for storing your configuration variables instead of putting them in source. As you don’t have direct access to the file system, you cannot create the config file when deploying; in fact, after deploy you can create files only in /tmp and /log. So, you have to choose between adding config files to git or using heroku config vars.
  
  I decided not to hook into heroku too much while trying the platform, so I just added the config data to source.
You setup your cron jobs by having a rake task that will be run, in theory, once per hour. And you also have logs for your cron jobs.

However, the logs don’t contain the error stream – just the output stream. This can be quite frustrating when trying to understand why the cron jobs don’t seem to be running on the server.

In my case, I discovered that a config file was missing, after running the dedicated console command (heroku rake cron) and got the error message.
Major glitch: lack of support

My cron jobs still don’t seem to be running; however, if I invoke the cron manually, it works. It could be because the operation in the cron takes around 30 seconds to complete, it could be something else.

However, I got no response on the support email about this problem since I asked, a week ago; other users express the same concerns.

Overall, it was an extremely pleasant experience for deploying the rails ‘pure web’ part. Hopefully, when rolling the commercial version there will be some support.

GMaps stub released

2009-04-15T12:16:22Z

As the load time for a Google Map (less than 2 seconds :)) was hurting me, I retaliated by stubbing it.. The stub defines the same classes and functions as the GMaps JS API (not all of them :)), returns some fake data when needed and plays dumb for the rest.

This is enough for the rest of the Javascript to work and saves a couple of seconds on every page while developing or working on the UI.

The code is available at http://github.com/dira/gmaps-stub.

New friends, new enemies

2009-04-03T12:23:14Z

web geek’s (un)conference in Bucharest was about saving seconds. The talks were about improving all those little things that you do often and, even if the duration of each one has a magnitude of seconds or less, overall they eat your time – and sometimes your brains.

So after giving more timeslots to the thread that was monitoring by keystrokes and neuron anxiety, i got:

2 new friends

Meet jack and sack – the time saviors:

# ack
alias ack="ack-grep -i -a"
jack() {
  ack $1 --ignore-dir=vendor --ignore-dir=cache --ignore-dir=stubs public/javascripts
}
sack() {
  ack $1 public/stylesheets/sass
}

jack searches through the javascript files – that’s everyting in /public/javascript excluding libraries ( /vendor ) and the folder with all the js’s compacted and and cached ( /cache ). So that’s

jack searched_stuff

instead of

ack-grep -i -a --ignore-dir vendor --ignore-dir cache --ignore-dir stubs searched_stuff public/javascripts

I rely on jack for finding things like ‘where is this method called’, ‘who listens to this event’ and ‘is this CSS identifier/class used just for formatting or is the javascript referecing it too?’.

sack is the little brother that does the same kind of search in the Sass files. The gain: that I don’t have to type the /public/stylesheets/sass path anymore.

2 new enemies

The new “enemies” are external services that I didn’t need during development, and that annoyed me in one way or another. No more!

gmaps. GMaps is a central part of symbolya ; while it is by no means slow, it still consumes a couple of seconds on every load. That can be most annoying (read: brain-power eater) when I am working on the pages that include the map, but I am changing or testing something else.

Solution: stub it!

I created a dedicated environment, in which the real GMaps js is replaced with a local stub that creates classes with the same names as the ones we use from GMaps, returns some fake data when needed and plays dumb for the rest.

Time saved: 2-3 seconds/per page load. Brain power: priceless.

crowdsound. Including crowdsound leads to a JS error and the nice red error icon in Firebug made my brain freak out every time I saw it. That is, every time I was looking at the site during development.

Solution: remove it from the development environment(s) – where it is not used anyway. No more brain panic ftw!

Friendly URLs - reverberations

2009-03-02T12:15:27Z

Friendly URLs contain human-parseable meaning. Like contributors/dira instead of users/2 (ok, for some humans the second route conveys a lot of meaning too :D).

They are desirable in many situations, but what is the cost? The change is facilitated by Rails; however, depending on the amplitude of the change, there can be more or less reverberations throughout your application.

Change route name

posts/1 becomes articles/1. Reverberations: none

# change name for generated routes
map.resources :posts, :as => 'articles'

# manually update any custom routes that use the old name
map.post_draft '/article/:id/:token', :controller => 'posts',
        :action => 'show', :conditions => { :method => :get }

The controller/integration tests still work, the application works, everybody go home.

Change route parameters

users/1 becomes users/dira. Reverberations: more

First, decide what field from your model to show in the URL. Then:

if you already have a property perfectly suitable to be an URL (contains only alpha-numerical characters, no slashes or dots), and that is already unique among existing records. Assuming it's the login field of the User model:
```
# model:
def to_param
 login.parameterize
end

# for controllers (the User controller and all the controllers that are
# nested under it, or in other namespaces): replace User.find(params[:id]) with
User.find_by_login(params[:id])
```
If using make_resourceful or another plugin for resourceful controllers, add a method that retrieves the needed object by login instead of by id:
```
def current_object
  User.find_by_login(params[:id])
end
```
otherwise, use a plugin like permalink_fu or find_by_param to take care of transforming your data into a URL-compatible value, assuring that it is unique etc. For using the login field again, the changes are:
- define a column in the database (default name: permalink)
- create a migration in which you set the permalink value (using the functions offered by the plugin) for the data already created
- define the permalink in the model
- adjust the controllers to retrieve resources based on the permalink, not the id
there is a quick and dirty option, for resources whose desired names are generally URL-compatible, but they could contain dots. The code prevents the dot to be interpreted as the separator in /controller/resource.format. But I considering solution 2.

What about controller/integration tests?

# if you used the more general
get :edit, :id => @user.to_param

# instead of the specific
# get :edit, :id => @user.id

your tests still work as nothing changed.

After that...

Using Ajax? check your Javascript files for connections to the old route name / parameters! Ack is your friend here.

Not sure you got all the reverberations covered? You can use a tool like tarantula to spider your site and check that all the links are still working.

to benefit from its brute power, you should fill all your models with data before letting it crawl over it.
If you're using fixtures, just load them in the tests as shown in tarantula's readme.
If using factories, instantiate them so that you have content in the pages and tarantula can browse happily
are you using Javascript without progressive enhancement? tarantula will detect it and kill u :D
using namespaces? you can do separate tests in which you tell tarantula to crawl in each namespace (for example one test for public, one for admin). The report will contain a section for each test method
The one thing I didn't figure out with tarantula is how to prevent deleting a resource and then trying other actions on it.

In conclusion

Humanizing routes is not difficult but still there are some points to pay attention to. Using a permalink plugin and having well-written tests helps.

2012 at a glance

2013-04-03T12:-37:-39Z

Work

In the first 9 months of the year I worked with an american company in the health industry, developing a custom CMS tailored to their specific needs. It was an interesting project from which I learned a lot on a wide range of topics, from Rails specifics to using MongoDB to store a hierarchy of document types, smartly indexing data with ElasticSearch allowing for flexible searches, integrating video processing services, generating PDF's from html pages or customizing the CK Editor.

In October a startup company asked me to integrate my open source S3 proxy in their rich single-page application. I continued working with them, developing new features. I led the team in refactoring the application to apply MVC better, use Backbone effectively and simplify the code.

Conferences

Enjoyed the pink, bubbly Railsberry conference in April. Lots of interesting talks, met old friends and got to know new interesting people. Gave a lightning talk about tzigla, about the fun of personal projects and pixel drawings.

While in Cracow I also took part in hackkrk #4. There was speed dating, where I shared some ElasticSearch wisdom, and learned some cool command-line tricks. On the code retreat I paired with two Java developers; one important lesson was that none of us had a simple project setup ready and that wasted a lot of time.

Euruko started with a hackday, in which I teamed with a group of german developers and tried to fix a mongoid bug. Learned that we heavily depend on the internet for our work; that the bug was fixed a couple of days before; and how to use git bisect to find which commit changed something in the repo (in our case, which commit fixed the bug). Also found out about konacha as an alternative for Guard::Jasmine.

Eurucamp was a mix of interesting workshops, interesting talks - from practical command line tools and scripts to more general best practices. There was plenty of time for socializing and I enjoyed talking to people about ruby, single page apps, and contracting.

While in Berlin I gave a talk on javascript testing at the Berlin Javascript Applications Meetup. It was very well received and a lot of people had questions about the tools and processes they should use to introduce testing to their JS projects. I actually wrote a test-driven Node app that takes a markdown presentation and creates a web page with the contents - which are about testing JS code. Meta is fun!

In September I volunteered as a couch for Railsgirls Cologne. I enjoyed explaining Ruby, Rails, developing web applications and the ecosystem of tools and systems involved, and seeing 'my' girls learning, and tinkering with the application. Memorable takeaway: one attendee said 'done? the app is never done'. There's always room for progress, for improving 'the app', your skills, your life.

Rupy was very dynamic, with short talks on two different tracks. Lots of different subjects, ideas, problems seen from different angles: modularization and decoupling in JS and Rails, AngularJS, command line tips, abstracting production, API design, scaling and availability.

The Robot Game at RailsGirls Krakow

2013-04-29T12:29:17Z

I think it is hard to introduce people to programming by having theoretical presentations about code, commands, terminals & servers. That's why during Railsgirls Krakow I organized a game that allows participants to experience, in real life, a lot of programming concepts.

The game

The goal is to drive the 'robot' through a maze, by giving it a sequence of commands, and have it bring back an object. At Railsgirls, some of the coaches played robots, and the objective was to make the robot reach a cupcake placed in the maze.

What I love about this game is that, by playing it, one gets a lot about how programming works.

The robots accepted instructions only when written on a piece of paper, and did not respond to any other interaction - just like machines run programs. We emphasized that the instructions in the program must have a specific structure - one command per line, and that the commands must belong to the set of available commands. Robots would 'error' in funny ways if the program wasn't valid - which will (hopefully) help the players understand why they get syntax errors in real programs as well.

The game also makes you see how the program 'runs', in real life; you follow its progress, and see clearly why it errors (the robot hits a wall, or there is no cupcake to pick). It's also very easy to see if it works correctly or not - you either have a happy robot with a cupcake in hand at the end, or not.

How it worked

To introduce the game, I held a short presentation in which I explained the concept, accompanied by a robot which executed commands, for the attendees to get a glimpse of the available commands and how the robot works. Then we went to playing the game!

Some teams took a very analytical approach, measuring the step length, calculating how many steps were needed and writing the program in one go. Some were a bit intimidated by the task, and we encouraged them to write some small, test programs, and iterate from there.

It was very exciting for me to see them get involved, the empathy with which they watched their program run, some almost imitating the robot, cheering for it, and celebrating each victory - getting the robot to turn at the right location, getting the second turn right, getting the cupcake.

The coaches were great robots, executed the programs as rigorously as a machine would do, but error-ed in funny, creative ways.

After each team wrote a successful program to get the cupcake, we asked them to make it shorter by inventing new commands. They quickly came up with compound commands (step = step right + step left) and repeating instructions (10 x step), turning the ~25 lines of the initial program into less than 10. One team understood that the number of characters must be minimized, so they wrote an algebra-like one-liner like i 10*(x,y) j 7*(x,y) i 4*(x,y) t.

Notes on organizing the game

The main challenge was the limited available space, as RailsGirls Krakow had 50 attendees, and about 25 coaches & organizers. To optimize the space, I created 3 labyrinths, each one with 2 robots, and 2 teams x 4 girls per robot. Each labyrinth also had a person that answered questions and interfaced between the teams and the robots. So I made sure that there is enough room for 20 people around each game.

For the labyrinth itself, the goal was to have it as small as possible, while having at least two paths to go to the cupcake, and at least one long line on each path (to compel them to invent loop commands). We also needed it to be large enough for the robots to walk relatively confortable. After a couple of tests we settled on this shape, and used masking tape directly on the floor to make it:

Testing also revealed that it is hard for the (human) robots to make even steps, so we instructed them to make small, tip-to-toe steps. They also called out loud each command as they executed it, and kept track of the current command, to show the error line if the program failed.

Thanks

Big thanks to WebMuses for organizing RailsGirls and having me organize the game. Monika Starzyk helped me with ideas, real-life testing, feedback and encouragement. The coaches that volunteered to be robots or to manage labyrinths were awesome. I also thank DrTechnico, whose posts about the game inspired me to do it.

Resources

intro presentation
yummy 3D cupcake (image from Cupcake Ipsum)
program sheet
robot tags
How To Train Your Robot and Teaching the “How to train your robot” class

dira ⋅ geek ⋅ girl

GMap_to_static: one-click static maps creation

Why I wanted it

But it’s not a piece of cake

Guessing the zoom level

Viewport optimization

Limitations

Conclusion

Heroku, S3, canvas and the Security Error of doom

Enter postMessage

How does this help with image loading?

More about the problem

Other solutions

In conclusion

P.S.

OmniAuth strategy for everything else

How OmniAuth works

The Pixelation authorization strategy

Conclusion

Huge background picker

Stylish buttons - so easy with CSS3 and Sass

Fixed bugs for fun. Rails BugMash

Back from Euruko 2009

vimmish - vim translator

Example

And what about these grammars...

Deploying a non-trivial app on Heroku

GMaps stub released

New friends, new enemies

2 new friends

2 new enemies

Friendly URLs - reverberations

Change route name

Change route parameters

After that...

In conclusion

2012 at a glance

Work

Conferences

The Robot Game at RailsGirls Krakow

The game

How it worked

Notes on organizing the game

Thanks

Resources