The Thirteenth Fourth

Nun, mein Junge, wie schön. Der 13. Geburtstag von CSS-Tricks ist da. Ein richtiges Teenageralter jetzt, was meinen Sie? Ich nutze diese Gelegenheit immer gerne, um eine Art "State of the Union"-Ansprache zu halten, also legen wir los!

Design

Technisch gesehen sind wir immer noch bei v17 des Website-Designs. Dies war das erste Design, für das ich erstklassige Hilfe engagiert habe, und ich liebe es immer noch, daher hatte ich nicht viel den Drang, massive Änderungen daran vorzunehmen. Obwohl es heute ganz anders¹ ist als am Tag der Veröffentlichung.

Zum Beispiel…

• Die Suchfunktion ist komplett anders, da sie jetzt von Jetpack's Instant Search angetrieben wird.
• Die Almanac-Seiten (z.B. background-blend-mode) haben eine zusätzliche Seitenleiste, die Ihnen hilft, zwischen den Seiten zu navigieren
• Ich habe die Typografie neu gestaltet mit Hoefler&Co. Sentinel und Ringside. Die Monospace-Schrift für Code-Schnipsel ist in Operator Mono und das Logo ist seit langem Gotham Rounded, so dass es sich wie eine große, glückliche Familie von Schriftarten anfühlt.

Vielleicht machen wir nächstes Jahr wieder etwas anderes. Meine Liste wächst langsam für einige technische Dinge hinter den Kulissen, die ich überarbeiten möchte, und manchmal geht das Hand in Hand mit Redesign-Arbeiten.

Geschlossene Foren

Die Foren auf dieser Seite waren buchstäblich jahrelang eine mentale Belastung für mich. Anfang des Jahres habe ich sie endlich abgeschaltet. Sie sind immer noch da und werden es wahrscheinlich auch immer sein (daher bleiben die URLs erhalten), aber niemand kann neue Threads oder Antworten posten.

Es war ein schmerzhafter Schritt. Selbst als ich es tat, gab es dort noch etwas regelmäßige tägliche Aktivität, und ich bin sicher, dass es sich für diese Leute nicht gut anfühlte, einen Ort, in den sie Zeit investiert hatten, schließen zu sehen. Hier ist, warum ich es getan habe

• Niemand hier, einschließlich mir, hat die Foren regelmäßig überprüft. Unmoderierte öffentliche Foren im Internet sind für mich nicht akzeptabel.
• Das Spam-Aufkommen stieg. Es gab Perioden, in denen die meisten Beiträge, selbst nach der automatischen Spam-Blockierung durch Akismet, Spam waren, der manuell entfernt werden musste. Selbst wenn wir einen engagierten Foren-Mitarbeiter hätten, wäre das kein Spaß, und da wir keinen hatten, war es nur eine zufällige Aufgabe für mich, und ich brauche keine solche Zeitfalle.
• Die Foren stellen eine gewisse technische Schuld dar. Sie müssen aktualisiert werden. Ihr Design muss im Kontext dieser Seite funktional sein. Irgendwann habe ich alle benutzerdefinierten Stile entfernt und es beim Standardthema belassen, was ein guter Schritt zur Reduzierung technischer Schuld war, aber am Ende reichte es nicht aus.

Ich kann natürlich etwas Arbeit und etwas technische Schuld bewältigen. Aber wenn man diese Dinge mit der Tatsache kombiniert, dass die Foren nicht viel zu dem beitragen, was ich als Erfolg der Seite betrachte. Sie treiben keine Seitenaufrufe oder Werbenachfrage an. Es gibt kein wirkliches Geld, um speziell für die Foren Hilfe einzustellen. Aber das ist nur ein kleiner Teil. Ich möchte, dass diese Seite Menschen hilft. Ich glaube, wir können das am besten tun, wenn wir uns auf das Publizieren mit so wenig geteilter Aufmerksamkeit wie möglich konzentrieren. Ich glaube, es gibt Orte im Internet, die besser für Forum-ähnliche Diskurse geeignet sind.

Jetzt, da sie seit einigen Monaten offline sind, kann ich berichten, dass die Befreiung von der mentalen Last für mich sehr gut ist und es nur wenige oder gar keine größeren Nachteile gab.

Soziales

