Omat nettisivuprojektit (keskeneräiset sekä valmiit)

[Nigel]

Nyt Player Fanissa on voimassa oleva SSL-sertifikaatti. Otin lopulta Herokusta hobby dynon ainakin tähän hätään. Katsotaan tuleeko tulevaisuudessa tarvetta vaihtaa.

Ratkaisin myös pelaajakorttien statsien laskemiseen liittyvän ongelman. Tein Udemyssä kovalla tahdilla intensiivikurssin MongoDB:stä ja sen avulla onnistuin tekemään agregaatin, joka hoitaa pelaajakorttien laskemisen huomattavasti aiempaa nopeammin. Nyt kun en tallenna laskennan tuloksia tietokantaan, niin pystyn hyödyntämään filttereitä, jotka parantavat palvelun käytettävyyttä huomattavasti. Tuli kyllä hyvä fiilis, kun sain tuon aggregaation tehtyä. Jostain kesäkuusta asti miettinyt, että mitenköhän tuon saisi tehtyä järkevästy ja nyt ratkaisu löytyi.

Korostin pelaajakorteista pistemäärän sinisellä taustalla, koska kortit sortataan pisteiden perusteella. Laitoin pisteet statsit myös tärkeysjärjestykseen vasemmalta oikealle ja noin korteista tuli mielestäni hieman helpommin luettavia.

Nyt ennen kauden alkua en enää lisää ominaisuuksia. Täytyy viimeistellä scriptit, jotka hoitavat tietokannan pitämisen ajantasalla. Varsinkin logituksen pitää olla kunnossa, koska jos jonkin pelaajan statsien päivityksessä menee joku pieleen, niin palvelulta menee uskottavuus aika nopeasti, jos ongelmia ei saa järkevästi korjattua.

 

[Pökötti]

Nyt alkaa olla peruspaketti kasassa. Sain grindattua kaikki lomakkeet kuntoon ja jotain muita tylsiä asioita, kuten transaktiosähköpostit ja yhteydenottolomakeen. Tällä hetkellä ainut täysin keskeneräinen sivu on terms and conditions, joka ei vissiin ole edes pakollinen.

Löysin mielestäni loistavan vapaana olevan domainin ja palvelun nimeksi tuli nyt sitten Player Fan. Jos joku jaksaa käydä testaamassa rekisteröitymisprosessia, yhteydenottolomaketta ja forgot passwordia, niin olisin kiitollinen. Testasin toki ne itse jo omalta koneelta, mutta useampi testaaja on aina parempi kuin yksi.

Seuraavaksi täytyy ainakin nuo notifikaatiot viimeistellä. Tällä hetkellä backendistä tulee aika rumia virheilmoituksia ja täytyy miettiä, että mikä olisi paras tapa esittää ne sivulla.

Täytyy myös lisäillä jotain animaatioita, jotka ei toivottavasti riko sivua, jotta siitä tulisi vähän sulavampi. Esim. lomake-modalit voisi aueta jonkun animaation saattelemana.

Mulla on suunnitelmissa myös muutama uusi näkymä noille pelaajakorteille. Tällä hetkellä näkyy siis vain 15 parasta pelaajaa tietyltä aikaväliltä, mutta ainakin jotain filttereitä tuohon voisi lisätä. Täytyy ruveta pohtimaan miten tuon saisi toteutettua backendissä, koska nykyinen systeemi on rakennettu näyttämään ainoastaan tuo näkymä.


Skriptit on juurikin tiedon hakua kerran päivässä API:sta ja sen jälkeen sitten pari erilaista laskentaa päivitettyjen hakutulosten pohjalta.

Aluksi sivu tein sivun Semantic-UI:lla, mutta päädyin lopulta tekemään koko sivun uudestaan styled-components-kirjastolla. Lähdin CSS:n kanssa käytännössä nollasta liikkeelle, niin tuntui, että saan hommasta enemmän irti jos vaan teen kaiken itse. Ihan hyvä oppitunti on ollut.

On kyllä houkutteleva hinta. Luulen, tosin, että suurinosa sivuni käyttäjistä tulee olemaan pohjoisamerikkalaisia, niin en tiedä onko fiksua ottaa palvelinta Helsingistä? Onko sellainen palvelin mihin itse asennetaan käyttis ym tarvittava?

On kyllä mahtava projekti ja näin kauden käynnistyttyä tuli todettua jo sivun tarpeellisuus. Aiemmin olen highlights.hockey kautta katsonut parhaat palat otteluista, mutta oikeastaan tarkoitus on usein seurata vain suomalaispelaajien edesottamuksia taalajäillä. Tänäänkin oli mukava käydä katsomassa hintzien ja haulojen maalit eikä työaikaakaan kovin paljoa palanut hukkaan minuutin parin klipeistä. Highlightsit on usein 8-10 minuutin mittaisia ja siten aikaa vieviä spektaakkeleja.

Testasin rekisteröitymistä – muuten meni hyvin, mutta tilin aktivointisähköpostia ei kuulunut.

Hyvää työtä

 

[Nigel]

On kyllä mahtava projekti ja näin kauden käynnistyttyä tuli todettua jo sivun tarpeellisuus. Aiemmin olen highlights.hockey kautta katsonut parhaat palat otteluista, mutta oikeastaan tarkoitus on usein seurata vain suomalaispelaajien edesottamuksia taalajäillä. Tänäänkin oli mukava käydä katsomassa hintzien ja haulojen maalit eikä työaikaakaan kovin paljoa palanut hukkaan minuutin parin klipeistä. Highlightsit on usein 8-10 minuutin mittaisia ja siten aikaa vieviä spektaakkeleja.

Testasin rekisteröitymistä – muuten meni hyvin, mutta tilin aktivointisähköpostia ei kuulunut.

Hyvää työtä

Kiitos! Tänäänkö rekisteröidyit? Kävin manuaalisesti verifioimassa tilisi. Täytyy tutkia miksei vahvistusviesti tullut perille.

