Torstaina, 1.10.2020

WordPress-kehitys päivittäisenä osana arkea Рnäin kehitykseen käytetty aika ei syö asiakasprojektien budjettia

Me Dudella emme ole rajanneet kehittämistä mihinkään, eli työkalujamme ja toimintatapojamme voi kehittää milloin vain. Usein kehitys on päivittäistä. Tässä kohtaa joku saattaa kysyä, että eikö tällainen touhu syö pohjaa hyvältä liiketoiminnalta. Mites ne asiakasprojektit? Me näemme asian toisin.

Tämä kirjoitus saattaa sisältää vanhentunutta tietoa, sillä se on julkaistu yli 2 vuotta sitten.

Moni toimisto ilmoittaa k√§ytt√§v√§ns√§ aikaa kehitykseen, kouluttautumiseen tai opiskeluun tietyn tuntim√§√§r√§n tai prosentuaalisen numeron verran viikossa tai kuukaudessa. Olen jopa kuullut sellaista, ett√§ joissakin firmoissa kiellet√§√§n omien ty√∂tapojen kehitt√§minen, jotta saataisiin jokaisesta ty√∂ntekij√§st√§ viimeisetkin mehut irti ”rahaa tuoviin projekteihin”. T√§m√§ johtaa usein siihen, ett√§ asiat eiv√§t kehity tarpeeksi ja hommia tehd√§√§n vanhaan totuttuun tapaan siksi, koska aika ei riit√§ muuttamaan mit√§√§n.

Me Dudella emme ole rajanneet kehittämistä mihinkään, eli työkalujamme ja toimintatapojamme voi kehittää milloin vain. Usein kehitys on päivittäistä. Tässä kohtaa joku saattaa kysyä, että eikö tällainen touhu syö pohjaa hyvältä liiketoiminnalta. Mites ne asiakasprojektit?

Me näemme asian toisin. Projektin aikana tulleet kompastuskivet on tärkeää laittaa heti kehityslistalle ja mielellään jopa kehittää pikimmiten alta pois, koska ne säästävät aikaa ja vaivaa tulevissa vaiheissa tai seuraavassa projektissa. Jos joka kerran hakkaa päätä seinään samojen ongelmien kanssa, joka hidastaa tekemistä, miksi niin pitää jatkaa?

Omien toimintatapojen jatkuva kyseenalaistaminen pakottaa kehittym√§√§n positiivisella tavalla. Linux-maailmasta tuttu ”Don’t update what ain’t broken” on hyv√§ s√§√§nt√∂, eli ei p√§ivitet√§ sellaista mik√§ toimii jo parhaiten, mutta jos selke√§sti parempi vaihtoehto l√∂ytyy tai joku yksinkertaisesti t√∂kkii, on syyt√§ muuttaa tilannetta.

Mitä asioita Dudella sitten kehitetään?

No kaikkea, totta kai! Suunnittelun puolella kehitystä on tapahtunut mm. yhteisten toimintamallien puolella. Vaikka Adoben tuoteperhettä käytetäänkin, on siirrytty pois tavanomaisesta Photoshop-leiskaamisesta XD:seen ja Sketchiin. Kehittäjät saavat SVG-kuvakkeet ja muut ulkoasujen komponentit suoraan Zeplinistä ulos, asiakas pääsee selamaan leiskoja valikoita myöten Invisionissa ja muutoksia pääsee tarkastelemaan tarvittaessa Abstractissa. Suunnittelijat sparraavat toisiaan ja kehittyvät päivätasolla niin että jokainen leiska on edellistä parempi.

Kehittäjäpuolella tapahtuu kehitystä niin työkaluissa kuin varsinaisissa toimintatavoissakin. Avataanpa devauksen kehityskohteita seuraavaksi. Varoituksen sana, saattaa mennä tekniseksi.

Kehitysympäristöt

Dudelle on tärkeää että eri kehitysvaiheet pysyvät omissa ympäristöissään. Rakentelu ja testaus tehdään paikallisesti omalla koneella käyttäen jaettua tietokantaa siten että kaikki kehittäjät saavat samat sisällöt WordPressiin. Versionhallinta pysyy lapasessa Gitin avulla. Paikalliseen kehitykseen käytetään toistaiseksi kahta mallia, oma vagrant-kehityskoneemme joka on nopeampi pystyttää ja Macin natiivit komponentit, jotka tarjoavat suoraviivaisuutta ja suorituskykyä.

