Hallo Web und Tüftel Community,
Durch eine persönliche berufliche Veränderung muss ich mal schauen in welchen Rahmen ich in Zukunft eine ordentliche Sammlung von Links und Neuigkeiten zusammenfassen kann. Wieauchimmer es weiter geht, dieses mal gibt es Empfehlungen und Artikel zu den Themen:
- Dokumentation und Umgang von UI Komponenten im Unternehmen
- Was machen gute Commit Messages aus
- Karriereentwicklung Tipps für Entwickler und Designer
- Lösungsmuster für Typsicherheit in JavaScript
- Formulargenerierung und -validierung mit VueJS plus ein paar Design Systemen Beispiele mit VueJS.
Allgemein
Die Freifunk Community hat einen interessanten Prototypen für einen bebilderten produktabhängigen Einrichtungsassistenten für sehr unerfahrene Router User erstellt. Diese digitale und interaktiven Erklärung der unterschiedlichen Router Anschlüsse finde ich eine schöne leicht verständliche Idee.
https://blog.freifunk.net/2018/08/14/vrconfig-final/
https://gitlab.com/vrconfig/luci-app-vrconfig
Apple greit das Thema Wifi Mesh mit Hinblick auf Smart Home wieder mit auf.
https://www.maclife.de/news/apple-noch-nicht-fertig-netzwerken-thread-wi-fi-mesh-zukunft-100105829.html
https://www.heise.de/mac-and-i/meldung/Smart-Home-Vernetzung-Apple-schliesst-sich-Thread-Group-an-4130846.html
Der Redux Designers Guide beschreibt sehr schön wie eine komplette Web GUI in modulare Datenstrukturen, UI Elementen und UX Funktionen unterteilt werden kann
https://www.smashingmagazine.com/2018/07/redux-designers-guide/
Schöner Artikel über Progressive Enhancement als disziplinübergreifende Methode für ein besseres fehlertolerantes und rückwärts kompatible Produkt. Vor allem Web Standards wie HTML und CSS sind nach diesem Prinzip aufgebaut und sollten bei der digitalen Produktentwicklung beachtet werden.
https://medium.com/no-divide/the-power-of-progressive-enhancement-98738766b009
https://resilientwebdesign.com/
https://www.amazon.de/Designing-Progressive-Enhancement-Building-Everyone/dp/0321658884
https://webcomponents.club/ ==> Aktiver Lernprozess zu Progressive Enhancement mit Web Components
Eine sehr gute Artikelserie über das Ecosystem der Komponenten-orientierten UI Entwicklung. Von der Namensfindung, zur Abnahme und einer guten Dokumentation für alle Beteiligten im Unternehmen
https://medium.com/eightshapes-llc/documenting-components-9fe59b80c015
https://medium.com/eightshapes-llc/documenting-component-introductions-fe5b04287284
https://medium.com/eightshapes-llc/component-examples-9c4b3bb3b308
https://medium.com/eightshapes-llc/component-design-guidelines-eca706100e7c
https://designnotes.blog.gov.uk/2018/11/05/how-we-document-components-and-patterns-in-the-gov-uk-design-system/
Als kleine Unterhaltung für Zwischendurch eine Liste der dunklen Seiten der GUI Entwicklung
https://icons8.com/articles/most-hated-ui-ux-design-pattern/
The Bullshit Web ist ein schöner “Rant” über überfrachtete Webseiten mit teilweiser Schuldzuweisung der Werbebanner Industrie. Ein heimnetzbasierter Werbeblocker im Router könnte an dieser Stelle sicherlich ein wenig helfen dieses Problem in den Griff zu bekommen.
https://pxlnv.com/blog/bullshit-web/
Dorian Peters von Positive Computing hat eine schöne Übersicht der verschiedenen User Engagement Kategorien auf Twitter geteilt. Gute Liste um Personas und Touchpoints besser definieren zu können
https://twitter.com/dorian_peters/status/1026856777642635264/photo/1
Es gibt etliche Workshopformate für das Entwickeln neuer Features und User Szenarios. Google setzt sehr gerne “Design Sprints” für komplexe Probleme an, wofür es noch keine Lösung existieren. Anbei eine gute Übersicht wann und wie Design Sprints in der Produktentwicklung eingesetzt werden können
https://firebrandtalent.com/blog/2018/07/design-sprint-should-you-be-running-them/
Die persönliche Weiterentwicklung im Beruf ist nicht Alltagsgeschäft, begleitet einen jedoch immer wieder über die Jahre. Ein paar schöne Artikel zum Thema
https://www.smashingmagazine.com/2017/07/missing-advice-when-starting-career/
https://medium.com/@Aman_Gautam/soft-er-skills-that-make-you-a-better-programmer-3f53bb224dab
https://medium.freecodecamp.org/mistakes-i-have-made-as-a-junior-developer-85260bdb992f
https://medium.freecodecamp.org/a-guide-to-developer-productivity-5-healthy-habits-tools-efaec1a2510b
https://css-tricks.com/balancing-time/
https://www.principles.com/principles-for-success/#play
https://www.smashingmagazine.com/2014/09/internal-developer-training-doing-it-right/
https://www.smashingmagazine.com/2015/04/how-to-become-a-ux-leader/
Wenn sich Design und Technologie gegen den User richtet, kann das unschöne Folgen haben. Eine Meinungsreport
https://ourdataourselves.tacticaltech.org/posts/30-on-weaponised-design/
Events und Weiterbildung
VueJS Konferenz Tag am 23.11.2018 in Berlin (aktuell noch mit Frühbucherrabatt)
https://www.eventbrite.co.uk/e/vuejs-roadtrip-berlin-tickets-43925232553
HTML & CSS & SVG
Eine schöne Übersicht wie man ein Basislevel von Barrierefreiheit in seiner Web App erreichen kann. Am Ende des Artikel sind gute weitere Referenzen rund um barrierefreie UI Komponenten aufgelistet
https://blog.logrocket.com/the-easiest-way-to-keep-your-web-apps-accessible-c2b57506cc2a
Eine Übersicht wie CSS Code methodisch nach ITCSS, BEM, Atomic Design in größeren Webprojekten strukturiert und voneinander entkoppelt werden kann
https://medium.com/gusto-design/creating-the-perfect-css-system-fa38f5bcdd9e via css-tricks.com
Interaktive CSS Grid Cheat Sheet perfekt zum Ausprobieren und Nachschlagen
https://alialaa.github.io/css-grid-cheat-sheet/
http://grid.malven.co/
https://css-tricks.com/snippets/css/complete-guide-grid/
Interessant welche Lösungen alles mit CSS Listen Styling umgesetzt werden können, siehe z.B. das Karussell mit wenigen und vielen Elementen
https://css-tricks.com/solved-with-css-logical-styling-based-on-the-number-of-given-elements/
https://alistapart.com/article/quantity-queries-for-css
Kleiner Codesnippet Tipp für Responsive Bilder mit CSS und media queries. So dass nur die Bilder geladen werden, die relevant für das Endgerät sind
https://medium.freecodecamp.org/time-saving-css-techniques-to-create-responsive-images-ebb1e84f90d5
Schöne Code Beispiele für UI Lösungen mit nur HTML und CSS. JavaScript muss dann wirklich nur noch dort eingesetzt werden, wo nichts mehr ohne den Verhaltenslayer funktioniert
http://youmightnotneedjs.com/
Ein paar Power CSS Tricks für das Stylen von UI Komponenten von Lea in einem mehr als 1Std. Vortrag
https://www.youtube.com/watch?v=vs34f9FiHps&feature=youtu.be
https://leaverou.github.io/talks/even-more-css-secrets/
JavaScript spezifisch
Der Umgang mit Zeit und Timestamps scheint nur auf den ersten Blick trivial. Anbei ein schöner langer Hintergrundartikel warum das Programmieren mit Zeit(einheiten) so ein großes Problem ist. JavaScript macht das Problem dann auch nicht noch einfacher…
https://zachholman.com/talk/utc-is-enough-for-everyone-right
Erste Experimente für den Datenaustausch zwischen zwei Browser Tabs lassen sich bereits im Chrome testen. So wie es aussieht ziehen weitere Browserhersteller hinterher.
https://www.sitepen.com/blog/2018/08/14/cross-tab-synchronization-with-the-web-locks-api/
In ES6 kann man sehr schön über ein Codepattern die Argumente einer Funktion auf Richtigkeit validieren. Sehr hilfreich wenn man eine JavaScript Bibliothek oder anderen stark wiederverwendbaren Code erstellt
https://www.codementor.io/aaronhanson/enforcing-required-function-arguments-in-es6-javascript-mfp67wlpo
https://blog.bitsrc.io/get-better-type-checking-in-javascript-with-the-maybe-type-e7f70b23b505
Kleine feine Auffrischung privaten und öffentlichen Scope von Variablen zu simulieren
https://www.codementor.io/ajaysudani07/private-and-public-scope-in-javascript-lzgppc9js
Ein kostenloses Online Buch zu Code Interpeter, die gute Hintergrundwissen liefert wie die JavaScript und Lua Engines arbeiten. Siehe die beiden Artikel von Mathis Bynens über die unterschieldichen Interpreter Verfahren bei den JavaScript Engines der Browser.
http://craftinginterpreters.com/
https://mathiasbynens.be/notes/shapes-ics
https://mathiasbynens.be/notes/prototypes
10 grundlegende Tipps für den Umgang mit der Entwicklung von JavaScript Projekten und Bibliotheken
https://blog.usejournal.com/10-things-you-will-eventually-learn-about-javascript-projects-efd7646b958a
Software Technik und Architektur
Das Entwickeln einer API hat nicht immer nur mit technischen Rahmenbedingungen zu tun, sondern auch ganz stark mit den Anforderungen der API Nutzer. Anbei ein Reihe von Tipps für das Aufsetzen eines API First Ansatzes
https://nordicapis.com/7-steps-for-building-successful-api-products/
https://medium.com/postman-engineering/api-first-software-development-for-modern-organizations-fdbfba9a66d3
https://medium.com/postman-engineering/integrating-in-an-api-first-world-d5d4b0981a3f
https://medium.com/adobetech/three-principles-of-api-first-design-fa6666d9f694
https://www.thoughtworks.com/insights/blog/analysts-guide-apis
Kleiner Erfahrungsbericht von Ebay über das Arbeiten mit OpenAPI Spezifikation und mit APIs mit großen Abhängigkeiten von anderen Geschäftslogiken
https://www.ebayinc.com/stories/blogs/tech/two-years-later-apis-are-destination/
Eine schöne Erklärung wie mittels Git, Travis und NodeJS eine Produktionspipeline mit Continous Integration und automatischen Tests umgesetzt werden kann. Manche Punkte sind sehr Weblastig, lassen sich dennoch mit Modifikation auch für Web GUIs auf Embedded System anwenden.
https://auth0.com/blog/continuous-deployment-pipelines-and-open-source-node-js-web-apps/
https://martinfowler.com/bliki/ContinuousIntegrationCertification.html
Workflow und Tools
NPX ist ein hilfreiches Tool um NPM und Consolenprogrammen im NodeJS Ecosystem lokal auszuführen. Eine gute Übersicht welche Use Cases dafür interessant sind
https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b
Webhint.io ist ein neues Tool um die eigene Web App zu überprüfen und erste Qualitätstest (auch für Barrierefreiheit) durchzuführen
https://webhint.io/
https://webhint.io/#scanner-input ==> Demo Tool zum Ausprobieren
https://christianheilmann.com/2018/08/07/webhint-io-hinting-at-a-better-web/
https://medium.com/webhint/webhint-a-hinting-engine-for-the-web-ef0d3fa32ea9
https://webhint.io/docs/contributor-guide/how-to/hint/
Schöne Blog Artikel Serie über die Grundfunktionen von Webpack 4
https://wanago.io/2018/07/16/webpack-4-course-part-one-entry-output-and-es6-modules/
https://wanago.io/2018/07/16/webpack-4-course-part-two-webpack-4-course-part-two-loaders/
https://wanago.io/2018/07/23/webpack-4-course-part-three-working-with-plugins/
https://wanago.io/2018/06/04/code-splitting-with-splitchunksplugin-in-webpack-4/
https://wanago.io/2018/07/30/webpack-4-course-part-five-built-in-optimization-for-production/
https://wanago.io/2018/08/06/webpack-4-course-part-six-increasing-development-experience/
https://wanago.io/2018/08/13/webpack-4-course-part-seven-decreasing-the-bundle-size-with-tree-shaking/
Kryptische Commit Messages können im schlimmsten Fall die Vorteile von Code Version Management aufheben. Ein kleiner Styleguide kann in dieser Sache sehr helfen. Wie z.B. die vorangestellte Ticketnummer und weitere hier vorgestellten Angaben
https://jaxenter.de/leitfaden-commit-messages-scm-73887
https://chris.beams.io/posts/git-commit/
https://dev.to/sublimegeek/do-your-commits-pass-this-simple-test-4ak2
Visual Studio legt immer weiter zu was Funktionsumfang angeht. Anbei eine schöne Seite die ein paar Killerfeature in VS Code vorgestellt und näher erklärt
https://vscodecandothat.com/
https://docs.microsoft.com/en-us/visualstudio/liveshare/reference/use-cases => Use Cases für kollaboratives Programmieren mit VS Code
Ein gutes DotFiles Management kann das Aufsetzen einer neuen Entwicklungsumgebung massiv erleichtern. Zudem kann eine Dot File Basiskonfiguration zum freien Forken kann dem Start für neue Entwickler im Unternehmen massiv erleichtern.
https://medium.freecodecamp.org/dive-into-dotfiles-part-1-e4eb1003cff6
https://medium.freecodecamp.org/dive-into-dotfiles-part-2-6321b4a73608
https://dotfiles.github.io/
https://github.com/webpro/awesome-dotfiles
Common Workflow Languange (CWL) ist eine formale Sprache um (digitale) Arbeitsprozesse über technische Infrastrukturen hinweg zu beschreiben. Vielleicht hilfreich für die ein oder andere Dokumentation eigener interner technischen Arbeitsabläufe. Eine gute Alternative zu BPML?!
https://www.commonwl.org/
https://github.com/common-workflow-language/common-workflow-language
https://de.wikipedia.org/wiki/Business_Process_Modeling_Language
Web Security
Eine Reihe sehr guter Security Ansätze für NodeJS Backend Apps, die sich auch für einige Frontend und andere Backend Techstacks anwenden lässt. Mein Favorit ist die ES-Lint Security Regel, die einen auch vor unschönen RegEx Ausdrücken schützen soll.
https://medium.com/@nodepractices/were-under-attack-23-node-js-security-best-practices-e33c146cb87d
Sehr schöner Vergleich über Pro und Kontras im Umgang Benutzerrechten mit JsonWebTokens und im API Kontext. Offen diskutiert wird, ob jedesmal der Token inkl. Benutzerrechten neu geprüft werden muss oder ob die Rechte in den Token hardcodiert sein dürfen
https://codeburst.io/serverless-microservices-auth-problem-dae81f2340b0
Ein kleiner Einblick wie Nextcloud versucht schadhafte Programme in der Dateiverwaltung zu finden und zu verarbeiten. Sicherlich auch ein interessanter Anwendungsfall für unsere NAS
https://nextcloud.com/blog/fighting-ransomware-with-guided-undo-nextcloud-in-research-protecting-users/
Sicherheit von WPA2 ist Neuerdings wieder in Kritik geraten und der Ruf nach WPA3 wird größer. Der vollständtigkeithalber anbei die Berichte
https://www.heise.de/newsticker/meldung/WPA2-und-WLAN-Sicherheit-Direkter-Angriff-auf-WLAN-Router-4130759.html
https://medium.com/@billbuchanan_27654/the-beginning-of-the-end-of-wpa-2-cracking-wpa-2-just-got-a-whole-lot-easier-55d7775a7a5a
https://github.com/techge/wifi-arsenal ==> schöne Liste mit Wifi Tools und teilweise auch Hacks
https://blog.freifunk.net/2018/08/12/gsoc-2018-easily-expandable-wids-final-report/ -> Freifunk in Wifi Attack Detection Work in Progress Projekt
VueJS spezifisch
Die VueJS Command Line Tool ist nun offiziell in der Version 3.0 released. Soviel hat sich nicht mehr geändert, eher ging es um Stabilität und VueJS UI ein Update bekommen. Anbei eine Vorstellung
https://www.youtube.com/watch?v=cP9bhEknW_g (10min)
https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb
https://naturaily.com/blog/pwa-vue-cli-3 => Beispieleinsatz der CLI für PWAs
https://www.youtube.com/watch?v=Cpc9AZg2KOM => Tieferer Einblick
Formulare werden bei den Router UI Konfiguration sehr häufig benutzt und wiederholen sich auch immer wieder. Eine Automatisierung und Generierung von Formularen ist an dieser Stelle hilfreich um konsistent und schnell neue Admin Masken zu erstellen. Anbei ein Bericht wie man (JSON) Schemas für die Formulargeneration in Vue einsetzen kann
https://blog.sourcerer.io/using-schemas-to-generate-your-forms-with-vue-and-more-e1cc28f2e8da
https://www.youtube.com/watch?v=HXhjTcM7Xe0 ==> Passender Vortrag aus dem Berliner VueJS Meetup
https://github.com/gustojs/formics
https://medium.com/@logaretm/authoring-validatable-custom-vue-input-components-1583fcc68314
https://baianat.github.io/vee-validate/ ==> Validierung von Form Inputs
https://monterail.github.io/vuelidate/#getting-started ==> Weitere Validierung Bibliothek
https://github.com/guAnsunyata/vue-universal-validator
Sehr gutes Praxisbeispiel für die Implementierung eigener VueJS Direktiven, sei es für eine “Long-Press” Geste für Touchscreens oder ein lazy-load Verhalten für Bilder
https://blog.logrocket.com/building-a-long-press-directive-in-vue-3408d60fb511
https://benjamintaylorportfolio.netlify.com/#/post/lazy-loading-images-with-vue-js-directives
https://calibreapp.com/blog/2018-08-16-native-lazy-load/
https://lisilinhart.info/posts/touch-interaction-vue/
https://codepen.io/lisilinhart/pen/wxRQBo
https://github.com/vuejs/vue-touch
Für manchen Container oder Layoutkomponenten soll das HTML Root Element (li oder div zum Beispiel) flexibel bleiben um semantisch sinnvolles HTML für die UI Komponenten zu erzeugen. Dieser Blogpost beschreibt das Problem schön und dessen PHP Lösung. Meiner Meinung nach kann man dies mit einem Higher Order Komponenten Pattern in VueJS viel schöner lösen
https://colloq.io/blog/better-design-system-component-semantics
https://flexboxgrid.vivid-websolutions.nl/ ==> Beispiel Layout Tooling mit VueJS
Generierung von VueX Statemodulen und dessen automatischer Integration in die Web Apps. Interessanter Ansatz…
https://www.codementor.io/thomas478/vuex-the-enterprise-setup-m90zecnd1
https://www.codementor.io/thomas478/vuex-the-enterprise-setup-pt-2-ma30x5nkh
Beispiel VueX Authentifizierungs Statemodul für geschützte und öffentliche Seiten
https://scotch.io/tutorials/handling-authentication-in-vue-using-vuex
Beispiel eines VueJS Design System mit Boostrap 4. Die Dokumentation sieht sehr gut aus und dient sicherlich als eine gute Inspiration
https://demos.creative-tim.com/vue-argon-design-system/documentation/
https://github.com/creativetimofficial/vue-argon-design-system
https://twitter.com/jora_cristi/status/1027504210370326528
Beispiel eines internen Firmen VueJS Design System
https://3yourmind.github.io/kotti/
https://github.com/3YOURMIND/kotti
Das VueJS Core Team und andere VueJS Tool Entwickler haben sich in Warschau für eine Woche getroffen um das VueJS Tooling zu verbessern. Anbei eine Zusammenfassung und eine Auflistung von fünf Tools für den VueJS Alltag, wobei das erste Tool Bitsrc ganz klar als Werbung angesehen werden kann. Die anderen Toolbeschreibungen sind schon ganz hilfreich
https://medium.com/the-vue-point/the-first-vue-js-sprint-summary-10c260bf642a
https://blog.bitsrc.io/5-tools-for-faster-vue-js-app-development-ad7eda1ee6a8
Ausführliche Tutorial and Best Practices für VuePress
http://vuepressbook.com/
https://vuepress.vuejs.org/
Exotisches
Ein schöner Bericht über WebAssembly als neues performantes Werkzeug für die Web Plattform. Der Artikel beschreibt sehr schön die Anwendungsfälle und Stärken von Web Assembly im Vergleich zu puren JavaScript Implementierungen.
https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71
Schöner Podcast zum Einstieg in dezentrale Netze vom Datenkanal aus Jena. Der Router als Werkzeug wird auch zwischendurch mal abgefrühstückt.
https://datenkanal.org/archives/110-DK73-Dezentrale-Systeme.html
https://kumu.io/DigLife/decentralized-tech#ecosystem
https://hacks.mozilla.org/2018/07/introducing-the-d-web/
https://hacks.mozilla.org/2018/08/dweb-social-feeds-with-secure-scuttlebutt/
https://hacks.mozilla.org/2018/08/dweb-building-a-resilient-web-with-webtorrent/
Interessanter OpenSource Ansatz eines Media Server Infrastruktur mit modularer Ausstattung
http://www.tooloop.org/
https://www.youtube.com/watch?v=RZDO1x2Ob7s
https://twitter.com/vollstock/status/1016658663539400704
Kleines Tutorial wie man sein eigenen Mini SIP Server für VoiceOverIP aufsetzen kann. Lädt zum Experimentieren ein
https://myvoipapp.com/docs/faq/setup_ippbx_for_small_business_step_by_step/index.html
https://en.wikipedia.org/wiki/Peer-to-peer_SIP
https://blog.freifunk.net/2018/07/07/meshenger-p2p-local-network-messenger-update-2/ => Möglicher Anwendungsfall (wenn auch nicht mit VoIP)
https://github.com/dakhnod/Meshenger
Krypto Mining mit PiHole im eigenen Netzwerk verhindern
https://www.heise.de/newsticker/meldung/Raspberry-Pi-filtert-Krypto-Miner-Co-im-gesamten-Netzwerk-4050692.html
Für die Tüftler unter uns an Liste von interessanten YouTube Vlogs zu Hacks rund um den Raspberrry Pi
https://www.raspberrypi.org/blog/10-raspberry-pi-youtube/
