Ein weiteres Jahr geht zu Ende und das aufregendste steht bevor!

Wie jedes Jahr möchte ich es auch heute nicht versäumen, euch einen kleinen Überblick zu geben, was im letzten Jahr so alles passiert ist und was euch in den nächsten 12 Monaten erwarten wird.

Ein arbeitsreiches Jahr

Seit Jahresbeginn habe ich leider nicht viel Zeit gefunden einmal regelmäßig pro Woche zu bloggen. Der Grund dafür ist mein Engagement in der Organisation des WordCamp Europe. Auch aktuell stecke ich noch "ein wenig" darin fest. Und daher werde ich den Artikel heute leider nicht fertigstellen können, da ich meine Statistiken noch nicht zusammenstellen konnte. Ich werde den Artikel daher am Wochenende fertigstellen, bleibt also gespannt, welche Neuigkeiten euch erwarten werden 😉

Fortsetzung folgt…

Es geht weiter

Nicht nur mit diesem Artikel 🙂 Ich habe mir mal meine Statistiken für die vergangenen 12 Monate angesehen und so ganz zufrieden bin ich nicht. Von Ende Juni bis Ende November habe ich es nur auf 10 Beiträge geschafft und auch beim Adventskalender musste ich leider nach nur 10 Tagen aufgeben. Im neuen Jahr habe ich dann nur im Januar und Februar jeweils einen Beitrag geschrieben. Mit dem heute komme ich also nur auf 23 Beiträge geschafft. Also nicht einmal ein halbes Projekt 52 🙁

Aber nichts desto trotz wird es hier auf diesem Blog weiter gehen. Meine kleine Reihe über SASS möchte ich auf jeden Fall noch zu Ende bringen. Außerdem steht ja Gutenberg und damit auch das neue große WordPress Release vor der Tür. Wann genau weiß man aber noch nicht 😉 Dennoch möchte auch ich ein kleines Gutenberg Plugin schreiben und es hier vorstellen.

Mehr Zahlen

Ich möchte euch aber natürlich auch zum Ende des neunten Jahren wieder die anderen Zahlen präsentieren. Es gab auf jeden Fall einen neuen Besucherrekord am 25. Oktober 2017 mit 741 Zugriffe. Davon entfielen alleine 491 auf den Beitrag MailChimp ändert Anmeldeformulare auf Single-Opt-in, ein Thema, das zu dieser Zeit in Deutschland hochkochte. Dennoch hat es der Beitag nicht in die Top 3 geschafft. Die sahen wir folgt aus:

Top3 im letzten Jahr

  1. Formatierten Quellcode mit Syntaxhervorhebung in Word einfügen
  2. Arrays und andere komplexe Daten mit PHP in einer MySQL-Datenbank speichern
  3. Fehler beim Senden in Contact Form 7 debuggen

Die Top3 insgesamt sind die gleichen wie die Top3 im letzten Jahr. Rausgefallen ist der Beitrag Kostenlose Alternative zum Cisco VPN Client unter Windows 7 x64 (64 bit), der sogar vom Beitrag Plesk Cronjob für ein PHP-Skript mit Parametern einrichten auf Platz 5 verdrängt wurde.

Es kamen 53 neue Kommentare dazu wovon 17 von mir kamen. Ich habt also fast zweimal mehr Kommentar geschrieben, als ich Beiträge.Immerhin eine recht gute Statistik 🙂

Projekte in den nächsten 12 Monaten

In den ersten Jahren habe ich euch ja an dieser Stelle immer versprochen mehr zu bloggen, was dann in immerhin zwei Jahre lang sehr gut funktioniert hat. Heute möchte ich euch nur versprechen, dass ihr hier immer mal wieder etwas neues lesen könnt. Aber leider nicht mehr einmal pro Woche, sondern vielleicht eher alle 3-4 Wochen, je nachdem, wie ich dazu komme. Denn neben dem schon angesprochenen Plugin gibt es für mich eine neue Priorität, die meine gesamte übrige Energie in Anspruch nehmen wird. Wer dieses Jahr in Belgrad beim WordCamp Europe dabei war und wegen dessen ich ja so wenig zum Bloggen kam, der wird wohl wissen, worauf ich hinaus will 😉

Das WordCamp Europe 2019 in Berlin!

Ihr habt euch nicht verlesen. Das WordCamp Europe wird im nächsten Jahr in unserer wunderschönen Hauptstadt stattfinden, in der ich seit über 10 Jahren wohne. Wir haben uns beworben und haben den Zuschlag bekommen. So sehr ich mich darüber freue als Local Lead Organizer an einem tollen Event mitwirken zu können, so sehr habe ich auch Respekt vor der Aufgabe, die vor mir und dem gesamten Orgateam liegen wird. Hierfür Suchen wir auch noch tatkräftige Unterstützung. Der Call for Organizers ist noch bis Ende Juli offen.

Aktuell ist ja auch wieder Fußball WM. Das erste Spiel haben wir in Belgrad durchlitten 😉 Aber trotzdem folgt nun zum Ende kein Video zur WM, sondern eines zum WordCamp Europe 2019. Genauer gesagt die Stelle aus dem Live-Stream, in dem die Entscheidung für Berlin verkündet wurde. Falls ihr nicht selbst dabei wart, genießt den Augenblick! 🙂

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.