Hallo,
Das Wochenende ist nah und weiter gehts mit einem weiteren Newsletter der KW 18. Router UIs und Sicherheit ist ein größerer Bestandteil, wie ein paar interessante VueJS Komponenten Sammlungen. Zudem gab es ein paar sehr interessante Artikel zu Webpack passend als Ergänzung zu unserer Build-Tool Einführung von Luca.
Ganz überraschend gab es in der letzten und dieser Woche ganz kritische Worte zur Entwicklung des Internets… Vielleicht interessiert es euch
http://nymag.com/selectall/2018/04/an-apology-for-the-internet-from-the-people-who-built-it.html
https://anildash.com/2018/04/07/12-things-everyone-should-understand-about-tech/
https://www.ethicsfordesigners.com/
Allgemein
Google verwaltet eine neue TopLevel Domain .app, die unter anderem dann auch in einem App Store gelistet werden kann. Evtl. interessanter als zusätzlicher Vertriebskanal für Progressive Web Apps
https://www.heise.de/newsticker/meldung/Google-startet-neue-Top-Level-Domain-app-4039058.html
https://developers.googleblog.com/2018/05/introducing-app-more-secure-home-for.html
Library vs. Framework noch einmal schön erklärt
https://t3n.de/news/library-vs-framework-unterschiede-1022753/
https://www.youtube.com/watch?v=VvOsegaN9Wk&feature=youtu.be => Ein Plädoyer gegen die Verwendung eines Frameworks
Interessante Ansatz Router UIs direkt über die Webeite für verschiedene Produktvarianten und Versionen zu emulieren.
Wäre sicherlich eine sehr attraktive Sache solche Emulatoren für die Abnahme von Bugfixes/Features in internen Abstimmungsprozessen einzubinden
https://www.tp-link.com/uk/emulators.html
https://demo.turris.cz
https://demo.ubnt.com
https://nebula.zyxel.com/
weitere Beispiele für Router UIs
https://github.com/EveAeternam/pi-router-admin oder https://github.com/billz/raspap-webgui für http://www.banana-pi.org/r2.html
Synology: https://www.youtube.com/watch?v=DZ1FCqRaXfk | https://www.synology.com/de-de/knowledgebase/SRM/video
AsusWRT
Low Code als verbesserter Workflow zwischen PMs, Designer und Entwickler? Oder gleich automatische User Interface Code Generierung?!
https://t3n.de/news/low-code-plattformen-944783/
https://airbnb.design/sketching-interfaces/
https://ethanmarcotte.com/wrote/spinning-jenny/
Workflow zwischen Designer und Developers kann mit diesen kleinen Tipps noch “smoother” sein. Für interne Review Prozesse nicht ganz uninteressant
https://blog.logrocket.com/simple-things-designers-can-do-to-make-their-front-end-developers-happy-6c113ffda5d5
https://medium.freecodecamp.org/why-should-a-developer-think-like-a-product-owner-c3f813e4ea93
Ein Hoch auf interdisziplinäre Teamarbeit und Scrum bei den Griechen 😉
https://the-composition.com/the-origins-of-opera-and-the-future-of-programming-bcdaf8fbe960
Workflow Tipps für den Developer Alltag
https://laravelfactory.com/blog/time-saving-habits-for-programmers
HTML & CSS & SVG
Asset Loading mit prefetch in HTML.. Eine Variante unsere Webperformance zu verbessern
https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c
Barrierefreiheit ist immer wieder ein wichtiges gesellschaftliches Thema… hier ein paar mögliche Fixes/Ergänzungen fürs HTML usw.
https://aerolab.co/blog/web-accessibility/
Buttons kommen unschuldig daher, jedoch gibt es beim Design und der Implementierung von Buttons einiges zu beachten
http://babich.biz/7-rules-of-buttons/
https://axesslab.com/hand-tremors/ ==> besonders auf mobilen Endgeräten
https://cloudfour.com/thinks/designing-button-states/
Schöne Erklärung wie man HTML (oder DIV) Container und dessen Elementen gut strukturiert und arrangiert mit HTML & CSS -> siehe auch Atome, Moleküle und Organismen
https://medium.com/eightshapes-llc/cards-and-composability-in-design-systems-8845ecbee50e
Aufbau und Implementierung von Grid Layouts mit Flexbox Fallback (nach Progressive Enhancement Methodik)
http://www.gridtoflex.com/
Kleiner Flex Box Hack beim Umbruch von Container in der mobilen Ansicht (Responsive Rendering)
http://joren.co/flex-grow-9999-hack/
Kleine Sammlung von brauchbaren CSS Code Schnipseln zum Layouten, Box-sizing, aspect-ratio, debugging
https://justmarkup.com/log/2018/03/collection-of-css-snippets/
CSS Styleguide und Vorteile fürs Debuggen
https://t3n.de/news/css-konventionen-best-practices-1026468/
JavaScript spezifisch
Fetch API die neue Alternative zu den XHR?!
https://www.sitepoint.com/introduction-to-the-fetch-api/
Schöne umfangreiche Zusammenfassung zu Regulären Ausdrücken mit JavasScript und ES6
https://flaviocopes.com/javascript-regular-expressions/
https://regexr.com/ => RegExplorer / Editor
Ein paar weitere schöne Erklärungen zu den neuen ES6 Features
https://www.codementor.io/thomas478/modern-javascript-features-which-you-should-be-using-every-day-for-better-development-and-what-problems-do-they-solve-itkhcemti
https://codeburst.io/es6-destructuring-the-complete-guide-7f842d08b98f
https://medium.freecodecamp.org/want-to-learn-es6-take-this-free-23-part-course-and-become-a-javascript-ninja-55002db1ff74
http://exploringjs.com/
Kleine schöne Erklärung zu Functional Programming mit Arrays
https://www.telerik.com/blogs/functional-programming-with-javascript-object-arrays
Software Technik und Architektur
Einer der besten Chaos Computer congress Vorträge dieses Jahr: Missverständnisse in unserer Branche. Lachen im Munde stecken bleib
https://media.ccc.de/v/34c3-9095-antipatterns_und_missverstandnisse_in_der_softwareentwicklung
viele API Design Punkte erklärt, die auch für IoT Device APIs eine hohe Relevanz haben
https://blog.risingstack.com/building-an-api-gateway-using-nodejs/
https://ecommons.luc.edu/cs_facpubs/35/ ==> White Paper REST API auf dem (Home) Router
https://dev.mixer.com/rest.html# ==> Schönes API Design und Beispiel einer API Dokumentation
https://swagger.io/swagger-ui/ ==> Tool für die Definierung einer Backend API (nach Open API 3 Spec)
Zusammenfassung zur Dokumentation
https://www.oreilly.com/ideas/the-eight-rules-of-good-documentation
Inspiration und Vorschlag einer Projektstruktur von Komplexen (API) Projekten
https://blog.risingstack.com/node-js-project-structure-tutorial-node-js-at-scale/
Workflow und Tools
NodeJS und NPM und dessen Basis nochmal genauer erklärt…
https://medium.freecodecamp.org/what-exactly-is-node-js-ae36e97449f5
Verschiedene NodeJS und NPM Versionen können auf Linux Systemen leichter per SNAP verwaltet werden. Vielleicht eine gute Lösung für unsere VM
https://nodesource.com/blog/installing-nodejs-tutorial-using-snaps-on-linux/
Schnelleinstieg in Webpack 4 und ein paar weitere gute Erklärungen zu Webpack allgemein
https://hackernoon.com/a-tale-of-webpack-4-and-how-to-finally-configure-it-in-the-right-way-4e94c8e7e5c1
https://www.valentinog.com/blog/webpack-4-tutorial/
https://jamie.build/last-2-versions
https://survivejs.com/webpack/foreword/ ==> kostenloses umfangreiches E-Book zu Webpack 4 von einem Core Entwickler
Web Security
Sehr gute allgemeine Zusammenfassung zur Security (Sandbox) im Browser
https://www.youtube.com/watch?v=vvZRYUBFX-8&feature=youtu.be
Der Staat und die Routersicherheit
https://www.golem.de/news/bsi-richtlinie-der-streng-geheime-streit-ueber-die-routersicherheit-1801-132363.html
https://www.bsi.bund.de/SharedDocs/Downloads/DE/BSI/Cyber-Sicherheit/Themen/Testkonzept-Breitbandrouter.pdf;jsessionid=C396BE4CC48CCE1234DE3F434D6D0C99.1_cid360?__blob=publicationFile&v=5
Access Management and Security von Webserver und APIs für NGinX mit einigen guten Tipps eine API Absicherung und Konfiguration
https://de.slideshare.net/Nginx/nginx-access-management-and-security-controls-emea
https://www.nginx.com/resources/webinars/nginx-access-management-security-controls-emea/
Eine etwas andere Art von DDos Attacken und ihre Charakteristiken plus Fingerabdrücke. Angriff auf Netzwerke/Router (in da’Cloud) ..
https://www.youtube.com/watch?v=7XeFNfE7TjY&feature=youtu.be
Gute Sammlung mit referenzen zu Ethical Hacking und Netzwerk Sicherheit
https://null-byte.wonderhowto.com/
https://www.youtube.com/watch?v=yj_iSBWBKjw
VueJS spezifisch
Erklärung der internen Renderpipeline von VueJS vor Kompilierung und zur Runtime erklärt
https://medium.com/js-imaginea/the-vue-js-internals-7b76f76813e3
Interessanter Ansatz von Live-updates für VueJs Componenten und einem Code Editor
https://github.com/mons54/vue-live-preview/
https://mons54.github.io/vue-live-preview/ == Demo Beispiel
Ansätze für “Responsive UI Components” und weiteres Responsives Rendering (Stichwort Container Queries)
https://itnext.io/making-adaptive-vue-components-with-resizeobserver-123b5ebb20ae
https://alligator.io/js/resize-observer/
https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/
Interessanter Ansatz eines Form Generator mit einem JSON Schema Ansatz
http://blog.rangle.io/how-to-create-data-driven-user-interfaces-in-vue/
Eine umfangreiche Table Komponente in VueJS
https://github.com/xaksis/vue-good-table
https://github.com/xaksis/vue-good-table/wiki/Vue-good-table-Recipes-(vue-good-table-2.x)
Error Handling mit einem Vorschlag für VueJS
https://medium.com/@dillonchanis/handling-errors-in-vue-with-error-boundaries-91f6ead0093b
https://www.youtube.com/watch?v=fQHH6aSpYV0&list=PL37ZVnwpeshH2dgOfKBH1UOgOT198ZzZy&index=12 ==> allgemeiner Error Handling Vortrag
Fullpage und Assistenten/Wizard Navigation und Kompentenaufbau als Inspirationen für unseren Assistenten
https://github.com/xaksis/vue-good-wizard
https://xaksis.github.io/vue-good-demos/#/simple-wizard
https://alvarotrigo.com/vue-fullpage/
Recursive Komponenten, wie z.B. für die Abbildung von Verzeichnisstrukturen und deren Kommunikation miteinander und nach außen
https://alligator.io/vuejs/communicating-recursive-components/
Realtime Data und Ajax Polling mit Vuex & VueJs
https://secdevops.ai/weekend-project-part-4-integrating-websockets-into-a-real-time-vue-app-with-socket-io-and-vuex-e358e04f477c
Kurzübersicht wie man für das neue Vue Command Line ein PlugIn schreibt
https://medium.com/@Seb_L/how-to-build-your-own-vue-cli-3-plugin-be4b1a6bb68b
VueJS DevTools zusammengefasst
https://medium.com/vue-mastery/how-to-use-the-vue-devtools-af95191ff472
Lua spezifisch
Lua-Styleguides, die m.E. als Grundlage
https://github.com/luarocks/lua-style-guide ==> Der von Luarocks:
https://gist.github.com/catwell/b3c01dbea413aa78675740546dfd5ce2 ==> Der von “Lima” (wasimmerdasist)
Dokumentation von Lua Code mit LDoc
http://stevedonovan.github.io/ldoc/
https://github.com/stevedonovan/LDoc
Lua im Gateway Einsatz im Embedded Device Bereich
https://www.youtube.com/watch?v=zVzEmewJG8I&feature=youtu.be
Events
Peer 2 Peer Web Meetup am Samstag in Berlin
https://peer-to-peer-web.com/berlin/2018-05-05
Exotisches
Kiwix – Wikipedia und andere Wissensdatenbank zum Offline oder im Local Network verfügbar machen (funzt auch auf Android)
http://www.kiwix.org/de/
Private Photos, Videos usw. Verwalten und Sync auf den eigenen Device
https://emby.media/
In The Mesh – Whitepaper: On the Connectivity of Mesh Networks: Range is Everything
https://inthemesh.com/archive/whitepaper-connectivity-of-mesh-networks/
