Tragikomische Web-Performance-Verschimmerung einer SPA mit Anna und Christina

Lustiger und lehrreicher Versuch, die Performance einer Single-Page-Applikation zugrunde zu richten: Präsentation mit Live-Demo beim Online-Meetup am Mittwoch, 17. Juni 2020 (wird nicht aufgezeichnet):

Anleitung zum Unglücklichsein –
SPA (Slow Pace Application)

CGNwebperf Meetup 30 Poster

Du möchtest deinen Nutzern eine möglichst schlecht benutzbare und unperformante SPA zur Verfügung stellen? Dann ist dies genau der richtige Talk für dich! Wir zeigen dir heute eine nette kleine performante SPA und werden diese dann Schritt für Schritt verschlimmern, sodass Nutzer eine möglichst schlechte Erfahrung haben und den Tab einfach nur frustriert schließen wollen 😀 Der Talk wird auf unterhaltsame Weise darauf eingehen, wie man die Performance einer SPA sinnvoll misst, wie man die Messergebnisse interpretiert und was typische Performance-Blocker in JavaScript, React, HTML und CSS sind.

https://www.meetup.com/cologne-germany-high-performance-website-optimization-group/events/268706547/

Digital Nomads und das Home Office-Dilemma

Viele wollen gerne Home-Office machen und dürfen nicht, aber wenn man es darf oder gar muss, freut man sich vielleicht auch schnell wieder über die Reisetage mit Bahn, Büro, Meetings und gemeinsamer Mittagspause.

"Bald wieder raus aus dem Home-Office" Schriftzug auf einer Litfasssäule
“Bald wieder raus aus dem Home-Office” Werbung auf einer Litfasssäule

Das Arbeiten von zu Hause zeigt auch, welche Probleme das 2020 immer noch mit sich bringen kann, aber generell funktioniert es fachlich überraschend gut, und anlässlich der globalen Corona-Pandemie sind Alternativen zur Präsenzkultur und häufigen Dienstreisen dringend nötig. Wichtig sind vor allem Kommunikation, Dokumentation und Selbstdisziplin, also Tugenden die auch bei der gemeinsamen Arbeit am gleichen Standort nicht verkehrt sind.

Die romantische Utopie des Digital Nomad ist ein reisender Lebensstil, der es einem erlaubt, quasi von überall aus zu arbeiten. Selbst in den digitalen Berufen keine Selbstverständlichkeit. Arbeiten, wo andere Urlaub machen: möchte man das wirklich? Oder doch lieber arbeiten, wo andere arbeiten und Urlaub machen, wo andere Urlaub machen?

Green IT: ökologische Nachhaltigkeit und Umweltverträglichkeit der IT

Ich halte die ökologische Nachhaltigkeit und Umweltverträglichkeit der IT für ein Thema, bzw. einen Themenbereich, der bisher viel zu wenig Beachtung fand. Softwareentwicklung, DevOps: Green IT, Web Performace, Datensparsamkeit. Aus Kundensicht: Kauf und Nutzung von Geräten (Fairphone?)

Ende 2019 fand dazu in Köln ein spannendes Meetup statt: SOS 2019 – Sustainable Off-Site Meeting: Creating a web for a better future bei dem von Sabine Büttner und Aminata Sidibe in Form einer Futurespective, also einer Retrospektive aus Sicht der Zukunft, eine zukünftige Entwicklung des Marktes hin zu mehr ökologischer Nachhaltigkeit skizziert wurde. Tim Schumacher stellte die Suchmaschine Ecosia vor, die den Gewinn aus Affiliate-Werbung dazu nutzt, weltweite Aufforstungsprojekte zu finanzieren. Dieses pragmatische Konzept funktioniert inzwischen sehr gut, jedoch hatte Tim anzumerken, dass gerade aus Deutschland die meiste Kritik käme, da offenbar vielen nur das Einhunderprozentige gut genug sei, und das, Anmerkung von mir, in einem Land, in dem viele mit dem sprithungrigen SUV zum Bioladen fahren.

