Native Responsive Images

by Yoav Weiss

Yoav Weiss, the implementor of <picture> in Blink, explains how we got the new responsive images spec and how you can use it.

Getting to Know CSS Blend Modes

Getting to Know CSS Blend Modes

by Shwetank Dixit

CSS Blend Modes provide a way to specify how one layer will interact or “blend” with the one underneath. Until now, this was the domain of photo editing applications, but now they are available on the web using CSS itself!

An Introduction to IndexedDB

by Tiffany Brown

IndexedDB offers a powerful way to store and retrieve data in the browser. As with server-side databases, IndexedDB allows us to generate keys, search data, or sort it by a particular field. In this article, we’ll dig into the IndexedDB API by building a to-do list manager. But first, let’s look at some of the concepts around databases and IndexedDB.

Practical Application and Usage of the W3C Device Orientation API

by Rich Tibbett

The W3C device orientation API allows us to determine the orientation of a device in physical space. In this advanced tutorial we cover some of the pitfalls and propose some new ways of working with this data for developing practical device-orientation-aware web applications on mobile devices.

Creating Game-Style Parallax Scrolling: Zombie Edition

by Elli Bishop

Ready to enter the world of parallax scrolling websites? Yes, scrolling sites are absolutely everywhere. Sadly, sometimes they do little more than distract and disorient a user in an attempt to show off, but when done correctly, they can make the web a more exceptional place. At its best, parallax scrolling can help users explore content in an immersive and engaging way.

Themes in Opera 18+

Themes in Opera 18+

by Andreas Bovens

Due to the major architectural changes we’ve been going through recently, the first versions of our Chromium/Blink based Opera browser (versions 15, 16 and 17) do not support themes. However, from Opera 18 onward, themes are supported again! This article explains you how to create themes for Opera 18+.

Media Capture in Mobile Browsers

by Francesco Iovine

Media Capture is one of the most interesting features in web applications, especially for mobile devices. Surprisingly capturing media on the spot is quite a new thing for browsers in general, until recently always being delegated to browser plugins such as Flash or Silverlight. In this article we will explore how to use the Media Capture APIs, their compatibility across mobile browsers and the current state of the W3C specifications that define them.

An Introduction to CSS Regions

by Chris Mills

CSS regions is a nascent CSS feature that provides a way for us to completely decouple our content from our layout, flowing specified content containers into layout containers to give us a lot of flexible power. This article provides a basic introduction to using regions and serving fallbacks to non-supporting browsers.

CSS Viewport Units: vw, vh, vmin and vmax

by Chris Mills

CSS viewport units allow us to size lengths on web pages relative to the viewport size, which has some interesting applications for responsive design. In this article we’ll explore the fundamentals of this topic.

Understanding 3D Transforms

Understanding 3D Transforms

by Tiffany Brown

In this article we’ll dig in to 3D transforms in detail, looking at the fundamental differences between 3D and 2D transforms, the 3D transforms available, and some demos that show how these work.

Better Performance With requestAnimationFrame

Better Performance With requestAnimationFrame

by Luz Caballero

This article discusses how you can (and should) improve the performance of your animations, using the requestAnimationFrame API instead of the old setInterval/setTimeout methods, and how requestAnimationFrame is used.

Major Changes in Opera’s Extensions Infrastructure

by Andreas Bovens

With Opera switching from Presto to Chromium and a complete UI remake, our extensions infrastructure has also gotten a major overhaul: from Opera 15 onward, Opera 11 & 12’s extension format is no longer supported, and instead, we’ve switched to Chromium’s extension model.

Remotely Debugging Opera for Android

by Chris Mills, Bruce Lawson

Now that Opera for Android is out, you’ll sometimes need to debug it, as there are differences in Standards support between Opera and Chrome for Android and Chrome on Android 4+. Here’s how to connect Opera for Android to Chromium-based desktop browsers for remote debugging.

Animating Flexboxes: The Lowdown

by Chris Mills

In this article, Chris Mills explores what can be achieved by using animations and transitions — along with a little JavaScript — in conjunction with Flexbox.

Advanced Cross-Browser Flexbox

by Chris Mills

The CSS Flexible box module level 3 brings with it a lot of power and some very exciting possibilities for web development, allowing us to put together complex site layouts easily and rapidly, and dispensing with some of the illogical hacks and kludges that we’ve traditionally used. In this article Chris Mills goes beyond the basics, showing some more interesting uses of Flexbox, and how Modernizr can be employed to serve different styles to browsers with differing levels of Flexbox support to provide the best level of cross browser support available.

