Front-end developer
Een front-end developer is verantwoordelijk voor het technische deel
aan de 'voorkant' van een website of webapplicatie en maakt deze
interactief en toegankelijk. Interactie vindt hierbij steeds vaker plaats op de client waarbij vaker asynchrone requests naar een server en vice versa worden uitgevoerd. Dit draagt in belangrijke mate bij tot snellere websites en een betere gebruikerservaring.
Hierbij wordt in de basis gebruik gemaakt van HTML5 als opmaaktaal, CSS(presentatielaag) en JavaScript(scripttaal) zonder externe libraries: dit houdt in dat HTML5, CSS en JS functionaliteit al standaard aanwezig is binnen de engine van browsers(Chrome, Firefox, Edge, Safari, etc...) Daarnaast is het aan de developer zelf waarmee kennis wordt uitgebreid.
Dit overzicht geeft weer waar ik ervaring mee heb.
Stukje historie over front-end ontwikkeling en mijn ervaring daar parallel aan
HTML stamt uit 1995. Begonnen als html ontwikkelaar in 1998, heb ik in de periode van 1999 tot 2005 dynamische websites gebouwd in een met name LAMP stack omgeving, waardoor ik mij ook meer ging verdiepen in PHP/MySQL en ASP, maar ook in clientside technologie zoals Flash en ActionScript. Verder werden de mogelijkheden om websites te bouwen met gebruik van CSS uitgebreid, doordat browsers CSS meer en meer gingen ondersteunen vanaf 2002. In die tijd werd JavaScript in veel mindere mate ingezet dan vandaag en werd DHTML (Dynamic HTML) veelal gebruikt als een verzameling van technologiëen, meestal inline, totdat DOM scripting zijn intrede deed in 2005, waardoor structuur ontstond in de clientside code. Mede hierdoor kreeg de term 'front-end development' steeds meer gestalte en werd het een aparte discipline rond 2007. Deze pagina bevat een verzameling verwijzingen van betekenis over front-end (web) development .
Mijn werkwijze
- Gaat uit van het principe dat alles een website is, van eenvoudig tot een complex, en zet de front-end neer, zodat de gebruiker krijgt wat deze wil en nodig heeft.
- Heeft veel ervaring opgebouwd met ontwikkelen van websites die zich aanpassen aan mobiele telefoons, tablets en desktop computers (beter bekend als 'responsive design' en dus responsive moeten werken). Onderdeel daarvan is informatie toegankelijk maken voor iedereen (accessibility).
- Blijft up-to-date in front-end ontwikkeling, maar weet ook dat hierin geregeld keuzes moeten worden gemaakt.
- Heeft ruime ervaring en direct inzetbare kennis op het gebied van HTML5(HTML), CSS en JavaScript: ruime ervaring met JavaScript/TypeScript omgevingen, kennis van JavaScript libraries/frameworks zoals: Vue.js(op JavaScript of TypeScript gebaseerd middels composition api of options api) / Pinia / Vuex / Vue Router / Vite).
- Wanneer JavaScript moet worden ingezet en wanneer CSS is van belang om een website goed te laten presteren en in mijn rol als front-end developer let ik hier goed op. Deze taak wordt veel te vaak bewust of onbewust genegeerd. Browsers bieden steeds betere technieken gericht op interactie - en layout gebied zoals CSS Flexbox en CSS Grid Layout en ik zet deze in.
- Werkt oplossingsgericht en met een pragmatische blik.
- Kijkt naar een nieuwe werkomgeving waarbij ook een persoonlijke match van belang is.
- Werkt zowel binnen een team als zelfstandig. Samenwerking is meestal ook nodig op het snijvlak van back-end, UI/UX, front-end en business analyse. Ik ben ook inzetbaar als 'fullstack developer' op een omgeving met nodeJS backend.
- Zet unit testing in (vitest / jasmine / jest / vue-test-utils ).
- Is goed bekend met het zelf configureren van omgevingen zoals een webserver, package-management (npm), test en build tools (vite, webpack, jest, vitest, jasmine), monitoring(sonarqube) en preprocessors zoals sass en code linting.
- Heeft 10+ jaar ervaring met de Agile/scrum werkwijze.
- Heeft in het verleden ook ervaring opgedaan met het ontwikkelen van database driven websites middels serverside scripting in PHP en MySQL in LAMP omgeving(Linux/Apache/MySQL/PHP).
Waarom mijn keuze voor front-end development?
Deze is ooit ontstaan in 1998 door een pagina met de tekst 'Hello world' te publiceren. Uiteindelijk heeft deze pagina nog steeds dezelfde output en is de fascinatie blijven bestaan, doordat ik constant fases doorloop met diverse bestaande en nieuwe technologieen op gebied van webdevelopment, maar ook door in diverse sectoren werkzaam te zijn.
Sinds 1999 werk ik (vanaf 2005 als zelfstandige/ZZP-er) als front-end developer, met de progressive enhancement methode in de basis en anderzijds JavaScript driven (responsive) websites. Ik kijk verder dan alleen naar front-end code in een client/server omgeving, alias de fullstack (end-to-end). Als front-end developer heb ik gewerkt voor bedrijven en organisaties(1000+) zowel in de publieke als in de commerciële sector.
Projecten / opdrachtgevers
Front-end VueJS developer voor de Rijksoverheid
sept 2020 - heden: Senior Front-end developer in een scrumteam voor het Ministerie van Justitie en Veiligheid, verantwoordelijk voor de opzet en ontwikkeling van data-driven single page apps (SPA), middels actuele front-end technieken:
- Hou mij bezig met complexe vraagstukken vanuit de business en ontwikkeling en realisatie daarvan in verschillende apps die op basis van een generieke structuur dynamische formulieren kunnen genereren en die vervolgens dynamische data(state) real-time kunnen verwerken met gebruik van onderstaande technieken. De front-end is dusdanig opgebouwd dat layout en data volledig gescheiden zijn
- Vue3 (TypeScript) / Vite / Vitest / Pinia / Vue Router / Vue-test-utils / Storybook en inzet van REST APIs.
- Vue2 / TypeScript / Vuex
- oa. CSS/SCSS, HTML5, git, npm, json-server(localhost)
Stack:
- platform ci/cd: Java / nodeJS / Gitlab / Vite / Vitest / Vue 3 / VS Code
- versiebeheer: git
Front-end developer / owner
2005 - heden: Senior Front-end developer, ontwikkelen van data-driven web applicaties op basis van diverse front-end technieken
Front-end developer vanuit een mobile first experience.
Vue project in automotive sector via buro
jan 2020 - heden: Senior Front-end developer (voor een B2C product voor de automotive sector), waarbij op basis van een ui/ux ontwerp, de customer journey is vertaald naar een volledig functionele single page app op basis van single file components, middels diverse actuele front-end technieken, oa. Vue / Vue Router / Vuex en inzet van REST APIs. Vue cli 4, HTML5, JavaScript ES6+, json-server, CSS/SCSS, git, npm, webstorm, Apache, Linux, jest
Front-end developer vanuit een mobile first experience.
- HTML5
- CSS / SCSS
- Vue.JS / Vuex / Vue Router
- Platform frontend: nodeJS, webstorm
- Versiebeheer: git
Waternet via DEPT
okt 2018 - 1 mei 2019: werkzaam als senior front-end developer in een scrum team voor de online domeinen van Waternet. Met name Vue middels het bouwen van (herbruikbare) componenten (single file components) en een single page app. Versiebeheer via git en bitbucket
Senior front-end developer vanuit een mobile first experience.
- HTML5
- CSS / SCSS
- Vue.JS / JavaScript
- Platform : EpiServer, nodeJS, webstorm
- Versiebeheer: git
MoneYou
jan 2017 - sept 2018(20 mnd): werkzaam als senior frontend developer voor het nieuw gecreëerde MoneYou ConsumerCredit(Lenen) team in opdracht MoneYou(onderdeel van ABNAMRO)
- Uitwerken van de nieuwe customer journey voor de volledige digitale aanvraag van financiële producten.
- Upload portal
- HTML partials en CSS
- Opzetten styleguide
- JavaScript inzet op basis van ES6 Modules en deels knockoutJS (upload portal)
- Validatie
- Gebruik van itCSS (CSS architectuur) met SCSS als pre-processor
- Opzetten van een front-end workflow en frontend structuur (mobile first) aan de hand van UX/design in combinatie met SiteCore CMS.
- HTML5
- CSS / SCSS / itCSS
- Platform: SiteCore / .NET, npm, webstorm
- Versiebeheer: git
Essent
jan 2016 - 31 december 2016: werkzaam als frontend developer voor het klantdomein van Essent.nl en EnergieDirect.nl
- HTML
- CSS / LESS
- JavaScript
- Platform frontend: nodeJS, webstorm
- Versiebeheer: git
INFO.nl
November 2015: werkzaam als frontend developer voor de nieuwe website van Greenwheels
Opdracht: een interactieve oplossing bouwen aan de hand van een visual design voor de rekenmodule voor abonnementen op het publieke domein van GreenWheels.com. Deze sliders zijn een combinatie van HTML5, CSS en es5 JavaScript en werkt crossbrowser op desktop, tablets en mobiele devices
- HTML
- CSS / LESS
- JavaScript
- Platform frontend: nodeJS, git, webstorm
Leaseplan Nederland
Startdatum 1 april 2015: werkzaam als frontend developer in een scrumteam in opdracht van Ebrella. Opleveren van frontend functionaliteit. (Frontend) omgeving: angularJS, bootstrap, HTML, CSS, LESS, json, jQuery, grunt, svn, webstorm, nodejs.
Mijn werkzaamheden bestonden oa. uit het toevoegen van functionaliteit aan 'mijn leaseplan' en converteren van bestaande windows applicatie naar een webapplicatie voor het klantdomein, daarbij gebruikmakend van services en angularJS
- HTML
- CSS / LESS
- json
- angularjs / jQuery
- Platform frontend: Java, nodeJS, grunt, svn, webstorm
Kamer van Koophandel
Werkzaam als frontend developer in een scrumteam voor de Kamer van Koophandel in opdracht van TamTam(Dept) Opleveren van frontend functionaliteit in samenwerking met UX. (Frontend) omgeving: google maps api, bootstrap, nodejs, HTML, CSS, SCSS, json, jQuery, grunt, svn, webstorm
Mijn werkzaamheden bestonden oa. uit de opzet van de frontend implementatie van handelsregister data en gemeentelijke data(json) te plotten op google maps aan de hand van een geolocatie of postcode. Daarbij werd gebruik gemaakt van de google maps api.
- HTML
- CSS / SCSS
- json
- JavaScript / jQuery
- Platform frontend: .NET, NodeJS, Git, Webstorm, bootstrap, SCSS
Achmea / zilverenkruis
Werkzaam als frontend developer in 2 scrumteams voor met name zilverenkruis.nl. Onderdelen: consumenten en zakelijk. Opleveren van frontend functionaliteit in samenwerking met UX. (Frontend) omgeving: Sharepoint(CMS), bootstrap, nodejs, HTML, CSS, LESS, json, jQuery, grunt, git, externe formulier applicatie(formdesk)
- HTML
- CSS / LESS
- json
- JavaScript / jQuery
- Platform frontend: NodeJS, Git, Webstorm, bootstrap
ING
Deel uitmakend van een scrumteam in de functie van frontend developer voor het onderdeel savings/ideal voor mijn.ing.nl.(ING internetbankieren)
- HTML
- CSS
- json
- JavaScript(angularJS)
- Platform frontend: Java, NodeJS, Git, Webstorm, Karma jasmine, bootstrap
ABNAMRO
Deel uitmakend van een scrumteam in de functie van frontend developer voor verschillende projecten voor abnamro.nl
- xHTML
- CSS
- json
- JavaScript
Rabobank
Deel uitmakend van Rabobank PIF FE voor zowel verschillende projecten als generieke onderdelen voor Rabobank.nl. Werkzaamheden bestonden vooral uit het bouwen van widgets.
- xHTML
- CSS
- JavaScript
UWV
Opdracht: 2007 - 2010, verantwoordelijk voor de front-end(ontwikkeling/advies/kwaliteitsbewaking aan de clientside) in opdracht van UWV voor de professionalisering/digitalisering van uwv.nl en andere applicaties / portalen binnen uwv(oa. werkbriefje, werkgeversportaal, werknemersportaal, zakelijk portaal, landing Wia, Verzuimmelder, Betaalspecificatie, SIR, FIV, UGD(UWV Gegevensdiensten), CBA, PUO, Digitaal Verzekerings Bericht(DVB), webformulieren, marktplaats). De websites moeten voldoen aan de webrichtlijnen voor de overheid. Structuur, layout en behavior zijn volledig van elkaar gescheiden.
- xHTML
- CSS
- JavaScript/jQuery
Liander (Continuon)
Opdracht: verantwoordelijk voor de ontwikkeling van de front-end in opdracht van NUON/Liander(Continuon). Voor de zakelijke grootverbruiker werd een web applicatie ontwikkeld. De website moest voldoen aan de webrichtlijnen voor de overheid. Structuur, layout en behavior zijn volledig van elkaar gescheiden.
- xHTML
- CSS
- JavaScript
Dokterswacht Friesland in opdracht voor TamTam
Front-end development voor TamTam.nl. Voor de Dokterswacht Friesland wordt de Microsoft Sharepoint 2007 omgeving gekoppeld aan de huisstijl. De sharepoint templates moesten de HTML validatie doorstaan, wat nog wel een uitdaging was.
- xHTML
- CSS
- JavaScript
- Microsoft Sharepoint 2007
Endemol in opdracht voor Studio Joyo
Opdracht: Front-end development voor Endemol. Studio Joyo heeft in opdracht voor Endemol een webapplicatie ontwikkeld.
- xHTML
- CSS
- JavaScript
Immigratie- en Naturalisatiedienst
Opdracht: formulieren ontwikkeld voor Eden Design (nu EdenSpiekermann), volgens de xHTML webstandaarden van het W3C.
- xHTML
- CSS
- JavaScript
Mike van den Toorn Photograpy
Opdracht: In opdracht van Buro.cc werd de website Mikevandentoorn.com herontwikkeld. Templates voldoen aan de xHTML strict webstandaard van het W3C. Het Content Management Systeem werd op maat ontwikkeld waarbij de foto's en categories volledig kunnen worden onderhouden door gebruik van PHP/MySQL. Editor cms:Xstandard
- xHTML
- CSS
- PHP
- MySQL
Media Republic
Opdracht: In opdracht van Media Republic werden templates ontwikkeld welke voldoen aan de xHTML strict webstandaard van het W3C.
- xHTML
- CSS
Stichting Food Valley
Opdracht: In opdracht van Eden Design (nu EdenSpiekermann) werden xHTML templates ontwikkeld volgens de webstandaard van het W3C
- xHTML
- CSS
- JavaScript
Provincie Zuid Holland
Opdracht: In opdracht van Mirabeau werd de front-end ontwikkeld volgens de xHTML webstandaard van het W3C. Toegangelijkheids-richtlijn: prioriteit 1 van drempelsweg.
- xHTML
- CSS
- JavaScript
Wiegerinck Architecten
Opdracht: In opdracht van Viadesk.com en ontwerp buro VanOsVanEgmond werd de front-end ontwikkeld voor de website door gebruik te maken van actionscript. VanOsVanegmond leverde de demo in flash aan die 1 op 1 werd geconverteerd naar actioncript. Alle content werd onderhouden via een CMS.
- HTML
- actionscript
LBi Lostboys
Opdracht: In opdracht voor Lostboys werden voor verschillende klanten templates ontwikkeld volgens de xHTML webstandaard van het W3C
- xHTML
- CSS
- JavaScript
Ministerie van Justitie
Opdracht: nieuwsbrief module ontworpen die moest voldoen aan de xHTML webstandaard van het W3C
- xHTML
- CSS
- Photoshop
Frebo Metaal toeleverancier
Opdracht: voor buro.design(full service ontwerp/communicatie buro) werd een dynamische concept website ontwikkeld waar specifieke produktinformatie kan worden opgevraagd via een automatisch genereerd pdf bestand welke door bezoekers kan worden worden gemaild.
- HTML
- CSS
- PHP
- mySQL
New Events
Opdracht: in samenwerking met ontwerpburo buro.design werd een dynamische website ontwikkeld waar bezoekers events kunnen verzamelen en vervolgens online een offerte kunnen laten uitbrengen.
- xHTML
- CSS
- PHP
- mySQL
Funda Directory desk
Opdracht: In opdracht van Mirabeau werden templates ontwikkeld ten behoeve van de backoffice van Funda
- xHTML
- CSS
- JavaScript
Foot Locker Europe
Opdracht: verschillende website projecten: adicolor campaign II, Nike Air History, Exclusives, Store Locator en de HR applicatie(vacature site).
- xHTML
- CSS
- JavaScript
- actionscript
LeChampagne.nl
Import van nieuwe champagnemerken. Huisstijl ontwerp:buro.cc. Fotografie: Mike van den Toorn Photography
- xHTML
- CSS
- JavaScript
- PHP
- mySQL
Equens
Opdracht: in opdracht voor Eden Design (nu Edenspiekermann) werden templates opgeleverd volgens de xHTML w3c standaard
- xHTML
- CSS
- JavaScript
Lifecyclesuite
Opdracht: verantwoordelijk voor de ontwikkeling van de front-end in de vorm van een RIA(Rich Internet Application) in opdracht van Lifecyclesuite B.V. Doorlooptijd: 9 maanden +
- xHTML
- CSS
- jQuery