JavaScript, HTML5 & Angular Days 2016


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


Textfield-Resize des Browsers steuern

Autor*in: Axel Güldner


Technologie


Wer hat dieses Textfield-Resize eigentlich eingeführt? War es der Chrome der es das erste mal angeboten hat? War es der Safari? Egal, Apple oder Google, einer von beiden ist mit Sicherheit schuld. Aber Moment, wovon rede ich da eigentlich? Dem einen oder anderen, vielleicht ja auch jedem, ist evtl. aufgefallen, dass sich Textfields in Formularen …


Beitrag lesen
05
APR
12

Servus, Magazin gråd extra Nr. 6!

Autor*in: Christine Pfleger


infomax   //   Strategie & Konzeption   //   Technologie   //   Tourismus   //   Über den Tellerrand   //   User Experience & Design


Die gerade erschienene sechste Ausgabe unseres Magazins gråd extra befasst sich mit dem Schwerpunkt Verbindungen | Mensch-Maschine. Wir spüren diesen Verbindungen nach und liefern Impulse für deren Inwertsetzung. Ein Blick ins Magazin.


Beitrag lesen
27
JUL
22

JIT Grunt

Autor*in: Florian Müller


Technologie


Dieser Beitrag nimmt Bezug auf meinen vorherigen Beitrag zur Optimierung von Grunt. Wer diesen nicht kennt, wird mit diesem hier nicht viel anfangen können. Wer den Concurrent Task und dazu auch den Time-Grunt einsetzt, mag schon mal bemerkt haben, dass bei jedem Concurrent Task sämtliche Tasks geladen. Auf dem DEV dauert dies auch mal gerne 2 …


Beitrag lesen
08
FEB
17