Web Storage: Easier, More Powerful Client-Side Data Storage

by Shwetank Dixit

This article covers Web Storage, a new W3C specification supported in Opera 10.50+ that allows data to be saved on the client-side in a much more powerful, more secure fashion than before. Here Shwetank Dixit discusses both facets of Web Storage - Local Storage and Session Storage - and how to use them to store web application data on the client, along with some simple examples to get you started.

Native CSS Feature Detection via the @supports Rule

by Chris Mills

We have practised feature detection to allow us to provide appropriate code to browsers with differing levels of standards support for a while now, but we’ve always needed 3rd party libraries to handle it. But not for much longer: the CSS3 Conditional Rules Module Level 3 provides the @supports at-rule and associated JavaScript API, providing a native mechanism for doing CSS feature detection. In this article we’ll give you the lowdown on how this rule works, looking at a real example in the process.

RoboHydra: Advanced Techniques

by Esteban Manchado Velázquez

In the first article in this series, we looked at the basics of RoboHydra, the flexible test server tool for testing client-server interactions. In this — the second article — we are taking this knowledge further, looking at more complex examples that utilize RoboHydra as a mock server to send customized test responses back to your client applications.

Network Service Discovery API Support in Opera

by Rich Tibbett, Daniel Davis

The Network Service Discovery API enables web pages to communicate with devices advertising themselves on the network via different discovery protocols in a peer-to-peer configuration. Now you can use JavaScript to find a UPnP server locally, browse its content and send that content to a UPnP client. This article, with links to experimental builds, shows you how.

Client-Side Error Logging

by Rob Miller, Remy Bach

This article shows how to handle client-side error logging, a very useful practice that helps you better understand and discover issues that your users are having.

CSS3 vs jQuery Animations

by Siddharth Rao

JavaScript has allowed us to create animations on our web pages for a number of years, with JavaScript libraries making such code easier to create and more reliable cross-browser. CSS3 animations, a more recent contender, also allow us to create animations on web pages, although they are currently not quite as reliably supported cross-browser. Which one should you use? This article compares the two approaches in terms of performance and other benefits.

Using RoboHydra as a Mock Server

by Esteban Manchado Velázquez

In the first article in this series, we looked at the basics of Robohydra, the flexible test server tool for testing client-server interactions. In this — the second article — we are taking this knowledge further, looking at more complex examples that utilize Robohydra as a mock server to send customized test responses back to your client applications.

HTTP: Response Codes

HTTP: Response Codes

by Karl Dubost

This article takes you in detail through HTTP response codes: how they work, what their purpose is, and what the most common ones mean.

Opera Mini and JavaScript

by Tiffany Brown

Opera Mini is one of the world’s foremost mobile browsers, which runs on pretty much any device, even low-powered ones. It is a proxy-based browser, which has many advantages, including reducing the size of pages downloaded onto the user’s phone by up to 90%. On the downside, JavaScript can behave in unexpected ways when requested by Opera Mini. In this article we’ll discuss exactly what this means for your development work, in detail.

Introduction to XMLHttpRequest Level 2

by Tiffany Brown

XMLHttpRequest is the primary technology that allows us to do Ajax-style updates to our pages — essentially, more dynamic content updates that don’t require page reloads. The XHR1 spec (and earlier versions) worked okay but had a number of shortcomings. The new version — XHR2 — addresses many of those shortcomings; in this article we’ll look at how, providing an overview and explanatory examples of all the main features.

Introducing Mobile Browser Automation

by Andreas Tolf Tolfsen

Opera Mobile brings the Web to millions of people through their mobile phones and other non-desktop devices. Opera believes in giving people access to the full Web, and not making the distinction of a “mobile web”. To help automated mobile testing, we’ve updated the Opera Mobile Emulator so it can talk to our browser automation library, OperaDriver.

RoboHydra: A New Testing Tool for Client-Server Interactions

by Esteban Manchado Velázquez

RoboHydra is a web server designed to help you write and test software that uses HTTP as a communication protocol. This article will take you through the basics of how RoboHydra works and how to install and use it at a basic level. You’ll see how to use it as a proxy for an existing site, and how you can make changes to local files and see those changes immediately reflected on the live site!

Head Tracking With WebRTC

by Audun Mathias Øygard

The WebRTC standard allows supporting browsers to stream video and audio content directly from native devices such as a webcam. One rather exciting use case for WebRTC is head tracking — detecting the movement of your head (or other appendages) in relation to a webcam — which in turn allows us to create gesture-based controls. This article looks in depth at how head tracking can be implemented.

