NOVOSTI

Frontend Starter Kit – Vodič za učenje

Edukacije
Vedrana Mataja
Oduvijek te zanima web development ili ti je novogodišnja odluka razvijati se u tom smjeru? Ne znaš odakle krenuti ili na kojoj je razini tvoje znanje?
Onda si na pravom mjestu jer smo za tebe pripremili Frontend Starter Kit. Na jednom mjestu smo pripremili popis znanja i vještina te korisne linkove za sve one koji se žele razvijati u smjeru frontend developmenta prilagođenog našem poslovanju.

Ovaj vodič namijenjen je svima onima koji počinju učiti programirati te onima koji već imaju iskustva u frontend developmentu te se smatraju potencijalnim developerom za Inchoo.

Development u Inchoou

Inchoo je osječka tvrtka s 13 godina iskustva izrade eCommerce rješenja – od dizajna, izrade i optimizacije postojeće online trgovine do migracije na drugu platformu ili stvaranja nove trgovine od samog početka.

Dosad smo radili na više od 500 projekata s više od 150 klijenata iz različitih dijelova svijeta. Za savršeno funkcioniranje svakog dijela projekta brine se 50-ak ljudi od kojih su više od polovice članovi tehničkih timova – Backend, Frontend i DevOps.

S obzirom na broj trenutnih projekata i planirani daljnji rast, uvijek smo u potrazi za pojačanjem svih razina senioriteta u developerskim redovima.

No što je potrebno da bi netko postao Backend ili Frontend Developer u Inchoou? Ne tražimo diplomu, ne gledamo titule ni godine iskustva. Ono što tražimo su znanje, motivacija i želja za daljnjim razvojem, a u tome ti mogu pomoći naši vodiči – PHP Starter Kit objavljen 2018. godine i ovaj kojeg sad čitaš.

Frontend Developer u Inchoou odgovoran je za razvoj, testiranje i dokumentaciju customer-facing strane sustava. U svakodnevnom radu to znači promišljanje o razvoju i implementaciji korisničkog sučelja trgovine te o tome kako postići njezin tehnički maksimum.

Frontend Starter Kit – Vodič za učenje Inchoo

Frontend Starter Kit

Zajedničkim snagama, naši frontend developeri pripremili su ovaj dokument kojem je svrha usmjeriti sve zaljubljenike u web development prema znanjima koje je potrebno steći kako bi postali kandidat za takvu poziciju kod nas.

HTTP protokol i web preglednici

Jedna od temeljnih i važnijih stvari u frontend developmentu je poznavanje HTTP protokola i procesa rada web preglednika, stoga Frontend Developer treba savladati osnove HTTP protokola te važne pojmove i procese u radu web preglednika.

Termini poput HTTP, DOM, BOM, CSSOM i Rendering Tree su izuzetno važni za kvalitetno razumijevanje tehnologije što u konačnici podiže kvalitetu odabira pristupa određenim vrstama implementacije.

Korisni linkovi:

Neki članci jesu stariji, ali jako dobro pokrivaju određene procese u preglednicima i što sve Frontend Developer treba znati o njima.

Pristup izradi sučelja

Od nastanka prvih web stranica i HTML-a 1990. godine pa sve do danas bilo je raznih pristupa izradi sučelja. 2011. godine nastao je RWD – responsive web design. Ideja je bila revolucionarna, a temeljila se na tome da design treba biti responzivan i prilagoditi se raznim uređajima i rezolucijama te operativnim sustavima.

10 godina kasnije RWD je standard, a sadržaj je taj koji je bitan i koji sve određuje. U responzivnom dizajnu postoji nekoliko strategija, tj. metodologija, a najprihvaćenija je Mobile first metodologija u kojoj se kreće od malih ekrana i postupno se radi “progressive enhancement”.

Korisni linkovi:

HTML

Frontend developer najviše vremena provede u implementaciji dizajna, a to obično znači – HTML, CSS & JavaScript.

HTML (Hypertext Markup Language) je opisni jezik i kao takav predstavlja standard za izradu web stranica, stoga je važno odvojiti vremena i naučiti pisati profesionalno semantički ispravan HTML.

