Wer seine Website lokal entwickelt und den Quellcode auf Github verwaltet, ist mit folgendem Ablauf bestens vertraut:

• Lokale Änderungen am Quellcode werden über git push in das Github-Repository eingepflegt und
• der Quellcode auf dem Deployment-Server über eine SSH-Verbindung mit einem git pull aktualisiert.

Dieser Prozess lässt sich mit Deployment-Helfern wie Vlad oder Capistrano natürlich automatisieren. Diese Helfer müssen allerdings vorher aufwendig konfiguriert werden und kommen daher nicht für jedes Projekt in Frage.

Wer seinen Quellcode auf dem Server nur schnell aktualisieren lassen möchte, kann auf Pushmaster zurückgreifen. Die Sinatra-Anwendung läuft auf dem eigenen Deployment-Server (z.B. über Apache/Passenger) und wartet auf ein Signal ( Post-Receive Hook) von Github, um anschließend den git pull-Befehl selbständig auszuführen.

sudo gem install sinatra

git clone git://github.com/augustl/pushmaster.git

pushmaster.meinedomain.de

public_html/pushmaster.meinedomain.de/public

username: pushmaster
password: secret

pushmaster.meinedomain.de/listeners/[name_des_repositories].rb

Dir.chdir "/public_html/meinedomain.de/public" do
git "pull"
touch "tmp/restart.txt"
end

http://username:password@pushmaster.meinedomain.de

LoadModule passenger_module /usr/lib/ruby/gems/1.8/gems/passenger-2.2.2/ext/apache2/mod_passenger.so
PassengerRoot /usr/lib/ruby/gems/1.8/gems/passenger-2.2.2
PassengerRuby /usr/bin/ruby1.8

3 interessante Videos auf Youtube (insgesamt etwa 20 min lang), die den Installationsprozess von Drupal 7 aus der Sicht zweier Drupal-Neulinge zeigen.

Die Tester versuchen, die Installation abzuschließen und einen Artikel zu veröffentlichen. Dabei ist ihnen der Unterschied zwischen einem Artikel (in Drupal “Story” genannt) und einer Seite (”Page”) nicht sofort ersichtlich. Sie entscheiden sich für eine Seite und sind anschließend mit dem Problem konfrontiert, die neue Seite als Startseite einzurichten, bzw. einen Link im Hauptmenü hinzuzufügen.

Mit CSScaffold versucht Anthony Short, den nicht ganz unumstrittenen Produktivitätsgewinn populärer CSS-Frameworks mit der dynamischen Programmierbarkeit von CSS Cacheer zu vereinen.

CSScaffold soll flexible und programmierbare CSS Layouts ermöglichen und lässt sich auf der CSScaffold Github Projektseite › herunterladen.

Dabei sollen die Vorteile von CSS-Cacheer (Konstanten, Caching, Server-Imports, Grids, CSS-Formatierung und Erweiterbarkeit durch Plugins) mit folgenden Funktionen kombiniert werden:

• Eigenschaften wie Kolumnenraster, Spaltenraster, usw. lassen sich variabel angeben.
• Automatisch generiertes Bild des Gestaltungsrasters
• Eingebautes CSSTidy
• Optimierung und Säuberung des CSS-Quellcodes
• Ausführen einfacher mathematischer Berechnungen
• weitere Funktionen lassen sich in der CSScaffold Dokumentation nachlesen.

Wer sich schonmal einen ersten Eindruck über die Funktionsweise verschaffen möchte, sollte unbedingt den 8 minütigen Screencast anschauen:

Die HD Version ist um einiges schärfer und lässt sich nur auf der Vimeo-Seite anschauen

CSS-Sprites

Wer viele Hintergrundbilder über CSS einbindet, muss ohne Optimierung mit ebensovielen HTTP-Requests rechnen. Um dies zu verhindern, greift man auf CSS-Sprites zurück.

Der Aufwand diese zu erstellen, bzw. zu ändern ist jedoch meist nicht zu unterschätzen. Zwar gibt es Tools, die einen dabei unterstützen. Der Gesamtaufwand bei Änderungen (andere Postition, zusätzlicher Hintergrund usw.) bleibt dennoch hoch.

Base64-Kodierung als Alternative

Statt alle Hintergründe in eine große Bild-Datei zu packen, lassen sich diese auch über eine Base64-Kodierung direkt in das Stylesheet integrieren. Das Bild wird dabei in eine 8-Bit Zeichenkette kodiert, die nur aus ASCII-Zeichen besteht. Der ursprüngliche URL-Verweis im Stylesheet wird anschließend durch die generierte ASCII-Zeichenkette ersetzt.

#branding h1 {
background: url(../images/branding.png) no-repeat;
}

#branding h1 {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEU==)
}

Selbstverständlich ist das manuelle Ersetzen der Bilder durch die Zeichenkette sehr aufwendig. Durch einen Parser lässt sich der Prozess jedoch automatisieren. Die Hintergrundbilder im Stylesheet werden mithilfe des Parsers automatisch durch kodierte Zeichenketten ersetzt.

CSS Cacheer

Einen solchen Parser hat Shaun Inman entwickelt. Mit CSS Cacheer stellt er einen mächtigen server-seitigen CSS Pre-Prozessor zur Verfügung, der neben der Base64-Kodierung auch Konstanten, Caching, Server-Import, Grids, CSS-Formatierung und weitere, über Plugins bereitgestellte Erweiterungen, verfügt.

Da die Base64-Kodierung sehr CPU-lastig ist, wird das resultierende Stylesheet gecacht. Der Parser kommt erst bei einer Änderung des Stylesheets erneut zum Einsatz.

<Directory /var/www/projectname/css>
	RewriteEngine	on
	RewriteCond		%{REQUEST_FILENAME}		-f
	RewriteCond 	%{REQUEST_URI}	     .css$
	RewriteRule 	^(.+)$ 				 /var/www/projectname/css/css-cacheer.php?cssc_request=%{REQUEST_URI}&%{QUERY_STRING}
</Directory>

CSS Cacheer im Einsatz

/* Processed and cached by Shaun Inman's CSS Cacheer (with BasedOn, Base64, Constants, NestedSelectors, Grid & Pretty enabled) on Wed, 11 Feb 2009 21:10:33 +0000 <http://shauninman.com/search/?q=cacheer> */
...

XML error: > required at line 1

CSS Cacheer: eine Alternative zu CSS-Sprites ist der erste Beitrag einer kommenden Serie, die sich internsiver mit CSS Cacheer befassen wird.

Thomas Fuchs, Autor des beliebten Javascript-Frameworks script.aculo.us und Amy Hoy, Autorin von Slash7 veröffentlichen eine Beta-Version ihres neuen eBooks Javascript Performance Rocks!

Das eBook richtet sich an alle, die Ihren Javascript-Anwendung mehr Performance entlocken wollen.

Wer sich über den Themenumfang informieren möchte, findet auf der Website ein vorläufiges Inhaltsverzeichnis.

Käufer der Beta-Version bekommen einen Preisnachlass von $ 5.

Wer mit der neuen Administrationsoberfläche von Wordpress 2.7 unzufrieden ist, sollte sich Fluency Admin 2.0 von Dean J. Robinson anschauen.

Version 2.0 wurde komplett neugeschrieben und ist nun kompatibel mit Wordpress 2.7. Besonders hervorzuheben ist die neue Seitennavigation, die neben aufspringenden Untermenüs eine Tastaturnavigation zulässt. Jede Administrationsseite (Plugin-Optionen ausgenommen) ist somit maximal einen Mausklick entfernt.

Weite Informationen zu Fluency 2.0 findet Ihr auf der Seite des Entwicklers.

Seit Jahren veröffentlicht Mark Boulton lesenswerte Artikel über Typographie, Layout und Design. Diese sind nun in überarbeiteter Form neben neuen Inhalten als Buch erhältlich.

5 Simple Steps: Designing for the Web richtet sich an Web Designer, Grafker, Web Entwickler und Alle, die Inhalte im Web veröffentlichen.

Das Buch hat 264 Seiten und ist in 5 Bereiche gegliedert:

1. Getting Started
2. Research & Ideas
3. Typography
4. Colour
5. Layout.

Es ist ausschließlich als PDF-Version erhältlich und kostet 12 £.

Wer noch unentschlossen ist, kann sich auf der Produktseite ein Beispielkapitel als PDF herunterladen.

Auf der Suche nach neuen und herausragenden Mac Anwendungen? AppStorm, das neue Blog von envato, hilft eventuell weiter.

Layers – Desktop Screenhots erstellen und als multilayered Photoshop Dokument speichern.

Nachdem Version 1.3 bereits am 14. Januar zur Verfügung gestellt wurde, veröffentlichen John Resig und das jQuery-Team nun Version 1.3.1 des populären Javascript-Frameworks jQuery. Als reines Bugfix-Release enthält es keine neuen Features.