public interface

risible-db: database migrations in java: release 0.2

2008-11-17T23:23:00.004+01:00

It is with joy and delight that I announce risible-db-0.2, our beloved risible migrations project, now with support for Oracle!

Risible-db is an ultra-simple database schema migration utility, not as fancy as Rails, you just write plain SQL (really, how many times do you change DB vendor mid-project and think "wow, it's lucky we used a platform-independent DB abstraction layer!" ?). By convention, it looks for SQL scripts in the migrations subdirectory of your WEB-INF directory, and will execute any that have not previously been executed.

So the only reason it needs Oracle support is to create the initial migrations table.

Usage has changed little, this is how to configure it with Spring (you can imagine the equivalent java code) -

applicationContext.xml

<bean id="migrations" class="risible.db.WebInfMigrations" init-method="start">
  <property name="dataSource" ref="mysqlDataSource"/>
  <property name="migrationTableName" value="migrations"/>
  <property name="migrationTable">
    <bean class="risible.db.MySqlMigrationTable"/>
  </property>
</bean>

The migrationTable property specifies the db-specific table creation strategy. You can use risible.db.MySqlMigrationTable, risible.db.OracleMigrationTable, or roll your own implementation of risible.db.MigrationTable - a one-method interface whose implementation creates a table if necessary.

download here!

Enjoy, and let us know how it works for you ...

little javascript trap

2008-11-11T00:18:00.003+01:00

Sometimes the Spartan simplicity of programming with java interfaces has a lot of appeal, especially when faced with the way Rails treats each class as an enormous hold-all for a gaggle of methods. Pros and cons yadda yadda yadda.

Having got that out of the way: Rails' to_json rocks - instant serialisation of your Ruby objects into Javascript objects. We need a JSR to do this to java.lang.Object (I mean, how many times have you needed wait() and notify()?), so Java may become Web-2.0 enabled/compliant.

Anyway, there I was merrily scripting freemarker to do what Rails gives us for free, and everything's honkey-dorey on Firefox and Safari, but Opera is choking. After the requisite banging-head-on-wall, I spot a trailing comma.

<html>
  <head>
  </head>
  <body>
    <script type="text/javascript">
      var x = {a:1, b:2, c:3, d:4,}; // trailing comma here. This isn't the original code, btw, in case you're thinking, "duh!"
      for (var i in x) {
        document.write("<div>" + i + " is " + x[i] + "</div>");
      }
    </script>
  </body>
</html>

Warning: Opera don't like trailing commaz. Solution: switch to a language that provides to_json, or keep suffering. Or drop support for Opera. Speaking of not supporting stuff, I've no idea what IE does. How dangerous is that? Here are my browser stats for the last 30 days:

FF	64%
IE	24%
Chrome	4%
Safari	3.9%
Opera	2.7%

Chrome? Google so pwns you dudes lol

cheers, and good luck with the code generation ...

Acknowledge Feelings

2008-11-07T12:54:00.005+01:00

Acknowledging the feelings of another person is a powerful technique we learned from Faber-Mazlish.

One day Sapphire, our delightful daughter, about a year old at the time, was climbing over Bingo the Dog (a noisy plastic toy), fell flat on her face, and started screaming. I picked her up to comfort her, but she struggled and screamed even more. I thought, hopeless father, why did I ever have children, I'm not cut out for this, etc ... and all of a sudden realised she wasn't crying out of pain, she wanted to get back to her toy and I was preventing her! Her tears dryed up pretty fast once I put her back on the floor. But my understanding of crying was forever changed. It wasn't simply "crying => pain" anymore, crying is now an ambiguous message calling for emotionally-sensitive context-dependent interpretation. This wasn't going to be easy for my INTP personality.

Fast forward 18 months. Sometimes she trips over a toy and bashes her face on the floor - actually hurting herself. As usual, my (hopelessly wrong) intuition would suggest I say it's nothing, don't worry about it, you're not really hurt, it'll get better, stop whining, hey, get over it, it's only a bruise, it's not the end of the world, for god's sake! Here's the updated alternative:

Conan	(picks Sapphire up, cradles her in arms, adopts a concerned, caring-parent expression)
Sapphire	(screaming in agony)
Conan	Sapphire, are you hurt?
Sapphire	(screams some more)
Conan	Is it the end of the world?
Sapphire	(screams continue, but she appears to be nodding in agreement)
Conan	Did you bash your face on the floor?
Sapphire	(screaming) Yes!!
Conan	That must hurt a lot!
Sapphire	(screaming less) Yes!!
Conan	Did you crack your skull open?
Sapphire	(a little calmer) Yes!!
Conan	Is your nose all squashed?
Sapphire	(crying, still) Yes!!
Conan	ouch!
Sapphire	(sobs gently)
Conan	(points to the floor where she fell) Is this where you hit the floor?
Sapphire	(sobbing gently) Yes
Conan	Oh dear, it must have hurt you a lot.
Sapphire	(moaning) Yes. Urting.
Conan	(pointing to the totally wrong place, her shoulder for example) Does it hurt here?
Sapphire	(points to her head) No, here. Ed ache.
Conan	Oh, your head hurts?
Sapphire	Yes, ed ache. My ed ache.
Conan	Sapphire, tell me, what do the wheels on the bus do?
Sapphire	(sniff) Go wound and wound.
Conan	And the horn on the bus?
Sapphire	Go beep-beep-beep.
Conan	Indeed ... do you want to play some more?
Sapphire	Yes (Gets down. Surveys the situation. Wipes her nose in her sleeve. Resumes activity. All is well)