Inzwischen gibt es auch Versuche, den “ökologischen Fußabdruck” über den CO2-Verbrauch von Websites zu schätzen. Obwohl ich die Idee zu schätzen weiß, halte ich die bisherigen Umsetzungen für fragwürdig, da hier sehr viele Faktoren zusammenspielen, Serverstandort, Technologie und Stromquellen, Datenströme über Provider und Rechenzentren, lokale Geräte und deren Leistungsfähigkeit. Auf meinem privaten, mehr als zehn Jahre alten, Laptop, erweisen sich viele Websites als Performancekiller, die aber auf modernen Geräten dank GPU-Unterstützung und sonstiger Optimierung viel besser funktionieren.

Insgesamt sollten wir uns sowohl als Verbraucher, als auch als Dienstleister nicht nur als kleine Rädchen im System sehen, sondern unsere Entscheidungen und unsere Stimmen nutzen, um unseren Teil zu den richtigen Entscheidungen beizutragen.

Meetup-Kultur

Ingo Steinke mit Laptop und grünem "Woodhack"-T-Shirt vor einer Wand aus BirkenstämmenIn den letzten Jahren habe ich viele “Meetups” zu unterschiedlichen, größtenteils technologischen Themen besucht. Meistens gibt es einen oder mehrere Vorträge oder Workshops mit anschließender Diskussion.
Mich reizen dabei der “Blick über den Tellerrand” der eigenen Projekte und der fachliche Austausch über Firmengrenzen hinweg – und ich lasse mich gerne überraschen und inspirieren.

Im Gegensatz zu früheren Gastvorlesungen und Nerd-Stammtischen hat sich in den letzten Jahren in Städten wie Köln, Düsseldorf und Berlin eine bunte Szene entwickelt, die sich nach Feierabend zu kostenlosen Fachvorträgen, Diskussionen und gelegentlich auch gemeinsamen Mini-Projekten trifft und in den Pausen bei Snacks und Freigetränken Kontakte knüpft oder Erfahrungen und Anekdoten austauscht.

Hier hat sich eine “Open Mind Culture” entwickelt, die vielleicht auch andere Branchen inspirieren könnte. Es folgen Links zu einigen Veranstaltungen, die mir in Erinnerung geblieben sind.

Foto eines Meetups bei Sipgate mit Blumen im Vordergrund
Meetup mit Blumen (Foto: Sipgate)

Rückblich auf Meetups in Düsseldorf und Köln

Bei WebWorkerNRW berichtete Marco Zehe über Barrierefreiheit.

Una Kravets stellte bei den Hafentalks ihre Erfahrungen mit Design Systems vor.
Why Design Systems Fail by Una Kravets

Foto vom Web Perfomance Meetup bei Sevenval
Lightning Talks (Foto: Sevenval)

Kurze “Blitvorträge”, auf Englisch “Lightning Talks” kommen meist nicht allein und geben einer Veranstaltung den Reiz der Vielfalt. Ein besonders schönes Treffen dieser Art war das Nikolaus-Special der Cologne Web Performance Group Ende des letzten Jahres bei Sevenval, über das ich diesen Blogartikel geschrieben habe:
www.sevenval.com/blog/culture/cgnwebperf-meetup-nikolausspecial/

Der Fachbereich Informatik der Düsseldorfer Heinrich-Heine-Uni lädt schon seit vielen Jahren zu interessanten Gastvorlesungen. Die Architektur der 1960er Jahre und das einfache Catering können und wollen nicht mit der Hipster-Welt des Medienhafens mithalten, was aber niemanden davon abhält, bei interessanten Themen einen großen Hörsaal zu füllen.

Esther Seyffarth berichtete hier über Computerlinguistik und Dr. Carola Lilienthal über langlebige Softwarearchitekturen und den Weg aus technischen Schulden.

Seb Lee Delisles Hafentalk “The Joy of Code” im Düsseldorfer Invision-Büro ging weniger um die Freude am Coding(prozess) sondern um künstlerische Anwendungen die Staunen und Freude hervorrufen, darunter eine interaktive Kunstinstallation mit selbstgebauten Laserkanonen:
events.invision.de/hafentalks-6-seb-lee-delisle/

“Tree Shaking” ist dagegen nicht wörtlich zu verstehen, sondern als Bereinigung der Software von unnützem Programmcode, wie Alexander Thurn beim Cologne Web Performance Meetup auch mit praktischen Beispielen vorführte:
CGNwebperf #13 with Ingo Steinke and Alexander Thurn

