Danke (2022 Edition)

Sie wissen ja, dies ist die Zeit im Jahr, in der Chris normalerweise eine große Rückschau auf das vergangene Jahr veröffentlicht. Die erste wurde 2007 veröffentlicht, im selben Jahr, in dem CSS-Tricks begann, und sie lief bis 2021 ohne Unterbrechung. Da ich all die Jahre selbst CSS-Tricks-Leser war, würde ich es hassen, wenn sich das ändern würde.

Also, hier sind wir! 2022 war in Bezug auf den Wandel ein verdammt gutes Jahr. Zu dieser Zeit im letzten Jahr blickten wir auf einige Ziele für das kommende Jahr (auf die wir noch eingehen werden), und am Ende schlossen wir uns DigitalOcean an. Das war ein massiver Umbruch (Wortspiel beabsichtigt), und doch sind Sie uns die ganze Zeit treu geblieben. Es bedeutet mir wirklich viel, dass so viele von Ihnen hierher kommen, um die Dinge zu lesen, die ich und eine Menge anderer Gastautoren hier veröffentlichen. Ohne Sie ist es keine Gemeinschaft (und macht keinen Spaß).

Danke!

Dies ist der letzte Beitrag, den wir dieses Jahr veröffentlichen, da wir für die Feiertage unser „Im Urlaub“-Schild aufhängen. Wir sind am **9. Januar** mit einer Flut von brandneuen Inhalten zurück.

Okay, hier beginnen wir, uns die Analysen der Website anzusehen. Das ist etwas, worüber wir schon immer transparent waren und es auch weiterhin sein werden. Es ist nicht so, dass unsere Zahlen in einer Art Sperrzone verborgen sind, und die Hoffnung ist, dass das Teilen sie Ihnen und Ihrem Unternehmen irgendwie hilft.

Gesamtverkehr

Insgesamt verzeichnet Google Analytics insgesamt **64 Mio.** Seitenaufrufe für das gesamte Jahr. Das ist *verdammt* weniger als die 88 Mio. des letzten Jahres, was auf den ersten Blick alarmierend ist. Ich meine, wer möchte einen **27%** Rückgang des Verkehrs im Vergleich zum Vorjahr sehen?

Aber dafür gibt es einen guten Grund, denn wir haben dieses Jahr *verdammt* weniger Inhalte veröffentlicht. Wir alle wissen, dass Chris ein produktiver Autor war (und immer noch ist, natürlich), der oft mehrere Beiträge pro Tag veröffentlichte. Es ist irgendwie so, als hätten wir für den Großteil des Jahres unseren produktivsten Beitragenden verloren. Vergleichen wir die Veröffentlichungsaktivität der letzten Jahre

• 2020: 1.183 Artikel
• 2021: 890 Artikel
• 2022: 390 Artikel

Ein Rückgang der Seitenaufrufe um 27 % ist angesichts der Tatsache, dass wir **43 %** weniger Artikel veröffentlicht haben als im letzten Jahr und satte **67 %** weniger als die Gesamtzahl von 2020, deutlich weniger besorgniserregend.

Hmm, ich habe nicht das Gefühl, dass ich 67 % weniger arbeite...

Und das alles unter dem Vorbehalt, dass dies nur das ist, was wir von Google Analytics erhalten. In den vergangenen Jahren hat Chris diese Zahlen mit Statistiken von Cloudflare (der CDN-Schicht, die über der Website liegt) und Jetpack (dem Plugin, das unsere selbst gehostete WordPress-Site mit den SaaS-Funktionen von WordPress.com verbindet) verglichen. Die Ergebnisse waren immer konsistent inkonsistent, sodass ich mir dieses Mal gar keine Mühe mache, nachzusehen. (Na gut, na gut, vielleicht doch nur Jetpack... das 59,9 Mio. Seitenaufrufe anzeigt – seltsamerweise mehr als die 55 Mio. Gesamtaufrufe von 2021.)

Artikel, nach Zahlen

Darauf freue ich mich jedes Jahr! Hier sind die Top-Ten-Artikel von 2022, die *2022 veröffentlicht wurden*

