Cómo hacer cientos de ritmos de hip hop me ayudó a entender HTML y CSS

Eran las 2 de la madrugada de un sábado por la noche y estaba despierto hasta tarde trabajando en un nuevo proyecto.

Como beatmaker, pensarías que mi pantalla se vería así:

Credito de imagen

Pero en cambio, se veía así:

Fuente: Mi pantalla a las 2 de la madrugada de ese sábado por la noche

En lugar de programar patadas y trampas, estaba tratando de construir una barra de navegación adhesiva en mi sitio web. Sí, no se trata del aprendizaje automático o la inteligencia artificial, pero para mí, esto fue un gran problema.

Verás, nunca me consideré un desarrollador web. Tengo un par de amigos que lo hicieron para ganarse la vida. Pero cada vez que abrían sus editores de código para mostrarme en qué estaban trabajando, solo se vería como uno de esos GIF que eternamente se repite en sí mismo.

Algo así, pero con mucho menos bigote.

Naturalmente, me levantaba y pensaba: Gracias a Dios no tengo que hacer eso. ¡Solo soy un chico haciendo muchos ritmos todo el día!

Bueno ... ese pensamiento fue de corta duración.

Soundcloud, Spotify y Bandcamp han hecho que sea infinitamente más fácil para los músicos hacer llegar su trabajo al público. Pero la música ahora está dispersa en tantas plataformas que es difícil para los oyentes encontrar exactamente lo que quieren.

Estaba claro para mí que necesitaba un sitio web para actuar como un centro central para mi trabajo. Al igual que mis músicos favoritos, quería una página web con una buena barra de navegación y una gran imagen de héroe de mí mismo sin mirar a la cámara.

Un homenaje a mis héroes.

Originalmente intenté usar Squarespace, pero no me gustó cómo tenía que comenzar con una plantilla, luego trabajar dentro de los límites de bloques predeterminados.

Y los temas eran demasiado comunes. Hacía clic en your-favorite-artist.com, solo para aterrizar en la misma plantilla de Squarespace que ya ha visto cientos de veces.

Quería construir algo desde cero, incluso si estaba armado sin conocimiento previo de HTML y CSS.

Quería desafiarme a mí mismo.

Así que compré un curso de Udemy, descargué Brackets y comencé las lecciones.

Y ... guau. Me enganché de inmediato.

Solo un mes o dos después, mi sitio web estaba en vivo, y fue hecho completamente desde cero.

Entonces ... ¿qué me hizo amar tanto la experiencia?

Estas son algunas de las cosas que encontré particularmente interesantes:

  • La filosofía de "convertir un turd en un diamante": la capacidad de construir contenido en bruto en HTML (no importa cuán horrible se vea), y luego embellecerlo en CSS
  • La recontextualización de los recursos existentes: tome imágenes, fuentes de iconos, etc. desde cualquier lugar y manipúlelas para que se ajusten a su narrativa
  • El uso de herramientas externas: la disponibilidad de complementos jQuery que podría usar para mejorar la página

Después de dar un paso atrás y pensarlo un poco, tenía sentido por qué lo disfrutaba tanto.

¡Estos mismos elementos también están firmemente integrados en el proceso de creación de ritmos!

Puede parecer poco probable, pero me quedó muy claro que había un fuerte vínculo entre el desarrollo web y la producción musical. Dediquemos un tiempo a explorar más esta conexión.

Un bosquejo del proceso de beatmaking

Para aquellos de ustedes que no están familiarizados con la producción de hip hop, voy a simplificar el proceso a los siguientes tres pasos:

  1. Tambores
  2. Muestreo
  3. Instrumentación

Para los propósitos de este ejercicio, deconstruiré el siguiente ritmo, titulado “Clear Skies Ahead” (tomado de mi página de Soundcloud):

Lo elegí porque es bastante simple en estructura, los archivos de origen todavía están intactos y ... es un ritmo bastante frío .

Recorreré cada uno de los pasos con esta canción y detallaré cómo HTML y CSS son más hip hop de lo que podrías haber imaginado.

