When I talk about evaluating technology for front-end development, I like to draw a distinction between two categories of technology. On the one hand, you’ve got the raw materials of the web: HTML, CSS, and JavaScript. This is what users will ultimately interact with. On the other hand, you’ve got all the tools and technologies that help you produce the HTML, CSS, and JavaScript: pre-processors, post-processors, transpilers, bundlers, and other build tools. Personally, I’m much more interested and excited by the materials than I am by the tools. But I think it’s right and proper that other developers are excited by the tools. A good balance of both is probably the healthiest mix.
— Jeremy Keith

Tools

Browser(s)

De kans is groot dat het resultaat van je werk als front-end developer in een browser bekeken wordt. Er zijn heel wat verschillende browsers. Een belangrijk uitgangspunt van deze cursus is dat een webpagina in alle browsers moet kunnen bekeken (beluisterd) worden. Door verschillen tussen browsers is het mogelijk dat het er niet overal exact hetzelfde uitziet (probeer maar eens een site te maken die er nog perfect uitziet in Internet Explorer bvb).

Er is maar een beperkt aantal ‘rendering engines’, die dan gedeeld worden door verschillende browsers:

Je zorgt ervoor dat je van elk type minstens één browser hebt, dus zeker Chrome / Edge, Firefox (developer edition, zie een paar alinea's verder) en Safari. Die laatste browser bestaat alleen voor MacOS, iOs en iPadOS. Heb je zelf geen enkel Apple toestel, zorg dan dat je in je omgeving mensen vindt met een dergelijk toestel zodat je ook daarop kan testen. Kleine tip: ik beschik enkel over Apple toestellen (alle mogelijke groottes), behalve mijn orgel dat windows 7 draait :-). Zorg je ervoor dat je toch zeker ook test op Safari?

Dit wil zeggen dat een site er op recente versies van Edge en Chrome meestal hetzelfde zal uitzien. Nuttig om hierbij op te merken is dat op iOS (iPad, iPhone) alle browsers verplicht Webkit moeten gebruiken. Google Chrome op een iPhone is dus niet gebaseerd op Chromium maar wel op Webkit.

De geschiedenis leert ons dat browsers komen en gaan. Wat de geschiedenis ons ook leert is dat browsermonopolies meestal geen goede zaak zijn. Zo waren ooit eerst Netscape en later Internet Explorer de overheersende browser. Veel drive om te vernieuwen was er niet voor zo'n monopolist.

Jammer genoeg zijn we opnieuw op weg naar een monopolie (moet ik de naam noemen?).

melding: werkt enkel in google chrome

Voor dit opleidingsonderdeel zullen we meestal Firefox Developer Edition gebruiken. Dat is een versie van Firefox, specifiek gericht op developers. Deze browser bevat de laatste experimentele ontwikkelingen. De developer tools zijn vooral voor CSS en design zeer goed. Vanzelfsprekend zijn ook de developer tools van andere browsers zeer goed, maar we moeten ergens een keuze maken en er is al genoeg Chrome in deze wereld … Als ik het dus in de les heb over de ‘responsive design mode’ in de developer tools, dan toon ik waar je dit vindt in Firefox Developer Edition. Gebruik gerust andere tools, maar zoek dan zelf uit wat waar staat.

Firefox Developer Edition

Test in alle mogelijke browsers! Het argument ‘bij mij werkt het wel zoals ik het bedoelde’ maakt weinig geen indruk.

it works on my machine meme

Editor, IDE

Code moet ook ingetypt worden. Dat doe je liefst in een programma dat je zoveel mogelijk helpt met HTML, CSS en Javascript. Een dergelijk programma noemen we ‘editor’. Als het gaat over een volledige ontwikkelomgeving (bvb voor Java ontwikkeling) spreken we eerder over een ‘IDE’.

Developers hebben vaak nogal een sterke mening over welke editor of IDE de beste is. Dat is vanzelfsprekend heel subjectief. Geen enkele editor is in alles de beste. Net zoals browsers komen en gaan editors ook. Enkele jaren geleden was Brackets of Atom hip, nu is die rol eerder voor Visual Studio Code weggelegd.

De keuze die we nu voor dit OPO maken is Visual Studio Code, een open source editor gemaakt door Microsoft. Het is gratis en bestaat voor de meest courante besturingssystemen. Installeer die nu.

Het zal me persoonlijk worst wezen welke editor of IDE je gebruikt om je code te typen. Als ik (de code van) een site bekijk, kan ik meestal niet zien in welk programma die code ingevoerd is. Wat me wel belangrijk lijkt is dit: zorg dat je de editor die jij gebruikt, grondig leert kennen. Welke shortcuts zijn handig? Hoe kan je bepaalde dingen automatiseren of versnellen?

Als je naar een volledige ontwikkelomgeving gaat (voor mensen die zowel front-end als back-end doen, met een lelijk woord ‘full stack developers’ genoemd), dan is IntelliJ de meest gebruikte IDE op dit moment. Dit is dure software, maar studenten krijgen een gratis licentie.

Kevin Powell (deze naam zal je geregeld zien opduiken in de deze tekst) maakte een overzichtelijk filmpje over Visual Studio Code. Bekijk het eens. Je zal misschien niet alles direct kunnen plaatsen, maar als je binnen enkele pagina's begint te coderen herinner je je misschien wel een paar van de dingen die aan bod komen. Warm aanbevolen filmpje!

FTP

Code geschreven. Lokaal getest op alle mogelijke browsers.

Hoog tijd dus om je site online te zetten, zodat die daar grondig kan getest worden (bvb op alle mogelijke tablets en smartphones) en dan in productie kan genomen worden.

Er bestaan verschillende manieren om dit te doen. De traditionele manier is gebruik maken van FTP. Hiervoor hebben we een stukje software nodig dat bekend staat als ‘FTP client’.

Uit de lijst van enkele tientallen FTP clients, kozen we Filezilla. Wacht nog even met de installatie van deze FTP client. We komen hierop terug als we onze eerste HTML pagina maken en online zetten op onze didactische server.

Beeldbewerking

Het grootste deel van de bandbreedte die nodig is om een site van een server te laden wordt ingenomen door afbeeldingen. “Een afbeelding is duizend woorden waard” zegt men soms. In feite is de factor nog veel groter. De volledige bijbel bevat ongeveer 800.000 woorden. Die passen op ongeveer 4 MB. Eén foto genomen met een gewone smartphone is vaak groter dan 4 MB!

HTML, CSS en JS zijn allemaal tekst. Zeker HTML en CSS zijn meestal kleine bestanden. Met JS gaat het soms mis als developers zich laten gaan en heel wat JS-frameworks gebruiken zonder stil te staan bij performantie.

Het loont dus de moeite om even stil te staan bij afbeeldingen. Meestal gaat het hier over een afweging tussen bestandsgrootte en kwaliteit. Aan de ene kant grote foto's met veel pixels en dus jammer genoeg ook een grote bestandsgrootte. Aan het andere uiterste zwaar gecomprimeerde foto's met een kleine resolutie. Kleine bestandsgrootte ten koste van de kwaliteit. We zoeken hier dus naar een zo goed mogelijk compromis.

Op zijn minst moet je als front-end developer toch een ruw idee hebben van hoe je een afbeelding kan schalen (‘scale’ of ’resize’), bijsnijden (‘crop’) en bewaren in het meest geschikte formaat. Ook hiervoor bestaan heel wat tools, zowel downloadbaar als online.

Desktopsoftware

Bij de applicatiesoftware denk je dan aan dingen zoals Adobe Photoshop (dure software), Gimp (gratis en open source), Affinity Photos, …

Gnu Image Manipulation Program

Online tools

Online tools komen en gaan. Veel van deze tools hebben een gratis en een betalende versie. Wat moet je zeker kunnen in een online tool:

Een online tool die gemakkelijk te gebruiken is voor deze basisbewerkingen is fotor.com. De gratis versie is voldoende. Volgend filmpje toont in een halve minuut hoe je een foto bijsnijdt (‘crop’). Een foto bijsnijden of een effect toepassen op een foto is gelijkaardig. Je vindt ongetwijfeld meer info over deze bewerkingen in fotor.com op youtube.

Validatoren

Een eerste stap op weg naar een goede website is foutloze code. Het is zeker niet voldoende, maar het kan geen kwaad om na te kijken of de HTML en CSS die je geschreven hebt, wel voldoet aan de standaarden. Soms geeft foute HTML- / CSS-code toch het juiste resultaat in de browser, maar soms ook niet en loopt heel de lay-out fout. Een goede eigenschap van HTML en CSS is dat ze fouttolerant zijn. Een browser zal zijn best doen om foute code toch zo goed mogelijk te interpreteren. Fout geschreven CSS-regels worden gewoon overgeslagen, zonder dat de browser crasht. We gebruiken volgende online tools:

Foutloze code schrijven is een basisvereiste voor dit OPO (trouwens voor ongeveer elk OPO uit je opleiding!). Het is niet moeilijk om je HTML en CSS code voor te leggen aan een validator, die in het beste scenario antwoordt met een groen kadertje als teken dat je code geen syntaxisfouten bevat. In een iets minder optimaal geval krijg je een rood kader, met hopelijk een voldoende duidelijke foutmelding. Daar kan je dan mee aan de slag om de fouten eruit te halen. We komen hier later zeker op terug.

Performantietesten

Een handige online tool is webpagetest.org. Die bekijkt de performantie van een pagina. Hoe snel laadt de pagina? Hoeveel seconden duurt het vooraleer er iets getekend wordt op het scherm? Hoelang tot de volledige pagina klaar is? Hoeveel kB (MB?) is de pagina groot? Hoe zit het met de compressie van de afbeeldingen? Zijn er processen die op andere moeten wachten?

Webpagetest om performantie te meten.

De kost van de pagina (in dollartekentjes …) geeft een goed idee hoe snel de pagina laadt. Ook het submenu ‘Image Analysis’ is handig om de compressie en grootte van je afbeeldingen te evalueren.