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

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

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

Perjantai: Ben the UI man

I started at Digitalents Academy in the end of October in 2018. I didn’t know much about coding beforehand when I started. I did have some experience in Java language which helped me to get started faster. First days went by by learning some web coding languages such as HTML and CSS. I made pretty fast progress. Soon I was diving into some actual programming languages like JavaScript.

I continued with my coding practices and I did enjoy it… until I didn’t. For me, after couple of months, it got boring. The problem solving which was the main hook in programming became either too challenging or not the kind of problem solving I would imagine myself enjoying as a career. But at the same time I noticed myself enjoying something else in this new and promised land of coding.

I remember hearing the words UI and UX design once in a career exhibition event in November 2018. First time I heard them they sounded like a couple of bizarre tech words I didn’t have to bother myself with. At least at that time. Now, it is the career path I am fully pursuing. Thanks to Digitalents Academy, I surprisingly found myself something that I am naturally enjoying and passionate about.

Foodar App layout design

The last 3 months of my 6 month contract in Digitalents Academy went into learning as much as I could about UI and UX designing. I used internet as my main source of learning material and also some books. Made many projects, which some of them I used to build my portfolio with. The design of interactions and communication between human and machine was the thing that drew me in even deeper. With this, I applied to Digitalents Helsinki in the end of April 2019. I got in as a UI/UX designer and fulfilled my goal. 

Six months after Digitalents Academy I have pushed my knowledge about the world around me right now and what the future expects of us.  The possibilities we have as people and the responsibilities we have as people.

I learned the strategies of working efficiently and I learned the importance of rest. I sucked at the latter. 

Because I was dedicating so much for what I was pursuing, I often found myself getting lost which took a toll of my everyday wellbeing. I had ups and downs but I got past them. So these past six months also taught me a lot of how to be a normal human instead of a coffee fueled robot. Thanks!

In and out — Ben the UI man 26.4.2019

I found my path in the codes.

I’ve been interested in coding and video games ever since I was little, I started playing video games at the age of 3 and my step dad was a programmer at the time, the passion for both of those is still there and will be there most likely forever.

I started my studies in the ICT field for the first time in 2015 autumn I was 15 about to turn 16, but it felt like it wasn’t quite for me since there was a lot of stuff including electricity and circuit boards etc. and after 2 years I decided to switch fields since I thought it was a waste of time and it also made me question my future, I was thinking where do I see myself in the future, what field do I see myself working at and then I decided to give a try as a car mechanic, which also, after 1 year didn’t feel quite right.

I ended up going to Ohjaamo Helsinki where I got guidance towards the fields I told them I liked, and I also told them that I did not want to go to school, I would like to maybe go through some course or some bootcamp and then I got referred to Digitalents Academy, where I’ve been now since mid-november of 2018. I’ve learned everything I know about coding here, I’ve learned a lot how to be professional at a workspace, and how to overcome challenges. I rarely talk to people here even though I’ve been told I’m a loud mouth, but knowing myself I know if I make too many friends at a workplace or a school, I will not get much work done, so I try to manage my time by not chitchatting during working hours and instead use my free time for that kind of stuff. I always have been getting the help and push needed to proceed forward in the field that interests me the most, Artificial Intelligence. Most places require you to have 3 years of experience in the field to even become a trainee, so I also have decided to learn backend development on the side to help me persuade my end goal in the field of Data Science.

Solving problems and overall making the computer do stuff that I tell it to do, gives me a fulfilling feeling. There have been days I’ve been feeling like a genius for solving a problem in a bit difficult looking code and there have been days where I think of myself as a complete beginner for not knowing some basic stuff. I know as long as I am able to overcome those bad days and keep on pushing towards my goal I will have less and less of those days, but I can’t expect there to never be bad days, I just got to learn how to solve problems and that’s what has been keeping me going, solving problems. I started off by learning some basic python syntax and then I started taking chunks of code off of internet, sometimes other peoples failed code and trying to correct those. Eventually I started to work on a chatbot database with some guidance from YouTube.

The database has been successful but I am still figuring out a few errors with the chatbot itself, whilst also trying to earn a few certificates. Both will prove my skills. After months of writing code I’ve also learned to be more patient, if I would give up a project simply because of an error, I wouldn’t succeed in this field, and after these months I’ve been here. I’ve never been more sure about anything than I am about this career being the right one for me.

Perjantai: Ennakkoluulot

Moikka! Tän perjantain postauksesta vastaan viimeisen päiväni kunniaksi mä, Venla, blogitiimin toinen perustajajäsen. Ajattelin kertoa omasta kokemuksestani työpajalla, tänne päätymisestä ja ennakkoluuloista. Oon 20-vuotias kevään 2018 ylioppilas Helsingistä. Kiinnostuin IT-maailmasta ekan kerran ala-asteikäisenä, kun sain eteeni ensimmäisen Linuxdistroni ja siihen kuuluneen TuxPaintin. Piirtämistä aiemmin lyijykynien varassa harrastaneena digitaalinen taide tuntui mielettömän siistiltä, ja ihastuin ideaan heti. Ekasta kotikoneesta avautui taidetyökalun ohella portti tiedonhakuun, opiskeluun ja sosiaaliseen kanssakäymiseen internetin välityksellä, eikä sen jälkeen paluuta ole ollut. Vaikka peruskoulu menikin koneiden kanssa tavalla tai toisella räpeltäessä, kesti lukion loppupuolelle asti tiedostaa se potentiaalisena uravaihtoehtona.

GIF: Giphy

Niinpä päätin hakea Helsingin yliopistoon opiskelemaan tietojenkäsittelytiedettä, jotta voisin samalla perehtyä muihin kiinnostaviin aloihin valinnais-/sivuaineopintojen kautta. Yliopisto tuntui lukion jälkeen loogiselta jatkopaikalta, koska olen aina pitänyt opiskelusta. Opiskelupaikka jäi kuitenkin sillä kertaa saamatta, ja jouduin improvisoimaan varasuunnitelman. Loppusyksynä aloin skeptisenä selailemaan nuorten työpajoja, ja törmäsin Digitalents Academyyn. Ajattelin, että työpajalla ”lusmuilu” saattaisi olla opintojeni kannalta järkevämpää hommaa kuin kaupan kassana istuskelu ja kokeilin hakea mukaan. Hakuprosessista selvittyäni pääsin aloittamaan joulukuussa 2018. Ohjelmointiin en ollut juuri tutustunut keskenjäänyttä MOOC-ohjelmointikurssia ja satunnaisia Python-kokeiluita lukuunottamatta. Kaikesta koneella näpertämisestä huolimatta olin melko pihalla koodauksen suhteen, ja tiesin vain, että se voisi olla itselleni osuva uravalinta.

Pajalla olen ollut nyt melkein neljä kuukautta, ja Digitalents Academy on ollut mieletön kokemus. Muutamassa kuukaudessa paikka tuntuu toiselta kodilta, jossa saa opiskella, työskennellä ja tutustua alaan rauhassa työmarkkinatuen turvissa. Mielenkiinnonkohteeni ovat selkeytyneet huomattavasti, ja osaavien ohjaajien avulla aikaisempi arvaus omasta tulevaisuudesta on muuttunut todelliseksi tavoitteeksi jota kohti edetä. Myös ihanat tyypit, rutiinin rakentuminen, rajaton kahvi ja hyvät lounaat ovat olleet iloksi. Vierailut tapahtumiin, yrityksiin ja oppilaitoksiin ovat lisänneet mahdollisia vaihtoehtoja tulevaisuudelle.

Kuva: Pexels

Käytännössä pajatoiminta on hyvin itsenäistä ja vapaamuotoista, mutta apua ja tukea on aina saatavilla. Hakattuani päätäni näppäimistöön nettisivukoodauksen yksitoikkoisuuden kanssa päädyin muuntamaan polkuani sopivammaksi kouluttajamme kanssa. Niinpä tällä hetkellä perehdyn niin klassisten native-Androidsovelluksien (Java) kuin PWA-sovelluksien tekemiseen (Angular, TypeScript). Sen lisäksi sain vapauden suorittaa yliopiston MOOC-ohjelmointikurssia, jotta tänä syksynä pääsisin vihdoin opiskelemaan. Olen opiskellut kokeilun aikana myös satunnaisia kursseja Udemyssä (datastruktuurit, algoritmit), valokuvausta ja sisällöntuotantoa, agile framework Scrumia, Git+Githubin käyttöä, ulkoasujen suunnittelua, blogin pystytystä ja tietysti frontendkoodauksen perusteita. Projektien lomassa yleiskäsitykseni IT-maailmasta on laajentunut huomattavasti niin teoreettisella kuin käytännönkin tasolla.

Onnekkaiden sattumien ja rekrytointitehtävien sinnikkään hakkaamisen kautta sain jopa työpaikan Slushilta, jonne siirryn ensi viikolla. Aloittaessani en olisi voinut kuvitellakaan, että pajajakson seuraus voisi olla näinkin positiivinen. Ennakkokäsitykseni työpajatoiminnasta on osoittautunut kaikin puolin vääräksi, enkä keksi välivuoden viettämiseen parempaa paikkaa – etenkin jos IT-ala on itselle vielä melko tuntematon suo. Yhteenvetona voidaan siis todeta, että Digitalents Academyssä ”lusmuilu” oli huomattavasti parempi valinta kuin kaupan kassa. Haikeana Academystä eteenpäin siirtyessäni tulen muistelemaan kokemusta lämmöllä, ja suosittelemaan toimintaa muillekin.

Venla

Perjantai: Games Factory Demo Day

Perjantai päättyi hieman erilaisissa merkeissä, pääsimme osallistumaan Games Factoryn Demo-päivään. Esittelimme siellä myös omaa toimintaamme.

Saapuessamme kahden aikoihin Games Factoryn Event Roomiin koimme yllätyksen, kun tuolit eivät olleetkaan samanlaisissa rivistöissä kuin yleensä. Pian meille selvisikin että kyseessä on varsin rento kokoontuminen, kun yleensä tapahtumat ovat virallisempia. Pöydille ladottiin virvokkeita, kuten nachoja ja kivennäisvettä, joita sai vapaasti ottaa. Screenillä pyöritettiin erilaisia demoja peleistä ja löytyipä yhdestä nurkasta VR-teknologiaakin.

Tapahtuma on kuukausittain järjestettävä talon sisäinen tapahtuma, jossa yritykset voivat esitellä omia demojaan ja pitää puheenvuoroja sekä tietysti verkostoitua. Tapahtumassa kuitenkin painotettiin, ettei sillä ole mitään agendaa – on vain mukava viettää aikaa yhdessä ja tutustua muihin talon sisällä. Siksihän mekin olimme sinne tulleet.

Ongelmana meillä on ollut se, ettei meitä tunnisteta Games Factorylla. Siksi halusimme esitellä lyhyesti toimintaamme ja tekemisiämme sekä nähdä mitä muut talossa tekevät. Digitalentsilta meidän kanssamme esittelemässä toimintaa oli Jukka Kalkasmaa. Hän kertoi ensin Digitalentsin toiminnasta ja me jatkoimme siitä esittelemällä Academyn ja näyttämällä lopuksi muutamia projekteja, joita olemme tehneet.

Meidän iloksemme tapahtumassa oli mukana pieni koira, joka oli iloinen jokaisesta paikalla olevasta ihmisestä.

Terveisin Blogitiimi

Perjantai: Vinkkejä hyvään uneen

Kuva: Kate Stone Matheson, Unsplash

Unettomuus on yleistä. Sitä tapahtuu meille kaikille ja ainakin joka kolmas aikuinen kärsii vuoden aikana unettomuudesta. Henkilön katsotaan kärsivän unettomuudesta, jos hän kärsii unen saamisen tai unessa pysymisen vaikeudesta vähintään kolmena yönä viikossa. Olen itse kärsinyt unettomuudesta/ilta-aktiivisuudesta ihan pienestä lapsesta asti ja tässä on muutama vinkki mitkä ovat auttaneet minua:

1. Tärkeintä on mennä aikaisemmin nukkumaan/lepäämään. Niin yksinkertaista se on. On parasta lopettaa ruutujen (tietokoneen ja puhelimen) katselu noin 2-3 tuntia ennen nukkumaanmenoa. Tämän takia kannattaa keksiä itselleen iltatekemistä johon ei liity esimerkiksi pelaaminen tai puhelimella oleminen.

2. Toinen asia jonka olen huomannut vaikuttavan uneen on kuulokkeiden käyttö. Kannattaa välttää nopean ja kovan musiikin kuunteleminen kuulokkeilla ennen nukkumaan menoa.

3. Illalla voit mennä pienellä kävelylle jos tuntuu siltä. Etenkin nyt kevään alussa ja kesällä pieni kävely voi olla virkistävää ja helppoa. Mikä tahansa kevyt liikunta päivän aikana tekee sinusta väsyneemmän illalla.

4. Yritä välttää raskasta syömistä juuri ennen nukkumaanmenoa. Ei ole myöskään mukavaa mennä nukkumaan vatsa kurnien. Myös limujen, kahvin tai energiajuomien juonti myöhään illalla vaikuttaa uneen ja unen laatuun.

5. Yleinen rentoutuminen. Meillä kaikilla on se joku juttu mikä saa meidät rentoutumaan ja saa meidän mielen pois arjesta ja maailman kurjuudesta.

Itsellä tämä on elokuvien katselu. Elokuvat immersoi minut toiseen maailmaan ja rentouttaa. Eli yritä immersoida itsesi johonkin rentouttavaan joka vie mielesi pois seuraavasta päivästä tai tulevasta yöstä. Jokaisella on oma tapa immersoitua tai rentoutua.

Tee se mikä itselle tuntuu hyvältä tai kokeile jotain uutta jos et vielä ole varma mikä on itselle paras. Mukavia unihetkiä!

Kuva: Giphy

Aina muista, että jos sinulla on usein vaikeuksia nukahtaa inhottavien ajatusten tai ahdistuksen takia kannattaa puhua siitä jollekin johon luotat (esim. perhe, äiti tai isä, kaveri).

Keskusteluapua löydät myös Nuortennetistä. Akuutissa tilanteessa voit soittaa suoraan myös valtakunnalliseen kriisipuhelimeen.

Jos koet että pelaaminen haittaa untasi, Digipelirajat’on auttaa sinua.

Lisää vinkkejä unettomuuden omahoitoon löydät Mielenterveystalon sivuilta.

Elsa

Perjantai: Mistakes

Kuva: Roman Kraft, Unsplash

Education through my eyes, throughout living in multiple countries and going through a handful of schools.

  • AMA International School (Middle – High School – Bahrain).
    Taught me to rely on my own self-knowledge and that making mistakes was unacceptable. It was also the beginning of my interest in programming from Robotics.
  • Eira High School (Middle – High School – Finland).
    Taught me that nothing is easy, especially when there’s a language barrier.
  • Helsinki Adult High School (High School – Finland).
    Showed me that curiosity is a great thing and that I could aim for greater things. The reminder of programming.

In the years I spent in these schools, I learned that each of them had brought something new to the table. Whether it was good or bad, it built me to be the person that I am today and that I am grateful for. The only thing I ever regretted, was not being able to keep contact with the friends I made after my second school and it became a habit I couldn’t grow out of.

By the age of 18, my main focus was learning how to study for school, because the time I spent in AMA didn’t give me the chance to learn to do it, so I was stuck for the longest time trying to find ways to study on my own and making mistakes was still a big deal for me so I never accepted the fact that I needed help when I couldn’t figure things out on my own. The thought of going towards a programming career from Robotics and Web development came from them.

In the school I’m currently in, I study in the evenings and have my whole day free. They were the ones that gave me the idea of trying to get back in programming, the enthusiasm took over when I remembered that I was in Finland, the place of endless possibilities.

So I looked into programming in Finland, I found a work space called ICT-Beginners (currently Digitalents Academy) around the time I turned 19. The interview was nerve wracking at that time, but I passed through it with my enthusiasm and it felt amazing when I got the chance to explore the part of me which was always filled with this enthusiastic energy when it came to programming and just working with computers in any way.

My time in Digitalents Academy

I began with no knowledge whatsoever, now I can build websites and design them in any way I like. Not so bad for someone who had no clue what HTML and CSS even meant before joining. I’d like to think, anyone can learn what I’ve learned so far, if they truly wanted to.

This place isn’t only meant for programming, it’s meant to bring people closer together and create a certain atmosphere that makes everyone feel at home or part of something new. I feel safe here, no one will treat you any different from a friend. I constantly think, is this really okay? Am I allowed to take a break and focus on being socially active with my co-workers?

Not only that, I was given the chance I had been waiting for since I began Middle School…the encouragement to make mistakes, that also freaked me out in the beginning, because most of the time I thought that making mistakes was just wrong. I’ve come to realise that isn’t entirely true, because making mistakes is a part of life, but there is a healthier way to approach the times that I’ve made mistakes, to accept the mistake and learn from it.

Instead of being upset with myself and saying I won’t make a mistake ever again, because that’s unhealthy and we aren’t meant to go through that sort of stress especially at a young and developing age. It was implemented in me when I was studying in middle school and I had to find my way out of this fixed mindset, it took me a long while but eventually it happened. When I was given the encouragement here, I finally let go and I am learning to approach the growth mindset. The moment you change from a fixed mindset to a growth mindset, you’ve realised that software updates happen in your brain too.

What I mean by growth mindset

Changing from a fixed mindset to a growth mindset explained

I’d like to thank the people who’ve given me the passion that I have for programming now and the people that took my word as a young adult and not a child. My parents as well because where would I be without them.

Iida D.