Monatsarchive: Mai 2014

Wenn ein Entwickler Photoshop öffnet

In diesem Blogpost möchte ich einfach mal zeigen, dass auch ein Entwickler hin und wieder ganz ansehnliche Dinge produzieren kann. In der Kopfzeile steht übrigens nur Photoshop, weil das der Anfang war – damals noch mit einer Schülerversion von CS2 (lang ists her). Mittlerweile spare ich mir das Geld und setze komplett auf Pixelmator (siehe App-Store). Alle Ergebnisse (bis auf das Erste), welche hier zu sehen sind, stammen aus Pixelmator. Für mich eins der genialsten Programme in Sachen Preis/Leistung.

Damit das Ganze etwas chronologisch geordnet ist, fange ich mit einer Webseite an, welche ich bereits seit 2007 betreibe – mal mehr, mal weniger. Und bevor jemand fragt: Aktuelle ist eine „weniger“-Zeit.

Fotoseite: klein0r.de

Früher konnte ich den Content der Seite nicht so richtig zuordnen. Eigentlich war es für mich immer ein technischer Spielplatz… Kein richtiges Thema, wenig Inhalt und jede Menge PHP-Spielereien. Das „CMS“ ist von mir selbst geschrieben, und auch das Design ist auf meinem Mist gewachsen. So kann ich wenigstens sagen, dass die Seite zu 100% aus meiner Hand stammt. Nichts gekauft, kein fertiges Zeug genutzt. Würde ich heute bestimmt nicht noch einmal so machen – aber es hat mich zumindest in meiner Entwicklerlaufbahn weiter gebracht … zumindest bilde ich mir das ein:

klein0r.de - Design

Irgendwie ist es mir viel zu schade, das Ganze wegzuwerfen und beispielsweise durch Wordpress zu ersetzen – dafür ist einfach zu viel Arbeit reingeflossen. Aber über kurz oder lang wird irgendetwas mit der Domain passieren. Ich weiß nur noch nicht so genau was.

Portfolio: kleine-photo.com

Während die vorige Seite eigentlich mehr Blog als Galerie sein sollte, brauchte ich noch ein Portfolio. Dieses sollte vom Namen her auch mehr auf mich hinweisen. Nun möchte man natürlich auch nicht einfach irgendetwas zeigen, sondern nur das Beste. Daher ist der Inhalt dementsprechend schmal. Die Seite ist auch komplett selbst gebaut – so spare ich mir Wartungsarbeiten und Updates. Außerdem ist es ja bewusst schmal gehalten. Der Rahmen basiert auf dem CSS-Framework YAML – einfach aus dem Grund, dass es schnell gehen sollte. Ein richtiges CMS gibt es nicht – und auch keine Datenbank. Alles wird aus dem Filesystem geladen – so brauche ich nur einen Ordner mit Fotos in ein Verzeichnis packen, und das Teil macht den Rest. Optimal. Die Fotos werden dabei auch automatisch optimal angeordnet, um den Platz anständig zu nutzen.

Was ich zeigen möchte ist aber eher das Logo – das hat mich einige Zeig gekostet und etliche Entwürfe gebaucht. Ideen gab es jede Menge, aber nach einer kleinen Facebook-Abstimmung ist es schließlich folgendes geworden:

Logo kleine-photo.com

Später hat die Seite noch kleinere Spielereien bekommen, wie eine sticky Navigation mit ein paar Hover-Effekten, Lazy-Load der Bilder, einen Slider und vieles mehr. Insgesamt wirklich sehr schlank gehalten – das kommt den Ladezeiten zu Gute. Gefällt mir persönlich immer noch extrem gut. Nur der Inhalt fehlt am Ende ebenfalls. Viel Traffic ist dementsprechend auch nicht zu verzeichnen.

haus-automatisierung.com

