14:45 – Responsive Webdesign oder Media Queries
Und am Nachmittag wieder ein Vortrag mit Jonas Hellwig. Themen hier sind: Inline Block, VH, Typo, Quantity Queries, Multi Columns, Flex, Grid … alles 100% JavaScript free da es immer funktionieren soll. Wer es nicht weiß, JavaScript kann man im Browser deaktivieren.
Responsive ist 2010 erst so richtig wichtig geworden. Flexible Media, Flexible Grid (basiert auf Prozentangaben) und Media Queries standen für responsive Design. Fluides Design wird oft als responsive Design verkauft obwohl es zwei unterschiedliche Designarten sind. Anfänglich basierte alles auf float-Elementen. Daraus haben sich Frameworks wie Foundation und Bootstrap entwickelt. Die Breakpoints (Punkte, an denen die Webseite umbricht und die Elemente anders anordnet) wurden auf Devicebreiten gelegt und nicht auf das Layout selbst. Was bedeutet das: es wurde und wird teilweise immer noch darauf geschaut wie es auf den verschiedenen Geräten aussieht und nicht wie das Layout aussieht. Die Umbrüche werden dann exakt für zum Beispiel das iPad mini gesetzt um dann für das iPad Pro, dass ein größeres Display hat, einen neuen „Umbruch“ zu setzen damit die Inhalte dort nebeneinander angezeigt werden anstatt untereinander. Nach den Breakpoints kamen Flexboxen (grow, shrink, basis sind die Schlüsseleigenschaften). Damit wurden die Prozentwerte des responsiven Designs und der Breakpoints aufgebrochen. Deklarierte man vorher zum Beispiel für einen großen Display das Bild mit 40% Breite und den Text mit 60% breite wurde für das Handy ein Breakpoint gesetzt damit beide Elemente 100% Breite bekamen. Mit den Flexboxen weichten diese Angaben auf. Bei CSS Grid verhält es sich ähnlich (fr ist hier die Eigenschaft, es ist eine flexible Einheit). Flexboxen und CSS Grid entfernen sich immer weiter von den Pixelangaben.
Der Weg zum Design System
Responsive Layout Pattern machten die Anfänge 2012. Ein Beispiel hier ist Mostly Fluid Pattern. Die Informationsdichte geht von oben links nach unten rechts, also diagonal. Zur besseren Veranschaulichung:https://www.lukew.com/ff/entry.asp?1514
Danach kamen Responsive Pattern wobei die Kombination aus Layout und Responsive Pattern in den Frameworks zusammengeführt wurden. Nach den Patterns wurde es Kleinteilig mit Atomic Design. Man sieht hier schon ganz gut, wie rasant die Entwicklung verläuft.
Persönliche Anmerkung: Wenn wir mit Atomic Design dem kleinsten Element auf der Spur sind, was kommt dann danach? Mikro Design? Macro Design? Oder geht es dann wieder retour zu Static Webseiten mit fixen Fensterbreiten, Gif Animationen, Lauftexten und Blinke Blinke Buttons?
Media Queries wurden zeitlich vor Flexbox und Gridsystem erfunden. Technisch gesehen jedoch noch zu früh, daher wurden und werden sie immer noch falsch eingesetzt. Mit den Media Queries frage ich normalerweise nach dem Viewport, das heißt ich frage erst wie Breit oder Hoch mein anzuzeigendes Fenster ist und gebe dann dementsprechend das Styling aus. Wenn ich jedoch den Ansatz von Atomic Design verfolge, also nach den kleinsten Elementen gehe, interessiert mich der Viewport mal gar nicht. Media Queries passen nicht zu dem modularen Design, sie erzeugen zu viel Code. Bei Atomic Design werden Element Querie benötigt, Komponenten mit eigenen Breakpoints.
Erstklassiges Responsive Web Design ist nach wie vor komplex!
Media Queries 2019
Breakpoints sind abhängig vom Content, nicht vom Device. Es sollte mir vorerst mal egal sein, wie es am Handy, am Tablet, usw. aussieht. Vorrangig ist, dass ich mir das Design, das Layout ansehe wie es sich bei den unterschiedlichen Breiten und Höhen verhält. Das schafft man schon mit einfachen, alten, ursprünglichen CSS wie es Hellwig vormacht.
Versteht man die CSS Basics und ist mit ihnen vertraut, so schafft man fluides Layout zu schreiben ohne dass der Inhalt einer Seite zum Hüpfen anfängt, wenn der Browser plötzlich etwas schmäler gemacht wird.
Die Beispiele die Hellwig hier bringt sind einfach grandios. Ich freue mich schon die Folien herunter zu laden. Bin regelrecht sprachlos.
Für die Insider:
Mit inline-block und text-align Anweisungen bekommt man nette fluide Effekte zustande
Viewport Units: Text Größe mit vh/vw statt px. Das ermöglicht eine stufenlose Skalierung von Texten.
Viewport Units + Calc: Kann die Schrift stufenlos skalieren mit einer minimalen und maximalen Größe
Multi Columns: Ziemlich altes CSS und sehr flexible. Text in Spalten darstellen.
Quality Queries: Ab einer gewissen Anzahl von Kindelemente sollen die Elemente sich anders verhalten. Eine einfache Anweisung hier ist, :nth-last-child(n+5) ~ li (In den Folien gab es einen Link zu einem Tool, den ich hier zu einem späteren Zeitpunkt noch eintragen werde)
Bei den Flexboxen sind die Breakpoints bereits in den Komponenten gesetzt.
Zu „the holy albatross“ meinte Hellwig, dass einmal lesen wohl nicht reichen wird. Auch ein zweites Mal oder gar drittes Mal wird nicht reichen. Irgendwann, nach dem fünften Mal wird man es dann einfach so hinnehmen. Steht somit auf meiner Leseliste.
Für Interessierte hier der Link: http://www.heydonworks.com/article/the-flexbox-holy-albatross
Allgemein ist zu sagen, Pixelwerte sollten generell vermieden werden. Auch bei Media Queries sollte eher auf em und rem Einheiten gesetzt werden.
Zusammengefasst muss ich sagen, es war ein wahnsinnig interessanter Vortrag. Er hätte noch zwei Stunden weiterreden können. Unglaublich was sich in den letzten Jahren alles getan hat, was an mir vorüber ging. Ich habe viel Aufholbedarf!
16:00 – A Year with Progressive Web Apps
stop call progressive web apps trendy!
Ihr erratet es, wieder etwas auf Englisch. Hier werde ich wohl oder übel und der späten Stunde geschuldet zwischen Deutsch und Englisch hin und her switchen.
Der Vortragende Antonio Peric-Mazar, gebürtiger Kroate (somit kroatisches Englisch), hatte ein sehr flottes Tempo beim Vortrag. War für mich sehr schwierig ihm zu folgen.
PWA (Progressive Web Apps) changing the things
Anfangs erklärt er was PWA eigentlich ist:
1. Progressive:
PWA is:
progressive
funktioniert für jeden Benutzer, unabhängig von der Auswahl des Browsers, gespeichert wird über https, uvm.
Stack
Kernanforderungen und optionale Zusatzfunktionen
4 Dinge, auf die man sich konzentrieren sollten: Schnell, Integriert, Zuverlässig, Engagierend
Schnell bedeutet hier kein unnötiges Scrollen, optimierte Performance
Prinzipiell gilt: 3 Sekunden mehr Ladezeit bedeutet 53% der User zu verlieren
Integrated
Der Benutzer sollte nicht den Browser öffnen müssen um auf die App zuzugreifen, stattdessen sollte es am zum Beispiel Handy am Homescreen installierbar sein. 80% der Benutzer haben absichtlich Apps auf ihren Startbildschirm verschoben um schneller zugreifen zu können. Vom Homescreen aus erreicht man eine 40% höhere Interaktionsrate.
Bei Web Payment APIs wird der gesamte Vorgang mit einer AutoFill Methode um 30% schneller und auch um einiges einfacher obwohl noch x-Aktionen vom Benutzer gemacht werden müssen. Mit der Payment API bei PWAs erhält man ein Popup das akzeptiert werden muss und der Vorgang ist abgeschlossen. 1-Tab, automatische Aktionen im Hintergrund, einfach und schnell. Es gibt schon einige Application Payments wie Google Pay die integriert werden können um die User Erfahrung angenehmer zu gestalten.
Persönlich halte ich nicht so viel davon, da die Hürde etwas zu kaufen dadurch massiv verringert wird. Wirtschaftlich gesehen ist es eine lohnenswerte Entwicklung.
Reliable: Lie-Fi
PWAs sind offline verfügbar. 60% der mobilen Verbindungen nutzen immer noch das 2G Netz. Schnelle Anwendungen sind unerlässlich für gute UX (User Experience). Dazu werden sogenannte Service Worker genutzt.
Service Worker sitzen zwischen dem Server und der Seite. Sie können alle Dinge zwischenspeichern (cachen) und an die Anwendungen bei Bedarf übergeben. Somit werden die Inhalte der PWA auch offline verfügbar. Es ist ein Skript, das im Hintergrund ausgeführt wird. Voraussetzung ist, dass die Anwendungen schon mal gestartet wurde (wenn der Benutzer online war).
Ein weiterer Punkt sind Push-Benachrichtigungen. Der Browser muss dazu nicht geöffnet werden. Die PWA zeigt dem Benutzer dennoch Benachrichtigungen an. Pünktlich, Präzise und Persönlich.
Zum Schluss stellte Peric-Mazar noch Lighthouse vor. Ein sehr leistungsfähiges Werkzeug – gut zum Testen. Abgerundet haben einige Tests von verschiedenen Seiten mit Lighthousemobilehtml5.org
Fazit des Vortrages: Sehr interessant aber da ich mich vorher noch nie mit Progressive Web Apps auseinandergesetzt habe und durch die Geschwindigkeit des Vortrages etwas schwierig zu folgen. Merkt man wahrscheinlich schon beim Durchlesen der Zusammenfassung. 😉
17:15 – The Future of Authentication – WebAuthn with PHP
Arne Blankerts
Blankerts hat den Vortrag sehr interessant gestaltet. Den Anfang habe ich leider verpasst, da ich zuerst bei einem anderen Vortrag gesessen bin, der mich jedoch nicht so angesprochen hat. Der Vortrag war wieder auf Englisch, doch dieses Mal in einem angenehmen Tempo und mit viel Witz und Humor.
Anfangs ging es um OTP – One Time Passwords
Möglichkeiten hier wären zum Beispiel sich das Passwort via SMS zuschicken zu lassen oder einen RSA Key zu benutzen. Beides ist aus diversen Gründen, die er ausgeführt hat, für die breite Masse nicht geeignet.
Eine weitere Möglichkeit ist WebAuthn und nein ich hab mich nicht verschrieben. Das ’n‘ gehört da dazu. Es ist ein offizieller W3C-Standard, eine Teilspezifikation der FIDO2 Spezifikation, ein öffentlicher Schlüssel zur Authentifizierung in Browsern.
Wie funktioniert es (einfache Darstellung):
Der Benutzer schickt eine Registrierungsanfrage an den Browser. Der Browser fordert die Registrierungsseite vom Server an. Der Server stellt HTML + JS bereit die sich der Browser holt vom Server holt. FIDO2 erstellt einen Schlüssel der an den User geschickt wird. User gibt ein OK an FIDO2, den den Public Key und die Signatur an den Browser schickt. Der wiederum schickt das dann an den Server.
Ein sehr einfacher Weg wäre der USB Keylogger. Ein Vorteil ist, wenn man ihn verliert, der Finder weiß nicht auf welchen Seiten dieser benutzt wurde und das generieren von neuen Keys ist sehr einfach. Problematisch wird es nur mit dem Handy.
WebAuthn and PHP
Demos:
- webauthn.io
- webauthn.me
- demo.yubico.com/webauthn
- webauthn.lubu.ch
Unterstützt von folgenden Browsern
- Firefox 60+ : only USB supported
- Chrome 67+: on Android 70+
- Opera 54+
- Edge 18*
Mit WebAuthn
- keine Passwörter erforderlich: keine schwachen Passwörter mehr
- keine Passwortwiederverwendung
- Auf dem Server werden keine vertraulichen Informationen gespeichert
- Benutzer müssen der Website nicht vertrauen
- Phishing funktioniert grundsätzlich nicht
mehr auf webauthn.guide
Fazit des Tages
Ich hab am Vormittag noch eine interessante Firma kennen gelernt, die sich auf die Sicherheit von PHP Frameworks spezialisiert haben. Sobald ich wieder daheim bin, werde ich ihre Demoversion mal durchtesten. Könnte interessant sein für mich aber preislich muss ich mit ihnen noch verhandeln. Vierstelliger Betrag, auch wenn es jährlich ist, wär dann doch etwas too much.
Der erste Tag war sehr interessant. Ich bin schon auf morgen gespannt.
