Yleistä keskustelua webdevauksesta

[Rantakemisti]

Juu tässä teinkin tosiaan muutoksia juurikin kaikkiin (kahteen) dropdowniin

Tässä oli vielä se toinen juttu mitä hain eli dropdownissa olevan aktiivisen sivun backround color, laitetaan nyt näkyville jos joku etsii joskus samaa:

ul.dropdown-menu>li.active>a:hover{
    background: #419641 !important;
}

ul.dropdown-menu>li.active>a{
    background: #51AB51 !important;
}

Navimuutokset sainkin nyt siten tehtyä "tilaajan" toiveiden mukaiseksi

Ajoin validatorin ja siellähän tulee näistäkin varoituksia:

Line 771, Column 4: NET-enabling start-tag requires SHORTTAG YES
<br/>

Onko noilla varoituksilla mitään merkitystä? En muista minkä ajon myötä ne tuonne ilmestyi, olikohan joku googlen metatietojuttu Helpollahan tuosta selviää mutta ei vaan jaksaisi turhanpäiten karsia, olen jopa kuullut että moni tarkoituksella päättää myös br-tagin

Tarkoitin tuolla luokkien käyttämisellä, että teet tuota tarkoitusta varten oman luokan etkä yliaja Bootstrapin omaa luokkaa. Teet vaikka luokan nimeltä "dropdown-menu-green" ja lisäät sen kaikkiin pudotusvalikoihin joiden väriä haluat muuttaa. Eli samalla ajatuksella kuin Bootstrapin omat btn-primary, btn-danger ja vastaavat tyylittelyt. Tämä on jatkokehityksen kannalta huomattavasti siistimpi ratkaisu kuin yliajaa oletusasetuksia ja älä varsinkaan yliaja niitä "!important"-säännöllä!

Nyt jos haluaisitkin tehdä toisesta pudotusvalikosta punaisen ja loisit sille luokan "dropdown-menu-red" sekä asettaisit taustaväriksi punaisen niin pudotusvalikko olisi silti vihreä. Nyt tuo aikaisempi !important pitäisi yliajaa toisella !important-käskyllä ja CSS-tyylitiedostostasi tulee jatkuvasti vaikeampi hallita.

Jos taas teet omat luokat niin voit niiden perusteella määrittää taustavärin ja jos joskus haluat tehdä pudotusvalikon Bootstrapin oletustaustavärillä niin sekin onnistuisi. Yksi vaihtoehto on kustomoida koko Bootstrap (Customize and download · Bootstrap) ja tämä on hyvä ratkaisu jos haluat muuttaa kunnolla Bootstrapin oletustyylejä.

Pari kertaa olen joutunut siistimään tyylitiedostoja, joissa Bootstrapin tai jonkun muun frameworkin oletusasetuksia on sorkittu sieltä täältä ja se ei ole ollut kivaa kun joutuu arvailemaan, minkä takia esim. "row"- tai "btn"-luokat eivät toimi oletetusti. Lopputuloksena joutuu kirjoittamaan sata riviä tyylitiedostoa uusiksi jonkun pienen muutoksen takia.

tl;dr Käytä omia luokkia, jolloin jo HTML-koodista näkee minkä takia jokin pudotusvalikko on vihreä ja jokin toinen on vaikka punainen. Vaihtoehtoisesti kustomoi koko Bootstrap-tyylitiedosto, jolloin kaikilla elementeillä on yhtenäinen linja.

 

[SweeneyTodd]

Tarkoitin tuolla luokkien käyttämisellä, että teet tuota tarkoitusta varten oman luokan etkä yliaja Bootstrapin omaa luokkaa.

Erittäin hyvää tekstiä koko viesti.

Voisin tätä täydentää sillä, että tee nämä omat css-täydennykset vielä erilliseen tiedostoon, niin hallinta ja bootstrapin päivitykset on vielä helpompia.

 

[Gize]

Tarkoitin tuolla luokkien käyttämisellä, että teet tuota tarkoitusta varten oman luokan etkä yliaja Bootstrapin omaa luokkaa. Teet vaikka luokan nimeltä "dropdown-menu-green" ja lisäät sen kaikkiin pudotusvalikoihin joiden väriä haluat muuttaa. Eli samalla ajatuksella kuin Bootstrapin omat btn-primary, btn-danger ja vastaavat tyylittelyt. Tämä on jatkokehityksen kannalta huomattavasti siistimpi ratkaisu kuin yliajaa oletusasetuksia ja älä varsinkaan yliaja niitä "!important"-säännöllä!

Nyt jos haluaisitkin tehdä toisesta pudotusvalikosta punaisen ja loisit sille luokan "dropdown-menu-red" sekä asettaisit taustaväriksi punaisen niin pudotusvalikko olisi silti vihreä. Nyt tuo aikaisempi !important pitäisi yliajaa toisella !important-käskyllä ja CSS-tyylitiedostostasi tulee jatkuvasti vaikeampi hallita.

Kiitos hyvästä kirjoituksesta

Tuo "!important" jäikin tosiaan copypastena suoraan stackoverflowsta josta sen pätkän löysin

Jatkokehitys onkin tämän sivuston kohdalla mielenkiintoista, kun sivu on luotu muistaakseni jo 2009 Helpointa olisi tehdä koko sivusto uusiksi ja siihen varmaan myös päädytään jossain vaiheessa, nyt on vain tekohengitelty tälle vuosikymmenelle ja optimoitu puhelimille jne., katsotaan mihin aika (ja into) riittää kun en näitä ammatikseni tee. Hauskaa hommaahan tämä vieläkin on ja onnistumisen tunnekin on parempi kuin onnistuneessa autoremontissa, ne kun ovat melko helppoja

Sikäli homma onnistuu melko helposti vielä tuossa sivustossa kun ilmeen pitäisi olla yhtenäinen joka sivulla, ja etenkin kokonaisuutena mahdollisimman yhtenäinen eli kaikki dropdownit, linkit yms. noudattaisi samaa linjaa, mutta ymmärrän kyllä pointtisi, etenkin jos olisi isompi sivusto kyseessä

Jos taas teet omat luokat niin voit niiden perusteella määrittää taustavärin ja jos joskus haluat tehdä pudotusvalikon Bootstrapin oletustaustavärillä niin sekin onnistuisi. Yksi vaihtoehto on kustomoida koko Bootstrap (Customize and download · Bootstrap) ja tämä on hyvä ratkaisu jos haluat muuttaa kunnolla Bootstrapin oletustyylejä.

Kiitos, hyvä vinkki

Jatketaan harjoituksia

 

[mopnex]

Jos Bootstrappia on pakko käyttää, niin fiksuinta on yliajaa nuo väriarvot LESS/SASS puolella, ja ottaa käyttöön vain se osa mitä tulee oikeasti käytettyä. Bootstrap on kyllä suhteellisen paisunut teos sellaisenaan.

 

