Gracias (Edición 2022) | trucos CSS

Ya sabes, esta es la época del año en que Chris suele publicar una gran reflexión sobre el año pasado. El primero se publicó en 2007, el mismo año en que comencé CSS-Tricks, y funcionó hasta 2021 sin perder el ritmo. Habiendo sido lector de CSS-Tricks durante todos estos años, odiaría ver este cambio. .

¡Aqui estamos! 2022 fue sin duda un año terrible para la transición. El año pasado, en este momento, estábamos mirando hacia algunos objetivos para el próximo año (a los que llegaremos), pero terminamos uniéndonos a DigitalOcean. fue un gran cambio radical (juego de palabras intencionado) y, sin embargo, te quedaste con nosotros todo el camino. Realmente significa mucho para mí que tantos de ustedes vengan aquí para leer las cosas que yo y un montón de otros escritores invitados publicamos aquí. simplemente no es una comunidad (o cualquier entretenimiento) sin todos ustedes.

¡Gracias!

Esta es la última publicación que publicaremos este año mientras colgamos nuestro letrero Gone Fishin 'para las fiestas. Volveremos 9 de enero con un flujo de contenido recién salido del horno.

Bien, aquí es donde comenzamos a profundizar en el análisis del sitio. Esto es algo sobre lo que siempre hemos sido transparentes y seguiremos haciéndolo. No es que nuestros números estén en una caja negra prohibida, y la esperanza es que compartirlos de alguna manera lo ayude a usted y a su negocio.

Tráfico total

En general, Google Analytics muestra un total 64 metros páginas vistas durante todo el año. muyyyyy por debajo de los 88 millones del año pasado, lo que es alarmante a primera vista. Quiero decir, ¿quién quiere ver 27% una caída en el tráfico del año anterior?

Pero hay una buena razón para ello, porque publicamos un muyyyy menos contenido este año Todos sabemos que Chris fue un escritor prolífico (y sigue siendopor supuesto), a menudo publicando varias publicaciones al día. Es como si hubiéramos perdido a nuestro colaborador más productivo durante la mayor parte del año. Comparemos la actividad editorial de los últimos años:

• 2020: 1183 artículos
• 2021: 890 artículos
• 2022: 390 artículos

La caída del 27 % en las páginas vistas es mucho menos alarmante dado que publicamos 43% menos artículos que el año pasado y enorme 67% menos que el total de 2020.

Hmm, no siento que esté trabajando un 67% menos...

Y todo esto viene con la advertencia de que esto es exactamente lo que obtenemos de Google Analytics. En años recientes, Chris ha comparado estos números con estadísticas de Llamarada de la nube (la capa CDN que se encuentra en la parte superior del sitio) y Jetpack (el complemento que conecta nuestro sitio de WordPress autohospedado con las funciones SaaS-y de WordPress.com). Los resultados siempre son contradictorios hasta el punto en que estoy ni siquiera esta vez me molesto en mirar a mi alrededor. (Está bien, está bien, tal vez solo Jetpack... que muestra 59,9 millones de páginas vistas, extrañamente más que los 55 millones en total en 2021).

Artículos, por número

¡Esto es lo que siempre espero cada año! Aquí están los diez artículos principales en 2022 que se publican en 2022:

1. 6 ideas creativas para efectos de desplazamiento de enlace CSS — Harshil Patel
2. Explícame las primeras 10 líneas del código fuente de Twitter - Anand Choudhary
3. ¿Cuáles fueron las herramientas front-end más populares en 2021? — Luis Lazaris
4. Reemplace los cuadros de diálogo de JavaScript con el nuevo elemento de diálogo HTML: Mads Stoumann
5. Saluda a selectmenu, un selector completamente personalizable — Patrick Brosset
6. Envío confiable de una solicitud HTTP cuando un usuario abandona una página: Alex MacArthur
7. grid-template-columns — Mojtaba Seyedi
8. La guía completa de capas en cascada CSS - Miriam Suzanne
9. ¿Consultas de la base de datos CSS? ¡Por supuesto que podemos! —Chris Coyer
10. ¡CSS-Tricks se une a DigitalOcean! —Chris Coyer

De hecho, me sorprende que este último no esté más arriba en la lista. Y estoy realmente sorprendido de ver uno de Alamanac allí, especialmente porque Mojtaba eliminó todas las propiedades de CSS Grid durante el último año y medio y lo demolió por completo. Pensé que me estaba yendo bien con la web hasta que comencé a leer todas las pepitas de oro que puso en cada propiedad. Hay tanto que aprender allí y Moitaba tiene una habilidad especial para explicar cosas complejas con claridad, espero actualizar la guía CSS Grid con toda esta información nueva (pero más sobre eso en un momento).

