Homebrew unter Mac OS X 10.11 El Capitan nutzen

Mit dem Upgrade auf El Capitan führt Apple ein SIP genanntes Sicherheitsfeature ein. Dieses verändert die Zugriffsrechte des Ordners /usr/local/ und verhindert die Nutzung von Homebrew. Der von $ brew doctor angezeigte Warnhinweis sieht folgendermaßen aus:

Warning: The /usr/local directory is not writable.
Even if this directory was writable when you installed Homebrew, other
software may change permissions on this directory. Some versions of the
"InstantOn" component of Airfoil are known to do this.

You should probably change the ownership and permissions of /usr/local
back to your user account.

Abhilfe schafft das manuelle Ändern der Zugriffsrechte für diesen Ordner:

$ sudo chown -R $(whoami):admin /usr/local

Links

El Capitan & Homebrew

Schrift-Metadaten mit TTX/FontTools bearbeiten

TTX/FontTools in Aktion
Nach der Installation von TTX/FontTools folgt nun ein Beitrag zur Nutzung.

Erzeugen der XML-.ttx-Datei

TTX/FontTools ist ein Kommandozeilentool, daher wird es ausschließlich mit dem Terminal bedient und hat kein GUI. Das macht aber überhaupt nichts, denn die Nutzung ist denkbar simpel: Mit

$ ttx /User/paul.ablass/Desktop/SWBTH___.TTF

wird der Befehl gegeben, die TrueType-Schrift SWBTH___.TTF in das XML-basierte Format .ttx umzuwandeln. Als Ergebnis erhält man eine Datei SWBTH___.ttx im Quellordner.

Anpassungen in der .ttx-Datei

Nun können die gewünschten Anpassungen in der .ttx-Datei vollzogen werden. Dazu reicht ein normaler Text-Editor oder eine IDE zum Öffnen und Bearbeiten der Datei aus.
In meinem Fall musste ich dem Heavy-Schriftschnitt der Swiss721BT beibringen, dass er nicht regular ist (auf Grund eines Konfliktes bei der Installation vieler Schriftschnitte der Swiss721BT, die sich alle als regular-Schnitt ausgaben). Dazu genügte es, alle Vorkommen von regular durch heavy zu ersetzen.

Export als Schrift

Nachdem alle gewünschten Änderungen erledigt sind, kann TTX/FontTools die .ttx-Datei wieder zurück ins TrueType-Format umwandeln und so eine neue Version der Ausgangsschrift erzeugen.

$ ttx /User/paul.ablass/Desktop/Swiss721BT.ttx

Heraus kommt die neue Datei Swiss721BT.ttf, die alle gemachten Änderungen beinhaltet und ganz normal weiterverwendet werden kann.

Links

Using TTX to rename fonts

TTX/FontTools auf dem Mac installieren

Was ist TTX/FontTools?

TTX/FontTools ist ein kostenloses Kommandozeilenprogramm, dass Schriften im TrueType- und OpenType-Format in XML-Dateien umwandelt und dadurch das einfache Bearbeiten von Schriftmetadaten ermöglicht. Beispielsweise kann so unter anderem der Schriftname verändert werden- ein Feature, dass ich heute benötigt habe.

Wie installiere ich es?

Von der Projektseite muss das Dateiarchiv heruntergeladen und entpackt werden. Anschließend navigiert man im Terminal in den so entstandenen Ordner:

$  cd fonttools-2.4

Im Ordner selbst befindet sich die Datei setup.py, die zum Installieren von TTX/FontTools mit Python (auf dem Mac normalerweise vorinstalliert) ausgeführt werden muss:

$ sudo python setup.py install

Nachdem der Installationsprozess durchgelaufen ist, kann TTX/FontTools im Terminal benutzt werden- aber dazu mehr in Schrift-Metadaten mit TTX/FontTools bearbeiten.

Links

TTX/FontTools@SourceForge
Installing TTX for the command-line challenged

Tool: Sass Globbing Plugin

Mit Hilfe des Sass Globbing Plugins können viele scss-Dateien auf einmal importiert werden. Sehr hilfreich beim Import einzelner Mixin-Dateien, oder wenn es viele separate Stylesheets für einzelne Module gibt.