NLP teaches us that 90% of our communication is non-verbal, which is why you can get away with "did you crack your skull open?". Empathise, let your tone of voice and facial expression reflect how you feel, and the words don't really matter so much. Once you establish empathy, you can change the tone of the conversation, and her mood will follow. The wheels on the bus, or whatever her favourite daytime song is, makes a great distraction, and then she's ready to get back to clambering over Bingo.

It doesn't seem to work so well among adults, at least not if you're unsubtle or the victim knows what you're up to. Sincerity is really the key here.

	(late one evening)
Conan	(despairingly) This PayPal developer API is really complicated, I don't know how I'll ever make money :(
Sabrina	(tongue firmly in cheek) Oh, Conan, you must be really frustrated, it sounds so difficult ...
Conan	Don't try your Faber-Mazlish stuff on me, dammit!
	(all burst out laughing)

When to use Interfaces

2008-10-30T17:57:00.005+01:00

The simplest answer: never. Use Ruby or any other dynamic language instead! But if you're still stuck in javaland, well, I promised this article in Programming for the Stone Age after witnessing some serious interface-itis. My university Software Engineering courses all talked about "always code to an interface" and articles abound on this insidious meme. So you get interface-implementation couples, where every method signature on the class is duplicated on the interface, pointlessly. I remember with horror a proprietary ORM I was obliged to use that actually required this pairing for every persistent class. It was unfortunately the backbone of our application, and hurt more than raw SQL. But that was in the days before Hibernate and the whole POJO movement, so let's call it a learning experience. Let us end the tedium of obligatory signature copying for every little property we add to our applications!

Right. So you're building your application, you decide your domain objects will include Customer, Supplier, Product(*). You already have a concept: a Domain Object, a kind of a thing that is unlike a Controller, or Service, or a Repository. A Domain Object has nothing in common with a HashMap or String or JdbcConnection. Major distinguishing features of Domain Objects are that each instance can be uniquely identified from among all Domain Object instances; each Domain Object is subject to CRUD operations and may be in an unsaved or deleted state. You might have decided for your application that objects are never deleted from your database, but rather they are tagged as deleted. You might decide that all domain objects should have a human-readable name. If any of this is the case, it is possible, depending on the nature of your application, that an interface resembling the following may be useful:

DomainObject.java

interface DomainObject {
  UniqueIdentifier getUID(); // this isn't necessarily the database id of the object
  String getName();
  boolean isSaved();
  boolean isDeleted();
}

With this interface in place, you can write some methods whose behaviour will be consistent for all of your domain objects:


  public void update(DomainObject o) {
    if (o.isDeleted()) {
      throw new CantUpdate("object " + o.getUID() + " is already deleted");
    }

    ...
  }

  public String renderLink(DomainObject o) {
    return "<a href='/object/" + o.getUID() + "'>" + o.getName() + "</a>";
  }

Customer and Supplier have a feature in common: they are contactable. That is, they have addresses, phone numbers, emails and so on. It would be nice to handle contact information in a uniform way: to do so, the Contactable interface might be handy:

Contactable.java

interface Contactable {
  String getAddress();
  void setAddress(String address);
  String getEmail();
  void setEmail(String email);

  ... etc ...
}

Armed with Contactable, you can manage contact information in a uniform way:


  public void verify(Contactable c) {
    ...
  }

  public String renderContactInfo(Contactable c) {
    ...
  }

Last example: Auditable : for those Domain Objects for which all changes need to be audited. If your application requires all objects are audited, you might as well merge this with DomainObject (and you might make it a superclass rather than an interface).

Auditable.java

interface Auditable {
  User modifiedBy();
  Date modifiedOn();
  void updated(User by, Date when);
}

Auditable works well in combination with a Hibernate interceptor or event handler so that every object that is persisted and requires auditing, is guaranteed to be audited with no more effort than adding "implements Auditable" to your class definition. This way, together with the magic of hibernate, your business-logic code can deal with modifying your object in a clear and readable fashion, without a heap of audit-code clutter. For example:

MyHibernateInterceptor.java

class MyHibernateInterceptor {
  boolean onSaveDirty(Object o, Stuff... otherStuff) {
    if (o instanceof Auditable) {
      ((Auditable) o).updated(getUser(), new Date());
    }

    ... etc ...
  }

  ... etc ...
}

So you end up with domain classes looking a little like this:

Customer.java

class Customer implements DomainObject, Auditable, Contactable {

  ... interface methods ...

  ... other methods unique to customer ...
}

Java interfaces allow you slice up a big class into smaller, managable chunks so that you can write well-targeted pieces of code that guarantee consistent behaviour over a range of different objects.

Lastly and most importantly: don't create the interface until you really need it. If you have only one implementation, and there is only one possible implementation (at least for the moment), then you don't need an interface. The day you have a second implementation of the same concept, hit Refactor -> Extract Interface in Intellij (**) to introduce your interface quickly and painlessly. And I really mean painlessly. Intellij will hunt down all references to the old class in your code, and convert them where possible into references to the interface. And you get to decide whether the class keeps its name and the interface gets a new name, or the other way around.

There is a whole universe of refactorings out there: "extract interface" is so trivial and easy to understand that it can be automated. So use it. When you have the freedom to evolve your code in any direction at the last minute, you implicitly have the freedom to keep your codebase much simpler by not evolving it until the last minute.

Good luck, and let me know how it goes.

(*) It looks like e-commerce is the "hello world" of web-app bloggers
(**) I'm sure Eclipse and Netbeans have this refactoring too.

Tales of the Interview

2008-10-25T12:36:00.009+02:00

Recruiting is not only for colleagues: we recruit everybody. It is the world's biggest problem: getting the right people into the right jobs, eliminating the waste and drag of unproductivity engendered by poorly matched people and positions. We recruit babysitters, bankers, plumbers, spouses, presidents, even if the recruitment process is completely different in each case. The only people we can't recruit are our blood relations.

This post was triggered by two recruitment-horror-story posts from the world's best blog: A Problem at the Personal Level, and The Receptionist Test. They're worth a read.

It scares me how some software organisations hire coders on the basis of nothing more than their CV, a handshake, and a smile. If you do nothing else in a programming interview, please do this: sit in front of a computer with your candidate, and ask her, or him, to write some code. This alone is the best filtering tool you have, it's so powerful you won't want to look at CVs ever again.

Tips for programming interviews:

Take time at the beginning of the interview to help your candidate relax so they can put on their best performance. If you've done this, and they're still nervous and stressed, you need to think about having a nervous and stressed person on your team. If you haven't done this, and they perform poorly due to stress, you might have missed your best candidate.

The more developers from the team are involved, the better (perhaps a rotating three-person interviewing team for example).

Over time, build up a collection of programming exercises. You will need a string of performances in order to be able to judge comparatively, but you will also need a variety of exercises so that you can choose, for a given candidate, the exercise that allows their strengths to shine.

Don't waste time on candidates that you haven't pre-screened with some basic technology questions first. (Really basic. Eg, What's the difference between a Set and a List?)

There are many kinds of programming exercise.
- Pattern-oriented: because you (probably) need these in your project: you can find or design an exercise that requires Command, or Strategy or example
- For someone claiming to be a java "expert", design an exercise that shows a mastery of exception handling and inner-class use.
- Find (or write) some particularly nasty code that your candidate can refactor and write tests for.
- Best of all: don't interrupt your work, turn your current project task into an exercise. No interview exercise can be more relevant than this!
- Avoid algorithm-oriented problems, (sorting, searching, packing, etc) - because libraries exist for this kind of thing so these exercises don't test real-world experience so well.
- Avoid framework-specific problems (eg Swing, Hibernate): an exercise requires too much setup and context, and ordinary spoken Q&A are best for evaluating technology-specific knowledge.

Incorporate test-automation. A solid candidate will grasp testing concepts even if they are not familiar with the frameworks you use.

It's not just about coding and technical skills. This is your chance to sit next to your candidates, to work with them, as if they were already on your team. Do they have a sense of humour? The right kind of humour for your team? Are they comfortable, relaxed, confident? Do they listen, take the time to understand you, and verify that they understood you, before launching into the problem? Do you really want to work with this person?

You're not a born interviewer. You will make mistakes. I did. Get over it. Interview more.

Gladwell argues in Blink that although we make snap judgements all the time, whether we can trust these judgements is a matter of experience. With a few years of interview practice, your snap judgements will gradually become more and more accurate. And maybe, at that point, a firm handshake and a quick, friendly, confident smile will be enough?

Now if there was a way to do this for presidents, and plumbers ... the world might be a different place ...

CSS can replace many lines of Javascript

2008-10-24T16:14:00.003+02:00

Here's a trick that has saved me dozens of lines of javascript. Say you need to toggle your page between two modes - for example beginner/expert, verbose/concise, update/read-only, screen/printer. You could set a cookie or request parameter and reload the page, but that may not be efficient, it calls for a lot of code server-side. More practically, you could write some javascript that iterates over your DOM, identifies target elements, and toggles some aspect of their state in conformity with the desired mode. But again, it's a lot of code, only this time on the client-side.

Or you could do the following. Use a CSS classname to identify elements that should be visible in one mode or the other. For example, ifVerbose and ifConcise.

any-page.html

  <body class='verboseMode'>
    <a href='/blah/blah' class='ifVerbose'>
      This is a link to /blah/blah where you 
      will discover a lot of blah.
    </a>
    <a href='/blah/blah' class='ifConcise'>/blah/blah</a>
  </body>

The CSS is trivial: any ifVerbose element on a conciseMode page is invisible, and vice-versa.

application.css

  .verboseMode .ifConcise {
    display: none;
  }

  .conciseMode .ifVerbose {
    display: none;
  }

All you need now is a tiny bit of javascript to toggle the classname of your root element between conciseMode and verboseMode.

application.js


  var verbose = function(v) {
    if (v) {
      $(document.body).addClassName('verboseMode');
      $(document.body).removeClassName('conciseMode');
    } else {
      $(document.body).addClassName('conciseMode');
      $(document.body).removeClassName('verboseMode');
    }
  }

Much less work than toggling with javascript in a big loop, no? Let the browser's CSS engine do the work!

Sending binary data from Freemarker

2008-10-21T12:22:00.006+02:00

There are probably many better alternatives to writing binary content with Freemarker: for example write your data to the filesystem and let apache serve it. But sometimes you have no choice and you need to serve your png or jpg or doc or pdf from a freemarker template.

The solution involves setting the content type, like when sending javascript from freemarker. Then we need an object having access to the data with a method to write it for us.

send-png-image.ftl

${res.setContentType("image/png")}${action.writeData(res.getOutputStream())}

The framework you are using should have injected the HttpResponse object into the Freemarker context. For example, Webwork/Struts2 creates a "res" variable which you can access from your Freemarker templates. The writeData implementation need not differ much from this:

SendImage.java

 ...

public void writeData(OutputStream os) throws IOException {
   os.write(this.getByteArray(this.image));
 }

...

It would be nice to simply write ${res.outputStream.write(byteArray)} in Freemarker, and dispense with the Java method - but Freemarker wraps the byte[] byteArray in a SequenceAdapter (ooh, a Design Pattern), and doesn't unwrap it again when we just want the byte array. So we need a writeData method or equivalent in java.

The same principle works for other kinds of binary content - photos, movies, documents, pdfs, etc - set the right content-type. If you want the browser to open a "Save As ..." dialog instead of displaying the content inline, add this after the content-type declaration:

${res.setHeader("Content-Disposition", "attachment; filename=${fileName}" )}

Special Note for writing Excel

Set your content-type as follows: ${res.setContentType("application/vnd.ms-excel; charset=UTF-8")}, and then write your data as a HTML table. That's all! Trivial! No POI, no hacks, no bridging to VB. The only thing you need worry about is escaping some of the data so Excel doesn't misinterpret it.

His Serene Highness

2008-10-21T11:25:00.007+02:00

This is Ferdinand-Philippe, the Duke of Orléans, who died in a car accident in 1842. (*).

His statue reminds me of someone I worked with briefly a few years ago. Pompous, arrogant, disdainful, and overdressed. If you're a duke, and the king's son, you can probably get away with it.

If you're a low-ranking manager, try another strategy.

* It was actually a "voiture à cheval", a horse and carriage. Modern vehicles kill people much more effectively, but it is interesting that the culture of death on the roads was already in place so long ago.

risible-db: database migrations in java

2008-10-16T23:39:00.003+02:00

Jean-Philippe Hallot, and I, are pleased to offer the world risible-db, a new, free, really simple, 100% java open-source utility library for managing database schema migrations in a manner not wholly unlike rails migrations.

The class of interest is (somewhat unimaginatively) called Migrations, with a convenience subclass called WebInfMigrations that does a lot of the convention-over-configuration thing for you. Use as follows:

in your Spring applicationContext.xml config

<bean id="migrations" class="risible.db.WebInfMigrations" init-method="start">
  <property name="dataSource" ref="myDataSource"/>
</bean>

You can of course auto-wire the datasource. There is no other property to set. When Spring calls the init-method, start(), risible-db will look in a directory called migrations directly under your application's WEB-INF directory, for *.sql files, order them lexicographically, and execute any that have not already been executed against the current datasource. Here's an example:

/WEB-INF/migrations

001-add-widgets-table.sql
002-add-users-table.sql
003-add-permissions.sql
003-add-widget-tags.sql
004-rename-widgets-to-woggles.sql

select * from migrations;

+---------------------------+
| name                      |
+---------------------------+
| 001-add-widgets-table.sql |
| 002-add-users-table.sql   |
| 003-add-widget-tags.sql   |
+---------------------------+

In this situation, risible-db migrations will execute 003-add-permissions.sql, and 004-rename-widgets-to-woggles.sql, because they are not already installed in the migrations table. Unlike Rails, risible-db considers the whole name of the migration, not just the number. So you can have multiple migrations with the same number; in fact risible doesn't care about the numbers at all, but it's a convenient way for you to keep your migrations in order. If you prefer A-add-widgets.sql, B-add-users.sql, etc, that's ok too.

We found that the strict numbering approach called for a lot of number-management overhead when working in a distributed team - when the half of the team on this continent wanted to add a migration at the same time as the other half on another continent, we needed a way to ensure we wouldn't both use the same number, while simultaneously guaranteeing that the order of migrations respected schema dependencies.

Each .sql file is a plain text file containing one or more sql commands, separated by semicolons. No comments, please.

Notes:

Support for Oracle is coming in the next few days - right now it works only for MySQL

Respect and acknowledgements to Pascal Pratmarty who was the first to say, "well we could do that in java, too!"

future enhancements include down migrations like rails, conditional migrations (eg data migrations only to run in a test environment), other ways to express migrations (java code, for example), and SQL comments. Please comment if there's something on this list (or not) that you can't live without.

download here

Don't search for documentation. This is it.

It's LGPL licensed

Please let us know how it works for you, we'll be happy to hear your feedback.

π is for porn

2008-10-08T22:43:00.003+02:00

Today's favourite from reddit: π stands for porn ... and a host of other nasty things you never expected to see in maths classes ... watch out!

Parenting, Politics, and Manipulation

2008-10-08T13:24:00.003+02:00

One of our first parenting books was a great little volumne called How to Con your Kid. It offers many toddler-survival tactics, my favourite being the offer-a-choice trick.

Yesterday, I was encouraging my daughter (age 2) to get into her stroller so we might go collect her brother at school.

Conan: Into your stroller, sweetie-pie
Daughter: I don't want to go into the stroller, I want to walk!
Conan: Should I fasten the straps, or do you want to do it?
Daughter: I want to do it.
Conan: Hmm. Well, just this once, ok? Sit down and you can strap yourself in.

And in she hops. This technique is so effective it feels like manipulation bordering on unethical. But if the only alternative is physical coercion, it's not so bad. Fortunately (or otherwise), the child eventually learns countermeasures, and it's much less effective by age 4. But by that age dialogue and mutual understanding largely replace the need for coercion.

Then I noticed an eerily parallel conversation going on the other side of the Atlantic:

Uncle Sam: More war, more global warming, more bailouts for rich people, more oppression for the poor.
The People: No, we want transparent, open and fair government!
Uncle Sam: Replublican or Democrat?
The People: Um .. Democrat, this time, please
Uncle Same: Hmm. Well, just this once, ok?

HTML: Scroll table contents without scrolling headers

2008-10-07T13:58:00.007+02:00

I stumbled upon this quite by accident: all you need do is put the content you want scrolled inside a tbody tag, with style='height:nn;overflow-y:auto' where nn is the height you want your content. The tr containing your headers goes outside this tbody. This has been obvious all along to people who understand CSS, but I'm only starting to get to grips with this stuff.

Here's an example, hit view source to see how it works:

foo	bar
0	x
1	y
2	z
3	x
4	y
5	z
6	x
7	y
8	z
9	x

Beats a zillion lines of js and css to do the same thing, no?

It works for Firefox 3, I haven't tested it elsewhere. If anybody out there still has IE, please let me know if it works!

Update : if you want the whole table to scroll horizontally, too keeping the headers aligned with their columns (thanks, Olivier), put the it in a div with style='width:nn;overflow-x:auto'. Thus:

foo	bar	baz
000.00	xxx	toto-titi
100.00	yyy	titi-didi
200.00	zzz	didi-dodo
300.00	xxx	dodo-toto
400.00	yyy	toto-titi
500.00	zzz	titi-didi
600.00	xxx	didi-dodo
700.00	yyy	dodo-toto
800.00	zzz	toto-titi
900.00	xxx	titi-didi

It's not so pretty - the vertical scrollbar is visible only if you've scrolled horizontally all the way to the right. But given that you can scroll with the keyboard or mouse wheel, perhaps that's not such a terrible thing ...

Make Freemarker work with Prototype's Ajax.Request

2008-10-07T13:44:00.004+02:00

The popular Ajax.Updater from Prototype is great for getting little bits of HTML back from your server and sticking them in your client's page somewhere. But Prototype has some other tricks hidden up its sleeve. The Ajax.Request utility (upon which Ajax.Updater is based) has a very nice feature: if the response comes with content-type "application/javascript" (or equivalent), it evaluates the response body as if it were javascript code. Imagine that: the server can send any arbitrary piece of code back to the client to be executed on the client's machine.

Any kind of ajax-based state change could use this technique: a login, a deletion, an insertion. For example, after a deletion, you might wish to return this response:

widget-deleted.ftl

${res.setContentType("application/javascript")};
alert('widget ${widgetId} successfully deleted');
$('div_for_widget_${widgetId}').remove();

- to provide feedback to the user in two ways: an alert, followed by the disappearing of the dom element representing the deleted object.

You might even find this technique useful to resolve the ages-old dilemma of whether to perform input validation on the server or on the client. Up to now, the correct answer has been (frustratingly) "both". But now you can avoid duplicating validation code in javascript: instead you have a javascript response that provides server-side validation-failed feedback to your user.

Here's another example, for an application that takes comments, and requires a non-empty comment. The first indicates a successful comment submission:

comment-ok.ftl

${res.setContentType("application/javascript")}
alert("Your comments have been noted. Thank you.");
$('commentForm').hide();

And the second, failure:

comment-failed.ftl

${res.setContentType("application/javascript")}
alert("You didn't enter a comment!");

Your controller decides which response template to evaluate after having performed the relevant validation. Webwork/Struts2 makes this decision based on its "struts.xml" configuration and the outcome of your action.

The first line in each of these examples sets the content type of the response so that Prototype knows to interpret it as code. The MVC framework you are using should have inserted some variable in the Freemarker context to represent the response - in the case of Webwork/Struts2, it's called "res".

Don't go overboard with Ajax though - keep in mind Ajax breaks bookmarkability and browsers' back/forward buttons. Distinguish between requests that access and display resources - a bookmarkable url is nice here, and actions that modify state on the server - Ajax.Request might be useful here, unless the state change should take you to a new page.

Let me know how this works for you!

Social Bookmarking Howto for Blogger

2008-09-30T14:36:00.006+02:00

Attentive readers will have noticed the shiny new social bookmarking icon links around the bottom of my entries. I'm catching up with 2005 here. Last month I caught up with 2004 by including ads. You can't imagine how rich I'm feeling. Actually, you can ... but anyway. In 5 years, I'll add a flickr widget and be fully up to date with 2006. For that, I'll need something called a "photostream".

... You know, it's horrible when everyone thinks you're a geek but in fact you haven't a clue what's going on on the internet?

Anyway, I followed Enrico Suarvé's howto for adding these icons to a Blogger template. For someone who claims to be a hopeless blogger, he does an excellent job. Read his howto because I'm not going to repeat it here.

I was able to make only one little improvement: instead of making my own "submitbuttons" CSS class as he recommends, I used Blogger's "item-action" and "icon-action" classes. So I have a little less work to do, and my Blogger template code looks like this:


<span class='item-action'>
  <a Title='digg it' expr:href='"http://digg.com/submit?phase=3&url=" + data:post.url + "&title=" + data:post.title'>
    <img alt=' Digg ' border='0' class='icon-action' src='path/to/digg.png'/>
  </a>
 
  <a Title='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title'>
    <img alt='Delicious' border='0' class='icon-action' src='http://path/to/delicious.png'/>
  </a>
 
  <a Title='reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url'>
    <img alt='Reddit' border='0' class='icon-action' src='http://path/to/reddit.png'/>
  </a>
 
  <a Title='SlashDot' expr:href='"http://slashdot.org/bookmark.pl?url=" + data:post.url + "&title=" + data:post.title'>
    <img alt='SlashDot' border='0' class='icon-action' src='http://path/to/slashdot.png'/>
  </a>
</span>

Paste this into your Blogger html template somewhere sensible. Tweak it until you like it. And upload the relevant icons somewhere so you can link to them.

At first I thought I should include furl and fark and magnolia and a zillion other SB sites I'd never even heard of, but in the end I figured that was kind of immodest (and you should know that I'm the modestest person you're ever likely to meet), so I retained only sites that I use: and , and occasionally: , and . (Hey, I even have an account on and , now that's so 2007! I'm getting there!)

Damn. I've just broken my resolution to not blog about blogging. Again!

is deprecated: use CSS instead!

2008-09-29T14:19:00.001+02:00

Being from the 1990's, I like to use tables and the good ol' <center> tag to control my layout. Apparently, that's not polite any more. When I get my CSS Guru 9th-Dan Black Belt certification, I'll let you know why.

In the meantime, the totally modern way to centre a block, I learned today, is to give it a fixed width and set left and right margins to "auto". Thus:

.centred {
  margin-left: auto;
  margin-right: auto;
  width: 10em;
}

The block containing this text is centred relative to its parent. Note that the text itself isn't centred. Use text-align:center for that.

The difference, afaict, is that nowadays the element to be centered is responsible for its centredness, whereas in the old days, the element's parent decided how the child would behave. Very modern, them dudes at w3c. I try to let my children decide how to behave, too. Who would have thought CSS teaches family values?

Keystroke Strikes Again

2008-09-26T23:20:00.005+02:00

I wanted to preview my last blog entry just to check everything was ok and I hit control-F9, my intellij shortcut for "build project". This is very, very grave. It's like when I take out my bus pass to get into my house. Or this:

image copyright ??? please let me know!

One from the archives

2008-09-26T16:46:00.007+02:00

Ten years ago I wrote a little java applet (yes, an applet. Imagine that!) that plays Reversi, aka Othello - as an exercise for a Game Theory course I was taking.

I dug it up, and amazingly it compiles, runs and even works!

You can play against my little Reversi here (and it's totally free).

The program is a fine example of alpha-beta game tree pruning, using an evaluation function which takes into account the positions of the stones as well as the mobility of each player.

I'm sure one could write a much more sophisticated Reversi player, but even with low lookahead (4) it crushes me.

Download and play with the source code too - I'm releasing it open-source (under GPL). Just don't judge me by it - it was ten years ago, ok? There are member variables with names starting with uppercase letters ... there are ... ugh ... comments ... and all sorts of other atrocities in there. OMG there was even a new String("foo"); in there. I got rid of those, but it was too much effort to clean it up entirely. I don't write like that any more. I would like to say I never did, but I wasn't born perfect either ...

Expand div to contain floated child elements

2008-09-24T11:38:00.004+02:00

I am sure I am one among many thousands who will be eternally indebted to Quirksmode for its wealth of browser wisdom. Today I learned how to make a container expand to surround all of its floated child elements. On the container, put

style="overflow:auto;"

That's all! At least, for firefox - other browsers need width as well.

A simple Javascript function to move elements

2008-09-19T15:44:00.005+02:00

The proper way to drag divs or images or other html elements using javascript is, of course, to use a well-known and established framework for doing it - scriptaculous, for example. Even better would be to use Firefox's fancy new drag/drop handlers (as soon as they work, that is). But if you suffer, as I do, from NIH Syndrome, here's a roll-your-own version.

Just so we agree on what dragging is: the user clicks on an object, and while moving the mouse, the object follows the mouse around, until the user releases the mouse button. In the version below, we distinguish between the target (the thing to be moved), and the handle (the thing the user clicks on in order to move the target. A titlebar, for example).

The following has been tested on FF3 and almost certainly won't work on Exploder. But there are plenty of resources out there on hacking IE until it works.

Enough talking, here's the good stuff:


var makeMovable = function(target, handle) {
  target = $(target);

  $(handle).onmousedown = function(event) {
    var initialXOffset = target.offsetLeft - event.pageX;
    var initialYOffset = target.offsetTop - event.pageY;

    document.onmousemove = function(event) {
      target.style.left = event.pageX + initialXOffset;
      target.style.top = event.pageY + initialYOffset; 
    }

    document.onmouseup = function() {
      document.onmousemove = null;
      document.onmouseup = null;
    }

    return false;
  }
}

Once your HTML elements are defined, all you need do is call makeMovable with the relevant params:

<div id="myContent" style="position:absolute;left:100px;top:100px;">
  <img id="myHandle" src="/images/move_handle.png" />
  you can move this text by dragging the handle
</div>

<script type="text/javascript">
      makeMovable("myContent", "myHandle");
</script>

(Of course, you might prefer to take an unobtrusive approach and have all movable elements wired up using identifiers and class names. Exercise for reader).

So here's what's going on. The principle is simple: makeMovable sets a "mousedown" listener on the handle - since that's what we're waiting for our user to click on. Once mousedown is triggered, we calculate how far away the mouse click was from the corner of the target. This gets stored in initialXOffset and initialYOffset. The goal now is just to make sure that the target is always this distance from the mouse, as the mouse moves around.

So we need a mousemove listener. Curiously, mousemove has to be on document - you would think it should go on the handle instead because the mouse is necessarily over the handle when we get the initial mousedown - but unless it's document.onmousemove, Firefox gets all confused and thinks you're trying to select text at the same time as moving stuff around.

The mousemove listener does the real work: it sets the top and left style elements of the target so as to maintain the original offset from the mouse position. Note that the original style declaration of the target div includes position:absolute. Without this, the top and left style elements are completely ignored, and you won't be able to move anything.

Remember to return false; at the end of onmousedown. Without this line, it mostly works, but FF also initiates its internal drag handler as well as yours, resulting in angry users tearing at their screens in frustration, and the resulting drag behaviour isn't at all intuitive or pleasant.

The last word goes to onmouseup: once the user lets go of the mouse, we should restore document.onmousemove and document.onmouseup to whatever they were before. I'm being lazy here and setting them to null. Umm ... exercise for reader ...

If you're not using Prototype, replace $(...) with document.getElementById(...).

You can write similar code for resizing an element - you would adjust the width and height style elements instead of top and left.

Leave a comment if this works for you, or more importantly, if it doesn't. Leave a comment even if there's some other javascript question bugging you. I'm curious.

On Learning and Falling

2008-09-19T14:13:00.004+02:00

Pascal Pratmarty's comment in a recent article on conflict resolution triggered some painful yet fond memories of learning ice-skating.

"Remember this: to be a learner, you’ve got to be willing to be a fool."

This will sound very odd if you've only tried skating once or twice: it's very difficult to fall. Once you figure out balance, your body clings to it, not letting your delicate elbows and knees hit that hard, cold ice.

I had learned to go forward, but people all around me were spinning, coasting backwards, jumping, and doing those awesome screech-skid stops. Envy filled me.

Your body learns these moves, not your mind, and can learn only by experiencing them. I had to push my reluctant flesh beyond what it was comfortable with. I had to force myself to fall.

It worked. Now, I can wiggle backwards around the rink, mostly avoiding collisions. I have yet to learn stopping though ...

Curiously, the pain of falling is not what inhibited me the most - you get over that fast. It was the eyes of all those people. I knew they were looking at me thinking: the fool.

I try hard, but I wish I could be a better fool.

Hosting in France

2008-09-17T22:20:00.006+02:00

It's hard to find a decent hosting provider. I used Textdrive for a while, but my rails processes kept on getting killed due to some limitation on memory consumption. I'm sure I was doing something awfully wrong (besides using fcgi), but I switched to slicehost (with apache mod-load-balancer and mongrel, a big improvement already). Still, it feels horribly slow, and again, being a bit of a rails newbie, I'm sure I'm doing something wrong.

So, to get to the point, I looked for a hosting provider in France to see if I could blame the network instead of me. Ouch. One look at the webhostingtalk review discouraged me from ever going near OVH. Dedibox, on the other hand, didn't seem to have such reputation issues, and their offer looks really good (physical dedicated server, 2GB RAM for EUR30/month compared to Slicehost's 256MB RAM VPS at $20/month). They have an absurd restriction on selling only to French residents, but I have a workaround for that. So I started the signup process, expecting to type in my name, email, credit card number, and choice of plan, and then be up and running in a few minutes. Slicehost sets the bar very high in this area. But no - they needed my phone number too, which they needed to confirm by sending me an SMS with a code I needed in order to proceed with signup.

Credit card? No - they want your bank account. With a severe warning in red that they will sue you if you deliberately offer false details. And then you have to print out your bank details and sign an authorisation for Dedibox to charge your account, and mail it to them. Surprisingly, they don't have an option for payment by sheep or goat. I was a little bit uncomfortable typing in all this bank information without numerous assurances in the surrounding text that no charge would be made unless and until I had my server, but I had little choice if I wanted to give these guys a chance.

Ok ok now you're thinking well what do you expect, that's French bureaucracy for you. Well for once in my life I figured I would click on that pesky "terms and conditions" link that I was about to claim to have read, understood, and accepted. Pretty quickly, I had read, understood, and totally not accepted that they "guarantee" that my server will be ready in a maximum of 35 days.

35 days ???? !!!!

"Wtf?", one might think. And: if they fail to deliver in 35 days, I have the right to cancel the contract - by sending them a registered letter to that effect. Double wtf.

So the long and the short of it is, I didn't click on the "I have read and accept the terms and conditions blah blah blah" box, and I didn't click on "proceed", and I'm not getting a Dedibox. I wonder who does? Do you have to hate your customers in order to be successful in France? Is that what they teach in business schools?

Now that the US is falling to pieces, the rest of the world is going to scramble to take its place on the top of the economic dunghill. Does anyone know where I might get my CV translated into Chinese or Hindi?

An Incredible Thread

2008-09-16T20:43:00.006+02:00

A few weeks ago, I read Halting State by Charles Stross. WARNING: potential spoiler follows - It's a novel set in the future, about a bank robbery in a virtual world, said robbery having far-reaching implications for global cyberterrorisim, including compromise of Europe's root servers and digital certificates, handing control of the continent's core infrastructure (police, transport, banking, everything) to a gang of Chinese hackers who possibly think it's all just a game. The highlight is when Jack looks up to the virtual sky at a flock of virtual birds flying past and realises the bad guys are encoding messages in the detaild of their flight paths.

"The traffic looks like game-play to [...] NSA or whoever's sniffing packets; looking in-game for characters run by Abdullah and Salim holding private chat about blowing up the White House garden gnomes won't get you a handle on what's going on because they're not using the game as a lydic universe to chat in, they're using it as a transport layer! They're tunnelling TCP/IP over AD&D!" (p.299)

Oscar Wilde said "Life imitates Art". And today Wired.com describes US Congress and Pentagon fears of terrorists chatting in World of Warcraft to plot an ATTACK ON AMERICA OMG OMG GET THE DUCT TAPE HONEY WHERES MY .32??!!!1!!

A Credible Threat, in order to be useful to a scaremonger, must be easily understood by the population purportedly under attack. A heavy reliance on popolar stereotypes is customary, but by broadening the stereotype to encompass virtual reality, the threat authors postpone threat fatigue and get better ROI on their fiction investment. The problem with Stross's scenario is that it's far too technical. A politucian wouldn't have a clue how to explain it, while a smart terrorist (bad, bad guys) could do a lot worse, but the guy on the street has mostly figured out online chat.

Those bad, bad terrorists wouldn't even have to go as far as Strosss describes. Combine basic cryptography, steganography, and any of the myriad ways of communicating (internet or otherwise), and you can undetectably send any message you want while it looks like you're only sending a picture of the kids to their grandmother in a village in Saudi Arabia. Or tunnel encrypted instructions through common misppellings or bad grammar in bot-generated chat in any of a million online forums. Wake up, CIA, you can't detect this stuff! The only solution is too shut down the world's entire telecommunications infrastructure - but that would be bad for business.

Of course, the online subversion goes he other way, too. Did you know that the CIA runs Facebook? Its Hamming Distance from "FactBook" (as in "The World Factbook") is only 1, so it's much easier for CIA agents to tipe. I don't know whether other Facebook constpiracy theorists had spotted that. Did you spot it?

What is the Truth? Somewhere out there, someone is laughing their arse off. Is it the bad guys, or the badder guys?

Subpixel Rendering

2008-09-16T14:29:00.011+02:00

I just read about sub-pixel rendering on good ol' wikipedia. If you've ever needed to draw a vertical line exactly between two pixels, subpixel rendering is what you're looking for.

On an LCD screen, each pixel is three little bars, one red, one green, one blue. All on looks like white, all off like black.

The subpixel trick is to light, for example, the blue bar of one pixel, and the red and green bars of the next pixel to the right. The effect is a white pixel, because you have a red bar, a green bar, and a blue bar, all together, all lit up.

Here's a little image I made with iconfu just now:

Below is how it looks enlarged, so you see each pixel value. Notice that there are no black or white vertical lines. The appearance of black and white is a side-effect of the way sub-pixels are lined up on an LCD screen - and if you're using a CRT or an LCD that doesn't order its subpixels the same way, you'll be wondering what the hell I'm talking about.

Ok, that was the enlarged image, but in case you're having doubts, this is how it looks if you take a traditional screenshot (ie, with your camera). Here you can see how each pixel is lit and where the black and white lines come from.

You can also see that this trick can't work horizontally: there is no alignment of pixels to exploit in this direction. This is the same image, rotated:

And if we rotate it once more, the alignment doesn't work at all, and we lose our black and white lines ...

You can't imagine how many problems this solves. Not world hunger, unfortunately, but let's say you're drawing a vertical arrow in a 16x16 icon. You want a sharp point on your arrow, but if you make the tip 1 pixel wide the arrow won't be centered in the icon. Subpixel rendering is the solution! Similarly, you can control how curvy a curve is by lighting only the pixels that make your curve smoother: a curve going up and right (the top-left corner of a rounded-corners box, for example), would benefit from a little dash of blue on the outside, whereas the curves on the other side would benefit from a little bit of red.

Now, wasn't that fascinating ... back to work ...

please don't fix this

2008-09-16T10:14:00.006+02:00

My iPhoto (6.0.6) has an awesome bug (at least I suppose it's a bug) if you adjust exposure down after having fiddled a bit with light levels. Resulting in this magnificent stained glass from St. Merry, next to the Pompidou Centre:

The statue of the saint holding the baby reminds me how intimately connected religion and politics are.

List foreign key constraints in Oracle and MySQL

2008-09-05T13:06:00.004+02:00

Sometimes you want a list of all the associations in your database. You're supposed to know this from your Hibernate mappings, or from your ActiveRecord declarations, but sometimes you just need to dig this stuff out of a legacy database with its cryptic prehistoric naming conventions layered on top of one another like geological rock strata.

Anyway, I digress. As you might imagine, this is a simple select in MySQL, and a four-table join in Oracle.

Suppose you've had the original idea of building a brilliant e-commerce site. You have Clients, Orders, Products, and LineItems, with the usual associations.

This is the kind of output you want:


+-----------------------+-------------+
| foreign key           | references  |
+-----------------------+-------------+
| orders.client_id      | clients.id  |
| line_items.order_id   | orders.id   |
| line_items.product_id | products.id |
+-----------------------+-------------+

With MySQL:

select 
    concat(table_name, '.', column_name) as 'foreign key',  
    concat(referenced_table_name, '.', referenced_column_name) as 'references'
from
    information_schema.key_column_usage
where
    referenced_table_name is not null;

With Oracle (9-ish, probably 10 too, it's ages since I've actually used this)

select
    col.table_name || '.' || col.column_name as foreign_key,
    rel.table_name || '.' || rel.column_name as references
from
    user_tab_columns col
    join user_cons_columns con 
      on col.table_name = con.table_name 
     and col.column_name = con.column_name
    join user_constraints cc 
      on con.constraint_name = cc.constraint_name
    join user_cons_columns rel 
      on cc.r_constraint_name = rel.constraint_name 
     and con.position = rel.position
where
    cc.constraint_type = 'R'

I cry when I behold the beauty of Oracle's meta data model. But we'll hold off the religious wars for another day. I know it's not your fault you're using Oracle.

HTH.