As some might have noticed I recently launched another site and this blog also has a new design since a few weeks now. In both cases I used the redesign and the creation to learn new technologies and I want to share some thoughts and tricks here.

feelinghands.at as seen on the iPhone

HTML5

For both designs I used HTML5 but tried to be as backwards compatible as possible… this meant that I used <div>-tags inside the new tags (i.e. <header> or <footer>). While this is not really beautiful it works fine in all major browsers (and yes, I dumped IE6 support, no-one should care about this browser any longer!).

Overall using the HTML5 structural tags without using them in the CSS does not really make sense, but the tags are there in case they are needed in the future. Or in case Google wants to see them. The HTML5-DocType works out fine and as I said above, the sites work in all browsers without any problems related to HTML5.

SASS

While I am more a programmer and not so much a designer I really enjoyed working with SASS. Basically SASS is a CSS preprocessor, and each CSS file is also a perfectly valid CSS file. By using SASS the developer can use variables, nesting, functions (called mixins) and a few other tricks that make working with CSS actually fun.

So all $color: #fff; definitions end up on top of the file and the variables can be used throughout the code. Code is properly nested and through the indention it is easy to spot the level of an element. //comments can start using double-slashes, files can be imported etc. etc. I highly recommend checking out the SASS homepage and I swear you will love SASS for CSS! No more project without SASS!

mbaierl.com as seen on the iPhone

Reactive CSS

The new designs are reactive, which means that they adopt themselves on mobile devices with a smaller screen. You can see some sample screenshots of mbaierl.com and feelinghands.at as they would look on an iPhone in this article on the right hand side. All of this is done only with a single CSS file (or multiple ones that are imported using SASS), so there is no different HTML structure or different URL to use for the user. It simply works out of the box if you visit the site.

To achieve this effect all you need to do is to override styles within an @media query:

The above query will target i.e. the iPad and all CSS rules within the @media query will only apply for screens smaller 700px. If you also add this rule:

it will target the iPhone, so the same CSS file can contain iPhone, iPad and Desktop rules.

As a special hint, if you want to have high resolution icons for the iPhone 4 Retina display or the new iPad you can target those devices using this rule:

That way the images will show up sharp and not blurry on devices with a Retina display.

Another very neat trick with SASS is inheritance…. to make my designs reactive I had to reset tons of positioning I did for the elements on the page… doing that manually would have been a pain so I created a .mobileReset class and extended from it in all absolute positioned elements, i.e.:

Within the @media section for the mobile devices I declared the .mobileReset class:

SASS will now do the right thing and add all elements that extend the class to the .mobileReset definition within the @media query, effectively resetting all positioning. This allows me to define the mobile classes independently of the elements.

I can’t close this section without writing about possible drawbacks of using reactive CSS – file size and downloads. Of course adding more and more styles will increase the overall CSS file size, but this should not be that much of an issue any longer (research shows that the download of a 10k vs. 12k file does not really matter that much). However, the mobile device will download and cache all your images, so even if they will never be shown on the mobile device, the files are still downloaded. And the number of hits has a huge impact on the performance of a site. So make sure you do not use too many images and use CSS sprites where possible.

Conclusion

If you build a new site there is absolutely no reason to *not* use HTML5. It is ready for mainstream, and if you only use it to have a shorter DOCTYPE – use it.
Also for new and even existing sites I highly recommend the use of SASS – it makes CSS development more fun than it is (no, does not save you from the cross-browser hassles, but at least there are variables and routines and nesting and imports…).
And for reactive – if the site does not have a dedicated mobile site it is a great way of giving your mobile users a better experience, so there should also be no excuse for not building in at least a few rules for mobile devices so the site looks good on those devices too!

Usually Tomcat is really simple to handle – download, extract, start and forget about it. If you need multiple instances of Tomcat on the same machine for performance reasons (if i.e. the database or the file system is the bottleneck) then you usually simply copy the extracted tree, modify some config (server.xml to have different HTTP ports), start it and forget it.

However if you want to rely on the standard rpm (“yum install tomcat5″) this approach does not work very well – the rpm install distributes the tomcat files across the file system. Some parts are in /usr/share, some in /etc/ and the logs are of course in /var/log/. So how do you modify this system to be able to run multiple instances and also benefit from updates that Redhat releases? (And btw, this guide should also apply for other systems, i.e. Ubuntu or CentOS.)

