Principes en conventies

Code conventions

Using prettier

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

Semantic HTML

In onze JSX schrijven we semantische HTML. Zo vermijden we het gebruik van

en weten screen readers wat ze moeten voorlezen dit is natuurlijk voor de toegankelijkheid van de website optimaal.

Bijvoorbeeld:

<main className={styles.main}>
      <section className={styles.todoSection}>
        <h1 className={styles.title}>Todo list</h1>
        <AddTodoForm onAddTodo={handleAddTodo}  />
        <TodoList data={todos} onTodoChange={handleTodoChange} onDeleteTodo={handleDeleteTodo}/>
      </section>
    </main>

SCSS Variables

We willen ons zelf binnen CSS zo min mogelijk herhalen. Daarom wordt in het bedrijf gebruik gemaakt van SCSS Variables. Dit is in principe hetzelfde als custom properties maar wordt het anders geschreven:

$color-primary: #f4b52c;
$color-secondary: #f4b52c;
$color-tertiary: #FBECB7;
$color-quaternary: #fbecb7;

file name: _spacing.scss

$space-xxxl: 12.8rem;
$space-xxl: 6.4rem;
$space-xl: 4.8rem;
$space-l: 3.2rem;
$space-m: 2.4rem;
$space-s: 1.6rem;
$space-xs: 0.8rem;
$space-xxs: 0.4rem;

$space-vertical: (
  xs: $space-l,
  sm: $space-xl,
  md: $space-xxl,
  lg: $space-xxxl
)

CSS names

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

.ulContainer {
  text-decoration: none;
  list-style-type: none;
  padding-inline-start: 0px;
}

.listItemContainer {
  border-top: 1px solid var(--border-color);
  padding-top: 4px;
  padding-bottom: 4px;
}

.emptyState {
  color: rgba(153, 153, 153, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 120px;
}

Types/Interfaces

Het bedrijf gebruikt de letter I om aan te geven dat iets een interface of een type is. Dit wordt gedaan om zo verwarring tussen functions en classnames te voorkomen.

interface ITodoItem {
  id: number;
  title: string;
  completed: boolean;
  createdAt: string;
}

type IAddTodoItemData = Pick<ITodoItem, "title" | "completed">;

Progressive enhancement

Ik probeer zoveel mogelijk functionaliteit te bouwen in HTML en CSS om de applicatie zo Progressive enhanced mogelijk te maken. De Sportcity webpage is te gebruiken als de JS of CSS uit staat. Wel werkt de lid worden pagina niet zonder JS.

.checkbox:hover {
  border-color: rgba(23, 23, 23, 1);
}

.checkbox:checked {
  border: 2px solid rgba(23, 23, 23, 1);
  background-color: rgba(23, 23, 23, 1);
  width: 20px;
  height: 20px;
}

.checkbox:focus {
  border: 2px solid #155dfb;
}

Functions

De javascript function names schrijf ik in camelCase omdat hier zo gewerkt wordt in het bedrijf.

const loadData = async () => {}

const handleTodoChange = async (id: number, state: ITodoItem) => {}

Component names

De component file namen worden geschreven in PascalCase en de folder names worden geschreven in kebab-case.

Dependencies

Als een dependency niet gebruikt wordt dan wordt deze verwijderd uit de package.json file:

  "dependencies": {
    "classnames": "^2.5.1",
    "next": "14.1.0",
    "react": "^18",
    "react-icons": "^5.0.1"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "typescript": "^5"
  }

Commits

Bij elke commit schrijven we een toepasselijke semantische commit message zoals feat of fix. 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

De Figma design moet pixel perfect nagebouwd worden. De afmetingen worden dus van Figma geïmplementeerd in het project.

Responsive

Voor de Sportcity webpagina moet alles responsive zijn en op elk device gebruikt kunnen worden. Zo zijn er altijd verschillende Figma designs voor elke afmeting en wordt in de code gebruik gemaakt van een variabele scss file waar alle afmetingen gedefinieerd zijn. Deze afmetingen gebruiken wij zodat we in de code voor elke afmeting andere css toepassen zodat alles er netjes volgens het design uit ziet op elk mogelijke device.

Types

De type van bijvoorbeeld een argument moet specifiek zijn. Je maag geen "any" als type gebruiken omdat dit natuurlijk de hele principe van typescript achterlaat:

  onTodoChange: (id: number, state: ITodoItem) => void;
  onDeleteTodo: (id: number) => void;