Spektakulär verschätzt hatte sich die ARD mit einer interaktiven Quizshow. Wie das Kölner Startup Stormforger helfen konnte, erzählte Sebastian Cohnen bei WebWorker NRW und bei CGNwebperf.
stormforger.com/blog/2014/05/27/load-testing-an-interactive-tv-show-with-over-1-million-users/

Doug Sillars sprach in Köln und Düsseldorf über Bildoptimierung und Preloading mit Platzhaltern:
Delivering Beautiful and Fast Images and Video by Doug Sillars und über Web Video: CGNwebperf #28: Video killed my data plan: adding video to websites without breaking the bank.

Nachhaltigkeit und Müllvermeidung

Nachhaltigkeit und Müllvermeidung sind besser als das “Entsorgen”, erst Recht in einem Land mit zweifelhafter Recyclingquote (vgl. “Deutschland, Recyclingland?”, FAZ, September 2018; “Die Plastik-Lüge”, Die ZEIT, April 2018 ).

Die Bloggerin Shia Su hat sich als “Wasteland Rebel” radikal gegen die Wegwerfgesellschaft entschieden ohne dabei auf die Annehmlichkeiten eines modernen Lebens zu verzichten.

“Wasteland Rebel” Shia Su

Das Zero-Waste-Motto “Refuse, Reduce, Reuse, Recycle, Rot” hilft außerdem dabei, Geld zu sparen. Details und Anregungen sind in ihrem Buch “Zero Waste” und in ihrem Blog “Wasteland Rebel” zu finden.

Verpackungsfreie Läden

Auch im Handel setzt langsam ein Umdenken ein. Cafes und Bäckereien füllen Kaffee in mitgebrachte Mehrwegbecher und in Unverpackt-Läden wie der “Flinse” in Düsseldorf-Flingern werden Lebensmittel ganz ohne Umverpackung angeboten. Solche Läden sind beispielsweise auf zerowastemap.org zu finden.

Upcycling, Second Hand und Stilbewusstsein

In der Mode hat das Reduce + Reuse-Prinzip in Form von Second-Hand-Läden und Upcycling schon lange einen festen, aber nicht allzu großen Platz. Ein kreativer und stilbewusster Umgang mit Mode kann aber dazu beitragen, Fehlkäufe zu vermeiden und das Geld nicht für vermeintliche Trends auszugeben, die zudem sehr oft unter menschenunwürdigen Bedingungen mit minderwertiger Qualität produziert und massenhaft in den verwechselbaren Modefilialen der großen Ketten auf den Markt geworfen werden. Reduzieren bedeutet nicht, ganz auf Konsum zu verzichten, sondern weniger und dafür bewusster einzukaufen.

Maker und Laptopspender

Selbst in der schnelllebigen Welt der Elektronik und Computertechnik zeigen Maker-Szene und Open-Source-Bewegung, dass nicht jedes Gerät bei Erscheinen eines neueren Modells in den Elektroschrott gehört. Der gemeinnützige Verein Labdoo bereitet gespendete Laptops auf, so dass sie von Bildungseinrichtungen genutzt werden können (hautpsächlich in den so genannten Entwicklungsländern, aber manche deutsche Schule könnte eine solche Technikspende vermutlich auch gut gebrauchen).

Siehe auch: ausgediente Laptops der Bildung spenden
Siehe auch: wastelandrebel.com/de/wohin-mit-kaputten-elektro-geraeten/

Verkehrswende: mobil ohne eigenes Auto

Public Transport Cards “Mein Abo läuft, ich fahre” – Jobticket, Bahncard und OysterCard

Die Verbrennung von Kohle und Diesel im 21. Jahrhundert ist kaum weniger absurd und anachronistisch als es eine Hexenverbrennung wäre, und wenn nach Fahrverboten aufgrund von Dieselskandal und Abgasmanipulation bald nur noch Autos von Tesla und Toyota durch Stuttgart und Wolfsburg fahren, wird auch die deutsche Automobilindustrie auf einmal voll auf Elektro setzen.

