Principes en conventies

Code conventions

Using 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:

<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>

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 {
  --primary-color: #171717;
  --tertiary-color: #737373;
  --secondary-color: #eeeeee;
  --background-color: #ebebeb;
  --text-color: #343a40;
  --border-radius: 0.25rem;
  --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --border-color: rgba(128, 128, 128, 0.1);
  --transition-duration: 0.3s;
  --font-weight: 700;
  --title-font-size: 40px;
  --font-size: 14px;
  --line-height: 48px;
}

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.

.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

Ik schrijf mijn component names in PascalCasing en de mappen waar de files in heten gebruik ik kebab case:

Dependencies

Als een dependency niet gebruikt wordt dan wordt deze verwijderd uit je 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 of het een feat of fix is. 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.

https://www.figma.com/file/Z6Pumwj3bwiIMQkYsdCAzm/Code-challenge-Mohammed?type=design&node-id=0-223&mode=design&t=Wc5R7nb4BpH6uq7t-0

Responsive

De applicatie moet responsive zijn en op elk device gebruikt kunnen worden. Voor de todo app center ik alles op het scherm. Als het scherm kleiner wordt dan zal de input field meebewegen en op gegeven moment smaller worden. Dit doe ik met flex: 1(flex grow). Hij kijkt op basis van hoeveel ruimte hij heeft op het scherm hoeveel hij groeit.

Laptop:

Telefoon:

Kleiner scherm:

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;

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.

Als javascript uitstaat krijg je een infinite load state omdat deze hele applicatie draait op een API die door javascript getoond wordt. Wel is de applicatie volledig te bedienen zonder muis en kan je er gerust doorheen tabben.