My Feed Title Aureola 2021-06-16T00:00:00+02:00 Christian Hanne https://aureola.codes/de/blog Wie man bösartige Schwachstellen-Scanner in Laravel mit Fail2ban stoppt https://aureola.codes/de/blog/2021/wie-man-schwachstellen-scanner-stoppt-laravel-fail2ban 2021-06-16T00:00:00+02:00 2021-06-16T00:00:00+02:00 Jede Webseite wird täglich mit dutzenden ungewollten Anfragen bombardiert. Die Rede ist hier von sogenannten Schwachstellen-Scannern. Was es damit auf sich hat und wie man die ungebetenen Gäste bekämpfen kann, erfahrt Ihr in diesem Artikel.

Was ist ein Schwachstellen-Scanner?

Vor jedem gelungenen Einbruch steht das Auskundschaften des Objektes der Begierde. Natürlich macht man das nicht selbst. Ein Einbrecher, der etwas auf sich hält, hat dafür seine Handlanger. Stellt Euch da einen kleinen, unauffälligen Typen vor. Ein Jedermann. Jemand der in der Masse verschwindet. Der läuft nun an Eurem Haus vorbei und schaut ganz beiläufig Mal unter die Fußmatte vor Eurer Tür. Liegt da vielleicht ein Ersatzschlüssel? Fehlanzeige. Dann schlendert er ganz entspannt an der Hauswand entlang und rüttelt ab und zu Mal an einem Fenster. Ganz leise natürlich. Verschlossen. Wenn er noch mutiger ist, macht er vielleicht einen kleinen Abstecher in Euren Garten. Vielleicht hat er bei der Terrassentür mehr Glück. Bingo, nur angelehnt. Sogleich sagt er seinem Auftraggeber Bescheid und dieser macht sich flugs ans Werk.

Burglar looks through door

House photo created by jcomp - www.freepik.com

So oder so ähnlich kann man sich einen Schwachstellen-Scanner vorstellen. Natürlich ist dies keine reale Person. Wäre ja auch eine elendig langweilige Arbeit. Nein, es ist ein automatisches Programm. Das schaut einfach mal vorbei und guckt, ob Ihr bei der Einrichtung Eurer Webseite vielleicht eine Dummheit begangen habt. Öffentlich zugängliches Git-Repository? Ein herumliegendes Datenbank-Backup? Ein nicht aktualisiertes CMS? Alles kann nützlich sein. Die meisten Bots gehen dabei relativ ähnlich vor. Sprich sie rufen ähnliche Pfade auf. Und genau das kann man sich zunutze machen. Wäre es nicht toll, wenn ein Mann mit einem großen Knüppel über Euer Anwesen, respektive Eure Webseite, wachen würde? Der würde dann einfach jedem eins über den Schädel hauen, der am Fenster rüttelt. Nun, der Mann mit dem Knüppel hat einen Namen: fail2ban.

Was ist fail2ban?

Der Hauptzweck von fail2ban ist das temporäre Blockieren bestimmter IP-Adressen auf Basis von Filtern. Es gibt dabei diverse vorgefertigte Filter. Zum Beispiel welche, die Angreifer nach so und so vielen vergeblichen Login-Versuchen blockieren. Dafür werden in der Regel Log-Dateien nach bestimmten Mustern durchforstet. Diese Muster könnt Ihr dabei auch selber festlegen. Ihr könnt zum Beispiel eine Liste von Pfaden angeben, bei dessen Aufruf Ihr einen ungebetenen Gast rauswerfen wollt. Dafür schreibt Ihr dann allerdings eine elendig lange Regex-Pattern. Ziemlich unübersichtlich. Warum schmeißen wir Angreifer nicht einfach raus, wenn sie einen bestimmten HTTP-Code auslösen? Der sollte natürlich ziemlich einzigartig sein, damit Ihr nicht versehentlich Eure erwünschten Besucher vergräzt. Ich habe dafür eine kleine Lösung in Laravel gebaut, die ich Euch einmal vorstellen möchte.

Mmmmh... Hooooniiiig

Winnie Pooh eats Honey

Der Grundgedanke hinter dieser Lösung ist, dass wir dem Scanner eine Falle stellen wollen. Im Fachjargon spricht man in diesem Fall von einem Honigtopf. Sobald der Scanner sich am Honigtopf zu schaffen macht, saust der Knüppel herunter bzw. er wird geblockt.

