62 geweldige webdevelopment tools

Er is zeker iets nostalgisch aan het openen van Kladblok of TextEdit en “<HTML>” in te typen om je nieuwe project te starten. Dit is voor veel van ons hoe onze obsessie met programmeren op het web begon. Maar doen tools voor webdevelopment meer dan alleen tekst vastleggen: ze helpen bij het maken en versnellen van volledige projecten. Daarnaast zijn er nog veel meer soorten onderdelen dan puur het intypen van HTML en CSS.

Zo is de planningsfase bijvoorbeeld van essentieel belang. Je moet nadenken over wireframing, ontwerp en workflows voor goede samenwerking. Daarnaast moet je nog het optimale JavaScript framework kiezen, bedenken of je een Integrated Development Environment (IDE) wil gebruiken of niet, en nog veel meer.

In dit artikel gaan we naar 62 tools voor webdevelopment kijken die je zou kunnen gebruiken. Maar voordat we daar naar gaan kijken, moeten we eerst begrijpen wat een webdevelopment tool is.

Wat we zien als tool voor webdevelopment

Op het eerste gezicht lijkt het categoriseren van tools voor webdevelopment heel simpel. Maar voordat we zelfs nog maar het ondiepe ingaan zijn er al een paar aspecten die het onderscheid vaag kunnen maken.

Geldt bijvoorbeeld een streamingdienst voor video’s als een developmenttool? Puur als individuele tool zullen de meeste mensen nee zeggen. Maar wanneer je die tool gaat gebruiken om je scherm op te nemen voor een bepaalde toepassing in je ontwerp, wordt het opeens een superhandige tool voor samenwerking.

In onze optiek is een tool voor webdevelopment elke tool die je helpt om de doelen van je project dichterbij te brengen. Alhoewel we geen individuele programmeertalen zullen opnemen, zijn er wel subsets, supersets en frameworks zoals TypeScript die zich in het grensgebied bevinden. Wanneer je goed geld wil verdienen, moet je goed op de hoogte zijn van deze aspecten.

Een ander goed voorbeeld is Git. Je kan natuurlijk aanvoeren dat dit Version Control System (VCS) een hoop te bieden heeft. Er is een eigen taal voor opdrachten, en de kernfunctionaliteit biedt een hoop mogelijkheden qua webdevelopment. Maar je kan het ook gebruiken als trainingstool, vooral door tracking logs en commits uit te pluizen.

In het algemeen kan een webdevelopment tool alles zijn waarmee je project efficiënter en productiever uitgevoerd kan worden. Je zal deze diversiteit dan ook terugzien in onze lijst met tools.

Hoe webdevelopment tools je workflow kunnen verbeteren

Pas op, we gaan het woord echt gebruiken: “crunch time”.

Ja, het is een eng woord waar je doodgegooid mee wordt en waardoor iedereen denkt dat webdevelopment tools op magische wijze tijd kunnen besparen. De data laat zien dat meer projecten crunch als standaard gebruiken, en veel branches binnen development gebruiken het nog altijd.

Of je bedrijf crunch en overtime nou gebruikt of nodig heeft of zeker niet, tools voor webdevelopment kunnen je zeker goed helpen. De tools kunnen het eenvoudigere en vervelendere werk voor je automatiseren, zodat je je dag effectiever kan gebruiken. Daardoor word je dus op een prettige manier productiever.

Daarnaast kunnen ze je ook een dikke bonus bieden wanneer je binnen een agile project framework werkt, zoals Scrum. Denk bijvoorbeeld aan een tool als JSFiddle, waarmee je makkelijk stukjes code kan delen met andere teams tijdens de sprint, zodat je meteen klaar bent voor de volgende.

Daarnaast zullen dagelijkse, fysieke stand-ups er voorlopig nog niet inzitten, en dan is een Discord server of Slack kanaal een betere manier zijn om de aankomende taken en projecten te verdelen en bespreken, zonder de druk van de huidige sprintdoelen.

Algemeen gezien kunnen tools voor webdevelopment je dus net zo goed helpen bij je planning als bij de uitvoering.

Zo kies je de juist development stack voor jouw project

We zijn vast aan het preken voor eigen parochie, maar een geweldige tool voor webdevelopment is het gewicht in rosé-gouden M1 MacBooks waard. Daarom is het vinden van de juiste combinatie van tools voor jouw specifieke project een belangrijke basis voor de rest van het werk.

Wanneer je dat nog niet eerder gebruikt hebt, zal je merken dat een eerste planningsfase van essentieel belang is. Investeer wat tijd om de tools te kiezen, zelfs al ben je daardoor pas later aan het programmeren. Je krijgt deze tijd eenvoudig later terug doordat je veel minder kans hebt op problemen met je software. Ook zal je een consistentere output zien, aangenomen dat iedereen het eens is over de tools.

Overwegingen bij het kiezen van je development stack

Het kiezen van de ideale stack voor je project is afhankelijk van de volgende zaken:

Complexiteit: Overweeg hoe complex je eindproduct is, aangezien dit ook een effect heeft op de complexiteit van de stack.
Schaalbaarheid: Een project voor een lokale MKB’er vereist andere oplossingen dan voor een wereldwijde onderneming. Daarom heb je een schaalbare stack nodig ten opzichte van je projectdoelen.
Beveiliging: Het behoeft weinig uitleg dat wat je ook kiest, de beveiliging van gebruikers en websites is altijd een belangrijke overweging.
Kosten: Niemand wil meer geld uitgeven dan nodig, en zeker wanneer je een krap budget hebt zijn kosten belangrijk voor je keuzes.

Je kan technologieën in twee hoofdsoorten verdelen:

Server-side: Hierbij kijk je naar de backend technologieën die je gaat gebruiken. Zo wil je bijvoorbeeld nadenken over je hosting en webserver, key-value en SQL opslag en app of automatiseringsframeworks die je gaat gebruiken, en natuurlijk de programmeertaal.
Client-side: Je frontend keuzes zijn meestal wat eenvoudiger, zeker qua programmeertalen. Alhoewel je HTML, CSS en JavaScript sowieso zal gebruiken, moet je wel nadenken over het JavaScript framework en het framework voor automatisering dat je gaat gebruiken.

Wanneer het gaat om development stacks voor de praktijk, zal je zien dat veel grotere sites een combinatie gebruiken van JavaScript, React.js en Nginx. Ook zie je vaak Memcached, Redis, en Ruby on Rails in development stacks.

62 geweldige webdevelopment tools die je kan gebruiken

Zonder er verder omheen te draaien, laten we gaan kijken naar de lijst met tools voor webdevelopment die we je aanraden te gebruiken. We hebben ze gecategoriseerd, maar ze staan verder niet in een bepaalde volgorde. Heb je haast, voel je dan vooral vrij om meteen door te gaan naar een bepaalde categorie via onderstaande links.

Lokale development omgevingen

Een lokale development omgeving is een belangrijk onderdeel voor elke development stack. Maar het is helemaal van essentieel belang voor webdevelopment. Enkele van de bekendste lokale developmenttools:

1. DevKinsta

Natuurlijk zijn we hierin een beetje partijdig, maar DevKinsta zou zomaar de nummer één tool voor webdevelopment kunnen worden.

Oké, we zijn meer dan een beetje partijdig, maar we zijn dan ook erg trots op het eindresultaat!

Ben je er nog niet mee bekend: DevKinsta is een manier om in korte tijd lokale WordPress installaties op te zetten. Het is een volledig pakket waarmee je een WordPress website kan ontwikkelen, ontwerpen en lanceren voor zowel macOS als Windows computers (Linux komt eraan).

Je kan je installatie afstemmen op je huidige project. Zo kan je bijvoorbeeld als “server” zowel Nginx als Apache kiezen, elke PHP versie naar wens, en MariaDB of MySQL gebruiken, wat je ook wil:

En achter de schermen heb je nog meer mogelijkheden. Je kan e-mail debuggen en testen via de ingebouwde SMTP server en voor databasebeheer kan je de krachtige Adminer tool gebruiken:

DevKinsta’s Adminer-powered database manager.

Wij denken daarom dat DevKinsta ideaal is voor elke moderne WordPress developer. Je kan het eenvoudig inpassen in je workflow.

We hebben deze tools speciaal gemaakt voor developers, ontwerpers, freelancers en bureaus. Maar eigenlijk iedereen die iets met development moet zal DevKinsta handig kunnen vinden, met name (maar niet uitsluitend) Kinsta gebruikers.

En het beste: DevKinsta is helemaal gratis!

2. MAMP

Het MAMP logo

Je zou denken dat de klassieke tools voor het maken en lanceren van webpagina’s allang dood en vergeten zijn, aangezien er inmiddels snellere tools te vinden zijn. Maar traditionele webservice stacks, zoals LAMP, MAMP, en XAMPP, zijn nog altijd populair.

Over het algemeen combineren ze een bepaald besturingssysteem (Linux, macOS of Windows), met een Apache webserver, MySQL database, en Python, PHP of Perl in één stack. Daarom worden dergelijke webservice stacks ook in de nabije toekomst nog altijd volop gebruikt.

MAMP is de macOS versie van deze tool. Met deze aanpak installeer je een hele stack in één keer, en ga je vervolgens aan de slag met ontwerpen en ontwikkelen. Alhoewel het proces wat langer kan duren dan modernere aanpakken, zal je nog steeds evenveel flexibiliteit krijgen, of in ieder geval het potentieel voor flexibiliteit.

In een moderne tool zoals DevKinsta kan je alle opties binnen een nette Graphical User Interface (GUI) kiezen, terwijl je met een webservice stack meestal zelf handmatig alle benodigdheden moet installeren. Zo is er bijvoorbeeld geen ingebouwde manier om een WordPress website te draaien zonder je eigen site te starten. Hetzelfde geldt voor het testen van e-mail.

Net als met andere lokale development tools, is MAMP helemaal gratis. Maar er is ook een premium versie van MAMP beschikbaar voor zowel Windows als Mac, die meer functionaliteit biedt en een volledige, robuuste webdevelopment tool vormt.

Dankzij de flexibiliteit en prijs zie je nog veel klassieke webservice stacks op de computers van een hoop developers. Met name liefhebbers van de “command line” zullen sneller voor deze oplossing kiezen, zeker als je graag pakketmanagers als Homebrew, Flatpak, of Ninite gebruikt.

Uiteraard zullen ook Apache developers deze stacks gebruiken, net als developers die veel met MySQL, Python en PHP werken. Daardoor zullen ook WordPress developers zich erg thuis voelen bij deze tool.

3. XAMPP

XAMPP is ook een webservice stack die geliefd is onder PHP developers, met name mensen die WordPress producten ontwikkelen. De “X” in de naam slaat op de cross-platform aard van de tool. De tool bevat dan ook installers voor Windows, macOs en Linux:

Alhoewel er vroeger grote verschillen waren tussen verschillende webservice stacks, hebben rijen updates en verbeteringen het speelveld gelijker gemaakt. XAMPP heeft nog altijd enkele unieke eigenschappen te bieden.

Zo is MySQL bijvoorbeeld niet meer het standaard Relational Database Management System (RDMS). XAMPP gebruikt in plaats daarvan MariaDB. Dit lijkt meer op een echte productieserver, gezien de wissel naar andere oplossingen na de aankoop van Oracle.

Daarnaast zit er een web app installer in het XAMPP pakket. Bitnami lijkt sterk op oplossingen zoals Softaculous, maar Bitnami is specifiek voor XAMPP:

Alhoewel er veel apps beschikbaar zijn, zul je vooral geïnteresseerd zijn in de WordPress installer. Je kan kiezen uit allerlei add-ons, waardoor XAMPP een erg flexibele oplossing is voor lokale development.

Tekst en code editors

