As we all know there are myriad of phishing e-mails sent every moment. Bank industry has always been one of the major targets, and for a reason.

Also Finnish banks have been scam targets for many times. Since Finnish language is quite hard, the quality of translated content in e-mails has been very poor… until very recent attempt which clearly differs from earlier ones.

Table of Contents

Contents of an E-mail

I have to admit as a native Finnish that this scam e-mail is very well written. There are some minor mistakes but it’s mostly like reading an official e-mail sent by the bank authors.

It seems that every major Finnish bank was a target. Scam e-mails were sent randomly where the recipients most likely got several e-mails from different banks.

I was able to scan all these different e-mails and it was obvious that there was time spent to create these dedicated e-mails for every bank. You can view the contents of an E-mail from here.

The structure of an e-mail is following:

  • contact information (unique per bank),
  • notification that account is about to expire and it needs to be renewed,
  • masked link to the phishing site,
  • list of benefits for being a customer (probably copied from website?),
  • regards (unique per bank)

Phishing Site

Phishing site itself is a realistic looking (or an actual) copy from the bank’s own website. It’s very hard to visually distinguish the phishing site from an actual website. The skeleton is from real bank’s website and the form content is modified.

I was lucky enough to receive all files of the infected website – both the user interface and the PHP script collecting and logging form data. As a web developer I noticed that this could have been done way better. But like I mentioned: the site looks and feels real, no matter how things are under the hood.

The Code Behind

I won’t go through the user interface itself since there’s nothing that interesting. If you’re interested to see screen captures, check this article (in Finnish).

What I was interested of was how it worked. I quickly found out that all the data was logged into a text file. This file contained all the posted data. Sadly I found out that there were real and sensitive information posted by many users.

I reported these findings to “National Cyber Security Centre Finland” and got a quick response that they had found out this logic and there were about 40 infected sites collecting information. I don’t know how many credentials were totally leaked. But every log file I went through contained 5 – 15 real credentials and few fake ones.

You can view the actual PHP script from here. As you can see, it’s very simple and crude. But it does the job it was meant for – logs the data and sends it via e-mail.

Infected Websites

I noticed few patterns when going through infected websites:

  • they are mostly WordPress sites,
  • some of the infected sites are located in Romania

There are no assumptions to be made since security holes and evil people are everywhere. However this was well planned by compromising several WordPress sites instead of having free .tk websites popped out.

NCSC Finland has done an excellent job by informing the administrators of compromised websites to remove phishing page and / or block the request. Additionally all the banks and Finnish media has taken actions to inform about this threat which probably minimises all the damage.


Certainly these phishing attempts are getting more professional all the time. What comes to me, I’ve personally spent time to report mostly reflected XSS flaws (also to banks). And I see it as a very big threat when well formed e-mails and even the smallest one security flaws on banks’ websites are used together. This applies also on e-commerce and other websites dealing with serious money.

What if you could use APNs (Apple Push Notification Service) to send push notifications for your website users right on their desktop? Since OS X Mavericks it has been possible to dispatch push notifications from your web server directly to users.

In this article, I’ll provide step-by-step instructions of implementing Safari Push Notifications directly in your website.

Table of Contents


In order to get everything up and running, you need at least:

In this example, I’m using Heroku and node.js (+ Express) for serving both the website content and push package.

Registering a Website Push ID

First step is to register a Website Push ID. This is done at “Certificates, Identifiers & Profiles” section of the Member Center.

Under “Identifiers”, you’ll find a sub-section titled Website Push IDs.

Insert description and identifier, which is recommended to be in reverse-domain name format, starting with “web”. In my case I’m using as an identifier.

After you’ve registered your Website Push ID, you’re ready to generate a certificate.

Generating a Certificate

This can be considered as the hardest part of the tutorial. It requires multiple steps and all of these needs to be completed.

We start our journey by logging into Developer Overview. Under there you should see a folder link titled Certificates. Navigate there and you go into a same view where we’ve created Push ID. This time we select Certificates and create a new certificate.

Now you should see a list of Development and Production certificate types. Under Production there is a checkbox for Website Push ID Certificate. After selecting that you’ll get a prompt about which Website Push ID we are going to use. This should be obvious.

Now we’re going to create a CSR by using Keychain Access. Launch it and select Keychain Access » Certificate Assistant » Request a Certificate from Certificate Authority.

Fill in your details (leave empty if unsure). Request is Saved to disk. Now you should be able to save [filename].certSigningRequest file to the Desktop.

