El decimotercer cuarto

Bueno chico hola. Se acerca el cumpleaños número 13 de CSS-Tricks. Un verdadero adolescente ahora, ¿qué tal eso ? Siempre aprovecho la oportunidad para hacer un pequeño discurso sobre el estado de la unión en este momento, ¡así que vamos a ello!

Diseño

Técnicamente, todavía estamos en la versión 17 del diseño del sitio. Este fue el primer diseño para el que contraté ayuda de primera clase y todavía me encanta, así que no he tenido muchas ganas de hacerle cambios masivos. Aunque es bastante diferente ¹ hoy que el día del lanzamiento.

Por ejemplo…

• La experiencia de búsqueda es totalmente diferente, ya que ahora funciona con la búsqueda instantánea de Jetpack .
• Las páginas del Almanaque (p. ej. background-blend-mode) tienen una barra lateral adicional que le ayuda a navegar entre páginas.
• Rehice la tipografía usando HoeflerCo . Centinela y Ringside . Los fragmentos de código de fuente monoespacial están en Operador Mono y el logotipo ha sido durante mucho tiempo Gotham Rounded , por lo que se siente como una gran familia feliz de tipos de letra.

Quizás el año que viene volvamos a hacer algo diferente. Mi lista está empezando a crecer para algunas cosas tecnológicas detrás de escena que quiero reajustar y, a veces, eso va de la mano con el trabajo de rediseño.

Foros cerrados

Los foros de este sitio han sido un peso mental para mí durante literalmente años. A principios de este año finalmente los apagué. Todavía están ahí, y probablemente siempre lo estarán (por eso se mantienen las URL), pero nadie puede publicar nuevos hilos o respuestas.

Fue un movimiento doloroso. Incluso mientras lo hacía, todavía había algo de actividad diaria regular allí y estoy seguro de que a esas personas no les pareció bien que cerraran un lugar en el que habían invertido tiempo. He aquí por qué lo hice:

• Nadie aquí, incluyéndome a mí, visitaba los foros con regularidad. Los foros públicos no moderados en Internet no me resultan aceptables.
• El volumen de spam estaba aumentando. Hubo períodos en los que la mayoría de las publicaciones, incluso después del bloqueo automático de spam que recibo de Akismet, eran spam que requerían eliminación manual. Incluso si tuviéramos un empleado dedicado a los foros, eso no es divertido, y como no lo teníamos, fue solo un trabajo aleatorio para mí y no necesito perder tiempo como ese.
• Los foros representan un cierto nivel de deuda técnica. Necesitan ser actualizados. Su diseño debe ser funcional en el contexto de este sitio. En un momento, eliminé todos los estilos personalizados y lo dejé como tema predeterminado, lo cual fue un buen paso para reducir la deuda técnica, pero al final no fue suficiente.

Puedo manejar algo de trabajo y algunas deudas técnicas, por supuesto. Pero cuando combinas esas cosas con el hecho de que los foros no contribuyen mucho a lo que considero el éxito del sitio. No generan exactamente visitas a la página ni demanda de publicidad. Realmente no hay dinero para contratar ayuda específicamente para los foros. Pero eso es una pequeña parte. Quiero que este sitio ayude a la gente. Creo que podemos hacerlo mejor si nos centramos en publicar con la menor atención posible. Creo que hay lugares en Internet que son mejores para un discurso tipo foro.

Ahora que han estado inactivos durante varios meses, puedo informar que levantar el peso mental me hace sentir muy bien y ha habido pocos aspectos negativos importantes, si es que hay alguno.

Social

Aquí hay otro peso mental que me levanté: dejé de administrar manualmente la cuenta de Twitter (@css) . Sigo pensando que es bueno que tengamos una cuenta de Twitter (y que tengamos ese genial identificador), pero ya no le dedico tiempo directamente a ella como solía hacerlo.

En el pasado, ponía en cola artículos especiales con comentarios, gráficos y demás y me aseguraba de que los días estuvieran llenos con una variedad de lo que pensé que serían tweets interesantes sobre diseño y desarrollo web. Eso está bien y todo, pero empezó a parecer un trabajo sin sueldo.

