Hello, world!

Long time no see! I actually forgot that I have a blog, so it’s about time to write a new post.

Yesterday we had an alumni meet-up with the great colleagues from Luxus, where I used to work in 2010-2012. Many of us have worked quite a long time on the web industry, in both digital agencies and IT companies. It was nice to discuss about things from the past and debate about content manage systems and if modern HTML5, CSS and JS are just a new incarnation of DHTML!

We also talked about blogging, as many of us were active in the first wave of Finnish blogging scene. That made me think it indeed was nice to write new posts regularly for the Blogosphere. For some reason, it has been difficult to create any meaningful content after the breakthrough of social media. I’ve deleted so many drafts I never managed to finish. It has been way too easy to just share an interesting link on Twitter or Facebook instead of writing a proper blog post about it.

So, from now on, it’s less social media (read: Facebook) for me and more posting interesting content.

Should I use flags as icons for languages?

Long answer: How to select a language?

This is one of the most common internationalization issues and out there are many websites, which are doing it wrong. Sometimes the designer doesn’t know, sometimes it’s the client that doesn’t know. So I decided to dig some arguments and answers.

Flags represent locations and nations

To make it simple, flags are symbols for countries, autonomous areas and sometimes nations. They represent a location or a nation, not a language.

Official W3C internationalization best practice:

Flags represent countries, not languages. Numerous countries use the same language as another country, and numerous countries have more than one official language. Flags don’t map onto these permutations.

Countries with more than one official language

Each country may have one or more official languages and each language can be spoken in several different countries. There are countries that don’t have any official languages (e.g. USA) and there are languages that are not official languages anywhere.

Finland has two official languages, Finnish and Swedish. Swedish is the official language in two countries, Sweden and Finland and also in the autonomous province of Åland, which is part of Finland.

Finnish bilingual sites often represent Finnish and Swedish with flags of Finland and Sweden, which at first seems natural. However, Swedish speaking Finns are not Swedes so why should they select their own language with the flag of neighbouring country?

Can you recognize the flag?

Why should American or Australian select English with the Union Jack? Or Brazilian with the flag of Portugal? Peruvian with the flag of Spain? Some Peruvians don’t probably even know what the flag of Spain looks like. Some flags can also be easily confused. Russia, Slovakia and Slovenia have very similar flags, as do Venezuela, Colombia and Ecuador. Chad and Romania have almost identical flags.

Countries without a language named after their homeland

How about Belgians? There are three official languages, Dutch, French and German. Belgian speakers of these languages would have to select the flag of neighbouring country to choose the correct language. In Switzerland there are four official languages and none of them is “the Swiss language”. Romansh language spoken in southern Switzerland doesn’t really have any official flag, unless you consider the Canton of Graubünden flag as one. Good luck getting that look good on icon size.

Offensive? Different dialects?

There may be strong historical reasons, e.g. colonies and wars, why people will get offended if they need to select their own language with the flag of some other country. Some languages don’t even have a home country and sometimes the same language spoken in a different country is actually a different dialect. One example is the difference between US English and UK English. In the US, they spell theater and organize, in the UK they spell theatre and organise. Some languages may have many different local variants.

Let’s take an example

A designer is building a new website for a non-profit organization, that wants to support the development and preservation of languages.

The content will be provided in several different languages, also in small and threatened languages.

On phase one, content will be in Finnish and Swedish. Designer selects Finnish and Swedish flags as icons, because they think it’s the most natural way of representing a language.

However, on phase two, the client wants to add three more languages. Northern Sami, Skolt Sami and Romani. Designer is a little confused, but then googles and finds out that there actually is a Romani flag. For the Sami languages of course Sami flag is the flag of choice. But there are two Sami languages. How to differentiate them with an icon? Our designer just uses the same icon for both languages.

On phase three, the client wants to add Meänkieli and Inari Sami. Now our designer doesn’t know what flag to use. There’s the flag of Tornedalians, but how to differentiate the third Sami language from the two others?

What to do if there will be more Sami languages? What to do if the client wants to have the content in Sign Language or Southern Ostrobothnia dialect? There are no flags for them.

This may not be an everyday example about the problems you will run into when using flags as icons for languages, but it should make clear that using a flag can lead to problems.

How others do it?

Infopankki