Developers discussiëren erg graag over welke code editor volgens hen de allerbeste is. Dat is misschien een stereotypering, maar er zijn echt heel veel meningen over het onderwerp, elk met een eigen enthousiaste fanclub.

Maar als de onderzoeken kloppen, zal je meestal Sublime Text, Visual Studio Code (VSCode), of IntelliJ IDEA gebruiken. Dat is erg logisch, aangezien alledrie deze tools handig op te schalen zijn van eenvoudig tekst bewerken naar complete Integrated Development Environments (IDE). Maar er zijn ook andere tools die het noemen waard zijn. Laten we enkele bekijken.

4. Visual Studio Code

Sinds de start in 2015 is het gebruik van Visual Studio Code hard toegenomen, door developers van allerlei achtergronden.

Het is een open source code editor die ontwikkeld is door Microsoft en die standaard zoveel te bieden heeft dat je het als een IDE kan zien. Het biedt sowieso genoeg functionaliteit om meer dan de helft van de markt te veroveren, zodat inmiddels 55% van de webdevelopers op dagelijkse basis Visual Studio Code gebruikt.

In de standaardopstelling is Visual Studio Code allereerst een tekstverwerker. Maar wanneer je het combineert met de bibliotheek met uitbreidingen, wordt het flexibel en modulair genoeg om aan elke wens van een developer te kunnen voldoen:

De Visual Studio Code extensies bibliotheek.

Dat betekent dat je linters en fixers kan installeren voor een gewenste programmeertaal (je kan ook ESLint en PHP CS Fixer vinden), naast extensies voor Docker en Vagrant, en nog allerlei andere zaken.

Nu we het toch over programmeertalen hebben, Visual Studio Code biedt standaard ondersteuning voor JavaScript, Node.js en TypeScript. Maar het ecosysteem met uitbreidingen is zo uitgebreid dat je er vanuit kan gaan dat je iets zal vinden voor de programmeertaal die je zoekt.

Daarnaast vind je ook nog allerlei goede integraties met andere Microsoft producten, zoals GitHub:

Visual Studio code heeft een speciale VCS integratie met GitHub.

Visual Studio is helemaal gratis en is gezien de uitgebreide set features een uitstekende keus. We zien VSCode als mooie tussenweg tussen IDEA en Sublime Text. En dat vormt dan een mooi bruggetje naar de volgende tool:

5. Sublime Text

Sublime Text is een oude bekende binnen de tekstverwerkers. Het is wat eenvoudiger dan veel andere oplossing op deze lijst, maar het uiterlijk staat in schril contrast met de uitgebreide functionaliteit.

Zo zie je bijvoorbeeld een hoop van wat Sublime Text te bieden heeft weer terug bij concurrenten. Het Command Palette is iets wat je in veel andere oplossingen terugziet, omdat het zo handig is.

Daarnaast zijn er allerlei handige sneltoetsen voor bewerkingen, zoals het maken van meervoudige selecties om meerdere kolommen in één keer te bewerken. Daarnaast biedt de Goto Anything feature een soort Vim-achtige combinatie van sneltoetsen om je bestanden te doorzoeken.

Sublime Text kan toetsen combineren om navigeren te versnellen

Sublime Text is een premium tool met een erg vrijgevige proefperiode. Je kan het daardoor zien als gratis tool, maar je kan een licentie kopen voor langdurig gebruik en om de developer te complimenteren met het uitstekende product.

In onze mening biedt Sublime Text een goede gebruikerservaring voor de meeste hobbyist-programmeurs, aangezien ze alle basisvoorzieningen bieden. Het is ook nog altijd een favoriet bij veel professionele developers dankzij de heldere visuals, overzichtelijke lay-out en uitbreidbaarheid.

6. Atom

Op een gegeven moment was Atom erg populair onder developers. Maar sinds Visual Studio Code in opkomst is, gaat dat ten koste van Atom. Dat is jammer, aangezien Atom een uitstekende code editor is, voor allerlei toepassingen.

Het is een app ontwikkeld door Github, wat ook de reden kan zijn waarom het lager in de rangorde staat bij Microsoft. Maar het wordt nog altijd regelmatig onderhouden, en je zou het kunnen zijn als alternatief voor Visual Studio Code.

De tekstbewerking is functioneel, en het biedt net als de grotere broer, een ingebouwde GitHub integratie. Er zijn ook allerlei add-ons die “packages” worden genoemd.

Je kan allerlei uitbreidingen vinden om Atom aan te passen aan jouw specifieke workflow en project. Atom biedt verschillende thema’s om uit te kiezen, en sommige daarvan, zoals One Dark, zijn zo populair dat ze ook te vinden zijn in andere editors:

Atom is een functionele code editor die je zeker eens moet proberen. Maar aangezien Atom gebouwd is op Electron (helaas geen woordspeling), hebben sommige gebruikers problemen met grote bestanden en projecten. Daarom raden we het vooral aan voor kleinere projecten en korte scripts, zeker met de ingebouwde terminal package, maar niet voor complexer werk.

7. Notepad++

Het is handig om meteen te zeggen dat Notepad++ geen van de “grote” code editors zal vervangen, zoals IntelliJ IDEA of Visual Studio Code. Desalniettemin biedt het een hoop functionaliteit voor simpele scripts en eenvoudige tekstbewerkingen.

Afhankelijk van je project kan dat zelfs een reden zijn om naar Notepad++ te wisselen. Ondanks of juist dankzij de eenvoud wordt Notepad++ gebruikt voor allerlei soorten projecten.

Het is een code editor alleen voor Windows, wat de twee plusjes in de naam uitlegt. Natuurlijk is Notepad oftewel Kladblok de alom bekende standaard tekstverwerker die standaard te vinden is op Windows. Notepad++ lijkt daar sterk op, maar biedt speciale features voor developers, zoals:

Vensters met tabbladen en split-view
Ondersteuning voor bijna 80 programmeertalen
Auto-completionfunctionaliteit
Een Function List, wat een erg handige manier is om alle gebruikte functions binnen je bestand in één keer te zien

Daarnaast is Notepad++ qua projectmanagement erg flexibel. Er worden namelijk drie soorten methodes ondersteund: sessies, workspaces en projecten. Wanneer je dieper in Notepad++ duikt, zul je zien dat je het voor veel uitgebreidere projecten kan gebruiken dan eenvoudige scripts van één pagina.

We denken dat Notepad++ vooral erg handig is voor developers die veel functionaliteit willen, maar wel precies op maat. Qua gebruik voelt het een beetje zoals de open source tool Vim, wat voor sommige projecten beter zal werken dan andere.

8. Het JetBrains pakket

Als het gaat om IDE’s voor development, zal het JetBrains pakket met oplossingen (bijna) bovenaan je lijst staan. Hun businessmodel is erg slim, aangezien er allerlei editors beschikbaar zijn van JetBrains, maar die eigenlijk allemaal subsets zijn van de belangrijkste editor, IntelliJ IDEA.

IntelliJ IDEA is een toonaangevende Java IDE.

IDEA verkoopt zichzelf als Java IDE. Het ondersteunt nagenoeg alle functionaliteit als andere IDE tools in dezelfde kwaliteitsklasse. Als zodanig ondersteunt het ook veel programmeertalen.

Zo gebruikt PyCharm bijvoorbeeld veel van de Python functionaliteit van IDEA en verpakt dat als eigen tool. Hetzelfde zie je bij phpStorm en WebStorm.

PyCharm is een Python-specifieke IDE die erg populair is.

IDEA gebruiken is bijzonder eenvoudig, JetBrains heeft het heel goed aangepakt, waardoor je direct aan het programmeren kan, zonder allerlei instellingen. Het klinkt misschien raar, maar de grens tussen een opdrachtregel editor zoals Vim en IDEA is soms vrij onduidelijk.

Beide tools focussen op workflow en efficiëntie, alhoewel je bij IDEA ook Vim sneltoetsen kan importeren, als je dat fijn vindt.

IDEA uitbreidingen bieden Vim sneltoetsen zodat je dezelfde ervaring houdt.

We nemen aan dat je vooral IntelliJ IDEA gebruikt wanneer je onderdeel bent van een groot project of werkt via een bedrijf met een software deal. Dat kan zijn om projecten te delen of om binnen een consistente omgeving te kunnen werken. Veel WordPress developers gebruiken JetBrains producten omdat het erg robuust kan zijn qua projectbeheer.

Prijs is natuurlijk ook een factor, en IntelliJ is gebouwd als abonnement, dat meestal in de honderden tot duizenden dollars per jaar kost.

Er zijn ook enkele “community” edities van JetBrains producten te vinden. Maar dit zijn meestal vereenvoudigde versies van het originele product, meestal open source oplossingen waarbij de gepatenteerde elementen eruit gesloopt zijn.

Verder biedt JetBrains bijzonder interessante prijzen voor open source projecten, startups, onderwijsinstellingen, Docker Captains en nog allerlei andere specifieke doelgroepen.

Webdesign en prototyping tools

Een web app is natuurlijk nergens zonder goede User Experience (UX). Daarom heb je voor het prototypen van je layouts en visuals dus een speciale, goede tool nodig. Ontwerptools zijn van groot belang voor zowel server-side als client-side development. Enkele populaire keuzes:

9. Figma

Figma is een vaak genoemde tool voor webdevelopment, waarmee je kan samenwerken aan je ontwerp.

Je kan de editor met versleepfunctie gebruiken om interfaces en andere elementen voor gebruikers te bouwen. Voor developers is het handig dat je stukjes code kan pakken en implementeren in je projecten. Figma maakt het hele proces, van het idee tot de implementatie, een stuk soepeler en houdt het aantal revisies tijdens de hele projectduur zo laag mogelijk.

Verder krijg je het voordeel van een homogene set tools die je helpen bij het kiezen van kleuren en lettertypen. Dit proces is dus veel makkelijker dan overal een aparte tool voor gebruiken, zoals Type Scale:

…en een subset van andere webdevelopment tools, zoals Adobe Color, Coolors, allerlei kleurenkiezer en nog veel meer tools.

Alhoewel Figma zeker meerwaarde heeft voor projecten met één developer, biedt het echt veel meerwaarde bij grotere teams. Teams zullen vooral de functies voor samenwerking bij Figma waarderen, zoals de centrale opslag voor assets, en herbruikbare onderdelen. Teamleiders zullen het erg fijn vinden dat er volledige rapportages in zitten, zodat ze kunnen zien hoe verschillende teamleden de ontwerpmogelijkheden gebruiken.

Qua prijzen kost Figma $12 per editor op het “standard” niveau, dat oploopt tot $45 per editor voor teams van grote ondernemingen (waarbij editor neerkomt op elke gebruiker). Daarom kan de prijs oplopen op basis van het aantal editors dat je in dienst hebt.

10. Sketch

Sketch is een macOS-specifieke app die developers ook vaak noemen als goede tool.

Het Sketch logo.

Het is populair omdat Sketch allerlei functionaliteit te bieden heeft, en lekker makkelijk te gebruiken is, wat logisch is, aangezien het om een standaard macOS app gaat. Het lijkt wat op Xcode IDE van Apple, wat helemaal niet erg is, en is overzichtelijk qua navigatie.

Natuurlijk kan je allerlei essentiële functies uitvoeren zoals het bewerken van vectoren en resizen van beperkingen. Maar er zit nog veel meer in de app, wat erg handig is bij het maken van ontwerpen en ze eenvoudig naar anderen te exporteren.

Wanneer je bijvoorbeeld kijkt naar de Smart Layout functionaliteit van Sketch, wordt er een adaptieve resizing gebruikt die past bij jouw huidige layout en afmetingen. Er zijn ook allerlei tools voor samenwerking te vinden die iedereen helpen om mee te werken aan het ontwerp.

