YellowLeds Weblog v2

This is how I work

nospam@example.com (Matthias Mees) — Fri, 10 May 2013 00:31:00 +0200

Zugegeben, in letzter Zeit war es vielleicht etwas viel mit den Workflow-Artikeln, aber Isabella hat das nochmal in einer Weise vorgegeben (und zwischenzeitlich auch katalogisiert), in der ich es sonst vermutlich nie betrachtet hätte. Schauen wir mal, was dabei raus kommt.

Bloggertyp: Reines Webwork-/Webdev-Fachblog
Gerätschaften (digital): Apple MacBook Air (Mitte 2012), LG P500 Optimus One (Android), Apple iPod Nano (4. Gen.)
Gerätschaften (analog): Wenn überhaupt, dann was gerade da ist. Normalerweise bedeutet das schwarze Tinte auf kariertem Papier.
Arbeitsweise: In Bezug auf bloggen? Spontan und unstrukturiert.

Welche Tools nutzt du zum Bloggen, Recherchieren und Bookmark-Verwaltung?

Dieses Blog läuft bekanntlich mit Serendipity und so wenigen Plugins wie unbedingt nötig. Seit ich unter OS X arbeite, schreibe ich gern in iA Writer, das ist – insbesondere für längere Texte – angenehmer als direkt im s9y-Backend. Zur Recherche, so ich denn welche mache, nehme ich meinen Kopf und Google; meine Bookmarks liegen auf Pinboard – üblicherweise in Form von reinen Links ohne großartige Anmerkungen. Die „Später lesen“-Ablage übernimmt ebenfalls Pinboard, sehr lange Artikel auf sehr unschönen Seiten reiche ich manuell durch an die entsprechende Funktion in QuoteFM.

Wo sammelst du deine Blogideen?

Gar nicht. Sehr selten habe ich angefangene Entwürfe als Markdown-Dateien aus iA Writer in iCloud rumliegen, aber normalerweise kommt mir ein Thema in den Sinn und dann blogge ich drauf los.

Was ist dein bester Zeitspar-Trick/Shortcut fürs Bloggen/im Internet?

Zum Bloggen fällt mir nur iA Writer ein – ich schreibe in Markdown vor, lasse HTML exportieren und kippe das in s9y. Für ein reines Markdown-Blog bin ich zu sehr control freak, aber gerade bei längeren Texten ist Markdown schon unfassbar praktisch.

Generell spart mir vermutlich nichts so viel Zeit wie Alfred, eine geniale OS X-App, die es ermöglicht, Dinge rein über die Tastatur auszuführen, die so seitens des Betriebssystems nicht unbedingt vorgesehen sind. Über die Tastatur sind geübte Benutzer nachweislich deutlich schneller als mit Trackpad oder Maus, Alfred potenziert das noch. Das gilt besonders im Zusammenspiel mit dem genialen Passwort-Manager 1password – Alt + Space, um Alfred zu öffnen, dann 1p, über Autovervollständigung den gesuchten Login finden und der Rest läuft automatisch. Mit bombensicheren Passwörtern, die sich niemand im Kopf merken könnte.

Benutzt du eine To-Do List-App? Welche?

Es gibt ToDo-Apps wie Sand am Meer, ich benutze mittlerweile nur noch das OS X-Bordmittel Reminders, ergänzt um Fantastical, welches es ermöglich, Termine und ToDos in „natürlicher Sprache“ anzulegen. Man gibt also in Fantastical z.B. ein „Termin Zahnarzt morgen um 15“ und – zack! – legt es daraus einen sauberen Termin mit korrektem Datum, Uhrzeit und Erinnerung zu voreingestellter Zeit vorher an. Irre praktisch.

Gibt es neben Telefon und Computer ein Gerät ohne das du nicht leben kannst?

Das hat zwar keinerlei Bezug zu bloggen oder Arbeit, aber meine WD TV Live, eine kleine Wunderkiste, die so ziemlich alles auf einem Fernseher abspielt, was an Medien auf angeschlossenen Festplatten zu finden ist, finde ich schon extrem praktisch, zumal ich kein Fan davon bin, Serien oder Filme auf einem kleinen Laptop-Display zu gucken.

Gibt es etwas, das du besser kannst als andere?

