Afscheid

Mijn laatste opdracht verliep goed. Ik begon met de moeilijkste designs eerst. Dus hoewel het in het begin van de week wat traag ging terwijl ik de iets uitdagendere blog en home templates in elkaar stak, ging mijn tempo omhoog naar het einde van de week toe. Op de laatste dag maakte ik nog de drie laatste templates af en alles leek klaar te zijn op een uur voor het eind van de dag. Ik was blij dat ik er in geslaagd was om dit af te werken, zodat niemand na mij de volgende week nog moest verder werken op een halfgaar template dat ik last minute nog in elkaar gegooid had of zo. Dat zou wel stom zijn.

Maar toen mijn werk nagekeken werd, bleek dat er nog een template gemaakt moest worden. Eéntje die we uit het oog verloren hadden en waarvoor zelfs nog geen design ontworpen was. Oeps.

Er was niet genoeg tijd meer om zowel de feedback die ik gekregen had op de andere templates toe te passen, en ook een nieuw geïmproviseerd template in elkaar te knutselen. Ik koos er voor om de foutjes van de templates die ik al gemaakt had op te lossen, zodat die zeker in orde waren. Die laatste template kon ik echter niet meer maken in de tijd dat er nog over was. Echt jammer. Nu had mijn stage het mooie slot niet waarop ik gehoopt had.

We stelden wel nog snel vast welke template ik best als basis gebruikte en ik begon er al aan, maar op de algemene structuur en een klein beetje css na kon ik niet meer veel verwerkelijken tegen vijf uur. Spijtig, want het was waarschijnlijk ook niet meer zo veel werk. Een uur of twee max. misschien nog. Als ik niet ergens anders verwacht werd had ik misschien kunnen blijven plakken en had ik het daar ter plekke nog afgewerkt. Maar helaas, mijn stage eindigde dan toch nog halverwege een opdracht.

Ach…

Daaaaag!

Ter afscheid had ik koffiekoeken getrakteerd – niet dat dat heel veel voorstelde want in Mia Interactive trakteren ze koffiekoeken voor elk mogelijk excuus – en ik nam mijn tijd om iedereen aanwezig te bedanken voor hun hulp en begeleiding tijdens mijn stage. Ik hoop dat ik niemand vergeten ben, want iedereen heeft me daar echt goed geholpen en mijn stage er heel aangenaam gemaakt. Als ik er op terug denk heb ik eigenlijk echt nog veel op mijn stage geleerd. Zo leerde ik over:

  • Met composer werken in Drupal
  • De paragraphs module
  • Twig tweak
  • Drupal’s devel met kint. Al gebruik je beter een goede debugger.
  • npm en gulp binnen themes
  • git stashen
  • email opbouw
  • html conditionals
  • Hoe een blue screen er uit ziet. Oké, misschien is dit niet zo positief.
  • Een beetje git flow
  • !important in css, misschien ook niet zo heel goed dat ik dat hier geleerd heb maar ach. The more you know!
  • Een klein stukje symfony. Niet noemenswaardig veel, maar het was toch interessant genoeg
  • Sass, maar voor echt deze keer
  • BEM, maar ook voor echt deze keer
  • O ja, en alles dat te maken heeft met Hubspot,
  • En daarbij onvermijdelijk ook wat Inbound Marketing is en zo. Ik heb daar nog een certificaat voor gehaald. Wat dat ook waard mag zijn.
  • Geen css in je custom module steken. Anders maak je Dimitri verdrietig.
  • Hoe een vliegtuig werkt. Min of meer dan. Oké, helemaal niet dan.
  • Wat een ‘boulet’ is. Komaan, dat weet iedereen toch?
  • Houten latten wegen heel zwaar en ik heb geen conditie. En ik begrijp niets van schroevendraaiers.
  • Chinees ruikt heel lekker
  • Waar de Meir is
  • Ganzen zijn smeerlappen

Oké, genoeg gezeverd maar ik meen het. Ik heb er toch wel wat opgestoken.

En als de misplaatste grapjes het niet duidelijk maken: De sfeer beviel me er enorm. Iedereen was er vriendelijk en altijd bereid om te helpen zolang je vragen durfde te stellen. Ik voelde me er altijd welkom en heb weinig stress ervaren terwijl ik daar was.

Ik denk dat Mia Interactive een geschikte stageplaats is voor iedereen uit mijn richting. Voor zowel studenten uit het design als uit het development traject. En voor normale sociaal aangepaste mensen maar zelfs ook voor wereldvreemde boomtrollen zoals ik, waarvan ik weet dat er zo veel rondkruipen in IMD. Met de juiste attitude en een doos vol koffiekoeken, kan iedereen die een beetje zijn best doet bij Mia Interactive een verrijkende stage lopen.

De laatste taken