Aber wie könnten wir fail2ban am besten triggern, wenn wir nicht direkt den Pfad überprüfen wollen? Nun zum Beispiel mit einem Response-Code. Am besten nehmen wir hier etwas, was generell...

]]>
Wie man DDEV auf einem Apple M1 Mac installiert https://aureola.codes/de/blog/2021/wie-man-ddev-auf-apple-m1-installiert 2021-03-13T00:00:00+01:00 2021-03-13T00:00:00+01:00 Es passiert nicht oft, dass ich zu den Early Adopters gehöre. Nach der Ankündigung des neuen Silicon-Prozessors von Apple wollte ich diesmal aber vorne mit dabei sein. Zu Beginn gab es natürlich noch kaum kompatible Software. Darum musste ich für die Arbeit auf MAMP und lokale PHP-Installation zurückgreifen – furchtbar unflexibel. Nun habe ich es aber endlich geschafft Docker und DDEV zum Laufen zu bekommen.

Vorbereitung

Um DDEV nutzen zu können, müssen wir zunächst einmal Docker installieren. Hier erkläre ich Dir Schritt für Schritt, wie Du die aktuelle Preview-Version von Docker an der Start bekommst.

Installiere Rosetta 2

Rosetta 2 ist nach wie vor die Voraussetzung zur Installation von Docker, da einige Binaries noch auf der Darwin/ARM64-Architektur basieren. Am besten nutzt Du für die Installation den Terminal:

$ softwareupdate --install-rosetta

Installiere die aktuellste Version von Xcode

Damit DDEV installiert werden kann, brauchst Du die aktuellste Version von Xcode und der Command Line Tools. Xcode könnt Ihr direkt aus dem App Store installieren und am besten auch über diesen aktualisieren. Vorsicht: Die Installation bzw. ein Update kann verdammt lange dauern. Selbst wenn die Ladeanimation zu hängen scheint, geht es dann doch irgendwann weiter.

Xcode Version 12.4

Zwar kannst Du Xcode auch über den Terminal aktualisieren, aber das hat zumindest bei mir nicht funktioniert. So ginge es zumindest rein hypothetisch:

$ softwareupdate --install xcode

Die Command Line Tools solltest Du aber auf jeden Fall direkt im Terminal installieren; und zwar so:

$ xcode-select --install

Installiere die Preview-Version von Docker

Endlich können wir nun auch Docker installieren. Hier steht zurzeit eine Preview-Version zur Verfügung, die zumindest für mich derzeit relativ problemlos funktioniert hat. Du solltest allerdings beachten, dass diese Version keine automatischen Updates beinhaltet. Sprich, Du wirst Updates selbst herunterladen und installieren müssen.

Die Preview-Version von Docker kannst Du hier herunterladen. Je nachdem, wann Du diesen Artikel liest, ist aber vielleicht auch schon wieder eine neuere Version verfügbar. Schau deswegen am besten vorher einmal in die Dokumentation.

Nachdem Du Docker (hoffentlich erfolgreich) installiert hast, solltest Du als Erstes einmal mehr Systemressourcen zuweisen. Ich stelle Docker in der Regel die Hälfte meiner CPU und die Hälfte meines Arbeitsspeichers zur Verfügung.

Docker - Einstellungen

DDEV installieren

Hier hast Du zwei verschiedene Möglichkeiten, die ich beide vorstellen möchte. Zum einen kannst Du DDEV direkt über Homebrew installieren, zum anderen kannst Du ein Installationsskript nutzen. Nur letzteres führte bei mir zum Erfolg.

Option A: Installation via Script

Die DDEV-Entwickler haben freundlicherweise ein Installationsskript zur Verfügung gestellt. Die aktuellste Version davon kannst Du hier herunter laden.

Anschließend rufst Du das Skript über den Terminal auf:

$ bash install_ddev.sh

DDEV sollte anschließend installiert und einsatzbereit sein. Überprüfen kannst Du das ebenso über den Terminal:

$ ddev --version

Option B: Installation via Homebrew

Angeblich lässt sich DDEV auch direkt via Homebrew installieren. Bei mir hat dies allerdings immer Fehler geworfen. Hier sei der entsprechende Befehl dennoch der Vollständigkeit halber einmal genannt:

$ brew install drud/ddev/ddev

Weitere und aktuellere Informationen zur Installation findest Du in der Dokumentation von DDEV.

]]>
Aureola optimieren (4/5): Preloading, Caching und Mikrooptimierung https://aureola.codes/de/blog/2021/optimizing-aureola-part-4-preloading-caching-and-micro-optimizations 2021-02-28T00:00:00+01:00 2021-02-28T00:00:00+01:00 Die großen Baustellen sind geschafft. Aber es gibt immer noch ein paar Dinge, die wir tun können. Vieles davon fällt sicher unter den Punkt Mikrooptimierung, aber in der Summe gewinnen wir dennoch ein paar weitere Kilobytes und Millisekunden dazu.

Was bisher geschah

