Guías para creación y mantenimiento de código

7/42
Recursos
Transcripción

La meta de tener una guía de código es hacer que luzca como si una sola persona lo haya escrito para que se entendible por todo el equipo.

Para nuestro proyecto PlatziGames vamos a tener una guía en la que definimos:

  • Ser consistentes con la indentación.
  • Consistencia con espacios, corchetes, puntos y comas.
  • Consistencia de números, de selectores y divisiones.
  • Agrupaciones de propiedades.
  • Uso de ID’s y clases.

Aportes 71

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Excelente todo lo que incluye BEM, lo mejor para evitar esto jeje

Una excelente explicación, sobre el por qué usar pre-procesadores, y la sugerencia de una metodología. Definitivamente uno de los mejores cursos de platzi.

Anidaciones, no utilizar mas de un nivel:
Incorrecto:

html body div div .descripcion {
	color: #212121;
}

Maximo:

div .descripcion {
	color: #212121;
}

Lo mejor que se puede hacer:

.descripcion {
	color: #212121;
}

Esta clase es para toda la vida. Mantener esta organizacion me ayudara mucho en mis proyectos.
Gracias

Un like si te está pareciendo estupendo el curso

Adiós a estos comentarios

Me encantó esta clase. Como copywriter, soy editora muchas veces de contenidos, y estoy acostumbrada a entender guías de estilos de marcas, de diseño, guías de UX, o de tono editorial en una revista. ¡No tenía idea que en programación también había! Eso me simplifica mucho la estructura mental para empezar o entender un proyecto.

Este tema es muy imporante para saber trabajar en equipo.
.
Una guía de estilos o Style Guide es muy utilizada por los diseñadores pero tambien tiene su uso en la programacion, comunmente conocida como estandares, mejores prácticas o convenciones de codificacion para un equipo o proyecto. Aunque cada una de ellas tiene su propio significado en la programación, generalmente se refieren a lo mismo.

.

No reinventes la rueda.

.
Muchos lenguajes por ejemplo, ya tienen una guia de estilos recomendada.
Implementar una de estas guías de estilo generalmente aceptadas es un buen comienzo para ayudar a tu equipo a escribir código de forma consistente. Más allá de este punto de partida, su guía puede cambiar en función de su equipo, flujo de trabajo y tecnología. Cuando tomes nuevas decisiones sobre normas y prácticas, añádelas a tu guía de estilo.
.
Les dejo algunas guias de estilos que usa airbnb para que las estudien y que personalmente me gustan mucho:

Recomendaciones

  • Ser consistente en la identación.
  • Consistencia con espacios, corchetes, puntos y comas.
  • Consistencia de números de selectores y divisiones.
  • No hacer un uso excesivo de anidaciones
  • Agrupaciones de propiedad.
  • El uso de ID’s y clases.

Algo que no menciona nuestro profe son los comentarios, los comentarios te guían muchísimo cuando dejas el proyecto por un tiempo y también a los demás desarrolladores ❤️

La metodología que elijas + una guia de creación y mantenimiento marcan la diferencia del desarrollo de un proyecto WEB. 

Una excelente explicación, sobre el por qué usar pre-procesadores, y la sugerencia de una metodología. Definitivamente uno de los mejores cursos de platzi.

Me encantó esta clase. Como copywriter, soy editora muchas veces de contenidos, y estoy acostumbrada a entender guías de estilos de marcas, de diseño, guías de UX, o de tono editorial en una revista.

Estoy motivado por aplicar este curso en este proyecto para aprender mucho más

✅💪✌🤓📖📈👍🏻 ya con ganas de comenzar hacer código.

usare esta guia para todos mis proyectos

Excelente clase, información muy valiosa.

Cuando escribas código, escribe como si lo hicieras para el “yo” del futuro

Las guías de código son útiles y necesarias, ya que al tener equipos grandes de trabajo estos deben seguir unas pautas básicas para que el código escrito sea de fácil uso por cualquier programador que se integra al proyecto.

