Hallo Web und Tüftel Community,
Seit Oktober arbeite ich nun als Web Platform Developer bei der TüftelAkademie und werde am Ausbau der Webplattform mitwirken. In diesem Rahmen wird sich meine Leseliste wohl wieder verstärkt den klassischen (Full-Stack) Webentwicklungsthemen widmen. Auch wenn mein Herz weiter für Router und dezentrale Netze zu begeistern ist.
Viel Spaß beim Lesen!
Allgemein
Schönes Slide Deck über Ethical Design für Web Seiten und andere Digitale Services
https://noti.st/foobartel/7l9yRA/the-untold-benefits-of-ethical-design
Design nicht für personalisierte Präferenzen sondern für Anwendungsfälle gestalten. Ein nicht ganz uninteressanter Punkt, welcher auch für Privacy by Design Prinzip gut ankommen könnte
https://www.invisionapp.com/inside-design/personalize-design
Veränderung ist eine feste Konstante in unseren Leben und Projektlebenszyklus. Anbei ein schöner Artikel der sich mit solchen Veränderungen im Developmentprozess befasst
https://medium.com/@rakyll/cpdd-critical-path-driven-development-6c2592fb8ea4
Egal ob Developer oder Designer Team Lead, dieser Artikel fasst sehr gut die Kompetenzen und Rollen eines solchen Team Leads zusammen.
https://orgdesignfordesignorgs.com/2018/10/16/the-most-important-role-in-your-design-org-team-lead/
Immer mehr Browser kümmern sich um den Support von Web Componenten. Das Thema wird immer relevanter für Websiten und Web Apps. Vorallem für kleine und mittlere Admin Oberflächen, wie sie z.B. Router oder IoT Geräten sehe ich hier viel Potential. Sehr komplexe Web Apps sollten/werden vermutlich weiter mit React, Angular, VueJS oder oder entwickelt
https://dev.to/jamesrweb/an-introduction-to-custom-elements-5327
https://hacks.mozilla.org/2018/11/the-power-of-web-components/
https://www.codementor.io/bennyp/lets-build-web-components-part-1-the-standards-nhsbbk4ec
https://www.codementor.io/bennyp/lets-build-web-components-part-2-the-polyfills-nzy0icg0c
https://dev.to/bennypowers/lets-build-web-components-part-3-vanilla-components-4on3
https://dev.to/bennypowers/lets-build-web-components-part-4-polymer-library-4dk2
https://dev.to/bennypowers/lets-build-web-components-part-5-litelement-906
https://dev.to/bennypowers/lets-build-web-components-part-6-gluon-27ll
https://dev.to/bennypowers/lets-build-web-components-part-7-hybrids-187l
https://webcomponentessentials.com/
https://open-wc.org/
https://alligator.io/web-components/
https://dev.to/thepassle/web-components-from-zero-to-hero-4n4m
https://twitter.com/abdonrd/status/1049409586850131969
https://medium.com/google-developer-experts/are-web-components-a-thing-5a116b1da7e4
https://substantial.com/blog/2014/02/05/accessibility-and-the-shadow-dom/
https://www.udemy.com/web-components-stenciljs-build-custom-html-elements/
Die Prototype Software Framer X kann nun besser mit JavaScript Frameworks und auch über Umwege besser mit Webkomponenten umgehen. Der Austausch zwischen Designer und Entwickler könnte so im Bereich Design Systemen und Low Code eine Boost bekommen
https://scotch.io/bar-talk/get-to-know-framer-x-the-react-ui-creator
https://blog.prototypr.io/bringing-design-system-components-from-production-into-framer-x-786e89be2250
https://designcode.io/framer-x-react-components und https://framer.com/features/react/
https://mobile.twitter.com/CompuIves/status/1047860300526104576 VueJS in Framer X
Rapid Prototyping von Voice Interfaces mit Adobe XD
https://www.subtraction.com/2018/10/15/designing-and-prototyping-with-voice-in-adobe-xd/
Die neuen EU Abstimmungen in Sachen Copyright Schutz haben einen sehr faden Beigeschmack. Evtl. braucht es genau solche dämlichen Entscheidungen um das dezentrale/verteilte Web im privaten Bereich zu pushen
https://www.theguardian.com/commentisfree/2018/sep/13/tech-giants-eu-internet-searches-copyright-law
Events und Weiterbildung
3.-4.11.2018 Indie Web Camp in Berlin
https://indieweb.org/2018/Berlin
5.11.2018 Accessibility Club Conference in Berlin
https://accessibility-club.org/
17.-18.11.2018 Bits und Bäume: Konferenz zu Digitalisierung und Nachhaltigkeit in Berlin
https://bits-und-baeume.org/programm/de
HTML & CSS & SVG
Ein schöne Artikelserie über Best Practices für große Web Projekte mit CSS
https://spaceninja.com/2018/09/17/what-is-modular-css/
https://medium.com/openmindonline/how-i-organize-css-in-large-projects-using-ufocss-part-1-9d04417f39f3
https://medium.com/@fuladuf/how-i-organize-css-in-large-projects-using-ufocss-part-2-68786ff41749
Barrierefreie Formulare und dessen Form Design Patterns richtig gestalten hört sich nervig an, macht aber unser aller Leben viel einfacher. Ein super Buch und weitere Referenzen
https://www.smashingmagazine.com/2018/10/form-design-patterns-release/
https://inclusive-components.design/
https://callmenick.com/dev/floated-labels-with-placeholder-shown/
https://codeburst.io/web-developer-playbook-rich-text-editor-4c356fb8929d Rich Text Editor
https://alistapart.com/article/designing-for-cognitive-differences
Ein schönes Beispiel für einen barrierefreien Styleguide
http://a11y-style-guide.com/style-guide/
https://www.deque.com/blog/much-ado-about-aria/
Animation im Web muss nicht langweilig oder umständlich sein. Ein schöne In-Browser Tool für Web Animationen
https://webdesign.tutsplus.com/articles/quick-tip-chrome-animation-dev-tools–cms-31505
https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
Ein schönes Beispiel wie man mit CSS Border Radius sehr schöne Effekte erzielen kann
https://9elements.com/io/css-border-radius/
Web Performance und Layout Funktionalität ist nicht ganz so einfach. Schöner Performance Bericht
https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web/
Schöne Übersicht HTML5 Videoplayer im Open Source Bereich
https://blog.bitsrc.io/5-open-source-html5-video-players-for-2018-38fa85932afb
JavaScript spezifisch
Eine sehr schöne Erklärung was und warum sich this in JavaScript anders verhält wie in anderen Sprachen. Richtig interessant wird es dann mit Arrow Functions
https://medium.freecodecamp.org/a-deep-dive-into-this-in-javascript-why-its-critical-to-writing-good-code-7dca7eb489e7
https://zendev.com/2018/10/01/javascript-arrow-functions-how-why-when.html
Mit JavaScript ES Modulen in NodeJS arbeiten kann zur Kompatibilitätsproblemen führen. Anbei ein Workaround Vorschlag
https://codewithhugo.com/use-es-modules-in-node-without-babel/webpack-using-esm/
Die WebAssembly (WASM) Schnittstelle zu JavaScript und zurück wird immer besser und schneller. Man darf echt gespannt sein, wie sich Web Assembly entwickelt. Auf jeden Fall spannend
https://hacks.mozilla.org/2018/10/calls-between-javascript-and-webassembly-are-finally-fast-%F0%9F%8E%89/
Eine schöne einführende Erklärung zu IndexDB im Browser um Daten auf dem Client Gerät zu speichern
https://wanago.io/2018/10/08/fundamentals-of-storing-data-in-the-browser-with-indexeddb/
Schöne Schnellübersicht über die gängigen Babel 7 und Webpack Tools
https://www.thebasement.be/working-with-babel-7-and-webpack/
Interessanter Ansatz sein Skillset mit Open Source Projekte langsam anzureichern. Ein Vorschlag wie man sein passendes Projekt findet
https://www.coreycleary.me/how-to-find-the-best-open-source-node-js-projects-to-study-for-leveling-up-your-skills/
Step out of the Single Thread ist manchmal nicht so einfach im NodeJS Ecosystem. Arbeiten mit Cluster oder mit PM2 können helfen. Ein paar Best Practices
https://www.acuriousanimal.com/2017/08/12/understanding-the-nodejs-cluster-module
https://dev.to/acanimal/using-pm2-to-manage-nodejs-cluster-34-30ee
Software Technik und Architektur
SOLID ist ein gutes Prinzip für guten pragmatischen Code zu erzeugen
https://blog.bitsrc.io/solid-principles-every-developer-should-know-b3bfa96bb688
Der Hype um Microservices verlagert eine gute Portion an Komplexität und Funktionalität ins Netzwerk. Das hat starke Auswirkung auf die Gestaltung der Applikationsarchitektur. Ein kurzer Einblick zu Service Mesh und anderen Ansätzen.
https://thenewstack.io/how-container-based-architectures-require-different-networking/
https://www.nginx.com/blog/introducing-the-nginx-microservices-reference-architecture/
https://www.nginx.com/resources/library/microservices-reference-architecture/ (ebook)
Der API-First Ansatz ist ein guter Ansatz unterschiedliche Software Module und Technologie Stacks voneinander zutrennen. Als Austausch und als eine Art Vereinbarung wird dann gemeinsam eine Programmierschnittstelle definiert. In den meisten Fällen geschieht dies zwischen den klassichen Frontend und Backend Teams. In Zukunft wird das wohl eher auf Microservices Ebene und dessen Teamaufteilung passieren. Wieauchimmer, Postman ist ein gutes Tool um die Funktionalitäten von HTTP APIs automatisiert zu überprüfen und zu verwalten.
https://swagger.io/resources/articles/adopting-an-api-first-approach/
https://medium.com/adobetech/three-principles-of-api-first-design-fa6666d9f694
https://medium.com/postman-engineering/integrating-in-an-api-first-world-d5d4b0981a3f
https://medium.com/postman-engineering/the-ultimate-api-publishers-guide-be74a2692326
https://medium.com/postman-engineering/tuck-in-your-apis-safe-and-sound-with-these-guiding-principles-for-api-security-cd69f71c291e
https://www.oreilly.com/ideas/best-design-practices-to-get-the-most-out-of-your-api
Im Rahmen einiger CMS Portierungsrecherchen und den stark API orientierten Ansatz im IndieWeb habe ich mich verstärkt mit Tradionellen, DeCoupled und Headless CMS Konzepten befasst. Einige dieser Quellen liefern eine schnelle Übersicht
https://www.coredna.com/blogs/headless-vs-decoupled-cms
https://www.acquia.com/de/resources/ebooks/decoupled-cms-101
https://pantheon.io/decoupled-cms
https://www.smashingmagazine.com/2018/10/headless-wordpress-decoupled/
https://www.drupal.org/association/supporters/blog/implementation-guide-on-headless-and-decoupled-cms
https://dri.es/how-to-decouple-drupal-in-2018
https://www.contentacms.org/
https://infinum.co/the-capsized-eight/the-ups-and-downs-of-creating-a-decoupled-wordpress
Decoupling WordPress (https://www.youtube.com/watch?v=d3vMlqDIBKk)
https://getdirectus.com/ und https://getcockpit.com für PHP
https://strapi.io/ für NodeJS
Object Storage ist eine schöne Möglichkeit Dateien mit zugehörigen Metadaten abzulegen. Zudem skaliert es in Netzwerkumgebungen auch nicht schlecht. Anbei eine kleine Einführung in Minio
https://blog.minio.io/modern-data-lake-with-minio-part-1-716a49499533
https://blog.minio.io/modern-data-lake-with-minio-part-2-f24fb5f82424
https://blog.minio.io/iot-data-storage-and-analysis-with-fluentd-minio-and-spark-26f183381183
https://www.thepolyglotdeveloper.com/2017/02/using-raspberry-pi-distributed-object-storage-minio/
https://blog.alexellis.io/openfaas-storage-for-your-functions/
Workflow und Tools
Automatisierung im Job ist gerade ein Hypethema. Die Realität scheint wohl einiger IT & Entwickler unterschiedlich zu treffen. Sehr interessanter Artikel über Cheating, Ethik und Moral der eigenen Arbeitsoptimierung durch Automatisierung…
https://www.theatlantic.com/technology/archive/2018/10/agents-of-automation/568795/
Früher habe ich um Command Line Tools (CLIs) einen großen Umweg gemacht. Allerdings sind diese in Zeiten von automatisierten Workflows und Deploymentprozessen eine große Hilfe für den Developer Alltag. Anbei ein kleiner Rückblick der CLI Tools im Web Development Bereich
https://blog.heroku.com/evolution-of-heroku-cli-2008-2017
https://github.com/oclif/oclif
https://devcenter.heroku.com/articles/cli-style-guide
VS Studio Code und ein paar brauchbare Erweiterungen für Frontend Developers
https://blog.bitsrc.io/top-10-vs-code-extensions-for-frontend-developers-in-2018-7992282db2ca
Das Github Pull Request Tool für VS Code macht sicherlich dem ein oder anderen das Leben leichter. Sei es im Bereich Code Review oder Open Source Projekt Verwaltung
https://scotch.io/tutorials/github-pull-requests-extension-for-visual-studio-code
https://code.visualstudio.com/blogs/2018/09/10/introducing-github-pullrequests
Aufgrund einiger Design Tools bin ich aktuell noch unter Windows unterwegs. Möchte jedoch nicht gänzlich auf Docker in einer Windows Umgebung verzichten. Ein paar Konfigurationsmöglichkeiten
https://nickjanetakis.com/blog/using-wsl-and-mobaxterm-to-create-a-linux-dev-environment-on-windows
https://nickjanetakis.com/blog/setting-up-docker-for-windows-and-wsl-to-work-flawlessly
https://medium.com/@sebagomez/installing-the-docker-client-on-ubuntus-windows-subsystem-for-linux-612b392a44c4
https://blogs.msdn.microsoft.com/commandline/2017/12/08/cross-post-wsl-interoperability-with-docker/
https://docs.docker.com/docker-for-windows/#docker-settings-dialog
https://learnk8s.io/blog/installing-docker-and-kubernetes-on-windows
Web Security
Ein weiterer guter zusammengefasster Artikel über CORS und dessen Sicherheitsaspekte
http://performantcode.com/web/do-you-really-know-cors
https://levelup.gitconnected.com/overview-of-proxy-server-and-how-we-use-them-in-react-bf67c062b929
Schöner Einstieg in die Absicherung des eigenen Webservers… vor allem für alle Newbies im Bereich Self-hosting interessant
https://www.linode.com/docs/security/securing-your-server/
https://homebrewserver.club/
http://www.lowtechmagazine.com/2018/09/how-to-build-a-lowtech-website.html
OAuth2 ist ein gängiger Standard und die damit verbundene Authentifizierung ist leider hin und wieder umständlich automatisiert zu testen. Ein Lösungsvorschlag
https://dzone.com/articles/automate-testing-oauth-20-service-a-step-by-step-t
https://www.getpostman.com/docs/v6/postman/sending_api_requests/authorization
https://developer.kindful.com/docs/test-with-postman
https://www.youtube.com/watch?v=NRU_KdUSjD4
https://bshaffer.github.io/oauth2-server-php-docs/cookbook/google-playground/
Gültige SSL Zertifikate für lokale Testumgebungen ist aufgrund der Browsermeldung und der Unsicherheit durch die Selbstzertifizierung im Entwicklungsprozess eine nervige Angelegenheit. Das Tool mkcert und diese Erklärung könnte Abhilfe schaffen
https://odino.org/valid-ssl-certificates-for-local-development/
https://github.com/FiloSottile/mkcert
Per manipulierten DNS Server und nicht veränderten Default Passwörtern in Heimroutern konnte ein größerer Phishing Angriff gefahren werden. Bitte IMMER die Standardpasswörter von euren smarten(!) Geräten abändern
https://www.heise.de/security/meldung/GhostDNS-Grossangelegter-Phishing-Angriff-auf-Heim-Router-4180240.html
Ein guten Einblick in Bereich Object Storage und Sicherheitsstrategien
https://www.datanami.com/2018/09/14/ransomware-employing-object-storage-to-defeat-a-growing-threat/
VueJS spezifisch
Kleiner Einblick an welchen die VueJS Community für Version 3 arbeitet
https://www.quora.com/What-new-features-are-planned-for-Vue-js-3-0/answer/Anthony-Gore-5
Das Einbinden von UI Widget war zu Web 2.0 Zeiten und als Yahoo noch richtig groß war der heiße Scheiß. Heute hat sich das ein wenig abgeschwächt. Dennoch ist das autonome und komplett entkoppelte Prinzip von UI Widgets zu anderen UI Elementen für Micro Frontends oder anderen CMS-Theme basierten Systemen sehr interessant
https://itnext.io/vuidget-how-to-create-an-embeddable-vue-js-widget-with-vue-custom-element-674bdcb96b97
Seit ich wieder verstärkt mit CMS Systemen arbeiten muss, macht sich ein Einstieg in NuxtJS nicht schlecht
https://www.telerik.com/blogs/getting-started-with-nuxtjs
https://www.vuemastery.com/nuxt-cheat-sheet/
https://medium.freecodecamp.org/universal-application-code-structure-in-nuxt-js-4cd014cc0baa
https://vuejsdevelopers.com/2018/07/16/7-tips-large-nuxt-app-vue/
Kleiner Übersicht und Best Practice zum Rapid Prototyping Komponenten mit VueJS
https://vuejsdevelopers.com/2018/06/04/rapid-prototyping-vue/
https://blog.lichter.io/posts/the-guide-to-write-universal-ssr-ready-vue-compon
https://medium.com/@tomquinonero/creating-a-vuejs-component-for-the-community-a-walk-through-485ea88922c7
https://medium.com/js-dojo/how-to-build-vue-components-that-play-nice-746253813a4d
https://medium.com/@znck/type-vue-without-typescript-b2b49210f0b
https://github.com/chrisvfritz/hello-vue-components/blob/master/README.md
https://github.com/HcySunYang/vuese
https://dev.to/denisinvader/mounted-and-beforedestroy-hooks-in-vuejs-functional-components-7bi
https://medium.com/@kevin_peters/learn-how-to-refactor-vue-js-single-file-components-on-a-real-world-example-501b3952ae49
Kleine Erklärung zu (scoped) Slots in VueJS
https://vuejsdevelopers.com/2017/10/02/vue-js-scoped-slots/
https://css-tricks.com/using-scoped-slots-in-vue-js-to-abstract-functionality/
https://css-tricks.com/building-renderless-vue-components/
https://css-tricks.com/intro-to-vue-2-components-props-slots/
https://www.youtube.com/watch?v=6cn3xyK4Alk
https://blog.logrocket.com/modern-component-reusability-render-props-in-react-scoped-slots-in-vue-ff3c5b2dc899
Sehr hilfreiche und coole Scroller und Liste Komponenten mit einer großen Anzahl von Items erstellt von Guillaume Chau
https://github.com/Akryum/vue-virtual-scroller/
https://twitter.com/vuejsfeed/status/1049707176170848256/photo/1
https://www.youtube.com/watch?v=Uzq1KQV8f4k
Kleiner Einblick über die unterschiedlichsten Techniken Das ReRendern von Komponenten zu erzwingen. ForceUpdate und Arbeiten mit nextTick Prinzipien funktioniert in komplexen Kompositionen ganz gut. Ein weiterer sehr wertvoller Tipp ist das Arbeiten mit :key Property, welches vor allem bei Listen ReRenderings extremst hilfreich sein kann.
http://michaelnthiessen.com/force-re-render/
https://medium.com/dailyjs/patching-the-vue-js-virtual-dom-the-need-the-explanation-and-the-solution-ba18e4ae385b
Zwei sehr hilfreiche Secret Power Funktionen des VueRouters sind Arbeiten mit URL Hashes und Scrolling Verhalten.
https://dev.to/napoleon039/the-lesser-known-amazing-things-vuerouter-can-do-25di
https://webdevchallenges.com/use-protected-routes-in-vue-js/
https://marcus.io/blog/accessible-routing-vuejs
Im Bereich Debugging Workflow und Debugging Tools passiert immer mehr im Vue EcoSystem. Die Developer Experience wird es freuen
https://vuejsdevelopers.com/2018/10/16/vue-js-advanced-debugging/
https://medium.com/@brockreece/unlock-performance-tracing-in-vue-3b2c8f619cdc
https://blog.usejournal.com/new-features-in-vue-devtools-v5-0-and-why-they-are-useful-3ce732fdc7a0
https://flaviocopes.com/vue-devtools/
https://github.com/vuejs/vue-devtools
https://eldarion.com/blog/2018/10/16/using-vue-devtools-safari-and-django/
Automatisierte Tests mit VueJS sind wichtig um stabile und reproduzierbare Softwareergebnisse zu liefern. Die richtige Balance von Komponenten bis hin zur App Testing und Browser Testing ist nicht leicht zu finden. Diese Artikel sollen hierbei ein wenig helfen
https://frontstuff.io/unit-test-your-first-vuejs-component
https://dev.to/bahdcoder_47/a-gentle-introduction-to-testing-vue-applications-52jk
https://itnext.io/testing-real-world-vuejs-apps-d3e44118f8ce
https://medium.com/magnetis-backstage/working-an-application-in-vue-js-with-tdd-an-extensive-guide-for-people-who-have-time-part-1-3be791dafa2b
https://medium.com/magnetis-backstage/working-an-application-in-vue-js-with-tdd-an-extensive-guide-for-people-who-have-time-part-2-12ec77b15d96
https://medium.com/magnetis-backstage/working-an-application-in-vue-js-with-tdd-an-extensive-guide-for-people-who-have-time-part-3-7a68ad3f5fb1
https://medium.com/magnetis-backstage/working-an-application-in-vue-js-with-tdd-an-extensive-guide-for-people-who-have-time-part-4-700a4269e368
https://www.codementor.io/cuketest/bdd-automation-01-create-and-run-the-first-sample-muy8htpqy
Schönes und sehr einsteigerfreundliches Tutorial wie man eigene Vue CLI Plugin erstellt. Vom Prompt bis zu hin eines einfachen Generators
https://dev.to/vuevixens/how-to-build-a-vue-cli-plugin-3b6b
https://slides.com/akryum/create-a-vue-cli-plugin#/
Exotisches
Alte analog Geräte für die Automatisierung und Digitalisierung fit machen. Mit diesem Proof-of-Concept gibt es ein paar Inspirationen zum Tüfteln
https://www.fastcompany.com/90250979/these-adorable-attachments-can-turn-anything-into-a-smart-gadget
https://www.tomsguide.com/us/roost-smart-battery-v-2.0,review-5076.html
Heimrechner und Server Infrastruktur kann mit UCS Home Server geliefert werden. Anbei ein interessantes Tutorial zu UCS und Nextcloud
https://www.youtube.com/watch?v=l06-SQdgYZI
https://www.univention.de/blog-de/2018/06/einrichtung-eines-leistungsstarken-ucs-home-server-mit-owncloud-kopano-lets-encrypt/
https://www.univention.de/produkte/preise/
Die Serverless Architektur mit OpenFaas entwickelt immer mehr gute Tools und Verfahren
https://github.com/openfaas/openfaas-cloud
https://github.com/openfaas/store
