Hallo,
wieder im gewohnten zwei Wochen Rhythmus die aktuellen News rund ums Web und UI Entwicklung. Diesmal ist es recht ausgewogen von allgemeinen Themen rund um UI Komponenten zu HTML/CSS Rendering, Web Security, JavaScript Features Architekturthemen bis zu einigen gut erklärten VueJS Features. Bei unseren ausgewählten Framework VueJS gibts auch wieder neue Talks. The State of Vue ist dort ein guter Einstieg: https://www.vuemastery.com/conferences/vueconf-2018/opening-keynote-evan-you
Wie immer pickt euch das Passende raus!
Allgemein
Gute allgemeine Übersicht über das heutige Aufgaben- und Wissensgebiet eines Frontend Entwicklers
https://medium.com/tech-tajawal/modern-frontend-developer-in-2018-4c2072fa2b9c
https://legacy.gitbook.com/book/frontendmasters/front-end-developer-handbook-2018/details
https://github.com/kamranahmedse/developer-roadmap
UI Pattern Libraries und dessen methodischen Vorgehen
https://medium.com/@whatjackhasmade/pattern-libraries-abcc45c6144c
Komponententwicklung und deren Orchestrierung, Design und Architektur usw.
https://www.learnstorybook.com/ => Komponenten Entwicklung Guide
https://blog.angular.io/top-3-things-charter-learned-about-reusable-designs-and-components-dd367de32122
https://blog.figma.com/component-architecture-in-figma-f16ae9cc4481 => Planung, Anforderung und Prototyping Tool mit Figma
https://medium.com/eightshapes-llc/documenting-components-9fe59b80c015
https://medium.com/eightshapes-llc/component-examples-9c4b3bb3b308
Jeremy Keith lohnt sich immer: Resilience: Building a Robust Web That Lasts by Jeremy Keith
https://aneventapart.com/news/post/resilience-building-a-robust-web-that-lasts-jeremy-keith-an-event-apart
Ein paar Methodiken um UI Navigation zu verbessern: Card Sorting
https://www.nngroup.com/articles/card-sorting-definition/
Probleme mit offenen Wlan…
https://media.ccc.de/v/SFFFAQ
HTML & CSS & SVG
Gute Erklärung wie CSS geladen wird, wie es mit dem HTML DOM verbunden wird um dann schlussendlich langsam Stück für Stück gerendert wird. Gute Anhaltspunkt warum wir auch eine modulare CSS Architektur nach ITCSS Prinzip anstreben sollten 😉
https://blog.logrocket.com/how-css-works-parsing-painting-css-in-the-critical-rendering-path-b3ee290762d3
https://philipwalton.com/articles/why-web-developers-need-to-care-about-interactivity/
Responsive Bilder und deren Best Practives (mit Media Queries usw.)
https://beta.observablehq.com/@eeeps/w-descriptors-and-sizes-under-the-hood
https://jakearchibald.com/2015/anatomy-of-responsive-images/#varying-size-and-density
Animation und SVG Paths
https://scotch.io/tutorials/animating-elements-along-svg-paths-introducing-pathslider
Firefox hat ein neues Tool für das bessere Debuggen von Barrierefreiheit auf Websiten veröffentlicht
https://www.marcozehe.de/2018/04/11/introducing-the-accessibility-inspector-in-the-firefox-developer-tools/
https://open-indy.github.io/Koa11y/ => ist übrigens auch sehr praktisch
Fließender Übergang zwischen HTML und JavaScript ist der Virtual DOM Renderer. Hier im Detail nochmal ganz gut erklärt
https://speakerdeck.com/stefanjudis/what-the-v-dot-dot-dot-dom
https://medium.com/@koheimikami/understanding-rendering-process-with-virtual-dom-in-vue-js-a6e602811782 => direkt mit der VueJS Render Pipeline
JavaScript spezifisch
VueJS setzt voll auf die Features von Proxies in den neuen Versionen. Daher ist es immer gut zu verstehen, wie deren Reaktivität unter der Haube genauer funktioniert
https://www.sitepoint.com/es6-proxies/
https://codeburst.io/understanding-javascript-proxies-by-examining-on-change-library-f252eddf76c2
ES6 und moderne JavaScript Frameworks, wie VueJS usw. setzen vermehrt auf Promises um der Callback Hell aus dem Weg zu gehen. Jedoch gibt es auch bei Promises mit JavaScript so einige Hürden
https://developers.google.com/web/fundamentals/primers/promises
https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html
https://davidwalsh.name/dark-side-promises
Generator Funktionen sind ein relativ neues abstraktes Konzept in der JavaScript Welt. Jedoch unabdingbar wenn man mit den neuen Promises, Await, Async und for .. of Schleife arbeiten will
https://www.sitepoint.com/ecmascript-2015-generators-and-iterators/
Axios und Jest wird von der VueJS Community sehr empfohlen. Daher guter Artikel um sich die testgetriebene Entwicklung mal anzuschauen. Hier eine Übersicht
https://www.leighhalliday.com/mocking-axios-in-jest-testing-async-functions
https://blog.kentcdodds.com/but-really-what-is-a-javascript-mock-10d060966f7d
Übersicht neue JavaScript Features
https://www.telerik.com/blogs/ecmascript-goodies-check-out-the-es2017-major-features
https://www.telerik.com/blogs/ecmascript-goodies-ii-check-out-the-es2017-minor-features
Web Security
Links setzen ist schnell gemacht allerdings gibt es einiges zu beachten bei target=_blank Anweisungen
https://www.jitbit.com/alexblog/256-targetblank—the-most-underestimated-vulnerability-ever/
https://blog.dareboost.com/en/2017/03/target-blank-links-rel-noopener-performance-security/
Laden von externen Source über Content Delivery Network (CDN) wird relativ häufig eingesetzt. Einige Sourcen können auch aus dem Internet nachgeladen werden und in den RAM von IoT (zwischen) gespeichert werden. Allerdings sollte man hier wie immer sehr vorsichtig sein. Auch bei CSS, Bilder usw. Schöne Zusammenfassung hier
https://jakearchibald.com/2018/third-party-css-is-not-safe/
https://css-tricks.com/potential-dangers-of-third-party-javascript/
Writing Secure JavaScript… Vortrag ist eine schöne Zusammenfassung
https://www.youtube.com/watch?v=Xy1K8ODZC8w&feature=youtu.be
Workflow und Tooling
Webpack und Image Optimierung automatisiert
https://iamakulov.com/notes/optimize-images-webpack/
Kleiner Tipp zum besseren Git commit message schreiben
https://chris.beams.io/posts/git-commit/
Interessanter Tooling Ansatz zum Verwalten von UI Komponenten in Teams und Projekten
https://bitsrc.io/
Figma Platform Toolkit für UI Engineering, Prototyping und DEsign. Gut für den Workflow zwischen UID und uns Entwicklern
https://blog.figma.com/introducing-figmas-platform-ee681bf861e7
Das neue Veröffentliche VuePress ermöglicht schnell Dokumentation mit und über VueJS Komponenten zu entwicklen. Aber auch so lassen sich schnell mit Hilfe von Markup Files Dokumentationen schreiben
https://scotch.io/tutorials/zero-to-deploy-build-a-documentation-system-with-vue-and-vuepress
Software Entwicklung / Engineering
Design Patterns sind ursprüngliche Musterlösung für immer wiederkehrende Programmierherausforderungen. Diese Architekturmuster sind in der Objektorientierung sehr stark angewandt worden. Für JavaScript haben diese auch für unsere immer großere werdene Single Page App ein hohe Relevanz. Daher schöne Zusammenfassung der Grundprinzipien
https://www.toptal.com/javascript/comprehensive-guide-javascript-design-patterns
https://addyosmani.com/resources/essentialjsdesignpatterns/book/
Technical Debt in den Umsetzungentscheidung. Gute Nebeninfo ob wir den VueJS App Ansatz über alles, oder den mittleren Weg (Pages) oder den kleinen UI Component Weg gehen
https://martinfowler.com/bliki/TechnicalDebtQuadrant.html
API Dokumentation und wie die Anforderungen methodisch definiert werden könne am Beispiel der DNSimple Web API
https://blog.dnsimple.com/2018/04/openapi-in-depth/
Ein Pro für GraphQl anstatt der herkömlichen diversen API Programmierung für Frontends (vor allem wegen unterschiedlicher Mobile und Web API, siehe unsere Abteilung vs Anroid, iOS usw.)
https://medium.com/homeaway-tech-blog/simplifying-the-ui-data-interaction-model-307f9b63d6f7
VueJS
Reactivität (Data Binding) ist ein schönes Features. Auch das two-way Databinding… Jedoch manchmal auch ein wenig Magic. Hier wird das verantwortliche “v-model” genauer erklärt
https://twitter.com/adamwathan/status/984125876689227776
https://www.youtube.com/watch?v=02po4VjqGbk => 5min Video Erklärung
V-Model Code Generierung am Beispiel
https://vuejs-tips.github.io/compiler/#PGRpdj4KCTxpbnB1dCB0eXBlPSJ0ZXh0IiB2LW1vZGVsPSJteVRleHQiLz4KICA8aW5wdXQgdHlwZT0idGV4dCIgOnZhbHVlPSJteVRleHQiIEBpbnB1dD0ibXlUZXh0ID0gJGV2ZW50LnRhcmdldC52YWx1ZSIvPgo8L2Rpdj4=
https://jsfiddle.net/89burhkm/2/ =>> Anwendungsbeispiel
Reaktivität von Funktionen innerhalb von VueJs erklärt. Wann welche Funktion Schnittstelle verwendet werden sollte:
https://css-tricks.com/methods-computed-and-watchers-in-vue-js/
Listenverarbeitung und ListenRendering unter anderem auch mit “v-for” genauer erklärt
https://css-tricks.com/list-rendering-and-vues-v-for-directive/
https://alligator.io/vuejs/vue-virtual-scroller/ => große Listen und performates Scrolling
Ein paar praktische Tipps im Umgang mir Form-Input Elemente und VueJS. Von Label und Error Platzierung zu anderen Anforderungen
https://medium.com/vuetify/rebuilding-input-controls-part-1-102005207b07
https://medium.com/@logaretm/authoring-validatable-custom-vue-input-components-1583fcc68314
Ein schöne Anleitung für eine Tree Componente (vielleicht verwendbar in Datei Browsern) und auch gute Orientierung wie Anforderungen für Komponenten definieren und strukturieren könnte
https://medium.com/vuetify/building-a-treeview-component-part-i-93d19733682f
Best Practice und wrappen von asynchron geladenen Komponenten
https://alligator.io/vuejs/vue-async-components-load-error/
Schönes Live Coding Beispiel um eine Drag n Drop Sortierbare KomponenteListe zu entwerfen
https://www.youtube.com/watch?v=jR3R_m5FPRc
Best Practice für die VueJS App Entwicklung: Vor allem wie welche Methodiken für Komnponenten, für VueX Store, Router usw.
https://slides.com/chrisvfritz/vueconf-workshop-2018-03#/
Drag and Drop GUI Builder mit VueJS… wäre schön in Zukunft so schnell “Low Code” Prototypen mit VueJs zusammen bauen zu können. Gute Anregung
https://vuejsfeed.com/blog/vuegg-gui-generator-powered-by-vue-js
https://vuegg.now.sh/
Eleganter API zum Kommunizieren mit dem Backend (auf Basis von async, await und Promises)… interessanter Ansatz als Inspiration für einen Request Handler
https://github.com/robsontenorio/vue-api-query/blob/master/README.md
Immer wieder sehr gute Tutorials zu VueJS verfügbar
https://vueschool.io/articles/category/tutorials/
Neue VueJS Talks
https://www.vuemastery.com/conferences/vueconf-2018/testing-vue-apps-edd-yerburgh/
Lua
Leider diesmal nix. Wenn ihr etwas habt nur her damit
Events
Übersicht der OpenSource (OpenWRT) Routerkonferenz mit Entwicklung von UIs für Netzwerkgeräte, IoT Gateways usw.
http://openwrtsummit.org/
JavaScript Conf EU in Berlin im Juni
https://2018.jsconf.eu/
https://ti.to/jsconfeu/jsconf-eu-2018/
Exotisches
Turriz Router kommt voraussichtlich nun in einer modularen Form wieder. Sehr interessantes Konzept eines Routers
https://www.indiegogo.com/projects/turris-mox-modular-open-source-router-security-computers#/
Pirate Box und Library Box sind interessante Wifi (Access Point) Projekte zum FileSharing und Messaging in privaten Netzwerken
https://piratebox.cc/
http://librarybox.us/
GoAtenna Device um ein Offgrid Mesh Netzwerk zwischen Freunden beim Wandern (Reichweite bis zu 2km) oder wo auch immer aufzuziehn…
https://morethanjustsurviving.com/gotenna-mesh-off-grid-communication-device-review/
Das neue Online Magazine rund um Mesh Netzwerke und andere Dezentrale Netzwerke
https://www.inthemesh.com/
Tinker Around mit WebAssembly Rust und C Code im Browser
https://hacks.mozilla.org/2018/04/sneak-peek-at-webassembly-studio/
https://webassembly.studio/
