Eye openers: mede mogelijk gemaakt door elkaar
Ik neem je mee naar het moment waarop ik me voor het eerst in lange tijd weer bewust werd van het feit dat interactie met collega’s van groot belang is om optimaal resultaat te behalen. Een belangrijke tool bij het creëren van de interactie op een website is CSS. Persoonlijk ben ik al een tijd groot voorstander van het gebruik van CSS grid; en verkies dit in veel gevallen boven de andere optie CSS flex. Dit vanwege de uitgebreide controle die het biedt, de consistentie in responsive weergave van elementen en simpelweg het gemak dat ik ervaar bij de toepassing ervan. Zo kan ik er (bijna altijd) op vertrouwen dat de lay-out zich gedraagt op alle schermformaten zoals ik het verwacht en het is ontworpen.
Display Grid
CSS Grid is een tweedimensionale lay-outmodule die de mogelijkheid biedt om complexe lay-outs te maken met behulp van een raster. Dit raster bestaat uit rijen en kolommen die we kunnen manipuleren om onze gewenste lay-out te creëren en elementen te positioneren. Vervolgens kunnen we onderliggende elementen waardes meegeven over waar het element zich moet positioneren binnen dit grid en welk formaat deze elementen moeten aannemen.
Display Flex
CSS Flexbox is een één-dimensionale lay-outmodule die de mogelijkheid biedt om de elementen van een webpagina in een rij of kolom te plaatsen. Het voornaamste idee achter Flexbox is om de container of het bovenliggende element de layout en positionering van onderliggende (nested) elementen te kunnen laten bepalen.
Tijdens de realisatie van mijn eerste project, was er een situatie waarbij er een element gepositioneerd moest worden op een manier die niet eenduidig kon worden getackeld door het gebruik van display grid. Om deze reden schakelde ik de hulp en visie van Bas in, die adviseerde in dit geval display flex te gebruiken om het gewenste resultaat te behalen.
De moraal van dit verhaal
Daarmee zit het toch weer in de kleine dingen en realiseerde ik mij dat het altijd goed is om scherp te blijven op waarom je bepaalde werkwijzen hanteert. Het uitgangspunt dient altijd ‘zo min mogelijk code om zoveel mogelijk voor elkaar te krijgen’ te zijn. Wanneer ik in deze situatie voor een grid lay-out had gekozen maar volgens een hoop extra code had moeten schrijven om de front-end van de website overeen te laten komen met het design, dan was dit niet optimaal geweest.
Optimaal is waar we voor gaan, dat is de ‘beter’ in de ‘iedere dag’. De moraal van dit verhaal is dan ook: sta open voor een ander perspectief, wees nieuwsgierig en vraag jezelf af waarom je iets doet zoals je het doet. Wordt het daarmee beter?