Installation

$ gem install sass-globbing

Einbindung in config.rb

require 'sass-globbing'

Benutzung

Um beispielsweise viele einzelne Modul-Stylesheets einzubinden:

@import "_mod*";

Compass: Mehrere Css-Transformationen verknüpfen

Compass bietet out of the box eine ganze Reihe von Mixins zur einfachen Nutzung von verschiedenen Css-Transformationen an. Leider gibt es bei der Bündelung dieser Transformationen in einem Mixin einige kleine Fallstricke, die ich erst nach und nach entdeckt habe und aus Archivierungsgründen festhalten möchte.

Die transform()-Mixins von Compass

Es gibt prinzipiell drei Compass-Mixins die zum Erstellen von mehreren verknüpften Transformationen in Frage kommen:

  1. transform()
  2. create-transform()
  3. simple-transform()

Allerdings wird in der transform-Dokumentation von der Nutzung von create-transform() abgeraten:

Full transform mixins For settings any combination of transforms as arguments These are complex and not highly recommended for daily use. They are mainly here for backward-compatibility purposes.

Bleiben also lediglich transform() und simple-transform().

Compass oder Grunt-Compass?

Grundsätzlich muss unterschieden werden zwischen einem standalone laufenden Compass und dem Grunt-Task grunt-contrib-compass: Was nämlich beim standalone laufenden Compass funktioniert, muss nicht zwangsläufig beim Grunt-Compass-Task funktionieren…

Grunt

simple-transform()

Beim Aufruf von simple-transform() wird folgende Fehlermeldung ausgegeben:

(Line 565 of _transform.scss: Mixin transform-origin takes 1 argument but 4 were passed.)

Somit ist dieses Mixin nicht benutzbar.
Vielleicht habe ich auch etwas falsch gemacht. Falls ja, bin ich für Hinweise äußerst dankbar.

transform()

Für das transform()-Mixin schlägt die Dokumenation (dem Link folgen und nach @include transform suchen) folgende Notation vor:

@include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));
@include transform-origin(100%, 0%);

Das funktioniert nicht und wird mit der Fehlermeldung „Mixin transform-origin takes 1 argument but 2 were passed.“ quittiert. Beim Suchen nach diesem Fehler stößt man recht schnell auf die Lösung: Einfach das Komma im transform-origin-Mixin weglassen. Somit ergibt sich folgende, tatsächlich funktionierende Notation:

@include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));
@include transform-origin(100% 0%);

Äußerst wichtig: Im Gegensatz zu den beiden anderen vorgestellten Mixins kann background-origin nicht innerhalb des Mixins angegeben werden, sondern muss in einem separaten transform-origin-Mixin angegeben werden. Alles andere wäre auch zu einfach.

Standalone Compass

Benutzt man Compass ohne Grunt, sieht die Sache etwas anders aus: Dort funktioniert das simple-transform-Mixin. Zumindest so einigermaßen.

simple-transform()
@include simple-transform(1.5, 45deg, 1em, 2em, 5deg, -5deg, 100%, 0%);

Einigermaßen deshalb, weil das Weglassen von Werten mittendrin mit Fehlermeldungen und Nicht-Funktionieren bestraft wird. Wenn man also nicht jedes Mal alle Werte aufschreiben möchte, ist dieses Mixin doch eher ungeeignet (Fun Fact: simple-transform ist eigentlich genau das selbe wie create-transform, nur werden bereits im Voraus bestimmte Parameter exkludiert. Daher eignet es sich also nicht, wenn man beispielsweise die Perspektiv-Eigenschaft nutzen möchte. Facepalm-Smiley. Fröhlicher Smiley.).

transform()

Auch bei einer Standalone-Nutzung von Compass funktioniert das transform-Mixin. Hier muss allerdings das Komma im transform-origin-Mixin gesetzt werden. Mit anderen Worten: Es funktioniert tatsächlich genau so wie in der Dokumentation angegeben.

@include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));
@include transform-origin(100%, 0%);

Ist doch alles ganz einfach, oder?

tl;dr

Mit Grunt

@include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));
@include transform-origin(100% 0%);

Standalone Compass

@include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));
@include transform-origin(100%, 0%);

Versionshinweis

Gestestet wurde mit Sass 3.3.5 und Compass 1.0.0.alpha.19.

Css3-Verläufe als Grafik exportieren

Der Export von Verläufen aus Grafiken in Css3 ist dank Tools wie dem Ultimate CSS Gradient Generator ein Kinderspiel. Manchmal besteht jedoch die Notwendigkeit, diesen Prozess umzukehren und einen Css3-Verlauf in eine Grafik umzuwandeln. Bislang kannte ich nur zwei Möglichkeiten, dies zu bewerkstelligen:

  • Einen Screenshot des Verlaufs anfertigen. Diese Methode ist jedoch ungeeignet, wenn der Verlauf Transparenzen enthält.
  • Den Verlauf in Photoshop/ dem Grafikprogramm der Wahl nachbauen. Bei Verläufen mit vielen color stops und Transparenzen ist das allerdings ein Heidenaufwand und auch ziemlich langweilig monoton

Darum habe ich mich etwas schlau gemacht und eine unglaublich einfache Methode gefunden, bei der die Art des Verlaufs (viele color stops, Transparenzen) keine Rolle spielt und die außerdem noch sehr schnell geht.

tl;dr

In Kurzform: Mit dem PhantomJS-Task rasterize wird der in einer separaten Datei liegende Verlauf gerendert und der Output als .png-Datei abgespeichert.

PhantomJS unter Mac OS X installieren

PhantomJS bezeichnet sich selbst als headless WebKit scriptable with a JavaScript API. Dahinter steckt eine über das Terminal bedienbare Webkit-Engine ohne GUI, mit der beispielsweise Tasks für Tests oder Screenshots automatisiert werden können.

Die Installation ist schnell erledigt: Gemäß Anleitung PhantomJS and Mac OS X wird ein Zip-Archiv heruntergeladen, entpackt und die ausführbare PhantomJS-Datei in den Ordner /usr/bin/local/ ($PATH) verschoben.
Da PhantomJS für seine Tasks auf JavaScript- oder Coffeescript-Dateien zurückgreift und ich diese nicht in /usr/bin/local/ rumliegen lassen wollte, habe ich einen anderen Ordner als Speicherort gewählt und einen auf /usr/bin/local/ verweisenden Symlink erstellt.

$ sudo ln -s /Pfad/zu/PhantomJS /usr/local/bin/

Eine Website rendern und den Output als .png speichern

Im extrahierten Zip-Archiv befindet sich auch ein examples-Verzeichnis, in dem die Datei rasterize.js liegt. Diese beinhaltet den benötigten PhantomJS-Task, der eine Website rendert und den Output in einem definierbaren Dateiformat speichert (mehr dazu auf der Seite Screen Capture im PhantomJS-Wiki).
Um nun allein den Verlauf abzuspeichern, muss dieser in vanilla Css in einer Beispiel-Html-Datei eingebunden werden. Ich habe mir dazu eine Datei gradient2image.html erstellt, die lediglich folgenden Code beinhaltete:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>gradient2image</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 45px,rgba(0,0,0,0.75) 60px,rgba(0,0,0,0.85) 75px,rgba(0,0,0,0.95) 90px,rgba(0,0,0,1) 135px,rgba(0,0,0,1) 100%);
       background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 45px,rgba(0,0,0,0.75) 60px,rgba(0,0,0,0.85) 75px,rgba(0,0,0,0.95) 90px,rgba(0,0,0,1) 135px,rgba(0,0,0,1) 100%);
      }
    </style>
  </head>
  <body></body>
</html>

Zu beachten ist dabei, dass PhantomJS eine vollwertige Webkit-Engine mit allen Stärken und Schwächen ist- daher müssen auch vendor prefixes angegeben werden, da es ansonsten vorkommen kann dass der Verlauf nicht angezeigt wird.

Nachdem die Datei angelegt ist, wird der rasterize-Task vom entsprechenden Ordner mit der Option, den Output als .png-Datei zu speichern, ausgeführt.

$ phantomjs rasterize.js /Pfad/zur/gradient2image.html /gewünschter/Output-Pfad/für/rasterize-output.png

Et voilà- da ist er, der Verlauf. Sauber exportiert von Css3 in eine .png-Datei.