No recibimos (o parecemos generar) mucho tráfico desde Twitter. Google Analytics muestra cuentas de redes sociales que representan menos del 1% de nuestro tráfico. Invertir tiempo en “hacer crecer” Twitter simplemente no tiene suficientes ventajas para mí. Sin mencionar lo obvio: Twitter puede ser terriblemente tóxico y agotador mentalmente.

Ahora, todas nuestras publicaciones en Twitter están automatizadas a través de la conexión de redes sociales Jetpack (realmente usamos Jetpack para toneladas de cosas ). Pulsamos publicar en el sitio y el artículo se tuitea automáticamente. Entonces, si usas Twitter como una especie de fuente RSS (¡sólo muéstrame las noticias!), lo tienes.

¿El resultado? Nuestro número de seguidores aumenta al mismo ritmo que siempre. El compromiso allí es el mismo o mayor que nunca. Qué alivio. Haz diez veces menos trabajo para obtener el mismo beneficio.

Cuando tengo la necesidad de compartir un enlace con un comentario, uso el mismo sistema que siempre hemos tenido aquí: en su lugar, lo escribo como una publicación de blog con enlace. Ahora estamos obteniendo aún más beneficios: creación de contenido a largo plazo, lo cual es bueno para lo que realmente tenemos de nuestro lado: el SEO.

Algún día podríamos mejorar las cosas escribiendo a mano el texto del tweet automático con un poco más de alegría de vivir, acreditando al autor con mayor claridad y, #stretchgoal, un gráfico de redes sociales personalizado o generado de forma elegante.

Posibilidades de diseño abiertas

Un aspecto de este sitio con el que estoy satisfecho es la oportunidad de realizar un diseño personalizado del contenido. A continuación se muestran algunos ejemplos de esa infraestructura.

En cualquier publicación de blog determinada, podemos elegir una plantilla. Algunas de esas plantillas son muy específicas. Por ejemplo, mi ensayo La gran división es un modelo en sí mismo.

En el código base, tengo una plantilla PHP y un archivo CSS que están completamente dedicados a esa publicación. Creo que es una buena manera de manejar una publicación a la que deseas prestarle especial atención, aunque la existencia de esos dos archivos es una deuda técnica.

Aprendí algo en la creación de ese ensayo en particular: lo que realmente necesito para abrir la posibilidad de dirección de arte/diseño en una publicación es una plantilla simple y simplificada para comenzar. Eso es lo que ahora llamamos “Publicación elegante”, otra opción de plantilla para cualquier publicación en particular. Las publicaciones elegantes tienen una imagen destacada y una columna centrada para el contenido de la publicación. A partir de ahí, podemos usar CSS personalizado para diseñar cosas directamente dentro de WordPress.

Por ejemplo, mi publicación reciente en DX tiene el estilo de publicación elegante con CSS personalizado aplicado directamente en el editor de bloques.

El Editor de bloques en sí es muy importante para nosotros. Ese era uno de mis objetivos para el año y realmente hemos superado lo lejos que podríamos llegar con él. Creo que escribir y editar publicaciones en el editor de bloques está un millón de millas por delante del editor anterior.

El desafío más difícil fue (y sigue siendo) configurar las transformaciones de bloque para contenido heredado. Pero una vez que tienes el poder de construir y personalizar bloques, eso por sí solo abre un montón de posibilidades de diseño dentro de las publicaciones que, de lo contrario, es demasiado doloroso y, de lo contrario, demasiado pesado para la deuda técnica.

Otra puerta que abrimos a las posibilidades de diseño es una clásica: el uso de categorías. Una especie de obsequio que obtienes en WordPress es la capacidad de crear plantillas para todo tipo de cosas que funcionan automáticamente si se nombran correctamente. Entonces, por ejemplo, tengo un archivo llamado category-2019-end-of-year-thoughts.phpque me da control total sobre la creación de páginas de destino para grupos de publicaciones, como nuestra página de inicio de pensamientos de fin de año . Sin mencionar nuestras páginas de “Colección de guías”, que son otra forma de crear colecciones de páginas mediante programación .

Son muchas herramientas para realizar trabajos personalizados y estoy muy contento con eso. Parece que nos hemos dado un gran potencial con estas herramientas y recién comenzamos a aprovecharlo.

Hablando de eso, otro aspecto del diseño personalizado que tenemos disponible es el nuevo formato de libro…

comercio electrónico