Sketch onderscheidt zich van een tool als Figma doordat een freelancer of individuele developer er gratis mee aan de gang kan, en pas een abonnement hoeft te komen wanneer dat nodig is. Qua kosten betaal je voor Sketch eenmalig $99 of $9 per maand per gebruiker.

11. InVision Studio

InVision Studio verkoopt zichzelf als één van de weinige tools als een “scherm ontwerp” app. Dat is logisch, en makkelijk te begrijpen. InVision Studio biedt alle standaardfuncties die je zou verwachten, zoals een intuïtieve editor met lagen en ondersteuning voor vectoren.

Maar er zit nog veel meer in, qua prototyping en het maken van animaties. Zo kan je bijvoorbeeld artboards en schermen aanwijzen, aanklikken en slepen om ze te koppelen. Deze feature maakt het mogelijk om animaties te bouwen als onderdeel van het ontwerpproces, in plaats van iets dat je later moet uitbesteden.

Qua uitbesteding: het hele team kan met InVision Studio werken dankzij de gedeelde libraries voor onderdelen, algemene opties voor synchronisatie, en een robuuste Inspect modus, naast andere functies.

De prijsstructuur is ook interessant. De gratis versie van InVision Studio biedt nagenoeg alle functionaliteit van de betaalde versie, met alleen een beperking qua aantal documenten dat je op kan slaan. Het Pro niveau biedt een prima prijs-kwaliteitverhouding (ongeveer $95 per gebruiker per jaar).

12. Affinity Designer

Ben je een gebruiker van Adobe Illustrator user, dan ben je Affinity Designer vast al eens tegengekomen. De aanpak van Serif van grafisch ontwerp lijkt de oplossing van Adobe het vuur aan de schenen te leggen:

Sinds de start heeft het een brede userbase verzameld dankzij hun goede contact met de community, robuust ontwerpprincipes, en aantrekkelijke prijsmodel. Je kan versies voor Mac, Windows en iPad vinden, die allemaal met vectors, rasters of allebei tegelijk overweg kunnen:

De tools die je gewend bent van Illustrator zitten er nog gewoon in, naast een compleet pakket met kleurprofielen en exportmogelijkheden:

De exportmogelijkheden in Affinity Designer.

Kort gezegd heb je dus alle features en functionaliteit om professionele graphics voor je projecten te gaan maken. Daarnaast zijn de prijzen extreem competitief. Het kost eenmalig rond de $50. Er is geen relevante cloud optie, zoals Illustrator dat had. Desalniettemin krijg je voor een eenmalige prijs alles van Adobe, maar dan beter.

13. CodePen of JSFiddle

Toen we het eerder over IntelliJ IDEA hadden, hadden we het nog niet over één van de kleinere maar erg handige features: Scratch bestanden. Hiermee kan je snel een stukje code schrijven en testen, zonder impact op de rest van het project.

Voor gebruikers van andere code editors is een oplossing zoals CodePen of JSFiddle hiervoor een goed alternatief. Ze werken allebei op een soortgelijke manier: er zijn drie tekstverwerkers voor HTML, CSS en JavaScript, en een outputscherm voor het resultaat:

Je kan je “Pen” of “Fiddle” een naam geven, opslaan en delen met anderen. Het is zo’n ontzettend simpel idee, maar het kan je helpen om vage plannen in enkele seconden om te zetten tot een tastbare feature.

Voor developer die een bepaald element binnen een bestand willen bekijken en die willen laten zien waar verbeteringen mogelijk zijn, is een “online IDE” van grote waarde. Daarnaast kan je samenwerken via de chat of een “live microfoon”:

In het algemeen kan je een online IDE zien als een “sleeper” tool voor webdevelopment, aangezien het niet veel besproken wordt, maar heel veel developers het wel gebruiken om betere code te kunnen maken.

14. Buttons Generator

Buttons Generator is een gratis online CSS knopgenerator waarmee je met één klik een aantal verschillende CSS knopstijlen kunt maken. Blader eenvoudigweg door alle knopstijlen en kies er een die je mooi vindt. Klik op die stijl en de CSS wordt automatisch aan je klembord toegevoegd.

Je kunt de kleuren en stijlen van de knoppen gebruiken zoals je ze ziet, of de CSS bewerken om de knop de kleur en stijlen te geven die je wilt. Er zijn heel wat verschillende stijlen om uit te kiezen, waaronder 3D, kleurverloop, met schaduwrand, neumorphic, retro, schuivend effect, en nog veel meer.

Probeer het eens, het is een leuke, unieke, gemakkelijke manier om CSS knoppen te genereren.

Git Clients

Een gecentraliseerde plek bieden om code op te slaan, veranderingen bij te houden en samen te werken met een team zonder dubbel werk, is het levenswerk van een Version Control System (VCS), of in goed Nederlands een versiebeheersysteem. Hieronder enkele tools die met het ultieme versiebeheersysteem samenwerken: git.

Laten we het eerst over de VCS zelf hebben.

15. Git

Git is essentieel voor de moderne developer, en is dan ook één van de belangrijkste tools voor webdevelopment die je kan vinden. Kort gezegd is het een manier om veranderingen in de code van je projecten bij te houden en op te slaan in “repositories”.

Git is ontworpen door de maker van Linux, Linus Torvalds, en gebruikt een aantal opdrachten om veranderingen in bestanden door te voeren naar een “staging area”, vanaf waar je een “commit” kan uitvoeren om ze toe te voegen aan een “repository”. Vanaf daar “push” je ze naar een online repository.

Alhoewel Git zeker niet het enige VCS is dat bestaat (het WordPress developmentteam gebruikt zelf Trac), is het wel het meest bekend. Een VCS zoals Git of Trac helpt teams om samen te werken door code te hosten op een centrale locatie.

De basisopdrachten zijn eenvoudige functies van één woord met het voorvoegsel git, meestal direct vanaf de opdrachtregel te gebruiken. Bijvoorbeeld:

git add file.php

Deze uitdrukking voegt file.php toe aan je testgebied. Oftewel, de veranderingen worden vastgelegd als iets dat jij op wil slaan, zonder dat het al een volledig afgerond product is. Je kan dit doen voor één bestand of een heel project, net wat je wil.

Om een bestand te committen, voer je git commit uit. Vanaf daar kan je een opmerking toevoegen zodat anderen begrijpen wat er in je commit zit. Daarna worden je veranderingen opgeslagen en gepusht naar de hoofd”branch”. Dat hangt er natuurlijk wel vanaf of je al dan niet werkt aan een “repo” op afstand.

Wanneer je nog niet eerder met Git of een ander VCS hebt gewerkt, heeft GitLab een goede uitleg voor beginners om Git te gebruiken vanaf de opdrachtregel. We zullen het later ook nog uitgebreider over GitLab zelf hebben.

16. GitHub

Voor de overgrote meerderheid van de developers is GitHub de plek waar Git repositories opgeslagen worden:

Het is een oplossing in handen van Microsoft, die veel meer te bieden heeft dan alleen het hosten van Git. Zo zijn er een aantal tools voor geautomatiseerd testen, en een poging om nog meer features voor samenwerking te bieden.

Voor open source projecten zijn platformen zoals GitHub bijna de standaardkeuze. Daardoor is GitHub een webdevelopment tool die van onschatbare waarde is voor veel open source gebruikers, studenten en developers in het algemeen. Dit is helemaal zo wanneer je de issue tracker van Github doorspit om een probleem op te lossen met pakketten die je geïnstalleerd hebt.

GitHub's Issue Tracker. — GitHub’s Issue Tracker.

GitHub is niet alleen bedoeld voor het opslaan van repo’s van programma’s. Het is ook te gebruiken voor alle andere program meerprojecten, zoals webdevelopment of zelfs het schrijven van een boek.

In het algemeen is GitHub een ideale tool waarmee je een prachtige geheel kan maken uit allerlei verschillende onderdelen. Maar het is zeker niet het enige platform dat hiervoor te vinden is.

17. GitLab

Het GitLab logo.

We hebben het eerder al kort genoemd, maar GitLab is een concurrent van GitHub, met een vergelijkbaar doel. Het is in feite een host voor Git repo’s, maar biedt ook nog andere opties.

Waar GitHub zichzelf een “development platform” noemt, richt GitLab zich specifiek op “DevOps”. Binnen het gratis niveau ondersteunt GitLab elke fase binnen de DevOps cyclus, beveiligingstesten voor statische applicaties, en ongeveer 400 minuten per maand voor Continuous Development (CD) en Continuous Integration (CI).

GitLab richt zich vooral op hun community, waarin het zich dan ook onderscheidt van GitHub. Het gaat meer over deployment, en de hele cyclus van een project. Dat is helemaal niet erg, maar betekent wel dat GitLab een meer “geïsoleerd” platform is, en minder geschikt voor open source projecten zoals GitHub.

Voor de meeste teams zal het gratis niveau van GitLab meer dan genoeg zijn. Voor ongeveer $230 per jaar per gebruiker, krijg je ook toegang tot analytics voor zowel je code als algehele productiviteit, ongeveer 10.000 minuten voor CD/CI en nog veel meer.

18. Sourcetree

Sourcetree is niet zelf een Git repository host, maar een Graphical User Interface (GUI) om die repo’s te beheren. Er zijn nog een hoop andere van dat soort oplossingen, zoals GitKraken, Sublime Merge, GitHub Desktop, en nog veel meer.

Het is een product van Atlassian (en wij zijn grote fans van Atlassian!) dat te koppelen is aan andere producten, zoals BitBucket, om een visuele weergave te maken van je Git repository.

Sourcetree wordt in de markt gezet als een eenvoudige Git client, en dat is het ook zeker, maar het is ook bijzonder geschikt voor ervaren gebruikers. Er zit genoeg kracht onder de motorkap om een team te ondersteunen dat volledig in Git werkt (of in Mercurial).

Zo kan Sourcetree bijvoorbeeld heel simpele dingen doen, zoals het markeren van veranderingen ten opzichte van de laatste commit, maar zitten er ook geavanceerdere functies in. Zo kunnen teamleiders changesets bekijken, tussen verschillende branches werken, en de code laten visualiseren met grafieken en informatieve tabs.

Of deze Git client een goede keuze is hangt helemaal af van jouw omstandigheden en voorkeuren. Ben je nog niet bekend met dit terrein, dan raden we je aan om bij een Terminal te blijven totdat je de hele flow en het hele proces goed begrijpt. Voor professionals of teams met veel Git ervaring, zal een client zoals Sourcetree je elke dag een paar minuten tijdwinst opleveren.

Browser developertools

Zonder webbrowser is er ook geen webdevelopment. Maar alhoewel je browser cruciaal is om op het web te kunnen navigeren, kan je er ook mee ontdekken hoe het web werkt.

De meeste moderne browser bevatten specifieke developmenttools waarmee je backend code kan analyseren, en vervolgens die inzichten gebruiken in je eigen project. Enkele van de meest populaire zijn:

19. Chrome Developer Tools

Chrome’s “DevTools” zijn erg populair vanwege de uitstekende feature set en goede diagnostiek.

Dankzij de opkomst van Chromium-gebaseerde browsers, zullen veel daarvan dezelfde set DevTools hebben met soortgelijke snelkoppelingen. Je kan bijvoorbeeld Microsoft Edge, Brave, en Chromium zelf bekijken, en er zijn nog allerlei andere klonen daarvan, waarmee je allemaal projecten kan uitvoeren binnen de browser.

Het tabblad Elements zal een plek zijn waar je vaak moet kijken, aangezien je hier de broncode van de pagina kan zien. Daarnaast geeft het tabblad Performance volgens ons zoveel inzicht in hoe snel een pagina laadt en waarom, dat de DevTools van andere browser er niet aan kunnen tippen:

Het tabblad Security heeft ook goede informatie, dat je nodig zal hebben voor het monitoren (of onderzoeken) van websites van klanten:

Nog beter, je kan zelfs Google Lighthouse rapportages ophalen, direct vanuit je Chromium-gebaseerde browser:

Een Google Lighthouse rapport vanuit Brave’s DevTools.

De DevTools hierin horen zeker bij de beste die je kan vinden, en daarom zie je ook veel Chrome en Chromium gebruikers die er zwaar op leunen. Natuurlijk bieden andere browsers ook zeker DevTools, die het overwegen waard kunnen zijn.

20. Firefox Developer Tools

Met een maandelijks actieve userbase van ongeveer 220 miljoen mensen, is Firefox nog altijd een erg populaire browser, ondanks de dominantie van Google. In het verleden roemden developers Firebug, en dat was voor veel een toonaangevende tool voor het debuggen vanuit de browser.

Inmiddels is Firefox Developer Tools daarvoor in de plaats gekomen:

Er is een basisset met features voor het bekijken en analyseren van broncode (Inspector), een Debugger, Memory, Storage, en nog allerlei andere tools.

Voor beginners is de Console een startpunt om te beginnen met programmeren, omdat je direct vanuit daar JavaScript kan uitvoeren binnen je browser, en dat biedt een makkelijke manier om stukjes code te testen en op gang te komen.

Desalniettemin denken we wel dat Firefox (en andere browsers) minder opties bieden in hun Developer Tools dan browsers die op Chromium gebaseerd zijn. Desalniettemin zul je voor het oplossen van problemen en cross-browser debugging vaak Firefox gebruiken. Daarom is het handig dat je er wel veel mee kan doen.

Frontend Frameworks

Qua frontend heb je iets nodig waarmee je prachtige websites kan bouwen. Welk framework je hierbij kiest is van essentieel belang. Je moet altijd kiezen voor de beste tool voor het project.

Laten we met dat in ons achterhoofd kijken naar enkele populaire keuzes.

21. Bootstrap

Mobiele responsiveness is een belangrijke standaardfeature in modern webdesign. Dat is een mooie ontwikkeling, aangezien mensen tegenwoordig meer browsen op hun mobiele telefoon dan op computers. Daarom zal je een manier moeten hebben om snel mobile-first websites online te zetten.

Bootstrap is een mooie tool voor webdevelopment die al veel gebruikt wordt:

Het Bootstrap logo.

Het is een toolkit dat een combinatie biedt van JavaScript plugins, Sass variabelen, enkele ingebouwde onderdelen, een goed responsive grid systeem en nog veel meer. Er zit zelfs een platform voor officiële thema’s in die werken met Bootstrap, en allerlei WordPress websites gebruiken ook thema’s die hiermee gebouwd zijn.

Of je Bootstrap zal gebruiken hangt natuurlijk af van je precieze project. Maar het is vrij logisch om aan te nemen dat webdevelopment projecten met een krap budget en korte deadline snel voor een oplossing in Bootstrap zullen kiezen, en dat vervolgens aanpassen naar WordPress. Aangezien zowel het framework als WordPress gratis zijn, zitten je kosten alleen in je eigen tijd.

22. Tailwind CSS

Op papier slaat Tailwind CSS echt nergens op. Het is een frontend framework voor een taal die onderdeel is van de heilige drie-eenheid van webdevelopment. Daarom is het logisch om aan te nemen dat de bedoelde gebruiker al alle benodigde kennis heeft, en dus geen behoefte heeft aan een framework.

Maar in de dagelijkse praktijk blijkt Tailwind CSS superhandig te zijn. Het is een manier om de frontend van je website te ontwerpen, zonder HTML te verlaten.

Je kan utility classes gebruiken met verschillende tags om CSS toe te voegen vanuit een core-stylesheet. Natuurlijk blijft CSS de primaire bron voor styling. Maar je ziet het gewoon niet terwijl je op basis van HTML een layout bouwt. Daarom kan je structuur en stijl tegelijkertijd ontwikkelen.

Deze aanpak doet denken aan het 960 Grid System, en zal ook goed samenwerken met dat framework. Het nadeel is dat je te veel elementen met evenveel classes krijgt, zodat je bijzonder slordige code hebt als eindresultaat. Je moet dus wat geduld en discipline hebben als je Tailwind CSS gebruikt, maar het is een erg snel en robuust framework als het bij je project past.

23. Bulma

We hebben veel vooruitgang geboekt bij het ontwerpen van structuren en layouts voor sites, om flexibele, responsieve en dynamische kolommen te maken voor velen. Alhoewel het beheren hiervan niet het enige is dat Bulma doet, is deze toepassing wel de hoofdmoot van het framework:

Net als Tailwind CSS houdt Bulma de CSS buiten zicht, en geeft je de utility classes voor je HTML. Het is gebouwd met Flexbox, is modulair en mobile-first. Het is vooral een uitkomst als je maar een paar onderdelen nodig hebt. Je kan ook frameworks combineren als je wil.

Daarnaast heb je geen JavaScript nodig om Bulma aan het werk te zetten, het gebruikt namelijk alleen maar CSS. Je kan interface elementen zoals knoppen toevoegen, met nauwelijks enige code. Het is een eenvoudig te gebruiken open source framework dat je kan aanpassen aan je project. In onze optiek is dat een belangrijke eigenschap, waar je veel voordeel uit kan halen.

24. Foundation

Het ZURB team heeft een unieke aanpak van CSS frameworks door middel van Foundation. Het is een mobile-first, semantische tool met twee versies voor sites en e-mail:

Foundation is specifiek gemaakt met een focus op toegankelijkheid. Elk stukje code in Foundation heeft eigen speciale ARIA attributen. Maar voordat je daar bent is Foundation al indrukwekkend bij snelle prototyping, dankzij de manier waarop je het toevoegt aan je HTML. Je kan bijna elk structureel element op je pagina maken, ook allerlei soorten menu’s en navigatie-elementen:

ZURB biedt ook een hoop uitstekende documentatie en tutorials waarmee je alles over het framework kan leren. Foundation is eenvoudig te gebruiken, maar we denken dat je er diep mee kan gaan in het bouwen van websites, en er allerlei complexe layouts en functies mee kan maken.

Je zal ook een templates vinden op de website van Foundation. Dat zijn eenvoudige wireframes waarmee je snel aan de gang kan, dus een erg prettige toevoeging.

In het algemeen doet het Foundation framework precies wat de naam zegt. Het zal een centraal fundament zijn voor de development van je website, in plaats van allerlei losse functies toe te voegen. Daarom zal je het waarschijnlijk ook niet voor elk project gebruiken. Maar wanneer je het gebruikt, zal het voor allerlei soorten websites erg van pas komen.

25. Material-UI

We zullen het later uitgebreid hebben over React, maar voor nu is het alvast belangrijk om te weten dat Material-UI gebaseerd is op dezelfde componenten als dit JavaScript framework. Voor mensen die het helemaal niet kennen, Material Design is de “filosofie” van Google over hoe je de frontend van een website zou moeten ontwerpen. Dat betekent een hoop Roboto lettertypen en kleurvlakken:

Material-UI voldoet duidelijk aan de ontwerpeisen van Google.

Je importeert de bibliotheek naar React, en gebruikt vervolgens speciale HTML tags om je website mee te bouwen:

Om het element verder aan te passen kan je classes toevoegen aan je HTML tags. Het hele stuk code wordt verpakt in een function en je verwerkt de details (en daarmee de pagina) in React.

Er zijn een hoop gratis en betaalde thema’s te vinden, voor allerlei use cases en prijzen:

De bibliotheek met thema's van Material-UI. — De bibliotheek met thema’s van Material-UI.

Aangezien Material-UI één specifieke use case heeft, namelijk het maken van websites volgens Material Design, zal dit een logische keuze zijn als dat het doel van je project is. De bibliotheek met thema’s zal vooral erg handig zijn om aan de gang te gaan, wat je budget ook is.

26. HTML5 Boilerplate

Wanneer je een WordPress developer bent, heb je vast wel eens gehoord van Underscores. Dit is een eenvoudige WordPress startthema dat je uren kan besparen bij het in elkaar zetten van de belangrijkste elementen van je website. HTML5 Boilerplate doet hetzelfde, maar dan voor een algemeen ontwerp.

Het heeft daarvoor zeven bestanden die HTML, CSS en JavaScript beslaan. Ze bevatten allemaal alleen de broodnodige bestanden en code om een pagina weer te kunnen geven. Vanaf daar is het helemaal aan jou om de pagina verder te ontwerpen.

HTML5 Boilerplate heeft veel fans omdat het vooral bedoeld is om een hoop tijd te besparen, en niet zozeer om een volledig framework te bieden. Er zijn dus geen ingebouwde visuals die bezoekers zullen imponeren, maar zodra je HTML5 Boilerplate aanzet, zul je merken dat het je development net zo versnelt als Underscores dat doet voor WordPress developers.

27. Materialize

Alhoewel we Materialize niet echt een concurrent voor Material-UI kunnen noemen, is het wel een framework dat ook de principes van Material Design probeert te gebruiken om een layout te maken:

In plaats van React gebruikt Materialize echter CSS als framework. Daardoor is Materialize aanzienlijk makkelijker te implementeren in de frontend. Net zoals andere CSS-gebaseerde frameworks kan je classes binnen HTML gebruiken om elementen te implementeren in de frontend.

Dat gezegd hebbende zijn er ook een hoop JavaScript onderdelen, voor dingen zoals modals en dropdownmenu’s:

Een dropdownmenu gemaakt met Materialize.

Zoals de meeste van dit type frameworks, zijn er premium thema’s waarmee je snel layouts in een bepaalde stijl kan bouwen. Het zijn echter wel allemaal statische HTML thema’s, wat een probleem kan zijn als je ook JavaScript zou willen gebruiken. In dat geval kan Material-UI wellicht een betere keuze zijn.

Web Application Frameworks

Simpel gezegd: een JavaScript framework of -bibliotheek laat je op een andere manier werken met de zogenaamde “vanilla” code. In dit geval is het om specifieke webapplicaties en sites te maken. Er zijn ook tal van “smaken” — laten we er een paar behandelen.

28. React.js

Een voorbeeld van de React sandbox code.

React.js is een populaire JavaScript library die ontworpen is door Facebook en veel moderne WordPress elementen laat doen wat ze doen. Zowel de WordPress.com backend als de Block Editor gebruiken React, en we zien het dan ook als een interface-first manier om JavaScript te gebruiken.

De Calypse backend voor WordPress.com is met React gebouwd.

Daarom moeten WordPress developers – om Matt Mullenweg te parafraseren – hun best doen om React.js uitgebreid te leren kennen. Maar het is niet alleen een framework voor WordPress developers.

Overal waar je een moderne en dynamische User Interface (UI) nodig hebt, kan React een bijzonder goede keuze zijn. Het gebruikt een syntax extensie voor JavaScript, onder de naam JSX, om elementen te maken, die vervolgens doorgezet worden naar de Document Object Model (DOM):

const name = "Ken Starr';

const element = <h1>Hello, {name}</h1>;

ReactDOM.render
  Element,
  document.getElementById('root')
);

De JavaScript variabele binnen JSX kan elke geldige expression zijn, waardoor je ingewikkelde argumenten kan maken. Hierdoor is React een sterke keuze binnen de frameworks. Vanwege de populariteit zouden we React op je must-learn lijst zetten, waar je ook je producten mee ontwikkelt.

29. Vue.js

Vue.js is ook een JavaScript framework voor het bouwen van user interfaces. Het zit in de “view layer” en is ideaal voor het integreren met andere libraries en frameworks.

Qua HTML zou Vue niet toegankelijker kunnen zijn. Je geeft je tag en ID en gebruikt een key vanuit de dictionary set aan de JavaScript kant. De data is daarmee reactief en de data en de DOM zijn gekoppeld.

