Una caja azul | Programar Plus

Un pequeño meme dio la vuelta a CodePen la otra noche. Una caja azul. No estoy seguro de cómo empezó, pero mucha gente empezó a publicar códigos de diferentes formas de dibujar un recuadro azul. Es extraño, es divertido, pero también es bastante sorprendente que haya tantas formas de hacer algo tan simple.

Vamos a contar las maneras:

  • Puedes crear un <div> y darle estilo con CSS. Inmortalizado aquí por Tim Holman.
  • Pero CSS es de la vieja escuela, ¿verdad? Podrías usar Sass para ayudarte a escribirlo.
  • Pero para estar totalmente a la moda, harías una @mixin en SCSS a la que podrías llamar.
  • No tendría que ser un <div> o bien, podría ser un <table> (o literalmente cualquier otro elemento HTML) y podría tener los estilos en línea directamente en el elemento.
  • O ni siquiera podría usar HTML en absoluto, sino solo un pseudo elemento en el cuerpo implícito o simplemente un borde en la raíz implícita.
  • Incluso podría omitir el CSS de cualquier tipo por completo mediante el espaciado a través de elementos HTML y atributos de la vieja escuela.
  • ¿Quizás un personaje de tablero gigante?
  • Los degradados CSS podrían dibujar un cuadro si tiene paradas de color sin espacio entre ellas. También podría usar Sass, ¿eh?
  • No te olvides de box-shadow también.
  • Ciertamente, un lenguaje específico de dibujo como SVG podría funcionar.
  • O un lenguaje específico de dibujo como Canvas también podría hacerlo.
  • Pfff, lienzo? Qué peatón. ¿Qué hay de WebGL?
  • Ciertamente, algo de JavaScript vanilla podría hacer el trabajo.
  • Bien podría convertirlo en un marcador de libros.
  • Pero, ¿por qué hacer eso cuando puedes escribir un complemento de jQuery?
  • Después de todo, solo estamos dibujando en una pantalla, la web no es el único lugar donde puede hacer eso. ¿Qué tal una aplicación para iPhone que dibuja un cuadro en Objective C?

Bastante salvaje, ¿eh? Seguramente esta tampoco es una colección completa de métodos (diferentes formatos de imagen, dataURI, etc.). ¿Es bueno tenerlos todos y conocerlos? ¿Esto lo hace intimidante para los principiantes o pueden ignorar con seguridad muchos de ellos y aprenderlos a tiempo según sea necesario?