Viikko 22

Uusi viikko valkenee jännittävän viikonlopun jälkeen, kun Suomileijonat upeasti taistelivat itsensä voittoon Mörkö-Markon johdolla jääkiekon mm-finaalissa. Hyvä Suomi! Onnea Leijonat! Edes sateinen sää ei laimentanut tunnelmaa. Näissä tunnelmissa on hyvä aloittaa uusi viikko myös Digitalents Academylla.

Maanantaina 27.5. aamupalalle tule mukaan ja esittäytymään Kaisa Vuorinen yrityksestä Positiivinen CV. Kaisa on erityisopettaja ja auttaa nuoria löytämään omat vahvuutensa ja pääsemään merkitykselliseen työhön. Pääsimme pelaamaan hänen kanssaan Huomaa hyvä -toimintakorteilla ja tunnistamaan omia vahvuuksiamme.

Valma-opettajien tiimin tiimimestari Cecilia Terman tulee tutustumaan pajalle aamupäivästä.

Krishna ja Arto ovat iltapäivän suunnittelukokouksessa Games Factorylla, mutta tarvittaessa tavoitettavissa. Elli lähtee lounaan aikaan.

Kartoitetaan mikä pajalaisten tilanne on CV:n ja LinkedInin suhteen. Kerätään ylös myös ruokavaliot tulevia retkiä ja tapahtumia varten. Samalla selvitellään mitä kukin suunnittelee tekevänsä kesäkuussa ja ketkä jatkavat syksyllä Digitalents Academylla.

Tiistaina 28.5. tarkistetaan CV- ja työnhakutilanne Arton kanssa.

Liikuntapäivään siirrytään Elli johdolla tai itsenäisesti, jos niin on sovittu. Mikäli liikuntapäivän aikana pitää lähteä, tulee siitä ilmoittaa Krishnalle tai Artolle! Mediatiimin opettajat eivät voi ottaa meidän tiimin poissaoloja hoitaakseen.

Muistakaa ilmoittautua liikuntapäivään! Sen voi tehdä jo maanantaina. Liikuntapäivän suhteen valinnat tehdään aina maanantaiaamun palaverissa, joten sitä ennen voi heittää Flingaan ehdotuksia, mitä haluaisi tehdä.

Keskiviikkona 29.5. päivitetään CV:tä ja muita työnhakupapereita.

Vetovoimala-projektista tulevat opettajat Katja ja Outi työskentelemään Thinglink-projektitiimin kanssa klo 14-15.30.

Krishnan viimeinen työpäivän ennen kesälomaa. Krishna palaa elokuussa. Hyvää lomaa!

Torstai 30.5. on helatorstai eli vapaapäivä. Muistakaa levätä myös välillä!

Perjantai 31.5. jatketaan CV:n ja työnhakupapereiden päivittelemistä Arton kanssa. Nina ei ole pajalla tänä perjantaina.

Tästä viikosta eteenpäin Arto on kokopäiväisesti joka päivä pajalla. Mahdollisista poikkeuksista ilmoitetaan maanantaisin.

GitHub ja Netlify

Oman nettisivun lisääminen nettiin

Kuka minä olen?

Moi, mä olen Jarno. Alotin täällä pajalla 15.4 ja oon tehnyt lähinnä nettisivuja. Oikeasti mua kiinnostaa eniten oikea ohjelmointi ja ohjelmointikielet kuten Python, mutta jokaisen on aloitettava jostain.

Olen vielä lähinnä wannabe ”koodari”, mutta intohimoa tähän työhön ja uuden oppimiseen multa löytyy vaikka muille jakaa. Toivottavasti sultakin.

Oon itse kulkenut lähinnä omaa polkua oppimisen ja projektien suhteen, mulla on omat kurssit mitä käyn Udemy nimisessä palvelussa. Kannattaa testaa, mahtava paikka. Täältä pajaltakin saa paljon materiaalia ja apua, mutta itse olen todennut että Udemy toimii mulla parhaiten.

Udemy ja Google, mitä muuta ihminen voi haluta?

Mistä tulen kertomaan?

Kerron miten GitHubiin saa laitettua omaa koodia, miten Netlifyn avulla saat nettisivusi helposti nettiin ja miten sekä mistä saat ilmaisen domainin.

Koska en oo yhtään luova ihminen niin tää kirjoitus tulee olemaan luultavasti tosi suoraviivainen ja tylsä.

Toisaalta…

Jos joku oikeasti tarvitsee apua miten esimerkiksi Netlify toimii, on ehkä parempikin että tää on suora ja nopea tutoriaali, kuin että tää olisi täynnä turhaa tekstiä millä ei oo mitään tarkoitusta. Onko tämä sitten hyvä vai huono juttu? Se jää lukijan päätettäväksi.

Mitä GitHub ja Netlify ovat?

