WR 184: Dibujando con CSS con Jorge Baumann

El arte de dibujar con CSS: aprender, experimentar y compartir ¶

La programación es tanto un ejercicio intelectual como una forma de arte. En la intersección entre código y creatividad se encuentra la experiencia de dibujar utilizando CSS. Mucho más que una simple técnica para definir estilos, el proceso de transformar líneas de código en gráficos palpables invita a descubrir nuevas formas de expresión y a profundizar en la comprensión de nuestro propio conocimiento.

El encuentro entre código y creatividad ¶

Desde la primera línea escrita, la programación nos reta a replantear lo que creemos saber. Muchas veces, enfrentar un problema técnico se convierte en un viaje de descubrimiento: el código, esa serie de instrucciones aparentemente frías, se transforma en un lienzo donde se plasman ideas y emociones. Es en ese proceso de experimentación donde se revela la magia de aprender haciendo.

La práctica de dibujar con CSS es un ejemplo claro de esto. No se trata únicamente de aplicar propiedades de estilo, sino de contemplar cada elemento como una herramienta para construir formas, geometrías y, en ocasiones, imágenes complejas que sorprenden tanto al autor como a la comunidad. La simplicidad de la sintaxis se contrasta con la complejidad del resultado, una dualidad que fomenta un aprendizaje profundo y constante.

Descubriendo la propiedad clave: position ¶

Uno de los aprendizajes fundamentales en esta aventura es dominar la propiedad position. Comprender los distintos valores—estática, relativa, absoluta y fija—se vuelve esencial para transformar un simple bloque en un componente artístico.

El valor de entender lo básico ¶

El conocimiento básico bien aplicado abre todo un abanico de posibilidades. Con el control preciso de la posición, se pueden construir estructuras que den origen a formas y figuras que, de otro modo, parecerían inalcanzables. Bastan unas pocas líneas para empezar a jugar con los límites del espacio y construir composiciones dinámicas y sorprendentes.

Una de las ideas centrales es que no es necesario dominar cada especificación moderna para comenzar; lo esencial es entender bien lo que se tiene a mano. Como se afirma textualmente en una experiencia relatada:

“tienes que poner esta propiedad y resulta que tú cuando estás haciendo una animación, si no le indicas lo contrario por defecto se queda como estaba antes”

Esta afirmación resume la importancia de conocer y manejar adecuadamente las propiedades básicas, ya que constituyen la base sobre la que se puede innovar y explorar sin límites.

Ejemplo práctico ¶

Para ilustrar, bastaría con crear un elemento sencillo que se posicione de manera absoluta dentro de un contenedor relativo:

‘’'css
.container {
position: relative;
width: 300px;
height: 300px;
background-color: #f0f0f0;
}

.element {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: #ff6347;
}
‘’’

Este fragmento de código demuestra cómo, mediante el simple uso de position, se pueden controlar las coordenadas y, por tanto, la ubicación en la página. La sencillez del ejemplo es solo la punta del iceberg de lo que se puede hacer cuando se combinan otras propiedades, como bordes, sombras y transformaciones, para dar vida a composiciones visuales más complejas.

La relevancia de la comunidad y la colaboración ¶

El aprendizaje en el mundo del desarrollo web no ocurre de forma aislada. La interacción con otros programadores, la asistencia a eventos en directo y la participación en comunidades en línea se convierten en pilares esenciales para el crecimiento personal y profesional. La colaboración abre la posibilidad de compartir trucos, ideas y soluciones de una manera que no siempre surge en el estudio individual.

Entre los aspectos más enriquecedores se pueden destacar:

• La búsqueda constante de inspiración a través de la interacción en directos.
• El compartir de pequeños fragmentos de código que optimizan la estructura, por ejemplo, mediante el uso de “box shadow” para recrear efectos de profundidad.
• La importancia de incorporar parámetros de accesibilidad en el diseño, lo que añade una dimensión práctica y humana al trabajo técnico.

La creatividad se potencia cuando se permite la influencia del entorno y se valora el aporte de cada participante. No se trata únicamente de mostrar habilidades técnicas, sino de transformar problemas y desafíos en oportunidades para innovar y aprender colectivamente.

La transformación del aprendizaje en tiempos de cambio ¶

La evolución de las tecnologías y la transformación de las formas de interacción han modificado profundamente la manera en que aprendemos y compartimos conocimiento. Las comunidades de desarrolladores han sabido adaptarse, utilizando plataformas digitales para mantener el vínculo y continuar la práctica colaborativa, incluso cuando el contacto físico se vuelve limitado.

El cambio de eventos presenciales a espacios virtuales ha permitido a muchos expandir su alcance. El uso de plataformas de streaming y redes sociales ha facilitado la participación de personas de diferentes regiones, conectando a aquellos que comparten la misma pasión, sin importar las fronteras. Esta transformación no solo ha mantenido viva la llama de la colaboración, sino que ha abierto nuevas posibilidades para la difusión y el aprendizaje.

Entre las ventajas de esta modalidad se encuentran:

• Mayor flexibilidad en los horarios, permitiendo que espectadores de distintas zonas horarias puedan unirse o visualizar contenido posteriormente.
• La posibilidad de revisar grabaciones de eventos, lo que favorece la asimilación gradual de conceptos complejos.
• La diversidad de perspectivas al contar con participantes de diferentes ámbitos, que enriquece el debate y la resolución de desafíos técnicos.

El pragmatismo en la adopción de herramientas ¶

