Zusammenfassung interessante Artikel, Codesnippets und Talks- 2018 – KW 42

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://webcomponentessentials.com/
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

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/

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

 

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

Also on:

Share Post :

More Posts

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.