Otin sivuilta kaikki kuvat pois copyright-kuumotuksen takia. En saanut mitään vastausta kuvien käyttöoikeuksiin liittyen, joten koin järkevimmäksi ottaa ne toistaiseksi kokonaan pois. Korvasin pelaajien kuvat sukunimellä ja pelinumerolla. Täytyy vielä varmaan jotain kontrasteja vähän hioa. Onko tuo etusivu nyt liian oksettava värisekamelska? Player Fan

 

[Pökötti]

Kiitos! Tänäänkö rekisteröidyit? Kävin manuaalisesti verifioimassa tilisi. Täytyy tutkia miksei vahvistusviesti tullut perille.

Otin sivuilta kaikki kuvat pois copyright-kuumotuksen takia. En saanut mitään vastausta kuvien käyttöoikeuksiin liittyen, joten koin järkevimmäksi ottaa ne toistaiseksi kokonaan pois. Korvasin pelaajien kuvat sukunimellä ja pelinumerolla. Täytyy vielä varmaan jotain kontrasteja vähän hioa. Onko tuo etusivu nyt liian oksettava värisekamelska? Player Fan

Kontrasti joissain korteissa on heikko, mutta muuten näyttää ihan hyvältä. Ehkä text-shadow:n ottaisin pois nimestä ja numerosta tai ainakin vähemmäksi. Näyttää ilman paremmalta.

 

[Nigel]

Kontrasti joissain korteissa on heikko, mutta muuten näyttää ihan hyvältä. Ehkä text-shadow:n ottaisin pois nimestä ja numerosta tai ainakin vähemmäksi. Näyttää ilman paremmalta.

Tuo alkuperäinen versio aiheutti ainakin minussa lopulta oksennusreaktion, joten värittelin kaikki "merkit" uudestaan. Oli pakko lisätä kolmas väri, jotta sain kontrastin siedettävälle tasolle. En vieläkään ole kaikkiin merkkeihin 100% tyytyväinen, mutta joka tapauksessa huikea parannus edelliseen versioon. Laitoin myös erilaisen fontin merkkeihin, jotta ne näyttäisi vähän enemmän pelipaidoilta.

Pittsburghin ja Bostonin merkit on identtiset. Pitää varmaan jossain vaiheessa jommalle kummalle laittaa vieraspaidan väritykset, jotta ne erottaa toisistaan.

 

[sambba]

@Nigel testasin iPad Pro 11” ja Chrome. Muuten toimii mahtavasti, mutta kun kortin flippaa niin siinä näkyy statsit ihan sekunnin murto-osia ja sitten katoavat.

 

[Nigel]

@Nigel testasin iPad Pro 11” ja Chrome. Muuten toimii mahtavasti, mutta kun kortin flippaa niin siinä näkyy statsit ihan sekunnin murto-osia ja sitten katoavat.

Joo, pakko ottaa tämä työn alle. Varmasti kaikista silmiinpistävin bugi tuo.

 

[Nigel]

Sain vihdoinkin korjattua tuon korttiflippausbugin. Testasin nyt iPadilla Safarilla ja Chromella ja molemmilla toimii nätisti. Ilmoitelkaa toki vielä, jos teillä ongelmaa vielä esiintyy.

 

[Nigel]

Luovuin lopulta Herokusta. En keksinyt järkevää tapaa ajaa ajastettuja dynaamisia taustaprosesseja ilman kolmea hobby dynoa, jotka nosti kustannukset 21 $/kk. Otin servun DigitalOceanista ja siellä pyörii Dokku. Alun vaikeuksien ja savun hälvettyä sain kaiken toimimaan ja deployment-mukavuus on käytännössä identtinen Herokuun verrattuna. Komentoriviltä vaan pushi dokkuun ja siinä se. Ainut ero on se, että tällä setupilla pitää syöttää aina ssh-avain pushatessa.

Herokun kanssa oli myös ongelmana, että en saanut root-domainia eli http://player.fan toimimaan ollenkaan, mutta DigitalOceanin staattisen IP:n kanssa ei ole tätä ongelmaa. Nyt toimii www- ja root-domain. Omalle servulle saan myös tehtyä crontabeja, joilla hoidan nätisi tietokannan varmuuskopioinnin ja muita prosesseja.

 

[©©©]

@Nigel todella pro sivu alkaa olee. Miettinyt lähdekoodin julkaisua Githubissa? Ootko github actionsiin tutustunut ci/cd putkena?

 

[Paapaa]

Miten porukka tekee niin monimutkaisesti noita sivuja? Reactin voi ladata <script>-tagilla ja bäkki PHP:lla, jolloin hostaus onnistuu missä tahansa. Toki epäilemättä jostain ominaisuudesta pitää luopua.

Mikä siis oli tarkalleen monimutkaista? (Oletan, että tässä viitataan Nigeliin) Kyllä se React (ja kaikki muukin siinä ohessa) tavallaan ladataan tuossakin script-tägillä. React-kehityksessä yleensä WebPack paketoi ja yhdistää kaiken koodin automaattisesi yhteen bundle-tiedostoon, joka sitten voidaan sisällyttää sillä tägillä ja ajaa. Ei se mitenkään erityisen monimutkaista ole. Ja create-react-app:illa se on jopa hyvin helppoa.

Jos PHP on sinulle se helpoin vaihtoehto, niin anna mennä vain. Mistä nyt kukin pitää ja mihin on tottunut. React-koodaajalle Node saattaa olla kielen takia tutumpi ja helpommin lähestyttävä kuin PHP-maailma. Monimutkaisuus tietenkin on aika subjektiivista. Ja joskus pakettiratkaisuilla ei saa kaikkea tehtyä, jolloin on turvauduttava omaan serveriin. Tässä tapauksessa Heroku olisi näköjään homman hoitanut, mutta ei halvimmalla hinnalla.

 

[nnaku]

Reactin voi ladata <script>-tagilla ja bäkki PHP:lla, jolloin hostaus onnistuu missä tahansa.

No näihän se nykäänkin tapahtuu. Tähän pisteeseen pääseminen tosiaan vaatii sitten hieman urheilumieltä, jos tosiaan haluaa heivata webpack, babelin ja ne satamuuta asiaa.

Viittasin yleisesti nykytapaan tehdä mielestäni monimutkaisesti

