> Sketchnote készítette [Tomomi Imura](https://twitter.com/girlie_mac)
Az HTML, vagyis a HyperText Markup Language, minden általad valaha látogatott weboldal alapja. Gondolj az HTML-re úgy, mint a weboldalak vázára – ez határozza meg, hogy hová kerül a tartalom, hogyan van szervezve, és mit jelképez minden egyes elem. Míg a CSS később „felöltözteti” az HTML-t színekkel és elrendezéssel, és a JavaScript életre kelti interaktivitással, az HTML biztosítja azt az alapvető szerkezetet, amely minden mást lehetővé tesz.
@ -86,7 +86,7 @@ Létrehozol egy külön mappát a terrárium projekthez, és hozzáadod az első
4. Az Explorer panelen kattints az „Új fájl” ikonra
5. Nevezd el a fájlt `index.html`-nek
Emlékszel, hogy a HTML terráriumod meglehetősen egyszerűnek tűnt? A CSS az, ahol azt az egyszerű szerkezetet vizuálisan vonzóvá alakítjuk.
@ -202,7 +202,7 @@ body {
Nyisd meg a böngésződ fejlesztői eszközeit (F12), menj az Elements fülre, és nézd meg a `<h1>` elemedet. Láthatod, hogy a betűtípust a `body`-tól örökli:
✅ **Kísérlet**: Próbálj meg más öröklődő tulajdonságokat is beállítani a `<body>`-n, mint a `color`, `line-height` vagy `text-align`. Mi történik a címmel és más elemekkel?
@ -332,7 +332,7 @@ A terráriumunkban minden növény hasonló stílust igényel, de egyedi elhelye
**Az egyes növények HTML szerkezete:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.hu.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/hu/plant1.d18b18ffe73da18f.png" />
Finom fénypontokat készítesz, amelyek szimulálják, hogyan tükröződik a fény az üvegfelületen. Ez hasonló ahhoz, ahogy a reneszánsz festők, például Jan van Eyck fénnyel és visszatükröződéssel teszik térhatásúvá az üvegvázlatokat. Itt egy cél, amit meg akarsz valósítani:
> Vázlatrajz készítette [Tomomi Imura](https://twitter.com/girlie_mac)
Üdvözlünk a webfejlesztés egyik legizgalmasabb részénél – a dolgok interaktívvá tételénél! A Document Object Model (DOM) olyan, mint egy híd az HTML-ed és a JavaScript-ed között, és ma ezt fogjuk használni, hogy életre keltsük a terráriumodat. Amikor Tim Berners-Lee megalkotta az első webböngészőt, egy olyan webet képzelt el, ahol a dokumentumok dinamikusak és interaktívak lehetnek – a DOM teszi lehetővé ezt a látomást.
@ -102,7 +102,7 @@ flowchart TD
style P fill:#ffebee
style Q fill:#ffebee
```
> A DOM és az azt hivatkozó HTML jelölés ábrázolása. Forrás: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **Closure-ök megértése**: A closure-ök jelentős téma a JavaScript-ben, és sok fejlesztő évekig használja őket anélkül, hogy minden elméleti részletet teljesen átlátna. Ma a gyakorlati alkalmazásra fókuszálunk – meglátod, hogy a closure-ök természetes módon jelennek meg, miközben interaktív funkciókat építünk. A megértés fejlődni fog, miközben látod, hogyan oldanak meg valódi problémákat.
> A DOM és az azt hivatkozó HTML jelölés ábrázolása. Forrás: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ Most teszteld az interaktív terráriumodat! Nyisd meg az `index.html` fájlodat
- **Eszközök közötti támogatás**: Asztali és mobil támogatás
- **Teljesítménytudatosság**: Nincs memóriaszivárgás vagy fölösleges számítás
Egy kis drag and drop kódmeditáció. Egy kis HTML, JS és CSS használatával létrehozhatsz egy webes felületet, stílusozhatod, és interakciót adhatsz hozzá.
> Néhány korai böngésző, forrás: [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Hogyan dolgozza fel a böngésző a webes tartalmat
@ -194,7 +194,7 @@ quadrantChart
A bővítmény telepítési folyamatának ismerete segít előre látni a felhasználói élményt, amikor a felhasználók telepítik a bővítményedet. A telepítési folyamat egységes a modern böngészőkben, kisebb felületbeli különbségekkel.
> **Fontos**: Győződj meg róla, hogy bekapcsoltad a fejlesztői módot és engedélyezted a más áruházból származó bővítményeket, amikor saját bővítményeidet teszteled.
@ -308,10 +308,10 @@ Ez a fokozatos információfeltárás elve, amit az interfésztervezés már a s
### Bővítmény nézetek áttekintése
**Beállítási nézet** – Első alkalommal használók konfigurációja:
> ⚠️ **Biztonsági megfontolás**: Termelési alkalmazásokban az API kulcsok LocalStorage-ben történő tárolása biztonsági kockázatokat rejt, mivel JavaScript hozzáférhet ezekhez az adatokhoz. Tanulási céllal ez az eljárás elfogadható, de éles alkalmazások esetén biztonságos szerveroldali tárolás javasolt.
@ -123,7 +123,7 @@ Az Edge fejlesztői eszközeinek megnyitásához kattints a jobb felső sarokban
Próbáljuk ki! Nyiss meg egy weboldalt (a Microsoft.com jól működik ehhez), és kattints a 'Felvétel' gombra. Most frissítsd az oldalt, és figyeld, ahogy a profiler felveszi, mi történik. Amikor leállítod a felvételt, részletes bontást látsz arról, hogyan 'szkriptel', 'renderel' és 'fest' a böngésző. Ez olyan, mint amikor a küldetésirányítás minden rendszert figyel egy űrrakéta indításakor – valós idejű adatokat kapsz arról, mi történik és mikor.
✅ A [Microsoft dokumentáció](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) rengeteg további részletet tartalmaz, ha mélyebben bele akarsz nézni
@ -133,11 +133,11 @@ Jelölj ki a profil idővonalából eseményeket, hogy közelről lásd a betöl
Készíts pillanatképet az oldal teljesítményéről az idővonal egy részének kijelölésével, és nézd meg az összefoglaló panelt:
✅ Ismerkedj meg a profilerrel! Nyisd meg a fejlesztői eszközöket ezen az oldalon, és nézd meg, van-e valahol szűk keresztmetszet. Melyik a leglassabban betöltődő erőforrás? A leggyorsabb?
A tmrow CO2 Signal API-ját használva az áramfogyasztás nyomon követésére, készíts egy böngészőbővítményt, amely emlékeztetőt ad a böngésződben arról, hogy mennyire terhelt az áramfogyasztás a régiódban. Az ad hoc használat segít abban, hogy az információk alapján döntéseket hozz a tevékenységeidről.
Edge böngészőn való telepítéshez használd a böngésző jobb felső sarkában található 'három pont' menüt, hogy megtaláld a Bővítmények panelt. Ott válaszd a 'Kicsomagolt betöltése' opciót egy új bővítmény betöltéséhez. A megjelenő ablakban nyisd meg a 'dist' mappát, és a bővítmény betöltődik. A használathoz szükséged lesz egy API kulcsra a CO2 Signal API-hoz ([itt szerezhetsz egyet e-mailben](https://www.co2signal.com/) - add meg az e-mail címedet az oldalon található mezőben), valamint a régiódhoz tartozó [kódra](http://api.electricitymap.org/v3/zones), amely megfelel az [Electricity Map](https://www.electricitymap.org/map) térképének (például Bostonban én az 'US-NEISO' kódot használom).
Miután az API kulcsot és a régiót megadtad a bővítmény felületén, a böngészőbővítmény sávjában lévő színes pontnak meg kell változnia, hogy tükrözze a régiód energiafogyasztását, és iránymutatást adjon arról, hogy milyen energiaigényes tevékenységek lennének megfelelőek számodra. Ennek a 'pont' rendszernek az ötletét a [Energy Lollipop bővítmény](https://energylollipop.com/) adta, amely a kaliforniai kibocsátásokat követi.
A tmrow CO2 Signal API-ját használva az áramfogyasztás nyomon követésére, hozzon létre egy böngészőbővítményt, amely közvetlenül a böngészőjében emlékeztetőt ad az Ön régiójának áramfogyasztásáról. Ennek az ad hoc bővítménynek a használata segít döntéseket hozni a tevékenységeiről ezen információk alapján.
Edge böngészőben való telepítéshez használja a böngésző jobb felső sarkában található 'három pont' menüt, hogy megtalálja a Bővítmények panelt. Innen válassza a 'Kicsomagolt betöltése' opciót egy új bővítmény betöltéséhez. Amikor a rendszer kéri, nyissa meg a 'dist' mappát, és a bővítmény betöltődik. A használathoz szüksége lesz egy API kulcsra a CO2 Signal API-hoz ([itt szerezhet egyet e-mailben](https://www.co2signal.com/) - írja be az e-mail címét az oldal mezőjébe), valamint a régiójához tartozó [kódra](http://api.electricitymap.org/v3/zones), amely megfelel az [Electricity Map](https://www.electricitymap.org/map) térképének (például Bostonban én az 'US-NEISO' kódot használom).
Miután az API kulcsot és a régiót megadta a bővítmény felületén, a böngésző bővítménysávjában lévő színes pontnak meg kell változnia, hogy tükrözze az Ön régiójának energiafogyasztását, és jelezze, hogy milyen magas energiafogyasztású tevékenységek lennének megfelelőek az Ön számára. Ennek a "pont" rendszernek a koncepcióját a [Energy Lollipop bővítmény](https://energylollipop.com/) adta, amely Kalifornia kibocsátásait mutatja.
A tmrow CO2 Signal API-ját használva az áramfogyasztás nyomon követésére hozz létre egy böngészőbővítményt, amely közvetlenül a böngésződben emlékeztet az adott régió áramfogyasztására. Ennek az ad hoc bővítménynek a használata segíthet abban, hogy az információk alapján mérlegeld a tevékenységeidet.
Edge böngészőre való telepítéshez használd a böngésző jobb felső sarkában található 'három pont' menüt, hogy megtaláld a Bővítmények panelt. Innen válaszd a 'Kicsomagolt bővítmény betöltése' opciót egy új bővítmény betöltéséhez. A megjelenő ablakban nyisd meg a 'dist' mappát, és a bővítmény betöltődik. A használathoz szükséged lesz egy API kulcsra a CO2 Signal API-hoz ([itt szerezhetsz egyet e-mailben](https://www.co2signal.com/) - add meg az e-mail címedet az oldalon található mezőben), valamint a régiód [kódjára](http://api.electricitymap.org/v3/zones), amely megfelel az [Electricity Map](https://www.electricitymap.org/map) térképének (például Boston esetében az 'US-NEISO' kódot használom).
Miután az API kulcsot és a régiót megadtad a bővítmény felületén, a böngésző bővítménysávjában található színes pontnak meg kell változnia, hogy tükrözze a régiód energiafogyasztását, és jelezze, hogy milyen energiaigényes tevékenységek végzése lenne megfelelő. A 'pontok' mögötti koncepciót az [Energy Lollipop bővítmény](https://energylollipop.com/) adta, amely a kaliforniai kibocsátásokat követi.
A tmrow CO2 Signal API-ját használva az áramfogyasztás nyomon követésére, egy böngészőbővítményt hozunk létre, amely emlékeztetőt ad arról, hogy az Ön régiójában mennyire terhelt az áramhasználat. Ennek a bővítménynek az alkalmi használata segíthet abban, hogy ezen információk alapján döntsön a tevékenységeiről.
Az Edge böngészőben való telepítéshez használja a böngésző jobb felső sarkában található 'három pont' menüt az Extension Panel megkereséséhez. Ott válassza a 'Load unpacked' opciót egy új bővítmény betöltéséhez. A megjelenő ablakban nyissa meg a 'dist' mappát, és a bővítmény betöltődik. A használathoz szüksége lesz egy CO2 Signal API kulcsra ([e-mailben itt szerezhető be](https://www.co2snal.com/) - adja meg e-mail címét az oldalon található mezőben), valamint [az Ön régiójának kódjára](http://api.electricitymap.org/v3/zones) az [Electricity Map](https://www.electricitymap.org/map) oldalról (például Boston esetében én az 'US-NEISO' kódot használom).
Miután az API kulcsot és a régiót megadta a bővítmény felületén, a böngésző bővítménysávjában megjelenő színes pontnak tükröznie kell az Ön régiójának energiahasználatát, és jeleznie kell, hogy az energiaigényes tevékenységek mennyire megfelelőek az adott időpontban. Ennek a 'pont' rendszernek a koncepcióját a kaliforniai kibocsátásokhoz készült [Energy Lollipop bővítmény](https://energylollipop.com/) inspirálta.
A tmrow Signal CO2 API-ját fogjuk használni az áramfogyasztás nyomon követésére, hogy egy böngészőbővítményt hozzunk létre. Ez a bővítmény közvetlenül a böngészőben emlékeztet arra, hogy mennyire terheli az áramfogyasztás a régiódat. Ennek az egyedi bővítménynek a használata segít abban, hogy tevékenységeidet ezek alapján az információk alapján értékeld.
Edge böngészőhöz való telepítéshez használd a böngésző jobb felső sarkában található "három pont" menüt, hogy megtaláld a Bővítmények panelt. Ha még nincs bekapcsolva, kapcsold be a Fejlesztői módot (a bal alsó sarokban). Válaszd a "Kitömörített bővítmény betöltése" opciót egy új bővítmény hozzáadásához. A megjelenő ablakban nyisd meg a "dist" mappát, és a bővítmény betöltődik. A használathoz szükséged lesz egy API kulcsra a CO2 Signal API-hoz (ezt [itt szerezheted meg e-mailben](https://www.co2signal.com/) - add meg az e-mail címedet az oldalon található mezőben), valamint a [régiód kódjára](http://api.electricitymap.org/v3/zones), amely megfelel az [elektromos térkép](https://www.electricitymap.org/map) régiójának (például Boston esetében "US-NEISO").
Miután megadtad az API kulcsot és a régiót a bővítmény felületén, a böngésző bővítménysávjában található színes pontnak meg kell változnia, hogy tükrözze a régió energiafogyasztását. Ez egyben útmutatást is ad arról, hogy mely nagy energiaigényű tevékenységek végrehajtása lenne megfelelő. Ennek a "pontozási" rendszernek az alapötletét a [California Energy Lollipop](https://energylollipop.com/) bővítmény biztosította.
Építs egy böngészőbővítményt, amely a tmrow CO2 Signal API-t használja az energiafogyasztás nyomon követésére, és emlékeztetőként megjeleníti, hogy a régiódban mennyire magas az energiafogyasztás. Ezt a bővítményt ad hoc módon használhatod, hogy az információk alapján dönts a tevékenységeidről.
Edge böngészőre való telepítéshez keresd meg a böngésző jobb felső sarkában található „három pont” menüben az „Extensions” panelt. Ott válaszd a „Load Unpacked” opciót, hogy betöltsd az új bővítményt. A megjelenő ablakban nyisd meg a „dist” mappát, és a bővítmény betöltődik. A használathoz szükséged lesz a CO2 Signal API API-kulcsára ([itt szerezhetsz egyet e-mailben](https://www.co2signal.com/) - írd be az e-mail címedet az oldalon található mezőbe), valamint a régiódnak megfelelő [kódra](http://api.electricitymap.org/v3/zones) az [Electricity Map](https://www.electricitymap.org/map) alapján (például Boston esetében 'US-NEISO').
Miután megadtad az API-kulcsot és a régiót a bővítmény felületén, a böngésző bővítménysávjában megjelenő színes pont változni fog, tükrözve a régiód energiafogyasztását. Ez segít eldönteni, hogy milyen energiaigényes tevékenységeket érdemes végezni. Ennek a „pont” rendszernek az ötletét a kaliforniai kibocsátásokhoz készült [Energy Lollipop bővítmény](https://energylollipop.com/) inspirálta.
A tmrow CO2 Signal API használatával nyomon követheted az áramfogyasztást, és létrehozhatsz egy böngészőbővítményt, amely figyelmeztetéseket ad a böngésződben arról, hogy mennyire terhelt az adott régió áramfogyasztása. Ennek a bővítménynek a használata segíthet abban, hogy tevékenységeidet ezen információk alapján mérlegeld.
Edge böngészőben való telepítéshez használd a böngésző jobb felső sarkában található 'három pont' menüt, hogy megtaláld a Bővítmények panelt. Ott válaszd a 'Load Unpacked' opciót, hogy betöltsd az új bővítményt. Nyisd meg a 'dist' mappát a kérésre, és a bővítmény betöltődik. A használathoz szükséged lesz egy API kulcsra a CO2 Signal API-hoz ([itt szerezhetsz egyet e-mailben](https://www.co2signal.com/) - írd be az e-mail címedet az oldalon található mezőbe), valamint a régiód [kódjára](http://api.electricitymap.org/v3/zones), amely megfelel az [Electricity Map](https://www.electricitymap.org/map) térképének (például Bostonban én az 'US-NEISO' kódot használom).
Miután az API kulcsot és a régiót megadtad a bővítmény felületén, a böngészőbővítmény sávjában lévő színes pont megváltozik, hogy tükrözze a régió energiafogyasztását, és útmutatást adjon arról, hogy milyen tevékenységek végezhetők az adott időszakban. Ennek a 'pont' rendszernek az ötletét a [Lollipop Energy böngészőbővítmény](https://energylollipop.com/) adta, amelyet Kalifornia kibocsátásaihoz fejlesztettek ki.
A tmrow CO2 Signal API-ját használva követheted az áramfogyasztást, és készíthetsz egy böngészőbővítményt, amely emlékeztetőt ad a böngésződben arról, hogy mennyire terhelt a régiód áramhasználata. Az ilyen jellegű bővítmény segíthet abban, hogy az információk alapján jobban megfontold a tevékenységeidet.
Edge böngészőn való telepítéshez használd a böngésző jobb felső sarkában található 'három pont' menüt, hogy megtaláld a Bővítmények panelt. Ott válaszd a 'Betöltés csomagolatlanul' opciót, hogy új bővítményt tölts be. A megjelenő ablakban nyisd meg a 'dist' mappát, és a bővítmény betöltődik. Használatához szükséged lesz egy API kulcsra a CO2 Signal API-hoz ([itt szerezhetsz egyet e-mailben](https://www.co2signal.com/) - add meg az e-mail címedet az oldalon található mezőben), valamint a régiódhoz tartozó [kódra](http://api.electricitymap.org/v3/zones), amely megfelel az [Electricity Map](https://www.electricitymap.org/map) térképének (például Bostonban én az 'US-NEISO' kódot használom).
Miután az API kulcsot és a régiót megadtad a bővítmény felületén, a böngészőbővítmény sávjában lévő színes pontnak meg kell változnia, hogy tükrözze a régiód energiahasználatát, és iránymutatást adjon arról, hogy milyen energiaigényes tevékenységek lennének megfelelőek számodra. Ennek a 'pont' rendszernek az ötletét a [Energy Lollipop bővítmény](https://energylollipop.com/) adta, amely a kaliforniai kibocsátásokat követi.
- **Pontozási rendszer**: Minden legyőzött ellenséges hajó 100 pontot ér (a kerek számok a játékosoknak könnyebben fejben számolhatók). A pontszám a bal alsó sarokban jelenik meg.
- **Élet számláló**: A hősöd három élettel indul – ez egy korai arcade játékok által lefektetett standard, hogy egyensúlyban tartsa a kihívást és a játszhatóságot. Minden találkozás az ellenséggel egy életet elvesz. A megmaradt életeket jobb alsó sarokban hajó ikonokkal fogjuk megjeleníteni .
- **Élet számláló**: A hősöd három élettel indul – ez egy korai arcade játékok által lefektetett standard, hogy egyensúlyban tartsa a kihívást és a játszhatóságot. Minden találkozás az ellenséggel egy életet elvesz. A megmaradt életeket jobb alsó sarokban hajó ikonokkal fogjuk megjeleníteni .
A `history.pushState` új bejegyzéseket hoz létre a böngésző navigációs előzményeiben. Ezt ellenőrizheted úgy, hogy lenyomod a böngésződ *vissza gombját*, ilyesmit fogsz látni:
Ha néhányszor megnyomod a vissza gombot, látni fogod, hogy a jelenlegi URL változik és az előzmények frissülnek, de ugyanaz a sablon jelenik meg továbbra is.
@ -292,7 +292,7 @@ Először nézzük meg, mi történik alapvető űrlap beküldéssel:
2. Figyeld meg a böngésző címsávjának változását
3. Jegyezd meg, hogy az oldal újratöltődik és az adatok megjelennek az URL-ben
### HTTP metódusok összehasonlítása
@ -346,7 +346,7 @@ Konfiguráljuk a regisztrációs űrlapodat, hogy megfelelően kommunikáljon a
2. **Kattints** a "Fiók létrehozása" gombra
3. **Figyeld meg** a szerver válaszát a böngésződben
**Amit látnod kell:**
- **Böngésző átirányít** az API végpont URL-jére
@ -609,7 +609,7 @@ async function register() {
3. **Kattints** a „Fiók létrehozása” gombra
4. **Figyeld** a konzol üzeneteket és a felhasználói visszajelzést
**Mit kell látnod:**
- **Betöltési állapot** jelenik meg a küldés gombon
@ -783,7 +783,7 @@ Fejlesszük tovább a regisztrációs űrlapodat robusztus validációval, ami k
3. **Próbálj meg** különleges karaktereket a felhasználónév mezőbe
4. **Add meg** negatív egyenleg értéket
**Mit fogsz tapasztalni:**
- **A böngésző megjeleníti** a natív validációs üzeneteket
@ -943,7 +943,7 @@ Mutass meg egy hibaüzenetet az HTML-ben, ha a felhasználó már létezik.
Íme egy példa arra, hogy nézhet ki a végleges bejelentkezési oldal egy kis stílus hozzáadása után:
@ -187,7 +187,7 @@ Az [állapotkezelés](https://en.wikipedia.org/wiki/State_management) valójába
Ahelyett, hogy körbe-körbe futnánk, létrehozunk egy **központosított állapotkezelő** rendszert. Gondolj rá úgy, mint egy igazán rendezett személyre, aki az összes fontos dologért felelős:
```mermaid
flowchart TD
@ -798,7 +798,7 @@ Ez a kihívás segít neked úgy gondolkodni, mint egy professzionális fejleszt
Íme egy példa eredmény a feladat elvégzése után:
@ -112,7 +112,7 @@ Tekintsd meg a [szerver API dokumentációját](../api/README.md) az alábbiakho
**Várható eredmény:**
A feladat elvégzése után a banki alkalmazásodnak teljesen működőképes "Tranzakció hozzáadása" funkcióval kell rendelkeznie, amely professzionálisan néz ki és működik:
Ebben a projektben megtanulhatod, hogyan építs fel egy képzeletbeli bankot. Ezek a leckék útmutatást adnak egy webalkalmazás elrendezéséhez és útvonalainak kialakításához, űrlapok létrehozásához, állapot kezeléséhez, valamint adatok lekéréséhez egy API-ból, amelyből elérheted a bank adatait.
@ -78,7 +78,7 @@ Mivel a VSCode.dev legalább egy fájlt igényel a repozitórium megnyitásához
4. **Írj** egy commit üzenetet: "Kezdeti HTML struktúra hozzáadása"
5. **Kattints** a "Commit new file" gombra a változtatások mentéséhez
**Ez a kezdeti beállítás a következőket valósítja meg:**
- **Létrehozza** a megfelelő HTML5 dokumentum struktúrát szemantikus elemekkel
@ -104,7 +104,7 @@ Most, hogy a repozitórium alapja létrejött, váltsunk át a VSCode.dev-re a f
✅ **Sikerjelző**: A projekt fájljait az Explorer oldalsávban kell látnod, az `index.html` pedig szerkesztésre elérhető a fő szerkesztő területen.
**Amit az interfészen látsz:**
- **Explorer oldalsáv**: **Megjeleníti** a repozitórium fájljait és mappastruktúráját
@ -448,7 +448,7 @@ A bővítmények javítják a fejlesztési élményt élő előnézeti képessé
**Azonnali eredmények telepítés után:**
Amint a CodeSwing telepítve van, az önéletrajz weboldalad élő előnézete megjelenik a szerkesztőben. Ez lehetővé teszi, hogy pontosan lásd, hogyan néz ki az oldal, miközben változtatásokat végzel.
**Az interfész fejlesztett megértése:**
- **Megosztott nézet**: **Mutatja** a kódot az egyik oldalon és az élő előnézetet a másikon
## 🗺️ Tanulási utad az MI alkalmazásfejlesztésben
@ -189,7 +189,7 @@ mindmap
```
**Alapelv**: Az MI alkalmazásfejlesztés a hagyományos webfejlesztési készségeket ötvözi MI szolgáltatás integrációval, így olyan intelligens alkalmazásokat hoz létre, amelyek természetesnek és reagálónak érződnek a felhasználók számára.
**Ez teszi a playgroundot olyan hasznossá:**
- **Próbálj ki** különböző MI modelleket, mint a GPT-4o-mini, Claude és mások (mind ingyen!)
@ -199,7 +199,7 @@ mindmap
Miután játszottál egy kicsit, csak kattints a "Code" fülre, és válaszd ki a programozási nyelved, hogy megkapd a szükséges implementációs kódot.
## Python backend integráció beállítása
@ -2352,14 +2352,14 @@ Szeretnéd kipróbálni ezt a projektet egy felhő alapú fejlesztői környezet
- **Navigálj** a [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) oldalra
- **Kattints** a jobb felső sarokban a "Use this template" gombra (győződj meg róla, hogy be vagy jelentkezve GitHub-ra)
**2. lépés: Codespaces indítása**
- **Nyisd meg** az újonnan létrehozott repository-t
- **Kattints** a zöld "Code" gombra, és válaszd a "Codespaces" lehetőséget
- **Válaszd** a "Create codespace on main" opciót a fejlesztői környezet indításához
Minden lecke tartalmaz egy feladatot, tudásellenőrzést és egy kihívást, hogy eligazodj olyan témákban, mint:
@ -115,7 +115,7 @@ Kövesd a lépéseket:
A létrehozott repository példányában kattints a **Code** gombra, majd válaszd az **Open with Codespaces** lehetőséget. Ez létrehoz egy új Codespace-t a munkához.
@ -17,7 +17,7 @@ Dengar, saya benar-benar mengerti jika pemrograman terasa menakutkan sekarang. K
Hari ini, kita akan menjelajahi alat-alat luar biasa yang membuat pengembangan web modern tidak hanya mungkin, tetapi juga sangat adiktif. Saya berbicara tentang editor, browser, dan alur kerja yang sama persis yang digunakan pengembang di Netflix, Spotify, dan studio aplikasi indie favoritmu setiap hari. Dan ini bagian yang akan membuatmu ingin menari kegirangan: sebagian besar alat profesional kelas industri ini sepenuhnya gratis!
@ -17,7 +17,7 @@ Saya tahu ini mungkin terasa banyak pada awalnya – saya ingat saat pertama kal
Kita akan menjalani perjalanan ini bersama, langkah demi langkah. Tidak perlu terburu-buru, tidak ada tekanan – hanya Anda, saya, dan beberapa alat keren yang akan menjadi sahabat baru Anda!
> Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -610,7 +610,7 @@ Pertama, mari kita temukan repositori (atau **repo**) di GitHub yang menarik bag
✅ Cara yang baik untuk menemukan repo 'ramah pemula' adalah dengan [mencari berdasarkan tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Ada beberapa cara untuk menyalin kode. Salah satunya adalah dengan "mengkloning" isi repositori, menggunakan HTTPS, SSH, atau menggunakan GitHub CLI (Command Line Interface).
> Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -1060,12 +1060,12 @@ Setiap gambar di situs web Anda memiliki tujuan. Memahami tujuan tersebut memban
**Gambar informatif** - menyampaikan informasi penting:
```html
<imgsrc="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.id.png" alt="Sales increased 25% from Q1 to Q2 2024">
<imgsrc="../../../../translated_images/id/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
**Gambar dekoratif** - hanya visual tanpa nilai informasi:
> Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, atau HyperText Markup Language, adalah dasar dari setiap situs web yang pernah Anda kunjungi. Pikirkan HTML sebagai kerangka yang memberikan struktur pada halaman web – HTML menentukan di mana konten berada, bagaimana konten diatur, dan apa yang diwakili oleh setiap bagian. Sementara CSS nantinya akan "mendandani" HTML Anda dengan warna dan tata letak, dan JavaScript akan menghidupkannya dengan interaktivitas, HTML menyediakan struktur penting yang membuat semuanya menjadi mungkin.
@ -88,7 +88,7 @@ Anda akan membuat folder khusus untuk proyek terrarium Anda dan menambahkan file
4. Di panel Explorer, klik ikon "New File"
5. Beri nama file Anda `index.html`
**Opsi 2: Menggunakan Perintah Terminal**
```bash
@ -239,48 +239,48 @@ Sekarang tambahkan gambar tanaman yang diatur dalam dua kolom di antara tag `<bo
> Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac)
Ingat bagaimana terrarium HTML Anda terlihat cukup sederhana? CSS adalah tempat kita mengubah struktur polos itu menjadi sesuatu yang menarik secara visual.
@ -205,7 +205,7 @@ body {
Buka alat pengembang browser Anda (F12), navigasikan ke tab Elemen, dan inspeksi elemen `<h1>` Anda. Anda akan melihat bahwa elemen tersebut mewarisi keluarga font dari body:
✅ **Waktu Eksperimen**: Cobalah mengatur properti lain yang dapat diwarisi pada `<body>` seperti `color`, `line-height`, atau `text-align`. Apa yang terjadi pada heading dan elemen lainnya?
@ -335,7 +335,7 @@ Di terrarium kita, setiap tanaman membutuhkan gaya yang serupa tetapi juga membu
**Inilah struktur HTML untuk setiap tanaman:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.id.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/id/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.png" />
</div>
```
@ -599,7 +599,7 @@ Siap meningkatkan terrarium Anda dengan refleksi kaca yang realistis? Teknik ini
Anda akan membuat sorotan halus yang mensimulasikan bagaimana cahaya memantul dari permukaan kaca. Pendekatan ini mirip dengan bagaimana pelukis Renaisans seperti Jan van Eyck menggunakan cahaya dan refleksi untuk membuat kaca yang dilukis tampak tiga dimensi. Berikut adalah tujuan Anda:
> Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac)
Selamat datang di salah satu aspek paling menarik dari pengembangan web - membuat sesuatu menjadi interaktif! Document Object Model (DOM) adalah seperti jembatan antara HTML dan JavaScript Anda, dan hari ini kita akan menggunakannya untuk menghidupkan terrarium Anda. Ketika Tim Berners-Lee menciptakan browser web pertama, dia membayangkan web di mana dokumen bisa menjadi dinamis dan interaktif - DOM membuat visi itu menjadi mungkin.
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
> Representasi DOM dan markup HTML yang merujuk padanya. Dari [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **Memahami Penutupan**: Penutupan adalah topik penting dalam JavaScript, dan banyak pengembang menggunakannya selama bertahun-tahun sebelum sepenuhnya memahami semua aspek teoritisnya. Hari ini, kita fokus pada aplikasi praktis - Anda akan melihat penutupan muncul secara alami saat kita membangun fitur interaktif kita. Pemahaman akan berkembang saat Anda melihat bagaimana mereka menyelesaikan masalah nyata.
> Representasi DOM dan markup HTML yang merujuk padanya. Dari [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -598,7 +598,7 @@ Sekarang uji terrarium interaktif Anda! Buka file `index.html` Anda di browser w
- **Dukungan lintas perangkat**: Berfungsi di desktop dan mobile
- **Sadar kinerja**: Tidak ada kebocoran memori atau perhitungan redundan
Sebuah meditasi kode kecil dengan fitur seret dan lepas. Dengan sedikit HTML, JS, dan CSS, Anda dapat membangun antarmuka web, menatanya, dan menambahkan interaksi.
> Beberapa browser awal, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Bagaimana Browser Memproses Konten Web
@ -198,7 +198,7 @@ quadrantChart
Memahami proses pemasangan ekstensi membantu Anda mengantisipasi pengalaman pengguna saat mereka memasang ekstensi Anda. Proses pemasangan distandarisasi di browser modern, dengan variasi kecil dalam desain antarmuka.
> **Penting**: Pastikan untuk mengaktifkan mode pengembang dan izinkan ekstensi dari toko lain saat menguji ekstensi Anda sendiri.
@ -313,10 +313,10 @@ Ini mengikuti prinsip pengungkapan progresif yang digunakan dalam desain antarmu
### Ikhtisar Tampilan Ekstensi
**Tampilan Pengaturan** - Konfigurasi pengguna pertama kali:
**Tampilan Hasil** - Tampilan data jejak karbon:
> ⚠️ **Pertimbangan Keamanan**: Dalam aplikasi produksi, menyimpan kunci API di LocalStorage menimbulkan risiko keamanan karena JavaScript dapat mengakses data ini. Untuk tujuan pembelajaran, pendekatan ini baik-baik saja, tetapi aplikasi nyata harus menggunakan penyimpanan sisi server yang aman untuk kredensial sensitif.
@ -126,7 +126,7 @@ Untuk membuka Developer Tools di Edge, klik tiga titik di sudut kanan atas, lalu
Mari kita coba ini. Buka sebuah situs web (Microsoft.com bekerja dengan baik untuk ini) dan klik tombol 'Record'. Sekarang segarkan halaman dan lihat profiler menangkap semua yang terjadi. Ketika Anda berhenti merekam, Anda akan melihat rincian mendetail tentang bagaimana browser 'menyusun', 'merender', dan 'melukis' situs tersebut. Ini mengingatkan saya pada bagaimana pusat kendali misi memantau setiap sistem selama peluncuran roket - Anda mendapatkan data waktu nyata tentang apa yang terjadi dan kapan.
✅ [Dokumentasi Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) memiliki banyak detail jika Anda ingin mendalami lebih jauh
@ -136,11 +136,11 @@ Pilih elemen dari timeline profil untuk memperbesar peristiwa yang terjadi saat
Dapatkan snapshot performa halaman Anda dengan memilih bagian dari timeline profil dan melihat panel ringkasan:
Menggunakan API C02 Signal dari tmrow untuk melacak penggunaan listrik, buat ekstensi browser sehingga Anda dapat memiliki pengingat langsung di browser Anda tentang seberapa berat penggunaan listrik di wilayah Anda. Menggunakan ekstensi ini secara ad hoc akan membantu Anda membuat keputusan berdasarkan informasi ini.
Untuk menginstal di Edge, gunakan menu 'tiga titik' di sudut kanan atas browser untuk menemukan panel Ekstensi. Dari sana, pilih 'Load Unpacked' untuk memuat ekstensi baru. Buka folder 'dist' saat diminta, dan ekstensi akan dimuat. Untuk menggunakannya, Anda memerlukan kunci API untuk API CO2 Signal ([dapatkan di sini melalui email](https://www.co2signal.com/) - masukkan email Anda di kotak pada halaman ini) dan [kode untuk wilayah Anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [Electricity Map](https://www.electricitymap.org/map) (di Boston, misalnya, saya menggunakan 'US-NEISO').
Setelah kunci API dan wilayah dimasukkan ke dalam antarmuka ekstensi, titik berwarna di bilah ekstensi browser seharusnya berubah untuk mencerminkan penggunaan energi di wilayah Anda dan memberikan petunjuk tentang aktivitas berat energi yang sesuai untuk Anda lakukan. Konsep di balik sistem 'titik' ini diberikan kepada saya oleh [ekstensi Energy Lollipop](https://energylollipop.com/) untuk emisi di California.
Dengan menggunakan API sinyal CO2 dari tmrow untuk melacak penggunaan listrik, buatlah sebuah ekstensi peramban agar Anda dapat memiliki pengingat langsung di peramban Anda tentang konsumsi listrik di wilayah Anda. Penggunaan ekstensi ad hoc ini akan membantu Anda membuat keputusan tentang aktivitas Anda berdasarkan informasi tersebut.
Untuk menginstal di Edge, gunakan menu 'tiga titik' di pojok kanan atas peramban untuk menemukan panel Ekstensi. Dari sana, pilih 'Muat tanpa dikemas' untuk memuat ekstensi baru. Buka folder 'dist' saat diminta, dan ekstensi akan dimuat. Untuk menggunakannya, Anda memerlukan kunci API untuk API CO2 Signal ([dapatkan di sini melalui email](https://www.co2signal.com/) - masukkan email Anda di kotak pada halaman ini) dan [kode untuk wilayah Anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [Peta Listrik](https://www.electricitymap.org/map) (di Boston, misalnya, saya menggunakan 'US-NEISO').
Setelah kunci API dan wilayah dimasukkan di antarmuka ekstensi, titik warna di bilah ekstensi peramban Anda akan berubah untuk mencerminkan penggunaan energi di wilayah Anda dan memberikan indikator tentang aktivitas dengan konsumsi energi tinggi yang sesuai untuk Anda. Konsep di balik sistem "titik" ini saya dapatkan dari [ekstensi Energy Lollipop](https://energylollipop.com/) untuk emisi di California.
Dengan menggunakan API C02 Signal dari tmrow untuk memantau konsumsi listrik, buatlah ekstensi browser sehingga Anda dapat menerima pengingat langsung di browser Anda tentang konsumsi listrik di wilayah Anda. Penggunaan ekstensi ini akan membantu Anda membuat keputusan berdasarkan informasi tersebut.
Untuk menginstal di Edge, gunakan menu 'tiga titik' di sudut kanan atas browser untuk menemukan panel Ekstensi. Dari sana, pilih 'Muat ekstensi yang tidak dikompresi' untuk memuat ekstensi baru. Buka folder 'dist' saat diminta, dan ekstensi akan dimuat. Untuk menggunakannya, Anda memerlukan kunci API untuk API CO2 Signal ([dapatkan di sini melalui email](https://www.co2signal.com/) - masukkan email Anda di kotak pada halaman tersebut) dan [kode untuk wilayah Anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [Peta Listrik](https://www.electricitymap.org/map) (di Boston, misalnya, saya menggunakan 'US-NEISO').
Setelah kunci API dan wilayah dimasukkan ke dalam antarmuka ekstensi, titik berwarna di bilah ekstensi browser akan berubah untuk mencerminkan konsumsi energi di wilayah Anda dan memberikan indikator tentang aktivitas yang sesuai untuk dilakukan berdasarkan konsumsi energi tersebut. Konsep di balik sistem 'titik' ini terinspirasi oleh [ekstensi Energy Lollipop](https://energylollipop.com/) untuk emisi di California.
Menggunakan API CO2 Signal dari tmrow untuk melacak penggunaan listrik, ekstensi browser ini dirancang untuk memberikan pengingat tentang seberapa berat penggunaan listrik di wilayah Anda langsung di browser Anda. Dengan menggunakan ekstensi ini, Anda dapat membuat keputusan berdasarkan informasi tersebut untuk aktivitas Anda.
Untuk menginstal di Edge, gunakan menu 'tiga titik' di pojok kanan atas browser untuk menemukan panel ekstensi. Dari sana, pilih 'Load Unpacked' untuk memuat ekstensi baru. Pada prompt, buka folder 'dist' dan ekstensi akan dimuat. Untuk menggunakannya, Anda memerlukan kunci API CO2 Signal ([dapatkan melalui email di sini](https://www.co2signal.com/) - masukkan email Anda di kotak pada halaman tersebut) dan [kode wilayah Anda](http://api.electricitymap.org/v3/zones) dari [Electricity Map](https://www.electricitymap.org/map) (misalnya, di Boston, saya menggunakan 'US-NEISO').
Setelah kunci API dan wilayah dimasukkan ke dalam antarmuka ekstensi, titik berwarna di bilah ekstensi browser Anda akan berubah untuk mencerminkan penggunaan energi di wilayah Anda dan memberikan indikator tentang aktivitas berat energi yang sesuai untuk dilakukan. Konsep sistem 'titik' ini terinspirasi oleh [Ekstensi Energy Lollipop](https://energylollipop.com/) untuk emisi di California.
Kita akan menggunakan API Signal CO2 dari tmrow untuk memantau penggunaan listrik dan membuat ekstensi browser agar dapat memberikan pengingat langsung di browser tentang seberapa besar penggunaan listrik di wilayah kita. Penggunaan ekstensi ini akan membantu mengevaluasi aktivitas kita berdasarkan informasi tersebut.
Untuk menginstal di Edge, gunakan menu "tiga titik" di sudut kanan atas browser untuk menemukan panel Ekstensi. Jika belum aktif, aktifkan Mode Pengembang (di bagian kiri bawah). Pilih "Muat tanpa kompresi" untuk memuat ekstensi baru. Buka folder "dist" saat diminta, dan ekstensi akan dimuat. Untuk menggunakannya, Anda memerlukan kunci API untuk API CO2 Signal (Anda dapat [memperolehnya melalui email di sini](https://www.co2signal.com/) - masukkan email Anda di kotak pada halaman tersebut) dan [kode untuk wilayah Anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [peta listrik](https://www.electricitymap.org/map) (misalnya, di Boston, "US-NEISO").
Setelah kunci API dan wilayah dimasukkan ke dalam antarmuka ekstensi, titik berwarna di bilah ekstensi browser seharusnya berubah untuk mencerminkan penggunaan energi di wilayah tersebut dan memberikan petunjuk tentang aktivitas berenergi tinggi yang sesuai untuk dilakukan. Konsep di balik sistem "titik" ini terinspirasi oleh [ekstensi Energy Lollipop](https://energylollipop.com/) untuk emisi di California.
Bangun ekstensi browser yang memungkinkan Anda menampilkan pengingat di browser tentang seberapa besar konsumsi listrik di wilayah Anda, menggunakan API CO2 Signal dari tmrow untuk melacak penggunaan listrik. Dengan menggunakan ekstensi ini secara ad-hoc, Anda dapat membuat keputusan berdasarkan informasi ini untuk aktivitas Anda.
Untuk menginstalnya di Edge, temukan panel "Ekstensi" dari menu "tiga titik" di kanan atas browser. Dari sana, pilih "Load Unpacked" untuk memuat ekstensi baru. Ketika diminta, buka folder "dist", dan ekstensi akan dimuat. Untuk menggunakannya, Anda memerlukan API key dari CO2 Signal API ([dapatkan di sini melalui email](https://www.co2signal.com/) - masukkan email Anda di kotak pada halaman tersebut) dan [kode untuk wilayah Anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [Electricity Map](https://www.electricitymap.org/map) (misalnya, untuk Boston, gunakan 'US-NEISO').
Setelah Anda memasukkan API key dan wilayah Anda di antarmuka ekstensi, titik berwarna yang muncul di bilah ekstensi browser akan berubah, mencerminkan konsumsi energi di wilayah Anda. Ini akan membantu Anda menentukan aktivitas apa yang sesuai berdasarkan kebutuhan energi. Konsep sistem "titik" ini terinspirasi oleh [Energy Lollipop extension](https://energylollipop.com/) untuk emisi di California.
Menggunakan API Sinyal CO2 dari tmrow untuk memantau penggunaan listrik, buat ekstensi peramban sehingga Anda dapat menerima peringatan di peramban Anda tentang seberapa besar konsumsi listrik di wilayah Anda. Menggunakan ekstensi ini secara khusus akan membantu Anda membuat keputusan tentang aktivitas Anda berdasarkan informasi tersebut.
Untuk menginstal di Edge, gunakan menu 'tiga titik' di sudut kanan atas peramban untuk menemukan panel Ekstensi. Dari sana, pilih 'Load Unpacked' untuk memuat ekstensi baru. Buka folder 'dist' saat diminta, dan ekstensi akan dimuat. Untuk menggunakannya, Anda memerlukan kunci API untuk API Sinyal CO2 ([dapatkan satu di sini melalui email](https://www.co2signal.com/) - masukkan email Anda di kotak pada halaman tersebut) dan [kode untuk wilayah Anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [Peta Listrik](https://www.electricitymap.org/map) (di Boston, misalnya, saya menggunakan 'US-NEISO').
Setelah kunci API dan wilayah dimasukkan ke antarmuka ekstensi, titik berwarna di bilah ekstensi peramban akan berubah untuk mencerminkan konsumsi energi di wilayah Anda dan memberikan petunjuk tentang aktivitas berat yang sesuai untuk Anda lakukan. Konsep di balik sistem 'titik' ini terinspirasi oleh [ekstensi peramban Energy Lollipop](https://energylollipop.com/) untuk emisi di California.
Menggunakan API C02 Signal dari tmrow untuk melacak penggunaan listrik, bangun sebuah ekstensi browser sehingga Anda dapat memiliki pengingat langsung di browser Anda tentang seberapa berat penggunaan listrik di wilayah Anda. Menggunakan ekstensi ini secara ad hoc akan membantu Anda membuat keputusan berdasarkan informasi ini.
Untuk menginstal di Edge, gunakan menu 'tiga titik' di sudut kanan atas browser untuk menemukan panel Ekstensi. Dari sana, pilih 'Load Unpacked' untuk memuat ekstensi baru. Buka folder 'dist' saat diminta, dan ekstensi akan dimuat. Untuk menggunakannya, Anda memerlukan kunci API untuk API CO2 Signal ([dapatkan di sini melalui email](https://www.co2signal.com/) - masukkan email Anda di kotak pada halaman ini) dan [kode untuk wilayah Anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [Electricity Map](https://www.electricitymap.org/map) (misalnya, di Boston, saya menggunakan 'US-NEISO').
Setelah kunci API dan wilayah dimasukkan ke dalam antarmuka ekstensi, titik berwarna di bilah ekstensi browser seharusnya berubah untuk mencerminkan penggunaan energi di wilayah Anda dan memberikan petunjuk tentang aktivitas berat energi apa yang sesuai untuk Anda lakukan. Konsep di balik sistem 'titik' ini terinspirasi oleh [ekstensi Energy Lollipop](https://energylollipop.com/) untuk emisi di California.
> Gambar dari [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Untuk menggambar di elemen canvas, Anda akan mengikuti proses tiga langkah yang sama yang membentuk dasar dari semua grafik canvas. Setelah Anda melakukannya beberapa kali, ini menjadi kebiasaan:
@ -329,11 +329,11 @@ Anda akan membuat halaman web dengan elemen Canvas. Halaman tersebut harus menam
- **Sistem skor**: Setiap kapal musuh yang dihancurkan memberikan 100 poin (angka bulat lebih mudah dihitung secara mental oleh pemain). Skor ditampilkan di sudut kiri bawah.
- **Penghitung nyawa**: Pahlawan Anda memulai dengan tiga nyawa - standar yang ditetapkan oleh game arcade awal untuk menyeimbangkan tantangan dengan kemampuan bermain. Setiap tabrakan dengan musuh mengurangi satu nyawa. Kita akan menampilkan nyawa yang tersisa di sudut kanan bawah menggunakan ikon kapal .
- **Penghitung nyawa**: Pahlawan Anda memulai dengan tiga nyawa - standar yang ditetapkan oleh game arcade awal untuk menyeimbangkan tantangan dengan kemampuan bermain. Setiap tabrakan dengan musuh mengurangi satu nyawa. Kita akan menampilkan nyawa yang tersisa di sudut kanan bawah menggunakan ikon kapal .
Menggunakan `history.pushState` menciptakan entri baru dalam riwayat navigasi browser. Anda dapat memeriksanya dengan menahan *tombol kembali* browser Anda, seharusnya menampilkan sesuatu seperti ini:
Jika Anda mencoba mengklik tombol kembali beberapa kali, Anda akan melihat bahwa URL saat ini berubah dan riwayat diperbarui, tetapi template yang sama tetap ditampilkan.
@ -295,7 +295,7 @@ Pertama, mari kita amati apa yang terjadi dengan pengiriman formulir dasar:
2. Amati perubahan di bilah alamat browser Anda
3. Perhatikan bagaimana halaman memuat ulang dan data muncul di URL
### Perbandingan Metode HTTP
@ -350,7 +350,7 @@ Mari kita konfigurasi formulir registrasi Anda untuk berkomunikasi dengan benar
2. **Klik** tombol "Create Account"
3. **Amati** respons server di browser Anda
**Apa yang harus Anda lihat:**
- **Browser mengarahkan** ke URL endpoint API
@ -615,7 +615,7 @@ async function register() {
3. **Klik** "Buat Akun"
4. **Amati** pesan konsol dan umpan balik pengguna
**Apa yang harus Anda lihat:**
- **Status pemuatan** muncul di tombol kirim
@ -790,7 +790,7 @@ Mari tingkatkan formulir registrasi Anda dengan validasi yang kuat yang memberik
3. **Coba** karakter khusus di bidang nama pengguna
4. **Masukkan** jumlah saldo negatif
**Apa yang akan Anda amati:**
- **Browser menampilkan** pesan validasi bawaan
@ -952,7 +952,7 @@ Tampilkan pesan kesalahan di HTML jika pengguna sudah ada.
Berikut adalah contoh tampilan halaman login setelah ditambahkan beberapa gaya CSS:
@ -190,7 +190,7 @@ Seperti desain kompartemen Titanic yang tampak kokoh hingga beberapa kompartemen
Alih-alih mengejar ekor kita sendiri, kita akan membuat sistem **manajemen state terpusat**. Anggap saja seperti memiliki satu orang yang sangat terorganisir yang bertanggung jawab atas semua hal penting:
```mermaid
flowchart TD
@ -804,7 +804,7 @@ Tantangan ini akan membantu Anda berpikir seperti pengembang profesional yang me
Berikut adalah contoh hasil setelah menyelesaikan tugas:
Dalam proyek ini, Anda akan belajar cara membangun bank fiksi. Pelajaran ini mencakup instruksi tentang cara merancang aplikasi web dan menyediakan rute, membuat formulir, mengelola state, serta mengambil data dari API yang memungkinkan Anda mendapatkan data bank.
@ -185,7 +185,7 @@ Seperti bagaimana telepon Alexander Graham Bell menghubungkan lokasi yang jauh,
Setelah semuanya dimuat, Anda akan melihat ruang kerja yang bersih dan indah yang dirancang untuk membuat Anda fokus pada hal yang penting – kode Anda!
@ -78,7 +78,7 @@ Karena VSCode.dev membutuhkan setidaknya satu file untuk membuka repositori, kit
4. **Tulis** pesan commit: "Tambahkan struktur HTML awal"
5. **Klik** "Commit new file" untuk menyimpan perubahan Anda
**Apa yang dicapai oleh pengaturan awal ini:**
- **Membangun** struktur dokumen HTML5 yang tepat dengan elemen semantik
@ -104,7 +104,7 @@ Setelah fondasi repositori Anda dibuat, mari beralih ke VSCode.dev untuk pekerja
✅ **Indikator keberhasilan**: Anda akan melihat file proyek Anda di sidebar Explorer dan `index.html` tersedia untuk diedit di area editor utama.
**Apa yang akan Anda lihat di antarmuka:**
- **Sidebar Explorer**: **Menampilkan** file dan struktur folder repositori Anda
@ -448,7 +448,7 @@ Ekstensi meningkatkan pengalaman pengembangan Anda dengan menyediakan kemampuan
**Hasil langsung setelah instalasi:**
Setelah CodeSwing diinstal, Anda akan melihat preview langsung dari website resume Anda muncul di editor. Ini memungkinkan Anda melihat dengan tepat bagaimana tampilan situs Anda saat Anda membuat perubahan.
## 🗺️ Perjalanan Belajar Anda Melalui Pengembangan Aplikasi AI
@ -194,7 +194,7 @@ mindmap
**Prinsip Inti**: Pengembangan aplikasi AI menggabungkan keterampilan pengembangan web tradisional dengan integrasi layanan AI, menciptakan aplikasi cerdas yang terasa alami dan responsif bagi pengguna.
**Inilah yang membuat playground sangat berguna:**
- **Coba** berbagai model AI seperti GPT-4o-mini, Claude, dan lainnya (semuanya gratis!)
@ -204,7 +204,7 @@ mindmap
Setelah Anda mencoba-coba sedikit, cukup klik tab "Code" dan pilih bahasa pemrograman Anda untuk mendapatkan kode implementasi yang Anda butuhkan.
## Menyiapkan Integrasi Backend Python
@ -2365,14 +2365,14 @@ Ingin mencoba proyek ini di lingkungan pengembangan cloud? GitHub Codespaces men
- **Arahkan** ke [repository Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Klik** "Use this template" di sudut kanan atas (pastikan Anda sudah masuk ke GitHub)
**Langkah 2: Luncurkan Codespaces**
- **Buka** repository yang baru Anda buat
- **Klik** tombol hijau "Code" dan pilih "Codespaces"
- **Pilih** "Create codespace on main" untuk memulai lingkungan pengembangan Anda
**Langkah 3: Konfigurasi Lingkungan**
Setelah Codespace Anda dimuat, Anda akan memiliki akses ke:
Setiap pelajaran mencakup tugas untuk diselesaikan, pemeriksaan pengetahuan, dan tantangan untuk membimbing Anda mempelajari topik seperti:
@ -115,7 +115,7 @@ Ikuti langkah-langkah ini:
Dalam salinan repository ini yang Anda buat, klik tombol **Code** dan pilih **Open with Codespaces**. Ini akan membuat Codespace baru untuk Anda bekerja di dalamnya.
@ -17,7 +17,7 @@ Ascolta, capisco perfettamente se la programmazione ti sembra intimidatoria in q
Oggi esploreremo gli incredibili strumenti che rendono possibile, e seriamente coinvolgente, lo sviluppo web moderno. Sto parlando degli stessi editor, browser e flussi di lavoro che gli sviluppatori di Netflix, Spotify e del tuo studio di app indie preferito usano ogni giorno. Ecco la parte che ti farà ballare dalla gioia: la maggior parte di questi strumenti professionali e standard del settore sono completamente gratuiti!
@ -17,7 +17,7 @@ So che all'inizio potrebbe sembrare tutto un po' complicato – ricordo ancora q
Faremo questo viaggio insieme, un passo alla volta. Niente fretta, niente pressione – solo tu, io e alcuni strumenti davvero fantastici che stanno per diventare i tuoi nuovi migliori amici!
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -604,7 +604,7 @@ Per prima cosa, troviamo un repository (o **repo**) su GitHub che ti interessa e
✅ Un buon modo per trovare repository 'adatti ai principianti' è [cercare con il tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Ci sono diversi modi per copiare il codice. Uno di questi è "clonare" i contenuti del repository, utilizzando HTTPS, SSH o il GitHub CLI (Command Line Interface).
<imgsrc="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.it.png" alt="Sales increased 25% from Q1 to Q2 2024">
<imgsrc="../../../../translated_images/it/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
**Immagini decorative** - puramente visive senza valore informativo:
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, o HyperText Markup Language, è la base di ogni sito web che tu abbia mai visitato. Pensa a HTML come allo scheletro che dà struttura alle pagine web – definisce dove va il contenuto, come è organizzato e cosa rappresenta ogni elemento. Mentre CSS "vestirà" il tuo HTML con colori e layout, e JavaScript lo animerà con interattività, HTML fornisce la struttura essenziale che rende tutto il resto possibile.
@ -88,7 +88,7 @@ Creerai una cartella dedicata per il tuo progetto terrario e aggiungerai il tuo
4. Nel pannello Esplora, clicca sull'icona "Nuovo File"
5. Nomina il file `index.html`
**Opzione 2: Usare Comandi del Terminale**
```bash
@ -239,48 +239,48 @@ Ora aggiungi le immagini delle piante organizzate in due colonne tra i tuoi tag
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
Ricordi com'era il tuo terrarium HTML, piuttosto semplice? Con il CSS possiamo trasformare quella struttura essenziale in qualcosa di visivamente accattivante.
@ -205,7 +205,7 @@ body {
Apri gli strumenti per sviluppatori del tuo browser (F12), vai alla scheda Elementi e ispeziona il tuo elemento `<h1>`. Vedrai che eredita la famiglia di font dal body:
✅ **Tempo di Esperimento**: Prova a impostare altre proprietà ereditabili sul `<body>` come `color`, `line-height` o `text-align`. Cosa succede al tuo titolo e agli altri elementi?
@ -335,7 +335,7 @@ Nel nostro terrarium, ogni pianta necessita di uno stile simile ma anche di un p
**Ecco la struttura HTML per ogni pianta:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.it.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/it/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.png" />
</div>
```
@ -599,7 +599,7 @@ Pronto a migliorare il tuo terrario con riflessi realistici sul vetro? Questa te
Creerai sottili riflessi che simulano come la luce si riflette sulle superfici di vetro. Questo approccio è simile a come i pittori rinascimentali come Jan van Eyck utilizzavano luce e riflessi per far apparire il vetro dipinto tridimensionale. Ecco cosa stai cercando di ottenere:
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
Benvenuti in uno degli aspetti più coinvolgenti dello sviluppo web: rendere le cose interattive! Il Document Object Model (DOM) è come un ponte tra il tuo HTML e JavaScript, e oggi lo useremo per dare vita al tuo terrarium. Quando Tim Berners-Lee ha creato il primo browser web, immaginava un web in cui i documenti potessero essere dinamici e interattivi - il DOM rende possibile questa visione.
> Una rappresentazione del DOM e del markup HTML che lo fa riferimento. Da [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **Comprendere le Closures**: Le closures sono un argomento significativo in JavaScript, e molti sviluppatori le usano per anni prima di comprendere appieno tutti gli aspetti teorici. Oggi ci concentreremo sull'applicazione pratica - vedrai che le closures emergono naturalmente mentre costruiamo le nostre funzionalità interattive. La comprensione si svilupperà man mano che vedrai come risolvono problemi reali.
> Una rappresentazione del DOM e del markup HTML che lo fa riferimento. Da [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -598,7 +598,7 @@ Ora testa il tuo terrario interattivo! Apri il file `index.html` in un browser w
- **Supporto cross-device**: Funziona su desktop e dispositivi mobili
- **Consapevolezza delle prestazioni**: Nessuna perdita di memoria o calcoli ridondanti
Una piccola meditazione di codice con drag and drop. Con un po' di HTML, JS e CSS, puoi creare un'interfaccia web, stilizzarla e aggiungere un'interazione.
> Alcuni dei primi browser, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Come i Browser Elaborano i Contenuti Web
@ -198,7 +198,7 @@ quadrantChart
Comprendere il processo di installazione delle estensioni ti aiuta a prevedere l'esperienza utente quando le persone installano la tua estensione. Il processo di installazione è standardizzato nei browser moderni, con lievi variazioni nel design dell'interfaccia.
> **Importante**: Assicurati di attivare la modalità sviluppatore e consentire estensioni da altri store quando testi le tue estensioni.
@ -313,10 +313,10 @@ Questo segue il principio della divulgazione progressiva utilizzato nel design d
### Panoramica delle Visualizzazioni dell'Estensione
**Vista di Configurazione** - Configurazione iniziale dell'utente:
**Vista dei Risultati** - Visualizzazione dei dati sull'impronta di carbonio:
> ⚠️ **Considerazione sulla Sicurezza**: Nelle applicazioni di produzione, memorizzare le chiavi API nella LocalStorage comporta rischi di sicurezza poiché JavaScript può accedere a questi dati. Per scopi didattici, questo approccio va bene, ma le applicazioni reali dovrebbero utilizzare archiviazione sicura lato server per credenziali sensibili.
@ -126,7 +126,7 @@ Per aprire gli Strumenti per Sviluppatori in Edge, clicca sui tre puntini in alt
Proviamolo. Apri un sito web (Microsoft.com funziona bene per questo) e clicca sul pulsante 'Registra'. Ora aggiorna la pagina e osserva il profiler catturare tutto ciò che accade. Quando interrompi la registrazione, vedrai una ripartizione dettagliata di come il browser 'scrive', 'renderizza' e 'dipinge' il sito. Mi ricorda come il controllo missione monitori ogni sistema durante un lancio di razzi - ottieni dati in tempo reale su ciò che sta accadendo e quando.
✅ La [Documentazione Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) ha tantissimi dettagli se vuoi approfondire.
@ -136,11 +136,11 @@ Seleziona gli elementi della timeline del profilo per ingrandire gli eventi che
Ottieni un'istantanea delle prestazioni della tua pagina selezionando una parte della timeline del profilo e guardando il pannello di riepilogo:
✅ Familiarizza con il tuo profiler! Apri gli strumenti per sviluppatori su questo sito e verifica se ci sono colli di bottiglia. Qual è l'asset che si carica più lentamente? E quello più velocemente?
Utilizzando l'API CO2 Signal di tmrow per monitorare il consumo di elettricità, crea un'estensione per browser che ti permetta di avere un promemoria direttamente nel tuo browser su quanto è intenso il consumo di elettricità nella tua regione. Usare questa estensione in modo occasionale ti aiuterà a prendere decisioni sulle tue attività basandoti su queste informazioni.
Per installare su Edge, utilizza il menu con i 'tre puntini' nell'angolo in alto a destra del browser per trovare il pannello delle Estensioni. Da lì, seleziona 'Carica non impacchettato' per caricare una nuova estensione. Apri la cartella 'dist' quando richiesto e l'estensione verrà caricata. Per utilizzarla, avrai bisogno di una chiave API per l'API di CO2 Signal ([richiedila qui via email](https://www.co2signal.com/) - inserisci il tuo indirizzo email nella casella su questa pagina) e del [codice della tua regione](http://api.electricitymap.org/v3/zones) corrispondente alla [Electricity Map](https://www.electricitymap.org/map) (a Boston, ad esempio, utilizzo 'US-NEISO').
Una volta inseriti la chiave API e il codice della regione nell'interfaccia dell'estensione, il punto colorato nella barra delle estensioni del browser dovrebbe cambiare per riflettere il consumo energetico della tua regione e darti un'indicazione su quali attività ad alto consumo energetico sarebbero appropriate da svolgere. Il concetto dietro questo sistema a 'punti' mi è stato ispirato dall'estensione [Energy Lollipop](https://energylollipop.com/) per le emissioni della California.
Utilizzando l'API CO2 Signal di tmrow per monitorare l'uso dell'elettricità, crea un'estensione per il browser che ti permetta di avere un promemoria diretto nel tuo browser sul consumo di elettricità della tua regione. L'uso di questa estensione ad hoc ti aiuterà a prendere decisioni sulle tue attività basandoti su queste informazioni.
Per installarla su Edge, utilizza il menu con i 'tre punti' nell'angolo in alto a destra del browser per trovare il pannello Estensioni. Da lì, seleziona 'Carica non impacchettato' per caricare una nuova estensione. Apri la cartella 'dist' quando richiesto e l'estensione verrà caricata. Per utilizzarla, avrai bisogno di una chiave API per l'API CO2 Signal ([richiedila qui via email](https://www.co2signal.com/) - inserisci il tuo indirizzo email nel campo di questa pagina) e del [codice per la tua regione](http://api.electricitymap.org/v3/zones) corrispondente alla [Mappa dell'elettricità](https://www.electricitymap.org/map) (a Boston, ad esempio, utilizzo 'US-NEISO').
Una volta inserita la chiave API e la regione nell'interfaccia dell'estensione, il punto colorato nella barra delle estensioni del browser dovrebbe cambiare per riflettere l'uso di energia della tua regione e fornire un'indicazione sulle attività ad alto consumo energetico che sarebbero appropriate per te. Il concetto dietro questo sistema di "punti" mi è stato ispirato dalla [estensione Energy Lollipop](https://energylollipop.com/) per le emissioni della California.
Utilizzando l'API CO2 Signal di tmrow per monitorare il consumo di elettricità, crea un'estensione del browser in modo da avere un promemoria direttamente nel tuo browser sul consumo di elettricità della tua regione. L'uso di questa estensione ad hoc ti aiuterà a prendere decisioni sulle tue attività basandoti su queste informazioni.
Per installare su Edge, utilizza il menu 'tre puntini' nell'angolo in alto a destra del browser per trovare il pannello Estensioni. Da lì, seleziona 'Carica estensione non compressa' per caricare una nuova estensione. Apri la cartella 'dist' quando richiesto e l'estensione verrà caricata. Per utilizzarla, avrai bisogno di una chiave API per l'API di CO2 Signal ([ottienila qui via e-mail](https://www.co2signal.com/) - inserisci il tuo indirizzo e-mail nel campo su questa pagina) e del [codice per la tua regione](http://api.electricitymap.org/v3/zones) corrispondente alla [Mappa dell'elettricità](https://www.electricitymap.org/map) (a Boston, ad esempio, utilizzo 'US-NEISO').
Una volta inseriti la chiave API e la regione nell'interfaccia dell'estensione, il punto colorato nella barra delle estensioni del browser dovrebbe cambiare per riflettere il consumo di energia della tua regione e fornirti un indicatore sulle attività ad alto consumo energetico che sarebbe opportuno svolgere. Il concetto dietro questo sistema di 'punti' mi è stato ispirato dall'[estensione Energy Lollipop](https://energylollipop.com/) per le emissioni in California.
Utilizzando l'API CO2 Signal di tmrow per monitorare l'uso dell'elettricità, è stato creato un'estensione del browser che ti ricorda quanto è intenso l'uso dell'elettricità nella tua area. Usare questa estensione ti aiuterà a prendere decisioni sulle tue attività basandoti su queste informazioni.
Per installarla su Edge, utilizza il menu "tre punti" nell'angolo in alto a destra del browser per trovare il pannello delle estensioni. Da lì, seleziona "Carica non impacchettato" per caricare una nuova estensione. Quando richiesto, apri la cartella "dist" e l'estensione verrà caricata. Per utilizzarla, avrai bisogno di una chiave API di CO2 Signal ([ottienila qui via email](https://www.co2snal.com/) inserendo il tuo indirizzo email nel box sulla pagina) e del [codice della tua area](http://api.electricitymap.org/v3/zones) da [Electricity Map](https://www.electricitymap.org/map) (ad esempio, per Boston, utilizzo "US-NEISO").
Una volta che la chiave API e il codice dell'area sono stati inseriti nell'interfaccia dell'estensione, il punto colorato nella barra delle estensioni del browser dovrebbe cambiare per riflettere l'uso energetico della tua area e fornire un indicatore su quali attività ad alto consumo energetico sono più adatte. Il concetto dietro questo sistema di "punti" mi è stato ispirato dall'estensione [Energy Lollipop](https://energylollipop.com/) per le emissioni in California.
Si utilizzerà l'API Signal CO2 di tmrow per monitorare l'utilizzo dell'elettricità e creare un'estensione per il browser che fornisca un promemoria diretto su quanto sia intenso l'uso di elettricità nella propria regione. L'utilizzo di questa estensione personalizzata aiuterà a valutare le proprie attività in base a queste informazioni.
Per installare su Edge, utilizzare il menu "tre punti" nell'angolo in alto a destra del browser per accedere al pannello Estensioni. Se non è già attiva, abilitare la Modalità sviluppatore (in basso a sinistra). Selezionare "Carica decompressa" per aggiungere una nuova estensione. Aprire la cartella "dist" al prompt e l'estensione verrà caricata. Per utilizzarla, sarà necessario ottenere una chiave API per l'API di CO2 Signal (si può [richiedere qui via e-mail](https://www.co2signal.com/) - inserire la propria e-mail nella casella presente in questa pagina) e il [codice della propria regione](http://api.electricitymap.org/v3/zones) corrispondente alla [mappa elettrica](https://www.electricitymap.org/map) (ad esempio, per Boston, "US-NEISO").
Una volta inseriti la chiave API e il codice della regione nell'interfaccia dell'estensione, il punto colorato nella barra dell'estensione del browser dovrebbe cambiare per riflettere l'utilizzo di energia della regione e fornire indicazioni su quali attività ad alto consumo energetico sarebbero più appropriate da eseguire. Il concetto alla base di questo sistema a "punti" è stato ispirato dall'[estensione Energy Lollipop](https://energylollipop.com/) per le emissioni della California.
Costruisci un'estensione del browser che utilizza l'API CO2 Signal di tmrow per monitorare il consumo di energia nella tua area e mostrarti un promemoria direttamente nel browser. Usando questa estensione in modo ad hoc, puoi prendere decisioni informate sulle tue attività in base a queste informazioni.
Per installarla su Edge, trova il pannello "Estensioni" dal menu con i "tre puntini" in alto a destra del browser. Da lì, seleziona "Carica estensione non impacchettata" e carica la nuova estensione. Quando richiesto, apri la cartella "dist" e l'estensione verrà caricata. Per utilizzarla, avrai bisogno di una chiave API dell'API CO2 Signal ([ottienila qui via email](https://www.co2signal.com/) - inserisci la tua email nella casella su quella pagina) e del [codice per la tua regione](http://api.electricitymap.org/v3/zones) corrispondente su [Electricity Map](https://www.electricitymap.org/map) (ad esempio, per Boston, usa 'US-NEISO').
Inserendo la chiave API e la regione nell'interfaccia dell'estensione, il punto colorato che appare nella barra delle estensioni del browser cambierà colore per riflettere il consumo energetico della tua area. Questo ti aiuterà a capire quali attività che richiedono energia sono più appropriate in quel momento. Il concetto del sistema a "punti" mi è stato ispirato dall'estensione [Energy Lollipop](https://energylollipop.com/) per le emissioni in California.
Utilizzando l'API CO2 Signal di tmrow per monitorare il consumo di elettricità, costruisci un'estensione del browser che ti avvisi sull'impatto del consumo energetico nella tua regione. Usare questa estensione ti aiuterà a prendere decisioni più consapevoli sulle tue attività in base a queste informazioni.
## Iniziare
@ -31,7 +31,7 @@ npm run build
Per installarla su Edge, utilizza il menu con i "tre puntini" nell'angolo in alto a destra del browser per trovare il pannello delle Estensioni. Da lì, seleziona "Carica estensione non impacchettata" per aggiungere una nuova estensione. Apri la cartella 'dist' quando richiesto e l'estensione verrà caricata. Per utilizzarla, avrai bisogno di una chiave API per l'API CO2 Signal ([ottienila qui via email](https://www.co2signal.com/) - inserisci il tuo indirizzo email nella casella sulla pagina) e del [codice della tua regione](http://api.electricitymap.org/v3/zones) corrispondente alla [Mappa dell'Elettricità](https://www.electricitymap.org/map) (ad esempio, a Boston, ho usato 'US-NEISO').
Una volta inseriti la chiave API e il codice della regione nell'interfaccia dell'estensione, il punto colorato nella barra delle estensioni del browser cambierà per riflettere il consumo energetico della tua regione e ti fornirà indicazioni sulle attività più adatte da svolgere. Il concetto alla base di questo sistema a "punti" mi è stato ispirato dall'[estensione del browser Energy Lollipop](https://energylollipop.com/) per le emissioni in California.
Utilizzando l'API C02 Signal di tmrow per monitorare il consumo di elettricità, crea un'estensione per browser che ti permetta di avere un promemoria direttamente nel tuo browser su quanto sia intenso il consumo di elettricità nella tua regione. Usare questa estensione in modo occasionale ti aiuterà a prendere decisioni sulle tue attività basandoti su queste informazioni.
Per installare su Edge, utilizza il menu 'tre puntini' nell'angolo in alto a destra del browser per trovare il pannello delle Estensioni. Da lì, seleziona 'Carica non impacchettato' per caricare una nuova estensione. Apri la cartella 'dist' quando richiesto e l'estensione verrà caricata. Per utilizzarla, avrai bisogno di una chiave API per l'API di CO2 Signal ([richiedila qui via email](https://www.co2signal.com/) - inserisci il tuo indirizzo email nella casella su questa pagina) e del [codice della tua regione](http://api.electricitymap.org/v3/zones) corrispondente alla [Electricity Map](https://www.electricitymap.org/map) (a Boston, ad esempio, utilizzo 'US-NEISO').
Una volta inseriti la chiave API e il codice della regione nell'interfaccia dell'estensione, il punto colorato nella barra delle estensioni del browser dovrebbe cambiare per riflettere il consumo energetico della tua regione e darti un'indicazione su quali attività ad alto consumo energetico sarebbero appropriate da svolgere. Il concetto dietro questo sistema a 'punti' mi è stato ispirato dall'estensione [Energy Lollipop](https://energylollipop.com/) per le emissioni della California.
> Immagine da [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Per disegnare sull'elemento canvas, seguirai lo stesso processo in tre fasi che forma la base di tutta la grafica del canvas. Una volta fatto alcune volte, diventa naturale:
@ -329,11 +329,11 @@ Creerai una pagina web con un elemento Canvas. Dovrebbe rendere uno schermo nero
- **Sistema di punteggio**: Ogni nave nemica distrutta assegna 100 punti (i numeri tondi sono più facili da calcolare mentalmente per i giocatori). Il punteggio viene mostrato nell'angolo in basso a sinistra.
- **Contatore delle vite**: Il tuo eroe parte con tre vite - uno standard stabilito dai primi giochi arcade per bilanciare la sfida con la giocabilità. Ogni collisione con un nemico costa una vita. Mostreremo le vite rimanenti nell'angolo in basso a destra usando icone di navi .
- **Contatore delle vite**: Il tuo eroe parte con tre vite - uno standard stabilito dai primi giochi arcade per bilanciare la sfida con la giocabilità. Ogni collisione con un nemico costa una vita. Mostreremo le vite rimanenti nell'angolo in basso a destra usando icone di navi .
Utilizzando `history.pushState` si creano nuove voci nella cronologia di navigazione del browser. Puoi verificarlo tenendo premuto il *pulsante indietro* del tuo browser, dovrebbe mostrare qualcosa del genere:
Se provi a cliccare sul pulsante indietro alcune volte, vedrai che l'URL corrente cambia e la cronologia viene aggiornata, ma lo stesso template continua a essere visualizzato.
@ -295,7 +295,7 @@ Per prima cosa, osserviamo cosa accade con l'invio di un modulo di base:
2. Osserva i cambiamenti nella barra degli indirizzi del browser
3. Nota come la pagina si ricarica e i dati appaiono nell'URL
### Confronto tra Metodi HTTP
@ -350,7 +350,7 @@ Configuriamo il tuo modulo di registrazione per comunicare correttamente con l'A
2. **Clicca** sul pulsante "Crea Account"
3. **Osserva** la risposta del server nel tuo browser
**Cosa dovresti vedere:**
- **Il browser si reindirizza** all'URL del punto finale dell'API
@ -615,7 +615,7 @@ async function register() {
3. **Clicca** su "Crea Account"
4. **Osserva** i messaggi della console e il feedback dell'utente
**Cosa dovresti vedere:**
- **Stato di caricamento** appare sul pulsante di invio
@ -790,7 +790,7 @@ Miglioriamo il tuo modulo di registrazione con una validazione robusta che offre
3. **Prova** caratteri speciali nel campo nome utente
4. **Inserisci** un importo di saldo negativo
**Cosa osserverai:**
- **Il browser mostra** messaggi di validazione nativi
@ -952,7 +952,7 @@ Mostra un messaggio di errore nell'HTML se l'utente esiste già.
Ecco un esempio di come potrebbe apparire la pagina di login finale dopo un po' di styling:
@ -190,7 +190,7 @@ La [gestione dello stato](https://en.wikipedia.org/wiki/State_management) riguar
Invece di inseguire i nostri errori, creeremo un sistema di **gestione dello stato centralizzato**. Pensalo come avere una persona davvero organizzata incaricata di tutte le cose importanti:
```mermaid
flowchart TD
@ -804,7 +804,7 @@ Questa sfida ti aiuterà a pensare come uno sviluppatore professionista che cons
Ecco un esempio di risultato dopo aver completato il compito:
@ -112,7 +112,7 @@ Consulta la [documentazione dell'API del server](../api/README.md) per:
**Risultato previsto:**
Dopo aver completato questo compito, la tua app bancaria dovrebbe avere una funzionalità "Aggiungi Transazione" completamente operativa che appare e si comporta in modo professionale:
localizeflow[bot]
1 week ago