SASS automatisch mit File Watchers in PhpStorm kompilieren

Im ersten Beitrag dieser kleinen Beitragsreihe habe ich euch gezeigt, wie ihr SASS installieren und manuell mit dem Terminal kompilieren könnt. Aber dieser Weg ist nicht besonders nutzerfreundlich und man kann schnell mal vergessen den Compiler/Watcher zu starten, wenn man an einem Projekt arbeitet.

Einen File-Watcher erstellen

Der einfachste Weg, einen File-Watcher zu erstellen ist es, einfach eine SASS-Datei zu öffnen. PhpStorm erkennt diese und zweigt auch eine kleine Benachrichtigung oberhalb des Dateiinhalts an. Klickt hier einfach auf "Yes" und ihr gelangt zu den Einstellungen:

Falls ihr die Benachrichtigung nicht sehr, könnt ihr über "File | Settings | Tools | File Watchers" ebenfalls zur Einstellung navgieren. Hier klickt ihr auf der rechten Seite auf das grüne Plus-Symbol und fügt einen neuen File-Watcher für SCSS hinzu (nicht SASS, da dies der File-Watcher für Dateien im .sass Format mit der alternativen Syntax ist, die nur noch sehr selten eingesetzt wird):

Die Einstellungen des File-Watchers anpassen

Die Standardeinstellungen sind schon ganz gut. PhpStorm wird vermutlich selbst rausfinden, wo sich der sass Befehl befindet. In meinem Fall ist es ein Windows Dateipfad:

Eine Option, die ich in der Regel ändere sind die "Argument" Einstellungen. Ich bevorzuge den "expanded output style" und nicht den "nested style", da er mehr wie normales CSS aussieht, so wie man es manuell schreiben würde. Meine "Arguments" Einstellung sieht wie folgt aus:

--style expanded --no-cache --update $FileName$:$FileNameWithoutExtension$.css

Fazit

Das war es schon. Ab sofort werden alle Änderungen in SCSS Dateien automatisch in CSS Dateien kompiliert (ihr müsst die Dateien nicht mal explizit speichern). Der File-Watcher erkennt sogar Änderungen in solchen Dateien, die lediglich in andere importiert wurden. Wenn ihr gerade nicht wisst, was ich damit meine, wartet einfach auf meinen nächsten Beitrag, in dem ich auch die Grundlagen von SASS eingehen werde.

Hinweis: Falls ihr "Tools | Deployment" verwendet, um Änderungen in PhpStorm automatisch an einen FTP-Server zu senden, dann müsst ihr "Upload external changes" in den "Option" aktivieren, da ansonsten die kompilierte CSS Datei nicht hochgeladen würde.

Ein intensives Jahr im Rückblick

Zuerst einmal ein frohes neues Jahr euch allen! Ich hoffe ihr seid alle gut ins Jahr 2018 gestartet. Da ihr vermutlich gemerkt habt, dass ich in den letzten Wochen nicht gebloggt habe, möchte ich euch einen kleinen Rückblick über das letzte Jahr geben, sowie meine Pläne für dieses Jahr.

#Projekt52 zweisprachig

Für 2017 hatte ich geplant, meinen wöchentlichen Veröffentlichungsrhytmus fortzusetzen. Aber anders als zuvor wollte ich immer zuerst auf englisch bloggen und den Beitrag dann in der folgenden Woche ins Deutsche übersetzen.

In den ersten 11 Monaten hat es auch super funktioniert. Ich habe mindestens einmal pro Woche gebloggt und dabei auch gleich noch ein paar kleine Plugins erstellt. Aber dann kam der Dezember und die Frage, ob ich erneut einen Adventskalender machen könnte, nur dieses mal in zwei Sprachen.

Der Adventskalender 2017

Vielleicht werdet ihr nun sagen, dass ich verrückt oder zu ambitioniert war, aber ich habe trotzdem im dritten Jahr in Folge einen Adventskalender gestartet, obwohl ich keinen einzigen Beitrag vorbereitet hatte. Die ersten 9 Tage lief auch alles richtig gut. Manchmal habe ich den Beitrag erst nach Mitternacht veröffentlicht, aber ich habe es dennoch geschafft einige interessante Themen zu finden. Aber dann ich meine Serie abgebrochen.

Prioritäten setzen

Das Bloggen ist für mich noch immer nur ein Hobby. Es macht mir zwar sehr viel Spaß mein Wissen zu teilen und Reaktionen darauf zu bekommen. Aber es gibt wichtigere Dinge im Leben und dieses Jahr haben mich Freunde und Familie mehr gebraucht als meine Leserinnen und Leser. Nachdem ich also etwa eine Woche keinen neuen Blogbeitrag veröffentlichen konnte, habe ich beschlossen, für den Rest des Jahres eine Pause einzulegen. Denn beim Versuch das alles nachzuholen wäre ich vermutlich ausgebrannt.

Pläne für 2018