1. 6 kreative Ideen für CSS-Link-Hover-Effekte – Harshil Patel
2. Erklären Sie mir die ersten 10 Zeilen des Twitter-Quellcodes – Anand Chowdhary
3. Was waren die heißesten Front-End-Tools im Jahr 2021? – Louis Lazaris
4. Ersetzen Sie JavaScript-Dialoge durch das neue HTML-Dialog-Element – Mads Stoumann
5. Begrüßen Sie selectmenu, ein vollständig gestaltbares select-Element – Patrick Brosset
6. Senden Sie zuverlässig eine HTTP-Anfrage, wenn ein Benutzer eine Seite verlässt – Alex MacArthur
7. grid-template-columns – Mojtaba Seyedi
8. Ein vollständiger Leitfaden zu CSS-Cascade-Layern – Miriam Suzanne
9. CSS-Datenbankabfragen? Klar können wir das! – Chris Coyier
10. CSS-Tricks schließt sich DigitalOcean an! – Chris Coyier

Ich bin eigentlich überrascht, dass der letzte nicht höher auf der Liste stand. Und ich bin wirklich begeistert, einen aus dem Almanac dort zu sehen, besonders weil Mojtaba an allen CSS Grid-Eigenschaften im vergangenen anderthalb Jahren gearbeitet hat und er sie auf ganzer Linie übertroffen hat. Ich dachte, ich hätte Grid gut im Griff, bis ich all die Goldnuggets las, die er in jede Eigenschaft packte. Es gibt so viel zu lernen und Mojtaba hat eine Gabe dafür, komplizierte Dinge klar zu erklären. Ich hoffe, den CSS Grid-Leitfaden mit all diesen neuen Informationen zu aktualisieren (aber dazu später mehr).

Ich liebe es auch, den CSS Cascade Layers Guide dort zu sehen! Ich hatte so viel Spaß, mit Miriam daran zu arbeiten. Wenn Sie es nicht wussten, sie ist Redakteurin der Spezifikation. Es ist ein Vergnügen (und wirklich eine Ehre), ihre Arbeit hier zu hosten und sie uns allen zum Lesezeichen machen und nachschlagen zur Verfügung zu stellen.

Hier sind die Top 11-20 zum Spaß

11. Animation mit einfachem JavaScript – Md Shuvo
12. Flutter für Front-End-Webentwickler – Obumuneme Nwabude
13. CSS Grid und benutzerdefinierte Formen, Teil 1 – Temani Afif
14. Schreiben Sie HTML auf die HTML-Art (nicht auf die XHTML-Art) – Jens Oliver Meiert
15. Eine Schnelltour durch 4 neue CSS-Farbfeatures – Chris Coyier
16. Coole Hover-Effekte, die Hintergrundeigenschaften verwenden – Temani Afif
17. Lassen Sie uns eine winzige Programmiersprache erstellen – Md Shuvo
18. Coole CSS-Hover-Effekte mit Hintergrund-Clipping, Masken und 3D – Temani Afif
19. Ein perfektes Inhaltsverzeichnis mit HTML + CSS – Nicholas C. Zakas
20. CSS-basiertes Fingerprinting – Chris Coyier

Alle im Jahr 2022 veröffentlichten Beiträge machen **4,8 Mio.** Seitenaufrufe aus, oder etwa **7,8 %** aller Seitenaufrufe. Unser meistbesuchter Artikel ist immer der ol’ Flexbox-Leitfaden, der dieses Jahr **5,8 Mio.** Aufrufe verzeichnete. Ich würde mir wünschen, dass unsere neuen Inhalte diesen Artikel übertreffen, und ich glaube, das wäre leicht passiert, wenn wir das Veröffentlichungstempo beibehalten hätten. Ungefähre Schätzung: Wir hätten vielleicht bei 67 Mio. Seitenaufrufen gelegen, wenn wir 540 weitere Artikel veröffentlicht hätten, um die Anzahl der im letzten Jahr veröffentlichten Artikel zu erreichen.

Wenn wir ein paar Schritte zurücktreten, können wir die meistbesuchten Artikel des vergangenen Jahres sehen, unabhängig davon, wann sie veröffentlicht wurden

1. Ein vollständiger Leitfaden zu Flexbox
2. Ein vollständiger Leitfaden zu Grid
3. Perfektes Vollbild-Hintergrundbild
4. Die Formen von CSS
5. Media Queries für Standardgeräte
6. SVG verwenden
7. How to Scale SVG
8. CSS-Dreieck
9. Gradientenränder in CSS
10. Zeichenkette mit Auslassungspunkten kürzen
11. So verwenden Sie @font-face in CSS

Ja, fast identisch zu letztem Jahr. Und dem Jahr davor. Und dem Jahr davor. Und… nun ja, fast. „Gradientenränder in CSS“ ist neu und verdrängt die Eigenschaft box-shadow von der Liste. Alles andere ab dem vierten Platz hat lediglich die Plätze getauscht.

