> Sketchnote autorius [Tomomi Imura](https://twitter.com/girlie_mac)
Sveiki atvykę į vieną įdomiausių žiniatinklio kūrimo aspektų – padaryti dalykus interaktyviais! Dokumento objektų modelis (DOM) yra tarsi tiltas tarp jūsų HTML ir JavaScript, ir šiandien naudosime jį, kad įkvėptume jūsų terariumą gyvybės. Kai Tim Berners-Lee sukūrė pirmą naršyklę, jis įsivaizdavo internetą, kuriame dokumentai gali būti dinamiški ir interaktyvūs – DOM padaro šią viziją įmanoma.
@ -102,7 +102,7 @@ flowchart TD
style P fill:#ffebee
style Q fill:#ffebee
```
> DOM ir jį nurodančio HTML žymėjimo atvaizdas. Iš [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **Uždarymų supratimas:** Uždarymai yra svarbi JavaScript tema, ir daugelis programuotojų juos naudoja metų metus, kol pilnai supranta visas teorines puses. Šiandien mes dėmesį skiriame praktiniam pritaikymui – pamatysite, kaip uždarymai natūraliai atsiranda, kai kuriame interaktyvias funkcijas. Supratimas atsiras, kai matysite, kaip jie sprendžia tikras problemas.
> DOM ir jį nurodančio HTML žymėjimo atvaizdas. Iš [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ Dabar išbandykite savo interaktyvų terariumą! Atidarykite savo `index.html` n
- **Kryžminė įranga**: veikia tiek kompiuteriuose, tiek mobiliuosiuose įrenginiuose
- **Veikimo sąmoningumas**: nėra atminties nutekėjimų ar perteklinių skaičiavimų
Maža vilkimo ir numetimo kodavimo meditacija. Naudodami šiek tiek HTML, JS ir CSS, galite sukurti internetinę sąsają, ją stilizuoti ir pridėti interaktyvumo.
> Sketchnote autorius [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## Įvadinis testas prieš paskaitą
@ -77,7 +77,7 @@ Interneto naršyklė iš esmės yra sudėtinga dokumentų interpretuoklė. Kai
✅ **Trumpa istorija**: Pirmoji naršyklė buvo pavadinta „WorldWideWeb“ ir ją sukūrė seras Timothy Berners-Lee 1990 metais.
> Kai kurios ankstyvos naršyklės, pagal [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Kaip naršyklės apdoroja interneto turinį
@ -194,7 +194,7 @@ quadrantChart
Supratimas apie plėtinių diegimo procesą padės numatyti naudotojo patirtį, kai žmonės diegia jūsų plėtinį. Diegimo procesas yra standartizuotas šiuolaikinėse naršyklėse, nors vartotojo sąsajoje gali būti nedideli skirtumai.
> **Svarbu**: Įsitikinkite, kad įjungėte kūrėjo režimą ir leidžiate plėtinius iš kitų parduotuvių, kai testuojate savo plėtinius.
@ -308,10 +308,10 @@ Tai atitinka progresyvios informacijos teikimo principą, naudojamą sąsajų di
### Plėtinio vaizdų apžvalga
**Nustatymų vaizdas** – pirmą kartą naudojančio nustatymai:
**Rezultatų vaizdas** – anglies pėdsako duomenų rodymas:
> ⚠️ **Saugumo perspėjimas**: komerciniuose sprendimuose API raktų saugojimas LocalStorage kelia saugumo riziką, nes JavaScript gali prieiti prie šių duomenų. Mokymosi tikslais šis būdas tinka, tačiau tikrose programose jautrių kredencialų saugojimui reikia naudoti saugų serverio pusės saugojimą.
@ -123,7 +123,7 @@ Norėdami atidaryti Kūrėjo įrankius Edge naršyklėje, spustelėkite tris ta
Pabandykime. Atidarykite svetainę (Microsoft.com tinka gerai) ir spustelėkite mygtuką „Įrašyti“. Dabar atnaujinkite puslapį ir stebėkite, kaip profiliuotojas užfiksuoja viską, kas vyksta. Kai sustabdysite įrašymą, pamatysite išsamią naršyklės veiklos, „scripts“, „renders“ ir „paints“, analizę. Tai primena misijų valdymo centrą, kuris seka kiekvieną sistemą raketos paleidimo metu – gaunate realaus laiko duomenis, kas vyksta ir kada.
✅ [Microsoft dokumentacija](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) turi daug daugiau detalių, jei norite gilintis
@ -133,11 +133,11 @@ Pasirinkite profilio laiko linijos dalis, kad priartintumėte įvykius, vykstan
Gaukite puslapio našumo momentinę nuotrauką pasirinkdami profilio laiko linijos dalį ir pažvelgdami į santraukos langą:
✅ Susipažinkite su savo profiliuotoju! Atidarykite kūrėjo įrankius šioje svetainėje ir pažiūrėkite, ar yra kokių nors kliūčių. Koks greičiausiai užsikrauna turtas? O lėčiausias?
Naudojant tmrow C02 Signal API, skirtą stebėti elektros energijos suvartojimą, sukurkite naršyklės plėtinį, kad galėtumėte gauti priminimą tiesiai savo naršyklėje apie tai, kokia intensyvi yra jūsų regiono elektros energijos apkrova. Naudodami šį plėtinį ad hoc būdu, galėsite priimti sprendimus dėl savo veiklos, remdamiesi šia informacija.
Norėdami įdiegti „Edge“ naršyklėje, naudokite meniu „trys taškai“ viršutiniame dešiniajame naršyklės kampe, kad rastumėte plėtinių skydelį. Iš ten pasirinkite „Įkelti neišpakuotą“ („Load Unpacked“), kad įkeltumėte naują plėtinį. Atsidariusiame lange pasirinkite „dist“ aplanką, ir plėtinys bus įkeltas. Norėdami jį naudoti, jums reikės API rakto CO2 Signal API ([gaukite jį el. paštu čia](https://www.co2signal.com/) – įveskite savo el. pašto adresą šiame puslapyje) ir [jūsų regiono kodo](http://api.electricitymap.org/v3/zones), atitinkančio [Electricity Map](https://www.electricitymap.org/map) (pavyzdžiui, Bostone aš naudoju „US-NEISO“).
Kai API raktas ir regionas bus įvesti į plėtinio sąsają, spalvotas taškas naršyklės plėtinio juostoje turėtų pasikeisti, atspindėdamas jūsų regiono energijos suvartojimą, ir pateikti jums užuominą, kokia energiją naudojanti veikla būtų tinkama. Šios „taško“ sistemos idėją man pasiūlė [Energy Lollipop plėtinys](https://energylollipop.com/) Kalifornijos emisijoms.
Naudojant tmrow CO2 Signal API, skirtą stebėti elektros energijos naudojimą, sukurkite naršyklės plėtinį, kuris tiesiogiai jūsų naršyklėje primintų apie jūsų regiono elektros energijos suvartojimą. Šis ad hoc plėtinys padės priimti sprendimus dėl jūsų veiklų, remiantis šia informacija.
Norėdami įdiegti Edge naršyklėje, naudokite 'trijų taškų' meniu, esantį viršutiniame dešiniajame naršyklės kampe, kad rastumėte plėtinių skydelį. Iš ten pasirinkite 'Įkelti neišpakuotą', kad įkeltumėte naują plėtinį. Kai būsite paprašyti, atidarykite aplanką 'dist', ir plėtinys bus įkeltas. Norėdami jį naudoti, jums reikės API rakto CO2 Signal API ([gaukite jį el. paštu čia](https://www.co2signal.com/) - įveskite savo el. paštą šio puslapio laukelyje) ir [savo regiono kodą](http://api.electricitymap.org/v3/zones), atitinkantį [Electricity Map](https://www.electricitymap.org/map) (pavyzdžiui, Bostone naudoju 'US-NEISO').
Kai API raktas ir regionas bus įvesti plėtinio sąsajoje, spalvotas taškas naršyklės plėtinių juostoje turėtų pasikeisti, atspindėdamas jūsų regiono energijos naudojimą ir suteikdamas indikatorių apie veiklas, kurios būtų tinkamos esant dideliam energijos suvartojimui. Šios "taškų" sistemos idėją man suteikė [plėtinys Energy Lollipop](https://energylollipop.com/) skirtas Kalifornijos emisijoms.
Naudodami tmrow API C02 Signal, skirtą stebėti elektros energijos suvartojimą, sukurkite naršyklės plėtinį, kuris tiesiogiai jūsų naršyklėje primintų apie jūsų regiono elektros energijos suvartojimą. Šis plėtinys padės jums priimti sprendimus dėl savo veiklos, remiantis šia informacija.
Norėdami įdiegti Edge naršyklėje, naudokite meniu „trys taškai“ viršutiniame dešiniajame naršyklės kampe, kad rastumėte plėtinių skydelį. Iš ten pasirinkite „Įkelti neišpakuotą plėtinį“, kad įkeltumėte naują plėtinį. Atidarykite aplanką „dist“ pagal nurodymus, ir plėtinys bus įkeltas. Norėdami jį naudoti, jums reikės API rakto CO2 Signal API ([gaukite jį el. paštu čia](https://www.co2signal.com/) - įveskite savo el. paštą laukelyje šioje svetainėje) ir [kodo savo regionui](http://api.electricitymap.org/v3/zones), atitinkančio [Elektros žemėlapį](https://www.electricitymap.org/map) (pavyzdžiui, Bostone aš naudoju „US-NEISO“).
Kai API raktas ir regionas bus įvesti į plėtinio sąsają, spalvotas taškas naršyklės plėtinių juostoje turėtų pasikeisti, atspindėdamas jūsų regiono energijos suvartojimą ir suteikdamas jums indikatorių apie energiją naudojančias veiklas, kurias būtų tinkama atlikti. Šios „taškų“ sistemos koncepciją man pasiūlė [plėtinys Energy Lollipop](https://energylollipop.com/) Kalifornijos emisijoms.
Naudojant tmrow CO2 Signal API elektros energijos naudojimui stebėti, sukurtas naršyklės plėtinys, kuris primena, kiek intensyviai jūsų regione naudojama elektros energija. Naudodami šį plėtinį, galėsite priimti sprendimus dėl savo veiklos, remdamiesi šia informacija.
Norėdami įdiegti „Edge“ naršyklėje, naudokite naršyklės viršutiniame dešiniajame kampe esančiame meniu „trys taškai“, kad rastumėte plėtinių skydelį. Ten pasirinkite „Įkelti neišpakuotą“ ir atidarykite „dist“ aplanką, kai būsite paraginti. Plėtinys bus įkeltas. Norėdami jį naudoti, jums reikės CO2 Signal API rakto ([gaukite čia el. paštu](https://www.co2snal.com/) – įveskite savo el. paštą laukelyje šiame puslapyje) ir [savo regiono kodo](http://api.electricitymap.org/v3/zones) iš [Electricity Map](https://www.electricitymap.org/map) (pavyzdžiui, Bostone aš naudoju „US-NEISO“).
Kai API raktas ir regionas bus įvesti į plėtinio sąsają, spalvotas taškas naršyklės plėtinių juostoje turėtų pasikeisti, atspindėdamas jūsų regiono energijos naudojimą, ir suteikti jums indikatorių, kokia energijai imli veikla būtų tinkama atlikti. Šios „taško“ sistemos idėją pasiskolinau iš Kalifornijos emisijų [Energy Lollipop plėtinio](https://energylollipop.com/).
Naudosime tmrow Signal C02 API, kad stebėtume elektros energijos naudojimą ir sukurtume naršyklės plėtinį, kuris tiesiogiai naršyklėje primintų, kiek energijos naudojimas jūsų regione yra intensyvus. Šis specialiai sukurtas plėtinys padės įvertinti savo veiklą remiantis šiomis informacija.
Norėdami įdiegti Edge naršyklėje, naudokite meniu „trys taškai“ viršutiniame dešiniajame naršyklės kampe, kad rastumėte plėtinių skydelį. Jei dar neaktyvuota, įjunkite Kūrėjo režimą (apačioje kairėje). Pasirinkite „Įkelti neišpakuotą“, kad įkeltumėte naują plėtinį. Atidarykite „dist“ aplanką, kai būsite paraginti, ir plėtinys bus įkeltas. Norėdami jį naudoti, jums reikės API rakto CO2 Signal API (galite [gauti jį el. paštu čia](https://www.co2signal.com/) - įveskite savo el. pašto adresą laukelyje šioje puslapyje) ir [savo regiono kodą](http://api.electricitymap.org/v3/zones), atitinkantį [elektros žemėlapį](https://www.electricitymap.org/map) (pavyzdžiui, Bostone - „US-NEISO“).
Kai API raktas ir regionas bus įvesti plėtinio sąsajoje, spalvotas taškas naršyklės plėtinio juostoje turėtų pasikeisti, atspindėdamas regiono energijos naudojimą ir pateikdamas užuominą, kokia veikla, reikalaujanti daug energijos, būtų tinkama vykdyti. Šios „taškų“ sistemos koncepcija buvo pasiskolinta iš [Energy Lollipop plėtinio](https://energylollipop.com/) Kalifornijos emisijoms.
Naudodami tmrow CO2 Signal API, sukursime naršyklės plėtinį, kuris primins, kiek energijos sunaudojama jūsų regione. Šis plėtinys leis stebėti elektros energijos suvartojimą ir priimti sprendimus, pagrįstus šia informacija.
Norėdami įdiegti plėtinį Edge naršyklėje, eikite į naršyklės viršutiniame dešiniajame kampe esantį „trijų taškų“ meniu ir suraskite „Plėtiniai“ skydelį. Pasirinkite „Įkelti neišpakuotą“ ir nurodykite „dist“ aplanką. Plėtinys bus įkeltas. Norėdami naudoti plėtinį, jums reikės CO2 Signal API rakto ([gaukite jį čia el. paštu](https://www.co2signal.com/) - įveskite savo el. pašto adresą į šios svetainės laukelį) ir [Electricity Map](https://www.electricitymap.org/map) atitinkančio [kodo jūsų regionui](http://api.electricitymap.org/v3/zones) (pavyzdžiui, Bostone naudojamas 'US-NEISO').
Įvedę API raktą ir regiono kodą į plėtinio sąsają, naršyklės plėtinių juostoje matysite spalvotą tašką, kuris atspindės jūsų regiono energijos suvartojimą. Tai padės nuspręsti, kokią veiklą atlikti, atsižvelgiant į energijos poreikius. Šios „taško“ sistemos idėją įkvėpė Kalifornijos emisijų stebėjimui skirtas [Energy Lollipop plėtinys](https://energylollipop.com/).
Naudojant tmrow CO2 Signal API, galima stebėti elektros energijos suvartojimą ir sukurti naršyklės plėtinį, kuris įspės jus apie jūsų regiono elektros energijos naudojimo intensyvumą. Šis plėtinys padės priimti sprendimus dėl jūsų veiklos, remiantis šia informacija.
Norėdami įdiegti Edge naršyklėje, naudokite meniu „trys taškai“ viršutiniame dešiniajame naršyklės kampe, kad surastumėte plėtinių skydelį. Ten pasirinkite „Load Unpacked“, kad įkeltumėte naują plėtinį. Atidarykite aplanką „dist“ pagal užklausą, ir plėtinys bus įkeltas. Norėdami jį naudoti, jums reikės API rakto CO2 Signal API ([gaukite jį čia el. paštu](https://www.co2signal.com/) - įveskite savo el. pašto adresą į laukelį šioje svetainėje) ir [kodo savo regionui](http://api.electricitymap.org/v3/zones), kuris atitinka [Electricity Map](https://www.electricitymap.org/map) (pavyzdžiui, Bostone aš naudoju „US-NEISO“).
Kai API raktas ir regionas bus įvesti į plėtinio sąsają, spalvotas taškas naršyklės plėtinio juostoje pasikeis, atspindėdamas jūsų regiono energijos suvartojimą, ir pateiks jums rekomendacijas dėl veiklos, kurią galite atlikti. Šios „taškų“ sistemos idėją pasiskolinau iš [naršyklės plėtinio Energy Lollipop](https://energylollipop.com/) skirtam Kalifornijos emisijoms.
Naudojant „tmrow“ C02 Signal API stebėti elektros energijos naudojimą, sukurkite naršyklės plėtinį, kad galėtumėte gauti priminimą tiesiai savo naršyklėje apie tai, kaip intensyviai jūsų regione naudojama elektra. Naudojant šį plėtinį ad hoc būdu, galėsite priimti sprendimus dėl savo veiklos remdamiesi šia informacija.
Norėdami įdiegti „Edge“ naršyklėje, naudokite meniu „trys taškai“ viršutiniame dešiniajame naršyklės kampe, kad rastumėte plėtinių skydelį. Ten pasirinkite „Įkelti neišpakuotą“, kad įkeltumėte naują plėtinį. Atsidarius raginimui, pasirinkite „dist“ aplanką, ir plėtinys bus įkeltas. Norėdami jį naudoti, jums reikės API rakto CO2 Signal API ([gaukite jį čia el. paštu](https://www.co2signal.com/) - įveskite savo el. pašto adresą į laukelį šiame puslapyje) ir [savo regiono kodą](http://api.electricitymap.org/v3/zones), atitinkantį [Electricity Map](https://www.electricitymap.org/map) (pavyzdžiui, Bostone aš naudoju „US-NEISO“).
Kai API raktas ir regionas bus įvesti į plėtinio sąsają, spalvotas taškas naršyklės plėtinio juostoje turėtų pasikeisti, atspindėdamas jūsų regiono energijos naudojimą ir pateikdamas jums rekomendacijas, kokią energiją reikalaujančią veiklą būtų tinkama atlikti. Šio „taško“ sistemos koncepcija buvo pasiūlyta [Energy Lollipop plėtinio](https://energylollipop.com/) skirtam Kalifornijos emisijoms.
> Nuotrauka iš [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Norint piešti ant drobės elemento, laikysitės to paties trijų žingsnių proceso, kuris sudaro visos drobės grafikos pagrindą. Kai tai padarysite kelis kartus, tai taps labiau įgūdžiu nei mokymusi:
@ -323,11 +323,11 @@ Sukursite tinklalapį su drobės elementu. Jame bus nupieštas juodas ekranas `1
- **Taškų sistema**: Kiekvienas sunaikintas priešo laivas suteikia 100 taškų (apvalūs skaičiai žaidėjams lengvesni protui). Rezultatas rodomas apatiniame kairiajame kampe.
- **Gyvybių skaitiklis**: Jūsų herojus pradeda turėdamas tris gyvybes – standartą, nustatytą ankstyvuose arkadiniuose žaidimuose, siekiant suderinti iššūkį su žaidžiamumu. Kiekvienas susidūrimas su priešu kainuoja vieną gyvybę. Likusios gyvybės rodomos apatiniame dešiniajame kampe, naudojant laivo ikonas .
- **Gyvybių skaitiklis**: Jūsų herojus pradeda turėdamas tris gyvybes – standartą, nustatytą ankstyvuose arkadiniuose žaidimuose, siekiant suderinti iššūkį su žaidžiamumu. Kiekvienas susidūrimas su priešu kainuoja vieną gyvybę. Likusios gyvybės rodomos apatiniame dešiniajame kampe, naudojant laivo ikonas .
Naudojant `history.pushState`, sukuriami nauji įrašai naršyklės navigacijos istorijoje. Galite patikrinti tai paspausdami ir palaikydami naršyklės *atgal* mygtuką, jis turėtų parodyti kažką panašaus:
Jei kelis kartus spustelėsite atgal mygtuką, pamatysite, kad esamas URL keičiasi ir istorija atnaujinama, tačiau tas pats šablonas vis dar rodomas.
@ -187,7 +187,7 @@ Kaip Titaniko skirsniai atrodė labai tvirti, kol keli skyriai nebuvo užpildyti
Vietoje to, kad vaikytumėmės savo uodegos, kursime **centralizuotą būsenos valdymo** sistemą. Įsivaizduokite, kad turite vieną labai organizuotą asmenį, kuris tvarko viską svarbų:
```mermaid
flowchart TD
@ -798,7 +798,7 @@ Kaip šachmatų meistrai, kurie atskiria svarbias figūras nuo menkaverčių pė
Čia pateikiamas pavyzdinis rezultatas po namų darbo atlikimo:
Šiame projekte išmoksite, kaip sukurti fiktyvų banką. Šios pamokos apima instrukcijas, kaip sukurti internetinės programos išdėstymą ir maršrutus, kurti formas, valdyti būseną ir gauti duomenis iš API, iš kurios galėsite gauti banko duomenis.
- **Sukuria** tinkamą HTML5 dokumento struktūrą su semantiniais elementais
@ -104,7 +104,7 @@ Dabar, kai jūsų saugyklos pagrindas yra parengtas, pereikime prie VSCode.dev p
✅ **Sėkmės indikatorius**: Jūs matysite savo projekto failus „Explorer“ šoninėje juostoje, o `index.html` bus atidarytas redagavimui pagrindinėje redaktoriaus srityje.
Įdiegus CodeSwing, redaktoriuje pasirodys gyvos peržiūros langas su jūsų gyvenimo aprašymo svetaine. Galėsite matyti, kaip atrodo svetainė redaguojant turinį.
**Patobulintos sąsajos funkcijos:**
- Atskiras vaizdas: rodo kodą vienoje pusėje ir gyvą peržiūrą kitoje
## 🗺️ Jūsų mokymosi kelionė DI programų kūrime
@ -189,7 +189,7 @@ mindmap
```
**Pagrindinė taisyklė**: DI programų kūrimas derina tradicinius interneto kūrimo įgūdžius su DI paslaugų integracija, kuri formuoja protingas programas, kurios atrodo natūralios ir jautrios vartotojams.
**Kodėl žaidimų aikštelė tokia naudinga:**
- **Išbandykite** skirtingus DI modelius kaip GPT-4o-mini, Claude ir kitus (visi nemokami!)
@ -199,7 +199,7 @@ mindmap
Kai šiek tiek pažaistumėte, tiesiog spustelėkite skirtuką „Code“ ir pasirinkite programavimo kalbą, kad gautumėte įgyvendinimo kodą, kurio jums prireiks.
## Python backend integracijos nustatymas
@ -2353,14 +2353,14 @@ Norite išbandyti šį projektą debesijos kūrimo aplinkoje? GitHub Codespaces
- **Eikite į** [Web Dev For Beginners saugyklą](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Spauskite** „Use this template“ viršutiniame dešiniajame kampe (įsitikinkite, kad esate prisijungę prie GitHub)
**2 žingsnis: Paleiskite Codespaces**
- **Atidarykite** ką tik sukurtą saugyklą
- **Paspauskite** žalią "Code" mygtuką ir pasirinkite "Codespaces"
- **Pasirinkite** "Create codespace on main" pradėti kūrimo aplinką
Kiekviena pamoka apima užduotį atlikti, žinių patikrinimą ir iššūkį, kurie padeda mokytis tokių temų kaip:
@ -115,7 +115,7 @@ Atlikite šiuos veiksmus:
Jūsų sukurtos šios saugyklos kopijos lange, spustelėkite mygtuką **Code** ir pasirinkite **Open with Codespaces**. Tai sukurs naują Codespace aplinką darbui.
ഇന്ന് നാം ആധുനിക വെബ് വികസനം സാദ്ധ്യമാക്കുന്നതിനും അതിനായി വൃത്തിവത്കരിച്ച ആധുനിക ടൂളുകളെക്കുറിച്ച് പ്രാവശ്യമാണ്. നെറ്റ്ഫ്ലിക്സ്, സ്പോട്ടിഫൈ, നിങ്ങളുടെ പ്രിയപ്പെട്ട ഇൻഡീ ആപ്പ് സ്റ്റുഡിയോ എന്നിവിടങ്ങളിലെ ഡെവലപ്പറർമാർ ദിവസവും ഉപയോഗിക്കുന്ന സമാനമായ എഡിറ്റർ, ബ്രൗസർ, പ്രവൃത്തി രീതികൾ ആണ് ഇവിടെ ഉദ്ദേശിക്കുന്നത്. ഇത് നിങ്ങളെ സന്തോഷത്തിൽ റീച്ച് ചെയ്യാൻ പോകുന്നത്: ഈ പ്രൊഫഷണൽ ഗ്രേഡ്, വ്യവസായ നിലവാരത്തിലുള്ള ടൂളുകൾ കൂടുതലായി സൗജന്യമാണ്!
ഈ യാത്ര ഞങ്ങൾ ഒന്നിച്ച് കാൽ ചവിട്ടി തുടരും. വേഗം വേണ്ട, സമ്മർദ്ദം വേണ്ട – നിങ്ങൾക്കും, എനിക്കും, ഇനി നിങ്ങളുടെ പുതിയ മികച്ച കൂട്ടുകാരായി മാറാൻ പോകുന്ന ചില മികച്ച ഉപകരണങ്ങൾക്കുമൊത്ത്!
> സ്കെച്ച്നോട്ട് [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
```mermaid
@ -603,7 +603,7 @@ flowchart TD
✅ 'beginner-friendly' റിപോസിറ്ററികൾ കണ്ടെത്താൻ മികച്ച മാർഗം [good-first-issue ടാഗ് ഉപയോഗിച്ച് തെരയുക](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/) .
കോഡ് കോപ്പി ചെയ്യാനുള്ള പല മാർഗ്ഗങ്ങളുണ്ട്. ഒരു മാർഗ്ഗം "clone" ചെയ്യുക എന്നതാണ്, HTTPS, SSH അല്ലെങ്കിൽ GitHub CLI (കമാൻഡ് ലൈൻ ഇന്റർഫേസ്) ഉപയോക്തൃ ഇനങ്ങളിലൂടെ.
> സ്കെച്ച്നോട്ട് [Tomomi Imura](https://twitter.com/girlie_mac) tarafından
HTML, അല്ലെങ്കിൽ HyperText Markup Language, നിങ്ങൾ എപ്പോഴും സന്ദർശിച്ചിട്ടുള്ള എല്ലാ വെബ്സൈറ്റുകളുടെ അടിസ്ഥാനമാണ്. HTML-നെ വെബ് പേജുകൾക്ക് ഘടന നൽകുന്ന അറസ്റ്റിൽ വെള്ളം പോലെ കരുതുക - ഇത് ചെയ്യുന്നുണ്ട് സമവായം എവിടെയാണ് പോകേണ്ടത്, അത് എങ്ങനെ ക്രമീകരിക്കപ്പെടുന്നു, ഓരോ ഭാഗവും എന്താണ് പ്രതിനിധീകരിക്കുന്നത്. CSS പിന്നീട് നിങ്ങളുടെ HTML നിറങ്ങൾ, ലേയൗട്ടുകൾ എന്നിവ കൊണ്ട് "അലങ്കരിക്കും" ഒപ്പം ജാവാസ്ക്രിപ്റ്റ് ഇത് ജീവിക്കാൻ ഇന്റർമൂഹമായ ഇടപെടൽ നൽകും, HTML അതെല്ലാം കഴിഞ്ഞ് മറ്റ് എല്ലാം ഗുണം നേടുന്ന അടിസ്ഥാന ഘടന നൽകുന്നു.
@ -86,7 +86,7 @@ HTML കോഡിലേക്ക് പ്രവേശിക്കുന്ന
4. Explorer പാനലിൽ "ന്യൂ ഫയൽ" ഐക്കൺ ക്ലിക്കുചെയ്യുക
5. നിങ്ങളുടെ ഫയലിന് `index.html` എന്ന പേര് നൽകുക
**ഓപ്ഷൻ 2: ടെർമിനൽ കമാൻഡുകൾ ഉപയോഗിച്ച്**
```bash
@ -236,48 +236,48 @@ HTML-ിൽ ചിത്രങ്ങൾ ചേർക്കുന്നതിന
നിന്റെ HTML ടെററിയം എത്ര സാധാരണമായിരുന്നു എന്ന് ഓർക്കുന്നുണ്ടോ? CSS ആണ് ആ പാരിപ്പൊളിച്ച ഘടനയെ ദൃശ്യപരമായി ആകര്ഷകമാക്കുന്നത്.
@ -202,7 +202,7 @@ body {
നിന്റെ ബ്രൗസറിന്റെ ഡിസ്ക്കമ്പോസർ ടൂൾസ് (F12) തുറക്കൂ, Elements ടാബ് തിരഞ്ഞെടുക്കൂ, `<h1>`-നെ പരിശോധിക്കൂ. ഇത് `body`-യിൽ നിന്നുള്ള ഫോണ്ട് ഫാമിലി പാരമ്പര്യമായി സ്വീകരിച്ചത് കാണാം:
✅ **പരീക്ഷണമെടുത്ത് നോക്കൂ**: `<body>`-യ്ക്ക് `color`, `line-height`, അല്ലെങ്കിൽ `text-align` പോലുള്ള മറ്റേതെങ്കിലും പാരമ്പര്യ സ്വഭാവങ്ങൾ സജ്ജമാക്കൂ. നിന്റെ തലക്കെട്ടിനും മറ്റ് എലമെന്റുകൾക്കും എന്ത് സംഭവിക്കുന്നു?
@ -332,7 +332,7 @@ ID സെലക്ടറുകൾ `#` ചിഹ്നം ഉപയോഗിച
**ഓരോ ചെടിക്കും വേണ്ട HTML ഘടന:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.ml.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/ml/plant1.d18b18ffe73da18f.png" />
> സ്കെച്ച് നോട്ടു [Tomomi Imura](https://twitter.com/girlie_mac) എഴുതിയത്
വെബ് ഡെവലപ്പ്മെന്റിന്റെ ഏറ്റവും ആകർഷകമായ ഭാഗങ്ങളിൽ ഒന്നിലേക്ക് സ്വാഗതം - ഇന്ററാക്ടീവ് ചെയ്യുന്നത്! ഡോക്യുമെന്റ് ഒബ്ജക്ട് മോഡൽ (DOM) നിങ്ങളുടെ HTML നും ജാവാസ്ക്രിപ്റ്റിനും ഇടയിലുള്ള ഒരു പാലമുപോലെയാണ്, ഇങ്ങനെ ഇന്ന് നിങ്ങളുടേ ടെറാരിയം ജീവിപ്പിക്കാൻ നാം ഇത് ഉപയോഗിക്കാം. ടിം ബേണേഴ്സ്-ലി ആദ്യ വെബ് ബ്രൗസർ സൃഷ്ടിച്ചതിനു ശേഷം, ഡോക്യുമെന്റുകൾ ഡൈനാമിക് ആയും ഇന്ററാക്ടീവ് ആയും ഉണ്ടാകുമെന്ന് വിചാരിച്ചിരുന്നു - DOM ആ വിചാരത്തെ സാധ്യമാക്കുന്നു.
> DOM ഉം അതിലെ HTML മാർക്കപ് നമ്മളിത് കാണിക്കുന്ന വിധം. [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) നൽകിയത്
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **ക്ലോസറുകൾ മനസ്സിലാക്കൽ**: ക്ലോസറുകൾ ജാവാസ്ക്രിപ്റ്റിൽ പ്രധാന വിഷയം ആണ്, പല ഡെവലപ്പർമാർ ഇത് തങ്ങളുടെ കരുത്തിലും കാലയളവിലും ഉപയോഗിക്കുമ്പോഴും അതിന്റെ സാക്ഷര理论 പൂർണ്ണമായി മനസ്സിലാക്കാറില്ല. ഇന്ന് നാം പ്രായോഗിക പ്രയോഗത്തിൽ ശ്രദ്ധിക്കുകയാണ - നിങ്ങൾ നമ്മുടെ ഇന്ററാക്ടീവ് ഫീച്ചറുകൾ നിർമ്മിക്കുന്നപ്പോൾ ക്ലോസറുകൾ സ്വാഭാവികമായി തെളിയുമ്പോൾ മനസ്സിലാക്കും.
> DOM ഉം അതിലെ HTML മാർക്കപ് നമ്മളിത് കാണിക്കുന്നത്. [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) നൽകിയത്
ഒരു ചെറിയ ഡ്രാഗ് ആൻഡ് ഡ്രോപ്പ് കോഡ്-ധ്യാനം. ചെറിയ HTML, JS, CSS ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ഒരു വെബ് ഇന്റർഫേസ് നിർമ്മിക്കാൻ, അതിനെ സ്റ്റൈൽ ചെയ്യാൻ, ഒരു ഇന്ററാക്ഷൻ ചേർക്കാൻ കഴിയും.
> ചില പ്രാരംഭ ബ്രൗസറുകൾ, [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) വഴി
### ബ്രൗസറുകൾ വെബ് ഉള്ളടക്കം എങ്ങനെ പ്രോസസ്സുചെയ്യുന്നു
@ -194,7 +194,7 @@ quadrantChart
എക്സ്റ്റെൻഷൻ ഇൻസ്റ്റാളേഷൻ പ്രക്രിയ മനസ്സിലാക്കുന്നത് ഉപയോക്തൃ അനുഭവം പ്രതീക്ഷിക്കാനും സഹായിക്കുന്നു. ഇന്നത്തെ ആധുനിക ബ്രൗസറുകളിൽ ഈ പ്രക്രിയ മാനദണ്ഡം പോലെ സാന്ദ്രമായി ഈന്റർഫെയ്സ് രൂപകല്പ്പനയിൽ ചെറിയ വ്യത്യാസങ്ങളോടെ ഉണ്ട്.
> **പ്രധാനത്തിന്**: നിങ്ങളുടെ സ്വന്തം എക്സ്റ്റെൻഷനുകൾ പരീക്ഷിക്കുമ്പോൾ ഡെവലപ്പർ മോഡ് സ്വിച്ച് ഓണാക്കി മറ്റു സ്റ്റോറുകളിൽ നിന്ന് എക്സ്റ്റെൻഷനുകൾ അനുവദിക്കുക.
> ⚠️ **സുരക്ഷാ പരിഗണന**: ഉത്പാദന പ്രയോഗങ്ങളിൽ, API കീകൾ LocalStorage-ൽ സൂക്ഷിക്കുന്നത് സുരക്ഷാ അപകടങ്ങൾ ഉണ്ടാക്കാം, കാരണം ജാവാസ്ക്രിപ്റ്റ് ഈ ഡാറ്റ ആക്സസ് ചെയ്യാം. പഠനത്തിന് ഇത് ശരിയാണെങ്കിലും, യാഥാർത്ഥ്യ հավելു മാത്രം കുട്ടികളായ ക്രെഡൻഷ്യലുകൾ സർവർ-സൈഡ് സംഭരണം ഉപയോഗിക്കണം.
ഇത് പരീക്ഷിക്കാം. ഒരു വെബ്സൈറ്റ് തുറക്കൂ (Microsoft.com നല്ലതാണ്) 'Record' ബട്ടൺ അമർത്തൂ. പിന്നീട് പേജ് റിഫ്രഷ് ചെയ്ത് പ്രൊഫൈലർ എല്ലാം രേഖപ്പെടുത്തിയതിൽ ശ്രദ്ധിക്കൂ. റെക്കോർഡ് നിർത്തുമ്പോൾ ബ്രൗസർ സൈറ്റിനെ 'സ്ക്രിപ്റ്റ്', 'റെൻഡർ', 'പെയിന്റ്' ചെയ്യുന്ന രീതിയുടെ വിശദാംശം കാണിക്കും. ഇത് മിസൺ കൺട്രോൾ ഒരു റോക്കറ്റ് വിന്യാസ സമയത്ത് ഓരോ സിസ്റ്റത്തെയും നിരീക്ഷിക്കുന്നതുപോലെയാണ് - നിങ്ങൾക്ക് യഥാർത്ഥ സമയം സംഭവിക്കുന്നതും എപ്പോഴാണെന്നും ഡാറ്റ ലഭിക്കുന്നു.
✅ നിങ്ങളുടെ പ്രൊഫൈലറിനെ പരിചയപ്പെടൂ! ഈ സൈറ്റിൽ ഡവലപ്പർ ടൂൾസ് തുറന്നിട്ട് ബോട്ടിൽനെക്കുകൾക്കുള്ള സാധ്യത നോക്കൂ. ഏറ്റവും സ്ലോ ആയി ലോഡ് ചെയ്യുന്ന ആസറ്റോ? ഏറ്റവും വേഗം?
tmrowയുടെ C02 സിഗ്നൽ API ഉപയോഗിച്ച് വൈദ്യുതി ഉപഭോഗം ട്രാക്ക് ചെയ്ത്, നിങ്ങളുടെ ബ്രൗസറിൽ തന്നെ നിങ്ങളുടെ പ്രദേശത്തിന്റെ വൈദ്യുതി ഉപഭോഗം എത്ര ഭാരം കൂടിയാണെന്ന് ഓർമപ്പെടുത്തുന്ന ഒരു ബ്രൗസർ എക്സ്റ്റൻഷൻ നിർമ്മിക്കുക. ഈ എക്സ്റ്റൻഷൻ ഇടയ്ക്കിടെ ഉപയോഗിക്കുന്നത് ഈ വിവരത്തിന്റെ അടിസ്ഥാനത്തിൽ നിങ്ങളുടെ പ്രവർത്തനങ്ങളെ സംബന്ധിച്ചുള്ള തീരുമാനം എടുക്കാൻ സഹായിക്കും.
Edge-ൽ ഇൻസ്റ്റാൾ ചെയ്യാൻ, ബ്രൗസറിന്റെ മുകളിൽ വലത്തുഭാഗത്തുള്ള 'മൂന്ന് ഒമ്മ' മෙනുവിൽ നിന്ന് Extensions പാനൽ കണ്ടെത്തുക. അതിൽ നിന്നു് 'Load Unpacked' എന്നത് തിരഞ്ഞെടുക്കുക പുതിയ എക്സ്റ്റൻഷൻ ലോഡ് ചെയ്യുന്നതിനായി. సూచനയിൽ 'dist' ഫോൾഡർ തുറക്കുക, എക്സ്റ്റൻഷൻ ലോഡ് ചെയ്യും. ഇത് ഉപയോഗിക്കാൻ, CO2 Signal APIയ്ക്കുള്ള API കീ ആവശ്യമാണ് ([ഇവിടെ ഇമെയിൽ വഴി ഒന്നു നേടുക](https://www.co2signal.com/) - ഈ പേജിലെ ബോക്സിൽ നിങ്ങളുടെ ഇമെയിൽ നൽകുക) കൂടാതെ [Electricity Map](https://www.electricitymap.org/map) യുമായി അനുസൃതമുള്ള നിങ്ങളുടെ മേഖലയുടെ [കോഡ്](http://api.electricitymap.org/v3/zones) (ബോസ്റ്റണിൽ, ഉദാഹരണത്തിന്, ഞാന് 'US-NEISO' ഉപയോഗിക്കുന്നു).
API കീയും മേഖല രേഖപ്പെടുത്തുമ്പോൾ, ബ്രൗസർ എക്സ്റ്റൻഷൻ ബാറിലുള്ള വർണ്ണജഡ അംശം നിങ്ങളുടെ മേഖലയിലെ ഊർജ്ജ ഉപഭോഗം പ്രതിഫലിപ്പിക്കാൻ മാറുകയും, നിങ്ങൾക്ക് ഏതു ഊർജ്ജം അധികമുള്ള പ്രവർത്തനങ്ങൾ നടത്തുന്നതിന് അനുയോജ്യമാണ് എന്ന് സൂചിപ്പിക്കുകയും ചെയ്യും. ഈ 'അംശം' സംവിധാനം എന്നെ നൽകിയിരിക്കുന്നത് [Energy Lollipop എക്സ്റ്റൻഷൻ](https://energylollipop.com/) എന്നതാണ്, പ്രത്യേകിച്ച് കാലിഫോർണിയയിലെ ഉത്സർജ്ജങ്ങളുടെ കാര്യത്തിലാണ്.
TMROW-ന്റെ CO2 സിഗ്നൽ API ഉപയോഗിച്ച് വൈദ്യുതി ഉപയോഗം ട്രാക്ക് ചെയ്യുന്നതിനായി, നിങ്ങളുടെ പ്രദേശത്തെ വൈദ്യുതി ഉപഭോഗം നേരിട്ട് നിങ്ങളുടെ ബ്രൗസറിൽ ഓർമ്മപ്പെടുത്തുന്നതിനുള്ള ഒരു ബ്രൗസർ എക്സ്റ്റെൻഷൻ സൃഷ്ടിക്കുക. ഈ അഡ് ഹോക്ക് എക്സ്റ്റെൻഷൻ ഉപയോഗിക്കുന്നത് നിങ്ങളുടെ പ്രവർത്തനങ്ങളെ അടിസ്ഥാനമാക്കിയുള്ള തീരുമാനങ്ങൾ എടുക്കാൻ സഹായിക്കും.
Edge-ലിൽ ഇൻസ്റ്റാൾ ചെയ്യാൻ, ബ്രൗസറിന്റെ മുകളിൽ വലത് കോണിലുള്ള 'മൂന്ന് പോയിന്റുകൾ' മെനു ഉപയോഗിച്ച് എക്സറ്റൻഷൻസ് പാനൽ കണ്ടെത്തുക. അവിടെ നിന്ന് 'Unpackaged Load' തിരഞ്ഞെടുത്തു പുതിയ എക്സ്റ്റെൻഷൻ ലോഡ് ചെയ്യുക. ആവശ്യപ്പെട്ടപ്പോൾ 'dist' ഫോൾഡർ തുറക്കുക, അപ്പോൾ എക്സ്റ്റെൻഷൻ ലോഡ് ചെയ്യും. ഇത് ഉപയോഗിക്കാൻ, CO2 സിഗ്നൽ APIക്ക് ഒരു API കീ ആവശ്യമാണ് ([ഇവിടെ ഇമെയിൽ നൽകി എടുക്കുക](https://www.co2signal.com/) - ഇമെയിൽ പെട്ടിയിൽ നിങ്ങളുടെ ഇമെയിൽ നൽകുക) കൂടാതെ [എലക്ട്രിസിറ്റിമാപ്](https://www.electricitymap.org/map)നുള്ള [നിങ്ങളുടെ മേഖലയ്ക്കുള്ള കോഡ്](http://api.electricitymap.org/v3/zones) (ഉദാഹരണത്തിന് ബോസ്റ്റണിൽ, 'US-NEISO' ആണ്).
API കീയും പ്രദേശവും എക്സ്റ്റെൻഷൻ ഇന്റർഫേസിൽ നൽകുന്നതോടെ, ബ്രൗസറിന്റെ എക്സ്റ്റെൻഷൻ ബാറിൽ ഉള്ള നിറമുള്ള പോയിന്റ് നിങ്ങളുടെ പ്രദേശത്തിന്റെ വൈദ്യുതി ഉപഭോഗം പ്രതിഫലിപ്പിക്കാൻ മാറുകയും, ഉയർന്ന വൈദ്യുതി ഉപയോഗമുള്ള പ്രവർത്തനങ്ങൾക്ക് അനുയോജ്യമായ സൂചന നൽകുകയും ചെയ്യും. ഈ "പോയിന്റുകൾ" അടിസ്ഥാനമാക്കിയുള്ള സങ്കൽപ്പം കാൽഫോറ്നിയയ്ക്കുള്ള [Energy Lollipop](https://energylollipop.com/) എക്സ്റ്റെൻഷനാണ് എന്നെ പ്രചോദിപ്പിച്ചത്.
tmrow ൽ നിന്നുള്ള C02 സിഗ്നൽ API ഉപയോഗിച്ച് വൈദ്യുതി ഉപയോഗം നിരീക്ഷിക്കാൻ, നിങ്ങളുടെ പ്രദേശത്തിന്റെ വൈദ്യുതി ഉപയോഗത്തെപ്പറ്റി നേരിട്ടുള്ള ഓർമ്മപ്പെടുത്തലിനായി ഒരു ബ്രൗസർ എക്സ്ടൻഷൻ സൃഷ്ടിക്കുക. ഈ പഴയകാല എക്സ്ടൻഷൻ ഉപയോഗിക്കുന്നത് ഈ വിവരങ്ങളുടെ അടിസ്ഥാനത്തിൽ നിങ്ങളുടെ പ്രവർത്തനങ്ങളെക്കുറിച്ച് നീതിപാലനം നടത്താൻ സഹായിക്കും.
Edge ൽ ഇൻസ്റ്റാൾ ചെയ്യാൻ, ബ്രൗസറിന്റെ മുകളിൽ വലതുവശത്തുള്ള 'മൂന്നു പോയിന്റ്' മെനു ഉപയോഗിച്ച് ഇക്സ്റ്റൻഷൻസ് പാനൽ കണ്ടെത്തുക. അവിടെ നിന്നും 'Unpacked Extension Load' തിരഞ്ഞെടുക്കുക, പുതിയ എക്സ്ടൻഷൻ ലോഡ് ചെയ്യാൻ. പ്രോമ്പ്റ്റിൽ 'dist' ഫോൾഡർ തുറക്കുക, എക്സ്ടൻഷൻ ലോഡ് ചെയ്യും. ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്ന നിങ്ങളുടെ പ്രദേശത്തേക്ക് അനുയോജ്യമായ CO2 സിഗ്നൽ API കേ (അവിടെ [ഇമെയിൽ വഴി ഒരു കീ നേടുക](https://www.co2signal.com/) - ഈ പേജിൽ നിങ്ങളുടെ ഇമെയിൽ നൽകി) കൂടാതെ [ഇലക്ട്രിസിറ്റി മാപ്പിൽ](https://www.electricitymap.org/map) ഉള്ള [പ്രദേശ കോഡ്](http://api.electricitymap.org/v3/zones) ഉണ്ടാകണം (ബോസ്റ്റണിൽ, ഉദാഹരണത്തിന്, ഞാൻ 'US- NEISO' ഉപയോഗിക്കുന്നു).
API കിയും പ്രദേശവും എക്സ്ടൻഷൻ ഇന്റർഫേസിൽ നൽകുന്നതിനു ശേഷം, ബ്രൗസർ എക്സ്ടൻഷൻ ബാറിലുള്ള നിറമുള്ള പോയിന്റ് നിങ്ങളുടെ പ്രദേശം ഉപയോഗിക്കുന്ന വൈദ്യുതി തീവ്രതയെ പ്രതിബിംബിപ്പിക്കും, കൂടാതെ ഏത് ഊർജ്ജം കൂടുതൽ ഉപയോഗിക്കുന്ന പ്രവർത്തനങ്ങൾ ചെയ്യാൻ ശരിയായ സമയം എന്നതിന് നിങ്ങൾക്ക് സൂചകമാകും. ഈ 'പോയിന്റ്' സിസ്റ്റത്തിന്റെ ആശയം കാലിഫോർണിയൻ ഉமிழ്പൈനോടുള്ള [Energy Lollipop എക്സ്ടൻഷൻ](https://energylollipop.com/) ൽ നിന്നാണ് കിട്ടുന്നത്.
വൈദ്യുതി ഉപയോഗം ട്രാക്ക് ചെയ്യുന്നതിനായി tmrow-യുടെ C02 സിഗ്നൽ API ഉപയോഗിച്ച് ഒരു ബ്രൗസർ എക്സ്ടൻഷൻ നിർമ്മിച്ച് നിങ്ങളുടെ ബ്രൗസറിൽ നിങ്ങളുടെ പ്രദേശത്തെ വൈദ്യുതി ഉപയോഗം എത്ര ഭാരമുള്ളതാണെന്നതിന് ഒരു റിമൈൻഡർ നൽകുക. ഈ താത്കാലിക എക്സ്ടൻഷൻ ഉപയോഗിക്കുന്നത് ഈ വിവരങ്ങൾ അടിസ്ഥാനമാക്കി നിങ്ങളുടെ പ്രവർത്തനങ്ങളെക്കുറിച്ച് തീരുമാനങ്ങൾ എടുക്കുന്നതിന് സഹായിക്കും.
Edge ൽ ഇൻസ്റ്റാൾ ചെയ്യാൻ, ബ്രൗസറിന്റെ മുകളിൽ വലതുവശത്തുള്ള 'മൂന്ന് ഡോട്ട്' മেনൂ ഉപയോഗിച്ച് എക്സ്ടൻഷൻ പാനൽ കണ്ടെത്തുക. അവിടെ നിന്ന് പുതിയ ഒരു എക്സ്ടൻഷൻ ലോഡ് ചെയ്യാൻ 'लोड अनपैक्ड' തിരഞ്ഞെടുക്കുക. പ്രോമ്പ്റ്റിൽ 'dist' ഫോൾഡർ തുറക്കുക, എക്സ്ടൻഷൻ ലോഡ് ചെയ്യും. ഇത് ഉപയോഗിക്കാൻ, CO2 സിഗ്നലിന്റെ API ([ഈമെയിൽ വഴി ഇവിടെ ലഭ്യമാണ്](https://www.co2snal.com/) API കീ ലഭിക്കേണ്ടതാണ് - ഈ പേജിൽ ബോക്സിൽ നിങ്ങളുടെ ഇമെയിൽ നൽകുക) ഒപ്പം [നിങ്ങളുടെ പ്രദേശത്തിനുള്ള കോഡ്](http://api.electricitymap.org/v3/zones) [എലക്ട്രിസിറ്റി മാപ്പ്](https://www.electricitymap.org/map) (ഉദാഹരണത്തിന്, ബോസ്റ്റണിൽ ഞാൻ 'US-NEISO' ഉപയോഗിക്കുന്നു).
ഒരു API കീയും പ്രദേശ ഡാറ്റയും എക്സ്ടൻഷൻ ഇന്റർഫേസിൽ നൽകുന്നതോടെ, ബ്രൗസർ എക്സ്ടൻഷൻ ബാറിലുള്ള നിറമുള്ള ഡോട്ട് നിങ്ങളുടെ പ്രദേശത്തിന്റെ എനർജി ഉപയോഗം പ്രതിഫലിപ്പിക്കാൻ മാറും, കൂടാതെ ഇനകൾ അനുസരിച്ച് എനർജി-ഭാരമുള്ള പ്രവർത്തനങ്ങൾ നടത്തുന്നതിനെക്കുറിച്ച് നിങ്ങൾക്ക് സിഗ്നൽ നൽകും. ഈ 'ഡോട്ട്' സിസ്റ്റത്തിന്റെ ആശയം കലിഫോർണിയ മൂലക വികിരണങ്ങൾക്ക് [Energy Lollipop Extension](https://energylollipop.com/) വഴി ലഭിച്ചിട്ടുണ്ട്.
നാം tmrow-യുടെ Signal C02 API ഉപയോഗിച്ച് വൈദ്യുതിയുടെ ഉപയോഗം നിരീക്ഷിക്കാൻ ബ്രൗസർ എക്സ്ടൻഷൻ സൃഷ്ടിക്കും, അതിലൂടെ നിങ്ങളുടെ പ്രദേശത്ത് വൈദ്യുതി ഉപയോഗം എത്ര ഭാരമുള്ളതാണെന്ന് നേരിട്ട് നിങ്ങളുടെ ബ്രൗസറിൽ ഒരു ഓർമ്മപ്പെടുത്തൽ ഉണ്ടായിരിക്കും. ഈ പ്രത്യേക എക്സ്ടൻഷൻ ഉപയോഗിക്കുന്നത് ഈ വിവരങ്ങളുടെ അടിസ്ഥാനത്തിൽ നിങ്ങളുടെ പ്രവർത്തനങ്ങൾ മൂല്യനിർണയം ചെയ്യാൻ സഹായിക്കും.
Edge-ൽ ഇൻസ്റ്റാൾ ചെയ്യാൻ, ബ്രൗസറിന്റെ മുകളിൽ വലത് മൂലയിൽ ഉള്ള "മൂന്ന് പോയിന്റ്" മെനുവിൽ നിന്നു എക്സ്റ്റൻഷൻസ് പാനൽ खोजുക. നിലവിലുള്ളില്ലെങ്കിൽ, ഡവലപ്പർ മോഡ് (താഴെ ഇടത്) സജീവമാക്കുക. പുതിയ എക്സ്റ്റൻഷൻ ലോഡ് ചെയ്യാൻ "അൺകോമ്പ്രസഡ് ലോഡ്" തിരഞ്ഞെടുക്കുക. പ്രോംപ്റ്റിൽ "dist" ഫോൾഡർ തുറക്കുക, എക്സ്റ്റൻഷൻ ലോഡ് ചെയ്തിരിക്കും. ഉപയോഗിക്കാൻ, CO2 സിഗ്നൽ APIയുടെ API കീ ആവശ്യമുണ്ട് (ഇത് ഇവിടെ [ഇമെയിൽ വഴി ലഭ്യമാകുന്നു](https://www.co2signal.com/) - ഈ പേജിലെ പ്രദാനം ചെയ്തിട്ടുള്ള ഇമെയിൽ ബോക്സിൽ നിങ്ങളുടെ ഇമെയിൽ നൽകുക) കൂടാതെ [ഇലക്ട്രിസിറ്റി മാപ്പിനുള്ള](https://www.electricitymap.org/map) അനുയോജ്യമായ [പ്രദേശത്തിനുള്ള കോഡ്](http://api.electricitymap.org/v3/zones) (ഉദാ. ബോസ്റ്റനിൽ, "US-NEISO").
ഒരു പ്രാവശ്യം API കീയും പ്രദേശവും എക്സ്റ്റൻഷൻ ഇന്റർഫേസിൽ നൽകിവച്ചശേഷം, ബ്രൗസർ എക്സ്റ്റൻഷൻ ബാറിലുള്ള നിറമുള്ള ബിന്ദു പ്രദേശത്തിന്റെ വൈദ്യുതി ഉപയോഗം പ്രതിഫലിപ്പിക്കാൻ മാറും, കൂടാതെ ഏത് ഉയർന്ന വിസ്തീർണ്ണമുള്ള പ്രവർത്തനങ്ങൾ പരീക്ഷിക്കാം എന്ന വിഷയത്തിൽ സൂചന നൽകും. ഈ "ബിന്ദു" അടിസ്ഥാനമായ സിസ്റ്റത്തിന്റെ ആശയം [Energy Lollipop എക്സ്റ്റൻഷൻ](https://energylollipop.com/)കളിൽ നിന്നാണ് ലഭിച്ചത്, കാലിഫോർണിയയിലെ ഉൽപ്പാദനങ്ങൾക്ക് വേണ്ടി.
tmrow এর C02 সিগন্যাল API ব্যবহার করে বিদ্যুৎ ব্যবহার ট্র্যাক করার জন্য, আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের মাত্রা কত বেশি তা ব্রাউজারে রিমাইন্ডার হিসেবে প্রদর্শন করার জন্য ব্রাউজার এক্সটেনশন তৈরি করা হয়েছে। এই এক্সটেনশনটি অ্যাডহকভাবে ব্যবহার করে আপনি এই তথ্যের উপর ভিত্তি করে আপনার কার্যক্রম নির্ধারণ করতে পারবেন।
Edge এ ইন্সটল করতে, ব্রাউজারের উপরের ডানদিকের "তিনটি ডট" মেনু থেকে "এক্সটেনশন" প্যানেল খুঁজুন। সেখানে থেকে "Load Unpacked" নির্বাচন করে নতুন এক্সটেনশন লোড করুন। প্রম্পটে "dist" ফোল্ডার খুলুন এবং এক্সটেনশন লোড হবে। ব্যবহার করার জন্য, CO2 সিগন্যাল API এর API কী ([ইমেইল মারফত এখানে পান](https://www.co2signal.com/) - এই পৃষ্ঠার বক্সে ইমেইল টাইপ করুন) এবং [Electricity Map](https://www.electricitymap.org/map) অনুযায়ী [আপনার অঞ্চলের কোড](http://api.electricitymap.org/v3/zones) দরকার (বস্টনে, উদাহরণস্বরূপ, 'US-NEISO' ব্যবহার হয়)।
API কী এবং অঞ্চল এক্সটেনশন ইন্টারফেসে প্রবেশ করানো হলে, ব্রাউজার এক্সটেনশন বারে প্রদর্শিত রঙিন ডট পরিবর্তিত হবে এবং আপনার অঞ্চলের শক্তি ব্যবহারের প্রতিবিম্ব দেখাবে, যা নির্দেশ করবে কোন ধরনের শক্তি প্রয়োজনীয় কার্যক্রম করাই উপযুক্ত। এই "ডট" সিস্টেমের ধারণাটি আমাকে দিয়েছে ক্যালিফোর্নিয়ার নির্গমনের জন্য [Energy Lollipop extension](https://energylollipop.com/)।
CO2 സിഗ്നൽ tmrow API ഉപയോഗിച്ച് വൈദ്യുതി ഉപയോഗം കണ്ടെത്താൻ, നിങ്ങളുടെ പ്രദേശത്തിന്റെ വൈദ്യുതി ഉപഭോഗം എത്ര ഭാരമുള്ളതാണെന്ന് കണ്ടെത്താൻ ബ്രൗസറിൽ മുന്നറിയിപ്പ് ലഭിക്കുന്നതുവരെ ബ്രൗസർ എക്സ്ടൻഷൻ നിർമ്മിക്കുക. ഈ എക്സ്ടൻഷൻ പ്രത്യേകിച്ച് ഉപയോഗിക്കുന്നത് ഈ വിവരത്തിന്റെ അടിസ്ഥാനത്തിൽ നിങ്ങളുടെ പ്രവർത്തനങ്ങളെക്കുറിച്ച് പരിഗണന നടത്താൻ സഹായിക്കും.
Edge-ൽ ഇൻസ്റ്റാൾ ചെയ്യാൻ, ബ്രൗസറിന്റെ മുകളിൽ വലതുഭാഗത്ത് ഉള്ള 'മൂന്ന് ഡോട്ട്' മെനുവിൽ നിന്ന് എക്സ്റ്റൻഷനുകൾ പാനൽ കണ്ടെത്തുക. അവിടെ നിന്ന് 'Load Unpacked' തിരഞ്ഞെടുക്കുക പുതിയ എക്സ്റ്റൻഷൻ ലോഡ് ചെയ്യുന്നതിന്. ആവശ്യമായതു 'dist' ഫോൾഡർ തുറക്കുക, എക്സ്ടൻഷൻ ലോഡ് ചെയ്യപ്പെടും. ഇത് ഉപയോഗിക്കാൻ, CO2 സിഗ്നൽ API-ക്കായി ഒരു API കീ ([ഇമെയിൽ വഴി ഇവിടെ നേടുക](https://www.co2signal.com/) - ഈ പേജിലെ ബോക്സിൽ നിങ്ങളുടെ ഇമെയിൽ നൽകുക) ഉം [നിങ്ങളുടെ പ്രദേശം ക്വാളിഫൈ ചെയ്യുന്ന കോഡ്](http://api.electricitymap.org/v3/zones) ([എലക്ട്രിസിറ്റിമാപ്പ്](https://www.electricitymap.org/map) നു համապատասխանമായി) ഉണ്ടാവണം. (ഉദാഹരണംയായി Boston-ൽ ഞാൻ 'US-NEISO' ഉപയോഗിക്കുന്നു).
API കീയും പ്രദേശം ഇന്റഫേസിൽ നൽകുമ്പോൾ, ബ്രൗസർ എക്സ്ടൻഷന്റെ ബാറിൽ നിറമുള്ള ഡോട്ട് നിങ്ങളുടെ പ്രദേശത്തിന്റെ വൈദ്യുതി ഉപഭോഗം പ്രതിഫലിപ്പിക്കും, നിങ്ങള്ക്ക് അനുയോജ്യമായ ഭാരമുള്ള പ്രവർത്തനങ്ങൾക്കായി സൂചന നൽകും. ഈ 'ഡോട്ട്' സിസ്റ്റത്തിന്റെ ആശയം California-ലെ Energy Lollipop [ബ്രൗസർ എക്സ്റ്റൻഷൻ](https://energylollipop.com/) എന്നതിനാൽ ലഭിച്ചിരിക്കുന്നു.
തെമ്മ്രോയുടെ CO2 സിഗ്നൽ API ഉപയോഗിച്ച് വൈദ്യുതി ഉപയോഗം മോണിറ്റർ ചെയ്യുന്നതിന്, നിങ്ങളുടെ ബ്രൗസറിൽ തന്നെ നിങ്ങളുടെ പ്രദേശത്തിന്റെ വൈദ്യുതി ഉപയോഗത്തിന്റെ ഗാഢതയെക്കുറിച്ച് ഓർമ്മിപ്പിക്കാൻ ഒരു ബ്രൗസർ വിപുലീകരണം നിർമ്മിക്കുക. ഈ വിപുലീകരണം ആവശ്യംപ്രകാരം ഉപയോഗിക്കുന്നത്, ഈ വിവരത്തിന്റെ അടിസ്ഥാനത്തിൽ നിങ്ങളുടെ പ്രവർത്തനങ്ങളിൽ നീതിനിര്ണയം എടുക്കാൻ സഹായിക്കും.
Edge-ൽ ഇൻസ്റ്റാൾ ചെയ്യാൻ, ബ്രൗസറിന്റെ മുകളിൽ വലതുവശത്തുള്ള 'മൂന്ന് പോയിന്റ്' മെനുവിൽ നിന്നുയർന്നുള്ള Extensions പാനൽ കണ്ടെത്തുക. അവിടെ നിന്ന് 'Load Unpacked' തിരഞ്ഞെടുത്ത് പുതിയ ഒരു വിപുലീകരണം ലോഡ് ചെയ്യുക. പ്രോമ്പ്റ്റിൽ 'dist' ഫോൾഡർ തുറക്കുക, അതിലൂടെ വിപുലീകരണം ലോഡ് ചെയ്യും. ഉപയോഗിക്കാൻ, നിങ്ങൾക്ക് CO2 Signal API-ക്കായി ഒരു API കീ ([ഇമെയിൽ വഴി ഇവിടെ നേടുക](https://www.co2signal.com/) - ഈ പേജിലുള്ള ബോക്സിൽ നിങ്ങളുടെ ഇമെയിൽ നൽകുക) കൂടാതെ [Electricity Map](https://www.electricitymap.org/map) ലെ നിങ്ങളുടെ മേഖലയുടെ [കോഡ്](http://api.electricitymap.org/v3/zones) വേണം (ബോസ്റ്റണിൽ ഉദാഹരണത്തിന്, ഞാൻ 'US-NEISO' ഉപയോഗിക്കുന്നു).
API കീയും പ്രദേശ കോഡും വിപുലീകരണ ഇന്റർഫേസിൽ നൽകുന്നതോടെ, ബ്രൗസർ വിപുലീകരണ ബാറിലെ കളർ ഡോട്ട് നിങ്ങളുടെ പ്രദേശത്തിന്റെ ഊർജ്ജ ഉപയോഗം പ്രതിഫലിപ്പിക്കാൻ മാറും, നിങ്ങൾക്ക് ഏത് ഊർജ്ജ-ഭാരമുള്ള പ്രവർത്തനങ്ങൾ ചെയ്യേണ്ടതാണെന്ന് സൂചിപ്പിക്കും. ഈ 'ഡോട്ട്' സിസ്റ്റത്തിന്റെ ആശയം കാലിഫോർണിയയുടെ ഇമിഷൻസിനുള്ള [Energy Lollipop extension](https://energylollipop.com/) എന്നതിൽ നിന്നാണ് ഞാൻ ഉൾക്കൊണ്ടത്.
> ചിത്രം [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
കാൻവാസ് ഘടകത്തിൽ വരയ്ക്കാൻ, നിങ്ങൾ എല്ലാ കാൻവാസ് ഗ്രാഫിക്സിന്റെയും അടിസ്ഥാനമായ മൂന്ന് പടികളുടെ പ്രക്രിയ പിന്തുടരും. ഇത് കുറച്ച് പ്രാവശ്യം ചെയ്താൽ എളുപ്പത്തിൽ മനസ്സിലാക്കാം:
- **സ്കോറിംഗ് സിസ്റ്റം**: ഓരോ നശിച്ച ശത്രു കപ്പലും 100 പോയിന്റ് നൽകുന്നു (ചുറ്റും പറ്റിയ സംഖ്യകൾ മental കണക്കാക്കാൻ എളുപ്പമാണ്). സ്കോർ സ്ക്രീന്റെ താഴ് വലത് കോണിൽ പ്രദർശിപ്പിക്കും.
- **ലൈഫ് കൗണ്ടർ**: നിങ്ങളുടെ ഹീറോ മൂന്നു ലൈവുകളുമായാണ് ആരംഭിക്കുക - ആദിമ ആർക്കേഡ് ഗെയിമുകൾ സ്ഥാപിച്ച സ്റ്റാൻഡേർഡ്, ഈ ചെറിയ সংখ্যা പ്ലേയ്ബിലിറ്റിക്കൊപ്പം വെല്ലുവിളി കൂട്ടുന്നു. ഓരോ ശത്രു കൂട്ടിയിടിപ്പും ഒരു ലൈഫ് നഷ്ടപ്പെടുന്നു. ബാക്കിയുള്ള ലൈവുകൾ താഴ് വലതു കോണിൽ കപ്പൽ ഐക്കണുകളിലായി (  ) കാണിക്കും.
- **ലൈഫ് കൗണ്ടർ**: നിങ്ങളുടെ ഹീറോ മൂന്നു ലൈവുകളുമായാണ് ആരംഭിക്കുക - ആദിമ ആർക്കേഡ് ഗെയിമുകൾ സ്ഥാപിച്ച സ്റ്റാൻഡേർഡ്, ഈ ചെറിയ সংখ্যা പ്ലേയ്ബിലിറ്റിക്കൊപ്പം വെല്ലുവിളി കൂട്ടുന്നു. ഓരോ ശത്രു കൂട്ടിയിടിപ്പും ഒരു ലൈഫ് നഷ്ടപ്പെടുന്നു. ബാക്കിയുള്ള ലൈവുകൾ താഴ് വലതു കോണിൽ കപ്പൽ ഐക്കണുകളിലായി (  ) കാണിക്കും.
- **"Loading..." സന്ദേശത്തിന് പകരം ലോഗിൻ സ്ക്രീൻ പ്രദർശിപ്പിക്കുന്നു**
✅ ഈ കോഡ് `app.innerHTML = '';` യുടെ ഉദ്ദേശം എന്താണ്? അതിന്റെ അഭാവത്തിൽ എന്ത് സംഭവിക്കും?
## റൂട്ടുകൾ സൃഷ്ടിക്കൽ
Routing എന്നത് URL-നെ ശരിയായ ഉള്ളടക്കത്തിലേക്ക് ബന്ധിപ്പിക്കുന്നതിന് വേണ്ടിയാണ്. മുന്കാല ഫോൺ ഓപ്പറേറ്റർമാർ സ്വിച്ച്ബോർഡുകൾ ഉപയോഗിച്ചു കോളുകൾ നടത്തുന്നത് പോലെ, വെബ് റൂട്ടിംഗ് URL അഭ്യർത്ഥനയെടുത്ത് ഇത് എവിടേക്ക് പോവണമെന്ന് തീരുമാനിക്കുന്നു.
- **"Loading..." സന്ദേശത്തിന് പകരം ലോഗിൻ സ്ക്രീൻ പ്രദർശിപ്പിക്കുന്നു**
✅ ഈ കോഡ് `app.innerHTML = '';` യുടെ ഉദ്ദേശം എന്താണ്? അതിന്റെ അഭാവത്തിൽ എന്ത് സംഭവിക്കും?
## റൂട്ടുകൾ സൃഷ്ടിക്കൽ
Routing എന്നത് URL-നെ ശരിയായ ഉള്ളടക്കത്തിലേക്ക് ബന്ധിപ്പിക്കുന്നതിന് വേണ്ടിയാണ്. മുന്കാല ഫോൺ ഓപ്പറേറ്റർമാർ സ്വിച്ച്ബോർഡുകൾ ഉപയോഗിച്ചു കോളുകൾ നടത്തുന്നത് പോലെ, വെബ് റൂട്ടിംഗ് URL അഭ്യർത്ഥനയെടുത്ത് ഇത് എവിടേക്ക് പോവണമെന്ന് തീരുമാനിക്കുന്നു.
പരമ്പരാഗതമായി വെബ് സർവറുകൾ വിവിധ URL-ങ്ങൾക്ക് വ്യത്യസ്ത HTML ഫയലുകൾ സർവ് ചെയ്തു. നാം സിംഗിൾ പേജ് ആപ്പ് നിർമ്മിക്കുകയാണ്, അതിനാൽ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് റൂട്ടിംഗ് ഞങ്ങള്ക്ക് തന്നെ കൈകാര്യം ചെയ്യേണ്ടതാണ്. ഇത് ഉപയോക്തൃ അനുഭവത്തിനും പ്രകടനത്തിനും കൂടുതൽ നിയന്ത്രണം നൽകുന്നു.
```
പരമ്പരാഗതമായി വെബ് സർവറുകൾ വിവിധ URL-ങ്ങൾക്ക് വ്യത്യസ്ത HTML ഫയലുകൾ സർവ് ചെയ്തു. നാം സിംഗിൾ പേജ് ആപ്പ് നിർമ്മിക്കുകയാണ്, അതിനാൽ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് റൂട്ടിംഗ് ഞങ്ങള്ക്ക് തന്നെ കൈകാര്യം ചെയ്യേണ്ടതാണ്. ഇത് ഉപയോക്തൃ അനുഭവത്തിനും പ്രകടനത്തിനും കൂടുതൽ നിയന്ത്രണം നൽകുന്നു.
```mermaid
flowchart LR
A["🌐 URL പാത<br/>/dashboard"] --> B["🗺️ മാർഗ്ഗം ഒബ്ജക്റ്റ്<br/>ലുക്ക് അപ്"]
@ -374,46 +374,46 @@ flowchart LR
style E fill:#e8f5e8
style I fill:#ffebee
style J fill:#fff3e0
```
**റൂട്ടിംഗ് പ്രവാഹം മനസ്സിലാക്കുക:**
- **URL മാറ്റങ്ങൾ റൂട്ടിംഗ് കോൺഫിഗറേഷൻ പരിശോധിക്കാൻ ട്രിഗർ ചെയ്യുന്നു**
- **ശരിയായ റൂട്ടുകൾ പ്രത്യേക ടൈംപ്ലേറ്റ് ഐഡികൾക്ക് മാപ്പ് ചെയ്യുന്നു**
- **തെറ്റായ റൂട്ടുകൾ റൂർച്ച് സ്റ്റേറ്റുകൾ തടയാൻ ഫാൾബാക്ക് ചെയ്തുവരുന്നു**
- **ടൈംപ്ലേറ്റ് റൻഡറിംഗ് മുകളിൽ പഠിച്ച മൂന്ന് ഘട്ടങ്ങളനുസരിച്ച് നടപ്പിലാക്കുന്നു**
വെബ് ആപ്പിനെക്കുറിച്ച് സംസാരിക്കുമ്പോൾ, ഞങ്ങൾ *Routing* എന്നത് **URLs**-നെ പ്രദർശിപ്പിക്കേണ്ട പ്രത്യേക സ്ക്രീനുകളുമായി യോജിപ്പിക്കുന്നതും എന്നാണ് പറയുന്നത്. നിരവധി HTML ഫയലുകളുള്ള വെബ്സൈറ്റിൽ, ഫയൽ പാത്തുകൾ URL-ൽ പ്രതിഫലിക്കപ്പെടുന്നതുകൊണ്ട് ഇത് സ്വയമേവ നടക്കും. ഉദാഹരണത്തിന്, നിങ്ങള്ക്കുണ്ട് ഈ ഫയലുകൾ:
```
**റൂട്ടിംഗ് പ്രവാഹം മനസ്സിലാക്കുക:**
- **URL മാറ്റങ്ങൾ റൂട്ടിംഗ് കോൺഫിഗറേഷൻ പരിശോധിക്കാൻ ട്രിഗർ ചെയ്യുന്നു**
- **ശരിയായ റൂട്ടുകൾ പ്രത്യേക ടൈംപ്ലേറ്റ് ഐഡികൾക്ക് മാപ്പ് ചെയ്യുന്നു**
- **തെറ്റായ റൂട്ടുകൾ റൂർച്ച് സ്റ്റേറ്റുകൾ തടയാൻ ഫാൾബാക്ക് ചെയ്തുവരുന്നു**
- **ടൈംപ്ലേറ്റ് റൻഡറിംഗ് മുകളിൽ പഠിച്ച മൂന്ന് ഘട്ടങ്ങളനുസരിച്ച് നടപ്പിലാക്കുന്നു**
വെബ് ആപ്പിനെക്കുറിച്ച് സംസാരിക്കുമ്പോൾ, ഞങ്ങൾ *Routing* എന്നത് **URLs**-നെ പ്രദർശിപ്പിക്കേണ്ട പ്രത്യേക സ്ക്രീനുകളുമായി യോജിപ്പിക്കുന്നതും എന്നാണ് പറയുന്നത്. നിരവധി HTML ഫയലുകളുള്ള വെബ്സൈറ്റിൽ, ഫയൽ പാത്തുകൾ URL-ൽ പ്രതിഫലിക്കപ്പെടുന്നതുകൊണ്ട് ഇത് സ്വയമേവ നടക്കും. ഉദാഹരണത്തിന്, നിങ്ങള്ക്കുണ്ട് ഈ ഫയലുകൾ:
```
mywebsite/index.html
mywebsite/login.html
mywebsite/admin/index.html
```
നിങ്ങൾ `mywebsite` എന്ന റൂട്ടുമായി ഒരു വെബ് സെർവർ ഉണ്ടാക്കിയാൽ, URL മാപ്പിംഗ് ഇങ്ങനെ ആയിരിക്കും:
നിങ്ങൾ `mywebsite` എന്ന റൂട്ടുമായി ഒരു വെബ് സെർവർ ഉണ്ടാക്കിയാൽ, URL മാപ്പിംഗ് ഇങ്ങനെ ആയിരിക്കും:
എങ്കിലും, ഞങ്ങളുടെ വെബ് ആപ്പ് ഒരു HTML ഫയലിൽ എല്ലാ സ്ക്രീനുകളും ഉള്ക്കൊള്ളുന്നതിനാൽ ഈ ഡിഫോൾട്ട് പെരുമാറ്റം സഹായിക്കില്ല. ഞങ്ങൾ ഈ മാപ്പ് സ്വയം സജ്ജമാക്കി ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് പ്രദർശിപ്പിക്കപ്പെട്ട ടൈംപ്ലേറ്റ് അപ്ഡേറ്റ് ചെയ്യേണ്ടതാണ്.
### പ്രവർത്തി
URL പാത്തുകളും ടൈംപ്ലേറ്റുകളുമായുള്ള [മാപ്പ്](https://en.wikipedia.org/wiki/Associative_array) ഒരു ലളിതമായ ഒബ്ജക്റ്റ് ഉപയോഗിച്ച് നടപ്പിലാക്കാം. ഈ ഒബ്ജക്റ്റ് `app.js` ഫയലിന്റെ മുകളിൽ ചേർക്കുക.
എങ്കിലും, ഞങ്ങളുടെ വെബ് ആപ്പ് ഒരു HTML ഫയലിൽ എല്ലാ സ്ക്രീനുകളും ഉള്ക്കൊള്ളുന്നതിനാൽ ഈ ഡിഫോൾട്ട് പെരുമാറ്റം സഹായിക്കില്ല. ഞങ്ങൾ ഈ മാപ്പ് സ്വയം സജ്ജമാക്കി ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് പ്രദർശിപ്പിക്കപ്പെട്ട ടൈംപ്ലേറ്റ് അപ്ഡേറ്റ് ചെയ്യേണ്ടതാണ്.
### പ്രവർത്തി
URL പാത്തുകളും ടൈംപ്ലേറ്റുകളുമായുള്ള [മാപ്പ്](https://en.wikipedia.org/wiki/Associative_array) ഒരു ലളിതമായ ഒബ്ജക്റ്റ് ഉപയോഗിച്ച് നടപ്പിലാക്കാം. ഈ ഒബ്ജക്റ്റ് `app.js` ഫയലിന്റെ മുകളിൽ ചേർക്കുക.
- **കീസ് URL പാത്തുകളും വാല്യൂസ് ടൈംപ്ലേറ്റിന്റെ വിവരങ്ങളും ആണ്**
- **URL അനുസരിച്ച് പ്രദർശിപ്പിക്കേണ്ട ടൈംപ്ലേറ്റ് എളുപ്പത്തിൽ കണ്ടെത്താൻ കഴിയുന്നു**
- **പുതിയ റൂട്ടുകളും സാന്ദർഭികമായി കൂട്ടിച്ചേർക്കാനുള്ള വികാസനക്ഷമ ഘടന നൽകുന്നു**
നമുക്ക് `updateRoute` ഫംഗ്ഷൻ കുറച്ചായി മാറ്റാം. നേരിട്ട് `templateId` പരാമർശിക്കാനുള്ള പകരം, ആദ്യം നിലവിലെ URL നോക്കി, പിന്നീട് നമ്മുടെ മാനപ്പെടുത്തിയത് ഉപയോഗിച്ച് അനുയോജ്യമായ template ID മൂല്യം എടുക്കണം. URL-യിൽ നിന്നും മാര്ഗഭാഗം മാത്രം എടുക്കാൻ ഉപയോഗിക്കാം [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname).
@ -644,7 +644,7 @@ sequenceDiagram
`history.pushState` ഉപയോഗിച്ചുകൊണ്ട് ബ്രൗസറിന്റെ നാവിഗേഷൻ ചരിത്രത്തിൽ പുതിയ എൻട്രികൾ സൃഷ്ടിക്കുന്നു. ബ്രൗസറിന്റെ പിന്നിലെ ബട്ടൺ നാളെ നീട്ടി നോക്കിയാൽ കാണാനാകും:
പിന്നിലെ ബട്ടൺ കുറേക്കാലം അമർത്തി നോക്കിയാൽ നിലവിലെ URL മാറി, ചരിത്രം അപ്ഡേറ്റ് ആയാലും അടുത്ത ടേംപ്ലേറ്റ് ഒരുപോലെയാണ് കാണിക്കുന്നത്.
3. പേജ് റീലോഡ് ആകുകയും URL-ൽ ഡാറ്റ കാണപ്പെടുകയും ചെയ്യുന്നുവെന്ന് ശ്രദ്ധിക്കുക
### HTTP മെഥഡുകൾ താരതമ്യം
@ -347,7 +347,7 @@ graph TD
2. "Create Account" ബട്ടൺ അമർത്തുക
3. നിങ്ങളുടെ ബ്രൗസറിൽ സർവർ പ്രതികരണം ശ്രദ്ധിക്കുക
**നിങ്ങൾ കാണേണ്ടത്:**
- **ബ്ലൗസർ API എൻഡ്പോയിന്റിലേക്ക് റീഡയറക്ട് ചെയ്യുന്നു**
@ -610,7 +610,7 @@ async function register() {
3. **"Create Account" ക്ലിക്ക് ചെയ്യുക**
4. **കോൺസോൾ സന്ദേശങ്ങളും ഉപയോക്തൃ പ്രതികരണങ്ങളും കണ്ട് ആസ്വദിക്കുക**
**നിങ്ങൾ കാണേണ്ടത്:**
- **സബ്മിറ്റ് ബട്ടണിൽ ലോഡിംഗ് സ്വീകരണം**
@ -784,7 +784,7 @@ input:focus:invalid {
3. **യൂസർനെയിം ഫീൽഡിൽ പ്രത്യേക ചിഹ്നങ്ങൾ ഉപയോഗിക്കാൻ ശ്രമിക്കുക**
4. **നെഗറ്റീവ് ബാലൻസ് നൽകുക**
**നിങ്ങൾ കാണുന്നതെന്താണെന്ന്:**
- **ബ്രൗസർ സ്വതന്ത്ര സാധുത സന്ദേശങ്ങൾ പ്രദർശിപ്പിക്കുന്നു**
@ -944,7 +944,7 @@ timeline
ചെറിയൊരു സ്റ്റൈലിങ്ങ് ചെയ്ത് അവസാന ലോഗിൻ പേജ് നോക്കിനോക്കൂ:
പിന്നിലേക്ക് തിരിയാതെ, നാം ഒരു **കേന്ദ്രികൃത സ്റ്റേറ്റ് മാനേജ്മെന്റ്** സിസ്റ്റം സൃഷ്ടിക്കും. ഇത് എല്ലാ പ്രധാന കാര്യങ്ങളും നിയന്ത്രിക്കുന്ന ഒരാൾ ഉണ്ടാകുന്ന പോലെ ആലോചിക്കുക:
```mermaid
flowchart TD
@ -799,7 +799,7 @@ timeline
അസൈൻമെന്റ് പൂര്ത്തിയാക്കിയതിന് ശേഷം വരുന്ന ഫലത്തിൻ്റെ ഉദാഹരണം:
ഈ പ്രോജക്ടിൽ, നിങ്ങൾ ഒരു خیالی ബാങ്ക് എങ്ങനെ നിർമ്മിക്കാമെന്ന് പഠിക്കും. ഈ പഠനങ്ങളിൽ ഒരു വെബ് ആപ്പ് എങ്ങനെൽയൗട്ട് ചെയ്യാം, റൂട്ടുകൾ എങ്ങനെ നൽകാം, ഫോമുകൾ നിർമ്മിക്കുക, സ്റ്റേറ്റ് മാനേജ് ചെയ്യുക, ബാങ്കിന്റെ ഡാറ്റ ലഭിക്കുന്ന API-യിൽ നിന്ന് ഡാറ്റ എങ്ങനെ ഫിച്ച് ചെയ്യാം എന്നതിനെക്കുറിച്ചുള്ള നിർദ്ദേശങ്ങൾ ഉൾបទമാണ്.
@ -182,7 +182,7 @@ VSCode.dev ഈ കഴിവുകൾ നിങ്ങളുടെ ബ്രൗസ
എല്ലാം ലോഡ് ചെയ്തതിനു ശേഷം, നിങ്ങൾ മനോഹരമായി ശുചിത്വമുള്ള ഒരു വേർക്ക്സ്പേസ് കാണും, അഭിപ്രായങ്ങൾക്ക് നിർദ്ദേശിക്കപ്പെടുന്നത് – നിങ്ങളുടെ കോഡ് ആണ് പ്രധാനങ്ങൾ!
@ -78,7 +78,7 @@ VSCode.dev ഒരു റിപോസിറ്ററി തുറക്കാൻ
4. "Add initial HTML structure" എന്നുള്ള കമ്മിറ്റ് സന്ദേശം നൽകുക
5. "Commit new file" ക്ലിക്ക് ചെയ്ത് മാറ്റങ്ങൾ സേവ് ചെയ്യുക
**ഈ ആരംഭം ചെയ്യുന്നതിലൂടെ സംഭവിക്കുന്നത്:**
- **വ്യവസ്ഥാപിക്കുന്നു** ബോധ്യപ്പെട്ട HTML5 ഡോക്യുമെന്റ് ഘടന സെമാന്റിക് ഘടകങ്ങളോടെ
@ -104,7 +104,7 @@ VSCode.dev ഒരു റിപോസിറ്ററി തുറക്കാൻ
✅ **വിജയം സൂചിപ്പിക്കുന്നത്**: എക്സ്പ്ലോറർ സൈഡ്ബാറിൽ നിങ്ങളുടെ പ്രോജക്ട് ഫയലുകൾ കാണണം, പ്രധാന എഡിറ്റർ അരിയയിൽ `index.html` എഡിറ്റ് ചെയ്യാൻ ലഭ്യമാകും.
**ഇന്റർഫേസ് തുറക്കുന്നത് കാണുന്നതിന്:**
- **എക്സ്പ്ലോറർ സൈഡ്ബാർ**: നിങ്ങളുടെ റിപോസിറ്ററിയിലെ ഫയലുകളും ഫോൾഡർ ഘടനയും **പ്രദർശിപ്പിക്കുന്നു**
@ -448,7 +448,7 @@ li:before {
**ഇൻസ്റ്റാളേഷനുകഴിഞ്ഞുള്ള ഉടൻ ഫലങ്ങൾ:**
CodeSwing ഇൻസ്റ്റാൾ ചെയ്ത ഉടനെ, എഡിറ്ററിൽ നിങ്ങളുടെ റിസ്യൂം വെബ്സൈറ്റിന്റെ ലൈവ് പ്രിവ്യൂ കാണാം. മാറ്റങ്ങൾ വരുത്തുമ്പോൾ സൈറ്റ് എങ്ങനെ കാണപ്പെടുന്നു എന്ന് നേരിട്ടും തിരിച്ചറിയാം.
**പുതിയ ഇന്റർഫേസ് വിശദീകരണം:**
- **സ്പ്ലിറ്റ് വ്യൂ**: ഒരു ഭാഗത്ത് കോഡ്, മറുവശത്ത് ലൈവ് പ്രിവ്യൂ കാണിക്കും
## 🗺️ എഐ ആപ്ലിക്കേഷൻ വികസനത്തിലൂടെ നിങ്ങളുടെ പഠനയാത്ര
@ -189,7 +189,7 @@ mindmap
```
**അടിസ്ഥാന സിദ്ധാന്തം**: എഐ ആപ്ലിക്കേഷൻ വികസനം പരമ്പരാഗത വെബ് ഡവലപ്പ്മെന്റ് കഴിവുകളെ എഐ സേവന സംയോജനത്തോടെ സംയോജിപ്പിക്കുന്നു, ഉപയോക്താവിന് സ്വാഭാവികവും പ്രതികരണശീലമുള്ളതുമായ ബുദ്ധിമുട്ടില്ലാത്ത ആപ്ലിക്കേഷനുകൾ സൃഷ്ടിക്കുന്നു.
**പ്ലേഗ്രൗണ്ട് ഇത്രയും ഉപകാരത്തിന് ഇടയായത് എന്തുകൊണ്ട്:**
- **വിഭിന്ന എഐ മോഡലുകൾ** പോലുള്ള GPT-4o-mini, Claude തുടങ്ങിയവ പരീക്ഷിക്കാൻ (ഇവ എല്ലാവും मुफ़ത്!)
@ -199,7 +199,7 @@ mindmap
കുറച്ച് കളിച്ച് കഴിഞ്ഞാൽ "Code" ടാബിൽ ക്ലിക്ക് ചെയ്ത് നിങ്ങളുടെ പ്രോഗ്രാമിങ് ഭാഷ തിരഞ്ഞെടുക്കുക, തുടർനടപടികൾക്കുള്ള കോഡ് ലഭിക്കും.
## പൈത്തൺ ബാക്ക്എൻഡ് ഇന്റഗ്രേഷൻ സജ്ജമാക്കൽ
@ -2351,14 +2351,14 @@ mindmap
- [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) സന്ദർശിക്കുക
@ -1060,12 +1060,12 @@ pie title "Common ARIA Usage Patterns"
**信息性圖片** - 傳達重要信息：
```html
<imgsrc="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.mo.png" alt="Sales increased 25% from Q1 to Q2 2024">
<imgsrc="../../../../translated_images/mo/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.mo.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/mo/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.png" />
</div>
```
@ -599,7 +599,7 @@ flowchart LR
你將創建微妙的高光，模擬光線如何在玻璃表面反射。這種方法類似於文藝復興時期的畫家如 Jan van Eyck 如何使用光線和反射使繪製的玻璃看起來具有三維效果。以下是你的目標：
歡迎來到網頁開發中最有趣的部分之一——讓網頁變得互動！文檔物件模型（DOM）就像是 HTML 和 JavaScript 之間的橋樑，今天我們將利用它讓你的微型生態瓶活起來。當 Tim Berners-Lee 創建第一個網頁瀏覽器時，他設想了一個可以動態和互動的網頁世界，而 DOM 使這一願景成為可能。
> DOM 的表示及其引用的 HTML 標記。來源：[Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
> DOM 的表示及其引用的 HTML 標記。來源：[Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
在 Edge 瀏覽器中安裝擴充功能，請使用瀏覽器右上角的「三點」選單找到擴充功能面板。從那裡選擇「載入未封裝」以載入新的擴充功能。在提示中打開「dist」資料夾，擴充功能就會載入。要使用此功能，您需要 CO2 Signal API 的 API 金鑰（[在此透過電子郵件獲取](https://www.co2signal.com/) - 在此頁面輸入您的電子郵件）以及對應於 [Electricity Map](https://www.electricitymap.org/map) 的區域代碼（例如，在波士頓，我使用「US-NEISO」）[區域代碼查詢](http://api.electricitymap.org/v3/zones)。
要在 Edge 中安裝，請使用瀏覽器右上角的「三點」選單找到擴充功能面板。從那裡選擇「載入未封裝」以載入新的擴充功能。當系統提示時，打開「dist」資料夾，擴充功能就會被載入。要使用此擴充功能，您需要一個 CO2 Signal API 的 API 金鑰（[在此處透過電子郵件獲取](https://www.co2signal.com/) - 在該頁面的框中輸入您的電子郵件）以及對應於 [電力地圖](https://www.electricitymap.org/map) 的 [區域代碼](http://api.electricitymap.org/v3/zones)（例如，在波士頓，我使用「US-NEISO」）。
要在 Edge 上安裝，請使用瀏覽器右上角的「三點」選單找到擴充套件面板。從那裡選擇「載入未壓縮的擴充套件」以載入新的擴充套件。在提示中打開 'dist' 資料夾，擴充套件就會被載入。要使用此擴充套件，您需要一個 CO2 Signal API 的 API 金鑰（[在此處透過電子郵件獲取](https://www.co2signal.com/) - 在該頁面上的框中輸入您的電子郵件）以及對應於 [電力地圖](https://www.electricitymap.org/map) 的 [地區代碼](http://api.electricitymap.org/v3/zones)（例如，在波士頓，我使用 'US-NEISO'）。
要在 Edge 上安裝，請使用瀏覽器右上角的“三點”菜單找到擴展面板。從那裡選擇“加載未打包的擴展”，然後在提示中打開“dist”文件夾，擴展就會加載。要使用它，您需要 CO2 Signal 的 API 密鑰（[通過電子郵件在此處獲取](https://www.co2signal.com/)——在該頁面的框中輸入您的電子郵件）以及 [您所在區域的代碼](http://api.electricitymap.org/v3/zones) [電力地圖](https://www.electricitymap.org/map)（例如，在波士頓，我使用“US-NEISO”）。
要在 Edge 上安裝，請使用瀏覽器右上角的「三點」選單找到擴充功能面板。如果尚未啟用，請啟用開發者模式（左下角）。選擇「載入未壓縮的擴充功能」以載入新的擴充功能。在提示中打開 "dist" 資料夾，擴充功能就會被載入。要使用此擴充功能，您需要一個 CO2 Signal API 的 API 金鑰（可以[通過電子郵件在此處獲得](https://www.co2signal.com/) - 在該頁面上的框中輸入您的電子郵件）以及對應於[電力地圖](https://www.electricitymap.org/map)的[區域代碼](http://api.electricitymap.org/v3/zones)（例如，在波士頓是 "US-NEISO"）。
若要安裝到 Edge，請在瀏覽器右上角的「三點」選單中找到「擴充功能」面板。從那裡選擇「Load Unpacked」，然後載入新的擴充功能。在提示中打開「dist」資料夾，擴充功能就會被載入。要使用此功能，您需要 CO2 Signal API 的 API 金鑰 ([在這裡透過電子郵件獲取](https://www.co2signal.com/) - 在該頁面的框中輸入您的電子郵件)，以及 [Electricity Map](https://www.electricitymap.org/map) 對應的 [您所在地區的代碼](http://api.electricitymap.org/v3/zones)（例如，在波士頓，使用 'US-NEISO'）。
要在 Edge 瀏覽器中安裝，請使用瀏覽器右上角的「三點」選單找到擴充功能面板。從那裡選擇「載入未封裝」以載入新的擴充功能。根據提示打開 'dist' 資料夾，擴充功能就會被載入。要使用它，您需要一個 CO2 Signal API 的 API 金鑰（[在這裡透過電子郵件獲取](https://www.co2signal.com/) - 在頁面上的框中輸入您的電子郵件）以及 [您的區域代碼](http://api.electricitymap.org/v3/zones)，該代碼與 [電力地圖](https://www.electricitymap.org/map) 相符（例如，在波士頓，我使用 'US-NEISO'）。
在 Edge 瀏覽器中安裝擴充功能，使用瀏覽器右上角的「三點」選單找到擴充功能面板。從那裡選擇「載入未封裝」以載入新的擴充功能。在提示中打開「dist」資料夾，擴充功能就會載入。要使用此功能，您需要 CO2 Signal API 的 API 金鑰（[在此處透過電子郵件獲取](https://www.co2signal.com/) - 在該頁面輸入您的電子郵件）以及對應 [Electricity Map](https://www.electricitymap.org/map) 的區域代碼（例如，在波士頓，我使用 'US-NEISO'，可在 [此處](http://api.electricitymap.org/v3/zones) 找到）。
आज, आपण आधुनिक वेब डेव्हलपमेंट शक्य होण्यासाठी आणि गंभीरपणे व्यसनाधीन होण्यासाठी अविश्वसनीय टूल्स एक्सप्लोर करणार आहोत. मी ज्या एडिटर्स, ब्राउझर्स आणि वर्कफ्लोजबद्दल बोलतोय, तेच टूल्स Netflix, Spotify आणि तुमच्या आवडत्या इंडी अॅप स्टुडिओचे डेव्हलपर्स दररोज वापरतात. आणि आता तुम्हाला आनंदाने नाचायला लावणारा भाग: या व्यावसायिक-ग्रेड, उद्योग-मानक टूल्सपैकी बहुतेक पूर्णपणे मोफत आहेत!
localizeflow[bot]
2 months ago