Dev.Opera 2007
2013 2012 2011 2010 2009 2008 2007 2006
Merry Christmas from dev.opera.com!
We know how it is - you've had a long year of hard work, and now you're looking forward to settling down at Christmas for a few days with some beer and chocolate (or whatever else it is that makes you smile.) Well, at dev.opera.com we are too! I hope you…
Microformat Encoding and Visualization
So you have heard about microformats, read the introductory articles, and even bought the book. But now you are probably thinking "great - I have done my part to make the web a better place by adding microformats; what's next? What can people do with my data…
The seven rules of unobtrusive JavaScript
I've found the following rules over the years developing, teaching and implementing JavaScript in an unobtrusive manner. They have specifically been the outline of a workshop on unobtrusive JavaScript for the Paris Web conference 2007 in Paris, France.
Server-side capability detection for mobile devices part 2
This is part 2; If you haven't already read part 1, do so here.
Styling Forms with Attribute Selectors - Part 2: adding in some CSS3
In the first part of this article, I talked about attribute selectors and how use them to pinpoint CSS rules onto specific form elements. In this article, I'll continue to talk about styling form controls, but this time using CSS3 selectors to style form…
JSON Configuration for JavaScript
In the early days (well, about 4 or 5 years ago in web terms) JavaScript was mainly the preserve of the web developer/designer. For all but the most forward thinking, the approach taken when a little client side interactivity was required was to jump on to…
Server-side capability detection for mobile devices part 1
There are several ways to test the capabilities of a device, and some are more elegant than others. As a developer you probably do this more often than you think. In CSS you often need to resort to using ugly underscore or comment hacks that get picked-up by…
Mobile Ajax And The Frost Ajax Library
This article is a short introduction to the tricky topic of creating Ajax-powered web sites and applications on mobile and other alternative devices. Below I will discuss how Mobile Ajax is different from desktop Ajax, what its special problems and…
Web design with Opera Mobile in mind
Opera Mobile is a fully featured web browser (currently in version 8.65 - more details and download available from http://www.opera.com/products/mobile/) developed to run on high-end mobile devices. It is based on the same core rendering engine as Opera…
Fixing YUI CSS grid issues with JavaScript and the DOM
In the last article I introduced you to the YUI CSS grids and showed how to create a CSS layout by adding the right markup and classes to a basic and valid HTML structure. We ended pointing out some problems of CSS layouts and I hinted that you can use…
Improving the usability of within-page links
A year and a half ago usability consultant Jakob Nielsen published an article called Avoid Within-Page Links, advising that web developers avoid within-page links (ie any link that takes the user to a "named anchor" within the same page.)
Starting with a sound structure – predictable HTML layouts using the YUI
In my previous article I introduced you to the YUI, talked about why and how it was created and explained the principles behind it, as well as what parts comprise it. This time we'll plunge right in, create an HTML document using the YUI grids component.
A call for video on the web - Opera <video> release on Labs
Video is one of the hottest things on the Web today, with several solutions available to create video effects and embed it in your web pages (for example Flash and Quicktime,) and much improved hardware available - these days we web users have web-enabled…
Designing and Developing mobile web sites in the real world, part 1
I'm Brian Suda, and for the last 10 years, I've been working with Internet, including websites to web applications and WAP to 3G mobiles sites for airline bookings, bank transfers to lightweight intranets. In this article I will be discussing some of the…
Designing and Developing mobile web sites in the real world, part 2
Ok, so now we've got some of the theory out of the way, we'll turn our attention to more practical matters. In this part I'll look at 2 case studies of sites I helped to develop, looking at problems we faced, and how we overcame them. I'll also spend some…
Differences between Opera Mini 3 and 4
Opera Mini 3 was a highly successful mobile browser because of it's unique features, and also the unique way in which it uses a server farm to load up your pages for you and compress them before sending them to your device, meaning a faster, less costly…
How to serve the right content to mobile browsers
The modern web is viewed on many different devices, so it is getting increasingly important for us to think about how to create our web sites so that they will serve the right content to users, no matter what device they are using. We have many technologies…
Opera Mini 4 is here!
Today is an exciting time here at Opera - we're very proud to announce the release of the final version of Opera Mini 4! It's packed with great new features, totally free, and will make your mobile browsing even happier than the last version - download it…
Opera Mini request headers
Opera Mini uses a number of custom, unregistered HTTP headers. Most of these are specific to Mini, and are sent in addition to the regular HTTP headers sent by Opera on any platform. The purpose of these headers is to give site owners information about the…
Safe media queries
Certain page authors reject media queries off-hand as a viable solution, claiming that the rules within them are not ignored by browsers with broken parsers (ie, ones that do not ignore unrecognized constructs like they are supposed to,) which in turn implies…
Media Query library
The Media query library JavaScript file contains a single function testMediaQuery(), which takes a single string as an argument (see here for a test file.) The string can contain any valid media query, including media types and media features. It returns a…
Why I Love ECMAScript 4: Real Decimals
In this article, I explore ECMAScript 4's ability to use real decimal floating points, in addition to the binary floating points traditionally used by most programming languages. Languages based on ECMAScript 3, such as ActionScript 2.x and JavaScript 1.x…
JavaScript support in Opera Mini 4
Opera Mini is a very clever way of bringing the web to your mobile phone - it will work on most phone models, even low spec ones, as long as they will run a JVM. Basically, when you request a web page from Opera Mini, a request is sent to the Opera Mini…
Semantic HTML and Search Engine Optimization
So what is POSH? No, it's not just some new clothing fashion hype amongst web designers - POSH is the acronym for Plain Old Semantic HTML. The term Semantic HTML is used for a variety of things, but it has it's origin in one objective: creating (X)HTML…
Styling Forms with Attribute Selectors - Part 1
In this article, the first of a two-part series, we will look at attribute selectors and how do they allow us to better style portions of a Web documents. In this example, we focus on Web forms, although attribute selectors can be applied to any area of a Web…
Blob Sallad – canvas tag and JavaScript physics simulation experiment
Blob Sallad is a small demo I put together using the canvas tag, which modern browsers have started to support in recent versions (eg Opera 9.x and Firefox 2.x,) and some JavaScript physics simulation. The main inspiration was the game Loco Rocco, and after…
Intelligent site structure for better SEO!
Search engines are one of the most important traffic drivers to sites these days, which is why Search Engine Optimization (SEO) is becoming more and more important.
An HTML5-style "Google Suggest"
HTML5 is the next major revision of HTML (and XHTML) and is being jointly developed by the WHATWG and W3C HTML WG (as such, it is a work in progress, but this article will simply refer to it as HTML5.) I have already covered the basics of HTML forms in my…
Introduction to JavaScript toolkits
This article is a guide to the most popular JavaScript toolkits out there, giving an overview of what they can do for you, and giving a comparison of their strengths and weaknesses.
jQuery: Write less, do more
jQuery is a JavaScript toolkit designed to simplify various tasks such as element selection, DOM manipulation, event handling, AJAX and animations. Its tagline is “Write less, do more”. It’s aimed at a broad audience, as they say “from hobbyists to…
Free Mobile Web Design chapter to download!
This week we've got a special treat for you loyal dev.opera.com readers - a FREE excerpt from Mobile Web Design, the new book by industry expert Cameron Moll, which provides a web standards approach for delivering content beyond the desktop.
Can Kestrels do Math? MathML support in Opera Kestrel
As the new Opera 9.5 takes shape, and you download new "weeklies" (keep checking the Opera desktop team blog for new weeklies,) there are a number of improvements and new features you will see. Most of them are listed in the changelogs when they are put into…
Progressive Enhancement and the Yahoo! User Interface Library (YUI)
Web development is a terribly confusing matter. There is probably no other development area that can be compared to it, as you normally have at least an idea of what environment your software will run in. With web development, all bets are off. You have no…
New development techniques using Opera Kestrel (9.5)
Kestrel is the upcoming version of Opera's desktop browser (version 9.5.) The full version isn't available yet, but an alpha version is already available to play with, at http://www.opera.com/products/desktop/next/. Now that Opera has fully migrated to the…
Evolving the Internet on your phone: Designing web sites with Opera Mini 4 in mind
Opera Mini 4 is a cutting edge web browser for mobile phones - it is the consumer version of Opera Mobile, the most widely-deployed advanced mobile web browser. Unlike many phone-based browsers, it works on most modern phones, from the top of the range smart…
Making Wii-friendly pages
The Wii game console by Nintendo has a Web browser that uses the Opera 9 display engine. It supports most Web technologies supported by Opera 9 for desktop, including HTML, XHTML, XML, WML, RSS and Atom, CSS, XSLT, SVG, and JavaScript except designMode,…
Opera Widgets Specification 1.0
This document describes Opera Widgets, and covers all aspects of Opera Widgets from packaging format, the manifest file config.xml, and JavaScript interfaces for working with widgets.
Making the future based on HTML
The W3C recently renewed its HTML activity. Opera joined the new HTML Working Group to help shape the future of the web and so can you. The HTML Working Group allows virtually everyone to participate. A set of simple steps on how to join is outlined on the…
SVG Evolution 3: Applying Polish
This is the third entry in a series of articles in which we explore how to integrate SVG into DHTML web applications. In our first article, we gave an introduction to SVG language and some of its basic capabilities, including integration with the DOM,…
Making legacy pages work with Web Forms 2
Forms need validation. User-friendly, helpful, client-side validation. Plenty of validation examples exist, using JavaScript of various flavours. Some of these JavaScript libraries work by looking for specific attributes the webmaster adds to the form markup.
Opera9.20 beta
Here's your first look at Speed Dial, a brand new way to get to your favorite sites. Speed Dial opens in any blank tab to give you immediate access to your favorite sites. Once you've tried Speed Dial in the Beta of Opera 9.2, visit the Desktop Team blog to…
How to debug JavaScript problems with Opera
This tutorial is intended for webmasters or users with a technical interest and some experience with HTML and/or JavaScript. It will demonstrate relatively simple ways of getting to the root of the problem if a JavaScript does not work as expected in Opera.
Timing and Synchronization in JavaScript - Opera Developer Community
Timing issues are the source of some of the most devious bugs in JavaScript applications. Problems that never show up during development might surface when the application is used by an end-user on a slow computer or with low bandwidth. Such issues may also…
Web Technologies for Opera Web Applications - Opera Developer Community
The basis of a Web application is usually HTML. The HTML documents are translated into a DOM data structure by the browser. The DOM tree can be modified through scripting, often in ECMA/JavaScript, where elements can be added, changed, or removed through DOM…
Debugging SVG with Opera - Opera Developer Community
So you have an SVG file that won't work in Opera? This article will help you understand and fix common mistakes in SVG code.
Working with Paths
Hilbert curves are a type of space-filling curve that can be constructed with the SVG polyline element, using a basic design and then aggregating.
Using animateMotion in SVG - Opera Developer Community
You can create your own universe with SVG. No, really. At least if you'll settle for a little sun, a little earth, and a little moon. We can even throw in a comet – Comet SVG! First off, let's see what this SVG will do. Then, we'll make some changes to the…
Type and Back Again: Stealing SVG Designs - Opera Developer Community
[Darts game][Analog animated clock]One way to see how versatile a data format is to check how easy it is to take something existing and adapt it to your needs and desires.
XHTML+Voice By Example
This article assumes that you have already Voice installed and working on your computer. If you have not, see Voice tutorial for instructions. It doesn't explain what XHTML+Voice (X+V) is all about, for that see the Adding Voice to XHTML.