iphone demo

(filed under programming)

I was just playing around with iPhone css animations.
Here is a preliminary demo


Javascript Safe eval method using Narcissus

(filed under programming)

In my new web project (I will talk about it later... ;-) I need a way to evaluate javascript that is contributed by third party users of the site.

But javascript is fundamentally unsafe, because the browser objects are globally available in javascript. Once you give your users access to add javascripts to your site, they can alter your site completely!
They can steal cookies and crosspost it to their own domain, pull up unexpected html, ... the possibilities for evil hackers are endless.

So, I started to look around for some solutions:

These approaches did not work out. Adsafe was too restricted. It turns out that in order to get safe javascript, you really need to throw a lot of things out. Even the *this* keyword:

  function TryThis(value)
    if (this.alert)
      this.alert("Hi I can take control over your window!");

  var o=new TryThis(100); // if you use the function this way
                          // 'this' is just a harmless object.

  // but if you leave out the new keyword..
  // then 'this' points to the browsers window object! 

So AdSafe strips javascript until nothing that I wanted is left in the language. Caja requires java, which I do not want to use. Ruby2js was not very well documented, and seemed more a command line utility than an API usable in the web server. I didn't try really hard to get this running, though, because I prefer that the users can enter javascript and don't have to learn another language for the client side.

Porting Narcissus

But then I thought, if javascript itself is so leaky, wouldn't it be much safer if I just could start a separate javascript interpreter in the browser. And luckily, there is a javascript interpreter written in javascript. It's called, for obvious reasons, Narcissus. So I downloaded it, and discovered that it runs in no single browser at all. This is because the author of Narcissus is also the author of spidermonkey, and he used spidermonkey specific code, that isn't even available in firefox yet.

It took some hours hard debugging (especially to make it work on IE too), but I've got a version running that works on IE, firefox, google chrome. It is a quick and dirty port, not thoroughly tested. Probably deep down it is not 100% compatible with all the language features of javascript.
But for 99.9% compatibility, it will work great. Another disclaimer: at present it uses global objects AND it pollutes your Object.prototype which isn't very nice if you use a lot of javascript libraries.

Running javascript in javascript

It is amazing to see that you can actually run javascript in javascript. Haven't run any performance tests yet, but for short scripts performance looks fine. It is not possible to access browser objects from the narcissus scripts (let me know if you disagree with that). You can expose browser functionality by wrapping it into functions. (Don't wrap it into objects because then they can be readed by the narcissus scripts)
Here's how you use it:

  // to wrap the browser alert function, assign it to the
  // narcissus global object. 
  global.alert=function(s) { 
     window.alert("Narcissus alert:"+s);
  // evaluate: script, name, line number.
  // name and line number are for error reporting,
  // but this seems to be broken. 
  evaluate("alert('hello world');",'eval.js',1); 

As you will see, the alert that pops up says Narcissus alert:hello world. So the alert function is no longer the browser alert function, and there is no way you can access any browser object (like window, document, top, history, XMLHTTPRequest...) from the Narcissus script.
I have made a sandbox, where you can try it out.



(filed under programming)

Appjet is so very cool! It is a service (currently very very alpha) to host a javascript application in the 'cloud'.

Because javascript is my favourite programming language (really really rapid to develop in) I'm very pleased that something like this exists. I've created a little test script: a small webserver, so that I can host a site on appjet instead of just a script. It isn't finished yet, but here you can find my webserver


Android telefoon programmeren

(filed under programming)

Als je je registreert is de android telefoon is bij google te koop voor $399. Ook al is het geen geweldige telefoon...

Het boeiende aan Android is dat de telefoon in principe te programmeren is (tot op zekere hoogte) zonder ook maar 1 letter code naar het apparaat zelf te verplaatsen.
Dit komt omdat Google Gears in de browser van Android is ingebouwd.

Google Gears kan een website locaal opslaan, een locale database geven en een shortcut. Alles wat je dus nodig hebt voor een eenvoudige Android applicatie is wat html, javascript en een webserver!

Zeer aantrekkelijk.... jammer dat de telefoon een beetje achterloopt met veel huidige topmodellen.



(filed under programming)

I created a new application. It is a spectacular web application to create notes. Spectacular because it can also be used when you are not online!
It works with firefox 2.0. Other browsers haven't been tested yet.

It will be soon available for download. You can preview read only version here. The notebook scales if you increase/decrease your browsers font size.


experiences with laszlo

(filed under programming)

After a long road of searching for the right app/plugin/tool to write a nice image gallery for this blog, which I am currently improving with tons of nice feats, I stumbled upon a programming framework called OpenLaszlo. It is actually the predecessor of the Adobe Flex framework.

If gallery flash/dhtml scripts were extremely difficult to obtain, I would have had a good reason to try out Laszlo. But I've allways longed to do something with flash. I tried sometimes, but was always very frustrated by the fact that flash does not seem to have source code and I never seem to possess a working flash editor.

Laszlo is a flash compiler (it can target to DHTML too). But it is also a framework which makes flash look more like html. Code is notated in xml files. Here is a sample XML file, to give an impression what it looks like:

  <button onclick="vw.toggleSize()" 
          text="Toggle Size" />
  <view id="vw" y="30" width="100" height="200" 
        bgcolor="blue" >
    <wrappinglayout spacing="10" xinset="5" yinset="5" />
    <view bgcolor="yellow" width="20" height="20" />
    <view bgcolor="yellow" width="20" height="20" />
    <view bgcolor="yellow" width="20" height="20" />
    <view bgcolor="yellow" width="20" height="20" />
    <view bgcolor="yellow" width="20" height="20" />
    <method name="toggleSize">
      var w = this.width;
      var h = this.height;

The reason why the code is xml is probably because Laszlo emphasizes declarative code and familiarity with the html/javascript combination. From a technical point of view, XML is a bad choice. The underlying language, javascript, requires you to use symbols like && and >. So this means that you often need CDATA sections to escape the javascript.

The Laszlo experience was enjoyable for me. I feel at home in html and I could instantly program something in Laszlo. But i did not manage to write my gallery in a single afternoon. The framework was too large and there were too many new elements to be that productive.

After one afternoon of laszlo I also have my fundamental doubts about flash and about laszlo. Layout management of flash and text rendering capabilities seem limited, so for rich sites I think plain old dhtml (enhanced with flash if special graphics are needed) is superior. (Perhaps I should try to use Laszlo that way... since it can also target dhtml) But the ajax framework of laszlo... well, it is 2008 now and there are 10 million ajax frameworks out there. And then there is the gui components question... new frameworks need rich gui components. Laszlo provides a gui library, and i was impressed by the clean xml needed to build a form. The look and feel are not very great: it looks ugly and grey in the default look. And the components are not as rich as for example swing components.
Also I suspect the performance of the framework is slower than a java applet would be. I don't have perfomance numbers but this is just my impression after one afternoon of usage.

In Laszlo, objects can have computed properties. For instance: The x coordinate of component 2 is the x coordinate of component 1 plus the width of component 1. Once you resize component 1,component 2 is automagically moved to the right.
JavaFX is clearly inspired by flex (and so by Laszlo), and also has this notion of computed properties. Both microsoft's Silverlight and JavaFX bring desktop gui libraries (microsoft WinForms, swing) to the web environment via a browser plugin.
The future of application building in your browser is ready for a next step. We will see wat it brings...

Meanwhile, I'll still have to make a gallery plugin for my blog.


JSpring presentation: Swing and XUL

(filed under programming)

I had this talk on the NLJUG's JSpring event, about SwiXml, a XUL tool that I use to render the GUI in ComicBookEdit (and also in an unreleased java game)

I made a powerpoint presentation and some demo's wich are much alike to my earlier Thinlet demo's.

I liked giving a talk about a technical topic. And I like to do it again, in the future....

Jan's vijf seconden roem op JSpring

(filed under programming)

Het zit er weer op, Jspring 2007, waar Jan dus zijn eerste 5 seconden roem beleefde door een presentatie te geven over SwiXml, een XUL tool die in ComicBookEdit wordt gebruikt.

De presentatie ging redelijk zoals gepland. In het zaaltje zaten zo'n 70?-100? mensen. Ik wist mijn verhaal binnen de tijd te vertellen. In hoeverre het praatje enige indruk maakte op hoeveel procent van de zaal, vind ik erg moeilijk te beoordelen. Maar er waren genoeg vragenstellers, wat ik als een positief teken beschouw. Helaas kon ik die mensen niet echt de ruimte gunnen die ik zou willen, want ik had mijn presentatie strak af in de maximale tijd. Tijdens het oefenen hield ik altijd een paar minuten over. Het verschil komt vermoedelijk doordat de zaal ook niet op tijd dichtging waardoor de sessie vermoedelijk toch 5 minuten korter was dan volgens 'officiele' tijden. Maar dat is achteraf speculeren... ik zat in een dusdanige tunnelvisie dat ik geen moment op de klok keek. Net zo min als ik de mensen in de zaal echt goed geteld heb.

Ook waren er een paar (maar niet veel) napraters. Gegeven het feit dat elke naprater dubbel telt als je vlak voor de lunch presenteert ;-) denk ik dat al deze dingen er wel op wijzen dat het praatje wel overkwam...