Doch ist, wie Eisenbahn-Blogger Niki Schmölz sehr richtig schreibt, die Elektrifizierung des Straßenverkehrs zwar eine Antriebswende, aber damit noch lange keine Verkehrswende: “Zu einer lebenswerten Stadt gehört nicht nur gute Luft, sondern auch genug Platz für Freiraum und Wohnbau. Das Automobil nimmt seit Jahren große Flächen in Anspruch und das wird auch eine Batterie nicht ändern.”

Besonders in der Großstadt ist es ärgerlich und unvernünftig, die Straßen für den täglichen Pendlerstau zu verschwenden, anstelle den öffentlichen Nahverkehr und das Fahrrad fahren stärker zu fördern, so wie beispielsweise die bereits jetzt für ihre Fahrradfreundlichkeit bekannte Universitätsstadt Münster ab 2019
die Anschaffung von Lastenfahrrädern finanziell unterstützen will.

Water Crates on a Bike Trailer

Alternativ kann man sich auch einen Fahrradanhänger zulegen, zum Beispiel einen Burley Travoy, der sich sehr platzsparend zusammenfalten lässt und mit dem man zwei volle Getränkekisten transportieren kann. Die Anhängerkupplung lässt sich nachträglich an ein vorhandenes Fahrrad anbringen.

Realistisch betrachtet, bleibt es schwer, ganz auf ein eigenes Auto zu verzichten, insbesondere wenn man selbst oder Verwandte ländlich wohnen, aber für das städtische Leben bieten öffentliche Verkehrsmittel, Fahrräder und CarSharing-Konzepte inzwischen viele Möglichkeiten, öfter mal Teil der Lösung anstatt Teil des Problems zu sein.

Buch "Ausfahrt Zukunft" von Frederic Vester Der Duden definiert die Verkehrswende als “grundlegende Umstellung des öffentlichen Verkehrs [besonders mit ökologischen Zielvorstellungen]”. Schon 1991 wurde in Münster ein gleichnamiger Verein (Verkehrswende e.V.) gegründet, aus dem später das CarSharing-Projekt “Stadtteilauto” hervorging.
Die unter dem Titel “Ausfahrt Zukunft” erschienene Studie des Ökologen Frederic Vester forderte schon in den 1980er Jahren zu einer Verkehrswende auf, die leider immer noch mehr Wunsch als Wirklichkeit ist.

Zukunftsromane: KI, Post-Privacy, Post-Identity


Zukunftsromane von Daniel Suarez (BIOS), Dave Eggers (The Circle), Tom Hillenbrandt (Drohnenland), Teri Terry (Slated / Gelöscht) und Ursula Poznanski (Die Verratenen)

Gute Zukunftsliteratur ist gleichermaßen visionär, unterhaltsam und oft auch gesellschaftskritisch. Einige lesenswerte Romane dieses Genres beschäftigen sich mit den Themen Individualität, Freiheit, Transparenz und Überwachung.
Continue reading Zukunftsromane: KI, Post-Privacy, Post-Identity

Blog-Software im Cloud-Zeitalter

Einfach und bequem soll das “bloggen” sein. Als “Influencer” verbreiten Blogger Information und Desinformation, Meinung und Werbung, solange ihre Blogs nicht ausfallen oder gehackt werden. Sicherheit und Datenschutz (vgl. “Recht auf Vergessenwerden”) werden oft ebenso unterschätzt wie die Geschwindigkeit (Web Performance) der Blogsoftware.

Technologisch gesehen bedienen sich die beliebten Blog- und Redaktaionssyste (allen voran WordPress auf 25% aller Websites laut Wirtschaftsmagazin Forbes), dabei der Softwarearchitektur des 20. Jahrhunderts, die beim Einsatz weltweit verteilten Cloud-Systemen schnell an ihre Grenzen stößt.

Einzelner Frachtcontainer auf einem kleinen Ruderboot

So wie der hier gezeigte Transport eines einzelnen Frachtcontainers auf einem kleinen Ruderboot verbessert auch der Einsatz der populären Docker-Container in kleinen Softwareprojekten meist wenig. Die strukturellen Probleme bleiben bestehen. Ein Ausfall oder Hackerangriff auf einen Teil der Software führt dann häufig zum Ausfall des gesamten Systems. Eine moderne skalierbare und ausfallsichere Software in der Cloud setzt stattdessen auf ein dezentrales Netzwerk vieler kleiner Softwareteile, um das Gesamtsystem weniger störungsanfällig zu gestalten. Der Film- und Serienanbieter Netflix betreibt dieses Softwareprinzip sehr erfolgreich im ganz großen Stil.