De volgende week begon ik weer te themen in Drupal. Ik moet eerlijk zijn: ik had ondertussen al zo lang dingen zitten bouwen in Hubspot, dat Drupal al ver weg zat voor mij en ik had moeite met er terug in te geraken. Ik kwam traag op gang. Het voelde even alsof ik niets nieuws geleerd had terwijl ik me probeerde te herinneren hoe ik nu weer een project lokaal installeerde, hoe ik nu weer een subtheme aanmaakte en hoe die paragraphs nu weer in elkaar staken. Maar het kwam uiteindelijk wel allemaal weer terug en gelukkig was ik niet de enigste die moest wennen. Ik werkte namelijk samen met iemand die heel veel van Drupal 7 af wist, maar die nu voor de eerste keer in Drupal 8 werkte. Dus ik kwam wel traag op gang, maar ik had meer het gevoel dat het hele project maar traag op gang kwam en dat ik niet bijzonder veel achterliep tegenover de rest. Hoewel dat uiteraard mijn collega’s als professionele Drupal developers altijd meer konden bereiken dan ik op een korte tijd, in alle scenario’s.

Het leren stopt nooit.

Nu dat ik samen werkte met anderen leerde ik veel bij over SASS, of all things. SASS was zo één van die dingen waarvan ik dacht dat ik het kende voor ik aan mijn stage begon. Maar de stage heeft me doen inzien dat er nog heel veel aan te ontdekken valt. Nu dat mijn code met anderen gedeeld werd konden ze snel opmerken wanneer ik dingen verkeerd aan het doen was. Zo leerde ik bij over BEM, SMACCS, mixins, breakpoints en nog een heleboel andere dingen waar ik al lang over had geleerd maar waarvan ik nu ontdekte dat ik het toch niet helemaal door had.

Iets anders waarover ik leerde was de config van Drupal, en de bijhorende commando’s: drush cim en drush cex. Drush cim & cex is een manier om o.a. content types en paragraphs types te delen met anderen. Zo kunnen ze gewoon opgeslagen worden in de repository zonder dat er sql databases moet uitgewisseld worden voor alle wijzigingen in content types, paragraph types en meer. Met drush cex kan de huidige config van de website geëxporteerd worden. Dan kan de config gedeeld worden en geïmporteerd worden in een nieuw project, of iemand anders’ lokale versie van hetzelfde project met drush cim. En ja, op vrijdagen waren er veel flauwe mopjes over hoe ‘drush cex’ klonk.

Ik maakte echter maar weinig voortgang in het Drupal project en dan merkte ik op dat er voor volgende week al iets anders in mijn planning stond. Mijn stage was stillaan ten einde aan het lopen en ik besefte dat ik het einde van dit project niet zou zien. Omdat ik van iedereen die aan dit project aan het werken was het best met Hubspot overweg kon, besloot ik om terug te gaan naar het Hubspot blog gedeelte van het project. Dit was iets dat ik beter kon doen dan de anderen en ik werkte er best nu aan vooraleer ik aan een ander project moest beginnen werken. Voor de rest van de week deed ik dus gewoon meer styling in Hubspot.

Taak 10 : Hoogstwaarschijnlijk mijn laatste opdracht bij Mia

Deze week begon ik dan aan een nieuw Hubspot project, maar het was een beetje een valse start. Het bleek dat de templates die ik nodig had om mijn werk op te baseren nog niet waren aangekomen, en dat de klant hun Hubspot nog niet goed had opgezet. Ik moest dus even wachten voor ik er echt aan kon beginnen. Ik begon wel al aan een aantal globale modules zoals de header, de footer en de subscription form maar daarna viel er niet meer te doen. Dus ik sloot me terug aan bij het Drupal project voor een dagje. Donderdagavond pas had de klant alles in orde gebracht en ik begon er dus pas vrijdags aan.

Hierna heb ik nog maar een week stage. Eén week dus om deze laatste taak af te werken. De taak is best wel veel. In principe zou ik het binnen een week kunnen afwerken als ik gefocust blijf en goed doorwerk. Ik hoop het te kunnen afwerken en ik zal het zeker proberen. Dat zou een mooi einde aan mijn stage zijn.

Hubspot oké. Drupal blijkbaar niet zo zeer.

De voorbije weken waren heel rustig. Ik maakte nog twee email templates en gelukkig had ik er niet meer zo’n moeite mee als mijn eerste email template. Ik vind zelfs dat ik er nu best wel goed in geworden ben. Ik paste ook nog een paar modules aan in al bestaande templates van andere projecten. Hubspot lag me wel.

Taak 9 : We gaan een Drupal en een Hubspot aan elkaar naaien.

De volgende week mocht ik meewerken aan een nieuwe website. Er moest een website gebouwd worden in Drupal 8, met de blog opgebouwd in Hubspot. Belangrijk bij deze opdracht is dat de styling van het Hubspot gedeelte van de website er exact hetzelfde moet uitzien als de styling van de Drupal website. Dit is niet vanzelfsprekend omdat het twee verschillende CMS’en zijn met verschillende werking, die op verschillende manieren hun templates opbouwen. Zo heb je in drupal meer controle over hoe de templates worden opgebouwd omdat je ze zelf volledig schrijft. In Hubspot daarentegen zijn een groot deel van de templates drag and drop, en voegt Hubspot zelf zijn eigen html en styling toe. Hubspot’s html output heeft daarom altijd veel div’s. Héél véél div’s. De code word er makkelijk opgeblazen tenzij als je er voor kiest om volledig met custom module’s te werken, wat perfect mogelijk is maar er zijn een aantal dingen te overwegen om het toch niet te doen.