Ja miksi siitä on tehty niin "monimutkasta"? Noh koska nykyaikaiset projektit eivät ole nään luokaa Kaarina Suonperä.net, liikkuvia osia alkaa olla niin paljon että niiden handlaaminen käsipelillä olis vain idioottimaista.

Kannattaa tutustua, ei niitä ole kehitetty hankaloittamaan devaajan elämää, päin vastoin

 

[Paapaa]

Viittasin yleisesti nykytapaan tehdä mielestäni monimutkaisesti, ja olihan Nigelilläkin tuossa pientä taistelua asian kanssa. Oma vaikutelmani on ollut että jos sinulla on Webpack niin on myös sata muuta asiaa, mutta jos asiat hoituu silläkin maltillisesti niin mikäs siinä. Toisaalta jonkinlainen pöhinä lienee eduksi jos tarkoitus on saada töitä.

Voisit vähän avata, että mikä erityisesti on monimutkaista? Mutta yleensä kun projekti kasvaa, kasvavat vaatimukset. Ja tätä varten on kehitetty iso läjä erilaisia työkaluja helpottamaan ja nopeuttamaan devaajan arkea. Esim. WebPack auttaa kun projektissa on iso läjä assetteja (kuvat, fontit, css jne.). Se hoitaa dependencyt nätisti ja karsii turhat. Sillä saa helposti pystyy kehitysserverin. Se luo tarvittaessa hashit assetteihin cachen takia. Ja miljoona muuta asiaa ihan tarpeen mukaan.

Mutta ei kaikki projektit tarvitse tuollaista. WebPack on ehkä hiukan hankala opetella, mutta kun oppii, niin samalla sitten pärjää niin pienissä kuin massiivisissa projekteissa. Se on myös aika lailla de-facto standardi, joten materiaalia löytyy ja "kaikki" käyttävät sitä.

 

[Nigel]

@Nigel todella pro sivu alkaa olee. Miettinyt lähdekoodin julkaisua Githubissa? Ootko github actionsiin tutustunut ci/cd putkena?

En ainakaan toistaiseksi halua julkaista lähdekoodia, koska koodi ei mielestäni ole tarpeeksi hyvin dokumentoitu, että sitä kehtaisi esitellä julkisesti.

En ole tutustunut GitHub Actionsiin. Vaikuttaa ihan mielenkiintoiselta. Minun deployment-prosessi on tällä hetkellä aika yksinkertainen. Riittää yhden pienen Python-scriptin ajaminen, joka järjestää kansiot pushauskuntoon ja tällä hetkellä pärjään tuolla. Tuosta palvelusta on varmaan enemmän hyötyä, jos deployment on monimutkaisempaa.

Miten porukka tekee niin monimutkaisesti noita sivuja? Reactin voi ladata <script>-tagilla ja bäkki PHP:lla, jolloin hostaus onnistuu missä tahansa. Toki epäilemättä jostain ominaisuudesta pitää luopua.

Niin. Kaikki on helppoa kun osaa. Itse joudun opettelemaan kaiken käytännössä nollasta perus HTML:stä GraphQL backendiin ja siinä sivussa domainit, DNS-asetukset sun muut deploymentiin liittyvät oheistoiminnot. Asiaa on paljon, mutta näköjään yksikin projekti voi opettaa tosi paljon laajalta skaalalta juttuja.

Mitä tulee tuohon monimutkaisuuskommentiin, niin itse sivun deploymentissähän ei ole koskaan ollut mitään suurempia vaikeuksia, joten PHP:sta ja Reactin kirjoittamisesta suoraan script tagiin ei olisi ollut suurta hyötyä homman helpottamisessa. Monimutkaisuus liittyi taustaprosessien ajamiseen Herokussa ja siitä aiheutuviin kustannuksiin.

 

[Paapaa]

Asiaa on paljon, mutta näköjään yksikin projekti voi opettaa tosi paljon laajalta skaalalta juttuja.

Siis nimenomaan yksi projekti voi opettaa aivan valtavasti kun ottaa huomioon kaikki osa-alueet appiksen koodauksesta tuotantoon puskemiseen - ja sillä ajatuksella, että projektia pitää ylläpitää ja jopa laajentaa jatkossa. Oikeastaan mikään ei opetakaan niin paljon kuin jonkin kokonaisuuden ns. valmiiksi saattaminen. Verkkosovelluksen tekemiseen liittyy usein varsin monta keskenään hyvin erilaista teknologiaa (visuaalinen suunnittelu, frontti, bäkki, tietokannat, testaus, CI, deployaaminen, infran hallinta, lokit, skaalautuminen, esteettömyys, suorituskyky, projektin ylläpidettävyys jne., jne.), joten tavaraa on paljon. Ja jokaisen osa-alueen voi vielä tehdä järkevästi monella eri tavalla.

 

[Zvona]

Sivusto: Blackjack Coach

Stack: Vanilla HTML+CSS (ja ei JS:ää), Node/Express ja view enginena PUG. Artikkelisisältö on tällä hetkellä JSON-filuina, mutta vien Mongoon tms. dokumenttikantaan, kunhan saan ensin artikkelisisällön tuotettua.

Aloitin puoli vuotta (!) sitten väsäämään harrastesivustoa blackjackin ympärille, johon kirjoitan pääosin strategia- ja psykologia-aiheisia artikkeleita. Innostus heräsi sivuston osalta uudelleen tässä loman aikana. Nyt siellä on neljä placeholder-artikkelia vailla kunnollista sisältöä...

Nyt on mennyt aika tarkkaan vuosi kun aloitin projektin. Tein aika ison teknisen päivityksen sivustolle, koska harrastaminen on kivaa. Artikkeleita on neljä + yksi draftina.

Muutokset:
Client:
- artikkeleiden kommentointilomake
- pätkä Vanilla JS:ää, joka on kommentointilomakkeen käsittelyä sekä modaali-ikkunan näyttämistä / piilottamista varten.
- paljon CSS-päivityksiä sekä headereiden serif-fontin vaihtaminen

