Web Development rasprave/preporuke/problemi

foggy

Ne znam ni sam kako da točno otvorim temu, pa ću nekako generalno.

Puno toga radim u zadnje vrijeme, puno sam vremena proveo u raznim jezicima i frameworc(k)ima, i puno toga još uvijek ne znam, a možda su i ostali u sličnim situacijama. Baš zato bi mi nekad pomogao savjet ili neki topic koji ciljano govori o web developmentu i dobrim praksama and stuff.

https://foggyproductions.com
Ponosni sam vlasnik nakucane web stranice od nule. Prvotna ideja bila mi je dić sajt za portfolio da izbjegnem portale i dopisivanje iskustva tamo; umjesto toga samo im dam link s primjerom što znam i stranica je dokaz da upravo to i moram znati 🙂
Proširilo se prvo na recenzija igara, pa neke vijesti/postove i naravno sada i main thing - trophy guides.

Stranica je kompletno napravljena koristeći javascript uz express (backend servis) koji backend vrti unutar NodeJs okruženja, a fronta je express-handlebars što je ustvari template HTML framework koji express kao backend pretvara u moćan alat koji šalje partialse (dijelove HTML-a) u frontu koja ih tako onda renderira. Moć toga leži da postoje reusabilni frontend templati koji mogu koristit varijable poslane kroz backend. Za dinamički css koristim materializeCSS koji je inačica Boostrapa, na žalost razvoj obustavljen i žao mi je što nisam Boostrap krenuo jer sad će bit veselo promijeniti design nekad.

EDIT:
Sada vidim da su forkali taj inicijalni projekt i pomalo se dorađuje ovaj novi:
https://github.com/materializecss/materialize

Primjer i što sve gore navedeno na linkovima ispod.

https://www.npmjs.com/package/express
https://www.npmjs.com/package/express-handlebars
https://handlebarsjs.com/
https://materializecss.com/

Što se tiče baze, koristim MongoDB. On je više document management DB oriented, a za JavaScript je super jer u bazu spremate podatak kao JSON (JavaScript Object Notation) format. Savršeno za ono što ja radim sebi trenutno i super zabavna tehnologija.

https://www.mongodb.com/json-and-bson