Explorando las conexiones

Similitud # 1: Hacer la batería es como construir contenido en HTML y diseñarlo más tarde en CSS.

Crédito de la foto: Nam Bui

Quiero destacar dos características clave de HTML:

  1. HTML proporciona estructura. HTML proporciona la arquitectura para la página. En un documento HTML típico, tenemos etiquetas , , ,
    que delinean claramente cada sección, junto con las llamadas a los archivos CSS necesarios y los complementos jQuery.
  2. HTML aloja el contenido que se diseñará más adelante. Aunque HTML es responsable del contenido de una página, codificamos todo de una manera que nos facilita el estilo más adelante. La vista previa inicial puede parecer realmente mala ahora, pero la estamos configurando para un futuro embellecimiento a través de CSS.

Los tambores de un ritmo también tienen características muy similares:

  1. Los tambores proporcionan estructura. Son la base de la canción. Forman el surco que llevará al oyente.
  2. La batería contiene sonidos que se diseñarán más tarde. Generalmente carecen de carácter al principio. Por lo general, cuando se aplican los efectos adecuados, realmente cobran vida.

Escuchemos los tambores iniciales para el ritmo de referencia, "Clear Skies Ahead". El patrón crudo consiste en patadas, trampas y un redoble de batería:

Suena ... bien. La estructura está ahí, la ranura está ahí, pero carece de carácter. La patada suena discordante. La trampa suena hueca. Y la ruptura del tambor se esconde en el fondo.

¡Entonces debemos estilizarlo y embellecerlo!

Para reforzar el extremo bajo de la patada, apliqué un ecualizador sobre él. Este efecto me permite ajustar las diferentes frecuencias de un sonido. Para darle más vida a la trampa, agregué un efecto de reverberación para que se repitiera. Para dar la presencia de ruptura muestreada, utilicé un efecto llamado generador de imágenes estéreo para ampliarlo a través del ritmo.

Esto puede ser el equivalente de asignar un elemento div con las clases "ecualizador", "reverb" y "stereo-imager" a las diferentes secciones en HTML:

  

Patadas

    

El "boom"

  

Snare

    

El "bap"

  

Rotura del tambor

    

"Boom-bap"

Entonces podemos ajustar los estilos de las clases en consecuencia en CSS:

.equalizer {
  font-weight: más audaz;
}
.reverb {
  sombra de texto: 1px 1px azul;
}
.stereo-imager {
  espacio entre letras: 1px;
}

Aquí está el equivalente sonoro de diseñar la batería (con los efectos procesados):

Como puede escuchar, la batería realmente cobra vida una vez que se han aplicado los efectos apropiados. Del mismo modo, el contenido de su página web solo se puede presentar después de haber sido diseñado correctamente en CSS.

Similitud # 2: muestrear una canción es como recontextualizar imágenes y fuentes de íconos para adaptarse a una nueva narrativa.

Independientemente de cuáles sean sus puntos de vista sobre el muestreo, es un elemento básico en la cultura hip hop. Me encanta, y creo que es una forma increíble de dar nueva vida a las obras de arte preexistentes.

Hay una técnica en el hip hop llamada "cortar", en la que tomas una canción más antigua, la cortas en pedazos pequeños y los reproduces en una nueva secuencia para crear una canción completamente nueva.

Usando "Clear Skies Ahead" como ejemplo, el siguiente clip detalla el proceso de 3 pasos:

  1. Identifique la canción a muestrear ("cavar" para la muestra) - comienza a las 0:00
  2. Organice una nueva secuencia con las rebanadas picadas: comienza a las 0:13
  3. Agregue los efectos necesarios e incorpórelos al ritmo: comienza a las 0:24

La construcción de una página web sigue la misma filosofía.

Supongamos que está creando una página muy simple de cuatro imágenes centradas que cambia la opacidad cuando pasa el cursor sobre ellas. El mismo proceso de 3 pasos también se aplica aquí:

  1. Identificar las imágenes a utilizar.