Das Design der Seite ist gekauft und wurde per Child-Theme ein wenig angepasst. Insgesamt aber alles nichts wildes – eher funktional als spektakulär. Worauf ich ein wenig stolz bin, ist das Logo. Dieses wurde in maximal 30 Minuten mit Pixelmator gezaubert. Macht Euch selbst ein Bild:

Hausautomatisierung Logo

Ansonsten gab es natürlich noch jede Menge Kleinigkeiten, welche aber nicht so zeigenswert sind. Da ich für manche Dinge aber wirklich lange brauche, bleibe ich mit meinen Fingern aber doch lieber im Quellcode.

Neue Skills müssen her

Da man in seiner Magento-Welt schnell gefangen wird, und in der täglichen Arbeit in Projekten wenig neue Technologien kennen lernt, wird es mal wieder Zeit für ein kleines Skill-Upgrade.

Leider kommt man sich schon extrem fortschrittlich vor, wenn man sich den WordPress-Code so ansieht. Wer hier Objekte findet, hat schon gut gesucht. Ich kommt aber ein wenig vom Thema ab. Jedenfalls liest man momentan immer wieder von coolen Features, Frameworks und Workflows, welche das Leben sehr viel leichter machen sollen.

Es ist halt nicht mehr in genug, einfach nur CSS zu schreiben – hier behaupten sich schon länger SCSS oder LESS. Dann liest man immer mehr von AngularJS aus dem Hause Google. Weiterhin drängt HHVM/Hack in den Markt – dort möchte man natürlich auch mitreden können und alles wenigstens mal ausprobiert haben. Also habe ich mir ein neues Projekt gesucht, in welchem nun die folgenden Technologien einsetzen werde:

Symfony 2

Für viele ein alter Hut und schon lange verfügbar – ich hatte allerdings bisher noch nicht das Vergnügen. Das soll sich nun ändern. Als mal über den Zend-Tellerrand hinausgeschaut und auf in eine neue Welt. So viel anders wird das wohl alles nicht sein – aber irgendwoher muss der Fame des Frameworks ja stammen. Einige Kollegen schwärmten schon öfter über das Stück Software.

Bootstrap 3

Einfach nur der Vollständigkeit halber hier genannt – natürlich schon sehr oft eingesetzt und einiges umgesetzt. Es gibt wohl sicher mittlerweile kaum jemanden, der noch nie mit Bootstrap gearbeitet hat.

jQuery

Genau wie bei vorigem Punkt, brauche ich hier sicher keinen zweiten Satz anfangen. Obwohl, wenn ich es genau nehme, sind meine jQuery-Skills auch noch nicht auf 100%. Nichtmal ansatzweise. Natürlich versteht man alles, aber da ist es wohl wie beim Fremdsprachen lernen: Lesen/zuhören geht leichter als Schreiben. So gibt es sicher für alles was man selbst so baut einen einfacheren Weg. Zumindest sollte jQuery in keinem Projekt fehlen.

LESS

Wie oben schon genannt, möchte ich mich nicht mehr durch einen riesen Berg von CSS-Selektoren kämpfen. Ich bin sicher kein Talent für saubere und möglichst elegante CSS-Dateien. Ich schreibe eigentlich meist alles unten drunter, was ich mir so ausgedacht habe. Falls das nicht so einfach geht, wird mal fix eine neue Klasse eingeführt. Ich bin zwar nicht sicher, wie gut mich LESS dabei unterstützen wird, das zu verbessern, aber wenigstens schreibe ich unterm Strich weniger und die Dateien werden sehr viel strukturierter.

Composer

Klar, kennt man. Und hat man auch sicher schon öfter eingesetzt. Allerdings habe ich noch kein Projekt komplett auf Composer aufgebaut, sondern nur erweitert. Bei code-x verwenden wir z.B. eine komplette Eigenentwicklung (basierend auf modman), da Composer irgendwie nicht so richtig in Magento zu integrieren ist. Hier gibt es zwar einige Ansätze, aber so wirklich cool war davon noch nichts was ich gesehen habe.

Bower