Siehe dazu unten unter „Der beste Rat den du je bekommen hast?“.

Was begleitet dich musikalisch beim Bloggen?

Meistens gar nichts. Ich höre eher bewusst Musik als nebenbei. Ansonsten unterscheidet sich das nicht von dem, was ich sonst so höre.

Wie ist dein Schlafrhythmus – Eule oder Nachtigall?

Man unterscheidet übrigens zwischen Lerche und Eule, aber egal. Ich bin eigentlich Eule, es bekommt mir aber besser, dennoch nicht allzu lange zu machen und einigermaßen früh aufzustehen, unter anderem, weil es mir nach einem langen Tag deutlich leichter fällt, einzuschlafen.

Eher introvertiert oder extrovertiert?

Eindeutig introvertiert, aber in homöopathischen Dosen mitunter extrovertiert.

Wer sollte diese Fragen auch beantworten?

Ich fände es spannend, wenn ein paar Webwork-Kollegen diese Sache aufgreifen würden, auch wenn so ein Artikel für unsere Blogs sonst eher untypisch ist. Außerdem hat Robert ein ähnliches Thema neulich mal für das s9y InfoCamp vorgeschlagen, also: bitte.

Der beste Rat den du je bekommen hast?

„Mach Dir bewusst: Es wird immer jemanden geben, der etwas Bestimmtes besser kann als Du. Das ist okay so, solange man trotzdem vernünftige Arbeit macht. Mach Dir deshalb keinen Stress.“

Noch irgendwas wichtiges?

Dieser allgemeine Wahn, alles zu archivieren und zu katalogisieren, worüber man im Netz so stolpert, erschließt sich mir nicht.

Wie ich arbeite – Edition 2013

nospam@example.com (Matthias Mees) — Fri, 08 Mar 2013 19:39:00 +0100

Im Januar 2012 beschrieb ich in einer dreiteiligen Artikelserie, wie ich arbeite. An meinem Setup hat sich in der Zwischenzeit einiges geändert – Zeit für ein Update.

Hardware

Vor mittlerweile 7 Monaten habe ich mein Thinkpad Edge durch ein MacBook Air (13 Zoll, Mitte 2012, 128 GB SSD) ersetzt. Ein Wechsel, der in erster Linie aufgrund der Hardware geschah: Ich wollte ein langlebiges, leichtes Notebook mit einem ebenso langlebigen Akku, idealerweise mit langer Laufzeit. Ein zeitgemäßes Display (soweit bei einem ultraportablen Notebook möglich) und eine anständige Tastatur waren mir ebenfalls relativ wichtig.

Die Entscheidung gegen ein entsprechendes Linux-System kam durch eine Mischung aus Frust über die Verwendung moderner (externer) Hardware (ohne lange Recherche) unter Linux und stetig sinkender Lust, an Hard- oder Software „basteln“ zu müssen, zustande. Ich habe einfach keinen Nerv mehr darauf, WLAN-Treiber selbst kompilieren oder einen Drucker-Treiber auf der japanischen Seite eines Herstellers suchen zu müssen. (Ja, beides sind echte Fallbeispiele.)

Auf einem reinen Windows-System zu arbeiten habe ich nie in Erwägung gezogen – es ist nervig genug, ein separates Windows-System zu haben oder virtuelle Maschinen oder externe Dienste bemühen zu müssen, um Webseiten im Internet Explorer zu testen.

Grundsätzlich hat das MacBook Air alle Erwartungen mehr als erfüllt, es ist für mich derzeit das ideale Notebook.

Ergänzende Hardware

Die alte Backup-Festplatte wurde durch eine Verbatim Store 'n' Go 512 GB ersetzt – erheblich flotter dank UBS 3.0 und ohne externes Netzteil auch deutlich portabler. Als Headset für Skype und Podcasts verwende ich mittlerweile Apple Earpods mit Mikrofon – wobei zumindest für Skype auch das integrierte Mikrofon des MBA völlig ausreicht.

Software

Ich habe schon unter Linux relativ viel Software verwendet, die auch für OS X zur Verfügung steht, z.B. Browser und Texteditor, zwei für mich ganz wesentliche Werkzeuge. Da OS X ebenfalls einen Unix-Kern hat, ist die Schnittmenge mit Linux (insbesondere bei Kommandozeilen-Tools) sogar recht hoch – selbst die beiden Programme aus dem ursprünglichen Artikel, die ich nicht mehr verwende, gibt es für OS X, ich habe lediglich (für mich) bessere Alternativen gefunden.

