Hallo Web und Tüftel Community,
Wieder einmal ein paar Links zu interessante Artikeln von den letzten 4 Wochen. Diesmal mit den Themen Design Systemen und Styleguides in der allgemeinen Sektion. Dann geht es weiter über AI im UX Bereich zu den CSS Kniffen für Layoutlösungen bis wir dann bei der Netzwerkprogrammierung für verteilte Anwendungen im JavaScript Kosmos angekommen sind. VueJS darf wie immer nicht fehlen mit seinen breiten Anwendungsgebiet. Zudem gibt es neue VueJS Talks von der Konferenz in Toronto. Am Ende gibt es für euch einen kleinen Abgang zum Träumen mit Generatives Design Beispielen oder den Ein-Personen-Business Ansatz.
Viele Spaß beim Lesen!
Allgemein
Sehr schöner Artikel über das Zusammenspiel von Designer, Managern und Developern mit Fokus auf langfristige Strategien
https://medium.com/mule-design/a-three-part-plan-to-save-the-world-98653a20a12f
Jeremy Keith hat eine schönen Blog Post über den Unterschied von Prototype und Produktions Code geschrieben. Seit Jahren bin ich der Meinung das Prototype Code nicht wieder verwertet werden kann (und darf)… Jeremy bringt es sehr gut auf den Punkt warum das so ist:
https://adactio.com/journal/14562
bRuCk ist ein interessantes Tool für Low-Fi Prototyping Online Content Designs im Browser mit Barrierefreieheit im Hinterkopf
https://github.com/Heydon/bruck
Schöner Artikel warum der Design System Ansatz auch schon in der frühen Phase eines Start-ups relevant ist. Zudem liefern die Mitschnitte der Design System Conference in London weitere Einblicke rund um das Thema
https://uxdesign.cc/yes-your-startup-is-ready-for-a-design-system-7c50d13e1516
https://www.youtube.com/watch?v=BmrDrW93Knw&list=PLNC1kqILNVugAHQyYv4US89qZQLjmLIpi
https://design-systems.io/
Sehr schöner Artikel an welchen Stellen in der Praxis der Design System Ansatz scheitern kann. Die geschilderten Probleme stimmen stark mit meinen Erfahrungen über ein. Für mich eine klare Leseempfehlung
https://medium.com/design-paperless-post/when-your-design-system-fails-f035041ad6d2
Keine Frage, die Funktionsbeschreibung von UI Komponenten ist großer Teil der Design System/Styleguide Dokumentation. Ein weiterer häufig vergessener Teil ist die statistische Auswertung der verursachten Abhängigkeiten. Diese Info ist im laufenden Prozess sehr hilfreich um ein Design System/Styleguide nicht wie ein Krebsgeschwür wachsen zu lassen. Im letzten Drittel des Artikel wird diese Art von Doku als automatisiertes UI Inventar sehr gut beschrieben
https://segment.com/blog/driving-adoption-of-a-design-system/
https://github.com/segmentio/dependency-report
So richtig warm werde ich mit dem Thema AI und Big Data im UX Design nicht. Nichtsdestotrotz, muss man dieses Thema beobachten. Anbei aufschlussreiche Artikel
https://medium.com/@codepo8/artificial-intelligence-for-more-human-interfaces-765a21a40cd2
https://www.infoq.com/news/2018/11/human-interfaces-ai
https://www.intuity.de/agile-machine-learning-by-alex-kirsch/
https://gist.github.com/codepo8/cd29a4c07827d4a41b44c930059ae9e0
https://hub.packtpub.com/7-ai-tools-mobile-developers-need-to-know/
Schöner Artikel warum manche Review und Feedback Systeme nicht gut funktionieren und im schlimmsten Fall zur einem “Review/Feedback Fatique” Moment führen können. P.S. AirBnB und Amazon Feedback Requests können ein nerviges und unnötiges Ausmaß von sozialen Druck ausüben
https://www.theatlantic.com/technology/archive/2018/11/why-ratings-and-feedback-forms-dont-work/575455/
https://www.forbes.com/sites/theyec/2015/06/15/feedback-fatigue-stop-over-surveying-your-customers/
Ein paar weitere schöne Quellen zu NodeJS, JavaScript usw.
https://stackify.com/node-js-blogs-youtube-channels/
Schönes Sammelstelle für Artikel über Gesellschaft und Technologie
https://www.piqd.de/technologie-gesellschaft
HTML & CSS & SVG
Sehr schöner Artikel und super Auffrischung der Cascade und Box Tree Verhalten in CSS
https://alistapart.com/article/braces-to-pixels
Browser liefern oft eine Standardformatierung aus, die nicht immer mit unseren Intention übereinstimmt. Anbei gute Tipps wie diese Standardformatierung zurück gesetzt werden kann und was es dabei zu beachten gibt
https://bitsofco.de/a-look-at-css-resets-in-2018/
https://github.com/chris-pearce/backpack.css/
https://bitsofco.de/my-css-reset-base/
MaintainableCSS ist ein schöne Leitfaden für die CSS Best Practices jenseits von Software Tools und Abhängigkeiten
https://maintainablecss.com/
Schöne Einführung in CSS Shape und darüber hinaus ein paar Layout Hacks mit dieser API
https://tympanus.net/codrops/2018/11/29/an-introduction-to-css-shapes/
http://adrianroselli.com/2018/12/a-css-venn-diagram.html
https://24ways.org/2018/clip-paths-know-no-bounds/
https://css-tricks.com/people-talkin-shapes/
CSS Grid Spielwiese und Tool zum Ausprobieren
https://medium.freecodecamp.org/introducing-grid-wiz-make-a-css-grid-framework-with-custom-browser-support-at-the-snap-of-a-74e5c0a2e77
https://grid-wiz.now.sh/
CSS Grid Layout erweitert (besser enhanced) mit Animationen
https://github.com/aholachek/animate-css-grid/blob/master/README.md
tabindex Attribut Fokusmanagement mit viel Hintergrundinfos zur Barrierefreiheit erklärt
https://bitsofco.de/how-and-when-to-use-the-tabindex-attribute/
Lazy Load Images entsprechen ein wenig dem Prinzip, das Gegenteil von gut, ist gut gemeint. Vor allem wenn das Lazy Load komplett mit JavaScript implementiert ist, treten Probleme wie z.B. ReLayout Renderings und unvollständiges SEO Crawling auf. Alternativen Lösungen mit CSS und SVGs sind hier vorgestellt
https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/
JavaScript spezifisch
JavaScript wird immer wieder für seine Single Thread Funktion kritisiert. So richtig stimmt das aber nicht, da verschiedene Worker zur Verfügung stehen. Anbei ein schöner Bericht in die 3 Typen Service Worker, Web Workers und Worklets
https://bitsofco.de/web-workers-vs-service-workers-vs-worklets/
Programmieren mit und im Netzwerk für verteilte Apps sei es im Backend Bereich oder als Verbindung zwischen den Clients. Technologien, wie Websockets, WebRTC, MQTT, gRPC usw. sind hilfreich hierfür. Anbei einige Einführungen
https://www.ably.io/concepts/websockets
https://www.ably.io/concepts/long-polling
https://flaviocopes.com/webrtc/
https://www.ably.io/tutorials#tut-webrtc
https://blog.risingstack.com/getting-started-with-nodejs-and-mqtt/
https://crossbar.io/autobahn/
https://thenewstack.io/build-real-world-microservices-with-grpc/
https://grpc.io/docs/tutorials/basic/node.html
https://medium.freecodecamp.org/a-thorough-introduction-to-distributed-systems-3b91562c9b3c
https://compositecode.blog/2018/12/17/cedrick-lunven-on-creating-an-api-for-your-database-with-rest-graphql-grpc/
Software Technik und Architektur
Schöne kurze Erläuterung wie das Portal FreeCoderCamp.org mit Hilfe der JAMStack Architektur und Gatsby + Netlify umgesetzt wurde
https://dev.to/ossia/how-freecodecamporg-uses-the-jamstack–a-single-api-server-to-help-millions-of-people-learn-to-code-every-month-4d5g
https://www.youtube.com/watch?v=e5H7CI3yqPY
https://www.youtube.com/channel/UC8bRyfU7ycLXnEBfvdorpUg
https://medium.com/deity-io/service-oriented-architectures-and-the-distributed-internet-56be61e6fe4a
Der Artikel warum das HapiJS Framework hier ist um zu bleiben, fasst sehr gut zusammen, auf welche Punkte (Code Readibility, Geringe Abhängigkeiten, Security usw.) man achten sollte für eine stabile nachhaltige Web App Entwicklung
https://hueniverse.com/why-you-should-consider-hapi-6163689bd7c2
Schöne Zusammenfassung und Übersicht gängiger Testverfahren in der Softwareentwicklung
https://dev.to/thejessleigh/different-types-of-testing-explained-1ljo
Workflow und Tools
Der Browser ist und bleibt als Web Developer immer das Tool Nummer 1. Anbei zwei schöne Artikel für den Web Dev Alltag
https://logrocket.com/blog/ultimate-web-design-tool/
https://medium.com/frontmen/art-of-debugging-with-chrome-devtools-ab7b5fd8e0b4
CSS Debugging
https://codepen.io/lucagez/full/LMEerQ/ | https://css-tricks.com/introducing-trashy-css/ | https://css-tricks.com/snippets/css/css-diagnostics/
Schönes Tutorial und Workflow Einführung die WordPress Applikation portierbar und 12Faktor (mit Docker) zu machen
http://www.discoversdk.com/blog/running-wordpress-in-docker
https://deliciousbrains.com/hosting-wordpress-yourself-2018-update/
http://www.discoversdk.com/blog/docker-container-debugging
https://www.oreilly.com/library/view/building-web-apps/9781491990070/ch01.html
https://css-tricks.com/gulp-for-wordpress-initial-setup/
Testing Tools und Workflow mit Docker umsetzen. Ein kleiner Einblick wie das aussehen könnte
https://medium.freecodecamp.org/how-to-dockerize-your-end-to-end-acceptance-tests-dbb593acb8e0
https://www.codementor.io/cuketest/bdd-automation-01-create-and-run-the-first-sample-muy8htpqy
Satusfy ist ein schönes Tool um schnell Statusseite für eigene Webservices zu erstellen
https://docs.statusfy.co/
Schönes karten-basiertes Werkzeug um die Überschneidungen eines Positives Design mit dem eigenen UX Design zu finden und definieren
http://studiolab.ide.tudelft.nl/diopd/library/tools-methods/design-for-happiness-deck/
Web Security
Ein gute Aufarbeitung und Artikel über das verseuchte Paket event-stream im NodeJS Ecosystem. Leider hat es auch das VueJS Ecosystem erwischt. Eine deren Reaktion (siehe Twitter Link) finde ich ein wenig Besorgnis erregend. Ich habe mal gelernt das 3rd Party Code erstmal nicht zu vertrauen ist und wenn man sich solch eine Abhängigkeit ans ein bindet, muss man diese immer wieder evaluieren (dazu gehört auch ein Security Audit). In diesem Falle bin ich ganz der Meinung von Eran Hammer, der erklärt sehr schön wie er diesen Umgang mit Hapi JS bewerkstelligt. Bei der ganzen Sache wird mir aber auch meine eigene Naivität und leichte Begeisterung für neue Web Werkzeuge bewusst. Die ganzen Abhänigkeiten sind gut sichtbar in der package.json und im node_modules Ordner und hätten mich längst mehr aufschrecken müssen… Obacht geben länger leben!
https://schneid.io/blog/event-stream-vulnerability-explained/
https://medium.com/s/story/exploiting-developer-infrastructure-is-insanely-easy-9849937e81d4
https://twitter.com/Akryum/status/1067357616844808192
https://hueniverse.com/why-you-should-consider-hapi-6163689bd7c2
https://blog.npmjs.org/post/173719309445/npm-audit-identify-and-fix-insecure
https://docs.npmjs.com/auditing-package-dependencies-for-security-vulnerabilities
https://entwickler.de/online/javascript/npm-audit-579843269.html
VueJS spezifisch
Konferenz Talks zu VueJS aus Toronto und Atlanta
https://www.vuemastery.com/conferences/vueconf-toronto-2018/
https://www.vuemastery.com/conferences/connect-tech-2018/
https://www.vuemastery.com/conferences/
VuePress ist eine schönes Dokumentationstool um kleine und mittelgroße Projekte mittels Markdown und VueKomponenten schnell verfügbar zu machen. Anbei ein gute Schnellstart Einführung
https://medium.freecodecamp.org/how-to-create-a-documentation-website-using-vuepress-eeabe8a99045
Mit ein paar Kniffen die eigene Vue Webapp aufpimpen
https://blog.bitsrc.io/turn-your-vue-web-app-into-a-pwa-ca04d8bcdd64
https://medium.freecodecamp.org/vuejs-pwa-on-nginx-22360ee7a7bf
Die Artikel hat einige interessante Tipps in Sachen VueJS Projektstruktur, Dateibenennung und Token Management
https://medium.com/@zitko/structuring-a-vue-project-authentication-87032e5bfe16
Direkte Manipulation von DOM Elementen in Vue JS kann man mit Direktiven umzusetzen, oder mit dem hier im Artikel erwähnten $ref Attribute und dazugehörigen (mount) Funktionen
https://codingexplained.com/coding/front-end/vue-js/accessing-dom-refs
Schönes Praxisbeispiel komplexe Grafiken und Animationen mit VueJS, SVG und Greensocks umzusetzen
https://www.smashingmagazine.com/2018/11/interactive-infographic-vue-js/
VueJS und einige weiteren Tools werden aktuell mit TypeScript umgesetzt. Ein Grund ist die strikte Typisierung. Glücklicherweise kann man für kleine Projekte eine Art strikte Typisierung in VueJS ohne TypeScript gelingen. Anbei ein Workflow Vorschlag
https://blog.usejournal.com/type-vue-without-typescript-b2b49210f0b
https://itnext.io/type-vuex-without-typescript-4f183b83a907
https://mobile.twitter.com/John_Papa/status/1067081456843980801/photo/1
Exotisches
Generatives Design und Muster Generierung finde ich immer sehr cool. Anbei eine schöne Anregung für ein Mandala Maker Wochenendprojekt
https://24ways.org/2018/the-art-of-mathematics/
http://www.levitated.net/gravityIndex.html
https://github.com/Apress/flash-math-creativity
https://www.hypeframework.com/
http://www.generative-gestaltung.de/2/
Seit einiger Zeit arbeite ich wieder in einem von mir gewünschten Teilzeitverhältnis um mehr Zeit für Seitenprojekte und andere Dinge zu haben. Momentan gelingt mir das mal gut und mal schlechter. Anbei ein paar interessante Artikel die mir geholfen haben dieses Wechselspiel besser zu verstehen
https://thecreativeindependent.com/guides/how-to-balance-full-time-work-with-creative-projects/#9to5
https://werd.io/2018/keeping-it-small-is-okay-too
http://www.fullstackradio.com/102
https://flaviocopes.com/tags/lab/
https://www.1843magazine.com/features/why-do-we-work-so-hard
https://aeon.co/essays/what-if-jobs-are-not-the-solution-but-the-problem
https://www.amazon.de/Wie-viel-ist-genug-Wachstumswahn/dp/3442158052
https://en.wikipedia.org/wiki/Small_Is_Beautiful
