Monthly Archives: March 2012

Proposal: Move Media Queries from CSS to HTTP

Martin Wolf in reply to my reply to his earlier post on Bandwidth Media Queries:

So I could show a small image on an iPad 3 which is on LTE, but a big double sized image on an iPad which is on wifi.

I still believe Bandwidth Media Queries are a bad idea, but I do believe that bandwidth is an important factor in the user experience. However, I think that detecting the bandwidth is a wrong solution for a right problem. We want to provide content that fits and loads fast on the users device and network. As I mentioned in my previous article, in practice it is not possible to determine the real bandwidth the user currently has, we can only estimate it by detecting the network the user is currently on. Martin mentioned that he does not want to mess with the users data limit. This might be a problem in Germany and some other countries, but if I am in Austria and have a good 3G connection I want to view the full image, not a shitty JPEG with 50% compression. If you truly want to serve the best image for each device and connection you have to do something like this:

You have to repeat this for mobile devices without a retina display, for iPads, for iPads with retina display, for notebooks, for notebooks on a 3G network and so on. Probably you will end up with hundreds of different media queries. That is not practical.

As a web developer I do not even want to deal with the display size of the device and I want for sure not have to deal with the bandwidth the user has and the network the user is on. That is like developing web applications in C instead of PHP or Ruby.

Here is a proposal:

CSS seems to me the wrong place to deal with hardware related features. I suggest: Remove media queries. Instead of media queries add native support for grids to the standard. Additionally there should be properties to define how the layout should be resized. For example, there could be a property to define that it is ok to display this column beneath the previous one if the device is to small to display them side by side.

Second of all, we should move the part of delivering the right image to the web server. If devices would send a HTTP header like X-MAX-WIDTH: 640px the web server could determine the which image to serve. It could even dynamically call a tool like ImageMagick or a PHP or Ruby script to resize the image. This is very similar to the Adaptive Images technique, although instead of hacking it together using cookies (which breaks if the browser prefetches images) it would be supported natively and therefore it would work. One small problems remains, that if an user opens an image explicitly in the browser he probably wants to view the full version, not the version optimized for mobile devices. Therefore the browser should additionally send a X-EMBEDDED: 1 header which signals if the image is embedded in a HTML page or requested explicitly.

I don’t like media queries because it requires me to deal with low-level hardware stuff instead of creating a great user experience on every possible device. As a developer I can not test and optimize my website for each new phone or tablet. Thus I want to be able to trust the browser vendors that my website will look great on each new device the produce

Bandwidth Media Queries

Chris Coyier:

That issue is: bandwidth. If I’m in a place / on a device that has super slow internet, I’d love to be served a very light web page so browsing is still acceptably fast. If I’m in a place / on a device that has super fast internet, by all means ratchet it up and deliver me more.

Martin Wolf:

But even a picture tag, which could deliver different files for different screen sizes would be a step forward. Yes, there are Javascript solutions for that, but it is not perfect and it would be better if there was a simple HTML solution.

First of all, JavaScript is not really a solution for serving different image sizes. Any solution that I currently know of needs at to download at least the smallest version in addition to the appropriate image. A very clever solution which nearly worked is described by Mat Marquis.

My problem with bandwidth detection is that it will never be really accurate. In its simplest case the browser would just send the speed of the network the user is currently on. However, I can be on 3G but since I am also currently updating a dozen of iPhone Apps, I don’t really can surf using 3G speed. If the browser wants to detect the real bandwidth I currently have, it would need to download some Megabytes and measure how long it takes. Since my available bandwidth can change quite often, he would need to repeat this on a regular basis. Thus it would use a quite big amount of my network just to detect my bandwidth.

This seems to be a lot of work for a feature I can’t come up with a single use case where this would be absolutely necessary. I still need to detect the screen size and ratio (has the device a retina display?) in order to provide the browser with the correct image. Of course I would be able to serve, for example, two different versions to mobile clients. One JPEG with 60% compression if the user is on a slow connection and one with 90% compression if the user is on a fast network. However I am quite sure that only a small minority of web developers will go through the trouble creating even more different versions of an image. If only very few web developers would use this feature, it seems like a bit of overkill to detect the real bandwidth (and therefore use up my monthly download limit) just to improve the quality of these few sites.

Microsoft employees seize Zeus botnet servers with the help of US Marshals →

Jeff Blagdon:

Accompanied by US marshals, Microsoft employees raided office buildings in Scranton, Pennsylvania and Lombard, Illinois on Friday; seizing servers believed to be running botnets used for identity theft. The botnets are infected with the Zeus family of malware, which uses keylogging to go after a user’s financial information. Microsoft is reporting 13 million suspected Zeus infections worldwide since 2007, with more than three million just in the US.

Am I the only one who finds it scary that a private company is able to raid a building and seize servers?

How I Became a Developer

It all started when I was eight or nine years old and my parents allowed me to invest all my savings into a computer. Just like nowadays I was only interested in cutting edge technology therefore I bought an Intel Pentium with 100 MHz. I spent the rest of my money on games, but my father also bought Microsoft Office and a printer for himself. After a while my father was the only one playing the games while I started creating magazines using Word or calculating the popluation of my LEGO town using Excel. I also printed out these magazines and sold them to my parents and my relatives. A few years later Microsoft added FrontPage to their Office Suite and I immediately started to create websites. Having an ISDN flatrate I spent most of my free time in the internet.

At some point I discovered that it’s necessary to upload a website on to a server in order to allow other people to access it. Once I figured this out I had to realize that nobobdy was interested in the life of a 12-year-old.
Well, with the rise of social networks this definitely has changed but back then the counter I embedded in my website only increased when I visited it.

There was no doubt that I had to find some other reason for creating a website. Usually I was playing Pokémon on my GameBoy when I was not sitting in front of the computer. Obviously I needed to create a Pokémon fan site. Since a lot of other people were also interested in Pokémon the counter was constantly increasing. At some point my site had hundreds of subpages, all of them created in FrontPage. Everytime I needed to add a new item to the navigation I needed to change all of these subpage. That was the time when I discovered PHP. I never heard of programming before and the fact that I was able to dynamically create the content of a website was fascinating me.

After Pokémon I really was into Japanese comics and cartoons so I ditched my Pokémon website and started an Anime and Manga fansite. Sometime before I met a German kid on a forum and we decided to build the website together. The amazing thing was that we never met each other, we didn’t even know our real names or what we looked like. I only knew his nickname and we would communicate using AIM or ICQ. Throughout three years we built different websites together and at some point we would have thousands of visitors per day and hundreds of new postings on our message boards. Building a website which other people visited on a regular basis and where they participated in discussions was an amazing experience for me. Of course, at that time we didn’t know how to run a website professionally and we never earned a Schilling with it.

Still, I learned a lot. The first version used two “include” statements to separate the header and footer from the rest of the layout. In the end we had created a full featured, custom CMS, which allowed us to edit TV programmes, create news and articles and upload images and videos. I even developed a custom web analytics software which was used by dozens of other fan sites.

I never learned programming because I wanted to learn programming but rather because I needed to learn programming in order to create the things I wanted to create. Looking back at the projects I did at that time I realized that private projects where much more sophisticated than projects I created for clients. This has changed in the last few years as I became more professional in dealing with for-profit projects, especially since I now work as Developer in an internet company. Nevertheless, one thing will always remain true: I am driven by passion, not money.

First Days of Spring

Schlosspark Schönbrunn

Der wahrscheinlich einzige Vorteil in Meidling zu wohnen ist es, in 5 Minuten im Schlosspark Schönbrunn zu sein. Recommended listening: Noah & The Whale — Last Night on Earth (Play in Spotify).

Betreten der Grünflächen verboten

Anstatt die Grünfläche zu betreten, belag ich sie

Haar & Himmel

Teich und Himmel

Lässig (mit zersaustem Haar)

Lieblingsmädchen

Hipstermädchen

Schattenmädchen

Noah & The Whale

Schokoladeeis und Erdbeeren. Mjam.

This is my blog and I will use it to try things out and improve my skills

