RedYourSite.com
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
Tags: (red), 1337, Branding, Charity, Javascript, Make Poverty History, Mini Projects, Product Red
April 28th, 2008 at 1:37 pm
[...] If you run a site, I suggest you do the same. Also note that there is apparently some issue with the Javascript still and the authors are looking for help. See this blog post here. [...]
April 29th, 2008 at 12:21 pm
I’d split the html into bits that we can safely replace within and bits that can’t be safely replaced, then do the replacement and then join the whole lot together again. Something like:
var html = “red red something else redder”;
// should minimally match links (extend to add more tags)
var donotwant=new RegExp(/(<a.*?)/);
// separator will be included in pieces, as we add () in the regexp
var pieces = html.split(donotwant);
for ( var i = 0; i < pieces.length; i++ ) {
var piece = pieces[i];
if ( !donotwant.test(piece) ) {
// do the actual replacement
pieces[i]=piece.replace(’red’,'(red)’);
}
}
// join it back together to get final html
html = pieces.join(”);
Well something like that anyway. A bit more work would be required, but that’s the basic approach.
April 29th, 2008 at 12:24 pm
And obviously that just ate my code - guess you’ll have to view source and look between the pre tags to see it properly.
October 19th, 2008 at 5:48 pm
Came across this post this afternoon so thought I’d take a crack. I’ve got it work faster (most of the time - and if not - only ms slower), replacing 100% of test cases and in all browsers (currently red.js doesn’t replace all ‘red’ in IE). I also check for (red) and *don’t* replace with ((red)):
http://jsbin.com/opayi <- my version
http://jsbin.com/opayi?original <- original for comparison
Source: http://remysharp.com/downloads/red.min.js
October 19th, 2008 at 9:42 pm
Amazing. I DM’d you on Twitter so we can have a proper conversation - nice work!
November 21st, 2008 at 1:37 pm
[...] this year I blogged about Josh & I having problems with bugs on RedYourSite.com. Recently Remy (of LeftLogic) dropped me a line: Came across this post this afternoon so thought [...]