Beiträge aus der Kategorie: Webentwicklung

Geschwindigkeit ist alles

Es gibt ja für alles Untersuchungen. Auch dafür, wie sich die Ladezeit einer Website auf die mögliche Absprungrate der Besucher auswirkt. Und man mag es kaum glauben, aber die Erkenntnis ist, dass je länger eine Website zum Laden benötigt, desto höher ist die Chance, dass der Besucher den Tab schließt. Unglaublich.

Man sollte also alles daran setzen, dass eine Website so schnell wie möglich ausgeliefert und vor allem angezeigt wird. Mal abgesehen, dass man dafür sorgen sollte, dass Elemente im sichtbaren Bereich zuerst gerendert werden und schon gar nicht während des Ladens hin- und herflippen sollten, ist ein weiterer Faktor, den man ganz gut beeinflussen kann, die Anzahl und vor allem die Größe der Ressourcen wie Stylesheets und JavaScript so gering wie möglich zu halten.

Mit TYPO3 10.3 ist hierfür der AssetCollector integriert worden. Mit diesem können Skripte und Stylesheets in Fluid-Dateien mit den Viewhelpern f:asset.script und f:asset.css dem Renderingprozess hinzugefügt werden. Und das ähnlich dem schon in 8.6 hinzugefügten renderAssetsForRequest, mit dem man über die beiden Fluid-Sections HeaderAssets und FooterAssets entsprechenden Code rausrendern konnte.

Der entscheidende Unterschied ist, dass, wie der Name schon vermuten lässt, der AssetCollector die Stylesheets und Skripte erstmal sammelt und dann nur einmal im Rendering inkludiert. Heißt, ich kann in diversen Fluid-Dateien mit dem gleichen Namen auf die gleiche JavaScript-Datei referenzieren, die ich zum Beispiel für einen Slider benötige, die dann aber am Ende des Dokuments nur einmal per Script-Tag im Dokument hinterlegt wird.

Ein weiterer Vorteil ist, dass man auf diese Art und Weise dafür sorgen kann, dass nur benötigte Ressourcen an den Browser gesendet werden und nicht ein JavaScript-Plugin für ein Akkordeon, welches gar nicht auf der Seite vorhanden ist. Natürlich hebelt das ein wenig das Konzept aus, dass man eigentlich immer die gleichen Ressourcen an den Browser sendet, damit dieser diese auf der zweiten Seite gar nicht mehr anfordert, weil er sie dann aus seinem Cache nimmt.

Aber mit der gleichzeitigen Verwendung von HTTP/2, das dafür sorgt, dass die Ressourcen zum Rendern der Website an den Browser ausgeliefert werden, bevor dieser überhaupt weiß, dass er sie benötigt, wird in Verbindung mit der geringen Datengröße trotzdem ein Geschwindigkeitsvorteil erzielt, der sich vor allem in einem schnelleren Rendering der Seite bemerkbar macht. Dabei ist es gar nicht schlimm, dass die Ressourcen nicht im Concatenate- oder Komprimierungs-Prozess von TYPO3 integriert werden, wie man das ja bisher gewohnt war, wenn man seine Ressourcen mittels TypoScript eingebunden hat.

Und schon hat man wieder ein paar mehr Besucher seiner Website glücklicher gemacht.
Und ja, ich weiß, hier auf der Seite habe ich leider noch kein HTTP/2 aktiviert. Liegt nicht an mir. Tut mir leid.

Wie kann man nur ohne Shell leben?

Hallo, ich bin Stephan, Anfang 40 und entwickle unter Windows. So oder ähnlich würde ich mich wahrscheinlich bei den anonymen Entwicklern vorstellen. Denn nach zwölf Jahren unter macOS muss ich seit Mitte des Jahres berufsbedingt mit Windows als OS klarkommen. Was mittlerweile ganz gut geht, denn Windows ist nicht schlechter als macOS oder Linux. Und die anderen sind nicht besser. Nur anders.
Man merkt, ich bin noch in der Leugnungsphase.

Aber mal ehrlich, was brauche ich denn? Eine IDE (PhpStorm) und DDEV als Docker-Konfigurationssoftware. Und eine Shell.
An letzterer mangelt es aber unter Windows. cmd.exe und die Windows PowerShell kommen in keiner Weise an iTerm2 mit Oh My Zsh heran. Und auch nach mehreren Monaten heule ich meiner Shell unter macOS nach. Ich habe zwar mittlerweile mit ConEmu und Oh My Posh einen ähnlichen Ersatz gefunden, aber so richtig doll fühlt sich eine PowerShell im Vergleich zu zsh nicht an. Aber den Quake-Modus gibt es auch mit ConEmu.