Little Astronaut - Now It's Personal - gzip aktiviert, webp-Bilder & Icomoon

Little Astronaut - Now It's Personal - gzip aktiviert, webp-Bilder & Icomoon

Was bringt eine Promotion bei Instagram? - gzip aktiviert, webp-Bilder & Icomoon

Was bringt eine Promotion bei Instagram? - gzip aktiviert, webp-Bilder & Icomoon

Zuletzt haben wir Font Awesome durch eine deutlich schlankere Iconfont ersetzt. Dadurch konnten wir die Downloadgröße der Schrift von 77,9 kb auf 4,1 kb reduzieren. Dem einen oder anderen wird aber vielleicht aufgefallen sein, dass ich im letzten Artikel bereits eine weitere Optimierung mit hineingemogelt hatte.

Preloading

Um lange Request-Ketten zu vermeiden, ist es eine gute Idee Preloading einzusetzen. Ihr fragt Euch vielleicht was es damit auf sich hat. Nun zunächst einmal sollten wir uns anschauen, wie zum Beispiel Webfonts eingebunden werden. Zunächst wird die Webseite abgerufen, dann wird das CSS geladen und im CSS wird dann in der Regel die Webfont eingebunden. Das ist eine recht lange Request-Abfolge. Da wir aber bereits wissen, dass wir die Webfont später brauchen, können wir die Webfont auch vorher laden. Mozilla hat dafür einen sehr aufschlussreichen Guide zur Verfügung gestellt.

Das sieht dann zum Beispiel so aus:

<link rel="preload" href="/user/themes/aureola/vendor/icomoon/fonts/icomoon.ttf?kw1rqx" as="font" type="font/ttf" crossorigin>

Hierbei ist es extrem wichtig, dass im href exakt die gleiche Url definiert wird, die auch später aufgerufen werden soll. Das schließt alle GET-Parameter mit ein. Außerdem muss as und type korrekt definiert werden. So kann hier beispielsweise die Schrift sofort geladen werden und es muss nicht erst gewartet werden, bis die CSS-Dateien ausgelesen wurden.

Browser-Cache nutzen

Natürlich ist es nicht besonders sinnvoll, Ressourcen die sich ohnehin selten verändern, jedes Mal neu zu laden. Darum können wir dem Browser mitteilen, dass diese zwischengespeichert werden sollen. Allerdings sollten wir uns hier genau überlegen, wie wir den Cache invalidieren wollen, falls wir dann doch einmal wieder ein Update ausliefern wollen. Denn wie heißt es so schön: "There are only two hard things in Computer Science: cache invalidation and naming things." -- Phil Karlton

Ich habe mich an dieser Stelle also entschlossen erst einmal nur die CSS-, Javascript- und ähnlich Dateien langfristig zu cachen. Unter Nginx lässt sich da wie gewohnt über ein Snippet regeln. Ich erstelle hier also eine Datei /etc/nginx/snippets/cache-static.conf mit dem Inhalt:

location ~* \.(?:ico|css|js|woff|woff2|ttf|eot)$ {
    expires 365d;
    add_header Pragma public;
    add_header Cache-Control "public";
}

location ~* \.(?:gif|jpe?g|png|webp)$ {
    expires 1d;
    add_header Pragma public;
    add_header Cache-Control "public";
}

Wie gewohnt können wir das Snippet dann in unserer Seitenkonfiguration einbinden:

include /etc/nginx/snippets/cache-static.conf;

Logo in die Seite einbetten

Ein Punkt der nun wirklich unter Mikrooptimierung fällt, ist das Logo. Müssen wir es wirklich jedes Mal separat laden? Nein, denn wir können es auch in die Seite einbinden. Zwar vergrößert sich die Seite an sich, aber die Vergrößerung ist zu vernachlässigen und wir sparen uns einen zusätzlichen Request.

Das Ergebnis unserer Mühen

Little Astronaut - Now It's Personal - Ergebnis

Little Astronaut - Now It&#39;s Personal - Ergebnis

Was bringt eine Promotion bei Instagram? - Ergebnis

Was bringt eine Promotion bei Instagram?...

]]>
Aureola optimieren (3/5): Optimierte Iconfont mit Icomoon https://aureola.codes/de/blog/2021/optimizing-aureola-part-3-optimized-iconfont-with-icomoon 2021-01-31T00:00:00+01:00 2021-01-31T00:00:00+01:00 Die Optimierung geht weiter. Heute widme ich mich einem Thema, das oft wenig Beachtung zu finden scheint. Der Größe externer Libraries. Nun nutze ich auf meiner Seite nicht wirklich irgendwelche Frameworks. Es gibt dennoch einen Kandidaten, den man sich einmal genauer anschauen sollte: Font Awesome.