En el camino del desarrollo web, la elección de herramientas y frameworks es un ejercicio de adaptación constante. La evolución de Bootstrap a Tailwind representa un ejemplo de cómo las tendencias pueden transformar la forma de escribir CSS. El uso de librerías y frameworks puede ser visto, en su origen, como un medio para aprender, ya que analizar su código ayuda a entender cómo se implementan soluciones complejas de forma eficiente.

Los aspectos positivos en esta transición incluyen:

• La simplificación del proceso de maquetación mediante sistemas predefinidos.
• El aprendizaje indirecto de técnicas avanzadas al inspeccionar el código de componentes populares.
• La capacidad de combinar la potencia del código escrito a mano con la agilidad de una librería que facilita la incorporación de nuevos conceptos, como el JIT (Just in Time) en la generación de estilos.

A la vez, es necesario mantener una actitud crítica y analítica. La adopción de una herramienta debe guiarse siempre por el caso de uso concreto y las necesidades del proyecto, sin dejarse llevar por modas pasajeras. La reflexión sobre lo aprendido y la búsqueda de mejoras continuas son aspectos que, bien asimilados, potencian la calidad del trabajo final.

Reflexiones sobre la evolución del desarrollo web ¶

Cada línea de código escrita es parte de un proceso continuo de aprendizaje. La práctica de dibujar con CSS es un microcosmos que refleja la evolución del desarrollo web: en cada reto, se abren nuevas puertas para explorar el conocimiento inconsciente y convertirlo en una habilidad palpable. Este proceso no es lineal, sino una constante iteración entre el error y el acierto, donde cada obstáculo se transforma en una oportunidad para entender mejor el funcionamiento interno del lenguaje y de nosotros mismos.

La transformación del aprendizaje se fundamenta en el compromiso de repasar, volver a escribir y ajustar los detalles. Así, cada proyecto se convierte en una prueba severa de ideas, en el que el esfuerzo por perfeccionar cada elemento trae a la luz nuevos matices y posibilidades. El desafío no radica únicamente en lograr un resultado estético, sino en descubrir qué hay detrás de cada propiedad, en comprender por qué se elige una técnica sobre otra y en valorar la importancia de compartir el saber.

El desarrollo web es un cambio constante en el que practicar, colaborar y mantener la curiosidad se convierten en factores determinantes. La integración de nuevas tecnologías, la incorporación de metodologías colaborativas y la disposición para aprender de cada experiencia conforman un entramado vital para quienes buscamos trascender más allá de lo meramente técnico.

La interacción con la comunidad aporta un valor incalculable al conocimiento. Es un recordatorio constante de que, en un entorno en el que nadie domina completamente todos los aspectos, el diálogo y la colaboración hacen posible el avance colectivo.

Cada reto superado, cada nueva técnica aprendida y cada debate en línea enriquecen la visión del desarrollador, permitiéndole no solo resolver problemas prácticos, sino también reflexionar sobre el acto mismo de escribir y crear código.

El camino es largo, y cada paso dado es un aprendizaje. Persistir en ello no es solo cuestión de técnica o de moda, sino de una pasión que transforma la forma en que percibimos tanto el código como el mundo.

La esencia del aprendizaje en desarrollo se encuentra en la capacidad de transformar lo simple en extraordinario, en la perseverancia por entender y aplicar lo aprendido, y en la confianza de que cada línea escrita es, a su manera, una obra de arte en constante evolución.

A Jorge puedes encontrarlo muchas tardes de fines de semana en twitch dibujando con CSS. A mi me impresiona. Pero nuestro invitado de hoy tiene muchas más cosas que contar, como verás en el episodio.

Charlas con preguntas sorpresa ¶

José Jiménez me invitó a sus entrevistas en telegram: Entrevistas en Diferido. Esta vez sólo él tenía toda la información, fue muy misterioso: ¿Quién responde? ¿quién pregunta?

Oh My Zsh me encanta, es más que una consola de colorines. Pronto os contaremos más cosas sobre ella.

Además el lunes en el premium os contaré la gran pifia con la pasarela de pago que algunos habéis sufrido en vuestras carnes.

Pásate por YouTube y allí me verás creando un Autocomplete con Vanilla Javascript.

Algo más que CSS ¶

Aunque en el momento de hacer la entrevista Jorge está “on fire” gracias a sus directos de twitch, nos cuenta en la charla muchas cosas interesantes.

Por ejemplo, cuál es la propiedad clave para comenzar a dibujar con CSS.

También nos cuenta su opinión sobre los frameworks de CSS o la implementación del CSS-in-JS.

Y por supuesto, como creador de contenido que es, nos dará su punto de vista sobre el FOMO (miedo a perderse algo).

Eventos en pandemia: Open Source Weekends ¶

Jorge es organizador de OS Weekends. Un evento que ocurría los sábados por la mañana de forma presencial hasta que nuestro mundo cambió.

Nos cuenta las ventajas y los inconvenientes de esa adaptación.

Aunque los eventos online no sean lo mismo, el gran mérito es seguir adelante con ellos.

Sigue a @os_weekends en twitter para saber cuando programan el siguiente.

¿Dónde encontrar a Jorge Baumann en internet? ¶

En muchas redes sociales como baumannzone.

• Twitter
• Instagram
• Twitch

¡Hasta el próximo martes!

Nota: Si no puedes esperar hasta entonces, en la 🧨 newsletter de Web Reactiva te mandaré recursos interesantes este mismo domingo. Apúntate gratis.