Wie sehen also meine Pläne für dieses Jahr aus? Mit meinem letzten Beitrag vom 10. Dezember habe ich eine kleine Blogserie gestartet. Obwohl die Idee zu dieser Reihe nicht mehr so aktuell ist, hoffe ich dennoch, dass es interessant bleibt. Ich werde auch dieses Jahr wieder zweisprachig bloggen. Und ich werde auch wieder versuchen einen Adventskalender zu schreiben. Vielleicht schaffe ich es ja dieses Mal ein paar Beiträge vor dem 1. Dezember vorzubereiten 😉

Wenn ihr ein Thema habt, dass ihr gerne mal bearbeitet haben möchtet und zu dem ihr euch vorstellen könnt, dass ich dazu etwas erzählen kann, hinterlasst mir einfach einen Kommentar. Und falls ihr euch ebenfalls Vorsätze für das neue Jahr gemacht habt und mutig genug seid, diese zu teilen, schreibt auch hierzu gerne einen Kommentar 🙂

Ich wünsche euch allen nur das Beste für 2018 und ich hoffe natürlich einige von euch auf einem zukünftigen WordCamp zu sehen.

Einstieg in SASS

Dies ist der Start einer kleinen Serie von Blogbeiträgen. Ich möchte nicht zu viel verraten, aber das Endergebnis hat etwas mit der speziellen Zeit des Jahres zu tun, in der wir uns gerade befinden. Die Idee hierzu kam von einer sehr guten Freundin. Daher möchte ich die Chance ergreifen und euch zu Beginn erst einmal eine Einführung in SASS geben. Bevor wir also an den eigentlichen Code gehen, starten wir erst einmal mit den Basics.

SASS installieren

SASS ist das Akronym für "Syntactically Awesome Style Sheets". Man könnte es auch als "Programmieren in CSS" bezeichnen. Um SASS zu verwenden, muss der Code, den man geschrieben hat, in normales CSS kompiliert werden. Hierzu gibt es verschiedene Optionen.

Verwendung des ruby gem

SASS wurde ursprünglich in ruby geschriebeb. Um also mit dieser Version loslegen zu können, muss erst einmal ruby installiert werden. Auf einem Windows-System würde ich euch den RubyInstaller empfehlen. Auf einem Mac kann man Homebrew und das folgende Kommando verwenden.

brew install ruby

Falls ihr Linux verwendet findet ihr ruby vermutlich in eurem Paketmanager. Ich würde euch empfehlen die Version 2.2 oder neuer zu installieren, aber auch ältere Versionen sollen noch funktionieren.

Um schließlich SASS zu installieren, kann man einfach das ruby gem (das SASS "Paket" für ruby) mit diesem Kommando installieren:

gem install ruby

Ihr solltet nun in einer Kommandozeile das ruby Kommando ausführen können.

Verwendung von grunt

Falls ihr euch mit grunt auskennt, könnt ihr auch hierfür ein SASS-Paket installieren und dieses verwenden, um die Dateien zu kompilieren. Es gibt zwei Varianten. Ein Paket basiert auf der ruby Version, eine andere verwendet libsass, eine JavaScript-Implementierung von SASS. Das ruby Paket installiert ihr wir folgt:

npm install grunt-contrib-sass --save-dev

Für die libsass Version, der allerdings einige Features der ruby Version fehlen, installiert ihr dieses Paket:

npm install grunt-sass --save-dev

Verwendung von gulp

Wenn ihr eher mit dem Task Runner gulp arbeitet, dann funktioniert die Installation sehr ähnlich zu grunt. Für die libsass Version installiert ihr dieses Paket:

npm install gulp-sass --save-dev

Auch hier gibt es eine ruby Version, aber ich bin mir nicht sicher, ob sie noch aktiv weiterentwickelt wird:

npm install --save-dev gulp-ruby-sass

SASS kompilieren

Sobald ihr SASS installiert habt, könnt ihr eine SASS-Datei in eine normale CSS-Datei mit folgendem Kommando kompilieren:

sass style.scss style.css

Dieses Beispiel verwendet die alternative SCSS syntax, die beliebter und weiter verbreitet ist, da sie sehr ähnlich zu normalem CSS ist. Das Kommando kompiliert die Datei ein einziges Mal. Da man dieses Kommando natürlich nicht nach jeder kleinen Änderung an einer Datei manuell ausführen möchte bietet SASS einen einfachen "Wachter" an, der Änderungen an einer Datei automatisch erkennt (normalerweise beim Speichern) und die Datei neu kompiliert:

sass --watch style.scss:style.css

Für weiter Optionen solltet ihr einen Blick in die offizielle Dokumentation werfen.

Fazit

Ihr solltet nun in der Lage sein SASS zu verwenden und euren CSS-Entwicklungsprozess zu verbessern. Im nächsten Beitrag werde ich euch, wie man SASS in PhpStorm integiert, eine IDE, die heutzutage sehr viele Entwickler verwenden.

Korrekte Zitate in WordPress