Was bisher geschah

Little Astronaut - Now It's Personal - gzip aktiviert & webp-Bilder

Little Astronaut - Now It&#39;s Personal - gzip aktiviert & webp-Bilder

Was bringt eine Promotion bei Instagram? - gzip aktiviert & webp-Bilder

Was bringt eine Promotion bei Instagram? - gzip aktiviert & webp-Bilder

Zuletzt hatten wir alle Bilder durch webp-Formate ersetzt und damit die Downloadgröße drastisch reduzieren können. Von 866 kb und 1,6 MB auf 495 kb und375 kb. Die Antwortzeiten reduzierten sich von 359 ms und 459 ms auf 279 ms und 265 ms. Eins fällt hier allerdings noch auf. Die Icon-Font von Font Awesome schlägt mit 77,9 kb zu Buche. Das ist größer als ein optimiertes Bild.

Font Awesome vs. Icomoon

Font Awesome

Font Awesome

Font Awesome ist eine in der Grundversion kostenlos nutzbare Icon-Font. In der Variante, die ich in die Seite eingebunden habe, finden sich mehr als 700 Icons. Mittlerweile beinhaltet die aktuelle Version über 1600 Icons. Es ist also für jeden etwas dabei. Da ist nur eine Sache. Auf der ganzen Webseite nutze ich nur 12 Icons. Ich habe also über 700 Icons zuviel eingebunden.

Icomoon

Icomoon

Nun kann man natürlich hingehen und in mühevoller Kleinarbeit die Schrift anpassen. Oder man nutzt einen Service, der Icon-Fonts erstellen kann. Icomoon zum Beispiel. Hier kann man nicht nur eigene Icon-Fonts erstellen, sondern auch aus einer Reihe von Packs Icons auswählen und als Schrift exportieren. Und zwar genau die, die man auch wirklich braucht. Ich entschied mich dafür ein Pack von Icomoon selbst zu wählen. Und gab Font Awesome den Laufpass. Auch das resultierte wieder in einer deutlichen Einsparung.

Ergebnis mit Icomoon

Little Astronaut - Now It's Personal - gzip aktiviert, webp-Bilder & Icomoon

Little Astronaut - Now It&#39;s Personal - gzip aktiviert, webp-Bilder & Icomoon

Was bringt eine Promotion bei Instagram? - gzip aktiviert, webp-Bilder & Icomoon

Was bringt eine Promotion bei Instagram? - gzip aktiviert, webp-Bilder & Icomoon

Statt Font Awesome mit 700 Icons und einer Größe von 77,9 kb, verwende ich nun eine Font von Icomoon mit genau den 12 Icons, die ich auch brauche und die dadurch nur mit 4,1 kb zu Buche schlägt. Als Fazit für diese Optimierung kann man also festhalten: Binde nur ein, was Du auch wirklich brauchst. Oder wenn man den alten Ingenieursspruch etwas abwandelt: Nicht so viel wie möglich, sondern so viel wie nötig einbinden.

Dieser Artikel ist Teil einer Serie. Hier geht's weiter:

]]>
Aureola optimieren (2/5): JPG & PNG automatisch als WEBP ausliefern https://aureola.codes/de/blog/2021/optimizing-aureola-part-2-replace-images-with-webp 2021-01-17T00:00:00+01:00 2021-01-17T00:00:00+01:00 Nachdem ich im letzten Artikel bereits die gzip-Kompression unter Nginx aktiviert habe und damit ein paar Kilobyte einsparen konnte, widme ich mich in diesem Artikel der größten Baustelle: den Bildern. Ich zeige Euch, wie Ihr das Bildformat webp nutzen könnt, um Eure Bilddaten drastisch zu komprimieren.

Was bisher geschah

Little Astronaut - Now It's Personal - gzip aktiviert

Little Astronaut - Now It&#39;s Personal - gzip aktiviert

Was bringt eine Promotion bei Instagram? - gzip aktiviert

Was bringt eine Promotion bei Instagram? - gzip aktiviert

Schauen wir uns zunächst einmal an, wo wir zuletzt stehen geblieben waren. Die Downloadgröße beträgt nun 866 kb und 1,6 MB. Die Antwortzeit stieg leicht auf 359 ms und 459 ms. Der größte Teil der Downloadgröße geht auf die in den Artikeln eingebundenen Bilder zurück. Derzeit werden sie als jpg und png ausgeliefert. Aber es gibt noch ein weiteres Format, welches deutlich bessere Komprimierungsoptionen bietet: webp.

Triff WEBP