[Fanboys Suck]

Teet vaikka luokan nimeltä "dropdown-menu-green"

Ei ole paras tapa laittaa luokan nimeen väriä tms. koska ensi vuonna se väri ei ehkä olekaan enää vihreä.

 

[Gize]

Tämähän meni nyt mielenkiintoiseksi, minulla on nyt indextestisivu.html, jossa pätkä koodia:

 <link rel="stylesheet" href="css/bootstrap.min.css">
    
     <link rel="stylesheet" href="css/tyyli2.css">

Sitten minulla on kaksi .css jotka ovat täysin identtiset (tyyli ja tyyli2).

Kuitenkin navbar on erinäköinen näillä filuilla, siis tyyli ja tyyli2

Kysynkin, että miten tämä on edes mahdollista?

Ongelman olen varmentanut useasti, tyyli2 on se mitä hain. Kuitenkin tyyli2, ctrlA, ctrlC -> tyyli.css ctrlA ctrlV ctrlS ->indexistä 2 pois = tyyli.css +ctrlS ja tyyli vaihtuu vaikka otan css sisällön suoraan copypasteamalla

Eihän siinä mitään, homma toimii jos käytän tuota tyyli2.css mutta miten hemmetissä tämä on mahdollista???

 

[Rantakemisti]

Jos Bootstrappia on pakko käyttää, niin fiksuinta on yliajaa nuo väriarvot LESS/SASS puolella, ja ottaa käyttöön vain se osa mitä tulee oikeasti käytettyä. Bootstrap on kyllä suhteellisen paisunut teos sellaisenaan.

@Gize n tapauksessa nuo CSS preprocessorit menee varmaan vähän turhaksi kikkailuksi, mutta se on totta että tuo Bootstrap on turhan paisunut kikkare. Melkein kannattaa kustomoida ja valkata vain ne komponentit joita oikeasti tarvitsee (Customize and download · Bootstrap).

Ei ole paras tapa laittaa luokan nimeen väriä tms. koska ensi vuonna se väri ei ehkä olekaan enää vihreä.

Ihan totta ja tässä se olikin vain esimerkkinä.

Kysynkin, että miten tämä on edes mahdollista?

Ei tuon pitäisi olla mitenkään mahdollista jos tyylitiedost ovat identtiset. Kannattaa tsekata että se tyyli.css oikeasti löytyy.

 

[Gize]

Ei tuon pitäisi olla mitenkään mahdollista jos tyylitiedost ovat identtiset. Kannattaa tsekata että se tyyli.css oikeasti löytyy.

No ei minustakaan Ajattelin että voisi olla jokin merkistökoodaus tmv. juttu Ja olin siis testannut myös niin että olen kopioinut molemmat identtisiksi ja lähettänyt palvelimelle, sitten lähettänyt palvelimelle index1 ja index2 joista toinen käyttää tyyli ja toinen tyyli2, ja lopputulos eri, mitähän veetua

Jaetaanpa vielä kokemuksia kun luulen asian selättäneeni:

Nyt testasin vielä lisää, otin suoran kopion toimivasta tyyli2 ja nimesin tyyli3, meni vielä erilaiseksi

Seuraavaksi ajattelin että nyt on jotain tallennusmetodissa tmv. vikaa, käytössä siis perus Notepad++. Otin vielä toimivasta tyyli2 kopion, ja huolella tallensin nimellä tyyli4, enkä laittanut päätettä ollenkaan käsin vaan erikseen valitsin valikosta .css, ja nyt siitä tulikin identtinen tyyli2 kanssa Ongelma on ilmeisesti siinä että Notepad++ oletus on .txt, ja vaikka suoraan lyöt perään .css niin homma ei toimi niinkuin pitäisi. Homma ei myöskään korjautunut vaikka uudestaan otin tyyli.css, tallenna nimellä, valitse .css, vaan virhe pysyi. Vielä palvelimelle siirto voinee mutkistaa tätä koska eri versioita tuli lopulta kolme, joista siis yksi oli oikea Ongelmaahan ei ollut kun omalla koneella aluksi tämän tein, vaan leiska muuttui vasta palvelimelle päästyään

Halusin todentaa vielä ongelman ratkaisun käytännössä, joten otin tyyli1:stä kopion, joka aiemmin teki väärännäköistä, ja nimesin tyyli7, tarkasti valiten ensin muodoksi .css ja toimii kuten pitäisikin

Tähän väliin vielä versiot mitä tuli aikaiseksi tästä sekoilusta, tyyli.css, tyyli2.css (haluttu), tyyli3.css:

Mikään ei siis muuttunut itse sivussa, eikä css koodissa, vain eri lailla tallennettu by Notepad++

Toivottavasti joku vielä löytää tämän ketjun googlella tulevaisuudessa, hakusanoja esim. Notepad++ CSS tallennus sekoilut, ettei tullut vain omaksi iloksi harrasteltua

Valistuneemmat devaajat sais kyllä heittää mielipidettä, @Rantakemisti onko heittää kommenttia? Loppukaneettina vielä testasin kaikki tyylit nyt vielä omalla koneella, ei muutoksia, mutta tosiaan palvelimelle pääsyn jälkeen lopputuloksia oli erilaisia kuten kuvassa yllä, ja ainoa ero oli tyylissä tallentaa

EDIT: kuvassa valkoinen on vaan paintin pohjaa

 

[eiltanen]

Kannattaa tsekata merkistötkin, windows käyttää ANSIa vieläkin oletuksena....

Mutta ite asiaan, selaimesta devtools auki ja sieltä näät elementeistä suoraan mistä tiedostoista tyylejä ladataan. Jos ne on identtiset, viimeistä pitäis käyttää.

Helposti ryssii vaikka edellisiltä riveiltä } pois tms.

Toinen yleinen syy on että selain tarjoaa välimuistista vanhempaa versiota.

 

[mopnex]

Kannattaa ehkä siirtyä käyttämään Atom / Visual Studio Code / SublimeText / Lighttable tai vastaavia editoreita jos meinaat jatkossa enemmän tehdä juttuja. Noissa on usein fiksut oletukset tallennuksen suhteen (merkistö, rivinlopetusmerkki jne..).

 

[Gize]

Kannattaa ehkä siirtyä käyttämään Atom / Visual Studio Code / SublimeText / Lighttable tai vastaavia editoreita jos meinaat jatkossa enemmän tehdä juttuja. Noissa on usein fiksut oletukset tallennuksen suhteen (merkistö, rivinlopetusmerkki jne..).

Kiitos suosituksista täytyy laittaa kokeiluun jossain vaiheessa

On mulla tuo Dreamweaver myös mutta oli niin pikkuhommista kyse että en jaksanut sitä avata kun olin (tehottomalla) läppärillä

 

[jhalmu]

Atomilla koetin ruveta, mutta vscode kuitenkin voitti. Emmet — the essential toolkit for web-developers tuo plugini siihen niin avot!

 