Semantički HTML naglašava značenje sadržaja, a ne njegov izgled, stoga pisanje semantički ispravnog HTML-a znači potpuno razumijevanje hijerarhije sadržaja i načina na koji ga na kraju čitaju korisnici i razni machine readeri.
Semantika i Accessibility su dio HTML-a, ali nisu od koristi ako nisu pravilno implementirani. Inačicom HTML5, semantički sadržaj je znatno obogaćen.

Korisni linkovi:

CSS

CSS (Cascading Style Sheets) je izuzetno važan dio izrade korisničkog sučelja. To je stilski jezik ili skup instrukcija zadužen za pozicioniranje i stiliziranje elemenata korisničkog sučelja. Ako ga pišu profesionalci, rezultat je savršeno korisničko sučelje, no ako ga se shvati zdravo za gotovo, nastaju brojni bugovi i problemi, problematični za kasnije održavanje web stranice.

U Inchoou cijenimo profesionalni pristup i pridajemo punu pažnju pisanju kvalitetnog CSS-a što znači usvajanje znanja od samih osnova bez preskakanja pojedinih bitnih cjelina.

U praksi bi to usvajanje znanja izgledalo ovako:

  1. Osnove (selectors, specificity, inheritance, cascade, units)
  2. CSS Box Model
  3. CSS Layout
  4. CSS Animacije
  5. Tipografija
  6. CSS procesori (pre, post) – iako je SASS preprocessor bio revolucionaran u svoje vrijeme, u Inchoou koristimo post processor postCSS iz jednostavnog razloga jer je to skup pluginova iz JavaScript (Node.js) ekoustava, stoga Frontend Developer koji dobro poznaje JavaScript može napraviti svoj ili modificirati postojeći set alata koji će mu pomoći u developmentu

Korisni linkovi:

JavaScript

JavaScript je programski jezik (dynamic type i event driven) preglednika koji postaje sve popularniji. U početku je nastao kao dodatak HTML-u i CSS-u isključivo za interakciju s korisnikom (razni modali i pop-up prozori), no s godinama se raširio i postao jedan od najpopularnijih programskih jezika.

Naš pristup učenju JavaScripta je jednostavan jer učimo isključivo čisti (Vanilla) JavaScript. Cilj nam je što bolje ovladati samom tehnologijom jer je lakše usvojiti jedan od mnogobrojnih libraryja i frameworka (Prototype, jQuery, Knockout, React, Vue,..) ako se poznaje čisti jezik.

U praksi bi taj pristup učenju izgledao ovako:

  1. Osnove JavaScripta (sintaksa, tipovi podataka, petlje, operatori)
  2. Scope
  3. Events
  4. JavaScript OOP
  5. ES6

Korisni linkovi:

Zadatak

Na osnovu ovog dizajna mini košarice potrebno je napraviti funkcionalni prototip. To uključuje kreiranje HTML predloška, kreiranje CSS filea za stiliziranje i upotrebu JavaScripta za daljnju interakciju s korisnicima.

1. Preparing Markup (HTML)

  • best practice hints: clean semantic markup, proper document structure, etc.

Po defaultu će se na pageu vidjeti samo button s ikonom košarice, a prilikom interakcije na ikonu treba se otvoriti mini košarica. Za početak treba pripremiti kompletan markup (HTML) te kreirati button i mini košaricu. Mini košarica treba sadržavati tri proizvoda u listi, a svaki proizvod treba sadržavati ime proizvoda, dva atributa i cijenu. Atributi ne moraju biti identični kao u dizajnu, ali moraju postojati u HTML-u. Mini košarica također treba sadržavati dva buttona, a to su Edit Cart button i Checkout button. Buttoni trebaju imati prazan href, odnosno ne trebaju vršiti svoju funkciju.

2. Interface Styling (CSS)

  • best practice hints: external file use, DRY koncept, low specificity, reusability, etc.

Sljedeći korak je stilizirati prethodno konstruiran interface. Third-party kod (bootstrap, foundation) nije poželjan. CSS može biti napisan izvorno, ali je plus ako je napisan upotrebom PostCSS-a. Dajemo mu prednost nad SASS-om zbog činjenice da je napisan u JavaScript ekosustavu (node.js) što je matični programski jezik svakog frontend developera.

