ขอบคุณ (ฉบับปี 2022)

คุณรู้ไหมว่านี่เป็นช่วงเวลาของปีที่โดยปกติแล้ว Chris จะเผยแพร่ภาพสะท้อนของปีที่ผ่านมา เดอะ คนแรก เผยแพร่ในปี 2007 ซึ่งเป็นปีเดียวกับที่ CSS-Tricks เริ่มขึ้น ต่อเนื่องไปจนถึงปี 2021 โดยไม่พลาดจังหวะ ในฐานะที่เป็นผู้อ่าน CSS-Tricks มาตลอดหลายปีที่ผ่านมา ฉันไม่อยากเห็นการเปลี่ยนแปลงนั้นเลย

เราอยู่ที่นี่แล้ว! ปี 2022 เป็นปีแห่งการเปลี่ยนแปลงอย่างแน่นอน ในช่วงเวลานี้ของปีที่แล้ว เรากำลังมองไปข้างหน้าถึงเป้าหมายบางอย่างสำหรับปีที่จะมาถึง (ซึ่งเราจะไปให้ถึง) แต่จบลงด้วยการเข้าร่วม DigitalOcean นั่นเป็นการเปลี่ยนแปลงครั้งใหญ่ของทะเล (ตั้งใจเล่นสำนวน) แต่คุณก็ยังติดอยู่กับเราตลอดทาง มันมีความหมายมากสำหรับฉันจริง ๆ ที่พวกคุณหลายคนมาที่นี่เพื่ออ่านสิ่งที่ฉันและนักเขียนรับเชิญคนอื่น ๆ ตีพิมพ์ที่นี่ มันไม่ใช่ชุมชน (หรือความสนุกใดๆ) หากไม่มีพวกคุณ

ขอขอบคุณ!

นี่เป็นโพสต์สุดท้ายที่เราเผยแพร่ในปีนี้ ขณะที่เราวางป้าย Gone Fishin' สำหรับวันหยุด เราจะกลับมา มกราคม พร้อมเครื่องในที่สดใหม่จากเตา

ตกลง นี่คือจุดที่เราเริ่มเจาะลึกการวิเคราะห์ของไซต์ นั่นคือสิ่งที่เราโปร่งใสมาตลอดและจะทำต่อไป ไม่ใช่ว่าตัวเลขของเราอยู่ในกล่องดำที่จำกัด และหวังว่าการแบ่งปันข้อมูลเหล่านี้จะช่วยคุณและธุรกิจของคุณในทางใดทางหนึ่ง

การจราจรโดยรวม

โดยรวมแล้ว Google Analytics กำลังแสดงผลรวมของ 64m การดูหน้าเว็บตลอดทั้งปี นั่นคือ แย่แล้ว ลดลงจาก 88 ม. ของปีที่แล้ว ซึ่งน่าตกใจเมื่อมองแวบแรก ฉันหมายความว่าใครอยากเห็นก ลด 27% ปริมาณการใช้ข้อมูลปีต่อปีลดลง?

แต่มีเหตุผลที่ดีเพราะเราเผยแพร่ แย่แล้ว เนื้อหาน้อยลงในปีนี้ เราทุกคนรู้ว่าคริสเป็นนักเขียนที่อุดมสมบูรณ์ (และ ยังคงเป็นแน่นอน) มักจะคายออกมาวันละหลายโพสต์ มันเหมือนกับว่าเราสูญเสียผู้มีส่วนร่วมที่มีประสิทธิผลมากที่สุดสำหรับกลุ่มแห่งปี ลองเปรียบเทียบกิจกรรมการเผยแพร่ในช่วงไม่กี่ปีที่ผ่านมา:

• 2020: บทความ 1,183
• 2021: บทความ 890
• 2022: บทความ 390

จำนวนหน้าที่มีการเปิดลดลง 27% ถือว่าน้อยลงมากเมื่อพิจารณาจากที่เราเผยแพร่ ลด 43% บทความน้อยกว่าปีที่แล้วและมีจำนวนมหาศาล 67% น้อยกว่ายอดรวมของปี 2020

