Lesetipp: Frontend Feeds

Louis Lazaris von Impressive Webs hat gestern eine Liste von Blogs und Magazinen für Frontend Developer auf GitHub veröffentlicht. In den Frontend Feeds ist das Who’s Who der englischsprachigen Frontend-Szene enthalten. Wer also auf der Suche nach eventuellen neuen Quellen ist, um auch weiterhin up to date zu bleiben im schnelllebigen Frontend-Bereich, sollte dort einmal vorbei schauen.

Ordnerübergreifendes Suchen und Ersetzen in der Bash

Wer kennt es nicht: In einer größeren Anzahl von Dateien in verschiedenen Unterordnern soll ein bestimmtes Wort/ eine Wortgruppe ausgetauscht werden. Prinzipiell eine eher unschöne Situation, die leicht in Arbeit ausarten kann- und das kann ja nun wirklich niemand wollen. Doch halt, Rettung ist in Sicht: In der Bash geht das ordnerübergreifende Suchen und Ersetzen kinderleicht und superschnell. Alles, was dafür gebraucht wird sind die Befehle find und sed sowie der Parameter xargs, der hier auch schon einmal vorgestellt wurde.

Der konkrete Fall

In meinem Fall handelte es sich um eine Textänderung: Der String „Senderwahl“ sollte in sehr, sehr vielen .hbs-Dateien zu „Senderauswahl“ geändert werden.

Den Suchstring finden und ersetzen

find macht genau das, was der Name vermuten lässt: Es findet Dateien und Ordner in einem Verzeichnis. sed ist ein skriptgesteuerter Texteditor zum Bearbeiten von Datenströmen.

$ find . -name "*.hbs" -print | xargs sed -i 's/Senderwahl/Senderauswahl/g'

Im ersten Teil geben wir sämtliche .hbs-Dateien im gerade aktiven Ordner und allen Unterordnern als Liste aus (-p-Parameter). Das Ergebnis dieser Ausgabe wird mittels xargs an den Streameditor sed übergeben, der in den gefundenen Dateien (-i-Parameter) alle Vorkommen von „Senderwahl“ gegen „Senderauswahl“ austauscht.

Links

find manpage
sed manpage

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.

svn remove rückgängig machen

Dateien, die mittels svn remove gelöscht wurden, können schnell und einfach mit dem folgenden Befehl wiederhergestellt werden:

$ svn export [Link/zur/Datei/im/Projektarchiv]@[Versionsnummer]

Die Revisionsnummer bezieht sich dabei auf die letzte Revision, in der die Datei noch existierte. Wenn also mit Revision 43 die Datei index.html gelöscht wurde, wählt man folglich Revision 42 um den letzten Stand der Datei vor der Löschung wiederherzustellen:

$ svn export https://subversion.paulchr.ablass.me/svn/starter-kit/trunk/index.html@42

Links

svn export

Nachtrag

In einer älteren Version des Artikels stand, dass Dateien mit svn update -r[Revisionsnummer] [Pfad/zur/Datei] wiederhergestellt werden können. Das ist leider nur halb richtig, da auf diese Weise wiederhergestellte Dateien nach dem nächsten svn update erneut gelöscht werden.

Lesetipp: Ein Zwischenstand zu responsive images

A Q&A on the Picture Element ist ein guter Ausgangspunkt, um sich auf den aktuellen Stand der Entwicklung bei responsives images zu bringen. Zum einen wird ein kurzer Abriss des bisherigen Entwicklungsprozesses gegeben und zum anderen bietet der Artikel genug Links und Schlagworte für eine vertiefende Recherche. Die momentan™ angestrebte Implementierung für responsive images besteht wohl aus einer Verschmelzung von srcset und dem <picture>-Element:

<picture>
    <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
    <source srcset="small.jpg 1x, small-hd.jpg 2x">
    <img src="fallback.jpg" alt="">
</picture>

Mehr dazu kann man auf der Website der Responsive Images Community Group erfahren.