Für mich, bis vor zirka einer Woche, noch völlig unbekannt. Gut, ich bin jetzt auch kein Frontendentwickler – daher hänge ich sicher in den ein oder anderen Themen hinterher. Jedenfalls ist Bower ebenfalls ein Paketmananger. Die Besonderheit: Hier versammeln sich nur Frontend-Bibliotheken wie z.B. jQuery oder Bootstrap. So muss man die Quellen nicht mehr mit den Repo hängen, oder über irgendein Google-CDN integrieren, sondern kann diese ganz bequem per „bower install“-Kommando deployen. Cool – läuft jedenfalls super.

Node / npm

Tja, das wurde wohl wirklich mal Zeit. Irgendwie habe ich node bisher nur als Webserver wahrgenommen – da das Teil von so gut wie keinem Hosting-Provider aktuell unterstützt wird, hatte ich es relativ früh abgestempelt. Aber das war wohl ein Fehler – hinter dem Paketmananger npm (wow, schon der dritte im Beitrag) stecken jede Menge Möglichkeiten. So nutze ich in dem neuen Projekt diverse Pakete – dazu gehören zum Beispiel:

  • Grunt
  • JsHint
  • Uglify
  • Grunt-Watch
  • Grunt-less

Grunt

Der JavaScript Task-Runner wird auch immer populärer. Hier kann man verschieden konfigurierte Tasks regelmäßig ausführen. Zusammen mit Watch wird das Ganze zu einem wirklich genialen Entwicklungshelfer, welcher meiner Meinung nach (für manche Tasks) sogar einige kostenpflichtige Lösungen abhängt.

Für LESS-Kompilierungen bei Dateiänderungen hatte ich bisher CodeKit im Einsatz. Für kleinere Projekte wird das auch sicher beibehalten – einfach weil es schneller einzurichten geht. Aber für große Projekte, an denen man mit mehreren Entwicklern arbeitet, wird sich für mich sicher Grunt durchsetzen. Allein aus dem Grund, dass die Konfiguration mit in der Versionskontrolle liegt, und die IDE nicht von jedem Entwickler einzeln erneut konfiguriert werden muss – das führt auf Dauer eh nur zu Fehlern.

RequireJS

Wenn wir schon alles mit JavaScript zukleistern, dann wenigstens performant. Mit RequireJS definiert man im jeweiligen Kontext, welche JavaScript-Dateien denn wirklich gebraucht werden. Im Head bindet man am Ende nur noch eine JavaScript-Datei ein, und diese macht den Rest. Top!

Meine neue Notebooktasche: LEABAGS Messenger Bag

Lange habe ich nach einer neuen Notebooktasche für die Arbeit gesucht – die Anforderungen standen relativ schnell fest:

  • Mein MacBook Pro 13″ inkl. Ladegerät muss reinpassen
  • Zusätzlich brauche ich noch Platz für etwas zu schreiben, ein iPad Mini
  • und ganz viel anderem Kleinkram
  • Sie sollte nicht ganz blöd aussehen,
  • nicht sehr riesig werden
  • und aus Leder sein (braun)

Jetzt müsste man denken, dass man diese Suche nach wenigen Minuten abschließen kann. Leider ist es etwas komplizierter. Keine Ahnung wofür manche Taschen hergestellt werden – aber für den Alltag bestimmt nicht. Vieles wirkt einfach nicht zu Ende gedacht und ist nicht brauchbar.

Entschieden habe ich mich am Ende für eine Tasche von LEABAGS – und zwar die Messenger Bag. Man muss dazu sagen, dass ich nicht von Anfang an vor hatte, um die 130 Euro für eine Tasche auszugeben. Aber wie das mit Lederprodukten nunmal ist, sind diese immer etwas teurer. Weiterlesen…

Magento: The ‚community‘ channel is not installed

Heute wollte ich eine Extension per Dateiupload installieren. Leider konnte dieser Vorgang auf einer frischen Magento-Installation nicht abgeschlossen werden. Ich habe keine Ahnung warum – die Meldung habe ich so zum ersten Mal gesehen. Scheinbar hängt es mit meiner PHP-Version zusammen, welche ich erst vor kurzem aktualisiert habe.

