Kontrastverhältnisse im Vergleich

Um eine gute Lesbarkeit auf einer Webseite zu erreichen, ist es wichtig ein sinnvolles Kontrastverhältnis zwischen Hintergrund und Schrift zu wählen. Ist dieses Verhältnis zu schlecht, leidet die Lesbarkeit der Texte. Große Webkonzerne wie Google und Apple gehen hierbei teilweise mit schlechtem Beispiel voran.

leaverou.github.io/contrast-ratio/

Nach der WCAG 2.0 Richtlinie wird im Normalfall ein Kontrastverhältnis von mindestens 4,5:1 gefordert. Ob die eigene Webseite diesem Kontrastverhältnis entspricht, kann man mit dem contrast ratio Tool testen, welches auf GitHub unter leaverou.github.io/contrast-ratio/ zu finden ist. Der Quelltext, der unter der MIT-Lizenz lizenzierten Software, ist ebenfalls auf GitHub zu finden.

Font für Social Icons

Mittlerweile gibt es unzählige sogenannte Social Icons für Dienste wie Facebook, GitHub oder Twitter. In vielen Fällen benötigt man ein solches Social Icon auf einer Webseite oder in einem Dokument. Natürlich kann man sich nun die entsprechenden Bilder bei den jeweiligen Anbietern, über die Presse- bzw. Markenportale beziehen. Bei mehreren Anbietern kann dies allerdings eine zeitintensive Tätigkeit sein.

Der Font Socicon in Aktion

Mit dem Font Socicon, welcher unter socicon.com bezogen werden kann, hat man alle diese Social Icons in einem Font zusammengefasst. Dieser kann direkt auf Webseiten eingebunden oder lokal installiert werden. Lizenziert ist der Font unter der SIL Open Font License 1.1.

Probleme mit der Bildskalierung unter WordPress

In WordPress findet man in den Einstellungen unter dem Punkt Mediathek die Einstellungen um die Größe der Vorschaubilder zu definieren. Wenn man dort nun die Größen definiert, führt dies zu einem seltsamen Verhalten.

Die Einstellungen im WordPress-Backend

Während die Bilder für die Option Mittelgroß problemlos in die gewünschten Größe skaliert werden, geschieht dies bei der Größe Groß nicht mehr. Hier werden die Bilder, bei meinem Theme, maximal 630 x 630 Pixel groß eingebunden. Das Bild wurde durchaus auf die korrekte Größere skaliert. Beim Einbinden findet man dann allerdings diese Beschränkung. Der Grund dafür ist in der Eigenschaft Content Width zu finden. Diese Eigenschaft beschränkt die maximale Breite der Bilder. Sie wird in der functions.php im jeweiligen Theme definiert. Dies könnte z.B. so aussehen:

/** 
 * Content Width
 */

if (!isset($content_width)) {
	$content_width = 630;
}

Wird dieser Wert geändert, so passt sich sich die Skalierung der Medien an.

CDN-Nutzung des Podlove Subscribe Button unterbinden

Wenn man den Podlove Subscribe Button über das Podlove Podcast Publisher-Plugin benutzt, so wird man feststellen das dieser über das Podlove-CDN eingebunden wird.

Podlove Subscribe button
Preis: Kostenlos
Podlove Podcast Publisher
Preis: Kostenlos

Wer keine externen Abhängigkeiten einbinden möchte, der kann seit Version 2.6 des Podlove Podcast Publisher-Plugins die CDN-Nutzung deaktivieren.

In den Modul-Einstellungen kann die CDN-Nutzung deaktiviert werden

Dazu müssen im Podlove-Menü im WordPress-Backend, die Moduleinstellungen aufgerufen werden. Dort findet sich unter dem Unterpunkt Web Publishing die entsprechende Einstellung um die CDN-Einbindung zu deaktivieren.

Gogs hinter einem Reverse Proxy betreiben

Gogs ist ein Git-Service welcher eine ähnliche Funktionalität wie der bekannte Dienst GitHub zur Verfügung stellt. Standardmäßig läuft der Dienst auf dem Port 3000. Möchte man ihn über die normalen Ports für HTTP (80) bzw. HTTPS (443) erreichbar machen, kann man hierfür einen Reverse Proxy nutzen. Dafür eignen würde sich zum Beispiel Nginx, der im ersten Schritt auf dem Server installiert werden muss:

apt-get install nginx

Anschließend wird die Konfiguration angelegt:

nano /etc/nginx/sites-available/example

In diesem Fall befasst sich die Konfiguration mit der verschlüsselten Kommunikation per HTTPS und der Weiterleitung von unverschlüsselten Verbindung in Richtung der verschlüsselten Verbindung.

server {
        listen 80;
        listen [::]:80;

        server_name example.com;

        return 301 https://$host$request_uri$is_args$args;
}

server {
    listen 443;
    listen [::]:443 default_server;

    ssl on;
    ssl_certificate        /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key    /etc/letsencrypt/live/example.com/privkey.pem;

    server_name example.com;

    client_max_body_size 500m;

    location / {
        proxy_pass https://localhost:3000;
    }
}

Nachdem die Konfiguration für Nginx hinterlegt ist, wird die Standardkonfiguration entfernt und ein symbolischer Link für die neue Konfiguration erstellt. Anschließend wird Nginx neugestartet, damit die geänderte Konfiguration wirksam wird:

rm /etc/nginx/sites-enabled/default
ln -s /etc/nginx/sites-available/example /etc/nginx/sites-enabled/example
service nginx restart

Nach der Anpassung der Nginx-Konfiguration, muss die app.ini (sie befindet sich im gogs/custom/conf/ Ordner) von Gogs angepasst werden und dort die neue ROOT_URL ohne zusätzlichen Port angegeben werden. Anschließend kann auf Wunsch, per Firewall, der Port 3000 für Zugriffe von außen gesperrt werden.

Aktivieren Sie JavaScript um das Video zu sehen.
Video-Link: https://seeseekey.net/archive/118039