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…

Weiterlesen →

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 Ads 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.

Eigennütziger WordPress-Support

Ich liebe die WordPress Community. Ich habe dort viele wunderbare Menschen kennengelernt und genieße es, so viele WordCamps wie möglich in neuen Städten/Ländern zu besuchen um noch mehr tolle Mitglieder der weltweiten Community kennenzulernen.

Das ist auch einer der Gründe, weshalb ich sehr gerne Hilfe auf verschiedene Arten gebe. Ich organisiere WordCamps und Meetups, wirke in mehreren Meta-Teams mit und beantworte Fragen in einigen Facebook-Gruppen.

Anderen helfen … oder eher dir selbst?

In der Weihnachtszeit bieten viele Unternehmen WordPress Produkte und Dienstleistungen zu vergünstigten Preisen an. Gerade heute gab es aber mal wieder einen negativen Fall in einer Facebook-Gruppe. Ein Mitglied hat einen Link zu einem Angebot für ein bekanntes Premium-Theme gepostet. Toll oder? Jeder erfährt von diesem Angebot und profitiert davon. Nicht wirklich. Die Person, die am meisten davon profitiert ist das Mitglied, das den Link gepostet hat. Denn wie sich herausstellte handelte es sich um einen Affiliate-Link.

Stoppt eigennützige Hilfe!

Vielleicht bin ich ja zu altruistisch eingestellt. Aber es ärgert mich wirklich maßlos, wenn jemand anderen "hilft", nur um von dieser Hilfe selbst einen Vorteil zu haben. Ich habe kein Problem damit, wenn Freelancer oder Agenturen individuelle Hilfe anbieten und dafür eine gerechte Bezahlung erwarten. Aber das Teilen von Affiliate-Links auf Facebook ist meiner Meinung nach nicht in ordnung.

Wie ist deine Meinung?

Was denkst du? Regt euch so eine Art von Hilfe auch auf? Oder meint ihr, dass ich bei diesem Thema überreagiere?

Gutenberg Test

Vorwort

Dieser Artikel ist auf der Fahrt zum WordCamp Cologne entstanden. Ich habe dabei zum ersten Mal Gutenberg getestet und da ich nicht einfach nur sinnlosen Text tippen wollte, habe ich mich entschieden, daraus eine Geschichte zu machen. Aber lest selbst …

Eine kleine WeihnachtsGutenberg-Geschichte

Das sieht ja schon mal sehr schick aus. Was kann man denn hier alles machen? Wie wäre es zum Beispiel mit fettem oder kursivem Text?

Oder mit einem Link auf meinen Blog? Geht das vielleicht auch noch immer mit STRG + V, wie ich es mal beschrieben hatte? Ja, das klappt noch, super!

Weiterlesen →

Shortcodes in Sidebar-Widgets einfügen

Shortcodes sind wirklich praktisch, wenn man dynamischen Content in statische Seiten und Beiträge einfügen will. WordPress bringt schon einige interne shortcodes mit, wie etwa den gallery shortcode (der normalerweise im Backend gerendert wird).Standardmäßig funktionieren diese Shortcodes nur im Inhalt von Seiten und Beiträgen

Einfügen von Shortcodes mit dem Text oder HTML Widget?

Nun könnte man annehmen, dass man einfach das Text oder HTML widget verwenden kann. Aber leider funktioniert diese Lösung nur für einige Shortcodes, bei anderen führt es dazu, dass der Shortcode gar nicht ausgewertet wird. The gallery Shortcode etwa wird bei beiden nicht angezeigt und das Syntax-Highlighting-Plugin, das ich einsetzte, spuckt entweder falschen Code aus oder es funktioniert gar nicht.

Das Shortcode Widget Plugin

Wie fast immer ist dieses Problem nicht neu ein jemand anderes hat schon eine Lösung hiefür gefunden. Das Plugin Shortcode Widget wurde genau für diese eine Aufgabe geschrieben. Sobald man es installiert und aktiviert hat, findet man ein neues Widget, das ein wenig wie das alte Text-Widget aussieht und nur einen Titel und eine Textbox hat. Hier hinein kann man nun einen beliebigen Shortcode einfügen und das Widget dann in einer beliebigen Widget-Area verwenden.

