mysedcard.tv Techblog

SVN ade, Ahoj GIT

Mon, 04 May 2009 08:32:06 -0400

Bisher wurde für die gesamte mysedcard Applikation serverseitig SVN für das Source Code Management verwendet. Das führte immer mal wieder zu Problemen und dazu, dass ich einige zeit investieren musste, um das fehlerhafte Repository wieder gangbar zu machen. Heute morgen war dem wieder so. Nachdem ich einiges an externem Code ausgetauscht hatte und das Ganze auf den Server zurückschieben und deployen wollte, ging nach dem ersten Commit nichts mehr. Nicht vorwärts und nicht rückwärts. Ziemlich dumme Situation. Ich entschloß mich nun final dazu einen eigenen GIT Server aufzusetzen und die gesamte Applikation auf GIT zu portieren.

Mehr dazu könnt ihr bei Interesse in meinem persönlichen Blog lesen.

kleine Updates

Fri, 24 Apr 2009 10:22:26 -0400

Nachdem nun schon ein paar Tage nichts mehr passiert ist, heute wieder mal ein paar Updates.

Wir haben den News Bereich um ein Archiv erweitert. Die neuesten Artikel findet ihr weiterhin auf der ersten Seite, um euch die älteren Beiträge anzuschauen könnt ihr nun einfach mit der Blätterfunktion ins Archiv wechseln.

Die Nachrichten werden nur ordentlich sortiert. Bisher war die Sortierung aufgrund eines Fehlverhaltens des Systems nicht gerade durchsichtig. Nun erscheinen die aktuellsten Nachrichten immer ganz oben.

rss feeds sind toll

Tue, 21 Apr 2009 08:42:00 -0400

… und deswegen haben wir nun auch einen für die News bei mysedcard.tv integriert. Den RSS Feed einfach mit eurem News-Reader der Wahl abonnieren und los geht’s. Ansonsten ist das ja in keinster Weise eine spektakuläre technische Neuerung.

Blog hosting nur zeitweise bei tumblr

Fri, 03 Apr 2009 06:54:29 -0400

Der Techblog wird nun bis auf weiteres heir bei tumblr.com verwaltete werden. Das ist zwar auch noch nicht optimal, aber wesentlich besser als noch bei wordpress.com.

Allerdings gefällt es mir ganz und gar nicht, dass man keine Kommentare zu den Beiträgen abgeben kann. Deswegen wird auch das hier nicht die letzte Lösung sein. Ich hoffe ich finde bald eine gute Lösung. Im Zweifelsfall muss selber Hand angelegt werden.

Für Hinweise bin ich natürlich jedem dankbar. Diese einfach an techblog@mysedcard.tv schicken. Danke!

Bilder mit (scheinbar) runden Ecken

Fri, 03 Apr 2009 06:16:38 -0400

Ich habe einige Tage nichts mehr aus dem Fundus von mysedcard hören lassen. Wir mussten uns in letzter Zeit auf das Setup unserer Google Kampagnen konzentrieren und dabei ist der versprochene Blog über die Umstellung der Bilder auf der Strecke geblieben. Die Google Kampagnen sind nun online und die ersten Benutzer finden darüber ihr neues Zuhause :)

Nun aber zur Umstellung der Bilder. Ein wenig Vorgeschichte dazu. Die Anforderungen der Designabteilung, in Person Sebastian, wollte zu Beginn unbedingt runde Ecken haben, da das “super Schick sei”. Mir war von Anfang klar, dass das nur gut funktionieren kann, wenn die Ecken transparent sind. Somit mussten PNG’s erzeugt werden. Das habe ich relativ einfach mit einem Paperclip Fork von dookie gemacht. Danke an dieser Stelle! Er hat genau das umgesetzt, was ich mir vorgestellt hatte.

