Vierityspalkki on verkkolehtimäinen blogi, jonka kohderyhmää ovat verkkosivujen, appien ja web-sovellusten tekijät ja ostajat. Sivustolla julkaistaan alan artikkeleja, liikevaihdoltaan merkittäviä digitoimistoja, julkaisuja ja työpaikkoja. Vierityspalkin toimistojen tähtiluokitus on tullut tutuksi eräänlaisena laatumittarina niin tekijöille kuin ostajillekin.
Vuonna 2006 perustettu Vierityspalkki täyttää tänä vuonna 16 vuotta. On nostalgista miettiä tätä aikajaksoa, sillä allekirjoittanut on saanut ensimmäisen alan työpaikkansa juuri Vierityspaikan työpaikkalistauksen kautta. Perttu kirjoitti myöskin Dudesta ikonisen jutun vuonna 2014, jolloin olimme yrityksenä vasta luokkaa ”kaksi tyyppiä ja tietokoneet”. Monesti ovat tiemme kohdanneet vuosien varrella.
Me Dudella olemme tykästyneet Vierityspalkin objektiiviseen suhtautumiseen alaan ja sen toimistoihin. Ansiokkailla artikkeleilla esimerkiksi avoimesta lähdekoodista on erityinen paikka sydämessämme.
Vierityspalkin tehtävänä on aina ollut alan toiminnan edistäminen ja kotimaisen alan jonkinlainen tason nostaminen. Pertun kiinnostukset kirjoittajana ja asiantuntijana ovat tosin vieneet sisällöllistä painotusta enemmän asiakkaiden suuntaan, siihen miten ostajapuolen olisi helpompi onnistua hankkeissaan ja kumppanivalinnoissaan. Myös “eettinen internet” on aihepiiri, josta blogissa on kirjoitettu paljon, eli kuinka internetin tulisi edistää avointa kilpailua ja helppoa tiedonsaantia, eikä toimia vain uudenlaisten monopolien alustana.
Vierityspalkki.fi – Toimitus
Vierityspalkin ulkoasun vuosimallia 2023 on suunnitellut Sanna Karmakka Ferry Designiltä. Dude toimi projektissa teknisenä toteuttajana.
Tässä kirjoituksessa tarjoilemme hieman tavallista enemmän tekniikkaa. Jos olet teknisten nippeleiden sijaan kiinnostunut tilaajan näkökulmasta, lue Pertun kirjoitus tästä: Vierityspalkki uudistui (6.2.2023).
Duden kehitystiimin koko osaaminen käytössä
Duden kehitystiimi koostuu tällä hetkellä seitsemästä kehittäjästä ja Vierityspalkin projektia oli mukana koodaamassa yhteensä kuusi ihmistä siten, että jokainen keskittyi bravuureihinsa. Back-end-arkkitehtuurista vastasi Timi Wahalahti, front-endistä allekirjoittanut Roni Laukkarinen Ferry Designin Sanna Karmakan käyttöliittymälinjausten mukaisesti.
Hiilijalanjälki minimoitu
Käytössä olevien lisäosien määrä ja koodin suorituskykyisyys korostuu erityisesti Vierityspalkissa, sillä yhtenä projektin päätavoitteista oli mahdollisimman pieni hiilijalanjälki. Sen lisäksi, että sivusto majailee Duden tuulivoimalla toimivalla WordPress-optimoidulla palvelimella, sen koodi on suorituskykyistä ja lisäosat minimissä, jotta voidaan taata myös supernopeat latausajat.
Massiivinen määrä sisältöä käyttöön ilman kikkailua
Kuudentoista vuoden aikana Vierityspalkissa on julkaistu yli tuhat artikkelia, joissa rapiat 3000 kommenttia, 1300 toimistojen referenssijulkaisua, kymmenittäin avainsanoja, kategorioita ja avoimia työpaikkoja… Luonnollisesti lähes kaikki vanha sisältö haluttiin säilyttää ennallaan. Vierityspalkin arkisto toimii samalla ikäänkuin eräänlaisena web-kehityksen historiankirjana, sillä kantaaottavat artikkelit ovat aikansa kuvia. Näin massiivisessa uudistuksessa ei myöskään missään nimessä haluta menettää artikkelimassan mukanaan tuomaa hakukonenäkyvyyttä.
Projektit aloitetaan Dudella lähes aina puhtaalta pöydältä, ilman vanhan tietokannan mukanaan tuomaa ylimääräistä historian painolastia. Vierityspalkin kohdalla tuhansien sisältöjen ja satojen tuhansien niihin liittyvien metatietojen migratoiminen olisi kuitenkin ollut tehtävä, jossa olisi ampunut itseään jalkaan. Siksi päätimme aloittaa uudistuksen ottamalla ihan ensimmäiseksi kopion Vierityspalkin tietokannasta.
Tietokannan lisäksi kopioimme sivuston vanhan teeman ja kaikki sivuston WordPress-lisäosat arkistoon tutkittavaksi. Vanhan koodipohjan kautta lähdimme purkamaan mitä sisältötyyppejä, taksonomioita (kategorisointeja), metatietoja, osoiterakenteita, logiikoita ja vastaavia on ollut käytössä. Iso osa arkkitehtuurin perustuksista pohjautuu vanhoihin rakenteisiin, jotta sisältöjen hallinnointi pysyisi mahdollisimman samankaltaisena, ilman että tarvitsee pyöräyttää minkäänlaisia kantamigraatioita. Näin taataan myös osoiterakenteen muuttumattomana säilyminen, muutamaa yksittäistä poikkeusta lukuun ottamatta.
Julkaisuhaku
Uudistukseen lähtiessä Pertulla oli toiveena saada toimistojen lähettämille julkaisuille erillinen näkymänsä, jossa niiden hakeminen ja suodattaminen olisi helppoa kevyellä reaaliaikaisella JavaScript-toteutuksella. Toiminnallisuus ei kuitenkaan ollut niiden tärkeimpien listalla, joten Perttu taisi todeta jotain luokkaa ”jos budjetti riittää ja aikataulu kestää”.
Molemmat joustivat ja kiitos koodarimme Eliaksen jo aiemmin toteuttaman Air-search-lisäosan saimme toiminnallisuuteen lentävän lähdön. Tiedättekö sen tunteen, kun jokaisessa projektissa saa olla aina tekemässä pitkästä tavarasta reaaliaikaista hakua ja filtteröintiä? Siihen tarpeeseen Air-search tarjoaa lähes valmiin konfiguroitavan pohjan.
Haun taustalla käytetään WordPressin ytimen omaa REST-rajapintaa, joka tarjoilee jokaisen tuloksen HTML-merkinnän valmiiksi pureskeltuna. Selaimen ei tarvitse tehdä raskasta laskentaa ja parsia JSON-palautteesta elementtejä sivustolle, mikä vähentää vastaaville javascript-toteutuksille tyypillistä turhaa resurssien käyttöä. Jopa REST-rajapinnan palaute saadaan välimuistiin, jolloin edes palvelimen ei tarvitse tehdä HTML-merkinnän generointia joka pyynnöllä uudestaan. Pieniä asioita, jotka auttoivat lähemmäs tavoitetta mahdollisimman pienestä hiilijalanjäljestä.
Selainpuolen logiikka on rakennettu minimalistiseksi kevyellä Vanilla JS toteutuksella, ilman ylimääräisiä raskaita kirjastoja. Jälleen yksi asia joka varmistaa sivuston pientä hiilijalanjälkeä, mutta myös suorituskykyä.
Uusi automaattinen tähtiluokitus
Aiemmin toimistojen tähtiluokituksia ylläpidettiin ja laskettiin erillisessä järjestelmässä, aiheuttaen Pertulle paljon manuaalista työtä luokitusen säännöllisen päivittämisen suhteen. Uuteen Vierityspalkkiin haluttiin automaattisempi ja useammin päivittyvä, toimistojen julkaisuihin perustuva tähtiluokitus.
Luokitukset sinänsä pysyivät lähes samoina; WordPress-kokemus, verkkokauppakokemus, integraatiokokemus ja kokemus räätälöidyistä web-sovelluksista.
Uudessa Vierityspalkissa toimistojen lähettämille julkaisuille on mahdollista antaa kokemuspisteitä, samalla kun ne käyvät läpi tarkistuksen ennen sivustolla julkaisua. Näiden annettujen kokemuspisteiden ja muiden kategorisointien, kuten teknologian ja budjetin, pohjalta Pertun on mahdollista rakentaa erilaisia sääntöjä kaikille tähtiluokitukselle suoraan hallintapaneelista. Tai vaikka lisätä kokonaan uusi tähtiluokitus omatoimisesti.
Vaikka tähtiluokitus lasketaankin taustalla automaattisesti, on Vierityspalkin hallintapaneelissa selkeästi näkyvillä mihin julkaisuihin toimiston laskettu luokitus perustuu. Näin Pertun on helpompi tarkistaa automaattisten luokitusten paikkaansa pitävyyttä, sekä tarjota sama tieto luokituksen perusteista perinteisesti hyvin kiinnostuneille digitoimistoille.
Duden avoimen lähdekoodin helmet ja vain hyväksi havaitut lisäosat käyttöön
Uuden sivuston koodin kasaaminen aloitettiin kuitenkin puhtaalta pöydältä. Tai, jos turhantarkkoja ollaan, lähes puhtaalta pöydältä, sillä luotimme tässäkin projektissa omaan avoimen lähdekoodin Air-tuoteperheeseemme, jonka tekniikat ja automatiikka säästävät heti startissa tuntikausia työtä ja siivoilevat mm. WordPressin oletusbloatit pois. Vierityspalkin WordPress-teema on toteutettu WordPress.org teemahakemistossakin olevalla Air-Light-pohjateemallamme. Kevyt lisäosamme Air-helper tuo mukanaan pieniä parannuksia hallintapaneeliin ja toiminnallisuuteen, julkaisuhaun taustalla pyörii minimalistinen hakulisäosamme Air-search.
Oman tuoteperheemme lisäksi käyttöön valikoitui pieni joukko tarpeellisia, laadukkaiksi todettuja, lisäosia ja työkaluja:
- ”Sinua voisi kiinnostaa myös”-suosittelut: Mikko Saaren kehittämä loistava Relevanssi Premium pyörii taustalla sisältöjen suosittelukoneena.
- Haku: Sivuston haku käyttää ulkopuolista AddSearch-palvelua jonka Perttu on virittänyt vuosien aikana tarjoilemaan laadukkaita hakutuloksia.
- Lomakkeet: Käyttäjäystävälliset lomakkeet on luotu Gravity Formsilla
- Hallintapaneeli: Kategorioiden kanssa elämää helpottaa legendaarisen JJJ:n WP Term Order.
Kehitystapamme noudattaa täysin WordPressin koodausstandardeja ja noudatamme WordPressin tapoja tehdä asioita. Koska teemme asiat alkuperäiseen tyyliin, käytössä ei ole esimerkiksi PHP-templating-kieliä, jotka monimutkaistavat prosessia aivan suotta. Tästä syystä koodimme on jatkokehitettävää ja kierrätettävää. Kehitysmallimme on siis kaikin tavoin myös Vierityspalkin tavoitteiden mukaista.
Yksityisyys kunniaan ilman evästekyselyitä
Sivusto ei kysele lainkaan evästeitä, koska kyselyä ei tarvita. Käytössä on nimittäin puhtaasti evästeetön ja yksityisyyttä suojaava Plausible, jota Dude hostaa. Evästeetön sivusto on myös yksi Vierityspalkin yksityisyysperiaatteista. Lisää artikkeleja tästä voi lukea kategorian Yksityisyys verkossa alta.
Sivusto ilman Gutenberg-editoria – Classic Editor kunniaan!
Kerrankin saimme vapaat kädet tehdä verkkosivut ”kuten ennen vanhaan”, välittämättä Gutenberg-lohkoeditorista. Ei sillä, että Gutenberg-editori olisi huono ratkaisu, tässä artikkelipohjaisessa sivustossa ei vain koettu sille tarvetta, sillä sisältö on paikallaan siellä missä sen kuuluukin olla.
Gutenbergin poisjättäminen on sivuston kannalta ehdoton etu, sillä se lisää myös osaltaan suorituskykyä. Artikkeleita ja muita sisältöjä voi kirjoittaa myös tavallisella WYSIWYG-editorilla vallan mainiosti.
Latausnopeudet ja suorituskykyiset resurssit sisällön toimitusverkoston (CDN), tehokkaan välimuistituksen ja resurssien minifoinnin avulla
Koska uusi Vierityspalkki on suunniteltu äärimmäisen runsaaksi kuvien osalta, isoja pintoja ja kuvia on paljon per sivu. Tästä syystä nopeus ja keveys on elintärkeää. Koska kuvia on aiempaa enemmän, päätimme ottaa käyttöön Cloudflaren toimitusverkoston, joka tarjoilee kuvat edistyksellisessä ja suorituskykyisessä AVIF tai WebP-muodossa tavallisen jpg:n tai png:n sijaan. Parhaimmillaan tällaiset kuvat ovat jopa alle 1KB kokoisia (esimerkiksi etusivun jotkin yritysten logot).
Kuvat latautuvat myös laiskasti (engl. lazyload) natiivilla selaimen loading-attribuutilla. Tämä tarkoittaa sitä, että kuvia ei ladata ennen kuin ollaan rullattuna kohdalle – näin säästetään kaistaa (ja ilmastoa!) eteenkin hitaammilla mobiiliyhteyksillä. Vain sivun yläreunat ladataan kun saavutaan sivustolle, loput sitten vasta rullattaessa.
Läpiviennissämme käytössä oleva webpack pienentää jo valmiiksi tehokkaan koodin Terserin ja CSSNANOn avulla. Tämän lisäksi palvelimella on käytössä Googlen ngx-PageSpeed-moduuli, joka optimoi ja yhdistelee tiedostoja lennosta palvelinpäässä. Välimuistituslayerina toimii Redis. Viimeisen lisäpotkun antaa Surge. Nämä yhdistettynä saavat aikaan sen, että sivu latautuu supernopeasti ilman välivaiheita ja ylimääräisiä tiedostojenlatailuja taustalla.
Tietoturva
Sen lisäksi että palvelimemme on suojattu mm. vasaroinnilta, lisäturvaa sivustolle tuo WordPress.org projektin ylläpitämä Two-Factor. Tapahtumalokia sivuston kaikesta elämästä pitää ruotsalaisen Pär Thernströmin Simple History. Lomakkeet on luonnollisesti suojattu spämmin varalta ja turhat kirjautumiset jäävät automaattisen bannipoliisin haaviin.
Vieraile sivustolla ja kerro mitä mieltä olet!
Vierityspalkin tekninen uudistus on meille eräänlainen sulka hattuun, sillä kyseessä on koko Duden porukan arvostama sivusto, josta voi olla ylpeä. Vieraile osoitteessa vierityspalkki.fi ja kerro mielipiteesi vaikkapa somessa!
