@ -187,7 +187,7 @@ Ako konštrukcia Titanicu s oddeleniami, ktorá vyzerala pevne, kým sa nezalial
Namiesto pobehovania za vlastným chvostom vytvoríme **centralizovaný systém správy stavu**. Predstavte si to ako mať jedného veľmi organizovaného človeka, ktorý má na starosti všetko dôležité:
```mermaid
flowchart TD
@ -798,7 +798,7 @@ Táto výzva vám pomôže myslieť ako profesionálny vývojár, ktorý zvažuj
V tomto projekte sa naučíte, ako vytvoriť fiktívnu banku. Tieto lekcie obsahujú pokyny, ako navrhnúť webovú aplikáciu a poskytnúť trasy, vytvoriť formuláre, spravovať stav a získavať údaje z API, z ktorého môžete načítať údaje banky.
@ -78,7 +78,7 @@ Keďže VSCode.dev vyžaduje aspoň jeden súbor na otvorenie repozitára, vytvo
4. **Napíšte** správu o potvrdení: „Pridať počiatočnú HTML štruktúru“
5. **Kliknite** na „Commit new file“, aby ste uložili svoje zmeny
**Čo tento počiatočný setup dosahuje:**
- **Zavádza** správnu štruktúru dokumentu HTML5 so semantickými prvkami
@ -104,7 +104,7 @@ Teraz, keď je základ vášho repozitára nastavený, prejdime na VSCode.dev pr
✅ **Indikátor úspechu**: Mali by ste vidieť súbory vášho projektu v bočnom paneli Explorer a `index.html` dostupný na úpravu v hlavnej oblasti editora.
**Čo uvidíte v rozhraní:**
- **Bočný panel Explorer**: **Zobrazuje** súbory a štruktúru priečinkov vášho repozitára
@ -448,7 +448,7 @@ Rozšírenia zlepšujú váš vývojový zážitok poskytovaním funkcií ako ž
**Okamžité výsledky po inštalácii:**
Po inštalácii CodeSwing sa v editore zobrazí živý náhľad vašej webovej stránky životopisu. To vám umožní presne vidieť, ako vaša stránka vyzerá, keď robíte zmeny.
## 🗺️ Vaša cesta učenia sa vývoja AI aplikácií
@ -189,7 +189,7 @@ mindmap
```
**Základný princíp**: Vývoj AI aplikácií kombinuje tradičné webové vývojárske zručnosti s integráciou AI služieb, čím vytvára inteligentné aplikácie, ktoré pôsobia prirodzene a reagujú na používateľov.
**Čo robí playground tak užitočným:**
- **Vyskúšajte** rôzne AI modely ako GPT-4o-mini, Claude a ďalšie (všetky zadarmo!)
@ -199,7 +199,7 @@ mindmap
Keď si trošku pohrajete, stačí kliknúť na záložku "Code" a vybrať programovací jazyk, aby ste získali implementačný kód, ktorý budete potrebovať.
## Nastavenie backendovej integrácie v Pythone
@ -2354,14 +2354,14 @@ Chcete si tento projekt vyskúšať v cloudovom vývojovom prostredí? GitHub Co
- **Prejdite** na [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Kliknite** na "Use this template" v pravom hornom rohu (uistite sa, že ste prihlásení do GitHubu)
**Krok 2: Spustite Codespaces**
- **Otvorte** práve vytvorený repozitár
- **Kliknite** na zelené tlačidlo "Code" a vyberte "Codespaces"
- **Zvoľte** "Create codespace on main" pre spustenie vývojového prostredia
Každá lekcia obsahuje úlohu na dokončenie, kontrolu vedomostí aj výzvu, ktoré vás prevedú učením tém ako:
- Promptovanie a inžinierstvo promptov
@ -114,7 +114,7 @@ Postupujte podľa krokov:
Vo vašej skopírovanej verzii repozitára kliknite na tlačidlo **Code** a vyberte **Open with Codespaces**. Toto vytvorí nový Codespace, kde budete pracovať.
@ -17,7 +17,7 @@ Poglej, popolnoma razumem, če se ti programiranje zdaj zdi strašljivo. Ko sem
Danes bomo raziskali neverjetna orodja, zaradi katerih sodobni spletni razvoj ni le mogoč, ampak tudi resnično zasvojen. Govorim o točno teh urejevalnikih, brskalnikih in potekih dela, ki jih razvijalci pri Netflixu, Spotifyju in tvoji najljubši indie aplikacijski študiii uporabljajo vsak dan. In tukaj je del, ki te bo spravil v veselo plesanje: večina teh profesionalnih, industrijsko standardnih orodij je popolnoma brezplačnih!
@ -17,7 +17,7 @@ Vem, da je na začetku morda precej, spomnim se, kako sem strmel v svojo prvo Gi
To pot bomo prehodili skupaj, korak za korakom. Brez hitenja, brez pritiska – samo ti, jaz in nekaj res kul orodij, ki bodo postali tvoji novi najboljši prijatelji!
@ -606,7 +606,7 @@ Najprej poišči repozitorij (ali **repo**) na GitHub, ki te zanima in v katereg
✅ Dober način za iskanje 'prijaznih za začetnike' repozitorijev je [iskanje po oznaki 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Obstaja več načinov za kopiranje kode. Eden izmed načinov je "kloniranje" vsebine repozitorija, preko HTTPS, SSH ali z uporabo GitHub CLI (ukazne vrstice).
HTML oziroma HyperText Markup Language je temelj vsake spletne strani, ki ste jo kdaj obiskali. HTML si predstavljajte kot ogrodje, ki daje strukturo spletnim stranem – določa, kam gre vsebina, kako je organizirana in kaj vsak del predstavlja. Medtem ko bo CSS kasneje "oblekel" vaš HTML z barvami in postavitvami, bo JavaScript prinesel interaktivnost, HTML pa zagotavlja osnovno strukturo, ki omogoča vse ostalo.
@ -86,7 +86,7 @@ Ustvarili boste namensko mapo za vaš terarijski projekt in dodali prvo HTML dat
4. V Explorer oknu kliknite na ikono "New File"
5. Vaši datoteki dajte ime `index.html`
**Možnost 2: Uporaba terminalskih ukazov**
```bash
@ -236,48 +236,48 @@ Sedaj dodajte slike rastlin organizirane v dva stolpca med oznakama `<body></bod
✅ **Čas za eksperiment**: Poskusite nastaviti druge dedljive lastnosti na `<body>`, kot so `color`, `line-height` ali `text-align`. Kaj se zgodi z vašim naslovom in drugimi elementi?
@ -332,7 +332,7 @@ V našem terrariju vsaka rastlina potrebuje podoben slog, hkrati pa tudi individ
**Tukaj je HTML struktura za posamezno rastlino:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.sl.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/sl/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ Pripravljen, da izboljšaš svoj terarij z realističnimi steklenimi odsevi? Ta
Ustvaril boš subtilne poudarke, ki simulirajo, kako se svetloba odbija od steklenih površin. Ta pristop je podoben, kot so renesančni slikarji, kot je Jan van Eyck, uporabljali svetlobo in odseve, da so naslikano steklo naredili tridimenzionalno. Tukaj je tisto, kar ciljaš:
Dobrodošli v eni najbolj zanimivih vidikov spletnega razvoja - ustvarjanje interaktivnosti! Model dokumenta (DOM) je kot most med vašo HTML in JavaScript, danes ga bomo uporabili, da vašemu terrariju vdihnemo življenje. Ko je Tim Berners-Lee ustvaril prvi spletni brskalnik, si je zamislil splet, kjer so lahko dokumenti dinamični in interaktivni – DOM omogoča uresničitev te vizije.
@ -102,7 +102,7 @@ flowchart TD
style P fill:#ffebee
style Q fill:#ffebee
```
> Predstavitev DOM in HTML označbe, ki nanj kaže. Avtor: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **Razumevanje zaprtij**: Zaprtja so pomembna tema v JavaScriptu in veliko razvijalcev jih uporablja več let, preden v celoti razume vse teoretične vidike. Danes se osredotočamo na prakso – zaprtja boste razumeli naravno, ko bomo gradili interaktivne funkcije. Razumevanje se bo razvijalo, ko boste videli, kako rešujejo resnične probleme.
> Predstavitev DOM in HTML označbe, ki nanj kaže. Avtor: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ Zdaj preizkusite svoj interaktivni terarij! Odprite datoteko `index.html` v sple
- **Podpora različnim napravam**: Deluje na namizju in mobilnih napravah
- **Zavedanje o zmogljivosti**: Brez uhajanja pomnilnika ali odvečnih izračunov
> Nekateri zgodnji brskalniki, preko [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Kako brskalniki obdelujejo spletno vsebino
@ -194,7 +194,7 @@ quadrantChart
Razumevanje procesa namestitve razširitev vam pomaga predvideti uporabniško izkušnjo, ko ljudje namestijo vašo razširitev. Proces namestitve je standardiziran v sodobnih brskalnikih, z manjšimi razlikami v oblikovanju vmesnika.
> **Pomembno**: Prepričajte se, da pri testiranju svojih razširitev omogočite razvojni način in dovolite razširitve iz drugih trgovin.
@ -308,10 +308,10 @@ To sledi principu postopnega razkrivanja, ki se uporablja že od zgodnjih dni ra
### Pregled pogledov razširitve
**Pogled nastavitve** - konfiguracija ob prvi uporabi:
**Pogled rezultatov** - prikaz podatkov o ogljičnem odtisu:
> ⚠️ **Varnostno opozorilo**: V produkcijskih aplikacijah hranjenje API ključev v LocalStorage predstavlja varnostno tveganje, saj lahko JavaScript dostopa do teh podatkov. Za namene učenja je ta pristop sprejemljiv, v resničnih aplikacijah pa je treba občutljive poverilnice hraniti varno na strežniški strani.
Poskusimo to. Odprite spletno stran (Microsoft.com je primerna) in kliknite tisti gumb 'Record'. Zdaj osvežite stran in opazujte, kako profiler zajema vse, kar se dogaja. Ko prenehate snemati, boste videli podroben pregled, kako brskalnik 'skriptira', 'renderira' in 'riše' stran. Spomni me na to, kako nadzor misije spremlja vsak sistem med izstrelitvijo rakete - dobite podatke v realnem času o tem, kaj se dogaja in kdaj.
✅ [Microsoftova dokumentacija](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) ima še veliko več podrobnosti, če želite poglobiti znanje
@ -133,11 +133,11 @@ Izberite elemente časovnice profila, da povečate dogodke, ki se zgodijo med na
Dobite posnetek zmogljivosti strani tako, da izberete del časovnice in pogledate povzetek:
✅ Spoznajte svoj profiler! Odprite orodja za razvijalce na tej strani in preverite, ali obstajajo ozka grla. Katera datoteka se nalaga najpočasneje? Najhitrejše?
Z uporabo tmrow-ovega API-ja C02 Signal za sledenje porabi električne energije ustvarite razširitev za brskalnik, ki vam bo omogočila opomnik neposredno v brskalniku o tem, kako obremenjena je poraba električne energije v vaši regiji. Občasna uporaba te razširitve vam bo pomagala sprejemati odločitve o svojih dejavnostih na podlagi teh informacij.
Za namestitev v Edge uporabite meni s tremi pikami v zgornjem desnem kotu brskalnika, da odprete ploščo z razširitvami. Tam izberite možnost 'Naloži nepakirano' za nalaganje nove razširitve. Na poziv odprite mapo 'dist' in razširitev se bo naložila. Za uporabo boste potrebovali API ključ za CO2 Signal API ([pridobite ga tukaj preko e-pošte](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) in [kodo za vašo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [Electricity Map](https://www.electricitymap.org/map) (na primer, v Bostonu uporabljam 'US-NEISO').
Ko vmesnik razširitve vnesete API ključ in regijo, bi se morala barvna pika v vrstici razširitev brskalnika spremeniti, da odraža porabo energije v vaši regiji, ter vam dati namig, katere dejavnosti, ki porabijo veliko energije, bi bile primerne za izvedbo. Koncept tega sistema 'pik' sem dobil pri [Energy Lollipop razširitvi](https://energylollipop.com/) za emisije v Kaliforniji.
Z uporabo API-ja CO2 Signal od tmrow za sledenje porabi električne energije ustvarite razširitev za brskalnik, ki vam omogoča, da imate neposreden opomnik o porabi električne energije v vaši regiji. Uporaba te ad hoc razširitve vam bo pomagala sprejemati odločitve o vaših dejavnostih na podlagi teh informacij.
Za namestitev v Edge uporabite meni 'tri pike' v zgornjem desnem kotu brskalnika, da odprete ploščo Razširitve. Tam izberite 'Naloži nepakirano', da naložite novo razširitev. Ko se prikaže poziv, odprite mapo 'dist' in razširitev bo naložena. Za uporabo boste potrebovali API ključ za CO2 Signal API ([pridobite ga tukaj po e-pošti](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) ter [kodo za vašo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [Električnemu zemljevidu](https://www.electricitymap.org/map) (na primer v Bostonu uporabljam 'US-NEISO').
Ko vnesete API ključ in regijo v vmesnik razširitve, bi se morala barvna pika v vrstici razširitev brskalnika spremeniti, da odraža porabo energije v vaši regiji, ter vam dati indikator o dejavnostih z visoko porabo energije, ki bi bile primerne za vas. Koncept za ta sistem "pik" sem dobil od [razširitve Energy Lollipop](https://energylollipop.com/) za emisije v Kaliforniji.
Z uporabo API-ja C02 Signal podjetja tmrow za spremljanje porabe električne energije ustvarite razširitev za brskalnik, ki vam omogoča, da imate neposreden opomnik v brskalniku o porabi električne energije v vaši regiji. Uporaba te namensko razvite razširitve vam bo pomagala sprejemati odločitve o svojih dejavnostih na podlagi teh informacij.
Za namestitev na Edge uporabite meni s 'tremi pikami' v zgornjem desnem kotu brskalnika, da odprete ploščo z razširitvami. Tam izberite 'Naloži razširitev iz razpakirane mape', da naložite novo razširitev. Na poziv odprite mapo 'dist' in razširitev se bo naložila. Za uporabo boste potrebovali API ključ za API CO2 Signal ([pridobite ga tukaj po e-pošti](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) in [kodo za vašo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [zemljevidu električne energije](https://www.electricitymap.org/map) (na primer v Bostonu uporabljam 'US-NEISO').
Ko vmesnik razširitve vnesete API ključ in regijo, bi se morala barvna pika v orodni vrstici razširitve brskalnika spremeniti, da odraža porabo energije v vaši regiji, in vam dati indikator za energijsko intenzivne dejavnosti, ki bi jih bilo smiselno izvajati. Koncept za ta sistem 'pik' sem dobil pri [razširitvi Energy Lollipop](https://energylollipop.com/) za emisije v Kaliforniji.
Uporaba tmrow API-ja C02 Signal za sledenje porabi električne energije, izdelava brskalnega vtičnika, ki vas opomni, kako obremenjena je poraba električne energije v vašem območju. Uporaba tega vtičnika vam bo pomagala sprejemati odločitve o vaših dejavnostih na podlagi teh informacij.
Za namestitev v Edge uporabite meni 'tri pike' v zgornjem desnem kotu brskalnika, da poiščete ploščo za vtičnike. Od tam izberite 'Naloži nepakiran' za nalaganje novega vtičnika. V pozivu odprite mapo 'dist' in vtičnik bo naložen. Za uporabo boste potrebovali API ključ za CO2 Signal ([pridobite ga tukaj preko e-pošte](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) in [kodo za vaše območje](http://api.electricitymap.org/v3/zones) [električni zemljevid](https://www.electricitymap.org/map) (na primer, v Bostonu uporabljam 'US-NEISO').
Ko so API ključ in območje vneseni v vmesnik vtičnika, bi se morala barvna pika v vrstici brskalnega vtičnika spremeniti, da odraža porabo energije v vašem območju, in vam dati indikator, katere energijsko intenzivne dejavnosti so primerne za vaše delovanje. Koncept te 'pikaste' sistema mi je bil navdihnjen z [Energy Lollipop vtičnikom](https://energylollipop.com/) za emisije v Kaliforniji.
Uporabili bomo API Signal CO2 od tmrow za spremljanje porabe električne energije, da ustvarimo razširitev za brskalnik, ki bo omogočala neposreden opomnik v brskalniku o tem, kako obremenjujoča je poraba električne energije v vaši regiji. Uporaba te prilagojene razširitve bo pomagala oceniti vaše dejavnosti na podlagi teh informacij.
Za namestitev na Edge uporabite meni "tri pike" v zgornjem desnem kotu brskalnika, da odprete ploščo Razširitve. Če še ni aktivirana, omogočite Način razvijalca (spodaj levo). Izberite "Naloži nepakirano", da naložite novo razširitev. Na poziv odprite mapo "dist" in razširitev bo naložena. Za uporabo boste potrebovali API ključ za CO2 Signal API (lahko ga [pridobite tukaj preko e-pošte](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) ter [kodo za svojo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [električni karti](https://www.electricitymap.org/map) (na primer v Bostonu "US-NEISO").
Ko vmesnik razširitve vsebuje API ključ in regijo, bi se morala barvna pika v vrstici razširitve brskalnika spremeniti, da odraža porabo energije v regiji, ter podati namig, katere dejavnosti z visoko porabo energije bi bile primerne za izvedbo. Koncept za ta sistem "pik" je bil navdihnjen z [razširitvijo Energy Lollipop](https://energylollipop.com/) za emisije v Kaliforniji.
Z uporabo API-ja C02 Signal podjetja tmrow lahko zgradite razširitev brskalnika, ki kot opomnik prikazuje, kako intenzivna je poraba električne energije v vaši regiji. To vam omogoča, da na podlagi teh informacij sprejemate odločitve o svojih dejavnostih.
Za namestitev v Edge poiščite ploščo »Razširitve« prek menija »tri pike« v zgornjem desnem kotu brskalnika. Nato izberite »Load Unpacked« in naložite novo razširitev. Ko se prikaže poziv, odprite mapo »dist«, da se razširitev naloži. Za uporabo boste potrebovali API ključ CO2 Signal ([pridobite ga tukaj prek e-pošte](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) ter [kodo za vašo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [Electricity Map](https://www.electricitymap.org/map) (na primer, za Boston uporabite 'US-NEISO').
Ko vmesnik razširitve vnesete API ključ in regijo, se bo barvna pika, ki se prikaže v razširitveni vrstici brskalnika, spremenila glede na porabo energije v vaši regiji. To vam bo pokazalo, katere dejavnosti, ki zahtevajo energijo, so primerne. Koncept sistema »pik« mi je dal [Energy Lollipop extension](https://energylollipop.com/) za emisije v Kaliforniji.
Z uporabo API-ja CO2 Signal od tmrow za spremljanje porabe električne energije lahko ustvarite razširitev brskalnika, ki vas opozori na obremenjenost porabe električne energije v vaši regiji. Uporaba te razširitve vam bo pomagala sprejemati bolj premišljene odločitve glede vaših dejavnosti na podlagi teh informacij.
Za namestitev v brskalnik Edge uporabite meni s 'tremi pikami' v zgornjem desnem kotu brskalnika, da odprete ploščo Razširitve. Tam izberite 'Naloži nepakirano' za dodajanje nove razširitve. Odprite mapo 'dist', ko vas sistem pozove, in razširitev bo naložena. Za uporabo boste potrebovali API ključ za CO2 Signal API ([pridobite ga tukaj prek e-pošte](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) in [kodo za vašo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [zemljevidu električne energije](https://www.electricitymap.org/map) (na primer, v Bostonu uporabljam 'US-NEISO').
Ko vmesnik razširitve vsebuje vaš API ključ in regijo, se bo barvna pika v vrstici razširitve brskalnika spremenila, da bo odražala porabo energije v vaši regiji, in vam dala namige o tem, katere dejavnosti so primerne za izvajanje. Koncept sistema 'pik' sem povzel po [razširitvi brskalnika Energy Lollipop](https://energylollipop.com/) za emisije v Kaliforniji.
Z uporabo tmrow API-ja C02 Signal za spremljanje porabe električne energije ustvarite razširitev za brskalnik, ki vam bo v brskalniku služila kot opomnik o tem, kako obremenjena je poraba električne energije v vaši regiji. Občasna uporaba te razširitve vam bo pomagala sprejemati odločitve o vaših dejavnostih na podlagi teh informacij.
Za namestitev v Edge uporabite meni 'tri pike' v zgornjem desnem kotu brskalnika, da odprete ploščo z razširitvami. Tam izberite 'Naloži nepakirano', da naložite novo razširitev. Na pozivu odprite mapo 'dist' in razširitev se bo naložila. Za uporabo boste potrebovali API ključ za CO2 Signal API ([pridobite ga tukaj preko e-pošte](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) in [kodo za vašo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [Electricity Map](https://www.electricitymap.org/map) (na primer v Bostonu uporabljam 'US-NEISO').
Ko vmesnik razširitve vnesete API ključ in regijo, bi se morala barvna pika v vrstici razširitev brskalnika spremeniti, da odraža porabo energije v vaši regiji, ter vam dati namig, katere dejavnosti, ki porabijo veliko energije, bi bile primerne za izvedbo. Koncept za ta sistem 'pik' sem dobil pri [Energy Lollipop razširitvi](https://energylollipop.com/) za emisije v Kaliforniji.
> Slika iz [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Za risanje na element platna boste sledili istemu tristožnemu postopku, ki tvori osnovo vse grafike na platnu. Ko to storite nekajkrat, postane druga narava:
@ -323,11 +323,11 @@ Zgradili boste spletno stran z elementom Canvas. Prikazal bo črno ozadje veliko
- **Sistem točkovanja**: Vsaka uničena sovražna ladja prinese 100 točk (zaokrožene številke so igralcem lažje za mentalni izračun). Rezultat se prikazuje v spodnjem levem kotu.
- **Števec življenj**: Vaš junak začne s tremi življenji – standard, ki so ga vzpostavile zgodnje arkadne igre za uravnoteženje izziva s igranjem. Vsak srečanje z nasprotnikom stane eno življenje. Preostala življenja bodo prikazana v spodnjem desnem kotu z ikonami ladij .
- **Števec življenj**: Vaš junak začne s tremi življenji – standard, ki so ga vzpostavile zgodnje arkadne igre za uravnoteženje izziva s igranjem. Vsak srečanje z nasprotnikom stane eno življenje. Preostala življenja bodo prikazana v spodnjem desnem kotu z ikonami ladij .
Uporaba `history.pushState` ustvarja nove vnose v zgodovini brskalnika. To lahko preveriš tako, da pritisneš in držiš *gumb nazaj* v brskalniku, kjer boš videl nekaj takega:
Če poskusiš nekajkrat klikniti gumb nazaj, boš videl, da se trenutni URL spreminja in da je zgodovina posodobljena, ampak ista predloga se še vedno prikazuje.
@ -292,7 +292,7 @@ Najprej opazimo, kaj se zgodi pri osnovni oddaji obrazca:
2. Opazujte spremembe v naslovni vrstici brskalnika
3. Ugotovite, kako se stran osveži in podatki pokažejo v URL-ju
### Primerjava HTTP metod
@ -346,7 +346,7 @@ Nastavimo vaš registracijski obrazec, da komunicira pravilno z backend API z up
2. **Kliknite** gumb "Ustvari račun"
3. **Opazujte** odgovor strežnika v brskalniku
**Kaj bi morali videti:**
- **Brskalnik preusmeri** na URL API končne točke
@ -609,7 +609,7 @@ async function register() {
3. **Kliknite** "Create Account"
4. **Opazujte** sporočila v konzoli in povratne informacije za uporabnika
**Kaj bi morali videti:**
- **Stanje nalaganja** se pojavi na gumbu za oddajo
@ -783,7 +783,7 @@ Izboljšajmo vaš registracijski obrazec z robustno validacijo, ki zagotavlja od
3. **Poskusite** posebne znake v polju za uporabniško ime
4. **Vnesite** negativno stanje računa
@ -187,7 +187,7 @@ Kot potop Titanica, ki je bil zasnovan z več ločenimi predelki, ki so naenkrat
Namesto da bi se lovili v začaranem krogu, bomo ustvarili **centraliziran sistem upravljanja stanja**. Predstavljajte si, da imate eno zelo organizirano osebo, ki je odgovorna za vse pomembne stvari:
```mermaid
flowchart TD
@ -798,7 +798,7 @@ Ta izziv vam bo pomagal razmišljati kot profesionalni razvijalec, ki upošteva
Tukaj je primer rezultata po dokončani domači nalogi:
@ -112,7 +112,7 @@ Oglejte si [dokumentacijo strežniškega API-ja](../api/README.md) za:
**Pričakovani rezultat:**
Po dokončanju te naloge bi morala vaša bančna aplikacija imeti popolnoma funkcionalno funkcijo "Dodaj transakcijo", ki izgleda profesionalno in se obnaša ustrezno:
V tem projektu se boste naučili, kako zgraditi izmišljeno banko. Te lekcije vključujejo navodila za postavitev spletne aplikacije in zagotavljanje poti, izdelavo obrazcev, upravljanje stanja ter pridobivanje podatkov iz API-ja, iz katerega lahko pridobite podatke banke.
@ -78,7 +78,7 @@ Ker VSCode.dev zahteva vsaj eno datoteko za odpiranje repozitorija, bomo glavno
4. **Napišite** sporočilo za commit: "Dodaj začetno HTML strukturo"
5. **Kliknite** "Commit new file", da shranite spremembe
**Kaj doseže ta začetna nastavitev:**
- **Vzpostavi** pravilno strukturo dokumenta HTML5 s semantičnimi elementi
@ -104,7 +104,7 @@ Zdaj, ko je temelj vašega repozitorija vzpostavljen, preidimo na VSCode.dev za
✅ **Indikator uspeha**: Videti bi morali datoteke svojega projekta v stranski vrstici Explorer in `index.html`, ki je na voljo za urejanje v glavnem urejevalnem območju.
@ -448,7 +448,7 @@ Razširitve izboljšajo vašo izkušnjo razvoja z omogočanjem funkcij, kot so p
**Takojšnji rezultati po namestitvi:**
Ko je CodeSwing nameščen, se bo v urejevalniku prikazal predogled vaše spletne strani z življenjepisom v živo. To vam omogoča, da vidite, kako vaša stran izgleda, medtem ko jo spreminjate.
**Razumevanje izboljšanega vmesnika:**
- **Razdeljen pogled**: **Prikazuje** vašo kodo na eni strani in predogled v živo na drugi
## 🗺️ Vaša pot učenja razvoja AI aplikacij
@ -189,7 +189,7 @@ mindmap
```
**Osnovno načelo**: Razvoj AI aplikacij združuje tradicionalne spletne razvojne veščine s integracijo AI storitev, ustvarjajoč inteligentne aplikacije, ki se uporabnikom zdijo naravne in odzivne.
**Zakaj je playground tako uporaben:**
- **Preizkusite** različne AI modele, kot so GPT-4o-mini, Claude in drugi (vsi brezplačni!)
@ -199,7 +199,7 @@ mindmap
Ko se poigrate, kliknite zavihek "Code" in izberite programski jezik za pridobitev potrebne implementacijske kode.
## Nastavitev Python backend integracije
@ -2352,14 +2352,14 @@ Veščine, ki ste jih razvili v tem tečaju, so neposredno uporabne v sodobnih k
- **Odprite** [Web Dev For Beginners repozitorij](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Kliknite** "Use this template" v zgornjem desnem kotu (preverite, da ste prijavljeni v GitHub)
**Korak 2: Zaženite Codespaces**
- **Odprite** novoustanovljeni repozitorij
- **Kliknite** zeleno tipko "Code" in izberite "Codespaces"
- **Izberite** "Create codespace on main", da začnete razvojno okolje
**Korak 3: Konfiguracija okolja**
Ko se vaš Codespace naloži, boste imeli dostop do:
Vsaka lekcija vključuje nalogo za dokončanje, preverjanje znanja in izziv, ki te vodi pri učenju tem, kot so:
@ -115,7 +115,7 @@ Sledite tem korakom:
V svoji kopiji tega repozitorija, ki ste jo ustvarili, kliknite na gumb **Code** in izberite **Open with Codespaces**. To bo ustvarilo nov Codespace za vaše delo.
Данас ћемо истражити невероватне алате који савремени веб развој чине не само могућим, већ и озбиљно заразним. Причам о управо тим иста којима програмирају у Netflix, Spotify и твојој омиљеној инди апликационој студији сваки дан. И ево дела који ће те натерати да заиграш од радости: већина ових професионалних, индустријских алата јеу потпуности бесплатна!
Ову ћемо авантуру проћи заједно, корак по корак. Без журбе, без притиска – само ти, ја и неки стварно кул алати који ће ускоро постати твоји нови најбољи пријатељи!
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -606,7 +606,7 @@ flowchart TD
✅ Добар начин за проналажење „пријатељских за почетнике“ репозиторијума је да [претражите по тагу 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Постоји више начина да копирате код. Један од начина је да „клонирате“ садржај репозиторијума, користећи HTTPS, SSH или GitHub CLI (Command Line Interface).
> Sketchnote autora [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, ili HyperText Markup Language, je osnova svake web stranice koju ste ikada posetili. Zamislite HTML kao kostur koji daje strukturu veb stranicama – on definiše gde sadržaj ide, kako je organizovan i šta svaki deo predstavlja. Dok će CSS kasnije "ukrasiti" vaš HTML bojama i rasporedima, a JavaScript oživeti interaktivnošću, HTML pruža osnovnu strukturu koja sve ostalo omogućava.
@ -86,7 +86,7 @@ Napravite poseban folder za projekat terarijuma i dodajte svoj prvi HTML fajl. E
4. U Explorer panelu kliknite na ikonu "New File"
5. Imenovajte fajl `index.html`
**Opcija 2: Korišćenje komandne linije**
```bash
@ -236,48 +236,48 @@ Sada dodajte slike biljaka organizovane u dve kolone između vaših `<body></bod
> Sketchnote autora [Tomomi Imura](https://twitter.com/girlie_mac)
Sećate li se kako je vaš HTML terarijum izgledao prilično osnovno? CSS je mesto gde tu običnu strukturu pretvaramo u nešto vizuelno privlačno.
@ -202,7 +202,7 @@ body {
Otvorite alatke za razvojne programere u pregledaču (F12), idite na karticu Elements i pregledajte `<h1>` element. Videćete da nasleđuje font familiju od `<body>`:
✅ **Eksperimentisanje**: Pokušajte da postavite druga svojstva koja se nasleđuju na `<body>` kao što su `color`, `line-height` ili `text-align`. Šta se dešava sa vašim naslovom i drugim elementima?
@ -332,7 +332,7 @@ U našem terarijumu, svaka biljka treba sličan stil, ali i jedinstveno pozicion
**Evo HTML strukture za svaku biljku:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.sr.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/sr/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ flowchart LR
Направићете суптилне наглашене беле или светле овалне облике за стаклене рефлексије. Овај приступ подсећа на начин на који су ренесансни сликари попут Јана ван Ајка користили светлост и одраз да би направили тродимензионални изглед на сликаном стаклу. Ево шта циљате:
> Скетчнот од [Tomomi Imura](https://twitter.com/girlie_mac)
Добродошли у један од најузбудљивијих аспеката веб развоја – чинење ствари интерактивним! Document Object Model (DOM) је као мост између вашег HTML-а и JavaScript-а, а данас ћемо га користити да оживимо ваш тераријум. Када је Тим Бернерс-Ли направио први веб прегледач, замишљао је веб где документи могу бити динамички и интерактивни – DOM чини ту визију могућом.
> Приказ DOM-а и HTML ознаке која га позива. Из [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **Разумевање затварања**: Затварања су важна тема у JavaScript-у и многи програмери их користе годинама пре него што у потпуности схвате све теоријске аспекте. Данас се фокусирамо на практичну примену – видећете како затварања природно излазе док градимо наше интерактивне функције. Разумевање ће се развијати како будете гледали како решавају стварне проблеме.
> Приказ DOM-а и HTML ознаке која га позива. Из [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ function stopElementDrag() {
- **Подршка за више уређаја**: Ради на десктопу и мобилном
- **Свест о перформансама**: Без цурења меморије или сувишних калкулација
> Неки рани прегледачи, преко [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Како прегледачи обрађују веб садржај
@ -194,7 +194,7 @@ quadrantChart
Разумевање процеса инсталације проширења помаже да предвидите корисничко искуство када људи инсталирају ваше проширење. Процес инсталације је стандардизован у модерним прегледачима, уз мање разлике у дизајну интерфејса.
> **Важно**: Обавезно укључите режим програмера и дозволите проширења из других продавница када тестирате сопствена проширења.
@ -308,10 +308,10 @@ project-root/
### Преглед приказа проширења
**Приказ подешавања** – конфигурација новог корисника:
**Приказ резултата** – приказ података о угљеничном отиску:
> ⚠️ **Безбедносна напомена**: У продукцијским апликацијама чување API кључева у LocalStorage представља безбедносни ризик јер JavaScript може приступити тим подацима. За потребе учења овај приступ је прихватљив, али праве апликације треба да користе безбедно чување на серверској страни за осетљиве креденцијале.
Ајде да пробамо ово. Отворите сајт (Microsoft.com добро функционише) и кликните на дугме 'Record'. Сада освежите страницу и пратите како профајлер снима све што се дешава. Када зауставите снимање, видећете детаљан преглед како прегледач „скриптује“, „рендерује“ и „црта“ страницу. Подсећа ме како контролна мисија прати сваки систем током лансирања ракете – добијате податке у реалном времену о томе шта се тачно дешава и када.
✅ [Microsoft документација](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) има још пуно детаља ако желите дубље да уроните
@ -133,11 +133,11 @@ flowchart LR
Погледајте кратак преглед перформанси странице тако што ћете изабрати део временске линије профила и погледати сажетак:
✅ Упознајте свој профајлер! Отворите девелопер алате на овом сајту и погледајте да ли има било каквих уских грла. Који је најспорији ресурс? Који најбржи?
Користећи tmrow-ов C02 Signal API за праћење потрошње електричне енергије, направите екстензију за претраживач како бисте имали подсетник директно у вашем претраживачу о томе колико је потрошња електричне енергије у вашем региону велика. Коришћење ове екстензије ад хок ће вам помоћи да донесете одлуке о вашим активностима на основу ових информација.
Да бисте инсталирали на Edge, користите мени са 'три тачке' у горњем десном углу претраживача да пронађете панел за екстензије. Одатле изаберите 'Load Unpacked' да учитате нову екстензију. Отворите фасциклу 'dist' када се појави упит, и екстензија ће се учитати. Да бисте је користили, потребан вам је API кључ за CO2 Signal API ([набавите га овде путем е-поште](https://www.co2signal.com/) - унесите вашу е-пошту у поље на овој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који одговара [Electricity Map](https://www.electricitymap.org/map) (на пример, у Бостону користим 'US-NEISO').
Када унесете API кључ и регион у интерфејс екстензије, обојена тачка у траци екстензије претраживача би требало да се промени како би одразила потрошњу енергије у вашем региону и дала вам смернице о томе које активности са великом потрошњом енергије би биле прикладне за вас. Концепт иза овог система 'тачке' добио сам од [Energy Lollipop екстензије](https://energylollipop.com/) за емисије у Калифорнији.
Користећи API за CO2 сигнал од tmrow за праћење потрошње електричне енергије, направите екстензију за прегледач како бисте имали подсетник директно у вашем прегледачу о потрошњи електричне енергије у вашем региону. Коришћење ове ад хок екстензије ће вам помоћи да доносите одлуке о вашим активностима на основу ових информација.
Да бисте инсталирали у Edge-у, користите мени са 'три тачке' у горњем десном углу прегледача да пронађете панел за Екстензије. Одатле изаберите 'Учитај распаковано' да бисте учитали нову екстензију. Када се од вас затражи, отворите фасциклу 'dist' и екстензија ће бити учитана. Да бисте је користили, биће вам потребан API кључ за CO2 Signal API ([набавите га овде путем е-поште](https://www.co2signal.com/) - унесите вашу е-пошту у поље на овој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који одговара [Мапи електричне енергије](https://www.electricitymap.org/map) (на пример, у Бостону користим 'US-NEISO').
Када унесете API кључ и регион у интерфејс екстензије, тачка у боји на траци екстензије у прегледачу треба да се промени како би одражавала потрошњу енергије у вашем региону и дала вам индикатор о активностима са високим утрошком енергије које би биле прикладне за вас. Концепт иза овог система "тачака" добио сам од [екстензије Energy Lollipop](https://energylollipop.com/) за емисије у Калифорнији.
Користећи API C02 Signal од tmrow за праћење потрошње електричне енергије, направите екстензију за прегледач како бисте могли директно у свом прегледачу добијати подсетнике о потрошњи електричне енергије у вашем региону. Коришћење ове екстензије ће вам помоћи да доносите одлуке о својим активностима на основу ових информација.
Да бисте инсталирали на Edge, користите мени „три тачке“ у горњем десном углу прегледача да пронађете панел за екстензије. Одатле изаберите „Учитајте распаковану екстензију“ да бисте додали нову екстензију. На упиту отворите фолдер 'dist' и екстензија ће се учитати. Да бисте је користили, биће вам потребан API кључ за CO2 Signal API ([набавите га овде путем е-поште](https://www.co2signal.com/) - унесите своју е-пошту у поље на тој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који одговара [Мапи електричне енергије](https://www.electricitymap.org/map) (на пример, за Бостон користим 'US-NEISO').
Када унесете API кључ и регион у интерфејс екстензије, обојена тачка у траци екстензија вашег прегледача треба да се промени како би одразила потрошњу енергије у вашем региону и дала вам индикатор о активностима које троше енергију, а које би било прикладно обављати. Концепт иза овог система „тачака“ инспирисан је [екстензијом Energy Lollipop](https://energylollipop.com/) за емисије у Калифорнији.
Користећи tmrow-ов C02 Signal API за праћење потрошње електричне енергије, направљена је екстензија за браузер која вас подсећа колико је потрошња електричне енергије у вашем региону у датом тренутку. Коришћење ове екстензије може вам помоћи да донесете одлуке о својим активностима на основу ове информације.
Да бисте инсталирали на Edge, користите мени са „три тачке“ у горњем десном углу браузера да пронађете панел за екстензије. Одатле изаберите „Load unpacked“ да бисте учитали нову екстензију. Када се појави упит, отворите фолдер „dist“ и екстензија ће бити учитана. Да бисте је користили, потребан вам је API кључ за CO2 Signal ([добијте га овде путем е-поште](https://www.co2snal.com/) – унесите своју е-пошту у поље на тој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) са [Electricity Map](https://www.electricitymap.org/map) (на пример, за Бостон користим 'US-NEISO').
Када унесете API кључ и регион у интерфејс екстензије, обојена тачка у траци екстензија вашег браузера требало би да се промени како би одражавала потрошњу енергије у вашем региону. Ово ће вам дати индикатор о томе које активности су прикладне у зависности од енергетске потрошње. Концепт ове „тачкасте“ системе инспирисан је [Energy Lollipop екстензијом](https://energylollipop.com/) за емисије у Калифорнији.
Користићемо API Signal C02 од tmrow за праћење потрошње електричне енергије како бисмо направили проширење за прегледач које ће вам омогућити да директно у прегледачу добијете подсетник о томе колико је потрошња електричне енергије у вашем региону оптерећујућа. Коришћење овог прилагођеног проширења помоћи ће вам да процените своје активности на основу ових информација.
За инсталацију на Edge, користите мени "три тачке" у горњем десном углу прегледача да бисте пронашли панел за проширења. Ако већ није активирано, укључите режим за програмере (у доњем левом углу). Изаберите "Учитај распаковано" да бисте учитали ново проширење. Отворите фасциклу "dist" када се појави упит, и проширење ће бити учитано. Да бисте га користили, биће вам потребан API кључ за CO2 Signal API (можете га [добити овде путем е-поште](https://www.co2signal.com/) - унесите своју е-пошту у поље на овој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који одговара [електричној мапи](https://www.electricitymap.org/map) (на пример, за Бостон, "US-NEISO").
Када унесете API кључ и регион у интерфејс проширења, обојена тачка у траци проширења прегледача би требало да се промени како би одражавала потрошњу енергије у региону и пружила смернице о томе које активности са високом потрошњом енергије би биле прикладне за извршавање. Концепт који стоји иза овог система са "тачкама" инспирисан је [Energy Lollipop проширењем](https://energylollipop.com/) за емисије у Калифорнији.
Користећи C02 Signal API од tmrow, направићемо екстензију за прегледач која приказује подсетник о томе колико је велика потрошња електричне енергије у вашем региону. Ова екстензија ће вам омогућити да пратите потрошњу струје и доносите одлуке о својим активностима на основу тих информација.
Да бисте инсталирали екстензију на Edge, пронађите панел „Екстензије“ у менију са „три тачке“ у горњем десном углу прегледача. Одатле изаберите „Load Unpacked“ и учитајте нову екстензију. Када се појави упит, отворите фасциклу „dist“, и екстензија ће бити учитана. Да бисте је користили, потребан вам је API кључ за CO2 Signal API ([набавите га овде путем е-поште](https://www.co2signal.com/) - унесите вашу е-пошту у поље на тој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који је компатибилан са [Electricity Map](https://www.electricitymap.org/map) (на пример, за Бостон користите 'US-NEISO').
Када унесете API кључ и регион у интерфејс екстензије, боја тачке која се приказује на траци екстензија у вашем прегледачу ће се променити. Ова тачка одражава потрошњу енергије у вашем региону и помаже вам да одлучите које активности су прикладне у том тренутку. Концепт овог „система тачке“ инспирисан је [Energy Lollipop екстензијом](https://energylollipop.com/) за праћење емисија у Калифорнији.
Користећи API за CO2 сигнал tmrow за праћење потрошње електричне енергије, направите додатак за прегледач који ће вам омогућити да добијете обавештења у вашем прегледачу о томе колико је велика потрошња електричне енергије у вашем региону. Коришћење овог додатка ће вам помоћи да донесете одлуке о вашим активностима на основу ових информација.
## Почетак
@ -31,7 +31,7 @@ npm run build
Да бисте инсталирали на Edge, користите мени „три тачке“ у горњем десном углу прегледача да бисте пронашли панел Додаци. Одатле изаберите „Load Unpacked“ да бисте учитали нови додатак. Отворите фасциклу „dist“ на захтев и додатак ће бити учитан. Да бисте га користили, потребан вам је API кључ за CO2 сигнал ([набавите га овде путем е-поште](https://www.co2signal.com/) - унесите вашу е-пошту у поље на овој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који одговара [Електричној мапи](https://www.electricitymap.org/map) (у Бостону, на пример, ја користим 'US-NEISO').
Када унесете API кључ и регион у интерфејс додатка, обојена тачка на траци додатка у прегледачу ће се променити како би одразила потрошњу енергије у вашем региону и дала вам препоруке о активностима које су прикладне за вас. Концепт иза овог система „тачке“ добио сам од [додатка за прегледач Energy Lollipop](https://energylollipop.com/) за емисије у Калифорнији.
Користећи tmrow-ов C02 Signal API за праћење потрошње електричне енергије, направите екстензију за претраживач како бисте имали подсетник директно у вашем претраживачу о томе колика је потрошња електричне енергије у вашем региону. Коришћење ове екстензије ће вам помоћи да доносите одлуке о вашим активностима на основу ових информација.
Да бисте инсталирали на Edge, користите мени са 'три тачке' у горњем десном углу претраживача да пронађете панел за Екстензије. Одатле изаберите 'Учитај неупаковано' да бисте учитали нову екстензију. На упиту отворите фасциклу 'dist' и екстензија ће се учитати. Да бисте је користили, биће вам потребан API кључ за CO2 Signal API ([набавите га овде путем е-поште](https://www.co2signal.com/) - унесите вашу е-пошту у поље на овој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који одговара [Electricity Map](https://www.electricitymap.org/map) (на пример, у Бостону користим 'US-NEISO').
Када унесете API кључ и регион у интерфејс екстензије, обојена тачка у траци екстензије претраживача би требало да се промени како би одразила потрошњу енергије у вашем региону и дала вам смернице о томе које активности са великом потрошњом енергије би биле прикладне за вас. Концепт иза овог система 'тачке' инспирисан је [Energy Lollipop екстензијом](https://energylollipop.com/) за емисије у Калифорнији.
> Слика са [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Да бисте цртали на canvas елементу, пратите исти тростепени поступак који чини основу целе canvas графике. Када то урадите неколико пута, постаје друга природа:
- **Систем бодовања**: Сваки уништени непријатељски брод доноси 100 поена (кругли бројеви су лакши за умно рачунање). Резултат се приказује у доњем левом углу.
- **Бројач живота**: Ваш херој почиње са три живота - стандард који су поставиле ране аркадне игре ради баланса између изазова и игрувости. Свако судар са непријатељем кошта један живот. Преостале животе приказујемо у доњем десном углу користећи иконе бродова .
- **Бројач живота**: Ваш херој почиње са три живота - стандард који су поставиле ране аркадне игре ради баланса између изазова и игрувости. Свако судар са непријатељем кошта један живот. Преостале животе приказујемо у доњем десном углу користећи иконе бродова .
Коришћењем `history.pushState`се креирају нови уноси у историји навигације прегледача. Можете то проверити тако што ћете држати *дугме назад*у вашем прегледачу, треба да видите нешто овако:
Ако више пута кликнете на дугме назад, видећете да се тренутни URL мења и историја се ажурира, али исти шаблон се наставља приказивати.
Уместо да трчимо у круг, креираћемо **централизовани систем управљања стањем**. Замислите да имамо једну заиста организовану особу која контролише све битне ствари:
```mermaid
flowchart TD
@ -798,7 +798,7 @@ timeline
Ево примера резултата након завршетка задатка:
Након завршетка овог задатка, ваша апликација за банкарство треба да има потпуно функционалну функцију "Додај трансакцију" која изгледа и функционише професионално:
У овом пројекту ћете научити како да направите измишљену банку. Ове лекције укључују упутства о томе како да распоредите веб апликацију и обезбедите руте, направите форме, управљате стањем и преузимате податке са API-ја од којег можете добити податке банке.
- **Трака активности** (она трака са леве стране): Ваш главни навигациони мени са Explorer 📁, Претрага 🔍, Source Control 🌿, Екстензије 🧩 и Подешавања ⚙️
@ -229,7 +229,7 @@ flowchart TB
1. Идите на [vscode.dev](https://vscode.dev) ако већ нисте тамо
2. Потражите дугме „Open Remote Repository“ на почетном екрану и кликните на њега
4. **Напишите** поруку за commit: "Додат почетни HTML структура"
5. **Кликните** "Commit new file" да бисте сачували промене
**Ево шта ова почетна поставка постиже:**
- **Успоставља** правилну HTML5 структуру документа са семантичким елементима
@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA:
✅ **Индикатор успеха**: Требало би да видите фајлове вашег пројекта у бочној траци Explorer-а и `index.html` доступан за уређивање у главном уређивачком простору.
**Шта ћете видети у интерфејсу:**
- **Бочна трака Explorer-а**: **Приказује** фајлове и структуру фасцикли вашег репозиторијума
@ -448,7 +448,7 @@ li:before {
**Одмах након инсталације:**
Када је CodeSwing инсталиран, видећете живи преглед вашег веб-сајта за резиме који се појављује у уређивачу. Ово вам омогућава да видите тачно како ваш сајт изгледа док правите промене.
**Разумевање побољшаног интерфејса:**
- **Подељен приказ**: **Приказује** ваш код са једне стране и живи преглед са друге
## 🗺️ Ваш Пут Кроз Развој AI Апликација
@ -189,7 +189,7 @@ mindmap
```
**Основни Принцип**: Развој AI апликација комбинује традиционалне вештине веб развоја са интеграцијом AI сервиса, креирајући интелигентне апликације које делују природно и реагују на кориснике.
**Ево шта чини игралиште тако корисним:**
- **Испробајте** различите AI моделе као GPT-4o-mini, Claude и друге (сви бесплатно!)
@ -199,7 +199,7 @@ mindmap
Када се мало поиграте, једноставно кликните на таб "Code" и изаберите свој програмски језик да бисте добили код за имплементацију.
## Подешавање Python Бекенд Интеграције
@ -2350,14 +2350,14 @@ mindmap
- **Идите** на [Web Dev For Beginners репозиторијум](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Кликните** на "Use this template" у горњем десном углу (проверите да ли сте пријављени на GitHub)
**Корак 2: Покретање Codespaces**
- **Отворите** свој новокреирани репозиторијум
- **Кликните** зелено дугме "Code" и изаберите "Codespaces"
- **Изаберите** "Create codespace on main" за покретање развојног окружења
Свака лекција укључује задатак за завршетак, проверу знања и изазов који вас води у учењу тема као што су:
@ -114,7 +114,7 @@ CO_OP_TRANSLATOR_METADATA:
У својој копији овог репозиторијума коју сте направили, кликните на дугме **Code** и изаберите **Open with Codespaces**. Ово ће креирати нови Codespace у којем ћете радити.
@ -17,7 +17,7 @@ Vi tar det från början: jag förstår helt om programmering känns skrämmande
Idag ska vi utforska de otroliga verktyg som gör modern webbprogrammering inte bara möjlig, utan riktigt beroendeframkallande. Jag menar precis samma redigerare, webbläsare och arbetsflöden som utvecklare på Netflix, Spotify och din favorit indieapp-studio använder varje dag. Och här kommer det som får dig att vilja dansa glädjedans: de flesta av dessa professionella, branschstandardverktyg är helt gratis!
@ -17,7 +17,7 @@ Jag vet att det här kan kännas mycket i början – jag minns att jag stirrade
Vi kommer att ta den här resan tillsammans, steg för steg. Ingen stress, inget tryck – bara du, jag och några riktigt coola verktyg som snart kommer att bli dina nya bästa vänner!
> Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -606,7 +606,7 @@ Först, låt oss hitta ett repository (eller **repo**) på GitHub som intressera
✅ Ett bra sätt att hitta "nybörjarvänliga" repos är att [söka efter taggen 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Det finns flera sätt att kopiera kod. Ett sätt är att "klona" innehållet i repot, med HTTPS, SSH eller med GitHub CLI (Command Line Interface).
> Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, eller HyperText Markup Language, är grunden för varje webbplats du någonsin besökt. Tänk på HTML som skelettet som ger struktur åt webbsidor – det definierar var innehåll ska placeras, hur det organiseras och vad varje del representerar. Medan CSS senare kommer att "klä upp" din HTML med färger och layouter, och JavaScript kommer att ge liv åt den med interaktivitet, tillhandahåller HTML den grundläggande strukturen som gör allt annat möjligt.
@ -86,7 +86,7 @@ Du kommer att skapa en dedikerad mapp för ditt terrariumprojekt och lägga till
4. I Explorerpanelen klicka på ikonen "New File"
5. Namnge din fil `index.html`
**Alternativ 2: Använda terminalkommandon**
```bash
@ -236,48 +236,48 @@ Lägg nu till växtbilder organiserade i två kolumner mellan dina `<body></body
> Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac)
Kommer du ihåg hur ditt HTML-terrarium såg ganska enkelt ut? CSS är där vi förvandlar den där enkla strukturen till något visuellt tilltalande.
@ -202,7 +202,7 @@ body {
Öppna webbläsarens utvecklarverktyg (F12), navigera till Elements-fliken och inspektera ditt `<h1>`-element. Du kommer se att det ärver fontfamilj från body:
✅ **Experimentera**: Testa att sätta andra arvbara egenskaper på `<body>` som `color`, `line-height` eller `text-align`. Vad händer med din rubrik och andra element?
@ -332,7 +332,7 @@ I vårt terrarium behöver varje växt liknande styling men även individuell po
**Här är HTML-strukturen för varje växt:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.sv.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/sv/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ Redo att förstärka ditt terrarium med realistiska glasreflektioner? Denna tekn
Du skapar subtila högdagrar som simulerar hur ljus reflekteras från glasytor. Detta liknar hur renässansmålare som Jan van Eyck använde ljus och reflektion för att få målat glas att se tredimensionellt ut. Så här ser målet ut:
> Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac)
Välkommen till en av de mest engagerande aspekterna av webbutveckling – att göra saker interaktiva! Document Object Model (DOM) är som en bro mellan din HTML och JavaScript, och idag ska vi använda den för att ge liv åt ditt terrarium. När Tim Berners-Lee skapade den första webbläsaren, såg han framför sig en web där dokument kunde vara dynamiska och interaktiva – DOM gör denna vision möjlig.
> En representation av DOM och HTML-markupen som refererar till den. Från [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **Förstå closures**: Closures är ett stort ämne inom JavaScript, och många utvecklare använder dem i åratal innan de fullt förstår alla teoretiska delar. Idag fokuserar vi på praktisk tillämpning – du kommer naturligt att se closures uppstå när vi bygger våra interaktiva funktioner. Förståelsen växer när du ser hur de löser verkliga problem.
> En representation av DOM och HTML-markupen som refererar till den. Från [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ Testa nu ditt interaktiva terrarium! Öppna din `index.html`-fil i en webbläsar
- **Stöd för alla enheter**: Fungerar på desktop och mobil
- **Prestandamedvetenhet**: Inga minnesläckor eller onödiga beräkningar
> Några tidiga webbläsare, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Hur webbläsare bearbetar webbinnehåll
@ -194,7 +194,7 @@ quadrantChart
Att förstå installationsprocessen för tillägg hjälper dig att förutse användarupplevelsen när personer installerar ditt tillägg. Installationsprocessen är standardiserad över moderna webbläsare med små skillnader i gränssnittsdesign.
> **Viktigt**: Se till att aktivera utvecklarläge och tillåt tillägg från andra butiker när du testar dina egna tillägg.
@ -308,10 +308,10 @@ Detta följer principen om progressiv avslöjande som använts i gränssnittsdes
### Översikt av tilläggsvyer
**Inställningsvy** – Konfiguration för första gången:
**Resultatvy** – Visning av koldioxidavtrycksdata:
> ⚠️ **Säkerhetsaspekt:** I produktionsapplikationer innebär lagring av API-nycklar i LocalStorage säkerhetsrisker eftersom JavaScript kan komma åt dessa data. För lärande ändamål fungerar det bra, men riktiga applikationer bör använda säker serverlagring för känsliga uppgifter.
@ -123,7 +123,7 @@ För att öppna utvecklarverktygen i Edge klickar du på de tre prickarna uppe t
Låt oss prova. Öppna en webbplats (Microsoft.com fungerar bra för detta) och klicka på 'Spela in'-knappen. Uppdatera sidan och se hur profileraren fångar allt som händer. När du stoppar inspelningen ser du en detaljerad sammanställning av hur webbläsaren 'skriver skript', 'renderar' och 'målar' sidan. Det påminner om hur mission control övervakar varje system under en raketuppskjutning – du får realtidsdata på exakt vad som händer och när.
✅ [Microsoft Dokumentationen](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) har massor mer detaljer om du vill fördjupa dig
@ -133,11 +133,11 @@ Välj delar av profiler-tidslinjen för att zooma in på händelser som sker med
Få en ögonblicksbild av din sidas prestanda genom att välja en del av profiler-tidslinjen och titta i sammanfattningspanelen:
✅ Lär känna din profiler! Öppna utvecklarverktygen på denna sida och se om det finns några flaskhalsar. Vad är den långsammaste tillgången att ladda? Den snabbaste?
Använd tmrow:s C02 Signal API för att spåra elförbrukning och bygg en webbläsartillägg så att du kan få en påminnelse direkt i din webbläsare om hur tung elförbrukningen är i din region. Genom att använda detta tillägg spontant kan du fatta beslut om dina aktiviteter baserat på denna information.
För att installera på Edge, använd menyn med 'tre punkter' i det övre högra hörnet av webbläsaren för att hitta panelen för Tillägg. Därifrån väljer du 'Ladda upp packat' för att ladda ett nytt tillägg. Öppna mappen 'dist' när du blir ombedd, och tillägget kommer att laddas. För att använda det behöver du en API-nyckel för CO2 Signal:s API ([skaffa en här via e-post](https://www.co2signal.com/) - ange din e-post i rutan på denna sida) och koden för din region ([hitta den här](http://api.electricitymap.org/v3/zones)) som motsvarar [Electricity Map](https://www.electricitymap.org/map) (i Boston, till exempel, använder jag 'US-NEISO').
När API-nyckeln och regionen har angetts i tilläggets gränssnitt, bör den färgade pricken i webbläsartilläggsfältet ändras för att återspegla din regions energiförbrukning och ge dig en indikation på vilka energikrävande aktiviteter som är lämpliga att utföra. Konceptet bakom detta 'prick'-system fick jag från [Energy Lollipop-tillägget](https://energylollipop.com/) för utsläpp i Kalifornien.
Med hjälp av tmrows CO2-signal-API för att spåra elförbrukning kan du skapa ett webbläsartillägg som ger dig en påminnelse direkt i din webbläsare om elförbrukningen i din region. Att använda detta ad hoc-tillägg hjälper dig att fatta beslut om dina aktiviteter baserat på denna information.
För att installera i Edge, använd menyn med 'tre punkter' i det övre högra hörnet av webbläsaren för att hitta panelen Tillägg. Därifrån väljer du 'Ladda upp packat' för att ladda ett nytt tillägg. Öppna mappen 'dist' när du blir ombedd, så laddas tillägget. För att använda det behöver du en API-nyckel för CO2-signal-API:t ([få en här via e-post](https://www.co2signal.com/) - ange din e-postadress i rutan på denna sida) och [koden för din region](http://api.electricitymap.org/v3/zones) som motsvarar [Electricity Map](https://www.electricitymap.org/map) (i Boston, till exempel, använder jag 'US-NEISO').
När API-nyckeln och regionen har angetts i tilläggets gränssnitt, bör färgpunkten i webbläsarens tilläggsfält ändras för att återspegla energiförbrukningen i din region och ge dig en indikation på vilka högenergikrävande aktiviteter som är lämpliga för dig. Konceptet bakom detta "punkt"-system fick jag från [Energy Lollipop-tillägget](https://energylollipop.com/) för utsläpp i Kalifornien.
Med hjälp av tmrows API C02 Signal för att spåra elförbrukning, skapa ett webbläsartillägg så att du kan få en påminnelse direkt i din webbläsare om elförbrukningen i ditt område. Att använda detta tillägg kan hjälpa dig att fatta beslut om dina aktiviteter baserat på denna information.
För att installera på Edge, använd menyn med 'tre punkter' i det övre högra hörnet av webbläsaren för att hitta panelen Tillägg. Därifrån väljer du 'Ladda upp okomprimerat tillägg' för att lägga till ett nytt tillägg. Öppna mappen 'dist' när du blir ombedd, och tillägget kommer att laddas. För att använda det behöver du en API-nyckel för CO2 Signal API ([skaffa en via e-post här](https://www.co2signal.com/) - ange din e-postadress i rutan på den här sidan) och [koden för din region](http://api.electricitymap.org/v3/zones) som motsvarar [Electricity Map](https://www.electricitymap.org/map) (i Boston, till exempel, använder jag 'US-NEISO').
När API-nyckeln och regionen har angetts i tilläggets gränssnitt, bör den färgade punkten i webbläsarens tilläggsfält ändras för att återspegla energiförbrukningen i ditt område och ge dig en indikator på vilka energikrävande aktiviteter som kan vara lämpliga att utföra. Konceptet bakom detta 'punkt'-system inspirerades av [Energy Lollipop-tillägget](https://energylollipop.com/) för utsläpp i Kalifornien.
Användning av tmrow:s C02 Signal API för att spåra elförbrukning, bygga en webbläsartillägg som påminner dig om hur tungt elförbrukningen är i ditt område direkt i din webbläsare. Genom att använda detta tillägg kan du fatta beslut om dina aktiviteter baserat på denna information.
## Kom igång
@ -31,7 +31,7 @@ npm run build
För att installera på Edge, använd "tre prickar"-menyn i det övre högra hörnet av webbläsaren för att hitta tilläggspanelen. Därifrån, välj "Ladda uppackat" för att ladda ett nytt tillägg. Öppna mappen "dist" vid prompten, och tillägget kommer att laddas. För att använda det behöver du en API-nyckel för CO2 Signal ([få den via e-post här](https://www.co2signal.com/) - ange din e-post i rutan på den sidan) och [koden för ditt område](http://api.electricitymap.org/v3/zones) från [Electricity Map](https://www.electricitymap.org/map) (till exempel, i Boston använder jag "US-NEISO").
När API-nyckeln och området har matats in i tilläggets gränssnitt, bör den färgade pricken i webbläsartilläggsfältet ändras för att återspegla energiförbrukningen i ditt område och ge dig en indikator på vilka energiintensiva aktiviteter som är lämpliga att utföra. Konceptet bakom detta "prick"-system inspirerades av [Energy Lollipop Extension](https://energylollipop.com/) för Kaliforniens utsläpp.
Signal C02-API från tmrow kommer att användas för att övervaka elförbrukningen och skapa ett webbläsartillägg så att du kan få en påminnelse direkt i din webbläsare om hur tung elförbrukningen är i din region. Användningen av detta skräddarsydda tillägg hjälper dig att bedöma dina aktiviteter baserat på denna information.
## Kom igång
@ -31,7 +31,7 @@ npm run build
För att installera på Edge, använd menyn med "tre punkter" i det övre högra hörnet av webbläsaren för att hitta panelen Tillägg. Om det inte redan är aktiverat, slå på Utvecklarläge (längst ner till vänster). Välj "Ladda upp packat" för att ladda ett nytt tillägg. Öppna mappen "dist" vid prompten, och tillägget kommer att laddas. För att använda det behöver du en API-nyckel för CO2 Signal-API:t (du kan [få en via e-post här](https://www.co2signal.com/) - ange din e-postadress i rutan på den här sidan) och [koden för din region](http://api.electricitymap.org/v3/zones) som motsvarar [el-kartan](https://www.electricitymap.org/map) (i Boston, till exempel, "US-NEISO").
När API-nyckeln och regionen har angetts i tilläggets gränssnitt, bör den färgade punkten i webbläsartilläggsfältet ändras för att återspegla regionens energiförbrukning och ge en indikation på vilka aktiviteter med hög energiförbrukning som skulle vara lämpliga att utföra. Konceptet bakom detta "punkt"-system har inspirerats av [Energy Lollipop-tillägget](https://energylollipop.com/) för utsläpp i Kalifornien.
localizeflow[bot]
1 week ago