Webp ist ein Bildformat, welches von Google entwickelt wurde. Es bietet die MöglichkeitBilder verlustfrei, aber auch verlustbehaftet zu komprimieren. Dabei sind die erzeugten webp-Bilder laut Eigenwerbung bis zu 34% kleiner (26% bei verlustfreier Kompression) als vergleichbare Formate. Der Browser-Support ist mittlerweile relativ gut, ein Fallback sollte aber dennoch in Erwägung gezogen werden.

Zur Umwandlung stellt Google einige Tools zur Verfügung. Wer sich mit der Command Line nicht wohlfühlt, kann aber auch auf Online-Tools oder andere Software zurückgreifen. Ich habe mich für cwebp entschieden, da ich das Tool in meinen Deployment-Prozess integrieren möchte.

Die Installation kann unter Ubuntu einfach aus den Paketen geschehen:

$ apt update
$ apt install webp -y

Anschließend steht das Tool cwebp über die Kommandozeile zur Verfügung. Ohne nennenswerte Settings definieren zu wollen, kann man die Konvertierung dann so anstoßen:

$ cwebp path/to/source.jpg -o path/to/target.webp

Standardmäßig wird eine verlustbehaftete Kompression mit einer Qualitätseinstellung von 75% verwendet. Stellt man hier einmal beispielhaft Original und konvertiertes Bild nebeneinander, merkt man, dass dabei einige Artefakte entstehen und die Qualität abnimmt. Was hier tolerierbar ist, hängt sicherlich vom Einzelfall ab. In meinem doch recht Textlastigen Blog dienen Bilder vor allem der Illustration. Der Qualitätsverlust ist (Stand jetzt) für mich also auf jeden Fall zu verschmerzen. Die Art und Qualität der Komprimierung ist natürlich komplett einstellbar.

JPG vs WEBP

JPG vs WEBP

Mit Nginx automatisch Webp ausliefern

Wie im vorherigen Artikel bereits erwähnt, betriebe ich einen Nginx-Server. Diesen können wir nutzen, um automatisch webp-Dateien auszuliefern, sofern der Browser dies unterstützt und es eine webp-Alternative für eine Datei gibt. Natürlich könnt Ihr auch einfach webp-Bilder anstatt von jpg oder png in Eure Seite einbinden. Aber das schließt dann natürlich Browser dies das nicht unterstützen explizit aus.

Bei Nginx überprüfen wir zunächst einmal, ob der Browser webp überhaupt unterstützt. Hierfür erstellen wir eine Config-Datei /etc/nginx/conf.d/webp.conf mit folgendem Inhalt:

map $http_accept $webp_suffix {
    default   "";
    "~*webp"  ".webp";
}

Wir testen hier, ob der Browser einen Accept-Header für webp gesendet hat und setzen anhand dessen eine Variable mit dem Namen $webp_suffix auf den Wert .webp. Ist das nicht der Fall, wird als default ein leerer String definiert. Diese Variable brauchen wir, um Requests von Bilddateien automatisch...

]]>
Aureola optimieren (1/5): gzip-Kompression unter Nginx aktivieren https://aureola.codes/de/blog/2021/optimizing-aureola-part-1-gzip-compression 2021-01-10T00:00:00+01:00 2021-01-10T00:00:00+01:00 Ich habe mir endlich einmal die Zeit genommen aureola.codes zu optimieren. Und die Ergebnisse können sich sehen lassen. Von 1,7 MB Download-Größe blieben am Ende nur noch 0,27 MB übrig, die Antwortzeit verkürzte sich teils um die Hälfte. In dieser Serie zeige ich Euch, wie ich das geschafft habe.

IST-Analyse mit der Wasserfall-Ansicht in Chrome DevTools

Das Wichtigste an jeder Optimierung ist messen, messen, messen. Chrome bietet mit der Waterfall-View der DevTools eine schöne Möglichkeit die Requests, Downloadgrößen und Ladezeiten einer Seite zu analysieren. Ich habe mir hier exemplarisch einmal zwei Seiten herausgegriffen, die über ausreichend Content verfügen. Wichtig: Die Antwortzeiten können mitunter stark schwanken. Es ergibt daher Sinn den Mittelwert aus mehreren Reloads zu errechnen.

Status Quo: Little Astronaut - Now It's Personal

Little Astronaut - Now It's Personal - Status Quo

Little Astronaut - Now It&#39;s Personal - Status Quo

Little Astronaut - Now It's Personal bietet sich an, da hier vor allem viele zusätzliche Bilder geladen werden. Ohne Optimierung hat der Artikel eine Antwortzeit von 324 ms und eine Downloadgröße von 984 kb. Insgesamt werden 19 Requests abfeuert. Der Großteil davon sind Bilder, danach kommen Fonts und zu guter letzt Javascript- und CSS-Dateien.