DDEV auf dem Webmontag

Letzten Montag hat es mich nach einer längeren Pause wieder auf den Webmontag Kassel verschlagen. Als Entschuldigung habe ich auch eine Session über DDEV gehalten, die ich leider nicht so gut vorbereiten konnte, wie ich mir das vorgestellt hatte. Sie wissen schon: Familie, Wochenende und alles, was so dazwischenkommt.

Meine Folien kann man hier einsehen, die der anderen Sessions sind bestimmt auf der MeetUp-Seite zu finden. Die Vorträge über Ethical Design, GraphQL und Event Storming waren klasse und das Format des Webmontags so als kleines Appetithäppchen zwischen den ganzen Konferenzen und Barcamps, die man so verfolgen kann, genau richtig.

Hacktoberfest 2018

Open Source lebt ja nicht nur von der Idee, dass die Software quelloffen und damit für jeden einseh- und bewertbar ist, sondern auch davon, dass die Möglichkeit gegeben sein kann, dass jeder mitmachen kann. Jedenfalls, wenn der Autor der Software mitmacht und sogenannte "Pull Requests" entgegennimmt.
"Pull Requests" sind Quellcode-Schnippsel (oder auch Assets), die von Entwicklern beigesteuert werden können, die keine Schreibrechte im Repository haben. Sie dienen vor allem dazu Bugs zu beseitigen, aber auch um Features ein- oder auszubauen. Oder um Dokumentationen zu pflegen.

Das Hacktoberfest wird 2018 zum fünften Mal von GitHub und DigitalOcean organisiert (und dieses Jahr ist auch zum ersten Mal Twilio als Supporter dabei) und zelebriert einen Monat lang Open Source Software. Man kann daran weltweit teilnehmen, indem man im Oktober fünf Pull Requests in offenen Projekten auf GitHub postet. Die müssen noch nicht einmal angenommen werden, nur sollten sie nicht in Fake-Repositories landen oder aus Spam bestehen.

Meine Pull-Requests sind bis jetzt in die Repositories von Oh My Zsh, DDEV und gitignore.io gewandert. Vielleicht finde ich diese Woche auch noch ein wenig Zeit. Am Freitag gab es jedenfalls noch ein Hacktoberfest-Meetup in den heilligen Hallen der Micromata hier in Kassel, bei dem ich auch ein paar Stunden anwesend war. Hat Spaß gemacht und wieder Lust gemacht, die Webmontage zu besuchen, die dort auch abgehalten werden.

Oh my shell!

Für mich ist das wichtigste Werkzeug nach einer Entwicklungsumgebung eine gut funktionierende Shell. Ohne diese könnte ich diverse Dinge in meinem täglichen Workflow gar nicht oder nur schwer umsetzen. Klar gibt es eigentlich für alle Befehle, die man in einer Shell abfeuert, in der ein oder anderen Weise eine Ersetzung in Form von graphischen Oberflächen oder Integrationen in die IDE, aber diese sind entweder kompliziert zu konfigurieren oder bieten in den meisten Fällen nur einen geringen Teil der notwendigen Befehle oder Parameter.

Die Zeiten, in denen so eine Shell nur aus einem blinkenden Cursor bestand, man sich mühsam die Syntax von Befehlen merken musste und sie sich gefühlt nicht in den Workflow integrieren lies, sind auch vorbei. Und mit "Oh My Zsh" existiert sogar noch ein "Konfigurations"-Framework, das eigentlich keine Wünsche offen lässt, weil man es einfach selber erweitern kann.

Zwar kann man Oh My Zsh auch im Terminal von macOS verwenden, aber wenn man schon mal dabei ist, kann man ja auch gleich noch einen Ersatz dafür installieren: iterm2. Ein Ersatz für das macOS-Terminal, das neben einer Suche, Profilen und einer Historie über seine unzähligen Parameter so konfigurierbar ist, dass es sich wie bei Quake von oben öffnet. Was will man mehr?

Installation

Man sollte erstmal Homebrew installieren, danach kann man mit

brew cask install iterm2

iterm installieren. Und dann gleich noch mit folgendem Befehl "Oh My Zsh" nachinstallieren:

sh -c "$(curl -fsSL raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Konfiguration

Fangen wir mal an erstmal iTerm2 etwas aufzuhübschen: Material Design Colors, "Quake-Console"-Shortcut und besser lesbare Schriftart.

Das Farbprofil für die Material Design Colors kann man sich hier herunterladen und diese dann in den Einstellungen unter Profiles > Colors in der Selectbox unten rechts "Color Presets..." importieren und auswählen.

Um ein Terminalfenster so ähnlich wie das Terminal bei Quake von oben herunter aufgehen zu lassen, erstellt man unter dem Reiter Profiles ein neues Profil mit ähnlichen Einstellungen wie im Bild zu sehen. Die wichtigste Einstellung ist bei Style den Wert "Full-Width Top of Screen". 

Dann noch im Reiter "Keys" im Bereich "Hotkey Window" einen Shortcut definieren und dann fehlen nur noch ein paar Schriften, die man sich hier auf GitHub runterladen kann. Ich verwende für alle Fenster folgende Schriftart

12pt Meslo LG M DZ Regular for Powerline

Dann kommen wir zu "Oh My Zsh", das ganz einfach per Textdatei konfiguriert werden kann. In iTerm2 einfach folgenden Befehl ausführen oder die Datei im Editor seiner Wahl öffnen:

vi ~/.zshrc

In der gut dokumentierten Datei kann man neben dem Theme (ich verwende "awesomepanda") auch eine Menge Plugins installieren, die einem sehr viele nützliche Shortcuts und Tools zur Verfügung stellen. Eine Liste, welche Tools verfügbar sind, kann man hier einsehen. Ich verwende folgende Konfiguration:

plugins=(
brew
composer
docker
dotenv
git
osx
urltools
web-search
)

Ansonten lohnt es sich, Shortcuts/Aliase für Befehle in dieser Datei abzulegen. Welche gerade aktiv sind, kann man sich mit "alias" anzeigen lassen.

Ordentlich debuggen mit Xdebug und PhpStorm

Es gibt ja nichts Schlimmeres, als Code nicht ordentlich debuggen zu können. Nicht nachvollziehen können, warum der vermaledeite Code, den man gerade mit Herzblut und Schweiß geschrieben hat, verdammt noch mal nicht das hinten rauswirft, was er soll.

Da PHP größtenteils zur Laufzeit und dann auch noch von einem serverseitigen Daemon beziehungsweise Webserver interpretiert wird (Caches jetzt mal außen vorgelassen), benötigt man eine Erweiterung in Form von Xdebug, die sich dazwischen schaltet und Informationen an die IDE liefert. Unter macOS kann man das Installieren sowieso recht bequem per Homebrew erledigen:

brew install php71-xdebug

Wie man den Rest (Apache, MySQL und PHP) installiert, hatte ich hier mal beschrieben, auch wenn man anstelle der MariaDB lieber Mysql 5.6 installieren sollte.

Okay, zurück zu Xdebug, dass zwar jetzt schon installiert, aber noch nicht konfiguriert ist. Im Verzeichnis /usr/local/etc/php/7.1/conf.d sollte sich die Datei ext-xdebug.ini befinden, in die man folgendes schreiben sollte:

[xdebug] zend_extension="/usr/local/opt/php71-xdebug/xdebug.so" xdebug.max_nesting_level = 500 xdebug.idekey = PHPSTORM xdebug.remote_host = 127.0.0.1 xdebug.remote_enable = 1 xdebug.remote_port = 9000 xdebug.remote_handler = dbgp xdebug.remote_mode = req xdebug.auto_trace=1 xdebug.collect_includes=1 xdebug.collect_params=1 xdebug.collect_return=1 xdebug.extended_info=1

Da Xdebug sich nach meinem Gefühl schon verlangsamend auf den PHP-Interpreter auswirkt, auch wenn kein aktiver Debugging-Prozess läuft, installiert man sich am Besten noch den Xdebug Toggler per

brew install xdebug-osx

Danach kann man dann per

xdebug-toggle on/off

Xdebug einfach ein- und ausschalten. Schlußendlich installiert man dann noch den Xdebug Helper in Chrome oder dem Browser seiner Wahl.

