Christian Heilmann

Author Archive

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. :)

[tags]flash,conference,talk,presentation,evangelism,domscripting,javascript,flashforumkonferenz[/tags]

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.

[tags]CSS,sprites,csssprites,image slicing,optimization,speed,rendering,css,webdevtrick[/tags]

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

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

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

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

Anything I have forgotten?
[tags]PHP,JavaScript,array_unique,sorting,cleaning,hashtable[/tags]

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!

[tags]web2.0,shiny,presentations,slides,generator,json,maybeajax,gradients,parody,flickr,json[/tags]

Yummy – add del.icio.us boomarks to your wordpress blog with a simple plugin

Wednesday, August 1st, 2007

Ok, time to release another plugin for WordPress. This time I wanted to easily implement del.icio.us bookmarks into blog posts without having to use a server-side component and add to the already slow loading of this blog. The solution was to use JavaScript and load the bookmark data only when you request it. This means that my blog post does not show a lot of links and thus become suspicious to search engines and it also means that I don’t create lots and lots of trackbacks to other blogs (I hate following a trackback just to find another “my links for the day” post).

Anyways get the dynamic delicious plugin for WordPress, install it and start showing links in your posts without messing up the social web.

The plugin allows you to use a special syntax for del.icio.us links, which is the following:

[ delicious:Link Text,user,amount of links,tag]

For example:

[ delicious:My Links on JavaScript,codepo8,10,JavaScript] becomes

[delicious:My Links on JavaScript,codepo8,10,JavaScript]

The tag is optional, so you can also use:

[ delicious:My Latest Links,codepo8,10] becomes:

[delicious:My Latest Links,codepo8,10]

The plugin is licensed Creative Commons Share-Alike. Enjoy.

[tags]delicious,bookmarks,plugin,wordpress,creative commons[/tags]