Web Typography

Posted on January 26, 2013 by hukl

There is no reason nor excuse why websites should still get away with bad typography and therefore bad readability. Applying some basic rules and using proper fonts can yield a big improvement without much work.

For me typography is about aesthetics and readability at the same time. It is a form of art as letters alone, without other abstract shapes involved, can form a design. The fonts themselves can be considered art as they exist in millions of different shapes and styles. Some of the most recognized brands in the world use only letters for their logos. I’ve seen people fall in love with a certain typeface or even just a single letter, including myself.

But there is also a very functional approach to typography. »Form follows function« is a famous quote by the american sculptor Horatio Greenough which can also be applied to text and readability. Reading a book or a long article on the web has to be as efficient and pleasant to the eye as possible. If you can read a long text very fast and almost effortless it is an indicator for good typography. If you have to focus on the letters and words, if you accidentally skip lines or read the same line twice, if your eyes get tired while reading even a short paragraph, you are experiencing bad typography.

Fortunately, it is not hard to achieve good readability as all the essential knowledge that was acquired in the past centuries has been distilled to a countless number of books and articles on the web. Yet it is shocking to see how many books, articles and websites with bad typography are still being published. In the web this is easy to fix, there is no excuse. Edit and upload the stylesheet, reload and review the effect of your changes. In CSS you don’t have all the tools and tricks available like in desktop publishing software but it is absolutely sufficient. Lets look at some basic rules, fonts and tools to improve web typography.

Structure, Length, Line Height and Size

Structure is about breaking a long piece of text into smaller parts by various means. It is very annoying to read a 5000 words article in one block so the first step is to create paragraphs that are neither to long nor to short and which group sementic blocks of content together. This sounds very obvious but I see many bad examples of this on the web and its easy to fix. Using commas, quotation marks, headlines, sub headlines, block quotes is also helpful for structuring the text for the readers eye. The distance of two structural elements should be greater than the line hight. When experimenting, rather use more distance than less. If things are looking to narrow, tight, crowded – try more distance between the elements.

The lines of the paragraphs should not be too long nor too short. Usually the rule of thumb is to have between 50 and 80 characters per line but this is not typography law. Pick a good book from your bookshelf or a website which you remember being pleasant to read and count the characters on a couple of lines. They will be around those numbers. For short / special paragraphs of text, longer and shorter lines are acceptable.

The wrong line height can seriously harm the readability of your text. If the lines are too narrow you will skip lines or start reading the same line twice. Basically, you lose track of the lines which you’ve just read and can’t find the next one. If the lines are too far apart, the same happens and the eyes will have to travel a longer distance which makes them tired more easily. For paragraphs you can start using a line height of x 1.5. If your font size is 16px, a line height of 24px is a good first approximation. From there, fine tune as required. Headlines usually need less line height.

There is no definite rule which font size is the correct one for which application. The best way to find a good font size for long text, regardless if its for print or screen, is to create three variations of font size, of the same text, in the desired layout and putting them side by side. Now you read the same paragraph on all three variations, in the typical reading position of the given medium, one after another and your eyes will tell you which size is better in terms of readability. Like I said in the beginning, the faster and effortless you can read it, the better it is. Obviously this is highly subjective which is why you should also ask a friend, your mum or whoever else is around, to do the same thing and let them tell you which they think is best. This can be a decision where you have to compromise between aesthetics and readability.

Text alignment

Exactly seven years ago I wrote a blog post called »Typography and the Web« which was mostly about text alignment. In the past seven years nothing much changed here which is why I will make this short: Do not use justified text for paragraphs. Please read my old blog post if you want a more elaborate answer. Just use the alignment which is natural to your language, which means for all languages that are read from left to right: use left aligned text.

Choosing the right font for the job

This is something you can decide on your own. Serif fonts are generally a good choice for long texts because the serifs will make it easier to read as it is easier for the eyes to distinguish the characters and follow them along a line. If you don’t want a serif font for whatever reason, this is not a problem though. There are many, very good and readable sans serif fonts that are absolutely suitable for long texts.

