19.6.2018

WordCamp Belgrad 2018 - WordPress 5.0 kulman takana ja muita uutisia

Meidän WP tiimistä lähti jopa 11 hengen porukka keskiviikkona 13.6. kohti Serbiaa. Euroopan WordCamp tarjosi unohtumattomat puitteet verkostoitua ja tutustua WordPress maailmaan.
WordCamp Belgrad 2018

Geniemin Tampereelta lähtenyt kymmenen henkilön iskuryhmä sai yhden lisävahvistuksen Tukholmasta ja saapui Belgradiin myöhään keskiviikkoiltana. Torstai aukesi lämpimänä, mutta harmaana Belgradissa. Majapaikkamme sisääntulo hieman hätkähdytti:

WordCamp_Belgrad_asunto

Vaikka majoitus ei ihan vastannut mainostettua, joka olikin aika yleistä kuten Duden Rolle twiittasi 🙂 niin nousimme asian yläpuolelle ja levittäydyimme kaupungille pienemmissä ryhmissä kahviloihin sekä coworking tiloihin työskentelemään eri tahoille.

Ensimmäisenä iltana oli Suomen WordPress-skenen tapaaminen Ravintola Kolaracissa. Meitä oli n. 20 henkeä josta iso osa oli Geniemiltä, joten päädyimme sponsoroimaan lounaan. Kuulumisia vaihdettiin, ruokaa syötiin ja juomatkin olivat hyviä.

WordPress WordCamp Belgrad

Kokosimme tähän kirjoitukseen muutamia mielenkiintoisimpia löytöjä seminaarista.

Googlen AMP on kehittynyt huimaa vauhtia

Google on panostanut AMPiin, eli Accelerated Mobile Pages -työkaluun. Alkuun hanke oli Googlella pienen tiimin harrasteprojekti, jonka vuoksi ensimmäisessä versiossa ei oltu ajateltu loppuun monia asioita. AMP automatisoi niitä kymmeniä asioita mitä kehittäjän pitäisi tehdä optimoidakseen verkkopalvelun suorituskyvyn ja tarjoaa niitä lähes ”out-of-the-box”. Suorituskyvyn parannukset sivustolle AMPin avulla ovat todella huimia.

AMP on mennyt läpi kolme merkittävää versiota josta viimeisin ”Native AMP” tarjoaa saumattoman käyttäjäkokemuksen. Ennen AMP-sivustot olivat pääsivustosta täysin erillisiä Googlen domainissa sijaitsevia ”AMP-sivuja” ja nyt Native AMPin avulla  on vain yksi sivusto.

AMP for WordPress

AMP koostuu kolmesta osasta, AMP HTML, AMP JS ja AMP Cache. Sivustolle voidaan ottaa esimerkiksi käyttöön pelkästään AMP HTML ja AMP JS jos ei haluta käyttää Googlen infrastruktuuria sisällön jakeluun. Tosin mikäli sivusto on globaali tarjoaa AMP Cache geokohdennetun välimuistin, joka tarkoittaa, että sisältö palvellaan aina käyttäjää lähinnä olevilta palvelimilta. Google on julkaissut AMP-pluginin WordPressille, joka yksinkertaistaa AMPin käyttöä WordPress-sivustoille. Mikäli olet kiinnostunut AMPin käytöstä WordPress-sivustollasi, niin autamme mielellämme.

Saavutettavuus verkkopalvelun suunnittelussa

Perjantaiaamun puheista yksi liittyi visuaaliseen suunnitteluun ja tarkalleen ottaen siihen, kuinka saavutettavuus tulisi ottaa huomioon jo visuaalisuutta suunnitellessa. Kun edellisestä puheesta pääsimme irtautumaan, muutama meistä otti askeleen kohti tapahtumapaikan toista salia, joka kantoi nimeä Milky Way.

Saavutettavuus_WordPress

Puheessa korostettiin sitä kuinka on tärkeää, että jo visuaalisessa suunnittelussa otetaan esteettömyys huomioon ja kun se on tarpeeksi usein huomioitu jokaisessa uudessa projektissa, muodostuu se jatkossakin osaksi projektia kuin itsestään. Se käytännössä tulee kuin luonnostaan.

Huomionarvoisena asiana tulisi huomioida tekstien koot, rivivälit, yleinen luettavuus valitussa tekstityylissä ja värien osalta selkeät värikontrastit. Tähän suositeltiin Contrast Checker -työkalua, joka pikaisella tutustumisella vaikutti oikein hyvältä. Visuaalisen suunnittelun aloittaminen mustavalkoisena ja jättäen värien lisäämisen vasta myöhempään vaiheeseen oli myös mielenkiintoinen lähtökohta. Tässä kohtaa mainittiin myös WordPressin oma opas saavutettavuudesta, jota edelleen työstetään parhaillaan. Myös meidänkin käytössä ollut olleesta Sketch-laajennuksesta on hyötyä suunnitteluvaiheessa.