The W3C Device Orientation API: Detecting Orientation and Acceleration

by Shwetank Dixit

Using the W3C’s device orientation API, we can determine the orientation of the device as well as gather information about its movement. This information is valuable in certain types of applications, such as games that require the user to tilt the device in some way. In this article we’ll look at the basics of how device orientation works, along with some simple examples.

A Labs Release to Get Your SPDY Senses Tingling

by Chris Mills

Opera is proud to present an experimental labs release that includes support for SPDY, Google’s new networking protocol that enables performance increases across the web. Please try it out, and let us know what you think!

HTTP: Let’s GET It On!

by Karl Dubost

The second part of a series of HTTP tutorials written by Karl Dubost. This article explores how HTTP is used to communicate between clients and servers.

An Introduction to WebVTT and <track>

by Ian Devlin

The HTML5 specification includes two features for improving media accessibility — the WebVTT format, for marking up external text tracks such as subtitles and captions, and the <track> element, for applying those text tracks alongside HTML5 <video> and <audio>. This article provides a detailed introduction to both features, showing how you can make use of them in your projects today.

Responsive Images: What’s the Problem, and How Do We Fix It?

by Matt Wilcox

Responsive images is a surprisingly complicated topic, and one that’s been steadily gaining attention over the last year as more developers discover they need them and then discover there’s no good solution yet. This article aims to give an overview of the problem itself, and show the different proposals in the works to address it.

Understanding the CSS Transforms Matrix

by Tiffany Brown

In this article we explain how transform matrices work — these involve some rather complicated math, but they are not so hard to understand when you sit down and check out a few examples! Once you understand how to put together matrices, you can use them inside the CSS transform: matrix(); and transform: matrix3d(); functions to apply transform effects to your web pages.

Desktop Build With New Extension APIs: Screenshot, Resource Loader and URL Filter

by Chris Mills

We’ve been working hard recently to improve the functionality available inside Opera extensions, and today we are proud to reveal some of the fruits of our labours. In this article we’ll share with you some new experimental desktop builds that feature three new extension APIs: the screenshot API, the resource loader API, and several updates to the URL filter API.

Opera Mobile Emulator Build With Experimental WebKit Prefix Support

by Bruce Lawson

Through our site compatibility work, we have experienced that many site authors only use -webkit- prefixed CSS, thereby ignoring other vendor prefixes and not even including an unprefixed equivalent. This leads to a reduced user experience on non-WebKit browsers, as they don’t receive the same shiny effects, even although they support them. To tackle this problem, we are releasing an experimental Opera Mobile Emulator build with experimental support for selected -webkit- prefixes.

HTML5 Drag and Drop

by Mike Taylor

HTML5 includes the Drag and Drop API, which gives us the ability to natively drag, drop, and transfer data to HTML elements. Up until now, JavaScript libraries have commonly been used to achieve something similar. What libraries such as jQuery UI or Dojo can’t do, however, is interact with other windows, frames, and applications (to and from the file system) or access a rich drag data store.

Making a Move With CSS3 Animations

by Chris Mills

CSS animations allow us to animate our web content, by declaring property values at different keyframes, and then applying the animations you’ve declared to the elements you want to animate. And what’s more is that they’re available in Opera 12+! In this article, we’ll walk you through the basics and look at some examples along the way.

Extensions Come to Opera Mobile

by Andreas Bovens

When adding extensions support to our Presto engine, a lot of time was spent behind the scenes so as to make our extensions framework very versatile and lightweight, with the aim of using it on other platforms as well. Today, we’re happy to present you with an early preview of extensions running on Opera Mobile!

WordPress Goes Mobile: Responsive Design Comes to CMSes

by Rachel McCollin

Responsive design is quite easy when you control everything to do with the page, and you’re working on a small and manageable site. But what about a sprawling CMS? In such circumstances, you’ll often have to rely on plugins or extensions. WordPress developer Rachel McCollin shares some of her wisdom on this very subject.

Raw WebGL 101 — Part 1: Getting Started

by Erik Möller, Chris Mills

WebGL allows you to create real 3D content and render it in a web browser. This article series provides a gentle introduction to writing raw WebGL, rendering 3D creations without relying on libraries. In this part we aim to get you set up and started, concluding by running through a simple example.

Opera Mobile 12 for x86 Architectures

by Chris Mills