Here is how to do it:

1. Copy the config files from /etc/tomcat5 to this folder: /etc/tomcat5.1
2. Modify the /etc/tomcat5.1/server.xml to have unique ports
3. Create a log directory: /var/log/tomcat5.1 and make sure the group is set to tomcat
4. Create cache directories /var/cache/tomcat5.1/temp and /var/cache/tomcat5.1/work and make sure the group is set to tomcat
5. Create a copy of the /usr/share/tomcat5 directory as /usr/share/tomcat5.1 and modify the symlinks in there to point to the newly created folders (conf, logs, temp, work) and remove the bin/ directory and symlink it to /usr/share/tomcat5/bin
6. Copy /etc/sysconfig/tomcat5 as /etc/sysconfig/tomcat5.1 and replace all instances of “tomcat5″ with “tomcat5.1″ within that file
7. Copy the /etc/init.d/tomcat5 as /etc/init.d/tomcat5.1 and  replace all instances of “/tomcat5″ with “/tomcat5.1″ within that file

Once these steps are executed you can start the new instance using “service tomcat5.1 start”. This works for any number of instances and will share the Web apps as well (so no multiple deployments needed) and should improve performance if you use Apache + mod_jk in front of Tomcat.

As follow up to my Dropbox vs. Wuala comparison and ongoing quest for a secure online storage & backup provider: Stephan Paukner has posted an Overview of Dropbox alternatives. Pretty good and includes pricing information as well….

Since I compared Dropbox and Wuala I did some further, in-depth investigation how Wuala works and if it really fits my needs. And while I still love the idea of the “Swiss bank” there are some drawbacks that you should be aware of if you want to use Wuala for backup purposes:

Since AVOS took over Delicious from Yahoo earlier this year things did not get better… The browser integration stopped working (I consider signing in every time I want to bookmark something as “not working”!) and the site has serious performance problems… I do not want to wait 3-5 seconds for storing a simple bookmark.

Thus it was finally time to look for alternatives, and I found it in the form of “pinboard.in“, a social bookmarking service without all the social crap:

Pinboard is a bookmarking website for introverted people in a hurry.
The focus of the site is less on socializing, and more on speed and utility.

And that describes it very well – it is fast, defaults to private bookmarks, has browser extensions available that work and it has the same API as Delicious – so rewriting scripts is a matter of changing the host name.

The drawback? They charge the *incredible* amount about $10 once, to board the service </sarcasm>.

So, if you want a fast, flawless and working bookmarking service check out Pinboard.in, but be prepared to support the developer with your credit card. You won’t regret it.

(Thanks Klaus for the tip!)

When I recently stumbled across the (already old) Stuxnet article on Wired I was just amazed. This article describes how the Stuxnet worm was discovered and disassembled, the target it tried to attack and it shows how advanced this work is. The article reads like a novel from Dan Brown and I highly recommend it to anyone interested in the latest news about the cyberwar….

wired.com: How Digital Detectives Deciphered Stuxnet, the Most Menacing Malware in History

Recently Apple replaced MobileMe with iCloud but they did not include a replacement for iDisk, the “remote disk” part of MobileMe. So it is time to search for something new and to rethink the external backup strategy for offsite backups…. The obvious replacement would be Dropbox, but with the recent security issues they had I was also looking for alternatives. It turned out most alternatives are really not as good as Dropbox, but Wuala got my attention… and so here it is, the Dropbox vs. Wuala comparison….

Supported operating systems and sharing

Both Dropbox and Wuala support OSX, Linux and Windows and are available on a wide range of mobile devices. On Dropbox the data can also be viewed through the Website, Wuala requires the Java plugin to be available (see below for the reason). Both systems allow to share files with other users and send out links to any user, so they can be used for sharing large files.

Security

The Dropbox folder integration

SSL is the standard for communicating with the servers, but the major difference between the services is that Wuala encrypts the files locally before sending them to the servers. This means that even Wuala cannot read your data as the password never leaves your system. However the drawback of the increased security is that files cannot be viewed easily through a Web interface and the Java plugin is needed to access the files using a Web browser.

Personally I think the security and privacy model of Wuala is far more advanced than the one of Dropbox, where employees of the provider can access the data (and even specify this right in the terms of use). Wuala feels more like a private, personal safe that no-one has access too, and this picture gets even stronger if you think about the fact that they are located in Switzerland and not in the US.

