diff --git a/translations/hr/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/hr/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 71c97ba10..2f3878166 100644 --- a/translations/hr/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/hr/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,106 +1,190 @@ -# Uvod u programske jezike i moderne alate za razvoj - -Hej, budući programeru! 👋 Mogu li ti reći nešto što me svaki dan iznova oduševljava? Upravo ćeš otkriti da programiranje nije samo rad s računalima – to je kao da imaš stvarne supermoći za ostvarivanje svojih najluđih ideja! - -Znaš onaj trenutak kad koristiš svoju omiljenu aplikaciju i sve savršeno funkcionira? Kad pritisneš gumb i dogodi se nešto apsolutno magično što te natjera da pomisliš "wow, kako su to napravili?" Pa, netko baš poput tebe – vjerojatno sjedeći u svom omiljenom kafiću u 2 ujutro s trećim espressom – napisao je kod koji je stvorio tu magiju. I evo što će te oduševiti: do kraja ove lekcije ne samo da ćeš razumjeti kako su to napravili, već ćeš jedva čekati da i sam pokušaš! +# Uvod u programske jezike i moderne razvojne alate + +Bok, budući programeru! 👋 Mogu li ti reći nešto što mi i danas svaki dan izaziva jezu? Upravo ćeš otkriti da programiranje nije samo za računala – to su prave supermoći koje ti omogućuju da oživiš svoje najluđe ideje! + +Znaš onaj trenutak kad koristiš svoju omiljenu aplikaciju i sve jednostavno savršeno klikne? Kad dodirneš gumb i dogodi se nešto posve magično zbog čega pomisliš „wow, kako su TO učinili?“ Pa, netko baš poput tebe – vjerojatno sjedi u svom omiljenom kafiću u 2 ujutro s trećim espresom – napisao je kod koji je stvorio tu čaroliju. A ovo će ti izvaditi dah: do kraja ovog sata ćeš ne samo razumjeti kako su to napravili, nego ćeš jedva čekati sam probati! + +Pogledaj, potpuno razumijem ako ti se programiranje sada čini zastrašujuće. Kad sam ja počinjao, iskreno sam mislio da trebaš biti neki matematički genij ili da kodaš od pete godine života. Ali evo što mi je u potpunosti promijenilo pogled: programiranje je kao učenje novog jezika komunikacije. Počneš s „bok“ i „hvala“, zatim naručuješ kavu, a prije nego znaš, vodiš duboke filozofske razgovore! Osim što u ovom slučaju razgovaraš s računalima, i iskreno? Oni su najstrpljiviji sugovornici koje možeš imati – nikad ne osuđuju tvoje pogreške i uvijek su spremni ponovno pokušati! + +Danas ćemo istražiti nevjerojatne alate koji čine moderni web razvoj ne samo mogućim, već i ozbiljno zaraznim. Govorim o točno istim uređivačima, preglednicima i radnim procesima koje koriste developeri u Netflixu, Spotifyu i tvom omiljenom indie studiju svaki dan. I evo dijela koji će te natjerati da zaplešeš od sreće: većina ovih profesionalnih, industrijskih alata je potpuno besplatna! + +![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.hr.png) +> Sketchnote autora [Tomomi Imura](https://twitter.com/girlie_mac) + +```mermaid +journey + title Vaše Programersko Putovanje Danas + section Otkrij + Što je programiranje: 5: You + Programski jezici: 4: You + Pregled alata: 5: You + section Istraži + Uređivači koda: 4: You + Preglednici i alati za razvoj: 5: You + Naredbeni redak: 3: You + section Vježbaj + Jezični detektiv: 4: You + Istraživanje alata: 5: You + Povezivanje sa zajednicom: 5: You +``` +## Pogledajmo što već znaš! -Gledaj, potpuno razumijem ako ti se programiranje trenutno čini zastrašujuće. Kad sam ja počeo, iskreno sam mislio da moraš biti neki genijalac iz matematike ili da programiraš od svoje pete godine. Ali evo što mi je potpuno promijenilo perspektivu: programiranje je baš kao učenje razgovora na novom jeziku. Počneš s "bok" i "hvala", zatim prijeđeš na naručivanje kave, i prije nego što shvatiš, vodiš duboke filozofske rasprave! Osim što u ovom slučaju razgovaraš s računalima, a iskreno? Ona su najstrpljiviji sugovornici koje ćeš ikada imati – nikada ne osuđuju tvoje pogreške i uvijek su spremna pokušati ponovno! +Prije nego što skočimo na zabavne stvari, zanima me – što već znaš o ovom svijetu programiranja? I slušaj, ako na ova pitanja gledaš misleći „Doslovno nemam pojma ni o čemu od ovoga,“ nije samo u redu, to je savršeno! To znači da se nalaziš na točno pravom mjestu. Razmišljaj o ovom kvizu kao o zagrijavanju prije treninga – samo pripremamo tvoje moždane mišiće! -Danas ćemo istražiti nevjerojatne alate koji moderni web razvoj ne čine samo mogućim, već i ozbiljno zaraznim. Govorim o istim editorima, preglednicima i radnim procesima koje svakodnevno koriste programeri u Netflixu, Spotifyju i tvojoj omiljenoj indie aplikacijskoj studiji. I evo dijela koji će te natjerati na ples od sreće: većina ovih profesionalnih alata, standardnih u industriji, potpuno je besplatna! +[Posloži pred-čas kviz](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) -![Uvod u programiranje](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.hr.png) -> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac) -## Provjerimo što već znaš! +## Avantura na koju krećemo zajedno -Prije nego što zaronimo u zabavne stvari, zanima me – što već znaš o ovom svijetu programiranja? I slušaj, ako gledaš ova pitanja i misliš "doslovno nemam pojma o ničemu od ovoga," to nije samo u redu, to je savršeno! To znači da si točno na pravom mjestu. Zamisli ovaj kviz kao istezanje prije treninga – samo zagrijavamo moždane mišiće! +Ok, stvarno sam oduševljen onim što ćemo danas istražiti! Ozbiljno, volio bih vidjeti tvoj izraz lica kad ti neki od ovih pojmova zaista sjednu. Evo nevjerojatnog putovanja na koje krećemo zajedno: -[Odgovori na kviz prije lekcije](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +- **Što je programiranje zapravo (i zašto je to najslađa stvar ikad!)** – Otkrit ćemo kako je kod doslovno nevidljiva čarolija koja pokreće sve oko tebe, od onog alarma koji nekako zna da je ponedjeljak ujutro do algoritma koji savršeno kroji tvoje Netflix preporuke +- **Programski jezici i njihove nevjerojatne osobnosti** – Zamislite da ulaziš na zabavu na kojoj svaka osoba ima potpuno drugačije supermoći i načine rješavanja problema. Tako izgleda svijet programskih jezika, i voljet ćeš ih upoznati! +- **Temeljni gradivni blokovi koji stvaraju digitalnu magiju** – Zamislite ovo kao ultimativni LEGO set za kreativnost. Kad shvatiš kako se ti dijelovi uklapaju, shvatit ćeš da doslovno možeš složiti bilo što što ti mašta zamisli +- **Profesionalni alati koji će ti dati osjećaj kao da si dobio čarobni štapić** – Nije pretjerivanje – ovi alati će te zaista natjerati da se osjećaš kao da imaš supermoći, a najbolji dio? To su isti alati koje koriste profesionalci! -## Avantura koju ćemo zajedno proći +> 💡 **Evo u čemu je stvar**: Nemoj ni pomišljati na to da sve danas naučiš napamet! Trenutno želim da osjetiš taj sjaj uzbuđenja zbog mogućnosti. Detalji će se prirodno upamtiti dok vježbamo zajedno – to je pravi način učenja! -Ok, iskreno, jedva čekam da krenemo u istraživanje! Stvarno, volio bih vidjeti tvoje lice kad ti neki od ovih pojmova postanu jasni. Evo nevjerojatnog putovanja koje ćemo zajedno proći: +> Ovaj sat možeš proći i na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -- **Što je zapravo programiranje (i zašto je najkul stvar ikad!)** – Otkrit ćemo kako je kod doslovno nevidljiva magija koja pokreće sve oko tebe, od alarma koji nekako zna da je ponedjeljak ujutro do algoritma koji savršeno odabire tvoje preporuke na Netflixu -- **Programski jezici i njihove nevjerojatne osobnosti** – Zamisli da ulaziš na zabavu gdje svaka osoba ima potpuno različite supermoći i načine rješavanja problema. Takav je svijet programskih jezika, i obožavat ćeš ih upoznati! -- **Temeljni građevni blokovi koji stvaraju digitalnu magiju** – Zamisli ih kao ultimativni kreativni LEGO set. Kad shvatiš kako se ti dijelovi uklapaju, shvatit ćeš da doslovno možeš izgraditi sve što ti mašta zamisli -- **Profesionalni alati koji će te natjerati da se osjećaš kao da si dobio čarobni štapić** – Ne dramatiziram – ovi alati će te stvarno natjerati da se osjećaš kao da imaš supermoći, a najbolji dio? To su isti alati koje koriste profesionalci! +## Pa što točno *jest* programiranje? -> 💡 **Evo što je važno**: Nemoj ni pomisliti da danas moraš sve zapamtiti! Trenutno samo želim da osjetiš uzbuđenje zbog onoga što je moguće. Detalji će se prirodno zalijepiti kako budemo zajedno vježbali – tako se događa pravo učenje! +Ok, uhvatimo se milijun dolara vrijednog pitanja: što je zapravo programiranje? -> Ovu lekciju možeš pratiti na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +Ispričat ću ti priču koja mi je potpuno promijenila pogled na ovo. Prošli tjedan sam pokušavao objasniti mami kako se koristi naš novi pametni daljinski za TV. Uhvatim se kako govorim stvari poput „Pritisni crveni gumb, ali ne onaj veliki crveni, mali crveni s lijeve strane... ne, tvoj drugi lijevi... okej, sad ga drž’ dvije sekunde, ne jednu, ne tri...“ Zvuči poznato? 😅 -## Što je zapravo *programiranje*? +To je programiranje! To je umjetnost davanja izuzetno detaljnih, korak-po-korak uputa nečemu što je vrlo moćno, ali treba da sve bude savršeno razjašnjeno. Osim što niješ mami objašnjavao (koja može pitati „koji crveni gumb?!“), nego računalu (koje radi točno ono što kažeš, čak i ako to nije baš ono što si htio). -Dobro, idemo se pozabaviti pitanjem od milijun dolara: što je zapravo programiranje? +Evo što me je oduševilo kad sam prvi put naučio ovo: računala su zapravo prilično jednostavna u svojoj srži. Doslovno razumiju samo dvije stvari – 1 i 0, što je u osnovi „da“ i „ne“ ili „uključeno“ i „isključeno.“ To je to! Ali ovdje dolazi čarolija – ne moramo govoriti u 1-icama i 0-icama kao u Matrixu. Tu na scenu stupaju **programski jezici**. Oni su kao najbolji prevoditelj na svijetu koji pretvara tvoje sasvim normalne ljudske misli u računalni jezik. -Ispričat ću ti priču koja mi je potpuno promijenila način razmišljanja o tome. Prošli tjedan pokušavao sam objasniti mami kako koristiti daljinski upravljač za naš novi pametni TV. Uhvatim se kako govorim stvari poput "Pritisni crveni gumb, ali ne veliki crveni gumb, mali crveni gumb s lijeve strane... ne, s tvoje lijeve strane... ok, sad ga drži dvije sekunde, ne jednu, ne tri..." Zvuči poznato? 😅 +I evo što mi svakog jutra doslovno izaziva jezu: sve *digitalno* u tvom životu počelo je s nekim kao ti, vjerojatno u pidžami s šalicom kave, tipkajući kod na laptopu. Taj Instagram filter koji te čini besprijekornim? Netko je to kodirao. Preporuka koja te dovela do tvoje nove omiljene pjesme? Netko je izgradio taj algoritam. Aplikacija koja ti pomaže podijeliti račun za večeru s prijateljima? Da, netko je pomislio „ovo je dosadno, sigurno mogu to popraviti“ i... onda je napravio! -To je programiranje! To je umjetnost davanja nevjerojatno detaljnih, korak-po-korak uputa nečemu što je vrlo moćno, ali treba sve savršeno objašnjeno. Osim što umjesto objašnjavanja mami (koja može pitati "koji crveni gumb?!"), objašnjavaš računalu (koje samo radi točno ono što mu kažeš, čak i ako to što si rekao nije baš ono što si mislio). +Kad naučiš programirati, ne samo da stječeš novu vještinu – postaješ dio ove nevjerojatne zajednice rješavatelja problema koji cijeli dan razmišljaju „Što ako mogu napraviti nešto što će nečiji dan učiniti malo boljim?“ Iskreno, postoji li išta cool od toga? -Evo što me oduševilo kad sam prvi put naučio ovo: računala su zapravo prilično jednostavna u svojoj srži. Doslovno razumiju samo dvije stvari – 1 i 0, što je u osnovi samo "da" i "ne" ili "uključeno" i "isključeno." To je to! Ali evo gdje postaje magično – ne moramo govoriti u 1 i 0 kao da smo u Matrixu. Tu dolaze **programski jezici** u pomoć. Oni su kao najbolji prevoditelj na svijetu koji uzima tvoje savršeno normalne ljudske misli i pretvara ih u jezik računala. +✅ **Zabavni zadatak**: Evo nečega super cool što možeš potražiti kad budeš imao slobodnog vremena – tko misliš da je bio prvi računalni programer na svijetu? Dati ću ti nagovještaj: možda nije osoba koju očekuješ! Priča o toj osobi je apsolutno fascinantna i pokazuje da je programiranje uvijek bilo o kreativnom rješavanju problema i razmišljanju izvan okvira. -I evo što me još uvijek oduševljava svako jutro kad se probudim: doslovno *sve* digitalno u tvom životu počelo je s nekim baš poput tebe, vjerojatno sjedeći u pidžami s šalicom kave, tipkajući kod na svom laptopu. Onaj Instagram filter koji te čini savršenim? Netko je to kodirao. Preporuka koja te dovela do tvoje nove omiljene pjesme? Programer je izradio taj algoritam. Aplikacija koja ti pomaže podijeliti račun za večeru s prijateljima? Da, netko je pomislio "ovo je dosadno, kladim se da to mogu riješiti" i onda... uspio! +### 🧠 **Vrijeme za provjeru: Kako se osjećaš?** -Kad naučiš programirati, ne samo da stječeš novu vještinu – postaješ dio ove nevjerojatne zajednice rješavača problema koji provode svoje dane razmišljajući: "Što ako mogu izgraditi nešto što će nekome uljepšati dan?" Iskreno, postoji li išta bolje od toga? +**Uzeći trenutak za razmišljanje:** +- Ima li sada smisla ideja o „davanju uputa računalima“? +- Možeš li smisliti neku svakodnevnu aktivnost koju bi htio automatizirati programiranjem? +- Koja pitanja ti se vrzmaju po glavi o svemu ovome s programiranjem? -✅ **Zanimljiva činjenica**: Evo nečega super zanimljivog što možeš istražiti kad imaš slobodnog vremena – tko misliš da je bio prvi programer na svijetu? Dat ću ti trag: možda nije osoba koju očekuješ! Priča o toj osobi je apsolutno fascinantna i pokazuje da je programiranje oduvijek bilo vezano uz kreativno rješavanje problema i razmišljanje izvan okvira. +> **Sjeti se**: potpuno je normalno ako ti neki pojmovi sada djeluju nejasno. Učenje programiranja je kao učenje novog jezika – treba vremena da tvoj mozak izgradi te neuronske veze. Ti to odlično radiš! -## Programski jezici su poput različitih okusa magije +## Programsko jezici su kao različiti okusi magije -Dobro, ovo će zvučati čudno, ali ostani sa mnom – programski jezici su jako slični različitim vrstama glazbe. Razmisli: imaš jazz, koji je gladak i improvizacijski, rock koji je snažan i direktan, klasičnu glazbu koja je elegantna i strukturirana, i hip-hop koji je kreativan i izražajan. Svaki stil ima svoj ugođaj, svoju zajednicu strastvenih obožavatelja, i svaki je savršen za različita raspoloženja i prilike. +Ok, ovo će možda zvučati čudno, ali drži se sa mnom – programski jezici su kao različite vrste glazbe. Razmisli o tome: imaš jazz, koji je gladak i improvizacijski, rock koji je snažan i jednostavan, klasičnu glazbu koja je elegantna i strukturirana, i hip-hop koji je kreativan i izražajan. Svaki stil ima svoj vibe, svoju zajednicu strastvenih obožavatelja i svaki je savršen za različita raspoloženja i prilike. -Programski jezici funkcioniraju na potpuno isti način! Ne bi koristio isti jezik za izradu zabavne mobilne igre kao što bi koristio za obradu ogromnih količina podataka o klimi, baš kao što ne bi puštao death metal na satu joge (pa, na većini satova joge! 😄). +Programsko jezici rade potpuno isto! Ne bi koristio isti jezik za izradu zabavne mobilne igre kao za obradu ogromne količine klimatskih podataka, isto kao što ne bi svirao death metal na satu joge (dobro, većinom ne! 😄). -Ali evo što me svaki put oduševi kad razmišljam o tome: ti jezici su kao da imaš najstrpljivijeg, najpametnijeg prevoditelja na svijetu koji sjedi odmah pored tebe. Možeš izraziti svoje ideje na način koji je prirodan za ljudski mozak, a oni se brinu o svim nevjerojatno složenim zadacima prevođenja toga u 1 i 0 koje računala zapravo razumiju. To je kao da imaš prijatelja koji savršeno vlada i "ljudskom kreativnošću" i "računalnom logikom" – i nikad se ne umara, nikad ne treba pauzu za kavu i nikad te ne osuđuje što postavljaš isto pitanje dva puta! +Ali ovo me svaki put iznova oduševi kad pomislim na to: ti jezici su kao da kraj tebe sjedne najstrpljiviji, briljantni prevoditelj na svijetu. Možeš izraziti svoje ideje na način koji prirodno vidi tvoj ljudski mozak, a oni obavljaju sav nevjerojatno složen posao prevođenja u 1-ice i 0-ke koje računala zapravo razumiju. Kao da imaš prijatelja koji je savršeno tečan u „ljudskoj kreativnosti“ i „računalnoj logici“ – i nikad se ne umori, nikad ne treba pauzu za kavu i nikad ne sudi ako isto pitanje postaviš dvaput! ### Popularni programski jezici i njihova primjena +```mermaid +mindmap + root((Programski jezici)) + Web razvoj + JavaScript + Čarolija frontenda + Interaktivne web stranice + TypeScript + JavaScript + tipovi + Poslovne aplikacije + Podaci i AI + Python + Znanost o podacima + Strojno učenje + Automatizacija + R + Statistika + Istraživanje + Mobilne aplikacije + Java + Android + Poslovno + Swift + iOS + Apple ekosustav + Kotlin + Moderni Android + Višeplatformski + Sustavi i performanse + C++ + Igre + Kritično za performanse + Rust + Sigurnost memorije + Sustavsko programiranje + Go + Cloud servisi + Skalabilni backend +``` | Jezik | Najbolje za | Zašto je popularan | -|-------|-------------|--------------------| +|----------|----------|------------------| | **JavaScript** | Web razvoj, korisnička sučelja | Radi u preglednicima i pokreće interaktivne web stranice | -| **Python** | Znanost o podacima, automatizacija, AI | Jednostavan za čitanje i učenje, moćne biblioteke | +| **Python** | Znanost o podacima, automatizacija, umjetna inteligencija | Jednostavan za čitanje i učenje, moćne biblioteke | | **Java** | Poslovne aplikacije, Android aplikacije | Neovisan o platformi, robustan za velike sustave | -| **C#** | Windows aplikacije, razvoj igara | Snažna podrška Microsoft ekosustava | -| **Go** | Cloud usluge, backend sustavi | Brz, jednostavan, dizajniran za modernu računalnu obradu | +| **C#** | Windows aplikacije, razvoj igara | Snažna podrška u Microsoftovom ekosustavu | +| **Go** | Cloud usluge, backend sustavi | Brz, jednostavan, dizajniran za moderni računalni svijet | -### Visokorazinski vs. niskorazinski jezici +### Visoko-nivovski vs. nisko-nivovski jezici -Dobro, ovo je iskreno koncept koji mi je slomio mozak kad sam prvi put počeo učiti, pa ću podijeliti analogiju koja mi je konačno pomogla da shvatim – i stvarno se nadam da će pomoći i tebi! +Ok, iskreno, ovo je bio pojam koji mi je slomio mozak kad sam počinjao učiti, pa ću ti ispričati analogiju koja mi je napokon sve osvijetlila – i stvarno se nadam da će pomoći i tebi! -Zamisli da posjećuješ zemlju čiji jezik ne govoriš, a očajnički trebaš pronaći najbliži WC (svi smo to prošli, zar ne? 😅): +Zamisli da putuješ u zemlju čiji jezik ne znaš i očajno tražiš najbliži WC (svi smo prošli kroz to, zar ne? 😅): -- **Niskorazinsko programiranje** je kao da tako dobro naučiš lokalni dijalekt da možeš razgovarati s bakom koja prodaje voće na uglu koristeći kulturne reference, lokalni sleng i unutarnje šale koje samo netko tko je tamo odrastao može razumjeti. Super impresivno i nevjerojatno učinkovito... ako slučajno tečno govoriš! Ali prilično je neodoljivo kad samo pokušavaš pronaći WC. +- **Nisko-nivovsko programiranje** je kao da tako dobro naučiš lokalni dijalekt da možeš razgovarati s bakom koja prodaje voće na uglu koristeći kulturne reference, lokalni žargon i interne šale koje razumije samo netko tko je tamo odrastao. Super impresivno i nevjerojatno učinkovito... ako slučajno tečno govoriš! Ali prilično zastrašujuće ako samo pokušavaš pronaći WC. -- **Visokorazinsko programiranje** je kao da imaš tog nevjerojatnog lokalnog prijatelja koji te jednostavno razumije. Možeš reći "Stvarno trebam pronaći WC" na običnom jeziku, a oni se pobrinu za sve kulturne prijevode i daju ti upute na način koji savršeno ima smisla za tvoj mozak koji nije lokalni. +- **Visoko-nivovsko programiranje** je kao da imaš onog divnog lokalnog prijatelja koji te jednostavno razumije. Možeš reći „Stvarno mi treba WC“ na čistom engleskom, a on prevede sve kulturne nijanse i da ti upute koje tvom nemjestnom mozgu savršeno sjede. U programerskim terminima: -- **Niskorazinski jezici** (poput Assemblyja ili C-a) omogućuju ti da vodiš nevjerojatno detaljne razgovore s računalnim hardverom, ali moraš razmišljati kao stroj, što je... pa, recimo da je to prilično velik mentalni zaokret! -- **Visokorazinski jezici** (poput JavaScripta, Pythona ili C#) omogućuju ti da razmišljaš kao čovjek dok oni rješavaju sve tehničke detalje u pozadini. Osim toga, imaju nevjerojatno gostoljubive zajednice pune ljudi koji se sjećaju kako je bilo biti početnik i stvarno žele pomoći! - -Pogodi koje ću ti predložiti da započneš? 😉 Visokorazinski jezici su kao pomoćni kotači koje nikada zapravo ne želiš skinuti jer čine cijelo iskustvo toliko ugodnijim! - -### Dopusti mi da ti pokažem zašto su visokorazinski jezici toliko prijateljski +- **Nisko-nivovski jezici** (kao Assembly ili C) ti dopuštaju da vodiš izuzetno detaljne razgovore s stvarnim hardverom računala, ali moraš razmišljati kao stroj, što je... pa, recimo da je to prilično velik mentalni skok! +- **Visoko-nivovski jezici** (kao JavaScript, Python ili C#) puštaju te da razmišljaš kao čovjek dok oni rade sav „strojni govor“ u pozadini. I uz to imaju ove nevjerojatno gostoljubive zajednice ljudi koji se sjećaju kako je bilo biti početnik i doista žele pomoći! + +Pogodi s kojim ću ti savjetovati da počneš? 😉 Visoko-nivovski jezici su kao pomoćne kotačiće koje zapravo nikad nećeš htjeti skinuti jer iskustvo čine toliko ljepšim! + +```mermaid +flowchart TB + A["👤 Ljudska misao:
'Želim izračunati Fibonačijeve brojeve'"] --> B{Izaberi razinu jezika} + + B -->|Visoka razina| C["🌟 JavaScript/Python
Jednostavno za čitanje i pisanje"] + B -->|Niska razina| D["⚙️ Assembly/C
Izravna kontrola hardvera"] + + C --> E["📝 Napiši: fibonacci(10)"] + D --> F["📝 Napiši: mov r0,#00
sub r0,r0,#01"] + + E --> G["🤖 Računalno razumijevanje:
Prijevodnik rješava složenost"] + F --> G + + G --> H["💻 Isti rezultat:
0, 1, 1, 2, 3, 5, 8, 13..."] + + style C fill:#e1f5fe + style D fill:#fff3e0 + style H fill:#e8f5e8 +``` +### Pokažem ti zašto su visoko-nivovski jezici toliko prijateljski -Dobro, pokazat ću ti nešto što savršeno demonstrira zašto sam se zaljubio u visokorazinske jezike, ali prvo – trebaš mi nešto obećati. Kad vidiš prvi primjer koda, nemoj paničariti! Trebao bi izgledati zastrašujuće. To je upravo poanta koju želim pokazati! +Ok, pokazat ću ti nešto što savršeno pokazuje zašto sam se zaljubio u visoko-nivovske jezike, ali prvo – obećaj mi jednu stvar. Kad vidiš prvi primjer koda, nemoj paničariti! Trebalo bi izgledati zastrašujuće. Upravo to i pokazujem! -Pogledat ćemo potpuno isti zadatak napisan na dva potpuno različita načina. Oba stvaraju ono što se zove Fibonacci niz – to je prekrasan matematički uzorak gdje je svaki broj zbroj prethodna dva: 0, 1, 1, 2, 3, 5, 8, 13... (Zanimljivost: ovaj uzorak doslovno možeš pronaći svugdje u prirodi – spirale sjemenki suncokreta, uzorci češera, čak i način na koji se galaksije formiraju!) +Pogledat ćemo isti zadatak napisan u dva potpuno različita stila. Oba stvaraju tzv. Fibonačijev niz – to je prekrasan matematički obrazac gdje je svaki broj zbroj prethodna dva: 0, 1, 1, 2, 3, 5, 8, 13... (Zabavna činjenica: ovaj obrazac naći ćeš doslovno svugdje u prirodi – spirale sjemenki suncokreta, obrasci češera, čak i način na koji nastaju galaksije!) -Spreman vidjeti razliku? Idemo! +Spreman za razliku? Idemo! -**Visokorazinski jezik (JavaScript) – Prijateljski za ljude:** +**Visoko-nivovski jezik (JavaScript) – prijateljski ljudima:** ```javascript -// Step 1: Basic Fibonacci setup +// Korak 1: Osnovna postavka Fibonaccija const fibonacciCount = 10; let current = 0; let next = 1; @@ -109,31 +193,31 @@ console.log('Fibonacci sequence:'); ``` **Evo što ovaj kod radi:** -- **Deklarira** konstantu za određivanje koliko Fibonacci brojeva želimo generirati +- **Deklarira** konstantu koja određuje koliko Fibonacci brojeva želimo generirati - **Inicijalizira** dvije varijable za praćenje trenutnog i sljedećeg broja u nizu -- **Postavlja** početne vrijednosti (0 i 1) koje definiraju Fibonacci uzorak -- **Prikazuje** poruku zaglavlja za identifikaciju našeg izlaza +- **Postavlja** početne vrijednosti (0 i 1) koje definiraju Fibonačijev obrazac +- **Prikazuje** naslovnu poruku da označimo naš izlaz ```javascript -// Step 2: Generate the sequence with a loop +// Korak 2: Generirajte niz pomoću petlje for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Calculate next number in sequence + // Izračunajte sljedeći broj u nizu const sum = current + next; current = next; next = sum; } ``` -**Razlaganje onoga što se ovdje događa:** -- **Petlja** kroz svaku poziciju u našem nizu koristeći `for` petlju -- **Prikazuje** svaki broj s njegovom pozicijom koristeći formatiranje predloška -- **Izračunava** sljedeći Fibonacci broj zbrajanjem trenutnih i sljedećih vrijednosti -- **Ažurira** naše varijable za praćenje kako bi prešli na sljedeću iteraciju +**Objašnjenje što se ovdje događa:** +- **Petlja** kroz svaki položaj u nizu koristeći `for` petlju +- **Prikazuje** svaki broj s njegovom pozicijom koristeći formatiranje predložene niske +- **Izračunava** sljedeći Fibonacci broj zbrajajući tekuće i sljedeće vrijednosti +- **Ažurira** varijable za praćenje kako bi prešao na sljedeću iteraciju ```javascript -// Step 3: Modern functional approach +// Korak 3: Moderan funkcionalni pristup const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -144,18 +228,18 @@ const generateFibonacci = (count) => { return sequence; }; -// Usage example +// Primjer korištenja const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**U gore navedenom, mi smo:** +**U gornjem primjeru smo:** - **Stvorili** funkciju koja se može ponovno koristiti koristeći modernu sintaksu streličaste funkcije -- **Izgradili** niz za pohranu cijelog niza umjesto prikazivanja jednog po jednog -- **Koristili** indeksiranje niza za izračunavanje svakog novog broja iz prethodnih vrijednosti -- **Vratili** cijeli niz za fleksibilnu upotrebu u drugim dijelovima našeg programa +- **Izgradili** niz za pohranu cijelog niza umjesto da prikazujemo broj po broj +- **Koristili** indeksiranje niza kako bismo izračunali svaki novi broj iz prethodnih +- **Vratili** cijeli niz za fleksibilnu uporabu u drugim dijelovima programa -**Niskorazinski jezik (ARM Assembly) – Prijateljski za računalo:** +**Nisko-nivovski jezik (ARM Assembly) – prilagođen računalu:** ```assembly area ascen,code,readonly @@ -182,42 +266,43 @@ back add r0,r1 end ``` -Primijeti kako verzija u JavaScriptu gotovo čita kao upute na engleskom jeziku, dok verzija u Assemblyju koristi zagonetne naredbe koje izravno upravljaju procesorom računala. Obje obavljaju potpuno isti zadatak, ali visokorazinski jezik je mnogo lakši za razumijevanje, pisanje i održavanje. +Primijeti kako JavaScript verzija čita gotovo kao upute na engleskom, dok verzija u Assemblyju koristi kriptične naredbe koje izravno kontroliraju procesor računala. Oba ostvaruju isti zadatak, ali je visoko-nivovski jezik puno lakši za ljude za razumjeti, pisati i održavati. **Ključne razlike koje ćeš primijetiti:** -- **Čitljivost**: JavaScript koristi opisne nazive poput `fibonacciCount`, dok Assembly koristi zagonetne oznake poput `r0`, `r1` -- **Komentari**: Visokorazinski jezici potiču objašnjavajuće komentare koji čine kod samodokumentirajućim -- **Struktura**: Logički tok JavaScripta odgovara načinu na koji ljudi razmišljaju o problemima korak po korak -- **Održavanje**: Ažuriranje verzije u JavaScriptu za različite zahtjeve je jednostavno i jasno -✅ **O Fibonacci nizu**: Ovaj apsolutno prekrasan brojčani uzorak (gdje je svaki broj zbroj prethodna dva: 0, 1, 1, 2, 3, 5, 8...) pojavljuje se doslovno *svugdje* u prirodi! Možete ga pronaći u spiralama suncokreta, uzorcima na češerima, zakrivljenosti školjki nautilusa, pa čak i u načinu na koji grane drveća rastu. Nevjerojatno je kako nam matematika i kodiranje mogu pomoći da razumijemo i ponovno stvorimo uzorke koje priroda koristi za stvaranje ljepote! +- **Čitljivost**: JavaScript koristi opisne nazive poput `fibonacciCount` dok Assembly koristi kriptične oznake poput `r0`, `r1` +- **Komentari**: Visoko razine jezici potiču objašnjavajuće komentare koji kod čine samodokumentirajućim +- **Struktura**: Logički tijek JavaScripta odgovara načinu na koji ljudi razmišljaju o problemima korak po korak +- **Održavanje**: Ažuriranje JavaScript verzije za različite zahtjeve je jednostavno i jasno +✅ **O Fibonacci nizu**: Ovaj apsolutno prekrasan brojčani uzorak (gdje je svaki broj zbroj dva prethodna: 0, 1, 1, 2, 3, 5, 8...) pojavljue se doslovno *svugdje* u prirodi! Pronaći ćete ga u spiralama suncokreta, uzorcima češera, načinu na koji se ljuske nautilusa uvijaju, pa čak i u načinu rasta grana na drveću. Prilično je zadivljujuće kako matematika i kod mogu pomoći u razumijevanju i rekreiranju uzoraka kojima priroda stvara ljepotu! -## Građevni blokovi koji stvaraju čaroliju -Dobro, sada kada ste vidjeli kako izgledaju programski jezici u praksi, razložimo osnovne dijelove koji čine doslovno svaki program ikada napisan. Zamislite ih kao osnovne sastojke vašeg omiljenog recepta – kada shvatite što svaki od njih radi, moći ćete čitati i pisati kod u gotovo svakom jeziku! +## Gradivni Blokovi Koji Čine Čaroliju Mogućom -To je pomalo kao učenje gramatike programiranja. Sjećate se iz škole kada ste učili o imenima, glagolima i kako sastaviti rečenice? Programiranje ima svoju verziju gramatike, i iskreno, puno je logičnija i opraštajuća nego što je to ikada bila engleska gramatika! 😄 +Dobro, sada kada ste vidjeli kako programski jezici izgledaju u praksi, razložimo osnovne dijelove koji čine doslovno svaki ikada napisan program. Zamislite ih kao ključne sastojke u vašem omiljenom receptu – jednom kad shvatite što svaki od njih radi, moći ćete čitati i pisati kod u gotovo bilo kojem jeziku! -### Izjave: Korak-po-korak upute +Ovo je nešto poput učenja gramatike programiranja. Sjećate se iz škole kad ste učili o imenima, glagolima i kako sastavljati rečenice? Programiranje ima vlastitu verziju gramatike, i iskreno, to je puno logičnije i opraštajuće nego što je ikada bila engleska gramatika! 😄 -Počnimo s **izjavama** – one su poput pojedinačnih rečenica u razgovoru s vašim računalom. Svaka izjava govori računalu da učini jednu specifičnu stvar, poput davanja uputa: "Skreni lijevo ovdje," "Zaustavi se na crvenom svjetlu," "Parkiraj na tom mjestu." +### Izjave: Uputstva Korak Po Korak + +Počnimo s **izjavama** – one su poput pojedinačnih rečenica u razgovoru s vašim računalom. Svaka izjava govori računalu da učini jednu konkretnu stvar, kao da dajete upute: "Skreni lijevo ovdje," "Zaustavi se na crvenom svjetlu," "Parkiraj na tom mjestu." Ono što volim kod izjava je koliko su obično čitljive. Pogledajte ovo: ```javascript -// Basic statements that perform single actions +// Osnovne naredbe koje izvršavaju pojedinačne radnje const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` -**Što ovaj kod radi:** -- **Deklarira** konstantnu varijablu za pohranu korisničkog imena -- **Prikazuje** poruku dobrodošlice na konzoli +**Evo što ovaj kod radi:** +- **Deklarira** konstantnu varijablu za pohranu imena korisnika +- **Prikazuje** poruku pozdrava na konzolnom izlazu - **Izračunava** i pohranjuje rezultat matematičke operacije ```javascript -// Statements that interact with web pages +// Izjave koje komuniciraju s web stranicama document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` @@ -226,18 +311,18 @@ document.body.style.backgroundColor = "lightblue"; - **Mijenja** naslov web stranice koji se pojavljuje na kartici preglednika - **Mijenja** boju pozadine cijelog tijela stranice -### Varijable: Memorijski sustav vašeg programa +### Varijable: Memorijski Sustav Vašeg Programa -Dobro, **varijable** su iskreno jedan od mojih apsolutno najdražih koncepata za podučavanje jer su toliko slične stvarima koje već svakodnevno koristite! +U redu, **varijable** su iskreno jedan od mojih omiljenih koncepata za podučavanje jer su toliko slične stvarima koje već koristite svaki dan! -Razmislite na trenutak o popisu kontakata na vašem telefonu. Ne pamtite brojeve svih – umjesto toga, spremate "Mama," "Najbolji prijatelj" ili "Pizzeria koja dostavlja do 2 ujutro" i dopuštate telefonu da zapamti stvarne brojeve. Varijable rade potpuno isto! One su poput označenih spremnika u kojima vaš program može pohraniti informacije i kasnije ih dohvatiti koristeći ime koje ima smisla. +Razmislite o svojoj listi kontakata na telefonu na trenutak. Ne pamtite telefonske brojeve svih – umjesto toga, spremite "Mama," "Najbolji prijatelj," ili "Pizzerija koja dostavlja do 2 ujutro" i vaš telefon zapamti stvarne brojeve. Varijable funkcioniraju upravo tako! One su poput označenih spremnika gdje vaš program može pohraniti informacije i kasnije ih dohvatiti koristeći ime koje zapravo ima smisla. -Evo što je stvarno cool: varijable se mogu mijenjati dok vaš program radi (otuda naziv "varijabla" – vidite li što su napravili?). Baš kao što biste mogli ažurirati kontakt za pizzeriju kada otkrijete još bolju, varijable se mogu ažurirati dok vaš program uči nove informacije ili dok se situacije mijenjaju! +Evo što je stvarno cool: varijable se mogu mijenjati dok vaš program radi (otuda i ime "varijabla" – vidite što su napravili?). Baš kao što biste mogli ažurirati kontakt pizzerije kad otkrijete nešto još bolje, varijable se mogu mijenjati kako vaš program uči nove informacije ili kako se situacije mijenjaju! -Dopustite mi da vam pokažem koliko ovo može biti jednostavno: +Evo kako ovo može biti lijepo jednostavno: ```javascript -// Step 1: Creating basic variables +// Korak 1: Kreiranje osnovnih varijabli const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; @@ -245,13 +330,13 @@ let isRaining = false; ``` **Razumijevanje ovih koncepata:** -- **Pohranite** nepromjenjive vrijednosti u `const` varijable (poput imena stranice) +- **Pohranjujte** nepromjenjive vrijednosti u `const` varijable (npr. ime stranice) - **Koristite** `let` za vrijednosti koje se mogu mijenjati tijekom programa -- **Dodijelite** različite tipove podataka: stringove (tekst), brojeve i booleane (true/false) -- **Odaberite** opisna imena koja objašnjavaju što svaka varijabla sadrži +- **Dodjeljujte** različite tipove podataka: stringove (tekst), brojeve i boolean (true/false) +- **Birajte** opisna imena koja jasno objašnjavaju što svaka varijabla sadrži ```javascript -// Step 2: Working with objects to group related data +// Korak 2: Rad s objektima za grupiranje povezanih podataka const weatherData = { location: "San Francisco", humidity: 65, @@ -259,50 +344,50 @@ const weatherData = { }; ``` -**U gore navedenom, učinili smo sljedeće:** -- **Stvorili** objekt za grupiranje povezanih informacija o vremenu -- **Organizirali** više dijelova podataka pod jednim imenom varijable -- **Koristili** parove ključ-vrijednost za jasno označavanje svakog dijela informacija +**U gornjem primjeru smo:** +- **Kreirali** objekt za grupiranje povezanih informacijama o vremenu +- **Organizirali** više podataka pod jednim imenom varijable +- **Koristili** parove ključ-vrijednost za jasno označavanje svake informacije ```javascript -// Step 3: Using and updating variables +// Korak 3: Korištenje i ažuriranje varijabli console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// Ažuriranje promjenjivih varijabli currentWeather = "cloudy"; temperature = 68; ``` **Razumimo svaki dio:** -- **Prikazujemo** informacije koristeći template literale sa sintaksom `${}` -- **Pristupamo** svojstvima objekta koristeći točku (`weatherData.windSpeed`) -- **Ažuriramo** varijable deklarirane s `let` kako bi odražavale promjenjive uvjete -- **Kombiniramo** više varijabli za stvaranje smislenih poruka +- **Prikazuje** informacije koristeći template literale s `${}` sintaksom +- **Pristupa** svojstvima objekta koristeći točkastu notaciju (`weatherData.windSpeed`) +- **Ažurira** varijable deklarirane s `let` za odražavanje promjenjivih uvjeta +- **Kombinira** više varijabli za stvaranje smislenih poruka ```javascript -// Step 4: Modern destructuring for cleaner code +// Korak 4: Moderna destrukturacija za čišći kod const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` **Što trebate znati:** -- **Izvucite** specifična svojstva iz objekata koristeći destrukturiranje -- **Stvorite** nove varijable automatski s istim imenima kao ključevi objekta -- **Pojednostavite** kod izbjegavanjem ponavljajuće točke +- **Izvlači** specifična svojstva iz objekata koristeći destrukturiranje +- **Kreira** nove varijable automatski s istim imenima kao ključevi objekta +- **Pojednostavljuje** kod izbjegavajući ponavljanje točkaste notacije -### Tok kontrole: Naučite svoj program da razmišlja +### Kontrolni Tijek: Podučavanje Vašeg Programa da Razmišlja -Dobro, ovdje programiranje postaje apsolutno nevjerojatno! **Tok kontrole** je u osnovi učenje vašeg programa kako donositi pametne odluke, baš kao što to radite svaki dan, a da o tome ni ne razmišljate. +U redu, ovo je mjesto gdje programiranje postaje potpuno nevjerojatno! **Kontrolni tijek** je u osnovi podučavanje vašeg programa kako donositi pametne odluke, baš kao što to vi radite svaki dan, a da toga uopće niste svjesni. -Zamislite ovo: jutros ste vjerojatno prošli kroz nešto poput "Ako pada kiša, uzet ću kišobran. Ako je hladno, obući ću jaknu. Ako kasnim, preskočit ću doručak i uzeti kavu putem." Vaš mozak prirodno slijedi ovu logiku "ako-onda" desetke puta svaki dan! +Zamislite ovo: jutros ste vjerojatno prošli kroz nešto poput "Ako pada kiša, uzet ću kišobran. Ako je hladno, obući ću jaknu. Ako kasnim, preskočit ću doručak i uzet kavu usput." Vaš mozak prirodno slijedi ovu if-then logiku desetine puta dnevno! -To je ono što programe čini inteligentnima i živima, umjesto da samo slijede dosadan, predvidljiv scenarij. Oni zapravo mogu pogledati situaciju, procijeniti što se događa i reagirati na odgovarajući način. To je kao da svom programu dajete mozak koji se može prilagoditi i donositi odluke! +To je ono što čini programe inteligentnima i živima, umjesto da slijede samo dosadan, predvidljiv scenarij. Oni zapravo mogu pogledati situaciju, procijeniti što se događa i reagirati primjereno. To je kao da svom programu date mozak koji može prilagoditi i donositi odluke! -Želite vidjeti kako ovo prekrasno funkcionira? Dopustite mi da vam pokažem: +Želite li vidjeti kako ovo sjajno funkcionira? Dopustite da vam pokažem: ```javascript -// Step 1: Basic conditional logic +// Korak 1: Osnovna uvjetna logika const userAge = 17; if (userAge >= 18) { @@ -313,14 +398,14 @@ if (userAge >= 18) { } ``` -**Što ovaj kod radi:** -- **Provjerava** ispunjava li korisnikovu dob zahtjev za glasanje -- **Izvršava** različite blokove koda na temelju rezultata uvjeta -- **Izračunava** i prikazuje koliko dugo do ispunjenja uvjeta za glasanje ako je mlađi od 18 godina -- **Pruža** specifične, korisne povratne informacije za svaki scenarij +**Evo što ovaj kod radi:** +- **Provjerava** zadovoljava li korisnik dob za glasanje +- **Izvršava** različite blokove koda ovisno o rezultatu uvjeta +- **Izračunava** i prikazuje koliko još treba do postanka podobnim za glasanje ako je korisnik mlađi od 18 +- **Pruža** specifične i korisne povratne informacije za svaku situaciju ```javascript -// Step 2: Multiple conditions with logical operators +// Korak 2: Više uvjeta s logičkim operatorima const userAge = 17; const hasPermission = true; @@ -333,25 +418,25 @@ if (userAge >= 18 && hasPermission) { } ``` -**Razlaganje onoga što se ovdje događa:** -- **Kombinira** više uvjeta koristeći operator `&&` (i) +**Rasčlanjivanje onoga što se ovdje događa:** +- **Kombinira** više uvjeta koristeći `&&` (i) operator - **Stvara** hijerarhiju uvjeta koristeći `else if` za više scenarija -- **Rješava** sve moguće slučajeve s konačnom `else` izjavom -- **Pruža** jasne, korisne povratne informacije za svaki različiti scenarij +- **Rješava** sve moguće slučajeve s konačnim `else` blokom +- **Pruža** jasne, konkretne povratne informacije za različite situacije ```javascript -// Step 3: Concise conditional with ternary operator +// Korak 3: Sažeti uvjet s ternarnim operatorom const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Što trebate zapamtiti:** +**Što morate zapamtiti:** - **Koristite** ternarni operator (`? :`) za jednostavne uvjete s dvije opcije -- **Napišite** uvjet prvo, zatim `?`, zatim rezultat za true, zatim `:`, zatim rezultat za false -- **Primijenite** ovaj obrazac kada trebate dodijeliti vrijednosti na temelju uvjeta +- **Napišite** uvjet prvo, zatim `?`, zatim rezultat za true, pa `:`, zatim rezultat za false +- **Primjenjujte** ovaj obrazac kad trebate dodijeliti vrijednosti prema uvjetima ```javascript -// Step 4: Handling multiple specific cases +// Korak 4: Obrada više specifičnih slučajeva const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -371,199 +456,237 @@ switch (dayOfWeek) { } ``` -**Ovaj kod postiže sljedeće:** +**Ovaj kod ostvaruje slijedeće:** - **Uspoređuje** vrijednost varijable s više specifičnih slučajeva -- **Grupira** slične slučajeve zajedno (radni dani naspram vikenda) -- **Izvršava** odgovarajući blok koda kada se pronađe podudaranje -- **Uključuje** `default` slučaj za rukovanje neočekivanim vrijednostima -- **Koristi** `break` izjave kako bi spriječio nastavak koda na sljedeći slučaj - -> 💡 **Analogija iz stvarnog života**: Zamislite tok kontrole kao da imate najstrpljiviji GPS koji vam daje upute. Mogao bi reći "Ako je gužva na glavnoj ulici, idite autocestom. Ako je gradilište blokiralo autocestu, pokušajte slikovitu rutu." Programi koriste potpuno istu vrstu logike uvjeta kako bi inteligentno reagirali na različite situacije i uvijek korisnicima pružili najbolje moguće iskustvo. - -✅ **Što slijedi**: Imat ćemo apsolutno fantastično vrijeme dublje istražujući ove koncepte dok nastavljamo ovo nevjerojatno putovanje zajedno! Trenutno se samo usredotočite na osjećaj uzbuđenja zbog svih nevjerojatnih mogućnosti koje su pred vama. Specifične vještine i tehnike prirodno će se usvojiti dok zajedno vježbamo – obećavam da će ovo biti puno zabavnije nego što možda očekujete! - - -## Alati zanata - -Dobro, ovo je iskreno trenutak kada postajem toliko uzbuđen da se jedva mogu suzdržati! 🚀 Upravo ćemo razgovarati o nevjerojatnim alatima koji će vas natjerati da se osjećate kao da ste upravo dobili ključeve digitalnog svemirskog broda. - -Znate kako kuhar ima one savršeno uravnotežene noževe koji se osjećaju kao produžetak njihovih ruku? Ili kako glazbenik ima onu jednu gitaru koja kao da pjeva čim je dotakne? Pa, programeri imaju svoju verziju tih čarobnih alata, i evo što će vas apsolutno oduševiti – većina njih je potpuno besplatna! - -Praktički poskakujem na stolici razmišljajući o tome da ovo podijelim s vama jer su potpuno revolucionirali način na koji gradimo softver. Govorimo o AI-pokretanim asistentima za kodiranje koji mogu pomoći u pisanju vašeg koda (ne šalim se!), oblačnim okruženjima gdje možete graditi cijele aplikacije doslovno bilo gdje s Wi-Fi-jem, i alatima za otklanjanje grešaka toliko sofisticiranim da su poput rendgenskog vida za vaše programe. - -I evo dijela koji mi još uvijek izaziva trnce: ovo nisu "početnički alati" koje ćete prerasti. Ovo su točno isti profesionalni alati koje programeri u Googleu, Netflixu i onom indie studiju aplikacija koji volite koriste upravo u ovom trenutku. Osjećat ćete se kao pravi profesionalac koristeći ih! - - -### Uređivači koda i IDE-ovi: Vaši novi digitalni najbolji prijatelji +- **Grupira** slične slučajeve (radni dani vs. vikendi) +- **Izvršava** odgovarajući blok koda kad nađe podudaranje +- **Uključuje** `default` slučaj za neočekivane vrijednosti +- **Koristi** `break` izjave da spriječi nastavak izvođenja sljedećeg slučaja + +> 💡 **Analogija iz stvarnog svijeta**: Zamislite kontrolni tijek poput najstrpljivijeg GPS-a koji vam daje upute. Možda kaže "Ako ima gužve na Glavnoj cesti, uzmi autocestu. Ako je konstrukcija blokirala autocestu, pokušaj slikoviti put." Programi koriste istu vrstu uvjetne logike da bi inteligentno reagirali na različite situacije i uvijek pružili korisniku najbolje moguće iskustvo. + +### 🎯 **Provjera Koncepta: Majstorija Gradivnih Blokova** + +**Pogledajmo kako stojite s osnovama:** +- Možete li vlastitim riječima objasniti razliku između varijable i izjave? +- Smislite stvarni scenarij u kojem biste koristili if-then odluku (poput primjera glasanja) +- Koja vas je stvar o logici programiranja iznenadila? + +**Brzi poticaj samopouzdanja:** +```mermaid +flowchart LR + A["📝 Izjave
(Upute)"] --> B["📦 Varijable
(Pohrana)"] --> C["🔀 Kontrola toka
(Odluke)"] --> D["🎉 Radni program!"] + + style A fill:#ffeb3b + style B fill:#4caf50 + style C fill:#2196f3 + style D fill:#ff4081 +``` +✅ **Što slijedi**: Imat ćemo pravo veselje zaroniti dublje u ove koncepte dok nastavljamo ovaj nevjerojatan put zajedno! Sada se samo usredotočite na to da osjetite uzbuđenje zbog svih sjajnih mogućnosti koje su pred vama. Specifične vještine i tehnike će se prirodno usaditi kako budemo zajedno vježbali – obećavam da će ovo biti puno zabavnije nego što možda očekujete! + +## Alati Struke + +U redu, iskreno, ovo je mjesto gdje se toliko uzbudim da se jedva mogu suzdržati! 🚀 Upravo ćemo govoriti o nevjerojatnim alatima koji će vam dati osjećaj kao da ste upravo dobili ključeve digitalnog svemirskog broda. + +Znate kako kuhar ima savršeno uravnotežene noževe koji mu djeluju kao produžetak ruku? Ili kako glazbenik ima onu gitaru koja kao da zapjeva u trenutku kad je dotakne? Pa, programeri imaju vlastitu verziju tih čarobnih alata, i evo što će vam apsolutno iznenaditi – većina njih je potpuno besplatna! + +Skoro se micam u stolici dok razmišljam o tome da vam ovo podijelim jer su potpuno revolucionirali način na koji pravimo softver. Govorimo o AI-pokretanim asistentima za kodiranje koji vam mogu pomoći napisati kod (nisam se šalio!), cloud okružjima gdje možete raditi čitave aplikacije doslovno od bilo kuda s Wi-Fi mrežom, i alatima za otklanjanje pogrešaka toliki sofisticiranim da ih možete usporediti s rendgenskim vidom za vaše programe. + +I evo dijela koji me i dalje oduševi: ovo nisu "alati za početnike" koje ćete prerasti. Ovo su točno isti profesionalni alati koje developeri u Googleu, Netflixu i u onom indie studiju aplikacija kojeg volite koriste baš u ovom trenutku. Osjećat ćete se kao pravi profesionalac koristeći ih! + +```mermaid +graph TD + A["💡 Vaša Ideja"] --> B["⌨️ Uređivač Koda
(VS Code)"] + B --> C["🌐 Alati za razvoj u pregledniku
(Testiranje i ispravljanje pogrešaka)"] + C --> D["⚡ Naredbeni redak
(Automatizacija i alati)"] + D --> E["📚 Dokumentacija
(Učenje i referenca)"] + E --> F["🚀 Izvrsna web aplikacija!"] + + B -.-> G["🤖 AI Asistent
(GitHub Copilot)"] + C -.-> H["📱 Testiranje uređaja
(Prilagodljiv dizajn)"] + D -.-> I["📦 Upravitelji paketa
(npm, yarn)"] + E -.-> J["👥 Zajednica
(Stack Overflow)"] + + style A fill:#fff59d + style F fill:#c8e6c9 + style G fill:#e1f5fe + style H fill:#f3e5f5 + style I fill:#ffccbc + style J fill:#e8eaf6 +``` +### Uređivači Koda i IDE-i: Vaši Novi Digitalni Najbolji Prijatelji -Razgovarajmo o uređivačima koda – oni će vam ozbiljno postati nova omiljena mjesta za druženje! Zamislite ih kao svoje osobno svetište za kodiranje gdje ćete provoditi većinu svog vremena izrađujući i usavršavajući svoje digitalne kreacije. +Razgovarajmo o uređivačima koda – oni su ozbiljno na putu da postanu vaša nova omiljena mjesta za provoditi vrijeme! Zamislite ih kao svoje osobno svetište kodiranja gdje ćete većinu vremena provoditi stvarajući i usavršavajući svoje digitalne kreacije. -Ali evo što je apsolutno magično kod modernih uređivača: oni nisu samo fancy uređivači teksta. Oni su poput najbriljantnijeg, najpodržavajućeg mentora za kodiranje koji sjedi odmah pored vas 24/7. Hvataju vaše tipografske pogreške prije nego što ih uopće primijetite, predlažu poboljšanja koja vas čine genijem, pomažu vam razumjeti što svaki dio koda radi, a neki od njih čak mogu predvidjeti što ćete napisati i ponuditi da dovrše vaše misli! +Ali evo što je apsolutno čarobno kod modernih uređivača: oni nisu samo sjajni uređivači teksta. Oni su kao da imate najsjajnijeg, najpodržavajućeg mentora za kodiranje koji sjedi pored vas 24/7. Uhvatit će vam tipfelere prije nego ih i primijetite, predložiti poboljšanja koja će vas učiniti genijem, pomoći vam da razumijete što svaki dio koda radi, a neki od njih mogu čak i predvidjeti što ćete napisati i ponuditi da dovrše vaše misli! -Sjećam se kad sam prvi put otkrio automatsko dovršavanje – doslovno sam se osjećao kao da živim u budućnosti. Počnete nešto tipkati, a vaš uređivač kaže: "Hej, jesi li mislio na ovu funkciju koja radi točno ono što ti treba?" To je kao da imate čitača misli kao svog prijatelja za kodiranje! +Sjećam se kad sam prvi put otkrio automatsko dovršavanje – doslovno sam se osjećao kao da živim u budućnosti. Počnete tipkati nešto, a uređivač kaže "Hej, jesi li razmišljao o ovoj funkciji koja radi točno ono što trebaš?" Kao da imate čitača misli kao prijatelja za kodiranje! -**Što čini ove uređivače tako nevjerojatnima?** +**Što ove uređivače čini tako nevjerojatnima?** -Moderni uređivači koda nude impresivan niz značajki dizajniranih za povećanje vaše produktivnosti: +Moderni uređivači koda nude impresivan niz značajki koje vam povećavaju produktivnost: -| Značajka | Što radi | Zašto pomaže | -|----------|----------|--------------| -| **Isticanje sintakse** | Boji različite dijelove vašeg koda | Olakšava čitanje koda i pronalaženje grešaka | -| **Automatsko dovršavanje** | Predlaže kod dok tipkate | Ubrzava kodiranje i smanjuje tipografske pogreške | -| **Alati za otklanjanje grešaka** | Pomažu vam pronaći i popraviti greške | Štedi sate vremena za rješavanje problema | -| **Ekstenzije** | Dodaju specijalizirane značajke | Prilagodite svoj uređivač za bilo koju tehnologiju | -| **AI asistenti** | Predlažu kod i objašnjenja | Ubrzavaju učenje i produktivnost | +| Značajka | Što Radi | Zašto Pomaže | +|---------|--------------|--------------| +| **Isticanje Sintakse** | Boji različite dijelove koda | Čini kod lakšim za čitanje i pronalaženje grešaka | +| **Automatsko dovršavanje** | Predlaže kod dok tipkate | Ubrzava kodiranje i smanjuje greške u tipkanju | +| **Alati za Debugging** | Pomaže pronaći i popraviti pogreške | Štedi sate vremena za ispravljanje problema | +| **Proširenja** | Dodaju specijalizirane značajke | Prilagođavaju uređivač za bilo koju tehnologiju | +| **AI Asistenti** | Predlažu kod i objašnjenja | Ubrzavaju učenje i produktivnost | -> 🎥 **Video resurs**: Želite vidjeti ove alate u akciji? Pogledajte ovaj [video o alatima zanata](https://youtube.com/watch?v=69WJeXGBdxg) za sveobuhvatan pregled. +> 🎥 **Video Resurs**: Želite li vidjeti ove alate u akciji? Pogledajte [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) za sveobuhvatan pregled. -#### Preporučeni uređivači za web razvoj +#### Preporučeni Uređivači za Web Razvoj **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Besplatno) -- Najpopularniji među web programerima -- Izvrsan ekosustav ekstenzija -- Ugrađeni terminal i Git integracija -- **Obavezne ekstenzije**: +- Najpopularniji među web developerima +- Sjajan ekosustav proširenja +- Ugrađena terminal i Git integracija +- **Obavezna proširenja**: - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-pokretani prijedlozi koda - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Suradnja u stvarnom vremenu - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatsko formatiranje koda - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Hvata tipografske pogreške u vašem kodu + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Pronalazi tipkarske pogreške u kodu **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Plaćeno, besplatno za studente) -- Napredni alati za otklanjanje grešaka i testiranje -- Inteligentno automatsko dovršavanje koda -- Ugrađena kontrola verzija +- Napredni alati za debugging i testiranje +- Inteligentno dovršavanje koda +- Ugrađeni sustav kontrole verzija -**IDE-ovi temeljeni na oblaku** (Različite cijene) +**Cloud IDE-i** (Različite cijene) - [GitHub Codespaces](https://github.com/features/codespaces) - Cijeli VS Code u vašem pregledniku - [Replit](https://replit.com/) - Odlično za učenje i dijeljenje koda -- [StackBlitz](https://stackblitz.com/) - Trenutni, full-stack web razvoj - -> 💡 **Savjet za početak**: Započnite s Visual Studio Code – besplatan je, široko korišten u industriji i ima ogromnu zajednicu koja stvara korisne vodiče i ekstenzije. +- [StackBlitz](https://stackblitz.com/) - Instantni full-stack web razvoj +> 💡 **Savjet za početak**: Počnite s Visual Studio Code – besplatan je, široko korišten u industriji, i ima ogromnu zajednicu koja stvara korisne tutorijale i proširenja. -### Web preglednici: Vaš tajni laboratorij za razvoj -Dobro, pripremite se da vam um bude potpuno oduševljen! Znate kako ste koristili preglednike za pregledavanje društvenih mreža i gledanje videozapisa? Pa, ispada da su cijelo vrijeme skrivali ovaj nevjerojatni tajni laboratorij za programere, samo čekajući da ga otkrijete! +### Web Preglednici: Vaš Tajni Laboratorij za Razvoj -Svaki put kada desnom tipkom miša kliknete na web stranicu i odaberete "Inspect Element," otvarate skriveni svijet alata za programere koji su iskreno moćniji od nekog skupog softvera za koji sam nekada plaćao stotine dolara. To je kao da otkrijete da vaša obična kuhinja skriva profesionalni laboratorij za kuhare iza tajnog panela! +U redu, pripremite se da vam se um potpuno razbije! Znate kako ste koristili preglednike za listanje društvenih mreža i gledanje videa? Pa, ispostavilo se da su cijelo to vrijeme skrivali nevjerojatnu tajnu razvojnu laboratoriju, samo čekajući da je otkrijete! -Prvi put kad mi je netko pokazao DevTools preglednika, proveo sam oko tri sata samo klikajući i govoreći "ČEKAJ, MOŽE LI TO TAKOĐER?!" Možete doslovno uređivati bilo koju web stranicu u stvarnom vremenu, vidjeti koliko brzo sve učitava, testirati kako vaša stranica izgleda na različitim uređajima, pa čak i otklanjati greške u JavaScriptu kao pravi profesionalac. To je apsolutno nevjerojatno! +Svaki put kad kliknete desnim klikom miša na web stranicu i odaberete "Inspect Element", otvarate skriveni svijet razvojnih alata koji su iskreno moćniji od nekog skupog softvera za koji sam nekada plaćao stotine dolara. Kao da otkrivate da je vaša obična kuhinja cijelo vrijeme skrivala profesionalni kuharski laboratorij iza tajnog panela! +Prvi put kad mi je netko pokazao DevTools u pregledniku, proveo sam oko tri sata samo klikajući po svemu i govoreći "ČEKAJ, TO MOGU I TO?!" Doslovno možeš uređivati bilo koju web stranicu u stvarnom vremenu, vidjeti točno koliko brzo se sve učitava, testirati kako tvoja stranica izgleda na različitim uređajima, pa čak i debugirati JavaScript kao pravi profesionalac. Apsolutno je zapanjujuće! -**Evo zašto su preglednici vaše tajno oružje:** +**Evo zašto su preglednici tvoj tajni adut:** -Kada kreirate web stranicu ili web aplikaciju, trebate vidjeti kako izgleda i ponaša se u stvarnom svijetu. Preglednici ne samo da prikazuju vaš rad, već pružaju detaljne povratne informacije o performansama, pristupačnosti i potencijalnim problemima. +Kad stvaraš web stranicu ili web aplikaciju, trebaš vidjeti kako izgleda i ponaša se u stvarnom svijetu. Preglednici ne prikazuju samo tvoj rad, već daju i detaljne povratne informacije o performansama, pristupačnosti i potencijalnim problemima. -#### Alati za programere u preglednicima (DevTools) +#### Alati za razvoj u pregledniku (DevTools) -Moderni preglednici uključuju sveobuhvatne razvojne suite: +Moderni preglednici uključuju opsežne razvojne alate: -| Kategorija alata | Što radi | Primjer upotrebe | -|------------------|----------|------------------| -| **Inspektor elemenata** | Pregled i uređivanje HTML/CSS-a u stvarnom vremenu | -| **Konzola** | Pregledajte poruke o pogreškama i testirajte JavaScript | Rješavajte probleme i eksperimentirajte s kodom | -| **Monitor mreže** | Pratite kako se resursi učitavaju | Optimizirajte performanse i vrijeme učitavanja | -| **Provjera pristupačnosti** | Testirajte inkluzivni dizajn | Osigurajte da vaša stranica radi za sve korisnike | -| **Simulator uređaja** | Pregledajte na različitim veličinama ekrana | Testirajte responzivni dizajn bez potrebe za više uređaja | +| Kategorija alata | Što radi | Primjer uporabe | +|------------------|----------|-----------------| +| **Inspector elemenata** | Pregled i uređivanje HTML/CSS u stvarnom vremenu | Prilagodi stilove i vidi trenutne rezultate | +| **Konzola** | Pregled poruka o greškama i testiranje JavaScripta | Debugiranje problema i eksperimenti s kodom | +| **Mrežni nadzor** | Praćenje učitavanja resursa | Optimizacija performansi i vremena učitavanja | +| **Provjera pristupačnosti** | Testiranje inkluzivnog dizajna | Osiguraj da tvoja stranica funkcionira za sve korisnike | +| **Simulator uređaja** | Pregled na različitim veličinama zaslona | Testiranje responzivnog dizajna bez više uređaja | #### Preporučeni preglednici za razvoj -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - DevTools standard u industriji s opsežnom dokumentacijom +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Industrijski standard DevTools s opsežnom dokumentacijom - **[Firefox](https://developer.mozilla.org/docs/Tools)** - Izvrsni alati za CSS Grid i pristupačnost -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Temeljen na Chromiumu s Microsoftovim resursima za razvoj +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Izgrađen na Chromiumu uz Microsoftove razvojne resurse -> ⚠️ **Važan savjet za testiranje**: Uvijek testirajte svoje web stranice u više preglednika! Ono što savršeno funkcionira u Chromeu može izgledati drugačije u Safariju ili Firefoxu. Profesionalni programeri testiraju na svim glavnim preglednicima kako bi osigurali dosljedno korisničko iskustvo. +> ⚠️ **Važan savjet za testiranje**: Uvijek testiraj svoje web stranice u više preglednika! Ono što savršeno radi u Chromeu može izgledati drugačije u Safariju ili Firefoxu. Profesionalni programeri testiraju u svim glavnim preglednicima kako bi osigurali dosljedno korisničko iskustvo. -### Alati naredbenog retka: Vaša ulaznica u svijet programerskih supermoći -Dobro, budimo potpuno iskreni o naredbenom retku, jer želim da ovo čujete od nekoga tko to stvarno razumije. Kad sam ga prvi put vidio – samo taj zastrašujući crni ekran s trepćućim tekstom – doslovno sam pomislio: "Ne, apsolutno ne! Ovo izgleda kao nešto iz hakerskog filma iz 80-ih, i definitivno nisam dovoljno pametan za ovo!" 😅 +### Alati naredbenog retka: tvoja vrata u razvojne supermoći -Ali evo što bih volio da mi je netko tada rekao, a što vam sada govorim: naredbeni redak nije strašan – zapravo je kao da imate direktan razgovor s vašim računalom. Zamislite to kao razliku između naručivanja hrane putem fancy aplikacije s slikama i jelovnicima (što je lijepo i jednostavno) i ulaska u vaš omiljeni lokalni restoran gdje kuhar točno zna što volite i može pripremiti nešto savršeno samo ako kažete "iznenadi me nečim nevjerojatnim." +U redu, idemo na potpuno iskren trenutak o naredbenom retku, jer želim da ovo čuješ od nekoga tko stvarno to razumije. Kad sam ga prvi put vidio – samo ovaj zastrašujući crni ekran s trepćućim tekstom – doslovno sam mislio, „Ne, nikako! Ovo izgleda kao nešto iz hacker filma iz 1980-ih i definitivno nisam dovoljno pametan za ovo!“ 😅 -Naredbeni redak je mjesto gdje programeri postaju pravi čarobnjaci. Utipkate nekoliko naizgled magičnih riječi (ok, to su samo naredbe, ali osjećaju se magično!), pritisnete enter, i BOOM – stvorili ste cijele strukture projekata, instalirali moćne alate iz cijelog svijeta ili postavili svoju aplikaciju na internet za milijune ljudi. Kad jednom okusite tu moć, postaje prilično zarazno! +Ali evo što bih volio da mi je netko tada rekao, i što ti sada govorim: naredbeni redak nije strašan – zapravo je kao da razgovaraš direktno sa svojim računalom. Pomisli na to kao razliku između naručivanja hrane preko neke fancy aplikacije s slikama i jelovnicima (što je fino i jednostavno) i ulaska u svoj omiljeni lokalni restoran gdje kuhar točno zna što voliš i može ti napraviti nešto savršeno samo zato što mu kažeš „iznenadi me s nečim nevjerojatnim.“ -**Zašto će vam naredbeni redak postati omiljeni alat:** +Naredbeni redak je mjesto gdje programeri osjećaju kao čarobnjaci. Upisuješ nekoliko naizgled magičnih riječi (okej, to su samo naredbe, ali djeluju kao magija!), pritisneš enter i BUM – stvorio si čitave strukture projekta, instalirao moćne alate s cijelog svijeta ili rasporedio svoju aplikaciju na internet da je milijuni ljudi mogu vidjeti. Kad prvi put osjetiš tu moć, iskreno, postaneš ovisan! -Iako su grafička sučelja izvrsna za mnoge zadatke, naredbeni redak briljira u automatizaciji, preciznosti i brzini. Mnogi razvojni alati prvenstveno rade putem sučelja naredbenog retka, a učenje kako ih učinkovito koristiti može dramatično poboljšati vašu produktivnost. +**Zašto će naredbeni redak postati tvoj omiljeni alat:** + +Dok su grafička sučelja izvrsna za mnoge zadatke, naredbeni redak briljira u automatizaciji, preciznosti i brzini. Mnogi razvojni alati rade prvenstveno putem naredbenog retka, a učenje njihove učinkovite uporabe može znatno poboljšati tvoju produktivnost. ```bash -# Step 1: Create and navigate to project directory +# Korak 1: Kreirajte i prijeđite u direktorij projekta mkdir my-awesome-website cd my-awesome-website ``` -**Što ovaj kod radi:** -- **Stvara** novi direktorij pod nazivom "my-awesome-website" za vaš projekt -- **Navigira** u novostvoreni direktorij kako biste mogli početi raditi +**Ovo kod radi:** +- **Stvara** novi direktorij „my-awesome-website“ za tvoj projekt +- **Prelazi** u novo stvoreni direktorij kako bi započeo rad ```bash -# Step 2: Initialize project with package.json +# Korak 2: Inicijalizirajte projekt s package.json npm init -y -# Install modern development tools +# Instalirajte moderne razvojne alate npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Korak po korak, evo što se događa:** -- **Inicijalizira** novi Node.js projekt s osnovnim postavkama pomoću `npm init -y` -- **Instalira** Vite kao moderan alat za izradu za brzi razvoj i produkcijske verzije -- **Dodaje** Prettier za automatsko formatiranje koda i ESLint za provjeru kvalitete koda -- **Koristi** zastavicu `--save-dev` kako bi označio ove alate kao ovisnosti samo za razvoj +**Korak po korak, ovako se odvija:** +- **Inicijalizira** novi Node.js projekt s zadanim postavkama koristeći `npm init -y` +- **Instalira** Vite kao moderan build alat za brzi razvoj i proizvodnju +- **Dodaje** Prettier za automatsko formatiranje koda i ESLint za provjere kvalitete koda +- **Koristi** zastavicu `--save-dev` za označavanje ovih alata kao razvojnih ovisnosti ```bash -# Step 3: Create project structure and files +# Korak 3: Izradite strukturu projekta i datoteke mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# Pokrenite razvojni poslužitelj npx vite ``` -**Ovdje smo:** -- **Organizirali** naš projekt stvaranjem zasebnih mapa za izvorni kod i resurse -- **Generirali** osnovnu HTML datoteku s pravilnom strukturom dokumenta -- **Pokrenuli** Vite razvojni server za automatsko osvježavanje i zamjenu modula u stvarnom vremenu +**U gornjem primjeru smo:** +- **Organizirali** projekt stvaranjem zasebnih mapa za izvorni kod i resurse +- **Generirali** osnovnu HTML datoteku s ispravnom strukturom dokumenta +- **Pokrenuli** Vite razvojni server za live reloading i hot module replacement #### Osnovni alati naredbenog retka za web razvoj -| Alat | Svrha | Zašto vam je potreban | -|------|-------|-----------------------| -| **[Git](https://git-scm.com/)** | Kontrola verzija | Pratite promjene, surađujte s drugima, sigurnosno kopirajte svoj rad | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime i upravljanje paketima | Pokrenite JavaScript izvan preglednika, instalirajte moderne alate za razvoj | -| **[Vite](https://vitejs.dev/)** | Alat za izradu i razvojni server | Izuzetno brz razvoj s automatskim osvježavanjem modula | -| **[ESLint](https://eslint.org/)** | Kvaliteta koda | Automatski pronađite i ispravite probleme u vašem JavaScriptu | -| **[Prettier](https://prettier.io/)** | Formatiranje koda | Održavajte vaš kod dosljedno formatiranim i čitljivim | +| Alat | Svrha | Zašto ti treba | +|------|-------|----------------| +| **[Git](https://git-scm.com/)** | Upravljanje verzijama | Praćenje promjena, suradnja s drugima, sigurnosna kopija rada | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime i upravljanje paketima | Pokretanje JavaScripta izvan preglednika, instalacija modernih razvojnih alata | +| **[Vite](https://vitejs.dev/)** | Build alat i razvojni server | Munjevito brz razvoj s hot module replacementom | +| **[ESLint](https://eslint.org/)** | Kvaliteta koda | Automatsko pronalaženje i ispravljanje problema u JavaScriptu | +| **[Prettier](https://prettier.io/)** | Formatiranje koda | Održava kod dosljedno formatiranim i čitljivim | #### Opcije specifične za platformu **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderan terminal s naprednim značajkama -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Moćno skriptno okruženje +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderan terminal s puno značajki +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Moćno okruženje za skriptiranje - **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Tradicionalni Windows naredbeni redak **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Ugrađena aplikacija za terminal +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Ugrađena terminalska aplikacija - **[iTerm2](https://iterm2.com/)** - Poboljšani terminal s naprednim značajkama **Linux:** - **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standardna Linux ljuska -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Napredni emulator terminala +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Napredni terminal emulator + +> 💻 = unaprijed instalirano na operativnom sustavu + +> 🎯 **Put učenje**: Započni s osnovnim naredbama poput `cd` (promjena direktorija), `ls` ili `dir` (popis datoteka) i `mkdir` (stvaranje mape). Vježbaj s modernim naredbama poput `npm install`, `git status` i `code .` (otvara trenutni direktorij u VS Codeu). Kako budeš sve sigurniji, prirodno ćeš prihvatiti naprednije naredbe i tehnike automatizacije. -> 💻 = Predinstalirano na operativnom sustavu -> 🎯 **Put učenja**: Započnite s osnovnim naredbama poput `cd` (promjena direktorija), `ls` ili `dir` (popis datoteka) i `mkdir` (stvaranje mape). Vježbajte s modernim naredbama za radni tijek poput `npm install`, `git status` i `code .` (otvara trenutni direktorij u VS Code). Kako postajete sve ugodniji, prirodno ćete usvojiti naprednije naredbe i tehnike automatizacije. +### Dokumentacija: tvoj mentor učenja uvijek pri ruci -### Dokumentacija: Vaš mentor za učenje koji je uvijek dostupan +Okej, hoću ti otkriti malu tajnu koja će ti pomoći da se osjećaš puno bolje kao početnik: čak i najiskusniji programeri velik dio svog vremena troše na čitanje dokumentacije. I to nije zato što ne znaju što rade – to je zapravo znak mudrosti! -Evo male tajne koja će vas učiniti sigurnijima u vašim počecima: čak i najiskusniji programeri provode velik dio svog vremena čitajući dokumentaciju. I to nije zato što ne znaju što rade – to je zapravo znak mudrosti! +Zamisli dokumentaciju kao pristup najstrpljivijim, najupućenijim učiteljima na svijetu koji su ti dostupni 24/7. Zapneš na problem u 2 ujutro? Dokumentacija je tu s toplim virtualnim zagrljajem i točno s odgovorom koji ti treba. Želiš naučiti o nekoj super novoj funkciji o kojoj svi pričaju? Dokumentacija ti je podrška s uputama korak po korak. Pokušavaš shvatiti zašto nešto funkcionira onako kako funkcionira? Pogodi što – dokumentacija je spremna objasniti ti na način koji napokon ima smisla! -Zamislite dokumentaciju kao pristup najstrpljivijim, najinformiranijim učiteljima na svijetu koji su dostupni 24/7. Imate problem u 2 ujutro? Dokumentacija je tu s toplim virtualnim zagrljajem i točno onim odgovorom koji vam treba. Želite naučiti o nekoj cool novoj značajci o kojoj svi pričaju? Dokumentacija vas podržava s korak-po-korak primjerima. Pokušavate razumjeti zašto nešto funkcionira na određeni način? Pogodili ste – dokumentacija je spremna objasniti to na način koji će vam konačno kliknuti! +Evo što mi je potpuno promijenilo pogled na stvari: svijet web razvoja se nevjerojatno brzo mijenja i nitko (apsolutno nitko!) ne pamti sve napamet. Vidio sam starije programere s 15+ godina iskustva kako traže osnovnu sintaksu, i znaš što? To nije sramota – to je pametno! Nije stvar u savršenom pamćenju; radi se o tome da znaš gdje brzo pronaći pouzdane odgovore i razumjeti kako ih primijeniti. -**Evo gdje se događa prava magija:** +**Prava magija se događa ovdje:** -Profesionalni programeri provode značajan dio svog vremena čitajući dokumentaciju – ne zato što ne znaju što rade, već zato što se svijet web razvoja razvija tako brzo da je za ostanak u tijeku potrebno stalno učenje. Kvalitetna dokumentacija pomaže vam razumjeti ne samo *kako* nešto koristiti, već *zašto* i *kada* to koristiti. +Profesionalni programeri veliku količinu vremena provode u čitanju dokumentacije – ne zato što ne razumiju što rade, već zato što se područje web razvoja brzo mijenja i praćenje novosti zahtijeva kontinuirano učenje. Dobra dokumentacija pomaže ti shvatiti ne samo *kako* nešto koristiti, već i *zašto* i *kada* to učiniti. -#### Ključni resursi za dokumentaciju +#### Ključni izvori dokumentacije **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** - Zlatni standard za dokumentaciju web tehnologija @@ -572,94 +695,171 @@ Profesionalni programeri provode značajan dio svog vremena čitajući dokumenta - Sadrži praktične primjere i interaktivne demonstracije **[Web.dev](https://web.dev)** (od Googlea) -- Najbolje prakse za moderni web razvoj +- Najbolje prakse modernog web razvoja - Vodiči za optimizaciju performansi - Principi pristupačnosti i inkluzivnog dizajna - Studije slučaja iz stvarnih projekata **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Resursi za razvoj u pregledniku Edge -- Vodiči za progresivne web aplikacije -- Uvidi u razvoj na više platformi +- Razvojni resursi za preglednik Edge +- Vodiči za Progressive Web Apps +- Uvidi u razvoj za više platformi **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Strukturirani kurikulumi za učenje +- Strukturirani programi učenja - Video tečajevi od stručnjaka iz industrije - Praktične vježbe kodiranja -> 📚 **Strategija učenja**: Ne pokušavajte zapamtiti dokumentaciju – umjesto toga, naučite kako je učinkovito pretraživati. Označite često korištene reference i vježbajte korištenje funkcija pretraživanja kako biste brzo pronašli specifične informacije. +> 📚 **Strategija učenja**: Nemoj pokušavati naučiti dokumentaciju napamet – umjesto toga, nauči kako učinkovito pretraživati informacije. Dodaj u favorite često korištene izvore i vježbaj korištenje funkcija pretraživanja za brzi pronalazak potrebnih podataka. -✅ **Razmislite o ovome**: Evo nečega zanimljivog za razmisliti – kako mislite da se alati za izradu web stranica (razvoj) razlikuju od alata za dizajniranje njihovog izgleda (dizajn)? To je kao razlika između arhitekta koji dizajnira prekrasnu kuću i izvođača radova koji je zapravo gradi. Oba su ključna, ali trebaju različite alate! Ovakvo razmišljanje zaista će vam pomoći da vidite širu sliku o tome kako web stranice nastaju. +### 🔧 **Provjera ovladavanja alatima: Što te najviše privlači?** + +**Uzmite trenutak da razmisliš:** +- Koji alat te najviše zanima probati prvo? (Nema pogrešnog odgovora!) +- Osjećaš li se još uvijek intimidirano naredbenim retkom ili si znatiželjan? +- Možeš li zamisliti korištenje DevTools u pregledniku za zavirivanje iza kulisa svojih omiljenih web stranica? + +```mermaid +pie title "Vrijeme programera provedeno s alatima" + "Uređivač koda" : 40 + "Testiranje u pregledniku" : 25 + "Komandna linija" : 15 + "Čitanje dokumentacije" : 15 + "Otklanjanje pogrešaka" : 5 +``` +> **Zanimljivost:** Većina programera provede oko 40% vremena u svom editoru koda, ali primijeti koliko vremena odlazi na testiranje, učenje i rješavanje problema. Programiranje nije samo pisanje koda – to je stvaranje iskustava! + +✅ **Za razmišljanje:** Evo zanimljive misli – kako misliš da se alati za izradu web stranica (razvoj) razlikuju od alata za dizajn njihovog izgleda (dizajn)? To je kao razlika između arhitekta koji dizajnira prekrasnu kuću i izvođača koji ju zapravo gradi. Oba su ključna, ali im trebaju različiti alati! Ovakav način razmišljanja pomoći će ti da shvatiš širu sliku kako web stranice nastaju. ## Izazov GitHub Copilot Agent 🚀 -Koristite način rada Agent za dovršavanje sljedećeg izazova: +Koristi Agent način rada da dovršiš sljedeći izazov: -**Opis:** Istražite značajke modernog uređivača koda ili IDE-a i pokažite kako može poboljšati vaš radni tijek kao web programera. +**Opis:** Istraži značajke modernog editora koda ili IDE-a i pokaži kako može poboljšati tvoj radni tijek kao web programera. -**Zadatak:** Odaberite uređivač koda ili IDE (kao što su Visual Studio Code, WebStorm ili cloud-based IDE). Nabrojite tri značajke ili ekstenzije koje vam pomažu u pisanju, otklanjanju grešaka ili održavanju koda. Za svaku navedite kratko objašnjenje kako koristi vašem radnom tijeku. +**Zadatak:** Odaberi editor koda ili IDE (npr. Visual Studio Code, WebStorm ili cloud-based IDE). Navedi tri značajke ili ekstenzije koje ti pomažu efikasnije pisati, debugirati ili održavati kod. Za svaku daj kratak opis kako koristi tvom radu. --- ## 🚀 Izazov -**Spremni za svoju prvu detektivsku misiju?** - -Sada kada imate ovu sjajnu osnovu, imam avanturu koja će vam pomoći da vidite koliko je svijet programiranja raznolik i fascinantan. I slušajte – ovo nije o tome da odmah počnete pisati kod, pa nema pritiska! Zamislite se kao detektiva programskih jezika na svom prvom uzbudljivom zadatku! +**U redu, detektive, jesi li spreman za svoj prvi slučaj?** -**Vaša misija, ako je odlučite prihvatiti:** -1. **Postanite istraživač jezika**: Odaberite tri programska jezika iz potpuno različitih svjetova – možda jedan za izradu web stranica, jedan za kreiranje mobilnih aplikacija i jedan za analizu podataka za znanstvenike. Pronađite primjere istog jednostavnog zadatka napisanog u svakom jeziku. Obećavam, bit ćete apsolutno zadivljeni koliko različito mogu izgledati dok rade potpuno istu stvar! +Sad kad imaš sjajne temelje, imam avanturu koja će ti pomoći vidjeti koliko je svijet programiranja zaista raznolik i fascinantan. I slušaj – nije ovo još pisanje koda, tako da nema pritiska! Zamisliti se kao detektiv programskih jezika na svom prvom uzbudljivom slučaju! -2. **Otkrijte njihove priče o nastanku**: Što čini svaki jezik posebnim? Evo zanimljive činjenice – svaki pojedini programski jezik stvoren je jer je netko pomislio: "Znate što? Mora postojati bolji način za rješavanje ovog specifičnog problema." Možete li otkriti koji su to problemi bili? Neke od ovih priča su zaista fascinantne! +**Tvoja misija, ako je prihvatiš:** +1. **Postani istraživač jezika**: Izaberi tri programska jezika iz potpuno različitih svjetova – možda jedan za izradu web stranica, jedan za mobilne aplikacije i jedan za znanstvenu obradu podataka. Pronađi primjere iste jednostavne zadaće napisane u svakom od tih jezika. Obećajem ti da ćeš biti potpuno oduševljen koliko mogu izgledati različito dok rade istu stvar! -3. **Upoznajte zajednice**: Provjerite koliko su zajednice svakog jezika gostoljubive i strastvene. Neke imaju milijune programera koji dijele znanje i pomažu jedni drugima, dok su druge manje, ali izuzetno povezane i podržavajuće. Oduševit će vas različite osobnosti ovih zajednica! +2. **Otkrij njihove priče nastanka**: Što svaki jezik čini posebnim? Evo zanimljive činjenice – svaki programski jezik je nastao jer je netko mislio „Znaš što? Mora postojati bolji način za rješavanje ovog konkretno problema.“ Možeš li otkriti koji su to problemi? Neki od tih priča su zaista fascinantni! -4. **Slijedite svoj instinkt**: Koji vam je jezik trenutno najpristupačniji? Ne stresirajte se oko donošenja "savršene" odluke – samo slušajte svoje instinkte! Ovdje nema pogrešnog odgovora, a uvijek možete istražiti druge kasnije. +3. **Upoznaj zajednice**: Pogledaj koliko su prijateljski i strastveni članovi svake zajednice. Neke broje milijune programera koji dijele znanje i pomažu jedni drugima, druge su manje ali vrlo povezane i podržavajuće. Voljet ćeš vidjeti različite osobnosti ovih zajednica! -**Bonus detektivski zadatak**: Pokušajte otkriti koje velike web stranice ili aplikacije su izgrađene s svakim jezikom. Garantiram da ćete biti iznenađeni kad saznate što pokreće Instagram, Netflix ili onu mobilnu igru koju ne možete prestati igrati! +4. **Slijedi svoj instinkt**: Koji ti jezik trenutno najpristupačniji? Ne brini se o „savršeno“ donesenoj odluci – samo slušaj svoj osjećaj! Nema pogrešnog odgovora i uvijek možeš istražiti druge kasnije. -> 💡 **Zapamtite**: Ne pokušavate postati stručnjak u bilo kojem od ovih jezika danas. Samo upoznajete susjedstvo prije nego što odlučite gdje želite postaviti svoj "ured". Uzmite si vremena, zabavite se i pustite da vas vodi znatiželja! +**Bonus detektivski zadatak**: Pokušaj saznati koje su glavne web stranice ili aplikacije izgrađene u svakom od tih jezika. Garantiram da ćeš se iznenaditi kad saznaš što pokreće Instagram, Netflix ili onu mobilnu igru koju ne možeš prestati igrati! -## Proslavimo što ste otkrili! +> 💡 **Sjeti se**: Danas ne pokušavaš postati ekspert u bilo kojem od ovih jezika. Samo upoznaješ „kvart“ prije nego što odlučiš gdje ćeš se nastaniti. Uzmi si vremena, zabavi se i pusti znatiželji da te vodi! -Wow, upili ste toliko nevjerojatnih informacija danas! Iskreno sam uzbuđen vidjeti koliko se toga zadržalo s vama. I zapamtite – ovo nije test gdje morate sve savršeno znati. Ovo je više kao proslava svih cool stvari koje ste naučili o ovom fascinantnom svijetu u koji ćete uskoro zaroniti! +## Proslavimo što si otkrio! -[Odgovorite na kviz nakon lekcije](https://ff-quizzes.netlify.app/web/) +Vau, danas si usvojio toliko nevjerojatnih informacija! Stvarno sam uzbuđen vidjeti koliko ti je ovog sjajnog putovanja ostalo u pamćenju. I sjeti se – ovo nije test gdje moraš sve savršeno znati. Ovo je prije proslava svega kul što si naučio o ovom fascinantnom svijetu u koji tek krećeš zaroniti! +[Uradi kviz nakon lekcije](https://ff-quizzes.netlify.app/web/) ## Pregled i samostalno učenje -**Uzmite si vremena za istraživanje i uživajte u tome!** +**Uzmi si vremena za istraživanje i zabavu!** -Danas ste prešli puno toga, i to je nešto na što možete biti ponosni! Sada dolazi zabavni dio – istraživanje tema koje su pobudile vašu znatiželju. Zapamtite, ovo nije domaća zadaća – ovo je avantura! +Danas si prešao/la jako puno gradiva i na to možeš biti ponosan/na! Sada dolazi zabavni dio – istraživanje tema koje su probudile tvoju znatiželju. Zapamti, ovo nije domaća zadaća – ovo je avantura! -**Dublje istražite ono što vas zanima:** +**Zaronite dublje u ono što vas zanima:** -**Isprobajte programske jezike:** -- Posjetite službene web stranice 2-3 jezika koji su vam privukli pažnju. Svaki od njih ima svoju osobnost i priču! -- Isprobajte online platforme za kodiranje poput [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ili [Replit](https://replit.com/). Ne bojte se eksperimentirati – ne možete ništa pokvariti! -- Pročitajte kako je nastao vaš omiljeni jezik. Ozbiljno, neke od ovih priča su fascinantne i pomoći će vam da razumijete zašto jezici funkcioniraju na način na koji funkcioniraju. +**Isprobaj programske jezike uživo:** +- Posjeti službene stranice 2-3 jezika koji su ti zapeli za oko. Svatko ima svoju osobnost i priču! +- Isprobaj neke online okruženja za kodiranje poput [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ili [Replit](https://replit.com/). Ne boj se eksperimentirati – ne možeš ništa pokvariti! +- Pročitaj kako je tvoj omiljeni jezik nastao. Ozbiljno, neke od tih priča o nastanku su fascinantne i pomoći će ti razumjeti zašto jezici funkcioniraju onako kako funkcioniraju. -**Upoznajte se s novim alatima:** -- Preuzmite Visual Studio Code ako već niste – besplatan je i svidjet će vam se! -- Provedite nekoliko minuta pregledavajući tržište ekstenzija. To je kao trgovina aplikacijama za vaš uređivač koda! -- Otvorite Developer Tools u vašem pregledniku i samo klikajte okolo. Ne brinite o tome da sve razumijete – samo se upoznajte s onim što je tamo. +**Upoznaj se sa svojim novim alatima:** +- Preuzmi Visual Studio Code ako već nisi – besplatan je i sigurno će ti se svidjeti! +- Provedi nekoliko minuta pregledavajući tržište ekstenzija. To je kao trgovina aplikacijama za tvoj uređivač koda! +- Otvori Alate za programere u svom pregledniku i samo klikaj unaokolo. Ne brini oko shvaćanja svega – samo se upoznaj s time što je dostupno. -**Pridružite se zajednici:** -- Pratite neke zajednice programera na [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) ili [GitHub](https://github.com/). Programerska zajednica izuzetno je gostoljubiva prema početnicima! -- Pogledajte neke videozapise o kodiranju za početnike na YouTubeu. Postoji toliko sjajnih kreatora koji se sjećaju kako je to bilo kad su tek počinjali. -- Razmislite o pridruživanju lokalnim meetupima ili online zajednicama. Vjerujte mi, developeri vole pomagati početnicima! +**Pridruži se zajednici:** +- Prati neke zajednice programera na [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) ili [GitHub](https://github.com/). Programerska zajednica izuzetno je otvorena za nove članove! +- Gledaj videozapise za početnike na YouTubeu. Ima toliko sjajnih autora koji se sjećaju kako je biti početnik. +- Razmisli o pridruživanju lokalnim okupljanjima ili online zajednicama. Vjeruj mi, programeri vole pomoći onima koji tek počinju! -> 🎯 **Slušajte, evo što želim da zapamtite**: Ne očekuje se da preko noći postanete čarobnjak za kodiranje! Trenutno samo upoznajete ovaj nevjerojatan novi svijet kojem ćete postati dio. Uzmite si vremena, uživajte u putovanju i zapamtite – svaki developer kojeg se divite nekada je bio točno tamo gdje ste vi sada, osjećajući uzbuđenje i možda malo preplavljenosti. To je potpuno normalno i znači da radite sve kako treba! +> 🎯 **Slušaj, ovo želim da zapamtiš**: Ne očekuje se da preko noći postaneš majstor programiranja! Sada tek upoznaješ ovaj nevjerojatan novi svijet kojem ćeš pripadati. Uzmi si vremena, uživaj u putovanju i zapamti – svaki programer kojeg se diviš jednom je sjedio točno tamo gdje si ti sada, uzbuđen i možda malo preplavljen. To je potpuno normalno i znači da radiš stvari kako treba! ## Zadatak -[Čitanje dokumentacije](assignment.md) +[Reading the Docs](assignment.md) -> 💡 **Mali poticaj za vaš zadatak**: Bilo bi mi jako drago vidjeti da istražujete neke alate koje još nismo pokrili! Preskočite editore, preglednike i alate naredbenog retka o kojima smo već razgovarali – postoji cijeli nevjerojatan svemir fantastičnih alata za razvoj koji samo čekaju da ih otkrijete. Potražite one koji se aktivno održavaju i imaju živahne, korisne zajednice (takvi obično imaju najbolje tutorijale i najpodržavajuće ljude kad se neizbježno zaglavite i trebate prijateljsku pomoć). +> 💡 **Mali poticaj za tvoj zadatak**: Volio/voljela bih da istražiš još neke alate koje nismo spomenuli! Preskoči uređivače, preglednike i alate naredbenog retka o kojima smo već pričali – postoji čitav nevjerojatan svijet sjajnih razvojnih alata koji čekaju da budu otkriveni. Potraži one koji su aktivno održavani i imaju živahne, podržavajuće zajednice (oni obično imaju najbolje tutorijale i najviše prijateljskih ljudi koji ti mogu pomoći kad zaglaviš). + +--- + +## 🚀 Tvoj vremenski plan za programiranje + +### ⚡ **Što možeš napraviti u sljedećih 5 minuta** +- [ ] Označi kao favorite 2-3 web stranice programskih jezika koji su ti zapeli za oko +- [ ] Preuzmi Visual Studio Code ako već nisi +- [ ] Otvori DevTools (F12) u pregledniku i klikaj po bilo kojoj web stranici +- [ ] Pridruži se jednoj programerskoj zajednici (Dev.to, Reddit r/webdev ili Stack Overflow) + +### ⏰ **Što možeš postići u sljedećih sat vremena** +- [ ] Riješi kviz nakon lekcije i razmisli o svojim odgovorima +- [ ] Namjesti VS Code sa ekstenzijom GitHub Copilot +- [ ] Isprobaj primjer "Hello World" u 2 različita programska jezika online +- [ ] Pogledaj video "Dan u životu programera" na YouTubeu +- [ ] Započni svoj detektivski rad o programskom jeziku (iz izazova) + +### 📅 **Tvoja tjedna avantura** +- [ ] Dovrši zadatak i istraži 3 nova razvojna alata +- [ ] Prati 5 programera ili računa vezanih uz programiranje na društvenim mrežama +- [ ] Pokušaj napraviti nešto malo u CodePenu ili Replitu (čak i samo "Hello, [Tvoje ime]!") +- [ ] Pročitaj jedan blog post programera o njegovom putu u kodiranju +- [ ] Pridruži se virtualnom meetup-u ili pogledaj neki programerski govor +- [ ] Započni učiti odabrani jezik uz online tutorijale + +### 🗓️ **Tvoja mjesečna transformacija** +- [ ] Izradi svoj prvi mali projekt (čak i jednostavna web stranica se računa!) +- [ ] Doprinesi open-source projektu (počnite s ispravcima dokumentacije) +- [ ] Mentoriraj nekoga tko tek počinje s programiranjem +- [ ] Napravi svoju web stranicu kao portfelj programera +- [ ] Poveži se s lokalnim zajednicama programera ili studijskim grupama +- [ ] Započni planirati svoj sljedeći cilj u učenju + +### 🎯 **Završna refleksija** + +**Prije nego što kreneš dalje, uzmi trenutak da se pohvališ:** +- Što te danas u programiranju posebno oduševilo? +- Koji alat ili koncept želiš prvo istražiti? +- Kako se osjećaš što počinješ ovo programersko putovanje? +- Koje pitanje bi htio/htjela sada postaviti nekom programeru? + +```mermaid +journey + title Vaše putovanje izgradnje samopouzdanja + section Danas + Znatiželjan: 3: You + Preplavljen: 4: You + Uzbuđen: 5: You + section Ovaj tjedan + Istraživanje: 4: You + Učenje: 5: You + Povezivanje: 4: You + section Sljedeći mjesec + Izgradnja: 5: You + Samopouzdan: 5: You + Pomoć drugima: 5: You +``` +> 🌟 **Zapamti**: Svaki stručnjak je nekada bio početnik. Svaki iskusni programer je jednom osjećao upravo kao ti sada – uzbuđeno, možda malo preplavljeno i nestrpljivo znati što je moguće. U dobrom si društvu, a ovo putovanje bit će nevjerojatno. Dobrodošao/dobrodošla u prekrasni svijet programiranja! 🎉 --- -**Izjava o odricanju odgovornosti**: -Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda. \ No newline at end of file + +**Napomena**: +Ovaj dokument je preveden korištenjem AI prevoditeljske usluge [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na njegovom izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili kriva tumačenja koja proizlaze iz korištenja ovog prijevoda. + \ No newline at end of file diff --git a/translations/hr/1-getting-started-lessons/2-github-basics/README.md b/translations/hr/1-getting-started-lessons/2-github-basics/README.md index 73653d77f..950b9a20c 100644 --- a/translations/hr/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/hr/1-getting-started-lessons/2-github-basics/README.md @@ -1,52 +1,68 @@ # Uvod u GitHub -Pozdrav, budući programeru! 👋 Spreman si pridružiti se milijunima kodera diljem svijeta? Iskreno sam uzbuđen što ti mogu predstaviti GitHub – zamisli ga kao društvenu mrežu za programere, samo što umjesto dijeljenja fotografija ručka dijelimo kod i zajedno gradimo nevjerojatne stvari! +Bok, budući programeru! 👋 Spreman za pridruživanje milijunima programera diljem svijeta? Iskreno sam uzbuđen što ću ti predstaviti GitHub – zamisli to kao društvenu mrežu za programere, samo što umjesto dijeljenja slika svog ručka, dijelimo kod i zajedno gradimo nevjerojatne stvari! -Ono što me apsolutno oduševljava: svaka aplikacija na tvom mobitelu, svaka web stranica koju posjetiš i većina alata koje ćeš naučiti koristiti izgrađeni su od strane timova programera koji surađuju na platformama poput GitHuba. Ona glazbena aplikacija koju obožavaš? Netko poput tebe je pridonio njenom razvoju. Ona igra koju ne možeš prestati igrati? Da, vjerojatno je izgrađena uz suradnju na GitHubu. A sada ćeš TI naučiti kako postati dio te nevjerojatne zajednice! +Ono što me potpuno oduševljava jest ovo: svaka aplikacija na tvom telefonu, svaka web stranica koju posjetiš i većina alata koje ćeš naučiti koristiti napravljeni su od strane timova programera koji surađuju na platformama poput GitHuba. Ta glazbena aplikacija koja ti se sviđa? Netko poput tebe je na tome radio. Ta igra koju ne možeš prestati igrati? Da, vjerojatno je izrađena uz suradnju na GitHubu. I sada ćeš TI naučiti kako biti dio te nevjerojatne zajednice! -Znam da ti se ovo na početku može činiti previše – iskreno, sjećam se kad sam prvi put gledao GitHub stranicu i mislio "Što ovo sve znači?" Ali evo u čemu je stvar: svaki programer je započeo točno tamo gdje si ti sada. Do kraja ove lekcije imat ćeš vlastiti GitHub repozitorij (zamisli ga kao svoj osobni projekt u oblaku), znat ćeš kako spremiti svoj rad, podijeliti ga s drugima, pa čak i pridonijeti projektima koje koriste milijuni ljudi. +Znam da ti to može na početku djelovati previše – sjećam se i sam da sam gledao svoju prvu GitHub stranicu misleći "Što, zaboga, sve ovo znači?" Ali evo što je važno: svaki programer je počeo točno tamo gdje si sada ti. Do kraja ove lekcije imat ćeš svoj vlastiti GitHub repozitorij (zamislite to kao tvoju osobnu vitrinu projekata u oblaku), i znat ćeš kako spremiti svoj rad, podijeliti ga s drugima, pa čak i pridonijeti projektima koje koristi milijune ljudi. -Krenut ćemo na ovo putovanje zajedno, korak po korak. Bez žurbe, bez pritiska – samo ti, ja i neki stvarno cool alati koji će postati tvoji novi najbolji prijatelji! +Krenut ćemo na ovo putovanje zajedno, korak po korak. Bez žurbe, bez pritiska – samo ti, ja i nekoliko stvarno cool alata koji će ubrzo postati tvoji novi najbolji prijatelji! -![Uvod u GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.hr.png) -> Sketchnote autorice [Tomomi Imura](https://twitter.com/girlie_mac) +![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.hr.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) -## Kviz prije predavanja -[Pre-lecture quiz](https://ff-quizzes.netlify.app) +```mermaid +journey + title Vaša GitHub avantura danas + section Postavljanje + Instalirajte Git: 4: You + Kreirajte račun: 5: You + Prvi repozitorij: 5: You + section Ovladavanje Gitom + Lokalni izmjene: 4: You + Commitovi i Push: 5: You + Grananje: 4: You + section Suradnja + Forkajte projekte: 4: You + Pull zahtjevi: 5: You + Open Source: 5: You +``` +## Pred-predavanje kviz +[Pred-predavanje kviz](https://ff-quizzes.netlify.app) ## Uvod -Prije nego što zaronimo u stvarno uzbudljive stvari, pripremimo tvoje računalo za malo GitHub magije! Zamisli ovo kao organiziranje svojih umjetničkih potrepština prije nego što stvoriš remek-djelo – imati prave alate spremne čini sve puno lakšim i zabavnijim. +Prije nego što zaronimo u stvarno uzbudljive stvari, pripremimo tvoj računalni sustav za malo GitHub čarolije! Zamislite ovo kao organiziranje tvojih umjetničkih potrepština prije nego što započneš s majstorskim djelom – imati prave alate spremne čini sve lakšim i puno zabavnijim. -Provest ću te kroz svaki korak postavljanja osobno i obećavam da nije ni približno zastrašujuće kako se možda čini na prvi pogled. Ako nešto odmah ne shvatiš, to je potpuno normalno! Sjećam se kad sam prvi put postavljao svoje razvojno okruženje i osjećao se kao da pokušavam čitati drevne hijeroglife. Svaki programer je bio točno tamo gdje si ti sada, pitajući se radi li sve ispravno. Spoiler: ako si ovdje i učiš, već radiš ispravno! 🌟 +Vodit ću te kroz svaki korak postavljanja osobno i obećavam da nije ni približno tako zastrašujuće kako bi na prvi pogled moglo izgledati. Ako ti nešto ne klikne odmah, to je potpuno normalno! Sjećam se kad sam postavljao svoje prvo razvojno okruženje i osjećao se kao da pokušavam čitati drevne hijeroglife. Svaki programer bio je točno tamo gdje si ti sada, pitajući se radi li to ispravno. Spojler alert: ako si ovdje i učiš, već radiš ispravno! 🌟 U ovoj lekciji pokrit ćemo: -- praćenje rada na tvom računalu +- praćenje rada koji obavljaš na svojem računalu - rad na projektima s drugima -- kako pridonijeti softveru otvorenog koda +- kako doprinijeti open source softveru ### Preduvjeti -Pripremimo tvoje računalo za malo GitHub magije! Ne brini – ovo postavljanje je nešto što trebaš učiniti samo jednom, a onda si spreman za cijelo svoje kodersko putovanje. +Pripremimo tvoje računalo za malo GitHub čarolije! Ne brini – ovo postavljanje trebaš napraviti samo jednom, a onda ćeš biti spreman za cijelo svoje programersko putovanje. -U redu, krenimo s osnovama! Prvo, trebamo provjeriti je li Git već instaliran na tvom računalu. Git je poput super-pametnog asistenta koji pamti svaku promjenu koju napraviš u svom kodu – puno bolje od paničnog pritiskanja Ctrl+S svake dvije sekunde (svi smo to radili!). +Dobro, krenimo od temelja! Prvo trebamo provjeriti je li Git već instaliran na tvom računalu. Git je zapravo kao superpametni pomoćnik koji pamti svaku promjenu koju napraviš u svom kodu – mnogo je bolji nego panično pritiskati Ctrl+S svake dvije sekunde (svi smo to prošli!). -Provjerimo je li Git već instaliran tako da upišemo ovu čarobnu naredbu u terminal: +Provjerimo je li Git već instaliran tako da upišeš ovu magičnu naredbu u svoj terminal: `git --version` -Ako Git još nije instaliran, nema problema! Samo posjeti [download Git](https://git-scm.com/downloads) i preuzmi ga. Kad ga instaliraš, trebamo Gitu predstaviti tebe kako treba: +Ako Git još nije instaliran, nema brige! Samo posjeti [download Git](https://git-scm.com/downloads) i preuzmi ga. Nakon što ga instaliraš, trebaš upoznati Git kako treba: -> 💡 **Prvo postavljanje**: Ove naredbe govore Gitu tko si ti. Ove informacije bit će pridružene svakoj promjeni koju napraviš, pa odaberi ime i e-mail s kojima se osjećaš ugodno dijeliti javno. +> 💡 **Prvo postavljanje**: Ove naredbe Git-u govore tko si. Te informacije bit će povezane sa svakim tvojim komitom, zato odaberi ime i email koje ti je ugodno dijeliti javno. ```bash git config --global user.name "your-name" @@ -58,113 +74,136 @@ Za provjeru je li Git već konfiguriran možeš upisati: git config --list ``` -Trebat će ti i GitHub račun, uređivač koda (poput Visual Studio Code-a), i trebat ćeš otvoriti svoj terminal (ili: command prompt). +Trebat će ti također GitHub račun, uređivač koda (kao što je Visual Studio Code) i trebaš otvoriti svoj terminal (ili: command prompt). Posjeti [github.com](https://github.com/) i kreiraj račun ako ga već nemaš, ili se prijavi i popuni svoj profil. -💡 **Moderni savjet**: Razmisli o postavljanju [SSH ključeva](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) ili korištenju [GitHub CLI](https://cli.github.com/) za lakšu autentifikaciju bez lozinki. +💡 **Suvremeni savjet**: Razmotri postavljanje [SSH ključeva](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) ili korištenje [GitHub CLI](https://cli.github.com/) za lakšu autentifikaciju bez lozinki. -✅ GitHub nije jedini repozitorij koda na svijetu; postoje i drugi, ali GitHub je najpoznatiji. +✅ GitHub nije jedini repozitorij koda na svijetu; postoje i drugi, ali GitHub je najpoznatiji ### Priprema -Trebat će ti mapa s kodnim projektom na tvom lokalnom računalu (laptop ili PC) i javni repozitorij na GitHubu, koji će poslužiti kao primjer kako pridonijeti projektima drugih. +Trebat ćeš imati mapu s projektnim kodom na lokalnom računalu (laptop ili PC), i javni repozitorij na GitHubu, koji će poslužiti kao primjer kako doprinijeti projektima drugih. -### Čuvanje tvog koda +### Sigurnost tvog koda -Razgovarajmo o sigurnosti na trenutak – ali ne brini, nećemo te preplaviti strašnim stvarima! Zamisli ove sigurnosne prakse kao zaključavanje auta ili kuće. To su jednostavne navike koje postaju prirodne i štite tvoj trud. +Razgovarajmo o sigurnosti na trenutak – ali ne brini, nećemo te preplaviti strašnim stvarima! Zamislimo sigurnosne prakse kao zaključavanje auta ili kuće. To su jednostavne navike koje postaju druga priroda i štite tvoj naporan rad. -Pokazat ćemo ti moderne, sigurne načine rada s GitHubom od samog početka. Na taj način razvijaš dobre navike koje će ti koristiti tijekom cijele karijere u kodiranju. +Pokazat ćemo ti moderne, sigurne načine rada s GitHubom odmah od početka. Tako ćeš razviti dobre navike koje će ti koristiti tijekom cijele programerske karijere. Kad radiš s GitHubom, važno je slijediti najbolje sigurnosne prakse: -| Područje sigurnosti | Najbolja praksa | Zašto je važno | -|---------------------|-----------------|----------------| -| **Autentifikacija** | Koristi SSH ključeve ili osobne pristupne tokene | Lozinke su manje sigurne i postupno se ukidaju | +| Sigurnosno područje | Najbolja praksa | Zašto je važno | +|---------------------|-----------------|---------------| +| **Autentifikacija** | Koristi SSH ključeve ili Personal Access Token-e | Lozinke su manje sigurne i izbacuju se iz upotrebe | | **Dvofaktorska autentifikacija** | Omogući 2FA na svom GitHub računu | Dodaje dodatni sloj zaštite računa | -| **Sigurnost repozitorija** | Nikad ne objavljuj osjetljive informacije | API ključevi i lozinke ne bi trebali biti u javnim repozitorijima | -| **Upravljanje ovisnostima** | Omogući Dependabot za ažuriranja | Održava tvoje ovisnosti sigurnima i ažuriranima | +| **Sigurnost repozitorija** | Nikad ne komitiraj osjetljive podatke | API ključevi i lozinke ne smiju biti u javnim repozitorijima | +| **Upravljanje ovisnostima** | Omogući Dependabot za ažuriranja | Održava ovisnosti sigurnim i ažuriranim | -> ⚠️ **Važan sigurnosni podsjetnik**: Nikada ne objavljuj API ključeve, lozinke ili druge osjetljive informacije u bilo kojem repozitoriju. Koristi varijable okruženja i `.gitignore` datoteke za zaštitu osjetljivih podataka. +> ⚠️ **Kritičan sigurnosni podsjetnik**: Nikad ne komitiraj API ključeve, lozinke ili druge osjetljive informacije u bilo koji repozitorij. Koristi varijable okoline i `.gitignore` datoteke za zaštitu osjetljivih podataka. -**Postavljanje moderne autentifikacije:** +**Suvremeno postavljanje autentifikacije:** ```bash -# Generate SSH key (modern ed25519 algorithm) +# Generiraj SSH ključ (moderan ed25519 algoritam) ssh-keygen -t ed25519 -C "your_email@example.com" -# Set up Git to use SSH +# Postavi Git da koristi SSH git remote set-url origin git@github.com:username/repository.git ``` -> 💡 **Savjet profesionalaca**: SSH ključevi eliminiraju potrebu za stalnim unosom lozinki i sigurniji su od tradicionalnih metoda autentifikacije. +> 💡 **Profesionalni savjet**: SSH ključevi eliminiraju potrebu za ponovnim unosom lozinki i sigurniji su od tradicionalnih metoda autentifikacije. --- -## Upravljanje kodom kao profesionalac - -U redu, OVO je trenutak kad stvari postaju stvarno uzbudljive! 🎉 Sada ćemo naučiti kako pratiti i upravljati svojim kodom kao pravi profesionalci, i iskreno, ovo je jedna od mojih najdražih stvari za podučavanje jer je prava promjena u igri. - -Zamisli ovo: pišeš nevjerojatnu priču i želiš pratiti svaku verziju, svaki briljantni edit i svaki "čekaj, ovo je genijalno!" trenutak. To je upravo ono što Git radi za tvoj kod! To je kao da imaš najnevjerojatniju bilježnicu koja pamti SVE – svaki pritisak tipke, svaku promjenu, svaki "ups, sve sam pokvario" trenutak koji možeš odmah poništiti. - -Iskreno, ovo može na početku djelovati zbunjujuće. Kad sam počeo, mislio sam "Zašto jednostavno ne mogu spremiti svoje datoteke kao inače?" Ali vjeruj mi: kad ti Git postane jasan (i hoće!), imat ćeš jedan od onih trenutaka kad pomisliš "Kako sam IKADA kodirao bez ovoga?" To je kao da otkriješ da možeš letjeti nakon što si cijeli život hodao! - -Recimo da imaš mapu lokalno s nekim kodnim projektom i želiš početi pratiti svoj napredak koristeći git - sustav za kontrolu verzija. Neki ljudi uspoređuju korištenje gita s pisanjem ljubavnog pisma svom budućem ja. Čitajući svoje poruke o promjenama danima, tjednima ili mjesecima kasnije, moći ćeš se prisjetiti zašto si donio određenu odluku ili "vratiti" promjenu – naravno, ako napišeš dobre poruke o promjenama. - -### Zadatak: Kreiraj svoj prvi repozitorij! +## Upravljanje svojim kodom kao profesionalac + +E pa, OVO je ono gdje stvari postaju stvarno uzbudljive! 🎉 Upravo ćemo naučiti kako pratiti i upravljati svojim kodom kao profesionalci, i iskreno, ovo je jedna od mojih omiljenih stvari za podučavati jer mijenja igru. + +Zamislite ovo: pišeš fantastičnu priču i želiš pratiti svaki nacrt, svaku briljantnu izmenu i svaki "čekaj, pa ovo je genijalno!" trenutak na putu. Upravo to Git radi za tvoj kod! Kao da imaš nevjerojatnu bilježnicu koja putuje kroz vrijeme i pamti SVE – svaki pritisak tipke, svaku promjenu, svaki "ups, sve sam zezao" trenutak koji možeš odmah poništiti. + +Iskreno – na početku ti to može biti previše. Kad sam ja počinjao, mislio sam "Zašto ne mogu samo normalno spremiti datoteke?" Ali vjeruj mi: čim ti Git klikne (i hoće!), dobit ćeš onaj "aha" trenutak kad pomisliš "Kako sam PA ikad programirao bez ovoga?" Kao da otkriješ da možeš letjeti kad si cijeli život hodao! + +Recimo da imaš mapu lokalno s nekim projektnim kodom i želiš početi pratiti svoj napredak pomoću git-a – sustava za praćenje verzija. Neki ljudi uspoređuju korištenje git-a s pisanjem ljubavnog pisma svojem budućem ja. Kad kasnije čitaš svoje komit poruke nakon dana, tjedana ili mjeseci, moći ćeš se sjetiti zašto si donio određenu odluku ili "vratiti" promjenu – pod uvjetom da pišeš dobre "commit message". + +```mermaid +flowchart TD + A[📁 Vaše Projektne Datoteke] --> B{Je li to Git Repozitorij?} + B -->|Ne| C[git init] + B -->|Da| D[Izvrši Promjene] + C --> D + D --> E[git add .] + E --> F["git commit -m 'poruka'"] + F --> G[git push] + G --> H[🌟 Kod na GitHubu!] + + H --> I{Želite li surađivati?} + I -->|Da| J[Fork i Kloniraj] + I -->|Ne| D + J --> K[Kreiraj Grananje] + K --> L[Izvrši Promjene] + L --> M[Pull Request] + M --> N[🎉 Sudjelujete!] + + style A fill:#fff59d + style H fill:#c8e6c9 + style N fill:#ff4081,color:#fff +``` +### Zadatak: Napravi svoj prvi repozitorij! -> 🎯 **Tvoj zadatak (i jako sam uzbuđen zbog toga!)**: Zajedno ćemo kreirati tvoj prvi GitHub repozitorij! Kad završimo, imat ćeš svoj mali kutak interneta gdje će živjeti tvoj kod, i napravit ćeš svoju prvu "promjenu" (to je programerski izraz za pametno spremanje svog rada). +> 🎯 **Tvoja misija (i toliko sam uzbuđen zbog tebe!)**: Zajedno ćemo napraviti tvoj prvi GitHub repozitorij! Do kraja ove lekcije imati ćeš svoj mali kutak interneta gdje živi tvoj kod i napravit ćeš svoj prvi "commit" (to je programerski izraz za pametno spremanje rada). > -> Ovo je zaista poseban trenutak – službeno se pridružuješ globalnoj zajednici programera! Još se sjećam uzbuđenja kad sam kreirao svoj prvi repozitorij i pomislio "Wow, stvarno ovo radim!" +> Ovo je stvarno poseban trenutak – službeno se pridružuješ globalnoj zajednici programera! Još se sjećam uzbuđenja kad sam napravio svoj prvi repozitorij i pomislio "Vau, stvarno to radim!" -Prođimo kroz ovu avanturu zajedno, korak po korak. Uzmi si vremena za svaki dio – nema nagrade za žurbu, i obećavam da će svaki korak imati smisla. Zapamti, svaki koderski superstar kojeg se diviš jednom je bio točno tamo gdje si ti, spreman kreirati svoj prvi repozitorij. Kako je to cool? +Prođimo zajedno kroz ovu avanturu, korak po korak. Uzmi si vremena za svaki dio – nema nagrade za žurbu i obećajem da će svaki korak imati smisla. Sjeti se, svaki programerski superstar kojeg cijeniš nekad je sjedio točno gdje si ti sada, spreman napraviti svoj prvi repozitorij. Kako je to super, zar ne? > Pogledaj video > -> [![Osnove Gita i GitHuba video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) +> [![Git and GitHub basics video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) -**Krenimo zajedno:** +**Napravimo to zajedno:** -1. **Kreiraj svoj repozitorij na GitHubu**. Posjeti GitHub.com i potraži onaj svijetlo zeleni gumb **New** (ili znak **+** u gornjem desnom kutu). Klikni na njega i odaberi **New repository**. +1. **Napravi svoj repozitorij na GitHubu**. Otiđi na GitHub.com i potraži onaj svijetlo zeleni gumb **New** (ili znak **+** u gornjem desnom kutu). Klikni na njega i odaberi **New repository**. - Evo što trebaš učiniti: - 1. Daj svom repozitoriju ime – neka bude nešto što ti ima smisla! - 1. Dodaj opis ako želiš (to pomaže drugima da razumiju o čemu se radi u tvom projektu) - 1. Odluči želiš li da bude javan (da ga svi mogu vidjeti) ili privatan (samo za tebe) - 1. Preporučujem da označiš okvir za dodavanje README datoteke – to je kao naslovna stranica tvog projekta - 1. Klikni **Create repository** i proslavi – upravo si kreirao svoj prvi repozitorij! 🎉 + Evo što treba napraviti: + 1. Daj repozitoriju ime – neka ti znači nešto! + 1. Dodaj opis ako želiš (pomaže drugima da razumiju o čemu je tvoj projekt) + 1. Odluči hoćeš li da bude javan (svi ga mogu vidjeti) ili privatan (samo ti) + 1. Preporučujem da označiš kućicu za dodavanje README datoteke – to je kao naslovnica tvog projekta + 1. Klikni **Create repository** i slavi – upravo si napravio svoj prvi repozitorij! 🎉 -2. **Navigiraj do svoje projektne mape**. Sada otvorimo tvoj terminal (ne brini, nije tako strašan kako izgleda!). Moramo reći tvom računalu gdje se nalaze tvoje projektne datoteke. Upiši ovu naredbu: +2. **Idi u svoj projektni folder**. Sada otvorimo terminal (ne brini, nije tako strašno kako izgleda!). Trebamo reći računalu gdje su tvoje projektne datoteke. Upiši ovu naredbu: ```bash cd [name of your folder] ``` **Što ovdje radimo:** - - U osnovi kažemo "Hej računalo, odvedi me do moje projektne mape" - - Ovo je kao otvaranje određene mape na tvom desktopu, ali to radimo tekstualnim naredbama - - Zamijeni `[ime tvoje mape]` stvarnim imenom tvoje projektne mape + - Recimo računalu "Hej, odvodi me u moj projektni folder" + - Kao da otvaraš određenu mapu na desktopu, samo sada radimo s tekstualnim naredbama + - Zamijeni `[name of your folder]` stvarnim imenom svoje projektne mape -3. **Pretvori svoju mapu u Git repozitorij**. Ovdje se događa magija! Upiši: +3. **Pretvori svoju mapu u Git repozitorij**. Ovamo dolazi magija! Upiši: ```bash git init ``` - **Evo što se upravo dogodilo (prilično cool stvari!):** - - Git je upravo stvorio skrivenu `.git` mapu u tvom projektu – nećeš je vidjeti, ali tamo je! - - Tvoja obična mapa sada je "repozitorij" koji može pratiti svaku promjenu koju napraviš - - Zamisli to kao da svojoj mapi daješ supermoći da pamti sve + **Evo što se upravo dogodilo (prilično kul stvari!):** + - Git je upravo stvorio skrivenu `.git` mapu u tvom projektu – nećeš je vidjeti, ali je tu! + - Tvoja obična mapa sada je "repozitorij" koji može pratiti svaku tvoju promjenu + - Zamislite to kao da daješ svojoj mapi supermoći da sve pamti -4. **Provjeri što se događa**. Pogledaj što Git misli o tvom projektu trenutno: +4. **Provjeri što se događa**. Pogledajmo što Git misli o tvom projektu trenutno: ```bash git status ``` - **Razumijevanje onoga što ti Git govori:** + **Razumijevanje što ti Git govori:** - Možda ćeš vidjeti nešto što izgleda ovako: + Možda vidiš nešto ovako: ```output Changes not staged for commit: @@ -175,66 +214,66 @@ Prođimo kroz ovu avanturu zajedno, korak po korak. Uzmi si vremena za svaki dio modified: file2.txt ``` - **Ne paničari! Evo što to znači:** - - Datoteke u **crvenom** su datoteke koje imaju promjene, ali još nisu spremne za spremanje - - Datoteke u **zelenom** (kad ih vidiš) su spremne za spremanje - - Git ti pomaže tako što ti točno govori što možeš učiniti sljedeće + **Ne paniči! Evo što to znači:** + - Datoteke u **crvenom** su datoteke koje su promijenjene, ali još nisu spremne za pohranu + - Datoteke u **zelenom** (kad ih vidiš) su spremne za pohranu + - Git ti pomaže govoreći ti što možeš sljedeće napraviti - > 💡 **Savjet profesionalaca**: Naredba `git status` je tvoj najbolji prijatelj! Koristi je kad god si zbunjen oko toga što se događa. To je kao da pitaš Git "Hej, koja je situacija trenutno?" + > 💡 **Profesionalni savjet**: naredba `git status` tvoj je najbolji prijatelj! Koristi ju kad god si zbunjen što se događa. Kao da pitaš Git "Hej, kakva je sada situacija?" -5. **Pripremi svoje datoteke za spremanje** (to se zove "staging"): +5. **Pripremi datoteke za pohranu** (to se zove "staging"): ```bash git add . ``` - **Što smo upravo učinili:** - - Rekli smo Gitu "Hej, želim uključiti SVE svoje datoteke u sljedeće spremanje" - - `.` je kao da kažeš "sve u ovoj mapi" - - Sada su tvoje datoteke "pripremljene" i spremne za sljedeći korak + **Što smo upravo napravili:** + - Rekli smo Gitu "Hej, želim uključiti SVE datoteke u sljedeće spremanje" + - `.` znači "sve u ovoj mapi" + - Sada su tvoje datoteke "staged" i spremne za sljedeći korak - **Želiš biti selektivniji?** Možeš dodati samo određene datoteke: + **Želiš biti izbirljiviji?** Možeš dodati samo određene datoteke: ```bash git add [file or folder name] ``` - **Zašto bi to želio učiniti?** + **Zašto bi to želio?** - Ponekad želiš spremiti povezane promjene zajedno - - Pomaže ti organizirati svoj rad u logične cjeline - - Olakšava razumijevanje što se promijenilo i kada + - Pomaže ti organizirati rad u logične cjeline + - Lakše je razumjeti što se i kada promijenilo - **Promijenio si mišljenje?** Nema problema! Možeš ukloniti datoteke iz pripreme ovako: + **Predomislio si se?** Nema problema! Možeš ukloniti datoteke iz "staged" ovako: ```bash - # Unstage everything + # Ukloni sve iz staging područja git reset - # Unstage just one file + # Ukloni samo jednu datoteku iz staging područja git reset [file name] ``` - Ne brini – ovo ne briše tvoj rad, samo uklanja datoteke iz "spremne za spremanje" hrpe. + Ne brini – ovo ne briše tvoj rad, samo uklanja datoteke iz reda "spremnih za pohranu". -6. **Trajno spremi svoj rad** (napravi svoju prvu promjenu!): +6. **Spremi svoj rad trajno** (napravi svoj prvi commit!): ```bash git commit -m "first commit" ``` - **🎉 Čestitamo! Upravo si napravio svoju prvu promjenu!** + **🎉 Čestitamo! Upravo si napravio svoj prvi commit!** - **Evo što se upravo dogodilo:** - - Git je napravio "snimku" svih pripremljenih datoteka u ovom trenutku - - Tvoja poruka o promjeni "prva promjena" objašnjava o čemu se radi u ovoj točki spremanja - - Git je ovoj snimci dao jedinstveni ID kako bi je uvijek mogao pronaći kasnije + **Evo što se dogodilo:** + - Git je napravio "snapshhot" svih tvojih staged datoteka u ovom trenutku + - Tvoja commit poruka "first commit" objašnjava o čemu je ova točka spremanja + - Git je ovom snapshotu dodijelio jedinstveni ID da ga uvijek možeš pronaći kasnije - Službeno si počeo pratiti povijest svog projekta! - > 💡 **Buduće poruke o promjenama**: Za svoje sljedeće promjene budi detaljniji! Umjesto "ažurirano", probaj "Dodana kontakt forma na početnu stranicu" ili "Popravljen bug u navigacijskom izborniku". Tvoj budući ja će ti biti zahvalan! + > 💡 **Poruke za buduće commitove**: Za sljedeće komite budi opisniji! Umjesto "updated stuff", probaj "Add contact form to homepage" ili "Fix navigation menu bug". Tvoje buduće ja će ti biti zahvalno! -7. **Poveži svoj lokalni projekt s GitHubom**. Trenutno tvoj projekt postoji samo na tvom računalu. Povežimo ga s tvojim GitHub repozitorijem kako bi ga mogao podijeliti sa svijetom! +7. **Poveži svoj lokalni projekt s GitHubom**. Trenutno je tvoj projekt samo na tvom računalu. Povežimo ga s tvojim GitHub repozitorijem da ga možeš podijeliti sa svijetom! - Prvo, idi na stranicu svog GitHub repozitorija i kopiraj URL. Zatim se vrati ovdje i upiši: + Prvo, ode na stranicu svog GitHub repozitorija i kopiraj URL. Zatim se vrati ovamo i upiši: ```bash git remote add origin https://github.com/username/repository_name.git @@ -242,347 +281,497 @@ Prođimo kroz ovu avanturu zajedno, korak po korak. Uzmi si vremena za svaki dio (Zamijeni taj URL stvarnim URL-om svog repozitorija!) - **Što smo upravo učinili:** -- Stvorili smo vezu između vašeg lokalnog projekta i vašeg GitHub repozitorija -- "Origin" je samo nadimak za vaš GitHub repozitorij – kao da dodajete kontakt u svoj telefon -- Sada vaš lokalni Git zna kamo poslati vaš kod kad budete spremni podijeliti ga + **Što smo upravo napravili:** + - Stvorili smo vezu između vašeg lokalnog projekta i vašeg GitHub spremišta + - "Origin" je samo nadimak za vaše GitHub spremište – kao da dodajete kontakt u svoj telefon + - Sada vaš lokalni Git zna kamo poslati vaš kod kad budete spremni za dijeljenje -💡 **Lakši način**: Ako imate instaliran GitHub CLI, ovo možete učiniti jednim naredbom: + 💡 **Jednostavniji način**: Ako imate instaliran GitHub CLI, ovo možete napraviti jednim naredbom: ```bash gh repo create my-repo --public --push --source=. ``` - -8. **Pošaljite svoj kod na GitHub** (veliki trenutak!): + +8. **Pošaljite svoj kod na GitHub** (veliki trenutak!): ```bash git push -u origin main ``` - -**🚀 To je to! Prenosite svoj kod na GitHub!** -**Što se događa:** -- Vaši commitovi putuju s vašeg računala na GitHub -- Zastavica `-u` postavlja trajnu vezu kako bi budući pushovi bili lakši -- "main" je naziv vaše primarne grane (kao glavni folder) -- Nakon ovoga, za buduće prijenose samo trebate upisati `git push`! + **🚀 To je to! Učitavate svoj kod na GitHub!** + + **Što se događa:** + - Vaši commiti putuju s vašeg računala na GitHub + - `-u` oznaka uspostavlja trajnu vezu kako bi budući push bio jednostavniji + - "main" je naziv vaše glavne grane (kao glavni direktorij) + - Nakon ovoga za buduće učitavanje samo upišite `git push`! -💡 **Brza napomena**: Ako se vaša grana zove drugačije (npr. "master"), koristite taj naziv. Možete provjeriti pomoću `git branch --show-current`. + 💡 **Brza napomena**: Ako se vaša grana zove drugačije (npr. "master"), koristite taj naziv. Možete provjeriti s `git branch --show-current`. -9. **Vaš novi dnevni ritam kodiranja** (ovdje postaje zarazno!): +9. **Vaš novi dnevni ritam kodiranja** (ovdje postaje zarazno!): -Od sada, kad god napravite promjene u svom projektu, slijedite ovaj jednostavan trokorak: + Od sada, kad god napravite promjene na projektu, imate ovaj jednostavni ples od tri koraka: ```bash git add . git commit -m "describe what you changed" git push ``` - -**Ovo postaje vaš ritam kodiranja:** -- Napravite sjajne promjene u svom kodu ✨ -- Dodajte ih s `git add` ("Hej Git, obrati pažnju na ove promjene!") -- Spremite ih s `git commit` i opisnom porukom (budući vi će vam biti zahvalan!) -- Podijelite ih sa svijetom koristeći `git push` 🚀 -- Ponavljajte – ozbiljno, ovo postaje prirodno kao disanje! - -Obožavam ovaj način rada jer je poput stvaranja više točaka za spremanje u videoigri. Napravili ste promjenu koja vam se sviđa? Commitajte je! Želite isprobati nešto rizično? Nema problema – uvijek se možete vratiti na posljednji commit ako nešto pođe po zlu! -> 💡 **Savjet**: Možda biste također trebali razmisliti o korištenju `.gitignore` datoteke kako biste spriječili da se datoteke koje ne želite pratiti pojave na GitHubu - poput bilješki koje čuvate u istom folderu, ali nemaju mjesto u javnom repozitoriju. Možete pronaći predloške za `.gitignore` datoteke na [.gitignore templates](https://github.com/github/gitignore) ili stvoriti jednu koristeći [gitignore.io](https://www.toptal.com/developers/gitignore). + **Ovo postaje vaš puls kodiranja:** + - Napravite sjajne promjene u kodu ✨ + - Stage-ajte ih s `git add` ("Hej Git, obrati pažnju na ove promjene!") + - Spremite ih s `git commit` i opisnom porukom (budući vi će vam zahvaliti!) + - Podijelite ih sa svijetom koristeći `git push` 🚀 + - Ponovite – ozbiljno, ovo postaje isto kao disati! + + Volim ovaj radni tok jer je kao imati više točaka spremanja u videoigri. Napravili ste promjenu koju volite? Commitajte ju! Želite isprobati nešto riskantno? Nema problema – uvijek se možete vratiti na posljednji commit ako stvari krenu po zlu! + + > 💡 **Savjet**: Možda ćete htjeti koristiti `.gitignore` datoteku da spriječite da datoteke koje ne želite pratiti budu vidljive na GitHubu – poput datoteke s bilješkama koju držite u istom direktoriju, ali nema mjesto u javnom spremištu. Možete pronaći predloške za `.gitignore` datoteke na [.gitignore templates](https://github.com/github/gitignore) ili izraditi jednu pomoću [gitignore.io](https://www.toptal.com/developers/gitignore). + +### 🧠 **Prvi unos u spremište: Kako se osjećate?** + +**Uzmite trenutak za slavlje i razmišljanje:** +- Kako ste se osjećali kad ste prvi put vidjeli svoj kod na GitHubu? +- Koji vam je korak bio najzbunjujući, a koji neočekivano jednostavan? +- Možete li vlastitim riječima objasniti razliku između `git add`, `git commit` i `git push`? + +```mermaid +stateDiagram-v2 + [*] --> LocalFiles: Stvori projekt + LocalFiles --> Staged: git add . + Staged --> Committed: git commit + Committed --> GitHub: git push + GitHub --> [*]: Uspjeh! 🎉 + + note right of Staged + Datoteke spremne za spremanje + end note + + note right of Committed + Stvoren snimak + end note +``` +> **Zapamtite**: Čak i iskusni developeri ponekad zaborave točne naredbe. Da ovaj radni tok postane mišićna memorija treba vježbe – odlično vam ide! -#### Moderni Git radni procesi +#### Moderni Git radni tokovi -Razmislite o usvajanju ovih modernih praksi: +Razmislite o usvajanju ovih modernih praksi: -- **Konvencionalni commitovi**: Koristite standardizirani format poruka commitova poput `feat:`, `fix:`, `docs:`, itd. Saznajte više na [conventionalcommits.org](https://www.conventionalcommits.org/) -- **Atomski commitovi**: Neka svaki commit predstavlja jednu logičku promjenu -- **Česti commitovi**: Commitajte često s opisnim porukama umjesto velikih, rijetkih commitova +- **Conventional Commits**: Koristite standardizirani format poruke commita poput `feat:`, `fix:`, `docs:`, itd. Saznajte više na [conventionalcommits.org](https://www.conventionalcommits.org/) +- **Atomski commitovi**: Svaki commit treba predstavljati jednu logičku promjenu +- **Česti commitovi**: Često commitajte s opisnim porukama umjesto velikih, rijetkih commitova -#### Poruke commitova +#### Poruke commitova -Sjajna poruka u subject liniji Git commita završava sljedeću rečenicu: -Ako se primijeni, ovaj commit će . +Dobar naslov Git commita završava slijedeću rečenicu: +Ako se primijeni, ovaj commit će -Za subject koristite imperativ, sadašnje vrijeme: "promijeni" umjesto "promijenio" ili "mijenja". -Kao i u subjectu, u tijelu (opcionalno) također koristite imperativ, sadašnje vrijeme. Tijelo bi trebalo uključivati motivaciju za promjenu i usporediti je s prethodnim ponašanjem. Objašnjavate `zašto`, a ne `kako`. +Za naslov koristite imperativ, sadašnje vrijeme: "promijeni", a ne "promijenio" ili "promjene". +Kao u naslovu, i u tijelu (opcionalno) koristite imperativ, sadašnje vrijeme. Tijelo bi trebalo uključivati motivaciju promjene i kontrast prema prethodnom ponašanju. Objašnjavate „zašto“, ne „kako“. -✅ Odvojite nekoliko minuta i istražite GitHub. Možete li pronaći zaista sjajnu poruku commita? Možete li pronaći vrlo minimalnu? Koje informacije smatrate najvažnijima i najkorisnijima za prenošenje u poruci commita? +✅ Provedite nekoliko minuta istražujući GitHub. Možete li pronaći zaista dobru poruku commit-a? Možete li pronaći neku minimalnu? Koje informacije mislite da su najvažnije i najkorisnije za prenijeti porukom commit-a? -## Suradnja s drugima (najzabavniji dio!) +## Rad s drugima (Zabavni dio!) -Pripremite se jer OVO je trenutak kada GitHub postaje apsolutno magičan! 🪄 Savladali ste upravljanje vlastitim kodom, ali sada ulazimo u moj apsolutno najdraži dio – suradnju s nevjerojatnim ljudima iz cijelog svijeta. +Zadržite svoj šešir jer OVO je mjesto gdje GitHub postaje prava čarolija! 🪄 Savladali ste upravljanje vlastitim kodom, a sada ulazimo u moj najdraži dio – suradnju s nevjerojatnim ljudima iz cijelog svijeta. -Zamislite ovo: probudite se sutra i vidite da je netko iz Tokija poboljšao vaš kod dok ste spavali. Zatim netko iz Berlina ispravi grešku na kojoj ste zapeli. Do poslijepodneva, programer iz São Paula dodao je funkciju o kojoj niste ni razmišljali. To nije znanstvena fantastika – to je samo utorak u GitHub svemiru! +Zamislite ovo: probudite se sutra i vidite da vam je netko u Tokiju unaprijedio kod dok ste spavali. Zatim netko u Berlinu popravi bug na kojem ste zapeli. Popodne developeri u São Paulu dodaju značajku o kojoj nikad niste ni razmišljali. To nije znanstvena fantastika – to je samo utorak u GitHub svemiru! -Ono što me zaista uzbuđuje jest da su vještine suradnje koje ćete naučiti? Točno iste radne procese koje timovi u Googleu, Microsoftu i vašim omiljenim startupima koriste svaki dan. Ne učite samo cool alat – učite tajni jezik koji omogućuje cijelom softverskom svijetu da surađuje. +Ono što me stvarno usrećuje jest da su vještine suradnje koje ćete naučiti? To su APSOLUTNO isti radni tokovi koje koriste timovi u Googleu, Microsoftu i vašim omiljenim startupima svaki dan. Ne učite samo cool alat – učite tajni jezik koji cijelom softverskom svijetu omogućuje suradnju. -Ozbiljno, jednom kad doživite uzbuđenje kad vam netko spoji prvi pull request, shvatit ćete zašto programeri postaju toliko strastveni oko open sourcea. To je kao da ste dio najvećeg, najkreativnijeg timskog projekta na svijetu! +Ozbiljno, kad osjetite uzbuđenje kad vam netko spoji prvi pull request, shvatit ćete zašto developeri vole otvoreni izvor. Kao da ste dio najvećeg i najkreativnijeg timskog projekta na svijetu! -> Pogledajte video -> -> [![Osnove Gita i GitHuba video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) +> Pogledajte video +> +> [![Git and GitHub basics video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) + +Glavni razlog za stavljanje stvari na GitHub bio je omogućiti suradnju s drugim developerima. + +```mermaid +flowchart LR + A[🔍 Pronađi projekt] --> B[🍴 Forkaj spremište] + B --> C[📥 Kloniraj lokalno] + C --> D[🌿 Kreiraj granu] + D --> E[✏️ Napravi izmjene] + E --> F[💾 Spremi izmjene] + F --> G[📤 Gurni granu] + G --> H[🔄 Kreiraj Pull Request] + H --> I{Pregled održavatelja} + I -->|✅ Odobreno| J[🎉 Spoji!] + I -->|❓ Traže se izmjene| K[📝 Napravi ažuriranja] + K --> F + J --> L[🧹 Očisti grane] + + style A fill:#e3f2fd + style J fill:#e8f5e8 + style L fill:#fff3e0 +``` +U svom spremištu idite na `Insights > Community` da vidite kako se vaš projekt uspoređuje s preporučenim standardima zajednice. -Glavni razlog za postavljanje stvari na GitHub bio je omogućiti suradnju s drugim programerima. +Želite da vaše spremište izgleda profesionalno i primamljivo? Idite u svoje spremište i kliknite `Insights > Community`. Ova super značajka pokazuje kako se vaš projekt uspoređuje s onim što GitHub zajednica smatra "dobrim praksama u spremištima." -U svom repozitoriju, idite na `Insights > Community` kako biste vidjeli kako se vaš projekt uspoređuje s preporučenim standardima zajednice. +> 🎯 **Neka vaš projekt zablista**: Dobro organizirano spremište s dobrom dokumentacijom je kao uredna, pozivajuća izloga trgovine. Kaže ljudima da vam je stalo do vašeg rada i tjera druge da žele doprinijeti! -Želite li da vaš repozitorij izgleda profesionalno i privlačno? Posjetite svoj repozitorij i kliknite na `Insights > Community`. Ova sjajna značajka pokazuje kako se vaš projekt uspoređuje s onim što GitHub zajednica smatra "dobrim praksama za repozitorij". +**Evo što čini spremište sjajnim:** -> 🎯 **Učinite svoj projekt sjajnim**: Dobro organiziran repozitorij s dobrom dokumentacijom je poput čistog, privlačnog izloga. Pokazuje ljudima da vam je stalo do vašeg rada i potiče druge da doprinesu! +| Što dodati | Zašto je važno | Što vam to donosi | +|-----------|----------------|-------------------| +| **Opis** | Prvi dojam je važan! | Ljudi odmah znaju čemu vaš projekt služi | +| **README** | Naslovna stranica vašeg projekta | Kao prijateljski vodič za nove posjetitelje | +| **Smjernice za doprinos** | Pokazuje da ste otvoreni za pomoć | Ljudi točno znaju kako vam mogu pomoći | +| **Code of Conduct** | Stvara prijateljsko okruženje | Svi se osjećaju dobrodošli za sudjelovanje | +| **Licenca** | Pravna jasnoća | Drugi znaju kako smiju koristiti vaš kod | +| **Sigurnosna politika** | Pokazuje da ste odgovorni | Pokazuje profesionalne prakse | -**Evo što čini repozitorij izvrsnim:** +> 💡 **Profesionalni savjet**: GitHub nudi predloške za sve ove datoteke. Prilikom izrade novog spremišta, označite polja da automatski generirate ove datoteke. -| Što dodati | Zašto je važno | Što vam donosi | -|------------|----------------|----------------| -| **Opis** | Prvi dojam je važan! | Ljudi odmah znaju što vaš projekt radi | -| **README** | Prednja stranica vašeg projekta | Kao ljubazni vodič za nove posjetitelje | -| **Smjernice za doprinos** | Pokazuje da ste otvoreni za pomoć | Ljudi znaju točno kako vam mogu pomoći | -| **Kodeks ponašanja** | Stvara prijateljski prostor | Svi se osjećaju dobrodošli sudjelovati | -| **Licenca** | Pravna jasnoća | Drugi znaju kako mogu koristiti vaš kod | -| **Sigurnosna politika** | Pokazuje da ste odgovorni | Demonstrira profesionalne prakse | +**Moderni GitHub alati za istraživanje:** -> 💡 **Profesionalni savjet**: GitHub nudi predloške za sve ove datoteke. Kada stvarate novi repozitorij, označite okvire za automatsko generiranje ovih datoteka. +🤖 **Automatizacija i CI/CD:** +- **GitHub Actions** za automatizirano testiranje i distribuciju +- **Dependabot** za automatske nadogradnje ovisnosti -**Moderne značajke GitHuba koje treba istražiti:** +💬 **Zajednica i upravljanje projektima:** +- **GitHub Discussions** za razgovore u zajednici izvan issuea +- **GitHub Projects** za upravljanje projektima u kanban stilu +- **Pravila zaštite grana** za održavanje standarda kvalitete koda -🤖 **Automatizacija & CI/CD:** -- **GitHub Actions** za automatizirano testiranje i implementaciju -- **Dependabot** za automatsko ažuriranje ovisnosti -💬 **Zajednica & Upravljanje projektima:** -- **GitHub Discussions** za razgovore u zajednici izvan problema -- **GitHub Projects** za upravljanje projektima u kanban stilu -- **Pravila zaštite grana** za provođenje standarda kvalitete koda +Svi ovi resursi pomažu u uvođenju novih članova tima. A to su tipično stvari kojima se novi suradnici prvo bave prije nego pogledaju vaš kod, da otkriju je li vaš projekt pravo mjesto za njihovo vrijeme. -Sve ove resurse koristit će novi članovi tima. A to su obično stvari koje novi suradnici pregledavaju prije nego što uopće pogledaju vaš kod, kako bi saznali je li vaš projekt pravo mjesto za njihovo ulaganje vremena. +✅ README datoteke, iako zahtijevaju vrijeme za pripremu, često zanemaruju zauzeti održavatelji. Možete li pronaći primjer posebno opisne? Napomena: postoje [alati za izradu dobrih README-a](https://www.makeareadme.com/) koje biste možda željeli isprobati. -✅ README datoteke, iako zahtijevaju vrijeme za pripremu, često se zanemaruju od strane zauzetih održavatelja. Možete li pronaći primjer posebno opisne README datoteke? Napomena: postoje neki [alati za pomoć pri izradi dobrih README datoteka](https://www.makeareadme.com/) koje biste mogli isprobati. +### Zadatak: Spojite neki kod -### Zadatak: Spojite neki kod +Dokumentacija za doprinos pomaže ljudima da doprinesu projektu. Objašnjava koje vrste doprinosa tražite i kako proces funkcionira. Suradnici trebaju slijediti nekoliko koraka da bi mogli doprinijeti vašem repozitoriju na GitHubu: -Dokumentacija za doprinos pomaže ljudima da doprinesu projektu. Objašnjava koje vrste doprinosa tražite i kako proces funkcionira. Suradnici će morati proći kroz niz koraka kako bi mogli doprinijeti vašem repozitoriju na GitHubu: -1. **Forkanje vašeg repozitorija** Vjerojatno ćete htjeti da ljudi _forkaju_ vaš projekt. Forkanje znači stvaranje replike vašeg repozitorija na njihovom GitHub profilu. -1. **Kloniranje**. Nakon toga će klonirati projekt na svoj lokalni stroj. -1. **Stvaranje grane**. Želite zamoliti suradnike da stvore _granu_ za svoj rad. -1. **Usmjeravanje promjena na jedno područje**. Zamolite suradnike da se usredotoče na jednu stvar odjednom - na taj način su veće šanse da možete _spojiti_ njihov rad. Zamislite da napišu ispravak greške, dodaju novu funkciju i ažuriraju nekoliko testova - što ako želite, ili možete implementirati samo 2 od 3, ili 1 od 3 promjene? +1. **Forkajte svoj repozitorij** Vjerojatno ćete htjeti da ljudi _forkaju_ vaš projekt. Forkanje znači stvaranje kopije vašeg spremišta na njihovom GitHub profilu. +1. **Kloniranje**. Iz tamo će klonirati projekt na svoje lokalno računalo. +1. **Napravite granu**. Zamolite ih da naprave _granu_ za svoj rad. +1. **Usredotočite promjenu na jedno područje**. Zamolite suradnike da svoje doprinose usredotoče na jednu stvar odjednom – tako je veća vjerojatnost da ćete moći _spojiti_ njihov rad. Zamislite da napišu popravak buga, dodaju novu značajku i ažuriraju nekoliko testova – što ako želite, ili možete implementirati samo 2 od 3, ili 1 od 3 promjene? -✅ Zamislite situaciju u kojoj su grane posebno kritične za pisanje i isporuku dobrog koda. Koje slučajeve upotrebe možete zamisliti? +✅ Zamislite situaciju u kojoj su grane posebno važne za pisanje i isporuku dobrog koda. Koje slučajeve upotrebe možete zamisliti? -> Napomena, budite promjena koju želite vidjeti u svijetu i stvorite grane za svoj vlastiti rad također. Svaki commit koji napravite bit će napravljen na grani na kojoj trenutno radite. Koristite `git status` da vidite na kojoj ste grani. +> Zapamtite, budite promjena koju želite vidjeti u svijetu i stvarajte grane i za svoj rad. Svaki commit koji napravite biti će na grani na kojoj ste trenutno "checked out". Koristite `git status` da vidite koja je to grana. -Prođimo kroz radni proces suradnika. Pretpostavimo da je suradnik već _forkao_ i _klonirao_ repozitorij tako da ima Git repozitorij spreman za rad na svom lokalnom stroju: +Prođimo kroz radni tok suradnika. Pretpostavimo da je suradnik već _forkao_ i _klonirao_ repo pa ima Git repozitorij spreman za rad na svojem lokalnom računalu: -1. **Stvorite granu**. Koristite naredbu `git branch` za stvaranje grane koja će sadržavati promjene koje namjeravaju doprinijeti: +1. **Napravite granu**. Koristite naredbu `git branch` da napravite granu koja će sadržavati promjene koje planira doprinijeti: ```bash git branch [branch-name] ``` - - > 💡 **Moderni pristup**: Također možete stvoriti i prebaciti se na novu granu jednom naredbom: + + > 💡 **Moderan pristup**: Možete napraviti i odmah prebaciti se na novu granu jednom naredbom: ```bash git switch -c [branch-name] ``` - -1. **Prebacite se na radnu granu**. Prebacite se na određenu granu i ažurirajte radni direktorij pomoću `git switch`: + +1. **Prebaci se na radnu granu**. Prebacite se na određenu granu i osvježite radni direktorij s `git switch`: ```bash git switch [branch-name] ``` - - > 💡 **Moderna napomena**: `git switch` je moderna zamjena za `git checkout` pri promjeni grana. Jasnija je i sigurnija za početnike. -1. **Radite na promjenama**. U ovom trenutku želite dodati svoje promjene. Ne zaboravite obavijestiti Git o tome pomoću sljedećih naredbi: + > 💡 **Moderena napomena**: `git switch` je moderna zamjena za `git checkout` kod promjene grana. Jasnije je i sigurnije za početnike. + +1. **Radite**. Sada želite dodati svoje promjene. Ne zaboravite to reći Git-u sljedećim naredbama: ```bash git add . git commit -m "my changes" ``` - - > ⚠️ **Kvaliteta poruke commita**: Pobrinite se da svom commitu date dobro ime, kako za sebe tako i za održavatelja repozitorija kojem pomažete. Budite specifični o tome što ste promijenili! -1. **Spojite svoj rad s `main` granom**. U nekom trenutku završavate s radom i želite spojiti svoj rad s onim iz `main` grane. `main` grana se možda promijenila u međuvremenu pa se pobrinite da je prvo ažurirate na najnoviju verziju pomoću sljedećih naredbi: + > ⚠️ **Kvaliteta poruke commita**: Pobrinite se da vaš commit ima dobar naziv, i za vlastitu korist i za održavatelja repozitorija kojem pomažete. Budite specifični što ste promijenili! + +1. **Spojite svoj rad s `main` granom**. Kad završite s radom, želite spojiti svoj rad s onim na `main` grani. `main` grana se možda u međuvremenu promijenila pa se prvo pobrinite da je osvježite do najnovije verzije sljedećim naredbama: ```bash git switch main git pull ``` - - U ovom trenutku želite osigurati da se svi _konflikti_, situacije u kojima Git ne može lako _spojiti_ promjene, dogode u vašoj radnoj grani. Stoga pokrenite sljedeće naredbe: + + Sad želite izbjeći bilo kakve _konflikte_, situacije u kojima Git ne može jednostavno _spojiti_ promjene u vašoj radnoj grani. Stoga pokrenite sljedeće naredbe: ```bash git switch [branch_name] git merge main ``` - - Naredba `git merge main` donijet će sve promjene iz `main` u vašu granu. Nadamo se da možete samo nastaviti. Ako ne, VS Code će vam pokazati gdje je Git _zbunjen_ i samo izmijenite zahvaćene datoteke kako biste odredili koji sadržaj je najtočniji. - 💡 **Moderna alternativa**: Razmislite o korištenju `git rebase` za čišću povijest: + Naredba `git merge main` donosi sve promjene s `main` grane u vašu granu. Nadamo se da možete nastaviti bez problema. Ako ne, VS Code će vam pokazati gdje je Git _zbunjen_, a vi samo promijenite pogođene datoteke kako biste naznačili koji sadržaj je točan. + + 💡 **Moderna alternativa**: Razmislite o korištenju `git rebase` za čišću povijest: ```bash git rebase main ``` - - Ovo ponovno reproducira vaše commitove na vrhu najnovije main grane, stvarajući linearnu povijest. + Ovo reproducira vaše commitove na vrh najnovije main grane, stvarajući linearnu povijest. -1. **Pošaljite svoj rad na GitHub**. Slanje vašeg rada na GitHub znači dvije stvari. Pushing vaše grane na vaš repozitorij i zatim otvaranje PR-a, Pull Requesta. +1. **Pošaljite svoj rad na GitHub**. Slanje rada na GitHub znači dvije stvari. Pushanje vaše grane na vaš repozitorij i zatim otvaranje PR, Pull Requesta. ```bash git push --set-upstream origin [branch-name] ``` - - Gornja naredba stvara granu na vašem forkiranom repozitoriju. -1. **Otvorite PR**. Zatim želite otvoriti PR. To radite tako da odete na forkirani repozitorij na GitHubu. Vidjet ćete oznaku na GitHubu gdje vas pita želite li stvoriti novi PR, kliknite na to i bit ćete preusmjereni na sučelje gdje možete promijeniti naslov poruke commita, dati mu prikladniji opis. Sada će održavatelj repozitorija koji ste forkali vidjeti ovaj PR i _držimo palčeve_ da će cijeniti i _spojiti_ vaš PR. Sada ste suradnik, bravo :) + Gornja naredba stvara granu na vašem forkiranom repozitoriju. + +### 🤝 **Provjera suradničkih vještina: Spremni za rad s drugima?** + +**Pogledajmo kako se osjećate oko suradnje:** +- Je li vam sad jasna ideja forkanja i pull requestova? +- Koju bi stvar o radu s granama željeli više vježbati? +- Koliko se ugodno osjećate u doprinosu tuđem projektu? + +```mermaid +mindmap + root((Git Suradnja)) + Branching + Feature branches + Bug fix branches + Eksperimentalni rad + Pull Requests + Pregled koda + Diskusija + Testiranje + Best Practices + Jasne poruke commit-a + Male fokusirane promjene + Dobra dokumentacija +``` +> **Poticanje samopouzdanja**: Svaki developer kojeg cijenite bio je nekad nervozan oko svog prvog pull requesta. GitHub zajednica iznimno dobrodošla je prema početnicima! + +1. **Otvorite PR**. Sljedeće, želite otvoriti PR. To napravite tako da odete na forkani repozitorij na GitHubu. Vidjet ćete na GitHubu obavijest koja vas pita želite li napraviti novi PR, kliknete na to i odvest će vas na sučelje gdje možete promijeniti naslov poruke commita, dati prikladniji opis. Sada održavatelj repo-a koji ste forkali vidjet će ovaj PR i _kucajmo prstima_ da će cijeniti i _spojiti_ vaš PR. Sada ste suradnik, jebiga :) - 💡 **Moderni savjet**: PR-ove možete stvoriti i pomoću GitHub CLI: + 💡 **Moderni savjet**: PR-ove možete također kreirati korištenjem GitHub CLI: ```bash gh pr create --title "Your PR title" --body "Description of changes" ``` - - 🔧 **Najbolje prakse za PR-ove**: - - Povežite se s povezanim problemima koristeći ključne riječi poput "Fixes #123" - - Dodajte snimke zaslona za promjene korisničkog sučelja - - Zatražite specifične recenzente - - Koristite nacrte PR-ova za rad u tijeku - - Osigurajte da svi CI testovi prođu prije nego zatražite recenziju -1. **Očistite**. Smatra se dobrom praksom _očistiti_ nakon što uspješno spojite PR. Želite očistiti i svoju lokalnu granu i granu koju ste poslali na GitHub. Prvo je izbrišite lokalno pomoću sljedeće naredbe: + 🔧 **Najbolje prakse za PR-ove**: + - Povežite s povezanim issueima koristeći ključne riječi poput "Fixes #123" + - Dodajte screenshotove za promjene korisničkog sučelja + - Zatražite specifične recenzente + - Koristite PR-ove u draftu za rad u tijeku + - Osigurajte da svi CI provjere prođu prije nego što zatražite pregled +1. **Očistite**. Smatra se dobrom praksom _očistiti_ nakon što uspješno spojite PR. Želite očistiti i svoju lokalnu granu i granu koju ste poslali na GitHub. Prvo je izbrišite lokalno sljedećom naredbom: ```bash git branch -d [branch-name] ``` - - Pobrinite se da odete na GitHub stranicu za forkirani repozitorij i uklonite udaljenu granu koju ste upravo poslali. - -`Pull request` se čini kao smiješan izraz jer zapravo želite gurnuti svoje promjene u projekt. No, održavatelj (vlasnik projekta) ili glavni tim mora razmotriti vaše promjene prije nego ih spoji s "main" granom projekta, pa zapravo tražite odluku o promjeni od održavatelja. -Pull request je mjesto za usporedbu i raspravu o razlikama uvedenim na grani uz recenzije, komentare, integrirane testove i još mnogo toga. Dobar pull request otprilike slijedi ista pravila kao i poruka commita. Možete dodati referencu na problem u trackeru problema, kada vaš rad, na primjer, rješava problem. To se radi pomoću `#` nakon kojeg slijedi broj vašeg problema. Na primjer `#97`. -🤞Držimo palčeve da svi provjeri prođu i da vlasnik(i) projekta spoje vaše promjene u projekt🤞 + Zatim obavezno idite na GitHub stranicu forkiranog repozitorija i uklonite udaljenu granu koju ste upravo poslali. -Ažurirajte svoju trenutnu lokalnu radnu granu sa svim novim commitovima iz odgovarajuće udaljene grane na GitHubu: - -`git pull` +`Pull request` zvuči kao neozbiljan termin jer zapravo želite gurnuti svoje promjene u projekt. Ali održavatelj (vlasnik projekta) ili glavni tim mora razmotriti vaše promjene prije spajanja s "main" granom projekta, tako da zapravo tražite odluku o promjeni od održavatelja. -## Doprinos otvorenom kodu (Vaša prilika da ostavite trag!) +Pull request je mjesto za usporedbu i diskusiju razlika uvedenih na grani s pregledima, komentarima, integriranim testovima i još mnogo toga. Dobar pull request slijedi otprilike ista pravila kao i poruka komita. Možete dodati referencu na problem u trackeru problema, na primjer kada vaš rad rješava neki problem. To se radi korištenjem `#` nakon kojeg slijedi broj vašeg problema. Na primjer `#97`. -Jeste li spremni za nešto što će vas potpuno oduševiti? 🤯 Razgovarajmo o doprinosu projektima otvorenog koda – i već se naježim od uzbuđenja što ću ovo podijeliti s vama! +🤞Nadam se da će svi provjere proći i da će vlasnici projekta spojiti vaše promjene u projekt🤞 -Ovo je vaša prilika da postanete dio nečeg zaista izvanrednog. Zamislite da poboljšavate alate koje milijuni programera koriste svaki dan ili da popravljate grešku u aplikaciji koju vaši prijatelji obožavaju. To nije samo san – to je ono što doprinos otvorenom kodu predstavlja! +Ažurirajte svoju trenutnu lokalnu radnu granu sa svim novim komitima s odgovarajuće udaljene grane na GitHubu: -Evo što mi svaki put izazove trnce: svaki alat koji ste dosad koristili – vaš editor koda, okviri koje ćemo istraživati, pa čak i preglednik u kojem ovo čitate – započeo je s nekim poput vas koji je napravio svoj prvi doprinos. Taj briljantni programer koji je izradio vaš omiljeni VS Code dodatak? Nekada je bio početnik koji je drhtavim rukama kliknuo "create pull request", baš kao što ćete i vi uskoro učiniti. - -A evo najljepšeg dijela: zajednica otvorenog koda je poput najvećeg grupnog zagrljaja na internetu. Većina projekata aktivno traži nove suradnike i ima probleme označene kao "good first issue" posebno za ljude poput vas! Voditelji projekata iskreno se uzbude kad vide nove suradnike jer se sjećaju svojih prvih koraka. +`git pull` -Ovdje ne učite samo programirati – pripremate se za pridruživanje globalnoj obitelji graditelja koji se svakog dana bude s mišlju "Kako možemo učiniti digitalni svijet malo boljim?" Dobrodošli u klub! 🌟 +## Doprinoseći Open Sourceu (Vaša prilika da ostavite trag!) + +Jeste li spremni za nešto što će vam potpuno "isključiti mozak"? 🤯 Razgovarajmo o doprinosu open source projektima – i već mi se dižu žmarci samo dok razmišljam da to s vama podijelim! + +Ovo je vaša prilika da postanete dio nečeg doista izvanrednog. Zamislite da poboljšavate alate koje milijuni programera koriste svakodnevno, ili da popravljate grešku u aplikaciji koju vaši prijatelji vole. To nije samo san – to je ono o čemu je doprinos open sourceu! + +Ono što me svaki put oduševljava kad razmišljam o tome: svaki alat koji ste učili koristiti – vaš kôd editor, okviri koje ćemo istraživati, čak i preglednik u kojem ovo čitate – započeo je s nekim poput vas koji je napravio svoj prvi doprinos. Ovaj briljantni programer koji je napravio vašu omiljenu VS Code ekstenziju? Nekada je bio početnik koji je drhtavim rukama kliknuo "create pull request", baš kao što ćete vi sada. + +I najljepši dio: open source zajednica je kao najveći internet zagrljaj. Većina projekata aktivno traži novake i imaju issue-e označene kao "good first issue" posebno za ljude poput vas! Održavatelji se iskreno vesele kad vide nove doprinose jer se sjećaju svojih vlastitih prvih koraka. + +```mermaid +flowchart TD + A[🔍 Istražite GitHub] --> B[🏷️ Pronađite "dobar prvi zadatak"] + B --> C[📖 Pročitajte Smjernice za doprinos] + C --> D[🍴 Forkajte Repozitorij] + D --> E[💻 Postavite Lokalno Okruženje] + E --> F[🌿 Izradite Feature Granu] + F --> G[✨ Napravite Svoj Doprinos] + G --> H[🧪 Testirajte Promjene] + H --> I[📝 Napišite Jasni Commit] + I --> J[📤 Gurnite i Kreirajte PR] + J --> K[💬 Sudjelujte u Povratnim informacijama] + K --> L[🎉 Spojeno! Vi ste Suradnik!] + L --> M[🌟 Pronađite Sljedeći Zadatak] + + style A fill:#e1f5fe + style L fill:#c8e6c9 + style M fill:#fff59d +``` +Ne učite samo kako kodirati – pripremate se da se pridružite globalnoj obitelji graditelja koji se svakog dana bude pitajući "Kako možemo učiniti digitalni svijet barem malo boljim?" Dobrodošli u klub! 🌟 -Prvo, pronađimo repozitorij (ili **repo**) na GitHubu koji vas zanima i kojem želite doprinijeti nekom promjenom. Želite kopirati njegov sadržaj na svoje računalo. +Prvo, pronađimo repozitorij (ili **repo**) na GitHubu koji vas zanima i u kojem želite doprinijeti promjenom. Želit ćete kopirati njegov sadržaj na svoje računalo. -✅ Dobar način za pronalazak repozitorija prilagođenih početnicima je [pretraživanje prema oznaci 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). +✅ Dobar način za pronalaženje 'prijateljskih za početnike' repozitorija je [pretraživanje po oznaci 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Kopiraj repo lokalno](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.hr.png) +![Kopirajte repozitorij lokalno](../../../../translated_images/clone_repo.5085c48d666ead57.hr.png) -Postoji nekoliko načina za kopiranje koda. Jedan od načina je "kloniranje" sadržaja repozitorija, koristeći HTTPS, SSH ili GitHub CLI (Command Line Interface). +Postoji nekoliko načina za kopiranje koda. Jedan od načina je "kloniranje" sadržaja repozitorija, koristeći HTTPS, SSH, ili GitHub CLI (Command Line Interface). Otvorite svoj terminal i klonirajte repozitorij ovako: ```bash -# Using HTTPS +# Korištenje HTTPS-a git clone https://github.com/ProjectURL -# Using SSH (requires SSH key setup) +# Korištenje SSH-a (zahtijeva postavljanje SSH ključa) git clone git@github.com:username/repository.git -# Using GitHub CLI +# Korištenje GitHub CLI-ja gh repo clone username/repository ``` -Za rad na projektu, prebacite se u odgovarajuću mapu: +Za rad na projektu, prebacite se u odgovarajući direktorij: `cd ProjectURL` Također možete otvoriti cijeli projekt koristeći: -- **[GitHub Codespaces](https://github.com/features/codespaces)** - GitHubovo razvojno okruženje u oblaku s VS Codeom u pregledniku -- **[GitHub Desktop](https://desktop.github.com/)** - GUI aplikacija za Git operacije -- **[GitHub.dev](https://github.dev)** - Pritisnite tipku `.` na bilo kojem GitHub repozitoriju da biste otvorili VS Code u pregledniku -- **VS Code** s ekstenzijom za GitHub Pull Requests +- **[GitHub Codespaces](https://github.com/features/codespaces)** - GitHubovo razvojno okruženje u oblaku s VS Code u pregledniku +- **[GitHub Desktop](https://desktop.github.com/)** - GUI aplikaciju za Git operacije +- **[GitHub.dev](https://github.dev)** - Pritisnite tipku `.` na bilo kojem GitHub repozitoriju za otvaranje VS Code u pregledniku +- **VS Code** s ekstenzijom GitHub Pull Requests -Na kraju, možete preuzeti kod u zipanoj mapi. +Na kraju, možete preuzeti kod u zipani folder. -### Nekoliko zanimljivih stvari o GitHubu +### Još nekoliko zanimljivih stvari o GitHubu -Možete označiti zvjezdicom, pratiti i/ili "forkati" bilo koji javni repozitorij na GitHubu. Svoje označene repozitorije možete pronaći u padajućem izborniku u gornjem desnom kutu. To je poput označavanja stranica, ali za kod. +Možete označiti zvjezdicom, pratiti i/ili "forkati" bilo koji javni repozitorij na GitHubu. Možete pronaći svoje označene repozitorije u padajućem izborniku gore desno. To je poput bookmarka, ali za kod. -Projekti imaju alat za praćenje problema, uglavnom na GitHubu u kartici "Issues", osim ako nije drugačije navedeno, gdje ljudi raspravljaju o problemima vezanim za projekt. A kartica Pull Requests je mjesto gdje ljudi raspravljaju i pregledavaju promjene koje su u tijeku. +Projekti imaju tracker za probleme, većinom na GitHubu u kartici "Issues" osim ako nije drugačije naznačeno, gdje ljudi raspravljaju o problemima vezanim za projekt. Kartica Pull Requests je mjesto gdje ljudi raspravljaju i pregledavaju promjene koje su u tijeku. Projekti također mogu imati rasprave na forumima, mailing listama ili chat kanalima poput Slacka, Discorda ili IRC-a. -🔧 **Moderni GitHub alati**: +🔧 **Moderne GitHub značajke**: - **GitHub Discussions** - Ugrađeni forum za razgovore zajednice -- **GitHub Sponsors** - Financijska podrška voditeljima projekata -- **Security tab** - Izvješća o ranjivostima i sigurnosne obavijesti -- **Actions tab** - Pregled automatiziranih tijekova rada i CI/CD procesa -- **Insights tab** - Analitika o suradnicima, commitovima i zdravlju projekta -- **Projects tab** - GitHubovi ugrađeni alati za upravljanje projektima +- **GitHub Sponsors** - Financijska podrška održavateljima +- **Kartica Security** - Izvještaji o ranjivostima i sigurnosni savjeti +- **Kartica Actions** - Pregled automatiziranih tijekova rada i CI/CD pipelinea +- **Kartica Insights** - Analitika o contributorima, komitima i zdravlju projekta +- **Kartica Projects** - Ugrađeni GitHub alati za upravljanje projektima -✅ Pogledajte svoj novi GitHub repo i isprobajte nekoliko stvari, poput uređivanja postavki, dodavanja informacija u repo, stvaranja projekta (poput Kanban ploče) i postavljanja GitHub Actions za automatizaciju. Puno toga možete učiniti! +✅ Istražite svoj novi GitHub repo i isprobajte nekoliko stvari, poput uređivanja postavki, dodavanja informacija u vaš repo, kreiranja projekta (kao Kanban ploča) i postavljanja GitHub Actions za automatizaciju. Možete jako puno toga! --- -## 🚀 Izazov +## 🚀 Izazov -Dobro, vrijeme je da testirate svoje nove GitHub supermoći! 🚀 Evo izazova koji će sve učiniti jasnim na najzadovoljavajući način: +Dobro, vrijeme je da isprobate svoje nove sjajne GitHub supermoći! 🚀 Evo izazova koji će vam pomoći da sve klikne na najzadovoljavajući način: -Pozovite prijatelja (ili člana obitelji koji vas uvijek pita što radite s tim "računalnim stvarima") i krenite na zajedničku avanturu kodiranja! Ovo je mjesto gdje se događa prava magija – stvorite projekt, neka ga oni forkaju, napravite nekoliko grana i spojite promjene kao profesionalci kakvi postajete. +Uzmite prijatelja (ili člana obitelji koji vas stalno pita što radite sa svim tim "računalnim stvarima") i krenite zajedno u suradnički kôd avanturu! Tu se događa prava magija – napravite projekt, neka ga oni forkaju, napravite neke grane i spajajte promjene kao pravi profesionalci u nastajanju. -Neću lagati – vjerojatno ćete se smijati u nekom trenutku (posebno kad oboje pokušate promijeniti isti redak), možda ćete se češati po glavi u zbunjenosti, ali sigurno ćete imati one nevjerojatne "aha!" trenutke koji čine sve učenje vrijednim. Osim toga, postoji nešto posebno u dijeljenju tog prvog uspješnog spajanja s nekim drugim – to je poput male proslave koliko ste daleko stigli! +Neću lagati – vjerojatno ćete se smijati u nekom trenutku (pogotovo kad oboje pokušate promijeniti istu liniju), možda ćete češati glavu u zbunjenosti, ali sigurno ćete imati divne "aha!" trenutke koji čine sav vaš trud vrijednim. Osim toga, postoji nešto posebno u dijeljenju tog prvog uspješnog spajanja s nekim drugim – to je kao mala proslava koliko ste daleko stigli! -Još nemate partnera za kodiranje? Bez brige! GitHub zajednica prepuna je nevjerojatno gostoljubivih ljudi koji se sjećaju kako je bilo biti nov. Potražite repozitorije s oznakom "good first issue" – oni vam doslovno poručuju "Hej početnici, dođite učiti s nama!" Kako je to sjajno? +Još nemate partnera za kodiranje? Nema brige! GitHub zajednica je prepuna iznimno gostoljubivih ljudi koji se sjećaju kako je bilo biti nov. Potražite repozitorije s oznakama "good first issue" – one u osnovi kažu "Hej početnici, dođite učiti s nama!" Kako je to sjajno? -## Kviz nakon predavanja -[Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/en/) +## Post-lecture Quiz +[Post-lecture quiz](https://ff-quizzes.netlify.app/web/en/) ## Pregled i nastavak učenja -Uf! 🎉 Pogledajte se – upravo ste savladali osnove GitHuba kao pravi šampion! Ako vam se mozak sada osjeća malo preopterećeno, to je potpuno normalno i iskreno dobar znak. Upravo ste naučili alate za koje mi je trebalo tjednima da se osjećam ugodno kad sam počinjao. +Uf! 🎉 Pogledajte se – upravo ste osvojili osnove GitHuba kao pravi prvak! Ako vam je mozak malo pun sada, to je potpuno normalno i zapravo dobar znak. Upravo ste naučili alate za koje je meni trebalo tjednima da se osjećam ugodno kada sam počinjao. -Git i GitHub su nevjerojatno moćni (kao, stvarno moćni), i svaki programer kojeg poznajem – uključujući one koji sada izgledaju kao čarobnjaci – morao je vježbati i malo se mučiti prije nego što je sve kliknulo. Činjenica da ste prošli ovu lekciju znači da ste već na putu da savladate neke od najvažnijih alata u programerskom alatu. +Git i GitHub su nevjerojatno moćni (ozbiljno moćni), i svaki programer kojeg znam – uključujući one koji sada izgledaju kao čarobnjaci – morao je vježbati i spoticati se prije nego što mu je sve kliknulo. Činjenica da ste prošli ovu lekciju znači da ste već na putu da svladate neke od najvažnijih alata u razvojnom alatu programera. -Evo nekoliko fantastičnih resursa koji će vam pomoći da vježbate i postanete još bolji: +Evo nekoliko odličnih resursa za praksu i postajanje još bolji: -- [Vodič za doprinos softveru otvorenog koda](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Vaša karta za ostavljanje traga -- [Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) – Držite ovo pri ruci za brzu referencu! +- [Vodič za doprinos open source softveru](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Vaš vodič za ostavljanje traga +- [Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) – Držite ovo pri ruci za brzi pregled! -I zapamtite: praksa donosi napredak, ne savršenstvo! Što više koristite Git i GitHub, to će vam postati prirodnije. GitHub je stvorio neke nevjerojatne interaktivne tečajeve koji vam omogućuju vježbanje u sigurnom okruženju: +I zapamtite: praksa donosi napredak, a ne savršenstvo! Što više koristite Git i GitHub, to postaje prirodnije. GitHub je stvorio neke sjajne interaktivne tečajeve koji vam dopuštaju praksu u sigurnom okruženju: - [Uvod u GitHub](https://github.com/skills/introduction-to-github) -- [Komunikacija pomoću Markdowna](https://github.com/skills/communicate-using-markdown) +- [Komunicirajte koristeći Markdown](https://github.com/skills/communicate-using-markdown) - [GitHub Pages](https://github.com/skills/github-pages) -- [Upravljanje sukobima pri spajanju](https://github.com/skills/resolve-merge-conflicts) +- [Upravljanje sukobima spajanja](https://github.com/skills/resolve-merge-conflicts) + +**Želite li avanturu? Isprobajte ove moderne alate:** +- [Dokumentacija GitHub CLI](https://cli.github.com/manual/) – Za kad želite biti kao čarobnjak komandne linije +- [Dokumentacija GitHub Codespaces](https://docs.github.com/en/codespaces) – Kodirajte u oblaku! +- [Dokumentacija GitHub Actions](https://docs.github.com/en/actions) – Automatizirajte sve što možete +- [Najbolje prakse za Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – Podignite svoj radni tijek na višu razinu -**Osjećate se avanturistički? Pogledajte ove moderne alate:** -- [Dokumentacija za GitHub CLI](https://cli.github.com/manual/) – Za trenutke kad želite biti čarobnjak komandne linije -- [Dokumentacija za GitHub Codespaces](https://docs.github.com/en/codespaces) – Kodirajte u oblaku! -- [Dokumentacija za GitHub Actions](https://docs.github.com/en/actions) – Automatizirajte sve -- [Najbolje prakse za Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – Poboljšajte svoj radni tijek +## GitHub Copilot Agent Izazov 🚀 -## Izazov s GitHub Copilot Agentom 🚀 +Koristite Agent način rada za završetak sljedećeg izazova: -Koristite Agent način rada za dovršavanje sljedećeg izazova: +**Opis:** Kreirajte suradnički projekt web razvoja koji demonstrira kompletan GitHub radni tijek koji ste naučili u ovoj lekciji. Ovaj izazov će vam pomoći da vježbate kreiranje repozitorija, suradničke značajke i moderne Git radne procese u stvarnom scenariju. -**Opis:** Stvorite suradnički projekt web razvoja koji demonstrira kompletan GitHub tijek rada koji ste naučili u ovoj lekciji. Ovaj izazov pomoći će vam da vježbate stvaranje repozitorija, značajke suradnje i moderne Git tijekove rada u stvarnom scenariju. +**Zadatak:** Kreirajte novi javni GitHub repozitorij za jednostavan projekt "Resursi za web razvoj". Repozitorij treba sadržavati dobro strukturirani README.md datoteku s popisom korisnih alata i resursa za web razvoj, organizirano po kategorijama (HTML, CSS, JavaScript, itd.). Postavite repozitorij s pravilima zajednice uključujući licencu, smjernice za doprinos i kodeks ponašanja. Kreirajte barem dvije funkcijske grane: jednu za dodavanje CSS resursa i drugu za JavaScript resurse. Napravite komite na svakoj grani s opisnim porukama komita, zatim kreirajte pull requestove za spajanje promjena natrag u main. Omogućite GitHub značajke kao što su Issues, Discussions i postavite osnovni GitHub Actions tijek rada za automatizirane provjere. -**Zadatak:** Stvorite novi javni GitHub repozitorij za jednostavan projekt "Resursi za web razvoj". Repozitorij bi trebao uključivati dobro strukturiranu README.md datoteku koja navodi korisne alate i resurse za web razvoj, organizirane po kategorijama (HTML, CSS, JavaScript itd.). Postavite repozitorij s odgovarajućim standardima zajednice, uključujući licencu, smjernice za doprinos i kodeks ponašanja. Stvorite najmanje dvije grane za značajke: jednu za dodavanje CSS resursa i drugu za JavaScript resurse. Napravite commitove na svakoj grani s opisnim porukama commitova, a zatim stvorite pull requestove za spajanje promjena natrag u glavnu granu. Omogućite GitHub značajke poput Issues, Discussions i postavite osnovni GitHub Actions tijek rada za automatizirane provjere. +## Zadatak -## Zadatak +Vaša misija, ako je odlučite prihvatiti: Završite [Uvod u GitHub](https://github.com/skills/introduction-to-github) tečaj na GitHub Skills. Ovaj interaktivni tečaj će vam omogućiti praksu svega što ste naučili u sigurnom i vođenom okruženju. Uz to, dobit ćete sjajnu značku kada završite! 🏅 -Vaša misija, ako je odlučite prihvatiti: Završite [Uvod u GitHub](https://github.com/skills/introduction-to-github) tečaj na GitHub Skills. Ovaj interaktivni tečaj omogućit će vam da vježbate sve što ste naučili u sigurnom, vođenom okruženju. Osim toga, dobit ćete cool značku kad završite! 🏅 +**Spremni za više izazova?** +- Postavite SSH autentifikaciju za svoj GitHub račun (zaboravite lozinke!) +- Isprobajte GitHub CLI za svoje svakodnevne Git radnje +- Kreirajte repozitorij s GitHub Actions tijek rada +- Istražite GitHub Codespaces otvaranjem ovog repozitorija u uređivaču u oblaku -**Osjećate se spremni za više izazova?** -- Postavite SSH autentifikaciju za svoj GitHub račun (bez više lozinki!) -- Pokušajte koristiti GitHub CLI za svoje svakodnevne Git operacije -- Stvorite repozitorij s GitHub Actions tijekom rada -- Istražite GitHub Codespaces otvaranjem ovog repozitorija u uređivaču temeljenom na oblaku +--- + +## 🚀 Vaš GitHub vremenski plan majstorstva + +### ⚡ **Što možete učiniti u sljedećih 5 minuta** +- [ ] Oznaciti zvjezdicom ovaj repozitorij i tri druga projekta koja vas zanimaju +- [ ] Postaviti dvofaktorsku autentikaciju na svom GitHub računu +- [ ] Kreirati jednostavan README za svoj prvi repozitorij +- [ ] Zapratiti 5 programera čiji rad vas inspirira + +### 🎯 **Što možete postići u ovom satu** +- [ ] Završiti post-lesson kviz i razmisliti o svom GitHub putovanju +- [ ] Postaviti SSH ključeve za autentifikaciju bez lozinke na GitHubu +- [ ] Kreirati svoj prvi značajan komit s odličnom porukom komita +- [ ] Istražiti GitHubovu karticu "Explore" za otkrivanje trending projekata +- [ ] Vježbati forkanje repozitorija i napraviti malu promjenu + +### 📅 **Vaša tjedna GitHub avantura** +- [ ] Završiti GitHub Skills tečajeve (Uvod u GitHub, Markdown) +- [ ] Napraviti svoj prvi pull request na open source projektu +- [ ] Postaviti GitHub Pages stranicu za prikaz svog rada +- [ ] Pridružiti se GitHub Discussions na projektima koji vas zanimaju +- [ ] Kreirati repozitorij s pravilima zajednice (README, Licenca, itd.) +- [ ] Isprobati GitHub Codespaces za razvoj u oblaku + +### 🌟 **Vaša mjesečna transformacija** +- [ ] Doprinijeti 3 različita open source projekta +- [ ] Mentorirati nekoga novog u GitHubu (proslijediti iskustvo!) +- [ ] Postaviti automatizirane tijekove rada s GitHub Actions +- [ ] Izgraditi portfelj koji prikazuje vaše GitHub doprinose +- [ ] Sudjelovati na Hacktoberfestu ili sličnim zajedničkim događajima +- [ ] Postati održavatelj vlastitog projekta kojem drugi doprinose + +### 🎓 **Završna provjera GitHub majstorstva** + +**Proslavite koliko ste daleko stigli:** +- Što vam je najdraža stvar u korištenju GitHuba? +- Koja vas suradnička značajka najviše oduševljava? +- Kako se sada osjećate u vezi doprinosa open sourceu? +- Koji projekt želite prvi poduprijeti? + +```mermaid +journey + title Vaše Povjerenje u GitHub Putovanje + section Danas + Nervozan: 3: You + Znatiželjan: 4: You + Uzbuđen: 5: You + section Ovaj Tjedan + Vježbanje: 4: You + Doprinos: 5: You + Povezivanje: 5: You + section Sljedeći Mjesec + Suradnja: 5: You + Vođenje: 5: You + Inspiriranje Drugih: 5: You +``` +> 🌍 **Dobrodošli u globalnu zajednicu programera!** Sada imate alate za suradnju s milijunima programera širom svijeta. Vaš prvi doprinos može se činiti malim, ali zapamtite - svaki veliki open source projekt započeo je s nekim tko je napravio svoj prvi komit. Pitanje nije hoćete li utjecati, nego koji će fantastični projekt prvi imati koristi od vaše jedinstvene perspektive! 🚀 -Zapamtite: svaki stručnjak je jednom bio početnik. Možete vi to! 💪 +Zapamtite: svaki stručnjak je nekada bio početnik. Vi to možete! 💪 --- -**Izjava o odricanju odgovornosti**: -Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda. \ No newline at end of file + +**Odricanje od odgovornosti**: +Ovaj dokument je preveden korištenjem AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba se smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda. + \ No newline at end of file diff --git a/translations/hr/1-getting-started-lessons/3-accessibility/README.md b/translations/hr/1-getting-started-lessons/3-accessibility/README.md index 5f27fed4d..bf8c0fde0 100644 --- a/translations/hr/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/hr/1-getting-started-lessons/3-accessibility/README.md @@ -1,221 +1,326 @@ -# Izrada dostupnih web stranica +# Izrada pristupačnih web stranica -![Sve o dostupnosti](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.hr.png) -> Sketchnote autorice [Tomomi Imura](https://twitter.com/girlie_mac) +![Sve o pristupačnosti](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.hr.png) +> Sketchnote autora [Tomomi Imura](https://twitter.com/girlie_mac) -## Kviz prije predavanja -[Kviz prije predavanja](https://ff-quizzes.netlify.app/web/) +```mermaid +journey + title Vaša avantura učenja pristupačnosti + section Osnove + Razumijevanje korisnika: 5: You + Alati za testiranje: 4: You + PRINCIPI POUR-a: 5: You + section Razvijanje vještina + Semantički HTML: 4: You + Vizualni dizajn: 5: You + ARIA tehnike: 4: You + section Usavršavanje prakse + Navigacija tipkovnicom: 5: You + Pristupačnost obrazaca: 4: You + Testiranje u stvarnom svijetu: 5: You +``` +## Predpredavanje kviz +[Predpredavanje kviz](https://ff-quizzes.netlify.app/web/) -> Snaga weba leži u njegovoj univerzalnosti. Pristup svima, bez obzira na invaliditet, ključni je aspekt. +> Moć weba leži u njegovoj univerzalnosti. Pristup svima bez obzira na invaliditet je ključan aspekt. > > \- Sir Timothy Berners-Lee, direktor W3C-a i izumitelj World Wide Weba -Evo nečega što bi vas moglo iznenaditi: kada gradite dostupne web stranice, ne pomažete samo osobama s invaliditetom—zapravo činite web boljim za sve! +Evo nečega što bi vas moglo iznenaditi: kada izrađujete pristupačne web stranice, ne pomažete samo osobama s invaliditetom—već zapravo poboljšavate web za svakoga! -Jeste li ikada primijetili one spuštene rubove na ulicama? Izvorno su dizajnirani za invalidska kolica, ali sada pomažu ljudima s dječjim kolicima, dostavljačima s kolicima, putnicima s prtljagom na kotačima, pa čak i biciklistima. Upravo tako funkcionira dizajn dostupnih web stranica—rješenja koja pomažu jednoj skupini često na kraju koriste svima. Prilično cool, zar ne? +Jeste li ikada primijetili one prilaze na rubnicima ulica? Izvorno su izrađeni za invalidska kolica, ali sada pomažu ljudima s dječjim kolicima, dostavljačima s kolica, putnicima s koferima na kotačićima i biciklistima. Upravo tako funkcionira pristupačni dizajn weba—rješenja koja pomažu jednoj skupini često u konačnici pomažu svima. Lijepo, zar ne? -U ovoj lekciji istražit ćemo kako stvoriti web stranice koje zaista funkcioniraju za sve, bez obzira na način na koji pregledavaju web. Otkrit ćete praktične tehnike koje su već ugrađene u web standarde, isprobati alate za testiranje i vidjeti kako dostupnost čini vaše stranice korisnijima za sve korisnike. +U ovom ćemo satu istražiti kako stvoriti web stranice koje doista funkcioniraju za svakoga, bez obzira na način kojime pregledavaju web. Otkrit ćete praktične tehnike koje su već ugrađene u web standarde, isprobati alate za testiranje i vidjeti kako pristupačnost čini vaše stranice upotrebljivijima za sve korisnike. -Na kraju ove lekcije, imat ćete samopouzdanje da dostupnost učinite prirodnim dijelom vašeg razvojnog procesa. Spremni za istraživanje kako promišljeni dizajnerski izbori mogu otvoriti web za milijarde korisnika? Krenimo! +Na kraju ovog sata steći ćete samopouzdanje da pristupačnost postane prirodan dio vašeg razvojneg tijeka rada. Spremni za istraživanje kako promišljene odluke u dizajnu mogu otvoriti web milijardama korisnika? Krenimo! -> Ovu lekciju možete pronaći na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! +```mermaid +mindmap + root((Pristupačnost weba)) + Users + Čitači zaslona + Navigacija tipkovnicom + Glasovna kontrola + Uvećanje + Technologies + HTML semantika + ARIA atributi + CSS indikatori fokusa + Tipkovnički događaji + Benefits + Šira publika + Bolji SEO + Pravna usklađenost + Univerzalni dizajn + Testing + Automatizirani alati + Ručno testiranje + Povratne informacije korisnika + Prava pomoćna tehnologija +``` +> Ovaj sat možete pohađati na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! ## Razumijevanje asistivnih tehnologija -Prije nego što krenemo s kodiranjem, odvojimo trenutak da razumijemo kako osobe s različitim sposobnostima zapravo doživljavaju web. Ovo nije samo teorija—razumijevanje ovih stvarnih obrazaca navigacije učinit će vas puno boljim programerom! +Prije nego što se bacimo na kodiranje, odvojimo trenutak da shvatimo kako osobe s različitim sposobnostima zapravo doživljavaju web. Ovo nije samo teorija—razumijevanje ovih stvarnih obrazaca navigacije učinit će vas znatno boljim programerom! -Asistivne tehnologije su nevjerojatni alati koji pomažu osobama s invaliditetom da komuniciraju s web stranicama na načine koji bi vas mogli iznenaditi. Kada shvatite kako te tehnologije funkcioniraju, stvaranje dostupnih web iskustava postaje puno intuitivnije. To je kao da učite gledati svoj kod kroz oči nekog drugog. +Asistivne tehnologije su prilično nevjerojatni alati koji pomažu ljudima s invaliditetom da na načine koji bi vas mogli iznenaditi koriste web stranice. Jednom kada ovladate time kako ove tehnologije funkcioniraju, stvaranje pristupačnih web iskustava postaje znatno intuitivnije. To je kao da učite gledati svoj kod očima nekoga drugog. -### Čitači ekrana +### Čitači zaslona -[Čitači ekrana](https://en.wikipedia.org/wiki/Screen_reader) su prilično sofisticirani komadi tehnologije koji digitalni tekst pretvaraju u govor ili brajevo pismo. Iako ih prvenstveno koriste osobe s oštećenjem vida, također su vrlo korisni za korisnike s poteškoćama u učenju, poput disleksije. +[Čitači zaslona](https://en.wikipedia.org/wiki/Screen_reader) su prilično sofisticirani tehnologijski alati koji pretvaraju digitalni tekst u govor ili brajicu. Iako ih primarno koriste osobe s oštećenjima vida, također su izuzetno korisni za korisnike s poteškoćama u učenju poput disleksije. -Volim razmišljati o čitaču ekrana kao o vrlo pametnom pripovjedaču koji vam čita knjigu. Čita sadržaj naglas logičnim redoslijedom, najavljuje interaktivne elemente poput "gumb" ili "link" i pruža prečace na tipkovnici za navigaciju po stranici. Ali evo u čemu je stvar—čitači ekrana mogu raditi svoj posao samo ako izgradimo web stranice s pravilnom strukturom i smislenim sadržajem. Tu vi kao programer dolazite na scenu! +Volim razmišljati o čitaču zaslona kao o jako pametnom naratoru koji vam čita knjigu. Čita sadržaj naglas u logičkom redoslijedu, najavljuje interaktivne elemente poput "gumb" ili "poveznica" te omogućuje prečace na tipkovnici za brzo preskakanje po stranici. Ali evo bitnog dijela—čitači zaslona mogu čarobno raditi samo ako izgradimo web stranice s pravilnom strukturom i smislom sadržaja. Tu nastupate vi kao programer! -**Popularni čitači ekrana na različitim platformama:** -- **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (besplatan i najpopularniji), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (ugrađen) -- **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (ugrađen i vrlo sposoban) -- **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (ugrađen) -- **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (besplatan i otvorenog koda) +**Popularni čitači zaslona na platformama:** +- **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (besplatan i najpopularniji), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (ugrađeni) +- **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (ugrađeni i vrlo sposoban) +- **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (ugrađeni) +- **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (besplatan i open-source) -**Kako čitači ekrana navigiraju web sadržajem:** +**Kako čitači zaslona navigiraju web sadržaj:** -Čitači ekrana pružaju više metoda navigacije koje čine pregledavanje učinkovitijim za iskusne korisnike: -- **Sekvencijalno čitanje**: Čita sadržaj od vrha prema dnu, kao da slijedi knjigu -- **Navigacija po oznakama**: Skakanje između dijelova stranice (zaglavlje, navigacija, glavni dio, podnožje) -- **Navigacija po naslovima**: Preskakanje između naslova za razumijevanje strukture stranice -- **Popisi linkova**: Generiranje popisa svih linkova za brzi pristup -- **Kontrole obrazaca**: Izravna navigacija između polja za unos i gumba +Čitači zaslona nude više metoda navigacije koje olakšavaju pregledavanje iskusnim korisnicima: +- **Sekvencijalno čitanje**: Čita sadržaj od vrha prema dnu, kao čitanje knjige +- **Navigacija po oznakama**: Preskače između dijelova stranice (zaglavlje, navigacija, glavni dio, podnožje) +- **Navigacija po naslovima**: Preskače između naslova radi razumijevanja strukture stranice +- **Liste poveznica**: Generira listu svih poveznica za brzi pristup +- **Kontrole obrasca**: Izravna navigacija između polja unosa i gumba -> 💡 **Evo nečega što me oduševilo**: 68% korisnika čitača ekrana prvenstveno navigira pomoću naslova ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). To znači da je vaša struktura naslova poput karte za korisnike—kada je pravilno postavite, doslovno pomažete ljudima da brže pronađu svoj put kroz vaš sadržaj! +> 💡 **Evo nečega što me zadivilo**: 68% korisnika čitača zaslona primarno navigira pomoću naslova ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). To znači da vaša struktura naslova služi kao karta korisnicima—kada je dobro postavljena, uistinu pomažete ljudima da brže pronađu sadržaj! -### Izgradnja vašeg testnog procesa +### Izgradnja tijeka rada za testiranje -Evo dobrih vijesti—učinkovito testiranje dostupnosti ne mora biti preplavljujuće! Trebat ćete kombinirati automatizirane alate (sjajni su za otkrivanje očitih problema) s nekim ručnim testiranjem. Evo sustavnog pristupa koji, prema mom iskustvu, otkriva najviše problema bez da vam oduzme cijeli dan: +Evo dobre vijesti—učinkovito testiranje pristupačnosti ne mora biti neodoljivo! Trebali biste kombinirati automatizirane alate (koji su sjajni za hvatanje očitih problema) sa nekim praktičnim testiranjem. Evo sustavnog pristupa koji sam otkrio da hvata najviše problema bez da vam oduzme cijeli dan: -**Osnovni proces ručnog testiranja:** +**Osnovni tijek rada ručnog testiranja:** ```mermaid -graph TD - A[Start Testing] --> B{Keyboard Navigation} - B --> C[Tab through all interactive elements] - C --> D{Screen Reader Testing} - D --> E[Test with NVDA/VoiceOver] - E --> F{Zoom Testing} - F --> G[Zoom to 200% and test functionality] - G --> H{Color/Contrast Check} - H --> I[Verify all text meets contrast ratios] - I --> J{Focus Management} - J --> K[Ensure focus indicators are visible] - K --> L[Testing Complete] +flowchart TD + A[🚀 Započni testiranje] --> B{⌨️ Navigacija tipkovnicom} + B --> C[Tabiranje kroz sve interaktivne elemente] + C --> D{🎧 Testiranje čitača zaslona} + D --> E[Testiranje s NVDA/VoiceOver] + E --> F{🔍 Testiranje zumiranja} + F --> G[Zumiraj na 200% i testiraj funkcionalnost] + G --> H{🎨 Provjera boje/kontrasta} + H --> I[Provjeri ispunjava li sav tekst omjere kontrasta] + I --> J{👁️ Upravljanje fokusom} + J --> K[Osiguraj da su indikatori fokusa vidljivi] + K --> L[✅ Testiranje završeno] + + style A fill:#e3f2fd + style L fill:#e8f5e8 + style B fill:#fff3e0 + style D fill:#f3e5f5 + style F fill:#e0f2f1 + style H fill:#fce4ec + style J fill:#e8eaf6 ``` - -**Kontrolni popis za testiranje korak po korak:** -1. **Navigacija tipkovnicom**: Koristite samo Tab, Shift+Tab, Enter, Space i strelice -2. **Testiranje čitača ekrana**: Omogućite NVDA, VoiceOver ili Narrator i navigirajte zatvorenih očiju -3. **Testiranje zumiranja**: Testirajte na razinama zumiranja od 200% i 400% +**Korak-po-korak kontrolni popis za testiranje:** +1. **Navigacija samo tipkovnicom**: Koristite samo Tab, Shift+Tab, Enter, Space i strelice +2. **Testiranje čitačem zaslona**: Omogućite NVDA, VoiceOver ili Narratora i navigirajte s zatvorenim očima +3. **Testiranje zumiranja**: Testirajte na razinama povećanja 200% i 400% 4. **Provjera kontrasta boja**: Provjerite sav tekst i UI komponente -5. **Testiranje indikatora fokusa**: Osigurajte da svi interaktivni elementi imaju vidljive stanja fokusa +5. **Testiranje indikatora fokusa**: Osigurajte da svi interaktivni elementi imaju vidljivo stanje fokusa -✅ **Započnite s Lighthouseom**: Otvorite DevTools u pregledniku, pokrenite Lighthouse analizu dostupnosti, a zatim koristite rezultate za usmjeravanje vašeg fokusa na ručno testiranje. +✅ **Počnite s Lighthouseom**: Otvorite DevTools u pregledniku, pokrenite Lighthouse reviziju pristupačnosti i koristite rezultate da usmjerite svoja ručna testiranja. ### Alati za zumiranje i povećanje -Znate kako ponekad širite prste na telefonu kad je tekst premalen ili škiljite na zaslonu laptopa na jakom suncu? Mnogi korisnici svakodnevno se oslanjaju na alate za povećanje kako bi sadržaj bio čitljiv. To uključuje osobe s slabim vidom, starije osobe i svakoga tko je ikada pokušao čitati web stranicu na otvorenom. +Znate onaj osjećaj kada prstima štipate zaslon telefona da povećate tekst jer je premalen ili kada se mrštite na zaslon prijenosnog računala na jakom suncu? Mnogi korisnici svakodnevno koriste alate za povećanje kako bi sadržaj bio čitljiv. To uključuje osobe s oštećenim vidom, starije osobe i svakoga tko je ikada pokušao čitati web vani. -Moderne tehnologije za zumiranje evoluirale su izvan pukog povećanja. Razumijevanje kako ti alati funkcioniraju pomoći će vam da stvorite responzivne dizajne koji ostaju funkcionalni i privlačni na bilo kojoj razini povećanja. +Moderne tehnologije zumiranja nadilaze samo povećavanje predmeta. Razumijevanje kako ovi alati funkcioniraju pomoći će vam da stvorite responzivne dizajne koji ostaju funkcionalni i privlačni na bilo kojoj razini povećanja. -**Suvremene mogućnosti zumiranja preglednika:** -- **Zumiranje stranice**: Proporcionalno povećava sav sadržaj (tekst, slike, izgled) - ovo je preferirana metoda -- **Samo zumiranje teksta**: Povećava veličinu fonta uz održavanje izvornog izgleda -- **Zumiranje širenjem prstiju**: Podrška za mobilne geste za privremeno povećanje -- **Podrška preglednika**: Svi moderni preglednici podržavaju zumiranje do 500% bez narušavanja funkcionalnosti +**Sposobnosti modernog povećanja u preglednicima:** +- **Zumiranje stranice**: Proporcionalno se povećava sav sadržaj (tekst, slike, raspored) - to je preferirana metoda +- **Zumiranje samo teksta**: Povećava veličinu fonta zadržavajući izvorni raspored +- **Zumiranje štipanjem**: Pokreti za mobilne uređaje za privremeno povećanje +- **Podrška preglednika**: Svi moderni preglednici podržavaju zumiranje do 500% bez prekida funkcionalnosti **Specijalizirani softver za povećanje:** -- **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (ugrađen), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) -- **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (ugrađen s naprednim značajkama) +- **Windows**: [Povećalo](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (ugrađeni), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) +- **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (ugrađeni s naprednim značajkama) -> ⚠️ **Dizajnerska razmatranja**: WCAG zahtijeva da sadržaj ostane funkcionalan kada je zumiran do 200%. Na ovoj razini, horizontalno pomicanje treba biti minimalno, a svi interaktivni elementi trebaju ostati dostupni. +> ⚠️ **Dizajnerska napomena**: WCAG zahtijeva da sadržaj ostane funkcionalan pri zumiranju do 200%. Na toj razini horizontalno pomicanje trebalo bi biti minimalno, a svi interaktivni elementi trebaju ostati dostupni. -✅ **Testirajte svoj responzivni dizajn**: Zumirajte svoj preglednik na 200% i 400%. Prilagođava li se vaš izgled skladno? Možete li i dalje pristupiti svim funkcijama bez prekomjernog pomicanja? +✅ **Testirajte svoj responzivni dizajn**: Zumirajte preglednik na 200% i 400%. Prilagođava li se vaš raspored uredno? Možete li još uvijek pristupiti svim funkcionalnostima bez prevelikog pomicanja? -## Suvremeni alati za testiranje dostupnosti +## Moderni alati za testiranje pristupačnosti -Sada kada razumijete kako ljudi navigiraju webom pomoću asistivnih tehnologija, istražimo alate koji vam pomažu u izgradnji i testiranju dostupnih web stranica. +Sada kada razumijete kako ljudi navigiraju webom koristeći asistivne tehnologije, istražimo alate koji vam pomažu graditi i testirati pristupačne web stranice. -Razmislite o tome ovako: automatizirani alati su izvrsni za otkrivanje očitih problema (poput nedostatka alt teksta), dok ručno testiranje pomaže osigurati da vaša stranica bude ugodna za korištenje u stvarnom svijetu. Zajedno vam pružaju sigurnost da vaše stranice funkcioniraju za sve. +Razmislite o tome ovako: automatizirani alati su izvrsni u hvatanju očitih problema (poput nedostajućeg alt teksta), dok vam ručno testiranje pomaže osigurati da se vaša stranica stvarno dobro koristi u stvarnom svijetu. Zajedno vam daju povjerenje da vaše stranice funkcioniraju za svakoga. ### Testiranje kontrasta boja -Evo dobrih vijesti: kontrast boja jedan je od najčešćih problema s dostupnošću, ali je također jedan od najlakših za popraviti. Dobar kontrast koristi svima—od korisnika s oštećenjem vida do ljudi koji pokušavaju čitati svoje telefone na plaži. +Evo dobre vijesti: kontrast boja je jedan od najčešćih problema pristupačnosti, ali i jedan od najlakših za ispraviti. Dobar kontrast koristi svima—od korisnika s oštećenjem vida do ljudi koji pokušavaju čitati s telefona na plaži. **WCAG zahtjevi za kontrast:** | Vrsta teksta | WCAG AA (Minimalno) | WCAG AAA (Poboljšano) | |--------------|---------------------|-----------------------| -| **Normalan tekst** (manje od 18pt) | Omjer kontrasta 4.5:1 | Omjer kontrasta 7:1 | +| **Obični tekst** (ispod 18pt) | Omjer kontrasta 4.5:1 | Omjer kontrasta 7:1 | | **Veliki tekst** (18pt+ ili 14pt+ podebljano) | Omjer kontrasta 3:1 | Omjer kontrasta 4.5:1 | | **UI komponente** (gumbi, obrubi obrazaca) | Omjer kontrasta 3:1 | Omjer kontrasta 3:1 | **Osnovni alati za testiranje:** -- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Desktop aplikacija s odabirom boja +- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Desktop aplikacija s odabiračem boja - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Web alat s trenutnim povratnim informacijama -- [Stark](https://www.getstark.co/) - Plugin za dizajnerske alate poput Figma, Sketch, Adobe XD -- [Accessible Colors](https://accessible-colors.com/) - Pronađite dostupne palete boja +- [Stark](https://www.getstark.co/) - dodatak za dizajnerske alate kao Figma, Sketch, Adobe XD +- [Accessible Colors](https://accessible-colors.com/) - Pronađite pristupačne palete boja -✅ **Izgradite bolje palete boja**: Započnite s bojama vašeg brenda i koristite alate za provjeru kontrasta kako biste stvorili dostupne varijacije. Dokumentirajte ih kao dostupne boje u vašem dizajnerskom sustavu. +✅ **Izgradite bolje palete boja**: Počnite s bojama svojeg brenda i koristite alate za provjeru kontrasta kako biste stvorili pristupačne varijacije. Dokumentirajte ih kao pristupačne boje u svom sustavu dizajna. -### Sveobuhvatna provjera dostupnosti +### Sveobuhvatni audit pristupačnosti -Najbolje testiranje dostupnosti kombinira više pristupa. Nijedan alat ne može otkriti sve, pa izgradnja rutine testiranja s različitim metodama osigurava temeljitu pokrivenost. +Najdjelotvornije testiranje pristupačnosti kombinira više pristupa. Nijedan alat sam ne može uhvatiti sve, pa izgradnja rutine testiranja s različitim metodama osigurava temeljitu pokrivenost. **Testiranje u pregledniku (ugrađeno u DevTools):** -- **Chrome/Edge**: Lighthouse analiza dostupnosti + panel za dostupnost -- **Firefox**: Inspektor dostupnosti s detaljnim prikazom stabla -- **Safari**: Kartica za provjeru u Web Inspectoru s simulacijom VoiceOvera +- **Chrome/Edge**: Lighthouse revizija pristupačnosti + pristupačni panel +- **Firefox**: Accessibility Inspector s detaljnim prikazom stabla +- **Safari**: Kartica revizije u Web Inspectoru s simulacijom VoiceOvera **Profesionalni dodaci za testiranje:** -- [axe DevTools](https://www.deque.com/axe/devtools/) - Industrijski standard za automatizirano testiranje -- [WAVE](https://wave.webaim.org/extension/) - Vizualne povratne informacije s isticanjem grešaka -- [Accessibility Insights](https://accessibilityinsights.io/) - Microsoftov sveobuhvatni alat za testiranje +- [axe DevTools](https://www.deque.com/axe/devtools/) - industrijski standard za automatizirano testiranje +- [WAVE](https://wave.webaim.org/extension/) - vizualna povratna informacija s označavanjem grešaka +- [Accessibility Insights](https://accessibilityinsights.io/) - Microsoftov sveobuhvatni paket za testiranje -**Alati za naredbeni redak i integraciju CI/CD:** -- [axe-core](https://github.com/dequelabs/axe-core) - JavaScript biblioteka za automatizirano testiranje -- [Pa11y](https://pa11y.org/) - Alat za testiranje dostupnosti putem naredbenog retka -- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Automatizirano ocjenjivanje dostupnosti +**Alati naredbenog retka i integracija CI/CD:** +- [axe-core](https://github.com/dequelabs/axe-core) - JavaScript knjižnica za automatizirano testiranje +- [Pa11y](https://pa11y.org/) - alat za testiranje pristupačnosti s naredbenog retka +- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - automatizirano bodovanje pristupačnosti -> 🎯 **Cilj testiranja**: Ciljajte na Lighthouse ocjenu dostupnosti od 95+ kao osnovni standard. Zapamtite, automatizirani alati otkrivaju samo oko 30-40% problema s dostupnošću—ručno testiranje i dalje je ključno! +> 🎯 **Cilj testiranja**: Ciljajte na Lighthouse rezultat pristupačnosti od 95+ kao osnovnu vrijednost. Zapamtite, automatizirani alati hvataju samo oko 30-40% problema—ručno testiranje je i dalje nužno! -## Izgradnja dostupnosti od samog početka +### 🧠 **Provjera vještina testiranja: Spremni za pronalazak problema?** -Ključ uspjeha u dostupnosti je uključiti je u temelje od samog početka. Znam da je primamljivo misliti "dodat ću dostupnost kasnije", ali to je kao da pokušavate dodati rampu kući nakon što je već izgrađena. Moguće? Da. Lako? Ne baš. +**Pogledajmo kako se osjećate u vezi testiranja pristupačnosti:** +- Koja vam se metoda testiranja sada čini najpristupačnijom? +- Možete li zamisliti korištenje samo tipkovnice za cijeli dan? +- Koja je jedna prepreka pristupačnosti koju ste osobno iskusili na internetu? -Razmislite o dostupnosti kao o planiranju kuće—mnogo je lakše uključiti pristup za invalidska kolica u početne arhitektonske planove nego sve naknadno prilagođavati. +```mermaid +pie title "Problemi pristupačnosti otkriveni različitim metodama" + "Automatizirani alati" : 35 + "Ručno testiranje" : 40 + "Povratne informacije korisnika" : 25 +``` +> **Poticaj samopouzdanja**: Profesionalni testeri pristupačnosti koriste upravo ovu kombinaciju metoda. Učite industrijski standard! + +## Izgradnja pristupačnosti od temelja -### Načela POUR: Temelj vaše dostupnosti +Ključ uspjeha u pristupačnosti je izgraditi je u temelje od prvog dana. Znam da je primamljivo misliti "Dodam pristupačnost kasnije," ali to je kao pokušavati dodati rampu kući nakon što je već izgrađena. Moguće? Da. Jednostavno? Ne baš. -Smjernice za dostupnost web sadržaja (WCAG) temelje se na četiri osnovna načela koja čine akronim POUR. Ne brinite—ovo nisu suhoparni akademski koncepti! Zapravo su to praktične smjernice za stvaranje sadržaja koji funkcionira za sve. +Razmislite o pristupačnosti kao o planiranju kuće—mnogo je lakše uključiti pristupačnost za invalidska kolica u početne arhitektonske planove nego kasnije sve retrofittingom prilagođavati. -Kada se naviknete na POUR, donošenje odluka o dostupnosti postaje puno intuitivnije. To je kao da imate mentalni kontrolni popis koji vodi vaše dizajnerske odluke. Razložimo to: +### Principi POUR: Vaši temelji pristupačnosti -**🔍 Perceptivno**: Informacije moraju biti predstavljene na način koji korisnici mogu percipirati svojim dostupnim osjetilima +Smjernice za pristupačnost web sadržaja (WCAG) temelje se na četiri osnovna principa koja čine akronim POUR. Ne brinite—ovo nisu dosadni akademski koncepti! Oni su zapravo praktične smjernice za stvaranje sadržaja koji funkcionira za svakoga. -- Pružite tekstualne alternative za sadržaj koji nije tekst (slike, videozapisi, audio) +Nakon što ovladate POUR-om, donošenje odluka o pristupačnosti postaje znatno intuitivnije. To je kao da imate mentalni kontrolni popis koji vodi vaše dizajnerske izbore. Razložimo ih: + +```mermaid +flowchart LR + A[🔍 PERCEPCIJSKO
Mogu li korisnici to osjetiti?] --> B[🎮 OPERABILNO
Mogu li korisnici to koristiti?] + B --> C[📖 RAZUMLJIVO
Razumiju li to korisnici?] + C --> D[💪 ROBUSTNO
Radi li to posvuda?] + + A1[Alternativni tekst
Natpisi
Kontrast] --> A + B1[Pristup preko tipkovnice
Bez napadaja
Vremenska ograničenja] --> B + C1[Jasan jezik
Predvidljivo
Pomoć pri pogreškama] --> C + D1[Valjan kod
Kompatibilno
Otporno na budućnost] --> D + + style A fill:#e1f5fe + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 +``` +**🔍 Percepcijsko**: Informacije moraju biti prikazane na način na koji ih korisnici mogu percipirati svojim dostupnim osjetilima + +- Osigurajte tekstualne alternative za ne-tekstualni sadržaj (slike, video, zvuk) - Osigurajte dovoljan kontrast boja za sav tekst i UI komponente -- Ponudite titlove i transkripte za multimedijski sadržaj -- Dizajnirajte sadržaj koji ostaje funkcionalan kada se poveća do 200% +- Nudite titlove i transkripte za multimedijski sadržaj +- Dizajnirajte sadržaj koji ostaje funkcionalan pri uvećanju do 200% - Koristite višestruke senzorne karakteristike (ne samo boju) za prenošenje informacija -**🎮 Operativno**: Sve komponente sučelja moraju biti operativne putem dostupnih metoda unosa +**🎮 Operativno**: Sve komponente sučelja moraju biti upravljive dostupnim metodama unosa -- Omogućite pristup svim funkcijama putem navigacije tipkovnicom -- Pružite korisnicima dovoljno vremena za čitanje i interakciju sa sadržajem -- Izbjegavajte sadržaj koji uzrokuje napade ili vestibularne poremećaje -- Pomozite korisnicima da učinkovito navigiraju jasnom strukturom i oznakama -- Osigurajte da interaktivni elementi imaju odgovarajuće veličine ciljeva (minimalno 44px) +- Omogućite svu funkcionalnost putem navigacije tipkovnicom +- Korisnicima omogućite dovoljno vremena za čitanje i interakciju sa sadržajem +- Izbjegavajte sadržaj koji može izazvati napadaje ili vestibularne poremećaje +- Pomognite korisnicima u efikasnoj navigaciji jasnom strukturom i oznakama +- Osigurajte da interaktivni elementi imaju adekvatne veličine ciljeva (najmanje 44px) -**📖 Razumljivo**: Informacije i operacija UI-a moraju biti jasne i razumljive +**📖 Razumljivo**: Informacije i način rada sučelja moraju biti jasni i razumljivi -- Koristite jasan, jednostavan jezik prilagođen vašoj publici -- Osigurajte da se sadržaj pojavljuje i funkcionira na predvidljiv, dosljedan način -- Pružite jasne upute i poruke o greškama za unos korisnika -- Pomozite korisnicima da razumiju i isprave pogreške u obrascima +- Koristite jasan, jednostavan jezik prikladan vašoj publici +- Osigurajte da sadržaj izgleda i radi predvidljivo i dosljedno +- Pružite jasne upute i poruke o pogreškama za unos korisnika +- Pomognite korisnicima razumjeti i ispraviti pogreške u obrascima - Organizirajte sadržaj logičnim redoslijedom čitanja i hijerarhijom informacija **💪 Robusno**: Sadržaj mora pouzdano funkcionirati na različitim tehnologijama i asistivnim uređajima -- Koristite valjani, semantički HTML kao temelj -- Osigurajte kompatibilnost s trenutnim i budućim asistivnim tehnologijama -- Slijedite web standarde i najbolje prakse za označavanje -- Testirajte na različitim preglednicima, uređajima i asistivnim alatima -- Strukturirajte sadržaj tako da se dostojanstveno degradira kada napredne značajke nisu podržane +- **Koristite valjani, semantički HTML kao temelj** +- **Osigurajte kompatibilnost s postojećim i budućim asistivnim tehnologijama** +- **Slijedite web standarde i najbolje prakse za označavanje** +- **Testirajte u različitim preglednicima, na različitim uređajima i s pomoćnim alatima** +- **Strukturirajte sadržaj tako da se postupno prilagođava kad napredne značajke nisu podržane** + +### 🎯 **Provjera POUR principa: Kako ga učvrstiti** + +**Brza refleksija na temelje:** +- Možete li se sjetiti značajke web stranice koja krši svaki od POUR principa? +- Koji vam princip kao programeru djeluje najprirodnije? +- Kako bi ti principi mogli poboljšati dizajn za sve, a ne samo za osobe s invaliditetom? + +```mermaid +quadrantChart + title MATRICA UTJECAJA POUR PRINCIPA + x-axis Mali napor --> Veliki napor + y-axis Mali utjecaj --> Veliki utjecaj + quadrant-1 Brzi Pobjednici + quadrant-2 Veliki Projekti + quadrant-3 Razmotriti Kasnije + quadrant-4 Strateški Fokus + + Alt Text: [0.2, 0.9] + Color Contrast: [0.3, 0.8] + Semantic HTML: [0.4, 0.9] + Keyboard Nav: [0.6, 0.8] + ARIA Complex: [0.8, 0.7] + Screen Reader Testing: [0.7, 0.6] +``` +> **Zapamtite**: Počnite s poboljšanjima koja imaju velik utjecaj i malu potrošnju truda. Semantički HTML i alt tekst daju vam najveći pristupačni napredak uz najmanji napor! -## Stvaranje dostupnog vizualnog dizajna +## Izrada pristupačnog vizualnog dizajna -Dobar vizualni dizajn i dostupnost idu ruku pod ruku. Kada dizajnirate s dostupnošću na umu, često otkrivate da ti zahtjevi vode do čišćih, elegantnijih rješenja koja koriste svim korisnicima. +Dobar vizualni dizajn i pristupačnost idu ruku pod ruku. Kad dizajnirate imajući pristupačnost na umu, često otkrijete da ti ograničenja vode do čišćih, elegantnijih rješenja koja koriste svim korisnicima. -Istražimo kako stvoriti vizualno privlačne dizajne koji funkcioniraju za sve, bez obzira na njihove vizualne sposobnosti ili uvjete u kojima pregledavaju vaš sadržaj. +Istražimo kako stvoriti vizualno privlačne dizajne koji funkcioniraju za sve, bez obzira na njihove vizualne sposobnosti ili uvjete pod kojima gledaju vaš sadržaj. -### Strategije za boje i vizual -Boja je moćan alat za komunikaciju, ali nikada ne bi trebala biti jedini način prenošenja važnih informacija. Dizajniranje izvan boja stvara robusnija, inkluzivnija iskustva koja funkcioniraju u različitim situacijama. +### Strategije boja i vizualne pristupačnosti + +Boja je snažan komunikacijski alat, ali nikad ne bi trebala biti jedini način na koji prenosite važne informacije. Dizajniranje izvan boje stvara robusnije, inkluzivnije iskustvo koje djeluje u više situacija. **Dizajnirajte za razlike u percepciji boja:** -Otprilike 8% muškaraca i 0,5% žena ima neki oblik razlike u percepciji boja (često nazvano "sljepoća za boje"). Najčešći tipovi su: -- **Deuteranopija**: Teškoće u razlikovanju crvene i zelene boje -- **Protanopija**: Crvena boja izgleda tamnije -- **Tritanopija**: Teškoće s plavom i žutom bojom (rijetko) +Otprilike 8% muškaraca i 0,5% žena ima neki oblik teškoće u percepciji boja (često nazvan "sljepoćom za boje"). Najčešći tipovi su: +- **Deuteranopija**: Teškoće u razlikovanju crvene i zelene +- **Protanopija**: Crvena se čini tamnijom +- **Tritanopija**: Teškoće s plavom i žutom (rijetko) -**Strategije za inkluzivnu upotrebu boja:** +**Inkluzivne strategije boja:** ```css /* ❌ Bad: Using only color to indicate status */ @@ -242,19 +347,19 @@ Otprilike 8% muškaraca i 0,5% žena ima neki oblik razlike u percepciji boja ( } ``` -**Izvan osnovnih zahtjeva za kontrast:** +**Iza osnovnih zahtjeva kontrasta:** - Testirajte svoje odabire boja pomoću simulatora za sljepoću na boje -- Koristite uzorke, teksture ili oblike uz kodiranje bojama +- Koristite uzorke, teksture ili oblike uz boje - Osigurajte da interaktivna stanja ostanu prepoznatljiva bez boje -- Razmislite kako vaš dizajn izgleda u načinu visokog kontrasta +- Razmotrite kako vaš dizajn izgleda u načinu visokog kontrasta -✅ **Testirajte pristupačnost boja**: Koristite alate poput [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) kako biste vidjeli kako vaša stranica izgleda korisnicima s različitim vrstama percepcije boja. +✅ **Testirajte pristupačnost vaših boja**: Koristite alate poput [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) da vidite kako vaša stranica izgleda korisnicima s različitim vrstama teškoća u percepciji boja. -### Indikatori fokusa i dizajn interakcije +### Pokazivači fokusa i dizajn interakcije -Indikatori fokusa digitalni su ekvivalent pokazivaču miša—pokazuju korisnicima tipkovnice gdje se nalaze na stranici. Dobro dizajnirani indikatori fokusa poboljšavaju iskustvo za sve, čineći interakcije jasnim i predvidljivim. +Pokazivači fokusa su digitalni ekvivalent pokazivača miša — pokazuju korisnicima tipkovnice gdje se nalaze na stranici. Dobro dizajnirani pokazivači fokusa poboljšavaju iskustvo za sve tako da čine interakcije jasnima i predvidivima. -**Najbolje prakse za moderne indikatore fokusa:** +**Najbolje prakse modernih pokazivača fokusa:** ```css /* Enhanced focus styles that work across browsers */ @@ -283,23 +388,44 @@ button:focus:not(:focus-visible) { } ``` -**Zahtjevi za indikatore fokusa:** -- **Vidljivost**: Mora imati omjer kontrasta od najmanje 3:1 u odnosu na okolne elemente +**Zahtjevi za pokazivače fokusa:** +- **Vidljivost**: Mora imati omjer kontrasta barem 3:1 s okolinom - **Širina**: Minimalna debljina od 2px oko cijelog elementa -- **Postojanost**: Treba ostati vidljiv dok se fokus ne premjesti na drugo mjesto -- **Razlikovanje**: Mora biti vizualno različit od drugih stanja korisničkog sučelja +- **Upornost**: Treba ostati vidljiv dok se fokus ne premjesti negdje drugdje +- **Razlikovanje**: Mora biti vizualno različit od drugih stanja sučelja -> 💡 **Savjet za dizajn**: Odlični indikatori fokusa često koriste kombinaciju obruba, sjene okvira i promjena boje kako bi osigurali vidljivost na različitim pozadinama i u različitim kontekstima. +> 💡 **Savjet za dizajn**: Odlični pokazivači fokusa često koriste kombinaciju obruba, sjene okvira i promjena boje kako bi osigurali vidljivost na različitim pozadinama i okolnostima. -✅ **Provjerite indikatore fokusa**: Prođite kroz svoju web stranicu pomoću tipke Tab i zabilježite koji elementi imaju jasne indikatore fokusa. Jesu li neki teško vidljivi ili potpuno nedostaju? +✅ **Provjerite pokazivače fokusa**: Tabirajte kroz vašu web stranicu i zabilježite koji elementi imaju jasne pokazivače fokusa. Ima li koji koji je teško vidjeti ili potpuno nedostaje? ### Semantički HTML: Temelj pristupačnosti -Semantički HTML je poput GPS sustava za asistivne tehnologije na vašoj web stranici. Kada koristite prave HTML elemente za njihovu namjenu, zapravo pružate čitačima ekrana, tipkovnicama i drugim alatima detaljnu kartu koja pomaže korisnicima da se učinkovito kreću. +Semantički HTML je poput davanja GPS sustava pomoćnim tehnologijama za vašu web stranicu. Kad koristite ispravne HTML elemente za njihovu namjenu, zapravo dajete čitačima zaslona, tipkovnicama i drugim alatima detaljnu kartu za učinkovitu navigaciju korisnika. -Evo analogije koja mi je stvarno pomogla: semantički HTML je razlika između dobro organizirane knjižnice s jasnim kategorijama i korisnim oznakama naspram skladišta gdje su knjige nasumično razbacane. Oba mjesta imaju iste knjige, ali u kojem biste radije pokušali nešto pronaći? Upravo tako! +Evo analogije koja mi je stvarno pala na pamet: semantički HTML je razlika između dobro organizirane knjižnice s jasnim kategorijama i korisnim oznakama naspram skladišta gdje su knjige nasumično razbacane. Oba mjesta imaju iste knjige, ali u kojem biste radije pokušali nešto pronaći? Upravo tako! -**Temeljni elementi pristupačne strukture stranice:** +```mermaid +flowchart TD + A[🏠 HTML Dokument] --> B[📰 zaglavlje] + A --> C[🧭 navigacija] + A --> D[📄 glavni dio] + A --> E[📋 podnožje] + + B --> B1[h1: Ime stranice
Logo & brendiranje] + C --> C1[ul: Navigacija
Primarni linkovi] + D --> D1[članak: Sadržaj
odjeljak: Pododjeljci] + D --> D2[prilozi: Bočna traka
Povezani sadržaj] + E --> E1[navigacija: Linkovi u podnožju
Informacije o autorskim pravima] + + D1 --> D1a[h1: Naslov stranice
h2: Glavni odjeljci
h3: Pododjeljci] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 +``` +**Građevni blokovi pristupačne strukture stranice:** ```html @@ -354,34 +480,60 @@ Evo analogije koja mi je stvarno pomogla: semantički HTML je razlika između do ``` -**Zašto semantički HTML transformira pristupačnost:** +**Zašto semantički HTML mijenja pristupačnost:** -| Semantički element | Namjena | Prednost za čitače ekrana | -|--------------------|---------|--------------------------| -| `
` | Zaglavlje stranice ili sekcije | "Banner landmark" - brzo navigiranje na vrh | -| `