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ä?