Opera is proud to unveil a labs build of Opera Mobile 12, for devices built on Intel x86 architectures, which has already been run successfully on top of Android Ice Cream Sandwich.

64-Bit Opera, and Out-of-Process Plug-Ins

by Chris Mills

Originally published just before Christmas 2011, and now updated with a new set of builds on February 9th 2012, Opera is proud to present a new labs release featuring 64-bit builds and out-of-process plug-ins.

An Introduction to HTML5 Web Messaging

by Tiffany Brown

HTML5 web messaging provides a way for documents to share data without exposing the DOM to malicious cross-origin scripting. This article provides an introductory guide to using this new functionality, and some simple examples to get you started.

HTTP — an Application-Level Protocol

by Karl Dubost

This is the first of a series of articles to teach HTTP basics, and how we can use it more effectively. In this article we will look at where HTTP cog fits in the Internet machine. HTTP is an application-level protocol on top of the TCP/IP, a communication protocol.

getUserMedia: Accessing the Camera and Privacy UI

by Bruce Lawson

getUserMedia alllows access to a device’s camera and microphone. This article shows how to access the camera and demonstrates a Privacy User Interface that Opera is experimenting with. Includes moustaches and exploding cameras.

An Introduction to WebGL — Part 2: Porting 3D Graphics

by Luz Caballero

This article explores importing existing 3D models into WebGL — a much easier way to go than creating them from scratch in WebGL! The steps include exporting models from 3D packages (including Blender, SketchUp and Shade) into .obj format, converting them from there into JSON, then rendering them from there using the Three.js WebGL library.

Love Your Devices: Adaptive Web Design With Media Queries, Viewport and More

by Chris Mills

In this article Chris Mills takes a look at techniques and technologies that we can adopt to create adaptive (or responsive) web sites, including percentage units, media queries and viewport. He also discusses some recent happenings in the area, such as considerations for display on tablet browsers, object-fit, and the @viewport CSS rule.

DOM Access Control Using Cross-Origin Resource Sharing

by Tiffany Brown

This article provides an introductory guide to cross origin resource sharing, or CORS, a technology allowing you to control communication and access between resources residing at different origins in a secure manner, getting around problems associated with the traditional same-origin security policy.

Introducing ECMAScript 5.1

by Mike Taylor

The newest version of ECMAScript to get widespread browser support, ES5, brings with it many useful changes from ES3 and new additions to the language. In this introductory article we’ll review these, showing what is available.

Building a Web Mapping Application With Pergola and Polymaps

by Domenico Strazzullo

Mapping applications are very popular, and it is easy to embed a simple map on a page using something like the Google Maps API. In this article we are going to show how to build a fully fledged SVG-based, windowed mapping application using the Pergola framework and its libraries, with the Polymaps library plugged in, and tiles imported from Bing.

Playing With HTML5 Video & getUserMedia Support

by Daniel Davis

Building on the famous exploding video demo by Sean Christmann, we’re going to see how we can explode the video stream from a camera. With a few performance tweaks, this works surprisingly well both in desktop browser and on mobile devices.

An Introduction to WebGL — Part 1

by Luz Caballero

This is the first in our series of articles about WebGL. The objective of this series is to provide the information and resources you’ll need to get started learning WebGL. In this piece, we will discuss how WebGL works, what you need to create WebGL applications, and what a simple example looks like.

CSS3 Radial Gradients

by Chris Mills

This article covers the basics of CSS3 radial gradients, a great CSS feature that allows for much more flexible design work.

Opera Mini Request Headers

by DevRel Team

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. “But what are they, and what can I do with them?” I hear you cry… Let’s find out.

Introducing the HTML5 History API

by Mike Taylor, Chris Mills

The HTML5 history API - supported in Opera 11.50+ - provides a means to perform tasks such as moving forward and backward in the session history, adding new entries into the history, and so on. In this article we’ll look at the API’s basic syntax along with a simple example to show you what’s possible.

An Introduction to Datasets

by Divya Manian

HTML5 includes a means to set custom attributes on elements using the data- prefix. Called “data attributes”, they can be scripted to define and store data as well as increase options for attribute selection when styling with CSS.

The W3C File API

by Bruce Lawson

The W3C file API provides a way to load files into the browser and find out information about them, such as size, type, etc., as well as manipulating their contents. In this article Bruce Lawson takes you through the current partial implementation of the File API available in Opera 11.10 final.

An Introduction to Meta Viewport and @viewport

by Andreas Bovens

Support for the viewport <meta> tag in Opera’s mobile products has been around for quite some time — in Opera Mobile 11, we have made our viewport implementation more robust, added support for new mechanisms to deal with different screen densities, and included an implementation of our own @viewport rule proposal. So, what better time than now to give you an introduction to the various viewport related mechanisms you can use to optimize your site for mobile.

CSS3 Multi-Column Layout

by Molly E. Holzschlag

Multiple column design that allows text to flow naturally from column to column depending on width and other parameters has proven invaluable in print design, crossing languages, cultures and a range of media. The good news is that now it is coming to web design, courtesy of the CSS3 Multi-column Layout Module. In this article we show you how to get to grips with it.

CSS3 Linear Gradients

by Chris Mills

This article shows you how to use CSS3 linear gradients, newly supported in Opera 11.10, to add special effects to your design work.

Opera Mini: Web Content Authoring Guidelines

by DevRel Team

This article presents a detailed set of guidelines for optimizing web content for viewing on Opera Mini. It covers a complete range of topics, including HTML, CSS, JavaScript, design considerations and more.

New Structural Elements in HTML5

by Chris Mills, Bruce Lawson

HTML5 brings two new things to the table: new APIs that add essential new features to the open standards web development model, and new structural elements that define specific web page features with much more accurate semantics than were available in HTML 4. This article looks at how the new semantic elements were chosen, what the main new features are and how they are used, how headings work in HTML5, and browser support for these new elements, including how you can support them in older browsers.

New Form Features in HTML5

by Patrick H. Lauke, Chris Mills

HTML5 includes many new features to make web forms a lot easier to write, and a lot more powerful and consistent across the Web. This article gives a brief overview of some of the new form controls and functionalities that have been introduced.

A More Accessible HTML5 <video> Player

by Ionuț Colceriu

Cristian returns this week with another detailed look at custom HTML5 <video> players! Following on from his last article, he shows us how to make a much more accessible, while still visually appealing, video player including WAI-ARIA support, captions, transcripts, and more.

Introducing Web Sockets

by Mike Taylor, Bruce Lawson

The beta release of Opera 11 debuts our support for Web Sockets. In this article we will explain the background to Web Sockets, show why it is a cool feature, and give you some simple usage examples to get you up to speed.

CSS3 :target Based Interfaces

by Corey Mwamba

In this article, Corey Mwamba shows you how to create an inspiring horizontally scrolling interface using only CSS, with some clever use of CSS3 transitions and the :target pseudo-class.

Consistent Event Firing With HTML5 Video

by Simon Pieters

If you play around with the HTML5 <video> element for any significant length of time, you may well run into a problem with inconsistently firing events: sometimes you don’t seem to get some events, and sometimes it behaves differently depending on whether you’re testing locally or over the network. This article explores the problem, and puts forward some solutions.

Web Accessibility for Cognitive Disabilities and Learning Difficulties

by Ian Pouncey

The number of people with cognitive disabilities using the Web is comparable to those with visual impairments using the Web, yet the factors involved in making sure a web site is accessible to those with cognitive disabilities are much less well understood. In this article well will redress the balance, giving you a gentle introduction to the area of web accessibility for cognitive disabilities.

Mobile-Friendly: The Mobile Web Optimization Guide

by Bruce Lawson

Everyone wants to make their sites “mobile friendly” these days — the mobile web market is becoming big business. This article takes you through the different available strategies for making your websites mobile browser compatible, sharing many tips and tricks along the way.

Building a Custom HTML5 Video Player With CSS3 and jQuery

by Ionuț Colceriu

In this article we make full use of the HTML5 video element and associated media elements API — along with jQuery and some CSS3 magic — to make a fully-customizable, themeable HTML5 video player. To round things off, the player is encapsulated as a jQuery plugin for easier reuse.

Cross-Browser CSS box-shadows

by Rustam Gaffanov

CSS3 box-shadow is a very useful property — creating drop shadows programmatically can save web designers a lot of time in image editing software. However we have a problem if we need to replicate those shadows in Internet Explorer, which does not support this property. In this article, we present a cross-browser solution that uses box-shadow in supporting browsers, and IE filters to fake the drop shadows in IE.

An HTML5 <audio> Radio Player

by Trygve Lie

In this article Trygve Lie takes you through the basics of the HTML5 <audio> element, then uses jQuery and jPlayer to build a cross-browser radio player based on <audio> with a Flash fallback. As a final step, he converts the player into an Opera Widget for added cross-device appeal.

Web Workers Rise Up!

by Daniel Davis

In this article you will meet Web Workers, one of many technologies that, together with HTML5, are forming the next generation of the open web. Web Workers allow you to create separate processes in your JavaScript to deal with number crunching, while your main process remains as responsive as possible for the users of your applications.

How to Use the W3C Geolocation API

by Shwetank Dixit

In this article, Opera Web Evangelist Shwetank gives you a guide to the W3C Geolocation API, which is newly-supported in our Opera 10.60 beta release. Find out how to add location awareness to your Web apps for a lot of interesting possibilities!

Showing and Hiding Content With Pure CSS3

by Corey Mwamba

Creating expanding and collapsing (or show and hide) content on websites used to be the domain of JavaScript, but in modern times we can recreate such functionality without JavaScript, using a combination of :focus, and CSS3 opacity and transitions. In this article, Corey Mwamba shows you how.

Opera Supports the WebM Video Format

by Chris Mills

Today is a very significant day for the Web. WebM, a new, high-quality, free, and open video format is now available, and Opera has released Labs builds that support this format in HTML5 <video>. In this article, we look at some examples, how this came about, why it is such a good thing, and what the technical details look like.

Beautiful UI Styling With CSS3 text-shadow, box-shadow, and border-radius

by Henrik Helmers

CSS3 shadows and rounded corners are easy to understand at a basic level, but what if you want to start using them in more advanced UI styling, such as textured buttons and semi-transparent glass effects? In this article Opera designer Jan Henrik Helmers hows you how to create these UI features and more, using CSS3 features, and no images whatsoever.

CSS Generated Content Techniques

by Divya Manian

With generated content, developers can easily add decorative text and images to their pages directly via CSS. In this article we look at the basics of CSS generated content and give a few interesting examples of where it can be used.

Everything You Need to Know About HTML5 Video and Audio

by Simon Pieters

This article builds on our previous HTML5 <video> publications by offering deep coverage of the functionality available in the <video>/<audio> API, a detailed reference of <video> and <audio> attributes, and guidance on codecs, and creating video/audio suitable for use with these elements.

Introduction to HTML5 Video

Introduction to HTML5 Video

by Patrick H. Lauke, Bruce Lawson

This article gives you an introduction to <video> and some of its associated APIs. We look at why native video support in browsers is important, give an overview of the element’s markup, and outline the most important ways in which video can be controlled via JavaScript.

SVG or Canvas? СHoosing Between the Two

by Mihai Sucan

In this article Mihai Sucan explores the differences between SVG and Canvas and presents a few examples to help you decide which one is best for the functionality you are trying to implement.

Accessible HTML5 Video With JavaScripted Captions

by Bruce Lawson

The HTML5 <video> element provides a fantastic way to embed video into web pages without relying on plugins, and it is now supported in Opera, Firefox and Chrome, so things are looking up. One burning question however is “how do we provide alternative content for users that either can’t see, or can’t hear the video?” In this article, Bruce Lawson looks at the issue and suggests a solution.

CSS3 Transitions and 2D Transforms

by David Storey

In this article, you’ll learn about CSS3 transitions and transforms (as well as their SVG and SMIL corollaries), all of which are supported by Opera versions 10.50 and later.

CSS3 Borders, Backgrounds and Boxes

by Zi Bin Cheah, Vadim Makeev, David Storey

Opera 10.50+ comes with support for the CSS3 Backgrounds and Borders specification. Amongst them are border-radius, border-image, multiple backgrounds and box-shadow. Opera 10.60+ updates this support with box-decoration-break and an updated background shorthand. We’ll showcase all these and more through examples and explanations.

Adding Meaning to Your HTTP Error Pages!

by Stuart Colville

The default HTTP error pages served up by a web server such as Apache will not be very helpful to your site’s visitors, should they ever be unlucky enough to stray across them. In this article, Stuart Colville shows you how to add custom error pages to your web site, and design them so that they draw your site visitors back into your site, for example to related articles.

Color in Opera 10 — HSL, RGB and Alpha Transparency

by Molly E. Holzschlag

This guide explains how the RGB (Red, Green, Blue) and HSL (Hue, Saturation, Lightness) color models work, and how web designers can make clever use of them in CSS to improve their designs, and make more logical color scheme choices. It also looks at the alpha channel, and how that can also be beneficial.

The Freelancing Business Part 3: Scheduling Your Projects

by R Blank

In this - the third article of his series on the business of software development - R Blank lifts the lid on scheduling with a detailed look at creating task- and resource- based project plans, buffering in case unexpected surprises crop up, and more.

