Docker hat zweifellos die Art und Weise revolutioniert, wie wir Anwendungen entwickeln, bereitstellen und ausführen. Allerdings kommt mit den vielen Vorteilen von Docker auch eine potenzielle Herausforderung: der teilweise hohe Festplattenspeicherverbrauch. Docker-Images und -Container können im Laufe der Zeit beträchtlichen Speicherplatz beanspruchen, insbesondere wenn alte Images nicht ordnungsgemäß freigegeben werden. In unserem Fall ging der Speicher auf unserem Continous Integration System kontinuierlich zur neige.

In diesem Blogbeitrag möchte ich zeigen, wie wir mit einigen nützlichen Linux-Commands dagegen vorgegangen sind.

Überblick verschaffen

				
					df -h -t ext4

Der Befehl df steht für „disk free“ und wird verwendet, um Informationen über die Festplattennutzung anzuzeigen. Mit der Option -h wird die Ausgabe in sinnvollen Größeneinheiten angezeigt, und mit -t ext4 wird die Anzeige auf das ext4-Dateisystem eingeschränkt um die zahlreichen Docker Filesysteme auszublenden. Das hilft, einen Überblick über den verbleibenden Speicherplatz auf dem Dateisystem zu erhalten, auf dem Docker-Images und -Container gespeichert sind.

Detailanalyse mit Verzeichnisbaum

				
					ncdu /

Der Befehl ncdu steht für „NCurses Disk Usage“ und ist ein hilfreiches Tool, um den Speicherverbrauch auf einem System zu analysieren. Durch die Ausführung von ncdu / erhält man eine interaktive Übersicht über den belegten Speicherplatz auf der Festplatte. Dies ermöglicht es, Verzeichnisse und Dateien zu identifizieren, die besonders viel Platz verbrauchen, und herauszufinden, ob Docker-Images und -Container zu den Platzfressern gehören.

Ungenutzte Docker Images löschen

				
					docker image prune -a

Mit diesem Befehl können nicht mehr verwendete Docker-Images bereinigt werden. Das Flag -a bedeutet „alle“ und zeigt an, dass sowohl nicht getaggte als auch ungenutzte getaggte Images entfernt werden sollen. Dadurch kann Speicherplatz freigeben werden, indem veraltete und nicht mehr benötigte Images gelöscht werden.

Alte Docker Build Artefakte entfernen

				
					docker builder prune

Der Befehl docker builder prune hilft dabei, nicht mehr verwendete Build-Elemente zu entfernen. Während des Build-Prozesses erstellt Docker temporäre Images und Schichten, die nach Abschluss des Builds oft nicht mehr benötigt werden. Durch das Aufrufen dieses Befehls können diese temporären Ressourcen gelöscht und somit Speicherplatz gespart werden.

Fazit

Insgesamt ist es wichtig, den Festplattenspeicherverbrauch von Docker im Auge zu behalten, um Engpässe und unerwartete Platzmangel-Probleme zu vermeiden. Durch die regelmäßige Verwendung der genannten Linux-Befehle kann der Speicherplatz effizient verwaltet und sichergestellt werden, dass das Docker-Ökosystem reibungslos läuft.

Der Pagebuilder Elementor für WordPress macht es Online-Marketern leicht, Inhalte dank WYSIWYG (what you see is what you get) Editor ohne Programmierkenntnisse zu erstellen. Je nach Kundenanforderungen setzen wir diesen Pagebuilder ein, um ansprechende Seiten effizient umzusetzen.

YOAST Primärkategorie im Elementor Blogloop nutzen

Bei einem vorangegangen Projekt gab es vom Kunden den Wunsch, beim bestehenden „Beiträge“-Element von Elementor nicht einfach alle hinterlegten Kategorien aufzulisten, sondern nur die Hauptkategorie als kleinen Tag anzuzeigen. Elementor bietet zwar die Darstellung der erstbesten Kategorie an, nicht aber die Darstellung eines mit dem YOAST-Plugin hinterlegten Primärkategorie.

Elementor Element Skin anpassen