Server:
- kaikki artikkelit MongoDB:hen (olivat aiemmin staattisia JSON-filuja)
- artikkeleille paljon "meta-dataa", kuten onko julkaistu vai draft jne.
- express-throttle estämään kommentointilomakkeen pommittamisen
- server-side tarkistuksia poikkeustilanteisiin sekä 404-sivu

Lisäksi tein RSS-endpointin, joka palauttaa käyttäjien postamaat, uudet kommentit sekä siihen hookin IFTTT:lla, joka lähettää mulle muuttuneen feedin itemit e-mailina. Lienee helpoin tapa, jos ei halua laittaa erillistä mail-serveriä hyrräämään?

Google Page Speed antaa tällä hetkellä 89 ja olen siihen ihan tyytyväinen.

Loppuvuoden tavoitteina on julkaista ainakin kolme artikkelia ja sitä myöten päivittää muut osiot ("Topics" ja "Strategies") sisältörikkaiksi. Tämän jälkeen "ilmainen" $120 kuponki google-mainoksiin ja katsoo sitten, miten lähtee lentämään.

Tällä hetkellä on sivuston pohjalta tullut kolme yhteydenottoa, joista kaksi oli blackjackin pelaajia jotka kyselivät lisävinkkejä. Ja yksi kanadalainen scam-casino-sivusto, joka pyysi kirjoittamaan artikkelin... mutta radiohiljaisuus alkoi siinä vaiheessa kun artikkeli oli valmis.

 

[Zvona]

Tuli tehtyä taas läjä muutoksia tuonne Blackjack Coachiin.

- Vaihdoin "topics" pois ja yhdistin sen "articles" alle. Samalla lisäsin osion "resources", jonne kasaan jatkossa hyväksi havaitut, ulkoiset linkit,
- Google Pagespeed antaa nyt 100 ,
- AMP -sivusto (lukuunottamatta omaa JS:ää, jota ei kuulemma saisi sellaisenaan käyttää + muita pikkudetskuja),
- Schema -määritykset googlea ja muita varten (eli se <script type='application/ld+json'> häsmäkkä sorsassa)

Kuulostaa "pieneltä", mutta aikamoinen jumppa kaiken suhteen. Etenkin tuo AMP:iksi muokkaaminen sekä schemojen kirjoittaminen "oikein" vei oman tovinsa.

Ja kysymys! Minulla on Node/Express setupissa:

const maxAge = (!process.env.DEV) ? 31536000 : 0;
const cacheControl = (!process.env.DEV) ? 'public' : 'no-cache';
const etag = false;

app.use("/assets/", express.static(__dirname + "/assets/", { maxAge, cacheControl, etag }));

Mutta Pagespeed antaa warningin, että cache on "8h 45min 36s" ja pitäisi olla pidempi. No, ohjeiden mukaan tuo "31536000" === 1 vuosi. Mutta jostain syystä maxAgena näkyy network consolella katsottuna 31536, eli käytännössä tuhannesosa. Kokeilin erinäköisiä ratkaisuja (kuten 31536001 tai 31536000000), mutta aina vain tuo 31536 näkyy. En löytänyt googlatessakaan mitään aiheeseen liittyvää... osaako täällä kukaan neuvoa?

 

[nnaku]

Onkohan tää cacheControl pelkkä options boolean flagi, eikä mene headeriin suoraan. Kokeileppa booleanilla huvikseen.

 

[null]

Signaali

Tilannehuone -klooni, joka on väsätty react + node.js kombolla responsiivisuutta unohtamatta.
Listaa siis viimeisimmät hälytyskeskuksen hälytykset, sekä näyttää ne kartalla.

Pyörii tällä hetkellä herokussa. Ilmaisversio kyseessä, joten saattaa ottaa tovin ennen kuin aukeaa.

Mutta joka tapauksessa, rakentava kritiikki on tervetullutta.

 

[living_death]

Nyt sitten kävi näin.

Olen ollut yli kymmenen vuotta pienyrittäjän webmaster kahdelle nettisivulle ja "asiakas" kuumotteli marraskuussa, että nyt on kiire saada nettisivut pystyyn uuden firman pystytyksen vuoksi.

Ei siinä mitään ja tartuin toimeen ripeästi.

Vaatimuksena oli kivat ja näyttävät sivut ja saan vapaa kädet kaikelle.

Hommahan ei toimi niin, vaan tarvitsin tietenkin sivuille tekstit, kuvat yms. mutta en saanut niitä monen kyselyn jälkeen ja viikko sitten vähän varoittelin, että minullakin on oma elämä ja määrättyinä aikona mahdollista paneutua sivujen tekemiseen ja pitkät odotusajat eivät motivoi sivujen rakentamisessa.

Laitoin vielä eilen viimeisen kerran viestin whatsapista firman omistajalle ja hänen vaimollensa, että nyt pitäisi saada jotain vastausta asiaan... Ei vastausta, joten poistin sivut palvelimelta ja laitoin viestin, että etsikää joku toinen henkilö tekemään sivuja.

Vastaus viestiin: "Aha. Selvä".

 

[apek]

Signaali

Tilannehuone -klooni, joka on väsätty react + node.js kombolla responsiivisuutta unohtamatta.
Listaa siis viimeisimmät hälytyskeskuksen hälytykset, sekä näyttää ne kartalla.

Pyörii tällä hetkellä herokussa. Ilmaisversio kyseessä, joten saattaa ottaa tovin ennen kuin aukeaa.

Mutta joka tapauksessa, rakentava kritiikki on tervetullutta.

Minusta nuo kuvakkeet voisi olla vähän pienemmät "hälytykset" sivulla. Mahtuisi enemmän näkyviin samaan tilaan. Tai kenties siirtää kuvakkeen vasemmalle, niin mahtuu vielä enemmän samaan näkymään ilmoituksia. En tiedä minkälainen se käytännössä olisi, mutta siis tähän tapaan.

Tai esimerkiksi valinta, jolla käyttäjä voi muuttaa asettelua kuvakkeista listamuotoon yms.

Originaali:

 

[null]

Minusta nuo kuvakkeet voisi olla vähän pienemmät "hälytykset" sivulla. Mahtuisi enemmän näkyviin samaan tilaan. Tai kenties siirtää kuvakkeen vasemmalle, niin mahtuu vielä enemmän samaan näkymään ilmoituksia. En tiedä minkälainen se käytännössä olisi, mutta siis tähän tapaan.

