So this week Wooga open sourced their first HTML5 game Poket Island. Since I am working on a HTML5 game too these days I bothered a look.
The code lies on github and even the grapics are released under creative common license. I like the move by Wooga. They want to show where the problems were and where the direction for HTML5 should go. I wish more companies would take this kind of direction.
Now to the code. I had a look to get some ideas for my own project. So since I am very new to the whole javascript and html stuff I got a lot out of it.
Less (css)
The most valuable hint for me was that they use Less a framework that lets you create your css stylesheets dynamically using javascript. It supports all kinds of conveniences that css lacks.
Three features are most important for me: Variables,Mixins and Nesting.
I can assign variables and use them in multiple places. So now if I want to change a base color that my style uses I just have to change this one variable that I assigned the color to once instead of all occurances thoughout the css otherwise.
There are many other features that css lacks and that lesscss supports. Mixins that enable me to create templates that Insert as a whole into any other style class that I write.
The third is nesting which allows me to do what I excpected of css from the beginning. I create a style class for element X and want to assign specific attributes for a element Y if it is nested in X. In css i have to write that comletely separated. In less I can now nest Y exactly inside my style for X.
Conclusion
All in all less is a big win for me. My style sheets are radically reduced in size and complexity now. They are easier to maintain too.
And who fears the overhead of dynamically generating those stylesheets via javascript: dont be. You can do the less compiling also on serverside. In my case (and the most convenient too) you simply compile / cache it in your nodejs server.
The other ideas I got from their code is using jslint to analyze my codebase and lossless compress my png using pngcrunch.
Thank you Wooga.
