Danke (Ausgabe 2022)

Weißt du, das ist die Zeit des Jahres, in der Chris normalerweise eine große alte Reflexion des vergangenen Jahres veröffentlicht. Das erste wurde 2007 veröffentlicht, im selben Jahr, in dem CSS-Tricks begann, und es bis 2021 fortgesetzt ohne einen Schlag zu verpassen. Da ich selbst all die Jahre CSS-Tricks-Leser war, würde ich es hassen, diese Änderung zu sehen.

So hier sind wir! 2022 war sicher ein Heckuva-Jahr, was den Übergang angeht. Letztes Jahr um diese Zeit blickten wir auf einige Ziele für das kommende Jahr (die wir erreichen werden), sind aber schließlich zu DigitalOcean gekommen. Das war eine gewaltige Veränderung (Wortspiel beabsichtigt) und dennoch hast du uns den ganzen Weg begleitet. 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. Es ist einfach keine Community (oder irgendein Spaß) ohne euch alle.

Dankeschön!

Dies ist der letzte Beitrag, den wir dieses Jahr veröffentlichen, da wir unser Gone Fishin'-Schild für die Feiertage aufhängen. Wir werden zurückkommen Januar 9 mit einer Fülle ofenfrischer Inhalte.

OK, hier fangen wir an, uns mit den Analysen der Website zu befassen. Das ist etwas, was wir immer transparent gemacht haben und das werden wir auch weiterhin tun. Es ist nicht so, dass sich unsere Nummern in einer Sperrbox befinden, und wir hoffen, dass das Teilen dieser Nummern Ihnen und Ihrem Unternehmen irgendwie hilft.

Gesamtverkehr

Insgesamt zeigt Google Analytics insgesamt an 64m Seitenaufrufe für das ganze Jahr. Das ist wegyyyy weniger als die 88 Millionen im letzten Jahr, was auf den ersten Blick alarmierend ist. Ich meine, wer will schon einen sehen 27% Rückgang des Traffics im Jahresvergleich?

Aber dafür gibt es einen guten Grund, denn wir haben a veröffentlicht Wayyyy weniger Inhalt in diesem Jahr. Wir alle wissen, dass Chris ein produktiver Schriftsteller war (und Ist immernoch, natürlich), oft mehrere Beiträge pro Tag ausspucken. Es ist so, als hätten wir den größten Teil des Jahres unseren produktivsten Mitarbeiter verloren. Vergleichen wir die Verlagstätigkeit der letzten Jahre:

• 2020: 1,183 Artikel
• 2021: 890 Artikel
• 2022: 390 Artikel

Ein Rückgang der Seitenaufrufe um 27 % ist viel weniger besorgniserregend, wenn man bedenkt, dass wir veröffentlicht haben 43% weniger Artikel als letztes Jahr und eine satte 67% weniger als die Gesamtsumme von 2020.

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

Und all dies kommt mit dem Vorbehalt, dass wir genau das von Google Analytics erhalten. In den vergangenen Jahren hat Chris diese Zahlen mit Statistiken von verglichen Cloudflare (die CDN-Schicht, die sich über der Website befindet) und Jetpack (das Plugin, das unsere selbst gehostete WordPress-Site mit den SaaS-y-Funktionen von WordPress.com verbindet). Die Ergebnisse sind immer so uneinheitlich, dass ich mir diesmal nicht einmal die Mühe mache, mich umzusehen. (In Ordnung, in Ordnung, vielleicht nur Jetpack … das zeigt 59.9 Millionen Seitenaufrufe – seltsamerweise mehr als die 2021 Millionen von 55 insgesamt.)

Artikel, nach Zahlen

