On Saturday December 8th, Ho Chi Minh City along with 200 other cities around the world celebrated a global Code Retreat.

What is a code retreat?

Like a meditation retreat, a code retreat is a time set aside to step out of the daily life and routine in order to get deep into practice. It's a full work day, and everyone attending is giving up their Saturday to do what they are probably paid to do from Monday to Friday. That's dedication to the craft. Not so many people came, partly due to poor advertising.

The code retreat was open to anyone but all attendees were fellow programmers, those with some experience already but who want to improve themselves. Besides myself, there was a motley crew of foreigners - an organizer from Japan, a local software tycoon originally from Spain, a Czech developer. Otherwise, all Vietnamese, including startup developers, university faculty, students, and corporate workers.

The venue was ERC Vietnam, the Singaporean MBA school who, along with two other Singaporean schools in Vietnam, is rumored to have lost its operating license from the Ministry of Education which would force it to close. However, the school was still open as usual. A Toastmasters club was also meeting in the room across the hall. There were scheduled outings for students posted in the elevators to be held at local bars and restaurants.

The coding

There were six sessions lasting about an hour each throughout the day and each session was the same both in format and content. The format was:

15 minutes - pair up with another programmer and discuss the strategy for writing the program - choose a language, maybe a framework, discuss data structures and algorithms
15 minutes - one person "drives" the keyboard, the other "navigates" - pair programming (an extreme programming methodology) where two developers use a single laptop to collaboratively develop software
15 minutes - switch up driver and navigator, although often times only a single person was familiar with the text editor or developing environment or even language and API (some languages heavily depend on libraries and APIs to do simple tasks which are difficult to do in the core language alone)
15 minutes - retrospective and break - we wrote down our learnings on sticky notes and collected them for each other to read and at the end of the day we had a whole day retrospective

What were we writing?

We were implementing Conway's Game of Life. Each pair (each session we picked new partners) wrote the game six times throughout the day, erasing the code they had written at the end of each session. The goal was not to write the game of life, but to get better at writing code by writing the same code over and over, by developing the same software over and over.

