Optische Varianzen mit SCSS-Maps umsetzen

in  Basics , , , ,

In vielen Weblayouts ist es notwendig, unterschiedliche Ausprägungen einer bestimmten kosmetischen “Stellschraube” zu realisieren. So können etwa einzelne Akzentfarben je nach Unterseite, Kategorie oder Jahreszeit abweichen. Dies sorgt oftmals für unschönen Boilerplate-Code, welcher jedoch mit SASS/SCSS einfach eingespart werden kann. Erst einmal ausführlich Angenommen, je nach body-Klasse sollen alle Artikel-Überschriften in der zweiten Ebene eine andere Farbe erhalten. Dies könnte mit reinem CSS zum Beispiel so aussehen: 1 2 3 4 5 6 7 8 9 10 11 12 body.

Git spielend im Griff

in  Basics ,

Eine schöne interaktive Möglichkeit, einige Konzepte von Git näher kennen zu lernen, bietet die Seite Learn Git Branching. In diesem Spiel werden in unterschiedlichen Tutorials und Aufgaben die verschiedenen Varianten, Branches zu erstellen und ineinander zu überführen, vermittelt. Die wichtigsten Kommandos können in einem Sandkasten-Modus verwendet werden, wobei sich die entsprechenden Auswirkungen anhand einer Visualisierung direkt erschließen. Auch für fortgeschrittene Anwender von Git gibt es hier und da wahrscheinlich noch ein paar Aha-Effekte.

Sektionen zum Ein- und Ausklappen ohne JavaScript und in Markdown nutzen

in  Basics , , , ,

Der HTML5-Standard bietet einige Tags, mit denen sich interaktive Elemente abbilden lassen. Ein sehr nützliches Beispiel sind die Tags <details> und <summary>: sie erlauben die Erstellung von aufklappbaren Bereichen. Früher konnten solche Funktionen zum dynamischen Öffnen und Schließen von Teilbereichen nur mit Hilfe von JavaScript umgesetzt werden. Diese Einschränkung ist somit entfallen. In diesem Beitrag wird kurz gezeigt, wie sich die zwei Tags einsetzen lassen. Außerdem wird die Verwendung anhand eines praktischen Anwendungsfalls demonstriert.

Lesetipp: das Buch zu Symfony 5 auf deutsch

in  Basics , ,

Das Buch “Symfony 5: The Fast Track” von Fabian Potencier zeigt anhand praktischer Beispiele einen großen Teil der Bandbreite der Symfony-Komponenten. Es eignet sich daher für einen schnellen Einstieg in das Ökosystem, bietet jedoch gleichzeitig auch fortgeschrittenen Nutzern neue Impulse. Schön ist aber insbesondere, dass das Buch in mehr als ein Dutzend Sprachen vorliegt. Es ist möglich, das Buch online kostenlos anzuschauen. Unabhängig davon kann man auch eine PDF-Version erwerben und somit die weitere Symfony-Entwicklung unterstützen.

CSS-Konzepte spielerisch lernen

in  Basics , , , ,

Die Cascading Style Sheets zum Gestalten von Internetseiten und Webanwendungen gibt es schon eine ganze Ewigkeit. Elementare Dinge ändern sich hier vergleichsweise selten. Mit der Umstellung von Bootstrap 3 auf Bootstrap 4 kommt man jedoch nicht umhin, sich mit dem Flexbox-Konzept auseinander zu setzen. Hier kommt man mit den alten Floats nicht mehr weit. Am Anfang ist das ein ungewohntes Umdenken. Aber sobald man Flex einmal verstanden hat, möchte man auch nicht mehr ohne.

Twig: kleine Syntax-Anpassung mit deutlichem Einspareffekt

in  Basics , ,

Der folgende Tipp hilft dabei, den Code-Umfang häufiger Abfragen in Twig-Templates zu reduzieren. Dies verbessert die Lesbarkeit enorm und hilft dabei, die Logik in den Templates intuitiver zu formulieren. Diese Abkürzung kommt komplett ohne zusätzliche Funktionen und Filter aus. Oft möchte man prüfen, ob eine Variable im Template existiert und einen gültigen Wert enthält. In dem Fall soll etwas mit der Variable getan werden, typischerweise erfolgt eine Ausgabe des Wertes. Ganz explizit formuliert sieht so eine Abfrage in etwa wie folgt aus:

Funktionale Programmierung in Twig: Collections deklarativ verarbeiten

in  Basics , , , , ,

Seit kurzem haben neue Funktionen in die Template-Engine Twig Einzug gehalten. Diese verändern die Art und Weise, wie mit mehrwertigen Daten umgegangen wird, fundamental. Aus diesem Grund soll dieser Artikel beleuchten, wie man mit den neuen Möglichkeiten umgehen kann. Was heißt deklarativ? Bei “filter, map und reduce” handelt es sich um ein Muster (Pattern) aus der funktionalen Programmierung. Es erlaubt die Veränderung von Sequenzen (Listen, Arrays, Vektoren, usw.) mittels mehrerer Operationen und Manipulationen, an deren Ende ein Ergebnis steht, welches entweder ausgegeben oder weiter verwendet werden kann.

Prägnante und strukturierte Stylesheets mit SCSS

in  Basics , , ,

Auch wenn es für einige Leser ein alter Hut ist, so gibt es dennoch sicherlich andere, die noch keine Erfahrungen mit Less oder Sass haben. Daher sei einmal das sehr leicht zu erlernende SCSS (Sassy CSS) vorgestellt, mit dem sich stufenlos Sass-Funktionen in CSS einfügen lassen. Der Einstieg Bereits die grundlegenden Funktionen, wie Variablen und Verschachtelung, helfen dabei, die Stile deutlich einfacher zu handhaben. Redundanzen werden vermieden und die Änderbarkeit erhöht.

Kategorien in Zikula - weit mehr als nur Themen

in  Basics , ,

Der Zikula Core enthält eine zentrale Verwaltung für Kategorien, mit denen man vielfältige Lösungen umsetzen kann. Die häufigste Verwendung von Kategorien ist sicherlich eine thematische Zuordnung von Inhalten. So lassen sich beispielsweise Newsartikel unterschiedlichen Themengebieten zuordnen. Dieser Artikel ist etwa in der Kategorie “Basics”. Im Folgenden wird ein Überblick darüber gegeben, was sich darüber hinaus noch alles mit Kategorien machen lässt. Zunächst einmal bietet das Kategoriensystem einige Funktionen, die allgemein nützlich sind.

Probleme mit Error Tracking proaktiv erkennen

in  Basics , ,

Sobald ein Programm oder eine Internetseite erst einmal produktiv verwendet wird, stellt sich heraus, ob alle Eventualitäten bedacht sind oder ob doch etwas nicht berücksichtigt worden ist. Spätestens wenn sich Kunden oder Nutzer mit Reklamationen oder Klagen melden, wird klar, dass hier und da vielleicht nicht alles zu Ende gedacht wurde oder die automatisierten Tests eben nicht alle Fälle abgedeckt haben. In diesem Beitrag geht es darum, wie man Fehler, Warnungen und anderweitige Probleme früh erkennen kann.