Tekninen toteutus

Budjetti & lisätyöt

Teknisessä toteutuksessa seurataan säännöllisesti, vähintään viikottain, paljonko budjetista on käytetty. Jos budjetti näyttää ylittyvän esimerkiksi jonkin ongelman tai odottamattoman työmäärän vuoksi, se otetaan puheeksi projektitiimin kesken. Budjetin ylittymisestä kommunikoidaan aikaisessa vaiheessa asiakkaalle. Tällöin neuvotellaan asiakkaan kanssa lisäyksestä budjettiin, jonkin osion tekemisestä tuntityönä tai jonkin osion pois jättämisestä. Tarjouksen, leiskan tai rautalangan tai speksin ulkopuolelta tulevat pyynnöt ovat lisätöitä, joille sovitaan oma budjetti.

Kehitystyön aloitus (web-kehittäjille)

Bitbucket

Unfair käyttää versionhallinnassa gittiä ja repositoriot säilytetään Bitbucketissa. Uusien asiakkaiden teemojen repositoriot nimetään ”Asiakas theme”. Omistajaksi asetetaan Unfair ja projektiksi valitaan ’ASIAKKAAT’. Repositorioon luodaan oma haara tuotantopalvelimen teemalle (master) ja staging-palvelimen teemalle (dev).

Bitbucket ja GitHub Slack-integraatiot

Bitbucket ja GitHub repositoriot voidaan linkittää suoraan Slackiin kanavalle #push_it_real_good. Kanavan tarkoitus on ilmoittaa (master) -haaran pushauksista jotta muut kehittäjät saavat tiedon uusista muutoksista, varsinkin projekteissa joissa on useampi kehittäjä mukana.

Bitbucket repositorion liittäminen Slack-kanavalle

Valitse Bitbucketista repositorio, jonka haluat liittää kanavalle. Mene repositorion asetuksiin ja kohtaan Slack – > Settings

Klikkaa ”Add subscription” -painiketta.

Valitse oikea workspace, oletuksena luultavasti Unfair. Valitse tämän jälkeen listasta #push_it_real_good -kanava.

Valitse (master) -haara ja valitse ilmoitustyypit. Ilmoitukset kannattanee konfiguroida koskemaan vain (commits pushed) ja (branch merged)  tapahtumia.

 

Paikallinen ympäristö

Paikallisessa kehitysympäristössä web-kehittäjä käyttää Local by Flywheel -sovellusta. Paikallinen kehitysympäristö pystytetään loitsu.sh skriptillä. Skripti kloonaataan Githubista kotihakemiston juureen ( ~/). Tarkemmat ohjeet löydät repositorion README:stä.

Koodieditori

Web-kehittäjän koodieditori on Visual Studio Code. Vaaditut VS Code -laajennukset ovat:

  • phpcs
    • PHP-linter
    • vaatii myös phpcs:n asennettuna tietokoneelle composer global require squizlabs/php_codesniffer
  • EditorConfig for VS Code
    • Lukee teemassa olevan .editorconfig tiedoston, jossa on asetettu mm. sisennyksen koko (2)
  • WordPress VS Code Extension Pack
    • Sisältää mm. WordPressin ACF:n snipettejä

Erittäin vahvasti suosittellut laajennukset:

Koodin standardit

Yleiset standardit

Sisennyksenä käytetään kahta välilyöntiä. Tämä on määritelty .editorconfig -tiedostossa, jolloin oikea sisennys tulee TABia painamalla. PHPCS-linter näyttää mm. virheellisen sisennyksen koodissa punaisena aaltoviivana koodin alla. Web-kehittäjä varmistaa, että koodissa ei ole tyylivirheitä ennen kuin lähettää sen Bitbucketiin.

Tyylit (SASS)

Unfair Starter -teemassa tyylit kirjoitetaan SASSilla, joka käännetään CSS:ksi. SASS-tiedostot ovat assets/styles-hakemistossa, jossa ne on jaettu alihakemistoihin _global , elements ja templates . Tavoitteena on kirjoittaa tyylejä kohtuullisen modulaarisesti, joka tarkoittaa, että sivuston osilla on oma tyylitiedosto. Osa tyyleistä koskee kuitenkin koko sivustoa, jolloin ne sijoitetaan _global-hakemistoon.

Esimerkkejä:

  • Hero-osio assets/styles/elements/content/_hero.scss
  • Teaser (artikkelinosto) assets/styles/elements/content/_teaser.scss
  • SASS-muuttujat assets/styles/_global/_variables.scss
  • Tekstien koko- ja kirjaisinmääritykset assets/styles/elements/typography/_text.scss

Tyylien kirjoittamisessa noudatetaan WordPressin CSS:än kirjoittamisen standardeja. Tärkein standardi on järjestää ominaisuudet (properties) seuraavan järjestyksen mukaan:

  • Display
  • Positioning
  • Box model
  • Colors and Typography
  • Other

Esimerkki:

.notification {
    display: none;
    position: relative;
    bottom: 0;
    z-index: 1;
    width: 100%;
    padding: 1rem 0;
    background-color: $btn-light;
    color: $white;
    font-weight: $bold;
}

Tämä parantaa silmäilynopeutta ja auttaa löytämään halutun ominaisuuden nopeammin.