ucimo o programiranju

Procesor – Koji odabrati? I sve što bi trebali znati o njemu

3132

procesor

Procesor Intel Core i3, i5, i7: koji od njih Vam doista treba?

Procesor je mozak računala – ali razumijevanje svih razlika između procesora zahtijeva puno vašeg mozganja!

Intel nije nimalo olakšao kupcima sa svojom čudnom shemom davanja imena modelima, a pitanje koje nas najčešće pitaju kada je u pitanjuprocesorkoja je razlika između i3, i5 i i7 procesora? Koji bih trebao kupiti?

Vrijeme je da razjasnimo ovo. U ovom članku se nećemo doticati AMD procesora i drugih Intelovih procesora poput Pentium serije ili nove M serije za prijenosnike. Budući da je u procesorima najčešća i najpopularnija Core serija ona je i ujedno najviše zbunjujuća, pa ćemo se usredotočiti samo na tu seriju procesora.

Procesor: Razumijevanje brojčane oznake modela

Općenito gledano, ovo je vrlo jednostavno. Procesor Intel Core i7 je bolji od Core i5, koji je opet bolji od Core i3. Problem je što je teško znati što se može očekivati od svake serije procesora. Ovdje stvari idu malo dublje.

Prvo, i7 ne znači da procesor ima sedam jezgri! Ovo su samo imena koja relativno ukazuju na performanse. Tipično, procesor Core i3 serija ima samo dvije jezgre, dok Core i5 i Core i7 serija ima i dvojezgrene i četverojezgrene procesore. Četverojezgreni procesori su obično bolji od dvojezgrenih, ali ne brinite još o tome.

Intel predstavlja “obitelji” čipseta, kao što je nova 6. generacija obitelji – Skylake ili starija 5. generacija obitelji – Haswell. Svaka obitelj, pak, ima svoju liniju Core i3, Core i5 i Core i7 procesora.

Kojoj generaciji procesor pripada možete saznati po prvoj znamenki u njegovom četveroznamenkastom nazivu modela. Na primjer, procesor Intel Core i3-5200 pripada 5. generaciji. Zapamtite, Intelove nove generacije neće podržavati Windows 7, tako da sa kupnjom nove generacije Intel procesora morate uzet u obzir i Windows 10 operativni sustav ako ga već nemate.

Evo jedno korisno pravilo kod procesora. Ostale tri znamenke su Intelova oznaka u odnosu na druge procesora iz svoje serije. Na primjer, Intel Core i3-5350 je superioran u odnosu na Core i3-5200 jer je 350 veće od 200. Logično…

Procesor: Što označavaju zadnja slova: U, Q, H i K

Stvari su se promijenile otkad smo zadnji put pogledali Intelovu listu procesora. Poslije broja modela procesora obično slijedi jedno ili kombinacija sljedećih slova: U, Y, T, Q, H i K. Evo što one znače:

  • U: Ultra Low Power. Oznaka U je samo za procesore prijenosnika. Oni troše manje struje i štede bateriju.
  • Y: Low Power. Obično na laptopima i mobilnim procesorima starije generacije.
  • T: Power Optimized. Za desktop računala.
  • Q: Quad-Core. Oznaka Q je samo za procesore sa 4 fizičke jezgre.
  • H: High-Performance Graphics. Čipset posjeduje jednu od boljih Intelovih grafičkih jedinica unutar sebe.
  • K: Unlocked. Otključan – možete overklokirati procesor.
procesor
Oznake procesora

Razumijevanje ovih slova i sustava numeriranja iznad, će vam pomoći da znate što procesor nudi samim gledanjem broja modela, bez potrebe za čitanjem kompletnih specifikacija. Naravno, prije donošenja konačne odluke o kupnji, poželjno je da provjerite detalje za odabrani procesor, a to možete napraviti direktno na Intelovoj straniciovdje.

 

procesor
Procesor – Hyper Threading
Procesor: Virtualne jezgre (Hyper-Threading): i7 > i3 > i5

Kao što možete vidjeti iznad, Intel konkretno označava sa U i Q za broj fizičkih jezgri. Pa, koje druge vrste jezgri postoje, pitate se? Odgovor je virtualne jezgre, koje se aktiviraju putem tehnologije pod nazivom Hyper-Threading.

Drugim riječima, hyper-threading omogućuje jednoj fizičkoj jezgri da djeluje kao dvije virtualne jezgre, čime se istovremeno obavlja više zadataka bez aktiviranja druge fizičke jezgre (što bi zahtijevalo više snage iz sustava).

Ako su oba procesora aktivna i koriste hyper-threading, te četiri virtualne jezgre će brže računati. Međutim, imajte na umu da su fizičke jezgre brže od virtualnih jezgri. Četverojezgreni procesor će raditi puno bolje nego dvojezgreni koji ima hyper-threading!

Intel Core i3 serija ima hyper-threading. Intel Core i7 serija podržava hyper-threading, također.Procesor Intel Core i5 serija ga ne podržava.

procesor
Procesor – Turbo Boost opcija

Procesor: Turbo Boost: i7 > i5 > i3

S druge strane, procesor Intel Core i3 serija ne podržava Turbo Boost. Dok Core i5 serija koristi Turbo Boost da ubrza svoje zadatke, kao što čini i Core i7 serija.

Turbo Boost je Intelova tehnologija koja inteligentno povećava takt procesora ako softver to zahtijeva. Na primjer, ako igrate neku igru i vaš sustav zahtijeva dodatnu snagu, Turbo Boost će doći u pomoć.

Turbo Boost je koristan za one koji koriste zahtjevan softver kao što su editiranje videa, grafičko programi za obradu slika, AutoCad ili zahtjevnije video igre. Turbo Boost nema puno utjecaja ako samo tipkate tekst, surfate internetom ili koristite Microsoft Office programe.

Procesor: Veličina cache-a: i7 > i5 > i3

Osim Hyper-Threading i Turbo Boost-a, još jedna velika razlika u procesoru među Core serijom je veličina cache-a. Procesorski Cache je vrlo važna stvar za brzinu i učinkovitost procesora. Procesrski cache je vlastita memorija procesora i djeluje kao njegov osobni RAM – i to je jedna od malo poznatih specifikacija koje mogu usporavati vaše osobno računalo ili laptop.

Baš kao i kod RAM-a, više cache-a je bolje.Dakle, ako procesor obavlja jedan zadatak iznova i iznova, zadržati će taj zadatak u svom cache-u. Ako procesor može pohraniti više zadataka u svojoj osobnoj memoriji, može ih brže obaviti ako se ponavljaju.

Procesor Core i3 serija obično ima do maskimalno 3 MB cache. Core i5 serija ima između 3 MB i 6 MB cache. Core i7 serija ima između 4 MB i 8 MB cache.

procesor
Iris pro

 

Procesor: Grafika – HD, Iris, Iris Pro

Otkako su grafičke kartice integrirane na sam procesor, postale su važan segment prilikom krajnje odluke kod kupnje procesora. No, kao i sve ostalo, Intel je napravio sustav pomalo zbunjujućim.