Tai esimerkiksi valinta, jolla käyttäjä voi muuttaa asettelua kuvakkeista listamuotoon yms.

Tästä olen samaa mieltä ja tuo viimeisin esittämäsi vaihtoehto näyttää suht hyvältä. Voisin kokeilla jotain tuollaista.

Ja kiitoksia kommentista.

 

[Aivotton]

Minusta nuo kuvakkeet voisi olla vähän pienemmät "hälytykset" sivulla. Mahtuisi enemmän näkyviin samaan tilaan. Tai kenties siirtää kuvakkeen vasemmalle, niin mahtuu vielä enemmän samaan näkymään ilmoituksia. En tiedä minkälainen se käytännössä olisi, mutta siis tähän tapaan.

Tai esimerkiksi valinta, jolla käyttäjä voi muuttaa asettelua kuvakkeista listamuotoon yms.

Originaali:

Millä/mistä/miten teit tuon logon, aika hieno nimittäin

 

[apek]

Millä/mistä/miten teit tuon logon, aika hieno nimittäin

En ole minä tehnyt, vaan tuo on kuvakaappaus tuosta @null sivulta. Isoin kuva siis on kuvakaappaus ja kaksi pienempää muokkasin pienemmäksi näyttämään mitä tarkoitin.

 

[Aivotton]

Signaali

Tilannehuone -klooni, joka on väsätty react + node.js kombolla responsiivisuutta unohtamatta.
Listaa siis viimeisimmät hälytyskeskuksen hälytykset, sekä näyttää ne kartalla.

Pyörii tällä hetkellä herokussa. Ilmaisversio kyseessä, joten saattaa ottaa tovin ennen kuin aukeaa.

Mutta joka tapauksessa, rakentava kritiikki on tervetullutta.

Millä ja miten teit tuon sivusi logon?

 

[null]

Millä ja miten teit tuon sivusi logon?

Adobe illustrator -ohjelmalla(svg), mutta mikä tahansa vastaava käy.

 

[Tuke]

Ja kysymys! Minulla on Node/Express setupissa:

const maxAge = (!process.env.DEV) ? 31536000 : 0;
const cacheControl = (!process.env.DEV) ? 'public' : 'no-cache';
const etag = false;

app.use("/assets/", express.static(__dirname + "/assets/", { maxAge, cacheControl, etag }));

Mutta Pagespeed antaa warningin, että cache on "8h 45min 36s" ja pitäisi olla pidempi. No, ohjeiden mukaan tuo "31536000" === 1 vuosi. Mutta jostain syystä maxAgena näkyy network consolella katsottuna 31536, eli käytännössä tuhannesosa. Kokeilin erinäköisiä ratkaisuja (kuten 31536001 tai 31536000000), mutta aina vain tuo 31536 näkyy. En löytänyt googlatessakaan mitään aiheeseen liittyvää... osaako täällä kukaan neuvoa?

Millaisessa ympäristössä tuota ajetaan? Tulee mieleen että siellä on reverse proxy välissä joka säätää cache headereita.

 

[Focus0]

Julkaisin viime vuoden puolella yhdistyksen verkkosivut osoitteeseen Old Spark Garage
Sivusto on luotu Webnoden alustalla ja olen törmännyt jo muutamiin haasteisiin ja rajoitteisiin varsinkin objektien siirrettävyyden osalta sekä contentin hallitsemisen/muokkaamisen osalta.

Sivusto on tosiaan rekisteröidyn yhdistyksen tarpeisiin ja kehitämme sitä aktiivisesti eteenpäin tässä kevään aikana.
Hakukoneoptimointien kanssa on ollut haasteita, kiitos Googlen. META-sanojen kanssa on päässyt myös painimaan.
Näihin optimointeihin kyllä voisin mielelläni ottaa ohjeita ja neuvoja vastaan.

 

[Zigh]

Hakukoneoptimointien kanssa on ollut haasteita, kiitos Googlen. META-sanojen kanssa on päässyt myös painimaan.
Näihin optimointeihin kyllä voisin mielelläni ottaa ohjeita ja neuvoja vastaan.

Mitä haasteita? Sivustolla on aika vähän sisältöä (tekstiä), joten ei siellä ole kovin paljon Googlelle indeksoitavaa.
Meta-keywordit oli hyödyllisiä joskus 90-luvulla.

 

[Focus0]

Mitä haasteita? Sivustolla on aika vähän sisältöä (tekstiä), joten ei siellä ole kovin paljon Googlelle indeksoitavaa.
Meta-keywordit oli hyödyllisiä joskus 90-luvulla.

Käytössä on Google Analytics ja Search Console mutta silti googlen sivuhakuun ei meinannut indeksoida ollenkaan.
Nyt löytyy kyllä google hausta mutta meni useampi viikko että alkoi löytymään.

 

[©©©]

Signaali

Tilannehuone -klooni, joka on väsätty react + node.js kombolla responsiivisuutta unohtamatta.
Listaa siis viimeisimmät hälytyskeskuksen hälytykset, sekä näyttää ne kartalla.

Pyörii tällä hetkellä herokussa. Ilmaisversio kyseessä, joten saattaa ottaa tovin ennen kuin aukeaa.

Mutta joka tapauksessa, rakentava kritiikki on tervetullutta.

Ihan jees sivu. Siisti ja toimiva, mutta miten tuolla public puolella on kaikkee cräppiä node moduuleista lähtien:

Joku mennyt pieleen deployment-vaiheessa?

 

[Zigh]

Käytössä on Google Analytics ja Search Console mutta silti googlen sivuhakuun ei meinannut indeksoida ollenkaan.
Nyt löytyy kyllä google hausta mutta meni useampi viikko että alkoi löytymään.

Ihan normaalia uudelle sivustolle, johon ei juuri johda linkkejäkään mistään.

 

[null]

Ihan jees sivu. Siisti ja toimiva, mutta miten tuolla public puolella on kaikkee cräppiä node moduuleista lähtien:



Joku mennyt pieleen deployment-vaiheessa?

Hyvä kysymys, oletan, että tuo sun kuvakaappaus on otettu Edge (dev) selaimesta? Chrome ei näytä mitään ylimääräistä. Tarkastin huvikseni @nnaku Uutis lanka -sivuston ja sieltäkin löytyy yllättävän paljon sälää, nimenomaan edgellä.

edit: johtuu luultavastin siitä, että tuo on development build, ei production build. Opiskelemaan -->

 

[Zvona]

Millaisessa ympäristössä tuota ajetaan? Tulee mieleen että siellä on reverse proxy välissä joka säätää cache headereita.

Juu, tässähän oli juttuna, että Cloudflaresta piti antaa mennä mun setup läpi. Siellä oli jokin default, jota pisteli menemään ignoroiden mun omat.

 

[©©©]

Hyvä kysymys, oletan, että tuo sun kuvakaappaus on otettu Edge (dev) selaimesta? Chrome ei näytä mitään ylimääräistä. Tarkastin huvikseni @nnaku Uutis lanka -sivuston ja sieltäkin löytyy yllättävän paljon sälää, nimenomaan edgellä.

Näkyy myös Chromella, mutta moni noista antaa 404 jos yritän avata niitä selaimeen. Näen kyllä browserin dev työkaluilla contentin. Mistähän nämä oikein tulee? Ei näytä muilla sivuilla olevan samaa issueta. Voitko jotenkin tarkistaa mitä sinne on deployattu? Mitä siel web serverillä oikeasti on?

 

[null]

Näkyy myös Chromella, mutta moni noista antaa 404 jos yritän avata niitä selaimeen. Näen kyllä browserin dev työkaluilla contentin. Mistähän nämä oikein tulee? Ei näytä muilla sivuilla olevan samaa issueta. Voitko jotenkin tarkistaa mitä sinne on deployattu? Mitä siel web serverillä oikeasti on?

Editoin viestiäni, jossa mainittu mahdollinen ongelman lähde.

 

[Zigh]

Hyvä kysymys, oletan, että tuo sun kuvakaappaus on otettu Edge (dev) selaimesta? Chrome ei näytä mitään ylimääräistä. Tarkastin huvikseni @nnaku Uutis lanka -sivuston ja sieltäkin löytyy yllättävän paljon sälää, nimenomaan edgellä.

edit: johtuu luultavastin siitä, että tuo on development build, ei production build. Opiskelemaan -->

Näkyy molemmilla sivustoilla myös Chromella. Olisiko syyllinen tuo loadGA.js -skripti joka ladataan erikseen eikä sitä ole bundlattu muun js:n sekaan?

 

[null]

Näkyy molemmilla sivustoilla myös Chromella. Olisiko syyllinen tuo loadGA.js -skripti joka ladataan erikseen eikä sitä ole bundlattu muun js:n sekaan?

Mitä kautta nuo sai näkyviin Chromella?

Joka tapauksessa, ongelma oli vissiinkin siinä, että source mappien generointi on oletuksena päällä.
How to generate sourcemaps in create react app?

Herokussa on nyt päivitetty versio, enkä itse ainakaan saanut enää näkyviin ylimääräistä sälää.

 

[Zigh]

Mitä kautta nuo sai näkyviin Chromella?

Devtoolsin (F12) Sources-välilehti.
Jos tarkkoja ollaan niin itselläni on käytössä Chromium Ubuntussa, ei varsinainen Chrome.

Joka tapauksessa, ongelma oli vissiinkin siinä, että source mappien generointi on oletuksena päällä.
How to generate sourcemaps in create react app?

Herokussa on nyt päivitetty versio, enkä itse ainakaan saanut enää näkyviin ylimääräistä sälää.

Joo, ei näy. GA- ja fonttiloaderit näyttää olevan nyt myös bundlattuna.

 

[©©©]

Mitä kautta nuo sai näkyviin Chromella?

Joka tapauksessa, ongelma oli vissiinkin siinä, että source mappien generointi on oletuksena päällä.
How to generate sourcemaps in create react app?

Herokussa on nyt päivitetty versio, enkä itse ainakaan saanut enää näkyviin ylimääräistä sälää.

Jes nyt näyttää siltä miltä pitää . Olis muuten kiva jos noita hälytyksiä pystyis painamaan ja saamaan jotain lisätietoa niistä, esim. tarkan sijainnin kartalla ja muuta lisäinfoa mitä API:sta irtoaa. Nyt on vähän karu kun niitä ei voi klikkailla.

 

[pinppi]

En nyt noita omia tekeleitä kehtaa missään nimessä linkata tänne, mutta pari vuotta sitten tuli väännettyä tutulle aloittelevalle yrittäjälle kotisivut ensihätään. Sivustolta puuttuu kaikki hienoudet eli tehty tyyliin pelkästään html/css:llä mistä käy jutun juoni ilmi . No nyt tuli pari vuotta täyteen ja domain+servu maksut pitäisi maksaa taas pariksi vuodeksi eteenpäin ja samalla sivuston omistajalta tuli myös hieman monimutkaisempaa toivetta sivustoa koskien. Toiveena olisi, että asiakas voisi varata sivuston kautta ajan asiakaskäynnille ja oma mielipiteeni on että jos noi sivut olisi oman yritykseni niin kyllä ne pitäisi samalla kertaa tehdä modernimmalla otteella...

Mitä olen joskus tyyliin vuosi sitten kännissä seurannut ja naureskellut, niin sivuston liikenne on aika *piip* vähäistä. Itselläni on myös mielenkiinto nettisivujen tekoa kohtaan aika pyöreä nolla ja muutenkin näin muutaman vuoden jälkeen jos noita sivuja lähtisin päivittämään niin kaiken joutuisi opettelemaan tyyliin alusta saakka uudestaan. Mielenkiinto ei yksinkertaisesti riitä, mutta autan kyllä jos selviän tästä suhteellisen vähällä vaivalla...

