Christian Heilmann

You are currently browsing the archives for the hack category.

Archive for the ‘hack’ Category

CSS preprocessor for variables, nested selectors and other goodies

Monday, July 14th, 2008

Nate Skulic just emailed me about CSSPP, a CSS preprocessor inspired by my CSS wishlist and CSS constants article.

Nate’s done a great job writing a CSS preprocessor that could be handled by mod_rewrite and allows for:

  • constants in CSS (define a colour or setting and call it by name)
  • variables in CSS (define a setting and override it with URL parameters – I got to check if this is safely filtering out XSS nasties)
  • inheritance (nesting selectors)

I especially like that he allows for classes to be added to the parent selector or applied as a child by using a single or double full stop:


body {
..blue {
background:blue;
}

..red {
background:red;
}

.box {
background:green;
}

h1 {
font-size:1.6em;
}

h2 {
font-size:1.4em;
}

}

Produces the following:


body.blue {
background:blue;
}

body.red {
background:red;
}

body .box {
background:green;
}

body h1 {
font-size:1.6em;
}

body h2 {
font-size:1.4em;
}

Top to off the usefulness the systems also comes with a smart caching system. Nice job!

Easy SlideShare (my hack entry for mashed08)

Sunday, June 22nd, 2008

I am just sitting at Mashed 08 and just released my hack for the event – an easier interface to SlideShare.

Easy SlideShare

SlideShare is a great place to publish your presentations on the web. Uploaded Powerpoints and PDFs get converted to Flash movies you can embed in your blogs and web sites.

SlideShare also automatically creates a transcript of the presentation in HTML format, which is quite cool, but hidden far down the page and hard to reach in a screen reader. Easy SlideShare retrieves this information and shows it in an easier accessible manner.

As with EasyFlickr and Easy YouTube all you need to do to show a SlideShare presentation in Easy SlideShare is to add the URL at the end of the Easy SlideShare URL:

http://www.slideshare.net/cheilmann/purple-hack-fodder

http://icant.co.uk/easy-slideshare/?slides=http://www.slideshare.net/cheilmann/purple-hack-fodder

You can try it out with my mashed08 presentation

Easy SlideShare is Open Source, licensed with BSD, and you can download it here:

Hacking SlideShare’s embed adding a preview and be a lot shorter and readable

Thursday, April 17th, 2008

Edit: There is a bug in the script (see comments) but somehow Googlecode does not allow me to edit my own file. I will fix it once I got around that issue.The bug reported in the comments is now fixed, sadly enough I also had to re-write the converter as Google code does not allow me to replace an older version of a download (or is there a trick?). The new file is called previewer2.js

As readers of this blog know, I am a big fan of SlideShare as a distribution platform for my presentation slides. However, there are some things that annoy me about it.

One of them is the rather verbose embed code SlideShare offers you:



That is quite a mouthful and the main issue is that when you use several slide embeds in one document, you’ll slow down the rendering of your page as each of these Flash embeds need to be instantiated and tries to pre-cache the first three slides from S3.

I’ve analyzed the code a bit, added some other info I found in the RSS feed and came up with a small JavaScript that embeds slides in a different way. All you need there is the following code:



This gives slideshare the same SEO link love but is a lot less to add. Instead of the full slide include, you’ll get a preview image you can click that gets replaced with the flash movie. The following are examples:

Now, in order to convert one to the other you could do it by hand, or use the slideshare embed converter or install the Greasemonkey script

So far this is a hack, but I talked to Jonathan Boutelle about it yesterday night at the San Francisco JavaScript meetup and he is happy to pursue this idea further. My wishlist:

  • A larger preview image
  • A rest API call that gives me this information in a readable manner

Accessihacking Online Video – my presentation for BarCamp Brighton

Saturday, March 15th, 2008

I just finished my sesssion at BarCamp Brighton about making online video more accessible by allowing for sensible, time-based commenting which could become a poor man’s captioning in a second stage. In general it is just showing off my hack of the YouTube player using their API.

flickr trackr – my first attempt and dabbling with the iPhone/iPod touch

Thursday, February 14th, 2008

I was pretty amazed when I got a thick envelope the other day from Apple. Steven Woolcock, the Safari Evangelist in Europe sent me an iPod touch to play with as I complained about not being able to test something he told me about. Now, as every other 12 year old boy on a sugar rush would have done I delved right into dabbling with the new toy and here’s my first result:

demo of a search on an iphone with flickrtrackr

The code is pretty dirty at the moment, but does the trick. Thanks must go to Steven for lending me the iPod Touch, David Dorward, Neil Crosby and Michele Gera for on-the-spot testing and Norm for giving me his phone for the screenshots.

What do you think? The whole thing is of course Creative Commons and you can download the source package.