Kun sivusto siirtyy siihen pisteeseen ett√§ sen saa asiakkaalle, se siirtyy testiymp√§rist√∂√∂mme vaiheessa.fi (domain valittiin siksi, ett√§ siit√§ n√§kee heti mist√§ on kyse, sivustoa joka on ”vaiheessa” ja piilotettu maailmalta salasanan taakse ei tule vahingossakaan jaettua someen). T√§√§ll√§ asiakas n√§kee edistymisen ja pystyy samalla sy√∂tt√§m√§√§n sivustolle oikeita sis√§lt√∂j√§.

Kun sivusto on julkaistu, sivusto käännetään luonnollisesti pyörimään sen oikeaan domainiin. Jos jatkokehitystä on tiedossa, jatketaan kehitystä paikallisesti samalla kun liveversio sivustosta elää omaa elämäänsä. Näin pysytään kärryillä muutoksista niin ettei mene mielenterveys samalla.

WordPress-kehitysymp√§rist√∂n nivoo yhteen dudestack, joka pohjautuu alunperin amerikkalaisen Roots-firman bedrockiin, mutta on siit√§ vuosien varrella kehitetty omaksi uniikiksi ty√∂kalupakikseen. Dudestack sis√§lt√§√§ kaiken mit√§ tarvitsee onnistuneen WordPress-projektin kehitykseen ja sen p√§√§lle pohjautuu joka ikinen Duden projekti. Aloittaessa komentoriviohjelmisto py√∂r√§ytt√§√§ projektin k√§yntiin, asentaa uusimmat p√§ivitykset, kehitysty√∂kalut, ja jopa ”kliksuttelee” automaattisesti WordPress-administa turhakkeet pois ja s√§√§st√§√§ kymmeni√§ tunteja asioista, jotka muuten pit√§isi tehd√§ joka kerta k√§sin.

Koodieditorit ja automaatio

Dude on siirtynyt hiljalleen pois Sublime Text -maailmasta Visual Studio Codeen. Sublimen asetukset l√∂ytyv√§t my√∂s GitHubista, VSCoden asetukset allekirjoittaneen alta. Koodatessa on t√§rke√§√§, ett√§ koodieditori ilmoittaa virheist√§ reaaliajassa ja korjaa sisennykset. Oma editorini n√§iden lis√§ksi muunmuassa seuraa koodaamiseen k√§ytetty√§ aikaa, n√§ytt√§√§ v√§riarvot oikeasti v√§rein√§, n√§ytt√§√§ reunuksilla mist√§ tagi alkaa ja mihin se loppuu, tekee koodista n√§tti√§ automaattisesti tallentaessa ja mik√§ t√§rkeint√§: N√§ytt√§√§ hyv√§lt√§. VSCodeen saa nyky√§√§n lukemattomasti lis√§osia, joilla laajentaa toiminnallisuutta omiin tarpeisiinsa. Editorin saa jopa puhuen tsemppaamaan √§√§neen tai koodin voi tuikata tuleen kirjoittaessa (katsos kun ollaan niin ”tulessa”, tajusit varmaan?).

Koodieditoreja ja editorissa tapahtuvia asioita kehitetään lähes päivittäin. Itse plärään mielenkiintoisia plugineja aina silloin tällöin ja otan testiin tarvittaessa. Helpottaa elämää huomattavasti kun silmä erottaa heti asiat ja jopa kertoo missä kohtaa tulee mokattua. Ei tarvitse koodata laput silmillä. Joskus muinoin turhauttavinta ja hermoja raastavinta oli hakata päätä seinään koko päivän kun ei ole vain yksinkertaisesti huomannut missä kohtaa on tehnyt näppäilyvirheen.

Mutta mitä tapahtuu tiedoston tallentaessa? Gulp.js lähtee rullaamaan tehtäviään läpi, eli toisinsanoen helpottamaan meidän urakkaa. Modernista SCSS:stä ja JavaScriptista käännetään selaimelle ymmärrettävää ja optimoitua tiedostoa, selaimille päivitetään muutokset reaaliajassa niin pöytäkoneelle kuin mobiililaitteillekin synkronoidusti ilman että selaimen päivitä-nappia tarvitsee itse hakata pitkin päivää. Gulpista päivitimme vihdoin ja viimein tämän vuoden puolella version 3 versioon 4, joka toi lisää paljon uusia ominaisuuksia ja ennen kaikkea nopeutta. Task runnereita ja muuta automatiikkaa päivittelemme avoimena myöskin GitHubissa devpackages nimen alla.

Koodaamiseen käytetty ohjelmointikieli