Accessible Drag and Drop Using WAI-ARIA

by Gez Lemon

There is increasing interest in, and importance being laid upon, making modern dynamic web applications more accessible. New specifications such as WAI-ARIA and HTML5 provide the means by which to do this; in this article Gez Lemon presents a solution for implementing accessible drag and drop functionality using JavaScript and WAI-ARIA. Some discussion of HTML5 drag-and-drop features is also included for good measure.

JavaScript for Hackers

by Gareth Heyes

In this article, security expert Gareth Heyes details some of the more interesting JavaScript hacks he has uncovered while focusing on browser security. The knowledge presented here should give you some insights on making your web applications more secure.

Creating an HTML5 Canvas Painting Application

by Mihai Sucan

Looking for some practical implementations of HTML5 Canvas? Look no further. This article takes you through Mihai Sucan’s first development steps at creating a Canvas-powered online painting application. In this article he sets up the basic environment, shows how to make the event interactions work and implements some of the basic drawing tools.

JavaScript Best Practices

by Christian Heilmann

Writing a best practice article is quite a tricky business. To a number of you, what you are about to read will appear to be very obvious and just the sensible thing to do. However, looking around the web and getting code handed over to me from other developers for years has taught me that common sense is actually quite a rarity in live code on the web.

Programming — the Real Basics!

by Christian Heilmann

As an experienced developer you’ll sooner or later have to face people that are just not technical and will consider whatever you do as black magic. This article explains in simple terms what programming is about and hopefully will help both parties involved to steer these non-conversations into more productive waters.

Raphaël: A JavaScript API for SVG

by Dmitry Baranovskiy

In this article, we have the pleasure of introducing you to Raphaël, a JavaScript API for SVG that not only allows you to write SVG functionality using JavaScript code, but also provides support for SVG in IE, by emulating it in VML. This is a great tool for introducing more people to the power of SVG, and we’d like to wish it every success.

HTML5 Canvas — the Basics

by Mihai Sucan

HTML5 canvas is a powerful, flexible way to create two dimensional graphics on web pages using scripting, and a number of previous articles have demonstrated usage of it already. This article goes back to basics, giving beginners a starting point to work from and explaining the basics. Get drawing!

Keyboard-Accessible Google Maps

by Patrick H. Lauke

Google Maps is a fantastic API for adding powerful mapping functionality to your web applications quickly, but the accessibility leaves a little bit to be desired. In this article, Patrick Lauke shows how to construct a solution to improve things, adding keyboard accessibility to Google Maps.

Barcodes: Connecting the Real-World to the Virtual

by Brian Suda

Barcodes are becoming vastly more interesting in recent times, with 2D barcodes allowing you to represent anything from URLs to invoices, which in turn allows us to connect physical images to applications in all kinds of interesting ways. In this article Brian Suda discusses the history of barcodes, what’s available today for creating and reading barcodes, and real-world use cases.

CSS Basics

by Christian Heilmann

In the earlier tutorials of this course we talked about the content of web sites and how to structure content using HTML. This is very important as it means that we give our documents meaning and structure for other technologies to tie into seamlessly. The most important web technology to discuss next is CSS (Cascading Style Sheets), which is used to style our HTML, and position it on the web page. In this article I’ll introduce you to CSS — what it is, how to apply it to HTML, and what basic CSS syntax looks like.

Opera Binary Markup Language

by Chris Mills

In this article Chris Mills gives the lowdown on OBML, the one of the main technologies behind Opera Mini, which is also available in the Opera Devices SDK 9.6.

CSS3 Attribute Selectors

by Christopher Schmitt

In this article, Christopher Schmitt carries on his detailed exploration of what CSS3 has to offer us, looking at CSS3 attribute selectors that allow us to write selectors matching strings of text inside attribute values.

Setting Web Type to a Baseline Grid

by Craig Grannell

Another article in Craig Grannell’s fabulous series on design basics. In this article Craig gives us the lowdown on grid design basics - how to create a baseline grid in CSS, and how to position text on screen using it, with distances measured in both pixels and ems.

Introduction to WAI ARIA

by Gez Lemon

The elephant in the corner of modern web development has been Ajax accessibility.The W3C has been working on a new technology called ARIA - Accessible Rich Internet Applications - that provides a way for “Web 2.0” developers to bridge the gap between desktop-like interaction and accessibility.When I was reading up on ARIA, I found that I couldn’t see the big picture because the specifications focus on the detail. So we asked Gez Lemon of The Paciello Group, Juicy Studio and the Web Standards Project’s Accessibility Task Force to write us an overview that would help developers understand what ARIA is, why it’s important, and how they can use it right now to help users with disabilities.