Lösung: Mage-Setup per Shell ausführen:

Die Ausgabe sollte wie folgt aussehen (oder ähnlich):

Wie man sieht, wurde der Channel erfolgreich angelegt. Bei Installationen über den Extension-Key hatte ich dieses Verhalten noch nie.

Magento: Service Temporarily Unavailable

Wenn man die Meldung „Service Temporarily Unavailable“ von Magento bekommt, liegt das an dem Wartungsmodus. Dieser sorgt dafür, dass während Updates und Installationen keine Seitenaufrufe generiert werden, welche unvollständigen Code ausführen.

In seltenen Fällen wird der Wartungsmodus aber nicht korrekt aufgehoben. So z.B. auch, wenn man eine Magento-Extension über den Paketmanager installiert und die Installation aus irgend einem Grund nicht abgeschlossen werden kann – denn erst am Ende würde der Modus wieder deaktiviert.

In diesem Fall muss man einfach das Maintenance-Flag löschen, welches im Magento-Root angelegt wird.

Danach funktioniert der Shop wieder wie zuvor (falls die unvollständige Installation nicht zu Problemen führt).

Magento 2 – was ich jetzt schon mag

Langsam aber sicher kommt Magento 2 näher. Mitte 2015 soll die erste offizielle Beta fertig werden. Da bin ich wirklich sehr gespannt was sich bis dahin tun wird. Ich finde es gar nicht schlimm, dass Magento 2 so lange auf sich warten lässt – besser, als wenn es ein Schnellschuss wird und an allen möglichen Ecken am Ende hakt. Leider ist es natürlich schon sehr aufwändig und extreme Fleißarbeit, den Core umzuschreiben und auf die neue Struktur zu bringen.

  • LESS-Support
  • jQuery statt Prototype
  • Translations, Templates, … liegen direkt unter jedem Modul – das heißt, dass Module nicht mehr über die komplette Ordnerstruktur verteilt werden – top!
  • Blank Theme wird mit ausgeliefert

Das Magento 2 allerdings ein komplett neues Produkt wird, merkt man nicht zuletzt daran, dass die Zertifizierung von Magento 1.x nicht auf die Version 2 übertragen wird – hier wird also ein neues Zertifikat fällig. Eigentlich unterm Strich auch nur konsequent. Die Frage ist, ab wann die Zertifizierung möglich sein wird. Zuvor muss man sicher schon einige Zeit mit dem Stück Software gearbeitet haben, denn auch die erste Zertifizierung hat man nicht geschenkt bekommen.

HTML templates für JavaScript mit Nano

Vor kurzem Stand ich vor einer Aufgabe, die sicherlich schon so gut wie jeder Entwickler kennt: Ich musste ein definiertes Stück HTML als Template nutzen, um es mehrfach auf der Seite zu platzieren. Soweit erstmal kein Problem – anstrengend wird es dann, wenn man Platzhalter innerhalb des Templates dynamisch austauschen möchte.

Mit dem Mini-Stückchen an JavaScript-Code von Nano ist das aber kein Problem. Im folgenden möchte ich die 9 Zeilen (ja, wirklich nur neun Zeilen – und das nichtmal minified) etwas schmackhaft machen.

Als erstes definiert ihr ein Template. Für mich war es glaube ich das erste Mal, dass ich einen anderen Typen als text/javascript im Script-Tag verwendet habe.

Das war es eigentlich auch schon – der Vollständigkeit halber hier noch der Ajax-Call:

Das zurückgelieferte JSON ist denkbar einfach aufgebaut:

Natürlich gibt es tausende von Template-Lösungen am Markt. Ich habe etwas länger suchen müssen, bis ich eine so schlanke Lösung gefunden habe, die genau das tut was ich möchte, und dabei auf sämtliche Frameworks verzichtet.