Saavutettavuuden testaus

Yksi workshopeista oli aiheeltaan ”Testing web accessibility for designers, developers and content managers”. Tässä workshopissa käytiin läpi saavutettavuuden testaamisen eri työkaluja ja toimintatapoja. Puhujina toimivat WordPress-yhteisössä mainetta niittänyt Rian Rietveld sekä Suomen oma koodiprofessori Sami Keijonen. Osa workshopista oli sisällöltään sama kuin WordCamp Jyväskylässä, mutta löytyi siitä myös uuttakin materiaalia. Pääpointteina workshopissa oli muun muassa:

  1. Opettele HTML5:ä syvästi
  2. Saavutettavuuden huomiointi on todella tärkeää jo design-vaiheessa
  3. Tuota semanttista koodia ja muista otsikkohierarkia, linkkien käytön loogisuus sekä kuvien alt-tekstien saavutettavuus
  4. Testaa sivuillasi navigointia ruudunlukijoilla sekä näppäimistöllä
  5. Hyödynnä saavutettavuustestaamiseen luotuja työkaluja

Tärkeimpinä työkaluina listattiin mm. aXe ja Wave, jotka saa esimerkiksi Chromeen lisäosina. Molemmilla saa kätevästi skannattua sivun eri virheet ja varoitukset liittyen saavutettavuuteen, niin värikontrastien kuin HTML-elementtien käytön osalta. Otsikkotasojen testaamiseen hyvänä työkaluna mainittiin headingsMap, joka näyttää suoraan sivuston otsikkohierarkian ja siinä piilevät saavutettavuusvirheet. Monesta pluginista on myös CLI-versio, jos testejä haluaa integroida projektiin automaattisemmin.

Accessibility WordPress
Workshopin osallistujille jaettiin Rietveldin firman toimesta kuvitettuja kortteja, joissa kerrotaan ytimekkäästi saavutettavasta designistä ja koodista erilaisille kohderyhmille.

Samalla kuitenkin painotettiin, että saavutettavuuden testaamiseen ei ole olemassa yksittäistä työkalua, jolla näkee suoraan kaikki virheet ja korjattavat asiat, vaan on olennaista harjoittaa kaikkia yllämainituista pointeista. Workshopin materiaalina ja resursseina käytettiin Rianin ja Samin luomaa, erittäin kattavaa sivustoa. Suosittelemmekin jokaista lukemaan tarkkaan ko. sivuston materiaalin läpi ja tutustumaan myös siellä viitattuihin resursseihin ja linkkeihin!

Capability-Driven Development

Yksi mielenkiintoinen aihe oli perjantai-iltapäivän esitys nimeltään ”Capability-Driven Development” joissa Felix Arntz kävi läpi WordPressin käyttäjätasojen ja oikeuksien (roles and capabilities) mukauttamista. Felix, joka on aktiivinen WordPressin core-kehittäjä, havainnollisti yksinkertaisilla koodiesimerkeillä miten luodaan eri käyttäjätasoja ja annetaan niille käyttöoikeuksia. Saimme nähdä miten ylläpitonäkymään tehdään mukautettu asetussivu, jossa näytettävät kentät määräytyvät sen mukaan, mikä käyttäjärooli kirjautuneella käyttäjällä on. Useimmiten kannattaa luoda omia, mukautettuja käyttäjätasoja sen sijaan, että käytetään oletusrooleja.

Tämä tekee lisäosasta tai teemasta turvallisen ja käyttäjäystävällisen kun loppukäyttäjälle näytetään ainoastaan hänelle olennaiset asiat ylläpitonäkymässä. Lisäksi koodia on erittäin helppo laajentaa esimerkiksi WordPressin filttereillä. Olemme Geniemillä luoneet oman lisäosan, jolla käyttäjätasojen määrittäminen on erittäinen helppoa, joten suurin osa esityksen sisällöstä oli hyvinkin tuttua. Esitys oli kuitenkin erittäinen hyvä kertaus ja toki hieman uuttakin oppia tarttui matkaan.

Design Patterns

Perjantaina Alain Schlesserin  ja David Mosterdin pitämä workshop aiheesta “Dependency Injection and Design Patterns in Real Life” tarjosi luotauksen PHP:n olio-ohjelmointiin ja erilaisten suunnitelumallien hyödyntämiseen WordPress-kehityksessä. Geniem on ansiokkaasti vienyt eteenpäin teemakehitystä olio-ohjelmoinnin tavoilla DustPress-teemakehyksen avulla, ja siten workshopin aihe sopi osallistujille kuin nenä päähän.

WordCamp Design Patterns työpaja

