JavaScript, HTML5 & Angular Days 2016

Benedikt Keller Datum: 28. November 2016
Autor: Benedikt Keller


Einige von uns Portalentwicklern waren im Oktober in Berlin auf den JavaScript, HTML5 & Angular Days 2016. Hier nachträglich noch kurz meine und Bennis Highlights:

“Dem Benedikt seine Highlights”

CSS3 Flexbox

Der Style “display: flex;” ist ein unglaublich flexibles und simples Werkzeug, um Responsivität in die kleinsten Module zu bringen. Wo wir heute noch mit Style-Hacks arbeiten, reichen damit zukünftig ein paar wenige Style-Angaben.

Beispiel Größe, Aufteilung und Zentrierung von Teasern:
Wenn wir heute Teaser responsiv bauen wollen, müssen wir erstmal entscheiden, wie viele Teaser wir in einer Reihe erwarten, müssen den Teasern für verschiedene Auflösungsbereiche feste prozentuale Größen und Abstände geben und für die Ausrichtung mit Floats, Margins, Whitespaces und diversen anderen Styles jonglieren.
Mit Flexbox setzen wir dem Wrapper “display: flex”, wodurch alle direkten Kindelemente sofort zu flexiblen Boxen werden und versuchen, sich den vorhandenen Platz gleichmäßig (oder in angegebenem Verhältnis) zu teilen. Setzt man den Kindelementen – also den Teasern – dann eine Mindestbreite, so entscheidet der Browser selbst, wie viele Teaser er unterbringt und wie breit diese sein dürfen/sollen.

Beispiel Zentrierung von Elementen:
Derzeit kursieren verschiedenste Hacks, um Elemente zu zentrieren. Beispielsweise durch eine feste Breite des Elements, eine Verschiebung um 50% und der Rückverschiebung durch die halbe Breite durch Margins.
Bei Flexboxen reicht hier ein simples “margin: auto;” auf das Element.

Zudem kann man sehr einfach z.B.:

  • Die Reihenfolge der Elemente manipulieren
  • Die Ausrichtung der Elemente ändern
  • Die Contents von Tabellen durch Umwandlung vertikal gespiegelt darstellen

Problematisch ist derzeit noch die Browserunterstützung. Da der Internet-Explorer bisher sein eigenes Süppchen kochte, ist erst seit IE 11 eine partielle Unterstützung und erst ab dem Edge eine vollständige Unterstützung vorhanden. Auch in manch anderen gängigen Browsern war zum Zeitpunkt der Fortbildung noch keine zuverlässige Unterstützung gegeben, diese haben aber seitdem nachgezogen und bieten in den neuesten Versionen die Unterstützung.

JS Pointer-Events

Noch reine Zukunftsmusik sind Pointer-Events. Mit der immer steigenden Anzahl an Endgeräten und Technologien steigt auch das Problem mit Listenern auf verschiedene Eingabetypen.

Wollen wir heute auf mehr als simple Click-Events o.ä. hören, so müssen wir einzeln die Listener für Maus, Tastatur, Touch-Display, Stift, … umsetzen. Das macht eine umfangreichere und saubere Verwendung der Listener sehr aufwändig, komplex und fast unmöglich.

An der Lösung dieses Problems wird derzeit gearbeitet. So sollen sogenannte Pointer-Events zukünftig die Events aller Eingabetypen vereinen und die Anzahl zu setzender Listener drastisch reduzieren. Will man das Verhalten eines Events überschreiben, muss man nur einen Listener setzen, will man für einen speziellen Eingabetyp etwas ändern, so kann man zur Prüfung den aktuellen Eingabetyp im Event-Objekt erfragen. Mit diesem automatischen Handling soll dann auch endgültig der 300ms Delay fallen, wodurch die gefühlte Performance erheblich verbessert wird.

Wann das allerdings als Standard verabschiedet und einsetzbar wird, steht derzeit noch in den Sternen.

“Dem Benni seine Highlights”

CouchDB

CouchDB ist genial! RESTful, per Javascript „konfigurierbar“ und replizierbar. Anwendungsfälle könnte ich bei uns durchaus in imx.Image und imx.Mapwork sehen.

Promises

Promises sind das geilste JS-Feature ever! Sollten wir unbedingt verwenden und zwar exzessiv.

Frontend-Frameworks

Frontend-Frameworks (in meinem Fall Aurelia) führen extrem schnell zu coolen Ergebnissen, sind bei uns jedoch eher schwierig zu integrieren. Ansonsten sehe ich hier auch durchaus Karten und Metasuchen als Anwendungsgebiete.

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


OOP 2014

Autor: Christian Göbel


Projekte // Technologie // Über den Tellerrand


Auf geht’s zu Tag 2 auf der OOP in München. Dieses Jahr steht die Konferenz unter dem Motto: Complexity – Managing Today’s Challenges. Und dieses Leitthema wurde gestern in zwei Keynotes von Tim Mattson (Intel Corp.) und Glenda Eoyang (Human System Dynamics Institute) bereits in seinen vielschichtigen Facetten aufgegriffen. Die Quintessenz: Komplexität (in IT-Projekten) lässt …


Beitrag lesen
05.
Februar
2014

Mass Apache .htaccess redirect generator

Autor: Benjamin Hofmann


Technologie


Vielleicht für den einen ganz nützlich wenn in einem Projekt mal wieder gefühlt hunderttausende Redirects notwendig sind: http://redirectgenerator.netmagnet.cz/. Hiermit ist es sehr einfach statische Redirects zu generieren, also ohne reguläre Ausdrücke in den URLs, die dann an Variablen übergeben werden. Das Tool habe ich schon ein paar mal kurz genutzt und fand es durchaus hilfreich …


Beitrag lesen
18.
Januar
2017

kraken.io: Einfaches Web Interface zur Bild-Optimierung

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Auch wenn wir inzwischen vermehrt skalierbare Iconfonts oder SVG-Grafiken einsetzen, so kommt es doch immer wieder vor, dass wir auch Rastergrafiken in den Formaten JPEG, GIF oder PNG im Layout einsetzen. Was wir aber allzu oft übersehen ist, dass man bei diesen einiges an Dateigröße sparen kann. Und das kommt inzwischen nicht nur denen zugute, …


Beitrag lesen
28.
Nov.
2014

CKEditor Update im imx.CMS

Autor: Bastian Schwarz


Technologie


Demnächst kommt ein neues Release mit der neuesten Version des CKEditors. Dabei wurde ein Update von 4.4.6 auf die aktuellste 4.6.2 durchgeführt. Zusätzlich wurde die Konfiguration etwas optimiert und neue Plugins für das Bearbeiten von Tabellen eingeführt. Die Funktionalität an sich hat sich dabei natürlich nicht geändert, aber es wurden wieder einige Bugs gefixt. Außerdem …


Beitrag lesen
28.
Februar
2017