Yummy FTP ersetzt FileZilla – das für mich immer mehr Notlösung denn gerne benutztes Werkzeug war – als FTP-Client, anstelle von Gimp verwende ich nun Pixelmator für Foto- und Grafikbearbeitung. Pixelmator ist letztlich nicht mal besonders anders als Gimp, fühlt sich aber als native Anwendung einfach besser an – das gilt z.B. auch für Apple Mail anstelle von Thunderbird und Numbers und Pages als Ersatz für Libre Office.

Webdev

Bei den Web-Werkzeugen hat sich nicht viel getan – den Wechsel zu Grunt als neues Build-Tool hatte ich ebenso bereits beschrieben wie mein neues Lieblings-CMS ProcessWire.

Responsive Grafiken: Merkwürdige Bugs

nospam@example.com (Matthias Mees) — Wed, 06 Mar 2013 02:42:00 +0100

So langsam ist Responsive Webdesign ja fast ein alter Hut. Wer sich nicht erst seit gestern damit befasst, hat die wichtigsten Techniken mittlerweile verinnerlicht, so zum Beispiel die fluid images nebst Ergänzung. In CSS-Code sieht das dann so aus:

img {
    height: auto;
    max-width: 100%;
}

Das Ganze ergänzt man ggf. noch um eine serverseitige Skalierung von Grafiken – z.B. mittels Adaptive Images – und fertig. Nein, nicht unbedingt.

Wir bemühen uns natürlich ganz zeitgemäß, (Raster-)Grafiken nur noch da einzusetzen, wo sie nicht zu vermeiden sind, etwa für Logos oder Fotos. Icons kann man mittlerweile sehr gut über Iconfonts erzeugen, Verläufe viel flexibler über CSS3 mittels linear-gradient und auch Image-Replacement sieht man dank Webfonts kaum noch.

Spaß mit Javascript

Unterhaltsam (auch in Sachen Debugging) kann es werden, wenn Javascript ins Spiel kommt. Verwenden z.B. jQuery-Plugins über das img-Element eingebundene Grafiken, wird das pauschale Styling aus dem oben gezeigten Codebeispiel natürlich auch auf diese angewendet. Mitunter kommt man dann aber nicht direkt darauf, dass CSS für die resultierenden Bugs verantwortlich ist – wenn Javascript im Spiel ist, liegt die Vermutung näher, dass damit etwas nicht stimmt.

Mir sind bislang zwei Fälle begegnet, in denen genau das der Fall war und in denen die damit verbundenen Darstellungsfehler nicht so ganz offensichtlich waren.

Google Maps mit jQuery-gMap

jQuery-gMap ist ein beachtlich schlankes, sehr flexibles jQuery-Plugin, welches das Einbetten von Google Maps relativ schmerzfrei macht. Die Steuerungselemente einer Karte sind dabei z.T. img-Elemente. Erhalten diese max-width: 100%, sieht die Karte fast ein wenig aus, also könnten diese Rastergrafiken nicht korrekt geladen werden, wie der folgende Screenshot zeigt:

Lösung: img-Elemente innerhalb der Karte erhalten max-width: none.

(Interessanterweise tritt der Effekt nicht auf, wenn man den HTML-Code zum Einbetten in eine Website – mittels iframe – verwendet, den Google Maps vorgibt, da dabei die entsprechenden Grafiken über Inline-CSS feste Breiten zugewiesen bekommen.)

Lightbox mit Colorbox

Auch Lightbox-Skripte wie Colorbox können (ich habe es bislang nur mit diesem speziellen Plugin getestet) merkwürdig auf max-width: 100% reagieren. Im Fall von Colorbox tritt der Bug nur im IE8 auf (nicht aber im IE7) und ist schwierig zu beschreiben – die Lightbox öffnet sich vermeintlich normal, klappt jedoch umgehend zusammen, als habe das Lighbox-Overlay eine Breite von null Pixeln zugewiesen bekommen.

Lösung: Die in der Colorbox angezeigte Grafik erhält max-width: auto. Das Elternelement dazu ist #cboxLoadedContent – sollte dieser Effekt auch in anderen Lighboxen auftreten, muss der Code natürlich angepasst werden.

