He asistido a todas las CSS Dev Conf, cinco años consecutivos. Siempre me han gustado especialmente las conferencias que tienen un enfoque algo limitado. Dado que esta conferencia, no es de extrañar, se centra principalmente en CSS, creo que sirve como un interesante estado de la unión de CSS conferencia de estilo todos los años, al menos para mí.
En años pasados han surgido temas como: preprocesadores, arquitectura, pruebas, rendimiento… el año pasado diría que fue SVG.
¡Advertencia!
CSS Dev Conf es una conferencia de múltiples pistas, y además tuve que perderme las charlas sobre “lo mejor de”, ya que fue cuando estaba presentando CodePen Show & Tell. Así que esto no es totalmente representativo de toda la conferencia. ¡Lo siento! ¡Ven el año que viene!
Mike Riethmuller habló sobre la tipografía receptiva
O más exactamente: “Tipografía fluida avanzada”. ¡También ganó el premio al mejor espectáculo! Bien merecido, creo.
Nos enseñó cómo calc() funciona, luego comenzó a incorporar unidades de ventana gráfica y a aplicar todo al tamaño de fuente. El resultado puede ser “tipo fluido”, o tipo que cambia de tamaño en función del ancho de la pantalla, con mínimos y máximos. Es más genial que usar unidades de ventana solo (o SVG) porque puede limitar la escala.
Vea la tipografía receptiva Pen Precision de Mike (@MadeByMike) en CodePen.
Esto se puede usar en lugar de usar puntos de interrupción de consultas de medios ajustando el tamaño de fuente en incrementos fijos.
Es un gran problema porque:
- Es similar a la diferencia entre diseños adaptables y diseños receptivos. Todos sabemos que responsive ganó un poco el día allí.
- Ajustar el tamaño de la fuente en los puntos de interrupción es un poco ridículo y no tan satisfactorio como esto.
- Es básicamente un código de una sola línea, por lo que la adopción de esta idea debería ser bastante fácil.
¡Y eso no es todo! Si el tipo solo se escalara proporcionalmente entre sí, sería algo así como SVG <text>. Los límites son un diferenciador, pero también, los conceptos se pueden extender a:
- Escala modular fluida: un encabezado puede ser 1,5 veces más grande que el siguiente en una pantalla grande, pero solo 1,2 veces más grande en una pantalla pequeña (¡pero en una escala fluida!)
- Ritmo vertical fluido: no solo cambia el tamaño de la fuente, sino también la altura de la línea y otros espacios.
Lo integramos en los blogs de CodePen.
David Khourshid habló sobre las animaciones reactivas
Este fue un engaño serio de CSS. Todo se basa en la capacidad de manipular variables CSS con JavaScript. Es como dar acceso profundo a CSS a eventos DOM.
La forma en que David implementó sus demos fue con RxJS y su propia biblioteca auxiliar RxCSS.
Su charla similar de una conferencia anterior:
Desde CSS Dev Conf, David ha recopilado un montón de demostraciones salvajes posibles a través de variables CSS. También ha inspirado a varios otros a explorar el territorio, así:
Consulte las variables de CSS del lápiz como retroalimentación de datos de Jase (@jasesmith) en CodePen.
Alicia Sedlock habló sobre cómo combatir el agotamiento
Esto resonó enormemente en la audiencia. Después hubo una animada conversación con grandes preguntas que profundizaron en el tema. Aprendí el término “apagón”, que es un término más exacto para referirse a sentirse abrumado y alejarse, dejando el “agotamiento” para descansos más serios.
Dan Wilson habló sobre Motion Paths
Esta fue una charla perfecta para CSS Dev Conf, ya que involucró CSS de vanguardia (cambiaron los nombres de estas propiedades, como semanas antes) y es divertido jugar con él.
Dan no estaba hablando de trayectorias de movimiento SVG, que solo son realmente posibles a través de SMIL, que todavía parece destinado al olvido. Estas son rutas directamente en CSS, como:
.thing-that-moves {
/* "Old" syntax. Available in Blink browsers as of ~October 2015 */
motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
/* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */
offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
}Vea Pen Photo Sharer (Demostración de CSS Motion Path) de Dan Wilson (@danwilson) en CodePen.
Rachel Nabors habló sobre la comunicación de animación
De su artículo del mismo nombre.
Trent Walton nos habló sobre The Seasonal Web Developer
Trent habló elocuentemente sobre el equilibrio.
Las charlas en CSS Dev Conf podrían ser organizadas por: Filosófico, Aventurero, Constructivo y Restaurativo. También podrían hacerlo las personas en lo que están hablando y defendiendo. Hay fuerza y razón en todos ellos, pero también puede conducir a la frustración. Estas categorías incluso se manifiestan en nuestro trabajo y nuestras comunidades, donde también pueden ser frustrantes e inspiradoras.
Wes Bos mostró ES6 aplicable: consejos
Wes tiene una forma de llevar los conceptos a casa de una manera digerible y que activa las bombillas. Enlace directo para hablar.
Gregor Adams habló sobre el arte impresionante con CSS
Gregor es un artista de código y habló sobre tecnología web, arte y geometría y todas esas cosas maravillosas en las que me sumerjo todos los días en la comunidad de CodePen.
Me encanta cuando Gregor se pone a practicar un montón de experimentación en torno a una técnica o idea en particular. El año pasado fueron fractales. Este año probamos muchas ideas diferentes.
Vea la aplicación de dibujo Pen hexels / trixels [prototype] por Gregor Adams (@pixelass) en CodePen.
Clarissa Peterson habló sobre la creación de formularios hermosos, accesibles y fáciles de usar
Me gusta el énfasis en lo bello aquí de Clarissa. Cuando se aboga por la accesibilidad de los formularios, no tiene por qué ser a costa de la estética. De hecho, las formas bien diseñadas con espacios amplios, colores atractivos y estados claros ayudan a la accesibilidad.
¡No faltan ejemplos aquí!
Sarah Drasner habló sobre la creatividad en la programación
La creatividad es divertida, pero no solo es divertida. Es bueno para tu cerebro y tu negocio.
Cecy Correa nos ayudó a subir de nivel nuestro juego GIF
La charla se volvió deliciosamente nerd al final cuando Cecy explicó cómo puedes construir tu propia biblioteca de GIF alojándolos gratis en GitHub, y luego creando un alias de bash para buscarlos y devolver URL compartibles.
alias gif-search="~/absolute/path/to/gif-repo ls | grep"
$ gif-search queryEli Fitch habló sobre el rendimiento percibido
El desempeño percibido es el tipo de desempeño más importante. La analogía de los emojis de Eli me hizo pensar en lo feliz que me siento al conducir 20 millas fuera del camino y hacer que me lleve 8 minutos más de lo que estoy sentado en el tráfico parado.
Uno de los mini temas que surgieron en la charla de Eli fueron las barras de progreso falsas. Durante el Show & Tell más tarde, demostré cómo se puede aleatorizar el progreso de una barra de progreso (falsa) usando la función random () en Sass:
Consulte las facilidades de la barra de progreso aleatorizadas de lápiz por Chris Coyier (@chriscoyier) en CodePen.
Michael Cohen habló sobre la eliminación de nuestros sistemas de cuadrícula y la adopción del módulo de cuadrícula CSS
Creo que Michael tiene razón en que, eventualmente, lo que pensamos de un “sistema de cuadrícula” ahora será el ocaso.
Estoy emocionado por la cuadrícula principalmente porque creo que marcará el comienzo de una nueva era de creatividad de diseño. ¡Eso es ciertamente lo que defiende Jen Simmons!
Jen Simmons habló sobre Real Art Direction en la Web
Diseño de cuadrícula es definitivamente un tema este año. Pero la nota clave de Jen trata sobre algo más que “la cuadrícula será genial”, ella aboga por muchas herramientas modernas que ayudan a desbloquear un enorme potencial para la creatividad: caja flexible, formas, columnas y más.
Esta charla de una conferencia anterior:
Rachel Andrew hablando sobre saberlo todo
Rachel habla mucho sobre el diseño de cuadrícula CSS, lo que nos habría dado un golpe de uno-dos-tres, pero Rachel fue la oradora principal y dio una charla más personal e histórica sobre la web.
Fundamentos, todos ustedes.
Joah Gerstenberg habló sobre HTTP / 2
Específicamente … “Cómo afecta a los desarrolladores de frontend”.
Ojalá hubiera estado allí para hacer preguntas, porque definitivamente tengo algunas. Digamos que ya hemos activado HTTP / 2 (lo hice). ¿Es ya un anti-patrón estar concatenando activos? ¿Hay algunos sitios web de ejemplo que podamos ver para comparar el rendimiento antes / después de cuando dejaron de concatenar activos? Si dejo de concatenar activos, ¿es solo útil y nunca perjudicial? ¿Hay algún navegador / plataforma / versión que me haga daño?
Keith Grant nos dijo que dejemos de pensar en píxeles
Esta charla en una conferencia anterior:
Las unidades relativas son buenas. Aquí hay más para convencerte.
Brian Graves habló sobre el uso de CSS del mañana hoy
“Adonde vamos, no necesitamos preprocesadores”.
Mi favorito: @apply. Es como mezclar / extender (en preprocesadores) aunque no requiere ninguna duplicación de código / selectores para hacer lo que hace.
Consulte la prueba de compatibilidad de reglas de Pen CSS @apply realizada por Serg Hospodarets (@malyw) en CodePen.
Jonathan Snook nos habló sobre Responsive Web Apps with Container Queries
Lamentablemente me perdí esto y el único enlace que tengo es el sitio web EQCSS (“Consultas de elementos”). Sin embargo, creo que “Container Queries” es el nombre más probable, ¿quizás?
Jonathan analizará el enfoque que utilizó el equipo de administración de Shopify para administrar las intrincadas interacciones entre todos los componentes de la aplicación y lograr un diseño de respuesta totalmente fluido en menos de un mes. También analizará cómo se utiliza actualmente este enfoque en Xero para lograr la unidad entre pilas de tecnología dispares y acelerar el proceso de desarrollo.
Es muy interesante ver que los sitios de producción a gran escala van por este camino. Eso es lo que asumí (erróneamente) que no estaba sucediendo con las consultas de contenedores. Todavía sospecho que una vez que empiece a sentir que hay algo de impulso con el soporte nativo del navegador para estos, será un tema candente en CSS. Entonces se puede construir un polyfill real y el concepto se convertirá en una bola de nieve.
Kevin Lamping habló sobre las pruebas automatizadas de IU
Las pruebas de CSS son otro tema que ha existido durante mucho tiempo, pero que nunca parece tener mucho impulso. Es dificil. Es frágil. Es limitado en lo que puede hacer. Saber todo eso de antemano no hace que sea muy atractivo dedicarle mucho tiempo. Creo que, personalmente, tendría que tener un sitio realmente enorme, realmente de misión crítica, y tener una persona cuyo trabajo fuera completamente para seguir el camino de las pruebas de CSS.
Parece que Kevin aborda muchos de esos desafíos conocidos y tiene un repositorio que lo demuestra.
Matt Vanderpol habló sobre cómo generar una guía de estilo de vida a partir de CSS
Me encanta cómo la conversación sobre las guías de estilo ha evolucionado de “tener una” a cómo hacer que sea fácil de construir, usar y administrar.
Adam McCombs habló sobre cómo las bibliotecas de patrones pueden cambiar su vida
Las bibliotecas de patrones le permiten desarrollar sistemas, no páginas.
¿Sabes cuál sería una charla de biblioteca de patrones / guía de estilo realmente divertida, para complementar todas estas cosas inteligentes que se dicen sobre ellos? Si las personas toman su guía de estilo y toman un diseño que necesitan construir, y codifíquelo en vivo usando la guía. Creo que eso podría mostrar muy bien el punto que mucha gente hace sobre cómo las guías de estilo hacen que los diseños finales sean más rápidos de construir y más consistentes.
Estelle Weyl habló sobre Código Inclusivo
Como ella dice, en otras palabras: simple. Rápido. Accesible.
La primera regla del uso de ARIA es que si puede usar un elemento o atributo HTML nativo con el comportamiento semántico ya integrado, ¡hágalo en su lugar!
– Mujer desagradable (@estellevw) 25 de febrero de 2016
Ivan Wilson habló sobre la vida secreta de las formas
No puede haber suficiente evangelización para hacer correctamente los formularios.
Vincent Nalupta habló sobre KonMari CSS
KonMari, como en el método KonMari de Marie Kondo: “La magia de ordenar la vida que cambia la vida” (libro). Aplicado a CSS, es: Analizar, Planificar, Refactorizar, Optimizar.
Julia Konivestska habló sobre la visualización de datos con Responsive d3.js
Parte de la charla fue sobre la construcción de un gráfico como este desde cero: a partir de los datos, las bibliotecas y las API y todo eso para que todo suceda. Luego, hacerlo receptivo, lo que implicó medir cosas en JavaScript y volver a renderizar el gráfico.
Es increíble saberlo, pero también me hizo pensar en cosas nativas que puede hacer en SVG para ayudar a la capacidad de respuesta. Algo de esto se materializó últimamente cuando estaba jugando con el gráfico de barras de Robin. Resulta que hay una buena cantidad de cosas que puedes hacer si no utilizas un viewBox en absoluto.
Si tuviera que elegir un tema o los temas más candentes, diría que las variables CSS y la cuadrícula.