Kategorie: Webentwicklung

Manchmal kann es sinnvoll sein, den Fokus in einem bestimmten Website-Bereich zu fangen, sodass kein fokussierbares Element außerhalb dieses Bereichs angesteuert werden kann (zum Beispiel über die Tab-Taste der Tastatur). Hier zeige ich, wie sich das umsetzen lässt.

Es ist nicht ganz trivial, via Webpack eine SCSS-Datei, die nicht in die JavaScript-Datei eingebunden wird, in eine eigene CSS-Datei zu kompilieren. Hier zeige ich, wie das geht.

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.

Webpack ist ein Bundler mit dem Hauptzweck, JavaScript-Dateien für die Nutzung im Browser zusammenzuführen (Webpack kann aber beispielsweise auch SASS in CSS kompilieren). Hier zeige ich die Einrichtung von Webpack und Babel – einem Tool, das ES6-JavaScript-Code in ES5-kompatiblen Code umwandeln kann.

Ü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;
}
Code-Sprache: CSS (css)

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.

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

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.

Vor zwei Wochen hatte ich bereits einen Beitrag zum Deployment via GitLab CI geschrieben. Nun habe ich für ein öffentliches GitHub-Repo dasselbe Verhalten mit Travis umgesetzt und zeige euch hier, wie ich dabei vorgegangen bin.

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.

In diesem Artikel zeige ich euch eine SASS-Funktion, mit der sich eine Zeilenhöhe ohne Einheit errechnen lässt. Ursprung dieser Aktion war, dass ich keine rem mehr einsetzen wollte.