[eiltanen]

Tää ei sovi isoihin projekteihin välttämättä mutta GitHub - ZevanRosser/ztxt: A browser based code editor that uses codemirror on aika kiva. Vähän kuin jsfiddle jne. Lähes kaikki php+mysql+css+html+js -häröilyt tulee tehtyä tolla.

 

[Karte]

Nyt tulee hieman tyhmiä kysymyksiä vagrant/virtualbox setupista.

Tällä hetkellä testikäytössä on ubuntu/trusty64, johon olen kopioinut netistä löytämiä vagrantfilejä ja provisioneja, mutta kokonaisuus ei toimi halutulla tavalla. Nykyisellä setupilla ajan lähinnä php-skriptejä shellissä, mutta testiympäristöön pitäisi pystyttää kunnon serveri, jossa aja web-sivuja/sovelluksia.

En kuitenkaan ymmärrä serveripäästä ihan hirveästi ja linuxia on tullut käytettyä liian vähän, joten tarvitsisin pientä jeesiä vagrantfilen ( ja bootstrap.sh ym.) konffaamiseen.

Pähkinänkuoressa virtuaalikoneen pitäisi toimia testiympäristön apache2 -serverinä. Ubuntun /var/www/<projekti>/<nettisivu>/public_html olisi kansiorakenne, jossa <projekti> symlinkattaisiin Win 10 isäntäkoneeseen. Nettisivuja pitäisi pystyä lisäämään useampia projektiin ja selaimessa olisi IP-osoitteen sijaan <nettisivu> (tai <projekti>/<nettisivu>).

Nettisivujen tulisi toimia esim. wordpress-mysql -kombolla ja vastaavilla.

 

[asikainl]

Mulla on seuraavanlainen ongelma yhdellä omalla harrastesaitilla. Saitti on tehty v.2008 wordpressin päälle ja silloinen kehittäjä rakensi saitin custom teemalla. Saitilla on paljon eräänlaisia laskureita/työkaluja, joissa osassa on mukana ihan yksinkertaisia pieniä graafisia elementtejäkin (siirtyvät toki mukana kun ottaa koko saitista kopion vaikkapa käyttämälläni plugarilla, eli se ei ole ongelma). Nämä työkalusivut on rakennettu siis custom .php-templaattien päälle. Templaateissa on sisässä kaikki laskurien käyttämä koodi (javascripitiä osassa seassa). Kyseisillä sivuilla ainoa HTML on tekstiä ennen laskuria, kaikki muu sisältö/toiminnallisuus tulee .php-templateista.

Nyt on tarkoitus siirtää koko saitti Impreza-teeman päälle, jotta saitista saa responsiivisen ja muutenkin mukavan itselle päivitellä (tuttu teema itselle työpaikalta) ja vähän tehdä samalla kaikenlaista upgradea saitille pikkuhiljaa jne.

Ongelmaksi on muodostunut se, että osa noista .php-templaattien päälle rakennetuista sivuista menee rikki, vaikka siirtää koko templaatin yksi yhteen uuden Impreza-teeman päälle. Eli puhtaana copy/pastena.

Tarvitsisinkin nyt jonkun henkilön apua, joka osaisi tässä ongelmassa auttaa, sovittavaa korvausta vastaan toki, riippuen kuin työläs homma. Veikkaisin että joku joka osaa kyseisiä php-templaatteja vähän lukea / tulevia virheilmoituksia (function error on row XYZ jne.) mitä noi antaa, niin homma voi olla parhaimmillaan jopa tyyliin 10 minuutin "sormien näpäytys" sellaiselle henkilölle.

En voi laittaa templaattien koodia jakoon esim. tänne, koska ne ovat tekijänoikeuden alaisia (eli minulla on oikeus käyttää ks. templaattien koodia saitilla, mutta ei oikeutta levittää koodia eteenpäin). Eli siksi asia pitää hoitaa jonkun kanssa one-on-one.

Löytyisiköhän jotakuta, joka luulisi olevan kykeneväinen auttamaan? Ota yhteyttä vaikka ykskärillä! Vielä parempi, jos olet jostain Tampereen seudulta tai kohtuullisen ajomatkan päässä, niin voitaisiin katsoa asiaa face-to-face.

Kaikki muut "perussivut" ja noista siirrettävistä laskureista simppeleimmät toiminnalisuuksiltaan eivät mene rikki siirrossa ja toimivat hyvin uuden teeman päällä. Rikki meneviä sivuja on yhteensä 4.

Kiitoksia! Jos homma ratkeaa jonkun avulla ja ks. henkilö on halukas mahdollisesti tekemään muutakin hommaa saitin siirtoon uuden teeman päälle liittyen (ulkoasun hiontaa ja vastaavaa "perushommaa"), niin juttu voi poikia pientä lisäduuniakin. Sopii siis esim. alan opiskelijalle tms.

 

[IDDQD]

Noista editoreista vielä, itse olen tykännyt Bracketsista, plugareitakin löytyy melkoinen määrä

 

[Gize]

Onkos porukalla kokemuksia Hotjarista (kuulostipa homolle ) tai vastaavaa parempaa heti suositella? Hotjar - Heatmaps, Visitor Recordings, Conversion Funnels, Form Analytics, Feedback Polls and Surveys in One Platform

 

[PHPaska]

Nykyisellä setupilla ajan lähinnä php-skriptejä shelliss

PHP on kasa paskaa. Tee mielummin vaikka pythonilla

 

[Stanley H. Tweedle]

PHP on kasa paskaa. Tee mielummin vaikka pythonilla

Hieno altteri, jolla syntyy varmasti paljon loistavaa keskustelua.

 

[orakk]

Kokeillaan tätä lankaa kysymykseen. Tarkoitus olisi tehdä pienimuotoinen sivusto (tai varmaan NS. yhden sivun leiskalla varustettu sivu) projektin tarpeisiin. Sivustolle tullaan luomaan jonkinlainen sisältö aluksi ja projektin aikana sisältöä tullaan lisäämään jonkin verran. Tarve sivustolle tulee olemaan hieman yli vuoden verran. Mitään kauhean monimutkaisia toimintoja sivuille ei ole tarkoitus toteuttaa ja mitään pitkiä artikkeleita sinne ei tule. Sisältönä lähinnä tekstiä ja kuvia. Mahdollista on myös, että sisältöön tulee joitakin taulukoita. Sivuston pitäisi luonnollisesti olla käytettävissä tietokoneilla, tableteilla ja puhelimilla.

Varsinainen kysymys kuuluukin, että kannattaako tällaista pientä sivua lähteä toteuttamaan jonkin CMS:n päälle vai onko järkevämpää tehdä toteutus ihan HTML5+CSS3(mahdollisesti frameworkilla varustettuna) ja tarvittaessa lisänä JS (Angular, Reactor tms.).

 