Als Blog-Software in diesem Sinne besser geeigent sind leichtgewichtige Systeme, die die klassischen Datenbankserver durch versionierbare Dateien ersetzen und die Aufteilung in viele voneinander unabhängige Softwarekomponenten erlauben. Headless CMS wie Directus, abgekoppelte (decoupled) Versionen bestehender CMS, oder andere, für Programmierer vielversprechende Ansätze wie HUGO oder mavo sind allerdings momentan noch keine ernsthafte Alternative für Blogger und Redakteure. Mit der nötigen technischen Erfahrung lässt sich aber auch damit in kurzer Zeit eine Website aufsetzen, wie hier beim Sevenval Hackathon Woodhack als CMS in a Container auf sloppy.io:
Woodhack.de - CMS in a Container
CMS in a container: lightweight content management using hugo
@GoHugoIO + git + docker + @sloppyIO at @sevenval #woodhack #hackathon 2017

Um die Geschwindigkeit bestehender WordPress-Blogs zu verbessern, gibt es verschiedene Ansätze. Zur Verringerung der übertragenen Datenmengen kann man optimierte Themes verweden oder bestehende mithilfe von Plugins komprimieren, wobei letzteres jedoch oft zulasten der Verarbeitungsgeschwindigkeit geht. Zur bechleunigten Auslieferung gleichbelibender Inhalte sollte ein Cache oder Content Delivery Network vorgeschaltet werden. All diese Aufgaben zusammen erledigt wao.io mit einen Varnish Cache, der nachträglichen Minimierung von HTML, CSS und JavaScript sowie einer sehr effiziente Bildoptimierung als Cloud-Service auf Servern in Deutschland. Für einen kleinen Blog wie diesen ist wao.io sicherlich eine der besten Ergänzungen.

Links

Better WordPress Minify (Plugin von BetterWP.net)
Minify HTML (WordPress Plugin von Tim Eckel)
wao.io (Web Accelerator von Sevenval Technologies GmbH)< HUGO (“The world’s fastest framework for building websites”
mavo.io (Store data in the cloud by just changing an HTML attribute)
sloppy.io (“Containers and microservices the DevOps way”)

Bookmarks and Playlists

Art – Ausstellungen, Kunst, Künstler

Films – Cinema, Drama, Art

Music – Dance, Swing, Lindy Hop

Music – Pop, Funk, Urban, Electro Swing

Music – Electro, Trance, Dubstep

Music – 604 Tracks – Psychedelic Trance

Rap, Parodie und Pepps

Music – Hardrock, Hardcore, Heavy Metal

Music – Rock, Folk, Rockabilly, Heavy, Mittelalter

Music – Classic, Organ, Sacred

Music – greek, ελληνικά, балкански, български

Musik – Gassenhauer, Schlager, Karneval

Surf, Skate, Snow, Sports

Fractals, Reality and the Butterfly Effect

About Web And Technology

Art, Fashion, Design

Filmchen – Vlogs, Travel, Entertainment, Lustiges, Kleinkunst, Satire

Books, Poetry, Culture, Society

DIY – Makers, Tweakers, Gadgets, Doors, and Windows

Happy 70 Playlist mit Pharell, Psy u.a.

Party Songs mit Brings, Michael Jackson, Kool and The Gang und Adriano Celentano

Ob Kölsch, ob Pils, ob Alt – Playlist mit Kasalla, Pavaier, Brings und den Toten Hosen

Rock Music mit Eric Clapton, Peter Green, Weezer und Metallica

Music and Dance Mix mit Yolanda Be Cool, Ray Charles und Loopus in Fabula

Time To Say Goodbye – Playlist mit Andrea Bocelli, Hannes Wader und Subway To Sally

spotify user fraktalisman

Alle eigenen Playlists auf YouTube anzeigen:
www.youtube.com/view_all_playlists

.