Malena

Notas generales

HTML

Lang

  • El lang del documento siempre debe ser igual al lenguaje que el usuario verá escrito en la página. Si la información está en español, el lang debe ser es.
    • Si mezclas idiomas en la página, debes identificar el lenguaje más usado para que sea en el documento. Los textos en otro idioma deben tener el atributo lang. Por ejemplo:
<p>Esta frase está en inglés: <span lang="en">This is english</span></p>

Alt y aria label

  • Los botones y links que solo tienen como contenido un icono siempre deben tener un aria-label. Esta consiste en una frase de que describe la accion del botón o link. ("Cerrar menú", "Linkedin de Ana Perez").

  • Las imágenes siempre deben tener un atributo alt, que consiste en una frase descriptiva sobre la imagen que se está viendo. Dado que el lector de pantalla anuncia que es una imagen, no se debe incluir este dato en la descripción.

Analizá los siguientes ejemplos:

INCORRECTO <img src="https://images.unsplash.com/photo-1519052537078-e6302a4968d4" alt="" />
INCORRECTO <img src="https://images.unsplash.com/photo-1519052537078-e6302a4968d4" alt="gato-naranja" />
INCORRECTO <img src="https://images.unsplash.com/photo-1519052537078-e6302a4968d4" alt="Imagen de un gato naranja" />

CORRECTO <img src="https://images.unsplash.com/photo-1519052537078-e6302a4968d4" alt="Gato naranja dormido" />

Etiquetas de estilo

No se considera buena práctica utilizar etiquetas de html cuya única función es proveer estilado. Esta es una responsabilidad de CSS: no debemos mezclar responsabilidades. Siempre que sea posible hacer algo con CSS, debemos hacerlo allí.

Algunos ejemplos de etiquetas que no deberías usar, si podés reemplazarlas con css:

  • <strong>
  • <br />
  • <em>
  • <b>
  • <s>
  • <u>

Formularios

  • El elemento label debe
    • o bien rodear al elemento de formulario al que se refiere
    • o bien contar con un atributo for que sea igual al id del elemento al que se refiere.

Si ninguna de esas dos opciones se cumple, el label no tiene ninguna función real.

  • Todos los elementos de formulario deben tener un atributo name.

  • El único preventDefault que necesitas es en el onsubmit de un formulario. No se debe usar onclick en el input de tipo submit, sino en el form.

CSS

  • No escribas css innecesario.
    • Todos los elementos en bloque tienen por defecto width de 100%, asi que, salvo excepciones, no es necesario usarlo. (el posicionamiento o flex pueden cambiar esto)
    • flex-direction: row es siempre innecesario, junto con justify-content: flex-start.
    • height: 100% es casi siempre innecesario.
    • El color de texto y la tipografia se heredan, asi que si se lo das a un elemento padre, no es necesario repetirlo en los descendientes. Lee sobre propiedades que se heredan y propiedades que no.

JavaScript

  • No declares variables que no usás. Antes de una entrega revisá cada variable para ver si la estás utilizando.

  • No dejes console log olvidados, ni código comentado. Los comentarios son avisos para otros desarrolladores, no borradores tuyos.

  • Siempre usá camelCase, salvo que:

    • estés declarando un componente de React (ahi va mayuscula al principio)

  • estés usando una propiedad de un objeto del backend que vino con guiones_bajos.

  • Usá retorno implícito siempre que se pueda.

Prolijidad del codigo

  • Prestá atención al tabulado.

    • En HTML se dejan dos espacios o un tab siempre que abras una etiqueta hija de otra.
    • En CSS se dejan dos espacios o tab siempre que explicites el estilo de un selector, o anides selectores, o uses media query.
    • En JS se dejan dos espacios o tab siempre que se abra una función o bloque (if, for, switch).

  • Dejá espacios entre operadores, parentesis, llaves.

  • Bajá la extensión prettier para VSCode y familiarizate con su uso.