User interface and ease of use

Dropbox is super-simple and very well integrated into the Finder/Browser of the OS, Wuala on the other hand is very old-school. That is actually the reason why Dropbox is so popular, it is a no-worry solution. There is one folder that syncs, the icons on this folder show the status (uploading/up-to-date) and that’s it. No configuration, no scary dialogs, simple and effective.

Within the Wuala application the user is confused with too much information and it takes a while to get used to it. So there is room for user errors in the Wuala client, but on the other hand it offers more flexibility. For example it allows read-only backups and multiple sync-folders. However – it is more satisfying for tech users who want to control and configure stuff – but it completely misses ease-of-use, that makes applications popular these days.

Performance & Tools integration

The Wuala Application window

Performanc-wise it seems that Dropbox is faster than Wuala, one reason being that they do not transmit the full file but only the changed parts (a feature that Wuala will have pretty soon). To say it with different words: Dropbox is amazingly fast. It just works and syncs super fast. Will be interesting to see how Wuala performs once they enable partial file transfers as well.

Also a plus on the Dropbox side is the integration with other tools. By opening and documenting the API and giving other apps access to the data there are text editors, mobile apps, password managers etc. that all store their data on Dropbox. Wuala (based on its security model) does not offer that kind of integration.

What both services handle very differently (and not very well) are symlinks. While Dropbox uses them to sync folders that are not within the /Dropbox folder (challenging for backups that contain symlinks), Wuala simply ignores symlinks… both not ideal for a backup solution.

Price

The price of Wuala is (at the time of writing this) below the price for Dropbox ($129 vs. $199 for 100GB/year) and Wuala offers more choices and larger packages.

… and the winner is…

When I first started my investigation it seemed that I have two very similar services at hand… and indeed they share a lot of common features. But on a closer look Wuala seems to be more powerful when it comes to backup and syncing multiple folders. If Wuala would rewrite the OSX client to sit in the notification area and have Finder icon overlays like Dropbox I think it would be the perfect choice for keeping my files offsite. I also love the fact that they appear to be like a Swiss bank, with my data being my data, with them and no-one else having any access to it.

However Dropbox is so well integrated into other applications and it is really a “don’t make me think” application, so I need to keep the Dropbox client running for some of those apps (and the free 2GB version is good enough for that)….

Check out Wuala on your own (if you use this link you get some space for free).

Check out Dropbox on your own (if you use this link you get some space for free).

Finally even Microsoft started working on phasing out Internet Explorer 6. They are pretty serious to drop the worldwide usage below 1%:

10 years ago a browser was born.
Its name was Internet Explorer 6.
Now that we’re in 2011, in an era of modern web standards, it’s time to say goodbye.

I love that initiative and hope the number drops pretty fast from 12% right now to 1%… would save us Web developers so much hassles… So go and upgrade or and check out http://www.ie6countdown.com/.

IPv6 wird dieser Tage 15 Jahre alt… Ja, ein Protokoll welches noch gar nicht wirklich verwendet wird…. und aufgrund seines Alters im aktuellen Internet einige Probleme haben wird.

Und so kommen auf die Internet-Nutzer einige sehr unschöne Erfahrungen zu. Damit sie dann trotz der Fehler von Herstellern und Betreibern ins Internet kommen, müssen sie viel mehr über IPv6 lernen, als sie je wissen sollten. Denn schließlich handelt es sich um ein Protokoll einer recht tiefen Netzwerkebene, also ein technisches Detail. Wer das Internet benutzt, sollte darüber eigentlich gar nichts wissen müssen.

Dem kann ich nur zustimmen… es wird sich aber leider nicht vermeiden lassen… die Umstellung wird der Horror!

Der ganze Geburtstagsartikel zu den kommenden Problemen mit IPv6 ist auf heise Netze zu finden.

Warum kommt mir das nur so bekannt vor?

… aber so blöde sind die Verantwortlichen nun nicht und es werden in *deren* Kreisen Meetings abgehalten. Die Zeit der Positionspapiere bricht an. Die sind fester Bestandteil der “cover-your-ass”-Strategie, die jeder Verantwortliche meisterlich beherrscht. Das ist deren Kompetenznachweis. Wir Admins haben root, die ihre Ruhe.

Absolut lesenswert! (via _m3)