Der Umgang mit geschlossenen Plugins aus dem Plugin-Verzeichnis

Ich bin mir sicher, dass ihr alle Plugins aus dem offiziellen Plugin Directory verwendet. Alle diese Plugins werden bei der Einreichung geprüft, bevor sie online gehen. Sollten sie in den letzten zwei Jahren nicht aktualisiert worden sein, kann man sie über die Suche nicht mehr finden (man kann sie aber weiterhin downloaden, sofern man den Direktlink noch kennt). Aber habt ihr euch mal gefragt was passiert, wenn ein Plugin geschlossen und aus dem Plugin-Directory entfernt wurde, aus welchem Grund auch immer?

Ein potentielles Sicherheitsrisiko

Ein Plugin kann aus verschiedenen Gründen geschlossen und/oder entfernt werden. Aktuell sind folgende Gründe denkbar:

  • Security Issue
  • Author Request
  • Guideline Violation
  • Licensing/Trademark violations
  • Merged into Core

Zwei meiner eigenen Plugins werden wohl auch bald geschlossen werden, da ihre Funktionalität entweder bereits im Core gelandet ist oder dieses in naher Zukunft passieren wird. In diesen Fällen ist es also nicht unbedingt kritisch, wenn diese weiterhin installiert und aktiviert sind, sofern sie sich nicht mit den Core-Funktionen ins Gehege kommen. Aber was ist mit Plugins, die ein Sicherheitsrisiko darstellen können? Das ist ein echtes Problem.

Keine Benachrichtigung der Nutzer

Wenn ein Plugin geschlossen wird, werden die Nutzer, die es noch installiert (und vielleicht sogar aktiviert) haben darüber nicht informiert. Selbst wenn der Pluginautor also einen Weg gefunden hat, die Sicherheitslücke zu schließen, würde kein Nutzer davon profitieren, da der einzige Weg einer Aktualisierung, der über das Plugin-Directory, nicht mehr existiert. In der Zwischenzeit sind alle Websites mit der alten Version potentiell für Hacker angreifbar.

Ein Plugin als Rettung

Da dieses Problem schon eine ganz Weile besteht und das Plugin-Team bisher noch mit keiner schnellen Lösung dienen konnte, wurde das Plugin No Longer in Directory veröffentlicht. Wenn man es installiert und auf dessen Einstellungsseite geht, bekommt man eine Liste aller Plugins angezeigt, die seit mehr als zwei Jahren nicht mehr aktualisiert wurden sowie eine Liste aller Plugins, die nicht im Plugin-Directory gefunden werden konnten.

Diese zweite Liste würde aber auch Plugins auflisten, die niemals im Plugin-Directrory veröffentlicht waren. Das sind beispielsweise Premium-Plugin oder Plugins, die man speziell für ein Kundenprojekt entwickelt hat. Die Lösung ist also auch nicht optimal.

Ein neuer Weg geschlossene Plugins hervorzuheben

Über die „Ideas“ Seite auf WordPress.org wurde daher eine ganze Weile zu diesem Thema diskutiert. Gestern hat das Meta/Plugin-Team auf dem Contributor Day des WordCamp US angekündigt, dass gerade hart an einer Lösung gearbeitet wird. Sie haben hierzu ein paar Mockups im entsprechenden Trac-Ticket veröffentlicht und auch ein erstes Beispiel für die Ansicht eines geschlossenen Plugins existiert bereits. Vorher wurde beim Aufruf eines geschlossenen Plugins eine 404 Fehlerseite angezeigt ohne einen Hinweis darauf, dass dieses Plugin mal existiert hat und warum es geschlossen/entfernt wurde.

Fazit

Der Umgang mit geschlossenen und entfernen Plugins ist sehr wichtig und sollte in einer transparenten Art und Weise passieren, damit die Nutzer dieses Plugins über mögliche Sicherheitsprobleme informiert sind, und das Plugin entfernen können, bevor ihre Website gehackt wird. Ich bin mir nicht sicher, ob es zusätzlich möglich sein sollte Plugins direkt zu löschen oder den Nutzern einen Hinweis im Dashboard anzuzeigen. Aber ich hoffe, dass dieses Thema nun etwas mehr Aufmerksamkeit bekommt.