Torstaina, 21.2.2019

Parasta koodarin työssä Рmatkani koodiapinasta WordPress-ammattilaiseksi

Noin kuusi vuotta sitten (ty√∂)el√§m√§ni mullistui kun pistettiin oma yritys pystyyn. Sai tehd√§ asioita ”omalla tavalla”, vapaana kuin taivaan lintu. Joku saattaa kuvitella, ett√§ WordPress-verkkosivujen parissa ty√∂skentely on vain ”neppailua” tai ”puuhastelua”, mutta tosiasiassa se on ammattimaista ty√∂t√§, tekniikan kehitt√§mist√§ ja yh√§ enemm√§n ja enemm√§n kannattavaa bisnest√§.

Mutta mik√§ t√§st√§ ty√∂st√§ tekee mahtavan? mik√§ saa liikkeelle p√§iv√§st√§ toiseen ja aiheuttaa spontaaneja ”JES” -huutoja? t√§n√§√§n kerron sinulle siit√§ kaiken, teknisen puolen n√§k√∂kulmasta.

Ensin hieman historiaa.

Ennen oli HTML 4.0, Web 2.0 ja FTP

Olen sen verran web-dinosaurus, ett√§ koodasin t√§ytt√§ h√§k√§√§ jo silloin kun netti√§ k√§ytti vain noin 25 prosenttia suomalaisista. Silloin ei ollut √§lypuhelimia, vaan yleisin resoluutio oli 800×600 pikseli√§, jolle kaikki leiskat tehtiin. Ulkoasuissa sai taiteilla, koska ei tarvinnut mietti√§ kuin yht√§ n√§ytt√∂kokoa. Se oli kuin tekisi printti√§ nettiin. Tavallaan graafikoiden kulta-aikaa.

Alussa netissä haluttiin vain näyttää tekstiä, listata sisältöä ja vähän kuvia. Pääasia oli luettavuus, ei niinkään ulkoasu. Maailman ensimmäinen verkkosivusto on yhä tulilla

Sivustot koodailtiin aluksi p√§√§osin taulukoilla, eik√§ esimerkiksi CSS (koodikieli, jolla tyylittelyt rakennetaan) ollut niin kehittynytt√§ ett√§ oltaisiin saatu py√∂reit√§ kulmia helposti, joten py√∂re√§t muodot rakennettiin niin, ett√§ muodostettiin taulukon avulla jokaiseen nurkkaan pieni solu, jonne upotettiin py√∂re√§n kulman sis√§lt√§v√§ ”palanen”, joka nimettiin esimerksiksi ”vasen-ylakulma.gif” kulman suunnan mukaisesti. T√§m√§ loi illuusion elementin py√∂reydest√§.

GIF oli tietenkin ainoa kuvaformaatti, jolla sai läpinäkyvää taustaa, PNG tuli vasta myöhemmin ja senkin jälkeen kesti kauan ennen kuin selaimet alkoivat tukemaan sen läpinäkyvyyttä kunnolla. Ja ah, ne gif-animaatiot aikoinaan. Saatat muistaa pyörivät @-merkit tai mahtavat Under construction -työmiesanimaatiot. Jännä, että välissä ehti olla ainakin 15 vuotta ennen kuin gif-animaatiot tulivat rytinällä takaisin muotiin.

Pian n√§iden aikojen j√§lkeen vakioitui 1024×768 pikseli√§ ja siit√§ suuremmat resoluutiot n√§ytt√∂jen kehittyess√§. 2000-luvun edetess√§ tablet vaihtuivat hiljalleen diveiksi kun HTML kehittyi pisteeseen, jossa sit√§ oli joku miettinyt sit√§ mukaa kun nettiyhteydet yleistyv√§t, nopeudet ja world wide webin tarpeet kasvoivat. Pitk√§√§n tehtiin tietyn levyist√§ sivustoa ja oletus fontin trendi oli hyvin usein Verdana 11px. Nykymittapuulla kyseinen fontti on niin pient√§, ett√§ sit√§ ei n√§e nykynuoretkaan lukea UltraHD- ja retinan√§yt√∂ill√§√§n.

Viimeistään vuonna 2007 kun Steve Jobs mullisti maailman kosketusnäytöllisillä Internet-laitteillaan, iPhonella ja iPod Touchilla, netti alettiin nähdä uudella tavalla. Pian tämän jälkeen syntyivät CSS-frameworkit ja gridit, eli front-end-kehittäjien omat pohjat web-kehitykseen, sillä monet verkkosivuja tekevät puutuivat siihen, että joka sivusto aloitetaan alusta. Saataville alkoi siis ilmestyä aivan uudenlaisia tapoja tehdä nettisivuja. Näistä ensimmäisiä olivat muunmuassa 960 grid system, joka määritti pohjaksi 960 pikseliä ja sitä seurasivat muut vastaavat kuten Skeleton, Bootstrap ja Foundation.

Helposti p√§ivitett√§v√§t CMS:t tulivat viimeist√§√§n n√§iden muutosten my√∂t√§ muotiin, kuten WordPress, joka perustettiin vuonna 2004 ja sen suosio on ollut nousukiitoa siit√§ l√§htien. Sit√§ ennen asiakkaatkin olivat enimm√§kseen tottuneet siihen, ett√§ joku koodari p√§ivitt√§√§ yhteystiedot suoraan koodiin ja sille siit√§ maksetaan. Jotkut ”hienot itse p√§ivitett√§v√§t kotisivut” olivat l√§hinn√§ korporaatioiden kallis systeemi. Ja olihan sis√§ll√∂nhallintaj√§rjestelmienkin suhteen web tuolloin aika villi l√§nsi. Oli Drupalia ja Joomlaa, hyi.

Vuodesta 2009 eteenp√§in aina t√§h√§n p√§iv√§√§n asti verkkosivujen kehityksen tahti onkin ollut √§√§rimm√§isen nopeaa ja satumaista. Vaikka en koskaan edes ”old-school-koodarina” ole j√§m√§ht√§nyt paikalleen, olosuhteiden my√∂t√§ olen viimeisen kuuden vuoden aikana kehittynyt enemm√§n kuin koskaan koko 20 vuoden koodariuteni aikana.

Siis mitä, miten niin ette enää kehitä nettisivuja Bootstrapilla ja suoraan FTP:llä kaikkien nähtävillä?

Tiedän, että jotkut sitä vielä tekevät. Niin mekin tehtiin vielä vuonna 2013, jolloin uudet työkalut olivat vasta olleet olemassa hetken verran, enkä esimerkiksi itse ollut päässyt tekemään joka päivä ammatillisesti, 24/7 parempaa nettiä.

Kaikki lähti käyttöjärjestelmävaihdoksesta

Myönnetään, Windows esti pitkään kunnollisen webkehityksen. Siksi moni devaaja lähti jossain vaiheessa suosimaan Macceja ja niihin mekin lopulta kallistuimme. Applen tietokoneet räjäyttivät pienen kehittäjän pään, kun tajusi että niillä pystyi tekemään kaiken paljon paremmin, nopeammin ja hienommin.

Sitten vaihtui koodaustyökalut

Notepad++ lensi romukoppaan ja tilalle valikoitui monen kehittäjän suosima Sublime Text. Koskaan aikaisemmin ei tekstieditoriin saanut nättiä ja selkeää värikoodausta, jolla koodaaminen olisi huolellisempaa ja silmille ystävällisempää. Koskaan aiemmin ei editori lähtenyt korjaamaan virheitäsi sitä mukaa kun teet, automaattisesti täydentämään osaa koodistasi ja näyttämään värejä suoraan hexakoodissa.

CSS:n korvasi SCSS, selainikkunan koon muuttamisen korvasi device lab, FTP:n korvasi komentorivi, bootstrapit ja valmiit pohjat korvasivat oma startteriteema ja CSS-framework.

Ennen olin sokea, nyt näen!

Edellisiss√§ ty√∂paikoissa olin tutustunut versionhallintaan, joka oli siihen aikaan SVN. Se oli mielest√§ni kankea ja hankala. Enk√§ muutenkaan ymm√§rt√§nyt aluksi ideaa. Miksi pit√§isi kommentoida jokainen rivi koodia kun voi tehd√§ ty√∂n loppuun asti ja heitt√§√§ vaan nettiin? my√∂hemmin ymm√§rsin, ett√§ jos tulee virhe, on niin k√§tev√§√§ kun voi aina palata taaksep√§in, korjata ongelma ja jatkaa siit√§ mist√§ virhe tapahtui. ”Sokeana” koodaamisen huono puoli oli se, ett√§ saattoi k√§ytt√§√§ tuntikausia aikaa oman mokien korjaamiseen, kun ei ollut mit√§√§n palautuspistett√§, jonka avulla palauttaa projektista toimiva versio.

Git mullisti versionhallinnan ja viimeistään GitHubin löydettyäni olin aivan syvällä koodin maailmassa. Siirsin kaikki projektini profiilini alle ja minua kannusti se, että näen reaaliajassa miten hommat edistyy.

Näin Dudella koodataan vuonna 2019

Kuten alustuksesta k√§vi ilmi, joskus aiemmin projekteja tehtiin suoraan nettiin siten ett√§ pahimmillaan k√§vij√§t n√§kiv√§t miten siell√§ elementit liikkuu joka sivun latauksella kehitt√§j√§n koodatessa. Sittemmin siirryttiin koodaamaan omalla koneella, josta siirretiin valmis tuotos nettiin. Se meni parempaan suuntaan, mutta silloinkin homma oli l√§hinn√§ koodarin n√§peiss√§, eik√§ asiakas p√§√§ssyt katsomaan ty√∂st√∂vaiheessa projektia ollenkaan. Sitten tuli ns. ”staging”-palvelimet, eli testiymp√§rist√∂t, jonne asiakas p√§√§si testaamaan ja sy√∂tt√§m√§√§n sis√§lt√∂√§. T√§t√§ kolmen ymp√§rist√∂n mallia (development-staging-production) nyky√§√§n suositaankin, ainakin me.

Kun Dudella aloitetaan projekti, ajetaan komentorivilla yksi komento, joka kysyy projektin nimen. Sen syöttämisen jälkeen painetaan Enter-näppäintä, mennään hakemaan pienpaahtimokahvia kahvikoneesta ja odotellaan kahvikupin äärellä minuutti tai pari. Komento käynnistää scriptin, joka tekee automaattisesti seuraavat asiat, listatussa järjestyksessä:

  1. Luo projektille kansion, johon hakee uusimman dudestackin, joka on Duden vuosien kestäneen kehityksen tuloksena syntynyt ammattimainen WordPress-kehitysalusta
  2. Luo tietokannan kehityspalvelimelle
  3. Asentaa uusimman WordPressin suomenkielisenä
  4. Asentaa vakiona projektina käytettävät WordPress-lisäosat
  5. Asentaa työkalut, joiden avulla voi julkaista tavaraa testiympäristöön (staging) ja liveen (production) ja puljata tiedostoja niiden välillä (deploy, rollback)
  6. Päivittää kaiken päivitettävissä olevan ajan tasalle
  7. Siivoaa WordPressist√§ oletus ”Moikka maailma!” -artikkelit, oletus sivustonkuvaukset ja muut turhat ”dummy contentit”
  8. Poistaa oletus twenty-teemat
  9. Päivittää pysyvät linkit nättiin muotoon
  10. Vaihtaa ajat suomalaiselle sopivaan muotoon
  11. Luo yksityisen GitHub-repon projektin kehitystä varten Digitoimisto Duden GitHub-tilin alle
  12. Lisää vhostin, host-tietueen ja käynnistää paikallisen kehitysympäristön uudelleen
  13. Hakee uusimman pohjateemamme air-lightin version teemakansioon
  14. Nimeää teeman uudelleen projektin mukaiseksi ja päivittää kaiken projektin nimelle toimivaksi
  15. Hakee uusimmat Duden kehitystyökalut Duden devpackages-reposta
  16. Päivittää työkalujen riippuvuudet uusimpiin versioihin
  17. Lisää README-tiedoston (dokumentaation) projektin tiedoilla, luomisajankohdan, tuetun WordPress- ja PHP-version, yhteyshenkilöt jne.
  18. Aktivoi teeman ja antaa linkin projektiin koodailua varten

Tämä automaatiotyökalu syntyi puhtaasti siitä syystä, että ajan myötä kyllästyimme tekemään samoja asioita uudestaan ja uudestaan. Vähitellen olemme lisänneet työkaluun muitakin asioita, joita olemme tuoneet mukaan vakiona projekteihin.

