Arve Bersvendsen

Javascript archive

Autosizer 2, UserJS and cross-domain storage

2008-06-17 12:41

Back in 2005, I wrote a UserJS named Autosizer that enhances Opera’s behavior when you view a single image. The script from back then has one inherent problem, though; when you set a resize mode, it would be remembered on a per-site basis, instead of as a global option. Which, frankly, sucks, as I usually prefer a preference to be that, just a preference that sticks, whether I am viewing infinite lolcats or ray tracing examples

Enter Autosizer 2, which fixes this, through a hack, which either is really clever, completely insane, or both. First off, download and install the user script. The script is a complete rewrite of the old script, and has been on a severe diet: There are now only two modes: View in original size, or Fit to screen.

The hack: Iframes, error pages, invalid domains and cross-document messaging

The way this works is roughly:

When an image is loaded, such as the two example images above, the script creates and injects an iframe pointing to http://0.0.0.0/img — an invalid URL
Next, the other half of the script activates only on the URL mentioned above, and sets up a few listeners for cross-document messages. It recognizes three settings, one for setting Fit to screen, one for no fit, and one for just retrieving the current setting
Every 300ms, the iframe will post a message to its parent window, with the current value of the setting.
The event listeners in the parent window (the image) will, upon getting a message from the iframe set the correct sizing mode.
The net effect of this is that we now have a cross-domain preference storage for UserJS.

What about security? Well, this is the catch, there is absolutely no security here, so a user script author should never store anything here that is remotely private, nor should an author assume that data stored in this way are not corrupted: A web page can send and retrieve messages in just the same way a user script can.

So, how much data can you store? Well, you have an entire /8 to store cookies on, which is 16 777 216 domains, you can have 30 cookies per domain, of max 4096 bytes each. That is 1.87 terabytes. Just don’t try. Or if you do, write a virtual filesystem implementation or something that gives you infinite geek points.

Should you want to mess around with the autosizer script, it’s licensed under the New BSD License. Enjoy.

Autosizer 2, UserJS and cross-domain storage | Nine comments | Javascript , Opera

File I/O in widgets and the browser

2008-05-07 20:28

Ok, so I had a somewhat mystically titled presentation at XTech, titled Going full circle: Giving Web Applications and Widgets access to device and user data. The slides are here (Should work reasonably well in Firefox, WebKit and Opera — does not work in IE. Navigate with PageUp/PageDown or the mouse wheel)

What the presentation was actually about was File I/O in the context of the browser, or more specifically, in widgets. We produced an input paper to be picked up for standardization.

Further, we will release builds on labs.opera.com shortly, so you can get to play with it shortly, and hopefully also with some example code, so you can get your heads wrapped around this.

Edit: There are now public builds for you to play with here — have fun

File I/O in widgets and the browser | Three comments | Ajax , Browsers , Javascript , Opera , Programming , Technology , Web , Widgets

Why didn't I get to do this when I was twelve?

2008-04-07 14:08

Dmitri Gaskin is 12. He’s a core contributor to Drupal — and, as evidenced below, gets to do Google Tech Talks before even being a teenager. Impressive.

Why didn't I get to do this when I was twelve? | Two comments | Javascript

ACID3: Strike ninety-eight. Make that 100

2008-03-26 21:20

Below is a screenshot of the Acid3, taken straight from one of our developer's machines. It's a screenshot of the builds we use to test core functionality in Opera (cue the weird, minimalistic user interface).

Yes, it says 100/100. I'm not going to say too much about it right now, other than send some Kudos in the general direction of the developers responsible (whom for some reason always seem to keep a low profile), and point to what Anne said earlier when we reached 98.

Note that there is a small rendering glitch left, but we will fix that too in due time. If you want to follow what happens in the future, visit the desktop team blog

This entry has more text, continue reading “ACID3: Strike ninety-eight. Make that 100” | Six comments | Browsers , HTML/XHTML , Javascript , Misc , Opera , Standards , Technology , Web

Opera 9.5 alpha, Kestrel, released

2007-09-04 14:44

Ok, I never got around to blog the release of Opera Mini 4 beta 2 — apologies for that. Let me instead introduce you to Opera 9.5 Alpha - a.k.a. Kestrel.

A quick overview is available on a separate product page

So, what’s new? In a nutshell:

History search
Bookmark synchronization
Dramatic performance improvements
Web site compatibility improvements
Improved standards support
Huge improvements to M2

The Changelog

I wish I could get through all of the changelog here, but I’m afraid it’s way too long, and I could blog until 2011 about it, in which case Kestrel would already be severely out of date. Instead, I’ll just give you the links.

So, let’s go through some of the changes

History search

I’ve lost count of the times in the past, when I’ve visited some page, somewhere, and have been totally unable to remember where it was, on what domain, or even what the document title was. In other words, finding what I have already visited has been a very hard task, bordering on impossible. Enter history search.

With history search, Opera creates a full-text index of each and every page you visit, and when you go to the address bar, you can simply start entering words you know have been on pages you’ve visited before, and items matching your search show up. It’s a kind of magic, really. At least compared to what browsers have done in the past.

Not only can you do this, but there is also an internal web page, named opera:historysearch that gives you a more traditional web search interface that allows you to bookmark your searches. Speaking of which …

Bookmark synchronization

Bookmarks have changed in Kestrel. In the past, the only way to get your bookmarks from machine to machine was to export the bookmarks, copy the opera6.adr file, or use external software to transport them. In Kestrel, you simply log in with your My Opera account, and sync your bookmarks, speed dial items and personal bar with the server (The synchronization is using https, fwiw, so you don’t need to fear that your data are being compromised).

So, you may say “I never use two computers, why should I sync?”. Real men don’t do external backup. They just cry a lot - when their offices catch on fire!. That’s why.

M2

I have been absolutely dependent on M2 as my mail client for years, but it has had a number of annoying issues, related both to IMAP, and to indexing, where I’ve seen mail go into the wrong access point for no reason. I’m happy to report that I haven’t seen any such issues with mail with Kestrel for a long time.

Keyboard shortcuts

Now, this change is probably somewhat controversial for old-time Opera users, since they probably have single-key shortcuts as part of their muscle memory. For newcomers, though, Opera is going to feel a lot less alien, as all single-key shortcuts have been removed in the default setup. This prevents these newcomers from performing accidental navigation, or from changing their browser’s settings without knowing how.

Those oldtimers who want the old setup back, can do so, though, by checking the box in opera:config#UserPrefs|EnabledExtendedKeyboardShortcuts (Alternatively, by going to Preferences->Advanced->Shortcuts and and check “Enable single key shortcuts”.)

Now, on to more developer-related stuff

Selectors

Kestrel has top-notch support for CSS3 selectors, as shown in this demo.

Backgrounds

Kestrel has also added support for SVG in background-images, plus support for the background-size property. David Storey has created an extremely nice demo, also including a showoff of Opera’s extended selector support (mirrored with permission, as the My Opera file store doesn’t allow external referers).

Overflows

Opera now support both the overflow-x and overflow-y from the CSS3 box model specification. This both improves web site compatibility, since there are a few sites out there that use this, and it allows you, as an author improved control over those scrollbars.

getElementsByClassName

Library vendors, take note. Opera supports getElementsByClassName natively. This should allow for even faster selectors.

Dynamic media queries

In Kestrel, CSS3 Media queries support has improved, making them dynamic. For you, as a developer, you can now count on Opera actually applying the correct style when the user resizes his window, instead of re-rendering on a resize event. You can view this yourself here - note how the content changes in the max-width & min-width tests when you resize the window.

Getters and setters

Opera now supports Getters and setters from JavaScript 1.5.

Offline support

While Opera doesn’t yet implement a peristent storage, the Navigator.onLine is now supported, with window.online and window.offline events for when the value changes.

Spatial navigation

Controlling keyboard navigation can be a major pain in web applications, in particular if your application is on a device with “keyboard” as the only input device, which is the reality if you want to make web applications tailored to mobile devices, or you want to accomodate those unable to use a mouse. Opera support for these scenarios have improved in two ways.

First, Kestrel supports a custom CSS pseudo class -o-prefocus that applies to form elements that have been reached via spatial navigation, allowing for better styling. Further, Opera also now support four methods on the document object, document.moveFocusLeft(),document.moveFocusUp(),document.moveFocusRight() and document.moveFocusDown(), allowing you to initiate spatnav on regular keyboard events. I have put up a very simple demo that demonstrates a use of this property. When you navigate of the right end of a table, the code in the example moves the spatial navigation focus to the far left of the table row below. The code is not commented, but should be fairly simple to understand.