Om onze layout overal consistent te houden, maakten we gebruik van ZURB’s Foundation; een verzameling van css klasses waarmee makkelijk een flexbox grid kan opgebouwd worden. Foundation werkt ook met SASS. In SASS kan je makkelijk de standaard instellingen van het foundation grid aanpassen naar je eigen wensen, hoewel het in de meeste gevallen wijs is om er af te blijven. Ik had geen ervaring met foundation, dus eerst nam ik mijn tijd om de documentatie goed door te lezen. De documentatie is grondig, maar het meeste zal ik toch later leren door er veel mee te prutsen, zoals gewoonlijk. Ik begon alvast aan het Hubspot gedeelte terwijl een collega de Drupal website opzette. Ik zette de nodige modules in Hubspot zo goed mogelijk klaar zodat achteraf enkel de css nog moest toegevoegd worden.

En toen kwam taak 4 terug uit de dood en hij riep “boe!” en ik zei “aaa!” want ik schrok.

Deze week besloot Studant om de thesis calculator te implementeren: het ding dat ik een aantal weken geleden gebouwd had ( wat ik toen ‘taak 4’ noemde ). Dat ging vreselijk mis. Het bleek dat ik een aantal dingen verkeerd had gedaan waardoor het nu erg moeilijk was om de custom module op een goede manier op de site te gebruiken. Mijn voornaamste fout was de plaats waar ik de styling had gezet. Ik had namelijk styling aan de module toegevoegd in plaats van in de theme van de website. In theorie was dit wel mogelijk en de documentatie die ik gevolgd had beschreef dan ook volledig hoe css aan een custom module best toegevoegd werd en zo voorts, maar in praktijk bracht dit veel problemen. Door de module zijn eigen styling te geven, schreef die css nu de css van de theme over. De beheerder en developers van de website konden de css van de module dus niet aanpassen tenzij in  de module zelf. Ondertussen paste de module wel de css van het theme aan. Dit moest andersom. Dimitri legde me uit dat custom modules in praktijk best nooit styling meekregen. Styling hoort thuis in de theme. Zelfs javascript werd best niet gebruikt in een custom module tenzij het echt nodig was. Elke website ziet er toch anders uit en zal 99% van de tijd toch zijn eigen styling willen toepassen op de blocks van de module. Op elke website zou men ook willen de styling van de module kunnen aanpassen in de theme, waar al de andere styling ook aangepast wordt.

De module zijn eigen styling geven leek me indertijd heel logisch met wat ik er van had gezien in de les en wat ik tegenkwam in de documentatie, maar ik begrijp nu hoe het veel problemen kan veroorzaken. Het was uiteindelijk nog veel werk en gepruts voor Studant om de Thesis Calculator nog te implementeren, maar Dimitri nam het me niet al te kwalijk. Hij herinnerde me er aan dat ik hier stage deed om te leren en dat apprecieerde ik.

De week kwam ten einde voor ik kon beginnen meewerken in het grote Drupal project, maar het hubspot gedeelte was nu zo goed als af. Ik ben benieuwd naar volgende week. Het is ondertussen al een tijdje geleden dat ik nog met Drupal gewerkt heb. Ik hoop dat het overschakelen van weken lang Hubspot terug naar Drupal vlot zal gaan en ik hoop ook dat ik een waardevolle toevoeging zal zijn aan dit teamproject. Het is immers de eerste keer dat ik echt zal samenwerken met anderen aan één project.

En toen verprutste ik een email template

De zevende week was ik nog steeds aan het worstellen met dezelfde email template. Het was verschrikkelijk frustrerend. De hele tijd geloofde ik dat de email bijna af was, maar telkens wanneer ik het laatste probleem oploste ontdekte ik weer een nieuw probleem. Het zou me nog tot de volgende week duren voor het af was, en zelfs dan nog moest een collega het overnemen om de puntjes op de i’s te zetten. Deze opdracht was in mijn ogen een complete mislukking, maar ik heb er wel wat uit geleerd.

Taak 5 : De verschrikkelijke wereld van email – deel 2

Dus wat ging er allemaal mis?

De grootste problemen waren er omdat ik nog nooit eerder een email gemaakt had en dus niet wist wat voor problemen ik er van kon verwachten. Elk probleem dat ontstond was nog een complete verassing voor mij waarvoor ik de oplossing moest gaan zoeken. Er zijn ruim genoeg oplossingen voor problemen met emails te vinden online, maar ze kunnen niet altijd makkelijk geïmplementeerd worden in hubspot en het duurde me altijd even voor ik het zag. Een deel van dit probleem was dus ook nog eens dat ik nog steeds Hubspot niet helemaal gewend was. Zo was er een handige id attribuut die ik aan mijn style tags kon toe voegen om de css automatisch inline te zetten, maar daar kwam ik veel te laat achter. Ik heb zo veel mogelijk vragen gesteld aan mijn collega’s, maar ze konden me niet met alles helpen en door de planning van het moment waren zij die er het meest van af wisten ook niet aanwezig voor een lange periode.

