i just finished my first Android project for the city of Hamburg, through the agency tallence GmbH. It is a quite simple content-driven application for an upcoming event in Hamburg, the Hafengeburtstag. You can access all important information around the different locations, news, hotels and so on.

[See image gallery at www.ghost23.de]

The app is built for android 4, but is backwards compatible down to 2.3. It features offline content with a cache sync mechanism, built with a little sqlite database. I also use the greenDAO database layer, which is a nice little library for accessing data in a no-sql like way.

a little post about some client work, i just finished a couple of weeks ago. With a nice team at t8y we developed the onething.com website for a major German car maker.

I was responsible for the JavaScript architecture and built many of the sites components, like charts, auto-resizing type-components, dynamic headers, various content-boxes and so on.

The site uses backbone.js together with require.js, which i have come to like quite a lot.

The project took 3 months, including prototyping.

What did I learn? Well, i learned about backbone.js. For example, that backbones has this nice shim feature, where you can let backbone correctly load JavaScript libraries, which are not compatible with the AMD principle. Very handy. I also learned about Raphael.js and that it’s a pity  that raphael does not support real groups, makes scaling a tedious job. And finally i once again confirmed my belief, that you should carefully assess a library, that you want to use. If there is little to no activity on googlecode or github, that’s a bad sign.

[See image gallery at www.ghost23.de]

this post will be about language and thus i have to send out a word of warning first, because i am not writing in my mother language, so i am not 100% sure, if I always use the right words. Anyway, let’s give it a try.

There are many hot debates about a variety of aspects of JavaScript. One of them is the question, if it is a wise thing to emulate classes, knowing that it does not support them natively. I want to give you my perspective on this subject.

Let’s look at human languages first. With human languages, we find, that some languages are very good a describing certain things than others. You have probably heard of the Inuit having dozens of different words for different types of ice and snow. That of course also means, that some languages lack the words to describe things. Sometimes this makes people use the respective words from other languages (I believe in English you also say “Gesundheit”) and sometimes people start to paraphrase, what they want to say. Let’s take GDP, for example: Gross domestic product. There is no word, that directly defines the concept behind GDP, that’s why we use this combination of three words to paraphrase it (in German, it is even weirder, literally translated we say “gross social product”).

If one has never paid attention to the subject of macro economics in school or has never read any newspapers and so on, she or he will have problems understanding, what it means. So in order to understand certain paraphrases, you have to have some kind of understanding of the underlying concepts. Now the good thing is, that after a while, some of those paraphrases really catch on and get used by a majority of people. So today, we normally understand, what is meant by GDP, not because the paraphrase is very elegant, but because it is used so widely, that a majority of people knows, what it stands for. Of course, other paraphrases do not get adopted and thus almost nobody knows, what it means.

Now back to programming languages. I think, we have similar mechanisms here. There are programming languages, which are able to say things, which other languages cannot directly say. For instance, C# in my opinion is a language, that has a pretty extensive vocabulary, so it can describe quite a lot of concepts. Of course, the downside is, you have to learn all this vocabulary. JavaScript’s vocabulary is simpler (i hear, it was developed in 10 days, so no wonder). So things, that can be said directly in C# cannot be said directly in JavaScript. So, that’s where paraphrasing comes into play. Although we cannot say some things in JavaScript directly, we can still paraphrase, what we mean. So for example, JavaScript has no word for the concept of a class. The best thing we can do is to paraphrase it. Some of those paraphrases are more elegant than others. And the deeper we go with this, the more complicated the paraphrases get. For example, JavaScript also doesn’t have words for “private” and “public”. So people come up with more or less elegant paraphrases, that try to describe these concepts.

And again, if you are not familiar with these concepts and the paraphrases, you will probably have a hard time understanding the code, same with understanding, what GDP is. But over time, some of those paraphrases get adopted by a growing community. And then suddenly you don’t have to think about them anymore. They appear as being a natural part of the language. Think of it. If you hear GDP nowadays, you don’t really think of it as a paraphrase anymore, because it used so widely and naturally, as if it was a concrete word on its own.

The same will happen with some paraphrases in programming languages over time. After some years, developers talk about them so fluently, as if they would be a natural part of the language, although they never were. And the ones, which are too clunky and complex, simply will not get adopted and be forgotten after a little while.

caution: rant ahead!

I am currently sitting in the middle of an emotional triangle of

1. being in the midst of developing a website
2. having seen this talk from Bret Victor about “having an immediate connection to your creation”
3. having seen this talk from Ethan Marcotte about Responsive Web Design