Text-shadow

Kestrel also adds (full) support for the CSS3 text-shadow property. Unlike WebKit’s support, Opera supports multiple text-shadows, comma-separated (More precisely: You can have 12 of them).

There’s more?

Yes. There’s lots more, and like I said, I could continue posting stuff from the aforementioned changelog until 2011, now go download a build for unix, Mac or Windows

Have fun.

Opera 9.5 alpha, Kestrel, released | Browsers , CSS , CSS3 , HTML/XHTML , Javascript , Linux , Misc , Opera , Standards , Technology , Web

Word count for HTML documents

2007-04-19 13:35 – Seven comments

No, this blog is not turning into some rabid-fanboy-with-a-URL site for Komodo Edit, but I'd like to point to one of the more useful features of Komodo, namely it having the full DOM available to the macros. Which means that doing stuff like this macro to do word count on HTML/XML documents is changed from being a horrible regexp hack, to being totally manageable, and only nine lines of code.

Opera 9.20 beta 1

2007-03-28 15:49 – One comment

Opera 9.20 beta 1 is out the door. Go get it (or come here for a quick tip about one of the new features, speed dial)

Komodo: Open current selection as file

2007-03-22 17:33 – One comment

A Komodo IDE/Komodo Edit macro that allows you to open the current text selection as file.

Komodo Edit add-ons

2007-03-20 16:26 – Three comments

Since switching to Komodo, I've started to build a set of snippets and macros to make editing of markup easier, and I'm now making these available, together with a few dummy objects to give JavaScript autocompletion for Opera-specific properties and methods.

I see a shitstorm coming

2007-03-15 10:17 – Four comments

Apple has asserted intellectual property rights on the bitmap canvas found in the WhatWG spec.

Editor love, baby

2007-03-08 15:48 – Seven comments

Editor Love, or "How I learned to love Komodo Edit" after having been nudged in that direction a couple of days ago.

Steve Yegge talks about ECMAScript 4

2007-02-11 15:50 – Leave a comment

dojo.query: A CSS Query Engine For Dojo

2007-02-05 08:19 – Leave a comment

How To Subclass The JavaScript Array Object

2006-11-20 10:03 – Leave a comment

Being compatible with the dark matter of the web

2006-11-17 10:29 – Leave a comment

Spot the JS error

2006-11-14 14:16 – Five comments

At Hallvord's blog, I found this little JavaScript gem. Can you spot the error?

JavaScript, We Hardly new Ya

2006-11-14 10:13 – Leave a comment

The WHATWG Blog

2006-11-14 10:03 – Leave a comment

Opera Graph Library

2006-11-06 15:17 – Leave a comment

Opera Developer Community site launches

2006-11-01 13:29 – One comment

Opera launches a beta of the new Opera Developer Community site, named Dev.Opera. Here's a quick walkthrough

Event Streaming in Web Browsers

2006-09-01 17:29 – Eight comments

One cool feature we added to Opera 9 is Server-Sent Events from the WHATWG Web Applications 1.0 specification. Using SSE you can push DOM events continously from your web server to the visitor's browser. This creates a lot of exciting opportunities for web application authors.

Aptana

2006-07-25 15:37 – Leave a comment

Opera 9

2006-06-20 10:26 – Seven comments

Opera 9 is out. Go get it: Widgets, BitTorrent, improved standards support

Web 3.1415: Ajax, Ook! and Brainfuck

2006-04-02 17:08 – One comment

A library to assist in authoring Ook! and Brainfuck files for use on the Web 3.1415. Because authoring Web 2.0 apps has become all to easy.

Why Yahoo!'s Event Utility rocks

2006-03-03 09:21 – One comment

Image manipulation in <canvas>

2005-12-29 16:50 – Nine comments

What I did over christmas: Play with the <canvas> element in Opera 9. A few demos of image manipulation in canvas.

Cross-document messaging in Opera

2005-12-01 14:49 – Eight comments

One of the more unknown features of Opera is that it has an implementation of the DocumentMessaging interface from the Web Applications 1.0 specification. This interface allows authors to post messages between documents residing on different domains, without being suspectible to regular Cross Site Scripting vulnerabilities. This is a quick explanation and example of how cross-document messaging works.

Download Opera

Save $79 on DreamHost