Times New Roman, Georgia, Verdana, Helvetica, Arial, Courier – those fonts dominated the web from the late 1990’s up until the early 21st century. They were preinstalled on Macs and PCs and could be used anywhere without paying royalties. The font distributors would not allow people to host a font on their own web server, to use them on their own website, because anybody could then just download them. Those license / royalty issues and an elaborate debate about different font formats prevented other fonts to be used on the web, but luckily those days are over. The format debate came to a conclusion and the font distributors found licensing models that would allow people to finally chose any font they want. You can buy web fonts from almost any big font foundry directly but I would also recommend to check out myfonts.com which is a web shop for fonts with a large library from multiple foundries.

There are two models to achieve font individuality. The first one is that you find a font you like and buy it. Then you put it on your web server and reference it in your stylesheet. It gives you full control, its straight forward but it is also a bit less flexible if you haven’t decided yet which fonts you like best.

The other option is to use a web service which is hosting the fonts for you. You pay a monthly fee and can try all the fonts available from the given web service. Usually these services offer free accounts which are limited by the size of the font library. Nonetheless this is way more flexible than the self hosted option described above. To use them you have to sign up, embed some code in your website and then you can use their fonts. It could not be simpler than that. The downside is that you now rely on a 3rd party service. If you want access to all the fonts, you have to pay a monthly/yearly fee. Its usually not expensive but definitely more than just paying once. I encourage you to try it out and see if it works for you.

The most prominent font web service is Typekit which is owned by adobe. It is widely used and has a very convenient interface. Another alternative is FontDeck which I haven’t used personally but is worth checking out. Lastly there is Google Web Fonts which does the same thing but completely for free. For free also means that it is really hard to find a good quality font there – but it is not impossible and especially when you are starting to experiment it might be just right for you.

Now seriously, how to find the right font?

With millions of available fonts it is easy to get completely lost. I caught myself countless times browsing through the available fonts at myfonts.com or any other big foundry. The problem is that they are presented out of context which makes it hard to judge. The font may looks pretty on myfonts.com but once you buy it and use it on your website it may look completely inappropriate. Usually you can enter some custom text and adjust the font size but still, you will pick the wrong font this way many times.

If you have little experience with typography its best to go by something you already know. Keep your eyes open and if you see a font that you really like in a similar context, find out what it is and try it. This is where services like typekit shine. Another option is to look for »Best fonts of 20xx«, »Most popular fonts of 20xx« or similar collections on myfonts.com. That can be a good starting point to find a good font for yourself. Myfonts also has a tool on their website which helps you to identify fonts by uploading a picture. Its called »What The Font!« and I’ve used it many times to figure out the name of a font which I liked.

In the end I would approach the search for a font like this: Lets say you have a weblog which has a good amount of text. First focus on finding a font for the content. Look for readability rather than aesthetics. Some fonts have super nice character shapes but in a paragraph they look just too quirky and odd. Once you have a good font for the paragraphs you can start looking for a headline font. Either its the same, just bold or black. Maybe even in another style like sans serif, if the text font was serif. Or a completely different font that can focus less on readability. If you want you can have yet another font for the interface elements on your weblog.

The Ultimate Webfont Playground

There is yet another web service for evaluating different fonts on the web with different sizes, line heights etc. The service is called Typecast and I like it a lot! Once you sign up you can create new projects which are based on common website use cases like blogs, news sites etc. In this project you can compose text with any font in their extensive library, play with font sizes, line heights, colors, styles etc. You can edit everything live and in place. It is so extremely nice to work with that I have to mention it in this article. For me this was the most helpful tool to decide on the various aspects of typography of this blog. The service offers much more but it has a downside – it is not for free. Again I recommend that you create a trial account and see for yourself what they have to offer. If I was still earning my money with graphic design I would probably use this service on a daily basis.

What About Free Fonts?

The short answer is: There is nothing wrong with free fonts, go ahead and use them. The long answer is that most free fonts are not as good as commercial fonts. It is extremely hard to create a font where all the distances between all the letter combinations are optimal, where all characters fit visually together, which are easily readable in many different situations, which include non-latin characters for foreign languages which look good as well and so on and so forth. Its a work of months, sometimes even years. This is why some fonts cost money, because people spent significant amounts of their lifetime to create them. It is their job, their profession. Now free fonts can work for some use cases super well but usually they just lack a certain quality compared to those commercial fonts. If you pay attention and invest a bit of time you can find free fonts which are so good you wont ever notice a difference.