¡También me encantaría ver la guía CSS Cascade Layers allí! Me divertí mucho trabajando con Miriam en él. Si no lo sabías, ella es editora de especificacionesEs un placer (y un honor, en realidad) presentar su trabajo aquí y ponerlo a disposición de todos para que lo marquemos y hagamos referencia.

Aquí hay 11-20 para patadas:

11. Animación con JavaScript básico — Md Shuvo
12. Flutter para desarrolladores web front-end — Obumuneme Nwabude
13. Cuadrícula CSS y formas personalizadas Parte 1 — Temas Afif
14. Escribe HTML, al estilo HTML (no al estilo XHTML) — Jens Oliver Meiert
15. Un breve recorrido por 4 nuevas funciones de color CSS — Chris Coyer
16. Efectos Cool Hold que usan propiedades de fondo — Temani Afif
17. Creemos un pequeño lenguaje de programación — Md Shuvo
18. Geniales efectos CSS Hover que usan recorte de fondo, máscaras y 3D – Temani Afif
19. Contenido perfecto con HTML + CSS — Nicholas S. Zakas
20. Huellas dactilares basadas en CSS — Chris Koyer

Todas las publicaciones publicadas en 2022 son acumulativas 4,8 metros páginas vistas más o menos 7,8% de todas las páginas vistas. Nuestro artículo más visto es siempre la antigua guía de Flexbox que elaboramos 5,8 metros vistas este año. Me gustaría ver que nuestro nuevo contenido supere a este elemento, y creo que eso sucedería fácilmente si mantuviéramos el ritmo de publicación. De vuelta en la servilleta aquí, pero podríamos tener alrededor de 67 millones de páginas vistas si hubiéramos publicado 540 artículos más para igualar la cantidad de artículos publicados el año pasado.

Si retrocedemos unos pasos, podemos ver los artículos más vistos del último año, independientemente de cuándo se hayan publicado:

1. Guía completa de Flexbox
2. Guía completa de Grid
3. Perfecta imagen de fondo de página completa
4. Formularios CSS
5. Solicitudes de medios para dispositivos estándar
6. Usando SVG
7. Cómo escalar un SVG
8. Triángulo CSS
9. Bordes degradados en CSS
10. Truncar una cadena con puntos suspensivos
11. Cómo utilizar @font-face en CSS

Sí, casi idéntico al del año pasado. Y el año anterior. Y el año pasado. Y... bueno, casi. "Bordes de degradado en CSS" es nuevo, choca box-shadow propiedad no listada Todo lo demás desde el cuarto lugar en lugares apenas negociables.

Hablando de las propiedades del almanaque, quiero ver lo que más ha mencionado durante el último año:

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

Un pseudo en la parte superior y nada más que propiedades después de eso. Interesante, dado que el pseudoselector relacional funciona como :has(), :is()y :where() son chicos nuevos en el bloque.

Boletín

Los números aquí son demasiado confusos para sacar conclusiones perspicaces. Después de mudarnos a DigitalOcean, tuvimos que depurar nuestra lista de más de 91 000 suscriptores por motivos de cumplimiento y, como resultado, los números se desplomaron. Si ha sido eliminado de la lista, puede volver a suscribirse aquí.

¿Las buenas noticias? ¡Todavía estamos haciendo el boletín! De hecho, lo relanzamos en agosto después de una pausa de cinco meses. Solíamos tener un ritmo semanal, pero ahora lo hacemos una vez al mes, mientras los suyos realmente lo escriben. con suerte traerlo de vuelta a una publicación semanal. (¡Te extraño Robin!)

Actualizaciones del sitio

Para ser honesto, se trataba principalmente de mantener el barco a flote. Excepto por algunos cambios menores y mantenimiento, el sitio está más o menos donde estaba el año pasado.

Esto cambiará significativamente en 2023. Si se ha mantenido al día con nuestras actualizaciones mensuales de Behind the CSScenes, entonces sabe que planeamos migrar los trucos de CSS de WordPress al mismo CMS nativo que utiliza DigitalOcean para todos sus (estelares) contenido de la comunidad.

Esta obra comenzó hace unos meses y debería estar terminada en el primer semestre del año. Puedes apostar que te mantendremos actualizado en el camino. Además de un diseño fresco y un backend nuevo, debería ser un negocio como Si tiene alguna pregunta sobre este trabajo y lo que significa para su publicación favorita en el front-end, escríbame en los comentarios o envíeme un correo electrónico.

Si aún no lo ha visto, aquí hay algunas PC que nuestro diseñador, Logan Liffick, armó:

Resumen de los objetivos para 2021

Ouch, dudo incluso en mirar. Todo el esfuerzo por integrarse con DigitalOcean y encontrar un nuevo ritmo dominó el tiempo de todos, dejando muy poco para abordar las metas de Chris, que eran:

• ✅ Más enfoque en SEO. Voy a darnos una calificación positiva aquí. La verdad es que Chris y yo ya estábamos lidiando con esto antes de la adquisición. Reemplazamos el complemento Yoast SEO con RankMath, aprovechando sus herramientas de edición integradas para ayudarnos a aprender cómo optimizar nuestras publicaciones para los resultados de búsqueda. Y para ser claros: se trata menos de generar tráfico para obtener más ingresos de patrocinio que de reconocer que la búsqueda es la forma principal en que los lectores como usted nos encuentran y facilitarle la búsqueda de lo que es. Esto es especialmente cierto ahora que contamos con el respaldo de DigitalOcean y dependen mucho menos de los patrocinios que antes.
• 🚫 Otro libro digital. ¡Balancéate y falla! Bueno, en realidad nunca hicimos swing al principio ni entramos en la caja de bateo. (¿Es así como funcionan las analogías deportivas?) Chris publicó un libro con los mayores trucos de CSS de 2020 y lo convirtió en una ventaja de ser un suscriptor pago de CSS-Tricks. La idea era hacer otro este año, pero nos deshicimos de las suscripciones pagas y abrimos The Greatest CSS Tricks para que todos los disfrutaran gratis.
• 🚫 Más experimentos con las redes sociales. ¡No! Pero eso podría ser lo mejor, dado que Twitter está justo en este momento. Es posible que nos veamos obligados a experimentar en esta área el próximo año más por necesidad que por interés. Twitter siempre ha sido una gota en el proverbial cubo de CSS: tráfico de estafas; tanto que si invertir en él se siente como si pusiéramos nuestros huevos en la canasta equivocada, ugh. Yo no sé. Una parte de mí solo quiere sentarse y ver cómo se mueven las cosas antes de decidirse por algo nuevo o diferente.

Establecer metas para 2023

Nuevo año, nuevas metas, ¿verdad? Permítanme poner algunas palabras en boca del equipo y proyectar lo que creo que son las principales prioridades para nosotros en 2023:

• Migración fluida del sitio. Nada me haría más feliz¹ que una transición perfecta a la arquitectura de DigitalOcean. Pero vamos, todos sabemos algo siempre aparece cuando es el momento adecuado. Este sitio tiene más de 7000 artículos que se han escrito durante 15 años y ha habido 19 versiones del sitio durante ese tiempo. Hay tantos tipos de publicaciones personalizadas, campos personalizados, plantillas de página, funcionalidad de complemento, integraciones y una base de datos de más de 6 GB para mover y asignar a un sistema existente. ¡Menos mal que contamos con un equipo de desarrolladores de primer nivel para abordar esto!
• Publica 1 o 2 guías nuevas. En realidad, me gustaría apuntar más alto. Hemos pasado de nueve guías nuevas en 2020 a una insignificante guía nueva en 2021 y una más el año pasado: la Guía completa de capas en cascada de CSS de Miriam. Tengo una lista de 10 más que me gustaría escribir, pero creo que pondremos el listón muy bajo dada nuestra experiencia reciente. Mencioné anteriormente que me gustaría incorporar el trabajo de Mojtaba en Almanac en la guía CSS Grid existente. Esta no es una tarea pequeña y la contaría como el objetivo si podemos lograrlo.
• Ampliar el almanaque. Este es mi viaje a la luna. Me gustaría ver más tipos de documentación allí. Tenemos pseudo-selectores y propiedades, lo cual es genial y siempre lo ha sido. Pero vaya, piense en todas las otras cosas que podríamos tener allí: funciones, reglas at, entidades, selectores, valores de propiedad, etc. ¡Solo estamos arañando la superficie de lo que podría entrar allí! Si conseguimos incluso uno de esos, estaré en place-self: heaven.

muchas gracias asi que ¡mucho!

Este es el trabajo de mis sueños y no lo tendría sin lectores como tú. No puedo creer que hayan pasado ocho años desde que se publicó mi primer artículo y todavía estoy aquí, trabajando con aprendiendo de las mentes más brillantes en nuestro campo. Podría seguir y seguir (más de lo que ya he hecho) sobre cuánto significa para mí la comunidad de CSS-Tricks, pero en realidad se reduce a... gracias, gracias, gracias.Desde el fondo de mi corazón, gracias.

Y gracias a todas las buenas personas aquí en DigitalOcean que han hecho un gran hogar para los trucos de CSS. Un agradecimiento muy especial a Haley Mills, Sydney Rossman Reich, Bradley Coachy, Karen Diggi, David Berg, Matt Crowley, Logan Liffick y Kirstyn Kellogg por informarme personalmente y hacerme sentir bienvenido aquí. Es un sitio genial.

¡Adelante, vamos!