The dark side of aggregating tags

An info-graphic on Flickr recounts the cautionary tale of the Conservative Party’s experiment in social media. They aggregated the #cashgordon tag, so that messages from Twitter with this tag would appear on their own site. The disaster that resulted was made possible by three technical errors:

1. They didn’t filter content: anyone could use Twitter and the hashtag to write whatever text they wanted on the Conservative site.
2. They didn’t filter out markup: users could style the content of messages how they wanted, e.g. 48 point high and they could embed images of their choice (including spoofs of the Conservative poster campaign).
3. They didn’t filter out Javascript commands: users could insert a command redirecting the whole site to Labour, Rickroll or porn, which they promptly did.

Code-injection is something any developer should consider when building one of these services, and surely most do, but it’s nice to have a period reminder of what can go wrong when you miss out the necessary one or two lines of code.

Advertisement

Yahoo Query Language

When I’m explaining the semantic web to people, I start by saying that I think of the present web as one big global document, made by linking together pages on different servers. Similarly, the semantic web would link data from many different servers to make a global database.

That vision just got a step closer with Yahoo’s YQL, a kind of super-API which allows you to perform SQL-like queries across data from multiple sites. The tutorial on Net-tuts uses the example of taking the latest tweets from a group of Twitter accounts. You could substitute RSS for Twitter to make a news aggregator (not a hugely imaginative application, but one on my mind recently).

More links:

• YQL home
• Language guide
• Combining SPARQL and YQL

Javascript rises to a whole new level

These don’t work in all browsers yet, and they work faster in Google Chrome than other browsers, but the Chrome Experiments show how far Javascript has come thanks to things like the canvas tag and powerful libraries. Witness a faithful recreation of the Amiga operating system and desktop, including the command line manager; a replication of the MilkDrop music visualisation plugin;  games; 3D effects and a version of cartoon physics.

XTech 2008, Dublin, Ireland – The Web on the Move

I attended the XTech conference at the beginning of May, and have just blogged my thoughts and notes on my own blog, so rather than reproduce those meanderings here, I will make like with the traditional web, and link to the posts. You can read these at:

• Day 1
• Day 2
• Day 3

A cracking conference, very engaging and stimulating, and from reading the posts on here about the Eduserv Symposium, it appears many themes cropped up in both conferences. I look forward to keeping an eye on this landscape to see what comes to pass, and what disappears along the way, and what gets bought by Microsoft.

Automatic Favicons for External links

This is a script from my archive. It is intended for inclusion in a web page, but it does something that is probably best done server-side. It’s customary in wikis to add an icon to indicate an external link. Why not use the favicon of the site you’re linking to? Attach to a test page with a lot of external links and modify the fourth line to put your domain name in.

Disclaimer: Transcluding images is generally bad practice. Amongst the downsides: you are taking someone else’s bandwidth, albeit a tiny amount; somebody could get their server to include a disgusting image in your site (not sure how disgusting you can be in 16×16 pixels). Anyway, with those caveats…)

What you can do with JavaScript

It seems there’s an ongoing explosion of things that JavaScript can be made to do. Here’s a quick, non-evaluative round-up to prompt people to think of what pieces might be put together.

When you first encountered JavaScript, it was probably in the context of manipulating web forms and adding content to pages with the document.write function.

As browsers have standardised, it has become possible to dynamically style HTML, including making chunks of page appear and disappear. It gets more modern and interesting after the break.

Animation effects with Canvas and the YUI

Take a look at this demo I’ve knocked up.

Wiggle the slider and see what happens. It’s a terrible learning object, but it’s just an exploration of how easy it is to set up using HTML, CSS and JavaScript. No, really! Look at the source code and there’s no flash or other plugins involved. It’ll work more slowly in IE than Firefox, but works in both, at least on Windows.

I’m using the Canvas tag, which is natively supported by Firefox and Safari. Thanks to the excanvas library provided by Google, adding canvas functionality to IE is really easy.

I know that SVG (scalable vector graphics) has many advantages over canvas, and may be the way things go in the future but canvas has the key advantage that you can use it right now in modern browsers without needing plugins.
Also, the way of working with canvas is reminiscent of the graphics commands of computers back in the early 1980s, which is a good thing to anyone who grew up with those computers.

The slider is part of the Yahoo User Interface (YUI) library and the animated text is a YUI animation motion.

Plugging the things together, and to other things on the page (e.g. the web form) just requires a bit of JavaScript. I’ve long wanted to be able to make interactive web pages this easily.