Halfway through the day some rules started to be added. First, we had to use TDD (test driven development) methodology (which some people didn't realize was feasible in JavaScript), then OOP (what if someone had chosen Scheme or some other functional language?). This was to encourage us to try new techniques and learn them from each other.

I was an outlier in that I wanted to use languages like Python, JavaScript, or even PHP instead of .Net framework languages. Instead of a massive IDE I was using Vim. In the end, in each session where it was up to me I chose Javascript. There was no need to build a new project from a template and then compile executables before running them. Just open a text file, save as html, and use Chrome as a development environment.

Later, more rules were imposed:
No if statements.
No loops (for, while, etc.).
No functions longer than a few lines (maybe 3 or 5 statements max).

We were encouraged to pick one rule and try to work within its constraints. I decided to apply all the rules!

These rules would be easy to abide by using a functional programming language but they're not impossible to follow in Python or Javascript either. But to replace loops using recursion, one thing I found was that nobody remembered how to write recursive functions and most people didn't even want to try as it was hurting their heads.

After the day was over, I took a look at underscore.js, a utility library for JavaScript which makes functional-like programming in JavaScript much easier.

Here's what I came up with.

<script src="underscore.js"></script>
<script>
 
// row and col are indices into 2d array 'grid', either 'today' or 'tomorrow'
function value(grid, row, col) { return (_.isUndefined(grid[row]) || _.isUndefined(grid[row][col])) ? 0 : grid[row][col]; }
function count_neighbors(grid, row, col) {
    return value(grid, row-1, col-1) + value(grid, row-1, col) + value(grid, row-1, col+1) +
           value(grid, row  , col-1) +                           value(grid, row  , col+1) +
           value(grid, row+1, col-1) + value(grid, row+1, col) + value(grid, row+1, col+1);
}
function next_state_if(neighbors, state) { return (neighbors == 3) ? 1 : ((neighbors == 2) ? state : 0); }
function next_state(grid, row, col) { return next_state_if(count_neighbors(grid, row, col), grid[row][col]); }
function calculate_tomorrow(today, tomorrow) {
    _.each(today, function (foo, row) {
        _.each(this.today[row], function (foo, col) { this.tomorrow[row][col] = next_state(this.today, row, col); }, this);
    }, {today: today, tomorrow: tomorrow});
}
 
// helpers
function copy2d(ary2d) { return _.map(ary2d, function (list) { return list.slice(); }); }
function print_r(ary2d) { console.log(_.map(ary2d, function (list) { return list.join(''); }).join('\n')); }
function random_init() { return _.map(_.range(30), function (list) { return _.map(_.range(30), function (list) { return _.random(1); }); }); }
 
// demo main loop
var today = random_init();
var tomorrow = random_init();
print_r(today);
setInterval(function(){
    calculate_tomorrow(today, tomorrow);
    print_r(tomorrow);
    today = copy2d(tomorrow);
}, 400);
</script>

How can we store tables or spreadsheets in Drupal content nodes?

Drupal is a Content Management System as well as a Content Management Framework. It's meant for facilitating the creation and editing of content, where content doesn't just mean simple text. CCK allows Drupal site managers to easily enable complex data types for their content. But sometimes it's not so easy to manage lots of simple data in the way that a spreadsheet (meaning Excel or Google Spreadsheet) easily manages many rows and columns of related data.

Sometimes you really want tabular data and you may not know for sure how many rows or columns you'll want beforehand, which is never a problem for Excel or Google Spreadsheet (which is also why sometimes people abuse Excel as a general purpose database). Maybe you are importing spreadsheets or are using spreadsheets with many rows and columns, and only want to use a section of the spreadsheet. Maybe you need to use spreadsheets because you are using formulas and want to do some graphing based on some numbers too. In fact, Excel can do much more. Rather than hoping all of those use cases will make it into a Drupal module anytime soon, wouldn't it be nice if you could just embed a spreadsheet in a node?

There are some modules for attaching tables or tabular data to nodes but in the end the interface can be a bit unwieldy. I discussed building something like a spreadsheet to quickly edit many values and below I present a demonstration.

What is already available that we could use to attach spreadsheets or something similar to nodes?

1. You could: Configure a Google spreadsheet that's either public or somehow accessed via a Google api, perhaps using OAuth2 or just assuming the viewer also has edit access to the spreadsheet. Google already lets you embed spreadsheets including the editable spreadsheet but they don't let you limit the view of the spreadsheet (limiting the view still lets everyone access the whole spreadsheet by changing the URL).

We would also need new nodes to automatically create sheets in the spreadsheet or new spreadsheets altogether and embed them in node edit. This would need to use their APIs since the embeddable Google Spreadsheets require an existing spreadsheet, otherwise this step needs to be done manually for each node - a new Google spreadsheet created per node.

This Redmine Google Docs plugin takes a similar approach and shows how the resulting data could be embedded.

(This might be worth investigating as well.)

2. Another approach would be to take an existing JavaScript or Java spreadsheet that could be embedded. This could be exactly what you want if you need the full functionality of Excel in each node. One such online spreadsheet is ZK Spreadsheet which is written in Java, and would let you have full formula and charting support.

3. Embed a widget like the form below as a CCK field in a node. It would be a new CCK field type where the editing widget is the below spreadsheet-like table and the display widget might be the same thing, an uneditable table, or the raw JSON string representation. In the database, the actual value of the field would be JSON (unless you wanted to use PHP's serialize() which would require POSTing values first instead of just posting the json value). This means you wouldn't relate or compare this field to anything else, as with any serialized data in a database. You could come up with some other schema involving columns and rows to store the table's values for each field in a node but I'm not sure it's worthwhile.

I created this demonstration but haven't turned it into a Drupal module. There is code to dump the edited values into a single JSON value to be stored in the database but the storage would be module-specific.

Get the JavaScript - then combine it with html and CSS, which you also see below.

Today I was playing around with Facebook's where you can test out their API.

First, you may want to logout of Facebook using the button there and log back in in order to get the "FB.login callback" Log message on the sidebar. Inside that, you'll see something like:

{
   "authResponse": {
      "accessToken": "AAAAAKvQdWksBAG8yLhVwqWyvgF2uu2eUahBQTZCPD5y2ilo2qZBbyjJ3DJRXDn4UONrVqAK28ZCSlouAtvdbxCc0ZAzQ0e8VbZBZCsdHmzUQZDZD",
      "userID": "12463924",
      "expiresIn": 5200,
      "signedRequest": "_ltfzUYHjPHyFZH6JnlbzVa-oejnPTud9aHK24eIWOc.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImNvZGUiOiJBUUR2WU4tcTk4cW04X2xwbkg0LVU4Rk9YMUoxYVBmOUNMQkJPeEhlSGowQUZ3a2V6akRNWDlPNGExbkhkREZxT2laQVhWZW50aDRfd19EUk5uWm95NFlDYXFqWktweDZ1MDA5U2Fkc2hSUjQtWUdfUi05S21zY3F5RXlPTC1zbGRaVHBqZkRZS0lvdzFxYnJ2SjJteWxXYkd1dWFhY1h6U1FUWW8tc1V2Rm1oTU5fLV9xZzNxOXRadHJTSi1WdFRpUWciLCJpc3N1ZWRfYXQiOjEzMjE1NDc2MDAsInVzZXJfaWQiOiIxMjQ2MzkyNCJ9"
   },
   "status": "connected"
}

You should copy the accessToken in order to do further testing which requires a token. Most of the new API calls can be tested right in your browser. For example:

https://graph.facebook.com/search?q=Tomo&type=user&access_token=AAAAAKvQdWksBAG8yLhVwqWyvgF2uu2eUahBQTZCPD5y2ilo2qZBbyjJ3DJRXDn4UONrVqAK28ZCSlouAtvdbxCc0ZAzQ0e8VbZBZCsdHmzUQZDZD&limit=10&offset=0

That searches my account for users with the name 'Tomo', while using my token to authenticate. The token doesn't last very long and has definitely expired by the time you read this.

Now plug this code into the textarea.

<div id="profile_pics">
Profile pics here
</div>
<script>

// From an example

var profilePicsDiv = document.getElementById('profile_pics');
FB.getLoginStatus(function(response) {
  if (response.status != 'connected') {
    profilePicsDiv.innerHTML = '<em>You are not connected</em>';
    return;
  }



// JSON output from https://graph.facebook.com/search?q=Tomo&type=user&access_token=AAAAAKvQdWksBAG8yLhVwqWyvgF2uu2eUahBQTZCPD5y2ilo2qZBbyjJ3DJRXDn4UONrVqAK28ZCSlouAtvdbxCc0ZAzQ0e8VbZBZCsdHmzUQZDZD&limit=10&offset=0
var people = {
   "data": [
      {
         "name": "Tomo Coffee",
         "id": "100001851101897"
      },
      {
         "name": "Tomo Kiku",
         "id": "626405318"
      },
      {
         "name": "Tomomi Shiho",
         "id": "1755956208"
      },
      {
         "name": "Tomoman Bkk",
         "id": "1674446551"
      },
      {
         "name": "Tomori Moore",
         "id": "511540368"
      },
      {
         "name": "Tomomi Takihara",
         "id": "100001600551550"
      },
      {
         "name": "Tomohiro Morinaga",
         "id": "713242010"
      },
      {
         "name": "Onda Tomoyuki",
         "id": "100001455563427"
      },
      {
         "name": "Tomoko Okawara",
         "id": "100001514576923"
      },
      {
         "name": "Tomonari Kino",
         "id": "804330331"
      }
   ],
   "paging": {
      "next": "https://graph.facebook.com/search?q=Tomo&type=user&access_token=AAAAAKvQdWksBAG8yLhVwqWyvgF2uu2eUahBQTZCPD5y2ilo2qZBbyjJ3DJRXDn4UONrVqAK28ZCSlouAtvdbxCc0ZAzQ0e8VbZBZCsdHmzUQZDZD&limit=10&offset=10"
   }
}


var searchid = '1218273364';
var markup = '';

function genfn(i) {
    var fn = function(result) {
        //console.log(i); console.log(result); 
        for (var j = 0; j < result.length; j++) {
            if (result[j] == searchid) {
                Log.info('foaf search match', people.data[i]);
                markup = (
                  '<fb:profile-pic size="square" ' +
                          'uid="' + people.data[i].id + '" ' +
                          'facebook-logo="true"' +
                          '></fb:profile-pic>'
                );
                var profilePicsDiv = document.getElementById('profile_pics');
                profilePicsDiv.innerHTML += markup;
                FB.XFBML.parse(profilePicsDiv);
            }
        }
    };
    return fn;
}

for (var i = 0; i < people.data.length; i++) {
    person = people.data[i];
    FB.api({method: 'friends.getMutualFriends', target_uid : person.id}, genfn(i));
}

});

</script>

As you can see, I prefetched the results from searching "Tomo" and I set the id of a friend whose "Tomo" friends I wanted to find. This searches the results and filters for people who have the mutual friend 1218273364.

To go further, one should have controls for choosing the search term, automatically fetch search results and page through them to find more results, and have a control for choosing the mutual friend. This will allow you to search for mutual friends even if you don't have permission to view a friend's friends. Turning this into an app or Chrome extension is left as an exercise to the reader. :)