Full stack web-developer in omgeving Amsterdam

Printenbind heeft mij wederom benaderd om de website te moderniseren. De opdracht bestond uit 4 fases: een redesign van de website, het verbeteren van de (front-end) performance van de website, het optimaliseren van het bestelproces en het moderniseren van de front-end techstack.

In een periode van 4 weken heb ik zelfstandig een complete redesign doorgevoerd voor printenbind.nl. Door met een SVG sprite te werken was ik in staat om op efficiënte wijze vrije vormen (zoals marker strepen, checkmarks en zigzag elementen) in verschillende kleuren en groottes toe te passen. Binnen een periode van 2 weken heb ik de performance van de site met ongeveer 30% kunnen verbeteren. Aansluitend wordt er nu bij iedere deployment automatisch een test uitgevoerd op Lighthouse/Pagespeed welke een uitgebreide rapportage levert in het Slack-kanaal van printenbind. Om de customer journey van de klant te verbeteren hebben we het bestelproces getransformeerd naar een SPA-like experience. Dit tools die ik hiervoor gebruikt hebt zijn Vue.js en Swup. Op basis van de requirements van de opdrachtgever heb ik de interface en de userflow zelfstandig bepaald en ontwikkeld. De laatste fase bij printenbind.nl betrof het moderniseren van de front-end tech stack vanwege deze verouderd was. Deze werkzaamheden bevatte het herschrijven van code naar modernere syntaxen, het vervangen van verouderde packages met betere equivalenten en het doorvoeren van versie updates. Daarnaast verloopt nu de de post-processing en compilatie van CSS en JS via Laravel Mix (Webpack) in tegenstelling tot via een PHP package.

• Sass
• Responsive design
• Design implementatie
• Laravel 8.x
• UX/Ontwerp (meedenken en eigen suggesties doen)
• SVG sprite system
• Github Actions
• Product configurator (Winkelwagen) in Vue.js
• Performance (front-end e.a.)
• Lighthouse CI Automated Testing
• Laravel Mix (Webpack)
• SEO
• Swup.js

Het herschrijven van mijn eigen website met nieuwe front-end technieken.

Omdat ik nog niet eerder met TypeScript en Vue.js 3.x heb gewerkt leek het me leuk om hiermee aan de slag te gaan. Mijn website heb ik technisch opnieuw opgezet door gebruik te maken van Vue (3.x) en TypeScript. Vue.js heb ik toegepast op de filter functionaliteit in mijn projecten overzicht. De back-end is opgezet in Lumen. Het was een simpel project, maar stelde me ertoe in staat om gewenning te creëren met de laatste versie van Vue. In een periode van 1 maand heb ik mij volledig verdiept in Vue 3 en TypeScript en heb ik dit project afgerond.

• Lumen 8.x
• TypeScript
• Vue 3.x

Bij WPG Uitgevers heb ik in mijn eerste weken mijn punten verdiend door eigenhandig een grote backlog aan bugs in hoog tempo weg te werken - waartoe anderen gefaald hebben. In de aansluitende periode werkte ik vooral aan het doorvoeren van verbeteringen aan verschillende sites die WPG Uitgevers onder zijn hoede heeft. Voorbeelden hiervan zijn een zoek- en filtersysteem op Happinez.nl en Pyschologiemagazine.nl, het lanceren van Coachfinder.nl, het opzetten van een interactieve game (Hackerquiz voor vn.nl), het technisch herinrichten van sites t.b.v development, het moderniseren van de Wordpress tech stack en het opzetten van code conventions binnen het bedrijf. Mijn prestigeproject is het bedenken, begeleiden en ontwikkelen van een Wordpress plugin die het fundament vormt van groot aantal sites van WPG Uitgevers. Deze plugin heeft er voor gezorgd dat we de sites veel efficiënter kunnen onderhouden en makkelijker nieuwe features beschikbaar kunnen stellen voor meerdere websites tegelijk. De plugin hebben we op basis van team-effort ontwikkeld waarbij ik de rol als team-lead had. Waar ik bijzonder tevreden over ben is de performance (laadtijd e.d.) verbeteringen die we hebben kunnen doorvoeren voor deze sites en wat wordt verzorgd door de plugin. Gedurende mijn periode bij WPG Uitgevers lag mijn focus voornamelijk op back-end, maar pakte ik front-end werkzaamheden op wanneer dit nodig was. Naast programmeren fungeerde ik ook als technisch consultant, ureninschatter en als aanspreekpunt bij problemen. Ook heb ook het genoegen gehad om verscheidene web developers binnen het bedrijf op te leiden tot ervaren Wordpress-developers. Waar ik het meest trots op ben is dat we altijd in staat zijn geweest om complexe wensen binnen de limitaties van Wordpress te bewerkstelligen door creatieve oplossingen te hanteren.