Hier ist ein weiteres mentales Gewicht, das ich losgeworden bin: Ich habe aufgehört, den Twitter-Account (@css) manuell zu verwalten. Ich denke immer noch, dass es gut ist, dass wir einen Twitter-Account haben (und dass wir diesen coolen Handle haben), aber ich verbringe keine Zeit mehr direkt damit, wie früher.

Früher habe ich spezielle Artikel mit Kommentaren und Grafiken und so weiter in die Warteschlange gestellt und sichergestellt, dass die Tage mit einer Auswahl dessen gefüllt waren, was ich für interessante Tweets über Webdesign und -entwicklung hielt. Das ist alles schön und gut, aber es begann sich wie ein Job ohne Bezahlung anzufühlen.

Wir erhalten nicht (oder scheinen nicht zu treiben) viel Traffic von Twitter. Google Analytics weist Social-Media-Konten weniger als 1% unseres Traffics zu. Zeit in das "Wachstum" von Twitter zu investieren, hat für mich keinen ausreichenden Nutzen. Ganz zu schweigen vom Offensichtlichen: Twitter kann furchtbar toxisch und mental belastend sein.

Also, jetzt werden alle unsere Tweets über die Jetpack-Social-Media-Verbindung automatisiert (wir nutzen Jetpack wirklich für unzählige Dinge). Wir klicken auf der Website auf Veröffentlichen und der Artikel wird automatisch getwittert. Wenn Sie Twitter also wie einen RSS-Feed nutzen (zeigen Sie mir nur die Nachrichten!), dann haben Sie es.

Das Ergebnis? Unsere Follower-Zahl steigt im gleichen Tempo wie immer. Das Engagement dort ist gleich oder höher als je zuvor. Was für eine Erleichterung. Zehnmal weniger Arbeit für den gleichen Nutzen.

Wenn ich den Drang verspüre, einen Link mit Kommentaren zu teilen, verwende ich dasselbe System, das wir hier schon immer hatten: Ich schreibe ihn stattdessen als Link-Blogbeitrag. Jetzt erhalten wir noch mehr Nutzen: Langfristiger Content-Aufbau, was gut für die Sache ist, die wir tatsächlich auf unserer Seite haben: SEO.

Irgendwann könnten wir die Dinge verbessern, indem wir den automatischen Tweet-Text mit etwas mehr Lebensfreude von Hand schreiben, den Autor klarer würdigen und als #stretchgoal eine benutzerdefinierte oder schick generierte Social-Media-Grafik erstellen.

Ermöglichte Design-Möglichkeiten

Ein Aspekt dieser Seite, mit dem ich zufrieden bin, ist die Möglichkeit, benutzerdefinierte Designs für Inhalte zu erstellen. Hier sind einige Beispiele für diese Infrastruktur.

Bei jedem Blogbeitrag können wir eine Vorlage auswählen. Einige dieser Vorlagen sind sehr spezifisch. Zum Beispiel ist mein Essay The Great Divide eine Vorlage für sich.

Im Code-Basisbereich habe ich eine PHP-Vorlage und eine CSS-Datei, die ausschließlich diesem Beitrag gewidmet sind. Ich denke, das ist eine gute Möglichkeit, einen Beitrag zu behandeln, dem man zusätzliche Aufmerksamkeit schenken möchte, obwohl die Existenz dieser beiden Dateien eine gewisse technische Schuld darstellt.

Ich habe bei der Erstellung dieses besonderen Essays etwas gelernt: Was ich wirklich brauche, um die künstlerische Leitung/Design-Möglichkeit eines Beitrags zu erweitern, ist eine einfache, reduzierte Vorlage zum Starten. Deshalb nennen wir sie jetzt "Fancy Post", eine weitere Vorlagenauswahl für jeden einzelnen Beitrag. Fancy Posts haben ein Hero-Bild und eine zentrierte Spalte für den Inhalt des Beitrags. Von dort aus können wir benutzerdefiniertes CSS verwenden, um Dinge direkt in WordPress zu gestalten.

Zum Beispiel ist mein aktueller Beitrag über DX als Fancy Post mit Custom CSS gestaltet, das direkt im Block-Editor angewendet wird.

