Jaime Martínez: A modular approach to WordPress theme development
Toch dat jullie er zijn, dank je over de introductie. Ik ga mezelf ook niet verder introduceren, ik ga gewoon gelijk beginnen. Ik wil bij deze een beetje het landschap, schetsen waar ik probeer uit ben ik goed achterin te verstaan. Of moet ik iets meer, nee helemaal prima. Het gaat eigenlijk over een verhaal van groei, hoe je van misschien werkt je in je eentje, je krijgt grotere projecten. Het is persoonlijk niveau, maar ook als bedrijf groeien ook. De projecten worden wat gecompliceerde, de klanten worden groter. Daarmee heeft ook impact op je development. Je gaat met meerdere mensen werken eraan. En dat heeft allemaal invloed op eigenlijk het proces van development. Dus welk probleem proberen we eigenlijk op te lossen bij ons op de zaak, bij level level. Het is een flinke zin, maar bij werken met meerdere mensen werken we aan het projecten die we bouwen moeten gewoon meerdere jaren blijven staan. We moeten gewoon stabiel draaien, ze worden uitgebreid, er wordt doorontwikkeling opgedaan, nieuwe fietsjes toegevoegd, weggehaald, het leeft. En ook nog eens een keertje, we hebben verschillende developers, verschillende designers die werken er allemaal aan. En het begin, wat dat ook verteld werd, het project wordt opgezet door iemand, door een team van drie. En de doorontwikkeling wordt door een heel ander persoon, vaker ben ik dat, wordt doorontwikkeld. En dan ben je in je eentje en je bent niet betrokken geweest bij al die keuzes. Dat kan voor problemen zorgen, dat sowieso op het moment dat je de zaken ontwikkelt heb je gewoon bugs. Het is gewoon standaard, niemand schrijft bugvrije code. Als deze code die je schrijft ook niet aan verandering is onderhevig, dan is het moeilijker en lastiger om dit te veranderen. Als je niet al een beetje van tevoren rekening houdt met dat er in de toekomst nog wat bij gaat komen, dan kan als een klant iets vragen van ik wil iets erbij hebben, dan kan het al voor problemen zorgen. Er werden misschien ineens vier dagen mee bezig in plaats van twee dagen. Als je dat van tevoren ook niet een beetje de meerekening houdt, dan ben je misschien ook geneigd sneller, dan kan het in Cornice even een short kunst om te nemen. Teams veranderen, het is nu eenmaal zo. De designen die het heeft opgezet, die heeft een mooi sketchbestand gemaakt.  Daar wordt wat ontwikkeld, vervolgens wordt er mondeling, wordt er wat afgesproken dat de buttons toch geen 20 pixels zijn, maar 10 pixels. En het sketchbestand blijft gewoon hetzelfde. Dus hoe ga je daarmee om, want die designen, die zit niet meer op het team, ik weet daar niet vanaf. Zo kan je een beetje chaos krijgen. Hier, dit is een lange sheet, dan moet je wel even een beetje spieken. Bij doorontwikkeling wordt dit ook eigenlijk allemaal een beetje erger, omdat je al die verschillende aspecten en rekening mee moet houden. En uiteindelijk kan de conclusie zijn dat sommige developers gewoon zeggen van ja, ik wil niet meer aan het project werken, want dit is zo'n chaosproject en alles wat ik aanraakt valt weer om. En dat is hetgeen en wat we proberen te voorkomen in de loop van de tijd. Dat is een beetje het landschap, wat ik probeer te schetsen waar wij mee te maken hebben gehad en waar we hebben voor gekozen dat we wat aan gaan doen om dat te veranderen. Zelfs slecht de code kan functioneren, maar zoals ik al zei, als je het niet makkelijk kan veranderen, dan dat het eigenlijk erger, dat iets een langzame query is, is prima. Het is slecht, maar die kan je eenvoudig optimaliseren. Maar als heel het project een chaos is, dan kan dat gewoon echt de nek slag zijn. Mijn eerste goede spreekmoord dus. Situatie schets. Website Financial Focus die we hebben gebouwd voor ABN. Het zijn twee pagina's die ik even laat zien om de voorbeelden die ik in de presentatie laat zien, dat je een beetje contactseks, een beetje referentie hebt. Het is een financieel platform voor ABN waarop ze allerlei dingen posten met omzet, allemaal dingen waar ik me beleg, ik hou me allemaal geen, niet meer bezig, maar het is wel een heel leuk project geweest. Voor een site onderwerp is het best wel een leuke site geworden. Verschillende blokken, ze hebben nieuwsitems. He, je hoorde eens te gaan. Ze hebben verschillende nieuwsitems. Ze hebben video's, het is een beetje afgekapt, maar video's van 5 minuten of 10 minuten gewoon nieuwsberichten, ze hebben bepaalde dossiers. Het ziet er ook, het lijkt allemaal op elkaar, maar het zijn net allemaal andere items. Verschillende onderwerpen, je kan je inschrijven voor een nieuwsbrief.  Weet je erom die video's? Dit is het testdata, maar het is een leuk platform voor hele saaie informatie. Je hebt ook zelfs magazines, ze brengen ook magazines uit, die komen ook op de website te staan. De detailpagina, het is geen fancy pensie, allemaal mooie dingen erbij, gewoon data, informatie, knoppen die de klant heel graag wilt, maar niemand gebruikt. Moeten erbij. Dit is ook een onderdeel waar ik het over ga hebben in een voorbeeld voor mij. Ik had niet verwacht dat dit gebruikt ging worden, maar er zijn gewoon mensen die nog steeds zeggen nee, ik vind het een goed artikel en het kan waarschijnlijk gewoon lekker anoniem, 5 sterren, 4 sterren. Maar daar begint ook gelijk het eerste probleem. De non-monitulaire aanpak is dat je op je detailpagina content hebt en dan heb je die sterren daar staan. Wat wij hebben gedaan, we hebben een plugin gepakt, goede rating plugin die we vaker gebruiken en die hebben we ingezet. In dit geval kan je met je muis overgaan en dan heb je een onclick en dan kan je gelijk een rating geven. En het is ook gelijk een tone hoe wat de rating is in één. Dus het is allemaal eigenlijk heel veel functionaliteit in één geproppt. Dat is gelijk eigenlijk ook wel een probleem, want al dat in elkaar geproppt, dan wat nou als de vraag komt, ik wil op de archiefpagina, wil ik bij elk nieuwsbericht, wil ik ook de rating tone. Ja, dan denk je ja, dan doe ik die shortcode of die functie roep ik daar aan. En dan vervolgens kan je hier ook gaan opklikken om dat ding een rating te gaan geven, terwijl het eigenlijk iets statisch is. Nou ja, dat wil je niet. Maar het is een plugin, dus moet je wel kijken of dat allemaal uit elkaar getrokken is of dat uit elkaar te trekken valt. Oké, je mag geen rekening meegaan aan het begin. Dus kan het nog wel erg worden, want ze wil het opsplitzen. Je kan comments achterlaten en daar je ratings geven. En dit is gewoon een statische, net als deze. Als je plug-in niet, zeg maar, een modulaire opgebouwd is, dat je dat allemaal los kan opsplitzen, dan moet je of een nieuwe plugin gaan zoeken of heb je weer data die je moet migreren.  Als je een beetje rekening houdt dat een website aan verandering onderhevig is, dan kan je dit voorkomen. Maar dit zijn gewoon situaties, een heel simpel dingetje, sterretjes. En dan loop je altijd zo iets aan. Een volgende ding issue waar ik ook wel tegenaan. Dit is een project. Dit loopt iets van drie, vier jaar, dat hebben we overgenomen. Overal buttons, echt. Dit heb ik een weekje online laten staan. Die zelfs ongesteld. Dat was een foutje voor mij. Hier zit een board tussen. Hier zit een shadow op. Dit pelkje is wel mooi, maar deze is cursief en deze niet. Het is allemaal andere verschillende soorten HTML, verschillende CSS-klassens, verschillende bronnen waar het allemaal wordt gedefineerd. Ik heb er wat aan gedaan. Een derde van al die buttons, die hebben we gewoon weggehaald. En nu hebben we gewoon een wat consistentere slide. En dit is allemaal door ontwikkeling. We hebben het overgenomen, verschillende designers, een stagiëre die ontwerpt een landing-page of een klant die vraagt, ja, ik wil hem toch even iets groter hebben dan die uitzondering. En dan verander je de padding en dan wordt het daar niet meegenomen. Als je daar niet op let, als je daar niet van bewust bent, als je iets aan het bouwen bent, als je aan het uitbreiden bent, dan kan dat allemaal gebeuren. We hebben een paar opties. Wat hebben we er aan gedaan om dit te voorkomen? Stiekem toch een quick fix en doorgaan. Wat is een reden? Weet iemand een voorbeeld geven van wat een reden zou zijn dat je toch eventjes snel even het goed hekt. En eventjes dan live set en klaar en niemand omkijkt. Tijdsgebrek, dat is een hele valide. Dat lijn, donderdag moet het live, want er is een enorme campagne en moet gefix worden. Nog iemand iets? Geld is ook zo iets. Ja, sorry, we hebben geen budget voor je om die 30% van die buttons weg te gaan slopen. Dus dan leven we maar met daarmee. Wat wij, waar wij wel eens blij mee zijn, dat is, oh, dat verrijf je, de intenteur. Ik loop nou een beetje te fratzen. Dat is, volgende maand krijgen we toch een nieuwe website. Dat is met de Financial Focus website, is dat geweest.  Het was een beetje lastig om te onderhouden, maar we wisten dat we over drie maanden een hele nieuwe rewrite mochten doen. Dat is ook op die manier aangepakt. Dus dan is het gewoon een hele valide optie om te hebben. Onderdelen hij schijven zoals wat ik net zei met die buttons. Als je dat constateert, dat het een pijnhoop is, geef het dan aan. Maak het niet alleen jouw probleem als die vellepen zijn. Oh, het is een drama. Ga naar je projectmanager of ga naar je klant. We zijn al vier jaar bezig, we zijn al twee jaar bezig, maar we hebben even een investering nodig om het onderhoud weer makkelijker te maken. Praat met andere mensen hierover. Dat er ook technische legacy in zit en dat je het liever wilt oplossen. Misschien zegt hij, ja, ik heb nog wel een budget over waar ik dit graag voor wil doen, want mij is het ook opgevallen. Het is ook voor mij een doorn in het oog. Dus alleen een onderdeel schijven is echt wel een goede optie. Zoals ik al net zei, compleet opnieuw beginnen. Dat gebeurt niet vaak, maar we hebben best wel al iets nu. Sinds ik bij Level Level werk zijn er al wel echt van drie, vier projecten die eigenlijk vanaf Scratch weer opnieuw gebouwd worden. Dat komt even schillende reden. Dus ze hebben een nieuwe huisstel en dan moet de website ook mee. En dan zeg je, ja, dan kan ik het sneller en beter als ik hem helemaal vanaf Scratch doe. Maak dat ook een optie, in plaats van dat je op die gammele basis blijft door borduren. Je kan ook kiezen van, oké, misschien neem... Ja, ik ben geen voorstander daarvan dat je zegt van, ja, misschien neem ik wat voor mij... voor mezelf kwartijd als agency-zijnde of als freelancer. Probeer altijd wel dat, ja, betaald te doen. Want, ja, als je dat met elke website gaat doen, dan loop je gewoon op een gegeven opleeg. Schone starten. Dat is, als je een project, als je vanaf volgende week of vanaf volgende maand een nieuw project start, denk dan, ik wil dit op een modulaire manier opzetten. Als je vanaf het begin al die denkwijze aanhoudt dat je iets kan uitbreiden, dan kan dat voor de toekomst alleen maar meer provide zijn. Dat zijn de opties.  Enkele van de oplossingen die wij toepassen om het modulaire te krijgen, dus dat clean starten, dus de laatste optie, is separation of concern. Elk onderdeel laat je zijn eigen verantwoordelijkheid hebben. Je HTML is je HTML, je CSS, dat is al iets wat je standaard doet. Maar soms kom ik ook nog wel eens projecten tegen waarin je in een single.pap, een van de wp-query, hebt staan en daar overheen loopt om gerelateerde artikelen te staan. Schijt dat allemaal. Doe het des notes in functies. Wij hebben het voordeel dat we met Clarkson werken, dat is een templating engine, waardoor die separation of concern eigenlijk al een beetje geforceerd wordt. It's open source. En wij wilden niet meer in de gelegenheid zijn om toch in die single.pap stiekem nog eventjes een loopje te bouwen. Door twikten gebruiken, door controllers, dat MVC-model te gebruiken, voorkom je dat je ook gaat, rommel gaat krijgen. Deze aanpak hadden we al gezien, dat het je ineens allemaal verschillende zaken hebt. De modulaire aanpak dat wij dan adviseren is proberen je HTML in een losbestand te krijgen. De JavaScript, die heb je ook al los. En de data, eigenlijk de data source, die trek je ergens los vandaan. Als je dat allemaal tegen elkaar aangegooid, dan krijg je je rating die je hier tegenaan kan zien. Op het moment dat je eigenlijk in de basis merkt dat je je databron, je HTML en je JavaScript al, als je merkt dat je dat al gaat entengelen, mixen, dan voel je al aan je water dat je een probleempje in de toekomst kan krijgen. Dit is gewoon als je dat met een review doet, die statische, als je nu in de laatste situatie alleen een statische sterkje zult laten zien, dan heb je eigenlijk alleen maar deze twee nodig. En dan hoef je ook heel de JavaScript niet meer in te laden. Daar heb je ook geen zorgen meer om te maken. En dan voorkom je eigenlijk alweer wat meerdere issues in de toekomst. Dus meerdere losse onderdelen is nog steeds één groot geel. Dus dat grote geel zit er nog wel in. Het zijn alleen losse componentjes geworden. Veel situaties bieden dan de gelegenheid dat je alleen maar op dat ene onderdeel hoeft zorgen te maken.  Dus als jij die sterretjes naar duimpjes moet omzetten, dan hoef je alleen maar op één plek die duimpjes aan te passen. Hallo. En dat zorgt voor ademruimte. Dat is minder werk. En het verandert gelijk op alle drie de plekken. Het verandert van een sterretje naar een duimpje. Dus de oplossing is denk in componenten. Stopdenken in, we hebben een landingspagina en voor deze landingspagina daar staat een blok in, want over een jaar zegt hij, of over een maand, dit blok is mooi, die wil ik ook op een detailpagina hebben. En dan heb je hem helemaal specifiek gebouwd op de landingspagina. Dus probeer je te denken in kleinere stappen. Je hebt een formulier, dat formulier bestaat ook weer uit kleinere onderdelen, zoals buttons. Kijk uit dat je niet te diep gaat, dat je te veel dingen gaat opsplitzen, want dan maak je het misschien weer over complex. Het is een beetje wennen. Ik heb er best wel even over gedaan om te kijken van dat ik over enthousiast alles ging opsplitzen. Dus ik heb eigenlijk de moeite lag voor mij om rustig aan te doen en niet alles te complex maken, omdat het kost ook tijd, een beetje om met mogelijkheid op te splitsen. En dat was enthousiast al, vertel ik zo nog verder over. Ik heb een paar testjes om te kijken of iedereen die al een beetje wat... Shit, nu heb ik het al verhaal. Zijn deze twee componenten in de basis hetzelfde? Iedereen die je ja zegt mag even staan, dan gaat het gelijk een beetje bloeten weer verloeien. En heb je dit allemaal gezegd omdat je ja zag? Nee. Het antwoord is inderdaad, ja. Eén is klein, ander is groot. Het lijkt niet hetzelfde, maar onder water deelt deze twee componenten ik denk 80% van dezelfde code. Dus als ik nu hier in deze titel wat wil toevoegen, bijvoorbeeld een puntje, net zoals met je iPhone, dat iets geupdate is, je app, dat je zo'n rondje erachter ziet staan, dat willen ze hier gaan krijgen. Dan hoef ik dat alleen maar voor deze titel hier toe te passen en dan cypelt dat door heel de website helemaal heen, overal waar die blokjes worden gebruikt, wordt gewoon dat bolletje erachter gezet. En ik ga nu een beetje uitleggen hoe komt dat dit in de basis dezelfde zaken zijn. Overerven met CSS-klassers.  Wie heeft er wel eens met Bootstrap gewerkt, of een andere framework? Dat is prima werk. Wij noemen deze zaken een teaser. Alles in de basis ziet er zo uit, maar soms hebben we wel eens, zag je, een groot blok en een lijstje aan de rechterkant. En dan hoef ik alleen maar een klaster op te zeggen, teaser lights, en dan wordt hij groter, dan krijgt hij zo'n viepje erbij, dan verdwijnt de categorie hier naartoe, komt hij anders eruit te zien. Dat is iets wat superkrachtig is, want deze plaat op de achterkant en de positie dat hij ondergeelijnt is, is allemaal generiek voor beide blokken. Dus als ik daar iets aan wil aanpassen, hoef ik dus in die teaser-klas, pas ik dat dus aan. Dat was laatst iets met een of andere rare IE, Elefbug, en dat hoefde we dus maar op één plek hoeven we dat aan te passen, en niet gekopieerde CSS, dat ik voor teaser en teaser large heb, want het was gewoon één en hetzelfde geheel. Dus probeer dat, alles wat generiek is, in een eigen CSS-klasse te plakken en alles wat een uitbreiding is op die klas, wat eigenlijk de uitzondering is, zet dat dan hierin. Dit voorbeeld, als je inderdaad naar boestrap kijkt, is super snel, er zit Tubbo in CQD. Dit is in de basis gewoon precies hetzelfde. De standaard is een alert, die zorgt ervoor dat er een shadow in zit, dat er een bepaalde fontsize is, volledig breedte, en je zet alert succes erop. Dan wordt die groen alert, deens je erop en is die rood. Als je even niet meer weet van hoe je dat zou moeten aanpakken of hoe je iets zou kunnen aanpakken, kijk dan even naar mijn frameworks, hoe die dat ook weer doen en gewoon beter goed gejat dan slecht bedacht. Is dat nou mijn tweede hoe je spreekt, of leer ervan. Het is een succesvolle methode, een succesvolle gedachte gang. Waar hebben we dat bij ons een stapje verder genomen? Elk van zo'n blok is een apart custom post type. We hebben gewoon een normale post, we hebben de custom post type video en custom post type magazine. Die hebben we ook net weer even wat andere stijlingen.  Hier zit dan dat timetje zitten bij, hier zit geen categorie en daarmee dat kan je of met je CSS kan je dat simpelweg op display dan zetten en dan heb je dat al gefixed. Een hele eenvoudige maar krachtige manier om wat blokken, wat componenten te tweaken. Dit hebben we qua lay-out nog verder getrokken en hebben we het opgesplitst. We hebben de elementen en wat stijlingszaken hebben we losgetrokken eigenlijk van de lay-out. Die opsplitsing zorgt ervoor dat we met een 1x1 is gewoon een vierkantje en als iets 2x1 moet worden qua lay-out, dan plak je die klas erop 2x1. Zo kan een normale post van 1x1 ook eenvoudig veranderd worden naar 1x2. Dus ook dat opsplitsen dat is ook weer in losse onderdelen dat je niet een bepaalde visuele eigenschap vermengt met een lay-out-eigenschap. En als je daarna kijkt, dan denk je dit moet ik gewoon zo oplossen. Het gaat even zitten, zonder je zelf afgaan neem de tijd ervoor om het design te analyseren of er van zulke elementen van zulke situaties erin voorkomen. Wij hebben ook het voordeel gehad dat onze design ook heel erg goed heeft nagedacht over dagelijke situaties dat je wel overlapp had in situaties. We gaan even kijken waar ik ben. Deze flexibiliteit binnen CSS om dat op te kunnen splitsen daar zijn eigenlijk 2 basisregels voor wat ik in m'n 8e hoofd hou. Eén van is het is iets wat iedereen eigenlijk bijna wel doet al, maar je echt gebruikt geen id's. Ik zat laatst de wordcamp Rotterdam website te maken te stijlen en een plug-in die had iets gesteld op de id, hashtag dingetje. Het was zo lastig voor mij om dat te overschrijven. Ik moest gewoon importend gaan werken om iets te kunnen gaan stijlen. Dat maakt het gewoon moeilijker. Probeer dat zelf dus ook te verkomen als je dat bouwt. En de tweede eigenlijk nog wel het meest belangrijke is nest niet diep. Ik had er net het voorbeeld van dat je op een landingspagina aan blok had dat je daar specifiek een bepaald button hebt gesteld. Dit is veelste diep. Page home, teaser, video en dan nog eens een keer zit daar een buttonplay in.  Dat ding kan, die buttonplay is eigenlijk het is een button of je kan er een extra stijl op zetten dat het een button videoplay is en dan krijgt hij een andere styling. Dan heb je dezelfde beheefje. Het is ook veel makkelijker om dit te overschrijven dan deze, wat ik niet kan uitspreken, specificity dat zit in het einde van de slide zit er een linkje daar en voorbeeld van wat het probleem is wat het probleem hiermee is proberen metodes die mij hebben geholpen met deze denkwijze zijn dingen zoals smack, Adam, CSS of BAM wij proberen zelf nu met elk project proberen we nu BAM te hanteren om onze CSS een naming convention aan te houden. Een voorbeeld wat niet verplicht is, maar wel handig was is gebruikt les of sas want je kan daar ook weer je bestanden je CSS ook weer opsplitsen. Het is niet verplicht maar het heeft ons heel veel geholpen ik heb nog 5 minuutjes inderdaad object georienteerd programmeren. Dit is wat niet standard met WordPress eigenlijk geforceerd wordt je bent heel vrij om te kiezen hoe je jezelf je eigen projecten opbouwd. 