Verschiedene Sprachen haben unterschiedliche Anführungsstriche bei Zitaten. In Englisch sehen sie wie folgt aus: “…”. Im Deutschen werden folgende verwendet: „…“. Und im Französichen: « … ».

Korrekte Typographie ist nicht immer einfach zu erreichen, gerade dann, wenn man die Zeichen nicht direkt auf der Tastatur tippen kann (selbst wenn die richtige Sprache eingestellt ist). Aber es gibt einen Weg zur Hilfe, zumindest für Kommentar-Blöcke (blockquotes).

CSS für Zitate

Man kann ein wenig CSS definieren, dass automatisch die korrekten Anführungsstriche um ein q Element setzt (normalerweise innerhalb eines blockquote elements). Ein Standard für Anführungsstriche ist im Browser implementiert. Hierzu einfach folgendes verwenden:

 q { quotes: "\00ab" "\00bb" "\2039" "\203A"; } 

Dieses Beispiel definiert die beiden Varianten für französische Anführungsstriche (da Zitate auch wiederum "innere Zitate" enthalten können).

Verwenden des HTML-Elements

Es gibt aber noch einen einfacheren Weg. Statt die Anführungsstriche explizit zu definieren, kann man diese Aufgabe auch dem Browser überlassen. Hierzu muss man einfach nur dass korrekte lang Attribut für das Dokument angeben.

But there is an easier way. Just don't define anything specifically and let the browser handle the correct quoting. All you have to do is to set the correct lang attribute on the document.

<html lang="fr">
    ...

</html>

Nun kann man einfach ein q Element verwenden und die Anführungsstriche werden automatisch abhängig von der gewählten Sprache gesetzt.

Anführungsstriche in WordPress reparieren

WordPress für ein lang Attribut zum HTML Tag hinzu, aber leider verwendet es die "vier Zeichen Locale". Statt "fr" steht dort also "fr-FR", was leider in den meisten Browsern dazu führt, dass keine korrekten Anführungsstriche verwendet werden. Daher habe ich ein kleines Plugin geschrieben, dass diesen Fehler behebt.

Keine Ads mehr auf diesem Blog

Ab heute gibt es auf diesem Blog keine Ada mehr. Ich habe fast seit dem Start durchgehend AdSense eingebunden. Zusätzlich hatte ich auch mit anderen Arten von Finanzierung experimentiert. Bis heute hatte ich zwei Banner zum Affiliateprogramm meines Hoster auf der Seite (natürlich klar als solche erkennbar).

Warum ich Ads auf meinen Blog hatte

Der Betrieb eines selbst gehosteten Blogs ist nicht kostenlos. Die Kosten für Hostings und Domains sind im Laufe der Zeit gestiegen, da auch die Anforderungen an die Performance immer höher wurden, denn auf diesem einen Server laufen mehrere Websites. Um diese Kosten ein wenig zu decken, habe ich Werbung platziert. In dem ersten Jahren haben sie vermutlich nur etwa. 15% der Gesamtkosten getragen.

Wieso ich alle Ads entfernt habe

Im gestrigen Beitrag habe ich meinen Unmut bezüglich Affiliatelinks in Supportforen und Gruppen niedergeschrieben. Ich kann das wirklich nicht leiden. Ebensowenig wie Websites, die vollgestopft sind mit Werbung. Vor allem mitten im Inhalt. Daher hatte ich die Werbung auch an Stellen platziert, an denen sie nicht so sehr stören.

Mit Werbung kommt aber auch ein ordentlicher Overhead daher. Ich habe die Website mal vor dem Entfernen der Werbung getestet und sie hatte etwa 70 Requests von 19 verschiedenen Domains und eine Größe von ca. 1MB. Nach dem Entfernen waren es nur noch 30 Requests von 9 Domains und ca. 640KB.

Aber nicht nur die Größe war ein Grund für mich, aus dem ich schon länger vor hatte, die Werbung zu entfernen. Auch der Datenschutz und die Sicherheit waren mir wichtig, denn über Werbung können Nutzer angegriffen werden.

Wie ich meine Blog finanziere

Letztes Jahr war ich zum ersten Mal in der Lage, die Kosten für meine Website zu decken. Zum einen durch Google AdSense (43%) und zum andern durch die VG Wort (57%), die Verwertungsgesellschaft für Autoren. Da nun ein Teil dieses Finanzierung gefällt, muss ich mir einen anderen Weg suchen. Ich hoste aber seit einiger Zeit auch die Websites von Freunden, wodurch ich mir nun dir Kosten ein wenig teilen kann.

Wie finanziert ihre eure Website?

Mich würde sehr interessieren, wie ihr die Kosten für euren persönlichen Blog oder eure Website finanziert. Habt ihr auch Werbung auf der Seite? Oder nehmt ihr N Affiliateprogrammen teil? Vielleicht nutzt ihr ja auch eine Art von Crowdfunding. Für mich wird es erst einmal nur VG Wort und mein Wunschzettel sein.