Hyvä kysymys. GitHub on verkkosivu minne voi laittaa omaa koodia ja projekteja säilytettäväksi ja muiden ihmeteltäväksi. En täysin itsekkään edes tiedä miten GitHub toimii tai miten siitä voidaan ottaa kaikki hyöty irti, mutta tiedän miten sinne pystyy omaa koodia laittamaan. Tässä tapauksessa omien nettisivujen koodia.

Entä Netlify?

Netlify on myös netissä toimiva palvelu jonka avulla pystyy helposti laittamaan omat nettisivut nettiin. Netlify saa koodisi GitHubin kautta ja päivittää sitä automaattisesti sen mukaan kun itse päivität koodia. Kunhan siis muistat päivittää terminaalin kautta GitHubiin uudet tiedostosi. Parasta kuitenkin on että tämä kaikki on täysin ilmaista!

Netlify tarjoaakin eri hintaisia paketteja tarpeen mukaan mutta itse olen laittanut ilmaiseksi neljä nettisivua nettiin ja kaikki on toiminut erittäin hyvin ilman ongelmia. Ilmaisella ”Starter” paketilla siis pärjää jos haluaa laittaa testinä omia yksinkertaisia projekteja nettiin.

Aloitetaan

Okei, ensiksi me tarvitaan nettisivut. Jokin yksinkertainen projekti. Tein itse tosi nopeasti yhden todella yksinkertaisen sivun. Tai oikeastaan pelkän landing pagen.

Jos sulla ei valmiiksi jo ole, niin sun pitää asentaa Git. Sen saa täältä.

Muistaakseni mukana tulee myös Git Bash, joka ilmeisesti jotenkin helpottaa Gitin käyttöä Windowsilla. Mutta tärkeintä on kuitenkin se että sen avulla me saadaan todella helposti kerrottua Gitille se kansio mistä me halutaan ne tiedostot GitHubbiin siirtää.

Mulla se nettisivun kansio on työpöydällä. Joten mun ei tarvitse windowsin terminaalin (cmd) avulla erikseen sitä määrittää vaan riittää kun painan hiiren oikealla napilla kansiota ja valitsen ”Git Bash Here

Seuraava askel

Seuraavaksi meidän pitää kirjautua GitHubiin tai tehdä käyttäjätili jos sulla ei valmiiksi sitä jo ole.

Meidän pitää luoda uusi repository. GitHubin aivan oikeassa yläkulmassa on pieni plussan (+) merkki. Painakaa sitä ja sen jälkeen ”New repository

Sen jälkeen voit nimetä sen ja lisätä esimerkiksi kuvauksen. Voit myös valita tuleeko tiedostosi julkiseksi vai yksityiseksi. Itse laitan yksityiseksi koska tämä on pelkkä testi. Painakaa sitten ”Create repository”.

Seuraavaksi voi avautua aika hämmentävä sivu mutta palaamme siihen myöhemmin. Avatkaamme Git Bash uudestaan.

Git komennot

Nyt alkaa se osuus mistä en itsekkään ole vielä täysin varma.

Eli Git komennot.

Kirjoitetaan ensin komentoriville git init

Sitten git add .

Ja tuo piste tuon komennon perässä tarkoittaa että haluamme kaikki tiedostot. Isommissa projekteissa ei välttämättä haluta kaikkia tiedostoja GitHubbiin joten voi luoda .gitignore tiedoston sinne kansioon jotta voit erikseen määrittää mitä tiedostoja ei halua mukaan. Toinen vaihtoehto on olla lisäämättä git add komennolle pistettä ja manuaalisesti lisätä haluamasi kansiot ja tiedostot mutta mun mielestä siinä ei oo mitään järkeä.

En halunnut node_modules kansiota mukaan viimeisiimpään projektiini

Sitten lisätään commit. Eli git commit -m ’Initial Commit’

Jos olen oikein ymmärtänyt niin tuossa voi lukea mitä itse haluaa. Nyt kuitenkin laitoin ”Initial Commit

Palataan takaisin GitHubiin sillä tarvitsemme pätkän koodia mikä on meille valmiiksi generoitu. Eli git remote add origin ja sen jälkeen se toinen kohta missä lukee sun käyttäjätunnus ja repositoryn nimi. Kopioi koko rivi ja lisätään se komentoriville.

Kopioi koko rivi koodia

Jostain syystä CTRL + V ei toimi komentorivillä joten painoin hiiren oikeaa nappia ja klikkasin ”Paste

Kun tämä on tehty, lisäämme viimeisen pätkän koodia.

git push -u origin master

Nyt terminaalissa pitäisi näkyä kuinka se lisää tiedostot GitHubiin.

Näyttää kutakuinkin tältä

Seuraavaksi voit päivittää GitHub sivusi painamalla F5 ja sen jälkeen sun tiedostot pitäisi näkyä siellä.

Tadaa!

Netlify

Hyvä. Nyt kun meidän tiedostot on GitHubissa, pääsemme eteenpäin.

