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

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/

Share Post :

More Posts

Leave a Reply

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