[Stanley H. Tweedle]

Kokeillaan tätä lankaa kysymykseen. Tarkoitus olisi tehdä pienimuotoinen sivusto (tai varmaan NS. yhden sivun leiskalla varustettu sivu) projektin tarpeisiin. Sivustolle tullaan luomaan jonkinlainen sisältö aluksi ja projektin aikana sisältöä tullaan lisäämään jonkin verran. Tarve sivustolle tulee olemaan hieman yli vuoden verran. Mitään kauhean monimutkaisia toimintoja sivuille ei ole tarkoitus toteuttaa ja mitään pitkiä artikkeleita sinne ei tule. Sisältönä lähinnä tekstiä ja kuvia. Mahdollista on myös, että sisältöön tulee joitakin taulukoita. Sivuston pitäisi luonnollisesti olla käytettävissä tietokoneilla, tableteilla ja puhelimilla.

Varsinainen kysymys kuuluukin, että kannattaako tällaista pientä sivua lähteä toteuttamaan jonkin CMS:n päälle vai onko järkevämpää tehdä toteutus ihan HTML5+CSS3(mahdollisesti frameworkilla varustettuna) ja tarvittaessa lisänä JS (Angular, Reactor tms.).

Itse en näe tarvetta CMS:lle. Googleta sopiva responsiivinen HTML5-template ja värkkää siitä helposti ja nopeasti sivut. Päivittäminen klassiseen malliin editorilla + FTP.

(En ole web-ammattilainen)

 

[kjns]

Varmaan kannattaa miettiä sitäkin tarvitseeko sivuston olla Content Management System, eli pitääkö saittia pystyä helposti päivittämään / lisäämään tekstiä, kuvia tai osioita omilla hallintatyökaluilla, vai onko sisältö enemmän staattista. Jos ensinmainittu, niin jonkun CMS enginen käyttö on varmaan helpoin vaihtoehto, mutta jos saitti on tyyliä "set it and forget it" ja riittää, että joku laittaa sinne pari päivitystä vuoden aikana shellin yli niin nopea staattinen saitti kerralla kuntoon voi olla tehokkain tapa toteuttaa homma.

 

[Gize]

Jos päivitystarve tyyliin max. kerran kuussa niin itse tekisin ihan hötömölöllä sivun.

 

[orakk]

Varmaan kannattaa miettiä sitäkin tarvitseeko sivuston olla Content Management System, eli pitääkö saittia pystyä helposti päivittämään / lisäämään tekstiä, kuvia tai osioita omilla hallintatyökaluilla, vai onko sisältö enemmän staattista. Jos ensinmainittu, niin jonkun CMS enginen käyttö on varmaan helpoin vaihtoehto, mutta jos saitti on tyyliä "set it and forget it" ja riittää, että joku laittaa sinne pari päivitystä vuoden aikana shellin yli niin nopea staattinen saitti kerralla kuntoon voi olla tehokkain tapa toteuttaa homma.

Varmaan sivusto tulee olemaan melko staattinen, mutta ehkä joku Facebook ja Instagram plugari sinne voisi tulla. Niiden takia lähinnä mietin, että olisko CMS hyvä ratkaisu, lähinnä WordPress.

 

[KuunoKaakkuri]

Kannattaa tsekata myös staattiset sivugeneraattorit (kuten Jekyll) lävitse. Muuttuva sisältö tekstifaileihin ja Jekylillä muuntaa ne html-sivuiksi.

 

[mopnex]

Jos osaa vähän puukottaa, niin hostaat staattisen sivun jonkun templan päälle kuten ehdotettu. Täältä voi esim. katsella: HTML5 UP

Tuohon sitten liittää Facebookit ja Instagramit. Pääsee todennäköisesti helpommalla kuin WP, sekä tuon voi hostata ihan missä vaan. Esimerkiksi AWS S3 free-tier, ensimmäinen vuosi 0e. Tai Azuressa, tai Google Cloudissa.

Jos staattiset sivubuilderit on oman osaamisen mahdollisuuksien rajoissa, niin kannattaa katsoa Jekyllin lisäksi myös Hugo.

 

[Gize]

Varmaan sivusto tulee olemaan melko staattinen, mutta ehkä joku Facebook ja Instagram plugari sinne voisi tulla. Niiden takia lähinnä mietin, että olisko CMS hyvä ratkaisu, lähinnä WordPress.

Eikös nuo mene suoraan html:äkin suurinpiirtein rivillä koodia?

 

[Stanley H. Tweedle]

Eikös nuo mene suoraan html:äkin suurinpiirtein rivillä koodia?

Ja sen koodin saa valmiina ainakin Facebookista, Instagrammia koskaan käyttänyt...

EDIT: Wordpress on ihan ok ratkaisu, jos ei ole koskaan puukottanut. Puukottamisen ja WP:n haltuunotossa on varmasti sama vaiva.

 

[Gize]

Ja sen koodin saa valmiina ainakin Facebookista, Instagrammia koskaan käyttänyt...

EDIT: Wordpress on ihan ok ratkaisu, jos ei ole koskaan puukottanut. Puukottamisen ja WP:n haltuunotossa on varmasti sama vaiva.

Juu, ja pinterestistä myös, ei ole ig:stä itselläkään kokemusta.

 

[orakk]

Kyllä tuo varmaan on oikea ratkaisu lähteä tekemään HTML5+CSS3 kombolla. Ja ei ole tarkoitus mitään valmiita pohjia käyttää, vaan pyrkiä tekemään itse. Sen verran on pohjia, että ei sormi heti mene suuhun ja jos menee, niin kyllä apuja aina viimeistään Googlen avulla löytää.

 

[SweeneyTodd]

Ja ei ole tarkoitus mitään valmiita pohjia käyttää, vaan pyrkiä tekemään itse. Sen verran on pohjia, että ei sormi heti mene suuhun

En tiedä tietysti miten kova guru olet, mutta suosittelen kyllä jonkun valmiin frameworkin tai templaten käyttöä. Miksi keksiä pyörää uudelleen, kun joku on jo homman tehnyt? Toki onnistuu itsekin, mutta sitten saa nähdä huomattavasti enemmän vaivaa. Noita käyttämällä voi laittaa paukut siihen ulkoasun ja sisällön suunnitteluun sen pohjakoodin kirjoittelun sijaan.

 

[orakk]

En tiedä tietysti miten kova guru olet, mutta suosittelen kyllä jonkun valmiin frameworkin tai templaten käyttöä. Miksi keksiä pyörää uudelleen, kun joku on jo homman tehnyt? Toki onnistuu itsekin, mutta sitten saa nähdä huomattavasti enemmän vaivaa. Noita käyttämällä voi laittaa paukut siihen ulkoasun ja sisällön suunnitteluun sen pohjakoodin kirjoittelun sijaan.

