Tag Archives: Opera

Readability for Android

So you want Readability bookmarklets on your Android device, huh? Not so fast! At the time of writing, it’s not possible to access the official Readability bookmarklets on Android but there is a workaround. Here’s how to do it in three easy steps.

Step 1: Copy the Readability script

In Opera Mobile or Mini (I don’t think this works in other browsers), select and copy the code below:

javascript:((function()%7Bwindow.baseUrl%3D'http%3A//www.readability.com'%3Bwindow.readabilityToken%3D''%3Bvar%20s%3Ddocument.createElement('script')%3Bs.setAttribute('type'%2C'text/javascript')%3Bs.setAttribute('charset'%2C'UTF-8')%3Bs.setAttribute('src'%2CbaseUrl%2B'/bookmarklet/read.js')%3Bdocument.documentElement.appendChild(s)%3B%7D)())

Step 2: Create a bookmark

Open the Bookmarks menu and click on the Add button (don’t click Save yet).

Step 3: Edit the bookmark

Screenshot of Opera Mobile Readability bookmarklet

  1. Change the title to Readability (or something similar).
  2. Delete the address and paste in the code copied from above.
  3. Click Save.

Voila! You should now be able to go to any article or blog post, click the Readability bookmarklet and enjoy a better reading experience.

Opera update: “Requires installation of untrusted packages”

On two separate installations of Ubuntu 10.10 I got the following message when trying to update Opera using Ubuntu’s Update Manager:
“Requires installation of untrusted packages”

Unfortunately, the only option available was to click the Close button with no help to fix the problem. Fortunately, there’s a solution, also on My Opera, that worked for me: my.opera.com/vinhphuc121583/blog/fix-error-requires-installation-of-untrusted-packages

A couple of points to note:

  • You should add the Opera GPG key, as explained here: help.ubuntu.com/community/OperaBrowser
  • The final
    sudo apt-get update

    doesn’t update Opera, but using the Update Manager again works with no error message.

Thank you Bùi Vĩnh Phúc!

UPDATE: Things seem to work again now so instead of following the instructions in the linked blog post, you should just be able to add the Opera GPG key (even if you’ve done it before) and update as explained above. Official information is here:
my.opera.com/desktopteam/blog/2011/01/25/an-update-reminder-to-ubuntu-linux-mint-and-debian-users-or-anyone-else-on-a-d

How to input Japanese in Opera on Linux

UPDATE: As of 2010, Ubuntu and Fedora both use iBus and I must say this is a great addition to the IME landscape. As Jacob7908 suggested in the comments, this is my new recommendation.
——
Like many Linux users I’ve never really had much luck with SCIM and Opera but I’m pleased to say I’ve finally found a solution: use UIM.

I’ve seen suggestions to install scim-bridge-qt (most promising), uninstall scim-bridge and start a second instance of SCIM just for Opera. None of these worked for me but I found a suggestion to use UIM instead which did the trick. Here’s what you do:

1. Install Anthy and UIM

2. Add this to the top of your .xinitrc file or equivalent (e.g. .xsession) in your home directory.

export GTK_IM_MODULE="uim"
export QT_IM_MODULE="uim"
uim-xim &
export XMODIFIERS=@im="uim"
uim-toolbar-gtk &

The optional last line launches a toolbar which you right-click to edit preferences, for example your key-bindings.

3. Logout and login again, launch Opera and enjoy.

If you have a Japanese keyboard you may need to add this line to the top of the .xinitrc file to make UIM detect the Hankaku-Zenkaku key on the left.

This works at least on Arch Linux. Please leave feedback if it doesn’t work for your distro or if you have other suggestions.

Widgets on the Wii

Just a quick note that may help widget developers.

The problem:
Your widget may work well on mobile and desktop and in the widget emulator, but the version of Opera used on the Wii is a very different beast and the emulator does not reflect its quirks. Not only that, you can’t download or transfer your widget directly to the Wii to see what needs fixing (or at least I couldn’t find a way).

The solution:
The version of Opera used on the Wii is 9.30 so to test compatibility, install Opera 9.27 on your PC and you should be OK to then fix and re-submit successfully.

The user agent string for the Wii browser

The Wii user agent as reported by BBClone.

Debug menu, where have you been all my life?!

By accident, I came across a feature today which has pretty much made Firefox redundant for me.

I’m sure I’m not alone in reverting to Firefox occasionally for one or two key features that don’t exist in Opera (or at least I haven’t found them yet). The Web Developer toolbar was my addictive feature but without wishing to sound like a cheesy commercial, all that changed when I found the Dragonfly team’s debug menu.

Although it doesn’t do everything the Web Developer toolbar can do, it’s got plenty to keep me productive and happy in a single browser. The only time I need fire up an orange fox, blue “e”, etc. is for cross-browser testing but in an ideal world, that would be redundant too.

I highly recommend you try it out and here’s an updated version of the menu which has the addition of a feed validator, W3C HTML5 validator, headers checker and window resize options (thanks Christian).

QR codes – with an extra dimension

After thinking a bit more about logos in QR codes (the fun never stops!), it occurred to me that instead of obscuring some of the code’s appearance with a logo, you could obscure some of the code’s appearance time with a logo. In other words, make it animated with the logo disappearing or shrinking to some extent and it would still be readable. This has the added of benefit of not needing a high error correction level so you can keep the whole image small.

Here’s a quick 29×29 attempt made with the lovely Gimp using Demonstro’s nice alternative Opera logo:

Animated Opera QR code

N.B. If you can’t see it moving please try using a different browser.

At the end of the day, it’s still an animated image which some people find annoying but at least it has a purpose.

I have more ideas but that’s enough excitement for now…

Opera’s (potential) HTML5 compliance

With HTML5 on its way I thought I’d take inspiration from http://www.w3.org/QA/2008/09/top-500-html5-validity.html who in turn took inspiration from Opera’s QA team and test the front page of a few of Opera’s websites for HTML5 conformity.

Firstly, an important caveat. The HTML5 validator is beta so may have erroneously missed or mis-detected issues. In addition, at the time of writing HTML5 is still a working draft only and public websites should not be expected to support it yet. Not being valid HTML5 means nothing unless the document’s doctype indicates that it’s HTML5, which none of them do at this stage. This is just intended to be a (hopefully educational) “what if” exercise. Having said that, several sites didn’t even validate against current standards – I’m looking at you list.opera.com, widgets.opera.com, bugs.opera.com, portal.opera.com, labs.opera.com and irc.opera.com!

So onto the HTML5 validation results, in no particular order:

HTML5 validator result

This is all academic until we see what errors were found and how to correct them, in other words, what are some of the common changes from HTML 4 to 5 that we may encounter in our own websites?

Not surprisingly, the majority are a result of presentation and markup being strictly separated at last. The following were encountered in this exercise:

  • Attribute size not allowed on element input.
  • Attributes bgcolor, link, alink, vlink not allowed on element body.
  • Attribute width not allowed on element table or td.
  • Attribute border not allowed on element table or img.
  • Attribute bgcolor not allowed on element table, tr or td.
  • Attributes cellspacing and cellpadding not allowed on element table.
  • Attribute align not allowed on element td or div.
  • The center, font and big elements are obsolete.

CSS is the place for presentational items such as these.

Other HTML5-specific errors were mostly as follows:

  • Attribute accesskey not allowed on element a.
  • Attribute name not allowed on element a. (Use id)
  • No whitespace allowed in paths/URIs. (Use %20)
  • The acronym element is obsolete. (Use abbr)
  • Bad values content-type and cache-control for attribute http-equiv on element meta.

Admittedly this only uses Opera’s websites as an example and they are more compliant than most, but I was still surprised at how little work would be needed to make any of these valid HTML5. I wonder if the folks at snapshot.opera.com know they’re already ahead of the game?