We’re using WooCommerce here on the site now again. I just got done singing the praises of the Block Editor and how useful that has been… WooCommerce is in the same boat. I feel like I’m getting all this powerful functionality with very little effort, at a low cost, and with little technical debt. It makes me very happy to have this site on WordPress and using so much of suite of functionality that offers.

So for one thing, I can sell products with it, and we have products now! Lynn Fisher designed a poster for our CSS Flexbox guide and designed a poster for our CSS Grid guide, which you can now buy and ship anywhere in the world for $25 each. Look, with the Block Editor I can put a block for a poster right here in this post:

Shop now

Another thing we’re using WooCommerce for is to sell our new book, The Greatest CSS Tricks Vol. I. If we actually made it into a proper eBook format, WooCommerce could absolutely deliver those files digitally to you, but we haven’t done that yet. We’ve take another path, which is publishing the book as chapters here on the site behind a membership paywall we’re calling MVP supporters. The book is just one of the benefits of that.

WooCommerce helps:

• Build a membership system and sell memberships. Membership can lock certain pages to members-only as has programmatic hooks I can use for things like removing ads.
• Sell subscriptions to those memberships, with recurring billing.
• Sell one-off products

And I’m just scratching the surface of course. WooCommerce can do anything eCommerce wise.

Analytics

They are fine. Ha! That’s how much I worry about our general site analytics. I like to check in on them from time to time to make sure we’re not tanking or anything scary, but we never are (knock on wood). We’re in the vicinity of 8m page views a month, and year-over-year traffic is a bit of a dance.

Sponsors

THANK YOU THANK YOU THANK YOU

That’s what I have to say to all our sponsors. We’re so damn lucky to work with a lineup of sponsors that I wholeheartedly endorse as well as literally use their products. We have different sponsors all the time, but these are the biggest and those who have been with us the longest.

• Automattic: Thanks for building great software for the WordPress ecosystem. This site is made possible by a heaping helping of that software.
• Netlify: Thanks for bringing the Jamstack world to life. I’m also a big fan of this way of building websites, and think that Jamstack should be the foundation for most websites. Beyond that, you’ve redefined modern developer experience.
• Flywheel: Thank you for hosting this website, being a high-quality host I can trust and who has been helpful to me countless times. This is what high-quality WordPress hosting looks like.
• Frontend Masters: Thank you for being an education partner that does things right and helps me have the best possible answer for people when they are searching a more structured formal education about doing web work: go try Frontend Masters.

If you’re trying to reach front-end developers with your products, that’s literally how I make a living and can help.

My Other Projects

CodePen is no spring chicken either, being over 8 years old itself. I repeat myself a lot with this particular aspect of talking about CodePen: we’ve got a ton of ideas, a ton of work to do, and we can’t wait to show you the CodePen of tomorrow. 2020 for CodePen has been a lot different than the last 2-3 years of CodePen. Some technical choices we’ve made have been starting to pay off. The team is vibing very well and absolutely tearing through work faster than I would have thought possible a few years ago, and we haven’t even unlocked some of the biggest doors yet. I know that’s vague, but we talk in more detail about stuff on CodePen Radio.

ShopTalk, as ever, is going strong. That’s 420 episodes this week, friends. Dave has me convinced that our format as it is, is good. We aren’t an instruction manual. You don’t listen to any particular episode because we’re going to teach you some specific subject that we’ve explicitly listed out. It’s more like water cooler talk between real world developers who develop totally different things in totally different situations, but agree on more than we disagree. We might evolve what ShopTalk show is over time, but this format will live on because there is value in discussion in this format.

Life

My wife Miranda and I are still in Bend, Oregon and our Daughter Ruby is two and a half. She’s taking a nap and I’m looking at the monitor as I type.

We have the virus here like everywhere else. It’s sad to think that we’re this far into it and our local hospital is pleading with people to be careful this holiday weekend because they are very near capacity and can’t take much more. Here’s hoping we can get past this painful period. Stay safe and stay cool, friends, thanks for reading.

1. I always feel bad when I make design changes away from an actual professional designer’s work. Is the site design better today than Kylie‘s original? Uhm probably not (sorry for wrecking it Kylie!), but sometimes I just have an itch to fiddle with things and give things a fresh look. But the biggest driver of change is the evolving needs of the site and my desire to manage things with as little technical debt as possible, and sometimes simplifying design things helps me get there.