BuiltByDave.co.uk The wireframe of a blog. </> feed

Just over a year ago Josh and I were playing around with one of his ideas, similar to the Make Poverty History white band for the web that he did, but this time for the (red) campaign- just add a line of javascript to your site/blog and anywhere the characters R, E, D appear in that order we’ll change them to red’s branding, and link to joinred.com. You may have even spotted it happening on this blog of mine, for example in my post Google Application Engine vs Facebook f8.

We prototyped, we got feedback, we asked a few well known bloggers if they’d put it on their site, and all was good, however we came across a problem that I didn’t have the time, patience, or uber-javascript-l33t hacking skills to solve well enough. I’ve put the problem to a few fantastic developers, it’s made for great discussion, proved they are amazing developers with very creative minds, but yield a solution it did not.

Chatting with Josh the other day we decided we’d release it, incomplete & hacky. Should someone tackle the problem, fantastic. Everything is over at http://redyoursite.com (/test.html as well), if you do decide to tackle the problem please let us know, there’s a free beer or two on me if you solve it.

Update: So I didn’t explain the problem as pointed out by Dave and Mike on Twitter. I did that on purpose because in theory it seems far easier than it is in practice, and discovering that yourself is key (that and being over year ago my memory isn’t perfect). But, to summarize the issues are around a pages content, and not breaking it, so:

• “powered” should become “powe(red)”, however not if it’s a link as that would break the link
• changing attributes shouldn’t happen
• changing a node’s content should but not within certain node’s: textarea; select; input, etc.
• using the DOM was too slow for me (please prove me wrong) and it has to be fast, we can’t break other people’s load time
• RegEx speed was fine, however cross-browser issues plague it

(via Dean Edwards’s Faster DOM Queries)

I’ve only just got round to reading this: it’s great! Joe Hewitt has written some javascript which converts a CSS selector to an XPath query (source code). I searched and searched a few months back for something like this, and when I found nothing I made a note to write my own, however it seems Joe beat me to it just over a month ago.

I suppose my lesson is: I need to spend more time on code to release into the community- as I promised myself.

While this isn’t new code from me, I got round to cleaning it up and making it suitable for "open sourcing". This javascript allows the developer of a website to assign optional css styles to any element(s), which the user can then choose.

Jakob Nielsen said back in 2002 in his Alertbox Let Users Control Font Size

"Consider adding a button that loads an alternate style sheet with really big font sizes if most of your site’s visitors are senior citizens or low-vision users. Few users know how to find or use the built-in font size feature in current browsers, and adding such a button within your pages will help users easily increase text size. However, because every extra feature takes away from the rest of the page, I don’t recommend such a button for mainstream websites."

While not an ‘alternate style sheet’, it is an ‘alternate style’ and one of the examples I’ve included does exactly this. Head over to the alternateStyles.js page for examples, and source code.