Hallo,
Die VueConf in Orleans ist vorbei und es gibt ein paar weitere Neuigkeiten. Schnappt die für euch ansprechenden Themen raus.
- Vue in der Version 2.6 wird wohl den Support von IE 10 und IE 11(!) einstellen. Die Version 2.5.x wird dann noch weiter gewartet.
- Zudem ist die neue Vue Cli 3.0 in Beta Version 6 einsehbar. Ein neues Pluginsystem soll die die Erstellung eigener Buildprozesse massiv vereinfachen und auch in der Community besser austauschbar. Zudem arbeiten die Entwickler an einen Build Report Dashboard für Vue…
- Für den Entwicklerworkflow wurde auch die Vue Dokumentation komplett überarbeitet und ein neues Cookbook mit Best Practices (z.B. Formularvalidierung, Arbeiten mit SVG usw.) veröffentlicht (https://vuejs.org/v2/cookbook/)
Allgemein
Schöne kurze Zusammenfassung: Design for Fingers, Touch, and People, Part 1
https://www.uxmatters.com/mt/archives/2017/03/design-for-fingers-touch-and-people-part-1.php
Modulares UI Design System und wie man dieses mit verschiedenen Styles anpassbar machen könnte: Creating Themeable Design Systems
http://bradfrost.com/blog/post/creating-themeable-design-systems/
https://speakerdeck.com/yeseniaperezcruz/building-flexible-design-systems
Neuer schneller DNS Server als Konkurrenz zu Googles 8.8.8.8 wurde von Cloudfare gelauncht. Angeblich schneller und Privacy by Default (über https und ohne IP Tracking) ausgestattet
https://blog.cloudflare.com/dns-resolver-1-1-1-1/
https://howdns.works/
HTML & CSS & SVG
Arbeiten mit Responsiv Bildern und Graphiken
https://beta.observablehq.com/@eeeps/w-descriptors-and-sizes-under-the-hood
Allgemeines zu SVG und plus Animation, hier ein paar gute Resourcen:
http://unicorn-ui.com/blog/svg-for-beginners.html | http://unicorn-ui.com/blog/intermediate-svg.html
http://tutorials.jenkov.com/svg/scripting.html | http://tutorials.jenkov.com/svg/svg-transformation.html
https://daverupert.com/2018/03/animated-svg-radial-progress-bars/
für komplexe UI Animation interessantes Tool für Web, Android und iOS von Airbnb: https://airbnb.design/lottie/
Schnittstelle zwischen CSS und JavaSCript sieht gut aus. Vielleicht kann man das mit einem eigenen UtilityCSS Modul schon heute umsetzen
https://developers.google.com/web/updates/2018/03/cssom
JavaScript spezifisch
Refactoring und der Umgang mit alten Code ist häufig in mittleren bis großen Projekten ein wichtiges Thema. Hier ein Vorschlag, wie man damit umgehen könnte
Approaches to Deprecating Code in JavaScript => https://css-tricks.com/approaches-to-deprecating-code-in-javascript/
Modulares JavaScript ist auch bei uns ein heißes Thema. Mit VueJS und dessen Modul ES6 Funktionalität, hier ein tieferer Einblick in JS Module
https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
Gute Auffrischung für Objektorientiertes Programmieren mit JavaScript (kein pure Klassenorientiertes) mit Referenzen zu ES6 “class” keyword
https://codeburst.io/object-oriented-programming-in-javascript-51b2bdfdfe9f
https://codeburst.io/pass-your-front-end-tech-interview-by-knowing-javascripts-prototype-chain-cd86bb1a880f
https://www.youtube.com/watch?v=_ApRMRGI-6g&feature=youtu.be ==> Object destructuing
Webperformance: Loading Third-Party (externes) JavaScript
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/
https://nicj.net/resourcetiming-visibility-third-party-scripts-ads-and-page-weight/
Ein paar Functional Programming Decorator Themen mit JavaScript
https://hackernoon.com/function-decorators-part-2-javascript-fadd24e57f83
JavaScript 2018 neue Features
https://slidr.io/mathiasbynens/what-s-new-in-es2018
https://blog.risingstack.com/history-of-node-js/
Theory und Defintionserklärung Konzepre Reactive Programmierung
https://github.com/kriskowal/gtor
http://www.discoversdk.com/blog/ecmascript-6-proxy ==> Proxies sind elementare Bauteile der VueJS Reactiviy
Workflow und Tooling
NPM Scripts sind großer Bestandteil der Webdev Werkzeugkette. Hier ein paar Kniffe für unseren Workflow mit NPM und Co
Helpers and tips for npm run scripts => http://michael-kuehnel.de/tooling/2018/03/22/helpers-and-tips-for-npm-run-scripts.html
Für alle Microsoft VSCode Nutzer unter uns, hier eine schöne Toolliste: Top JavaScript VSCode Extensions for Faster Development
https://codeburst.io/top-javascript-vscode-extensions-for-faster-development-c687c39596f5
CodeSandbox ist eine nettes Tutorial um Codebeispiele mit anderen zu Teilen. Nun kann man sogar gleichzeitig gemeinsam an einem Projekt arbeiten
https://hackernoon.com/introducing-codesandbox-live-real-time-code-collaboration-in-the-browser-6d508cfc70c9
Software Entwicklung / Engineering
6 gute Gründe für eine Komponenten orientierte Arbeitsweise für User Interfaces
https://www.tandemseven.com/technology/6-reasons-component-based-ui-development/
Ein paar klassische Tipps für ein gutes gemeinsames Programmierleben im Team oder für sich selbst. Auf jeden Fall ein paar brauchbare Verbesserungspunkte dabei
https://dev.to/praxentsoftware/10-ways-to-become-a-better-developer-40f
https://medium.com/@samerbuna/the-mistakes-i-made-as-a-beginner-programmer-ac8b3e54c312
Can You Avoid Functional Programming as a Policy? Functional Programming und Objektorientierung kann/darf Hand in Hand gehen…
https://www.quora.com/Why-is-functional-programming-seen-as-the-opposite-of-OOP-rather-than-an-addition-to-it/answer/Alan-Kay-11
https://medium.com/javascript-scene/can-you-avoid-functional-programming-as-a-policy-7bd0570bcfb2
Ein paar Tipps zum API Design und ein paar Einführungen in Postman als (Test(/Debugging)Werkzeug
https://blog.risingstack.com/10-best-practices-for-writing-node-js-rest-apis/
https://dzone.com/articles/getting-started-with-postman
https://www.youtube.com/watch?v=juldrxDrSH0&feature=youtu.be
https://dzone.com/articles/testing-apis-using-postman
Authentifizierung von OAuth und dessen API Design genauer erklärt
http://tutorials.jenkov.com/oauth2/index.html
VueJS
VueJs Cheat Sheet zum Ausdrucken…
https://www.vuemastery.com/pdf/Vue-Essentials-Cheat-Sheet.pdf
Kurze und schnelle Einführung in Vue
http://slides.com/cristijora/deck-1#/
Ein paar Featurevorstellung der neuen Vue Command Line Toolkette
https://vuejsdevelopers.com/2018/03/26/vue-cli-3/
https://www.telerik.com/blogs/4-awesome-things-you-can-do-with-the-vuejs-cli
VueJS eigenes UI Design System aufbauen, ein kleines HowTo speziell für Vue. Sehr gute Tipps für die Zusammenarbeit zwischen Developer und Designer für die Erstellung einer UI Library
https://viljamis.com/2018/vue-design-system/
https://vueds.com/
Inspiration zur Projektstruktur, Organisation und Workflows
https://medium.com/vue-mastery/10-reasons-to-use-nuxt-js-for-your-next-web-application-522397c9366b
VueJS an aktuellen kleinen Apps mit source code lernen, geht hier gut
https://auth0.com/blog/vuejs-kanban-board-the-development-process/
https://tutorialedge.net/projects/hacker-news-clone-vuejs/
Begeisterung über GraphQL und andere Querie/Anfragen orientierte API Designs gibt es immer wieder. Hier ein Beispiel für eine Querie Basiertes Frontend Toolset für REST Services
https://github.com/robsontenorio/vue-api-query/blob/master/README.md
Common mistakes to avoid while working with Vue.js
https://medium.freecodecamp.org/common-mistakes-to-avoid-while-working-with-vue-js-10e0b130925b
Externes CSS und VueJS kann Hin und Wieder ein wenig Schluckauf im Workflow verursachen. Hier einige Tipps: Integrating and Using CSS Frameworks with Vue.js
https://alligator.io/vuejs/css-frameworks-vuejs/
Fortgeschritten: Scoped/typed Slots und hoch anpassbare UI Komponenten als Renderless Komponenten. Erinnert mich ein wenig MVC zurück vom MVVM zu holen. Macht sicherlich in einigen Sonderfällen Sinn
https://adamwathan.me/renderless-components-in-vuejs/
Fortgeschritten: Eine umfangreiche Artikelserie über VueJS Version 2.5, welche dem Vue Source Code im Detail erklärt
https://medium.com/@oneminutejs/a-deep-dive-in-the-vue-js-source-code-fd9638c05c05
https://medium.com/@oneminutejs/a-deep-dive-in-the-vue-js-source-code-the-initmixin-function-part-1-dc951603a3c
resolveConstructorOptions und Constructor mit Vererbungs-Funktionalitäten
https://medium.com/@oneminutejs/a-deep-dive-in-the-vue-js-source-code-3-ba15d53d8e95
Merging Properties und dedupe function
https://medium.com/@oneminutejs/a-deep-dive-in-the-vue-js-source-code-4-cb7a04a0094c
Normalization und Validierung von Objekt/Übergabe Parameter zum Erzeugung von Komponenten
https://medium.com/@oneminutejs/the-entire-vue-js-source-code-line-by-line-6-d0c29f370edc
https://medium.com/@oneminutejs/the-entire-vue-js-source-code-line-by-line-7-80831e0973de
Cached Funktions
https://medium.com/@oneminutejs/the-entire-vue-js-source-code-line-by-line-8-fe8222eaf8b9
https://medium.com/@oneminutejs/the-entire-vue-js-source-code-line-by-line-9-7efda56c61c6
// Wieder Normalization von Objekt Parameter nach internen CamelCase Format
https://medium.com/@oneminutejs/the-entire-vue-js-source-code-line-by-line-10-8699054f59ca
Warn und loggin Functions
https://medium.com/@oneminutejs/the-entire-vue-js-source-code-line-by-line-11-the-warn-function-1b242c2ad3a
generateComponentTrace
https://medium.com/@oneminutejs/a-deep-dive-in-the-vue-js-source-code-12-the-generatecomponenttrace-function-8d4a20dadd5c
https://medium.com/@oneminutejs/a-deep-dive-in-the-vue-js-source-code-14-the-repeat-function-f1b7c9139bb5
das wars erstmal unter diesem Link erscheinen bestimmt immer wieder neue Artikel
https://medium.com/@oneminutejs
Lua
Umfangreiche Lua Library Auflistung… Hier kann man sich einen Eindruck des Lua Ecosystem verschaffen
https://github.com/uhub/awesome-lua
Exotisches
Eine Fritzbox Wlan JS API Beispiel mit Promises. Der Code ist schön selbsterklärend, ein wenig Inspiration für zwischendurch
https://github.com/dodekeract/fritz-box