Uiteraard ging 1 van de demo's mis! Dat hoort zo bij een 'officiele presentatie'. Hoe kon dat nu weer? Ik heb de dag van te voren de demo applicatie nog uitgebreid, om de Gridbag- en de menu voorbeelden toe te voegen. Deze eigenlijk niet om ze echt goed te presenteren, maar meer omdat ze gewoon leuk zijn voor achteraf, als mensen de demo file's kunnen downloaden.

Ik had per ongeluk een oudere versie aangepast en deze meegenomen richting JSpring.... very stupid! (En toch weer iets niet getest natuurlijk).

Maar al met al vond ik het presenteren een bijzonder leuke ervaring. Ik ga het nog wel vaker doen. Een bijzonder boeiend onderdeel van de ervaring was ook van te voren in de "artiestenkamer" nog even alles doornemen, en daar andere sprekers te ontmoeten en te zien wat die vlak voor hun presentatie nog deden.

Sommigen zaten heel geconcentreerd te werken. Anderen waren juist heel erg uit op een gesprek. Ikzelf was vooral 'niets aan het doen'. Een soort van mediteren. Mijzelf heel prettig voelen. Ik voelde me inderdaad prettig... kon heel goed alle spanning even loslaten. De spanning kwam vlak van te voren, toen ik de zaal binnen ging, wel weer terug, natuurlijk, maar het was echt merkwaardig hoe rustig ik kon worden, en hoe erg ik ook kon genieten van de stilte, vlak voor die presentatie. Dat moment van stilte zou ik ook niet graag gemist willen hebben!

Ik heb ook nog wat gekletst met de andere sprekers. 1 spreker vertelde mij dat hij het wel vaker doet, en dat hij het heel erg leuk vind, en dat voor hem de uitdaging ook is om voor steeds grotere groepen presentaties te geven.

Dat heb ik nu ook wel een klein beetje... maar tegelijkertijd heeft het spreken-voor-publiek bij mij ook weer de herinnering opgeroepen aan schrijven-voor-publiek. Je kunt, zelfs in een kort artikel, je veel genuanceerder en dieper uitdrukken dan in zo'n 50 minuten praatje ooit zou lukken. Het lukken of niet lukken van de communicatie is veel minder afhankelijk van 1 piekmoment. Daar staat dan weer tegenover dat je met een goed praatje misschien de harten van mensen kunt stelen en daardoor meer overtuigend kunt zijn dan met een goed artikel.

Of ik nu zo'n sterspreker ben dat ik echt de harten van mensen kan stelen... betwijfel ik, maar ik ga het vast nog wel eens vaker proberen, als het zo uitkomt.

Status update over miniciv

(filed under programming)

ofwel, wat doet zo'n programmeur nou de hele dag?

Skinnen en XUL-layouten (niet dat ik één van die dingen ooit eerder een hele dag gedaan had). Ik kon voor Miniciv kiezen uit