Status Quo: Was bringt eine Promotion bei Instagram?

Was bringt eine Promotion bei Instagram? - Status Quo

Was bringt eine Promotion bei Instagram? - Status Quo

Was bringt eine Promotion bei Instagram? hat zwar insgesamt weniger Bilder, diese sind aber deutlich schlechter optimiert. Wir haben hier dann nur 17 Requests, dafür aber eine Downloadgröße von sportlichen 1,7 MB und letztlich eine Antwortzeit von 433 ms.

Optimierung der Javascript- und CSS-Dateien durch gzip-Kompression

Normalerweise würde man natürlich mit dem größten Klopper anfangen (das wären die Bilder). Aber da die fehlende gzip-Kompression so ins Auge springt und auch einfach recht schnell gemacht ist, beginne ich damit. Meine Webseite läuft unter Nginx. Hier lässt sich gzip recht einfach über die Konfiguration aktivieren. Prinzipiell könnt Ihr das global über die /etc/nginx/nginx.conf machen bzw. eine Konfiguration im Order /etc/nginx/conf.d ergänzen. Ich persönlich habe aber gern die Möglichkeit Einstellungen je Seite ein- und abschalten zu können. Beispielsweise, weil ich sie zunächst auf der Testinstallation überprüfen möchte.

Bei Nginx bietet es sich an dann mit Snippets zu arbeiten. Dabei handelt es sich um Konfigurationsschnipsel, die man flexibel in die Konfigurationsdateien der einzelnen Seiten importieren kann. Wir erstellen also einen Snippet in /etc/nginx/snippets/gzip.conf mit folgendem Inhalt:

gzip on;
gzip_comp_level 2;
gzip_min_length 256;
gzip_proxied any;
gzip_vary on;

gzip_types
    application/atom+xml
    application/javascript
    application/json
    application/ld+json
    application/manifest+json
    application/rss+xml
    application/vnd.geo+json
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/bmp
    image/svg+xml
    image/x-icon
    text/cache-manifest
    text/css
    text/plain
    text/vcard
    text/vnd.rim.location.xloc
    text/vtt
    text/x-component
    text/x-cross-domain-policy;

Hier nur das Wichtigste zum Inhalt:

  • gzip_comp_level 2; definiert das Level der Kompression (mehr Kompression = kleinere Dateien = braucht mehr CPU)
  • gzip_min_length 256; definiert die Mindestgröße einer Datei die verarbeitet werden soll (kleinerer Wert = mehr Dateien werden verarbeitet = braucht mehr CPU)
  • gzip_types welche Dateitypen sollen verarbeitet werden?

Weitere Details könnt Ihr aus der Dokumentation entnehmen. Dieser Snippet wird dann in der entsprechenden Seiten-Konfiguration inkludiert. Diese findet Ihr jeweils im Ordner /etc/nginx/sites-available.

server {
  ...
  include /etc/nginx/snippets/gzip.conf;
  ...
}

Nun muss der Server...

]]>
Little Astronaut - All Colors Are Beautiful https://aureola.codes/de/blog/2021/little-astronaut-all-colors-are-beautiful 2021-01-01T00:00:00+01:00 2021-01-01T00:00:00+01:00 Es ist vollbracht. Nach Wochen harter Arbeit und schlaflosen Nächten habe ich gerade die nächste Version von Little Astronaut veröffentlicht. Ich habe mich entschieden, zuerst das All Colors Are Beautiful Update zu machen und habe einige Features von Sharing Is Caring hinzugefügt, um die Dinge ein wenig aufzupeppen. Hol es dir jetzt im Google Playstore und im Apple App Store.

Little Astronaut - All Colors Are Beautiful

16 Freischaltbare Charaktere

Little Astronaut - All Colors Are Beautiful

Beginnend mit diesem Update können Spieler nun verschiedene Charaktere freischalten, zunächst mit 16 Variationen. Neue Charaktere werden alle paar Wochen oder Monate hinzugefügt. Um Charaktere freizuschalten, müssen die Spieler Kristalle sammeln, was sie auf verschiedene Arten tun können. Du kannst einfach das Spiel spielen und sie auf der Flucht sammeln. Du kannst Errungenschaften erlangen und dafür extra Kristalle bekommen. Du kannst Promotionen senden oder empfangen, belohnte Anzeigen ansehen oder tägliche Geschenke erhalten.

Komplette grafische Überarbeitung

Little Astronaut - All Colors Are Beautiful
Little Astronaut - All Colors Are Beautiful
Little Astronaut - All Colors Are Beautiful