Op die manier lijkt Vue.js sterk op de andere CSS frameworks waar we tot nu toe naar gekeken hebben. Het is een erg interessant framework en we raden je van harte aan om de documentatie eens te bekijken voor mogelijkheden.

Alhoewel Vue.js JSX declaraties ondersteunt, is het beter geschikt voor het gebruiken van templates die gebaseerd zijn op “klassieke” webtechnologieën. Daarom is het ideaal voor developers die niet alleen maar in JavaScript willen werken.

30. Express.js

We komen al op het gebied van een soort meta-framework, aangezien Express.js verbinding maakt met Node.js en daarmee een basis legt voor andere frameworks.

Het is een minimalistisch framework en erg handig om je te helpen bij het organiseren van onderdelen aan de kant van de server, in een bekend Model-View-Controller (MVC) format. Daardoor lijkt de code ingewikkelder dan veel andere frameworks, zelfs dan standaard JavaScript:

var express = require('express');

var app = express();

app.get('/', function(req, res){
  res.send("Hello world!");
});

app.listen(3000);

We denken dat Express.js vooral goed past bij toepassingen die veel interactie hebben met databases. Hierdoor is het goed geschikt voor veel webtoepassingen en backend developers die frontend taken met zo weinig mogelijk stress willen regelen.

31. Svelte.js

Een belangrijke richtlijn bij webdevelopment is dat je altijd moet zorgen dat je websites op zoveel mogelijk browsers werken. Toch wil je soms apps of websites bouwen zonder verouderde browsers te ondersteunen. In die gevallen zou Svelte.js bovenaan je wensenlijstje moeten staan.

Het framework is vernoemd naar de bestandsgrootte, namelijk een magere 5 KB na het minimaliseren. Het heeft een jQuery-achtig format dat eenvoudig te gebruiken zal zijn voor ervaren gebruikers:

$('.hello').text("Hello svelte");

Er zitten minder dan 40 functies in de Svelte API, dus je kan rap aan de slag zonder een hoop leeswerk. Daarnaast kan je makkelijk nieuwe functies toevoegen via $.fn.

Je kan “polyfills” vinden voor ondersteuning van Internet Explorer 9, maar dat is eigenlijk de enige concessie. Voor ondersteuning van hypermoderne browsers door middel van een superlean framework, is Svelte.js zeker de goede keuze.

32. Laravel

We hebben tot nu toe alleen nog maar naar JavaScript en CSS frameworks gekeken. Maar gezien het belang van PHP is het ook logisch dat we voor die taal enkele frameworks bekijken. Laravel is hierbij de ideale keuze, aangezien het erg populair is onder developers, vanwege de syntax en het ecosysteem:

We kunnen Laravel dan ook beter beschrijven als een ecosysteem, aangezien het allerlei tools bevat om je projecten mee te bouwen. Zelfs wanneer je het framework zelf niet veel gebruikt, kan je de Laravel Homestead alsnog gebruik, een lokale development omgeving op basis van Vagrant.

Laravel zelf is een Docker-gebaseerd PHP framework en gebruikt een Command Line Interface (Sail) om er mee samen te werken. Net als bij Vagrant gebruik je Sail om containers mee op te bouwen en uit te voeren.

Laravel heeft echter nog allerlei andere zaken te bieden. Zo kan je het bijvoorbeeld als full-stack framework gebruiken, als API backend voor Next.js apps, en ongeveer alles daar tussenin.

Als PHP developer zal Laravel een centrale tool voor je workflow zijn, zelfs al ken je het niet als zodanig.

33. Gatsby

Gatsby is een open source frontend framework dat de laatste tijd steeds populairder aan het worden is. Dat komt doordat Gatsby snel, schaalbaar en veilig is, en hoge prestaties biedt.

Het biedt een supersnel installatieproces door middel van de Node Package Manager (npm). Daar zullen we het zo nog meer over hebben. Alhoewel het een JavaScript framework is, maakt Gatsby statische HTML bestanden tijdens de runtime, dus er is geen manier om een website aan te vallen. Daarnaast automatiseert Gatsby de instellingen voor prestaties, waardoor je website constant in de optimale configuratie draait.

De combinatie van geautomatiseerde optimalisatie, de dynamische scaling en de statische HTML, lijkt Gatsby haast een levend wezen. Er is een complexe code “makeup” met JSX, Markdown, CSS en nog veel meer, afhankelijk van je behoeften en wensen. Elke stap van je workflow en elk onderdeel van je stack kan op maat gemaakt worden naar jouw eisen.

WordPress developers zullen het ook prettig vinden hoe goed Gatsby integreert met het platform. Maar het zal niet in alle situaties een goede aanpak bieden. Als je bijvoorbeeld een cloud-based CMS volledig moet kunnen beheren, is dit geen oplossing voor jou. Desalniettemin kan je Gatsby in de meeste gevallen perfect aan jouw situatie aanpassen, en het werkt dus perfect samen met WordPress.

34. Django

Voor al het gepraat over dat Python een programmeertaal is voor “beginners” of om mee te leren, is het ook de krachtpatser achter allerlei bekende en krachtige websites. Enkele van de grootste websites, Instagram, Uber, Reddit, Pinterest, of maar wat te noemen, gebruiken Django. Vaak wordt Python zelf niet genoemd, alleen Django.

Django is een framework dat Python gebruikt om server-side webtoepassingen mee te bouwen. Het is net zo eenvoudig te gebruiken als Python zelf, met een ontzettend makkelijk leesbaar format.

Python is een ideale scripttaal voor projecten waarin logica belangrijk is, dus om dit te gebruiken voor een webtoepassing is een heel logische keuze. Daarnaast is de verwerkingssnelheid van Python enorm hoog, en de basisstructuur ontzettend lichtgewicht. Dankzij die snelheid is Django een uitzonderlijk goed server-side framework in vergelijking met PHP en heeft het net zoveel kracht te bieden als de populaire taal zelf.

Desalniettemin zijn er minder nieuwe gebruikers, wat wellicht komt door de reputatie van Python als programmeertaal voor starters. Toch werkt Django heel goed met andere talen, zoals JavaScript, om samen de basis te vormen van een moderne web app.

Als je van plan bent om een CMS zoals WordPress te gaan gebruiken of oplossingen gaat maken voor React projecten, heb je natuurlijk wat minder keuze. Desalniettemin verwachten we nog altijd een flinke toename te zien van websites die Django gebruiken.

35. Ruby on Rails

De Ruby programmeertaal was lange tijd het lievelingetje onder de programmeertalen voor beginners, en alternatieve scripttalen voor PHP. Het wordt vaak vergelijken met Python.

En net als Django is Ruby on Rails ook een favoriet bij veel developers.

De placeholder pagina voor een nieuw Ruby on Rails project.

Je ziet dat Ruby veel gebruikt wordt in server-side of minder zichtbare webtoepassingen. Daarnaast wordt Ruby on Rails als server-side framework gebruikt voor ontzettend veel websites. Het gebruikt een MVC aanpak en biedt structuren voor de webservice, pagina’s en een database. Daardoor heb je standaard de basis voor een complete website klaarliggen.

Ruby on Rails past goed bij je project als je allerlei taken moet inplannen en moet samenwerken met allerlei externe oplossingen. Zo is er bijvoorbeeld een ingebouwde integratie met bestandsopslag zoals Google Cloud en een wrapper voor het verzenden van e-mails.

Over het algemeen is het een goede keuze als je een robuust set met allerlei standaardzaken (bijvoorbeeld een mappenstructuur) wil hebben die je op maat kan aanpassen wanneer nodig. Aan de andere kant is het geen ideale keuze als je graag API’s wil gebruiken tijdens je development.

De code structuur van Ruby on Rails kan snel complex worden en moeilijk te begrijpen bij echt grote projecten. Runtime kan ook langzamer worden, waardoor het niet ideaal werkt voor projecten waar snelheid van cruciaal belang is.

Desalniettemin is Ruby on Rails nog altijd één van de toonaangevende server-side frameworks, en het gebruik is ook zeker niet aan het afnemen.

36. TypeScript

Heel kort samengevat biedt TypeScript optionele statische “type checking” voor JavaScript. Het is een “superset” van de taal, en ondersteunt ook allerlei andere JavaScript libraries. In het algemeen is TypeScript eigenlijk JavaScript met een aantal extra functies, en je kan de talen dan ook tegelijkertijd compileren.

Veel developers hebben TypeScript gebruikt om het aantal runtime errors te verminderen in hun projecten. Type fouten zijn één van de meest gemaakte fouten en door dat te verminderen kan je een hoop tijd besparen.

Voor een heel simpel voorbeeld van TypeScript, kan je deze string bekijken:

let helloWorld = “Hello World”;

// ^ = let helloWorld: string

Hier gebruikt TypeScript de opdracht “let” in plaats van de normale “var” voor de helloWorld variabele. Vanaf daar weet TypeScript dat helloWorld een string is, en controleert het basis daarvan.

Uiteindelijk is TypeScript strikt genomen geen essentiële webdevelopment tool, maar het is wel ontzettend populair aan het worden door de belangrijkste markeringsfunctie. Je kan er een hoop tijd mee besparen, en daarom een belangrijk onderdeel van je workflow worden.

37. GraphQL

Dit is een unieke tool, die met name interessant is voor developers die met data binnen een API werken. GraphQL is namelijk een query-taal die je in een API kan gebruiken, maar ook als runtime kan werken voor het tonen van de resultaten van je query.

Met een standaard REST API moet je meestal uit verschillende URL’s resultaten ophalen. Met GraphQL kan je alle data ophalen vanuit één request. Daarnaast worden GraphQL API’s gesorteerd per type, niet per endpoint. Deze classificatie maakt de efficiëntie van je query veel hoger en geeft je duidelijkere foutmeldingen wanneer er iets misgaat.

Je kan ook types gebruiken om het overschrijven van handmatige parsing code over te slaan, door de manier waarop GraphQL dit implementeert. Je kan verder nieuwe velden en types toevoegen aan je API, zonder impact op je werk tot nu toe.

De tool is dus flexibel en op veel vlakken eenvoudig te schalen. Doordat GraphQL een uniforme API maakt voor je project, kan je een engine gebruiken die past bij de programmeertaal van je project. Dit is ideaal voor allerlei toepassingen, en dus niet alleen een specifieke oplossing voor één bekend probleem.

Je ziet GraphQL dan ook in gebruik op websites zoals GitHub, Spotify, Facebook en nog veel meer grote namen. Dat zou je al een indruk moeten geven van hoe GraphQL gebruikt kan worden op websites met veel queries. Je zal deze oplossing dan ook geheid vaker dan eens moeten gebruiken in de komende 12 maanden.

Pakketmanagers

Programmeertalen, frameworks en aanverwante tools hebben een hoop bewegende onderdelen. Deze dependencies moeten allemaal worden gedownload en op de juiste manier geïnstalleerd worden, voordat alles lekker werkt. En dat is precies waarbij pakketmanagers je helpen. Ze zorgen voor de juiste downloads en installeren de benodigde dependencies vanaf de opdrachtregel. We bekijken enkele van de bekendste tools.

38. Node Package Manager (npm)

Ja, ook het downloaden van installers moet gebeuren. Maar een pakketmanager vanaf de opdrachtregel gebruiken is meestal erg simpel. Hierdoor heb je een gestroomlijnde manier om bestanden online te vinden en te installeren.

De Node Package Manager (npm) is een tool voor webdevelopment, specifiek voor JavaScript en eigendom van Microsoft, waarmee je taalspecifieke pakketten kan installeren wanneer nodig:

Als je bijvoorbeeld zoekt op React packages vind je meer dan 155.000 resultaten:

Net als bij een online IDE is npm een tool voor webdevelopment waar je niet per se veel over hoort, maar wel overal te vinden is. Eigenlijk elke webdeveloper zal op een gegeven moment deze tool gebruiken.