3. User Interaction (JavaScript)

  • best practice hints: external file use, declarations, proper variable initialization, etc.

Nakon što smo uspješno strukturirali markup i stilizirali našu košaricu, na red dolazi i interakcija s korisnicima. Klikom na ikonu košarice potrebno je otvoriti i zatvoriti košaricu.

4. Dodatni bodovi

Dodatni bodovi su mogući ako kreiraš listu od 5 ili više proizvoda u mini košarici, a zatim implementiraš vertikalan pomak proizvoda prema gore i dolje. U dizajnu je specificirano kako u tom slučaju košarica treba izgledati.

Pomak se trigerira na click ili touch pomoću 2 kontrolna elementa (strelica gore i dolje). Pomak isključivo pomiče listu proizvoda samo za jedan proizvod.

Poželjno je spomenutu funkcionalnost pomicanja liste proizvoda implementirati izvornim JavaScriptom, ali priznat ćemo i druga rješenja (npr. upotrebu librarija poput jQuery).

Kako se prijaviti za posao u Inchoou?

Prođi gore navedena područja i riješi zadatak pa nam pošalji životopis i primjere koda na posao@inchoo.net (preferirano na GitHubu). Mi ćemo ti se povratno javiti s osvrtom na prijavu i, ovisno o tome kakva je bila, možda te pozvati na razgovor u naš ured.

Svi smo nekad bili početnici, stoga znamo koliko truda je potrebno uložiti i koliko frustrirajuće zna biti. Ako zapneš u procesu učenja, slobodno se javi s pitanjem u komentaru ispod članka ili pošalji mail na posao@inchoo.net.

Sretno!

5 Komentara

  1. Elvir 5 siječnja, 2021 at 1:21 pm

    Poštovani,ja sam iz BiH i zanima me online edukacija za frontend ili backend. Da li su moguće prijave iz druge države za Vaše edukacije. Sve najbolje u daljnjem radu.

    1. Vedrana Mataja 7 siječnja, 2021 at 10:04 am

      Bok, Elvire!

      Za frontend edukaciju bit će moguće prijave i iz drugih država, dok ćemo za backend edukaciju više informacija imati u narednim mjesecima. Sve ćemo na vrijeme objaviti na našim stranicama, stoga ih prati i javi se ako budeš imao bilo kakvih pitanja.

      Lijep pozdrav iz Inchooa!
      Vedrana

  2. Juraj 10 siječnja, 2021 at 1:21 pm

    Poštovani,

    postoji li mogućnost za neki oblik mentorstva? Napravio bih projekt (web app) koristeći JavaScript i njegov framework React. S time da mislim da bi bilo dobro da Vam postpuno 3-4 puta pošaljem kod pa da ga pogledate i kažete svoje mišljenje. Čisto da budem siguran da je to ono što vi tražite/ želite, da ne ispadne da vam se projekt ne sviđa i da tako nešto ne trebate. Budući da mogu prilagoditi svoj kod točno onako kako vi zahtjevate.

    Lijep pozdrav,
    Juraj

    1. Vedrana Mataja 11 siječnja, 2021 at 11:21 am

      Bok, Juraj!

      Drago nam je vidjeti tvoj interes za učenjem. Takav način mentoriranja prakticiramo kroz prakse koje zahtijevaju svakodnevni rad na unaprijed određenim zadacima, a organiziramo ih za studente i srednjoškolce. Vjerujemo da će ti već iz linkova u članku biti jasno što očekujemo i na koji način pristupiti kucanju koda, stoga predlažemo da samostalno kreneš usvajati znanje prema redoslijedu navedenom u ovom članku pa nam se javiš kad završiš projekt kako bismo ga mogli pogledati u cjelini i javiti ti se s povratnom informacijom.

      Sretno!
      Vedrana

  3. Martina 8 ožujka, 2024 at 3:59 pm

    Poštovani,

    Da li imate trenutno mogućnost obavljanja studentske prakse i u kojem trajanju? Koji su koraci selekcije za praksu?

    Lijep pozdrav

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa * (obavezno)