DustPressin pääkehittäjät Miika Arponen ja Ville ‘Teris’ Siltala saivat Schlesserin johdolla hyviä konkreettisia esimerkkejä siitä, miten Gutenberg-lisäosien kehitystä voidaan jatkossa viedä laajennettavaan, jatkokehitettävään ja ylläpidettävään suuntaan. Workshopissa kehitettiin backend-puolta sosiaalisen median feedin toteuttavaan Gutenberg-komponenttiin. Käsittelyssä olivat muun muassa factory-, dependency incjection ja strategy -suunnittelumallit, joilla Gutenberg-lisäosan backend-koodista saatiin devaajaystävällistä herkkua. Tällaista kaiken WordPress-kehityksen tulisi olla!

Gutenberg, Gutenberg, Gutenberg… ja WordPress 5.0

WordPressin perustaja Matt Mullenweg kävi läpi WordPress-alustan kehitystä ja vastasi WordPress-yhteisöä kutkuttaneeseen kysymykseen, milloin WordPress 5.0 julkaistaan. Vastaus oli, elokuussa. WordPress 5.0 on iso harppaus WordPressin-historiassa johtuen uudesta Gutenberg-editorista.

Gutenberg kysymys
Geniemin Ville Siltala kyselee Gutenbergin arkkitehtuurista editorin pääkehittäjältä

Gutenberg on aivan uudistettu tapa sisällönhallintaan ja tulevaisuudessa koko verkkopalvelun rakentamiseen ja hallitsemiseen rikkaan ja käyttäjäystävällisen Gutenberg-editorin kautta. Ensimmäisessä vaiheessa Gutenberg-editori korvaa nykyisen TinyMC-editorin. Konseptuaalisesti suurin ero on siinä, että Gutenbergissä sisältö koostuu blokeista. Kuva esimerkiksi lisätään kuvablokilla. Blokkeja on alkuun useita kymmeniä, sitaatti-blokki, listablokki, videoblokki jne. WordPressin luonteeseen sopien kehittäjät voivat tehdä omia räätälöityjä ”Custom Block” -blokkejaan. Aihe on niin laaja, että se ansaitsee oman blogikirjoituksensa.

Gutenberg_main_developer

Erityisesti mielenkiintoista oli päästä keskustelemaan Gutenbergin teknisen pääkehittäjän Matias Venturan kanssa. Keskustelu auttoi meitä hahmottamaan minne Gutenberg on menossa erityisesti tiedon rakenteellisen tallentamisen ja käyttämisen suhteen, eli suomeksi miten Gutenbergin avulla tuotettu sisältö on hyödynnettävissä muualla sivustolla. Tämä on tärkeää isommissa WordPress-toteutuksissa. Aiheesta on ollut kiivasta keskustelua kehittäjien kesken. Mitä tapahtuu esimerkiksi ACF-tyylisille tietorakennetta laajentaville plugineille, sekä yleisesti Custom Fields -kentille. Tapasimme myös toisen Gutenberg-kehittäjän, Riad Benguellan ja kävimme pitkiä keskusteluita miten dataa on järkevin saada custom-kentistä ulos mm. JSON-muotoisena. Riad olikin juuri viikkoa aikaisemmin julkaissut kirjoituksen aiheesta.

Public Money, Public Code

Matt esitteli hankkeen, joka on ollut pidempään käynnissä USA:ssa ja nyt myös Euroopassa. Public Money, Public Code -hanke ajaa ideaologiaa, että julkisilla varoilla ostettu ohjelmisto pitäisi olla avointa lähdekoodia. Video esittelee vertauksen miten meidän yhteiskunta toimisi, jos infrastruktuuri rakennettaisiin samoilla suljetulla periaatteella, kun nyt iso osa julkisin varoin ostetusta ohjelmistosta.

Video on ajatuksia herättävä ja hanketta voi tukea allekirjoittamalla avoin kirje, jossa vaaditaan, että julkisesti veronmaksajien rahoilla ostettu ohjelmisto on ilmaista ja perustuu avoimeen lähdekoodiin. Tällä on useita hyötyjä, joka auttaa meidän elinympäristöämme digitaloisoitumaan joustavasti sekä kustannustehokkaasti. Geniem on vahvasti hankkeen takana. Avoimen kirjeen on allekirjoittanut tällä hetkellä alle 20 000 henkilöä ja alle 200 organisaatiota, joten tuki hankkeelle on tärkeä.

Back to Finland

Kiitos Belgradille! Kaupunkin oli hieno kokemus ja reissu antoi WordPress-tiimille eväitä ja mietittävää minne WordPress taipuu. Lopulta pääsimme myöhästyneiden lentojen kanssa Pirkkalaan maanantaiyönä kahden aikaan. Onneksi Pirkkalan keinutuolit helpottivat matkalaukkujen odottelua 🙂

Herrat_keinuu