Christian Heilmann

You are currently browsing the archives for the Experiments category.

Archive for the ‘Experiments’ Category

No more dead links – My first go at a WordPress Plugin

Saturday, September 9th, 2006

I’ve just played with an idea for a wordpress plugin. If you [link:http://www.wait-till-i.com/stuff/noMoreDeadLinks.zip,download this plugin] and install it you can use the following syntax for links in your posts:

[xlink:url,text,xfn data]

The plugin will then check if the url exists and create a link if it does or otherwise add a DEL element with a class called “brokenlink”. The xfn data is optional and there is no testing as of yet. In order to make them work you need to use the [link:http://microformats.org/wiki/xfn,valid XFN data] values.

Tests:

  • [link:http://icant.co.uk,My Articles,me] (http://icant.co.uk – me XFN)
  • [link:http://onlinetools.org,My scripts,me] (http://onlinetools.org – me XFN)
  • [link:http://www.allinthehead.com,Drew McLellan,friend met co-worker colleague] (http://allinthehead – friend met co-worker colleague XFN)
  • [link:http://www.offlinetools.org,Offlinetools.org] (should be broken)

My inspiration

The inspiration for this was Tom Croucher’s talk at barcamp London about the self healing web. [link:http://www.kid666.com/blog/?p=34,Read more about it on his blog].

The future is hybrids – how JavaScript can purify pure CSS solutions

Monday, September 4th, 2006

Over the last few months there were more and more requests on mailing lists and articles published how you can achieve functionality with pure CSS that was traditionally achieved with JavaScript. This post will explain why that is an interesting concept, but hopefully make you aware of the benefits of JavaScript enhanced solutions versus pure CSS solutions.

I have to thank a lot of people I asked in the research for this, foremost James Edwards, John Resig and Andrew Dupont. I’ve also given a short presentation – PDF -96KB on the same topic at the Barcamp in London last weekend.

First of all let’s investigate how pure CSS solutions became so popular. (more…)

Drew made me do it: Cover all your CSS class tasks with one small JavaScript

Monday, August 21st, 2006

Drew McLellan asked for a tool script for an upcoming project that would allow him to do all kind of tasks related to CSS classes.
He wanted to dynamically add, remove and check for classes and get all elements that have a certain class applied to them.

It is nothing fancy or new, but come in handy for you, too: Check the CSS class scanner tool

Sneakily reading out your browser history

Monday, August 21st, 2006

Via Stuart Colville I got a URL that uses a sneaky trick to see where you have been surfing. Jeremiah Grossman shows how you can check for visited sites.

The common complaint of developers who don’t see the security and privacy issues with that is that you can read out the history of the window with JavaScript but you only get the amount of visited sites, not their URLs. With this trick, you can.

The trick is pretty easy: He uses a whole array of sites to check against, writes out a style for visited links to the page, writes out a list of these links and checks their computedStyle color attribute against the colour he set in the style. If it is the same, the page is in cache and has been visited beforehand.

I already commented that it may be more stable if you set a different style to the visited links like display block and a height and read the offsetHeight instead of computedStyle. In any case, it is a clever and worrying trick.

An unobtrusive interactive Flickr badge

Thursday, August 17th, 2006

Being bored yesterday night, I thought that it would be really cool to have a flickr badge that can be navigated (x pictures forward and backward), has a preview in middle size mode (lightbox style) and is generally nicely unobtrusive.

I cobbled together some code (dirty at times) and came up with this: Unobtrusive Dynamic Flickr Badge.

A dynamic flickr badge

What it does is turn a simple link to your Flickr stream with a certain ID into the badge, which means that users without JavaScript can still reach your images and you don’t need a server component to pull the images.

And guess what, it is not even Ajax!

Tell me what you think, and I may find some more time to spice it up with the YUI and make it cleaner.