Aus unserer Sicht gibt es drei Lösungswege. Eine davon ist die Umsetzung eines eigenen Blogloop Elements. Eine Andere die Erstellung eines eigenen Skins für die bestehende Elementor „Beiträge“ Komponente. Da wir das Rad nicht neu erfinden und das bestehende Design vom Elementor Pagebuilder wiederverwenden wollten, haben wir uns für die dritte etwas weniger gut dokumentierte Variante entschieden: Die Anpassung eines bestehenden Elementor Element Skins.

Mit unserer Lösung können wir nun die primäre Kategorie von YOAST auch im Elementor Pagebuilder Blogloop auslesen.

Im Code werden die einzelnen Schritte beschrieben.

				
					<?php
/**
 * Originalen Skin für das Posts-Widget durch Skin ersetzen, der den Primary Tag des YOAST Seo Plugins verwendet
 */
add_action( 'elementor/widget/posts/skins_init', function( $widget ) {
   
    if (!class_exists('\\WPSEO_Primary_Term')) {
        return;
    }
 
    //Originalen Skin ableiten um die render_badge Methode zu überschreiben
    class CardSkinWithPrimaryTerm extends \ElementorPro\Modules\Posts\Skins\Skin_Cards {
        protected function render_badge() {
            //Die Taxonomie des Badges auslesen
            //das heißt ob es sich um eine Kategorie, Schlagwörter etc. handelt
            $taxonomy = $this->get_instance_value( 'badge_taxonomy' );
            if ( empty( $taxonomy ) || ! taxonomy_exists( $taxonomy ) ) {
                return parent::render_badge();
            }
 
            //Der vom Benutzer hinterlegte primäre Term von YOAST auslesen. Bspw. die primäre Kategorie
            $primary_term = new \WPSEO_Primary_Term( $taxonomy, get_the_ID() );
            if ( ! $primary_term || ! $primary_term->get_primary_term() ) {
                return parent::render_badge();
            }
 
            //Beim oberen Objekt handelt es sich um eine Klasse von YOAST, von der wir die
            //zugehörige Term ID erhalten und das volle WordPress-Term Objekt laden:
            $primary_term = get_term( $primary_term->get_primary_term(), $taxonomy );
 
            //Nun kann der Name des Terms ausgegeben werden
            ?>
            <div class="elementor-post__badge"><?php echo esc_html($primary_term->name); ?></div>
            <?php
        }
    }
 
    //Damit Elementor beim Skin "Card" unsere Version verwendet, muss der Originale Skin zunächst deregistriert werden
    $original = $widget->get_skin( 'cards' );   
    remove_action( 'elementor/element/posts/section_layout/before_section_end',
                    [ $original, 'register_controls' ] );
    remove_action( 'elementor/element/posts/section_query/after_section_end',
                    [ $original, 'register_style_sections' ] );
    remove_action( 'elementor/element/posts/cards_section_design_image/before_section_end',
                    [ $original, 'register_additional_design_image_controls' ] );
    $widget->remove_skin( 'cards' );
 
    //Erst nachdem der vorige Skin vollständig deregistriert wurde,
    //kann unsere abgeleitete Version registriert werden.
    $widget->add_skin( new CardSkinWithPrimaryTerm( $widget ) );
} );

Man kennt es von Rechnungen die man erhält: Statt dem manuellen Abtippen vom IBAN und Zahlungsbetrag kann man einen QR-Code auf der Rechnung mit der Banking-App scannen und so die Überweisungsdaten der Rechnung direkt übernehmen. Aber wie bekommt man diese Funktion auf seine eigenen ausgesendeten Rechnungen?

QR-Code für Rechnungen in individueller Softwarelösung integrieren

Der in diesen QR-Codes verwendete Code entspricht den von der European Payments Clouncil (EPC) herausgegebenen QR Code Leitlinien zur Erfassung der Überweisungsdaten einer SEPA Geldüberweisung (Quick Response Code – Guidelines to Enable the Data Capture for the Initiation of a SEPA Credit Transfer) die bereits 2012 veröffentlicht wurden. 

Im Wesentlichen werden die Überweisungsdaten wie IBAN, BIC, Empfängername, Währung Überweisungsbetrag und Verwendungszweck gemeinsam mit wenigen Steuercodes als Zeichenfolge mit Newlines kombiniert und diese als
QR-Code ausgegeben.

Umsetzung in einer .NET C# App