Mennään Netlifyn sivuille.

Kuten aikaisemmin, pitää luoda käyttäjätili jos sulla ei sitä jo ole.

Myös GitHubin kautta voi kirjautua mutta itse tein vaan erillisen tilin sähköpostilla.

Seuraavaksi painetaan ”New site from Git” ja avautuu uusi sivu mistä voidaan valita mistä palvelusta haluamme antaa koodimme. Valitse GitHub. Avautuu sivu joka pyytää sun lupaa yhdistää GitHubiin. Anna lupa.

Tämän jälkeen meidän pitää valita repository. Itselläni se on Testi1. Seuraavalla sivulla voimme lisätä tietoja. Itse en lisää mitään vaan painan ”Deploy Site

Nyt meille aukeaa sivu missä voimme hallita kaikkea. Sun oma nettisivu saa myös randomilla generoidun domainin ja pystyt sitä klikkaamalla katsomaan sivuasi.

Oma Domain

Näytän vielä miten saadaan ihan oma domain. Ilmaiseksi!

Yleensä domainit maksaa mutta olen löytänyt yhden palvelun mistä voi saada tiettyjä domaineja ilmaiseksi noin vuoden ajaksi.

Tämä palvelu on Freenom.

Tehkää myös tänne oma tili, jos teillä ei sitä jo ole. Kun olette kirjautuneet niin painakaa ”Services” ja seuraavaksi avautuneesta valikosta ”Register a new domain

Avautuu uusi sivu mistä voimme yrittää löytää oman uuden domainin. Itse kirjoitin ”Testi1” ja heti löytyi.

Voimme nyt valita minkä päätteen haluamme, itse otan ”.tk

Sen jälkeen menemme kassalle eli painatte ”Checkout” linkkiä ja avautuu uusi sivu missä näemme uuden domainimme. Halutessanne voitte oikealta ”Period” kohdasta valita enemmän aikaa. 12 kuukautta on maksimi ilmaiselle domainille. Tämän jälkeen ”Continue” ja avautuu vielä viimeinen sivu johon voimme lisätä tietomme ja nähdä kuitin. Itse en lisännyt oikeita tietoja koska tämä on pelkkä testi.

Viimeistelkää tilaus painamalla ”Complete order

Seuraavaksi avautuu sivu mikä kertoo mikä sun ”Order Number” on. Kannattaa ehkä ottaa ylös jos tarvitsee.

Nyt kaikki on lähes valmista ja voimme painaa alla olevaa sinistä linkkiä mikä palauttaa meidät jostain syystä etusivulle eikä client areaan. Ei se mitään. ”Services” valikosta valitkaamme ”My Domains” kohta ja meille avautuu sivu josta näkyy kaikki meidän domainit. Itselläni niitä on nyt kuusi, teillä luultavasti vain yksi. Painakaa ”Manage domain” nappia oikealta.

Viimeinen vaihe

Palataan takas netlify sivulle. Sivulla pitäisi näkyä isolla numerot 1, 2 ja 3.

Katsotaan kohtaa kaksi ja painetaan sitä ”set up a custom domain” linkkiä.

Sitten voimme kirjoittaa meidän domainin ja painaa ”Verify

Isolla todennäköisyydellä netlify ilmoittaa että domainilla on jo owner mutta se olemme me joten painetaan ”Yes, add domain

Avautuu uusi sivu ja painamme ”Check DNS configuration

Tämän yhdistämisen pystyisi ilmeisesti tehdä monella eri tavalla mutta mulla tää menetelmä (Nameservers) on helpoiten toiminut. Eli painetaan ”Set up Netlify DNS for … –>” linkkiä ja seuraavalla sivulla painetaan ”Verify

Netlify kysyy taas että olemmeko me owner, vastaamme myöntävästi.

Sitten taas ”Continue” ja viimeisellä sivulla meille aukeaa kohta mistä näemme ”Nameservers”. Meidän pitää palata takaisin freenom sivulle ja painaa sieltä managing sivulta ”Management Tools” ja seuraavaksi ”Nameservers

Valitaan ”Use custom nameservers” ja nyt voimme kopioida netlify sivulta ne neljä osoitetta ja lisätä ne freenomeen.

Lopuksi paina ”Change Nameservers

Nyt kaiken pitäisi toimia ja voimme kirjautua ulos freenomesta ja palata takaisin netlify sivulle ja painaa ”Done

Seuraavaksi pitää vain odottaa sillä menee hetki kunnes kaikki toimii. Luultavasti ainakin 5-10 minuuttia. Voit katsoa toimiiko kaikki yksinkertaisesti päivittämällä sun netlify sivua mikä sulla on auki ja sen pitäisi joka kerta automaattisesti tarkistaa DNS configuration.

Spam that F5!

Kun DNS configuration on valmis, ne ”Check DNS configuration” tekstit missä on keltainen kolmio pitäisi poistua ja tilalle tulla oikeeseen reunaan vihreät laatikot missä lukee ”Netlify DNS

