Ich liebe SVG! Habe ich das schon mal gesagt? 🙂 Keine Website kommt mehr ohne ein Design aus, dass sich perfekt an die Größe von Mobilgeräten anpasst. Solche Geräte haben oft sehr hochauflösende Displays. Man spricht hier auch oft von „Retina-Displays“. Ein Problem hierbei: Bilder sehen oft sehr unschön aus, wenn sie in der Originalgröße dargestellt werden. Daher werden oft Bilder mit der vierfachen Größe verwendet. Diese sind aber natürlich viel größer und kosten im schlimmsten Fall kostbares Datenvolumen.
Adventskalender Tag 2: Links aus der Navigation in neuem Fenster oder Tab öffnen
Den heutigen Tipp schreibe ich mit etwas gemischten Gefühlen. Es geht um das Öffnen von Links in einem neuen Fenster oder Tab. Auf vielen Webseiten wird diese Technik eingesetzt, oft aber leider aus den falschen Gründen. Aber zuerst einmal zum eigentlichen Tipp.
Beitragslink im neuen Fenster/Tab öffnen
Wenn man einen Beitrag verfasst und ein Wort verlinkt, findet man unter den Eingabefeldern für die URL und den Linktext eine Kontrollbox für das Öffnen des Links in einem neuen Fenster/Tab:
Adventskalender Tag 1: Wortanzahl im Schlagwörter-Wolke-Widget reduzieren
Dieses Jahr möchte ich endlich mal versuchen einen Adventskalender für euch zu starten. Ihr könnt euch also auf 24 Artikel bis Heiligabend freuen. In kurzen Beiträgen möchte ich euch Tipps und Tricks oder kleine Plugins präsentieren, die ich in letzter Zeit geschrieben oder entdeckt habe. Ich hoffe, dass für alle etwas dabei sein wird.
Anzahl der Schlagwörter verringern
In der Facebook-Gruppe WordPress Berlin-Brandenburg kam die Frage auf, ob es möglich ist, die Anzahl der Schlagwörter im Schlagwörter-Wolke Widget zu ändern. Das Widget selbst bietet eine solche Möglichkeit nicht an. Auch konnte ich kein aktuelles Plugin finden, das eine Funktion anbietet oder ein alternatives Widget registriert. Glücklicherweise gibt es für das Widget diverse Filter, um die Darstellung anzupassen. Im CODEX von WordPress finden wir die Funktion wp_tag_cloud, die für die Ausgabe der Schlagwörter-Wolke verwendet wird. Hier sind auch die Standard-Parameter dokumentiert. Der Parameter, den wir anpassen wollen ist number. Dieser hat einen Standard-Wert von 45.
Folien zu meiner Session „A Brief Word on Plugin Initialization“ auf dem WordCamp Berlin 2015
Bei meinem siebten und letzten WordCamp in diesem Jahr war ich mal wieder als Teil des Organisationsteams aktiv und nicht nur einfacher Teilnehmer. Ich habe es aber dennoch geschafft, zumindest einen kurzen Lightning-Talk vorzubereiten. Es ging um ein Thema, dass mir gerade bei meiner täglichen Arbeit an Kundenwebsites immer wieder begegnet, nämlich um eine ordentliche Initialisierung der Plugins. Nachfolgend könnt ihr die Folien zu meiner Session ansehen:
Ich hatte das Gefühl, dass einige Teilnehmer an meiner Session meinen Appel verstanden haben. Falls ihr aber noch Fragen habt oder vielleicht eine moderene Variante als die beiden Beispiele, die ich vorgestellt habe, dann schreibt gerne einen Kommentar.
JavaScript Performance bei Scroll-Event-Handlern verbessern
Vor einiger Zeit bin ich mal wieder in einem WordPress-Plugin auf etwas JavaScript-Code gestoßen, der zwar funktional genau das macht was er sollte, der aber in Bezug auf die Performance eher schlecht umgesetzt war. In diesem Artikel möchte ich euch beschreiben, wieso genau der Code nicht optimal ist und wie man diesen Schrittweise verbessern kann.
Der zu optimierende Code
Sehen wir uns zuerst einmal den Code an, der optimiert werden soll. Er stammt aus dem WordPress-Plugin WP-Smooth-Scroll und der zu optimierende Teil sieht wie folgt aus:
Migration meiner WordPress Multisite Installation auf einen neuen Server mit nginx und HTTPS
Vielleicht habt ihr schon bemerkt, dass mein Blog seit dem 1. Juni nur noch über HTTPS zu erreichen ist. Ich habe in im März damit begonnen meinen Blog auf einen neuen Server umzuziehen. Dabei habe ich sehr viel ausprobiert und gelernt und ich möchte daher die Gelegenheit nutzen, euch in einer kleinen Artikelreihe durch die einzelnen Schritte zu führen, die ich dabei gegangen bin.
Die Systemkomponenten
Mein Blog wurde in den letzten Jahren schon mehrfach umgestellt. Technisch waren sich die Systeme aber sehr ähnliche. So kam bei allen bisherigen Installationen immer der Apache Webserver zum Einsatz und dadurch auch nicht unbedingt die neuesten Versionen von PHP. Für das neue System wollte ich natürlich auf einen modernen Hosting-Stack setzten, nicht zuletzt ermutigt durch die Session von Andrew Nacin auf dem WordCamp Europe 2014 in Sofia. In der nachfolgenden Tabelle habe ich einmal aufgelistet, wie das alte System (ungefähr) aussah und welche Komponenten im neuen System stattdessen zum Einsatz kommen:
| Alt | Neu |
|---|---|
| 1 CPU | 1 CPU |
| 1 GB | 2 GB |
| 50 GB HDD | 50 GB SSD |
| Debian 6 | Debian 7 |
| Apache 2.2 | nginx (extra) 1.6.3 |
| PHP 5.4 (mod_php) | HipHop Virtual Machine (hhvm) |
| memcache | memcache |
| mod_pagespeed | ngx_pagespeed (Bestandteil von nginx-extra) |
Wie ihr also sehen könnte, hat sich ziemlich viel geändert. Gerade die Umstellung von Apache auf nginx war hier die größte Herausforderung. Aber auch die Kombination von nginx, HTTPS, dem PageSpeed Modul und einer WordPress Multisite Installation war nicht gerade einfach zum Laufen zu bringen.
Da jedes dieser Themen mindestens einen ganzen Artikel füllen wird, soll es das für heute erst einmal mit dem Überblick gewesen sein. Ihr könnt euch schon jetzt auf einige weiterführende Artikel freuen. Nicht zuletzt, weil in dem oben beschriebenen Setup noch einige Aspekte fehlen. So wird beispielsweise aktuell kein Caching-Plugin genutzt, weil ich hier einen nginx Proxy Cache einsetzen möchte und auch memcache möchte ich zumindest für die WordPress Installation mal durch Redis austauschen.
Falls ihr aber zum allgemeinen Setup schon jetzt fragen habt, könnt ihr sie sehr gerne in den Kommentaren stellen. Vielleicht hilft es mir ja dabei, diese Punkte dann in den weiterführenden Artikeln genauer zu behandeln.
Mein Rückblick auf das WordCamp Köln 2015
Über drei Wochen ist es schon wieder her, dass das große deutsche WordCamp in Köln etwa 312 WordPress Begeisterte in die Domstadt gelockt hat. Wie in den letzten Jahren üblich gab es wieder am Freitagabend ein gemütliches Beisammensein. Dabei konnte ich schon wieder viele alte Bekannte aber auch einige neue Gesichter aus der WordPress Community treffen und kennenlernen. Auch aus Berlin waren einige Teilnehmer angereist. Nach einer viel zu kurzen Nacht ging es dann am ersten Tag gleich mit einem prall gefüllten Programm mit vier parallelen Sessions los.
Der erste Tag
Zuerst einmal musste ich mich natürlich wieder anmelden. Die Organisation war auch hier hervorragend und auch an dieser Stelle noch einmal ein großes Dankeschön an alle freiwilligen Helfer, die das Organisationsteam so toll unterstützt haben und uns allen ein tolles WordCamp ermöglicht haben!
Das halbe Dutzend ist voll
Schon sechs Jahre wird mein Blog heute alt. Er kommt jetzt also ins Schulalter 🙂 Aber leider wurde er in den vergangenen 12 Monaten inhaltlich stark vernachlässigt. Noch vor einem Jahr hatte ich ja gelobt, mal wieder häufiger zu bloggen, aber diese Vorsätze konnte ich leider auch nach meinem Studium noch nicht wirklich umsetzen. Immerhin habe ich in der Zeit noch ein paar weitere Themen gefunden und zum Teil auch schon erste Entwürfe geschrieben.
Aber wie in jedem Jahr möchte ich euch auch heute wieder ein wenig berichten, was sich so getan hat und welche Artikel dieses Mal in die Top 3 Listen gekommen sind. Fangen wir also wieder mit den meistgelesenen Artikeln der letzten 12 Monate an:
Folien zu meiner Session „SASS für Einsteiger“ auf dem WordCamp Köln 2015
Heute, am ersten Tag des WordCamp Köln 2015 habe ich meine Session zu SASS, Compass gehalten und die Resonanz war wirklich gut. Natürlich kam auch gleich die Frage, wo es denn die Folien geben wird. Dieser werden bestimmt noch in den nächsten Tagen im Sessionplan und auf der Detailseite zur Session verlinkt. Wer die Session aber sofort noch einmal nachvollziehen möchte, kann sie sich hier ansehen und runterladen:
Ihr dürft mir gerne hier in den Kommentaren noch eure offenen Fragen rund um das Thema SASS, Compass usw. stellen. Aber auch über euer Feedback zu meiner Session würde ich mich sehr freuen.
Jetzt geht es aber gleich erst einmal zur Community-Party und morgen geht es dann mit einem weiteren Tag voller spannender Sessions und Gespräche weiter.
Update: Die Folien sind auch in englischer Sprache verfügbar, da ich die Session beim WordCamp Norrköping
Die neue Schriftart „Helvetica Neue Desk Interface“ von Mac OS X Yosemite auf HTML Buttons überschreiben
Mit dem neuen Betriebssystem für Mac, OS X 10.10 Yosemite, hat Apple mal wieder einige optische Veränderungen am UI vorgenommen. Auffallend sind hier besonders Elemente wie Auswahlfelder, Radio-Buttons, Checkboxes und Buttons. Leider beschränken sich diese Designänderungen bei Apple nicht nur auf die Elemente des Betriebssystems, sondern auch auf Formular-Elemente innerhalb einer Website. Apple greift also mit dem neuesten Update mal wieder in das Design von Websites ein. Das Deaktivieren dieser neuen Styles ist aber nicht immer so einfach möglich. Außerdem werden diese Styles nicht nur für den Safari Browser angewendet, sondern wirken sich auch auf Mozilla Firefox und Google Chrome aus.
Schriftart von Buttons zurücksetzen
Eine Auswirkung des neue Yosemite Designs ist die Schriftart, die für die Formularbuttons auf einer Website verwendet werden. Viele Websites definieren eine globale Schriftart über den HTML-Body. Dies wird somit auch normalerweise für sämtliche Buttons angewendet. Aber unter OS X Yosemite wird diese Schriftart überschreiben. Es wird dann stattdessen die Schriftart „Helvetica Neue Desk Interface“ verwendet.