Infopankki.fi language navigation screenshot

Infopankki is an information website for immigrants in Finland. Content is in 15 different languages. They are not using flags to represent languages, but local names for the languages instead. Finnish language is written as Suomi and Serbo-Croatian as Srpskohrvatski in the navigation. When you hover the mouse cursor over the language navigation, it shows the name of the language in Finnish, which makes it easier for Finns to recognise the different language options (e.g. in case you need to print the page in Arabic).

BBC

BBC Language Selection screenshot

BBC lists language names both in English and in local script, with some exceptions. Next to Spanish it says Mundo, which means The World. Spanish content is therefore global news content in Spanish.

Next to Portuguese, it says Brasil, which means that the Portuguese content is related to location of Brazil, not Portugal. However, the URL for BBC Brasil is http://www.bbc.co.uk/portuguese. Confusing? Yes.

BBC is mixing the language and the location in the same navigation. Sometimes the website is global in that language, sometimes it’s localized.

Reuters

Reuters language navigation screenshot

Reuters has localized sites instead of languages. When selecting an edition, you are also selecting a location and a language. Latin America and Spain are here two different sites with different content.

Lutron

Lutron language selection screenshot

Lutron uses a combination of location and language. User selects first location and then language. But why are they listing Japan and Asia as a different location and why is US English under Europe? Confusing? Yes.

SBB

SBB language selection screenshot

Swiss railway company SBB takes a little bit different approach and uses two-letter language codes. This method should be avoided, because people may not be familiar with the codes and some of them can be misleading.

Google Translate

Google Translate language selection screenshot

Google Translate uses a simple alphabetical list of languages for target language, while the source language is auto detected by default. The size of this list is very compact, although it contains 66 different languages!

Belgian rail

Belgian rail language selection screenshot

Belgian rail is using a splash screen with four different language selections. Selecting a language is very easy, but in the main site, they are using two-letter country codes, just like SBB. They don’t take much space, but again, all users are not familiar with them.

Ebay

Ebay location selection screenshot

Localized Ebay sites have a navigation, which uses flags to represent a location. This is a correct way to do it, although sometimes there can be issues with the term country, because some countries are not universally recognized as sovereign states and their status is politically controversial (e.g. Taiwan, Palestine).

H&M

H&M region and language selection screenshot

H&M uses a combination of region and language. Some regions have more than one localized sites, while most of them only have one local site. The name of the region is written in English and in available local languages.

Detecting language automatically

There are techniques to detect language automatically and in ideal world this would be the way to do it. User shouldn’t need to select a language.

Too bad that the world is far from ideal and auto detection is very error prone. You could use geolocation to locate the user in Finland and offer Finnish as the default language, but there’s still quite big chance to guess wrong. User can be a Swedish speaker or a foreigner who just happens to be in Finland.

Combination of geolocation and browser language preferences could still be used to narrow down the selection of languages on websites that are localized in several different languages, but a fallback option should always be available. Language selection should be clearly visible on every page on the site.

In this case, the user could get the site in Finnish, because it probably is the correct result in about 90% of the cases, but it certainly is advisable to offer Swedish and English as secondary languages and keep the language selection easily accessible in case where user wants to read the content in some other language.

How you should do it?

There’s no simple answer for this question.

Sometimes the location is more important than the language. Especially web shops are often location based, not language based. Ebay has a Finnish site, but it’s only in Finnish. Swedish site assumes the user is located in Sweden, so Swedish-speaking Finns have to use the Finnish or the international site.

It should be made clear to the user if they are selecting a language, a location or both at the same time.

Language names should be presented in more than one language. Use a combination of main (or active) language of the site together with local script. For English website, languages could be listed in a following way: Finnish / Suomi, Russian / Pусский, Swedish / Svenska.

Avoid two-letter language codes, because they are not familiar to majority of users.

Use alphabetical order. It makes easier to find the correct language and it’s politically neutral.

Place the language selection where it’s easy to find. Site header and footer are common places.

If there are only a few languages, there’s no need to hide them in a drop-down menu. Just print the language names on the page.

For localized websites in different languages, select first a location and offer different languages for selected location if available. All location and language options can also be shown in the same view, as H&M does.

Fear not the length of the list. Google Translate has 66 languages and they all fit perfectly in a small box.

