Verkkokehitys

Koodia tarvitaan yhtä lailla sekä valmisalustalla toimivalle sivustolle että tyhjästä rakennettavalle projektille. Tämä osio käsittelee kehitystä WordPressiin sitoutumatta. Frontend ja backend, työkalut ja valmiit toimintatavat. Niille, jotka taittavat, kirjoittavat skriptejä tai asentavat Gitiä ensimmäistä kertaa omalle koneelleen.

Frontendin käymme läpi kerroksittain. HTML sivun runkona. CSS ulkoasun muotoiluun: Flexbox- ja Grid-pohjaiset sommittelmat, responsiivisuus, sulavat siirtymät ja siistit tehosteet ilman ylimääräistä koodia. JavaScript ja jQuery sivun käyttäytymiseen: valitsimet, klikkausten käsittely, lomakkeiden validointi, dynaamisuus. Mukana on konkreettisten tehtävien tarkasteluja, kuten .toggle()-metodi, satunnaisluvun generointi, lähtölaskenta-ajastin tai pehmeä rullaus ankkuriin. Ei abstraktia teoriaa. Valmista koodia, jonka voi liittää ja testata.

Backend nojaa PHP:hen. Näytämme, miten ulkoisiin API-rajapintoihin (ohjelmointirajapintoihin, joiden kautta sivustot vaihtavat tietoa) otetaan yhteyttä. Esimerkiksi Bitcoin-kurssin, sään tai tuotteen hinnan hakeminen kolmannen osapuolen palvelusta. Käsittelemme lomakkeen lähettämisen sähköpostitse, JSONin käsittelyn, tietokannan peruskyselyt. Lisäksi säännölliset lausekkeet – se hahmokielenä toimiva hakukieli, jota monet turhaan pelkäävät. Sähköpostin ja puhelimen tarkistus, merkkijonon siivous. Käymme näitä läpi elävien esimerkkien, emme kuivan syntaksin kautta.

Koodi on jossain kirjoitettava ja tallennettava. Siksi oma lohkonsa työkaluille. Git ja GitHub versionhallintaan ja yhteistyöhön. Gitin asennus Windowsiin alusta alkaen, peruskomennot, ensimmäinen repositorio, muutosten peruminen, haarojen kanssa työskentely. Markdown dokumentointiin ja README-tiedostoihin. CodePen nopeisiin kokeiluihin selaimessa. Paikallinen kehitysympäristö: Laragon, Open Server, XAMPP, Atom-editori. Kaikki, millä on oikeasti mukava työskennellä päivittäin.

Kenet pidämme mielessä kirjoittaessamme. Aloittelija, joka vasta opettelee, miten tagi eroaa selektorista, ja kopioi koodia ymmärtämättä puoliakaan riveistä. Kokenut tuntee perusteet, mutta etsii lyhyttä ratkaisua yksittäiseen tehtävään, jottei tarvitsisi keksiä pyörää uudelleen. Ensimmäiselle selitämme jokaisen rivin ja näytämme tuloksen selaimessa. Jälkimmäiselle annamme valmiin snippetin ja kerromme heti, missä se hajoaa.

Tyypilliset virheet, joita tuomme esiin. Skripti headissa footerin sijaan, minkä vuoksi jQuery ei löydä elementtiä. Unohtunut puolipiste ja erityyppiset lainausmerkit. Säännöllinen lauseke, joka ahneesti haukkaa liikaa. Suora tietokantakysely ilman datan tarkistusta. Näytämme paitsi toimivaa koodia, myös sen ympärillä olevat karikot.

Materiaalit kirjoittavat ihmiset, jotka itse koodaavat, eivätkä toista toisten tutoriaaleja. Olemme itse kompastuneet samoihin virheisiin ja muistamme, mihin aloittelija jää jumiin. Siksi jokainen tarkastelu on rakenteeltaan yksinkertainen. Ensin lyhyt toimiva ratkaisu. Sitten selitys siitä, miksi se toimii ja missä sudenkuopat piilevät. Ilman täytesanoja ja copy-pastea virallisesta dokumentaatiosta.

Jos olet vasta aloittamassa, etene helpommasta vaikeampaan. Ensin HTML ja CSS. Sitten JavaScript ja PHP:n perusteet. Ja vasta sen jälkeen Git, API-rajapinnat ja säännölliset lausekkeet. Jokainen teksti vastaa konkreettiseen kysymykseen eikä yritä kattaa kaikkea kerralla.

Osio on yhteydessä WordPress-kategoriaan. Kun koodi koskee nimenomaan WP:n ydintä, koukkuja, functions.php-tiedostoa tai lisäosia, ohjaamme sinut sinne. Täällä on kaikki se, mikä on yleispätevää ja hyödyksi missä tahansa projektissa. CSS-snippetti asettuu samalla tavalla niin laskeutumissivulle, blogiin kuin verkkokauppaankin.

Sisältö päivitetään säännöllisesti vastaamaan uusia standardeja ja työkaluversioita. Kielet kehittyvät, vanhat tekniikat vanhenevat, uusia ilmaantuu. Pidämme esimerkit toimivina, emmekä jätä kymmenen vuoden takaista koodia seisomaan. Taittoa, skriptausta vai Gitiä opettelemassa? Palaa tänne aina, kun täytyy saada koodista tolkkua tai löytää valmis ratkaisu.