Kyll√§, vaikka verkkosivuja tehd√§√§nkin, puhutaan ohjelmoinnista. Meid√§n alalla on ohjelmoinnissa on kahta suuntaa, visuaalinen (ns. front end) ja toiminnallinen (back-end) koodi. Visuaaliseen eli puhekielell√§ ”fronttiin” k√§yt√§mme Sassin SCSS-versiota (”Sassy CSS”, Synthatically Awesome Style Sheets), joka n√§ytt√§√§ samalta kuin CSS, mutta laajentaa t√§m√§n perinteisen koodikielen toiminnallisuutta parempaan suuntaan.

SCSS:√§√§ voi esimerkiksi kirjoittaa toisen selectorin sis√§√§n, jolloin tiedostoista ei muodostu kilometrin mittaisia. SCSS tukee my√∂s ohjelmallista koodia ja funktioita (ns. ”mixineit√§”), joilla saa esimerkiksi nopeutettua visuaalisten elementtien v√§listyksien tai kokojen laskemista tai tuotua keskelle leiskaa kokonaisia elementtej√§ aivan eri puolelta koodia tarvitsematta kirjoittaa samaa uudestaan. Vaikka perinteisess√§kin CSS:ss√§ on olemassa jo muuttujat, SCSS toi t√§m√§n toiminnallisuuden ensimm√§isen√§ mukaan. T√§m√§ tarkoittaa suomeksi sit√§, ett√§ jos ennen SCSS:√§√§ haluttiin vaihtaa ulkoasuun vaikkapa br√§ndiv√§ri joksikin toiseksi, t√§ytyi koodarin k√§yd√§ joka ikinen tiedosto l√§pi, jossa v√§ri oli asetettu. Muuttujan kautta riitt√§√§ ett√§ v√§rin vaihtaa yhteen kohtaan ja ta-daa, se p√§ivittyy joka paikkaan miss√§ v√§ri√§ on k√§ytetty.

PHP-puolella ei olla l√§hdetty kikkailemaan ns. ”templating-kielill√§” kuten Laravel Bladella, koska haluamme toiminnassamme kunnioittaa WordPressin standardeja ja tapaa tehd√§ koodia. Viime aikoina vaihdoimme kuitenkin tapaa uudempaan ja kehittyneemp√§√§n suuntaan siirtym√§ll√§ Namespace-k√§yt√§nt√∂√∂n. T√§st√§kin l√∂ytyy dokumentaatiota GitHubimme alta.

JavaScript-puolella olemme siirtymässä pois jQuery-maailmasta Vanilla JS:ään, eli alkuperäiseen JavaScriptiin. Vaativammissa toiminnallisuuksissa käytämme tarvittaessa Vue.js:ää.

Verkkosivuprojektien pohjana maailmankuulu Air-light -aloitusteema

Pohjana maailmankuuluksi noussut WordPress-aloitusteema Toteutamme kaikki sivustomme oman minimalistisen aloitusteeman (sanotaan startteriksi) päälle. Teema on nimeltään air-light, eli kevyt kuin ilma ja se on vapaassa jakelussa GitHubissa. Teeman ideana on toimia superkevyenä ja helppona pohjana projektin aloitukselle, sillä se sisältää ainoastaan pelkistetyt tyylit, eikä mitään turhaa. Siivottavaa ei ole vaan pääsee suoraan kehittämään brändin mukaista matskua.

Vuosien varrella timantiksi hiotun startterin koko on ainoastaan muutamia kymmeniä kilotavuja ja siksi se varmistaa että kaikki sen päälle kehitetyt sivustot ovat supernopeasti latautuvia ja jo valmiiksi optimoituja. Teemassa on otettu huomioon saavutettavuus ja käytettävyys ja se sisältää asioita, joita joutuisi rakentamaan päivätolkulla, jos aloittaisi tyhjästä. Teeman GitHub-sivun dokumentaatiosta voit lukea tarkemmin mitä teema sisältää ja mitä WordPressissä normaalisti mukaantulevia turhakkeita on karsittu pois.

Teemaa ladataan käyttöön satoja kertoja viikossa ympäri maailman ja sen on lisännyt tällä hetkellä suosikiksi 185 alan kehittäjää. Tästä työstä tekee ehdottomasti kivointa avoin lähdekoodi ja koko muun maailman kanssa yhdessä kehittäminen, kärkiesimerkkinä esimerkiksi parannukset WordPress-teemaan, joita saa toiselta puolelta maapalloa (tässä vaiheessa erityiskiitos Michael Bournelle sinne Calgaryyn, joka on tuonut Airiin paljon upeita juttuja).

