Principes en conventies

Code conventies

prettier

Om het inspringen van HTML zo netjes mogelijk maken, gebruiken we de extentie Prettier.

Semantic HTML

In HTML schrijven we in semantische html om zo de toegankelijkheid. Zo vermijden het gebruik van

en weten screen readers wat ze moeten voorlezen.

Bijvoorbeeld:

<section class="about-me-container">
  <article class="title">
    <p><%= people[0].title %></p>
  </article>

  <article class="about-me">
    <p class="about-me-text"><%= people[0].aboutMe.text %></p>
    <a class="my-button" href="/work">My work</a>
  </article>
</section>

CSS Custom properties

We willen ons zelf binnen CSS zo min mogelijk herhalen. Daarom gebruik ik custom properties voor onder meer: Kleur, Eenheden en schaduw. De custom properties schrijf ik als volgt:

--unit-default: waarde;

:root {
  --main-color: rgb(255, 255, 255);
  --secondary-color: rgb(253, 255, 230);
  --background-color: rgb(245, 245, 245);
  --details-color: rgb(0, 0, 0);
}

CSS names

De namen van de CSS classnames worden in kebabcase geschreven. Ook kan je duidelijk aan de naam zien wat het doen of voor welke element het bedoeld is:

.about-me-text {
  padding-bottom: 20px;
}

.social-links {
  display: flex;
  padding: 20px;
}

Commits

Bij elke commit schrijven we of het een feat, fix of een andere semantische commit tekst heeft. Met daarbij de aanpassingen die je hebt verricht:

Git pull requests

Als een ticket af is dan doe je een pull request en stuur je deze naar je buddy of iemand anders in het web development team. Deze wordt nagekeken en als je de feedback hebt toegepast laat je weer weten dat je de wijzigingen hebt gepusht als dan de PR wordt approved kan je hem mergen.

Figma design

Ik probeer zoveel mogelijk de Figma design te volgen:

Responsive

De applicatie moet responsive zijn en op elk device gebruikt kunnen worden. Ik gebruik media queries om zo paddingen en andere items te laten inspringen/aanpassen.

Laptop:

Telefoon:

Progressive enhancement

De applicate is te gebruiken als de CSS uit staat. Ook ziet de applicatie er hetzelfde uit op elke device omdat ik een CSS reset file heb toegevoegd die alle standaard styling van verschillende browsers uitzet.

Ik gebruik hiervoor de reset file van Josh Comeau: https://www.joshwcomeau.com/css/custom-css-reset/