알다시피, 지금은 Chris가 일반적으로 지난 해에 대한 큰 반성문을 게시하는 시기입니다. 그만큼 첫 번째 CSS-Tricks가 시작된 해인 2007년에 출판되었으며, 2021년까지 계속 비트를 놓치지 않고. 그 동안 CSS-Tricks 독자였기 때문에 이러한 변화를 보고 싶지 않았습니다.
자, 여기 있습니다! 2022년은 전환이 진행되는 한 엄청난 해였습니다. 작년 이맘때, 우리는 다가올 해의 몇 가지 목표를 내다보고 있었지만 결국 DigitalOcean에 합류하게 되었습니다. 그것은 엄청난 바다 변화(말장난 의도)였지만 당신은 끝까지 우리와 함께했습니다. 많은 분들이 저와 수많은 다른 객원 작가들이 여기에 게시한 내용을 읽기 위해 이곳에 온다는 것은 저에게 정말 큰 의미가 있습니다. 여러분이 없는 커뮤니티(또는 재미)가 아닙니다.
감사합니다!
이것은 연휴를 맞아 Gone Fishin' 간판을 걸면서 올해 게시하는 마지막 게시물입니다. 우리는 돌아올거야 9년 XNUMX월 오븐에서 갓 꺼낸 풍부한 콘텐츠와 함께.
자, 여기에서 사이트의 분석을 파헤치기 시작합니다. 그것은 우리가 항상 투명하게 해왔고 앞으로도 계속 할 것입니다. 우리의 전화번호가 금지된 블랙박스에 있는 것과는 다릅니다. 이 번호를 공유하는 것이 귀하와 귀하의 비즈니스에 도움이 되기를 바랍니다.
전체 트래픽
전반적으로 Google Analytics는 총 64m XNUMX년 내내 페이지뷰. 그건 어이이이이이 작년의 88m보다 낮아져 언뜻보기에 놀랍습니다. 내 말은, 보고 싶은 사람은 27% 전년 대비 트래픽 감소?
하지만 그럴만한 이유가 있습니다. 어이이이이이 올해는 콘텐츠가 적습니다. 우리 모두는 Chris가 다작 작가라는 것을 알고 있습니다. 여전히, 물론), 종종 하루에 여러 게시물을 뱉어냅니다. 올해 대부분의 기간 동안 가장 생산적인 기여자를 잃은 것과 같습니다. 지난 몇 년간의 출판 활동을 비교해 보겠습니다.
- 2020 : 1,183 항목
- 2021 : 890 항목
- 2022 : 390 항목
페이지뷰의 27% 감소는 우리가 게시한 것을 고려하면 훨씬 덜 우려됩니다. 43% 작년보다 적은 기사와 엄청난 67% 2020년의 전체 합계보다 적습니다.
흠, 일을 67% 적게 하는 것 같지는 않은데…
그리고 이 모든 것은 우리가 Google 웹로그 분석에서 얻은 것일 뿐이라는 경고와 함께 제공됩니다. 지난 몇 년 동안 Chris는 이러한 수치를 Cloudflare (사이트 상단에 있는 CDN 레이어) 및 제트 팩 (자체 호스팅 WordPress 사이트를 WordPress.com의 SaaS-y 기능에 연결하는 플러그인). 이번에는 주위를 둘러볼 생각조차 하지 않을 정도로 결과는 항상 일관되게 일관성이 없습니다. (좋아요, 어쩌면 그냥 Jetpack… 59.9만 페이지 뷰를 보여주는 — 이상하게도 2021년의 총 55만 페이지보다 많습니다.)
숫자로 보는 기사
매년 기대되는 일입니다! 다음은 2022년 상위 XNUMX개 기사입니다. 2022년에 출판되었다:
- CSS 링크 호버 효과를 위한 6가지 창의적인 아이디어 — 하실 파텔
- Twitter 소스 코드의 처음 10줄을 나에게 설명하십시오. — 아난드 차우드하리
- 2021년에 가장 핫한 프런트 엔드 도구는 무엇이었습니까? — 루이 라자리스
- JavaScript 대화 상자를 새 HTML 대화 상자 요소로 바꾸기 — 매즈 스토우만
- 완전한 스타일이 가능한 선택 요소인 selectmenu에 Hello라고 말하세요. — 패트릭 브로셋
- 사용자가 페이지를 떠날 때 안정적으로 HTTP 요청 보내기 — 알렉스 맥아더
grid-template-columns— 모즈타바 세예디- CSS 캐스케이드 레이어에 대한 완벽한 가이드 — 미리암 수잔
- CSS 데이터베이스 쿼리? 물론, 우린 할 수있어! — 크리스 코이어
- CSS-Tricks가 DigitalOcean에 합류합니다! — 크리스 코이어
나는 실제로 마지막 것이 목록에서 더 높지 않은 것에 놀랐습니다. 그리고 특히 Mojtaba가 모든 CSS 그리드 속성 지난 XNUMX년 반 동안 그는 그것을 야구장 밖으로 두드렸다. 나는 그가 각 부동산에 넣은 모든 금 덩어리를 읽기 시작할 때까지 그리드를 잘 처리한다고 생각했습니다. 거기에는 배울 것이 너무 많고 Mojtaba는 복잡한 것을 명확하게 설명하는 요령이 있습니다. 업데이트를 희망합니다 CSS 그리드 가이드 그 모든 신선한 정보와 함께.
거기에서 CSS Cascade Layers 가이드를 보는 것도 좋아합니다! Miriam과 함께 작업하는 것이 너무 즐거웠습니다. 당신이 그것을 몰랐다면, 그녀는 사양의 편집자입니다.. 여기에서 그녀의 작업을 호스팅하고 우리 모두가 즐겨찾기에 추가하고 참조할 수 있도록 하는 것은 대접(그리고 정말 영광입니다)입니다.
킥에 대한 11-20은 다음과 같습니다.
- 기본 JavaScript를 사용한 애니메이션 —MD 슈보
- 프론트엔드 웹 개발자를 위한 Flutter —Obumuneme Nwabude
- CSS 그리드 및 사용자 정의 모양, 1부 — 테마니 아피프
- HTML 작성, HTML 방식(XHTML 방식 아님) — 옌스 올리버 마이어트
- 4가지 새로운 CSS 색상 기능에 대한 간략한 둘러보기 — 크리스 코이어
- 배경 속성을 사용하는 멋진 호버 효과 — 테마니 아피프
- 작은 프로그래밍 언어를 만들어 봅시다 — MD 슈보
- 배경 클리핑, 마스크 및 3D를 사용하는 멋진 CSS 호버 효과 — 테마니 아피프
- HTML + CSS를 사용한 완벽한 목차 — 니콜라스 C. 자카스
- CSS 기반 지문 — 크리스 코이어
2022년에 게시된 모든 게시물이 구성됩니다. 4.8m 페이지뷰 또는 약 7.8% 모든 페이지뷰의 가장 많이 본 기사는 항상 ol'입니다. 플렉스박스 가이드 얻은 5.8m 올해 전망. 나는 우리의 새로운 콘텐츠가 그 한 항목을 능가하는 것을 보고 싶고, 우리가 게시 속도를 유지했다면 쉽게 일어날 수 있었을 것이라고 믿습니다. 여기 냅킨 수학으로 돌아가서, 작년에 게시된 기사 수와 일치하도록 67개의 기사를 더 게시했다면 페이지뷰는 약 540만 회였을 것입니다.
몇 단계 뒤로 물러나면 게시된 시기에 관계없이 작년에 가장 많이 본 기사를 볼 수 있습니다.
- Flexbox에 대한 완전한 가이드
- 그리드에 대한 완벽한 가이드
- 완벽한 전체 페이지 배경 이미지
- CSS의 모양
- 표준 장치에 대한 미디어 쿼리
- SVG 사용
- SVG를 확장하는 방법
- CSS 삼각형
- CSS의 그라데이션 테두리
- 줄임표로 문자열 자르기
- 이용 방법
@font-faceCSS에서
네, 작년과 거의 동일합니다. 그리고 그 전 해. 그리고 그 전 해. 그리고… 음, 거의. "CSS의 그라데이션 테두리"가 새로 추가되었습니다. box-shadow 목록에서 재산. 단지 교환된 장소에 있는 네 자리의 다른 모든 것.
Almanac의 속성에 대해 말하면서 작년에 가장 많이 참조한 항목을 보고 싶습니다.
::after/::beforetransitionbox-shadowscrollbarjustify-contentflex-wrapgapoverflow-wrapanimationwhite-space
맨 위에 하나의 의사가 있고 그 뒤에는 속성만 있습니다. 흥미로운 점은 관계형 의사 선택기 기능이 다음과 같다는 점입니다. :has(), :is()및 :where() 블록에 새로운 아이들입니다.
MMCC 뉴스레터
여기에 있는 숫자는 통찰력 있는 결론을 도출하기에는 너무 지저분합니다. DigitalOcean으로 전환한 후 규정 준수를 위해 91명 이상의 구독자 목록을 삭제해야 했고 그 결과 그 수가 급감했습니다. 목록에서 삭제된 경우 여기에서 다시 구독할 수 있습니다.
좋은 뉴스? 우리는 여전히 뉴스레터를 하고 있습니다! 우리는 실제로 XNUMX월에 다시 해고 XNUMX개월의 공백 끝에. 우리는 매주 케이던스에 있었지만 지금은 당신이 진정으로 그것을 작성하는 동안 한 달에 한 번입니다. 나는 그것을 주간 간행물로 되돌리기를 바랍니다. (보고싶다, 로빈!)
사이트 업데이트
솔직히 말해서 배를 떠 있게 하는 것이 대부분이었습니다. 약간의 조정 및 유지 관리를 제외하고 사이트는 작년 이맘때와 거의 동일합니다.
2023년에는 큰 변화가 있을 것입니다. CSS씬 뒤에 업데이트를 통해 WordPress의 CSS-Tricks를 DigitalOcean이 모든 (별) 커뮤니티 콘텐츠.
이 작업은 몇 달 전에 시작되었으며 상반기 내에 완료되어야 합니다. 계속해서 최신 소식을 전해드리겠습니다. 게다가 신선한 디자인 그리고 새로운 백엔드, 평소와 같이 비즈니스가 되어야 합니다. 그 작업에 대해 질문이 있고 좋아하는 프론트엔드 간행물의 의미가 있다면 저에게 연락해 주세요. 의견에 or 나에게 이메일을 쏴.
아직 보지 못하셨다면 디자이너인 Logan Liffick이 함께 만든 몇 가지 구성 요소가 있습니다.
2021 목표 검토
아, 보기조차 꺼려지네요. DigitalOcean과 통합하고 새로운 리듬을 찾는 데 소요된 모든 노력이 모든 사람의 시간을 지배했으며 Chris의 목표를 달성하기 위한 소중한 시간은 거의 남지 않았습니다.
- ✅ 더 많은 SEO 초점. 여기서 합격점을 주겠습니다. 사실 Chris와 저는 인수 전에 이미 이 문제에 발을 디디고 있었습니다. 우리는 Yoast SEO 플러그인을 RankMath로 교체하여 검색 결과에 대한 게시물을 최적화하는 방법을 배우는 데 도움이 되는 편집기 내 도구를 활용했습니다. 더 많은 스폰서십 수익을 위해 트래픽을 늘리는 것이 아니라 검색이 귀하와 같은 독자가 우리를 찾는 주요 방법임을 인식하고 귀하가 원하는 것을 더 쉽게 찾을 수 있도록 하는 것입니다. DigitalOcean의 지원을 받고 예전보다 후원에 대한 의존도가 훨씬 낮아진 지금은 특히 그렇습니다.
- 🚫 또 다른 디지털 책. 스윙과 미스! 글쎄, 우리는 처음부터 실제로 휘두르거나 그 문제에 대해 타자석에 들어간 적이 없습니다. (이것이 스포츠 비유가 작동하는 방식입니까?) Chris는 다음과 같은 책을 출판했습니다. 최고의 CSS 트릭 2020년에 유료 CSS-Tricks 구독자의 특전으로 만들었습니다. 아이디어는 올해에 한 번 더 하는 것이었지만 유료 구독을 없애고 모든 사람이 무료로 즐길 수 있도록 The Greatest CSS Tricks를 열었습니다.
- 🚫 더 많은 소셜 미디어 실험. 아니요! 그러나 트위터가 현재 어디에 있는지를 고려하면 그것이 최선일 수 있습니다. 우리는 내년에 관심보다는 필요에 따라 이 분야에서 실험을 하게 될지도 모릅니다. Twitter는 항상 CSS-Tricks 트래픽이라는 속담의 양동이에 뚝뚝 떨어졌습니다. 너무 많이 투자하면 계란을 잘못된 바구니, 어 양동이에 넣는 것처럼 느껴집니다. 나도 몰라. 내 일부는 새롭거나 다른 것을 결정하기 전에 내 손에 앉아서 상황이 어떻게 흔들리는 지 확인하고 싶어합니다.
2023 목표 설정
새해, 새로운 목표죠? 팀의 입에 여러 단어를 넣고 2023년으로 향하는 우리에게 최우선 순위라고 생각하는 것을 예상해 보겠습니다.
- 원활한 사이트 마이그레이션. 아무것도 나를 행복하게 만들 수 없습니다1 딸꾹질 없이 DigitalOcean의 아키텍처로 이전하는 것보다 하지만 자, 우리 모두 알고 있습니다 무언가 갈 시간이 되면 항상 나온다. 이 사이트에는 7,000년 동안 작성된 15개 이상의 기사가 있으며 1사이트의 9개 버전 그 시간대에. 사용자 지정 게시물 유형, 사용자 지정 필드, 페이지 템플릿, 기능 플러그인, 통합 및 기존 시스템으로 이동하고 매핑할 수 있는 6GB 이상의 데이터베이스가 너무 많습니다. 일류 개발자 팀이 여기에 있어 다행입니다!
- 1-2개의 새 가이드를 게시합니다. 사실은 더 높은 곳을 목표로 하고 싶습니다. 우리는 2020년에 2021명의 새로운 가이드에서 XNUMX년에 하찮은 XNUMX명의 새로운 가이드로, 그리고 작년에 또 다른 가이드인 Miriam's CSS 캐스케이드 레이어 완전 가이드. 쓰고 싶은 목록이 10개 더 있지만 최근 실적을 감안할 때 기준을 매우 낮게 설정해야 할 것 같습니다. 이전에 Almanac에 있는 Mojtaba의 작업을 기존 CSS 그리드 가이드에 통합하고 싶다고 언급했습니다. 그것은 적은 양의 작업이 아니며 우리가 해낼 수 있다면 목표를 향해 계산할 것입니다.
- 연감을 확장합니다. 이것은 나의 달빛입니다. 거기에 더 많은 유형의 문서를보고 싶습니다. 우리는 의사 선택자와 속성을 가지고 있으며 이는 훌륭하고 항상 그래왔습니다. 그러나 이런, 우리가 거기에 가질 수 있는 다른 모든 것, 즉 함수, at-규칙, 단위, 선택자, 속성 값 등을 생각해보세요. 우리가 그 중 하나라도 얻는다면 나는
place-self: heaven.
감사합니다. so 많은!
이것은 내 꿈의 직업이며 당신과 같은 독자 없이는 가질 수 없습니다. 제 첫 번째 기사가 출판된 지 XNUMX년이 지났는데도 제가 여전히 여기에 있다는 것이 믿기지 않습니다. 작업 우리 분야에서 가장 밝은 마음에서 배웁니다. 나는 CSS-Tricks 커뮤니티가 나에게 얼마나 큰 의미가 있는지에 대해 (이미 가지고 있는 것보다 더 많이) 장황하게 말할 수 있지만, 실제로 결론은... 감사합니다, 감사합니다, 감사를 표하고 싶습니다.. 진심으로, 감사를 표하고 싶습니다..
그리고 CSS-Tricks를 위한 훌륭한 집을 만들어준 DigitalOcean의 모든 훌륭한 사람들에게 감사드립니다. Haley Mills, Sydney Rossman Reich, Bradley Kouchi, Karen Digi, David Berg, Matt Crowley, Logan Liffick, Kirstyn Kellogg에게 특별한 하이파이브를 보냅니다. 좋은 곳입니다.
앞으로 가자!
