OK, in the last few minutes you will have gotten a few tweets of people explaining that they like to have intercourse through the backdoor with goats. This is a Twitter exploit – probably initiated by someone doing a security talk (I know some people who would be devious enough).

The exploit is actually easy – the main ingredients are:

• Twitter allowing updates through the API via IFRAMES and GET thus being vulnerable to CSRF attacks
• PasteHTML.com being vulnerable to render code without a secure site around it and executing it
• Clients or Twitter automatically applying the t.co link shortener

The code to execute the “worm” is hosted at http://pastehtml.com/view/1b7xk3b.html so Twitter should contact them – (I just did):

Nothing magical there – all you do is create two SCRIPT files that point to the twitter update API and send a request to do an post. As the user who clicked on the malicious link is authenticated with twitter you can send them on his behalf. It is the same trick that worked for the “Don’t click this button” exploit or my demo at Paris Web last year how to get the updates of a protected Twitter user.

The effects of this are a mixed bag

• Bad: People stop trusting the t.co shortener after it was actually installed to be a trustworthy link shortener. The link shortening service is not compromised – this is one thing that can’t be blamed on Twitter
• Bad: There is a flood of wrong messages on Twitter
• Good: people talk about the exploit and how it was done
• Good: people get more conscious about clicking links
• Good: Twitter have to harden their API agains CSRF
• Bad: this will break some implementations

There is no real defense against CSRF from a user’s point of view other than not clicking links you don’t trust and turning off JavaScript. As this is a wide definition, we will get those over and over again unless API providers disallow for requests without tokens. This, on the flipside means that implementing one click solutions to tweet or like will be a lot harder.

I fell for the trick, too – especially as I didn’t expect PasteHTML to render code instead of sanitizing it.

Update: As some clever clogs just pointed out in the comments, JSBin is also vulnerable to hosting code that will be executed. One thing I do to check malicious links is to use curl in the terminal:

If you don’t know JS, that doesn’t help you but if you do you can warn the world.

As I heard during my visit in the valley last week and just now from the goings-on at the JSConf in Berlin, Mozilla is working on ramping up the already amazing MDC documentation for JavaScript and you can help by providing some guerrilla SEO - simply add the following image with the right code available at http://www.promotejs.com/ to any article that talks about JavaScript:

The reason is obvious when you search for the term “JavaScript” – the things you find are wiki articles or even products that tell you not to care about learning JavaScript when you use them. As the term JavaScript was a hot SEO term during the DHTML days and with the resurrection now a lot of sites washed out the experience of finding something good when you try to use the web to find it. When I wrote my JavaScript book Beginning JavaScript with DOM Scripting and Ajax I had a chapter that told you where to find good information about JavaScript and other than the MDC and SelfHTML (if you are German or Spanish) I drew quite a blank. Lately Sitepoint started to put together some good docs but then all we had was W3Schools.

Let’s shine a Flashlight on the elephant in the room: W3Schools. This site is the number one for almost every technical search term in CSS, JavaScript and HTML. There are a few reasons for this:

• Its SEO is spot on – heading structure, amount of links and deep level content (long tail)
• It leaves you with a good feeling – “oh this is how simple it is! Cool, no need to read more, just copy and paste the example and I am an expert”
• It is fast and small

The “good feeling” part is also what makes it dangerous. I ranted in several talks about the Siren Song of W3schools – it gives you the what but not the why. You can use it as a reference when you already know your stuff but it is dangerous for people to learn a subject matter. Programming is not about syntax alone – it is also about the environment you apply it in. W3schools is like bringing up your kid on fast food – quick, fast and cheap. This is not the fault of the maintainers of W3Schools – it is the fault of people sending new learners there for information.

The PHP docs are a good compromise of fast information with insights from implementers in the field – I learnt more from comments on the docs in PHP than from the entries themselves.

In the write great code examples chapter of my Developer Evangelism handbook I described a blueprint how to write a code example that explains and educates. Sadly this takes much more work than just showing the syntax. And this is why the docs sites that simply tell the “how” are winning – they update much faster with less overhead.

It is very cool to see Chris WillisonChris Williams(DOH!) and others take on the challenge and Mozilla to me is the perfect host for this kind of effort – they are open, independent when it comes to JS and have a track record of providing good docs.

Interestingly enough about five few years ago I tried a similar approach for all docs:

Other than getting it hacked once I found no support for it though so I shut it down a year ago. Now with the leading names of the market talking about a similar thing at the leading conference of the language we have a better chance. Help us!

Today I spoke at the ThinkVitamin JavaScript online conference alongside Simon Willison, Stuart Landgridge and Drew McLellan.

Topic and slides