Sources

WordPress admin bug with Chrome

I have MAMP PRO (version 2.1.1) installed on my iMac for local web development projects. I recently installed this blog on my development environment to be able to start developing a new theme. For my surprise, everything seemed to work ok until I logged in with Chrome (version 21.0.1180.89). The whole admin interface exploded.

Wordpress admin bug with Chrome

Looks like the cause of this problem was load-scripts.php file, which was not working correctly. It should output JavaScript code, but the output was just gibberish. This explains the Uncaught SyntaxError: Unexpected token ILLEGAL error.

No idea what was causing this weird problem that didn’t appear with Safari at all. Same problem has been described on WordPress Answers and Stack Overflow.

I tried clearing all browser data with no help. I tried reinstalling WordPress, but it didn’t help either. I disabled WordPress plugins, no help. There was nothing weird in the logs, just alerts about missing favicons. PHP (5.4.4) cache is off, but to be honest, I don’t know enough about Apache and PHP caching or configuration to be able to trace this issue there.

Then I noticed this comment on Stack Overflow:

Well this is really strange. I opened the local site with a “incognito window” of Chrome and the problem dissapeared :S

I gave it a try and, ta-da, problem vanished.

Would be nice to know what was causing it. Something I didn’t try, was to disable all Chrome extensions. A faulty extension could explain why it worked in incognito mode.

Update 10.3.2013

The reason for this bug is most likely AdBlock plugin. The WordPress admin interface will load correctly after disabling AdBlock.

Associated form elements and labels in ASP.NET WebForms

The following checkboxes have one big important difference:

Choose wisely, my friend!


First checkbox is associated with its label, second is not. Try clicking them. Which one is easier to use?

Form elements and labels should always be associated with each other using the for attribute on <label/> tag. On the example above, when user clicks the label, the associated checkbox will be checked or unchecked depending on the current state.

Control association has two important purposes: usability and accessibility. From usability perspective, bigger targets are easier to click (or tap). Therefore label is easier to hit than small checkbox or radio button. From accessibility perspective, visually impaired users will not know what the form element does if there is no associated label. Just add the for attributes and everything works as expected. Simple, huh?

Not always. We have this thing called ASP.NET WebForms.

In ASP.NET WebForms the server side label control <asp:Label/> is a different beast. It will render a <span/> by default. I’ve seen many forms that don’t have any semantic labels, just spans. The reason for this is, that <asp:Label/> needs an AssociatedControlID attribute to create association with a form element. Like this:

<input type="checkbox" id="myCheckbox" value="My checkbox"
    name="checkbox" runat="server" />
<asp:Label ID="myLabel" AssociatedControlID="myCheckbox"
    runat="server" Text="<%$Resources:myCheckboxLabel%>" />

This will render a <label/> tag, which is associated with the correct input with the for attribute.

Another way is to use the good old HTML <label/> tag and get the text for it from <asp:Literal/> server side control, which will not render any HTML. It’s just text. However, there’s one problem.

ASP.NET WebForms will modify the id attributes of server side controls so that they are dynamic and unique. This means that a for attribute we define for the <label/> will not work, because the input id attribute and for attribute do not match on client side.

Instead of myCheckbox the id will be something not-so-pretty like ctl00_body_ctl00_someWrapper_ctl00_myCheckbox, depending on the page structure. The problem can be fixed by using the ClientID property:

<input type="checkbox" ID="myCheckbox" value="My checkbox"
    name="checkbox" runat="server" />
<label for="<%=myCheckbox.ClientID%>">
    <asp:Literal ID="myLiteral" runat="server"
        Text="<%$Resources:myCheckboxLabel%>" />
</label>

This will render the correct for attribute and the form is more usable and accessible.

More info: W3C: Using label elements to associate text labels with form controls

Looking for Leprechauns

It’s been a week since I returned home from Ireland, so maybe it’s time to wrap it up and write something about our trip.

I already wrote during the trip about the Roger Waters concert and how the audience really makes the show and our visit to Ross Castle, but let’s hear more.

TL;DR version: Ash cloud, Dublin, Roger Waters, ghosts in the castle, up north, high cliffs, wind, whiskey, more high cliffs, back home.

Day 1: Dublin

