TiddlyWiki Drawing Plugin based on Project Draw

I’ve been creating a drawing plugin for TiddlyWiki (SVN trunk). It delegates the actual drawing editing to Project Draw (docs; demo), a browser-based drawing editor from Autodesk Labs.

Here’s a screencast:


TiddlyWiki Drawing Plugin based on Project Draw from Michael Mahemoff on Vimeo.

Autodesk Labs’ Project Draw editor looks like this:

… and the tool has a nice set of RESTful services we can make use of:

Project Draw doesn’t have any specialised cross-domain API, e.g. using JSON or OAuth, so normally you would have to proxy any calls via the server. However, a standard TiddlyWiki runs against a file:// URL and can therefore bypass cross-domain restrictions; hence, it was possible to build this plugin using the same kind of XMLHttpRequest calls as Project Draw does for its own RESTful services demo.

One likely use of Project Draw is in conjunction with TiddlyDocs, which will generally run as a standard website – off a http:// URL. Hence, we will need to do some proxying in order to get around cross-domain restrictions.

Also, the tool isn’t fully working in IE yet; I’m working on that.

You create a new drawing with the New Drawing menu item. This is simply a <<newDrawing>> macro and could appear anywhere in the page.

And you can set image dimensions in edit mode:

… which will cause images to be clipped depending on the dimensions:

By default, images are rendered as SVG, using the tricks I discussed earlier for inline SVG. However, this is only supported for non-IE browsers, or IE with Flash-based SVG support. I am still working on IE support. Without SVG, the image will fall back to a bitmap image (fortunately, Project Draw can output an image as SVG or bitmap). However, note that the bitmap image always shows the whole thing; so rather than being clipped, it will re-scale, which could lead to a lot of whitespace being shown in TiddlyWiki. For this reason, in Project Draw, you should set the page dimensions to avoid any whitespace:

Fun with Fragment Identifiers

I was recently invited to make a statement on WebMasterWorld about something in advanced Javascript at the edge of my understanding. I decided to cover fragment identifiers, something I have an odd obsession about:

There’s a lot of cool stuff going on right now, standards-based graphics and sound foremost in my mind. But I’ll focus here on something I’ve always found oddly fascinating: fragment identifiers and the quirky exploits around them. The humble “frag ID” is not exactly the pinnacle of the Ajax revolution, but it remains misunderstood and under-utilised by developers, and a feature which the browsers could do more to support. By design, fragment identifiers do just as their name suggests – they identify fragments of a document. Type in http://example.com#foo, and the browser will helpfully scroll to the “foo” element. However, they can be used for a lot more than that, thanks to peculiarities in the way they are handled by browsers.

Most importantly, by writing Javascript to change the fragment identifier, you’re able to update the page URL, without effecting a page reload. This fact alone means – contrary to a popular Ajax myth – you can support bookmarking and history in an Ajax application. Furthermore, fragment identifier information is never sent to the server, unlike the rest of the URL, which leads to some interesting applications related to security and privacy. Another powerful application is interacting between iframes from different domain, something which is theoretically “impossible” in older browsers and tremendously important for embedding third-party widgets on web pages. And when I began working at Osmosoft, I discovered yet another application: providing startup context to web apps, such as TiddlyWiki, which run off a file:// URL…as they’re unable to read conventional CGI parameter info.

I first researched this stuff for Ajax Design Patterns in 2005, and at that time, there were only a couple of scattered blog articles on the topic. Today, we can see the pattern in action in various high-profile places such as Google Docs and GMail. When I view my starred documents in the former website, for example, the URL is http://docs.google.com/#trash. That said, many developers still aren’t using this feature to its fullest, and library support is somewhat lacking. It’s encouraging to see IE8 has a new event for monitoring the fragment identifier, which suggests the story is not over for this rarely discussed property.

This is certainly a hot topic, if not well understood or covered; shortly after I wrote it, I was amused to see the topic showed up on none less than Techmeme:

Techmeme: Google's new Ajax-powered search results breaks search keyword tracking for everyone (getclicky.com/blog) - FireMoff (-;