a) Onko olemassa joku ilmainen ja helppo työkalu ihan perus sivustojen tekemiseen millä saisi myös tuon ajanvarauksen toteutettua. Jos ei ilmainen niin saisi kyllä olla helvetin halpa eikä mitään hikisiä kuukausimaksuja.
b) Miten tuon servupuolen ja domainin maksun kanssa tulisi toimia? Mielestäni on aivan saatanan naurettavaa maksaa joku 140€/2 vuotta, kun katsoo tuota liikennettä mitä sivustolla tapahtuu. Laatikossa pyörii ylimääräinen raspberry pi zero wireless ja pine-64 löytyy myös mikä tuli joskus hankittua jostain vi*un typerästä syystä, ja muistelisin että jompaa kumpaa tai molempia voisi käyttää servuna. Domaininkin saa ilmeisesti alle 20e/vuosi mitä nyt nopeasti googlettelin.

Voisin kyllä tuollaista nykyisen dataliikenteen kaltaista sivustoa pyörittää nurkissani mobiilinetin varassa ja ottaa maksuksi sen pari koppaa kaljaa. Kaikki vinkit kelpaavat.

 

[Styyrmanni]

a) Onko olemassa joku ilmainen ja helppo työkalu ihan perus sivustojen tekemiseen millä saisi myös tuon ajanvarauksen toteutettua. Jos ei ilmainen niin saisi kyllä olla helvetin halpa eikä mitään hikisiä kuukausimaksuja.

Meillä on käytössä WordPress-alusta, johon koodasin oman teeman. Valmiitakin teemoja toki löytyy netti pullollaan. Omaa kokemusta mistään ajanvaraus-plugareista ei ole, mutta äkkiseltään Googlen perusteella niitäkin näyttäisi olevan. Hintaa tasan 0 € ellei plugareiden lisätoiminnoista halua erikseen jotain maksaa. Minusta aivan loistava työkalu pienelle blogille ja muutamalla staattiselle sivulle!

b) Miten tuon servupuolen ja domainin maksun kanssa tulisi toimia? Mielestäni on aivan saatanan naurettavaa maksaa joku 140€/2 vuotta, kun katsoo tuota liikennettä mitä sivustolla tapahtuu. Laatikossa pyörii ylimääräinen raspberry pi zero wireless ja pine-64 löytyy myös mikä tuli joskus hankittua jostain vi*un typerästä syystä, ja muistelisin että jompaa kumpaa tai molempia voisi käyttää servuna. Domaininkin saa ilmeisesti alle 20e/vuosi mitä nyt nopeasti googlettelin.

Älä missään nimessä maksa noin paljon! Aikojen alussa, kun nettisivuprojekteja lähdin tekemään, oli hostaus OVH:lta hintaan 2,50 €/kk sisältäen yhden ilmaisen domainin. Nälkä kasvoi syödessä ja nyt viimeiset vuodet on menty omalla virtuaalikoneella vähän eri paikoissa, mutta nykyisellään palvelut rallattaa Hetznerin Helsingin datacenterissä hintaan 3,09 €/kk + muutama sentti varmuuskopioina toimivista snapshoteista. Ehkä oma virtuaalipalvelin ei tule kyseeseen, jos ei mielenkiintoa riitä sen kanssa säätää. Suosittelisin jotain perus hosting-pakettia, kuten tuo OVH minulla aikanaan oli.

Lisäksi rekisteröidyin itse verkkotunnusvälittäjäksi ja rekisteröin itselleni oman .fi-domainin hintaan 9 €/vuosi. Virtuaalikoneella ja .fi-domainilla koko lystin kustannus siis alle 50 €/vuosi.

 

[pinppi]

Kiitän. Toi wordpress nyt soitteli entuudestaankin kelloja, mutta näköjään tuo ehdottaisi henkilökohtaiseen käyttöön 4€/kk hintaa vai onko ideana käyttää tuota "not sure yet, aloita ilmaisella" ja sitten pölliä koodi?

Joo minun mielestäni tuo 140€ on myös aika suolainen hinta ja tosiaan käyttäjäkunta ei taida mitään kovin aktiivista surffailua harrastavaa olla. Sanotaan näin, että mielenkiinto voisi riittää jos esim. raspberryn voisin tuohon hommaan valjastaa (tulisi sille käyttöäkin). Miltä esim. tämä ohje näyttää ammattilaisen silmään? https://projects.raspberrypi.org/en/projects/lamp-web-server-with-wordpress

 

[apek]

Toi wordpress nyt soitteli entuudestaankin kelloja, mutta näköjään tuo ehdottaisi henkilökohtaiseen käyttöön 4€/kk hintaa vai onko ideana käyttää tuota "not sure yet, aloita ilmaisella" ja sitten pölliä koodi?

Wordpressin voit ladata ihan ilmaiseksi ja laillisesti ja laittaa sen omalle palvelimelle.

Download

Get WordPress Everything you need to set up your site just the way you want it. Download and install it yourself For anyone comfortable getting their own hosting and domain. Recommend PHP or greater and MySQL version or MariaDB version or greater. Set up with a hosting provider For anyone...

fi.wordpress.org

Wordpress.com ja Wordpress.org on täysin eri palvelu. Comi on maksullinen hostaus palvelu, jossa siis saa sivutilaa ja domainin. Org on Wordpress josta se ladataan koneelle ja asennetaan itse omalle palvelimelle.

 

[Zvona]

Palvelu: Karanteeniajan (ja myöhemmänkin ajan) Trello / Jira / <mikä_tahansa_taskboard>, joka on yksinkertaistettu suomalaisten oppilaiden ja heidän vanhempiensa käyttöön etäopiskelun taskittamiseen ja seurantaan.

Motiivi: Tällä hetkellä opettajat käyttävät n+1 tiedotuskanavaa n+1 eri metodein. On Wilmaa eri ominaisuuksin, Classroomia, Pedanet:iä(?) ja vaikka mitä tiedotusvälinettä. Oppilaan on käytännössä mahdotonta pysyä kartalla, että mitä kaikkea tulee tehdä. Tästä seuraa ahdistus sekä oppilaalle itselleen että myös hänen vanhemmilleen (ml. itse vanhempana), jotka eivät ole kartalla mitä seuraavaksi tulisi opiskella.

