Los seis principios de la implementación

¿Cómo creamos un sistema para optimizar nuestro trabajo como desarrolladores?

Muchas veces pasamos horas pensando o charlando con colegas sobre todo lo que necesitamos para “hacer bien” un trabajo.

Pero después de pensarlo, me di cuenta de que la pregunta estaba arraigada en una necesidad más profunda. Las famosas “mejores prácticas” que muchas veces se basan en un conjunto más profundo de valores que no siempre son explícitos.

Para saber realmente si nuestro trabajo es bueno, necesitamos un nivel más alto de principios que puedan usarse para medirlo.

Estos 6 puntos, surgen de la experiencia, de la práctica, de la necesidad y de las buenas prácticas generales, pero no es una lista de verificación. Más bien puede usarse como guía para alguien que esté trabajando en un proyecto o revisando código, etc.

Ya sean estos puntos o los que quieras armar por tu cuenta, deben trascender técnicas específicas para que den como resultado un enfoque común para implementar.

1 Estructurado

2 Eficiente

3 Estandarizado

4 Abstraído

5 Escalable

6 Documentado

1. Estructurado

El documento está escrito de forma semántica y lógica, con o sin estilos.

El principio acá es que el contenido de nuestro documento (HTML) tiene significado incluso sin estilos de presentación (CSS).

Eso significa que estamos usando niveles de encabezado ordenados correctamente y listas desordenadas, pero también usamos contenedores significativos como <header>y <article>. No debemos dejar de usar cosas como etiquetas ARIA, atributos ALT y cualquier otra cosa que podamos necesitar para la accesibilidad.

Crear un documento bien estructurado significa aprender a escribir HTML semántico , familiarizarse con los estándares del W3C e incluso algunas de las mejores prácticas de otros expertos, y tomarse el tiempo para hacer que su código sea accesible. La prueba más simple es mirar su HTML en un navegador sin estilos:

• ¿Es utilizable sin CSS?
• ¿Todavía tiene una jerarquía visible?
• ¿El HTML sin formato transmite significado por sí mismo?

2. Eficiente

Tenemos que pensar en nuestro código para asegurarnos de que sea conciso y no tenga marcas o estilos innecesarios. Es común que revise el código que tiene divs dentro de divs dentro de divs. A menudo, un uso excesivo de HTML es el resultado de no comprender CSS.

Además del marcado y CSS, es posible que necesitemos otros activos externos, como iconos, fuentes web e imágenes.

Al evaluar la eficiencia de un proyecto, hay dos preguntas importantes que debe hacerse:

• ¿Podría lograr lo mismo con menos código?
• ¿Cuál es la mejor manera de optimizar los activos para lograr la menor sobrecarga?

3. Estandarizado

La creación de estándares para un sitio web o una aplicación generalmente se trata de establecer las reglas. Cosas como el tamaño de cada nivel de encabezado, un ancho común y el estilo para cada tipo de botón.

Para todo eso, es muy bueno utilizar un pre-procesador de CSS, tales como LESS o SASS.

Para verificar la estandarización, revisa el CSS y busca cualquier unidad codificada: píxeles, colores HEX, ems o prácticamente cualquier valor.

• ¿Tienen estas unidades que utilizar un valor estándar o una variable existente?
• ¿Se reutiliza alguna propiedad? Quizás te hayas dado cuenta de que esta es la segunda vez que aplica un fondo parcialmente opaco y que se necesita la misma opacidad en ambas ocasiones.
• ¿Podría la unidad derivarse del cálculo de una variable existente? Esto es útil para variaciones de color, por ejemplo, usar un color estándar y realizar un cálculo para obtener un 10% más oscuro, o mas claro.

4. Abstraído

Este principio trata de identificar elementos comunes más grandes que deben usarse a lo largo de todo el proyecto o en proyectos futuros.

La clave es pensar en cada elemento en términos más genéricos, en lugar de en el contexto específico de tu proyecto. Cuando observes un elemento en particular, divídelo en partes y asigna a cada parte los estilos generales que tendría ese elemento independientemente de la implementación específica con la que esté trabajando ahora. Los elementos más comunes son la tipografía (estilos de encabezado, altura de línea, tamaños y fuentes), elementos de formulario y botones.

Al verificar la abstracción de su proyecto, tenes que preguntarte:

• ¿Cómo construiría este elemento si supiera que se utilizará en otro contexto con diferentes necesidades?
• ¿Cómo puedo dividirlo en partes que serían valiosas para toda la aplicación?

5. Escalable

Nuestra implementación también debe esperar cambios en el futuro.

La construcción de CSS escalable generalmente requiere que uses características más avanzadas de LESS y SASS para escribir mixins y funciones.

El código debe estar diseñado para escalar y es fácil de actualizar en un solo lugar.

Para crear un sistema de diseño escalable, tenemos que aprender a anticipar los cambios que son comunes en los proyectos y aplicar ese conocimiento para asegurarnos de que el código esté listo para esos cambios. Las soluciones comunes incluyen el uso de variables y mixins.

• ¿Qué partes de estos elementos pueden cambiar?
• ¿Cómo puedo escribir el código para que sea fácil realizar esos cambios en el futuro?

6. Documentado

Documentar el diseño está infravalorado y, a veces, es la primera esquina que se corta en un proyecto. La documentación debe ser una referencia para todos los miembros del equipo, desde los desarrolladores hasta los ejecutivos.

El principio a recordar es que todo lo que hacemos debe estar documentado .

Para documentar su sistema de diseño, escriba instrucciones para ayudar a otra persona a comprender cómo se implementó el diseño y qué deben hacer para recrearlo ellos mismos.

• ¿Cómo le diría a otra persona cómo usar mi código?
• Si estuviera incorporando a un nuevo miembro del equipo, ¿qué le explicaría para asegurarme de que sepan cómo usarlo?

Un Sistema De Pensamiento

El objetivo de estos seis principios es proporcionar una forma de pensar acerca de tu trabajo para que puedas optimizar y lograr el mejor equilibrio entre un gran diseño y un gran código. Es importante darse cierta flexibilidad al aplicar estos principios. No podremos lograr la perfección con cada uno de ellos. Son ideales. Siempre hay otras distracciones, principios y prioridades que nos impiden hacer nuestro mejor trabajo.