Operatic QR codes

QR codes are the fastest way to access a webpage with your phone and Opera is the fastest way to view a webpage with your phone. QR codes + Opera = a match made in heaven and yet they’re pretty scarce on opera.com. Not any more.

Widely used in Japan, QR codes seem to be gaining ground in other countries as more and more phones ship with scanning capabilities. They are the most widely-used form of so-called 2D bar code containing a varying number of dark and light pixels representing data. This data can be plain text, a URL or mail address, a combination of these, an image, even another QR code. Although QR codes look like a mess of dots, they can be customised to contain a pattern or, for today’s exercise, a logo. Hmm, wonder which one to choose…

1. So, the most simple attempt first: Opera’s big red “O” superimposed onto a QR code containing the text “Opera Software” and a link to http://www.opera.com:

QR code for Opera

Bar code scanners see the world in black and white but with enough opacity in the logo the scanner can still read this code, however the red “O” is now a pink “O” and I think we can do better.

2. QR codes have a neat built-in feature that allows them to be damaged but still readable. When you create a QR code, as well as specifying the data and size you can choose an “error correction” setting. The highest level means that up to 30% of the code can be damaged or incorrect but the code as a whole can still be read, the only downside being that its size will increase a bit. This means we can paste a small logo onto our code without affecting its readability:

QR code for Opera

Of course, the downside of this is that there’s now no room for error – the slightest bit of damage to the code will probably render it unreadable, but if they’re going to be primarily displayed on-screen this is not a problem. Pretty good, but not perfect. To make the slightest change to the code or to make several variations you have to edit the image each time. Far better to be a lazy programmer and create the code and its logo dynamically.

3. Copying Taking inspiration from Duncan Robertson’s work at the BBC, we can achieve the following result:

QR code for Opera

After many attempts, this was about the maximum size of logo I could get away with for this size QR code. It may not have smooth edges but as it’s a two-colour logo at the same scale as the code, the program that generates the code can be extended to draw the logo on top at the same time. Following Duncan’s example, this is the matrix for this logo on a 45×45 QR code:

$opera_logo = [
    ['w', 20, 13, 26, 13],
    ['w', 18, 14, 28, 14], ['r', 21, 14, 25, 14],
    ['w', 17, 15, 29, 15], ['r', 19, 15, 21, 15], ['r', 25, 15, 27, 15],
    ['w', 16, 16, 22, 16], ['r', 18, 16, 20, 16], ['w', 24, 16, 30, 16], ['r', 26, 16, 28, 16],
    ['w', 16, 17, 21, 17], ['r', 17, 17, 19, 18], ['w', 25, 17, 30, 17], ['r', 27, 17, 29, 18],
    ['w', 15, 18, 20, 28], ['r', 16, 19, 18, 27], ['w', 26, 18, 31, 28], ['r', 27, 19, 30, 27],
    ['w', 16, 29, 21, 29], ['r', 17, 28, 19, 29], ['w', 25, 29, 30, 29], ['r', 27, 28, 29, 29],
    ['w', 16, 30, 22, 30], ['r', 18, 30, 20, 30], ['w', 24, 30, 30, 30], ['r', 26, 30, 28, 30],
    ['w', 17, 31, 29, 31], ['r', 19, 31, 21, 31], ['r', 25, 31, 27, 31],
    ['w', 18, 32, 28, 32], ['r', 21, 32, 25, 32],
    ['w', 20, 33, 26, 33]
];

This means that the underlying QR code can be generated automatically without having to add the logo each time. In other words, each opera.com page can easily have its own QR code proudly displaying Opera’s logo. Here are a couple more linking to this page to get the ball rolling:

QR code for Opera
QR code for Opera

N.B. For those wanting to quickly create plain vanilla QR codes, I’ve made a simple widget. For more more advanced code generation, there are good open source libraries available:

UPDATE

Here’s a fourth method of incorporating a logo.