อืม ฉันไม่รู้สึกว่าฉันทำงานน้อยลง 67%...

และทั้งหมดนี้มาพร้อมกับคำเตือนว่านี่เป็นเพียงสิ่งที่เราได้รับจาก Google Analytics ในปีที่ผ่านมา Chris ได้เปรียบเทียบตัวเลขเหล่านั้นกับสถิติจาก Cloudflare (เลเยอร์ CDN ที่อยู่ด้านบนของไซต์) และ Jetpack (ปลั๊กอินที่เชื่อมต่อไซต์ WordPress ที่โฮสต์เองกับคุณสมบัติ SaaS-y ของ WordPress.com) ผลลัพธ์มักจะไม่สอดคล้องกันเสมอจนถึงขนาดที่ฉันไม่ใส่ใจที่จะดูในครั้งนี้ (เอาล่ะ อาจเป็นแค่ Jetpack… ซึ่งแสดงการดูหน้าเว็บ 59.9 ล้านครั้ง ซึ่งมากกว่าจำนวนรวม 2021 ล้านครั้งของปี 55 อย่างผิดปกติ)

บทความโดยตัวเลข

นี่คือสิ่งที่ฉันตั้งตารอทุกปี! นี่คือบทความสิบอันดับแรกในปี 2022 ที่ ได้รับการเผยแพร่ในปี 2022:

1. 6 แนวคิดสร้างสรรค์สำหรับเอฟเฟกต์ CSS Link Hover — ฮาร์ชิลพาเทล
2. อธิบาย 10 บรรทัดแรกของซอร์สโค้ดของ Twitter ให้ฉันฟัง — อานันท์ เชาว์ดารี
3. เครื่องมือ Front-End ที่ร้อนแรงที่สุดในปี 2021 คืออะไร? — หลุยส์ ลาซาริส
4. แทนที่กล่องโต้ตอบ JavaScript ด้วยองค์ประกอบกล่องโต้ตอบ HTML ใหม่ — แมดส์ สตูมันน์
5. ทักทายกับ selectmenu องค์ประกอบที่เลือกได้อย่างเต็มที่ — แพทริค บรอสเซ็ต
6. ส่งคำขอ HTTP ที่เชื่อถือได้เมื่อผู้ใช้ออกจากเพจ — อเล็กซ์แมคอาเธอร์
7. grid-template-columns — มอจทาบา เซเยดี
8. คู่มือฉบับสมบูรณ์สำหรับ CSS Cascade Layers — มิเรียม ซูซานน์
9. แบบสอบถามฐานข้อมูล CSS? แน่นอนว่าเราทำได้! — คริส โคเยอร์
10. CSS-Tricks เข้าร่วม DigitalOcean! — คริส โคเยอร์

ฉันประหลาดใจจริง ๆ ที่รายการสุดท้ายไม่ได้สูงกว่าในรายการ และฉันรู้สึกตื่นเต้นมากที่ได้เห็น Alamanac ในนั้น โดยเฉพาะอย่างยิ่งเมื่อ Mojtaba แตกออกที่ คุณสมบัติ CSS Grid ทั้งหมด ในช่วงปีครึ่งที่ผ่านมาและเขาก็ล้มมันออกจากสนามเบสบอล ฉันคิดว่าฉันมีการจัดการตารางที่ดีจนกระทั่งฉันเริ่มอ่านนักเก็ตทองคำทั้งหมดที่เขาบรรจุในแต่ละทรัพย์สิน มีอะไรมากมายให้เรียนรู้ในนั้น และ Mojtaba มีความสามารถพิเศษในการอธิบายสิ่งที่ซับซ้อนอย่างชัดเจน ฉันหวังว่าจะปรับปรุง คู่มือ CSS Grid ด้วยข้อมูลที่สดใหม่ทั้งหมด (แต่จะเพิ่มเติมอีกเล็กน้อย)