Ik baseerde me voor de email ook op een template die ik als voorbeeld had gekregen, maar die template had zelf ook problemen die ik in mijn eigen template wel moest oplossen. Dingen die ik nadeed uit deze template bleken niet te werken zoals het hoorde, of moesten op een andere manier opgelost worden en ik kwam hier ook te laat achter. Hier en daar ben ik wel zelf te ver gegaan en heb ik tijd verspild met dingen op te lossen die de moeite niet waard waren. Ik werd door die kleine dingetjes constant verrast. Ik ging er altijd van uit dat het een stuk makkelijker zou zijn en eenmaal dat ik dan bezig was, kon ik het niet meer los laten. Tijd versus resultaat opwegen is iets dat ik echt heb moeten leren tijdens deze opdracht.

Maar het lag niet alleen aan die template. De componenten die Hubspot zelf aanbood om te gebruiken voor email bleken ook problemen te hebben wanneer ik ze testte. Wat ik echt moest doen was voornamelijk custom modules schrijven en niet te veel rekenen op de default modules, al was het maar omdat ik dan veel meer controle zou hebben. Daar ben ik uiteindelijk ook op de harde manier achter gekomen.

Terwijl ik hiermee zat te prutsen was het de bedoeling dat ik al aan een andere opdracht begon. Ik had nu ook een planning gekregen, waar ik heel blij om was, maar ik kon de planning al direct niet volgen omdat ik maar bleef knoeien met de email. Dit was tot zover het stressvolste moment van mijn stage voor mij. Email templates maken duurde binnen het bedrijf gewoonlijk maar een dag of twee, maar ik was er al bijna twee weken aan bezig! Ik voelde me er rot door. Maar ik bleef me er op vastbijten want voor mijn volgende opdracht moest ik nog een email template maken, dus alles dat ik nu oploste zou me ook in de volgende opdracht helpen.

Uiteindelijk geraakte ik er met behulp van heel veel html conditionals (dit bestaat naar het schijnt) en heel veel !importants in css (Wat voor web een echt not done is, maar in emails met hubspot kon het niet anders vermits hubspot zelf !important gebruikte. Soms zelfs inline!). Toen was de email eindelijk af. Het werkte perfect in alle clients. Alle clients behalve gmail. Gmail en outlook waren de twee clients waarmee ik het meeste moeite heb gehad. Gmail doet op zich niet moeilijk in het begin, maar outlook wel en het is vanwege de wilde oplossingen voor de problemen van outlook dat gmail ook begint te flippen. Zo had ik het vaak voor dat ik het template kon goed krijgen in outlook of gmail maar niet in allebei.

Het probleem waar ik nu mee zat was niet dat er iets niet werkte in de template, maar dat de email die met de template verzonden moest worden te lang was voor gmail. Hierom knipte gmail een stuk van de email er af. Als gevolg werden de links om uit te schrijven verborgen achter een tweede klik. Dat mocht niet. Dit kon op zich met elke email gebeuren die te lang was. Maar natuurlijk werd die email vooral zo lang dankzij mijn code. Ik had zo veel inefficiënte conditionele html voor de verschillende email clients geschreven, zonder er rekening mee te houden dat de email te lang zou kunnen worden. Dit was weer één van de vele problemen die ik gewoon niet had zien aankomen.

Maar ik had er genoeg van. Ik wou verder. De volgende opdracht had immers voorrang. Ik zette er even een punt achter, en begon nu aan een nieuwe email template, deze keer voor de volgende opdracht al. Maar eerst was er de verhuis.

De verhuis : Er werd voorgesteld om een grote kip boven de deur te hangen, maar dat idee werd onterecht neergeschoten

Op donderdag namiddag ontruimden we het kantoor. Iedereen die twee handen had hielp mee. Tafels en kasten werden uit elkaar gevezen, bedradingen werden ontrafeld en meegenomen, de keuken werd uit gekuist,… Het was een heel gebeuren. Toen het werk er op zat gingen we voor het laatste uur met zijn allen iets drinken. De grote baas trakteerde. Ik kon de rust appreciëren want ik was al heel de week aan het stressen vanwege de email opdracht en dit was eens iets leuks tussendoor. Ik ontdekte toen dat Antwerpen bijzonder dikke duiven had. Dit klinkt als iets dat ik niet in deze blog hoef te schrijven, maar ik meen het: de duif die ik zag was zo enorm dik dat het zeker wel noemenswaardig is. Die duif had gegarandeerd een andere duif opgegeten.