Ik heb gekozen voor SWiXML omdat ik dan tenminste makkelijk skins kon krijgen. Een geweldige website hiervoor is javootoo waar ik een degelijke Duitse skin vond, tinyLAF genaamd. Hiermee kon ik lekker op de "golden" tour gaan...

TinyLAF aan de praat krijgen was heel gemakkelijk... maar er ging nog heel veel tijd zitten in het maken van de XUL-file voor Miniciv (ook zichtbaar in de afbeelding...). Het probleem hiermee was dat SwiXML eventuele excepties gaarne voor je afvangt en ze wegtovert. Ik moest bijna een hele dag debuggen in SwiXML voordat ik er achter kwam dat ik GridBagConstraints.LINE_START verkeerd had gespeld. Dat is wel heel jammer aan deze library. Als ie niet open source was geweest had ie nu echt in de prullenbak gemoeten, dan was ik er nooit achter gekomen...

toch blijf ik het nu wel gebruiken... je code blijft er mooi clean van en ik weet ondertussen op welke punten ik problemen van mijn spelfouten kan verwachten...

Ook wel zorgwekkend is wat al die libraries doen met je downloadgrootte .... tot nu toe:

We zitten dus al over de 1Mb, ai...!


Eindelijk iets nieuws dan - Thinlet XUL Tutorial

(filed under programming)

updated at 2006-02-10

Ik was best wel ziek de afgelopen 2 dagen... maar het bloed kruipt waar het niet gaan kan. Dus gisteravond, toen het net weer een beetje beter ging, eindelijk eens een beloofde update voor de website gemaakt... alweer totaal niet hetgeen ik gepland had... maar ziehier de Thinlet XUL tutorial die zijn eigen source kan tonen, en runnen!

tijs wrote at 2006-02-04 :


wanneer komt de volgende aflevering van de strip?

spreadsheet algorithm finished

(filed under programming)

I've finished the spreadsheet algorithm. You can download it by clicking the "some other things" link above.

At work I use it for populating comboboxes. I add two nodes for each combobox. If I have a combobox called "brand" for example, I add a node called brand and a node called pop:brand.

I also specify a relation: pop:brand calculates/defines brand. This relation is nice because changing a combo's population might change its value (this happens if the current value is not in the new population), so if that happens, things which are dependand on the value, brand also need to be recalculated.

Also you can use the calculation event for values to load them during form start up.

Another idea: haven't tried it self yet - you might also have a node state:brand which represent the control-state of the brand combobox. (If it is enabled or disabled).

spreadsheet algorithm

(filed under programming)

Some years ago Doeke and I were buzy on a project called wForms. The idea was to make some sort of simplified XFORMS like language that could run in current browsers.

It triggered me to implement the Recalculation sequence algorithm of XFORMS in javascript.

The implementation I made was only accessible via an associated Expression object. You had to make javascript expressions like $a=$b+$c where all $ variables were retrieved from underlying data-objects and the relations were automatically parsed from the expressions. Typical usage:

	ev.SetData('b',new Value(10));
	ev.SetData('d',new Value(22));
	ev.SetData('e',new Value(1));
	ev.SetData('f',new Value(3));
	DEBUG("RESULTAAT :"+ev.GetValue('a'));

Nowadays, i am yet again triggered to use a spreadsheet algorithm. But I am more minimalistic and better in designing cleaner interfaces (at least, I hope I am). I've written a new implementation that can be far easier coupled to other code because it doesnt have expressions and it doesnt know anything at all about the nodes it calcs. In fact, it just fires an event to do the calcing. This is the synopsis:

/*** Evaluator class **/
		var e=new Evaluator();
		 e.addNode('a',['b','d']);// b and d depend on a
     e.prepare(); // a master dependancy graph is built.

     e.addCalcEventListener(function(nodeName){});  // listeners that need to trigger/perform the actual calculation.

     e.calc(); // calcs all , based on the masterGraph.
     e.calc([['c']) // calcs only the nodes based on the fact that c is dirty. 

   Asynchronous use:


I will upload the code soon.

Blog menu