आपण एकत्रितपणे हा प्रवास करू, एक पाऊल एकावेळी. घाई नाही, दबाव नाही – फक्त तुम्ही, मी आणि काही खरोखर छान साधने जी तुमचे नवीन सर्वोत्तम मित्र बनणार आहेत!
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांनी तयार केले आहे
```mermaid
@ -907,12 +907,12 @@ pie title "Common ARIA Usage Patterns"
**माहितीपूर्ण प्रतिमा** - महत्त्वाची माहिती देतात:
```html
<imgsrc="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.mr.png" alt="Sales increased 25% from Q1 to Q2 2024">
<imgsrc="../../../../translated_images/mr/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
**सजावटीच्या प्रतिमा** - फक्त दृश्यात्मक, कोणतेही माहितीपूर्ण मूल्य नाही:
HTML, म्हणजेच हायपरटेक्स्ट मार्कअप भाषा, ही तुम्ही कधीही भेट दिलेल्या प्रत्येक वेबसाइटची पायाभूत रचना आहे. HTML ला वेब पृष्ठांचे सांगाडा म्हणून विचार करा – ते सामग्री कुठे जाते, ती कशी आयोजित केली जाते आणि प्रत्येक भाग काय दर्शवतो हे परिभाषित करते. CSS नंतर तुमच्या HTML ला रंग आणि लेआउटसह "सजवेल", आणि JavaScript त्याला परस्परसंवादी बनवेल, HTML ही मूलभूत रचना प्रदान करते ज्यामुळे बाकी सर्व शक्य होते.
@ -88,7 +88,7 @@ HTML कोडमध्ये जाण्यापूर्वी, तुमच
4. Explorer पॅनमध्ये, "New File" आयकॉनवर क्लिक करा
5. तुमच्या फाइलचे नाव `index.html` ठेवा
**पर्याय 2: टर्मिनल कमांड्स वापरणे**
```bash
@ -239,48 +239,48 @@ HTML मध्ये प्रतिमा विशेष आहेत का
✅ **प्रयोग वेळ**: `<body>` वर `color`, `line-height`, किंवा `text-align` सारखी इतर वारसाहक्काने मिळणारी गुणधर्म सेट करण्याचा प्रयत्न करा. तुमच्या हेडिंग आणि इतर घटकांवर काय परिणाम होतो?
@ -335,7 +335,7 @@ ID सिलेक्टर्स `#` चिन्ह वापरतात आ
**प्रत्येक वनस्पतीसाठी HTML संरचना येथे आहे:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.mr.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/mr/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.png" />
</div>
```
@ -535,7 +535,7 @@ Agent मोड वापरून खालील आव्हान पूर
तुम्ही काचेच्या पृष्ठभागांवर प्रकाश कसा प्रतिबिंबित होतो हे अनुकरण करणारे सूक्ष्म हायलाइट्स तयार कराल. ही पद्धत रेनासन्स चित्रकार जॅन व्हॅन आयक यांनी काचेच्या पेंटिंगला त्रिमितीय बनवण्यासाठी प्रकाश आणि प्रतिबिंब कसे वापरले यासारखी आहे. तुम्ही यासाठी प्रयत्न कराल:
वेब विकासातील सर्वात आकर्षक पैलूंच्या स्वागतासाठी तयार व्हा - गोष्टी परस्परसंवादी बनवणे! डॉक्युमेंट ऑब्जेक्ट मॉडेल (DOM) हे तुमच्या HTML आणि जावास्क्रिप्टमधील एक पूल आहे, आणि आज आपण त्याचा उपयोग तुमच्या टेरारियमला जिवंत करण्यासाठी करू. जेव्हा टिम बर्नर्स-लीने पहिला वेब ब्राउझर तयार केला, तेव्हा त्यांनी एक वेब कल्पना केली होती जिथे दस्तऐवज गतिशील आणि परस्परसंवादी असू शकतात - DOM त्या दृष्टिकोनाला शक्य बनवते.
> 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
> 💡 **क्लोजर्स समजून घेणे**: क्लोजर्स जावास्क्रिप्टमधील एक महत्त्वाचा विषय आहे, आणि अनेक विकसक त्याचा पूर्ण सैद्धांतिक पैलू समजण्याआधी अनेक वर्षे त्याचा वापर करतात. आज, आम्ही व्यावहारिक अनुप्रयोगावर लक्ष केंद्रित करत आहोत - तुम्ही पाहाल की ते परस्परसंवादी वैशिष्ट्ये तयार करताना नैसर्गिकरित्या कसे उद्भवतात. समजून घेणे विकसित होईल कारण तुम्ही पाहाल की ते वास्तविक समस्यांचे निराकरण कसे करतात.
> DOM आणि त्याचा संदर्भ देणारा HTML मार्कअपचे प्रतिनिधित्व. [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) कडून
@ -540,7 +540,7 @@ function stopElementDrag() {
- **क्रॉस-डिव्हाइस सपोर्ट**: डेस्कटॉप आणि मोबाइलवर कार्य करते
- **परफॉर्मन्स कॉन्शस**: मेमरी लीक किंवा अनावश्यक गणना नाही
एक छोटासा ड्रॅग आणि ड्रॉप कोड-मेडिटेशन. थोडं HTML, JS आणि CSS वापरून तुम्ही एक वेब इंटरफेस तयार करू शकता, त्याला स्टाइल देऊ शकता, आणि त्यात इंटरॅक्शन जोडू शकता.
> काही प्रारंभिक ब्राउझर, [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) यांच्याकडून
### ब्राउझर वेब सामग्री कशी प्रक्रिया करतात
@ -198,7 +198,7 @@ quadrantChart
विस्तार स्थापना प्रक्रिया समजून घेणे तुम्हाला तुमचा विस्तार लोकांनी स्थापित करताना अनुभव कसा असेल याचा अंदाज घेण्यास मदत करते. स्थापना प्रक्रिया आधुनिक ब्राउझरमध्ये प्रमाणित आहे, इंटरफेस डिझाइनमध्ये लहान फरकांसह.
> **महत्त्वाचे**: तुमचे स्वतःचे विस्तार चाचणी करताना विकसक मोड चालू करा आणि इतर स्टोअरमधून विस्तारांना परवानगी द्या.
@ -313,10 +313,10 @@ project-root/
### विस्तार दृश्ये विहंगावलोकन
**सेटअप दृश्य** - प्रथमच वापरकर्ता कॉन्फिगरेशन:
**परिणाम दृश्य** - कार्बन फूटप्रिंट डेटा प्रदर्शन:
> ⚠️ **सुरक्षा विचार**: उत्पादन ऍप्लिकेशन्समध्ये, लोकल स्टोरेजमध्ये API की साठवणे सुरक्षा जोखीम निर्माण करते कारण जावास्क्रिप्टला हा डेटा प्रवेश करता येतो. शिकण्यासाठी, हा दृष्टिकोन ठीक आहे, परंतु वास्तविक ऍप्लिकेशन्स संवेदनशील क्रेडेन्शियल्ससाठी सुरक्षित सर्व्हर-साइड स्टोरेज वापरतात.
@ -126,7 +126,7 @@ Edge मध्ये Developer Tools उघडण्यासाठी, वर
चला हे करून पाहूया. एखादी वेबसाइट उघडा (Microsoft.com चांगली काम करते) आणि 'Record' बटणावर क्लिक करा. आता पृष्ठ रीफ्रेश करा आणि प्रोफाइलरने काय होते ते कॅप्चर करताना पहा. जेव्हा तुम्ही रेकॉर्डिंग थांबवाल, तेव्हा तुम्हाला ब्राउझर 'स्क्रिप्ट्स', 'रेंडर्स', आणि 'पेंट्स' साइट कशी करते याचे तपशीलवार विहंगावलोकन दिसेल. हे मला रॉकेट लॉन्च दरम्यान मिशन कंट्रोल प्रत्येक प्रणालीचे निरीक्षण कसे करते याची आठवण करून देते - तुम्हाला नेमके काय आणि कधी घडते याचे रिअल-टाइम डेटा मिळतो.
✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) मध्ये अधिक तपशील आहेत जर तुम्हाला अधिक खोलवर जाण्याची इच्छा असेल
@ -136,11 +136,11 @@ Edge मध्ये Developer Tools उघडण्यासाठी, वर
प्रोफाइल टाइमलाइनचा एक भाग निवडून आणि सारांश पॅन पाहून तुमच्या पृष्ठाच्या कार्यक्षमतेचा स्नॅपशॉट मिळवा:
✅ तुमच्या प्रोफाइलरला ओळखा! या साइटवर Developer Tools उघडा आणि कोणतेही अडथळे आहेत का ते पहा. सर्वात मंद लोड होणारा घटक कोणता आहे? सर्वात जलद कोणता आहे?
tmrow च्या C02 Signal API चा वापर करून वीज वापर ट्रॅक करण्यासाठी एक ब्राउझर एक्स्टेंशन तयार करा, जेणेकरून तुमच्या ब्राउझरमध्ये तुमच्या प्रदेशातील वीज वापर किती जड आहे याची आठवण मिळू शकेल. हे एक्स्टेंशन अडहॉक पद्धतीने वापरल्याने तुम्हाला या माहितीच्या आधारे तुमच्या क्रियाकलापांबद्दल निर्णय घेण्यास मदत होईल.
Edge वर इंस्टॉल करण्यासाठी, ब्राउझरच्या वरच्या उजव्या कोपऱ्यातील 'तीन डॉट' मेनू वापरून एक्स्टेंशन्स पॅनेल शोधा. तिथून 'Load Unpacked' निवडा आणि नवीन एक्स्टेंशन लोड करा. प्रॉम्प्टवर 'dist' फोल्डर उघडा आणि एक्स्टेंशन लोड होईल. वापरण्यासाठी, तुम्हाला CO2 Signal च्या API साठी API key ([इथे ईमेलद्वारे मिळवा](https://www.co2signal.com/) - या पृष्ठावर बॉक्समध्ये तुमचा ईमेल टाका) आणि [Electricity Map](https://www.electricitymap.org/map) शी संबंधित तुमच्या प्रदेशाचा [कोड](http://api.electricitymap.org/v3/zones) आवश्यक आहे (उदाहरणार्थ, बोस्टनमध्ये, मी 'US-NEISO' वापरतो).
एकदा API key आणि प्रदेश एक्स्टेंशन इंटरफेसमध्ये इनपुट केल्यानंतर, ब्राउझर एक्स्टेंशन बारमधील रंगीत डॉट तुमच्या प्रदेशातील ऊर्जा वापर प्रतिबिंबित करण्यासाठी बदलला पाहिजे आणि तुम्हाला ऊर्जा-गंभीर क्रियाकलापांसाठी योग्य सल्ला मिळेल. या 'डॉट' प्रणालीमागील संकल्पना मला [Energy Lollipop extension](https://energylollipop.com/) कडून कॅलिफोर्निया उत्सर्जनासाठी मिळाली.
tmrow च्या C02 सिग्नल API चा वापर करून वीजेचा वापर ट्रॅक करण्यासाठी, एक ब्राउझर विस्तार तयार करा ज्यामुळे तुम्हाला तुमच्या प्रदेशातील वीज वापराबद्दल थेट तुमच्या ब्राउझरमध्ये स्मरणपत्र मिळेल. या अॅड-हॉक विस्ताराचा वापर तुम्हाला या माहितीच्या आधारे तुमच्या क्रियाकलापांबद्दल निर्णय घेण्यास मदत करेल.
Edge मध्ये स्थापित करण्यासाठी, ब्राउझरच्या वरच्या उजव्या कोपऱ्यातील 'तीन बिंदू' मेनू वापरा आणि विस्तार पॅनेल शोधा. तिथून, 'अनपॅक्ड लोड करा' निवडा आणि नवीन विस्तार लोड करा. विचारले असता 'dist' फोल्डर उघडा आणि विस्तार लोड होईल. वापरण्यासाठी, तुम्हाला CO2 Signal API साठी API की ([इथे ईमेलद्वारे मिळवा](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/) कडून कॅलिफोर्नियाच्या उत्सर्जनासाठी मिळाली.
tmrow च्या C02 Signal API चा वापर करून वीज वापराचे निरीक्षण करा आणि तुमच्या ब्राउझरमध्ये थेट तुमच्या प्रदेशातील वीज वापराची आठवण देणारी एक ब्राउझर विस्तार तयार करा. या विस्ताराचा वापर तुम्हाला या माहितीच्या आधारे तुमच्या क्रियाकलापांवर निर्णय घेण्यास मदत करेल.
Edge वर स्थापित करण्यासाठी, ब्राउझरच्या वरच्या उजव्या कोपऱ्यातील 'तीन बिंदू' मेनू वापरून Extensions पॅनेल शोधा. तिथून, 'Unpacked Extension लोड करा' निवडा आणि नवीन विस्तार लोड करा. 'dist' फोल्डर उघडा आणि विस्तार लोड होईल. वापरण्यासाठी, तुम्हाला CO2 Signal API साठी API की ([इथे ईमेलद्वारे मिळवा](https://www.co2signal.com/) - या पृष्ठावरील बॉक्समध्ये तुमचा ईमेल टाका) आणि [तुमच्या प्रदेशाचा कोड](http://api.electricitymap.org/v3/zones) जो [Electricity Map](https://www.electricitymap.org/map) शी संबंधित आहे (उदाहरणार्थ, Boston मध्ये, मी 'US-NEISO' वापरतो).
API की आणि प्रदेश विस्ताराच्या इंटरफेसमध्ये टाकल्यानंतर, ब्राउझरच्या विस्तार बारमधील रंगीत बिंदू तुमच्या प्रदेशातील वीज वापर प्रतिबिंबित करण्यासाठी बदलला पाहिजे आणि तुम्हाला ऊर्जा-खर्चिक क्रियाकलापांबद्दल योग्य सल्ला देईल. या 'बिंदू' प्रणालीमागील संकल्पना मला [Energy Lollipop विस्तार](https://energylollipop.com/) कडून मिळाली, जी कॅलिफोर्नियाच्या उत्सर्जनासाठी आहे.
वीज वापर ट्रॅक करण्यासाठी tmrow च्या C02 सिग्नल API चा वापर करून, एक ब्राउझर एक्सटेंशन तयार करणे जे तुमच्या ब्राउझरमध्ये तुमच्या क्षेत्रातील वीज वापर किती जड आहे याबद्दल तुम्हाला स्मरण देईल. या एक्सटेंशनचा उपयोग तुम्हाला या माहितीच्या आधारे तुमच्या क्रियाकलापांबद्दल निर्णय घेण्यास मदत करेल.
एज ब्राउझरवर इंस्टॉल करण्यासाठी, ब्राउझरच्या वरच्या उजव्या कोपऱ्यातील 'तीन डॉट' मेनू वापरून एक्सटेंशन पॅनेल शोधा. तिथून, नवीन एक्सटेंशन लोड करण्यासाठी 'लोड अनपॅक्ड' निवडा. प्रॉम्प्टवर 'dist' फोल्डर उघडा आणि एक्सटेंशन लोड होईल. याचा उपयोग करण्यासाठी, तुम्हाला CO2 सिग्नल API ([ईमेलद्वारे येथे मिळवा](https://www.co2signal.com/) साठी API की आवश्यक असेल - या पृष्ठावरील बॉक्समध्ये तुमचा ईमेल टाका) आणि [तुमच्या क्षेत्रासाठी कोड](http://api.electricitymap.org/v3/zones) [इलेक्ट्रिसिटी मॅप](https://www.electricitymap.org/map) वरून (उदाहरणार्थ, बोस्टनसाठी, मी 'US-NEISO' वापरतो).
एकदा API की आणि क्षेत्र एक्सटेंशन इंटरफेसमध्ये इनपुट केल्यानंतर, ब्राउझर एक्सटेंशन बारमधील रंगीत डॉट तुमच्या क्षेत्रातील ऊर्जा वापर प्रतिबिंबित करण्यासाठी बदलायला हवा आणि तुम्हाला एक संकेतक द्यायला हवा की ऊर्जा-गंभीर क्रियाकलाप तुमच्या कामगिरीसाठी योग्य असतील. या 'डॉट' प्रणालीची संकल्पना मला कॅलिफोर्नियाच्या उत्सर्जनासाठी [एनर्जी लॉलीपॉप एक्सटेंशन](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) (उदाहरणार्थ, बोस्टनसाठी "US-NEISO").
API की आणि प्रदेश विस्ताराच्या इंटरफेसमध्ये प्रविष्ट केल्यानंतर, ब्राउझरच्या विस्तार बारमधील रंगीत बिंदू प्रदेशाच्या ऊर्जा वापराचे प्रतिबिंब दाखवण्यासाठी बदलायला हवा आणि उच्च ऊर्जा वापराच्या क्रियाकलापांसाठी योग्य सूचना प्रदान करायला हवी. या "बिंदू" प्रणालीमागील संकल्पना [Energy Lollipop विस्तार](https://energylollipop.com/) कडून घेतली गेली आहे, जी कॅलिफोर्नियाच्या उत्सर्जनासाठी आहे.
tmrow च्या C02 सिग्नल API चा वापर करून, तुमच्या प्रदेशातील वीज वापर किती आहे हे ब्राउझरवर स्मरणपत्र म्हणून दाखवण्यासाठी ब्राउझर विस्तार तयार करा. या विस्ताराचा उपयोग करून, तुम्ही या माहितीच्या आधारे तुमच्या क्रियाकलापांचा निर्णय घेऊ शकता.
Edge मध्ये स्थापित करण्यासाठी, ब्राउझरच्या उजव्या कोपऱ्यातील "तीन डॉट्स" मेनूमधून "Extensions" पॅनेल शोधा. तिथून "Load Unpacked" निवडा आणि नवीन विस्तार लोड करा. प्रॉम्प्टमध्ये "dist" फोल्डर उघडा, ज्यामुळे विस्तार लोड होईल. वापरण्यासाठी, तुम्हाला CO2 सिग्नल API चा API की ([इथे ईमेलद्वारे मिळवा](https://www.co2signal.com/) - या पृष्ठावरील बॉक्समध्ये तुमचा ईमेल टाका) आणि [Electricity Map](https://www.electricitymap.org/map) साठी तुमच्या प्रदेशाशी संबंधित [code for your region](http://api.electricitymap.org/v3/zones) आवश्यक आहे (उदाहरणार्थ, बोस्टनसाठी 'US-NEISO' वापरले जाते).
API की आणि प्रदेश विस्तार इंटरफेसमध्ये प्रविष्ट केल्यावर, ब्राउझरच्या विस्तार बारमध्ये दिसणारा रंगीत डॉट बदलतो आणि तुमच्या प्रदेशातील ऊर्जा वापर प्रतिबिंबित करतो. यामुळे तुम्हाला कोणत्या प्रकारच्या ऊर्जेची आवश्यकता असलेल्या क्रियाकलाप करणे योग्य आहे हे समजते. या "डॉट" प्रणालीची कल्पना मला कॅलिफोर्नियाच्या उत्सर्जनासाठी [Energy Lollipop extension](https://energylollipop.com/) कडून मिळाली.
C02 सिग्नल API चा वापर करून वीजेचा वापर ओळखण्यासाठी ब्राउझर विस्तार तयार करा, ज्यामुळे तुम्हाला तुमच्या प्रदेशातील वीजेच्या वापराबद्दल ब्राउझरमध्ये सूचना मिळतील. हा विस्तार विशेषतः वापरल्याने तुम्हाला तुमच्या क्रियाकलापांबद्दल माहितीच्या आधारे निर्णय घेण्यास मदत होईल.
Edge मध्ये स्थापित करण्यासाठी, ब्राउझरच्या उजव्या कोपऱ्यातील 'तीन बिंदू' मेनू वापरा आणि 'Extensions' पॅनेल शोधा. तिथून, '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 च्या C02 Signal API चा वापर करून वीज वापर ट्रॅक करण्यासाठी ब्राउझर एक्स्टेंशन तयार करा, जेणेकरून तुमच्या ब्राउझरमध्ये तुमच्या प्रदेशातील वीज वापर किती जड आहे याची आठवण मिळेल. हे एक्स्टेंशन अड-हॉक वापरल्याने तुम्हाला या माहितीच्या आधारे तुमच्या क्रियाकलापांबद्दल निर्णय घेण्यास मदत होईल.
Edge वर इंस्टॉल करण्यासाठी, ब्राउझरच्या वरच्या उजव्या कोपऱ्यातील 'तीन डॉट' मेनू वापरून एक्स्टेंशन्स पॅनेल शोधा. तिथून, 'Load Unpacked' निवडा आणि नवीन एक्स्टेंशन लोड करा. 'dist' फोल्डर उघडा आणि एक्स्टेंशन लोड होईल. वापरण्यासाठी, तुम्हाला CO2 Signal च्या API साठी API key ([इथे ईमेलद्वारे मिळवा](https://www.co2signal.com/) - या पृष्ठावर बॉक्समध्ये तुमचा ईमेल टाका) आणि [Electricity Map](https://www.electricitymap.org/map) शी संबंधित [तुमच्या प्रदेशाचा कोड](http://api.electricitymap.org/v3/zones) आवश्यक आहे (उदाहरणार्थ, बोस्टनमध्ये मी 'US-NEISO' वापरतो).
एकदा API key आणि प्रदेश एक्स्टेंशन इंटरफेसमध्ये इनपुट केल्यानंतर, ब्राउझर एक्स्टेंशन बारमधील रंगीत डॉट तुमच्या प्रदेशातील ऊर्जा वापर प्रतिबिंबित करण्यासाठी बदलला पाहिजे आणि तुम्हाला ऊर्जा-गंभीर क्रियाकलापांसाठी योग्य सल्ला मिळेल. या 'डॉट' प्रणालीची संकल्पना मला [Energy Lollipop extension](https://energylollipop.com/) कडून कॅलिफोर्निया उत्सर्जनासाठी मिळाली.
कॅनव्हास घटकावर काढण्यासाठी, तुम्ही कॅनव्हास ग्राफिक्सच्या सर्व मूलभूत गोष्टी तयार करणारी तीच तीन-चरण प्रक्रिया अनुसरण कराल. तुम्ही हे काही वेळा केल्यानंतर, ते सहज होईल:
- **स्कोअरिंग सिस्टम**: प्रत्येक नष्ट केलेल्या शत्रूच्या जहाजासाठी १०० गुण दिले जातात (गोल संख्या खेळाडूंना मानसिक गणना करणे सोपे करते). स्कोअर तळाच्या डाव्या कोपऱ्यात दिसेल.
- **जीवन काउंटर**: तुमचा हिरो तीन जीवनांसह सुरू होतो - सुरुवातीच्या आर्केड गेम्सने आव्हान आणि खेळण्यायोग्यता संतुलित करण्यासाठी स्थापित केलेला मानक. प्रत्येक शत्रूशी टक्कर झाल्यावर एक जीवन कमी होते. उर्वरित जीवन तळाच्या उजव्या कोपऱ्यात जहाजाच्या आयकॉनद्वारे दाखवले जातील .
- **जीवन काउंटर**: तुमचा हिरो तीन जीवनांसह सुरू होतो - सुरुवातीच्या आर्केड गेम्सने आव्हान आणि खेळण्यायोग्यता संतुलित करण्यासाठी स्थापित केलेला मानक. प्रत्येक शत्रूशी टक्कर झाल्यावर एक जीवन कमी होते. उर्वरित जीवन तळाच्या उजव्या कोपऱ्यात जहाजाच्या आयकॉनद्वारे दाखवले जातील .
`history.pushState` वापरून ब्राउझरच्या नेव्हिगेशन इतिहासात नवीन एंट्री तयार होते. तुम्ही ब्राउझरचा *बॅक बटन* धरून तपासू शकता, ते असे काहीतरी प्रदर्शित करेल:
आम्ही आमच्या शेपटीचा पाठलाग करण्याऐवजी, आम्ही एक **केंद्रीकृत स्टेट मॅनेजमेंट** सिस्टम तयार करणार आहोत. हे सर्व महत्त्वाच्या गोष्टींच्या व्यवस्थेसाठी एक अतिशय व्यवस्थित व्यक्ती असल्यासारखे विचार करा:
या प्रकल्पात, तुम्ही काल्पनिक बँक कशी तयार करायची ते शिकाल. या धड्यांमध्ये वेब अॅप कसे मांडायचे आणि रूट्स प्रदान करायचे, फॉर्म तयार करायचे, स्टेट व्यवस्थापित करायचे, आणि API मधून डेटा कसा आणायचा ज्यामधून तुम्ही बँकेचा डेटा मिळवू शकता याचे मार्गदर्शन दिले आहे.
@ -185,7 +185,7 @@ VSCode.dev या क्षमतांना तुमच्या ब्रा
सर्व काही लोड झाल्यावर, तुम्हाला एक सुंदर स्वच्छ कार्यक्षेत्र दिसेल जे तुम्हाला महत्त्वाच्या गोष्टींवर लक्ष केंद्रित ठेवण्यासाठी डिझाइन केले आहे – तुमचा कोड!
@ -78,7 +78,7 @@ VSCode.dev मध्ये रेपॉझिटरी उघडण्यास
4. एक कमिट संदेश लिहा: "Add initial HTML structure"
5. आपले बदल सेव्ह करण्यासाठी "Commit new file" वर क्लिक करा
**या प्रारंभिक सेटअपने काय साध्य केले आहे:**
- HTML5 दस्तऐवज रचना योग्य प्रकारे स्थापित करते
@ -104,7 +104,7 @@ VSCode.dev मध्ये रेपॉझिटरी उघडण्यास
✅ **यशाचा संकेत**: आपल्याला Explorer साइडबारमध्ये आपली प्रोजेक्ट फाइल्स दिसतील आणि मुख्य संपादक क्षेत्रात `index.html` संपादनासाठी उपलब्ध असेल.
**इंटरफेसमध्ये आपण काय पाहाल:**
- **Explorer साइडबार**: **आपल्या रेपॉझिटरी फाइल्स आणि फोल्डर रचना दर्शवते**
@ -448,7 +448,7 @@ li:before {
**इंस्टॉलेशननंतर त्वरित परिणाम:**
CodeSwing इंस्टॉल झाल्यानंतर, आपल्याला आपल्या रिझ्युम वेबसाइटचा लाइव्ह प्रिव्ह्यू संपादकात दिसेल. यामुळे आपण बदल करत असताना आपली साइट कशी दिसते हे पाहण्याची परवानगी मिळते.
## 🗺️ एआय अॅप्लिकेशन डेव्हलपमेंटमधील तुमचा शिक्षण प्रवास
@ -192,7 +192,7 @@ mindmap
**मूलभूत तत्त्व**: एआय अॅप्लिकेशन डेव्हलपमेंट पारंपरिक वेब डेव्हलपमेंट कौशल्यांना एआय सेवा इंटिग्रेशनसह एकत्र करते, बुद्धिमान अॅप्लिकेशन्स तयार करते जे वापरकर्त्यांना नैसर्गिक आणि प्रतिसादात्मक वाटतात.
**प्लेग्राउंड इतके उपयुक्त का आहे:**
- **वेगवेगळे एआय मॉडेल्स** जसे GPT-4o-mini, Claude आणि इतर (सर्व विनामूल्य!) वापरून पहा
@ -202,7 +202,7 @@ mindmap
थोडा प्रयोग केल्यानंतर, फक्त "Code" टॅबवर क्लिक करा आणि तुमची प्रोग्रामिंग भाषा निवडा, ज्यामुळे तुम्हाला लागणारा अंमलबजावणी कोड मिळेल.
## Python बॅकएंड इंटिग्रेशन सेट करणे
@ -1883,14 +1883,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" निवडा आणि तुमचे विकास वातावरण सुरू करा
**पायरी 3: वातावरण कॉन्फिगरेशन**
तुमचे Codespace लोड झाल्यावर, तुम्हाला खालील गोष्टींमध्ये प्रवेश मिळेल:
प्रत्येक धड्यांत पूर्ण करण्यासाठी एक असाइनमेंट, ज्ञान तपासणी आणि आव्हान असते ज्यामुळे आपण पुढील विषय शिकता:
@ -115,7 +115,7 @@ Azure AI Foundry Discord समुदायात सामील व्हा
तुमच्या तयार केलेल्या या रिपॉझिटरीच्या प्रतिप्रत मध्ये **Code** बटणावर क्लिक करा आणि **Open with Codespaces** निवडा. यामुळे तुम्हाला कार्य करण्यासाठी नवीन Codespace तयार होईल.
@ -17,7 +17,7 @@ Dengar, saya faham sepenuhnya jika pengaturcaraan terasa menakutkan sekarang. Ke
Hari ini, kita akan meneroka alat luar biasa yang menjadikan pembangunan web moden bukan sahaja mungkin, tetapi sangat menyeronokkan. Saya bercakap tentang editor, pelayar, dan aliran kerja yang sama yang digunakan oleh pembangun di Netflix, Spotify, dan studio aplikasi indie kegemaran anda setiap hari. Dan inilah bahagian yang akan membuatkan anda menari kegembiraan: kebanyakan alat profesional ini adalah percuma!
@ -17,7 +17,7 @@ Saya tahu ini mungkin terasa banyak pada mulanya – malah, saya masih ingat men
Kita akan melalui perjalanan ini bersama-sama, satu langkah pada satu masa. Tiada tergesa-gesa, tiada tekanan – hanya anda, saya, dan beberapa alat yang sangat hebat yang akan menjadi sahabat baru anda!
> Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -610,7 +610,7 @@ Pertama, mari kita cari repositori (atau **repo**) di GitHub yang menarik minat
✅ Cara yang baik untuk mencari repo 'mesra pemula' adalah dengan [mencari tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Terdapat beberapa cara untuk menyalin kod. Salah satu cara adalah dengan "clone" kandungan repositori, menggunakan HTTPS, SSH, atau menggunakan GitHub CLI (Command Line Interface).
> Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -1060,12 +1060,12 @@ Setiap imej di laman web anda mempunyai tujuan. Memahami tujuan itu membantu and
**Imej informatif** - menyampaikan maklumat penting:
```html
<imgsrc="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.ms.png" alt="Sales increased 25% from Q1 to Q2 2024">
<imgsrc="../../../../translated_images/ms/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
**Imej hiasan** - semata-mata visual tanpa nilai maklumat:
> Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, atau HyperText Markup Language, adalah asas kepada setiap laman web yang pernah anda lawati. Fikirkan HTML sebagai rangka yang memberikan struktur kepada halaman web – ia menentukan di mana kandungan diletakkan, bagaimana ia diatur, dan apa yang setiap bahagian wakili. Walaupun CSS nanti akan "menghias" HTML anda dengan warna dan susunan, dan JavaScript akan menghidupkannya dengan interaktiviti, HTML menyediakan struktur penting yang menjadikan segalanya mungkin.
@ -88,7 +88,7 @@ Anda akan mencipta folder khusus untuk projek terrarium anda dan menambah fail H
4. Dalam panel Explorer, klik ikon "New File"
5. Namakan fail anda `index.html`
**Pilihan 2: Menggunakan Perintah Terminal**
```bash
@ -239,48 +239,48 @@ Sekarang tambahkan imej tumbuhan yang diatur dalam dua lajur di antara tag `<bod
> Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac)
Ingat bagaimana HTML terrarium anda kelihatan agak asas? CSS adalah tempat kita mengubah struktur biasa itu menjadi sesuatu yang menarik secara visual.
@ -205,7 +205,7 @@ body {
Buka alat pembangun pelayar anda (F12), navigasi ke tab Elemen, dan periksa elemen `<h1>` anda. Anda akan melihat bahawa ia mewarisi keluarga fon dari body:
✅ **Masa Eksperimen**: Cuba tetapkan sifat lain yang boleh diwarisi pada `<body>` seperti `color`, `line-height`, atau `text-align`. Apa yang berlaku pada tajuk dan elemen lain anda?
@ -335,7 +335,7 @@ Dalam terrarium kita, setiap tumbuhan memerlukan gaya yang serupa tetapi juga me
**Berikut adalah struktur HTML untuk setiap tumbuhan:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.ms.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/ms/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.png" />
</div>
```
@ -599,7 +599,7 @@ Bersedia untuk meningkatkan terrarium anda dengan refleksi kaca yang realistik?
Anda akan mencipta sorotan halus yang mensimulasikan bagaimana cahaya memantul dari permukaan kaca. Pendekatan ini serupa dengan bagaimana pelukis Renaissance seperti Jan van Eyck menggunakan cahaya dan pantulan untuk membuat kaca yang dilukis kelihatan tiga dimensi. Berikut adalah apa yang anda sasarkan:
> Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac)
Selamat datang ke salah satu aspek paling menarik dalam pembangunan web - menjadikan sesuatu interaktif! Document Object Model (DOM) adalah seperti jambatan antara HTML dan JavaScript anda, dan hari ini kita akan menggunakannya untuk menghidupkan terrarium anda. Apabila Tim Berners-Lee mencipta pelayar web pertama, beliau membayangkan web di mana dokumen boleh menjadi dinamik dan interaktif - DOM menjadikan visi itu mungkin.
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
> Representasi DOM dan markup HTML yang merujuknya. Daripada [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **Memahami Penutupan**: Penutupan adalah topik penting dalam JavaScript, dan ramai pembangun menggunakannya selama bertahun-tahun sebelum memahami sepenuhnya semua aspek teori. Hari ini, kita fokus pada aplikasi praktikal - anda akan melihat penutupan muncul secara semula jadi semasa kita membina ciri interaktif kita. Pemahaman akan berkembang apabila anda melihat bagaimana ia menyelesaikan masalah sebenar.
> Representasi DOM dan markup HTML yang merujuknya. Daripada [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -598,7 +598,7 @@ Sekarang uji terrarium interaktif anda! Buka fail `index.html` anda dalam pelaya
- **Sokongan merentas peranti**: Berfungsi pada desktop dan mudah alih
- **Sedarkan prestasi**: Tiada kebocoran memori atau pengiraan berlebihan
Sebuah meditasi kod kecil dengan fungsi seret dan lepas. Dengan sedikit HTML, JS, dan CSS, anda boleh membina antara muka web, menghiasnya, dan menambah interaksi.
> Beberapa penyemak imbas awal, melalui [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Bagaimana Penyemak Imbas Memproses Kandungan Web
@ -198,7 +198,7 @@ quadrantChart
Memahami proses pemasangan sambungan membantu anda menjangkakan pengalaman pengguna apabila orang memasang sambungan anda. Proses pemasangan adalah standard merentas penyemak imbas moden, dengan sedikit variasi dalam reka bentuk antara muka.
> **Penting**: Pastikan untuk menghidupkan mod pembangun dan benarkan sambungan daripada kedai lain semasa menguji sambungan anda sendiri.
@ -313,10 +313,10 @@ Ini mengikuti prinsip pendedahan progresif yang digunakan dalam reka bentuk anta
### Gambaran Keseluruhan Paparan Sambungan
**Paparan Persediaan** - Konfigurasi pengguna kali pertama:
**Paparan Hasil** - Paparan data jejak karbon:
> ⚠️ **Pertimbangan Keselamatan**: Dalam aplikasi pengeluaran, menyimpan kunci API dalam LocalStorage menimbulkan risiko keselamatan kerana JavaScript boleh mengakses data ini. Untuk tujuan pembelajaran, pendekatan ini berfungsi dengan baik, tetapi aplikasi sebenar harus menggunakan penyimpanan pelayan yang selamat untuk kelayakan sensitif.
@ -126,7 +126,7 @@ Untuk membuka Alat Pembangun di Edge, klik tiga titik di sudut kanan atas, kemud
Mari cuba ini. Buka laman web (Microsoft.com berfungsi dengan baik untuk ini) dan klik butang 'Rekod'. Sekarang segarkan halaman dan lihat profiler menangkap segala yang berlaku. Apabila anda berhenti merekod, anda akan melihat pecahan terperinci tentang bagaimana pelayar 'menykrip', 'merender', dan 'melukis' laman tersebut. Ia mengingatkan saya bagaimana pusat kawalan misi memantau setiap sistem semasa pelancaran roket - anda mendapat data masa nyata tentang apa yang berlaku dan bila.
✅ Dokumentasi [Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) mempunyai banyak lagi butiran jika anda ingin mendalami lebih jauh
@ -136,11 +136,11 @@ Pilih elemen garis masa profil untuk memperbesar acara yang berlaku semasa halam
Dapatkan gambaran prestasi halaman anda dengan memilih bahagian garis masa profil dan melihat panel ringkasan:
Menggunakan API C02 Signal daripada tmrow untuk menjejak penggunaan elektrik, bina sambungan pelayar supaya anda boleh mendapat peringatan terus di pelayar anda tentang seberapa berat penggunaan elektrik di kawasan anda. Menggunakan sambungan ini secara ad hoc akan membantu anda membuat keputusan berdasarkan maklumat ini.
Untuk memasang pada Edge, gunakan menu 'tiga titik' di sudut kanan atas pelayar untuk mencari panel Sambungan. Dari situ, pilih 'Load Unpacked' untuk memuatkan sambungan baru. Buka folder 'dist' apabila diminta, dan sambungan akan dimuatkan. Untuk menggunakannya, anda memerlukan kunci API untuk API CO2 Signal ([dapatkan satu di sini melalui emel](https://www.co2signal.com/) - masukkan emel anda di kotak pada halaman ini) dan [kod untuk kawasan anda](http://api.electricitymap.org/v3/zones) yang sepadan dengan [Electricity Map](https://www.electricitymap.org/map) (contohnya, di Boston, saya menggunakan 'US-NEISO').
Setelah kunci API dan kawasan dimasukkan ke dalam antara muka sambungan, titik berwarna di bar sambungan pelayar sepatutnya berubah untuk mencerminkan penggunaan tenaga di kawasan anda dan memberikan panduan tentang aktiviti berat tenaga yang sesuai untuk anda lakukan. Konsep di sebalik sistem 'titik' ini diilhamkan oleh [sambungan Energy Lollipop](https://energylollipop.com/) untuk pelepasan di California.
Menggunakan API isyarat CO2 daripada tmrow untuk menjejaki penggunaan elektrik, bina sambungan penyemak imbas supaya anda boleh mendapat peringatan terus dalam penyemak imbas anda tentang penggunaan elektrik di kawasan anda. Penggunaan sambungan ad hoc ini akan membantu anda membuat keputusan tentang aktiviti anda berdasarkan maklumat ini.
Untuk memasang di Edge, gunakan menu 'tiga titik' di sudut kanan atas penyemak imbas untuk mencari panel Sambungan. Dari situ, pilih 'Muatkan tanpa pembungkusan' untuk memuatkan sambungan baharu. Buka folder 'dist' apabila diminta dan sambungan akan dimuatkan. Untuk menggunakannya, anda memerlukan kunci API untuk API CO2 Signal ([dapatkan di sini melalui e-mel](https://www.co2signal.com/) - masukkan e-mel anda dalam kotak di halaman ini) dan [kod untuk kawasan anda](http://api.electricitymap.org/v3/zones) yang sepadan dengan [Peta Elektrik](https://www.electricitymap.org/map) (contohnya, di Boston, saya menggunakan 'US-NEISO').
Sebaik sahaja kunci API dan kawasan dimasukkan ke dalam antara muka sambungan, titik warna pada bar sambungan penyemak imbas sepatutnya berubah untuk mencerminkan penggunaan tenaga di kawasan anda dan memberikan petunjuk tentang aktiviti penggunaan tenaga tinggi yang sesuai untuk anda. Konsep di sebalik sistem "titik" ini diilhamkan oleh [sambungan Energy Lollipop](https://energylollipop.com/) untuk pelepasan di California.
Dengan menggunakan API C02 Signal daripada tmrow untuk menjejaki penggunaan elektrik, cipta sambungan penyemak imbas supaya anda boleh mendapat peringatan terus dalam penyemak imbas anda tentang penggunaan elektrik di kawasan anda. Penggunaan sambungan ini secara ad hoc akan membantu anda membuat keputusan berdasarkan maklumat tersebut.
Untuk memasang pada Edge, gunakan menu 'tiga titik' di sudut kanan atas penyemak imbas untuk mencari panel Sambungan. Dari situ, pilih 'Muatkan sambungan yang tidak dimampatkan' untuk memuatkan sambungan baharu. Buka folder 'dist' apabila diminta dan sambungan akan dimuatkan. Untuk menggunakannya, anda memerlukan kunci API untuk API CO2 Signal ([dapatkan satu melalui e-mel di sini](https://www.co2signal.com/) - masukkan e-mel anda dalam kotak di halaman ini) dan [kod untuk kawasan anda](http://api.electricitymap.org/v3/zones) yang sepadan dengan [Peta Elektrik](https://www.electricitymap.org/map) (contohnya, di Boston, saya menggunakan 'US-NEISO').
Sebaik sahaja kunci API dan kawasan dimasukkan ke dalam antara muka sambungan, titik berwarna dalam bar sambungan penyemak imbas akan berubah untuk mencerminkan penggunaan tenaga di kawasan anda dan memberikan petunjuk tentang aktiviti yang menggunakan tenaga yang sesuai untuk dilakukan. Konsep di sebalik sistem 'titik' ini diilhamkan oleh [sambungan Energy Lollipop](https://energylollipop.com/) untuk pelepasan di California.
Menggunakan API C02 Signal dari tmrow untuk menjejak penggunaan elektrik, sambungan pelayar ini dibina untuk memberikan peringatan tentang seberapa berat penggunaan elektrik di kawasan anda semasa anda melayari internet. Dengan menggunakan sambungan ini, anda boleh membuat keputusan berdasarkan maklumat tersebut untuk aktiviti anda.
Untuk memasang di Edge, gunakan menu 'tiga titik' di sudut kanan atas pelayar untuk mencari panel sambungan. Dari situ, pilih 'Load Unpacked' untuk memuatkan sambungan baru. Pada prompt, buka folder 'dist' dan sambungan akan dimuatkan. Untuk menggunakannya, anda memerlukan kunci API CO2 Signal ([dapatkan melalui e-mel di sini](https://www.co2snal.com/) - masukkan e-mel anda dalam kotak di halaman tersebut) dan [kod kawasan anda](http://api.electricitymap.org/v3/zones) dari [Peta Elektrik](https://www.electricitymap.org/map) (contohnya, di Boston, saya menggunakan 'US-NEISO').
Setelah kunci API dan kod kawasan dimasukkan ke dalam antara muka sambungan, titik berwarna pada bar sambungan pelayar sepatutnya berubah untuk mencerminkan penggunaan tenaga di kawasan anda dan memberikan indikator tentang aktiviti berat tenaga yang sesuai untuk dilakukan. Konsep sistem 'titik' ini diilhamkan oleh [Energy Lollipop Extension](https://energylollipop.com/) untuk pelepasan di California.
Anda akan menggunakan API Signal CO2 daripada tmrow untuk memantau penggunaan elektrik bagi mencipta sambungan penyemak imbas supaya anda boleh mendapatkan peringatan terus dalam penyemak imbas anda tentang betapa beratnya penggunaan elektrik di kawasan anda. Penggunaan sambungan ini secara ad hoc akan membantu menilai aktiviti anda berdasarkan maklumat ini.
Untuk memasang pada Edge, gunakan menu "tiga titik" di sudut kanan atas penyemak imbas untuk mencari panel Sambungan. Jika belum diaktifkan, aktifkan Mod Pembangun (di bahagian bawah kiri). Pilih "Muatkan tanpa mampatan" untuk memuatkan sambungan baharu. Buka folder "dist" pada prompt dan sambungan akan dimuatkan. Untuk menggunakannya, anda memerlukan kunci API untuk API CO2 Signal (anda boleh [memperolehnya melalui e-mel di sini](https://www.co2signal.com/) - masukkan e-mel anda dalam kotak di halaman ini) dan [kod untuk kawasan anda](http://api.electricitymap.org/v3/zones) yang sepadan dengan [peta elektrik](https://www.electricitymap.org/map) (contohnya, di Boston, "US-NEISO").
Setelah kunci API dan kawasan dimasukkan ke dalam antara muka sambungan, titik berwarna pada bar sambungan penyemak imbas sepatutnya berubah untuk mencerminkan penggunaan tenaga kawasan tersebut dan memberikan petunjuk tentang aktiviti penggunaan tenaga tinggi yang sesuai untuk dilakukan. Konsep di sebalik sistem "titik" ini telah diilhamkan oleh [sambungan Energy Lollipop](https://energylollipop.com/) untuk pelepasan di California.
Gunakan API CO2 Signal daripada tmrow untuk menjejak penggunaan tenaga elektrik anda dan memaparkan peringatan di penyemak imbas tentang betapa tinggi penggunaan tenaga di kawasan anda. Sambungan penyemak imbas ini membolehkan anda membuat keputusan berdasarkan maklumat tersebut secara ad hoc.
Untuk memasang di Edge, cari panel "Extensions" melalui menu "tiga titik" di bahagian atas kanan penyemak imbas. Dari situ, pilih "Load Unpacked" untuk memuatkan sambungan baharu. Apabila diminta, buka folder "dist" dan sambungan akan dimuatkan. Untuk menggunakannya, anda memerlukan kunci API CO2 Signal ([dapatkan di sini melalui e-mel](https://www.co2signal.com/) - masukkan e-mel anda di kotak pada halaman tersebut) dan [kod untuk kawasan anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [Electricity Map](https://www.electricitymap.org/map) (contohnya, di Boston gunakan 'US-NEISO').
Setelah anda memasukkan kunci API dan kawasan ke dalam antara muka sambungan, titik berwarna yang dipaparkan di bar sambungan penyemak imbas akan berubah mengikut penggunaan tenaga di kawasan anda. Ini membantu anda menentukan aktiviti yang sesuai berdasarkan keperluan tenaga. Konsep sistem "titik" ini diilhamkan oleh sambungan [Energy Lollipop](https://energylollipop.com/) untuk pelepasan di California.
Menggunakan API Isyarat CO2 tmrow untuk memantau penggunaan elektrik, bina sambungan penyemak imbas supaya anda boleh menerima peringatan di penyemak imbas anda tentang tahap penggunaan elektrik di kawasan anda. Menggunakan sambungan ini secara khusus akan membantu anda membuat keputusan yang lebih bijak berdasarkan maklumat ini.
Untuk memasang di Edge, gunakan menu 'tiga titik' di sudut kanan atas penyemak imbas untuk mencari panel Sambungan. Dari sana, pilih 'Load Unpacked' untuk memuatkan sambungan baru. Buka folder 'dist' apabila diminta, dan sambungan akan dimuatkan. Untuk menggunakannya, anda memerlukan kunci API untuk API Isyarat CO2 ([dapatkan satu di sini melalui e-mel](https://www.co2signal.com/) - masukkan e-mel anda di dalam kotak di halaman ini) dan [kod untuk wilayah anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [Peta Elektrik](https://www.electricitymap.org/map) (contohnya, di Boston, saya menggunakan 'US-NEISO').
Setelah kunci API dan wilayah dimasukkan ke dalam antara muka sambungan, titik berwarna di bar sambungan penyemak imbas akan berubah untuk mencerminkan penggunaan tenaga di kawasan anda dan memberikan cadangan mengenai aktiviti berat yang sesuai untuk dilakukan. Konsep di sebalik sistem 'dot' ini diilhamkan oleh [sambungan penyemak imbas Lollipop Tenaga](https://energylollipop.com/) untuk pelepasan di California.
Menggunakan API C02 Signal daripada tmrow untuk menjejak penggunaan elektrik, bina sambungan pelayar supaya anda boleh mendapat peringatan terus di pelayar anda tentang seberapa berat penggunaan elektrik di kawasan anda. Menggunakan sambungan ini secara ad hoc akan membantu anda membuat keputusan berdasarkan maklumat ini.
Untuk memasang pada Edge, gunakan menu 'tiga titik' di sudut kanan atas pelayar untuk mencari panel Sambungan. Dari situ, pilih 'Load Unpacked' untuk memuatkan sambungan baru. Buka folder 'dist' apabila diminta, dan sambungan akan dimuatkan. Untuk menggunakannya, anda memerlukan kunci API untuk API CO2 Signal ([dapatkan satu di sini melalui emel](https://www.co2signal.com/) - masukkan emel anda di kotak pada halaman ini) dan [kod untuk kawasan anda](http://api.electricitymap.org/v3/zones) yang sepadan dengan [Peta Elektrik](https://www.electricitymap.org/map) (contohnya, di Boston, saya menggunakan 'US-NEISO').
Setelah kunci API dan kawasan dimasukkan ke dalam antara muka sambungan, titik berwarna di bar sambungan pelayar sepatutnya berubah untuk mencerminkan penggunaan tenaga di kawasan anda dan memberikan anda petunjuk tentang aktiviti berat tenaga yang sesuai untuk dilakukan. Konsep di sebalik sistem 'titik' ini diilhamkan oleh [sambungan Energy Lollipop](https://energylollipop.com/) untuk pelepasan di California.
> Imej dari [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Untuk melukis pada elemen kanvas, anda akan mengikuti proses tiga langkah yang sama yang membentuk asas semua grafik kanvas. Setelah anda melakukannya beberapa kali, ia menjadi kebiasaan:
@ -329,11 +329,11 @@ Anda akan membina halaman web dengan elemen Kanvas. Ia harus memaparkan skrin hi
- **Sistem mata**: Setiap kapal musuh yang dimusnahkan memberikan 100 mata (nombor bulat lebih mudah untuk pemain kira secara mental). Mata dipaparkan di sudut kiri bawah.
- **Pengiraan nyawa**: Wira anda bermula dengan tiga nyawa - satu standard yang ditetapkan oleh permainan arked awal untuk mengimbangi cabaran dengan kebolehmainan. Setiap perlanggaran dengan musuh mengurangkan satu nyawa. Kita akan memaparkan nyawa yang tinggal di sudut kanan bawah menggunakan ikon kapal .
- **Pengiraan nyawa**: Wira anda bermula dengan tiga nyawa - satu standard yang ditetapkan oleh permainan arked awal untuk mengimbangi cabaran dengan kebolehmainan. Setiap perlanggaran dengan musuh mengurangkan satu nyawa. Kita akan memaparkan nyawa yang tinggal di sudut kanan bawah menggunakan ikon kapal .
Menggunakan `history.pushState` mencipta entri baru dalam sejarah navigasi pelayar. Anda boleh memeriksanya dengan menahan *butang mundur* pelayar anda, ia seharusnya memaparkan sesuatu seperti ini:
Jika anda cuba klik pada butang mundur beberapa kali, anda akan melihat bahawa URL semasa berubah dan sejarah dikemas kini, tetapi templat yang sama terus dipaparkan.
@ -295,7 +295,7 @@ Pertama, mari kita perhatikan apa yang berlaku dengan penghantaran borang asas:
2. Perhatikan perubahan dalam bar alamat pelayar anda
3. Perhatikan bagaimana halaman dimuat semula dan data muncul dalam URL
### Perbandingan Kaedah HTTP
@ -350,7 +350,7 @@ Mari kita konfigurasikan borang pendaftaran anda untuk berkomunikasi dengan betu
2. **Klik** butang "Buat Akaun"
3. **Perhatikan** respons pelayan dalam pelayar anda
**Apa yang anda harus lihat:**
- **Pelayar mengarahkan** ke URL endpoint API
@ -615,7 +615,7 @@ async function register() {
3. **Klik** "Buat Akaun"
4. **Perhatikan** mesej konsol dan maklum balas pengguna
**Apa yang anda patut lihat:**
- **Keadaan pemuatan** muncul pada butang hantar
@ -790,7 +790,7 @@ Mari tingkatkan borang pendaftaran anda dengan pengesahan yang kukuh yang member
3. **Cuba** aksara khas dalam medan nama pengguna
4. **Masukkan** jumlah baki negatif
**Apa yang anda akan perhatikan:**
- **Pelayar memaparkan** mesej pengesahan asli
@ -952,7 +952,7 @@ Tunjukkan mesej ralat dalam HTML jika pengguna sudah wujud.
Berikut adalah contoh bagaimana halaman log masuk akhir boleh kelihatan selepas sedikit gaya:
@ -190,7 +190,7 @@ Seperti reka bentuk berkompartmen Titanic yang kelihatan kukuh sehingga beberapa
Daripada mengejar ekor kita sendiri, kita akan mencipta sistem **pengurusan keadaan berpusat**. Anggaplah ia seperti mempunyai seorang yang sangat teratur yang bertanggungjawab ke atas semua perkara penting:
```mermaid
flowchart TD
@ -803,7 +803,7 @@ Cabaran ini akan membantu anda berfikir seperti pembangun profesional yang mempe
Berikut adalah contoh hasil selepas menyelesaikan tugasan:
Selepas menyelesaikan tugasan ini, aplikasi perbankan anda sepatutnya mempunyai ciri "Tambah Transaksi" yang berfungsi sepenuhnya dan kelihatan profesional:
Dalam projek ini, anda akan belajar cara membina bank fiksyen. Pelajaran ini merangkumi arahan tentang cara menyusun aplikasi web dan menyediakan laluan, membina borang, menguruskan keadaan, dan mendapatkan data daripada API yang membolehkan anda mengambil data bank.
@ -185,7 +185,7 @@ Seperti bagaimana telefon Alexander Graham Bell menghubungkan lokasi yang jauh,
Apabila semuanya dimuatkan, anda akan melihat ruang kerja yang bersih dan cantik yang direka untuk memastikan anda fokus pada perkara yang penting – kod anda!
@ -78,7 +78,7 @@ Oleh kerana VSCode.dev memerlukan sekurang-kurangnya satu fail untuk membuka rep
4. **Tulis** mesej komit: "Tambah struktur HTML awal"
5. **Klik** "Commit new file" untuk menyimpan perubahan anda
**Apa yang dicapai oleh persediaan awal ini:**
- **Menetapkan** struktur dokumen HTML5 yang betul dengan elemen semantik
@ -104,7 +104,7 @@ Sekarang repositori anda telah disediakan, mari beralih ke VSCode.dev untuk kerj
✅ **Petunjuk kejayaan**: Anda sepatutnya melihat fail projek anda di bar sisi Explorer dan `index.html` tersedia untuk diedit di kawasan editor utama.
**Apa yang anda akan lihat dalam antara muka:**
- **Bar sisi Explorer**: **Memaparkan** fail dan struktur folder repositori anda
@ -448,7 +448,7 @@ Sambungan meningkatkan pengalaman pembangunan anda dengan menyediakan keupayaan
**Hasil segera selepas pemasangan:**
Sebaik sahaja CodeSwing dipasang, anda akan melihat pratonton langsung laman web resume anda muncul dalam editor. Ini membolehkan anda melihat dengan tepat bagaimana laman web anda kelihatan semasa anda membuat perubahan.
**Memahami antara muka yang dipertingkatkan:**
- **Paparan berpecah**: **Memaparkan** kod anda di satu sisi dan pratonton langsung di sisi lain
## 🗺️ Perjalanan Pembelajaran Anda Melalui Pembangunan Aplikasi AI
@ -194,7 +194,7 @@ mindmap
**Prinsip Teras**: Pembangunan aplikasi AI menggabungkan kemahiran pembangunan web tradisional dengan integrasi perkhidmatan AI, mencipta aplikasi pintar yang terasa semula jadi dan responsif kepada pengguna.
**Inilah yang membuatkan playground sangat berguna:**
- **Cuba** model AI yang berbeza seperti GPT-4o-mini, Claude, dan lain-lain (semuanya percuma!)
@ -204,7 +204,7 @@ mindmap
Setelah anda bermain-main sedikit, hanya klik tab "Code" dan pilih bahasa pengaturcaraan anda untuk mendapatkan kod pelaksanaan yang anda perlukan.
## Menyediakan Integrasi Backend Python
@ -2363,14 +2363,14 @@ Ingin mencuba projek ini dalam persekitaran pembangunan awan? GitHub Codespaces
- **Navigasi** ke [repositori Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Klik** "Use this template" di sudut kanan atas (pastikan anda log masuk ke GitHub)
**Langkah 2: Lancarkan Codespaces**
- **Buka** repositori yang baru anda cipta
- **Klik** butang hijau "Code" dan pilih "Codespaces"
- **Pilih** "Create codespace on main" untuk memulakan persekitaran pembangunan anda
**Langkah 3: Konfigurasi Persekitaran**
Sebaik sahaja Codespace anda dimuatkan, anda akan mempunyai akses kepada:
<imgsrc="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.my.png" alt="Sales increased 25% from Q1 to Q2 2024">
<imgsrc="../../../../translated_images/my/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
Browser ရဲ့ developer tools (F12) ကိုဖွင့်ပြီး Elements tab ကိုသွားပါ။ သင့်ရဲ့ `<h1>` element ကို inspect လုပ်ပါ။ `<body>` element ကနေ font family ကို inherit လုပ်ထားတာကိုတွေ့ပါလိမ့်မယ်:
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.my.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/my/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.png" />
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
ဝင်ရောက်ကြိုဆိုပါတယ်။ ဒီနေ့မှာတော့ ဝက်ဘ်ဒီဇိုင်းကို အပြောင်းအလဲဖြစ်စေတဲ့ အပိုင်းတစ်ခုကို လေ့လာမှာဖြစ်ပါတယ်။ Document Object Model (DOM) ဟာ HTML နဲ့ JavaScript အကြားက တံတားတစ်ခုလိုဖြစ်ပြီး၊ ဒီနေ့မှာတော့ သင့် terrarium ကို အသက်ဝင်အောင်လုပ်ဖို့ အသုံးပြုမှာပါ။ Tim Berners-Lee က ပထမဆုံး ဝက်ဘ်ဘရောက်ဇာကို ဖန်တီးတဲ့အခါ၊ စာရွက်စာတမ်းတွေကို dynamic နဲ့ interactive ဖြစ်စေတဲ့ ဝက်ဘ်ကို ရည်ရွယ်ခဲ့ပါတယ်။ DOM က အဲဒီရည်မှန်းချက်ကို အကောင်အထည်ဖော်ပေးပါတယ်။
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
> DOM နဲ့ HTML markup ကို ကိုယ်စားပြုထားတဲ့ပုံ။ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) မှ
> DOM နဲ့ HTML markup ကို ကိုယ်စားပြုထားတဲ့ပုံ။ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) မှ
@ -313,10 +313,10 @@ User interface components တွေကို ဖန်တီးပါမယ်
### Extension Views Overview
**Setup View** - First-time user configuration:
**Results View** - Carbon footprint data display:
localizeflow[bot]
1 week ago