Obično imamo tri razine grafičkih jedinica unutar procesora: Intel HD, Intel Iris, i Intel Iris Pro. Vidjet ćete nazive modela kao što su Intel HD 520 ili Intel Iris Pro 580 … i tu počinje konfuzija.

Evo kratkog primjera kako to može biti zbunjujuće. Intel HD 520 je osnovni grafički čipset. Intel Iris 550 je bolji od Intel HD 520, ali je također osnovni. No, Intel HD 530 je grafička jedinica velike snage, te je bolja od Intel Iris 550. Međutim, Intel Iris Pro 580 je također grafička jedinica visokih performansi i bolja je od Intel HD 530.

Najbolji savjet za tumačenje ovoga? Nemojte tumačiti. Umjesto toga, oslanjajte se na Intelov sustav imenovanja. Ako se model procesora završava na H, znate da ime visoke performanse.

 

Procesor: Uporedba Core i3, i5, i7

Općenito govoreći, evo za koga je najbolja svaka vrsta procesora:

  • Core i3: Osnovni korisnik. Jeftini izbor. Dobro za surfanje webom, korištenje Microsoft Office, video pozive i društveno umrežavanje, manje igrice. Nije za igranje najnovijih igrica, kopanja po videu, grafičkoj obradi slika ili općenito profesionalce.
  • Core i5: Srednji korisnici. Oni koji žele ravnotežu između performansi i cijene. Dobro za igranje, obrada slike i videa, pogotovo ako uz procesor imate svoju grafičku karticu jačih performansi ili ako kupite HQ procesor ili Q procesor sa posebnim grafičkim procesorom.
  • Core i7: Profesionalci. Ovo je najbolje što Intel sada može ponuditi.

Što ste odabrali?

Ovaj članak je osnovni vodič za svakoga tko želi kupiti novi procesor, sa predstavljenim osnovnim razlikama između Core i3, i5 i i7 procesora. No, čak i nakon što razumijete sve ovo, može vam se desiti situacija dali da se odlučite za procesor i5 nove generecije ili i7 procesor starije generacije a cijene mogu biti iste ili vrlo slične.

Prilikom usporedbe, naš najbolji savjet je da posjetite CPU Boss gdje možete usporediti oba procesora i dobiti detaljne analize, kao i ocjene. Možete uspoređivati procesore do mile volje sa svim grafikonima i tehničkim karakteristikama koje vas zanimaju.  Ako ne razumijete stručne riječi, samo gledajte ocjene. Ako sve razumijete, CPU Boss ima sve podatke koje trebate.

Advertisements
ucimo o programiranju

CSS serijalCSS – Cascading Style Sheets

CssTumb

CSS je jezik koji se koristi za opis izgleda i formata dokumetna pisanog u markup jeziku. Najčešće se koristi za web stranice pisane u HTML ili XHTML-u1.

U ovom serijalu i tekstovima koji će uslediti obradićemo sledeće teme:

Zašto CSS?

Imamo jedan jednostavan primer stilizovanja stranice na sledeći način:

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html>

    <body bgcolor=„#cccc99“>

    <h1>Prvi naslov</h1>

    

     size =„+1“>

      

         Prvi paragraf.

      

    

</body>

</html>

U ovom primeru smo koristili stilove za podešavanje boje pozadine i veličine fonta. Ako bismo ovakav način stilizovanja koristili svuda na stranicama, svaka izmena stilova bi bila vremenski zahtevna.

Takođe ukoliko bismo želeli da zadržimo konzistentnost na svim web stranicama, morali bismo svaki put da kucamo kôd za podešavanje stila a u slučaju da redizajniramo sajt, morali bismo izvršiti izmene u svim HTML fajlovima.

Ukratko, CSS nam omogućava daprezentacione detalje našeg sajtaizdvojimo od sadržaja i na taj način skratimo vreme potrebno za izmenu.

Primer izdvojenog CSS-a u okviru istog HTML-a:

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<head>

  <title>Naslov stranice</title>

  <style type=“text/css“>

    body { background-color: #EF7070; }

  </style>

</head>

<body>

<h1>Prvi naslov</h1>

size =„+1“>

   Prvi paragraf.

</body>

</html>

Iako definisanje stila jeste dozvoljeno u okviru HTML dobra praksa je kreiranje posebnog fajla sa ekstenzijom .css koji će sadržati naše stilove.

U tu namenu kreiraćemo fajl stylesheet.css u okviru istog direktorijuma (mada ne mora biti) gde i naša stranica.
Ovaj fajl ćemo uključiti u html na sledeći način:

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html>

<head>

  <title>Naslov stranice</title>

  <link rel=„stylesheet“ href=„stylesheet.css“ type=„text/css“/>

</head>

<body>

<h1>Prvi naslov</h1>

Prvi paragraf.

</body>

</html>

Saržaj stylesheet.css fajla je:

CSS

1

body { background-color: #EF7070; }

Pravila

Definisanje pravila  smo već imali u prethodnom kodu i u nastavku ćemo dati opis elemenata koja si koriste za kreiranje pravila.

body – predstavlja selektor (označava jedan ili više elemenata na koje će pravilo biti primenjeno)

background-color – naziv svojstva

#EF7070 – vrednost svojstva

Svako pravilo mоže imati više redova svojstvo: vrednost kao npr.

CSS

1

2

3

4

body {

background-color: #EF7070;

padding: 15px;

}

Selektori

Selektor predstavlja instrukciju u CSS pravilu kojim se definiše browser-u koje elemente da uključi prilikom primene pravila.

Id selektori su najčešće u praksi, mada ne omogućavaju ponovno iskorišćavanje, jednom definisanog pravila.
Primer id selektora:

CSS

1

2

3

4

5

6

7

8

#horizontal-navigation {

   width: 400px;

   float: left;

   list-style: none;

   margin: 0;

   padding: 0;

   font-size: 1.2em;

}

Class selektor

CSS

1

2

3

.error {

  color: IndianRed;

}

Gore smo dali primer class selektora, što znači da će na grupu elemenata (jednog ili više) koji imaju definisanu klasu .error  biti primenjeno pravilo definisano u toj klasi.

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<head>

    <title>CSS class selector</title>

    <style>

      .error {

         color: IndianRed;

      }

    </style>

</head>

<body>

id=„paragraf“>

  

          

  • class=„error“>Greška
  •   

  

</body>

</html>

Ostali selektori

U ostale selektora ubrajamo sledeće:

  • Descendant selector
  • Child selector
  • Attribute selector
  • Pseudo class

Descendant selector

Ovaj selektor će primeniti pravilo na sve elemente koji se nalaze u okviru div elementa, bez obzira u kojoj dubini se nalazi.

CSS

1

2

3

div p {

background-color: #7FFFD4;

}

XHTML

1

2

3

4

5

<div id=„zaglavlje“>

  <form>

    <p>Primer descendent selector-a</p>

  </form>

<div>

Child selector

Ovaj selektor će naći sve elemente koji se nalaze direktno ispod elementa na koga se operator >odnosi.

CSS

1

2

3

div > p {

background-color: #7FFFD4;

}

XHTML

1

2

3

4

5

6

<div id=„zaglavlje“>

  <form>

    <p>Na ovaj paragraf nece biti primenjeno pravilo</p>

  </form>

  <p>Paragraf na koji ce biti primenjeno pravilo</p>

<div>

Attribute selector

CSS

1

2

3

img[alt=altvalue] {

margin: 10px;

}

XHTML

1

2

3

<div id=„zaglavlje“>

<img src=„favorite.png“ alt=„altvalue“/>

<div>

Pseudo class

CSS

1

a:visited {color: #7FFFD4; }

XHTML

1

2

3

4

5

<div id=„zaglavlje“>

  <form>

    <p>Primer descendent selector-a</p>

  </form>

<div>

Pored visited psuedo klase ima mnogo više dostupnih klasa o kojima možete više saznati na css-tricks.

Korisni linkovi

ucimo o programiranju

CSS – Cascading/Inheritance

CssKaskada

Ova tema je veoma značajna jer njeno razumevanje omogućava kreiranje dokumenata koji će biti laki za održavanje.

Cascading predstavlja proces koji određuje koji definisani still će biti primenjen na koje svojstvo za svaki definisani tag.

Cascading rešava višestrukopostavljanje stilova na nekom elementu u različitim izvorima, dok inheritance rešava problem primene stilova kada nema definisanih stilova na elementima.

Za nasleđivanje je bitno da znamo da stilovo koji se odnose na tekst, njegovu boju i veličinu se nasleđuju od definisanog roditelja, dok stilovi koji su povezani sa prikazivanjem div-ova, paragrafa i drugi elementi kao što su okviri, padding, margin i pozadinske boje se ne nasleđuju.

Stilovi mogu biti definisani na više različitih lokacija (eksterni fajl, HTML fajl, itd…).

Prvi izvor je svakako browser koji primenjuje podrazumevane stilove na definisane tagove (npr. <em> tagovi kreiraju italic tip stila).
Drugi izvor je korisnički definisani stilovi. Ovi stilovi se mogu definisati u browser-u (npr. u Internet Explorer-u ova opcija se nalazi u Tools->Internet options->Accessibility).
Autorski stilovi koje pišete vi kao autor i mogu biti definisani uposebnim css fajlovima i linkovani u html dokumentu, stilovi direktno upisani u html kao i inline stilovi koji su dodeljeni tagovima.

Pored ove kategorizacije postoji i kategorizacija po važnosti: normalna i važna (eng. important).

U W3C specifikaciji CSS-a definisan je tačan redosled primene stilova po sledećem algoritmu:

  • deklaracija u browser-u
  • korisnička normalna deklaracija (normalnom deklaracijom se smatra deklaracija koja nema pravilo !important)
  • autorska normalna deklaracija
  • autorska važna (eng. important) deklaracija
  • korisnički važna (eng. important) deklaracija

Sledeći algoritam koji utiče na primenu stilova je specifičnostselektora. Što je selektor specifičniji, imaće veći prioritet u odnosu na opštiji.

Ukoliko se desi da dve deklaracije imaju isto poreklo (korisnik, autor ili browser) poslednje definisan stil će biti primenjen.

Da bi browser odredio koju vrednost definisanu u stilu da primeni na odgovarajući tag, svakom stilu se dodeljuje težina (eng. weight).

Specifičnost selektora

Specifičnost selektora se računa na sledeći način:

  • a = broj 1 ako je deklaracija data u ‘style’ atributu a ne preko pravila selektora, 0 u drugom slučaju ( u HTML/u vrednosti atributa “style” na elementima nemaju selektore, tako da je tu vrednost spcifičnosti a=1, b=0, c=0 i d=0)
  • b = ukupan broj ID atributa u selektoru
  • c = ukupan broj ostalih atributa i pseudo klasa u selektoru
  • d = broj naziva elemenata i pseudo elemenata u selektoru

Univerzalni selektor, * i child selector, neimaju vrednost u proračunu specifičnosti.

Pseudo elementi i klase imaju istu težinu kao i normalni elementi i klase.

Note Podsetnik

Pseudo klasa je način selekcije dela HTML dokumenta koji podrazmeva dinamičko stanje elementa (npr. :first-child,:link, :visited).Pseudo element omogućava postavljanje stila na deo sadržaja elementa iako nije definisan u dokumentu. Pseudo elementi se ne mogu primeniti na inline stilove i moraju biti poslednji definisani u lancu selektora. Ako se koriste, treba ih postaviti nakon  klase ili ID-a selektora i moguće je definisati jedan pseudo-element po selektoru.

Primer pseudo elementa (first-letterselektruje prvo renderovano slovo/karakter):

Selektuje prvo slovo u heading 2 i menja stil fonta.

CSS

1

2

3

4

h2:first-letter {

  font-size:200%;

  color:#DF01D7;

}

Selektuje sadržaj pre blockquote i insertuje stilizovan tekst.

CSS

1

2

3

4

5

blockquote:before {

   content : „Insertovan novi tekst:“;

   background-color : #DF01D7;

   font-weight : bold;

}

Primeri računanja specifičnosti selektora:

specifičnost: a=0, b=0, c=0, d=1

CSS

1

2

3

h1 {

  color: #DF0101;

}

specifičnost: a=0, b=1, c=0, d=1

C#

1

2

3

#tekst h1 {

   color: #DF0101;

}

Šta raditi u scenarijima kada ipak želite da vaš stil bude uvek primenjen, bez obzira na do sada postavljene stilove?

Definisanje !important pravila je način da dodelimo najveći prioritet stilu koji smo definisali.

Ovom rešenju najčešće pribegavamo kada su sajtovi veliki i definisane stilova je teško ispratiti.

Ipak ….

Jedna od najčešćih grešaka u praksi jeste previše korišćenje !importantpravila na velikim sajtovima, baš iz razloga što cascade-ing u kombinaciji sa nasleđivanjem može dovesti do komplikacija u razrešenju prioriteta u primeni definisanog stila kada se i najčešće odlučujemo za primenu!important pravila.

Da li smo razumeli specifičnost?

Ako ste pažljivo pročitali tekst, sa lakoćom ćete rešiti sledeći primer.

Predlažemo da pre nego što pogledate rešenje odvojite par minuta i sami pokušate da odredite specifičnost selektora.

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

p.message {

  color: green;

}

#home #warning p.message {

  color: yellow;

}

#warning p.message {

  color: white;

}

body#home div#warning p.message {

  color: blue;

}

p {

  color: teal;

}

* body#home>div#warning p.message {

  color: red;

}

#warning p {

  color: black;

}

ucimo o programiranju

Do IT posla i bez diplome

Večita dilema na tržištu rada je da li vam je stvarno neophodna fakultetska diploma da biste pronašli izazovan i dobro plaćen posao. Mnogi poslodavci će na tome insistirati, pogotovo u poslednje vreme kako je sve više visoko obrazovanih ljudi. Drugi će želeti da vas najpre vide na delu, šta umete da uradite, a diploma će biti samo plus više. Na ovaj način uglavnom funkcioniše i IT industrija, jer diplomu je lepo imati, ali je mnogo važnije da posao bude kvalitetno urađen i na vreme. Za sticanje znanja u ovom poslu nije neophodno biti četiri godine na fakultetu, već je stvar individualna i usavršavanje traje ceo život.

