Hallo liebe Web- und Tüftel Community,
Durch die Sommerhitze hat sich leider der Newsletter für die Woche 31 ein paar Tage verspätet. Diesmal mit den Themen Web Peformance für Web Apps, Server Sent Events anstatt Polling Mechanismen, Erfahrungsberichte über Architekturen für Web Apps, und eine größere Liste von Tutorials für testgetriebene Enwicklung mit VueJS. Der Rest des Sommerloches wurde mit Artikel aus dem exotischen Techie Bereich ergänzt.
Allgemein
Schöne Sammlung von Codesnippet Projekten für den Alltag, wie z.B. Responsive Tabellen mit CSS, Loader mit SVG & CSS und JS, Mouse Pointer mit CSS, Textlayouts usw. verwaltet unter anderem von Sarah Drasner
https://codepen.io/collection/nMgKxJ/
https://justmarkup.com/log/2018/03/collection-of-css-snippets/
Schöne Checkliste über Optimierungen im Bereich HTML, CSS, Bilder, HTTP usw.
https://github.com/thedaviddias/Front-End-Performance-Checklist/
https://codeburst.io/the-front-end-performance-checklist-speeds-up-your-web-developments-b68e1c7a0276
https://twitter.com/BoltAssaults/status/1010785033815318529/photo/1 ==> HTTP und HTML Loading Cheat Sheet
Weitere Übersicht von Musterlösungen für UI Patterns, UI Elemente, Navigation und Micro Interactions. Sehr hilfreiche Inspiration für die Entwicklung neuer Features und für UX-basierte (Feedback) Prozesse
https://www.uisources.com/interactions
Schöne Auflistung von Aufgaben und Problemlösungen mit der UI/UX Designer jeden Tag konfrontiert sind. Hilft sicherlich den ein oder anderen Designer Kollegen besser zu verstehen
https://www.subtraction.com/2018/07/17/what-is-this-thing-called-design/
Vorträge rund um das Thema Frontend, Entwicklung, und UX Design gesammelt auf einer zentralen Seite
https://dev.tube/
Verbindungstyp abhängige UI Entwicklung ist nicht ganz uninteressant. Besonders wenn sich die GUI für Geräte im lokalen Netz oder per Fernzugriff entsprechend anpassen soll. Ganz zu schweigen von dem Anwendungsfall sehr schwaches Netz für einen Fernzugriff auf die eigenen IoT Geräte.
https://deanhume.com/dynamic-resources-using-the-network-information-api-and-service-workers/
Server-Sent Events ist eine sehr Schnittstelle um Daten vom Server an den Client (Browser) zu übermitteln. Im Vergleich zu Websockets ist die Verbindung nicht bidirektional und funktioniert somit nur in eine Richtung, nämlich vom Server zum Client. Damit fällt der Aufwand für die Umsetzung auf Client sowie Server Seite etwas geringer aus. Auf dem ersten Blick ist diese Funktionalität ausreichend um Client gesteuerte Polling Anfragen vollständig durch Server Sent Events zu ersetzen. Somit bestünde eine Alternative z.B. Realtime Charts passend von Sender aus zu updaten ohne den Einsatz von der setInterval API.
https://auth0.com/blog/developing-real-time-web-applications-with-server-sent-events/
https://codeburst.io/polling-vs-sse-vs-websocket-how-to-choose-the-right-one-1859e4e13bd9
http://support.gnip.com/articles/consuming-streaming-data.html
https://html.spec.whatwg.org/multipage/server-sent-events.html
Schöner Einführungsartikel zur Geschichte und Infrastruktur von Mesh Netzwerken.
https://inthemesh.com/archive/understanding-mesh-networking-part-i/
Homenet ist ein Versuch das Heimnetz stärker zu standardisieren, umso die Fragmentierung in dieser Art von Netzwerk Infrastruktur ein wenig besser verwalten zu können
https://toreanderson.github.io/2015/10/02/homenet-the-future-of-home-networking.html –> schöne Erklärung um was es bei dem Standard geht
https://toreanderson.github.io/2015/10/11/making-a-homenet-router-out-of-openwrt.html –> Rapid Prototype eines Homenet Routers
http://www.homewrt.org/
https://tools.ietf.org/wg/homenet/ –> Standard Working Group Website
Nach längerem Hin und Her ist nun der LEDE Fork wieder im ursprünglichen Open Source Router Betriebssystem OpenWRT vereint. So dass nun wieder mit vereinten Kräften in der Open Source Router Community weitergeht
https://www.pro-linux.de/news/1/26151/openwrt-1806-freigegeben.html
https://www.computerbase.de/2018-07/router-firmware-openwrt-18060/
https://openwrt.org/
Dokumentation ist immer eine Balance Akt zwischen zuviel und zu wenig… Anbei 4 Ziele für eine Dokumentation um eine gute Balance zwischen Aufwand, Wissensvermittlung und Aktualität zu erreichen
https://www.thoughtworks.com/insights/blog/four-goals-agile-documentation-part-one
https://www.thoughtworks.com/insights/blog/four-goals-agile-documentation-part-two
https://www.youtube.com/playlist?list=PLZAeFn6dfHplUgfLOLEuHHAm1HdrIyaZ7 –> Konferenz zum Thema Technische Dokumentation
https://www.agiles-lernen.wiki/ –> Deutschsprachige Workshops zum Thema
Events und Weiterbildung
Kostenloser Online Kurs “DDoS Protection Bootcamp” über das richtige Umgehen und Vermeiden von DDoS Attacken
https://scotch.io/bar-talk/ddos-protection-mastery-starts-here
https://www.ddosbootcamp.com/
Online Kurs “Mastering Webpack Plugins”
https://frontendmasters.com/courses/webpack-plugins/
HTML & CSS & SVG
AirBnB Styleguide für CSS und SASS als Inspiration für den eigenen CSS Coding Styleguide
https://github.com/airbnb/css/blob/master/README.md
https://github.com/tderflinger/css-styleguide –> Deutsche Übersetzung des Styleguides
https://css-tricks.com/sass-style-guide/ –> Speziell für SASS / SCSS
Sehr schöner CSS/HTML Trick um die eigene interne Dokumentation von JavaScript und CSS mit interaktiven Experimenten zu erweitern.
https://css-tricks.com/did-you-know-that-style-and-script-tags-can-be-set-to-display-block/
Schöne Übersicht über barrierefreie alternative Formularelemente wie z.B. ein Sterne Bewertungseingabe oder eine Option ButtonBar anstatt Radio Buttons usw.
https://developer.paciellogroup.com/blog/2018/07/short-note-on-the-accessibility-of-styled-form-controls/
https://www.sarasoueidan.com/blog/toggle-switch-design/ –> Schöne Ausführung für Toggle Buttons
Beispiele für die unterschiedliche Behandlung von Pointer Events mit CSS
https://codepen.io/MartijnCuppens/pen/MBjqbM
JavaScript spezifisch
Die Menge von JavaScript wird durch manche Frameworks massiv vergrößert. Besonders schwache Smartphone Geräte haben mit den hohen Parsingaufwand zukämpfen. Zusätzlich kommen noch die größeren zu übertragenen Datenmengen, welche bei schlechten Netzwerkverbindungen ein Problem darstellt. Ein kritischer Artikel mit vielen Tipps um die Performance der eigenen Webapp zu verbessern
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
https://itnext.io/a-bloatless-web-d4f811c7991b –> Kritisches zu Polyfills
Sehr interessantes Buch für Umstrukturierung und die Verbesserung der internen Code Qualität. Womöglich sehr hilfreich für bevorstehenden Umstrukturierungen von Web Apps: Refactoring JavaScript – Turning Bad Code Into Good Code
http://shop.oreilly.com/product/0636920053262.do
Kleine Auffrischung wie man Variablen und Objekte frei gibt für die Garbage Collector
https://flaviocopes.com/how-to-remove-object-property-javascript/
Kleine Auffrischung über Dates mit JavaScript
https://flaviocopes.com/javascript-dates/
Software Technik und Architektur
Ein schöner Artikel und Erfahrungsbericht wie Shopify ihre GraphQL API umgesetzt und designed hat
https://gist.github.com/swalkinshaw/3a33e2d292b60e68fcebe12b62bbb3e2
Schöne kurze Beschreibung des “Clean Architecture” Prinzip, welches sich auch für iterative Refactorings anwenden lässt
https://8thlight.com/blog/uncle-bob/2012/08/13/the-clean-architecture.html
Interessanter Erfahrungsbericht von AirBnB und dessen Frontend Architektur Umbau. Unter anderem mit mehr Code Splitting und LazyLoad / Asynchrone Komponenten
https://medium.com/airbnb-engineering/rearchitecting-airbnbs-frontend-5e213efc24d2
https://medium.com/airbnb-engineering/operationalizing-node-js-for-server-side-rendering-c5ba718acfc9
http://arkwright.github.io/scaling-react-server-side-rendering.html -> weitere Skalierungsansätze aus der React Welt
Workflow und Tools
Das im ersten Artikel beschriebene “lokale NPM Management” als Vorprüfung und Verwaltung, könnte ein interessanter Weg sein “Reproduzierbare Buildprozesse” für Frontend Umgebungen zu etablieren. Auf lokaler/self-hosted Ebene können doch so einige NPM und NodeJS Prozesse besser überwacht, überprüft und beeinflusst werden. Anbei einige Berichte wie man eine bessere definierte Buildumgebung mit NPM und Node umsetzen kann
https://blog.strapi.io/testing-npm-package-before-releasing-it-using-verdaccio-and-ngrok/
https://flaviocopes.com/package-lock-json/ ==> Festsetzen der NPM Packages für Reproduzierbare Builds
https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b ==> npx als Befehl um lokale packages für die Verarbeitung zu benutzen
https://tech.europace.de/lokaler-npm-registry-mirror-mit-synchronisation/ –> Eigene NPM Registry mit Abgleich des offiziellen NPM Register
https://www.telerik.com/blogs/dockerizing-react-applications-for-continuous-integration ==> Frontend Code vorbereiten für Austauschbare und Reproduzierbare Buildumgebungen
https://jonathanmh.com/deploying-a-vue-js-single-page-app-including-router-with-docker/ ==> Beispiel für VueJS
https://reproducible-builds.org/
Schöne deutschsprachige Einführung in die verschiedenen “Branch” Funktionen und Workflows mit Git. Vor allem hilfreich ist die interaktive Übungsumgebung um weitere Funktionen wie z.B. cherry-picking auszuprobieren.
https://learngitbranching.js.org/
http://think-like-a-git.net/sections/rebase-from-the-ground-up/cherry-picking-explained.html
Einen Mockup Server mit Postman erstellen um FakeDaten immer wieder im Frontend abrufen zu können. Eine erste Einführung in das Thema
https://medium.com/postman-engineering/https-medium-com-postman-engineering-fake-it-till-you-make-it-mocks-for-agile-development-f4d050cad694
Interessante Lokalisierungs- und Übersetzungsportale, die zum Teil auch selbst gehostet werden können.
https://www.transifex.com/
https://poeditor.com/
https://weblate.org/en/ => wird auch von Turris Router System verwendet
Mininet ist ein interessantes Tool für die Simulierung von Netzwerkumgebungen. Nicht ganz uninteressant wenn man verschiedene Netzwerkumgebungen automatisiert testen möchten.
http://mininet.org/overview/
https://www.researchgate.net/publication/295861311_Mininet-WiFi_Emulating_software-defined_wireless_networks
https://www.ip-insider.de/was-ist-openflow-a-605856/ => offenes Konfiguration- und Verwaltungsprotokoll für Netzwerkgeräte
https://de.wikipedia.org/wiki/OpenFlow
https://github.com/mininet/openflow-tutorial/wiki
Das Forum von Critical Engineering liefert immer mal wieder gute Tipps und Anleitung im Umgang mit Netzwerken in Linux Umgebungen
https://discourse.criticalengineering.org/
https://discourse.criticalengineering.org/t/howto-configuring-network-interfaces-on-the-linux-command-line/53
https://discourse.criticalengineering.org/t/howto-de-authing-wireless-clients/34
Ein Diagramm Tool um Netzwerk und Architektur Module zu skizzieren
https://cloudcraft.co/
Web Security
Es gibt für das HTTP Protokoll einen weiteren neuen Header für die Erhöhung der Sicherheit von Webapps und Websites: Feature Policy
https://scotthelme.co.uk/a-new-security-header-feature-policy/
https://www.owasp.org/index.php/OWASP_Secure_Headers_Project#tab=Best_Practices
https://securityheaders.com/ –> Übersicht von Security Ratings für Websites
https://speakerdeck.com/triblondon/headers-for-hackers
Sehr gute Vorträge und Zusammenfassung über OAuth2 Server und dessen unterschiedliche Authentifizierungs Flows für WebClients, Smart Phones, IoT Geräte und andere Server2Server Anwendungen
https://www.youtube.com/watch?v=wA4kqKFua2Q
https://www.oauth.com/
https://www.oauth.com/playground/
https://appauth.io/ –> Client Libs für OAuth
https://oauthdebugger.com/
https://twitter.com/derhess/status/1023951582751326209/
Mit der Kombination einer 2Faktor Authentifizierung und eines Hardware Security Keys hat Google sich wohl sehr gut vor Phishing Attacken geschützt. Interessanter Bericht aus der Praxis
https://krebsonsecurity.com/2018/07/google-security-keys-neutralized-employee-phishing/
VueJS spezifisch
Die VueJS Community ist nun um ein Portal reicher, welches sich komplett der Auflistung von (frei)verfügbaren VueJS Komponenten widmet. Definitiv ein Besuch wert bevor mal wild los legt und eigene Komponenten erstellt
https://vuecomponents.com/
Die neue Vue Kommandozeile in der Version 3 ist nun im Release Candidate Status. Ein schöne Einführung inkl. Vue Project UI Editor
https://www.vuemastery.com/courses/real-world-vue-js/vue-cli/
https://naturaily.com/blog/vue-cli-3-overview
Guter Artikel wie man am besten mit dem data Objekt umgeht und wann verschachtelte (nested) Strukturen vermeidet werden sollten
https://itnext.io/anyway-should-i-nest-data-or-should-i-not-in-vue-js-8536c86a612f
Guter und tieferer Einblick wann und wie man Funktionale Komponenten in Vue verwenden kann/soll
https://itnext.io/whats-the-deal-with-functional-components-in-vue-js-513a31eb72b0
Sehr ausführlicher und guter Einstieg in das fortgeschrittene Thema Renderless Componenten. Erklärung von Scoped Slots und dessen Erweiterungen für schon bestehenden Komponenten
https://css-tricks.com/building-renderless-vue-components/
Schöner Artikel mit Empfehlungen zum Code Splitting für Vue WebApps
https://blog.usejournal.com/code-splitting-pattern-with-vuejs-webpack-329d71217e2f
Arbeiten mit dynamisch erstellten Komponenten via component-Tag und dynamisch zur Laufzeit (Runtime) geladene Komponenten um die Datengröße beim ersten Laden gering zu halten. Stichwort Lazy Load Komponenten
https://itnext.io/vue-a-pattern-for-idiomatic-performant-component-registration-you-might-not-know-about-9f3c091846f5
https://twitter.com/afontcu_/status/1023176068230991877/photo/1 ==> inkl. Code Beispiel
https://github.com/jamiebuilds/react-loadable ==> In React sieht das Konzept zum Vergleich so aus
Kleiner guter Erfahrungsbericht zum Error Handling innerhalb von Vue Web Apps
https://catchjs.com/Docs/Vue
Einsteigerfreundliche Erklärung wie man JEST für test-getriebene Entwicklung mit VueJS einsetzt
https://medium.com/@ramon_src/starting-to-test-vue-with-jest-part-i-2cf1d357df54
https://medium.com/@ramon_src/testing-vue-with-jest-part-ii-fae5781a6bbb
https://medium.com/3yourmind/testing-vue-components-a-cheat-sheet-299b3b8be88d
https://medium.com/js-dojo/testing-vuex-actions-correctly-with-jest-444c277be4fe –> State Management mit Jest testen
https://medium.com/@bobthomas295/how-to-test-a-vuex-plugin-without-vuex-dependencies-dc1ab301bba5
https://medium.com/js-dojo/unit-testing-vue-router-1d091241312 –> Vue Router testen mit Jest
https://gist.github.com/lmiller1990/aade68dea1b1493e00f9ab5980f208d9
Zugegeben ich bin nicht tief mit testgetriebener Entwicklung bewandert, mein Gefühl sagt jedoch das diese Artikel über Snapshot Testing mit JEST einen hohen Erkenntnisgewinn liefern kann wenn es in fortgeschrittene Themen geht
https://blog.kentcdodds.com/effective-snapshot-testing-e0d1a2c28eca
Kleiner Erfahrungsbericht über die Integration des VueJS Ecosystem in bestehenden Alt Code
https://medium.com/skilljar-engineering/integrating-vue-2-5-webpack-4-babel-and-eslint-into-an-existing-website-e510822b2f6b
Radiale Ladebalken mit SVG, CSS und VueJS umgesetzt und dessen Workflow von Design eingesetzte Software bis zur Code Implementierung schön erklärt
https://medium.com/@nathan_93027/creating-animated-radial-progress-bars-with-svg-css-and-vuejs-3c633837ca73
Tieferer Einblick wie Drag’n Drop in Vuetify umgesetzt und angewandt wird. Vorallem die Tabellen Interaktion inkl. Sortierung sieht interessant aus
https://medium.com/vuetify/drag-n-drop-in-vuetify-part-i-166f2c7a4a82
https://medium.com/vuetify/drag-n-drop-in-vuetify-part-ii-2b07b4b27684
Mal wieder ein interessante Implementierung eines Modalen PopUps mit VueJs
https://gist.github.com/asvae/dba8681b48ef684d9aad696d804cc3c5
Eine weiter Implementierung und Erklärung wie mit Rekursiven Componenten Strukturen umzugehen
https://itnext.io/recursion-for-nested-tree-structure-components-in-vue-1cb600005475
VueJS Plugin ganz kurz und knapp vorgestellt. Liefert meiner Meinung nach einen ersten guten Eindruck
https://dev.to/nkoik/writing-a-very-simple-plugin-in-vuejs—example-8g8
Exotisches
Services rund um das Internet sowie der große Hype vom Internet der Dinge ist nicht gerade Ressourcen schonend. Pünktlich zur Hitzewelle ein kritischer Artikel zum Thema “how does it fit with a world in which router lights constantly flicker, and all the devices we own will be in constant, energy-intensive communication with distant mega-computers?”
https://www.theguardian.com/commentisfree/2018/jul/17/internet-climate-carbon-footprint-data-centres
Plattform-orientiertes Denken ist mit Facebook und Co. sehr trendy. Das Plattform Design Toolkit hat dazu sehr schöne Prinzipien formuliert. Vor allem interessant für dezentrale Platform Strukturen
https://stories.platformdesigntoolkit.com/7-key-platform-design-principles-d84cc78b9218
https://platformdesigntoolkit.com/
P2P Websiten für eine Serverfreie Infrastruktur ist ein interessantes Konzept. Ein Ziel ist es das Web wieder mehr zu demokratisieren und ein User Empowerment zu etablieren. Ob das funktioniert keine Ahnung, die Vorträge sind allein wegen der technischen und designlastigen Aspekte ein Blick wert
https://www.youtube.com/watch?v=rJ_WvfF3FN8&feature=youtu.be
https://www.youtube.com/watch?v=x-ffpAkviM0&list=PL37ZVnwpeshG2YXJkun_lyNTtM-Qb3MKa&index=43
Interessanter Ansatz eines eigenen Webarchiv und Abspeichern (Cachen) der eigenen Browser History
https://blog.webrecorder.io/2018/08/02/webrecorder-dat-integration.html
Schönes Prototyp Experiment für das Bauen einer Smart Wall… das geht sicherlich auch mit ein paar anderen Smart Home Devices zu ergänzen
https://www.instructables.com/id/LEGO-Interactive-Wall/
Zwei schöne Beispiele für das (Orts)Tracking zuhause über Wifi und Bluetooth
https://www.meintechblog.de/2018/04/wlan-anwesenheitserkennung-mit-unifi-accesspoints-in-fhem-einbinden-und-an-loxone-weiterleiten/
https://www.smashingmagazine.com/2018/07/logging-activity-web-beacon-api/
Vertrauen, Smart Contracts und Maschinen vereint in einen einstiegsfreundlichen Artikel zu automatisierten Vertragsabläufen
https://inthemesh.com/archive/automating-trust/
Ein erstes Reinschnuppern wie man ein eigenes Linux basiertes Betriebssystem für Embedded Geräte zusammenbauen kann, geht mit dem Tool Buildroot
https://buildroot.org/
https://www.youtube.com/watch?v=1PfthHCfudY –> Einführungsvortrag
https://bootlin.com/doc/training/buildroot/buildroot-slides.pdf –> Einstieg Slides
PiBakery ist ein schönes einfaches Beispiel und Inspiration, wie man sich ein eigenes Raspbian Betriebssystem inkl. Konfiguration für den Raspberry Pi einfach zusammenstellt
Sehr cooles Interaction und UX Design für Designer um Prototyp Umgebungen für Internet der Dinge Prototypen zusammen zubauen
https://www.youtube.com/watch?v=tDiw5M7-1mk
http://www.pibakery.org/
Kleine Übersicht über Netbooting mit Raspberry Pi’s – ein quasi An/Ausschaltung von Gateways oder anderen komplexeren IoT Geräten (z.B. NAS, MediaServer) über das Netzwerk.
https://blog.alexellis.io/the-state-of-netbooting-raspberry-pi/
https://developer-blog.net/raspberry-pi-ueber-das-netzwerk-booten/
Schöne Erklärung wie man Werbung gut für alle Geräte im eigenen Netzwerk blocken kann.
https://www.raspberrypi.org/blog/pi-hole-raspberry-pi/
https://pi-hole.net/
https://www.kuketz-blog.de/pi-hole-schwarzes-loch-fuer-werbung-raspberry-pi-teil1/