Het is dan ook een bijzonder goede tool, en zeker nu het onder GitHub valt zullen nog meer developer npm in de nabije toekomst gaan gebruiken.

39. Yarn

Net als npm en pip voor Python, helpt Yarn je bij het installeren van pakketten voor je project en aanverwante tools. Het verschil is dat Yarn ook een tool voor projectmanagement is.

Het installeren is eenvoudig, en je kan Yarn met erg weinig moeite initialiseren voor een nieuw project. Inmiddels is het een robuuste open source oplossing voor het installeren van pakketten en tegelijkertijd beheren van je project.

Je kan workspaces gebruiken om “monorepos” te maken en meerdere versies van je project, die tegelijkertijd live zijn in dezelfde repo en die je daardoor kan cross-referencen. Verder heb je de mogelijkheid om plugins te installeren voor alles wat Yarn nog niet kan (waarvoor je ook nieuwe fetchers en resolvers zal moeten toevoegen). Om het preciezer te zeggen, je kan plugins installeren, maar er zijn er nog niet heel veel, in ieder geval niet in de officiële lijsten. In plaats daarvan zal je meestal zelf een functie moeten programmeren. Desalniettemin kan je daar dus wel voor kiezen als je Yarn wil aanpassen aan je project.

Yarn maakt daarmee een uitstekende kans om je belangrijkste pakketmanager te worden. Voor een project in de praktijk zul je waarschijnlijk npm meer gebruiken, maar Yarn zal toch in je workflow kruipen op manieren die alleen jou voordeel bieden.

API en testing tools

Zeker weten dat alles werkt zoals het zou moeten is iets wat nogal eens overgeslagen wordt, waarna vervolgens de spijtbetuigingen komen wanneer dingen misgaan. Daarom moet de testfase van je project net zo robuust, volledig en betrouwbaar zijn als de andere fasen.

Daar heb je goede API en testing tools voor nodig die je bij die fase zullen helpen:

40. HoppScotch

HoppScotch draait op Netlify en is een open source API developmenttool. De developers noemen het zelf een ecosysteem, en er zit een hoop functionaliteit onder de motorkap.

Het is een recht-door-zee, robuuste oplossing, en je moet wel tegen een stootje kunnen. De leercurve is namelijk nogal steil, zeker als je nooit een soortgelijke tool hebt gebruikt. Je krijgt nagenoeg geen aanwijzingen over het gebruik van HoppScotch op de pagina’s van de app, maar dit is meestal niet zo’n probleem, aangezien het vooral ontwikkeld is voor ervaren developers.

De tool biedt allerlei realtime koppelingen (WebSocket, SSE en meer) en een implementatie met GraphQL. Wij vinden ook de tool voor het maken van documentatie erg handig:

Het scherm met de HoppScotch documentatie creator.

Het werkt met je HoppScotch “collections” om documentatie op te bouwen tijdens het gebruik, wat een hoop tijd kan schelen.

Over het algemeen is HoppScotch een erg handige tool die je veel zal gebruiken. Het is zo’n oplossing die je altijd gebruikt zonder dat je het direct door hebt, wat ongeveer het grootst mogelijke compliment is.

41. Postman

Het Postman logo

Waarschuwing: op de volgende regel zal het verschrikkelijke “s”-woord staan: Samenwerking. Postman is een tool voor webdevelopment die je helpt om een Application Programming Interface (API) te maken als team, via het Postman platform:

Er zijn allerlei use cases voor het integreren van Postman in je workflow. Zo kan je het bijvoorbeeld gebruiken als standaardmanier voor het ontwikkelen van toepassingen, waarmee het direct omgezet wordt naar webbased projecten. Je kan endpoints simuleren via nep-servers, wat vooral erg handig is voor WordPress developers.

Je kan ook onboarding aanmaken om gebruikers van je API te leren hoe ze je product kunnen gebruiken. Projecten met een hoop doorstroom of veel gebruikers zullen hier natuurlijk veel voordeel van hebben.

Wat betreft de kosten biedt Postman een gratis niveau, maar je krijgt meestal het meeste voordeel als je voor een premium niveau kiest. Je betaalt dan zo’n $12 tot $30, afhankelijk van hoe vaak je betaalt en hoeveel gebruikers je hebt.

42. Testing Library

Code die netjes uitgevoerd wordt is mooi, maar je einddoel is altijd een werkende app. Testing Library doet precies wat de naam zegt: het biedt je allerlei gereedschappen om je projecten goed te testen en helpt je bij het naleven van goede programmeergewoonten.

Het idee is dat je tests maakt die het gebruik van je app simuleren. Als die zonder problemen uitgevoerd kunnen worden, zal je app ook soepel draaien. Het is een agnostische tool qua frameworks, en het is niet puur een test runner. De belangrijkste functie van Testing Library is het helpen schrijven van tests die je kan bijhouden, los van de implementatie details.

Alles in de Testing Library tool richt zich op de basisprincipes. Daarom ben je niet alleen tests aan het maken, je leert ook hoe je ze beter en nuttiger kan maken.

Daardoor kan de Testing Library een belangrijk onderdeel van je workflow worden. We zouden durven beweren dat alle projecten voordeel kunnen hebben van Testing Library, en React gebruikers zullen sowieso deze tool als nieuwe standaard gaan implementeren.

Tools voor samenwerken

Ondanks het stereotype dat developers antisociale holbewoners zijn, is het in de praktijk zo dat technologie en samenwerking altijd samengaan.

Daarom kijken we naar enkele van de beste tools voor samenwerking, die je perfect kan integreren met je volgende project.

43. Jira

Atlassian is een geliefd bedrijf (in ieder geval bij ons) als het gaat om software. We zijn zelf ook fans van de meeste producten van het bedrijf: Confluence, Trello, Sourcetree, Bitbucket, en de tool waar we het nu over hebben, Jira.

Het is een developmenttool voor team die Agile frameworks gebruiken, met name het populaire Scrum. Daarom krijg je allerlei features als onderdeel van deze tool. Zo kan je bijvoorbeeld kanban boards gebruiken om je taken en sprints te organiseren. Je kan ook je gewenste schattingstechniek implementeren, specifiek voor jouw methodologie en project.

Jira richt zich op een workflow die je steeds kan herhalen: plannen, volgen, releases, rapporteren. Dit is belangrijk in meerdere Agile frameworks, alhoewel je natuurlijk ook je eigen workflow kan maken op basis van je project planning. Wanneer je moet bijsturen tussen sprints, kan je je project eenvoudig veranderen en op- of afschalen.

Het mooie van Jira is dat er een gratis niveau is waarmee je kan beginnen, en ook heel redelijke prijzen in de andere niveaus. Desalniettemin zul je wel merken dat Jira pas echt effectief wordt bij een team van tien mensen of meer. Voor kleinere groepen kan het een beetje teveel van het goede zijn.

44. Taskade

Als het gaat om tools voor samenwerking, zie je Taskade bijna nooit langskomen. Dat is eeuwig zonde, aangezien het een geweldige tool is om je team te focussen en op het einddoel gericht te houden.

Gebruik je al andere samenwerkingstools zoals Asana of Basecamp (later meer over beide), dan zul je hier meteen aan de slag kunnen. De informatie die je vooral nodig hebt, zoals je to-do’s en reminders, worden allemaal gecentraliseerd. Daardoor kan je die op allerlei manieren laten weergeven, al naar gelang je project.

De verschillende presentaties in Taskade.

De “Mindmap” en “Org Chart” views zijn ideaal, en geven je compleet andere perspectieven op de informatie die je in de tool gezet hebt.

De app is bedrieglijk eenvoudig. Het is vooral een flexibele manier om taken weer te geven en te beheren, en verder niet zoveel.

Aan de slag gaan met je team kost een paar klikken op de knop. Zo heeft elk scherm een uitklapbaar venster voor chats:

Voor sommige mensen zal Taskade overkomen als erg eenvoudig, zeker in vergelijking met andere oplossing. Maar dat is zeker niet het geval. Taskade is juist een geweldige manier om samen te werken met je hele team, en dankzij de eenvoud kan je het meteen implementeren bij elk willekeurig project.

45. Asana

Asana is één van de bekendste merken binnen de samenwerkingstools. Het is een monster als het gaat om het binnenslepen van een project en er meteen met het hele team tegenaan gaan. Asana is ook eenvoudig aan te passen aan verschillende workflows. Zo kan je bijvoorbeeld kiezen tussen lijsten en agenda’s, maar ook naar tijdlijnen gaan.

Er zijn een aantal superhandige features en functionaliteit voor teams. De rapportages zijn erg volledig, en bij hogere pakketten krijg je toegang tot een dashboard waarop je allerlei analytics over de prestaties van je team kan zien. Er is zelfs een manier om de belasting per teamlid te monitoren. Daardoor helpt Asana je om de crunch tot een minimum te beperken en zo te voorkomen dat je teamleden uitvallen met een burn-out.

Daarnaast is het gratis niveau niet een half-gesloopte demo van de volledige app. Je kan Asana tegelijkertijd met je team opschalen, en er zijn altijd goede functies die je zullen helpen. Zo kan je bijvoorbeeld werk toewijzen aan teamleden en alle workflows beheren. Je kan ook algemene berichten per workspace sturen.

Het is dan wel een oude bekende binnen projectmanagement, maar Asana levert dan ook naar verwachting bij elk project. Je zal merken dat veel van je klanten en teamleden al een Asana account hebben, waardoor je nog makkelijker en vaker in de app kan samenwerken dan je zou verwachten.

46. Basecamp

Basecamp is ook een grote naam binnen projectmanagement voor teams. Het is één van de gouwe ouwe, en bestaat al bijna net zo lang als WordPress zelf. De onderliggende software bestaat nog langer, dus het heeft al een lange en betrouwbare reputatie.

Op papier is er weinig spannends te vertellen over Basecamp. Het is dan ook zo dat veel andere apps voor samenwerking inmiddels Basecamp hebben ingehaald. Maar dat is nog niet het hele verhaal.

Ja, je kan taken en to-do lijsten maken voor je projecten, zoals in elke vergelijkbare app, en ze toewijzen aan teamleden. Maar waar Basecamp echt in uitblinkt, zijn de infrastructuur en het ontwerp.

Er is een eenvoudig aanpak voor het gebruiken van Basecamp: maak een project, ontwikkel je to-do lijst of planning, en wijs de taken toe aan je teamleden. Elk project heeft een aantal eigen aspecten waardoor je het project naar de eindstreep kan krijgen.

De elementen die samen een Basecamp project vormen.

Zoals gezegd is er niets dat baanbrekend is, maar dat is ook niet het doel. Basecamp is bedoeld om een betrouwbaar systeem voor projectmanagement te zijn, zonder nodeloze toeters en bellen. Daardoor zul je het blijven gebruiken, aangezien het betrouwbaar en uitbreidbaar is wanneer je dat wil.

47. Livecycle

Livecycle is een krachtige tool die speciaal is ontworpen voor samenwerking tussen dev teams. Livecycle maakt gebruik van de kracht van “preview-omgevingen”, een techniek die steeds vaker door teams wordt gebruikt om tijdelijke, deelbare previews te maken van nieuwe wijzigingen of features in een pull request van een developer.

Met de preview-omgevingen kunnen developers een snapshot van de nieuwste versie delen zonder dat ze de wijzigingen hoeven samen te voegen naar een testomgeving of productie.

Livecycle voegt een Figma-achtige samenwerkingslaag toe aan deze preview-omgevingen, zodat iedereen in het team in context visuele feedback kan achterlaten.

Door de review feedback op deze manier te beheren, maakt Livecycle het review proces korter, krijgen developers feedback van hogere kwaliteit, en kunnen teams sneller code naar productie sturen. Een aanrader voor elk devteams dat zijn beoordelingsworkflows en de algemene ervaring van developers wil verbeteren.