Metodología BEM + Estandar css de Clases, ID`s etc = Combinación perfecta ^^

Esta clase ha sido una de las mejores que he visto!

Recomendaciones para mantenimiento de código...

Muy buena clase, muchas gracias por preparar esta guía para el desarrollo de este proyecto!

Este curso esta genial 😃 -_- ya tengo recuerdo de trabajar con muchas personas y luego se junta el codigo, puede tener muchos erorres etc y dolores de cabeza

Existe una extención para VSCode muy conocida que es Prettier, que ayuda a la identación del codigo, esto para que las personas que están en el proyecto formateen su codigo de la misma manera
Instalacion

Guías para creación y mantenimiento de código, hoja de ruta para todo el equipo.

7. Guías para creación y mantenimiento de código:

Guía de código:

  1. Ser consistente con la identación.
  2. Consistencia con espacios, corchetes, puntos y comas.
  3. Consistencia de número de selectores y divisiones.
  4. Agrupaciones de propiedades.
  5. Uso de ID’s y clases.

Tener una guía de creación es un factor super importante a la hora de empezar a trabajar en equipos. Con la meta de hacer parecer el código escrito como una sola persona, se mantiene una coherencia y ahorra problemas para cuando una persona que no ha colaborado empiece en el proyecto.

¿Por qué son importantes los lineamientos al momento de crear código?

  • Hace que todos los miembros del equipo estén en la misma pagina y no haya retrasos en confusiones de código
  • Ayuda a que los miembros del equipo puedan intercambiar de posición sin causar conflicto
  • Ayuda a que personas externas al equipo puedan entender el código mas fácilmente
  • Al momento de dejar el proyecto a otro equipo de trabajo, el nuevo equipo entiende la estructura de los documentos html, css, js, etc.
No tengo palabras para describir lo contento que estoy con esta lección. El archivo adjunto con la descripción del sistema de diseño es invaluable, gracias Wilson y gracias Platzi.

Exijo una escuela de Shopify developer

Notas de la clase

Excelente orientación.

exelente tener un lineamiento

Muy interesante, para mantener el código entendible

vaya, que gran potencial para implementar en proyectos, no lo conocía.

Que emocionante esta el curso. 😃

este curso ya me empezó a gustar

Vaya genial clase, muy importante la guia de codigo , solo me genera una duda la guia la debe definir el lider de proyecto o es correcto que entre desarrolladores se definan los parametros ?

La identación de elementos en este lenguaje de programación es de gran importancia a la hora de interpretarlo.

Siempre se pasa por alto esta parte e ignoramos su importancia. De ahora en adelante siempre lo usare para mis proyectos.

Estuve revisando la guia de Shopify y esta muy completa ,de verdad que estas guias haran nuestras vidas mucho mas faciles xD

No sabia de estas metodologias para trabajar el codigo, es excelente por que ya vas con una idea de como trabajan equipos profesionales en la vida real, excelente.

muy buena la guia!

Súper interesante darle una revisada a los lineamientos de esas grandes empresas

Interesante, orden en el desorden !

Que bueno este aprendizaje de respetar una estructura para la construcción de un proyecto. 😃

Trabajar con una guía debe ahorrarte muchos dolores de cabeza al momento de desarrollar tu código. No me a pasado (hasta hoy XD) pero me lo imagino XD

Excelente clase 👌!!

Un curso con una guia!. Me parece de lo mejor.

Genial! Realmente me gusta la guía de código.

Ni pedo le entendi a esta clase!!

Usar esta guía me ayudara mucho en mis proyectos para toda mi vida 😄

estupendo 😮 que chévere es aprender día a día

Excelente contar con una guía de código para aprender cómo adecuarnos a los lineamientos de cada empresa en donde estaremos trabajando.

Buenísima la guía. Creo que la voy a tener en cuenta de ahora en más para mis proyectos.

Cuando piensas en arquitectura y guías de CSS ya estas en camino de ser un Developer súper pro o Senior

Para toda la vida 10/10

Excelente clase 😉

Excelente, mantener bien organizado todo me trae calma xD

La verdad que me siento muy emocionado de ver como se desarrollará esta clase 😃

  1. Simplifica
    El primer y más básico de los consejos que puedo ofrecerte es que mantengas tu código tan limpio, simple y legible como te sea posible. Al mantener un código simple produces código de mayor calidad, resuelves problemas más rápidamente, trabajas mejor en grupos de desarrollo y además, obtienes una base de código mucho más flexible, entre otras cosas.

  2. Entiende el código
    Si eres un principiante, incluso si estás escribiendo código muy simple con una declaración ‘if else’, comienza por redactar el código en un pedazo de papel. Tanto el algoritmo, como todo el proceso de compilación se verán más “redondos” una vez que entiendas la idea detrás del código. Incluso para los programadores expertos, la mejor forma de resolver un problema o formular un algoritmo para resolver cualquier problema complejo es dividirlo en sub-partes para tratar a continuación de resolverlos de forma individual. Una vez que empieces a interiorizar el código más rápidamente aumentará tu confianza.

  3. Los comentarios son tus amigos
    A medida que los programadores crecen y ganan experiencia, tienden a olvidar uno de los consejos más básicos que recibieron en sus primeros días de programación: comentar el código. Añadir comentarios al código es una sugerencia que abarca todos los lenguajes de programación. Permite que la actualización, depuración, análisis y otras actividades posteriores a la programación sean más fáciles y eficientes, más aún si trabajas en un equipo de desarrollo.

  4. No te repitas (DRY)
    El principio DRY, formulado por Any Hunt y Dave Thomas en “The Pragmatic Programmer”, es el uso de funciones, clases e instancias para evitar que se vuelva a escribir el código que ya se ha escrito una vez. Este principio permite a los desarrolladores evitar la duplicidad en beneficio de producir código mucho más limpio. Optimizar el código es lo que a menudo diferencia un gran programador de otro del montón.

  5. Indenta el código
    Imagina que vas a un supermercado y no existe ningún tipo de orden en la colocación de los artículos. Los lácteos están en las secciones de ropa, otros están en el área de cosméticos, y los productos de panadería se colocan con las verduras. La indentación en el código es muy parecido a la disposición que necesita en un supermercado o cualquier otro lugar en el mundo real. Cuando el código está correctamente sangrado, se vuelve más legible y más fácil de encontrar lo que está buscando.

Uno que esta comenzando y quiere tener buenas practicas desde un comienzo.
Excelente clase.

Este contenido, podría ir al comienzo de la ruta. Jejeje.

Justo me preguntaba cómo organizar los proyectos, archivos, código etc. Hasta ahora no había visto un curso que lo mencionara claramente. ¡Tremendo este curso!

Me gusto la guia para el codigo. Desde el principio sabemos las reglas claras y como debemos trabajar

Ansioso de empezar con el proyecto!!

La meta de tener una guía de código es hacer que luzca como si una sola persona lo haya escrito para que sea entendible por todo el equipo.

Recomendaciones

  • Ser consistentes con la indentación.
    Consistencia con espacios, corchetes, puntos y comas.
    Consistencia de números, de selectores y divisiones.
    Agrupaciones de propiedades.
    Uso de IDs y clases.

s