Hallo,
wieder mal eine stark impulsgetriebener Haufen an Artikeln und News. Diesmal mit den Schwerpunkten Wertschätzung von (Software, UX, Hardware) Design Themen im Unternehmen, eine kompakte Sammlung zum aktuellen Stand des Web Komponenten Standard vom W3C, vielen Links und Hinweise zum Workflow Verbesserung im Umgang mit Git und Design + Entwicklersoftware. Zudem stehen in den nächsten 2-3 Monate sehr interessante (netzwerk-relevante) Veranstaltungen in Berlin an.
Schaut selbst, pickt euch eure Lieblingsthemen heraus. Bis dann viele Grüße
Flo
Allgemein
Erfahrungsbericht von Github im Bereich UI Entwicklung über die Erstellung und Nutzung von Design Systemen. Ein Einblick wie Entwickler und Designer ihre übergreifende Prozesse gestaltet haben.
https://medium.com/@broccolini/design-systems-at-github-c8e5378d2542
Welchen Wert und welche Wertschätzung und Rolle dem Design innerhalb eines Unternehmens zugeschrieben wird, kann stark variieren. Anbei Kollektion wie man “pro-aktiv” diese Rolle stärken kann
https://articles.uie.com/yes-alan-there-is-an-roi-for-ux-design/
https://jobs-to-be-done.com/ => “Jobs to be done” für eine ergebniss-orientierte Methode zwischen Design und ProduktManagement
https://jobs-to-be-done.com/the-5-tenets-of-jobs-to-be-done-theory-ba58c3a093c1
https://www.youtube.com/watch?v=z9I9hMHIouo => Design is [Business] – The Merging Reality of Design and Business bei Google
https://www.youtube.com/watch?v=mJB83EZtAjc => Zielsetzung und Wertschätzung methodischen Verwalten mit Zielen und Resultaten (Objectives and Key Results -> OKR)
Entwicklung eines besseren Nutzerverständnis und Touch Points eines Produktes mit Empathy Maps. Diese Aspekte sollten in der Konzeption neuer Features ein Pflichtinhalt sein
http://www.uxbooth.com/articles/empathy-mapping-a-guide-to-getting-inside-a-users-head
http://www.elon.edu/e-web/imagining/surveys/2018_survey/Digital_Life_And_Well-Being_Home.xhtml ==> Studie zu den Anforderungen und Bedürfnissen des Digitalen Lifestyles
Sehr guter Artikel über das Umsetzen von “Loading” und anderen “Warte Komponenten” in unseren Apps. Mit umfassender Beschreibung unterschiedlicher Zustände (State Management) und welche Arten von UI Komponenten für welche Zustände benutzt werden sollte. Warten und Nachladen ist bei Router UIs ein gängiges Muster und sollte einheitlich und konsistent angewandt werden. Dieser Artikel liefert eine gute Hilfestellung zu diesem Thema
https://medium.com/@fkadev/managing-complex-waiting-experiences-on-web-uis-29534d2d92a8
Gute Punkte zum Design und Entwurf von Landing/Start Seiten. Welche Probleme/Anforderungen und Schlüsselinformationen sind relevant für netzwerk-basierte Dashboard Designs.
https://www.intercom.com/blog/12-steps-to-creating-landing-pages-that-convert/
https://www.landingfolio.com/category/gallery/
https://dribbble.com/tags/app_landing_page
Komponenten-orientierte Entwicklung scheint sich immer mehr als De-facto Standard für die UI Entwicklung durchsetzen. Der offizielle Web Componenten Standard wird zum Jahresende von allen “Major Browsern” unterstützt werden. Mit Hilfe von Polyfills kann man sogar große Teile von Web Componenten bis IE 11 einsetzen. Für große Teams und stark fragmentierte Produktlandschaften (Stichwort: Micro Frontends) lohnt sich die Beobachtung dieses Standards sehr. Die Entwicklung dieses Standards sollte man für eine langfristige & nachhaltige Web UI Entwicklung immer im Auge behalten. Hier der aktuelle Stand
https://blog.revillweb.com/extending-native-dom-elements-with-web-components-233350c8e86a
https://www.smashingmagazine.com/2018/07/reusable-components-custom-elements-shadow-dom-npm/ = Wiederverwendbarkeit und Austausch von Web Komponenten
https://bendyworks.com/blog/tale-of-four-components => Beispiel einer erweiterten Image Web Komponente
https://developers.google.com/web/fundamentals/web-components/customelements => Getting started
https://www.sitepen.com/blog/2018/07/06/web-components-in-2018/ => u.a. Slots und Container Komponenten
https://github.com/webcomponents/webcomponentsjs/blob/master/README.md
https://github.com/webcomponents/custom-elements
https://github.com/github/custom-element-boilerplate
https://auth0.com/blog/creating-web-components-with-stencil/ => Stencil Component Compiler und Build Tool
https://scotch.io/tutorials/server-side-web-components-how-and-why => Server Side Rendering von Web Componenten
RAIL als Leitfaden und gute Hilfestellung für die Erstellung eines Web Performance Budget
https://developers.google.com/web/fundamentals/performance/rail
Das “Open Garden” Projekt ist der Versuch das AirBnB der Wifi Netzwerke zu werden. Mit dem Ziel ein neuer Konkurrent zu den großen Internet Service Provider zu etablieren
https://www.opengarden.com/
https://inthemesh.com/archive/open-garden-be-the-isp-you-want-to-see-in-the-world/
Erster kompletter OpenSource und OpenHardware basierter Router immer näher Richtung dem Ziel -> Auslieferung
https://librerouter.org/article/the-librerouter-is-almost-out-who-wants-one/
Der Raspberry Pi ist schon eine gute Lernumgebung und vor allem noch eine bessere Rapid Prototyping Platform für Interaction Designer und Embedded Devices. Anbei eine gute Beschreibung für Wifi Router Prototyping und neue Anwendungen schnell umzusetzen, um sie schlussendlich mit Usertests und Stakeholder Meetings zu evaluieren.
https://www.hackster.io/mehedishakeel/make-smart-wifi-router-using-raspberry-pi-3-c335e6
https://github.com/Phoenix1747/RouteryPi
Events und Weiterbildung
Critical Engineering – Wifi Wilderness Schulung von 3-5. August (noch 2 freie Plätze)
Bauen und Protypen von Netzwerkgeräten erlernen
https://criticalengineering.org/intensives/2018/
Kostenloser Online E-Learning Kurs zu Atomic Design und Pattern Labs
https://thegymnasium.com/courses/course-v1:GYM+014+0/about
Electro Magnetic Field Camp (EMF), das Elektronik Hacker und Tüftler Camp, am 31.8-2.9 in England. Wenn man einen Workshop anbietet kommt man noch rein
https://www.emfcamp.org/
Decentralized Web Summit – Ende Juli und Anfang August in der USA und per Livestream
https://decentralizedweb.net/
Nextcloud Conference 2018 in Berlin am 23-30. August für eigene Mini Cloud und Fileserver Anwendungen
https://nextcloud.com/conf/
https://nextcloud.com/blog/nextcloud-conference-2018-contributor-travel-support-program/
https://eventyay.com/e/77d26f89/ => Ticketshop
Radical Networks Conference in Berlin im Oktober – Das Treffen der Netzaktivisten, -künstler usw.
https://radicalnetworks.org/
Beyond Tellerrand 2018 Anfang November in Berlin. Eine Konferenz für neue innovative Themen im Web und UX Design
https://beyondtellerrand.com/events/berlin-2018
HTML & CSS & SVG
Typografie und der richtige Umgang mit Text und Fonts für Screens
https://learnui.design/blog/ultimate-guide-font-sizes-ui-design.html
https://play.typedetail.com/
https://www.smashingmagazine.com/2018/07/smashingconf-videos-web-fonts-performance/
http://typographyhandbook.com/
Toogle Button und Micro UI Animations mit CSS
https://blog.logrocket.com/css-transitions-101-lets-animate-a-toggle-button-icon-333967f5b971
Allgemeines zu CSS Animation
https://flaviocopes.com/css-transitions/
Utility First CSS ist ein Ansatz wiederverwendbare Stylings für UI Komponenten zu etablieren. Laut dieser Artikelsammlung führt dies zu weniger Code und besser verwaltbaren Stylings
https://medium.freecodecamp.org/how-i-dropped-250kb-of-dead-css-weight-with-purgecss-28821049fb
https://frontstuff.io/in-defense-of-utility-first-css ==> Warum Utility First
https://tailwindcss.com/ =>> Exemplarisches CSS Utility First Framework anstatt Boostrap
https://www.purgecss.com/ => Build tool
https://flaviocopes.com/tailwind-setup/
https://flaviocopes.com/vue-tailwind/
CSS Layout und Grid Features werden hoch gefeiert, hier ein paar super Vorträge von Rachel Andrew und eine Google Case Study
https://noti.st/rachelandrew/videos
https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/ => CSS Grids im Internet Explorer
https://css-tricks.com/little-tip-draw-your-grid-in-ascii-in-your-css-comments-for-quick-reference/ => Dokumentation CSS Grid Layout im Code
https://www.smashingmagazine.com/2018/05/guide-css-layout/ => Allgemeine Übersicht zu CSS Layout
https://medium.com/google-design/google-photos-45b714dfbed1 ==> Layout am Beispiel Google Photo App
JavaScript spezifisch
Listen Array Features wie filter, map, find usw. sind Alltagsaufgaben, hier nochmal eine gute Übersicht zur Array API
https://www.codementor.io/frugencefidel/10-javascript-array-methods-you-should-know-lfb9534os
Kopieren von Objekten ist in JavaScript und dessen Call by Reference manchmal verwirrend. Anbei eine Denkstütze
https://flaviocopes.com/how-to-clone-javascript-object/
https://www.mediaevent.de/javascript/call-by-value-call-by-reference.html
Vorgeschaltetes Type Checking in JavaScript. Ein Implementierungsvorschlag:
https://blog.bitsrc.io/get-better-type-checking-in-javascript-with-the-maybe-type-e7f70b23b505
Erfahrungsbericht aus 2 Jahren Funktionale Programmierung mit JavaScript
https://hackernoon.com/two-years-of-functional-programming-in-javascript-lessons-learned-1851667c726
Die schlechte / böse Seite von ES6 oder besser gesagt ein paar Fallstricke mit der Neuen JavaScript Version
https://benmccormick.org/2018/06/05/es6-the-bad-parts/
Decorator sind auf dem besten Weg von TypeScript auch ein JavaScript Features zu werden. Decorator können Functional Programming und auch Framework Funktionen stark erleichtern. Auch Beispiele von anderen Technologien erleichtern die Power dieses Features zu erkennen (nicht nur syntactic sugar)
https://codeburst.io/decorators-runtime-order-c7f0d62df19d => Einführung und Beispiel Decorators JavaScript
https://www.sparkbit.pl/typescript-decorators/ => TypeScript Doku
https://medium.com/coding-blocks/writing-vuex-modules-in-neat-typescript-classes-9bf7b505e7b5 => TypeScript und VueX
https://toddmotto.com/angular-decorators => Decorators haben eine Hauptrolle bei Angular Apps
https://realpython.com/primer-on-python-decorators/ => Am Beispiel Higher Order Functions
Prinzipien von Metatags und Decorators im alten Flex Framework genauer erklärt
http://krasimirtsonev.com/blog/article/as3-using-creating-custom-meta-metadata-in-flex
http://krasimirtsonev.com/blog/article/as3-using-creating-custom-meta-metadata-in-flex-part2
Unicode und UTF-8 Verarbeitung mit JavaScript
https://flaviocopes.com/javascript-unicode/
Software Technik und Architektur
Schöne Übersicht über gängige Design Patterns in der App Entwicklung mit den entsprechenden Anwendungsfällen
https://dev.to/aershov24/9-unusual-design-patterns-interview-question-with-answers-3gjl
Lesbarkeit und Ergonomie von verschachtelten (nested) Code erhöhen
https://dev.to/gonedark/untangling-nested-code-1h0a
Gute Einführung in die grundlegende Architektur Muster und Aufgaben einer komplexen Webanwendung. Auch wenn Embedded Netzwerkgeräte ein Spezialfall sind, gibt es hier einige ähnlichen Aspekte von den man lernen kann
https://engineering.videoblocks.com/web-architecture-101-a3224e126947
Workflow und Tools
Teamarbeit mit Git Prozessen und Begrifflichkeiten (Developer, Feature Branches usw.) sehr schön erklärt und zusammen gefasst
https://t3n.de/news/git-workflows-zusammenarbeit-1095433/
http://tom.preston-werner.com/2009/05/19/the-git-parable.html
In großen Projekten mit unterschiedlichen Versionierung und Abhängikeiten spielt der Monorepo Ansatz seine Stärken aus. Mit Lerna kann dies auch im Web Ecosystem umgesetzt werden. Anbei eine Einführung in diesen Ansatz der Code- und Projektverwaltung. Man könnte so unterschiedliche Plugins, Componenten, Backends, Frontends und Styleguides in einem Repo mit unterschiedlichen Build Configs verwalten (Wenn ich es richtig verstanden habe)
https://medium.com/@maoberlehner/monorepos-in-the-wild-33c6eb246cb9
https://www.youtube.com/watch?v=7Lr8xYPKG5w => Modularity and Monorepositories
https://lernajs.io/ => Verwaltung Tool
https://segment.com/blog/goodbye-microservices/ => Erfahrungsbericht in der Mitte warum zum Monorepo Ansatz gewechselt wurde
Git Workflow mit Visual Code
https://scotch.io/tutorials/git-integration-in-visual-studio-code
https://www.youtube.com/watch?v=wMqukSKYcvU&feature=youtu.be
Ausführlicher Vortrag zum Debuggen und Profilin von Web Apps mit Chrome Canary
https://www.youtube.com/watch?v=pnVZs-Tapq8
https://code.visualstudio.com/blogs/2018/07/12/introducing-logpoints-and-auto-attach => unter anderem Debug Config mit Chrome
In manchen Unternehmen gibt es eine eher Introvertierte und Einzelkämpfer geprägte Entwicklerkultur. Anbei einige Tipps wie in einer solchen Umgebung doch eine gewisse Qualität gewährleisten kann
https://vickylai.com/verbose/how-to-set-up-a-short-feedback-loop-as-a-solo-coder/
Checkliste für die Auslieferung von Webanwendungen. Wann ist eine Webanwendung Produktions-fertig. Ein paar Orientierungspunkte
https://speakerdeck.com/gergelyke/node-dot-js-production-checklist
https://www.scrum-events.de/was-ist-die-definition-of-ready-dor.html => Definition of Ready aus dem SCRUM Prozess
https://www.scrum-events.de/was-ist-die-definition-of-done-dod.html => Definition of Done aus dem SCRUM Prozess
Für eine gute Zusammenarbeit ist eine Dokumentation von Design und Code unausweichlich. Je nach Anwendungsfall gibt es hierfür unterschiedliche Tools um Codebausteine, Codesnippets oder andere App Prototypen miteinander auszutauschen. Eine kurze Auflistung
https://carbon.now.sh/ => Code Snippets für Präsentationen
https://gist.github.com/ => Gute Codesnippet Verwaltung
https://codesandbox.io/ => Web Frontend Frameworks Beispiele (React, VueJS usw.)
https://glitch.com/ => Fullstack Beispiele mit NodeJS, Webpack (und Python)
https://asciinema.org/ | https://github.com/asciinema/asciinema-player => Command Line / Terminal Dokumentation
https://coderpad.io/ | https://code.visualstudio.com/blogs/2017/11/15/live-share => Gemeinsames Echtzeit Coden
Automatisierung ist stark verbunden mit Standardisierung und Verallgemeinerung von Prozessen. Bei wiederkehrenden und homogenen Aufgaben macht es Sinn diese zu optimieren. Vor allem bei der Prototype und UI Entwicklung zwischen UX Designer und Fronend Entwicklern gibt es noch viele offene Baustellen zur Optimierung. Anbei eine Auflistung von Automatisierung Tools für die Workflow Verbesserung
https://dennisreimann.de/articles/uiengine-1-0.html => UI Engine als erster Aufschlag Prototype, Design System und Enwicklungsprozesse besser automatisiert abzuwickeln
https://github.com/dennisreimann/uiengine
https://www.youtube.com/watch?v=OKHAhIQLvjU => Demo Video
https://uiengine.uix.space/
Automatisierung Ansätze mit NodeJS
https://medium.com/dailyjs/how-i-automated-my-job-with-node-js-94bf4e423017
https://codeburst.io/building-a-node-js-interactive-cli-3cb80ed76c86 => eigene Terminal Anwendung bauen mit NodeJS
Gängige kostenpflichtige Design Programme aufmotzen und optimieren für die UI Entwicklung
https://github.com/brainly/html-sketchapp | https://github.com/brainly/html-sketchapp-style-guide => Sketch Vektor Programm aufbohren
https://medium.com/adobetech/how-to-build-a-node-js-server-in-a-panel-ba1d63ea67e2 => Photoshop per NodeJS mit Server verbinden
Für Open Source Design Programme gibt es sehr interessante Schnittstellen zu erweitern.
https://inkscape.org/de/entwickeln/erweiterungen/ => Vektoren Programme
http://wiki.inkscape.org/wiki/index.php/Script_extensions
http://wiki.inkscape.org/wiki/index.php/PythonEffectTutorial
https://docs.krita.org/en/user_manual/python_scripting/introduction_to_python_scripting.html => Für Pixel und Illustration orientierte Programme
Einrichtung eines Device übergreifendes Testings mit Webpack und Browsersync. Vielleicht auch für die Einrichtung interner Test/Device Labs geeignet
https://browsersync.io/
https://www.npmjs.com/package/browser-sync-webpack-plugin
https://survivejs.com/webpack/developing/webpack-dev-server/
https://gist.github.com/christopher4lis/3358d92395d686375c50f7ebb218f1dc
Web Security
Bei einem weitverbreiten ES-Lint Plugin hat sich ein Wurm/Virus eingenistet. Bitte überprüfen ob diese Version nicht irgendwo in Build Tools eingesetzt wird
https://nodesource.com/blog/a-high-level-post-mortem-of-the-eslint-scope-security-incident
https://jamie.build/how-to-build-an-npm-worm => genauere Beschreibung des Falles und die Auswirkung
Was machen wenn der JWT-Token (oder die SID) verloren geht? Anbei eine Handlungsstrategie
https://developer.okta.com/blog/2018/06/20/what-happens-if-your-jwt-is-stolen
Passwörter sollten nie unbearbeitet (Plain Text) irgendwo abgelegt werden. Die Bibliothek bzw. Tool bcrypt hilft einem dabei Passwörter sicherer abzulegen
https://auth0.com/blog/hashing-in-action-understanding-bcrypt/
https://www.kussin.de/security/ultimative-passwort-hashing-guide-in-2017.html => kleine Hintergrundinfo
https://github.com/mikejsavage/lua-bcrypt | https://github.com/leafo/luabcrypt
Die “Ende-zu-Ende” Verschlüsselung einmal gut erklärt mit dazu passenden Anwendungsbeispiele untermauert
https://blog.craftlab.hu/the-ends-of-encryption-d87419b540ff
https://fileroom.io/about => P2P File Transfer innerhalb von Wifi Netzen wären interessant dafür
https://www.hellohub.com/ => Lokaler “Near-by” Peer2Peer Messenger App (aktuell auf Bluetooth Basis)
VueJS spezifisch
Kostenloses VueJS Handbuch
https://flaviocopes.com/page/vue-resources/
Sammlung von Vue Musterlösung für den alltäglichen Gebrauch
https://github.com/learn-vuejs/vue-patterns
Schöne Orientierung des Themenspektrum eines VueJS Developers, besonders mit Hilfe einer Vue Starter Vorlage
https://flaviocopes.com/vue-developer-roadmap/
https://github.com/devCrossNet/vue-starter => inkl. guter NPM CLI Scripts Workflows für die Qualitätssicherung
https://www.youtube.com/watch?v=NM2cSBKRtcY => Vue Starter Talk @ Berlin VueJS
Eine weiterer schöner Einblick in das neue Verwaltungstool für VueJS Projekte
https://morningstar.engineering/vue-ui-a-first-look-916600d9a918
Formular Verarbeitung ist in Angular fester Bestandteil. Für VueJS ist man auf eine eigene Implementierung oder 3rd Party Bibliotheken angewiesen. Anbei eine gute Übersicht zum Thema
https://blog.webf.zone/vue-js-forms-components-and-considerations-d81b3ffe9efb
https://monterail.github.io/vuelidate/#getting-started
https://jsonforms.io/docs/intro ==> Beispiel eines Formular Generators mit JSON Schemas
Präsentation über VueJS und REST APIs
https://speakerdeck.com/imanhodjaev/vue-and-rest-api-patterns
https://restapitutorial.com/ => gute Nachschlageseite
Globales (S)CSS in die Vue Komponenten integrieren
https://vueschool.io/articles/vuejs-tutorials/globally-load-sass-into-your-vue-js-applications/
Asynchrone VueJS Komponenten zur “Runtime” laden inkl. Error und Loading State Management
https://vueschool.io/articles/vuejs-tutorials/async-vuejs-components/
Eine anfängerfreundliche Einführung in das automatisierte Testen von Vue Apps mit Mock-up Funktionen
https://www.codementor.io/bahdcoder/a-gentle-introduction-to-testing-vue-applications-kood8xmk3
Simulieren (Stubbing) von VueJS Komponenten für automatisierte Tests. Hilfreich für verschachtelte Komponenten mit Child/Parent Beziehung
https://itnext.io/stubbing-vue-components-in-vue-test-utils-6e9442e094c3
Animierter Temperatur Slider mit SVG, CSS und ein bissl VueJS
http://ederdiaz.com/blog/2018/07/11/making-an-animated-slider-wotw/
https://scotch.io/tutorials/getting-started-with-component-transitions-in-vue ==> Vue CSS Transitions
https://www.svgator.com/ ==> SVG Animation Tool (kostenpflichtig)
Rendering von PDFs mit VueJS
https://rossta.net/blog/building-a-pdf-viewer-with-vue-part-1.html
https://rossta.net/blog/building-a-pdf-viewer-with-vue-part-2.html
Eine ganz individuelle Vue JS App Case Study – gut zum Lernen von VueJS
https://davestewart.github.io/app-diary/#/
Vue Componenten Direktive für Tastatur Steuerung
https://github.com/twcapps/vue-spatialnavigation
Lua
Ein schönes Beispiel wie die C/C++ Open Frameworks API mit Hilfe von Lua Bindings stark vereinfacht wurde. Schöne Inspiration wie Lua als Scripting Sprache für das vereinfachen komplexer C/C++ API Anwendungsfälle modular abstrahiert bzw. vereinfacht werden kann. (Läuft angeblich auch auf iOS Geräten)
http://danomatika.com/code/loaf
https://github.com/danomatika/ofxLua
https://github.com/danomatika/loaf
Exotisches
Schöne Einführung in das DAT Protokoll als dezentrales Node Fileserver und Web App Prinzip mit Versionierung Features. Interessante Erweiterung für Mini NAS und Fileserver
https://dev.to/jaybeekeeper/learning-about-dat-protocol-and-decentralization–1ghi
Mithilfe von FTP/WebDAV und anderen File-orientierten Servern (z.B. NAS) lassen sich einfache Web Apps programmieren
https://brendan.abolivier.bzh/your-own-google-drive-docs/
https://nextcloud.com/blog/using-webdav-fs-to-access-files-in-nextcloud/
https://wiki.opnsense.org/manual/how-tos/cloud_backup.html => Backups von Geräten Mithilfe von NAS / Fileservern erstellen
http://unhosted.org/ ==> interessanter Ansatz einer neuen Web App Struktur
Erprobung der 4-Tage Woche in Neuseeland mit nicht mehr ganz überraschenden Ergebnissen…
https://t3n.de/news/vier-tage-woche-testlauf-erfolgreich-1095972/
Gute Gründe einen eigenen und vielleicht auch Unternehmensweiten Entwickler Blog zu betreiben
https://www.indiehackers.com/@coreygwin/3f71fd6c77
Kleine Übersicht wie man (Überwachungs)Kamera im Raum erkennen kann
https://makezine.com/2018/06/29/detect-hidden-cameras/
