Hallo,
aufgrund von Krankheit ist mein letzter Newsletter ausgefallen. Es sind sicherlich für den einen oder anderen zu viele Links. Filtert für euch bitte die passenden Themen heraus. API Ansätzen, neue CSS Features, und Fortgeschrittenes zu VueJS gibt es zu lesen. Wieauchimmer, nächste Woche steht die große VueJS – Frontend Dev Konferenz in der USA an und aus diesem Grund gibt es vielleicht auch jetzt so viele interessante VueJS News. Wie auch z.B. Eine VueJS Konferenz in Berlin! https://www.eventbrite.co.uk/e/vuejs-roadtrip-berlin-tickets-43925232553
Allgemein
Zusammenspiel von Design und Technologie ist im Jahresreport von John Maeda immer sehr gut zusammengefasst: Design in Tech Report 2018
https://designintech.report/
https://designintech.report/wp-content/uploads/2018/03/designintechreport2018interactivev1.html#1 => Desktop Slideshow
Eine verschlüsselte Verbindung mit HTTPS ist auf embedded Endgeräten immer eine Herausforderung. Hier ist eine proprietäre Beispielimplementierung als Inspiration für IoT und Embedded Software Developer
https://realtimelogic.com/products/sharkssl/
https://realtimelogic.com/products/sharkssl/minnow-server/
Design & Technology und ein wenig Psychologie: Cognitive Biases You Need to Master to Design Better Websites
https://webdesign.tutsplus.com/articles/cognitive-biases-you-need-to-master-to-design-better-websites–cms-30742
Accessibility für Web Entwickler in der Schnellübersicht
https://www.invisionapp.com/blog/accessibility-for-developers/
HTML & CSS
Modulares CSS nach Seperation of Concerns entwickeln. Sprich die visuelle Auszeichnung von der Contentstruktur lösen ist allein aus Wartung und Verwantwortlichkeitsprinzip anzustreben. Ein interessanter CSS Coding Styleguide Ansatz, der auch für VueJS UI Komponenten interessant sein könnte
CSS Utility Classes and “Separation of Concerns”
https://adamwathan.me/css-utility-classes-and-separation-of-concerns/
Bisher musste man immer wieder Farb- oder Pixelwerte kopieren im CSS kopieren. Dank SASS, LESS usw. wurde das Problem gelöst. Mit dem neuen CSS 3 Standard werden Variablen eingeführt, die auch zu Laufzeit geändert werden können. Viele Möglichkeiten für responsive Design und State Verwaltung werden so ermöglicht. Hier ein guter “interaktiver Einblick”
https://scrimba.com/g/gcssvariables
https://www.sitepoint.com/practical-guide-css-variables-custom-properties/
https://una.im/local-css-vars/
JavaScript spezifisch
Die Entwicklung des JavaScript Ökosystem zusammengefasst
https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
Gute Zusammenfassung zu den Basiskonzepten der Objektorientierten Programmierung mit JavaScript (ES 5) => The Four Layers of JavaScript OOP”
https://speakerdeck.com/rauschma/the-four-layers-of-javascript-oop
Konzepte der Funktionalen Programmierung in die JavaScript Welt übersetzt und erklärt
http://reactive.how/
Coding Conventions und Style Guides neue Tools kurz vorgestellt
https://www.remotesynthesis.com/blog/prettier-eslint
Workflow und Tooling
Webpack und andere Generierungs/Build/Taskrunners Tools arbeiten häufig mit Umgebungsvariablen. Hier ein paar Tipps für die JavaScript Entwicklung auf lokalen Dev Servern und Microsoft VS Code
https://medium.freecodecamp.org/heres-how-you-can-actually-use-node-environment-variables-8fdf98f53a0a
Software Entwicklung / Engineering
Das “Repository Pattern” wird von häufig in Android App Umgebungen für deren API Kommunikation eingesetzt um z.B. auch Daten zwischenspeichern, cachen usw. Sicherlich für den ein oder anderen Anwendungsfall auch ein interessantes Thema um die App und State Daten gut verwalten zu können. API Schnittstellen Funktionen für die Zukunft:
https://emacsway.github.io/en/javascript-and-repository-pattern/
http://jarrettmeyer.com/2016/02/25/down-with-the-bloody-repository
http://reallyshouldblogthis.blogspot.de/2016/02/writing-pure-javascript-repository.html
VueJS
Eine gute Zusammenfassung “How to Plan a VueJS Project” wurde nun veröffentlicht. Zudem gibt es ein erster Boilerplate (Starterbeispiel) von komplexen VueJS Projekten auf Github mit Erklärung zu sehen. Sicherlich hilfreich für für den Start mit Vue
https://www.telerik.com/campaigns/kendo-ui/wp-planning-vue-app
https://github.com/chrisvfritz/vue-enterprise-boilerplate
https://dzone.com/articles/how-to-not-screw-up-ux-in-a-single-page-applicatio
Workflow Tipps für VueJS und Visual Studio Code
https://itnext.io/getting-started-vue-js-and-visual-studio-code-6990f92e918a
https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-extensionpack => Alle VueJS relevanten Plugins in einem Paket für Visual Studio Code
Workflow Tipps für die Vue Kommandozeile
https://www.telerik.com/blogs/4-awesome-things-you-can-do-with-the-vuejs-cli
Webpack 4 und VueJS 2.5.14 sind noch nicht richtig warm. Hier ein paar Konfigurationstipps für das bessere Verständnis mit Webpack. Vielleicht was für unsere Webpack Konfiguration dabei?!
https://medium.com/@nupoor_neha/starting-with-webpack-4-and-vuejs-a-quick-start-tutorial-4a244410d55e
https://appdividend.com/2018/03/12/how-to-setup-vue-js-with-webpack-4-example/ –> ein wenig ausführlicher:
https://itnext.io/vuejs-and-webpack-4-from-scratch-part-1-94c9c28a534a
https://itnext.io/vue-js-and-webpack-4-from-scratch-part-2-5038cc9deffb
Christi Cora hat ein schönes Codebeispiel entworfen, wie man States innerhalb einer Komponente per Vue Mixins und Vue Komponenten API elegant verwalten kann. Erinnert mich stark an das Strategy und State Design Pattern. Auf jeden Fall ein interessanter Ansatz um Komponenten allgemeine States bzw. Verhaltensmuster zuzuordnen. Siehe auch Diskussion über den Vuex Store und dessen Abhängikeiten mit wiederverwendenten UI Komponenten. Vielleicht kann dieser Ansatz die UI Komponenten ein wenig entschlacken.
https://twitter.com/jora_cristi/status/973517786256498689
https://codesandbox.io/s/nko3w1n8v4
https://www.philipphauer.de/study/se/design-pattern/strategy.php
https://www.philipphauer.de/study/se/design-pattern/state.php#vergleich_state_strategy
Ein schönes Drag-n-Drop Beispiel mit VueJS und wie es am Ende auch per Test-driven Development automatisiert getestet werden kann (Hier mit JEST umgesetzt)
https://itnext.io/making-and-publishing-a-v-drag-directive-to-npm-6d20a80dedba
Vuesax ist eine relativ einfach gehaltene UI Kompnenten Library, an der wir uns paar Inspirationen für unseren Komponenten UI abschauen können
https://vuejsfeed.com/blog/vuesax-a-new-components-library-for-vue-js
Die VueJS Template Deklaration kommt in komplexeren Fällen an seine Grenzen. Eine eigene Render Funktion schreiben ist ein wenig too much… JSX kann dort ein guter Mittelweg sein. Das Funktioniert auch mit Vue und ist hier genauer erklärt.
https://scotch.io/tutorials/using-jsx-with-vue-and-why-you-should-care
Ein Must-watch Vortrag von Chris Fritz, einer der Core Dokumentationschreiber der VueJS Community, stellt ein paar “hidden/geheime” Kniffe mit VueJS vor. Auf jeden Fall ein paar Tipps dabei um Datenkommunikation und UI Komponenten noch schlanker zu bekommen.
7 Secret Patterns Vue Consultants Don’t Want You to Know – Chris Fritz -> https://github.com/chrisvfritz/7-secret-patterns/blob/master/slides-export.pdf
https://www.youtube.com/watch?v=7lpemgMhi0k
Fachvortrag zu Datenkommunikation zwischen VueJS und der Serveranwendung. Im Rahmen unserer API Konzeptphase sicherlich ein passender interessanter Vortrag, auch wie die Tonqualität ein wenig nerven kann.
Vue.js // Berlin: Meetup 13.03.2018 – Yaw Boakye – Loading data into a Single Page Application
https://www.youtube.com/watch?v=2uEO1bIk734
Lua
Es gibt neue Lua Vorträge auf dem Lua Workshop Channel, wie z.B. Lua HTTP und Lua Typed usw.
https://www.youtube.com/channel/UCdZ8HO_8ybmeQu6K1kRL0_A
Exotisches:
„Mesh is in the air!“: Freifunk lädt zu Mai-Veranstaltung nach Berlin… Zum Wifi Mesh Battle Festival
https://netzpolitik.org/2018/mesh-is-in-the-air-freifunk-laedt-zu-mai-veranstaltung-nach-berlin/
https://www.wireless-meshup.org/doku.php/start
