Ich komme aus einem Kontext, in dem das Styling eine sehr große Rolle eingenommen hat. Daher bin ich von Methoden wie BEM sehr angetan. Nun bin ich im Kontext von React unterwegs und viele meiner Glaubenssätze müssen über Board geschmissen werden. Natürlich könnte man weiterhin wie gewohnt eine SCSS Datei pflegen in der man nach BEM arbeitet. Da bietet das Tooling run um React aber eher wenig Hilfe.
Wenn es früher darum ging Teile von Elementen auszuschneiden hat man oft zum Pseudo-Element als Lösung gegriffen. Dabei hat man die Pseudoelemente an den ausgeschnittenen Stellen platziert und in der Hintergrundfarbe eingefärbt.
Arbeitet man mit vielen Projekten kann es mal passieren, dass man mit der Arbeit fertig ist, aber das Commiten bzw. Pushen in der Hektik des Alltags untergeht. Möchte man dann sicherstellen das alle Projekte auf dem Git Server angekommen sind, muss man in jedes Projekt navigieren und mit `git status` den aktuellen Zustand abfragen.
Damit eine Webseite oder App gut aussieht werden heutzutage viele Animationen mit der `transition` Property verwendet. Doch damit es wirklich rund wirkt sollten die Animationen bis auf wenige Ausnahmen die gleiche Dauer und das gleiche Timing haben. Die Frage wie man das in großen Projekten sicherstellen kann wird in diesem Artikel beantwortet.
Um den Besuchern einer Webseite möglichst viel Komfort zu bieten geht der Trend dazu Teaser vollflächig zu verlinken, um die Clickfläche möglichst groß und klar zu gestalten, anstatt nur den "mehr" Link als Clickfläche anzubieten.
Es gibt laut Phil Karlton zwei komplizierte Dinge die Programierern begegnen.
Es kommt vor, dass Module angelegt werden, bei denen man zunächst fest davon ausgeht, dass diese immer Links beinhalten werden. So gibt es Teaser mit dem Element Link.
Bei der Frage nach der Browserwahl geht es weniger um richtig oder falsch, sondern eher um Gewohnheit. In diesem Artikel möchte ich jedoch aufzeigen welche Feature für mich den Ausschlag machen den einen oder anderen Browser zu verwenden.
Es gibt viele Anwendungsfälle für Farbverläufe, welche teilweise transparent dargestellt werden. Jedoch gibt es ein Problem mit Safari, und somit auch iOS, welches man immer bedenken muss.
Wenn man sich bereits mit BEM vertraut gemacht hat wird man im Alltag einigen Problemstellungen begegnet sein. In diesem Artikel geht es darum möglichst viele dieser Problemstellungen zu beheben.
BEM ist eine Methode zur Strukturierung von CSS Stylesheets. Was BEM im Detail ist und wo die Vorteile sind wird in diesem Artikel beschrieben.
JIRA ist eine Software zur Vorgangs- und Projektverfolgung.
Texte durchstreichen im Web ist keine alltägliche Aufgabe. Doch wenn man dazu kommt, welches Tag ist dann zu verwenden?
Es gibt immer wieder den Anwendungsfall Bilder auszublenden. Wenn das Ausblenden mit `display: none` erfolgt gibt es den großen Nachteil, dass das Bild trotzdem vom Browser heruntergeladen wird.
Zum Debugen von Javascipt wird der Befehl `console.log` sehr gerne verwendet. Dadurch werden Javascript Objekte in der Konsole des Browsers ausgegeben.
[Keyframes ist eine Erweiterung für Chrome](https://chrome.google.com/webstore/detail/keyframes/dalaiblmpeklkjnpeocmaojcfldmbfck) (und weitere auf Chromium basierende Browser). Diese erlaubt es auf eine sehr einfache Art `@keyframe` zu erstellen.
Wenn es darum geht Elemente anzuordnen ist Flex-box ein sehr mächtiges Werkzeug. Leider gibt es aber keine Möglichkeit zu bestimmen, welches Element das Letzte in einer Zeile sein soll.
Mikrooptimierung beschreibt die Verbesserung von Performance in einem Kontext ohne konkreten Anlass dafür. Ein Beispiel dafür wäre die Funktion for von Javascript nicht zu verwenden und stattdessen eine eigene Funktion dafür zu schreiben, weil man sich davon eine Performancesteigerung verspricht.
In den Firefox DevTools werden DOM Attribute, die länger als 120 Zeichen sind standardmäßig gekürzt. Über den Nutzen dieser Funktion kann man streiten, jedoch sollte die Kürzung zumindest deutlicher Hervorgehoben werden.
Maps sind ein wunderbares Mittel in Sass um Key Value Inhalte abzubilden. Manchmal reichen die Inhalte einer Map nicht aus um das gewünschte Verhalten abzubilden. Aber zunächst die Grundlagen.
Ein Changelog beschreibt, welche Änderungen es seit dem letzten Release eines Produktes gegeben hat. Mit dessen Hilfe können die Benutzer sehen, ob sich ein Update lohnt.
Im vorherigem Artikel habe ich bereits [_NVM_ vorgestellt](https://devnarrative.com/mit-nvm-die-richtige-node-version-immer-griffbereit/). Mit _NVM_ hat man die Möglichkeit zwischen verschiedenen _Node.js_ Versionen zu wählen. Nun muss man leider immer noch wissen welches Projekt welche _Node.js_ Version voraussetzt und manuell diese Version mit `nvm use [version]` auswählen.
Aktuell kommt man als Webentwickler kaum an _Node.js_ vorbei. Wenn man bereits vor einer Weile angefangen hat mit Node zu arbeiten, kann folgende Situation eingetreten sein. Man hat ein Projekt mit Node 5 aufgesetzt und entwickelt. Anschließend sind einige Projekte vergangen und man hat Node 6, 8 und 10 für neuere Projekte installiert. Möchte man nun zum ersten Projekt zurückkehren und Anpassungen vornehmen hat man ein Problem: die installierte Node Version entspricht nicht der im Projekt verwendeten Version.
## Definition von `font-weight`
## Was sind git hooks
Fängt man an mit _Git_ zu arbeiten, lernt man als Erstes einen Commit zu erstellen. Doch das Erste was man lernt ist leider allzu oft nicht das worauf viel geachtet wird.
In CSS gibt es grundlegend zwei Möglichkeiten Elemente zu animieren: `animation` und `transition`. In diesem Artikel schauen wir uns an, welche Eigenschaft welche Vorteile hat und wann man welche verwenden sollte.
Im Internet findet man immer wieder Lösungen für [CSS Only Navigation](https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/), [Slider](https://codepen.io/dudleystorey/full/kFoGw/), [Tooltip](https://www.freecodecamp.org/news/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346/) und diverse andere Dinge die nur mit CSS umgesetzt worden sind, die auf den ersten Blick gut aussehen. Doch die CSS Only Lösungen haben alle eins gemeinsam: Sie funktionieren nur gut für den Sehenden Benutzer, der nicht auf Screen Reader angewiesen ist. Doch fangen wir erst mal von vorne an.
Git hat sich mittlerweile fast überall als de facto DIE Versionierungssoftware durchgesetzt. Damit ist die ehrwürdige Geschichte des Streitens über die Versionierung von Quellcode noch lange nicht zu Ende erzählt.
## Was ist Vim
Im vorherigen Artikel haben wir uns den Aufbau einer grundlegenden Struktur für Backstop angeschaut.
## Vorbereitung
In großen Projekten werden Buildscripte mit diversen Plugins dazu verwendet die Javascript und CSS Dateien zu minimieren. Das dient dazu, dass der Benutzer einer Webseite schneller die Seite benutzen kann, weil er zum Beispiel keine Leerzeilen und Kommentare herunterlädt, die für die Entwicklung wichtig sein können, den Broswer aber nicht interessieren.
Das hier ist der erste Teil einer Serie in der ich den Nutzen, die Funktionsweise, Verwendung und Optimierungen für [BackstopJS](https://github.com/garris/BackstopJS) (später nur noch Backstop) erkläre.
## Was ist @at-root?
_In diesem Artikel beziehe ich mich auf CSS bzw. SCSS. Das Prnzip kann auf weitere Bereiche übertragen werden._