And the sum of these impressions for me is frustration.

For the last decades we have seen technologies in the broad field of multimedia (including the web) explode. Nowadays we have HTML5, CSS3, WebGL, Flash, Native Apps, Native Desktop Apps, Sandboxed Desktop Apps and a bunch of more stuff at our fingertips. The limitations on what we can build are getting narrower and narrower. Of course, we have to look on performance here and there, of course we have to deal with limitations some environments put on us, but if you compare the current possibilities to what we had 10 years ago, it’s like we’re in multimedia heaven. Or isn’t it?

Problem is, on a creation level, for me it still feels like 10 years ago or even more. Of course, we have fancy editors now with syntax highlighting, for some parts, we even have refactoring tools. But all these editors make the problem even more apparent in my view. We are having a huge gap between our creative ideas and the real result. And it is growing every year, it feels. Just look at how many technologies todays web developers can choose from or even have to master at the same time. It is not just HTML, CSS, Javascript. It is also the browsers, it is the various javascript libraries, the css frameworks, minifiers, boilerplates, grid systems, the build scripts, the CSS enhancer languages, languages that build on top of javascript or compile into javascript. Not to mention the new kids like WebGL, Web Workers (and the new paradigm this introduces) and so on.

Don’t get me wrong, i love all of this. It is exciting and if you start to dream about what incredible things we can build with these, it is taking my breath away. But this complexity has a bad side effect: It is not possible to master all of these fields (except for some few geniuses who do, but unfortunately the most of us are pretty much average, aren’t we?!). Which is OK you might say, so there can be experts in every field. But every expert introduces another layer between the original creator (or author or thinker, etc.) and the actual result. And every layer most naturally always also functions as some kind of filter, taking just some tiny bit of idea away from the original, even if it is unintentional. Still the result can be stunning and innovative. But in too many cases it is not, because too much of the idea gets lost along the way of briefings, meetings, static photoshop layouts, concept documents and false or incomplete interpretations of the experts.

For an example, just have a look at the content industry, like magazines, news sites and so on. Go to their website or look at their tablet apps or mobile apps. The majority of their content is text, some images and sometimes a video. Every once in a while they feature an “interactive experience”, which gets promoted highly then. But most of the time, they have some standard templates with text and images. And who would want to blame them for it? It is extremely costly to produce highly interactive and dynamic pieces of content. Many work-hours have to be put into such a thing. Many people from various fields are needed. It is simply no possible to do that for every piece of content.

And why? Because we are lacking the tools to do it. Heck, the web is 20 years old and we’re still hacking html code into text editors. In order to build some piece of web content, we have to mentally compile at least three languages (HTML,CSS, Javascript) and imagine, what it will look like, then type everything into the editor and then look at the result. Of course this is nerdy and cool and we feel like we’re in total control, but let me tell you: It is bullshit. It is a massive waste of time. The computer should be doing most of this and let us concentrate on thinking and articulating, how we want things to look and behave in the easiest and fastest way.

Instead we’re seeing an ever increasing gap between an explosion of new technologies and features and a just moderately evolving field of tools, that should help us using those technologies. Just think about it: What is the biggest innovation in tools, that you have seen in the last 10 years, when it comes to developing websites? And i am not talking about libraries, frameworks and the like, i am talking about tools! Here are some, that come to my mind:

• firebug (and the respective tools in the other browsers)
• sort-of-sometimes-working code completion for HTML, CSS and Javascript
• REPL

You probably know some more, but the fact is, it still pretty much comes down to manually hacking code into a text editor and then testing, what comes out of it. I remember, that sometime in the 90s, there where these WYSIWIG editors, like Frontpage, Dreamweaver and so on. But they produced ugly code and even today everyone i know, wouldn’t think of using these tools.

I think, if we really want to move forward with all these new possibilities, we need better tools for creating multimedia user experiences. As hard as it might sound to some of the experts, i think we need to get rid at least of some of the layers between the creator and the result to come closer to the creative ideas again and to be able to spend less time and money on the creation itself. Only better tools can make that happen.

I’m working quite a lot with HTML / CSS / JavaScript these days (wonder why …). Sometimes, you want to build a component completely through JavaScript. For example, you might want to build a component, that uses the canvas, where you draw things. That component has a JavaScript function object (some sort of class) and the canvas element.

Now, I thought, I would like to style this component with CSS. Problem is, since I am using a JavaScript / Canvas component, CSS cannot affect my drawing on the canvas, since this is done through JavaScript. Still, I would like to define things in CSS.