Fehlt jetzt nur noch die Konfiguration von PhpStorm und das Mapping von TYPO3-Core bzw. Erweiterung. Nehmen wir einfach an, dass eine Erweiterung debuggt werden soll die per composer in ein TYPO3-Projekt eingebunden ist. Ich verwende composer bei der Entwicklung von Erweiterungen so, dass zu entwickelnde Erweiterungen als Symlink eingebunden sind, damit sich die git-Repositories nicht in die Quere kommen. Könnte man auch mittels Submodule realisieren, aber ich mache es halt am Liebsten so.

In PhpStorm sollte man in der Konfiguration unter Languages & Frameworks > PHP > Debug die Optionen

  • Force break at first line when no path mapping specified
  • Force break at first line in when a script is outside the project

entfernen. Zusätzlich sollte man in den Einstellungen von PhpStorm unter Languages & Framework > PHP die korrekte Version und Cli-Interpreter angegeben und das "vendor/typo3/cms"-Verzeichnis als "External Library" eingebunden haben.

Wenn man nun die Debugging-Session in PhpStorm aktiv schaltet und zum Beispiel das Frontend von TYPO3 neu lädt, sollte sich PhpStorm mit einem Mapping-Hinweis zu Wort melden und auch gleich entsprechende Dateien zur Auswahl geben. Für das Frontend wählt man am Besten die index.php aus dem Hauptverzeichnis des TYPO3 Cores.
Fröhliches Debuggen!

Über den Weg Gelaufenes in KW12

Diese Woche lag im Zeichen des Frühlingsanfangs und irgendwie gab es wenig Artikel, die ich mir überhaupt zum Lesen markiert habe. Lag vielleicht aber auch daran, dass ich wenig dazu kam, meine RSS-Feeds zu scannen.

  • Wunschliste für die Integration von composer in TYPO3 Alexander Schnitzler hat auf Github einige Zeilen geschrieben, wie er sich selber die Integration von composer für TYPO3 vorstellt. Die Kommentare sind lesenswert, weil sie noch mehr Punkte aufgreifen.
  • Karabiner-Elements Tool, mit dem ich die Media-Tasten von macOS auf meine Pok3r-Tastatur legen konnte. Endlich.
  • Interview mit Donald Trump mit dem Time-Magazin Auf der einen Seite total faszinierend, wie so jemand Präsident eines riesengroßen und vor allem bunten Staat werden kann. Auf der anderen Seite beängstigend.
  • OpenEmu - Emulator für diverse Systeme Auf der Suche nach einem SNES-Emulator für den Raspberry Pi drauf gestoßen, ausprobiert und für gut befunden. Alte Spiele auf macOS mit dem PlayStation-Controller spielen. Wunderbar.
  • RetroPie - Emulator für den Raspberry Pi Ich habe es noch nicht ausprobiert, aber das scheint genau das zu sein, was ich für den Mini-Rechner benötige. Wenn das wirklich mit einem PlayStation-Controller zu koppeln ist, wird mein Sohnemann das hoffentlich wie ich hervorragend finden.
  • Der letzte Brand Faszinierendes Interview eines Workaholic und in Perfektion versessenen Mannes, der nicht zum ersten Mal alles hinschmeisst, weil es nur noch betriebswirtschaftliche Maximierung für seine Tätigkeit gibt. Nicht nur, dass ich Monkey 47 immer noch allen anderen Gins bevorzuge, weil er für mich die schönste, fruchtig-würzige Geschmacksnote hat, ich würde gerne mal so einen Williams aus seiner Brennerei probieren. Leider unbezahlbar.

Über den Weg Gelaufenes in KW11