ฉันชอบดูคู่มือ CSS Cascade Layers ในนั้นด้วย! ฉันสนุกมากที่ได้ร่วมงานกับมิเรียมในเรื่องนี้ หากคุณไม่ทราบ เธอเป็นบรรณาธิการสำหรับข้อมูลจำเพาะ. เป็นเรื่องน่ายินดี (และเป็นเกียรติจริงๆ) ที่จะจัดงานของเธอที่นี่และทำให้พวกเราทุกคนสามารถคั่นหน้าและอ้างอิงได้

นี่คือ 11-20 สำหรับการเตะ:

11. ภาพเคลื่อนไหวด้วย JavaScript พื้นฐาน — นพ. ชูโว
12. Flutter สำหรับ Front-End Web Developers —โอบุมูเนเม นวาบูเด
13. CSS Grid และ Custom Shapes ตอนที่ 1 — เทมานี อาฟิฟ
14. เขียน HTML วิธี HTML (ไม่ใช่วิธี XHTML) — เจนส์ โอลิเวอร์ ไมเอิร์ต
15. ทัวร์ชมนกหวีด 4 คุณลักษณะสี CSS ใหม่ — คริส โคเยอร์
16. เอฟเฟกต์โฮเวอร์สุดเจ๋งที่ใช้คุณสมบัติพื้นหลัง — เทมานี อาฟิฟ
17. มาสร้างภาษาการเขียนโปรแกรมจิ๋วกันเถอะ — นพ. ชูโว
18. เอฟเฟกต์ CSS Hover สุดเจ๋งที่ใช้การตัดพื้นหลัง มาสก์ และ 3D — เทมานี อาฟิฟ
19. สารบัญที่สมบูรณ์แบบด้วย HTML + CSS — นิโคลัส ซี. ซาคัส
20. ลายนิ้วมือที่ใช้ CSS — คริส โคเยอร์

โพสต์ทั้งหมดที่เผยแพร่ในปี 2022 ประกอบขึ้น 4.8m การดูหน้าเว็บหรือเกี่ยวกับ ลด 7.8% ของการดูหน้าเว็บทั้งหมด บทความที่มีผู้เข้าชมมากที่สุดของเราคือบทความเก่าเสมอ คู่มือ Flexbox ซึ่งรวบรวม 5.8m ยอดวิวในปีนี้ ฉันชอบที่จะเห็นเนื้อหาใหม่ของเราแซงหน้าเนื้อหานั้น และเชื่อว่าจะเกิดขึ้นได้ง่ายหากเราเร่งเผยแพร่ ด้านหลังของคณิตศาสตร์ผ้าเช็ดปากที่นี่ แต่เราอาจมีการดูหน้าเว็บประมาณ 67 ล้านครั้งหากเราเผยแพร่บทความมากกว่า 540 บทความเพื่อให้ตรงกับจำนวนบทความที่ตีพิมพ์ในปีที่แล้ว

หากเราย้อนกลับไปสักสองสามก้าว เราจะเห็นบทความที่มีผู้เข้าชมมากที่สุดจากปีที่ผ่านมา โดยไม่คำนึงว่าบทความเหล่านั้นเผยแพร่เมื่อใด:

1. คู่มือฉบับสมบูรณ์สำหรับ Flexbox
2. คู่มือฉบับสมบูรณ์สำหรับกริด
3. ภาพพื้นหลังแบบเต็มหน้าที่สมบูรณ์แบบ
4. รูปร่างของ CSS
5. แบบสอบถามสื่อสำหรับอุปกรณ์มาตรฐาน
6. ใช้ SVG
7. วิธีปรับขนาด SVG
8. CSS สามเหลี่ยม
9. Gradient Borders ใน CSS
10. ตัดทอนสตริงด้วยจุดไข่ปลา
11. วิธีใช้ @font-face ใน CSS

ใช่เกือบจะเหมือนกับปีที่แล้ว และปีก่อน และปีก่อน และ…ก็เกือบ “Gradient Borders in CSS” เป็นฟีเจอร์ใหม่ box-shadow ทรัพย์สินนอกรายการ ทุกสิ่งทุกอย่างจากจุดทั้งสี่ในสถานที่ที่สลับกัน