Ulkoasun taitossa emme ole aikoihin k√§ytt√§neet raakaCSS:√§√§, vaan kaikki on sassia (SCSS), joka mahdollistaa monipuolisempaa ja optimoidumpaa koodia. K√§yt√§nn√∂ss√§ ulkoasuja taitamme niin, ett√§ ajamme komentorivilt√§ j√§lleen yhden komennon, joka k√§ynnist√§√§ selaimen ja alkaa ”tarkkailemaan” teemassa olevia tiedostoja. Kun tallennamme SCSS-tiedoston, ty√∂kalu k√§√§nt√§√§ SCSS-tiedostoista automaattisesti minifoidun, optimoidun, kevyen CSS-tiedoston sivuja varten. Samalla se tekee WordPress standardien mukaisia tarkistuksia niin HTML:√§√§n kuin CSS:√§√§nkin, jotka ovat verkkosivun n√§kymisen ja saavutettavuuden puolesta t√§rkeimpi√§ asioita.

Jokainen tallentaminen tekee automaattisesti seuraavia asioita:

  1. Tarkistaa teeman SCSS-tiedostot virheiltä ja näyttää mistä kiikastaa ja millä rivillä
  2. Validoi HTML:n
  3. Tarkistaa koodin WCAG 2.0 tason saavutettavuuden (semantiikka, alt-tagit, yms.)
  4. Päivittää selaimeen ja kaikkiin avoinna oleviin mobiililaitteisiin muutoksen automaattisesti lataamatta sivua uudelleen
  5. Yhdistää käytössä olevat Javascript-tiedostot yhdeksi minifoiduksi ja optimoiduksi tiedostoksi
  6. Tekee SCSS-tiedostoista yhden minifoidun ja optimoidun css-tiedoston selainta varten
  7. Muuntaa automaattisesti SCSS-koodin selkeäksi ja jäsennellyksi stylelint-standardien mukaisesti
  8. Tekee moderneista tyylittelyistä selainyhteensopivat (ks. CSS Tricks: Autoprefixer) lisäämällä eri selaimille kuten Mozillalle ja Internet Explorerille -moz- ja -ms-prefixit, jotta kaikki toimisi mahdollisimman samalla tavalla myös vanhemmilla selaimilla.
  9. Tarkistaa että PHP on WordPress Coding Standardien mukaista, laadukasta koodia ja ilmoittaa virheistä jos näin ei ole

Samaan tyyliin sivustojen julkaisut testiympäristöön ja tuotantoon tapahtuvat yhden komennon taktiikalla. Kaikki minkä voi automatisoida, se automatisoidaan.

Homma jatkaa kehittymistään

T√§ss√§ oli suurin osa siit√§ mik√§ t√§ss√§ ty√∂ss√§ on omasta mielest√§ni parasta, ty√∂nkuvan puolesta. Jokaista ty√∂kalua p√§√§see kehitt√§m√§√§n p√§iv√§tasolla niin paljon kuin sielu siet√§√§. Meill√§ ei katsota pahalla (vaan p√§invastoin) jos kehitysty√∂h√∂n uppoaa ”liikaa” aikaa. Joskus se tapahtuu jopa jossain m√§√§rin asiakasty√∂n kustannuksella, mutta silloin voi olla varma, ett√§ my√∂s asiakkaan sivustosta tulee entist√§ parempi. Ja aikataulussahan pysyt√§√§n silti, kehitysty√∂ ei sulje sit√§ pois, vaan usein jopa auttaa siin√§, koska kaikki sujuu nopeammin ja helpommin. Kaikista parasta on, ett√§ jatkuva kehitysty√∂ s√§√§st√§√§ tulevaisuudessa kymmeni√§, ellei satoja tunteja toistuvaa, turhaa ty√∂t√§.

Tässä oli vain osa meidän koodareiden työtekotavasta ja työkaluista, selkokielellä selitettynä. Kaikki tämä on avointa lähdekoodia GitHubissa ja meidän teknikan puolen manuaalia voi selata myöskin vapaasti osoitteessa handbook.dude.fi/wordpress-kehitys.

Tänään kehitin meidän CSS Grid -mixiniä eteenpäin ja hehkutin sitä työkavereille. Työn parasta antia onkin ajan tasalla ja kehityksen kärjessä olevat työkaverit.

Niin ja muuten, meillä on myös rekry auki, joten suuntaa dude.fi/rekry, jos haluat koodata vapaasti kuin taivaan lintunen!

Miten teillä koodataan? mikä webissä tökkii ja miksi? me tykkäämme ajatella niin että kaikkea voi kehittää, eikä mikään saisi tökkiä jos pystyt siihen itse vaikuttamaan.

Pullopostia?

Koottuja kuulumisia sisältävä bittivirtojen pulloposti saapuu rantaasi noin kolmen kuukauden välein.