Köszönöm (2022-es kiadás)

Tudod, ez az évnek az az időszaka, amikor Chris rendszerint közzétesz egy nagy elmélkedést az elmúlt évről. A első 2007-ben jelent meg, ugyanabban az évben, amikor a CSS-Tricks elkezdődött, és ez 2021-ig folytatódott ütem nélkül. Mivel én is CSS-Tricks olvasója voltam az évek során, nem szívesen látnám ezt a változást.

Szóval, itt vagyunk! A 2022-es év biztos, hogy az átmenetet tekintve pokoli év volt. Tavaly ilyenkor előretekintettünk néhány célt a következő évre (amit el is fogunk érni), de végül csatlakoztunk a DigitalOceanhez. Ez hatalmas változás volt (szójáték célja), és mégis végig velünk maradtál. Nagyon sokat jelent számomra, hogy olyan sokan eljöttök ide, hogy elolvassák azokat a dolgokat, amelyeket én és egy csomó más vendégíró közzétesz itt. Ez nem egy közösség (vagy semmi szórakozás) nélkületek.

Köszönöm!

Ez az utolsó bejegyzésünk ebben az évben, mivel az ünnepek alkalmából kifüggesztjük Gone Fishin' feliratunkat. Visszajövünk január 9 frissen a sütőből származó tartalommal.

Rendben, itt kezdünk beleásni a webhely elemzésébe. Ez az, amiről mindig is átláthatóak voltunk, és ezt a jövőben is meg fogjuk tenni. Nem mintha a számaink bizonyos határon túli fekete dobozban vannak, és reméljük, hogy megosztásuk valamilyen módon segít Önnek és vállalkozásának.

Teljes forgalom

Összességében a Google Analytics összesen értéket mutat 64m oldalmegtekintések száma az egész évben. Ez az wayyyyy lefelé a tavalyi 88 ​​méterről, ami első pillantásra riasztó. Mármint aki látni akarja a 27% évről évre csökken a forgalom?

De ennek jó oka van, mert közzétettük a wayyyyy kevesebb tartalom idén. Mindannyian tudjuk, hogy Chris termékeny író volt (és még mindig aztermészetesen), gyakran több bejegyzést is kiköpve naponta. Ez olyan, mintha az év nagy részében elvesztettük volna a legtermékenyebb közreműködőnket. Hasonlítsuk össze az elmúlt néhány év publikációs tevékenységét:

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

Az oldalmegtekintések 27%-os csökkenése sokkal kevésbé aggasztó, ha figyelembe vesszük, hogy közzétettük 43% kevesebb cikk, mint tavaly, és óriási 67% kevesebb, mint 2020 összesített száma.

Hmm, nem érzem, hogy 67%-kal kevesebbet dolgoznék…

És mindez azzal a figyelmeztetéssel jár, hogy csak ezt kapjuk a Google Analytics szolgáltatásból. Az elmúlt években Chris összehasonlította ezeket a számokat a statisztikai adatokkal CloudFlare (a CDN réteg, amely a webhely tetején található) és jetpack (a beépülő modul, amely összekapcsolja a saját üzemeltetésű WordPress webhelyünket a WordPress.com SaaS-y szolgáltatásaival). Az eredmények mindig következetesen következetlenek, olyan mértékben, hogy ezúttal nem is veszem a fáradságot, hogy körülnézzek. (Rendben, jó, talán csak a Jetpack… ami 59.9 millió oldalmegtekintést mutat – furcsa módon több, mint a 2021-es 55 milliós teljes.)

Cikkek, számok szerint

Ezt várom minden évben! Íme a tíz legjobb cikk 2022-ben 2022-ben jelentek meg:

1. 6 kreatív ötlet a CSS Link Hover Effectshez - Harshil Patel
2. Magyarázd el nekem a Twitter forráskódjának első 10 sorát – Anand Chowdhary
3. Melyek voltak a legmenőbb kezelőfelületi eszközök 2021-ben? - Louis Lazaris
4. Cserélje le a JavaScript párbeszédpaneleket az új HTML párbeszédpanelre — Mads Stoumann
5. Üdvözölje a kiválasztási menüt, egy teljesen stílusos elemet - Patrick Brosset
6. Megbízható HTTP-kérés küldése, amikor a felhasználó elhagyja az oldalt - Alex MacArthur
7. grid-template-columns — Mojtaba Seyedi
8. A CSS Cascade Layerek teljes útmutatója - Miriam Suzanne
9. CSS adatbázis lekérdezések? Persze, hogy megtehetjük! – Chris Coyier
10. A CSS-Tricks csatlakozik a DigitalOceanhez! – Chris Coyier

Igazán meglepett, hogy az utolsó nem volt előrébb a listán. És nagyon fel vagyok döbbenve, hogy látok egyet az Alamanachból, különösen azért, mert Mojtaba letört az összes CSS Grid tulajdonságot az elmúlt másfél évben, és kiütötte a labdarúgó-pályáról. Azt hittem, jól kezelem a rácsot, amíg el nem kezdtem olvasni az összes aranyrögöt, amelyet minden ingatlanba csomagolt. Rengeteg tanulnivaló van ott, és Mojtabának készsége van a bonyolult dolgok világos magyarázatában. Remélem frissíteni tudom a CSS Grid útmutató minden friss információval (de erről egy kicsit bővebben).

Szeretem látni a CSS Cascade Layers útmutatóját is! Nagyon élveztem Miriam-mel dolgozni. Ha nem tudnád, ő a spec szerkesztője. Öröm (és igazán megtiszteltetés), hogy itt láthatjuk a munkáját, és mindannyiunk számára elérhetővé tesszük könyvjelzőként és hivatkozásként.

Íme, 11-20 a rúgásokra:

11. Animáció alap JavaScripttel – Shuvo úr
12. Flutter front-end webfejlesztőknek — Obumuneme Nwabude
13. CSS-rács és egyéni alakzatok, 1. rész — Temani Afif
14. Írjon HTML-t, a HTML-módszert (nem az XHTML-módot) – Jens Oliver Meiert
15. Négy új CSS-színfunkció füttyútja – Chris Coyier
16. Cool Hover effektusok, amelyek háttértulajdonságokat használnak — Temani Afif
17. Hozzunk létre egy apró programozási nyelvet – Shuvo úr
18. Menő CSS lebegő effektusok, amelyek háttérkivágást, maszkokat és 3D-t használnak — Temani Afif
19. Tökéletes tartalomjegyzék HTML + CSS segítségével — Nicholas C. Zakas
20. CSS-alapú ujjlenyomat – Chris Coyier

A 2022-ben közzétett összes bejegyzés a következő 4.8m oldalmegtekintések, vagy kb 7.8% az összes oldalmegtekintésből. A legnézettebb cikkünk mindig az ol' Flexbox útmutató amely begyűjtötte 5.8m nézettség idén. Szívesen látnám, ha új tartalmaink felülmúlják ezt az egy tételt, és úgy gondolom, hogy ez könnyen megtörténhetett volna, ha tartjuk a közzététel ütemét. A szalvéta matematikai háttere itt, de körülbelül 67 millió oldalmegtekintést érhettünk volna el, ha 540 cikkel több cikket tettünk volna közzé, hogy megfeleljen a tavaly megjelent cikkek számának.

Ha visszalépünk néhány lépést, akkor láthatjuk az elmúlt év legnézettebb cikkeit, függetlenül attól, hogy mikor jelentek meg:

1. A Flexbox teljes útmutatója
2. A Grid teljes útmutatója
3. Tökéletes teljes oldalas háttérkép
4. A CSS alakjai
5. Médialekérdezések szabványos eszközökhöz
6. SVG használata
7. Az SVG méretezése
8. CSS háromszög
9. Gradiens határok a CSS-ben
10. Csonka karakterlánc ellipszissel
11. Hogyan kell használni @font-face a CSS-ben

Igen, majdnem ugyanaz, mint tavaly. És az előző évben. És az előző évben. És… nos, majdnem. A „Gradient Borders a CSS-ben” újdonság, amely felborítja a box-shadow ingatlan lekerült a listáról. Minden más a négy helyről csupán helyet cserélt.