En tokikaan sanonut, että en ole valmis käyttämään frameworkkia, vaan en halua käyttää templatea. Tämänhän voi toki tehdä äärettömän simppelisti käyttämällä valmista templaattia ja vaikka ulkoasuakin tai vaihtoehtoisesti voi samalla yrittää oppiakin jotain. Mikään guru en missään nimessä ole, mutta olen aiemminkin kyennyt tekemään sivuilleni itse leiskan ja näin ajattelin tälläkin kertaa tehdä.

 

[kjns]

Tekemällä oppii parhaiten, jos meinaat ottaa oppimisprojektina niin mahdollisimman paljon koodausta

 

[evakko]

Toteutettavana melko yksinkertaisen tietokannan web-liittymä. Sisältö asiakaskortiston tapainen, ns. päätaulussa nimi, yhteystiedot jne. ja ns. aputauluissa esim. tilaushistoria. Haut kohdistuvat tiettyihin kenttiin ja selaimen läpi tulee voida muokata kaikkea tietoa. Ei siis mitään erikoista, näitähän on tehty webin alkuajoista lähtien. Tästä johtuen tuntuukin jotenkin vanhanaikaiselta alkaa koodata itse tuollaista pakkohan tuohon hommaan on olla valmiita työkaluja. Millä onnistuu? Ehkä joku sellainen että voisi parittaa tietokannan kentät HTML-lomakkeen kenttiin ja määrittää niille pakollinen/valinnainen tms. tiedot ja tarkastukset. Usealla CMS:lläkin saa varmasti tehtyä, mutta ainakin osa tallentaa tiedot omiin tauluihinsa, nyt on tarkoitus pitää tietokanta itsenäisenä että siihen pääsee käsiksi muutenkin kuin webistä sekä koska jos CMS tulee käyttöön niin se valitaan muulla perusteella kuin tämän jutun.

 

[Fanboys Suck]

Toteutettavana melko yksinkertaisen tietokannan web-liittymä. Sisältö asiakaskortiston tapainen, ns. päätaulussa nimi, yhteystiedot jne. ja ns. aputauluissa esim. tilaushistoria. Haut kohdistuvat tiettyihin kenttiin ja selaimen läpi tulee voida muokata kaikkea tietoa. Ei siis mitään erikoista, näitähän on tehty webin alkuajoista lähtien. Tästä johtuen tuntuukin jotenkin vanhanaikaiselta alkaa koodata itse tuollaista pakkohan tuohon hommaan on olla valmiita työkaluja.

Mikä tietokanta? Itse olen mysql:n kanssa käyttänyt yksinkertaisiin CRUD hommiin puukotettua phpmyedit scriptiä. phpMyEdit: Instant MySQL Table Editor and PHP Code Generator (githubista löytyy forkattu versioita vaikka PDO:lle mitä en ole tosin kokeillut) löytyi myös tällainen sivu 10 PhpMyEdit Alternatives 2018 – Top Best Alternatives

 

[evakko]

MySQL hyvinkin. Kiitos, tosiaan phpMyEdit osoittaa että työkaluja on tehty. Tosin ensivaikutelma on että tuolla mennään jopa liiankin lähelle tietokantaa. Mutta täytyy tutusta saako yhdisteltyä yhteen näkymään useampaa taulua ja onko tuossa jonkinlaista template-systeemiä vaikka toki screenshottien tyyppisen ratkaisun voisi pistää läpi että on kuin Exceliä muokkaisi

 

[Zigh]

Toteutettavana melko yksinkertaisen tietokannan web-liittymä. Sisältö asiakaskortiston tapainen, ns. päätaulussa nimi, yhteystiedot jne. ja ns. aputauluissa esim. tilaushistoria. Haut kohdistuvat tiettyihin kenttiin ja selaimen läpi tulee voida muokata kaikkea tietoa. Ei siis mitään erikoista, näitähän on tehty webin alkuajoista lähtien. Tästä johtuen tuntuukin jotenkin vanhanaikaiselta alkaa koodata itse tuollaista pakkohan tuohon hommaan on olla valmiita työkaluja. Millä onnistuu? Ehkä joku sellainen että voisi parittaa tietokannan kentät HTML-lomakkeen kenttiin ja määrittää niille pakollinen/valinnainen tms. tiedot ja tarkastukset. Usealla CMS:lläkin saa varmasti tehtyä, mutta ainakin osa tallentaa tiedot omiin tauluihinsa, nyt on tarkoitus pitää tietokanta itsenäisenä että siihen pääsee käsiksi muutenkin kuin webistä sekä koska jos CMS tulee käyttöön niin se valitaan muulla perusteella kuin tämän jutun.

Vastaava tarve oli itsellänikin tuossa joku aika sitten kun piti Spring Bootilla tehtyyn serveriin saada admin-käli mahdollisimman helposti tehtyä. Mitään valmista sopivaa en kuitenkaan löytänyt, niin päädyin sitten kasaamaan tuon Vaadinilla.
Perus CRUD-näkymien tekemiseen löytyy jotain valmiitakin kilkkeitä, joita en tosin ole kokeillut: Crud UI Add-on | Vaadin Directory | Vaadin
Vaatimuksena tietysti että Java on hallussa.

 

[Fanboys Suck]

MySQL hyvinkin. Kiitos, tosiaan phpMyEdit osoittaa että työkaluja on tehty. Tosin ensivaikutelma on että tuolla mennään jopa liiankin lähelle tietokantaa. Mutta täytyy tutusta saako yhdisteltyä yhteen näkymään useampaa taulua ja onko tuossa jonkinlaista template-systeemiä vaikka toki screenshottien tyyppisen ratkaisun voisi pistää läpi että on kuin Exceliä muokkaisi

Sen verran pitää vääntää koodia että tekee "joinit" taulujen välille eli määrittelee mikä liittää taulut ja mikä kenttä näytetään.

Tässä yksinkertainen esimerkki:

$opts['tb'] = 'group_members';

$opts['fdd']['id'] = array(
  'name'     => 'ID',
  'select'   => 'T',
  'options'  => 'AVCPDR', // auto increment
  'maxlen'   => 11,
  'default'  => '0',
  'sort'     => true  
);

$opts['fdd']['gid'] = array(
  'name'     => 'Gid',
  'select'   => 'T',
  'maxlen'   => 6,
  'sort'     => true
);

$opts['fdd']['gid']['values']['table'] = 'groups';
$opts['fdd']['gid']['values']['column'] = 'gid';
$opts['fdd']['gid']['values']['description'] = 'name';
$opts['fdd']['gid']['name'] = 'Group';
$opts['fdd']['gid']['select'] = 'D';

$opts['fdd']['oid'] = array(
  'name'     => 'Oid',
  'select'   => 'T',
  'maxlen'   => 6,
  'sort'     => true
);