The Freelancing Business Part 2: Budgeting Your Projects

by R Blank

This is the second in a series of articles written by R Blank giving practical advice on the business side of freelancing, including project management, contracts, budgeting and more. In this part he discusses budgeting, hot root vegetables and why working with new tech is similar to being a test pilot.

The Basics of HTML

by Mark Norman Francis

In this article you will learn the basics of HTML — what it is, what it does, its history in brief, and what the structure of an HTML document looks like. The articles that follow this one will look at each individual part of HTML in much greater depth.

A Browser Sniffing Warning: The Trouble With Acid3 and TinyMCE

by Hallvord R. M. Steen

In this article Hallvord Steen provides a warning about browser sniffing and why it is such a bad thing, by examining a recent bug discovered in Opera relating to compatibility with the TinyMCE editor. He also suggests a fix to this problem, involving “bug detection”, a useful technique that can be applied to many other situations.

The Freelancing Business Part 1: Pricing Your Work

by R Blank

This is the first in a series of articles written by R Blank giving practical advice on the business side of freelancing, including project management, contracts, budgeting and more. In this part he discusses pricing.

How to Do Photoshop-Like Effects in SVG

by Erik Dahlström

Wanna add some polish to your site, the standards way? In this article Erik shows how you can save time and money on creating graphics and effects programmatically using SVG instead of doing them all manually using Photoshop.

CSS Text Shadows and Background Sizing

by Christopher Schmitt

In this article Christopher Schmitt explores a couple of great new CSS design properties available in CSS3 — text-shadow for creating drop shadows, and background-size for automatically resizing background images as the browser window changes size. Exciting stuff indeed!

Microformat Encoding and Visualization

by Brian Suda

Adding Microformats to your markup is great for adding semantic value, and then performing tasks like pulling out hCards and adding them to address books, but is that all there is to them? Certainly not! In this article, Brian Suda shares some ideas for doing so much more with them.

JSON Configuration for JavaScript

by Gareth Rushgrove

If you’re working in a web development team with developers alongside designers, and you want to give the designers an easy way to change the variable parts of the application without the risk of breaking things, an external configuration file is a great idea, and JSON (JavaScript Object Notation) is a perfect format in which to store this data. In this article, Gareth Rushgrove shows you how.

A Call for Video on the Web — Opera <video> Release on Labs

by DevRel Team

To really make a splash on the Web, video needs an open solution that can easily be integrated into web pages without the need for proprietary plugins. The HTML5 <video> element and Ogg Theora can provide this, and Opera is proud to announce an experimental build that supports it. So read this article, and download and play with it today.

Efficient JavaScript

by Mark Wilton-Jones

Traditionally, a Web page would not contain much scripting, or at least, not much that would affect the performance of that Web page. However, as Web pages become more like applications, the performance of scripts is having a bigger effect. With more and more applications being developed using Web technologies, improving the performance of scripts is becoming increasingly important.

Articles by tags: 3d 64-bit abine accelerometer accessibility acid adblockplus advanced ajax alpha android angles animation apache array-extras audio augmented-reality barcode beta blendmodes border-radius box-decoration-break box-shadow browser business canvas captions client communication compatibility coordinates cottontracks counters cross-browser css css3 dataset desktop devicemotion deviceorientation devicepixelratio devices disconnect dom donottrackme drag-and-drop ecmascript ecmascript-5.1 emulator es5 euler-angles extensions extinterview flexbox font-face freelance function.prototype.bind gamma getusermedia gradients html html5 http ics ie indexeddb intel interview javascript jquery json layout masking math matrices matrix media media-queries meego mobile modernizr multi-column multi-line multimedia mutationobservers nokia object-additions oopp open-web opera opera-10 opera-11 opera-12 opera-14 opera-15 opera-9 opera-mini opera-mobile orientationchange physics picture plugins polyfill prefixes presto privacy protocol python qr-code quaternion raycasting regions remote-debugging requestanimationframe responsive rotation-matrix rwd screen-orientation security semantics server setinterval settimeout sniffing strict-mode subtitles svg tait-bryan-angles target-densitydpi targetdensitydpi tcp-ip text text-shadow themes three.js tinymce track tracks transform transform-origin transforms transition ui upnp vector video viewport virtual-reality w3c wai-aria webgl webkit webvtt wot x86 yui