Unsere interne Zeiterfassungs- und Faktura Webanwendung ProjectTime ist mit .NET 6.0 mit der Programmiersprache C# umgesetzt. Die Generierung des QR-Codes kann folgendermaßen aussehen:

				
					decimal amount = 42.42M;
string reference = "Testzweck";
 
StringBuilder builder = new StringBuilder();
 
//  Service Tag
builder.Append("BCD\n");
 
//  EPC Code Version
builder.Append("002\n");
 
//  Character Set
builder.Append("2\n"); // ISO 8859-1 - Latin1
 
// "Sepa Credit Transfer"
builder.Append("SCT\n");
 
// BIC
builder.Append("GIBAATWWXXX\n");
 
// Name
builder.Append("Empfangskonto\n");
 
// IBAN
builder.Append("AT023400000002613800\n");
 
// Betrag
builder.Append(String.Format(new CultureInfo("en-EN"), "EUR{0:0.00}\n", amount));
 
//Zusatz
builder.Append("\n");
 
//Creditor Reference
builder.Append("\n");
 
//Verwendungszweck
builder.Append(reference + "\n");
 
//Hinweis an Nutzer
builder.Append("\n");
 
string result = builder.ToString();

Der in diesem Beispiel im QR Code eingebettete Code würde so aussehen:

				
					BCD
002
2
SCT
GIBAATWWXXX
Empfangskonto
AT023400000002613800
EUR42.42


Testzweck

Mit einer der vielen QR Bilbiotheken für .NET generieren wir daraus vektorbasierte QR Codes, die wir in unseren PDF-Rechnungen einbetten.

Vorteile des QR-Codes auf Rechnungen

Was sind die Vorteile? Durch die Vereinfachung der Bezahlung überweisen Kunden schneller. Außerdem werden Tippfehler bei Beträgen vermieden und der Verwendungszweck für die automatische Zuordnung beim Empfänger vorgegeben werden kann.

Was tun, wenn einer der Hauptrechner pünktlich zum Start des Homeoffice aufgrund des Covid19-Lockdown mit Displayfehler die Arbeit verweigert? Im Fall unseres 2011er iMac heizt man am besten den Ofen auf Ober- und Unterhitze mit 200°C vor.

Genau das ist bei uns im April eingetreten. Der in die Jahre gekommene Hauptrechner ließ sich nicht mehr starten, das Display zeigte beim Einschalten nur eine weiße Fläche mit vertikalen grünen Streifen – nichts geht mehr.

Grafikkarte defekt

Nach kurzer Recherche ist schnell klar, dass der Übeltäter die Grafikkarte ist und das Problem nicht gerade selten auftritt: Möglicherweise zeigen die Lötstellen der Grafikkarte Ermüdungserscheinungen. Da der Rechner schon einige Jahre auf dem Buckel hat und ohnehin bald erneuert werden soll, stellt sich die Frage nach einem Neu- bzw. gebrauchtkauf der baugleichen Grafikkarte nicht mehr. Stattdessen setzen wir auf Hop oder Drop und wenden einen schon länger bekannten „Schmäh“ an: Wir backen die Grafikkarte für kurze Zeit in einem Backofen um feine Risse der Lötstellen vielleicht doch wieder zu schließen.

Zutaten

Um das Prozedere durchzuführen ist es zunächst wichtig, alle relevanten Utensilien zu besorgen. Dazu gehören beispielsweise

  • Glasheber zum Anheben des Displayglases
  • Mittel zum Entfernen der alten Wärmeleitpaste (zb Arctic Silver ArctiClean)
  • Wattestäbchen
  • Neue Wärmeleitpaste
  • Torx T10 Schraubenzieher
  • Alufolie
  • Backofen
  • viel Zeit

Rezept

1. Gehäuse öffnen

Im ersten Schritt muss das Display entfernt werden, um überhaupt zum Mainboard zu gelangen. Das Display wird dabei von einem Displayglas geschützt, welches mit starken Magneten am Gehäuse gehalten wird. Mit den entsprechenden Glashebern hat man es aber schnell entfernt. Mit dem Torx-Schraubenzieher wird dann das Displaypanel vom Gehäuse abgeschraubt.