Programer se ceni isključivo po svom umeću, a svi znamo da se ono može steći na fakultetu, određenom kursu, ili samouko na osnovu afiniteta. Praksa je mnogo važnija od naučenog iz knjiga, pa iskusan poslodavac nikada neće odbiti one koji znaju svoj posao. Druga specifičnost IT sfere je prostorna neograničenost, odnosno posao na daljinu možete naći i od kuće, čak i u mestima koja sežu dalje od vaše diplome.

„Kada zapošljavam programera, gledam šta zna i šta je radio, a ne šta je završio“– uobičajena rečenica poslodavaca u IT svetu. 

Želja za zalaganjem je još jedna osobina koju potencijalni radnik mora da dokaže poslodavcu. Konkurencija nije velika kao u oblastima poput prava, ekonomije i novinarstva koje svake godine dobiju više stotina diplomiranih, dok taj broj višestruko raste ako dodamo one bez formalnog obrazovanja. Ali ni ovde se ne smete opustiti i verovati da radno mesto čeka samo na vas zato što je ponuda radne snage manja od potrebe IT industrije. Ako tražimo prednost diplome onda je to što ona navodno podrazumeva da ste stekli neko predznanje, dok osoba bez nje mora da se dokaže iz korena.

Iako o narednim redovima postoje studije i od toga je napravljena prava nauka, ne škodi da konstatujemo da je prvi utisak najvažniji prilikom razgovora za posao. Počev od telefonskog kontakta, do ulaska u prostoriju, preko obraćanja i prezentacije onoga što imate da ponudite. Od programera se ne očekuje da se ponaša po knjiškom principu, već da bude svoj i da ima lični pristup, jer će se tako mnogo bolje snaći u nepredviđenim situacijama koje ovaj posao nosi.

Computer Hackers Meet For Annual Congress

Ali treba znati osobenosti razgovora za recimo mesto programera jer se on razlikuje od onog za menadžera. Biografija je lepa kad je napisana, kada se iz nje vidi šta ste radili i za koga, ali poznavanje rada u određenim programima najbolje se demonstrira praktično. U tom momentu ne postoje dva odgovora kao kod nekih privrednih grana, već se od kandidata očekuje da na tačno određen način reši problem. Zato se nemojte začuditi ako od vas to bude zatraženo. U IT svetu je očekivanje da odmah donosite zaradu i opravdate svoje zaposlenje možda i najviše izraženo, mnogo više nego kod klasičnih društvenih nauka.

ucimo o programiranju

10 lekcija koje svaki freelancer treba da usvoji

Biti freelancer za mnoge je ostvarenje snova. Zapravo, postoji mnogo razloga zašto ljudi biraju da se oslobode posla sa punim radnim vremenom. Prilika da se bude svoj gazda i želja za radom na raznim projektima, na primer. Tu je i fleksibilnost u radu, kad god i gde god želite (mada to može biti i blagoslov i prokletstvo). I naravno, uvek postoji mogućnost za veliku zaradu. Pre upuštanja u svet freelancinga poželjno je savladati neke lekcije kako biste bili što uspešniji.

Od pisaca do web dizajnera, programera i marketing menadžera, mnogi ljudi u kreativnoj industriji rade kao freelanceri. Freelancer je neko ko ne radi za jednu kompaniju sa punim radnim vremenom, ali je angažovan od različitih kompanija za određene poslove. Na primer, časopis ili sajt će imati osnovni tim urednika koji zapošljavaju freelance pisce da pišu članke, ili će agencija možda zaposliti programera da radi na jednoj seriji projekata. Biti uspešan freelancer zahteva usvajanje nekoliko korisnih lekcija koje vas mogu dovesti do uspeha i zarade.
1. Promovišite svoj rad i projekte
Niko vas neće pozvati iz vedra neba. Treba da kažete ljudima da postojite. Nije bitno da li ste već izgrađeni freelancer ili krećete od nule, samopromocija je od vitalnog značaja. Pošaljite e-poštu, pozovite ljude, idite na konferencije, izradite svoj sopstveni sajt. Pošaljite svoj portfolio klijentima. Maksimalizujte vidljivost.

Redovni klijenti su zlata vredni. Ali ne potcenjujte vreme koje je potrebno da se stvore i razviju odnosi. Dajte im vizitkartu, neka znaju da ste programer. Cilj je u umrežavanju i prilici da se vaš rad vidi.
2. Napravite svoj lični sajt, odmah!
Ako je samopromocija ključ uspešnog freelancera, onda je portfolio sajt najefikasniji alat koji možete imati. Vaš sajt je prvo mesto gde će se uputiti većina potencijalnih klijenata. Lakše je napraviti sajt nego što mislite. Web platforme kao što su WordPress, Joomla i Drupal se mogu prilagoditi da deluju kao početak kontakta, blog, digitalni portfolio, čak i onlajn prodavnica gde svoj rad direktno možete prodati.
3. Organizujte svoj radni proces
Važno je da održite balans između posla i privatnog života – dobro upravljanje vremenom i disciplina su apsolutno neophodni. Morate poštovati zadate rokove. Prema tome, vaša sposobnost da napravite prioritete je od vitalnog značaja. Lako je ostati motivisan – ako ne radite, nećete biti ni plaćeni. Nikad ne treba potcenjivati vreme koje je potrebno da se dođe do koncepta ideja. Budite disciplinovani u zakazivanju poslova, u merenju vremena. Ako radite sa fiksnom cenom, bilo koje vreme koje provedete preko predviđenog je izgubljen novac.
4. Radite i na ličnim projektima, ne samo tuđim
Sama priroda honorarnih poslova znači da ćete često raditi i sa klijentima koji zahtevaju vrlo jednostavan dizajn ili program. Oni vas ne mogu otpustiti, ali oni će vam platiti račune. Da biste napravili ravnotežu, razmotrite i rad na svojim idejama. Nastavite da generišete svoje ideje dok radite naručene poslove. To će vas držati motivisanim da dodatno učite.
5. Zadovoljni klijenti su klijenti koji se ponovo vraćaju
Komunicirajte sa svojim klijentom redovno. Dobra komunikacija je bitna zbog što efikasnijeg ispunjenja zadataka. Uvek dostavite svoj rad na vreme i u skladu sa budžetom. Budite ljubazni, profesionalni, uradite dobar posao i, ako je moguće, dodajte malu vrednost besplatno. Ako prekoračite rok velike su šanse da vas klijent neće ponovo angažovati u budućnosti. Kada isporučite kvalitetan rad, na vreme i svaki put, klijent će želeti da ponovo sarađujete ili će vas čak preporučiti drugima.
6. Nemojte biti obeshrabljeni
Freelancing može biti usamljenički posao. Potrebna je istrajnost da se uspostavi karijera i to može zahtevati određeno vreme. Imajte veru u sebe i svoj rad jer je važno da ostanete motivisani, čak i kada se stvari ne pomeraju tako brzo. Nažalost, to je priroda freelance posla. Ali ako verujete u svoj rad i spremni ste da naporno radite na usavršavanju, rezultati će doći.
7. Nikada se ne oslanjajte na jednog klijenta
Kao freelancer morate naučiti da se nikada ne oslanjate na jednog klijenta. Neka vam cilj bude 10 klijenata koji će se uvek rado vraćati. Važno je da imate više od jednog klijenta, jer, na kraju krajeva, ovo je biznis.
8. Birajte koje ćete projekte prihvatiti
Ako ste novi u freelancingu onda možete doći u iskušenje da prihvatite bilo koji posao koji se nudi. Ali neke poslove jednostavno nije vredno prihvatati. Važno je da ne ugrozite kvalitet svog rada samo da biste nešto zaradili. Takođe, ako klijent zahteva vlasništvo svih vaših prava, ne želi pregovore ili nudi veoma nisku nadoknadu, koja ne odražava zahtevani rad, nemojte prihvatiti taj posao.
9. Pazite da se ne preopteretite poslom
Jedna stvar sa kojom se slažu svi freelanceri – nikad ne radite besplatno ili po sniženoj ceni. Ako ste dovoljno dobri da krenete sa poslom, onda ste sigurno dovoljno dobri da za to budete i plaćeni.
10. Nikad ne zaboravite da ste u stvari ušli u jedan mali biznis
Pažnja sa kojom prilazite klijentima od vitalnog je značaja za uspeh. I to ne samo u pogledu obavljanja posla, već i kod ugovora, pregovaranja i „jurenja” sumnjivih klijenata kod kojih ne uspevate da naplatite rad na vreme. Veoma je bitno da zadržite svoja autorska prava.
Freelancing nudi ogromne mogućnosti za razvoj i zaradu. Dajte sebi priliku i upustite se u avanturu rada sa domaćim i stranim klijentima. Sada već sa jednogodišnjim obrazovanjem možete steći potrebna znanja iz oblasti programiranja, grafičkog i web dizajna, kreiranja aplikacija.

ucimo o programiranju

​5 neobičnih mesta na kojima web dizajneri pronalaze inspiraciju

Svako ko se bavi kreativnim poslom ponekad upadne u takozvanu kreativnu blokadu. Zbog toga je važno da imate dobru strategiju, koja će vam pomoći da se poslu vratite sveži i sa novim elanom. Pre svega, potrebno je da napravite pauzu i razbistrite misli kako bi nove genijalne ideje imale prostora da se razviju. Zatim, potražite nadahnuće za neki od ovih oprobanih načina.
Inspiracija za dizajnere


1. Raznovrsni katalozi
U svom domu verovatno imate različite kataloge, brošure i časopise koji su se tu našli i nagomilali, a skoro da ih nikada niste ni prelistali.
Iako vam deluje kao da nemaju nikakve veze sa vašim poslom, ova kratka izdanja su prepuna odličnih materijala i primera.
Obratite pažnju na boje i njihove odnose, na linije i teksture, kao i na raspored fotografija i prelom teksta, i videćete da to možete da primenite i na dizajn sajtova.
Katalozi


2. Izlozi prodavnica
Šetnja će vam prijati, jer ćete razbistriti svoje misli i odmoriti oči od ekrana. Dok šetate ulicama, obratite pažnju na bogate izloge prodavnica koji vas privlače.
Načini na koje su izlozi uređeni, police postavljene sa raznim proizvodima ili lutke odevene u raznobjnu odeću podstaći će vas da razmišljate van granica web dizajna.
Posebno obratite pažnju na to kako dizajneri izloga koriste sitne detalje, koji su naizgled nebitni, ali doprinose opštem utisku i grade jedinstven stil.
Izlozi
3. Meni u restoranu
Dok u svom omiljenom restoranu čekate da vam konobar donese jelo, pogledajte kako je dizajniran meni. Sklad boja i fontova koji su korišćeni daće vam novi ugao gledanja na sajt koji trenutno radite.
Meni u headeru sajta je interaktivan i često zahteva akciju posetilaca. Sa menijem u restoranu je stvar potpuno drugačija.
Sve što je u ponudi, odmah je izloženo gostima. Upravo ova razlika će vas podstaći da razmišljate o jednostavnijim rešenjima i boljem dizajnu menija na sajtu koji dizajnirate.
Meni


4. Diznijevi crtaći
Dobri stari Diznijevi crtaći su odlična prilika da uživate, ali i da radite u isto vreme. „Snežana”, „Pinokio”, „Bambi”, „Uspavana lepotica” i „Pepeljuga” nikada neće izaći iz mode, a to je baš ono što želite da postignete kada je reč o dizajnu sajta.
Osim što će vas inspirisati u polju estetike, ovi crtani filmovi će vam pomoći da konstruišete tok kojim želite da posetilac sajta prolazi kroz sadržaje, kao i da napravite male gradacije koje sajt čine dinamičnim i interesantnim.
Dizni


5. Nove perspektive
Kada dugo radite na jednom projektu, dešava se da dođe do zasićenja i da jednostavno ne možete da uradite više ništa kako biste unapredili dizajn. To se dešava jer gledate u jedan isti koncept i iz iste perspektive previše dugo.
Kako biste mogli da promenite perspektivu iz koje posmatrate sajt na kom radite, uradite to i sa drugim stvarima.
Prošetajte delovima grada kojima obično prolazite kolima, pogledajte kako izgleda vaš prozor sa ulice, ili na neki drugi način promenite ugao gledanja. Tako ćete uvežbati načine da sagledate i svoj sajt iz različitih perspektiva.
Perspektiva
Stalno usavršavanje
Poslovica kaže da čovek uči dok je živ, ali ona govori i mnogo više od toga. Učenjem i sticanjem novih veština, ne samo da proširujete svoje sposobnosti već i oživljavate stare.
Zbog toga nemojte nikada prestati da radite na svom obrazovanju. Ako se već bavite web dizajnom, dobar način da to uradite je da upišete neki od programa ITAcademy koji je blizak vašem poslu, kao što je grafički dizajn ili PHP programiranje.
Nova znanja će vam pomoći da još kreativnije iskoristite stara, a dok stičete nove veštine, otvaraju vam se i nove mogućnosti koje će vas inspirisati i podići cenu vašeg rada, kao i vaš ugled u svetu dizajna.

ucimo o programiranju

JAVA PROJEKAT

UVOD

Razvoj web aplikacija u većini slučajeva podrazumeva i korišćenje JavaScript-a (u buduće JS). Ponekad se koristi minimalistički, dok kod nekih slučajeva imamo jako razvijenu arhitekturu unutar web projekata. Deo tih rešenja organizuje JS u odvojene fajlove, dok neki čak pozivaju JS funkcije direktno na HTML stranicama (u slučaju ASP.NET MVC aplikacija to su .cshtml fajlovi).

Dolaskom jquery JS framework-a, implementacija dodatno postaje kompleksnija a samim tim i moćnija po pitanju kontrole DOM-a, pa čak i sistemskih delova samog browser-a u okviru čijeg okruženja se JS izvršava.

Dobra organizacija i podela JS sloja na celine koje su implementirane kroz odvojene JS objekte postaje vrlo važan zadatak razvojnih timova.
S toga je vrlo važno pojasniti na koji način možemo dobiti organizovan i lako proširiv JS sloj u web aplikacijama. Sledećim primerom ću pokušati da vam predstavim moj način razmišljanja i implementacije JS kroz ASP.NET MVC aplikaciju, na osnovu teorijskog zahteva jednog izmišljenog klijenta, i kako takva implementacija nudi prilično jasan kod koji je ujedno lako proširiv i testabilan.

KLIJENTSKI ZAHTEV

Zamislićemo fiktivnog klijenta koji nam je poslao sledeći zahtev:

TEXT

- As a user, I would like to send feedback for each page in app, using AJAX for request.
- Feedback is in the form of Yes/No answer to the question "Was this page helpfull?".
- Response should have a message "Thanks for the feedback :). Your answer was *{Yes}/{No}*" shown to the user.
- Yes and No are buttons.
- Yes and No buttons should have jqueryUI tooltip plugin attached to a Title attribute describing it's function.

Zahtev je jasan. Žele da u “Help” web aplikaciji dodaju komponentu za slanje feedback-a korisnika za svaku postojeću stranicu ovog projekta. Takođe je jasno da treba da koristimo i jqueryUI tooltip komponentu.

Nakon malo razmišljanja dolazimo do raznih rešenja implementacije ovog zahteva. Svakako nam je jasno da će ovo biti komponenta jer će se koristiti na više web stranica, s toga zaključujemo da ćemo implementaciju komponente postaviti na odvojen View, tj. PartialView (terminologija podele vrsta web stranica je u različitim web tehnologijama drugačije nazivana, ali je koncept poznat svima). Takođe shvatamo da ćemo morati da pišemo JS funkcije koje će poslati odgovor pomoću AJAX poziva. Prva ideja nam je da  funkcije stavimo u odvojeni fajl kako bi bile grupisane na jednom mestu. Nakon postavke projekta dolazimo do sledećeg sadržaja survey.jsfajla:

JS