After digging a little bit, here is my solution (in a little example):

First, in my HTML page I have a simple canvas element with an id “myCanvas”. Since I am using jquery I use this little on ready function:

<script>
 $(document).ready(function(){
  var myComponent = new CanvasComponent($("myCanvas"));
 });
</script>

OK, so this instantiates my JavaScript component object an passes it a reference to the respective canvas DOM element.

Next, I define the CSS, that I would like to have for my component. Note, I do not necessarily define css for the canvas element itself, but rather css for what I will do on the canvas. Sounds weird? Bear with me.

canvas-component {
 background-color: #cacaca;
 line-height: 2px;
}

Ok, let’s see. First of all, you notice, that the selector says “canvas-component”, which is not a known HTML tag. But that’s OK, because HTML5 allows for custom tags officially. Second, the style attributes are not meant to affect the canvas directly, as I already said. I declare styles, that I want to use later in my drawings on the canvas. There is a little downside: unfortunately you cannot define your own custom style attributes here, because the browsers will ignore them, so you have to use the best next existing attribute, that comes close semantically. For this little example, I just choose a background-color and a line-height.

Now all we have to do, is bring my JavaScript component and the style declaration together. I do this in the constructor of my JavaScript component object:

function CanvasComponent(canvas) {
 this.canvasElement = canvas;
 this.styleClass = null;

 // Some IE use 'rules', other browsers mainly use 'cssRules', which is official
 var allCSSRules =
      document.styleSheets[0].cssRules
   || document.styleSheets[0].rules;
 for(var i = 0; i < allCSSRules.length; i++) {
  if(allCSSRules[i].selectorText == "canvas-component")
   this.styleClass = allCSSRules[i].style;
 }
 alert("line-height: " + this.styleClass.getPropertyValue("line-height"));
}

So, as we can see, in document.styleSheets we have an Array of all the different embedded or loaded stylesheets. In my example, I have only one stylesheet declaration as an external file, that’s why I can use document.styleSheets[0]. Within the stylesheet, there a many rules, of which one is the rule, i have printed above. We have to find it manually, since the DOM API does not provide any functionality for that. So i go through all the rules and search for the selector “canvas-component”. If I find it, I save it. And now I can access the declarations via <code>getPropertyValue()</code>, for example. There are other functions as well, but this one is probably the most useful one.

Now that I can access the declaration, I can use them in my canvas drawings. For example, when drawing a line, I can now set the thickness of the line according to the line-height from my CSS, or if I draw some big background rectangle, I can use the background-color from CSS.

Well, that’s it, perhaps that comes in handy for you some time.

should you be scratching your head like i did, when trying to understand, how you would add an event listener to simple DOM elements in GWT, here’s how i do it currently:

Element myDOMElement = Document.get().getElementById("someDOMElement");
Event.setEventListener(myDOMElement, new EventListener() {
 
	@Override
	public void onBrowserEvent(Event event) {
		// TODO Do crazy stuff here
	}
});
Event.sinkEvents(myDOMElement, Event.ONCLICK);

Note the last line here. Only once you’ve called sinkEvents(), do you really get the events for the particular event type(s).

I find this much more usable, than the nasty Event.addNativePreviewHandler() method, that they talk about in the GWT documentation, because you only get the event, you’re interested in.

In general it appears to me, that GWT is more geared towards using their components (or widgets), than working with the DOM directly.

another project just went online this week, in which i was involved: Drive and Seek – The Prologue. Together with Harald, who was the lead here, we were responsible for the development. I took special care of the interface to facebook and the customization features of the end video, in which you can put your own picture either by uploading one or via webcam.

It was a fun project, going for a about a month.

What did i learn? First of all, i have mixed feelings about robotlegs. I like the DI part, but i cannot get used to these top-down mvc structures, which seem to put too much emphasis on infrastructure and too little on conceptual entities. I have to admit, that robotlegs technically does not tell you how to structure your application, but the best practices documentation does promote the approach of using mediators, commands and so on and tying it all together via bunch of events. This sounds all nice in theory, in practice for me, it is too technical and does not reflect the individual, conceptual relations of the components and modules i like to build. But this is stuff for another post.

I do like the Facebook API, although its documentation leaves a lot to be desired. The JavaScript SDK is nice and after fighting with the Facebook ActionScript library initially (couldn’t get it to initialize reliably), i soon abandoned it and used the JavaScript SDK directly via ExternalInterface.

[See image gallery at www.ghost23.de]

i was once again lucky enough to be able to build a fun little project. Brainbattle!