Often you can find free versions of commercial fonts as free samples. Usually it is just the regular version and you have to pay for the italic or bold one. But still, if you get a commercial text font for free this is perfect. On myfonts.com you can get these free sample fonts. In fact I got the font for my blog as a free sample from myfonts.com and then later I bought the other styles, then I bought the sans serif version, then some more variations … but you don’t have to go that route and just stick with the free version.

Conclusion

With the basic rules in the first part of this article, it should be possible for everyone to evaluate their own website and improve the readability and appearance if necessary. Question everything, inform friends, website owners if you think their typography needs improvements.

Take a look at the tools that can help you improve and find the right fonts for the job.

If you find spelling mistakes and other errors please let me know. I’m looking forward to your feedback and questions!

How to Build a Guitar Speaker Cabinet

Posted on January 9, 2013 by hukl

The Plan

As you might know I’m really into guitars and guitar equipment right now. In my recent holidays I wanted to tinker a little bit and so I decided to build my own 1×12 guitar speaker cabinet. One day I started to scribble a cabinet on a piece of paper that was flying around and half an hour later the plan was laid out. I looked up an existing speaker enclosure to get the proportions right and did not bother to spend much time on speaker cabinet size calculations, which you should do if you plan to build HiFi speakers.

If you search around the web there are certain people who insist you have to do the Thiele/Small calculations to get proper results but I also found an article by one of the most popular speaker vendors claiming that this is only really relevant for HiFi. You can find this article here on the Celestion Website.

There are basically two types of guitar speaker cabinets: closed/sealed and open/vented. Again if you search on the web to know what the differences are you will find tons of information and as usual, sometimes highly contradicting opinions. The biggest difference is how the sound is distributed. An open cabinet will also emit sound through the back and from that alone you get a room filling sound experience even on low volumes. Closed cabinets are more directional and usually put more emphasis on the mid and low frequencies. There is a really exhaustive and informative article on guitarplayer.com about guitar speaker cabinets which includes a very good description of the different sonic properties. For my cabinet I have decided to make the back plate out of three parts so I can have it open or closed and see what works best. When you build a closed cabinet you also have to seal the enclosure airtight as the pressure inside the cab will contribute to the sonic properties.

There is another elaborate article on Seymour Duncans website which I can recommend for further studies.

Materials

Most of the speaker cabs out there are build from multiplexed birch plywood and so I bought 18mm plywood and had the store (Modulor) where I bought it cut for me to the specified sizes. Birch plywood is very inflexible and solid and whatever material you might choose, always make sure that it is not too soft or prone to vibration. Another common and sometimes cheaper material is MDF.

For assembly you have to figure out how to make really stable wood joints. There are simple and complex approaches and I went for a rather simple but stable one which can be seen on the next picture. Its basically adding an inner skeleton and connecting the different pieces of wood with that, rather than just screwing the pieces together directly.

In the next step I had to saw a hole for the speaker and I did it with a simple jigsaw and a special blade for making round cuts. The hole was ok in the end but it did not have to be perfect as I intended to cover the speaker for protection anyway.

The speaker is a Celestion Greenback G12M with 25 Watts and 8 Ohm. and it is screwed directly onto the plywood. The speaker vendors usually give you a cut hole diameter and you should rather make it a few millimeters smaller than bigger to have enough room for the screws in the wood.

In the last picture you can see that the inner joints do not sit perfectly on top of each other and without the front and back plate the whole thing was not super stable but once I screwed in the front plate and thereby connecting all parts with another, it became so solid it felt like it was made from one piece.

Once I had the cab together some additional hardware was necessary to complete it: A handle, an audio input jack, a cable, insulation wool to reduce echoes inside the cab, a front grill for protection and rubber feet. Luckily there are plenty of web stores that have this kind of amp hardware in stock and so once I got the stuff I finalized the cab.

This is what it looks like in good quality pictures:

I’m not super exited about the grill and in retrospect I should have probably used regular grill cloth but for now it serves the purpose of protecting the speaker.

Apart from the handle I only used wood screws. I predrilled the outer plywood with a small drill so it would not burst when I screwed in the bigger wood screws. For the handle I drilled holes and used screws with big washers and a self locking nut so it would not become loose again.

After playing around for a little bit I have decided to leave it open. I like the sound much better. The whole thing took about a week with getting all the materials together and the actual construction work. It was a lot of fun and now I have a 12″ speaker cabinet that sounds awesome … and is quite heavy.

To give you an impression of the sound I recorded a basic loop with a Shure SM57 from three different positions. The center of the speaker, the edge of the speaker and the open back of the cabinet. The center is expected to bring out the mid frequencies, the edge includes more low frequencies and less bite in the mid range and the open back is mostly low end frequencies. After the three positions I combined the center and the back track so you can see what kind of options you have with an open cabinet. In the very end I recorded the same loop through my small, closed 8″ Orange cab to give you some point of reference. Notice though that the sound is very different because of the different speaker sizes and closed vs. open cabinet. I used a Telecaster and the Orange Micro Terror in a somewhat clean setting.

[soundcloud url=”http://api.soundcloud.com/tracks/75836795″ params=”” width=” 100%” height=”166″ iframe=”true” /]

There is also a flickr set with all the pictures.

UPDATE

I made a video where I demo the Orange Micro Terror using this cabinet – check it out here

Also check out my blog post on how to build an electric guitar

Spicy Vegetable Soup

Posted on September 19, 2012 by hukl

Ingredients:

(this recipe works also well as a vegetarian version)

Leek
Carrot
Red Onion
Zucchini
Chicken Breast Filet
Beef Stock (you can use a bouillon cube)
Soup Noodles
Butter
Chilli
Salt
Pepper

Instructions

Cut all the vegetables and the meat. You kind of have to guess the amounts to use since vegetables come in so many varying sizes. I have used 1 big zucchini, 4 really small carrots, 1/2 red onion and 3 regular leeks. I think the pictures show the amounts quite well.

Leek

Carrot

Zucchini

Red Onion

Now put a big chunk of butter in the pot and let it melt for a few moments

Butter

Then add all the vegetables, use medium heat and a lid and let the vegetable get acquainted with the butter for about 10 minutes. In the meantime get some water (I suggest 1.5l) boiling.

After 10 minutes remove the lid and add the water. Use a little more water than it would need to just cover the vegetables with it. Now add some noodles. In the first attempt use half of a coffee or teacup with soup noodles. Also add salt, pepper, the bouillon cube / beef stock and chili to spice it up.

If you not use enough water, the soup is not really a soup but a pile of steaming vegetables, if you use too much water it will not taste so awesome. Take care, I know that things like these are whats hard about cooking but add enough to cover the vegetables and then some more to make it look like a soup. Usually thats less water than was needed to cover the vegetables.

All in the Pot

Now this will take another 10 minutes to be ready. In the meantime put the meat in a pan and use medium heat, salt, pepper, a little bit of chili to prepare it.

Soup and Meat

Soup and Meat Done

The soup is ready whenever the noodles in the soup are ready. The meat you can prepare as you like. Now put everything together on a plate and it should look like this:

Final Image of the Soup

Buon appetito!

Guitar equipment and learning to play

Posted on September 3, 2012 by hukl

Preface

I like guitar music a lot and for a long time I wanted to be able to play the guitar myself. Way too late I finally decided to just buy one and try it. A friend of mine who is an super experienced guitar player helped me to get started and so I bought a cheap Jack & Danny’s Les Paul replica which was about 150 Euros. My friend gave me a small amp as well and I was ready to go.

Guitar with new pickups and new amp

First Steps

My friend also agreed to give me guitar lessons and so we met once a week and I made some good progress but in the end we couldn’t continue to do it on a regular basis. Then I got a new job and soon I would forget about this whole guitar business. The books I had were way too boring and the supplementary CDs were too annoying. Long story short, my guitar caught a lot of dust.

New Pickups

Many months later I picked up some motivation again after listening to someone playing the ukulele. What caught me in this moment was the realization that it was possible to play songs and have fun without being super skilled. I totally forgot about that.

A day later I dusted off my guitar, ordered new strings and browsed though some music store websites. Along the way I stumbled upon tuning parts where the music stores would sell pickups, bridges and all kinds of original and third party accessories. Inspired by the vast amount of available parts the nerd in me was thinking about buying original Gibson pickups to improve my cheap guitar and so, after two days of reading blog posts and watching youtube videos about changing pickups and its potential benefits, I just ordered them. I got the Gibson 490R and a 498T which can be found in this combination on a lot of expensive Gibson guitars.

When they arrived I started to disassemble my guitar – and it didn’t look pretty. The guitar was made of the cheapest of woods and the soldering was so sloppy that I would have loved to rip everything apart and start from scratch.

Open Guitar

In the end I focussed on the pickups since it was not clear whether it would work at all. The old pickups just had two wires while the new ones had four. This was expected though after studying plenty of blog posts on that topic. Luckily not only the music store where I bought them had a guide on replacing the pickups but there are many other resources available online as well. One popular producer of third party pickups is Seymour Duncan and on their website they have example circuits for almost any guitar configuration you could think of. The wire color is different from vendor to vendor but in principle the wiring is the same and the one from Seymour Duncan was the best one I found. Here is the wiring schema for typical Les Paul models.

After fighting with removing the old cables and attaching the new ones for a while I hooked it up to my amp and was more than happy to find out that it actually worked.

Now before taking my guitar apart I have also recorded some simple chord progressions to be able to compare the result afterwards and so I recorded the same chords with the new pickups.

The result? Well, immediately the sound appeared lot richer, more saturated and bold. That was my first impression. When I compared the recordings I saw that the output level of the new pickups was much higher – almost twice as high. Usually I had the volume controls of my guitar all the way up to 10, with the new pickups I had to set them to 6 or 7 to get to a similar output level.

When I checked again the pickup descriptions the for the 498T said that it was actually a high output version »for hard rock applications which easily overdrives your amplifier with a beefy, sizzling output that will give your guitar new power and presence«. The 490R one says: »… these pickups give a full, rich tonal response with a thick, biting rock tone with excellent definition and harmonics«. Marketing language aside, since I first listened how they sound and afterwards read the description, I was recognizing some of those attributes in the sound I heard.

After adjusting the volume it was still a different sound. The old ones sounded really bright which gave a nice clean sound but the new ones sound more balanced more powerful. The recording from my computer can’t really show that. You can see the different output levels but the sound difference becomes more obvious when hooked up to a real amp instead of software.

If you have a cheap guitar that sounds crappy you might be gaining something from changing the pickups as well.

Anyway, after this success my motivation levels increased even more.

The new Amp

In fact this gadget driven motivation approach also made me buy a new amp. The old one I had from my friend was an old Squier 15W without any fancy features. When I was looking for a new and not super expensive practice amp the decision boiled down to a Fender Mustang I and a Vox VT20+ which are both so called modeling amps. That means that a lot of different amp models and effects are built into the amp and you get to play a lot of different styles with them. The Fender Mustang can be even hooked up to your computer via USB to model your individual sound with virtual effect pedals etc which can then be uploaded back onto the amp. The Vox has a fixed set of amp models and effects which you can combine at your will with the amp controls. The cool feature of the Vox amp is that they have build a real tube into the power section to make it sound more like a tube amp than a pure transistor based amp like the Fender.

After a lot more blog posts, youtube reviews and comparisons I decided to buy the Vox. Mostly because I liked the sound a lot better but this is really dependent on your personal taste. Both are really great practice amps that you can have a lot of fun with.

The tuner

The last piece of equipment I got was a new tuner. Before I tuned my guitar with my iPhone or the computer but somehow I always had the impression it was not tuned properly. The new amp has a tuner built in but the experience is kind of binary as it only as three LEDs for indicating the tuning. Well it also lights up LEDs for each string but I wanted something more precise. The tuner I bought is the Korg Aw-2G Bk which has a piezo sensor that picks up the vibrations of the instrument. With this I do not need to connect the guitar to any device for tuning and it works great for the cheap acoustic guitar I have sitting around as well.

Learning to play the guitar in the 21st century

Now that I had this awesome new gear the question remained how I would actually improve my skills. I knew that the teacher concept did not really work for me because of my schedule and because sometimes one hour was too less and sometimes I didn’t want to drive around the city with my guitar. My pace of learning is highly varying and a fixed teacher schedule just didn’t feel right for me. The books, as I have mentioned were to boring and uninspiring and so I thought:

»Hey its the 21st century! Aren’t there any cool website by now with lots of videos and online lessons?«

A quick round of searching the web revealed a couple of those services of which I choses jamplay.com. They have videos in great quality, a lot of teachers and a lot of lessons varying from basics, specific style lessons, technique and lessons about recording, song writing etc. The great part about the multiple teachers is that if you don’t like one particular teacher, there are still 10 other ones having lessons for the same skill set or style. Its about 15 dollars a month and you get to watch as many videos as you want and they also work on an iPad.

Now almost every evening I spend 1-2 hours watching videos and practicing. For me it is the perfect setup and I have the feeling that I learn a lot of stuff quickly.

Sooner or later I will also buy a better guitar, that is more pleasant to play and which uses more quality parts but for now I’m good. I’m already saving up my flattr money but it will take a while until I get there.

Finally I want to highlight thomann.de as a good example for online music equipment stores. They have extensive guides about exchanging pickups, choosing a proper amp, recording equipment and a lot of other topics. They have sound examples for guitars and amps! So if you consider new gear go to their site to get advice and sound examples.

Why Erlang?

Posted on April 22, 2012 by hukl

The chance that you are reading this blog post on a device with a multicore cpu is increasing on a daily basis which is why everybody is talking about concurrency now. Concurrency for our web applications and API backends means that we’d like our htop to look like this:

htop screenshot

I’ve recently been to a really awesome ruby conference and three or four talks out of 21 were about concurrency. The ruby community is quite open and so many possibilities were discussed: Using threads, using different ruby runtimes to circumvent the GIL, using more processes, using the actor model via libraries like Celluloid or even using Akka through JRuby.

While the actor model seems to be a good fit for building concurrent network applications it often suffers from problems if the runtime it is implemented in has no “native” support for it. There are implementations for Ruby, Python and Java but they all have to jump through several hoops to get the job done and are not necessarily yielding the best performance. This is one of many reasons why Erlang would be a much better choice but first, lets talk about this actor model for a bit to understand why it is such a good fit.

The Actor Model

There is this nice quote from wikipedia which offers a first glimpse:

»The Actor model adopts the philosophy that everything is an actor. This is similar to the everything is an object philosophy used by some object-oriented programming languages, but differs in that object-oriented software is typically executed sequentially, while the Actor model is inherently concurrent.«

While there are some resemblances between actors and objects, like modularity, encapsulation and message passing, the main feature of actors is that they are being run at the same time.

Strictly using message passing for sharing state with other actors which run in parallel enables asynchronous communication, meaning that the sender does not have to wait for a response from the receiver.

Another big difference to the OOP world is that in the actor model there is no global state and therefore also no shared memory between actors. In languages like Java, Ruby and Python there is always global state and threads have access to shared memory. This is often a cause for trouble in the form of deadlocks or race conditions and is maybe the biggest pain of using threads.

In the actor model each actor has its own internal state and is only sharing it via messages. Thereby it is acting as a serializer for access to its state and effectively preventing deadlocks and race conditions.

It might be also worth noting that the actor model especially makes sense for functional languages as they embrace the concept of immutable data.

There is a lot more to read about actors but I would say these are the most important bits to know. In general the actor model makes designing and implementing concurrent applications a lot easier. Compared to threads there is no need of managing the access to information with mutexes, locks or semaphores or other complex abstractions.

Ok, so what about Erlang?

First let me tell you that for years I have been a passionate Ruby developer. I really like the language and community a lot. From time to time though I felt I was hitting some invisible walls when it came to network applications like web apps, web servers, proxies etc. Basically everything that had to handle a lot of requests and/or did non trivial tasks.

I had Erlang on my radar for quite some time but coming from my ivory tower with a ruby rooftop it took several attempts to convince me that it was worth a try. Conceptually it already made a lot of sense to me and I’m sure that most people who read about Erlang will agree. I have to admit that I was mostly appalled by the weird syntax so much that it stopped me from trying. This was a big mistake though and a large part of my motivation to write this blog post is about telling you that you should try out Erlang as soon as possible.

Anyway, first lets describe Erlang in one line:

»Erlang is a functional language, implementing the actor model for concurrency.«

Its a language which was developed by Ericsson for their carrier grade telecom switches and the design goals were to create a language that would allow to design fault tolerant, highly available and concurrently running systems.

You can read all about it on wikipedia or this awesome website: http://learnyousomeerlang.com/ – They do a much better job describing the language.

Case study for Erlang at Wooga

This post is about getting you to try it and I will do that by telling a story about Erlang at Wooga.

Wooga makes social games with millions of daily active users. The games constantly talk to the servers to transform and persist the users game state. Some of our game backends are developed in Ruby and that worked really well so far. Ruby, like I said, is a really nice programming language and although it is certainly not the fastest, you can squeeze a lot of performance out of it when you know what you are doing.

Our biggest game in terms of users, revenue and backend complexity runs on about 80 to 200 application servers though. It handles about 5000-7000 requests per second and almost all of them are changing the game state of the user. I’d say the amount of application servers is still reasonable for the amount of load but its certainly not the most impressive number.

Then some day a new backend had to be built for a game with similar complexity and my colleague Paolo suggested to use Erlang this time as he thought it would be a really great fit for us. We hired an experienced Erlang developer (Knut) and together they implemented the backend. By now this game has approximately 50% of the users of the other game and the number of application servers they need is: 1!

They run the backend on two or three servers for redundancy purposes but it could perfectly run on one. Even if it would actually need four it would still be drastically more efficient and performant that the other backend(s).

Now of course they also knew about all the mistakes we have made in previous games and its not Erlang alone that gave them so much better performance but rather they could implement the backend in a unique way which is really easy with the actor model and rather hard everywhere else.

Basically they’ve build a stateful web server which means that each user who is playing the game is represented by an actor inside of the Erlang VM. The user starts playing and an actor with the users game state is spawned. All subsequent requests for the time the user is playing are going directly to this actor. Since the game state is held in the actors own memory all requests, which would otherwise hit the database, can be processed and answered extremely quickly.

If the actor crashes, all the other actors are not being harmed since there is no shared / global state. When the user stops playing, the actor will save the game state to a persistent data store and terminate making it easy for the garbage collection. Since the data is immutable it is always possible to revert to the game state before the transformation started in case something goes wrong.

It is really awesome and there is a lot more to tell about it. Fortunately Knut and Paolo have spoken on a couple of conferences about it and shared their slides so you can get some more insights:

* http://www.slideshare.net/wooga/erlang-factory-sanfran
* http://www.slideshare.net/hungryblank/getting-real-with-erlang

More Erlang at Wooga

After Paolo’s and Knut’s success the Erlang virus spread inside of the company. We have started new game backends in Erlang and built smaller additional services with it. Personally I can confirm that the more you learn about Erlang the more it makes sense and feels right. It made me even feel a little bit sorry for those at the Ruby conference who were struggling with different runtimes and libraries to introduce the level of concurrency and ease of development that Erlang delivers in one package. A package that has been in production use for more than 20 years.

The hard part of learning new languages is to find a reasonably sized project to start with. Learning just by reading books is always slow as you forget most of what you read when you don’t play around with it. Apart from the weird syntax which I don’t find that weird anymore, not having an actual project to try Erlang was the biggest show stopper for me. So I encourage you to pick a small little project and play around with Erlang. I think you will not regret it.

I hope I will find the time for a follow up blog post about how I learned Erlang and about getting started in it soon. In the meantime go to learnyousomeerlang.com and get started on your own. Trust me – this site is better than any book about Erlang which you can buy right now.

PS: Thanks to Elise Huard for proof reading! If you have feedback, drawings of an ivory tower with a ruby rooftop to make this blog post more colorful or any other contributions send it right away!

SMYCK

a blog by John-Paul Bader