The issue here is summarised in my statement: “fragment identifier information is never sent to the server, unlike the rest of the URL, which leads to some interesting applications related to security and privacy”. These bloggers had noticed that google was (in some cases) changing their URL structure for searches to use hashes (#q=term) instead of traditional CGI params (?q=term). Thus, when the user clicks through from Google to your web page, you don’t know what the user searched for.

Another thing that recently arose is how easily you can retain fragment identifiers in bookmarking type sites. For example, if you submit a URL to Digg, it annoyingly strips the fragment ID. Whereas Delicious retains it. TinyURL retains it too, but their php “create” script removes it, according to a conversation I had with Fred, who created this tinyURL bookmarklet. I can see why sites wouldn’t want to retain it, because it may well be just an in-page link, so it’s a tricky issue.

The main point being, fragment IDs – and design questions thereof – are alive and well.

Explaining the “Don’t Click” Clickjacking Tweetbomb

I just noticed some of my Twitter friends posting the following mysterious message:

“Don’t Click: http://tinyurl.com/amgzs6″

It turns out this is a Tweetbomb. If you go to that link and click on the button below, you end up tweeting the same thing:

… thus all your friends see it and some of them click on it and re-post it, and so on, thus propagating the message across the entire Twittersphere.

TinyURL shut down the redirect quickly and Twitter has responded, but the same attack could arise unless measures are taken. Of which, more later.

So how does this hack work?

The hack is an example of clickjacking. (I’ve heard the term a lot, but only understood its meaning after the investigation of this tweetbomb described here.)

Firstly, it’s using an iframe to embed Twitter.com on the page. The iframe is essentially invisible, due to the CSS structure…more on that in a moment. But first, looking at the source of the iframe, we spot our mysterious message:

<iframe src="http://twitter.com/home?status=Don't Click: http://tinyurl.com/amgzs6" scrolling="no"></iframe>

Well, I didn’t know about this before, but it turns out you can set an initial value for the status field by passing in a “status” parameter on the URL. So here, it’s setting the status to out mysterious message. You can try it yourself by visiting http://twitter.com/home?status=Don’t Click: http://tinyurl.com/amgzs6. (It’s safe to do so – nothing will get submitted, honest!) For the lazy and untrusting ;), what you’ll see at that URL is something like this, assuming you’re logged in to Twitter:

However, their job is not done yet, because they also have to trick you into clicking the “update” button. This is where more cunning comes into play. Check out the CSS for the iframe – containing your Twitter.com page – and the fake button contained on this trickster website:

  1. iframe {
  2.             position: absolute;
  3.             width: 550px;
  4.             height: 228px;
  5.             top: -170px;
  6.             left: -400px;
  7.             z-index: 2;
  8.             opacity: 0;
  9.             filter: alpha(opacity=0);
  10.         }
  11.         button {
  12.             position: absolute;
  13.             top: 10px;
  14.             left: 10px;
  15.             z-index: 1;
  16.             width: 120px;
  17.         }

And the elements:

<iframe src="http://twitter.com/home?status=Don't Click: http://tinyurl.com/amgzs6" scrolling="no"></iframe>

<button>Don't Click</button>

We can see from the CSS z-indexes, the iframe is on top of the button. And we can see from the iframe’s opacity that it is completely invisible. Hmmm…so it’s on top, but completely invisible. If there was a button there, you wouldn’t be able to see it, but you would still be able to click on it. This is where the layout comes in (position, width, height, top, left). The iframe is positioned just right so the the (invisible) update button appears in the top-right of the web page at (10,10), right where the fake button is. So the Update button is directly above the fake button but invisible. The website shows a fake button and tempts you to click on it, but clicking on it causes the real Twitter button – inside the iframe – to fire. Thanks to the URL status hack, you have just submitted their planted message. And of course, you couldn’t see the message, because the iframe is hidden and because that part of the iframe is not present anyway due to the negative left and top settings. There is also some filler text on the trickster page, below the fake button – I guess this is in case some browsers expand the iframe height if nothing else is on the page.

The main way Twitter can prevent this kind of attack is to use the old “bust the iframe” idiom. As I explained in Cross-Domain Communication with IFrames, it’s possible for an iframe to access the URL of its container, and actually re-set that value. Thus the common pattern:

javascript
< view plain text >
  1. if (top.location.href != self.location.href)
  2.      top.location.href = self.location.href;

If Twitter had that code on its web page, whenever it was loaded inside an iframe, the user would see the entire page clear and refresh to become the Twitter URL that was in the iframe. I actually think it’s a shame they would have to resort to something like that, because there are valid uses for iframes, as WebWait demonstrates. Any site that uses this pattern cannot bathe in the warm glow of WebWait :). But I can see why sites need to take this measure. (Update: Twitter has updated their code to bust out of the cache, just after I posted this!)