Team leader, architectuur van de front-end & back-end, website performance (Google Pagespeed, Core web vitals e.a.), presenteren/enthousiasmeren, API koppelingen, ontwikkeling van diverse (eigen) Wordpress thema's en plugins, zoek- en filterfunctionaliteit o.b.v. ElasticPress/ElasticSearch. In het kort: betrokken in het volledige spectrum binnen zowel front- als back-end.

• Design implementatie
• Docker
• Wordpress
• Eigen ontwikkelde Wordpress-plugin
• WP Rocket
• ElasticPress/ElasticSearch
• ACF
• Grafity Forms
• Twig/Timber
• Google Pagespeed
• Sass
• Vue.js
• White-label architectuur
• Component based PHP-architectuur
• Bitbucket Pipelines
• SEOpress en Yoast SEO
• Functioneel programmeren
• Shopping Feeds (XML)
• Webpack
• Performance (front- en back-end)
• Structured Data/Rich Snippets
• Composer

Voor Unilever moest er een drietal websites worden opgeleverd op basis van goedgekeurde ontwerpen. De websites moesten worden opgezet in Adobe Experience Manager (AEM). Vanuit de cliënt werden we verplicht om gebruik te maken van een theme development kit welke was ontwikkeld en onderhouden werd door een derde partij waarmee wij veelvuldig contact hadden. Deze theme development kit alsmede de inrichting van AEM waren, op zijn zachts gezegd, onvakkundig opgezet. Dit maakte het project zowel uitdagend en tijdrovend. De theme development kit zat vol met fouten waar ik regelmatig Pull Requests met bugfixes voor heb moeten indienen. Aangezien de theme development kit geen HTML aanpassingen toestond heb ik de site volledig vormgeven via CSS (SASS) zodat we geen concessies in het goedgekeurde ontwerp hoefde te maken. Vanwege we te maken hadden met meerdere technische limitaties en tegenslagen ben ik samen met project- en accountmanagers, UX designers, ontwerpers en brand managers continu op zoek gegaan naar (creatieve) oplossingen om het project in goede banen te leiden. Gedurende deze periode heb ik veel ervaring opgebouwd met AEM, het werken in een groot multidisciplinair team, werken in een Engelstalige omgeving en probleemoplossend denken.

Front-end ontwikkeling & technisch consultant

• Adobe Experience Manager (AEM)
• SASS (Component based)
• Design implementatie
• CSS3
• jQuery
• Gulp
• Consultancy (meedenken in technische mogelijkheden en beperkingen)
• Performance (SEO & snelheid)

