Hallo,
Wieder ein Newsletter passend zur Mitte des Jahres. Zur kleinen Aufheiterung und fein kleines Gamification Gimmick für Designer und Entwickler Teams
https://pretendstore.co/products/pocket-developer
https://pretendstore.co/products/pocket-art-director
Neben solchen Gimmicks gibt es diesmal ganz interessante News zu der Verbreitung von Wifi Netzwerke im öffentlichen und privaten Raum, Vernetzung aus Sicht verschiedener Akteure bis zu sehr UI spezifischen Themen, wie z.B. Refactoring und Implementierungen von UIs auf Router Systemen, Schulungen im Bereich Barrierefreiheit und Web Formular Implementierungen und auch die Sicherheitsthemen kommen nicht zu kurz, mit einem neuen/alten Hack mittels Browser gegen Router und Smart Home Geräte im lokalen(!) Netz. In diesem Zusammenhang gibt es noch eine Beispiel für HTTPS im lokalen Netz. Alles andere ist wie üblich, Links mit hilfreichen Kniffen im Bereich JavaScript, CSS und im Umgang mit Git.
Sucht euch das Passende raus und viel Spaß beim Lesen!
Allgemein
Eine Vorstellung wie ein anderer Router Hersteller ihr Web User Interface erstellt, Deployment und Build Prozesse gestaltet und dessen Architektur implementiert (sogar mit VueJs 😉
https://www.youtube.com/watch?v=H_oVArGqZoc
Verbreitung und Verwendung von (offenen) Wifi Netzen im privaten und öffentlichen Raum
https://perspective-daily.de/article/543/
https://design.google/library/connectivity-culture-and-credit/ | https://station.google.com/ => Google’s Sichtweise
https://media.freifunk.net/v/introduction-to-freifunk => Aus Ehrenamtlicher Sicht
https://www.digitale-doerfer.de/downloads/ => Fraunhofer zum Internet/Vernetzung auf dem Land
https://www.bertelsmann-stiftung.de/de/unsere-projekte/unternehmensverantwortung-regional-wirksam-machen/projektnachrichten/digitale-zukunft-auf-dem-land/ ==> Internet auf dem Land
https://www.wifimap.io/ ==> Wifi Netze (weltweite) Übersicht
Das Web als Medium und andere gesellschaftliche Aspekte
https://www.oreilly.com/ideas/cory-doctorow-on-the-fight-for-a-configurable-and-free-internet
https://trust.support/ | https://weise7.org/ => Denkfabrik und Berliner Netzwerk/Internet Kollektive
https://medium.com/twill/rethinking-the-creative-web-our-journey-to-reimagine-web-publishing-for-the-social-web-26c2f347fcd0
https://medium.com/twill/rethinking-the-creative-web-part-2-designing-hopscotch-3ab41f9fbf27
https://medium.com/twill/rethinking-the-creative-web-part-3-towards-a-new-read-write-web-185fe258690b
Der Versuch von Mozilla und anderen Akteuren ein Qualitätssiegel für IoT und Smart Home Geräte zu etablieren
https://www.thingscon.com/iot-trustmark
https://www.thingscon.com/report-a-trustmark-for-iot/
https://iot.mozilla.org/gateway/
Schöne Sammlung und Tips zum Refactoring von User Interfaces aus UI Designer und Entwickler Sicht
https://refactoringui.com/
http://workingdraft.de/312/ | http://workingdraft.de/327/ ==> Gute deutschsprachige Ergänzung zum Thema UI Design und Entwicklung
https://css-irl.info/top-front-end-writers/
Probleme mit der Verallgemeinerung von User Interfaces und wie man damit umgeht. Sehr hilfreich für Design System und Atomic Design Ansätze
http://alistapart.com/article/problem-with-patterns
https://ethanmarcotte.com/wrote/when-patterns-get-weird/
http://bradfrost.com/blog/post/where-to-put-one-off-components/
“Content ist King” kennt man von Nachrichten Portalen. Content First ist auch ein interessanter Ansatz Anforderungen und Prioritäten im User Interface zu definieren
http://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes
Sehr coole Sammlung und Inspiration von User Interfaces für screen-based (Websites und Smartphones)
http://uigoodies.com/
Events und Weiterbildung
Workshop und Schulung zum Design und Umsetzen von guten Formularseiten inkl. Barrierefreiheit im Oktober in Nürnberg.
Bei unseren daten- und formularlastigen Interfaces wirklich sehr interessant
https://colloq.io/events/accessibility-club/2018/nurnberg/3
https://www.facebook.com/events/2048328338819149/?active_tab=about
Accessibility Club Conference im November in Berlin
https://accessibility-club.org/
HTML & CSS & SVG
Eine Kritik am Verkopften HTML und CSS coden… Overthinking in Reinkultur
https://alistapart.com/article/cult-of-the-complex
Ein paar Argumente und Einführung in die “BEM” Naming Convention von CSS
https://www.smashingmagazine.com/2018/06/bem-for-beginners/
https://frontstuff.io/should-you-chain-or-extend-css-classes
PostCSS im Zusammenspiel mit dem Plugin postcss-preset-env ist das JavaScript Babel in der CSS Welt. Mit diesen Tools könnten neue CSS Features benutzt werden. Bei der Generierung (mittels z.B. Webpack) werden dann Polyfills für ältere Browser angewandt. Ein kleinen Eindruck gibt es hier
https://develoger.com/postcss-beyond-the-autoprefixer-93132f8fe5f5
https://preset-env.cssdb.org/
https://cssdb.org/ => Übersicht der Weiterentwicklung des CSS Standards
Schöne Erklärung des CSS Grid Layouts mit einigen schönen Features am Beispiel einer Photogallerie
https://medium.com/deemaze-software/css-grid-responsive-layouts-and-components-eee1badd5a2f
https://cssgrid.io/ => weiter Erklärungen
https://gridbyexample.com/
Ein performantes, angenehmes und flüssiges Scrolling auf Mobilen Endgeräten ist hin und wieder eine großer Herausforderung. Vor allem bei großen Listen oder Photogallerien. Anbei ein paar gute Tipps
https://evilmartians.com/chronicles/scroll-to-the-future-modern-javascript-css-scrolling-implementations
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap_Points
Eine falsche Einbindung von Fonts kann im schlimmsten Fall das Rendering im Browser blockieren oder bläht die Dateigröße der Website unnötig auf. Die Unterstützung von “variablen” Web Fonts in HTML & CSS lädt zum optimieren ein
https://www.zeichenschatz.net/typografie/how-to-start-with-variable-fonts-on-the-web.html
https://www.youtube.com/watch?v=xRMc0JtQEG0 => Perfomante Web Fonts
Unser Loader ist aktuell nicht der schönste, anbei eine barrierefreie Umsetzung eines Loaders mittels CSS
https://codeburst.io/how-to-create-a-simple-css-loading-spinner-make-it-accessible-e5c83c2e464c
JavaScript spezifisch
Schöner deutschsprachiger Podcast zu den Neuerungen in JavaScript
http://workingdraft.de/343/
Fehlertoleranz von JavaScript im Browser ein Feature oder die Hölle?!
https://blog.codinghorror.com/javascript-and-html-forgiveness-by-default/
Umfassende Übersicht zu Promises und Asynchrone Programmierung mit JavaScript
https://www.pineboat.in/post/javascript_promise_fix_callback_async_await_future_error_handle/
Callback Heaven: Provokantes Observable/Event-driven/Asynchrone Pattern für Functional Programming …Eine sehr leichtgewichtige Variante von RxJS mit einem anderen Funktionalen Ansatz.
https://www.youtube.com/watch?v=HssczgaY9BM
https://staltz.com/why-we-need-callbags.html
http://blog.krawaller.se/posts/callbags-introduction/
https://github.com/callbag/callbag
File Upload Beispiel mit Drag n Drop usw. als gutes Beispiel und Dateien auf die Box zu laden
https://github.com/pqina/filepond
Rekursion in Zusammenhang mit Schleifen und Iteration in JavaScript (Stichwörter: Iterator Symbol, yield, Generator Functions, Tail dingsbums)
https://www.youtube.com/watch?v=FmiQr4nfoPQ&feature=youtu.be
Software Technik und Architektur
Schöner Zusammenfassung und Vortrag zum Thema “Readable Code” plus ein wenig Input für einen eigenen Coding Style Guide
https://www.youtube.com/watch?v=P3fqetErxjA
JAMstack beschreibt einen Frontend Architektur Ansatz ganz gut:
Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.
https://jamstack.org/
https://dev.to/leomeloxp/what-is-jam-stack-2957
Sehr gute Tipps zur Strukturierung und Aufbau einer REST API und was es alles bei der HTTP Schnittstelle zu beachten gibt
https://blog.risingstack.com/10-best-practices-for-writing-node-js-rest-apis/
Interessanter Hintergrundbericht zu API und GraphQL Architektur und dessen Umbau bei Medium
https://medium.engineering/2-fast-2-furious-migrating-mediums-codebase-without-slowing-down-84b1e33d81f4
Workflow und Tools
CSS Tricks hat ein paar sehr gute Links zum Arbeiten mit Git zusammengefasst. Von den Basics bis zu Merging, Tagging Workflow Varianten
https://www.git-tower.com/blog/workflow-of-git/ ==> Die Basics zu Git
https://nvie.com/posts/a-successful-git-branching-model/ ==> Branching Workflows mit Git verstehen (Master, Developer Branches bis zum Feature, Bug und Hotfix Branches)
https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow ==> Branch Workflow mit Releases usw.
Automatisierte Code Formatierung mittels Prettier
https://flaviocopes.com/prettier/
https://prettier.io/
Ein deutschsprachiger Austausch über Microsoft Visual Code Editor und ein paar zusätzlichen Helferleins
http://workingdraft.de/341/
https://medium.freecodecamp.org/an-overview-of-visual-studio-code-for-front-end-developers-49a4aa0771fb
https://scotch.io/tutorials/debugging-javascript-in-google-chrome-and-visual-studio-code => Debugging Dream Team Chrome und VS Code
Eine kurze Übersicht über Test und Debug Tools von Barrierefreien Websiten
https://medium.com/pulsar/which-accessibility-testing-tool-should-you-use-e5990e6ef0a
Web Security
HTTPS für IoT Geräte im lokalen Netzwerk ist eine UX Design und technische Herausforderung. Das im lokale Netz laufende Plex Media Center hat dieses Problem ganz interessant mit Wildcard Zertifikaten gelöst
https://blog.filippo.io/how-plex-is-doing-https-for-all-its-users/
https://support.plex.tv/articles/206225077-how-to-use-secure-server-connections/ ==> siehe DNSmasq / DNS Resolver configuration für den Router (uses kinda DNS Rebind)
Schöne Erklärung zu “Einmal” Passwörter und verschiedenen “Zwei Faktor Authentifizierung” Ansätzen
https://medium.freecodecamp.org/how-time-based-one-time-passwords-work-and-why-you-should-use-them-in-your-app-fdd2b9ed43c3
Mit Hilfe des Browsers (durch z.B. Werbepop Ups) können Attacken in lokalen Wifi Netzwerken gefahren werden. Dazu werden DNS Rebind Techniken verwendet um Smart Home Geräte oder Wifi Router zu manipulieren bzw. hacken.
Google Home und weitere Geräte ohne HTTPS oder ohne andere (Passwort)geschützten API sind bereits betroffen. Anbei zwei gute Artikel zum Thema mit Tools zum Reproduzieren der Attacke
https://www.wired.com/story/chromecast-roku-sonos-dns-rebinding-vulnerability/
https://medium.com/@brannondorsey/attacking-private-networks-from-the-internet-with-dns-rebinding-ea7098a2d325 ==> Im letzten Drittel geht es verstärkt um Wifi Router
https://mobile.twitter.com/brannondorsey/status/1009177370274816002 ==> Twitter Diskussion
https://miki.it/blog/2015/4/20/the-power-of-dns-rebinding-stealing-wifi-passwords-with-a-website/
Werkzeuge für das Experimentieren mit DNS (Filter, Blocken usw.)
https://code.google.com/archive/p/google-dnswall/
https://www.opendns.com/home-internet-security/
https://pi-hole.net/ ==> Werbeblocker für alle Geräte im lokalen Netzwerk
VueJS spezifisch
Das neue Vue Command Line Tool in Version 3 ist nun im RC Modus. Die neue umfangreiche Doku wurde nun auch veröffentlicht
https://cli.vuejs.org/
Schöne Zusammenfassung und Übersicht VueJS in bestehende Projekte zu integrieren:
Adding Vue.js to Your Technology Stack
https://www.monterail.com/services/vuejs-development
Tipps und Best Practices wierdervendbare VueJS Komponeten zu schreiben
https://vuejsdevelopers.com/2018/06/18/vue-components-play-nicely/
https://blog.bitsrc.io/how-to-build-vue-components-like-a-pro-fd89fd4d524d
https://vueschool.io/articles/tutorials/5-testing-a-vue-component/324/ => TDD for components
https://alexjoverm.github.io/2017/08/21/Write-the-first-Vue-js-Component-Unit-Test-in-Jest/ => TDD for components
https://medium.com/justfrontendthings/how-to-create-and-publish-your-own-vuejs-component-library-on-npm-using-vue-cli-28e60943eed3 => NPM und VueJS Komponenten
https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/ => VueJS zu Web Componenten
Tailwind CSS liefert eine sehr gute modulare CSS Struktur für das Designen einheitlicher UI Komponenten. Im Zusammenspiel mit VueJS und alten Legacy Code kann das so aussehen
https://stefanzweifel.io/posts/how-to-use-tailwind-css-in-vue-together-with-css-modules
Weiterer Input zur Strukturierung eines mehrsprachigen VueJS Projektes
https://itnext.io/how-to-structure-a-vue-js-project-29e4ddc1aeeb
VueJS Projekt Dashboard zur Command Line
https://blog.usejournal.com/getting-to-know-the-new-vue-cli-3-user-interface-a173b00128bd
Schönes Tutorial zum Programmieren einer Desktop App mit NW.Js und Vue
https://www.youtube.com/watch?v=Eshu9UvUk54&list=PLmJs3lfUmCdT9MyG60Oo6HM7xAn79vwZ0
Exotisches
Arbeitskultur und Technologie im digitalen Entwicklerumfeld kritisch hinterfragt
http://notesfrombelow.org/issue/technology-and-the-worker
https://modelviewculture.com/
Minio ist eine Object Storage Lösung um Dateien im Netzwerk abzulegen. Läuft auch auf einigen NAS System und ist kompatibel mit dem Amazon S3 Bucket (kann sich sogar synchronisieren)
Eine interessante Spielerei selfhosted NAS Systeme oder andere verteilte Fileserver
https://minio.io/
https://blog.alexellis.io/hardened-raspberry-pi-nas/ => Prototype Beispiel mit Schwachen Raspberry Pi
https://www.forbes.com/sites/tomcoughlin/2017/02/14/s3-without-amazon-and-intelligent-scale-out-nas/#79b155ae4f38
Nextcloud liefert als ein schönes Feature “Federated Sharing”, welches verteilte FileServer miteinander in einer GUI verbindet. Ist eine schöne Sache für die Router Apps
https://nextcloud.com/federation/
https://docs.nextcloud.com/server/13/user_manual/files/federated_cloud_sharing.html
https://docs.nextcloud.com/server/12/admin_manual/configuration_files/federated_cloud_sharing_configuration.html
Interessantes Experiment NGINX als Webserver mit Lua auf Router laufen zu lassen. Die OpenWRT Community hat einige interessante Erkenntnisse dazu gesammelt
Könnte auch interessant sein einen Webserver aufzubohren um eine performante API anbieten zu können (Stichwort: URL Rewriting, Reverse Proxy für Selfhosting)
https://forum.lede-project.org/t/luci-on-nginx-compile/14580/84
http://uwsgi.readthedocs.io/en/latest/Lua.html => Durchschleifen von HTTP Socket infos zu Lua
http://uwsgi.readthedocs.io/en/latest/Nginx.html
http://www.iotevolutionworld.com/iot/articles/419813-8-factors-choosing-an-iot-web-server.htm
QEMU wird von einigen Entwicklern zum Emulieren von Embedded Geräten benutzt. Vielleicht ein Projekt für ein Play/Experiment Day eine(!) um andere IoT Anwendungen zu virtualisieren/emulieren
https://openwrt.org/docs/guide-user/virtualization/qemu?s[]=qemu
https://wiki.openwrt.org/doc/howto/qemu
https://blog.freifunk.net/2018/06/10/gsoc-2018-kernel-space-socks-proxy-for-linux-june-progress/ => Open WRT Variante
http://drwiii.org/qemu-raspbian/ ==> Emulierung eines Raspberry Pi’s
https://ownyourbits.com/2018/06/13/transparently-running-binaries-from-any-architecture-in-linux-with-qemu-and-binfmt_misc/ ==> Emulierung eines Raspberry Pi’s und weitere Linux OS
https://www.qemu.org/2018/02/06/devconf-fosdem/ => Weitere Vorträge zur Virtualisierung mit QEMU