Apropos Eigenschaften im Almanac, ich möchte sehen, was Sie im letzten Jahr am meisten referenziert haben

1. ::after / ::before
2. transition
3. box-shadow
4. scrollbar
5. justify-content
6. flex-wrap
7. gap
8. overflow-wrap
9. Animation
10. white-space

Ein Pseudo-Selektor an der Spitze und danach nur noch Eigenschaften. Interessant, angesichts der Tatsache, dass relationale Pseudo-Selektor-Funktionen wie :has(), :is() und :where() neu auf dem Block sind.

Newsletter

Die Zahlen sind hier viel zu unübersichtlich, um daraus aussagekräftige Schlüsse zu ziehen. Nach dem Umzug zu DigitalOcean mussten wir unsere Liste von über 91.000 Abonnenten aus Compliance-Gründen bereinigen, und die Zahl ist infolgedessen abgestürzt. Wenn Sie von der Liste gestrichen wurden, können Sie sich hier erneut anmelden.

Die gute Nachricht? Wir machen weiterhin den Newsletter! Wir haben ihn im August nach einer fünfmonatigen Pause wiederbelebt. Wir hatten eine wöchentliche Frequenz, sind jetzt aber einmal im Monat, während Ihre Wenigkeit ihn verfasst. Ich hoffe wirklich, dass wir die Veröffentlichung wieder auf wöchentlich umstellen. *(Ich vermisse dich, Robin!)*

Website-Updates

Es ging hauptsächlich darum, das Schiff am Laufen zu halten, wenn ich ehrlich bin. Abgesehen von einigen kleineren Anpassungen und Wartungsarbeiten ist die Website ziemlich dort, wo sie zu dieser Zeit letztes Jahr war.

Das wird sich 2023 stark ändern. Wenn Sie unsere monatlichen Behind the CSScenes Updates verfolgt haben, wissen Sie, dass wir planen, CSS-Tricks von WordPress auf dasselbe selbst entwickelte CMS zu migrieren, das DigitalOcean für alle seine (hervorragenden) Community-Inhalte verwendet.

Diese Arbeit wurde vor ein paar Monaten begonnen und sollte in der ersten Jahreshälfte abgeschlossen sein. Sie können darauf wetten, dass wir Sie auf dem Laufenden halten werden. Neben einem neuen Design und einem neuen Backend wird alles wie gewohnt weitergehen. Wenn Sie Fragen zu dieser Arbeit und dem, was sie für Ihre bevorzugte Front-End-Publikation bedeutet, haben, dann melden Sie sich bitte in den Kommentaren oder schicken Sie mir eine E-Mail.

Falls Sie es noch nicht gesehen haben, hier sind einige Entwürfe, die unser Designer Logan Liffick erstellt hat

Überprüfung der Ziele für 2021

Oy, ich zögere, überhaupt hinzusehen. Die ganze Anstrengung, die erforderlich war, um uns in DigitalOcean zu integrieren und einen neuen Rhythmus zu finden, hat die Zeit aller dominiert, sodass kaum noch Zeit blieb, Chris' Ziele anzugehen, die waren

• ✅ **Mehr SEO-Fokus.** Ich gebe uns hier eine bestandene Note. Die Wahrheit ist, dass Chris und ich uns dem schon vor der Übernahme gewidmet haben. Wir haben das Yoast SEO Plugin durch RankMath ersetzt und seine In-Editor-Tools genutzt, um zu lernen, wie wir unsere Beiträge für Suchergebnisse optimieren können. Und um es klar zu sagen: Es geht weniger darum, den Traffic für mehr Sponsoreneinnahmen zu erhöhen, als vielmehr darum, zu erkennen, dass die Suche der primäre Weg ist, wie Leser wie Sie uns finden, und es Ihnen leichter zu machen, das zu finden, wonach Sie suchen. Das gilt insbesondere jetzt, da wir von DigitalOcean unterstützt werden und uns weitaus weniger auf Sponsoring verlassen als früher.
• 🚫 Ein weiteres digitales Buch. Fehlgeschlagen! Nun, wir haben nie wirklich geschwungen, oder sind überhaupt in den Schlagkasten getreten. (Funktionieren Sportanalogien so?) Chris veröffentlichte 2020 ein Buch mit The Greatest CSS Tricks und machte es zu einem Vorteil für zahlende CSS-Tricks-Abonnenten. Die Idee war, dieses Jahr ein weiteres zu machen, aber wir haben die kostenpflichtigen Abonnements abgeschafft und The Greatest CSS Tricks für alle kostenlos zugänglich gemacht.
• 🚫 Mehr Social-Media-Experimente. Nein! Aber das könnte auch gut so sein, wenn man bedenkt, wo Twitter gerade steht. Wir könnten gezwungen sein, im nächsten Jahr mehr aus Notwendigkeit als aus Interesse in diesem Bereich zu experimentieren. Twitter war schon immer ein Tropfen im sprichwörtlichen Eimer des CSS-Tricks-Traffics; so sehr, dass die Investition darin wie das Auslegen unserer Eier in den falschen Korb, äh, Eimer erscheint. Ich weiß nicht. Ein Teil von mir möchte einfach die Hände in den Schoß legen und sehen, wie sich die Dinge entwickeln, bevor ich etwas Neues oder Anderes beschließe.

