Christian Heilmann

You are currently browsing the Christian Heilmann blog archives for August, 2007.

Archive for August, 2007

The endless talk about code syntax standards and an idea to get there quicker

Tuesday, August 14th, 2007

As the readers of this blog know, I am currently working in a new team that defines the code standards, best practices and methodologies to follow for the European web development in our company. We’re trying to achieve that using a mixture of commonly regarded best practices and findings in different projects after analyzing their outcome.

There are several things that are a no-brainer, like web standards compliance, unobtrusive scripting, namespacing and so on and so forth. Where it starts to get tricky is defining code syntax standards to follow. Tabs or Spaces? Curly braces on the same line or on the next? Spaces around equal signs or not? Many a religious debate and many a working hour has been held and wasted over these.

A big portion of the endless debate is because code syntax means personal style and people are ready to defend their solution to the issue to the bitter end. A lot of times the solution does not get justified by arguments either but gets sold as “this is how I always did it”.

However, there are several arguments that speak for following a certain code syntax:

  • Code can be easily handed over to other developers
  • Version control works without false positives (a tab changed to a space is a change, but it really isn’t, now is it?)

Now, what can be done about this dilemma? Either you find a concensus and make it mandatory, or you try another option:

  • You define a standardized way of coding
  • You make sure that people create valid code
  • You also make sure that the code can be minified (all whitespace removed) as that should be done with live code to save on file size anyway.
  • You collect the different desired syntax styles
  • You offer plugins for the different editing tools in place (notepad++, dreamweaver, eclipse, textmate…) that can convert the code between the different styles by minifying and re-styling (code beautification).
  • You make it mandatory for developers to run the beautifier that creates the standard syntax before submitting the code to the version control.

It is a bit of work up-front, but it means that:

  • People can code the way they want to
  • Code will be ready to be minified for the live system
  • Developers who buy into the agreed standard won’t have to do anything extra.
  • Other developers have tools at their disposal for quick conversion

What are your thoughts? Worth persuing and sharing the plugins?

Flirting with the Flash Community

Thursday, August 9th, 2007

It doesn’t happen often that you get invited to speak at a conference about a technology you never programmed yourself. However, I will give a talk at the Flashforum Konferenz Cologne this September. I got a bit daring and came up with a topic that I couldn’t believe they signed off called Emancipated JavaScript and the Coming Out of the Flash community.

What this means is that I will try to spark a bit more enthusiasm in the Flash community to go out there and give other developers a run for their money when it comes to creating Mashups and talk about their technology as a good option when it comes to creating online applications with rich user interfaces.

While I have worked with Flash developers in the past, I always came across a certain mistrust in the technology from the business side. For example a financial application we developed didn’t get the Flex interface we prototyped because of “Flash being Active-X” and got replaced by an inaccessible obtrusive 3MB big JavaScript solution.

Working closely and loosely with amazingly talented Flash developers like Steven Webster, Ian McBurnie, Aral Balkan and Niqui Merret made me aware that there is the same “big thing to happen” feeling and enthusiasm that shook the JavaScript community some years ago.

JavaScript developers discarded the stigmata of the “move stuff around, require certain browser settings and pop things up” days of DHTML and embraced Dom Scripting and later on Ajax taking over the web application world by storm. By now having JavaScript as an interest on your CV does not get you a confused shake of the head but is actually sought after by headhunters.

There are a lot of parallels in the misunderstandings of JavaScript as a technology in the past and those that keep Flash from being a mainstream developer technology and I will try to show them and offer options to set these straight.

Currently hot technologies like maps and online video show a lot of potential but can become even better with proper Flex or Flash applications. Flash already does help JavaScript and HTML based applications like the flickr uploader to work around JS restrictions. In terms of accessibility, Flash applications can be a lot better than Ajax apps which simulate rich interfaces by using HTML and CSS and dynamically changing the latter.

While people woo the webdeveloper world with JavaScript and Canvas effects that are quite common inside Flash and nothing new you don’t see many Flash apps being featured on web development news blogs and mailing lists. Yes, Flash is not a web standard, but I personally think it is time we realise that we miss out a lot of fun and options that we just cannot achieve with JS and HTML, or simply simulate badly.

Let’s see how it goes. :)

Automating the generation of CSS sprites

Thursday, August 9th, 2007

CSS Sprites are a very good idea indeed. Instead of having lots of small images that all need to get loaded (HTTP and possibly DNS request) you use one large image and use background-position to only show the one you need. This makes your pages faster and gives users the impression that it is available much faster as the images don’t pop up one after the other.

The only problem is that creating background images that contain the others can be quite annoying in Photoshop or Gimp or Fireworks or whatever you want to use, which is why I lately find that people create automated tools for that. The first I encountered is pzImageCombine which is a standalone app.

Today I also got ab email about csssprites.com which is an online service that allows you to upload several pictures and creates the combined image and an example HTML file for you. Props to my colleague from oversees, Stoyan Stefanov for that one.

Simulating array_unique in JavaScript

Wednesday, August 8th, 2007

One of the beautiful things of PHP is its wealth of array methods. JavaScript in comparison seems ridiculously inadequate and you find yourself having to write own methods or patch the existing ones. One method I especially cherish is array_unique() which returns a new array that has all the duplicates filtered out. This is easy to write in JavaScript, all you need to do is:

  • create a new object
  • loop through the array and use the array values as new properties of the object (that way the property simply gets re-set and not added as a new one to the object when it comes up again)
  • loop through the properties of the object and add each value to the results array

Technically this should do it:

function array_unique(ar){
var sorter = {};
for(var i=0,j=ar.length;i sorter[ar[i]] = ar[i];
}

ar = [];
for(var i in sorter){
ar.push(i);
}

return ar;
}

Now array_unique([1,2,3,1,1]) returns “[1,2,3]” which is what we want. However, there is a snag. What if the array contains elements that are almost the same but a different type? When you run array_unique([1,2,3,”1”,1]) you still only get “[1,2,3]” as the returned array and what you’d really need is “[1,2,3,’1’]”. The solution to this is to store both the value and the type in the property and push the values to the results array:

function array_unique(ar){
var sorter = {};
for(var i=0,j=ar.length;i sorter[ar[i]+typeof ar[i]] = ar[i];
}

ar = [];
for(var i in sorter){
ar.push(sorter[i]);
}

return ar;
}

The next thing I can think of is to ensure that the array is really an array. We can test this by checking if it has a length property and is not a string.

function array_unique(ar){
if(ar.length && typeof ar!==’string’){
var sorter = {};
for(var i=0,j=ar.length;i sorter[ar[i]+typeof ar[i]] = ar[i];
}

ar = [];
for(var i in sorter){
ar.push(sorter[i]);
}

}
return ar;
}

However, two loops can be slow, and for…in is a very slow construct. Therefore we can avoid the second loop by using an output array:

function array_unique(ar){
if(ar.length && typeof ar!==’string’){
var sorter = {};
var out = [];
for(var i=0,j=ar.length;i if(!sorter[ar[i]+typeof ar[i]]){
out.push(ar[i]);
sorter[ar[i]+typeof ar[i]]=true;
}

}
}

return out || ar;
}

Anything I have forgotten?

Presentations2.0 for a world2.0 with Slackrpoint!

Friday, August 3rd, 2007

If you ever wondered how to make a fast presentation2.0 and you have no time to look up imagery and thought provoking thoughtshowers, don’t wait any longer!

Slackrpoint is the solution to all of these problems! Check out the presentation2.0 featurette (click anywhere on the screen to go to the next slide) and download Slackrpoint to create your own! Simply add the JSON object in slides.json.js to fit your slides! Slackrpoint will illustrate and annotate for you, by pure web2.0 entrepreneurial spirit and witchcraft!


slackrpoint = {
title:”slackrpoint”,
subtitle:’the presenter’s timesaver’,
author:’Chris Heilmann’,
date:’3rd August 2007’,
current:0, // start slide
slides : [
{

mood:’problem’, // this defines what picture to load
thoughts:true, // Boolean to show thoughts or not
title:’oh dear…’,
content:[ // bullet points
‘we all know the problem:’,
‘you need to give a presentation,’,
‘and there is no time to find good mood images’
]

},
{

mood:’finding’,
title:’the solution’,
content:[
‘you can ask your PA to collect photos’,
‘you can only go with text’,
‘or you can use slackrpoint’
]

}
]

}

To Do:

  • Hosted version
  • Offline version using Google Gears
  • Facebook plugin
  • Air version for your desktop
  • twitter integration

If you are a venture capital company or you are looking to support up and coming web2.5 superstars contact me. I have a suit and can spend other people’s money if I need to!

Happy Friday!