Meine Entwicklungsumgebung

Um den Herausforderungen der modernen Webentwicklung gerecht zu werden, sind viele Tools von Nöten. Heute möchte ich meine Entwicklungsumgebung, mit allen genutzten Tools, vorstellen.

Design

Fast wichtiger als die Hardware, ist Software, die perfekt angepasst werden kann. Deshalb verwende ich GIMP und Affinity Designer, um Designs zu erstellen, Logos anzupassen und Bilder zu vektorisieren.
Seit Adobe mit der Creative Cloud arbeitet, habe ich mich bewusst gegen deren Produkte entschieden.

zeigt ein Programm namens Affinity Designer, mit welchem Grafiken erstellt werden können.
Affinity Designer

(S)FTP, WebDav und AWS S3

Als FTP-Client verwende ich die umfangreiche und schöne Software „Transmit“ von Panic!. Bis jetzt verwende ich noch Version 4.4, werde in Zukunft aber sicher auf Transmit 5 upgraden.

zeigt den FTP-Client "Transmit"
Transmit

Code

Um HTML, CSS, PHP, JavaScript und alle anderen Sprachen zu schreiben, verwende ich Sublime Text 3. Um Sublime Text zu erweitern, wird Package Control eingesetzt. Als Color-Scheme benutze ich One Dark. Zusätzlich habe ich nodeJS, Auto Close Tags, Minifier, AdvancedNewFile und HTML/CSS/JS Prettifier installiert.

zeigt das Editor-Programm "Sublime Text 3"
Sublime Text 3

Als LESS/SASS-Compiler benutze ich Prepros, da das Programm wunderbar aussieht und auch perfekt im Zusammenspiel mit Transmit funktioniert.

zeigt den SASS/LESS-Compiler "Prepros"
Prepros

Sans Forgetica – Eine Schrift, die du nicht vergisst

Level: Anfänger
Sprachen: HTML, CSS

Forscher der RMIT University haben eine Schriftart entwickelt: Sans Forgetica.

Bei dieser Schriftart, welche auch als Webfont verfügbar ist, fehlen Teile der Buchstaben. Dies erschwert das lesen, sorgt aber laut der Forscher auch dafür, dass der gelesene Text nicht so schnell vergessen wird.

Sans Forgetica ist unter anderem als Chrome Extension verfügbar, die mit ein wenig Fummelei Textpassagen in der Schriftart darstellt.

Rezensenten im Chrome Store merken allerdings an, dass das „W“ einem „A“ zum verwechseln ähnlich sieht und dass das Plugin eher schlecht als Recht funktioniert.

Hier siehst du die Sans Forgetica Schrift in Aktion.
Wenn alles funktioniert, wirst du diesen Absatz nicht mehr so schnell vergessen.

Die Schrift ist, wie du siehst, wirklich nicht einfach zu lesen. Daher braucht der Nutzer viel länger, um eine Textpassage zu lesen und zu verstehen. Während das im Alltäglichen Gebrauch wohl eher sinnlos ist, kann die Schrift sicherlich sinnvoll eingesetzt werden, um den Nutzer dazu zu zwingen, den Inhalt einer Seite oder auch nur wichtige Auszüge im Gedächtnis zu behalten.

Ob durch diese Schrift zum Beispiel die Absprungrate einer Seite erhöht wird, habe ich nicht getestet, ich gehe aber davon aus. Deshalb sollte sie tatsächlich nur begrenzt und selektiert eingesetzt werden. So oder so ist die Schriftart aber sehr interessant und lädt zum experimentieren ein.

Wie soll das funktionieren?

Hinter der Idee der Schriftart steckt das psychologische Phänomen der wünschenswerten Erschwernisse beim Lernen. Während normale Schriften den Forschern zufolge eher weniger Effektiv sind, um Informationen dauerhaft zu vermitteln, setzt Sans Forgetica genau hier an: Vermittelte Informationen können durch die schwere Lesbarkeit besser im Gedächtnis behalten werden. Ob dies wirklich funktioniert, kann nur ein Langzeit-Test zeigen.

Schriftart integrieren

Um die Schriftart in einer bestimmten Passage zu integrieren, muss diese nur heruntergeladen, wieder auf den eigenen Server hochgeladen (im Beispiel in assets/fonts) und wie folgt in die Passage eingebracht werden:

<style>
@font-face {
  font-family: Sans-Forgetica;
  src: url('assets/fonts/SansForgetica-Regular.otf');
.wichtigerabsatz {
  font-family: 'Sans-Forgetica', Fallback, sans-serif!important;
}
</style>

<p class="wichtigerabsatz">
Wichtiger Absatz
</p>

Um die Schrift auf der ganzen Seite einzubauen (was werde ich, noch die Entwickler selber empfehlen), muss die Schrift importiert werden und dann auf das ganze Dokument (den „body“) ausgeweitet werden:

@font-face {
  font-family: Sans-Forgetica;
  src: url('assets/fonts/SansForgetica-Regular.otf');

body {
  /* Hier ist es durchaus sinnvoll, ein Fallback einzubauen,
  zwingend erforderlich ist es aber nicht */
  font-family: 'Sans-Forgetica', Fallback, sans-serif;
}

Browser Kompatibilität

✔︎✔︎✔︎✔︎✔︎

Dark Mode in CSS realisieren

Website wird von einem hellen Thema auf ein dunkles verstellt

Level: Anfänger
Sprachen: CSS

Mit macOS Mojave kam der Darkmode auf den Mac, mit dem das ganze System in einem dunklen Farbton erscheint.

Entwickler für macOS können Ihre Anwendungen bereits seit der Mojave Beta an den Darkmode anpassen. Auch einige Websites, wie zum Beispiel YouTube, bieten bereits die Möglichkeit an, ein Darkmode-Theme zu nutzen.

In einer der nächsten Versionen von Safari wird auch ein neues CSS media querie namens „prefers-color-scheme:“ eingeführt.

Update: Mit der neuesten Version von Safari, 12.1.2, ist der Darkmode auch hier verfügbar.

Update: Mit der soeben veröffentlichten iOS-Version 13 findet der Darkmode auch Einzug auf das iPhone. Ob dieser in Zukunft auch auf Android-Geräten funktionieren wird, muss sich zeigen. Klar ist nur, dass der Darkmode ab jetzt einer großen Masse an Mobil-Nutzern zur Verfügung steht.

Icon von Safari Technology Preview

Dies kann man über den Entwickler-Browser, Safari Technology Preview, bereits jetzt testen und die eigene Website für den Darkmode startklar machen. Ich habe cldsi.de bereits angepasst und musste aufgrund des einfach gehaltenen Designs nur wenige Änderungen vornehmen.

Seite an den Darkmode anpassen

Ich verwende ein WordPress Theme, welches die verwendeten Farben als Variablen am Anfang des Dokuments definiert:

:root {
  --bg-color: #eaeaea;
  --fg-color: #000; 
}

Um nun ein spezielles Farbschema für den Darkmode zu definieren, setze ich folgende Zeile ein:

/* Dark-Mode ansprechen */
@media (prefers-color-scheme: dark) {
  :root {
    /* Farben anpassen */
    --bg-color: #000; 
    --fg-color: #FFF;
  }
}

Und schon funktioniert die Seite im Darkmode!

Zusätzliche Anpassungen

Wie @mdo richtig anführt, sind Bilder (vor allem Screenshots) meist deutlich zu hell im Darkmode und zerstören somit die gesamte User-Experience. Um das zu ändern, ist folgender Code von Nöten:

@media (prefers-color-scheme: dark) {
  img {
      opacity: .75;
      transition: opacity .5s ease-in-out;
   }
   img:hover {
      opacity: 1;
   }
}

Hiermit werden Bilder leicht transparent gemacht, ihnen wird also auch Helligkeit entzogen. Bei Hovern über ein Bild, wird dieses wieder rückgängig gemacht.

Browser Kompatibilität

✔︎✔︎✔︎✔︎✖︎

Aktuelle Liste: https://caniuse.com/#search=prefers-color-scheme

Google Fonts DSGVO-konform einbinden

Level: Anfänger
Sprachen: HTML

Noch immer verunsichert die DSGVO einige Entwickler, als auch deren Kunden. Immer wieder hört man, dass Website-Betreiber abgemahnt werden, weil sie Google Fonts nutzen.

Das liegt daran, dass Nutzerdaten, wie zum Beispiel die IP zwangsläufig an die Server von Google weitergeleitet werden, welche wahrscheinlich in den USA stehen, wenn eine Google Font eingebunden ist.

Dafür gibt es aber eine ganz simple Lösung. Anstatt die Schrift einfach über den von Google vorgegebenen Weg einzubetten, laden wir diese herunter:

Noch einfacher funktioniert das mit diesem Tool.

In unserem Beispiel wird die Schrift dann als Ordner heruntergeladen. Darin befinden sich nun alle verschiedenen Stile der Schriftart (wenn wir vorher nicht unter „Customize“ nur bestimmte Stile ausgewählt haben):

Diese müssen nun auf den Server hochgeladen werden, am besten in einen Ordner wie assets/fonts.
Nun müssen die Schriften nur noch im Stylesheet (vor allen anderen Styles) eingebunden werden:

@font-face {
  font-family: Roboto-Light;
  src: url(assets/fonts/Roboto-Light.ttf);
}

Ich binde hier nur die Robot-Light ein. Solltest du mehrere verschiedene Schriftarten oder Schriftstile verwenden wollen, musst du diese alle einzeln einbinden.

Abschließen benutzen wir die Schrift (hier richten wir auch ein Fallback ein, falls der Browser die Schrift nicht benutzen kann oder sie falsch rendert):

body {
  font-family: 'Roboto-Light', Fallback, sans-serif;
}

Solltest du bereits Google-Fonts nutzen, kannst du auch einfach das bereits eingebundene Stylesheet herunterladen, auf deinen eigenen Server laden und dann die URL anpassen.

Google verbietet dies, soweit ich herausgefunden habe, nicht.

✔︎✔︎✔︎✔︎✔︎