Hierbei entsteht nur ein Problem und zwar, dass man aufgrund der PNG’s eine riesige Datenmenge erzeugt. Pro User sind hier im Schnitt 10MB zusammengekommen. Ein weiterer Nachteil des Ganzen ist, dass enorm viel Traffic erzeugt wird. Wir hatten an guten Tagen bei nur 500 Besuchern bereits 6-10 GB an Traffic pro Tag, was bei der erwarteten Menge an Usern ein ernsthaftes Problem darstellt.

Ok, die PNG’s mussten weg! Das war klar. Doch wenn JPG, dann müssen die runden Ecken irgendwie zurechtgelogen werden. Hier kann man auch mehrere Ansätze verfolgen.

Der erste, den ich aber nicht wirklich angeschaut habe ist Jquery Corners.

Ein bekannter von mir hat mir dann eine Lösung vorgestellt, die relativ praktisch ist. Man nehme einen div und lege das abzurundende Bild hinein:

Dann werden mittels jquery vier kleine Divs in den masked-Div injiziert und mit CSS positioniert:

Somit werden die Bilder mit kleinen transparenten Grafiken versehen, die sich in die Ecken der Bilder legen und somit die runden Ecken faken. Der Ansatz ist in sofern gut, dass er sehr dynamisch ist und bei jeder Bildgröße funktioniert … ohne CSS Hacks leider nur im Firefox, was zu erwarten war :(

Eine Demo könnt ihr euch herunterladen: mask-image-with-rounded-corners.zip.

Das faken der Ecken kann man auch zur Laufzeit erledigen und nicht per Javascript, um den Ecken-Fake nicht erst nach vollständigem Laden der Webseite zu haben. Ein weiterer Ansatz ist, dass man über das Bild eine transparente Maske legt. Das funktioniert aber nur, wenn die Bilder eine feste Größe haben, z.B. bei quadratischen Bildern, wie es bei mysedcard großteils der Fall ist. Der Ansatz ist erstmal etwas komplizierter, funktioniert aber unterm Strich dann überall, außer im IE6 und kleiner. Wir nehmen ein Bild und betten dies in span-Tags ein:

Der Sprite, der hier verwendet wird beinhaltet die verschiedenen Masken für eine Hintergrundfarbe Der Span wird somit einfach über das eigentliche Bild gelegt und entsprechende positioniert.

Das reicht, um eine Maskengröße korrekt zu positionieren. Das Beispiel kann um beliebige Formate erweitert werden. Der interessierte Leser schaut sich das Ganze am besten mit Firebug bei mysedcard.tv an. Bei mysedcard kommt eine Kombination der beiden Lösungen zum Einsatz. Für die quadratischen Bilder wird die Masken-Lösung verwendet. Es gibt aber auch dynamische Größen. Hier kommt Lösung 1 zum Einsatz. Die Positionierung für Internet Explorer wird mittels Hacks erledigt. Der Aufwand hält sich in Grenzen, da diese Lösung nur an einer Stelle zum Einsatz kommt. Durch die Umstellung der Bilder wurde der Traffic ungefähr um den Faktor 5-10 reduziert. Der Speicherbedarf der Bilder natürlich in gleichem Maße. Die Neu-Generierung der Bilder war mit Paperclip auch sehr einfach zu machen, hat lediglich etwas Zeit in Anspruch genommen. Das wurde in einer Nacht und Nebel Aktion erledigt, könnte bei genauerer Planung und etwas Code-Anpassungen auch während dem Tagesbetrieb erledigt werden. Ich hoffe, dass ich vielleicht dem ein oder anderen weiterhelfen konnte. Kommentare, Anregungen und sonstiges sind natürlich gern gesehen :)

mysedcard.tv ist online

Tue, 24 Mar 2009 06:00:00 -0400

Hallo mysedcard.tv-Fans, Rails Interessierte und natürlich auch alle Anderen,

leider etwas verspätet, aber besser spät als nie, beginnen wir, mysedcard.tv, in Person ich, Stefan Botzenhart, über den technischen Fortschritt unter der Haube von mysedcard.tv zu berichten.