Ziele für 2023

Neues Jahr, neue Ziele, oder? Erlauben Sie mir, einige Worte in den Mund des Teams zu legen und zu projizieren, was meiner Meinung nach die Top-Prioritäten für uns im Jahr 2023 sind

• Eine reibungslose Website-Migration. Nichts würde mich glücklicher machen¹ als ein reibungsloser Umzug in die Architektur von DigitalOcean. Aber mal ehrlich, wir alle wissen, dass *immer* etwas auftaucht, wenn es soweit ist. Diese Website hat über 7.000 Artikel, die über 15 Jahre geschrieben wurden, und es gab 19 Versionen der Website in diesem Zeitraum. Es gibt so viele benutzerdefinierte Post-Typen, benutzerdefinierte Felder, Seiten-Vorlagen, Funktions-Plugins, Integrationen und eine Datenbank, die über 6 GB groß ist, um sie in ein bestehendes System zu verschieben und zuzuordnen. Gut, dass wir ein Team von erstklassigen Entwicklern hier haben, die das übernehmen!
• Veröffentlichen Sie 1-2 neue Leitfäden. Ich würde tatsächlich gerne höher zielen. Wir gingen von neun neuen Leitfäden im Jahr 2020 zu einem mageren neuen Leitfaden im Jahr 2021 und einem weiteren im letzten Jahr über: Miriam's Complete Guide to CSS Cascade Layers. Ich habe eine Liste mit 10 weiteren, die ich gerne schreiben würde, denke aber, wir werden die Messlatte angesichts unserer jüngsten Erfolgsbilanz sehr niedrig ansetzen. Ich erwähnte bereits, dass ich gerne Mojtabas Arbeit im Almanac in den bestehenden CSS Grid-Leitfaden integrieren würde. Das ist keine kleine Aufgabe und ich würde sie zu dem Ziel zählen, wenn wir es schaffen.
• Erweitern Sie den Almanac. Das ist mein Moonshot. Ich würde gerne mehr Arten von Dokumentationen dort sehen. Wir haben Pseudo-Selektoren und Eigenschaften, was großartig ist und immer war. Aber, Himmel, denken Sie an all die anderen Dinge, die wir dort haben könnten: Funktionen, at-rules, Einheiten, Selektoren, Eigenschaftswerte, usw. Wir kratzen nur an der Oberfläche dessen, was dort hineinkommen könnte! Wenn wir auch nur eines davon bekommen, wäre ich im place-self: heaven.

Vielen Dank, so so, so sehr!

Das ist mein Traumjob und ich hätte ihn nicht ohne Leser wie Sie. Ich kann nicht glauben, dass es schon acht Jahre her ist, seit mein allererster Artikel veröffentlicht wurde, und dass ich immer noch hier bin, arbeite mit lerne von den klügsten Köpfen unseres Fachs. Ich könnte (mehr als ich es bereits getan habe) darüber schwadronieren, wie viel mir die CSS-Tricks-Community bedeutet, aber worauf es wirklich ankommt, ist... danke, danke, danke. Aus tiefstem Herzen, danke.

Und Dank an all die großartigen Leute hier bei DigitalOcean, die ein großartiges Zuhause für CSS-Tricks geschaffen haben. Besonders herzliche Grüße an Haley Mills, Sydney Rossman Reich, Bradley Kouchi, Karen Digi, David Berg, Matt Crowley, Logan Liffick und Kirstyn Kellogg, die mich persönlich auf den neuesten Stand gebracht und mich hier so willkommen fühlen lassen haben. Es ist ein großartiger Ort.

Vorwärts geht’s!