Kategorie: Webentwicklung

NPM-Paket für mehrere Dateien ausführen (am Beispiel von csso-cli)

Einige NPM-Pakete bieten bereits direkt die Möglichkeit, sich auf mehrere Dateien eines Verzeichnisses gleichzeitig anwenden zu lassen – so kann node-sass beispielsweise ein ganzes Verzeichnis von SCSS-Dateien in CSS-Dateien umwandeln. Das Minifier-Tool csso-cli bietet eine Option für mehrere Dateien als Input von Haus aus nicht an – hier zeige ich einen Workaround, um das trotzdem umzusetzen. NPM-Paket für mehrere Dateien ausführen (am Beispiel von csso-cli) weiterlesen

Nur ein bestimmtes Flex-Item vertikal zentrieren

Über die CSS-Angabe align-items: center können nebeneinander liegende Flex-Items zueinander vertikal zentriert werden, sodass ihre Mitte auf derselben Horizontalen liegt. Ich hatte nun den Fall, dass von zwei Flex-Items nur das rechte zentriert werden soll, wenn das linke höher ist – aber nicht das linke, wenn das rechte höher ist. Dafür scheidet die align-items: center-Angabe aus, aber die Problemlösung ist nicht viel aufwendiger:

.center-flex-item {
	margin-bottom: auto;
	margin-top: auto;
}

Damit wird das Flex-Item .center-flex-item immer zentriert, wenn ein daneben stehendes Item mehr Platz in der Höhe einnimmt, aber das andere nicht, wenn .center-flex-item höher ist.

Update vom 9. Juni 2017: Einfacher und mit der dafür vermutlich richtigeren CSS-Regel geht es so:

.center-flex-item {
	align-self: center;
}

Danke an Matthias für den Hinweis!

CSS mit Gulp für Rechts-nach-Links-Sprachen anpassen

Wenn eine Website in einer von rechts nach links zu lesenden Sprache dargestellt wird, müssen einige CSS-Regeln geändert werden, wenn das CSS eigentlich für Links-nach-Rechts-Sprachen geschrieben wurde. So sind zum Beispiel Floats sowie linke und rechte Abstände anzupassen. Diese Anpassungen manuell vorzunehmen würde je nach Komplexität des Stylesheets einige Zeit dauern – mit Hilfe von Gulp geht es deutlich einfacher und schneller. CSS mit Gulp für Rechts-nach-Links-Sprachen anpassen weiterlesen

Masonry-Skript erst ab bestimmter Viewport-Breite ausführen

In meinem neuesten Theme wird das Masonry-Skript für die Anzeige von Bilder-Grids zum Einsatz kommen. Diese Grid-Funktion brauche ich aber erst ab einer gewissen Viewport-Breite – bei schmaleren Viewports werden die Bilder einfach untereinander dargestellt, und dafür muss das Skript nicht initialisiert werden. Hier zeige ich euch, wie ich diesen bedingten Einsatz des Skripts umgesetzt habe. Masonry-Skript erst ab bestimmter Viewport-Breite ausführen weiterlesen

Mit GitLab CI automatisch auf Staging- und Produktiv-Server deployen

Ich habe kürzlich angefangen, mich mit Continuous Integration (CI) zu beschäftigen. Damit sind unterschiedliche automatische Aktionen nach einem Push in ein Versionsverwaltungs-Repo möglich, wie etwa das Testen des Codes oder auch das Deployment auf einen Server. Hier zeige ich euch, wie ein Deployment-Prozess von Gitlab.com auf einen Staging- und Produktiv-Server aussehen kann. Mit GitLab CI automatisch auf Staging- und Produktiv-Server deployen weiterlesen

Bilder über den Inhaltsbereich hinausgehen lassen

Wenn Bilder in einen Artikel oder ähnliches eingefügt werden, haben sie meist maximal dieselbe Breite wie der Fließtext. Wenn die Fotos es hergeben, kann es aber schön aussehen, wenn sie über die Breite des Inhaltsbereiches hinausgehen – in einem einspaltigen Layout beispielsweise bis zu den Rändern des Browserfensters. Hier zeige ich euch, wie ihr das umsetzen könnt – sowohl für Einspalter als auch Websites mit Sidebar. Bilder über den Inhaltsbereich hinausgehen lassen weiterlesen

Admin-Notice bei verfügbarem Update von bestimmtem Plugin anzeigen

Für die durch das Plugin German Market erstellten Rechnungen meines Shops nutze ich einen Font den ich nach jedem Plugin-Update erneut integrieren muss, da er nicht standardmäßig in dem Plugin eingebunden ist. Damit ich das nicht (mehr) vergesse, lasse ich mir eine Admin-Notice anzeigen, sobald ein Update für das Plugin verfügbar ist. Das ist nicht besonders schwer und schnell umgesetzt, der komplette Code sieht so aus:

/**
 * Display admin notice so I remember uploading the Clavo font after updating German Market
 */
function fbn_german_market_typography_notice() {
    $update_plugins_transient = get_site_transient( 'update_plugins' );
    if ( $update_plugins_transient->response['woocommerce-german-market/WooCommerce-German-Market.php'] ) {
        add_action( 'all_admin_notices', function () { ?>
            <div class="notice notice-warning">
                <p><strong>Nach dem »German Market«-Update den Clavo-Font für Rechnungen wieder hochladen!</strong></p>
            </div>
        <?php } );
    }
}

add_action( 'admin_init', 'fbn_german_market_typography_notice' );

Ich übergebe an den admin_init-Hook die Funktion fbn_german_market_typography_notice(). Darin wird zunächst der Wert des Site-Transients update_plugins in einer Variable gespeichert – in diesem Transient sind Infos zu Plugin-Updates gespeichert. Wenn nun $update_plugins_transient->response['woocommerce-german-market/WooCommerce-German-Market.php'] vorhanden ist, dann ist ein Update für das Plugin verfügbar.

In diesem Fall wird eine Admin-Notice ausgegeben (ich nutze hier all_admin_notices, damit es in einer Multisite nicht nur im Netzwerk-Admin angezeigt wird) die mich hoffentlich zukünftig daran erinnert, den Font für die Rechnungs-PDF wieder hochzuladen … 🙂

Für andere Plugins ist der Array-Schlüssel natürlich ein anderer. Ihr könnt euch einfach per var_dump( $update_plugins_transient ); den Inhalt des Transients ausgeben lassen, um den richtigen Schlüssel zu finden.

PS: Mehr zu Admin-Notices gibt es im Beitrag »Admin Notices in Plugin UIs« von Caspar Hübinger.