UML Tools in the Cloud

We have several IDEs in the cloud such as:

(Update: How’s the timing? This blog post was written one day before Dion and Ben announced Bespin, the massively important open-source project to build an IDE in the cloud among many other things. Needless to say, Bespin has been added to the list!)

I would like to see more tools for UML tools to complement these online IDEs. I’m not talking about naieve enterprise silliness like model-driven architecture; I mean just some basic tools ot support basic sketching.

So here is a nice one Jeremy showed me: Web Sequence Diagrams. It’s based on a declarative text spec of the model, rather than endless, tedious, mouse clicking. A perfect example of the WYWSIWN (what you see is what you need) paradigm trumping WYSIWYG. Just a nice, simple, tool that lets you generate UML models in a matter of minutes, the most any agile practitioner would want to spend on them.

Build Accessibility in the Workflow (London Web Standards Meetup)

I went along to the London Web Standards Meetup last night and attended a presentation on accessibility by David Owens. What I liked about this talk was David’s grounded pragmatism. It was immediately apparent he makes real products in the real world. There is a good community of accessibility people with that attitude, which makes a good balance to some others who are prone to broadcasting accessibility edicts from ivory towers. These range from the naieve – the ever-popular “though shalt use alt tags” – to the loony – “javascript and video is forbidden due to accessibility regulations”.

I captured a few notes, hardly exhaustive, but a few interesting points I picked up during the presentation. (As with the Shirky notes from last week, please excuse the slap-dash style, this was taken on my phone.)


<

p> Accessibility

Not just disabled, also if tired, on mobile, ill, hangover :) etc

Don’t just build for disabled, make it easy for everyone… Usability and accessibility go hand in hand.

Accessibility at each stage

Visual design:
Recently changed mind about text resized widgets (three different sized As), conventional view is not to them because browsers already let users resize text, BUT be pragmatic esp where users have multiple disabilities which would make it hard to invoke zooming

Dev:
Flash, don’t throw out just because not everyone can use it

Standards:
Eg consistent headings Heading structure

Skip links (skip to middle of page etc):
Not actually so useful for blind users as they tend to load a list of links, but useful for someone who can’t mouse around easily Access keys. Browser supported keyboard shortcuts. BBC myweb myway site is a very good source to link to, to help users understand how to use them. Also BBC use the same set across their asseys and American sites are using similar conventions so a pattern of standards is emrging (1=search etc)

Interaction:
hijax POSH first (plain old semantic html), then JS later BUT with screenreaders how do you tell user something’s changed above the part they’re listening to? WAI-ARIA standard is helping as a stopgap until html5 defines standard regions of the page and control types, and areas likely to update.

Colour:
Not just colour blindness but failing eyesight. (David will be posting links to some good resources he demo’d on the meetup page I believe.)

Video:
Making controls accessible and calling to and from javascript not flash based – then you have better keyboard access. Also transcribe content (good for seo too), it’s dirt cheap with services like castingwords, at least for smaller content. But don’t hold back on posting the video just because you’re waiting for transcription.

I also had a colleague ask me to see if anything comes up about accessibility with maps and lo and behold, David demonstrated a google maps mashup which had some good accessibility work performed on it. I think he’ll be posting the link on the meetup page. The main interesting thing was that all the points-of-interest are shown in a text-based list which will show if Javascript is disabled, and you can hit tab to rotate between the POIs on the map.

TiddlyDocs Prototype

Simon McManus has overviewed TiddlyDocs, a TiddlyWeb-based document editing and collaboration tool. It’s a great example of taking an existing framework – TiddlyWiki – adding in a bunch of components – TiddlyWiki plugins and other open source pieces – and putting some custom code around it to generate something useful in just a few weeks. Simon’s article has a good overview of all the moving parts inside TiddlyDocs.

I recorded a screencast to demo the initial version:


TiddlyDocs – Early Prototype from Michael Mahemoff on Vimeo.

I’m excited about the potential of this tool. In the simplest case, you can see it as an online word processor which, being open source, could therefore be deployed flexibly securely and freely behind any organisation’s firewall. But it can be much more than just a word-processor, because each section is a tiddler behind the scenes, and is therefore a first class data structure with its own set of fields. In particular, there are the seeds of a workflow system, with a field indicating the current completion status, and another field assigning the individual who will progress it. This means you can get an RSS feed, for example, of all sections in “under review” status, or a list of all sections assigned to a particular user.

