Trotz der Krise

Lange war es ruhig seit dem letzten Post zu diesem Thema, doch hoffe ich, ihr konntet die Zeit gut nutzen, um euch etwas in git einzuarbeiten.

In diesem letzten Teil der Serie “Website Management mit Git” komme ich zum eigentlichen Kernpunkt: wie kann man die eigene Website mit git administrieren. Wenn ihr bis jetzt meinen Ausführungen gefolgt sein, sollte dieser letzte Schritt nur noch ein Klacks sein und ich denke, der Beitrag wird auch eher kurz. Also, starten wir.

Grundlegender Ablauf und Idee

Als Webentwickler hat man meist eine lokale Version der Webseite, an welcher man arbeitet. Sobald die Seite ausgehend getestet ist, werden dann die Änderungen (meist per FTP) auf den Server geladen. Mit git gestaltet sich dieser ganze Prozess noch viel schneller und einfacher. Sobald die Webseite in Ordnung ist, reicht es 1 Befehl einzutippen und alle Änderungen werden auf den Server übertragen. Da git die Dateien komprimiert und auch nur die Änderungen hochlädt, ist die Aktualisierung auch um einiges schneller. Dies sind die Schritte im Überblick:

1. Webseite für die Arbeit mit git lokal vorbereiten

2. Webserver vorbereiten

3. Lokale Webseite mit dem Webserver verbinden

Weiter lesen

Seit einer Woche arbeite ich nun mit git. Was ist git und warum bin ich so angetan davon?

git ist ein Versions-Kontroll-System, das heisst, wann immer man eine Datei speichert, kann davon ein Backup gemacht werden – einfach gesagt. Wir alle kennen Backup-Systeme, oder sollten zumindest eines kennen. Zu schnell sind wichtige Daten gelöscht oder nicht mehr auffindbar. git kann aber noch viel mehr, als bloss ein Backup erstellen. Es erstellt quasi einen “Snapshot” aller Dateien und Ordner zu einem gewissen Zeitpunkt. Man kann also immer wieder zu einem Zustand in der Vergangenheit zurück kehren. Das kennen wir Mac Benutzer seit TimeMachine auch schon, doch kann git gezielt eingesetzt werden, um verschiedene Versionen zu managen.

Insbesondere kann man genau sagen, was passieren soll, wenn ich etwas mache. Also zum Beispiel, lade alle neue Dateien auf den Webserver hoch, sobald ich mit einem Zustand zufrieden bin. Da git nun nur die Änderungen kopiert und diese noch verpackt, ist dies in kürzester Zeit gemacht. Es gibt kein manuelles Hochladen per FTP mehr. Auch kann man zuerst alle Dateien genauestens lokal überprüfen. Ein Klick und alle Dateien sind auf dem Server gespiegelt.

Und wenn irgend etwas schief geht, dann geht man einfach zu einem Zustand vorher zurück. Natürlich funktioniert dies auch in sehr kurzer Zeit.

Dies ist bloss eine der vielen Anwendungen von git. In der Regel ist git dazu gedacht, in einem Team an gemeinsamen Projekten zu arbeiten. Dies ist jedoch schon sehr ausführlich dokumentiert und ich möchte in diesem Post (wird wohl in diverse Serien unterteilt werden) auf meinen Workflow für das Administrieren von Webseiten eingehen.

Weiter lesen

While working with jQuery on a client project I found that a simple animation of a background image, fading in and out in a loop, was very CPU hungry. Per default it used about 33% of the CPU, which I think, isn’t nice for a very simple animation. The problem actually is the loop, changing the opacity value dynamically over a short period of time. So my first fix was to set the fx.interval to a bigger value with the following code:

jQuery.fx.interval = 60;

In addition I inserted a small stop of 400ms and 800ms when the animation was completed at the point where the element was fully faded in and out. This brought down the CPU to about 13%, which is much better.

Yesterday I read about the new CSS3 animation technique which is hardware accellerated. So today I made a test on my office mac (iMac Core 2 Duo, 2.93 GHz) with the pulsating effect using pure CSS3 animations. If you are interested, here is the code:

.box {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-name: pulse;
-webkit-animation-duration: 3s;

}

@-webkit-keyframes pulse {
0% {opacity: 0.5;}
30% {opacity: 0.9;}
100% {opacity: 0.5;}
}

I loaded the page (with the jQuery animation disabled) in Safari and guess what? The CPU usage was back at 33%.

I know, my mac isn’t the newest one and you probably get a better result but many visitors won’t have a "better" machine while browsing your site.

What does this all mean? CSS3 animations are terriffic but do use a lot of your processor’s power. There is no way to fine tune the animation with CSS3 the same way you can using a framework like jQuery. So, as long as CSS3 animations aren’t CPU friendly you better stick with jQuery.

Blogo läuft nicht unter Mac OS X 10.7 Lion, jedenfalls momentan noch nicht. Leider ist das Programm schon seit längerem nicht mehr aktualisiert worden und es scheint so, als wäre das Projekt eingestellt. Es war mein absoluter Liebling unter den Offline-Blog Editoren. Übersichtlich, schnell, einfach. Dabei unterstützte er neben diversen Blog-Plattformen zusätzlich auch noch Twitter. Perfekt.

Doch nun sind die Tage gezählt und ich muss mich auf die Suche nach einem neuen Editor machen. Klar, ich weiss, dass ich auch direkt über das WordPress Backend posten kann, doch vermisse ich da einfach den Konfort und schneller geht es meist mit einem spezialisierten Tool.

Diesen Artikel erstelle ich übrigens mit dem kostenlosen Qumana, welches für Macintosh und Windows verfügbar ist. Das Benutzerinterface ist zwar nicht gerade hübsch und es benutzt Java, doch scheint es viele wichtige Optionen zu bieten. Es erinnert mich vom Aufbau her stark an MarsEdit. Nicht ganz so umfangreich (z.B. kann man keine WordPress Seiten bearbeiten), aber dafür ist es kostenlos. Wir werden sehen, wie sich der veröffentlichte Artikel online lesen lässt. Weiter lesen