Van design naar werkende code
Slim en veilig mijn werk beheren
Als designer codeer ik niet alleen mooie dingen, maar zorg ik er ook voor dat ze goed werken! In Amazon Workspaces, met Visual Studio Code en de terminal, bouw en test ik mijn creaties in CSS, JavaScript en HTML. Zodra alles perfect is stuur ik het naar Gitlab voor een laatste check.
Deze manier van werken stelt mij in staat om gezamenlijk aan projecten te werken, waarbij via branches en merge requests de code veilig en georganiseerd blijft.
Hoe ga ik te werk
Voordat ik begin met het bouwen van een groot project, maak ik eerst een duidelijk plan. Dit plan zorgt ervoor dat iedereen die bij het project betrokken is, precies weet wat we gaan doen en hoe we dat gaan doen. Na het schrijven van de plan start ik met het ontwikkelen van een wireframe. Dit is een visueel ontwerp dat de basisstructuur van het project laat zien. Zodra het wireframe en ontwerp klaar is, beginnen we met het daadwerkelijke bouwproces.
Werken in drie omgevingen
Ik werk in drie omgevingen – test, acceptatie (acc), en productie (prod) – om de kwaliteit van mijn werk te garanderen. In de testomgeving ontdek ik en los ik fouten op, in de acceptatieomgeving wordt de code goedgekeurd, en in de productieomgeving wordt de goedgekeurde code live gezet. Dit zorgt ervoor dat klanten alleen de best werkende versie te zien krijgen.
Na het testen en goedkeuren van mijn werk, push ik de code vanuit mijn lokale Amazon Workspaces via de terminal naar gitlab:
In gitlab kan ik nog 1 laatste blik werpen samen met anderen of de code goed is om het definitief te mergen in de main branch:
Zodra de code is gemerged kan ik beginnen de websites bij te werken naar een nieuwe versie:
Efficiënter werken met html tags
In mijn werk streef ik altijd naar efficiënte oplossingen die niet alleen mijn werk, maar ook dat van mijn collega's makkelijker maken. Door herbruikbare tags te maken, kunnen we dezelfde componenten in verschillende projecten gebruiken zonder telkens opnieuw dezelfde code te schrijven.
Hier is een goed voorbeeld van hoe dit eruitziet in de stackeditor. Hiermee kun je controleren of de HTML-tag correct functioneert en of er aanpassingen nodig zijn:
In de html code wordt de HTML-tag cp:waiting gebruikt wat je visueel terugziet in de stackeditor
Op confluence houd ik de HTML-tags gedocumenteerd, inclusief hun doeleinden en specificaties:
Het resultaat
Zodra de aanpassingen op een acc of test omgeving zijn voltooid en door de klant zijn goedgekeurd alleen dan worden ze uitgerold naar de productieomgeving. Dit betekent dat de klant en de bezoekers van de website de nieuwe functionaliteit of wijzigingen gaan zien.
Zoals bijvoorbeeld de lijstweergave of het laden van een lijst:
Of een werkende bestelproces:
Zo kan er veel minder misgaan en kunnen we efficiënt verbeteringen doorvoeren die onmiddellijk beschikbaar zijn voor de klant om feedback te geven.
Bekijk meer portfolio stukken