Ich habe mir auch die Zeit genommen und die Grafik des Spiels überarbeitet. Anstelle von 3 verschiedenen Plattformtypen gibt es nun 16 verschiedene Plattformelemente, 2 verschiedene Motoren und 4 verschiedene Thruster. Die Plattformen werden zufällig erstellt, um mehr visuelle Abwechslung zu bieten. Ich habe auch eine bessere UI hinzugefügt, die nun die aktuelle Geschwindigkeit des Spielers anzeigt. Auch der Beschleunigungseffekt wurde verändert.

Öffentliche Spielerprofile

Little Astronaut - All Colors Are Beautiful

Spieler haben nun die Möglichkeit, ihr Profil in den sozialen Medien zu veröffentlichen. Veröffentlichte Profile können über einen Webbrowser aufgerufen werden, ohne dass das Spiel installiert werden muss. Dies ist eine großartige Möglichkeit, Freunden deinen Fortschritt zu zeigen und auch deinen Promo-Code zu teilen, mit dem du durch die Anwerbung anderer Spieler Promotionen erhalten kannst. Dies ist zum Beispiel ein öffentliches Spielerprofil.

Neue Musiktracks, neue Soundeffekte und mehr

Little Astronaut - All Colors Are Beautiful

Aufgrund von Euren Feedback habe ich den Soundtrack geändert und 4 neue Musiktitel hinzugefügt. Die Action-Musik wird sich bei jedem Durchspielen ändern, damit die Spieler nicht genervt sind, wenn sie immer wieder das gleiche Lied hören. Außerdem gibt es neue Sounds, bessere visuelle Effekte für den Game Over Screen, tägliche Geschenke und einige kleinere Features, die die meisten Spieler gar nicht erkennen werden. Zum Beispiel zeigt die Erde im Menübildschirm je nach Spielzeit einen anderen Rotationsgrad und wechselt auch zwischen Tag- und Nachtzeit.

Hol's Dir Jetzt

Roadmap

Little Astronaut - All Colors Are Beautiful

Details findest Du auf der Projektseite von Little Astronaut.

]]>
Was bringt eine Promotion bei Instagram? https://aureola.codes/de/blog/2020/was-bringt-eine-promotion-bei-instagram 2020-12-10T00:00:00+01:00 2020-12-10T00:00:00+01:00 Was bringt eigentlich eine Promotion bei Instagram? Ich wollte es etwas genauer wissen und habe es darum in der letzten Woche einfach einmal ausprobiert. Natürlich habe ich mein aktuelles Spiel Little Astronaut beworben, für das vor kurzem ein neues Update heraus kam. Die Ergebnisse meiner Analyse möchte ich Euch natürlich nicht vorenthalten.

Little Astronaut - Promotion

Als Post habe ich die Ankündigung für das Now It's Personal-Update verwendet. Ich habe weiter nichts daran angepasst und wollte einfach sehen, was Instagram mir an zusätzlichem Publikum bringen kann. Prinzipiell kann man jeden Instagram-Post promoten. Hierfür wählt man ein Publikum, ein Budget und eine Dauer aus.

Publikum & Budget will gut überlegt sein

Little Astronaut - Promotion

Will man kein eigenes Publikum auswählen, kann man Instagram auch anhand der Follower eines generieren lassen. Da meine Follower vor allem andere Indie-Entwickler sind, kam das für mich natürlich nicht in Frage. Statt dessen wählte ich selbst ein geeignetes Publikum aus. Hier kann man zunächst Alter & Geschlecht angeben, aber auch welche Länder oder auch spezifische Städte man ins Visier nehmen möchte. Zusätzlich gibt man ein paar Begriffe ein, die das Publikum weiter eingrenzen sollen.

Ich entschied mich dafür ein etwas erweitertes Europa ins Visier zu nehmen und konzentrierte mich dort auf Männer und Frauen im Alter von 13 - 35 Jahren. 13 Jahre ist hierbei das Mindestalter bei Instagram und auch das bei den meisten Spielen, wenn man nicht beim Datenschutz in Teufels Küche kommen möchte. Für Europa entschied ich mich, da der Ranking-Server derzeit in Deutschland steht und ich noch keine Tests zu Latenzen in weit entfernten Ländern durch geführt habe.

Als Themenfeld entschied ich mich für Benutzer, die Casual und Mobile Games bevorzugen, aber auch auf süße Figuren stehen. Hier kann man sicherlich noch etwas fein justieren, aber das genügte mir hier zu Testzwecken für den Anfang.

Als Budget entschied ich mich für 36 $ über 6 Tage verteilt. Dabei stellte ich sicher, dass ich auf jeden Fall das Wochenende mitnahm, wo ich mir mehr Aktivität erhoffte.

