In deze blog deel ik mijn favoriete tools als front-enddeveloper, waaronder browsers, projectmanagement- en ontwikkelsoftware. Dit zijn de tools die mijn workflow ondersteunen en die ik dagelijks gebruik.
Als front-enddeveloper met een paar jaar ervaring, vind ik het altijd interessant om te weten hoe andere developers hun werk doen, welke tools gebruiken zij en hoe worden die gebruikt. Daarom zet ik in deze blog de tools die ik gebruik om anderen te inspireren.
Hoe ik mijn computer gebruik
Ik doe eigenlijk alles op mijn eigen laptop die op Windows 11 draait, mijn werk dus ook. Dat laatste klinkt misschien wat apart, maar eigenlijk vind ik het wel fijn op dit moment op gewoon op mijn eigen laptop te werken. Ik kan alles makkelijk terugvinden en kan gewoon overal bij.
Windows 11 is prettig voor mij onderandere vanwege de toegankelijkheidsinstellingen, zoals Plaktoetsen, die ik gebruik omdat ik blind typ met één hand. Hierdoor hoef ik toetsen niet tegelijk in te drukken. Ik pas ook regelmatig de toetsenbordinstellingen aan met MyAsus of Logi Options+ om functietoetsen snel te wisselen. Jammer genoeg werkt de Fn-toets niet samen met Plaktoetsen.
Ik werk als developer voornamelijk met WordPress. Ik bouw de websites voor onze klanten en onderhoud en help onze klanten als zij vragen of problemen hebben bij het gebruik van onze WordPress websites.
Mijn tools op een rij
1. browsers: Chrome, Firefox en Microsoft Edge
De belangrijkste tool die ik gebruik bij mijn werk is Chrome. Ik weet dat niet iedereen een grote fan is van Chrome, maar ik vind het wel het beste werken met Google workspace diensten die wij op het werk gebruiken en bovendien vind ik de developer tools prettig in gebruik. Naast Chrome Gebruik ik ook Firefox en Microsoft Edge om te testen hoe een website in een andere browser werkt en hoe een website werkt als ik ben ingelogd met een andere userrole.
Belangrijke extensies die ik gebruik zijn WAVE om te testen op toegankelijkheid, Wappalyzer om te kijken welke technologieen een website gebruikt. ColorZilla om hexcodes op websites te achterhalen en Hoog contrast om te kijken hoe websites eruit zien in hoog contrast.En natuurlijk een passwordmanager.
2. ClickUp
Als tool voor projectmanagement gebruiken we ClickUp. Ik vond het in het begin behoorlijk overweldigend, maar het is erg handig omdat je er allerlei project gerelateerde informatie in kwijt kunt, zoals wat er moet gebeuren en wie dat moet doen, hoelang we eraan hebben gewerkt en nog veel meer!
3. Figma
De designs voor de websites worden door onze designer gemaakt in Figma. Vervolgens kijk ik in Figma hoe de website eruit moet komen te zien.
4. Slack
Ik werk zelf voornamelijk vanuit huis en om om te communiceren met collega’s gebruiken we voornamelijk Slack. Niet alleen voor werk gebruik ik Slack, maar ook ben ik regelmatig te vinden in de Fronteers Slack en in de Slack workspace van WordPress Nederland.
5. Visual Studio Code
De tekst editor die ik gebruik is Visual Studio Code(VSCode). Omdat ik hoofdzakelijk werk met WordPress, is VSCode niet mijn meest gebruikte tool, helaas. Want het is wel het fijnste om te gebruiken, wanneer ik code moet schrijven. De code staat heel overzichtelijk. Veel prettiger dan bijvoorbeeld code schrijven in een klein invoerveldje in WordPress.
Ook gebruik ik VSCode om childthemes te maken of om code te schrijven die ik later bijvoorbeeld invoeg in de functions.php. Het thema dat ik gebruik heet Pink Cat Boo, die ik op een paar punten heb aangepast in settings.json. Het mooie van VSCode is dat je het kunt aanpassen naar wens door extensies. Dit zijn een aantal die ik gebruik: Auto close tag, Auto rename tag, Code runner (hiervoor heb je NodeJS nodig), ESLint, HTML CSS support, Live Preview, PHP Intelephense en Prettier.
6. Local
Met Local kun je WordPress lokaal op je computer draaien om bijvoorbeeld een WordPress website te bouwen of te testen, zonder dat je een hosting of een domeinnaam nodig hebt. Momenteel gebruik ik Local om te leren hoe je een WordPress thema bouwt en ook heb ik het gebruikt om te leren hoe je een custom block kunt bouwen met React en hoe dit in WordPress werkt.
7. Node.js
Node.js is een JavaScript Runtime omgeving waarbij je JavaScript kunt laten uitvoeren buiten de browser om. Dit is nodig wanneer ik JavaScript wil uitvoeren met CodeRunner in VSCode, Javascript wil toepassen in lokaal gehoste WordPress website of een een React applicatie bouw, hiervoor gebruik ik Node Package Manager(NPM).
8. Git for Windows
Git is een handig versiebeheersysteem. Je kunt je code er in beheren en teruggaan naar vorige versies van de code, ook maakt het makkelijk om samen te werken met andere developers. Ik gebruik Git voornamelijk om mijn code te beheren op GitHub en ik gebruik daarvoor GitHub Desktop.
Regelmatig gebruik ik ook Git Bash om Git te gebruiken in de command line(CLI). Eerder gebruikte ik het losse programma, dat met Git for Windows wordt geinstalleerd, maar de laatste tijd gebruik ik Bash in de terminal in Visual Studio Code.
9. PowerShell
Standaard opent VSCode PowerShell als je een nieuwe terminal opent. Dit gebruik ik voornamelijk wanneer ik met WordPress bezig ben in VSCode. Op dit moment volg ik een cursus waarin ik leer hoe ik een maatwerk WordPress-website bouw met behulp van PHP, JavaScript en de WP REST API. Tijdens de cursus ontwikkel ik interactieve functionaliteiten, zoals custom post types, contentrelaties en real-time updates.
10. FileZilla
FileZilla gebruik ik om bestanden van websites te uploaden of te downloaden via FTP. Op deze manier heb ik verschillende websites verhuisd, wanneer ik geen migratieplugin gebruikte.
11. Bitwarden/ LastPass
Natuurlijk mag een passwordmanager niet ontbreken in dit lijstje. Ik gebruik Bitwarden op mijn laptop en telefoon voor mijn persoonlijke login gegevens. Op mijn werk gebruiken we LastPass.
Naast deze tools gebruik ik overigens nog Windows Verteller en NVDA om websites te testen met een schermlezer.
Tot slot
Dit zijn alle tools die ik gebruik als front-enddeveloper. Hopelijk geeft dit een kijkje in mijn workflow en inspireert het je om misschien zelf een van deze tools uit te proberen.