Taskrunners

Werken aan kleine taken binnen een webontwikkelingsproject vormt een probleem. Ze zijn nou eenmaal noodzakelijk om efficiënt en productief te zijn. Je moet dus tijd en energie spenderen aan deze micro-taken.

Om je daarbij te helpen heb je een taskrunner nodig, die geautomatiseerd kleine taken uitvoert. Enkele van onze favorieten:

48. Grunt

Grunt is een JavaScript-specifieke taskrunner die de simpelste en meest repetitieve taken kan uitvoeren die je dagelijks zal moeten doen. Denk bijvoorbeeld aan vrij suffe taken zoals linting, minification, compilatie, en nog allerlei andere.

Grunt regelt dit allemaal voor je via een JSON configuratiebestand (een “Gruntfile”). Hier is een voorbeeld:

module.exports = function(grunt) {
  grunt.initConfig({
    jshint: {
      files: ['Gruntfile.js', "src/**/*.js', "test/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    }
  });
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['jshint']);
};

Wanneer je merkt dat je projecten veel tijd kwijtraken aan routinematige taakjes, dan zal Grunt snel onderdeel van je favoriete tools voor webdevelopment worden, zoals het dat al is voor WordPress, Bootstrap en nog allerlei anderen.

49. Gulp

Het Gulp logo.

Wanneer je taskrunners met elkaar vergelijkt, komt het meestal neer op een tweestrijd tussen Gulp en Grunt. Gulp is een JavaScript-gebaseerde toolkit voor het automatiseren van je workflow en het verhogen van je efficiëntie.

Je gebruikt speciale bestanden en “streams” om je assets en code te bewerken voordat het opgeslagen wordt. Elke taak die je aanmaakt is een “asynchrone” functie, die je kan instellen als publiek of privé. Het verschil is de toestemming van de taken: privé taken kunnen niet uitgevoerd worden door de eindgebruiker, maar zijn ontworpen om samen te werken met andere functies.

Je kan bijvoorbeeld de functies series() en parallel() gebruiken om taken aan te maken. Dit betekent dat je kleine taakjes kan nemen, en er een onderdeeltje van maken in een zelf draaiende machine.

Daarnaast kan je de functionaliteit van Gulp uitbreiden via plugins van de community:

Het is wellicht aan generalisatie, maar Gulp en Grunt zijn goed in verschillende dingen. Gulp is daarbij erg sterk als het gaat om het werken met assets die onderdeel zijn van een grotere set instructies. Daarom moet je voor elk project de optimale taskrunner kiezen.

Containerization tools

Dit gaat misschien een beetje ver, maar we durven wel te beweren dat als je geen enkele vorm van containerization of virtual machines gebruikt, je werk als webdeveloper daarvan te leiden heeft.

Dit geldt natuurlijk niet honderd procent voor iedereen bij elk project, maar er zijn wel heel veel voordelen voor een container-gebaseerde ontwikkelomgeving. Enkele mooie opties daarvoor:

50. Docker

Voor veel mensen is Docker de container-gebaseerde ontwikkelomgeving. Het open source platform biedt meer dan alleen de containers, maar het is wel een veelgenoemde reden voor het gebruik ervan.

Het Docker logo.

Aan de frontend is het een vrij eenvoudig proces: je klikt op een knop en hebt een virtuele sandbox development omgeving. Maar alles dat simpel lijkt is vaak vrij ingewikkeld, en dat geldt ook hier. Docker combineert een User Interface (UI), Command Line Interface (CLI) en API met beveiligingsregels om je snelle deployment te kunnen bieden.

Voor veel developers is Docker essentieel voor het maken van nieuwe apps. Webdevelopers, en zeker WordPress devs, kunnen uit allerlei tools kiezen. Local by Flywheel en DevKinsta zijn toonaangevende platforms.

Docker is de drijvende kracht achter de DevKinsta app.

Opmerking: We hebben recentelijke DevKinsta gelanceerd, een lokale developmenttool waarmee je snel een nieuwe WordPress website kan bouwen. Je kan de sites ook snel naar je Kinsta account deployen, met één klik op de knop.

Docker integreert ook met allerlei tools, en diverse daarvan zullen al in je workflow te vinden zijn. Apps zoals GitHub, VS Code en anderen zijn met Docker te koppelen, en bieden soepele integratie.

Over het algemeen kan Docker een hele reeks aan artikelen gebruiken om alle mogelijke toepassingen te bespreken. Maar dat is waarschijnlijk niet nodig. Er is namelijk een grote kans dat je Docker al dagelijks gebruikt, en dus allang weet hoe geweldig het is!

51. LXD

Simpel gezegd is LXD een container manager voor Linux distro’s. Het draait op images en bevat diverse voorgebouwde images voor Linux. Door LXD te gebruiken weet je zeker dat je hetzelfde besturingssysteem gebruikt als de eindgebruiker.

Het LXD logo.

Het is gestart door de Ubuntu developers Canonical, en biedt natuurlijk zelf ook een open source structuur. Je kan beveiligde omgevingen bouwen met containers zonder privileges, het gebruik van resources beheren, en complete netwerken beheren.

LXD is eenvoudig te schalen, waardoor je duizenden compute nodes kan draaien, of alles heel simpel kan houden. Voor cloud-based toepassingen integreert LXD met OpenNebula, die ook officiële drivers bieden om LXD instances te beheren.

Standaard zijn er veel containerization tools die Ubuntu als de standaard virtuele omgeving gebruiken. Ook LXD is geoptimaliseerd om deze distro te draaien. Heb je dat niet eerder gedaan, dan is het zeker de moeite waard om een test workspace te proberen. Je zal merken dat het bij bepaalde workflows of projecten voor klanten beter past dan de concurrenten.

Tools voor afbeeldingsoptimalisatie

Assets (of media, of wat je het ook wil noemen), zijn overal op het web te vinden. Er zijn complete online culturen ontstaan rondom afbeeldingen. Daarom is het belangrijk dat je webdevelopment projecten ook goed presteren als er veel afbeeldingen mee worden gebruikt.

Enkele van de meest populaire en beste tools voor afbeeldingsoptimalisatie.

52. ShortPixel

Er zijn allerlei apps voor het optimaliseren voor afbeeldingen te vinden, maar ShortPixel heeft het meest robuuste algoritme. Het kan de bestandsgrootte van afbeelding flink verkleinen, zonder effect op de kwaliteit. Als we erg kritisch zijn, zouden we zeggen dat omdat de standaardinstelling staat op het hoogste niveau van compressie, je nergens anders heen kan als je afbeelding dan nog niet genoeg verkleind is. Maar dit is niet een erg significant kritiekpuntje.

ShortPixel biedt namelijk een hoop functionaliteit. Er zijn drie compressieniveaus, een geweldige PDF-optimalisatie en zelfs een compressor voor GIFs. Die laatste zie je niet zoveel bij andere tools, dus het is een welkome toevoeging.

De hele interface is ook erg toegankelijk: je kan afbeeldingen naar de uploader slepen, en wacht tot ShortPixel klaar is met alles wat gedaan moet worden. Nadat je afbeeldingen verwerkt zijn, kan je ze in één keer allemaal downloaden, of per stuk.

Downloaden van afbeeldingen vanuit ShortPixel.

De ShortPixel API tools zijn al net zo robuust. Je zal verschillende API’s vinden voor het reduceren van online en offline afbeeldingen, volledige PHP en .NET client libraries, een JavaScript gebaseerde adaptieve engine en nog veel meer.

We zouden zeggen dat ShortPixel een tool voor developers is, aangezien je makkelijk je website of app eraan kan koppelen. We durven ook wel te beweren dat het je TinyPNG verslaving in één keer geneest, zeker als je het als onderdeel van een grote workflow gebruikt.

53. TinyPNG

Tijd voor iedereens favoriete tool voor afbeeldingsoptimalisatie: TinyPNG. Je kan TinyJPG zien als onderdeel van dit stukje, aangezien beide tools dezelfde taken uitvoeren.

Je zal merken dat TinyPNG weinig veranderd is in de afgelopen jaren. Het is nog altijd een eenvoudige tool met versleepfunctie voor het optimaliseren van je afbeeldingen. Er zitten geen toeters of bellen op, en je zal geen uitgebreide set met bestandsformats vinden. TinyPNG biedt wel perfect gebruiksgemak en allerlei integraties met andere tools.

Zo is er bijvoorbeeld een Photoshop plugin en voor meer specifieke toepassingen een functionele developer API. Zelfs Python gebruikers kunnen meedoen met het feest, aangezien de API ook deze taal ondersteunt. Er zijn allerlei plugins gemaakt die de API voor evenveel externe tools gebruiken.

We zeggen niet dat TinyPNG de markt voor afbeeldingsoptimalisatie volledig in handen heeft, maar het is de eerste keuze voor veel mensen. Je kan eenvoudig een afbeelding nemen en het in de uploader plaatsen, en zo heb je binnen een paar seconden een lichtgewicht versie van je afbeelding die 99,9% van de kwaliteit biedt.

Website testing tools

We hebben het eerder al gehad over het testen van je API en de belangrijkste code van je website, maar dat gaat nog niet over de prestaties van je website. Enkele tools die erg handig zijn om te analyseren hoe goed de prestaties van je websites zijn:

54. Responsively

Als je wel eens overweldigd wordt door het aantal media queries die je moet uitvoeren en corrigeren in je app, dan moet je eens naar Responsively kijken. Het is een open source frontend tool waarmee je websites kan ontwikkelen aan de hand van verschillende viewports voor allerlei apparaten.

Verschillende apparaten gebruiken binnen Responsively.

Het mooie hieraan is dat je layouts eenvoudig naast elkaar kan vergelijken. Daardoor kan je de consistentie tussen apparaten aanzienlijk verbeteren. Elk apparaat klopt perfect, en je kan uit een hoop apparaten kiezen, wat ideaal is als je je wil richten op bepaalde apparaten.

Je kan ook speciale browser extensies toevoegen voor Mozilla Firefox, Microsoft Edge, en Google Chrome om pagina’s naar de Responsively browser te laten sturen. Vanuit daar kan je dan de ingebouwde dev tools erbij pakken en aan de slag gaan.

Er zijn een hoop andere features, zoals een optie voor screenshots, hot-loading en meer die je helpen bij het ontwikkelen van je producten. Het is moeilijk om hun slogan te weerleggen die beweert dat Responsively de “browser voor webdevelopers” is. Goede kans dat het een belangrijk onderdeel van je workflow gaat worden.

55. Google Lighthouse

Voor veel mensen is PageSpeed Insights van Google een belangrijke tool voor het bekijken van de prestaties van je website, en hoe je die nog verder kan verbeteren.

Maar daarnaast heeft de software nog meer functies die ook interessant zijn. Dat zou ook beter bij je gewenste toepassing kunnen passen. Google Lighthouse kan voor elke webpagina gebruikt worden, en biedt audits en rapportages voor de prestaties van pagina’s, SEO, Progressive Web Apps (PWA) en nog veel meer.

De primaire manieren om Google Lighthouse te gebruiken zijn via de opdrachtregel, via DevTools van Chrome, of als een Node module. Wanneer je de PageSpeed Insights interface gebruikt, Lighthouse maakt een aantal van dezelfde scores en biedt extra inzichten.

Het is ook nuttig om te weten dat Google Lighthouse en PageSpeed Insight vooral qua uiterlijk bijna hetzelfde zijn. Maar daaronder gebruikt PageSpeed Insights lab-data in combinatie met gebruikersdata uit de praktijk. Lighthouse analyses daarentegen laten gebruikersdata links liggen en richten zich op veel meer meetbare elementen van je website.