Zusätzlich muss man noch entscheiden, worauf die Promotion abzielen sollte. Ich wollte mehr Spieler akquirieren, also leitete ich alle Klicks auf die Projekt-Seite von Little Astronaut weiter.

Was hat's gebracht?

Little Astronaut - Promotion

Hier zunächst einmal die nackten Ergebnisse: Über die Dauer von 6 Tagen mit einem Budget von 36 $ klickten 768 Menschen auf den Link zur Webseite. Zusätzliche bekam ich 135 Likes, 60 Saves und 198 Profilbesuche. Von den 768 Website-Besuchern, klickten 470 Menschen (Daten aus Matomo) auf einen der beiden Download-Links. Schließlich und endlich wurden daraus 261 neue Spieler (Daten vom Ranking-Server). Das wäre dann eine Conversion-Rate von 33,98% und Kosten von 0,14 $ pro Spieler.

Allerdings muss man diese Zahlen mit Vorsicht genießen. Zunächst einmal kann man nicht genau sagen, wie viele Likes man ohnehin bekommen hätte. Und außerdem muss man in Betracht ziehen, wie viele Spieler man normalerweise pro Tag gewinnt. Das wären bei mir derzeit ca. 11,83 Spieler. Also im Verlauf von 6 Tagen ca. 71 Spieler. Diese sollte man also aus dem Ergebnis heraus...

]]>
Little Astronaut - Minor Update https://aureola.codes/de/blog/2020/little-astronaut-minor-update 2020-12-06T00:00:00+01:00 2020-12-06T00:00:00+01:00 Gerade ist ein weiteres Update von Little Astronaut veröffentlicht worden. Es beinhaltet einige Bugfixes und Optimierungen. Holt es Euch jetzt im Google Playstore und im Apple App Store.

Was Gibt's Neues

  • Du kannst nun direkt aus dem Spiel Bugs melden oder Änderungswünsche senden.
  • Die Anzahl der Anfragen an den Ranking-Server wurde reduziert und die Performance der Anfragen stark verbessert.
  • Ein paar Icons wurden durch neuere Varianten ausgetauscht.
  • Ein Bug wurde behoben, bei dem es dazu kommen konnte, dass das Ranking und/oder Spielerprofil unter iOS nicht sofort aktualisiert wurde.

Hol's Dir Jetzt

Roadmap

Details findest Du auf der Projektseite von Little Astronaut.

]]>
Little Astronaut - Now It's Personal https://aureola.codes/de/blog/2020/little-astronaut-now-its-personal 2020-12-01T00:00:00+01:00 2020-12-01T00:00:00+01:00 Jetzt ist's persönlich! Das nächste Update für Little Astronaut ist gerade eingetroffen und bringt aufregende neue Funktionen. Das Rankingsystem wurde verbessert, um den Fokus auf loyale Spieler zu verlagern, Spielerprofile wurden hinzugefügt und über 30 Erfolge warten darauf, erreicht zu werden. Holt es Euch jetzt im Google Playstore und im Apple App Store.

Little Astronaut - Now It's Personal

Neue Spielerprofile

Little Astronaut - Now It's Personal

Die größte Änderung, die mit dem Now It's Personal Update kommt, ist das neue und schicke Spielerprofil. Hier können Spieler ihren Rang, ihre Punkte und ihre erworbenen Erfolge einsehen. Außerdem können sie endlich ihren Namen ändern. Für den Anfang habe ich 30+ Achievements erstellt, aber weitere sind geplant. Manche Achievements kann man mehrfach erhalten.

Neues Rangsystem

Little Astronaut - Now It's Personal

Lass mich Dir das neue Rangsystem vorstellen. Neben der Neugestaltung der GUI wurde ein neues Leaderboard hinzugefügt, das den Fokus auf loyale Spieler verlagert. Hier werden Eure Gesamtpunkte gezählt, die Ihr über alle Plattform-Runs hinweg verdient habt. Wie bisher wird Deine beste Punktzahl dem sekundären Leaderboard hinzugefügt. Bist Du mehr der Langzeitarbeiter oder wirst Du versuchen, den besten Run zu bekommen? Es ist Deine Entscheidung.

Übersetzt mit www.DeepL.com/Translator (kostenlose Version)

30+ Erfolge hinzugefügt

Little Astronaut - Now It's Personal

Um die neue Funktion Errungenschaften zu integrieren, habe ich den Game Over-Bildschirm geändert. Er zeigt jetzt Deine letzte Punktzahl und Deine neue Gesamtpunktzahl an. Wenn Du während Deines Runs neue Errungenschaften erhalten hast, werden diese im letzten Panel angezeigt.

Hol's Dir Jetzt

Roadmap

Little Astronaut - Now It's Personal

Details findest Du auf der Projektseite von Little Astronaut.

]]>