De volgende dag werkte heel Mia Interactive vanuit thuis terwijl alles verhuisd werd. Ik werd ’s morgens wakker om te ontdekken dat het internet in de hele straat was uitgevallen. Geweldig… Gelukkig sloeg ik er nog in om me te verplaatsen naar de woning van familie die niet al te ver woonde, en daar kon ik me in een afgesloten kamer nestelen en hun internet gebruiken. Het was me zelfs nog gelukt om op tijd aan het werk te beginnen. Ik kon er me ook goed concentreren, misschien zelfs beter dan het ooit thuis zou gaan en ik maakte al veel vooruitgang in de volgende opdracht.

‘S maandags kwamen we aan op het nieuwe kantoor op Kipdorp.
Het zag er top uit. Zeker een verbetering tegenover het vorige, vind ik. Doorheen de week die volgde hielp ik samen met andere stagiaires nog met een aantal klusjes hier en daar om nog wat dingen in orde te brengen. Kleine dingetjes maar hoor.

Taak 6 : Laten we het deze keer niet verprutsen

Ik kreeg nog woord dat het laatste gebrek van de email template die ik gemaakt had toch nog steeds moest opgelost worden. Maar de opdracht waar ik nu mee bezig was had voorrang, daarom besloot Dimitri de volgende maandag om opdracht 5 door te geven aan een collega. Ik heb die collega duidelijk gemaakt wat er nog niet in orde was en hoe ik geloofde dat het opgelost moest worden en probeerde nog te helpen waar mogelijk. Hij heeft het probleem in een dik uur kunnen oplossen. De finish was dus echt niet meer ver af. Ik vind het jammer dat ik de opdracht zelf niet tot een einde heb kunnen brengen. Het zou me een gevoel van overwinning gegeven hebben na twee weken lang met dat email template geworsteld te hebben.

De volgende email template die ik maakte had ik echter op maandag al afgewerkt. Een anderhalve dag werk dus. Wat een contrast. Ik was zo blij. Elk probleem dat ik nu tegenkwam, had ik al eens opgelost in de vorige opdracht en ik wist telkens wat doen. Andere dingen waar ik de vorige keer tijd aan had verspild, besefte ik nu al vanaf het begin dat het de moeite niet waard was en dat ik het beter nonchalanter oploste. En ik wist vanaf in het begin dat het tricky was en dat ik me best haastte om niet weer in tijdnood te komen. Hierdoor had ik vanaf het begin al een goede snelheid en streste ik minder hard. Dit email template was ook kleiner dan het vorige en dat hielp natuurlijk ook. Maar toch: dit voelde als een overwinning voor mij. Dit wilde zeggen dat de rest van mijn stage niet meer zo’n nachtmerrie zou zijn als de laatste week. Een spreekwoord over een ezel en een steen komt in me op. Ik heb dan misschien traag geleerd, maar gelukkig heb ik überhaupt geleerd.

Na de email template bouwde ik nog een aantal templates voor landingspages en blog templates. Het was zalig om weer in web te mogen werken. Je beseft pas wat voor een vrijheid je daar hebt nadat je weken lang met emails bent bezig geweest. Op vrijdagavond had ik het allemaal af en alles was in orde. Fijn, want de vorige opdracht had me enorm aan mezelf doen twijfelen maar deze keer had ik wel degelijk goed werk geleverd. De volgende week zal ik nog een aantal email templates maken. Hopelijk zal dat niet weer een ramp worden, maar ik heb er nu eigenlijk wel weer vertrouwen in.

Hubspot training en taak 5: Eens iets nieuw

In mijn vijfde week leerde ik Hubspot kennen. Hubspot is een verzameling van software en diensten die bedoeld zijn om marketing en sales van bedrijven makkelijker en effectiever te doen verlopen. Het wordt veel gebruikt door het marketing gedeelte van het bedrijf. Niet direct mijn wereld dus, maar Hubspot biedt ook een CMS aan. Met die CMS kan men websites beheren compleet met pagina’s en blogs die zij makkelijk kunnen maken en bewerken aan de hand van vooraf gebouwde templates. Ze hebben zelfs email templates waarvan gebruik gemaakt kan worden voor marketing email campagnes.

Een developer moet natuurlijk al die templates op voorhand maken, en dat ben ik dan. De templates worden gebouwd met een templating taal die ze zelf HubL noemen. Het is erg vergelijkbaar met Twig in Symfony en Drupal, en snel onder de knie te krijgen. Hubspot heeft een aantal trainingen voor beginners om te leren hoe het moet, voornamelijk videocursussen met wat opdrachten en bevragingen er tussen geworpen. De eerste dagen van mijn vijfde week hield ik me daarmee bezig. De training ging goed en ik slaagde. Toen ik mijn certificaten had mocht ik een template van de Mia website namaken ter oefening. Dat ging ook goed.

Taak 5 : De verschrikkelijke wereld van email