Vallitseva tilanne: on olemassa maksuttomia palveluita, kuten em. Trello, joiden avulla voi trackata taskeja. Ne ovat kuitenkin kirjautumisten takana, monimutkaisten toimintojen höystämiä sekä hieman eri tarkoitukseen suunnattuja palveluita.

Ratkaisu: Suomenkielinen (ehkä ruåtsi myöhemmin), maksuton - ehkä open sourceattu - palvelu, jossa on osiot vain koulunkäynnille oleellisille sloteille. Yksinkertainen UI, joka tekee tasan kaksi asiaa: 1) käyttäjä(t) luo taskeja ja 2) ylläpitää niiden tilaa.

Palvelun status: vielä keskeneräinen monin osiin - esim. taskeja ei voi luoda UI:n kautta vielä. Mutta hyvää vauhtia etenevä. Tavoitteena saada tämä nuijittua kasaan ensi viikon loppuun mennessä.

Muuta huomioitavaa: Palvelu ei edellytä tunnuksien luomista, jos ja kun sitä haluaa testailla. Mutta tunnuksilla luonnollisesti taskit tallentuvat kantaan ja kirjautuminen onnistuu myös muilta laitteilta. Desktop only -versio näin alkuun.

Stack:
- React = frontend
- Redux + persist = frontin tilanhallinta
- Node + Express = bäkkärin kielenä + middleware
- MongoDB = tietokantana
- Cypress = testaukseen

URL: React App (myöhemmin https ja virallinen URL)

Screenshot:

 

[Styyrmanni]

@apek tuossa yllä jo selvittikin Wordpressin kuviot.

Sanotaan näin, että mielenkiinto voisi riittää jos esim. raspberryn voisin tuohon hommaan valjastaa (tulisi sille käyttöäkin). Miltä esim. tämä ohje näyttää ammattilaisen silmään? https://projects.raspberrypi.org/en/projects/lamp-web-server-with-wordpress

Älä kehu ammattilaiseksi – mahdotonta harrastelijamaista räpellystähän tämä lähinnä muistuttaa meikäläisen kohdalla! Linkkaamasi ohje on simppeli ja sillä saa hyvin pystyyn perus nettisivupalvelimen.

Periaatteessa serveri voi vähäisellä kävijämäärällä tai vaatimustasolla olla mikä tahansa kone, joka on yhteydessä nettiin, mutta noissa mobiililiittymissä (jos sellaista oikeasti meinaat) ollaan nykyään usein operaattorin NATin takana. Silloin ei onnistu oman palvelimen pitäminen kotona, kun reititinkään ei saa julkista IP-osoitetta eli palvelinta ei ns. saa kuuluville (operaattorit taitaa kuitenkin myydä lisäpalveluna julkista IP:tä). Pitäisi myös viritellä joku DynDNS-systeemi, koska IP-osoite vaihtelee tod.näk. vähän väliä. En myöskään ole kovin varma, mitä operaattorit tykkää kotipalvelimista, ja ainakaan sähköpostia (esim. suunnittelemasi ajanvarausjärjestelmän vahvistusviestejä) ei palvelimelta saa lähetettyä suoraan ulos, kun portit on säännösten takia kiinni. Pari haastetta, jotka vaikuttaa hankalilta, mutta voi onnistua näinkin, minulla kokemusta tällaisesta kovin vähän.

 

[null]

Yksi uutiskeräin lisää.

Kiinnostus tähän lähti lähinnä käyttäjän @nnaku uutislanka projektista.
Halusin luoda uutiskeräimen, jota itse käyttäisin, sillä en juurikaan seuraa uutisia.

Uutiset näytetään korttien muodossa kuvien kera, jos sellainen on saatavilla. Kaikki roska lähteet on esimoderoitu pois.

Tämähän ei ole missään nimessä valmis, vaan kehitysvaiheessa oleva rakennelma, mutta kaikki rakentava palaute on tervetullutta.

Uutisankka

Ajankohtaiset uutiset yhdestä paikasta.

uutisankka.herokuapp.com

 

[nnaku]

Yksi uutiskeräin lisää.

Kiinnostus tähän lähti lähinnä käyttäjän @nnaku uutislanka projektista.
Halusin luoda uutiskeräimen, jota itse käyttäisin, sillä en juurikaan seuraa uutisia.

Uutiset näytetään korttien muodossa kuvien kera, jos sellainen on saatavilla. Kaikki roska lähteet on esimoderoitu pois.

Tämähän ei ole missään nimessä valmis, vaan kehitysvaiheessa oleva rakennelma, mutta kaikki rakentava palaute on tervetullutta.

Uutisankka

Ajankohtaiset uutiset yhdestä paikasta.

uutisankka.herokuapp.com

Joko askartelit apin ja laitat sen jakoon. Suurin onglema omassa projussa oli just lähteiden kanssan.

 

[null]

Joko askartelit apin ja laitat sen jakoon. Suurin onglema omassa projussa oli just lähteiden kanssan.

API ei ole siinä kunnossa, että sitä kehtaisi näytellä.

Lähteiden kanssa olin aika vaativa. Muun muassa puuttuva favicon johti hylkäämiseen, tai jos sivusto muutoin näytti paskalta, niin se tippui.

Osan faviconeista väsäsin käsin suurempaan resoluutioon.

 

[reissuesa]

Olen kehittänyt omaa uutiskeräintä tammikuusta lähtien ja nyt se olisi sellaisessa kunnossa, että kehtaa esitellä. Olisiko tästä kilpailijaksi Amppareille, High.fi:lle tai Rbot.fi:lle?

Uutislähteitä on tällä hetkellä noin 60 kpl, ja näkyvissä on vain maksuttomia ja lukukertarajoittamattomia uutisia.

Kuvallinen versio on oletuksena, mutta kirjautuneena voi valita myös tekstiversion (ja suodattaa uutislähteitä/-otsikoita).

Uusimmat - Uutiskeräin

Uutiskeräin on kuin Ampparit, mutta kuvilla ja ilman mainoksia - aiheina kotimaa, ulkomaat, talous, tekniikka, urheilu ja vapaa-aika.

www.uutiskerain.fi