$(function () {

    $("#YesButton, #NoButton").on("click", function () {

        updateSurvey(this);

    });

    $("#YesButton, #NoButton").tooltip({
        position: {
            my: "center bottom",
            at: "center bottom+60",
            collision: "none",
            using: function (position, feedback) {
                $(this).css(position);
                $("

")
                    .addClass("arrow")
                    .addClass(feedback.vertical)
                    .addClass(feedback.horizontal)
                    .appendTo(this);
            }
        }
    });

});

function updateSurvey(element) {

    var url = $(element).data("url");
    var pageId = $(element).data("id");
    var answer = $(element).data("value");

    $.ajax({
        url: url,
        type: "POST",
        data: {
            pageId: pageId,
            answer: answer
        },
        error: function (xhr) {
            $("#SurveyMessage").html(xhr.responseText);
        },
        success: function (data, status, xhr) {
            $("#SurveyMessage").html(xhr.responseText);
            $("#YesButton, #NoButton").attr("disabled", true);
        }
    });
}

Odgovarajući HTML za web stranice bi bio:

GettingStarted.cshtml

@model GetMoreLibrariesModel

@{
    ViewBag.Title = "Get More Libraries";
}

@section scripts
{
    @Scripts.Render("~/bundles/getmorelibraries-classic")
}















Get more libraries

NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects. @Url.Action("GettingStarted")">Getting started » @Html.Partial("_Survey", Model.SurveyModel) </div> _Survey.cshtml @model SurveyModel

Was this page helpfull?

Please select option: @Url.Action("Update", "Survey")" data-id="@Model.PageId" data-value="Yes">Yes @Url.Action("Update", "Survey")" data-id="@Model.PageId" data-value="No">No @Html.HiddenFor(p=>p.PageId)

C# kod u kontrolerima bi bio:

public class ClassicController : Controller
    {
        public ActionResult GettingStarted()
        {
            var gettingStartedModel = new GettingStartedModel
            {
                SurveyModel = new SurveyModel("GettingStarted")
            };
            return View(gettingStartedModel);
        }
        
        public ActionResult GetMoreLibraries()
        {
            var getMoreLibrariesModel = new GetMoreLibrariesModel
            {
                SurveyModel = new SurveyModel("GetMoreLibraries")
            };
            return View(getMoreLibrariesModel);
        }
    }

    public class SurveyController : Controller
    {
        [HttpPost]
        public ActionResult Update(SurveyModel model)
        {
            return Content(
string.Format("Thanks for the feedback :). Your answer was *{0}*", model.Answer));
        }
    }

C# kod za Bundle & Minification bi bio:

bundles.Add(new ScriptBundle("~/bundles/gettingstarted-classic").Include(
                    "~/Scripts/app/classic/GettingStarted.js",
                    "~/Scripts/app/classic/Survey.js"));

bundles.Add(new ScriptBundle("~/bundles/getmorelibraries-classic").Include(
                    "~/Scripts/app/classic/GetMoreLibraries.js",
                    "~/Scripts/app/classic/Survey.js"));

Pretpostavimo da je za sada potrebno implementirati ovu komponentu na samo dve web stranice GettingStarted.cshtml iGetMoreLibraries.cshtml. Komponentu smo postavili na parcijalnu stranicu_Survey.cshtml. Takođe smo odlučili dasurvey.js bude deo bundle kolekcije koja će se učitavati na svakoj stranici. Na ovaj način smo postavili solidno rešenje koje je ujedno pregledno i gde je JS izdvojen u poseban fajl. Klijent je zadovoljan i sve funkcioniše ispravno.
Nakon završene prve faze, klijent odlučuje da pošalje dodatni zahtev:

TEXT

- Feedback component should be available on modal (overlay) pages also. Modals are initiated using .modal bootstrap function.

Zahtev je jasan. Žele da komponenta može da se postavi i na “modalnim” (overlay) stranicama koje se učitavaju pomoću AJAX-a i prikazuju pomoću .modal bootstrap funkcije. Pošto smo komponentu postavili u odvojen PartialView ovo će nam olakšati posao. Stranice koje treba da se prikazuju u “modalnom” prozoru će izgledati ovako:

GetMoreLibrariesAdvanced.cshtml

@model GetMoreLibrariesAdvancedModel







            ×





















        

















Here we can show advanced information about parent page. @Html.Partial("_Survey", Model.SurveyModel) </div> </div> Close </div> </div>

Doradimo kontroler koji kasnije izgleda ovako:

public class ClassicController : Controller
    {
        public ActionResult GettingStarted()
        {
            var gettingStartedModel = new GettingStartedModel
            {
                SurveyModel = new SurveyModel("GettingStarted")
            };
            return View(gettingStartedModel);
        }
        
        public ActionResult GetMoreLibraries()
        {
            var getMoreLibrariesModel = new GetMoreLibrariesModel
            {
                SurveyModel = new SurveyModel("GetMoreLibraries")
            };
            return View(getMoreLibrariesModel);
        }

        public ActionResult GettingStartedAdvanced()
        {
            var gettingStartedAdvancedModel = new GettingStartedAdvancedModel
            {
                SurveyModel = new SurveyModel("GettingStartedAdvanced")
            };
            return PartialView(gettingStartedAdvancedModel);
        }

        public ActionResult GetMoreLibrariesAdvanced()
        {
            var getMoreLibrariesAdvanced = new GetMoreLibrariesAdvancedModel
            {
                SurveyModel = new SurveyModel("GetMoreLibrariesAdvanced")
            };
            return PartialView(getMoreLibrariesAdvanced);
        }
    }

Takođe dodamo dva nova JS fajla:

GetMoreLibraries.js

$(function () {

    $("#GetMoreLibrariesAdvanced").on("click", function () {

        var url = $(this).attr("href");

        $.ajax({
            url: url,
            type: "GET",
            success: function (data, status, xhr) {

                $("#GetMoreLibrariesAdvancedModal").html(xhr.responseText).modal("show");

            }
        });

        return false;
    });
});

GettingStarted.js

$(function () {

    $("#GettingStartedAdvanced").on("click", function () {

        var url = $(this).attr("href");

        $.ajax({
            url: url,
            type: "GET",
            success: function (data, status, xhr) {

                $("#GettingStartedAdvancedModal").html(xhr.responseText).modal("show");

            }
        });

        return false;
    });
});

Za sada sve deluje u redu. Nakon pokretanja aplikacije, klikom se otvaraju dodatni modalni prozori. Međutim, primećujemo da na modalnim prozorima ne funkcionišu dugmad na samoj komponenti. Naravno da nam je jasno da click event nije ni inicijalizovan nad survey komponentom. Deo koji inicijalizuje click event u Survey.js fajlu izvršava se jednokratno nakon učitavanja svake stranice, a nama je potrebno da se takođe izvrši i nakon učitavanja modalnih prozora. U ovom trenutku možemo smisliti nekoliko različitih rešenja ovog problema, ali svaki od njih nosi svoje posledice. Jedno od rešenja bi bilo koristiti .live jquery funkciju koja bi obezbedila click event u svakom trenutku, ali i dalje nam ostaje inicijalizacija .tooltip plugina koja ne može da se reši pomoću .live funkcije. Potrebno nam je rešenje koje bi bilo generalizovano i bez dupliranja koda ali u isto vreme jednostavno za dalje proširenje.

U ovom trenutku na scenu stupa Revealing Module Patttern.

REVEALING MODULE PATTERN

Revealing Module Pattern nam omogućava da određeni skup povezanih js funkcija objedinimo unutar jednog objekta, i da u okviru tog objekta imamo kontrolu vidljivosti svih njegovih funkcija (da li su private ili public). Takođe, ovaj pristup odvaja celine u module koji mogu da se instanciraju po potrebi a ne da se funkcije pišu globalno.

Pogledajmo primer kako bi naši js fajlovi izgledali nakon refaktorisanja i primene ovog paterna.

GetMoreLibraries.js

var getMoreLibraries = function() {

    var self = this;
    var _survey;
    var _surveyModal;

    function init() {

        function _initDom() {
            self._dom = {};
            self._dom.GetMoreLibrariesAdvanced = $("#GetMoreLibrariesAdvanced");
            self._dom.GetMoreLibrariesAdvancedModal = $("#GetMoreLibrariesAdvancedModal");
        }

        function _bindEvents() {
            self._dom.GetMoreLibrariesAdvanced.on("click", _onGetMoreLibrariesAdvancedClick);
        }

        function _initComponents() {
            _survey = new survey("GetMoreLibraries");
            _survey.init();
        }

        _initDom();
        _bindEvents();
        _initComponents();
    }

    function _onGetMoreLibrariesAdvancedClick() {
        var url = $(this).attr("href");

        $.ajax({
            url: url,
            type: "GET",
            success: function (data, status, xhr) {

                self._dom.GetMoreLibrariesAdvancedModal.html(xhr.responseText).modal("show");

                _surveyModal = new survey("GetMoreLibrariesAdvanced");
                _surveyModal.init();
            }
        });

        return false;
    }

    return {
        init: init
    }
}();

$(function () {
    getMoreLibraries.init();
});

GettingStarted.js

var gettingStarted = function () {

    var self = this;
    var _survey;
    var _surveyModal;

    function init() {

        function _initDom() {
            self._dom = {};
            self._dom.GettingStartedAdvanced = $("#GettingStartedAdvanced");
            self._dom.GettingStartedAdvancedModal = $("#GettingStartedAdvancedModal");
        }

        function _bindEvents() {
            self._dom.GettingStartedAdvanced.on("click", _onGettingStartedAdvancedClick);
        }

        function _initComponents() {
            _survey = new survey("GettingStarted");
            _survey.init();
        }

        _initDom();
        _bindEvents();
        _initComponents();
    }

    function _onGettingStartedAdvancedClick() {
        var url = $(this).attr("href");

        $.ajax({
            url: url,
            type: "GET",
            success: function (data, status, xhr) {

                self._dom.GettingStartedAdvancedModal.html(xhr.responseText).modal("show");

                _surveyModal = new survey("GettingStartedAdvanced");
                _surveyModal.init();

            }
        });

        return false;
    }

    return {
        init: init
    }
}();

$(function () {
    gettingStarted.init();
});

_Survey.cshtml

@model SurveyModel












Was this page helpfull?

Please select option: @Model.PageId" class="btn btn-default" title="This is a Yes button" data-name="SurveyButton" data-url="@Url.Action("Update", "Survey")" data-id="@Model.PageId" data-value="Yes">Yes @Model.PageId" class="btn btn-default" title="This is a No button" data-name="SurveyButton" data-url="@Url.Action("Update", "Survey")" data-id="@Model.PageId" data-value="No">No @Model.PageId" class="message"> </div> </div>

GetMoreLibraries.cshtml

@model GetMoreLibrariesModel

@{
    ViewBag.Title = "Get More Libraries";
}

@section scripts
{
    @Scripts.Render("~/bundles/getmorelibraries-module")
}















Get more libraries

NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects. @Url.Action("GetMoreLibrariesAdvanced")">Get more libraries Advanced » @Url.Action("GettingStarted")">Getting started » @Html.Partial("_Survey", Model.SurveyModel) </div>

GetMoreLibrariesAdvanced.cshtml

@model GetMoreLibrariesAdvancedModel







            ×





















        

















Here we can show advanced information about parent page. @Html.Partial("_Survey", Model.SurveyModel) </div> </div> Close </div> </div>

Pogledajmo prvo GetMoreLibraries.js fajl. Primećujemo da u njemu umesto globalnih funkcija imamo samo jednu globalnu promenljivu “getMoreLibraries” koja je u stvari funkcija koja vraća JS objekat sa određenim osobinama. Primetimo takođe da ova funkcija poziva samu sebe na kraju sa “()”, što nam obezbeđuje da se automatski kreira u memoriji čim se fajl učita u browser. Takođe, na samom kraju primećujemo klasičnu jquery.ready inicijalizaciju u okviru koje se poziva samo jedna public “init” metoda.

Ovako kreiran objekat se može videti u memoriji browsera, ali se nad njim mogu izvršiti samo funkcije koje su definisane kroz objekat iz “return” bloka. To znači da unutar ovog “modula” možemo definisati neograničen broj funkcija koje se međusobno mogu pozivati, ali samo one koje su definisane u “return” bloku biće vidljive spolja. Na ovaj način možemo da kontrolišemo koje funkcije će biti private a koje public. Ovakav pristup je odličan za module koji odgovaraju web stranicama koje se odmah kompletno učitavaju, jer će se učitati zajedno sa njima i postaviti u memoriji browsera. Onog trenutka kada se uradi redirekcija na drugu web stranu, ovaj modul se neće učitati (osim ako se eksplicitno na toj stranici ne referencira), što znači da će se i stranica brže učitavati. Takođe ne postoji mogućnost sukoba između istih naziva funkcija u različitim JS fajlovima, jer na ovaj način svaki modul dobija svoj “namespace”. Primetimo takođe i da public “init” funkcija unutar sebe definiše 3 privatne metode “_initDom”, “_bindEvents” i “_initComponents”.

Ideja prve metode je da sve HTML elemente koji se koriste za event-e i manipulaciju DOM-a smesti u promenljive koje su deo ovog modula, kako bi se kasnije kroz modul koristile isključivo promenljive. Na ovaj način ne dupliramo JS kod gde god koristimo jquery selektore, već ih na jednom mestu definišemo i po potrebi menjamo.

Druga metoda radi isključivo inicijalizaciju svih potrebnih event-a, dok treća služi za inicijalizaciju drugih modula ili plugin-ova.

Sve ovo što smo naveli i uradili izgleda lepo i dobro za našu aplikaciju, ali i dalje ne rešava problem koji smo imali, a to je inicijalizacija na modalnim prozorima. Pogledajmo zatim kako je refaktorisan Survey.js fajl.

_Survey.js

var survey = function (pageId) {

    var self = this;
    var _pageId = pageId;

    function init() {

        function _initDom() {
            self._dom = {};
            self._dom.Buttons = $("#YesButton-" + _pageId + ", #NoButton-" + _pageId);
            self._dom.Message = $("#Message-" + _pageId);
        }

        function _bindEvents() {
            self._dom.Buttons.on("click", _onUpdateSurvey);
        }

        function _initComponents() {
            self._dom.Buttons.tooltip({
                position: {
                    my: "center bottom",
                    at: "center bottom+60",
                    collision: "none",
                    using: function (position, feedback) {
                        $(this).css(position);
                        $("<div>")
                            .addClass("arrow")
                            .addClass(feedback.vertical)
                            .addClass(feedback.horizontal)
                            .appendTo(this);
                    }
                }
            });
        }

        _initDom();
        _bindEvents();
        _initComponents();
    }

    function _onUpdateSurvey() {
        var url = $(this).data("url");
        var pageId = $(this).data("id");
        var answer = $(this).data("value");

        $.ajax({
            url: url,
            type: "POST",
            data: {
                pageId: pageId,
                answer: answer
            },
            error: function (xhr) {
                self._dom.Message.html(xhr.responseText);
            },
            success: function (data, status, xhr) {
                self._dom.Message.html(xhr.responseText);
                self._dom.Buttons.attr("disabled", true);
            }
        });
    }

    return {
        init: init
    }
};

Prvo što primećujemo je da je i on prebačen u modul patern. Međutim, postoji jedna bitna razlika u odnosu na prethodni modul, a to je da ovaj nema automatsku inicijalizaciju jquery.ready, kao ni automatsko pozivanje samog sebe “()”. Ovaj deo je jako važan, jer na ovaj način dobijamo mogućnost da modul instanciramo eksplicitno, i pozovemo njegovu inicijalizaciju u trenutku koji nama odgovara, a to je upravo ono što želimo. Želimo da imamo jedinstven JS kod za našu komponentu, da ga ne dupliramo, ali da možemo da ga instanciramo i inicijalizujemo u bilo kom trenutku.

To se realizuje tako što smo u getMoreLibraries modulu dodali dve privatne promenljive: “_survey” i “_surveyModal”.

Primetimo kako se _survey promenljiva inicijalizuje odmah u “_initComponents” funkciji. Njoj se u stvari dodeljuje instanca “Survey” modula pri čemu se prosleđuje parameter kroz konstruktor (da bi modul znao nad kojim HTML elementima radi). Ovakav pristup koristimo za parcijalne komponente koje se renderuju zajedno sa stranicama (u ASP.NET MVC je to PartialView koji se renderuje na View sa Html.Partial funkcijom).

Druga promenljiva “_surveyModal” se inicijalizuje tek nakon završenog AJAX poziva koji vraća HTML za modalni prozor, i na isti način joj se dodeljuje nova instanca “Survey” modula koja je potpuno nezavisna od prethodne instance i izvršava se nad komponentom u modalnom prozoru!

Cilj je postignut! Nemamo duplirani kod, već jedan JS modul koji može da se iskoristi na više različitih mesta. Doradili smo JS na nivo da je pregledan i lako proširiv, a u isto vreme dovoljno fleksibilan da može da se upotrebljava na različite načine.

ZAKLJUČAK

Revealing Module patern je sjajan način da se organizuje JS kroz celu web aplikaciju. Ne samo što ćemo dobiti unificirani način pisanja i organizovanja JS koda, već dobijamo i na performansama. Takođe, otklanjanje grešaka u JS kodu više nije noćna mora, jer je sav kod dostupan za debug u browser-u, pa nam je samim tim i lakše da prepoznamo bagove i rešimo ih na adekvatan način. Ozbiljan problem u pisanju JS je i dupliranje koda kako bi se rešili pojedini zahtevi vezani za AJAX pozive. Taj problem takođe rešava ovaj patern.

Sve u svemu, moje mišljenje je da bi ozbiljno trebalo razmisliti o implementaciji ovog paterna kroz trenutne i buduće projekte. Iskreno se nadam da sam ovim primerom makar probudio Vašu maštu i pokrenuo gomilu pitanja na koja valja odgovoriti.

Kompletan Visual Studio projekat za ovaj primer možete preuzeti sa:

https://github.com/salmarko/RevealingModulePattern(link is external)

http://platform.twitter.com/widgets/tweet_button.f8c8d971a6ac545cf416e3c1ad4bbc65.en.html#dnt=false&id=twitter-widget-1&lang=en&original_referer=http%3A%2F%2Fit-konekt.com%2Fsr%2Fblog%2F27-07-2017%2Forganizacija-javascript-u-web-projektima-833&related=%3ACheck%20it%20out!&size=m&text=Organizacija%20JavaScript-a%20u%20web%20projektima&time=1503707165437&type=share&url=http%3A%2F%2Fit-konekt.com%2Fsr%2Fblog%2F27-07-2017%2Forganizacija-javascript-u-web-projektima-833

https://apis.google.com/se/0/_/+1/fastbutton?usegapi=1&size=medium&annotation=bubble&origin=http%3A%2F%2Fit-konekt.com&url=http%3A%2F%2Fit-konekt.com%2Fsr%2Fblog%2F27-07-2017%2Forganizacija-javascript-u-web-projektima-833&gsrc=3p&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.sr.fRHxh9ihwpE.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCPyzKtTQ3QHmOXRPZJ9UH2dGCCAiA#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I1_1503707164760&parent=http%3A%2F%2Fit-konekt.com&pfname=&rpctoken=12166562

Share