Markus: JSCamp

Donnerstag

Kyle Simpson

Am Anfang ist nur der Focus auf den Content, dann kommt das optische. Web Performance lowjs.org Web performance wird wichtiger und wichtiger. IMG FOIT FOUT Flash of Unbehaviored Content Relows and restyles Placeholders and Spinners? Die User sind sehr Tolerant. IMG The Great Lie Responsive Design: Kein User zieht den Browser und sieht eine schöne Animation. Er hat sein Device und will es dort richtig ansehen. IMG Devide in the Web Community Beispiel, warum kein Javascript keine option ist, mit Google Maps. IMG Priority of Consitituencies User Agent => User Advocate Product + UI + UX => Imprintable Design Das Design sollte für jeden User massgeschneidert sein. IMG Flawed design = Wichtig ist nicht das Pixel Perfect, eine Applikation sollte robust sein und eine gute User Experience haben.

Erklärung warum eine schlechte Internetverbindung eine sehr schlechte User Experience ist.

Flawed: Browser knows best CPU/Memory available => true Power unlimited => false Data unlimited => false Hands usable => false Lightthig conditions => false

Pick Your Font Size Flawed: people always wand the most powerful experience. Viele Inder benutzen Opera mini, aber ohne Facebook Layout.

Users sollen mehr Kontrolle über das Web erhalten. IMG Request-Fidelity Header

Should we wait on browsers adopt? => NO

Links

https://WebPageTest.orgwebpagetest.org

Progressive Enhancement: Zed’s Dead, Babytomdale

Ziel des Vortrages

Er zeigt den Weg vom Anfang des Webs bis jetzt. Users sollen mehr Kontrolle über das Web erhalten. Weil immer mehr User mobile unterwegs sind, müssen die Websites auch beim Verbrauch des Gerätes darauf achten, weil das auch ein Teil des User experiences ist.

Jenn Creighton

Iterators

ECMA create the own iterators. The spread operator div. IMG's

Ziel des Vortrages

Nutze Iterable Iterators. Es wurde eine Geschichte erzählt, wie man auf die Suche geht um ein "undefined" zu identifizieren und so zu gestalten, dass die Werte ausgelesen werden können.

Sigurd Schneider

Inside V8: weak collection garbage collection

Memory Organisation

WeakRef

Cross-generation References

Ziel des Vortrages

Wie müssen Objekte erstellt werden, damit die Referenzierungen gelöscht werden können. (Garbage Collections)

Maya Shavin

CSS in JS

React verfolgt dieses Konzept mit CSS in JS in den Components.

Warum ist CSS in JS Sinnvoll?

Was ist der Nachteil von einem eigenen CSS. CSS hat einen globalen Scope. Es muss Minified werden. Sharing Components. Wenn eine Klasse nicht eindeutig mit der Position identifiziert werden kann, kann es mit !Important überschrieben werden.

OOCSS & SMACSS BEM CSS processors

CSS Module ist mehr ein Konzept als eine Library. Scalling and Sharing: wenn alles in einem File ist, ist es schwieriger am selben File zu arbeiten.

Ziel des Vortrages

Es wird erzählt, in welchem Jahr CSS und JS im Web integriert wurden. In einer Zeitleiste wird gezeigt wann was integriert wurde. Es wird gezeigt, welche vor und Nachteile es hat wenn CSS in JS geschrieben wird.

Adam Argyle

Prototypes

beim Prototype hat es ein manifest.json mit allen wichtigen Informationen.

Beim Tab gibt es standardmässig delay von 300ms.

Mit den Meta Tags können die unterschiedlichen Device Screen definiert werden. Priorisierung: Critical vs Non-Critical Benutze in einer App die Möglichkeiten von Kamera, Geo Location .etc.

Optimierung ist auch Preloading, Caching etc.

Viele Infos sind identisch, welche im Workshop über Website Performances besprochen wurden.

Lacy Tactics Libs Dinamic Imports

Scroll bouncing

Ziel des Vortrages

Was alles benötigt wird, was für das optimale prototyping. Ein erstellen eines optimalen Skeleton. Alles minimieren, damit die Grösse der App so klein ist möglich. Viele Tips für die optimierung von Bilder Animationen etc.

Shawn Wang

JAMStack

Javascript / API's / Markups

Ziel des Vortrages

Es wird aufgezeigt, was der unterschied von Client und Server Side rendering. Git Hub Pages ist JAMStack.

Freitag

Garance Flore Vallat

Accessible Javascript Patterns

PAGING

Erstelle Funktionen, welche ein Keyup, Keydown Pageup, Pagedown etc. handelt, damit ein User die Website ohne eine Maus bedienen kann.

FOCUS

zusätzliche Funktionen für focusAfterClosed oder focusFirst.

Man sollte mal alle Key Funktionen testen und einen sinnvollen Einbau überlegen.

Ziel des Vortrages

Unterstützung von Menschen mit einer Beeinträchtigung. Wie ist das Handling von div. Keyfunktionen und wie sollen diese Sinnvoll benutzt werden.

Ruben Bridgewater

Error handling: doing it right!

Benutze Promises für das Error handling, Das hat aber einige Nachteile. Wichtig ist, dass die Error Message nicht verloren geht. IMG API error (router.get)

Error Layers Jeder Layer hat einen spezifischen Teil einer Applikation. Jede DB hat einen Error handler. etc.

Util Promisify von Node anschauen.

Use async await für ein einfacheres Debugging.

Ziel des Vortrages

Wichtig ist, dass error Handling nicht vergessen wird und auch die wichtigen Informationen auch ausgegeben und nicht verloren werden.

Sean Larkin

How we make Web Apps lightning fast as Microsoft

Eine Interaktion auch während dem Ladeprozess macht die User glücklich. Page Load Time Cause: Javascript , CSS, Network Request

Mit einem schnelleren Pageload, gibt es eine viel bessere User experience und die User verbringen längere Zeit auf der Applikation.

Service Workers (muss ich anschauen)

Ziele

Warum muss viel Code geladen werden, obwohl er gar nicht benötigt wird. Das verlangsamt die ganze Applikation. Mit async chunks kann ein code Splitting realisiert werden.

Dynamische Import mit Variablen.