Peter Kröner, Webdesigner & Frontendentwickler - Weblog und Portfolio von Peter Kröner, einem Webdesigner und Frontendentwickler aus Westerkappeln bei Osnabrück.

… und was es auch alles an tollen Webwork-Tools für normale Betriebssysteme gibt, solltet ihr die Anschaffung des in Kürze erscheinenden Buches Werkzeuge fürs Web in Erwägung ziehen. Darin gießt die Crew von Webwork-Tools.de das Konzept Ihrer Website ihr Buchform, präsentiert viele Tools und lässt vor allem auch eine Reihe anderer Webschaffenden ihre Lieblingsprogramme vorstellen – meine Wenigkeit durfte dabei sogar einen ganzen Gastbeitrag über die Vorzüge und Tücken des Linux-Webworkertums beisteuern. Und außerdem ist das Covermotiv ja wohl vom feinsten.

Es gibt eine neue Version (0.7) meines Zitierplugins für Wordpress. Die fünf kleinen Änderungen am Plugin selbst sind wahrscheinlich weniger interessant als die neue Heimat des Plugins auf Github. Dort werde ich einerseits endlich ein zentrales Endlager für all meine WP-Plugins und laufende projekte haben –kleine Codeschnipsel landen weiterhin im Wiki. Aber vor allem macht es Github einfacher, an meinen Projekten mitzubasteln. In der letzten Ausgabe der Links habe ich ja bereits auf dieses Video über Git und Github verwiesen. Wer das Video nicht gesehen hat oder Git nicht kennt, fragt sich jetzt vielleicht, wie genau das funktioniert und wozu das gut sein soll.

Github ist sowas wie StudiVZ für Programmierer, bei dem man statt peinlicher Fotos Sourcecode ins Netz stellt und nicht gruschelt, sondern sich gegenseitig die Projekte forkt. Rückgrat von Github ist das Versionsverwaltungssystem Git. Git wurde vom Linux-Schöpfer Linus Torvalds in die Welt gesetzt, der konsquenterweise die Nutzer von anderen solchen Systemen pauschal für stupid and ugly erklärt. Das ändert freilich nichts an der Tatsache, dass Git ein recht komplexes Tool ist – und hier greift Github mit seiner schicken Weboberfläche helfend ein … aber zuerst noch ein paar Git-Basics.

Git funktioniert in etwa so: Es gibt ein Projekt X, an dessen Dateien mehrere Personen arbeiten wollen. Git stellt die Technik zu Verfügung, mit der alle Beteiligten untereinander die Dateien synchronisieren und eventuell auftauchende Konflike (Personen A und B verändern zeitgleich die gleiche Datei) beseitigen können. Wenn eine neue Person in die Entwicklung einsteigen möchte, muss sich diese nur am Code eines der anderen Beteiligten bedienen. Weil es keinen zentralen Server gibt, haben alle Beteiligten quasi wie ihre eigenen kleinen Spezialversionen des Projekts – das lässt Chaos vermuten, aber wenn sich die Beiteiligten darauf einigen können, welche Teile der Entwicklung am Ende zusammen das Ganze ergeben, wen interessiert, wie viele Sub-Versionen es gibt? Bei Bedarf synchronisiert man sich eben wieder. Auch als Solokünstler kann man Git gebrauchen, denn so hat man stets alle Änderungen an seinem Projekt versioniert und kann auch bequem mehrere Entwicklungszweige gleichzeitig pflegen und bei Bedarf zusammenführen.

Github macht diesen ganzen nerdigen Krempel (von dem man natürlich nicht alle Funktionen zu nutzen braucht) bunt und webzwonullig. Wer sich bei Github einen Account zulegt und glaubt, etwas an einem Projekt verbessern zu können (oder einfach ein wenig daran herumspielen will), surft die Projektseite an und klickt auf den Fork-Button. Github legt einem dann ein neues Projekt an, kopiert die Daten aus dem Quellprojekt da hinein und zack – schon hat man seine eigene Subversion des Zitier-Plugins. Diese kann man sich dann via Git auf den heimischen Rechner holen und daran herumbasteln. Wenn man meint, etwas Gutes erreicht zu haben, schiebt man (wieder via Git) die neue Version zurück in seinen Github-Account.

Richtig interessant wird es, wenn man die Eigenentwicklungen in das Urspungsprojekt einfließen lassen möchte. In dem Fall kann man in Github eine entsprechende Anfrage an den Entwickler absetzen, der sich die Änderungen ansehen und sie in das Projekt holen kann. Und wenn das alles für Projekte wie Ruby on Rails, das Blueprint-Framework und Mootools zu funktionieren scheint, muss was dran sein. Also ergeht hiermit die Aufforderung an alle Nerds: Forkt mich!

