Christian Heilmann

You are currently browsing the archives for the General category.

Archive for the ‘General’ Category

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]

Posted in General | 3 Comments »

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]

Posted in General | 5 Comments »

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]

Posted in General | 23 Comments »

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]

Posted in General | 12 Comments »

YUI 2.3.0 released!

Wednesday, August 1st, 2007

Finally I can announce the 2.3.0 release of the Yahoo! User Interface Library. Internally we had a chance to play with some of the library news already and there is a lot of cool stuff to see:

It is also cool to see that a lot of minor bugs and improvements found and reported by the team in the UK have been implemented by the YUI folks. Most of these are way under the hood, like a long overdue insertAfter method and next and previous sibling methods that don’t report linebreaks.

[tags]YUI,yahoo,library,javascript,rich text editor,testing[/tags]

Posted in General | 4 Comments »