Darauf freue ich mich jedes Jahr aufs Neue! Hier sind die Top-Ten-Artikel im Jahr 2022, die wurden 2022 veröffentlicht:

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-Dialogelement – Mads Stoumann
5. Begrüßen Sie selectmenu, ein vollständig stylefähiges select-Element —Patrick Brosset
6. Senden Sie zuverlässig eine HTTP-Anforderung, wenn ein Benutzer eine Seite verlässt – Alex MacArthur
7. grid-template-columns — Mojtaba Seyedi
8. Eine vollständige Anleitung zu CSS Cascade Layers — Miriam Susanne
9. CSS-Datenbankabfragen? Sicher können wir! – Chris Coyier
10. CSS-Tricks schließt sich DigitalOcean an! – Chris Coyier

Ich bin eigentlich überrascht, dass der letzte nicht weiter oben auf der Liste stand. Und ich bin wirklich begeistert, einen vom Alamanac darin zu sehen, besonders weil Mojtaba weggechippt ist alle CSS-Grid-Eigenschaften in den letzten anderthalb Jahren und er hat es weit aus dem Stadion geschlagen. Ich dachte, ich hätte das Raster gut im Griff, bis ich anfing, all die Goldnuggets zu lesen, die er in jedes Grundstück packte. Es gibt so viel zu lernen und Mojtaba hat ein Händchen dafür, komplizierte Dinge klar zu erklären. Ich hoffe auf ein Update CSS-Grid-Leitfaden mit all diesen frischen Informationen (aber dazu später mehr).

Ich finde es auch toll, den CSS Cascade Layers-Leitfaden darin zu sehen! Es hat mir so viel Spaß gemacht, mit Miriam daran zu arbeiten. Wenn Sie es nicht wussten, Sie ist Redakteurin für die Spezifikation. Es ist ein Vergnügen (und eine Ehre, wirklich), ihre Arbeit hier zu hosten und sie uns allen als Lesezeichen und Referenz zur Verfügung zu stellen.

Hier ist 11-20 für Kicks:

11. Animation mit einfachem JavaScript – Md Shuvo
12. Flutter für Front-End-Webentwickler – Obumuneme Nwabude
13. CSS-Raster und benutzerdefinierte Formen, Teil 1 — Temani Afif
14. Schreiben Sie HTML auf die HTML-Weise (nicht auf die XHTML-Weise) — Jens Oliver Meiert
15. Eine Whistle-Stop-Tour mit 4 neuen CSS-Farbfunktionen – 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, die Hintergrundausschnitte, Masken und 3D verwenden — Temani Afif
19. Ein perfektes Inhaltsverzeichnis mit HTML + CSS — Nicholas C. Zakas
20. CSS-basiertes Fingerprinting – Chris Coyier

Alle Posts, die im Jahr 2022 veröffentlicht wurden, bilden nach 4.8m Seitenaufrufe oder ca 7.8% aller Seitenaufrufe. Unser meistgesehener Artikel ist immer der alte Flexbox-Anleitung was einbrachte 5.8m Ansichten in diesem Jahr. Ich würde gerne sehen, dass unsere neuen Inhalte diesen einen Artikel übertreffen, und ich glaube, das wäre leicht passiert, wenn wir das Tempo der Veröffentlichung beibehalten hätten. Rechnen Sie hier hinter der Serviette, aber wir hätten vielleicht rund 67 Millionen Seitenaufrufe gehabt, wenn wir 540 weitere Artikel veröffentlicht hätten, um die Anzahl der veröffentlichten Artikel des letzten Jahres zu erreichen.

Wenn wir ein paar Schritte zurückgehen, sehen wir die meistgesehenen Artikel des vergangenen Jahres, unabhängig davon, wann sie veröffentlicht wurden:

1. Ein vollständiger Leitfaden für Flexbox
2. Ein vollständiger Leitfaden für Grid
3. Perfektes ganzseitiges Hintergrundbild
4. Die Formen von CSS
5. Medienabfragen für Standardgeräte
6. Verwenden von SVG
7. So skalieren Sie SVG
8. CSS-Dreieck
9. Verlaufsrahmen in CSS
10. Zeichenfolge mit Ellipse abschneiden
11. Wie man den Dienst nutzt @font-face im CSS

