Hallo Web und Tüftel Community,
Mit ein wenig Verzögerung ist die Leseliste für die letzten 3 Wochen fertig gestellt. Mein neuer Job spannt mich doch ein wenig mehr ein als gedacht, dann gepaart mit Privatleben und interessante Tech Events (Indie Web Camp in Berlin) sollte ich vielleicht lieber auf einen monatlichen Rhythmus wechseln. Mal schauen… Auf jeden Fall gibt es diesmal einige interessante Links zum Open Source Mindset aus einer wirtschaftlichen Perspektive, State Management innerhalb von UI Komponenten in VueJS, und zum Schluss eine umfangreiche Linkliste zum Netzwerktechnologie Einstieg.
Viel Spaß beim Lesen!
Allgemein
Jenseits der Diskussion über Ethisches Design finde ich diese Idee eines Evaluierungssystems nach Calm Design eine gute Orientierung für uns UX und Service Designer
https://medium.com/@caseorganic/is-your-product-designed-to-be-calm-cdde5039cca5
https://www.youtube.com/watch?v=hhliVWI4mCY
Die EU und deutsche Datenschutzverordnung ist ein heiß diskutiertes Thema ähnlich dem Cookie Banner. Sebastian Greger schlägt einen auf Transparenz ausgelegten Privacy by Design Ansatz vor. Ich finde seine Argumentationen sehr interessant und es fühlt sich für mich auch sehr schlüssig an. Ich glaube hier entwickelt sich in Zukunft ein Win-Win Situation für User und auch Websiten Betreiber.
https://sebastiangreger.net/2018/08/user-centred-transparency-design-the-layered-approach/
https://sebastiangreger.net/2018/11/user-centred-transparency-design-content-design-for-privacy/
Sehr guter Artikel über MicroInteractions für System und andere User Feedbacks
https://www.nngroup.com/articles/microinteractions/
Eine schöne Sammlung von Grundlagen zur Web Performance
https://3perf.com/talks/web-perf-101/
https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9
So sehr ich die Zusammenarbeit und Ergebnisse aus der Open-Source Community schätze, um so häufiger lese ich das dieses Prinzip mit einem nachhaltigen Wirtschaften schwer zu vereinbaren scheint. Ein paar Artikel über Open Source Initiativen und die Business Challenges und wie diese gelöst werden können
https://opensource.com/article/18/9/awesome-economics-open-source
https://www.techrepublic.com/article/how-to-make-open-source-work-for-your-company/
https://hackernoon.com/why-funding-open-source-is-hard-652b7055569d
https://github.com/nayafia/lemonade-stand
https://itsfoss.com/open-source-funding-platforms/
https://opensource.guide/getting-paid/
https://nadiaeghbal.com/foundations
https://medium.com/open-collective/sustainoss-the-report-881e4b12d180
https://techcrunch.com/2014/02/13/please-dont-tell-me-you-want-to-be-the-next-red-hat/
https://hbswk.hbs.edu/item/the-hidden-benefit-of-giving-back-to-open-source-software
https://medium.com/@nayafia/how-i-stumbled-upon-the-internet-s-biggest-blind-spot-b9aa23618c58
https://hueniverse.com/giving-thanks-on-making-my-open-source-work-sustainable-aa4fa48ae4d2
https://medium.com/open-collective/funding-open-source-how-webpack-reached-400k-year-dfb6d8384e19
HTML & CSS & SVG
Lesen tue ich viel im Web und um so wichtiger ist eine gute Typographie im Web… dummerweise bin ich an dieser Stelle schwach aufgestellt. Ein paar gute Hilfen für mich und sicherlich auch den ein oder anderen Web Designer
https://webdesign.tutsplus.com/articles/designing-accessible-content-typography-font-styling-and-structure–cms-31934
https://www.zeichenschatz.net/typografie/implementing-a-variable-font-with-fallback-web-fonts.html
Ein schönes Praxisbeispiel zu responsiven Verhalten von CSS Subgrids
https://robots.thoughtbot.com/concise-media-queries-with-css-grid
Eine Schnellübersicht zur Barrierefreiheit im Web
https://moritzgiessmann.de/accessibility-cheatsheet/
https://dev.to/maxwell_dev/the-web-accessibility-introduction-i-wish-i-had-4ope
https://www.upandup.agency/accessibility/web-accessibility-intro
https://webdesign.tutsplus.com/series/web-accessibility-the-complete-learning-guide–cms-1301
https://www.w3.org/WAI/business-case/
Mit CSS lassen sich sogar einige Grundformen relativ gut zeichnen
https://css-tricks.com/the-shapes-of-css/
https://css-tricks.com/drawing-images-with-css-gradients/
https://codepen.io/yuanchuan/full/vVRKRQ/
https://shapy.app/ Editor /Generator Tool
JavaScript spezifisch
Ein paar schöne API Tipps im Umgang mit Barrierefreiheit und JavaScript
https://benrobertson.io/accessibility/javascript-accessibility
https://medium.com/@matuzo/writing-javascript-with-accessibility-in-mind-a1f6a5f467b9
Fun mit dem Canvas sagt eigentlich alles aus. Ein gutes Starter Tutorial
https://flaviocopes.com/canvas/
Picture-in-Picture ist ein interessantes Chrome Browser Feature für videolastige Websiten
https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
Das Rechnen mit Geldeinheiten hört sich mit JavaScript erstmal trivial an. Denkt man dann aber über BigInt Werte, Floating Point Abweichungen, von ungewöhnlichen Verhalten beim Parsing und TypeCasting numerischer Werte will ich erst gar nicht reden. Anbei eine guter Artikel, wie man Berechnungen mit Geldeinheiten in JavaScript in den Griff bekommt
https://frontstuff.io/how-to-handle-monetary-values-in-javascript
Sehr interessanter Hintergrundbericht welche Idee hinter der Objektorientierung in JavaScript stand. Das Messaging und Encapsulation Prinzip spielen dabei eine wichtige Rolle
https://medium.com/javascript-scene/the-forgotten-history-of-oop-88d71b9b2d9f
Universal, Isomorphic, Server-Side und Client Side Rendering sind einige Darstellungskonzepte von und für Web Frameworks. In Zukunft werden wohl die erzeugten Endergebnisse der Web Frameworks immer schwerer zu unterscheiden sein, da vieles compiliert werden wird.
https://medium.com/samsung-internet-dev/disappearing-frameworks-ed921f411c38
https://www.youtube.com/watch?v=qqt6YxAZoOc
Praktisches async/await und Promises Cheatsheet für den Programmier Alltag
https://github.com/frontarm/async-javascript-cheatsheet
Schöner und tiefer Einblick in die neuen JavaScript API mit Symbols, Async/Await und Generator Functions
https://medium.freecodecamp.org/some-of-javascripts-most-useful-features-can-be-tricky-let-me-explain-them-4003d7bbed32
Software Technik und Architektur
API Design mit GraphQL ist diesem freien Buch von Robin Wieruch schön erklärt
https://www.robinwieruch.de/the-road-to-graphql-book/
Der Einsatz eines API Gateway mag auf dem ersten Blick umständlich aussehen, ist jedoch aus den Gesichtspunkten einer immer schneller veränderten Anforderungslandschaft ein gutes Architekturwerkzeug (Stichwort: Evolutionary Architecture).
https://docs.microsoft.com/en-us/dotnet/standard/microservices-architecture/architect-microservice-container-applications/direct-client-to-microservice-communication-versus-the-api-gateway-pattern
https://www.nginx.com/learn/api-gateway/
https://www.thoughtworks.com/radar/platforms/overambitious-api-gateways
https://tech.iheart.com/building-a-microservice-api-gateway-for-iheartradios-radio-station-network-with-graphql-5f9ddb37a314
https://medium.com/postman-engineering/tuck-in-your-apis-safe-and-sound-with-these-guiding-principles-for-api-security-cd69f71c291e
https://blog.risingstack.com/designing-microservices-architecture-for-failure/
Ein schöner Einblick wie Medium die Microservice Architektur lebt und versteht
https://medium.engineering/microservice-architecture-at-medium-9c33805eb74f
https://opensource.com/article/18/11/revisiting-unix-philosophy-2018
Bei der richtigen Qualität von Testdriven Development und den Umgang mit Mocks, Stubs und Snapshots scheiden sich die Entwickler Geister. Anbei zwei interessante Artikel zum Thema. Den Tipp einfache Tests zum Warm-werden und als Start in den Coding Alltag zu nehmen, finde ich ziemlich cool
https://medium.freecodecamp.org/how-writing-tests-can-make-you-a-faster-and-more-productive-developer-f3ad978e3872
https://medium.freecodecamp.org/simply-javascript-a-straightforward-intro-to-mocking-stubbing-and-interfaces-14e67ed6641a
https://testingjavascript.com/
Seit ich vom IoT Bereich wieder verstärkt auf die klassische Web Plattform gewechselt habe, muss ich mich mit den neuen Ecosystem der Virtualisierung vertraut machen. Diese Quellen sollen mir helfen den Einstieg in Kubernetes und Docker besser zu verstehen
https://medium.freecodecamp.org/learn-kubernetes-in-under-3-hours-a-detailed-guide-to-orchestrating-containers-114ff420e882
https://training.play-with-kubernetes.com/kubernetes-workshop
https://www.weave.works/technologies/the-journey-to-kubernetes/
https://www.nginx.com/resources/library/container-networking-docker-kubernetes/
Codeverwaltung sollte eigentlich mit Versionsmanagement und Paketmanager einfacher geworden sein. Leider kann die Arbeit an mehreren Projekt gleichzeitig zur Problemen führen. Vor allem wenn diese auch noch voneinander abhängig sind. Anbei ein schöner Leitfaden wie man eine passende Code Repository Strategie findet
https://blog.socialcops.com/technology/engineering/code-repositories-multi-mono-repo/
Workflow und Tools
Jeder benutzt Git und manchmal treibt es einen zum Wahnsinn. Hier ein paar gute Git Tipps und Themen zum Abreagieren
http://ohshitgit.com/
https://blog.risingstack.com/git-catastrophes-and-tips-to-avoid-them/
https://adityasridhar.com/posts/how-you-can-go-wrong-with-git
http://www.discoversdk.com/blog/undo-locally-in-git
http://www.discoversdk.com/blog/git-how-to-undo-after-a-push
https://medium.freecodecamp.org/an-introduction-to-git-merge-and-rebase-what-they-are-and-how-to-use-them-131b863785f
Github Actions ist ein neues Entwickler Automatisierungstool von Github. Ich selbst hab noch nicht ganz meinen Anwendungsfall gefunden, aber vielleicht macht es irgendwann klick.
https://scotch.io/bar-talk/introducing-github-actions
https://css-tricks.com/introducing-github-actions/
https://thenewstack.io/github-actions-creates-a-buzz-for-automated-dev-workflows/
Einige Tools (EsLint, Prettier, Husky usw.) für den Code Editor und für eine besser Coding Styleguide Experience
https://medium.freecodecamp.org/these-tools-will-help-you-write-clean-code-da4b5401f68e
Umgebungsvariablen (Environmental variables) scheint momentan der beste Weg zu sein um Einstellungen an ein System weiter zu erreichen. Das gilt auch für Passwörter und andere Secret Keys. Anbei ein paar Hilfestellung zu diesem App Konfigurationsansatz
https://medium.com/the-node-js-collection/making-your-node-js-work-everywhere-with-environment-variables-2da8cdf6e786
https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv
https://www.npmjs.com/package/node-env-run
Im Indie Web Movement hat sich das Sprichwort “If it’s not curlable, it’s not on the web“. Dieser kleine Hands-On Guide zu dem HTTP Tool curl gibt einen guten Einstieg
http://www.dataden.tech/programming/how-start-using-curl/
Web Security
Ein guter neuer Sicherheitshinweis für den Umgang mit OAuth2
https://medium.com/@torsten_lodderstedt/why-you-should-stop-using-the-oauth-implicit-grant-2436ced1c926
Ein paar Infos zum Umgang mit Hash Functions und API Keys
https://medium.freecodecamp.org/best-practices-for-building-api-keys-97c26eabfea9
https://zapier.com/engineering/apikey-oauth-jwt/
https://flaviocopes.com/google-api-authentication/ –> Googles Key Management
https://honest.engineering/posts/hash-functions-survival-guide
VueJS spezifisch
Eine sehr gute umfangreiche Sammlung von den etwas anderen komplizierten Hürden des VueJS Developers
https://medium.com/@Roli_Dori/master-vue-js-by-mastering-common-problems-e2f1c2acd1e7
https://medium.com/@matuspeciar/vue-gotchas-29abd5541f49
https://github.com/learn-vuejs/vue-patterns
https://blog.webf.zone/vue-js-considerations-and-tricks-fa7e0e4bb7bb
Storybook ist nun in Version 4 verfügbar und setzt sich wohl bei den Componenten Explorer durch. Für VueJS gibt es immer besser Toolings und schöne Einstiegsartikel zu Storybook mit VueJS
https://auth0.com/blog/using-storybook-with-vuejs/
https://www.learnstorybook.com/vue/en/get-started
https://medium.com/storybookjs/storybook-4-0-is-here-10b9857fc7de
Sehr schönes Beispiel wie die Atomic Design Prinzipien im VueJS Ecosystem angewandt werden können. Ich bin aktuell überzeugt davon, dass dieser Ansatz sehr gut ist um die eigenen UI ELemente zu strukturieren und technisch eine solide Architektur aufbauen zu können.
https://dev.to/miladalizadeh/vue-cli-30-plugin-for-creating-apps-using-atomic-design–storybook-42dk
https://github.com/milad-alizadeh/vue-cli-plugin-atomic-design
Wichitge konzeptionelle Hintergrundinfos zu Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
http://v3.danielmall.com/articles/content-display-patterns/
https://2018.ar.al/notes/the-documents-to-applications-continuum/
Mixins ist zum Teil ein sehr negativ bewertetes Thema im Web App Architekturkontext. Dennoch mit Vorsicht angewandt lassen sich einige Codebausteine weiterhin gut wieder verwenden
https://css-tricks.com/using-mixins-vue-js/
https://blog.logrocket.com/mixins-and-custom-functions-to-enhance-your-vue-applications-693caa7ae76a
https://scotch.io/tutorials/extending-vue-components-with-mixins
https://github.com/paulpflug/vue-mixins
https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html
http://raganwald.com/2016/07/16/why-are-mixins-considered-harmful.html
https://itnext.io/how-not-to-vue-18f16fe620b5
Properties und Datenmodelle an die Kindelemente über tiefere verschachtelte bzw. “n-level nested” Komponentenstrukturen weitergeben, kann über die empfohlenen Parent/Child API über Properties schnell an die Grenzen des pragmatischen Machbaren kommen. Aus diesem Grund gibt es die Inject API im VueJS Framework. Am Beispiel einer Accordion Komponente erklärt dieser Artikel sehr gut wie die Provide/Inject API für Container Komponenten (auf Molekül oder Organismus Ebene des Atomic Designs) eingesetzt werden kann.
https://blog.logrocket.com/implicit-state-sharing-reacts-context-api-provide-inject-in-vue-679062a50f05
Schönes HowTo wie man dynamisch Komponenten im Renderprozess einbindet. Sehr praktisch wenn aufgrund der Datenlage ein ListenItem anders gerendert werden muss als die anderen.
https://www.raymondcamden.com/2018/10/31/working-with-dynamic-components-in-vuejs
Dynamisch Komponenten in Kombination mit Slots können sehr gut für die Erweiterung der VueJS Transistion API eingesetzt werden. :Type und :Tag werden weiter an eine Higher Order Componente mit fest definierten Animationsverhalten durchgereicht. Anbei die Erklärung wie man Komponentenverhalten erweitern kann ohne die Hürden der Vererbung oder Mixins.
https://vuejsdevelopers.com/2018/02/26/vue-js-reusable-transitions/
State Management innerhalb von UI Komponenten kann eine Herausforderung sein (bitte nicht verwechseln mit App State Management mit Vuex). Wenn dann noch die Anforderung von Wiederverwertbar hinzugefügt wird, kann es sehr schnell sehr eklig werden. Bisher wurde die Wiederverwendung von Code häufig mit Mixins, Vererbung (Vue.extend API), Provide/Inject API, Render Props, HOC, EventBus oder andere gelöst. Leider skalieren manche der Lösungen nicht so richtig geil. Zudem muss auch noch für jedes Framework das StateManagement neu implementiert werden. Alles irgendwie sehr unbefriedigend, wo wir doch gute Framework übergreifende Beschreibungen von State Machines für UI Komponenten haben, die ein Framework agnostisches UI Statemanagement ermöglichen könnten. Der neue Schrei aus der Experimentierbude soll dieses Problem mit dem Hooks Architektur Pattern lösen. Das teilweise sogar über die Frameworkgrenzen hinweg. Hört sich erstmal gut an, hier ein paar Infos zum neuen Hypethema.
https://medium.com/@shuvohabib/vue-js-hooks-and-react-js-hooks-at-a-glance-fe5623e9ac52
https://github.com/yyx990803/vue-hooks/
https://codesandbox.io/s/jpqo566289
https://twitter.com/DavidKPiano/status/1066384040675164163?s=17
https://codesandbox.io/s/33wr94qv1
https://itnext.io/what-are-hooks-on-react-and-how-you-can-benefit-from-them-5cec8ab31032
http://krasimirtsonev.com/blog/article/react-hooks-changing-the-mindset
https://jeremenichelli.io/2019/01/how-hooks-might-shape-design-systems-built-in-react/
https://www.fullstackreact.com/articles/an-introduction-to-hooks-in-react/
https://reactjs.org/docs/hooks-intro.html
https://daveceddia.com/intro-to-hooks/
https://daveceddia.com/useeffect-hook-examples/
https://usehooks.com/
https://statecharts.github.io/
https://kyleshevlin.com/xstate-visualizer
https://blogs.itemis.com/en/taking-scxml-to-the-next-level-with-yakindu-statechart-tools
Das Bündeln von wiederverwendbaren Komponenten, Mixins, und Direktiven kann gut mit Vue Plugins umgesetzt werden. Anbei eine Einführung an einem praktischen Beispiel eines Annotation User Interfaces
https://css-tricks.com/getting-started-with-vue-plugins/
Ein kurzer Einblick wie das Repository und Factory Pattern für eine entkoppelte API Einbindung in die VueJS App realisiert werden kann
https://blog.snap.hr/01/11/2018/vue-api-calls-smart-way/
https://stackoverflow.com/questions/50540079/axios-make-multiple-request-at-once-vue-js
Ein interessanter Ansatz Offline First Prinzipien in den Application State mit VueX miteinander zu verbinden. Desweiteren gehts weiter mit Service Worker und VueJS
https://medium.com/daily-now/optimistic-offline-first-apps-with-vuex-d8a412e105a7
https://auth0.com/blog/vuejs-kanban-board-adding-progressive-web-app-features/
https://dev.to/addyosmani/adaptive-serving-using-javascript-and-the-network-information-api-331p
https://github.com/filrak/vue-offline
https://github.com/kettanaito/msw/blob/master/README.md
Eine fortgeschrittene oder nach mancher Entwickler Meinung ist die VueJS, TypeScript mit RxJS Kombo eine stabilere und ausgereifte Entwicklungsumgebung als die Standard JS Tools. Einen Einblick gibt es hier um sich selbst einen Eindruck zu machen
https://codeburst.io/combining-vue-typescript-and-rxjs-with-vue-rx-a084d60b6eac
Die Vue CLI ist ein ziemlich gutes Power Tool zum Rapid Prototyping. Darüber hinaus können CLI Plugins direkt Dokumentationen als Github Pages deployen oder das Anlegen eines SVG Sprite Loader , welches z.B. für Icon Sets sehr interessant ist
https://medium.com/codingthesmartway-com-blog/getting-started-with-vue-cli-3-1aecf529fc71
https://medium.com/@Roli_Dori/deploy-vue-cli-3-project-to-github-pages-ebeda0705fbd
https://github.com/swisnl/vue-cli-plugin-svg-sprite
Exotisches
Schönes kurzes Tutorial wie YouTube Clips per Command-Line runtergeladen werden können. Praktisch wenn man sich ein paar Tech Talks auf der Zugfahrt anschauen möchte.
https://davidwalsh.name/download-youtube-channel
https://dev.to/rick_viscomi/using-sheets-and-the-youtube-api-to-track-video-analytics-6el
Die Interoperability des Internet of Value sehr schön erklärt
https://medium.com/xpring/layer-3-is-for-interoperability-ca387fa5f7e2
Netzwerke sind die Grundlage des Internets. Leider gibt es hierzu nicht so viele schöne online Quellen zum Einstieg. Diese Seiten finde ich ganz gut gemacht, die sofort auch praktische Übungen mit nutzbaren Ergebnissen aufzeigen.
http://networks.land/
https://media.ccc.de/v/routingdays16-18-network_ip_basics
https://media.ccc.de/v/routingdays16-9-routing_in_the_internet
http://communitytechnology.github.io/docs/cck/
https://tomeshnet.github.io/p2p-internet-workshop/
https://helloworld.agorama.org.uk/
https://www.giswatch.org/community-networks
https://www.isems.de/
https://solar.lowtechmagazine.com/2018/09/how-to-build-a-lowtech-website/
https://freifunk.net/
https://ournetworks.ca/
https://tomesh.net/
https://www.open-mesh.org/
https://startyourownisp.com/
https://portal.wissensfabrik.de/portal/fep/de/dt.jsp?setCursor=1_554644_555020 Internet verstehen für Kinder von IT2School
Ich bin großer Fan von Jean-Christophe Victor und seine Sendung Mit offenen Karten. Leider ist er verstorben, dennoch sind die Geopolitischen Punkten zum Internet top aktuell
https://www.youtube.com/watch?v=q92hbNhgM2A
https://www.youtube.com/watch?v=a-fs-AuYA9I
https://www.youtube.com/watch?v=Y7zeJI0chEo
https://www.youtube.com/watch?v=nrBPtimwhIM
