Skip to content

Android app – Hafengeburtstag

2013 April 22
by Sven Busse

Juten Tach,

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.

 

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.

onething.com – client work

2012 October 30
by Sven Busse

Juten Tach,

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.

JavaScript and the use of class-like paraphrases

2012 March 24
by Sven Busse

Juten Tach,

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.

The gap between web technology and tools

2012 February 25
by Sven Busse

Juten Tach,

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.

Using CSS for custom JavaScript components

2012 January 3
by Sven Busse

Juten Tach,

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.