Das Display kann dann für wenige Zentimeter angehoben werden – die Ansteuerungskabel für das Panel und Hintergrundbeleuchtung sind derart kurz gehalten, dass das Abhängen eine kleine Herausforderung ist.

2. Mainboard ausbauen

Hat man das Display endlich entfernt, so erkennt man im mittleren Bereich das aufgeteilte, umgedreht eingebaute Mainboard. In der Mitte befinden sich die Heatpipes des CPU-Kühlers die nach rechts außen die Wärme zum Lüfter ableiten. Im linken mittleren Bereich, direkt zwischen dem Slot-In-CD-Laufwerk und der Festplatte, befindet sich dagegen der Kühlkörper der die ebenfalls umgedreht eingebaute Grafikkarte verdeckt. Um zu dieser zu gelangen, muss das Mainboard inklusive CPU, Grafikkarte und aller Kühlkörper abgesteckt und ausgebaut werden.

3. Grafikkarte reinigen

Der Kühlkörper der Grafikkarte kann nun abgeschraubt werden um zur Grafikkarte zu gelangen.

Mit den Wattestäbchen und der Lösung wird die alte, ausgetrocknete Wärmeleitpaste feinsäuberlich entfernt.

Der Kern der Grafikkarte ist nicht wie bei CPUs mittlerweile üblich mittels Heatspreader geschützt sondern sitzt blank am Board, weshalb man bei den Kanten des Kerns durchaus vorsichtig vorgehen sollte.

4. Backen

Die ganze Grafikkarte kommt nun mittels Distanzhaltern aus Alufolie auf einem Backblech für 10 Minuten bei ca. 200°C in den vorgeheizten Ofen. Den Geruch sollte man eher nicht genießen.

5. Ziehen lassen und garnieren

Nach 10 Minuten im Rohr lässt man die knusprig aussehende Karte abkühlen, steckt sie anschließend wieder ans Mainboard benetzt sie mit neuer Wärmeleitpaste.

6. Wieder zusammenstellen

Feinsäuberlich baut man die Teile wieder zusammen – zuvor aufgenommene Fotos der einzelnen Anschlüsse und Kabel helfen enorm.

7. Genießen

Abschließend der beste und spannendste Moment der Arbeit: Man schaltet den Rechner ein und wartet darauf, ob nun alles wieder funktioniert, oder ob der Rechner nun gänzlich für die Entsorgung bereit ist.

Wenn endlich eine rein weiße Fläche dargestellt wird dauert es noch eine gefühlte Ewigkeit bis auch tatsächlich das graue Apple-Logo inkl. Ladebalken erscheint und man realisiert, dass es tatsächlich geklappt hat.

Zusammenfassung

Mit dieser kuriosen Reparatur haben wir unseren iMac mittlerweile wieder 9 Monate in Betrieb. Sollte das Problem erneut auftreten, so kann ein zweiter Backvorgang nochmals helfen.

Wie lässt sich ein Dualmonitor-Betrieb mit dem Macbook Pro 13″ realisieren.

Als Arbeitsumgebung bevorzuge ich einen Laptop mit zwei extern angeschlossenen Monitoren. Das ist bei mit Windows betriebenen Geräten normalerweise keine Herausforderung, solange die integrierte Grafikkarte des Laptops mehrere Monitore ansteuern kann bzw. ein DisplayPort Daisy Chaining möglich ist. Mit älteren Lenovo Laptops und den dazugehörigen Workstation-Docks war ein solches Setup kein Problem.

Das Problem

Anders sieht es bei Macbooks und macOS aus. Dieses unterstützt zwar mehrere externe Monitore, ein Daisy Chaining über ein Displayport Kabel ist aber nicht vorgesehen.

Die Lösung

Mit Thunderbolt 3 Docks diverser Hersteller ist es aber dennoch möglich. Konkret können wir von einer funktionierende Lösung mit dem Dell Docking Station Thunderbolt WD19TB mit 180-Watt Netzteil und einem zusätzlichen USB-C / Thunderbolt 3 zu DisplayPort-Kabel berichten.

Um nicht nur gespiegelte sondern „erweiterte“ Ansichten des Desktops zu erhalten, darf allerdings nur ein DisplayPort der Dockingstation verwendet werden. Das zweite Display muss über den im Dock verfügbaren Thunderbolt 3 Port und dem USB-C zu DisplayPort-Kabel angeschlossen werden. Wie es scheint können derzeit nur damit zwei separate Videostreams vom Macbook mit nur einem Kabel realisiert werden.