There was some uncertainty whether our flight would ever leave because of the ash cloud from Grímsvötn volcano in Iceland, but it wasn’t really a problem. Our flight just took a little bit longer than normally. We flew the southern route over Netherlands to avoid the ash cloud over Scotland and Northern Ireland. We arrived in Dublin about one hour late. Since my last visit in 2007, they had completed the Terminal 2, which was very spacious, modern and clean. We rented a car from Budget, but not without trouble getting a suitable car with automatic gearbox. We were supposed to get an SUV with automatic gearbox, but we got a Skoda Octavia instead. Good enough. We didn’t register an extra driver, so I didn’t have to drive. I wouldn’t have minded driving on left hand side traffic, but Tuukka was kind enough to take care of the driving alone for the whole week. Thanks.

We had reserved accommodation near Temple Bar for the first night, but a water leakage changed plans and we were directed to King Fisher, where Ana-Marie in the reception took really good care of us. Say hello if you go there.

After finding a pub, that seemed to be an unexpectedly difficult task, and a few pints of Guinness, we headed towards the O2 arena to see The Wall (read more about the gig).

Days 2-3: Ross Castle

On the second day we packed our stuff to car again, bought some food and beverages (read: beer and vodka), and drove towards Ross Castle. We chose to drive smaller roads to avoid road tolls on the motorway and to see the Irish countryside. The roads were narrow, curvy, and sometimes in a very bad shape with a ridiculous 80 km/h speed limit. 50 or 60 km/h would have been more appropriate. We took a wrong turn in many crossroads that didn’t have proper signs and our Nokia N8 navigator application was constantly trying to reroute back to the tolled motorway, despite the “no tolls, no motorways” setting. Otherwise it performed really well, guiding our way to different places.

After many U-turns and small villages, we finally arrived at Ross Castle, that lies between Mountnugent (insert a Ted Nugent joke here) and Finea in County Meath (read more about Ross Castle).

View to Lough Sheelin from Ross Castle tower

View to Lough Sheelin from Ross Castle tower

Ghosts

I said in earlier post that I didn’t hear or see anything weird in Ross Castle, but that’s not everything. I didn’t actually see any ghosts or hear weird noises, but there was an unpleasant feeling of a presence of someone or something, and some mysterious things happened.

Next to my bed was a chair. When I tried to sleep, I always felt that someone’s sitting on that chair. I didn’t see anything, but still I felt that. On the first night I thought I heard some heavy breathing when falling asleep, but it was probably my own. I also thought I heard whispering (similar to the whispering in the jungle in Lost TV series), but that could have been a dream. No surprise I really couldn’t get a good sleep until sunrise.

There was also a door leading to a small bedroom, opposite to our bedroom door, in the end of a corridor. I closed the door, because I didn’t feel comfortable when it was open. A moment later I heard a sound and when I went to investigate, I noticed that the door was open. No one else was near the room but me. I closed it again and thought that maybe the lock was faulty and air flow had pushed it open, but I was wrong. I had to turn the knob to open the door. It didn’t open by pushing. I closed the door and next morning it was again open. On the second day I checked the door every now and then and it stayed closed. Next morning when I woke up, it was again open.

The cleaning woman told us that she once heard a bucket fall down the stairs in the tower and when investigating, the bucket was standing behind a corner, where it couldn’t have rolled on its own.

Janne told that he saw some kind of an orb and had a powerful feeling of ghost’s presence, but we didn’t hear the noises that most of the other visitors (including Ulster Paranormal Society) had reported in the guestbook.

Spooky place, but worth visiting.

Day 4: To north

On fourth day we headed towards Northern Ireland. We didn’t have any idea how to cross the border, but soon we noticed that there really wasn’t a visible border anywhere. Traffic signs just changed a little bit to show miles instead of kilometers and there we were, in the UK.

Our first stop was in Armagh, that seemed to be strictly divided with nationalists and unionists, because there were their flags everywhere. Otherwise it looked just the same as every Irish town. Near Armagh we had a small walk in the Navan Fort with astonishing 360° open view over the green fields.

After Armagh, we drove via Coleraine to Bushmills, where we spent our fourth night. Me and Tuukka walked to Giant’s Causeway in the evening and barely got back to the main road until nightfall.

Day 5: Giant’s Causeway, Bushmills distillery, Carrick-a-Rede and back to south

In the morning we went again to Giant’s Causeway. We walked around the basaltic columns and climbed to the hills and enjoyed the fresh Atlantic air, although the wind was quite strong. There were signs of recent landslides, so it was quite dangerous to go there in twilight.

When heavy rain fell on us, we decided to leave and head to Carrick-a-Rede, which is a small rope bridge leading to a small Carrick Island near Giant’s Causeway. If there’s something special to see, it’s the view (surprise, surprise). You could even see a distant mountain top on Islay, that is located about 65 km north from the northern coast. I hope to get there some day to taste the smoky and peaty Scotch whiskys in authentic environment. Strong wind made the crossing of the bridge a little bit hard. The personnel measured the wind speed and it was 31 something. Typical, they said. Probably knots, because 31 m/s would have been impossible to cross or even be outside without a shelter.

View from Carrick Island

View from Carrick Island

Next stop was the Bushmills distillery store, where I bought two bottles of Irish whiskey and some other souvenirs.

Then we headed southwest to Donegal via Londonderry (or Derry, whatever). Right before Londonderry there was a brilliant view over Lough Foyle.

The roads on the UK side were in much better shape and I got a similar feeling when going from Finland to Sweden. Everything’s cleaner and just seems to be better. I don’t really want to pick a political side, because the conflict there isn’t my war to fight, but it seems that the UK economy with Pound sterling is much better for Northern Ireland than Euro is for The Republic. Irish people seemed to be worried about the economy and high unemployment. Small towns are dying, because there are no jobs and young, educated people are moving to major cities and abroad. Unemployed people get too much benefits without doing anything and it’s not profitable to get a low pay job. Sounds similar to situation in Finland, except the huge drug problem and high crime rate that trouble Ireland. These facts make it highly irrelevant to argue about unions and republics. There are more important things to worry about.

On the evening of day 5 we went out in Donegal to see the Champion’s league final in a pub. We found ourselves in a local Manchester United fan pub that was filled with local football fanatics. After a few pints of Smithwick’s (if you know where to get Smithwick’s in Finland, please tell me) we thought that it was best to leave, because the atmosphere was becoming more hostile and we were sitting in the lower section of the pub that was filled with Barcelona supporters.

Day 6: Slieve League

On the day 6 we drove past Killybegs and Kilcar to Slieve League, that is the highest sea cliff in Europe. The wind was very strong and it was sometimes difficult to stay on your feet. Even stronger than on Carrick-a-Rede. I climbed quite high on the mountain in wet, grassy terrain, but didn’t have enough courage to go on the other side of the top, because my shoes really weren’t good enough for walking there. Again, the scenery was breathtaking and even the Sun was shining. No rain at all. Splendid.

Slieve League

Slieve League

Day 7: Back to Dublin

The last day was spent driving back to Dublin via Drumcliff, Sligo, Carrick-on-Shannon and Maynooth. I was planning to buy a bodhrán, but I couldn’t find one that wasn’t made in China. I’ll probably have to order one from Waltons. After dinner, I was really tired and slept a couple of hours in the car.

Our last night flowed really slowly in the Dublin Airport where we tried to get some sleep in couches. I managed to get two hours of sleep until we were told that we have to leave for cleaning. A little later the check-in desks opened and we dropped our baggage there and went through the security check. After a few hours of wandering in souvenir shops we were heading home, asleep on the plane.

Summary: Great trip. Fun, fun, fun. Can’t wait for the next one.

Post Scriptum

How long does it take to get used to right hand side traffic again?

Ross Castle hospitality

Ross Castle, in the village of Ross, co Meath, a couple hours of drive from Dublin, is a fantastic opportunity to enjoy Irish countryside and hospitality. We spent two nights in this cozy small castle and will certainly return someday.

The building consists of old tower that was originally built in 16th century and rebuilt after destruction in 19th century, and a side wing building that was built in 1960′s on the foundings of older building. One part of the buildings foundations used to be a chapel. The place is filled with antiques, stuffed animals and old books. Definitely worth driving through narrow roads and small villages.

Guestbook is filled with stories from very satisfied visitors and of course, ghost stories.

Many visitors have heard weird noises, knocking on the front door, heavy breathing, footsteps on tower staircase, toilets flushing without anyone being there, seen childrens cradle rocking, glowing orbs and a spirit of a young woman.

