Kratak vodič kroz Front end alate

Korisnicima je potreban interfejs kako bi mogli da pristupe određenoj aplikaciji ili stranici. Veb dizajner je zadužen za izgled i dizajn veb stranice, dok front end programer vodi računa da dizajn radi na mreži koristeći jezike kodiranja kao što su CSS, HTML i JavaScript.

Java Script je jedan od najpopularnijih i široko korišćenih programskih jezika za web development.

Kao glavni programski jezik koji se koristi u vebu, na front end delu veb-a nosi veliku popularnost – iz njega proističe mnoštvo framework-a i biblioteka kao što su React, Vue, Angular, Ember, jQuery.

U nastavku vam predstavljamo nekoliko alata koji olakšavaju rad u Front end okruženju.

1. Visual Studio Code

Ne možemo da pričamo o razvoju Web aplikacija i programiranja u JavaScript programskom jeziku bez pominjanja VSCode razvojnog okruženja, otvorenog koda, napravljenog od strane Microsofta, a sada deo izuzetno velike zajednice programera i testera koji svakodnevno čine ovo okruženje sve boljim i boljim.

Osim podrške za rad sa JavaScript i TypeScript projektima, prava moć ovog okruženja se nalazi u izuzetno velikom broju besplatnih dodataka sa kojima se funkcionalnost okruženja proširuje da podržava i druge tehnologije i jezike, samo neke od kojih su C++, C#, SQL, Prisma, PHP, Java, Python, Next.js, Django, Vue, Laravel...

Ovi isti dodaci čine da okruženje bude pravi programerski švajcarski nož, što govori i statistika, gde skoro 75% programera u svom svakodnevnom radu koristi VSCode.

2. Git

A kada ima programiranja, onda ima i sistema za kontrolu verzija koda - u našem slučaju Git. Nezamenljiv alat za praćenje promena na kodu i koordisanje izmena u timovima svih veličina, postao je defakto zbog svoje brzine, stabilnosti (integriteta podataka) i distribuitivnosti - Petar može nesmetano da radi na svojim izmenama, dok Marko radi na svojim.

Dok ga mnogi koriste kao komandni alat, kucajući komande u konzoli, iza sebe ima veliku zajednicu i time veliki broj vizulenih klijenata sa kojima možete da uradite skoro sve što bi uradili sa kucanjem komandi. Čak i gore pomenuti, VSCode ima u sebi jedan.

3. Figma

Figma je moćan alat za dizajn koji vam pomaže da kreirate bilo šta: veb-sajtove, aplikacije, logotipe i još mnogo toga. Figma je aplikacija za uređivanje grafike i dizajn korisničkog interfejsa zasnovana na vebu. Figma vam omogućava da delite datoteke dizajna i sarađujete u realnom vremenu. Figma je besplatna, onlajn UI alatka - nakon što dizajneri završe dizajn, šalju FE developerima, a FE developeri koiste taj dizajn kako bi tačno odredili veličine, boje, razmeštaj elemenata i celokupan izgled stranice.

Figma se razlikuje od drugih alata za uređivanje grafike, uglavnom zato što radi direktno na vašem pretraživaču (ali postoji i desktop verzija). To znači da možete da pristupite svojim projektima i počnete da dizajnirate sa bilo kog računara ili platforme bez potrebe da kupujete više licenci ili instalirate softver.

4. Chrome DevTools

Chrome Developer Tools je sveobuhvatan komplet alata za programere, ugrađen direktno u Chrome pretraživač. Ovi alati vam omogućavaju da uređujete veb stranice u realnom vremenu, brže identifikujete probleme i brže pravite bolje veb stranice. Ove alatke vam omogućavaju da pregledate prikazani HTML (DOM) i mrežnu aktivnost vaših stranica.

Svako može da koristi alatke za razvoj pretraživača i da manipuliše kodom. Međutim, promene će se pojaviti samo u vašem pretraživaču i nestaće kada osvežite stranicu. Chrome DevTools vam pomažu da identifikujete koje promene treba da napravite. Da bi te promene bile trajne, treba da pristupite kodu u back end-u ili front end-u.

Samo neke od mogućnosti Chrome DevTools su :

• Pregled uređaja da biste testirali prilagodljivi dizajn veb stranice
• JavaScript program za otklanjanje grešaka za identifikaciju i ispravljanje grešaka
• Mrežni panel za praćenje i analizu zahteva za stranice
• Alatka za kontrolu za unošenje promena stila, kao što su font, razmaci, boje, margine
• Konzola za identifikaciju grešaka na stranici i upozorenja
• Panel performansi za proveru učinka veb-sajta, kao što je brzina stranice