De volgende week was het de stageterugkomdag, wat al een heel gebeuren op zich was. Toen ik ’s woensdags weer op het kantoor was, werd ik gebrieft voor mijn volgende opdracht. Ik moest een email template maken in Hubspot. Het zag er me eerst een gemakkelijke opdracht uit, maar ik merkte al snel dat ik dat onderschat had. Ik had nog nooit zelf een email opgebouwd en het bleek dat emails een stuk lastiger dan websites zijn. Voor email moet alles in tabellen gestructureerd worden, css kan niet in aparte stylesheets staan maar moeten in de head gezet worden of nog erger: inline. Daarbovenop zijn sommigen van de meest gebruikte email clients ronduit incompetente programma’s die er schijnbaar naar streven om emails zo kapot mogelijk te maken.

Ik wil hierbij alle lezers ontmoedigen om ooit nog een outlook programma te gebruiken. Gebruik gerust outlook’s web applicatie, maar open alsjeblieft nooit meer het standaard email programma op je pc. Want voor elke keer dat je een email opent in een native outlook programma, is er ergens op de wereld een developer die huilt. Gebruik het niet meer. Laat het sterven. Dank u.

Het ziet er naar uit dat ik volgende week nog ga moeten verder werken aan die email template. Hopelijk werk ik het maandag af en kan ik dan iets minder frustrerend gaan doen. Volgende week is het ook de verhuis. Mia Interactive verhuist van de Frankrijklei naar Kipdorp. Hiervoor gaan we donderdag namiddag meehelpen met het inpakken van spullen en vrijdag zal iedereen van thuis werken. Ik ben benieuwd naar hoe thuis werken zal verlopen. Hopelijk kan ik me thuis even goed concentreren als op kantoor.

Taak 2, 3 & 4: Nu pruts ik voor echt

In mijn derde en vierde week was ik al meer gewend aan het hele gedoe. Ik maakte me al niet meer druk over late treinen of bloeddorstige moordhonden tijdens het pendelen en langzaam maar zeker leerde ik ook mijn collega’s beter kennen. Zo kan ik nu al wat namen onthouden, van de meeste mensen toch. En zonder ezelbruggetjes dan nog! Wie mij kent weet dat dat voor mij al een grote prestatie is. Af en toe heb ik zelfs kleine gesprekjes met mijn collega’s, bijna zoals een normaal en gezond functionerend persoon zou doen. Tussen het werk door hebben we al gesprekken gehad over films, – en dan vooral wat Buzz Lightyear zegt in de Nederlandse dub versus de Vlaamse dub –  maar ook over pokémon, dobbelstenen, waarom we tegen Laravel zijn en waarschijnlijk nog veel meer onmogelijk interessante nerd gesprekken die ik me op dit moment niet meer kan herinneren.

Maar zolang mijn stagementor niet van de aarde verdwijnt, wordt er ook wel echt gewerkt en deze keer was ik echte dingen aan het doen.

Taak 2 : Op bug jacht

Toen mijn derde week begon mocht ik eerst een aantal bugs fixen in de website van Studant. Het waren kleine dingetjes zoals het opnieuw uitlijnen van wat titels, zorgen dat de z-index van wat dropdowns juist zat en een header sticky maken. Niets spectaculair, maar een week later mocht ik naar de site terugkeren om er ook een volledige custom module voor te maken.

Taak 3 : Verder prutsen aan iets dat al lang verprutst was

Maar voor ik aan die module begon paste ik eerst de css van een oude webpagina op een klantensite aan, om het responsiever te maken. Dat was een avontuur op zich, maar niet echt een prettig avontuur. Het ging om een oude pagina op een Drupal website waarbij men gewoon wat html in een node had gegooid. De html kwam dus niet eens van een template, in plaats daarvan was het de content van een pagina.

Deze ene pagina was dan ook nog beschikbaar in tien verschillende talen. Dat hadden ze voor elkaar gekregen door gewoon tien verschillende nodes aan te maken. Eén aparte pagina voor elke taal dus. De hele setup was ver van ideaal. Ik vroeg me meteen af waarom men hiervoor niet gewoon een nieuwe content type had gemaakt, als men toch van plan was om zo tien varianten van hetzelfde ding te maken? Of waarom geen configureerbare custom block module? Alles zou beter zijn dan dit.

Maar niets aan te doen, dit was hoe het was. Doorgaans passen we de content van klanten niet aan want dat hebben klanten niet graag en dat zouden ook aanpassingen in de database zijn in plaats van aanpassingen aan de website zelf, wat het nog ingewikkelder maakt. Dus ik had een tiental html pagina’s die allemaal net ietsje van elkaar verschilden, die in een tiental verschillende nodes zaten maar allemaal luisterden naar dezelfde standaard twig template van de pagina, die ik met één stylesheet moest aanpassen zodat ze allemaal responsive werden. De html kon ik niet aanpassen. Ik kon geen twig template in duiken om extra classes toe te voegen want de specifieke html waar het om ging kwam niet van een template, het was content. Het beste dat ik kon doen (en uiteindelijk moest ik het uit noodzaak wel doen) was de template van de omliggende pagina aan passen om ergens de titel van de node als een klasse mee uit te printen. Dan kon ik toch nog voor een paar extra lastige talen – Zoals Grieks. Wat is Grieks toch een vreselijke taal! Alle woorden worden acht keer zo lang in het Grieks! – aparte CSS schrijven. Na lang gepruts heb ik het uiteindelijk wel voor elkaar gekregen.