Ha már az Almanach ingatlanjairól beszélünk, szeretném látni, mire hivatkozott a legtöbbet az elmúlt évben:

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

Egy pszeudo a tetején és utána semmi, csak tulajdonságok. Érdekes, tekintve, hogy a relációs pszeudo szelektor úgy működik, mint :has(), :is()és :where() új gyerekek vannak a blokkban.

Hírlevél

A számok itt túlságosan rendetlenek ahhoz, hogy éles következtetéseket vonjunk le. Miután a DigitalOceanhez költöztünk, a megfelelés érdekében súrolnunk kellett a 91 XNUMX+ előfizetőt tartalmazó listánkat, és ennek következtében a szám zuhant. Ha kikerültél a listáról, itt tudsz újra előfizetni.

A jó hírek? Továbbra is írunk hírlevelet! Valójában mi augusztusban újra felgyújtotta öt hónap kihagyás után. Heti ütemben voltunk, de most már havonta egyszer, míg a tiéd valóban írja. Nagyon remélem, hogy visszatérhetek egy heti kiadványba. (Hiányzol, Robin!)

Webhelyfrissítések

Leginkább a hajó felszínen tartásáról volt szó, ha őszinte akarok lenni. Néhány kisebb módosításon és karbantartáson kívül az oldal nagyjából ott van, ahol tavaly ilyenkor volt.

Ez nagyot fog változni 2023-ban. Ha követte a havi lapunkat A CSS színfalak mögött frissítéseket, akkor tudja, hogy a CSS-trükkök áttelepítését tervezzük a WordPressről ugyanarra az otthoni CMS-re, amelyet a DigitalOcean az összes (csillagszerű) rendszeréhez használ. közösségi tartalom.

Ez a munka néhány hónappal ezelőtt kezdődött, és az év első felében kell elvégezni. Fogadhat, hogy az út során folyamatosan tájékoztatjuk Önt. Emellett a friss design és egy új háttérrel, a megszokott módon kell működnie. Ha bármilyen kérdése van ezzel a munkával és azzal kapcsolatban, hogy mit jelent ez a kedvenc front-end kiadványa számára, keressen meg a hozzászólásokban or küldj egy emailt.

Ha még nem láttad, itt van néhány összeállítás, amit tervezőnk, Logan Liffick állított össze:

2021-es gólértékelés

Ó, habozok megnézni. A DigitalOcean-nel való integráció és az új ritmus megtalálása érdekében tett erőfeszítések uralták mindenki idejét, és nem maradt sok értékes Chris céljainak eléréséhez, amelyek a következők voltak:

• ✅ Több SEO fókusz. Itt átmenő osztályzatot adok nekünk. Az igazság az, hogy Chris és én már az akvizíció előtt ebbe beleástuk magunkat. A Yoast SEO bővítményt a RankMath-ra cseréltük, kihasználva annak szerkesztői eszközeit, amelyek segítségével megtanulhatjuk, hogyan optimalizálhatjuk bejegyzéseinket a keresési eredményekhez. És hogy egyértelmű legyen: ez nem a forgalom növelése a szponzori bevételek növelése érdekében, hanem annak felismerése, hogy az Önhöz hasonló olvasók elsősorban a kereséssel találnak ránk, és megkönnyíti Önnek, hogy megtalálja, amit keres. Ez különösen igaz most, amikor a DigitalOcean támogat minket, és sokkal kevésbé támaszkodunk szponzorálásra, mint korábban.
• 🚫 Egy újabb digitális könyv. Swing és egy kisasszony! Nos, valójában soha nem lendültünk, vagy nem léptünk bele a tészta dobozába. (Így működnek a sport analógiák?) Chris kiadott egy könyvet a A legnagyobb CSS-trükkök 2020-ban, és a fizetős CSS-Tricks-előfizető előnyére tette. Az volt az ötlet, hogy idén csináljunk még egyet, de megszabadultunk a fizetős előfizetésektől, és megnyitottuk a The Greatest CSS Tricks-t, hogy mindenki élvezhesse, ingyenesen.
• ???? Több közösségi média kísérletezés. Dehogy! De ez lehet a legjobb, ha figyelembe vesszük, hogy a Twitter hol tart ebben a pillanatban. Lehet, hogy jövőre inkább kényszerből, mint érdekből leszünk kénytelenek kísérletezni ezen a területen. A Twitter mindig is egy csepp a CSS-Tricks forgalom közmondásos vödörében; olyannyira, hogy befektetni olyan érzés, mintha rossz kosárba, ööö vödörbe tesszük a tojásainkat. Nem tom. Egy részem csak le akar ülni a kezemre, és látni, hogyan változnak a dolgok, mielőtt bármi új vagy más mellett döntenék.