I didn’t see or hear anything but a Canadian couple that slept in the tower told us that they could hear lots of ghost noises during the night. This place itself can easily give the creeps to even the most sceptic people; not in a negative way but as an exciting experience in front of fireplace, telling ghost stories to each other.

Food is excellent and the coffee is probably the best in Ireland. The host couple is very nice and we truly enjoyed their hospitality.

I certainly recommend visiting Ross Castle. Spend a night or two and relax.

Audience makes the show

Sometimes when a foreign superstar comes to Finland to perform, they tell in an interview, that Finnish audience is the best in the world.

Of course they are just polite and want to make their audience feel that they really are the best.

My opinion is that Finnish audience usually is very quiet and stiff. No one sings along. Only a few wave their hands. Sometimes you can even see a moshpit. Of course there are exceptions and sometimes even Finnish ultra shy audience will blow the place up.

Today I was again reminded that it really matters how the audience takes part in the show. I saw Roger Waters performing Pink Floyd’s The Wall in the O2 Arena in Dublin, Ireland.

I was really amazed how every freaking man and woman was singing and shouting all the time from the very beginning to the end. The show itself was great enough to get on your top 3 list (it got to second place after Porcupine Tree in Ilosaarirock festival in 2007 on my list), but the audience really made it an experience you will never forget. Thank you Dublin. It was awesome.

Unhappy with Twenty Ten

I have myself been reading blogs and other interesting websites I follow with a feed reader application for many years. Currently I’m using Reeder on iPhone and Mac (beta version available). I rarely see the look and feel of websites, unless the RSS feed only has the excerpt of a post, or if I want to write a comment.

There are some blogs that always seem to have a new fresh layout when I visit them, but most people (including me) are too busy or lazy to create a new layout every month. When you find a layout that works for you, it’s easy to stick with it and never update.

I am a little bit unhappy with the looks of my blog. I’m currently using the default WordPress theme, called Twenty Ten, without any major customizations. I know most of my readers are using a feed reader application, e.g. Google Reader, so the looks really should not matter, because they never see what my blog looks like. They just see the content. But there is some traffic coming from search engines, Twitter and Facebook, and they will see the layout.

This layout is not personal. It’s not mine. I have to create a new one.

The pool of creativity and blogging

Today, I saw a presentation about blogging and gained some new insights about a blog as a tool in leveraging your business and delivering content to your readers and the online world. That presentation reminded me that I still have this blog and I really should write more actively.

When I first started blogging in 2003 (sorry, those posts are not available anymore), a little bit over eight years ago, only a few people new what a blog was and many were thinking why someone would like to present his or her own opinions publicly on the Internet. My first posts were mostly about trying to quit smoking, studying, and other stuff that belonged to the haircut category of non-interesting topics that happen in everyday life.

Since then, I’ve written about music, politics, computers, studying, latest news and many other topics, including the haircut, but my pen keyboard is really not so sharp anymore.

I’ve often wondered where does the energy go that earlier gave me the drive to write and present my thoughts. Sometimes I feel that a human being has a limited capacity of creativity. Consider it as a pool of wonderful thoughts and ideas. Every time we tweet, comment on a Facebook post, chat on IRC for hours, play online games, watch soap operas on TV, even listen to music or just hit continuously the refresh button on an imageboard or a kitten pic site like mindless zombies, this pool is being drained into the void.

When we stop and enjoy the silence, the pool starts to fill again. If you’ve ever tried to solve a complex problem in a noisy office environment, you know, that just going out for a moment, maybe to have a cigarette (I actually quit years ago) or to breath fresh air, or in any other way sealing the disturbing factors away from your mind will help you to fill the pool again and find a solution to your problem.

Blogging is creative work and your pool has to be filled with ideas that help to create the post for your readers. When your pool is drained, you cannot create anything. I’ve been draining my pool with all kinds of useless activities, but also exhausting myself with work, studies and all the hobbies I have. Sometimes you just need to rest and then light the spark again.

One of the insights of todays presentation was that you just cannot fake passion. Blogging is like sex. You have to do it for passion, otherwise it is fake and every reader will know it.

I believe I will find my passion for writing again, because I really like writing.