Der Block-Editor selbst ist ein riesiger Deal für uns. Das war eines meiner Ziele für das Jahr, und wir haben wirklich weit darüber hinausgehende Fortschritte gemacht. Ich denke, das Schreiben und Bearbeiten von Beiträgen im Block-Editor ist eine Million Mal besser als der alte Editor.

Die größte Herausforderung war (und ist es immer noch), die Block-Transformationen für Legacy-Inhalte einzurichten. Aber sobald man die Möglichkeit hat, Blöcke zu erstellen und anzupassen, eröffnet das allein eine Menge Design-Möglichkeiten innerhalb von Beiträgen, die sonst zu schmerzhaft und zu technisch belastet wären.

Eine weitere Tür, die wir für Design-Möglichkeiten geöffnet haben, ist eine klassische: die Nutzung von Kategorien. Eine Art Gratisgeschenk, das man in WordPress erhält, ist die Möglichkeit, Vorlagen für alle möglichen Dinge zu erstellen, die automatisch funktionieren, wenn sie richtig benannt sind. Zum Beispiel habe ich eine Datei namens category-2019-end-of-year-thoughts.php, und das gibt mir die volle Kontrolle über die Erstellung von Landing Pages für Gruppen von Beiträgen, wie unsere Homepage für die Gedanken zum Jahresende. Ganz zu schweigen von unseren "Guide Collection"-Seiten, die eine weitere Möglichkeit sind, Sammlungen von Seiten programmgesteuert zu erstellen.

Das sind viele Werkzeuge für benutzerdefinierte Arbeiten, und ich bin damit wirklich zufrieden. Es fühlt sich an, als hätten wir uns viel Potenzial mit diesen Werkzeugen gegeben und erst angefangen, es zu nutzen.

Apropos, ein weiterer Aspekt des benutzerdefinierten Designs, den wir zur Verfügung haben, ist das neue Buch-Format...

eCommerce

Wir nutzen WooCommerce hier auf der Seite wieder. Ich habe gerade die Lobreden auf den Block-Editor gehalten und wie nützlich dieser war... WooCommerce ist im selben Boot. Ich habe das Gefühl, dass ich all diese leistungsstarke Funktionalität mit sehr geringem Aufwand, zu geringen Kosten und mit wenig technischer Schuld erhalte. Es macht mich sehr glücklich, diese Seite auf WordPress zu haben und so viel von der Funktionalitätssuite zu nutzen, die sie bietet.

Zum einen kann ich damit Produkte verkaufen, und wir haben jetzt Produkte! Lynn Fisher hat ein Poster für unseren CSS Flexbox Guide und ein Poster für unseren CSS Grid Guide entworfen, die Sie jetzt für jeweils 25 $ überall auf der Welt kaufen und versenden lassen können. Schauen Sie, mit dem Block-Editor kann ich hier in diesem Beitrag einen Block für ein Poster einfügen

Ein weiteres Produkt, für das wir WooCommerce nutzen, ist der Verkauf unseres neuen Buches, The Greatest CSS Tricks Vol. I. Wenn wir es tatsächlich in ein richtiges eBook-Format umwandeln würden, könnte WooCommerce diese Dateien absolut digital an Sie liefern, aber das haben wir noch nicht getan. Wir sind einen anderen Weg gegangen, nämlich die Veröffentlichung des Buches als Kapitel hier auf der Seite hinter einer Paywall für Mitglieder, die wir MVP-Unterstützer nennen. Das Buch ist nur einer der Vorteile davon.

WooCommerce hilft

• Ein Mitgliedschaftssystem aufbauen und Mitgliedschaften verkaufen. Mitgliedschaften können bestimmte Seiten nur für Mitglieder sperren, und es gibt programmatische Hooks, die ich für Dinge wie das Entfernen von Anzeigen verwenden kann.
• Abonnements für diese Mitgliedschaften verkaufen, mit wiederkehrender Abrechnung.
• Einmalige Produkte verkaufen

Und ich kratze natürlich nur an der Oberfläche. WooCommerce kann alles im Bereich eCommerce.

Analytik