But how did it all start?

So, i occasionally give talks at the GoodSchool about technology, internet and so on. The GoodSchool is a school for new ways of communication. All things digital, social, web, etc. and it is targeted at people in the marketing world. They have lots of different events all over the year. One is “camp digital”. Seven days packed full of information, inspiration and, of course, fun things.

So, Christian from the GoodSchool this time gave me two brain sensor headsets from emotiv and asked me to build a little game with it. We decided to do a simple tug-of-war type of game.

So, how does it work?

So the setup is:

• Two emotiv epoc neuroheadsets (and their SDKs)
• Two PCs connected via a twisted Ethernet cable
• One Union Platform server (and the game control module build in Java)
• Two little client flash apps, which take the converted signals from the emotiv SDKs and send it to the server (along with game controls)
• One flash central Display app (seen in the pic above), that shows the game state.

OK, the headsets connect two their respective PC over the air via a dongle. These headsets basically read the electric signals from your brain. As you can see in the picture below, the headset has a bunch of sensors, which need to be wet (using a saline solution). The tricky part is, that the sensors ideally touch the skin, which means, you have to fight a bit with the hair of the user to get out of the way.

These signals are read from a software SDK. Part of that SDK is a “training” program. There you can basically train “actions”. Like pull, push, up, down, vanish, show and lots of others. So you train a certain action, like “pull”. For 8 seconds you think about “pull” and the programm records the signals of your brain during that time. Then if you think that thought again later, the software recognizes the pattern and knows, that you think “pull”.

Then there is a second little tool, called EmoKey. It is a simple converter. It converts an “action” into native Windows key events. So you define, that when the user thinks “pull”, it should emit a key event of the key “p”, for example. It can also do this continuously, lots of settings there.

So then i have a build a little client, which let’s you connect to the union server i have built, let the user click ready and also read those native key events. It then counts those incoming events per second and sends the result to server (every 500 ms).

The server (java) module takes those numbers from the two clients and calculates a force from it, being either positive or negative (depending on the numbers from client1 and client2). The server module of course also controls the various stages of the game, like client registering, game start, winning, and so on. The server is based on the union multiuser server, which is some nice piece of software and well documented. Its concept is around rooms and clients being in one or more rooms. The clients can send messages, set attributes on themselves or the rooms and so on. So i have created such a room, which has the game logic.

That game state is continuously send to the central flash display app, which is connected to the server as well (but only as an observer). It gets the force number and the game states and displays it.

So, that’s basically it. It took me about two and a half days to build it (and test it roughly). You can see a video of the game in action at facebook.

it doesn’t happen that often, that you work on a project for some time and finish it as smoothly as you started it. That happened to me while developing the jump ‘n run game Lego – builders of infinity. Working with the nice people at Plan.net here in hamburg, we just finished this project together (If you like it, you might want to express that with a vote?).

Update: Nice: Just got notified, that the project won a silver lion in Cannes!

Update 2: Double nice: FWA site of the day.

Update 3: Triple nice: Dope Award

This took roughly two months. It’s based on Flash Player 10 and uses the Box2d wck alchemy port. Its basically two apps: the game and the microsite. You can embed the game in your own website or blog, if you like.

The whole project consists of 103 ActionScript files (mostly classes) and around 6640 lines of code (no comments, no blanks, no libs).

The most challenging thing was, that Box2D has issues with letting boxes slide over a set of other boxes. From time to time, the box sticks at the edge from one underlying box to another, even if they are perfectly aligned. I first used the “normal” Box2D Flash port, but as it seems, there has not been a lot of development going on there, lately. So i switched to the Box2D wck alchemy port, which requires Flash Player 10. That port is more up to date with the original C implementation and thus can take advantage of some changes, which help fix the sliding issue. You can now cut off the corners of your boxes and thus let it slide over the corners of two adjacent boxes (which actually don’t exist, but as i said, box2d thinks they do exist). This trick does not work in the old “normal” Box2D Flash port.

Hope you enjoy the game.

since i

a) was working quite a lot with Box2D lately

b) am sitting next to Lars (aka nulldesign)

today we had the idea to combine the Box2D alchemy port with Lars’ ND2D graphics engine. The result involved lots of basketballs

Caution: You need the Flash Player incubator build for this to run:

[Update]: As commenters have already pointed out, the app below doesn’t work with the current flash player anymore. I would have to update Lars’ ND2D engine to make it work again, but i currently simply feel to lazy to do it

http://ghost23.de/nd2dbox2d_demo/main.html