Now that we’re done with the CSR file we can continue our process on Development Portal and generate our certificate. After that we’re able to download our .cer file. After downloading it, double-click the .cer file.

You should end up in the Keychain Access, under login section, where you should see your certificate. Right-click it and select “Export Website Push ID []”. This should open up a dialog where you can save [filename].p12. Then you’ll be prompted with the password which will be used to protect the exported item. In our case this can be left empty.

Now that we’ve created .p12 file, we can proceed on creating the actual package.

Contents of the Push Package

When website asks user for permission to send push notifications, Safari will ask your server for a push package. This package is a normal zip file containing following files (all files are required, and no other files can be included):


Every icon file and website.json are created by you, while manifest.json and signature files are generated by a script.


Website.json contains following information (mine as an example):

    "websiteName": "Heroku Push Notification Test",
    "websitePushID": "",
    "allowedDomains": [""],
    "urlFormatString": "",
    "authenticationToken": "19f8d7a6e9fb8a7f6d9330dabe",
    "webServiceURL": ""

This is described in the Apple Documentation as:

  • websiteName – The website name. This is the heading used in Notification Center.
  • websitePushID – The Website Push ID, as specified in your registration with the Member Center.
  • allowedDomains – An array of websites that are allowed to request permission from the user.
  • urlFormatString – The URL to go to when the notification is clicked. Use %@ as a placeholder for arguments you fill in when delivering your notification. This URL must use the http or https scheme; otherwise, it is invalid.
  • authenticationToken – A string that helps you identify the user. It is included in later requests to your web service. This string must 16 characters or greater.
  • webServiceURL – The location used to make requests to your web service. The trailing slash should be omitted.

Creating the Push Package

Now that we have our content (icons + website.json) set up, we can create both manifest and signature files. This is done with createPushPackage.php script (or with push_package gem).


The manifest is a JSON dictionary of your each file in push package where filename is the key and SHA1 checksum is the value.

createPushPackage.php contains a function create_manifest($package_dir) for creating the manifest. Use this and it’ll generate a file manifest.json into your .pushpackage directory.


Remember the .p12 we created in the beginning? This file is passed to the function create_signature($package_dir, $cert_path, $cert_password). If you left the password empty, just pass empty string to the function.

Archive file

There is a function called package_raw_data($package_dir) for creating the ZIP file. This is the package itself we’re serving for the Safari browser. If you’ve successfully completed the previous steps, you should now have created a valid package.

Serving Content and the Push Package

I’ve split this into two sections: server-side and client-side configuration. First we’ll start with the server-side configuration.

Server-side Configuration

My Node / Express application looks like:

var express = require('express');
var app = express();
var port = process.env.PORT || 3000;


