> اسکتچنوت توسط [تومومی ایمورا](https://twitter.com/girlie_mac)
به یکی از جذابترین بخشهای توسعه وب خوش آمدید - ایجاد تعامل! مدل شیء سند (DOM) مانند پلی بین HTML و جاوااسکریپت شما است و امروز از آن برای زنده کردن تراریوم شما استفاده خواهیم کرد. زمانی که تیم برنرز-لی نخستین مرورگر وب را ساخت، دنیای وب را جایی تصور میکرد که اسناد پویا و تعاملی باشند - DOM این چشمانداز را ممکن میسازد.
> نمایشی از DOM و نشانهگذاری HTML که به آن اشاره دارد. از [اولفا نصرآویی](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **درک بستهها**: بستهها موضوع مهمی در جاوااسکریپت هستند و بسیاری از توسعهدهندگان برای سالها از آنها استفاده میکنند قبل از اینکه تمام جنبههای نظری آن را به طور کامل درک کنند. امروز، تمرکز ما بر کاربرد عملی است - خواهید دید که بستهها به طور طبیعی هنگام ساخت ویژگیهای تعاملی پدیدار میشوند. درک شما با مشاهده حل مسائل واقعی رشد خواهد کرد.
> نمایشی از DOM و نشانهگذاری HTML که به آن اشاره دارد. از [اولفا نصرآویی](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ function stopElementDrag() {
- **پشتیبانی چند دستگاهی**: کار روی دسکتاپ و موبایل
- **آگاه به عملکرد**: بدون نشت حافظه یا محاسبات زائد
> نقشهبرداری توسط [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' نام داشت و توسط سر تیموتی برنرز-لی در سال ۱۹۹۰ ساخته شد.
> برخی مرورگرهای اولیه، از طریق [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 ریسک امنیتی دارد چون جاوااسکریپت به این دادهها دسترسی دارد. برای اهداف آموزشی این روش خوب است، اما برنامههای واقعی باید از ذخیره امن سمت سرور برای اطلاعات حساس استفاده کنند.
بیایید این را امتحان کنیم. یک وبسایت باز کنید (Microsoft.com برای این کار خوب است) و روی دکمه 'Record' کلیک کنید. حالا صفحه را دوباره بارگذاری کنید و پروفایلر را مشاهده کنید که همه چیز را ثبت میکند. وقتی ضبط را متوقف کنید، تقسیمبندی دقیقی از چگونگی 'اجرای اسکریپتها'، 'رندر' و 'نقاشی' سایت مشاهده خواهید کرد. این من را یاد کنترل ماموریت میاندازد که هر سیستم را در طول پرتاب راکت نظارت میکند - شما دادههای زمان واقعی دقیق از اتفاقات و زمان وقوع آنها میگیرید.
✅ مستندات [مایکروسافت](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) جزئیات بیشتری دارد اگر میخواهید عمیقتر وارد شوید
@ -133,11 +133,11 @@ flowchart LR
با انتخاب بخشی از جدول زمانی پروفایل، نمای خلاصهای از عملکرد صفحه را ببینید:
✅ با پروفایلر خود آشنا شوید! ابزارهای توسعه را روی این سایت باز کنید و ببینید آیا گلوگاههایی وجود دارد یا خیر. کدام دارایی کندترین بارگذاری را دارد؟ سریعترین چیست؟
> تصویر از [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
برای کشیدن روی عنصر کانواس، شما همان فرایند سه مرحلهای را دنبال میکنید که اساس همه گرافیکهای کانواس است. وقتی چند بار این کار را انجام دهید، عادتتان میشود:
- **سیستم امتیازدهی**: هر سفینه دشمن نابود شده ۱۰۰ امتیاز میدهد (اعداد رند برای بازیکنان راحتتر محاسبه ذهنی هستند). امتیاز در گوشه پایین سمت چپ نمایش داده میشود.
- **شمارش جانها**: قهرمان شما با سه جان شروع میکند — استانداردی که بازیهای آرکید اولیه برای تعادل چالش و قابل بازی بودن تعیین کردند. هر برخورد با دشمن یک جان از دست میدهید. تعداد جانهای باقیمانده در گوشه پایین سمت راست با آیکون سفینه نشان داده میشود .
- **شمارش جانها**: قهرمان شما با سه جان شروع میکند — استانداردی که بازیهای آرکید اولیه برای تعادل چالش و قابل بازی بودن تعیین کردند. هر برخورد با دشمن یک جان از دست میدهید. تعداد جانهای باقیمانده در گوشه پایین سمت راست با آیکون سفینه نشان داده میشود .
استفاده از `history.pushState` ورودیهای جدیدی در تاریخچه ناوبری مرورگر ایجاد میکند. میتوانید این را با نگه داشتن دکمه *بازگشت* مرورگر خود امتحان کنید، باید چیزی شبیه این ببینید:
اگر چند بار روی دکمه برگشت کلیک کنید، میبینید که URL فعلی تغییر میکند و تاریخچه بهروزرسانی میشود، اما همان قالب نمایش داده میشود.
3. توجه کنید که صفحه دوباره بارگذاری میشود و اطلاعات در URL ظاهر میشود
### مقایسه روشهای HTTP
@ -346,7 +346,7 @@ graph TD
2. **روی دکمه "ایجاد حساب" کلیک کنید**
3. **پاسخ سرور را در مرورگر مشاهده کنید**
**آنچه باید ببینید:**
- **مرورگر به URL نقطه انتهایی API هدایت میشود**
@ -609,7 +609,7 @@ async function register() {
3. **کلیک** روی "ایجاد حساب"
4. **مشاهده** پیامهای کنسول و بازخورد برای کاربر
**آنچه باید ببینید:**
- **حالت بارگذاری** روی دکمه ارسال ظاهر میشود
@ -783,7 +783,7 @@ input:focus:invalid {
3. **استفاده از** کاراکترهای خاص در فیلد نام کاربری
4. **وارد کردن** مقدار منفی در موجودی
**آنچه مشاهده خواهید کرد:**
- **مرورگر پیامهای اعتبارسنجی بومی را نمایش میدهد**
@ -943,7 +943,7 @@ timeline
نمونهای از ظاهر نهایی صفحه ورود پس از افزودن کمی استایل:
## 🗺️ مسیر یادگیری شما در توسعه اپلیکیشنهای هوش مصنوعی
@ -189,7 +189,7 @@ mindmap
```
**اصل اصلی**: توسعه اپلیکیشنهای هوش مصنوعی ترکیبی از مهارتهای سنتی توسعه وب با ادغام سرویسهای هوش مصنوعی است که برنامههایی هوشمند و پاسخگو برای کاربران ایجاد میکند.
**دلایلی که محیط بازیابی بسیار مفید است:**
- **آزمایش** مدلهای مختلف هوش مصنوعی مثل GPT-4o-mini، Claude و دیگران (همه رایگان!)
@ -199,7 +199,7 @@ mindmap
وقتی بازی کردید، کافی است روی تب "Code" کلیک کنید و زبان برنامهنویسی خود را انتخاب کنید تا کد پیادهسازی مورد نیاز را دریافت نمایید.
## راهاندازی ادغام پشتصحنه پایتون
@ -2350,14 +2350,14 @@ mindmap
- **مراجعه** به مخزن [Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- **کلیک** روی "Use this template" در گوشه بالا سمت راست (اطمینان حاصل کنید که وارد حساب GitHub شدهاید)
**مرحله 2: راهاندازی Codespaces**
- **باز کردن** مخزن تازه ساخته شده
- **کلیک** روی دکمه سبز "Code" و انتخاب "Codespaces"
- **انتخاب** "Create codespace on main" برای شروع محیط توسعه شما
**مرحله 3: پیکربندی محیط**
پس از بارگذاری Codespace، به موارد زیر دسترسی خواهید داشت:
هر درس شامل یک تکلیف برای تکمیل، یک آزمون دانش و یک چالش برای راهنمایی شما در مباحث مانند:
@ -115,7 +115,7 @@ CO_OP_TRANSLATOR_METADATA:
در نسخهای که از این مخزن ساختهاید، دکمه **Code** را بزنید و گزینه **Open with Codespaces** را انتخاب کنید. این یک Codespace جدید برای کار کردن شما ایجاد میکند.
@ -17,7 +17,7 @@ Kuule, ymmärrän täysin, jos ohjelmointi tuntuu juuri nyt pelottavalta. Kun al
Tänään tutustumme uskomattomiin työkaluihin, jotka tekevät modernista web-kehityksestä paitsi mahdollisen, myös todella koukuttavan. Puhun samoista editoreista, selaimista ja työnkuluista, joita Netflixin, Spotifyn ja suosikkisi indie-sovellusstudion kehittäjät käyttävät joka päivä. Ja tässä tulee se osuus, joka saa sinut tanssimaan ilosta: suurin osa näistä ammattitason, teollisuusstandardin työkaluista on täysin ilmaisia!
@ -17,7 +17,7 @@ Tiedän, että tämä voi tuntua aluksi paljolta – muistan itsekin tuijottanee
Otamme tämän matkan yhdessä, askel kerrallaan. Ei kiirettä, ei painetta – vain sinä, minä ja muutama todella siisti työkalu, joista tulee pian uusia parhaita ystäviäsi!
@ -605,7 +605,7 @@ Etsi ensin GitHubista repositorio (tai **repo**), joka kiinnostaa sinua ja johon
✅ Hyvä tapa löytää 'aloittelijaystävällisiä' repoja on [etsiä tagilla 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
@ -1020,12 +1020,12 @@ Jokaisella verkkosivustosi kuvalla on tarkoitus. Tämän tarkoituksen ymmärtäm
**Informatiiviset kuvat** - välittävät tärkeää tietoa:
```html
<imgsrc="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.fi.png" alt="Sales increased 25% from Q1 to Q2 2024">
<imgsrc="../../../../translated_images/fi/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
**Koristeelliset kuvat** - pelkästään visuaalisia, ilman informatiivista arvoa:
HTML eli HyperText Markup Language on jokaisen verkkosivun perusta, jonka olet koskaan vieraillut. Ajattele HTML:ää verkkosivujen "luurankona" – se määrittää, mihin sisältö sijoitetaan, miten se järjestetään ja mitä kukin osa edustaa. Vaikka CSS myöhemmin "pukee" HTML:n väreillä ja asetteluilla ja JavaScript tuo siihen interaktiivisuutta, HTML tarjoaa olennaisen rakenteen, joka tekee kaiken muun mahdolliseksi.
@ -88,7 +88,7 @@ Luo oma kansio terraario-projektillesi ja lisää ensimmäinen HTML-tiedostosi.
4. Explorer-paneelissa klikkaa "New File" -ikonia
5. Nimeä tiedostosi `index.html`
**Vaihtoehto 2: Käytä terminaalikomentoja**
```bash
@ -239,48 +239,48 @@ Lisää kasvikuvat järjestettyinä kahteen sarakkeeseen `<body></body>`-tagien
Muistatko, kuinka HTML-terrariumisi näytti melko yksinkertaiselta? CSS:n avulla voimme muuttaa tuon pelkistetyn rakenteen visuaalisesti houkuttelevaksi.
@ -205,7 +205,7 @@ body {
Avaa selaimesi kehitystyökalut (F12), siirry Elements-välilehteen ja tarkista `<h1>`-elementtisi. Näet, että se perii fonttiperheen body-elementiltä:
✅ **Kokeilua**: Kokeile asettaa muita periytyviä ominaisuuksia `<body>`-elementille, kuten `color`, `line-height` tai `text-align`. Mitä tapahtuu otsikolle ja muille elementeille?
@ -335,7 +335,7 @@ Terrariumissamme jokainen kasvi tarvitsee samanlaista tyylittelyä, mutta myös
**Tässä on jokaisen kasvin HTML-rakenne:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.fi.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/fi/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.png" />
</div>
```
@ -592,7 +592,7 @@ Valmis parantamaan terrariumiasi realistisilla lasin heijastuksilla? Tämä tekn
Luot hienovaraisia korostuksia, jotka simuloivat, miten valo heijastuu lasipinnoilta. Tämä lähestymistapa on samanlainen kuin miten renessanssimaalari Jan van Eyck käytti valoa ja heijastusta saadakseen maalatun lasin näyttämään kolmiulotteiselta. Tässä on tavoitteenasi:
Tervetuloa yhteen verkkokehityksen kiehtovimmista osa-alueista – interaktiivisuuden luomiseen! Document Object Model (DOM) toimii sillan tavoin HTML:n ja JavaScriptin välillä, ja tänään käytämme sitä herättääksemme terrariosi eloon. Kun Tim Berners-Lee loi ensimmäisen verkkoselaimen, hän kuvitteli verkon, jossa dokumentit voisivat olla dynaamisia ja interaktiivisia – DOM tekee tämän vision mahdolliseksi.
> DOM:n ja sitä vastaavan HTML-koodin esitys. Lähde: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **Sulkeumien ymmärtäminen**: Sulkeumat ovat merkittävä aihe JavaScriptissä, ja monet kehittäjät käyttävät niitä vuosia ennen kuin täysin ymmärtävät kaikki teoreettiset näkökohdat. Tänään keskitymme käytännön sovellukseen – näet, kuinka sulkeumat syntyvät luonnollisesti interaktiivisia ominaisuuksia rakentaessamme. Ymmärrys kehittyy, kun näet, kuinka ne ratkaisevat todellisia ongelmia.
> DOM:n ja sitä vastaavan HTML-koodin esitys. Lähde: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
Pieni vedä ja pudota -koodimeditaatio. Vähän HTML:ää, JS:ää ja CSS:ää käyttäen voit rakentaa verkkokäyttöliittymän, tyylitellä sen ja lisätä siihen vuorovaikutteisuutta.
> Joitakin varhaisia selaimia, lähde: [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Kuinka selaimet käsittelevät verkkosisältöä
@ -198,7 +198,7 @@ quadrantChart
Laajennuksen asennusprosessin ymmärtäminen auttaa sinua ennakoimaan käyttäjäkokemusta, kun ihmiset asentavat laajennuksesi. Asennusprosessi on standardoitu moderneissa selaimissa, pienillä käyttöliittymäsuunnittelun eroilla.
> **Tärkeää**: Varmista, että kehittäjätila on kytketty päälle ja salli laajennusten asentaminen muista kaupoista testatessasi omia laajennuksiasi.
@ -313,10 +313,10 @@ Tämä noudattaa progressiivisen paljastamisen periaatetta, jota on käytetty k
### Laajennusnäkymien yleiskatsaus
**Asetusnäkymä** - Ensimmäisen käyttökerran asetukset:
**Tulosnäkymä** - Hiilijalanjälkitietojen näyttö:
> ⚠️ **Tietoturvahuomio**: Tuotantosovelluksissa API-avainten tallentaminen LocalStorageen aiheuttaa tietoturvariskejä, koska JavaScript voi käyttää näitä tietoja. Oppimiskäyttöön tämä lähestymistapa toimii hyvin, mutta oikeissa sovelluksissa tulisi käyttää turvallista palvelinpuolen tallennusta arkaluontoisille tunnuksille.
@ -126,7 +126,7 @@ Avaa Edge-selaimen kehitystyökalut klikkaamalla oikeassa yläkulmassa olevia ko
Kokeillaan tätä. Avaa verkkosivusto (Microsoft.com toimii hyvin tähän) ja klikkaa 'Tallenna'-painiketta. Päivitä sivu ja katso, kuinka profiilintyökalu tallentaa kaiken, mitä tapahtuu. Kun lopetat tallennuksen, näet yksityiskohtaisen erittelyn siitä, kuinka selain 'skriptasi', 'renderöi' ja 'maalasi' sivuston. Se muistuttaa minua siitä, kuinka ohjauskeskus seuraa jokaista järjestelmää raketin laukaisun aikana – saat reaaliaikaista dataa siitä, mitä tapahtuu ja milloin.
✅ [Microsoftin dokumentaatio](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) sisältää paljon lisätietoa, jos haluat syventyä aiheeseen.
@ -136,11 +136,11 @@ Valitse profiilin aikajanan osia zoomataksesi tapahtumiin, jotka tapahtuvat sivu
Saat yleiskuvan sivusi suorituskyvystä valitsemalla osan profiilin aikajanasta ja katsomalla yhteenvetopaneelia:
Käyttämällä tmrow:n CO2 Signal -API:ta sähkönkulutuksen seuraamiseen voit rakentaa selainlaajennuksen, joka muistuttaa sinua suoraan selaimessa siitä, kuinka kuormittavaa alueesi sähkönkulutus on. Tämän laajennuksen satunnainen käyttö auttaa sinua tekemään päätöksiä toimistasi tämän tiedon perusteella.
Asentaaksesi laajennuksen Edge-selaimeen, käytä selaimen oikean yläkulman 'kolmen pisteen' valikkoa löytääksesi Laajennukset-paneelin. Valitse sieltä 'Lataa purkamaton' ladataksesi uuden laajennuksen. Avaa 'dist'-kansio kehotteessa, ja laajennus latautuu. Käyttääksesi sitä tarvitset API-avaimen CO2 Signal -API:lle ([hanki avain sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostiosoitteesi tämän sivun laatikkoon) sekä [alueesi koodin](http://api.electricitymap.org/v3/zones), joka vastaa [Electricity Map](https://www.electricitymap.org/map) -karttaa (esimerkiksi Bostonissa käytän koodia 'US-NEISO').
Kun API-avain ja alueen koodi on syötetty laajennuksen käyttöliittymään, selaimen laajennuspalkin värillinen piste muuttuu heijastamaan alueesi energiankulutusta ja antaa sinulle vihjeitä siitä, mitkä energiaintensiiviset toiminnot olisivat sopivia suorittaa. Tämän 'pistejärjestelmän' konsepti tuli minulle [Energy Lollipop -laajennuksesta](https://energylollipop.com/) Kalifornian päästöjen seuraamiseen.
Käyttämällä tmrow'n CO2 Signal -API:ta sähkönkulutuksen seuraamiseen, luo selaimen laajennus, joka tarjoaa suoraan selaimessasi muistutuksen alueesi sähkönkulutuksesta. Tämän ad hoc -laajennuksen käyttö auttaa sinua tekemään päätöksiä toimistasi perustuen tähän tietoon.
Asentaaksesi Edge-selaimeen, käytä selaimen oikeassa yläkulmassa olevaa 'kolmen pisteen' valikkoa löytääksesi Laajennukset-paneelin. Valitse sieltä 'Lataa purkamaton' ladataksesi uuden laajennuksen. Avaa 'dist'-kansio, kun sitä pyydetään, ja laajennus ladataan. Käyttääksesi sitä tarvitset API-avaimen CO2 Signal -API:lle ([hanki avain sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostiosoitteesi tämän sivun laatikkoon) sekä [sähköaluekoodin](http://api.electricitymap.org/v3/zones), joka vastaa [Electricity Map](https://www.electricitymap.org/map) -karttaa (esimerkiksi Bostonissa käytän 'US-NEISO').
Kun API-avain ja alue on syötetty laajennuksen käyttöliittymään, väripiste selaimen laajennuspalkissa muuttuu heijastamaan alueesi energiankulutusta ja antaa sinulle indikaattorin siitä, mitkä korkean energiankulutuksen toiminnot olisivat sinulle sopivia. Tämän "pistejärjestelmän" konseptin sain [Energy Lollipop -laajennuksesta](https://energylollipop.com/) Kalifornian päästöille.
Käyttämällä tmrow'n CO2 Signal -API:ta sähkönkulutuksen seuraamiseen, luo selainlaajennus, joka muistuttaa sinua suoraan selaimessasi alueesi sähkönkulutuksesta. Tämän ad hoc -laajennuksen käyttö auttaa sinua tekemään päätöksiä toimintasi suhteen näiden tietojen perusteella.
Kun API-avain ja alue on syötetty laajennuksen käyttöliittymään, selaimen laajennuspalkin värillisen pisteen tulisi muuttua heijastamaan alueesi energiankulutusta ja antaa sinulle vihjeen siitä, millaisia energiaintensiivisiä toimintoja olisi sopivaa tehdä. Tämän 'pistejärjestelmän' konsepti on saanut inspiraationsa [Energy Lollipop -laajennuksesta](https://energylollipop.com/) Kalifornian päästöjen osalta.
Tmrow:n CO2 Signal API:n avulla seurataan sähkönkulutusta ja luodaan selainlaajennus, joka muistuttaa sinua siitä, kuinka kuormittavaa alueesi sähkönkäyttö on selaimessasi. Tämän laajennuksen käyttö auttaa sinua tekemään päätöksiä toiminnastasi tämän tiedon perusteella.
Asentaaksesi sen Edge-selaimeen, käytä selaimen oikeassa yläkulmassa olevaa "kolmen pisteen" valikkoa löytääksesi laajennuspaneelin. Valitse sieltä "Lataa purkamaton" ladataksesi uuden laajennuksen. Avaa kehotteessa "dist"-kansio, ja laajennus latautuu. Käyttääksesi sitä, tarvitset CO2 Signal API -avaimen ([saatavilla sähköpostitse täältä](https://www.co2snal.com/) - syötä sähköpostiosoitteesi sivun laatikkoon) ja [alueesi koodin](http://api.electricitymap.org/v3/zones) [Electricity Map](https://www.electricitymap.org/map) -sivustolta (esimerkiksi Bostonissa käytän "US-NEISO").
Kun API-avain ja alue on syötetty laajennuksen käyttöliittymään, selaimen laajennuspalkissa oleva värillinen piste muuttuu heijastamaan alueesi energiankäyttöä ja antaa sinulle indikaattorin siitä, mitkä energiaintensiiviset toiminnot sopivat parhaiten suoritettavaksi. Tämän "piste"-järjestelmän idea tuli minulle Kalifornian päästöjen [Energy Lollipop -laajennuksesta](https://energylollipop.com/).
Tässä projektissa käytetään tmrow:n Signal CO2 -rajapintaa sähköenergian käytön seuraamiseen. Tarkoituksena on luoda selainlaajennus, joka muistuttaa suoraan selaimessa, kuinka kuormittavaa sähköenergian käyttö on omalla alueella. Tämän laajennuksen avulla voi arvioida omia toimintojaan näiden tietojen perusteella.
Asentaaksesi laajennuksen Edge-selaimeen, käytä selaimen oikeassa yläkulmassa olevaa "kolmen pisteen" valikkoa ja etsi Laajennukset-paneeli. Jos kehittäjätila ei ole vielä käytössä, ota se käyttöön (vasemmassa alakulmassa). Valitse "Lataa purkamaton" lisätäksesi uuden laajennuksen. Avaa "dist"-kansio kehotteessa, ja laajennus ladataan. Käyttöä varten tarvitset API-avaimen CO2 Signal -rajapintaan (voit [hankkia sen sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostiosoitteesi sivulla olevaan kenttään) sekä [alueesi koodin](http://api.electricitymap.org/v3/zones), joka vastaa [sähkökarttaa](https://www.electricitymap.org/map) (esimerkiksi Bostonissa "US-NEISO").
Kun API-avain ja alue on syötetty laajennuksen käyttöliittymään, selaimen laajennuspalkissa oleva väripiste muuttuu heijastamaan alueen energiankäyttöä. Se antaa myös vihjeitä siitä, mitkä korkean energiankulutuksen toiminnot olisivat sopivia suorittaa. Tämän "pistejärjestelmän" konsepti on peräisin [Energy Lollipop -laajennuksesta](https://energylollipop.com/), joka seuraa Kalifornian päästöjä.
Rakennetaan selainlaajennus, joka käyttää tmrow:n CO2 Signal API:ta seuratakseen energiankulutusta ja näyttää muistutuksena, kuinka paljon sähköä alueellasi käytetään. Tämän laajennuksen avulla voit tehdä päätöksiä toiminnastasi tämän tiedon perusteella.
Asentaaksesi laajennuksen Edge-selaimeen, etsi selaimen oikeasta yläkulmasta "kolmen pisteen" valikosta "Laajennukset"-paneeli. Valitse sieltä "Load Unpacked" ja lataa uusi laajennus. Kun sinua kehotetaan, avaa "dist"-kansio, jolloin laajennus latautuu. Käyttääksesi laajennusta tarvitset CO2 Signal API:n API-avaimen ([hanki yksi sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostisi tämän sivun laatikkoon) sekä [Electricity Map](https://www.electricitymap.org/map) -sivuston mukaisen [aluekoodin](http://api.electricitymap.org/v3/zones) (esimerkiksi Bostonissa käytetään 'US-NEISO').
Kun syötät API-avaimen ja aluekoodin laajennuksen käyttöliittymään, selainlaajennuspalkissa näkyvä värillinen piste muuttuu ja heijastaa alueesi energiankulutusta. Tämä auttaa sinua arvioimaan, millaisia energiaa vaativia toimintoja on sopivaa tehdä. Tämän "piste"-järjestelmän idea tuli minulle Kalifornian päästöjen [Energy Lollipop -laajennuksesta](https://energylollipop.com/).
Käyttämällä tmrow:n CO2 Signal -API:ta sähkönkulutuksen seuraamiseen, rakenna selaimen laajennus, joka antaa sinulle ilmoituksia siitä, kuinka raskasta alueesi sähkönkulutus on. Tämän laajennuksen käyttö auttaa sinua tekemään tietoisempia päätöksiä toiminnastasi näiden tietojen perusteella.
Asentaaksesi laajennuksen Edge-selaimeen, käytä selaimen oikeassa yläkulmassa olevaa "kolmen pisteen" valikkoa löytääksesi Laajennukset-paneelin. Valitse sieltä 'Load Unpacked' ladataksesi uuden laajennuksen. Avaa 'dist'-kansio pyynnön mukaisesti, ja laajennus latautuu. Käyttääksesi sitä tarvitset API-avaimen CO2 Signal -API:lle ([hanki avain sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostiosoitteesi sivun laatikkoon) sekä [alueesi koodin](http://api.electricitymap.org/v3/zones), joka vastaa [Electricity Map](https://www.electricitymap.org/map) -karttaa (esimerkiksi Bostonissa käytän 'US-NEISO').
Kun API-avain ja aluekoodi on syötetty laajennuksen käyttöliittymään, selaimen laajennuspalkin värillinen piste muuttuu heijastamaan alueesi energiankulutusta ja antaa sinulle vihjeitä siitä, millaisia raskaita toimintoja kannattaa tehdä. Tämän "pistejärjestelmän" konsepti tuli minulle [Energy Lollipop -selaimen laajennuksesta](https://energylollipop.com/) Kalifornian päästöjen seuraamiseen.
Käyttämällä tmrow'n CO2 Signal API:ta sähkönkulutuksen seuraamiseen, voit rakentaa selaimen laajennuksen, joka muistuttaa sinua suoraan selaimessa siitä, kuinka kuormittavaa alueesi sähkönkulutus on. Tämän laajennuksen satunnainen käyttö auttaa sinua tekemään harkittuja päätöksiä toimistasi tämän tiedon perusteella.
Asentaaksesi laajennuksen Edge-selaimeen, käytä selaimen oikean yläkulman "kolmen pisteen" valikkoa löytääksesi Laajennukset-paneelin. Valitse sieltä "Lataa purkamaton" ladataksesi uuden laajennuksen. Avaa kehotteessa "dist"-kansio, ja laajennus latautuu. Käyttääksesi sitä, tarvitset API-avaimen CO2 Signal API:lle ([hanki avain sähköpostitse täältä](https://www.co2signal.com/) - syötä sähköpostiosoitteesi tämän sivun laatikkoon) sekä [alueesi koodin](http://api.electricitymap.org/v3/zones), joka vastaa [Electricity Map](https://www.electricitymap.org/map) -karttaa (esimerkiksi Bostonissa käytän koodia 'US-NEISO').
Kun API-avain ja alueen koodi on syötetty laajennuksen käyttöliittymään, selaimen laajennuspalkin värillinen piste muuttuu heijastamaan alueesi energiankulutusta ja antaa sinulle vihjeitä siitä, mitkä energiaintensiiviset toiminnot olisivat sopivia suorittaa. Tämän "piste"-järjestelmän konsepti on peräisin [Energy Lollipop -laajennuksesta](https://energylollipop.com/) Kalifornian päästöjen seurantaan.
> Kuva [MDN:stä](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Canvas-elementille piirtäminen noudattaa samaa kolmen vaiheen prosessia, joka muodostaa kaikkien canvas-grafiikoiden perustan. Kun teet tämän muutaman kerran, se muuttuu toiseksi luonteeksi:
@ -329,11 +329,11 @@ Sinun tulee rakentaa verkkosivu, jossa on Canvas-elementti. Sen tulisi näyttä
- **Pistejärjestelmä**: Jokainen tuhottu vihollisalus antaa 100 pistettä (pyöreät numerot ovat helpompia pelaajien laskea mielessään). Pisteet näytetään vasemmassa alakulmassa.
- **Elämälaskuri**: Sankarisi aloittaa kolmella elämällä – standardi, jonka varhaiset arcade-pelit asettivat tasapainottamaan haastetta ja pelattavuutta. Jokainen törmäys viholliseen maksaa yhden elämän. Näytämme jäljellä olevat elämät oikeassa alakulmassa aluksen ikoneilla .
- **Elämälaskuri**: Sankarisi aloittaa kolmella elämällä – standardi, jonka varhaiset arcade-pelit asettivat tasapainottamaan haastetta ja pelattavuutta. Jokainen törmäys viholliseen maksaa yhden elämän. Näytämme jäljellä olevat elämät oikeassa alakulmassa aluksen ikoneilla .
`history.pushState` luo uusia merkintöjä selaimen navigointihistoriaan. Voit tarkistaa tämän pitämällä *takaisin-painiketta* painettuna selaimessasi, sen pitäisi näyttää jotain tällaista:
Jos yrität klikata takaisin-painiketta muutaman kerran, huomaat, että nykyinen URL-osoite muuttuu ja historia päivittyy, mutta sama template pysyy näytettynä.
@ -190,7 +190,7 @@ Kuten Titanicin osastoitu rakenne, joka vaikutti vankalta, kunnes useat osastot
Sen sijaan, että juoksisimme ympyrää, luomme **keskitetyn tilanhallintajärjestelmän**. Ajattele sitä kuin yhtä todella järjestelmällistä henkilöä, joka vastaa kaikesta tärkeästä:
@ -112,7 +112,7 @@ Katso [palvelimen API-dokumentaatio](../api/README.md) saadaksesi tietoa:
**Odotettu tulos:**
Tehtävän suorittamisen jälkeen pankkisovelluksessasi pitäisi olla täysin toimiva "Lisää tapahtuma" -ominaisuus, joka näyttää ja käyttäytyy ammattimaisesti:
Tässä projektissa opit rakentamaan kuvitteellisen pankin. Näissä oppitunneissa annetaan ohjeita siitä, miten verkkosovellus suunnitellaan ja reitit määritetään, miten lomakkeita rakennetaan, tilaa hallitaan ja tietoja haetaan API:sta, josta voit hakea pankin tiedot.
Kun CodeSwing on asennettu, näet ansioluettelosivustosi reaaliaikaisen esikatselun editorissa. Tämä mahdollistaa sen, että näet tarkalleen, miltä sivustosi näyttää tehdessäsi muutoksia.
**Parannetun käyttöliittymän ymmärtäminen:**
- **Jaettu näkymä**: **Näyttää** koodisi toisella puolella ja reaaliaikaisen esikatselun toisella
**Keskeinen periaate**: Tekoälysovellusten kehitys yhdistää perinteiset verkkokehitystaidot tekoälypalveluiden integrointiin, luoden älykkäitä sovelluksia, jotka tuntuvat käyttäjille luonnollisilta ja reagoivilta.
**Mikä tekee Playgroundista niin hyödyllisen:**
- **Kokeile** eri tekoälymalleja, kuten GPT-4o-mini, Claude ja muita (kaikki ilmaisia!)
@ -204,7 +204,7 @@ mindmap
Kun olet kokeillut hieman, klikkaa vain "Code"-välilehteä ja valitse ohjelmointikieli saadaksesi toteutuskoodin, jota tarvitset.
- **Siirry** [Web Dev For Beginners -repositoryyn](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Klikkaa** "Use this template" oikeassa yläkulmassa (varmista, että olet kirjautunut GitHubiin)
**Vaihe 2: Käynnistä Codespaces**
- **Avaa** juuri luomasi repository
- **Klikkaa** vihreää "Code"-painiketta ja valitse "Codespaces"
- **Valitse** "Create codespace on main" aloittaaksesi kehitysympäristön
@ -17,7 +17,7 @@ Tu connais ce moment où tu utilises ton application préférée et tout s’emb
Aujourd’hui, nous allons explorer les outils incroyables qui rendent le développement web moderne non seulement possible, mais carrément addictif. Je parle exactement des éditeurs, navigateurs et flux de travail que les développeurs de Netflix, Spotify et ton studio d’applications indie préféré utilisent chaque jour. Et voici la partie qui va te faire danser de joie : la plupart de ces outils professionnels, standards de l’industrie, sont complètement gratuits !
@ -17,7 +17,7 @@ Je sais que tout cela peut sembler beaucoup au début – franchement, je me sou
Nous allons faire ce voyage ensemble, étape par étape. Pas de précipitation, pas de pression – juste toi, moi, et quelques outils vraiment sympas qui vont devenir tes nouveaux meilleurs amis !
> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -604,7 +604,7 @@ Tout d’abord, trouvons un dépôt (ou **repo**) sur GitHub qui vous intéresse
✅ Un bon moyen de trouver des dépôts "accessibles aux débutants" est de [chercher avec le tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Il existe plusieurs façons de copier du code. Une façon est de "cloner" le contenu du dépôt, en utilisant HTTPS, SSH, ou l’interface en ligne de commande GitHub CLI.
> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, ou HyperText Markup Language, est le fondement de tous les sites web que vous avez jamais visités. Pensez à HTML comme au squelette qui donne la structure aux pages web – il définit où va le contenu, comment il est organisé et ce que chaque élément représente. Alors que le CSS "habillera" ultérieurement votre HTML avec des couleurs et des mises en page, et que JavaScript lui donnera vie avec de l’interactivité, HTML fournit la structure essentielle qui rend tout le reste possible.
@ -86,7 +86,7 @@ Vous allez créer un dossier dédié pour votre projet terrarium et y ajouter vo
4. Dans le panneau Explorateur, cliquez sur l’icône "Nouveau fichier"
5. Nommez votre fichier `index.html`
**Option 2 : Utiliser des Commandes Terminal**
```bash
@ -236,48 +236,48 @@ Ajoutez maintenant les images des plantes organisées en deux colonnes entre vos
> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac)
Vous vous souvenez comment votre terrarium HTML avait l’air assez basique ? Le CSS est ce qui transforme cette structure simple en quelque chose de visuellement attrayant.
@ -202,7 +202,7 @@ body {
Ouvrez les outils de développement de votre navigateur (F12), allez dans l’onglet Éléments, et inspectez votre élément `<h1>`. Vous verrez qu’il hérite de la famille de polices du body :
✅ **Temps d’expérimentation** : Essayez de définir d’autres propriétés héritables sur le `<body>` comme `color`, `line-height` ou `text-align`. Que se passe-t-il pour votre titre et les autres éléments ?
@ -332,7 +332,7 @@ Dans notre terrarium, chaque plante nécessite un style similaire mais doit auss
**Voici la structure HTML pour chaque plante :**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.fr.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/fr/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ Prêt à améliorer votre terrarium avec des reflets de verre réalistes ? Cette
Vous allez créer des reflets subtils qui simulent la façon dont la lumière se reflète sur les surfaces de verre. Cette approche est similaire à celle utilisée par les peintres de la Renaissance comme Jan van Eyck qui utilisaient lumière et réflexion pour donner un aspect tridimensionnel au verre peint. Voici ce que vous devrez viser :
> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac)
Bienvenue dans l'un des aspects les plus passionnants du développement web - rendre les choses interactives ! Le Document Object Model (DOM) est comme un pont entre votre HTML et JavaScript, et aujourd'hui nous l'utiliserons pour donner vie à votre terrarium. Lorsque Tim Berners-Lee a créé le premier navigateur web, il imaginait un web où les documents pourraient être dynamiques et interactifs - le DOM rend cette vision possible.
@ -102,7 +102,7 @@ flowchart TD
style P fill:#ffebee
style Q fill:#ffebee
```
> Une représentation du DOM et du balisage HTML qui le référence. Par [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **Comprendre les Closures** : Les closures sont un sujet important en JavaScript, et beaucoup de développeurs les utilisent pendant des années avant de maîtriser tous les aspects théoriques. Aujourd'hui, nous nous concentrons sur l'application pratique - vous verrez les closures émerger naturellement au fur et à mesure que nous construisons nos fonctionnalités interactives. La compréhension se développera en voyant comment elles résolvent des problèmes réels.
> Une représentation du DOM et du balisage HTML qui le référence. Par [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
> Quelques navigateurs anciens, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Comment les navigateurs traitent le contenu web
@ -194,7 +194,7 @@ quadrantChart
Comprendre le processus d'installation d'une extension vous aide à anticiper l'expérience utilisateur lorsque des personnes installent votre extension. Le processus d'installation est standardisé sur les navigateurs modernes, avec de légères variations dans la conception de l'interface.
> **Important** : Assurez-vous d'activer le mode développeur et d'autoriser les extensions provenant d'autres magasins lors du test de vos propres extensions.
@ -308,10 +308,10 @@ Cela suit le principe de divulgation progressive utilisé dans la conception d'i
### Vue d'ensemble des vues de l'extension
**Vue de configuration** - Configuration utilisateur initiale :
**Vue des résultats** - Affichage des données d'empreinte carbone :
Reset --> ClearStorage: Supprimer les données sauvegardées
ClearStorage --> FirstTime: Retour à l'installation
```
> ⚠️ **Considération de sécurité** : Dans les applications en production, stocker les clés API dans LocalStorage présente des risques de sécurité puisque JavaScript peut accéder à ces données. Pour l’apprentissage, cette approche fonctionne bien, mais les applications réelles doivent utiliser un stockage sécurisé côté serveur pour les informations sensibles.
@ -123,7 +123,7 @@ Pour ouvrir les Outils de développement dans Edge, cliquez sur ces trois points
Essayons cela. Ouvrez un site web (Microsoft.com fonctionne bien) et cliquez sur ce bouton « Enregistrer ». Maintenant, rafraîchissez la page et regardez le profileur capturer tout ce qui se passe. Quand vous arrêtez l’enregistrement, vous verrez une répartition détaillée de comment le navigateur « script », « rend » et « peint » le site. Cela me fait penser à la manière dont le centre de contrôle de mission surveille chaque système durant le lancement d’une fusée - vous obtenez des données en temps réel sur ce qui se passe et quand.
✅ La [Documentation Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) propose beaucoup plus de détails si vous souhaitez approfondir
@ -133,11 +133,11 @@ Sélectionnez des éléments dans la timeline du profil pour zoomer sur des év
Prenez un instantané des performances de votre page en sélectionnant une partie de la timeline du profil et en regardant le panneau de résumé :
✅ Familiarisez-vous avec votre profileur ! Ouvrez les outils de développement sur ce site et voyez s’il y a des goulots d’étranglement. Quel est l’actif qui charge le plus lentement ? Le plus rapidement ?
> Image de [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Pour dessiner sur l’élément canvas, vous suivrez le même processus en trois étapes qui forme la base de tous les graphismes sur canvas. Une fois que vous faites cela quelques fois, cela devient naturel :
@ -323,11 +323,11 @@ Vous allez créer une page web avec un élément Canvas. Elle doit afficher un
- **Système de score** : Chaque vaisseau ennemi détruit rapporte 100 points (les nombres ronds sont plus faciles à calculer mentalement pour les joueurs). Le score s’affiche en bas à gauche.
- **Compteur de vies** : Votre héros commence avec trois vies – une norme fixée par les premiers jeux d’arcade pour équilibrer défi et jouabilité. Chaque collision avec un ennemi coûte une vie. Nous afficherons les vies restantes en bas à droite à l’aide d’icônes de vaisseau .
- **Compteur de vies** : Votre héros commence avec trois vies – une norme fixée par les premiers jeux d’arcade pour équilibrer défi et jouabilité. Chaque collision avec un ennemi coûte une vie. Nous afficherons les vies restantes en bas à droite à l’aide d’icônes de vaisseau .
L’utilisation de `history.pushState` crée de nouvelles entrées dans l’historique de navigation du navigateur. Vous pouvez vérifier cela en maintenant appuyé le *bouton retour* de votre navigateur, cela devrait afficher quelque chose comme ceci :
Si vous cliquez plusieurs fois sur le bouton retour, vous verrez que l’URL change et que l'historique est mis à jour, mais que le même template reste affiché.
@ -292,7 +292,7 @@ Commençons par observer ce qui se passe avec la soumission basique d’un formu
2. Observez les changements dans la barre d’adresse de votre navigateur
3. Notez comment la page se recharge et les données apparaissent dans l’URL
### Comparaison des méthodes HTTP
@ -346,7 +346,7 @@ Configurons votre formulaire d’inscription pour communiquer correctement avec
2. **Cliquez** sur le bouton "Créer un compte"
3. **Observez** la réponse du serveur dans votre navigateur
**Ce que vous devriez voir :**
- **Le navigateur redirige** vers l’URL du point de terminaison API
@ -609,7 +609,7 @@ async function register() {
3. **Cliquez** sur "Créer un compte"
4. **Observez** les messages dans la console et les retours utilisateurs
**Ce que vous devriez voir :**
- **État de chargement** visible sur le bouton de soumission
@ -783,7 +783,7 @@ Améliorons votre formulaire d’inscription avec une validation robuste offrant
3. **Essayez** des caractères spéciaux dans le champ nom d’utilisateur
4. **Indiquez** un montant de solde négatif
**Ce que vous observerez :**
- **Le navigateur affiche** les messages natifs de validation
@ -943,7 +943,7 @@ Affichez un message d'erreur dans le HTML si l'utilisateur existe déjà.
Voici un exemple de l'apparence que peut avoir la page de connexion finale après un peu de stylisation :
@ -187,7 +187,7 @@ La [gestion d’état](https://fr.wikipedia.org/wiki/Gestion_d%27%C3%A9tat) cons
Au lieu de courir après notre queue, nous allons créer un système de **gestion d’état centralisé**. Pensez-y comme avoir une personne vraiment organisée en charge de toutes les choses importantes :
```mermaid
flowchart TD
@ -798,7 +798,7 @@ Ce défi vous aidera à penser comme un développeur professionnel mêlant expé
Voici un exemple de résultat après avoir complété le devoir :
@ -112,7 +112,7 @@ Référez-vous à la [documentation API serveur](../api/README.md) pour :
**Résultat attendu :**
Après avoir réalisé cette tâche, votre application bancaire doit disposer d’une fonctionnalité "Ajouter une transaction" complètement fonctionnelle, professionnelle en apparence et en comportement :
@ -182,7 +182,7 @@ Commencez par naviguer sur [vscode.dev](https://vscode.dev) dans votre navigateu
Une fois que tout est chargé, vous verrez un espace de travail joliment épuré, conçu pour vous garder concentré sur l’essentiel – votre code !
**Voici votre visite du quartier :**
- **Barre d’activité** (la bande sur la gauche) : votre navigation principale avec Explorateur 📁, Recherche 🔍, Contrôle de Source 🌿, Extensions 🧩, et Paramètres ⚙️
@ -229,7 +229,7 @@ Parfait quand vous commencez dans VSCode.dev et souhaitez ouvrir un dépôt spé
1. Rendez-vous sur [vscode.dev](https://vscode.dev) si vous n’y êtes pas encore
2. Cherchez le bouton "Open Remote Repository" sur l’écran d’accueil et cliquez dessus
3. Collez l’URL de n’importe quel dépôt GitHub (essayez celui-ci : `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. Appuyez sur Entrée et regardez la magie opérer !
@ -238,7 +238,7 @@ Parfait quand vous commencez dans VSCode.dev et souhaitez ouvrir un dépôt spé
Envie de vous sentir comme un magicien du code ? Essayez ce raccourci clavier : Ctrl+Shift+P (ou Cmd+Shift+P sur Mac) pour ouvrir la Palette de Commandes :
**La Palette de Commandes, c’est comme un moteur de recherche pour tout ce que vous pouvez faire :**
- Tapez "open remote" et elle vous trouvera l’outil pour ouvrir un dépôt
@ -300,7 +300,7 @@ Comme organiser des plans dans le bureau d’un architecte, la création de fich
3. Entrez le nom du fichier incluant l’extension appropriée (`style.css`, `script.js`, `index.html`)
4. Appuyez sur Entrée pour créer le fichier
**Conventions de nommage :**
- Utilisez des noms descriptifs qui indiquent la fonction du fichier
@ -318,7 +318,7 @@ C’est là que le vrai plaisir commence ! L’éditeur de VSCode.dev regorge de
2. Commencez à taper et regardez VSCode.dev vous aider avec les couleurs, les suggestions et la détection d’erreurs
3. Sauvegardez votre travail avec Ctrl+S (Windows/Linux) ou Cmd+S (Mac) – même si l’enregistrement automatique est aussi actif !
**Les choses cool qui se passent pendant que vous codez :**
- Votre code est joliment coloré pour le rendre facile à lire
@ -339,7 +339,7 @@ Comme les archéologues qui créent des registres détaillés des couches de fou
2. Les fichiers modifiés apparaissent dans la section "Modifications"
3. La coloration indique les types de changement : vert pour ajouts, rouge pour suppressions
**Sauvegarder votre travail (le flux de travail du commit) :**
@ -431,7 +431,7 @@ Le marketplace des extensions est vraiment bien organisé, vous ne vous perdrez
2. Parcourez ou recherchez quelque chose de spécifique
3. Cliquez sur tout ce qui vous semble intéressant pour en savoir plus
**Ce que vous y verrez :**
@ -484,7 +484,7 @@ La plupart des extensions proposent des paramètres que vous pouvez ajuster pour
3. Choisissez « Paramètres de l’extension » dans le menu déroulant
4. Modifiez les réglages jusqu’à ce que ce soit parfait pour votre flux de travail
**Choses courantes que vous pourriez vouloir modifier :**
- Comment votre code est formaté (tabulations vs espaces, longueur des lignes, etc.)
@ -78,7 +78,7 @@ Puisque VSCode.dev requiert au moins un fichier pour ouvrir un dépôt, nous all
4. **Écrivez** un message de commit : « Add initial HTML structure »
5. **Cliquez** sur « Commit new file » pour sauvegarder vos modifications
**Voici ce que cette configuration initiale accomplit :**
- **Établit** une structure de document HTML5 correcte avec des éléments sémantiques
@ -105,7 +105,7 @@ Maintenant que les fondations de votre dépôt sont posées, passons à VSCode.d
✅ **Indicateur de réussite** : Vous devriez voir les fichiers de votre projet dans la barre latérale de l’Explorateur et `index.html` disponible à l’édition dans la zone principale.
**Ce que vous verrez dans l’interface :**
- **Barre latérale Explorateur** : **Affiche** les fichiers et dossiers de votre dépôt
@ -450,7 +450,7 @@ Les extensions améliorent votre expérience de développement en fournissant de
**Résultats immédiats après installation :**
Une fois CodeSwing installé, vous verrez une prévisualisation en direct de votre site de CV apparaître dans l’éditeur. Cela vous permet de voir exactement à quoi ressemble votre site au fur et à mesure des modifications.
**Comprendre l’interface améliorée :**
- **Vue en double** : **Montre** votre code d’un côté et la prévisualisation en direct de l’autre
## 🗺️ Votre parcours d’apprentissage au travers du développement d’applications IA
@ -189,7 +189,7 @@ mindmap
```
**Principe clé** : Le développement d’applications IA combine des compétences traditionnelles de développement web avec l’intégration de services IA, créant des applications intelligentes qui paraissent naturelles et réactives pour les utilisateurs.
**Voici ce qui rend le playground si utile :**
- **Essayez** différents modèles IA comme GPT-4o-mini, Claude et d’autres (tous gratuits !)
@ -199,7 +199,7 @@ mindmap
Une fois que vous avez joué un peu, cliquez simplement sur l’onglet « Code » et choisissez votre langage pour obtenir le code d’implémentation dont vous avez besoin.
## Mise en place de l’intégration back-end Python
@ -2350,14 +2350,14 @@ Vous souhaitez tester ce projet dans un environnement de développement cloud ?
- **Accédez** au [dépôt Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Cliquez** sur "Use this template" en haut à droite (assurez-vous d’être connecté à GitHub)
**Étape 2 : Lancer Codespaces**
- **Ouvrez** votre nouveau dépôt créé
- **Cliquez** sur le bouton vert "Code" et sélectionnez "Codespaces"
- **Choisissez** "Create codespace on main" pour démarrer votre environnement de développement
**Étape 3 : Configuration de l’environnement**
Une fois votre Codespace chargé, vous aurez accès à :
Chaque leçon inclut un devoir à compléter, un contrôle des connaissances et un défi pour vous guider dans l’apprentissage de sujets comme :
@ -115,7 +115,7 @@ Suivez ces étapes :
Dans votre copie de ce dépôt que vous avez créée, cliquez sur le bouton **Code** et sélectionnez **Open with Codespaces**. Cela créera un nouveau Codespace pour que vous puissiez y travailler.
היום, אנחנו הולכים לחקור את הכלים המדהימים שהופכים את פיתוח האינטרנט המודרני לא רק לאפשרי, אלא לממכר ברצינות. אני מדבר על אותם עורכים, דפדפנים ותהליכי עבודה שהמפתחים בנטפליקס, ספוטיפיי, ובסטודיו האפליקציות האהוב עליך משתמשים בהם כל יום. והנה החלק שיגרום לך לרקוד משמחה: רוב הכלים המקצועיים האלה, ברמת תעשייה, הם לגמרי בחינם!
> איור מאת [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -605,7 +605,7 @@ flowchart TD
✅ דרך טובה למצוא ריפואים 'ידידותיים למתחילים' היא [לחפש לפי התג 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
> איור מאת [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -1045,12 +1045,12 @@ pie title "Common ARIA Usage Patterns"
**תמונות אינפורמטיביות** - מעבירות מידע חשוב:
```html
<imgsrc="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.he.png" alt="Sales increased 25% from Q1 to Q2 2024">
<imgsrc="../../../../translated_images/he/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
**תמונות דקורטיביות** - חזותיות בלבד ללא ערך מידע:
> סקיצה מאת [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, או HyperText Markup Language, הוא הבסיס לכל אתר שביקרת בו אי פעם. חשבו על HTML כשלד שמעניק מבנה לדפי אינטרנט – הוא מגדיר היכן התוכן נמצא, איך הוא מאורגן ומה כל חלק מייצג. בעוד ש-CSS "ילביש" את ה-HTML בצבעים ובפריסות, ו-JavaScript יעניק לו חיים עם אינטראקטיביות, HTML מספק את המבנה הבסיסי שמאפשר את כל השאר.
@ -88,7 +88,7 @@ mindmap
4. בלוח ה-Explorer, לחצו על אייקון "New File"
5. תנו לקובץ את השם `index.html`
**אפשרות 2: שימוש בפקודות טרמינל**
```bash
@ -239,48 +239,48 @@ HTML משתמש בתגים זוגיים כדי להגדיר אלמנטים. לר
✅ **זמן ניסוי**: נסו להגדיר תכונות אחרות שניתן לרשת על `<body>` כמו `color`, `line-height` או `text-align`. מה קורה לכותרת ולשאר האלמנטים?
@ -335,7 +335,7 @@ h1 {
**הנה מבנה ה-HTML לכל צמח:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.he.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/he/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.png" />
</div>
```
@ -599,7 +599,7 @@ flowchart LR
תיצרו הדגשות עדינות שמדמות כיצד אור משתקף על פני זכוכית. גישה זו דומה לאופן שבו ציירי הרנסנס כמו יאן ואן אייק השתמשו באור והשתקפות כדי לגרום לזכוכית מצוירת להיראות תלת-ממדית. הנה מה שאתם שואפים להשיג:
> איור מאת [Tomomi Imura](https://twitter.com/girlie_mac)
ברוכים הבאים לאחד ההיבטים המרתקים ביותר בפיתוח אתרים - הפיכת דברים לאינטראקטיביים! מודל האובייקטים של המסמך (DOM) הוא כמו גשר בין ה-HTML שלך ל-JavaScript, והיום נשתמש בו כדי להחיות את הטרריום שלך. כשטים ברנרס-לי יצר את הדפדפן הראשון, הוא דמיין רשת שבה מסמכים יכולים להיות דינמיים ואינטראקטיביים - ה-DOM הופך את החזון הזה לאפשרי.
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
> ייצוג של ה-DOM והסימון של ה-HTML שמתייחס אליו. מתוך [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **הבנת סגירות**: סגירות הן נושא משמעותי ב-JavaScript, ומפתחים רבים משתמשים בהן במשך שנים לפני שהם מבינים את כל ההיבטים התיאורטיים. היום נתמקד ביישום מעשי - תראה סגירות מופיעות באופן טבעי כשנבנה את התכונות האינטראקטיביות שלנו. ההבנה תתפתח כשתראה איך הן פותרות בעיות אמיתיות.
> ייצוג של ה-DOM והסימון של ה-HTML שמתייחס אליו. מתוך [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -593,7 +593,7 @@ function stopElementDrag() {
- **תמיכה חוצת מכשירים**: עובד על מחשבים שולחניים וניידים
- **מודעות ביצועים**: ללא דליפות זיכרון או חישובים מיותרים
> כמה דפדפנים מוקדמים, דרך [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### איך דפדפנים מעבדים תוכן אינטרנטי
@ -198,7 +198,7 @@ quadrantChart
הבנת תהליך התקנת ההרחבות עוזרת לכם לצפות את חוויית המשתמש כאשר אנשים מתקינים את ההרחבה שלכם. תהליך ההתקנה סטנדרטי בדפדפנים מודרניים, עם וריאציות קלות בעיצוב הממשק.
> **חשוב**: ודאו שאתם מפעילים מצב מפתחים ומאפשרים הרחבות מחנויות אחרות כאשר אתם בודקים את ההרחבות שלכם.
@ -313,10 +313,10 @@ project-root/
### סקירת תצוגות ההרחבה
**תצוגת הגדרות** - הגדרת משתמש בפעם הראשונה:
**תצוגת תוצאות** - הצגת נתוני טביעת רגל פחמנית:
> ⚠️ **שיקול אבטחה**: באפליקציות ייצור, אחסון מפתחות API ב-LocalStorage מהווה סיכון אבטחה מכיוון ש-JavaScript יכול לגשת לנתונים אלה. למטרות לימוד, הגישה הזו מתאימה, אבל באפליקציות אמיתיות יש להשתמש באחסון מאובטח בצד השרת עבור אישורים רגישים.
בואו ננסה את זה. פתחו אתר (Microsoft.com עובד טוב לזה) ולחצו על כפתור 'הקלט'. עכשיו רעננו את הדף וצפו בפרופיילר לוכד את כל מה שקורה. כשעוצרים את ההקלטה, תראו פירוט מפורט של איך הדפדפן 'מפעיל', 'מצייר' ו'מעדכן' את האתר. זה מזכיר לי איך מרכז הבקרה עוקב אחרי כל מערכת בזמן שיגור רקטה - אתם מקבלים נתונים בזמן אמת על מה בדיוק קורה ומתי.
✅ [תיעוד Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) מכיל המון פרטים נוספים אם אתם רוצים לצלול לעומק
@ -136,11 +136,11 @@ flowchart LR
קבלו תמונת מצב של ביצועי הדף שלכם על ידי בחירת חלק מציר הזמן של הפרופיל והסתכלות על חלונית הסיכום:
בדקו את חלונית יומן האירועים כדי לראות אם יש אירוע שלקח יותר מ-15 מילי-שניות:
✅ הכירו את הפרופיילר שלכם! פתחו את כלי המפתחים באתר הזה ובדקו אם יש צווארי בקבוק. מהו הנכס שנטען הכי לאט? הכי מהר?
באמצעות ה-API של CO2 Signal של tmrow למעקב אחר צריכת חשמל, ניתן לבנות תוסף לדפדפן שיזכיר לכם ישירות בדפדפן עד כמה צריכת החשמל באזורכם כבדה. שימוש בתוסף זה באופן מזדמן יעזור לכם לקבל החלטות מושכלות על פעילויותיכם בהתבסס על מידע זה.
## התחלת עבודה
@ -31,7 +31,7 @@ npm run build
כדי להתקין ב-Edge, השתמשו בתפריט 'שלוש הנקודות' בפינה הימנית העליונה של הדפדפן כדי למצוא את לוח ההרחבות. משם, בחרו 'Load Unpacked' כדי לטעון תוסף חדש. בחרו בתיקיית 'dist' כאשר תתבקשו, והתוסף ייטען. כדי להשתמש בו, תצטרכו מפתח API ל-API של CO2 Signal ([השיגו אחד כאן דרך אימייל](https://www.co2signal.com/) - הזינו את האימייל שלכם בתיבה בעמוד זה) ואת [הקוד לאזור שלכם](http://api.electricitymap.org/v3/zones) התואם ל-[Electricity Map](https://www.electricitymap.org/map) (לדוגמה, בבוסטון אני משתמש ב-'US-NEISO').
לאחר הזנת מפתח ה-API והאזור בממשק התוסף, הנקודה הצבעונית בסרגל התוספים של הדפדפן אמורה להשתנות כדי לשקף את צריכת האנרגיה באזורכם ולתת לכם רמז אילו פעילויות כבדות אנרגיה מתאימות לביצוע. הרעיון מאחורי מערכת ה'נקודה' הזו הושאל מתוסף [Energy Lollipop](https://energylollipop.com/) לפליטות בקליפורניה.
באמצעות ה-API של CO2 Signal מבית tmrow למעקב אחר צריכת חשמל, ניתן ליצור הרחבת דפדפן שתספק תזכורת ישירה בדפדפן לגבי צריכת החשמל באזור שלך. השימוש בהרחבה זו יעזור לך לקבל החלטות בנוגע לפעילויות שלך בהתבסס על מידע זה.
להתקנה ב-Edge, השתמש בתפריט 'שלוש הנקודות' בפינה הימנית העליונה של הדפדפן כדי למצוא את לוח ההרחבות. משם, בחר 'טען ללא אריזה' כדי לטעון הרחבה חדשה. פתח את תיקיית 'dist' כאשר תתבקש, וההרחבה תיטען. כדי להשתמש בה, תצטרך מפתח API ל-API של CO2 Signal ([קבל אחד כאן באמצעות דוא"ל](https://www.co2signal.com/) - הזן את כתובת הדוא"ל שלך בתיבה שבדף זה) ואת [הקוד לאזור שלך](http://api.electricitymap.org/v3/zones) המתאים ל-[מפת החשמל](https://www.electricitymap.org/map) (לדוגמה, בבוסטון אני משתמש ב-'US-NEISO').
לאחר הזנת מפתח ה-API והאזור בממשק ההרחבה, הנקודה הצבעונית בסרגל ההרחבות של הדפדפן אמורה להשתנות כדי לשקף את צריכת האנרגיה באזור שלך ולספק לך אינדיקציה לגבי פעילויות עתירות אנרגיה שיהיו מתאימות עבורך. הרעיון מאחורי מערכת ה"נקודות" הזו הגיע אליי מה-[הרחבת Energy Lollipop](https://energylollipop.com/) עבור פליטות בקליפורניה.
באמצעות ה-API של CO2 Signal מבית tmrow למעקב אחר צריכת חשמל, צרו הרחבת דפדפן שתאפשר לכם לקבל תזכורת ישירות בדפדפן על צריכת החשמל באזורכם. השימוש בהרחבה זו יעזור לכם לקבל החלטות מושכלות לגבי הפעילויות שלכם בהתבסס על מידע זה.
## התחלה
@ -31,7 +31,7 @@ npm run build
כדי להתקין ב-Edge, השתמשו בתפריט 'שלוש נקודות' בפינה הימנית העליונה של הדפדפן כדי למצוא את לוח ההרחבות. משם, בחרו 'טען הרחבה לא מכווצת' כדי לטעון הרחבה חדשה. פתחו את תיקיית 'dist' כאשר תתבקשו, וההרחבה תיטען. כדי להשתמש בה, תצטרכו מפתח API ל-API של CO2 Signal ([קבלו אחד כאן באמצעות אימייל](https://www.co2signal.com/) - הכניסו את כתובת האימייל שלכם בתיבה בעמוד זה) ואת [קוד האזור שלכם](http://api.electricitymap.org/v3/zones) התואם ל[מפת החשמל](https://www.electricitymap.org/map) (לדוגמה, בבוסטון אני משתמש ב-'US-NEISO').
לאחר שהזנתם את מפתח ה-API ואת האזור בממשק ההרחבה, הנקודה הצבעונית בסרגל ההרחבות של הדפדפן אמורה להשתנות כדי לשקף את צריכת האנרגיה באזורכם ולספק לכם אינדיקציה לגבי פעילויות עתירות אנרגיה שיהיה מתאים לבצע. הרעיון מאחורי מערכת ה'נקודות' הזו נלקח מה-[הרחבת Energy Lollipop](https://energylollipop.com/) עבור פליטות קליפורניה.
שימוש ב-API של CO2 Signal של tmrow למעקב אחר צריכת חשמל, בניית תוסף דפדפן שיזכיר לכם כמה עמוסה צריכת החשמל באזורכם דרך הדפדפן שלכם. שימוש בתוסף הזה יכול לעזור לכם לקבל החלטות על סמך המידע הזה לגבי הפעילויות שלכם.
## התחלה
@ -31,7 +31,7 @@ npm run build
להתקנה בדפדפן Edge, השתמשו בתפריט 'שלוש נקודות' בפינה הימנית העליונה של הדפדפן כדי למצוא את פאנל התוספים. משם, בחרו 'טעינת תוסף לא ארוז' כדי לטעון תוסף חדש. בתיבת הדיאלוג, פתחו את תיקיית 'dist' והתוסף ייטען. כדי להשתמש בו, תצטרכו מפתח API ל-CO2 Signal ([קבלו אותו כאן דרך אימייל](https://www.co2snal.com/) - הזינו את האימייל שלכם בתיבה בעמוד זה) וקוד [האזור שלכם](http://api.electricitymap.org/v3/zones) [במפת החשמל](https://www.electricitymap.org/map) (לדוגמה, בבוסטון אני משתמש ב-'US-NEISO').
לאחר הזנת מפתח ה-API והאזור בממשק התוסף, הנקודה הצבעונית בסרגל התוספים של הדפדפן אמורה להשתנות כדי לשקף את צריכת האנרגיה באזורכם ולספק לכם אינדיקציה אילו פעילויות כבדות אנרגיה מתאימות לביצוע. הרעיון מאחורי מערכת ה'נקודה' הזו הגיע לי מתוסף [Energy Lollipop](https://energylollipop.com/) עבור פליטות קליפורניה.
נשתמש ב-API של Signal CO2 מבית tmrow כדי לעקוב אחר צריכת החשמל וליצור תוסף לדפדפן, כך שנוכל לקבל תזכורת ישירות בדפדפן על כמה כבדה צריכת החשמל באזור שלנו. השימוש בתוסף הזה יעזור להעריך את הפעילויות שלנו בהתבסס על המידע הזה.
## איך להתחיל
@ -31,7 +31,7 @@ npm run build
להתקנה ב-Edge, יש להשתמש בתפריט "שלוש נקודות" בפינה הימנית העליונה של הדפדפן כדי למצוא את לוח הבקרה של תוספים. אם מצב מפתחים לא פעיל, יש להפעיל אותו (בפינה השמאלית התחתונה). לבחור "טען ללא דחיסה" כדי לטעון תוסף חדש. לפתוח את תיקיית "dist" בהנחיה, והתוסף ייטען. כדי להשתמש בו, תצטרכו מפתח API ל-API של CO2 Signal (ניתן [לקבל אותו כאן דרך אימייל](https://www.co2signal.com/) - הכניסו את כתובת האימייל שלכם בתיבה בעמוד הזה) ואת [קוד האזור שלכם](http://api.electricitymap.org/v3/zones) התואם ל-[מפת החשמל](https://www.electricitymap.org/map) (לדוגמה, בבוסטון, "US-NEISO").
לאחר שמפתח ה-API והאזור הוזנו בממשק התוסף, הנקודה הצבעונית בסרגל התוסף בדפדפן אמורה להשתנות כדי לשקף את צריכת האנרגיה באזור ולספק רמז אילו פעילויות עתירות אנרגיה יהיו מתאימות לביצוע. הרעיון מאחורי מערכת ה"נקודות" הזו נלקח מה-[תוסף Energy Lollipop](https://energylollipop.com/) עבור פליטות בקליפורניה.
בנו תוסף לדפדפן שמציג תזכורת על צריכת החשמל באזורכם, באמצעות ה-API של CO2 Signal מבית tmrow. התוסף מאפשר לכם לעקוב אחר צריכת החשמל באזורכם ולהשתמש במידע הזה כדי לקבל החלטות מושכלות לגבי הפעילות שלכם.
## הקדמה
@ -31,7 +31,7 @@ npm run build
כדי להתקין ב-Edge, מצאו את לוח ה"הרחבות" דרך תפריט "שלוש הנקודות" בפינה הימנית העליונה של הדפדפן. משם, בחרו "Load Unpacked" כדי לטעון את התוסף החדש. כאשר תתבקשו, פתחו את תיקיית "dist", והתוסף ייטען. לשימוש בתוסף, תצטרכו מפתח API של CO2 Signal ([קבלו אחד כאן דרך אימייל](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/) שנועד למעקב אחר פליטות בקליפורניה.
באמצעות ה-API של CO2 Signal מבית tmrow לזיהוי צריכת חשמל, ניתן לבנות תוסף לדפדפן שיתריע בפניכם על רמת צריכת החשמל באזורכם. שימוש בתוסף זה יעזור לכם לקבל החלטות מושכלות לגבי הפעילויות שלכם בהתבסס על המידע הזה.
## התחלה
@ -31,7 +31,7 @@ npm run build
כדי להתקין ב-Edge, השתמשו בתפריט 'שלוש הנקודות' בפינה הימנית העליונה של הדפדפן כדי למצוא את לוח התוספים. משם, בחרו 'Load Unpacked' כדי לטעון את התוסף החדש. פתחו את תיקיית 'dist' לפי הבקשה, והתוסף ייטען. כדי להשתמש בו, תצטרכו מפתח API ל-API של CO2 Signal ([קבלו אחד כאן דרך אימייל](https://www.co2signal.com/) - הכניסו את האימייל שלכם בתיבה שבדף זה) ואת [הקוד לאזור שלכם](http://api.electricitymap.org/v3/zones) המתאים ל-[מפת החשמל](https://www.electricitymap.org/map) (לדוגמה, בבוסטון אני משתמש ב-'US-NEISO').
לאחר הכנסת מפתח ה-API והאזור לממשק התוסף, הנקודה הצבעונית בסרגל התוספים של הדפדפן תשתנה כדי לשקף את צריכת האנרגיה באזורכם ותספק לכם רמזים לגבי פעילויות כבדות שמתאימות לביצוע. הרעיון מאחורי מערכת ה'נקודה' הזו נלקח מ-[תוסף הדפדפן Energy Lollipop](https://energylollipop.com/) עבור פליטות בקליפורניה.
באמצעות ה-API של tmrow, C02 Signal, למעקב אחר צריכת חשמל, ניתן לבנות הרחבת דפדפן שתספק תזכורת ישירות בדפדפן לגבי רמת צריכת החשמל באזור שלך. שימוש בהרחבה זו באופן מזדמן יעזור לך לקבל החלטות מושכלות לגבי הפעילויות שלך בהתבסס על מידע זה.
## איך מתחילים
@ -31,7 +31,7 @@ npm run build
כדי להתקין ב-Edge, השתמשו בתפריט 'שלוש הנקודות' בפינה הימנית העליונה של הדפדפן כדי למצוא את לוח ההרחבות. משם, בחרו 'טעינת הרחבה לא ארוזה' כדי לטעון הרחבה חדשה. פתחו את תיקיית 'dist' כאשר תתבקשו, וההרחבה תיטען. כדי להשתמש בה, תצטרכו מפתח API ל-API של CO2 Signal ([קבלו אחד כאן דרך אימייל](https://www.co2signal.com/) - הכניסו את האימייל שלכם בתיבה בעמוד זה) ואת [קוד האזור שלכם](http://api.electricitymap.org/v3/zones) התואם ל-[Electricity Map](https://www.electricitymap.org/map) (לדוגמה, בבוסטון אני משתמש ב-'US-NEISO').
לאחר הזנת מפתח ה-API והאזור בממשק ההרחבה, הנקודה הצבעונית בסרגל ההרחבות של הדפדפן אמורה להשתנות כדי לשקף את צריכת האנרגיה באזור שלכם ולספק לכם הכוונה לגבי אילו פעילויות עתירות אנרגיה יהיו מתאימות לביצוע. הרעיון מאחורי מערכת ה'נקודה' הזו נלקח מההרחבה [Energy Lollipop](https://energylollipop.com/) לפליטות בקליפורניה.
localizeflow[bot]
3 months ago