Air-light on kasvattanut vuosi vuodelta suosiotaan erityisesti siitä lähtien kun se esiteltiin alan suurimmissa verkkolehdissä Hongkiatissa ja Speckyboyssa vuonna 2017. Teema päivittyy lähes päivittäin GitHubiin, mutta löytyy myös WordPressin virallisesta teemahakemistosta.

Lisäosat

Dude kehittää omista lisäosistaan aktiivisimmin air-helperiä. Air-helper laajentaa Air-light teeman toiminnallisuutta mm. tuomalla mukanaan kielikäännöstoiminnallisuutta, lazy load -lataustoiminnon (eli kuvat ei lataudu kuin vasta sitten kun kohdalle selaa), poistaa WordPressin näkymiä joita ei tarvita (esim. käyttäjät), siivoaa juttuja kuten turhat ilmoitukset wp-adminin puolella ja niin edelleen. Lisäksi lisäosa sisältää joitakin Duden ylläpitoasiakkaille tarkoitettuja helpotuksia kuten yhteydenotto asiakaspalveluun WordPress-hallintapaneelin kautta.

Muista lisäosista kehityksessä on joitakin avoimia lisäosia kuten mainoksille tarkoitettu lisäosa ja luetuimmat kirjoitukset -lisäosa. Muista käyttämistämme lisäosista on avattu erillisessä kirjoituksissaan, joskin osasta noistakin on jo luovuttu, sillä kriteerimme kolmannen osapuolen lisäosille on korkea. Reaaliaikaisimman tiedon oletuslisäosistamme saatkin katsomalla koodia.

Eikä siinä vielä kaikki!

Nämä ja koko firman asiat Dude päivittää säännöllisesti omaan operointimanuaaliinsa, joka löytyy julkisena niin koodinkin osalta kuin netissä osoitteessa handbook.dude.fi. Käymme manuaalia joka viikon maanantaina läpi yhdessä varmistuaksemme siitä että se pysyy ajan tasalla.

Kun n√§it√§ asioita hioo p√§iv√§tasolla, ei kulu ”ylim√§√§r√§ist√§” aikaa kehitykseen. Vertaankin t√§t√§ asiaa usein tiskikoneen tyhjent√§miseen. Kun koneen tyhjent√§√§ heti, ei tiski√§ kerry, koska likaiset astiat voi laittaa suoraan koneeseen. Sykli pysyy sujuvana. Jos taas tiskikonetta ei tyhjenn√§, astiat kertyv√§t ja kertyv√§t. Kun niit√§ alkaa sitten latomaan paikalleen, tuhrautuukin hommassa paljon aikaa, vaikka ty√∂m√§√§r√§ on t√§ysin sama. Kehitysty√∂ menee juuri n√§in, kun hommat tekee lennosta, nopeutuu koko workflow, eik√§ tarvitse j√§√§d√§ jumiin tai sy√∂d√§ asiakasprojektilta aikaa.

No, miten on, startataanko projekti yhdessä?

Lue myös nämä

WordPress verkkosivualustana

Tällä hetkellä WordPress on kaikista suosituin alusta, jolle verkkosivuja julkaistaan (noin neljäsosa kaikista maailman sivustoista). Aina näin ei ole ollut.

Duden digitiimi WordCamp Europessa – kuulumiset Wienin reissulta

Juhannuksena järjestettiin tähän mennessä maailman suurin WordCamp (=WordPress-tapahtuma) nimeltään WordCamp Europe, jossa Duden tekninen jaosto eli minä (Roni) ja Timi oli mukana alusta loppuun saakka. Jyväskyläläisten remmissä mukana reissasi myös naapuritoimiston MEOMin Natanael Sinisalo.

WordPress-verkkosivut Рvieläkö joku kysyy miksi?

WordPress on maailman suosituin alusta verkkosivuille ja t√§n√§ vuonna 2016 k√§ytt√∂aste l√§hentelee jo kolmasosaa maailman nettisivuista (26,6%). WordPressist√§ on kirjoitettu kaikenlaista liirumlaarumia, mutta my√∂s hyvi√§ kirjoituksia, esimerkkein√§ menk√∂√∂n Contrastin viisi syyt√§ miksi valita WordPress julkaisualustaksi, WP-Palvelun viisi syyt√§ valita WordPress ja Sofokuksen WordPress sivut yritykselle ‚Äď 5 ajankohtaista syyt√§ miksi.