$opts['fdd']['oid']['values']['table'] = 'organisers';
$opts['fdd']['oid']['values']['column'] = 'id';
$opts['fdd']['oid']['values']['description']['columns'][0] = 'firstname';
$opts['fdd']['oid']['values']['description']['divs'][0] = ' ';
$opts['fdd']['oid']['values']['description']['columns'][1] = 'lastname';
$opts['fdd']['oid']['name'] = 'User';

eli goup_members taulun rivejä voidaan muokata, formi näyttää ryhmän id:n sijaan ryhmän nimen dropdownissa, organiserista näytetään etunimi ja sukunimi, mutta tauluun talletetaan vain ryhmän ja henkilön gid ja id.

Niin joo, header.html ja footer.html on ihan html:ää mitä voi muokata miten haluaa. Se scriptin tekemä dynaaminen taulu ja formi tulee vaan niiden väliin. Ulkonäköä olen muokannut vaikka tähän tapaan:

    hr.pme-hr            { border: 0px solid; padding: 0px; margin: 0px; border-top-width: 1px; height: 1px; }
    table.pme-main       { border: #004d9c 1px solid; border-collapse: collapse; border-spacing: 0px; width: 100%; }
    table.pme-navigation { border: #004d9c 0px solid; border-collapse: collapse; border-spacing: 0px; width: 100%; }
    td.pme-navigation-0, td.pme-navigation-1 { white-space: nowrap; }
    th.pme-header        { border: #004d9c 1px solid; padding: 4px; background: #add8e6; }
    td.pme-key-0, td.pme-value-0, td.pme-help-0, td.pme-navigation-0, td.pme-cell-0,
    td.pme-key-1, td.pme-value-1, td.pme-help-0, td.pme-navigation-1, td.pme-cell-1,
    td.pme-sortinfo, td.pme-filter { border: #004d9c 1px solid; padding: 3px; }
    td.pme-buttons { text-align: left;   }
    td.pme-message { text-align: center; }
    td.pme-stats   { text-align: right;  }

 

[rehtori]

Väärä lanka.

 

[PalleX]

Minkä frameworkkien päälle lähtisit juuri nyt kehittämään uutta web-sovellusta (SPA)? Olisi yksi isohko projekti, missä voisi aloittaa ihan tyhjältä pöydältä, mutta teknologiat pitäisi olla ehdottomasti tätä päivää. PHP Laravel ollut aikaisemmin pohjalla, mutta nyt alkaa kiinnostaa enemmän Javascript frameworkit. Adonis(backend) ja Vue(frontend) tällä hetkellä vaikuttavat kiinnostavilta. Angular?. Vue vs. React keskustelua olen jonkin verran seurannut ja Vuella saisi nopeammin asioita aikaiseksi ja vaikuttaa ihan pätevältä elinkaartakin ajatellen. Adonis on hieman kysymysmerkki, koska se ei ole vielä ottanut suuria tuulia alleen.

 

[Fanboys Suck]

Minkä frameworkkien päälle lähtisit juuri nyt kehittämään uutta web-sovellusta (SPA)? Olisi yksi isohko projekti, missä voisi aloittaa ihan tyhjältä pöydältä, mutta teknologiat pitäisi olla ehdottomasti tätä päivää. PHP Laravel ollut aikaisemmin pohjalla, mutta nyt alkaa kiinnostaa enemmän Javascript frameworkit. Adonis(backend) ja Vue(frontend) tällä hetkellä vaikuttavat kiinnostavilta. Angular?. Vue vs. React keskustelua olen jonkin verran seurannut ja Vuella saisi nopeammin asioita aikaiseksi ja vaikuttaa ihan pätevältä elinkaartakin ajatellen. Adonis on hieman kysymysmerkki, koska se ei ole vielä ottanut suuria tuulia alleen.

Vue.js backendi sitten millä vaan kätevimmin hoituu, django, laravel, joku nodehärdelli? Mutta vue on ainakin itselleni tarpeeksi perinteinen eikä tarvitse opetella täysin alusta kaikkea ja sitoutua täysillä johonkin tiettyyn frameworkkiin (angular...)

 

[©©©]

Backendin toteutus kans riippuu vähän sovelluksen kompleksisuudesta ja luonteesta että kannattaisiko tehdä se mikropalveluilla. Esim. monta Flask-palvelua kuin yksi Django-monoliitti. Go on kyllä kans tehokas kieli REST API:n toteutukseen ja soveltuu mikropalveluihin hienosti, kuten Node+Express jos siitä kuviosta pitää. Miksi ei PHP:kin ja varmaan Laravel frameworkeistä se paras. Jotenkin vaan tuntuu, että noi monoliitti-frameworkit on aikansa eläneitä. Itse en varmaan tekisi Javalla tai ASP.NET:llä, tosin saattaahan näistäkin joku pitää, makukysymyksiä.

Sitten tietenkinkin mikropalvelut pitää laittaa Containereihin ja herää kysymys millä orkestroit, itse tekisin Kuberneteksella joka taas herättää kysymyksen missä hostaat, varmaan GCP olisi luontevin. Missäs tietokanta ja onko se SQL vai dokumenttitietokanta? Varmaan SAAS-palveluna pilvestä kuitenkin. Monia on mahdollisuuksia

Itse tekisin kans frontin Vuella.

 

[nnaku]

Minkä frameworkkien päälle lähtisit juuri nyt kehittämään uutta web-sovellusta (SPA)? Olisi yksi isohko projekti, missä voisi aloittaa ihan tyhjältä pöydältä, mutta teknologiat pitäisi olla ehdottomasti tätä päivää. PHP Laravel ollut aikaisemmin pohjalla, mutta nyt alkaa kiinnostaa enemmän Javascript frameworkit. Adonis(backend) ja Vue(frontend) tällä hetkellä vaikuttavat kiinnostavilta. Angular?. Vue vs. React keskustelua olen jonkin verran seurannut ja Vuella saisi nopeammin asioita aikaiseksi ja vaikuttaa ihan pätevältä elinkaartakin ajatellen. Adonis on hieman kysymysmerkki, koska se ei ole vielä ottanut suuria tuulia alleen.

Vue.js on kyllä ihan tautisen helppo framework , jos kaipaat vaikkapa hakukoneissa näkyvyyttä niin Nuxt.js voit askarrella staattisen (server rendering) Vue apin ja eteneminen on yhtä helppoa kuin singlefile vuessa. Bäkeistä jo tossa mainittiinkin että aikalailla softan luonteesta ja omista mieltymyksistä kiinni, mutta en nyt heittämällä tyrmäis esim. Javaa sillä Maven paketoi Spring-boot softan kätevästi vaikkapa dockeriin mikropalveluksi.

 

[PalleX]

Kiitos kommenteista. Ideaali tilanne että koko roska olisi tehty yhdellä kielellä, mikä nyt frontin vuoksi olisi Javascript. Ihan vaan jatkokehityksen ja tiimin skill settien vuoksi olisi kiva juttu. Sovellus olisi SQL:n kyljessä, ehkäpä MariaDB/MySQL. SEO ei ole oleellinen tässä tapauksessa, joten SSR ei välttämättä tarpeen. Adoniksella yksinäänkin onnistuisi Fullstack, mutta Vue kyllä vaikuttaa hyvin kiinnostavalta ja jatkoprojektien kannalta siihen kannattaisi panostaa. Olisihan tuossa tarjolla ihan mielenkiintoinen boilerplate nuxt-community/adonuxt-template, mikä miksaa Adoniksen ja Nuxt.js:n.

 

[Vispersson]

Millä kielellä kannattaisi lähteä harjoittelemaan nettisivujen tekemistä? Pythonista kokemusta aika paljonkin, muiden kielien lukeminen ja opettelu onnistuu kohtalaisesti. Itse olen kuullut vain Djangosta, onko se hyvä? Ei ole siis käytännössä mitään hajua miten nettisivujen käyttäjälle näkyvä puoli toteutetaan.

 

[Xiyng]

Millä kielellä kannattaisi lähteä harjoittelemaan nettisivujen tekemistä? Pythonista kokemusta aika paljonkin, muiden kielien lukeminen ja opettelu onnistuu kohtalaisesti. Itse olen kuullut vain Djangosta, onko se hyvä? Ei ole siis käytännössä mitään hajua miten nettisivujen käyttäjälle näkyvä puoli toteutetaan.

En tiedä, josko joku framework tarjoaa mahdollisuuden ohittaa tämä, mutta todennäköisesti HTML ja CSS pitää ainakin osata ainakin perustasolla ennen kuin on järkeä lähteä tekemään muuta päälle. Vaikka niiden ohittaminen olisikin mahdollista jollain konstilla, silti luultavasti kannattaa ne osata ainakin perustasolla. Sen jälkeen loppu riippuneekin sitten siitä, mitä tarkalleen haluat tehdä - nettisivu kun on aika ympäripyöreä termi nykyään, koska se voi tarkoittaa mitä tahansa staattisesta nettisivusta monimutkaiseen web-sovellukseen.

 

[nnaku]

Millä kielellä kannattaisi lähteä harjoittelemaan nettisivujen tekemistä? Pythonista kokemusta aika paljonkin, muiden kielien lukeminen ja opettelu onnistuu kohtalaisesti. Itse olen kuullut vain Djangosta, onko se hyvä? Ei ole siis käytännössä mitään hajua miten nettisivujen käyttäjälle näkyvä puoli toteutetaan.

@Xiyng sen hyvin tossa sanoikin.

Nykypäivänä javascriptiä tuskin voi ohittaa puhuttaessa web devauksesta. Ja siitä voisin sanoa että, unohda jQuery ja muut kirjastot kokonaan ainakin niin pitkään että, perus JS (es5) lähtee edes jotenkuten. Näillä teet vain itsellesi hallaa tulevaisuutta ajatellen.

DOM perehtyminen, document api ja http metodit voisi olla sen Hello Worldin jälkeen seuraavat luonnolliset askeleet.

Sitten alkaa olla vuorossa ne omat kiinnostuksen kohteet oppimisessa.

 

[Zvona]

Millä kielellä kannattaisi lähteä harjoittelemaan nettisivujen tekemistä? Pythonista kokemusta aika paljonkin, muiden kielien lukeminen ja opettelu onnistuu kohtalaisesti. Itse olen kuullut vain Djangosta, onko se hyvä? Ei ole siis käytännössä mitään hajua miten nettisivujen käyttäjälle näkyvä puoli toteutetaan.

Jatkan hyvin alkanutta keskustelua tässä kontekstissa:

1. yleinen virhe, minkä henkilökohtaisesti koen (etenkin aloittelevien) kehittäjien tekevän on frameworkin / kirjaston valitseminen web-sivustojen tekemiseen. Eli tehdään sovelluskehitykseen sopivalla kikkaleella fancyt kotskasivut. Tämä, kun ei ole esim. Reactin / Angularin / Vuen tarkoitus, että "käyntikorttimaiset" kotisivut tehtäisiin niillä.

2. lisäksi HTML:n ja CSS:n perusteellinen osaaminen on monesti aliarvostettua. Sitä näkee vaikkapa triviaalien animointien olevan toteutettu JS:llä (ja apuna n+1 riippuvuutta aina PopMotioniin saakka), vaikka saman saa tehtyä CSS:llä.

3. semanttinen osuus "Markup Language":sta on jäänyt monilta pois ja 90% sisällöstä survotaan kylmästi divien sisään. Tällähän ei loppukäyttäjän näkökulmasta ole varsinaista merkitystä, mutta pitää muistaa myös, että sivuston rakenteen tulkinta on monesti selainten ja niille tehtyjen lisäosien vastuulla.

4. mobiililaitteet edustavat yleensä vähintään 50% vierailukerroista. Tämä kannattaa ottaa huomioon - ei niinkään opettelemalla "responsive web design" -huttua vaan aidosti tutustumalla CSS:n täysin käyttökelpoisiin ominaisuuksiin (esim. flexbox, gridit, media queryt).

"Mobile first" on myös fraasi jota hoetaan ja se toki pitää paikkansa. Mutta itse en jättäisi hyvin alkanutta kehitystä kesken vain siksi, että serkun tyttöystävän kolme vuotta vanha android ei rendaa sivustoa täydellisesti. Eli kannattaa valita taistelunsa responsiivisuuden suhteen. Ja "RWD" on aika 2013 juttua - itse kutsun tätä aluetta "Adaptive User Interface Designiksi" - eli koko käyttöliittymän tulee mukautua niin päätelaitteen kuin myös muiden käyttäjän ominaisuuksien mukaan. Tämä tarkoittaa siis paljon muutakin kuin ärsyttäviä hampurilais-menuja.

5. palvelinpuoli (johon alkuperäisessä kysymyksessä viitataan) on kokonaan toinen osio. Mielestäni käytetyt kielet, kirjastot ja konventiot riippuvat monesti kokonaistoteutuksesta. Nyt, kun kyseessä on web-sivusto, niin itse teen aina node+express endpointit, johon "mockaan" oikeat, sivuilla näytettävät tiedot esim. JSON-tiedostoina, jotka populoidaan pug:illa (ex-Jade). Vasta tämän jälkeen alan harkita - ihan jo ylläpidettävyyden näkökulmasta - josko tarvittaisiin (dokumentti)tietokanta. Ehkä voisit harkita tämän toisentamista Pythonilla ja lähteä siitä liikkeelle?

Suosittelen miettimään, miten hakee tietoa netistä. Viitaten vaikka kohtaan #2: kun halutaan kaunis transitio etusivun kuville, niin kannattaa esim. hakea "image transitions with css" eikä "bleeding edge javascript library for animations".

Ja kun tulee ensimmäisen JS:ää vaativan toimenpiteen aika, niin silloin pitää hahmottaa asia (joka jo mainittiinkin) että kirjoitetaanko JavaScriptiä sellaisenaan vai käyttääkö sitä DOMin sörkkimiseen. Tässä karrikoitu esimerkki:

// JS:ää:
const numbers = "0123456789".split("");

// JS:ää:
const classNames = numbers.map((number) => `className-${number}`);

// DOM-manipulointia (tai sen valmistelua):
const elements = document.querySelectorAll('div');

// DOM-manipulointia:
Array.from(elements).forEach((element) => element.classList.add(classNames.shift()));

Harras mielipiteeni on, että mitä enemmän joudut manipuloimaan DOMia, niin sitä todennäköisemmin teet jotain väärin.

Myös se kannattaa muistaa, että paperilla moni asia voi näyttää hyvältä. Mutta kun pääsee aidosti kokeilemaan sitä ruudulla / päätelaitteella, niin tilanne saattaa kääntyä päälaelleen. Siksi "fail fast, fail often" on hyvä ideologia jota seurata. Siinä vaiheessa, kun koko leiska on jo taitettu kasaan ja tajutaan, että sekä leipäteksti että kaikki call to action -elementit ovat liian pieniä, niin homma lähtee valitettavasti käytännön nollasta. Eli konsepti- ja UI-suunnittelu on hyvä startti, mutta varsinainen UX asettuu uomiinsa vasta sitten, kun tekelettä pääsee ensimmäisen kerran kokeilemaan.

 

[Vispersson]

Tuli nyt sitten mentyä vähän ojasta allikkoon tässä kun lähdin googlettelemaan, että mitäs käytännön eroja noilla frameworkeillä ja itse js:llä, css:llä yms. on Jätin nyt kuitenkin Djangon väliin ja lähdin opettelemaan JavaScriptiä javascript.info:n avulla. Eli jos nyt jotain oikein ymmärsin niin tämänkö ohella olisi hyvä lähteä opettelemaan css:n käyttöä?

Minulla ei tällä hetkellä ole suurempaa visiota kotisivun käyttötarkoituksesta tai päämäärästä, mutta jotain suhteellisen simppeliä olisi tarkoitus vuoden aikana kehitellä omalle domainille. Käyttäjäystävällisyys on kuitenkin ollut omissa projekteissa aina ensisijalla, hyvä kun otitte sen esille. Omalla kohdalla ideaalinen toteutus olisi tuo, että tekisin datan pyörittelyn nettisivun ulkopuolella pythonilla ja json-tiedostoina.

Vähän on vielä hakusessa termit ja mitä tällä kaikella nyt tehdään ja mitä ne tarkoittaa palvelimen toiminnan kannalta, mutta eiköhän tämä tästä.

 

[nnaku]

Tuli nyt sitten mentyä vähän ojasta allikkoon tässä kun lähdin googlettelemaan, että mitäs käytännön eroja noilla frameworkeillä ja itse js:llä, css:llä yms. on Jätin nyt kuitenkin Djangon väliin ja lähdin opettelemaan JavaScriptiä javascript.info:n avulla. Eli jos nyt jotain oikein ymmärsin niin tämänkö ohella olisi hyvä lähteä opettelemaan css:n käyttöä?

Minulla ei tällä hetkellä ole suurempaa visiota kotisivun käyttötarkoituksesta tai päämäärästä, mutta jotain suhteellisen simppeliä olisi tarkoitus vuoden aikana kehitellä omalle domainille. Käyttäjäystävällisyys on kuitenkin ollut omissa projekteissa aina ensisijalla, hyvä kun otitte sen esille. Omalla kohdalla ideaalinen toteutus olisi tuo, että tekisin datan pyörittelyn nettisivun ulkopuolella pythonilla ja json-tiedostoina.

Vähän on vielä hakusessa termit ja mitä tällä kaikella nyt tehdään ja mitä ne tarkoittaa palvelimen toiminnan kannalta, mutta eiköhän tämä tästä.

HTML on siis markup jolla määritellän DOM (Document Object Model) puu, eli sivun runko!
CSS (Cascading Style Sheets) on stylesheet eli pitää sitällään tyyli viittauksia DOM puun elementteihin.

Selain muodostaa ensin HTML tiedostosta DOM ja CSSOM puut
Joista se sitten muodostaa Renderöinti puun, jonka se piirtää näytölle.

CSS siis pitää sisällää vain staattisia viittauksia DOM elementteihin!

JavaScriptillä taas tuotetaan kaikki interaktiivinen sisältö! Kuten vaikkapa listojen järjestys a-ö ja ö-a, tai datan hakeminen palvelimelta. TAI elementin tyylin muokkaaminen mikäli CSS ei siihen pysty ja silloinkin yleensä muutetaan elementin selectoreita, kuten id tai luokkaa.

huomaa että #id tulisi olla uniikki kun taas .luokkaa voidaan käyttää usealle eri elementille joille halutaan sama tyylit.

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
    <style>
      /* # id */
      #container {
        min-height: 100vh;
        position: relative;
      }
      header {
        background: tomato;
        padding: 10px;
      }
      main {
        padding: 10px;
        padding-bottom: 60px; /* footerin korkeus */
      }
      footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 60px; /* footerin korkeus */
        background: seagreen;
      }
      /* . luokka */
      .code {
        font-weight: 600;
        text-decoration-line: underline;
      }
    </style>
  </head>
  <body id="container">
    <header>
      Ylätunniste, usein headerissa on jonkinlainen sivuston navigointi.
    </header>
    <main>
      <h1>Otsikko</h1>
      <p>
        Sivun näkyvä sisältö määritellään <span class="code">body</span> tägien
        sisään. <span class="code">p</span> on paragraafi joka on tarkoitettu
        leipätekstille.
      </p>
    </main>
    <footer>Tämä on sivun alatunniste</footer>
  </body>
</html>

Eli seuraavan lainen html documentti piirtyy selaimessa näin.

Suosittelen aloittamaan iha siitä staattisen sivun räpellyksestä! Ja sitten kun, nälkä kasvaa syödessä on hyvä lähteä laajentamaan osaamista valmiisiin työkaluihin, kirjastoihin ja kokonaisiin frameworkkeihin.

Kirjastoilla ( esim. ReactJS ) ja frameworkeillä ( esim Vue ja Angular ) yleensä rakennettaan hieman monimutkaisempia ja laajempia ratkaisuja, kuin jokin perus staattinen sivu.

Nuo kolme edellämainutta pytkivät pilkkomaan koodin muduleiksi joita voidaan helposti uudelleen käyttää. Nämä modulit myös sitten toimitetaan javascriptin avulla selaimen renderöitäväksi riippuen käyttäjän käyttäytymisestä sivustolla/sovelluksessa. Näiden DOM pitää sisällää tasan pakolliset meta tiedot ja ns. bundle.js tiedoston jonka kautta kaikki sisältö toimitetaan.