 Einstieg vom vorn. CSS gut und hässlich. Genau, das soll mein kurz entschlossener Vortrag hier sein. Ich bin Heiko Marmorow, komme aus Berlin, bin Web-Entwickler, hab mit WordPress zu tun, also bin WordPress-Developer irgendwie so angestellt. Und man findet mich unter heikomarmorow.de, da block ich nicht mal Quartalsmodus so immer zu Themen mit WordPress und vor allen Dingen Front-Entwicklung. Das ist so mein Metier, was ich den ganzen Tag mache. Ja, und ich hab für heute eine kleine Session eben vorbereitet, die sehr, sehr kurzfristig war. Am Montag gab es auf Twitter eine Anfrage vom Stefan, Stefan Kramer, CREMA, oop, jedenfalls der, wissen wollte, irgendwie hier, ich hab kaputtes CSS, irgendwie komischen Stylecheat und kann man das irgendwie reparieren, gibt's da irgendwie ein Tool, wie man das besser machen kann oder wie man das irgendwie reparieren kann und irgendwie einen komischen Code vernünftig machen kann. Ja klar, mach ich jeden Tag, hab ich jeden Tag auf Arbeit, hab ich ihn da so zwei Tools zugeschickt und seine Reaktion war, verstehe im Wald, verstehe Bahnhof so ungefähr und dann wurde mir erst mal einmal mehr wieder klar, okay, für mich ist das, sag mal nicht, jetzt Pille-Palle, aber für mich ist das normal, ich hab das jeden Tag und mach das immer zu, aber vielleicht für andere nicht. Und ja, das war dann so meine Motivation hier vielleicht das mal einzureichen und ja, es scheint ja doch Interessenten zu geben. Kleine Entschuldigung noch von weg, wie gesagt, das war Montag oder Dienstag, mein Tag, ich bin immer so zehn, elf Stunden in der Agentur im Büro, hab auch noch eine Familie nebenbei und auch ansonsten irgendwie keine lange Weile, ich hab nicht geschafft mich vorzubereiten, ich hab heute Vormittag schnell diese, diese und diese. Und diese Folie geschrieben, so mehr ist es nicht gekommen, ich denke aber, das brauchen wir nicht unbedingt, warum und weil dieser Vortrag ist jetzt nicht primär für Leute, also für wen ist das eigentlich, Zielgruppe, ich geh mal davon aus, ihr seid alle im Frontend zu einigermaßen, also CSS, muss man jetzt nicht erklären, ja, also HTML, CSS, ja, was krebt PHP, ich höre keine gegenteiligen Meinungen, also geh ich mal davon aus, ihr seid jetzt alle keine Anfängerinnen und Anfänger, was das betrifft, aber ihr möchtet vielleicht gerne wissen, hey, wie kann ich mein Workflow, wie kann ich meine, meine letztendlich Qualität meines Codes verbessern und hier eben speziell auf CSS ist das ganze zugeschnitten. CSS, gut und hässlich, ja, das sind genau die zwei Teile meines Vortrags und zwar das erste Gut, also gutes CSS heißt jetzt in dem Fall nach CSS Coding Standards, also wir haben für WordPress auch speziell für CSS ein Coding Standard, habe ich jetzt einfach hier nur schnell reingeworfen, wer sich da näher informieren möchte dort auf der, auf der, auf der Makeseite gibt es quasi genau erklärt, wie der Codes Standard von WordPress CSS Files auszusehen hat, ja, also da kann man sich orientieren. Das ist gut sozusagen, ja und wie mache ich das gut, also das eine ist das, was da auf der Seite steht, aber ich weiß nicht wie es ausgeht, ich weiß gar nicht was da genau, also ich habe schon x mal gelesen, aber ich könnte es jetzt nicht aus dem Kopf sagen, okay, CSS muss jetzt, was weiß ich, okay, alles mit Tabs Einrückungen müssen wir haben, wir müssen, brauchen wir immer einen Simikolon am Ende oder brauchen wir keinen Simikolon am letzten, das weiß ich selber aus dem Kopf gar nicht, will ich auch gar nicht lernen oder wissen müssen, ich will, dass es einfach funktioniert, dass das vernünftig der Code sozusagen ausgegeben wird. Und dafür gibt es, das lässt sich alles wunderbar automatisieren, also das heißt, wenn ich Code schreibe, ich kümmere mich im Prinzip gar nicht um diese Codes Standards. Die sind mir in dem Sinne egal, weil wenn ich für was anderes schreibe, habe ich anderes Standards und so weiter, da will ich mich jetzt nicht groß irgendwie mit beschäftigen. Ich brauche aber etwas, was dann quasi im Nachgang über mein Code geht, den analysiert und sagt, hey hier, Freundchen, pass mal auf, hier hast du vielleicht nicht standardkonform geschrieben, bitte mache auch am letzten, an der letzten Regel dein Simikolon oder bitte ersetze die Leerzeichen mit Tabulaturen und so weiter, bitte halte dich an gewisse Standards. Und um so einen Tool sozusagen geht es mir im Ersten, also um das gute CSS und da gibt es hier, Steiland.io ist ein Tool, Werkzeug, was mein Codes, mein CSS Code analysiert und was mir eben Hinweise gibt, okay, pass auf an der Zeile, Zeichen so und so, hast du etwas vergessen? Oder hast du was, was ich alles großgeschrieben, aber du musst es klein schreiben, solche Regeln halt nicht, kann dieses Tool checken für euch, für euren Style und kann euch dann eben die Hinweise dafür geben. Das macht Steiland. Steiland ist erstmal einfach nur das Werkzeug an sich. Man kann Steiland dann so konfigurieren, das ist unter anderem eben nach diesen WordPress CSS Coding Standards, dass das genau diese Regeln beachtet in eurem Code und euch genau spezifisch für die WordPress Standards dann die entsprechenden Hinweise gibt, falls ihr etwas falsch gemacht habt. Wenn ihr alles richtig gemacht habt, dann gibt es keine Fehlermeldung, logischerweise dann schweigt das Ding. Das ist CSS gut und was ist jetzt CSS hässlich gemeint? Ja, das ist nichts weiter. Also das erste Teil Steiland ist quasi ein Hinweisgeber, ein Verräter sozusagen, oder Spion. Es spioniert meinen Code durch und es gibt eine Hinweise, aber von seiner Seite aus oder so wie Stand der Technik zur Zeit gerade ist, repariert es mir den Code noch nicht wirklich. Also es gibt nur Hinweise, es gibt jetzt, zeige ich nachher, es gibt so ein paar Ambitionen, das auch noch so auszubauen, das ist dann automatisch gleich die Fehler fixt, aber das ist noch nicht so ganz durchdrungen. Es gibt aber noch ein zweites Tool, was ich noch gerne in dem Zusammenhang vorstellen möchte, das ist dieses CSS Nano. Auch das Werkzeugen Plug-in, was ich benutzen kann, um mein Code nicht standardkonform oder nicht unbedingt standardkonform, aber dann für den Live Server aufzubereiten. Also Stichwort ist hier vor allen Dingen Minifizierung, sprich alles, was unnütze Zeichen sind, Leerzeichen, Umbrüche und so weiter, schmeißt das Ding radikal raus, wenn ich das will, also kann ich auch wieder alles definieren, macht irgendwelche sinnvollen Kürzel. Also wenn ich zum Beispiel Hex-Code hier weiß habe, 6 mal F, F, F, F, das sind 6 Zeichen und das kann man natürlich auch in 3, also in der Kurzschreibweise F, F, F schreiben und dieses Tool checkt halt mein Code und findet das 6 F sozusagen, dann nimmt es nur 3 und so weiter und so fort. Eine ganze Latte können wir nachher auch vielleicht nochmal kurz drüber gucken, an Regeln, was das beherzigt und das fixe dann auch gleich direkt mein Code. Also ich muss sozusagen, ich schreibe einfach ganz normal meinen guten CSS Code, den ich sozusagen in dem Entwicklungsstrang habe und wenn ich deploy, also wenn ich das dann ausgeben lasse, dann ist das minifiziert in der extra minifizierten Datei mit Mapping Schikan, die ich gerne haben möchte und das gute daran ist, dass es voll automatisch ist. Also ich mache jetzt, ich speichere, wenn ich, wenn ich schreibe in der guten Datei sozusagen, schreibe ich meinen Code, mein CSS Code und wenn ich speichere, dann wird automatisch ein Workflow getriggert sozusagen, der dieses Minifizieren hier unten dieses CSS Nano anstößt und das läuft einmal durch und dann gibt es mir hinten die minifizierte CSS Datei aus. Das ist jetzt so in 10 Minuten, 5 Minuten Blitz erklärt, worum es hier geht. Das ist jetzt aber nur Text und das ist jetzt alles hier nur so ein bisschen statisch. Ich habe mir gedacht, am besten zeige ich das und ich hätte auch den Vorschlag, also wer Lust hat, kann das auch gerne so ein bisschen für sich am Gerät, am Computer nachmachen. Jetzt ist hier noch die Frage, kennt sich jemand mit PHP Storm aus und weiß, wie man hier unten den Editor weiß kriegt, hell kriegt? Wenn nicht, na gut, da müssen wir damit leben, das Wichtige ist eigentlich auch oben drin. Das ist Standard, also ich habe hier GTK eingestellt, ich kann es immer auf Enternity, aber das wird nicht viel ändern. Okay, haben wir ein kleines Handy, jetzt muss ich nur wissen, wie ich den zoome. Hier ist kein Mac, ich mache hier gerade Steuerung plus, aber hier ist nichts mit Steuerung plus. Ihr seht schon, ich bin bestens vorbereitet, hier irgendwo ein Zoom drin, oder ja, genau, alles enabled. Na gut, was ich euch zeigen möchte, ist erstmal weniger relevant im Terminal, da kommen wir nachher und dann können wir das mal umschalten. Was ich euch zeigen möchte, ist einfach quasi, wie wir das bei uns in der Agentur oder wie ich das bei uns händle, technische Grundlage, wie jetzt diese ganze Automatisierung und wie diese ganzen Plugins zueinander spielen, ist bei mir Node.js beziehungsweise NPM, das läuft alles über diesen Node Package Manager und hat nichts mit PHP Storm zu tun. Ihr könnt auch euer Sublime Text oder VS Code oder was auch immer für Editor habt, das spielt damit keine Rolle, sondern was wir brauchen auf unserem Entwicklungsrechner ist Node.js und wenn wir Node.js, wenn man das installiert hat, dann ist dort inklusive sozusagen dieses NPM, dieser Node Package Manager, gleich mit dabei. Und was ich dann mache, wenn ich jetzt zum Beispiel ein neues Projekt habe, so wie hier, also ich habe jetzt hier angelegt, ein Theme, ich zeige es euch mal auf der Datei Ebene, sieht das dann so aus, also hier, ich bin in diesem Theme, ja gut, hier ist auch Black, aber hier kann ich es größer machen zumindest. Also ich habe jetzt einfach ein Theme, also ein WordPress Theme und das Theme an sich, so wie ihr das kennt, was ihr entwickelt, liegt bei mir in diesem Bildordner, also wenn ich den aufmache, das ist jetzt ein Schalt Theme, okay, deswegen nur so ein paar Dateien, dort liegt das eigentliche Theme drinnen und in diesen anderen Ordnern habe ich halt irgendwelche Sachen, die ich jetzt hier zum entwickeln für mein Workflow brauche und da ist zuerst mal ganz wichtig diese Package JSON-File, das ist das, also wenn ich das Projekt beginne init, also NPM init, wird initiiert, läuft einfach so ein kleiner Abfragetool durch, ist egal was man da reinschreibt, das braucht man nicht weiter, aber das ergibt mir dann diese Package JSON-File, also diese Konfigurationsdatei und die ist dann wesentlich für mich, wo ich die Konfiguration vornehme bzw. die Installation dann vornehme von diesen einzelnen Plugins, also ich hatte ja schon gesagt, es gibt einmal dieses Styland Plugin und es gibt das CSS Nano und kurzer Überblick, also diese Package JSON hat immer denselben Aufbau, da steht irgendwas Name, eine Version, eine Description, das sind aber alles Angaben, die wir hier, hey super, danke dir. Also diese Obigen, was ich jetzt so markiert habe, das sind Standardkonfigurationswerte, die beim init angelegt werden, da ist für uns jetzt hier aber egal, was da drinnen steht und die sind einfach nur da, wichtiger ist dann hier drunter, gibt es Abhängigkeiten und da werden, sobald ich einen Plugin installiere, wie zum Beispiel unser besagtes Styland, das seht ihr da, schön alphabetisch, werden die dort abgelegt, dann steht Styland, dann steht hier welche Versionsnummer, das ist für uns alles egal, wir installieren das einmal und dann liegt es dort drin und mit diesen Package JSON, also ohne dass es installiert ist, wenn ich diese Datei nehme und beim Kollegen auf dem Rechner installiere und dann sage hier init beziehungsweise installiere, dann werden diese ganzen Abhängigkeiten installiert, wenn sie nicht da sind, wenn sie nicht gefunden werden und dann hat der Kollege exakt dieselbe Umgebung, mit der er arbeiten kann, so wie ich es eben auch habe. Dadurch, dass ich Styland habe und dadurch, dass ich jetzt die WordPress Standard CSS Konfiguration habe, das seht ihr hier unter, Unter Styland ist nochmal so ein anderes Package, so ein anderes Plugin, das ist das offizielle von WordPress angebotene Package, wo diese Konfigurationen drinstehen, die Regeln drinstehen, wie eben WordPress Konformes CSS aussehen soll, das bringt dieses Plugin hier mit sich. Und wenn ich das beides habe, dann kann ich sicherstellen, dass bei mir meinen CSS Code und der Kollege, der vielleicht am selben CSS Code, am selben Theme auch mitarbeitet, dass wir beide nach demselben Standard unsere Ausgabe haben. Also das, was wir da reinschreiben sozusagen, ist nach diesem CSS Standard gesichert. Das ist nur erstmal so das grundsätzliche, was wir hier betreiben. Dann seht ihr noch verschiedene andere, also hier das CSS Nano, dann gibt es noch CSS Nano Preset at once, also das ist eine erweiterte Konfiguration oder ein Plugin, was noch ein paar Erweiterungen zum bestehenden CSS Nano mit sich bringt, zeige ich nachher noch. Und noch zwei andere, dieses On Change, was ich hier habe und dieses Browser Sync, brauchen wir eigentlich nicht, zwangsläufig für das, was ich hier zeigen will, aber einfach um das zu vereinfachen, habe ich die immer gleich mit dabei. Wie installiert man das? Also wer, ich weiß nicht, MPM, Ahnung, okay, zwei, drei Leute, MPM, dieser Package Manager, den kann ich über ein Terminal ansteuern, da schreibe ich einfach NPM, I oder Installation und dann den Namen von dem Paket. Also wenn ich jetzt zum Beispiel CSS Nano bei mir installieren möchte, NPM, I, CSS Nano und dann läuft das Ding automatisch durch und ich habe das Plugin installiert bzw. es wird mir hier in dieser Abhängigkeitsliste mit angelegt. Dann ist es da, aber es funktioniert noch nicht, weil logischerweise, es muss ja erstmal wissen, was es tun soll, ich muss es konfigurieren, also erstmal muss ich es installieren. Okay, das haben wir jetzt gemacht, wir haben Styland installiert, wir haben CSS Nano installiert, die liegen schön in unserer Abhängigkeitsliste hier drin und okay, jetzt wollen wir sie benutzen. Damit wir das benutzen können, können wir unter NPM verschiedene Skripte oder Tasks laufen lassen und das ist das, also ein Task ist das, was wir hier unter Scripts, ich nenn es mal lieber Scripts jetzt, anlegen, das ist wieder das selbe Prinzip, ich habe hier irgendein Name, den habe ich jetzt vergeben, also hier in dem Fall Styland habe ich einfach mal praktischerweise Styland, da könnte auch irgendwie Käsekuchen stehen, es ist egal, ich habe hier einen Task oder Skript post CSS und Change und so weiter und so fort, erkläre ich gleich. Erstmal das erste, den ersten Task, den ich habe, also ich möchte dieses Styland zum Laufen bekommen, so, da muss ich hier diesen Befehl, wenn ich in diesem hier, was das schön grün ist, was ich jetzt gerade markiere, ausführen, das ist auch auf der Styland Seite sehr gut erklärt, also ich gehe da jetzt ein bisschen im Schweinsgalopp durch, zum einen brauche ich erstmal hier überhaupt, okay, wer bist du, also Styland, dann muss ich eine Quelldatei angeben, also welche Datei soll Styland denn eigentlich checken, in dem Fall ist das jetzt dieses hier, also ich habe ein Fahrt SRC, das ist mein Source sozusagen, PCSS, das hängt ein bisschen damit zusammen, dass ich vielleicht habe dir SASS oder ihr habt LESS oder irgend sowas und ich habe eben PCSS, darum heißt das so und dann die konkrete Datei ist in meinem Fall WCWE, also WorldCamp Würzburg und Style und die heißt einfach PCSS, sie könnte auch CSS sein, also es könnte auch die Style-CSS-Datei sein, das ist erstmal egal, es muss nur irgendeine CSS, S-CSS-LESS, was gibt es noch? Whatever, Stylesheet-Datei halt sein und der korrekte Fahrt dorthin. Der Fahrt kann, wie in dem Fall, relativ sein, der kann absolut sein, das ist egal, es muss halt irgendwo liegen und es muss halt, der Fahrt muss hier stimmen, dann gibt es noch ein paar Optionen, also in dem Fall hier sag ich Konfig, das heißt okay, ich habe eine Konfigurationspfeil und guck da bitte rein, also wenn du Styland ausführst, dann guck bitte in diesen Konfigurationspfeil und hier ist dann die Adresse, wo ist dieser Konfigurationspfeil, den habe ich bei mir, ich habe so ein Folder NPM Conf und dort gibt es diese Style-Lint-TSC-Datei, dort sind die ganzen Konfigurationen drinne, nein die habe ich, zeig ich gleich, ich mach die gleich auf, die muss man selber konfigurieren, aber auch da gibt es sehr gute, also wie man das macht, im Grunde habe ich auch nur Copy und pasted, aber man muss das schon so ein bisschen selber zusammenstellen. Also jedenfalls ist das hier die Konfigurationsdatei für mein Styland und dann habe ich am Ende noch so eine kleine Option, das ist das neue, was es seit einem, weiß nicht halben Jahr, viertel halben Jahr gibt, fix, das heißt also es gibt schon ein paar Dinge, die kann Styland selber fixen, also selber reparieren. Eins das zeige ich dann gleich ist, wenn ich bei WordPress ist es so üblich Tabulatoren und das ist auch gut so und wenn ich jetzt eben versehentlich halt irgendwas habe, wo nur Leerzeichen sind, dann fix, dass das automatisch, also ich muss da nicht von Hand da irgendwas schreiben, sondern das macht das Ding, aber das ist noch sehr, das ist noch im Alpha Stadium, es gibt noch nicht so viele Fixes, das ist aber gerade in der Entwicklung und irgendwann wird sich das verbessern. Gut, dann würde ich mal gerade schwenken, so wie komme ich jetzt hier wieder aus dem Modus raus, Exits, genau, und wir springen mal in besagte, woop, das können wir so lassen, das ist jetzt diese Stylanddatei, also diese Konfigurationsdatei für mein Styland, so hier oben geht es los, auch die ist ganz easy, also wir haben hier einfach ein Array und da steht dann eben der wichtige Satz oder die wichtige Zeil hier oben drin, Extents, also wir haben eine Erweiterung zu dem normalen Styland und da verweise ich einfach auf diese andere Plugin, auf dieses WordPress CSS Standard Konfigurations Plugin, mehr mache ich da gar nicht, Extents, bitte guck jetzt hier nach, die Regeln bitte nach diesem Plugin, in dem das Skript weiß dann, wo ist dieses Plugin installiert, da kümmert sich MPM, da müssen wir uns überhaupt nicht drum kümmern, wo das liegt, das ist uns völlig egal, wir wissen nur, wir haben es installiert und wir haben jetzt in unserer Konfigurationsdatei gesagt, okay, mach nicht nach normalen Styland, so wie du das, deine Default, deine Standardwerte, sondern Extent, also guck hier in dieses andere Ding danach, da findest du irgendwo in diesem Plugin, findest du die Konfigurationsregeln, die WordPress Standard Konform sind und theoretisch könnte ich das Ding jetzt zu machen, also alles was jetzt hier drunter noch kommt, diese Rules, das sind jetzt hier nochmal so spezifische Sachen, die ich jetzt irgendwie im Laufe der Zeit, ich muss ehrlich gestehen, als ich mir gestern Abend nochmal Zeile für Zeile das vorgenommen hatte, konnte ich mich an einige Sachen gar nicht mehr erinnern, warum ich die da eigentlich reingenommen habe, ist historisch gewachsen, vielleicht sollte ich es einfach mal, einfach mal karten und die Rules, also theoretisch könnte ich die Rules rauslassen und könnte nur mit diesen Extent, also nur mit der Zeiler 2 oben, könnte ich jetzt schon den ganzen Styland durchlaufen lassen und ich hätte CSS Konform, aus bestimmten Gründen habe ich das aber nicht und wir zeigen auch nachher noch, oder ich zeige nachher auch noch warum nicht, weil Styland ist jetzt nicht so ganz, das hört sich jetzt vielleicht hier, das Marketing hat jetzt gut bis hierhin gut gearbeitet, hört sich alles so easy und einfach an und da haben wir so ein Word von WordPress selber, so eine Konfigurationsregeln und die schiebe ich hier einmal rein und dann ist alles gut, ganz so gut ist es dann doch nicht, also man muss schon so ein bisschen nachbessern und eine Sache können wir uns gleich nochmal angucken, so jetzt musste ich hier noch wieder rauskommen, Exit, ich versuche jetzt mal, vielleicht schaffe ich es ja doch, ah hier haben wir doch was, hey, vielleicht, nee, das wäre zu schön gewesen, hey du bist ja, du bist Gott, so jetzt sind wir im Theme, genau und jetzt haben wir das auch richtig, kurze Besonderheit, das ist jetzt PHP Storm spezifisch, das ist aber wie gesagt im Grunde egal, PHP Storm bietet mir hier, das finde ich, es ist für einen täglichen Bedarf, täglichen Gebrauch sehr schön, hier ein Folder an wo alle meine, könnt ihr das sehen, da bis hier, also da sind alle meine Tasks, also alles diese Skripte, die ich hier in der Package Jason, oh Mann, also die hier angelegt habe, diese Liste, also die Namen hier von diesen Namen, die finde ich hier jetzt einfach nochmal aufgelistet und das macht es mir sehr einfach, das Ding dann einfach zu nehmen, zu sagen, okay hier, ich habe meinen Styland, jetzt lass einfach mal Styland laufen und ihr seht, hier unten so ein Run, da drücke ich drauf, ich kann auch NPM Run Styland machen im Terminal, vielleicht mache ich das mal, da mache ich das richtig von Hand, ich hoffe, ich habe mir jetzt nicht, jetzt habe ich den angeschoben und was macht das Ding jetzt, naja, es guckt halt in dieser, ihr könnt es nicht lesen, oder? Also durch diesen Terminal-Komand habe ich jetzt einfach nur gesagt, okay starte mal diesen Styland-Skript, diesen Styland-Task und den habe ich jetzt hier quasi angestoßen, NPM Run Styland, also dieses Ding hier oben und was macht er, er läuft, also er lädt Styland-Plug in, guckt halt in dieser Datei, in dieser WCW Style-PCSS-Datei nach, checkt die anhand dieser Konfiguration, die wir in diesem Styland vorher angelegt haben und gegebenenfalls macht er noch ein Fix, so. Und jetzt hier habe ich das von Hand gestartet, jetzt kommen hier irgendwelche Meldungen, dass das eben gelaufen ist und das angestoßen hat und das eigentlich Interessante ist hier, dieser Bereich, ich versuche das nochmal zu markieren, vielleicht kann ich das ein bisschen, ach so, warte mal, wir haben doch, so anders herum, so NPM Styland, ah nee, Run, so, also jetzt nochmal, jetzt könnt ihr es sehen, jetzt starte ich den nochmal, jetzt sagt er hier, alles klar, geht durch und hier ist die Ausgabe, was dieses Styland macht, letztendlich nichts weiter als das hier, gibt es mir, komme ich gleich drauf, hier gibt er mir jetzt aus, okay hier, ich habe deine, deine Source-PCSS, WCW Style-PCSS, irgendwie hier sind die Ergebnisse, also die habe ich gecheckt und da gibt es irgendwie auf Zeile 6, an Zeichen, an Stelle 20, gibt es, also hier, das ist ein Warning oder ein Error ist das eigentlich sogar und hier gibt es irgendwie ein unerwartetes Unit PX, also irgendwie hat er da ein Wert PX irgendwie und mit dem kann er nichts anfangen. Und jetzt kommen wir, warum ich diese komische Styland-Datei, warum ich diese Rules da habe, weil aus irgendwelchen Gründen hat er ein Problem mit Pixel, also mit dem Wert, mit der Pixelangabe und da stelle ich fest, na ja, moment mal, das ist doch aber gar kein Fehler, das habe ich doch, wie soll ich denn ohne Pixel 200 Pixel oder irgendwas einen Wert angeben, das gehört doch damit rein, also kann ich jetzt an der Stelle zum Beispiel diese Styland um diese Rule erweitern, mache hier bitte Unit Whitelist, ich gehe nochmal zurück, Präsentationsmodus und da haben wir hier unten so eine Whitelist, die habe ich mal aus Gründen angelegt und da sehen wir, steht EM drin, steht Rem drin, sind Prozente drin und ein S, mit dem ich auch nichts mehr anfangen kann. Und wenn ich das jetzt erweitern möchte, schreibe ich jetzt hier Pixel rein, mache hier die Klammer, ich könnte auch die Whitelist rausnehmen, das wäre jetzt, ich will jetzt nur mal zeigen, dass es hier auch andersrum funktioniert, habe jetzt meine Whitelist erweitert, also um Werte, die ich unterstützen möchte. Es kann ja sein, dass ich 10 Minuten noch, dass ich ein Style, dass ich eine Vorgabe habe, ok, mache alles nur relativ zum Beispiel, benutze nur relative Angaben und dann haben Pixel da natürlich nichts drin zu suchen in meinen CSS, dann muss ich eben mit Prozenten oder was auch immer mit Rem M da arbeiten. So, aber jetzt möchte ich das nicht haben, ich fixe das hier, ich habe jetzt dieses PX reingemacht und wenn ich jetzt nochmal, nee, das war das falsche und das jetzt hier nochmal durchlaufen lasse, sollte ich erwarten, dass es jetzt auch nicht mehr da drin steht. So, jetzt lasse ich durchlaufen und wie ihr seht, jetzt gibt es nicht mal mehr eine Fehlermeldung, gar nichts. Also, wenn er nicht meckert, dann ist alles gut, jetzt war mein Code vernünftig. Achso, noch was hier so steht, dieses andere, dieser ganze Rattenschwanz hier, das ist NPM typisch, also da gibt hier diese Fehler, oder was ist Fehler, diese Meldung 2 aus, dass er eben Fehler hatte, das ist das hier oben und dieser ganze Quatsch hier, ey, ich war nicht, ich war es nicht gewesen, vielleicht bist du das irgendwie, bla bla, das kann man auch abschalten, wenn das nervt, also es gibt da so ein Exit 0, Exit 0, dann ist das weg, aber das braucht man dann schon, wenn man so etwas anlegt oder entwickelt, dann braucht man so eine Übersicht, also das ist okay, das ist gewollt sozusagen. Jetzt können wir uns nochmal kurz den Code angucken, Moment, Exit. So, und was ich jetzt gemacht habe, völlig unspektakulär ist, ja, dieses bisschen hier, also hier haben wir ein Paragraf irgendwie definiert mit einer Hintergrundfarbe und dann gibt es hier nochmal so ein Media Query und da seht ihr 500 Pixel, das hat das Ding vorhin nicht gefressen, da hat er gesagt, nee, Pixel mag ich nicht oder darf ich nicht, darfst du nicht, Fehler Fehler Fehler und jetzt haben wir gesagt, doch, Pixel sind erlaubt und jetzt hat er da nicht mehr rumgemeckert. Achso, ich hatte es vorbereitet, das habe ich jetzt vergessen, das können wir gleich nochmal zeigen, das ist umständlich, also, dass der Fix auch funktioniert, das habe ich, ups, jetzt macht er das automatisch, so, also groß, genau, ich habe jetzt hier auf Zeile 9, habe ich einfach mal diese Klammer eingerückt, also die ist jetzt nicht richtig raus oder ich mache sie mal 1, 2, 3, 4, so, jetzt sieht es wieder gut aus, aber mit Leerzeichen, ihr wisst, Leerzeichen darf nicht sein, gute Entwicklerinnen und Entwickler nehmen natürlich Tabulatoren zum Einrücken, zumindest nach WordPress-Standards und hier habe ich jetzt diese Einrückung gemacht und wenn ich jetzt nochmal, nee, weg hier, weil ich den jetzt nochmal durchlaufen lasse, müsste er eigentlich meckern oder auch nicht, er hat es gleich gefixt, hoffe ich mal und jetzt haben wir hier, seht ihr, jetzt ist das hier ein Tabulator, also der hat aus den Leerzeichen automatischen Tabulator gemacht, hat nicht weiter sozusagen, hat sich da gar nicht weiter so herum gekümmert um mich, sondern hat das automatischem Hintergrund repariert, das macht Styland, aber was wir jetzt gesehen haben ist, also das eigentliche Styland ist weniger dieses automatische Fixen, das kommt jetzt so langsam und dauert sicherlich noch eine Weile, bis das vernünftig entwickelt ist und ist halt im Alpha-Stadium, also sollte man jetzt noch nicht unbedingt auf jedem System machen, aber nichtsdestotrotz ist das ein wertvoller Hinweisgeber, wenn ich neuen Code übernehme, also bestehenden Code übernehme von Kunden zum Beispiel, soll das Theme erweitern oder irgendwas und guckt dann da in das CSS erstmal rein, dann lasse ich genau diesen Styland, diesen Checker sozusagen mal durchlaufen und dann kriege ich ganz viele unter Umständen ganz viele Hinweise, wo da was nicht nach standardkonform CSS gemacht wurde. Soweit zum guten, zum guten Style, jetzt noch in den letzten 5 Minuten wahrscheinlich, genau, machen wir es noch agli, was eigentlich viel schöner ist, also was eigentlich viel besser ist, mir immer gefällt und ihr seht jetzt hier, rechts ist das Ergebnis sozusagen, ah ja, jetzt kann man das so nebeneinander sehen und hier seht ihr eben, ist derselbe Style, also links ist halt mein Original, meine Source und hier ist mein Bild, also das was ich dann als minifizierte Datei rausgebe und da hat er jetzt automatisch erstmal die ganzen Zeilenumbrüche rausgeschmissen, hat sich gekümmert, okay, gibts hier, ah so, gekürzt, Moment, also wenn ich jetzt so was hier habe, so was hier habe und lasst das jetzt einmal durchlaufen, dann schneidet er mir das trotzdem so hier, also das was ich jetzt links habe in lang, würde er mir rechts dann trotzdem wieder in kurz, zu rechts sebeln. Wenn ich das möchte, kann ich noch eine Map hinten ran setzen, damit ich dann auch beim Debacken auf dem Live Server sehen kann, okay, das war jetzt im Fall in Zeile 6, irgendwie bla bla, habe ich da jetzt irgendwie so ein Media Query drinne, das habe ich jetzt in dem Fall hier nur nicht drinne, weil das ist nur ein kleiner Teil aus einem viel größeren Konfiguration oder viel größeren Workflow, den ich da benutze und ganz zum Schluss kommt dann erstes Mapping, aber das ist egal, aber das kann man mit diesem CSS Nano halt alles bewerkstelligen. Was kann CSS Nano noch? Es findet auch zum Beispiel Leere, wenn ich irgendwelche Sachen habe, die sich überschreiben zum Beispiel, ich habe ersten Paragraf background ccc, mache alles grau und 30 Zeilen später habe ich nochmal ein Paragraf background red, also mache alles rot, Hintergrundfarbe, dann sieht das, ah Moment, hier oben ist grau und jetzt hier unten will er das in rot haben, dann schmeißt er oben das grau einfach raus, also der findet solche Überschreibungen und haut die aus diesen, also schmeißt die dann im End Style raus, da steht dann wirklich nur einmal background. Das letzt, immer der Letzte, immer das was unten ist gewinnt, weil der beim Rendering geht es ja von oben nach unten, geht es einmal so durch und dann schaut er eben okay, was oben ist, ist erstmal gesetzt und was als neues kommt, dann fliegt oben raus, so ganz simpel. Bitte? Das wird alles gemapped, ja, ja, ja, das ist also wirklich, wenn du dann den Browser aufmachst, Developer Tool und dann guckst du hier Inspect so und so, was hier, das ist jetzt hier alles nicht vorbereitet, aber was ich zum Beispiel auch habe und das ist ja typisch, wenn man jetzt mit SCSS oder eben mit PCSS arbeitet, dass du verschiedene, wir heißen das nicht Mixins, sondern also verschiedene, ich habe eine, einen Haupt, zum Beispiel meine Style CSS und unterteil die nochmal in irgendwelche header, CSS, navigation CSS, ihr wisst, und dann sagt er mir genau okay, in der header CSS auf Zeile 13 bla bla bla, irgendwie da hast du das und das, das ist alles in diesem Mapping drin und am Ende hast du aber nur diese eine Style CSS zum Beispiel, wenn du das so willst, so kannst du das konfigurieren, das sind aber noch mehr Plugins dahinter, wenn ich das so betreiben möchte, das ist nur, ich sage mal so, die Einstiegsdroge, also das CSS Nano war für mich der Einstieg in diesen ganzen Wust an Sachen, ich komme jetzt leider nicht mehr dazu, ich wollte euch eigentlich noch ein paar andere Schmanker zeigen, weshalb das eigentlich noch viel besser ist, also zum Beispiel Browser Sync vielleicht noch ganz kurz erklärt, hier zum Beispiel, das ist jetzt mein Code, das ist jetzt die Dings, hier habe ich das jetzt blau irgendwie gemacht und jetzt gehe ich hier einmal rein, ich hoffe der ist jetzt noch gestartet, ne Moment, ich mache das jetzt mal hier, ich habe hier so ein Watch Task, also so ein Watch Runner, den lasse ich jetzt einmal durchlaufen, so dann müsste das jetzt hier laufen und jetzt sage ich hier, du sollst sein Red, Rot und dann macht er das, oh das macht das nicht, das ist jetzt der, ah, okay, der lädt die Seite automatisch neu, ah mir ist mein, okay, der hat, nee, der hat die, weil im Netzwerk, also der vergibt dynamisch irgendwelche IPs, mal gucken, so okay, ist nicht sicher, weiß ich, ist ja lokal, Confirm, Jack, so und jetzt machen wir mal hier, sucht euch eine Farbe aus, machen wir es mal grün, so und dann muss ja, dann macht er solche Änderungen und das coole ist, ich weiß, also wenn wir jetzt Zeit hätten, ihr hättet euch jetzt einfach diese URL, wenn ihr im selben Netzwerk hier von der Uni seid, könntet ihr euch diese URL auf eurem Handy zum Beispiel oder auf eurem Rechner laden und jedes mal, wenn ich hier scrolle oder wenn sich die Farbe ändert, das analog macht das dann auf allen Geräten und wenn man halt responsive, also wenn man mit vielen Endgeräten gleichzeitig checken möchte, ist das also besser geht es gar nicht, also man kann dann x beliebig viele Geräte daran hängen und ich kann einmal scrollen auf meinem Handy und dann scrollt das auf dem Desktop, das scrollt auf dem Tablet genauso, ich kann Menüs ein und aus toggeln und so weiter und kann das genau checken, also da geht es dann hin, wenn man es dann richtig mit diesen Taskrunnern betreiben möchte. Okay, ich bin am Ende bzw. hab gemerkt, ja ne, sorry, das ist alles nicht so ganz vorbereitet und ich hab gedacht, ja, das ist schnell erklärt, aber ich hoffe trotzdem, ein bisschen kleinen Impuls euch vielleicht angepiks zu haben, Begu hat noch eine Frage, genau, wenn ich ein neues Projekt, ja, zurzeit ist es tatsächlich so Copy und Paste, also ich nehme mir das letzte Projekt, kopiere mir die, ich brauche einfach bloß, ich hab so eine Liste von Plugins, die ich halt, die installiere ich dann und dann ist alles da, was ich so brauche, also jetzt hier dieses Konfigurationsskript zum Beispiel, das kopiere ich einfach immer nur rüber und das ist für uns jetzt, was wir in der Agentur haben, wollen wir uns einen Skript schreiben, wo ich einfach nur Projektname eintippe, ich möchte halt das und das und das Plugin oder die so und jene Feature haben, aufs Knöpfchen drücke und mir das Ding dann automatisch bis hin zu Docker alles installiert und das alles aus einem Guss ist, soweit bin ich aber auch noch nicht, also da, das ist so meine Baustelle halt, aber diese Sachen hier, ja, die sind einmal angelegt, also Konfigurationsfiles, das ist halt immer WordPress Standard, wenn man WordPress Entwickler ist und WordPress Websites baut, hast du halt immer diesen WordPress Standard und dann kopierst und pastest du das einfach immer von Projekt zu Projekt mit. Habt ihr noch Fragen, sagt mir gar nichts. Ja, ja, ja. Warte mal, können wir das gleich mal sehen, WP, WordPress Theme Boilerplate, ich sehe schon AMP Ready und so weiter. Also, coole Sache, also für mich ist es so eine Dinger, die ich mir angucken werde, wo ich mir sozusagen studieren werde, okay, wie hat er es gemacht und wer das auf meinen Fall, also das ist so ein bisschen wie Frameworks, die sind zwar auf, also erstmal schnell gestartet und das ist ganz gut, aber dann musste dann doch überall tweaken und muss so ein bisschen anpassen und ich glaube aber, seinen Ansatz zu verinnerlichen und dann daraus auf meine oder auf unsere Bedürfnisse in der Agentur das zurecht zu schneiden und zu machen, das ist dann so, worauf es hinauslaufen wird. Und was er hier zum Beispiel nicht hat, hier ist jetzt noch keine oder noch keine IDE dabei, also Docker oder so sehe ich jetzt hier nicht, das ist jetzt nur das reine Theme, was er und die ganzen Packages, die da alle geladen werden. Also es ist schon mal ein Teil, den wir auf alle Fälle brauchen. Wir haben ja noch, also ich bin ja noch da, ich fahre erst morgen Mittag oder so, also noch, oh, das habe ich ganz, ganz, ganz schon, das war so mit das erste, was ich so an Tuskrunnern kennengelernt habe, Grunt, dann bin ich gewechselt zu Gulp und dann bin ich eben zu MPM gewechselt vor vier, fünf Jahren oder so. Also wenn ihr mit Grunt oder Gulp oder MPM arbeitet, das ist alles in Ordnung, das ist alles okay. Ich habe mich nur auf MPM eingeschossen, weil das sozusagen die Basis ist. Die anderen, die setzen, das sind nur so Wrapper Tools, die obendrauf setzen, die sind aber genauso in Ordnung. Aber ich kann euch jetzt keine spezifischen Grunt oder Gulp oder Brokoli oder was auch immer Fragen beantworten. Ich weiß nur, dass es die gibt. Ich weiß, wie die funktionieren ungefähr. Aber am Ende machen sie alle dasselbe. Und warum soll ich jetzt quasi da immer noch was oben so ein Türmchen auf ein Türmchen auf ein Türmchen aufbauen? So nehme ich die Basis MPM und selbst da bin ich gerade dabei, auf Batch, also noch eine Etage tiefer zu gehen, weil das auch noch zu, eigentlich brauchen wir das auch nicht. Also du musst ja mit dieses Note und diese tausend von Packages, die du da installierst, mitschleppen und das kann man auch noch mal reduzieren. Aber ich bin immer da. Gerne.