Teşekkürler (2022 Sürümü)

Biliyorsunuz, bu, Chris'in normalde geçen yılın büyük bir yansımasını yayınladığı yılın zamanıdır. bu Birincisi 2007'de yayınlandı, CSS-Tricks'in başladığı yıl ve 2021 boyunca devam etti bir ritmi kaçırmadan. Bunca yıldır CSS-Tricks okuyucusu olduğum için, bu değişikliği görmekten nefret ederim.

İşte buradayız! 2022, geçiş süreci açısından kesinlikle harika bir yıldı. Geçen yıl bu zamanlar, önümüzdeki yıl için (ki ulaşacağız) bazı hedeflere bakıyorduk ama sonunda DigitalOcean'a katıldık. Bu büyük bir deniz değişikliğiydi (amaçlanan kelime oyunu) ve yine de tüm yol boyunca bizimle kaldınız. Çoğunuzun buraya benim ve diğer bir yığın konuk yazarın yayınladığı şeyleri okumak için gelmesi benim için gerçekten çok şey ifade ediyor. Sizler olmadan bu bir topluluk (ya da herhangi bir eğlence) değil.

Teşekkürler!

Bu, tatil için Gone Fishin' tabelamızı asarken bu yıl yayınladığımız son gönderi. Geri döneceğiz Ocak 9 fırından yeni çıkmış bir içerik akışıyla.

Tamam, burası sitenin analizlerini incelemeye başladığımız yer. Bu, her zaman şeffaf olduğumuz ve yapmaya devam edeceğimiz bir şey. Sayılarımız yasak bir kara kutuda değil ve bunları paylaşmanın size ve işinize bir şekilde yardımcı olacağını umuyoruz.

Genel trafik

Genel olarak, Google Analytics toplamda şunu gösteriyor: 64m tüm yıl için sayfa görüntüleme sayısı. bu ayyyyy ilk bakışta endişe verici olan geçen yılki 88m'den düştü. Yani, kim görmek ister? %27 yıldan yıla trafikte düşüş mü?

Ancak bunun için iyi bir nedenimiz var çünkü bir ayyyy bu yıl daha az içerik. Hepimiz Chris'in üretken bir yazar olduğunu biliyoruz (ve hala, elbette), genellikle günde birden fazla gönderi yayınlıyor. Yılın büyük bir bölümünde en üretken katılımcımızı kaybetmiş gibiyiz. Son birkaç yıldaki yayıncılık faaliyetini karşılaştıralım:

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

Sayfa görüntülemelerinde %27'lik bir düşüş, yayınladığımızı düşünürsek çok daha az. %43 geçen yıla göre daha az makale ve 67% 2020'nin genel toplamından daha az.

Hmm, %67 daha az çalışıyormuşum gibi hissetmiyorum…

Ve tüm bunlar, Google Analytics'ten aldığımızın tam olarak bu olduğu uyarısıyla birlikte gelir. Geçtiğimiz yıllarda, Chris bu sayıları şu anki istatistiklerle karşılaştırdı. Cloudflare (sitenin üstünde oturan CDN katmanı) ve jetpack (kendi kendine barındırılan WordPress sitemizi WordPress.com'un SaaS-y özelliklerine bağlayan eklenti). Sonuçlar her zaman tutarlı bir şekilde tutarsızdır, o kadar ki bu sefer etrafa bakma zahmetine bile girmem. (Pekala, tamam, belki sadece Jetpack… ki bu da 59.9 milyon sayfa görüntülemeyi gösteriyor — garip bir şekilde 2021'deki toplam 55 milyondan fazla.)

Makaleler, sayılara göre

Her yıl dört gözle beklediğim şey bu! İşte 2022'de en iyi on makale 2022 yılında yayınlandı:

1. CSS Link Hover Efektleri için 6 Yaratıcı Fikir - Harshil Patel
2. Twitter'ın Kaynak Kodunun İlk 10 Satırını Bana Açıklayın — Anand Chowdhary
3. 2021'de En Popüler Ön Uç Araçları Neydi? —Louis Lazaris
4. JavaScript İletişim Kutularını Yeni HTML İletişim Kutusu Öğesiyle Değiştirin -Mads Stoumann
5. Seçim menüsüne Merhaba deyin, Tamamen Stil uyumlu bir seçme Öğesi —Patrick Brosset
6. Bir Kullanıcı Sayfadan Ayrılırken Güvenilir Bir HTTP İsteği Gönderin -Alex MacArthur
7. grid-template-columns — Mücteba Seyedi
8. CSS Basamaklı Katmanları İçin Eksiksiz Bir Kılavuz — Miriam Suzanne
9. CSS Veritabanı Sorguları? Tabiki yapabiliriz! —Chris Coyier
10. CSS-Tricks DigitalOcean'a katılıyor! —Chris Coyier

Aslında sonuncunun listede daha yüksek olmamasına şaşırdım. Ve orada Alamanac'tan birini görmek beni gerçekten çok heyecanlandırdı, özellikle de Mojtaba tüm CSS Izgarası özellikleri geçen bir buçuk yıl boyunca ve onu basketbol sahasının dışına çıkardı. Her mülke doldurduğu tüm altın külçelerini okumaya başlayana kadar ızgarayı iyi idare ettiğimi düşündüm. Orada öğrenilecek çok şey var ve Mojtaba'nın karmaşık şeyleri net bir şekilde açıklama becerisi var. güncellemeyi umuyorum CSS Izgara kılavuzu tüm bu taze bilgilerle (ama birazdan daha fazlası).

Orada CSS Basamaklı Katmanlar kılavuzunu da görmeyi seviyorum! Üzerinde Miriam ile çalışırken çok eğlendim. Eğer bilmiyorsan, o spesifikasyon için bir editör. Çalışmasına burada ev sahipliği yapmak ve onu yer imlerine ekleyip referans olarak hepimizin kullanımına sunmak büyük bir zevk (ve gerçekten bir onur).

İşte vuruşlar için 11-20:

11. Temel JavaScript ile Animasyon —Md Shuvo
12. Ön Uç Web Geliştiricileri için Flutter —Obumuneme Nwabude
13. CSS Izgarası ve Özel Şekiller, Bölüm 1 — Temani Afif
14. HTML, HTML Yoluyla Yazın (XHTML Yolu Değil) —Jens Oliver Meiert
15. 4 Yeni CSS Renk Özelliğiyle Bir Durdurma Turu —Chris Coyier
16. Arka Plan Özelliklerini Kullanan Harika Hover Efektleri — Temani Afif
17. Minik Bir Programlama Dili Oluşturalım —Md Shuvo
18. Arka Plan Kırpma, Maskeler ve 3D Kullanan Harika CSS Vurgulu Efektler — Temani Afif
19. HTML + CSS ile Mükemmel Bir İçindekiler — Nicholas C. Zakas
20. CSS Tabanlı Parmak İzi —Chris Coyier

2022 yılında yayınlanan tüm gönderiler 4.8m sayfa görüntüleme sayısı veya yaklaşık %7.8 tüm sayfa görüntülemelerinin En çok görüntülenen makalemiz her zaman eskidir Flexbox kılavuzu hangi topladı 5.8m bu yılki görünümler Yeni içeriğimizin bu öğeyi geride bıraktığını görmeyi çok isterim ve yayınlama hızına ayak uydursaydık bunun kolayca gerçekleşeceğine inanıyorum. Peçete matematiğinin arkası burada, ancak geçen yılın yayınlanan makale sayısına denk 67 makale daha yayınlamış olsaydık, yaklaşık 540 milyon sayfa görüntüleme almış olabilirdik.

Birkaç adım geriye gidersek, ne zaman yayınlandıklarına bakılmaksızın geçen yılın en çok görüntülenen makalelerini görebiliriz:

1. Flexbox için Eksiksiz Bir Kılavuz
2. Eksiksiz Bir Grid Kılavuzu
3. Mükemmel Tam Sayfa Arka Plan Resmi
4. CSS Şekilleri
5. Standart Cihazlar için Medya Sorguları
6. SVG'yi kullanma
7. SVG Nasıl Ölçeklendirilir?
8. CSS Üçgeni
9. CSS'de Degrade Kenarlıklar
10. Dizeyi Üç Nokta ile Kes
11. Nasıl kullanılır? @font-face CSS'de

Evet, geçen senenin neredeyse aynısı. Ve önceki yıl. Ve önceki yıl. Ve… şey, neredeyse. “CSS'de Degrade Kenarlıklar” yenidir ve box-shadow özellik liste dışı. Dört noktadaki diğer her şey sadece yer değiştirdi.

Almanak'taki özelliklerden bahsetmişken, geçen yıl en çok neye atıfta bulunduğunuzu görmek istiyorum:

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

En üstte bir sözde ve ondan sonra özelliklerden başka bir şey yok. İlişkisel sözde seçicinin şu şekilde çalıştığı göz önüne alındığında ilginç :has(), :is(), ve :where() blokta yeni çocuklar.

Kaydolun

Buradaki rakamlar, herhangi bir kavrayışlı sonuca varmak için çok dağınık. DigitalOcean'a geçtikten sonra uyumluluk amacıyla 91 binden fazla abone listemizi temizlemek zorunda kaldık ve sonuç olarak sayı düştü. Listeden çıkarıldıysanız, buradan yeniden abone olabilirsiniz.

Güzel haberler? Haber bülteni yapmaya devam ediyoruz! biz aslında Ağustos ayında tekrar ateşledi beş aylık bir aradan sonra. Haftalık bir ritimdeydik, ancak şimdi ayda bir, sizinki gerçekten yazarken. Haftalık bir yayına geri dönmeyi umuyorum. (Seni özledim Robin!)

Site güncellemeleri

Dürüst olmam gerekirse, çoğunlukla gemiyi ayakta tutmakla ilgiliydi. Bazı küçük düzeltmeler ve bakım dışında site, geçen yıl bu zamanlar olduğu yerde.

Bu, 2023'te büyük ölçüde değişecek. CSS Sahnelerinin Arkasında güncellemeler, o zaman CSS-Tricks'i WordPress'ten DigitalOcean'ın tüm (yıldız) işlemleri için kullandığı basit CMS'ye taşımayı planladığımızı biliyorsunuz. topluluk içeriği.

Bu çalışma birkaç ay önce başladı ve yılın ilk yarısında yapılması gerekiyor. Yol boyunca sizi güncel tutacağımıza bahse girebilirsiniz. yanında bir taze tasarım ve yeni bir arka uç, her zamanki gibi iş olmalı. Bu çalışma ve en sevdiğiniz ön uç yayınınız için ne anlama geldiği hakkında herhangi bir sorunuz varsa, lütfen bana ulaşın yorumlarda or bana bir e-posta gönder.

Henüz görmediyseniz, işte tasarımcımız Logan Liffick'in bir araya getirdiği birkaç kompozisyon:

2021 gol incelemesi

Oy, bakmaya bile çekiniyorum. DigitalOcean ile bütünleşmek ve yeni bir ritim bulmak için harcanan tüm çaba, herkesin zamanına hükmederek, Chris'in hedeflerini aşmak için çok az şey bıraktı:

• ✅ Daha fazla SEO odağı. Burada geçer not vereceğim. Gerçek şu ki, Chris ve ben, satın almadan önce zaten bu işe topuklarımızı kazıyorduk. Yayınlarımızı arama sonuçları için nasıl optimize edeceğimizi öğrenmemize yardımcı olması için editör içi araçlarından yararlanarak Yoast SEO eklentisini RankMath ile değiştirdik. Açık olmak gerekirse, daha fazla sponsorluk geliri için trafiği artırmaktan çok, sizin gibi okuyucuların bizi bulmasının birincil yolunun arama olduğunu kabul etmek ve aradığınızı bulmanızı kolaylaştırmaktır. DigitalOcean tarafından desteklendiğimiz ve sponsorluklara eskisinden çok daha az güvendiğimiz için bu özellikle doğru.
• 🚫Bir dijital kitap daha. Salıncak ve özledim! Aslında, ilk etapta asla sallanmadık veya bu konuda vurucunun kutusuna adım atmadık. (Spor analojileri böyle mi çalışır?) Chris bir kitap yayınladı. En Büyük CSS Püf Noktaları 2020'de ve bunu ücretli bir CSS-Tricks abonesi olmanın avantajı haline getirdi. Fikir, bu yıl bir tane daha yapmaktı, ancak ücretli aboneliklerden kurtulduk ve The Greatest CSS Tricks'i herkesin ücretsiz olarak keyfini çıkarması için açtık.
• ???? Daha fazla sosyal medya deneyi. Hayır! Ancak Twitter'ın şu anda nerede olduğunu düşünürsek, bu en iyisi olabilir. Gelecek yıl ilgiden çok zorunluluktan bu alanda deney yapmak zorunda kalabiliriz. Twitter, CSS-Tricks trafiğinin meşhur kovasında her zaman bir damla olmuştur; Öyle ki, ona yatırım yapmak, yumurtalarımızı yanlış sepete, yani kovaya koymak gibi geliyor. Bilmiyorum. Bir yanım yeni veya farklı bir şeye karar vermeden önce sadece ellerimin üstüne oturup işlerin nasıl değiştiğini görmek istiyor.

2023 hedef belirleme

Yeni yıl, yeni hedefler değil mi? Ekibin ağzından birkaç söz söylememe izin verin ve 2023'e girerken bizim için en önemli öncelikler olduğunu düşündüğüm şeyleri yansıtalım:

• Sorunsuz bir site geçişi. Hiçbir şey beni daha mutlu edemez¹ DigitalOcean'ın mimarisine sorunsuz bir geçiş yapmaktansa. Ama hadi, hepimiz biliyoruz bir şey her zaman gitme zamanı geldiğinde ortaya çıkar. Bu sitede 7,000 yılda yazılmış 15'den fazla makale var ve 1sitenin 9 versiyonu o zaman diliminde. Çok sayıda özel gönderi türü, özel alan, sayfa şablonu, işlevsellik eklentileri, entegrasyonlar ve mevcut bir sisteme taşınıp eşlenmek için 6 GB'ın üzerinde bir veritabanı var. İyi ki üst düzey geliştiricilerden oluşan bir ekibimiz var!
• 1-2 yeni kılavuz yayınlayın. Aslında daha yükseği hedeflemek isterdim. 2020'de dokuz yeni rehberden 2021'de önemsiz bir yeni rehbere geçtik ve geçen yıl bir tane daha: Miriam's Eksiksiz CSS Katmanları Kılavuzu. Yazmayı çok istediğim 10 tane daha listem var, ancak son geçmiş performansımız göz önüne alındığında çıtayı çok düşük tutacağımızı düşünüyorum. Mojtaba'nın Almanak'taki çalışmalarını mevcut CSS Izgara kılavuzuna dahil etmeyi çok istediğimden daha önce bahsetmiştim. Bu azımsanacak bir iş değil ve başarabilirsek bunu gol sayarım.
• Almanak'ı genişletin. Bu benim ay atışım. Orada daha fazla belge türü görmeyi çok isterim. Sözde seçicilerimiz ve özelliklerimiz var, ki bu harika ve her zaman olmuştur. Ama Tanrım, orada sahip olabileceğimiz diğer tüm şeyleri bir düşün: fonksiyonlar, kurallar, birimler, seçiciler, özellik değerleri, vb. Oraya girebilecek şeylerin sadece yüzeyini çiziyoruz! Onlardan birini bile alırsak, yerim place-self: heaven.

çok teşekkür ederim so çok!

Bu benim hayalimdeki iş ve sizin gibi okuyucular olmadan sahip olamazdım. İlk makalemin yayınlanmasının üzerinden sekiz yıl geçtiğine ve hala burada olduğuma inanamıyorum. ile çalışan alanımızdaki en parlak beyinlerden öğreniyoruz. CSS-Tricks topluluğunun benim için ne kadar önemli olduğu konusunda (zaten sahip olduğumdan daha fazla) saçma sapan konuşabilirim, ama asıl mesele şu: teşekkürler, teşekkürler, teşekkür ederim. Kalbimin derinliklerinden, teşekkür ederim.

Ve CSS-Tricks için harika bir yuva oluşturan DigitalOcean'daki tüm iyi insanlara teşekkürler. Haley Mills, Sydney Rossman Reich, Bradley Kouchi, Karen Digi, David Berg, Matt Crowley, Logan Liffick ve Kirstyn Kellogg'a beni kişisel olarak hızlandırdıkları ve burada çok iyi karşılandıklarını hissettirdikleri için ekstra özel beşlikler. Olmak için harika bir yer.

İleri, gidiyoruz!