Zusammenfassung interessante Artikel, Codesnippets und Talks- 2018 – KW 21

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

Share Post :

More Posts

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.