app.get('/', function(req, res) {
});'/v1/pushPackages/', function(req, res) {
});'/v1/log', function(req, res) {

This should be quite self-explanatory, but let’s go it quickly through:

  • Line #7 – serving the index.html file that requests the permission from the user to use push notifications.
  • Line #11 – serving the push package which is requested by the browser as a POST request
  • Line #15 – for logging (errors), where HTTP body contains a JSON with key logs and as a value there’s an array of strings describing errors.

Server-side Endpoints

As you might have noticed, there’s a certain logic with the endpoints. Notice that “version” is always v1 and deviceToken is the token you’ll receiver from the client when user grants a permission:

  • webServiceURL/version/pushPackages/websitePushID – location of the push package, requested by POST request.
  • webServiceURL/version/devices/deviceToken/registrations/websitePushID – when an user grants a permission or later updates his permission level, a POST request is sent. When user removes the permission for push notifications, a DELETE request is sent.
  • webServiceURL/version/log – when an error occurs a POST request is made to this endpoint

I suggest reading articles in Resources section for more verbose explanation of the endpoints.

Client-side Configuration

There are different code examples of implementing the permission request. This simple piece of code is used on my site:

var pushId = "";

var subscribe = document.querySelector("#subscribe");
subscribe.addEventListener("click", function(evt) {
}, false);

var pushNotification = function () {
    "use strict";
    if ('safari' in window && 'pushNotification' in window.safari) {
        var permissionData = window.safari.pushNotification.permission(pushId);
    } else {
        alert("Push notifications not supported.");

var checkRemotePermission = function (permissionData) {
    "use strict";
    if (permissionData.permission === 'default') {
        console.log("The user is making a decision");
    else if (permissionData.permission === 'denied') {
    else if (permissionData.permission === 'granted') {
        console.log("The user said yes, with token: "+ permissionData.deviceToken);
  • Lines #4 – #7 – since I’m using a separate button for subscribing, we need to add event listener for it.
  • pushNotification() – this function is called after the subscribe button is clicked and it will check whether push notifications are actually supported. And if so, it makes the initial call for the checkRemotePermission function.
  • checkRemotePermission() – this function makes the actual request for the permission and is executed again as the callback of function window.safari.pushNotification.requestPermission(url, websitePushID, userInfo, callback).

Above lines of code are from the actual implementation I’ve made. You can test it at:

Possible Problems and Solutions

You may encounter problems while you’re first trying to implement push notifications.

The most common one seems to be that user denies a permission without client even asking for it. This is because the request never reaches the push package (the endpoint isn’t correct). This use case is not described in the Apple’s documentation, which only claims that “denied” state occurs only when user denies the permission.

Other problem seems to be that once you’ve granted or denied the permission, you’re never seeing the permission prompt again. In order to fix that, you can configure permissions from Safari » Preferences » Notifications.

For other troubleshooting and interpreting the log messages, I suggest reading the Troubleshooting section from Apple’s documentation.


I hope that everything went well after reading my article. In any case, I suggest reading also these articles which contain very valuable information for implementing push notifications.

The first Jolla Smartphone was sold two days ago (27th of November) and there has been quite a buzz around it (at least here in Finland). I’m happy to be one of the owners of this great smartphone which made my previous phone (iPhone 4) completely obsolete.

Another significant product, also coming from Finland, is a game called “Clash of Clans”, created by Supercell. This game has rocked in the iOS App Store’s and Android Google Play’s “Top Grossing Apps” for a very long time.

Currently, the ecosystem around Jolla is quite small and the number of applications are quite limited. However, it’s possible to install and run Android applications on Jolla, which makes it a much more powerful platform than I originally expected.

This post is focusing on installing and running the Clash of Clans on Jolla Smartphone. Unfortunately Jolla doesn’t support screenshots yet. Therefore I’m unable to provide installation steps with screenshots :(.

Three Steps to Victory

We need to take three steps in order to get Clash of Clans up and running:

How Do I Install Aptoide?

  • Search for “download aptoide apk” with Jolla’s default browser,
  • Visit first link (“Aptoide Installer”) from search results and download the .apk,
  • Install APK on Jolla (see instructions below)
  • Now you should see Aptoide on your smartphone’s desktop

How Do I Install Clash of Clans?

  • Open Aptoide and search for “Clash of Clans”
  • It may take a while, but eventually you’ll see Clash of Clans (trusted). Don’t click for “Search more”!
  • Click “Install” on Aptoide Store. Notice that downloading will be interrupted if your phone goes to sleep.
  • After installation, click “Open” on Aptoide Store.

How Do I Install APK’s on Jolla?

To install downloaded applications in Jolla, you need to go: Settings » System Settings » Transfers. There you’ll see the downloads you’ve made. Click on the download to install.


If you have any problems with these instructions, feel free to comment below. After the comments are closes (in 30 days), you can reach for me from Twitter: @zvona.

By the way: Clash of Clans runs pretty smoothly on Jolla. Way to go, guys and girls both on Jolla and Supercell!

Ever heard of Shadow DOM? If you haven’t then this article is definitely for you (and if you already have, you should still read this ;)).

Despite of the “scary” name it has there’s nothing to be afraid of. Shadow DOM is a friendly little fellow who’s here to make life of web application developers easier.

In this article, I’ll present thoroughly the capabilities of Shadow DOM and how one can easily create independent widgets by encapsulating their code with it.

Table of Contents


At the moment, Shadow DOM API can only be used and accessed with Chrome 25+ Beta or Chrome Canary. Download either one of them and start inspecting what Shadow DOM has to offer.

To access Shadow DOM via Chrome Console, you have to enable it from Settings -> General -> [x] Show Shadow DOM.

What is it About?

Shadow DOM is described by W3C as “The shadow DOM allows multiple DOM trees to be composed into one larger tree when rendered”. In practice, this means that it’s possible to create shadow roots and include them into document tree nodes, better known as shadow hosts. Shadow roots can contain child nodes, and these nodes aren’t exposed in traditional DOM tree at all.

Let’s have an example: suppose we have an input element which type is date. In modern browsers this type of element contains a date picker to provide some additional functionality and accessibility for the user.

This is where Shadow DOM enters the stage: date picker is constructed as a Shadow DOM subtree where input field acts as an shadow host.

Even though we can view the Shadow DOM of browser components, we can’t directly access to them.

Playing with Shadow DOM

Now that you’ve set up and you understand the basics about Shadow DOM, it’s time to start playing with it.

In our case, we want to create a simple custom widget which displays JSON data structure in a table. I won’t go in to the deepest details of the widget, but I’ve created a live demo of the widget I’m using as an example.

Preparing Content

At first we start by preparing and creating content. There are couple of guidelines on creating content:

  • it may be wise to use HTML templates instead of direct DOM manipulation when creating complex structures,
  • avoid using too generic naming. Although Shadow DOM is secured, this can lead to misunderstandings,
  • using pseudo-attributes is a good practice

With these guidelines we make the life easier both for us and for the developers who are using the widget.

We start by creating a template for our widget:

Notice: if you want to use external template files (like I do in my demo), use valid HTML elements, eg. by switching template element to a section.

Now we have a basic HTML structure set up and we can add some styling:

This is it. We have a HTML structure and CSS styling ready for the widget and now we need to do some JavaScript magic. Basically we want to fetch the template elements and use them as shadow root children elements for displaying the JSON data. In order do to this, we need some attributes for the jsontable element:

What we’ve got here is:

  • jsontable as the custom widget element,
  • data-template refers to an id of the template we want to use,
  • data-source refers to a JS object variable which contains the “JSON data”

There are both static and XHR examples in my demo, check them out for further guidance of using the data-source and .dataSource setter.

Creating a Shadow Root

We will start by accessing our custom HTML element called <jsontable> and creating a shadow root for it by calling document.webkitCreateShadowRoot (notice the webkit prefix):

var jsontable = document.querySelector("jsontable"),
    jsontableRoot = jsontable.webkitCreateShadowRoot();

For the simplicity of this example, we access only one jsontable element at time and create the functionality for it.

Next, we need to refer to our template and append it to the shadow root:

var templateId = jsontable.dataset.template;
var templateNode = document.getElementById(templateId);


After this, following steps are:

  • setting references for template elements (table, tr, th, td),
  • populating table from the JSON by using these references

Both of these steps are done in my live demo I’ve created for this article.

This is it! What we’ve achieved is an independent widget which doesn’t interfere with the other DOM at all.

Accessing Shadow Root

Sometimes, one may need to access Shadow DOM externally and manipulate it. This is possible both with CSS and JS.

Accessing via CSS

In order to allow CSS access, we need to declare <shadow root>.applyAuthorStyles = true;. In our example, I made a setter for it (see live demo for further details):

var exports = {
    set applyAuthorStyles(x) {
        jsontableRoot.applyAuthorStyles = !!x;

This allows accessing the styling whenever we need to, ie. we can enable and disable in on the fly.

Accessing via JavaScript

JavaScript access can’t be done with direct reference (see example), but it can be done by using webkitShadowRoot property, eg.:

var table = document.querySelector("jsontable").webkitShadowRoot.querySelector("table");

This allows manipulating the Shadow DOM whenever it’s needed. At the moment it’s not even possible to protect your Shadow DOM from external access (see Bug 16509 – [Shadow]: Consider isolation).


I’ve to say I’m excited about Shadow DOM. Although different kinds of snippets, plugins and widgets have been created for years, Shadow DOM and Web Components offers a clear path for creating eg. custom form controls, media controls, captchas, etc.

Current status of course is that Shadow DOM can’t yet be used purely because it has landed only on few browsers and the work is still in progress. However, we can play it with (just like we did in this article) and consider the possibilities it offers in the future.


Here are some of the resources I encountered while exploring the wonderful world of Shadow DOM:

We all know that CSS3 has emerged in past couple of years a lot, and everyone is talking about it. There are many new features and properties that are well implemented in modern browsers.

But lately there has been some buzz going around CSS4. CSS Working Group has published a first working draft over half a year ago with many new proposals. CSS4 isn’t going to replace CSS3, but the work on specifications will go on parallel with CSS3 Modules.

In this article I’ll go through some of the most interesting proposals for CSS4. There are many new concepts, including such as parent selector, UI states pseudo-classes, Logical Combinations and Namespaces.

This article is based on my presentation: “CSS3 – The Present and The Future” which contains a section Peek into CSS4.

Table of Contents

Parent Selector

This is the magical selector many developers have been craving for. Earlier there hasn’t been an option to select the parent of an element. In CSS4 this is possible.

Parent selector was earlier proposed to be declared by using “$” rule, eg. $fieldset input:focus. At the moment it is proposed that the rule is following:

fieldset! > input:focus {

If you’re interested in starting to use parent selector today, check jQuery-powered polyfill: cssParentSelector for it.

UI States pseudo-classes

UI states pseudo-classes are meant to target different states an element can have. These are defined in CSS Basic User Interface Module, which have been moved into CSS4 proposal. Some of them, like :enabled and :disabled are already specified in CSS3, while others, like :valid and :invalid are new pseudo-classes in CSS.

Here is the list of UI states pseudo-classes:

  • :enabled / :disabled
  • :checked
  • :indeterminate
  • :default
  • :valid / :invalid
  • :in-range / :out-of-range
  • :required / :optional
  • :read-only / :write-only

Most of them are self-explanatory, but you can read more detailed description from the draft.

Tree-Structural pseudo-classes

Tree-structural pseudo-classes (eg. :nth-child() and :nth-of-type()) has now two new pseudo-classes: :nth-match() and :nth-last-match().

What :nth-match() actually is? It’s very similar to the logic with :nth-child().

:nth-match(an+b of selector-list) notation represents an element that has a parent and has an+b-1 siblings that match the given selector-list before it in the document tree, for any zero or positive integer value of n.

In practice, :nth-match matches with the given selector-list while :nth-child matches with the given selectors children elements. This happens by including of keyword in selector. If you have the selector input:nth-match(even of :enabled), it will first match the subset of input elements that are enabled and then match the even elements from that subset.

Logical Combinators

Logical Combinations consists of two pseudo-classes: :matches() and :not(). The behavior of “Negation pseudo-class” :not() is most likely clear to you – eg. input:not(:disabled) matches with all the input elements that are not disabled. But :matches() might be a bit more strange:

Matches-Any pseudo-class

The :matches() pseudo-class is the standardised version of Mozilla’s :-moz-any() pseudo class. This is useful for when you need a number of similar selector strings, but change one part such as the pseudo-classes.

Instead of writing a:hover, a:focus, a:active, one can write a:matches(:hover, :focus, :active) for same result.

Reference Combinators

Reference combinators allow you to select elements that are referenced by ID by another element. This is better to be explained in practice:

The following example highlights an input element when its label is focused or hovered-over:

label:matches(:hover, :focus) /for/ input { /* association by "for" attribute */
    box-shadow: yellow 0 0 10px;

Media Queries Level 4

While writing this article, first draft of Media Queries Level 4 was published. Unfortunately I won’t be writing more about Media Queries in this article, I just suggest reading the draft :).


Namespaces are actually proposed in CSS(3) Namespaces Module, but it’s written pretty much the same time as first proposal of CSS4. And CSS4 proposal is heavily referring to the namespaces, so I feel this one is good to go through when speaking of CSS4.

CSS Namespaces has quite simple syntax. The @namespace declares a namespace prefix and associates it with a given namespace name, and “vertical bar” works as a selector delimiter. Consider following example:

@namespace "";
@namespace foo "";

h1 { font-size: 42px; } /* Belongs in */
|h1 { font-size: 36px; } /* Belongs eg. in */
*|h1 { font-size: 32px; } /* Belongs in both namespaces */
foo|h1 { font-size: 28px; } /* Belongs in */

New Properties for Borders

Some new properties for borders are introduced in CSS4. The most obvious one is border-corner-shape, which allows values curve | bevel | scoop | notch. In addition, there are updates on border-images.

For further reading, see CSS Backgrounds and Borders Module Level 4.


I have to admit that there is lot more in CSS4 Working Draft than it’s included in this article. Therefore I suggest you all to read following resources I’ve gathered about CSS4:

The final version of iOS 5 has been finally released and there’s lots of buzz going around it’s new features. Most of the discussion focuses on the operating system itself which is totally understandable. There are lots of improvements and nifty little features to play with.

But one thing that seems not to get such attention is what iOS 5 brings to us, web developers, and how it improves the experience with web applications.

In this article I’ll go through most of the major features that are included in iOS 5 for web developer point-of-view.

Table of Contents


This is probably most anticipated feature for web applications. Until today it hasn’t been easily possible to add scrollable content in web document.

Briefly, all you need to define is:
elem {

To achieve proper scrolling support for iOS 4 and/or other devices, I strongly suggest using iScroll 4.

And if you want to display scrollbars all the time, read this post: Force Lion’s scrollbar back. It will help you on displaying the scrollbar while user is not accessing the scrollable area, which is a very good visual guidance for user that content can be scrolled. But be warned: “custom” scrollbar won’t update it’s location while user is scrolling and meantime there are two scrollbars displayed.


Position:fixed is well-known CSS property that hasn’t earlier been included in iOS. But now it’s there, ready to use.

I noticed that setting a fixed element it has partial transparency by default. You even can’t turn it off by setting opacity to 1.0. If you happen to know how to solve this, please comment on my blog.

New Input Types

iOS5 provides several new input types that didn’t exist earlier on iOS4. These input types are: date, time, datetime, month and range.

I have to mention that the user experience with range is awful – with your (fat) finger you end up selecting the whole control instead of value slider all the time.

Note: input type=”file” isn’t still working. “Choose File” button is displayed, but at the same time it’s disabled.

WOFF Font Support

iOS 5 supports WOFF (Web Open Font Format) fonts. This is good news in a way. I haven’t personally tested whether there’s any benefit compared to SVG or TTF from a rendering or performance point-of-view.

Web Workers

Web Workers API is a bit less familiar for many developers. They allow to run long-running scripts without halting the user interface and they’re not interrupted by other actions.

The problem with Web Workers on iOS 5 is – as you may guess – the perfomance. You can try Web Workers with Javascript Web Workers Test. But I have to mention that while it took only about five seconds with my workstation, the same execution time with my iPhone 4 was 106 seconds. So as you can see, there’s a huge difference on performance.


iOS 5 supports contentEditable attribute, which allows rich text editing (RTE) of content. This is very welcomed feature offering the possibility of building WYSIWYG editors that can be used eg. with iPad.

Read more about this feature at: WYSIWYG Editing (contentEditable support) in iOS 5.

classList API

ClassList API is very useful while writing native JavaScript. It has few simple functions (like add(), remove(), toggle()) that are meant for handling classNames in an element.

If you want to implement classList API and ensure backwards compatibility, use classList.js polyfill, written by Eli Grey.


Function matchMedia() is relatively new function for detecting media queries with JavaScript. The implementation is very simple:

if (matchMedia("(min-width: 1024px)").matches) {
    alert('your screen is at least 1024px wide');
else {
    alert('your screen is less than 1024px wide');

Can’t say how useful that is yet, since I’ve personally never used it before. But we’re living the times of Responsive Web Design and there may be conditions where this may be needed.

For browsers that doesn’t support matchMedia(), there is a matchMedia.js polyfill available, written by Paul Irish.

And if you’re more interested in similar logic, I suggest reading about yepnope.js.

Changes in Gestures Events

Gestures events (gesturestart, gesturechange, gestureend) now returns pageX and pageY values for events – in addition to scale and rotate values. These values didn’t exist in iOS4, forcing developer to retrieve X/Y-coordinates with corresponding touch events.


iOS 5 comes also with two neat properties: webkitCompassHeading and webkitCompassAccuracy. You can read more about them and test them at: Taking a new device API for a spin.


Well… WebGL is kind of implemented in iOS5. But only for iAd.

However there are rumors promising good, and already it’s said that “things are in place” but they’re just not fully working (or have been disabled). So, let’s keep our fingers crossed that next (minor) update will include support for WebGL.

Anything Else?

Mark Hammonds has written a comprehensive article in mobiletuts+, titled iOS 5 for Web Devs: Safari Mobile Updates. That’s really worth of reading!

And if you’re interested in browser performance in general, then you should read iOS 5 Top 10 Browser Performance Changes.

If there are other things to mention, feel free to comment and bring your ideas up. I’ll keep on updating this post right after new information arises about iOS 5.

More than two years ago CSS Animations were represented in WebKit. Up until now, they’ve been supported only in Safari and Chrome.

Recently I noticed, when upgrading to Android 3.1 that it dramatically enhanced the performance of CSS Animations and Transitions. And only few days ago, Firefox 5 Beta was released which has decent support for keyframes, and also better performance for transitions. Therefore I decided to write a brief article about CSS Animations and using keyframes.

In this article we will go through what it takes to create keyframe animations. I’ll create a simple demonstration of an icon character which comes alive with a little help of keyframes.


This article won’t help with the basics and all the details of CSS Keyframes. If you’re unfamiliar with keyframes, I strongly suggest reading Smashing Magazine’s article “An Introduction To CSS3 Keyframe Animations”.

If you’re also unfamiliar with CSS Transitions, you can also read my article “CSS3 Transitions – Are We There Yet?”.

It’s good to notice that there already exists tools for creating proper CSS Animations, like Animatable that are worth of checking. Especially, if you’re not that much of a fan writing endless keyframes rules and css declarations

Browser Support

I’ve tested this example with recent builds of Google Chrome, Firefox 5 Beta, iPhone 4 / iPad and Android 3.1 with Browser (Chrome) and Firefox Beta. So, if you’re viewing this article with any of those, then you’re good to go.

There are indications that also Opera will support CSS Animations in near future. Let’s see when that will be. However, Internet Explorer won’t be supporting CSS Animations – they’re not even supporting CSS Transitions yet.

The Icon

In this example we’ll build an icon with separate head, body and background. We’ll add some movement with keyframes to each object while trying to achieve as realistic result as possible without too much of an effort.

The character icon in demonstration is from Battleheart, developed by Mika Mobile.

The Head

Wizard's head We start by defining the behavior of an animation for the head. This is done by defining a keyframes rule called “breathe-head”.

@-webkit-keyframes breathe-head {
    0% {
        -webkit-transform: rotate(1deg) translate3d(0px, 0px, 0px);
    40% {
        -webkit-transform: rotate(-3deg) translate3d(-2px, -1px, 0px);

    100% {
        -webkit-transform: rotate(1deg) translate3d(0px, 0px, 0px);

NOTE: I’m using property called translate3d for moving the head slightly backwards. It’s good to understand that only transformable properties (+ opacity) can be animated with hardware acceleration. Translate3d(0,0,0) is good to have to ensure hardware acceleration of animations even if it’s not needed for any other use. I’ve even encountered many situations where animation performance hasn’t been smooth eg. on iOS Web Applications until (over)usage of translate3d().

Twice the Fun!

For some (unknown) reason, it isn’t possible to add -moz-keyframes rule at the same declaration, so we need to declare keyframes rules again:

@-moz-keyframes breathe-head {
    0% {
        -moz-transform: rotate(1deg) translate(0px, 0px);
    40% {
        -moz-transform: rotate(-3deg) translate(-2px, -1px);

    100% {
        -moz-transform: rotate(1deg) translate(0px, 0px);

I’m not using translate3d() since it seems Firefox only understands translate(). But it’s good enough for performance since it should be also hardware accelerated on Firefox.

The Body

Wizard's body Next, we’ll animate the body of the character. We don’t need any wildly bouncing animation since we’re operating with an (small) icon. Constant movement has to be subtle or otherwise it can start to irritate users:

@-webkit-keyframes breathe-body {
    0% {
        -webkit-transform: translate3d(0px,0px,0px);

    40% {
        -webkit-transform: translate3d(0px,-3px,0px);

    100% {
        -webkit-transform: translate3d(0px,0px,0px);

And the same rules needs to be applied for -moz-keyframes like we did with the head.

The Background

Wizard's backgroundI wanted to add something more to a movement and decided to draw a subtle background “sun” which keeps rotating behind the character:

@-webkit-keyframes rotate-bg {
    0% {
        -webkit-transform: rotate(0deg);
    100% {
        -webkit-transform: rotate(360deg);

Rotating background is very straight-forwarded; we rotate it once per timeline we’ll define later on.

Keyframes are Done – What Next?

Now that we’ve defined keyframe rules, we must take them into use:

.character {
    -webkit-animation: breathe-body 3000ms infinite both ease-in-out;
    -moz-animation: breathe-body 3000ms infinite both ease-in-out;

.character .head {
    -webkit-animation: breathe-head 3000ms infinite both ease-in-out;
    -moz-animation: breathe-head 3000ms infinite both ease-in-out;

.rotating {
    -webkit-animation: rotate-bg 30s infinite linear;
    -moz-animation: rotate-bg 30s infinite linear;

I’m using short-hand declarations, and eg. for .character .head we declare: “Use breathe-head keyframe rules in a three seconds long loop which last infinite time and is animated with in-out easing equation”.

Value “both” stands for animation-fill-mode should define the status of first and last keyframe. But in my case I didn’t notice anything special when I trying other possible values “forwards” or “backwards” (this could be since both start and end keyframe has similar values).

The End Result

I needed to declare more CSS for getting things in correct place. But the example code above is practically the soul and heart of the animation. But here is the end result of an animated wizard icon:



How do you like it? It’s my first animation ever :).

Sometimes there is need to write browser-specific CSS declarations. Although every developer should put their best effort on creating structure and layout that doesn’t require any proprietary hacks, one may encounter situations where it’s impossible to proceed by the book.

My case was about font-size and letter-spacing on Opera (11.10). Opera was displaying selected font way too big to fit in allowed space and I needed a hack to fix this issue.

Opera 9 and below

This is pretty straight forward and well known hack:

html:first-child p

The real issue, in my case, was how to target newer and modern Opera versions 10 and 11.

Opera 10 and above

The answer is in media queries. Earlier this was obvious hack while no other browsers supported media-queries properly. However, nowadays more and more browsers support it and therefore we need to tweak the conditions a little:

@media not all and (-webkit-min-device-pixel-ratio:0) {
    p {

I’ve validated this with Opera 10.5 and Opera 11. I also checked on Chrome 11, Chrome 12, Firefox 3.6, Firefox 4.0, Safari 5 and IE 8 that it doesn’t affect on them.

Edit: I haven’t tested this on Opera 9 or earlier, but according to other resources, this hack should work on those browsers too.


It’s still possible to write browser-specific hacks but it’s getting more and more complex all the time. In this case we’re using a hack that is actually targeted to WebKit browsers to get them excluded from the media query hack. However, there is no confidence that this hack would work on Opera 12 or next versions of Safari or Chrome would behave as expected.

And big thanks goes to an article CSS Hack or New CSS File for Problematic Browsers? and Is There Any Dedicated CSS Hacks For Safari or Opera?.

JSLint is an extremely useful tool for front-end developers among other code validation. However, getting JSLint to work properly isn’t always as easy as it supposed to be. I ran into problems when I upgraded to Eclipse-based Aptana Studio from major version 2 to beta version 3. In addition, it was very hard to find any proper solutions for my problem.

Differences Between Aptana 3.x and 2.x

The first thing to note is that Aptana Studio 3 doesn’t have similar plugin-based view than Aptana 2. After certain time of unsuccessful googling I figured out that proper keyword isn’t “aptana”, it’s “eclipse”.

In order to install new plugins (or software), you have to do it via Help » Install New Software.

Installing JSLint

Unlike in Aptana Studio 2, version 3 doesn’t have JSLint located as a validator in Aptana’s JavaScript preferences (if I’m running false configuration or doing something really wrong, please comment :)). However, Rockstarapps is offering tools which also includes JSLint.

The problem I had with Rockstarapps was that it doesn’t look very trustworthy (blank site etc). But with little googling I found a resource for installing software at:

After you’ve added Rockstarapps resource to work with, you’ll see a list of tools on a window below, including JSLint. Go ahead and install these.

Using JSLint

After installation I was happy to start using JSLint. I searched for numerous places in order to configure and / or to run JSLint. This was frustrating and I already stopped searching since I still wasn’t feeling too confident about Rockstarapps.

On one day, I accidentially noticed that when I right-clicked on JavaScript file, context menu included an option “Rockstarapps” with sub-option “Validate with JSLint”. That was it – JSLint was finally there, ready for use :).


I’m a kind of person that can be considered as an eternal beginner (or even stupid :p) when configuring applications and tools. But I know there are many others on a very similar position with me (according to my earlier experience and the amount of Stackoverflow + other rant encountered while googling). So I definitely hope this post really helps someone struggling with same problems than I did.

External Resources

Today while traveling with a bus, I came across a bit unexpected behavior when I tried to stop the bus.

Expected Interaction

Briefly, while interacting with something it should at least produce information that a) it can be interacted with, b) it reacts on interaction and c) it confirms the result of an action was like intended. In my case this means that a) there are red stop buttons labeled “stop”, “push”, “press” etc. , b) these buttons reacts physically while pressed and c) I receive a sound and / or visual notification that my action had a reaction.

What I Experienced

This is what actually happened: there was a digital display, which would show a word “stop” when stop button is pressed. This display was empty at the moment, so I pressed one of the stop buttons which reacted normally. But nothing happened. No “stop” on display, no sound. Nothing. It’s quite obvious that either the button is broken or both the display and the sound speaker is broken. But since I remembered hearing a sound notification earlier on the trip, I was convinced that this very button was broken. Since my bus stand was already close I dived onto next button and pressed it. Same resolution: nothing happened. Well, tough luck.. until I suddenly noticed that the display has word “stop” on it. Hooray! Someone else had actually succeeded to perform the simple task I was unable to do. Then again, the “stop” disappeared from the screen. It took about four seconds and the word “stop” was there again. A blinking stop sign? A blinking stop sign with about four second intervals? And the sound notification only on first press (apparently someone else had pressed the button before me). I was just unlucky not to watch the display just while it was actually displaying the text. Practically that meant 15-20 seconds of uncertainty will the bus stop or not.


But the actual question I had in my mind was: what was the added value by having a very slowly blinking stop button? What was the person behind design actually trying to achieve?