Articles

Opera Browsers, Modes & Engines

by Andreas Bovens in Articles

The Opera browser is available on a wide range of platforms, in a number of flavors with different modes, engines and levels of standards support. As things can get somewhat confusing, we decided to create a simple product overview that details some of these technical differences.

Fixing the scrollTop bug

by Simon Pieters in Articles

Which element scrolls the viewport when using scrollTop? This article explains what “the scrollTop bug” is and what we need to do to get it fixed. Your help is needed!

Sex, Houdini and the Extensible Web

Sex, Houdini and the Extensible Web

by Brian Kardell in Articles

To evolve the web and compete with native, we need a way to innovate and iterate faster — the Extensible Web principles, which have brought us Service Worker and Web Components. Project Houdini looks at how we can bring extensibility to CSS, too.

The State of Web Type

by Bram Stein in Articles

Typography has a long and rich history, but much has been lost in the transition to the web. Let’s take a look at some of the features we need for an optimal and beautiful reading experience.

Getting to Know CSS Blend Modes

Getting to Know CSS Blend Modes

by Shwetank Dixit in Articles

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 in Articles

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.

Creating Game-Style Parallax Scrolling: Zombie Edition

by Elli Bishop in Articles

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 in Articles

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 in Articles

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.

Opera Coast: Developer Resources

by Samuel Irons in Articles

Opera Coast takes advantage of mobile browsing by supporting and encouraging development for touch-based web design. There are many resources available online for developers to optimize their sites to this end.

An Introduction to CSS Regions

by Chris Mills in Articles

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.

Understanding 3D Transforms

Understanding 3D Transforms

by Tiffany Brown in Articles

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.

Major Changes in Opera’s Extensions Infrastructure

by Andreas Bovens in Articles

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 Bruce Lawson, Chris Mills in Articles

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.

Advanced Cross-Browser Flexbox

by Chris Mills in Articles

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 in Articles

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 in Articles

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 Articles

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 Daniel Davis, Rich Tibbett in Articles

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.

CSS3 vs jQuery Animations

by Siddharth Rao in Articles

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 Articles

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 in Articles

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 in Articles

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 in Articles

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 in Articles

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, OperaPrestoDriver.

RoboHydra: A New Testing Tool for Client-Server Interactions

by Esteban Manchado Velázquez in Articles

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 in Articles

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 in Articles

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.

HTTP: Let’s GET It On!

by Karl Dubost in Articles

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 in Articles

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 in Articles

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 Articles

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.

Opera Mobile Emulator Build With Experimental WebKit Prefix Support

by Bruce Lawson in Articles

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 in Articles

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 in Articles

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 in Articles

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 in Articles

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 Chris Mills, Erik Möller in Articles

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.

An Introduction to HTML5 Web Messaging

by Tiffany Brown in Articles

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 in Articles

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.

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

by Luz Caballero in Articles

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.

DOM Access Control Using Cross-Origin Resource Sharing

by Tiffany Brown in Articles

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 in Articles

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 in Articles

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.

An Introduction to WebGL — Part 1

by Luz Caballero in Articles

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.

Opera Mini Request Headers

by DevRel Team in Articles

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 Chris Mills, Mike Taylor in Articles

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 in Articles

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 in Articles

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 in Articles

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 in Articles

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.

New Structural Elements in HTML5

by Bruce Lawson, Chris Mills in Articles

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 Chris Mills, Patrick H. Lauke in Articles

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 in Articles

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 Bruce Lawson, Mike Taylor in Articles

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 Articles

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 in Articles

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 in Articles

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 in Articles

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.

Cross-Browser CSS box-shadows

by Rustam Gaffanov in Articles

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 Articles

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 Articles

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 Articles

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 in Articles

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 in Articles

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.

CSS Generated Content Techniques

by Divya Manian in Articles

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 in Articles

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 Bruce Lawson, Patrick H. Lauke in Articles

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.

Accessible HTML5 Video With JavaScripted Captions

by Bruce Lawson in Articles

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 Borders, Backgrounds and Boxes

by David Storey, Vadim Makeev, Zi Bin Cheah in Articles

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 in Articles

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 in Articles

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.

Accessible Drag and Drop Using WAI-ARIA

by Gez Lemon in Articles

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 Articles

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 in Articles

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 in Articles

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 in Articles

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 Articles

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 in Articles

HTML5 canvas is a powerful, flexible way to create two dimensional graphics on web pages using scripting, and a number of previous dev.opera.com 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 in Articles

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 in Articles

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 Articles

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.

CSS3 Attribute Selectors

by Christopher Schmitt in Articles

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 in Articles

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 in Articles

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 in Articles

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 Articles

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.

How to Do Photoshop-Like Effects in SVG

by Erik Dahlström in Articles

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 Articles

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 in Articles

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 in Articles

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 in Articles

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 in Articles

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.