Het was een ‘speciale’ ervaring en het deed me inzien hoe ideaal de schoolomgeving eigenlijk wel niet was voor het schrijven van goede code, desondanks dat het door domme studenten geschreven wordt. Op school installeerden we altijd zelf onze projecten, meestal vanaf nul. En we deden het goed, we schreven het zoals het moest zodat we er later geen last van zouden krijgen en als het bleek dat we het toch slecht geschreven hadden dan was het ons eigen probleem.

Maar nu bouwen we verder op websites die al jaren op het net staan, waar klanten en andere developers die voor jou kwamen ooit rare beslissingen hebben genomen en nu is het jouw probleem. En wat doe je dan? De hele boel weggooien en opnieuw bouwen zodat het deftig werkt zoals het hoort? Het structureel oplossen zodat het nooit meer problemen zal veroorzaken in de toekomst?

“Nee.” Liet één van mijn collega’s me weten. “Pas enkel de CSS aan en bouw het niet opnieuw want dat zou werk zijn waarvoor ze niet betalen.”

Zoals ik al zei: Een ‘speciale’ ervaring. Leerzaam, maar niet zoals je zou denken.

Taak 4 : Kan je nog één keer uitleggen hoe de korting hoort te werken?

Toen dat avontuur voorbij was mocht ik dan die custom module maken voor Studant. Een block die prijzen berekende. Het was een leuke en uitdagende opdracht, waar ik misschien wat te lang over deed maar ik had er plezier mee. Modules bouwen had ik nog recent gedaan in de klas dus dat gedeelte ging heel vlot. Het moeilijkste aan de opdracht vond ik het begrijpen en het juist interpreteren van Studant’s tarieven. Ik geloof dat ik wel vijf keer me opnieuw heb laten briefen over hoe de prijs nu eigenlijk berekend moest worden. Het was duidelijk heel verwarrend voor mijn arme zwakke hersentjes. Dit is waarom ik indertijd geen economie ben gaan studeren.

Nu dat ik daar bijna mee klaar ben, zal ik binnenkort weer iets anders doen. Volgende week ga ik over Hubspot leren en daar kijk ik naar uit. Ik heb wel al een paar keer stiekem mee gegluurd naar de schermen van mijn collega’s, naar de HubL syntax (lijkt enorm veel op twig) en de drag & drop templates. Ik heb wel zin om iets nieuws te leren en ik zou graag ook in Hubspot kunnen developen. Hopelijk ben ik snel mee.

Taak 1: Operatie “Pruts”

Op mijn eerste dag slenterde ik nogal onwennig het bedrijf binnen. Dimitri, mijn stagementor, zat al op me te wachten. Hij vroeg me meteen hoeveel ik al van Drupal kende. Ik antwoorde zo eerlijk mogelijk.

Vorig semester had ik me nog bezig gehouden met het maken van Drupal thema’s en modules, maar het bouwen van websites zelf was voor mij eigenlijk al anderhalf jaar geleden (denk ik). Het zat in ieder geval heel ver weg. Het zag er dus naar uit dat ik me eerst weer moest inoefenen. Dimitri viste een projectje uit Bitbucket en gaf me een database. Mijn eerste taak was simpel: Installeer dit project lokaal, start dan zelf een nieuw project op en maak het na. Pruts er maar mee tot je het snapt.

Voor mijn eerste “taak” ging het ook alleen maar om de structuur, en dan bovenal de modules. Ik moest leren welke modules er allemaal gebruikt werden, en hoe ze gebruikt werden. Van de CSS mocht ik afblijven. Het was iets dat ik zelfstandig mocht uitzoeken en ik kon hulp vragen wanneer nodig. Ik werd daarom tactisch gestationeerd tussen een ervaren Drupal ontwikkelaar (Steve) en een ex-IMD’er die hier een jaar geleden ook had stage gelopen (Hanna).

De installatie van het project bleek niet zo eenvoudig te zijn als ik gewend was. Op de schoolbanken zetten wij altijd de Drupal projecten op met Acquia Dev Desktop, maar bij Mia opteren ze vaker voor XAMPP. Ik kende XAMPP – ik had het altijd al gebruikt voor mijn PHP projecten – maar om dit Drupal project te installeren heb ik toch even in de instellingen van XAMPP’s apache moeten duiken om hier en daar wat aan te passen. Zo stel ik nu bijvoorbeeld virtual hosts in op Apache in plaats van zo omslachtig naar localhost/éénofandermapje te surfen.

Git kende ik ook, uit verschillende vakken. Maar om één of andere reden waren we tijdens Drupal lessen nooit verder geraakt dan het delen van zip bestanden. Vreemd, nu vraag ik me af waarom we eigenlijk nooit git gebruikten voor Drupal. Een git clone is echter niet genoeg om een Drupal project te installeren. Composer komt er ook bij te pas. Composer wordt gebruikt om alle contributed modules te installeren en te beheren. Wanneer een bestaand project gecloned wordt moet Composer dus eerst nog alle contributed modules (en nog wat dingen) installeren in /vendor, net als npm /node-modules zou moeten aanmaken bij een verse clone. Ik werkte met XAMPP dus de database importeerde ik gewoon in phpmyadmin. Zo was het project dan volledig lokaal geïnstalleerd.

