ODIN Blog

How are we doing?

Yusef is used by developers to build their Opera Unite application. It is essentially a collection of libraries to help speed up application development.

Since the launch of Yusef in October 2009, we have made several changes to this framework. Let's take a look at two of them.

libraryLoader.js

libraryLoader.js allows us to invoke libraries. With it, we can easily invoke the libraries in an Opera Unite application and choose the Yusef plugin using the Libraries.setTail function.

<script src="libraries/libraryLoader/librariesLoader.js"></script>

<script>
  Libraries.setTail( 'yusef.translation', 'yusef.ui', 'yusef.acl' );
  Libraries.load();
</script>

Previously, we had to invoke the libraries manually.

getData()

Secondly, we also have a function call getData(), which is a wrapper to return plugin and application data. We can get a return of sessionId, sessionId, serviceName, servicePathHash, hostName, username, deviceName, isHomeApp, requestSection, requestPath, isLocal, isOwner and many more.

var data = Yusef.getData(connection);

var username = data.username; // Gets the username of the person if user is logged in

var isOwner = data.visitor.isOwner; // Tells us if the person is the owner of the application

What's next?

Looking forward, we would love to see more Opera Unite applications. If you want to win prizes while building a great application, you might want to check out our Opera Unite Weekly Application challenge.

For more on Yusef, check out Shwetank Dixit's Rapid application development using the Opera Unite Yusef library or the original article about Yusef - Opera Unite Server Framework.

One of the most exciting technologies to arrive in the mobile arena lately is Widgets. If you don't know the name, think applications that live on your mobile device, that can look like native applications but are run using a browser rendering engine (with no browser chrome) and which are made using the Open Web technologies HTML, CSS, JavaScript and SVG.

On Monday, February 15, during Mobile World Congress 2010, Barcelona, Vodafone will host the 360 Developer Conference. This is a chance to learn how to make Widgets and how you can be rewarded for them by selling them through Vodafone's app store.

Programme

Sessions

12:45 – 13:00 Delegates Arrive
13:00 – 13:05 Welcome
13:05 – 13:30 Discover Vodafone 360
13:30 – 13:50 Vodafone 360 for Developers
13:50 – 14:15 Cross Platform Development
14:45 – 15:15 Developer Showcase

Panels

15:15 – 15:40 Panel: It's Not Easy Developing for Mobile
15:40 – 16:05 Unpanel: Ask the Experts

Breakouts

16:15 – 17:15 Publication, Porting and Tools
16:15 – 17:15 Creating a Great User Experience

Apply

Apply for free tickets from Vodafone

More Widgets resources

If you're not going to be around Barcelona to attend, dev.O has plenty of resources to get you up to speed. I recommend beginning with Creating your first Opera widget and progressing from there. You'll also find some resources on the Betavine site.

widgets.opera.com has hundreds of Widgets you can try out on your phone, desktop or Web-enabled TV.

The W3C Widget Packaging and Configuration specificaton details the method of packing Widgets for distribution.

Today, we've released a pre-alpha version of Opera 10.5 on Opera Labs. Download it and give it a spin. Let us know what you think about it too!

Let's give you the lowdown on what's new in this build. Hang on tight, there's a lot of new stuff here!

Carakan - Our fastest JavaScript engine yet

This build introduces Carakan, our upcoming JavaScript engine. We're working on making it the fastest in the world and already you can see that it's pretty speedy! As you can tell from the above graph, Carakan has boosted our performance greatly compared to our previous JavaScript engine. The speed superiority is mostly evident if you test the Windows build, as we haven't started on optimization for Mac yet. Modern web applications are increasingly using JavaScript in much more complex ways, which need faster and more efficient JavaScript engines from browsers. Carakan promises to run JavaScript faster than ever, allowing modern web apps to run smoother than before. Bruce Lawson wrote a good overview of Carakan a few months ago and you can also read the Core Concerns blog post about Carakan and an older post on it too, for more details on the concepts behind it.

