اليوم، سنستكشف الأدوات الرائعة التي تجعل تطوير الويب الحديث ليس فقط ممكنًا، بل ممتعًا للغاية. أنا أتحدث عن نفس المحررات والمتصفحات وطرق العمل التي يستخدمها المطورون في Netflix وSpotify واستوديوهات التطبيقات المستقلة المفضلة لديك كل يوم. وهنا الجزء الذي سيجعلك ترقص فرحًا: معظم هذه الأدوات الاحترافية والمعتمدة في الصناعة مجانية تمامًا!
اليوم، سنستكشف الأدوات الرائعة التي تجعل تطوير الويب الحديث ليس فقط ممكنًا، بل ممتعًا للغاية. أنا أتحدث عن نفس المحررات والمتصفحات وطرق العمل التي يستخدمها المطورون في Netflix وSpotify واستوديوهات التطبيقات المستقلة المفضلة لديك كل يوم. وهنا الجزء الذي سيجعلك ترقص فرحًا: معظم هذه الأدوات الاحترافية والمعتمدة في الصناعة مجانية تمامًا!
سنخوض هذه الرحلة معًا، خطوة بخطوة. لا استعجال، لا ضغط – فقط أنت وأنا وبعض الأدوات الرائعة التي ستصبح أصدقائك الجدد!
سنخوض هذه الرحلة معًا، خطوة بخطوة. لا استعجال، لا ضغط – فقط أنت وأنا وبعض الأدوات الرائعة التي ستصبح أصدقائك الجدد!
> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
```mermaid
@ -603,7 +603,7 @@ flowchart TD
✅ طريقة جيدة للعثور على مستودعات "مناسبة للمبتدئين" هي [البحث باستخدام الوسم 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
✅ طريقة جيدة للعثور على مستودعات "مناسبة للمبتدئين" هي [البحث باستخدام الوسم 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
> رسم توضيحي بواسطة [تومومي إيمورا](https://twitter.com/girlie_mac)
> رسم توضيحي بواسطة [تومومي إيمورا](https://twitter.com/girlie_mac)
```mermaid
```mermaid
@ -1060,12 +1060,12 @@ pie title "Common ARIA Usage Patterns"
**الصور المعلوماتية** - تنقل معلومات مهمة:
**الصور المعلوماتية** - تنقل معلومات مهمة:
```html
```html
<imgsrc="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.ar.png" alt="Sales increased 25% from Q1 to Q2 2024">
<imgsrc="../../../../translated_images/ar/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
```
**الصور الزخرفية** - بصرية بحتة بدون قيمة معلوماتية:
**الصور الزخرفية** - بصرية بحتة بدون قيمة معلوماتية:
> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
HTML، أو لغة ترميز النص التشعبي، هي الأساس لكل موقع ويب قمت بزيارته. فكر في HTML كهيكل عظمي يمنح الصفحات الإلكترونية بنيتها – فهو يحدد مكان المحتوى، وكيف يتم تنظيمه، وما الذي يمثله كل جزء. بينما ستقوم CSS لاحقًا "بتزيين" HTML بالألوان والتصميمات، وستجعل JavaScript الصفحات تفاعلية، فإن HTML يوفر الهيكل الأساسي الذي يجعل كل شيء ممكنًا.
HTML، أو لغة ترميز النص التشعبي، هي الأساس لكل موقع ويب قمت بزيارته. فكر في HTML كهيكل عظمي يمنح الصفحات الإلكترونية بنيتها – فهو يحدد مكان المحتوى، وكيف يتم تنظيمه، وما الذي يمثله كل جزء. بينما ستقوم CSS لاحقًا "بتزيين" HTML بالألوان والتصميمات، وستجعل JavaScript الصفحات تفاعلية، فإن HTML يوفر الهيكل الأساسي الذي يجعل كل شيء ممكنًا.
@ -88,7 +88,7 @@ mindmap
4. في لوحة Explorer، انقر على أيقونة "New File"
4. في لوحة Explorer، انقر على أيقونة "New File"
5. قم بتسمية ملفك `index.html`
5. قم بتسمية ملفك `index.html`
✅ **وقت التجربة**: حاول تعيين خصائص أخرى قابلة للوراثة على `<body>` مثل `color`، `line-height`، أو `text-align`. ماذا يحدث لعناوينك والعناصر الأخرى؟
✅ **وقت التجربة**: حاول تعيين خصائص أخرى قابلة للوراثة على `<body>` مثل `color`، `line-height`، أو `text-align`. ماذا يحدث لعناوينك والعناصر الأخرى؟
@ -335,7 +335,7 @@ h1 {
**إليك هيكل HTML لكل نبتة:**
**إليك هيكل HTML لكل نبتة:**
```html
```html
<divclass="plant-holder">
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.ar.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/ar/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.png" />
</div>
</div>
```
```
@ -599,7 +599,7 @@ flowchart LR
ستقوم بإنشاء لمسات خفيفة تحاكي كيفية انعكاس الضوء على الأسطح الزجاجية. هذه الطريقة مشابهة لكيفية استخدام رسامي عصر النهضة مثل جان فان إيك الضوء والانعكاس لجعل الزجاج المرسوم يبدو ثلاثي الأبعاد. إليك ما تهدف إليه:
ستقوم بإنشاء لمسات خفيفة تحاكي كيفية انعكاس الضوء على الأسطح الزجاجية. هذه الطريقة مشابهة لكيفية استخدام رسامي عصر النهضة مثل جان فان إيك الضوء والانعكاس لجعل الزجاج المرسوم يبدو ثلاثي الأبعاد. إليك ما تهدف إليه:
> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
مرحبًا بكم في أحد أكثر جوانب تطوير الويب إثارة - جعل الأشياء تفاعلية! نموذج كائن المستند (DOM) هو بمثابة جسر بين HTML و JavaScript، واليوم سنستخدمه لإضفاء الحياة على التيراريوم الخاص بك. عندما أنشأ Tim Berners-Lee أول متصفح ويب، كان يتصور شبكة يمكن أن تكون ديناميكية وتفاعلية - و DOM يجعل هذا التصور ممكنًا.
مرحبًا بكم في أحد أكثر جوانب تطوير الويب إثارة - جعل الأشياء تفاعلية! نموذج كائن المستند (DOM) هو بمثابة جسر بين HTML و JavaScript، واليوم سنستخدمه لإضفاء الحياة على التيراريوم الخاص بك. عندما أنشأ Tim Berners-Lee أول متصفح ويب، كان يتصور شبكة يمكن أن تكون ديناميكية وتفاعلية - و DOM يجعل هذا التصور ممكنًا.
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
style Q fill:#ffebee
```
```
> تمثيل لـ DOM وعلامات HTML التي تشير إليه. من [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
> تمثيل لـ DOM وعلامات HTML التي تشير إليه. من [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **فهم الإغلاق**: الإغلاق موضوع مهم في JavaScript، ويستخدمه العديد من المطورين لسنوات قبل أن يفهموا جميع الجوانب النظرية بالكامل. اليوم، نركز على التطبيق العملي - سترى الإغلاق يظهر بشكل طبيعي أثناء بناء ميزاتنا التفاعلية. الفهم سيتطور عندما ترى كيف يحل مشاكل حقيقية.
> 💡 **فهم الإغلاق**: الإغلاق موضوع مهم في JavaScript، ويستخدمه العديد من المطورين لسنوات قبل أن يفهموا جميع الجوانب النظرية بالكامل. اليوم، نركز على التطبيق العملي - سترى الإغلاق يظهر بشكل طبيعي أثناء بناء ميزاتنا التفاعلية. الفهم سيتطور عندما ترى كيف يحل مشاكل حقيقية.
> تمثيل لـ DOM وعلامات HTML التي تشير إليه. من [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
> تمثيل لـ DOM وعلامات HTML التي تشير إليه. من [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -598,7 +598,7 @@ function stopElementDrag() {
- **دعم عبر الأجهزة**: يعمل على أجهزة الكمبيوتر المكتبية والجوال
- **دعم عبر الأجهزة**: يعمل على أجهزة الكمبيوتر المكتبية والجوال
- **وعي بالأداء**: لا يوجد تسرب للذاكرة أو حسابات زائدة
- **وعي بالأداء**: لا يوجد تسرب للذاكرة أو حسابات زائدة
> بعض المتصفحات القديمة، عبر [كارين ماكجرين](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
> بعض المتصفحات القديمة، عبر [كارين ماكجرين](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### كيف تعالج المتصفحات محتوى الويب
### كيف تعالج المتصفحات محتوى الويب
@ -198,7 +198,7 @@ quadrantChart
فهم عملية تثبيت الإضافات يساعدك على توقع تجربة المستخدم عندما يقوم الأشخاص بتثبيت إضافتك. عملية التثبيت موحدة عبر المتصفحات الحديثة، مع اختلافات طفيفة في تصميم الواجهة.
فهم عملية تثبيت الإضافات يساعدك على توقع تجربة المستخدم عندما يقوم الأشخاص بتثبيت إضافتك. عملية التثبيت موحدة عبر المتصفحات الحديثة، مع اختلافات طفيفة في تصميم الواجهة.
> **هام**: تأكد من تفعيل وضع المطور والسماح بالإضافات من المتاجر الأخرى عند اختبار إضافاتك الخاصة.
> **هام**: تأكد من تفعيل وضع المطور والسماح بالإضافات من المتاجر الأخرى عند اختبار إضافاتك الخاصة.
@ -313,10 +313,10 @@ project-root/
### نظرة عامة على شاشات الإضافة
### نظرة عامة على شاشات الإضافة
**شاشة الإعداد** - تكوين المستخدم لأول مرة:
**شاشة الإعداد** - تكوين المستخدم لأول مرة:
**شاشة النتائج** - عرض بيانات بصمة الكربون:
**شاشة النتائج** - عرض بيانات بصمة الكربون:
> ⚠️ **اعتبار أمني**: في التطبيقات الإنتاجية، تخزين مفاتيح API في LocalStorage يشكل مخاطر أمنية لأن JavaScript يمكنه الوصول إلى هذه البيانات. لأغراض التعلم، هذا النهج يعمل بشكل جيد، لكن التطبيقات الحقيقية يجب أن تستخدم تخزين آمن على الخادم للمعلومات الحساسة.
> ⚠️ **اعتبار أمني**: في التطبيقات الإنتاجية، تخزين مفاتيح API في LocalStorage يشكل مخاطر أمنية لأن JavaScript يمكنه الوصول إلى هذه البيانات. لأغراض التعلم، هذا النهج يعمل بشكل جيد، لكن التطبيقات الحقيقية يجب أن تستخدم تخزين آمن على الخادم للمعلومات الحساسة.
دعونا نجرب هذا. افتح موقعًا (Microsoft.com يعمل جيدًا لهذا) وانقر على زر "تسجيل". الآن قم بتحديث الصفحة وشاهد المحلل يلتقط كل ما يحدث. عندما تتوقف عن التسجيل، سترى تفصيلًا دقيقًا لكيفية قيام المتصفح بـ "البرمجة"، "التقديم"، و"الرسم" للموقع. يذكرني هذا بكيفية مراقبة مركز التحكم لكل نظام أثناء إطلاق الصاروخ - تحصل على بيانات في الوقت الفعلي حول ما يحدث ومتى.
دعونا نجرب هذا. افتح موقعًا (Microsoft.com يعمل جيدًا لهذا) وانقر على زر "تسجيل". الآن قم بتحديث الصفحة وشاهد المحلل يلتقط كل ما يحدث. عندما تتوقف عن التسجيل، سترى تفصيلًا دقيقًا لكيفية قيام المتصفح بـ "البرمجة"، "التقديم"، و"الرسم" للموقع. يذكرني هذا بكيفية مراقبة مركز التحكم لكل نظام أثناء إطلاق الصاروخ - تحصل على بيانات في الوقت الفعلي حول ما يحدث ومتى.
✅ يحتوي [توثيق Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) على الكثير من التفاصيل إذا كنت تريد التعمق أكثر.
✅ يحتوي [توثيق Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) على الكثير من التفاصيل إذا كنت تريد التعمق أكثر.
@ -136,11 +136,11 @@ flowchart LR
احصل على لقطة لأداء صفحتك عن طريق تحديد جزء من خط الزمن الخاص بالملف الشخصي والنظر إلى لوحة الملخص:
احصل على لقطة لأداء صفحتك عن طريق تحديد جزء من خط الزمن الخاص بالملف الشخصي والنظر إلى لوحة الملخص:
باستخدام واجهة برمجة التطبيقات C02 Signal الخاصة بـ tmrow لتتبع استخدام الكهرباء، قم ببناء ملحق متصفح بحيث يكون لديك تذكير مباشرة في متصفحك حول مدى كثافة استخدام الكهرباء في منطقتك. استخدام هذا الملحق بشكل عشوائي سيساعدك على اتخاذ قرارات بشأن أنشطتك بناءً على هذه المعلومات.
باستخدام واجهة برمجة التطبيقات C02 Signal الخاصة بـ tmrow لتتبع استخدام الكهرباء، قم ببناء ملحق متصفح بحيث يكون لديك تذكير مباشرة في متصفحك حول مدى كثافة استخدام الكهرباء في منطقتك. استخدام هذا الملحق بشكل عشوائي سيساعدك على اتخاذ قرارات بشأن أنشطتك بناءً على هذه المعلومات.
لتثبيت الملحق على Edge، استخدم قائمة "النقاط الثلاث" في الزاوية العلوية اليمنى من المتصفح للعثور على لوحة الملحقات. من هناك، اختر "تحميل غير معبأ" لتحميل ملحق جديد. افتح مجلد "dist" عند المطالبة وسيتم تحميل الملحق. لاستخدامه، ستحتاج إلى مفتاح API لواجهة برمجة التطبيقات الخاصة بـ CO2 Signal ([احصل على واحد عبر البريد الإلكتروني هنا](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع الموجود على هذه الصفحة) ورمز منطقتك المقابل لـ [خريطة الكهرباء](http://api.electricitymap.org/v3/zones) ([Electricity Map](https://www.electricitymap.org/map)) (في بوسطن، على سبيل المثال، أستخدم "US-NEISO").
لتثبيت الملحق على Edge، استخدم قائمة "النقاط الثلاث" في الزاوية العلوية اليمنى من المتصفح للعثور على لوحة الملحقات. من هناك، اختر "تحميل غير معبأ" لتحميل ملحق جديد. افتح مجلد "dist" عند المطالبة وسيتم تحميل الملحق. لاستخدامه، ستحتاج إلى مفتاح API لواجهة برمجة التطبيقات الخاصة بـ CO2 Signal ([احصل على واحد عبر البريد الإلكتروني هنا](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع الموجود على هذه الصفحة) ورمز منطقتك المقابل لـ [خريطة الكهرباء](http://api.electricitymap.org/v3/zones) ([Electricity Map](https://www.electricitymap.org/map)) (في بوسطن، على سبيل المثال، أستخدم "US-NEISO").
بمجرد إدخال مفتاح API والمنطقة في واجهة الملحق، يجب أن تتغير النقطة الملونة في شريط ملحق المتصفح لتعكس استخدام الطاقة في منطقتك وتقدم لك إشارة حول الأنشطة الثقيلة بالطاقة التي سيكون من المناسب القيام بها. تم استلهام فكرة هذا النظام "النقطة" من ملحق [Energy Lollipop](https://energylollipop.com/) لانبعاثات كاليفورنيا.
بمجرد إدخال مفتاح API والمنطقة في واجهة الملحق، يجب أن تتغير النقطة الملونة في شريط ملحق المتصفح لتعكس استخدام الطاقة في منطقتك وتقدم لك إشارة حول الأنشطة الثقيلة بالطاقة التي سيكون من المناسب القيام بها. تم استلهام فكرة هذا النظام "النقطة" من ملحق [Energy Lollipop](https://energylollipop.com/) لانبعاثات كاليفورنيا.
باستخدام واجهة برمجة التطبيقات CO2 Signal من tmrow لتتبع استخدام الكهرباء، قم بإنشاء امتداد للمتصفح حتى تتمكن من الحصول على تذكير مباشر في متصفحك حول استهلاك الكهرباء في منطقتك. سيساعدك استخدام هذا الامتداد المخصص على اتخاذ قرارات بشأن أنشطتك بناءً على هذه المعلومات.
باستخدام واجهة برمجة التطبيقات CO2 Signal من tmrow لتتبع استخدام الكهرباء، قم بإنشاء امتداد للمتصفح حتى تتمكن من الحصول على تذكير مباشر في متصفحك حول استهلاك الكهرباء في منطقتك. سيساعدك استخدام هذا الامتداد المخصص على اتخاذ قرارات بشأن أنشطتك بناءً على هذه المعلومات.
لتثبيت الامتداد في Edge، استخدم قائمة "النقاط الثلاث" في الزاوية العلوية اليمنى من المتصفح للعثور على لوحة الامتدادات. من هناك، اختر "تحميل غير مضغوط" لتحميل امتداد جديد. افتح مجلد "dist" عندما يُطلب منك ذلك وسيتم تحميل الامتداد. لاستخدامه، ستحتاج إلى مفتاح API لواجهة برمجة التطبيقات CO2 Signal ([احصل عليه هنا عبر البريد الإلكتروني](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع الموجود في هذه الصفحة) ورمز منطقتك المقابل لـ [خريطة الكهرباء](https://www.electricitymap.org/map) ([API](http://api.electricitymap.org/v3/zones)) (في بوسطن، على سبيل المثال، أستخدم "US-NEISO").
لتثبيت الامتداد في Edge، استخدم قائمة "النقاط الثلاث" في الزاوية العلوية اليمنى من المتصفح للعثور على لوحة الامتدادات. من هناك، اختر "تحميل غير مضغوط" لتحميل امتداد جديد. افتح مجلد "dist" عندما يُطلب منك ذلك وسيتم تحميل الامتداد. لاستخدامه، ستحتاج إلى مفتاح API لواجهة برمجة التطبيقات CO2 Signal ([احصل عليه هنا عبر البريد الإلكتروني](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع الموجود في هذه الصفحة) ورمز منطقتك المقابل لـ [خريطة الكهرباء](https://www.electricitymap.org/map) ([API](http://api.electricitymap.org/v3/zones)) (في بوسطن، على سبيل المثال، أستخدم "US-NEISO").
بمجرد إدخال مفتاح API والمنطقة في واجهة الامتداد، يجب أن يتغير النقطة الملونة في شريط الامتداد في المتصفح لتعكس استخدام الطاقة في منطقتك وتعطيك مؤشرًا حول الأنشطة ذات الاستهلاك العالي للطاقة التي ستكون مناسبة لك. الفكرة وراء هذا النظام "النقطي" استلهمتها من [امتداد Energy Lollipop](https://energylollipop.com/) لانبعاثات كاليفورنيا.
بمجرد إدخال مفتاح API والمنطقة في واجهة الامتداد، يجب أن يتغير النقطة الملونة في شريط الامتداد في المتصفح لتعكس استخدام الطاقة في منطقتك وتعطيك مؤشرًا حول الأنشطة ذات الاستهلاك العالي للطاقة التي ستكون مناسبة لك. الفكرة وراء هذا النظام "النقطي" استلهمتها من [امتداد Energy Lollipop](https://energylollipop.com/) لانبعاثات كاليفورنيا.
باستخدام واجهة برمجة التطبيقات C02 Signal من tmrow لتتبع استهلاك الكهرباء، قم بإنشاء ملحق متصفح حتى تتمكن من الحصول على تذكير مباشرة في متصفحك حول استهلاك الكهرباء في منطقتك. استخدام هذا الملحق المخصص سيساعدك على اتخاذ قرارات بشأن أنشطتك بناءً على هذه المعلومات.
باستخدام واجهة برمجة التطبيقات C02 Signal من tmrow لتتبع استهلاك الكهرباء، قم بإنشاء ملحق متصفح حتى تتمكن من الحصول على تذكير مباشرة في متصفحك حول استهلاك الكهرباء في منطقتك. استخدام هذا الملحق المخصص سيساعدك على اتخاذ قرارات بشأن أنشطتك بناءً على هذه المعلومات.
لتثبيت الملحق على Edge، استخدم قائمة "النقاط الثلاث" في الزاوية العلوية اليمنى من المتصفح للعثور على لوحة الملحقات. من هناك، اختر "تحميل ملحق غير مضغوط" لتحميل ملحق جديد. افتح مجلد "dist" عند الطلب وسيتم تحميل الملحق. لاستخدامه، ستحتاج إلى مفتاح API لواجهة برمجة التطبيقات CO2 Signal ([احصل على واحد عبر البريد الإلكتروني هنا](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع الموجود على هذه الصفحة) ورمز منطقتك المقابل لـ [خريطة الكهرباء](https://www.electricitymap.org/map) ([ابحث عن الرمز هنا](http://api.electricitymap.org/v3/zones)) (في بوسطن، على سبيل المثال، أستخدم "US-NEISO").
لتثبيت الملحق على Edge، استخدم قائمة "النقاط الثلاث" في الزاوية العلوية اليمنى من المتصفح للعثور على لوحة الملحقات. من هناك، اختر "تحميل ملحق غير مضغوط" لتحميل ملحق جديد. افتح مجلد "dist" عند الطلب وسيتم تحميل الملحق. لاستخدامه، ستحتاج إلى مفتاح API لواجهة برمجة التطبيقات CO2 Signal ([احصل على واحد عبر البريد الإلكتروني هنا](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع الموجود على هذه الصفحة) ورمز منطقتك المقابل لـ [خريطة الكهرباء](https://www.electricitymap.org/map) ([ابحث عن الرمز هنا](http://api.electricitymap.org/v3/zones)) (في بوسطن، على سبيل المثال، أستخدم "US-NEISO").
بمجرد إدخال مفتاح API والمنطقة في واجهة الملحق، يجب أن يتغير النقطة الملونة في شريط ملحق المتصفح لتعكس استهلاك الطاقة في منطقتك وتعطيك مؤشرًا على الأنشطة التي تستهلك الطاقة والتي سيكون من المناسب القيام بها. تم استلهام فكرة هذا النظام "النقاط" من [ملحق Energy Lollipop](https://energylollipop.com/) لانبعاثات كاليفورنيا.
بمجرد إدخال مفتاح API والمنطقة في واجهة الملحق، يجب أن يتغير النقطة الملونة في شريط ملحق المتصفح لتعكس استهلاك الطاقة في منطقتك وتعطيك مؤشرًا على الأنشطة التي تستهلك الطاقة والتي سيكون من المناسب القيام بها. تم استلهام فكرة هذا النظام "النقاط" من [ملحق Energy Lollipop](https://energylollipop.com/) لانبعاثات كاليفورنيا.
استخدام واجهة برمجة التطبيقات CO2 Signal الخاصة بـ tmrow لتتبع استهلاك الكهرباء، وإنشاء ملحق متصفح يذكّرك بمدى كثافة استخدام الكهرباء في منطقتك أثناء تصفحك. يهدف هذا الملحق إلى مساعدتك في اتخاذ قرارات مستنيرة بناءً على هذه المعلومات.
استخدام واجهة برمجة التطبيقات CO2 Signal الخاصة بـ tmrow لتتبع استهلاك الكهرباء، وإنشاء ملحق متصفح يذكّرك بمدى كثافة استخدام الكهرباء في منطقتك أثناء تصفحك. يهدف هذا الملحق إلى مساعدتك في اتخاذ قرارات مستنيرة بناءً على هذه المعلومات.
لتثبيته على متصفح Edge، استخدم قائمة "النقاط الثلاث" في الزاوية العلوية اليمنى من المتصفح للعثور على لوحة الملحقات. من هناك، اختر "تحميل غير مضغوط" لتحميل ملحق جديد. عند المطالبة، افتح مجلد "dist" وسيتم تحميل الملحق. لاستخدامه، ستحتاج إلى مفتاح API لواجهة CO2 Signal ([احصل عليه عبر البريد الإلكتروني من هنا](https://www.co2snal.com/) عن طريق إدخال بريدك الإلكتروني في المربع الموجود على الصفحة) بالإضافة إلى [رمز منطقتك](http://api.electricitymap.org/v3/zones) من [خريطة الكهرباء](https://www.electricitymap.org/map) (على سبيل المثال، في بوسطن، أستخدم "US-NEISO").
لتثبيته على متصفح Edge، استخدم قائمة "النقاط الثلاث" في الزاوية العلوية اليمنى من المتصفح للعثور على لوحة الملحقات. من هناك، اختر "تحميل غير مضغوط" لتحميل ملحق جديد. عند المطالبة، افتح مجلد "dist" وسيتم تحميل الملحق. لاستخدامه، ستحتاج إلى مفتاح API لواجهة CO2 Signal ([احصل عليه عبر البريد الإلكتروني من هنا](https://www.co2snal.com/) عن طريق إدخال بريدك الإلكتروني في المربع الموجود على الصفحة) بالإضافة إلى [رمز منطقتك](http://api.electricitymap.org/v3/zones) من [خريطة الكهرباء](https://www.electricitymap.org/map) (على سبيل المثال، في بوسطن، أستخدم "US-NEISO").
بمجرد إدخال مفتاح API ورمز المنطقة في واجهة الملحق، يجب أن يتغير النقطة الملونة في شريط ملحق المتصفح لتعكس استهلاك الطاقة في منطقتك، مما يمنحك مؤشرًا على الأنشطة التي تتطلب طاقة كثيفة وما إذا كانت مناسبة للقيام بها. فكرة نظام "النقطة" هذا مستوحاة من ملحق [Energy Lollipop](https://energylollipop.com/) الخاص بانبعاثات كاليفورنيا.
بمجرد إدخال مفتاح API ورمز المنطقة في واجهة الملحق، يجب أن يتغير النقطة الملونة في شريط ملحق المتصفح لتعكس استهلاك الطاقة في منطقتك، مما يمنحك مؤشرًا على الأنشطة التي تتطلب طاقة كثيفة وما إذا كانت مناسبة للقيام بها. فكرة نظام "النقطة" هذا مستوحاة من ملحق [Energy Lollipop](https://energylollipop.com/) الخاص بانبعاثات كاليفورنيا.
سيتم استخدام واجهة برمجة التطبيقات Signal CO2 الخاصة بـ tmrow لمراقبة استهلاك الكهرباء لإنشاء امتداد للمتصفح، بحيث يمكنك الحصول على تذكير مباشر في متصفحك حول مدى كثافة استهلاك الكهرباء في منطقتك. استخدام هذا الامتداد المخصص سيساعدك على تقييم أنشطتك بناءً على هذه المعلومات.
سيتم استخدام واجهة برمجة التطبيقات Signal CO2 الخاصة بـ tmrow لمراقبة استهلاك الكهرباء لإنشاء امتداد للمتصفح، بحيث يمكنك الحصول على تذكير مباشر في متصفحك حول مدى كثافة استهلاك الكهرباء في منطقتك. استخدام هذا الامتداد المخصص سيساعدك على تقييم أنشطتك بناءً على هذه المعلومات.
لتثبيت الامتداد على متصفح Edge، استخدم قائمة "النقاط الثلاث" في الزاوية العلوية اليمنى من المتصفح للعثور على لوحة الامتدادات. إذا لم تكن مفعّلة بالفعل، قم بتفعيل وضع المطور (في أسفل اليسار). اختر "تحميل غير مضغوط" لتحميل امتداد جديد. افتح مجلد "dist" عند المطالبة وسيتم تحميل الامتداد. لاستخدامه، ستحتاج إلى مفتاح API لواجهة برمجة التطبيقات CO2 Signal (يمكنك [الحصول عليه عبر البريد الإلكتروني هنا](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع الموجود في هذه الصفحة) ورمز [المنطقة الخاص بك](http://api.electricitymap.org/v3/zones) المطابق لـ [خريطة الكهرباء](https://www.electricitymap.org/map) (على سبيل المثال، في بوسطن، الرمز هو "US-NEISO").
لتثبيت الامتداد على متصفح Edge، استخدم قائمة "النقاط الثلاث" في الزاوية العلوية اليمنى من المتصفح للعثور على لوحة الامتدادات. إذا لم تكن مفعّلة بالفعل، قم بتفعيل وضع المطور (في أسفل اليسار). اختر "تحميل غير مضغوط" لتحميل امتداد جديد. افتح مجلد "dist" عند المطالبة وسيتم تحميل الامتداد. لاستخدامه، ستحتاج إلى مفتاح API لواجهة برمجة التطبيقات CO2 Signal (يمكنك [الحصول عليه عبر البريد الإلكتروني هنا](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع الموجود في هذه الصفحة) ورمز [المنطقة الخاص بك](http://api.electricitymap.org/v3/zones) المطابق لـ [خريطة الكهرباء](https://www.electricitymap.org/map) (على سبيل المثال، في بوسطن، الرمز هو "US-NEISO").
بمجرد إدخال مفتاح API والمنطقة في واجهة الامتداد، يجب أن يتغير النقطة الملونة في شريط الامتداد الخاص بالمتصفح لتعكس استهلاك الطاقة في المنطقة وتوفر مؤشرًا حول الأنشطة ذات الاستهلاك العالي للطاقة التي يمكن تنفيذها. الفكرة وراء هذا النظام القائم على "النقاط" مستوحاة من [امتداد Energy Lollipop](https://energylollipop.com/) لانبعاثات كاليفورنيا.
بمجرد إدخال مفتاح API والمنطقة في واجهة الامتداد، يجب أن يتغير النقطة الملونة في شريط الامتداد الخاص بالمتصفح لتعكس استهلاك الطاقة في المنطقة وتوفر مؤشرًا حول الأنشطة ذات الاستهلاك العالي للطاقة التي يمكن تنفيذها. الفكرة وراء هذا النظام القائم على "النقاط" مستوحاة من [امتداد Energy Lollipop](https://energylollipop.com/) لانبعاثات كاليفورنيا.
قم ببناء ملحق متصفح يعرض تذكيرًا على المتصفح حول مدى كثافة استخدام الطاقة في منطقتك، باستخدام واجهة برمجة التطبيقات CO2 Signal من tmrow لتتبع استهلاك الطاقة. يمكنك استخدام هذا الملحق بشكل مخصص لاتخاذ قرارات بناءً على هذه المعلومات.
قم ببناء ملحق متصفح يعرض تذكيرًا على المتصفح حول مدى كثافة استخدام الطاقة في منطقتك، باستخدام واجهة برمجة التطبيقات CO2 Signal من tmrow لتتبع استهلاك الطاقة. يمكنك استخدام هذا الملحق بشكل مخصص لاتخاذ قرارات بناءً على هذه المعلومات.
لتثبيته على Edge، ابحث عن لوحة "الإضافات" من قائمة "النقاط الثلاث" في الزاوية اليمنى العليا من المتصفح. من هناك، اختر "Load Unpacked" لتحميل الملحق الجديد. عند ظهور المطالبة، افتح مجلد "dist"، وسيتم تحميل الملحق. لاستخدامه، ستحتاج إلى مفتاح API من CO2 Signal ([احصل على واحد عبر البريد الإلكتروني هنا](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع على هذه الصفحة)، بالإضافة إلى [رمز لمنطقتك](http://api.electricitymap.org/v3/zones) المتوافق مع [Electricity Map](https://www.electricitymap.org/map) (على سبيل المثال، في بوسطن، يتم استخدام 'US-NEISO').
لتثبيته على Edge، ابحث عن لوحة "الإضافات" من قائمة "النقاط الثلاث" في الزاوية اليمنى العليا من المتصفح. من هناك، اختر "Load Unpacked" لتحميل الملحق الجديد. عند ظهور المطالبة، افتح مجلد "dist"، وسيتم تحميل الملحق. لاستخدامه، ستحتاج إلى مفتاح API من CO2 Signal ([احصل على واحد عبر البريد الإلكتروني هنا](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع على هذه الصفحة)، بالإضافة إلى [رمز لمنطقتك](http://api.electricitymap.org/v3/zones) المتوافق مع [Electricity Map](https://www.electricitymap.org/map) (على سبيل المثال، في بوسطن، يتم استخدام 'US-NEISO').
بمجرد إدخال مفتاح API والمنطقة في واجهة الملحق، ستتغير النقطة الملونة التي تظهر في شريط ملحقات المتصفح لتعكس استهلاك الطاقة في منطقتك. ستساعدك هذه النقطة في تحديد الأنشطة التي تتطلب طاقة والتي من المناسب القيام بها. فكرة نظام "النقطة" مستوحاة من [ملحق Energy Lollipop](https://energylollipop.com/) الخاص بانبعاثات كاليفورنيا.
بمجرد إدخال مفتاح API والمنطقة في واجهة الملحق، ستتغير النقطة الملونة التي تظهر في شريط ملحقات المتصفح لتعكس استهلاك الطاقة في منطقتك. ستساعدك هذه النقطة في تحديد الأنشطة التي تتطلب طاقة والتي من المناسب القيام بها. فكرة نظام "النقطة" مستوحاة من [ملحق Energy Lollipop](https://energylollipop.com/) الخاص بانبعاثات كاليفورنيا.
باستخدام واجهة برمجة التطبيقات لإشارات ثاني أكسيد الكربون من tmrow لتتبع استهلاك الكهرباء، قم ببناء ملحق للمتصفح بحيث يمكنك تلقي تنبيهات في متصفحك حول مدى كثافة استهلاك الكهرباء في منطقتك. استخدام هذا الملحق سيساعدك بشكل خاص على اتخاذ قرارات بشأن أنشطتك بناءً على هذه المعلومات.
باستخدام واجهة برمجة التطبيقات لإشارات ثاني أكسيد الكربون من tmrow لتتبع استهلاك الكهرباء، قم ببناء ملحق للمتصفح بحيث يمكنك تلقي تنبيهات في متصفحك حول مدى كثافة استهلاك الكهرباء في منطقتك. استخدام هذا الملحق سيساعدك بشكل خاص على اتخاذ قرارات بشأن أنشطتك بناءً على هذه المعلومات.
لتثبيته على Edge، استخدم قائمة "النقاط الثلاث" في الزاوية اليمنى العليا من المتصفح للعثور على لوحة الملحقات. من هناك، اختر "Load Unpacked" لتحميل الملحق الجديد. افتح مجلد "dist" عند الطلب وسيتم تحميل الملحق. لاستخدامه، ستحتاج إلى مفتاح API لواجهة برمجة التطبيقات لإشارات ثاني أكسيد الكربون ([احصل على واحد عبر البريد الإلكتروني هنا](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع الموجود على الصفحة) و[رمز لمنطقتك](http://api.electricitymap.org/v3/zones) الذي يتوافق مع [خريطة الكهرباء](https://www.electricitymap.org/map) (في بوسطن، على سبيل المثال، أستخدم "US-NEISO").
لتثبيته على Edge، استخدم قائمة "النقاط الثلاث" في الزاوية اليمنى العليا من المتصفح للعثور على لوحة الملحقات. من هناك، اختر "Load Unpacked" لتحميل الملحق الجديد. افتح مجلد "dist" عند الطلب وسيتم تحميل الملحق. لاستخدامه، ستحتاج إلى مفتاح API لواجهة برمجة التطبيقات لإشارات ثاني أكسيد الكربون ([احصل على واحد عبر البريد الإلكتروني هنا](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع الموجود على الصفحة) و[رمز لمنطقتك](http://api.electricitymap.org/v3/zones) الذي يتوافق مع [خريطة الكهرباء](https://www.electricitymap.org/map) (في بوسطن، على سبيل المثال، أستخدم "US-NEISO").
بمجرد إدخال مفتاح API والمنطقة في واجهة الملحق، ستتغير النقطة الملونة في شريط ملحق المتصفح لتعكس استهلاك الطاقة في منطقتك وتقدم لك إرشادات حول الأنشطة الثقيلة المناسبة للقيام بها. تم استلهام فكرة نظام "النقطة" هذا من [ملحق متصفح Lollipop للطاقة](https://energylollipop.com/) الخاص بانبعاثات كاليفورنيا.
بمجرد إدخال مفتاح API والمنطقة في واجهة الملحق، ستتغير النقطة الملونة في شريط ملحق المتصفح لتعكس استهلاك الطاقة في منطقتك وتقدم لك إرشادات حول الأنشطة الثقيلة المناسبة للقيام بها. تم استلهام فكرة نظام "النقطة" هذا من [ملحق متصفح Lollipop للطاقة](https://energylollipop.com/) الخاص بانبعاثات كاليفورنيا.
باستخدام واجهة برمجة التطبيقات CO2 Signal الخاصة بـ tmrow لتتبع استهلاك الكهرباء، قم ببناء امتداد متصفح بحيث يمكنك الحصول على تذكير مباشرة في متصفحك حول مدى كثافة استهلاك الكهرباء في منطقتك. استخدام هذا الامتداد بشكل عشوائي سيساعدك على اتخاذ قرارات بناءً على هذه المعلومات.
باستخدام واجهة برمجة التطبيقات CO2 Signal الخاصة بـ tmrow لتتبع استهلاك الكهرباء، قم ببناء امتداد متصفح بحيث يمكنك الحصول على تذكير مباشرة في متصفحك حول مدى كثافة استهلاك الكهرباء في منطقتك. استخدام هذا الامتداد بشكل عشوائي سيساعدك على اتخاذ قرارات بناءً على هذه المعلومات.
لتثبيت الامتداد على متصفح Edge، استخدم قائمة "النقاط الثلاث" في الزاوية العلوية اليمنى من المتصفح للعثور على لوحة الامتدادات. من هناك، اختر "تحميل غير مضغوط" لتحميل امتداد جديد. افتح مجلد "dist" عند المطالبة وسيتم تحميل الامتداد. لاستخدامه، ستحتاج إلى مفتاح API لواجهة برمجة التطبيقات CO2 Signal ([احصل على واحد عبر البريد الإلكتروني هنا](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع الموجود على هذه الصفحة) ورمز منطقتك من [Electricity Map](http://api.electricitymap.org/v3/zones) (على سبيل المثال، في بوسطن أستخدم "US-NEISO").
لتثبيت الامتداد على متصفح Edge، استخدم قائمة "النقاط الثلاث" في الزاوية العلوية اليمنى من المتصفح للعثور على لوحة الامتدادات. من هناك، اختر "تحميل غير مضغوط" لتحميل امتداد جديد. افتح مجلد "dist" عند المطالبة وسيتم تحميل الامتداد. لاستخدامه، ستحتاج إلى مفتاح API لواجهة برمجة التطبيقات CO2 Signal ([احصل على واحد عبر البريد الإلكتروني هنا](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع الموجود على هذه الصفحة) ورمز منطقتك من [Electricity Map](http://api.electricitymap.org/v3/zones) (على سبيل المثال، في بوسطن أستخدم "US-NEISO").
بمجرد إدخال مفتاح API والمنطقة في واجهة الامتداد، يجب أن تتغير النقطة الملونة في شريط امتداد المتصفح لتعكس استهلاك الطاقة في منطقتك وتقدم لك إشارة حول الأنشطة التي تستهلك الطاقة والتي قد تكون مناسبة للقيام بها. تم استلهام فكرة نظام "النقطة" هذا من امتداد [Energy Lollipop](https://energylollipop.com/) لانبعاثات كاليفورنيا.
بمجرد إدخال مفتاح API والمنطقة في واجهة الامتداد، يجب أن تتغير النقطة الملونة في شريط امتداد المتصفح لتعكس استهلاك الطاقة في منطقتك وتقدم لك إشارة حول الأنشطة التي تستهلك الطاقة والتي قد تكون مناسبة للقيام بها. تم استلهام فكرة نظام "النقطة" هذا من امتداد [Energy Lollipop](https://energylollipop.com/) لانبعاثات كاليفورنيا.
- **نظام النقاط**: كل سفينة عدو يتم تدميرها تمنح 100 نقطة (الأرقام المستديرة أسهل للاعبين لحسابها ذهنيًا). يتم عرض النقاط في الزاوية السفلية اليسرى.
- **نظام النقاط**: كل سفينة عدو يتم تدميرها تمنح 100 نقطة (الأرقام المستديرة أسهل للاعبين لحسابها ذهنيًا). يتم عرض النقاط في الزاوية السفلية اليسرى.
- **عداد الأرواح**: يبدأ بطلك بثلاث أرواح - معيار تم تحديده بواسطة ألعاب الأركيد المبكرة لتحقيق التوازن بين التحدي وقابلية اللعب. كل تصادم مع عدو يكلفك حياة واحدة. سنعرض الأرواح المتبقية في الزاوية السفلية اليمنى باستخدام أيقونات السفن .
- **عداد الأرواح**: يبدأ بطلك بثلاث أرواح - معيار تم تحديده بواسطة ألعاب الأركيد المبكرة لتحقيق التوازن بين التحدي وقابلية اللعب. كل تصادم مع عدو يكلفك حياة واحدة. سنعرض الأرواح المتبقية في الزاوية السفلية اليمنى باستخدام أيقونات السفن .
استخدام `history.pushState` ينشئ إدخالات جديدة في سجل التنقل الخاص بالمتصفح. يمكنك التحقق من ذلك عن طريق الضغط على *زر الرجوع* في متصفحك، يجب أن يعرض شيئًا مثل هذا:
استخدام `history.pushState` ينشئ إدخالات جديدة في سجل التنقل الخاص بالمتصفح. يمكنك التحقق من ذلك عن طريق الضغط على *زر الرجوع* في متصفحك، يجب أن يعرض شيئًا مثل هذا:
3. لاحظ كيف يتم إعادة تحميل الصفحة وتظهر البيانات في عنوان URL
3. لاحظ كيف يتم إعادة تحميل الصفحة وتظهر البيانات في عنوان URL
### مقارنة طرق HTTP
### مقارنة طرق HTTP
@ -350,7 +350,7 @@ graph TD
2. **انقر** على زر "إنشاء حساب"
2. **انقر** على زر "إنشاء حساب"
3. **لاحظ** استجابة الخادم في متصفحك
3. **لاحظ** استجابة الخادم في متصفحك
**ما يجب أن تراه:**
**ما يجب أن تراه:**
- **إعادة توجيه المتصفح** إلى عنوان URL لنقطة نهاية API
- **إعادة توجيه المتصفح** إلى عنوان URL لنقطة نهاية API
@ -615,7 +615,7 @@ async function register() {
3. **انقر** على "إنشاء حساب"
3. **انقر** على "إنشاء حساب"
4. **لاحظ** رسائل وحدة التحكم وملاحظات المستخدم
4. **لاحظ** رسائل وحدة التحكم وملاحظات المستخدم
**ما يجب أن تراه:**
**ما يجب أن تراه:**
- **حالة التحميل** تظهر على زر الإرسال
- **حالة التحميل** تظهر على زر الإرسال
@ -790,7 +790,7 @@ input:focus:invalid {
3. **جرب** أحرف خاصة في حقل اسم المستخدم
3. **جرب** أحرف خاصة في حقل اسم المستخدم
4. **أدخل** مبلغ رصيد سلبي
4. **أدخل** مبلغ رصيد سلبي
**ما ستلاحظه:**
**ما ستلاحظه:**
- **المتصفح يعرض** رسائل التحقق الأصلية
- **المتصفح يعرض** رسائل التحقق الأصلية
@ -940,7 +940,7 @@ timeline
إليك مثال لما يمكن أن يبدو عليه صفحة تسجيل الدخول النهائية بعد إضافة بعض أنماط CSS:
إليك مثال لما يمكن أن يبدو عليه صفحة تسجيل الدخول النهائية بعد إضافة بعض أنماط CSS:
في هذا المشروع، ستتعلم كيفية بناء بنك خيالي. تتضمن هذه الدروس تعليمات حول كيفية تصميم تطبيق ويب وتوفير المسارات، بناء النماذج، إدارة الحالة، وجلب البيانات من واجهة برمجية (API) يمكنك من خلالها الحصول على بيانات البنك.
في هذا المشروع، ستتعلم كيفية بناء بنك خيالي. تتضمن هذه الدروس تعليمات حول كيفية تصميم تطبيق ويب وتوفير المسارات، بناء النماذج، إدارة الحالة، وجلب البيانات من واجهة برمجية (API) يمكنك من خلالها الحصول على بيانات البنك.
## 🗺️ رحلتك التعليمية عبر تطوير تطبيقات الذكاء الاصطناعي
## 🗺️ رحلتك التعليمية عبر تطوير تطبيقات الذكاء الاصطناعي
@ -194,7 +194,7 @@ mindmap
**المبدأ الأساسي**: تطوير تطبيقات الذكاء الاصطناعي يجمع بين مهارات تطوير الويب التقليدية وتكامل خدمات الذكاء الاصطناعي، مما يخلق تطبيقات ذكية تبدو طبيعية وتفاعلية للمستخدمين.
**المبدأ الأساسي**: تطوير تطبيقات الذكاء الاصطناعي يجمع بين مهارات تطوير الويب التقليدية وتكامل خدمات الذكاء الاصطناعي، مما يخلق تطبيقات ذكية تبدو طبيعية وتفاعلية للمستخدمين.
**ما الذي يجعل الملعب مفيدًا جدًا:**
**ما الذي يجعل الملعب مفيدًا جدًا:**
- **جرب** نماذج ذكاء اصطناعي مختلفة مثل GPT-4o-mini، Claude، وغيرها (كلها مجانية!)
- **جرب** نماذج ذكاء اصطناعي مختلفة مثل GPT-4o-mini، Claude، وغيرها (كلها مجانية!)
@ -204,7 +204,7 @@ mindmap
بمجرد أن تجرب قليلاً، فقط انقر على علامة التبويب "Code" واختر لغتك البرمجية للحصول على كود التنفيذ الذي تحتاجه.
بمجرد أن تجرب قليلاً، فقط انقر على علامة التبويب "Code" واختر لغتك البرمجية للحصول على كود التنفيذ الذي تحتاجه.
## إعداد تكامل الخلفية باستخدام Python
## إعداد تكامل الخلفية باستخدام Python
@ -2364,14 +2364,14 @@ mindmap
- **انتقل** إلى [مستودع Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- **انتقل** إلى [مستودع Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- **اضغط** على "Use this template" في الزاوية العلوية اليمنى (تأكد من تسجيل الدخول إلى GitHub)
- **اضغط** على "Use this template" في الزاوية العلوية اليمنى (تأكد من تسجيل الدخول إلى GitHub)
**الخطوة 2: تشغيل Codespaces**
**الخطوة 2: تشغيل Codespaces**
- **افتح** المستودع الذي أنشأته حديثًا
- **افتح** المستودع الذي أنشأته حديثًا
- **اضغط** على الزر الأخضر "Code" واختر "Codespaces"
- **اضغط** على الزر الأخضر "Code" واختر "Codespaces"
- **اختر** "Create codespace on main" لبدء بيئة التطوير
- **اختر** "Create codespace on main" لبدء بيئة التطوير
Днес ще разгледаме невероятните инструменти, които правят съвременното уеб разработване не само възможно, но и наистина пристрастяващо. Говоря за същите редактори, браузъри и работни процеси, които разработчиците в Netflix, Spotify и любимото ти инди студио използват всеки ден. И ето и частта, която ще те накара да се зарадваш: повечето от тези професионални, индустриални инструменти са напълно безплатни!
Днес ще разгледаме невероятните инструменти, които правят съвременното уеб разработване не само възможно, но и наистина пристрастяващо. Говоря за същите редактори, браузъри и работни процеси, които разработчиците в Netflix, Spotify и любимото ти инди студио използват всеки ден. И ето и частта, която ще те накара да се зарадваш: повечето от тези професионални, индустриални инструменти са напълно безплатни!
Ще изминаем това пътешествие заедно, стъпка по стъпка. Без бързане, без натиск – само ти, аз и някои много яки инструменти, които ще станат твоите най-добри приятели!
Ще изминаем това пътешествие заедно, стъпка по стъпка. Без бързане, без натиск – само ти, аз и някои много яки инструменти, които ще станат твоите най-добри приятели!
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
```mermaid
@ -606,7 +606,7 @@ flowchart TD
✅ Един добър начин да намерите 'начинаещи-приятелски' репота е да [търсите по етикет 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
✅ Един добър начин да намерите 'начинаещи-приятелски' репота е да [търсите по етикет 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Има няколко начина да копирате кода. Един от тях е да "клонирате" съдържанието на репозитория, използвайки HTTPS, SSH или с помощта на GitHub CLI (Интерфейс на командния ред).
Има няколко начина да копирате кода. Един от тях е да "клонирате" съдържанието на репозитория, използвайки HTTPS, SSH или с помощта на GitHub CLI (Интерфейс на командния ред).
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
HTML или HyperText Markup Language е основата на всеки уебсайт, който някога сте посещавали. Помислете за HTML като за скелета, който дава структура на уеб страниците – той определя къде да отиде съдържанието, как е организирано и какво представлява всяка част. Докато CSS по-късно „облича“ вашия HTML с цветове и оформления, а JavaScript го оживява с интерактивност, HTML осигурява съществената структура, която прави всичко останало възможно.
HTML или HyperText Markup Language е основата на всеки уебсайт, който някога сте посещавали. Помислете за HTML като за скелета, който дава структура на уеб страниците – той определя къде да отиде съдържанието, как е организирано и какво представлява всяка част. Докато CSS по-късно „облича“ вашия HTML с цветове и оформления, а JavaScript го оживява с интерактивност, HTML осигурява съществената структура, която прави всичко останало възможно.
@ -86,7 +86,7 @@ mindmap
4. В панела Explorer кликнете иконата за "New File"
4. В панела Explorer кликнете иконата за "New File"
5. Наименувайте файла си `index.html`
5. Наименувайте файла си `index.html`
**Опция 2: Използване на команди в терминала**
**Опция 2: Използване на команди в терминала**
```bash
```bash
@ -236,48 +236,48 @@ HTML използва тагове в двойки, за да дефинира
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
Спомняте ли си как вашият HTML терариум изглеждаше доста основен? CSS е мястото, където преобразяваме тази обикновена структура във визуално привлекателна.
Спомняте ли си как вашият HTML терариум изглеждаше доста основен? CSS е мястото, където преобразяваме тази обикновена структура във визуално привлекателна.
@ -202,7 +202,7 @@ body {
Отворете инструменти за разработчици на вашия браузър (F12), отидете на раздел Elements и инспектирайте вашия `<h1>` елемент. Ще видите, че той наследява шрифтa от body:
Отворете инструменти за разработчици на вашия браузър (F12), отидете на раздел Elements и инспектирайте вашия `<h1>` елемент. Ще видите, че той наследява шрифтa от body:
✅ **Време за експеримент**: Опитайте да зададете други наследяеми свойства на `<body>`, като `color`, `line-height` или `text-align`. Какво се случва с вашия заглавен елемент и други елементи?
✅ **Време за експеримент**: Опитайте да зададете други наследяеми свойства на `<body>`, като `color`, `line-height` или `text-align`. Какво се случва с вашия заглавен елемент и други елементи?
@ -332,7 +332,7 @@ h1 {
**Ето HTML структурата за всяко растение:**
**Ето HTML структурата за всяко растение:**
```html
```html
<divclass="plant-holder">
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.bg.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/bg/plant1.d18b18ffe73da18f.png" />
</div>
</div>
```
```
@ -594,7 +594,7 @@ flowchart LR
Ще създадете нежни отблясъци, които симулират как светлината се отразява от стъклени повърхности. Този подход е подобен на техниката на ренесансови художници като Ян ван Ейк, които използвали светлина и отражения, за да направят изрисуваното стъкло триизмерно. Ето какво трябва да постигнете:
Ще създадете нежни отблясъци, които симулират как светлината се отразява от стъклени повърхности. Този подход е подобен на техниката на ренесансови художници като Ян ван Ейк, които използвали светлина и отражения, за да направят изрисуваното стъкло триизмерно. Ето какво трябва да постигнете:
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
Добре дошли в един от най-ангажиращите аспекти на уеб разработката - правенето на нещата интерактивни! Document Object Model (DOM) е като мост между вашия HTML и JavaScript, и днес ще го използваме, за да вдъхнем живот на вашия терариум. Когато Тим Бернърс-Лий създава първия уеб браузър, той си представя уеб, където документите могат да бъдат динамични и интерактивни - DOM прави тази визия възможна.
Добре дошли в един от най-ангажиращите аспекти на уеб разработката - правенето на нещата интерактивни! Document Object Model (DOM) е като мост между вашия HTML и JavaScript, и днес ще го използваме, за да вдъхнем живот на вашия терариум. Когато Тим Бернърс-Лий създава първия уеб браузър, той си представя уеб, където документите могат да бъдат динамични и интерактивни - DOM прави тази визия възможна.
@ -102,7 +102,7 @@ flowchart TD
style P fill:#ffebee
style P fill:#ffebee
style Q fill:#ffebee
style Q fill:#ffebee
```
```
> Представяне на DOM и HTML маркировката, която го реферира. От [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
> Представяне на DOM и HTML маркировката, която го реферира. От [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
```
> 💡 **Разбиране на замикванията**: Замикванията са важна тема в JavaScript, и много разработчици ги използват години преди да разберат напълно всички теоретични аспекти. Днес се фокусираме върху практическото приложение - ще видите как замикванията естествено изникват докато изграждаме нашите интерактивни функции. Разбирането ще се развива докато виждате как те решават реални проблеми.
> 💡 **Разбиране на замикванията**: Замикванията са важна тема в JavaScript, и много разработчици ги използват години преди да разберат напълно всички теоретични аспекти. Днес се фокусираме върху практическото приложение - ще видите как замикванията естествено изникват докато изграждаме нашите интерактивни функции. Разбирането ще се развива докато виждате как те решават реални проблеми.
> Представяне на DOM и HTML маркировката, която го реферира. От [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
> Представяне на DOM и HTML маркировката, която го реферира. От [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ function stopElementDrag() {
- **Поддръжка на различни устройства**: Работи и на десктоп, и на мобилни устройства
- **Поддръжка на различни устройства**: Работи и на десктоп, и на мобилни устройства
- **Осъзнатост за производителност**: Без изтичания на памет или излишни изчисления
- **Осъзнатост за производителност**: Без изтичания на памет или излишни изчисления
> Някои ранни браузъри, чрез [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
> Някои ранни браузъри, чрез [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Как браузърите обработват уеб съдържание
### Как браузърите обработват уеб съдържание
@ -194,7 +194,7 @@ quadrantChart
Разбирането на процеса по инсталация на разширения помага да предвидите потребителското изживяване при инсталиране на вашето разширение. Този процес е стандартизиран във всички съвременни браузъри, с малки различия в дизайна на интерфейса.
Разбирането на процеса по инсталация на разширения помага да предвидите потребителското изживяване при инсталиране на вашето разширение. Този процес е стандартизиран във всички съвременни браузъри, с малки различия в дизайна на интерфейса.
> **Важно**: Уверете се, че сте активирали режим за разработчици и разрешили разширения от други магазини, когато тествате собствените си разширения.
> **Важно**: Уверете се, че сте активирали режим за разработчици и разрешили разширения от други магазини, когато тествате собствените си разширения.
@ -308,10 +308,10 @@ project-root/
### Преглед на изгледите на разширението
### Преглед на изгледите на разширението
**Екран за настройка** - Конфигурация при първото използване:
**Екран за настройка** - Конфигурация при първото използване:
**Екран с резултати** - Показване на данните за въглеродния отпечатък:
**Екран с резултати** - Показване на данните за въглеродния отпечатък:
> ⚠️ **Съображения за сигурността**: В продукционни приложения съхраняването на API ключове в LocalStorage представлява риск за сигурността, защото JavaScript може да има достъп до тези данни. За учебни цели този подход е приемлив, но реалните приложения трябва да използват защитено сървърно съхранение за чувствителни данни.
> ⚠️ **Съображения за сигурността**: В продукционни приложения съхраняването на API ключове в LocalStorage представлява риск за сигурността, защото JavaScript може да има достъп до тези данни. За учебни цели този подход е приемлив, но реалните приложения трябва да използват защитено сървърно съхранение за чувствителни данни.
Нека опитаме. Отворете уебсайт (Microsoft.com е добър пример) и кликнете бутона 'Record'. Сега обновете страницата и гледайте профайлъра как улавя всичко, което се случва. Когато спрете записа, ще видите детайлно разграфяване на това как браузърът „изпълнява скриптове“, „рендерира“ и „рисува“ сайта. Това ми напомня за начина, по който мисия контрол следи всяка система по време на изстрелване на ракета - получавате данни в реално време за точно какво и кога се случва.
Нека опитаме. Отворете уебсайт (Microsoft.com е добър пример) и кликнете бутона 'Record'. Сега обновете страницата и гледайте профайлъра как улавя всичко, което се случва. Когато спрете записа, ще видите детайлно разграфяване на това как браузърът „изпълнява скриптове“, „рендерира“ и „рисува“ сайта. Това ми напомня за начина, по който мисия контрол следи всяка система по време на изстрелване на ракета - получавате данни в реално време за точно какво и кога се случва.
✅ Документацията на [Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) има много повече подробности, ако искате да навлезете по-дълбоко
✅ Документацията на [Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) има много повече подробности, ако искате да навлезете по-дълбоко
@ -133,11 +133,11 @@ flowchart LR
Вземете моментна снимка на производителността на страницата, като изберете част от хронологията на профила и погледнете обобщения прозорец:
Вземете моментна снимка на производителността на страницата, като изберете част от хронологията на профила и погледнете обобщения прозорец:
Използвайки API на tmrow за CO2 Signal, създайте разширение за браузър, което да ви напомня директно в браузъра за натовареността на електрическата мрежа във вашия регион. Използването на това разширение ще ви помогне да вземате информирани решения за вашите дейности въз основа на тази информация.
Използвайки API на tmrow за CO2 Signal, създайте разширение за браузър, което да ви напомня директно в браузъра за натовареността на електрическата мрежа във вашия регион. Използването на това разширение ще ви помогне да вземате информирани решения за вашите дейности въз основа на тази информация.
## Първи стъпки
## Първи стъпки
@ -31,7 +31,7 @@ npm run build
За да го инсталирате в Edge, използвайте менюто с „три точки“ в горния десен ъгъл на браузъра, за да намерите панела с разширения. Оттам изберете „Load Unpacked“, за да заредите ново разширение. Отворете папката „dist“ при подканата и разширението ще се зареди. За да го използвате, ще ви е необходим API ключ за CO2 Signal ([вземете го тук чрез имейл](https://www.co2signal.com/) - въведете вашия имейл в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), съответстващ на [Electricity Map](https://www.electricitymap.org/map) (например в Бостън използвам 'US-NEISO').
За да го инсталирате в Edge, използвайте менюто с „три точки“ в горния десен ъгъл на браузъра, за да намерите панела с разширения. Оттам изберете „Load Unpacked“, за да заредите ново разширение. Отворете папката „dist“ при подканата и разширението ще се зареди. За да го използвате, ще ви е необходим API ключ за CO2 Signal ([вземете го тук чрез имейл](https://www.co2signal.com/) - въведете вашия имейл в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), съответстващ на [Electricity Map](https://www.electricitymap.org/map) (например в Бостън използвам 'US-NEISO').
След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра трябва да се промени, за да отрази енергийната натовареност на вашия регион. Тя ще ви даде насоки за това кои дейности, изискващи повече енергия, са подходящи за изпълнение. Концепцията зад тази система с „точка“ ми беше вдъхновена от [разширението Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния.
След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра трябва да се промени, за да отрази енергийната натовареност на вашия регион. Тя ще ви даде насоки за това кои дейности, изискващи повече енергия, са подходящи за изпълнение. Концепцията зад тази система с „точка“ ми беше вдъхновена от [разширението Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния.
Използвайки API за CO2 Signal от tmrow за проследяване на потреблението на електроенергия, създайте разширение за браузър, което да ви напомня директно в браузъра за потреблението на електроенергия във вашия регион. Използването на това разширение ще ви помогне да вземате решения за вашите дейности въз основа на тази информация.
Използвайки API за CO2 Signal от tmrow за проследяване на потреблението на електроенергия, създайте разширение за браузър, което да ви напомня директно в браузъра за потреблението на електроенергия във вашия регион. Използването на това разширение ще ви помогне да вземате решения за вашите дейности въз основа на тази информация.
## Започване
## Започване
@ -31,7 +31,7 @@ npm run build
За да го инсталирате в Edge, използвайте менюто с „три точки“ в горния десен ъгъл на браузъра, за да намерите панела Разширения. Оттам изберете „Зареди разопаковано“, за да добавите ново разширение. Отворете папката 'dist', когато бъдете подканени, и разширението ще бъде заредено. За да го използвате, ще ви е необходим API ключ за CO2 Signal ([получете го тук чрез имейл](https://www.co2signal.com/) - въведете вашия имейл в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), съответстващ на [Картата на електроенергията](https://www.electricitymap.org/map) (например в Бостън използвам 'US-NEISO').
За да го инсталирате в Edge, използвайте менюто с „три точки“ в горния десен ъгъл на браузъра, за да намерите панела Разширения. Оттам изберете „Зареди разопаковано“, за да добавите ново разширение. Отворете папката 'dist', когато бъдете подканени, и разширението ще бъде заредено. За да го използвате, ще ви е необходим API ключ за CO2 Signal ([получете го тук чрез имейл](https://www.co2signal.com/) - въведете вашия имейл в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), съответстващ на [Картата на електроенергията](https://www.electricitymap.org/map) (например в Бостън използвам 'US-NEISO').
След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра трябва да се промени, за да отрази потреблението на енергия във вашия регион и да ви даде индикатор за подходящите дейности с високо енергийно потребление. Концепцията зад тази система с „точки“ ми беше вдъхновена от [разширението Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния.
След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра трябва да се промени, за да отрази потреблението на енергия във вашия регион и да ви даде индикатор за подходящите дейности с високо енергийно потребление. Концепцията зад тази система с „точки“ ми беше вдъхновена от [разширението Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния.
Използвайки API-то на CO2 Signal от tmrow за проследяване на потреблението на електроенергия, създайте разширение за браузър, което да ви напомня директно в браузъра за потреблението на електроенергия във вашия регион. Използването на това разширение ще ви помогне да вземате информирани решения за вашите дейности въз основа на тази информация.
Използвайки API-то на CO2 Signal от tmrow за проследяване на потреблението на електроенергия, създайте разширение за браузър, което да ви напомня директно в браузъра за потреблението на електроенергия във вашия регион. Използването на това разширение ще ви помогне да вземате информирани решения за вашите дейности въз основа на тази информация.
## Начало
## Начало
@ -31,7 +31,7 @@ npm run build
За да го инсталирате на Edge, използвайте менюто с 'три точки' в горния десен ъгъл на браузъра, за да намерите панела за разширения. Оттам изберете 'Зареждане на разархивирано разширение', за да добавите ново разширение. Отворете папката 'dist', когато бъдете подканени, и разширението ще се зареди. За да го използвате, ще ви е необходим API ключ за CO2 Signal ([вземете го тук по имейл](https://www.co2signal.com/) - въведете вашия имейл в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), съответстващ на [Картата на електроенергията](https://www.electricitymap.org/map) (например за Бостън използвам 'US-NEISO').
За да го инсталирате на Edge, използвайте менюто с 'три точки' в горния десен ъгъл на браузъра, за да намерите панела за разширения. Оттам изберете 'Зареждане на разархивирано разширение', за да добавите ново разширение. Отворете папката 'dist', когато бъдете подканени, и разширението ще се зареди. За да го използвате, ще ви е необходим API ключ за CO2 Signal ([вземете го тук по имейл](https://www.co2signal.com/) - въведете вашия имейл в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), съответстващ на [Картата на електроенергията](https://www.electricitymap.org/map) (например за Бостън използвам 'US-NEISO').
След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширенията на браузъра трябва да се промени, за да отрази потреблението на енергия във вашия регион. Това ще ви даде индикатор за енергоемките дейности, които е подходящо да извършвате. Концепцията зад тази система с 'точки' ми беше вдъхновена от [разширението Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния.
След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширенията на браузъра трябва да се промени, за да отрази потреблението на енергия във вашия регион. Това ще ви даде индикатор за енергоемките дейности, които е подходящо да извършвате. Концепцията зад тази система с 'точки' ми беше вдъхновена от [разширението Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния.
Използване на API на CO2 Signal от tmrow за проследяване на потреблението на електроенергия, създаване на браузър разширение, което да ви напомня колко натоварено е потреблението на електроенергия във вашия регион. Използването на това разширение ще ви помогне да вземате решения за вашите дейности въз основа на тази информация.
Използване на API на CO2 Signal от tmrow за проследяване на потреблението на електроенергия, създаване на браузър разширение, което да ви напомня колко натоварено е потреблението на електроенергия във вашия регион. Използването на това разширение ще ви помогне да вземате решения за вашите дейности въз основа на тази информация.
## Започване
## Започване
@ -31,7 +31,7 @@ npm run build
За да го инсталирате в Edge, използвайте менюто „три точки“ в горния десен ъгъл на браузъра, за да намерите панела за разширения. Оттам изберете „Load unpacked“, за да заредите ново разширение. В подканата отворете папката „dist“ и разширението ще бъде заредено. За да го използвате, ще ви е необходим API ключ за CO2 Signal ([получете го тук чрез имейл](https://www.co2signal.com/) – въведете вашия имейл в полето на страницата) и [код за вашия регион](http://api.electricitymap.org/v3/zones) от [Electricity Map](https://www.electricitymap.org/map) (например, за Бостън използвам „US-NEISO“).
За да го инсталирате в Edge, използвайте менюто „три точки“ в горния десен ъгъл на браузъра, за да намерите панела за разширения. Оттам изберете „Load unpacked“, за да заредите ново разширение. В подканата отворете папката „dist“ и разширението ще бъде заредено. За да го използвате, ще ви е необходим API ключ за CO2 Signal ([получете го тук чрез имейл](https://www.co2signal.com/) – въведете вашия имейл в полето на страницата) и [код за вашия регион](http://api.electricitymap.org/v3/zones) от [Electricity Map](https://www.electricitymap.org/map) (например, за Бостън използвам „US-NEISO“).
След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на браузър разширението трябва да се промени, за да отразява потреблението на енергия във вашия регион и да ви даде индикатор за това кои енергоемки дейности са подходящи за изпълнение. Концепцията за тази система с „точка“ ми беше вдъхновена от [Energy Lollipop Extension](https://energylollipop.com/) за емисиите в Калифорния.
След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на браузър разширението трябва да се промени, за да отразява потреблението на енергия във вашия регион и да ви даде индикатор за това кои енергоемки дейности са подходящи за изпълнение. Концепцията за тази система с „точка“ ми беше вдъхновена от [Energy Lollipop Extension](https://energylollipop.com/) за емисиите в Калифорния.
Ще използваме API-то Signal CO2 на tmrow, за да следим потреблението на електричество и да създадем разширение за браузър, което да ви напомня директно в браузъра колко интензивно е използването на електричество във вашия регион. Използването на това специално разширение ще ви помогне да оцените дейностите си въз основа на тази информация.
Ще използваме API-то Signal CO2 на tmrow, за да следим потреблението на електричество и да създадем разширение за браузър, което да ви напомня директно в браузъра колко интензивно е използването на електричество във вашия регион. Използването на това специално разширение ще ви помогне да оцените дейностите си въз основа на тази информация.
## Начало
## Начало
@ -31,7 +31,7 @@ npm run build
За да го инсталирате в Edge, използвайте менюто с "три точки" в горния десен ъгъл на браузъра, за да намерите панела за разширения. Ако не е активиран, включете Режим за разработчици (в долния ляв ъгъл). Изберете "Зареди разархивирано", за да добавите ново разширение. Отворете папката "dist" в подканата и разширението ще бъде заредено. За да го използвате, ще ви е необходим API ключ за CO2 Signal API (можете да го [получите тук чрез имейл](https://www.co2signal.com/) - въведете своя имейл в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), съответстващ на [електрическата карта](https://www.electricitymap.org/map) (например за Бостън, "US-NEISO").
За да го инсталирате в Edge, използвайте менюто с "три точки" в горния десен ъгъл на браузъра, за да намерите панела за разширения. Ако не е активиран, включете Режим за разработчици (в долния ляв ъгъл). Изберете "Зареди разархивирано", за да добавите ново разширение. Отворете папката "dist" в подканата и разширението ще бъде заредено. За да го използвате, ще ви е необходим API ключ за CO2 Signal API (можете да го [получите тук чрез имейл](https://www.co2signal.com/) - въведете своя имейл в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), съответстващ на [електрическата карта](https://www.electricitymap.org/map) (например за Бостън, "US-NEISO").
След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра трябва да се промени, за да отрази енергийното потребление на региона и да предостави насоки за това кои дейности с висока енергийна консумация са подходящи за изпълнение. Концепцията зад тази система с "точки" е вдъхновена от [разширението Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния.
След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра трябва да се промени, за да отрази енергийното потребление на региона и да предостави насоки за това кои дейности с висока енергийна консумация са подходящи за изпълнение. Концепцията зад тази система с "точки" е вдъхновена от [разширението Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния.
Създайте разширение за браузър, което използва API на CO2 Signal от tmrow, за да следи потреблението на енергия във вашия регион и да го показва като напомняне директно в браузъра. Това разширение може да се използва, за да вземате информирани решения относно вашите дейности въз основа на тази информация.
Създайте разширение за браузър, което използва API на CO2 Signal от tmrow, за да следи потреблението на енергия във вашия регион и да го показва като напомняне директно в браузъра. Това разширение може да се използва, за да вземате информирани решения относно вашите дейности въз основа на тази информация.
## Въведение
## Въведение
@ -31,7 +31,7 @@ npm run build
За да го инсталирате в Edge, намерете панела „Разширения“ от менюто с „три точки“ в горния десен ъгъл на браузъра. Оттам изберете „Load Unpacked“ и заредете новото разширение. Когато бъдете подканени, отворете папката „dist“, за да заредите разширението. За да го използвате, ще ви е необходим API ключ за CO2 Signal ([вземете го тук чрез имейл](https://www.co2signal.com/) - въведете имейла си в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), съвместим с [Electricity Map](https://www.electricitymap.org/map) (например за Бостън използвайте 'US-NEISO').
За да го инсталирате в Edge, намерете панела „Разширения“ от менюто с „три точки“ в горния десен ъгъл на браузъра. Оттам изберете „Load Unpacked“ и заредете новото разширение. Когато бъдете подканени, отворете папката „dist“, за да заредите разширението. За да го използвате, ще ви е необходим API ключ за CO2 Signal ([вземете го тук чрез имейл](https://www.co2signal.com/) - въведете имейла си в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), съвместим с [Electricity Map](https://www.electricitymap.org/map) (например за Бостън използвайте 'US-NEISO').
След като въведете API ключа и региона в интерфейса на разширението, цветна точка, която се показва в лентата на разширенията на браузъра, ще се променя, за да отразява енергийното потребление във вашия регион. Това ще ви помогне да определите кои дейности, изискващи енергия, са подходящи в момента. Концепцията за тази „точкова“ система е вдъхновена от [Energy Lollipop extension](https://energylollipop.com/) за емисиите в Калифорния.
След като въведете API ключа и региона в интерфейса на разширението, цветна точка, която се показва в лентата на разширенията на браузъра, ще се променя, за да отразява енергийното потребление във вашия регион. Това ще ви помогне да определите кои дейности, изискващи енергия, са подходящи в момента. Концепцията за тази „точкова“ система е вдъхновена от [Energy Lollipop extension](https://energylollipop.com/) за емисиите в Калифорния.
Използвайки API на CO2 Signal от tmrow за проследяване на електрическата консумация, създайте разширение за браузър, което да ви предупреждава за нивото на електрическа консумация във вашия регион. Използването на това разширение ще ви помогне да вземате информирани решения относно вашите дейности въз основа на тази информация.
Използвайки API на CO2 Signal от tmrow за проследяване на електрическата консумация, създайте разширение за браузър, което да ви предупреждава за нивото на електрическа консумация във вашия регион. Използването на това разширение ще ви помогне да вземате информирани решения относно вашите дейности въз основа на тази информация.
## Започнете оттук
## Започнете оттук
@ -31,7 +31,7 @@ npm run build
За да го инсталирате в Edge, използвайте менюто с „три точки“ в горния десен ъгъл на браузъра, за да намерите панела Разширения. Оттам изберете „Load Unpacked“, за да заредите новото разширение. Отворете папката 'dist', когато бъдете подканени, и разширението ще бъде заредено. За да го използвате, ще ви е необходим API ключ за CO2 Signal ([вземете го тук чрез имейл](https://www.co2signal.com/) - въведете имейла си в полето на страницата) и [код за вашия регион](http://api.electricitymap.org/v3/zones), който съответства на [Electricity Map](https://www.electricitymap.org/map) (например в Бостън използвам 'US-NEISO').
За да го инсталирате в Edge, използвайте менюто с „три точки“ в горния десен ъгъл на браузъра, за да намерите панела Разширения. Оттам изберете „Load Unpacked“, за да заредите новото разширение. Отворете папката 'dist', когато бъдете подканени, и разширението ще бъде заредено. За да го използвате, ще ви е необходим API ключ за CO2 Signal ([вземете го тук чрез имейл](https://www.co2signal.com/) - въведете имейла си в полето на страницата) и [код за вашия регион](http://api.electricitymap.org/v3/zones), който съответства на [Electricity Map](https://www.electricitymap.org/map) (например в Бостън използвам 'US-NEISO').
След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра ще се променя, за да отразява енергийната консумация във вашия регион и ще ви дава насоки за подходящи дейности. Концепцията зад системата с „точки“ беше вдъхновена от [разширението за браузър Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния.
След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра ще се променя, за да отразява енергийната консумация във вашия регион и ще ви дава насоки за подходящи дейности. Концепцията зад системата с „точки“ беше вдъхновена от [разширението за браузър Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния.
Използвайки API на tmrow за CO2 Signal, можете да следите електрическата консумация и да създадете разширение за браузър, което да ви напомня директно в браузъра колко интензивно е използването на електроенергия във вашия регион. Използването на това разширение ще ви помогне да вземате информирани решения за вашите дейности въз основа на тази информация.
Използвайки API на tmrow за CO2 Signal, можете да следите електрическата консумация и да създадете разширение за браузър, което да ви напомня директно в браузъра колко интензивно е използването на електроенергия във вашия регион. Използването на това разширение ще ви помогне да вземате информирани решения за вашите дейности въз основа на тази информация.
## Първи стъпки
## Първи стъпки
@ -31,7 +31,7 @@ npm run build
За да го инсталирате в Edge, използвайте менюто с „три точки“ в горния десен ъгъл на браузъра, за да намерите панела с разширения. Оттам изберете „Load Unpacked“, за да заредите ново разширение. Отворете папката „dist“ при подканата и разширението ще се зареди. За да го използвате, ще ви е необходим API ключ за CO2 Signal ([вземете го тук чрез имейл](https://www.co2signal.com/) - въведете вашия имейл в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), съответстващ на [Electricity Map](https://www.electricitymap.org/map) (например, в Бостън използвам „US-NEISO“).
За да го инсталирате в Edge, използвайте менюто с „три точки“ в горния десен ъгъл на браузъра, за да намерите панела с разширения. Оттам изберете „Load Unpacked“, за да заредите ново разширение. Отворете папката „dist“ при подканата и разширението ще се зареди. За да го използвате, ще ви е необходим API ключ за CO2 Signal ([вземете го тук чрез имейл](https://www.co2signal.com/) - въведете вашия имейл в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), съответстващ на [Electricity Map](https://www.electricitymap.org/map) (например, в Бостън използвам „US-NEISO“).
След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра трябва да се промени, за да отрази енергийната консумация във вашия регион. Тя ще ви даде насоки за това кои дейности, изискващи повече енергия, са подходящи за изпълнение. Концепцията зад тази система с „точка“ ми беше вдъхновена от [Energy Lollipop разширението](https://energylollipop.com/) за емисиите в Калифорния.
След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра трябва да се промени, за да отрази енергийната консумация във вашия регион. Тя ще ви даде насоки за това кои дейности, изискващи повече енергия, са подходящи за изпълнение. Концепцията зад тази система с „точка“ ми беше вдъхновена от [Energy Lollipop разширението](https://energylollipop.com/) за емисиите в Калифорния.
> Изображение от [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
> Изображение от [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
За да рисувате върху canvas елемента, ще следвате същия тристепенен процес, който образува основата на цялата canvas графика. След като го направите няколко пъти, това ще стане втора природа:
За да рисувате върху canvas елемента, ще следвате същия тристепенен процес, който образува основата на цялата canvas графика. След като го направите няколко пъти, това ще стане втора природа:
- **Система за точкуване**: Всеки унищожен вражески кораб дава 100 точки (кръглите числа са по-лесни за умствена аритметика от играчите). Резултатът се показва в долния ляв ъгъл.
- **Система за точкуване**: Всеки унищожен вражески кораб дава 100 точки (кръглите числа са по-лесни за умствена аритметика от играчите). Резултатът се показва в долния ляв ъгъл.
- **Брояч животи**: Вашият герой започва с три живота - стандарт, установен от ранните аркадни игри за балансиране на предизвикателството с играбилността. Всяко сблъскване с враг отнема един живот. Ще показваме оставащите животи в долния десен ъгъл с икони на кораби .
- **Брояч животи**: Вашият герой започва с три живота - стандарт, установен от ранните аркадни игри за балансиране на предизвикателството с играбилността. Всяко сблъскване с враг отнема един живот. Ще показваме оставащите животи в долния десен ъгъл с икони на кораби .
Използването на `history.pushState` създава нови записи в историята на браузъра. Можете да проверите това, като задържите *бутона за назад* на браузъра, той трябва да покаже нещо такова:
Използването на `history.pushState` създава нови записи в историята на браузъра. Можете да проверите това, като задържите *бутона за назад* на браузъра, той трябва да покаже нещо такова:
Ако опитате да кликнете няколко пъти върху бутона назад, ще видите, че текущият URL се променя и историята се обновява, но се показва все същият шаблон.
Ако опитате да кликнете няколко пъти върху бутона назад, ще видите, че текущият URL се променя и историята се обновява, но се показва все същият шаблон.
2. Наблюдавайте промените в адресната лента на браузъра
2. Наблюдавайте промените в адресната лента на браузъра
3. Забележете как страницата се презарежда и данните се появяват в URL адреса
3. Забележете как страницата се презарежда и данните се появяват в URL адреса
### Сравнение на HTTP методите
### Сравнение на HTTP методите
@ -346,7 +346,7 @@ graph TD
2. **Натиснете** бутона „Create Account“
2. **Натиснете** бутона „Create Account“
3. **Наблюдавайте** отговора от сървъра в браузъра си
3. **Наблюдавайте** отговора от сървъра в браузъра си
**Какво трябва да виждате:**
**Какво трябва да виждате:**
- **Браузърът пренасочва** към URL адреса на API endpoint-а
- **Браузърът пренасочва** към URL адреса на API endpoint-а
@ -609,7 +609,7 @@ async function register() {
3. **Натиснете** "Create Account"
3. **Натиснете** "Create Account"
4. **Проследете** съобщенията в конзолата и обратната връзка към потребителя
4. **Проследете** съобщенията в конзолата и обратната връзка към потребителя
**Какво трябва да видите:**
**Какво трябва да видите:**
- **Появява се състояние на зареждане** на бутонът за изпращане
- **Появява се състояние на зареждане** на бутонът за изпращане
@ -783,7 +783,7 @@ input:focus:invalid {
3. **Опитайте** специални символи в полето за потребителско име
3. **Опитайте** специални символи в полето за потребителско име
4. **Въведете** отрицателна стойност в баланса
4. **Въведете** отрицателна стойност в баланса
**Какво ще забележите:**
**Какво ще забележите:**
- **Браузърът показва** вградени съобщения за валидация
- **Браузърът показва** вградени съобщения за валидация
@ -943,7 +943,7 @@ timeline
Ето един пример как може да изглежда финалната страница за вход след малко стилизиране:
Ето един пример как може да изглежда финалната страница за вход след малко стилизиране:
Вместо да се лутаме безцелно, ще създадем **централизирана система за управление на състоянието**. Представете си я като един наистина организиран човек, който отговаря за цялата важна информация:
Вместо да се лутаме безцелно, ще създадем **централизирана система за управление на състоянието**. Представете си я като един наистина организиран човек, който отговаря за цялата важна информация:
```mermaid
```mermaid
flowchart TD
flowchart TD
@ -798,7 +798,7 @@ timeline
Ето примерен резултат след завършване на задачата:
Ето примерен резултат след завършване на задачата:
След завършване на това задание, вашето банково приложение трябва да има напълно функционална функция "Добавяне на транзакция", която изглежда и работи професионално:
След завършване на това задание, вашето банково приложение трябва да има напълно функционална функция "Добавяне на транзакция", която изглежда и работи професионално:
В този проект ще научите как да създадете измислена банка. Тези уроци включват инструкции за това как да изградите уеб приложение, да създадете маршрути, да изградите форми, да управлявате състоянието и да извличате данни от API, от който можете да получите данните на банката.
В този проект ще научите как да създадете измислена банка. Тези уроци включват инструкции за това как да изградите уеб приложение, да създадете маршрути, да изградите форми, да управлявате състоянието и да извличате данни от API, от който можете да получите данните на банката.
@ -182,7 +182,7 @@ VSCode.dev предоставя тези възможности в браузъ
След зареждането ще видите чисто и приветливо работно пространство, предназначено да ви държи фокусирани върху най-важното – вашия код!
След зареждането ще видите чисто и приветливо работно пространство, предназначено да ви държи фокусирани върху най-важното – вашия код!
**Ето обиколката на околността:**
**Ето обиколката на околността:**
- **Лента с активности** (ляво): Основната навигация с Explorer 📁, Търсене 🔍, Source Control 🌿, Разширения 🧩 и Настройки ⚙️
- **Лента с активности** (ляво): Основната навигация с Explorer 📁, Търсене 🔍, Source Control 🌿, Разширения 🧩 и Настройки ⚙️
@ -229,7 +229,7 @@ flowchart TB
1. Отидете на [vscode.dev](https://vscode.dev), ако още не сте там
1. Отидете на [vscode.dev](https://vscode.dev), ако още не сте там
2. Потърсете бутона "Open Remote Repository" на началния екран и натиснете
2. Потърсете бутона "Open Remote Repository" на началния екран и натиснете
3. Поставете произволен URL на GitHub хранилище (опитайте този: `https://github.com/microsoft/Web-Dev-For-Beginners`)
3. Поставете произволен URL на GitHub хранилище (опитайте този: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. Натиснете Enter и гледайте магията да се случи!
4. Натиснете Enter и гледайте магията да се случи!
@ -238,7 +238,7 @@ flowchart TB
Искате да се почувствате като вълшебник в кодирането? Опитайте клавишната комбинация: Ctrl+Shift+P (или Cmd+Shift+P на Mac) да отворите Command Palette:
Искате да се почувствате като вълшебник в кодирането? Опитайте клавишната комбинация: Ctrl+Shift+P (или Cmd+Shift+P на Mac) да отворите Command Palette:
4. **Напишете** съобщение за комит: "Добавяне на начална HTML структура"
4. **Напишете** съобщение за комит: "Добавяне на начална HTML структура"
5. **Кликнете** "Commit new file", за да запазите промените
5. **Кликнете** "Commit new file", за да запазите промените
**Ето какво постигате с тази начална настройка:**
**Ето какво постигате с тази начална настройка:**
- **Създавате** правилна HTML5 структура на документа със семантични елементи
- **Създавате** правилна HTML5 структура на документа със семантични елементи
@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA:
✅ **Индикатор за успех**: Трябва да видите файловете на проекта си в страничната лента Explorer и `index.html`, достъпен за редактиране в основната област на редактора.
✅ **Индикатор за успех**: Трябва да видите файловете на проекта си в страничната лента Explorer и `index.html`, достъпен за редактиране в основната област на редактора.
**Какво ще видите в интерфейса:**
**Какво ще видите в интерфейса:**
- **Странична лента Explorer**: **Показва** файловете и структурата на папките на вашето хранилище
- **Странична лента Explorer**: **Показва** файловете и структурата на папките на вашето хранилище
@ -448,7 +448,7 @@ li:before {
**Незабавни резултати след инсталацията:**
**Незабавни резултати след инсталацията:**
След като CodeSwing е инсталиран, ще видите предварителен преглед на живо на вашия уебсайт за автобиография, който се появява в редактора. Това ви позволява да видите точно как изглежда вашият сайт, докато правите промени.
След като CodeSwing е инсталиран, ще видите предварителен преглед на живо на вашия уебсайт за автобиография, който се появява в редактора. Това ви позволява да видите точно как изглежда вашият сайт, докато правите промени.
**Разбиране на подобрения интерфейс:**
**Разбиране на подобрения интерфейс:**
- **Разделен изглед**: **Показва** вашия код от едната страна и предварителния преглед от другата
- **Разделен изглед**: **Показва** вашия код от едната страна и предварителния преглед от другата
## 🗺️ Вашето пътешествие в развитието на AI приложения
## 🗺️ Вашето пътешествие в развитието на AI приложения
@ -189,7 +189,7 @@ mindmap
```
```
**Основен принцип**: Разработката на AI приложения комбинира традиционни умения за уеб разработка с интеграция на AI услуги, създавайки интелигентни приложения, които се усещат естествени и отзивчиви за потребителите.
**Основен принцип**: Разработката на AI приложения комбинира традиционни умения за уеб разработка с интеграция на AI услуги, създавайки интелигентни приложения, които се усещат естествени и отзивчиви за потребителите.
**Ето какво прави playground толкова полезен:**
**Ето какво прави playground толкова полезен:**
- **Пробвайте** различни AI модели като GPT-4o-mini, Claude и други (всички безплатни!)
- **Пробвайте** различни AI модели като GPT-4o-mini, Claude и други (всички безплатни!)
@ -199,7 +199,7 @@ mindmap
След като се поиграете малко, просто кликнете на таб „Code“ и изберете езика си за програмиране, за да получите кода, който ще ви трябва.
След като се поиграете малко, просто кликнете на таб „Code“ и изберете езика си за програмиране, за да получите кода, който ще ви трябва.
## Настройване на Python бекенд интеграция
## Настройване на Python бекенд интеграция
@ -2353,14 +2353,14 @@ mindmap
- **Отидете** до [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Отидете** до [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Кликнете** "Use this template" в горния десен ъгъл (уверете се, че сте влезли в GitHub)
- **Кликнете** "Use this template" в горния десен ъгъл (уверете се, че сте влезли в GitHub)
**Стъпка 2: Стартиране на Codespaces**
**Стъпка 2: Стартиране на Codespaces**
- **Отворете** новосъздадения си репозиториум
- **Отворете** новосъздадения си репозиториум
- **Кликнете** зеления бутон "Code" и изберете "Codespaces"
- **Кликнете** зеления бутон "Code" и изберете "Codespaces"
- **Изберете** "Create codespace on main" за стартиране на развойната си среда
- **Изберете** "Create codespace on main" за стартиране на развойната си среда
**Стъпка 3: Конфигуриране на средата**
**Стъпка 3: Конфигуриране на средата**
След като вашият Codespace се зареди, ще имате достъп до:
След като вашият Codespace се зареди, ще имате достъп до:
আজ, আমরা সেই অসাধারণ টুলগুলো অন্বেষণ করব যা আধুনিক ওয়েব ডেভেলপমেন্টকে শুধু সম্ভবই করে না, বরং একেবারে নেশাসক্ত করে তোলে। আমি বলছি ঠিক সেই এডিটর, ব্রাউজার এবং ওয়ার্কফ্লো যা Netflix, Spotify এবং তোমার প্রিয় ইন্ডি অ্যাপ স্টুডিওর ডেভেলপাররা প্রতিদিন ব্যবহার করে। এবং যা তোমাকে আনন্দে নাচতে বাধ্য করবে তা হলো: এই পেশাদার-গ্রেড, ইন্ডাস্ট্রি-স্ট্যান্ডার্ড টুলগুলোর বেশিরভাগই সম্পূর্ণ বিনামূল্যে!
আজ, আমরা সেই অসাধারণ টুলগুলো অন্বেষণ করব যা আধুনিক ওয়েব ডেভেলপমেন্টকে শুধু সম্ভবই করে না, বরং একেবারে নেশাসক্ত করে তোলে। আমি বলছি ঠিক সেই এডিটর, ব্রাউজার এবং ওয়ার্কফ্লো যা Netflix, Spotify এবং তোমার প্রিয় ইন্ডি অ্যাপ স্টুডিওর ডেভেলপাররা প্রতিদিন ব্যবহার করে। এবং যা তোমাকে আনন্দে নাচতে বাধ্য করবে তা হলো: এই পেশাদার-গ্রেড, ইন্ডাস্ট্রি-স্ট্যান্ডার্ড টুলগুলোর বেশিরভাগই সম্পূর্ণ বিনামূল্যে!
আমরা একসাথে এই যাত্রা শুরু করব, এক ধাপে এক ধাপে। কোনো তাড়াহুড়ো নেই, কোনো চাপ নেই – শুধু তুমি, আমি, এবং কিছু দারুণ টুল যা তোমার নতুন সেরা বন্ধু হতে চলেছে!
আমরা একসাথে এই যাত্রা শুরু করব, এক ধাপে এক ধাপে। কোনো তাড়াহুড়ো নেই, কোনো চাপ নেই – শুধু তুমি, আমি, এবং কিছু দারুণ টুল যা তোমার নতুন সেরা বন্ধু হতে চলেছে!
> স্কেচনোট করেছেন [Tomomi Imura](https://twitter.com/girlie_mac)
> স্কেচনোট করেছেন [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
```mermaid
@ -588,7 +588,7 @@ flowchart TD
✅ 'শিক্ষানবিস-বান্ধব' রিপো খুঁজে পাওয়ার একটি ভালো উপায় হলো [ট্যাগ 'good-first-issue' দ্বারা অনুসন্ধান করা](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)।
✅ 'শিক্ষানবিস-বান্ধব' রিপো খুঁজে পাওয়ার একটি ভালো উপায় হলো [ট্যাগ 'good-first-issue' দ্বারা অনুসন্ধান করা](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)।
> স্কেচনোট করেছেন [Tomomi Imura](https://twitter.com/girlie_mac)
> স্কেচনোট করেছেন [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
```mermaid
@ -756,12 +756,12 @@ pie title "Common ARIA Usage Patterns"
**তথ্যপূর্ণ ছবি** - গুরুত্বপূর্ণ তথ্য প্রদান করে:
**তথ্যপূর্ণ ছবি** - গুরুত্বপূর্ণ তথ্য প্রদান করে:
```html
```html
<imgsrc="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.bn.png" alt="Sales increased 25% from Q1 to Q2 2024">
<imgsrc="../../../../translated_images/bn/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
```
**ডেকোরেটিভ ছবি** - শুধুমাত্র ভিজ্যুয়াল, কোনো তথ্যমূলক মূল্য নেই:
**ডেকোরেটিভ ছবি** - শুধুমাত্র ভিজ্যুয়াল, কোনো তথ্যমূলক মূল্য নেই:
> স্কেচনোট [Tomomi Imura](https://twitter.com/girlie_mac) দ্বারা
> স্কেচনোট [Tomomi Imura](https://twitter.com/girlie_mac) দ্বারা
HTML, বা HyperText Markup Language, প্রতিটি ওয়েবসাইটের ভিত্তি যা আপনি কখনও পরিদর্শন করেছেন। HTML কে ওয়েব পৃষ্ঠার কাঠামো হিসেবে ভাবুন – এটি নির্ধারণ করে কোথায় বিষয়বস্তু যাবে, কীভাবে এটি সংগঠিত হবে এবং প্রতিটি অংশ কী প্রতিনিধিত্ব করে। CSS পরে আপনার HTML-কে রঙ এবং লেআউট দিয়ে সাজাবে, এবং JavaScript এটিকে ইন্টারঅ্যাক্টিভিটি দিয়ে প্রাণবন্ত করবে, HTML সেই মৌলিক কাঠামো প্রদান করে যা সবকিছু সম্ভব করে তোলে।
HTML, বা HyperText Markup Language, প্রতিটি ওয়েবসাইটের ভিত্তি যা আপনি কখনও পরিদর্শন করেছেন। HTML কে ওয়েব পৃষ্ঠার কাঠামো হিসেবে ভাবুন – এটি নির্ধারণ করে কোথায় বিষয়বস্তু যাবে, কীভাবে এটি সংগঠিত হবে এবং প্রতিটি অংশ কী প্রতিনিধিত্ব করে। CSS পরে আপনার HTML-কে রঙ এবং লেআউট দিয়ে সাজাবে, এবং JavaScript এটিকে ইন্টারঅ্যাক্টিভিটি দিয়ে প্রাণবন্ত করবে, HTML সেই মৌলিক কাঠামো প্রদান করে যা সবকিছু সম্ভব করে তোলে।
আপনার HTML টেরারিয়ামটি কতটা সাধারণ দেখাচ্ছিল তা মনে আছে? CSS এর মাধ্যমে আমরা সেই সাধারণ কাঠামোকে চমৎকার কিছুতে রূপান্তর করি।
আপনার HTML টেরারিয়ামটি কতটা সাধারণ দেখাচ্ছিল তা মনে আছে? CSS এর মাধ্যমে আমরা সেই সাধারণ কাঠামোকে চমৎকার কিছুতে রূপান্তর করি।
@ -205,7 +205,7 @@ body {
আপনার ব্রাউজারের ডেভেলপার টুলস (F12) খুলুন, Elements ট্যাবে যান এবং আপনার `<h1>` উপাদানটি পরীক্ষা করুন। আপনি দেখতে পাবেন এটি বডি থেকে ফন্ট ফ্যামিলি উত্তরাধিকার সূত্রে পেয়েছে:
আপনার ব্রাউজারের ডেভেলপার টুলস (F12) খুলুন, Elements ট্যাবে যান এবং আপনার `<h1>` উপাদানটি পরীক্ষা করুন। আপনি দেখতে পাবেন এটি বডি থেকে ফন্ট ফ্যামিলি উত্তরাধিকার সূত্রে পেয়েছে:
✅ **পরীক্ষার সময়**: `<body>`-তে `color`, `line-height`, বা `text-align` এর মতো অন্যান্য উত্তরাধিকারযোগ্য বৈশিষ্ট্য সেট করার চেষ্টা করুন। আপনার হেডিং এবং অন্যান্য উপাদানগুলোর কী হয়?
✅ **পরীক্ষার সময়**: `<body>`-তে `color`, `line-height`, বা `text-align` এর মতো অন্যান্য উত্তরাধিকারযোগ্য বৈশিষ্ট্য সেট করার চেষ্টা করুন। আপনার হেডিং এবং অন্যান্য উপাদানগুলোর কী হয়?
@ -409,7 +409,7 @@ Agent মোড ব্যবহার করে নিম্নলিখিত
আপনি সূক্ষ্ম হাইলাইট তৈরি করবেন যা কাচের পৃষ্ঠে আলো প্রতিফলিত করার অনুকরণ করে। এই পদ্ধতি রেনেসাঁ চিত্রশিল্পী যেমন Jan van Eyck কিভাবে আলো এবং প্রতিফলন ব্যবহার করে আঁকা কাচকে থ্রিডি দেখাতেন তার মতো। আপনি যা অর্জন করতে চান তা হলো:
আপনি সূক্ষ্ম হাইলাইট তৈরি করবেন যা কাচের পৃষ্ঠে আলো প্রতিফলিত করার অনুকরণ করে। এই পদ্ধতি রেনেসাঁ চিত্রশিল্পী যেমন Jan van Eyck কিভাবে আলো এবং প্রতিফলন ব্যবহার করে আঁকা কাচকে থ্রিডি দেখাতেন তার মতো। আপনি যা অর্জন করতে চান তা হলো:
> স্কেচনোট [Tomomi Imura](https://twitter.com/girlie_mac) দ্বারা
> স্কেচনোট [Tomomi Imura](https://twitter.com/girlie_mac) দ্বারা
ওয়েব ডেভেলপমেন্টের সবচেয়ে আকর্ষণীয় দিকগুলোর মধ্যে একটিতে আপনাকে স্বাগতম - জিনিসগুলোকে ইন্টারঅ্যাকটিভ করা! ডকুমেন্ট অবজেক্ট মডেল (DOM) আপনার HTML এবং জাভাস্ক্রিপ্টের মধ্যে একটি সেতুর মতো, এবং আজ আমরা এটি ব্যবহার করে আপনার টেরারিয়ামকে জীবন্ত করে তুলব। যখন টিম বার্নার্স-লি প্রথম ওয়েব ব্রাউজার তৈরি করেছিলেন, তিনি এমন একটি ওয়েবের কল্পনা করেছিলেন যেখানে ডকুমেন্টগুলো গতিশীল এবং ইন্টারঅ্যাকটিভ হতে পারে - DOM সেই স্বপ্নকে বাস্তবায়িত করে।
ওয়েব ডেভেলপমেন্টের সবচেয়ে আকর্ষণীয় দিকগুলোর মধ্যে একটিতে আপনাকে স্বাগতম - জিনিসগুলোকে ইন্টারঅ্যাকটিভ করা! ডকুমেন্ট অবজেক্ট মডেল (DOM) আপনার HTML এবং জাভাস্ক্রিপ্টের মধ্যে একটি সেতুর মতো, এবং আজ আমরা এটি ব্যবহার করে আপনার টেরারিয়ামকে জীবন্ত করে তুলব। যখন টিম বার্নার্স-লি প্রথম ওয়েব ব্রাউজার তৈরি করেছিলেন, তিনি এমন একটি ওয়েবের কল্পনা করেছিলেন যেখানে ডকুমেন্টগুলো গতিশীল এবং ইন্টারঅ্যাকটিভ হতে পারে - DOM সেই স্বপ্নকে বাস্তবায়িত করে।
> DOM এবং HTML মার্কআপের একটি উপস্থাপনা যা এটি রেফারেন্স করে। [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) থেকে
> DOM এবং HTML মার্কআপের একটি উপস্থাপনা যা এটি রেফারেন্স করে। [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) থেকে
@ -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) থেকে
> DOM এবং HTML মার্কআপের একটি উপস্থাপনা যা এটি রেফারেন্স করে। [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) থেকে
@ -447,7 +447,7 @@ function stopElementDrag() {
- **ক্রস-ডিভাইস সাপোর্ট**: ডেস্কটপ এবং মোবাইলে কাজ করে
- **ক্রস-ডিভাইস সাপোর্ট**: ডেস্কটপ এবং মোবাইলে কাজ করে
- **পারফরম্যান্স সচেতন**: কোনো মেমোরি লিক বা অপ্রয়োজনীয় গণনা নেই
- **পারফরম্যান্স সচেতন**: কোনো মেমোরি লিক বা অপ্রয়োজনীয় গণনা নেই
একটি ছোট ড্র্যাগ এবং ড্রপ কোড-মেডিটেশন। সামান্য HTML, JS এবং CSS ব্যবহার করে আপনি একটি ওয়েব ইন্টারফেস তৈরি করতে পারেন, সেটিকে স্টাইল করতে পারেন এবং ইন্টারঅ্যাকশন যোগ করতে পারেন।
একটি ছোট ড্র্যাগ এবং ড্রপ কোড-মেডিটেশন। সামান্য HTML, JS এবং CSS ব্যবহার করে আপনি একটি ওয়েব ইন্টারফেস তৈরি করতে পারেন, সেটিকে স্টাইল করতে পারেন এবং ইন্টারঅ্যাকশন যোগ করতে পারেন।
> কিছু প্রথম দিকের ব্রাউজার, [ক্যারেন ম্যাকগ্রেন](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) এর মাধ্যমে
> কিছু প্রথম দিকের ব্রাউজার, [ক্যারেন ম্যাকগ্রেন](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) এর মাধ্যমে
### ব্রাউজার কীভাবে ওয়েব কন্টেন্ট প্রক্রিয়াকরণ করে
### ব্রাউজার কীভাবে ওয়েব কন্টেন্ট প্রক্রিয়াকরণ করে
@ -198,7 +198,7 @@ quadrantChart
এক্সটেনশন ইনস্টলেশন প্রক্রিয়া বোঝা আপনাকে ব্যবহারকারীদের অভিজ্ঞতা সম্পর্কে পূর্বাভাস দিতে সাহায্য করবে যখন তারা আপনার এক্সটেনশন ইনস্টল করবে। ইনস্টলেশন প্রক্রিয়া আধুনিক ব্রাউজারগুলোতে মানসম্মত, যদিও ইন্টারফেস ডিজাইনে কিছু পার্থক্য রয়েছে।
এক্সটেনশন ইনস্টলেশন প্রক্রিয়া বোঝা আপনাকে ব্যবহারকারীদের অভিজ্ঞতা সম্পর্কে পূর্বাভাস দিতে সাহায্য করবে যখন তারা আপনার এক্সটেনশন ইনস্টল করবে। ইনস্টলেশন প্রক্রিয়া আধুনিক ব্রাউজারগুলোতে মানসম্মত, যদিও ইন্টারফেস ডিজাইনে কিছু পার্থক্য রয়েছে।
> **গুরুত্বপূর্ণ**: আপনার নিজের এক্সটেনশন পরীক্ষা করার সময় ডেভেলপার মোড চালু করুন এবং অন্যান্য স্টোর থেকে এক্সটেনশন অনুমোদন করুন।
> **গুরুত্বপূর্ণ**: আপনার নিজের এক্সটেনশন পরীক্ষা করার সময় ডেভেলপার মোড চালু করুন এবং অন্যান্য স্টোর থেকে এক্সটেনশন অনুমোদন করুন।
localizeflow[bot]
8 months ago