Vervolgens moest ik een volledig nieuw project starten om dan van scratch het eerste project na te bouwen. In de lessen zouden we naar drupal.org/download surfen en een zip downloaden, maar het hoeft helemaal niet zo omslachtig te gaan. Waarom zouden wij die zip gaan halen als Composer dat ook kan met een enkel commando? Namelijk het volgende:

composer create-project drupal-composer/drupal-project:8.x-dev some-directory --no-interaction

Bij de installatie van het nieuwe project maakte ik gebruik van de minimal installatie optie. Drupal wordt dan geïnstalleerd zonder thema en zonder enige modules. Geen enkele CSS dus en zelfs Drupal’s fameuze toolbar is dan nog niet geïnstalleerd. Geen probleem, want de interface is helemaal niet nodig om de nodige modules te installeren. Daarvoor dienen Composer en Drush. De minimal installatie is een goede oefening in het begrijpen van welke modules essentieel zijn en welke niet. Omdat ik alle nodige modules één voor één enablede leerde ik goed waarvoor welke module diende, welke modules ik eigenlijk al kende zonder ik het wist en welke modules voor mij nieuw waren.

Paragraphs

Veruit de belangrijkste nieuwe module die ik heb leren kennen was de Paragraphs module. In plaats van een content type standaard velden te geven, kan je met deze module paragraphs als velden gebruiken. Een paragraaf zelf is dan een vooraf bepaalde reeks van velden, bijna een content type op zich. Een content type om in content types te steken. Voor de eindgebruiker is dit heel handig. Zonder deze module zouden ze zelf hun images, tekst en links in één body field van een content type stoppen in de hoop dat alles er zal mooi uitzien in het resultaat en dat het er consistent uit ziet met alle andere content. De paragraphs zijn veel sneller, makkelijker en meer modulair om te gebruiken. De gebruiker selecteert gewoon dat hij een tekst wilt met een vettere titel en een image er rechts naast en vult de content in. Veel sneller dan het zelf proberen juist te alignen in een WYSIWYG tekst editor.

Het is dan aan mij om er voor te zorgen dat de paragraphs er overal zullen uitzien zoals het hoort. Net zoals het mogelijk is om de twig templates van specifieke types van content aan te passen, kan dat ook voor de verschillende types van paragraphs. Wanneer een gebruiker dus selecteert dat hij zijn image rechts van de tekst wilt, kan ik het relevante veld opvangen in twig, de waarde uitlezen en op basis daarvan de html printen zoals het nodig is. Zoals bijvoorbeeld:

{% if paragraph.field_position_image.value == "top" %}
    <img src="{{ file_url(paragraph.field_media.entity.field_media_image.entity.uri.value) }}" alt="{{ paragraph.field_media.entity.field_media_image.alt }}">
    <p> {{ "Content!" }} </p>
{% elseif paragraph.field_position_image.value == "bottom" %}
    <p> {{ "Content!" }} </p>
    <img src="{{ file_url(paragraph.field_media.entity.field_media_image.entity.uri.value) }}" alt="{{ paragraph.field_media.entity.field_media_image.alt }}">
{% endif %}

Kint helpt enorm bij het vinden van de juiste waarden in de context. Zo zal de volgende lijn code de hele context printen.

{{ kint(_context|keys) }}
De output van kint(_context|keys)

Maar beter dan eindeloos veel if-statements te schrijven voor elke mogelijke instelling, is om gewoon aangepaste CSS classes aan de paragraphs te geven, afhankelijk van de waarden die er voor zijn ingesteld. Als de templates eenvoudig genoeg opgebouwd worden, kan het uitzicht van de verschillende paragraphs dan volledig met css geregeld worden.

{%
    set classes = [
        'paragraph',
        'paragraph-' ~ paragraph.bundle|clean_class,
        'paragraph-' ~ paragraph.bundle|clean_class ~ '--' ~ 'image-position-' ~ paragraph.field_position_image.value
    ]
%}

{% block paragraph %}
    <div {{ attributes.addClass(classes) }}>
        <p> {{ "Content" }} </p>
    </div>
{% endblock paragraph %}

De paragraphs heb ik nu volledig onder de knie en onderweg leerde ik ook dingen bij over subthema’s, de media library, embed views, talen, twig tweak en menu’s. Maar als ik daarover ook nog wil vertellen wordt deze post echt schandalig lang, en het is al schandalig lang. Mogelijks kom ik er wel nog op terug op een minder bezige week. Mijn eerste taak heb ik nu afgewerkt en als volgende taak zal ik een aantal bugs fixen in de website van Studant. Daarover zal ik de volgende keer wel meer vertellen.