Trenutno radim na user managmentu i userima opcenito - plan je da regani korisnik moze samo komentare ostavljat za sve tipkove dokumenata koje imam. Za autorizaciju koristim passport (https://www.npmjs.com/package/passport), ali cijeli model usera i stanja ovisno o regi sam osmislio sam. Imam i permissione, puno njih (admin, modovi, recenzenti, bla bla).

Napravio sam i prvi draft komentara, a za text editor koristim TinyMce (https://www.tiny.cloud/docs/release-notes/release-notes50/). Fenomenalan text editor. Problem je što nema sve u đaba ediciji, ali ima dovoljno (FFA editor u kojem pišemo ima iste stvari). Povezao sam puno toga s njim, najveći challenge mi je bio napravit Quote blokove necijeg komentara.

Nedavno sam konačno uspio napravit reusabilne frontend .js fajlove pod scopom, jer inače sve što u browseru učitate u script tagove (na .js fajlove mislim) su globalno definirane stvari, što znači da ako imate funciju X u 2 učitanja .js fajla, nebu dobro. Upravo zato, i zbog reusable helper metoda manipulacije elementima napravio sam .js load kao module, a takav fajl onda u sebi moze imati export i import statement. Ne mogu bit sretniji sto sam to uspio. NodeJs i backend to imaju kao module.export, ali to ne radi unutar browsera (mindfuck da, trebalo mi je vrijeme da skuzim razliku).
Dobar topic oko toga -> https://www.taniarascia.com/javascript-modules-import-export/

Naravno, koristim git kao repo, a aplikacija mi leži na linux virtualkama na Hetzner cloudima gdje sam s kolegom sve posložio i ubacio let's encrypt cert pa sad imam https protokol na serveru.

Security i XSS prakse
https://blog.risingstack.com/node-js-security-checklist/
Helmet je možda najbolji paket za uključiti kad dižete express u nodeJs orkuženju, jer sam ubacuje headere i preventira zlouporabu raznih pizdarija koje ne želite.

Našao sam i 2 dobra paketa koja služe za kontrolu unosa samog usera:
Frontend XSS prevention
https://www.npmjs.com/package/dompurify

Backend XSS prevention
https://www.npmjs.com/package/sanitizer

Što vi radite, radite li nešto slično? Inače radim s web automation toolovima (protractor, selenium, testcafe, cypress) u C#-u i Typescriptu (ovisno koji koristim), a planiram i sebi automatizirat testiranje na svom webu, samo da dovršim trenutne stvari jer sam sve raskopao lokalno. Volio bih da nas je više u ovim krugovima, pa da si pomognemo međusobno 🙂

bosscorelli

Super ti je stranica. Ja sam tek poceo uciti javascript , i sto vise ucim vidim kolko malo znam. Dok cu naucit js , morat cu opet proc kroz css.

foggy

bosscorelli Super ti je stranica. Ja sam tek poceo uciti javascript , i sto vise ucim vidim kolko malo znam. Dok cu naucit js , morat cu opet proc kroz css.

Hvala!
Pričaj mi, evo ja učim već 6 godina i tek sada razumijem dosta dobro neke koncepte. Najveći problem je backend/frontend .js i kako koristiti .js kad ga vrtiš kroz browser ili pod NodeJs-om. Ako imaš neka konretna pitanja, pitaj, pomognem ti da ne moraš kroz pakao kroz koji sam ja prošao.

greyback Stranica predivno izgleda i već sam dosta puta naletio na nju kad sam ukucao „trophy guide and roadmap“ za neku igru, što znači da imaš dobar SEO.

Hvala i tebi! 🙂
za SEO - radim ga sam, digao sam sam meta podatke svake stranice ovisno koje podatke stranica ima. Facebook debugger je dobar da javi što fali ako želiš link sherat tamo, a isto ima twitter i ostali servisi. Prema tome sam dodao metu koja mi je falila, a nedavno sam napravio i tagove na nekim stranicama pa obogatim SEO s tim podacima. Ne znam sad napamet kak sam to izveo, mislim da iz backenda slozim objekt metapodataka i dam fronti da renderira na vrhu, tako nekako.

greyback Sajt ti je super, brz, lijep i responzivan i svaka čast na trudu i poslu kojeg si napravio i na contentu kojeg stvaraš. Ipak, nemoj se naljutiti, ali mislim da je s marketinške strane ovo mess jer imaš u fokusu tri potpuno različite niše. Ako ti funkcionira i dovodi klijente kao portfolio super, ali mislim da je iz pozicije traffica previše toga nepovezanog izmiješano na stranici i da bi veće koristi imao da si napravio tri zasebne web stranice; za gaming, za band i za web development s kojom bi ciljao publiku u strukturiranoj niši.

Znam, ali jednostavno me ne brine marketing i taj dio priče. Moj cilj je poslodavcu dati link da vidi što sam napravio i što znam, a isto tako netko tko želi neki projekt za development može mi se javiti, ili želi biti neki suradnik za drugi content kojeg imam. Imam i bend, pa imam i taj izbor 🙂 U pravu si, ali ne da mi se razdvajat stvari pa će za sada ostati tako (a bend je ionak zadnji hobi po prioritetu).

greyback Ja se ne bavim ciljano izradom stranica, znam HTML, CSS i nešto jako malo JS-a što bi mi bilo dosta za statičku, ali za dinamičnu stranicu, kao što je tvoja, morao bih koristiti WP i osloniti se na pluginove jer nemam ni približno znanja kao ti za napraviti sve od nule.

Ja sam namjerno išao na opensource rješenja bez Wordpressa i sličnih jer volim imat potpunu kontrolu nad kodom. Meni su plugovi NPM paketi, a sve ostalo slažem sam, odnosno radim sherane template HTML fajlove koji samo posloze ono što im prosljedim. Mislim da ti je najlaške naučiti kako includati .js na neki stranicu, a kad to imaš, sve ostalo su common prakse ovisno što želiš (manipulacija elementima, i doslovno sve živo što želiš).

I moram dodati da mi je design najgora strana, sve ovo gore što imam nije skroz najbolje, moram malo slike podesit za veće ekrane (negdje nisu responzivne) i ima tu posla. Nisam designer, to me najviše jebe, pa pikam kak mi izgleda ugodno i prema primjerima.

Za brzinu - mora bit brzo, nema puno contenta još. A sav content koji imam nije rezultat 1000 queryja nego većinom 1-2 čupanja iz baze i jednostavno slaganje modela JS-om prije prosljeđivanja fronti. Vidjet ćemo kad se nakoti contenta 🙂

greyback

Stranica predivno izgleda i već sam dosta puta naletio na nju kad sam ukucao „trophy guide and roadmap“ za neku igru, što znači da imaš dobar SEO. Sajt ti je super, brz, lijep i responzivan i svaka čast na trudu i poslu kojeg si napravio i na contentu kojeg stvaraš. Ipak, nemoj se naljutiti, ali mislim da je s marketinške strane ovo mess jer imaš u fokusu tri potpuno različite niše. Ako ti funkcionira i dovodi klijente kao portfolio super, jer je s tehničke razine top, ali mislim da je iz pozicije traffica previše toga nepovezanog izmiješano na stranici i da bi veće koristi imao da si napravio tri zasebne web stranice; za gaming, za band i za web development s kojom bi ciljao publiku u strukturiranoj niši.

Ja se ne bavim ciljano izradom stranica, znam HTML, CSS i nešto jako malo JS-a što bi mi bilo dosta za statičku, ali za dinamičnu stranicu, kao što je tvoja, morao bih koristiti WP i osloniti se na pluginove jer nemam ni približno znanja kao ti za napraviti sve od nule.

HideooKoojima

Jednostavno lijepo ugodno za oko ☑️

greyback

foggy

Ma sve u svemu stranica je top, svaka čast. Treba puno volje, upornosti i samodiscipline za doći na tu razinu znanja na kojoj si ti.

Što se tiče dizajna, nisam ekspert, ali sam prošao par tečajeva u sklopu kojih se pričalo o pravilima dizajna. Jedino što mislim da bi trebao promijeniti je koristiti veći whitespace, odnosno razmak među elementima na stranici. Na nekim dijelovima stranice je super, a negdje su ti elementi preblizu. Npr. ovdje:

I ovdje:

Drugo je stvarno super, možda jedino povećati malo veličinu fonta i razmak između redova, ali je sve u svemu super. 🙂

Inače, jesi li se školovao u pravcu IT-a ili si sam učio od početka?

danko-b

Svaka cast za stranicu, procitao sam i neke recenzije.
Koja ti je najbolja a koja najgora ocjenjena igra?,ono kaj sam preletio vidio da zelda bow ima disadnajvislju ocijenu a YS origin najmanju.

foggy

greyback Što se tiče dizajna, nisam ekspert, ali sam prošao par tečajeva u sklopu kojih se pričalo o pravilima dizajna. Jedino što mislim da bi trebao promijeniti je koristiti veći whitespace, odnosno razmak među elementima na stranici. Na nekim dijelovima stranice je super, a negdje su ti elementi preblizu. Npr. ovdje:

Svaka čast, imaš dobro oko. Baš te neke dijelove sam radio svoj CSS jer me Materialize ubio u pojam. Moram skroz refaktorirat side menije i napravit ih tak da se skrojaju kak ti skrolas dolje (materialize me ubija s tim), i ova jebena Tweet ikona nije imala takve rubove, najednom ima, moram po novi emded code i vidjet jesam neki CSS slučajno krivo dodijelio.

Imam ideju sad prvo napravit backend i sve za komentare, složit hijerarhiju i onda se lagano bacit na breadcrumbe, malo frontu i responzivnost (jer tek pakao krene kad na mobitelu ides na sajt, moram pazit kakve klase dajem div-ovima jer prema tome slaze sirinu itd), sredit design flows... Posla kao u prici 🙂

greyback Inače, jesi li se školovao u pravcu IT-a ili si sam učio od početka?

Između ostaloga samo TVZ završih, smjer računalne mreže. Sve ostalo solo, stalno sam na računalu i stalno igram, pa kak sam krenuo sa takvih nekim poslovima, na kraju sam se opredjelio za QA Automation Engineera koji je krenuo kao QA, pa lagano kodiranje i automatiziranje fronte, pa sam radio i REST API intergracije, pa to automatizirao, pa sam smisljao strategije za testiranje, pa na kraju radim kao Automation Tech Lead i vodim sve što se tiče testiranja aplikacije i kako/što automatizirati na kojem levelu. Komplicirana i jako aktualna domena. Volim taj dio, zato ga i radim detaljno. Ovo što se sajta tiče je više hobi, ali puno dijelova hobija mi znače za development jer sve što učim na poslu/doma može se primjenit jedno na drugom i obrnuto. Dobra kombinacija za naučit 🙂

EDIT:
Uspio sam konačno dobit sticky CSS za kolone sa strane. Isto tako micem sticky kad se radi o najmanjoj rezi:

Materialize container klasa je 70% ekrana, a najmanja širina najmanje kolone preko cijelog screena je 600px. Na 601px preslažem kolone i veličine, a nikak nisam uspio dobit sticky lijevu i desno kolonu. Moralo je ići na div koji sadrže klase za kolone:

Toeto:

Jedan problem manje. Sad moram napravit te menije da na nešt liče 🙂

EDIT 2:

Dodao sam u prvi post neke security i XSS prakse i pakete.

Fico

Odlična tema! Svakako ću se ovdje aktivirati, no tek kada riješim vremensku strku kojom sam zaokupljen.

Do tada, nabijem ja ovaj React na ku--

foggy

Fico React je zajebat 🙂 Njega nisam nikad niti krenuo učiti, zapeo sam na nekoj drugoj strani koja je ionak prevelika pa koristim što mi zatreba. Svaki put kad nešto radim i idem vidjet "samo" to što me muči, odem po 3h negdje kopat i "naučit" što i kako to izvest. Da odem u React onda je to još 100h puta ta putovanja po 3 and it just muliplies...

Uspio sam završiti prvi dio posla:

registracija (plus confirmation/activation email)
reaktivacija ako korisnik dugo ne aktivira račun
reset password (isto preko aktivacijskog koda i maila)
prvi draft za komentare za trophy guidovima (ovo me ubilo)

Moram još Helmet dodat kod dizanja aplikacije da imam neku osnovnu XSS zaštitu pa onda imam posla dalje za poludit. Zadovoljan sam, najgore mi je bilo hendlati quote content nečijeg komentara i ići u thread i onda to sve posložiti i shufflati s TinyMce editorom.

Fico

foggy React je zajebat 🙂 Njega nisam nikad niti krenuo učiti, zapeo sam na nekoj drugoj strani koja je ionak prevelika pa koristim što mi zatreba. Svaki put kad nešto radim i idem vidjet "samo" to što me muči, odem po 3h negdje kopat i "naučit" što i kako to izvest. Da odem u React onda je to još 100h puta ta putovanja po 3 and it just muliplies...

Evo, u zadnjih par dana sam pohvatao osnove Reacta. Zapravo mi je dobro i sjeo kada sam neke koncepte napokon si razjasnio. Angular mi je i dalje draži, preferiram pristup u kojemu su komponente i viewovi odvojeni, urednije mi izgleda, a urednije mi i sjeda u glavi, no Reactov state je jako korisna stvar koja ja ko intuitivno funkcionira, dopalo mi se. Diplomski će se raditi u Reactu, a onda mi ostaje još nešto napraviti i u Vueu, da i to čudo vidimo kak radi.

bosscorelli

Ja , koji sam tek poceo ucit web dev :
<iframe src="https://giphy.com/embed/zXA5VEmXr7OUg" width="480" height="360" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href=" GIPHY</a></p>

foggy

Fico Meni je Vueu najbolji bio, minus React kojeg nisam dirao. Vueu je nekak bolja inacica kompliciranih Angular praksi. Napravio sam par manjih Vue aplikacija i zao mi je sto u njemu nisam svoj sajt radio. Najgori dio mi je bio njegohv store gdje moras pazit na scope varijabli i stanja, ali i dalje super intuitivno. Svakako sva 3 frameworka pomazu da izvedes ono sto bez njih jedva mozes, jos kad Typescript imas, uf.

Brijac

Radi li itko kao .Net developer?

foggy

Brijac Radio sam par mjeseci u .NET Frameworku 4+ i .NET Coru. Što treba?

Brijac

foggy

Ma idem na neku edukaciju pa treba kao imati neku podlogu za .Net pa bi me zanima što bi bila dobra podloga? Također, na stranici piše da su osnove OOP-a potrebne.

foggy

Brijac OOP svakako (Što C# i jest), naučit kao prvo klase, vrste klasa, propertyje (private, public itd.), metode... Osnovne stvari, bez toga nećeš daleko jer sve što pišeš budeš pisao kao klasu unutar određenih namespaceova i onda pozivao odnosno instancirao istu i koristio reusabilne stvari. Ja ne znam sve napamet, ali znam što trebam za koju situaciju pa si pomognem na stack overflowu po potrebi. Kada znaš googlat problem, naći ćeš i rješenje 🙂

Preporučio bi ti Mosha:

Pogledaj što od njega ima na Udemyju ili nekom takvom sajtu, i uzmi full course, te ga prođi. Mosh je doktor za C# i objašnjava po meni najbolje od svih tih online učitelja. Mislim da ima i neke .NET projekte koje prolazi, znam da sam dizao .NET Core backend jednom prilikom, samo se ne sjećam više jel bio njegov tečaj ili neki drugi (previše sam ih prošao).

Edit:
Vidim da Traversy Media isto ima projekt, on mi je isto odličan lik (malo čudno priča, ali svi projekti su mu baš jebeni jer je sve aktualno što radi):

Brijac

Radim ja nešto malo sa C#-om u Unity-u, ali iskreno nemam pojma jel to OOP ili nije. Hvala na savjetu, bacim oko na ovo što si rekao.

foggy

Brijac Mislim da ćeš po pravo naučit koristit jezik tek kad kreneš radit svoje aplikacije, servise and stuff 🙂
Onda će ti sve bit jasnije, jer sada koristiš framework i ostvaruješ neke stvari pomoću koda, a ovako ćeš krenut iz malo drugog smjera.

yakuza_stinger

C# je oop, nije proceduralan kao c++

Fico

yakuza_stinger Među ostalim, C++ je objektno-orijentirani programski jezik, samo što je u isto vrijeme i proceduralni. Primjenjiv je na više načina. Kombinirano s time da je relativno low-level u usporedbi s C#-o, Javom ili Pythonom, C++ se smatra vrlo snažnim programskim jezikom.

S druge strane, da C# i Java bi bili potpuno objektno-orijentirani programski jezici. Iako gledanje na to je li nešto čisti OO jezik je po nekima cjepidlačenje. Neki traže i najsitnije razlike da se pokuša definirati što bi bio čisti OO jezik, drugi tvrde da je dovoljno zadovoljavati osnovne principe OOP-a da bi se smatrao OO jezikom. Uglavnom, komplikacije. 😄