Puede usar Unsplash o cualquiera de estos hermosos sitios de fotos de archivo para encontrar las imágenes que desea.

2. Organice las imágenes en HTML en una secuencia que se ajuste a una narrativa

  ”spring”   ”summer”   ”fall”   ”winter”

3. Agregue los efectos necesarios en CSS para terminar la página

.box img {
  / * Cambiar el tamaño de las imágenes * /
  ancho: 50%;
  altura: auto;
  / * Centro de imágenes * /
  bloqueo de pantalla;
  margen izquierdo: auto;
  margen derecho: auto;
   / * Espaciar imágenes * /
  margen inferior: 30px;
}
img: hover {
  opacidad: 0.5;
  transición: 0.3s;
}

Este proceso de buscar recursos activamente, reorganizarlos y diseñarlos de acuerdo con sus preferencias es universal tanto en hip hop como en desarrollo web.

Similitud # 3: Agregar un instrumento virtual es como agregar un complemento jQuery para mejorar la página.

Para finalizar este ritmo, quiero agregar un sonido bajo y subgrave que juntará todo. Actuará como el pegamento que redondea las bajas frecuencias en el ritmo y lo llena.

"Pero, ¿qué hago si no tengo un bajo? ¡E incluso si tuviera uno, no sabría cómo jugarlo! "

Y ahí es donde entran los instrumentos virtuales. Vienen en forma de sonidos comunes o de complementos de terceros, y le permiten acceder a sonidos que de otro modo serían difíciles de obtener. Le permiten crear un sonido de sintetizador sin un módulo de sintetizador real, un sonido de violín sin instrumentos de cuerda reales, etc.

Para “Clear Skies Ahead”, agregué el instrumento virtual que contenía el subbajo, lo grabé y lo apliqué al ritmo existente:

Esta filosofía de usar un instrumento externo es como usar un gran complemento jQuery para su sitio. Ambos le permiten acceder fácilmente a una función que de otro modo sería difícil de crear por su cuenta.

Para ilustrar esto en mi página web, insertemos una galería de imágenes que pueda mostrar las cuatro imágenes estacionales en mi ejemplo anterior. En lugar de crear uno desde cero, aprovechemos jQuery y usemos un complemento de excelente aspecto. Usaré Swipebox:

Para lectores móviles, vea mi JSFiddle aquí.

En ambos escenarios, utilicé recursos externos que se integraron perfectamente en cada plataforma. Ambos fueron fácilmente accesibles y permitieron experiencias más ricas para el visitante y el oyente.

Pensamientos conclusivos

Aunque solo he estado codificando durante unos meses, he hecho cientos y cientos de ritmos en los últimos seis años. Cuando me di cuenta de las fuertes similitudes entre los dos, pude aprovechar mi experiencia como músico para convertirme en un mejor desarrollador web.

Y eso me lleva a mi pensamiento final:

Para crear una experiencia de aprendizaje divertida, descubra cómo una pasión existente se conecta con el nuevo tema que está estudiando.

Hace que los conceptos sean más fáciles de entender, y también llega a la emoción que ya tienes para tus pasiones o pasatiempos existentes.

En mi caso, comprender el vínculo entre HTML / CSS y la producción musical aceleró en gran medida mi curva de aprendizaje y fue una experiencia realmente divertida. Cuando estaba construyendo mi sitio, entré en estados de flujo que recordaban lo que sentiría durante mis sesiones de beatmaking.

¿Cómo se alinean tus pasiones existentes con un nuevo conjunto de habilidades que estás aprendiendo? Al principio pueden parecer muy diferentes, pero tómese el tiempo para mirar un poco más profundo.

Si las habilidades aparentemente no relacionadas como hacer ritmos y escribir código pueden combinarse bien, ¡también deberías poder encontrar una conexión igualmente fuerte entre tus diversos intereses!

Hola, soy Lawrence, y hago ritmos con el nombre de Trebles and Blues. Acabo de lanzar un nuevo EP, Set It Off, que ya está disponible. Para más música, no dudes en visitar mi página de Soundcloud.