Clay Shirky Talk – London ICA Feb 4, 2008

Just back from Clay Shirky’s talk. I’ve been following him for years, so it was great to see him live.

Notes taken on my phone, typo beware!

Today – launching softback edition of book and updating thesis since then (incl recent events includig Obama). “speculative”

“group action just got easier” So what happens when u lower the cost of doing these things

3 weeks ago – international taking off pants off on mass transit day!!! (and keeping a straight face) – the event had no special technology but was only made possible by technology

It’s tough to get a group to do anything … Traditionally required public sector (if social cause) of private sector (if profit motive) - pants off day , neither public nor private motives but cost so low it was possible to take place anyway

  • ryerson study group on facebook. Student charged, uni’s model is a newspaper publishing results and many students will be leeching.

students model-just a regular study group, updated for modern tech.

  • the thing facebook is most like … Is facebook! How do we update academic culture to take advantage of these possibilities. There’s no easy way out of consolidating these two mindsets. The changes will come bottom-up.

Thai fashion student. Article about fly fishing iphone game. If you ask why would she write it, answer is “she’s not speaking to you!” and why not wrote it, it’s cheap.

So then she was the first to post the coup. Everyone was watching and her next post was about a hello kitty iPhone!!!! She’s not a professional journalist and doesn’t want to be one, but she committed an “occasional act of journalism”. But an occasional act times a billion people …. !

Obama. In 2006 a black president seemed impossible. Always a sense he was noble cause but not going to get anywhere. The “yes we can”. Will I Am music video set in peoples minds the thought it might be possible.

The artist never asked obamas permission and nor was be asked to do it. But u could say the permission was there implicitly by certain things released as creative commons and also by the whole ethos of the campaign Which made lots of media available. In contrast mccain campaign wanted complete control eg provided quotes to cut and paste. plenty of obama media like that.

“sing for change” shows the republicans can play this game too…screw up by an obama supporter but no-one blamed Obama. Those days are past, when the organisation was held completely responsible for the actions of a supporter.

Obama site v functional, mostly for organising groups to ** take action **.

Group “pres Obama, pleaase get FISA right” groups popularity meant that obama had to respond.

The big question now is, will he govern like he campaigned. Change.gov launch the day after he got in …. Said “wisdom of crowds”

no. 1 issue was legalisation of marijuana. Clearly special interest group pressure.

Question and Answer

Q How to build org when lieutenants don’t want to, want command and control?
A One way is to Find pressure from outside eg Obama can try to rely on pressure from the media to stop senators negotiating insanity. “institutions at homeostatic”

Q Codes of conduct for social media in public spaces
A The “invisible college” – historic concept of practices of reporting and conducting research.

Q ??? A Doesn’t matter that people can game Digg because of just a media outlet and people can leave it and go elsewhere. but u can’t easily change countries. So still not solved how u can take voting seriously.

Q By can’t we learn from open source mechnanisms?
A Gov mechanism that works best is benevolent dictatorship. Linus, jimmy Wales, guido. Because there’s always the threat of forking of the project goes astray. Again, we can’t easily switch governments of move. Moving from the Uk to France is harder than switching from openbsd to freebsd.

Q New business models that will emerge from the current crisis?
A Sanger and Linus exceedingly modest when introducing their products (ie predictions – hard to say). P2P models for money (eg prosper.com – lending from small groups, typically people who know u and will watch u like a hawk). these models – based on emotional connection – may be more accurate than algorithmic models. “mutualisation”. The big questions whether states will support it.

Q Diff bn fisa and marijuana example.
A Fisa result – in a group that opted in, during a campaign. Once u have to govern u have to govern everybody.

Q Role for Holders of cultural content at museums.
A Smithsonian project uploading to flickr. Only got 6000 images out. The tech is available, the institutional change is the key concern. Every day, meetup.com gets someone in their design dept to watch a user working ok their website. Similarly museums etc should do the same thing,low key.

TiddlyWiki – Showing a Help Message Related to the Tiddler

A useful #tiddlywiki conversation with Saq.

[16:39] mahemoff: here is an idea i had for my app – just wondering if anyone else has seen this …
[16:40] mahemoff: i’m thinking of using a field to provide some instructions for certain tiddlers
[16:40] mahemoff: and updating ViewTemplate to render the field to certain users (this is a tiddlyweb app)

[16:41] saqimtiaz: mahemoff: look at the annotations macro

[16:41] mahemoff: ie those with permissions to change the tiddlers
[16:41] mahemoff: ok looking…

[16:41] saqimtiaz: mahemoff: its used by the core to add instructions when editing certain shadow tiddlers
[16:41] saqimtiaz: mahemoff: it stores the text in a config.*something var instead of fields though
[16:41] saqimtiaz: but otherwise the same idea
[16:41] saqimtiaz: mahemoff: a good way to see it in action is to edit the StyleSheet tiddler

[16:41] mahemoff: nice! sounds exactly the kind of thing. i might need to mod it though to show in view mode for certain users

[16:42] saqimtiaz: mahemoff: I think that might be as simple as putting the macro call in the view template

[16:43] mahemoff: yes, but as it’s conditional i’ll probably need to create another macro that invokes the tiddlyweb macro
[16:44] mahemoff: or some hijack-fu

[16:44] saqimtiaz: mahemoff: right. You may just find that its simpler to write a small macro to do it from scratch rather than building on top of this.
[16:45] saqimtiaz: mahemoff: if you’re not familiar with it already, the easiest way to call one macro from inside another is usually the invokeMacro function.

[16:46] mahemoff: ah didn’t actually know that, i did it before manually, thanks.

[16:46] saqimtiaz: mahemoff: another thought. HideWhen plugin from mptw.tiddlyspot.com can be used to add conditional components to templates like the ViewTemplate
[16:46] saqimtiaz: so a combination of say annotation macro or HideWhen macro might do the trick.

IE Market Share Slips

A Net Applications study (via ReadWriteWeb) says IE’s market share has dropped to 67%:

This is an interesting trend. The actual quantity of market share will vary with methodology, but a 7% drop in a year is something to take note of. Moreover, as Readwrite points out, there are two things that will probably make the trend continue:

  • The upcoming launch of mobile Firefox. I would also extend ReadWrite’s point to cover the whole role of mobiles in general. The iphone’s browsing share is now around 0.6%, a massive figure for a single phone. A popular phone to say the least, but one that still has a tiny share of the overall phone market. Just as basic mobiles are standard now across most of the planet, including developing countries, we’ll be seeing a saturation of smartphones over the next few years. You can only say “but I just want to make phone calls” for as long as you don’t see all the benefits others are deriving from all the other features. And we can be fairly certain that Firefox, Opera, and a whole range of niche browsers, many not yet born, will have the lion’s share of browser action. Having struggled reluctantly with MS phones, I know personally the operating system is light years behind and mobile IE doesn’t even have multiple tabs; it’s not even in the race right now for anyone who has a choice.
  • The trend towards cheap notebooks. Implicit here is RW’s assumption that many will run Firefox on a custom Linux distro.

I was recently in a discussion with a developer who was considering an MS stack involving Silverlight on the client. His argument was about efficiency of development. I could debate that, but the greater point here is that we’ve gone beyond a time when it’s reasonable to go to market with an IE-only app. (I realise Silverlight is technically not just IE, but I am coming from a point of pragmatism here, and anecdotally you don’t want customers running Silverlight on other browsers and non-MS operating systems.). Even if it were more efficient to develop with MS tools, the constraint is too great.

In many organisations, people are exercising choice and using various browsers. Say you have 20 people in a company who are all potential users of your web app. What is the chance that all 20 will be using IE? Improbably low, assuming 67% chance that each is using IE. (Okay, somewhat of an exaggeration, because their usage will be correlated as they work in the same place, so it’s not 0.67^20; but still, gut feel is that at least a few people here will be running the Fox.) Even if the corporate standard is IE, I’ve never worked in a company that truly enforces their standard (thankfully for developers in particular), so I’d be willing to bet there will still be a number of folks running Firefox. By releasing a product that only runs on IE, you’re basically guaranteeing that it won’t run on all potential users’ browser of choice. Not a showstopper perhaps as they can still fire up IE – if you’re fortunate enough that they’re running MS – but still a great way to make your product unpopularly received. It might still be mandated if the decision is a central one involving a faceless someone or committee who could care less what browser it runs on; but it’s also possible that the decision-maker will be a Firefox, Safari, Opera, or Chrome user, and will be suitably unimpressed with a late ’90s style IE-only offering.