Der Anschlussplan sieht folgendermaßen aus:

Dank des Docks wird das Macbook auch über ein einziges Kabel geladen, hat Netzwerkzugriff über Gigabit-LAN und es können weitere USB-Geräte angeschlossen werden.

Animation und Motion Design auf Websites ist kein neuer Trend. Schon mit Adobe Flash wurden Webseiten animiert. Es gibt unzählige Tools und Bibliotheken die bei der Umsetzung animierter Grafiken unterstützen – die meisten davon arbeiten mit SVG und CSS. Ein wiederkehrendes Problem das sich für uns beim produktiven Einsatz gezeigt hat, war der fehlende Workflow zwischen Grafiker und Entwickler.

Um zu einen für uns gut funktionierenden Workflow zu gelangen benötigten wir einige Schritte die wir im folgenden zeigen möchten.

Logoanimationen als SVG mit JavaScript programmieren

Angefangen hat es mit der Idee das Logo einer Kundenseite zu animieren. Die Animation war großartig und begeisterte alle Beteiligten.

Der Nachteil: die Umsetzung erfolgte mit eingebettetem JavaScript und der Bibliothek SVG.js, welches genau auf diese Seite abgestimmt war. Somit konnten wir das fertig animierte Logo nicht einfach in unsere eigene Portfolioseite mit aufnehmen. Diese Art der Umsetzung erschwert auch Änderungswünsche des Designers, die programmatisch umgesetzt werden müssen.

SVG Animationen mit Adobe After Effects und Bodymovin (Lottie)

Adobe After Effects wurde als Kompositions- und Animationstool für Video und Filmaufnahmen entwickelt. Erst mit dem von Airbnb entwickelten Plugin Bodymovin lassen sich erstellte Animationen im dafür vorgesehenen JSON-Lottie-Format als Vektorgrafiken für Websites und Apps exportieren.

Die Animation im Web erfolgt mittels eingebundener JavaScript-Bibliothek. Im Gegensatz zur mit SVG.js implementierten Variante, ist das Lottie-File portabler. Dieser Umstand erweist sich auch im praktischen Einsatz als wesentlich komfortabler – Änderungen lassen sich vom Designer direkt in After Effects umsetzen und müssen anschließend nur noch exportiert und auf den jeweiligen Server übertragen werden.

Leider gab es zum Zeitpunkt unseres Einsatzes auch gravierende Nachteile im Funktionsumfang des Bodymovin-Plugins. Viele der erstellten Animationen konnten nicht eins zu eins exportiert werden. Hier macht sich bemerkbar, dass es sich um ein – dennoch sehr mächtiges – Plugin für eine Anwendung handelt, die nicht für vektorbasierte Webanimationen entwickelt wurde.

SVG Animationen mit Keyshape

Bei der Recherche zu weiteren Alternativen entdeckten wir durch Zufall das nicht sehr bekannte Keyshape für Mac. Im Gegensatz zu Bodymovin werden bei diesem Tool native SVG mit CSS Keyframes generiert. Einfache animierte Vektorgrafiken lassen sich damit ressourcenschonend ohne Notwendigkeit zur Einbindung einer Drittbibliothek erstellen. Mit Keyshape ist sogar der Import von Lottie-Dateien möglich. Die zuvor mit After Effects für Bodymovin erstellten Grafiken können wir damit mit wenig Aufwand wiederverwenden.

Für uns ist es aktuell das Tool der Wahl um Animationen für Logos, Icons oder Illustrationen als SVG zu exportieren und in unseren Web- und Softwareprojekten einzusetzen. Der schlanke Aufbau ermöglicht ein schnelles Einlernen und bietet dennoch alle Funktionen die benötigt werden.

Let’s work together

Lassen Sie uns in einem persönlichen Gespräch herausfinden, wie wir zusammenarbeiten können. Gratis aber nicht umsonst, natürlich.

Kontakt

office@sus.digital • +43 664 750 31 669

Instagram Facebook

Impressum • Datenschutz

Schneider & Schütz GmbH • Bauernstraße 1 • 4600 Wels