Cảm Ơn Bạn (Bản 2022)

Bạn biết đấy, đây là thời điểm trong năm mà Chris thường xuất bản một bài phản ánh lớn về năm qua. Các đầu tiên được xuất bản vào năm 2007, cùng năm với CSS-Tricks bắt đầu, và nó tiếp tục đến hết năm 2021 không bỏ lỡ một nhịp nào. Bản thân tôi đã từng là người đọc Thủ thuật CSS trong suốt những năm đó, tôi không muốn thấy sự thay đổi đó.

Vì thế chúng ta ở đây! Năm 2022 chắc chắn là một năm tồi tệ khi quá trình chuyển đổi diễn ra. Vào thời điểm này năm ngoái, chúng tôi đang hướng tới một số mục tiêu cho năm tới (mà chúng tôi sẽ đạt được) nhưng cuối cùng lại kết thúc việc tham gia DigitalOcean. Đó là một sự thay đổi lớn trên biển (ý định chơi chữ) nhưng bạn vẫn gắn bó với chúng tôi trong suốt chặng đường. Điều đó thực sự có ý nghĩa rất lớn đối với tôi khi có rất nhiều bạn đến đây để đọc những thứ mà tôi và một loạt các nhà văn khách mời khác đã xuất bản ở đây. Nó không phải là một cộng đồng (hoặc bất kỳ niềm vui nào) nếu không có bạn.

Cảm ơn bạn!

Đây là bài đăng cuối cùng chúng tôi xuất bản trong năm nay khi chúng tôi treo tấm biển Gone Fishin' cho kỳ nghỉ lễ. Chúng tôi sẽ trở lại 9 Tháng Giêng với nhiều nội dung mới ra lò.

OK, đây là nơi chúng tôi bắt đầu đào sâu vào các phân tích của trang web. Đó là điều chúng tôi luôn minh bạch và sẽ tiếp tục làm. Không giống như số của chúng tôi nằm trong một số hộp đen ngoài giới hạn và hy vọng rằng việc chia sẻ chúng sẽ giúp ích cho bạn và doanh nghiệp của bạn bằng cách nào đó.

giao thông tổng thể

Nhìn chung, Google Analytics đang hiển thị tổng cộng 64m số lần xem trang cho cả năm. đó là cáchyyyy giảm so với mức 88m của năm ngoái, điều này thoạt nhìn rất đáng báo động. Ý tôi là, ai muốn xem một 27% giảm lưu lượng truy cập hàng năm?

Nhưng có lý do chính đáng cho điều đó bởi vì chúng tôi đã xuất bản một cáchyyy ít nội dung hơn trong năm nay. Chúng ta đều biết Chris là một nhà văn giỏi (và vẫn là, tất nhiên), thường đăng nhiều bài viết mỗi ngày. Có vẻ như chúng tôi đã mất đi người đóng góp hiệu quả nhất trong phần lớn thời gian của năm. Hãy so sánh hoạt động xuất bản trong vài năm gần đây:

• 2020: mục 1,183
• 2021: mục 890
• 2022: mục 390

Số lần xem trang giảm 27% ít đáng lo ngại hơn khi chúng tôi xuất bản 43% ít bài viết hơn năm ngoái, và một con số khổng lồ 67% ít hơn tổng số của năm 2020.

Hmm, tôi không cảm thấy mình đang làm việc ít hơn 67%…

Và tất cả những điều này đi kèm với lời cảnh báo rằng đây chỉ là những gì chúng tôi nhận được từ Google Analytics. Trong những năm qua, Chris đã so sánh những con số đó với số liệu thống kê từ CloudFlare (lớp CDN nằm trên cùng của trang web) và jetpack (plugin kết nối trang web WordPress tự lưu trữ của chúng tôi với các tính năng SaaS-y của WordPress.com). Các kết quả luôn không nhất quán đến mức tôi thậm chí không buồn nhìn vào khoảng thời gian này. (Được rồi, được rồi, có lẽ chỉ là Jetpack… hiển thị 59.9 triệu lượt xem trang — kỳ lạ hơn tổng số 2021 triệu của năm 55.)

Các bài báo, theo các con số

Đây là điều tôi luôn mong chờ mỗi năm! Dưới đây là mười bài báo hàng đầu vào năm 2022 đã được xuất bản vào năm 2022:

1. 6 ý tưởng sáng tạo cho hiệu ứng di chuột liên kết CSS — Harshil Patel
2. Giải thích 10 dòng đầu tiên của mã nguồn Twitter cho tôi — Anand Chowdhary
3. Công cụ Front-End hấp dẫn nhất năm 2021 là gì? —Louis Lazaris
4. Thay thế hộp thoại JavaScript bằng phần tử hộp thoại HTML mới — Mads Stoumann
5. Nói Xin chào với menu chọn, một Phần tử chọn hoàn toàn có thể tạo kiểu — Patrick Brosset
6. Gửi yêu cầu HTTP một cách đáng tin cậy khi người dùng rời khỏi trang —Alex MacArthur
7. grid-template-columns — Mojtaba Seedi
8. Hướng dẫn hoàn chỉnh về lớp xếp tầng CSS — Miriam Suzanne
9. Truy vấn cơ sở dữ liệu CSS? Chắc chắn chúng tôi có thể! —Chris Coyier
10. CSS-Tricks đang tham gia DigitalOcean! —Chris Coyier

Tôi thực sự ngạc nhiên rằng cái cuối cùng không cao hơn trong danh sách. Và tôi thực sự thích thú khi thấy một chiếc từ Alamanac ở đó, đặc biệt là vì Mojtaba đã bỏ qua tất cả các thuộc tính Lưới CSS trong hơn một năm rưỡi qua và anh ấy đã đánh bật nó ra khỏi sân bóng. Tôi đã nghĩ rằng mình có khả năng xử lý lưới tốt cho đến khi tôi bắt đầu đọc tất cả số vàng cốm mà anh ấy đã đóng gói vào từng tài sản. Có rất nhiều thứ để học trong đó và Mojtaba có sở trường giải thích rõ ràng những điều phức tạp. Tôi hy vọng sẽ cập nhật Hướng dẫn lưới CSS với tất cả những thông tin mới đó (nhưng nhiều hơn về điều đó một chút).

Tôi cũng thích xem hướng dẫn CSS Cascade Layers trong đó! Tôi đã rất vui khi làm việc với Miriam về nó. Nếu bạn không biết nó, cô ấy là một biên tập viên cho thông số kỹ thuật. Thật là một điều thú vị (và thực sự là vinh dự) khi được lưu trữ tác phẩm của cô ấy ở đây và cung cấp cho tất cả chúng ta để đánh dấu và tham khảo.

Đây là 11-20 cho các cú đá:

11. Hoạt hình với JavaScript cơ bản —Md Shuvo
12. Flutter dành cho các nhà phát triển Web Front-End —Obumuneme Nwabude
13. Lưới CSS và hình dạng tùy chỉnh, Phần 1 — Temani Afif
14. Viết HTML, cách HTML (Không phải cách XHTML) — Jens Oliver Meiert
15. Tham quan 4 tính năng màu CSS mới —Chris Coyier
16. Hiệu ứng Di chuột tuyệt vời sử dụng thuộc tính nền — Temani Afif
17. Hãy tạo một ngôn ngữ lập trình tí hon — Bác sĩ Shuvo
18. Hiệu ứng di chuột CSS thú vị sử dụng cắt nền, mặt nạ và 3D — Temani Afif
19. Một mục lục hoàn hảo với HTML + CSS — Nicholas C. Zakas
20. Dấu vân tay dựa trên CSS —Chris Coyier

Tất cả các bài đăng đã được xuất bản vào năm 2022 tạo thành 4.8m số lần xem trang hoặc về 7.8% của tất cả các lần xem trang. Bài viết được xem nhiều nhất của chúng tôi luôn là bài viết cũ Hướng dẫn Flexbox đã thu được 5.8m lượt xem trong năm nay. Tôi muốn thấy nội dung mới của chúng tôi vượt xa mục đó và tôi tin rằng điều đó sẽ dễ dàng xảy ra nếu chúng tôi tiếp tục duy trì tốc độ xuất bản. Quay lại bài toán khăn ăn ở đây, nhưng chúng tôi có thể đã có khoảng 67 triệu lượt xem trang nếu chúng tôi đã xuất bản thêm 540 bài báo để phù hợp với số lượng bài báo đã xuất bản của năm ngoái.

Nếu lùi lại một vài bước, thì chúng ta có thể thấy các bài báo được xem nhiều nhất trong năm qua, bất kể chúng được xuất bản vào thời điểm nào:

1. Hướng dẫn đầy đủ về Flexbox
2. Hướng dẫn đầy đủ về Grid
3. Hình nền toàn trang hoàn hảo
4. Hình dạng của CSS
5. Truy vấn phương tiện cho các thiết bị tiêu chuẩn
6. Sử dụng SVG
7. Cách chia tỷ lệ SVG
8. Tam giác CSS
9. Đường viền chuyển màu trong CSS
10. Cắt xén chuỗi với Ellipsis
11. Cách Sử dụng @font-face trong CSS

Đúng, gần giống với năm ngoái. Và năm trước. Và năm trước. Và… à, gần như thế. “Đường viền chuyển sắc trong CSS” là tính năng mới, vượt qua box-shadow tài sản ra khỏi danh sách. Mọi thứ khác từ vị trí thứ tư trên chỉ đổi chỗ cho nhau.

Nói về các thuộc tính trong Almanac, tôi muốn xem những gì bạn đã tham khảo nhiều nhất trong năm qua:

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

Một giả ở trên cùng và không có gì ngoài các thuộc tính sau đó. Thật thú vị, với chức năng bộ chọn giả quan hệ như :has(), :is()và :where() là những đứa trẻ mới trong khối.

Đăng ký bản tin

Những con số ở đây quá lộn xộn để đưa ra bất kỳ kết luận sâu sắc nào. Sau khi chuyển sang DigitalOcean, chúng tôi đã phải xóa danh sách hơn 91 nghìn người đăng ký vì mục đích tuân thủ và kết quả là con số này đã giảm mạnh. Nếu bạn bị loại khỏi danh sách, bạn có thể đăng ký lại tại đây.

Tin tốt? Chúng tôi vẫn đang làm bản tin! chúng tôi thực sự đã kích hoạt nó trở lại vào tháng XNUMX sau năm tháng gián đoạn. Chúng tôi đã theo nhịp hàng tuần, nhưng bây giờ là mỗi tháng một lần trong khi bạn thực sự là tác giả của nó. Tôi chắc chắn hy vọng sẽ đưa nó trở lại một ấn phẩm hàng tuần. (Anh nhớ em, Robin!)

Cập nhật trang web

Thành thật mà nói, nó chủ yếu là giữ cho con tàu nổi. Ngoài một số điều chỉnh nhỏ và bảo trì, trang web gần như giống như vào thời điểm này năm ngoái.

Điều đó sẽ thay đổi lớn vào năm 2023. Nếu bạn đã cập nhật thông tin hàng tháng của chúng tôi Đằng sau CSScenes cập nhật, thì bạn biết rằng chúng tôi đang có kế hoạch di chuyển các Thủ thuật CSS từ WordPress sang cùng một CMS đơn giản mà DigitalOcean sử dụng cho tất cả (xuất sắc) của nó nội dung cộng đồng.

Công việc đó đã bắt đầu từ vài tháng trước và sẽ được hoàn thành trong nửa đầu năm nay. Bạn có thể đặt cược rằng chúng tôi sẽ cập nhật cho bạn trong suốt quá trình. bên cạnh một thiết kế mới và một back-end mới, nó sẽ hoạt động bình thường. Nếu bạn có bất kỳ câu hỏi nào về công việc đó và ý nghĩa của nó đối với ấn phẩm đầu cuối yêu thích của bạn, vui lòng liên hệ với tôi trong các bình luận or bắn cho tôi một email.

Nếu bạn chưa xem, thì đây là một số tác phẩm mà nhà thiết kế của chúng tôi, Logan Liffick, đã tổng hợp:

xem xét mục tiêu năm 2021

Oy, tôi do dự thậm chí nhìn. Tất cả những nỗ lực cần thiết để tích hợp với DigitalOcean và tìm ra một nhịp điệu mới đã chi phối thời gian của mọi người, để lại một chút quý giá để đạt được mục tiêu của Chris, đó là:

• ✅ Tập trung vào SEO nhiều hơn. Tôi sẽ cho chúng tôi điểm vượt qua ở đây. Sự thật là Chris và tôi đã tìm hiểu sâu về vấn đề này trước khi mua lại. Chúng tôi đã thay thế plugin Yoast SEO bằng RankMath, tận dụng các công cụ trong trình chỉnh sửa của nó để giúp chúng tôi tìm hiểu cách tối ưu hóa các bài đăng của mình cho kết quả tìm kiếm. Và rõ ràng là: việc tăng lưu lượng truy cập để có thêm doanh thu tài trợ không quan trọng bằng việc thừa nhận rằng tìm kiếm là cách chính mà những độc giả như bạn tìm thấy chúng tôi và giúp bạn tìm thấy những gì mình đang tìm kiếm dễ dàng hơn. Điều đó đặc biệt đúng khi chúng tôi được hỗ trợ bởi DigitalOcean và ít dựa vào tài trợ hơn trước đây.
• 🚫 Một cuốn sách kỹ thuật số khác. Đu và bỏ lỡ! Chà, chúng tôi chưa bao giờ thực sự xoay người ngay từ đầu, hoặc bước vào hộp của người đánh bóng vì vấn đề đó. (Đây có phải là cách hoạt động của phép loại suy trong thể thao không?) Chris đã xuất bản một cuốn sách về Thủ thuật CSS hay nhất vào năm 2020 và biến nó thành một đặc quyền khi trở thành người đăng ký CSS-Tricks trả phí. Ý tưởng là thực hiện một kế hoạch khác trong năm nay, nhưng chúng tôi đã loại bỏ đăng ký trả phí và mở miễn phí Thủ thuật CSS tuyệt vời nhất cho mọi người thưởng thức.
• 🚫 Thử nghiệm phương tiện truyền thông xã hội nhiều hơn. Không! Nhưng đó có thể là điều tốt nhất, khi xem xét vị trí của Twitter ngay lúc này. Chúng tôi có thể buộc phải thử nghiệm trong lĩnh vực này vào năm tới vì lý do cần thiết hơn là sở thích. Twitter luôn nhỏ giọt trong nhóm lưu lượng truy cập CSS-Tricks; nhiều đến mức đầu tư vào nó giống như bỏ trứng vào nhầm giỏ. Tôi không biết. Một phần trong tôi chỉ muốn ngồi khoanh tay và xem mọi thứ diễn ra như thế nào trước khi quyết định bất cứ điều gì mới hoặc khác biệt.

đặt mục tiêu 2023

Năm mới, mục tiêu mới, phải không? Cho phép tôi đặt một loạt các từ vào miệng của nhóm và dự đoán những gì tôi cảm thấy là ưu tiên hàng đầu đối với chúng tôi trong năm 2023:

• Di chuyển trang web suôn sẻ. Không có gì có thể làm cho tôi hạnh phúc hơn¹ hơn là di chuyển dễ dàng sang kiến ​​trúc của DigitalOcean. Nhưng thôi nào, chúng ta đều biết một cái gì đó luôn luôn xuất hiện khi nó đi thời gian. Trang web này có hơn 7,000 bài báo đã được viết trong hơn 15 năm và đã có 19 phiên bản của trang web trong khoảng thời gian đó. Có rất nhiều loại bài đăng tùy chỉnh, trường tùy chỉnh, mẫu trang, plugin chức năng, tích hợp và cơ sở dữ liệu trên 6 GB để chuyển qua và ánh xạ tới hệ thống hiện có. Điều tốt là chúng tôi có một nhóm các nhà phát triển hàng đầu ở đây để đảm nhận điều đó!
• Xuất bản 1-2 hướng dẫn mới. Tôi thực sự muốn nhắm mục tiêu cao hơn. Chúng tôi đã đi từ chín hướng dẫn mới vào năm 2020 thành một hướng dẫn mới vào năm 2021 và một hướng dẫn khác trong năm qua: Miriam's Hướng dẫn đầy đủ về CSS Cascade Layers. Tôi có một danh sách gồm 10 điều nữa mà tôi muốn viết, nhưng nghĩ rằng chúng tôi sẽ đặt tiêu chuẩn cực thấp dựa trên thành tích gần đây của chúng tôi. Tôi đã đề cập trước đó rằng tôi muốn kết hợp công việc của Mojtaba trong Niên giám vào hướng dẫn Lưới CSS hiện có. Đó là một khối lượng công việc không hề nhỏ và tôi sẽ tính nó vào mục tiêu nếu chúng ta có thể hoàn thành nó.
• Mở rộng Almanac. Đây là moonshot của tôi. Tôi muốn xem nhiều loại tài liệu hơn trong đó. Chúng tôi có các thuộc tính và bộ chọn giả, điều này thật tuyệt và luôn luôn như vậy. Nhưng, trời ạ, hãy nghĩ đến tất cả những thứ khác mà chúng ta có thể có trong đó: hàm, quy tắc, đơn vị, bộ chọn, giá trị thuộc tính, v.v. Nếu chúng ta có được dù chỉ một trong số đó, tôi sẽ tham gia place-self: heaven.

Cảm ơn bạn rất, vì vậy, so nhiều!

Đây là công việc mơ ước của tôi và tôi sẽ không có nó nếu không có những độc giả như bạn. Tôi không thể tin rằng đã tám năm kể từ khi bài báo đầu tiên của tôi được xuất bản và tôi vẫn ở đây, làm việc với học hỏi từ những bộ óc thông minh nhất trong lĩnh vực của chúng tôi. Tôi có thể lan man (nhiều hơn những gì tôi đã có) về việc cộng đồng Thủ thuật CSS có ý nghĩa như thế nào đối với tôi, nhưng ý nghĩa thực sự của nó là… cảm ơn, cảm ơn, cảm ơn bạn. Từ tận đáy lòng của tôi, cảm ơn bạn.

Và cảm ơn tất cả những người tốt ở đây tại DigitalOcean, những người đã tạo ra một ngôi nhà tuyệt vời cho các thủ thuật CSS. Những cú đập tay đặc biệt đặc biệt tới Haley Mills, Sydney Rossman Reich, Bradley Kouchi, Karen Digi, David Berg, Matt Crowley, Logan Liffick và Kirstyn Kellogg vì đã giúp tôi bắt kịp tốc độ và khiến tôi cảm thấy rất được chào đón ở đây. Đó là một nơi tuyệt vời để được.

Tiến lên, chúng ta đi!