Hallo Web und Tüftel Community,
Zwischen den Jahren und im Januar wurden so viele gute neue Blog Artikel geschrieben, dass ich überhaupt nicht mehr hinter her kam. Meine Leseliste ist förmlich explodiert, genau wie diese Liste hier…
Zudem habe ich ein wenig Anpassungsprobleme mit WordPress 5 und dem Gutenberg Editor. Ein paar Sachen sind cool für diese Linkliste und andere wieder nicht.
Diesmal gibt es gute Artikel über OAuth, verteilte und dezentrale Architekturen, sowie einiges über HTML, CSS, VueJS und ein paar Raspberry Pi Projekte.
Wieauchimmer, die Liste leidet aufgrund der Menge doch sehr an Übersichtlichkeit. Aus diesem Grund ist dieser Blogeintrag eher als ein kleines persönliches Januar 2019 Archiv zu betrachten.
Falls ihr trotzdem weiter lesen wollt, viel Spaß beim Stöbern!
Allgemein
Schöner Artikel über Komplexität im Allgemeinen, und wie das Denken in System den Alltag von Entwicklern und Designern stark beeinflusst. Manchmal ist 3mal rechts auch einmal links… Passiert mir auch mal, aber vor allem in Konzernen wurde ich häufig mit “accidental complexity” konfrontiert, darüber könnte ich ganze Lieder singen… 😉
https://dev.to/stereobooster/complexity-5d62
https://overreacted.io/the-bug-o-notation/
https://mxb.at/blog/on-simplicity/
http://garrettdimon.com/2019/openness-and-longevity/
https://www.nginx.com/blog/principles-of-modern-application-development/
Jahresende und Jahresanfang werden ja sehr gern für Retrospektiven und strategische Planung verwendet. Ein paar Artikel zum allgemeinen Zustand von UX, Web Dev usw.
https://www.arun.is/blog/10-year-challenge/
https://trends.uxdesign.cc/
https://thomasbyttebier.be/blog/brands-beyond-the-interface
https://medium.com/s/story/on-the-visual-weariness-of-the-web-8af1c969ce73
https://medium.com/s/user-friendly/emulation-is-not-a-product-strategy-cfecdbffce96
https://m.signalvnoise.com/why-i-ignore-the-design-industry-on-purpose/
Super Datenbank und Kollektion für UI Sound Gestaltung
https://uisounds.prototypr.io/home/
Als Interface Designer und ehemaliger Medienkunst Student genieße ich es in Medien Archäologie Themen zu versinken. Ein paar Anlaufstellen
https://medium.com/@mwichary/the-ghost-tech-in-todays-language-c3becc9ae30b
https://www.nytimes.com/2019/01/23/arts/design/internet-art-new-museum-rhizome.html
https://en.wikipedia.org/wiki/Media_archaeology
https://mediaarchaeologylab.com/
Ein netter Artikel zur Work Life Balance mit schmunzelnden Titel wie man mit Workaholic Kulturen umgehen kann
https://codewithoutrules.com/2019/01/09/worklife-balance-silicon-valley/
Quantitative Schätzungen sind im SCRUM glücklicherweise ersetzt durch qualitative Werte (z.B. Story Points oder T-Shirt Größen). Meine persönlichen Aufwandsschätzungen werden besser, sind aber immer noch abweichend zur Realität. Finde diesen Blogeintrag passend dazu
https://flaviocopes.com/estimating/
https://www.it-agile.de/wissen/praktiken/schaetzen/
Sich beruflich zu verorten in der Web Landschaft ist wirklich eine Herausforderung mit der man nicht alleine da steht. Im Januar gabs förmlich einen Blogartikel Ping Pong
https://css-tricks.com/the-great-divide/
https://medium.freecodecamp.org/designers-are-from-saturn-developers-are-from-jupiter-or-why-communication-matters-7d91794e5a37
https://blog.prototypr.io/dissecting-front-end-job-titles-7f72a0ef0bc5
https://medium.freecodecamp.org/what-does-junior-senior-expert-lead-experienced-professional-and-specialist-software-c36563e946e2
https://medium.com/javascript-scene/software-roles-and-titles-e3f0b69c410c
https://rachelandrew.co.uk/archives/2019/01/30/html-css-and-our-vanishing-industry-entry-points/
Interessanter Ansatz unterschiedliche Motivationen in der Open Source Welt zu beschreiben. Die kleinen unabhängigen Module und Helferlein im Paket von Komplettlösungen vereint.
https://staltz.com/two-schools-of-thought-in-open-source.html
Gut Einführung, Vorschläge und Anregungen wie man sich bei Open Source Projekten beteiligen kann und was im Beste Fall sogar sich positiv auszahlen kann
https://medium.freecodecamp.org/the-definitive-guide-to-contributing-to-open-source-900d5f9f2282
Die Maker, Erfinder, Tüftler und die Web Community teilen sich doch einen sehr ähnlichen “Mindset“. Jaron Lanier und Stephen Frey beleuchten diesen doch sehr männlich geprägten Mindset schön zugänglich
https://www.deutschlandfunkkultur.de/internetkritiker-jaron-lanier-schluss-mit-der-umsonst.1264.de.html?dram:article_id=437491
https://www.youtube.com/watch?v=XUU3DJO_juM
http://www.stephenfry.com/greatleapyears
Ob Web Performance im Allgemeinen gut ist steht für mich außer Frage. Ob es aber wirklich ethischer oder moralischer ist, hmm….
https://timkadlec.com/remembers/2019-01-09-the-ethics-of-performance/
https://www.smashingmagazine.com/2019/01/front-end-performance-checklist-2019-pdf-pages/
HTML & CSS & SVG
HTML und die Web Platform als Export Format bzw. kompiliertes Ergebnis gab es schon immer (siehe Export zu html in Word). Ob das aber in den meisten Fällen zum gewünschten Ergebnis führte… hmm… ein Reise in diesen Ansatz
https://christianheilmann.com/2019/01/28/html-is-and-always-was-a-compilation-target-can-we-deal-with-that/
Weitere Informationen
https://www.ampproject.org/latest/blog/a-first-look-at-using-web-packaging-to-improve-amp-urls/
https://github.com/WICG/webpackage
https://medium.com/@firt/google-play-store-now-open-for-progressive-web-apps-ec6f3c6ff3cc
https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps/microsoft-store
https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7
Semantisches HTML hält soviel Mehrwert inne auf so vielen unbewussten Dimensionen. Als Beispiel das angepasste Content Rendering auf Smart Watches… Von anderen kleinen IoT Devices oder Arduino Projekte will ich gar nicht erst reden…
https://www.brucelawson.co.uk/2018/the-practical-value-of-semantic-html/
https://html5forwebdesigners.com/semantics/
https://alistapart.com/article/semanticsinHTML5
https://meiert.com/en/blog/html-performance/
https://www.smashingmagazine.com/2019/01/web-standards-guide/
Bei der Gestaltung und Umsetzung von Formularen kann aufgrund des unsexy Themas sehr schnell ein paar Leichtsinnsfehler einbauen. Ein paar schöner Punkten zum gegenchecken der eigenen Entwürfe
https://uxdesign.cc/design-better-forms-96fadca0f49c
https://www.bram.us/2019/01/18/building-better-forms-by-not-taking-away-affordances/
Form Design Patterns – Design System und Buch
http://nostyle.herokuapp.com/examples
https://github.com/adamsilver/nostyle
https://www.smashingmagazine.com/printed-books/form-design-patterns/
Semantisch und barrierefreie Tabellen bekommt man auf nur großen Bildschirm noch einigermaßen gut umgesetzt. Bei responsiven Tabellen für kleine Bildschirmen wird es schnell eine größere Herausforderung. Ein schöne Zusammenfassung über verschiedene Layoutlösungen abhängig von den Inhalten
https://www.smashingmagazine.com/2019/01/table-design-patterns-web/
https://medium.freecodecamp.org/a-step-by-step-guide-to-getting-started-with-html-tables-7f43b18f962b
https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced
Schöne Erklärung wie mit internationalen und fremdsprachigen Verlinkungen mittels lang und hreflang Attribut um zugehen ist
https://hiddedevries.nl/en/blog/2019-01-18-linking-to-translations
Ob man wirklich CSS Frameworks benötigt oder benutzen sollte, überlasse ich jeden selbst. Meiner Meinung kommt es doch sehr auf den jeweiligen Anwendungsfall drauf an. Wieauchimmer, von diesen genannten Frameworks kann man auf jeden Fall einiges lernen bezüglich CSS und Workflow. Es lohnt sich immer mal wieder ein Auge drauf zu werfen.
https://scotch.io/bar-talk/6-popular-css-frameworks-to-use-in-2019
Eine schöne einsteigerfreundliche Zusammenfassung zu SASS und SCSS
https://medium.freecodecamp.org/the-complete-guide-to-scss-sass-30053c266b23
Ein paar schöne allgemeine CSS Tips im Umgang zu Flexboxen, Styling von Formularelementen usw.
https://www.smashingmagazine.com/2018/12/common-css-issues-front-end-projects/
Aspect Ratio Handling und Lazy Load von Bildern für nachgelagertes progressives Page Loading
https://24ways.org/2018/jank-free-image-loads/
https://calendar.perfplanet.com/2018/gradient-image-placeholders/
Schöne Zusammenfassung von guten CSS Properties Beispielen, von Themes Implementierungen und Loader Gestaltung
https://dev.to/chriscoyier/learn-about-css-custom-properties-through-clever-uses-of-them-2fjo
Einer der besten CSS basierten Codesnippets in den letzten Monaten aus meiner Sicht. Heydon entwickelt ein sehr interessantes Verfahren mit CSS Flexbox eine Art Containerquery Ansatz ohne Media Queries und ohne JS zu realisieren. Einfach mal den 40rem Wert abändern für das eigene Experimentieren.
http://www.heydonworks.com/article/the-flexbox-holy-albatross
https://codepen.io/heydon/pen/JwwZaX
https://twitter.com/heydonworks/status/1084392089926991872
https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/
Alternative hierzu andere Ansätze:
https://github.com/ZeeCoder/container-query
https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/
https://noti.st/gregwhitworth/UDul7E
Der Umgang und Design mit Farben ist durch den kulturellen Kontext um einiges erschwert. Farbenblindheit erschwert den Umgang mit Farben noch mehr. Das Definieren einer harmonischen Farbkollektion für ein Design System ist wirklich große Herausforderung. Anbei ein paar Werkzeuge zur Unterstützung
https://css-tricks.com/re-pleasing-color-palettes/
https://palettte.app/
https://colorsupplyyy.com/app
https://cloudflare.design/color/
https://www.kooslooijesteijn.net/blog/why-color-discussions-can-be-so-frustrating
In meiner Flash Developer Zeit mochte ich Blink Blink und hab es sicherlich auch übertrieben. Ein paar hilfreiche Tipps um Animation aus Sicht der Barrierefreiheit zu verringern oder komplett zu deaktivieren. Die Lösung mittels CSS Variablen Muliplikator finde ich ja sehr reizend
https://css-tricks.com/introduction-reduced-motion-media-query/https://hugogiraudel.com/2018/03/19/implementing-a-reduced-motion-mode/
https://www.kirupa.com/html5/toggling_animations_on_off.htm
Weitere Hintergrundinfos
https://uxplanet.org/animation-that-matters-adding-value-to-your-interface-65496fe4c182
https://codepen.io/collection/nMpBQm/#
Kleine Komponenten mit SVG, HTML und CSS animieren am Beispiel eines Loader Kreises.
https://www.smashingmagazine.com/2019/01/html5-svg-fill-animation-css3-vanilla-javascript/
Interessantes Codebeispiel um SVG Grafiken und Texte zu splitten
https://codepen.io/PointC/pen/QZxxRx
Mit SVG lassen sich auch weitere schöne Filtereffekte erzielen, wie sie aus Photoshop und anderen Programmen bekannt sind. Anbei eine schöne Einführung in SVG Filterverarbeitung
https://tympanus.net/codrops/2019/01/15/svg-filters-101/
https://tympanus.net/codrops/2019/01/22/svg-filter-effects-outline-text-with-femorphology/
https://tympanus.net/codrops/2019/01/29/svg-filter-effects-poster-image-effect-with-fecomponenttransfer/
https://yoksel.github.io/svg-gradient-map/
Styling einer browser-übegreifenden Select Box mittels CSS
https://github.com/filamentgroup/select-css
http://youmightnotneedjs.com/
Schöner Einblick in die zukünftige CSS Erweiterung mittels JS Worklets für externes Visual Rendering oder andere layoutorientierte CSS Erweiterungen
https://blog.logrocket.com/using-animation-worklet-4a3914c19112
https://codersblock.com/blog/say-hello-to-houdini-and-the-css-paint-api/
https://github.com/nucliweb/awesome-css-houdini
JavaScript
Eine schnelle Übersicht von Web APIs, die die Web Platform näher an native Apps heran kommen lässt
https://areknawo.com/lets-talk-js-web-apis/
Schöne Übersicht der verschiedenen Web Komponenten APIs
https://scotch.io/bar-talk/an-overview-of-the-most-exciting-proposals-for-the-web-platform-related-to-web-components
Web Komponenten werden immer stärker in der Web Community diskutiert. Ein starker, manchmal aber auch verwirrender Umstand, ist der “scoped” CSS Ansatz mittels Shadow DOM. Klingt kompliziert, bedeutet im vereinfachten Sinne nur dass der globale CSS Stil sich nicht mit dem lokalen CSS Style einer Web Komponente vermischt. Manchmal soll das aber so sein, anbei ein tieferen Einblick in das Styling Verhalten von Web Komponenten
https://css-tricks.com/styling-a-web-component/
Desweiteren finde ich den hybriden Web Komponenten mit funktionalen Ansatz sehr interessant Komponenten von anderen Frameworks zu Web Komponenten zu transpilen. Vielleicht auch eher ne kleine Spinnerei im Kopf von meiner Seite
https://dev.to/bennypowers/lets-build-web-components-part-7-hybrids-187l
interessanter Architektur Ansatz ein WC Lib passend zum obigen Artikel
https://dev.to/smalluban/from-classes-to-plain-objects-and-pure-functions-2gip
https://dev.to/smalluban/how-to-say-goodbye-to-lifecycle-methods-and-focus-on-productive-code-175
https://www.youtube.com/watch?v=WZ1MEHuxHGg
https://github.com/hybridsjs/hybrids/
weiterer Technologisch/Sprachlich orientierter Architektur Ansatz von WC
https://medium.com/content-uneditable/implementing-single-file-web-components-22adeaa0cd17
Die Web Community ist relativ schnelllebig, das hat sicherlich einiges mit der Art von Dienstleistungen und Produkten zu tun. Um jetzt nicht zu sehr philophisch zu werden, aber dennoch relativ langfristige verwertbare Ergebnisse zu erzeugen, lohnt es sich nah an den Web Standards zu entwickeln anstatt auf Frameworks und anderen Werkzeuge zu setzen. Ein schöner Kurs in dieser Richtung und ein Top Newsletter
https://learnvanillajs.com/
https://gomakethings.com/articles/
Der nächste Schritt sich nicht immer wiederholen zu müssen bei Web Komponenten ist die Wiederverwertbarkeit von State Machines. Hierzu gibt es auch Bestrebungen eines Standards SCXML für Statecharts als State Beschreibung.
https://jonbellah.com/articles/intro-state-machines/
https://glebbahmutov.com/blog/hyperapp-state-machine/#more
https://learnstatemachines.com/
https://xstate.js.org/docs/
https://statecharts.github.io/
https://de.wikipedia.org/wiki/SCXML
https://blogs.itemis.com/en/taking-scxml-to-the-next-level-with-yakindu-statechart-tools
Offline fähige Web Apps sind einer der besten Schritte hinsichtlich widerstandsfähiger und stabiler Web Applikationen. Eine schöne JS API Erklärung
https://medium.freecodecamp.org/how-to-make-your-app-work-offline-with-the-power-of-javascript-685d968bcfbb
Ich benutze sehr häufig die Teilen mit anderen Mobile Apps Funktion. Sehr schön zu sehen, dass man darüber nachdenkt eine Web Share API zu entwickeln
https://developers.google.com/web/updates/2018/12/web-share-target
Schöne Erklärung wie Async/Await mit Promises bei mehrfachen Funktionsaufruf funktioniert, mit dem schlussendlichen Ziel per Promise.all den Code lesbarer zu machen
https://dev.to/viniciuskneves/yet-another-post-about-asyncawait-and-promises-49gg
Rising Stacks ist ein Garant für guten Developer Content im Bereich NodeJS. Umso schöner, dass nun deren NodeJS Bootcamp und andere Starter Tutorials für Server Side NodeJS veröffentlicht wurden. Danach gibt es noch weitere alternative NodeJS Guides
https://blog.risingstack.com/node-js-bootcamp/
https://github.com/RisingStack/risingstack-bootcamp
https://medium.freecodecamp.org/writing-scalable-architecture-for-node-js-2b58e0523d7f
https://github.com/ehmicky/portable-node-guide/
https://medium.freecodecamp.org/the-definitive-node-js-handbook-6912378afc6e
In den ersten Januar Wochen kamen einige sehr schöne kostenlose React Starter Tutorials raus. Anbei ein Auszug
https://medium.freecodecamp.org/react-introduction-for-people-who-know-just-enough-jquery-to-get-by-2019-version-28a4b4316d1a
https://medium.freecodecamp.org/a-complete-react-boilerplate-tutorial-from-zero-to-hero-20023e086c4a
https://medium.freecodecamp.org/the-react-handbook-b71c27b0a795/
Sehr schönes Webpack Boilerplate Template
https://github.com/tr1s/tris-webpack-boilerplate
In der visuellen Programmierung sind Bezier Kurven ein wichtiges und mächtiges Werkzeug. Die Mathematik dahinter ist meiner Meinung nach nicht gerade leichte Kost. Dennoch eine wirklich schön gemachte Einführung
https://dev.to/antogarand/js-pattern-brush-part-1—bzier-setup-50ed
https://dev.to/antogarand/js-pattern-brush-part-2—bezier-tangent-and-normal-fhf
https://www.khanacademy.org/partner-content/pixar/environment-modeling-2
https://www.khanacademy.org/partner-content/pixar/modeling-character#concept-intro
https://www.blobmaker.app/ schönes Beispiel Anwendung von Bezier
Software Technik und Architektur
Verteilte Anwendung sind aktuell en vogue, mehr an Hype geht ja fast nicht mehr. Anbei eine schöne Einführung, Auflistung von Hürden und Kniffen und alles weitere zur Dezentralen Anwendungen
https://medium.freecodecamp.org/a-thorough-introduction-to-distributed-systems-3b91562c9b3c
https://csswizardry.com/2017/11/the-fallacies-of-distributed-computing-applied-to-front-end-performance/
Dezentralisierung in der Software Architektur
https://www.youtube.com/watch?v=Km6EYsBYAlY Allgemeine Einfühung
https://media.ccc.de/v/35c3-9595-wind_off-grid_services_for_everyday_people
https://ruben.verborgh.org/articles/redecentralizing-the-web/
https://hacks.mozilla.org/2018/10/dweb-identity-for-the-decentralized-web-with-indieauth/
https://hacks.mozilla.org/2018/11/decentralizing-social-interactions-with-activitypub/
https://www.inthemesh.com/archive/2018-in-decentralization/
Der Begriff Green IT läuft immer wieder in Gefahr Opfer von Greenwashing Marketing Kampagnen zu werden. Wieauchimmer, einiges an Infrastruktur läuft rund um die Uhr, ohne dass es wirklich gebraucht wird. Eine besser Lastverteilung wurde mit Hilfe von Virtualisierung und Portierung in dem Hypethema Microservices abgefrühstückt. Damit geht auch schon eine stark Event orientierte Denkweise und Architektur einher (siehe Event Sourcing Pattern). Diese Art von Denkweise wird nun im Form des Begriffes Serverless noch weiter getrieben. Es ist jetzt sehr einfach diese Hypes als Marketing Shit zu verteufeln, allerdings bietet die Serverless Idee wirklich die Möglichkeit Infrastruktur on-Demand zur Verfügung zu stellen, wenn man diese braucht. Das kann aus Resourcenmanagement Sicht einiges einsparen, welches am Ende wirklich der Umwelt weniger schadet. Vor allem ist diese Denke auch für kleine IT Infrastrukturen, wie z. B. Open Faas umsetzbar… Einige Anregungen
https://read.acloud.guru/evolution-of-business-logic-from-monoliths-through-microservices-to-functions-ff464b95a44d
https://speakerdeck.com/mrchrisadams/building-a-planet-friendly-web?slide=39
https://twitter.com/mrchrisadams/status/1087348547207528448?s=17
https://martinfowler.com/articles/serverless.html
https://www.youtube.com/watch?v=yOpYYYRuDQ0
https://thepowerofserverless.info/
Interessanter Artikel über Service Discovery und Registrierung bei AirBnB
https://airbnb.io/projects/synapse/
Schöne kurze Aufstellung verschiedener Schnittstellen Architekturen REST, SOAP und GraphQL im Vergleich
https://medium.com/postman-engineering/rest-soap-graphql-gesundheit-6544053f65cf
https://medium.com/postman-engineering/reverse-engineering-an-api-403fae885303
Schöne Erklärung des Pub/Sub Design Pattern für verteilte und/oder asynchrone Anwendungen
https://itnext.io/why-every-beginner-front-end-developer-should-know-publish-subscribe-pattern-72a12cd68d44
Zwischen den Jahren sind mir mehrmals Artikel und Talks über den Weg gelaufen, die von dem Phänomen “Falsche Abstraktion ist teurer als Duplikation” berichtet haben. Ich tendiere häufig zu Overengineering und fühle mich bei Copy&Paste sehr unwohl. Ein Spagat ist mir in dieser Sache neulich öfters gelungen, als ich mich zur Reduktion aufs Wesentliche gezwungen habe. Damit lief ich bei API und Architektur Designs um einiges besser, einige hilfreiche Ressourcen in meinem Prozess …
https://2014.jsconf.eu/speakers/sebastian-markbage-minimal-api-surface-area-learning-patterns-instead-of-frameworks.html
https://blog.logrocket.com/common-api-mistakes-and-how-to-avoid-them-804fbcb9cc4b
https://en.wikipedia.org/wiki/Robustness_principle
https://codeburst.io/understanding-solid-principles-open-closed-principle-e2b588b6491f
Facebook hat ein neues Internationalisierung Framework FBT veröffentlicht steht dem i18n und i10n gegenüber
https://facebookincubator.github.io/fbt/
Alternativen i18n und l10n
https://www.i18next.com/
https://blog.mozilla.org/l10n/2011/12/14/i18n-vs-l10n-whats-the-diff/
https://www.w3.org/International/questions/qa-i18n
Kleine Einführung für das Handling eigener Content Delivery Networks (CDN) mit NGINX. Vor allem für HTTP Caching Handling ist dieser Ansatz hoch interessant
https://www.youtube.com/watch?v=_UShBpf9RRY
Schöne Beschreibung und Dokumentation des Netzwerk Protokolls DAT. Wären doch einige Protokolle so schön und verständlich dokumentiert…
https://datprotocol.github.io/how-dat-works/
https://blog.datproject.org/2019/01/21/how-dat-works/
Workflow und Tools
Sehr schöne Einführung in das Debugging von CSS und Web Animationen im Chrome Browser und einmal im Firefox
https://blog.logrocket.com/firefox-devtools-for-css-authors-1511f41d1e3
https://webdesign.tutsplus.com/articles/quick-tip-chrome-animation-dev-tools–cms-31505
Sehr gute Einführung wie mittels NPM JavaScript Code mit anderen Mitmenschen geteilt werden kann, Stichwort: NPM Package Publishing Intro. Zudem wird ein erstes initiales Projektsetup mit Mocha, Istanbul, ESLint usw. erklärt.
https://auth0.com/blog/developing-npm-packages/
Die Konsole, Terminal oder Bash Coding wird häufig als absoluter Geekkram interpretiert. Mich erinnert es auch immer an meine 386er DOS und NortonCommander Zeit. Wieauchimmer, die Konsole hält megapower inne und erlaubt mit Shell Skriptings einiges an Automatisierungspotential. Daher sind die Grundfunktionen für alle Computernutzer ein sehr hilfreich. Anbei eine schöne Einführung
https://flaviocopes.com/bash/
https://medium.freecodecamp.org/coding-like-a-hacker-in-the-terminal-79e22954968e
https://github.com/alebcay/awesome-shell
Der Befehl und Workflow rund um git bisect war mir bisher unbekannt, ist aber sehr hilfreich für Bugfixing und diverse Commit Vergleich Prozedere
https://flaviocopes.com/git-bisect/
Automatisierte Konfiguration und Deployment mit Ansible und dessen Prinzipien gut erklärt, vor allem die kleine Grafik mit Change Frequency finde ich sehr einprägend.
https://opensource.com/article/19/1/automating-deployment-strategies-ansible
Ich benutze sehr gern Postman um mit REST APIs herum zuspielen. Nun können sogar die vordefinierten HTTP Request Konfigurationen mit Git verwaltet werden.
https://blog.getpostman.com/2019/01/11/backup-your-collections-on-a-custom-domain-in-your-git-repositories%ef%bb%bf/
Schöne Einführung in Github Pages als technisches DokumentationsWerkzeug. Wie es mit Markdown, Navigation und sogar mit VueJS Komponenten sehr gut zusammenarbeitet. Eine lesenswerte Einführung
https://itnext.io/create-compelling-documentation-with-github-pages-16e4149efe9e
Web Security
Eine schöne, kurze und prägnante Übersicht von empfohlenen Sicherheitsmaßnahmen aus Benutzersicht (kann man auch direkt an Arbeitskollegen weiterleiten)
https://securitycheckli.st/
Schöne Security CheckList aus Developersicht
https://blog.risingstack.com/node-js-security-checklist/
https://github.com/shieldfy/API-Security-Checklist
Ein kompletter 3Std VideoKurs über Web App Penetrating Testing for Ethical Hacking
https://www.freecodecamp.org/news/web-app-penetration-testing-full-course/
Ein weitere sehr ekliges Security Problem existiert in der JavaScript Welt im Zusammenspiel mit Json.parse() und dem __proto__ Objekt. Wenn man nicht aufpasst, kann so Fremdcode mit sehr schlimmen Folgen in die Web App injected werden
https://medium.com/intrinsic/javascript-prototype-poisoning-vulnerabilities-in-the-wild-7bc15347c96
https://hueniverse.com/a-tale-of-prototype-poisoning-2610fa170061
Häufig liste ich hier Links auf wie Token und andere Keys an die Web App sich weitergegeben werden (wie z.B. Environment Variabels). Allerdings gibt es einen weiteren Angriffsfaktor… Tokens und Keys in eurem Git Repo. Anbei ein paar Tools wie auch diese sicherer verwaltet werden können.
https://medium.freecodecamp.org/how-to-securely-store-api-keys-4ff3ea19ebda
Schöne prägnante Übersicht über die Basics der Web Authentication
https://blog.risingstack.com/web-authentication-methods-explained/
https://ponyfoo.com/articles/okta-auth0-and-the-goblet-of-identity
https://webauthn.guide/
Kritische Stimmen zur Authentifizierung und Identity im Web
https://developer.okta.com/blog/2019/01/23/nobody-cares-about-oauth-or-openid-connect
https://www.scottbrady91.com/OAuth/Why-Developers-Do-Care-About-OAuth-and-OpenID-Connect
Encrypte immer aller User Passwörter oder benutze Hardware Tokens
https://tamalweb.com/how-to-properly-handle-your-users-passwords
https://medium.com/@herrjemand/introduction-to-webauthn-api-5fd1fb46c285
Sehr guter Developer Blog zum Thema
https://www.scottbrady91.com/
Account Erstellung und Portable Benutzereinstellungen mit geringen LockIn Effekt ist meiner Meinung gut mit OAuth2 zu realisieren. Aus diesem Grund halte ich für wichtig die Grundlagen dieses Authentifizierung Protokoll zu verstehen.
https://dev.to/simov/oauth-simplified-2pbd
https://dev.to/simov/oauth-like-a-boss-2m3b
Schöner Intro Talk über OAuth
https://www.youtube.com/watch?v=wA4kqKFua2Q
OAuth für das Open Web und in der Indie Web Community
https://www.youtube.com/watch?v=EeCNlB7v08I
https://aaronparecki.com/2018/07/07/7/oauth-for-the-open-web
Sehr aufschlussreicher Artikel über das Handling von API Keys und Secrets für Web Apps im Zusammenhang mit OAuth
https://developer.okta.com/blog/2019/01/22/oauth-api-keys-arent-safe-in-mobile-apps
Das Speichern und Erneuerng Access Token in Single Page Apps ist keine triviale Angelegenheit. In einem Vortrag hörte ich erstmals von Silent Auth Refresh Ansatz für OAuth Acces Tokens mit Hilfe von iFrames, so dass die Seite und der Application State nicht immer komplett neu geladen werden muss. Im OAuth Jargon wird dieser Prozess auch implicit Flow genannt, wie auch immer ein bissl mehr Kontext hat mir sehr geholfen um dieses Verfahren besser zu verstehen…
https://www.scottbrady91.com/OpenID-Connect/Silent-Refresh-Refreshing-Access-Tokens-when-using-the-Implicit-Flow
https://stackoverflow.com/questions/50285286/how-does-a-spa-extract-access-token-in-oauth2-implicit-flow
https://damienbod.com/2017/06/02/implementing-a-silent-token-renew-in-angular-for-the-openid-connect-implicit-flow/
https://www.vuemastery.com/conferences/vueconf-toronto-2018/a-token-walks-into-a-spa
https://auth0.com/docs/api-auth/tutorials/implicit-grant
Schönes hilfreiche Artikel und Tooling zur Sicherheit von webbasierten Desktop Apps mit Electron
https://twitter.com/Doyensec/status/1088519887595671553?s=17
https://blog.doyensec.com/2019/01/24/electronegativity.html
https://github.com/doyensec/electronegativity
Auth und Identity Server für die Absicherung eigener Webservices usw.
https://identityserver.io/
https://www.keycloak.org/
https://www.heise.de/developer/artikel/Eine-Identitaet-fuer-alles-mit-Keycloak-3834525.html
Verschlüsselte Verbindungen per HTTPS und SSL Zertifikat Management in lokalen Netzwerken oder auf dem eigenen Dev Rechner ist nicht so einfach. Das Tool Mkcert erstellt eine eigene Zertifizierungs-stelle (kurz: CA) und ermöglicht so ein gültiges SSL Zertifikat für den eigenen Rechner.
https://www.golem.de/news/tls-zertifikate-mkcert-vereinfacht-web-entwicklung-mit-lokalem-https-1901-138545.html
https://marmelab.com/blog/2019/01/23/https-in-development.html
https://blog.filippo.io/mkcert-valid-https-certificates-for-localhost/
https://github.com/FiloSottile/mkcert
Für interne Netzwerke und Microservices wird ein eigener CA Manager verwendet (Achtung sehr komplex und wird z.T. eher in Web Hosting Unternehmen eingesetzt)
https://blog.heckel.xyz/2018/08/05/issuing-lets-encrypt-certificates-for-65000-internal-servers/
https://github.com/letsencrypt/boulder
https://github.com/cloudflare/cfssl/
https://github.com/jsha/minica
https://pypi.org/project/certsling/
SSL und HTTPS Workaround am Beispiel Plex
https://blog.filippo.io/how-plex-is-doing-https-for-all-its-users/
Configure your PF Sense Router with SSL
https://www.reddit.com/r/PFSENSE/comments/5v6b0a/how_to_acme_lets_encrypt_dns_manual/
https://www.reddit.com/r/homelab/comments/63ntto/lets_encrypt_on_pfsense/
VueJS spezifisch
Ein paar allgemeine Tipps zur Entwicklung und täglichen Arbeit mit VueJS von einigen Leuchtturm-Entwickler (Gatekeepers) aus der VueJS Community
https://medium.com/vue-mastery/10-vue-js-pro-tips-from-vue-masters-2bf6131e7fe0
weitere Tipps
https://blog.usejournal.com/vue-js-best-practices-c5da8d7af48d
https://medium.com/vuetify/productivity-in-vue-part-1-de56e9c1d97d
https://medium.com/@john.j.leider/productivity-in-vue-part-2-1dc209062cae
Nette Idee die User Experience für rechenintensive Aufgaben mit einer Email oder Web Notification zu verbessern und im Backend kommt dann eine Message Queues zur Anwendung. Hier am Beispiel VueJS mit Laravel Queue API
https://vuejsdevelopers.com/2019/01/07/ux-intensive-processing-web-apps-vue-laravel/
VueDose liefert regelmäßig neue praktische Kniffe für den VueJS Entwickler Alltag. Diesen Tipp der Performance Analyse finde ich sehr teilenswert
https://vuedose.tips/tips/2/
Performance, Data Bindings und Reactive Variablen sind immer so eine Sache. Einführung in sehr VueJS spezifische Verhaltensweisen
https://www.bennadel.com/blog/3555-updating-reactive-values-can-cause-some-non-reactive-values-to-re-render-in-vue-js-2-5-21.htm
https://vuedose.tips/tips/1/
First Paint und Time-to-Interactive sind wichtige Messindikatoren für Web Performance. Aus verschiedenen Gründen wird ein Server Side Rendering bevorzugt, das dann wieder im laufenden Prozess in ein Client Side Rendering umgewandelt wird (auch Hydration Prozess genannt). Das kann aber zum Teil einen Bumerang Effekt auf die Performance haben, wenn dies falsch eingesetzt wird. Ein Ausweg kann dieser Lazy Hydration Architektur Ansatz liefern.
https://markus.oberlehner.net/blog/how-to-drastically-reduce-estimated-input-latency-and-time-to-interactive-of-ssr-vue-applications/
https://addyosmani.com/blog/rehydration/
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
https://addyosmani.com/blog/usability/
https://medium.com/@mrodal/how-to-make-lazy-loading-actually-work-in-vue-cli-3-7f3f88cfb102
Schöne Ergänzung zu Evan You’s Talk uber VueJs 3 und kommenden Neuerungen mit kleinem Ausblick
https://medium.com/@mattmaribojoc/what-does-vue-3-0-mean-for-web-development-851052fc0138
Weitere Stichworte für gute Web Performance sind Code Splitting und Lazy Loading (auch zum Teil Asynchrone Komponenten genannt) von Inhalten.
https://www.vuemastery.com/conferences/vueconf-us-2018/code-splitting-patters-vuejs-sean-thomas-larkin/
https://www.vuemastery.com/conferences/vueconf-toronto-2018/light-lazy-asynchronous-patterns-for-vue
https://itnext.io/vue-js-app-performance-optimization-part-1-introduction-to-performance-optimization-and-lazy-29e4ff101019
https://calendar.perfplanet.com/2018/all-about-prefetching/
https://addyosmani.com/blog/prefetching/
https://www.smashingmagazine.com/2018/10/smart-bundling-legacy-code-browsers/
Schöne Zusammenfassung gängiger APIs um Wiederverwendbarkeit von VueJS Komponenten aus der React Devloper Sicht zu designen
https://www.bignerdranch.com/blog/from-react-to-vue-re-vue-sable-components/
Schöner ausführlicher Artikel für die Entwicklung eigener Direktiven in VueJS und wie man diese per NPM mit der Community teilen kann
https://itnext.io/making-and-publishing-a-v-drag-directive-to-npm-6d20a80dedba
https://medium.com/@haixiang6123/vue-custom-directives-f32134353a73
Beispiel guter Direktiven API
https://baianat.github.io/vee-validate/api/directive.html
Im NodeJS sowie auch im VueJS Ecosystem existiert die nextTick() API. Ein schöner Artikel über die API und für welche “Use Cases” diese sehr gut genutzt werden kann, wie z.B. Das Abwarten bis alle Child Komponenten “mounted” sind um dann anschließend auch über diese Kindelemente die HTML DOM Manipulation durchführen zu können (wie es bei Renderless Components zum Teil vor kommt).
https://vuejsdevelopers.com/2019/01/22/vue-what-is-next-tick/
Ein etwas sehr spezielles Thema im Bereich Authorizierung und User Rechteverwaltung mit OpenID Connect und OAuth im VueJS Ecosystem. Ein super Artikel finde ich…
https://damienbod.com/2019/01/29/securing-a-vue-js-app-using-openid-connect-code-flow-with-pkce-and-identityserver4/
Ich bevorzuge NW.js wegen des etwas einfacheren Einstieg als Electron für webbasierte Desktop Apps. Ein schönes Einsteigertutorial für VueJS Devs
https://dev.to/vuevixens/building-a-desktop-app-with-vue-nwjs-1f9e
Auf dem Berliner VueJS Meetup habe ich erstmals von Johannes Werner VueJS Starter Paket (mit Storybook, PWA config, package.json Config mit pre-commits, usw.) gehört. Nun ist es in der 2. Version erschienen und es sieht noch besser und runder aus als die schon erste gute Version! Schaut es euch an, es lohnt sich!
https://github.com/devCrossNet/vue-starter
https://twitter.com/_jwerner_/status/1086647324426809345
https://www.youtube.com/watch?v=NM2cSBKRtcY
Sehr hilfreicher Artikel VueJS am Praxisbeispiel eines Instagram Clones zu lernen
https://medium.com/fullstackio/tutorial-build-an-instagram-clone-with-vue-js-and-cssgram-24a9f3de0408
Dokumentation ist nicht gerade das Lieblingsthema der Entwickler. Ein paar hilfreiche Tools für die automatische Generierung von VueJS Komponenten Dokus.
https://vuese.org
https://github.com/vuese/vuese#vue-class-component
https://www.npmjs.com/package/@vuedoc/md
Vssue ist ein schönes Werkzeug um Kommentare und Git(Lab/Hub) Issues mit der technischen Dokumentation zu verbinden. Könnte sich auch für einige Design System Dokumentation eignen.
https://vssue.js.org/
Sehr schöne Zusammenfassung zur Test-driven Development mit VueJS und Jest
https://medium.com/@NAPOLEON039/a-guide-to-writing-awesome-unit-tests-for-the-first-time-6eecb6e016ea
Schönes Video Tutorial und Coding Projekt wie JS APIs deklarative als Komponenten umgesetzt werden können. Hier am Beispiel der Web Audio API als Drum Machine
https://www.youtube.com/watch?v=oYyyw9aQTXI&list=PLNqp92_EXZBLGbgK5IK8-AjatQ9844I8e
https://github.com/jherr/vue-drum-machine
https://twitter.com/VueMastery/status/1084466106696384512?s=17
https://css-tricks.com/introduction-web-audio-api/
Schöne Linkliste zu GraphQL / Apollo und VueJS
https://github.com/hasura/awesome-vue-graphql
Übersicht einiger praktischer Komponenten, wie z.B. den Parallax Scroller usw. zur Inspiration
https://medium.com/swlh/8-vue-js-ui-component-for-2019-79fc43d6da79
Exotisches
Einen eigenen Music Streaming Server betreiben mit Koel… So könnte man evtl. die eigene Mp3 Sammlung im lokalen Netzwerk mal verfügbar machen…
https://koel.phanan.net/
https://koel.phanan.net/api-docs/#info
Auf dem Raspberry Pi kann man ja bekanntlich relativ günstig seinen eigenen Kubernetes Server Cluster aufbauen. Eher aus Kennenlern und Übungssicht interessant. Helm ist eine Art Package Manager für Microservices. Anbei zwei, drei Infos für Raspberry Pi Cluster
https://www.scottietse.com/2018/06/01/Install-helm-on-raspberry-Pi-(ARM-device)/
Für den eigenen Git Server mit Raspberry PI seht einem GitLab (CE) und Gogs zu Verfügung. Ob man wirklich self-hosted gehen will, sollte gut überlegt werden. Ohne Backup Plan würde ich auch glaub doch auf die Cloudlösung von Gitlab setzen und hin wieder für Experimente den Stand auf meinen Raspberry PI Git Server spiegeln.
https://about.gitlab.com/install/?version=ce
https://howtoraspberrypi.com/private-git-raspberry-gitlab/
https://hackernoon.com/create-your-own-git-server-using-raspberry-pi-and-gitlab-f64475901a66
https://gogs.io/
https://dev.to/_lunacy_/private-github-with-gogs-and-raspberry-pi-46m3
Einen eigenen Git Server kann man sich sogar schon mit einem Raspberry Pi zusammen bauen. Es geht sogar noch ein Schritt weiter mit einem Gitlab Runner System für eigene Deployments basierend auf dem Raspberry Pi
https://medium.com/@poddingue/arm-your-continuous-integration-system-with-fruits-4111d7e0e0a6
Heroku und Netlify sind bei Entwicklern dank der guten Integration mit Git sehr beliebt. Eine self-hosted und Open-Source PaaS Variante ist Dokku. Ein paar interessante Einblicke.
http://dokku.viewdocs.io/dokku/
https://www.cloudsigma.com/de/aufbau-einer-eigenen-paas-loesung-mit-dokku/
https://medium.com/@pimterry/host-your-node-app-on-dokku-digitalocean-1cb97e3ab041
https://github.com/dokku/dokku/
Für Raspberry Pi abgewandelte Version
https://github.com/rcarmo/piku
Synology oder Qnap NAS Systeme können auch kleine VMs und Docker Container ausführen. Hier am Beispiel von MongoDB in Docker
https://schwabencode.com/Blog/2018/07/23/Run-MongoDB-in-Docker-on-Synology
Schönes Sammlung von Open Data Schnittstellen, wie z.B. Weltbank Daten, WHO Daten, Google Public Data, EU Open Data, UNICEF, Yelp usw. Vielleicht mal praktisch für ein Förderantrag oder ein Info Visualization Projekt
https://medium.freecodecamp.org/https-medium-freecodecamp-org-best-free-open-data-sources-anyone-can-use-a65b514b0f2d
Bin ja doch ziemlich regelmäßig am Twittern von Links und so Zeugs. Dieses WordPress-basierte Twitter Backup sieht auf dem ersten Blick ganz cool aus
https://github.com/kingkool68/wordpress-twitter-backerupper
https://github.com/kingkool68/wordpress-tweet-tweeeeeeeeeet
https://tweets.kingkool68.com/
https://github.com/ozh/ozh-tweet-archive-theme
