Hallo,
aufgrund umfassender Arbeiten an einem “modularen UI Konzept” hat sich diesmal der Newsletter um eine Woche verschoben. Diesmal größeren Themen rund um Authentifizierung, Passwort Handling einigen Vorträgen zur Web Entwicklung von der Google I/O, Microsoft Build usw.
Allgemein
Standard für selbst anpassbare Wifi Mesh Netzwerke wurde nun veröffentlicht. Die Open Source Community hat mit NetJson auch schon ein Format zur Konfigurationsaustausch von Router vorgeschlagen
https://www.wi-fi.org/discover-wi-fi/wi-fi-easymesh
http://netjson.org/
Thoughtworks Technology Radar wurde wieder veröffentlicht mit einer guten Übersicht neuer Trends, Werkzeuge usw. im Bereich Software Entwicklung
https://www.thoughtworks.com/radar
Ein paar mehr Quellen zu Design Systemen und Prinzipien zu modularer UI Entwicklung
https://www.designsystems.com/
https://designsystemssurvey.seesparkbox.com/
http://bradfrost.com/blog/post/style-guide-driven-design-systems/
https://channel9.msdn.com/Events/Build/2018/BRK2413 ==> Fluent Design: Evolving our Design System – Microsoft Build 2018
https://www.youtube.com/watch?v=Ty6VjgVHiko ==> Material Design 2.0 by Google I/O 2018
Im Rahmen von Smart Home tauchen immer wieder “Regelsystem” auf Cross-Device Ebene auf. Hier eine gute Untersuchung von mozilla zu diesem Thema
im Bereich User Experience für Multi-device und multi-modale Interaktion
https://medium.com/firefox-ux/multi-device-task-continuity-6b1099514830
Cognitive Load und Kurzeitgedächtnis sin bei unseren datenlastigen Interfaces doch ein wichtiges Thema. Anbei ein paar Hintergrundinfos dazu
https://www.nngroup.com/articles/working-memory-external-memory/
UI Formular Elemente Dropdown vs. Radio Elementen, wann soll man was verwenden
https://blog.prototypr.io/7-rules-of-using-radio-buttons-vs-drop-down-menus-fddf50d312d1
Google kennzeichnet HTTPS Verbindung nicht mehr… aber markiert HTTP Verbindungen bald als unsicher… Nicht wirklich für den Endkunden eine vertrauliche Meldung im Zusammenhang mit unverschlüsselten IoT Geräten in lokalen Netzwerken (Vor allem für Router Admin Web Oberflächen)
https://www.heise.de/newsticker/meldung/Google-Chrome-wird-HTTPS-Seiten-bald-nicht-mehr-kennzeichnen-4051683.html
Gute Übersicht für ein kurzen Abgleich unserer HTTP Schnittstelle unter anderem für Content Security, Cache Funktionen und andere Web Performance Bereiche
https://www.fastly.com/blog/headers-we-dont-want
Browser Wars und andere Lösungsvorschläge für Polyfills
https://alistapart.com/article/the-slow-death-of-internet-explorer-and-future-of-progressive-enhancement
Vortrag: Web Performance made easy – Google IO 2018
https://www.youtube.com/watch?v=Mv-l3-tJgGk&feature=youtu.be
https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/ ==> aufgepasst mit reinen JavaScript Seiten
https://serviceworke.rs/ ==> Caching Mustervorschläge für das Frontend
Vortrag: Native Web Animation with CSS, JS usw. – JSUnconf 2018
https://www.youtube.com/watch?v=Nf_LOfzpric
HTML & CSS & SVG
Tabellen sind ein großes Inkonsistenz Thema in User Interfaces. Ein paar Anregung für Responsives Tabellen Verhalten
http://lea.verou.me/2018/05/responsive-tables-revisited/
https://css-tricks.com/responsive-tables-revisited/
https://css-tricks.com/short-note-on-what-css-display-properties-do-to-table-semantics/ ==> Barrierfreitheit mit Tables
News zu Custom Properties und anderen Environment Variablen in CSS für ein responsives Verhalten
https://www.smashingmagazine.com/2018/05/css-custom-properties-strategy-guide/
https://css-tricks.com/css-environment-variables/
Schöne Zusammenfassung zum overflow CSS Property
https://dev.to/neshaz/the-guide-to-css-overflow-property-mg3
Eine gute Übersicht und Anregung für numerische Listen Styling.. Vielleicht auch für die Einrichtung/Assistenten ganz interessant
https://css-tricks.com/custom-list-number-styling/
JavaScript spezifisch
Vortrag: Build the future of the web with modern JavaScript (for Chrome Browser) – Google IO 2018
https://www.youtube.com/watch?v=mIWCLOftfRw
Implementierung von Fragmentierung und Konfigurationen in JavaScript Web Apps
https://medium.freecodecamp.org/environment-settings-in-javascript-apps-c5f9744282b6
Test Driven Development mit JEST
https://vueschool.io/articles/series/testing-like-a-pro-in-javascript/
Rekursive Funktionen und Komponenten sind in manchen Bereichen sehr hilfreich. Hin und wieder stößt der JS Stack an seine Grenzen, anbei eine Lösung
https://blog.logrocket.com/using-trampolines-to-manage-large-recursive-loops-in-javascript-d8c9db095ae3
Software Technik und Architektur
Open Closed Prinzip für die Entwicklung von Komponenten und Modulen eine gute Hilfestellung, sei es in Lua oder Javascript
https://www.alexaitken.nz/blog/o-for-open-closed-principle/
https://medium.com/@dan.shapiro1210/understanding-component-based-architecture-3ff48ec0c238
https://varun.ca/tachyons-components/ ==> Praxis Beispiel
https://varun.ca/styled-system/ ==> Praxis Beispiel für die Umsetzung Modularer UI Komponenten
Vortrag: How hard can it be! Practical uses of complexity theory – RegeX, Schema, Kinds of Validation Data usw. | JSUnconf 2018
https://www.youtube.com/watch?v=ljVPAqR-aF0
Workflow und Tools
Auch wenn es manchmal bei heißt console === evil als Logging Tool… Dennoch hier ein paar sehr gute Tipps fürs schnellere Debugging mit console
https://flaviocopes.com/console-api/
https://hacks.mozilla.org/2018/05/debugging-modern-web-applications
Anregung wie Ciso Systems Ihre Backend API mit Postman dokumentierte und auch gestaltete
http://blog.getpostman.com/2018/05/18/cisco-devnet-uses-postman-to-grow-their-developer-community/
https://github.com/CiscoDevNet/postman-xapi ==> Sehr schönes Beispiel, wie man einen API Workflow dokumentieren und verbessern kann
https://developer.cisco.com/ ==> Developer Community Design Beispiel
Web Security
Passwörter und Authentication ist in jeder Webapp ein Thema. Hier ein paar gute Zusammenfassungen für eine Passwortfreie Anmeldung, sichere Passwörter usw.
Schöne Zusammenfassung aus UX Design und Entwickler Sicht:
https://www.smashingmagazine.com/2016/06/the-current-state-of-authentication-we-have-a-password-problem/
Hintergründe zur Implementierung von sicherer Passwort Generierung
https://support.1password.com/strong-master-password/
https://nextcloud.com/blog/nextcloud-will-check-passwords-against-database-of-haveibeenpwned/
https://colloq.io/blog/how-our-password-check-works
Auf dem Berliner VueJS Meetup gab es eine sehr gute allgemeine Zusammenfassung: Token based Authentication um Backend APIs und Frontends abzusichern
https://www.youtube.com/watch?v=Ib7oO0UERzg
Zudem versucht das W3C an verschiedenen Baustellen die Authentifizierung zu verbessern. Ein Thema sind “Same-Site” Cookies zum Speichern von Authentifzierungs Token
https://blog.mozilla.org/security/2018/04/24/same-site-cookies-in-firefox-60/ ==> Sehr interessanter Ansatz um unsere Formulardaten und Quelle besser überpüfen zu können
Desweiteren wird an einem festen Authentifizierungsstandard Web-Auth-N (Erweiterung / Neuaufschlag zu OAuth2)
https://webauthn.io/
Mozillas Ansatz eines reibungsloses Log-In Ansatzes mit und ohne Passwörter
https://www.engadget.com/2018/05/09/mozilla-firefox-passwords-web-authentication-support/
https://www.engadget.com/2018/04/10/fido-w3c-web-authentication/
https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API
https://hacks.mozilla.org/2018/01/using-hardware-token-based-2fa-with-the-webauthn-api/ ==> inkl. 2 Faktor Authentifizierung
Google – Chrome Ansatz eines reibungsloses Log-In Ansatzes mit und ohne Passwörter
https://developers.google.com/web/updates/2018/05/webauthn ==> Enabling Strong Authentication with WebAuthn
https://www.youtube.com/watch?v=DBBFK7bvEQo ==> Seamles Login mit Chrome: Secure and Seamless Sign-In: Keeping Users Engaged
OAuth2 Schulung für die Absicherung von APIs und Frontends im Oktober 2018
https://www.facebook.com/events/1738752042853092/
Großangriff auf Konsumer Router von LinkSys, Netgear usw. Teilweise wird auch ein Hack des Admin Panels vermutet…
https://arstechnica.com/information-technology/2018/05/hackers-infect-500000-consumer-routers-all-over-the-world-with-malware/
Abhängigkeiten von JavaScript Packages ist ein brisantes Thema. NPM hat reagiert und bietet ein Security Audit für NPM Packages an. Sollten wir auf jeden Fall machen
https://blog.npmjs.org/post/173719309445/npm-audit-identify-and-fix-insecure
VueJS spezifisch
Sehr brauchbare fortgeschrittene VueJS Online Videokurse für erweiterte UI Komponenten Entwicklung. Sehr interessant für interne Weiterbildung im Bereich VueJS
https://frontendmasters.com/courses/advanced-vue/
https://adamwathan.me/advanced-vue-component-design/
https://www.vuemastery.com/courses/advanced-components/the-introduction
Sehr gutes Tutorial über Testdriven Development mit VueJs und einem Beispiel Applikation, wie Komponenten, Router VueX Stores usw. automatisiert getestet werden können
https://vueschool.io/articles/tutorials/5-testing-a-vue-component/324/
https://github.com/eddyerburgh/vue-hackernews/tree/master/src
Conference Talks der Orleans Conference sind nun alle online, hier meine persönlichen Hightlights
https://www.vuemastery.com/conferences/vueconf-2018/prototyping-with-vue-single-file-component-pine-wu
https://www.vuemastery.com/conferences/vueconf-2018/7-secret-patterns-vue-consultants-dont-want-you-to-know-chris-fritz
https://www.vuemastery.com/conferences/vueconf-2018/a-short-synopsis-of-vue-storybook-peter-finn
Multi Root Elementen innerhalb einer Komponenten mittels Render Function erzeugen
https://zendev.com/2018/05/07/multi-root-vue-components.html
Gutes kurzes Beispiel für Lazy Loading Komponenten und Pages mit Webpack und Vue-Command Line
https://alligator.io/vuejs/lazy-loading-vue-cli-3-webpack/
Ein Grund warum VueJS eine gute Wahl auf lange Sicht ist. Denn es lassen sich relativ leicht heute schon Web Kompontenten aus VueJS erzeugen.
https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/
Ein paar schöne Techniken zur Render Properties und Container Components
https://www.vuemastery.com/conferences/vueconf-2018/a-react-point-of-vue-divya-sasidharan ==> Stichwort:Null Render
Provider und Inejct VueJS API sind hilfreiche Componenten Tools für die Umsetzung abstrakter UI Bibliotheken bauen, siehe hier:
https://medium.com/@znck/provide-inject-in-vue-2-2-b6473a7f7816
Und Doku für tief weiter gebenden Parameter and Child Komponenten
https://vuejs.org/v2/api/#provide-inject
Exotisches
WebAssembly – Ausführen von C, C++, Rust, und bald auch Lua Code im Browser
https://www.youtube.com/watch?v=BnYq7JapeDA
https://github.com/appcypher/awesome-wasm-langs
Selfhosting Werkzeuge und Anwendungen fürs Privatleben
https://blog.ivansmirnov.name/what-can-you-do-with-a-personal-server/
Interessante Artikelserie über Nutzungsmuster im Web
https://medium.com/twill/rethinking-the-creative-web-our-journey-to-reimagine-web-publishing-for-the-social-web-26c2f347fcd0
https://medium.com/twill/rethinking-the-creative-web-part-2-designing-hopscotch-3ab41f9fbf27
https://medium.com/twill/rethinking-the-creative-web-part-3-towards-a-new-read-write-web-185fe258690b
Augmented Reality Projekt nach Hause gebracht… Könnte bei der Einrichtung und Kennzeichnung wo der Repeater platziert werden soll helfen
https://www.heise.de/make/meldung/Augmented-Reality-aus-der-Ikea-Lampe-Raspi-macht-s-moeglich-4047460.html