Onneksi olkoon! Sinulla on nyt netissä oma nettisivu omalla domainilla. Halutessasi voit vielä lisätä sille https suojauksen samalta sivulta, sieltä ihan alhaalta missä lukee ”HTTPS

Mulla se jostain syystä tuli automaattisesti itsestään mutta sen pyynnön voi itsekkin lähtettää painamalla niistä kahdesta alhaalla olevasta napista vasempaa.

Nyt voit tyytyväisenä käydä sivullasi millä tahansa laitteella, mistä tahansa, milloin tahansa. Cool, right?

Jos sun sivu ei heti toimi vaikka netlify väittää kaiken olevan kunnossa, odota hetken aikaa.

Netlifyn avulla sun sivulle voi saada myös muita ominaisuuksia. Esimerkiksi täysin toimivat lomakkeet (forms) tai vaikkapa captchan estämään spämmiä.

Jos joskus kirjoitan toisen blogikirjoituksen, voin kertoa niistä lisää.

Nää Gitin komennot toimii myös esim. VSCoden terminaalin kautta suoraan. Jos valittuna on bash. Ison projektin kanssa tämä voi olla helpompaa ja vaikka .gitignoren saa helposti lisättyä.

Loppusanat

Luultavasti en osannut selittää kovinkaan hyvin mutta jos tästä jollekkin on apua niin hyvä niin. Saatoin myös selittää jonkin asian väärin tai jättää kertomatta, anteeksi myös siitä. Nää asiat on mullekkin vielä aika uusia.

Alempana on vielä kaksi videota erittäin hyviin tutoriaaleihin jotka luultavasti avaa tätä aihetta enemmän ja paremmin kuin minä.

Jos aihe kiinnostaa, suosittelen lämpimästi katsomaan ainakin noi videot. Itse en ole katsonut niitä (vielä), joten tein tämän kirjoituksen täysin omien kokemuksien pohjalta.

Tolla äijällä on myös erittäin hyvä youtube kanava mistä löytyy satoja videoita koodaamiseen liittyen. Erittäin laadukasta materiaalia jos koodaaminen ja sen oppiminen kiinnostaa.

Tuohon alas saa myös mieluusti jättää kysymyksiä ja kommentteja!

Kiitokset lukijalle!

— Jarno Lehtonen

Viikko 21

Lämpimän viikonlopun jälkeen saapui lämmin ja aurinkoinen maanantai. Aamupalan vietimme rennoissa merkeissä omassa taukotilassa, sillä normaali lokaatiomme oli tällä kertaa varattuna muihin juttuihin. Vaihtelu virkistää, kuten sanotaan!

Maanantaina 20.5. Krishna ja Arto ovat aamupäivällä työpajojen verkkosivuihin liittyen palaverissa. Urapalveluista tulevat Riikka ja Antti tutustumaan Digitalents Academyyn klo 14.30.

Tiistaina 21.5. uusi työkokeilija aloittaa Digitalents Academylla. Tervetuloa!

Klo 9.30 menemme CV/LinkedIn-valokuvaukseen Digitalentsille niiden kanssa, jotka eivät vielä ole kuvauksissa käyneet.

Iltapäivällä mennään jo tuttuun tapaan liikkumaan Mediakylpylän kanssa. Tällä viikolla vaihtoehtoina on polttopallo, lautapelit, pesäpallo, kuntosali ja jenga. Muista ilmoittautua mukaan!

Elli on tiistai-iltapäivän poissa.

Keskiviikkona 22.5. Ami Vetovoima-hankkeesta tulee vierailulle klo 9.00. Arto, Krishna ja Elli ovat iltapäivän kokouksessa.

Torstaina 23.5. Arto tulee pajalle noin klo 10. Krishna on suunnitelupäivällä koko päivän, mutta tavoitettavissa Slackin ja WhatsAppin kautta. Torstain poissaoloilmoitukset ilmoitetaan Artolle. Iltapäivällä Arto ja Elli ovat koulutuksessa.

Työvalmentaja tiimin uusi jäsen ottaa kahvilapalvelut vastuulleen, joten Arto on ensi viikosta alkean pääsääntöisesti päivittäin Academylla.

Perjantaina 24.5. Meilahden yläasteelta tulevat opinto-ohjaajat Johanna ja Joonas käymään pajalla klo 9.00. Arto on klo 10-12.30 Hattulantiellä pidettävässä työvalmentajatiimin tapaamisessa, mutta palaa iltapäivällä Academylle. Artolla ja Krishnalla on tapaaminen CGI:n kanssa klo 13 alkaen puutalossa.

Mediakylpylän kuva- ja videomateriaalin kuvausprojektin tiimi tulee tutustumaan Digitalents Academyyn iltapäivällä. Kuvaustiimi tulee kuvaamaan videota ja valokuvia Digitalents Academyn toiminnasta. Materiaalia käytetään jatkossa Nuorten työpajojen verkkosivuilla.

Kuvaustiimi toivoi seuraavia asioita:

  • Varmistus siitä, että pajan työntekijät ovat allekirjoittaneet kuvausluvat.
  • Olisi hienoa, jos Academylta löytyisi pajalaisia, jotka olisivat halukkaita tulemaan Mediakylpylään äänittämään ns. “lentäviä lauseita” ja ajatuksia Digitalents Academyyn liittyen

Viralliset kuvauspäivät ovat 3.-15.6. ja toive kuvauspäivästä ilmoitetaan 27.5. mennessä kuvaustiimille.

Perjantai: Käyttöliittymäsuunnittelusta

Käyttöliittymän selkeys on tärkeää käyttäjäkokemuksen kannalta. Jos käyttäjä ei saa suoritettua haluamaansa toiminta kohtuullisessa ajassa tai koko tehtävän suorittaminen on liian monimutkaista, vaihtaa käyttäjä palvelua toiseen nopeasti.

Käyttöliittymä- ja ulkoasusuunnittelu ovat erityisen tärkeitä verkko- ja mobiilipalveluita tai -sovelluksia tehdessä. Niiden on nimenomaan oltava käytettäviä ja mieluiten helposti. Vaikka et itse olisi intohimoinen visuaalinen suunnittelija, on muutama asia hyvä tiedostaa.

Tunne käyttäjäsi

Mieti ketkä käyttävät sovellustasi. Kohderyhmä kannattaa rajata tarkkaan. Rajatulle kohderyhmälle on helpompi kohdentaa palveluita ja hyvin tehtynä sovelluksen käyttö laajenee myös tarkennetun kohderyhmän ulkopuolelle. Jos taas yrittää tehdä jokaiselle jotakin, päätyy yleensä tekemään sovelluksen, joka ei vihastuta, muttei myöskään ihastuta ketään.

Kuva: Taras Shypka, Unsplash

Jos kohderyhmääsi kuuluu kokemattomampia koneen käyttäjiä, kannattaa se ottaa huomioon. Kaikki itselle tutut traditiot eivät välttämättä ole yhtä itsestään selviä kaikille, jolloin toiminnallisuus ja sivustolla liikkuminen kannattaa tehdä jopa “liian helpoksi”.

Helppokäyttöisyys

Meillä kaikilla on paljon mielessä päivän aikana, eikä palvelusi käyttäjä ole poikkeus. Siksi käyttöliittymää suunniteltaessa on pyrittävä tekemään liikkumisesta helppoa ja navigaatiosta selkeä ja johdonmukainen. Älä piilottele tärkeitä sisältöjä pitkien linkkipolkujen takana, vaan laita tärkeät elementit hyvin esille. Pitkäjänteinenkin käyttäjä turhautuu nopeasti, jos hän joutuu etsimään tarvitsemaansa tietoa useiden epämääräisten linkkien takaa.

Kuva: Ben Kolde, Unsplash

Jos elementissä on toiminnallisuutta, klikattava alue kannattaa tehdä mahdollisimman suureksi elementtiin nähden. Jos linkki esimerkiksi on suorakaiteen muotoisella värillisellä taustalla, kannattaa koko kuvio tehdä klikattavaksi pelkän tekstin sijaan. Linkin väriä voi myös vaihtaa auttaakseen käyttäjää navigoimaan muuttamalla linkin väriä, kun käyttäjä on kyseisellä sivulla tai on jo vieraillut siellä.

Pyörää ei tarvitse keksiä uudestaan

Kaikkea ei tarvitse keksiä itse alusta alkaen vaan on hyväkin noudattaa tiettyjä traditioita. Kun palvelu tai sovellus tuntuu käyttäjälle ennestään tutulta, on sitä miellyttävämpi ja helpompi käyttää. Kannattaakin katsella sovelluksia ja verkkosivuja, joista itse pidät ja miettiä mikä niistä tekee hyvän. Kopioiminen voi olla hyvää harjoitusta, mutta lopulliseen tuotteeseen ei kannata ottaa kaikkea samaa. Haluathan kuitenkin erottua joukosta ja välttyä syytteiltä? Logoon, navigaatioon, kirjautumisominaisuuksiin ja vastaaviin elementteihin voi kuitenkin ottaa mallia.

Kuva: Harpal Singh, Unsplash

Paljon käytetään myös metaforisia symboleita. Ne ovat yksinkertaisia kuvia, jotka luovat mielikuvan. Esimerkiksi talosymbolilla viitataan etu- eli kotisivuun ja kirjekuori viittaa sähköpostiin. Symboleita löytyy paljon mm. Font Awesomista ja IconFinderista. Voit myös itse muokata ja luoda symboleita, mutta muista pitää ne riittävän tunnistettavina,  jotta ne palvelevat tarkoitustaan.

Tyhjä tila

Tyhjää tilaa ei tarvitse pelätä. Tyhjää tilaa kannattaa ajatella yhtenä elementtinä siinä missä muutkin. Sillä voi luoda ilmaa ja antaa tilaa hengittää. Se siis rauhoittaa ulkoasua ja ilmettä. Tyhjällä tilalla voi myös korostaa tärkeimpiä elementtejä luomalla tilaa niiden ympärille, antamalla niille tilaa.

Kuva: Water Journal, Unsplash

Kaiken voi oppia

Parhaiten oppii tekemällä ja katsomalla ajatuksen kanssa. Kannattaa tutkia verkkosivuja ja sovelluksia, joista pidät ja pohtia mikä niistä tekee hyvän – tai ehkä jopa miten niitä voisi parantaa. On hyvä pitää mielessä yksinkertaisuus ja helppokäyttöisyys, tehdä sovelluksesta tai sivustosta mahdollisimman simppeli käyttötarkoitukseensa nähden. Ja kuten aiemmin sanoin, on kopioiminen hyvää harjoitusta. Yritä vaikka luoda lempisivustostasi kopio Adobe XD:llä!

Elli Vähäkangas

Viikko 20

Uusi viikko on jälleen aluillaan ja tällä viikolla tavoitteena on ottaa enemmän riskejä. Teknologia kehittyy ja meidän on opittava uutta, jotta pärjäämme alati muuttuvassa maailmassa. Kuten Mark Zuckerberg sanoi “The biggest risk in not taking any risk”.

Maanantaina 13.5. joukkoomme liittyi uusi jäsen. Tervetuloa! Arto on aamun työvalmentajien tapaamisessa. Arto tavoitettavissa klo 11.00 alkaen. Krishna ja Arto ovat iltapäivällä klo 13 alkaen palaverissa Digitalentsilla.  

Tiistaina 14.5. päivässä ei ole poikkeuksia vaan työskennellään normaalisti pajalla. Tiistaina on taas voimatunti klo 14-15 Mediakylpylän kanssa. Muista ilmoittautua mukaan Flingan kautta! Linkki ohjeineen on jaettu Slackissa.

Keskiviikkona 15.5. Krishna on suunnittelupäivällä koko päivän, mutta on tavoitettavissa puhelimitse sekä Slackin tai WhatsAppin kautta.  

Torstaina 16.5. Arto on koulutuksessa. Torstaina pidetään pelityöpaja, jossa kokeillaan pelin suunnittelua Krishnan ohjauksessa. Pajaan osallistuu halukkaat ja muut jatkavat omia hommiaan normaalisti. Tarkoituksena on kokeilla Digitalents Academyn opetussuunnitelman pelillistämistä. Peli tehdään Seppo.io-pohjalle ja muilta osin peli saadaan suunnitella ja toteuttaa alusta loppuun itse. Pelityöpajalla käydään läpi ja suunnitellaan ainakin seuraavia teemoja: mitä peli on, miten peli tehdään ja miten pelistä tehdään pelattava ja houkuttava.

Perjantaina 17.5. Arto on koulutuksessa. Terveydenhoitaja Maria Umor tulee esittäytymään pajalle. Toukokuun puolesta välistä on mahdollisuus käydä terveystarkastuksessa. Nina on pajalla. Maria ja Nina kertovat aiheesta lisää.  

Huom!  Arto (työvalmentaja) paikalla normaalisti viikoittain maanantaisin, keskiviikkoisin ja torstaisin kokopäivän ja tiistaina iltapäivisin.

E-kauppa Reactilla

Aloitin työpajalla 15.4.2019 ja aiemman kokemuksen vuoksi pääsin nopeasti vauhtiin ja rakentamaan portfoliotani. Ensimmäisenä todellisena projektinani kehitän e-kauppapaikkaa nimeltä Tophat Whale. Aloitin kehitystyöt 29.4. Tarkoituksena on harjoitella React ja full-stack taitoja. Tässä esittelen valintojani joita projektissa jouduin tekemään.

Alku:

Käytin erinomaista create-react-app pakettia jonka saa npm:llä. Se sisältää hyvän alun omalle React projektille.

Ulkoasu:

Käytän Bootstrapin käteviä komponentteja ja tyylejä.
<button className="btn btn-danger mx-5">
Luo punaisen nappulan (btn btn-danger) jossa on isot marginaalit sivuilla (mx-5).

Yllä bootstrapin tyylejä käytetty navigointipalkin, lomakkeen ja onnittumisviestin näyttöön.

Logo:

Yhdistin inkscapella Googlen noto emojien valaan ja silinterihatun sivujen logoksi. Tällöin sain skaalautuvan svg:n käyttööni.

Favicon:

Loin sivujeni logosta kaikille laitteille sopivat iconit ynnä muut realfavicongenerator.net palvelulla. Tällöin esimerkiksi kun iPhone/Android käyttäjä laittaa omalle kotinäytölleen pikakuvakkeen sivulleni, on ikonina sivun logo. Sama pikkulogo näkyy mm. myös selaimen välilehdessä:

Data:

Päätin käyttää NoSQL dokumentti tietokantaa perinteisen relaatiotietokannan sijaan. MongoDB oli harkinnassa, mutta päädyin kuitenkin käyttämään Firebasea, jota olen muutama vuosi sitten kokeillut. Firebase on ilmainen pienille projekteille. Heillä oli tarjolla uudempi tietokantatuote Firebase Cloudstore, johon en tarkemmin tutustunut, vaan käytin vanhempaa Realtime Databasea. Käyttö on helppoa Node+React combolla. Tarkoituksena on tallettaa ainakin kaikki muuttuva data Firebaseen kuten tilaukset, tuotetiedot, käyttäjätilit ja palautteet. Tuotetiedot tulee kirjoitushetkellä vielä projektin sisällä olevasta tiedostosta.

Toiminnot:

Suunnittelin ensin sivulla olevan tietosivun, yhteydenottolomakkeen, tuotelistauksen, jokaiselle tuotteelle oman tuote sivun sisältäen lisätietoja ja zoomattavan kuvan, ostoskorin ja ostolomakkeen. Myöhemmin meidän valmentaja Arto Aitta ehdotti, että sivulla olisi kirjautuminen hallintatilille jolla voi katsella esimerkiksi tulleet tilaukset. Aion implementoida näiden lisäksi myös asiakastilit jolloin tuotteiden tilaaja voi tarkastella omia tilauksia ja tallentaa ostoskorin sisällön myöhemmäksi. Jos käyttäjä ei ole sisäänkirjattu, ostoskorin sisältö tallennetaan HTML5 localstoreen jolloin sivulta voi poistua ja ostoskori säilyy sessioiden välillä.

Kuvan zoomaus tuotesivulla:

Magnifier.js, react-magnifier ja https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp olivat harkinnassa. w3schoolsin ratkaisu oli ensin kokeilussa, mutta jostain syystä se toimi vain osittain. Vaihdoin react-magnifier komponenttiin jonka saa npm:n kautta. Se toimii.

Routing:

Käytin react-router-dom paketin BrowserRouter komponenttia tähän tapaan:

Tällä valitaan helposti mikä React komponentti näytetään millekin URL:lle. Viimeinen Route matchaa kaikkiin väärin kirjoitettuihin osoitteisiin jolloin voimme tehdä oman ”sivua ei löydy” sivun. /details/:id on dynaaminen URL, siihen sopisi esimerkiksi /details/123 jolloin 123 välitetään Details komponentille propsina niin voidaan näyttää oikean tuotteen tiedot. Tämä myös mahdollistaa suoran linkityksen tiettyihin tuotteisiin.

Hostaus:

Yritin käyttää Github-pages palvelua, mutta sinne menevät muutokset näyttävät tulevan voimaan hitaammin ja minulla oli erinäisiä ongelmia palveluun liittyen. Palvelu on suunniteltu staattisille sivuille jolloin tuotteiden dynaamiset URL:it eivät toimi valitsemallani router ratkaisulla. Myös kuvien näyttämisessä oli ongelmia. Siirsin hostingin firebasen ilmaiseen hostingiin, jolloin kaikki toimii niin kuin pitää.

Tietoturva:

Käyttäjien salasanat pitää tallentaa suolattuna tiivisteenä, mikä on vielä työn alla tätä kirjoittaessa. Firebasen api avaimet on eristetty .env tiedostoon jota ei pushata githubiin. Ne saadaan applikaatiossa käyttöön dotenv kirjastolla: require('dotenv').config() ja päästään lukemaan process.env.FIREBASE_API. HTTPS on hostingissa oletuksena käytössä jolloin on turvallisempaa syöttää mm. salasanoja.

Mikko Översti

Keskiviikko: Aamupalan merkityksestä

Aamupala – tuo päivän tärkeimmäksi ateriaksikin tituleerattu ruokahetki. Millainen sitten on hyvä aamupala ja miksi se on niin tärkeä vai onko?

Hyvä aamupala on monipuolinen ja sisältää tuoreita kasviksia tai vihanneksia, kuituja sekä proteiinia ja hyviä rasvanlähteitä, esimerkiksi avokadoa tai siemeniä. Aamupalaan olisikin hyvä suhtautua yhtenä päivän pääaterioista, sillä se kantaa pitkälle päivää.

Aamupala ei kuitenkaan maistu heti herättyä kaikille. Sen voikin ottaa vaikka mukaan kouluun tai työpaikalle ja syödä jopa parin tunnin sisään heräämisestä. Myös monipuolisesti koostettu smoothie voi mennä kiinteää ruokaa helpommin alas aamutuimaan.

Miksi aamupalan syöminen sitten on niin tärkeää? Tutkimusten mukaan erityisesti lapsilla ja nuorilla aamupalan syöminen näyttäisi parantavan suoritusta erilaisissa tarkkaavaisuutta, keskittymiskykyä ja muistia vaativissa tehtävissä verrattuna niihin, jotka eivät syö aamupalaa. Aamupala antaakin energiaa aivoille ja auttaa niitä toimimaan tehokkaammin aamun ja aamupäivän aikana.

Aamupala auttaa myös painonhallintaan, sillä aamupalan syöneenä nälänhallinta on parempi. Silloin on helpompi valita terveellisempi lounasvalinta ja hillitä iltasyöpöttelyä. Jos aamupalan jatkuvasti, voi se myös altistaa 2. tyypin diabetekselle ja sepelvaltimotaudille.

Meillä Academyssa aamupala on viikon aloitushetki ja kevyt laskeutuminen arkeen viikonlopun jälkeen. Vaikka aamupalan syömisellä on paljon terveysvaikutuksia, ei meillä ketään pakoteta syömään sitä. Haluamme aloittaa viikon yhdessä samassa tilassa, mieluiten saman pöydän ääressä. Keskustelemme viikonlopun kuulumisista ja käymme lopuksi läpi alkavan viikon aikataulun.

Yritämme koostaa aamupalan monipuolisesti sekä vastata työkokeilijoiden toiveisiin. Aamupalatilaisuuden pitäminen alkoi syksyllä ja jatkuu edelleen. Yleensä kaikki tarjottava ei mene heti, mutta ylijäämiä on hyvä napostella vaikka välipalaksi pitkin viikkoa. Usein loppuviikosta ei ole enää paljoakaan jäljellä.

Meillä on tarjolla tuoreita hedelmiä, pähkinöitä, mehua, kahvia ja teetä, karjalanpiirakoita, juustoa, jogurttia ja ties mitä muuta. Haluamme panostaa aamupalatarpeiden tuoreuteen ja laatuun. Pieni herkuttelu on myös sallittua ja pöydältä voikin löytää tummaa suklaata sekä Fasupaloja.

Mitä sinä syöt aamupalalla? Entä mitä haluaisit tarjottavaksi maanantain aamupaloille Digitalents Academyyn? Toiveet voi kertoa Artolle tai Ellille – tai kommentoida alla olevaan viestikenttään!

Terveisin Blogitiimi

Lähteet:
Sydänmerkki: Terveellinen aamupala antaa hyvän pohjan päivälle
Avainapteekit: 5 syytä miksi aamupalan syönti kannattaa
Pronutrionist: Aamiaisen merkitys terveydelle. Mitä tutkimustieto kertoo?

Aamupala 6.5.

Toukokuun ensimmäinen kokonainen viikko on aluillaan ja kesä lähestyy vääjäämättä, vaikka ilma onkin vielä kirpeä. Aamupalalla polttava puheenaihe olikin mahdollisesti loppukeväästä järjestettävät kevätjuhlat – kunhan pääsemme yhteisymmärrykseen päivän aktiviteetista.

Suunnitteilla on kevätjuhlat, joihin kutsuttaisiin kaikki pajalla olleet sekä syys- että kevätkaudelta. Olisi mukava nähdä miten aiemmin lopettaneilla menee sekä luoda yhteisöllisyyttä ja verkostoja uusien ja vanhojen pajalaisten välille mukavan aktiviteetin lomassa. Säiden salliessa toiveissa olisi piknik.

Keväällä olisi tarkoitus pitää vielä jokin muukin aktiviteettipäivä parhaillaan pajalla olevien kesken. Ideoita riitti Linnanmäestä Tallinnan päiväristeilyyn. Vielä mitään ei ole lyöty lukkoon ja ideoita voi vielä heitellä. Markus lupasi kerätä listaa.

Maanantaina 6.5. Krishna on koulutuksessa koko päivän. Tarja on puutalolla tavattavissa ja Elli ja Arto ovat koko päivän paikalla.

Tiistaina 7.5. päivä sujuu taas normaalisti ja menemme iltapäivällä taas viettämään Voimatuntia Mediakylpylän kanssa Kullervonkadulle. Muistakaa ilmoittautua Flingan kautta itseänne kiinnostavaan toimintaan! Tällä kertaa vaihtoehtoina on koripallo, lautapelit, kävely metsässä tai kuntosali.

Keskiviikkona 8.5. Markus ja Daniela pitävät esitelmänsä Scrumista. Arto on aamupäivän paikalla.

Torstaina 9.5. Krishna on aamupäivän palaverissa, mutta tulee Academylle lounaan jälkeen.

Perjantaina 10.5. Krishna, Arto, Tarja ja Nina ovat suunnittelupalaverissa koko päivän. Veikko Digitalentsilta on pajalla koko päivän.

Terveisin Blogitiimi