One more thing to note is that much work is ongoing to support the new ECMAScript Standard, ES5. One of the main things about ES5 is native JSON support, which we now have in our new JS engine. Hallvord Steen has written about it in more detail in his post on the Core Concerns Blog.

Vega - Our new graphics library

We initially wanted to just have a library for displaying SVG, but we gradually expanded it to support other graphics such as <canvas> etc. It enables greatly improved performance for complex graphics, and can even use a hardware accelerated back-end. You can read the Opera Core Concerns Blog post on Vega for more information on it. Along with displaying SVG, Vega is now used for all graphics rendering in Opera. This allows us to do transitions and transforms in CSS, but also things like rounded corners, box shadow etc. You'll notice small animations when opening/closing a tab, when alerts appear and when you drag tabs too, all of which are also achieved through Vega.

Presto 2.5 - Our latest rendering engine with even greater support for web standards

This build features Presto version 2.5 (the one in Opera 10.10 final is Presto 2.2) which is the newest version of our core rendering engine. Besides having the most complete CSS 2.1 implementation (it even supports visibility: collapse which was missing until now), it also has the latest support for many of the new CSS3 and HTML5 properties. Let's take a look at some of what developers should look forward to with this engine.

Rounded corners with border-radius

All web designers will love this! Using the CSS3 border-radius property, you can have rounded corners on your page without the need for images or any other similar workarounds. Check out Patrick's border-radius demo and Vadim's take on it for more rounded corner goodness.

Backgrounds and Borders

Presto 2.5 supports many of the W3C's Backgrounds and Borders Specification. Check out Zi Bin and Vadim's Dev.Opera article on Backgrounds and Borders (including the aforementioned border-radius) together with some nice demos which you can try in the build.

CSS3 Transforms and Transitions

Transitions basically transition from one state to another over time, while transforms can apply various functions such as translate (move), rotate, scale, etc. David has written a Dev Opera article on CSS3 transforms and transitions and has made a neat demo demonstrating it too.

Offline Storage and more

Presto 2.5 has support for both Web Storage and Web SQL databases. In Web Storage, you have the option to store the data temporarily (session storage) or for a longer time using local storage, which will store data until you explicitly clear it. Web SQL gives you the ability to create databases on the user's machine (using SQLite as a backend) so that you can store data in a more structured manner and even query it using SQL. Check out this example page demonstrating Web Storage and this example page showing Web SQL Database storage.

Other browser features

• Private browsing: Open a new private window or a private tab. Christmas time is near, you might want to go online to buy a few gifts for your loved ones without them noticing which sites you went to.
• Better integration with native systems: This means better integration on Windows 7 (Aero Glass, Aero Peeks and Jumplists), and a move to Cocoa on the Mac, where we have a unified toolbar, touch pad gestures and drop down menus. It also adds notification features, in particular 'Growl' notification support on the Mac.
• You'll also notice that all notification messages are now non-modal. Which means that it will not impede your workflow by having a child window that you have to click to go on with your job.
• Further improvements to the search box and the address box. Now its even easier to search right from the address box.
• Type opera:cache in your address bar for an all new interface to your cache. It allows you to directly browse, preview and use the contents of the cache on a per site basis.
• Opera Dragonfly in 10.5 pre-alpha features new and improved highlighting for clicking and selecting elements to inspect on a page. To open Opera Dragonfly, go to Tools->Advanced->Developer Tools.
• New inline page search and password manager.

And much more. Download it and test it out. This is a pre-alpha release, so there may be issues encountered (especially related to media queries and web fonts). There are certain things like Opera Unite and the new widgets implementation (which we introduced in 10.20 alpha) which are not included in this build. One more thing to be noted is that the demos will work best on Windows for the moment, as right now we have done optimizations only for that platform. Also, there is no Linux build for 10.5 pre-alpha right now. The desktop blog has released a linux build too. We're working on having optimized versions for all major platforms as well as adding even more new exciting stuff for the alpha, beta and the final versions.