Since some time now I wanted to start writing more in English. I like to believe that I’m quite good in reading and understanding English texts. For example, whenever I think about technology and Computer Science related things I already phrase my thoughts in English. Nevertheless, I often encounter situations where I think in German and then need to translate them into English in order to write them down. I want to be able to think and write in English without needing to translate every word and without making too much mistakes. At first I thought about starting a new blog and continue to write Web Adventures in German. I also considered writing all future posts here in English, but for now I will write some future posts in English and some in German. You may don’t like this dual language strategy, but this is my blog and I don’t care.

If you encounter any mistakes in my texts I would appreciate it if you let me know. Either write a comment or send me an email (florian@theroadtojoy.at).

Shows

Shows for iPhone

Ein großes Problem der modernen Gesellschaft ist es rechtzeitig über neue Konzerte informiert zu werden. Viele große Konzerte sind schon wenige Stunden nach dem Start des Vorverkaufs ausverkauft, viele kleine Konzerte verpasst man einfach. Natürlich fällt dies auch dem einen oder anderen Programmierer auf und daher gibt es mittlerweile einige Apps die versuchen dieses Problem zu lösen. Am bekanntesten sind wahrscheinlich Songkick und Bandsintown. (Das Konzerteproblem haben übrigens auch Menschen mit Geld erkannt, Songkick hat bislang $16,5M an Kapital erhalten, Bandsintown immerhin $195k bevor es gekauft wurde.)

Songkick unterstützt derzeit allerdings nur den Import der Künstler die man iPhone hat, von Spotify und von Facebook, allerdings nicht von Last.fm, welche die gesamte gehörte Musik bündeln würde. Bandsintown erlaubt zwar den Import von Last.fm, benutzt aber genau wie Songkick nicht die Last.fm-Datenbank für Konzertdaten. Das ist schlecht, da zumindest in Österreich die Alternativquellen der beiden Seiten eher Mist sind. Im besten Fall wird man beim Start des Ticketverkaufs informiert, im schlechtesten Fall erst ein paar Tage nach dem Start des Ticketverkaufs. Am Wochenende entdeckte ich dann Shows. Diese App hat nicht nur ein wunderschönes Interfaces, es benutzt auch die Last.fm-Daten.

Außerdem versucht Shows das Problem zu lösen, dass man nicht nur Konzerte in der eigenen Heimatstadt anschauen will, sondern für manche Konzerte durchaus einige Kilometer reisen würde. Shows verwendet das einfachste mögliche Interface dafür, einen Schieberegler, bei dem man die Anzahl an Kilometer einstellen kann. Das ist einfach, hat aber natürlich auch Nachteile, da für mich 200km nach Linz (wo ich aufgewachsen bin und ich immer noch jederzeit einen Schlafplatz habe) etwas anderes als 200km Richtung Osten nach Ungarn sind. Songkick löst das Problem so, dass man mehrere Städte eintragen kann und dann für jede Stadt eine andere Ansicht hat. Das ist praktisch wenn man auf Urlaub fährt, allerdings nicht so, wenn man zB für ein Radiohead Konzert auch nach Berlin fliegen würde, für ein Lisa Hannigan Konzert aber nicht.

Mich wurmt dieses Problem schon länger und eine kurze Recherche in meinen Notizbücher ergab tatsächlich einen Eintrag von 2010.

Mockup Anmeldeformular
Die Anmeldung sieht ziemlich ähnlich wie bei den anderen Apps aus.

Mockup Import Artists
Auch das Importieren funktioniert sehr ähnlich.

Mockup Organize Artists
Der Unterschied ist, dass man Artists in Gruppen sortieren kann und für jede Gruppe einen eigenen Radius definieren kann, in dem über neue Konzerte informiert wird.

Sparrow for iPhone

Sparrow for iPhone Logo
Seit heute morgen ist Sparrow for iPhone im App Store zu finden. Sparrow for Mac ist schon seit einiger Zeit der E-Mail-Client meiner Wahl. Das Interface ist wunderschön und bringt (fast) alle Vorteile und Features von Gmail in eine native OS X App. Sparrow for iPhone soll das Erlebnis aufs iPhone bringen. Ein Highlight ist meiner Meinung nach das Interface um eine E-Mail einem Label zuzuordnen bzw. in einen Ordner zu verschieben. Es bleibt ein kleiner Teil der E-Mail am rechten Bildschirmrand sichtbar. Großartig. (In der Standard-Mail-App habe ich zu 50% vergessen in welchen Ordner ich die E-Mail legen wollte, während ich diesen Ordner suche.)

Der einzige Nachteil ist das Fehlen von Push. Die Entwickler haben eine entsprechende Funktionalität, die technisch ähnlich wie die von VoIP-Programmen wie Skype funktioniert, entwickelt, allerdings hat Apple dies abgelehnt. Hoffentlich ändert Apple seine Meinung dazu bald. In der Zwischenzeit lasse ich einfach Mail normal konfiguriert und bekomme so Push Notifications (allerdings muss ich Sparrow dann manuell öffnen und nicht über Tap auf die Benachrichtigung).

Man sollte auch unbedingt einen Blick auf die Sparrow Homepage werfen. Die, ich nenne sie jetzt einfach mal so, interaktiven Screenshots sind brillant gemacht.


Sparrow for iPhone on Vimeo.

Similar.fm

Similar.fm

Da ich es hasse wenn Musik plötzlich aufhört und es dann still ist, habe ich grundsätzlich immer Repeat aktiviert. Ich habe meistens kein Problem damit, wenn ein Album 1,5 oder 2 Mal läuft und ich mich dafür nicht um die Musikauswahl kümmern, wenn ein Album oder eine Playlist aus ist, sondern wenn ich Zeit dafür habe oder wenn ich das Bedürfnis habe einen bestimmten Interpreten, ein bestimmtes Album oder eine bestimmte Playlist zu hören. Läuft ein Album mit zehn Titeln allerdings zum dritten Mal werde ich auch leicht genervt. Ich möchte dann zwar etwas anderes hören, aber meistens etwas ähnliches. In Spotify am Mac geht das recht gut, man kann auf den Künstler klicken und sieht dort ähnliche Künstler. Im Büro höre ich allerdings meistens über die iPhone-App von Spotify Musik und die hat diese Funktion nicht. Wenn ich etwas ähnliches hören will, musste ich bislang immer Last.fm aufrufen, den Namen des aktuellen Künstlers eingeben bis zur Liste mit den ähnlichen Interpreten hinunterscrollen, mir einen aussuchen, in die Spotify-App wechseln und dort nach dem Künstler suchen. Das ist ziemlich umständlich. Darum habe ich Similar.fm programmiert.

Die richtige Verwendung davon ist folgende: Similar.fm am iPhone (oder einem anderen mobilen Gerät) aufrufen, seinen Last.fm-Benutzernamen eingeben und auf “Go” klicken. Die Seite zum Home-Bildschirm hinzufügen. Jedes Mal wenn man dann eine andere Musik hören möchte, diese aber ähnlich sein soll die Similar.fm App anklicken und über den “Open in Spotify”-Link sofort hören. Funktioniert super.

Im nächsten Schritt wird Similar.fm mit großer Wahrscheinlichkeit auch einen Playlistgenerator bekommen. Dazu muss ich allerdings noch einen passenden Algorithmus entwickeln, den die bisherigen Spotify-Playlist-Generatoren sind eher scheiße.

Similar.fm hat im übrigen auch einen Twitter-Account und einen Facebook-Seite. Folgen und liken und so.

Es gibt zwar auch die Möglichkeit den Namen eines Künstlers einzugeben, aber wirklich Sinn macht Similar.fm nur, wenn man einen Last.fm-Account besitzt. Da ein solcher Account Musik hören um einiges besser macht, kann ich jedem nur empfehlen sich so einen Account zuzulegen.

Spotify startet morgen in Deutschland

Axel Bringéus im Interview mit Focus:

Wir mussten die Webseite übersetzen, in Berlin ein kleines Team aufbauen, neue Zahlungsmethoden integrieren und wir werden auch mit einigen deutschen Partnern loslegen.

Ich nutze Spotify seit dem Österreichstart im November und kann es jedem nur empfehlen. Musik hören wird damit 1000 Mal besser. Eine deutsche Version von Spotify gibt es übrigens spätestens seit November als Spotify in Österreich und der Schweiz startete.