Category

Als Frontend-Webentwickler sind die Devtools der Browser für die Meisten nicht aus dem Alltag wegzudenken. Sie werden stetig weiterentwickelt und bieten dem Entwickler eine Vielzahl an Funktionen zur Unterstützung bei der Fehlersuche oder um schnelleres Feedback zu erhalten. Ich möchte euch in diesem Blog einige davon vorstellen, die ich oft einsetze oder speziell erwähnenswert finde. Die Funktionen werden sich an den Google Chrome Devtools ausrichten, da ich damit die besten Erfahrungen gesammelt habe, jedoch bieten andere Browser (Firefox, Microsoft Edge, etc.) die gleichen oder mindestens ähnliche Funktionen.

Die Kapitel werden sich an den Tabs der Devtools orientieren, es werden aber nicht alle behandelt.

READ MORE

Dieser Beitrag soll eine kurze Einführung in TailwindCSS geben. TailwindCSS (nachfolgend Tailwind genannt) ist ein utility-first CSS Framework. Das bedeutet, dass es dem Benutzer Utility-Klassen zur Verfügung stellt, mit denen er eigene Designs erstellt. Eine Utility-Klasse ist selbst-beschreibend und kümmert sich immer um eine spezifische Sache (z.B. welche Farbe). Sie kann beliebig oft verwendet werden und wird direkt im HTML eingesetzt. 

Hier ein kurzes Beispiel: 

<button class="bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded"> 
  Noser 
</button>

Dieser Code generiert einen Button mit orangem Hintergrund («bg» für Background), der durch die Zahl hinten am «bg-orange» heller bzw. dunkler wird. «py» steht für Padding y-Achse, also für das Padding oben und unten, und «px» für die x-Achse. Der Rest ist selbsterklärend. Dadurch wird nur über das Lesen der CSS Klassen schnell klar, wie dieser Button aussieht. 

READ MORE