Hallo Web und Tüftel Community,
Die letzte Leseempfehlung von mir für das Jahr 2018. Diesmal mit ein paar Sachen im Bereich Unternehmenskultur, Management- und anderen Jobprofilen im allgemeinen Bereich. Danach gibt es zu Frontend Themen (HTML, CSS, JavaScript) bis Server Side Tooling eine bunte Kollektion zum Rosinen picken. Kleine Hardware und Netzwerk basierte Projekte sind irgendwie gerade nicht dabei.
Startet gut rein ins Jahr 2019 und viel Spaß beim Lesen!
Allgemein
Vielleicht ein wenig ungewöhnlich, aber als Bildschirmarbeiter sollte man wirklich auf die Gesundheit seiner Augen achten
https://dev.to/sarthology/the-definitive-guide-to-protecting-your-eyes-for-developers-22jm
Schöne Zusammenfassung von Anforderungen von Frontend Developer denen ich größtenteils zustimme. Sicherlich interessant für den ein oder anderen, genauso wie der Tipp sich von den Framework Trends nicht all zu verrückt zu machen
https://gomakethings.com/what-makes-someone-a-good-front-end-developer/
http://www.zsoltnagy.eu/analyzing-requirements-as-a-tech-lead/
https://sizovs.net/2018/12/17/stop-learning-frameworks/
Gute Zusammenfassung der neuen Tools und Workflows für Websites und Web Apps von seitens Google
https://medium.freecodecamp.org/highlights-from-chrome-dev-summit-2018-c7f1f1a7e6ae
https://web.dev/
Vor einiger Zeit hatte ich eine starke Allrounder Rolle, die viele Aufgaben eines technischen Produktmanager inne hatte. Das Definieren von Anforderungen mittels User Stories fiel für einige UX & Agil-unerfahrende Produktmanager wirklich schwer. Das Jobs-to-done Framework und der Job Atlas ist hierfür ein schönes interdisziplinäres Werkzeug um UX Researchers, UX Designer und Produktmanagern abzuholen und dann die Erkenntnisse in die jeweiligen weiteren Bearbeitungsprozessen zu integrieren. Zudem gibt es auch gute Überschneidungen zu den Entwicklern aus der Domain Driven Design Nische.
https://www.uxmatters.com/mt/archives/2018/11/presenting-ux-research-findings-using-the-jobs-to-be-done-framework.php
Die Gründer von der Projektmanagement Software Basecamp lassen es bekanntlich ruhiger angehen. Das heißt aber nicht weniger Qualität bei der Umsetzung und Gestaltung ihrer Firmenkultur. Einige der Prozesse sind nun öffentlich unter Creative Commons Lizenz einsehbar und auch wiederverwendbar für andere Unternehmen mit ähnlicher Wertekultur.
https://m.signalvnoise.com/all-basecamp-policies-are-now-on-github-and-licensed-under-creative-commons-4f45d91eb5af
https://github.com/basecamp/policies/
https://github.com/basecamp/handbook
Transparenz und offene Kommunikation kann mit Hilfe von Manager Readme Files erreicht werden. Sicherlich nicht in jedem Falle die richtige Lösung, jedoch finde ich besonders als Start in einer neuen Firma als Teamleiter oder andere leitende Position dieses Instrument nicht schlecht
https://managerreadme.com/
https://hackernoon.com/12-manager-readmes-from-silicon-valleys-top-tech-companies-26588a660afe
http://theengineeringmanager.com/growth/why-i-couldnt-write-a-manager-readme/
HTML & CSS & SVG
Sehr schöne Zusammenfassung wie mittels Grid Layouts sehr schnell verschiedene Website Prototypen erstellt werden können
https://medium.freecodecamp.org/how-to-prototype-websites-quickly-with-css-grid-ffc9cba08583
CSS Position Absolute und Relative nochmal sehr schön erklärt, um ein paar kleine Fallen für die Zukunft zu vermeiden.
https://medium.freecodecamp.org/how-to-understand-css-position-absolute-once-and-for-all-b71ca10cd3fd
Range Slider sind ganz schön ein Horror wenn es darum geht diese an ein Corporate Design anzupassen. Eine sehr ausführliche und hilfreiche Dokumentation um dies auch nach der Progressive Enhancement Methodik zu implementieren
https://css-tricks.com/sliding-nightmare-understanding-range-input/
Manche HTML Tags wie z.B. Video und der Slider sind bereits als Web Componenten umgesetzt. Ein weiteres hilfreiches Tool ist der CSS Doodler als Pattern Generator. Sehr inspirierend aus Design und Entwicklersicht
https://css-doodle.com/
https://codepen.io/yuanchuan/pen/NLXZLm
https://twitter.com/yuanchuan23/status/1078309736838180866
Semantisches und barrierfreies HTML ist eng miteinander verbunden. Anbei ein schönes Cheatsheet in HTML Form… Viewsource im den Browser Entwicklertools ist euer Freund und Helfer
https://ericwbailey.github.io/accessible-html-content-patterns/
HTML Metatags richtig setzen ist für die Suchmaschinen und andere Crawler hochrelevant, anbei ein hilfreiches Tool
https://metatags.io/
https://github.com/jkphl/micrometa/
Sehr schöne kurzer knackiger Artikel über arial-live Attribute für einen barrierefreien Verhaltenslayer der eigenen Website oder Webapp. Liest sich wunderbar während der 10-15min Fahrt im Bus oder in der S-Bahn.
https://bitsofco.de/using-aria-live/
Wie in vorherigen Zusammenfassung erwähnt, ist die Web Typographie und Performance beim Font Loading nicht so mein Spezialgebiet. Ein paar Hintergrundinfos für mich und vielleicht auch für andere relevant
https://font-display.glitch.me/
https://wp-rocket.me/blog/guide-web-font-optimization/
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#webfonts_and_the_critical_rendering_path
https://www.filamentgroup.com/lab/js-web-fonts.html
https://vimeo.com/241111413
Web Performance ist stark verbunden mit dem Laden der richtigen Dateien mit der richtigen Dateigröße. Anbei ein paar Tipps zu den unterschiedlichen Lademodi und das Arbeiten mit CSS
https://csswizardry.com/2018/11/css-and-network-performance/
https://calendar.perfplanet.com/2018/all-about-prefetching/
JavaScript spezifisch
Funktionen übernehmen in der JavaScript Welt einer der wichtigsten Rollen, jedoch tue ich mir immer wieder schwer die Unterschiede der Funktionshelfer call, apply und bind klar zu benennen. Dieser Artikel schlägt eine guten Trick vor, sich die Funktionen leichter zu merken
https://medium.freecodecamp.org/the-difference-between-javascripts-call-apply-and-bind-methods-4e69917f77bd
Sehr schöne Erklärung und Einführung in die Cache API in Verbindung mit den Service Worker. In diesem Rahmen hat Ire Aderinokun eine sehr schöne Offline First Videotutorialreihe erstellt.
https://bitsofco.de/cache-api-101/
https://bitsofco.de/going-offline-first/
Ob man als JavaScript Entwickler wirklich moralische Produktdesignentscheidungen treffen kann, bin ich mir nicht sicher. Dennoch solltet man sich über die Möglichkeiten von JavaScript bewusst sein, um in Zukunft eine eigenen fundierten Standpunkt zu beziehen. In diesem Sinne zwei interessante Artikeln und weitere allgemeine Referenzen
https://medium.com/javascript-scene/a-new-hope-e2021fce7c7b
https://www.deque.com/blog/javascript-and-civil-rights/
https://ethicalweb.org/
https://fairwebservices.org/
https://jaxenter.com/developers-must-consider-privacy-152492.html
https://www.thegreenwebfoundation.org/our-story/
https://sustainablewebdesign.org/
Machine Learning mit JavaScript ist seit der TensorFlow.JS Veröffentlichung stark gefragt. Es gibt allerdings auch andere Lösungen. Anbei schöne Tutorials und Tools
https://medium.freecodecamp.org/want-to-learn-neural-networks-heres-a-free-brain-js-course-merry-christmas-ea801f378041
https://scrimba.com/g/gneuralnetworks
https://www.youtube.com/user/shiffman/playlists?view=50&sort=dd&shelf_id=16
http://ml4a.github.io/demos/
https://modeldepot.io/search
Ich bin großer Fan von Modularisierung und Wiederverwendbarkeit von (Inhalts)Strukturen. Bei Contentlastigen Websites wurde das häufig mit Template Engines gelöst (Mustache, Handlebars, ESJ, Twig, usw.). Anbei eine Einführung in Tagged Templates und Strings Literals für Microtemplates Lösungen, so dass im besten (kleinsten) Falle man sogar ohne Template Engine auskommt oder mit einer sehr kleinen JS Library.
https://medium.com/@anywhichway/html-templates-without-frameworks-c479680e9806
https://css-tricks.com/template-literals/
https://viperhtml.js.org/index.html
https://viperhtml.js.org/hyperhtml/examples/#!fw=React&example=Custom%20Component
https://github.com/developit/htm
https://github.com/Polymer/lit-html
https://twitter.com/_egoistlily/status/1076129900694630400?s=17
Schöner schneller Rundumschlag eines möglichen Arbeits- und Toolworkflow für die Entwicklung einer eigenen REST-API im JS Ecosystem
https://medium.freecodecamp.org/how-to-build-blazing-fast-rest-apis-with-node-js-mongodb-fastify-and-swagger-114e062db0c9
https://medium.freecodecamp.org/how-to-setup-a-powerful-api-with-nodejs-graphql-mongodb-hapi-and-swagger-e251ac189649
Webpack kann die Auslieferung und auch das Prototyping von Web Apps mit JavaScript erleichtern und optimieren. Anbei ein paar Herangehensweisen von dynamischen Imports, Assets Optimierung:
https://blog.jscrambler.com/how-to-make-your-app-faster-with-webpack-dynamic-imports/
https://auth0.com/blog/zero-config-javascript-app-prototyping-with-webpack/
https://webpack.jakoblind.no/optimize/
Für mich als stiller Physical Computing Fan ist dieses JavaScript Tutorial mit Raspberry Pi und der PiCamera ein richtig cooles Wochenend Projekt
https://medium.com/@dlacustodio/creating-a-photo-booth-with-a-raspberry-and-javascript-b20db528aee0
https://medium.com/@dlacustodio/creating-a-photo-booth-with-a-raspberry-and-javascript-part-ii-dfcf270e35bb
Software Technik und Architektur
Schöne Erklärung des Strategy Design Pattern anhand verschiedener Authentifizierungs Flows am Ende des Artikels. Sehr hilfreich für die Implementierung eines eigenen OAuth2 Servers oder Client API
https://blog.bitsrc.io/keep-it-simple-with-the-strategy-design-pattern-c36a14c985e9
So schön ich es auch finde eigene APIs zu programmieren und mit anderen zu Teilen. Für und vor einer Veröffentlichung einer eigenen Web API sollte man einiges beachten
https://enterprisersproject.com/article/2018/11/how-explain-apis-plain-english
https://www.programmableweb.com/news/its-time-every-api-to-have-openapi-spec/sponsored-content/2018/12/19
https://medium.com/postman-engineering/discovering-apis-10-must-haves-before-you-set-foot-on-land-9a06740bbc9d
https://youtu.be/6Q3Cc1z-t5U
https://dev.to/antogarand/why-facebooks-api-starts-with-a-for-loop-1eob
Kubernetes ist der neue Schrei um Container zu verwalten und orchestrieren. Anbei ein paar schöne Ressourcen zum Einstieg
https://learnk8s.io/blog/what-is-kubernetes
https://www.weave.works/technologies/the-journey-to-kubernetes/
https://medium.freecodecamp.org/learn-kubernetes-in-under-3-hours-a-detailed-guide-to-orchestrating-containers-114ff420e882
https://serversforhackers.com/t/containers
Seit 2010 ist Funktionale Programmierung wieder stark im kommen. Anbei einige Potentiale dieses Ansatzes im Cloud Computing
https://techbeacon.com/4-functional-programming-advances-will-redefine-app-dev-cloud
Immer wieder interessant zu lesen wie Hochleistungsservices wie hier z.B. von Netflix mit ihren GraphQL API Implementierungen umgehen
https://medium.com/netflix-techblog/our-learnings-from-adopting-graphql-f099de39ae5f
https://adityasridhar.com/posts/what-is-graphql-and-how-to-use-it
Workflow und Tools
Manchmal ist mein Hirn ein Sieb, Cheatsheets für alles mögliche helfen mir dabei solche Low-Performance Tage gut zu überstehen
https://digital.com/tools/html-cheatsheet/
https://www.onblastblog.com/css3-cheat-sheet/
https://bitsofco.de/the-accessibility-cheatsheet/
https://moritzgiessmann.de/accessibility-cheatsheet/
https://devhints.io/es6
https://devhints.io/bash
https://www.git-tower.com/blog/git-cheat-sheet/
https://services.github.com/on-demand/downloads/github-git-cheat-sheet.pdf
https://www.vuemastery.com/vue-cheat-sheet/
http://nerdcave.com/tailwind-cheat-sheet
https://devhints.io/
Aktuell bin ich am evaluieren in welcher Form eine bestehenden WordPress Seite am besten technisch redesigned werden kann um sehr komfortabel und schnell auf neue Anforderungswünsche im Frontend und manchmal im Backend zu reagieren. Eine monolitische Lösung mit Themes und Plugins finde ich irgendwie nicht so attraktiv. Getrenntes Frontend und Backend macht durchaus Sinn… Aus diesem Grund habe ich mal in das Trendthema Static Site Generatoren näher betrachtet
https://medium.freecodecamp.org/why-you-should-use-gatsbyjs-to-build-static-sites-4f90eb6d1a7b
https://blog.bitsrc.io/9-react-static-site-generators-for-2019-f54a66e519d2
https://dev.to/mittalyashu/gatsby-for-react-and-gridsome-for-vuejs-281c
https://gridsome.org/
https://medium.freecodecamp.org/the-12-things-you-need-to-consider-when-evaluating-any-new-javascript-library-3908c4ed3f49
Performanance und Logging Tools wie Nagios, NodeJS Clinic und NetData können die Fehleranalyse und -behebung von Web Services und Infrastrukturen massiv erleichtern.
https://www.nagios.com/
https://my-netdata.io/
https://clinicjs.org/
https://prometheus.io/
https://grafana.com/
https://xavierberger.github.io/RPi-Monitor-docs/ (im Kleinen)
Schönes Beispiel eines komplexen erfolgreichen Monitorings mit Problemanalyse
https://blog.risingstack.com/nodejs-microservices-scaling-case-study/
Ein paar Anregungen wie Bild Assetmanagement automatisiert bzw. optimiert werden kann. Alternativ dazu können eigene Serverapplikationen verwendet werden
https://bitsofco.de/why-and-how-to-use-webp-images-today/
https://images.guide/
http://thumbor.org/ und https://thumbor.readthedocs.io/en/latest/usage.html
https://github.com/h2non/imaginary/
https://cloudinary.com/
Kleine Übersicht und Mindestanforderungen für das Veröffentlichen von NPM Packages
https://dev.to/uf4no/npm-behind-the-scenes-and-publish-guide-4gi8
Github Issues können nun auch in andere Repo’s übertragen werden. Sicherlich hilfreich für den ein oder anderen Use Case
https://twitter.com/getFarmier/status/1072888865801805824?s=17
Weitere Einführungen und Workflow mit Git
https://dev.to/linxea/git-github-gitflow-4c6n
http://rogerdudler.github.io/git-guide/
https://lennerd.github.io/git-for-beginners/
https://medium.freecodecamp.org/now-that-youre-not-afraid-of-git-anymore-here-s-how-to-leverage-what-you-know-11e710c7f37b
Managing API Calls und Dokumentation mit Postman
https://auth0.com/blog/manage-a-collection-of-secure-api-endpoints-with-postman/
http://blog.getpostman.com/2018/12/11/postman-supports-openapi-3-0/
Web Security
Eine schöne Erklärung von verschiedenen OAuth Flows für Native und Mobile Apps im Rahmen des OAuth2 Standards
https://developer.okta.com/blog/2018/12/13/oauth-2-for-native-and-mobile-apps
Ein paar schöne grundsätzliche Tipps für das (sichere) Arbeiten mit der Cloud
https://dev.to/aditichaudhry92/how-to-be-secure-in-the-cloud-2pnp
VueJS spezifisch
Sehr interessanter brauchbarer Blogartikel einzelne UI Widgets mit Vue, Tailwind und modularen CSS implementieren
https://stefanzweifel.io/posts/how-to-use-tailwind-css-in-vue-together-with-css-modules
Ein paar Tipps für die Entwicklung komplexerer VueJS Apps
http://www.maxpou.fr/3-tips-scaling-vue-application
https://medium.com/javascript-in-plain-english/real-life-use-cases-for-computed-properties-in-vue-js-5fdeecbeb3b3
Ein Überblick einer simplen App mit Vue und TypeScript
https://medium.com/@lachlanmiller_52885/how-i-do-vue-in-2019-typescript-and-tsx-6b648a4decd3
Vue Router sind ein mächtiges Werkzeug mit einigen guten Hooks/Guards. Anbei ein paar Erklärungen wann welcher Hook für welchen Anwendungsfall am besten verwendet werden sollte
https://medium.com/@arieldi/yes-this-is-how-vue-router-guards-work-when-to-use-them-ed7e34946211
https://itnext.io/vue-custom-route-hooks-3f50cc30bb87
https://itnext.io/anyway-heres-how-to-create-a-multiple-layout-system-with-vue-and-vue-router-b379baa91a05
https://css-tricks.com/storing-and-using-the-last-known-route-in-vue/
Das Zusammenspiel zwischen VueJS und anderen Servertechnologien mit Python und PHP ist nicht immer so intuitiv und klar verständlich, vor allem wenn dann noch der Webpack mit ins Spiel kommt. Anbei ein paar Eindrücke
https://vuejsdevelopers.com/2018/05/07/vue-js-backends-express-laravel-firebase-wordpress-django-rails/
https://medium.com/@rodrigosmaniotto/integrating-django-and-vuejs-with-vue-cli-3-and-webpack-loader-145c3b98501a
https://vuejsdevelopers.com/2017/11/20/vuebnb-full-stack-laravel/ und https://github.com/fsvwd/vuebnb
https://medium.com/@sergeyermakov/vue-js-advanced-beginners-guide-part-1-vue-node-koa-webpack-bb3bf0a0967d
Ein weiteres Boilerplate für ein Styleguide Driven Development mit VueJS mit dem Namen Cion
https://cion.visualjerk.de/
https://styleguide.cion.visualjerk.de/
https://vuejsfeed.com/blog/cion-design-system-boilerplate-for-vue-js
Die Coding Ergonomik ist bei Scoped-Slots und dessen Datenmanipulation in der VueJS Community ein heiß diskutiertes Thema. Anbei ein Einstieg ins Thema mit anschließend ein paar Workarounds und Diskussionen. Mal schauen wie sich die API in dieser Sache in Zukunft entwickelt
https://www.youtube.com/watch?v=6cn3xyK4Alk
https://dev.to/loilo92/an-approach-to-vuejs-template-variables-5aik
https://github.com/posva/vue-local-scope
https://github.com/vuejs/vue/issues/9180#issuecomment-446815308
VueJS Komponente für Clientseitiges Bildupload und Skalierung
https://vuejsexamples.com/a-simple-vue-component-for-client-side-image-upload-with-resizing/
VueJS Komponente für die Verarbeitung von CSV Datenstrukturen
https://vuejsexamples.com/vue-js-component-to-handle-csv-uploads-with-field-mapping/
Einfache Admin Oberflächen basierend auf REST CRUD Operationenen zusammenbauen, geht mit…
https://github.com/Cambalab/vue-admin/blob/develop/Docs/Resource.md
https://github.com/Cambalab/vue-admin
Such-und Filter User Interfaces kommen oberflächlich einfach daher, doch in der Implementierungsphase hatte ich schon böse Überraschungseffekte in Sachen Komplexität (in Usability, Performance im Frontend und Backend Bereich) erlebt. Anbei UI Inspirationen aus der VueJS Community
https://medium.appbase.io/vue-js-components-for-building-search-uis-7b2a1b6fe159
https://medium.appbase.io/learn-how-to-build-a-github-search-explorer-app-with-vue-js-c66f61d6e152
Ein paar Anregungen zum Editor Tooling für die Entwicklung mit VueJS und weiteres um den Entwickler Alltag zu erleichtern
https://medium.com/vuetify/productivity-in-vue-part-1-de56e9c1d97d
https://dev.to/teamxenox/pro-tips-for-visual-studio-code-to-be-productive-in-2018–1jek
Ein schönes Beispiel Template für VueJS Präsentation
https://slides.com/dobromir/free-vue-slides-deck