Sie sind in Ordnung. Ha! So viel Sorge bereiten mir unsere allgemeinen Website-Analysen. Ich schaue gerne ab und zu darauf, um sicherzustellen, dass wir nicht abstürzen oder etwas Beängstigendes tun, aber das tun wir nie (klopf auf Holz). Wir sind in der Nähe von 8 Millionen Seitenaufrufen pro Monat, und der Traffic im Jahresvergleich ist ein bisschen ein Tanz.

Sponsoren

DANKE DANKE DANKE

Das ist, was ich all unseren Sponsoren zu sagen habe. Wir haben unglaubliches Glück, mit einer Reihe von Sponsoren zusammenzuarbeiten, die ich von ganzem Herzen empfehle und deren Produkte ich buchstäblich nutze. Wir haben ständig wechselnde Sponsoren, aber dies sind die größten und diejenigen, die uns am längsten unterstützen.

• Automattic: Danke für die Entwicklung großartiger Software für das WordPress-Ökosystem. Diese Seite wird durch eine gehörige Portion dieser Software ermöglicht.
• Netlify: Danke, dass Sie die Jamstack-Welt zum Leben erwecken. Ich bin auch ein großer Fan dieser Art der Website-Erstellung und denke, dass Jamstack die Grundlage für die meisten Websites sein sollte. Darüber hinaus haben Sie das moderne Entwicklererlebnis neu definiert.
• Flywheel: Vielen Dank für das Hosting dieser Website, für einen qualitativ hochwertigen Host, dem ich vertrauen kann und der mir unzählige Male geholfen hat. So sieht hochwertiges WordPress-Hosting aus.
• Frontend Masters: Vielen Dank, dass Sie ein Bildungspartner sind, der die Dinge richtig macht und mir hilft, die bestmögliche Antwort für Leute zu geben, wenn sie eine strukturiertere formale Ausbildung im Webdesign suchen: probieren Sie Frontend Masters aus.

Wenn Sie versuchen, Front-End-Entwickler mit Ihren Produkten zu erreichen, ist das buchstäblich meine Lebensgrundlage und ich kann helfen.

Meine anderen Projekte

Auch CodePen ist keine junge Erfindung mehr, es ist selbst über 8 Jahre alt. Ich wiederhole mich oft, wenn ich über CodePen spreche: Wir haben eine Menge Ideen, eine Menge Arbeit zu tun, und wir können es kaum erwarten, Ihnen das CodePen von morgen zu zeigen. 2020 war für CodePen ganz anders als die letzten 2-3 Jahre von CodePen. Einige technische Entscheidungen, die wir getroffen haben, beginnen sich auszuzahlen. Das Team harmoniert sehr gut und erledigt die Arbeit absolut schneller, als ich es mir vor ein paar Jahren hätte vorstellen können, und wir haben noch nicht einmal einige der größten Türen geöffnet. Ich weiß, das ist vage, aber wir sprechen detaillierter über Dinge im CodePen Radio.

ShopTalk läuft wie immer bestens. Das sind diese Woche 420 Episoden, Freunde. Dave hat mich davon überzeugt, dass unser Format so, wie es ist, gut ist. Wir sind kein Handbuch. Man hört sich keine bestimmte Episode an, weil wir Ihnen ein bestimmtes Thema beibringen werden, das wir explizit aufgeführt haben. Es ist eher wie Plauderei am Wasserkühler zwischen realen Entwicklern, die völlig unterschiedliche Dinge unter völlig unterschiedlichen Bedingungen entwickeln, sich aber mehr einig als uneinig sind. Wir werden die ShopTalk-Show vielleicht im Laufe der Zeit weiterentwickeln, aber dieses Format wird weiterleben, weil die Diskussion in diesem Format Wert hat.

Leben

Meine Frau Miranda und ich sind immer noch in Bend, Oregon, und unsere Tochter Ruby ist zweieinhalb Jahre alt. Sie macht gerade Mittagsschlaf und ich schaue auf den Monitor, während ich tippe.

Wir haben das Virus hier wie überall sonst auch. Es ist traurig zu denken, dass wir schon so weit sind und unser örtliches Krankenhaus die Leute bittet, dieses Feiertagswochenende vorsichtig zu sein, weil sie fast voll belegt sind und nicht mehr viel aufnehmen können. Hoffen wir, dass wir diese schmerzhafte Zeit hinter uns lassen können. Bleiben Sie sicher und cool, Freunde, danke fürs Lesen.

---