Zusammenfassung interessante Artikel, Codesnippets und Talks- 2018 – KW 52

Previous Post

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/

 

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

 

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://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

 

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

 

Previous Post Share Post :

More Posts

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.