Irgendwie habe ich es vergessen für die zehnte Woche meinen Reader zu entrümpeln. Auf der anderen Seite komme ich momentan gerade sowieso kaum dazu, Artikel mehr als die Phase des Scannens zu gönnen. Was sie echt nicht verdient haben. Die meisten jedenfalls.

  • KoN (King of Nothing) ist ein Rogue-like der in sieben Tagen aus der Feder von TINYTOUCHTALES und Max Fiedler. Die Macher des hervorragenden Smartphone-Kartenspiels haben dann auch nur fünf Tage für die Umsetzung eines Threes-Rogue-Likes benötigt. Scotty wäre stolz.
  • Thimbleweed Park wird endlich veröffentlicht Ich habe ja seit der ersten Ankündigung es so gut wie vermieden, Screenshots, Videos oder Artikel über das neue Machwerk von Ron Gilbert (unter anderem) anzuschauen und zu lesen. Auch wenn es nicht der große Wurf wird, möchte ich das Spiel ohne irgendwelche Beeinflussung genießen. Der Anspruch an ein neues Grafik-Adventure besonder in dem Stil ist einfach nicht zu erfüllen, das ist mir jetzt schon klar. Aber vielleicht werde ich ja eines Besseren belehrt. Hoffentlich.
  • Is design dead? Zu meiner Schande muss ich gestehen, dass ich diesen langen Artikel noch gar nicht gelesen habe, aber wenn es dort wirklich um die Praktiken des Extreme programming (XP) und Software-Design geht, habe ich das auf jeden Fall vor.
  • CSS Grid Layouts werden der neue Scheiss Die Unterstützung von Flexbox ist mittlerweile so stark, dass man es ohne Nachdenken verwenden kann und auch "Frameworks" wie Bootstrap verwenden diese Methode in Version 4. Der "Nachfolger" steht nun schon in den Startlöchern und erlaubt unter anderem zweidimensionale Grids anzulegen, die man so auch nicht mit Flexbox hinbekommt. Jedenfalls nicht mit purem CSS. Hier und hier gibt es noch ein paar Infos.
  • Die MiniDisc Ich wollte damals immer einen MiniDisc-Player haben, aber die waren für einen Schüler einfach viel zu teuer.

Über den Weg Gelaufenes in KW9

Der Frühling ist da. Sagt mein Körper. Und geht mir seit Tagen auf die Nerven, indem er mich total lahmlegt. Grippegefühl, Fieber, Muskelschmerzen und die Lunge tut weh. Allergiker kennen sowas. Nicht-Allergiker schauen einen immer unverstanden an. So von wegen "ist doch nur Frühling?". Egal, mal wieder zu nichts gekommen, noch nicht mal zum Zocken. Mit Kopfschmerzen und einer Reaktionszeit eines schmelzenden Gletschers kommt man Computerspielen nicht weit.

  • Kleiner Rand über Docker Die technischen Probleme kann ich so zwar nicht nachvollziehen, die Hürde Docker in einem relativ kleinen Entwicklungsteam, das überwiegend Websites oder Teile von Websites entwickelt, ist aber viel höher als der Nutzen.
  • Passwort-Apps auf Android und ihre Lücken Ein Team des Fraunhofer Instituts für Sichere Informationstechnologie hat mal die gängigen Passwort-Manager-Apps auf Android-Basis auseinandergenommen. Jetzt hätte ich gerne mal so ein Dossier für iOS-Apps. Danke.
  • Schöne Anleitung zum Deployen per FTP und Bitbucket Pipelines Boah, FTP, da bekomme ich immer noch Gänsehaut, warum das im 21. Jahrhundert scheinbar immer noch die gängige Methode ist, um sich mit Webspace zu verbinden. Schlimm das. Die YAML-Konfiguration kann man sich aber auch einfach auf SSH zurechtbiegen.
  • git flow als einfaches Branching-Model Kleine Teams brauchen geringen Overhead beim Entwickeln. Wenn man dann eigentlich noch einen Manager fürs Versionieren und Deployen brauchen würde, was zwar eigentlich sinnvoll wäre, würde das Budget kleinerer Projekte nicht mehr reichen.
  • Ein weiteres einfaches Branching-Model für git Ich habe es mir noch nicht durchgelesen, aber beim Überfliegen habe ich es so verstanden, dass immer im Master entwickelt wird. Das ist für mich keine Option, weil mein Deployment auf gewisse Branches aufsetzt. Wenn in diese gepushed wird, wird das entsprechende Deployment ausgelöst und der Master-Branch ist halt gleichzusetzen mit dem Stand im Livesystem.
  • Kleines und feines Best Practices in Extbase Oliver Klee hat sich die Mühe gemacht und eine Menge Tips und Tricks zum Entwickeln in Extbase zusammengestellt. Kann man einiges lernen und sich für seine eigene Entwicklung abschauen.

Über den Weg Gelaufenes in KW7

An dieser Stelle fange ich mal an, meine Pocket-Liste zu entschlacken, in dem ich erwähnenswerte Sites in solchen Artikeln wochenweise zusammenfasse. Vielleicht gibt es ja den ein oder anderen, der auch gefallen an manchen Artikeln findet. Mich selber soll es dazu bringen, Dinge, die ich mir für später merken möchte, auch wirklich abzuarbeiten. Und sei es nur, sie einfach ungelesen zu löschen.
Den Anfang machen folgende Artikel: