Linkkejä!
Julkaistu: 20.10.2025 15:32
Tähän asti kaikki kirjoittama teksti on tulostettu merkkijonona. Jos on laittanut webbiosoitteen, se ei ole tullut sellaiseen muotoon että sitä voisi klikata ja siirtyä. Syy on ollut sekä tietoturvallinen että allekirjoittaneen koodaustietämättömyys. Noh, linkkejä pitää olla, jos vaikka tekee musablogin ja haluaa laittaa linkin levystä vaikka Spotify:hyn tai Youtubeen *köh*.
Kuinka sitten teet linkin siten että se näkyy täällä oikein? Helpointa on kopioida linkki osoitepalkista tai vaikka Spotifyn "jaa" --> "kopioi linkki". Tärkeintä on kuitenkin se että osoitteessa on https:// edessä. Esimerkiksi: https://tarinanpaikka.up.railway.app joka on tämän blogin etusivun osoite Eli pelkkä www.tarinanpaikka.up.railway.app ei tee linkkiä klikattavaksi. Jos linkki alkaa http... sovellus tekee varoitustekstin linkkiin.
Tämä siksi koska koodi etsii tekstistä https -alkuisia sanoja ja kääntää ne klikattavaksi linkiksi. Toinen syy on tietoturva:
HTTPS salaa liikenteen selaimen ja palvelimen välillä, ts. kukaan ei voi tulla väliin "kuuntelemaan", mitä käyttäjä tekee. HTTPS käyttää SSL/TLS-varmennetta, joka takaa että käyttäjä on yhteydessä oikeaan sivustoon, ei huijaripalvelimeen.
Tieto ei myöskään voi muuttua matkalla. HTTP:ssä kolmas osapuoli voisi muokata sisältöä (esim. laittaa haittakoodia sekaan) ennen kuin se saapuu käyttäjälle. Hakukoneet myös suosivat HTTPS:ää ja selaimet merkitsevät HTTP-sivut "ei turvalliseksi".
Käyttäjäehdoissa on mainittu että blogisisällön on oltava luotettavaa, myös linkkien osalta. Mutta linkin klikkaaja on itse vastuussa siitä, mihin ns. joutuu. Jos et ole varma, onko sivusto oikea vai huijaussivusto, voi sivun käydä testaamassa useammassa eri paikassa. Ehkä joskus jopa täällä.
Monta blogia!
Julkaistu: 20.10.2025 14:34
Tähän asti käyttäjällä on ollut mahdollisuus luoda vain yksi blogi. Jos on halunnut tehdä toisen, on pitänyt myös tehdä uusi käyttäjätunnus. Hankalaa.
Syy tähän on ollut se että halusin pitää sovelluksen simppelinä. Mutta nyt muutin sovelluksen logiikkaa siten että blogeja voi tehdä viisi per käyttäjä. Eli skaalataan hieman!
Samalla käyttäjän oma sivu muuttui, nyt jokaiselle blogille on oma hallintapaneeli. Toivottavasti ei jäänyt mitään bugeja mutta jos jokin asia ei toimi odotetulla tavalla niin anna palautetta.
Tekoälyä
Julkaistu: 12.10.2025 05:40
Pitkästä aikaa tapahtuu! Ensipuraisu tekoälyyn. Pohdiskelin että mikä tekoälyratkaisu voisi sopia blogisovellukseen ja että mikä olisi hyvä koodausprojekti josta aloittaa. Niinpä päätin tehdä ratkaisun jossa blogitekstit voidaan kääntää englanniksi nappia painamalla. Nyt jokaisella blogisivulla on Englannin ja Suomen liput joita klikkaamalla saadaan teksti vaihdettua eri kielelle. Näppärää, eikö vain! Blogista tuli hetkessä kansainvälinen.
Kääntäjäksi valitsin ChatGPT 4.0 minin. Koska tämä blogiprojekti on pääasiassa omaa koodausopiskelua, en lähtenyt tälläkään asialla revittelemään. Hommasin API -avaimen ja laitoin 10 dollaria tilille. Tällä summalla pystyn testaamaan kääntäjää, jos käyttäjiä tulee lisää täytyy sitten miettiä maksutapaa mutta tälläkin summalla saa aika monta käännöstä tehdä.
Miten kääntäjä sitten toimii? Englannin lippu toimii nappina ja HTMX-koodi siirtää napin tiedot tiedostoon jossa kääntäminen tapahtuu. Ensin tarkistetaan, onko blogijulkaisuista jo käännös tietokannassa (välimuisti). Jos on, tuodaan käännös sieltä ja näytetään käyttäjälle. Jos käännöstä ei ole (uusi postaus tai aikaisempia postauksia on muokattu), vasta silloin pyydetään Chat GPT:tä tekemään käännös. Tämä nopeuttaa kääntämistä huomattavasti ja on myös halvempaa. =)
Läpinäkyvyyden nimissä laita tähän myös promptin jota käytän koodissa: 'You are a translation engine. Always translate from Finnish to English. Return only the translated text'. Promtaamisen kanssa tuli hauskoja tapauksia, esim. ensimmäinen kääntäjä oli turhan jutteleva.
Eihän tuo kääntäjä täydellinen ole, tästä varoituksen sana. Tekoäly tekee välillä omituisia käännöksiä, en tiedä johtuuko se promptista vai Chat GPT -versiosta mutta suurin osa käännöksestä toimii. Jos haluat varmistaa että käännös on paras mahdollinen, kannattaa postaus kääntää itse ja kirjoittaa se vaikka suomenkielisen postauksen rinnalle. Antakaa palautetta jos käännetty teksti on ihan puuta heinää, voin muokata käännöstä tietokantaan.
Toinen pieni muokkaus: nyt etusivulla olevat postauslinkit menevät suoraan klitattavaan postaukseen eikä blogisivun alkuun.
Syysterveisin Mikko
Saa antaa palautetta!
Julkaistu: 11.06.2025 07:04
Palautteen avulla kehittyy paitsi sisältö - myös itse sivusto. Joten toteutin Tarinan Paikkaan oman palautelaatikon. Se löytyy heti otsikkovalikon alta. Palautelomake aukeaa linkkiä klikatessa. Täytettäviä kohtia ovat nimi (voi olla oikea tai höpö) ja itse palaute. Sähköpostiosoitteen voi laittaa jos haluaa vastauksen palautteeseen.
Palautteet tallentuvat MySQL-tietokantaan, ja ylläpitäjä (eli meikä) voi kuitata ne tai vastata sähköpostitse suoraan hallintaliittymästä. Tietokantaan tallennetaan myös tiedot ip_hash, user_agent ja metadata (ei vielä käytössä). Ne tuovat lisätietoa turvallisuuteen ja analytiikkaan. Huomio: IP-osoite tallennetaan SHA-256-hashattuna, eikä sitä voida palauttaa alkuperäiseen muotoonsa.
Halusin että voin vastata palautteeseen suoraan ylläpidon käyttöliittymästä. Siis en siten että olisin mennyt omaan sähköpostiin ja sitä kautta vastannut vaan että painan nappia vastaa, kirjoitan vastauksen ja painan lähetä. Ja kas palautteen antaja saa vastauksen.
Tämä toteutettiin PHPMAiler-kirjastolla, joka tarjoaa luotettavan SMTP-integraation Gmailiin.
Tietoturvasta hieman: salasanoja ei kovakoodata, vaan ne haetaan .env-tiedostosta lokaalisti. Railwayssa käytetään ympäristömuuttujia, jotka asennetaan palvelun hallintapaneelissa.
Ääkkösten kanssa oli hieman haasteita mutta se korjattiin lisäämällä UTF-8 merkistö ja base64-koodaus. Toivottavasti äät ja ööt näkyvät nyt oikein.
Seuraavaksi aion vielä parantaa sähköpostipohjaa HTML-muotoiseksi, lisätä ylläpidolle ilmoitukset uusista palautteista ja kehittää palautteiden analytiikkaa ja koontinäkymiä. Näissä ehkä enemmän skaalautuvuus mielessä.
Mutta: antakee palautetta! =)
T. Mikko
SEOilin internetissä - hakukoneoptimointia
Julkaistu: 02.06.2025 12:54
Nyt kun Tarinan Paikka on indeksoitu Googlea varten niin tutustuin muihin tapoihin lisätä näkyvyyttä internetissä, eli SEO (Search Engine Optimization). Vaikka tämä blogi-alusta on lähinnä oma oppimisprojekti, SEO on tärkeä osa ohjelmistosuunnittelua joten se on hyvä osata. Siispä seuraavana asioita joita olen SEOillut:
Title ja Description:
Title -tagi ja meta-kuvaus (meta name=description) ovat tärkeitä ensikosketuspisteitä hakukoneille ja käyttäjille. Title näkyy hakutuloksissa klikattavana otsikkona ja Description toimii esikatseluna, joka houkuttelee käyttäjiä klikkaamaan. Nämä kannattaa olla jokaisessa tiedostossa joka näkyy käyttäjälle.
Canonical-tagit:
Canonical-tagit kertovat hakukoneelle mikä versio sivusta on alkuperäinen, mikäli sisältöä on saatavilla useilla URL-osoitteilla, estäen siten kaksoissisältöongelmat. Blogissani Canonical-rakenne toimii dynaamisesti ja ohjaa hakukoneet oikealle sivulle.
OG-tagit:
Open Graph -metatiedostot varmistavat, että kun jaan sivuni sosiaalisessa mediassa, linkkikortti näyttää siistiltä: Oikea otsikko, kuva ja kuvaus.
Twitter Cards:
Twitter käyttää omaa metatiedostostandardiaan. Periaatteen vuoksi en ole lisännyt Twitter Cardsia omaan blogiini.
Favicon:
Favicon on pieni kuvatiedosto joka näkyy selaimen välilehdessä. Pieni juttu mutta parantaa sivuston tunnistettavuutta. Blogissani favicon on osana layout-pohjaa.
Schema.org / JSON-LD:
Strukturoitu data kuten Schema.org mahdollistaa lisätietojen esittämisen hakutuloksissa: Kirjoittaja, kuvaus, päiväys… Tätä voi lisätä JSON-LD -muodossa. Tarkoitus on lisätä jokaiselle julkaisulle oma Schema, tällä hetkellä kuvaus on blogin tasolla.
Kuvien alt-tekstit:
Jokaisen kuvan yhteyteen tulisi lisätä (ja pitäisi olla) alt-teksti. Ne parantavat saavutettavuutta, mutta myös hakukoneet hyödyntävät niitä sisällön ymmärtämisessä.
SEO on osittain teknistä hienosäätöä. Favicon ja OG-tagit tuovat sivulle tyyliä ja ne näyttävät ammattimaiselta mutta SEO on tärkeä osa sivuston saavutettavuutta ja elinkaarta. Tässä pieni tiivistelmä hakukoneoptimoinnista, palaan asiaan jos ja kun säädän vielä lisää.
Kun avasin oven roboteille - Tarinan Paikan Google -indexointi
Julkaistu: 28.05.2025 05:37
Koska Tarinan Paikka on saanut tietyn muotonsa, on ollut aikaa pohtia muitakin osa-alueita kuin koodaamista. Vaikkapa sitä että olisihan se kiva jos blogi löytyisi Googlaamalla. Siispä otin selvää että kuinka se tapahtuu. Tässä pieni kirjoitus Google indexoinnin vaiheista:
1. robots.txt
Oven avaaminen tapahtuu lisäämällä robots.txt tiedosto. Eli kerrotaan roboteille että tervetuloa! Tiedostoon laitetaan seuraavat asiat:
User-Agent: *
Disallow:
Sitemap: hhtps://sivun_osoite/sitemap.xml
2. Meta-tunniste: sivukohtainen ohjeistus hakukoneille
Varmistetaan että sivut lisätään Google hakemistoon, ja että botit seuraavat linkkejä, jotka johtavat muihin sivuston osiin.
3. Google-verifointi - Todista, että omistat sivustosi
Google Search Concole on työkalu jolla voin seurata Tarinan Paikan näkyvyyttä ja suorituskykyä. Sivuston omistajuuden voi todentaa lisäämällä Googlelta saadun HTML -tiedoston palvelimen juureen.
Esim.: https://tarinanpaikka.up.railway.app/googlecfd84af9800ef2...
4. Dynaaminen sitemap.xml - Kartta hakukoneille
Loin dynaamisen PHP-sivun, joka tuottaa aina ajantasaisen sitemap.xml-tiedoston tietokannan perusteella. Tiedosto sisältää: Etusivun, kaikki blogisivut, jokaisen artikkelin yksilöllisen osoitteen. Tämä auttaa Googlea ymmärtämään, mitkä sisällöt ovat tärkeitä ja miten usein niitä päivitetään.
5. .htaccess ja sitemap ohjaus
Jotta hakukoneet löytävät dynaamisen PHP-sivun ja kohtelevat sitä staattisena tiedostona, lisäsin juureen .htacces-säännön:
RewriteEngine On
RewriteRule ^sitemap\.xml$ sitemap.xml.php [L]
Tämän ansiosta osoitteessa /sitemap.xml palautuu dynaamisesti luotu XML-sivustokartta – ilman URL-parametreja.
6. Google Search Consoleen ilmoitus
Lopuksi siirryin Google Search Consoleen, valitsin oman sivustoni ja syötin sitemapin osoitteeksi: sitemap.xml
Tässä oli pieni selostus siitä miten saadaan Google-indexointi toimimaan PHP-sivulle ilman valmiita julkaisujärjestelmiä kuten vaikka WordPressiä.
Julkaisut ja blogit nyt näkyvissä
Julkaistu: 20.05.2025 05:08
Etusivulla näkyvät nyt kaikki julkaisut ja blogit, siten että uusimmat ovat ensimmäisinä. Nappeja painamalla saa sitten lisää asioita näkyviin. Myöhemmin tavoitteena on tehdä listaus julkaisuista ja blogeista siten että voi valita vaikka tietyn blogin julkaisut tai käyttäjän blogit (myöhemmin käyttäjä voi luoda useamman blogin). Käyttöliittymää hion jatkuvasti, toivottavasti se on nyt selkeä ja helppokäyttöinen.
Mobiiliyhteydellä blogin käyttäminen, varsinkin uusien julkaisujen luominen, saattaa olla hidasta joten tein jokaiseen ikkunaan lataus-ilmoituksen. -Mikko
Tarinan Paikka avoin kaikille!
Julkaistu: 31.03.2025 14:32
Blogisovellus on nyt siinä vaiheessa että tilin ja blogin luominen on nyt mahdollista kaikille. Blogien määrä on rajoitettu yhteen kerrallaan mutta sen sisältöä on mahdollista muokata milloin vain. Eli rohkeasti kokeilemaan!
Jos eteen tulee bugeja tai muuta (joita luultavasti tulee) ilmoita allekirjoittaneelle sähköpostiin metarktis@gmail.com tai whatsappiin. Blogille on tehty käyttöehdot, voit lukea ne osoitteesta https://tarinanpaikka.up.railway.app/terms.html
Käyttöehdot löytyvät myös linkkinä sivun alaviitteestä.
T. Mikko
Kuvat Cloudinaryyn
Julkaistu: 14.03.2025 08:27
Kuvien lataaminen Cloudinaryyn ja sitä kautta blogiin näkyville olikin astetta haasteellisempi urakka. Suurimmat kompastuskivet olivat kännykkäkuvien koko (useita megabittejä) ja iPhonen oma kuvaformaatti (HEIC). Blogisovellus, toisin sanoen PHP -koodi ei aluksi antanut ladata kuin korkeintaan 2MB kokoisia kuvia joten piti käydä luomassa php.ini -tiedosto josta annetaan lupa isommille kuville. Cloudinary itse pienentää kuvien kokoa mutta käyttäjän laitteen ja Cloudinaryn välille piti saada reilumpi juttukaveri.
Toinen haasteellisempi homma oli ja on, iPhonen omat kuvatiedostot. iPhone ei tallenna kameran kuvia jpg -tiedostoon vaan omaan HEIC -formaattiin, totta kai. Kun kuvia sitten yritti lisätä tähän blogisovellukseen, Cloudinary keikautti kuvia 90 astetta kumolleen. Mikä on tietenkin ärsyttävää, käyttäjän ja ylläpitäjän vinkkelistä. Jälleen piti käydä muokkaamassa php -koodia: Kuvilla on oma EXIF -tieto jossa on Orientation -arvo. Tätä arvoa kun vaihtaa niin saadaan kuva oikein päin ennen kuin kuva latautuu Cloudinaryyn. Toivottavasti tämä on nyt kunnossa!
Mitä siis tapahtuu jos käyttäjä lisää kuvan?
1. Käyttäjä lataa kuvan ja liittää sen osaksi blogijulkaisua
2. Palvelin vastaanottaa kuvan ja tarkistetaan että kuvan on olemassa ja että tiedosto on kelvollinen (JPEG, PNG tai WEBP).
3. Kuva optimoidaan:
- JPEG -kuvasta tarkistetaan EXIF-tieto ja korjataan mahdollisesti oleva väärä suunta.
- Kuva skaalataan siten että kuvan leveys on korkeintaan 1200 pikseliä. (Sivuston latausaika pysyy nopeana).
- Kuva tallennetaan väliaikaisesti ja pakataan 75% laadulla.
4. Kuva ladataan Cloudinary-palveluun:
- Cloudinary optimoi kuvaa vielä lisää ja antaa sille pysyvän verkko-osoitteen.
- Sovellus tallentaa kuvan lopullisen URL -osoitteen tietokantaan.
5. Julkaisun tallennus ja kuvan näyttäminen blogissa:
- Artikkeli tallennetaan tietokantaan, ja siihen liitetään kuvan URL -osoite.
- Kun käyttäjä avaa blogisivun, kuva ladataan suoraan Cloudinarysta ja näkyy julkaisussa.
Kuvien lataaminen ja liittäminen blogiin on minulle aivan uusi projekti joten jos huomaat jotain ongelmia niin voit raportoida sähköpostilla. Otan todella mielelläni kaikki mahdolliset kommentit vastaan jotta voin kehittää sovellusta. Esimerkiksi iPhone -ongelma ei olisi tullut itselleni vastaan koska en käytä Applen tuotteita. =)
Kuvia blogiin 2
Julkaistu: 09.03.2025 06:46
No niin, nyt on koodi saatu siihen vaiheeseen että Railway juttelee Cloudinaryn kanssa eli uuteen julkaisuun voi lisätä myös kuvan. Kuva tallentuu Cloudinaryyn ja tietokantaan tallentuu kuvan julkinen osoite.
Julkaisun muokkaus-ikkunassa voi käydä vaihtamassa tai poistamassa kuvan. Jos kuvan vaihtaa, vanha kuva poistetaan automaattisesti Cloudinarysta, samoin jos kuvan poistaa eli jos kuvan haluaa säilyttää itsellään, kannattaa se ladata omalle laitteelle. Myös vanhoihin julkaisuihin voi lisätä kuvan muokkaa julkaisua -ikkunassa.
Kuvan muotoilua ei pääse itse muokkaamaan, pyrin tekemään niin että kuva näyttää, noh, sopusuhtaiselta erilaisilla näytöillä.
Kuvia blogiin!
Julkaistu: 07.03.2025 07:01
Seuraava ominaisuus eli kuvien lisääminen julkaisuun on edennyt, vaiheeseen jossa kuvan lisääminen, poistaminen ja vaihtaminen onnistuu...puolittain.
Ongelma on se että Railway ei tarjoa paikkaa jonne kuvat voisi säilöä vaan kuvat ovat väliaikaisessa muistissa. Ja aina kun päivitän sovellusta (ajan uutta koodia yms.), kuvat häviävät. :o
Eli tällä hetkellä kuvanlisäys-ominaisuutta voi testata mutta kuva tulee häviämään.
Cloudinary on palvelu jonne kuvia voi tallentaa ja seuraavaksi aion saada koodattua Railwayn ja Cloudinaryn juttelemaan keskenään siten että kuvat pysyvät tallessa.
Julkaisujen muokkaus
Julkaistu: 03.03.2025 05:07
Hei, nyt on mahdollista muokata omia julkaisuja. Ainakin itse teen kirjoitusvirheitä niin nyt ei enää tarvitse harmitella!
Teknisiä asioita
Julkaistu: 02.03.2025 08:06
Tässä postauksessa esittelen vähän että mitä kaikkea tähän blogiin on laitettu ja miten.
Koodailen tätä projektia omalla koneellani ja käytän Visual Studio Codea itse ohjelmointiin ja Dockeria lokaalina palvelimena. SQL -tietokanta on MyPHPAdminissa. Sen jälkeen kun olen testannut koodin toimivuutta, siirrän koodin GitHubiin. Railway.com, jossa projektini on, käy hakemassa päivitetyn koodin GtiHubista ja näyttää sen kaikille käyttäjille. Railwayssa on oma SQL -tietokanta joka pitää erikseen päivittää jos teen sinne rakenteellisia muutoksia.
Tässä oli suunnilleen se tapa millä pyöritän projektia.
Mitä koodia sitten olen käyttänyt projektissa?
-HTML (blogisivujen rakenne)
-CSS (blogisivujen tyyli)
-HTMX (dynaamisen sisällön lataaminen: lomakeikkunat yms.)
-PHP (tietokantakyselyt, tietoturva, lomaketietojen käsittely)
-JavaScript (esim. lomakeikkunoiden sulkeminen)
-SQL (tietokanta)
Tekoäly: olen käyttänyt ohjelmoinnin apuna ChatGPT:tä. Vaikka yritän itse koodata asiat niin ChatGPT helpottaa ja ennen kaikkea nopeuttaa projektin luontia, varsinkin ongelmatilanteissa ja koodin syntaksin tarkastamisessa. Myös tekoälyn liittäminen itse blogiin kiinnostaa. Noh, kaikki aikanaan.
Blogin esittelyä
Julkaistu: 28.02.2025 06:57
Hei ja tervetuloa lukemaan ja ehkä myös tekemään blogia! Valmistuin tammikuussa 2025 ohjelmistokehittäjäksi Savon ammattiopistosta ja mietin että millä tavalla ylläpidän koodaustaitojani. Niinpä aloin uudelleen kirjoittamaan lopputyötä (leva-verkkosivut) ja nopeasti muodostui ajatus omasta blogista. Ei pelkästään sellainen jonne voisi itse kirjoitella vaan että muutkin voisivat kirjoitella omia tarinoita tai ajatuksia. Blogikone siis.
Nyt on bloginkoneen, projektinimeltään "Tarinan paikka", tilanne on sellainen että palveluun voi rekisteröityä. Itse blogia pääsee tekemään ottamalla yhteyttä meikäläiseen, yhteystiedot löytyvät sivun alaosasta. Projekti on vielä alussa ja mielelläni otan testauskäyttäjiä kokeilemaan ja kommentoimaan blogikonetta. Ominaisuus-listani on jo kilometrin pituinen, ulkoasua ja käyttöliittymää viilaan jatkuvasti.
Päivitän tähän blogiin kaikista muutoksista mitä täällä tapahtuu.
Toinen syy, miksi teen tätä projektia on se että etsin töitä ohjelmisto-alalta ja tämä toimii käyntikorttina CV:ssä. Eli jos joku huomaa ja haluaa ottaa yhteyttä työn merkeissä niin rohkeasti vain! =)
Ihan eka postaus
Julkaistu: 24.02.2025 07:21
Hello world (muokattu 2.3.2025)!