Jen Looper
4 years ago
committed by
GitHub
commit
10280ce36c
@ -0,0 +1,11 @@
|
|||||||
|
# De Documenten lezen
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Er zijn veel tools die een webontwikkelaar nodig heeft en die staan in de [MDN-documentatie voor client-side tooling](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecteer 3 tools die niet in de les worden behandeld, leg uit waarom een webontwikkelaar deze zou gebruiken en zoek naar een tool die onder deze categorie valt en deel de documentatie ervan. Gebruik niet hetzelfde toolvoorbeeld voor MDN-documenten.
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
Voorbeeldig | Voldoende | Moet Worden Verbeterd
|
||||||
|
--- | --- | -- |
|
||||||
|
|Uitgelegd waarom webontwikkelaar een tool zou gebruiken| Uitgelegd hoe, maar niet waarom de ontwikkelaar de tool zou gebruiken| Niet vermeld hoe of waarom een ontwikkelaar een tool zou gebruiken |
|
||||||
@ -0,0 +1,318 @@
|
|||||||
|
# Inleiding van GitHub
|
||||||
|
|
||||||
|
Deze les behandelt de basisprincipes van GitHub, een platform voor het hosten en beheren van wijzigingen in uw code.
|
||||||
|
|
||||||
|
|
||||||
|
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||||
|
|
||||||
|
## Quiz voorafgaand aan de lezing
|
||||||
|
[Quiz voorafgaand aan de lezing](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3)
|
||||||
|
|
||||||
|
## Inleiding
|
||||||
|
|
||||||
|
In deze les behandelen we:
|
||||||
|
|
||||||
|
- het volgen van het werk dat u op uw machine doet
|
||||||
|
- samen met anderen aan projecten werken
|
||||||
|
- hoe u kunt bijdragen aan open source software
|
||||||
|
|
||||||
|
### Vereisten
|
||||||
|
|
||||||
|
Voordat u begint, moet u controleren of Git is geïnstalleerd. In het terminal typ:
|
||||||
|
`git --version`
|
||||||
|
|
||||||
|
Als Git niet is geïnstalleerd, [download Git](https://git-scm.com/downloads). Stel vervolgens uw lokale Git-profiel in de terminal in:
|
||||||
|
* `git config --global user.name "uw-naam"`
|
||||||
|
* `git config --global user.email "uw-email"`
|
||||||
|
|
||||||
|
Om te controleren of Git al is geconfigureerd, kunt u het volgende typen:
|
||||||
|
`git config --list`
|
||||||
|
|
||||||
|
U heeft ook een GitHub-account nodig, een code-editor (zoals Visual Studio Code) en u moet uw terminal openen (of: command prompt).
|
||||||
|
|
||||||
|
Navigeer naar [github.com](https://github.com/) en maak een account aan als u dat nog niet heeft gedaan, of log in en vul uw profiel in.
|
||||||
|
|
||||||
|
✅ GitHub is niet de enige coderepository ter wereld; er zijn anderen, maar GitHub is de bekendste
|
||||||
|
|
||||||
|
### Voorbereiding
|
||||||
|
|
||||||
|
U heeft zowel een map met een codeproject op uw lokale computer (laptop of pc) als een openbare repository op GitHub nodig, die als voorbeeld zal dienen voor hoe u kunt bijdragen aan de projecten van anderen.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Code beheer
|
||||||
|
|
||||||
|
Laten we zeggen dat u lokaal een map hebt met een of ander codeproject en u wilt beginnen met het volgen van uw voortgang met git - het versiebeheersysteem. Sommige mensen vergelijken het gebruik van git met het schrijven van een liefdesbrief aan uw toekomstige zelf. Als u uw commitberichten dagen of weken of maanden later leest, zult u u kunnen herinneren waarom u een beslissing heeft genomen, of een wijziging "terugdraaien" - dat wil zeggen, wanneer u goede "commitberichten" schrijft.
|
||||||
|
|
||||||
|
### Taak: maak een repository en leg code vast
|
||||||
|
|
||||||
|
1. **Maak een repository op GitHub**. Zoek op GitHub.com, in het tabblad repositories, of in de navigatiebalk rechtsboven, de knop **new repo**.
|
||||||
|
|
||||||
|
1. Geef uw repository (map) een naam
|
||||||
|
1. Selecteer **create repository**.
|
||||||
|
|
||||||
|
1. **Navigeer naar uw werkmap**. Schakel in uw terminal naar de map (ook bekend als de directory) die u wilt beginnen met volgen. Typ:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd [naam van uw map]
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Initialiseer een git-repository**. In uw project, typ:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git init
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Controleer de status**. Om de status van uw repository te controleren, typ:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git status
|
||||||
|
```
|
||||||
|
|
||||||
|
de output kan er ongeveer zo uitzien:
|
||||||
|
|
||||||
|
```output
|
||||||
|
Changes not staged for commit:
|
||||||
|
(use "git add <file>..." to update what will be committed)
|
||||||
|
(use "git checkout -- <file>..." to discard changes in working directory)
|
||||||
|
|
||||||
|
modified: file.txt
|
||||||
|
modified: file2.txt
|
||||||
|
```
|
||||||
|
|
||||||
|
Typisch vertelt een `git status` commando u dingen zoals welke bestanden klaar zijn om _opgeslagen_ te worden naar de repo of bevat veranderingen die u misschien wilt behouden.
|
||||||
|
|
||||||
|
1. **Voeg alle bestanden toe voor tracking**
|
||||||
|
Dit wordt ook wel staging-bestanden/ bestanden toevoegen aan het staging-gebied genoemd.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
```
|
||||||
|
|
||||||
|
Het `git add` plus `.` argument geeft aan dat al uw bestanden en wijzigingen voor tracking geselecteerd zijn.
|
||||||
|
|
||||||
|
1. **Voeg geselecteerde bestanden toe voor tracking**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add [bestands- of mapnaam]
|
||||||
|
```
|
||||||
|
|
||||||
|
Dit helpt ons om alleen geselecteerde bestanden aan het staging-gebied toe te voegen als we niet alle bestanden tegelijk willen vastleggen.
|
||||||
|
|
||||||
|
1. **Unstage alle bestanden**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git reset
|
||||||
|
```
|
||||||
|
|
||||||
|
Dit commando helpt ons om alle bestanden tegelijk te unstagen.
|
||||||
|
|
||||||
|
1. **Unstage een bepaald bestand**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git reset [bestands- of mapnaam]
|
||||||
|
```
|
||||||
|
|
||||||
|
Dit commando helpt ons om alleen een bepaald bestand tegelijk te unstagen dat we niet willen opnemen voor de volgende commit.
|
||||||
|
|
||||||
|
1. **Uw werk voortzetten**. Op dit punt heeft u de bestanden toegevoegd aan een zogenaamd _staging-gebied_. Een plek waar Git uw bestanden bijhoudt. Om de wijziging permanent te maken, moet u de bestanden _commiten_. Om dit te doen maakt u een _commit_ aan met het `git commit` commando. Een _commit_ vertegenwoordigt een besparingspunt in de geschiedenis van uw repo. Typ het volgende om een _commit_ te maken:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git commit -m "eerste commit"
|
||||||
|
```
|
||||||
|
|
||||||
|
Dit commit al uw bestanden door het bericht "first commit" toe te voegen. Voor toekomstige commitberichten wilt u meer beschrijvend zijn in uw beschrijving om over te brengen wat voor soort wijziging u heeft aangebracht.
|
||||||
|
|
||||||
|
1. **Verbind uw lokale Git-repo met GitHub**. Een Git-repo is goed op uw computer, maar op een gegeven moment wilt u ergens een back-up van uw bestanden hebben en ook andere mensen uitnodigen om met u aan uw opslagplaats te werken. Een geweldige plek om dat te doen is GitHub. Onthoud dat we al een repo op GitHub hebben gemaakt, dus het enige dat we hoeven te doen, is onze lokale Git-repo verbinden met GitHub. Het commando `git remote add` zal precies dat doen. Typ de volgende commando:
|
||||||
|
|
||||||
|
> Let op: voordat u de opdracht typt, gaat u naar uw GitHub-repo-pagina om de repository-URL te vinden. U gebruikt het in het onderstaande commando. Vervang `repository_name` door uw GitHub-URL.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git remote add origin https://github.com/username/repository_name.git
|
||||||
|
```
|
||||||
|
|
||||||
|
Dit creëert een _remote_, of verbinding, genaamd "origin", wijzend naar de GitHub-repository die u eerder heeft gemaakt.
|
||||||
|
|
||||||
|
1. **Stuur lokale bestanden naar GitHub**. Tot nu toe heeft u een _verbinding_ gemaakt tussen de lokale repo en de GitHub-repo. Laten we deze bestanden naar GitHub sturen met het volgende commando `git push`, zoals zo:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git push -u origin main
|
||||||
|
```
|
||||||
|
|
||||||
|
Dit stuurt uw commits in uw "main" tak naar GitHub.
|
||||||
|
|
||||||
|
1. **Om meer wijzigingen toe te voegen**. Als u door wilt gaan met het aanbrengen van wijzigingen en ze naar GitHub wilt pushen, hoeft u alleen maar de volgende drie commando's te gebruiken:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "typ hier uw commitbericht"
|
||||||
|
git push
|
||||||
|
```
|
||||||
|
|
||||||
|
> Tip, misschien wilt u ook een `.gitignore`-bestand adopteren om te voorkomen dat bestanden die u niet wilt volgen, verschijnen op GitHub - zoals dat notitiesbestand dat u opslaat in dezelfde map maar geen plaats heeft op een openbare repository. U kunt sjablonen voor `.gitignore` bestanden vinden op [.gitignore templates](https://github.com/github/gitignore).
|
||||||
|
|
||||||
|
#### Commit berichten
|
||||||
|
|
||||||
|
Een geweldige onderwerpregel voor een commitbericht van Git maakt de volgende zin compleet:
|
||||||
|
Indien toegepast, zal deze commit <uw onderwerpregel hier>
|
||||||
|
|
||||||
|
Gebruik voor het onderwerp de gebiedende wijs, tegenwoordige tijd: "verander" niet "veranderd" noch "veranderingen".
|
||||||
|
Net als in het onderwerp, gebruik in het lichaam (optioneel) ook de imperatieve tegenwoordige tijd. Het lichaam moet de motivatie voor de verandering opnemen en dit contrasteren met eerder gedrag. U legt het `waarom` uit, niet het `hoe`.
|
||||||
|
|
||||||
|
✅ Neem een paar minuten de tijd om rond GitHub te surfen. Kunt u een echt geweldig commitbericht vinden? Kunt u een echt minimale vinden? Welke informatie is volgens u het belangrijkst en nuttigst om over te brengen in een commitbericht?
|
||||||
|
|
||||||
|
### Taak: Samenwerken
|
||||||
|
|
||||||
|
De belangrijkste reden om dingen op GitHub te zetten, was om het mogelijk te maken om samen te werken met andere ontwikkelaars.
|
||||||
|
|
||||||
|
## Samen met anderen aan projecten werken
|
||||||
|
|
||||||
|
Navigeer in uw repository naar `Insights > Community` om te zien hoe uw project zich verhoudt tot aanbevolen communitystandaarden.
|
||||||
|
|
||||||
|
Hier zijn enkele dingen die uw GitHub-repo kunnen verbeteren:
|
||||||
|
- **Omschrijving**. Heeft u een beschrijving voor uw project toegevoegd?
|
||||||
|
- **README**. Heeft u een README toegevoegd? GitHub biedt richtlijnen voor het schrijven van een [README](https://docs.github.com/articles/about-readmes/).
|
||||||
|
- **Richtlijn voor bijdragen**. Heeft uw project [richtlijnen voor bijdragen](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/),
|
||||||
|
- **Gedragscode**. Een [Gedragscode](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/),
|
||||||
|
- **Licentie**. Misschien nog belangrijker, een [licentie](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
|
||||||
|
|
||||||
|
|
||||||
|
Al deze middelen zullen nieuwe teamleden helpen. En dat zijn typisch het soort dingen waar nieuwe bijdragers naar kijken voordat ze zelfs maar naar uw code kijken, om erachter te komen of uw project de juiste plek is om hun tijd door te brengen.
|
||||||
|
|
||||||
|
✅ README-bestanden, hoewel ze wat tijd nodig hebben om voor te bereiden, worden vaak genegeerd door drukke beheerders. Kunt u een voorbeeld vinden van een bijzonder beschrijvende? Opmerking: er zijn enkele [tools om goede README's te maken](https://www.makeareadme.com/) die u misschien zou willen proberen.
|
||||||
|
|
||||||
|
### Taak: voeg een code samen
|
||||||
|
|
||||||
|
Documenten voor bijdragen helpen mensen bij te dragen aan het project. Het legt uit wat voor soort bijdragen u zoekt en hoe het proces werkt. Bijdragers moeten een reeks stappen doorlopen om bij te dragen aan uw repo op GitHub:
|
||||||
|
|
||||||
|
|
||||||
|
1. **Uw repo forken** Waarschijnlijk wilt u dat mensen uw project _forken_. Forken betekent het maken van een replica van uw repository op hun GitHub-profiel.
|
||||||
|
1. **Kloon**. Van daaruit zullen ze het project naar hun lokale computer klonen (clone).
|
||||||
|
1. **Maak een tak**. U zult ze willen vragen om een _tak_ voor hun werk te creëren (branch).
|
||||||
|
1. **Richt hun verandering op één gebied**. Vraag bijdragers om hun bijdragen op één ding tegelijk te concentreren - op die manier is de kans groter dat u hun werk kan _samenvoegen_ (merge). Stelt u voor dat ze een bugfix schrijven, een nieuwe functie toevoegen en verschillende tests bijwerken - wat als u slechts 2 van de 3 of 1 van de 3 wijzigingen wilt of kunt implementeren?
|
||||||
|
|
||||||
|
✅ Stelt u een situatie voor waarin takken bijzonder cruciaal zijn voor het schrijven en verzenden van goede code. Welke use-cases kunt u bedenken?
|
||||||
|
|
||||||
|
> Let op: wees de verandering die u in de wereld wilt zien, en maak ook takken voor uw eigen werk. Alle commits die u maakt, worden gemaakt op de tak waar u momenteel naar "uitgecheckt" bent. Gebruik `git status` om te zien welke tak dat is.
|
||||||
|
|
||||||
|
Laten we een workflow voor bijdragers doorlopen. Veronderstel dat de bijdrager de repo al _geforkt_ en _gekloond_ heeft, zodat ze een Git-repo hebben klaar om aan te werken, op hun lokale computer:
|
||||||
|
|
||||||
|
1. **Maak een tak**. Gebruik het commando `git branch` om een branch te maken die de wijzigingen bevat die ze willen bijdragen:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git branch [taknaam]
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Overschakelen naar werkende tak**. Schakel over naar de gespecificeerde tak en update de werkdirectory met `git checkout`:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git checkout [taknaam]
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Werken**. Op dit punt wilt u uw wijzigingen toevoegen. Vergeet niet om Git erover te vertellen met de volgende commando's:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "mijn veranderingen"
|
||||||
|
```
|
||||||
|
|
||||||
|
Zorg ervoor dat u uw commit een goede naam geeft, zowel voor u als voor de beheerder van de repo waarmee u helpt.
|
||||||
|
|
||||||
|
1. **Combineer uw werk met de `main` tak**. Op een gegeven moment bent u klaar met werken en wilt u uw werk combineren met dat van de `main` tak. De `main` tak kan ondertussen veranderd zijn, dus zorg ervoor dat u deze eerst bijwerkt naar de laatste versie met de volgende commando's:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git checkout main
|
||||||
|
git pull
|
||||||
|
```
|
||||||
|
|
||||||
|
Op dit punt wilt u er zeker van zijn dat alle _conflicten_, situaties waarin Git niet gemakkelijk de veranderingen kan _combineren_ plaatsvinden in uw werkende tak. Voer daarom de volgende opdrachten uit:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git checkout [taknaam]
|
||||||
|
git merge main
|
||||||
|
```
|
||||||
|
|
||||||
|
Dit brengt alle wijzigingen van `main` naar uw tak en hopelijk kunt u gewoon doorgaan. Als dit niet het geval is, zal VS Code u vertellen waar Git _in de war_ is en verandert u gewoon de betrokken bestanden om te zeggen welke inhoud het meest accuraat is.
|
||||||
|
|
||||||
|
1. **Stuur uw werk naar GitHub**. Het verzenden van uw werk naar GitHub betekent twee dingen. Uw tak naar uw repo pushen en vervolgens een PR, Pull Request openen.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git push --set-upstream origin [taknaam]
|
||||||
|
```
|
||||||
|
|
||||||
|
Het bovenstaande commando maakt de tak op uw geforkte repo.
|
||||||
|
|
||||||
|
1. **Open een PR**. Vervolgens wilt u een PR openen. U doet dat door naar de geforkte repo op GitHub te navigeren. U ziet een indicatie op GitHub waar het vraagt of u een nieuwe PR wilt maken, u klikt erop en u wordt naar een interface geleid waar u de titel van het commitbericht kunt wijzigen, geef het een meer geschikte beschrijving. Nu zal de beheerder van de repo die u heeft geforkt deze PR zien en, _vingers gekruist_, zullen ze uw PR waarderen en _samenvoegen_. U bent nu een bijdrager, yay :)
|
||||||
|
|
||||||
|
1. **Opruimen**. Het wordt als een goede gewoonte beschouwd om _op te ruimen_ nadat u met succes een PR hebt samengevoegd. U wilt zowel uw lokale tak opruimen als de tak die u naar GitHub hebt gepusht. Laten we het eerst lokaal verwijderen met het volgende commando:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git branch -d [taknaam]
|
||||||
|
```
|
||||||
|
|
||||||
|
Zorg ervoor dat u naar de GitHub-pagina gaat voor de geforkte repo en verwijder de externe tak die u er zojuist naartoe hebt gepusht.
|
||||||
|
|
||||||
|
`Pull request` lijkt een gekke term, omdat u uw wijzigingen echt in het project wilt pushen. Maar de onderhouder (projecteigenaar) of het kernteam moet rekening houden met uw wijzigingen voordat u deze samenvoegt met de "main" tak van het project, dus u vraagt echt om een wijzigingsbesluit van een onderhouder.
|
||||||
|
|
||||||
|
Een pull request is de plek om de verschillen die op een tak zijn geïntroduceerd te vergelijken en te bespreken met recensies, opmerkingen, geïntegreerde tests en meer. Een goed pull request volgt ongeveer dezelfde regels als een commitbericht. U kunt een verwijzing naar een probleem (issue) toevoegen in de issue tracker, bijvoorbeeld wanneer uw werk een probleem oplost. Dit doet u met een `#` gevolgd door het nummer van uw probleem. Bijvoorbeeld `# 97`.
|
||||||
|
|
||||||
|
🤞Duimen dat alle controles slagen en de projecteigenaar(s) uw wijzigingen in het project samenvoegen🤞
|
||||||
|
|
||||||
|
Update uw huidige lokale werkende tak met alle nieuwe commits van de corresponderende remote tak op GitHub:
|
||||||
|
|
||||||
|
`git pull`
|
||||||
|
|
||||||
|
## Hoe u kunt bijdragen aan open source
|
||||||
|
|
||||||
|
Laten we eerst een repository - of: repo - op GitHub zoeken die voor u interessant is en waaraan u een wijziging zou willen bijdragen. U zult de inhoud ervan naar uw machine kopiëren.
|
||||||
|
|
||||||
|
✅ Een goede manier om 'beginnersvriendelijke' repos te vinden, is door [te zoeken op de tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Er zijn verschillende manieren om code te kopiëren. Een manier is om de inhoud van de repository te "klonen" door HTTPS, SSH of de GitHub CLI (Command Line Interface) te gebruiken.
|
||||||
|
|
||||||
|
Open uw terminal en kloon de repository op deze manier:
|
||||||
|
`git clone https://github.com/ProjectURL`
|
||||||
|
|
||||||
|
Schakel naar de juiste map om aan het project te werken:
|
||||||
|
`cd ProjectURL`
|
||||||
|
|
||||||
|
U kunt ook het hele project openen met [Codespaces](https://github.com/features/codespaces), GitHub's ingesloten code-editor /cloud-ontwikkelomgeving of [GitHub Desktop](https://desktop.github.com/).
|
||||||
|
|
||||||
|
Ten slotte kunt u de code downloaden in een gecomprimeerde map.
|
||||||
|
|
||||||
|
### Nog een paar interessante dingen over GitHub
|
||||||
|
|
||||||
|
U kunt elke openbare repository op GitHub een ster geven, bekijken en/of "forken". U kunt uw repositories met ster vinden in het vervolgkeuzemenu rechtsboven. Het is net als bladwijzers, maar dan voor code.
|
||||||
|
|
||||||
|
Projecten hebben een issue tracker, meestal op GitHub in de "Issues" tab, tenzij anders aangegeven, waar mensen problemen bespreken die verband houden met het project. En op het tabblad Pull Requests bespreken en beoordelen mensen lopende wijzigingen.
|
||||||
|
|
||||||
|
Projecten kunnen ook worden besproken in forums, mailinglijsten of chatkanalen zoals Slack, Discord of IRC.
|
||||||
|
|
||||||
|
✅ Kijk eens rond in uw nieuwe GitHub-repo en probeer een paar dingen, zoals het bewerken van instellingen, het toevoegen van informatie aan uw repo en het maken van een project (zoals een Kanban-bord). U kunt veel doen!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Uitdaging
|
||||||
|
|
||||||
|
Koppel met een vriend om aan elkaars code te werken. Creëer gezamenlijk een project, fork code, maak takken en voeg wijzigingen samen.
|
||||||
|
|
||||||
|
## Quiz na de lezing
|
||||||
|
[Quiz na de lezing](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4)
|
||||||
|
|
||||||
|
## Beoordeling en zelfstudie
|
||||||
|
|
||||||
|
Lees meer over [bijdragen aan open source software](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
|
||||||
|
|
||||||
|
[Git-cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
|
||||||
|
|
||||||
|
Oefenen, oefenen, oefenen. GitHub heeft geweldige leertrajecten beschikbaar via [lab.github.com](https://lab.github.com/):
|
||||||
|
|
||||||
|
- [Eerste week op GitHub](https://lab.github.com/githubtraining/first-week-on-github)
|
||||||
|
|
||||||
|
U zult ook meer geavanceerde labs vinden.
|
||||||
|
|
||||||
|
## Toewijzing
|
||||||
|
|
||||||
|
Voltooi [de eerste week op GitHub-trainingslaboratorium](https://lab.github.com/githubtraining/first-week-on-github)
|
||||||
@ -0,0 +1,229 @@
|
|||||||
|
# Toegankelijke webpagina's maken
|
||||||
|
|
||||||
|
|
||||||
|
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||||
|
|
||||||
|
## Quiz voorafgaand aan de lezing
|
||||||
|
[Quiz voorafgaand aan de lezing](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5)
|
||||||
|
|
||||||
|
> De kracht van het web zit in zijn universaliteit. Toegang voor iedereen, ongeacht hun handicap, is een essentieel aspect.
|
||||||
|
>
|
||||||
|
> \- Sir Timothy Berners-Lee, W3C-directeur en uitvinder van het World Wide Web
|
||||||
|
|
||||||
|
Deze quote benadrukt perfect het belang van het creëren van toegankelijke websites. Een applicatie die niet voor iedereen toegankelijk is, is per definitie uitsluiting. Als webontwikkelaars moeten we altijd rekening houden met toegankelijkheid. Door deze focus vanaf het begin te hebben, bent u goed op weg om ervoor te zorgen dat iedereen toegang heeft tot de pagina's die u maakt. In deze les leert u over de tools die u kunnen helpen ervoor te zorgen dat uw webitems toegankelijk zijn en hoe u kunt bouwen met toegankelijkheid in gedachten.
|
||||||
|
|
||||||
|
## Tools om te gebruiken
|
||||||
|
|
||||||
|
### Schermlezers
|
||||||
|
|
||||||
|
Een van de bekendste toegankelijkheidstools zijn schermlezers.
|
||||||
|
|
||||||
|
[Schermlezers](https://nl.wikipedia.org/wiki/Schermlezer) zijn veelgebruikte clients voor mensen met een visuele beperking. Omdat we er tijd voor besteden om ervoor te zorgen dat een browser de informatie die we willen delen correct overbrengt, moeten we er ook voor zorgen dat een schermlezer hetzelfde doet.
|
||||||
|
|
||||||
|
In de basis leest een schermlezer een pagina hoorbaar van boven naar beneden. Als uw pagina alleen uit tekst bestaat, zal de lezer de informatie op dezelfde manier overbrengen naar een browser. Webpagina's zijn natuurlijk zelden louter tekst; ze bevatten links, afbeeldingen, kleur en andere visuele componenten. Er moet voor worden gezorgd dat deze informatie correct wordt gelezen door een schermlezer.
|
||||||
|
|
||||||
|
Elke webontwikkelaar moet vertrouwd raken met een schermlezer. Zoals hierboven aangegeven, is het de client die uw gebruikers zullen gebruiken. Net zoals u bekend bent met hoe een browser werkt, moet u leren hoe een schermlezer werkt. Gelukkig zijn schermlezers in de meeste besturingssystemen ingebouwd.
|
||||||
|
|
||||||
|
Sommige browsers hebben ook ingebouwde tools en extensies die tekst hardop kunnen voorlezen of zelfs enkele basisnavigatiefuncties bieden, zoals [deze op toegankelijkheid gerichte Edge-browserhulpmiddelen](https://support.microsoft.com/nl-nl/microsoft-edge/toegankelijkheidsfuncties-in-microsoft-edge-4c696192-338e-9465-b2cd-bd9b698ad19a). Dit zijn ook belangrijke toegankelijkheidstools, maar ze werken heel anders dan schermlezers en ze mogen niet worden aangezien voor testtools voor schermlezers.
|
||||||
|
|
||||||
|
✅ Probeer een schermlezer en browsertekstlezer. Op Windows is [Narrator](https://support.microsoft.com/nl-nl/windows/volledige-handleiding-voor-verteller-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) standaard inbegrepen, en [JAWS](https://webaim.org/articles/jaws/) en [NVDA](https://www.nvaccess.org/about-nvda/) kunnen ook worden geïnstalleerd. Op macOS en iOS is [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) standaard geïnstalleerd.
|
||||||
|
|
||||||
|
### Zoom
|
||||||
|
|
||||||
|
Een ander hulpmiddel dat vaak wordt gebruikt door mensen met een visuele beperking, is zoomen. De meest basale manier van zoomen is statische zoom, bestuurd via `Control + plusteken (+)` of door de schermresolutie te verlagen. Dit type zoom zorgt ervoor dat het formaat van de hele pagina wordt aangepast, dus het gebruik van [responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) is belangrijk om een goede gebruikerservaring te bieden bij verhoogde zoomniveaus.
|
||||||
|
|
||||||
|
Een ander type zoom is afhankelijk van gespecialiseerde software om een deel van het scherm te vergroten en te pannen, net zoals bij het gebruik van een echt vergrootglas. Op Windows is [Magnifier](https://support.microsoft.com/nl-nl/windows/vergrootglas-gebruiken-voor-een-betere-zichtbaarheid-op-het-scherm-414948ba-8b1c-d3bd-8615-0e5e32204198) ingebouwd en [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) is vergrotingssoftware van derden met meer functies en een groter gebruikersbestand. Zowel macOS als iOS hebben ingebouwde vergrotingssoftware genaamd [Zoom](https://www.apple.com/nl/accessibility/vision/).
|
||||||
|
|
||||||
|
### Contrast checkers
|
||||||
|
|
||||||
|
Kleuren op websites moeten zorgvuldig worden gekozen om tegemoet te komen aan de behoeften van kleurenblinde gebruikers of mensen die moeite hebben met het zien van kleuren met een laag contrast.
|
||||||
|
|
||||||
|
✅ Test een website die u graag gebruikt voor kleurgebruik met een browserextensie zoals [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Wat leer je?
|
||||||
|
|
||||||
|
### Lighthouse
|
||||||
|
|
||||||
|
In het ontwikkelaarstoolgedeelte van uw browser vindt u de Lighthouse-tool. Deze tool is belangrijk om een eerste beeld te krijgen van de toegankelijkheid (en ook andere analyses) van een website. Hoewel het belangrijk is om niet uitsluitend op Lighthouse te vertrouwen, is een score van 100% erg nuttig als uitgangspunt.
|
||||||
|
|
||||||
|
✅ Zoek Lighthouse in het ontwikkelaarstoolpaneel van uw browser en voer een analyse uit op elke site. wat ontdek je?
|
||||||
|
|
||||||
|
## Ontwerpen voor toegankelijkheid
|
||||||
|
|
||||||
|
Toegankelijkheid is een relatief groot onderwerp. Om u te helpen, zijn er tal van bronnen beschikbaar.
|
||||||
|
|
||||||
|
- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
|
||||||
|
|
||||||
|
Hoewel we niet elk aspect van het maken van toegankelijke sites kunnen behandelen, staan hieronder enkele van de kernprincipes die u wilt implementeren. Het ontwerpen van een toegankelijke pagina vanaf het begin is **altijd** gemakkelijker dan teruggaan naar een bestaande pagina om deze toegankelijk te maken.
|
||||||
|
|
||||||
|
## Goede weergaveprincipes
|
||||||
|
|
||||||
|
### Kleur veilige paletten
|
||||||
|
|
||||||
|
Mensen zien de wereld op verschillende manieren, inclusief kleuren. Wanneer u een kleurenschema voor uw site selecteert, moet u ervoor zorgen dat het voor iedereen toegankelijk is. Een geweldig [hulpmiddel voor het genereren van kleurenpaletten is Color Safe](http://colorsafe.co/).
|
||||||
|
|
||||||
|
✅ Identificeer een website die erg problematisch is in het gebruik van kleur. Waarom?
|
||||||
|
|
||||||
|
### Gebruik de juiste HTML
|
||||||
|
|
||||||
|
Met CSS en JavaScript is het mogelijk om elk element eruit te laten zien als elk type besturingselement. `<span>` kan worden gebruikt om een `<button>` te maken en `<b>` kan een hyperlink worden. Hoewel dit misschien als gemakkelijker te stylen wordt beschouwd, brengt het niets over op een schermlezer. Gebruik de juiste HTML bij het maken van besturingselementen op een pagina. Als u een hyperlink wilt, gebruik dan `<a>`. Het gebruik van de juiste HTML voor de juiste besturing wordt het gebruik van Semantische HTML genoemd.
|
||||||
|
|
||||||
|
✅ Ga naar een website en kijk of de ontwerpers en ontwikkelaars HTML correct gebruiken. Kunt u een button vinden die een link zou moeten zijn? Tip: klik met de rechtermuisknop en kies 'View Page Source' in uw browser om de onderliggende code te bekijken.
|
||||||
|
|
||||||
|
### Maak een beschrijvende kophiërarchie
|
||||||
|
|
||||||
|
Gebruikers van schermlezers [zijn sterk afhankelijk van koppen](https://webaim.org/projects/screenreadersurvey8/#finding) om informatie te vinden en door een pagina te navigeren. Het schrijven van beschrijvende koptekst en het gebruik van semantische koptags zijn belangrijk voor het maken van een gemakkelijk navigeerbare site voor gebruikers van schermlezers.
|
||||||
|
|
||||||
|
### Gebruik goede visuele aanwijzingen
|
||||||
|
|
||||||
|
CSS biedt volledige controle over het uiterlijk van elk element op een pagina. U kunt tekstvakken zonder omtreklijn of hyperlinks zonder onderstreping maken. Helaas kan het verwijderen van die aanwijzingen het voor iemand die van hen afhankelijk is, uitdagender maken om het type controle te herkennen.
|
||||||
|
|
||||||
|
## Het belang van linktekst
|
||||||
|
|
||||||
|
Hyperlinks zijn essentieel voor het navigeren op internet. Als gevolg hiervan kunnen alle gebruikers door uw site navigeren door ervoor te zorgen dat een schermlezer links correct kan lezen.
|
||||||
|
|
||||||
|
### Schermlezers en links
|
||||||
|
|
||||||
|
Zoals u zou verwachten, lezen schermlezers linktekst op dezelfde manier als andere tekst op de pagina. Met dit in gedachten kan de onderstaande tekst volkomen acceptabel aanvoelen.
|
||||||
|
|
||||||
|
> De Dwergpinguïn, ook wel bekend als de sprookjespinguïn, is de kleinste pinguïn ter wereld. [Klik hier](https://nl.wikipedia.org/wiki/Dwergpingu%C3%AFn) voor meer informatie.
|
||||||
|
|
||||||
|
> De Dwergpinguïn, ook wel bekend als de sprookjespinguïn, is de kleinste pinguïn ter wereld. Bezoek https://nl.wikipedia.org/wiki/Dwergpingu%C3%AFn voor meer informatie.
|
||||||
|
|
||||||
|
> **OPMERKING** Zoals u gaat lezen, moet u **nooit** links maken die er als hierboven uitzien.
|
||||||
|
|
||||||
|
Onthoud dat schermlezers een andere interface zijn dan browsers met een andere set functies.
|
||||||
|
|
||||||
|
### Het probleem met het gebruik van de URL
|
||||||
|
|
||||||
|
Schermlezers lezen de tekst. Als er een URL in de tekst voorkomt, leest de schermlezer de URL. Over het algemeen geeft de URL geen zinvolle informatie over en kan deze vervelend klinken. Mogelijk heeft u dit ondervonden als uw telefoon ooit een sms-bericht met een URL hoorbaar heeft gelezen.
|
||||||
|
|
||||||
|
### Het probleem met "klik hier"
|
||||||
|
|
||||||
|
Schermlezers hebben ook de mogelijkheid om alleen de hyperlinks op een pagina te lezen, net zoals een ziende een pagina zou scannen op links. Als de linktekst altijd "klik hier" is, hoort de gebruiker alleen "klik hier, klik hier, klik hier, klik hier, klik hier, ..." Alle links zijn nu niet meer van elkaar te onderscheiden.
|
||||||
|
|
||||||
|
### Goede linktekst
|
||||||
|
|
||||||
|
Een goede linktekst beschrijft in het kort wat er aan de andere kant van de link staat. In het bovenstaande voorbeeld over Dwergpinguïns, is de link naar de Wikipedia-pagina over de soort. De zin *Dwergpinguïns* zou zorgen voor perfecte linktekst, omdat het duidelijk maakt wat iemand zal leren als ze op de link klikken - Dwergpinguïns.
|
||||||
|
|
||||||
|
> De [Dwergpinguïn](https://nl.wikipedia.org/wiki/Dwergpingu%C3%AFn), ook wel bekend als de sprookjespinguïn, is de kleinste pinguïn ter wereld.
|
||||||
|
|
||||||
|
✅ Surf een paar minuten op internet om pagina's te vinden die obscure koppelingsstrategieën gebruiken. Vergelijk ze met andere, beter gekoppelde sites. Wat leer je?
|
||||||
|
|
||||||
|
#### Aantekeningen bij zoekmachines
|
||||||
|
|
||||||
|
Als extra bonus om ervoor te zorgen dat uw site voor iedereen toegankelijk is, helpt u zoekmachines ook bij het navigeren op uw site. Zoekmachines gebruiken linktekst om de onderwerpen van pagina's te leren. Het gebruik van goede linkteksten helpt dus iedereen!
|
||||||
|
|
||||||
|
### ARIA
|
||||||
|
|
||||||
|
Stelt u de volgende pagina voor:
|
||||||
|
|
||||||
|
| Product | beschrijving | Volgorde |
|
||||||
|
| ------------ | ------------------ | ------------ |
|
||||||
|
| Widget | [beschrijving]('#') | [Volgorde]('#') |
|
||||||
|
| Super widget | [beschrijving]('#') | [Volgorde]('#') |
|
||||||
|
|
||||||
|
In dit voorbeeld is het zinvol om de tekst van de beschrijving en volgorde te dupliceren voor iemand die een browser gebruikt. Iemand die een schermlezer gebruikt, hoort echter alleen de woorden *beschrijving* en *volgorde* herhaald zonder context.
|
||||||
|
|
||||||
|
Om dit soort scenario's te ondersteunen, ondersteunt HTML een set attributen die bekend staan als [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA). Met deze attributen kunt u aanvullende informatie verstrekken aan schermlezers.
|
||||||
|
|
||||||
|
> **OPMERKING**: Zoals veel aspecten van HTML, kan de ondersteuning van browser en schermlezer variëren. De meeste mainline-clients ondersteunen echter ARIA-attributen.
|
||||||
|
|
||||||
|
U kunt `aria-label` gebruiken om de link te beschrijven als het formaat van de pagina dat niet toestaat. De beschrijving voor widget kan worden ingesteld als
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<a href="#" aria-label="Widget description">beschrijving</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Over het algemeen vervangt het gebruik van semantische opmaak zoals hierboven beschreven het gebruik van ARIA, maar soms is er geen semantisch equivalent voor verschillende HTML-widgets. Een goed voorbeeld is een boom. Er is geen HTML-equivalent voor een boomstructuur, dus identificeert u de generieke `<div>` voor dit element met een juiste rol en aria-waarden. De [MDN-documentatie over ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) bevat meer nuttige informatie.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h2 id="tree-label">File Viewer</h2>
|
||||||
|
<div role="tree" aria-labelledby="tree-label">
|
||||||
|
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Afbeeldingen
|
||||||
|
|
||||||
|
Het spreekt voor zich dat schermlezers niet automatisch kunnen lezen wat er in een afbeelding staat. Ervoor zorgen dat afbeeldingen toegankelijk zijn, kost niet veel werk - daar gaat het bij het `alt`-attribuut om. Alle betekenisvolle afbeeldingen moeten een `alt` hebben om te beschrijven wat ze zijn.
|
||||||
|
Voor afbeeldingen die puur decoratief zijn, moet het `alt`-attribuut worden ingesteld op een lege tekenreeks: `alt=""`. Hiermee wordt voorkomen dat schermlezers de decoratieve afbeelding onnodig aankondigen.
|
||||||
|
|
||||||
|
✅ Zoals u zou verwachten, kunnen zoekmachines ook niet begrijpen wat er in een afbeelding staat. Ze gebruiken ook alt-tekst. Dus nogmaals, ervoor zorgen dat uw pagina toegankelijk is, levert extra bonussen op!
|
||||||
|
|
||||||
|
## Het toetsenbord
|
||||||
|
|
||||||
|
Sommige gebruikers kunnen geen muis of trackpad gebruiken, maar vertrouwen op toetsenbordinteracties om van het ene element naar het andere te gaan. Het is belangrijk dat uw website uw inhoud in een logische volgorde presenteert, zodat een toetsenbordgebruiker toegang heeft tot elk interactief element terwijl ze door een document bladeren. Als u uw webpagina's bouwt met semantische opmaak en CSS gebruikt om hun visuele lay-out op te maken, moet uw site toetsenbord-navigeerbaar zijn, maar het is belangrijk om dit aspect handmatig te testen. Meer informatie over [strategieën voor toetsenbordnavigatie](https://webaim.org/techniques/keyboard/).
|
||||||
|
|
||||||
|
✅ Ga naar een website en probeer er doorheen te navigeren met alleen uw toetsenbord. Wat werkt, wat werkt niet? Waarom?
|
||||||
|
|
||||||
|
## Overzicht
|
||||||
|
|
||||||
|
Een web dat voor sommigen toegankelijk is, is niet echt een 'world-wide web'. De beste manier om ervoor te zorgen dat de sites die u maakt, toegankelijk zijn, is door vanaf het begin de best practices voor toegankelijkheid op te nemen. Hoewel er extra stappen bij betrokken zijn, betekent het opnemen van deze vaardigheden in uw workflow dat alle pagina's die u maakt, toegankelijk zijn.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Uitdaging
|
||||||
|
|
||||||
|
Neem deze HTML en herschrijf deze zodat deze zo toegankelijk mogelijk is, gezien de strategieën die u hebt geleerd.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>
|
||||||
|
Example
|
||||||
|
</title>
|
||||||
|
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="site-header">
|
||||||
|
<p class="site-title">Turtle Ipsum</p>
|
||||||
|
<p class="site-subtitle">The World's Premier Turtle Fan Club</p>
|
||||||
|
</div>
|
||||||
|
<div class="main-nav">
|
||||||
|
<p class="nav-header">Resources</p>
|
||||||
|
<div class="nav-list">
|
||||||
|
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
|
||||||
|
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
|
||||||
|
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main-content">
|
||||||
|
<div>
|
||||||
|
<p class="page-title">Welcome to Turtle Ipsum.
|
||||||
|
<a href="">Click here</a> to learn more.
|
||||||
|
</p>
|
||||||
|
<p class="article-text">
|
||||||
|
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div class="footer-section">
|
||||||
|
<span class="button">Sign up for turtle news</span>
|
||||||
|
</div><div class="footer-section">
|
||||||
|
<p class="nav-header footer-title">
|
||||||
|
Internal Pages
|
||||||
|
</p>
|
||||||
|
<div class="nav-list">
|
||||||
|
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
|
||||||
|
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="footer-copyright">© 2016 Instrument</span>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Quiz na de lezing
|
||||||
|
[Quiz na de lezing](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/6)
|
||||||
|
|
||||||
|
## Beoordeling en zelfstudie
|
||||||
|
|
||||||
|
Veel regeringen hebben wetten met betrekking tot toegankelijkheidseisen. Lees de toegankelijkheidswetten van uw thuisland. Wat wordt er gedekt en wat niet? Een voorbeeld is [deze overheidswebsite](https://accessibility.blog.gov.uk/).
|
||||||
|
|
||||||
|
## Toewijzing
|
||||||
|
|
||||||
|
[Analyseer een niet-toegankelijke website](assignment.nl.md)
|
||||||
|
|
||||||
|
Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) door instrument
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Analyseer een niet-toegankelijke website
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Identificeer een website waarvan u denkt dat deze NIET toegankelijk is, en maak een actieplan om de toegankelijkheid ervan te verbeteren. Uw eerste taak zou zijn om deze site te identificeren, de manieren te beschrijven waarop u denkt dat deze ontoegankelijk is zonder analytische tools te gebruiken, en deze vervolgens door een Lighthouse-analyse te laten gaan. Neem de resultaten van deze analyse en maak een gedetailleerd plan met minimaal tien punten waaruit blijkt hoe de site kan worden verbeterd.
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
|
||||||
|
| studentenrapport | bevat paragrafen over hoe de site ontoereikend is, het Lighthouse-rapport vastgelegd als pdf, een lijst met tien punten die verbeterd kunnen worden, met details over hoe deze te verbeteren | ontbreekt 20% van de vereiste | ontbreekt 50% van de vereiste |
|
||||||
@ -0,0 +1,196 @@
|
|||||||
|
# JavaScript Basics: Gegevenstypen
|
||||||
|
|
||||||
|
|
||||||
|
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||||
|
|
||||||
|
## Quiz voorafgaand aan de lezing
|
||||||
|
[Quiz voorafgaand aan de lezing](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/7)
|
||||||
|
|
||||||
|
Deze les behandelt de basisprincipes van JavaScript, de taal die voor interactiviteit op internet zorgt.
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Gegevenstypen in JavaScript")
|
||||||
|
|
||||||
|
|
||||||
|
Laten we beginnen met variabelen en de gegevenstypen waarmee ze worden gevuld!
|
||||||
|
|
||||||
|
## Variabelen
|
||||||
|
|
||||||
|
Variabelen slaan waarden op die in uw code kunnen worden gebruikt en gewijzigd.
|
||||||
|
|
||||||
|
Het creëren en **declareren** van een variabele heeft de volgende syntaxis **[sleutelwoord] [naam]**. Het bestaat uit twee delen:
|
||||||
|
|
||||||
|
- **Sleutelwoord**. Sleutelwoorden kunnen `let` of `var` zijn.
|
||||||
|
|
||||||
|
> Let op, het sleutelwoord `let` is geïntroduceerd in ES6 en geeft uw variabele een zogenaamde _block scope_. Het wordt aanbevolen om `let` over `var` te gebruiken. In toekomstige delen gaan we dieper in op block scopes.
|
||||||
|
- **De variabelenaam**, dit is een naam die u zelf kiest.
|
||||||
|
|
||||||
|
### Taak - werken met variabelen
|
||||||
|
|
||||||
|
1. **Declareer een variabele**. Laten we een variabele declareren met het sleutelwoord `let`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let myVariable;
|
||||||
|
```
|
||||||
|
|
||||||
|
`myVariable` is nu gedeclareerd met het `let` sleutelwoord. Het heeft momenteel geen waarde.
|
||||||
|
|
||||||
|
1. **Wijs een waarde toe**. Sla een waarde op in een variabele met de operator `=`, gevolgd door de verwachte waarde.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
myVariable = 123;
|
||||||
|
```
|
||||||
|
|
||||||
|
> Let op: het gebruik van `=` in deze les betekent dat we gebruik maken van een "toewijzingsoperator", die wordt gebruikt om een waarde aan een variabele te geven. Het duidt niet op gelijkheid.
|
||||||
|
|
||||||
|
`myVariable` is nu *geïnitialiseerd* met de waarde 123.
|
||||||
|
|
||||||
|
1. **Refactor**. Vervang uw code door de volgende verklaring.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let myVariable = 123;
|
||||||
|
```
|
||||||
|
|
||||||
|
Het bovenstaande wordt een _expliciete initialisatie_ genoemd wanneer een variabele wordt gedeclareerd en tegelijkertijd een waarde krijgt toegewezen.
|
||||||
|
|
||||||
|
1. **Wijzig de variabele waarde**. Wijzig de waarde van de variabele op de volgende manier:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
myVariable = 321;
|
||||||
|
```
|
||||||
|
|
||||||
|
Zodra een variabele is gedeclareerd, kunt u de waarde ervan op elk moment in uw code wijzigen met de operator `=` en de nieuwe waarde.
|
||||||
|
|
||||||
|
✅ Probeer het! U kunt JavaScript rechtstreeks in uw browser schrijven. Open een browservenster en ga naar Developer Tools. In de console vind u een prompt; typ `let myVariable = 123`, druk op Return en typ vervolgens `myVariable`. Wat gebeurt er? Let op, in de volgende lessen leert u meer over deze concepten.
|
||||||
|
|
||||||
|
## Constanten
|
||||||
|
|
||||||
|
Declaratie en initialisatie van een constante volgt dezelfde concepten als een variabele, met uitzondering van het sleutelwoord `const`. Constanten worden doorgaans gedeclareerd met alleen hoofdletters.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const MY_VARIABLE = 123;
|
||||||
|
```
|
||||||
|
|
||||||
|
Constanten zijn vergelijkbaar met variabelen, met twee uitzonderingen:
|
||||||
|
|
||||||
|
- **Moet waarde hebben**. Constanten moeten worden geïnitialiseerd, anders treedt er een fout op bij het uitvoeren van code.
|
||||||
|
- **Referentie kan niet worden gewijzigd**. De referentie van een constante kan niet worden gewijzigd nadat deze is geïnitialiseerd, anders treedt er een fout op bij het uitvoeren van code. Laten we naar twee voorbeelden kijken:
|
||||||
|
- **Eenvoudige waarde**. Het volgende is NIET toegestaan:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const PI = 3;
|
||||||
|
PI = 4; // niet toegestaan
|
||||||
|
```
|
||||||
|
|
||||||
|
- **Objectreferentie is beveiligd**. Het volgende is NIET toegestaan.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const obj = { a: 3 };
|
||||||
|
obj = { b: 5 } // niet toegestaan
|
||||||
|
```
|
||||||
|
|
||||||
|
- **Objectwaarde is niet beschermd**. Het volgende is toegestaan:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const obj = { a: 3 };
|
||||||
|
obj.a = 5; // toegestaan
|
||||||
|
```
|
||||||
|
|
||||||
|
Hierboven verandert u de waarde van het object maar niet de referentie zelf, waardoor het toegestaan is.
|
||||||
|
|
||||||
|
> Let op: een 'const' betekent dat de referentie is beschermd tegen opnieuw toewijzen. De waarde is echter niet _onveranderlijk_ en kan veranderen, vooral als het een complexe constructie is, zoals een object.
|
||||||
|
|
||||||
|
## Gegevenstypen
|
||||||
|
|
||||||
|
Variabelen kunnen veel verschillende soorten waarden opslaan, zoals getallen en tekst. Deze verschillende soorten waarden staan bekend als het **gegevenstype**. Gegevenstypen zijn een belangrijk onderdeel van softwareontwikkeling omdat het ontwikkelaars helpt beslissingen te nemen over hoe de code moet worden geschreven en hoe de software moet worden uitgevoerd. Bovendien hebben sommige gegevenstypen unieke kenmerken die helpen bij het transformeren of extraheren van aanvullende informatie in een waarde.
|
||||||
|
|
||||||
|
✅ Gegevenstypen worden ook wel JavaScript-gegevensprimitieven genoemd, omdat dit de gegevenstypen op het laagste niveau zijn die door de taal worden geleverd. Er zijn 6 primitieve gegevenstypen: string, number, bigint, boolean, undefined, en symbol. Neem even de tijd om te visualiseren wat elk van deze primitieven zou kunnen vertegenwoordigen. Wat is een `zebra`? Hoe zit het met `0`? `true`?
|
||||||
|
|
||||||
|
### Getallen
|
||||||
|
|
||||||
|
In de vorige sectie was de waarde van `myVariable` een gegevenstype met een getal.
|
||||||
|
|
||||||
|
`let myVariable = 123;`
|
||||||
|
|
||||||
|
Variabelen kunnen alle soorten getallen opslaan, inclusief decimalen of negatieve getallen. Getallen kunnen ook worden gebruikt met rekenkundige operatoren, behandeld in de [volgende sectie](#operators).
|
||||||
|
|
||||||
|
### Rekenkundige operatoren
|
||||||
|
|
||||||
|
Er zijn verschillende soorten operatoren die kunnen worden gebruikt bij het uitvoeren van rekenkundige functies, en sommige worden hier vermeld:
|
||||||
|
|
||||||
|
| Symbool | beschrijving | Voorbeeld |
|
||||||
|
| ------- | ------------------------------------------------------------- | ---------------------------------- |
|
||||||
|
| `+` | **Toevoeging**: Berekent de som van twee getallen | `1 + 2 //verwacht antwoord is 3` |
|
||||||
|
| `-` | **Aftrekken**: Berekent het verschil tussen twee getallen | `1 - 2 //verwacht antwoord is -1` |
|
||||||
|
| `*` | **Vermenigvuldiging**: Berekent het product van twee getallen | `1 * 2 //verwacht antwoord is 2` |
|
||||||
|
| `/` | **Divisie**: Berekent het quotiënt van twee getallen | `1 / 2 //verwacht antwoord is 0.5` |
|
||||||
|
| `%` | **Rest**: Berekent de rest uit de deling van twee getallen | `1 % 2 //verwacht antwoord is 1` |
|
||||||
|
|
||||||
|
✅ Probeer het! Probeer een rekenkundige bewerking in de console van uw browser. Verrassen de resultaten u?
|
||||||
|
|
||||||
|
### Strings
|
||||||
|
|
||||||
|
Strings zijn sets van tekens die tussen enkele of dubbele aanhalingstekens staan.
|
||||||
|
|
||||||
|
- `'Dit is een string'`
|
||||||
|
- `"Dit is ook een string"`
|
||||||
|
- `let myString = 'Dit is een tekenreekswaarde die is opgeslagen in een variabele';`
|
||||||
|
|
||||||
|
Denk eraan om aanhalingstekens te gebruiken bij het schrijven van een string, anders neemt JavaScript aan dat het een variabelenaam is.
|
||||||
|
|
||||||
|
### Strings formatteren
|
||||||
|
|
||||||
|
Strings zijn tekstueel en moeten van tijd tot tijd worden opgemaakt.
|
||||||
|
|
||||||
|
Gebruik de operator `+` om twee of meer strings **samen te voegen**.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let myString1 = "Hello";
|
||||||
|
let myString2 = "World";
|
||||||
|
|
||||||
|
myString1 + myString2 + "!"; //HelloWorld!
|
||||||
|
myString1 + " " + myString2 + "!"; //Hello World!
|
||||||
|
myString1 + ", " + myString2 + "!"; //Hello, World!
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Waarom is `1 + 1 = 2` in JavaScript, maar `'1' + '1' = 11?` Denk er eens over na. Hoe zit het met `'1' + 1`?
|
||||||
|
|
||||||
|
**Template literals** zijn een andere manier om strings op te maken, behalve dat in plaats van aanhalingstekens de backtick wordt gebruikt. Alles wat geen platte tekst is, moet tussen tijdelijke aanduidingen `${}` worden geplaatst. Dit omvat alle variabelen die strings kunnen zijn.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let myString1 = "Hello";
|
||||||
|
let myString2 = "World";
|
||||||
|
|
||||||
|
`${myString1} ${myString2}!` //Hello World!
|
||||||
|
`${myString1}, ${myString2}!` //Hello, World!
|
||||||
|
```
|
||||||
|
|
||||||
|
U kunt uw opmaakdoelen met beide methoden bereiken, maar template literals respecteren alle spaties en regeleinden.
|
||||||
|
|
||||||
|
✅ Wanneer zou u een template literal versus een gewone string gebruiken?
|
||||||
|
|
||||||
|
### Booleans
|
||||||
|
|
||||||
|
Booleans kunnen slechts twee waarden zijn: `true` of `false`. Booleans kunnen helpen bij het nemen van beslissingen over welke regels code moeten worden uitgevoerd wanneer aan bepaalde voorwaarden is voldaan. In veel gevallen helpen [operatoren](# operators) bij het instellen van de waarde van een Boolean waarde en u zult vaak merken en variabelen schrijven die geïnitialiseerd worden of dat hun waarden worden bijgewerkt met een operator.
|
||||||
|
|
||||||
|
- `let myTrueBool = true`
|
||||||
|
- `let myFalseBool = false`
|
||||||
|
|
||||||
|
✅ Een variabele kan als 'waar' worden beschouwd als deze resulteert in een boolean waarde `true`. Interessant is dat in JavaScript [alle waarden waarheidsgetrouw zijn, tenzij ze als onjuist zijn gedefinieerd](https://developer.mozilla.org/nl/docs/Glossary/Truthy).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Uitdaging
|
||||||
|
|
||||||
|
JavaScript is berucht om zijn verrassende manieren om af en toe met gegevenstypen om te gaan. Doe een beetje onderzoek naar deze 'valstrikken'. Bijvoorbeeld: hoofdlettergevoeligheid kan bijten! Probeer dit in uw console: `let age = 1; let Age = 2; age == Age` (lost `false` op - waarom?). Welke andere valstrikken kunt u vinden?
|
||||||
|
|
||||||
|
## Quiz na de lezing
|
||||||
|
[Quiz na de lezing](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/8)
|
||||||
|
|
||||||
|
## Beoordeling en zelfstudie
|
||||||
|
|
||||||
|
Bekijk [deze lijst met JavaScript-oefeningen](https://css-tricks.com/snippets/javascript/) en probeer er een. Wat heeft u geleerd?
|
||||||
|
|
||||||
|
## Toewijzing
|
||||||
|
|
||||||
|
[Gegevenstypen Oefening](assignment.nl.md)
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Gegevenstypen Oefening
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Stelt u voor dat u een winkelwagentje aan het bouwen bent. Schrijf wat documentatie over de gegevenstypen die u nodig zou hebben om uw winkelervaring te voltooien. Hoe bent u tot uw keuzes gekomen?
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd
|
||||||
|
--- | --- | --- | -- |
|
||||||
|
||De zes gegevenstypen worden opgesomd en in detail onderzocht, waarbij het gebruik ervan wordt gedocumenteerd|Vier gegevenstypen worden onderzocht|Twee gegevenstypen worden onderzocht|
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# Plezier met functies
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Maak verschillende functies, zowel functies die iets retourneren als functies die niets retourneren.
|
||||||
|
|
||||||
|
Kijk of u een functie kunt maken met een combinatie van parameters en parameters met standaardwaarden.
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
|
||||||
|
| | Oplossing wordt geboden met twee of meer goed presterende functies met diverse parameters | Werkoplossing wordt aangeboden met één functie en enkele parameters | Oplossing heeft bugs |
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
# Operatoren
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Speel met operatoren. Hier is een suggestie voor een programma dat u kunt implementeren:
|
||||||
|
|
||||||
|
U hebt een groep studenten uit twee verschillende beoordelingssystemen.
|
||||||
|
|
||||||
|
### Eerste beoordelingssysteem
|
||||||
|
|
||||||
|
Een beoordelingssysteem wordt gedefinieerd met cijfers van 1-5, waarbij 3 en hoger betekent dat u slaagt voor de cursus.
|
||||||
|
|
||||||
|
### Tweede beoordelingssysteem
|
||||||
|
|
||||||
|
Het andere cijfer systeem heeft de volgende cijfers `A, A-, B, B-, C, C-` waarbij `A` het hoogste cijfer is en `C` het laagste voldoende is.
|
||||||
|
|
||||||
|
### De taak
|
||||||
|
|
||||||
|
Gegeven de volgende array `allStudents` die alle studenten en hun cijfers vertegenwoordigt, construeert u een nieuwe array `studentsWhoPass` met daarin alle studenten die slagen.
|
||||||
|
|
||||||
|
> TIP, gebruik een for-loop, if...else en vergelijkingsoperatoren:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let allStudents = [
|
||||||
|
'A',
|
||||||
|
'B-',
|
||||||
|
1,
|
||||||
|
4,
|
||||||
|
5,
|
||||||
|
2
|
||||||
|
]
|
||||||
|
|
||||||
|
let studentsWhoPass = [];
|
||||||
|
```
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
|
||||||
|
| | De complete oplossing wordt gepresenteerd | Gedeeltelijke oplossing wordt gepresenteerd | Oplossing met bugs wordt gepresenteerd |
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# Loop een Array
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Maak een programma dat elk 3de nummer tussen 1 en 20 opsomt en het afdrukt naar de console.
|
||||||
|
|
||||||
|
> TIP: gebruik een for-loop en pas de iteratie-uitdrukking aan
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
|
||||||
|
| | Programma loopt correct en wordt becommentarieerd | Programma wordt niet becommentarieerd | Programma is onvolledig of bevat fouten |
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
# Inleiding tot JavaScript
|
||||||
|
|
||||||
|
JavaScript is de taal van het web. In deze vier lessen leert u de basisprincipes.
|
||||||
|
|
||||||
|
### Onderwerpen
|
||||||
|
|
||||||
|
1. [Variabelen en Gegevenstypen](../1-data-types/translations/README.nl.md)
|
||||||
|
2. [Functies en Methoden](../2-functions-methods/translations/README.nl.md)
|
||||||
|
3. [Beslissingen nemen met JavaScript](../3-making-decisions/translations/README.nl.md)
|
||||||
|
4. [Arrays en Lussen](../4-arrays-loops/translations/README.nl.md)
|
||||||
|
|
||||||
|
### Credits
|
||||||
|
|
||||||
|
Deze lessen zijn geschreven met ♥ door [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) en [Chris Noring](https://twitter.com/chris_noring)
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Oefen uw HTML: maak een blogmodel
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Stel u voor dat u uw persoonlijke website ontwerpt of herontwerpt. Maak een grafische mockup van uw site en schrijf vervolgens de HTML-opmaak op die u zou gebruiken om de verschillende elementen van de site uit te bouwen. U kunt dit op papier doen en het scannen, of u kunt software van uw keuze gebruiken. Zorg ervoor dat u de HTML-opmaak met de hand codeert.
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
|
||||||
|
| | Een blog lay-out wordt visueel weergegeven met ten minste 10 weergegeven markeringselementen | Een blog lay-out wordt visueel weergegeven met ongeveer 5 weergegeven markeringselementen | Een blog lay-out wordt visueel weergegeven met maximaal 3 weergegeven markeringselementen |
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# CSS-Refactoring
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Restyle het terrarium met Flexbox of CSS Grid en maak screenshots om te laten zien dat u het in verschillende browsers hebt getest. Mogelijk moet u de opmaak wijzigen, dus maak een nieuwe versie van de app met de kunst voor uw refactor. Maakt u geen zorgen over het versleepbaar maken van de elementen; alleen de HTML en CSS refactoren voor nu.
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
|
||||||
|
| | Presenteer een volledig gerestyled terrarium met Flexbox of CSS Grid | Restyle een paar van de elementen | Het terrarium helemaal niet restylen |
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Werk wat meer met de DOM
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Onderzoek de DOM een beetje meer door een DOM-element te 'adopteren'. Bezoek de [lijst met DOM-interfaces](https://developer.mozilla.org/nl/docs/Web/API/Document_Object_Model) van MSN en kies er een. Zoek dat het wordt gebruikt op een website op internet en schrijf een uitleg over hoe het wordt gebruikt.
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
|
||||||
|
| | Er wordt een alinea-opsomming gegeven, met een voorbeeld | Paragraafopmaak wordt gepresenteerd, zonder voorbeeld | Er wordt geen beschrijving gepresenteerd |
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
# Maak een nieuw toetsenbordspel
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Maak een klein spel dat toetsenbordgebeurtenissen gebruikt om taken uit te voeren. Het kan een ander soort typespel zijn, of een kunstspel dat bij toetsaanslagen pixels op het scherm schildert. Wees creatief!
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | ------------------------ | ------------------------ | ----------------- |
|
||||||
|
| | Er wordt een volledig spel gepresenteerd | De game is erg minimaal | De game bevat bugs |
|
||||||
|
| |
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Restyle uw extensie
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
De codebase voor deze extensie wordt compleet geleverd met stijlen, maar u hoeft ze niet te gebruiken; maak uw extensie uw eigen door deze te restylen door het css-bestand te bewerken.
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | -------------------------------------------- | --------------------- | ----------------- |
|
||||||
|
| | Code wordt ingediend met functionele nieuwe stijlen | Styling is niet compleet | Stijlen zijn buggy |
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Adopteer een API
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
API's kunnen erg leuk zijn om mee te spelen. Hier is een [lijst met vele gratis](https://github.com/public-apis/public-apis). Kies een API, en bouw een browserextensie die een probleem oplost. Het kan een zo klein probleem zijn als u niet genoeg foto's van huisdieren hebt (dus probeer de [dog CEO API](https://dog.ceo/dog-api/)) of iets groters - veel plezier!
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | -------------------------------------------------------------------------- | ---------------------------------------- | ----------------------- |
|
||||||
|
| | Een volledige browserextensie wordt ingediend met behulp van een API uit de bovenstaande lijst | Er is een gedeeltelijke browserextensie ingediend | De inzending bevat bugs |
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
# Analyseer een site op prestaties
|
||||||
|
|
||||||
|
Geef een gedetailleerd rapport van een website, met de gebieden waar de prestaties problematisch zijn. Analyseer waarom de site traag is en wat u zou kunnen doen om deze te versnellen. Vertrouw niet alleen op de browsertools, maar doe wat onderzoek naar andere tools die u kunnen helpen bij uw rapportage
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
|
||||||
|
| | Er wordt een rapport gepresenteerd met details die niet alleen uit browsertools zijn gehaald, maar ook uit tools van derden, indien beschikbaar | Er wordt een basisrapport gepresenteerd | Er wordt een minimaal rapport gepresenteerd |
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
# Een browserextensie bouwen
|
||||||
|
|
||||||
|
Het bouwen van browserextensies is een leuke en interessante manier om na te denken over de prestaties van uw apps terwijl u een ander type webitem bouwt. Deze module bevat lessen over hoe browsers werken en hoe u een browserextensie implementeert, hoe u een formulier bouwt, een API aanroept en lokale opslag gebruikt, en hoe u de prestaties van uw website peilt en deze verbetert.
|
||||||
|
|
||||||
|
U bouwt een browserextensie die werkt op Edge, Chrome en Firefox. Deze extensie, die lijkt op een mini-website die is afgestemd op een zeer specifieke taak, controleert de [C02 Signal API](https://www.co2signal.com) voor het elektriciteitsverbruik en de koolstofintensiteit van een bepaalde regio en geeft een lezing over de ecologische voetafdruk van de regio.
|
||||||
|
|
||||||
|
Deze extensie kan door een gebruiker ad-hoc worden genoemd zodra een API-sleutel en regiocode in een formulier zijn ingevoerd om het lokale elektriciteitsverbruik te bepalen en daardoor gegevens te bieden die de elektriciteitsbeslissingen van een gebruiker kunnen beïnvloeden. Het kan bijvoorbeeld de voorkeur hebben om het gebruik van een wasdroger (een koolstofintensieve activiteit) uit te stellen tijdens een periode van hoog elektriciteitsverbruik in uw regio.
|
||||||
|
|
||||||
|
### Onderwerpen
|
||||||
|
|
||||||
|
1. [Over de browser](../1-about-browsers/translations/README.nl.md)
|
||||||
|
2. [Formulieren en lokale opslag](../2-forms-browsers-local-storage/translations/README.nl.md)
|
||||||
|
3. [Achtergrondtaken en prestaties](../3-background-tasks-and-performance/translations/README.nl.md)
|
||||||
|
|
||||||
|
### Credits
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Credits
|
||||||
|
|
||||||
|
Het idee voor deze web-koolstoftrigger werd aangedragen door Asim Hussain, hoofd bij Microsoft van het Green Cloud Advocacy-team en auteur van de [Green Principles](https://principles.green/). Het was oorspronkelijk een [websiteproject](https://github.com/jlooper/green).
|
||||||
|
|
||||||
|
De structuur van de browserextensie werd beïnvloed door [de COVID-extensie van Adebola Adeniran](https://github.com/onedebos/covtension).
|
||||||
|
|
||||||
|
Het concept achter het 'punt'-pictogramsysteem werd gesuggereerd door de pictogramstructuur van de [Energy Lollipop](https://energylollipop.com/) browserextensie voor Californische emissies.
|
||||||
|
|
||||||
|
Deze lessen zijn geschreven met ♥ door [Jen Looper](https://www.twitter.com/jenlooper)
|
||||||
|
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Maak een spel na
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Gebruik de codevoorbeelden in de les om een weergave te maken van een spel dat u leuk vindt. Het zal een eenvoudig spel moeten zijn, maar het doel is om ofwel de class of het compositiepatroon en het pub/subpatroon te gebruiken om te laten zien hoe een spel zou kunnen starten. Wees creatief!
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
|
||||||
|
| | Drie elementen worden op het scherm geplaatst en gemanipuleerd | Twee elementen worden op het scherm geplaatst en gemanipuleerd | Een element wordt op het scherm geplaatst en gemanipuleerd |
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Speel met de Canvas API
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Kies een element van de Canvas API en maak er iets interessants omheen. Kunt u een kleine melkweg van herhaalde sterren creëren? Kunt u een interessante textuur van gekleurde lijnen maken? U kunt CodePen bekijken voor inspiratie (maar kopieer niet)
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- |
|
||||||
|
| | Code wordt ingediend met een interessante textuur of vorm| Code is ingediend, maar wordt niet uitgevoerd | Code is niet verzonden |
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Becommentarieer uw code
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Bekijk uw huidige /app.js-bestand in uw gamemap en zoek manieren om er commentaar op te geven en het op te ruimen. Het is heel gemakkelijk dat code uit de hand loopt, en dit is een goede kans om opmerkingen toe te voegen om ervoor te zorgen dat u leesbare code heeft, zodat u deze later kunt gebruiken.
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | ------------------------------------------------------------------ | ------------------------------------- | -------------------------------------------------------------- |
|
||||||
|
| | `app.js` code is volledig becommentarieerd en georganiseerd in logische blokken | `app.js` code is voldoende becommentarieerd | De code `app.js` is enigszins ongeorganiseerd en er ontbreken goede commentaren |
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Ontdek botsingen
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Om beter te begrijpen hoe botsingen werken, bouwt u een heel klein spel met een paar items die botsen. Laat ze bewegen door middel van toetsaanslagen of muisklikken, en zorg dat er iets gebeurt met een van de items wanneer deze wordt geraakt. Het kan zoiets zijn als een meteoor die de aarde raakt, of botsauto's. Wees creatief!
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden vebeterd |
|
||||||
|
| -------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | ----------------- |
|
||||||
|
| | Er wordt een volledig werkend codevoorbeeld geproduceerd, met items op het canvas getekend, er vindt een fundamentele botsing plaats en er vinden reacties plaats | Code is op de een of andere manier onvolledig | Code storingen |
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Bouw een scorespel
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Creëer een spel waarin u leven en punten op een creatieve manier weergeeft. Een suggestie is om het leven te laten zien als harten en de punten als een groot getal in het midden onderaan het scherm. Kijk hier voor [gratis spelbronnen](https://www.kenney.nl/)
|
||||||
|
|
||||||
|
# Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | ---------------------- | --------------------------- | -------------------------- |
|
||||||
|
| | volledige game wordt gepresenteerd | game wordt gedeeltelijk gepresenteerd | gedeeltelijke game bevat bugs |
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
# Bouw een voorbeeldspel
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Probeer een klein spel te bouwen waarin u oefent op verschillende eindcondities. Varieer tussen het behalen van een aantal punten, de held verliest alle levens of alle monsters zijn verslagen. Bouw iets eenvoudigs, zoals een console-gebaseerd avonturenspel. Gebruik de onderstaande spelstroom als inspiratie:
|
||||||
|
|
||||||
|
```
|
||||||
|
Held> slaat aan met slagzwaard - orc krijgt 3p schade
|
||||||
|
Orc> Slaat met club - held krijgt 2p schade
|
||||||
|
Held> Schopt - orc krijgt 1p schade
|
||||||
|
Game> Orc is verslagen - Held verzamelt 2 munten
|
||||||
|
Game> ****Geen monsters meer, u heeft het kwaadaardige fort veroverd****
|
||||||
|
```
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | ---------------------- | --------------------------- | -------------------------- |
|
||||||
|
| | volledige game wordt gepresenteerd | game wordt gedeeltelijk gepresenteerd | gedeeltelijke game bevat bugs |
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
# Bouw een Ruimtegame
|
||||||
|
|
||||||
|
Een ruimtegame om meer geavanceerde JavaScript-basisprincipes te leren
|
||||||
|
|
||||||
|
In deze les leert u hoe u uw eigen ruimtegame kunt bouwen. Als u ooit het spel "Space Invaders" hebt gespeeld, heeft dit spel hetzelfde idee: een ruimteschip besturen en schieten op monsters die van boven naar beneden komen. Hier is hoe het voltooide spel eruit zal zien:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
In deze zes lessen leert u het volgende:
|
||||||
|
|
||||||
|
- **Werk** met het Canvas-element om dingen op een scherm te tekenen
|
||||||
|
- **Begrijp** het cartesische coördinatensysteem
|
||||||
|
- **Leer** het Pub-Sub-patroon om een degelijke game-architectuur te creëren die gemakkelijker te onderhouden en uit te breiden is
|
||||||
|
- **Maak gebruik van** Async/Await om gamebronnen te laden
|
||||||
|
- **Behandel** toetsenbordgebeurtenissen
|
||||||
|
|
||||||
|
## Overzicht
|
||||||
|
|
||||||
|
- Theorie
|
||||||
|
- [Inleiding tot het bouwen van spellen met JavaScript](../1-introduction/translations/README.md)
|
||||||
|
- Praktijk
|
||||||
|
- [Tekenen op canvas](../2-drawing-to-canvas/translations/README.md)
|
||||||
|
- [Elementen over het scherm laten bewegen](../3-moving-elements-around/translations/README.md)
|
||||||
|
- [Botsingsdetectie](../4-collision-detection/translations/README.md)
|
||||||
|
- [Score bijhouden](../5-keeping-score/translations/README.md)
|
||||||
|
- [Het spel beëindigen en opnieuw starten](../6-end-condition/translations/README.md)
|
||||||
|
|
||||||
|
## Credits
|
||||||
|
|
||||||
|
De middelen die hiervoor zijn gebruikt, waren afkomstig van https://www.kenney.nl/.
|
||||||
|
Als u van het bouwen van games houdt, zijn dit enkele zeer goede activa, veel is gratis en sommige worden betaald.
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
# Verbeter de routing
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
De routes-declaratie bevat momenteel alleen de te gebruiken sjabloon-ID. Maar bij het tonen van een nieuwe pagina is soms iets meer nodig. Laten we onze routeringsimplementatie verbeteren met twee extra functies:
|
||||||
|
|
||||||
|
- Geef elk sjabloon een titel en werk de venstertitel bij met deze nieuwe titel wanneer de sjabloon verandert.
|
||||||
|
- Voeg een optie toe om wat code uit te voeren nadat de sjabloon is gewijzigd. Elke keer dat de dashboardpagina wordt weergegeven willen we `'Dashboard wordt weergegeven'` in de ontwikkelaarsconsole afdrukken.
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
|
||||||
|
| | De twee functies zijn geïmplementeerd en werken. Titel en codetoevoeging werken ook voor een nieuwe route die is toegevoegd in de `routes`-aangifte. | De twee functies werken, maar het gedrag is hard gecodeerd en kan niet worden geconfigureerd via de `routes`-aangifte. Het toevoegen van een derde route met toevoeging van titel en code werkt niet of gedeeltelijk. | Een van de functies ontbreekt of werkt niet goed. |
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# Style uw bank-app
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Maak een nieuw `styles.css`-bestand en voeg er een link naar toe in uw huidige `index.html`-bestand. Voeg in het CSS-bestand dat u zojuist hebt gemaakt wat stijl toe om de pagina *Login* en *Dashboard* er netjes en opgeruimd uit te laten zien. Probeer een kleurenthema te maken om uw app een eigen branding te geven.
|
||||||
|
|
||||||
|
> Tip: u kunt de HTML aanpassen en indien nodig nieuwe elementen en class toevoegen.
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
|
||||||
|
| | Alle pagina's zien er schoon en leesbaar uit, met een consistent kleurenthema en de verschillende secties vallen goed op. | Pagina's zijn opgemaakt maar zonder thema of met secties die niet duidelijk zijn afgebakend.| Pagina's missen stijl, de secties zien er ongeorganiseerd uit en de informatie is moeilijk te lezen. |
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
# Refactoreer en becommentarieer uw code
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Naarmate uw codebase groeit, is het belangrijk om uw code regelmatig te refactoren om deze in de loop van de tijd leesbaar en onderhoudbaar te houden. Voeg opmerkingen toe en refactoreer uw `app.js` om de kwaliteit van de code te verbeteren:
|
||||||
|
|
||||||
|
- Extraheer constanten, zoals de basis-URL van de server-API
|
||||||
|
- Factoriseer vergelijkbare code: u kunt bijvoorbeeld een `sendRequest()` functie maken om de code die wordt gebruikt in zowel `createAccount()` als `getAccount()` groeperen
|
||||||
|
- Reorganiseer de code zodat deze gemakkelijker leesbaar is en voeg opmerkingen toe
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
|
||||||
|
| | Code is becommentarieerd, goed georganiseerd in verschillende secties en gemakkelijk te lezen. Constanten worden geëxtraheerd en er is een gefactoriseerde `sendRequest()`-functie gemaakt. | Code is schoon, maar kan nog worden verbeterd met meer opmerkingen, constante extractie of factorisatie. | Code is rommelig, er wordt geen commentaar op gegeven, constanten worden niet geëxtraheerd en code wordt niet in factoren verwerkt. |
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
# Implementeer het dialoogvenster "Transactie toevoegen"
|
||||||
|
|
||||||
|
## Instructies
|
||||||
|
|
||||||
|
Onze bank-app mist nog één belangrijk kenmerk: de mogelijkheid om nieuwe transacties in te voeren.
|
||||||
|
Gebruik alles wat u in de vier voorgaande lessen heeft geleerd en implementeer een dialoogvenster "Transactie toevoegen":
|
||||||
|
|
||||||
|
- Voeg een knop "Transactie toevoegen" toe op de dashboardpagina
|
||||||
|
- Maak een nieuwe pagina met een HTML-sjabloon of gebruik JavaScript om de HTML-dialoog weer te geven/te verbergen zonder de dashboardpagina te verlaten (u kunt [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) eigenschap daarvoor gebruiken, of CSS-class)
|
||||||
|
- Zorg ervoor dat u [toetsenbord en schermlezer toegankelijkheid](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) afhandelt voor het dialoogvenster
|
||||||
|
- Implementeer een HTML-formulier om invoergegevens te ontvangen
|
||||||
|
- Maak JSON-gegevens van de formuliergegevens en stuur deze naar de API
|
||||||
|
- Werk de dashboardpagina bij met de nieuwe gegevens
|
||||||
|
|
||||||
|
Kijk naar de [server API-specificaties](../api/README.md) om te zien welke API u moet aanroepen en wat het verwachte JSON-formaat is.
|
||||||
|
|
||||||
|
Hier is een voorbeeldresultaat na het voltooien van de opdracht:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Rubriek
|
||||||
|
|
||||||
|
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||||
|
| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
|
||||||
|
| | Het toevoegen van een transactie wordt volledig geïmplementeerd volgens alle best practices uit de lessen. | Het toevoegen van een transactie is geïmplementeerd, maar volgt niet de best practices uit de lessen, of werkt slechts gedeeltelijk. | Het toevoegen van een transactie werkt helemaal niet. |
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
# :dollar: Bouw een bank
|
||||||
|
|
||||||
|
In dit project leert u hoe u een fictieve bank bouwt. Deze lessen bevatten instructies voor het opmaken van een web-app en het aanbieden van routes, het bouwen van formulieren, het beheren van de staat en het ophalen van gegevens uit een API waaruit u de gegevens van de bank kunt ophalen.
|
||||||
|
|
||||||
|
|  |  |
|
||||||
|
|--------------------------------|--------------------------------|
|
||||||
|
|
||||||
|
## Lessen
|
||||||
|
|
||||||
|
1. [HTML-sjablonen en routes in een webapp](../1-template-route/translations/README.nl.md)
|
||||||
|
2. [Bouw een aanmeldings- en registratieformulier](../2-forms/translations/README.nl.md)
|
||||||
|
3. [Methoden voor het ophalen en gebruiken van gegevens](../3-data/translations/README.nl.md)
|
||||||
|
4. [Concepten van staatsbeheer](../4-state-management/translations/README.nl.md)
|
||||||
|
|
||||||
|
### Credits
|
||||||
|
|
||||||
|
Deze lessen zijn geschreven met :hearts: door [Yohan Lasorsa](https://twitter.com/sinedied).
|
||||||
|
|
||||||
|
Als u geïnteresseerd bent om te leren hoe u de [server API](../api/translations/README.nl.md) bouwt die in deze lessen wordt gebruikt, kunt u [deze reeks video's](https://aka.ms/NodeBeginner) volgen (in het bijzonder video's 17 t/m 21).
|
||||||
|
|
||||||
|
U kunt ook een kijkje nemen op [deze interactieve Leer-tutorial](https://aka.ms/learn/express-api).
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue