Hallo,
der letzte Newsletter war aufgrund Krankheit ein wenig kürzer. Diesmal hat sich einiges über Best Practices mit CSS und JavaScript angesammelt. Auch zu VueJS gibt es wieder eine gute Sammlung von Links zu etwas fortgeschrittenen VueJS Themen im Bereich State Management, API Frontend und Backend Kommunikation usw. Im exotischen Bereich gibt es auch ein paar Artikel zum “AGILEN” Arbeiten und Leadership.
Wie immer sucht euch das Passende heraus und viel Spass!
Allgemein
Mozilla hat es wieder getan, der neue Internet Health Report (Themen: Digital Teilhabe, Offenheit, Datenschutz, etc.) in Deutsch
https://internethealthreport.org/2018/?lang=de
https://www.oreilly.com/ideas/cory-doctorow-on-the-fight-for-a-configurable-and-free-internet => Larry Lessig’4 forces for …
Weiter sehr empfehlenswerter Vortrag von der Google I/O betreffend Web, Frontend und UI Entwicklung für den Chrome
The web: state of the union (Google I/O ’18) ==> https://www.youtube.com/watch?v=Ay-mdLMDtbs
Design System und modulare User Interface sind nicht nur “Verallgemeinerungen“, sie sollen auch zum Experimentieren einladen. Spielplatz sind hierfür z.B. Patterns Lab oder Storybook
https://cloudfour.com/thinks/encouraging-play-in-design-systems/
https://medium.com/eightshapes-llc/getting-developers-started-with-a-design-system-d814fd390389
WebPush und Notification für Web Apps und dessen Infrastruktur ist in diesem Artikel sehr gut erklärt. Dennoch bitte sehr vorsichtig damit umgehen, siehe Calm Technology Prinzipien
https://webpushdemo.azurewebsites.net/
https://calmtech.com/
Diverse Review und Abnahme Prozesse sind manchmal sehr holprig. Low- bis High Fidelity Prototypen und einen fest definierten User Flow können an dieser Stelle verschiedene Review Zuständen die Zusammenarbeit verschiedener Abteilungen (Deisgner, Entwickler, Produktmanagement, usw.) massiv erleichtern. Anbei zwei gute Artikel, wie man damit umgehen kann
https://www.invisionapp.com/blog/low-fi-vs-hi-fi-prototyping/
https://uxdesign.cc/the-biggest-wtf-in-design-right-now-87139f367d66 => Beispielhafte Slack Konversion deckt sich sicherlich der alltäglichen Fehlkommunikation
Designing Web Content für Apple Watch – siehe auch Input für Telefon usw.
https://developer.apple.com/videos/play/wwdc2018/239/
HTML & CSS & SVG
Cascade in CSS ist eigentlich ein sehr gutes Feature um User Interface modulare zu stylen und dekorieren. Eine sehr gute kurze Auffrischung
https://blog.logrocket.com/how-css-works-understanding-the-cascade-d181cd89a4d8
Ein paar Hintergrund Infos zum z-Index, welche nicht ganz unwichtig für Popup /modale Dialog Fenster und andere Überlagerungen in Single Page Web Apps
https://medium.freecodecamp.org/z-index-explained-how-to-stack-elements-using-css-7c5aa0f179b3
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index
Über gutes modulares CSS und dessen verschiedenen Methodiken kann man sich streiten. Hier eine sehr gute Lösung mit dem Vorteilen von allen
https://css-tricks.com/combining-the-powers-of-sem-and-bio-for-improving-css/
https://zendev.com/2018/05/30/the-80-20-approach-to-sustainable-scss.html
Coding mit Farben ist manmchmal eine Herausforderung… anbei eine gute Technik mit CSS und dem Farbmodel HSL(a) gute Farbabstufungen umzusetzen, passend für StyleGuides und Barrierefreiheit (Konrastverhältnis)
https://css-tricks.com/hsl-hsla-is-great-for-programmatic-color-control/
JavaScript spezifisch
Eine schöne Auffrischung zu der sehr JavaScript spezifischen Variante von “this”. Bei Arrow Function (=>) verhält sich dies wieder in ES6 anders. Besonders VueJS arbeitet auch intensiv mit this und => functions
https://blog.bitsrc.io/what-is-this-in-javascript-3b03480514a7
https://medium.freecodecamp.org/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26
Ein paar gute Tipps für “guten” Code mit dem neuen JavaScript ES6
https://www.sitepoint.com/modern-javascript-best-practices/
Axios als HTTP Abstraktion für JavaScript wird von VueJS empfohlen und es ist auch ganz gut in der JavaScript Welt verbreitet. Hier eine schöne Zusammenfassung der grundlegenden Funktionen
https://medium.freecodecamp.org/simple-http-requests-in-javascript-using-axios-272e1ac4a916
Hin und wieder hat man Bitmasken und anderen sehr Binär-nahen Daten zu tun. Anbei ist ein schönes Beispiel wie umgehen mit Binärdaten und wie debuggen
https://blog.logrocket.com/binary-data-in-the-browser-untangling-an-encoding-mess-with-javascript-typed-arrays-119673c0f1fe
MetaProgrammierung und Definierung von allgemeinen Abstraktationen können gut mit Proxy und Reflections in JavaScript umgesetzt werden. Siehe Reactivity Sytem in VueJS mit Proxies. Ein guter Vortrag zum Thema: JavaScript Metaprogramming – ES6 Proxy Use and Abuse | JSConf Budapest 2017
https://www.youtube.com/watch?v=_5X2aB_mNp4
Liste von hilfreichen JavaScript Bibliotheken und Datenstrukturen
https://blog.bitsrc.io/11-javascript-utility-libraries-you-should-know-in-2018-3646fb31ade
https://github.com/trekhleb/javascript-algorithms
Schönes Beispiel eines eigenen Iterator mit den neuen Symbol API in ES6. Sehr praktisch um durch Listen und eigene definierte Datenstrukturen zu navigieren (mit Schleifen oder oder)
https://codeburst.io/javascript-es6-iterables-and-iterators-de18b54f4d4
Software Technik und Architektur
Guidelines und Tipps für das Erstellen und Arbeiten mit internen UI Bibiliotheken (wie z.B. Development Geschwindigkeit, UI Consistency, Maintenance and Standardization, Discover)
https://blog.bitsrc.io/building-a-shared-ui-component-library-350b297a53a8
Uncle Bob spricht über saubere Software Architektur. Vor allem sind dabei einige interessante Punkte zur Trennung von Frontend und Backend dabei
https://www.youtube.com/watch?v=o_TH-Y78tt4
Guter Coder / Clean Code macht das Programmierleben leichter. Jeder hat dann doch sein Vorlieben. Hier ein paar Punkte auf die man sich für einen Coding Guideline einigen könnte
https://medium.com/@navdeepsingh_2336/good-code-vs-bad-code-35624b4e91bc
http://clean-code-developer.de/ => eine sehr gute komplett Zusammenfassung
Workflow und Tools
ES Lint ist schon ein guter Helfer um Syntax Fehler vor “compilen” zu finden. Desweiteren könnte uns auch eine Erweiterung/Plugin Compat vor der Gefahr von Browser Inkompatibilität warnen, wie z.B. die Verwendung von Variablen Number.MIN_SAFE_INTEGER. Spart sicherlich extrem viel Debugzeit
https://twitter.com/mxstbr/status/816220545796730880?lang=de
https://github.com/amilajack/eslint-plugin-compat
Live Share ist ein nettes Tool für Microsoft Code zum gemeinsam Coden. Sieht ganz lustig aus, wenn man mal zusammen an einem Prototypen arbeiten möchte
https://scotch.io/tutorials/getting-started-with-live-coding-in-visual-studio-code-with-live-share
MS Code Shortcuts für die komfortable Programmier Arbeit
https://benfrain.com/text-editing-techniques-every-front-end-developer-should-know/
Web Security
Schönes Comics als Erklärung wie HTTPS genau funktioniert und wie HTTPS auch mit DNS funktionieren kann
https://howdns.works/
https://hacks.mozilla.org/2018/05/a-cartoon-intro-to-dns-over-https/
CORS (Cross-Origin Resource Sharing) ist im Web und für APIs ein allgegenwärtiges Thema. Vor allem in der Ajax und Single Page Apps ist es immer wieder ein Thema. Leider ist es auch hin und wieder schwierig zu verstehen was der Browser so alles in dieser Richtung an HTTP Request schickt. Anbei ein guter verständlicher Artikel
https://frontendian.co/cors
https://enable-cors.org/
Letzte Woche gab es schon einige Links zum Thema Authentifizierung und Web N. Hier nochmal eine sehr gute Erklärung und Einführung
https://auth0.com/blog/introduction-to-web-authentication/
VueJS spezifisch
Evan You hat ein paar medial Auftritte zum Thema;
http://www.fullstackradio.com/81 => Advanced Vue Component Design
https://www.youtube.com/watch?v=8oFexUl7_DE => Video Cast – What New in VueJS
VueJS Starter Boilerplate als Inspiration für das Aufsetzen und Starten von VueJS Apps
https://github.com/devCrossNet/vue-starter
So wie es aussieht bekommt VueJS bald ein “visuelles Klick” Tool für die Projektkonfiguration, Compilen usw. Sieht gar nicht mal so schlecht aus
https://medium.com/@brandonl.4231/getting-to-know-the-new-vue-cli-3-user-interface-a173b00128bd
Es ist möglich spezielle “Umgebungsvariablen” über die herkömmlichen Production und Development hinaus für den Buildprozess zu verwenden. Die Device Fragmentierung (Repeater, Router, MediaServer, NAS usw.) und eine Auslieferung der Weboberflächen könntne so für IoT Geräte angepasst werden. Erklärt ist das hier näher:
https://medium.com/@florenceokosun/understanding-environments-in-vuejs-74e94a139b8b
Welche Daten in einem globalen StateManagement gespeichert werden sollten und welche in der UI Komponente bleiben ist ein heiß diskutiertes Thema bei Programmieren. Am Ende des Artikels gibt es einen schönen Entscheidungsbaum zum Thema
https://markus.oberlehner.net/blog/should-i-store-this-data-in-vuex/
https://zendev.com/2018/05/21/vuex-perfect-interface-frontend-backend.html
Das Prinzip von Transparent Wrapper für native HTML Elemente ist einer der besten Prinzipien für UI Komponenten. Vor allem könnten wir so Atomare und Molekülartige UI Komponenten sehr gut umsetzen
https://zendev.com/2018/05/31/transparent-wrapper-components-in-vue.html
https://www.vuemastery.com/conferences/vueconf-2018/7-secret-patterns-vue-consultants-dont-want-you-to-know-chris-fritz => ab 12:45
https://slides.com/chrisvfritz/vueconf-workshop-2018-03#/28
Masked Input sind für vorformatierte Texteingaben, wie z.B. MAC Adressen, IP Adressen, Telefonnummer, sehr interessant. Anbei eine Umsetzung als Vue Komponente
https://niksmr.github.io/vue-masked-input/
https://github.com/niksmr/vue-masked-input
Im letzten Newsletter wurde “Provide/Inject” API schon erwähnt um UI Libraries modularer aufzubauen. Die API sollte sehr defensive eingesetzt werden. Hier nochmal ein Beispiel wie eine Parent Komponente ihre Funktionen für untergeordnete Komponenten zur Verfügung stellt. Am Ende mit guter Pro und Contra Vergleich
https://codepen.io/fimion/post/vuejs-dependency-injection-2-way-provide-inject-data-binding
Renderless Componente als Verhaltenswrapper für Kind Componenten am Beispiel eines simples Rich Text Editors für Textarea. Sehr ähnlich zum Decorator Pattern und Render Props
http://lorisleiva.com/renderless-editable-textarea/
https://medium.com/@dillonchanis/leveraging-render-props-in-vue-7eb9a19c262d
https://adamwathan.me/renderless-components-in-vuejs/
Sehr gute Erklärung wie die Render Funktion und die HTML Erzeugung mit den h-Funktionen unter der Haube in VueJS funktioniert
https://css-tricks.com/what-does-the-h-stand-for-in-vues-render-method/
https://github.com/hyperhype/hyperscript
Interessante Variante eine REST API mit ihren CRUD (Create, Read, Update und Delete) Operationen losgekoppelt vom User Interface umzusetzen. Siehe variable Endpoints und Definierung des Daten Models
https://markus.oberlehner.net/blog/building-renderless-components-to-handle-crud-operations-in-vue/
https://www.contentful.com/blog/2018/01/23/how-to-write-reusable-sane-api-based-components/ => VueJS ist am Ende des Artikels beschrieben
Beispiel Implementierung eines PopUp Managers (Modal Dialog Fenster) für Vue Single Page Apps und VueX State Management
https://markus.oberlehner.net/blog/building-a-modal-dialog-with-vue-and-vuex/
Mehrere VueJS App Instancen über einen Event Bus miteinander kommunizieren lassen. Eigentlich ein Dark Pattern, manchmal aber nicht vermeidbar
https://appdividend.com/2018/06/03/how-to-create-a-global-event-bus-with-vue-js/
Media Queries einfach in ein Style Tag in der Single File componente (SFC) seperat integrieren. Sieht auf dem allersten Blick gar nicht mal so schlecht aus für Responsive Componenten Verhalten
https://mobile.twitter.com/ktsn/status/1002474624859291648
https://github.com/ktsn/vue-media-loader
Exotisches
Teambuilding ist nicht immer Biertrinken und Grillen. Man kann fachliches auch mit Freizeitaktivitäten vermischen zum Teambuilding. Anbei ein paar Tips zum Team Retreat und Kickoffs außerhalb dem Firmengebäude
https://uxstudioteam.com/ux-blog/team-building-retreats/
Leadership und Charaktere ist immer wieder ein interessantes Thema. Anbei Ergebnisse einer Studie von der Harvard Business School
https://hbr.org/2017/04/if-humble-people-make-the-best-leaders-why-do-we-fall-for-charismatic-narcissists
Manche Unternehmen identifizieren sich unter anderem auch mit diesem Punkten des Leitwolfs für die Leader Rolle. Ich sehe das kritisch..
https://www.projektmagazin.de/meilenstein/projektmanagement-blog/jedes-agile-team-braucht-einen-lead-entwickler_1100300
Konferenzen zum Thema Leadership / Lead Developer
https://www.youtube.com/watch?v=iE27GQKB3p0&list=PLBzScQzZ83I8H8_0Qete6Bs5EcW3p0kZF
https://www.youtube.com/watch?v=4NKDoFo7Tmk&list=PLBzScQzZ83I81fnpqX2AkYD5c5cKgrqc2
Weiteres zur Teamorganisation im agilen und Produktionsrahmen
https://t3n.de/news/agiles-arbeiten-mythen-1080315/
https://t3n.de/news/scrum-devops-beides-1083660/
Kleine Zusammenfassung zu einem der bekanntesten Programmiertools für AudioVisuelle Programmierung
https://medium.com/processing-foundation/a-modern-prometheus-59aed94abe85
Mathematik von Animationen und anderen visuellen Programmiertechniken
https://winkervsbecks.github.io/mathematics-of-animation/#/
Kleiner Einblick in die “funktionale” Web App Entwicklung mit ELM
https://blog.bitsrc.io/getting-started-with-elm-language-for-web-apps-49418c6adc17
Ein guter Einblick wie ein Linux Betriebssystem für embedded Hardware (SoC) entstand
https://www.cnx-software.com/2018/05/08/armbian-history-info-and-progress-report/