Alternativ könnte man natürlich nur solchen Grafiken den „fluid img“-Code zuweisen, die ihn ausdrücklich erhalten sollen (etwa über eine Klasse), das dürfte aber in den meisten Fällen umständlicher sein als zwei Ausnahmeregeln zu schreiben.

Sass: @extend vs @media

nospam@example.com (Matthias Mees) — Sun, 03 Mar 2013 16:26:00 +0100

Im letzten Adventskalender der Webkrauts schrieb Mathias Schäfer über CSS-Modularisierung mit Sass, insbesondere über die Nutzung von Platzhalter-Selektoren in Verbindung mit @extend. Richtig angewandt eine sehr effektive Technik, um mittels Sass generierte Stylesheets (ebenso wie das damit verbundene Markup) übersichtlich, schlank und wartbar zu halten.

Was leider nicht geht

Ich bin neulich über eine Besonderheit beim Einsatz von @extend gestolpert, welche die Nutzung in Responsive Webdesign leider einschränkt: @extend kann innerhalb eines Media-Queries nur auf Klassen oder Platzhalter-Selektoren zugreifen, die innerhalb des zugehörigen @media-Blocks stehen.

Ein Beispiel

Folgender Code funktioniert in Sass nicht und erzeugt eine Fehlermeldung:

%inblock {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

@media only screen and (min-width:40em) {
    nav li {
        @extend %inblock;
    }
}

Es spielt dabei keine Rolle, ob auf einen Platzhalter-Selektor oder eine CSS-Klasse zugegriffen wird – wenn dieses Beispiel funktionieren soll, muss die „Basisklasse“ innerhalb des @media-Blocks stehen.

Bis zu Version 3.1 von Sass war das übrigens noch möglich, es bläht jedoch laut Sass-Dokumentation das erzeugte Stylesheet unnötig auf, da an verschiedenen Stellen Kopien desselben Codes eingefügt werden müssen. Angesichts der Tatsache, dass es – gerade für Sass-Neulinge – relativ einfach ist, mit Sass unnötig große Stylesheets zu generieren (z.B. indem man durch übermäßig tiefe Verschachtelung unnötige Selektoren erzeugt), ist jede Maßnahme sinnvoll, eben das „intern“ zu verhindern.

Alternativen

Wenn der Selektor, der das @extend anwendet, innerhalb eines @media-Blocks stehen muss, kann stattdessen ein Mixin verwendet werden, ggf. (aber das dürfte vom konkreten Anwendungsfall abhängen) innerhalb eines doppelten Platzhalter-Selektors außer- und innerhalb des Media-Queries.

Build-Skript: Errata

nospam@example.com (Matthias Mees) — Wed, 20 Feb 2013 14:51:00 +0100

Seit zwei Tagen ist Version 0.4 von Grunt da. Mit diesem Versionssprung wurden einige Änderungen eingeführt, die sich auch auf mein Build-Skript auswirken.

„Meine“ Grunt-Plugins

Durch die Auslagerung der vorher im Kern enthaltenen Tasks in Plugins sind ein paar hinzu gekommen, weitere Plugins habe ich durch andere ersetzt, weil sie (noch) nicht mit Version 0.4 funktionieren oder neue Plugins interessante Funktionen bieten. Seit Grunt 0.4 verwende ich:

Die contrib-Plugins sind insbesondere deshalb empfehlenswert, weil sie vom Grunt-Team verwaltet werden, bei ihnen dürfte also eine gewisse Qualitätskontrolle und regelmäßige Wartung gewährleistet sein.

Aufgaben des Build-Skripts

Hier hat sich eigentlich nicht viel geändert, die Tasks haben nur z.T. andere Bezeichner. Zum (umbenannten) Gruntfile ist zudem ein kurzer Abschnitt, der von grunt-contrib-livereload benötigt wird, hinzu gekommen, teilweise hat sich auch die Syntax der Konfiguration geändert. Einige der contrib-Plugins bieten auch deutlich mehr Möglichkeiten zur Konfiguration als ihre Vorgänger, insbesondere grunt-contrib-compass.

Aber im Prinzip tut das Build-Skript dasselbe wie vor der Umstellung.