Bygg ett webbläsartillägg som använder tmrow:s CO2 Signal API för att spåra din elförbrukning och visa hur mycket energi som används i ditt område som en påminnelse direkt i webbläsaren. Genom att använda detta tillägg kan du fatta beslut om dina aktiviteter baserat på denna information.
För att installera det i Edge, hitta "Tillägg"-panelen via "tre prickar"-menyn längst upp till höger i webbläsaren. Välj "Load Unpacked" och ladda det nya tillägget. När du blir ombedd, öppna "dist"-mappen så laddas tillägget. För att använda det behöver du en API-nyckel för CO2 Signal API ([få en här via e-post](https://www.co2signal.com/) - ange din e-post i rutan på sidan) och en [kod för din region](http://api.electricitymap.org/v3/zones) som stöds av [Electricity Map](https://www.electricitymap.org/map) (för Boston, till exempel, använd 'US-NEISO').
När du har angett API-nyckeln och regionen i tilläggets gränssnitt, kommer en färgad prick att visas i webbläsarens tilläggsfält. Denna prick ändrar färg baserat på energiförbrukningen i ditt område och hjälper dig att avgöra vilka aktiviteter som är lämpliga att utföra beroende på energibehovet. Konceptet med detta "prick"-system inspirerades av [Energy Lollipop extension](https://energylollipop.com/) för utsläpp i Kalifornien.
Använd API:n för CO2-signal från tmrow för att övervaka elförbrukning och skapa ett webbläsartillägg som varnar dig om hur tung elförbrukningen är i din region. Genom att använda detta tillägg kan du fatta mer informerade beslut om dina aktiviteter baserat på denna information.
## Kom igång här
@ -31,7 +31,7 @@ npm run build
För att installera i Edge, använd menyn med 'tre punkter' i det övre högra hörnet av webbläsaren för att hitta panelen Tillägg. Därifrån väljer du 'Ladda uppackat' för att ladda det nya tillägget. Öppna mappen 'dist' när du blir ombedd, och tillägget kommer att laddas. För att använda det behöver du en API-nyckel för CO2-signalens API ([skaffa en här via e-post](https://www.co2signal.com/) - ange din e-post i rutan på den här sidan) och [koden för din region](http://api.electricitymap.org/v3/zones) som motsvarar [Electricity Map](https://www.electricitymap.org/map) (i Boston, till exempel, använder jag 'US-NEISO').
När API-nyckeln och regionen har angetts i tilläggets gränssnitt, kommer en färgad punkt i webbläsarens tilläggsfält att ändras för att återspegla din regions energiförbrukning och ge dig vägledning om vilka energikrävande aktiviteter som är lämpliga att utföra. Konceptet bakom detta 'punkt'-system inspirerades av [Energy Lollipop-webbläsartillägget](https://energylollipop.com/) för Kaliforniens utsläpp.
Använd tmrow:s C02 Signal API för att spåra elförbrukning och bygg en webbläsartillägg så att du kan få en påminnelse direkt i din webbläsare om hur tung elförbrukningen är i din region. Att använda detta tillägg ad hoc hjälper dig att fatta beslut om dina aktiviteter baserat på denna information.
För att installera på Edge, använd menyn med de 'tre prickarna' i det övre högra hörnet av webbläsaren för att hitta panelen för Tillägg. Därifrån väljer du 'Ladda inpackat' för att ladda ett nytt tillägg. Öppna mappen 'dist' när du blir ombedd, så laddas tillägget. För att använda det behöver du en API-nyckel för CO2 Signal:s API ([skaffa en här via e-post](https://www.co2signal.com/) - ange din e-postadress i rutan på denna sida) och koden för din region ([hitta den här](http://api.electricitymap.org/v3/zones)) som motsvarar [Electricity Map](https://www.electricitymap.org/map) (i Boston, till exempel, använder jag 'US-NEISO').
När API-nyckeln och regionen har matats in i tilläggets gränssnitt, bör den färgade pricken i webbläsartilläggsfältet ändras för att återspegla din regions energiförbrukning och ge dig en indikation på vilka energikrävande aktiviteter som är lämpliga att utföra. Konceptet bakom detta 'prick'-system fick jag från [Energy Lollipop-tillägget](https://energylollipop.com/) för utsläpp i Kalifornien.
> Bild från [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
För att rita på canvas-elementet följer du samma trestegsprocess som utgör grunden för all canvas-grafik. När du väl har gjort detta några gånger blir det andra natur:
@ -323,11 +323,11 @@ Du ska bygga en webbsida med ett Canvas-element. Det ska visa en svart skärm `1
- **Poängsystem**: Varje förstört fiendeskepp ger 100 poäng (runda siffror är lättare för spelare att räkna mental). Poängen visas i nedre vänstra hörnet.
- **Livräknare**: Din hjälte börjar med tre liv – en standard satt av tidiga arkadspel för att balansera utmaning och spelbarhet. Varje kollision med en fiende kostar ett liv. Vi visar återstående liv nere till höger med skeppsikoner .
- **Livräknare**: Din hjälte börjar med tre liv – en standard satt av tidiga arkadspel för att balansera utmaning och spelbarhet. Varje kollision med en fiende kostar ett liv. Vi visar återstående liv nere till höger med skeppsikoner .
Användningen av `history.pushState` skapar nya poster i webbläsarens navigationshistorik. Du kan kontrollera detta genom att hålla inne *tillbaka-knappen* i din webbläsare, den bör visa något liknande:
Om du klickar på tillbaka-knappen några gånger kommer du se att den aktuella URL:en ändras och historiken uppdateras, men samma template fortsätter att visas.
@ -292,7 +292,7 @@ Först, låt oss se vad som händer med grundläggande formulärinlämning:
2. Observera ändringarna i webbläsarens adressfält
3. Lägg märke till hur sidan laddas om och data visas i URL:en
### Jämförelse av HTTP-metoder
@ -346,7 +346,7 @@ Låt oss konfigurera ditt registreringsformulär för att kommunicera korrekt me
2. **Klicka** på "Skapa Konto"-knappen
3. **Observera** serverns svar i din webbläsare
**Det du bör se:**
- **Webbläsaren omdirigerar** till API-slutpunkts-URL:en
@ -609,7 +609,7 @@ async function register() {
3. **Klicka** på "Create Account"
4. **Observera** konsolmeddelanden och användarfeedback
**Vad du bör se:**
- **Laddningstillstånd** visas på skicka-knappen
@ -783,7 +783,7 @@ Låt oss förfina ditt registreringsformulär med robust validering som erbjuder
3. **Försök** använda specialtecken i användarnamnsfältet
4. **Fyll i** ett negativt saldo
@ -187,7 +187,7 @@ Som Titanics delade design som verkade robust förrän flera fack samtidigt öve
Istället för att jaga våra egna svansar ska vi skapa ett **centraliserat tillståndshanteringssystem**. Tänk på det som att ha en riktigt organiserad person som har hand om allt det viktiga:
```mermaid
flowchart TD
@ -798,7 +798,7 @@ Denna utmaning hjälper dig att tänka som en professionell utvecklare som beakt
Här är ett exempelresultat efter att uppgiften är genomförd:
@ -112,7 +112,7 @@ Se [serverns API-dokumentation](../api/README.md) för:
**Förväntat resultat:**
Efter att ha slutfört denna uppgift ska din bankapp ha en fullt fungerande funktion för "Lägg till transaktion" som ser professionell ut och fungerar smidigt:
I det här projektet kommer du att lära dig hur man bygger en fiktiv bank. Dessa lektioner innehåller instruktioner om hur man utformar en webbapp och skapar rutter, bygger formulär, hanterar tillstånd och hämtar data från ett API som tillhandahåller bankens data.
@ -78,7 +78,7 @@ Eftersom VSCode.dev kräver minst en fil för att öppna ett repository, kommer
4. **Skriv** ett commit-meddelande: "Lägg till initial HTML-struktur"
5. **Klicka** på "Commit new file" för att spara dina ändringar
**Det här uppnår den initiala inställningen:**
- **Etablerar** korrekt HTML5-dokumentstruktur med semantiska element
@ -104,7 +104,7 @@ Nu när grunden för ditt repository är etablerad, låt oss gå över till VSCo
✅ **Indikator för framgång**: Du bör se dina projektfiler i Explorer-sidofältet och `index.html` tillgänglig för redigering i huvudredigeringsområdet.
**Vad du kommer att se i gränssnittet:**
- **Explorer-sidofält**: **Visar** dina repository-filer och mappstruktur
@ -448,7 +448,7 @@ Tillägg förbättrar din utvecklingsupplevelse genom att tillhandahålla live-f
**Omedelbara resultat efter installation:**
När CodeSwing är installerat kommer du att se en live-förhandsgranskning av din CV-webbplats visas i editorn. Detta låter dig se exakt hur din webbplats ser ut medan du gör ändringar.
**Förstå det förbättrade gränssnittet:**
- **Delad vy**: **Visar** din kod på ena sidan och live-förhandsgranskning på den andra
## 🗺️ Din läranderesa genom AI-applikationsutveckling
@ -189,7 +189,7 @@ mindmap
```
**Kärnprincip**: AI-applikationsutveckling kombinerar traditionella webbutvecklingsfärdigheter med AI-tjänsteintegration för att skapa intelligenta applikationer som känns naturliga och lyhörda för användare.
**Det som gör playgrounden så användbar:**
- **Testa** olika AI-modeller som GPT-4o-mini, Claude och fler (alla gratis!)
@ -199,7 +199,7 @@ mindmap
När du experimenterat klart klickar du bara på fliken "Code" och väljer programmeringsspråk för att få implementeringskoden du behöver.
## Sätta upp Python-backend-integration
@ -2352,14 +2352,14 @@ Vill du prova detta projekt i en molnbaserad utvecklingsmiljö? GitHub Codespace
- **Navigera** till [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Klicka** på "Use this template" uppe till höger (se till att du är inloggad på GitHub)
**Steg 2: Starta Codespaces**
- **Öppna** ditt nyss skapade repository
- **Klicka** på gröna "Code"-knappen och välj "Codespaces"
- **Välj** "Create codespace on main" för att starta din utvecklingsmiljö
Varje lektion inkluderar en uppgift att slutföra, en kunskapskontroll och en utmaning för att guida dig i att lära dig ämnen som:
@ -99,7 +99,7 @@ Följ dessa steg:
I din kopia av detta arkiv som du skapade, klicka på **Code**-knappen och välj **Open with Codespaces**. Detta skapar en ny Codespace för dig att arbeta i.
@ -17,7 +17,7 @@ Tazama, naelewa kabisa kama programu inakuletea hofu sasa hivi. Nilipoanza, nili
Leo, tutaangalia zana za ajabu zinazofanya maendeleo ya wavuti wa kisasa siyo tu kuwawezekana, bali kuwa kitu cha kuvutia sana. Ninazungumzia wahariri, vivinjari na njia za kazi sawa na zile zinazotumika na waendelezaji wa Netflix, Spotify, na studio yako ya programu unayopenda kila siku. Na hapa ni sehemu itakayokupeleka kucheza kwa furaha: wengi wa zana hizi za kitaalamu za kiwango cha viwanda ni bure kabisa!
@ -17,7 +17,7 @@ Najua linaweza kuhisi mengi mwanzoni – hata mimi nilikumbuka nikitazama ukuras
Tutachukua safari hii pamoja, hatua kwa hatua. Hakuna haraka, hakuna msongo – ni wewe, mimi, na zana mzuri zitakazokufanya marafiki wako wapya!
> Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -605,7 +605,7 @@ Kwanza, tukutafute hifadhidata (au **repo**) kwenye GitHub inayokuvutia na unayo
✅ Njia nzuri ya kupata repozitori zinazofaa wanaoanza ni [kutafuta kwa alama 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
> Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, au HyperText Markup Language, ni msingi wa kila tovuti uliyoitembelea. Fikiria HTML kama mfupa wa mifupa unaotoa muundo kwa kurasa za wavuti – inaeleza wapi maudhui yanapaswa kuwekwa, jinsi yanavyopangwa, na kila kipande kinachowakilisha nini. Ingawa CSS baadaye itafunika HTML yako kwa rangi na mpangilio, na JavaScript itakuleta uhai kupitia mwingiliano, HTML hutoa muundo muhimu unaofanya kila kitu kingine kuwa chawezekana.
@ -86,7 +86,7 @@ Utaunda folda maalum kwa ajili ya mradi wako wa terrarium na kuongeza faili yako
4. Katika dirisha la Explorer, bofya ikoni ya "New File"
5. Panga faili yako `index.html`
**Chaguo 2: Kutumia Amri za Terminal**
```bash
@ -236,48 +236,48 @@ Sasa ongeza picha za mimea zilizopangwa katika safu mbili kati ya lebo zako za `
> Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac)
Kumbuka jinsi terrarium yako ya HTML ilivyoonekana ya kawaida? CSS ndio tunapobadilisha muundo huo rahisi kuwa kitu kinachovutia kwa macho.
@ -202,7 +202,7 @@ body {
Fungua zana za maendeleo za kivinjari chako (F12), nenda kwenye tab ya Elements, na kagua kipengele chako cha `<h1>`. Utaona kinarithi familia ya fonti kutoka kwa mwili:
✅ **Jaribu**: Jaribu kuweka mali nyingine zinazorithiwa kwenye `<body>` kama `color`, `line-height`, au `text-align`. Nini kinakutokea kwa kichwa chako na vipengele vingine?
@ -332,7 +332,7 @@ Katika terrarium yetu, kila mmea unahitaji mitindo sawa lakini pia unahitaji upa
**Hii ndiyo muundo wa HTML kwa kila mmea:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.sw.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/sw/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ Je, uko tayari kuboresha terrarium yako kwa mwangaza wa kioo halisi? Mbinu hii i
Utaunda mwanga mdogo unaoiga jinsi mwanga unavyoakisi uso wa kioo. Mbinu hii ni sawa na jinsi wachoraji wa Renaissance kama Jan van Eyck walivyotumia mwanga na mng'ao kuifanya kioo chenye mchoro kuonekana cha tatu-kidimensioni. Haya ndio unayolenga:
> Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac)
Karibu katika mojawapo ya sehemu zinazovutia zaidi za maendeleo ya wavuti - kufanya mambo kuwa ya kuingiliana! Mfano wa Kitu cha Nyaraka (DOM) ni kama daraja kati ya HTML yako na JavaScript, na leo tutautumia kuleta terrarium yako kuishi. Wakati Tim Berners-Lee aliuumba kivinjari cha kwanza cha wavuti, aliona wavuti ambako nyaraka zinaweza kuwa za mabadiliko na kuingiliana - DOM hufanikisha maono hayo.
@ -102,7 +102,7 @@ flowchart TD
style P fill:#ffebee
style Q fill:#ffebee
```
> Uwawakilishi wa DOM na alama za HTML zinazomrejelea. Kutoka kwa [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **Kuelewa Mifungo**: Mifungo ni mada muhimu katika JavaScript, na wengi wa watengenezaji huwatumia kwa miaka kabla ya kuelewa pande zote za nadharia. Leo, tutazingatia matumizi ya vitendo - utaona mifungo ikitokea asili unapotengeneza vipengele vyetu vinavyoingiliana. Uelewa utaendelea unapoona jinsi zinavyotatua matatizo halisi.
> Uwawakilishi wa DOM na alama za HTML zinazomrejelea. Kutoka kwa [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ Sasa jaribu terrarium yako ya kijamii! Fungua faili yako ya `index.html` kwenye
- **Msaada wa kifaa chochote**: Hufanya kazi kwenye kompyuta na simu
- **Uelewa wa utendaji**: Hakuna uvujaji wa kumbukumbu au mahesabu ya ziada
Mradi mdogo wa kuburudisha akili kwa kuburuta na kudondosha. Kwa kutumia HTML, JS, na CSS kidogo, unaweza kujenga kiolesura cha wavuti, kukipamba, na kuongeza mwingiliano.
> Baadhi ya vivinjari vya awali, kupitia [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Jinsi Vivinjari Vinavyosindika Maudhui ya Wavuti
@ -194,7 +194,7 @@ quadrantChart
Kuelewa mchakato wa usakinishaji wa kiendelezi hukusaidia kutarajia uzoaji wa mtumiaji wakati watu wanaposakinisha kiendelezi chako. Mchakato wa usakinishaji umeboreshwa kwa vivinjari vya kisasa, na tofauti ndogo ndogo katika muundo wa interface.
> **Muhimu**: Hakikisha umeamilisha mode ya mwendelezaji na kuruhusu viendelezi kutoka maduka mengine wakati unajaribu viendelezi vyako binafsi.
@ -308,10 +308,10 @@ Hii inafuata kanuni ya kufunua hatua kwa hatua inayotumika katika ubunifu wa int
### Muhtasari wa Maoni ya Kiendelezi
**Muonekano wa Usanidi** - usanidi kwa mtumiaji mara ya kwanza:
**Muonekano wa Matokeo** - maonyesho ya data ya athari ya kaboni:
> ⚠️ **Tafakari za Usalama:** Katika programu za uzalishaji, kuhifadhi funguo za API ndani ya LocalStorage kuna hatari za usalama kwa sababu JavaScript inaweza kufikia data hii. Kwa madhumuni ya kujifunza, njia hii inafanya kazi vizuri, lakini programu halisi zinapaswa kutumia hifadhi salama upande wa seva kwa nyaraka nyeti.
@ -123,7 +123,7 @@ Ili kufungua Zana za Wavumbuzi katika Edge, bonyeza vidoti vitatu hapo juu kulia
Tujaribu hili. Fungua tovuti (Microsoft.com inafanya kazi vizuri) na bonyeza kitufe cha 'Record'. Sasa refreshing ukurasa na angalia profaaili ikichukua kila kinachoendelea. Ukimaliza kurekodi, utaona maelezo ya kina ya jinsi kivinjari kinavyofanya 'scripts', 'renders', na 'paints' tovuti. Inanikumbusha jinsi kituo cha udhibiti cha misheni kinavyofuata kila mfumo wakati wa uzinduzi wa roketi - unapata data halisi kwa wakati halisi kuhusu kinachotokea na lini.
✅ [Hati ya Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) ina maelezo mengi zaidi ikiwa unataka kifahamike zaidi
@ -133,11 +133,11 @@ Chagua vipengele vya ratiba ya profaili kupanua matukio yanayotokea wakati ukura
Pata picha ya utendaji wa ukurasa wako kwa kuchagua sehemu ya ratiba ya profaili na kuangalia dirisha la muhtasari:
✅ Jifunze profaaili yako! Fungua zana za msanidi kwenye tovuti hii na ona kama kuna vikwazo yoyote. Nini ni mali ambayo inapakia polepole zaidi? Haraka zaidi?
Kwa kutumia API ya C02 Signal ya tmrow kufuatilia matumizi ya umeme, tengeneza kiongezo cha kivinjari ili uweze kuwa na kikumbusho moja kwa moja kwenye kivinjari chako kuhusu uzito wa matumizi ya umeme katika eneo lako. Kutumia kiongezo hiki kwa njia ya ad hoc kutakusaidia kufanya maamuzi kuhusu shughuli zako kulingana na taarifa hizi.
## Kuanza
@ -31,7 +31,7 @@ npm run build
Ili kusakinisha kwenye Edge, tumia menyu ya 'alama tatu' kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya Viongezo. Kutoka hapo, chagua 'Load Unpacked' ili kupakia kiongezo kipya. Fungua folda ya 'dist' unapoulizwa, na kiongezo kitapakiwa. Ili kutumia, utahitaji API key ya API ya CO2 Signal ([pata moja hapa kupitia barua pepe](https://www.co2signal.com/) - weka barua pepe yako kwenye kisanduku kwenye ukurasa huu) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [Ramani ya Umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, mimi hutumia 'US-NEISO').
Baada ya API key na eneo kuingizwa kwenye kiolesura cha kiongezo, nukta ya rangi kwenye upau wa viongezo vya kivinjari inapaswa kubadilika ili kuonyesha matumizi ya nishati ya eneo lako na kukupa mwongozo kuhusu shughuli zinazotumia nishati nyingi ambazo zinafaa kufanya. Wazo nyuma ya mfumo huu wa 'nukta' lilitolewa kwangu na [kiongezo cha Energy Lollipop](https://energylollipop.com/) kwa uzalishaji wa California.
Kwa kutumia API ya CO2 Signal ya tmrow kufuatilia matumizi ya umeme, tengeneza upanuzi wa kivinjari ili uweze kuwa na kikumbusho moja kwa moja kwenye kivinjari chako kuhusu matumizi ya umeme katika eneo lako. Kutumia upanuzi huu wa ad hoc kutakusaidia kufanya maamuzi kuhusu shughuli zako kwa kuzingatia taarifa hii.
## Kuanza
@ -31,7 +31,7 @@ npm run build
Ili kusakinisha kwenye Edge, tumia menyu ya 'alama tatu' kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya Viongezi. Kutoka hapo, chagua 'Pakia bila kufungasha' ili kupakia upanuzi mpya. Fungua folda ya 'dist' unapoulizwa, na upanuzi utapakiwa. Ili kuitumia, utahitaji ufunguo wa API kwa API ya CO2 Signal ([pata hapa kwa barua pepe](https://www.co2signal.com/) - ingiza barua pepe yako kwenye kisanduku cha ukurasa huu) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [Ramani ya Umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, ninatumia 'US-NEISO').
Baada ya kuingiza ufunguo wa API na eneo kwenye kiolesura cha upanuzi, nukta ya rangi kwenye upau wa upanuzi wa kivinjari inapaswa kubadilika ili kuonyesha matumizi ya nishati ya eneo lako na kukupa kiashiria kuhusu shughuli za matumizi makubwa ya nishati ambazo zinaweza kufaa kwako. Wazo nyuma ya mfumo huu wa "nukta" nililipata kutoka kwa [upanuzi wa Energy Lollipop](https://energylollipop.com/) kwa uzalishaji wa California.
Kwa kutumia API ya C02 Signal kutoka tmrow kufuatilia matumizi ya umeme, tengeneza ugani wa kivinjari ili uweze kupata ukumbusho moja kwa moja kwenye kivinjari chako kuhusu matumizi ya umeme katika eneo lako. Kutumia ugani huu wa dharura kutakusaidia kufanya maamuzi kuhusu shughuli zako kwa kuzingatia taarifa hizi.
## Kuanza
@ -31,7 +31,7 @@ npm run build
Ili kusakinisha kwenye Edge, tumia menyu ya 'alama tatu' kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya Ugani. Kutoka hapo, chagua 'Pakia ugani usiobanwa' ili kupakia ugani mpya. Fungua folda ya 'dist' unapoulizwa, na ugani utapakiwa. Ili kuitumia, utahitaji ufunguo wa API kwa API ya CO2 Signal ([pata moja hapa kwa barua pepe](https://www.co2signal.com/) - ingiza barua pepe yako kwenye kisanduku kwenye ukurasa huu) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [Ramani ya Umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, mimi hutumia 'US-NEISO').
Baada ya kuingiza ufunguo wa API na eneo kwenye kiolesura cha ugani, nukta ya rangi kwenye upau wa ugani wa kivinjari inapaswa kubadilika ili kuonyesha matumizi ya nishati ya eneo lako na kukupa kiashiria kuhusu shughuli zinazotumia nishati ambazo zinafaa kufanywa. Wazo nyuma ya mfumo huu wa 'nukta' lilinipa msukumo kutoka kwa [ugani wa Energy Lollipop](https://energylollipop.com/) kwa uzalishaji wa hewa chafu huko California.
Kutumia API ya CO2 Signal ya tmrow kufuatilia matumizi ya umeme, tunajenga kiongezo cha kivinjari ili kukukumbusha jinsi matumizi ya umeme katika eneo lako yalivyo mazito kupitia kivinjari chako. Kutumia kiongezo hiki kwa muda mfupi kutakusaidia kufanya maamuzi kuhusu shughuli zako kulingana na taarifa hii.
## Kuanza
@ -31,7 +31,7 @@ npm run build
Ili kusakinisha kwenye Edge, tumia menyu ya 'nukta tatu' kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya viongezo. Kutoka hapo, chagua 'Load unpacked' ili kupakia kiongezo kipya. Fungua folda ya 'dist' kwenye prompt, na kiongezo kitapakiwa. Ili kutumia, utahitaji API key ya CO2 Signal ([ipate kupitia barua pepe hapa](https://www.co2snal.com/) - weka barua pepe yako kwenye kisanduku cha ukurasa huo) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) kutoka [ramani ya umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, ninatumia 'US-NEISO').
Baada ya API key na msimbo wa eneo kuingizwa kwenye kiolesura cha kiongezo, nukta ya rangi kwenye bar ya viongezo vya kivinjari inapaswa kubadilika ili kuonyesha matumizi ya nishati ya eneo lako na kukupa kiashiria cha shughuli nzito za nishati zinazofaa kwa utendaji wako. Wazo la mfumo huu wa 'nukta' lilinipatia na [kiongezo cha Energy Lollipop](https://energylollipop.com/) kwa uzalishaji wa California.
Tutatumia API ya Signal CO2 kutoka tmrow kufuatilia matumizi ya umeme ili kuunda ugani wa kivinjari, hivyo kuwa na ukumbusho moja kwa moja kwenye kivinjari chako kuhusu jinsi matumizi ya umeme yalivyo mazito katika eneo lako. Kutumia ugani huu maalum kutasaidia kutathmini shughuli zako kulingana na taarifa hizi.
## Kuanza
@ -31,7 +31,7 @@ npm run build
Ili kusakinisha kwenye Edge, tumia menyu ya "alama tatu" kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya Ugani. Ikiwa haijawashwa tayari, washa Hali ya Msanidi Programu (chini kushoto). Chagua "Pakia isiyoshinikizwa" ili kupakia ugani mpya. Fungua folda ya "dist" kwenye dirisha la maelekezo, na ugani utawekwa. Ili kuitumia, utahitaji ufunguo wa API kwa API ya CO2 Signal (unaweza [kuupata hapa kupitia barua pepe](https://www.co2signal.com/) - weka barua pepe yako kwenye kisanduku kwenye ukurasa huu) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [ramani ya umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, "US-NEISO").
Mara tu ufunguo wa API na eneo vimeingizwa kwenye kiolesura cha ugani, nukta ya rangi kwenye upau wa ugani wa kivinjari inapaswa kubadilika ili kuonyesha matumizi ya nishati ya eneo hilo na kutoa mwongozo kuhusu shughuli za matumizi makubwa ya nishati zinazofaa kufanywa. Wazo la mfumo huu wa "nukta" lilitolewa na [ugani wa Energy Lollipop](https://energylollipop.com/) kwa uzalishaji wa California.
Tunajenga kiongezo cha kivinjari kinachotumia API ya CO2 Signal ya tmrow ili kufuatilia matumizi ya nishati katika eneo lako. Kiongezo hiki kitaonyesha ukumbusho kwenye kivinjari chako kuhusu kiwango cha matumizi ya nishati katika eneo lako. Kwa kutumia kiongezo hiki kwa njia ya ad hoc, unaweza kufanya maamuzi kuhusu shughuli zako kulingana na taarifa hii.
## Kuanza
@ -31,7 +31,7 @@ npm run build
Ili kusakinisha kwenye Edge, tafuta paneli ya "Viongezo" kutoka kwenye menyu ya "alama tatu" kwenye kona ya juu kulia ya kivinjari. Kutoka hapo, chagua "Load Unpacked" na upakie kiongezo kipya. Fungua folda ya "dist" unapoulizwa, na kiongezo kitawekwa. Ili kutumia, unahitaji API key ya CO2 Signal ([pata moja hapa kupitia barua pepe](https://www.co2signal.com/) - ingiza barua pepe yako kwenye kisanduku cha ukurasa huo) na [code ya eneo lako](http://api.electricitymap.org/v3/zones) inayolingana na [Electricity Map](https://www.electricitymap.org/map) (kwa mfano, Boston hutumia 'US-NEISO').
Baada ya kuingiza API key na eneo kwenye kiolesura cha kiongezo, nukta yenye rangi itakayoonekana kwenye upau wa viongezo vya kivinjari chako itabadilika ili kuonyesha kiwango cha matumizi ya nishati katika eneo lako. Hii itakusaidia kuamua ni shughuli gani zinazohitaji nishati zinafaa kufanywa. Wazo la mfumo huu wa "nukta" lilitokana na [Energy Lollipop extension](https://energylollipop.com/) kwa ajili ya uzalishaji wa California.
Kwa kutumia API ya Ishara ya CO2 ya tmrow kufuatilia matumizi ya umeme, tengeneza kiendelezi cha kivinjari ili uweze kupokea arifa kwenye kivinjari chako kuhusu uzito wa matumizi ya umeme katika eneo lako. Kutumia kiendelezi hiki hasa kutakusaidia kufanya maamuzi kuhusu shughuli zako kulingana na taarifa hizi.
## Kuanza Hapa
@ -31,7 +31,7 @@ npm run build
Ili kusakinisha kwenye Edge, tumia menyu ya 'alama tatu' kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya Viendelezi. Kutoka hapo, chagua 'Load Unpacked' ili kupakia kiendelezi kipya. Fungua folda ya 'dist' unapoulizwa, na kiendelezi kitapakiwa. Ili kutumia, utahitaji ufunguo wa API kwa API ya Ishara ya CO2 ([pata moja hapa kupitia barua pepe](https://www.co2signal.com/) - weka barua pepe yako kwenye kisanduku kwenye ukurasa huu) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [Ramani ya Umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, mimi hutumia 'US-NEISO').
Baada ya ufunguo wa API na eneo kuingizwa kwenye kiolesura cha kiendelezi, nukta ya rangi kwenye upau wa kiendelezi cha kivinjari itabadilika ili kuonyesha matumizi ya nishati ya eneo lako na kukupa mapendekezo kuhusu shughuli nzito zinazofaa kufanya. Wazo la mfumo huu wa 'nukta' lilinipa msukumo kutoka kwa [kiendelezi cha kivinjari cha Energy Lollipop](https://energylollipop.com/) kwa uzalishaji wa California.
Kwa kutumia API ya C02 Signal ya tmrow kufuatilia matumizi ya umeme, tengeneza kiongezo cha kivinjari ili uweze kuwa na kikumbusho moja kwa moja kwenye kivinjari chako kuhusu uzito wa matumizi ya umeme katika eneo lako. Kutumia kiongezo hiki kwa njia ya ad hoc kutakusaidia kufanya maamuzi kuhusu shughuli zako kulingana na taarifa hizi.
## Kuanza
@ -31,7 +31,7 @@ npm run build
Ili kusakinisha kwenye Edge, tumia menyu ya 'alama tatu' kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya Viongezo. Kutoka hapo, chagua 'Pakia Bila Kufungasha' ili kupakia kiongezo kipya. Fungua folda ya 'dist' unapoulizwa na kiongezo kitapakiwa. Ili kutumia, utahitaji ufunguo wa API kwa API ya CO2 Signal ([pata moja hapa kupitia barua pepe](https://www.co2signal.com/) - weka barua pepe yako kwenye kisanduku kwenye ukurasa huu) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [Ramani ya Umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, natumia 'US-NEISO').
Baada ya kuingiza ufunguo wa API na eneo kwenye kiolesura cha kiongezo, nukta ya rangi kwenye upau wa viongezo vya kivinjari inapaswa kubadilika ili kuonyesha matumizi ya nishati ya eneo lako na kukupa mwongozo kuhusu shughuli zinazotumia nishati nyingi ambazo zinafaa kwako kufanya. Wazo nyuma ya mfumo huu wa 'nukta' lilitolewa kwangu na [kiongezo cha Energy Lollipop](https://energylollipop.com/) kwa utoaji wa hewa chafu wa California.
> Picha kutoka [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Ili kuchora kwenye kipengele cha canvas, utafuata mchakato wa hatua tatu unaounda msingi wa michoro yote ya canvas. Mara unavyofanya mara kadhaa, hutakuwa jambo gumu tena:
@ -323,11 +323,11 @@ Utajenga ukurasa wa wavuti wenye kipengele cha Canvas. Inapaswa kuonyesha skrini
- Meli ya shujaa
- 5*5 monster
### Hatua zilizopendekezwa kuanza maendeleo
@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
Matokeo yaliyokamilika yanapaswa kuonekana kama ifuatavyo:
- **Mfumo wa alama**: Kila meli ya adui iliyoharibiwa huleta pointi 100 (nambari za mduara ni rahisi kwa wachezaji kuhesabu kichwani). Alama zinaonyeshwa upande wa chini kushoto.
- **Kihesabu maisha**: Shujaa wako anaanza na maisha matatu - kiwango kilichowekwa na michezo ya awali ya arcade kulingana na changamoto na urahisi wa kucheza. Kila mgongano na adui hukupotezea maisha moja. Tutaonyesha maisha yaliyobaki upande wa chini kulia kwa kutumia ikoni za meli .
- **Kihesabu maisha**: Shujaa wako anaanza na maisha matatu - kiwango kilichowekwa na michezo ya awali ya arcade kulingana na changamoto na urahisi wa kucheza. Kila mgongano na adui hukupotezea maisha moja. Tutaonyesha maisha yaliyobaki upande wa chini kulia kwa kutumia ikoni za meli .
Kutumia `history.pushState` huunda rekodi mpya kwenye historia ya uelekezaji ya kivinjari. Unaweza kuona hili kwa kushikilia *kitufe cha nyuma* cha kivinjari chako, kinapaswa kuonyesha kitu kama hiki:
Ikiwa utajaribu kubofya kitufe cha nyuma mara kadhaa, utaona URL ya sasa inabadilika na historia inasasishwa, lakini template ile ile inaendelea kuonyeshwa.
@ -292,7 +292,7 @@ Kwanza, tazama kinachotokea kwa uwasilishaji wa fomu wa kawaida:
2. Angalia mabadiliko kwenye upau wa anwani wa kivinjari chako
3. Angalia jinsi ukurasa unavyojazwa upya na data kuonekana kwenye URL
### Mlinganisho wa Mbinu za HTTP
@ -346,7 +346,7 @@ Tuweke usajili wako wa fomu kuwasiliana ipasavyo na API ya nyuma kwa kutumia mbi
2. **Bofya** kitufe cha "Create Account"
3. **Angalia** majibu ya seva katika kivinjari chako
**Unachotakiwa kuona:**
- **Kivinjari kinageuza** kwenye URL ya nukta ya API
@ -609,7 +609,7 @@ async function register() {
3. **Bonyeza** "Create Account"
4. **Tazama** ujumbe wa koni na mrejesho wa mtumiaji
**Utaona nini:**
- **Hali ya kupakia** inaonekana kwenye kitufe cha kuwasilisha
@ -783,7 +783,7 @@ Tuimarishie fomu yako ya usajili na uthibitishaji imara ambao hutoa uzoefu bora
3. **Jaribu** herufi za kipekee kwenye sehemu ya jina la mtumiaji
4. **Weka** kiasi chenye salio hasi
**Utakayoyaona:**
- **Kivinjari kinaonyesha** ujumbe wa uthibitishaji wa wenyeji
@ -943,7 +943,7 @@ Onyesha ujumbe wa kosa katika HTML ikiwa mtumiaji tayari yupo.
Hapa kuna mfano wa jinsi ukurasa wa kuingia unaweza kuonekana baada ya kubadilishwa mitindo kidogo:
@ -187,7 +187,7 @@ Kama muundo wa sehemu za Titanic ulioonekana imara hadi sehemu nyingi kuzama kwa
Badala ya kuzunguka kwa kutafuta mwishowe, tutaunda **mfumo wa usimamizi wa hali uliolengwa katikati**. Fikiria kama mtu mmoja aliyepangwa vizuri anayehudumia vitu vyote muhimu:
```mermaid
flowchart TD
@ -798,7 +798,7 @@ Changamoto hii itakusaidia kufikiri kama mtaalamu anayeangalia uzoefu wa mtumiaj
Huu ni mfano wa matokeo baada ya kukamilisha kazi:
@ -112,7 +112,7 @@ Rejelea [nyaraka za API ya seva](../api/README.md) kwa:
**Matokeo Yanayotarajiwa:**
Baada ya kukamilisha kazi hii, programu yako ya benki inapaswa kuwa na kipengele kamili cha "Ongeza Muamala" ambacho kinaonekana na kinafanya kazi kitaalamu:
Katika mradi huu, utajifunza jinsi ya kujenga benki ya kufikirika. Masomo haya yanajumuisha maelekezo ya jinsi ya kupanga programu ya wavuti na kutoa njia, kujenga fomu, kusimamia hali (state), na kupata data kutoka kwa API ambayo unaweza kutumia kupata data ya benki.
@ -78,7 +78,7 @@ Kwa kuwa VSCode.dev inahitaji angalau faili moja kufungua hifadhi, tutaunda fail
4. **Andika** ujumbe wa kujitolea: "Ongeza muundo wa awali wa HTML"
5. **Bonyeza** "Commit new file" ili kuhifadhi mabadiliko yako
**Hiki ndicho uanzishaji huu wa awali unakamilisha:**
- **Unaunda** muundo sahihi wa hati ya HTML5 na vipengele vya kimantiki
@ -104,7 +104,7 @@ Sasa kwa kuwa msingi wa hifadhi yako umeanzishwa, hebu tubadilishe kwa VSCode.de
✅ **Kiashiria cha mafanikio**: Unapaswa kuona faili za mradi wako kwenye upau wa kando wa Explorer na `index.html` ikipatikana kwa kuhariri kwenye eneo kuu la mhariri.
**Unachokiona kwenye kiolesura:**
- **Upau wa kando wa Explorer**: **Unaonyesha** faili za hifadhi yako na muundo wa folda
@ -448,7 +448,7 @@ Viendelezi vinaboresha uzoefu wako wa maendeleo kwa kutoa uwezo wa hakikisho la
**Matokeo ya haraka baada ya usakinishaji:**
Mara tu CodeSwing itakaposakinishwa, utaona hakikisho la moja kwa moja la tovuti yako ya resume likijitokeza kwenye mhariri. Hii inakuwezesha kuona jinsi tovuti yako inavyoonekana unavyofanya mabadiliko.
**Kuelewa kiolesura kilichoboreshwa:**
- **Muonekano wa mgawanyiko**: **Unaonyesha** msimbo wako upande mmoja na hakikisho la moja kwa moja upande mwingine
Hivi ndivyo mradi wako utakavyoonekana umemalizika:
## 🗺️ Safari Yako ya Kujifunza Kupitia Maendeleo ya Programu za AI
@ -189,7 +189,7 @@ mindmap
```
**Kanuni Msingi**: Maendeleo ya programu za AI yanachanganya ujuzi wa maendeleo ya wavuti wa kawaida na muunganisho wa huduma za AI, kuunda programu za akili zinazohisi kuwa za asili na zinazojibu watumiaji vizuri.
**Hapa ni kinachofanya playground kuwa muhimu:**
- **Jaribu** mifano tofauti ya AI kama GPT-4o-mini, Claude, na mingine (zote ni bure!)
@ -199,7 +199,7 @@ mindmap
Baada ya kucheza kidogo, bonyeza kichupo cha "Code" na chagua lugha yako ya programu kupata msimbo wa utekelezaji utakao hitajiwa.
## Kuanzisha Muunganisho wa Backend wa Python
@ -2351,14 +2351,14 @@ Unataka kujaribu mradi huu katika mazingira ya maendeleo ya wingu? GitHub Codesp
- **Tembelea** hazina ya [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Bonyeza** "Use this template" juu kulia (hakikisha umeingia kwenye GitHub)
**Hatua 2: Anzisha Codespaces**
- **Fungua** hazina uliyounda hivi karibuni
- **Bonyeza** kitufe cha kijani "Code" na chagua "Codespaces"
- **Chagua** "Create codespace on main" kuanzisha mazingira yako ya maendeleo
Kila somo lina kazi ya kukamilisha, ukaguzi wa maarifa na changamoto ya kukuongoza kujifunza mada kama:
@ -115,7 +115,7 @@ Fuata hatua hizi:
Katika nakala yako ya repositori uliyounda, bonyeza kitufe cha **Code** na chagua **Fungua na Codespaces**. Hii itaunda Codespace mpya ya kufanya kazi ndani yake.
இன்று, நவீன வலைத் தள மேம்பாட்டை சாத்தியமாக்கும் அதிசய கருவிகளை நாம் ஆராயப்போகிறோம். நான் பேசுகிறேன் Netflix, Spotify மற்றும் உங்கள் பிடித்த சினிமா செயலி நிறுவனத்தின் டெவலப்பர்கள் தினமும் பயன்படுத்தும் அதே எடிட்டர்கள், உலாவிகள் மற்றும் வேலை முறைகள் பற்றி. மற்றும் நீங்கள் சந்தோஷமாக டான்ஸ் செய்யப்போகும் பகுதி இது: இந்த தொழில்முறை தர மாதிரி, தொழில்நுட்ப அங்கீகாரம் பெற்ற கருவிகள் பெரும்பாலான பகுதியும் முழுமையாக இலவசம்!
நாம் இந்த பயணத்தை ஒன்றாகச் செய்கிறோம், ஒரு படி ஒருவிதமாக. வேகமடைய வேண்டாம், அழுத்தம் வேண்டாம் – நீ, நான், மற்றும் உன் புதிய நல்ல நண்பர்களாக இருக்கும் சில அற்புதமான கருவிகள்!
✅ 'புதியவர்களுக்கு ஏற்ற' ரெப்போக்களை கண்டுபிடிக்கும் நல்ல வழி [முதல் நல்ல பிரச்சனை குறிச்சொல்லின் மூலம் தேடல்](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/) ஆகும்.
குறியீட்டை நகலெடுக்க பல வழிகள் உள்ளன. ஒன்று, HTTPS, SSH அல்லது GitHub CLI (கமாண்ட் லைன் இன்டர்ஃபெஸ்) பயன்படுத்தி அந்த ரெப்போவின் உள்ளடக்கங்களை "க்ளோன்" செய்யும் முறையாகும்.
> டோம்(மி) இமுரா அவர்களால் உருவாக்கப்பட்ட ஸ்கெட்ச் நோட்
HTML, அல்லது ஹைப்பர் டெக்ஸ்ட் மார்க் அப் லாங்குவேஜ், நீங்கள் besucht செய்த ஒவ்வொரு இணையதளத்தின் அடித்தளம் ஆகும். HTML ஐ வலைப்பக்கங்களுக்கு வடிவமைப்பு வழங்கும் அடித்தளமாக நினைத்துக் கொள்ளுங்கள் – அது உள்ளடக்கம் எங்கே இருக்க வேண்டும், எவ்வாறு ஒழுங்குபடுத்தப்படும் மற்றும் ஒவ்வொரு பகுதியும் என்ன பிரதிபலிக்கும் என்பதைக் குறிப்பிடுகிறது. CSS பிறகு உங்கள் HTML ஐ நிறங்கள் மற்றும் அமைப்புகளுடன் "அழகு பூசும்" போது, மற்றும் JavaScript அதில் இடைக்கால செயல்பாடு கொண்டு வரும்போது, HTML என்பது மற்ற அனைத்துக்கும் அடிப்படையான கட்டமைப்பினை வழங்குகிறது.
@ -86,7 +86,7 @@ HTML குறியீட்டில் இறங்க முன்பு,
4. Explorer பகுதியில், "New File" சின்னத்தை கிளிக் செய்யவும்
5. கோப்பின் பெயரை `index.html` என்க
> ஸ்கெட்ச் நோட் [Tomomi Imura](https://twitter.com/girlie_mac) அவர்களின்
உங்கள் 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.ta.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/ta/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ Agent முறையைப் பயன்படுத்தி கீழ்க
கண்ணாடி மேற்பரப்புகளில் வெளிச்சம் எப்படி பிரதிபலிக்கிறது என்பதை போல மென்மையான வெளிச்சங்களை உருவாக்க வேண்டியிருக்கும். இந்த முறையை ரெனசான்ஸ் ஓவியர்கள் ஜான் வான் ஐக் போன்றோர் படவணக்க கண்ணாடி மூலமான வெளிச்சங்களைக் காட்சிப்படுத்த பயன்படுத்தினர். நீங்கள் நோக்கி செல்ல வேண்டியது இதுதான்:
> ஸ்கெட்ச் நோட் [Tomomi Imura](https://twitter.com/girlie_mac) அவரால்
இணைய விருத்தியின் மிகவும் ஈடுபாட்டுக்குரிய அம்சங்களில் ஒன்றிற்கு வருகை - விஷயங்களை தொடர்புடையதாக மாற்றுதல்! டாக்குமென்ட் ஆப்ஜெக்ட் மோடைல் (DOM) உங்கள் HTML மற்றும் JavaScript இடையேயான பாலம் போன்றது, இன்று நாம் இதைப் பயன்படுத்தி உங்கள் டெராரியம் வாழ் உயிராக மாற்றுவோம். டிம் பெர்னர்ஸ்-லி முதலாம் வலை உலாவியை உருவாக்கிய போது, ஆவணம் இயக்கக்கூடிய மற்றும் தொடர்புடையவையாக இருக்கக்கூடிய இணையத்தை கற்பனை செய்தார் - DOM அந்த கற்பனையை நிகழ்வாக்குகிறது.
@ -102,7 +102,7 @@ flowchart TD
style P fill:#ffebee
style Q fill:#ffebee
```
> DOM மற்றும் அதனை குறிப்பிடும் HTML குறியீட்டின் பிரதியம். [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) அவரின் பணி
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **மூடுபணிகளைப் புரிந்து கொள்ளுதல்**: மூடுபணிகள் JavaScript இல் முக்கியமான தலைப்புகளில் ஒன்றுதான், பல டெவலப்பர்கள் ஆண்டுகளுக்குப் பிறகு முழுமையாக புரிந்து கொள்கிறார்கள். இன்று, பயிற்சி பயன்பாட்டில் கவனம் செலுத்துவோம் - நம்முடைய தொடர்புடைய அம்சங்களை உருவாக்கும் போது மூடுபணிகள் இயல்பாக தோன்றும். உணர்வு வளரும்.
> DOM மற்றும் அதனை குறிப்பிடும் HTML குறியீட்டின் பிரதியம். [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) அவரின் பணி
@ -591,7 +591,7 @@ function stopElementDrag() {
- **கருவி உயர் ஆதரவு**: டெஸ்க் டாப் மற்றும் மொபைல் இரண்டிலும் வேலை செய்கிறது
- **செயற்பாட்டு விழிப்புணர்வு**: நினைவகக் கசிவுகளோடும் கூடுதல் கணக்கீடுகளோடும் தவிர்க்கல்
சிறிய டிராக் மற்றும் டிராப் கோட்-தியானம். சிறிது HTML, JS மற்றும் CSS கொண்டு, நீங்கள் ஒரு வலை இடைமுகத்தை உருவாக்கி, அதை அலங்கரித்து, ஒரு தொடர்பைச் சேர்க்கலாம்.
> சில ஆரம்ப உலாவிகள், [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) மூலம்
### உலாவிகள் வலை உள்ளடக்கத்தை எப்படிச் செயலாக்குகின்றன
@ -194,7 +194,7 @@ quadrantChart
நீடிப்புரு நிறுவல் செயல்முறையைப் புரிந்துகொள்வது உங்கள் நீடிப்புரு பயனர் அனுபவத்தை கணிக்க உதவும். நிறுவல் செயல்முறை நவீன உலாவிகளில் ஒரே மாதிரியாக உள்ளது, இடைமுக வடிவமைப்பில் சிறிய வேறுபாடுகளுடன்.
> **முக்கியம்**: உங்கள் நீடிப்புருகளை சோதிக்கும் போது உருவாக்குநர் முறையை இயக்கவும் மற்றும் பிற கடைகளிலிருந்து நீடிப்புருக்களை அனுமதிக்கவும்.
@ -308,10 +308,10 @@ project-root/
### நீடிப்புரு பார்வை சுருக்கம்
**அமைப்பு பார்வை** - முதல் முறையாக பயனர் அமைப்பு:
**முடிவுகள் பார்வை** - கார்பன் பாதைபாதை தரவு காட்டுதல்:
> ⚠️ **பாதுகாப்பு கவனம்**: உற்பத்தி பயன்பாடுகளில், API விசைகளை LocalStorageயில் வைக்குவது பாதுகாப்பு ஆபத்துக்களை உருவாக்கும், ஏனெனில் JavaScript இவைகளை அணுக முடியும். கற்றலுக்கான நோக்கில் இது சரி, ஆனால் உண்மையான பயன்பாடுகள் நுண்ணறிந்த கிரிடென்ஷியல்களுக்கு பாதுகாப்பான சர்வர் பக்க சேமிப்பை பயன்படுத்த வேண்டும்.
இதைக் கடைபிடியுங்கள். ஒரு வலைத்தளத்தை திறக்கவும் (Microsoft.com நல்லது) மற்றும் ‘Record’ பொத்தானைக் கிளிக் செய்க. இப்போது பக்கத்தைக் கச்சிதமாக புதுப்பிக்கவும், செயல்முறை சுடுகாட்டைப் பின்தொடர்க. பதிவு நிறுத்தும் பொழுது, உலாவி எப்படி 'script', 'render', மற்றும் 'paint' செய்கிறது என்பதற்கான விரிவான உடலமைப்பைப் பார்ப்பீர்கள். இது ராக்கெட் தொடக்கத்தில் மிஷன் கட்டுப்பாடு ஒவ்வொரு அமைப்பையும் கண்காணிப்பதை நினைவூட்டுகிறது - நீங்கள் என்ன எப்போது நடக்கிறது என்பதை நேரடி தரவாகப் பெறுவீர்கள்.
✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) இல் மேலும் விரிவான தகவல்களை பெறலாம்
@ -133,11 +133,11 @@ flowchart LR
தேர்ந்தெடுத்த பாகத்தில் பார்வை கட்டளையில் உங்கள் பக்க செயல்திறனின் ஸ்நாப்ஷாட் பெறவும்:
✅ உங்கள் செயல்திறன் சோதனையாளர் கருவியை அறிந்துகொள்ளுங்கள்! இந்த தளத்தின் டெவலப்பர் கருவிகளை திறந்து வழுக்குகள் உள்ளதா என்று பாருங்களேன். எது மெதுவாக ஏற்றுகிறது? எது வேகமாக?
tmrow இன் CO2 Signal 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) தேவைப்படும் (உதாரணமாக, Boston இல், நான் 'US-NEISO' ஐப் பயன்படுத்துகிறேன்).
API விசை மற்றும் பிராந்திய குறியீடு நீட்டிப்பு இடைமுகத்தில் உள்ளிடப்பட்டவுடன், உலாவி நீட்டிப்பு பட்டையில் உள்ள வண்ண புள்ளி உங்கள் பிராந்தியத்தின் ஆற்றல் பயன்பாட்டை பிரதிபலிக்க மாற்ற வேண்டும் மற்றும் ஆற்றல் அதிகம் பயன்படுத்தும் செயல்பாடுகளைச் செய்ய உகந்த பரிந்துரையை வழங்க வேண்டும். இந்த 'புள்ளி' அமைப்பின் கருத்து [Energy Lollipop extension](https://energylollipop.com/) மூலம் California உமிழ்வுகளுக்காக வழங்கப்பட்டது.
tmrow இன் CO2 Signal API ஐ பயன்படுத்தி மின்சார பயன்பாட்டை கண்காணிக்க, உங்களின் உலாவியில் நேரடியாக உங்கள் பகுதியின் மின்சார பயன்பாட்டை நினைவூட்டும் ஒரு உலாவி நீட்டிப்பை உருவாக்குங்கள். இந்த தற்காலிக நீட்டிப்பைப் பயன்படுத்துவது, இந்த தகவலின் அடிப்படையில் உங்கள் செயல்பாடுகளைப் பற்றிய முடிவுகளை எடுக்க உதவும்.
Edge உலாவியில் நிறுவ, உலாவியின் மேல் வலது மூலையில் உள்ள 'மூன்று புள்ளிகள்' மெனுவைப் பயன்படுத்தி 'Extensions' பேனலைத் தேடவும். அங்கிருந்து, 'Load unpacked' ஐத் தேர்ந்தெடுத்து புதிய நீட்டிப்பை ஏற்றவும். கேட்கப்பட்டால் 'dist' கோப்புறையைத் திறக்கவும், நீட்டிப்பு ஏற்றப்படும். இதைப் பயன்படுத்த, CO2 Signal API க்கான API விசை ([இங்கே மின்னஞ்சல் மூலம் பெறவும்](https://www.co2signal.com/) - இந்த பக்கத்தில் உள்ள பெட்டியில் உங்கள் மின்னஞ்சலை உள்ளிடவும்) மற்றும் [மின்சார வரைபடத்திற்கான](https://www.electricitymap.org/map) [உங்கள் பகுதியின் குறியீடு](http://api.electricitymap.org/v3/zones) தேவைப்படும் (உதாரணமாக, Boston இல், நான் 'US-NEISO' ஐப் பயன்படுத்துகிறேன்).
API விசை மற்றும் நீட்டிப்பு இடைமுகத்தில் பகுதி குறியீட்டை உள்ளிடப்பட்டவுடன், உலாவி நீட்டிப்பு பட்டியில் உள்ள நிற புள்ளி உங்கள் பகுதியின் மின்சார பயன்பாட்டை பிரதிபலிக்க மாற்ற வேண்டும் மற்றும் உங்களுக்கு பொருத்தமான அதிக மின்சார நுகர்வு செயல்பாடுகள் பற்றிய ஒரு குறியீட்டை வழங்க வேண்டும். இந்த "புள்ளி" அமைப்பின் கருத்து எனக்கு [Energy Lollipop நீட்டிப்பில்](https://energylollipop.com/) இருந்து கிடைத்தது, இது கலிஃபோர்னியாவின் உமிழ்வுகளுக்காக உருவாக்கப்பட்டது.
tmrow இன் C02 Signal API ஐ பயன்படுத்தி மின்சார பயன்பாட்டை கண்காணிக்க, உங்களது உலாவியில் நேரடியாக உங்கள் பகுதியில் மின்சார பயன்பாட்டை நினைவூட்டும் ஒரு உலாவி நீட்டிப்பை உருவாக்குங்கள். இந்த நீட்டிப்பை பயன்படுத்துவது, இந்த தகவல்களின் அடிப்படையில் உங்கள் செயல்பாடுகளை மதிப்பீடு செய்ய உதவும்.
Edge-ல் நிறுவ, உலாவியின் மேல் வலது மூலையில் உள்ள 'மூன்று புள்ளிகள்' மெனுவைப் பயன்படுத்தி Extensions பேனலை கண்டறியவும். அங்கிருந்து, 'Charger l'extension décompressée' ஐத் தேர்ந்தெடுத்து புதிய நீட்டிப்பை ஏற்றவும். '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 இன் C02 சிக்னல் API ஐப் பயன்படுத்தி, உலாவியில் உங்கள் பகுதியில் மின்சார பயன்பாடு எவ்வளவு அதிகமாக உள்ளது என்பதை நினைவூட்டும் ஒரு உலாவி நீட்டிப்பை உருவாக்குதல். இந்த நீட்டிப்பைப் பயன்படுத்துவதன் மூலம், இந்த தகவலின் அடிப்படையில் உங்கள் செயல்பாடுகளை முடிவு செய்ய உதவுகிறது.
Edge உலாவியில் நிறுவ, உலாவியின் மேல் வலது மூலையில் உள்ள 'மூன்று புள்ளி' மெனுவைப் பயன்படுத்தி நீட்டிப்பு குழுவைத் தேடவும். அங்கு, ஒரு புதிய நீட்டிப்பை ஏற்ற 'Load Unpacked' ஐத் தேர்ந்தெடுக்கவும். ப்ராம்ப்டில் 'dist' கோப்பகத்தைத் திறக்கவும், நீட்டிப்பு ஏற்றப்படும். இதைப் பயன்படுத்த, CO2 சிக்னல் API ([மின்னஞ்சல் மூலம் இங்கே பெறவும்](https://www.co2snal.com/) API விசையுடன் - இந்த பக்கத்தில் உள்ள பெட்டியில் உங்கள் மின்னஞ்சலை உள்ளிடவும்) மற்றும் [உங்கள் பகுதியில் உள்ள குறியீடு](http://api.electricitymap.org/v3/zones) [மின்சார வரைபடம்](https://www.electricitymap.org/map) (உதாரணமாக, Boston இல், நான் 'US-NEISO' ஐப் பயன்படுத்துகிறேன்).
API விசை மற்றும் பகுதி நீட்டிப்பு இடைமுகத்தில் உள்ளீடு செய்யப்பட்ட பிறகு, உலாவி நீட்டிப்பு பட்டையில் உள்ள வண்ண புள்ளி உங்கள் பகுதியில் உள்ள ஆற்றல் பயன்பாட்டை பிரதிபலிக்க மாற்ற வேண்டும், மேலும் ஆற்றல்-அதிக செயல்பாடுகள் உங்கள் செயல்பாட்டுக்கு ஏற்றதா என்பதை ஒரு குறிகாட்டி வழங்க வேண்டும். இந்த 'புள்ளி' முறையின் பின்னால் உள்ள கருத்து எனக்கு கலிபோர்னியா உமிழ்வுகளுக்கான [Energy Lollipop Extension](https://energylollipop.com/) மூலம் கிடைத்தது.
tmrow இன் Signal C02 API ஐ மின்சார பயன்பாட்டை கண்காணிக்க பயன்படுத்தி உலாவி நீட்டிப்பை உருவாக்கப் போகிறோம். இதன் மூலம் உங்கள் பிராந்தியத்தில் மின்சார பயன்பாடு எவ்வளவு அதிகமாக உள்ளது என்பதை உங்கள் உலாவியில் நேரடியாக நினைவூட்டியாகக் கொள்ளலாம். இந்த தனிப்பயன் நீட்டிப்பைப் பயன்படுத்துவது இந்த தகவல்களை அடிப்படையாகக் கொண்டு உங்கள் செயல்பாடுகளை மதிப்பீடு செய்ய உதவும்.
Edge இல் நிறுவ, உலாவியின் மேல் வலது மூலையில் உள்ள "மூன்று புள்ளிகள்" மெனுவைப் பயன்படுத்தி நீட்டிப்புகள் குழுமத்தைத் தேடவும். ஏற்கனவே செயல்படுத்தப்படவில்லை என்றால், டெவலப்பர் முறையை (கீழே இடது மூலையில்) இயக்கவும். புதிய நீட்டிப்பை ஏற்ற "சுருக்கப்படாதவை ஏற்றவும்" என்பதைத் தேர்ந்தெடுக்கவும். "dist" கோப்புறையைத் திறக்கவும், நீட்டிப்பு ஏற்றப்படும். இதைப் பயன்படுத்த, CO2 Signal API க்கான API விசை தேவைப்படும் (இதை [மின்னஞ்சல் மூலம் இங்கே பெறலாம்](https://www.co2signal.com/) - இந்த பக்கத்தில் உங்கள் மின்னஞ்சலைப் பதிவு செய்யவும்) மற்றும் [மின்சார மாப்புக்கு](https://www.electricitymap.org/map) பொருந்தும் [உங்கள் பிராந்தியத்தின் குறியீடு](http://api.electricitymap.org/v3/zones) (உதாரணமாக, Boston இல் "US-NEISO").
API விசையும் பிராந்திய தகவலும் நீட்டிப்பு இடைமுகத்தில் உள்ளீடு செய்யப்பட்டவுடன், உலாவி நீட்டிப்பு பட்டையில் உள்ள நிறமுள்ள புள்ளி உங்கள் பிராந்தியத்தின் மின்சார பயன்பாட்டை பிரதிபலிக்க மாற்ற வேண்டும் மற்றும் அதிக மின்சாரத்தைப் பயன்படுத்தும் செயல்பாடுகளைச் செய்ய ஏற்றதாக இருக்கும். இந்த "புள்ளி" அமைப்பின் அடிப்படை கருத்து [Energy Lollipop நீட்டிப்பால்](https://energylollipop.com/) கலிபோர்னியாவின் உமிழ்வுகளுக்காக வழங்கப்பட்டது.
tmrow இன் CO2 சிக்னல் API ஐப் பயன்படுத்தி, உங்கள் பகுதியில் உள்ள மின்சார பயன்பாட்டின் அளவை உலாவியில் நினைவூட்டியாகக் காட்டும் நீட்டிப்பை உருவாக்குவோம். இந்த நீட்டிப்பை தற்காலிகமாகப் பயன்படுத்துவதன் மூலம், இந்த தகவலின் அடிப்படையில் உங்கள் செயல்பாடுகளை முடிவு செய்யலாம்.
Edge உலாவியில் நிறுவ, உலாவியின் வலது மேல் மூலையில் உள்ள "மூன்று புள்ளிகள்" மெனுவில் "Extensions" பானலைத் தேடவும். அங்கு "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/) எனக்கு அளித்தது.
C02 tmrow API-யை பயன்படுத்தி மின்சார பயன்பாட்டை கண்டறிந்து, உங்கள் பிராந்தியத்தின் மின்சார பயன்பாட்டின் தாக்கத்தை உலாவியில் எச்சரிக்க செய்யும் ஒரு உலாவி நீட்டிப்பை உருவாக்குங்கள். இந்த நீட்டிப்பை பயன்படுத்துவதன் மூலம், இந்த தகவலின் அடிப்படையில் உங்கள் செயல்பாடுகளைப் பற்றி சிந்திக்க உதவும்.
Edge-ல் நிறுவ, உலாவியின் மேல் வலது மூலையில் உள்ள 'மூன்று புள்ளிகள்' மெனுவைப் பயன்படுத்தி நீட்டிப்பு பேனலைத் தேடவும். அங்கிருந்து, 'Load Unpacked' ஐத் தேர்ந்தெடுத்து புதிய நீட்டிப்பை ஏற்றவும். கோரிக்கையின் போது 'dist' கோப்புறையைத் திறக்கவும், நீட்டிப்பு ஏற்றப்படும். இதைப் பயன்படுத்த, CO2 சிக்னல் API க்கான API விசை ([இங்கே மின்னஞ்சல் மூலம் ஒன்றை பெறவும்](https://www.co2signal.com/) - இந்த பக்கத்தில் உள்ள பெட்டியில் உங்கள் மின்னஞ்சலை உள்ளிடவும்) மற்றும் [உங்கள் பிராந்தியத்திற்கான குறியீடு](http://api.electricitymap.org/v3/zones) தேவைப்படும், இது [மின்சார வரைபடத்துடன்](https://www.electricitymap.org/map) பொருந்தும் (பாஸ்டனில், எடுத்துக்காட்டாக, நான் 'US-NEISO' ஐப் பயன்படுத்துகிறேன்).
API விசை மற்றும் பிராந்தியத்தை நீட்டிப்பு இடைமுகத்தில் உள்ளிடிய பிறகு, உலாவி நீட்டிப்பு பட்டையில் உள்ள நிற புள்ளி உங்கள் பிராந்தியத்தின் மின்சார பயன்பாட்டை பிரதிபலிக்க மாறும் மற்றும் உங்களுக்கு பொருத்தமான செயல்பாடுகள் குறித்து வழிகாட்டும். இந்த 'புள்ளி' அமைப்பின் கருத்து [காலிஃபோர்னியாவுக்கான எரிசக்தி லாலிபாப் உலாவி நீட்டிப்பின்](https://energylollipop.com/) மூலம் எனக்கு கிடைத்தது.
tmrow இன் CO2 Signal 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) தேவைப்படும் (உதாரணமாக, Boston இல், நான் 'US-NEISO' ஐப் பயன்படுத்துகிறேன்).
API விசை மற்றும் பிராந்திய குறியீடு நீட்டிப்பு இடைமுகத்தில் உள்ளிடப்பட்டவுடன், உலாவி நீட்டிப்பு பட்டையில் உள்ள வண்ண புள்ளி உங்கள் பிராந்தியத்தின் ஆற்றல் பயன்பாட்டை பிரதிபலிக்க மாற்ற வேண்டும் மற்றும் ஆற்றல் அதிகம் தேவைப்படும் செயல்பாடுகளைச் செய்ய உகந்த பரிந்துரையை வழங்க வேண்டும். இந்த 'புள்ளி' அமைப்பின் கருத்து [Energy Lollipop extension](https://energylollipop.com/) மூலம் California உமிழ்வுகளுக்காக எனக்கு வழங்கப்பட்டது.
> படம் இதிலிருந்து [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
கன்வாஸ் கூறில் வரைவு செய்வதற்கு, அனைத்து கன்வாஸ் கிராபிக்ஸ் அடிப்படையாக மாறும் மூன்று படிகள் உள்ளன. இதை மீண்டும் மீண்டும் செய்து பார்க்கும்போது இது இயல்பானதாக மாறும்:
@ -323,11 +323,11 @@ Canvas கூறுடன் கூடிய ஒரு வலைப்பக்
- **மதிப்பெண் அமைப்பு**: ஒவ்வொரு அழிக்கப்பட்ட எதிரி கப்பலுக்கும் 100 மதிப்பெண்கள் வழங்கப்படுகின்றன (கணக்கிட எளிதாக வட்ட எண்கள்). மதிப்பெண்ணை கீழே இடது மூலையில் காட்டுவோம்.
- **வாழ்வு எண்ணிக்கையாளர்**: உங்கள் வீரர் மூன்று வாழ்வுகளுடன் தொடங்குகிறான் - ஆரம்ப அட்கேர் விளையாட்டுகளால் நிலைத்த பழக்கம், சவாலை சேர்க்கவும் விளையாடக்கூடிய தன்மையை சமநிலைப்படுத்த. ஒவ்வொரு எதிரி மோதலும் ஒரு வாழ்வு குறைக்கிறது. இத்துடன் வாழ்வுகளை கீழே வலது மூலையில் கப்பல் ஐகான்களுடன்  காட்டுவோம்.
- **வாழ்வு எண்ணிக்கையாளர்**: உங்கள் வீரர் மூன்று வாழ்வுகளுடன் தொடங்குகிறான் - ஆரம்ப அட்கேர் விளையாட்டுகளால் நிலைத்த பழக்கம், சவாலை சேர்க்கவும் விளையாடக்கூடிய தன்மையை சமநிலைப்படுத்த. ஒவ்வொரு எதிரி மோதலும் ஒரு வாழ்வு குறைக்கிறது. இத்துடன் வாழ்வுகளை கீழே வலது மூலையில் கப்பல் ஐகான்களுடன்  காட்டுவோம்.
`history.pushState` உலாவி வரலாறு பட்டியலில் புதிய பதிவுகளை உருவாக்குகிறது. உலாவியின் *பின் பொத்தானைப்* சில நிலைகளுக்கு நீட்டிப்பதன் மூலம் நீங்கள் இதைச் சரிபார்க்கலாம், இதுபோல காண்பிக்கும்:
பின் பொத்தானை சில தடவைகள் கிளிக் செய்ய முயன்றால், தற்போதைய URL மாற்றப்பட்டாலும், வரலாறு புதுப்பிக்கப்பட்டாலும் அதே template காட்டப்படும்.
2. உலாவியின் முகவரி பட்டியில் மாற்றங்களை கவனிக்கவும்
3. பக்கத்தை மீள்-ஏற்றும் விதம் மற்றும் URL இல் தரவு தோன்றுவதை கவனியுங்கள்
### HTTP Methods Comparison
@ -346,7 +346,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 @@ Agent முறையைப் பயன்படுத்தி, கீழ்
சிறிது CSS அலங்காரத்துடன் இறுதி பதிவு பக்கம் போன்றதாக இருக்கும் உதாரணம் இதோ:
நாம் தலை சுற்றி ஓடுவதைவிட, ஒரு **மைய நிலை நிர்வாக** அமைப்பை உருவாக்கப்போகிறோம். முக்கியமான அனைத்து விஷயங்களையும் ஒருவரே ஒழுங்குபடுத்துவார் போல கற்பனை செய்யுங்கள்:
இந்த திட்டத்தில், நீங்கள் ஒரு கற்பனை வங்கியை உருவாக்குவது எப்படி என்பதை கற்றுக்கொள்வீர்கள். இந்த பாடங்கள் ஒரு வலை பயன்பாட்டை அமைப்பது மற்றும் வழிகள் வழங்குவது, படிவங்களை உருவாக்குவது, நிலையை நிர்வகிப்பது, மற்றும் API-இல் இருந்து வங்கியின் தரவுகளை பெறுவது போன்ற வழிமுறைகளை உள்ளடக்கியது.
@ -78,7 +78,7 @@ VSCode.dev நிறுவுதலில் குறைந்தது ஒர
4. "Add initial HTML structure" என கமிட் செய்தலை எழுது
5. "Commit new file" கிளிக் செய்து மாற்றங்களைச் சேமிக்கவும்
**இந்த ஆரம்ப அமைப்பு எதை நிறைவேற்றுகிறது:**
- உரிய HTML5 ஆவண கட்டமைப்பை அரசியல் உறுப்புகளுடன் **உருவாக்குகிறது**
@ -105,7 +105,7 @@ VSCode.dev நிறுவுதலில் குறைந்தது ஒர
✅ **வெற்றி குறியியல்**: உங்கள் திட்ட கோப்புகள் எக்ஸ்ப்ளோரரில் மற்றும் `index.html` முதன்மை தொகுப்பியில் திருத்தத்திற்கு கிடைக்கும்.
**இந்த இடைமுகத்தில் நீங்கள் பார்க்கும் விஷயங்கள்:**
- **எக்ஸ்ப்ளோரர் பக்கவுரு**: சேமிப்பகம் கோப்புகள் மற்றும் கோப்புறை அமைப்பை காட்சிப்படுத்தும்
@ -450,7 +450,7 @@ li:before {
**நிறுவின்பின் உடனடியான விளைவுகள்:**
CodeSwing நிறுவப்பட்டவுடன், தொகுப்பாளரிலேயே உங்கள் ரெசுமே வலைத்தளத்தின் நேரடி முன்னோட்டை காட்டும். மாற்றங்களைச் செய்தபோது உங்கள் தளம் எப்படி தோன்றுகிறது என்பது தெளிவாக பார்க்க முடியும்.
**வளர்ந்த இடைமுகத்தைப் புரிந்து கொள்ள:**
- **வெட்டு காட்சியமைப்பு**: ஒரு பக்கத்தில் நீங்கள் எழுதும் குறியீடு மற்றும் மற்ற பக்கத்தில் நேரடி முன்னோட்டை காட்சி
உங்கள் இறுதி திட்டம் எப்படி இருக்கும் என்று இங்கே காணலாம்:
## 🗺️ AI பயன்பாட்டுத் தயாரிப்பில் உங்கள் கற்றல் பயணம்
@ -189,7 +189,7 @@ mindmap
```
**மூலம் கோட்பாடு**: AI பயன்பாட்டு வளர்ச்சி பாரம்பரிய வலை மேம்பாட்டுத் திறன்களுடன் AI சேவைகள் ஒருங்கிணைப்பைப் பொருத்தி, இயற்கை மற்றும் சுறுசுறுப்பான பயன்பாடுகளை உருவாக்குகிறது.
**Playground யைப் பயனுள்ளதாக 만드는வைகள்:**
- GPT-4o-mini, Claude மற்றும் பிற AI மாதிரிகளை சோதிக்கவும் (இல்லையெனில் இலவசம்!)
@ -199,7 +199,7 @@ mindmap
சிறிது விளையாடிவிட்டு, "Code" டாப் கிளிக் செய்து உங்கள் நிரல் மொழியைத் தேர்வுசெய்து அமலாக்க குறியீட்டை பெறலாம்.
## பைதான் பின்தள ஒருமை அமல்படுத்தல்
@ -2355,14 +2355,14 @@ mindmap
- [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) என்ற இடத்திற்கு **ஓடவும்**
- மேல் வலது மூலையில் "Use this template" என்பதைக் **கிளிக் செய்யவும்** (GitHub-இல் உள்நுழைந்திருப்பதை உறுதி செய்யவும்)
**படி 2: Codespaces விரும்பவும்**
- இன்று உருவாக்கிய ரெப்போவை **திறக்கவும்**
- பச்சை "Code" பொத்தானை அழுத்தி "Codespaces" ஐ தேர்ந்தெடுக்கவும்
- உங்கள் மேம்பாட்டு சூழலை துவக்க "Create codespace on main" ஐ **தேர்ந்தெடுக்கவும்**
ஒவ்வொரு பாடத்திலும் ஒரு பணியை முடிக்கவும், அறிவு பரிசோதனை மற்றும் சவால்களை உள்ளடக்கியது, இவற்றை வழிநடத்தி நீங்கள் கீழ்க்காணும் தலைப்புகளை கற்றுக் கொள்ளலாம்:
@ -115,7 +115,7 @@ Azure AI Foundry Discord சமுதாயத்தில் சேரவும
நீங்கள் உருவாக்கிய இந்தக் கோப்பகத்தின் நகலில், **Code** பொத்தானை கிளிக் செய்து **Open with Codespaces** ஐத் தேர்ந்தெடுக்கவும். இது உங்களுக்கான புதிய Codespace ஐ உருவாக்கும்.
ఈ రోజు, ఆధునిక వెబ్ డెవలప్మెంట్ను సాధ్యం చేసే అత్యద్భుతమైన టూల్స్ ని పరిశీలించబోతున్నాము, ఇవి చాలా ఇబ్బందిదాయకం కాకుండా అలూజిపోతాయి. నేను చెబుతున్నది Netflix, Spotify మరియు మీ ఇష్టమైన ఇండి యాప్ స్టూడియోలో డెవలపర్లు ప్రతిరోజు ఉపయోగించే అదే ఎడిటర్లు, బ్రౌజర్లు మరియు వర్క్ఫ్లోలు. మరియు ఇది మీకు సంతోష డ్యాన్స్ చేయించే భాగం: ఈ మోస్ట్ ప్రొఫెషనల్ గ్రేడ్, ఇండస్ట్రీ-స్టాండర్డ్ టూల్స్ చాలా కాలిగా ఉచితం!
మనం కలసి ఈ ప్రయాణం తీసుకుందాం, ఒక్కో స్టెప్పులో ఒక్కోసారి. తొందరగా లేదు, ఒత్తిడి లేదు – కేవలం మీరు, నేను, మరియు మీరు త్వరలో మీ కొత్త మిత్రులయ్యే అద్భుతమైన టూల్స్!
✅ 'beginner-friendly' రిపోలను కనుగొనడానికి మంచి మార్గం అంటే [‘good-first-issue’ ట్యాగ్తో శోధించడం](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/) ఇది.
కోడ్ కాపీ చేసుకునే అనేక మార్గాలు ఉన్నాయి. ఒక మార్గం "క్లోన్" చేయడం, దీనికి HTTPS, SSH లేదా GitHub CLI (కమాండ్ లైన్ ఇంటర్ఫేస్) ఉపయోగిస్తారు.
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, లేదా HyperText Markup Language, మీరు ఎప్పుడైనా సందర్శించిన ప్రతి వెబ్సైట్ యొక్క మూలాధారం. HTMLని వెబ్ పేజీలకు నిర్మాణాన్ని ఇచ్చే ఎముకల యాడుగా భావించండి – అది ఎక్కడ విషయం ఉండాలి, ఎలా అవి ఏర్పాటు చేయబడ్డాయి, ప్రతి భాగం ఏమిటి అని నిర్వచిస్తుంది. CSS తరువాత మీ HTMLను రంగులు మరియు లేఅవుట్లు తో "డ్రెస్ అప్" చేస్తుంది, మరియు JavaScript ఇంటరాక్టివిటీతో జీవంతం చేస్తుంది, HTML అన్ని ఇతర విషయాలను సాధ్యాన్ని చేసే ప్రాథమిక నిర్మాణాన్ని అందిస్తుంది.
@ -86,7 +86,7 @@ HTML కోడ్ లోకి దిగేముందు, మీ టెరే
4. ఎక్స్ప్లోరర్ ప్యానెలులో, "New File" ఐకాన్ పై క్లిక్ చేయండి
5. మీ ఫైల్కు పేరు `index.html` పెట్టండి
**ఎంపిక 2: టెర్మినల్ కమాండ్ లు ఉపయోగించడం**
```bash
@ -236,48 +236,48 @@ HTMLలో చిత్రాలు ప్రత్యేకం, ఎందుక
> స్కెచ్నోట్ చేసిన [Tomomi Imura](https://twitter.com/girlie_mac)
మీ HTML టెర్రేరియం ఎంత సాధారణంగా కనిపించిందో గుర్తుందా? CSS ఆ సరళమైన నిర్మాణాన్ని దృశ్యంగా ఆకర్షణీయంగా మార్చే స్థానం.
@ -202,7 +202,7 @@ body {
మీ బ్రౌజర్ డెవలపర్ టూల్స్ (F12) తెరవండి, Elements ట్యాబ్ కు వెళ్లి `<h1>` ఎలిమెంట్ ని ఇన్స్పెక్ట్ చేయండి. అది బాడీ నుండి ఫాంట్ ఫ్యామిలీని వారసత్వంగా పొందుతుందని చూడొచ్చు:
✅ **ప్రయోగ సమయం**: మీ `<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.te.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/te/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ flowchart LR
మీరు గాజు ఉపరితలాలపై వెలుతురు ప్రతిబింబాలను కలిగించే సూక్ష్మ హైలైట్లను సృష్టిస్తారు. ఇది రెనెసెన్స్ పెయింటర్స్ జాన్ వాన్ ఎయ్క్ లాంటి వారు గాజు పెయింటింగ్లను 3D లాగా చూపించడానికి ఉపయోగించిన పరిస్థితిని అనుకరిస్తుంది. మీరు లక్ష్యం చేసుకునేది ఇలాగే ఉంది:
వెబ్ డెవలప్మెంట్ లో అత్యంత ఆసక్తికరమైన అంశాలలో ఒకటికి స్వాగతం - విషయాలను పరస్పర చర్యాత్మకంగా మార్చడం! డాక్యూమెంట్ ఆబ్జెక్ట్ మోడల్ (DOM) అనేది మీ HTML మరియు JavaScript మధ్య ఒక ఇద్దరి మధ్య వంతెన లాగా ఉంటుంది, మరియు ఈ రోజు మనం దాన్ని ఉపయోగించి మీ టెర్రారియం కి జీవం తెస్తాము. Tim Berners-Lee మొదటి వెబ్ బ్రౌజర్ ను సృష్టించినప్పుడు, అతను డాక్యూమెంట్లు డైనమిక్ మరియు పరస్పర చర్యాత్మకంగా ఉండే వెబ్ ను ఊహించాడు - DOM ఆ దృశ్యాన్ని నిజం చేస్తుంది.
@ -102,7 +102,7 @@ flowchart TD
style P fill:#ffebee
style Q fill:#ffebee
```
> DOM మరియు దానికి సూచించే HTML మార్కప్ యొక్క ప్రతినిధి. [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **క్లోజర్ల అర్థం**: క్లోజర్లు JavaScript లో ఒక ముఖ్యమైన విషయం, మరియు బహుశా అనేక డెవలపర్లు దీన్ని పూర్తిగా అర్థం చేసుకోవడం నిధానం తీసుకుంటారు. ఈ రోజు మనం ఆచరణకు కేంద్రీకృతమై ఉన్నాము - మీరు ఇంటరాక్టివ్ ఫీచర్లను నిర్మించినప్పుడు క్లోజర్లు సహజంగా ఉత్పన్నమవుతాయో చూశారు. అవగాహనమీదుగా ఉంటూ మీరు వీరు నిజ సమస్యలకు ఎలాగా పరిష్కారమిచ్చారో తెలుసుకుంటారు.
> DOM మరియు దానికి సూచించే HTML మార్కప్ యొక్క ప్రతినిధి. [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ function stopElementDrag() {
- **క్రాస్-డివైస్ సపోర్ట్**: డెస్క్టాప్ మరియు మొబైల్ లో పని
- **పర్ఫార్మెన్స్ అవగాహన**: మెమొరీ లీక్స్ లేకుండా మరియు అదనపు లెక్కింపులు లేవు
స్వల్పమైన డ్రాగ్ అండ్ డ్రాప్ కోడ్-మెడిటేషన్. కొద్దిగా HTML, JS మరియు CSS తో, మీరు ఒక వబ్ ఇంటర్ఫేస్ని తయారుచేయవచ్చు, దాన్ని శోభాయమానంగా మార్చవచ్చు మరియు ఒక ఇంటరాక్షన్ చేర్చవచ్చు.
> స్కెచ్నోట్ ద్వారా [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## ప్రీ-లెక్చర్ క్విజ్
@ -77,7 +77,7 @@ mindmap
✅ **చిన్న చరిత్ర**: మొదటి బ్రౌజర్ 'WorldWideWeb' అని పిలవబడింది మరియు ఇది సర్ టిమోథీ బర్నర్స్-లీ 1990లో సృష్టించారు.
> కొన్ని ప్రారంభ బ్రౌజర్లు, [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ద్వారా
### బ్రౌజర్లు వెబ్ కంటెంట్ను ఎలా ప్రాసెస్ చేస్తాయి
@ -194,7 +194,7 @@ quadrantChart
ఎక్స్టెన్షన్ ఇన్స్టాలేషన్ ప్రక్రియను అర్థం చేసుకోవడం, ప్రజలు మీరు తయారు చేసిన ఎక్స్టెన్షన్ను ఇన్స్టాల్ చేయేటప్పుడు ఉపయోగపడే అనుభవాన్ని ఊహించడానికి సహాయం చేస్తుంది. ఆధునిక బ్రౌజర్లలో ఈ ఇన్స్టాలేషన్ ప్రక్రియ సాధారణంగా ఉంటుంది, చర్యల రూపరేఖలో స్వల్ప మార్పులుంటాయి.
> **మరియు ముఖ్యమైనది**: మీ స్వంత ఎక్స్టెన్షన్లను పరీక్షించే సమయంలో డెవలపర్ మోడ్ ఆన్ చేసి, ఇతర స్టోర్స్ నుంచి ఎక్స్టెన్షన్స్ అనుమతి ఇవ్వడం మర్చిపోకండి.
@ -308,10 +308,10 @@ project-root/
### ఎక్స్టెన్షన్ వీక్షణల అవలోకనం
**సెట్టప్ వీక్షణ** - మొదటి సారి ఉపయోగించే యూజర్ సెటప్:
**ఫలితాల వీక్షణ** - కార్బన్ ఫుట్ప్రింట్ డేటాను చూపిస్తుంది:
localizeflow[bot]
1 week ago