NodeJS
NodeJS is een extensie van Javascript voor serverside en lokale toepassingen.
We zullen er zelf niet rechtstreeks mee werken, maar een aantal tools die we binnen onze tekst editor nodig hebben, vereisen dit. Dus download en installeer NodeJS (de windows installer is ok).
Je kan in Visual Studio Code (die we in volgende stap installeren) eenvoudig controleren of NodeJS correct geïnstalleerd is door het versienummer op te vragen. Open een nieuwe terminal via View, New Terminal..., en tik het commando npm -version (npm is een afkorting van Node Package Manager). Als je een foutmelding krijgt, dan is NodeJS nog niet geïnstalleerd.
Visual Studio Code
Visual Studio Code is de tekst editor waarmee we onze code zullen schrijven. Het heeft alle kenmerken die een tekst editor moet bezitten, en is vandaag dé editor voor web development:
- visueel aantrekkelijk en strakke GUI
- bestanden & mappen: navigatiebar, projecten, meerdere bestanden in tabbladen
- editeren: code folding, syntax highlighting, autocompletion en -indentatie, on-the-fly syntax check, shortcuts, refactoring, auto layout...
- zoeken/vervangen: basic search, searching in folders, reguliere expressies
- integraties: Git, terminal...
- aanpasbaarheid: kleurschema's, voorkeuren
- uitbreidbaarheid: mogelijkheid extensies te downloaden en installeren
downloaden
Download en installeer VS Code
extensies installeren
Extensies zijn plugins waarmee je de functionaliteit van VS Code kan uitbreiden of aanpassen. Installeer volgende extensies (zie screenshot):
- EditorConfig for VS Code
- ESLint
- HTML-validate
- htmltagwrap
- Live Server
- Quick HTML Previewer
- Stylelint
- W3C Web Validator
Deze extensies werken alleen als je ook de nodige node packages toevoegt aan je repository, zie installatie packages met package.json
Hoe oefeningen maken
stap 1: open je repository in VS Code
Voor elk vak zul je een repository moeten maken, zie dit hoofdstuk. Elke keer als je een oefening maakt, open je de volledige repo in VS Code. Enkel één oefening kan ook, maar dan is het moeilijker om code uit andere lessen terug te vinden om te gebruiken. Er zijn meerdere manieren. Het makkelijkste is via Verkenner of via Github Desktop:
Je krijgt alle mappen te zien (screenshot voor Basic Web Development):
stap 2: maak de oefening aan
Eerst moet je weten om welke les en wat de naam van de oefening is. Dit vind je terug in de opgave:
Stappen:
- maak een submap in de les met exact de naam van de oefening, hier MijnEerstePagina
- voeg een bestand index.html toe
- maak de HTML basiscode aan (b.v. met de html:5 + tab shortcut)
- geef de pagina een titel
stap 3: werk de oefening uit
Voeg nu alle mappen en bestanden toe die je nodig hebt voor deze oefening, typisch:
- img: afbeeldingen (meestal meegegeven met de opgave)
- css: stijlen
- js: scripts
- fonts: lettertypes
- vendor: externe bestanden en plugins als lightbox, carousel...
- ...
Werk tenslotte de opgave uit. Indien nodig, maak je nog extra submappen aan, b.v. voor afbeeldingen, CSS, fonts enz... Let er op dat alle resources correct gelinkt zijn:
stap 4: commit en push
Als je klaar bent met de oefening, commit en push je de wijzigingen naar Github. De eenvoudigste en meest universele manier is met Github Desktop; meer details in dit hoofdstuk.
Controleer zeker online op github.com eens of alles er goed op staat:
Live previewen
Er zijn twee manieren om je werk te bekijken tijdens het werken:
- Preview, standaard ingebouwd in VS Code: weergave in VS Code (zie screenshot hierboven)
- Live Server via de Live Server extensie: weergave in de browser met live update
VS Code Preview
De previewfunctie toont de pagina in VS Code in een tabblad:
Het heeft een paar belangrijke beperkingen:
- werkt niet goed voor complexere CSS of Javascript
- previewvenster is eigenlijk te klein om bruikbaar te zijn
- geen debuggingmogelijkheden zoals developer tools in browsers
Live Server extensie
Wegens de beperkingen van de previewfunctie, gebruik je — tenzij misschien voor snelle previews — altijd de Live Server. Je pagina zal openen in de browser, en elke keer als je opslaat bijgewerkt worden. Een voorbeeld van een correcte setup, met je code op je laptop en de live server op een externe monitor:
Code kwaliteit
Zeker even belangrijk als de code functionaliteit, is de code kwaliteit: voor de leesbaarheid, efficiëntie, fout(on)gevoeligheid. Gelukkig zijn er een aantal tools die ons kunnen helpen bij het schrijven van betere code en het opvangen van mogelijke fouten.
Controleer altijd nog eens layout, linting en validatie vóór je pusht. Je verliest er veel punten mee en fouten zijn makkelijk te vermijden!
layout
Zonder degelijke layout kan je de structuur van je programma niet zien, en dus onmogelijk programmeren. Zolang je zelf de code typt treden geen problemen op; elke editor auto-indenteert tegenwoordig. Als je fragmenten van elders kopieert, kan het zijn dat je de layout handmatig moet goedzetten. Gelukkig heeft elke editor daar een shortcut voor; in VS Code is dat Shift-Alt-F.
linting
Met linting tools wordt de code automatisch gecontroleerd op mogelijke bugs (verdachte/gevaarlijke code) en stijl inconsistentie (b.v. hoofdlettergebruik, layout...). Er zijn veel linting tools in omloop; wij gebruiken de volgende:
- html-validate voor HTML
- stylelint voor CSS
- eslint voor Javascript
Naast de tool zelf (geïnstalleerd als NPM package) heb je meestal ook een extensie nodig om het in VS Code te integreren. Tijdens de installatie van VS Code hebben we dat allemaal al in orde gebracht voor de deze drie tools. Een screenshot van typische meldingen:
Het is uiteraard ook de bedoeling dat je de meldingen ook effectief oplost. Dit kan op volgende manieren:
- de fout verbeteren
- de regel lokaal uitschakelen
- het configuratiebestand van de linting tool aanpassen
Het beste is altijd de fout verbeteren — meestal handmatig (lees de melding!), maar soms is er ook een Quick Fix:
Je kan in theorie de melding ook soms uitschakelen voor deze regel, maar dan moet je echt wel een goede reden hebben (en geloof me, dat heb je meestal niet!):
W3C validatie
Lintingtools zullen over het algemeen naast de stijl van je code ook controleren op pure syntaxfouten. Voor HTML worden de syntaxregels onderhouden door het W3C of World Wide Web Consortium. Dit zijn er dermate veel dat de HTML-validate linting tool niet volstaat, en een extra W3C Web Validator extensie nodig is (installatie zie dit deel). Deze moet je manueel uitvoeren, bij voorkeur telkens voor het pushen. Soms vindt het toch nog fouten die door de HTML-validate linting tool over het hoofd worden gezien, zoals hier:
Sneller typen
Er zijn twee belangrijke redenen om te investeren in het sneller leren typen:
- snelheid: een programmeur kost al snel 100€ per uur aan zijn werkgever; dankzij shortcuts kan je veel sneller werken
- ontlasting lichaam: met shortcuts werken b.v. is veel minder belastend voor gewrichten en spieren dan telkens te moeten wisselen tussen toetsenbord en muis
Shortcuts
Tabel van de belangrijkste shortcuts die je zo snel mogelijk onder de knie zou moeten krijgen (volledige cheatsheet zie Windows en OSX); probeer ze zoveel mogelijk uit tijdens de oefeningen.
HTML tags aanvullen met TAB
Tags voeg je snel toe door in HTML enkel de naam te typen, gevoldg door de TAB. Demo (animated gif):
Daarnaast is het uiteraard ook belangrijk vlot te kunnen navigeren met pijltjestoetsen en te kunnen copy-pasten, zie shortcuts
htmltagwrap
De veelgebruikte extensie htmltagwrap laat toe makkelijk een element rond een tekst of code te plaatsen met Alt-W:
Emmet HTML shortcodes
Emmet is een standaard ingebouwde shortcode plugin. Demo (animated gif):
