Dankzij allerhande frontend-development-tools kun jij een stuk efficiënter werken en je werk vervolgens ook een stuk sneller controleren. Maar er zijn zo ontzettend veel tools op de markt, dat het soms moeilijk kiezen is. In deze blog vertel ik je welke tools ik graag gebruik en waarom.
CanIUse
Zoals je weet worden moderne browsers regelmatig geüpdatet met onder meer nieuwe features. Verouderde browsers ondersteunen die features niet. Als een groot deel van je gebruikers de geüpdatete versie nog niet in gebruik heeft, dan heeft dat een negatief effect op de user experience. Op de website CanIUse kun je features invoeren en krijg je meteen te zien of en welke (versies van) browsers die niet meer ondersteunen.
Of je de feature vervolgens gebruikt is afhankelijk van de requirements van je klant.
Online coding playgrounds
Een playground is een cloud-based IDE (ontwikkelomgeving) die je een preview geeft van je geschreven code in HTML/CSS en Javascript. Ze zijn handig als je een stukje code of functionaliteit wil delen om bijvoorbeeld feedback te verzamelen, of bij het schrijven van documentatie, tutorials en richtlijnen. Daarnaast kun je op een playground experimenteren met nieuwe features om je vaardigheden te verbeteren.
Populaire playgrounds zijn bijvoorbeeld CodePen en JSFiddle. Een voordeel van de playground Stackblitz is dat je daar de populaire ontwikkelomgeving Visual Studio Code kunt gebruiken op het web.
Met een klik start je een JS Framework op, bijvoorbeeld een Angular- of React-webapplicatie. En dat is erg handig als je een stukje code wilt uitproberen tijdens het lezen van een Angular- of React-artikel.
CSS preprocessors
CSS is een style sheet language die je gebruikt voor het stylen van webpagina's. CSS op zichzelf kan leuk zijn, maar als stylesheets groter en complexer worden, wordt het ook steeds moeilijker om ze te onderhouden.
Een CSS preprocessor als SASS maakt het schrijven van CSS een stuk efficiënter en gemakkelijker. Bovendien kun je met een preprocessor ook features gebruiken die met alleen de standaard CSS niet mogelijk zijn. Denk bijvoorbeeld aan variabelen, nesting, en mixins, waarmee de code gemakkelijker te onderhouden en te delen is. Zo wordt het schrijven van een grotere en complexere stylesheet een stuk aangenamer.
Chrome DevTools
Chrome DevTools is onmisbaar voor het testen van je eindproduct in ’s werelds meest gebruikte browser. Met DevTools kun je stukjes code uitproberen in de browser om te onderzoek hoe iets functioneert of eruitziet of waar er in de code precies iets fout gaat.
Bron: NOS.nl
Code Validators
Als je de website gaat lanceren wil je er natuurlijk zeker van zijn dat de code voldoet aan de huidige standaarden en 'best practices'. Met zogenoemde code validators kom je erachter in hoeverre de website geoptimaliseerd is voor zoekmachines, en toegankelijk is voor allerlei soorten bezoekers, browsers en devices.
Ik gebruik altijd de W3C Markup Validation Service, die is gemaakt door de World Wide Web Consortium. Deze internationale organisatie is verantwoordelijk voor de standaarden op het web en weet dus als geen ander hoe goed jouw code is.
Site speed monitoring
De laadsnelheid van een website is een belangrijke factor voor je ranking binnen Google. Bovendien is het voor veel bezoekers ook een kritische factor: laadt je site te langzaam, dan draagt dat bepaald niet bij aan de gebruikerservaring.
Pagespeed Insights is Google's eigen (en gratis!) monitoring tool voor de snelheid van een website. Deze tool doet op basis van een ingevoerde URL een performance test, die onderscheid maakt tussen mobiel en desktop en ook verbetersuggesties geeft.