Dieser erste Beitrag soll einen groben Überblick des bisher Geschehenen geben. Begonnnen habe ich mit der Entwicklung von mysedcard am 14.12.2008 mit einem schnöden “git init” und der klaren Vorstellung, wohin die Reise gehen soll. Zusammen mit meinen Mitstreitern Kai und Sebastian hatten wir bereits im April 2008 mit einer einem HTML Dummy zu Präsentationszwecken begonnen und damit das grafische Konzept von mysedcard umgesetzt. Damit konnten die beiden schon mal arbeiten und auf Partnersuche gehen. Die Weihnachtstage 2008 sowie Sylvester waren geprägt von “wtf” und “warum zur Hölle funktioniert das nicht so, wie ich will”.

Am 10. Januar 2009 war das Portal bereits in einem Alpha Stadium angekommen - also nur knapp 20 Tage, einem Vollbart, viel RedBull, Re-Load, Kaffee, wenig Schlaf und der Erkenntnis, dass man von vielem Tippen auch eine Sehnenscheidenentzündung bekommen kann, später. In der Alpha Version war eigentlich das Meiste von dem, was aktuell auf dem Portal zu sehen ist, verfügbar. Browserkompatibilität war zu diesem Zeitpunk noch völlige Fehlanzeige. Ich wollte auch nicht sehen, was meine Freunde IE 6 und 7 aus dem HTML machen würden…

In den nächsten Wochen wurden dann die Anforderungen nochmal ein wenig abgespeckt, um den Release Termin 14. März halten zu können. Dieser konnte ja auch nicht verschoben werden, da der Cocoon Club bereits fest gebucht war. Ansonsten musste das Portal (relativ) browserfest gemacht werden und der allseits beliebte Feinschliff fehlte noch.

Am Tag X angekommen konnte ich aber doch an alle Release Features einen Haken setzen und einem mehr oder weniger entspannten Abend im Cocoon Club entgegenschauen. Die Veranstaltung war ein voller Erfolg! Mehr dazu kann man unter http://www.mysedcard.tv/news/offizieller-startschuss-mysedcardtv-cocoon-club-frankfurt nachlesen. Das vor Ort gedrehte Video und ein ausführlicher Bericht folgt in den nächsten Tagen.

Nun aber nochmal zurück zum Technischen. Mysedcard läuft auf einem gut ausgestatteten Athlon X64 mit 8GB Ram. Aktuell fahren wir noch ein Rails 2.2.1, die Umstellung auf Rails 2.3 ist aber bereits in Arbeit und wird hoffentlich bald möglich sein. Ansonsten setzen wir auf Phusion Passenger, gängige Gems und Plugins und einem Mysql Server. Zwei erwähnenswerte, weil vielleicht nicht ganz übliche Gems oder Plugins möchte ich an dieser Stelle dennoch nennen:

searchlogic vereinfacht eine Suche und den ganzen Klimm-Bimm darum um Welten
friendly_id stellt suchmaschinen- und menschenfreundliche URLs für (Rails-)Models bereit

Ansonsten setzen wir noch auf Lighthouse für unser internes Bug und Issuetracking, NewRelic zur Performance Messung der Applikation und Hoptoad zur Aggregierung von Fehlerreports. Alle Tools kann ich nur jedem ans Herz legen, v.a. Hoptoad hat es mir enorm erleichtert, die initiale Flut von Fehleremails zu überschauen und allen Fehlern auf die Schliche zu kommen.

Somit sind wir am Ende des ersten - nicht ganz so technischen - Blog-Beitrags angekommen. In den nächsten Beiträgen werde ich unter anderem auf die Problematik eingehen, warum sich mysedcard so träge anfühlt und wie das Problem gelöst wird, die Umstellung auf Rails 2.3 dokumentieren und neue Features von mysedcard vorstellen.

Grüße Euer Stefan