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.