Smashing Podcast Folge 19 mit Andy Bell: Was ist CUBE CSS?
Veröffentlicht: 2022-03-10Heute sprechen wir über CUBE CSS. Was ist das und wie unterscheidet es sich von Ansätzen wie BEM, SMACSS und OOCSS? Ich habe mit seinem Schöpfer, Andy Bell, gesprochen, um es herauszufinden.
Notizen anzeigen
- CUBE-CSS
- Piccalilli
- Lernen Sie Eleventy von Grund auf – sparen Sie 40 %!
- Andy Bell und Piccalilli auf Twitter
Hinweis : Hörer des Smashing Podcast können mit dem Code SMASHINGPOD satte 40 % auf Andys Learn Eleventy From Scratch-Kurs sparen.
Wöchentliches Update
- „Was Vitruv uns über Webdesign lehren kann“
von Frederick O'Brien - „Eine Einführung in SWR: Reaktionshaken für das Abrufen von Daten aus der Ferne“
von Ibrahima Ndaw - „Wie Webdesigner Restaurants beim Übergang zu digitalen Erlebnissen helfen können“
von Susanne Scacca - „Ein praktischer Leitfaden zum Testen von React-Anwendungen mit Jest“
von Adeneye David Abiodun - „Django-Highlights: Umgang mit statischen Assets und Mediendateien (Teil 4)“
von Philip Kiely
Abschrift
Drew McLellan: Er ist Pädagoge und freiberuflicher Webdesigner mit Sitz in Großbritannien und arbeitet seit weit über einem Jahrzehnt in der Designer-Webbranche. In dieser Zeit hat er mit einigen der größten Organisationen der Welt zusammengearbeitet, darunter Harley-Davidson, BSkyB, Unilever, Oracle und der NHS. Zusammen mit Heydon Pickering ist er Co-Autor von Every Layout und leitet den Front-End Challenges Club, der sich darauf konzentriert, Best Practices für die Front-End-Entwicklung anhand kurzer, unterhaltsamer Herausforderungen zu vermitteln.
Drew: Sein neuestes Unternehmen ist Piccalilli, ein Website-Newsletter mit Tutorials und Kursen, die Ihnen helfen, sich als Front-End-Entwickler und -Designer zu verbessern. Wir wissen also, dass er ein erfahrener Entwickler und Pädagoge ist, aber wussten Sie, dass er die erste Person war, die mit einem Panda an der Crufts teilnehmen durfte?
Drew: Meine Smashing-Freunde, willkommen, Andy Bell. Hallo Andy, wie geht es dir?
Andy Bell: Ich bin großartig, danke. Wie geht es dir?
Drew: Mir geht es sehr gut, vielen Dank. Nun, ich wollte heute mit Ihnen über etwas sprechen, das Sie auf Ihrer Site Piccalilli gepostet haben, über eine CSS-Methodik, die Sie in den letzten Jahren für sich selbst entwickelt haben. Zunächst einmal sollten wir wahrscheinlich untersuchen, was wir unter einer CSS-Methodik verstehen, da dies für verschiedene Menschen unterschiedliche Bedeutungen haben könnte. Wenn Sie also an die CSS-Methodik denken, was geht sie Sie an?
Andy: Das ist eine gute, schwierige Frage für den Anfang, Drew. Schätzen Sie das, danke!
Draw: Willkommen!
Andy: Das ist schwierig. Also, für den Kontext, ich habe BEM für eine lange Zeit verwendet, und das ist Block Element Modifier. Das gibt es schon lange. Ich betrachte eine CSS-Methodik so, dass es sich nicht um ein Framework, sondern um eine Organisationsstruktur handelt. So sehe ich es gerne. Es ist fast wie ein Prozess. Es ist, als hätten Sie ein Problem, das Sie mit CSS lösen müssen, und Sie verwenden die Methodik, um es für Sie zu lösen und die Dinge vorhersehbar und organisiert zu halten. BEM ist dafür einfach legendär, weil es unglaublich erfolgreich war.
Andy: Dann könnte man Dinge wie die Stilkomponenten und solche Dinge fast qualifizieren. Man kann fast sagen, dass sie methodenorientiert sind, obwohl sie ein bisschen mehr mit Rahmenwerken verwoben sind, aber dennoch ist es eine Methode, Dinge in winzige Moleküle zu zerlegen. Das versuche ich im Wesentlichen auch mit CUBE CSS zu erreichen. Eine Denkstruktur, ich glaube, ich habe sie als beschrieben.
Drew: Es ist also eine Prozessanwendung, wie Sie CSS entwerfen und schreiben, und es ist nicht so sehr irgendetwas, das auf Tools oder irgendeiner anderen Art von Technologie basiert, es ist einfach eine Art Arbeitsablauf. Es gibt also viele verschiedene Ansätze. Sie haben BEM erwähnt. Es gibt SMACSS, OOCSS, Atomic CSS. Und dann gibt es diese Art von ungewöhnlichen Lovechild-Ansätzen wie ABEM. Hast du das gesehen?
Andi: Ja.
Drew: Warum selbst veröffentlichen?
Andi: Ja, ja. Warum selber machen? Das ist eine sehr gute Frage. Ich denke, wer mich gut kennt, weiß, dass ich gerne und oft gegen den Strom segle. Das liegt vor allem daran, dass ich auch viele abwechslungsreiche Projekte in unterschiedlichen Teams mache. Ich habe festgestellt, dass es sehr schwierig ist, mit BEM mit einem traditionellen Entwickler zu arbeiten, weil sie daran gewöhnt sind, CSS für das zu verwenden, worum es bei CSS geht: die Kaskade usw., und deshalb habe ich das irgendwie aus der Sprache gestohlen .
Andy: Auf der anderen Seite sind weniger strukturierte Methodologien, es ist schwieriger, mit einem Programmierer zu arbeiten, JS-Art von Person, weil sie Struktur und Organisation und kleine Komponenten mögen, was verständlich ist, mit der Sprache zu arbeiten, in der sie arbeiten.
Andy: Also fand ich mich in diesen Positionen wieder, wo ich mit verschiedenen Arten von Menschen arbeitete, verschiedene Arten von Projekten, bei denen eine Methodik nicht ganz funktionierte. Im Laufe der Jahre habe ich einfach mit dieser Idee herumgespielt, wie die Dinge laufen, und dann gibt es das Zeug, das ich und Heydon gemacht haben, Every Layout, das den großen Teil davon irgendwie durchgesetzt hat, nämlich das C, den Kompositionsteil , und dann habe ich es in den letzten sechs Monaten einfach sehr schnell entwickelt.
Andy: Der einzige Grund, warum ich einen Artikel darüber geschrieben habe, war, dass ich gerade diesen Kurs gemacht habe und dachte, ich schreibe besser etwas ergänzendes Material dazu, damit die Leute es verstehen, und es ist absolut in die Luft gesprengt. Vielleicht sind wir also noch nicht über die Methoden hinaus, Drew.
Drew: Das Kursmaterial, das Sie zusammengestellt haben, verwendet also tatsächlich CUBE CSS als Methodik, oder?
Andi: Ja. Gut 50% des Kurses sind also tatsächlich Frontend, obwohl es sich um einen unbegrenzten Kurs handelt. Es ist so tief in die Art und Weise verwoben, wie wir das Frontend aufbauen, dass ich nicht einfach sagen konnte: „Oh, übrigens, so schreibe ich ein schönes CSS“ und es dann belassen konnte. Ich weiß, dass die Leute gerne ins Detail gehen, also dachte ich, was ich tun werde, ist, ich schreibe diesen Beitrag, der wirklich lang und sehr detailliert ist, und dann, wenn jemand sich weiterbilden und wirklich verstehen möchte, was wir tun , dann können sie es tun, und der Rest kommt von dort. Und hier sitzen wir heute, Drew, und reden darüber.
Drew: Also, wenn jemand BEM bereits versteht und BEM vielleicht bereits als Beispiel verwendet, weil das wahrscheinlich eine der am weitesten verbreiteten Methoden ist, nicht wahr? Wenn sie BEM bereits verstanden haben und zu CUBE kommen, ist das etwas, das sie leicht übernehmen könnten? Gibt es viele Gemeinsamkeiten oder ist es komplett anders?
Andi: Ja. Ich würde sagen, dass der Übergang von BEM zu CUBE wahrscheinlich ein reibungsloser Übergang ist, insbesondere die Art und Weise, wie ich das CSS für CUBE immer noch gerne schreibe. Das meiste passiert also auf einer höheren Ebene. Es passiert also auf der Kaskadenebene und es passiert globales CSS, wobei die Dienstprogramme verwendet werden, um viele Dinge zu erledigen. Aber wenn man sich das Wesentliche anschaut, handelt es sich um sehr BEM-ähnliche Komponenten, Blöcke und Elemente. Das einzige, was sich irgendwie von BEM unterscheidet, ist, dass wir anstelle von Modifikatoren dieses Ding namens Exceptions verwenden, das heißt, anstatt CSS-Klassen zu verwenden, wendet es sich Datenattributen zu, was meiner Meinung nach ein nettes Stück Trennung und ein echtes gibt Ausnahme, was ein Modifikator sein sollte.
Andy: Ein Teil des Grundes, warum ich irgendwie von BEM abgesegelt bin, war, dass ich herausfand, dass die Art und Weise, wie ich damit arbeitete, besonders in Designsystemen, darin bestand, dass Modifikatoren dominiert wurden und es zu einem Problem wurde, weil es so war, was ist das Rolle meines Blocks an dieser Stelle? Denn wenn ich es regelmäßig bis zu dem Punkt modifiziere, an dem es nicht mehr wiederzuerkennen ist, funktioniert diese Methode dann immer noch so, wie sie funktionieren soll?
Andy: Dann gibt es das ganze Design-Token-Zeug, das Zeug, das Jina mit dem Lightning Design System gemacht hat, das wir jetzt alle übernehmen. Das Utility-Class-Zeug begann mit diesem Ansatz wirklich Sinn zu machen. Also habe ich einfach all die Dinge, die ich an der Arbeit anderer Leute mag, weggeschmissen und stattdessen in meine eigene gesteckt.
Drew: Du sprichst mit BEM von einer Art Modifikator-Ansatz, der außer Kontrolle gerät. War das einer der Hauptschmerzpunkte bei BEM, den CUBE anzugehen versucht?
Andy: Ja, absolut. Ich mag den Modifikator-Ansatz mit BEM, es macht Sinn. Was ich an BEM mag, ist etwas, das ich immer noch mache, der doppelte Unterstrich für ein Element und dann der doppelte Bindestrich für einen Modifikator. Ich mag diese Art, Dinge zu organisieren. Es war nur ein Fall von okay, naja, viele der Modifikatoren kann ich tatsächlich mit Utility-Klassen erklären und dann die anderen Bits …
Andy: Also das Beispiel, das ich in dem Artikel benutze, ist, stellen Sie sich vor, Sie haben eine Karte und dann wird die Karte umgedreht, sodass der Inhalt vor dem Bild erscheint. Dann macht das Sinn, Display zu sehen: flex und dann kehren Sie es um, kehren Sie die Reihenfolge um. Das macht Sinn, dafür eine Ausnahmeregel zu haben, weil es eine Ausnahme vom Standardzustand der Karte ist, und so sehe ich es gerne. Es ist wie ein betroffener Zustand auf dieser Komponente, was eine Ausnahme ist, und das macht Sinn.
Andy: Bei vielen Dingen, die ich in letzter Zeit gemacht habe, dem modernen Front-End-Stack mit reaktivem JavaScript, gibt es viele Zustandsänderungen, und es ist sinnvoll, sie zwischen CSS und JavaScript angemessen zu handhaben, weil sie immer mehr werden mehr miteinander verflochten, ob man will oder nicht. Es ist eine gemeinsame Sprache für sie. Wie Sie an meinem Gesicht sehen können, sehr nicht, aber bitte schön. Sie denken wahrscheinlich: „Eigentlich habe ich in letzter Zeit ziemlich viel mit React gearbeitet, also bin ich umgekehrt.“ Also das sehe ich auch.
Drew: Dann lass uns zu CUBE kommen. CUBE steht also für Composition Utility Block Exception. Ist das richtig?
Andi: Ja. Das ist der eine.
Drew: Was in aller Welt bedeutet das?
Andy: Oh, Kumpel, das hättest du schon mal hören sollen! Ich habe letztes Jahr einen Vortrag gehalten. Ich habe einen Vortrag gehalten, und er hieß Keeping it Simple with CSS that scales, und darin habe ich eine frühere Version davon namens CBEUT vorgestellt, das Cascade Block Element Utility Token. Es war Müll. Ich hasste den Namen. Ich habe es ein paar Mal gemacht, diesen Vortrag letztes Jahr, und ich mochte den Namen wirklich nicht. Als ich dann dieses Jahr dazu kam, dieses Zeug zu machen, dachte ich: „Ich muss wirklich darüber nachdenken, was es eigentlich ist und wie es heißt.“ Ich finde CUBE ist etwas weniger Müll. Ich denke, so kann ich es am besten beschreiben.
Andy: Aber Namen sind doch immer Quatsch für diese Dinger, oder? Ich meine, wie BEM, was für ein Müllname das ist! Aber wir alle tun es. Schauen Sie sich Jamstack an: Das ist auch ein schrecklicher Name, oder?
Drew: Meine Lippen sind versiegelt!
Andy: Ihr Chef sagt: „Was?“ Es ist wahr. Das ist in unserer Branche einfach so, nicht wahr?
Drew: Es scheint, dass viele CSS-Methodologien versuchen, einige der CSS-Features zu umgehen, Dinge wie die Kaskade. Meinem Verständnis nach, was ich gelesen habe, versucht CUBE, diese Art von Funktionen und Eigenschaften von CSS zu nutzen.
Andi: Ja. Eine gute Analogie dafür ist, dass SCSS, wie Sass, eine Erweiterung der natürlichen CSS-Sprache ist, nicht wahr? In CSS hast du immer noch ziemlich recht. CUBE CSS ist also so. Es ist also eine Erweiterung von CSS. Also sollten wir immer noch CSS schreiben, wie CSS sollte … nun ja, es soll geschrieben werden. Seien wir ehrlich, wie es geschrieben werden soll, verrät schon der Name: Cascading Style Sheets. Also nehme ich das wieder an, weil ich herausgefunden habe, dass ich den ganzen Weg bis hinunter zur Mikrooptimierungsebene gegangen bin. Ich bin den Weg gegangen, den ich viele Leute gesehen habe, die in letzter Zeit hinuntergegangen sind, wo … und ich habe das auch in dem Artikel erwähnt, wo ich sehen kann … es gibt kürzlich einige Beweise dafür. Ich habe gesehen, dass Leute Abstandshalterkomponenten und ähnliches erstellt haben, und ich verstehe dieses Problem, ich war in dieser Situation.
Andy: Die Art und Weise, wie ich es behoben habe, war, anstatt einen Drilldown durchzuführen und zu versuchen, eine Mikrooptimierung vorzunehmen, habe ich tatsächlich angefangen, über die Dinge auf einer kompositorischen Ebene nachzudenken, weil es egal ist, wie klein Ihre Komponenten sind, irgendwann gehen sie Um Seiten zu sein, werden sie Aufrufe sein. Das kannst du nicht vermeiden, so wird es sein. Anstatt also zu sagen: „Richtig, ich brauche diese winzigen kleinen Helfer für dieses Layout“, sagen Sie: „Richtig, ich habe einen Kontaktseitenaufruf oder einen Produktseitenaufruf, und das ist eine skelettartige Layoutkomposition. Darin kann ich dann alle Komponenten einsetzen, die ich will.“ Wir haben jetzt Dinge wie Grid und Flexbox, die das viel einfacher machen, und Sie können im Wesentlichen alles, was Sie wollen, in das Skelettlayout einfügen, es spielt keine Rolle. Dann sollten sich die Komponenten zu diesem Zeitpunkt so verhalten, wie Sie es möchten, mit oder ohne Containerabfragen.
Drew: Dies ist der Kompositionsteil von CUBE, in dem Sie die Dinge eher auf Makroebene betrachten und sich ansehen, wie Komponenten zu einer Ansicht zusammengesetzt werden können, um die Art von Seiten zu erstellen, die Sie für eine Website oder eine App erstellen müssen oder was hast du.
Andy: Es geht also im Wesentlichen darum, Regeln zu erstellen. Es ist wie eine Führung. Es versucht, Richtlinien für etwas zu bekommen. Es ist nicht wie eine strenge Regel, wie, du solltest dies tun, du solltest das tun. Das ist im Wesentlichen das, was Sie mit dem Browser tun, mit dieser Methodik, sagen Sie … Sie zwingen ihn zu nichts. Sie sagen: „Sehen Sie, idealerweise wäre es großartig, wenn Sie es so gestalten könnten, aber ich verstehe, dass das möglicherweise nicht der Fall ist, also sind hier einige Grenzen und einige obere und untere Ebenen, mit denen wir arbeiten können. Tu, was du kannst, und Prost.“ Dann werfen Sie einfach einige Komponenten darauf und lassen es einfach tun, was es tut. Sie fügen dort genug Kontrolle hinzu, damit es nicht Müll aussieht.
Andy: Ein gutes Beispiel wäre … wir machen ein Layout in Every Layout namens Switcher, das im Wesentlichen Elemente bis zu einem bestimmten Punkt einreiht, an dem die Berechnung, die ergibt, wie breit es sein sollte, sie einfach übereinander stapelt . Aber weil wir dem Inline und dem Block Margin hinzufügen, funktioniert es, egal in welchem Zustand es ist, es sieht immer noch gut aus. Das ist die Idee, dass wir dem Browser nicht mitteilen, dass er sagen soll: „Sie müssen dieses dreispaltige Raster überlagern.“ Wir sagen: „Wenn Sie ein dreispaltiges Raster schichten können, tun Sie es. Andernfalls stapeln und platzieren Sie stattdessen einfach.“ Es ist also diese Art von Methodik, den Browser wirklich seine Arbeit machen zu lassen.
Drew: Viele der verschiedenen Ansätze, die sich in den letzten Jahren für CSS entwickelt haben, konzentrierten sich sehr stark auf die Komponentenebene, um mit allem so umzugehen, als wäre es eine Komponente. CUBE spielt diesen Komponentenaspekt nicht so sehr herunter, es gibt nur dieses zusätzliche Konzept, das darüber hinausgeht, diese Komponenten zu nehmen und sie zu größeren Layouts zusammenzustellen, anstatt nur zu sagen, dass das Layout nur eine weitere Komponente ist.
Andy: Ja, das ist ein guter Punkt, ja. Ich denke, was man über Komponenten sagen kann, ist, dass sie wichtig sind, besonders in modernen Front-End-Sachen. Wir machen eine Menge Komponentenkram, Systemkram. Aber so wie ich eine Komponente sehe, ist sie eine Sammlung von Regeln, die das erweitern, was bereits getan wurde.
Andy: Der Punkt, den ich in dem Artikel anspreche, ist, dass, wenn Sie auf die Blockebene kommen, das meiste Ihres Stylings tatsächlich fertig ist, und was Ihre Komponente wirklich tut, ist, die Is zu punktieren und die Ts zu kreuzen, und es sagt: „Richtig, in diesem Zusammenhang …“ Also für eine Karte zum Beispiel, lass das Bild eine Mindesthöhe von X haben und füge hier ein wenig Polsterung hinzu. Tu dies, das und das andere. Setzen Sie hier einen Knopf. Es handelt sich lediglich um zusätzliche Regeln zusätzlich zu dem, was bereits vom Rest des CSS geerbt wurde. Ich denke, das ist wahrscheinlich die beste Art, es zu beschreiben.
Andy: Während bei BEM die Komponente die Quelle der Wahrheit ist. Bis Sie diese Klasse auf das Element übertragen haben, wurde an diesem Punkt nichts angewendet, und diese Methode funktioniert. Ich habe gerade festgestellt, dass ich dadurch mehr CSS geschrieben habe und mehr sich wiederholendes CSS, was ich nicht gerne tue.
Drew: Würden Sie die Typografie und die Farben und die vertikalen Rhythmen, die Abstände und all das als Teil der Kompositionsidee dieses Modells betrachten?
Andi: Ja. In einem globalen CSS, ja, absolut. Vor allem der vertikale Rhythmus und der Flow. Wir haben einen Artikel darüber bei 24 Ways gemacht, nicht wahr, vor ein paar Jahren, die Flow- und Rhythmus-Komponente. Das war auch eine Art Zusammenfassung von diesem Ansatz, bei dem Sie eine Basiskomponente festlegen, die im Wesentlichen den lobotomisierten Eulenselektor verwendet. Ich weiß nicht, wie ich das im Radio beschreiben soll, aber wir werden es tun. Wir werden einfach, denke ich, in die Shownotes über den Heydon-Artikel oder so etwas schreiben. Aber im Wesentlichen wählt es untergeordnete Elemente aus … Entschuldigung, Geschwisterelemente.
Andy: Es heißt also: „Richtig, jedes Element, das auf Element X folgt, hat eine Marge über den CSS-Kosten und dem Eigenschaftswert“, und das Schöne daran ist, dass Sie diesen benutzerdefinierten CSS-Eigenschaftswert auch in einem kompositorischen Kontext festlegen können. Sie können also sagen: „Richtig, wenn in dieser Komponente etwas Strömung unterwegs ist, setzen wir den Strömungsraum tatsächlich auf zwei Rem, weil wir möchten, dass er schön und kräftig ist, der weite Raum.“ Dann könnten Sie in einem anderen sagen: „Eigentlich möchte ich, dass der Durchflussraum ein halbes Rem beträgt, weil ich möchte, dass er eng ist.“ Das passiert alles, die gesamte Kontrolle kommt von einer höheren Ebene, und was Sie dann tun, ist, Sie fügen kontextabhängige Überschreibungen hinzu, anstatt es jedes Mal neu zu erfinden, das Gleiche immer und immer wieder neu zu erfinden.
Drew: Das ist also das C, Komposition. Als nächstes haben wir U, was Utility ist. Was verstehen wir also unter Nützlichkeit?
Andy: Es ist also eine Klasse, die einen Job macht, und sie macht es wirklich gut. Das könnte eine Implementierung eines Design-Tokens sein, das… es ist eine Zusammenfassung von Eigenschaften. Normalerweise sind es Farben oder Typografiestile, Größen und Regeln wie diese. Die Idee ist, dass Sie Hilfsklassen generieren, die diese anwenden. Sie haben also ein Dienstprogramm, das die Hintergrundprimärfarbe, die der Primärfarbe entspricht, und dann die Primärfarbe, die Textfarbe, anwendet. Dann könnten Sie einige Abstands-Tokens für Randpolsterung und all diese Dinge generieren. Sie machen nur einen Job. Sie fügen einfach diese eine Abstandsregel hinzu, diese eine Farbregel, und das war's.
Andy: Aber dann hast du auch noch andere Hilfsmittel. Ein gutes Beispiel ist also ein Wrapper-Dienstprogramm. Was das tun wird, ist, es wird eine maximale Breite auf ein Element setzen und dann wird es einen linken und rechten automatischen Rand setzen, um es in der Mitte des Dings zu platzieren. Es hat also nur einen Job, und es erledigt ihn einfach effizient und gut.
Andy: Sie haben also Ihre globalen Stile, Sie haben viele Ihrer Typografieeinstellungen vorgenommen und einen Großteil Ihrer Bodenfläche. Ihre Komposition gibt dann Kontext und Layout vor. Dann wenden Dienstprogramme Token direkt auf Elemente an, um ihnen das gewünschte Styling zu geben. Wie bei einer Überschrift sagen Sie zum Beispiel: „Ich möchte, dass dies diese Größe hat, und ich möchte, dass es diesen Vorsprung hat, und ich möchte, dass es dieses Maß hat.“ Dann an diesem Punkt … das habe ich über die Blöcke gesagt … dann gehen Sie den Stapel weiter nach unten, und Sie haben an diesem Punkt bereits die meiste Arbeit erledigt.
Andy: Sie geben Ihnen also diese wirklich effiziente Arbeitsweise, und da HTML auch sozusagen die Röhre herunterströmt, ist es wirklich nett, die Arbeitslast auch auf HTML und nicht auf CSS zu abstrahieren, fand ich. Früher bin ich wirklich in Utility-Klassen eingestiegen, wie in diesem alten griesgrämigen Stil von „Oh, Trennung von Anliegen“, aber ich denke eigentlich, dass es eine wirklich anständige Arbeitsweise ist. Ich erwähne in dem Artikel, dass ich eigentlich Tailwind CSS mag. Ich denke, es funktioniert, und ich verwende es sehr gerne für die Produkttypisierung, weil ich wirklich sehr schnell etwas veröffentlichen kann. Aber ich denke, es geht einfach ein bisschen zu weit, sagt Tailwind, während ich es gerne einregne, wenn es über die Anwendung einer einzigen Regel auf eine Klasse hinausgeht. Das ist es also, denke ich. Tust du?
Drew: Also, ja, du sprichst in dem Artikel viel über Design-Token, worüber wir im Smashing Podcast mit Jina Anne damals in Episode drei gesprochen haben, glaube ich. Es hört sich also so an, als ob Design-Token ein wirklich grundlegender Aspekt sind.
Andi: Ja. Oh Gott, ja. Ich erinnere mich so lebhaft daran, als Jina das Lightning Design System-Zeug machte, weil ich damals ein Designsystem oder etwas, das einem Designsystem ähnelte, baute und wir Schwierigkeiten hatten, die Genehmigung der Geschäftsführung dafür zu bekommen. Als das Lightning Design System herauskam, schickte ich ihnen buchstäblich nur einen Link nach dem anderen und sagte: „Das ist es, was wir tun. Wir bauen ein Designsystem. Dafür verwendet Salesforce es derzeit.“ Ich erinnere mich, dass ihre damalige Arbeit mir tatsächlich geholfen hat, Sachen durch die Tür zu bringen.
Andy: Dann ist mir das Design-Token-Zeug immer als eine wirklich gute Möglichkeit geblieben, diese Regeln anzuwenden. Da ich von Beruf Designer bin, kann ich diese Organisation und die Fähigkeit, eine einzige Quelle der Wahrheit zu organisieren und zu erstellen, als wirklich nützlich erachten, denn das ist etwas, was wir im digitalen Design nicht wirklich hatten, insbesondere bei Adobe Ära der Arbeit mit Photoshop und so, hatten wir diesen Luxus einfach nicht. Wir hatten es gedruckt mit dem Pantone Book, aber wir hatten es nicht digital mit zufälligen Hex-Codes im ganzen Laden.
Andy: Es ist einfach großartig. Ich liebe dieses Maß an Kontrolle. Eigentlich denke ich, dass es die Kreativität fördert, weil man nicht mehr über unwichtige Dinge nachdenkt, sondern nur darüber nachdenkt, was man damit macht.
Drew: Spielt die Implementierung dieser Design-Token bei diesem Ansatz eine besondere Rolle? Sind es immer benutzerdefinierte CSS-Eigenschaften?
Andy: Ich denke, das ist ein wirklich wichtiger Punkt bei CUBE. Bei einigen der Antworten, die ich erhalten habe, hatten die Leute ein wenig damit zu kämpfen. Von Technik ist da überhaupt keine Rede. Die einzige konsistente Technologie ist CSS. Sie können es tun, wie Sie wollen. Sie könnten all dies mit den CSS- und JS-Dingen tun, die die Leute jetzt tun, oder Sie könnten es nur mit Vanilla CSS tun. Du könntest es mit Sass machen. Ich mache es mit Sass. Weniger, wenn Sie das immer noch tun. All diese verfügbaren Technologien, Post-CSS, all diese Dinge. Du kannst machen wie du willst, es spielt keine Rolle.
Andy: Die Idee ist, dass es dir gut gehen wird, wenn du solchen Konstrukten folgst. Das ist die Idee dahinter. Es ist sehr locker und nicht streng wie einige der Methoden. Ich habe es besonders bei BEM gesehen, die Leute vertiefen sich so sehr in die Prinzipien von BEM, dass es so ist, als würde man das Problem nicht einmal mehr lösen. Ich denke, man muss flexibel sein. Ich habe es letztes Jahr in diesem Vortrag gesagt. Ich dachte mir: „Wenn du zu fest an deiner Linie festhältst, kannst du dir auf lange Sicht tatsächlich Probleme bereiten, weil du versuchst, einem bestimmten Weg zu folgen, und weißt, dass es nicht mehr funktioniert.“ Sie sollten immer flexibel sein und mit einem System arbeiten, anstatt es auf den Buchstaben abzuarbeiten.
Drew: Also das B, das B ist Block. Sie haben von dieser Idee gesprochen, dass zu dem Zeitpunkt, an dem Sie auf die Blockebene kommen, das meiste alles vorhanden sein sollte und sich das Styling auf Blockebene dann wirklich nur mit den tatsächlichen Details einer bestimmten Komponente befasst. Ist das Konzept eines Blocks im Allgemeinen dem ähnlich, mit dem die Leute vertraut sind?
Andy: Oh, absolut, ja. Stellen Sie sich also Ihre BEM-Komponente vor und nehmen Sie alle visuellen Dinge heraus, und das ist im Wesentlichen der Block. Das war es, was ich zu artikulieren versuchte, als ich anfing, über diese Methodik nachzudenken. Ein Block ist eigentlich ein C, es ist eine Komposition, aber das macht es wirklich schwierig, weil man sich dort auf rekursivem Gebiet bewegt und ich denke, dass die Gehirne der Leute explodieren würden. Aber genau das ist ein Block, es ist eigentlich eine andere kompositorische Ebene, aber eher eine Art strenger Kontext, also wie Ihre Karte, Ihr Knopf, Ihr Karussell, wenn Sie das immer noch gerne tun, und all diese Sachen.
Andy: Es ist wie eine bestimmte Sache, eine Komponente, und dann legst du darin bestimmte Regeln fest, denen sie folgen soll, und ignorierst den Rest wirklich, damit du nicht … Du kannst Tokens in den Blöcken anwenden, und das tue ich immer noch, aber eigentlich ist es mehr Layout-orientiert, ist ein Block, soweit ich damit arbeite, oder zumindest das Token nehmen und es auf eine bestimmte Weise anwenden, wie ein Schaltflächen-Hover-Status, solche Sachen. Also sollte Ihre Blockade wirklich winzig sein, wenn Sie zu ihnen kommen, sie sollten überhaupt nicht viel tun.
Drew: Es könnte also so klein wie ein Hyperlink sein.
Andi: Ja.
Drew: Aber es könnte auch eine zusammengesetzte Sammlung anderer Blöcke sein?
Andi: Ja. Wie so ein Modul. Das könntest du auf jeden Fall. Denn das geht wiederum auf den kompositorischen Aspekt zurück, dass alles, was hineinkommt, keine Rolle spielen sollte. Das gute Beispiel dafür ist wie die Karte. Der Inhalt einer Karte ist also beispielsweise wie eine Überschrift, eine Zusammenfassung und eine Schaltfläche. Sie sollten nicht wirklich genau auf diese drei Elemente abzielen. Sie sollten sagen: „Schauen Sie, alles, was sich zufällig im Inhalt wiederfindet, hat einige Flussregeln und eine Art Kompositionslayoutregeln“, und dann ist es egal, was Sie dort einfügen. Sie könnten entscheiden, dass Sie ein Bild in dieses Inhaltsding einfügen möchten und es sollte einfach funktionieren, es sollte einfach gut aussehen.
Andy: Das ist der springende Punkt bei der Arbeit mit CSS. Es ist eine sehr fehlerverzeihende Art, mit CSS zu arbeiten. Sie machen Ihr Leben viel einfacher, indem Sie weniger starr sind, denn wenn sich etwas versehentlich in etwas wiederfindet, was es tun wird, sieht es nicht schrecklich aus, wie es aussehen könnte, wenn Sie die Dinge genauer ansprechen würden, ist das, was ich habe gefunden.
Drew: Ich brauche definitiv viel Vergebung in Bezug auf mein CSS!
Andy: Das weiß ich!
Drew: Prost! Das ist also das B. Das Letzte ist das E: E ist eine Ausnahme. Wir reden jetzt nicht über Fehlermeldungen, oder?
Andi: Nein, nein. Es ist eine Art-
Drew: Wir sprechen nicht über JavaScript-Ausnahmen.
Andi: Ja, ja. Davon sollte es an dieser Stelle noch nichts geben. Hoffentlich jedenfalls nicht, sonst bist du an diesem Punkt wirklich im Wald: Ich glaube nicht, dass ich dir helfen kann! Die ganze Idee dahinter ist … Sie haben also den Kontext mit Ihrem Block erstellt, und eine Ausnahme ist genau das, es ist wie eine Ausnahme von der Regel: also eine umgedrehte Karte oder es könnte ein Geisterknopf sein. Sie kennen also diese Buttons, die nur einen Rand und einen transparenten Hintergrund haben? Das wäre eine Ausnahme, weil eine Schaltfläche wahrscheinlich eine solide Hintergrundfarbe und dann die Beschriftungsfarbe hat. Es entsteht also eine Art ausgeprägter Variationszustand.
Andy: Der Grund, warum ich das mit Datenattributen anstelle von Klassen mache, und der Grund dafür ist, dass a) ich es schön finde, eine Unterscheidung zu haben. Wenn Sie also viel HTML durchsuchen, können Sie Daten sehen, etwas mit Bindestrichen versehen und denken: „Richtig, okay, an diesem Element hat sich definitiv etwas geändert.“ Die andere Sache ist, dass es sehr schön ist, JavaScript Zugriff auf diesen Zustand zu geben, und umgekehrt auch. Daher wende ich den Status sehr gerne mit Datenattributen in JavaScript an. Ich denke, dafür sind sie im Wesentlichen da, eine Art Kommunikationsschicht. Die Harmonie zwischen ihnen scheint wirklich gut zu funktionieren.
Andy: Ein gutes Beispiel wäre, sagen Sie, Sie haben eine Statusmeldung und dann fügt JavaScript den Datenstatus entweder Erfolg, Fehler oder Information oder so etwas hinzu. Sie können sich dann mit Ihren Ausnahmestilen in CSS daran anschließen. Sie wissen also, dass dies eine Ausnahme der Statuskomponente ist und gegen ihren Standardstatus verstößt. Es ist also einfach eine wirklich praktische Art, mit Dingen zu arbeiten. Es ist auf beiden Seiten vorhersehbar: Es ist auf der CSS-Seite vorhersehbar, und es ist auch auf der JavaScript-Seite vorhersehbar.
Drew: Ich denke, es ist ziemlich nett, dass etwas, das Klassennamen einem nicht geben, eine Eigenschaft und ein Wert ist. Wenn Sie also so etwas wie den Zustand haben möchten, und es kann entweder Erfolg oder Misserfolg oder Warnung oder was auch immer sein, können Sie diese Zustandseigenschaft speziell ansprechen und ihren Wert umdrehen. Während Sie bei einer großen langen Liste von Klassennamen diese beispielsweise in JavaScript manipulieren, müssen Sie sich jeden einzelnen von ihnen ansehen und diese Geschäftslogik hinzufügen, die besagt: „Ich kann nur festlegen eine davon“, und was passiert, wenn zwei dieser Klassen auf dasselbe Element angewendet werden? Das bekommt man nicht mit einem Datenattribut, es hat nur einen Wert.
Andi: Ja. Das ist eine gute Art, das zu sagen, ja. Ich habe festgestellt, dass es sehr hilfreich ist, so zu arbeiten.
Drew: Das ist ziemlich interessant. Ich glaube nicht, dass ich andere Methoden gesehen habe, die diesen Ansatz verfolgen. Ist das völlig einzigartig bei CUBE?
Andy: Das könnte sein. Ich achte nicht wirklich auf andere Dinge, was ich tun sollte. Das macht wohl jemand anders. Ich sage Ihnen jetzt, es war der umstrittenste Aspekt davon. Einige Leute mochten die Idee, Datenattribute zu verwenden, wirklich nicht. Die Sache ist auch, und wie ich darauf antworte, ist, mach was du willst. Wir sagen Ihnen nicht, dass Sie die Dinge auf eine bestimmte Weise tun sollen, es sind nur Vorschläge. Wenn Sie Ausnahmen für CSS-Klassen machen möchten, wie z. B. Modifikatoren, dann schlagen Sie sich selbst um. Die CUBE-Polizei wird nicht an Ihre Tür klopfen. Es ist absolut in Ordnung.
Andy: Das CUBE-Ding ist ein denkendes Ding, es ist eine Struktur. Sie wenden diese Struktur so an, wie Sie sie anwenden möchten, mit welchen Werkzeugen Sie möchten oder welche Technologie Sie möchten. Solange Sie die Dinge konsistent halten, ist das das Wichtigste.
Drew: Es gibt also keinen reinen CUBE?
Andy: Die Art, wie ich es schreibe, ist purer CUBE, Drew. Alle anderen sind nur eine Fälschung, es ist nur eine schwache Imitation.
Drew: Außer dir kann niemand sagen: „Das ist kein Lehrbuch-CUBE.“
Andy: Nein, das ist es. Das kann doch niemand bestreiten, oder? Also, ja, ich werde damit gehen. Gibt dir ein bisschen Schlagkraft oder so, denke ich, so etwas in der Art.
Drew: Kann man einen CUBE-Ansatz mit anderen Methoden kombinieren? Können Sie Bits von BEM verwenden?
Andy: Ja, ich denke schon. Ich habe ein bisschen darüber nachgedacht, weil ich bald mehr Sachen daran machen werde, weil es ziemlich populär geworden ist, also werden die Leute mehr Arbeit wollen. Eine Sache, die ich mir ansehen werde, ist, wie man mit der CUBE-Methodik an etwas Vorhandenes herangeht.
Andy: Es gibt also zwei entgegengesetzte Enden der Skala. Eine gute Frage, die Leute gestellt haben, ist: „Wie funktioniert das mit jedem Layout, den anderen Sachen?“ Ich denke, im Grunde genommen ist jedes Layout das C. Das ist, was jedes Layout ist, es ist die kompositorische Ebene. Dann fragte jemand anderes: „Nun, wie würde das mit so etwas wie Atomic Web Design funktionieren, wie es Brad Frost gemacht hat? Es ist so, als ob man diese Teile aufteilen und auf jeder Ebene anwenden könnte. Atomic Design geht bis ins kleinste Detail. Es abstrahiert das in die Verwendung, richtig, okay, nun, ich kann das mit Hilfsmitteln anwenden, also den Molekülen, denke ich. Ich kann das mit den Dienstprogrammen anwenden, und es übersetzt das, was Sie bereits wissen, in diese etwas andere Arbeitsstruktur.
Andy: Wirklich, es ist eine Umbenennung für viele Dinge. Ich habe hier nichts erfunden, ich habe einfach, wie ich schon sagte, Dinge gestohlen, die mir gefallen. Ich liebe die Art und Weise, wie über einige der Atomic Design-Sachen nachgedacht wird. Das ist wirklich eine kluge Arbeit. Und BEM. Das Zeug, das Harry gemacht hat, das Inverted Triangle CSS, fand ich wirklich cool. Also habe ich einfach Teile, die ich mag, von jedem von ihnen geklaut und sie alle irgendwie zu diesem anderen hybriden Ding zusammengenäht, Ansatz. Weitere kommen, denke ich.
Drew: Kann der CUBE-Ansatz auf bestehende Projekte angewendet werden, in denen CSS bereits vorhanden ist, oder ist es etwas, mit dem Sie wirklich mit einem neuen Projekt beginnen müssen?
Andy: Das kommt sehr darauf an. Wenn Sie also so etwas wie einen Bootstrap-Job haben und es nur Tausende von benutzerdefinierten CSS-Zeilen enthält, an denen ich definitiv schon einmal beteiligt war, dann denke ich, dass Sie vielleicht versuchen, ein Feuer mit einer Flasche Wasser zu löschen Punkt. But if you… say, for instance, if you've got a rough BEM setup and it's gone a bit layer-y, you could use CUBE to refactor and actually pull it back into shape again.
Andy: It depends, the answer to that one. But it's doable, as with everything. If you really want it to work, Drew, you can do it if you want, can't you? The world is our oyster!
Drew: Especially if your BEM site's gone layer-y.
Andy: Yeah. Nothing worse than a layer-y BEM site!
Drew: I've noticed in the examples that you've given… and I've got an eagle eye, I've seen you've been doing this for a while… a lot of your class values in the HTML attribute are wrapped in square brackets.
Andy: Oh, God, yeah. Tell you what, Drew-
Drew: What is that about? Worum geht es?
Andy: I'll tell you what, if there's ever one thing that I've done in my whole career that's just been absolutely outrageously controversial… and you follow me on Twitter, you've seen what comes out of my mouth… it's those bloody brackets! My, God! People either love them or hate them. They're Marmite, they are.
Andy: The reason I do them is a grouping mechanism. So if you look at the way that they're structured, the way I do it is, block at the start and then I'll do a utilities after that. Then what I might do is, in between a block group and a utility group, there might be another block class. So a good example of that would be… we'll go back to the card again. But then say that there's a specific block called a CTA, like a call to action. You might have that applied to the card as well, and then your utilities are enforcing the design attributes, so the colors and all that business. So then you've got three groups of stuff.
Andy: When you come to it, if you've got that order in your head each time, you know, okay, right, this first group's blocks. Oh, that's looks like another block. I've got that one. Then it's like, right, they're definitely utility classes. Then what I might even do is, if there's a lot of design token implementation, have that in a separate group. So it's just very clear what each group is doing, and there's a separation inside of the classes there as well. I've found it really helpful. Some people find it incredibly offensive. It's definitely a do it if you want to do it. Definitely you don't have to do it.
Andy: It's quite funny, when I published that article, so many people finished halfway through to ask me, “What is it with these brackets?” I was like, “Did you finish the article? Because there's a big section at the end where it explains exactly what they're doing,” to the point where I actually had to write a bit in the middle of the article of, “If the brackets are essentially doing your head in, click here and I'll skip you all the way down to that explanation bit so you can just read about them.” It can be quite controversial.
Andy: When I've worked on really, really complex front-ends… and we did a little bit of stuff together, didn't we, last year?
Drew: Ja.
Andy: You've seen the sort of design implementation on that project that we were on. It requires that sort of grouping because there's just so much going on at the time, there's so much different stuff happening. I've just found it really, really useful over the years, and also get lots of questions about it, to the point where I was almost going to write just one page on my website that I could just fire people to to answer the question for them.
Drew: Slash, what's with the brackets?
Andy: Yeah. Slash, brackets. Have you seen that new Hey Email thing that's just come out? They've bought a domain of itsnotatypo.com, just to answer the whole Imbox, like im with an M rather than an in. Basically, I was like, “I think I need to do that,” like, whatswiththebrackets.com, and just do a one-pager about it.
Drew: It strikes me that the approach with brackets actually could be something that might be useful when using things like Tailwind or something that has a lot of classes because that can-
Andy: Yeah. Oh, God, yes.
Drew: You have classes that are addressing your break points and what have you, and then you'll have things that are for layout, things that are for color or type, or what have you. So it might also be a useful way of dealing in situations like that.
Andy: I'd definitely agree with that. A good analogy… not analogy. A good bit of info about Tailwind is that I actually quite like Tailwind. I've used that on very big projects. The one thing that really opened my eyes to Tailwind though was when I saw a junior developer try to work out what was going on, and it was really, really eye-opening because they just didn't have a clue what was happening.
Andy: I think that's one problem I've found with these sort of over-engineered approaches, which I think it's fair to say Tailwind is, is that there's a certain skill level that is required to work with it. I know the industry tends to have an obsession with seniority now, but there's still people that are just getting into the game that we need to accommodate, and I think having stuff that's closer to the language itself is more helpful in those situations because they're probably learning material that is the language as it is. So I think it's just a bit more helpful. Especially having a diverse team of people as well. Just food for thought for everyone.
Drew: People might look at all the different methodologies that are out there and say, “This is evidence that CSS is terrible and broken, that we need… all these problems have to be solved by hacking stuff on top. We need tools to fix bits of CSS. We need strict procedures for how we implement it, just to get it to work.” Should the platform be adapting itself? Do we need new bits of CSS to try and solve these problems or are we all right just hacking around and making up funny acronyms?
Andy: I think the power of CSS, I think, is its flexibility. So if you're going to program CSS, a lot of the knowledge is less of the syntax and more of the workings of a browser and how it works. I think that might be a suggestion, that the problem is that people might not have learnt CSS quite as thoroughly as they thought they might have learnt it, who created these problems. I've seen that in evidence myself. I spotted a spacing mechanism that had been invested, which was very complicated, and I thought, “This person has not learnt what padding is because padding would actually fix this problem for them, understanding how padding works and the box model.” That's not to be snidey about it.
Andy: We work in an industry now that moves at an even faster pace than it has done previously and I think there's a lot less time for people to learn things in detail. But, on that front, I think CSS still does have work to do in terms of the working group, who I think do a bloody good job. A great, shining example of their work was the Grid spec which was just phenomenal. The way that rolled out in pretty much every browser on day one, I thought that was so good.
Andy: But we've got more work to do, I think, and I think maybe the pace might need to increase a little, especially with stuff like container queries, we all love talking about them. Stuff like that I think would help to put CSS in a different light with people, I think. But I think CSS is brilliant, I love it. I've never had a problem with it in lots of years really. I do find some of the solutions a bit odd, but there you go.
Drew: What's the response been like to CUBE since you published the article?
Andy: Mind-blowing. I honestly published it as just supporting material, and that's all I expected it to be, and it's just blown up all over the place. A lot of people have been reading it, asking about it, been really interested about it. There's definitely more to come on it.
Andy: I did say in the article, I said, “Look, if people are actually quite interested in this, I'll expand on this post and actually make some documentation.” I've got bits of documentation dotted around all over the place, but to sort of centralize that, and then I was thinking of doing some workshops and stuff. So there's stuff to go. It's how Every Layout started as well. We both had these scattered ideas about layout and then we sort of merged them together. So something like that, I suppose, will come in the future.
Drew: Are there any downsides that you're aware of to using CUBE? Are there problems that it doesn't attempt to solve?
Andy: Yeah. This accent, Drew, it just won't go way, no matter what I do! In all seriousness, I think CUBE's got as close as I can get to being happy with the front-end, which is saying a lot, I think. You never know, things might change again. This has evolved over more recent years. Give it another five years, I'll probably be struggling with this and trying something else. I think that's the key point, is to just keep working on yourself and working on what you know and how you approach things.
Andy: This definitely won't work for everyone as well, I know that for a fact. I know that from my comments. I don't expect it to work for everyone. I don't expect anything to work for everyone. It's the same with JavaScript stuff: some people like the reactive stuff and some people don't. It is what it is. We're all people at the end of the day, we all have different tastes. It's all about communicating with your teammates at the end of the day, that's the important thing.
Drew: I know you as a very talented designer and developer and you, like many of us, you're just working on real projects all day, every day. But you've recently started publishing on this site, Piccalilli, which is where the CUBE CSS introduction article was. So Piccalilli is kind of a new venture for you, isn't it? What's it all about?
Andy: Very kind of you to say, Drew. You've actually worked with me, so that's high praise. But the Piccalilli thing is an evolution. So I'm a freelancer. I do client work, but I think this has become apparent with the pandemic, that that is not the most sustainable thing in the world in some industries. I think freelancing can be very, very tough, as a developer and designer. It's something that I've been doing it for so long now, 10 years… well, 12 years now actually.
Andy: Ich wollte etwas anderes machen und das Wissen, das ich habe, anwenden und es tatsächlich mit den Leuten teilen. Ich war immer sehr offen und teilte, und das wollte ich formalisieren. Also habe ich Piccalilli erstellt, um Tutorials zu schreiben, aber hauptsächlich für Kurse, die ich produziere: das sind hauptsächlich Fleisch und Kartoffeln. Und dann ist da noch der Newsletter, der … die Leute genießen den Newsletter wirklich, weil ich jede Woche coole Dinge teile, die ich im Internet gefunden habe. Das ist das Rückgrat davon. Es läuft einfach richtig gut. Das ist im Wesentlichen der Punkt, an dem ich sehen möchte, dass ich im Laufe der Jahre mehr und mehr Vollzeit arbeite, denke ich.
Drew: Was kommt als nächstes für Piccalilli? Hast du irgendetwas, das du herausgebracht hast?
Andy: Danke für die offene Tür, Drew! Wenn diese Aufzeichnung veröffentlicht wird, wird der erste Kurs live sein: Learn Eleventy From Scratch, und dort lernen wir, wie man eine Gatsby-Website erstellt! Nein, Sie lernen, wie man eine Eleventy-Site erstellt. Sie beginnen also mit einem völlig leeren Verzeichnis, da ist nichts drin, es ist leer, und am Ende steht diese wirklich gut aussehende Agenturseite. Wir lernen darin allerhand. Mit Eleventy lernst du, wie man richtig durchstartet. Wir ziehen entfernte Daten von Orten ein. Wir verwenden CUBE CSS, um ein wirklich schönes Frontend dafür zu bauen.
Andy: Wenn Sie in den Jamstack einsteigen wollen und sich mit statischen Website-Generatoren befassen möchten oder einfach nur wissen möchten, wie man eine schöne Website erstellt, ist dies hoffentlich ein wirklich praktischer Kurs dafür. Es wird derzeit innerhalb eines Zentimeters seines Lebens bearbeitet, während wir sprechen. Es wird cool, hoffe ich, und nützlich. Aber das ist eine Ansammlung von vielen Dingen, die ich in den letzten Jahren gemacht habe. Es sollte also Spaß machen.
Andy: Also kauf es, und ich mache einen Rabattcode, mach wie Smashingpod für 40 % Rabatt, und du kannst es bekommen, wenn es herauskommt.
Drew: Erstaunlich. Wir verlinken das. Haben Sie schon herausgefunden, wie man Piccalilli zuverlässig buchstabiert?
Andy: Ich war mit Chris und Dave in der ShopTalk Show und sagte dort: „Wenn es jemals etwas gibt, wofür Sie mich engagieren wollen, dann ist es, Piccalilli beim ersten Mal von Hand zu schreiben, ohne überhaupt darüber nachzudenken“, denn das habe ich habe dieses Wort so oft geschrieben, dass ich genau weiß, wie man es auswendig buchstabiert. Die Antwort auf Ihre Frage ist also ja.
Drew: Nun, ich kämpfe immer noch, so viel kann ich dir sagen!
Andy: Es ist schwer. Oh Gott. Ich kann voll und ganz mitfühlen. Ich habe lange gebraucht, um zu lernen, wie man es schreibt, aber es ist eines dieser Wörter in unserem Wortschatz. Dieses Jahr versuche ich, das Notwendige zu buchstabieren, ohne einen Rechtschreibfehler zu machen!
Drew: Ich habe also alles über CUBE CSS gelernt. Was hast du in letzter Zeit gelernt, Andy?
Andi: Weißt du was? Das wird Sie überraschen, Drew. MySQL ist das, was ich kürzlich gelernt habe. Piccalilli ist also im Grunde genommen ein kompletter Selbstverlag. Es ist eine Eleventy-Site, aber dahinter steckt eine API, und dahinter steckt eine MySQL-Datenbank. Das Zeug, das Leuten Inhalte liefert, die sie gekauft haben, erfordert einige ziemlich heftige Abfragen. Also habe ich gerade richtig in etwas MySQL investiert … insbesondere in den Unterschied zwischen Joins, von dem ich nicht wirklich wusste, dass es einen Unterschied zwischen den einzelnen Join-Typen gibt. Das war wirklich nützlich und führte zu einigen ziemlich schnellen Interaktionen mit der Datenbank.
Andy: Ich habe dieses Ding namens Front-End Challenges Club betrieben, und als ich es zum ersten Mal gestartet habe, ist es einfach zusammengebrochen und von selbst gestorben, weil MySQL, gelinde gesagt, schlampig war. Also habe ich wirklich gelernt, wie man das macht, weil ich überhaupt keine Backend-Person bin, ich bin ein Pixel-Pusher. Es liegt also definitiv nicht in meiner Zuständigkeit. Das ist eher dein Hals des Waldes, nicht wahr? Ich finde es echt cool, MySQL. Ich schreibe es eigentlich sehr gerne. Es ist eine wirklich schöne Lehrsprache, nicht wahr?
Drew: Es ist großartig. Ich habe SQL in der Schule gelernt.
Andi: Wow!
Drew: Wir reden jetzt wie vor 20 Jahren.
Andy: Hatten sie damals Computer?
Drew: Das haben sie, ja. Wir mussten Wind-
Andy: Musstest du es von Hand schreiben?
Drew: Wir mussten sie aufziehen! Wir machten. Aber ich sage Ihnen, für einen Entwickler ist es wie das Einmaleins lernen: eines dieser Dinge, die wie eine kleine Pflicht erscheinen, aber sobald Sie fließend sprechen, wird es einfach immer wieder nützlich.
Andi: Ja. Sicher. Es gibt auch wirklich spürbare Unterschiede. Sie sehen wirklich den Unterschied in der Geschwindigkeit. Ich arbeite sehr gerne mit Node, weil das wirklich schnell ist, aber Node und MySQL sind einfach … keine sehr häufige Wahl, aber ich denke, es ist eine ziemlich gute Wahl. Ich denke, es funktioniert wirklich, wirklich gut. Also ich bin damit zufrieden. Wie Sie wissen, schreibe ich nicht gerne PHP. Das wird also nie eine Option sein.
Drew: Wenn Sie, lieber Zuhörer, mehr von Andy hören möchten, können Sie ihm auf Twitter folgen, wo er bei Hankchizljaw ist. Sie finden Piccalilli auf piccalil.li, wo Sie auch den Artikel finden, der CUBE CSS beschreibt, und wir werden natürlich auch Links zu all diesen in den Shownotes hinzufügen.
Drew: Danke, dass du heute dabei bist, Andy. Gab es Abschiedsworte?
Andy: Bleiben Sie gesund und tragen Sie Ihre Maske.