Phil Wilson — Deskbot
Deskbot is a cross-platform desktop-based Jabber client for talking to a single user - normally a bot.
This is a screenshot of me using it to talk to the bot we run at work and asking for the details of a particular user.It’s written in wxRuby and uses xmpp4r-simple. There is a slight complication writing applications which need to poll a queue in wxRuby (such as the list of incoming replies from the bot) since you can’t just use green Thread objects and must use a Timer to make sure the Thread gets serviced. Very annoying.You can get the code like this:
bzr get http://philwilson.org/code/deskbot
You need to configure both who deskbot logs in as, and who it’s talking to in the code. There are some interesting questions around presence, invisibility, and client redirection here, but I just created a test account to log in as, and the bot already existed to talk to.
Theoretically I should be using things like ad-hoc commands and data forms, but I’m way too lazy.
It’s only a demo bit of code really and not enough to talk about, but I promised myself I would talk about more of the code I write!
Anne van Kesteren (Opera) — The Ajax Experience 2008
The Ajax Experience is fun so far. I might actually have my slides ready twelve hours in advance, though I will probably do some last minute edits. Bruce Lawson suggested calling the talk Ajax 2.0, and I went with that, but unfortunately the printed conference guide suggests it is “Opera and Ajax.” Ouch. The talk will be about making Ajax-style applications accessible (WAI-ARIA), HTML5, XMLHttpRequest Level 2, Access Control for Cross-Site Requests, Web Workers, Web Forms 2.0, and maybe a quick demonstration of Opera Dragonfly. This may seem like a lot, but I talk quite quickly and have to go on for an hour so covering a lot of topics seemed like the best solution. (That is, I will probably be done in forty-five minutes so people can ask questions.)
So far the talk from Francisco Tolmasky from 280 North on Objective-J and Cappuccino was the one I enjoyed the most. He equalled browsers with graphic cards, Cappuccino with OpenGL, and envisioned a world where everyone can just write their own language and is not limited by differences between browsers, and especially not between all the different paradigms browsers offer (CSS, HTML, SVG, canvas, et cetera). Cappuccino also works. Definitely worth following.
Yahoo! UI blog — Reading Blinds — a YUI-powered Reading Tool
Ever since I got upgraded to a shiny Macbook Pro and a 24 inch monitor at work I had a web experience that differed a lot from what I had before. Web sites that were easy and nice to read out of a sudden showed a massive amount of white space that actually hurt my eyes. Talking to several people with visual impairments and dyslexia at Scripting Enabled confirmed me that this can be a real issue.
This is why I thought of writing a small script that can be used as a bookmarklet to cover the screen with a dark overlay and only shows a few lines at a time. That way you can concentrate on the bit you are reading at the moment and the rest of the screen does not bother you too much.
Following are two screenshots of the same site with and without reading blinds:


So how to build that?
The task of building a tool like that is actually pretty easy:
- create two DIVs with black background and 85% opacity
- position them fixed to the top and the bottom of the screen
- set their height to 10% and 70% to leave a gap
Then I thought that I should be able to move the highlight on the page. For this I needed a bit more sophistication:
- Detect the mouse cursor position
- Make the top div span from the current top of the document to a few pixels above the cursor position
- Make the bottom div span from a few pixels below the current cursor position to the bottom of the viewport
I could have had a go at it myself, but I don’t want to end in browser inconsistency hell, hence I use YUI.
Here’s the code:
var readingblinds = function(){
var visible = true;
var y,top,bottom;
var info = true;
var size = 70;
function generate(){
top = document.createElement('div');
bottom = document.createElement('div');
document.body.appendChild(top);
document.body.appendChild(bottom);
styleTopBottom();
var message = document.createElement('div');
var note = document.createTextNode(
'Reading Blinds - ' +
'move mouse to highlight section to read. '
);
message.appendChild(note);
top.appendChild(message);
styleMessage(message);
YAHOO.util.Event.on(document, "mousemove", move);
};
function move(e){
y = YAHOO.util.Event.getXY(e);
if(y[1] > size){
render(y);
}
};
function render(y){
var real = y[1]-YAHOO.util.Dom.getDocumentScrollTop();
YAHOO.util.Dom.setStyle(top,'height',real-size+'px');
var h = YAHOO.util.Dom.getViewportHeight()-real+size;
YAHOO.util.Dom.setStyle(bottom,'top',real+size+'px');
YAHOO.util.Dom.setStyle(bottom,'height',h + 'px');
};
function styleMessage(message){
YAHOO.util.Dom.setStyle(message,'font-size','80%');
YAHOO.util.Dom.setStyle(message,'text-align','right');
YAHOO.util.Dom.setStyle(message,'padding','5px');
YAHOO.util.Dom.setStyle(message,'font-family','verdana,sans-serif');
YAHOO.util.Dom.setStyle(message,'color','white');
}
function styleTopBottom(){
YAHOO.util.Dom.batch([top,bottom],function(o){
YAHOO.util.Dom.setStyle(o,'background','#000');
YAHOO.util.Dom.setStyle(o,'width','100%');
YAHOO.util.Dom.setStyle(o,'position','fixed');
YAHOO.util.Dom.setStyle(o,'left','0');
YAHOO.util.Dom.setStyle(o,'height','10%');
YAHOO.util.Dom.setStyle(o,'opacity','.85');
YAHOO.util.Dom.setStyle(o,'overflow','hidden');
});
YAHOO.util.Dom.setStyle(top,'top','0');
YAHOO.util.Dom.setStyle(bottom,'bottom',0);
YAHOO.util.Dom.setStyle(bottom,'height','70%');
};
return{
init:generate
}
}();
readingblinds.init();
The interesting methods are move() and render(); the rest is more or less run-of-the-mill DOM scripting.
The move() method is an event handler that gets called by any mousemove event on the document. YUI’s Dom Collection then makes it easy for me to get the current mouse cursor position with getXY() and I just need to make sure that the mouse is low enough in the browser window to not cause a negative height on the top div.
The render() method then sets the appropriate heights. I determine the upper border of the browser with getDocumentScrollTop() and substract that one from the cursor position. To determine where to end the bottom div I use getViewPortHeight().
Addding dazzle with keyboard controls
This was cool enough, but I wanted to be able to turn the blinds on and off and change the size of the visible part with the keyboard, too. For this, I needed to use the keylistener utility some tool methods to resize the gap or show and hide both of the cover divs. The resizing methods needed to get some boundaries to avoid div overlap or the whole viewport to be uncovered.
var readingblinds = function(){
var visible = true;
var y,top,bottom;
var info = true;
var size = 70;
function generate(){
top = document.createElement('div');
bottom = document.createElement('div');
document.body.appendChild(top);
document.body.appendChild(bottom);
styleTopBottom();
var message = document.createElement('div');
var note = document.createTextNode(
'Reading Blinds - ' +
'move mouse to highlight section to read. ' +
'Press "b" to show and hide, "s" to decrease size,' +
' "l" to increase size'
);
message.appendChild(note);
top.appendChild(message);
styleMessage(message);
var keyspy = new YAHOO.util.KeyListener(
document,
{ keys:66 },
{ fn:peekaboo }
);
keyspy.enable();
var keyspy2 = new YAHOO.util.KeyListener(
document,
{ keys:83 },
{ fn:smaller }
);
keyspy2.enable();
var keyspy3 = new YAHOO.util.KeyListener(
document,
{ keys:76 },
{ fn:larger }
);
keyspy3.enable();
YAHOO.util.Event.on(document, "mousemove", move);
};
function move(e){
y = YAHOO.util.Event.getXY(e);
if(y[1] > size){
render(y);
}
};
function render(y){
var real = y[1]-YAHOO.util.Dom.getDocumentScrollTop();
YAHOO.util.Dom.setStyle(top,'height',real-size+'px');
YAHOO.util.Dom.setStyle(bottom,'top',real+size+'px');
var h = YAHOO.util.Dom.getViewportHeight()-real+size;
YAHOO.util.Dom.setStyle(bottom,'height',h + 'px');
};
function styleMessage(message){
YAHOO.util.Dom.setStyle(message,'font-size','80%');
YAHOO.util.Dom.setStyle(message,'text-align','right');
YAHOO.util.Dom.setStyle(message,'padding','5px');
YAHOO.util.Dom.setStyle(message,'font-family','verdana,sans-serif');
YAHOO.util.Dom.setStyle(message,'color','white');
}
function styleTopBottom(){
YAHOO.util.Dom.batch([top,bottom],function(o){
YAHOO.util.Dom.setStyle(o,'background','#000');
YAHOO.util.Dom.setStyle(o,'width','100%');
YAHOO.util.Dom.setStyle(o,'position','fixed');
YAHOO.util.Dom.setStyle(o,'left','0');
YAHOO.util.Dom.setStyle(o,'height','10%');
YAHOO.util.Dom.setStyle(o,'opacity','.85');
YAHOO.util.Dom.setStyle(o,'overflow','hidden');
});
YAHOO.util.Dom.setStyle(top,'top','0');
YAHOO.util.Dom.setStyle(bottom,'bottom',0);
YAHOO.util.Dom.setStyle(bottom,'height','70%');
};
function peekaboo(){
if(visible === true){
YAHOO.util.Dom.setStyle(top,'display','none');
YAHOO.util.Dom.setStyle(bottom,'display','none');
visible = false;
} else {
YAHOO.util.Dom.setStyle(top,'display','block');
YAHOO.util.Dom.setStyle(bottom,'display','block');
visible = true;
}
};
function smaller(){
if(size > 10){
size -= 5;
render(y);
}
};
function larger(){
if(size < YAHOO.util.Dom.getViewportHeight()/2){
size += 5;
render(y);
}
};
return{
init:generate
}
}();
readingblinds.init();
That was pretty cool already, but as I wanted to make reading blinds a single script include or bookmarklet I had the problem of relying on the YUI. Well, there is a trick to conjure YUI from thin air by using the YAHOO_config object with the listener method creating a script node to get the YUI Loader.
So instead of calling readingblinds.init() directly, I used the following magic YUI trick:
if(typeof YAHOO=="undefined"||!YAHOO){
YAHOO_config = function(){
var s = document.createElement('script');
s.setAttribute('type','text/javascript');
s.setAttribute('src','http://yui.yahooapis.com/2.5.2/'+
'build/yuiloader/yuiloader-beta-min.js');
document.getElementsByTagName('head')[0].appendChild(s);
return{
listener:function(o){
if(o.name === 'get'){
window.setTimeout(YAHOO_config.ready,1);
}
},
ready:function(){
var loader = new YAHOO.util.YUILoader();
var dependencies = ['yahoo','dom','event'];
loader.require(dependencies);
loader.loadOptional = true;
loader.insert({
onSuccess:function(){
readingblinds.init();
}
});
}
};
}();
} else {
readingblinds.init();
}
That’s the lot. You can download readingblinds.js
and include it in your site, or you can drag the following link to your links toolbar: Reading Blinds.
Kevin Lawver — How'd I Do On "The Omnivore Hundred"
A challenge is afoot! Very Good Taste created a list called the Omnivore Hundred and challenged people to post it to their blogs and bold the things they've eaten. So, here's mine, most of them with commentary and I linked to the Wikipedia entries for the ones I'd never heard of:
- Venison
- Nettle tea
- Huevos rancheros - Many many times. I used to stop at Filiberto's in Tucson on the way to work a couple times a week and get either huevos rancheros or a breakfast burrito.
- Steak tartare
- Crocodile - I had alligator sausage in Charleston, SC, so I'm counting this one.
- Black pudding - A couple times in Dublin. I prefer white pudding with fried eggs. Not a huge fan of black pudding.
- Cheese fondue
- Carp
- Borscht - My friend Becky had a Russian dinner after she got back from her LDS mission and we had borscht with sour cream. It was good.
- Baba ghanoush - Not a huge fan of eggplant, so this probably won't be a repeat.
- Calamari
- Pho - Yesterday for lunch.
- PB&J sandwich
- Aloo gobi - In Bangalore and at a buffet in Herndon.
- Hot dog from a street cart
- Epoisses/Époisses_de_Bourgogne_(cheese)
- Black truffle - Not all by itself, but I've had several sauces with black truffle in them.
Fruit wine made from something other than grapes- Steamed pork buns - Thanks to Cindy Li and Dim Sum Sundays!
- Pistachio ice cream
- Heirloom tomatoes - Several times from Great Country Farms and other places.
- Fresh wild berries - We used to pick our own on the side of the road when we lived in North and South Carolina.
- Foie gras - Oh yes. At my favorite restaurant in the entire world in the South of France, L'Hermitage du Riou
- Rice and beans
- Brawn, or head cheese
- Raw Scotch Bonnet pepper
- Dulce de leche
- Oysters - Yes, hated them, and now with my shellfish allergy, no more.
- Baklava
- Bagna cauda
- Wasabi peas
Clam chowder in a sourdough bowl- Again, with the shellfish allergy, not going to happen- Salted lassi - I love mango lassis from Shalimar, in Mountain View, CA. I'm not sure if that counts. I had a weird cucumber one, that I hated, so I'm assuming that was salted.
- Sauerkraut
- Root beer float
Cognac with a fat cigar- Don't drink or smoke.- Clotted cream tea
Vodka jelly/Jell-O- Gumbo - In New Orleans even, but again, stupid shellfish allergy, I can't eat it again.
- Oxtail - In Germany as a kid. One of the strongest tastes I've ever experienced, I can still remember it twenty-something years later.
- Curried goat
- Whole insects
- Phaal
- Goat's milk
Malt whisky from a bottle worth £60/$120 or more- Fugu
- Chicken tikka masala - Once in India even, but I prefer Butter Chicken.
- Eel - as sushi, not a huge fan, but I'd try other kinds of someone served it.
- Krispy Kreme original glazed doughnut
- Sea urchin
- Prickly pear
- Umeboshi
- Abalone
- Paneer - At least three or four different kinds.
- McDonald's Big Mac Meal - I used to get them occasionally as a kid, but I don't like the sauce anymore, and since watching Super-Size Me, I rarely eat fast food.
- Spaetzle
Dirty gin martiniBeer above 8% ABV- Poutine - No, but after hearing my brother describe it, I want to!
- Carob chips - Mom used to "secretly" replace the chocolate chips in cookies with carob chips. We always knew.
- S'mores
- Sweetbreads - In Paris at an amazing dinner with Daniel Glazman, Jen and his wife. Amazing.
- Kaolin - The only mention I can find of Kaolin is a clay or Kaopectate. If it's Kaopectate, you betcha I've had it.
- Currywurst
- Durian
- Frogs' legs - Max and I tried them at our favorite Vietnamese restaurant in Sterling. He liked them. They were OK.
- Beignets, churros, elephant ears or funnel cake - All four!
- Haggis - In Edinburgh with Arun and a whole host of awesome W3C people. One of my all-time favorite dinners. The haggis was actually pretty good too.
- Fried plantain
- Chitterlings, or andouillette
- Gazpacho
- Caviar and blini
Louche absinthe- Gjetost, or brunost
- Roadkill - Not that I know of... but I have lived in the Deep South, so who knows.
Baijiu- Hostess Fruit Pie - Not in years, but I remember going through a phase where I loved the cherry ones.
- Snail - Several times, once in France.
- Lapsang souchong
Bellini- Tom yum - I've had it at least once, but can't think of where at the moment.
- Eggs Benedict - Jen gets this whenever she can when we go out for breakfast. I know we both ate it at least once on our honeymoon.
- Pocky - My sister introduced me to this one.
- Tasting menu at a three-Michelin-star restaurant - I don't know how many stars L'Hermitage du Riou has, but I've eaten there at least 8 times so I'm counting that.
- Kobe beef - At the Microsoft cafeteria in Mountain View during a CSS Working Group meeting as a hamburger. One of the best burgers I've ever had.
- Hare - At L'Hermitage du Riou - baby hare wrapped in bacon - the best meal I've ever had.
- Goulash
- Flowers - My brother and I ate dandelions once, and I know I've had edible flowers before.
- Horse
- Criollo chocolate
- Spam
- Soft shell crab - But not anymore... sigh
- Rose harissa
- Catfish - All over the South, fried in filets, on a sandwich, as nuggets. You name it, I've had it.
- Mole poblano
- Bagel and lox
- Lobster Thermidor
- Polenta
- Jamaican Blue Mountain coffee
- Snake
Of the hundred, there are a few I won't do because they involve smoking or drinking, but I've tried 59 of the hundred, which isn't too bad.
Things I'd add to the list:
- Ankimo - Monkfish liver, introduced by Alex Mogilevsky at a CSS Working Group dinner at my favorite sushi restaurant, Satsuma, in Mountain View. When it's good, it tastes a lot like foie gras. Ask for it at your favorite sushi place. It's rarely on the menu, even if they have it!
- Pylsurs - James McNally reminded my of them with one of his Iceland pics. We used to get them whenever we went to town when we lived in Iceland. Lamb hot dogs... yum.
- Club Orange - The best orange soda, hell, just best soda, on the planet. Like Orangina but with real flavor. You can get it imported from Food Ireland or just go to Dublin.
- Fanta Grape - The European version with real sugar.
- Sarsaparilla - Birch Beer would work too.
So, how'd you do?
Roger Johansson (456 Berea St) — Multiple form labels and screen readers
Just about every website needs some forms. Sometimes there are many of them, sometimes just a single contact form. Regardless of their number, they need to be usable and accessible, which can sometimes be a little more work than it would be if theory and practice aligned a little better.
Say you have a simple form with an input field whose value needs to be validated, either by a JavaScript running in the browser or by a script on the server (preferably both). When the data entered by the user does not match what is expected, you need to notify the user somehow.
For sighted users this is generally not a problem. If you output some text stating what the problem is and highlight it visually, most people will notice it. For screen reader users it's a little more tricky though.
To make sure that the screen reader associates the message with the correct input field, the text should be in a label element that is explicitly connected to the field. No problem so far actually, but then the designer tells you that it has to look differently. The validation message should be below the input field instead of next to the label text. Or it should be next to the input field, or some other location not directly adjacent to the label text.
You start fiddling with extra markup, absolute positioning, negative margins, and end up with something that seems to work reasonably well. Until you resize the text, at which point things get misaligned.
You may be able to find a half-good solution that works within certain constraints, but if you've been down this road you probably get the point. Positioning error messages this way is fragile. It would be so much easier if you could just put the error message in a second label element associated with the input field.
Well, it turns out you can do that. From The LABEL element in the HTML 4.01 specification:
The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.
The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. More than one LABEL may be associated with the same control by creating multiple references via the for attribute.
Sounds great, doesn't it? A quick check in graphical web browsers shows that they associate multiple labels with the input field (as evidenced by the input field gaining focus when either label is clicked). But what about screen readers? It would be so useful if this would work...
Unfortunately, and perhaps unsurprisingly, it looks like it doesn't quite work as well as you'd hope. I mentioned this briefly in Use the label element to make your HTML forms accessible, but I think it's worth bringing up again since full support for multiple labels would help us make forms more accessible to screen reader users while keeping visual designers happy.
I am far from an expert user when it comes to screen readers, but I've done some limited testing with mostly disappointing results.
- Apple VoiceOver does not recognise more than one label element associated with a form control and reads only the label that comes first in the document's source order.
- JAWS and Window-Eyes both do the opposite and read only the last label when an input field gains focus.
- The only screen reader of those that I tested that does handle multiple labels is Fire Vox.
The exact results may obviously depend on user configuration and reading modes, and there may be other screen readers that get it right, but these results indicate that screen reader behaviour is too inconsistent for multiple labels to be a reliable technique.
A couple of years ago, Bob Easton set up a multiple label test case that reveals similar results, discussed in Speaking form labels - Summary.
Sorry to write at such length about something that appears to have no practical use. I just wanted to highlight a case where I think screen readers following the HTML specification more closely would help web developers to increase the accessibility of HTML forms they don't have full visual control of.
Posted in (X)HTML, Accessibility.
Yahoo! Developer Network — Smushit.com - optimizing images has just become really easy
Nicole Sullivan and Stoyan Stefanov are dedicated to making the web a faster place. As integral parts of the Exceptional Performance Team they already shared a lot of crucial information of how to make your web sites faster.
One thing they've been pondering a lot about lately is image optimization for file size. Image editing tools come with all kind of great ways to optimize images for visual quality and file size, but when you look at the image in a text or hex editor you'll find that there is a lot of extra information in the file, for example the name of the editing suite, dates when the picture was created and lots more.
There are a lot of tools that remove this information safely and get the most out of the images without having an effect on their visual quality. The catch is that there are a lot of tools for a lot of image formats, all of them on the command line.
So Nicole and Stefan took their research findings, fired up their code editors and built a web app that does all the optimization for you:
Smushit.com allows you to upload some files or give it URL. The tool then takes the images, optimizes them and tells you how many bytes you can save. You then get a zip of all the images for download and can replace them on your site.
Here's a video of Stoyan and Nicole presenting Smushit.com at The Ajax Experience in Boston (sorry about the audio):
Chris Heilmann
Yahoo Developer Network
developerWorks: Web Development — Real Web 2.0: Open, geographic information systems at Geonames.org
developerWorks: Web Development — High-performance Ajax with Tomcat Advanced I/O
Cameron Moll — Excerpted highlights from How Designers Think
I've not made it all through the entire book yet, but Byran Lawson's How Designers Think continues to impress me as I've given it an on/off reading the past few months. Though it's written with a slant towards architectural design, its content easily applies to designers of all disciplines.
Towards the end of chapter 7, "Problems, solutions, and the design process," I found myself underlining all kinds of stuff. Quoted here are a few excerpts.
There are no optimal design solutions
Design almost invariably involves compromise.... Rarely can the designer simply optimise one requirement without suffering losses elsewhere.... There are no established methods for deciding just how good or bad solutions are, and still the best test of most design is to wait and see how well it works in practice. Design solutions can never be perfect and are often more easily criticised than created, and designers must accept that they will almost invariably appear wrong in some ways to some people.
Design solutions are a contribution to knowledge
Once an idea has been formed and a design completed the world has in some way changed. Each design, whether built or made, or even if just left on the drawing-board, represents progress in some way.... Thus the completion of a design solution does not just serve the client, but enables the designer to develop his or her own ideas in a public and examinable way.
The process involves finding as well as solving problems
It is clear from our analysis of the nature of design problems that the designer must inevitably expend considerable energy in identifying the problems. It is central to modern thinking about design that problems and solutions are seen as emerging together, rather than one following logically upon the other.... [B]oth problem and solution become clearer as the process goes on.
Design is a prescriptive activity
[D]esign is essentially prescriptive whereas science is predominantly descriptive. Designers do not aim to deal with questions of what is, how and why, but, rather, with what might be, could be and should be. While scientists may help us to understand the present and predict the future, designers may be seen to prescribe and to create the future, and thus their process deserves not just ethical but also moral scrutiny.
Designers work in the context of a need for action
Unlike the artist, the designer is not free to concentrate exclusively on those issues which seem most interesting. Clearly one of the central skills in design is the ability rapidly to become fascinated by problems previously unheard of.... Not only must designers face up to all the problems which emerge they must also do so in a limited time. Design is often a matter of compromise decisions made on the basis of inadequate information.... Designers, unlike scientists, do not seem to have the right to be wrong. While we accept that a disproved theory may have helped science to advance, we rarely acknowledge the similar contribution made by mistaken designs.
On that note, I vote for celebrating "mistaken designs" much more than we currently do as a community. Who's with me?
Mark Pilgrim (Google) — Dive into HTML 5
In case you missed it, I’ve started a new column at the WHATWG blog called This Week in HTML 5. The story thus far:
- Episode 1: Web Workers, and how to specify alternate text for images you know nothing about.
- Episode 2: the window.navigator object, meta http-equiv=”Content-Language”, the
Workerobject,outerHTML,insertAdjacentHTML(), and the continuing saga of thealtattribute. - Episode 3: the event loop, the
onhashchangeevent, and content sniffing for SVG images. - Episode 4: the W3C’s HTML 5 validator, SVG-in-HTML, and the proper way to provide alternate text for Rorschach inkblots.
- Episode 5: XSLT, MathML, Web Forms 2, and some light reading on character encoding.
- Episode 6: multimedia accessibility, Ogg Theora, and the year 2022.
- Episode 7: clickjacking.
There is a feed available for people who like that sort of thing.
WHATWG blog — This Week in HTML 5 - Episode 7
Welcome back to "This Week in HTML 5," where I'll try to summarize the major activity in the ongoing standards process in the WHATWG and W3C HTML Working Group.
Work continued this week on Web Forms 2, but I'm going to hold off on that until next week. And in case you missed it, Ian Hickson gave a tech talk on HTML 5, including live demos of some features recently implemented in nightly browser builds.
The big news this week is the disclosure of a vulnerability that researchers have dubbed "clickjacking." To understand it, start with Giorgio Maone's post, Clickjacking and NoScript. Giorgio is the author of the popular NoScript extension for Firefox. In its default configuration, NoScript protects against this vulnerability on most sites in most situations; you can configure it to defeat the attack entirely, but only at the cost of usability and functionality.
Of course, most web users do not run Firefox, and fewer still run NoScript, so web developers still need to be aware of it. Michal Zalewski's post, Dealing with UI redress vulnerabilities inherent to the current web, addresses some possible workarounds:
- Using Javascript hacks to detect that
window.top != windowto inhibit rendering, or overridewindow.top.location. These mechanisms work only if Javascript is enabled, however, and are not guaranteed to be reliable or future-safe. If the check is carried on every UI click, performance penalties apply, too. Not to mention, the extra complexity is just counterintuitive and weird.- Requiring non-trivial reauthentication (captcha, password reentry) on all UI actions with any potential for abuse. Although this is acceptable for certain critical operations, doing so every time a person adds Bob as a friend on a social networking site, or deletes a single mail in a webmail system, is very impractical.
Worried yet? Now let's turn to the question of what browser vendors can do to mitigate the vulnerability. Michal offers several proposals. It is important to realize that none of these proposals have been implemented yet, so don't go rushing off to your text editor and expecting them to do something useful.
- Create a HTTP-level (or HTTP-EQUIV) mechanism along the lines of "X-I-Do-Not-Want-To-Be-Framed-Across-Domains: yes" that permits a web page to inhibit frame rendering in potentially dangerous situations.
- Add a document-level mechanism to make "if nested <show this> else <show that>" conditionals possible without Javascript. One proposal is to do this on the level of CSS (by using either the media-dependency features of CSS or special classes); another is to introduce new HTML tags. This would make it possible for pages to defend themselves even in environments where Javascript is disabled or limited.
- Add an on-by-default mechanism that prevents UI actions to be taken when a document tries to obstruct portions of a non-same-origin frame. By carefully designing the mechanism, we can prevent legitimate uses (such as dynamic menus that overlap with advertisements, gadgets, etc) from being affected, yet achieve a high reliability in stopping attacks.
- Enforce a click-to-work mechanism (resembling the Eolas patent workaround) for all cross-domain IFRAMEs.
- Rework everything we know about HTML / browser security models to make it possible for domains and pages to specify very specific opt-in / opt-out policies for all types of linking, referencing, such that countering UI redress attacks would be just one of the cases controlled by this mechanism.
To this list, Colin Jackson added two more suggestions:
- New cookie attribute: The "httpOnly" cookie flag allows sites to put restrictions on how a cookie can be accessed. We could allow a new flag to be specified in the Set-Cookie header that is designed to prevent CSRF and "UI redress" attacks. If a cookie is set with a "sameOrigin" flag, we could prevent that cookie from being sent on HTTP requests that are initiated by other origins, or were made by frames with ancestors of other origins. In a CSRF or "UI redress" attack scenario, it will appear as though the user is not logged in, and thus the HTTP request will be unable to affect the user's account.
- New HTTP request header: Browser vendors seem to be moving away from "same origin restrictions" towards "verifiable origin labels" that let the site decide whether two security origins trust each other. ... [I]nstead of making it an "X-I-Do-Not-Want-To-Be-Framed-Across-Domains: yes" HTTP response header, make it an "X-Ancestor-Frame-Origin: http://www.evil.com" HTTP request header. This header could be a list of all the origins that are ancestors of the frame that triggered the request. If the site decides it does not like the ancestor frame origin it could reject the request. This could be added as a property of MessageEvent as well to detect client-side-only UI redress attacks.
This last approach moves us down a slippery slope towards site security policies for IFRAMEs and embedded content, similar to the Flash security model that allows trusted sites to access cross-domain resources. In practice, Flash crossdomain.xml files have a number of problems, and such an approach would still only cover a fraction of the possible use cases.
You can read the full thread for all the gory details and back-and-forth among browser vendors (Maciej Stachowiak works on WebKit, Robert O'Callahan works on Firefox) and other interested parties. As Maciej notes, user experience may suffer: "[Under proposal #3] iGoogle widgets would become disabled if scrolled partially off the top of the page under your proposal. And even if scrolled back into view, would remain disabled for a second. With possibly a jarring visual effect, or alternately, no visual indication that they are disabled. Hard to decide which is worse." As Rob notes, any solution will also need to deal with IFRAMEs styled with opacity:0, related attacks using some little-known (but widely supported) capabilities of SVG, and possibly other vectors that the world collectively hasn't figured out yet. If you're getting a mental image of the game "Whack-a-Mole," you're not alone.
Ironically, the best example of "clickjacking" is the download page for the NoScript extension, which uses it for good rather than evil. Thanks to some fancy JavaScript (search for "installer"), Giorgio embeds the addons.mozilla.org download page for NoScript in an IFRAME on his own page on noscript.net, sets the IFRAME to "opacity:0" (an attack vector that Robert O'Callahan specifically warned about), scrolls the embedded addons.mozilla.org page to the top corner of its "Add to Firefox" button, and sets the z-index of the IFRAME to 100. Thus, the IFRAME is floating (due to "z-index:100") invisibly (due to "opacity:0") over Giorgio's own "Install Now" button (due to the positioning of the IFRAME element itself). When you think you're clicking the button on noscript.net you are actually clicking the button on addons.mozilla.org. What's the difference? By default, Firefox treats addons.mozilla.org as a trusted download site, so it immediately pops up the extension installation dialog instead of blocking the installation with an infobar saying "Firefox prevented this site (noscript.net) from installing software on your computer." From a user experience standpoint, this is great -- one less click to download and install an extension. From a security standpoint, this is incredibly scary -- the end user has no idea they're interacting with a third-party site.
Ian Hickson, the editor of HTML 5, weighed in with his opinion:
I would like feedback from browser vendors on this topic, ideally in the form of experimental implementations. Personally I think the idea of disabling the contents of a cross-origin iframe that has been partially obscured or rendered partially off-screen is the best idea, but whether we can adopt it depends somewhat on whether browser vendors are willing to adopt it and implement it. It requires no standards changes to implement.
Tune in next week for another exciting episode of "This Week in HTML 5."
Kevin Lawver — I just spent $80 filling up my gas tank
More from me-
I get that the LDS church wants to silence dissents, but this guy isn't speaking out about church doctrine. The petition states: We affirm the LDS Church's right to define doctrine and policy for its own members. So, let the church proclaim all it wants about whatever. Let the church dictate the actions of its members, bestowing religious privileges only upon whom they see fit. But when it comes to denying civil rights to others? I just can't support that all. Doctrine and Covenants 134:9 states, "We do not believe it just to mingle religious influence with civil government..." So, yea. There ya go.
See the petition here: Signing for Something.
Bob DuCharme (Innodata Isogen) — Querying aggregated XBRL reports with SPARQL
Easier than I though it would be.
My main goal for doing a SPARQL query against XBRL data was to be able to pull out the same bit of information from multiple companies' reports at once, and it turned out to be much less work than I thought it would be. Here is the result of my query for interest expense figures across several companies:
------------------------------------------------------------------------------ | companyName | periodStart | periodEnd | interestExp | ============================================================================== | "GENERAL MILLS INC" | "2005-05-30" | "2006-05-28" | "399600000" | | "GENERAL MILLS INC" | "2006-05-29" | "2007-05-27" | "426500000" | | "GENERAL MILLS INC" | "2007-05-28" | "2008-05-25" | "421700000" | | "PAPA JOHNS INTERNATIONAL INC" | "2007-01-01" | "2007-07-01" | "3232000" | | "PAPA JOHNS INTERNATIONAL INC" | "2007-04-02" | "2007-07-01" | "1706000" | | "PAPA JOHNS INTERNATIONAL INC" | "2007-12-31" | "2008-06-29" | "3694000" | | "PAPA JOHNS INTERNATIONAL INC" | "2008-03-31" | "2008-06-29" | "1802000" | | "PEPSICO INC" | "2006-12-31" | "2007-06-16" | "96000000" | | "PEPSICO INC" | "2007-03-25" | "2007-06-16" | "54000000" | | "PEPSICO INC" | "2007-12-30" | "2008-06-14" | "132000000" | | "PEPSICO INC" | "2008-03-23" | "2008-06-14" | "74000000" | ------------------------------------------------------------------------------
Being able to compare specific financial figures from different companies will be great for people doing financial research.
A given company's XBRL SEC filing is typically an instance file full of facts plus additional files with taxonomies about the terms used and XLink linkbases about the relationships between the facts. The instance files, on their own, looked like the low hanging fruit to me.
After kicking around some of my ideas for modeling XBRL in RDF with Dave Raggett (who's doing some very interesting, more ambitious work modeling the whole deal in RDF—in related news, Kingsley Idehen said that OpenLink has an XBRL ontology almost ready, and TopQuadrant's Ralph Hodgson pointed out the BRONTO project at TIFbrewery), I wrote an instance2rdf.xsl XSLT stylesheet to convert an XBRL instance to RDF/XML. After running it on the instance documents for several companies that I downloaded from the SEC website and manually creating a file that I called colist.rdf to map company identifiers in the XBRL instances to company names, I ran the following query with ARQ 1.4 to ask about all Interest Expense figures in my collection of reports:
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX xi: <http://www.xbrl.org/2003/instance>
SELECT DISTINCT ?companyName ?periodStart ?periodEnd ?interestExp
FROM <RRDonnelley.rdf>
FROM <pepsico.rdf>
FROM <nobleenergy.rdf>
FROM <generalmills.rdf>
FROM <papajohns.rdf>
FROM <dow.rdf>
FROM <ge.rdf>
FROM <cocacola.rdf>
FROM <colist.rdf>
WHERE {
?s rdf:type http://xbrl.us/us-gaap/2008-03-31#InterestExpense>;
rdf:value ?interestExp;
xi:identifier ?identifier;
xi:startDate ?periodStart;
xi:endDate ?periodEnd.
?identifier rdfs:label ?companyName.
}
ORDER BY ?companyName ?periodStart
Not all of the named companies have InterestExpense figures in that namespace; the query just asks for the figure from the companies that do.
I originally planned to merge all the RDF files into one before running the query, but I decided to let SPARQL do it, which is why there are nine FROM clauses above. In a more realistic scenario, the RDF versions of the companies' XBRL data would be loaded into a single triplestore and you would run the query against that.
As Dave suggested, I could add data typing to the RDF created from the XBRL instances. Before I add anything else to the RDF, though, I want to make sure that it enables a new kind of useful SPARQL query against the data that I couldn't do before the addition. I'm open to suggestions!
What does this prove? We know that RDF is great for aggregating data, especially resources that may have different data structures but certain data in common. XBRL gets more interesting when you start aggregating data from multiple companies, and I haven't seen much of that, although my research was limited to free software. Being able to compare specific financial figures from different companies will be great for people doing financial research, and this new combination of standards and free software makes it pretty easy.
Bob DuCharme (Innodata Isogen) — Querying wiki/dbpedia for presidents' ages at inauguration
Easier than Jon Udell had thought.
In an August 19th interview with Jon Udell, David Huynh of Freebase (and formerly of MIT's Project Simile) introduced his Freebase demo by describing a hypothetical query to a database asking for presidents' ages when they are inaugurated and whether there's a trend that we're getting younger presidents. Jon replies:
If it were possible to issue a database query over Wikipedia, then you could ask a question like that; you could say give me—well first of all, it would presume that you could identify US presidents, and it would further presume that you could find a field within those documents that would say the ages of those people, and that's not really part of the structure of Wikipedia. This information can be explicitly made available in Freebase. It hasn't in all cases, and that's part of the social process. So it ultimately relies on people to refine this raw information that came from Wikipedia and elsewhere so that it is more fielded and structured.
DBPedia + SPARQL is my new favorite toy.
They then go on to do such a query with Freebase... but they could have done it with Wikipedia, with a little help from SPARQL and DBpedia.
Wikipedia has plenty of fielded information in infoboxes. DBpedia lets you access this collection of data via a SPARQL endpoint. While Wikipedia (and hence DBpedia) have no field for a president's age at inauguration, it does store their birthdate and the year they began their first term, so calculating their ages when they each became president is pretty easy.
You could see a list of US Presidents by going to Wikipedia's List of Presidents of the United States page, but let's do it programatically with this SPARQL query so that we can build from there to get their ages at inauguration. We ask for the things in the database that have a subject of "Presidents of the United States":
PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
SELECT ?presName WHERE {
?presName skos:subject <http://dbpedia.org/resource/Category:Presidents_of_the_United_States>.
}
To see the query in action, click this executable URL version.
A slightly more complex query lists the name, birth date, and beginning of the first term of each one:
PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
PREFIX dbpedia2: <http://dbpedia.org/property/>
SELECT ?presName,?birthday, ?startDate WHERE {
?presName skos:subject <http://dbpedia.org/resource/Category:Presidents_of_the_United_States>;
dbpedia2:birth ?birthday;
dbpedia2:presidentStart ?startDate.
}
Click here to see it in action. Because the fielded information for the various presidents is not consistent, only 19 of them have dbpedia2:birth and dbpedia2:presidentStart fields, so you'll only see those presidents returned for this query. Wikipedia pages for all US presidents do have this information, but it's not always named the same way—compare the dbpedia pages for Zachary Taylor and Lyndon Johnson, who doesn't show up on the list return by that last query, for some examples. As Jon said, filling out that data is part of the social process.
The real promise of Linked Data is the ability to write a program or script that grabs the data and does something with it, so I wrote a two-line batch file that:
- uses curl to send that URL to DBpedia and store the results in an XML file
- runs a short XSLT script to calculate the presidents' ages at inauguration
It doesn't look much like a two-line batch file here, so before running it, replace the first six carriage returns with spaces to turn the first seven lines into one:
curl -o presidentAges.xml -F "query=PREFIX dbpedia2:
<http://dbpedia.org/property/> PREFIX skos:
<http://www.w3.org/2004/02/skos/core#> SELECT ?presName,?birthday,
?startDate WHERE { ?presName skos:subject
<http://dbpedia.org/resource/Category:Presidents_of_the_United_States>;
dbpedia2:birth ?birthday; dbpedia2:presidentStart ?startDate.}"
http://dbpedia.org/sparql
xsltproc presidentAges.xsl presidentAges.xml
Here is the XSLT stylesheet, presidentAges.xsl:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:s="http://www.w3.org/2005/sparql-results#"
version="1.0">
<xsl:strip-space elements="*"/>
<xsl:output method="text"/>
<xsl:template match="s:result">
<xsl:variable name="birthYear"
select="substring(
s:binding[@name='birthday']/s:literal,1,4)"/>
<xsl:variable name="presidentName"
select="substring(s:binding[@name='presName']/s:uri,29)"/>
<xsl:value-of select="translate($presidentName,'_',' ')"/>
<xsl:text> </xsl:text>
<xsl:value-of select="s:binding[@name='startDate']/
s:literal - $birthYear - 1"/>
<xsl:text>
</xsl:text>
</xsl:template>
</xsl:stylesheet>
I subtracted the birth year and then another 1 from the startDate because with inaugurations being in January (at least in modern times) I assumed that each president hadn't reached his birthday yet. Here is the result:
Abraham Lincoln 51 Andrew Johnson 56 Bill Clinton 46 Chester A. Arthur 50 Franklin Pierce 48 George H. W. Bush 64 George Washington 56 Harry S. Truman 60 James K. Polk 49 James Monroe 58 John Adams 61 John Quincy Adams 57 Martin Van Buren 54 Millard Fillmore 49 Richard Nixon 55 Rutherford B. Hayes 54 Thomas Jefferson 57 Ulysses S. Grant 46 Zachary Taylor 64
I never realized that Grant was the same age as Clinton when he started—a year younger than Obama is now—but having led the army that won the US Civil War, I guess he had reasons to look a bit older at the start of his term.
DBPedia + SPARQL is my new favorite toy, and I'm getting more and more ideas lately about useful (or at least fun) things to do with the combination.
Matt Webb (Schulze & Webb) — books read september 2008
Books read September 2008, with date finished:
- The Very Slow Time Machine (1979), Ian Watson (7th)
- Three Men in a Boat (1889), Jerome K. Jerome (10th)
- The Non-Statistical Man (1965), Raymond F. Jones (13th)
- Signal to Noise (1992), Neil Gaiman and Dave McKean (15th, r.)
- John von Neumann and Norbert Wiener: From Mathematics to the Technologies of Life and Death (1980), Steve J. Heims (18th)
- Riders of the Purple Sage (1912), Zane Grey (22nd)
- The Haunted Stars (1960), Edmond Hamilton (23rd)
- Spacehounds of IPC (1947), E. E. 'Doc' Smith (24th, r.)
- The Futurological Congress (1971), Stanislaw Lem (25th)
- Diaspora, Greg Egan (28th, r.)
This month I've also picked up an original 1955 printing of the Rand Corporation's A Million Random Digits with 100,000 Normal Deviates (which will go with my copy of Ulysses - with the words rearranged in alphabetical order - from Simon Popper's Borromean), and a reprint of 507 Mechanical Movements, but neither of those I'll read so they won't be included here.
It's been a month of sci-fi and Westerns (I've been watching a bunch of films too), which has left me dreaming of clear blue skies, long clear vistas, desert scrub, C beams glittering in the dark near the Tannhauser gate... I'm not kidding, this is manifesting as a heart-breaking yearning, a pining for frontiers and wide-open scale. I really don't know how to deal with it.
So Zane Grey was magical, and it's incredible to see the Western being written for the first time--the seed that turns into a genre. Egan's Diaspora was as poignant as the first time I read it: the hardest of hard sci-fi that delves into what it means to be human and opens it way, way up. The universe is a lot bigger after I finish reading that book. Ian Watson I'm pleased to have discovered as a sci-fi author: his stories have ideas I've read nowhere else, and I'm happy to find he has a large back catalogue to work through.
Lem was hilarious (oh and, like the best satire, true. Or was it the mascons telling me the book was good?); Jerome was also hilarious--it had me laughing out loud, so rare.
Heims' double bibliography of Wiener and Neumann paints the characters and context of early cybernetics, and in that way sits as a great companion piece to his later book Constructing a Social Science for Postwar America: The Cybernetics Group, 1946-1953. But here's the thing: you also get a picture of Wiener's humanity (and the surprising humanity in cybernetics), and the horrendous contingency of the Cold War and the arms race, which appears to have rested heavily on one of the quickest and most convincing minds of the the 20th century - Neumann - understanding people like machines, refusing to have faith in humanity, and being a warmonger. Heims makes a powerful case for a science better embedded in society, and produces this marvellous quote from Paul Goodman:
Whether or not it draws on new scientific research, technology is a branch of moral philosophy, not of science.
Recommended.
Fuming — CSS Nite in HIROSHIMA 受付開始しました
大きな地図で見る アクセスですが、広島駅からは広電(市内電車)5番線「南区役所前」下車です。 中四国では初となる開催ですので、実行委員として微力ながらもベストを尽くしたいと思います。 定員が100名とちょっと少ないのですが・・・ごめんなさい。 今回、成功できれば、次はもっと大きな会場でやりたいです。 詳細がまだちゃんと固まっていないのですが、デザイナーやコーダーさんだけじゃなくて、プログラマーとかサーバー管理者といったWebに携わるすべての立場の人に参加してもらえるイベントにしたいと思っています。 当日のお手伝い・協賛大歓迎です! ちなみに、事務局の住所は、私の現在の勤務先の住所です。 先週木曜日に移転しました(^^;
Daniel Glazman (Disruptive Innovations) — BlueGriffon™
In
the beginning was Netscape
Gold.
Then Mozilla
Composer. From the ashes of Netscape and the code of Mozilla
Composer came Nvu.
Nvu had a cousin, KompoZer.
But all this tools now belong to History and are extinct or on path to
extinction.
In the meantime, Mozilla brought Firefox to the masses and its rendering engine, Gecko, has the power to fuel a next-generation wysiwyg editor for the World Wide Web. This editor is BlueGriffon™. Stay tuned !
ProgrammableWeb — Zillow’s API Expands the Reach of Real Estate Data
Real estate web service Zillow has progressively made a large amount of information available via its API (our API profile). Recently the Zillow API was updated to include access to additional information, including GetRegionPostings and GetUpdatedPropertyDetails API calls.
According to the Zillow blog:
The GetRegionPostings API takes a place (ZIP code, neighborhood, or even geo points) as an input and returns a count of listings by type (Make Me Move, for sale by agent, for sale by owner, and reported for sale) in addition to some home facts about each property returned.
The GetUpdatedPropertyDetails API call provides property details for home facts that have been edited by the home’s owner or agent.
Several web sites have integrated Zillow data via these new API calls, including Redfin and Realius (a real estate sales prediction game).
Other web sites have mashed up various types of Zillow data available via its API, including city and neighborhood information (regional home value trends, demographic data, and other data about homes). Education.com and Banks.com have both tapped into city trends and demographics to provide value-added result listings.
Although not available via its API, Zillow has made neighborhood boundaries data available to the public via a Creative Commons license. Check out walkability ranking web site Walk Score, which uses this data in conjunction with heat maps, and Andrew Mattie’s blog post on how to use the neighborhood data to build a mashup in 24 hours.
We currently have fifteen other Zillow mashups listed in our mashup directory and we look forward to adding more mashups as developers continue to tap into the broad set of data available via the Zillow API.
Sponsored by
Thomas Vander Wal (InfoCloud) — Links for 2008-09-29 [ma.gnolia]
- Voynich News: "Verifying" the Verifier Method...
A good overview of the Gordon Rugg verifier method, but then miss applies how it is/was used
Saved By: Thomas Vander Wal | View Details | Give Thanks
Tags: gordonrugg, voynich, verifier, verifiermethod
Fiftyfoureleven — Charts with PHP and Google Charts API
Fiftyfoureleven — Best practices when moving your site
Fiftyfoureleven — htmlSQL - a PHP class to query the web by an SQL like language
Fiftyfoureleven — PHP UTF-8 cheatsheet
Fiftyfoureleven — Link Building Fundamentals: A Primer
Fiftyfoureleven — WYMeditor: web-based XHTML editor
Fiftyfoureleven — jWYSIWYG
Fiftyfoureleven — Racker Hacker
Micah Dubinko (Yahoo!) — My energy plan
Cringely writes that a mandatory ban on incandescent lighting would cut U.S. electricity consumption by 18% within a year. What else could have a big impact?
The Onion Radio News reported on a new eco-friendly Hummer that kills its owners. (aired Aug 7, 2008) That’s not bad, but a tax on SUVs of one dollar per pound per year would be fine too.
On a more serious note, telecommuting could significantly reduce energy usage. Twenty percent of person-days should be doable within a year, averaged across all industries and workers. I wonder what percentage of petroleum usage that would represent?…
-m
Ian Forrester (BBC Backstage) — The Price of Property, Fools Gold (Manchester)

So if you missed it, the Price of Property on Channel4 (ep3 of 4) was all about Manchester. It had everything in it from the new place Urbansplash was advertising to me a few weeks back to the megabucks deansgate tower (all of 5mins walk from where I live). But what was most interesting was the woman who paid for 7 flats without looking at them in person. Yes its tragic, but the flats which they filmed her going into were the the Danube flats. Yes my block of flats. She's has the bigger balcony that myself but everything is exactly the same. More pictures here.
Generally the documentary series is interesting and worth catching if you can. Its certainly made me think more twice about buying a flat in Manchester at this current moment. I might even be better moving out and into a another set of flats. Rental pricing is going down and that means those penthouse appartments are even more affordable.
Yahoo! Developer Network — Flash on the Beach: Day One
This is the first in a series of articles reporting on Flash on the Beach, one of Europe's premier Flash conferences. I'm going to pick out my personal highlights.
This morning, having arrived bright and early in a cold but sunny Brighton, I eagerly made my way to the Brighton Dome to register for this year's Flash on the Beach conference. This is the third year in a row that I have made the journey down to the South Coast for the conference, and once again the line-up of speakers over the three days is stellar. After grabbing a cup of YDN-sponsored tea (yes, we're doing our bit for all the caffeine-addicted Flash developers out there) I headed into the main auditorium for the start of the day.
Adobe Keynote
John Davey, conference organiser supremo, dropped a bombshell in his introduction to the keynote session: Flash on the Beach will be coming to Miami in April '09. If you've always wanted to get to Flash on the Beach but didn't want to brave the chill of the UK in October, then maybe Miami is more your style. I am assured that tanned, toned bodies and manicured poodles are welcome but strictly optional.
The keynote, delivered by Richard Galvan and a few other Adobe folks, showed off some of the features that are shipping with the Flash CS4 release. It's been a while since I've played around in the Flash authoring tool, but judging by the spontaneous applause from the audience it sounds like the new animation system is going to please the designers amongst you. We also got a tantalising glimpse of the new features in the Drawing API, including what looked like live video being projected onto an animated distortion mesh. I don't know what practical applications that might have, but it sure looked pretty. Richard promised that there'll be more information on this and other new features in some of the other Adobe sessions at FotB, so I'll keep you updated.
Mark Anders: Flex 4 and Thermo
After some more tea (or should that be moar tea) I switched venues to see Mark Anders talk about the new designer/developer workflow in Flex 4 and a tool known only by its codename: "Thermo". Having been on the wrong end of a few "misinterpreted" designs (and on both sides of the designer/developer fence) I was interested in seeing how Adobe plan on tackling this thorny issue.
The upcoming Flex 4 has a radically refactored component architecture and a handful of new MXML elements to represent vector graphics, the latter of which exist as a subset of MXML knows as FXG. If you've had any experience with the excellent degrafa library, you'll feel right at home with FXG.
With these two additions, and the introduction of Thermo (think Flex Builder but with the scary ActionScript stuff being replaced with new designer tools), Adobe seems to have completely separated the look and feel of a Flex application from its underlying logic. Developers can round-trip their designs using the new FXG format, and then integrate into their code either at compile time or runtime.
To demonstrate this improved workflow, Mark showed off a weather application that consumed Yahoo's Weather API. The application had several, radically different skins that changed not only how the application looked but also how the user interacted with it. He went from a debug view where all the information was visible, to an accordion-style view with animated open/close states, and finally to a mobile view which looked very much like iPhone's Weather application, complete with flick scrolling. The skins were all created with Thermo without a single line of ActionScipt code in sight. Impressive stuff indeed.
However, as excited as I am by all this, I can't help but wonder why Adobe created FXG and retrofitted all their creative tools to read and write the new format, when SVG is already here and supported by all those tools and more. If I bump into Mark or any of the Adobe people over the next few days, I'll be sure to ask.
Eric Natzke: The Art of Play
The last session of the day was back in the main auditorium, which was just as well as it was absolutely packed. Graphic Designer come Flash hero Eric Natzke showed off some of his latest artwork, and talked about the process of generating that artwork with Flash.
I think I can safely say that everyone in the room was inspired by Eric and his amazing graphical style, not least because there was a mad scramble at the end of his sessions to get one of the free postcards he was giving away. I didn't get a postcard, but I'm seriously tempted to order a few of his canvases for my living room.
End of Day One
Sadly I can't attend James Paterson's "inspired session" or the party this evening as I'm currently on the train back to London, but rest assured I'll be back again tomorrow for more Flash-related fun.
Steve Webster
Front-End Engineer, Yahoo! Europe
Shelley Powers (Burningbird) — Burningbird's RealTech: Deep Breaths and Baby Porcupines
The economy is all over the place today, and a lot of people are uncertain and more than a little worried. Now is the time to take deep breaths, not over-react, or look for the nearest tall building from which to jump.
Good, commonsense discussions about what all of this means can be found among the doom, gloom, and tales of complete economic failure.
- Ron Lieber: "Is My Money Safe?"
- Coping with Panic and Fear in the Markets
- Don't yank all your money out, or...don't wake up in the morning, screaming "SELL! SELL!"
- Frugal is sexy. Not buying is the new black.
In the spirit of the times, the following is a recipe that comes to us from the Great Depression.
Baby Porcupines 1 pound ground round steak 1 cup bread crumbs 1 egg 4 tablespoons chopped onions 2 tablespoons chopped green peppers 1 teaspoon salt 1/8 teaspoon pepper 3/4 cup raw rice 1 cup tomato soup or tomato puree 2 cups water Mix all but last 3 ingredients. Shape into small balls and roll in the uncooked rice, Heat tomato soup and water in heavy pan with a tight fitting cover. Place balls in the tomato mixture cover and cook slowly 45 minutes or until meat is tender and the rice is done.Printer friendly version
Yahoo! Developer Network — Yet more great things to learn about web development
The Opera Web Standards Curriculum in association with YDN has just been updated with another batch of great tutorials on website development.
The new sections cover Accessibility with an article from yours truly on accessibility basics and another by Yahoo!'s Ben Hawkes-Lewis on accessibility testing. The section on CSS is also available with an introduction to CSS from YDN's Christian Heilmann. Other industry stalwarts, such as Tommy Olsson, follow on the CSS section with more detailed articles on specific topics.
I'm glad I've been able to contribute to this great introduction to web development. If you are looking to learn the basics it's highly recommended.
Tom Hughes-Croucher
Yahoo! Developer Network
Rick Jelliffe (Topologi) — The derivatives crisis and standards
Kevin Lawver — Bleebleeblahblahboo
I am vehemently against Prop 8 on California's ballot in November.
Ok, Church, do to me what you will.
ETA- Kevin's post beat mine by 6 minutes! I knew I shouldn't have wasted time with a potty break!
Yahoo! Developer Network — Nodalities Magazine: Anatomy of a SearchMonkey
In case you were looking for a little light reading on a Monday, our own architect Peter Mika has just published an article in the latest print issue of Nodalities. Peter's article, titled Anatomy of a SearchMonkey, dives into the architecture and thinking behind the SearchMonkey project, and how SearchMonkey applies to semantic data on the Web. The entire magazine is available as a free PDF download (5 MB), so take a look and let us know what you think!
Evan Goer
Yahoo! SearchMonkey Team
Daniel Glazman (Disruptive Innovations) — Five things you don't know about me (meme)
- I hate dishwashing by hand
- I still have two milk teeth, my dentist used to call me "the mutant"
- I had the mongolian spot
- the first programmable machine I owned (but not the 1st one I programmed) was a TI-59
- the only thing I always buy when I travel to the US is toothpaste : Colgate regular flavor does not exist any more here
Daniel Glazman (Disruptive Innovations) — Note à nos politiques et décideurs
J'ai survécu à l'INPI. J'ai survécu à ce que la France a de pire dans sa bureaucratie rétrograde, dans son fonctionnariat désagréable et vieillot.
J'avais une marque à déposer. Je me suis donc rendu sur le site l'Institut National de la Protection Industrielle. Surprise, le site dispose d'un formulaire en ligne me permettant de remplir ma demande. C'est mal foutu mais ça marche. Super. Mais, mais, mais. Non, je rêve, impossible de soumettre en ligne et payer en ligne. Le formulaire génère un PDF qu'il faut imprimer, tenez-vous bien (tenez-vous mieux...), en CINQ exemplaires. Ensuite, il faut soit le déposer physiquement à l'INPI ou une de ses antennes, soit l'envoyer en recommandé AR, soit le faxer ; mais attention, le faxer vous coûtera CENT euros de plus... Si, si... Comme je doute fortement de l'hyper-réactivité de l'INPI à la réception d'un recommandé, je décide de me déplacer.
Continuons le processus. J'imprime donc docilement mes cinq exemplaires, que je signe et tamponne, et je me prends par la main jusqu'au siège de l'INPI, 26bis rue de Saint-Petersbourg à côté de la place de Clichy à Paris. Le nombre d'employés en train de fumer un clope devant la porte donne déjà une idée de l'ambiance studieuse qui y règne. Le monsieur à l'accueil est souriant et poli, me dirige vers le premier comptoir à droite dans le long couloir du RdC. Ceci dit, j'ai plus l'impression d'arriver dans une antenne de l'ANPE que dans l'organisme chargé de la protection des brevets marques et logos nationaux... Bonjour madame, c'est pour un dépôt de marque. Oui monsieur, on va vous recevoir, asseyez-vous là. Suivent cinq personnes pour la même raison, elles s'assoient là aussi. Pendant ce temps, les deux conseillères chargées de recevoir les clients ont fini de traiter le leur et papotent devant nous, un verre d'eau à la main, en regardant leur montre et pestant parce qu'il reste du monde alors qu'on approche à grands pas de 17h. Au bout d'un moment, l'une d'elles s'approche et nous dit écoutez il y a beaucoup de monde ici, allez directement au guichet tout au fond du couloir !!! Comment se débarasser de son boulot quand on n'a pas envie de bosser ! On se retrouve à cinq assis devant le guichet du fond, une jeune fille est debout devant le guichet qui est vide, la fonctionnaire étant partie à la recherche d'on-ne-sait-quoi. Arrive un autre gars comme ça en passant qui nous demande ce qu'on fait là, puis nous dit mais non c'est pas là allez venez et il nous ramène aussi sec au guichet d'origine... Une jeune employée dans son bureau en verre nous regarde faire notre circuit genre "les douze travaux d'Asterix" morte de rire.
Là, la mamie qui avait éjecté son boulot peste à nouveau et finit par nous recevoir un par un. Et peste derechef en permanence contre ce trop-de-boulot. En nous disant de nous dépêcher parce que la caisse ferme à 16h30 et qu'il est 16h20. Détail croustillant, il y a des affiches partout - y compris à la Caisse - indiquant que la fermeture est à 17h précises... Ah oui, et puis elle râle aussi parce qu'il y a du bruit, qu'il y a des gens qui passent. Elle doit sourire quand elle prend un PV... La seconde cliente au guichet, avec la seconde mamie, s'entend répondre qu'il lui manque un formulaire pour ses quinze ou vingt renouvellements de marques. Elle en fait apparemment régulièrement et n'est pas d'accord. La mamie finit par lui accorder que ça passe avec ce qu'elle fournit...
Au bout de quelques minutes, on me rend un de mes cinq exemplaires, avec un n° d'enregistrement, agrafe les quatre autres avec difficulté malgré une agrafeuse automatique (!), et me tend un bon de pré-commande à amener avec mon payement à la Caisse. Oui, vous avez deviné, la Caisse est au fond du couloir, avec l'autre guichet.... La jeune fille poireaute toujours, la gueule défaite, devant son guichet vide.
Des gens passent dans tous les sens en glandouillant, les mains dans les poches. Une dame passe en demandant "des brevets déposés ?", la geignarde répond "non pas aujourd'hui" !!! Aaaaah le dynamisme des entreprises françaises
Il y a quelques années , c'est Hitachi qui déposait par jour le nombre de brevets que Thomson déposait par an, non ? Quinze secondes plus tard une autre passe et demande également "des brevets déposés ?". Je manque d'éclater de rire, la jeune fille assise à côté de moi qui elle aussi vient déposer une marque pouffe et me jette des regards affolés.
La caissière, elle, a oublié de tomber dans la potion magique quand elle était petite. A côté d'elle et derrière un long guichet en U, trois fonctionnaires désoeuvrées. Aucune idée de ce qu'elle font mais il est marqué partout "fermeture à 17h". C'est pile à ce moment-là qu'une quatrième déboule de l'arrière du guichet et s'en va en jetant un "bonsoir, à demain". Il est 16h30 très précises, pas 17h. Après m'avoir marmonné un "b'jour m'sieur" presqu'inaudible, la caissière me rend sans un mot un reçu en échange de ma commande et de mon chèque. Wowlala, ça respire l'innovation et l'industrie (lourde) ici. La politesse et le sourire aussi.
Je repars sidéré. Le fonctionnement de cette institution est antédiluvien. Une réforme s'impose. J'ai perdu 2h30 pour être certain que mon dépôt serait enregistré aujourd'hui même et ne pas perdre le temps de l'envoi AR. Et encore, je ne suis pas trop loin de la place de Clichy. Comment veut-on servir les déposants de marques et brevets, bref les créateurs de valeur, avec un organisme aussi confit dans sa franchouillardise ?
developerWorks: Web Development — Get started with Project Zero, WebSphere sMash, and PHP
Shelley Powers (Burningbird) — Burningbird's RealTech: OpenOffice for Aqua
Last week I made the switch from NeoOffice to OpenOffice for Aqua on the Mac.
I'm impressed with the overall appearance of the application, and the functionality. Most importantly, I was able to process Word documents with templates without problems and without loss of functionality.
The application is very fast and responsive on my PowerPC laptops, and from what I've read elsewhere, it's actually better on the Intel-based machines. It doesn't have the lag that I've found with newer versions of NeoOffice when clicking on a menu item and the menu contents displaying. Nor does it seem to absorb as much of the machine's resources.
I can open and work on several different types of documents, at the same time, and not have performance or stability problems. Overall, it's quite efficient, as well as including all the features most, if not all, of us need from an office toolset.
OpenOffice includes the following tools:
- A fully featured text document editor, including support for both macros and templates, as well as all features necessary for sophisticated document creation and management. You can also track and show changes, as well as autocorrect and format, embed tables and images, add a media player, and incorporate a bibliography database.
- A spreadsheet tool that provides any number of formatting capabilities, simple to use chart creators, all the spreadsheet functions you need and want, and some interesting Scenario and Solver tools I haven't had a chance to explore.
- A presentation tool with templates that can incorporate any number of graphics and themes, providing slideshows, the ability to package the presentation— the usual presentation software suspects.
- A database creation tool that also uses ODBC and JDBC to connect to an existing database, either remotely or locally.
- A drawing tool that provides a good deal of functionality in order to create nice looking illustrations.
The application is still in candidate release status, so you may want to wait until the finished release. However, if you're a Mac user, with either a PowerPC or Intel-based machine, give the application serious consideration.
Did I happen to mention it's open source?
Printer friendly versionSimon Willison (Django) — A quote from Kellan Elliott-McCrea
The only down side is everyone I’ve talked to at Freebase seems pretty solid on this being their proprietary secret sauce, because a good, fast scalable open source tuple store might actually jump start a real semantic (small-S) web after all these years.
Shelley Powers (Burningbird) — Burningbird's RealTech: Are Christians Stupid?
Washington Post article about ministers violating tax laws by urging their flocks to vote for McCain:
Printer friendly versionAsked why he felt the need to discuss the candidates by name and to be explicit in rejecting Obama and his pro-choice views, Johnson said he must connect the dots because he is not sure that all members of his congregation can do so on their own.
Simon Willison (Django) — A quote from Bill Zeller
We’ve found CSRF vulnerabilities in sites that have a huge incentive to do security correctly. If you’re in charge of a website and haven’t specifically protected against CSRF, chances are you’re vulnerable.
Simon Willison (Django) — Popular Websites Vulnerable to Cross-Site Request Forgery Attacks
Popular Websites Vulnerable to Cross-Site Request Forgery Attacks. Ed Felten and Bill Zeller announce four CSRF holes, in ING Direct, YouTube, MetaFilter and the New York Times. The ING Direct hole allowed transfer of funds out of a user’s bank accounts! The first three were fixed before publication; the New York Times hole still exists (despite being reported a year ago), and allows you to silently steal e-mail addresses by CSRFing the “E-mail this” feature.
Hallvord R. M. Steen (Opera) — My O statuses
Some of my past status messages on My Opera - just because I don't like old messages disappearing when replaced, and thought some of them were good enough to keep somewhere.. This blog post is "somewhere". Reverse chronological order.
- Rich text is just plain text with more money
- Those who do not invent wheels are stuck re-inventing them
- work·ing group [wur-king groop] -noun. 1. The intersection of web technology and religion
- Never attribute to stupidity that which can be adequately explained by deadlines.
- It can be much harder to figure out why something works than why something is broken.
Feel free to improve on or re-use them :)
Ben Buchanan (200ok) — opera web standards curriculum updated
The second batch of articles has been released at the Opera Web Standards Curriculum. This update really gets the curriculum up to a full head of steam - students can now learn everything they need to know to create a valid, accessible, fully styled website. The next update will see the Javascript articles added.
I contributed two articles to this round... styling lists and links; and styling tables. They were chunkier topics than we originally imagined, as it turns out... :)
Anyway, if you haven't checked out the Opera Web Standards Curriculum already, head on over and take a look.
Simon Willison (Django) — A Brief Tour of Graphd
A Brief Tour of Graphd. The secret sauce behind Freebase—a custom written graph server that models everything as a typed, versioned relationship and can churn through over 3,000 simple queries a second on a single AMD64 core.
Henry Sivonen — Access Blocked
Yesterday evening, coming back from the bar after a glass with friends, I used my mobile Web devices to read stuff from lists.w3.org. One probably shouldn’t read work-related stuff on Friday night, but my browsing tends to gravitate to list archive while on the bus… Anyway, as usual, I followed a link from a message to a spec in the /TR/ space on www.w3.org.
To my great surpise, I was greeted with an instance of the child porn block page of the police (link to a globally visible instance hosted by another ISP), which was subject to debate earlier this year when the police used the system to block a site critical of the blocking system but not containing child porn.
First, I thought this was some kind of DNS poisoning practical joke performed by someone outside the ISP, because the name of the server http://lugos.fn.fi:8001/ (seems to be reachable from Finland only) didn’t suggest any connection to the ISP—DNA (their GPRS/3G service to be precise). However, a quick inspection from the .fi registry shows that DNA owns fn.fi.
The process by which the Web censorship list is maintained in Finland is secretive, so one can’t know how www.w3.org ended up on the list of censored host names. The fact that a legitimate site can end up on the list raises questions about the process, though. To the credit of the censors, the block had been lifted by Saturday morning, but one can only speculate if getting a less prominent false positive off the list would have been as fast.
I tried to take video “proof” using my phone, but the result (MPEG-4 video track from phone; re-encoded as Theora) is too blurry to look convi









