## 🗺️ AI Application Development ရဲ့ သင့်ရဲ့ လေ့လာရေးခရီး
@ -194,7 +194,7 @@ mindmap
**Core Principle**: AI application development ဟာ traditional web development skills တွေကို AI service integration နဲ့ ပေါင်းစပ်ပြီး သုံးစွဲသူတွေကို သဘာဝနဲ့ တုံ့ပြန်မှုကောင်းတဲ့ intelligent applications တွေ ဖန်တီးပေးပါတယ်။
**Playground ရဲ့ အသုံးဝင်မှု**:
- **စမ်းသပ်**: GPT-4o-mini, Claude နဲ့ အခြား AI models တွေကို စမ်းသပ်နိုင်တယ် (အခမဲ့!)
## Python Backend Integration ကို Setup လုပ်ခြင်း
@ -2107,14 +2107,14 @@ mindmap
- [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) သို့ **သွားပါ**
आज, हामी ती अद्भुत उपकरणहरूको अन्वेषण गर्नेछौं जसले आधुनिक वेब विकासलाई सम्भव मात्र होइन, गम्भीर रूपमा लत लाग्ने बनाउँछ। म त्यही सम्पादकहरू, ब्राउजरहरू, र वर्कफ्लोहरूको कुरा गर्दैछु जुन नेटफ्लिक्स, स्पोटिफाई, र तपाईंको मनपर्ने इन्डी एप स्टुडियोका डेभलपरहरूले हरेक दिन प्रयोग गर्छन्। र यहाँ तपाईंलाई खुशीको नाच गर्न बनाउने भाग छ: यी पेशेवर-ग्रेड, उद्योग-मानक उपकरणहरूको अधिकांश पूर्ण रूपमा निःशुल्क छन्!
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
```mermaid
@ -594,7 +594,7 @@ flowchart TD
✅ 'सुरुवाती-अनुकूल' रिपोजिटरीहरू खोज्नको लागि [ट्याग 'good-first-issue' द्वारा खोज्नुहोस्](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)।
कोड प्रतिलिपि गर्ने धेरै तरिकाहरू छन्। एउटा तरिका भनेको रिपोजिटरीको सामग्री "क्लोन" गर्नु हो, HTTPS, SSH, वा GitHub CLI (कमाण्ड लाइन इन्टरफेस) प्रयोग गरेर।
> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
```mermaid
@ -986,12 +986,12 @@ pie title "Common ARIA Usage Patterns"
**सूचनात्मक छविहरू** - महत्त्वपूर्ण जानकारी प्रदान गर्ने:
```html
<imgsrc="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.ne.png" alt="Sales increased 25% from Q1 to Q2 2024">
<imgsrc="../../../../translated_images/ne/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
**सजावटी छविहरू** - केवल दृश्यात्मक, कुनै जानकारीमूलक मूल्य नभएको:
> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
HTML, वा हाइपरटेक्स्ट मार्कअप भाषा, तपाईंले कहिल्यै भ्रमण गरेको प्रत्येक वेबसाइटको आधार हो। HTML लाई वेब पृष्ठहरूको संरचना दिने कंकालको रूपमा सोच्नुहोस् – यसले सामग्री कहाँ जान्छ, कसरी व्यवस्थित हुन्छ, र प्रत्येक टुक्राले के प्रतिनिधित्व गर्दछ भनेर परिभाषित गर्दछ। CSS ले पछि तपाईंको HTML लाई रंग र लेआउटको साथ "सजाउनेछ", र जाभास्क्रिप्टले अन्तरक्रियात्मकता संग यसलाई जीवनमा ल्याउनेछ, HTML ले सबै कुरा सम्भव बनाउने आवश्यक संरचना प्रदान गर्दछ।
@ -88,7 +88,7 @@ HTML कोडमा प्रवेश गर्नु अघि, तपाई
> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
तपाईंको HTML टेरारियम कति सामान्य देखिन्थ्यो भन्ने सम्झनुहुन्छ? CSS ले त्यो साधारण संरचनालाई दृश्यात्मक रूपमा आकर्षक बनाउने काम गर्छ।
@ -205,7 +205,7 @@ body {
तपाईंको ब्राउजरको डेभलपर टूल्स (F12) खोल्नुहोस्, एलिमेन्ट्स ट्याबमा जानुहोस्, र तपाईंको `<h1>` तत्व निरीक्षण गर्नुहोस्। तपाईंले देख्नुहुनेछ कि यसले शरीरबाट फन्ट परिवार इनहेरिट गर्छ:
✅ **प्रयोग समय**: `<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.ne.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/ne/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.png" />
</div>
```
@ -564,7 +564,7 @@ Agent मोड प्रयोग गरेर निम्न चुनौत
तपाईंले हल्का रंगका अण्डाकार आकारहरू सिर्जना गर्नुहुनेछ जसले ग्लास रिफ्लेक्सनलाई नक्कल गर्छ। यो प्रविधि Renaissance चित्रकारहरू जस्तै Jan van Eyck ले चित्रित ग्लासलाई तीन-आयामीय देखाउन प्रकाश र रिफ्लेक्सन प्रयोग गरेको जस्तै हो। तपाईंले निम्न लक्ष्य राख्नुहुनेछ:
> स्केच नोट [टोमोमी इमुरा](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) बाट
@ -150,7 +150,7 @@ flowchart LR
> 💡 **क्लोजर बुझ्दै**: क्लोजरहरू जाभास्क्रिप्टमा महत्त्वपूर्ण विषय हुन्, र धेरै विकासकर्ताहरूले तिनीहरूलाई पूर्ण रूपमा सैद्धान्तिक पक्षहरू बुझ्नुअघि वर्षौंसम्म प्रयोग गर्छन्। आज, हामी व्यावहारिक अनुप्रयोगमा केन्द्रित छौं - तपाईंले अन्तरक्रियात्मक सुविधाहरू निर्माण गर्दा क्लोजरहरू स्वाभाविक रूपमा देखा पर्ने देख्नुहुनेछ। बुझाइ वास्तविक समस्याहरू समाधान गर्ने तरिकामा देखेर विकास हुनेछ।
> DOM र HTML मार्कअपको प्रतिनिधित्व जसले यसलाई सन्दर्भित गर्छ। [ओल्फा नासराओई](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) बाट
@ -556,7 +556,7 @@ function stopElementDrag() {
- **क्रस-डिभाइस समर्थन**: डेस्कटप र मोबाइलमा काम गर्छ
- **प्रदर्शन सचेत**: कुनै मेमोरी लीक वा अनावश्यक गणनाहरू छैनन्
> केही प्रारम्भिक ब्राउजरहरू, [करेन म्याकग्रेन](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) मार्फत
### ब्राउजरहरूले वेब सामग्री कसरी प्रक्रिया गर्छन्
@ -198,7 +198,7 @@ quadrantChart
एक्सटेन्सन स्थापना प्रक्रिया बुझ्नाले तपाईंलाई प्रयोगकर्ताहरूले तपाईंको एक्सटेन्सन स्थापना गर्दा अनुभव गर्ने कुराको पूर्वानुमान गर्न मद्दत गर्छ। स्थापना प्रक्रिया आधुनिक ब्राउजरहरूमा मानकीकृत छ, इन्टरफेस डिजाइनमा साना भिन्नताहरूका साथ।
> **महत्वपूर्ण**: आफ्नो एक्सटेन्सन परीक्षण गर्दा डेभलपर मोड अन गर्नुहोस् र अन्य स्टोरहरूबाट एक्सटेन्सनहरू अनुमति दिन सुनिश्चित गर्नुहोस्।
@ -313,10 +313,10 @@ project-root/
### एक्सटेन्सन दृश्यहरूको अवलोकन
**सेटअप दृश्य** - पहिलो पटक प्रयोगकर्ता कन्फिगरेसन:
**परिणाम दृश्य** - कार्बन फुटप्रिन्ट डेटा प्रदर्शन:
> ⚠️ **सुरक्षा विचार**: उत्पादन अनुप्रयोगहरूमा, लोकल स्टोरेजमा API कुञ्जीहरू भण्डारण गर्दा सुरक्षा जोखिमहरू हुन्छन् किनभने जाभास्क्रिप्टले यो डाटामा पहुँच गर्न सक्छ। सिक्ने उद्देश्यका लागि, यो दृष्टिकोण ठीक छ, तर वास्तविक अनुप्रयोगहरूले संवेदनशील प्रमाणपत्रहरूको लागि सुरक्षित सर्भर-साइड स्टोरेज प्रयोग गर्नुपर्छ।
यसलाई प्रयास गरौं। एउटा वेबसाइट खोल्नुहोस् (Microsoft.com राम्रो काम गर्दछ) र 'रिकर्ड' बटन क्लिक गर्नुहोस्। अब पृष्ठलाई रिफ्रेस गर्नुहोस् र प्रोफाइलरले के भइरहेको छ भनेर क्याप्चर गर्न हेर्नुहोस्। जब तपाईं रेकर्डिङ रोक्नुहुन्छ, तपाईंले ब्राउजरले साइटलाई 'स्क्रिप्ट', 'रेन्डर', र 'पेन्ट' गर्ने तरिकाको विस्तृत विवरण देख्नुहुनेछ। यो मिशन कन्ट्रोलले रकेट प्रक्षेपणको समयमा प्रत्येक प्रणालीलाई अनुगमन गर्ने तरिकाको जस्तै हो - तपाईंलाई वास्तविक समयमा के भइरहेको छ र कहिले भइरहेको छ भन्ने डेटा प्राप्त हुन्छ।
✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) मा थप विवरणहरू छन् यदि तपाईं गहिराइमा जान चाहनुहुन्छ भने।
@ -136,11 +136,11 @@ flowchart LR
प्रोफाइल टाइमलाइनको एक भाग चयन गरेर र सारांश प्यान हेरेर तपाईंको पृष्ठको प्रदर्शनको स्न्यापशट प्राप्त गर्नुहोस्:
✅ तपाईंको प्रोफाइलरलाई चिन्नुहोस्! यस साइटमा डेभलपर टूल्स खोल्नुहोस् र कुनै पनि बाधाहरू छन् कि छैनन् हेर्नुहोस्। सबैभन्दा ढिलो लोड हुने सम्पत्ति के हो? सबैभन्दा छिटो?
tmrow को C02 Signal API प्रयोग गरेर बिजुलीको प्रयोग ट्र्याक गर्न, एउटा ब्राउजर एक्स्टेन्सन बनाउनुहोस् जसले तपाईंलाई तपाईंको क्षेत्रको बिजुली प्रयोगको भार कस्तो छ भनेर ब्राउजरमै सम्झना दिलाउन सक्छ। यो एक्स्टेन्सनलाई अनियमित रूपमा प्रयोग गर्दा तपाईंले यस जानकारीको आधारमा आफ्नो गतिविधिहरूको निर्णय लिन मद्दत गर्नेछ।
Edge मा स्थापना गर्न, ब्राउजरको माथिल्लो दायाँ कुनामा रहेको 'तीन डट' मेनु प्रयोग गरेर Extensions प्यानल खोज्नुहोस्। त्यहाँबाट, '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 एक्स्टेन्सन](https://energylollipop.com/) बाट क्यालिफोर्नियाको उत्सर्जनका लागि प्रेरित गरिएको हो।
tmrow को 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 Signal API प्रयोग गरेर बिजुली खपत ट्र्याक गर्दै, एउटा ब्राउजर एक्स्टेन्सन बनाउनुहोस् जसले तपाईंलाई तपाईंको क्षेत्रको बिजुली खपतको बारेमा सिधै ब्राउजरमा सम्झना दिन्छ। यो विशेष एक्स्टेन्सनको प्रयोगले तपाईंलाई यी जानकारीहरूको आधारमा तपाईंको गतिविधिहरूको बारेमा निर्णय लिन मद्दत गर्नेछ।
Edge मा स्थापना गर्न, ब्राउजरको माथिल्लो दायाँ कुनामा रहेको 'तीन बिन्दु' मेनु प्रयोग गरेर Extensions प्यानल खोज्नुहोस्। त्यहाँबाट, 'लोड अनजिप्ड एक्स्टेन्सन' चयन गरेर नयाँ एक्स्टेन्सन लोड गर्नुहोस्। प्रॉम्प्टमा 'dist' फोल्डर खोल्नुहोस्, र एक्स्टेन्सन लोड हुनेछ। यसलाई प्रयोग गर्न, तपाईंलाई CO2 Signal API को लागि API की चाहिन्छ ([यहाँ ईमेल मार्फत प्राप्त गर्नुहोस्](https://www.co2signal.com/) - यो पृष्ठमा रहेको बाकसमा तपाईंको ईमेल प्रविष्ट गर्नुहोस्) र तपाईंको क्षेत्रको लागि [कोड](http://api.electricitymap.org/v3/zones) जुन [बिजुलीको नक्सा](https://www.electricitymap.org/map) सँग मेल खान्छ (उदाहरणका लागि, बोस्टनमा, म 'US-NEISO' प्रयोग गर्छु)।
एक पटक API की र क्षेत्र एक्स्टेन्सन इन्टरफेसमा प्रविष्ट गरेपछि, ब्राउजरको एक्स्टेन्सन बारमा रहेको रङ्गीन बिन्दु तपाईंको क्षेत्रको ऊर्जा खपतलाई प्रतिबिम्बित गर्न परिवर्तन हुनुपर्छ र तपाईंलाई ऊर्जा-गहन गतिविधिहरूको बारेमा संकेत दिनुपर्छ जुन तपाईंले गर्न उपयुक्त ठान्न सक्नुहुन्छ। यो 'बिन्दु' प्रणालीको अवधारणा मलाई [Energy Lollipop एक्स्टेन्सन](https://energylollipop.com/) बाट क्यालिफोर्नियाका उत्सर्जनहरूको लागि प्रेरित भएको हो।
tmrow को CO2 सिग्नल एपीआई प्रयोग गरेर बिजुलीको उपयोग ट्र्याक गर्ने ब्राउज़र एक्सटेंशन बनाउनुहोस्, जसले तपाईंलाई तपाईंको क्षेत्रको बिजुलीको उपयोग कत्तिको भारी छ भनेर रिमाइन्डर दिन्छ। यो एक्सटेंशन प्रयोग गर्दा, तपाईंले यस जानकारीको आधारमा आफ्नो गतिविधिहरूमा निर्णय लिन सक्नुहुन्छ।
एज ब्राउज़रमा इन्स्टल गर्न, ब्राउज़रको माथिल्लो दायाँ कुनामा रहेको 'तीन डट' मेनु प्रयोग गरेर एक्सटेंशन प्यानल खोज्नुहोस्। त्यहाँबाट, 'लोड अनप्याक्ड' विकल्प छान्नुहोस्। प्रॉम्प्टमा 'dist' फोल्डर खोल्नुहोस्, र एक्सटेंशन लोड हुनेछ। यसलाई प्रयोग गर्न, तपाईंलाई CO2 सिग्नलको एपीआई ([यहाँ ईमेल मार्फत प्राप्त गर्नुहोस्](https://www.co2snal.com/) - यो पृष्ठमा आफ्नो ईमेल बक्समा प्रविष्ट गर्नुहोस्) र [आफ्नो क्षेत्रको कोड](http://api.electricitymap.org/v3/zones) [इलेक्ट्रिसिटी म्याप](https://www.electricitymap.org/map) बाट आवश्यक हुनेछ (उदाहरणका लागि, बोस्टनमा, म 'US-NEISO' प्रयोग गर्छु)।
एक पटक एपीआई कुंजी र क्षेत्र एक्सटेंशन इन्टरफेसमा इनपुट गरेपछि, ब्राउज़र एक्सटेंशन बारमा रहेको रंगीन डटले तपाईंको क्षेत्रको ऊर्जा उपयोगलाई प्रतिबिम्बित गर्नुपर्छ र तपाईंलाई संकेत दिनुपर्छ कि ऊर्जा-गहन गतिविधिहरू तपाईंको प्रदर्शनका लागि उपयुक्त छन् कि छैनन्। यो 'डट' प्रणालीको अवधारणा मलाई क्यालिफोर्नियाको उत्सर्जनका लागि [एनर्जी लॉलीपप एक्सटेंशन](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](http://api.electricitymap.org/v3/zones) आवश्यक छ (उदाहरणका लागि, बोस्टनमा 'US-NEISO' प्रयोग गरिन्छ)।
API की र क्षेत्र विस्तार इन्टरफेसमा प्रविष्ट गरेपछि, ब्राउजरको एक्सटेन्सन बारमा देखिने रंगीन डट परिवर्तन हुनेछ, जसले तपाईंको क्षेत्रको ऊर्जा उपयोगलाई प्रतिबिम्बित गर्नेछ। यसले तपाईंलाई कुन प्रकारको ऊर्जा आवश्यक पर्ने गतिविधि गर्न उपयुक्त छ भनेर संकेत गर्नेछ। यो "डट" प्रणालीको अवधारणा मलाई क्यालिफोर्नियाको उत्सर्जनको लागि [Energy Lollipop extension](https://energylollipop.com/) बाट प्रेरित गरेको हो।
C02 सिग्नल API प्रयोग गरेर विद्युत प्रयोगको निगरानी गर्न, ब्राउजर एक्सटेन्सन बनाउनुहोस् ताकि तपाईं आफ्नो क्षेत्रको विद्युत प्रयोगको गम्भीरता बारे ब्राउजरमा चेतावनी प्राप्त गर्न सक्नुहुन्छ। यो एक्सटेन्सन प्रयोग गर्दा तपाईंलाई यो जानकारीको आधारमा आफ्नो गतिविधिहरूको निर्णय गर्न मद्दत गर्नेछ।
Edge मा स्थापना गर्न, ब्राउजरको दायाँ माथिको कुनामा रहेको 'तीन बिन्दु' मेनु प्रयोग गरेर एक्सटेन्सन प्यानल खोज्नुहोस्। त्यहाँबाट, 'Load Unpacked' चयन गरेर नयाँ एक्सटेन्सन लोड गर्नुहोस्। अनुरोधमा 'dist' फोल्डर खोल्नुहोस् र एक्सटेन्सन लोड हुनेछ। यसलाई प्रयोग गर्न, तपाईंलाई CO2 सिग्नल API को लागि API किज चाहिन्छ ([यहाँ इमेल मार्फत प्राप्त गर्नुहोस्](https://www.co2signal.com/) - यो पृष्ठमा रहेको बक्समा आफ्नो इमेल राख्नुहोस्) र [तपाईंको क्षेत्रको कोड](http://api.electricitymap.org/v3/zones) जुन [इलेक्ट्रिसिटी म्याप](https://www.electricitymap.org/map) सँग मेल खान्छ (उदाहरणका लागि, बोस्टनमा, मैले 'US-NEISO' प्रयोग गरेको छु)।
API किज र क्षेत्र एक्सटेन्सनको इन्टरफेसमा प्रविष्ट गरेपछि, ब्राउजर एक्सटेन्सन बारमा रहेको रंगीन बिन्दु तपाईंको क्षेत्रको ऊर्जा प्रयोगलाई प्रतिबिम्बित गर्न परिवर्तन हुनेछ र तपाईंलाई उपयुक्त गतिविधिहरूको सिफारिस दिनेछ। 'डट' प्रणालीको अवधारणा मलाई [क्यालिफोर्नियाको लागि एनर्जी ललिपप ब्राउजर एक्सटेन्सन](https://energylollipop.com/) बाट प्रेरित गरिएको हो।
tmrow को C02 Signal API प्रयोग गरेर बिजुलीको प्रयोग ट्र्याक गर्न, एउटा ब्राउजर एक्स्टेन्सन बनाउनुहोस् जसले तपाईंलाई तपाईंको क्षेत्रको बिजुली प्रयोगको भारबारे ब्राउजरमै सम्झना दिन्छ। यो एक्स्टेन्सनलाई अनियमित रूपमा प्रयोग गर्दा तपाईंले यस जानकारीको आधारमा आफ्नो गतिविधिहरूको निर्णय लिन मद्दत गर्नेछ।
Edge मा स्थापना गर्न, ब्राउजरको माथिल्लो दायाँ कुनामा रहेको 'तीन डट' मेनु प्रयोग गरेर Extensions प्यानल खोज्नुहोस्। त्यहाँबाट, '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 एक्स्टेन्सन](https://energylollipop.com/) बाट क्यालिफोर्नियाको उत्सर्जनका लागि प्रेरित गरिएको हो।
- **स्कोरिङ प्रणाली**: प्रत्येक नष्ट गरिएको शत्रु जहाजले १०० पोइन्ट्स प्रदान गर्दछ (राउन्ड नम्बरहरू खेलाडीहरूले मानसिक रूपमा गणना गर्न सजिलो हुन्छ)। स्कोर तलको बायाँ कुनामा देखाइन्छ।
- **जीवन काउन्टर**: तपाईंको हिरो तीन जीवनहरूसँग सुरु हुन्छ - प्रारम्भिक आर्केड गेमहरूले चुनौती र खेल्न योग्यताको सन्तुलन गर्न स्थापना गरेको मानक। प्रत्येक शत्रुसँगको टक्करले एक जीवन खर्च हुन्छ। बाँकी जीवनहरू तलको दायाँ कुनामा जहाज आइकनहरू प्रयोग गरेर देखाइन्छ ।
- **जीवन काउन्टर**: तपाईंको हिरो तीन जीवनहरूसँग सुरु हुन्छ - प्रारम्भिक आर्केड गेमहरूले चुनौती र खेल्न योग्यताको सन्तुलन गर्न स्थापना गरेको मानक। प्रत्येक शत्रुसँगको टक्करले एक जीवन खर्च हुन्छ। बाँकी जीवनहरू तलको दायाँ कुनामा जहाज आइकनहरू प्रयोग गरेर देखाइन्छ ।
`history.pushState` प्रयोग गरेर ब्राउजरको नेभिगेसन history मा नयाँ प्रविष्टिहरू सिर्जना हुन्छ। तपाईंले आफ्नो ब्राउजरको *back button* थिचेर जाँच गर्न सक्नुहुन्छ, यसले केही यस्तो देखाउनु पर्छ:
यदि तपाईं back बटन केही पटक क्लिक गर्नुहुन्छ भने, तपाईं देख्नुहुनेछ कि हालको URL परिवर्तन हुन्छ र history अपडेट हुन्छ, तर उही template प्रदर्शन भइरहन्छ।
हामी हाम्रो टाउको घुमाउने सट्टा, **केन्द्रीयकृत स्टेट म्यानेजमेन्ट** प्रणाली सिर्जना गर्नेछौं। यसलाई सबै महत्त्वपूर्ण कुराहरूको जिम्मामा एकदमै व्यवस्थित व्यक्तिको रूपमा सोच्नुहोस्:
यो असाइनमेन्ट पूरा गरेपछि, तपाईंको बैंकिङ एपमा पूर्ण रूपमा कार्यात्मक "ट्रान्जेक्सन थप्नुहोस्" सुविधा हुनेछ जसले व्यावसायिक रूपमा देखिन्छ र व्यवहार गर्दछ:
यस परियोजनामा, तपाईंले एक काल्पनिक बैंक कसरी निर्माण गर्ने भनेर सिक्नुहुनेछ। यी पाठहरूले वेब एपको लेआउट कसरी बनाउने र रुटहरू प्रदान गर्ने, फारमहरू निर्माण गर्ने, स्टेट व्यवस्थापन गर्ने, र 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 स्थापना भएपछि, तपाईंले आफ्नो रिजुम वेबसाइटको लाइभ पूर्वावलोकन सम्पादकमा देख्नुहुनेछ। यसले तपाईंलाई परिवर्तनहरू गर्दा तपाईंको साइट कस्तो देखिन्छ भन्ने देख्न अनुमति दिन्छ।
प्रत्येक पाठमा असाइन्मेन्ट पूरा गर्ने, ज्ञान जाँच गर्ने र चुनौतीहरू छन् जसले तपाईंलाई यी विषयहरू सिक्न मार्गनिर्देशन गर्छन्:
- प्रॉम्प्टिङ र प्रॉम्प्ट इन्जिनियरिङ
@ -100,7 +100,7 @@ Azure AI Foundry Discord समुदायमा सामेल हुनु
तपाईंले सिर्जना गरेको यस रिपोजिटरीको प्रतिलिपिमा, **Code** बटन क्लिक गरी **Open with Codespaces** चयन गर्नुहोस्। यसले तपाईँका लागि नयाँ Codespace सिर्जना गर्नेछ।
@ -17,7 +17,7 @@ Luister, ik snap het helemaal als programmeren nu nog intimiderend lijkt. Toen i
Vandaag gaan we de geweldige tools verkennen die moderne webontwikkeling niet alleen mogelijk maken, maar ook verslavend leuk. Ik heb het over dezelfde editors, browsers en workflows die ontwikkelaars bij Netflix, Spotify en je favoriete indie-appstudio elke dag gebruiken. En hier komt het deel dat je een vreugdedansje laat doen: de meeste van deze professionele, industrienorm-tools zijn helemaal gratis!
@ -17,7 +17,7 @@ Ik weet dat dit in het begin misschien wat overweldigend lijkt – ik herinner m
We gaan deze reis samen maken, stap voor stap. Geen haast, geen druk – alleen jij, ik, en een paar echt coole tools die je nieuwe beste vrienden gaan worden!
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -604,7 +604,7 @@ Laten we eerst een repository (of **repo**) op GitHub vinden die je interesseert
✅ Een goede manier om 'beginner-vriendelijke' repos te vinden is door [te zoeken op de tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Er zijn verschillende manieren om code te kopiëren. Een manier is om de inhoud van de repository te "clonen", met behulp van HTTPS, SSH, of de GitHub CLI (Command Line Interface).
<imgsrc="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.nl.png" alt="Sales increased 25% from Q1 to Q2 2024">
<imgsrc="../../../../translated_images/nl/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
**Decoratieve afbeeldingen** - puur visueel zonder informatieve waarde:
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, of HyperText Markup Language, is de basis van elke website die je ooit hebt bezocht. Zie HTML als het skelet dat structuur geeft aan webpagina's – het bepaalt waar de inhoud komt, hoe het georganiseerd is en wat elk onderdeel betekent. Terwijl CSS later je HTML "aankleedt" met kleuren en lay-outs, en JavaScript het tot leven brengt met interactiviteit, biedt HTML de essentiële structuur die alles mogelijk maakt.
@ -88,7 +88,7 @@ Je maakt een speciale map voor je terrariumproject en voegt je eerste HTML-besta
4. Klik in het Explorer-paneel op het pictogram "New File"
5. Noem je bestand `index.html`
**Optie 2: Gebruik Terminalcommando's**
```bash
@ -239,48 +239,48 @@ Voeg nu de plantafbeeldingen georganiseerd in twee kolommen toe tussen je `<body
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
Weet je nog hoe je HTML-terrarium er vrij basic uitzag? Met CSS transformeren we die eenvoudige structuur tot iets visueel aantrekkelijks.
@ -205,7 +205,7 @@ body {
Open de ontwikkelaarstools van je browser (F12), ga naar het tabblad Elements en inspecteer je `<h1>`-element. Je zult zien dat het de lettertypefamilie van het body-element erft:
✅ **Experimenteren**: Probeer andere overerfbare eigenschappen in te stellen op `<body>` zoals `color`, `line-height` of `text-align`. Wat gebeurt er met je koptekst en andere elementen?
@ -335,7 +335,7 @@ In ons terrarium heeft elke plant vergelijkbare styling nodig, maar ook individu
**Hier is de HTML-structuur voor elke plant:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.nl.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/nl/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.png" />
</div>
```
@ -599,7 +599,7 @@ Klaar om je terrarium te verbeteren met realistische glans op glas? Deze technie
Je gaat subtiele highlights creëren die simuleren hoe licht reflecteert op glasoppervlakken. Deze aanpak is vergelijkbaar met hoe Renaissance-schilders zoals Jan van Eyck licht en reflectie gebruikten om geschilderd glas driedimensionaal te laten lijken. Dit is wat je wilt bereiken:
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
Welkom bij een van de meest boeiende aspecten van webontwikkeling - interactief maken! Het Document Object Model (DOM) is als een brug tussen je HTML en JavaScript, en vandaag gaan we het gebruiken om je terrarium tot leven te brengen. Toen Tim Berners-Lee de eerste webbrowser creëerde, stelde hij zich een web voor waar documenten dynamisch en interactief konden zijn - de DOM maakt die visie mogelijk.
> Een representatie van de DOM en de HTML-markup die ernaar verwijst. Van [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **Closures begrijpen**: Closures zijn een belangrijk onderwerp in JavaScript, en veel ontwikkelaars gebruiken ze jarenlang voordat ze alle theoretische aspecten volledig begrijpen. Vandaag richten we ons op praktische toepassing - je zult zien dat closures natuurlijk ontstaan terwijl we onze interactieve functies bouwen. Begrip zal zich ontwikkelen naarmate je ziet hoe ze echte problemen oplossen.
> Een representatie van de DOM en de HTML-markup die ernaar verwijst. Van [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -598,7 +598,7 @@ Test nu jouw interactieve terrarium! Open je `index.html`-bestand in een webbrow
- **Ondersteuning voor meerdere apparaten**: Werkt op desktop en mobiel
- **Prestatiebewust**: Geen geheugenlekken of overbodige berekeningen
> Enkele vroegtijdige browsers, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Hoe Browsers Webinhoud Verwerken
@ -198,7 +198,7 @@ quadrantChart
Het begrijpen van het installatieproces van extensies helpt je de gebruikerservaring te anticiperen wanneer mensen je extensie installeren. Het installatieproces is gestandaardiseerd in moderne browsers, met kleine variaties in interfaceontwerp.
> **Belangrijk**: Zorg ervoor dat je ontwikkelaarsmodus inschakelt en extensies van andere winkels toestaat bij het testen van je eigen extensies.
@ -313,10 +313,10 @@ Dit volgt het principe van progressieve onthulling dat sinds de vroege dagen van
### Overzicht van Extensie Weergaven
**Setup Weergave** - Configuratie voor eerste gebruik:
**Resultaten Weergave** - Weergave van CO2-voetafdrukgegevens:
> ⚠️ **Beveiligingsoverweging**: In productie-applicaties brengt het opslaan van API-sleutels in LocalStorage beveiligingsrisico's met zich mee, omdat JavaScript toegang heeft tot deze gegevens. Voor leerdoeleinden werkt deze aanpak prima, maar echte applicaties zouden veilige server-side opslag moeten gebruiken voor gevoelige inloggegevens.
@ -126,7 +126,7 @@ Om Developer Tools in Edge te openen, klik je op die drie puntjes rechtsboven, g
Laten we dit uitproberen. Open een website (Microsoft.com werkt goed hiervoor) en klik op die 'Opnemen'-knop. Vernieuw nu de pagina en bekijk hoe de profiler alles vastlegt wat er gebeurt. Wanneer je stopt met opnemen, zie je een gedetailleerde uitsplitsing van hoe de browser de site 'script', 'rendert' en 'schildert'. Het doet me denken aan hoe de missiecontrole elk systeem monitort tijdens een raketlancering - je krijgt realtime gegevens over precies wat er gebeurt en wanneer.
✅ De [Microsoft Documentatie](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) heeft veel meer details als je dieper wilt duiken.
@ -136,11 +136,11 @@ Selecteer elementen van de profieltijdlijn om in te zoomen op gebeurtenissen die
Krijg een momentopname van de prestaties van je pagina door een deel van de profieltijdlijn te selecteren en naar het samenvattingspaneel te kijken:
Gebruik de CO2 Signal API van tmrow om het elektriciteitsverbruik bij te houden en bouw een browserextensie zodat je direct in je browser een herinnering hebt over hoe zwaar het elektriciteitsverbruik in jouw regio is. Door deze extensie ad hoc te gebruiken, kun je beter beslissingen nemen over je activiteiten op basis van deze informatie.
Om de extensie op Edge te installeren, gebruik je het menu met de 'drie stippen' rechtsboven in de browser om het Extensies-paneel te vinden. Selecteer daar 'Load Unpacked' om een nieuwe extensie te laden. Open de 'dist'-map wanneer hierom wordt gevraagd en de extensie wordt geladen. Om het te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([hier via e-mail verkrijgen](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO').
Zodra de API-sleutel en regio zijn ingevoerd in de interface van de extensie, zou de gekleurde stip in de browserextensiebalk moeten veranderen om het energieverbruik in jouw regio weer te geven. Het geeft je een aanwijzing over welke energie-intensieve activiteiten geschikt zijn om uit te voeren. Het concept achter dit 'stip'-systeem is geïnspireerd door de [Energy Lollipop extensie](https://energylollipop.com/) voor emissies in Californië.
Met behulp van de CO2-signaal-API van tmrow om het elektriciteitsverbruik te volgen, maak je een browserextensie zodat je direct in je browser een herinnering hebt over het elektriciteitsverbruik in jouw regio. Het gebruik van deze ad-hocextensie helpt je om beslissingen te nemen over je activiteiten op basis van deze informatie.
Om de extensie in Edge te installeren, gebruik je het menu met de 'drie puntjes' in de rechterbovenhoek van de browser om het Extensiepaneel te vinden. Selecteer daar 'Uitgepakte extensie laden' om een nieuwe extensie te laden. Open de map 'dist' wanneer hierom wordt gevraagd, en de extensie wordt geladen. Om het te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([verkrijg er hier via e-mail een](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO').
Zodra de API-sleutel en de regio in de extensie-interface zijn ingevoerd, zou het gekleurde punt in de extensiebalk van de browser moeten veranderen om het energieverbruik in jouw regio weer te geven. Het geeft je een indicatie van welke activiteiten met een hoog energieverbruik geschikt zijn. Het concept achter dit "puntensysteem" is geïnspireerd door de [Energy Lollipop-extensie](https://energylollipop.com/) voor de emissies in Californië.
Met behulp van de CO2 Signal API van tmrow om het elektriciteitsverbruik te volgen, maak je een browserextensie zodat je direct in je browser een herinnering kunt krijgen over het elektriciteitsverbruik in jouw regio. Het gebruik van deze ad-hoc extensie helpt je om je activiteiten te beoordelen op basis van deze informatie.
Om de extensie op Edge te installeren, gebruik je het menu met de 'drie puntjes' in de rechterbovenhoek van de browser om het Extensies-paneel te vinden. Selecteer daar 'Uitgepakte extensie laden' om een nieuwe extensie te laden. Open de map 'dist' wanneer daarom wordt gevraagd, en de extensie wordt geladen. Om de extensie te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([verkrijg er hier een via e-mail](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO').
Zodra de API-sleutel en de regio zijn ingevoerd in de extensie-interface, zou het gekleurde puntje in de extensiebalk van de browser moeten veranderen om het energieverbruik in jouw regio weer te geven. Dit geeft je een indicatie van welke energie-intensieve activiteiten op dat moment geschikt zijn. Het concept achter dit 'puntensysteem' is geïnspireerd door de [Energy Lollipop extensie](https://energylollipop.com/) voor emissies in Californië.
Met behulp van de CO2 Signal API van tmrow om het elektriciteitsverbruik te volgen, bouwen we een browser-extensie die je eraan herinnert hoe zwaar het elektriciteitsverbruik in jouw regio is. Door deze extensie te gebruiken, kun je op basis van deze informatie beslissingen nemen over je activiteiten.
Om te installeren in Edge, gebruik het 'drie-puntjes'-menu in de rechterbovenhoek van de browser om het extensiepaneel te vinden. Kies daar 'Ongepakte extensie laden'. Open de 'dist'-map in de prompt en de extensie wordt geladen. Om het te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([verkrijgbaar via e-mail hier](https://www.co2signal.com/) - voer je e-mailadres in het vak op die pagina in) en [de code voor jouw regio](http://api.electricitymap.org/v3/zones) van [Electricity Map](https://www.electricitymap.org/map) (bijvoorbeeld, in Boston gebruik ik 'US-NEISO').
Zodra de API-sleutel en regio in de extensie-interface zijn ingevoerd, zou de gekleurde stip in de browser-extensiebalk moeten veranderen om het energieverbruik in jouw regio weer te geven. Dit geeft je een indicatie van welke energie-intensieve activiteiten geschikt zijn op dat moment. Het idee achter dit 'stip'-systeem is geïnspireerd door de [Energy Lollipop-extensie](https://energylollipop.com/) voor emissies in Californië.
We zullen de Signal CO2 API van tmrow gebruiken om het elektriciteitsverbruik te monitoren en een browserextensie te maken. Zo kun je direct in je browser een herinnering krijgen over hoe zwaar het elektriciteitsverbruik in jouw regio is. Het gebruik van deze op maat gemaakte extensie helpt je om je activiteiten te evalueren op basis van deze informatie.
## Aan de Slag
@ -31,7 +31,7 @@ npm run build
Om de extensie in Edge te installeren, gebruik je het menu met de "drie puntjes" in de rechterbovenhoek van de browser om het Extensies-paneel te vinden. Als het nog niet is ingeschakeld, zet dan de Ontwikkelaarsmodus aan (linksonder). Selecteer "Uitgepakte extensie laden" om een nieuwe extensie te laden. Open de map "dist" in het prompt, en de extensie wordt geladen. Om het te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API (je kunt er [hier via e-mail een krijgen](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [elektriciteitskaart](https://www.electricitymap.org/map) (bijvoorbeeld, in Boston is dat "US-NEISO").
Zodra de API-sleutel en de regio zijn ingevoerd in de interface van de extensie, zou het gekleurde puntje in de browserextensiebalk moeten veranderen om het energieverbruik van de regio weer te geven. Het biedt ook een aanwijzing over welke energie-intensieve activiteiten geschikt zijn om uit te voeren. Het concept achter dit "puntensysteem" is geïnspireerd door de [Energy Lollipop-extensie](https://energylollipop.com/) voor emissies in Californië.
Bouw een browserextensie die, met behulp van de CO2 Signal API van tmrow, het energieverbruik in jouw regio bijhoudt en dit als een herinnering op je browser weergeeft. Door deze extensie ad-hoc te gebruiken, kun je je activiteiten baseren op deze informatie.
Om de extensie in Edge te installeren, ga je naar het "drie stippen"-menu rechtsboven in de browser en zoek je het paneel "Extensies". Kies daar "Load Unpacked" en laad de nieuwe extensie. Wanneer je wordt gevraagd, open je de "dist"-map om de extensie te laden. Om de extensie te gebruiken, heb je een API-sleutel van de CO2 Signal API nodig ([hier via e-mail verkrijgen](https://www.co2signal.com/) - voer je e-mailadres in het vak op die pagina in) en een [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (bijvoorbeeld, voor Boston gebruik je 'US-NEISO').
Wanneer je de API-sleutel en regio invoert in de extensie-interface, verandert de gekleurde stip die in de extensiebalk van je browser wordt weergegeven. Deze stip weerspiegelt het energieverbruik in jouw regio en geeft aan welke activiteiten geschikt zijn op basis van het energieverbruik. Het concept van dit "stip"-systeem is geïnspireerd door de [Energy Lollipop extension](https://energylollipop.com/) voor emissies in Californië.
Gebruik de CO2 Signal API van tmrow om het elektriciteitsverbruik te monitoren en bouw een browserextensie waarmee je waarschuwingen kunt ontvangen over hoe zwaar het elektriciteitsverbruik in jouw regio is. Het gebruik van deze extensie helpt je om je activiteiten beter af te stemmen op deze informatie.
## Aan de Slag
@ -31,7 +31,7 @@ npm run build
Om de extensie in Edge te installeren, gebruik je het menu met de 'drie puntjes' in de rechterbovenhoek van de browser om het Extensies-paneel te vinden. Kies daar 'Load Unpacked' om een nieuwe extensie te laden. Open de 'dist'-map wanneer hierom wordt gevraagd en de extensie wordt geladen. Om de extensie te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([verkrijg er een via e-mail hier](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en [de code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO').
Zodra de API-sleutel en regio zijn ingevoerd in de interface van de extensie, zal de gekleurde stip in de browserextensiebalk veranderen om het energieverbruik in jouw regio weer te geven en je een indicatie geven van welke zware activiteiten geschikt zijn om te doen. Het idee achter dit 'stip'-systeem is geïnspireerd door [de Energy Lollipop browserextensie](https://energylollipop.com/) voor de uitstoot in Californië.
Met behulp van de CO2 Signal API van tmrow om elektriciteitsgebruik bij te houden, bouw je een browserextensie zodat je direct in je browser een herinnering hebt over hoe zwaar het elektriciteitsgebruik in jouw regio is. Door deze extensie ad hoc te gebruiken, kun je beter beslissingen nemen over je activiteiten op basis van deze informatie.
Om de extensie op Edge te installeren, gebruik je het menu met de 'drie puntjes' rechtsboven in de browser om het Extensiepaneel te vinden. Selecteer daar 'Load Unpacked' om een nieuwe extensie te laden. Open de map 'dist' wanneer daarom wordt gevraagd, en de extensie wordt geladen. Om de extensie te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([hier aanvragen via e-mail](https://www.co2signal.com/) - voer je e-mailadres in op deze pagina) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO').
Zodra de API-sleutel en regio zijn ingevoerd in de interface van de extensie, zou de gekleurde stip in de browserextensiebalk moeten veranderen om het energiegebruik in jouw regio weer te geven. Het geeft je ook een aanwijzing over welke energie-intensieve activiteiten geschikt zijn om te doen. Het idee achter dit 'stip'-systeem is geïnspireerd door de [Energy Lollipop-extensie](https://energylollipop.com/) voor emissies in Californië.
> Afbeelding van [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Om op het canvas-element te tekenen, volg je hetzelfde drie-stappenproces dat de basis vormt van alle canvasgraphics. Zodra je dit een paar keer hebt gedaan, wordt het een tweede natuur:
@ -329,11 +329,11 @@ Je gaat een webpagina maken met een Canvas-element. Het moet een zwart scherm va
- **Puntensysteem**: Elk vernietigd vijandelijk schip levert 100 punten op (ronde getallen zijn gemakkelijker voor spelers om mentaal te berekenen). De score wordt weergegeven in de linkerbenedenhoek.
- **Leventeller**: Je held begint met drie levens - een standaard die door vroege arcadespellen werd vastgesteld om uitdaging en speelbaarheid in balans te brengen. Elke botsing met een vijand kost één leven. We tonen de resterende levens in de rechterbenedenhoek met scheepsiconen .
- **Leventeller**: Je held begint met drie levens - een standaard die door vroege arcadespellen werd vastgesteld om uitdaging en speelbaarheid in balans te brengen. Elke botsing met een vijand kost één leven. We tonen de resterende levens in de rechterbenedenhoek met scheepsiconen .
Het gebruik van `history.pushState` creëert nieuwe invoeren in de navigatiegeschiedenis van de browser. Je kunt dat controleren door de *terugknop* van je browser ingedrukt te houden, het zou er ongeveer zo uit moeten zien:
Als je een paar keer op de terugknop klikt, zie je dat de huidige URL verandert en de geschiedenis wordt bijgewerkt, maar dezelfde template blijft worden weergegeven.
@ -295,7 +295,7 @@ Laten we eerst observeren wat er gebeurt bij een basisformulierverzending:
2. Observeer de veranderingen in de adresbalk van je browser
3. Merk op hoe de pagina opnieuw laadt en gegevens in de URL verschijnen
### Vergelijking van HTTP-methoden
@ -350,7 +350,7 @@ Laten we je registratieformulier configureren om correct te communiceren met de
2. **Klik** op de knop "Account aanmaken"
3. **Observeer** de serverrespons in je browser
**Wat je zou moeten zien:**
- **Browser verwijst** naar de API-eindpunt-URL
@ -615,7 +615,7 @@ async function register() {
3. **Klik** op "Account aanmaken"
4. **Observeer** de consoleberichten en gebruikersfeedback
**Wat je zou moeten zien:**
- **Laadstatus** verschijnt op de verzendknop
@ -790,7 +790,7 @@ Laten we je registratieformulier verbeteren met robuuste validatie die een uitst
3. **Probeer** speciale tekens in het gebruikersnaamveld
4. **Voer** een negatief saldo in
**Wat je zult zien:**
- **Browser toont** native validatiemeldingen
@ -952,7 +952,7 @@ Toon een foutmelding in de HTML als de gebruiker al bestaat.
Hier is een voorbeeld van hoe de uiteindelijke inlogpagina eruit kan zien na wat styling:
@ -190,7 +190,7 @@ Net als het compartimentontwerp van de Titanic dat robuust leek totdat meerdere
In plaats van achter de feiten aan te lopen, gaan we een **gecentraliseerd state management** systeem creëren. Denk eraan als één echt georganiseerd persoon die verantwoordelijk is voor alle belangrijke zaken:
```mermaid
flowchart TD
@ -803,7 +803,7 @@ Deze uitdaging helpt u te denken als een professionele ontwikkelaar die zowel ge
Hier is een voorbeeldresultaat na het voltooien van de opdracht:
@ -112,7 +112,7 @@ Raadpleeg de [server API-documentatie](../api/README.md) voor:
**Verwacht Resultaat:**
Na het voltooien van deze opdracht moet je bankapp een volledig functionele "Transactie Toevoegen"-functie hebben die er professioneel uitziet en zich professioneel gedraagt:
In dit project leer je hoe je een fictieve bank kunt bouwen. Deze lessen bevatten instructies over hoe je een webapp kunt opzetten en routes kunt toevoegen, formulieren kunt bouwen, de status kunt beheren en gegevens kunt ophalen van een API waarmee je de gegevens van de bank kunt ophalen.
@ -78,7 +78,7 @@ Omdat VSCode.dev ten minste één bestand nodig heeft om een repository te opene
4. **Schrijf** een commitbericht: "Voeg initiële HTML-structuur toe"
5. **Klik op** "Commit new file" om je wijzigingen op te slaan
**Wat deze initiële setup bereikt:**
- **Stelt** een correcte HTML5-documentstructuur in met semantische elementen
@ -104,7 +104,7 @@ Nu de basis van je repository is opgezet, schakelen we over naar VSCode.dev voor
✅ **Succesindicator**: Je zou je projectbestanden moeten zien in de Explorer-zijbalk en `index.html` beschikbaar voor bewerking in het hoofdeditorgebied.
**Wat je ziet in de interface:**
- **Explorer-zijbalk**: **Toont** je repository-bestanden en mapstructuur
@ -448,7 +448,7 @@ Extensies verbeteren je ontwikkelervaring door live preview-mogelijkheden en ver
**Directe resultaten na installatie:**
Zodra CodeSwing is geïnstalleerd, zie je een live preview van je CV-website verschijnen in de editor. Hierdoor kun je precies zien hoe je site eruitziet terwijl je wijzigingen aanbrengt.
**Begrip van de verbeterde interface:**
- **Gesplitst scherm**: **Toont** je code aan de ene kant en een live preview aan de andere kant
## 🗺️ Jouw leertraject door AI-toepassingsontwikkeling
@ -194,7 +194,7 @@ mindmap
**Kernprincipe**: AI-toepassingsontwikkeling combineert traditionele webontwikkelingsvaardigheden met AI-dienstintegratie, waardoor intelligente toepassingen ontstaan die natuurlijk en responsief aanvoelen voor gebruikers.
**Waarom de playground zo handig is:**
- **Probeer** verschillende AI-modellen zoals GPT-4o-mini, Claude en anderen (allemaal gratis!)
@ -204,7 +204,7 @@ mindmap
Zodra je wat hebt geëxperimenteerd, klik je gewoon op het tabblad "Code" en kies je je programmeertaal om de implementatiecode te krijgen die je nodig hebt.
## Het instellen van de Python backend-integratie
@ -2365,14 +2365,14 @@ Wil je dit project uitproberen in een cloudontwikkelingsomgeving? GitHub Codespa
- **Ga naar** de [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Klik** op "Use this template" in de rechterbovenhoek (zorg ervoor dat je bent ingelogd op GitHub)
**Stap 2: Codespaces Starten**
- **Open** je nieuw aangemaakte repository
- **Klik** op de groene knop "Code" en selecteer "Codespaces"
- **Kies** "Create codespace on main" om je ontwikkelomgeving te starten
**Stap 3: Omgevingsconfiguratie**
Zodra je Codespace is geladen, heb je toegang tot:
@ -42,10 +42,10 @@ Dit lesprogramma bevat importeerbare pakketten voor gangbare LMS-workflows.
- Moodle Cloud heeft beperkte ondersteuning voor Common Cartridge. Geef de voorkeur aan het bovenstaande Moodle-bestand, dat ook in Canvas kan worden geüpload.
- Controleer na import de modules, deadlines en quizinstellingen om aan te sluiten bij uw semesterschema.
@ -17,7 +17,7 @@ Se, jeg skjønner helt hvis programmering føles skremmende akkurat nå. Da jeg
I dag skal vi utforske de utrolige verktøyene som gjør moderne webutvikling ikke bare mulig, men virkelig vanedannende. Jeg snakker om de samme redaktørene, nettleserne og arbeidsflytene som utviklere hos Netflix, Spotify og ditt favoritt indie app-studio bruker hver eneste dag. Og her er delen som får deg til å danse av glede: de fleste av disse profesjonelle, industristandard verktøyene er helt gratis!
@ -17,7 +17,7 @@ Jeg vet dette kan føles som mye i starten – jeg husker selv da jeg stirret p
Vi skal ta denne reisen sammen, ett steg av gangen. Ikke hast, ingen press – bare du, meg, og noen skikkelig kule verktøy som snart blir dine nye bestevenner!
> Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -604,7 +604,7 @@ Først, la oss finne et repository (eller **repo**) på GitHub som interesserer
✅ En god måte å finne 'nybegynnervennlige' repoer på er å [søke etter taggen 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Det finnes flere måter å kopiere kode på. En måte er å "klone" innholdet i repoet, ved å bruke HTTPS, SSH, eller GitHub CLI (Command Line Interface).
> Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, eller HyperText Markup Language, er grunnlaget for alle nettsider du noen gang har besøkt. Tenk på HTML som skjelettet som gir struktur til nettsider – det definerer hvor innhold går, hvordan det organiseres, og hva hver del representerer. Mens CSS senere "kler opp" ditt HTML med farger og oppsett, og JavaScript bringer det til liv med interaktivitet, gir HTML den nødvendige strukturen som gjør alt annet mulig.
@ -86,7 +86,7 @@ Du skal lage en dedikert mappe for terrarium-prosjektet ditt og legge til din f
4. I Explorer-panelet, klikk på ikonet for "New File"
5. Gi filen navnet `index.html`
**Alternativ 2: Bruke terminalkommandoer**
```bash
@ -236,48 +236,48 @@ Legg nå til plantebildene organisert i to kolonner mellom dine `<body></body>`-
✅ **Eksperimenter**: Prøv å sette andre arvelige egenskaper på `<body>` som `color`, `line-height` eller `text-align`. Hva skjer med overskriften og andre elementer?
@ -332,7 +332,7 @@ I terrariet vårt trenger hver plante lignende styling, men også individuell po
**Her er HTML-strukturen for hver plante:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.no.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/no/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -596,7 +596,7 @@ Klar for å forbedre terrariet med realistiske glassrefleksjoner? Denne teknikke
Du skal lage subtile høylys som simulerer hvordan lys reflekteres på glassoverflater. Denne tilnærmingen ligner på hvordan renessanse-malere som Jan van Eyck brukte lys og refleksjon for å få malt glass til å virke tredimensjonalt. Slik skal det bli:
> Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac)
Velkommen til en av de mest engasjerende aspektene ved webutvikling – å gjøre ting interaktive! Document Object Model (DOM) er som en bro mellom din HTML og JavaScript, og i dag skal vi bruke den til å bringe terrariet ditt til liv. Da Tim Berners-Lee laget den første nettleseren, forestilte han seg et nett der dokumenter kunne være dynamiske og interaktive – DOM gjør denne visjonen mulig.
@ -102,7 +102,7 @@ flowchart TD
style P fill:#ffebee
style Q fill:#ffebee
```
> En representasjon av DOM og HTML-markup som refererer til den. Fra [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **Forstå closures**: Closures er et viktig tema i JavaScript, og mange utviklere bruker dem i mange år før de fullt ut forstår alle teoretiske aspekter. I dag fokuserer vi på praktisk anvendelse – du vil se closures naturlig dukke opp når vi bygger våre interaktive funksjoner. Forståelsen utvikler seg mens du ser hvordan de løser virkelige problemer.
> En representasjon av DOM og HTML-markup som refererer til den. Fra [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ Nå kan du teste ditt interaktive terrarium! Åpne `index.html`-filen i en nettl
- **Tverrplattformstøtte**: Fungerer på desktop og mobil
- **Ytelsesbevisst**: Ingen minnelekkasjer eller unødvendige beregninger
> Noen tidlige nettlesere, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Hvordan Nettlesere Behandler Nettinnhold
@ -194,7 +194,7 @@ quadrantChart
Å forstå installasjonsprosessen for utvidelser hjelper deg å forutse brukeropplevelsen når folk installerer din utvidelse. Installasjonsprosessen er standardisert på tvers av moderne nettlesere, med små variasjoner i brukergrensesnitt.
> **Viktig**: Husk å skru på utviklermodus og tillate utvidelser fra andre butikker når du tester dine egne utvidelser.
@ -308,10 +308,10 @@ Dette følger prinsippet om gradvis avsløring som har vært brukt i grensesnitt
### Oversikt over Utvidelsens Visninger
**Oppsettvisning** - Konfigurering for første gangs bruk:
**Resultatvisning** - Visning av karbonavtrykkdata:
> ⚠️ **Sikkerhetshensyn**: I produksjonsapplikasjoner utgjør lagring av API-nøkler i LocalStorage sikkerhetsrisiko siden JavaScript har tilgang til disse dataene. For læringsformål fungerer denne tilnærmingen greit, men ekte apper bør bruke sikker server-side lagring for sensitive legitimasjoner.
@ -123,7 +123,7 @@ For å åpne Utviklerverktøy i Edge, klikk på de tre prikkene øverst til høy
La oss prøve dette. Åpne et nettsted (Microsoft.com fungerer bra for dette) og trykk på 'Spill inn'-knappen. Last deretter siden på nytt og se profilereren fange alt som skjer. Når du stopper opptaket, vil du se en detaljert oversikt over hvordan nettleseren 'skriver skript', 'renderer' og 'maler' siden. Det minner meg om hvordan oppdragskontrollen overvåker hvert system under en rakettoppskyting – du får sanntidsdata på eksakt hva som skjer og når.
✅ [Microsoft-dokumentasjonen](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) har mange flere detaljer hvis du vil dykke dypere.
@ -133,11 +133,11 @@ Velg elementer på profiltidslinjen for å zoome inn på hendelser som skjer men
Få et øyeblikksbilde av sidens ytelse ved å velge deler av tidslinjen og se på oppsummeringspanelet:
✅ Bli kjent med profilereren din! Åpne utviklerverktøyene på dette nettstedet og se om det finnes noen flaskehalser. Hva er den tregest lastende ressursen? Den raskeste?
Ved å bruke tmrow sin CO2 Signal API for å spore strømforbruk, kan du lage en nettleserutvidelse som gir deg en påminnelse direkte i nettleseren om hvor tungt strømforbruket er i din region. Å bruke denne utvidelsen sporadisk kan hjelpe deg med å ta bedre vurderinger av aktivitetene dine basert på denne informasjonen.
For å installere på Edge, bruk menyen med 'tre prikker' øverst til høyre i nettleseren for å finne Utvidelser-panelet. Derfra velger du 'Last inn pakket utvidelse' for å laste inn en ny utvidelse. Åpne 'dist'-mappen når du blir bedt om det, og utvidelsen vil lastes inn. For å bruke den, trenger du en API-nøkkel for CO2 Signal API ([få en her via e-post](https://www.co2signal.com/) – skriv inn e-posten din i boksen på denne siden) og koden for din region ([finn den her](http://api.electricitymap.org/v3/zones)) som tilsvarer [Electricity Map](https://www.electricitymap.org/map) (for eksempel bruker jeg 'US-NEISO' i Boston).
Når API-nøkkelen og regionen er lagt inn i utvidelsesgrensesnittet, bør den fargede prikken i nettleserens utvidelseslinje endre seg for å gjenspeile energiforbruket i din region og gi deg en pekepinn på hvilke energikrevende aktiviteter som kan være passende å utføre. Konseptet bak dette 'prikk'-systemet ble inspirert av [Energy Lollipop-utvidelsen](https://energylollipop.com/) for utslipp i California.
Ved å bruke CO2 Signal API fra tmrow for å spore strømforbruk, kan du lage en nettleserutvidelse som gir deg en påminnelse direkte i nettleseren om strømforbruket i din region. Bruken av denne spesialtilpassede utvidelsen vil hjelpe deg med å ta beslutninger om aktivitetene dine basert på denne informasjonen.
For å installere i Edge, bruk menyen med 'tre prikker' øverst til høyre i nettleseren for å finne utvidelsespanelet. Derfra velger du 'Last inn pakket ut' for å legge til en ny utvidelse. Åpne mappen 'dist' når du blir bedt om det, og utvidelsen vil bli lastet inn. For å bruke den trenger du en API-nøkkel for CO2 Signal API ([få en her via e-post](https://www.co2signal.com/) – skriv inn e-posten din i feltet på denne siden) og [koden for din region](http://api.electricitymap.org/v3/zones) som tilsvarer [Electricity Map](https://www.electricitymap.org/map) (i Boston, for eksempel, bruker jeg 'US-NEISO').
Når API-nøkkelen og regionen er lagt inn i utvidelsens grensesnitt, skal fargepunktet i nettleserens utvidelseslinje endre seg for å gjenspeile energiforbruket i din region og gi deg en indikasjon på hvilke aktiviteter med høyt energiforbruk som kan være passende for deg. Konseptet bak dette "punkt"-systemet fikk jeg fra [Energy Lollipop-utvidelsen](https://energylollipop.com/) for utslipp i California.
Ved å bruke CO2 Signal API fra tmrow for å spore strømforbruket, kan du lage en nettleserutvidelse som gir deg en påminnelse direkte i nettleseren om strømforbruket i ditt område. Bruken av denne ad hoc-utvidelsen hjelper deg med å ta beslutninger om aktivitetene dine basert på denne informasjonen.
For å installere på Edge, bruk menyen med 'tre prikker' øverst til høyre i nettleseren for å finne panelet Utvidelser. Derfra velger du 'Last inn ukomprimert utvidelse' for å laste inn en ny utvidelse. Åpne mappen 'dist' når du blir bedt om det, og utvidelsen vil lastes inn. For å bruke den trenger du en API-nøkkel for CO2 Signal API ([få en her via e-post](https://www.co2signal.com/) - skriv inn e-posten din i feltet på denne siden) og [koden for ditt område](http://api.electricitymap.org/v3/zones) som tilsvarer [Elektrisitetskartet](https://www.electricitymap.org/map) (i Boston, for eksempel, bruker jeg 'US-NEISO').
Når API-nøkkelen og regionen er lagt inn i utvidelsens grensesnitt, skal den fargede prikken i nettleserens utvidelseslinje endre seg for å gjenspeile energiforbruket i ditt område og gi deg en indikator på hvilke energikrevende aktiviteter det kan være passende å utføre. Konseptet bak dette 'prikk'-systemet ble inspirert av [utvidelsen Energy Lollipop](https://energylollipop.com/) for utslipp i California.
Ved å bruke tmrow sin CO2 Signal API for å spore strømforbruk, bygger vi en nettleserutvidelse som gir deg en påminnelse om hvor belastet strømforbruket i ditt område er. Ved å bruke denne utvidelsen kan du ta beslutninger om aktivitetene dine basert på denne informasjonen.
For å installere på Edge, bruk 'tre prikker'-menyen øverst til høyre i nettleseren for å finne utvidelsespanelet. Derfra velger du 'Last inn upakket' for å laste inn en ny utvidelse. Åpne 'dist'-mappen ved prompten, og utvidelsen vil bli lastet inn. For å bruke den trenger du en API-nøkkel fra CO2 Signal ([få den via e-post her](https://www.co2snal.com/) - skriv inn e-posten din i boksen på denne siden) og [kode for ditt område](http://api.electricitymap.org/v3/zones) fra [Electricity Map](https://www.electricitymap.org/map) (for eksempel, i Boston bruker jeg 'US-NEISO').
Når API-nøkkelen og området er lagt inn i utvidelsesgrensesnittet, bør den fargede prikken i nettleserutvidelseslinjen endre seg for å reflektere energiforbruket i ditt område og gi deg en indikator på hvilke energiintensive aktiviteter som passer for deg. Konseptet bak dette 'prikk'-systemet ble inspirert av [Energy Lollipop Extension](https://energylollipop.com/) for utslipp i California.
Vi skal bruke tmrow sin Signal CO2-API for å overvåke strømforbruket og lage en nettleserutvidelse som gir deg en påminnelse direkte i nettleseren om hvor belastende strømforbruket er i ditt område. Bruken av denne spesialutviklede utvidelsen vil hjelpe deg med å vurdere aktivitetene dine basert på denne informasjonen.
## Kom i gang
@ -31,7 +31,7 @@ npm run build
For å installere på Edge, bruk "tre prikker"-menyen øverst til høyre i nettleseren for å finne utvidelsespanelet. Hvis det ikke allerede er aktivert, slå på Utviklermodus (nederst til venstre). Velg "Last inn pakket utvidelse" for å laste opp en ny utvidelse. Åpne "dist"-mappen når du blir bedt om det, og utvidelsen vil bli lastet inn. For å bruke den trenger du en API-nøkkel for CO2 Signal-API-en (du kan [få en her via e-post](https://www.co2signal.com/) – skriv inn e-posten din i feltet på denne siden) og [koden for din region](http://api.electricitymap.org/v3/zones) som tilsvarer [elektrisitetskartet](https://www.electricitymap.org/map) (for eksempel er koden for Boston "US-NEISO").
Når API-nøkkelen og regionen er lagt inn i utvidelsens grensesnitt, skal den fargede prikken i nettleserens utvidelseslinje endre seg for å gjenspeile energiforbruket i regionen din og gi en indikasjon på hvilke aktiviteter med høyt energiforbruk som kan være passende å utføre. Konseptet bak dette "prikk"-systemet er inspirert av [Energy Lollipop-utvidelsen](https://energylollipop.com/) for utslipp i California.
Bygg en nettleserutvidelse som bruker tmrow sin CO2 Signal API for å spore strømforbruket i ditt område og vise det som en påminnelse i nettleseren. Ved å bruke denne utvidelsen kan du ta beslutninger om aktivitetene dine basert på denne informasjonen.
For å installere på Edge, finn "Utvidelser"-panelet via "tre prikker"-menyen øverst til høyre i nettleseren. Derfra velger du "Load Unpacked" for å laste inn den nye utvidelsen. Når du blir bedt om det, åpner du "dist"-mappen, og utvidelsen vil bli lastet inn. For å bruke den trenger du en API-nøkkel for CO2 Signal API ([få en her via e-post](https://www.co2signal.com/) - skriv inn e-posten din i boksen på denne siden) og en [kode for ditt område](http://api.electricitymap.org/v3/zones) som er kompatibel med [Electricity Map](https://www.electricitymap.org/map) (for eksempel bruker Boston 'US-NEISO').
Når du har lagt inn API-nøkkelen og området i utvidelsesgrensesnittet, vil en farget prikk vises i nettleserens utvidelseslinje. Denne prikken endrer farge for å reflektere energiforbruket i ditt område og gir deg en indikasjon på hvilke aktiviteter som krever energi det er passende å utføre. Konseptet med dette "prikk"-systemet ble inspirert av [Energy Lollipop-utvidelsen](https://energylollipop.com/) for utslipp i California.
localizeflow[bot]
1 week ago