Week 3 Project Tech - mbergevoet/blok-tech GitHub Wiki

Feedback code van eerste statische prototype

  • Hou de zoek functie simpel voor een eerste hobby voorkeuren en gebruik daarna filters op de resultaten pagina.
  • Gebruik Checkboxes voor de hobby keuzes in plaats van invoer velden, dat is makkelijker voor later met de database.
  • Categorieen van hobby's kun je met progressive disclosure.
  • Maak een vaste lijst van hobby's waar gebruikers uit kunnen kiezen.
  • Geef aan waar je progressive enhancement gebruikt en hoe het de ervaring dus verrijkt.

Linters onderzoek

Wat is een linter

Een linter is een klein programmatje dat code kan analyseren. En dan voornamelijk JavaScript of programmeer talen (dus geen html & css). Bij het analyseren kan hij syntax fouten, bugs of fouten in de code conventiesweergeven zodat ze makkelijker te vinden en op te lossen zijn voor developers. Er zijn veel verschillende linters beschikbaar om je code mee te controleren.

De drie meest gebruikte linters


  • JSLint
  • JSHint
  • ESLint

Bron: https://gomakethings.com/javascript-linters/ Voor het linten gebruik ik nu eslint.

ESLint

ESLint is één van de meest gebruikte linters die er zijn en is dan ook al ingebouwd in de meeste code editors. Maar je kunt hem ook installeren met npm. Daarvoor moet je de volgende commando's in je command prompt uitvoeren. Let wel, dit moet wel in de map of repository vanuit waar je werkt. npm install eslint eslint --init ESLint komt dan automatisch in je package.json te staan. Als je ESLint installeerd kun je verschillende configuraties van code conventies van verschillende grote bedrijven zoals Google en Airbnb. Maar als je niet alle instellingen wilt houden moet je de lint 'rules' zelf toevoegen of aanpassen in het .eslintrc.json bestand dat ook automatisch word gegenereerd als je ESLint installeerd. Bron: https://eslint.org/ Dit is een voorbeeld van een paar 'rules' die je kunt toevoegen/aanpassen in je .eslintrc bestand

{
    "extend": "airbnb-base",
    "plugins": [
        "import"
    ],
    "rules":{
        "no-unused-vars": 0,
        "prefer-const": "error",
        "no-var": 1,
        "quotes": ["error", "double"],
        "semi": [2, "always"]
    }
}