Infos für den Einsteig bietet

• das offizielle Git-Tutorial,
• das Git-Einsteigertutorial von Sitepoint (das auch das git-GUI behandelt),
• das bereits erwähnte Video,
• und das kostenlose Buch Pro Git für alle, die es ganz genau wissen wollen.

P.S.: Github kann man statt für Open-Source-Kollektivismus auch für hochkommerzielle Geheimprojekte einsetzen, die nicht öffentlich zugänglich sind. Das kostet zwar, aber nicht viel.

Weil ich (neben der alltäglichen Webdesign-Arbeit) gerade in etwas involviert bin, das mir viel Zeit und noch mehr Schreiber-Energie aussaugt, verabschiedet sich dieses Blog in die vorgezogene Winterruhe. Das heißt nicht, dass ich hier jetzt gar nichts mehr schreibe, sondern nur dass die Post-Frequenz eingebremst wird. Die wöchentliche Linkliste wird, sofern es Material gibt, weiterhin jede Woche erscheinen und ansonsten wird es eben ein gutes Stück weniger zu lesen geben. Voraussichtlich zu Beginn des neuen Jahres wird es dann wieder in gewohntem Tempo weitergehen.

Nach über 8 Monaten Work-in-Progress-Status und nur 1,5 Monaten Verspätung nach meinem eigenen Zeitplan ist das neue Design endlich online.

Design

Im Vergleich zu früher eigentlich gar nicht so viel geändert. Evolution statt Revolution ist angesagt. Zu Erinnerung, so sah es vorher aus:

Ich wollte das Ganze etwas breiter und heller gestalten sowie ein paar Javascript-Spielereien einbauen. Außerdem kommt für Mobilbrowser das schon mal vorgestellte Mediatyping-Plugin mit einem entsprechenden Stylesheet zum Einsatz.

Technik

Die Seite verwendet HTML5, CSS3, Mootools und viele Wordpress-Plugins der Marke Eigenbau für diverse Kleinigkeiten. Und ein paar lustige CSS-Hacks:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #wrapperhead, head~body #wrapperfoot { position:relative; left:-1px; } }

html>/**/body #semi_live_preview_wrapper > div, x:-moz-any-link, x:default { overflow:auto !important; padding-bottom:20px; }

Der wesentlichste Unterschied zwischen dem Internet Explorer und sonstigen Browsern ist eben, dass ersterer mit den Conditional Comments eine zuverlässige Browserweiche anbietet und letztere einen zu Konstruktionen wie den obrigen zwingen.

Code-Highlighting – auch für Kommentare

Da wir es hier ja meist mit eher technischem Inhalt zu tun haben, bietet es sich an, für längere Codeabschnitte Syntaxhighlighting zu verwenden. Das gibt es ab jetzt sowohl für meine Posts als auch für Kommentare. Es können folgende Code-Tags verwendet werden:

• {html}{/html}: HTML
• {php}{/php}: PHP
• {js}{/js}: Javascript
• {css}{/css}: CSS
• {code}{/code}: Allgemeiner Code (kein Highlighting)

Das Escapen von HTML-Sonderzeichen zwischen den Tags passiert automatisch, man kann also bedenkenlos direkt HTML hineinschreiben:

{html}<p>
    Es gilt die <a href="/kontakt/datenschutz/">Datenschutzerklärung</a>.
</p>{/html}

… wird zu:

<p>
	Es gilt die <a href="/kontakt/datenschutz/">Datenschutzerklärung</a>.
</p>

Das Highlighting wird durch das patente Mootools-Plugin Lighter.js bereitgestellt. Einzige Voraussetzung ist ein vernünftiger Browser – der Internet Explorer unterstützt das Farbenspiel (zumindest im Moment) nicht.

Inhalt

Inhaltlich ist fast alles beim alten geblieben, was unter anderem daran liegt, dass ich die geplanten Neuerungen nur bedingt auf die Reihe bekommen habe. Startseite und Portfolio sind beide noch nicht wirklich fertig, besonders bei letzterem fehlt die Hälfte–  das wird dann im Laufe der Wochen nachgeliefert. Im Blog bleibt, das zur Entwarnung, inhaltlich alles wie bisher.

Baustellen

Ich wüsste gerne, warum das Highlighting im IE nicht fluppt. Sowohl die verwendete Framework-Version als auch der Highlighter selbst sind zwar Beta, aber kompletter IE-Ausfall ist doof. Wenn auch nicht wirklich schlimm. Falls jemand eine Ahnung hat, warum das so ist … ich wäre für Mitteilung dankbar. Ansonsten bin ich natürlich auch für die Meldung von Schreibfehlern und verbockten Darstellungen in exotischen Browsern dankbar.