In onze optiek moet je daarom zowel PageSpeed Insights als Lighthouse samen gebruiken, zeker wanneer je klant bovenaan de Search Engine Result Pages (SERP’s) wil staan. In ieder geval is het een goede en betrouwbare tool, en kan het zelfs PageSpeed Insights vervangen als standaardtool om prestaties te meten.

56. Cypress

End-to-end testing is geen favoriete bezigheid voor veel developers. Cypress offert zichzelf op voor deze ondankbare taak, en is een eenvoudige oplossing voor end-to-end testing en produceert daarmee geweldige resultaten.

Alhoewel de meeste tools voor end-to-end testing gebaseerd zijn op Selenium, heeft Cypress een andere richting gekozen. Daarom zul je veel van de problemen die je tegenkomt bij testers op basis van Selenium hier niet zien. Het gaat zelfs zo ver dat we kunnen zeggen dat het opzetten, schrijven en uitvoeren van tests vrij makkelijk wordt.

Om dit te realiseren hebben ze de architectuur helemaal vanaf de grond opgebouwd en zich puur op end-to-end testing gefocust, en alle andere functies links laten liggen. Om de prestaties te optimaliseren wordt Cypress uitgevoerd in dezelfde run loop als je eigen programma, in plaats van het uitvoeren van online opdrachten via je netwerk.

Doordat de testcode in de browser uitgevoerd wordt, zijn er ook geen problemen met taal of drivers. Ook kan je naar JavaScript compileren voordat je een test uitvoert.

Wanneer je een Quality Assurance (QA) engineer of developer bent die wil dat end-to-end testing direct toegang tot je werk heeft, dan is Cypress zeker je aandacht waard. Het mooiste is nog wel dat het gratis niveau gewoon alles functionaliteit biedt.

57. Stack Overflow en zoekmachines

Laten we eventjes de grenzen van wat we zien als webdevelopment tool iets oprekken. Stack Overflow is goed bekend voor iedereen die ook maar even heeft gesnuffeld aan webdevelopment:

Het is een website met vragen en antwoorden die zich focust op programmeren, en is onderdeel van het Stack Exchange netwerk dat over allerlei onderwerpen gaat:

Eén van de vele subsites in het Stack Exchange netwerk.

Het staat bekend als go-to resource voor duizenden developers, en ondanks enige controverse over de community is het verkeer nog altijd onverminderd hoog. Wij zouden zeggen dat Stack, samen met je favoriete zoekmachine, een flexibele webdevelopment tool zijn voor het verbeteren van je huidige vaardigheden en het leren van nieuwe.

Zo ga je vast naar Stack Overflow wanneer je een probleem tegenkomt binnen je development project. En wanneer je een foutmelding krijgt waarvan je niet weet hoe je het op moet lossen, zal je die plakken in een zoekmachine, omdat je dan binnen een paar klikken waarschijnlijk het antwoord wel hebt.

Aangezien 90% van de ondervraagde gebruikers aangeeft dat ze naar Stack Overflow gaan om problemen op te lossen, zal iedereen de tool wel eens gebruiken. Maar voor beginners, zeker wanneer je het probleem nog niet goed begrijpt en uit kan leggen, zullen zoekmachines meestal iets laagdrempeliger zijn.

Webdevelopment referenties

Wanneer je een developer bent die zich aan het principe van “RTFM” houdt, hoef je voor de volgende tools niet meer overtuigd te worden. Maar als je graag een probleem binnen walst en experimenteert tot je eruit komt, weet dan wel dat er waarschijnlijk heel veel developers zijn die het wiel al voor je uitgevonden hebben.

Daarom kan je eens kijken bij de volgende paar tools voor webdevelopment, die zich allemaal focussen op referentiematerialen.

58. MDN Web Docs

Vroeger, toen het net nog woest en ledig was, zweefde er een website onder de naam Webmonkey rond, die onderhouden werd door Lycos en zich richtte op het leren van webdevelopment en programmeren aan nieuwe gebruikers. De geest van die website leeft nog altijd in de MDN Web Docs van Mozilla. Webmonkey sloot de virtuele poorten in 2004 en MDN Web Docs begon in 2005, dus er was een natuurlijk overgang tussen de twee.

Het is een verzameling resources om programmeren voor het web mee te leren, naast Mozilla-specifieke producten. De content is onderverdeeld in twee hoofdsoorten: technologieën en referentiegidsen. Je krijgt diverse tutorials te zien op basis van je huidige kennis en ervaring, een speciale referentiegids, en nog enkele andere resources.

De gidsen gaan allemaal over specifieke niches en sectoren binnen de development sector. Zo geldt de Web Development reference bijvoorbeeld als “cornerstone” pagina voor andere HTML, CSS en JavaScript gidsen.

Er zijn ook algemene introducties over verschillende andere sectoren, zoals game development en wat je nodig hebt om daarin een carrière te beginnen:

MDN Web Doc’s gids over game development.

MDN Web Docs is verplichte leeskost voor elke beginnende webdeveloper, en biedt ook een hoop waarde voor experts. Als er dus een website is die niet mag ontbreken in je favorieten, is dat deze!

59. DevDocs — API Documentation Browser

In the past, you’d save all the manuals for the products you buy in a dusty drawer or cupboard. As life has become more digital, those paper manuals have given way to PDF downloads from each manufacturer’s website.

Through this, we now have websites that collect the digital versions of manuals in curated libraries. It lets you find what you need from one repository. As such, it stands to reason that one would exist for web development topics too.

In short, DevDocs is a library of documentation for APIs, and it’s something we think will be valuable for almost all developers:

Voordat je de bibliotheek bekijkt, is het handig om eerst de gewenste API documentatie in te schakelen. Dit kan je doen via het venster Preferences:

Daarna kan je alle relevante documentatie vinden via een boom-menu:

Het is een eenvoudige oplossing voor een inefficiënt probleem, waarvoor je anders meerdere API referenties nodig zou hebben. DevDocs is dus ook een website voor bij je favorieten, en het enige nadeel is dat ze nog geen desktop app hebben voor nog sneller gebruik.

60. CSS-Tricks

Chris Coyier is een bekende naam voor veel webdevelopers. Je bent zijn website, CSS-Tricks, vast al wel eens tegengekomen. Zoals de naam al aangeeft richt de website zich vooral op frontend coding, met name CSS, en hoe je daar beter in wordt.

Zoals ook te vinden is op de About pagina was CSS de eerste jaar het voornaamste onderwerp. Maar sindsdien worden ook HTML, JavaScript, WordPress en andere onderwerpen behandeld. Het resultaat is een website met alles over frontend development, en stapels artikelen, video’s en gidsen om je verder te helpen.

Een eenvoudig maar erg handig onderdeel is de CSS Almanac, die de selectors en eigenschappen in CSS behandelt. Dit is een goede referentie wanneer je snel bepaalde aspecten van de taal onder de knie wil krijgen.

Alhoewel CSS-Tricks in bepaalde aspecten vooral op een referentie-site lijkt, is het dat niet per se. Maar het zal alsnog snel een favoriete plek worden, via een RSS feed of een andere oplossing. De content is van hoge kwaliteit en kan je uitdagen op manieren die je nog niet eerder had bedacht. Schrijf je op z’n minst in voor de nieuwsbrief om de beste tips van CSS-Tricks in je inbox te krijgen.

61. DEV Community

Stel dat je alle goede dingen van social media, webdevelopment en Stack Overflow kon nemen en daar één geweldige site van kon maken. De DEV Community zou dan waarschijnlijk het resultaat zijn.

Het is een blogplatform, maar ook een manier om antwoorden te vinden op allerlei vragen rond development. Je kies tags en mensen die je wil volgen, en je newsfeed wordt meteen een geautomatiseerde, speciaal samengestelde timeline met artikelen en inzichten:

De DEV Community timeline voor de JavaScript tag.

Je kan natuurlijk zeggen dat je deze informatie overal kan vinden, maar dan moet je er wel naar zoeken. Het mooie aan de DEV Community is dat het allemaal bij elkaar zit, in een nuttige verzameling van onderwerpen over development. Je kan het eerder zien als een soort conferentie van developers, ten opzichte van een willekeurig gesprek dat je in de bus hebt.

Ook dit is een website die goed past binnen je RSS feed of als nieuwsbrief in je inbox. Daarom zouden we het ook een “sleeper” resource noemen, die je snel veel gebruikt zonder dat je het door hebt.

62. Can I use…

Sommigen beweren dat Jeeves de trend begon om het internet vragen te stellen om bepaalde informatie te vinden. Dit werd vervangen door snelle zoekalgoritmen, maar de vraaggestuurde zoekopdracht is nog altijd een goede manier om te vinden wat je zoekt.

Can I use… is het antwoord voor de frontend developer op de vraag “Bestaat er een Ask Jeeves voor CSS?”

Het idee is simpel: je typt een CSS selector of eigenschap in het zoekveld, en de database geeft aan of je het kan gebruiken voor het maken van websites. Je bent niet beperkt tot alleen CSS. JavaScript en HTML worden ook ondersteund.

Zoeken op een HTML element in Can I use... — Zoeken op een HTML element in Can I use…

Het is een database voor frontend talen, dus je krijgt geen resultaten voor PHP, Python of andere server-side talen. Toch is Can I use… een superhandige tool die je flink zal helpen qua toegankelijkheid en ontwerp voor verschillende apparaten.

Het is een kleine moeite om een bepaald element op te halen en te zien of je doelbrowser dit ook ondersteunt.

De tabel met ondersteuning van browsers in Can I use... — De tabel met ondersteuning van browsers in Can I use…

Wanneer je een beetje beter kijkt, kan je ook allerlei statistieken vinden over bijvoorbeeld de release datum en het huidige gebruik:

Informatie over een bepaald element in Can I use... — Informatie over een bepaald element in Can I use…

Over het algemeen zal Can I use… niet heel breed gebruikt worden. Maar op bepaalde momenten binnen je project zal je het juist nonstop nodig hebben. Zodra je hebt bedacht welke browsers je wil gaan ondersteunen, zal Can I use… weer in je favorieten komen te staan. Het is een handige dienst die je om een boodschap kan sturen bij het perfectioneren van je frontend code.

Samenvatting

Je hebt altijd te weinig tijd en budget, en het is heel menselijk om dezelfde tools voor webdevelopment te gebruiken als je altijd al hebt gedaan. Maar het investeren van tijd aan het begin van je project door te kijken naar wat je echt nodig hebt, zal je uiteindelijk veel opleveren in tijd, geld en productiviteit.

In dit artikel hebben we 62 geweldige tools voor webdevelopment besproken die je kan gebruiken om, al dan niet samen met je team, flink productiever te worden. Het kan goed zijn dat je veel ervan al gebruikt. Als de verschillende onderzoeken een beetje kloppen, gebruiken steeds meer developers GitHub, TypeScript, allerlei webservice stacks en één van de vele JavaScript frameworks om hun projecten tot een goed einde te brengen.

Het maakt niet uit welke webdevelopmenttools je kiest om te gebruiken, Kinsta klanten hebben toegang tot nog meer features via het MyKinsta platform. Denk hierbij aan een snelle en gemakkelijke boost voor je algemene optimalisatie door de codeminificatiefeature die rechtstreeks in het MyKinsta dashboard is ingebouwd, waardoor klanten met een simpele klik automatische CSS en JavaScript minificatie kunnen inschakelen.

Heb jij nog een tool voor webdevelopment waarvan je denkt dat developers het in de nabije toekomst eens moeten proberen? Laat het ons weten in de reacties hieronder!

Salman Ravoof

Salman Ravoof is een autodidactische webdeveloper, schrijver, creator en een groot bewonderaar van Free and Open Source Software (FOSS). Naast techniek is hij enthousiast over wetenschap, filosofie, fotografie, kunst, katten en eten. Lees meer over hem op zijn website en kom in contact met Salman op X.