Ubiquity Tutorial: How to turn a page upside-down
In Firefox 3.1 it has become possible to do even more amazing things with CSS. Anything can be rotated, skewed, and translated with just a single line of CSS code. With Ubiquity we can use that power for good, evil, and other. This tutorial demonstrates how, with five-ish lines of code, you can create functionality — both commands and extensions — that are “other”. Perhaps tending a little bit towards evil. Watch the video to find out what unpractical joke we’ve got cooking.
Watch the tutorial in HD here.
What most folks don’t yet know about Ubiquity is that it can be used for a lot more than just writing user-initiated commands. For example, any function that starts with pageLoad_ will automatically be run at the appropriate time.
For example, here’s the Ubiquity code for making the browser a little bit better for all of you bats out there:
function pageLoad_flip(){
var doc = CmdUtils.getDocument();
jQuery(doc.body).css("-moz-transform", "rotate(180deg)");
}
RT @azaaza Ubiquity Tutorial: How to turn a page upside-down | Follow @azaaza on Twitter | All blog posts
Phil Cook
Like it, I can already see some cool things with this.
Like a dinosaur website, on page load screen shaking from side to side for a short time.
Thanks for the info.
Frodo Larik
It’s cool you can do it with Firefox now.
It is also possible with Safari:
see: http://www.larik.nl/DHTML/flip.html
AndyEd
It would be useful to use feColorMatrix to simulate color blindness with this technique (ala http://dev.opera.com/articles/view/applying-color-tints-to-web-pages-with-s/)
Aza Raskin
@AndyEd: That’s a great idea. Want to whip up a Ubiquity command to do so?
Nico
Hello,
Your web-video-tutorial are really great and help to understand quickly the feature of ubiquity.
Just out of curiosity, which softwares do you use to produce these videos or where have you found resources to create these video?
I am particularly interested by the zoom on the text in the video when you write.(even though we would do that directly in our favorite browser with ubiquity I guess)
Anyway thanks for info.
SEO
Nice tutorial……….good stuff
cameron
hi it wont work for me can you tell me again in words step by step please
Zayıflama Lida Fx15 Ve Biber Hapı Zlfvbh
Like it, I can already see some cool things with this.
Like a dinosaur website, on page load screen shaking from side to side for a short time.
Thanks for the info.