Jacht.digital heb ik geholpen met de technische opzet en inrichting van de nieuwe Compuact website. Een belangrijk speerpunt voor Compuact en Jacht.digital was het hebben van een goede technische fundering waarop ze jaren verder kunnen. Voor Compuact heb ik een plan van aanpak geschreven waarin ik meerdere routes heb uitgestippeld. In samenspraak met de klant en opdrachtgever hebben we gekozen voor Wordpress vanwege het een goede prijs/kwaliteitverhouding heeft. De core functionaliteiten zijn opgezet zodat ze onafhankelijk zijn van third-party thema’s of plugins. Cursus en cursusdata werden via een API koppeling met een backoffice binnengehaald en opgeslagen als custom posts en terms in de site. Het inschrijven voor cursussen verloopt via WooCommerce en wordt (terug) gepushed naar de backoffice API. Door een logische scheiding te maken in de uitwerking van site functionaliteiten moet dit ervoor zorgen dat de site nog lang mee kan gaan en er vaak van thema’s en plugins gewisseld kan worden.

Plugin ontwikkeling

• Wordpress
• Consultancy
• Diverse API koppelingen

Een Wordpress-plugin dat de redactie in staat stelt om op basis van eigen gedefinieerde condities (bv. participant geeft in een enquête minimaal een 7 op vraag #3) een e-mail uitnodiging te sturen om een review achter te laten op een beoordelings-platform naar keuze (bv. Trustpilot). Ook beschikt het over een WYSIWYG-editor waarin e-mail templates kunnen worden toegespitst op het gegeven cijfer van de participant.

Plugin ontwikkeling

• Wordpress plugin (PHP & MySQL)
• Vue.js

Bij FirstStepsFirst ben ik aangenomen om als full stack developer als one-man team een nieuwe website op te zetten, onderhouden en door te ontwikkelen. Aangezien het budget en de mankracht beperkt was voelde ik me genoodzaakt te kiezen voor een technische fundering waarbij ik in staat ben om op hoog tempo werk te kunnen opleveren. Daarbij was het belangrijk dat de redactie op een vertrouwde manier content en inzendingen konden beheren via een CMS. Vanwege mijn ervaring met Wordpress en het Laravel framework leek het mij dan ook een logische keuze om deze twee samen te brengen. Gelukkig bestond hiervoor al een oplossing: het Themosis framework. Door het gebruik van Advanced Custom Fields (ACF) heb ik veel tijd bespaard, die ik anders was kwijt geweest aan onderhouden van het CMS. De front-end heb ik opgebouwd met Javascript (jQuery en Vue.js) en Materialize CSS framework. De keuze voor een CSS framework is voortgekomen vanuit het oogpunt dat we hierdoor sneller onze mijlpalen konden bepalen in tegenstelling tot custom styling. Het belangrijkste aspect van de website was de zoek- en filterfunctie en de kinderopvang kostencalculator. Deze kostencalculator kon tevens als widget worden geïmplementeerd in externe sites via een iframe. De zoek- en filterfunctie heb ik gebouwd in Vue.js en op basis van een eigen geschreven REST API. Het was voorzien van een lijst en kaart (Google Maps) weergave en toonde kinderopvang bij jou in de buurt. Op basis van een Nederlandse postcodetabel hebben we ervoor gezorgd dat iedere buurt in Nederland vertegenwoordigd was van een eigen landingspagina. Uiteraard was het ook mogelijk om een aanvraag verzoek in te dienen bij kinderdagverblijven. Kinderdagverblijven konden inloggen in een eigen portaal om toegang te krijgen tot de aanvragen. Mijn creatieve betrokkenheid werd gedurende dit project enorm gewaardeerd en ik ben ook bijzonder trots dat veel van mijn eigen bedachte features voor een verhoging heeft gezorgd voor hogere conversieratio's.

Zelfstandig verantwoordelijk voor de gehele technische ontwikkeling (scope) van de website. Van front-end tot back-end. Specialisaties: SQL query performance, Wordpress en Laravel integratie (combinatie), AirBNB geinspireerde zoekmogelijkheid, uitgebreide kostencalculator (Vue.js + Laravel API), reviewmogelijkheid, digitaal aanvraagsysteem e.a.

• Design implementatie
• Wordpress
• Laravel
• Themosis
• ACF (Advanced Custom Fields)
• PHP & MySQL
• Vue.js
• Sass
• Gulp
• Materialize CSS
• Serverbeheer (inrichting, onderhoud en optimalisatie)
• Mollie payments integratie
• Responsive design
• Composer

Printenbind moest worden gemoderniseerd. De tooling die gebruikt werd was verouderd, er was behoefte aan het gebruik van een CMS en het ontwerp en de UX van de website was aan vernieuwing toe. Daarnaast wou het zich ook gaan toespitsen tot het white-labelen van hun diensten. Mijn eerste taak was Printenbind introduceren met versiebeheer en het werken met een GIT workflow. Ernaast heb ik deployments geautomatiseerd via DeployBot. Gedurende ik bezig was met de ontwikkeling van het eigen geschreven CMS werd er tegelijkertijd gewerkt aan het ontwerp van de site. In het ontwerptraject ben ik nauw betrokken geweest als UX-er om samen met de ontwerper en opdrachtgever op zoek te gaan naar gebruiksvriendelijke en toegankelijke oplossingen die hun doel bereiken. Het idee en uitwerking van de (snelle) kostencalculator op de homepage en productpagina’s zijn bijvoorbeeld van eigen hand. Om white-labeling vanuit het CMS mogelijk te maken moest er een gebruikerssysteem worden geschreven. Daarnaast moest het ook mogelijk worden om een white-label site in een eigen jasje te kunnen gieten. Daarvoor heb ik een PHP Less compiler voor Laravel geschreven. Het CMS is vormgegeven met Twitter Bootstrap. Toen het CMS eenmaal opgeleverd was heb ik mij kunnen bezighouden met de front-end. We hebben hiervoor een eigen CSS framework ontwikkeld. Ook werd het rondom deze tijd duidelijk dat er behoefte bestond om bestaande functionaliteiten, zoals de bestelflow, te hergebruiken i.p.v. opnieuw te schrijven. Omdat de voormalige (legacy) website voornamelijk gebaseerd was op spaghetti-code heb ik ervoor gekozen om een middleware applicatie te schrijven die als communicatielaag fungeert met de oude site. Zo doende was ik in staat om het (HTML) resultaat van de oude site te injecteren in de nieuwe site zonder het nodig was om de slordige code te vermengen met de PSR-4 compliant code. Afsluitend hebben we via CloudFlare diverse optimalisaties doorgevoerd om de site een stuk sneller te maken door gebruik te maken van slimme caching technieken.

Gehele techniek (front-end en back-end), UX design, SEO optimalisatie, ontwikkeling Custom CMS, SQL query optimalisaties, White-label systeem, migraties, koppeling met het oude systeem via middleware, Cloudflare integratie t.b.v. sitespeed

• Design implementatie
• Laravel (PHP/MySQL) t.b.v. ontwikkeling eigen CMS
• Search Engine Optimalisation (SEO)
• UX
• Structured Data/Rich Snippets
• Twitter Bootstrap
• Eigen PHP Less compiler (wrapper)
• Less
• White-label architectuur (front-end & back-end)
• Performance (Google Pagespeed optimalisaties)
• Shopping Feeds (XML)
• Responsive design

Op basis van team-effort hebben we een Wordpress-website ontwikkeld. Ik ben betrokken geweest bij de oorspronkelijke oplevering van de website en meerdere malen ben ik betrokken geweest in verschillende doorontwikkeling trajecten. Mijn front-end verantwoordelijkheden betroffen het opzetten van herbruikbare site-componenten, de styling en werking van de site navigatie (mobiel en desktop), locatiezoeker en het implementeren van een homepage redesign. Ook het pixelperfect maken van het geimplementeerde ontwerp behoorde tot mijn verantwoordelijkheid. Denk aan het correct gebruik van witruimte, lettertype groottes, regelafstanden etc. Back-end: technische inrichting (architectuur) en het (achteraf) inbouwen van meertaligheid (multilingual ondersteuning) in de website via WPML.

Front-end en back-end, Google Maps gebasseerde locatiezoeker, multilingual intragratie met WPML, location aware content via Geolocation API

• Design implementatie
• Wordpress (PHP & MySQL)
• ACF (Advanced Custom Fields)
• WPML
• jQuery (components)
• Twitter Bootstrap
• Sass
• MaxMind Geolocation (API)
• HTML5
• Pagespeed optimalisaties (o.a CDN caching)
• Responsive design

Bevorderen van een snelle oplevering door het front-end team te versterken.

Het opzetten van opzetten herbruikbare UI componenten. Verantwoordelijk voor het projecten gedeelte (bekijken, aanmaken, aanpassen, overzicht). Daarbij een bijdrage geleverd aan de back-end voor project gerelateerde features. Inclusief het aansturen en begeleiden van junior developers.

• Design implementatie
• Laravel (PHP/MySQL)
• jQuery components
• Vue.js
• HTML
• Less
• Twitter Bootstrap

Versterken van het development team t.b.v. een snelle oplevering.

Front-end (single page, animaties, modals) en Instagram API en webshop integratie.

• Wordpress (PHP)
• ACF
• TweenMax animaties
• Less
• Social Media integratie
• REST APIs (Instagram & Shopify)

Het opzetten van een layout-systeem die gebruik maakt van organische vormen met oog op browser compatibiliteit en responsiveness

Qua front-end was ik verantwoordelijk voor de layout, de organische vormen, het grid-systeem, het overlay-menu en algehele architectuur. Qua back-end was ik verantwoordelijk voor het opleveren van een architectuur (custom post types, ACF) zodat een andere developer dit van mij kon overnemen.

• Wordpress
• ACF
• Raphaël.js
• Backbone.js
• Sass
• Responsive design

Het opleveren van een omgeving die het makkelijk maakt om voor mensen met weinig van HTML en CSS pagina's te kunnen aanmaken en aanpassen zonder gebruik te maken van een CMS (zoals de klant wenste).

Opzetten van een structuur in Ruby die d.m.v. een build process een HTML website creëert op basis van een template engine

• Design implementatie
• Ruby
• HTML/CSS
• Responsive design

Een front-end architectuur opzetten die makkelijk geimplementeerd en onderhouden kan worden door een externe back-end partij.

Front-end architectuur opzetten (component based) en styling o.b.v. Less. Ernaast een nauwe samenwerking met externe back-end partij die verantwoordelijk was voor de koppeling met het CMS. Inclusief aansturen en begeleiden van junior developers in het team.

• Design implementatie
• Front-end architectuur o.b.v. Blade template engine
• Gulp setup
• HTML/CSS
• Less
• Responsive design

Een responsive web-app die gasten van aangesloten horecagelegenheden toegang geeft tot gratis WIFI. De web-app speelt gerandomiseerde video's af en geeft gratis Coca-Cola weg o.b.v. win-logica.

Creëren van video animaties a.d.v. Javascript met oog op browsercompatbiliteit en performance. Gekoppeld aan een gebruikersysteem.

• AngularJS 1.x
• CSS3 Flex layout
• Laravel back-end (CMS)
• Responsive design

Een systeem dat op basis van eigen gespecifieerde condities YouTube content ophaald en inschiet als blogposts in de website

Plugin ontwikkeling

• Wordpress plugin (PHP & MySQL)

Het creëren van een gepersonaliseerde animatie video die volledig is ontwikkeld en gerenderd in Javascript

Component gebasseerde architectuur d.m.v. vanilla JS voor het bewerkstelligen van gepersonaliseerde video onderdelen op basis van HTML5 gerelateerde technieken

• TweenMax
• HTML5 Canvas element video rendering
• Vanilla JS
• Node.js