My topic was “Maintainable JavaScript” and I managed to pack 150 slides into the 50 minutes of my talk. The Slides are available on Slideshare.

Maintainable Javascript carsonified

View more presentations from Christian Heilmann.

What I covered

I went through a few of the tricks you should apply when you want to write maintainable JavaScript:

• Using, not abusing libraries
• Separation of concerns
• Building for extensibility
• Documenting your work
• Planning for performance
• Avoiding double maintenance
• Live code vs. development code

A few of the topics got repeated by the other speakers but frankly I am always fascinated just how many people do not know about the X-requested-with header JavaScript libraries add to Ajax requests and how you can use it to render different content for Ajax requests and for include() requests. This allows you to maintain your whole content and HTML on the server and have all the Ajax goodness rendering out a simple HTML string.

The code example for the validation is available on GitHub.

Another thing that is missing a lot in people’s approach to JS is a proper build process. That’s why a lot of people try to optimise for performance during development and leave hard to maintain, specialist code behind.

In essence, I showed that by building logical backend code you can save yourself a lot of JavaScript and you build things that work instead of things you hope will work.

The conference experience

Speaking at pure online conferences is weird. For starters we had to change the order as Simon Willison is on his honeymoon world-tour and currently in Marrakesh, which meant his connection was flaky. The audio during his talk was not the best and he didn’t even bother with video.

It is a strange experience to sit there with a headset and talking to your desktop as you cannot see the audience. Talks get much better when you can interact with the audience, ask questions, see them falling asleep or seething with rage – that kind of thing. In an online conference this is missing and you cannot read the chat whilst you present as this is too distracting. Drew was suffering the most from this lack of interaction and I had my audio drop out once which meant I had to repeat some slides.

All in all I find these things work better when there is a discussion going on – like a moderator interviewing a speaker over Skype and people asking questions. The other option of course would be to record the talks beforehand and play them instead of hoping all works out fine live – it never does. Recording the talks and then having a pure Q&A session with the speaker on skype afterwards seems to me a better way to work with these issues.

The benefits of these conferences are quite cool. People do not have to travel, you can pay one ticket and let a whole office watch, speakers don’t need to wear trousers and the liver of the speakers doesn’t need to suffer as much as it does at normal conferences. I am not quite convinced about the “green” argument of these events as they do use up energy, too but hey, at least it helps people thinking “green”.

Online conferences are a good idea as an add-on but I don’t think they’ll replace conferences as the networking and “meeting in the flesh” aspect is lost and that makes them feel a bit clinical and cold. That said, Carsonified are doing a good job with these right now and are lovely people when you interact with them as a speaker.

The Google UK logo today is a mass of bouncing colourful balls that flee the mouse (screencast):

This is another example how Google are happy to play with their brand to show off some cool new browser technology (the other of course being the Pac Man logo a few weeks back). This, and the Pac Man is meant to show off what you can do with JavaScript and HTML5 and how smooth it can look on Chrome. My screenshot was taken with Firefox, so there is no racism in this code either – another plus in my book.

If you reverse engineer the code you will find that the bubbles are actually DIV elements that have a huge border radius. You can find the whole code of the effect in the source code when you look for google.doodle() or in this gist (beautified):

As you can see there is not much magic to it. The CSS is even easier:

Yes, all of this is pointless bells and whistles, but I have to say I like it that a company puts technology and showing it off just for a day on their agenda.

Update: the fact that the DOCTYPE of the site is HTML5 does not make this effect HTML5 though. It is simply a JavaScript that moves DIVs around and resizes them. This could be done in HTML4 and for IE6, too. The upgrade from classic DHTML animation is that it uses CSS3 to create the round bubbles and that nowadays this animation looks smooth on faster computers. In the time when IE6 was hot this would have looked terrible. Notice Google blocks IE from getting the effect (and sadly enough Opera, too, although it would work just fine with their JS engine).

Another Update: Rob Hawkes used the code here to port the effect to Canvas to make it HTML5 (well Canvas) driven.

Last update Robin Berjon ported the code to SVG as another open technology in the new stack.

Yesterday Framsia organized a meetup in Oslo, Norway with Molly Holzschlag, Paul Irish and me ramping up to the Frontend2010 conference. Molly talked about the open web and the open stack of technologies and Paul showed people the developer tools in Chrome.

My talk was about building web applications with JavaScript and how using progressive enhancement helps you build great things with very few lines of code. The slides are available on Slideshare:

As per usual, I also created a audio recording of the talk hosted on The Internet Archive:

I loved the evening – the location sponsored by Epinova had all the things we needed (including a copious amount of beer) and the audience (once warmed up) had some very good questions to answer. The talks were filmed and Framsia will release them soon.