2023-as cél kitűzése

Új év, új célok, igaz? Engedjék meg, hogy a csapat szájába adjak egy csomó szót, és előrevetítsem azt, amit 2023-ban a legfontosabbnak tartok:

• Zökkenőmentes webhely-migráció. Semmi sem tenne boldogabbá¹ mint egy csuklásmentes lépés a DigitalOcean architektúrája felé. De tessék, mindannyian tudjuk valami mindig előkerül, ha eljön az ideje. Ezen az oldalon több mint 7,000 cikk található, amelyeket 15 év alatt írtak, és 1Az oldal 9 verziója abban az időben. Rengeteg egyéni bejegyzéstípus, egyéni mező, oldalsablon, funkcióbővítmény, integráció és egy több mint 6 GB-os adatbázis létezik, amelyek áthelyezhetők és leképezhetők egy meglévő rendszerre. Még szerencse, hogy van itt egy kiváló fejlesztőcsapat, aki ezt vállalja!
• Tegyen közzé 1-2 új útmutatót. Valójában szeretnék magasabbra célozni. A 2020-as kilenc új kalauzról 2021-ben egy csekély új kalauzra váltunk, az elmúlt évben pedig egy másikra: Miriam Teljes útmutató a CSS kaszkád rétegekhez. Van még egy 10-es listám, amit szívesen megírnék, de úgy gondolom, hogy a közelmúltban elért eredmények alapján szuper alacsonyra tesszük a lécet. Korábban említettem, hogy szívesen beépíteném Mojtaba Almanach-beli munkáját a meglévő CSS Grid útmutatóba. Ez nem kis munka, és ha sikerül, beszámítanám a célba.
• Bővítse ki az Almanachot. Ez az én holdképem. Szívesen látnék több fajta dokumentációt is benne. Vannak pszeudo-szelektoraink és tulajdonságaink, ami nagyszerű és mindig is az volt. De, istenem, gondolj az összes többi dologra, ami ott lehet: függvények, at-szabályok, mértékegységek, szelektorok, tulajdonságértékek stb. Csak a felszínét kaparjuk, hogy mi kerülhet oda! Ha beszereznénk egyet is, én ott lennék place-self: heaven.

Nagyon köszönöm, so sokkal!

Ez az álmaim munkám, és nem lenne ilyen olvasóm, mint te. Nem hiszem el, hogy nyolc év telt el az első cikkem megjelenése óta, és még mindig itt vagyok, dolgozni vele szakterületünk legokosabb elméitől tanulva. Tudnék azon töprengeni (többet, mint eddig), hogy mennyit jelent számomra a CSS-Tricks közösség, de valójában az a lényeg, hogy… köszönöm, köszönöm, köszönöm. Tiszta szívből, köszönöm.

És köszönet a DigitalOcean minden kedves munkatársának, akik nagyszerű otthont teremtettek a CSS-Tricks számára. Haley Millsnek, Sydney Rossman Reichnek, Bradley Kouchinak, Karen Diginek, David Bergnek, Matt Crowleynak, Logan Lifficknek és Kirstyn Kelloggnak különleges csúcsai voltak, akik személyesen felgyorsítottak, és nagyon szívesen látnak itt. Ez egy nagyszerű hely.

Előre, megyünk!