เมื่อพูดถึงคุณสมบัติใน Almanac ฉันอยากเห็นสิ่งที่คุณอ้างถึงมากที่สุดในปีที่ผ่านมา:

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

หนึ่งหลอกที่ด้านบนและไม่มีอะไรนอกจากคุณสมบัติหลังจากนั้น น่าสนใจเนื่องจากตัวเลือกหลอกเชิงสัมพันธ์นั้นทำงานเหมือน :has(), :is()และ :where() เป็นเด็กใหม่ในบล็อก

จดหมายข่าว

ตัวเลขที่นี่ยุ่งเหยิงเกินกว่าจะสรุปได้อย่างลึกซึ้ง หลังจากย้ายไปที่ DigitalOcean เราต้องขัดเกลารายชื่อสมาชิกกว่า 91 คนเพื่อให้เป็นไปตามวัตถุประสงค์ และผลที่ตามมาก็คือจำนวนที่ลดลง หากคุณถูกคัดออกจากรายการ คุณสามารถสมัครใหม่ได้ที่นี่.

ข่าวดี? เรายังคงทำจดหมายข่าวอยู่! เราจริง ไล่มันกลับขึ้นมาในเดือนสิงหาคม หลังจากหายไปห้าเดือน เราอยู่ในจังหวะทุกสัปดาห์ แต่ตอนนี้เป็นเดือนละครั้งในขณะที่คุณเขียนมันอย่างแท้จริง ฉันหวังว่าจะชนมันกลับไปตีพิมพ์รายสัปดาห์ (ฉันคิดถึงคุณโรบิน!)

การปรับปรุงเว็บไซต์

ส่วนใหญ่เกี่ยวกับการทำให้เรือลอยอยู่ ถ้าฉันพูดตรงๆ นอกเหนือจากการปรับแต่งและการบำรุงรักษาเล็กน้อยแล้ว ไซต์นี้ค่อนข้างใกล้เคียงกับเวลานี้ของปีที่แล้ว

ที่จะเปลี่ยนแปลงครั้งใหญ่ในปี 2023 หากคุณติดตามประจำเดือนของเรา เบื้องหลัง CSScenes อัปเดต แล้วคุณก็รู้ว่าเรากำลังวางแผนที่จะโยกย้าย CSS-Tricks จาก WordPress ไปยัง CMS ดั้งเดิมแบบเดียวกับที่ DigitalOcean ใช้สำหรับทั้งหมด (ตัวเอก) เนื้อหาชุมชน.

งานนั้นเริ่มขึ้นเมื่อสองสามเดือนก่อนและน่าจะเสร็จภายในครึ่งปีแรก คุณสามารถพนันได้เลยว่าเราจะแจ้งให้คุณทราบตลอดเส้นทาง นอกจาก ก การออกแบบสด และแบ็คเอนด์ใหม่ก็ควรจะใช้งานได้ตามปกติ หากคุณมีคำถามใด ๆ เกี่ยวกับงานนั้นและความหมายของสิ่งตีพิมพ์ส่วนหน้าที่คุณชื่นชอบ โปรดติดต่อฉัน ในความคิดเห็น or ยิงอีเมลให้ฉัน.

หากคุณยังไม่ได้ดู นี่คือตัวอย่างบางส่วนที่ Logan Liffick ดีไซเนอร์ของเราได้รวบรวมไว้:

ทบทวนเป้าหมายปี 2021

โอ้ ฉันไม่กล้าแม้แต่จะมอง ความพยายามทั้งหมดที่มีในการรวมเข้ากับ DigitalOcean และค้นหาจังหวะใหม่ได้ครอบงำเวลาของทุกคน เหลือเพียงเล็กน้อยที่มีค่าที่จะทำลายเป้าหมายของ Chris ซึ่งได้แก่:

• ✅ เน้น SEO มากขึ้น ฉันจะให้เกรดเราผ่านที่นี่ ความจริงก็คือว่าคริสกับฉันขุดคุ้ยเรื่องนี้ก่อนที่จะซื้อกิจการ เราแทนที่ปลั๊กอิน Yoast SEO ด้วย RankMath โดยใช้ประโยชน์จากเครื่องมือในตัวแก้ไขเพื่อช่วยให้เราเรียนรู้วิธีเพิ่มประสิทธิภาพโพสต์ของเราสำหรับผลการค้นหา และเพื่อความชัดเจน: การเพิ่มปริมาณการเข้าชมเพื่อรายได้จากการสนับสนุนที่มากขึ้นนั้นมีประโยชน์น้อยกว่าการตระหนักว่าการค้นหาเป็นวิธีหลักที่ผู้อ่านเช่นคุณค้นหาเรา และช่วยให้คุณพบสิ่งที่ต้องการได้ง่ายขึ้น โดยเฉพาะอย่างยิ่งตอนนี้ที่เราได้รับการสนับสนุนโดย DigitalOcean และพึ่งพาผู้สนับสนุนน้อยกว่าที่เราเคยทำ
• 🚫 หนังสือดิจิตอลอีกเล่ม สวิงแล้วพลาด! อันที่จริง เราไม่เคยเหวี่ยงตั้งแต่แรก หรือก้าวเข้าไปในกล่องแป้งเพื่อเรื่องนั้น (นี่เป็นวิธีที่การเปรียบเทียบกีฬาทำงานหรือไม่) คริสตีพิมพ์หนังสือของ เคล็ดลับ CSS ที่ยิ่งใหญ่ที่สุด ในปี 2020 และทำให้การเป็นสมาชิก CSS-Tricks แบบชำระเงินมีข้อได้เปรียบ แนวคิดคือจะทำอีกในปีนี้ แต่เรายกเลิกการสมัครรับข้อมูลแบบชำระเงินและเปิด CSS Tricks ที่ยิ่งใหญ่ที่สุดให้ทุกคนได้เพลิดเพลินโดยไม่มีค่าใช้จ่าย
• ???? การทดลองโซเชียลมีเดียเพิ่มเติม ไม่! แต่นั่นอาจเป็นสิ่งที่ดีที่สุดเมื่อพิจารณาว่า Twitter อยู่ตรงไหนในวินาทีนี้ เราอาจถูกบังคับให้ทดลองในพื้นที่นี้ในปีหน้าด้วยความจำเป็นมากกว่าความสนใจ Twitter มักจะหยดลงในถังที่เป็นที่เลื่องลือของทราฟฟิก CSS-Tricks; มากเสียจนการลงทุนกับมันรู้สึกเหมือนใส่ไข่ของเราในตะกร้าผิด เอ้อถัง ฉันไม่รู้. ส่วนหนึ่งของฉันแค่อยากนั่งลงและดูว่าสิ่งต่าง ๆ สั่นคลอนอย่างไรก่อนที่จะตัดสินใจเลือกสิ่งใหม่หรือแตกต่าง

การตั้งเป้าหมายปี 2023

ปีใหม่ เป้าหมายใหม่ จริงไหม? ให้ฉันพูดสักสองสามคำในปากของทีมและพูดถึงสิ่งที่ฉันรู้สึกว่ามีความสำคัญสูงสุดสำหรับเราในปี 2023:

• การโยกย้ายไซต์ที่ราบรื่น ไม่มีอะไรจะทำให้ฉันมีความสุขมากขึ้น¹ มากกว่าการย้ายไปยังสถาปัตยกรรมของ DigitalOcean อย่างไร้สะดุด แต่เดี๋ยวก่อนเราทุกคนรู้ บางสิ่งบางอย่าง มักจะเกิดขึ้นเมื่อถึงเวลา ไซต์นี้มีบทความมากกว่า 7,000 บทความที่เขียนมานานกว่า 15 ปี และมี 1 บทความ9 เวอร์ชันของไซต์ ในช่วงเวลานั้น มีประเภทโพสต์ที่กำหนดเองมากมาย ฟิลด์ที่กำหนดเอง เทมเพลตเพจ ปลั๊กอินการทำงาน การผสานรวม และฐานข้อมูลที่มากกว่า 6GB เพื่อย้ายและแมปไปยังระบบที่มีอยู่ เป็นเรื่องดีที่เรามีทีมนักพัฒนาระดับแนวหน้าที่พร้อมรับมือ!
• เผยแพร่คู่มือใหม่ 1-2 รายการ ฉันชอบที่จะตั้งเป้าหมายให้สูงขึ้นจริง ๆ เราเปลี่ยนจากคู่มือใหม่เก้ารายการในปี 2020 เป็นคู่มือใหม่เล็กน้อยในปี 2021 และอีกหนึ่งรายการในปีที่แล้ว: Miriam's คู่มือฉบับสมบูรณ์เกี่ยวกับ CSS Cascade Layers. ฉันมีรายชื่ออีก 10 รายการที่ฉันชอบเขียน แต่คิดว่าเราจะตั้งค่าระดับต่ำเป็นพิเศษเมื่อพิจารณาจากผลงานล่าสุดของเรา ฉันได้กล่าวไว้ก่อนหน้านี้ว่าฉันชอบที่จะรวมงานของ Mojtaba ใน Almanac เข้ากับคู่มือ CSS Grid ที่มีอยู่ นั่นไม่ใช่งานเล็กๆ น้อยๆ และฉันจะนับรวมไปสู่เป้าหมายหากเราทำได้สำเร็จ
• ขยายปูมหลัง นี่คือแสงจันทร์ของฉัน ฉันชอบที่จะเห็นเอกสารประเภทอื่นๆ ในนั้น เรามีตัวเลือกหลอกและคุณสมบัติซึ่งยอดเยี่ยมและเป็นมาตลอด แต่เดี๋ยวก่อน ลองนึกถึงสิ่งอื่นๆ ทั้งหมดที่เราอาจมีในนั้น: ฟังก์ชัน at-rules หน่วย ตัวเลือก ค่าคุณสมบัติ ฯลฯ เราแค่เกาพื้นผิวของสิ่งที่อาจเข้าไปอยู่ในนั้นเท่านั้น! ถ้าเราได้หนึ่งในนั้น ฉันจะเข้าร่วม place-self: heaven.

ขอบคุณมาก so มาก!

นี่คืองานในฝันของฉัน และฉันคงทำไม่ได้ถ้าไม่มีผู้อ่านเช่นคุณ ฉันไม่อยากจะเชื่อเลยว่าเป็นเวลาแปดปีแล้วตั้งแต่บทความแรกของฉันได้รับการเผยแพร่และฉันยังอยู่ที่นี่ ทำงานกับ เรียนรู้จากจิตใจที่ฉลาดที่สุดในสาขาของเรา ฉันสามารถเดินเตร่ (มากกว่าที่ฉันมี) ว่าชุมชน CSS-Tricks มีความหมายกับฉันมากเพียงใด แต่สิ่งที่ตามมาจริงๆ ก็คือ... ขอบคุณ ขอบคุณ ขอขอบคุณ. จากก้นบึ้งของหัวใจของฉัน ขอขอบคุณ.

และขอขอบคุณคนดีทุกคนที่นี่ที่ DigitalOcean ซึ่งเป็นบ้านที่ดีสำหรับ CSS-Tricks ไฮไฟฟ์พิเศษเป็นพิเศษสำหรับ Haley Mills, Sydney Rossman Reich, Bradley Kouchi, Karen Digi, David Berg, Matt Crowley, Logan Liffick และ Kirstyn Kellogg ที่ทำให้ฉันรู้จักตัวเองอย่างรวดเร็วและทำให้ฉันรู้สึกยินดีมากที่นี่ เป็นสถานที่ที่ดีที่จะ

ไปข้างหน้าเราไป!