@ -17,7 +17,7 @@ Uite, înțeleg perfect dacă programarea pare intimidantă acum. Când am înce
Astăzi, vom explora uneltele incredibile care fac dezvoltarea web modernă nu doar posibilă, ci și foarte captivantă. Vorbesc despre exact aceiași editori, browsere și workflow-uri pe care le folosesc zilnic dezvoltatorii de la Netflix, Spotify și studioul tău indie preferat de aplicații. Și iată partea care te va face să dansezi de bucurie: majoritatea acestor unelte profesionale, standard în industrie, sunt complet gratuite!
@ -17,7 +17,7 @@ Iată ce mă uimește total: fiecare aplicație de pe telefonul tău, fiecare si
Vom parcurge acest drum împreună, pas cu pas. Fără grabă, fără presiune – doar tu, eu și niște unelte super tari care urmează să devină cei mai buni prieteni ai tăi!
> Schiță realizată de [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -605,7 +605,7 @@ Mai întâi, hai să găsim un repository (sau **repo**) pe GitHub care să te i
✅ Un mod bun de a găsi repo-uri „prietenoase pentru începători” este să [cauți după eticheta 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Există mai multe modalități de a copia codul. Un mod este să „clonezi” conținutul repository-ului, folosind HTTPS, SSH sau folosind GitHub CLI (interfața de linie de comandă GitHub).
> Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, sau HyperText Markup Language, este fundația fiecărui site web pe care l-ai vizitat vreodată. Gândește-te la HTML ca scheletul care oferă structură paginilor web – definește unde merge conținutul, cum este organizat și ce reprezintă fiecare element. În timp ce CSS va „îmbrăca” mai târziu HTML-ul tău cu culori și layout-uri, iar JavaScript îl va anima cu interactivitate, HTML oferă structura esențială care face tot restul posibil.
@ -86,7 +86,7 @@ Vei crea un folder dedicat pentru proiectul terrarium și vei adăuga primul tă
4. În panoul Explorer, apasă pe pictograma "New File"
5. Denumește fișierul `index.html`
**Opțiunea 2: Folosind Comenzi în Terminal**
```bash
@ -236,48 +236,48 @@ Adaugă acum imaginile plantelor organizate în două coloane între etichetele
> Sketchnote realizat de [Tomomi Imura](https://twitter.com/girlie_mac)
Îți amintești cum arăta terrariul tău HTML destul de simplu? CSS este locul unde transformăm acea structură simplă într-un ceva atrăgător vizual.
@ -202,7 +202,7 @@ body {
Deschide unelte pentru dezvoltatori în browserul tău (F12), navighează la fila Elements, și inspectează elementul `<h1>`. Vei vedea că acesta moștenește familia fontului de la body:
✅ **Experiment**: Încearcă să setezi alte proprietăți moștenitoare pe `<body>` precum `color`, `line-height` sau `text-align`. Ce se întâmplă cu titlul și celelalte elemente?
@ -332,7 +332,7 @@ Selectorii de clase folosesc simbolul `.` și sunt perfecți când vrei să apli
**Iată structura HTML pentru fiecare plantă:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.ro.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/ro/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ Ești gata să îmbunătățești terrariul cu reflecții realiste de sticlă? A
Vei crea accente subtile care simulează modul în care lumina se reflectă pe suprafețele de sticlă. Această abordare este similară cu modul în care pictorii Renașterii, precum Jan van Eyck, foloseau lumina și reflectarea pentru a face sticla pictată să pară tridimensională. Iată ce vizezi:
> Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac)
Bine ați venit la unul dintre cele mai atractive aspecte ale dezvoltării web - a face lucrurile interactive! Document Object Model (DOM) este ca un pod între HTML-ul tău și JavaScript, iar astăzi îl vom folosi pentru a da viață terariului tău. Când Tim Berners-Lee a creat primul browser web, și-a imaginat o web unde documentele pot fi dinamice și interactive - DOM face această viziune posibilă.
> O reprezentare a DOM și a marcajului HTML care îl referențiază. De la [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **Înțelegerea închiderilor**: Închiderile sunt un subiect important în JavaScript, iar mulți dezvoltatori le folosesc ani de zile înainte să înțeleagă pe deplin toate aspectele teoretice. Astăzi ne concentrăm pe aplicația practică - vei vedea cum închiderile apar natural pe măsură ce construim caracteristicile noastre interactive. Înțelegerea va crește pe măsură ce vezi cum rezolvă probleme reale.
> O reprezentare a DOM și a marcajului HTML care îl referențiază. De la [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ Acum testează-ți terariul interactiv! Deschide fișierul `index.html` într-un
- **Suport cross-device**: Funcționează pe desktop și pe mobil
- **Conștientizare a performanței**: Fără scurgeri de memorie sau calcule redundante
> Unele browsere timpurii, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Cum Processează Browserele Conținutul Web
@ -194,7 +194,7 @@ quadrantChart
Înțelegerea procesului de instalare a extensiilor te ajută să anticipezi experiența utilizatorului când oamenii își instalează extensia ta. Procesul de instalare este standardizat în browserele moderne, cu variații minore în designul interfeței.
> **Important**: Asigură-te că activezi modul dezvoltator și permiți extensiile din alte magazine când testezi extensiile proprii.
@ -308,10 +308,10 @@ Aceasta urmează principiul dezvăluirii progresive folosit în designul interfe
### Prezentarea Vederilor Extensiei
**Vederea de configurare** - Configurare inițială pentru utilizatorii noi:
**Vederea de rezultate** - Afișarea datelor despre amprenta de carbon:
> ⚠️ **Considerație de Securitate**: În aplicațiile de producție, stocarea cheilor API în LocalStorage poate reprezenta un risc de securitate, deoarece JavaScript poate accesa aceste date. Pentru scopuri educaționale, această metodă este acceptabilă, dar aplicațiile reale ar trebui să folosească stocare sigură pe server pentru credențiale sensibile.
@ -123,7 +123,7 @@ Pentru a deschide Developer Tools în Edge, fă clic pe cele trei puncte din col
Hai să încercăm asta. Deschide un site (Microsoft.com este potrivit pentru asta) și apasă butonul 'Record'. Acum reîncarcă pagina și urmărește cum profilatorul surprinde tot ce se întâmplă. Când oprești înregistrarea, vei vedea o defalcare detaliată a modului în care browserul 'scriptuiește', 'randează' și 'pictează' site-ul. Îmi amintește cum centrul de comandă monitorizează fiecare sistem în timpul lansării unei rachete – primești date în timp real despre exact ce se întâmplă și când.
✅ Documentația [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) are o mulțime de detalii dacă vrei să explorezi mai mult.
@ -133,11 +133,11 @@ Selectează elemente din cronologia profilului pentru a mări evenimentele care
Obține o imagine de ansamblu a performanței paginii tale selectând o parte din cronologia profilului și uitându-te în panoul de sumar:
✅ Familiarizează-te cu profilatorul tău! Deschide uneltele pentru dezvoltatori pe acest site și vezi dacă există blocaje. Care este elementul cel mai lent la încărcare? Cel mai rapid?
Folosind API-ul C02 Signal de la tmrow pentru a monitoriza consumul de electricitate, construiește o extensie de browser care să îți ofere un memento direct în browser despre cât de intens este consumul de electricitate în regiunea ta. Utilizarea acestei extensii în mod ad-hoc te va ajuta să iei decizii informate cu privire la activitățile tale bazate pe aceste informații.
## Începe
@ -31,7 +31,7 @@ npm run build
Pentru a instala pe Edge, folosește meniul „trei puncte” din colțul din dreapta sus al browserului pentru a găsi panoul Extensii. De acolo, selectează „Load Unpacked” pentru a încărca o extensie nouă. Deschide folderul „dist” la prompt și extensia va fi încărcată. Pentru a o utiliza, vei avea nevoie de o cheie API pentru API-ul CO2 Signal ([obține una aici prin email](https://www.co2signal.com/) - introdu adresa ta de email în caseta de pe această pagină) și de [codul pentru regiunea ta](http://api.electricitymap.org/v3/zones) corespunzător [Electricity Map](https://www.electricitymap.org/map) (în Boston, de exemplu, folosesc „US-NEISO”).
După ce cheia API și regiunea sunt introduse în interfața extensiei, punctul colorat din bara extensiei browserului ar trebui să se schimbe pentru a reflecta consumul de energie din regiunea ta și să îți ofere o sugestie despre ce activități consumatoare de energie ar fi potrivite să desfășori. Conceptul din spatele acestui sistem de „puncte” mi-a fost inspirat de extensia [Energy Lollipop](https://energylollipop.com/) pentru emisiile din California.
Folosind API-ul CO2 Signal de la tmrow pentru a urmări consumul de electricitate, creați o extensie de browser care să vă ofere un memento direct în browser despre consumul de electricitate din regiunea dumneavoastră. Utilizarea acestei extensii ad hoc vă va ajuta să luați decizii cu privire la activitățile dumneavoastră bazându-vă pe aceste informații.
Pentru instalare în Edge, utilizați meniul cu 'trei puncte' din colțul din dreapta sus al browserului pentru a găsi panoul Extensii. De acolo, selectați 'Încărcare neambalată' pentru a adăuga o extensie nouă. Deschideți folderul 'dist' când vi se solicită și extensia va fi încărcată. Pentru a o utiliza, veți avea nevoie de o cheie API pentru API-ul CO2 Signal ([obțineți una aici prin e-mail](https://www.co2signal.com/) - introduceți adresa de e-mail în câmpul de pe această pagină) și de [codul pentru regiunea dumneavoastră](http://api.electricitymap.org/v3/zones) corespunzător [Hărții de electricitate](https://www.electricitymap.org/map) (în Boston, de exemplu, folosesc 'US-NEISO').
Odată ce introduceți cheia API și regiunea în interfața extensiei, punctul colorat din bara extensiei browserului ar trebui să se schimbe pentru a reflecta consumul de energie din regiunea dumneavoastră și să vă ofere un indicator despre activitățile cu consum ridicat de energie care ar fi potrivite pentru dumneavoastră. Conceptul din spatele acestui sistem de "puncte" mi-a fost inspirat de [extensia Energy Lollipop](https://energylollipop.com/) pentru emisiile din California.
Folosind API-ul CO2 Signal de la tmrow pentru a monitoriza consumul de electricitate, creați o extensie de browser care să vă ofere un memento direct în browser despre consumul de electricitate din regiunea dumneavoastră. Utilizarea acestei extensii ad-hoc vă va ajuta să luați decizii informate cu privire la activitățile dumneavoastră pe baza acestor informații.
## Începeți
@ -31,7 +31,7 @@ npm run build
Pentru a instala pe Edge, utilizați meniul „trei puncte” din colțul din dreapta sus al browserului pentru a găsi panoul Extensii. De acolo, selectați „Încărcați extensia dezarhivată” pentru a adăuga o nouă extensie. La solicitare, deschideți folderul „dist” și extensia va fi încărcată. Pentru a o utiliza, veți avea nevoie de o cheie API pentru API-ul CO2 Signal ([obțineți una aici prin e-mail](https://www.co2signal.com/) - introduceți adresa dumneavoastră de e-mail în câmpul de pe această pagină) și de [codul pentru regiunea dumneavoastră](http://api.electricitymap.org/v3/zones) corespunzător [Hărții electricității](https://www.electricitymap.org/map) (de exemplu, în Boston, folosesc „US-NEISO”).
Odată ce cheia API și regiunea sunt introduse în interfața extensiei, punctul colorat din bara de extensii a browserului ar trebui să se schimbe pentru a reflecta consumul de energie din regiunea dumneavoastră și să vă ofere un indicator despre activitățile consumatoare de energie pe care ar fi potrivit să le desfășurați. Conceptul din spatele acestui sistem de „puncte” mi-a fost inspirat de [extensia Energy Lollipop](https://energylollipop.com/) pentru emisiile din California.
Construirea unei extensii de browser care utilizează API-ul CO2 Signal de la tmrow pentru a urmări consumul de energie electrică, astfel încât să primiți un memento în browser despre cât de intens este consumul de energie electrică în zona dumneavoastră. Utilizarea acestei extensii vă poate ajuta să luați decizii informate cu privire la activitățile dumneavoastră pe baza acestor informații.
## Început
@ -31,7 +31,7 @@ npm run build
Pentru a instala pe Edge, utilizați meniul „trei puncte” din colțul din dreapta sus al browserului pentru a găsi panoul de extensii. De acolo, selectați „Load unpacked” pentru a încărca o extensie nouă. La prompt, deschideți folderul „dist” și extensia va fi încărcată. Pentru a o utiliza, veți avea nevoie de o cheie API pentru CO2 Signal ([obțineți-o prin e-mail aici](https://www.co2signal.com/) - introduceți adresa dumneavoastră de e-mail în caseta de pe această pagină) și de [codul zonei dumneavoastră](http://api.electricitymap.org/v3/zones) de pe [Electricity Map](https://www.electricitymap.org/map) (de exemplu, pentru Boston, eu folosesc „US-NEISO”).
Odată ce cheia API și codul zonei sunt introduse în interfața extensiei, punctul colorat din bara extensiei browserului ar trebui să se schimbe pentru a reflecta consumul de energie din zona dumneavoastră și să vă ofere un indicator despre ce activități consumatoare de energie sunt potrivite pentru moment. Conceptul din spatele acestui sistem de „puncte” mi-a fost inspirat de extensia [Energy Lollipop](https://energylollipop.com/) pentru emisiile din California.
Se va utiliza API-ul Signal CO2 de la tmrow pentru a monitoriza utilizarea energiei electrice, cu scopul de a crea o extensie de browser care să ofere un memento direct în browser despre cât de intensă este utilizarea energiei electrice în regiunea ta. Utilizarea acestei extensii personalizate va ajuta la evaluarea activităților proprii pe baza acestor informații.
## Pentru a începe
@ -31,7 +31,7 @@ npm run build
Pentru a instala pe Edge, folosește meniul „trei puncte” din colțul din dreapta sus al browserului pentru a accesa panoul Extensii. Dacă nu este deja activată, activează Modul dezvoltator (în partea de jos, stânga). Selectează „Încarcă necomprimat” pentru a adăuga o nouă extensie. Deschide folderul „dist” la prompt, iar extensia va fi încărcată. Pentru a o utiliza, vei avea nevoie de o cheie API pentru API-ul CO2 Signal (poți [obține una prin e-mail aici](https://www.co2signal.com/) - introdu adresa ta de e-mail în caseta de pe această pagină) și de [codul pentru regiunea ta](http://api.electricitymap.org/v3/zones) corespunzător [hărții electrice](https://www.electricitymap.org/map) (de exemplu, pentru Boston, „US-NEISO”).
După ce cheia API și regiunea au fost introduse în interfața extensiei, punctul colorat din bara extensiei browserului ar trebui să se schimbe pentru a reflecta utilizarea energiei din regiune și să ofere o sugestie despre ce activități cu consum ridicat de energie ar fi potrivite de realizat. Conceptul din spatele acestui sistem de „puncte” a fost inspirat de [extensia Energy Lollipop](https://energylollipop.com/) pentru emisiile din California.
Construiește o extensie de browser care utilizează API-ul CO2 Signal de la tmrow pentru a urmări consumul de energie și pentru a afișa, ca un memento, cât de intens este consumul de energie în regiunea ta. Folosind această extensie în mod ad-hoc, poți lua decizii informate cu privire la activitățile tale pe baza acestor informații.
Pentru a instala pe Edge, găsește panoul „Extensii” din meniul „trei puncte” din colțul din dreapta sus al browserului. De acolo, selectează „Load Unpacked” pentru a încărca noua extensie. Când apare promptul, deschide folderul „dist” și extensia va fi încărcată. Pentru utilizare, vei avea nevoie de o cheie API pentru CO2 Signal ([obține una aici prin email](https://www.co2signal.com/) - introdu adresa ta de email în caseta de pe această pagină) și de [codul corespunzător regiunii tale](http://api.electricitymap.org/v3/zones) de pe [Electricity Map](https://www.electricitymap.org/map) (de exemplu, pentru Boston, folosește 'US-NEISO').
După ce introduci cheia API și regiunea în interfața extensiei, punctul colorat afișat în bara extensiei browserului se va schimba pentru a reflecta consumul de energie din regiunea ta. Acesta îți va indica ce tip de activități care necesită energie sunt potrivite în acel moment. Conceptul acestui sistem de „puncte” mi-a fost inspirat de extensia [Energy Lollipop](https://energylollipop.com/) pentru emisiile din California.
Folosind API-ul CO2 Signal de la tmrow pentru a monitoriza consumul de electricitate, construiește o extensie de browser care să te alerteze în legătură cu nivelul de utilizare a energiei electrice din regiunea ta. Utilizarea acestei extensii te va ajuta să iei decizii mai informate cu privire la activitățile tale, bazându-te pe aceste informații.
## Începe de Aici
@ -31,7 +31,7 @@ npm run build
Pentru a o instala în Edge, folosește meniul cu „trei puncte” din colțul din dreapta sus al browserului pentru a accesa panoul Extensii. De acolo, selectează „Load Unpacked” pentru a încărca o extensie nouă. Deschide folderul „dist” când ți se cere, iar extensia va fi încărcată. Pentru a o utiliza, vei avea nevoie de o cheie API pentru API-ul CO2 Signal ([obține una aici prin e-mail](https://www.co2signal.com/) - introdu adresa ta de e-mail în câmpul de pe această pagină) și de [codul regiunii tale](http://api.electricitymap.org/v3/zones), care corespunde cu [Electricity Map](https://www.electricitymap.org/map) (de exemplu, în Boston, eu folosesc „US-NEISO”).
După ce introduci cheia API și regiunea în interfața extensiei, punctul colorat din bara extensiei browserului se va schimba pentru a reflecta consumul de energie din regiunea ta și îți va oferi sugestii despre activitățile potrivite pe care le poți desfășura. Conceptul din spatele acestui sistem de „puncte” mi-a fost inspirat de [extensia de browser Energy Lollipop](https://energylollipop.com/) pentru emisiile din California.
Folosind API-ul CO2 Signal de la tmrow pentru a monitoriza consumul de energie electrică, construiește o extensie de browser astfel încât să ai un memento direct în browser despre cât de intens este consumul de energie electrică în regiunea ta. Utilizarea acestei extensii în mod ad-hoc te va ajuta să iei decizii informate cu privire la activitățile tale, bazându-te pe aceste informații.
## Începe
@ -31,7 +31,7 @@ npm run build
Pentru a instala pe Edge, folosește meniul „trei puncte” din colțul din dreapta sus al browserului pentru a găsi panoul Extensii. De acolo, selectează „Load Unpacked” pentru a încărca o extensie nouă. La prompt, deschide folderul „dist” și extensia va fi încărcată. Pentru a o utiliza, vei avea nevoie de o cheie API pentru API-ul CO2 Signal ([obține una aici prin email](https://www.co2signal.com/) - introdu adresa ta de email în căsuța de pe această pagină) și de [codul pentru regiunea ta](http://api.electricitymap.org/v3/zones) corespunzător [Electricity Map](https://www.electricitymap.org/map) (de exemplu, în Boston, folosesc „US-NEISO”).
Odată ce cheia API și regiunea sunt introduse în interfața extensiei, punctul colorat din bara extensiei browserului ar trebui să se schimbe pentru a reflecta consumul de energie din regiunea ta și să îți ofere o sugestie despre ce activități consumatoare de energie ar fi potrivite să le desfășori. Conceptul din spatele acestui sistem de „puncte” mi-a fost inspirat de [extensia Energy Lollipop](https://energylollipop.com/) pentru emisiile din California.
> Imagine de la [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Pentru a desena pe elementul canvas, vei urma același proces în trei pași care formează baza tuturor graficilor canvas. Odată ce îl faci de câteva ori, devine ceva natural:
@ -323,11 +323,11 @@ Vei construi o pagină web cu un element Canvas. Aceasta ar trebui să redea un
- **Sistem de punctaj**: Fiecare navă inamic distrusă acordă 100 de puncte (numere rotunde sunt mai ușor de calculat mental pentru jucători). Scorul se afișează în colțul din stânga jos.
- **Contor de vieți**: Eroul tău începe cu trei vieți - un standard stabilit de jocurile arcade timpurii pentru a echilibra provocarea cu jucabilitatea. Fiecare coliziune cu un inamic costă o viață. Vom afișa viețile rămase în colțul din dreapta jos folosind icoane de navă .
- **Contor de vieți**: Eroul tău începe cu trei vieți - un standard stabilit de jocurile arcade timpurii pentru a echilibra provocarea cu jucabilitatea. Fiecare coliziune cu un inamic costă o viață. Vom afișa viețile rămase în colțul din dreapta jos folosind icoane de navă .
Folosirea `history.pushState` creează intrări noi în istoricul de navigare al browserului. Poți verifica ținând apăsat *butonul înapoi* al browserului, ar trebui să afișeze ceva de genul:
Dacă apeși butonul înapoi de câteva ori, vei vedea că URL-ul se schimbă și istoricul este actualizat, dar același șablon continuă să fie afișat.
@ -292,7 +292,7 @@ Mai întâi, să observăm ce se întâmplă cu o trimitere simplă a formularul
2. Observă schimbările din bara de adrese a browserului
3. Observă cum pagina se reîncarcă și apar date în URL
### Compararea metodelor HTTP
@ -346,7 +346,7 @@ Să configurăm formularul tău de înregistrare să comunice corect cu API-ul b
2. **Apasă** butonul „Creare Cont”
3. **Observă** răspunsul serverului în browser
**Ce ar trebui să vezi:**
- **Browserul redirecționează** către URL-ul endpoint-ului API
@ -609,7 +609,7 @@ async function register() {
3. **Apasă** pe "Creează cont"
4. **Observă** mesajele din consolă și feedback-ul utilizatorului
**Ce ar trebui să vezi:**
- **Stare de încărcare** apare pe butonul de trimitere
@ -783,7 +783,7 @@ Să îmbunătățim formularul tău de înregistrare cu o validare robustă care
3. **Încearcă** caractere speciale în câmpul de nume utilizator
4. **Introdu** o sumă negativă în sold
**Ce vei observa:**
- **Browserul afișează** mesaje native de validare
@ -943,7 +943,7 @@ Afișează un mesaj de eroare în HTML dacă utilizatorul există deja.
Iată un exemplu de cum poate arăta pagina finală de login după un pic de stilizare:
@ -187,7 +187,7 @@ Ca designul compartimentalizat al Titanicului care părea robust până când ma
În loc să ne învârtim în cerc, vom crea un sistem **centralizat de gestionare a stării**. Gândește-te la asta ca la o persoană foarte organizată care răspunde de toate lucrurile importante:
```mermaid
flowchart TD
@ -798,7 +798,7 @@ Această provocare vă va ajuta să gândiți ca un dezvoltator profesionist, ca
Iată un exemplu de rezultat după finalizarea temei:
După finalizarea acestei teme, aplicația ta bancară ar trebui să aibă o funcționalitate completă "Adaugă tranzacție" care să arate și să funcționeze profesional:
În acest proiect, vei învăța cum să construiești o bancă fictivă. Aceste lecții includ instrucțiuni despre cum să creezi structura unei aplicații web și să oferi rute, să construiești formulare, să gestionezi starea, și să obții date de la un API de unde poți prelua informațiile băncii.
@ -78,7 +78,7 @@ Deoarece VSCode.dev necesită cel puțin un fișier pentru a deschide un depozit
4. **Scrie** un mesaj de commit: "Adaugă structura HTML inițială"
5. **Apasă** "Commit new file" pentru a salva modificările
**Iată ce realizează această configurare inițială:**
- **Stabilește** structura corectă a documentului HTML5 cu elemente semantice
@ -104,7 +104,7 @@ Acum că fundația depozitului tău este stabilită, să trecem la VSCode.dev pe
✅ **Indicator de succes**: Ar trebui să vezi fișierele proiectului tău în bara laterală Explorer și `index.html` disponibil pentru editare în zona principală a editorului.
@ -448,7 +448,7 @@ Extensiile îmbunătățesc experiența de dezvoltare oferind capabilități de
**Rezultate imediate după instalare:**
Odată ce CodeSwing este instalat, vei vedea o previzualizare live a site-ului tău de CV apărând în editor. Acest lucru îți permite să vezi exact cum arată site-ul tău pe măsură ce faci modificări.
## 🗺️ Călătoria ta de învățare prin dezvoltarea aplicațiilor AI
@ -189,7 +189,7 @@ mindmap
```
**Principiu de bază**: dezvoltarea aplicațiilor AI combină abilități tradiționale de dezvoltare web cu integrarea serviciilor AI, creând aplicații inteligente care par naturale și responsive pentru utilizatori.
**Ce face playground-ul atât de util:**
- **Încearcă** diferite modele AI precum GPT-4o-mini, Claude și altele (toate gratuite!)
@ -199,7 +199,7 @@ mindmap
După ce te joci puțin, apasă pe fila „Code” și alege limbajul de programare pentru a obține codul de implementare de care ai nevoie.
## Configurarea Integrației Backend în Python
@ -2353,14 +2353,14 @@ Vrei să încerci acest proiect într-un mediu de dezvoltare în cloud? GitHub C
- **Navighează** la [depozitul Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Apasă** pe „Use this template” în colțul din dreapta sus (asigură-te că ești logat în GitHub)
**Pasul 2: Pornește Codespaces**
- **Deschide** depozitul proaspăt creat
- **Apasă** pe butonul verde „Code” și selectează „Codespaces”
- **Alege** „Create codespace on main” pentru a începe mediul de dezvoltare
**Pasul 3: Configurarea Mediului**
Odată ce Codespace-ul tău este gata, vei avea acces la:
Fiecare lecție include o temă de completat, o verificare a cunoștințelor și o provocare pentru a te ghida în învățarea unor subiecte precum:
@ -115,7 +115,7 @@ Urmărește acești pași:
În copia ta de repository pe care ai creat-o, dă click pe butonul **Code** și selectează **Open with Codespaces**. Aceasta va crea un nou Codespace pentru tine unde să lucrezi.
Сегодня мы изучим невероятные инструменты, которые делают современную веб-разработку не только возможной, но и по-настоящему увлекательной. Я говорю о тех же редакторах, браузерах и рабочих процессах, которые разработчики Netflix, Spotify и твоей любимой студии приложений используют каждый день. И вот что заставит тебя пуститься в пляс от радости: большинство этих профессиональных инструментов, которые являются стандартом в индустрии, абсолютно бесплатны!
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
Мы пройдем этот путь вместе, шаг за шагом. Без спешки, без давления – только ты, я и несколько действительно крутых инструментов, которые скоро станут твоими лучшими друзьями!
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -604,7 +604,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).
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -1060,12 +1060,12 @@ pie title "Common ARIA Usage Patterns"
**Информативные изображения** - передают важную информацию:
```html
<imgsrc="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.ru.png" alt="Sales increased 25% from Q1 to Q2 2024">
<imgsrc="../../../../translated_images/ru/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
**Декоративные изображения** - исключительно визуальные, без информационной ценности:
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, или язык гипертекстовой разметки, является основой каждого веб-сайта, который вы когда-либо посещали. Представьте HTML как скелет, который придает структуру веб-страницам – он определяет, где размещается контент, как он организован и что представляет собой каждый элемент. В то время как CSS позже "оденет" ваш HTML в цвета и макеты, а JavaScript оживит егос помощью интерактивности, HTML обеспечивает основную структуру, которая делает все остальное возможным.
@ -88,7 +88,7 @@ mindmap
4. В панели Explorer нажмите на значок "New File"
5. Назовите файл `index.html`
**Вариант 2: Использование команд терминала**
```bash
@ -239,48 +239,48 @@ HTML использует парные теги для определения э
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
Помните, как ваш HTML-террариум выглядел довольно просто? С помощью CSS мы преобразуем эту простую структуру в нечто визуально привлекательное.
@ -205,7 +205,7 @@ body {
Откройте инструменты разработчика вашего браузера (F12), перейдите на вкладку "Элементы" и проверьте ваш элемент `<h1>`. Вы увидите, что он наследует семейство шрифтов от body:
✅ **Время эксперимента**: Попробуйте установить другие наследуемые свойства для `<body>`, такие как `color`, `line-height` или `text-align`. Что происходит с вашим заголовком и другими элементами?
@ -335,7 +335,7 @@ h1 {
**Вот структура HTML для каждого растения:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.ru.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/ru/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.png" />
</div>
```
@ -599,7 +599,7 @@ flowchart LR
Вы создадите тонкие блики, которые имитируют отражение света на стеклянных поверхностях. Этот подход похож на то, как художники эпохи Возрождения, такие как Ян ван Эйк, использовали свет и отражение, чтобы сделать изображенное стекло трехмерным. Вот к чему вы стремитесь:
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
Добро пожаловать в одну из самых увлекательных частей веб-разработки — создание интерактивности! Document Object Model (DOM) — это мост между вашим HTML и JavaScript, и сегодня мы используем его, чтобы оживить ваш террариум. Когда Тим Бернерс-Ли создал первый веб-браузер, он представлял себе веб, где документы могли быть динамичными и интерактивными — DOM делает эту мечту реальностью.
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
> Представление DOM и HTML-разметки, которая на него ссылается. Автор [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **Понимание замыканий**: Замыкания — это значимая тема в JavaScript, и многие разработчики используют их годами, прежде чем полностью понять все теоретические аспекты. Сегодня мы сосредоточимся на практическом применении — вы увидите, как замыкания естественным образом возникают при создании наших интерактивных функций. Понимание будет развиваться по мере того, как вы увидите, как они решают реальные задачи.
> Представление DOM и HTML-разметки, которая на него ссылается. Автор [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -598,7 +598,7 @@ function stopElementDrag() {
- **Поддержка разных устройств**: Работает на компьютерах и мобильных устройствах
- **Забота о производительности**: Нет утечек памяти или лишних расчетов
Небольшая медитация с перетаскиванием элементов. С помощью немного HTML, JS и CSS вы можете создать веб-интерфейс, стилизовать его и добавить интерактивность.
> Некоторые из первых браузеров, фото от [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Как браузеры обрабатывают веб-контент
@ -198,7 +198,7 @@ quadrantChart
Понимание процесса установки расширений помогает предвидеть пользовательский опыт при установке вашего расширения. Процесс установки стандартизирован во всех современных браузерах, с небольшими различиями в дизайне интерфейса.
> **Важно**: Убедитесь, что включен режим разработчика и разрешена установка расширений из других магазинов при тестировании ваших собственных расширений.
@ -313,10 +313,10 @@ project-root/
### Обзор экранов расширения
**Экран настройки** - Конфигурация для первого использования:
**Экран результатов** - Отображение данных углеродного следа:
> ⚠️ **Соображения безопасности**: В производственных приложениях хранение ключей API в LocalStorage представляет собой риск для безопасности, так как JavaScript может получить доступ к этим данным. Для учебных целей этот подход подходит, но в реальных приложениях следует использовать безопасное серверное хранилище для конфиденциальных данных.
Попробуйте это. Откройте любой сайт (например, Microsoft.com) и нажмите кнопку "Запись". Затем обновите страницу и наблюдайте, как профайлер фиксирует всё, что происходит. Когда вы остановите запись, вы увидите подробный анализ того, как браузер "скриптует", "рендерит" и "рисует" сайт. Это напоминает, как центр управления полётами отслеживает каждую систему во время запуска ракеты — вы получаете данные в реальном времени о том, что происходит и когда.
✅ [Документация Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) содержит множество подробностей, если вы хотите углубиться.
@ -136,11 +136,11 @@ flowchart LR
Получите снимок производительности вашей страницы, выбрав часть временной шкалы профиля и посмотрев на панель сводки:
Проверьте панель журнала событий, чтобы увидеть, заняло ли какое-либо событие больше 15 мс:
✅ Ознакомьтесь с профайлером! Откройте инструменты разработчика на этом сайте и посмотрите, есть ли узкие места. Какой ресурс загружается дольше всего? Какой быстрее?
Используя API C02 Signal от tmrow для отслеживания потребления электроэнергии, создайте расширение для браузера, чтобы получать напоминания прямо в браузере о том, насколько интенсивно используется электроэнергия в вашем регионе. Использование этого расширения в повседневной жизни поможет вам принимать решения о своих действиях, основываясь на этой информации.
Чтобы установить расширение в браузер Edge, используйте меню с «тремя точками» в правом верхнем углу браузера, чтобы найти панель расширений. Там выберите «Загрузить распакованное», чтобы загрузить новое расширение. На запрос откройте папку 'dist', и расширение будет загружено. Для использования вам потребуется API-ключ для API CO2 Signal ([получите его здесь по электронной почте](https://www.co2signal.com/) — введите ваш email в поле на этой странице) и [код вашего региона](http://api.electricitymap.org/v3/zones), соответствующий [Electricity Map](https://www.electricitymap.org/map) (например, в Бостоне я использую 'US-NEISO').
После ввода API-ключа и региона в интерфейс расширения, цветная точка в панели расширений браузера должна измениться, отражая уровень потребления энергии в вашем регионе, и дать вам подсказку о том, какие энергоемкие действия будут уместны. Концепция этой системы «точек» была вдохновлена расширением [Energy Lollipop](https://energylollipop.com/) для выбросов в Калифорнии.
Используя API CO2 Signal от tmrow для отслеживания потребления электроэнергии, создайте расширение для браузера, чтобы вы могли получать напоминания прямо в браузере о потреблении электроэнергии в вашем регионе. Использование этого специального расширения поможет вам принимать решения о ваших действиях, основываясь на этой информации.
Чтобы установить расширение в Edge, используйте меню с "тремя точками" в правом верхнем углу браузера, чтобы найти панель "Расширения". Там выберите "Загрузить распакованное", чтобы добавить новое расширение. Когда появится запрос, откройте папку 'dist', и расширение будет загружено. Для использования вам понадобится API-ключ для CO2 Signal ([получите его здесь по электронной почте](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-ключ для API CO2 Signal ([получите его здесь по электронной почте](https://www.co2signal.com/) — введите ваш адрес электронной почты в поле на этой странице) и [код вашего региона](http://api.electricitymap.org/v3/zones), соответствующий [Картам электроэнергии](https://www.electricitymap.org/map) (например, для Бостона я использую 'US-NEISO').
После того как API-ключ и регион будут введены в интерфейсе расширения, цветная точка в панели расширений браузера должна измениться, чтобы отразить потребление энергии в вашем регионе. Это даст вам индикатор, который поможет определить, какие энергозатратные действия лучше выполнять в данный момент. Концепция этой системы "точек" была вдохновлена [расширением Energy Lollipop](https://energylollipop.com/) для калифорнийских выбросов.
Используя API CO2 Signal от tmrow для отслеживания потребления электроэнергии, создается браузерное расширение, которое напоминает вам о том, насколько интенсивно используется электроэнергия в вашем регионе. Использование этого расширения поможет вам принимать решения о своих действиях на основе этой информации.
Чтобы установить в Edge, используйте меню с "тремя точками" в правом верхнем углу браузера, чтобы найти панель расширений. Оттуда выберите "Загрузить распакованное" для добавления нового расширения. В появившемся окне откройте папку "dist", и расширение будет загружено. Для его использования вам понадобится API-ключ CO2 Signal ([получите его по электронной почте здесь](https://www.co2snal.com/) — введите свой email в поле на этой странице) и [код вашего региона](http://api.electricitymap.org/v3/zones) с [карты электроэнергии](https://www.electricitymap.org/map) (например, для Бостона я использую 'US-NEISO').
После того как API-ключ и регион будут введены в интерфейсе расширения, цветная точка в панели браузера должна измениться, отражая использование энергии в вашем регионе. Это даст вам индикатор, какие энергоемкие действия будут подходящими в данный момент. Концепция этой "точечной" системы была вдохновлена расширением [Energy Lollipop](https://energylollipop.com/) для отслеживания выбросов в Калифорнии.
Мы будем использовать API Signal CO2 от tmrow для мониторинга потребления электроэнергии, чтобы создать расширение для браузера, которое будет напоминать вам о том, насколько интенсивно используется электричество в вашем регионе. Использование этого специального расширения поможет оценить свои действия, основываясь на предоставленной информации.
Чтобы установить расширение в Edge, используйте меню "три точки" в правом верхнем углу браузера, чтобы найти панель "Расширения". Если режим разработчика еще не активирован, включите его (внизу слева). Выберите "Загрузить распакованное", чтобы добавить новое расширение. В появившемся окне выберите папку "dist", и расширение будет загружено. Для использования вам понадобится API-ключ для CO2 Signal (его можно [получить по электронной почте](https://www.co2signal.com/) — введите свой адрес электронной почты в поле на этой странице) и [код вашего региона](http://api.electricitymap.org/v3/zones), соответствующий [электрической карте](https://www.electricitymap.org/map) (например, для Бостона — "US-NEISO").
После того как API-ключ и регион будут введены в интерфейсе расширения, цветная точка на панели расширения браузера должна измениться, отражая уровень потребления энергии в регионе. Она также предоставит рекомендации о том, какие действия с высоким энергопотреблением будут наиболее подходящими в данный момент. Концепция этой системы "точек" была вдохновлена [расширением Energy Lollipop](https://energylollipop.com/) для мониторинга выбросов в Калифорнии.
С помощью API CO2 Signal от tmrow вы можете отслеживать потребление электроэнергии в вашем регионе и отображать напоминание об уровне энергопотребления прямо в браузере. Это расширение позволяет вам принимать решения о своей активности, основываясь на этой информации.
Чтобы установить расширение в Edge, откройте панель «Расширения», которую можно найти в меню «три точки» в правом верхнем углу браузера. Выберите «Load Unpacked» и загрузите новое расширение. В появившемся окне откройте папку «dist», чтобы загрузить расширение. Для использования вам понадобится API-ключ CO2 Signal ([получите его здесь по электронной почте](https://www.co2signal.com/) — просто введите свой email в поле на странице) и [код региона](http://api.electricitymap.org/v3/zones), соответствующий вашей местности, из [Electricity Map](https://www.electricitymap.org/map) (например, для Бостона используется 'US-NEISO').
После ввода API-ключа и региона в интерфейс расширения цветной индикатор в панели расширений браузера начнет изменяться, отражая уровень энергопотребления в вашем регионе. Это поможет вам понять, какие действия, требующие энергии, наиболее уместны в данный момент. Концепция системы «точек» была вдохновлена расширением [Energy Lollipop](https://energylollipop.com/) для отслеживания выбросов в Калифорнии.
Используя API CO2 Signal от tmrow для отслеживания потребления электроэнергии, создайте расширение для браузера, которое будет предупреждать вас о текущем уровне нагрузки на энергосистему вашего региона. Это расширение поможет вам принимать более осознанные решения о своих действиях, основываясь на этой информации.
## Начало работы
@ -31,7 +31,7 @@ npm run build
Чтобы установить расширение в Edge, используйте меню с «тремя точками» в правом верхнем углу браузера, чтобы открыть панель расширений. Там выберите «Load Unpacked» для загрузки нового расширения. Откройте папку 'dist' по запросу, и расширение будет загружено. Для его использования вам понадобится API-ключ для CO2 Signal ([получите его здесь по электронной почте](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 Signal от tmrow для отслеживания потребления электроэнергии, создайте расширение для браузера, чтобы вы могли получать напоминание прямо в браузере о том, насколько интенсивно используется электроэнергия в вашем регионе. Использование этого расширения поможет вам принимать решения о своих действиях, основываясь на этой информации.
Чтобы установить расширение в Edge, используйте меню с «тремя точками» в правом верхнем углу браузера, чтобы открыть панель расширений. Там выберите «Загрузить распакованное», чтобы загрузить новое расширение. В появившемся окне выберите папку 'dist', и расширение загрузится. Для использования вам потребуется API-ключ для API CO2 Signal ([получите его здесь по электронной почте](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, вы будете следовать тому же трехэтапному процессу, который составляет основу всей графики на холсте. Как только вы сделаете это несколько раз, это станет привычным:
- **Система очков**: За каждый уничтоженный вражеский корабль начисляется 100 очков (круглые числа легче воспринимать игрокам). Счет отображается в нижнем левом углу.
- **Счетчик жизней**: Ваш герой начинает с трех жизней — стандарт, установленный ранними аркадными играми для баланса между сложностью и играбельностью. Каждое столкновение с врагом стоит одной жизни. Оставшиеся жизни будут отображаться в нижнем правом углу с помощью иконок кораблей .
- **Счетчик жизней**: Ваш герой начинает с трех жизней — стандарт, установленный ранними аркадными играми для баланса между сложностью и играбельностью. Каждое столкновение с врагом стоит одной жизни. Оставшиеся жизни будут отображаться в нижнем правом углу с помощью иконок кораблей .
Использование `history.pushState` создает новые записи в истории навигации браузера. Вы можете проверить это, удерживая *кнопку назад* вашего браузера, она должна отображать что-то вроде этого:
Если вы попробуете несколько раз нажать кнопку назад, вы увидите, что текущий URL изменяется, и история обновляется, но тот же шаблон продолжает отображаться.
Вместо того чтобы гоняться за собственным хвостом, мы создадим **централизованную систему управления состоянием**. Представьте, что есть один очень организованный человек, который отвечает за все важные дела:
```mermaid
flowchart TD
@ -803,7 +803,7 @@ timeline
Вот пример результата после выполнения задания:
После выполнения этого задания ваше банковское приложение должно иметь полностью функциональную функцию "Добавить транзакцию", которая выглядит и работает профессионально:
В этом проекте вы научитесь создавать вымышленный банк. Эти уроки включают инструкции по созданию макета веб-приложения, настройке маршрутов, созданию форм, управлению состоянием и получению данных из API, откуда можно извлечь данные банка.
3. Вставьте любой URL репозитория GitHub (попробуйте этот: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. Нажмите Enter и наблюдайте за магией!
@ -242,7 +242,7 @@ flowchart TB
Хотите почувствовать себя волшебником программирования? Попробуйте это сочетание клавиш: Ctrl+Shift+P (или Cmd+Shift+P на Mac), чтобы открыть Command Palette:
4. **Напишите** сообщение коммита: "Добавить начальную структуру 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 вы увидите предварительный просмотр вашего сайта-резюме прямо в редакторе. Это позволяет вам видеть, как выглядит ваш сайт, пока вы вносите изменения.
**Понимание улучшенного интерфейса:**
- **Разделенный вид**: **Показывает** ваш код с одной стороны и предварительный просмотр с другой
## 🗺️ Ваш путь обучения разработке приложений с ИИ
@ -194,7 +194,7 @@ mindmap
**Основной принцип**: Разработка приложений с ИИ объединяет традиционные навыки веб-разработки с интеграцией ИИ-сервисов, создавая интеллектуальные приложения, которые кажутся естественными и отзывчивыми для пользователей.
**Почему Playground так полезен:**
- **Попробуйте** разные модели ИИ, такие как GPT-4o-mini, Claude и другие (всё бесплатно!)
@ -204,7 +204,7 @@ mindmap
После того как вы немного поиграете, просто нажмите вкладку "Code" и выберите ваш язык программирования, чтобы получить код для реализации.
## Настройка интеграции серверной части на Python
@ -2365,14 +2365,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", чтобы запустить вашу среду разработки
@ -17,7 +17,7 @@ Pozri, úplne chápem, ak sa ti programovanie teraz zdá zastrašujúce. Keď so
Dnes preskúmame úžasné nástroje, ktoré robia moderný webový vývoj nielen možným, ale aj vážne návykovým. Hovorím o presne tých editorech, prehliadačoch a pracovných postupoch, ktoré denno-denne používajú vývojári v Netflixe, Spotify a tvojej obľúbenej indie app štúdiu. A tu je časť, ktorá ťa rozveselí: väčšina týchto profesionálnych, priemyselných nástrojov je úplne zadarmo!
@ -17,7 +17,7 @@ Vieme, že to môže byť spočiatku veľa – ja si pamätám, ako som prvýkr
Túto cestu prejdeme spolu, krok za krokom. Bez naháňania, bez stresu – len ty, ja a niekoľko fakt skvelých nástrojov, ktoré sa stanú tvojimi novými najlepšími priateľmi!
> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -605,7 +605,7 @@ Najskôr nájdeme repozitár (alebo **repo**) na GitHub, ktorý vás zaujíma a
✅ Dobrou cestou, ako nájsť 'začiatočníkom priateľské' repozitáre, je [vyhľadávanie podľa značky 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Existuje niekoľko spôsobov, ako kód skopírovať. Jedným zo spôsobov je „klonovať“ obsah repozitára pomocou HTTPS, SSH alebo pomocou GitHub CLI (Command Line Interface).
> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, alebo HyperText Markup Language, je základom každej webovej stránky, ktorú ste kedy navštívili. Predstavte si HTML ako kostru, ktorá dáva štruktúru webovým stránkam – určuje, kam obsah patrí, ako je usporiadaný a čo každý prvok predstavuje. Zatiaľ čo CSS neskôr „oblečie“ vašu HTML stránku farbami a rozloženiami, a JavaScript ju oživí interaktivitou, HTML poskytuje základnú štruktúru, ktorá robí všetko ostatné možným.
@ -86,7 +86,7 @@ Vytvoríte si vyhradenú zložku pre váš projekt terária a pridáte prvý HTM
4. V paneli Explorer kliknite na ikonu „Nový súbor“
5. Pomenujte svoj súbor `index.html`
**Možnosť 2: Použitie terminálových príkazov**
```bash
@ -236,48 +236,48 @@ Teraz pridajte obrázky rastlín usporiadané do dvoch stĺpcov medzi značky `<
✅ **Čas na experiment**: Skús nastaviť na `<body>` iné dedičné vlastnosti ako `color`, `line-height` alebo `text-align`. Čo sa stane s nadpisom a ďalšími elementmi?
@ -332,7 +332,7 @@ V našom teráriu každá rastlina potrebuje podobné štýly, ale aj individuá
**Tu je HTML štruktúra pre každú rastlinu:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.sk.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/sk/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ Ste pripravení vylepšiť svoj terárium realistickými odrazmi skla? Táto tec
Vytvoríte jemné svetlé zvýraznenia, ktoré simulujú, ako sa svetlo odráža od sklenených plôch. Tento prístup je podobný tomu, ako renesanční maliari ako Jan van Eyck používali svetlo a odraz na vytvorenie trojrozmerného dojmu maľovaného skla. Tu je cieľ:
> Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac)
Vitajte v jednej z najpútavejších oblastí webového vývoja – robíme veci interaktívnymi! Document Object Model (DOM) je ako most medzi vaším HTML a JavaScriptom, a dnes ho použijeme na oživenie vášho terrária. Keď Tim Berners-Lee vytvoril prvý webový prehliadač, predstavoval si web, kde môžu byť dokumenty dynamické a interaktívne – DOM túto víziu umožňuje.
@ -102,7 +102,7 @@ flowchart TD
style P fill:#ffebee
style Q fill:#ffebee
```
> Reprezentácia DOM a HTML značkovania, ktoré naň odkazuje. Od [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **Pochopenie Closures**: Closures sú významnou témou v JavaScripte a mnoho vývojárov ich používa roky, než úplne pochopia všetky teoretické aspekty. Dnes sa zameriame na praktickú aplikáciu – closures prirodzene uvidíte vzniknúť počas budovania našich interaktívnych funkcií. Pochopenie sa vyvinie, ako uvidíte, ako riešia skutočné problémy.
> Reprezentácia DOM a HTML značkovania, ktoré naň odkazuje. Od [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ Teraz otestujte svoje interaktívne terárium! Otvorte súbor `index.html` vo we
- **Podpora zariadení**: Funguje na desktopoch aj mobiloch
- **Výkonová uvedomelosť**: Žiadne úniky pamäte alebo nadbytočné výpočty
> Niektoré skoré prehliadače, podľa [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Ako prehliadače spracovávajú webový obsah
@ -194,7 +194,7 @@ quadrantChart
Pochopenie procesu inštalácie rozšírenia vám pomôže predvídať používateľský zážitok, keď si ľudia inštalujú vaše rozšírenie. Proces inštalácie je štandardizovaný vo väčšine moderných prehliadačov, s drobnými rozdielmi v dizajne rozhrania.
> **Dôležité**: Uistite sa, že máte zapnutý režim vývojára a povolené rozšírenia z iných obchodov, keď testujete vlastné rozšírenia.
@ -308,10 +308,10 @@ Toto nasleduje princíp postupného odhaľovania, ktorý sa používa v dizajne
### Prehľad pohľadov rozšírenia
**Zobrazenie nastavenia** – Konfigurácia pre používateľov pri prvom použití:
**Zobrazenie výsledkov** – Zobrazenie údajov uhlíkovej stopy:
> ⚠️ **Bezpečnostné upozornenie**: V produkčných aplikáciách predstavuje uloženie API kľúčov v LocalStorage bezpečnostné riziko, pretože JavaScript k nim môže pristupovať. Pre vzdelávacie účely to funguje, ale reálne aplikácie by mali citlivé poverenia ukladať bezpečne na serverovej strane.
@ -123,7 +123,7 @@ Ak chcete otvoriť Nástroje vývojára v Edge, kliknite na tie tri bodky v prav
Poďme to vyskúšať. Otvorte nejakú webovú stránku (napríklad Microsoft.com funguje dobre) a kliknite na tlačidlo 'Nahrávanie'. Teraz obnovte stránku a sledujte, ako profiler zaznamenáva všetko, čo sa deje. Keď zastavíte nahrávanie, uvidíte podrobný rozpis, ako prehliadač 'spúšťa skripty', 'vykresľuje' a 'maľuje' stránku. Pripomína mi to, ako riadiace stredisko monitoruje každý systém počas štartu rakety – máte dáta v reálnom čase o tom, čo sa presne deje a kedy.
✅ Dokumentácia [Microsoftu](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) obsahuje množstvo detailov, ak chcete ísť viac do hĺbky
@ -133,11 +133,11 @@ Vyberte prvky časovej osi profilu, aby ste sa priblížili na udalosti, ktoré
Získajte rýchly prehľad o výkone stránky výberom časti časovej osi profilu a zobrazením sumárneho panelu:
✅ Spoznajte svoj profiler! Otvorte nástroje vývojára na tejto stránke a zistite, či sú nejaké úzke miesta. Ktorý zdroj sa načítava najpomalšie? Ktorý najsrýchlejšie?
Použitím API C02 Signal od tmrow na sledovanie spotreby elektriny vytvorte rozšírenie prehliadača, aby ste mali pripomienku priamo vo svojom prehliadači o tom, aká náročná je spotreba elektriny vo vašom regióne. Používanie tohto rozšírenia ad hoc vám pomôže robiť rozhodnutia o vašich aktivitách na základe týchto informácií.
Na inštaláciu v Edge použite menu „tri bodky“ v pravom hornom rohu prehliadača, aby ste našli panel Rozšírenia. Odtiaľ vyberte „Načítať nebalené“ na načítanie nového rozšírenia. Pri výzve otvorte priečinok „dist“ a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč pre API CO2 Signal ([získajte ho tu cez email](https://www.co2signal.com/) - zadajte svoj email do políčka na tejto stránke) a [kód pre váš región](http://api.electricitymap.org/v3/zones) zodpovedajúci [Electricity Map](https://www.electricitymap.org/map) (napríklad v Bostone používam 'US-NEISO').
Keď zadáte API kľúč a región do rozhrania rozšírenia, farebná bodka v paneli rozšírenia prehliadača by sa mala zmeniť tak, aby odrážala spotrebu energie vo vašom regióne a poskytla vám odporúčanie, aké energeticky náročné aktivity by boli vhodné vykonať. Koncept za týmto systémom „bodky“ mi bol inšpirovaný rozšírením [Energy Lollipop](https://energylollipop.com/) pre emisie v Kalifornii.
Pomocou API CO2 Signal od tmrow na sledovanie spotreby elektriny vytvorte rozšírenie prehliadača, ktoré vám umožní mať priamo vo vašom prehliadači pripomienku o spotrebe elektriny vo vašom regióne. Používanie tohto ad hoc rozšírenia vám pomôže robiť rozhodnutia o vašich aktivitách na základe týchto informácií.
Na inštaláciu v Edge použite menu s 'tromi bodkami' v pravom hornom rohu prehliadača, aby ste našli panel Rozšírenia. Odtiaľ vyberte 'Načítať rozbalené' na načítanie nového rozšírenia. Keď budete vyzvaní, otvorte priečinok 'dist' a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč pre API CO2 Signal ([získajte ho tu e-mailom](https://www.co2signal.com/) - zadajte svoj e-mail do poľa na tejto stránke) a [kód pre váš región](http://api.electricitymap.org/v3/zones) zodpovedajúci [Elektrickej mape](https://www.electricitymap.org/map) (napríklad v Bostone používam 'US-NEISO').
Keď zadáte API kľúč a región do rozhrania rozšírenia, farebný bod na lište rozšírenia prehliadača by sa mal zmeniť tak, aby odrážal spotrebu energie vo vašom regióne a poskytol vám indikátor o aktivitách s vysokou spotrebou energie, ktoré by pre vás boli vhodné. Koncept tohto systému "bodov" som získal z [rozšírenia Energy Lollipop](https://energylollipop.com/) pre emisie v Kalifornii.
Pomocou API C02 Signal od tmrow na sledovanie spotreby elektriny vytvorte rozšírenie prehliadača, aby ste mohli mať priamo vo svojom prehliadači pripomienku o spotrebe elektriny vo vašom regióne. Používanie tohto ad hoc rozšírenia vám pomôže robiť rozhodnutia o vašich aktivitách na základe týchto informácií.
Na inštaláciu v prehliadači Edge použite menu „tri bodky“ v pravom hornom rohu prehliadača na otvorenie panela Rozšírenia. Odtiaľ vyberte „Načítať rozbalené rozšírenie“ na pridanie nového rozšírenia. Pri výzve otvorte priečinok „dist“ a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč pre API CO2 Signal ([získajte ho tu e-mailom](https://www.co2signal.com/) – zadajte svoj e-mail do poľa na tejto stránke) a [kód pre váš región](http://api.electricitymap.org/v3/zones) zodpovedajúci [mape elektriny](https://www.electricitymap.org/map) (napríklad v Bostone používam 'US-NEISO').
Keď zadáte API kľúč a región do rozhrania rozšírenia, farebný bod v paneli rozšírení prehliadača by sa mal zmeniť tak, aby odrážal spotrebu energie vo vašom regióne, a poskytol vám indikátor, ktoré energeticky náročné aktivity by bolo vhodné vykonávať. Koncept tohto systému „bodov“ mi bol inšpirovaný [rozšírením Energy Lollipop](https://energylollipop.com/) pre kalifornské emisie.
Použitie API CO2 Signal od tmrow na sledovanie spotreby elektriny, vytvorenie rozšírenia prehliadača, ktoré vám pripomenie, aká náročná je spotreba elektriny vo vašej oblasti. Používanie tohto rozšírenia vám pomôže robiť rozhodnutia o vašich aktivitách na základe týchto informácií.
Na inštaláciu v Edge použite menu „tri bodky“ v pravom hornom rohu prehliadača na vyhľadanie panelu rozšírení. Odtiaľ vyberte „Načítať nebalené“ na načítanie nového rozšírenia. V zobrazenom okne otvorte priečinok „dist“ a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč CO2 Signal ([získajte ho e-mailom tu](https://www.co2signal.com/) – zadajte svoj e-mail do políčka na tejto stránke) a [kód pre vašu oblasť](http://api.electricitymap.org/v3/zones) z [Electricity Map](https://www.electricitymap.org/map) (napríklad v Bostone používam „US-NEISO“).
Keď zadáte API kľúč a kód oblasti do rozhrania rozšírenia, farebný bod v paneli rozšírenia prehliadača by sa mal zmeniť tak, aby odrážal spotrebu energie vo vašej oblasti. Poskytne vám indikátor, ktoré energeticky náročné aktivity sú vhodné pre váš výkon. Koncept tejto „bodovej“ systému mi bol inšpirovaný rozšírením [Energy Lollipop](https://energylollipop.com/) pre emisie v Kalifornii.
Použije sa API Signal CO2 od tmrow na sledovanie spotreby elektriny, aby sa vytvorilo rozšírenie pre prehliadač, ktoré poskytne pripomienku priamo v prehliadači o tom, aká náročná je spotreba elektriny vo vašom regióne. Používanie tohto rozšírenia pomôže lepšie zhodnotiť svoje aktivity na základe týchto informácií.
Na inštaláciu v Edge použite menu "tri bodky" v pravom hornom rohu prehliadača a vyhľadajte panel Rozšírenia. Ak ešte nie je aktívny, zapnite režim vývojára (v dolnej časti). Vyberte "Načítať rozbalené" na načítanie nového rozšírenia. Otvorte priečinok "dist" v zobrazenom okne a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč pre CO2 Signal API (môžete ho [získať tu e-mailom](https://www.co2signal.com/) - zadajte svoju e-mailovú adresu do políčka na tejto stránke) a [kód pre váš región](http://api.electricitymap.org/v3/zones) zodpovedajúci [elektrickej mape](https://www.electricitymap.org/map) (napríklad v Bostone "US-NEISO").
Keď zadáte API kľúč a región do rozhrania rozšírenia, farebný bod v paneli rozšírenia prehliadača by sa mal zmeniť tak, aby odrážal spotrebu energie vo vašom regióne. Poskytne tiež návod na to, ktoré aktivity s vysokou spotrebou energie by boli vhodné vykonať. Koncept tohto systému "bodov" bol inšpirovaný [rozšírením Energy Lollipop](https://energylollipop.com/) pre emisie v Kalifornii.
Pomocou API CO2 Signal od tmrow môžete sledovať spotrebu elektrickej energie vo vašej oblasti a zobrazovať pripomienky priamo v prehliadači. Toto rozšírenie vám umožní rozhodovať sa na základe týchto informácií o vašich aktivitách.
Ak chcete rozšírenie nainštalovať do Edge, otvorte panel „Rozšírenia“ cez menu „tri bodky“ v pravom hornom rohu prehliadača. Vyberte možnosť „Load Unpacked“ a načítajte nové rozšírenie. Keď sa zobrazí výzva, otvorte priečinok „dist“ a rozšírenie sa načíta. Na používanie budete potrebovať API kľúč CO2 Signal ([získajte ho tu cez e-mail](https://www.co2signal.com/) - zadajte svoj e-mail do políčka na stránke) a [kód pre vašu oblasť](http://api.electricitymap.org/v3/zones) zodpovedajúci [Electricity Map](https://www.electricitymap.org/map) (napríklad pre Boston použite 'US-NEISO').
Po zadaní API kľúča a oblasti do rozhrania rozšírenia sa farba bodky v rozšírenej lište prehliadača zmení, aby odrážala energetickú spotrebu vo vašej oblasti. Táto bodka vám pomôže rozhodnúť, aké aktivity vyžadujúce energiu sú vhodné. Koncept systému „bodky“ som si osvojil z rozšírenia [Energy Lollipop](https://energylollipop.com/) pre emisie v Kalifornii.
Použitím API CO2 Signal od tmrow na sledovanie spotreby elektrickej energie vytvorte rozšírenie prehliadača, ktoré vám umožní dostávať upozornenia o aktuálnej záťaži spotreby elektrickej energie vo vašom regióne. Používanie tohto rozšírenia vám pomôže robiť informované rozhodnutia o vašich aktivitách na základe týchto údajov.
Na inštaláciu v Edge použite menu „tri bodky“ v pravom hornom rohu prehliadača a vyhľadajte panel Rozšírenia. Odtiaľ vyberte „Load Unpacked“ na načítanie nového rozšírenia. Otvorte priečinok „dist“ na požiadanie a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč pre CO2 Signal ([získajte ho tu cez e-mail](https://www.co2signal.com/) - zadajte svoj e-mail do políčka na stránke) a [kód pre váš región](http://api.electricitymap.org/v3/zones), ktorý zodpovedá [Elektrickej mape](https://www.electricitymap.org/map) (napríklad v Bostone používam 'US-NEISO').
Po zadaní API kľúča a regiónu do rozhrania rozšírenia sa farebný bod na paneli rozšírenia prehliadača zmení, aby odrážal spotrebu energie vo vašom regióne, a poskytne vám odporúčania ohľadom vhodných aktivít. Koncept systému „bodov“ mi bol inšpiráciou od [rozšírenia prehliadača Energy Lollipop](https://energylollipop.com/) pre Kaliforniu.
Použitím API C02 Signal od tmrow na sledovanie spotreby elektriny vytvorte rozšírenie prehliadača, aby ste mali pripomienku priamo vo svojom prehliadači o tom, aká náročná je spotreba elektriny vo vašom regióne. Používanie tohto rozšírenia ad hoc vám pomôže robiť rozhodnutia o vašich aktivitách na základe týchto informácií.
Na inštaláciu v Edge použite menu „tri bodky“ v pravom hornom rohu prehliadača na nájdenie panelu Rozšírenia. Odtiaľ vyberte „Načítať nebalené“ na načítanie nového rozšírenia. Pri výzve otvorte priečinok „dist“ a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč pre API CO2 Signal ([získajte ho tu cez e-mail](https://www.co2signal.com/) - zadajte svoj e-mail do políčka na tejto stránke) a [kód pre váš región](http://api.electricitymap.org/v3/zones) zodpovedajúci [Electricity Map](https://www.electricitymap.org/map) (napríklad v Bostone používam 'US-NEISO').
Keď zadáte API kľúč a región do rozhrania rozšírenia, farebná bodka v paneli rozšírenia prehliadača by sa mala zmeniť tak, aby odrážala spotrebu energie vo vašom regióne a poskytla vám návod, aké energeticky náročné aktivity by boli vhodné vykonať. Koncept za týmto systémom „bodky“ mi bol inšpirovaný rozšírením [Energy Lollipop](https://energylollipop.com/) pre emisie v Kalifornii.
> Obrázok z [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Na kreslenie na prvok canvas nasledujete rovnaký trojkrokový proces, ktorý tvorí základ všetkých canvas grafík. Keď to urobíte niekoľkokrát, stane sa to pre vás prirodzené:
@ -323,11 +323,11 @@ Vytvoríte webovú stránku s prvkom Canvas. Mali by ste vykresliť čiernu obra
- **Systém bodovania**: Každá zničená nepriateľská loď udeľuje 100 bodov (okrúhle čísla sa hráčom ľahšie počítajú v hlave). Skóre sa zobrazuje v ľavom dolnom rohu.
- **Počítadlo životov**: Tvoj hrdina začína s tromi životmi - štandard, ktorý stanovali rané arkádové hry pre rovnováhu výzvy a hrateľnosti. Každá kolízia s nepriateľom stojí jeden život. Zostávajúce životy zobrazíme v pravom dolnom rohu pomocou ikon lodí .
- **Počítadlo životov**: Tvoj hrdina začína s tromi životmi - štandard, ktorý stanovali rané arkádové hry pre rovnováhu výzvy a hrateľnosti. Každá kolízia s nepriateľom stojí jeden život. Zostávajúce životy zobrazíme v pravom dolnom rohu pomocou ikon lodí .
Použitie `history.pushState` vytvára nové zápisy v histórii prehliadača. Môžete to overiť podržaním *tlačidla späť* vo vašom prehliadači, malo by vám to zobraziť niečo takéto:
Ak kliknete na tlačidlo späť niekoľkokrát, uvidíte, že sa mení aktuálna URL a história sa aktualizuje, ale stále sa zobrazuje tá istá šablóna.
@ -292,7 +292,7 @@ Najprv si všimnime, čo sa deje pri základnom odoslaní formulára:
2. Sledujte zmenu URL v adresnom riadku prehliadača
3. Všimnite si, ako stránka obnoví a údaje sa zobrazia v URL
### Porovnanie HTTP metód
@ -346,7 +346,7 @@ Nakonfigurujme váš registračný formulár tak, aby správne komunikoval so ba
2. **Kliknite** na tlačidlo "Create Account"
3. **Sledujte** odpoveď servera v prehliadači
**Čo by ste mali vidieť:**
- **Prehliadač sa presmeruje** na URL API endpointu
@ -609,7 +609,7 @@ async function register() {
3. **Kliknite** na "Vytvoriť účet"
4. **Sledujte** správy v konzole a spätnú väzbu používateľa
**Čo by ste mali vidieť:**
- **Stav načítavania** sa zobrazí na tlačidle odoslania
localizeflow[bot]
1 week ago