Dev.Opera articles

Creating game-style parallax scrolling: Zombie Edition

Elli Bishop — Fri, 18 Oct 2013 12:15:10 GMT

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.

Media Capture in mobile browsers

Francesco Iovine — Thu, 26 Sep 2013 12:13:11 GMT

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.

Getting to know mutation observers

Tiffany Brown — Fri, 06 Sep 2013 00:18:20 GMT

In this article, Tiffany Brown has a look at mutation observers, how they are different from mutation events, and how you can use them in your web applications.

CSS viewport units: vw, vh, vmin and vmax

Chris Mills — Wed, 03 Jul 2013 09:08:21 GMT

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.

An introduction to CSS regions

Chris Mills — Wed, 03 Jul 2013 09:06:07 GMT

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

Tiffany Brown — Wed, 12 Jun 2013 06:55:33 GMT

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

Luz Caballero — Wed, 12 Jun 2013 06:54:44 GMT

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.

Animating flexboxes: the lowdown

Chris Mills — Wed, 17 Apr 2013 09:29:56 GMT

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

Chris Mills — Wed, 10 Apr 2013 12:45:35 GMT

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.

Adding Geolocation metadata, with microformats, datasets, microdata and RDFa Lite

karlcow — Wed, 16 Jan 2013 10:12:15 GMT

In September 2011, I needed to mark up location data in an HTML document and it became more complicated than I initially thought it would be. I started to think about this topic again recently and explored some possibilities. In this article I will share my findings, looking at how I used microformats, datasets, microdata and RDFa Lite to mark up this data, and discussing what the best option might be.