Ja, fast identisch mit letztem Jahr. Und das Jahr davor. Und das Jahr davor. Und… naja, fast. „Gradient Borders in CSS“ ist neu und stößt auf die box-shadow Eigentum von der Liste. Alles andere ab Platz vier hat lediglich die Plätze getauscht.

Apropos Eigenschaften im Almanach, ich möchte sehen, worauf Sie sich im vergangenen Jahr am meisten bezogen 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 oben und nichts als Eigenschaften danach. Interessant, da relationale Pseudoselektoren wie funktionieren :has(), :is() und :where() sind neue Kinder auf dem Block.

Newsletter

Die Zahlen hier sind viel zu chaotisch, um aufschlussreiche Schlussfolgerungen zu ziehen. Nach dem Wechsel zu DigitalOcean mussten wir unsere Liste von über 91 Abonnenten aus Compliance-Gründen säubern, und die Zahl sank infolgedessen stark. Wenn Sie von der Liste gestrichen wurden, Sie können sich hier erneut anmelden.

Die guten Nachrichten? Wir machen immer noch den Newsletter! Wir eigentlich habe es im August wieder hochgefahren nach einer fünfmonatigen Pause. Wir hatten eine wöchentliche Kadenz, aber jetzt einmal im Monat, während Ihre wirklich es verfasst. Ich hoffe sehr, dass es wieder zu einer wöchentlichen Veröffentlichung kommen wird. (Ich vermisse dich, Robin!)

Site-Updates

Es ging hauptsächlich darum, das Schiff über Wasser zu halten, wenn ich ehrlich bin. Abgesehen von einigen kleineren Optimierungen und Wartungsarbeiten ist die Website ziemlich genau dort, wo sie letztes Jahr um diese Zeit war.

Das wird sich 2023 grundlegend ändern. Wenn Sie unsere monatlichen Hinter den CSScenes Updates, dann wissen Sie, dass wir planen, CSS-Tricks von WordPress auf dasselbe hausgemachte CMS zu migrieren, das DigitalOcean für alle seine (stellaren) Community-Inhalte.

Diese Arbeiten haben vor ein paar Monaten begonnen und sollten in der ersten Hälfte des Jahres abgeschlossen sein. Sie können darauf wetten, dass wir Sie unterwegs auf dem Laufenden halten. Neben A frisches Design und ein neues Backend, es sollte wie gewohnt weitergehen. Wenn Sie Fragen zu dieser Arbeit haben und was sie für Ihre bevorzugte Front-End-Publikation bedeutet, kontaktieren Sie mich bitte in den Kommentaren or Schieß mir eine E-Mail.

Falls Sie es noch nicht gesehen haben, hier sind ein paar Kompositionen, die unser Designer Logan Liffick zusammengestellt hat:

Überprüfung der Ziele 2021

Oy, ich zögere, überhaupt hinzusehen. All die Anstrengungen, die erforderlich waren, um sich in DigitalOcean zu integrieren und einen neuen Rhythmus zu finden, dominierten die Zeit aller und ließen kostbar wenig übrig, um Chris' Ziele zu erreichen, nämlich:

• ✅ Mehr SEO-Fokus. Ich gebe uns hier eine bestandene Note. Die Wahrheit ist, dass Chris und ich uns bereits vor der Übernahme intensiv damit beschäftigt haben. Wir haben das Yoast SEO-Plug-in durch RankMath ersetzt und die Vorteile seiner In-Editor-Tools genutzt, um zu lernen, wie wir unsere Posts für Suchergebnisse optimieren können. Und um es klar zu sagen: Es geht weniger darum, den Traffic für mehr Sponsoring-Einnahmen zu erhöhen, als zu erkennen, dass die Suche der primäre Weg ist, auf dem 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 viel weniger auf Sponsoring verlassen als früher.
• 🚫 Noch ein digitales Buch. Swing und ein Miss! Nun, wir haben nie wirklich geschwungen oder sind in die Batter's Box getreten. (Funktionieren Sportanalogien so?) Chris hat ein Buch darüber veröffentlicht Die größten CSS-Tricks im Jahr 2020 und machte es zu einem Vorteil, ein bezahlter CSS-Tricks-Abonnent zu sein. 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. Nö! Aber das könnte das Beste sein, wenn man bedenkt, wo Twitter in dieser Sekunde 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 in den sprichwörtlichen Eimer des CSS-Tricks-Verkehrs; so sehr, dass es sich anfühlt, als würden wir unsere Eier in den falschen Korb, äh Eimer, legen. Ich weiß nicht. Ein Teil von mir möchte nur auf meinen Händen sitzen und sehen, wie sich die Dinge entwickeln, bevor ich mich für etwas Neues oder Anderes entscheide.

2023 Zielsetzung

Neues Jahr, neue Ziele, oder? Erlauben Sie mir, dem Team ein paar Worte in den Mund zu legen und zu projizieren, was meiner Meinung nach die obersten Prioritäten für uns auf dem Weg ins Jahr 2023 sind:

• Eine reibungslose Site-Migration. Nichts würde mich glücklicher machen¹ als ein schluckauffreier Wechsel zur Architektur von DigitalOcean. Aber komm schon, wir alle wissen es etwas kommt immer, wenn es Zeit ist. Diese Seite enthält mehr als 7,000 Artikel, die in 15 Jahren geschrieben wurden, und es gab 19 Versionen der Seite in dieser Zeitspanne. Es gibt so viele benutzerdefinierte Beitragstypen, benutzerdefinierte Felder, Seitenvorlagen, Funktions-Plugins, Integrationen und eine Datenbank, die über 6 GB groß ist, um sie zu verschieben und einem vorhandenen System zuzuordnen. Gut, dass wir hier ein Team von erstklassigen Entwicklern haben, die sich darum kümmern!
• Veröffentlichen Sie 1-2 neue Leitfäden. Ich würde eigentlich gerne höher zielen. Wir sind von neun neuen Guides im Jahr 2020 zu einem dürftigen neuen Guide im Jahr 2021 und einem weiteren im vergangenen Jahr übergegangen: Miriams Vollständiger Leitfaden zu CSS Cascade Layers. Ich habe eine Liste mit 10 weiteren, die ich gerne schreiben würde, aber ich denke, wir werden die Messlatte angesichts unserer jüngsten Erfolgsbilanz sehr niedrig legen. Ich habe bereits erwähnt, dass ich Mojtabas Arbeit im Almanac gerne in den bestehenden CSS-Grid-Leitfaden integrieren würde. Das ist nicht wenig Arbeit und ich würde es dem Ziel anrechnen, wenn wir das schaffen.
• Erweitern Sie den Almanach. Das ist mein Mondschuss. Ich würde gerne mehr Arten von Dokumentationen darin sehen. Wir haben Pseudo-Selektoren und Eigenschaften, was großartig ist und schon immer war. Aber denken Sie an all die anderen Dinge, die wir dort haben könnten: Funktionen, at-Regeln, Einheiten, Selektoren, Eigenschaftswerte usw. Wir kratzen nur an der Oberfläche dessen, was möglicherweise dort hineinpassen könnte! Wenn wir auch nur einen davon bekommen, wäre ich dabei place-self: heaven.

Vielen Dank, also, so viel!

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

Und danke an all die netten Leute hier bei DigitalOcean, die CSS-Tricks ein großartiges Zuhause geschaffen haben. Ganz besondere High-Fives an Haley Mills, Sydney Rossman Reich, Bradley Kouchi, Karen Digi, David Berg, Matt Crowley, Logan Liffick und Kirstyn Kellogg dafür, dass sie mich persönlich auf den neuesten Stand gebracht und mir das Gefühl gegeben haben, hier so willkommen zu sein. Es ist ein großartiger Ort.

Vorwärts, wir gehen!