diff --git a/translations/bn/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/bn/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 7de32b9e1..201dc5220 100644 --- a/translations/bn/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/bn/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: আজ, আমরা সেই অসাধারণ টুলগুলো অন্বেষণ করব যা আধুনিক ওয়েব ডেভেলপমেন্টকে শুধু সম্ভবই করে না, বরং একেবারে নেশাসক্ত করে তোলে। আমি বলছি ঠিক সেই এডিটর, ব্রাউজার এবং ওয়ার্কফ্লো যা Netflix, Spotify এবং তোমার প্রিয় ইন্ডি অ্যাপ স্টুডিওর ডেভেলপাররা প্রতিদিন ব্যবহার করে। এবং যা তোমাকে আনন্দে নাচতে বাধ্য করবে তা হলো: এই পেশাদার-গ্রেড, ইন্ডাস্ট্রি-স্ট্যান্ডার্ড টুলগুলোর বেশিরভাগই সম্পূর্ণ বিনামূল্যে! -![প্রোগ্রামিং পরিচিতি](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.bn.png) +![প্রোগ্রামিং পরিচিতি](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.bn.png) > স্কেচনোট: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/bn/1-getting-started-lessons/2-github-basics/README.md b/translations/bn/1-getting-started-lessons/2-github-basics/README.md index fbad0acbf..1ed239438 100644 --- a/translations/bn/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/bn/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: আমরা একসাথে এই যাত্রা শুরু করব, এক ধাপে এক ধাপে। কোনো তাড়াহুড়ো নেই, কোনো চাপ নেই – শুধু তুমি, আমি, এবং কিছু দারুণ টুল যা তোমার নতুন সেরা বন্ধু হতে চলেছে! -![গিটহাব পরিচিতি](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.bn.png) +![গিটহাব পরিচিতি](../../../../translated_images/webdev101-github.8846d7971abef6f9.bn.png) > স্কেচনোট করেছেন [Tomomi Imura](https://twitter.com/girlie_mac) ```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/)। -![রিপো লোকালি কপি করুন](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.bn.png) +![রিপো লোকালি কপি করুন](../../../../translated_images/clone_repo.5085c48d666ead57.bn.png) কোড কপি করার বিভিন্ন উপায় রয়েছে। একটি উপায় হলো রিপোজিটরির বিষয়বস্তু "ক্লোন" করা, HTTPS, SSH, অথবা GitHub CLI (কমান্ড লাইন ইন্টারফেস) ব্যবহার করে। diff --git a/translations/bn/1-getting-started-lessons/3-accessibility/README.md b/translations/bn/1-getting-started-lessons/3-accessibility/README.md index fa04292b7..afd171283 100644 --- a/translations/bn/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/bn/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # অ্যাক্সেসযোগ্য ওয়েবপেজ তৈরি করা -![অ্যাক্সেসিবিলিটি সম্পর্কে সবকিছু](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.bn.png) +![অ্যাক্সেসিবিলিটি সম্পর্কে সবকিছু](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.bn.png) > স্কেচনোট করেছেন [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/bn/2-js-basics/1-data-types/README.md b/translations/bn/2-js-basics/1-data-types/README.md index ef55a0253..c402647ac 100644 --- a/translations/bn/2-js-basics/1-data-types/README.md +++ b/translations/bn/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # জাভাস্ক্রিপ্টের বুনিয়াদি: ডেটা টাইপ -![জাভাস্ক্রিপ্টের বুনিয়াদি - ডেটা টাইপ](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.bn.png) +![জাভাস্ক্রিপ্টের বুনিয়াদি - ডেটা টাইপ](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.bn.png) > স্কেচনোট করেছেন [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/bn/2-js-basics/2-functions-methods/README.md b/translations/bn/2-js-basics/2-functions-methods/README.md index ae8b337a2..53e4c8a80 100644 --- a/translations/bn/2-js-basics/2-functions-methods/README.md +++ b/translations/bn/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # জাভাস্ক্রিপ্টের বেসিক: মেথড এবং ফাংশন -![জাভাস্ক্রিপ্ট বেসিক - ফাংশন](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.bn.png) +![জাভাস্ক্রিপ্ট বেসিক - ফাংশন](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.bn.png) > স্কেচনোট করেছেন [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/bn/2-js-basics/3-making-decisions/README.md b/translations/bn/2-js-basics/3-making-decisions/README.md index eefc596d5..cb838bcc1 100644 --- a/translations/bn/2-js-basics/3-making-decisions/README.md +++ b/translations/bn/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # জাভাস্ক্রিপ্টের মৌলিক বিষয়: সিদ্ধান্ত গ্রহণ -![জাভাস্ক্রিপ্টের মৌলিক বিষয় - সিদ্ধান্ত গ্রহণ](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.bn.png) +![জাভাস্ক্রিপ্টের মৌলিক বিষয় - সিদ্ধান্ত গ্রহণ](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.bn.png) > স্কেচনোট করেছেন [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/bn/2-js-basics/4-arrays-loops/README.md b/translations/bn/2-js-basics/4-arrays-loops/README.md index 323ad38dc..f8254d1cf 100644 --- a/translations/bn/2-js-basics/4-arrays-loops/README.md +++ b/translations/bn/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # জাভাস্ক্রিপ্টের বেসিক: অ্যারে এবং লুপ -![জাভাস্ক্রিপ্ট বেসিক - অ্যারে](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.bn.png) +![জাভাস্ক্রিপ্ট বেসিক - অ্যারে](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.bn.png) > স্কেচনোট করেছেন [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/bn/3-terrarium/1-intro-to-html/README.md b/translations/bn/3-terrarium/1-intro-to-html/README.md index 9c5698c28..d422e7dbd 100644 --- a/translations/bn/3-terrarium/1-intro-to-html/README.md +++ b/translations/bn/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![HTML পরিচিতি](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.bn.png) +![HTML পরিচিতি](../../../../translated_images/webdev101-html.4389c2067af68e98.bn.png) > স্কেচনোট [Tomomi Imura](https://twitter.com/girlie_mac) দ্বারা HTML, বা HyperText Markup Language, প্রতিটি ওয়েবসাইটের ভিত্তি যা আপনি কখনও পরিদর্শন করেছেন। HTML কে ওয়েব পৃষ্ঠার কাঠামো হিসেবে ভাবুন – এটি নির্ধারণ করে কোথায় বিষয়বস্তু যাবে, কীভাবে এটি সংগঠিত হবে এবং প্রতিটি অংশ কী প্রতিনিধিত্ব করে। CSS পরে আপনার HTML-কে রঙ এবং লেআউট দিয়ে সাজাবে, এবং JavaScript এটিকে ইন্টারঅ্যাক্টিভিটি দিয়ে প্রাণবন্ত করবে, HTML সেই মৌলিক কাঠামো প্রদান করে যা সবকিছু সম্ভব করে তোলে। @@ -88,7 +88,7 @@ HTML কোডে ডুব দেওয়ার আগে, আপনার ট 4. Explorer প্যানেলে, "New File" আইকনে ক্লিক করুন 5. আপনার ফাইলের নাম দিন `index.html` -![VS Code Explorer নতুন ফাইল তৈরি দেখাচ্ছে](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.bn.png) +![VS Code Explorer নতুন ফাইল তৈরি দেখাচ্ছে](../../../../translated_images/vs-code-index.e2986cf919471eb9.bn.png) **অপশন ২: টার্মিনাল কমান্ড ব্যবহার করে** ```bash diff --git a/translations/bn/3-terrarium/2-intro-to-css/README.md b/translations/bn/3-terrarium/2-intro-to-css/README.md index 46019784b..96f44a509 100644 --- a/translations/bn/3-terrarium/2-intro-to-css/README.md +++ b/translations/bn/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![CSS পরিচিতি](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.bn.png) +![CSS পরিচিতি](../../../../translated_images/webdev101-css.3f7af5991bf53a20.bn.png) > স্কেচনোট: [Tomomi Imura](https://twitter.com/girlie_mac) আপনার HTML টেরারিয়ামটি কতটা সাধারণ দেখাচ্ছিল তা মনে আছে? CSS এর মাধ্যমে আমরা সেই সাধারণ কাঠামোকে চমৎকার কিছুতে রূপান্তর করি। @@ -205,7 +205,7 @@ body { আপনার ব্রাউজারের ডেভেলপার টুলস (F12) খুলুন, Elements ট্যাবে যান এবং আপনার `

` উপাদানটি পরীক্ষা করুন। আপনি দেখতে পাবেন এটি বডি থেকে ফন্ট ফ্যামিলি উত্তরাধিকার সূত্রে পেয়েছে: -![উত্তরাধিকার সূত্রে পাওয়া ফন্ট](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.bn.png) +![উত্তরাধিকার সূত্রে পাওয়া ফন্ট](../../../../translated_images/1.cc07a5cbe114ad1d.bn.png) ✅ **পরীক্ষার সময়**: ``-তে `color`, `line-height`, বা `text-align` এর মতো অন্যান্য উত্তরাধিকারযোগ্য বৈশিষ্ট্য সেট করার চেষ্টা করুন। আপনার হেডিং এবং অন্যান্য উপাদানগুলোর কী হয়? @@ -409,7 +409,7 @@ Agent মোড ব্যবহার করে নিম্নলিখিত আপনি সূক্ষ্ম হাইলাইট তৈরি করবেন যা কাচের পৃষ্ঠে আলো প্রতিফলিত করার অনুকরণ করে। এই পদ্ধতি রেনেসাঁ চিত্রশিল্পী যেমন Jan van Eyck কিভাবে আলো এবং প্রতিফলন ব্যবহার করে আঁকা কাচকে থ্রিডি দেখাতেন তার মতো। আপনি যা অর্জন করতে চান তা হলো: -![শেষ টেরারিয়াম](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.bn.png) +![শেষ টেরারিয়াম](../../../../translated_images/terrarium-final.2f07047ffc597d0a.bn.png) **আপনার চ্যালেঞ্জ:** - **তৈরি করুন** সূক্ষ্ম সাদা বা হালকা রঙের ডিম্বাকৃতি আকৃতি কাচের প্রতিফলনের জন্য diff --git a/translations/bn/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/bn/3-terrarium/3-intro-to-DOM-and-closures/README.md index 91492daf2..626173b68 100644 --- a/translations/bn/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/bn/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -26,7 +26,7 @@ journey Complete terrarium: 5: Student ``` -![DOM এবং একটি ক্লোজার](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.bn.png) +![DOM এবং একটি ক্লোজার](../../../../translated_images/webdev101-js.10280393044d7eaa.bn.png) > স্কেচনোট [Tomomi Imura](https://twitter.com/girlie_mac) দ্বারা ওয়েব ডেভেলপমেন্টের সবচেয়ে আকর্ষণীয় দিকগুলোর মধ্যে একটিতে আপনাকে স্বাগতম - জিনিসগুলোকে ইন্টারঅ্যাকটিভ করা! ডকুমেন্ট অবজেক্ট মডেল (DOM) আপনার HTML এবং জাভাস্ক্রিপ্টের মধ্যে একটি সেতুর মতো, এবং আজ আমরা এটি ব্যবহার করে আপনার টেরারিয়ামকে জীবন্ত করে তুলব। যখন টিম বার্নার্স-লি প্রথম ওয়েব ব্রাউজার তৈরি করেছিলেন, তিনি এমন একটি ওয়েবের কল্পনা করেছিলেন যেখানে ডকুমেন্টগুলো গতিশীল এবং ইন্টারঅ্যাকটিভ হতে পারে - DOM সেই স্বপ্নকে বাস্তবায়িত করে। @@ -105,7 +105,7 @@ flowchart TD style Q fill:#ffebee ``` -![DOM গাছের উপস্থাপনা](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.bn.png) +![DOM গাছের উপস্থাপনা](../../../../translated_images/dom-tree.7daf0e763cbbba92.bn.png) > 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 গাছের উপস্থাপনা](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.bn.png) +![DOM গাছের উপস্থাপনা](../../../../translated_images/dom-tree.7daf0e763cbbba92.bn.png) > 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() { - **ক্রস-ডিভাইস সাপোর্ট**: ডেস্কটপ এবং মোবাইলে কাজ করে - **পারফরম্যান্স সচেতন**: কোনো মেমোরি লিক বা অপ্রয়োজনীয় গণনা নেই -![সমাপ্ত টেরারিয়াম](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.bn.png) +![সমাপ্ত টেরারিয়াম](../../../../translated_images/terrarium-final.0920f16e87c13a84.bn.png) --- diff --git a/translations/bn/3-terrarium/README.md b/translations/bn/3-terrarium/README.md index 826e0e705..6419e5592 100644 --- a/translations/bn/3-terrarium/README.md +++ b/translations/bn/3-terrarium/README.md @@ -1,43 +1,30 @@ -# আমার টেরারিয়াম: HTML, CSS এবং DOM ম্যানিপুলেশন শিখতে একটি প্রকল্প 🌵🌱 +## আপনার টেরারিয়াম মোতায়েন করুন -একটি ছোট ড্র্যাগ এবং ড্রপ কোড-মেডিটেশন। সামান্য HTML, JS এবং CSS ব্যবহার করে আপনি একটি ওয়েব ইন্টারফেস তৈরি করতে পারবেন, সেটিকে স্টাইল করতে পারবেন এবং এমনকি আপনার পছন্দমতো একাধিক ইন্টারঅ্যাকশন যোগ করতে পারবেন। +আপনি **Azure Static Web Apps** ব্যবহার করে আপনার টেরারিয়াম ওয়েবে মোতায়েন বা প্রকাশ করতে পারেন। -![আমার টেরারিয়াম](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.bn.png) +1. এই রিপোটি ফর্ক করুন -# পাঠসমূহ +2. এই বোতামে চাপুন 👇 -1. [HTML পরিচিতি](./1-intro-to-html/README.md) -2. [CSS পরিচিতি](./2-intro-to-css/README.md) -3. [DOM এবং JS ক্লোজারস পরিচিতি](./3-intro-to-DOM-and-closures/README.md) +[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp) -## কৃতজ্ঞতা +3. আপনার অ্যাপ তৈরি করার জন্য সেটআপ উইজার্ড অনুসরণ করুন। + - **App root** সেট করুন `/solution` অথবা আপনার কোডবেসের রুটে। + - এই অ্যাপে কোনো API নেই, তাই API কনফিগারেশন এড়িয়ে যেতে পারেন। + - একটি `.github` ফোল্ডার স্বয়ংক্রিয়ভাবে তৈরি হবে যা Azure Static Web Apps কে আপনার অ্যাপ নির্মাণ ও প্রকাশ করতে সাহায্য করবে। -♥️ দিয়ে লিখেছেন [Jen Looper](https://www.twitter.com/jenlooper) - -CSS ব্যবহার করে তৈরি টেরারিয়ামটি অনুপ্রাণিত হয়েছে Jakub Mandra-এর গ্লাস জার [কোডপেন](https://codepen.io/Rotarepmi/pen/rjpNZY) থেকে। - -এই শিল্পকর্মটি [Jen Looper](http://jenlooper.com)-এর হাতে আঁকা, Procreate-এর সাহায্যে। - -## আপনার টেরারিয়াম প্রকাশ করুন - -আপনার টেরারিয়াম ওয়েবে প্রকাশ করতে Azure Static Web Apps ব্যবহার করতে পারেন। - -1. এই রিপোজিটরিটি ফর্ক করুন - -2. এই বোতামটি চাপুন - -[![Azure-এ প্রকাশ করুন বোতাম](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp) - -3. উইজার্ডটি অনুসরণ করে আপনার অ্যাপ তৈরি করুন। নিশ্চিত করুন যে আপনি অ্যাপ রুটটি `/solution` বা আপনার কোডবেসের রুটে সেট করেছেন। এই অ্যাপে কোনো API নেই, তাই সেটি যোগ করার দরকার নেই। একটি গিটহাব ফোল্ডার আপনার ফর্ক করা রিপোজিটরিতে তৈরি হবে, যা Azure Static Web Apps-এর বিল্ড সার্ভিসকে সাহায্য করবে আপনার অ্যাপটি তৈরি এবং একটি নতুন URL-এ প্রকাশ করতে। +--- + **অস্বীকৃতি**: -এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়ী থাকব না। \ No newline at end of file +এই নথিটি এআই অনুবাদ সেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনূদিত হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে দয়া করে জানুন যে স্বয়ংক্রিয় অনুবাদে ভুল বা ত্রুটি থাকতে পারে। মূল নথিটি তার মাতৃভাষায়ই সবচেয়ে কর্তৃত্বপূর্ণ উৎস হিসেবে বিবেচিত হওয়া উচিত। গুরুত্বপূর্ণ তথ্যের জন্য পেশাদার মানব অনুবাদের পরামর্শ দেওয়া হয়। এই অনুবাদের ব্যবহার থেকে উদ্ভূত কোনো বিভ্রান্তি বা ভুল ব্যাখ্যার জন্য আমরা দায়ী নই। + \ No newline at end of file diff --git a/translations/bn/3-terrarium/solution/README.md b/translations/bn/3-terrarium/solution/README.md index c546e0bda..b8b22b5f9 100644 --- a/translations/bn/3-terrarium/solution/README.md +++ b/translations/bn/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: একটি ছোট ড্র্যাগ এবং ড্রপ কোড-মেডিটেশন। সামান্য HTML, JS এবং CSS ব্যবহার করে আপনি একটি ওয়েব ইন্টারফেস তৈরি করতে পারেন, সেটিকে স্টাইল করতে পারেন এবং ইন্টারঅ্যাকশন যোগ করতে পারেন। -![আমার টেরারিয়াম](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.bn.png) +![আমার টেরারিয়াম](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.bn.png) ## কৃতজ্ঞতা diff --git a/translations/bn/5-browser-extension/1-about-browsers/README.md b/translations/bn/5-browser-extension/1-about-browsers/README.md index c34fb9d66..791702ef8 100644 --- a/translations/bn/5-browser-extension/1-about-browsers/README.md +++ b/translations/bn/5-browser-extension/1-about-browsers/README.md @@ -26,7 +26,7 @@ journey Polish experience: 5: Student ``` -![ব্রাউজার স্কেচনোট](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.bn.jpg) +![ব্রাউজার স্কেচনোট](../../../../translated_images/browser.60317c9be8b7f84a.bn.jpg) > স্কেচনোট করেছেন [ওয়াসিম চেগাম](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## প্রি-লেকচার কুইজ @@ -79,7 +79,7 @@ mindmap ✅ **একটু ইতিহাস**: প্রথম ব্রাউজারের নাম ছিল 'ওয়ার্ল্ডওয়াইডওয়েব' এবং এটি ১৯৯০ সালে স্যার টিমোথি বার্নার্স-লির দ্বারা তৈরি করা হয়েছিল। -![প্রথম দিকের ব্রাউজার](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.bn.jpg) +![প্রথম দিকের ব্রাউজার](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.bn.jpg) > কিছু প্রথম দিকের ব্রাউজার, [ক্যারেন ম্যাকগ্রেন](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) এর মাধ্যমে ### ব্রাউজার কীভাবে ওয়েব কন্টেন্ট প্রক্রিয়াকরণ করে @@ -198,7 +198,7 @@ quadrantChart এক্সটেনশন ইনস্টলেশন প্রক্রিয়া বোঝা আপনাকে ব্যবহারকারীদের অভিজ্ঞতা সম্পর্কে পূর্বাভাস দিতে সাহায্য করবে যখন তারা আপনার এক্সটেনশন ইনস্টল করবে। ইনস্টলেশন প্রক্রিয়া আধুনিক ব্রাউজারগুলোতে মানসম্মত, যদিও ইন্টারফেস ডিজাইনে কিছু পার্থক্য রয়েছে। -![Edge ব্রাউজারের স্ক্রিনশট যেখানে edge://extensions পেজ এবং সেটিংস মেনু খোলা রয়েছে](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.bn.png) +![Edge ব্রাউজারের স্ক্রিনশট যেখানে edge://extensions পেজ এবং সেটিংস মেনু খোলা রয়েছে](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.bn.png) > **গুরুত্বপূর্ণ**: আপনার নিজের এক্সটেনশন পরীক্ষা করার সময় ডেভেলপার মোড চালু করুন এবং অন্যান্য স্টোর থেকে এক্সটেনশন অনুমোদন করুন। diff --git a/translations/bn/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/bn/5-browser-extension/2-forms-browsers-local-storage/README.md index 361fece17..45e98bed2 100644 --- a/translations/bn/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/bn/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -268,7 +268,7 @@ stateDiagram-v2 ClearStorage --> FirstTime: Back to setup ``` -![লোকাল স্টোরেজ প্যান](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.bn.png) +![লোকাল স্টোরেজ প্যান](../../../../translated_images/localstorage.472f8147b6a3f8d1.bn.png) > ⚠️ **নিরাপত্তা বিবেচনা**: প্রোডাকশন অ্যাপ্লিকেশনগুলিতে, LocalStorage-এ API কী সংরক্ষণ করা নিরাপত্তার ঝুঁকি তৈরি করে কারণ জাভাস্ক্রিপ্ট এই ডেটা অ্যাক্সেস করতে পারে। শেখার উদ্দেশ্যে, এই পদ্ধতি ঠিক আছে, তবে প্রকৃত অ্যাপ্লিকেশনগুলিতে সংবেদনশীল ক্রেডেনশিয়ালের জন্য নিরাপদ সার্ভার-সাইড স্টোরেজ ব্যবহার করা উচিত। diff --git a/translations/bn/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/bn/5-browser-extension/3-background-tasks-and-performance/README.md index 50000dd62..0f3e740f6 100644 --- a/translations/bn/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/bn/5-browser-extension/3-background-tasks-and-performance/README.md @@ -126,7 +126,7 @@ Edge-এ ডেভেলপার টুলস খুলতে, উপরের চলুন এটি চেষ্টা করি। একটি ওয়েবসাইট খুলুন (Microsoft.com ভালো কাজ করবে) এবং 'রেকর্ড' বোতামটি ক্লিক করুন। এখন পৃষ্ঠাটি রিফ্রেশ করুন এবং প্রোফাইলারটি যা ঘটছে তা ক্যাপচার করতে দিন। যখন আপনি রেকর্ডিং বন্ধ করবেন, তখন আপনি একটি বিস্তারিত বিশ্লেষণ দেখতে পাবেন যে ব্রাউজার কীভাবে সাইটটি 'স্ক্রিপ্ট', 'রেন্ডার' এবং 'পেইন্ট' করে। এটি আমাকে মনে করিয়ে দেয় কীভাবে মিশন কন্ট্রোল একটি রকেট উৎক্ষেপণের সময় প্রতিটি সিস্টেম পর্যবেক্ষণ করে - আপনি ঠিক কী ঘটছে এবং কখন ঘটছে তার রিয়েল-টাইম ডেটা পান। -![Edge প্রোফাইলার](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.bn.png) +![Edge প্রোফাইলার](../../../../translated_images/profiler.5a4a62479c5df01c.bn.png) ✅ [Microsoft ডকুমেন্টেশন](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) আরও বিস্তারিত তথ্য প্রদান করে যদি আপনি গভীরভাবে জানতে চান @@ -136,11 +136,11 @@ Edge-এ ডেভেলপার টুলস খুলতে, উপরের আপনার পৃষ্ঠার পারফরম্যান্সের একটি স্ন্যাপশট পেতে প্রোফাইল টাইমলাইনের একটি অংশ নির্বাচন করুন এবং সারাংশ প্যানটি দেখুন: -![Edge প্রোফাইলার স্ন্যাপশট](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.bn.png) +![Edge প্রোফাইলার স্ন্যাপশট](../../../../translated_images/snapshot.97750180ebcad737.bn.png) ইভেন্ট লগ প্যানটি পরীক্ষা করুন দেখতে কোনো ইভেন্ট ১৫ মিলিসেকেন্ডের বেশি সময় নিয়েছে কিনা: -![Edge ইভেন্ট লগ](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.bn.png) +![Edge ইভেন্ট লগ](../../../../translated_images/log.804026979f3707e0.bn.png) ✅ আপনার প্রোফাইলারটি চিনুন! এই সাইটে ডেভেলপার টুলস খুলুন এবং দেখুন কোনো বাধা আছে কিনা। কোন সম্পদটি সবচেয়ে ধীর লোড হচ্ছে? সবচেয়ে দ্রুত? diff --git a/translations/bn/5-browser-extension/README.md b/translations/bn/5-browser-extension/README.md index e8b33a7a4..eac664988 100644 --- a/translations/bn/5-browser-extension/README.md +++ b/translations/bn/5-browser-extension/README.md @@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA: ### ক্রেডিটস -![একটি সবুজ ব্রাউজার এক্সটেনশন](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bn.png) +![একটি সবুজ ব্রাউজার এক্সটেনশন](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.bn.png) ## ক্রেডিটস diff --git a/translations/bn/5-browser-extension/solution/README.md b/translations/bn/5-browser-extension/solution/README.md index 24912afb1..844723aa8 100644 --- a/translations/bn/5-browser-extension/solution/README.md +++ b/translations/bn/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow-এর CO2 Signal API ব্যবহার করে বিদ্যুৎ ব্যবহারের উপর নজর রাখুন এবং একটি ব্রাউজার এক্সটেনশন তৈরি করুন, যাতে আপনার ব্রাউজারে একটি রিমাইন্ডার থাকে যে আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের চাপ কেমন। এই এক্সটেনশনটি ব্যবহার করে আপনি আপনার কার্যকলাপের উপর ভিত্তি করে সিদ্ধান্ত নিতে পারবেন। -![এক্সটেনশনের স্ক্রিনশট](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bn.png) +![এক্সটেনশনের স্ক্রিনশট](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.bn.png) ## শুরু করার জন্য @@ -31,7 +31,7 @@ npm run build Edge-এ ইনস্টল করতে, ব্রাউজারের উপরের ডান কোণের 'তিনটি ডট' মেনু ব্যবহার করে Extensions প্যানেলটি খুঁজুন। সেখান থেকে 'Load Unpacked' নির্বাচন করুন একটি নতুন এক্সটেনশন লোড করার জন্য। প্রম্পটে 'dist' ফোল্ডারটি খুলুন এবং এক্সটেনশনটি লোড হবে। এটি ব্যবহার করতে, আপনাকে CO2 Signal-এর API-এর জন্য একটি API key ([ইমেইলের মাধ্যমে এখানে পান](https://www.co2signal.com/) - এই পৃষ্ঠায় আপনার ইমেইলটি বক্সে প্রবেশ করান) এবং [আপনার অঞ্চলের কোড](http://api.electricitymap.org/v3/zones) যা [Electricity Map](https://www.electricitymap.org/map)-এর সাথে মিলে (উদাহরণস্বরূপ, বোস্টনে আমি 'US-NEISO' ব্যবহার করি) লাগবে। -![ইনস্টল করা হচ্ছে](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.bn.png) +![ইনস্টল করা হচ্ছে](../../../../translated_images/install-on-edge.78634f02842c4828.bn.png) একবার API key এবং অঞ্চল এক্সটেনশনের ইন্টারফেসে ইনপুট দিলে, ব্রাউজার এক্সটেনশন বারে রঙিন ডটটি আপনার অঞ্চলের শক্তি ব্যবহারের অবস্থা প্রতিফলিত করবে এবং আপনাকে নির্দেশনা দেবে কোন শক্তি-নির্ভর কার্যকলাপ আপনার জন্য উপযুক্ত। এই 'ডট' সিস্টেমের ধারণাটি আমাকে [Energy Lollipop এক্সটেনশন](https://energylollipop.com/) থেকে দেওয়া হয়েছিল, যা ক্যালিফোর্নিয়ার নির্গমন পর্যবেক্ষণ করে। diff --git a/translations/bn/5-browser-extension/solution/translation/README.fr.md b/translations/bn/5-browser-extension/solution/translation/README.fr.md index 4f1f4d704..7f3e2c463 100644 --- a/translations/bn/5-browser-extension/solution/translation/README.fr.md +++ b/translations/bn/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow-এর C02 Signal API ব্যবহার করে বিদ্যুৎ ব্যবহারের উপর নজর রাখুন এবং একটি ব্রাউজার এক্সটেনশন তৈরি করুন, যাতে আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের তথ্য সরাসরি ব্রাউজারে একটি অনুস্মারক হিসেবে পেতে পারেন। এই অ্যাড-হক এক্সটেনশনটি ব্যবহার করে আপনি এই তথ্যের ভিত্তিতে আপনার কার্যকলাপ সম্পর্কে একটি সঠিক সিদ্ধান্ত নিতে পারবেন। -![এক্সটেনশনের স্ক্রিনশট](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bn.png) +![এক্সটেনশনের স্ক্রিনশট](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.bn.png) ## শুরু করা @@ -31,7 +31,7 @@ npm run build Edge-এ ইনস্টল করার জন্য, ব্রাউজারের উপরের ডান কোণে থাকা 'তিনটি বিন্দু' মেনু ব্যবহার করে Extensions প্যানেলটি খুঁজুন। সেখান থেকে 'Unpacked extension লোড করুন' নির্বাচন করুন এবং একটি নতুন এক্সটেনশন লোড করুন। প্রম্পটে 'dist' ফোল্ডারটি খুলুন এবং এক্সটেনশনটি লোড হবে। এটি ব্যবহার করতে, আপনাকে CO2 Signal API-এর জন্য একটি API কী ([ইমেইলের মাধ্যমে এখানে পান](https://www.co2signal.com/) - এই পৃষ্ঠার বক্সে আপনার ইমেইল প্রবেশ করান) এবং আপনার অঞ্চলের জন্য [কোড](http://api.electricitymap.org/v3/zones) যা [ইলেকট্রিসিটি ম্যাপ](https://www.electricitymap.org/map)-এর সাথে মেলে (উদাহরণস্বরূপ, বোস্টনের জন্য আমি 'US-NEISO' ব্যবহার করি)। -![ইনস্টলেশন](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.bn.png) +![ইনস্টলেশন](../../../../../translated_images/install-on-edge.78634f02842c4828.bn.png) একবার API কী এবং অঞ্চল এক্সটেনশনের ইন্টারফেসে প্রবেশ করালে, ব্রাউজারের এক্সটেনশন বারে রঙিন বিন্দুটি আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের প্রতিফলন করবে এবং আপনাকে এমন কার্যকলাপের জন্য একটি নির্দেশনা দেবে যা শক্তি সাশ্রয়ী হতে পারে। এই 'বিন্দু' সিস্টেমের ধারণাটি আমাকে [Energy Lollipop এক্সটেনশন](https://energylollipop.com/) থেকে অনুপ্রাণিত করেছে, যা ক্যালিফোর্নিয়ার নির্গমন পর্যবেক্ষণ করে। diff --git a/translations/bn/5-browser-extension/solution/translation/README.hi.md b/translations/bn/5-browser-extension/solution/translation/README.hi.md index 32f1951f7..7e7389501 100644 --- a/translations/bn/5-browser-extension/solution/translation/README.hi.md +++ b/translations/bn/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: বিদ্যুৎ ব্যবহারের উপর নজর রাখার জন্য tmrow-এর C02 সিগন্যাল API ব্যবহার করে একটি ব্রাউজার এক্সটেনশন তৈরি করা হয়েছে, যা আপনার ব্রাউজারে আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের ভারীতা সম্পর্কে আপনাকে মনে করিয়ে দেবে। এই এক্সটেনশনটি ব্যবহার করে আপনি এই তথ্যের ভিত্তিতে আপনার কার্যকলাপ সম্পর্কে সিদ্ধান্ত নিতে পারবেন। -![এক্সটেনশন স্ক্রিনশট ](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bn.png) +![এক্সটেনশন স্ক্রিনশট ](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.bn.png) ## শুরু করা @@ -31,7 +31,7 @@ npm run build এজ ব্রাউজারে ইনস্টল করার জন্য, ব্রাউজারের উপরের ডান কোণে থাকা 'তিন ডট' মেনু ব্যবহার করে এক্সটেনশন প্যানেল খুঁজুন। সেখান থেকে, একটি নতুন এক্সটেনশন লোড করতে 'লোড আনপ্যাকড' নির্বাচন করুন। প্রম্পটে 'dist' ফোল্ডার খুলুন এবং এক্সটেনশন লোড হবে। এটি ব্যবহার করতে, আপনাকে CO2 সিগন্যাল API ([ইমেইলের মাধ্যমে এখানে পান](https://www.co2snal.com/) একটি API কী প্রয়োজন হবে - এই পৃষ্ঠার বক্সে আপনার ইমেইল লিখুন) এবং [আপনার অঞ্চলের কোড](http://api.electricitymap.org/v3/zones) [ইলেকট্রিসিটি ম্যাপ](https://www.electricitymap.org/map) থেকে (যেমন, বোস্টনে, আমি 'US-NEISO' ব্যবহার করি)। -![ইনস্টল করা](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.bn.png) +![ইনস্টল করা](../../../../../translated_images/install-on-edge.78634f02842c4828.bn.png) একবার API কী এবং অঞ্চল এক্সটেনশন ইন্টারফেসে ইনপুট হয়ে গেলে, ব্রাউজার এক্সটেনশন বারে রঙিন ডটটি আপনার অঞ্চলের শক্তি ব্যবহারের প্রতিফলন হিসেবে পরিবর্তিত হবে এবং আপনাকে একটি নির্দেশক দেবে যে শক্তি-নিবিড় কার্যকলাপ আপনার জন্য কতটা উপযুক্ত। এই 'ডট' সিস্টেমের ধারণাটি আমাকে ক্যালিফোর্নিয়ার নির্গমনের জন্য [এনার্জি ললিপপ এক্সটেনশন](https://energylollipop.com/) থেকে অনুপ্রাণিত করেছে। diff --git a/translations/bn/5-browser-extension/solution/translation/README.it.md b/translations/bn/5-browser-extension/solution/translation/README.it.md index c5806a283..ae506cc79 100644 --- a/translations/bn/5-browser-extension/solution/translation/README.it.md +++ b/translations/bn/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow এর Signal C02 API ব্যবহার করে বিদ্যুৎ ব্যবহারের উপর নজর রাখা হবে, যাতে একটি ব্রাউজার এক্সটেনশন তৈরি করা যায়। এই এক্সটেনশনটি আপনার ব্রাউজারে সরাসরি মনে করিয়ে দেবে যে আপনার অঞ্চলে বিদ্যুৎ ব্যবহারের প্রভাব কতটা। এই এক্সটেনশনটি ব্যবহার করে আপনি এই তথ্যের ভিত্তিতে আপনার কার্যক্রম মূল্যায়ন করতে পারবেন। -![এক্সটেনশনের স্ক্রিনশট](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bn.png) +![এক্সটেনশনের স্ক্রিনশট](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.bn.png) ## শুরু করার জন্য @@ -31,7 +31,7 @@ npm run build Edge-এ ইনস্টল করতে, ব্রাউজারের উপরের ডান কোণে থাকা "তিনটি বিন্দু" মেনু ব্যবহার করে এক্সটেনশন প্যানেলটি খুঁজুন। যদি এটি সক্রিয় না থাকে, তাহলে ডেভেলপার মোড (নিচের বাম দিকে) সক্রিয় করুন। "Carica decompressa" নির্বাচন করুন একটি নতুন এক্সটেনশন লোড করার জন্য। প্রম্পটে "dist" ফোল্ডারটি খুলুন এবং এক্সটেনশনটি লোড হবে। এটি ব্যবহার করতে, আপনাকে CO2 Signal API-এর জন্য একটি API কী প্রয়োজন হবে (আপনি এটি [ই-মেইলের মাধ্যমে এখানে পেতে পারেন](https://www.co2signal.com/) - এই পৃষ্ঠায় আপনার ই-মেইল বক্সে প্রবেশ করুন) এবং [ইলেকট্রিসিটি ম্যাপ](https://www.electricitymap.org/map)-এর সাথে সম্পর্কিত [আপনার অঞ্চলের কোড](http://api.electricitymap.org/v3/zones) প্রয়োজন হবে (যেমন, বোস্টনে "US-NEISO")। -![ইনস্টলেশন](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.bn.png) +![ইনস্টলেশন](../../../../../translated_images/install-on-edge.78634f02842c4828.bn.png) একবার API কী এবং অঞ্চল এক্সটেনশনের ইন্টারফেসে প্রবেশ করানো হলে, ব্রাউজারের এক্সটেনশন বারে থাকা রঙিন বিন্দুটি আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের প্রতিফলন দেখাবে এবং কোন উচ্চ-শক্তি ব্যবহারকারী কার্যক্রমগুলি সম্পাদন করা উপযুক্ত হবে তার একটি নির্দেশনা দেবে। এই "পয়েন্ট" সিস্টেমের ধারণাটি ক্যালিফোর্নিয়ার নির্গমনের জন্য [Energy Lollipop এক্সটেনশন](https://energylollipop.com/) থেকে নেওয়া হয়েছে। diff --git a/translations/bn/5-browser-extension/solution/translation/README.ja.md b/translations/bn/5-browser-extension/solution/translation/README.ja.md index b5b63a542..8dc05984e 100644 --- a/translations/bn/5-browser-extension/solution/translation/README.ja.md +++ b/translations/bn/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow এর CO2 সিগন্যাল API ব্যবহার করে বিদ্যুৎ ব্যবহারের পরিমাণ ট্র্যাক করার জন্য একটি ব্রাউজার এক্সটেনশন তৈরি করুন, যা আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের পরিমাণ ব্রাউজারে একটি রিমাইন্ডার হিসেবে দেখাবে। এই এক্সটেনশনটি ব্যবহার করে আপনি এই তথ্যের ভিত্তিতে আপনার কার্যকলাপ নির্ধারণ করতে পারবেন। -![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bn.png) +![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.bn.png) ## শুরু করা যাক @@ -31,7 +31,7 @@ npm run build Edge-এ ইনস্টল করতে, ব্রাউজারের ডানদিকে উপরের কোণে থাকা "তিনটি ডট" মেনু থেকে "Extensions" প্যানেলটি খুঁজে নিন। সেখান থেকে "Load Unpacked" নির্বাচন করুন এবং নতুন এক্সটেনশনটি লোড করুন। প্রম্পটে "dist" ফোল্ডারটি খুলুন, এবং এক্সটেনশনটি লোড হয়ে যাবে। এটি ব্যবহার করতে, CO2 সিগন্যাল API-এর API কী ([ইমেইলের মাধ্যমে এখানে একটি পান](https://www.co2signal.com/) - এই পৃষ্ঠার বক্সে আপনার ইমেইল লিখুন) এবং [Electricity Map](https://www.electricitymap.org/map)-এর সাথে সম্পর্কিত [আপনার অঞ্চলের কোড](http://api.electricitymap.org/v3/zones) প্রয়োজন হবে (উদাহরণস্বরূপ, বোস্টনের জন্য 'US-NEISO' ব্যবহার করা হয়)। -![installing](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.bn.png) +![installing](../../../../../translated_images/install-on-edge.78634f02842c4828.bn.png) API কী এবং অঞ্চলটি এক্সটেনশনের ইন্টারফেসে প্রবেশ করানোর পর, ব্রাউজারের এক্সটেনশন বারে প্রদর্শিত রঙিন ডটটি পরিবর্তিত হবে এবং আপনার অঞ্চলের শক্তি ব্যবহারের পরিমাণ প্রতিফলিত করবে। এটি আপনাকে নির্দেশ করবে কোন ধরনের শক্তি-নির্ভর কার্যকলাপ করা উপযুক্ত। এই "ডট" সিস্টেমের ধারণাটি আমাকে ক্যালিফোর্নিয়ার নির্গমনের জন্য [Energy Lollipop extension](https://energylollipop.com/) থেকে অনুপ্রাণিত করেছে। diff --git a/translations/bn/5-browser-extension/solution/translation/README.ms.md b/translations/bn/5-browser-extension/solution/translation/README.ms.md index d6f4e96b5..e5943b8cb 100644 --- a/translations/bn/5-browser-extension/solution/translation/README.ms.md +++ b/translations/bn/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow এর CO2 সিগন্যাল API ব্যবহার করে বিদ্যুৎ ব্যবহারের উপর নজরদারি করুন এবং একটি ব্রাউজার এক্সটেনশন তৈরি করুন যা আপনাকে আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের ভারীতা সম্পর্কে সতর্ক করবে। এই এক্সটেনশনটি ব্যবহার করে আপনি আপনার কার্যকলাপ সম্পর্কে আরও সচেতন সিদ্ধান্ত নিতে পারবেন। -![ব্রাউজার এক্সটেনশনের স্ক্রিনশট](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bn.png) +![ব্রাউজার এক্সটেনশনের স্ক্রিনশট](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.bn.png) ## শুরু এখান থেকে @@ -31,7 +31,7 @@ npm run build Edge-এ ইনস্টল করার জন্য, ব্রাউজারের ডানদিকের উপরের কোণে থাকা 'তিনটি ডট' মেনু ব্যবহার করে এক্সটেনশন প্যানেলটি খুঁজুন। সেখান থেকে, 'Load Unpacked' নির্বাচন করুন নতুন এক্সটেনশন লোড করার জন্য। অনুরোধ অনুযায়ী 'dist' ফোল্ডারটি খুলুন এবং এক্সটেনশনটি লোড হবে। এটি ব্যবহার করার জন্য, আপনাকে CO2 সিগন্যাল API-এর জন্য একটি API কী ([এখানে ইমেইলের মাধ্যমে একটি পান](https://www.co2signal.com/) - এই পৃষ্ঠার বক্সে আপনার ইমেইল দিন) এবং [আপনার অঞ্চলের কোড](http://api.electricitymap.org/v3/zones) প্রয়োজন, যা [ইলেকট্রিসিটি ম্যাপ](https://www.electricitymap.org/map)-এর সাথে মিলে যায় (উদাহরণস্বরূপ, বোস্টনে আমি 'US-NEISO' ব্যবহার করি)। -![ডাউনলোড হচ্ছে](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.bn.png) +![ডাউনলোড হচ্ছে](../../../../../translated_images/install-on-edge.78634f02842c4828.bn.png) API কী এবং অঞ্চল এক্সটেনশনের ইন্টারফেসে প্রবেশ করানোর পর, ব্রাউজার এক্সটেনশন বারে রঙিন বিন্দুটি আপনার অঞ্চলের শক্তি ব্যবহারের প্রতিফলন করবে এবং আপনাকে ভারী কার্যকলাপের জন্য উপযুক্ত নির্দেশনা দেবে। এই 'ডট' সিস্টেমের ধারণাটি আমাকে [এনার্জি ললিপপ ব্রাউজার এক্সটেনশন](https://energylollipop.com/) থেকে অনুপ্রাণিত করেছে, যা ক্যালিফোর্নিয়ার নির্গমনের জন্য তৈরি। diff --git a/translations/bn/5-browser-extension/start/README.md b/translations/bn/5-browser-extension/start/README.md index d243b44c4..a206fa787 100644 --- a/translations/bn/5-browser-extension/start/README.md +++ b/translations/bn/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow-এর CO2 Signal API ব্যবহার করে বিদ্যুৎ ব্যবহারের উপর নজর রাখুন এবং একটি ব্রাউজার এক্সটেনশন তৈরি করুন, যা আপনার ব্রাউজারে একটি অনুস্মারক হিসেবে কাজ করবে আপনার অঞ্চলের বিদ্যুৎ ব্যবহারের ভার কতটা তা জানার জন্য। এই এক্সটেনশনটি ব্যবহার করে আপনি আপনার কার্যকলাপ সম্পর্কে তথ্যের ভিত্তিতে সিদ্ধান্ত নিতে পারবেন। -![এক্সটেনশনের স্ক্রিনশট](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.bn.png) +![এক্সটেনশনের স্ক্রিনশট](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.bn.png) ## শুরু করার জন্য @@ -31,7 +31,7 @@ npm run build Edge-এ ইনস্টল করতে, ব্রাউজারের উপরের ডান কোণের 'তিন ডট' মেনু ব্যবহার করে Extensions প্যানেলটি খুঁজুন। সেখান থেকে 'Load Unpacked' নির্বাচন করুন একটি নতুন এক্সটেনশন লোড করার জন্য। প্রম্পটে 'dist' ফোল্ডারটি খুলুন এবং এক্সটেনশনটি লোড হবে। এটি ব্যবহার করতে, আপনাকে CO2 Signal-এর API-এর জন্য একটি API কী ([ইমেইলের মাধ্যমে এখানে পান](https://www.co2signal.com/) - এই পৃষ্ঠায় আপনার ইমেইলটি বক্সে লিখুন) এবং [Electricity Map](https://www.electricitymap.org/map)-এর সাথে সম্পর্কিত আপনার অঞ্চলের [কোড](http://api.electricitymap.org/v3/zones) প্রয়োজন হবে (উদাহরণস্বরূপ, বোস্টনে আমি 'US-NEISO' ব্যবহার করি)। -![ইনস্টল করা হচ্ছে](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.bn.png) +![ইনস্টল করা হচ্ছে](../../../../translated_images/install-on-edge.78634f02842c4828.bn.png) একবার API কী এবং অঞ্চল এক্সটেনশনের ইন্টারফেসে ইনপুট দিলে, ব্রাউজার এক্সটেনশন বারে রঙিন বিন্দুটি আপনার অঞ্চলের শক্তি ব্যবহারের প্রতিফলন দেখাবে এবং আপনাকে নির্দেশনা দেবে কোন শক্তি-নির্ভর কার্যকলাপ আপনার জন্য উপযুক্ত। এই 'ডট' সিস্টেমের ধারণাটি আমাকে [Energy Lollipop এক্সটেনশন](https://energylollipop.com/) থেকে দেওয়া হয়েছিল, যা ক্যালিফোর্নিয়ার নির্গমনের জন্য তৈরি। diff --git a/translations/bn/6-space-game/2-drawing-to-canvas/README.md b/translations/bn/6-space-game/2-drawing-to-canvas/README.md index 424a8a08e..493374976 100644 --- a/translations/bn/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/bn/6-space-game/2-drawing-to-canvas/README.md @@ -108,7 +108,7 @@ quadrantChart UI Elements: [0.9, 0.1] ``` -![ক্যানভাসের গ্রিড](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.bn.png) +![ক্যানভাসের গ্রিড](../../../../translated_images/canvas_grid.5f209da785ded492.bn.png) > ছবি [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) থেকে ক্যানভাস উপাদানে আঁকার জন্য, আপনি একই তিন-ধাপের প্রক্রিয়া অনুসরণ করবেন, যা সমস্ত ক্যানভাস গ্রাফিক্সের ভিত্তি গঠন করে। এটি কয়েকবার করলে, এটি স্বাভাবিক হয়ে যাবে: @@ -329,11 +329,11 @@ flowchart TD - হিরো শিপ - ![হিরো শিপ](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.bn.png) + ![হিরো শিপ](../../../../translated_images/player.dd24c1afa8c71e9b.bn.png) - 5*5 মনস্টার - ![মনস্টার শিপ](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.bn.png) + ![মনস্টার শিপ](../../../../translated_images/enemyShip.5df2a822c16650c2.bn.png) ### ডেভেলপমেন্ট শুরু করার জন্য প্রস্তাবিত ধাপ @@ -408,7 +408,7 @@ const STOP_X = START_X + FORMATION_WIDTH; শেষ ফলাফলটি এরকম দেখতে হবে: -![কালো স্ক্রিন যেখানে একটি হিরো এবং ৫*৫ দানব রয়েছে](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.bn.png) +![কালো স্ক্রিন যেখানে একটি হিরো এবং ৫*৫ দানব রয়েছে](../../../../translated_images/partI-solution.36c53b48c9ffae2a.bn.png) ## সমাধান diff --git a/translations/bn/6-space-game/5-keeping-score/README.md b/translations/bn/6-space-game/5-keeping-score/README.md index 25bae5a5b..95a515045 100644 --- a/translations/bn/6-space-game/5-keeping-score/README.md +++ b/translations/bn/6-space-game/5-keeping-score/README.md @@ -160,7 +160,7 @@ sequenceDiagram ``` - **স্কোরিং সিস্টেম**: প্রতিটি ধ্বংস করা শত্রু জাহাজ ১০০ পয়েন্ট প্রদান করে (গণনা করা সহজ করার জন্য রাউন্ড সংখ্যা ব্যবহার করা হয়)। স্কোরটি নিচের বাম কোণে প্রদর্শিত হবে। -- **জীবন কাউন্টার**: আপনার হিরো তিনটি জীবন দিয়ে শুরু করে - প্রাথমিক আর্কেড গেমগুলির দ্বারা চ্যালেঞ্জ এবং খেলার যোগ্যতার মধ্যে ভারসাম্য বজায় রাখতে এটি একটি মানদণ্ড। শত্রুর সাথে প্রতিটি সংঘর্ষে একটি জীবন হারায়। আমরা বাকি জীবনগুলোকে নিচের ডান কোণে জাহাজের আইকন ব্যবহার করে প্রদর্শন করব ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.bn.png)। +- **জীবন কাউন্টার**: আপনার হিরো তিনটি জীবন দিয়ে শুরু করে - প্রাথমিক আর্কেড গেমগুলির দ্বারা চ্যালেঞ্জ এবং খেলার যোগ্যতার মধ্যে ভারসাম্য বজায় রাখতে এটি একটি মানদণ্ড। শত্রুর সাথে প্রতিটি সংঘর্ষে একটি জীবন হারায়। আমরা বাকি জীবনগুলোকে নিচের ডান কোণে জাহাজের আইকন ব্যবহার করে প্রদর্শন করব ![life image](../../../../translated_images/life.6fb9f50d53ee0413.bn.png)। ## চলুন শুরু করি! diff --git a/translations/bn/7-bank-project/1-template-route/README.md b/translations/bn/7-bank-project/1-template-route/README.md index 68e35ed95..e79015185 100644 --- a/translations/bn/7-bank-project/1-template-route/README.md +++ b/translations/bn/7-bank-project/1-template-route/README.md @@ -575,7 +575,7 @@ sequenceDiagram `history.pushState` ব্যবহার করে ব্রাউজারের নেভিগেশন ইতিহাসে নতুন এন্ট্রি তৈরি করা হয়। আপনি যদি ব্রাউজারের *ব্যাক বাটন* ধরে রাখেন, এটি কিছুটা এরকম দেখাবে: -![নেভিগেশন ইতিহাসের স্ক্রিনশট](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.bn.png) +![নেভিগেশন ইতিহাসের স্ক্রিনশট](../../../../translated_images/history.7fdabbafa521e064.bn.png) আপনি যদি কয়েকবার ব্যাক বাটনে ক্লিক করেন, আপনি দেখবেন যে বর্তমান URL পরিবর্তন হচ্ছে এবং ইতিহাস আপডেট হচ্ছে, কিন্তু একই টেমপ্লেট প্রদর্শিত হচ্ছে। diff --git a/translations/bn/7-bank-project/2-forms/README.md b/translations/bn/7-bank-project/2-forms/README.md index 971f573e8..2e56ce92c 100644 --- a/translations/bn/7-bank-project/2-forms/README.md +++ b/translations/bn/7-bank-project/2-forms/README.md @@ -295,7 +295,7 @@ graph TD 2. আপনার ব্রাউজারের অ্যাড্রেস বারে পরিবর্তনগুলি লক্ষ্য করুন 3. লক্ষ্য করুন কীভাবে পৃষ্ঠা পুনরায় লোড হয় এবং ডেটা URL-এ প্রদর্শিত হয় -![রেজিস্টার বোতামে ক্লিক করার পর ব্রাউজারের URL পরিবর্তনের স্ক্রিনশট](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.bn.png) +![রেজিস্টার বোতামে ক্লিক করার পর ব্রাউজারের URL পরিবর্তনের স্ক্রিনশট](../../../../translated_images/click-register.e89a30bf0d4bc9ca.bn.png) ### HTTP পদ্ধতির তুলনা @@ -475,7 +475,7 @@ async function register() { 3. **"Create Account" ক্লিক করুন** 4. **কনসোল বার্তা এবং ব্যবহারকারীর প্রতিক্রিয়া পর্যবেক্ষণ করুন** -![ব্রাউজার কনসোলে লগ বার্তা দেখানো স্ক্রিনশট](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.bn.png) +![ব্রাউজার কনসোলে লগ বার্তা দেখানো স্ক্রিনশট](../../../../translated_images/browser-console.efaf0b51aaaf6778.bn.png) **আপনি যা দেখতে পাবেন:** - **লোডিং স্টেট** সাবমিট বোতামে প্রদর্শিত হবে @@ -650,7 +650,7 @@ input:focus:invalid { 3. **বিশেষ অক্ষর চেষ্টা করুন** ব্যবহারকারীর নাম ক্ষেত্রে 4. **একটি নেতিবাচক ব্যালেন্স পরিমাণ লিখুন** -![ফর্ম জমা দেওয়ার চেষ্টা করার সময় যাচাইকরণ ত্রুটি দেখানো স্ক্রিনশট](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.bn.png) +![ফর্ম জমা দেওয়ার চেষ্টা করার সময় যাচাইকরণ ত্রুটি দেখানো স্ক্রিনশট](../../../../translated_images/validation-error.8bd23e98d416c22f.bn.png) **আপনি যা পর্যবেক্ষণ করবেন:** - **ব্রাউজার প্রদর্শন করে** নেটিভ যাচাইকরণ বার্তা @@ -769,7 +769,7 @@ timeline এখানে কিছু স্টাইলিং যোগ করার পরে চূড়ান্ত লগইন পৃষ্ঠার একটি উদাহরণ: -![CSS স্টাইল যোগ করার পরে লগইন পৃষ্ঠার স্ক্রিনশট](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.bn.png) +![CSS স্টাইল যোগ করার পরে লগইন পৃষ্ঠার স্ক্রিনশট](../../../../translated_images/result.96ef01f607bf856a.bn.png) ## পোস্ট-লেকচার কুইজ diff --git a/translations/bn/7-bank-project/3-data/README.md b/translations/bn/7-bank-project/3-data/README.md index ad7196a1f..86218ecdd 100644 --- a/translations/bn/7-bank-project/3-data/README.md +++ b/translations/bn/7-bank-project/3-data/README.md @@ -160,7 +160,7 @@ sequenceDiagram Browser->>User: Displays new page (flash/reload) ``` -![মাল্টি-পেজ অ্যাপ্লিকেশনে আপডেট ওয়ার্কফ্লো](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.bn.png) +![মাল্টি-পেজ অ্যাপ্লিকেশনে আপডেট ওয়ার্কফ্লো](../../../../translated_images/mpa.7f7375a1a2d4aa77.bn.png) **কেন এই পদ্ধতি ক্লান্তিকর মনে হয়েছিল:** - প্রতিটি ক্লিক মানে পুরো পৃষ্ঠাটি স্ক্র্যাচ থেকে পুনর্নির্মাণ করা @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![সিঙ্গেল-পেজ অ্যাপ্লিকেশনে আপডেট ওয়ার্কফ্লো](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.bn.png) +![সিঙ্গেল-পেজ অ্যাপ্লিকেশনে আপডেট ওয়ার্কফ্লো](../../../../translated_images/spa.268ec73b41f992c2.bn.png) **কেন SPA-গুলো এত ভালো লাগে:** - শুধুমাত্র যা পরিবর্তন হয়েছে তা আপডেট হয় (বুদ্ধিমানের কাজ, তাই না?) @@ -487,7 +487,7 @@ if (data.error) { এখন আপনি যখন একটি অবৈধ অ্যাকাউন্ট দিয়ে পরীক্ষা করবেন, আপনি পৃষ্ঠায় একটি সহায়ক ত্রুটি বার্তা দেখতে পাবেন! -![লগইন চলাকালীন প্রদর্শিত ত্রুটি বার্তা দেখানো স্ক্রিনশট](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.bn.png) +![লগইন চলাকালীন প্রদর্শিত ত্রুটি বার্তা দেখানো স্ক্রিনশট](../../../../translated_images/login-error.416fe019b36a6327.bn.png) #### ধাপ ৪: অ্যাক্সেসিবিলিটির সাথে অন্তর্ভুক্তিমূলক হওয়া @@ -819,7 +819,7 @@ Agent মোড সম্পর্কে আরও জানুন [এখান একটি পরিপূর্ণ ড্যাশবোর্ড দেখতে কেমন হতে পারে তার উদাহরণ এখানে: -![ড্যাশবোর্ডের স্টাইলিংয়ের পর একটি উদাহরণ ফলাফলের স্ক্রিনশট](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.bn.png) +![ড্যাশবোর্ডের স্টাইলিংয়ের পর একটি উদাহরণ ফলাফলের স্ক্রিনশট](../../../../translated_images/screen2.123c82a831a1d14a.bn.png) আপনাকে এটি ঠিক একইভাবে মেলানোর প্রয়োজন নেই - এটি অনুপ্রেরণা হিসেবে ব্যবহার করুন এবং এটিকে আপনার মতো করে তৈরি করুন! diff --git a/translations/bn/7-bank-project/4-state-management/README.md b/translations/bn/7-bank-project/4-state-management/README.md index 4faf283d4..12ccb1664 100644 --- a/translations/bn/7-bank-project/4-state-management/README.md +++ b/translations/bn/7-bank-project/4-state-management/README.md @@ -190,7 +190,7 @@ mindmap আমরা আমাদের **কেন্দ্রীয় স্টেট ম্যানেজমেন্ট** সিস্টেম তৈরি করতে যাচ্ছি। এটি এমন একজন অত্যন্ত সংগঠিত ব্যক্তির মতো যিনি সমস্ত গুরুত্বপূর্ণ বিষয়ের দায়িত্বে আছেন: -![HTML, ব্যবহারকারীর ক্রিয়া এবং স্টেটের মধ্যে ডেটা প্রবাহ দেখানো স্কিমা](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.bn.png) +![HTML, ব্যবহারকারীর ক্রিয়া এবং স্টেটের মধ্যে ডেটা প্রবাহ দেখানো স্কিমা](../../../../translated_images/data-flow.fa2354e0908fecc8.bn.png) ```mermaid flowchart TD diff --git a/translations/bn/7-bank-project/4-state-management/assignment.md b/translations/bn/7-bank-project/4-state-management/assignment.md index 37fe198d1..ed30bf12a 100644 --- a/translations/bn/7-bank-project/4-state-management/assignment.md +++ b/translations/bn/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA: **প্রত্যাশিত ফলাফল:** এই অ্যাসাইনমেন্ট সম্পন্ন করার পরে, আপনার ব্যাংকিং অ্যাপে একটি সম্পূর্ণ কার্যকরী "ট্রানজ্যাকশন যোগ করুন" ফিচার থাকবে যা পেশাদারভাবে দেখাবে এবং কাজ করবে: -![একটি উদাহরণ "ট্রানজ্যাকশন যোগ করুন" ডায়ালগের স্ক্রিনশট](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.bn.png) +![একটি উদাহরণ "ট্রানজ্যাকশন যোগ করুন" ডায়ালগের স্ক্রিনশট](../../../../translated_images/dialog.93bba104afeb79f1.bn.png) ## আপনার বাস্তবায়ন পরীক্ষা করা diff --git a/translations/bn/7-bank-project/README.md b/translations/bn/7-bank-project/README.md index fef75fb65..17c4e2e68 100644 --- a/translations/bn/7-bank-project/README.md +++ b/translations/bn/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: এই প্রকল্পে, আপনি একটি কাল্পনিক ব্যাংক তৈরি করার পদ্ধতি শিখবেন। এই পাঠগুলোতে একটি ওয়েব অ্যাপের লেআউট এবং রুট তৈরি, ফর্ম তৈরি, স্টেট পরিচালনা এবং API থেকে ব্যাংকের ডেটা সংগ্রহ করার পদ্ধতি শেখানো হয়েছে। -| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.bn.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.bn.png) | +| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.bn.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.bn.png) | |--------------------------------|--------------------------------| ## পাঠসমূহ diff --git a/translations/bn/8-code-editor/1-using-a-code-editor/README.md b/translations/bn/8-code-editor/1-using-a-code-editor/README.md index e457832e5..9cfe3048f 100644 --- a/translations/bn/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/bn/8-code-editor/1-using-a-code-editor/README.md @@ -185,7 +185,7 @@ VSCode.dev এই ক্ষমতাগুলো আপনার ব্রাউ সবকিছু লোড হয়ে গেলে, আপনি একটি সুন্দর পরিষ্কার ওয়ার্কস্পেস দেখতে পাবেন যা আপনাকে গুরুত্বপূর্ণ বিষয়ের উপর মনোযোগ দিতে সাহায্য করে – আপনার কোড! -![ডিফল্ট VSCode.dev ইন্টারফেস](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.bn.png) +![ডিফল্ট VSCode.dev ইন্টারফেস](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.bn.png) **এটি আপনার আশেপাশের ট্যুর:** - **অ্যাক্টিভিটি বার** (বাম দিকে স্ট্রিপটি): আপনার প্রধান নেভিগেশন যেখানে আছে Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩, এবং Settings ⚙️ @@ -233,7 +233,7 @@ flowchart TB 1. [vscode.dev](https://vscode.dev)-এ যান যদি আপনি ইতিমধ্যে সেখানে না থাকেন 2. ওয়েলকাম স্ক্রিনে "Open Remote Repository" বোতামটি খুঁজুন এবং ক্লিক করুন - ![রিমোট রিপোজিটরি খুলুন](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.bn.png) + ![রিমোট রিপোজিটরি খুলুন](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.bn.png) 3. যেকোনো GitHub রিপোজিটরি URL পেস্ট করুন (এটি চেষ্টা করুন: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Enter চাপুন এবং জাদু দেখুন! @@ -242,7 +242,7 @@ flowchart TB কোডিং উইজার্ডের মতো অনুভব করতে চান? এই কীবোর্ড শর্টকাট চেষ্টা করুন: Ctrl+Shift+P (বা Mac-এ Cmd+Shift+P) কমান্ড প্যালেট খুলতে: -![কমান্ড প্যালেট](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.bn.png) +![কমান্ড প্যালেট](../../../../translated_images/palette-menu.4946174e07f42622.bn.png) **কমান্ড প্যালেট হলো সবকিছু করার জন্য একটি সার্চ ইঞ্জিনের মতো:** - "open remote" টাইপ করুন এবং এটি রিপোজিটরি ওপেনার খুঁজে দেবে @@ -304,7 +304,7 @@ flowchart TB 3. উপযুক্ত এক্সটেনশনসহ ফাইলের নাম লিখুন (`style.css`, `script.js`, `index.html`) 4. Enter চাপুন ফাইল তৈরি করতে -![নতুন ফাইল তৈরি করা](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.bn.png) +![নতুন ফাইল তৈরি করা](../../../../translated_images/create-new-file.2814e609c2af9aeb.bn.png) **নামকরণের নিয়মাবলী:** - ফাইলের উদ্দেশ্য নির্দেশ করে বর্ণনামূলক নাম ব্যবহার করুন @@ -381,7 +381,7 @@ mindmap 2. ঘুরে দেখুন বা নির্দিষ্ট কিছু খুঁজুন 3. যা আকর্ষণীয় মনে হয় তাতে ক্লিক করুন এবং আরও জানুন -![এক্সটেনশন মার্কেটপ্লেস ইন্টারফেস](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.bn.png) +![এক্সটেনশন মার্কেটপ্লেস ইন্টারফেস](../../../../translated_images/extensions.eca0e0c7f59a10b5.bn.png) **আপনি সেখানে যা দেখতে পাবেন:** @@ -434,7 +434,7 @@ mindmap 3. ড্রপডাউন থেকে "এক্সটেনশন সেটিংস" নির্বাচন করুন 4. আপনার ওয়ার্কফ্লো অনুযায়ী জিনিসগুলো সামঞ্জস্য করুন -![এক্সটেনশন সেটিংস কাস্টমাইজ করা](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.bn.png) +![এক্সটেনশন সেটিংস কাস্টমাইজ করা](../../../../translated_images/extension-settings.21c752ae4f4cdb78.bn.png) **যা আপনি সাধারণত সামঞ্জস্য করতে চাইবেন:** - আপনার কোড কীভাবে ফরম্যাট হবে (ট্যাব বনাম স্পেস, লাইন দৈর্ঘ্য ইত্যাদি) diff --git a/translations/bn/8-code-editor/1-using-a-code-editor/assignment.md b/translations/bn/8-code-editor/1-using-a-code-editor/assignment.md index 4a41869fc..8cd611431 100644 --- a/translations/bn/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/bn/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ CO_OP_TRANSLATOR_METADATA: 4. **একটি কমিট বার্তা লিখুন**: "Add initial HTML structure" 5. **"Commit new file" ক্লিক করুন** আপনার পরিবর্তনগুলি সংরক্ষণ করতে -![GitHub-এ প্রাথমিক ফাইল তৈরি করা](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.bn.png) +![GitHub-এ প্রাথমিক ফাইল তৈরি করা](../../../../translated_images/new-file-github.com.c886796d800e8056.bn.png) **এই প্রাথমিক সেটআপ যা অর্জন করে:** - **HTML5 ডকুমেন্ট গঠন প্রতিষ্ঠা করে** সেমান্টিক এলিমেন্ট সহ @@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA: ✅ **সফলতার সূচক**: আপনি আপনার প্রকল্প ফাইলগুলি Explorer সাইডবারে এবং `index.html` প্রধান এডিটর এলাকায় দেখতে পাবেন। -![VSCode.dev-এ প্রকল্প লোড করা](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.bn.png) +![VSCode.dev-এ প্রকল্প লোড করা](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.bn.png) **ইন্টারফেসে যা আপনি দেখতে পাবেন:** - **Explorer সাইডবার**: **প্রদর্শন করে** আপনার রিপোজিটরি ফাইল এবং ফোল্ডার গঠন @@ -448,7 +448,7 @@ li:before { **ইনস্টলেশনের পরপরই ফলাফল:** CodeSwing ইনস্টল করার পরে, আপনি আপনার রিজিউম ওয়েবসাইটের একটি লাইভ প্রিভিউ এডিটরে দেখতে পাবেন। এটি আপনাকে আপনার সাইটটি কেমন দেখাচ্ছে তা পরিবর্তন করার সাথে সাথে দেখতে দেয়। -![CodeSwing এক্সটেনশন লাইভ প্রিভিউ দেখাচ্ছে](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.bn.png) +![CodeSwing এক্সটেনশন লাইভ প্রিভিউ দেখাচ্ছে](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.bn.png) **উন্নত ইন্টারফেস বোঝা:** - **স্প্লিট ভিউ**: **আপনার কোড এক পাশে এবং লাইভ প্রিভিউ অন্য পাশে দেখায়** diff --git a/translations/bn/9-chat-project/README.md b/translations/bn/9-chat-project/README.md index a851497d5..9de74455e 100644 --- a/translations/bn/9-chat-project/README.md +++ b/translations/bn/9-chat-project/README.md @@ -61,7 +61,7 @@ print(response.choices[0].message.content) আপনার সমাপ্ত প্রকল্পটি দেখতে এমন হবে: -![চ্যাট অ্যাপ ইন্টারফেস যেখানে ব্যবহারকারী এবং এআই সহকারীর মধ্যে কথোপকথন দেখানো হচ্ছে](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.bn.png) +![চ্যাট অ্যাপ ইন্টারফেস যেখানে ব্যবহারকারী এবং এআই সহকারীর মধ্যে কথোপকথন দেখানো হচ্ছে](../../../translated_images/screenshot.0a1ee0d123df681b.bn.png) ## 🗺️ এআই অ্যাপ্লিকেশন ডেভেলপমেন্টের মাধ্যমে আপনার শেখার যাত্রা @@ -1703,14 +1703,14 @@ mindmap - **[Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) এ যান** - **উপরের ডানদিকে "Use this template" ক্লিক করুন** (নিশ্চিত করুন আপনি GitHub-এ লগইন করেছেন) -![টেমপ্লেট ইন্টারফেস যেখানে সবুজ "Use this template" বোতাম দেখানো হয়েছে](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.bn.png) +![টেমপ্লেট ইন্টারফেস যেখানে সবুজ "Use this template" বোতাম দেখানো হয়েছে](../../../translated_images/template.67ad477109d29a2b.bn.png) **ধাপ ২: Codespaces চালু করুন** - **আপনার নতুন তৈরি করা রিপোজিটরি খুলুন** - **সবুজ "Code" বোতাম ক্লিক করুন এবং "Codespaces" নির্বাচন করুন** - **"Create codespace on main" নির্বাচন করুন** আপনার ডেভেলপমেন্ট পরিবেশ শুরু করতে -![Codespace ইন্টারফেস যেখানে ক্লাউড ডেভেলপমেন্ট পরিবেশ চালু করার অপশন দেখানো হয়েছে](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.bn.png) +![Codespace ইন্টারফেস যেখানে ক্লাউড ডেভেলপমেন্ট পরিবেশ চালু করার অপশন দেখানো হয়েছে](../../../translated_images/codespace.bcecbdf5d2747d3d.bn.png) **ধাপ ৩: পরিবেশ কনফিগারেশন** আপনার Codespace লোড হওয়ার পর, আপনি পাবেন: diff --git a/translations/bn/README.md b/translations/bn/README.md index c44195e55..fb976506b 100644 --- a/translations/bn/README.md +++ b/translations/bn/README.md @@ -1,261 +1,257 @@ -[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) -[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) -[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) -[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) -[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +# ওয়েব ডেভেলপমেন্ট ফর বেগিনার্স - একটি পাঠক্রম -[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) -[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) -[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) +মাইক্রোসফট ক্লাউড অ্যাডভোকেটদের দ্বারা পরিচালিত আমাদের ১২ সপ্তাহের বিস্তৃত কোর্সের মাধ্যমে ওয়েব ডেভেলপমেন্টের মৌলিক বিষয়গুলি শিখুন। ২৪টি পাঠের প্রতিটি অংশে কাজের প্রকল্প যেমন টেরারিয়াম, ব্রাউজার এক্সটেনশন এবং স্পেস গেমসের মাধ্যমে জাভাস্ক্রিপ্ট, সিএসএস এবং এইচটিএমএল অন্তর্ভুক্ত রয়েছে। কুইজ, আলোচনা এবং ব্যবহারিক কাজের মাধ্যমে নিজেকে যুক্ত করুন। কার্যকর প্রকল্প-ভিত্তিক শিক্ষণ পদ্ধতির সাহায্যে আপনার দক্ষতা উন্নত করুন এবং জ্ঞানের ধারাবাহিকতা বাড়ান। আজই আপনার কোডিং যাত্রা শুরু করুন! -[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) - -# ওয়েব ডেভেলপমেন্ট ফর বিগিনার্স - একটি কারিকুলাম - -মাইক্রোসফট ক্লাউড অ্যাডভোকেটদের ১২ সপ্তাহের বিস্তৃত কোর্সের মাধ্যমে ওয়েব ডেভেলপমেন্টের মৌলিক বিষয়গুলো শিখুন। ২৪টি পাঠে জাভাস্ক্রিপ্ট, CSS এবং HTML নিয়ে কাজ করা প্রকল্পের মাধ্যমে শেখানো হয়, যেমন টেরারিয়াম, ব্রাউজার এক্সটেনশন এবং স্পেস গেম। কুইজ, আলোচনা এবং ব্যবহারিক অ্যাসাইনমেন্টের মাধ্যমে অংশগ্রহণ করুন। আমাদের কার্যকর প্রকল্প-ভিত্তিক শিক্ষাদানের মাধ্যমে আপনার দক্ষতা বৃদ্ধি করুন এবং জ্ঞান ধরে রাখার ক্ষমতা উন্নত করুন। আজই আপনার কোডিং যাত্রা শুরু করুন! - -আজুর এআই ফাউন্ড্রি ডিসকর্ড কমিউনিটিতে যোগ দিন +Azure AI Foundry Discord কমিউনিটিতে যোগ দিন -[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) - -এই রিসোর্সগুলো ব্যবহার শুরু করতে নিচের ধাপগুলো অনুসরণ করুন: -1. **রিপোজিটরি ফর্ক করুন**: ক্লিক করুন [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **রিপোজিটরি ক্লোন করুন**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**আজুর এআই ফাউন্ড্রি ডিসকর্ডে যোগ দিন এবং বিশেষজ্ঞ ও অন্যান্য ডেভেলপারদের সাথে পরিচিত হন**](https://discord.com/invite/ByRwuEEgH4) +নিম্নলিখিত ধাপগুলি অনুসরণ করে এই সম্পদগুলি ব্যবহার শুরু করুন: +1. **রিপোজিটোরি ফর্ক করুন**: ক্লিক করুন [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **রিপোজিটোরি ক্লোন করুন**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Azure AI Foundry Discord এ যোগ দিন এবং বিশেষজ্ঞ ও অন্যান্য ডেভেলপারদের সাথে যোগাযোগ করুন**](https://discord.com/invite/ByRwuEEgH4) -### 🌐 বহু-ভাষার সমর্থন +### 🌐 বহুভাষিক সহায়তা -#### GitHub Action এর মাধ্যমে সমর্থিত (স্বয়ংক্রিয় এবং সর্বদা আপডেটেড) +#### GitHub Action দ্বারা সমর্থিত (স্বয়ংক্রিয় এবং সর্বদা আপ-টু-ডেট) - -[Arabic](../ar/README.md) | [Bengali](./README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) - +> **স্থানীয়ভাবে ক্লোন করতে চান?** -**যদি আপনি অতিরিক্ত ভাষার অনুবাদ চান, সমর্থিত ভাষার তালিকা [এখানে](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) দেওয়া আছে।** +> এই রিপোজিটরিতে ৫০+ ভাষার অনুবাদ রয়েছে যা ডাউনলোড আকার উল্লেখযোগ্য মাত্রায় বৃদ্ধি করে। অনুবাদ ছাড়া ক্লোন করতে, sparse checkout ব্যবহার করুন: +> ```bash +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' +> ``` + +> এটি আপনাকে কোর্স সম্পন্ন করার জন্য সবকিছু দ্রুত ডাউনলোড করার সুবিধা দেবে। -[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +**আরও অনুবাদ ভাষা সমর্থন করতে চান? সেগুলি [এখানে](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) তালিকাভুক্ত।** -#### 🧑‍🎓 _আপনি কি একজন শিক্ষার্থী?_ +#### 🧑‍🎓 _আপনি কি একজন ছাত্র?_ -[**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) পরিদর্শন করুন যেখানে আপনি শিক্ষার্থীদের জন্য রিসোর্স, স্টুডেন্ট প্যাক এবং এমনকি বিনামূল্যে সার্টিফিকেট ভাউচার পাওয়ার উপায় খুঁজে পাবেন। এটি এমন একটি পৃষ্ঠা যা আপনি বুকমার্ক করতে পারেন এবং মাসিকভাবে নতুন কন্টেন্টের জন্য চেক করতে পারেন। +[**স্টুডেন্ট হাব পেজে**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) যান যেখানে আপনি শুরু করার জন্য রিসোর্স, স্টুডেন্ট প্যাক এবং এমনকি ফ্রি সার্টিফিকেট ভাউচারের সুযোগ পাবেন। এটি সেই পাতা যা আপনি বুকমার্ক করে মাঝে মাঝে দেখতে চাইবেন কারণ আমরা প্রতি মাসে বিষয়বস্তু পরিবর্তন করি। -### 📣 ঘোষণা - নতুন GitHub Copilot Agent মোড চ্যালেঞ্জ সম্পন্ন করুন! +### 📣 ঘোষণা - নতুন GitHub Copilot Agent মোড চ্যালেঞ্জ সম্পন্ন করার জন্য! -নতুন চ্যালেঞ্জ যোগ করা হয়েছে, "GitHub Copilot Agent Challenge 🚀" খুঁজুন বেশিরভাগ অধ্যায়ে। এটি একটি নতুন চ্যালেঞ্জ যা আপনি GitHub Copilot এবং Agent মোড ব্যবহার করে সম্পন্ন করতে পারেন। যদি আপনি আগে Agent মোড ব্যবহার না করে থাকেন, এটি শুধু টেক্সট তৈরি করাই নয়, ফাইল তৈরি ও সম্পাদনা, কমান্ড চালানো এবং আরও অনেক কিছু করতে সক্ষম। +নতুন চ্যালেঞ্জ যুক্ত হয়েছে, বেশিরভাগ অধ্যায়ে "GitHub Copilot Agent Challenge 🚀" অনুসন্ধান করুন। এটি GitHub Copilot এবং Agent মোড ব্যবহার করে সম্পন্ন করার জন্য আপনার একটি নতুন চ্যালেঞ্জ। যদি আগে কখনো Agent মোড ব্যবহার না করে থাকেন, এটি শুধু টেক্সট তৈরি করেনা, এমনকি ফাইল তৈরি ও সম্পাদনা, কমান্ড চালানো ইত্যাদিও করতে পারে। -### 📣 ঘোষণা - _Generative AI ব্যবহার করে নতুন প্রকল্প তৈরি করুন_ +### 📣 ঘোষণা - _Generative AI ব্যবহার করে নতুন প্রজেক্ট তৈরি করুন_ -নতুন AI Assistant প্রকল্প যোগ করা হয়েছে, এটি দেখুন [project](./09-chat-project/README.md) +নতুন AI Assistant প্রজেক্ট যুক্ত হয়েছে, দেখুন [প্রকল্প](./9-chat-project/README.md) -### 📣 ঘোষণা - _Generative AI এর জন্য নতুন কারিকুলাম_ জাভাস্ক্রিপ্টে প্রকাশিত হয়েছে +### 📣 ঘোষণা - _Generative AI এর জন্য নতুন পাঠক্রম_ সম্প্রতি প্রকাশিত -আমাদের নতুন Generative AI কারিকুলাম মিস করবেন না! +আমাদের নতুন Generative AI পাঠক্রম মিস করবেন না! -শুরু করতে [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) পরিদর্শন করুন! +শুরু করতে ভিজিট করুন [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)! -![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.bn.png) +![Background](../../translated_images/background.148a8d43afde5730.bn.png) -- বেসিক থেকে RAG পর্যন্ত সবকিছু নিয়ে পাঠ। -- GenAI এবং আমাদের সঙ্গী অ্যাপ ব্যবহার করে ঐতিহাসিক চরিত্রের সাথে যোগাযোগ করুন। -- মজাদার এবং আকর্ষণীয় গল্প, আপনি সময় ভ্রমণ করবেন! +- বেসিক থেকে শুরু করে RAG পর্যন্ত সবকিছু শেখানো হয়। +- GenAI এবং আমাদের কম্প্যানিয়ন অ্যাপ ব্যবহার করে ঐতিহাসিক চরিত্রদের সাথে ইন্টারঅ্যাক্ট করুন। +- মজাদার এবং আকর্ষণীয় কাহিনি, আপনাকে সময়ে ভ্রমণ করানো হবে! -![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.bn.png) +![character](../../translated_images/character.5c0dd8e067ffd693.bn.png) -প্রতিটি পাঠে একটি অ্যাসাইনমেন্ট, একটি জ্ঞান যাচাই এবং একটি চ্যালেঞ্জ অন্তর্ভুক্ত থাকে যা আপনাকে শেখার বিষয়গুলোতে গাইড করবে: -- প্রম্পটিং এবং প্রম্পট ইঞ্জিনিয়ারিং +প্রতিটি পাঠে একটি কাজ, জ্ঞানের পরীক্ষা এবং একটি চ্যালেঞ্জ থাকে, যা আপনাকে নিম্নলিখিত বিষয় শিখতে সাহায্য করবে: +- প্রম্পটিং এবং প্রম্পট ইঞ্জিনিয়ারিং - টেক্সট এবং ইমেজ অ্যাপ জেনারেশন - সার্চ অ্যাপস -শুরু করতে [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) পরিদর্শন করুন! - - +শুরু করতে ভিজিট করুন [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)! ## 🌱 শুরু করা -> **শিক্ষকগণ**, আমরা [কিছু পরামর্শ](for-teachers.md) অন্তর্ভুক্ত করেছি এই কারিকুলাম কীভাবে ব্যবহার করবেন। আমাদের [আলোচনা ফোরামে](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) আপনার মতামত জানাতে ভালো লাগবে! +> **শিক্ষকবৃন্দ**, আমরা এই পাঠক্রমটি কীভাবে ব্যবহার করবেন তার জন্য কিছু পরামর্শ [এখানে](for-teachers.md) দিয়েছি। আপনার মতামত আমাদের [আলোচনা ফোরামে](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) দিতে দয়া করে ভুলবেন না! -**[শিক্ষার্থীরা](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, প্রতিটি পাঠের জন্য, প্রি-লেকচার কুইজ দিয়ে শুরু করুন এবং লেকচার মেটেরিয়াল পড়ুন, বিভিন্ন কার্যক্রম সম্পন্ন করুন এবং পোস্ট-লেকচার কুইজ দিয়ে আপনার জ্ঞান যাচাই করুন। +**[শিক্ষার্থীগণ](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, প্রতিটি পাঠের জন্য, একটি প্রাক-লেকচার কুইজ থেকে শুরু করুন এবং তারপর লেকচার পঠন, বিভিন্ন কার্যাবলী সম্পন্ন করুন এবং পোস্ট-লেকচার কুইজ দিয়ে আপনার বুঝ বজায় আছে কিনা পরীক্ষা করুন। -আপনার শেখার অভিজ্ঞতা উন্নত করতে, আপনার সহপাঠীদের সাথে প্রকল্পগুলোতে কাজ করুন! আমাদের [আলোচনা ফোরামে](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) আলোচনা উৎসাহিত করা হয় যেখানে আমাদের মডারেটর টিম আপনার প্রশ্নের উত্তর দিতে প্রস্তুত থাকবে। +আপনার শেখার অভিজ্ঞতাকে উন্নত করতে, আপনার সহপাঠীদের সাথে প্রকল্পে কাজ করতে সংযুক্ত হোন! আমাদের [আলোচনা ফোরামে](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) আলোচনাগুলো উৎসাহিত করা হয় যেখানে আমাদের মোডারেটর দল আপনার প্রশ্নের উত্তর দিতে প্রস্তুত থাকবে। -আপনার শিক্ষা আরও এগিয়ে নিতে, আমরা [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) পরিদর্শন করার জন্য অত্যন্ত সুপারিশ করি যেখানে অতিরিক্ত শিক্ষার উপকরণ পাওয়া যাবে। +আপনার শিক্ষাকে আরও সমৃদ্ধ করার জন্য, আমরা অতিরিক্ত পাঠ্যবস্তু পাওয়ার জন্য [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) অন্বেষণ করার পরামর্শ দিই। -### 📋 আপনার পরিবেশ সেট আপ করা +### 📋 পরিবেশ সেট আপ করা -এই কারিকুলামের জন্য একটি ডেভেলপমেন্ট পরিবেশ প্রস্তুত রয়েছে! শুরু করার সময় আপনি [Codespace](https://github.com/features/codespaces/) (_একটি ব্রাউজার-ভিত্তিক, কোনো ইনস্টল প্রয়োজন নেই পরিবেশ_) বা আপনার কম্পিউটারে লোকালভাবে একটি টেক্সট এডিটর যেমন [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ব্যবহার করতে পারেন। +এই পাঠক্রমের জন্য একটি ডেভেলপমেন্ট পরিবেশ প্রস্তুত রয়েছে! শুরু করার সময় আপনি এই পাঠক্রমটি চালাতে পারেন একটি [Codespace](https://github.com/features/codespaces/) (_একটি ব্রাউজার-ভিত্তিক, ইনস্টলেশনের প্রয়োজন নেই এমন পরিবেশ_) অথবা স্থানীয়ভাবে আপনার কম্পিউটারে [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) মত একটি টেক্সট এডিটর ব্যবহার করে। -#### আপনার রিপোজিটরি তৈরি করুন -আপনার কাজ সহজে সংরক্ষণ করার জন্য, আপনার নিজস্ব এই রিপোজিটরির একটি কপি তৈরি করার সুপারিশ করা হয়। আপনি পৃষ্ঠার শীর্ষে **Use this template** বোতামে ক্লিক করে এটি করতে পারেন। এটি আপনার GitHub অ্যাকাউন্টে কারিকুলামের একটি কপি সহ একটি নতুন রিপোজিটরি তৈরি করবে। +#### আপনার রিপোজিটোরি তৈরি করুন +আপনার কাজ সঞ্চয় সহজ করতে, এই রিপোজিটোরির একটি নিজস্ব কপি তৈরি করা সুপারিশ করা হয়। এটি করতে আপনি পাতার উপরের দিকে **Use this template** বোতামে ক্লিক করতে পারেন। এটি আপনার GitHub একাউন্টে পাঠক্রমের একটি কপি সহ একটি নতুন রিপোজিটোরি তৈরি করবে। -নিচের ধাপগুলো অনুসরণ করুন: -1. **রিপোজিটরি ফর্ক করুন**: এই পৃষ্ঠার উপরের ডানদিকে "Fork" বোতামে ক্লিক করুন। -2. **রিপোজিটরি ক্লোন করুন**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +নিম্ন ধাপগুলো অনুসরণ করুন: +1. **রিপোজিটোরি ফর্ক করুন**: এই পৃষ্ঠার ডানদিকে উপরের কোণে "Fork" বোতামে ক্লিক করুন। +2. **রিপোজিটোরি ক্লোন করুন**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Codespace-এ কারিকুলাম চালানো +#### Codespace এ পাঠক্রম চালানো -আপনার তৈরি করা এই রিপোজিটরির কপিতে, **Code** বোতামে ক্লিক করুন এবং **Open with Codespaces** নির্বাচন করুন। এটি আপনার কাজ করার জন্য একটি নতুন Codespace তৈরি করবে। +আপনি যে কপি তৈরি করেছেন সেখানে **Code** বোতামে ক্লিক করে **Open with Codespaces** নির্বাচন করুন। এটি আপনার জন্য একটি নতুন Codespace তৈরি করবে যেখানে আপনি কাজ করবেন। -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.bn.png) +![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.bn.png) -#### আপনার কম্পিউটারে লোকালভাবে কারিকুলাম চালানো +#### আপনার কম্পিউটারে লোকালি পাঠক্রম চালানো -আপনার কম্পিউটারে এই কারিকুলাম চালানোর জন্য, একটি টেক্সট এডিটর, একটি ব্রাউজার এবং একটি কমান্ড লাইন টুল প্রয়োজন হবে। আমাদের প্রথম পাঠ, [প্রোগ্রামিং ভাষা এবং টুলস অফ দ্য ট্রেডের পরিচিতি](../../1-getting-started-lessons/1-intro-to-programming-languages), আপনাকে এই টুলগুলোর বিভিন্ন বিকল্পের মাধ্যমে গাইড করবে যাতে আপনি আপনার জন্য সেরা বিকল্পটি বেছে নিতে পারেন। +এই পাঠক্রমটি লোকালি চালানোর জন্য আপনার টেক্সট এডিটর, একটি ব্রাউজার এবং একটি কমান্ড লাইন টুল প্রয়োজন হবে। আমাদের প্রথম পাঠ, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), আপনাকে বিভিন্ন টুল নির্বাচন করতে সহায়তা করবে যা আপনার জন্য সেরা কাজ করবে। -আমাদের সুপারিশ হলো [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ব্যবহার করা, যা একটি বিল্ট-ইন [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) সহ আসে। আপনি [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) এখান থেকে ডাউনলোড করতে পারেন। +আমরা সুপারিশ করি [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ব্যবহার করতে, যা একটি অন্তর্নির্মিত [টার্মিনাল](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) রয়েছে। আপনি Visual Studio Code [এখানে থেকে ডাউনলোড করতে পারেন](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)। -1. আপনার রিপোজিটরি আপনার কম্পিউটারে ক্লোন করুন। আপনি **Code** বোতামে ক্লিক করে URL কপি করে এটি করতে পারেন: +1. আপনার রিপোজিটোরি আপনার কম্পিউটারে ক্লোন করুন। এটি করতে **Code** বোতামে ক্লিক করে URL কপি করুন: [CodeSpace](./images/createcodespace.png) - - তারপর, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)-এর মধ্যে [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) খুলুন এবং নিচের কমান্ডটি চালান, যেখানে `` আপনার কপি করা URL দিয়ে প্রতিস্থাপন করুন: + তারপর, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) এর মধ্যে [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) খুলুন এবং নিচের কমান্ডটি চালান, `` এর জায়গায় আপনি যা URL কপি করেছেন তা বসান: ```bash git clone ``` -2. Visual Studio Code-এ ফোল্ডারটি খুলুন। আপনি **File** > **Open Folder**-এ ক্লিক করে এবং ক্লোন করা ফোল্ডারটি নির্বাচন করে এটি করতে পারেন। +2. Visual Studio Code-এ ফোল্ডারটি খুলুন। এটি করার জন্য, **File** > **Open Folder** ক্লিক করুন এবং আপনি যে ফোল্ডারটি ক্লোন করেছেন তা নির্বাচন করুন। + -> সুপারিশকৃত Visual Studio Code এক্সটেনশন: +> সুপারিশকৃত Visual Studio Code এক্সটেনশনসমূহ: > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code-এর মধ্যে HTML পৃষ্ঠাগুলো প্রিভিউ করার জন্য -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - কোড দ্রুত লিখতে সাহায্য করে +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code-এর মধ্যে HTML পেজ প্রিভিউ করার জন্য +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - দ্রুত কোড লেখাতে সাহায্যের জন্য -## 📂 প্রতিটি পাঠে অন্তর্ভুক্ত: +## 📂 প্রতিটি পাঠের মধ্যে রয়েছে: - ঐচ্ছিক স্কেচনোট -- ঐচ্ছিক সম্পূরক ভিডিও -- প্রাক-পাঠ উষ্ণতা কুইজ -- লিখিত পাঠ -- প্রকল্প-ভিত্তিক পাঠের জন্য, প্রকল্প তৈরি করার ধাপে ধাপে নির্দেশিকা +- ঐচ্ছিক অতিরিক্ত ভিডিও +- পাঠের আগের ওয়ার্মআপ কুইজ +- লিখিত লেশন +- প্রজেক্ট ভিত্তিক লেশনের জন্য প্রজেক্ট তৈরির ধাপে ধাপে নির্দেশিকা - জ্ঞান যাচাই - একটি চ্যালেঞ্জ -- সম্পূরক পাঠ্য +- অতিরিক্ত পড়াশোনা - অ্যাসাইনমেন্ট -- [পোস্ট-পাঠ কুইজ](https://ff-quizzes.netlify.app/web/) +- [পোস্ট-লেশন কুইজ](https://ff-quizzes.netlify.app/web/) -> **কুইজ সম্পর্কে একটি নোট**: সমস্ত কুইজ Quiz-app ফোল্ডারে অন্তর্ভুক্ত, মোট ৪৮টি কুইজ, প্রতিটিতে তিনটি প্রশ্ন। এগুলো [এখানে](https://ff-quizzes.netlify.app/web/) পাওয়া যাবে। Quiz-app লোকালভাবে চালানো বা Azure-এ ডিপ্লয় করা যেতে পারে; `quiz-app` ফোল্ডারের নির্দেশনা অনুসরণ করুন। +> **কুইজ সম্পর্কে একটি নোট**: সমস্ত কুইজ Quiz-app ফোল্ডারের মধ্যে রয়েছে, মোট ৪৮টি কুইজ যেগুলোর প্রতিটিতে তিনটি প্রশ্ন আছে। এগুলো উপলব্ধ [এখানে](https://ff-quizzes.netlify.app/web/); কুইজ অ্যাপটি লোকালি চালানো যায় অথবা Azure এ প্রকাশ করা যায়; বিস্তারিত নির্দেশনা `quiz-app` ফোল্ডারে রয়েছে। -## 🗃️ পাঠসমূহ +## 🗃️ লেশনসমূহ -| | প্রকল্পের নাম | শেখানো ধারণা | শেখার উদ্দেশ্য | লিঙ্কযুক্ত পাঠ | লেখক | +| | প্রকল্পের নাম | শিক্ষিত ধারণাসমূহ | শেখার উদ্দেশ্য | যুক্ত লশন | লেখক | | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | শুরু করা | প্রোগ্রামিং এবং টুলসের পরিচিতি | বেশিরভাগ প্রোগ্রামিং ভাষার মৌলিক ভিত্তি এবং পেশাদার ডেভেলপারদের কাজের জন্য সহায়ক সফটওয়্যার সম্পর্কে জানুন | [প্রোগ্রামিং ভাষা এবং টুলসের পরিচিতি](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | শুরু করা | GitHub-এর মৌলিক বিষয়, দল নিয়ে কাজ করা | আপনার প্রকল্পে GitHub কীভাবে ব্যবহার করবেন, কোড বেসে অন্যদের সাথে সহযোগিতা করবেন | [GitHub-এর পরিচিতি](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | শুরু করা | অ্যাক্সেসিবিলিটি | ওয়েব অ্যাক্সেসিবিলিটির মৌলিক বিষয়গুলি শিখুন | [অ্যাক্সেসিবিলিটির মৌলিক বিষয়](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS মৌলিক বিষয় | জাভাস্ক্রিপ্ট ডেটা টাইপ | জাভাস্ক্রিপ্ট ডেটা টাইপের মৌলিক বিষয়গুলি | [ডেটা টাইপ](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS মৌলিক বিষয় | ফাংশন এবং মেথড | অ্যাপ্লিকেশনের লজিক প্রবাহ পরিচালনা করতে ফাংশন এবং মেথড সম্পর্কে জানুন | [ফাংশন এবং মেথড](./2-js-basics/2-functions-methods/README.md) | Jasmine এবং Christopher | -| 06 | JS মৌলিক বিষয় | জাভাস্ক্রিপ্ট দিয়ে সিদ্ধান্ত নেওয়া | সিদ্ধান্ত নেওয়ার পদ্ধতি ব্যবহার করে আপনার কোডে শর্ত তৈরি করতে শিখুন | [সিদ্ধান্ত নেওয়া](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS মৌলিক বিষয় | অ্যারে এবং লুপ | জাভাস্ক্রিপ্টে অ্যারে এবং লুপ ব্যবহার করে ডেটা নিয়ে কাজ করুন | [অ্যারে এবং লুপ](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [টেরারিয়াম](./3-terrarium/solution/README.md) | HTML অনুশীলনে | একটি অনলাইন টেরারিয়াম তৈরি করতে HTML তৈরি করুন, লেআউট তৈরি করার উপর ফোকাস | [HTML-এর পরিচিতি](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [টেরারিয়াম](./3-terrarium/solution/README.md) | CSS অনুশীলনে | অনলাইন টেরারিয়াম স্টাইল করতে CSS তৈরি করুন, CSS-এর মৌলিক বিষয়গুলির উপর ফোকাস সহ পৃষ্ঠাকে রেসপন্সিভ করুন | [CSS-এর পরিচিতি](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [টেরারিয়াম](./3-terrarium/solution/README.md) | জাভাস্ক্রিপ্ট ক্লোজার, DOM ম্যানিপুলেশন | টেরারিয়ামকে একটি ড্র্যাগ/ড্রপ ইন্টারফেস হিসাবে কার্যকর করতে জাভাস্ক্রিপ্ট তৈরি করুন, ক্লোজার এবং DOM ম্যানিপুলেশনের উপর ফোকাস | [জাভাস্ক্রিপ্ট ক্লোজার, DOM ম্যানিপুলেশন](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [টাইপিং গেম](./4-typing-game/solution/README.md) | টাইপিং গেম তৈরি করুন | কীবোর্ড ইভেন্ট ব্যবহার করে আপনার জাভাস্ক্রিপ্ট অ্যাপের লজিক চালানোর পদ্ধতি শিখুন | [ইভেন্ট-চালিত প্রোগ্রামিং](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [গ্রিন ব্রাউজার এক্সটেনশন](./5-browser-extension/solution/README.md) | ব্রাউজার নিয়ে কাজ | ব্রাউজার কীভাবে কাজ করে, তাদের ইতিহাস এবং একটি ব্রাউজার এক্সটেনশনের প্রথম উপাদানগুলি তৈরি করার পদ্ধতি শিখুন | [ব্রাউজার সম্পর্কে](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [গ্রিন ব্রাউজার এক্সটেনশন](./5-browser-extension/solution/README.md) | একটি ফর্ম তৈরি করা, একটি API কল করা এবং লোকাল স্টোরেজে ভেরিয়েবল সংরক্ষণ করা | লোকাল স্টোরেজে সংরক্ষিত ভেরিয়েবল ব্যবহার করে একটি API কল করতে আপনার ব্রাউজার এক্সটেনশনের জাভাস্ক্রিপ্ট উপাদান তৈরি করুন | [API, ফর্ম এবং লোকাল স্টোরেজ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [গ্রিন ব্রাউজার এক্সটেনশন](./5-browser-extension/solution/README.md) | ব্রাউজারের ব্যাকগ্রাউন্ড প্রসেস, ওয়েব পারফরম্যান্স | এক্সটেনশনের আইকন পরিচালনা করতে ব্রাউজারের ব্যাকগ্রাউন্ড প্রসেস ব্যবহার করুন; ওয়েব পারফরম্যান্স এবং কিছু অপ্টিমাইজেশন সম্পর্কে জানুন | [ব্যাকগ্রাউন্ড টাস্ক এবং পারফরম্যান্স](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [স্পেস গেম](./6-space-game/solution/README.md) | জাভাস্ক্রিপ্ট দিয়ে আরও উন্নত গেম ডেভেলপমেন্ট | ক্লাস এবং কম্পোজিশন ব্যবহার করে ইনহেরিটেন্স এবং পাব/সাব প্যাটার্ন সম্পর্কে জানুন, একটি গেম তৈরি করার প্রস্তুতি হিসাবে | [উন্নত গেম ডেভেলপমেন্টের পরিচিতি](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [স্পেস গেম](./6-space-game/solution/README.md) | ক্যানভাসে আঁকা | ক্যানভাস API সম্পর্কে জানুন, যা স্ক্রিনে উপাদান আঁকতে ব্যবহৃত হয় | [ক্যানভাসে আঁকা](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [স্পেস গেম](./6-space-game/solution/README.md) | স্ক্রিনে উপাদান সরানো | কার্টেসিয়ান কোঅর্ডিনেট এবং ক্যানভাস API ব্যবহার করে উপাদান কীভাবে গতি অর্জন করতে পারে তা আবিষ্কার করুন | [উপাদান সরানো](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [স্পেস গেম](./6-space-game/solution/README.md) | সংঘর্ষ সনাক্তকরণ | কীপ্রেস ব্যবহার করে উপাদানগুলিকে একে অপরের সাথে সংঘর্ষ করতে এবং প্রতিক্রিয়া জানাতে তৈরি করুন এবং গেমের পারফরম্যান্স নিশ্চিত করতে একটি কুলডাউন ফাংশন প্রদান করুন | [সংঘর্ষ সনাক্তকরণ](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [স্পেস গেম](./6-space-game/solution/README.md) | স্কোর রাখা | গেমের অবস্থা এবং পারফরম্যান্সের উপর ভিত্তি করে গাণিতিক হিসাব করুন | [স্কোর রাখা](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [স্পেস গেম](./6-space-game/solution/README.md) | গেম শেষ করা এবং পুনরায় শুরু করা | গেম শেষ করা এবং পুনরায় শুরু করার পদ্ধতি শিখুন, যার মধ্যে অ্যাসেট পরিষ্কার করা এবং ভেরিয়েবল মান পুনরায় সেট করা অন্তর্ভুক্ত | [শেষ করার শর্ত](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | একটি ওয়েব অ্যাপে HTML টেমপ্লেট এবং রুট | রাউটিং এবং HTML টেমপ্লেট ব্যবহার করে একটি মাল্টিপেজ ওয়েবসাইটের আর্কিটেকচার তৈরি করার কাঠামো তৈরি করার পদ্ধতি শিখুন | [HTML টেমপ্লেট এবং রুট](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | একটি লগইন এবং রেজিস্ট্রেশন ফর্ম তৈরি করুন | ফর্ম তৈরি এবং ভ্যালিডেশন রুটিন পরিচালনা সম্পর্কে জানুন | [ফর্ম](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | ডেটা সংগ্রহ এবং ব্যবহারের পদ্ধতি | আপনার অ্যাপে ডেটা কীভাবে প্রবাহিত হয়, কীভাবে এটি সংগ্রহ করবেন, সংরক্ষণ করবেন এবং নিষ্পত্তি করবেন | [ডেটা](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | স্টেট ম্যানেজমেন্টের ধারণা | আপনার অ্যাপ কীভাবে স্টেট ধরে রাখে এবং কীভাবে এটি প্রোগ্রাম্যাটিকভাবে পরিচালনা করবেন তা শিখুন | [স্টেট ম্যানেজমেন্ট](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [ব্রাউজার/VScode কোড](../../8-code-editor) | VScode নিয়ে কাজ | কোড এডিটর ব্যবহার করা শিখুন| [VScode কোড এডিটর ব্যবহার করুন](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI অ্যাসিস্ট্যান্ট](./9-chat-project/README.md) | AI নিয়ে কাজ | নিজের AI অ্যাসিস্ট্যান্ট তৈরি করা শিখুন | [AI অ্যাসিস্ট্যান্ট প্রকল্প](./9-chat-project/README.md) | Chris | - -## 🏫 শিক্ষাদান পদ্ধতি - -আমাদের পাঠ্যক্রম দুটি মূল শিক্ষাদান নীতির উপর ভিত্তি করে তৈরি: -* প্রকল্প-ভিত্তিক শিক্ষা +| 01 | শুরু করা হচ্ছে | প্রোগ্রামিং এবং পেশাগত সরঞ্জাম পরিচিতি | বেশিরভাগ প্রোগ্রামিং ভাষার প্রাথমিক ভিত্তি এবং পেশাদার ডেভেলপারদের কাজে সাহায্যকারী সফটওয়্যার সম্বন্ধে শেখা | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | শুরু করা হচ্ছে | গিটহাবের বুনিয়াদি, দলের সাথে কাজ করার উপর | আপনার প্রকল্পে গিটহাব ব্যবহার করা এবং অন্যদের সাথে কোড বেসে সহযোগিতা করা শেখা | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | শুরু করা হচ্ছে | অঙ্গ পরিপAccessibility | ওয়েব অ্যাক্সেসিবিলিটির মূল বিষয়গুলি শেখা | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | জেএস বেসিকস | JavaScript ডেটা টাইপস | জাভাস্ক্রিপ্ট ডেটা টাইপের মূল বিষয়গুলি | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | জেএস বেসিকস | ফাংশনস এবং মেথডস | একটি অ্যাপ্লিকেশনের লজিক প্রবাহ পরিচালনার জন্য ফাংশন এবং মেথড সম্বন্ধে শেখা | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | +| 06 | জেএস বেসিকস | জেএস দিয়ে সিদ্ধান্ত নেওয়া | আপনার কোডে শর্ত তৈরি করার জন্য সিদ্ধান্ত গ্রহণ পদ্ধতি শেখা | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | জেএস বেসিকস | অ্যারে এবং লুপস | জাভাস্ক্রিপ্টে অ্যারে এবং লুপ ব্যবহার করে ডেটার সঙ্গে কাজ করা | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [টেরারিয়াম](./3-terrarium/solution/README.md) | বাস্তবে HTML | একটি অনলাইন টেরারিয়াম তৈরির জন্য HTML তৈরি করুন, লেআউট তৈরির উপর গুরুত্ব দিয়ে | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [টেরারিয়াম](./3-terrarium/solution/README.md) | বাস্তবে CSS | অনলাইন টেরারিয়ামের স্টাইল করার জন্য CSS তৈরি করুন, পেজকে রেস্পন্সিভ করার বুনিয়াদি সহ | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| ১০ | [টেরারিয়াম](./3-terrarium/solution/README.md) | JavaScript ক্লোজার, DOM ম্যানিপুলেশন | টেরারিয়ামকে ড্র্যাগ/ড্রপ ইন্টারফেস হিসেবে কাজ করানোর জন্য JavaScript তৈরি করুন, ক্লোজার এবং DOM ম্যানিপুলেশনের উপর গুরুত্ব দিন | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| ১১ | [টাইপিং গেম](./4-typing-game/solution/README.md) | টাইপিং গেম তৈরি করা | কীবোর্ড ইভেন্ট ব্যবহার করে জাভাস্ক্রিপ্ট অ্যাপের লজিক চালানো শেখা | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | +| ১২ | [গ্রিন ব্রাউজার এক্সটেনশন](./5-browser-extension/solution/README.md) | ব্রাউজার নিয়ে কাজ | ব্রাউজার কীভাবে কাজ করে, এর ইতিহাস, এবং ব্রাউজার এক্সটেনশনের প্রথম উপাদানগুলি স্ক্যাফল্ড করা শেখা | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | +| ১৩ | [গ্রিন ব্রাউজার এক্সটেনশন](./5-browser-extension/solution/README.md) | একটি ফর্ম তৈরি, API কল এবং লোকাল স্টোরেজে ভেরিয়েবল সংরক্ষণ | ব্রাউজার এক্সটেনশনের JavaScript উপাদান তৈরি করুন, লোকাল স্টোরেজে সংরক্ষিত ভেরিয়েবল ব্যবহার করে API কল করার জন্য | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| ১৪ | [গ্রিন ব্রাউজার এক্সটেনশন](./5-browser-extension/solution/README.md) | ব্রাউজারের ব্যাকগ্রাউন্ড প্রসেস, ওয়েব পারফরম্যান্স | এক্সটেনশনের আইকন পরিচালনার জন্য ব্রাউজারের ব্যাকগ্রাউন্ড প্রসেস ব্যবহার করুন; ওয়েব পারফর্মেন্স ও কিছু অপটিমাইজেশন সম্পর্কে জানুন | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| ১৫ | [স্পেস গেম](./6-space-game/solution/README.md) | আরো উন্নত গেম ডেভেলপমেন্ট জাভাস্ক্রিপ্ট দিয়ে | ক্লাস এবং কম্পোজিশন দিয়ে ইনহেরিটেন্স এবং পাব/সাব প্যাটার্ন সম্পর্কে শেখা, গেম তৈরি করার প্রস্তুতিতে | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | +| ১৬ | [স্পেস গেম](./6-space-game/solution/README.md) | ক্যানভাসে আঁকা | স্ক্রিনে উপাদান আঁকার জন্য ক্যানভাস API সম্বন্ধে শেখা | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| ১৭ | [স্পেস গেম](./6-space-game/solution/README.md) | স্ক্রিনের চারপাশে উপাদান সরানো | কিভাবে উপাদানগুলো Cartesian কোঅর্ডিনেট এবং ক্যানভাস API ব্যবহার করে গতি পায় তা আবিষ্কার করুন | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris | +| ১৮ | [স্পেস গেম](./6-space-game/solution/README.md) | সংঘর্ষ শনাক্তকরণ | কীপ্রেস ব্যবহার করে উপাদানগুলোকে একে অপরের সঙ্গে সংঘর্ষ করানো এবং পারফরম্যান্স নিশ্চিত করার জন্য কুলডাউন ফাংশন প্রদান করুন | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris | +| ১৯ | [স্পেস গেম](./6-space-game/solution/README.md) | স্কোর রাখা | গেমের অবস্থা এবং পারফরম্যান্সের উপর ভিত্তি করে গাণিতিক হিসাব করা | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris | +| ২০ | [স্পেস গেম](./6-space-game/solution/README.md) | গেম শেষ করা এবং পুনরায় শুরু | গেম শেষে এবং পুনরায় শুরু করার পদ্ধতি শেখা, অ্যাসেট পরিষ্কার করা এবং ভেরিয়েবল মান রিসেট করা | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris | +| ২১ | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | HTML টেমপ্লেট এবং ওয়েব অ্যাপে রুটিং | মাল্টিপেজ ওয়েবসাইট আর্কিটেকচারের স্ক্যাফল্ড তৈরি করা শেখা রাউটিং এবং HTML টেমপ্লেট ব্যবহার করে | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan | +| ২২ | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | লগইন এবং রেজিস্ট্রেশন ফর্ম তৈরি | ফর্ম তৈরি করা এবং ভ্যালিডেশন রুটিন হ্যান্ডেল করা শেখা | [Forms](./7-bank-project/2-forms/README.md) | Yohan | +| ২৩ | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | ডেটা সংগ্রহ এবং ব্যবহার করার পদ্ধতি | আপনার অ্যাপের ডেটা প্রবাহ, কিভাবে ফেচ, সংরক্ষণ এবং অপসারণ করতে হয় শেখা | [Data](./7-bank-project/3-data/README.md) | Yohan | +| ২৪ | [ব্যাংকিং অ্যাপ](./7-bank-project/solution/README.md) | স্টেট ম্যানেজমেন্ট ধারণা | আপনার অ্যাপ কীভাবে স্টেট ধরে রাখে এবং কীভাবে প্রোগ্রাম্যাটিক্যালি তা পরিচালনা করতে হয় শেখা | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | +| ২৫ | [Browser/VScode Code](../../8-code-editor) | VScode এর সাথে কাজ করা | কোড এডিটর ব্যবহার শেখা| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| ২৬ | [AI সহযোগী](./9-chat-project/README.md) | AI এর সাথে কাজ করা | নিজস্ব AI সহকারী তৈরি শেখা | [AI Assistant project](./9-chat-project/README.md) | Chris | + +## 🏫 শিক্ষা ব্যবস্থা + +আমাদের পাঠ্যক্রম দুইটি মূল শিক্ষামূলক নীতির উপর ভিত্তি করে তৈরি: +* প্রজেক্ট-ভিত্তিক শিক্ষা * ঘন ঘন কুইজ -এই প্রোগ্রামটি জাভাস্ক্রিপ্ট, HTML এবং CSS-এর মৌলিক বিষয়গুলি শেখায়, পাশাপাশি আজকের ওয়েব ডেভেলপারদের ব্যবহৃত সর্বশেষ টুল এবং কৌশলগুলি। শিক্ষার্থীরা টাইপিং গেম, ভার্চুয়াল টেরারিয়াম, পরিবেশবান্ধব ব্রাউজার এক্সটেনশন, স্পেস-ইনভেডার-স্টাইল গেম এবং ব্যবসার জন্য একটি ব্যাংকিং অ্যাপ তৈরি করে হাতে-কলমে অভিজ্ঞতা অর্জনের সুযোগ পাবে। সিরিজের শেষে, শিক্ষার্থীরা ওয়েব ডেভেলপমেন্ট সম্পর্কে একটি শক্তিশালী ধারণা অর্জন করবে। +প্রোগ্রামটি JavaScript, HTML, এবং CSS এর মৌলিক বিষয়গুলি শেখায়, পাশাপাশি বর্তমান ওয়েব ডেভেলপারদের দ্বারা ব্যবহৃত সর্বশেষ সরঞ্জাম এবং প্রযুক্তিগুলি। শিক্ষার্থীরা টাইপিং গেম, ভার্চুয়াল টেরারিয়াম, পরিবেশবান্ধব ব্রাউজার এক্সটেনশন, স্পেস-ইনভেডার-শৈলী গেম এবং ব্যবসায়ের জন্য একটি ব্যাংকিং অ্যাপ তৈরি করে হাতে কলমে অভিজ্ঞতা অর্জন করবে। সিরিজের শেষে, শিক্ষার্থীরা ওয়েব ডেভেলপমেন্টের একটি দৃঢ় ধারণা অর্জন করবে। -> 🎓 আপনি এই পাঠ্যক্রমের প্রথম কয়েকটি পাঠ [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) হিসেবে Microsoft Learn-এ নিতে পারেন! +> 🎓 আপনি এই পাঠ্যক্রমের প্রথম কয়েকটি লেশন Microsoft Learn-এ [শিখন পথ](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) হিসাবে নিতে পারেন! -প্রকল্পের সাথে সামঞ্জস্য রেখে বিষয়বস্তু নিশ্চিত করার মাধ্যমে শিক্ষার্থীদের জন্য প্রক্রিয়াটি আরও আকর্ষণীয় করা হয়েছে এবং ধারণার ধারণক্ষমতা বৃদ্ধি পাবে। আমরা জাভাস্ক্রিপ্টের মৌলিক বিষয়গুলি পরিচিত করার জন্য কয়েকটি স্টার্টার পাঠ লিখেছি, যা "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ভিডিও টিউটোরিয়াল সংগ্রহের একটি ভিডিওর সাথে যুক্ত, যার কিছু লেখক এই পাঠ্যক্রমে অবদান রেখেছেন। +বিষয়বস্তুকে প্রজেক্টের সাথে মিলিয়ে শিক্ষার্থীদের জন্য এই প্রক্রিয়াটি আরও আকর্ষণীয় ও ধারণার ধারণক্ষমতা বৃদ্ধি করে। আমরা জাভাস্ক্রিপ্টের মৌলিক বিষয়গুলি পরিচিত করার জন্য কয়েকটি স্টার্টার লেশন লিখেছি, যা "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ভিডিও টিউটোরিয়াল সিরিজের ভিডিওতে সাথে সংযুক্ত, যার কিছু লেখক এই পাঠ্যক্রমে অবদান রেখেছেন। -এছাড়াও, একটি ক্লাসের আগে একটি কম ঝুঁকির কুইজ শিক্ষার্থীর একটি বিষয় শেখার উদ্দেশ্য নির্ধারণ করে, যখন ক্লাসের পরে একটি দ্বিতীয় কুইজ আরও ধারণক্ষমতা নিশ্চিত করে। এই পাঠ্যক্রমটি নমনীয় এবং মজাদার হতে ডিজাইন করা হয়েছে এবং সম্পূর্ণ বা আংশিকভাবে নেওয়া যেতে পারে। প্রকল্পগুলি ছোট থেকে শুরু হয় এবং ১২-সপ্তাহের চক্রের শেষে ক্রমশ জটিল হয়ে ওঠে। +এছাড়া, ক্লাসের আগে একটি হালকা কুইজ শিক্ষার্থীদের শেখার মনোভাব গড়ে তোলে, এবং ক্লাসের পরে দ্বিতীয় কুইজ আরো ধরে রাখার নিশ্চয়তা দেয়। এই পাঠ্যক্রমটি নমনীয় এবং মজাদার হওয়ার জন্য ডিজাইন করা হয়েছে এবং সম্পূর্ণ বা আংশিক গ্রহণ করা যেতে পারে। প্রজেক্টগুলো ছোট থেকে শুরু হয়ে ১২-সপ্তাহের চক্রের শেষে ক্রমবর্ধমান জটিল হয়ে ওঠে। -যদিও আমরা জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি পরিচয় করানোর বিষয়টি এড়িয়ে গেছি, ওয়েব ডেভেলপার হিসাবে একটি ফ্রেমওয়ার্ক গ্রহণ করার আগে প্রয়োজনীয় মৌলিক দক্ষতার উপর মনোযোগ কেন্দ্রীভূত করতে, এই পাঠ্যক্রমটি সম্পন্ন করার একটি ভাল পরবর্তী পদক্ষেপ হবে Node.js সম্পর্কে শেখা, একটি ভিডিও সংগ্রহের মাধ্যমে: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"। +আমরা সচেতনভাবে জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক পরিচয় করানো এড়িয়ে গেছি যাতে একজন ওয়েব ডেভেলপার হওয়ার জন্য প্রাথমিক দক্ষতায় মনোযোগ দেয়া যায়, এবং এই পাঠ্যক্রম সম্পূর্ণ করার পর পরবর্তী ভালো ধাপ হবে Node.js শেখা যা আরেকটি ভিডিও সিরিজ "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" দ্বারা করা যেতে পারে। -> আমাদের [Code of Conduct](CODE_OF_CONDUCT.md) এবং [Contributing](CONTRIBUTING.md) নির্দেশিকা দেখুন। আমরা আপনার গঠনমূলক মতামতকে স্বাগত জানাই! +> আমাদের [আচার-আচরণ সংক্রান্ত নির্দেশিকা](CODE_OF_CONDUCT.md) এবং [অবদান সংক্রান্ত নির্দেশিকা](CONTRIBUTING.md) ভিজিট করুন। আমরা আপনার গঠনমূলক প্রতিক্রিয়াকে স্বাগত জানাই! -## 🧭 অফলাইন অ্যাক্সেস +## 🧭 অফলাইনে প্রবেশাধিকার -আপনি [Docsify](https://docsify.js.org/#/) ব্যবহার করে এই ডকুমেন্টেশনটি অফলাইনে চালাতে পারেন। এই রিপোটি ফর্ক করুন, আপনার লোকাল মেশিনে [Docsify ইনস্টল করুন](https://docsify.js.org/#/quickstart), এবং তারপর এই রিপোর রুট ফোল্ডারে `docsify serve` টাইপ করুন। ওয়েবসাইটটি আপনার লোকালহোস্টে পোর্ট ৩০০০-এ পরিবেশন করা হবে: `localhost:3000`। +[Docsify](https://docsify.js.org/#/) ব্যবহার করে আপনি এই ডকুমেন্টেশন অফলাইনে চালাতে পারেন। এই রিপোটি ফরক করুন, আপনার লোকাল মেশিনে [Docsify ইনস্টল করুন](https://docsify.js.org/#/quickstart), তারপর এই রিপোর মূল ফোল্ডারে গিয়ে `docsify serve` টাইপ করুন। ওয়েবসাইটটি আপনার লোকালহোস্টে পোর্ট ৩০০০ এ সার্ভ হবে: `localhost:3000`। ## 📘 PDF -সমস্ত পাঠের একটি PDF [এখানে](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) পাওয়া যাবে। +সমস্ত লেশনের একটি PDF [এখানে](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) পাওয়া যাবে। -## 🎒 অন্যান্য কোর্স +## 🎒 অন্যান্য কোর্সসমূহ +আমাদের দল অন্যান্য কোর্সও তৈরি করে! দেখুন: -আমাদের দল অন্যান্য কোর্স তৈরি করে! দেখুন: + +### LangChain +[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) +[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) + +--- ### Azure / Edge / MCP / Agents [![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) -[![এজ এআই ফর বিগিনারস](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![এমসিপি ফর বিগিনারস](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) -[![এআই এজেন্টস ফর বিগিনারস](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) +[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- - -### জেনারেটিভ এআই সিরিজ -[![জেনারেটিভ এআই ফর বিগিনারস](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![জেনারেটিভ এআই (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) -[![জেনারেটিভ এআই (জাভা)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) -[![জেনারেটিভ এআই (জাভাস্ক্রিপ্ট)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) + +### Generative AI Series +[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) +[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) +[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) --- - -### মূল শিক্ষামূলক কোর্স -[![এমএল ফর বিগিনারস](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) -[![ডেটা সায়েন্স ফর বিগিনারস](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) -[![এআই ফর বিগিনারস](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) -[![সাইবারসিকিউরিটি ফর বিগিনারস](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) -[![ওয়েব ডেভেলপমেন্ট ফর বিগিনারস](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) -[![আইওটি ফর বিগিনারস](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) -[![এক্সআর ডেভেলপমেন্ট ফর বিগিনারস](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) + +### Core Learning +[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) +[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) +[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) +[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) +[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) +[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) +[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) --- + +### Copilot Series +[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) +[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) +[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) + -### কোপাইলট সিরিজ -[![কোপাইলট ফর এআই পেয়ারড প্রোগ্রামিং](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) -[![কোপাইলট ফর C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) -[![কোপাইলট অ্যাডভেঞ্চার](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) +## সাহায্য নেওয়া -## সাহায্য পাওয়া +যদি আপনি আটকে যান বা AI অ্যাপ্লিকেশন তৈরি করার বিষয়ে কোনও প্রশ্ন থাকে, তাহলে MCP সম্পর্কিত আলোচনায় অন্যান্য শিক্ষার্থী এবং অভিজ্ঞ ডেভেলপারদের সঙ্গে যোগ দিন। এটি একটি সহায়ক সম্প্রদায় যেখানে প্রশ্নের স্বাগত এবং জ্ঞান বিনামূল্যে ভাগ করা হয়। -যদি আপনি আটকে যান বা এআই অ্যাপ তৈরি করার বিষয়ে কোনো প্রশ্ন থাকে, এমসিপি নিয়ে আলোচনা করতে অন্যান্য শিক্ষার্থী এবং অভিজ্ঞ ডেভেলপারদের সাথে যোগ দিন। এটি একটি সহায়ক কমিউনিটি যেখানে প্রশ্ন করা স্বাগত এবং জ্ঞান বিনামূল্যে ভাগ করা হয়। - -[![মাইক্রোসফট ফাউন্ড্রি ডিসকর্ড](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -যদি কোনো পণ্য সম্পর্কিত মতামত বা ত্রুটি থাকে, তাহলে এখানে যান: +আপনার যদি প্রোডাক্ট ফিডব্যাক বা কোনও ত্রুটি থেকে থাকে, তাহলে যান: -[![মাইক্রোসফট ফাউন্ড্রি ডেভেলপার ফোরাম](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) +[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) -## লাইসেন্স +## লাইসেন্স -এই রিপোজিটরি MIT লাইসেন্সের অধীনে লাইসেন্সকৃত। আরও তথ্যের জন্য [LICENSE](../../LICENSE) ফাইলটি দেখুন। +এই রিপোজিটরিটি MIT লাইসেন্সের অধীনে লাইসেন্সভুক্ত। আরও তথ্যের জন্য [LICENSE](../../LICENSE) ফাইলটি দেখুন। --- -**অস্বীকৃতি**: -এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিক অনুবাদের চেষ্টা করি, তবে দয়া করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। নথিটির মূল ভাষায় থাকা সংস্করণটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে সৃষ্ট কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যার জন্য আমরা দায়ী নই। +**ডিসক্লেইমার**: +এই নথিটি AI অনুবাদ সেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনূদিত হয়েছে। আমরা সঠিকতার জন্য চেষ্টা করি, তবে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল নথিটি তার নিজস্ব ভাষায় প্রামাণিক উৎস হিসেবে বিবেচনা করতে হবে। গুরুত্বপূর্ণ তথ্যের জন্য পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদের ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যার জন্য আমরা দায়বদ্ধ নই। \ No newline at end of file diff --git a/translations/bn/for-teachers.md b/translations/bn/for-teachers.md index 35c407d9e..a001dcef3 100644 --- a/translations/bn/for-teachers.md +++ b/translations/bn/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - Moodle Cloud-এ Common Cartridge সমর্থন সীমিত। উপরের Moodle ফাইলটি পছন্দ করুন, যা Canvas-এও আপলোড করা যেতে পারে। - আমদানির পরে, আপনার টার্ম শিডিউলের সাথে মডিউল, ডিউ তারিখ এবং কুইজ সেটিংস পর্যালোচনা করুন। -![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.bn.png) +![Moodle](../../translated_images/moodle.94eb93d714a50cb2.bn.png) > Moodle ক্লাসরুমে পাঠ্যক্রম -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.bn.png) +![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.bn.png) > Canvas-এ পাঠ্যক্রম ### সরাসরি রিপোজিটরি ব্যবহার করুন (ক্লাসরুম ছাড়া) diff --git a/translations/hi/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/hi/1-getting-started-lessons/1-intro-to-programming-languages/README.md index d72592737..8f8061e8d 100644 --- a/translations/hi/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/hi/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,64 +1,247 @@ -# प्रोग्रामिंग भाषाओं और उपयोगी उपकरणों का परिचय +# प्रोग्रामिंग भाषाओं और आधुनिक डेवलपर टूल्स का परिचय + +नमस्ते, भविष्य के डेवलपर! 👋 क्या मैं आपको कुछ ऐसा बता सकता हूँ जो मुझे हर दिन रोमांचित कर देता है? आप अभी यह खोजने वाले हैं कि प्रोग्रामिंग केवल कंप्यूटर के बारे में नहीं है – यह आपकी सबसे अविश्वसनीय कल्पनाओं को जीवन में लाने की वास्तविक सुपरपावर है! + +आप जानते हैं वह पल जब आप अपने पसंदीदा ऐप का उपयोग कर रहे होते हैं और सब कुछ बिल्कुल सही ढंग से मेल खाता है? जब आप एक बटन दबाते हैं और कुछ बिल्कुल जादुई होता है जो आपको "वाह, उन्होंने यह कैसे किया?" कहने पर मजबूर कर देता है? खैर, कोई आप जैसे ही – शायद अपनी पसंदीदा कॉफी शॉप में 2 बजे अपनी तीसरी एस्प्रेसो के साथ बैठा – वह कोड लिखता है जिसने वह जादू बनाए। और यहाँ जो आपकी सोच को हिला देगा: इस पाठ के अंत तक, आप न केवल यह समझेंगे कि उन्होंने इसे कैसे किया, बल्कि आप खुद भी इसे आजमाने के लिए उत्सुक होंगे! + +देखिए, मुझे पूरी तरह से समझ आता है अगर प्रोग्रामिंग अभी डरावना लग रहा हो। जब मैंने पहली बार शुरू किया था, तो मुझे सच में लगा था कि आपको कोई गणित का जीनियस होना चाहिए या पाँच साल की उम्र से कोडिंग कर रहे होना चाहिए। लेकिन यहाँ वह चीज़ है जिसने मेरी सोच पूरी तरह बदल दी: प्रोग्रामिंग बिल्कुल वैसी ही है जैसी एक नई भाषा में बातचीत सीखना। आप "नमस्ते" और "धन्यवाद" से शुरू करते हैं, फिर कॉफी ऑर्डर करने तक पहुँचते हैं, और फिर पता चलता है कि आप गहरे दार्शनिक वार्तालाप कर रहे हैं! बस इस मामले में, आप कंप्यूटरों से बातचीत कर रहे हैं, और ईमानदारी से? वे सबसे धैर्यशील बातचीत साथी हैं जिन्हें आपने कभी देखा होगा – वे कभी आपकी गलतियों का जज नहीं करते और हमेशा फिर से कोशिश करने के लिए उत्साहित रहते हैं! + +आज, हम उन अद्भुत उपकरणों का अन्वेषण करने वाले हैं जो आधुनिक वेब विकास को न केवल संभव बनाते हैं, बल्कि अत्यधिक मजेदार भी। मैं बात कर रहा हूँ बिलकुल उन्हीं संपादकों, ब्राउज़रों, और वर्कफ़्लोज़ की जो नेटफ्लिक्स, स्पॉटिफाई, और आपके पसंदीदा इंडी ऐप स्टूडियो के डेवलपर हर दिन उपयोग करते हैं। और यहाँ वह हिस्सा है जो आपको खुश नाचने पर मजबूर कर देगा: इनमें से अधिकांश पेशेवर-ग्रेड, उद्योग-मानक उपकरण पूरी तरह से मुफ्त हैं! + +![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.hi.png) +> स्केचक नोट द्वारा [Tomomi Imura](https://twitter.com/girlie_mac) + +```mermaid +journey + title आपका प्रोग्रामिंग यात्रा आज + section खोजें + प्रोग्रामिंग क्या है: 5: You + प्रोग्रामिंग भाषाएँ: 4: You + टूल्स अवलोकन: 5: You + section अन्वेषण करें + कोड संपादक: 4: You + ब्राउज़र और देवटूल्स: 5: You + कमांड लाइन: 3: You + section अभ्यास + भाषा जासूस: 4: You + टूल अन्वेषण: 5: You + समुदाय संपर्क: 5: You +``` +## आईए देखें आप क्या पहले से जानते हैं! + +मज़ेदार चीज़ों में कूदने से पहले, मैं जानना चाहता हूँ – आप इस प्रोग्रामिंग दुनिया के बारे में पहले से क्या जानते हैं? और सुनिए, अगर आप इन सवालों को देखकर सोच रहे हैं "मुझे इस बारे में बिल्कुल भी जानकारी नहीं है," तो यह ठीक है, यह परफेक्ट है! इसका मतलब है कि आप बिल्कुल सही जगह पर हैं। इस क्विज़ को सोचिए जैसे व्यायाम से पहले स्ट्रेचिंग – हम बस अपने दिमाग़ की मांसपेशियों को गर्म कर रहे हैं! + +[प्री-लेसन क्विज़ लें](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) + + +## हमारी जो यात्रा हम साथ में शुरू करने वाले हैं -यह पाठ प्रोग्रामिंग भाषाओं की मूल बातें कवर करता है। यहां शामिल विषय आज की अधिकांश आधुनिक प्रोग्रामिंग भाषाओं पर लागू होते हैं। 'उपयोगी उपकरण' अनुभाग में, आप उन सॉफ़्टवेयर के बारे में जानेंगे जो एक डेवलपर के रूप में आपके लिए मददगार हैं। +ठीक है, मैं सच में उत्साहित हूँ कि हम आज क्या एक्सप्लोर करने वाले हैं! सच में, काश मैं आपकी प्रतिक्रिया देख पाता जब कुछ कॉन्सेप्ट्स समझ में आते हैं। यहाँ वह अद्भुत यात्रा है जो हम साथ में कर रहे हैं: -![प्रोग्रामिंग परिचय](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.hi.png) -> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा +- **प्रोग्रामिंग असल में क्या है (और यह क्यों सबसे कूल चीज़ है!)** – हम जानेंगे कि कोड वह अदृश्य जादू है जो आपके चारों ओर सब कुछ संचालित करता है, उस अलार्म से जो किसी तरह से पता लगा लेता है कि सोमवार सुबह है, उस एल्गोरिद्म तक जो बिल्कुल सही तरीके से आपकी नेटफ्लिक्स सिफारिशें चुनता है +- **प्रोग्रामिंग भाषाएँ और उनकी अद्भुत विशेषताएँ** – कल्पना करें कि आप किसी पार्टी में गए जहां हर व्यक्ति के पास पूरी तरह अलग सुपरपावर होते हैं और समस्याओं को हल करने के अलग तरीके होते हैं। यही प्रोग्रामिंग भाषाओं की दुनिया है, और आप उनसे मिलकर प्यार कर लेंगे! +- **मूलभूत बिल्डिंग ब्लॉक्स जो डिजिटल जादू संभव बनाते हैं** – इन्हें ऐसे समझिए जैसे सबसे बेहतरीन क्रिएटिव LEGO सेट। एक बार जब आप समझ जाएंगे कि ये टुकड़े कैसे फिट होते हैं, तो आप कल्पना कर सकते हैं कि आप सच में कुछ भी बना सकते हैं +- **पेशेवर उपकरण जो आपको जादूगर की छड़ी थमाए जाने जैसा महसूस कराएंगे** – मैं बढ़ा-चढ़ा कर नहीं कह रहा हूं – ये उपकरण आपको सच में सुपरपावर जैसा महसूस कराएंगे, और सबसे अच्छी बात? ये वही उपकरण हैं जिनका प्रोफेशनल्स इस्तेमाल करते हैं! -## प्री-लेक्चर क्विज़ -[प्री-लेक्चर क्विज़](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +> 💡 **एक बात:** आज सब कुछ याद करने की कोशिश बिल्कुल मत कीजिए! अभी मैं चाहता हूँ कि आप इस संभावना की जोशिलीय आगे बढ़ने की भावना महसूस करें। विवरण स्वाभाविक रूप से तब याद रहेंगे जब हम साथ अभ्यास करेंगे – यही असली सीखने का तरीका है! -## परिचय +> आप इस पाठ को [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) पर भी ले सकते हैं! -इस पाठ में हम कवर करेंगे: +## तो प्रोग्रामिंग *क्या* है असल में? -- प्रोग्रामिंग क्या है? -- प्रोग्रामिंग भाषाओं के प्रकार -- प्रोग्राम के मूल तत्व -- पेशेवर डेवलपर के लिए उपयोगी सॉफ़्टवेयर और उपकरण +ठीक है, आईए उस करोड़ों डॉलर के सवाल पर बात करें: प्रोग्रामिंग वास्तव में क्या है? -> आप इस पाठ को [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) पर ले सकते हैं! +मैं आपको एक कहानी देता हूँ जिसने मेरी सोच पूरी तरह बदल दी। पिछले हफ्ते, मैं अपनी माँ को समझाने की कोशिश कर रहा था कि हमारे नए स्मार्ट टीवी रिमोट का उपयोग कैसे करें। मैंने खुद को कहते हुए पाया “लाल बटन दबाओ, लेकिन वो बड़ा लाल बटन नहीं, बायाँ छोटा लाल बटन... नहीं, तुम्हारी दूसरी बाएँ... ठीक है, अब इसे दो सेकंड के लिए पकड़ो, एक नहीं, तीन नहीं...” सुनते हुए परिचित लग रहा है? 😅 -## प्रोग्रामिंग क्या है? +यही है प्रोग्रामिंग! यह उस कला का नाम है जिसमें आप बहुत विस्तार से और चरण-दर-चरण निर्देश देते हैं किसी बहुत शक्तिशाली चीज़ को, जिसे सब कुछ बिल्कुल स्पष्ट रूप से बताना पड़ता है। बस फर्क इतना है कि आप अपनी माँ को नहीं (जो पूछ सकती हैं "कौन सा लाल बटन?!"), बल्कि कंप्यूटर को समझा रहे हैं (जो बिल्कुल वही करता है जो आप कहते हैं, भले ही आपने कुछ गलत कहा हो)। -प्रोग्रामिंग (जिसे कोडिंग भी कहा जाता है) एक कंप्यूटर या मोबाइल डिवाइस जैसे उपकरण के लिए निर्देश लिखने की प्रक्रिया है। हम इन निर्देशों को एक प्रोग्रामिंग भाषा के साथ लिखते हैं, जिसे फिर उपकरण द्वारा समझा जाता है। इन निर्देशों को विभिन्न नामों से जाना जा सकता है, लेकिन *प्रोग्राम*, *कंप्यूटर प्रोग्राम*, *एप्लिकेशन (ऐप)*, और *एक्ज़ीक्यूटेबल* कुछ लोकप्रिय नाम हैं। +जब मैं यह पहली बार सीख रहा था तो मुझे सबसे ज़्यादा हैरत थी: कंप्यूटर असल में अपने मूल में बहुत सरल हैं। वे बस दो चीज़ें समझते हैं – 1 और 0, जो basically "हाँ" और "ना" या "चालू" और "बंद" हैं। बस इतनी सी बात! लेकिन यहाँ जादू होता है – हमें 1 और 0 की भाषा में बात करने की ज़रूरत नहीं, जैसे हम The Matrix में हों। यहाँ **प्रोग्रामिंग भाषाएँ** काम आती हैं। वे ऐसी हैं जैसे दुनिया की सबसे बेहतरीन अनुवादक जो आपके सामान्य इंसानी विचारों को कंप्यूटर भाषा में बदल देती हैं। -एक *प्रोग्राम* कुछ भी हो सकता है जो कोड के साथ लिखा गया हो; वेबसाइट, गेम्स, और फोन ऐप्स सभी प्रोग्राम हैं। हालांकि कोड लिखे बिना प्रोग्राम बनाना संभव है, लेकिन अंतर्निहित लॉजिक उपकरण द्वारा समझा जाता है और वह लॉजिक संभवतः कोड के साथ लिखा गया था। एक प्रोग्राम जो *चल रहा है* या *कोड निष्पादित कर रहा है* वह निर्देशों को अंजाम दे रहा है। जिस उपकरण पर आप यह पाठ पढ़ रहे हैं, वह इसे आपकी स्क्रीन पर दिखाने के लिए एक प्रोग्राम चला रहा है। +और यह वह चीज है जो मुझे हर सुबह सच्चा रोमांचित करती है: आपकी ज़िंदगी में जो कुछ भी डिजिटल है, वह किसी आप जैसे ही व्यक्ति से शुरू हुआ, शायद पजामे में कप कॉफी लिए अपने लैपटॉप पर कोड टाइप करते हुए। वह इंस्टाग्राम फ़िल्टर जो आपको परफेक्ट दिखाता है? किसी ने कोड किया। वह सिफारिश जिसने आपको आपका नया पसंदीदा गाना दिया? किसी डेवलपर ने वह एल्गोरिद्म बनाया। वह ऐप जो आपके दोस्तों के साथ डिनर बिल बाँटने में मदद करता है? हाँ, किसी ने सोचा "ये बड़ी झंझट है, मैं इसे ठीक कर सकता हूँ" और फिर... उन्होंने कर दिखाया! -✅ थोड़ा शोध करें: किसे दुनिया का पहला कंप्यूटर प्रोग्रामर माना जाता है? +जब आप प्रोग्राम करना सीखते हैं, तो आप केवल एक नई स्किल नहीं सीख रहे होते – आप उस अद्भुत समस्या-समाधानकर्ता समुदाय का हिस्सा बन रहे होते हैं जो दिनभर सोचते रहते हैं, "अगर मैं कुछ ऐसा बना सकूं जो किसी का दिन थोड़ा बेहतर बना दे तो?" सच में, इससे कूल क्या हो सकता है? -## प्रोग्रामिंग भाषाएं +✅ **मज़ेदार तथ्य ढूँढ़ना**: जब आपके पास फुर्सत हो, तो यह खोजिए कि दुनिया का पहला कंप्यूटर प्रोग्रामर कौन था? मैं आपको एक संकेत देता हूँ: यह आप जो सोच रहे हैं शायद वह न हो! इस व्यक्ति की कहानी पूरी तरह से रोचक है और दिखाती है कि प्रोग्रामिंग हमेशा से रचनात्मक समस्या-समाधान और बॉक्स के बाहर सोचने के बारे में रही है। -प्रोग्रामिंग भाषाएं डेवलपर्स को उपकरणों के लिए निर्देश लिखने में सक्षम बनाती हैं। उपकरण केवल बाइनरी (1s और 0s) को समझ सकते हैं, और *अधिकांश* डेवलपर्स के लिए यह संवाद करने का बहुत प्रभावी तरीका नहीं है। प्रोग्रामिंग भाषाएं मनुष्यों और कंप्यूटरों के बीच संवाद का माध्यम हैं। +### 🧠 **जांच करें: आप कैसा महसूस कर रहे हैं?** -प्रोग्रामिंग भाषाएं विभिन्न स्वरूपों में आती हैं और विभिन्न उद्देश्यों की पूर्ति कर सकती हैं। उदाहरण के लिए, JavaScript मुख्य रूप से वेब एप्लिकेशन के लिए उपयोग की जाती है, जबकि Bash मुख्य रूप से ऑपरेटिंग सिस्टम के लिए उपयोग की जाती है। +**एक पल लें सोचने के लिए:** +- क्या अब आपको "कंप्यूटरों को निर्देश देने" का विचार समझ में आता है? +- क्या आप कोई रोज़ाना का काम सोच सकते हैं जिसे आप प्रोग्रामिंग से स्वचालित करना चाहेंगे? +- इस पूरी प्रोग्रामिंग चीज़ के बारे में आपके मन में कौन से सवाल उठ रहे हैं? -*लो लेवल भाषाएं* आमतौर पर *हाई लेवल भाषाओं* की तुलना में उपकरण को निर्देश समझने के लिए कम चरणों की आवश्यकता होती है। हालांकि, हाई लेवल भाषाओं की लोकप्रियता उनके पढ़ने में आसान और समर्थन के कारण है। JavaScript को एक हाई लेवल भाषा माना जाता है। +> **याद रखिए**: यह बिलकुल सामान्य है अगर कुछ अवधारणाएँ अभी धुंधली लग रही हों। प्रोग्रामिंग सीखना एक नई भाषा सीखने जैसा है – आपके मस्तिष्क को उन न्यूरल पथों का निर्माण करने में समय लगता है। आप अच्छा कर रहे हैं! -निम्नलिखित कोड JavaScript में एक हाई लेवल भाषा और ARM असेंबली कोड में एक लो लेवल भाषा के बीच अंतर को दर्शाता है। +## प्रोग्रामिंग भाषाएँ जादू के अलग-अलग स्वादों की तरह हैं + +ठीक है, यह थोड़ा अजीब लग सकता है, पर मेरे साथ रहिए – प्रोग्रामिंग भाषाएँ संगीत के अलग-अलग प्रकारों की तरह हैं। सोचिए: आपके पास जैज़ है, जो स्मूद और इम्प्रोवाइज़ेशन वाला है, रॉक है जो शक्तिशाली और सरल है, क्लासिकल है जो सुरुचिपूर्ण और संरचित है, और हिप-हॉप है जो क्रिएटिव और अभिव्यक्तिपूर्ण है। हर शैली की अपनी अलग vibe है, अपने भावुक प्रशंसकों का अपना समुदाय है, और हर एक अलग मूड और मौके के लिए परफेक्ट है। + +प्रोग्रामिंग भाषाएँ भी बिल्कुल ऐसा ही काम करती हैं! आप एक ही भाषा का उपयोग मजेदार मोबाइल गेम बनाने के लिए नहीं करेंगे जो आप विशाल मात्रा में क्लाइमेट डेटा crunch करने के लिए करते, ठीक वैसे ही जैसे आप योगा क्लास में डेथ मेटल नहीं सुनाएंगे (खैर, ज़्यादातर योगा क्लासेस में नहीं! 😄)। + +पर कुछ ऐसी बात है जो मुझे हर बार सोचने पर चौंका देती है: ये भाषाएँ वैसे ही हैं जैसे दुनिया का सबसे धैर्यशील, प्रतिभाशाली दुभाषिया आपके बगल में बैठे हों। आप अपनी बात इस तरह से रख सकते हैं जो आपके इंसानी मस्तिष्क के लिए बिल्कुल प्राकृतिक लगे, और ये भाषाएँ उस बेहद जटिल काम को संभालती हैं जो इसे कंप्यूटर की 1 और 0 की भाषा में बदलता है। यह ऐसा है जैसे एक दोस्त जो दोनों "मानव रचनाशीलता" और "कंप्यूटर तर्क" में पूरी तरह धाराप्रवाह हो – और वे कभी थकते नहीं, कभी कॉफी ब्रेक नहीं लेते, और दो बार एक ही सवाल पूछने पर कभी नाराज़ नहीं होते! + +### लोकप्रिय प्रोग्रामिंग भाषाएँ और उनका उपयोग + +```mermaid +mindmap + root((प्रोग्रामिंग भाषाएँ)) + Web Development + JavaScript + फ्रंटेंड जादू + इंटरैक्टिव वेबसाइट्स + TypeScript + JavaScript + टाइप्स + एंटरप्राइज ऐप्स + Data & AI + Python + डेटा साइंस + मशीन लर्निंग + ऑटोमेशन + R + सांख्यिकी + अनुसंधान + Mobile Apps + Java + एंड्रॉयड + एंटरप्राइज + Swift + iOS + एप्पल इकोसिस्टम + Kotlin + मॉडर्न एंड्रॉयड + क्रॉस-प्लेटफ़ॉर्म + Systems & Performance + C++ + गेम्स + प्रदर्शन-निरपेक्ष + Rust + मेमोरी सुरक्षा + सिस्टम प्रोग्रामिंग + Go + क्लाउड सेवाएं + स्केलेबल बैकएंड +``` +| भाषा | सबसे अच्छा उपयोग | यह क्यों लोकप्रिय है | +|----------|----------|------------------| +| **JavaScript** | वेब विकास, यूजर इंटरफेस | ब्राउज़र में चलता है और इंटरएक्टिव वेबसाइट्स को पावर करता है | +| **Python** | डेटा साइंस, ऑटोमेशन, एआई | पढ़ने और सीखने में आसान, शक्तिशाली पुस्तकालयों के साथ | +| **Java** | एंटरप्राइज़ एप्लीकेशंस, एंड्रॉयड ऐप्स | प्लेटफ़ॉर्म-स्वतंत्र, बड़े सिस्टम के लिए मजबूत | +| **C#** | विंडोज़ एप्लीकेशंस, गेम डेवलपमेंट | Microsoft इकोसिस्टम द्वारा मजबूत समर्थन | +| **Go** | क्लाउड सेवाएँ, बैकएंड सिस्टम | तेज, सरल, आधुनिक कंप्यूटिंग के लिए डिज़ाइन किया गया | + +### उच्च-स्तरीय बनाम निम्न-स्तरीय भाषाएँ + +ठीक है, यह वह अवधारणा थी जिसने मेरी समझ को सबसे ज्यादा तोड़ दिया जब मैं पहली बार सीख रहा था, इसलिए मैं वह रूपक साझा करने जा रहा हूँ जिसने मुझे इसे समझने में मदद की – और मुझे उम्मीद है यह आपको भी मदद करेगा! + +कल्पना करें कि आप ऐसे देश में गए हैं जहाँ आप भाषा नहीं बोलते, और आपको सबसे नजदीकी बाथरूम ढूँढ़ना है (हम सभी ऐसा कर चुके हैं, है ना? 😅): + +- **निम्न-स्तरीय प्रोग्रामिंग** उस स्थानीय बोली सीखने जैसा है जिससे आप फल बेचने वाली दादी से सांस्कृतिक संदर्भों, स्थानीय शब्दों और अंदर की बातों के साथ बात कर सकते हैं जो केवल वही लोग समझते हैं जो वहाँ बड़े हुए हों। बेहद प्रभावशाली और बहुत कुशल... अगर आप उस भाषा में धाराप्रवाह हों! लेकिन जब आप बस बाथरूम खोजना चाहते हों तो यह ज़्यादा भारी लग सकता है। + +- **उच्च-स्तरीय प्रोग्रामिंग** ऐसा है जैसे आपके पास एक ऐसा स्थानीय दोस्त हो जो आपको पूरी तरह समझता हो। आप साधारण अंग्रेज़ी में कह सकते हैं "मुझे वाक़ई बाथरूम ढूँढना है," और वह सारी सांस्कृतिक अनुवाद करता है और आपको ऐसी दिशा-निर्देश देता है जो आपके गैर-स्थानीय दिमाग़ को पूरी तरह समझ में आ जाए। + +प्रोग्रामिंग टर्म्स में: +- **निम्न-स्तरीय भाषाएँ** (जैसे Assembly या C) आपको कंप्यूटर के वास्तविक हार्डवेयर से बेहद विस्तृत बातचीत करने देती हैं, लेकिन आपको मशीन जैसा सोचना पड़ता है, जो... चलिए कहें यह एक बड़ा मानसिक बदलाव है! +- **उच्च-स्तरीय भाषाएँ** (जैसे JavaScript, Python या C#) आपको इंसान की तरह सोचने देती हैं जबकि ये भाषाएँ पर्दे के पीछे सारी मशीन-संबंधित बातें संभालती हैं। साथ ही, इनके पास अत्यंत स्वागतयोग्य समुदाय होते हैं जो याद रखते हैं कि कभी वे भी नए थे और वे सच में मदद करना चाहते हैं! + +सोचिए मैं आपको किससे शुरू करने की सलाह दूंगा? 😉 उच्च-स्तरीय भाषाएँ ऐसी ट्रेनिंग व्हील्स की तरह हैं जिन्हें आप कभी उतारना नहीं चाहते क्योंकि वे अनुभव को बहुत आसान बना देती हैं! + +```mermaid +flowchart TB + A["👤 मानव विचार:
'मैं फिबोनाच्ची संख्याएँ निकालना चाहता हूँ'"] --> B{भाषा स्तर चुनें} + + B -->|उच्च-स्तर| C["🌟 JavaScript/Python
पढ़ने और लिखने में आसान"] + B -->|निम्न-स्तर| D["⚙️ Assembly/C
प्रत्यक्ष हार्डवेयर नियंत्रण"] + + C --> E["📝 लिखें: fibonacci(10)"] + D --> F["📝 लिखें: mov r0,#00
sub r0,r0,#01"] + + E --> G["🤖 कम्प्यूटर समझ:
अनुवादक जटिलता संभालता है"] + F --> G + + G --> H["💻 समान परिणाम:
0, 1, 1, 2, 3, 5, 8, 13..."] + + style C fill:#e1f5fe + style D fill:#fff3e0 + style H fill:#e8f5e8 +``` +### मैं आपको दिखाता हूँ कि उच्च-स्तरीय भाषाएँ इतनी ज्यादा मित्रवत क्यों हैं + +ठीक है, मैं आपको कुछ दिखाने वाला हूँ जो पूरी तरह दर्शाता है कि मैं उच्च-स्तरीय भाषाओं से क्यों प्यार करता हूँ, लेकिन पहले – मुझे आपसे एक वादा चाहिए। जब आप पहला कोड उदाहरण देखें, घबराना नहीं! यह थोड़ा डरावना लग सकता है। यही मेरी बात का मुख्य हिस्सा है! + +हम एक ही कार्य को दो पूरी तरह अलग शैली में लिखे हुए देखेंगे। दोनों Fibonacci अनुक्रम बनाते हैं – यह एक खूबसूरत गणितीय पैटर्न है जहाँ प्रत्येक संख्या पिछले दो की कुल होती है: 0, 1, 1, 2, 3, 5, 8, 13... (मज़ेदार तथ्य: यह पैटर्न आपको प्रकृति में हर जगह मिलेगा – सूरजमुखी के बीजों की घुमावदार लकीरें, पाइनकोन के पैटर्न, यहां तक कि आकाशगंगाओं के बनने का तरीका भी!) + +मुक़ाबला देखने के लिए तैयार? चलिए शुरू करते हैं! + +**उच्च-स्तरीय भाषा (JavaScript) – मानव-मैत्रीपूर्ण:** ```javascript -let number = 10 -let n1 = 0, n2 = 1, nextTerm; - -for (let i = 1; i <= number; i++) { - console.log(n1); - nextTerm = n1 + n2; - n1 = n2; - n2 = nextTerm; +// चरण 1: बुनियादी फिबोनाच्ची सेटअप +const fibonacciCount = 10; +let current = 0; +let next = 1; + +console.log('Fibonacci sequence:'); +``` + +**यह कोड क्या करता है:** +- **घोषित करें** एक कॉन्स्टेंट कि हम कितने फिबोनाची नंबर जनरेट करना चाहते हैं +- **शुरुआत करें** दो वेरिएबल्स जो अनुक्रम में वर्तमान और अगली संख्या को ट्रैक करें +- **सेट करें** शुरुआती मान (0 और 1) जो फिबोनाची पैटर्न को परिभाषित करते हैं +- **दिखाएँ** एक हेडर संदेश अपने आउटपुट को पहचानने के लिए + +```javascript +// चरण 2: लूप के साथ अनुक्रम बनाएँ +for (let i = 0; i < fibonacciCount; i++) { + console.log(`Position ${i + 1}: ${current}`); + + // अनुक्रम में अगला संख्या गणना करें + const sum = current + next; + current = next; + next = sum; } ``` -```c +**यहाँ क्या होता है:** +- **लूप करें** अनुक्रम की हर स्थिति पर `for` लूप का उपयोग कर +- **दिखाएँ** प्रत्येक संख्या को उसकी स्थिति के साथ टेम्पलेट लिटरल फॉर्मेटिंग के माध्यम से +- **गणना करें** अगली फिबोनाची संख्या को वर्तमान और अगले मान जोड़कर +- **अपडेट करें** हमारे ट्रैकिंग वेरिएबल्स को अगली पुनरावृत्ति के लिए + +```javascript +// चरण 3: आधुनिक कार्यात्मक दृष्टिकोण +const generateFibonacci = (count) => { + const sequence = [0, 1]; + + for (let i = 2; i < count; i++) { + sequence[i] = sequence[i - 1] + sequence[i - 2]; + } + + return sequence; +}; + +// उपयोग का उदाहरण +const fibSequence = generateFibonacci(10); +console.log(fibSequence); +``` + +**ऊपर हमने किया है:** +- **बनाया** एक पुन: प्रयोज्य फ़ंक्शन आधुनिक ऐरो फ़ंक्शन सिंटैक्स का उपयोग करते हुए +- **बनाया** एक एरे जिसमें पूरा अनुक्रम संग्रहीत किया गया, बजाय एक-एक करके दिखाने के +- **इस्तेमाल किया** एरे इंडेक्सिंग हर नए नंबर की गणना करने के लिए पिछले मानों से +- **रिटर्न किया** पूरा अनुक्रम ताकि इसे प्रोग्राम के अन्य भागों में फ्लेक्सिबली उपयोग किया जा सके + +**निम्न-स्तरीय भाषा (ARM Assembly) – कंप्यूटर-मैत्रीपूर्ण:** + +```assembly area ascen,code,readonly entry code32 @@ -83,137 +266,598 @@ back add r0,r1 end ``` -यकीन मानिए, *दोनों एक ही काम कर रहे हैं*: 10 तक की फिबोनाची अनुक्रम को प्रिंट करना। +ध्यान दें कि JavaScript संस्करण लगभग अंग्रेज़ी निर्देशों जैसा पढ़ता है, जबकि Assembly संस्करण में ऐसे रहस्यमय कमांड हैं जो सीधे कंप्यूटर के प्रोसेसर को नियंत्रित करते हैं। दोनों काम बिल्कुल समान पूरा करते हैं, लेकिन उच्च-स्तरीय भाषा मनुष्यों के लिए समझना, लिखना, और बनाए रखना कहीं अधिक आसान है। -✅ फिबोनाची अनुक्रम को [परिभाषित](https://en.wikipedia.org/wiki/Fibonacci_number) किया गया है एक संख्या सेट के रूप में, जहां प्रत्येक संख्या पिछले दो संख्याओं का योग होती है, 0 और 1 से शुरू होकर। फिबोनाची अनुक्रम के पहले 10 नंबर हैं: 0, 1, 1, 2, 3, 5, 8, 13, 21 और 34। +**मुख्य फर्क जो आप देखेंगे:** +- **पठन योग्यता**: JavaScript में वर्णनात्मक नाम जैसे `fibonacciCount` होते हैं जबकि Assembly में रहस्यमय लेबल्स जैसे `r0`, `r1` होते हैं +- **टिप्पणियाँ**: उच्च-स्तरीय भाषाएँ व्याख्यात्मक टिप्पणियाँ प्रोत्साहित करती हैं जो कोड को स्व-प्रलेखित बनाती हैं +- **संरचना**: जावास्क्रिप्ट की तार्किक प्रक्रिया इस प्रकार होती है जैसे मनुष्य समस्याओं को चरण-दर-चरण सोचते हैं +- **रखरखाव**: अलग-अलग आवश्यकताओं के लिए जावास्क्रिप्ट संस्करण को अपडेट करना सरल और स्पष्ट होता है -## प्रोग्राम के तत्व +✅ **फ़िबोनाच्ची अनुक्रम के बारे में**: यह अद्भुत संख्या पैटर्न (जहाँ प्रत्येक संख्या उससे पहले की दो संख्याओं का योग होती है: 0, 1, 1, 2, 3, 5, 8...) प्रकृति में शाब्दिक रूप से *हर जगह* दिखता है! आप इसे सूरजमुखी के स्पाइरल्स, पाइनकोन के पैटर्न, नॉटिलस शंख के घुमाव, और यहाँ तक कि पेड़ की शाखाओं के बढ़ने के तरीके में पाएंगे। यह बहुत ही विचारणीय है कि गणित और कोड की मदद से हम प्रकृति द्वारा सुंदरता बनाने के लिए उपयोग किए गए पैटर्न को समझ और पुनःनिर्मित कर सकते हैं! -एक प्रोग्राम में एकल निर्देश को *स्टेटमेंट* कहा जाता है और इसमें आमतौर पर एक कैरेक्टर या लाइन स्पेसिंग होती है जो यह चिह्नित करती है कि निर्देश कहां समाप्त होता है, या *टर्मिनेट* होता है। एक प्रोग्राम कैसे समाप्त होता है, यह प्रत्येक भाषा के साथ अलग-अलग होता है। +## जादू को संभव बनाने वाली निर्माण खंड -प्रोग्राम में स्टेटमेंट्स उपयोगकर्ता या अन्य स्रोतों द्वारा प्रदान किए गए डेटा पर निर्भर हो सकते हैं ताकि निर्देशों को अंजाम दिया जा सके। डेटा प्रोग्राम के व्यवहार को बदल सकता है, इसलिए प्रोग्रामिंग भाषाओं में डेटा को अस्थायी रूप से संग्रहीत करने का तरीका होता है ताकि इसे बाद में उपयोग किया जा सके। इन्हें *वेरिएबल्स* कहा जाता है। वेरिएबल्स ऐसे स्टेटमेंट्स हैं जो उपकरण को अपनी मेमोरी में डेटा सहेजने का निर्देश देते हैं। प्रोग्राम में वेरिएबल्स गणित में वेरिएबल्स के समान होते हैं, जहां उनका एक अनूठा नाम होता है और उनका मान समय के साथ बदल सकता है। +ठीक है, अब जब आपने देखा कि प्रोग्रामिंग भाषाएँ किस तरह कार्यरत दिखती हैं, तो आइए उन मूलभूत तत्वों को समझें जो हर एक प्रोग्राम में होते हैं। इन्हें मानिए जैसे आपकी पसंदीदा रेसिपी के आवश्यक सामग्री – एक बार यह समझ गए कि हर एक का क्या काम है, तो आप लगभग किसी भी भाषा में कोड पढ़ और लिख पाएंगे! -कुछ स्टेटमेंट्स उपकरण द्वारा निष्पादित नहीं किए जा सकते हैं। यह आमतौर पर डेवलपर द्वारा डिज़ाइन के अनुसार होता है या गलती से तब होता है जब कोई अप्रत्याशित त्रुटि होती है। एप्लिकेशन पर इस प्रकार का नियंत्रण इसे अधिक मजबूत और बनाए रखने योग्य बनाता है। आमतौर पर, ये नियंत्रण परिवर्तन तब होते हैं जब कुछ शर्तें पूरी होती हैं। आधुनिक प्रोग्रामिंग में एक सामान्य स्टेटमेंट जो प्रोग्राम को चलाने के तरीके को नियंत्रित करता है, वह है `if..else` स्टेटमेंट। +यह प्रोग्रामिंग की व्याकरण सीखने जैसा है। याद है स्कूल में जब आपने संज्ञा, क्रिया, और वाक्य बनाने के नियम सीखे थे? प्रोग्रामिंग की भी अपनी व्याकरण होती है, और सच कहूँ तो यह अंग्रेजी व्याकरण से कहीं अधिक तार्किक और दयालु है! 😄 -✅ आप इस प्रकार के स्टेटमेंट के बारे में अगले पाठों में अधिक जानेंगे। +### स्टेटमेंट्स: क्रमवार निर्देश -## उपयोगी उपकरण +चलिए शुरू करते हैं **स्टेटमेंट्स** से – ये आपके कंप्यूटर के साथ बातचीत में व्यक्तिगत वाक्य की तरह होते हैं। हर स्टेटमेंट कंप्यूटर को एक विशिष्ट काम करने का निर्देश देता है, जैसे कोई दिशा-निर्देश देना: "यहाँ बाएँ मुँड़ो," "लाल बत्ती पर रुक जाओ," "उस स्थान पर पार्क करो।" -[![उपयोगी उपकरण](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "उपयोगी उपकरण") +मुझे स्टेटमेंट्स की एक खूबी बहुत पसंद है कि वे आमतौर पर पढ़ने में आसान होते हैं। इसे देखें: -> 🎥 ऊपर दी गई छवि पर क्लिक करें उपकरणों के बारे में वीडियो के लिए +```javascript +// मूल बयान जो एकल क्रियाएं करते हैं +const userName = "Alex"; +console.log("Hello, world!"); +const sum = 5 + 3; +``` + +**यह कोड क्या करता है:** +- उपयोगकर्ता का नाम संग्रहीत करने के लिए एक स्थिर चर घोषित करता है +- कंसोल आउटपुट पर एक स्वागत संदेश दिखाता है +- एक गणितीय ऑपरेशन का परिणाम गणना कर संग्रहीत करता है -इस अनुभाग में, आप कुछ सॉफ़्टवेयर के बारे में जानेंगे जो आपके पेशेवर विकास यात्रा की शुरुआत में बहुत उपयोगी हो सकते हैं। +```javascript +// वेब पृष्ठों के साथ इंटरैक्ट करने वाले कथन +document.title = "My Awesome Website"; +document.body.style.backgroundColor = "lightblue"; +``` + +**चरण-दर-चरण, यह हो रहा है:** +- ब्राउज़र टैब में प्रदर्शित वेबपेज का शीर्षक संशोधित करता है +- पूरे पृष्ठ के पृष्ठभूमि का रंग बदलता है -एक **डेवलपमेंट एनवायरनमेंट** उपकरणों और सुविधाओं का एक अनूठा सेट है जिसे डेवलपर अक्सर सॉफ़्टवेयर लिखते समय उपयोग करता है। इनमें से कुछ उपकरण डेवलपर की विशिष्ट आवश्यकताओं के लिए अनुकूलित किए गए हैं, और समय के साथ बदल सकते हैं यदि डेवलपर काम, व्यक्तिगत परियोजनाओं, या किसी अलग प्रोग्रामिंग भाषा का उपयोग करते समय प्राथमिकताओं को बदलता है। डेवलपमेंट एनवायरनमेंट उतने ही अनूठे होते हैं जितने कि उन्हें उपयोग करने वाले डेवलपर्स। +### वेरिएबल्स: आपके प्रोग्राम की मेमोरी प्रणाली -### एडिटर्स +ठीक है, **वेरिएबल्स** वास्तव में मेरी पसंदीदा अवधारणाओं में से एक हैं क्योंकि वे रोज़मर्रा की चीज़ों जैसे होते हैं जिनका आप रोजाना उपयोग करते हैं! -सॉफ़्टवेयर विकास के लिए सबसे महत्वपूर्ण उपकरणों में से एक एडिटर है। एडिटर्स वह जगह हैं जहां आप अपना कोड लिखते हैं और कभी-कभी जहां आप अपना कोड चलाते हैं। +अपने फोन के संपर्क सूची के बारे में सोचें। आप हर किसी का नंबर याद नहीं रखते – बग़ैर नाम "माँ," "सबसे अच्छा दोस्त," या "पिज़्ज़ा की दुकान जो 2 बजे तक डिलीवर करती है" सहेज लेते हैं और फोन खुद नंबर याद रखता है। वेरिएबल्स भी बिल्कुल ऐसे ही होते हैं! वे लेबल वाले कंटेनर की तरह होते हैं जहाँ आपका प्रोग्राम जानकारी संग्रह कर सकता है और बाद में नाम के जरिए उसे पुनः प्राप्त कर सकता है जो सच में समझ में आता है। -डेवलपर्स एडिटर्स पर कुछ अतिरिक्त कारणों से भरोसा करते हैं: +यह दिलचस्प है: वेरिएबल्स आपके प्रोग्राम के चलते समय बदल सकते हैं (इसी कारण इन्हें "वेरिएबल" कहा जाता है – समझे?). जैसे आप पिज़्ज़ा की दुकान का संपर्क अपडेट कर सकते हैं यदि कहीं बेहतर मिल जाए, वैसे ही वेरिएबल्स तब अपडेट होते हैं जब प्रोग्राम नई जानकारी सीखता है या परिस्थिति बदलती है! -- *डिबगिंग* कोड में बग्स और त्रुटियों को उजागर करने में मदद करता है, कोड को लाइन दर लाइन जांचते हुए। कुछ एडिटर्स में डिबगिंग क्षमताएं होती हैं; इन्हें विशिष्ट प्रोग्रामिंग भाषाओं के लिए अनुकूलित और जोड़ा जा सकता है। -- *सिंटैक्स हाइलाइटिंग* कोड में रंग और टेक्स्ट फॉर्मेटिंग जोड़ता है, जिससे इसे पढ़ना आसान हो जाता है। अधिकांश एडिटर्स अनुकूलित सिंटैक्स हाइलाइटिंग की अनुमति देते हैं। -- *एक्सटेंशन्स और इंटीग्रेशन* डेवलपर्स के लिए विशेष उपकरण हैं, डेवलपर्स द्वारा बनाए गए। ये उपकरण बेस एडिटर में निर्मित नहीं होते। उदाहरण के लिए, कई डेवलपर्स अपने कोड को समझाने के लिए दस्तावेज़ बनाते हैं। वे दस्तावेज़ में टाइपो खोजने में मदद करने के लिए एक स्पेल चेक एक्सटेंशन इंस्टॉल कर सकते हैं। अधिकांश एक्सटेंशन्स विशिष्ट एडिटर के भीतर उपयोग के लिए होते हैं, और अधिकांश एडिटर्स उपलब्ध एक्सटेंशन्स को खोजने का तरीका प्रदान करते हैं। -- *कस्टमाइजेशन* डेवलपर्स को अपनी आवश्यकताओं के अनुरूप एक अनूठा डेवलपमेंट एनवायरनमेंट बनाने में सक्षम बनाता है। अधिकांश एडिटर्स अत्यधिक अनुकूलन योग्य होते हैं और डेवलपर्स को कस्टम एक्सटेंशन्स बनाने की अनुमति भी दे सकते हैं। +आइए मैं आपको दिखाता हूँ कि यह कितना सरल और खूबसूरत हो सकता है: -#### लोकप्रिय एडिटर्स और वेब डेवलपमेंट एक्सटेंशन्स +```javascript +// चरण 1: मूल चर बनाना +const siteName = "Weather Dashboard"; +let currentWeather = "sunny"; +let temperature = 75; +let isRaining = false; +``` + +**इन अवधारणाओं को समझना:** +- `const` वेरिएबल्स में अपरिवर्तनीय मान संग्रहीत करें (जैसे साइट का नाम) +- `let` का उपयोग उन मानों के लिए करें जो प्रोग्राम के दौरान बदल सकते हैं +- विभिन्न डाटा प्रकारों को सौंपें: स्ट्रिंग्स (टेक्स्ट), संख्याएं, और बूलीयन (सही/गलत) +- वर्णनात्मक नाम चुनें जो समझाएं कि हर वेरिएबल में क्या है -- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) -- [Atom](https://atom.io/) - - [spell-check](https://atom.io/packages/spell-check) - - [teletype](https://atom.io/packages/teletype) - - [atom-beautify](https://atom.io/packages/atom-beautify) +```javascript +// चरण 2: संबंधित डेटा को समूहित करने के लिए वस्तुओं के साथ कार्य करना +const weatherData = { + location: "San Francisco", + humidity: 65, + windSpeed: 12 +}; +``` -- [Sublimetext](https://www.sublimetext.com/) - - [emmet](https://emmet.io/) - - [SublimeLinter](http://www.sublimelinter.com/en/stable/) +**ऊपर हमने:** +- एक ऑब्जेक्ट बनाया जो मौसम से संबंधित जानकारी को एक साथ रखता है +- एक ही वेरिएबल नाम के तहत कई डेटा टुकड़े व्यवस्थित किए +- प्रत्येक जानकारी के टुकड़े को स्पष्ट रूप से लेबल करने के लिए की-वैल्यू पेयर इस्तेमाल किए -### ब्राउज़र्स +```javascript +// चरण 3: चर का उपयोग और अपडेट करना +console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); +console.log(`Wind speed: ${weatherData.windSpeed} mph`); -एक और महत्वपूर्ण उपकरण ब्राउज़र है। वेब डेवलपर्स ब्राउज़र पर भरोसा करते हैं यह देखने के लिए कि उनका कोड वेब पर कैसे चलता है। इसका उपयोग एडिटर में लिखे गए वेब पेज के दृश्य तत्वों को प्रदर्शित करने के लिए भी किया जाता है, जैसे HTML। +// परिवर्तनीय चर को अपडेट करना +currentWeather = "cloudy"; +temperature = 68; +``` + +**आइए हर हिस्से को समझें:** +- टेम्प्लेट लिटरेल्स का उपयोग करके `${}` सिंटैक्स से जानकारी दिखाएं +- डॉट नोटेशन (`weatherData.windSpeed`) से ऑब्जेक्ट प्रॉपर्टीज़ तक पहुँचें +- `let` से घोषित वेरिएबल्स को बदलते हालात के अनुसार अपडेट करें +- कई वेरिएबल्स को मिलाकर सार्थक संदेश बनाएं -कई ब्राउज़र्स *डेवलपर टूल्स* (DevTools) के साथ आते हैं, जो डेवलपर्स को उनके एप्लिकेशन के बारे में महत्वपूर्ण जानकारी एकत्र करने और कैप्चर करने में मदद करने के लिए उपयोगी सुविधाओं और जानकारी का एक सेट प्रदान करते हैं। उदाहरण के लिए: यदि किसी वेब पेज में त्रुटियां हैं, तो यह जानना कभी-कभी मददगार होता है कि वे कब हुईं। ब्राउज़र में DevTools को इस जानकारी को कैप्चर करने के लिए कॉन्फ़िगर किया जा सकता है। +```javascript +// चरण 4: साफ़ कोड के लिए आधुनिक डीस्ट्रक्चरिंग +const { location, humidity } = weatherData; +console.log(`${location} humidity: ${humidity}%`); +``` + +**आपको जानना ज़रूरी है:** +- ऑब्जेक्ट से विशिष्ट प्रॉपर्टीज़ डिस्ट्रक्चरिंग असाइनमेंट से निकालें +- ऑब्जेक्ट कीस के समान नामों वाले नए वेरिएबल्स स्वतः बनाएं +- बार-बार डॉट नोटेशन इस्तेमाल करने से बचकर कोड को सरल बनाएं -#### लोकप्रिय ब्राउज़र्स और DevTools +### नियंत्रण प्रवाह: अपने प्रोग्राम को सोचने की शिक्षा देना -- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon) -- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) -- [Firefox](https://developer.mozilla.org/docs/Tools) +ठीक है, यहाँ प्रोग्रामिंग वास्तव में दिमाग घुमाने वाली हो जाती है! **कंट्रोल फ्लो** बुनियादी तौर पर आपके प्रोग्राम को स्मार्ट निर्णय लेना सिखाना है, बिलकुल उसी तरह जैसे आप हर दिन बिना सोचे समझे करते हैं। -### कमांड लाइन टूल्स +कल्पना कीजिए: आज सुबह आपने ऐसा कुछ किया होगा जैसे "अगर बारिश हो रही है, तो छाता लूँगा। अगर ठंड है, तो जैकेट पहनूंगा। अगर मैं देर से हूँ, तो नाश्ता छोड़कर रास्ते में कॉफी लूँगा।" आपका दिमाग स्वाभाविक रूप से हर दिन इस तरह के कई फैसले करता है! -कुछ डेवलपर्स अपने दैनिक कार्यों के लिए कम ग्राफिकल दृश्य पसंद करते हैं और इसे प्राप्त करने के लिए कमांड लाइन पर भरोसा करते हैं। कोड लिखने में काफी मात्रा में टाइपिंग की आवश्यकता होती है और कुछ डेवलपर्स अपने कीबोर्ड पर प्रवाह को बाधित नहीं करना पसंद करते हैं। वे कीबोर्ड शॉर्टकट का उपयोग करके डेस्कटॉप विंडो के बीच स्विच करते हैं, विभिन्न फाइलों पर काम करते हैं, और उपकरणों का उपयोग करते हैं। अधिकांश कार्य माउस के साथ पूरे किए जा सकते हैं, लेकिन कमांड लाइन का उपयोग करने का एक लाभ यह है कि कमांड लाइन टूल्स के साथ बहुत कुछ किया जा सकता है बिना माउस और कीबोर्ड के बीच स्विच किए। कमांड लाइन का एक और लाभ यह है कि वे कॉन्फ़िगर करने योग्य हैं और आप एक कस्टम कॉन्फ़िगरेशन सहेज सकते हैं, इसे बाद में बदल सकते हैं, और इसे अन्य डेवलपमेंट मशीनों में आयात कर सकते हैं। चूंकि डेवलपमेंट एनवायरनमेंट प्रत्येक डेवलपर के लिए बहुत अनूठा होता है, कुछ इसे पूरी तरह से छोड़ देते हैं, कुछ पूरी तरह से इस पर निर्भर करते हैं, और कुछ दोनों का मिश्रण पसंद करते हैं। +यही वजह है कि प्रोग्राम्स बुद्धिमान और जीवंत लगते हैं, केवल एक उबाऊ, अनुमानित स्क्रिप्ट का पालन नहीं करते। वे स्थिति को देख सकते हैं, परिस्थितियों का मूल्यांकन कर सकते हैं, और सही प्रतिक्रिया दे सकते हैं। यह आपके प्रोग्राम को एक दिमाग देने जैसा है जो अनुकूलन कर सकता है और निर्णय ले सकता है! -### लोकप्रिय कमांड लाइन विकल्प +देखना चाहते हैं कि यह कितना खूबसूरती से काम करता है? मैं दिखाता हूँ: -कमांड लाइन के विकल्प आपके द्वारा उपयोग किए जाने वाले ऑपरेटिंग सिस्टम के आधार पर भिन्न होंगे। +```javascript +// चरण 1: मूल शर्तीय तर्क +const userAge = 17; + +if (userAge >= 18) { + console.log("You can vote!"); +} else { + const yearsToWait = 18 - userAge; + console.log(`You'll be able to vote in ${yearsToWait} year(s).`); +} +``` + +**यह कोड क्या करता है:** +- उपयोगकर्ता की उम्र को मतदान योग्यता के लिए जांचता है +- स्थिति के परिणाम के आधार पर अलग कोड ब्लॉक्स चलाता है +- 18 से कम उम्र वालों के लिए मतदान योग्यता तक बचे समय की गणना और प्रदर्शन करता है +- हर स्थिति के लिए विशिष्ट, सहायक प्रतिक्रिया देता है -*💻 = ऑपरेटिंग सिस्टम पर पहले से इंस्टॉल आता है।* +```javascript +// चरण 2: तर्क ऑपरेटरों के साथ कई शर्तें +const userAge = 17; +const hasPermission = true; + +if (userAge >= 18 && hasPermission) { + console.log("Access granted: You can enter the venue."); +} else if (userAge >= 16) { + console.log("You need parent permission to enter."); +} else { + console.log("Sorry, you must be at least 16 years old."); +} +``` + +**यहाँ क्या हो रहा है:** +- `&&` (और) आपरेटर की मदद से कई स्थितियों को मिलाता है +- `else if` का उपयोग करके कई स्थिति की श्रेणी बनाता है +- अंतिम `else` स्टेटमेंट से सभी संभावित मामलों को संभालता है +- हर अलग स्थिति के लिए स्पष्ट, क्रियान्वयन योग्य प्रतिक्रिया प्रदान करता है -#### Windows +```javascript +// चरण 3: टर्नरी ऑपरेटर के साथ संक्षिप्त शर्तीय +const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; +console.log(`Status: ${votingStatus}`); +``` + +**याद रखने योग्य बातें:** +- सरल दो विकल्प वाले निर्णयों के लिए टर्नरी ऑपरेटर (`? :`) का उपयोग करें +- पहले स्थिति लिखें, फिर `?`, फिर सही परिणाम, फिर `:`, और फिर गलत परिणाम लिखें +- परिस्थितियों के अनुसार मान नियुक्त करने के लिए यह पैटर्न लागू करें -- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻 -- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (जिसे CMD भी कहा जाता है) 💻 -- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon) -- [mintty](https://mintty.github.io/) +```javascript +// चरण 4: कई विशिष्ट मामलों को संभालना +const dayOfWeek = "Tuesday"; + +switch (dayOfWeek) { + case "Monday": + case "Tuesday": + case "Wednesday": + case "Thursday": + case "Friday": + console.log("It's a weekday - time to work!"); + break; + case "Saturday": + case "Sunday": + console.log("It's the weekend - time to relax!"); + break; + default: + console.log("Invalid day of the week"); +} +``` -#### MacOS +**यह कोड निम्न कार्य करता है:** +- वेरिएबल के मान को कई विशिष्ट मामलों के साथ मिलाता है +- समान मामलों को समूहित करता है (वर्किंग दिन बनाम सप्ताहांत) +- जब मेल मिलता है तो उपयुक्त कोड ब्लॉक चलाता है +- अप्रत्याशित मानों को संभालने के लिए `default` मामला शामिल करता है +- कोड को अगले मामले तक जाने से रोकने के लिए `break` स्टेटमेंट का उपयोग करता है + +> 💡 **वास्तविक दुनिया की तुलना**: कंट्रोल फ्लो को ऐसे समझिए जैसे आपके पास दुनिया का सबसे धीरज वाला GPS हो जो आपको दिशानिर्देश देता है। यह कह सकता है "अगर मेन स्ट्रीट पर ट्रैफिक है, तो हाईवे लें। अगर हाईवे पर निर्माण कार्य है, तो मनोरम रास्ता आजमाएं।" प्रोग्राम इसी तरह की शर्तीय लॉजिक का इस्तेमाल करते हैं ताकि वे बुद्धिमानी से विभिन्न परिस्थितियों का जवाब दें और उपयोगकर्ताओं को सर्वोत्तम अनुभव प्रदान करें। + +### 🎯 **अवधारणा जाँच: निर्माण खंडों में महारत** + +**देखते हैं कि आप मूल बातें कितना समझे हैं:** +- क्या आप अपने शब्दों में वेरिएबल और स्टेटमेंट के बीच का अंतर समझा सकते हैं? +- एक वास्तविक जीवन की स्थिति सोचिए जहाँ आप if-then निर्णय का उपयोग कर सकें (जैसे हमारा मतदान उदाहरण) +- प्रोग्रामिंग लॉजिक के बारे में कौन सी बात ने आपको आश्चर्यचकित किया? + +**त्वरित आत्मविश्वास बढ़ाने वाला:** +```mermaid +flowchart LR + A["📝 कथन
(निर्देश)"] --> B["📦 चर
(भंडारण)"] --> C["🔀 नियंत्रण प्रवाह
(निर्णय)"] --> D["🎉 कार्यशील प्रोग्राम!"] + + style A fill:#ffeb3b + style B fill:#4caf50 + style C fill:#2196f3 + style D fill:#ff4081 +``` +✅ **आगे क्या आने वाला है**: हम इन अवधारणाओं में और गहराई से उतरेंगे और इस अद्भुत यात्रा को साथ मिलकर जारी रखेंगे! अभी बस उन सभी शानदार संभावनाओं को लेकर उत्साहित होने पर ध्यान दें जो आपके सामने हैं। विशेष कौशल और तकनीकें अभ्यास के दौरान स्वाभाविक रूप से आ जाएंगी – मुझे विश्वास है कि यह उम्मीद से कहीं अधिक मज़ेदार होगा! + +## व्यापार के उपकरण + +ठीक है, यहाँ मैं इतना उत्साहित हूँ कि खुद को रोक नहीं पा रहा! 🚀 हम उन अविश्वसनीय उपकरणों के बारे में बात करने वाले हैं जो आपको ऐसा महसूस कराएंगे जैसे आपको डिजिटल अंतरिक्ष यान की चाबियाँ मिल गई हों। + +आप जानते हैं जैसे एक शेफ के पास बेंजोरी नाइफ्स होते हैं जो उनके हाथों का विस्तार लगते हैं? या जैसे एक संगीतकार के पास एक गिटार होता है जो छूते ही संगीत गाने लगता है? वैसे ही डेवलपर्स के पास अपने जादुई उपकरण होते हैं, और यहाँ कुछ है जो आपका दिमाग उड़ाने वाला है – इनमें से अधिकांश पूरी तरह से मुफ़्त हैं! + +मैं इस बारे में सोचकर बिल्कुल उछल रहा हूँ कि ये उपकरण आपके साथ साझा करूँ क्योंकि इन्होंने सॉफ्टवेयर बनाने के तरीके में क्रांति ला दी है। हम बात कर रहे हैं AI-सक्षम कोडिंग असिस्टेंट्स की जो आपके कोड को लिखने में सहायता कर सकते हैं (मैं मज़ाक नहीं कर रहा!), क्लाउड वातावरण जहां से आप वाई-फाई की मदद से कहीं से भी पूरे ऐप्लिकेशन बना सकते हैं, और डिबगिंग उपकरण जो इतने परिष्कृत हैं कि वे आपकी प्रोग्रामिंग के लिए एक्स-रे विज़न की तरह हैं। + +और यह हिस्सा जो मुझे अभी भी रोमांचित करता है: ये "शुरुआती उपकरण" नहीं हैं जिनसे आप आगे बढ़ जाएंगे। ये वही पेशेवर ग्रेड उपकरण हैं जिन्हें गूगल, नेटफ्लिक्स, और जो इंडी ऐप स्टूडियो आप पसंद करते हैं, वे अभी इसी पल उपयोग कर रहे हैं। ये इस्तेमाल करके आपको प्रो जैसा महसूस होगा! + +```mermaid +graph TD + A["💡 आपका विचार"] --> B["⌨️ कोड एडिटर
(VS कोड)"] + B --> C["🌐 ब्राउज़र डेवलपर टूल्स
(टेस्टिंग और डिबगिंग)"] + C --> D["⚡ कमांड लाइन
(स्वचालन और उपकरण)"] + D --> E["📚 दस्तावेज़ीकरण
(सीखन और संदर्भ)"] + E --> F["🚀 शानदार वेब एप्लिकेशन!"] + + B -.-> G["🤖 एआई सहायक
(GitHub Copilot)"] + C -.-> H["📱 डिवाइस परीक्षण
(उत्तरदायी डिज़ाइन)"] + D -.-> I["📦 पैकेज प्रबंधक
(npm, yarn)"] + E -.-> J["👥 समुदाय
(Stack Overflow)"] + + style A fill:#fff59d + style F fill:#c8e6c9 + style G fill:#e1f5fe + style H fill:#f3e5f5 + style I fill:#ffccbc + style J fill:#e8eaf6 +``` +### कोड एडिटर्स और IDEs: आपके नए डिजिटल सबसे अच्छे दोस्त + +आइए कोड एडिटर्स की बात करते हैं – ये वास्तव में आपके पसंदीदा जगहें बनने वाले हैं! इन्हें ऐसे समझिए जैसे आपका व्यक्तिगत कोडिंग अभयारण्य जहाँ आप अपने डिजिटल निर्माण को बनाने और सुधारने में अधिकांश समय बिताएंगे। + +लेकिन आधुनिक एडिटर्स में जो असाधारण बात है वह यह है कि वे केवल साधारण टेक्स्ट एडिटर नहीं हैं। वे ऐसे हैं जैसे आपके बगल में दिन-रात सबसे बुद्धिमान, सहायक कोडिंग मेंटर बैठे हों। ये आपकी टाइपिंग की गलतियाँ पहले पकड़ लेते हैं जब आपको पता भी नहीं चलता, सुधार के सुझाव देते हैं जो आपको जीनियस जैसा दिखाते हैं, यह समझाने में मदद करते हैं कि हर कोड का टुकड़ा क्या करता है, और उनमें से कुछ पूर्वानुमान भी लगा लेते हैं कि आप क्या टाइप करने वाले हैं और आपके विचार पूरे करने का प्रस्ताव देते हैं! + +मुझे याद है जब मैंने पहली बार ऑटो-कंप्लीशन देखा था – मुझे सचमुच ऐसा लगा जैसे मैं भविष्य में जी रहा हूँ। आप कुछ टाइप करना शुरू करते हैं, और आपका एडिटर कहता है, "अरे, क्या आप यह फंक्शन इस्तेमाल करने जा रहे थे जो बिल्कुल आपकी जरूरत पूरा करता है?" यह ऐसा है जैसे आपके कोडिंग साथी में एक मानसिक रीडर हो! + +**ये एडिटर्स इतने अद्भुत क्या बनाते हैं?** + +आधुनिक कोड एडिटर्स उत्पादकता बढ़ाने के लिए फीचर्स का प्रभावशाली सेट प्रदान करते हैं: + +| फीचर | क्या करता है | क्यों मददगार है | +|---------|--------------|--------------| +| **सिंटैक्स हाइलाइटिंग** | कोड के विभिन्न हिस्सों को रंगीन बनाता है | कोड पढ़ना आसान बनाता है और त्रुटियाँ पहचानने में मदद करता है | +| **ऑटो-कंप्लीशन** | टाइप करते वक्त कोड का सुझाव देता है | कोडिंग तेज करता है और टाइपो कम करता है | +| **डिबगिंग टूल्स** | त्रुटियाँ खोजने और सुधारने में मदद करता है | समस्या सुलझाने में घंटों बचाता है | +| **एक्सटेंशंस** | विशेष फीचर्स जोड़ता है | किसी भी तकनीक के लिए एडिटर अनुकूलित करता है | +| **AI असिस्टेंट्स** | कोड और व्याख्यान सुझाव देते हैं | सीखने और उत्पादकता को तेज करता है | + +> 🎥 **वीडियो संसाधन**: इन उपकरणों को क्रियान्वित देखने के लिए यह [Tools of the Trade वीडियो](https://youtube.com/watch?v=69WJeXGBdxg) देखें। + +#### वेब विकास के लिए अनुशंसित एडिटर्स -- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻 -- [iTerm](https://iterm2.com/) -- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (मुफ़्त) +- वेब डेवलपर्स में सबसे लोकप्रिय +- एक्सटेंशन का बेहतरीन पारिस्थितिकी तंत्र +- इनबिल्ट टर्मिनल और Git इंटीग्रेशन +- **जरूरी एक्सटेंशंस:** + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-सक्षम कोड सुझाव + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - रियल-टाइम सहयोग + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - स्वचालित कोड फॉर्मैटिंग + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - कोड में टाइपो पकड़ना -#### Linux +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (पेड, छात्रों के लिए मुफ्त) +- उन्नत डिबगिंग और परीक्षण उपकरण +- बुद्धिमान कोड पूर्णता +- इनबिल्ट संस्करण नियंत्रण -- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 -- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html) -- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) +**क्लाउड-आधारित IDEs** (विभिन्न मूल्य निर्धारण) +- [GitHub Codespaces](https://github.com/features/codespaces) - आपके ब्राउज़र में पूरा VS Code +- [Replit](https://replit.com/) - सीखने और कोड साझा करने के लिए उत्कृष्ट +- [StackBlitz](https://stackblitz.com/) - त्वरित, पूर्ण स्टैक वेब विकास -#### लोकप्रिय कमांड लाइन टूल्स +> 💡 **शुरुआत करने का सुझाव:** Visual Studio Code से शुरू करें – यह मुफ़्त है, उद्योग में व्यापक रूप से उपयोग किया जाता है, और इसके लिए कई उपयोगी ट्यूटोरियल और एक्सटेंशंस की बड़ी समुदाय है। -- [Git](https://git-scm.com/) (💻 अधिकांश ऑपरेटिंग सिस्टम पर) -- [NPM](https://www.npmjs.com/) -- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) +### वेब ब्राउज़र: आपका गुप्त विकास प्रयोगशाला -### दस्तावेज़ीकरण +ठीक है, तैयार हो जाइए अपने दिमाग को पूरी तरह से उड़ाने के लिए! आप जानते हैं कि आप ब्राउज़रों का उपयोग कैसे सोशल मीडिया स्क्रॉल करने और वीडियो देखने के लिए करते रहे हैं? तो पता चला कि वे इस पूरी अवधि में एक अद्भुत गुप्त डेवलपर प्रयोगशाला छुपाए हुए थे, बस आपके द्वारा खोजे जाने के लिए! -जब कोई डेवलपर कुछ नया सीखना चाहता है, तो वे इसे सीखने के लिए सबसे अधिक संभावना दस्तावेज़ीकरण का सहारा लेंगे। डेवलपर्स अक्सर उपकरणों और भाषाओं का सही तरीके से उपयोग करने के लिए और यह समझने के लिए कि यह कैसे काम करता है, दस्तावेज़ीकरण पर भरोसा करते हैं। +हर बार जब आप किसी वेबपेज पर राइट-क्लिक करके "Inspect Element" चुनते हैं, तो आप डेवलपर टूल्स की एक छिपी हुई दुनिया खोलते हैं जो वास्तव में उन महंगे सॉफ़्टवेयर से भी अधिक शक्तिशाली हैं जिनके लिए मैं कभी सैंकड़ों डॉलर देता था। यह ऐसा है जैसे आपका पुराना साधारण रसोईघर एक गुप्त पैनल के पीछे एक पेशेवर शेफ की प्रयोगशाला छुपाए हुए हो! +पहली बार जब किसी ने मुझे ब्राउज़र DevTools दिखाया, तो मैंने लगभग तीन घंटे सिर्फ क्लिक करते हुए बिताए और कहा "रुको, ये भी कर सकता है?!" आप सचमुच किसी भी वेबसाइट को रियल-टाइम में एडिट कर सकते हैं, देख सकते हैं कि सब कुछ कितनी तेजी से लोड हो रहा है, अपने साइट को विभिन्न डिवाइसों पर कैसे दिखता है टेस्ट कर सकते हैं, और यहां तक कि जावास्क्रिप्ट को पूरी प्रोफेशनल तरह से डिबग कर सकते हैं। यह बिल्कुल दिमाग उड़ाने वाला है! -#### वेब डेवलपमेंट पर लोकप्रिय दस्तावेज़ीकरण +**ये हैं वो कारण जिनकी वजह से ब्राउज़र आपका गुप्त हथियार हैं:** -- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), Mozilla से, [Firefox](https://www.mozilla.org/firefox/) ब्राउज़र के प्रकाशक -- [Frontend Masters](https://frontendmasters.com/learn/) -- [Web.dev](https://web.dev), Google से, [Chrome](https://www.google.com/chrome/) के प्रकाशक -- [Microsoft के डेवलपर दस्तावेज़](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), [Microsoft Edge](https://www.microsoft.com/edge) के लिए -- [W3 Schools](https://www.w3schools.com/where_to_start.asp) +जब आप कोई वेबसाइट या वेब ऐप्लीकेशन बनाते हैं, तो आपको यह देखना होगा कि यह वास्तविक दुनिया में कैसा दिखता है और कैसा व्यवहार करता है। ब्राउज़र न केवल आपका काम दिखाते हैं बल्कि प्रदर्शन, पहुंच और संभावित समस्याओं के बारे में विस्तृत प्रतिक्रिया भी देते हैं। -✅ थोड़ा शोध करें: अब जब आप वेब डेवलपर के एनवायरनमेंट की मूल बातें जानते हैं, तो इसे वेब डिज़ाइनर के एनवायरनमेंट के साथ तुलना करें। +#### ब्राउज़र डेवलपर टूल्स (DevTools) + +आधुनिक ब्राउज़र व्यापक डेवलपमेंट सूट शामिल करते हैं: + +| टूल श्रेणी | यह क्या करता है | उदाहरण उपयोग केस | +|------------|-----------------|------------------| +| **एलिमेंट इंस्पेक्टर** | HTML/CSS को रियल-टाइम में देखें और संपादित करें | तुरंत परिणाम देखने के लिए स्टाइलिंग में बदलाव करें | +| **कंसोल** | त्रुटि संदेश देखें और जावास्क्रिप्ट टेस्ट करें | समस्याएं डिबग करें और कोड के साथ प्रयोग करें | +| **नेटवर्क मॉनिटर** | संसाधनों के लोड होने का ट्रैक रखें | प्रदर्शन और लोडिंग समय को अनुकूलित करें | +| **सुलभता चेकर** | समावेशी डिजाइन के लिए टेस्ट करें | सुनिश्चित करें कि आपकी साइट सभी उपयोगकर्ताओं के लिए काम करे | +| **डिवाइस सिम्युलेटर** | विभिन्न स्क्रीन साइज पर पूर्वावलोकन करें | बिना कई डिवाइसों के रेस्पॉन्सिव डिजाइन टेस्ट करें | + +#### विकास के लिए अनुशंसित ब्राउज़र + +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - विस्तृत दस्तावेज़ीकरण के साथ उद्योग-मानक DevTools +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - उत्कृष्ट CSS Grid और accessibility टूल्स +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Microsoft के डेवलपर संसाधनों के साथ Chromium आधारित + +> ⚠️ **महत्वपूर्ण परीक्षण टिप**: हमेशा अपनी वेबसाइट्स को कई ब्राउज़रों में टेस्ट करें! जो Chrome में बिल्कुल सही काम करता है, वह Safari या Firefox में अलग दिख सकता है। पेशेवर डेवलपर्स सभी मुख्य ब्राउज़रों में परीक्षण करते हैं ताकि लगातार उपयोगकर्ता अनुभव सुनिश्चित हो सके। + + +### कमांड लाइन टूल्स: आपके डेवलपर सुपरपावर के द्वार + +ठीक है, आइए कमांड लाइन के बारे में पूरी ईमानदारी से बात करें, क्योंकि मैं चाहता हूं कि आप इसे किसी से सुनें जो वास्तव में इसे समझता है। जब मैंने इसे पहली बार देखा – यह सिर्फ एक डरावनी काली स्क्रीन थी जिसमें टेबलाइट टेक्स्ट चमक रहा था – मैं सच में सोच रहा था, "नहीं, बिल्कुल नहीं! यह कुछ 1980 के दशक की हैकर मूवी जैसा लग रहा है, और मैं इसके लिए बिल्कुल स्मार्ट नहीं हूं!" 😅 + +लेकिन यहां जो मैं चाहता हूं कि कोई तब मुझे बताता, और मैं आपको अभी बता रहा हूं: कमांड लाइन डरावनी नहीं है – यह वास्तव में आपके कंप्यूटर से सीधे बातचीत करने जैसा है। इसे ऐसे समझिए जैसे खाना ऑर्डर करना एक खूबसूरत ऐप सेPictures और मेनू के साथ (जो आसान और सुंदर है) के बजाय अपने पसंदीदा स्थानीय रेस्तरां में जाना, जहां शेफ को पता है कि आपको क्या पसंद है और वह "मुझे कुछ आश्चर्यजनक दें" कहने मात्र से कुछ परफेक्ट बनाने लगता है। + +कमांड लाइन वह जगह है जहां डेवलपर्स खुद को जादूगर महसूस करते हैं। आप कुछ जादुई शब्द टाइप करते हैं (ठीक है, ये सिर्फ कमांड हैं, लेकिन वे जादूई लगते हैं!), एंटर दबाते हैं और झट से – आपने पूरे प्रोजेक्ट स्ट्रक्चर बनाए, दुनिया भर से पावरफुल टूल्स इंस्टॉल किए, या अपनी ऐप को इंटरनेट पर करोड़ों लोगों के देखने के लिए डिप्लॉय कर दिया। एक बार जब आप इस शक्ति का पहला स्वाद चख लेते हैं, तो यह सचमुच बहुत लगने वाला होता है! + +**कमांड लाइन आपका पसंदीदा टूल क्यों बनेगा:** + +जबकि ग्राफिकल इंटरफेस कई कार्यों के लिए बढ़िया हैं, कमांड लाइन ऑटोमेशन, सटीकता, और गति में उत्कृष्ट है। कई डेवलपमेंट टूल मुख्य रूप से कमांड लाइन इंटरफेस के माध्यम से काम करते हैं, और उन्हें कुशलतापूर्वक उपयोग करना सीखना आपकी उत्पादकता को नाटकीय रूप से बढ़ा सकता है। + +```bash +# चरण 1: प्रोजेक्ट निर्देशिका बनाएँ और उसमें जाएँ +mkdir my-awesome-website +cd my-awesome-website +``` + +**यह कोड क्या करता है:** +- **"my-awesome-website" नाम का नया डायरेक्ट्री बनाएं** अपने प्रोजेक्ट के लिए +- **नए बनाए गए डायरेक्ट्री में प्रवेश करें** काम शुरू करने के लिए + +```bash +# चरण 2: package.json के साथ प्रोजेक्ट प्रारंभ करें +npm init -y + +# आधुनिक विकास उपकरण स्थापित करें +npm install --save-dev vite prettier eslint +npm install --save-dev @eslint/js +``` + +**कदम दर कदम, यह हो रहा है:** +- `npm init -y` के साथ डिफ़ॉल्ट सेटिंग्स से नया Node.js प्रोजेक्ट इनिशियलाइज़ करना +- तेज़ विकास और उत्पादन बिल्ड्स के लिए Vite को आधुनिक बिल्ड टूल के रूप में इंस्टॉल करना +- स्वचालित कोड प्रारूपण के लिए Prettier और कोड गुणवत्ता जांच के लिए ESLint जोड़ना +- इन्हें विकास-केवल निर्भरताओं के रूप में चिह्नित करने के लिए `--save-dev` फ़्लैग का इस्तेमाल + +```bash +# चरण 3: परियोजना संरचना और फ़ाइलें बनाएं +mkdir src assets +echo 'My Site

Hello World

' > index.html + +# विकास सर्वर शुरू करें +npx vite +``` + +**ऊपर, हमने किया है:** +- स्रोत कोड और एसेट्स के लिए अलग-अलग फोल्डर बनाकर अपने प्रोजेक्ट को व्यवस्थित किया +- उचित डॉक्युमेंट संरचना के साथ एक बुनियादी HTML फ़ाइल जनरेट की +- लाइव रीलोडिंग और हॉट मॉड्यूल रिप्लेसमेंट के लिए Vite डेवलपमेंट सर्वर शुरू किया + +#### वेब विकास के लिए आवश्यक कमांड लाइन टूल्स + +| टूल | उद्देश्य | आपको इसकी जरूरत क्यों है | +|------|---------|-------------------------| +| **[Git](https://git-scm.com/)** | वर्शन कंट्रोल | परिवर्तन ट्रैक करें, दूसरों के साथ सहयोग करें, अपने काम का बैकअप लें | +| **[Node.js & npm](https://nodejs.org/)** | जावास्क्रिप्ट रनटाइम & पैकेज मैनेजमेंट | ब्राउज़र के बाहर जावास्क्रिप्ट चलाएं, आधुनिक विकास टूल्स इंस्टॉल करें | +| **[Vite](https://vitejs.dev/)** | बिल्ड टूल & देव सर्वर | हॉट मॉड्यूल रिप्लेसमेंट के साथ तेज़ विकास | +| **[ESLint](https://eslint.org/)** | कोड क्वालिटी | अपने जावास्क्रिप्ट में समस्याओं को स्वचालित रूप से खोजें और ठीक करें | +| **[Prettier](https://prettier.io/)** | कोड फ़ॉर्मेटिंग | अपने कोड को लगातार फार्मेटेड और पठनीय रखें | + +#### प्लेटफ़ॉर्म-विशिष्ट विकल्प + +**Windows:** +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - आधुनिक, फीचर-समृद्ध टर्मिनल +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - शक्तिशाली स्क्रिप्टिंग वातावरण +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - पारंपरिक विंडोज़ कमांड लाइन + +**macOS:** +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - बिल्ट-इन टर्मिनल एप्लीकेशन +- **[iTerm2](https://iterm2.com/)** - उन्नत फीचर्स के साथ बेहतर टर्मिनल + +**Linux:** +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - स्टैण्डर्ड लिनक्स शेल +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - उन्नत टर्मिनल इम्यूलेटर + +> 💻 = ऑपरेटिंग सिस्टम पर पूर्व-इंस्टॉल्ड + +> 🎯 **शिक्षा मार्ग**: पहले `cd` (डायरेक्ट्री बदलें), `ls` या `dir` (फाइल सूची), और `mkdir` (फोल्डर बनाएं) जैसे बुनियादी कमांड से शुरू करें। आधुनिक वर्कफ़्लो कमांड जैसे `npm install`, `git status`, और `code .` (VS Code में वर्तमान डायरेक्ट्री खोलें) का अभ्यास करें। जैसे-जैसे आप सहज होते जाएंगे, आप स्वाभाविक रूप से अधिक उन्नत कमांड और ऑटोमेशन तकनीकें सीख जाएंगे। + + +### दस्तावेज़ीकरण: आपकी हमेशा उपलब्ध सीखने वाली मेंटोर + +ठीक है, मैं एक छोटा सा रहस्य साझा करता हूं जो आपको शुरुआत वाले होने का एहसास बहुत अच्छा कराएगा: यहां तक कि सबसे अनुभवी डेवलपर्स भी अपने समय का बड़ा हिस्सा दस्तावेज़ पढ़ने में बिताते हैं। और ऐसा इसलिए नहीं कि वे नहीं जानते कि वे क्या कर रहे हैं – यह वास्तव में समझदारी का संकेत है! + +दस्तावेज़ीकरण को दुनिया के सबसे धैर्यशील, ज्ञानवान शिक्षकों की तरह सोचें जो 24/7 उपलब्ध हैं। अगर आप 2 बजे रात को किसी समस्या में फंस जाते हैं, तो दस्तावेज़ीकरण आपके लिए एक गर्म वर्चुअल गले के साथ है, और बिल्कुल वही उत्तर प्रदान करता है जिसकी आपको आवश्यकता है। अगर आप किसी नई कूल फीचर के बारे में जानना चाहते हैं जिसकी हर कोई बात कर रहा है, तो दस्तावेज़ीकरण कदम-दर-कदम उदाहरणों के साथ आपके साथ है। अगर आप समझना चाहते हैं कि कुछ क्यों वैसा काम करता है जैसा करता है, तो आपने सही पकड़ा – दस्तावेज़ीकरण इसे समझाने के लिए तैयार है ताकि वह अंततः समझ में आए! + +यह कुछ ऐसा है जिसने मेरी सोच पूरी तरह बदल दी: वेब विकास की दुनिया बहुत तेज़ी से बदलती है, और कोई भी (बहुत बड़े अनुभव वाले भी!) हर चीज़ को याद नहीं रख पाते। मैंने 15+ वर्षों के अनुभवी सीनियर डेवलपर्स को बुनियादी सिंटैक्स खोजते हुए देखा है, और आप जानते हैं? यह शर्मनाक नहीं है – यह स्मार्ट है! यह एक आदर्श स्मृति रखने के बारे में नहीं है, बल्कि जानना है कि भरोसेमंद उत्तर तेजी से कहां मिलेंगे और उन्हें कैसे लागू किया जाए। + +**यहां असली जादू होता है:** + +पेशेवर डेवलपर्स अपने समय का एक बड़ा हिस्सा दस्तावेज़ पढ़ने में बिताते हैं – यह इसलिए नहीं कि वे नहीं जानते कि वे क्या कर रहे हैं, बल्कि क्योंकि वेब विकास का क्षेत्र इतनी तेजी से विकसित होता है कि अद्यतित रहना निरंतर सीखने की मांग करता है। अच्छी दस्तावेज़ीकरण आपको यह समझने में मदद करता है कि न केवल *कैसे* कुछ उपयोग करें, बल्कि *क्यों* और *कब* इसका उपयोग करें। + +#### आवश्यक दस्तावेज़ीकरण संसाधन + +**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** +- वेब तकनीक के लिए स्वर्ण मानक डॉक्यूमेंटेशन +- HTML, CSS, और जावास्क्रिप्ट के लिए व्यापक मार्गदर्शिकाएँ +- ब्राउज़र संगतता जानकारी शामिल है +- व्यावहारिक उदाहरण और इंटरएक्टिव डेमो फीचर करते हैं + +**[Web.dev](https://web.dev)** (गूगल द्वारा) +- आधुनिक वेब विकास सर्वोत्तम प्रथाएँ +- प्रदर्शन अनुकूलन मार्गदर्शिकाएँ +- सुलभता और समावेशी डिजाइन सिद्धांत +- वास्तविक परियोजनाओं से केस स्टडीज़ + +**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** +- Edge ब्राउज़र विकास संसाधन +- प्रोग्रेसिव वेब ऐप मार्गदर्शिकाएँ +- क्रॉस-प्लेटफ़ॉर्म विकास अंतर्दृष्टि + +**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** +- संरचित सीखने के पाठ्यक्रम +- उद्योग विशेषज्ञों के वीडियो कोर्स +- व्यावहारिक कोडिंग अभ्यास + +> 📚 **अध्ययन रणनीति**: दस्तावेज़ीकरण को याद करने की कोशिश न करें – इसके बजाय, इसे कुशलतापूर्वक नेविगेट करना सीखें। अक्सर उपयोग किए जाने वाले संदर्भों को बुकमार्क करें और विशिष्ट जानकारी तेजी से खोजने के लिए खोज फ़ंक्शन का अभ्यास करें। + +### 🔧 **टूल महारत जांच: आपके साथ क्या घुलमिलता है?** + +**एक पल सोचें:** +- आप सबसे पहले किस टूल को आजमाने के लिए सबसे अधिक उत्साहित हैं? (यहाँ कोई गलत जवाब नहीं है!) +- क्या कमांड लाइन अभी भी डरावना लगता है, या इसके प्रति आपकी जिज्ञासा बढ़ी है? +- क्या आप ब्राउज़र DevTools का उपयोग करके अपनी पसंदीदा वेबसाइट्स के पर्दे के पीछे झांकने की कल्पना कर सकते हैं? + +```mermaid +pie title "उपकरणों के साथ डेवलपर द्वारा बिताया गया समय" + "कोड संपादक" : 40 + "ब्राउज़र परीक्षण" : 25 + "कमांड लाइन" : 15 + "दस्तावेज पढ़ना" : 15 + "डिबगिंग" : 5 +``` +> **मज़ेदार तथ्य**: अधिकांश डेवलपर्स अपने कोड संपादक में लगभग 40% समय बिताते हैं, लेकिन ध्यान दें कि कितनी देर टेस्टिंग, सीखने, और समस्या-समाधान में जाता है। प्रोग्रामिंग केवल कोड लिखने के बारे में नहीं है – यह अनुभव बनाने के बारे में है! + +✅ **सोचने के लिए भोजन**: ये एक दिलचस्प बात है – आप कैसे सोचते हैं कि वेबसाइट बनाने के लिए उपयोग किए जाने वाले टूल (विकास) और उनकी दिखावट डिजाइन करने के टूल (डिजाइन) में क्या अंतर है? यह बिलकुल ऐसा है जैसे एक आर्किटेक्ट जो सुंदर घर डिजाइन करता है और बिल्डर जो उसे वास्तव में बनाता है। दोनों महत्वपूर्ण हैं, लेकिन उनके लिए अलग टूलबॉक्स की जरूरत होती है! इस सोच से आपको यह देखने में मदद मिलेगी कि वेबसाइटें कैसे जीवित होती हैं। + +## GitHub Copilot एजेंट चुनौती 🚀 + +एजेंट मोड का उपयोग करके निम्न चुनौती पूरी करें: + +**विवरण:** एक आधुनिक कोड संपादक या IDE की विशेषताओं का अन्वेषण करें और दिखाएं कि यह वेब डेवलपर के रूप में आपके वर्कफ़्लो में कैसे सुधार कर सकता है। + +**प्रॉम्प्ट:** एक कोड संपादक या IDE चुनें (जैसे Visual Studio Code, WebStorm, या क्लाउड-आधारित IDE)। तीन ऐसी विशेषताएँ या एक्सटेंशंस सूचीबद्ध करें जो आपको कोड लिखने, डिबग करने, या बनाए रखने में अधिक कुशल बनाती हैं। प्रत्येक के लिए संक्षिप्त व्याख्या दें कि यह आपके वर्कफ़्लो को कैसे लाभ पहुंचाती है। --- ## 🚀 चुनौती -कुछ प्रोग्रामिंग भाषाओं की तुलना करें। JavaScript बनाम Java की कुछ अनूठी विशेषताएं क्या हैं? COBOL बनाम Go के बारे में क्या? +**ठीक है, जासूस, अपने पहले मामले के लिए तैयार हो?** + +अब जब आपके पास यह शानदार नींव है, तो मेरे पास एक रोमांचक यात्रा है जो आपको दिखाएगी कि प्रोग्रामिंग की दुनिया कितनी विविध और दिलचस्प है। और सुनिए – यह अभी कोड लिखने के बारे में नहीं है, इसलिए कोई दबाव नहीं! अपने आप को एक प्रोग्रामिंग भाषा जासूस के रूप में सोचिए जो अपने पहले रोमांचक मामले पर है! + +**आपका मिशन, यदि आप स्वीकार करें:** +1. **भाषा के अन्वेषक बनें**: पूरी तरह से अलग-अलग यूनिवर्स से तीन प्रोग्रामिंग भाषाएँ चुनें – शायद एक जो वेबसाइट बनाए, एक जो मोबाइल ऐप्स बनाता हो, और एक जो वैज्ञानिकों के लिए डेटा प्रोसेस करता हो। प्रत्येक भाषा में एक ही सरल कार्य के उदाहरण खोजें। मैं वादा करता हूं कि आप चकित रह जाएंगे कि ये भाषाएँ एक ही काम करते हुए कितनी अलग दिख सकती हैं! -## पोस्ट-लेक्चर क्विज़ -[पोस्ट-लेक्चर क्विज़](https://ff-quizzes.netlify.app/web/) +2. **उनकी उत्पत्ति की कहानियां खोजें**: प्रत्येक भाषा को विशेष क्या बनाता है? एक दिलचस्प तथ्य – प्रत्येक प्रोग्रामिंग भाषा इसलिए बनाई गई थी क्योंकि किसी ने सोचा, "मालूम है? इस विशिष्ट समस्या को हल करने का एक बेहतर तरीका होना चाहिए।" क्या आप उन समस्याओं का पता लगा सकते हैं? इनमें से कुछ कहानियाँ वास्तव में आकर्षक हैं! + +3. **समुदायों से मिलें**: देखें कि प्रत्येक भाषा का समुदाय कितना स्वागतयोग्य और उत्साहित है। कुछ में लाखों डेवलपर्स ज्ञान साझा करते हैं और एक-दूसरे की मदद करते हैं, अन्य छोटे लेकिन बेहद घनिष्ठ और सहायक होते हैं। आप ये विभिन्न समुदायों की अलग-अलग पर्सनैलिटीज़ देखकर मजा आएगा! + +4. **अपने दिल की सुनें**: अभी आपके लिए कौन सी भाषा सबसे अधिक पहुँच वाली लगती है? "सही" विकल्प चुनने की चिंता न करें – बस अपनी अंतर्दृष्टि पर भरोसा करें! यहां कोई गलत जवाब नहीं है, और आप बाद में अन्य भाषाओं का पता लगा सकते हैं। + +**बोनस जासूसी कार्य**: देखें कि आप पता लगा सकते हैं कि कौन सी प्रमुख वेबसाइट्स या ऐप्स किस भाषा से बनाई गई हैं। मैं गारंटीकृत करता हूं कि आप चौंक जाएंगे यह जानकर कि Instagram, Netflix, या वह मोबाइल गेम जिसे आप रोक नहीं पा रहे हैं, किस पर चलते हैं! + +> 💡 **याद रखें**: आप आज किसी भी भाषा में विशेषज्ञ बनने की कोशिश नहीं कर रहे हैं। आप बस इस पड़ोस को जान रहे हैं इससे पहले कि आप तय करें कि आप कहां जगह बनाना चाहते हैं। अपनी गति से चलें, मज़े करें, और अपने जिज्ञासा को मार्गदर्शन दें! + +## चलिए आपकी खोज का जश्न मनाते हैं! + +हे भगवान, आपने आज बहुत सारी अविश्वसनीय जानकारी जुटाई है! मैं सच में उत्सुक हूं देखना कि इस अद्भुत यात्रा का कितना हिस्सा आपके साथ रहा। और याद रखें – यह कोई टेस्ट नहीं है जहाँ आपको सब कुछ सही करना है। यह तो बस उस दिलचस्प दुनिया के बारे में आपने जितना कुछ सीखा है, उसका जश्न मनाने जैसा है जिसमें आप अब डुबकी लगाने वाले हैं! + +[पाठ के बाद क्विज़ लें](https://ff-quizzes.netlify.app/web/) +## समीक्षा और स्वयं अध्ययन + +**इससे जुड़ने में समय लें और आनंद लें!** + +आपने आज बहुत कुछ सीखा है, और यह गर्व करने वाली बात है! अब मज़ेदार हिस्सा आता है – उन विषयों को खोजने का जो आपकी जिज्ञासा को जन्म देते हैं। याद रखें, यह गृहकार्य नहीं है – यह एक साहसिक यात्रा है! + +**जो आपको उत्साहित करता है उसमें गहराई से डुबकी लगाएं:** + +**प्रोग्रामिंग भाषाओं के साथ व्यावहारिक करें:** +- उन 2-3 भाषाओं की आधिकारिक वेबसाइटों पर जाएँ जिन्होंने आपकी रुचि आकर्षित की। हर एक की अपनी खासियत और कहानी होती है! +- कुछ ऑनलाइन कोडिंग प्लेग्राउंड जैसे [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), या [Replit](https://replit.com/) आज़माएँ। प्रयोग करने से मत घबराएं – आप कुछ भी खराब नहीं कर सकते! +- अपनी पसंदीदा भाषा के उद्भव के बारे में पढ़ें। सच बताऊँ तो, कुछ मूल कहानीें बहुत रोचक होती हैं और यह समझने में मदद करती हैं कि भाषाएँ जिस तरह काम करती हैं, क्यों करती हैं। + +**अपने नए उपकरणों के साथ सहज हो जाएं:** +- अगर आपने अभी तक Visual Studio Code डाउनलोड नहीं किया है – इसे डाउनलोड करें, यह मुफ़्त है और आपको यह पसंद आएगा! +- एक्सटेंशंस मार्केटप्लेस में कुछ मिनट बिताएं। यह आपके कोड संपादक के लिए एक ऐप स्टोर जैसा है! +- अपने ब्राउज़र के डेवलपर टूल्स खोलें और बस क्लिक करें। सब कुछ समझने की चिंता न करें – बस वहां क्या है उससे परिचित हो जाएं। + +**समुदाय से जुड़ें:** +- [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), या [GitHub](https://github.com/) पर कुछ डेवलपर समुदायों का अनुसरण करें। प्रोग्रामिंग समुदाय नए सदस्यों का बेहद स्वागत करता है! +- यूट्यूब पर शुरुआती लोगों के लिए कोडिंग वीडियो देखें। वहाँ बहुत सारे महान निर्माता हैं जो जानते हैं कि शुरूआत करना कैसा होता है। +- स्थानीय मीटअप या ऑनलाइन समुदायों में शामिल होने पर विचार करें। मुझ पर विश्वास करें, डेवलपर्स नए लोगों की मदद करना पसंद करते हैं! + +> 🎯 **सुनिए, मैं चाहता हूँ आप याद रखें**: आपसे उम्मीद नहीं है कि आप एक रात में कोडिंग के जादूगर बन जाएं! अभी आप बस इस अद्भुत नई दुनिया को जान रहे हैं जिसका आप हिस्सा बनने वाले हैं। अपना समय लें, यात्रा का आनंद लें, और याद रखें – हर एक डेवलपर जिसे आप पसंद करते हैं, कभी वैसे ही था जैसे आप अभी हैं, उत्साहित और शायद थोड़ा अभिभूत। यह बिलकुल सामान्य है, और इसका मतलब है कि आप सही दिशा में हैं! -## समीक्षा और स्व-अध्ययन -प्रोग्रामर के लिए उपलब्ध विभिन्न भाषाओं पर थोड़ा अध्ययन करें। एक भाषा में एक लाइन लिखने का प्रयास करें, और फिर इसे दो अन्य भाषाओं में फिर से लिखें। आपने क्या सीखा? ## असाइनमेंट -[डॉक्स पढ़ना](assignment.md) +[Reading the Docs](assignment.md) -> नोट: अपने असाइनमेंट के लिए उपकरण चुनते समय, ऊपर सूचीबद्ध एडिटर्स, ब्राउज़र्स, या कमांड लाइन टूल्स का चयन न करें। +> 💡 **आपके असाइनमेंट के लिए एक छोटा सा सुझाव**: मैं सच में चाहता हूँ कि आप उन उपकरणों का अन्वेषण करें जिनके बारे में हमने अभी तक बात नहीं की! उन संपादकों, ब्राउज़रों और कमांड लाइन टूल्स को छोड़ दें जिनके बारे में हमने पहले ही चर्चा की है – वहाँ एक पूरी अद्भुत दुनिया है अद्भुत विकास उपकरणों की जो बस खोजे जाने की प्रतीक्षा कर रहे हैं। उन उपकरणों को खोजें जो सक्रिय रूप से बनाए रखे जाते हैं और जिनके जीवंत, सहायक समुदाय हैं (ऐसे समुदायों में सबसे अच्छे ट्यूटोरियल और सबसे मददगार लोग होते हैं, जब आप रास्ते में फंसे हों और किसी दोस्ताना मदद की ज़रूरत हो)। + +--- + +## 🚀 आपकी प्रोग्रामिंग यात्रा का समयरेखा + +### ⚡ **अगले 5 मिनट में आप क्या कर सकते हैं** +- [ ] 2-3 प्रोग्रामिंग भाषा की वेबसाइटें बुकमार्क करें जिन्होंने आपकी रुचि आकर्षित की +- [ ] Visual Studio Code डाउनलोड करें अगर आपने अभी तक नहीं किया है +- [ ] अपने ब्राउज़र के डेवटूल्स (F12) खोलें और किसी भी वेबसाइट पर क्लिक करें +- [ ] एक प्रोग्रामिंग समुदाय में शामिल हों (Dev.to, Reddit r/webdev, या Stack Overflow) + +### ⏰ **इस घंटे में आप क्या पूरा कर सकते हैं** +- [ ] पोस्ट-लैसन क्विज़ पूरा करें और अपने उत्तरों पर विचार करें +- [ ] GitHub Copilot एक्सटेंशन के साथ VS Code सेट अप करें +- [ ] 2 अलग-अलग प्रोग्रामिंग भाषाओं में ऑनलाइन "Hello World" उदाहरण आज़माएँ +- [ ] यूट्यूब पर "डे इन द लाइफ ऑफ़ अ डेवलपर" वीडियो देखें +- [ ] अपनी प्रोग्रामिंग भाषा की जासूसी शुरू करें (चुनौती से) + +### 📅 **आपका सप्ताह भर का साहसिक कार्य** +- [ ] असाइनमेंट पूरा करें और 3 नए विकास उपकरणों का अन्वेषण करें +- [ ] सोशल मीडिया पर 5 डेवलपर्स या प्रोग्रामिंग अकाउंट्स का अनुसरण करें +- [ ] CodePen या Replit में कुछ छोटा बनाना आज़माएँ (यहाँ तक कि सिर्फ "Hello, [आपका नाम]!" भी हो सकता है) +- [ ] किसी डेवलपर की कोडिंग यात्रा से जुड़ी एक ब्लॉग पोस्ट पढ़ें +- [ ] एक वर्चुअल मीटअप में शामिल हों या प्रोग्रामिंग टॉक देखें +- [ ] ऑनलाइन ट्यूटोरियल के साथ अपनी चुनी हुई भाषा सीखना शुरू करें + +### 🗓️ **आपका महीने भर का परिवर्तन** +- [ ] अपनी पहली छोटी परियोजना बनाएं (यहाँ तक कि एक साधारण वेबपेज भी चलेगा!) +- [ ] एक ओपन-सोर्स प्रोजेक्ट में योगदान करें (डॉक्यूमेंटेशन सुधार से शुरुआत करें) +- [ ] किसी नए प्रोग्रामर का मार्गदर्शन करें जो अभी शुरुआत कर रहा हो +- [ ] अपनी डेवलपर पोर्टफोलियो वेबसाइट बनाएं +- [ ] स्थानीय डेवलपर समुदाय या अध्ययन समूहों से जुड़ें +- [ ] अपनी अगली सीखने की मील का पत्थर योजना बनाना शुरू करें + +### 🎯 **अंतिम चिंतन चेक-इन** + +**आगे बढ़ने से पहले, एक क्षण पहले जश्न मनाएं:** +- आज प्रोग्रामिंग के बारे में क्या चीज़ आपको सबसे ज़्यादा उत्साहित किया? +- किस उपकरण या अवधारणा को आप सबसे पहले खोजना चाहते हैं? +- इस प्रोग्रामिंग यात्रा की शुरुआत के बारे में आप कैसा महसूस कर रहे हैं? +- अभी आप डेवलपर से कौन सा सवाल पूछना चाहेंगे? + +```mermaid +journey + title आपकी आत्मविश्वास निर्माण यात्रा + section आज + जिज्ञासु: 3: You + अभिभूत: 4: You + उत्साहित: 5: You + section इस सप्ताह + खोज करना: 4: You + सीखना: 5: You + जुड़ना: 4: You + section अगला महीना + निर्माण करना: 5: You + आत्मविश्वासी: 5: You + दूसरों की मदद करना: 5: You +``` +> 🌟 **याद रखें**: हर विशेषज्ञ कभी शुरुआती था। हर वरिष्ठ डेवलपर ने कभी ऐसा ही महसूस किया था जैसे आप अभी कर रहे हैं – उत्साहित, शायद थोड़ा अभिभूत, और ज़रूर जिज्ञासु कि क्या संभव है। आप अद्भुत संगति में हैं, और यह यात्रा अविश्वसनीय होने वाली है। प्रोग्रामिंग की इस अद्भुत दुनिया में आपका स्वागत है! 🎉 --- -**अस्वीकरण**: -यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल दस्तावेज़, जो इसकी मूल भाषा में है, को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं। \ No newline at end of file + +**अस्वीकरण**: +यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या अशुद्धियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में अधिकृत स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सलाह दी जाती है। इस अनुवाद के उपयोग से होने वाली किसी भी गलतफहमी या व्याख्या के लिए हम उत्तरदायी नहीं हैं। + \ No newline at end of file diff --git a/translations/hi/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/hi/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md index 56879dbcc..d723c181f 100644 --- a/translations/hi/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md +++ b/translations/hi/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md @@ -1,31 +1,78 @@ +# असाइनमेंट: आधुनिक वेब विकास उपकरणों की खोज + ## निर्देश -वेब डेवलपर के लिए कई उपकरण उपलब्ध हैं, जो [MDN दस्तावेज़ में क्लाइंट-साइड टूलिंग](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) पर सूचीबद्ध हैं। **तीन उपकरण** चुनें जो **इस पाठ में शामिल नहीं हैं** (पाठ सामग्री या विशिष्ट उपकरणों को छोड़कर), और समझाएं कि **क्यों** एक वेब डेवलपर प्रत्येक उपकरण का उपयोग करेगा। प्रत्येक श्रेणी के लिए एक उपकरण खोजें। प्रत्येक के लिए, इसके आधिकारिक दस्तावेज़ का लिंक साझा करें (MDN पर उपयोग किए गए उदाहरण का नहीं)। +वेब विकास इकोसिस्टम में सैकड़ों विशिष्ट उपकरण होते हैं जो डेवलपर्स को एप्लिकेशन को प्रभावी ढंग से बनाने, परीक्षण करने, और बनाए रखने में मदद करते हैं। आपका कार्य उन उपकरणों का अध्ययन और समझ करना है जो इस पाठ में कवर किए गए उपकरणों के पूरक हैं। + +**आपका मिशन:** ऐसे **तीन उपकरणों** का चयन करें जो **इस पाठ में कवर नहीं किए गए हैं** (पहले से सूचीबद्ध कोड संपादक, ब्राउज़र या कमांड लाइन उपकरण चुनने से बचें)। उन उपकरणों पर ध्यान दें जो आधुनिक वेब विकास वर्कफ़्लो में विशिष्ट समस्याओं को हल करते हैं। + +**प्रत्येक उपकरण के लिए, प्रदान करें:** + +1. **उपकरण का नाम और श्रेणी** (जैसे "Figma - डिज़ाइन टूल" या "Jest - परीक्षण फ़्रेमवर्क") +2. **उद्देश्य और लाभ** - 2-3 वाक्यों में समझाएँ कि एक वेब डेवलपर इस उपकरण का उपयोग क्यों करेगा और यह कौन सी समस्याएँ हल करता है +3. **आधिकारिक दस्तावेज़ीकरण लिंक** - उपकरण के आधिकारिक दस्तावेज़ीकरण या वेबसाइट का लिंक प्रदान करें (केवल ट्यूटोरियल साइट्स नहीं) +4. **वास्तविक दुनिया का संदर्भ** - उल्लेख करें कि यह उपकरण पेशेवर विकास वर्कफ़्लो में कैसे फिट बैठता है + +## सुझाए गए उपकरण श्रेणियाँ + +इन श्रेणियों से उपकरणों को एक्सप्लोर करने पर विचार करें: + +| श्रेणी | उदाहरण | वे क्या करते हैं | +|----------|----------|--------------| +| **बिल्ड टूल्स** | Vite, Webpack, Parcel, esbuild | तेज विकास सर्वर के साथ उत्पादन के लिए कोड को बंडल और अनुकूलित करें | +| **परीक्षण फ़्रेमवर्क्स** | Vitest, Jest, Cypress, Playwright | सुनिश्चित करें कि कोड सही काम करता है और परिनियोजन से पहले बग पकड़ें | +| **डिज़ाइन टूल्स** | Figma, Adobe XD, Penpot | सहकारी रूप से मॉकअप, प्रोटोटाइप और डिज़ाइन सिस्टम बनाएं | +| **परिनियोजन प्लेटफ़ॉर्म** | Netlify, Vercel, Cloudflare Pages | स्वचालित CI/CD के साथ वेबसाइटों की होस्टिंग और वितरण करें | +| **संस्करण नियंत्रण** | GitHub, GitLab, Bitbucket | कोड परिवर्तनों, सहयोग और प्रोजेक्ट वर्कफ़्लो का प्रबंधन करें | +| **CSS फ़्रेमवर्क्स** | Tailwind CSS, Bootstrap, Bulma | पूर्व-निर्मित घटक पुस्तकालयों के साथ स्टाइलिंग को तेजी से करें | +| **पैकेज मैनेजर** | npm, pnpm, Yarn | कोड लाइब्रेरी और निर्भरताओं को इंस्टॉल और प्रबंधित करें | +| **सुलभता उपकरण** | axe-core, Lighthouse, Pa11y | समावेशी डिज़ाइन और WCAG अनुपालन के लिए परीक्षण करें | +| **API विकास** | Postman, Insomnia, Thunder Client | विकास के दौरान API का परीक्षण और दस्तावेज़ीकरण करें | + +## प्रारूप आवश्यकताएँ + +**प्रत्येक उपकरण के लिए:** +``` +### [Tool Name] - [Category] + +**Purpose:** [2-3 sentences explaining why developers use this tool] + +**Documentation:** [Official website/documentation link] + +**Workflow Integration:** [1 sentence about how it fits into development process] +``` + +## गुणवत्ता दिशानिर्देश -**प्रारूप:** -- उपकरण का नाम -- वेब डेवलपर इसका उपयोग क्यों करेगा (2-3 वाक्य) -- दस्तावेज़ का लिंक +- **वर्तमान उपकरण चुनें**: ऐसे उपकरण चुनें जो सक्रिय रूप से बनाए रखे जाते हैं और 2025 में व्यापक रूप से इस्तेमाल किए जाते हैं +- **मूल्य पर ध्यान दें**: केवल उपकरण क्या करता है यह न बताएं, बल्कि इसके विशिष्ट लाभ समझाएं +- **पेशेवर संदर्भ**: उन उपकरणों पर विचार करें जिनका उपयोग विकास टीम करती है, केवल व्यक्तिगत हॉबीइस्ट द्वारा नहीं +- **विविध चयन**: पारिस्थितिकी तंत्र की व्यापकता दिखाने के लिए विभिन्न श्रेणियों से उपकरण चुनें +- **आधुनिक प्रासंगिकता**: उन उपकरणों को प्राथमिकता दें जो वर्तमान वेब विकास रुझानों और सर्वोत्तम प्रथाओं के अनुरूप हों -**लंबाई:** -- प्रत्येक व्याख्या 2-3 वाक्य की होनी चाहिए। +## मानदंड -## मूल्यांकन मानदंड +| उत्कृष्ट | अच्छा | सुधार की जरूरत | +|-----------|------|-------------------| +| **स्पष्ट रूप से बताया कि डेवलपर्स प्रत्येक उपकरण का उपयोग क्यों करते हैं और यह किन समस्याओं को हल करता है** | **बताया कि उपकरण क्या करता है लेकिन उसके मूल्य के संदर्भ में कुछ विवरण छूट गए** | **केवल उपकरणों की सूची दी लेकिन उनके उद्देश्य या लाभ नहीं बताए** | +| **सभी उपकरणों के आधिकारिक दस्तावेज़ीकरण लिंक दिए** | **प्राय: आधिकारिक लिंक दिए, 1-2 ट्यूटोरियल साइट्स शामिल कीं** | **मुख्य रूप से ट्यूटोरियल साइट्स पर निर्भर रहे, आधिकारिक दस्तावेज़ के बजाय** | +| **विभिन्न श्रेणियों से वर्तमान पेशेवर उपकरण चुने** | **अच्छे उपकरण चुने पर श्रेणियों की विविधता कम थी** | **पुराने उपकरण चुने या केवल एक श्रेणी से** | +| **यह दिखाया कि उपकरण विकास वर्कफ़्लो में कैसे फिट होते हैं** | **पेशेवर संदर्भ का कुछ समझ दिखाई** | **केवल उपकरण फीचर्स पर ध्यान दिया, वर्कफ़्लो संदर्भ नहीं दिया** | -उत्कृष्ट | पर्याप्त | सुधार की आवश्यकता ---- | --- | -- | -समझाया कि वेब डेवलपर उपकरण का उपयोग क्यों करेगा | समझाया कि डेवलपर उपकरण का उपयोग कैसे करेगा, लेकिन क्यों नहीं | उल्लेख नहीं किया कि डेवलपर उपकरण का उपयोग कैसे या क्यों करेगा | +> 💡 **अनुसंधान सुझाव**: वेब डेवलपर्स के लिए जॉब पोस्टिंग देखें, लोकप्रिय डेवलपर सर्वेक्षण जांचें, या GitHub पर सफल ओपन-सोर्स प्रोजेक्ट्स की निर्भरताओं का पता लगाएं! --- + **अस्वीकरण**: -यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को आधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं। \ No newline at end of file +इस दस्तावेज़ का अनुवाद AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके किया गया है। जबकि हम सटीकता के लिए प्रयत्नशील हैं, कृपया ध्यान रखें कि स्वचालित अनुवादों में त्रुटियाँ या असंगतियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मातृभाषा में प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत अर्थ निकालने के लिए हम जिम्मेदार नहीं हैं। + \ No newline at end of file diff --git a/translations/hi/1-getting-started-lessons/2-github-basics/README.md b/translations/hi/1-getting-started-lessons/2-github-basics/README.md index e2143ee66..cf4884a33 100644 --- a/translations/hi/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/hi/1-getting-started-lessons/2-github-basics/README.md @@ -1,345 +1,777 @@ -# GitHub का परिचय - -यह पाठ GitHub के मूलभूत पहलुओं को कवर करता है, जो आपके कोड को होस्ट और प्रबंधित करने के लिए एक प्लेटफ़ॉर्म है। - -![GitHub का परिचय](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.hi.png) -> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा - +# GitHub परिचय + +नमस्ते, भविष्य के डेवलपर! 👋 क्या आप दुनिया भर के लाखों कोडर्स में शामिल होने के लिए तैयार हैं? मैं आपको GitHub से परिचित कराने के लिए वास्तव में उत्साहित हूँ – इसे प्रोग्रामर के लिए सोशल मीडिया प्लेटफ़ॉर्म समझिए, सिवाय इसके कि यहाँ आप अपने लंच की फोटो साझा करने के बजाय, कोड साझा करते हैं और साथ में अद्भुत चीजें बनाते हैं! + +यह बात जो मुझे बेहद चौंकाती है: आपके फोन का हर ऐप, हर वेबसाइट जो आप देखते हैं, और अधिकांश उपकरण जिन्हें आप सीखेंगे, उन सभी को डेवलपर्स की टीमों ने GitHub जैसे प्लेटफ़ॉर्म पर सहयोग करके बनाया है। जो म्यूजिक ऐप आपको पसंद है? कोई आपके जैसा व्यक्ति उसमें योगदान दे चुका है। वह गेम जिसे आप छोड़ नहीं पा रहे? हाँ, संभवतः GitHub सहयोग से बनायी गई है। और अब आप यह सीखने वाले हैं कि उस अद्भुत समुदाय का हिस्सा कैसे बने! + +मुझे पता है कि यह शुरुआत में थोड़ा भारी लग सकता है – सच कहूँ तो, मैं पहली बार GitHub पेज पर देखकर यही सोचता था "यह सब आखिर क्या मतलब है?" लेकिन बात यह है: हर डेवलपर ठीक उसी जगह से शुरू हुआ जहाँ आप अभी हैं। इस पाठ के अंत तक, आपके पास अपना खुद का GitHub रेपोजिटरी होगा (इसे अपने क्लाउड में व्यक्तिगत प्रोजेक्ट शोकेस समझें), और आप जानेंगे कि अपने काम को कैसे सेव करना है, दूसरों के साथ साझा करना है, और उन प्रोजेक्ट्स में कैसे योगदान देना है जिन्हें लाखों लोग उपयोग करते हैं। + +हम इस यात्रा को साथ-साथ कदम दर कदम तय करेंगे। कोई जल्दी नहीं, कोई दबाव नहीं – सिर्फ आप, मैं, और कुछ बहुत ही बढ़िया टूल्स जो आपके नए सबसे अच्छे दोस्त बनने वाले हैं! + +![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.hi.png) +> स्केचनोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा + +```mermaid +journey + title आपका GitHub साहसिक कार्य आज + section सेटअप + Install Git: 4: You + Create Account: 5: You + First Repository: 5: You + section मास्टर Git + Local Changes: 4: You + Commits & Pushes: 5: You + Branching: 4: You + section सहयोग करें + Fork Projects: 4: You + Pull Requests: 5: You + Open Source: 5: You +``` ## प्री-लेक्चर क्विज़ [प्री-लेक्चर क्विज़](https://ff-quizzes.netlify.app) ## परिचय -इस पाठ में हम निम्नलिखित विषयों को कवर करेंगे: +असल में मजेदार चीज़ों में जाने से पहले, आइए आपके कंप्यूटर को GitHub के लिए तैयार करें! इसे इस तरह सोचें जैसे कि आप अपने कला के सामान को व्यवस्थित कर रहे हों ताकि आप एक मास्टरपीस बना सकें – सही टूल्स होना सब कुछ बहुत आसान और मज़ेदार बनाता है। + +मैं आपको व्यक्तिगत रूप से हर सेटअप स्टेप के माध्यम से मार्गदर्शन करूँगा, और वादा करता हूँ कि यह उतना डरावना नहीं है जितना पहली नजर में लग सकता है। अगर कुछ तुरंत समझ में न आये, तो चिंता मत करें! मुझे याद है कि जब मैंने पहली बार अपना विकास वातावरण सेटअप किया था, तो मुझे लग रहा था जैसे मैं प्राचीन चित्रलिपियाँ पढ़ रहा हूँ। हर डेवलपर ठीक आपकी तरह ही शुरू करता है, यह सोचते हुए कि क्या वे सही कर रहे हैं। ध्यान रखें: अगर आप यहाँ सीख रहे हैं, तो आप पहले से ही सही कर रहे हैं! 🌟 + +इस पाठ में हम कवर करेंगे: -- आपके मशीन पर किए गए कार्य को ट्रैक करना -- अन्य लोगों के साथ प्रोजेक्ट पर काम करना -- ओपन सोर्स सॉफ़्टवेयर में योगदान कैसे करें +- अपने मशीन पर किए गए कार्य को ट्रैक करना +- दूसरों के साथ प्रोजेक्ट्स पर काम करना +- ओपन सोर्स सॉफ़्टवेयर में योगदान कैसे दें -### आवश्यकताएँ +### पूर्वापेक्षाएँ -शुरू करने से पहले, आपको यह जांचना होगा कि Git इंस्टॉल है या नहीं। टर्मिनल में टाइप करें: +आइए आपके कंप्यूटर को GitHub के लिए तैयार करें! चिंता मत करें – यह सेटअप एक बार करना होता है, उसके बाद आपका पूरा कोडिंग सफर आसान हो जाता है। + +सबसे पहले, हमें देखना होगा कि क्या Git पहले से आपके कंप्यूटर पर मौजूद है। Git एक सुपर-स्मार्ट सहायक की तरह है जो आपके कोड में किए गए हर बदलाव को याद रखता है – Ctrl+S बार-बार दबाने से कहीं बेहतर (हम सभी इससे गुजरते हैं!)। + +अपने टर्मिनल में यह जादुई कमांड टाइप करके देखें कि Git पहले से इंस्टॉल है या नहीं: `git --version` -यदि Git इंस्टॉल नहीं है, तो [Git डाउनलोड करें](https://git-scm.com/downloads)। फिर, अपने स्थानीय Git प्रोफ़ाइल को टर्मिनल में सेटअप करें: -* `git config --global user.name "your-name"` -* `git config --global user.email "your-email"` +अगर Git नहीं है, तो कोई बात नहीं! बस [download Git](https://git-scm.com/downloads) पर जाइए और इसे डाउनलोड करें। इंस्टॉल कर लेने के बाद, हमें Git को अपने बारे में बताना होगा: + +> 💡 **पहला सेटअप:** ये कमांड Git को बताते हैं कि आप कौन हैं। यह जानकारी आपके हर कमिट से जुड़ी होगी, इसलिए ऐसा नाम और ईमेल चुनें जिसे आप सार्वजनिक रूप से साझा करने में सहज हों। + +```bash +git config --global user.name "your-name" +git config --global user.email "your-email" +``` + +Git पहले से कॉन्फ़िगर है या नहीं यह जांचने के लिए टाइप करें: +```bash +git config --list +``` -यह जांचने के लिए कि Git पहले से कॉन्फ़िगर है या नहीं, आप टाइप कर सकते हैं: -`git config --list` +आपको एक GitHub अकाउंट, एक कोड एडिटर (जैसे Visual Studio Code), और अपना टर्मिनल (या: कमांड प्रॉम्प्ट) खोलना होगा। -आपको एक GitHub खाता, एक कोड एडिटर (जैसे Visual Studio Code), और टर्मिनल (या: कमांड प्रॉम्प्ट) खोलने की आवश्यकता होगी। +[jithub.com](https://github.com/) पर जाएं और अगर आपका अकाउंट नहीं है तो बनाएं, या लॉगिन करें और अपनी प्रोफ़ाइल भरें। -[github.com](https://github.com/) पर जाएं और यदि आपने पहले से खाता नहीं बनाया है तो एक खाता बनाएं, या लॉग इन करें और अपनी प्रोफ़ाइल भरें। +💡 **आधुनिक सुझाव:** पासवर्ड की जरूरत के बिना आसान प्रमाणीकरण के लिए [SSH keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) सेटअप करें या [GitHub CLI](https://cli.github.com/) उपयोग करें। -✅ GitHub दुनिया में एकमात्र कोड रिपॉजिटरी नहीं है; अन्य भी हैं, लेकिन GitHub सबसे प्रसिद्ध है। +✅ GitHub दुनिया का एकमात्र कोड रेपोजिटरी नहीं है; और भी हैं, लेकिन GitHub सबसे प्रसिद्ध है ### तैयारी -आपको अपने स्थानीय मशीन (लैपटॉप या पीसी) पर एक कोड प्रोजेक्ट के साथ एक फ़ोल्डर और GitHub पर एक सार्वजनिक रिपॉजिटरी की आवश्यकता होगी, जो दूसरों के प्रोजेक्ट्स में योगदान करने के तरीके के उदाहरण के रूप में काम करेगा। +आपके पास एक लोकल मशीन (लैपटॉप या पीसी) पर कोड प्रोजेक्ट वाला फोल्डर होना चाहिए, और GitHub पर एक सार्वजनिक रेपोजिटरी, जो दूसरों के प्रोजेक्ट को योगदान देने के उदाहरण के रूप में काम करेगी। ---- +### अपने कोड को सुरक्षित रखना + +सुरक्षा के बारे में थोड़ी बात करते हैं – पर घबराइए मत, हम आपको डरावनी बातें सुनाने नहीं आ रहे! सुरक्षा की आदतों को ऐसे सोचें जैसे आप अपनी कार या घर को लॉक करते हैं। ये सरल आदतें हैं जो आपके कड़ी मेहनत को सुरक्षित रखती हैं। + +हम आपको शुरु से ही GitHub के आधुनिक, सुरक्षित तरीकों से काम करना सिखाएंगे। इस तरह, आप अच्छे सुरक्षा आदतें विकसित करेंगे जो आपकी पूरी कोडिंग यात्रा में काम आएंगी। + +GitHub के साथ काम करते समय सुरक्षा की सर्वोत्तम प्रथाएँ अपनाना जरूरी है: + +| सुरक्षा क्षेत्र | सर्वोत्तम प्रथा | क्यों महत्वपूर्ण है | +|---------------|----------------|-------------------| +| **प्रमाणीकरण** | SSH keys या व्यक्तिगत एक्सेस टोकन का उपयोग करें | पासवर्ड कम सुरक्षित होते हैं और धीरे-धीरे हटाए जा रहे हैं | +| **दो-कारक प्रमाणीकरण** | अपने GitHub अकाउंट पर 2FA सक्षम करें | आपके अकाउंट की सुरक्षा को अतिरिक्त स्तर देता है | +| **रेपोजिटरी सुरक्षा** | संवेदनशील जानकारी कभी कमिट न करें | API keys और पासवर्ड को सार्वजनिक रेपोजिटरी में नहीं रखना चाहिए | +| **निर्भरता प्रबंधन** | अपडेट के लिए Dependabot सक्षम करें | आपकी निर्भरताओं को सुरक्षित और नवीनतम रखता है | -## कोड प्रबंधन +> ⚠️ **महत्वपूर्ण सुरक्षा चेतावनी:** API keys, पासवर्ड या कोई अन्य संवेदनशील जानकारी कभी भी किसी रेपोजिटरी में कमिट न करें। संवेदनशील डेटा की सुरक्षा के लिए पर्यावरण चर और `.gitignore` फ़ाइलों का उपयोग करें। -मान लें कि आपके पास स्थानीय रूप से एक कोड प्रोजेक्ट के साथ एक फ़ोल्डर है और आप git - संस्करण नियंत्रण प्रणाली का उपयोग करके अपनी प्रगति को ट्रैक करना शुरू करना चाहते हैं। कुछ लोग git का उपयोग करने की तुलना भविष्य के लिए खुद को एक प्रेम पत्र लिखने से करते हैं। जब आप अपने कमिट संदेशों को दिनों, हफ्तों या महीनों बाद पढ़ेंगे, तो आप यह याद कर पाएंगे कि आपने कोई निर्णय क्यों लिया था, या किसी बदलाव को "रोलबैक" कर सकते हैं - बशर्ते आपने अच्छे "कमिट संदेश" लिखे हों। +**आधुनिक प्रमाणीकरण सेटअप:** -### कार्य: एक रिपॉजिटरी बनाएं और कोड कमिट करें +```bash +# SSH कुंजी उत्पन्न करें (आधुनिक ed25519 एल्गोरिदम) +ssh-keygen -t ed25519 -C "your_email@example.com" + +# SSH का उपयोग करने के लिए Git सेट करें +git remote set-url origin git@github.com:username/repository.git +``` + +> 💡 **प्रो टिप:** SSH keys बार-बार पासवर्ड डालने की जरूरत खत्म कर देती हैं और पारंपरिक प्रमाणीकरण तरीकों से अधिक सुरक्षित होती हैं। + +--- + +## अपने कोड को प्रो की तरह मैनेज करना + +ठीक है, यहाँ चीजें वास्तव में मज़ेदार होने वाली हैं! 🎉 हम सीखने जा रहे हैं कि कोड को प्रोफेशनल की तरह ट्रैक और मैनेज कैसे किया जाता है, और सच कहूँ तो यह मेरी सबसे पसंदीदा चीज़ों में से एक है क्योंकि यह एक बड़ा गेम-चेंजर है। + +कल्पना कीजिए: आप एक अद्भुत कहानी लिख रहे हैं, और आप हर ड्राफ्ट, हर शानदार संशोधन, और हर "रुको, ये तो ज़बरदस्त है!" पल को ट्रैक करना चाहते हैं। बिलकुल ऐसा ही Git आपके कोड के लिए करता है! यह ऐसा है जैसे आपके पास एक अविश्वसनीय टाइम-ट्रैवलिंग नोटबुक हो जो सब कुछ याद रखती है – हर कीस्ट्रोक, हर बदलाव, हर "उफ़, यह सब कुछ तोड़ दिया" पल जिसे आप तुरंत उलट सकते हैं। + +मैं ईमानदारी से कहूँ तो शुरू में यह भारी लग सकता है। जब मैंने शुरू किया था, तो मैंने सोचा था "मैं अपने फाइल्स को सामान्य तरीके से क्यों नहीं सेव कर सकता?" लेकिन मुझ पर भरोसा करें: एक बार Git समझ में आ गया (और आ जाएगा!), तो आपको एक ऐसा अहसास होगा कि "मैं पहले बिना इस के कैसे कोड करता था?" यह वैसा ही है जैसे आपको पता चले कि आप चलने के बजाय उड़ भी सकते हैं! + +मान लीजिए आपके पास लोकल मशीन पर एक कोड प्रोजेक्ट का फोल्डर है और आप git का उपयोग करके अपनी प्रगति ट्रैक करना चाहते हैं - यह संस्करण नियंत्रण प्रणाली है। कुछ लोग git का उपयोग करना अपने भविष्य के स्वयं को प्यार का एक पत्र लिखने जैसा मानते हैं। दिन, सप्ताह या महीने बाद अपने कमिट संदेश पढ़कर आप याद कर पाएंगे कि आपने क्यों कोई निर्णय लिया, या "रोलबैक" कर पाएंगे - यानी, जब आप अच्छे "कमिट संदेश" लिखते हैं। + +```mermaid +flowchart TD + A[📁 आपके प्रोजेक्ट फ़ाइलें] --> B{क्या यह एक Git रिपॉजिटरी है?} + B -->|नहीं| C[git init] + B -->|हाँ| D[परिवर्तन करें] + C --> D + D --> E[git add .] + E --> F["git commit -m 'संदेश'"] + F --> G[git push] + G --> H[🌟 GitHub पर कोड!] + + H --> I{सहयोग करना चाहते हैं?} + I -->|हाँ| J[फॉर्क और क्लोन] + I -->|नहीं| D + J --> K[ब्रांच बनाएं] + K --> L[परिवर्तन करें] + L --> M[पुल अनुरोध] + M --> N[🎉 योगदान कर रहे हैं!] + + style A fill:#fff59d + style H fill:#c8e6c9 + style N fill:#ff4081,color:#fff +``` +### कार्य: अपना पहला रेपोजिटरी बनाएं! + +> 🎯 **आपका मिशन (और मैं आपके लिए बहुत उत्साहित हूँ!)**: हम साथ में आपका पहला GitHub रेपोजिटरी बनाएंगे! जब हम यहाँ खत्म करेंगे, तो आपका अपना एक कोड का कोना होगा इंटरनेट पर, और आपने अपना पहला "commit" कर दिया होगा (डेवलपर भाषा में इसे अपने काम को एक स्मार्ट तरीके से सेव करना कहते हैं)। +> +> यह वास्तव में एक खास पल है – आप आधिकारिक रूप से वैश्विक डेवलपर्स समुदाय में शामिल होने वाले हैं! मुझे अभी भी याद है जब मैंने पहली बार अपना रेपो बनाया था और सोचा था "वाह, मैं सच में ऐसा कर रहा हूँ!" + +आइए इस साहसिक कार्य में साथ-साथ कदम दर कदम चलें। हर हिस्से के साथ अपना समय लें – जल्दीबाजी का कोई इनाम नहीं है, और मैं वादा करता हूँ कि हर एक कदम समझ में आएगा। याद रखें, हर कोडिंग सुपरस्टार जिन्हें आप पसंद करते हैं, वे भी एक समय आपके जैसे ही थे, जो अपना पहला रेपोजिटरी बनाने वाले थे। कितना शानदार है यह बात! > वीडियो देखें > -> [![Git और GitHub मूल बातें वीडियो](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) +> [![Git और GitHub बेसिक्स वीडियो](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) +**आइए इसे साथ मिलकर करें:** -1. **GitHub पर रिपॉजिटरी बनाएं**। GitHub.com पर, रिपॉजिटरी टैब में, या नेविगेशन बार के शीर्ष-दाईं ओर, **नया रिपो** बटन खोजें। +1. **GitHub पर अपना रेपोजिटरी बनाएँ**। GitHub.com पर जाएं और शीर्ष दाएं कोने में चमकता हुआ हरा **New** बटन (या **+** चिह्न) देखें। उस पर क्लिक करें और **New repository** चुनें। - 1. अपनी रिपॉजिटरी (फ़ोल्डर) को एक नाम दें - 1. **रिपॉजिटरी बनाएं** चुनें। + ऐसा करें: + 1. अपने रेपोजिटरी को एक नाम दें – ऐसा नाम चुनें जो आपके लिए मायने रखता हो! + 1. चाहें तो एक विवरण जोड़ें (यह दूसरों को आपके प्रोजेक्ट के बारे में समझने में मदद करता है) + 1. तय करें कि आप इसे सार्वजनिक (सभी देख सकते हैं) या निजी (सिर्फ आपके लिए) रखना चाहते हैं + 1. मैं सुझाव दूंगा कि README फ़ाइल जोड़ें – यह आपके प्रोजेक्ट का मुखपृष्ठ जैसा होता है + 1. **Create repository** पर क्लिक करें और जश्न मनाएं – आपने अपना पहला रेपो बनाया! 🎉 -1. **अपने कार्य फ़ोल्डर पर जाएं**। अपने टर्मिनल में, उस फ़ोल्डर (जिसे डायरेक्टरी भी कहा जाता है) पर स्विच करें जिसे आप ट्रैक करना शुरू करना चाहते हैं। टाइप करें: +2. **अपने प्रोजेक्ट फोल्डर पर जाएं**। अब टर्मिनल खोलें (डरें नहीं, उतना डरावना नहीं है जितना दिखता है!). हमें अपने कंप्यूटर को बताना है कि आपके प्रोजेक्ट फोल्डर कहाँ हैं। यह कमांड टाइप करें: ```bash cd [name of your folder] ``` -1. **Git रिपॉजिटरी प्रारंभ करें**। अपने प्रोजेक्ट में टाइप करें: + **हम यहाँ क्या कर रहे हैं:** + - हम कंप्यूटर को कह रहे हैं "मुझे मेरे प्रोजेक्ट फ़ोल्डर पर ले चलो" + - यह आपके डेस्कटॉप पर किसी विशेष फ़ोल्डर को खोलने जैसा है, लेकिन हम इसे टेक्स्ट कमांड के जरिए कर रहे हैं + - `[name of your folder]` को अपने प्रोजेक्ट फोल्डर के असली नाम से बदलें + +3. **अपने फोल्डर को Git रेपोजिटरी बनाएं**। यहीं जादू होने वाला है! टाइप करें: ```bash git init ``` -1. **स्थिति जांचें**। अपनी रिपॉजिटरी की स्थिति जांचने के लिए टाइप करें: + **यहाँ अभी क्या हुआ (काफी कूल है!):** + - Git ने आपके प्रोजेक्ट में एक छुपा हुआ `.git` फ़ोल्डर बनाया – आप इसे नहीं देखेंगे, लेकिन यह वहाँ है! + - आपका सामान्य फ़ोल्डर अब एक "repository" है जो आपके हर बदलाव को ट्रैक कर सकता है + - इसे ऐसे समझें जैसे आपके फोल्डर को सुपरपावर मिल गई हो जो हर चीज़ याद रखती है + +4. **देखें क्या चल रहा है**। आइए देखें Git आपके प्रोजेक्ट के बारे में अभी क्या सोचता है: ```bash git status ``` - आउटपुट कुछ इस तरह दिख सकता है: + **Git आपको क्या बता रहा है समझना:** + + आप कुछ ऐसा देख सकते हैं: ```output Changes not staged for commit: (use "git add ..." to update what will be committed) - (use "git checkout -- ..." to discard changes in working directory) + (use "git restore ..." to discard changes in working directory) modified: file.txt modified: file2.txt ``` - आमतौर पर `git status` कमांड आपको यह बताता है कि कौन सी फाइलें _सेव_ करने के लिए तैयार हैं या उनमें बदलाव हैं जिन्हें आप स्थायी बनाना चाहते हैं। + **पैनिक मत करें! इसका मतलब है:** + - लाल रंग में दिखने वाली फाइलें वे हैं जिनमें बदलाव हैं लेकिन वे अभी सेव के लिए तैयार नहीं हैं + - हरे रंग की फाइलें (जब आप उन्हें देखते हैं) सेव के लिए तैयार होती हैं + - Git मददगार हो रहा है और आपको यह बता रहा है कि आप आगे क्या कर सकते हैं -1. **सभी फाइलें ट्रैकिंग के लिए जोड़ें** - इसे फाइलों को स्टेजिंग एरिया में जोड़ना भी कहा जाता है। + > 💡 **प्रो टिप:** `git status` कमांड आपका सबसे अच्छा दोस्त है! जब भी आप कंफ्यूज हों, इसका इस्तेमाल करें। यह ऐसे है जैसे आप Git से पूछ रहे हों "अभी की स्थिति क्या है?" + +5. **अपनी फाइलें सेव के लिए तैयार करें** (इसे "staging" कहते हैं): ```bash git add . ``` - `git add` और `.` तर्क इंगित करता है कि आपकी सभी फाइलें और बदलाव ट्रैकिंग के लिए हैं। + **हमने अभी क्या किया:** + - हमने Git को बताया "अगली सेव में मैं अपनी सारी फाइलें शामिल करना चाहता हूँ" + - `.` का मतलब है "इस फ़ोल्डर में सब कुछ" + - अब आपकी फाइलें "staged" हैं और अगले कदम के लिए तैयार हैं -1. **चयनित फाइलें ट्रैकिंग के लिए जोड़ें** + **थोड़ा चयनात्मक होना चाहते हैं?** आप केवल कुछ खास फाइलें भी जोड़ सकते हैं: ```bash git add [file or folder name] ``` - यह हमें केवल चयनित फाइलों को स्टेजिंग एरिया में जोड़ने में मदद करता है जब हम सभी फाइलों को एक बार में कमिट नहीं करना चाहते। + **ऐसा क्यों करना चाहेंगे?** + - कभी-कभी आप संबंधित बदलावों को एक साथ सेव करना चाहते हैं + - यह आपके काम को तार्किक हिस्सों में व्यवस्थित करने में मदद करता है + - यह समझना आसान बनाता है कि कब क्या बदला -1. **सभी फाइलें अनस्टेज करें** + **मन बदल गया?** कोई बात नहीं! आप इस तरह फाइलें अनस्टेज कर सकते हैं: ```bash + # सब कुछ अनस्टेज करें git reset + + # सिर्फ एक फ़ाइल अनस्टेज करें + git reset [file name] ``` - यह कमांड हमें एक बार में सभी फाइलों को अनस्टेज करने में मदद करता है। + चिंता मत करें – ये आपके काम को डिलीट नहीं करता, बस फाइलों को "सेव के लिए तैयार" ढेर से बाहर निकालता है। -1. **एक विशेष फाइल को अनस्टेज करें** - - ```bash - git reset [file or folder name] - ``` - - यह कमांड हमें केवल एक विशेष फाइल को अनस्टेज करने में मदद करता है जिसे हम अगले कमिट में शामिल नहीं करना चाहते। - -1. **अपने कार्य को स्थायी बनाएं**। इस बिंदु पर आपने फाइलों को तथाकथित _स्टेजिंग एरिया_ में जोड़ दिया है। एक जगह जहां Git आपकी फाइलों को ट्रैक कर रहा है। बदलाव को स्थायी बनाने के लिए आपको फाइलों को _कमिट_ करना होगा। ऐसा करने के लिए आप `git commit` कमांड का उपयोग करके एक _कमिट_ बनाते हैं। एक _कमिट_ आपके रिपॉजिटरी के इतिहास में एक सेविंग पॉइंट का प्रतिनिधित्व करता है। टाइप करें: +6. **अपने काम को स्थायी रूप से सेव करें** (अपना पहला कमिट बनाते हुए!): ```bash git commit -m "first commit" ``` - यह आपकी सभी फाइलों को कमिट करता है, और संदेश "पहला कमिट" जोड़ता है। भविष्य के कमिट संदेशों के लिए आप अपने विवरण में अधिक वर्णनात्मक होना चाहेंगे ताकि यह स्पष्ट हो सके कि आपने किस प्रकार का बदलाव किया है। + **🎉 बधाई हो! आपने अपना पहला कमिट बना दिया है!** + + **यहाँ अभी क्या हुआ:** + - Git ने इस ठीक समय पर आपकी सभी staged फाइलों की "स्नैपशॉट" ली + - आपका कमिट संदेश "first commit" बताता है कि यह सेव पॉइंट किस बारे में है + - Git ने इस स्नैपशॉट को एक यूनिक आईडी दी ताकि आप इसे बाद में हमेशा ढूंढ सकें + - आपने आधिकारिक तौर पर अपने प्रोजेक्ट का इतिहास ट्रैक करना शुरू कर दिया है! + + > 💡 **आगे के कमिट संदेश:** अपने अगले कमिट्स के लिए ज्यादा वर्णनात्मक हों! "updated stuff" की बजाय जैसे "Add contact form to homepage" या "Fix navigation menu bug" लिखें। आपका भविष्य का आप इसका धन्यवाद करेगा! -1. **अपने स्थानीय Git रिपो को GitHub से कनेक्ट करें**। एक Git रिपो आपके मशीन पर अच्छा है लेकिन किसी बिंदु पर आप अपनी फाइलों का बैकअप कहीं रखना चाहेंगे और अन्य लोगों को अपने रिपो पर काम करने के लिए आमंत्रित करना चाहेंगे। ऐसा करने के लिए एक शानदार जगह GitHub है। याद रखें कि हमने पहले ही GitHub पर एक रिपो बनाया है, इसलिए हमें केवल अपने स्थानीय Git रिपो को GitHub से कनेक्ट करना है। कमांड `git remote add` यही करेगा। निम्नलिखित कमांड टाइप करें: +7. **अपने लोकल प्रोजेक्ट को GitHub से जोड़ें**। फिलहाल, आपका प्रोजेक्ट केवल आपके कंप्यूटर पर है। आइए इसे आपके GitHub रेपोजिटरी से कनेक्ट करें ताकि आप इसे दुनिया के साथ साझा कर सकें! - > नोट, कमांड टाइप करने से पहले अपने GitHub रिपो पेज पर जाएं और रिपॉजिटरी URL खोजें। आप इसे नीचे दिए गए कमांड में उपयोग करेंगे। ```https://github.com/username/repository_name.git``` को अपने GitHub URL से बदलें। + सबसे पहले, अपनी GitHub रेपोजिटरी पेज पर जाएं और URL कॉपी करें। फिर वापस यहां आकर टाइप करें: ```bash git remote add origin https://github.com/username/repository_name.git ``` + + (उस URL को अपनी वास्तविक रेपोजिटरी URL से बदलें!) - यह एक _रिमोट_, या कनेक्शन, बनाता है जिसका नाम "origin" है और यह आपके द्वारा पहले बनाए गए GitHub रिपॉजिटरी की ओर इशारा करता है। + **हमने अभी क्या किया:** + - हमने आपके स्थानीय प्रोजेक्ट और आपके GitHub रिपॉजिटरी के बीच एक कनेक्शन बनाया + - "Origin" आपके GitHub रिपॉजिटरी का सिर्फ एक उपनाम है – यह आपके फोन में किसी संपर्क को जोड़ने जैसा है + - अब आपका स्थानीय Git जानता है कि जब आप साझा करने के लिए तैयार हों तो आपका कोड कहां भेजना है -1. **स्थानीय फाइलें GitHub पर भेजें**। अब तक आपने स्थानीय रिपो और GitHub रिपो के बीच एक _कनेक्शन_ बनाया है। आइए इन फाइलों को GitHub पर निम्नलिखित कमांड `git push` का उपयोग करके भेजें: + 💡 **आसान तरीका**: यदि आपके पास GitHub CLI इंस्टॉल है, तो आप यह एक ही कमांड में कर सकते हैं: + ```bash + gh repo create my-repo --public --push --source=. + ``` - > नोट, आपकी ब्रांच का नाम ```main``` से अलग हो सकता है। +8. **अपना कोड GitHub पर भेजें** (वह बड़ा पल!): ```bash git push -u origin main ``` - यह आपके "main" ब्रांच में आपके कमिट्स को GitHub पर भेजता है। कमांड में `-u` सहित `upstream` ब्रांच सेट करना आपके स्थानीय ब्रांच और रिमोट ब्रांच के बीच एक लिंक स्थापित करता है, ताकि आप भविष्य में ब्रांच का नाम निर्दिष्ट किए बिना केवल git push या git pull का उपयोग कर सकें। Git स्वचालित रूप से upstream ब्रांच का उपयोग करेगा और आपको भविष्य के कमांड में ब्रांच का नाम स्पष्ट रूप से निर्दिष्ट करने की आवश्यकता नहीं होगी। + **🚀 यही है! आप अपना कोड GitHub पर अपलोड कर रहे हैं!** + + **क्या हो रहा है:** + - आपकी कमिट्स आपके कंप्यूटर से GitHub तक यात्रा कर रही हैं + - `-u` फ्लैग एक स्थायी कनेक्शन सेट करता है ताकि भविष्य में पुश करना आसान हो जाए + - "main" आपकी प्राथमिक शाखा का नाम है (जैसे मुख्य फ़ोल्डर) + - इसके बाद, आप भविष्य के अपलोड के लिए बस `git push` टाइप कर सकते हैं! + + 💡 **त्वरित नोट**: यदि आपकी शाखा का नाम कुछ और है (जैसे "master"), तो उस नाम का उपयोग करें। आप `git branch --show-current` से जांच सकते हैं। -2. **अधिक बदलाव जोड़ने के लिए**। यदि आप बदलाव करना जारी रखना चाहते हैं और उन्हें GitHub पर पुश करना चाहते हैं, तो आपको केवल निम्नलिखित तीन कमांड का उपयोग करना होगा: +9. **आपकी नई दैनिक कोडिंग लय** (यहाँ यह नशे की तरह बन जाता है!): + + अब से, जब भी आप अपने प्रोजेक्ट में बदलाव करते हैं, आपके पास यह सरल तीन-चरणीय प्रक्रिया है: ```bash git add . - git commit -m "type your commit message here" + git commit -m "describe what you changed" git push ``` - > टिप, आप `.gitignore` फाइल अपनाना चाह सकते हैं ताकि वे फाइलें जिन्हें आप ट्रैक नहीं करना चाहते, GitHub पर दिखाई न दें - जैसे कि वह नोट्स फाइल जिसे आप उसी फ़ोल्डर में स्टोर करते हैं लेकिन सार्वजनिक रिपॉजिटरी में उसकी कोई जगह नहीं है। आप `.gitignore` फाइलों के टेम्पलेट्स [.gitignore templates](https://github.com/github/gitignore) पर पा सकते हैं। + **यह आपकी कोडिंग की धड़कन बन जाती है:** + - अपने कोड में कुछ शानदार बदलाव करें ✨ + - उन्हें `git add` के साथ स्टेज करें ("अरे Git, इन बदलावों पर ध्यान दो!") + - उन्हें `git commit` और एक वर्णनात्मक संदेश के साथ सेव करें (भविष्य के आप आपका धन्यवाद करेंगे!) + - उन्हें `git push` 🚀 के साथ दुनिया के साथ साझा करें + - बार-बार करें — सचमुच, यह सांस लेने जितना स्वाभाविक हो जाता है! + + मुझे यह वर्कफ़्लो पसंद है क्योंकि यह ऐसे है जैसे वीडियो गेम में कई सेव पॉइंट्स हों। कोई बदलाव किया जो आपको पसंद आया? उसे कमिट करें! कुछ जोखिमपूर्ण आजमाना चाहते हैं? कोई बात नहीं – यदि चीजें उलझ जाएं तो आप हमेशा अपनी आखिरी कमिट पर वापस जा सकते हैं! + + > 💡 **टिप**: आप एक `.gitignore` फ़ाइल अपनाना चाहते होंगे ताकि वे फाइलें जो आप ट्रैक नहीं करना चाहते GitHub पर न दिखें – जैसे वह नोट्स फ़ाइल जो आप उसी फोल्डर में रखते हैं लेकिन सार्वजनिक रिपॉजिटरी में नहीं होनी चाहिए। आप `.gitignore` फाइलों के टेम्पलेट्स [.gitignore templates](https://github.com/github/gitignore) पर पा सकते हैं या [gitignore.io](https://www.toptal.com/developers/gitignore) से खुद बना सकते हैं। + +### 🧠 **पहली रिपॉजिटरी चेक-इन: कैसा लगा?** + +**एक पल मनाएँ और सोचें:** +- पहली बार GitHub पर अपना कोड देखना कैसा लगा? +- कौन सा कदम सबसे भ्रमित करने वाला था, और कौन सा अप्रत्याशित रूप से आसान लगा? +- क्या आप `git add`, `git commit`, और `git push` के बीच का अंतर अपने शब्दों में समझा सकते हैं? + +```mermaid +stateDiagram-v2 + [*] --> LocalFiles: परियोजना बनाएं + LocalFiles --> Staged: git add . + Staged --> Committed: git commit + Committed --> GitHub: git push + GitHub --> [*]: सफलता! 🎉 + + note right of Staged + फ़ाइलें सहेजने के लिए तैयार + end note + + note right of Committed + स्नैपशॉट बनाया गया + end note +``` +> **याद रखें**: अनुभवी डेवलपर्स भी कभी-कभी सही कमांड भूल जाते हैं। इस वर्कफ़्लो को मसल मैमोरी बनाना अभ्यास मांगता है – आप बेहतरीन कर रहे हैं! + +#### आधुनिक Git वर्कफ़्लोज़ + +इन आधुनिक प्रथाओं को अपनाने पर विचार करें: + +- **Conventional Commits**: एक मानकीकृत कमिट संदेश फॉर्मेट जैसे `feat:`, `fix:`, `docs:` आदि का उपयोग करें। अधिक जानें [conventionalcommits.org](https://www.conventionalcommits.org/) +- **Atomic commits**: प्रत्येक कमिट को एकल तार्किक बदलाव का प्रतिनिधित्व करने दें +- **Frequent commits**: बड़े, कम बार कमिट करने के बजाय अक्सर वर्णनात्मक संदेशों के साथ कमिट करें #### कमिट संदेश -एक शानदार Git कमिट विषय पंक्ति निम्नलिखित वाक्य को पूरा करती है: -यदि लागू किया गया, तो यह कमिट <आपकी विषय पंक्ति यहां> +एक बढ़िया Git कमिट विषय पंक्ति इस वाक्य को पूरा करती है: +यदि लागू किया जाए, तो यह कमिट <यहाँ अपना विषय वाक्य डालें> + +विषय में क्रिया रूप, वर्तमान काल का प्रयोग करें: "change" न कि "changed" या "changes"। +विषय की तरह, बॉडी (वैकल्पिक) में भी क्रिया रूप, वर्तमान काल का उपयोग करें। बॉडी में बदलाव के कारण और पिछले व्यवहार के साथ इसके विपरीत होने की व्याख्या होनी चाहिए। आप `क्यों` समझा रहे हैं, न कि `कैसे`। -विषय के लिए वर्तमान काल का उपयोग करें: "change" न कि "changed" या "changes"। -जैसे विषय में, शरीर (वैकल्पिक) में भी वर्तमान काल का उपयोग करें। शरीर में बदलाव के लिए प्रेरणा शामिल होनी चाहिए और इसे पिछले व्यवहार के साथ तुलना करनी चाहिए। आप `क्यों` समझा रहे हैं, न कि `कैसे`। +✅ GitHub पर कुछ अच्छे कमिट संदेश खोजने के लिए कुछ मिनट दें। क्या आप कोई बहुत बढ़िया चेतावनी संदेश पा सकते हैं? कोई बहुत संक्षिप्त संदेश? आपको क्या लगता है कि कमिट संदेश में सबसे महत्वपूर्ण और उपयोगी जानकारी क्या है? -✅ GitHub पर कुछ समय बिताएं। क्या आप एक वास्तव में शानदार कमिट संदेश ढूंढ सकते हैं? क्या आप एक बहुत ही न्यूनतम संदेश ढूंढ सकते हैं? आपके विचार में कमिट संदेश में कौन सी जानकारी सबसे महत्वपूर्ण और उपयोगी है? +## दूसरों के साथ काम करना (मजेदार भाग!) -### कार्य: सहयोग करें +अपना ध्यान रखें क्योंकि यहीं पर GitHub असली जादू बन जाता है! 🪄 आपने अपना कोड प्रबंधित करना सीख लिया है, लेकिन अब हम मेरे पसंदीदा हिस्से में उतर रहे हैं – दुनिया भर के अद्भुत लोगों के साथ सहयोग करना। -GitHub पर चीजें डालने का मुख्य कारण अन्य डेवलपर्स के साथ सहयोग करना संभव बनाना था। +कल्पना करें: आप कल सुबह उठते हैं और देखते हैं कि टोक्यो में किसी ने आपकी नींद के दौरान आपके कोड को सुधार दिया। फिर बर्लिन में किसी ने उस बग को ठीक किया जिससे आप फंसे थे। दोपहर तक, साओ पाउलो के एक डेवलपर ने वह फीचर जोड़ दिया जिसे आपने कभी सोचा भी नहीं था। यह विज्ञान-कथा नहीं है – यह GitHub ब्रह्मांड में मंगलवार का दिन है! -## अन्य लोगों के साथ प्रोजेक्ट पर काम करना +जो मुझे वास्तव में उत्साहित करता है, वह यह है कि वे सहयोग कौशल जिन्हें आप सीखने वाले हैं? ये बिल्कुल वही वर्कफ़्लोज़ हैं जो Google, Microsoft, और आपके पसंदीदा स्टार्टअप्स की टीमें हर रोज इस्तेमाल करती हैं। आप सिर्फ एक कूल टूल नहीं सीख रहे – आप उस गुप्त भाषा को सीख रहे हैं जो पूरी सॉफ्टवेयर दुनिया को साथ मिलकर काम करने में मदद करती है। + +सच में, जब आप पहली बार अपना पहला पुल रिक्वेस्ट मर्ज होते देखेंगे, तो आप समझ जाएंगे कि डेवलपर्स मुक्त स्रोत के लिए क्यों इतना उत्साहित होते हैं। यह दुनिया की सबसे बड़ी, सबसे क्रिएटिव टीम परियोजना का हिस्सा होने जैसा है! > वीडियो देखें > -> [![Git और GitHub मूल बातें वीडियो](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) +> [![Git and GitHub basics video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) + +GitHub पर चीज़ें डालने का मुख्य कारण यह था कि यह अन्य डेवलपर्स के साथ सहयोग करना संभव बनाए। -अपने रिपॉजिटरी में, `Insights > Community` पर जाएं यह देखने के लिए कि आपका प्रोजेक्ट अनुशंसित सामुदायिक मानकों की तुलना में कैसा है। +```mermaid +flowchart LR + A[🔍 प्रोजेक्ट खोजें] --> B[🍴 रिपॉजिटरी फ़ोर्क करें] + B --> C[📥 लोकल पर क्लोन करें] + C --> D[🌿 ब्रांच बनाएँ] + D --> E[✏️ बदलाव करें] + E --> F[💾 बदलाव कमिट करें] + F --> G[📤 ब्रांच पुश करें] + G --> H[🔄 पुल रिक्वेस्ट बनाएँ] + H --> I{मेरेन्टर की समीक्षा} + I -->|✅ मंजूर| J[🎉 मर्ज करें!] + I -->|❓ बदलाव अनुरोध किए गए| K[📝 अपडेट करें] + K --> F + J --> L[🧹 ब्रांच साफ़ करें] + + style A fill:#e3f2fd + style J fill:#e8f5e8 + style L fill:#fff3e0 +``` +अपने रिपॉजिटरी में `Insights > Community` पर जाएं ताकि देखें आपका प्रोजेक्ट संदर्भित समुदाय मानकों से कैसे मेल खाता है। - यहां कुछ चीजें हैं जो आपके GitHub रिपो को बेहतर बना सकती हैं: - - **विवरण**। क्या आपने अपने प्रोजेक्ट के लिए विवरण जोड़ा है? - - **README**। क्या आपने README जोड़ा है? GitHub [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon) लिखने के लिए मार्गदर्शन प्रदान करता है। - - **योगदान दिशानिर्देश**। क्या आपके प्रोजेक्ट में [योगदान दिशानिर्देश](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon) हैं? - - **आचार संहिता**। एक [आचार संहिता](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)। - - **लाइसेंस**। शायद सबसे महत्वपूर्ण, एक [लाइसेंस](https://docs.github.com/articles/adding-a-license-to-a-repository/)। +क्या आप अपनी रिपॉजिटरी को पेशेवर और स्वागतयोग्य बनाना चाहते हैं? अपनी रिपॉजिटरी में जाएं और `Insights > Community` पर क्लिक करें। यह शानदार फीचर आपको दिखाएगा कि आपका प्रोजेक्ट GitHub समुदाय द्वारा "अच्छी रिपॉजिटरी प्रथाओं" के मुकाबले कैसा है। -ये सभी संसाधन नए टीम सदस्यों को शामिल करने में लाभकारी होंगे। और ये आमतौर पर वे चीजें होती हैं जिन्हें नए योगदानकर्ता आपके कोड को देखने से पहले देखते हैं, यह पता लगाने के लिए कि क्या आपका प्रोजेक्ट उनके समय बिताने के लिए सही जगह है। +> 🎯 **अपने प्रोजेक्ट को चमकदार बनाएं**: एक अच्छी तरह से व्यवस्थित रिपॉजिटरी जिसमें अच्छी डाक्यूमेंटेशन हो, एक साफ़-सुथरी, स्वागत योग्य दुकान की तरह होती है। इससे लोग जानते हैं कि आप अपने काम को लेकर गंभीर हैं और दूसरों को योगदान करने की प्रेरणा मिलती है! -✅ README फाइलें, हालांकि उन्हें तैयार करने में समय लगता है, अक्सर व्यस्त मेंटेनर्स द्वारा उपेक्षित की जाती हैं। क्या आप किसी विशेष रूप से वर्णनात्मक README का उदाहरण ढूंढ सकते हैं? नोट: कुछ [उपकरण अच्छे README बनाने में मदद करते हैं](https://www.makeareadme.com/) जिन्हें आप आज़माना चाह सकते हैं। +**यहाँ एक शानदार रिपॉजिटरी बनाने के तत्व हैं:** + +| क्या जोड़ें | क्यों यह महत्वपूर्ण है | यह आपके लिए क्या करता है | +|-------------|---------------------|-------------------------| +| **Description** | पहला प्रभाव महत्वपूर्ण है! | लोग तुरंत जानते हैं आपका प्रोजेक्ट क्या करता है | +| **README** | आपके प्रोजेक्ट का मुखपृष्ठ | नए आगंतुकों के लिए एक मैत्रीपूर्ण मार्गदर्शक की तरह | +| **Contributing Guidelines** | दिखाता है कि आप मदद का स्वागत करते हैं | लोग जानते हैं कि वे कैसे आपकी मदद कर सकते हैं | +| **Code of Conduct** | एक मैत्रीपूर्ण स्थान बनाता है | सभी प्रतिभागियों को स्वागत महसूस होता है | +| **License** | कानूनी स्पष्टता | अन्य लोग जानते हैं वे आपके कोड का कैसे उपयोग कर सकते हैं | +| **Security Policy** | दिखाता है कि आप जिम्मेदार हैं | पेशेवर प्रथाओं का प्रदर्शन करता है | + +> 💡 **प्रो टिप**: GitHub इन सभी फाइलों के लिए टेम्पलेट्स प्रदान करता है। नई रिपॉजिटरी बनाते समय, इन फाइलों को स्वचालित रूप से बनाने के लिए बॉक्स चेक करें। + +**आधुनिक GitHub फीचर्स जिन्हें एक्सप्लोर करें:** + +🤖 **स्वचालन और CI/CD:** +- **GitHub Actions** स्वचालित परीक्षण और तैनाती के लिए +- **Dependabot** स्वचालित निर्भरता अपडेट के लिए + +💬 **समुदाय और परियोजना प्रबंधन:** +- **GitHub Discussions** मुद्दों से परे समुदाय बातचीत के लिए +- **GitHub Projects** कानबन-शैली परियोजना प्रबंधन के लिए +- **Branch protection rules** कोड गुणवत्ता मानकों को लागू करने के लिए + + +ये सभी संसाधन नए टीम सदस्यों के ऑन-बोर्डिंग में मदद करते हैं। और आमतौर पर नए योगदानकर्ता यहां देखते हैं कि आपकी रिपॉजिटरी उनके लिए सही जगह है या नहीं, इससे पहले कि वे आपका कोड देखें। + +✅ README फ़ाइलें, जिन्हें तैयार करने में समय लगता है, अक्सर व्यस्त मेंटेनर्स द्वारा नज़रअंदाज़ कर दी जाती हैं। क्या आप कोई खासतौर पर विवरणपूर्ण README पा सकते हैं? नोट: कुछ [उपकरण अच्छे README बनाने में मदद करते हैं](https://www.makeareadme.com/) जिन्हें आप आज़मा सकते हैं। ### कार्य: कुछ कोड मर्ज करें -योगदान दस्तावेज़ लोगों को प्रोजेक्ट में योगदान करने में मदद करते हैं। यह बताता है कि आप किस प्रकार के योगदान की तलाश कर रहे हैं और प्रक्रिया कैसे काम करती है। योगदानकर्ताओं को आपके GitHub रिपो में योगदान करने में सक्षम होने के लिए एक श्रृंखला चरणों से गुजरना होगा: +Contributing docs लोगों को प्रोजेक्ट में योगदान करने में मदद करती हैं। यह बताती है कि आप किस प्रकार के योगदान की तलाश में हैं और प्रक्रिया कैसे काम करती है। योगदानकर्ता GitHub पर आपकी रिपॉजिटरी में योगदान करने के लिए निम्नलिखित चरणों से गुजरने होंगे: -1. **आपके रिपो को फोर्क करना**। आप शायद चाहेंगे कि लोग आपके प्रोजेक्ट को _फोर्क_ करें। फोर्क करने का मतलब है कि आपकी रिपॉजिटरी की एक प्रतिकृति उनके GitHub प्रोफ़ाइल पर बनाई जाए। -1. **क्लोन**। वहां से वे प्रोजेक्ट को अपने स्थानीय मशीन पर क्लोन करेंगे। -1. **एक ब्रांच बनाएं**। आप चाहेंगे कि वे अपने काम के लिए एक _ब्रांच_ बनाएं। -1. **अपना बदलाव एक क्षेत्र पर केंद्रित करें**। योगदानकर्ताओं से एक समय में एक चीज़ पर ध्यान केंद्रित करने के लिए कहें - इस तरह उनके काम को _मर्ज_ करने की संभावना अधिक होती है। कल्पना करें कि उन्होंने एक बग फिक्स लिखा, एक नई सुविधा जोड़ी, और कई परीक्षण अपडेट किए - क्या होगा अगर आप 3 में से केवल 2 या 1 बदलाव लागू करना चाहते हैं या कर सकते हैं? -✅ ऐसी स्थिति की कल्पना करें जहां ब्रांच अच्छे कोड लिखने और शिप करने में विशेष रूप से महत्वपूर्ण हों। आप किन उपयोग मामलों के बारे में सोच सकते हैं? +1. **अपने रिपॉजिटरी को Fork करना** आप चाहते होंगे कि लोग आपका प्रोजेक्ट _fork_ करें। Forking का मतलब है आपके रिपॉजिटरी की एक प्रतिलिपि उनके GitHub प्रोफाइल पर बनाना। +1. **Clone करें**। वहां से वे प्रोजेक्ट को अपनी स्थानीय मशीन पर क्लोन करेंगे। +1. **एक शाखा बनाएं**। आप चाहेंगे कि वे अपने काम के लिए एक _branch_ बनाएं। +1. **अपने बदलावों को एक क्षेत्र पर केंद्रित करें**। योगदानकर्ताओं से कहें कि वे अपनी योगदानों को एक समय में एक विषय पर केंद्रित करें - ऐसा करने से आपकी संभावना बढ़ती है कि आप उनके काम को _merge_ कर सकेंगे। कल्पना करें कि उन्होंने एक बग फिक्स लिखा, एक नया फीचर जोड़ा, और कई टेस्ट अपडेट किए - अगर आप 3 में से केवल 2 या 1 को ही लागू कर सकें तो क्या होगा? -> नोट, वह बदलाव बनें जो आप दुनिया में देखना चाहते हैं, और अपने काम के लिए ब्रांच बनाएं। आपके द्वारा किए गए किसी भी कमिट उस ब्रांच पर किए जाएंगे जिस पर आप वर्तमान में "चेक आउट" हैं। `git status` का उपयोग करें यह देखने के लिए कि वह कौन सी ब्रांच है। +✅ ऐसी स्थिति की कल्पना करें जहां शाखाएं अच्छी कोड लिखने और प्रसारित करने में विशेष रूप से महत्वपूर्ण हों। आप किन उपयोग मामलों के बारे में सोच सकते हैं? -आइए एक योगदानकर्ता वर्कफ़्लो से गुजरें। मान लें कि योगदानकर्ता ने पहले ही रिपो को _फोर्क_ और _क्लोन_ कर लिया है ताकि उनके पास एक Git रिपो हो जिस पर वे अपने स्थानीय मशीन पर काम कर सकें: +> ध्यान दें, आप दुनिया में वह बदलाव बनें जो आप देखना चाहते हैं, और अपने काम के लिए भी शाखाएं बनाएं। कोई भी कमिट आप करते हैं, वह उस शाखा में होगा जिस पर आप वर्तमान में "चेक आउट" हैं। यह देखने के लिए `git status` का उपयोग करें कि वह कौन सी शाखा है। -1. **एक ब्रांच बनाएं**। `git branch` कमांड का उपयोग करें एक ब्रांच बनाने के लिए जिसमें वे बदलाव करेंगे: +आइए योगदानकर्ता वर्कफ़्लो से गुजरें। मान लीजिए योगदानकर्ता ने पहले ही अपने रिपॉजिटरी को _fork_ और _clone_ कर लिया है ताकि उनके पास स्थानीय मशीन पर काम करने के लिए Git रिपॉजिटरी हो: + +1. **एक शाखा बनाएं**। उस शाखा को बनाने के लिए `git branch` कमांड का उपयोग करें जिसमें वे योगदान करना चाहते हैं: ```bash git branch [branch-name] ``` -1. **कार्य ब्रांच पर स्विच करें**। निर्दिष्ट ब्रांच पर स्विच करें और `git switch` का उपयोग करके कार्य निर्देशिका को अपडेट करें: + > 💡 **आधुनिक तरीका**: आप एक ही कमांड में नई शाखा बना सकते हैं और स्विच भी कर सकते हैं: + ```bash + git switch -c [branch-name] + ``` + +1. **वर्किंग शाखा पर स्विच करें**। निर्दिष्ट शाखा पर स्विच करें और कार्य निर्देशिका अपडेट करें `git switch` के साथ: ```bash git switch [branch-name] ``` -1. **काम करें**। इस बिंदु पर आप अपने बदलाव जोड़ना चाहते हैं। Git को इसके बारे में बताना न भूलें निम्नलिखित कमांड का उपयोग करके: + > 💡 **आधुनिक नोट**: `git switch` शाखाएं बदलने के लिए `git checkout` का आधुनिक विकल्प है। यह शुरुआती लोगों के लिए स्पष्ट और सुरक्षित है। + +1. **काम करें**। इस बिंदु पर आप अपने बदलाव जोड़ना चाहते हैं। Git को इसके बारे में बताना न भूलें निम्न कमांड्स के साथ: ```bash git add . git commit -m "my changes" ``` - सुनिश्चित करें कि आप अपने कमिट को एक अच्छा नाम दें, आपके लिए और उस रिपो के मेंटेनर के लिए जिस पर आप मदद कर रहे हैं। + > ⚠️ **कमिट संदेश की गुणवत्ता**: सुनिश्चित करें कि आप अपने कमिट को एक अच्छा नाम दें, अपने और उस रिपॉजिटरी के मेंटेनर के लिए जिसकी आप मदद कर रहे हैं। जो बदला है उसमें विशिष्ट रहें! -1. **अपने काम को `main` ब्रांच के साथ मिलाएं**। किसी बिंदु पर आप काम पूरा कर लेते हैं और आप अपने काम को `main` ब्रांच के साथ मिलाना चाहते हैं। इस बीच `main` ब्रांच बदल सकती है इसलिए सुनिश्चित करें कि आप पहले इसे निम्नलिखित कमांड के साथ नवीनतम में अपडेट करें: +1. **अपने काम को `main` शाखा के साथ मिलाएं**। कुछ समय बाद आपका काम पूरा हो जाता है और आप इसे `main` शाखा के साथ मिलाना चाहते हैं। इस बीच `main` शाखा बदल चुकी हो सकती है इसलिए पहले इसे नवीनतम बनाएँ इस तरह: ```bash git switch main git pull ``` - इस बिंदु पर आप यह सुनिश्चित करना चाहते हैं कि कोई भी _संघर्ष_, ऐसी स्थिति जहां Git आसानी से _मिलाने_ में असमर्थ है, आपके कार्य ब्रांच में होता है। इसलिए निम्नलिखित कमांड चलाएं: + इस बिंदु पर आप यह सुनिश्चित करना चाहते हैं कि आपकी कार्य शाखा में कोई भी _conflict_, ऐसी स्थिति जहां Git आसानी से बदलावों को _combine_ नहीं कर सकता, हो। इसलिए निम्नलिखित कमांड्स चलाएं: ```bash git switch [branch_name] git merge main ``` - `git merge main` कमांड `main` से सभी बदलावों को आपकी ब्रांच में लाएगा। उम्मीद है कि आप बस जारी रख सकते हैं। यदि नहीं, तो VS Code आपको बताएगा कि Git _कंफ्यूज_ है और आप प्रभावित फाइलों को बदलकर यह बता सकते हैं कि कौन सी सामग्री सबसे सटीक है। + `git merge main` कमांड आपके शाखा में `main` से सभी बदलाव लाएगा। उम्मीद है आप बस जारी रख सकेंगे। यदि नहीं, तो VS Code आपको बताएगा कि Git कहाँ _confused_ है और आप प्रभावित फ़ाइलों को संशोधित कर सही सामग्री चुन सकते हैं। - किसी अन्य ब्रांच पर स्विच करने के लिए, आधुनिक `git switch` कमांड का उपयोग करें: + 💡 **आधुनिक विकल्प**: एक साफ़ इतिहास के लिए `git rebase` का उपयोग करने पर विचार करें: ```bash - git switch [branch_name] - + git rebase main + ``` + यह आपकी कमिट्स को नवीनतम main शाखा के शीर्ष पर पुनः चलाता है, एक रैखिक इतिहास बनाता है। -1. **अपना काम GitHub पर भेजें**। अपना काम GitHub पर भेजने का मतलब दो चीजें हैं। अपनी ब्रांच को अपने रिपो पर पुश करना और फिर एक PR, Pull Request खोलना। +1. **अपना काम GitHub पर भेजें**। अपना काम GitHub पर भेजने का मतलब है अपनी शाखा को अपने रिपॉजिटरी पर पुश करना और फिर एक PR, पुल रिक्वेस्ट खोलना। ```bash git push --set-upstream origin [branch-name] ``` - ऊपर दिया गया कमांड आपकी फोर्क की गई रिपो पर ब्रांच बनाता है। -1. **PR खोलें**। अगला कदम है PR खोलना। इसके लिए GitHub पर फोर्क किए गए रिपॉजिटरी पर जाएं। GitHub पर आपको एक संकेत मिलेगा जहां पूछा जाएगा कि क्या आप नया PR बनाना चाहते हैं। उस पर क्लिक करें और आप एक इंटरफ़ेस पर पहुंचेंगे जहां आप कमिट मैसेज का शीर्षक बदल सकते हैं और उसे एक उपयुक्त विवरण दे सकते हैं। अब जिस रिपॉजिटरी को आपने फोर्क किया है, उसका मेंटेनर इस PR को देखेगा और _उम्मीद है_ कि वे इसे सराहेंगे और _मर्ज_ करेंगे। अब आप एक योगदानकर्ता बन गए हैं, वाह! :) + उपरोक्त कमांड आपकी फोर्क किए गए रिपॉजिटरी पर शाखा बनाता है। + +### 🤝 **सहयोग कौशल जांच: दूसरों के साथ काम करने के लिए तैयार?** + +**आइए देखें कि सहयोग के प्रति आपकी भावना क्या है:** +- क्या अब फोर्किंग और पुल रिक्वेस्ट का विचार आपके लिए स्पष्ट है? +- शाखाओं के साथ काम करने में कौन-सी एक चीज़ है जिसे आप और अभ्यास करना चाहते हैं? +- किसी और के प्रोजेक्ट में योगदान देने को लेकर आप कितना सहज महसूस करते हैं? + +```mermaid +mindmap + root((Git Collaboration)) + Branching + Feature branches + Bug fix branches + Experimental work + Pull Requests + Code review + Discussion + Testing + Best Practices + स्पष्ट कमिट संदेश + छोटे केंद्रित परिवर्तन + अच्छा दस्तावेज़ीकरण +``` +> **आत्मविश्वास बढ़ाएँ**: हर एक डेवलपर जिसे आप प्रशंसा करते हैं, पहली पुल रिक्वेस्ट को लेकर कभी नर्वस था। GitHub समुदाय नवागंतुकों के लिए बेहद स्वागत योग्य है! + +1. **एक PR खोलें**। अगला, आप एक PR खोलना चाहते हैं। आप ऐसा GitHub पर फोर्क किए गए रिपॉजिटरी पर जाकर करते हैं। GitHub पर आपको एक संकेत मिलेगा कि क्या आप नया PR बनाना चाहते हैं, आप उस पर क्लिक करते हैं और आपको एक इंटरफ़ेस मिलता है जहाँ आप कमिट संदेश का शीर्षक बदल सकते हैं, इसे अधिक उपयुक्त विवरण दे सकते हैं। अब रिपॉजिटरी के मेंटेनर जिन्हें आपने फोर्क किया है वह इस PR को देखेंगे और _उम्मीद है_ वे इसे सराहेंगे और आपकी PR को _merge_ करेंगे। आप अब एक योगदानकर्ता हैं, याय :) + + 💡 **आधुनिक टिप**: आप GitHub CLI का उपयोग करके भी PR बना सकते हैं: + ```bash + gh pr create --title "Your PR title" --body "Description of changes" + ``` -1. **सफाई करें**। यह अच्छा अभ्यास माना जाता है कि PR सफलतापूर्वक मर्ज होने के बाद आप _सफाई_ करें। आपको अपने लोकल ब्रांच और GitHub पर पुश किए गए ब्रांच दोनों को साफ करना चाहिए। पहले इसे लोकल से हटाने के लिए निम्नलिखित कमांड का उपयोग करें: + 🔧 **PR के लिए सर्वश्रेष्ठ प्रथाएं**: + - "Fixes #123" जैसे कीवर्ड्स का उपयोग करके संबंधित इश्यूज लिंक करें + - UI बदलावों के लिए स्क्रीनशॉट जोड़ें + - विशिष्ट समीक्षकों को अनुरोध करें + - प्रगति में कार्य के लिए ड्राफ्ट PR का उपयोग करें + - समीक्षा के लिए अनुरोध करने से पहले सभी CI जांचें सफल करें +1. **साफ़-सफ़ाई करें**। एक PR को सफलतापूर्वक मर्ज करने के बाद _साफ़-सफ़ाई_ करना एक अच्छा अभ्यास माना जाता है। आप अपने लोकल ब्रांच और उस ब्रांच को जो आपने GitHub पर पुश किया है, दोनों की साफ़-सफ़ाई करना चाहेंगे। पहले नीचे दिए गए कमांड के साथ इसे लोकल में हटाएं: ```bash git branch -d [branch-name] ``` - इसके बाद GitHub पर फोर्क किए गए रिपॉजिटरी के पेज पर जाएं और उस रिमोट ब्रांच को हटा दें जिसे आपने अभी पुश किया है। + सुनिश्चित करें कि आप अगले GitHub पेज पर जाकर उस रिमोट ब्रांच को हटा दें जिसे आपने अभी पुश किया है। -`Pull request` एक अजीब सा शब्द लगता है क्योंकि वास्तव में आप अपनी परियोजना में बदलाव पुश करना चाहते हैं। लेकिन मेंटेनर (परियोजना मालिक) या कोर टीम को आपके बदलावों पर विचार करना होता है, इससे पहले कि वे इसे परियोजना की "मुख्य" ब्रांच में मर्ज करें। इसलिए आप वास्तव में मेंटेनर से बदलाव का निर्णय मांग रहे हैं। +`पुल रिक्वेस्ट` एक अजीब शब्द लगता है क्योंकि असल में आप अपने बदलावों को परियोजना में पुश करना चाहते हैं। लेकिन मैनटेनर (परियोजना मालिक) या मुख्य टीम को आपके बदलावों पर विचार करना होता है इससे पहले कि वे इसे परियोजना की "मुख्य" ब्रांच के साथ मर्ज करें, इसलिए आप वास्तव में मैनटेनर से परिवर्तन निर्णय का अनुरोध कर रहे हैं। -Pull request वह स्थान है जहां आप ब्रांच पर किए गए बदलावों की तुलना और चर्चा कर सकते हैं, जिसमें रिव्यू, टिप्पणियां, इंटीग्रेटेड टेस्ट और अन्य चीजें शामिल हैं। एक अच्छा Pull request लगभग उन्हीं नियमों का पालन करता है जो एक कमिट मैसेज करता है। आप इश्यू ट्रैकर में किसी इश्यू का संदर्भ जोड़ सकते हैं, उदाहरण के लिए जब आपका काम किसी इश्यू को ठीक करता है। इसे `#` के बाद इश्यू नंबर का उपयोग करके किया जाता है। उदाहरण: `#97`। +एक पुल रिक्वेस्ट वह जगह है जहां किसी ब्रांच पर किए गए अंतर की तुलना और चर्चा होती है समीक्षा, टिप्पणियाँ, इंटीग्रेटेड टेस्ट और अन्य चीज़ों के साथ। एक अच्छी पुल रिक्वेस्ट लगभग उसी नियम का पालन करती है जो एक कमिट संदेश करता है। आप इश्यू ट्रैकर में किसी इश्यू का संदर्भ जोड़ सकते हैं, जब आपका काम उदाहरण के लिए किसी इश्यू को ठीक करता है। यह `#` के बाद आपके इश्यू का नंबर डालकर किया जाता है। उदाहरण के लिए `#97`। -🤞उम्मीद है कि सभी चेक पास हो जाएं और परियोजना मालिक आपके बदलावों को परियोजना में मर्ज कर दें🤞 +🤞उम्मीद है कि सभी चेक पास हों और परियोजना के मालिक आपके बदलावों को परियोजना में मर्ज कर दें🤞 अपने वर्तमान लोकल वर्किंग ब्रांच को GitHub पर संबंधित रिमोट ब्रांच से सभी नए कमिट्स के साथ अपडेट करें: `git pull` -## ओपन सोर्स में योगदान कैसे करें +## ओपन सोर्स में योगदान करना (आपका मौका प्रभाव डालने का!) + +क्या आप कुछ ऐसा करने के लिए तैयार हैं जो आपके दिमाग को पूरी तरह हिला देगा? 🤯 आइए बात करते हैं ओपन सोर्स परियोजनाओं में योगदान करने की – और इस बारे में सोचकर ही मुझे रोमांच हो रहा है कि मैं यह आपके साथ साझा कर रहा हूँ! + +यह आपका मौका है कुछ सचमुच असाधारण का हिस्सा बनने का। कल्पना करें उन टूल्स को बेहतर बनाने की जिन्हें लाखों डेवलपर्स हर दिन उपयोग करते हैं, या एक ऐसी ऐप में बग ठीक करने की जिसे आपके दोस्त पसंद करते हैं। यह सिर्फ एक सपना नहीं है – यही तो ओपन सोर्स योगदान का असली मतलब है! -पहले, GitHub पर एक रिपॉजिटरी (या **repo**) खोजें जो आपको रुचिकर लगे और जिसमें आप बदलाव करना चाहते हैं। आप इसकी सामग्री को अपनी मशीन पर कॉपी करना चाहेंगे। +जो चीज मुझे हर बार रोमांचित करती है जब मैं इसके बारे में सोचता हूँ: हर वो टूल जिसे आपने सीखना शुरू किया – आपका कोड एडिटर, जिन फ्रेमवर्क्स की हम खोज करेंगे, यहां तक कि आपका ब्राउज़र जिसमें आप यह पढ़ रहे हैं – यह सब किसी ऐसे व्यक्ति के साथ शुरू हुआ जिसने आपकी तरह अपना पहला योगदान दिया। वह प्रतिभाशाली डेवलपर जिसने आपका पसंदीदा VS Code एक्सटेंशन बनाया? वे भी एक बार शुरुआती थे जो "create pull request" पर कंपकंपाते हाथों से क्लिक कर रहे थे, बिल्कुल जैसे आप करने वाले हैं। -✅ 'शुरुआती-अनुकूल' रिपॉजिटरी खोजने का एक अच्छा तरीका है [टैग 'good-first-issue' द्वारा खोज करना](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)। +और ये सबसे खूबसूरत हिस्सा है: ओपन सोर्स समुदाय इंटरनेट की सबसे बड़ी गले लगाने वाली जमात की तरह है। अधिकांश प्रोजेक्ट्स सक्रिय रूप से नए लोगों की तलाश करते हैं और उनके पास "good first issue" टैग के साथ विशेष चिह्नित इश्यू होते हैं जो आपके जैसे लोगों के लिए होते हैं! मैनटेनर्स सचमुच उत्साहित हो जाते हैं जब वे नए योगदानकर्ताओं को देखते हैं क्योंकि उन्हें अपनी पहली शुरुआत याद आती है। -![रिपॉजिटरी को लोकल कॉपी करें](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.hi.png) +```mermaid +flowchart TD + A[🔍 GitHub एक्सप्लोर करें] --> B[🏷️ "good first issue" खोजें] + B --> C[📖 योगदान दिशानिर्देश पढ़ें] + C --> D[🍴 रिपॉजिटरी फोर्क करें] + D --> E[💻 स्थानीय परिवेश सेट अप करें] + E --> F[🌿 फीचर ब्रांच बनाएं] + F --> G[✨ अपना योगदान करें] + G --> H[🧪 अपने बदलावों का परीक्षण करें] + H --> I[📝 स्पष्ट कमिट लिखें] + I --> J[📤 पुश करें और PR बनाएं] + J --> K[💬 प्रतिक्रिया के साथ जुड़ें] + K --> L[🎉 मर्ज हो गया! आप एक योगदानकर्ता हैं!] + L --> M[🌟 अगला इश्यू खोजें] + + style A fill:#e1f5fe + style L fill:#c8e6c9 + style M fill:#fff59d +``` +यहाँ आप सिर्फ कोड सीख ही नहीं रहे - आप उन बिल्डर्स के वैश्विक परिवार में शामिल होने की तैयारी कर रहे हैं जो रोज़ सुबह उठकर सोचते हैं "डिजिटल दुनिया को थोड़ा बेहतर कैसे बनाया जाए?" क्लब में आपका स्वागत है! 🌟 -कोड कॉपी करने के कई तरीके हैं। एक तरीका है रिपॉजिटरी की सामग्री को "क्लोन" करना, HTTPS, SSH, या GitHub CLI (कमांड लाइन इंटरफ़ेस) का उपयोग करके। +सबसे पहले, आइए GitHub पर अपनी रुचि के अनुसार कोई रिपॉजिटरी (या **repo**) खोजें जिसमें आप बदलाव का योगदान देना चाहते हैं। आप इसके कंटेंट को अपनी मशीन पर कॉपी करना चाहेंगे। -अपना टर्मिनल खोलें और रिपॉजिटरी को इस तरह क्लोन करें: -`git clone https://github.com/ProjectURL` +✅ 'beginner-friendly' रिपॉजिटरी खोजने का एक अच्छा तरीका है [‘good-first-issue’ टैग से खोजें](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)। -परियोजना पर काम करने के लिए, सही फ़ोल्डर पर स्विच करें: +![Copy a repo locally](../../../../translated_images/clone_repo.5085c48d666ead57.hi.png) + +कोड कॉपी करने के कई तरीके हैं। एक तरीका है रिपॉजिटरी के कंटेंट को "क्लोन" करना, HTTPS, SSH, या GitHub CLI (कमांड लाइन इंटरफ़ेस) का उपयोग करके। + +अपना टर्मिनल खोलें और इस तरह रिपॉजिटरी क्लोन करें: +```bash +# HTTPS का उपयोग करना +git clone https://github.com/ProjectURL + +# SSH का उपयोग करना (SSH कुंजी सेटअप आवश्यक) +git clone git@github.com:username/repository.git + +# GitHub CLI का उपयोग करना +gh repo clone username/repository +``` + +परियोजना पर काम करने के लिए सही फ़ोल्डर में जाएं: `cd ProjectURL` -आप पूरे प्रोजेक्ट को [Codespaces](https://github.com/features/codespaces), GitHub का एम्बेडेड कोड एडिटर / क्लाउड डेवलपमेंट एनवायरनमेंट, या [GitHub Desktop](https://desktop.github.com/) का उपयोग करके भी खोल सकते हैं। +आप पूरे प्रोजेक्ट को भी खोल सकते हैं: +- **[GitHub Codespaces](https://github.com/features/codespaces)** - ब्राउज़र में VS Code के साथ GitHub का क्लाउड विकास वातावरण +- **[GitHub Desktop](https://desktop.github.com/)** - Git संचालन के लिए GUI ऐप्लिकेशन +- **[GitHub.dev](https://github.dev)** - किसी भी GitHub रिपॉजिटरी में `.` की दबाकर ब्राउज़र में VS Code खोलें +- VS Code साथ GitHub Pull Requests एक्सटेंशन -अंत में, आप कोड को ज़िप फ़ोल्डर में डाउनलोड कर सकते हैं। +अंत में, आप कोड को ज़िप फ़ोल्डर में डाउनलोड भी कर सकते हैं। -### GitHub के बारे में कुछ और रोचक बातें +### GitHub के बारे में कुछ और दिलचस्प बातें -आप GitHub पर किसी भी सार्वजनिक रिपॉजिटरी को स्टार, वॉच और/या "फोर्क" कर सकते हैं। आप अपने स्टार किए गए रिपॉजिटरी को टॉप-राइट ड्रॉप-डाउन मेनू में पा सकते हैं। यह कोड के लिए बुकमार्किंग जैसा है। +आप GitHub पर किसी भी सार्वजनिक रिपॉजिटरी को स्टार, वॉच और/या "फोर्क" कर सकते हैं। आप अपनी स्टार की हुई रिपॉजिटरीज टॉप-राइट ड्रॉपडाउन मेनू में पा सकते हैं। यह बुकमार्किंग की तरह है, केवल कोड के लिए। -परियोजनाओं में एक इश्यू ट्रैकर होता है, ज्यादातर GitHub पर "Issues" टैब में जब तक अन्यथा संकेत न दिया गया हो, जहां लोग परियोजना से संबंधित मुद्दों पर चर्चा करते हैं। और Pull Requests टैब वह जगह है जहां लोग प्रगति में बदलावों पर चर्चा और समीक्षा करते हैं। +प्रोजेक्ट्स में इश्यू ट्रैकर होता है, ज्यादातर GitHub पर "Issues" टैब में जब तक कि कहीं और उल्लेख न हो, जहां लोग प्रोजेक्ट से संबंधित मुद्दों पर चर्चा करते हैं। और Pull Requests टैब जहां लोग प्रगति पर परिवर्तन पर चर्चा और समीक्षा करते हैं। -परियोजनाओं में चर्चा फोरम, मेलिंग लिस्ट, या चैट चैनल जैसे Slack, Discord या IRC में भी हो सकती है। +प्रोजेक्ट्स में फोरम, मेलिंग लिस्ट, या Slack, Discord या IRC जैसे चैट चैनल भी हो सकते हैं। -✅ अपने नए GitHub रिपॉजिटरी के चारों ओर एक नज़र डालें और कुछ चीजें आज़माएं, जैसे सेटिंग्स संपादित करना, अपने रिपॉजिटरी में जानकारी जोड़ना, और एक प्रोजेक्ट बनाना (जैसे कि Kanban बोर्ड)। आप बहुत कुछ कर सकते हैं! +🔧 **आधुनिक GitHub सुविधाएं**: +- **GitHub Discussions** - समुदाय वार्तालाप के लिए इन-बिल्ट फोरम +- **GitHub Sponsors** - मैनटेनर्स को वित्तीय सहायता +- **सिक्योरिटी टैब** - कमजोरियों की रिपोर्ट और सुरक्षा सलाह +- **Actions टैब** - स्वचालित वर्कफ़्लो और CI/CD पाइपलाइन देखें +- **Insights टैब** - योगदानकर्ताओं, कमिट्स और प्रोजेक्ट स्वास्थ्य के बारे में विश्लेषण +- **Projects टैब** - GitHub के इन-बिल्ट प्रोजेक्ट प्रबंधन उपकरण + +✅ अपने नए GitHub रिपॉजिटरी के आसपास देखें और कुछ चीज़ें आज़माएं, जैसे सेटिंग्स संपादित करना, अपने रिपॉजिटरी में जानकारी जोड़ना, एक प्रोजेक्ट बनाना (जैसे कानबन बोर्ड), और ऑटोमेशन के लिए GitHub Actions सेटअप करना। आप बहुत कुछ कर सकते हैं! --- -## 🚀 चुनौती +## 🚀 चुनौती + +ठीक है, अब अपने नए शानदार GitHub सुपरपावर का परीक्षण करने का समय है! 🚀 यहाँ एक चुनौती है जो हर चीज़ को सबसे संतोषजनक तरीके से समझने में मदद करेगी: + +अपना कोई दोस्त (या वह परिवार का सदस्य जो हमेशा पूछता रहता है कि आप इस सारे "कंप्यूटर के काम" के साथ क्या कर रहे हैं) लें और मिलकर एक सहयोगी कोडिंग साहसिक कार्य पर निकलें! यहीं असली जादू होता है – एक प्रोजेक्ट बनाएं, उन्हें इसे फोर्क करने दें, कुछ ब्रांच बनाएं, और जैसे प्रो बनते जा रहे हैं, बदलाव मर्ज करें। -एक दोस्त के साथ मिलकर एक-दूसरे के कोड पर काम करें। एक प्रोजेक्ट को सहयोगात्मक रूप से बनाएं, कोड फोर्क करें, ब्रांच बनाएं, और बदलाव मर्ज करें। +मैं झूठ नहीं बोलूंगा – आप शायद किसी बिंदु पर हँसेंगे (खासकर जब आप दोनों एक ही लाइन को बदलने की कोशिश करेंगे), शायद उलझन में सिर पकड़ेंगे, लेकिन आपको निश्चित रूप से वह अद्भुत "आहा!" क्षण मिलेंगे जो सारी सीखने की मेहनत को सार्थक बनाते हैं। साथ ही, किसी और के साथ पहला सफल मर्ज शेयर करने का कुछ खास ही मज़ा होता है – यह आपकी प्रगति का एक छोटा जश्न होता है! + +अभी तक आपके पास कोडिंग साथी नहीं है? चिंता मत करें! GitHub समुदाय बेहद स्वागतयोग्य लोगों से भरा है जो जानता है कि नए होने का अनुभव कैसा होता है। "good first issue" लेबल वाले रिपॉजिटरी देखें – वे मूलतः कह रहे हैं "अरे शुरुआती लोग, हमारे साथ सीखो!" कितना अद्भुत है यह? ## पोस्ट-लेक्चर क्विज़ -[पोस्ट-लेक्चर क्विज़](https://ff-quizzes.netlify.app/web/en/) +[Post-lecture quiz](https://ff-quizzes.netlify.app/web/en/) + +## समीक्षा और सीखते रहें -## समीक्षा और स्व-अध्ययन +वाह! 🎉 देखिए तो आपको – आपने GitHub के मूल सिद्धांतों को एकदम शान से सीख लिया! अगर आपका दिमाग अभी थोड़ा भरा हुआ महसूस हो रहा है, तो यह पूरी तरह सामान्य है और वास्तव में अच्छा संकेत भी है। आपने अभी ऐसे उपकरण सीखे हैं जिन्हें सीखने में मुझे हफ्तों लगे थे जब मैंने शुरू किया था। -[ओपन सोर्स सॉफ़्टवेयर में योगदान करने के बारे में अधिक पढ़ें](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution)। +Git और GitHub बेहद शक्तिशाली हैं (बहुत ही शक्तिशाली), और मैं जानता हूँ कि हर डेवलपर – जिनमें से कई अब जादूगर लगते हैं – को अभ्यास करना पड़ा और थोड़े-बहुत फिसलना पड़ा इससे पहले कि सब कुछ समझ में आए। आपने इस पाठ को पूरा कर लिया है इसका मतलब है कि आप डेवलपर की टूलकिट के कुछ सबसे महत्वपूर्ण उपकरणों में महारत हासिल करने की राह पर हैं। -[Git चीटशीट](https://training.github.com/downloads/github-git-cheat-sheet/)। +यहाँ कुछ बेहतरीन संसाधन हैं जो आपकी प्रैक्टिस में मदद करेंगे और आपको और भी शानदार बनाएंगे: -अभ्यास करें, अभ्यास करें, अभ्यास करें। GitHub के पास [skills.github.com](https://skills.github.com) के माध्यम से शानदार लर्निंग पाथ उपलब्ध हैं: +- [ओपन सोर्स सॉफ़्टवेयर में योगदान करने के लिए गाइड](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – फर्क डालने का आपका रोडमैप +- [Git चीटशीट](https://training.github.com/downloads/github-git-cheat-sheet/) – त्वरित संदर्भ के लिए उपयोगी! -- [GitHub पर पहला सप्ताह](https://skills.github.com/#first-week-on-github) +और याद रखें: अभ्यास से प्रगति होती है, पूर्णता से नहीं! जितना अधिक आप Git और GitHub का उपयोग करेंगे, उतना ही यह सहज होता जाएगा। GitHub ने कई अद्भुत इंटरैक्टिव कोर्स बनाए हैं जो आपको सुरक्षित वातावरण में अभ्यास करने देते हैं: -आपको अधिक उन्नत पाठ्यक्रम भी मिलेंगे। +- [GitHub का परिचय](https://github.com/skills/introduction-to-github) +- [Markdown का उपयोग करके संवाद करें](https://github.com/skills/communicate-using-markdown) +- [GitHub Pages](https://github.com/skills/github-pages) +- [मर्ज कॉन्फ्लिक्ट प्रबंधित करना](https://github.com/skills/resolve-merge-conflicts) -## असाइनमेंट +**रोमांचक महसूस कर रहे हैं? इन आधुनिक टूल देखें:** +- [GitHub CLI दस्तावेज़](https://cli.github.com/manual/) – जब आप कमांड-लाइन विज़ार्ड जैसा महसूस करना चाहें +- [GitHub Codespaces दस्तावेज़](https://docs.github.com/en/codespaces) – क्लाउड में कोड करें! +- [GitHub Actions दस्तावेज़](https://docs.github.com/en/actions) – सब कुछ ऑटोमेट करें +- [Git सर्वोत्तम अभ्यास](https://www.atlassian.com/git/tutorials/comparing-workflows) – अपने वर्कफ़्लो गेम को बेहतर बनाएं + +## GitHub Copilot एजेंट चुनौती 🚀 + +एजेंट मोड का उपयोग करके निम्न चुनौती पूरी करें: + +**विवरण:** एक सहकारी वेब विकास प्रोजेक्ट बनाएं जो इस पाठ में सीखे गए GitHub वर्कफ़्लो को पूरी तरह से प्रदर्शित करता है। यह चुनौती आपको रिपॉजिटरी निर्माण, सहयोगी फीचर्स, और आधुनिक Git वर्कफ़्लोज़ का व्यावहारिक अभ्यास कराएगी। + +**प्रॉम्प्ट:** एक सरल "वेब विकास संसाधन" प्रोजेक्ट के लिए नई सार्वजनिक GitHub रिपॉजिटरी बनाएँ। रिपॉजिटरी में एक सुव्यवस्थित README.md फाइल शामिल हो जिसमें उपयोगी वेब विकास उपकरण और संसाधनों की सूची हो, अलग-अलग श्रेणियों (HTML, CSS, JavaScript, आदि) में व्यवस्थित। रिपॉजिटरी को उचित समुदाय मानकों के साथ सेटअप करें जिसमें लाइसेंस, सहयोग दिशानिर्देश, और आचार संहिता शामिल हो। कम से कम दो फीचर ब्रांच बनाएं: एक CSS संसाधन जोड़ने के लिए और दूसरी JavaScript संसाधन के लिए। प्रत्येक ब्रांच में वर्णनात्मक कमिट मैसेज के साथ कमिट करें, फिर परिवर्तनों को मुख्य शाखा में मर्ज करने के लिए पुल रिक्वेस्ट बनाएं। GitHub सुविधाएं जैसे Issues, Discussions सक्षम करें, और स्वचालित जांचों के लिए एक मूल GitHub Actions वर्कफ़्लो सेटअप करें। + +## असाइनमेंट + +आपका मिशन, यदि आप स्वीकार करते हैं: GitHub Skills पर [Introduction to GitHub](https://github.com/skills/introduction-to-github) कोर्स पूरा करें। यह इंटरैक्टिव कोर्स आपको सुरक्षित, मार्गदर्शित वातावरण में आपने जो कुछ भी सीखा है उसका अभ्यास करने देगा। और जब आप इसे पूरा करेंगे, तो आपको एक शानदार बैज भी मिलेगा! 🏅 + +**अधिक चुनौतियों के लिए तैयार?** +- अपने GitHub अकाउंट के लिए SSH प्रमाणीकरण सेट करें (पासवर्ड नहीं!) +- दैनिक Git ऑपरेशंस के लिए GitHub CLI का उपयोग करें +- एक GitHub Actions वर्कफ़्लो के साथ रिपॉजिटरी बनाएं +- GitHub Codespaces को क्लाउड-आधारित संपादक में इस रिपॉजिटरी को खोलकर एक्सप्लोर करें + +--- -[GitHub पर पहला सप्ताह पाठ्यक्रम](https://skills.github.com/#first-week-on-github) पूरा करें। +## 🚀 आपकी GitHub मास्टरी टाइमलाइन + +### ⚡ **अगले 5 मिनट में आप क्या कर सकते हैं** +- [ ] इस रिपॉजिटरी को स्टार करें और 3 अन्य परियोजनाओं को भी जो आपको पसंद हों +- [ ] अपने GitHub अकाउंट पर टू-फैक्टर ऑथेंटिकेशन सेट करें +- [ ] अपना पहला सरल README बनाएं +- [ ] 5 डेवलपर्स को फॉलो करें जिनका कार्य आपको प्रेरित करता है + +### 🎯 **इस घंटे में आप क्या पूरा कर सकते हैं** +- [ ] पोस्ट-लेक्चर क्विज़ पूरा करें और अपनी GitHub यात्रा पर विचार करें +- [ ] पासवर्ड मुक्त GitHub प्रमाणीकरण के लिए SSH की सेटअप करें +- [ ] एक उत्कृष्ट कमिट संदेश के साथ अपना पहला महत्वपूर्ण कमिट करें +- [ ] GitHub के "Explore" टैब को खोजें और ट्रेंडिंग प्रोजेक्ट्स देखें +- [ ] फोर्क करने और एक छोटा बदलाव करने का अभ्यास करें + +### 📅 **आपका सप्ताहभर का GitHub एडवेंचर** +- [ ] GitHub Skills कोर्स (Introduction to GitHub, Markdown) पूरा करें +- [ ] किसी ओपन सोर्स प्रोजेक्ट के लिए अपना पहला पुल रिक्वेस्ट बनाएं +- [ ] अपना कार्य दिखाने के लिए GitHub Pages साइट सेटअप करें +- [ ] प्रोजेक्ट्स पर GitHub Discussions में शामिल हों +- [ ] एक रिपॉजिटरी बनाएँ जिसमें उचित समुदाय मानक हों (README, License, आदि) +- [ ] क्लाउड-आधारित विकास के लिए GitHub Codespaces आज़माएं + +### 🌟 **आपका महीने भर का रूपांतरण** +- [ ] 3 विभिन्न ओपन सोर्स प्रोजेक्ट्स में योगदान दें +- [ ] GitHub में नए लोगों को मार्गदर्शन करें (pay it forward!) +- [ ] GitHub Actions के साथ स्वचालित वर्कफ़्लो सेटअप करें +- [ ] अपने GitHub योगदानों को दिखाने वाला एक पोर्टफोलियो बनाएं +- [ ] Hacktoberfest या समान सामुदायिक कार्यक्रमों में भाग लें +- [ ] अपने स्वयं के प्रोजेक्ट का मैनटेनेर बनें जिसमें अन्य लोग योगदान देते हों + +### 🎓 **अंतिम GitHub मास्टरी चेक-इन** + +**देखिए आपने कितना हासिल किया है:** +- GitHub का उपयोग करते समय आपकी पसंदीदा बात क्या है? +- कौन सा सहयोगी फीचर आपको सबसे ज्यादा उत्साहित करता है? +- आप ओपन सोर्स में योगदान करने को लेकर अब कितना आत्मविश्वासी महसूस करते हैं? +- आप सबसे पहले किस प्रोजेक्ट में योगदान देना चाहते हैं? + +```mermaid +journey + title आपका GitHub आत्मविश्वास यात्रा + section आज + Nervous: 3: You + Curious: 4: You + Excited: 5: You + section इस सप्ताह + Practicing: 4: You + Contributing: 5: You + Connecting: 5: You + section अगला महीना + Collaborating: 5: You + Leading: 5: You + Inspiring Others: 5: You +``` +> 🌍 **वैश्विक डेवलपर समुदाय में आपका स्वागत है!** अब आपके पास मिलियनों डेवलपर्स के साथ सहयोग करने के लिए उपकरण हैं। आपका पहला योगदान शायद छोटा लगे, लेकिन याद रखें - हर बड़ा ओपन सोर्स प्रोजेक्ट किसी ने अपनी पहली कमिट से शुरू किया था। सवाल यह नहीं है कि क्या आप प्रभाव डालेंगे, बल्कि यह है कि आपकी अनूठी दृष्टिकोण से सबसे पहले कौन सा अद्भुत प्रोजेक्ट लाभान्वित होगा! 🚀 + +याद रखें: हर विशेषज्ञ कभी एक शुरुआती था। आप कर सकते हैं! 💪 --- -**अस्वीकरण**: -यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को आधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं। \ No newline at end of file + +**अस्वीकरण**: +इस दस्तावेज़ का अनुवाद AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियां या गलतियां हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में प्राधिकृत स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए पेशेवर मानव अनुवाद की सलाह दी जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं। + \ No newline at end of file diff --git a/translations/hi/1-getting-started-lessons/3-accessibility/README.md b/translations/hi/1-getting-started-lessons/3-accessibility/README.md index 940b34c19..415816495 100644 --- a/translations/hi/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/hi/1-getting-started-lessons/3-accessibility/README.md @@ -1,244 +1,1500 @@ -# वेबपेज को सुलभ बनाना - -![सुलभता के बारे में सब कुछ](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.hi.png) -> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा - -## प्री-लेक्चर क्विज़ -[प्री-लेक्चर क्विज़](https://ff-quizzes.netlify.app/web/) +# सुलभ वेबपेज बनाना + +![सभी के लिए सुलभता](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.hi.png) +> स्केचनोट: [टोमोमी इमुरा](https://twitter.com/girlie_mac) + +```mermaid +journey + title आपकी सुलभता सीखने की यात्रा + section Foundation + उपयोगकर्ताओं को समझना: 5: You + परीक्षण उपकरण: 4: You + POUR सिद्धांत: 5: You + section Build Skills + सेमान्टिक HTML: 4: You + दृश्य डिज़ाइन: 5: You + ARIA तकनीकें: 4: You + section Master Practice + कीबोर्ड नेविगेशन: 5: You + फॉर्म सुलभता: 4: You + वास्तविक दुनिया परीक्षण: 5: You +``` +## पूर्व-व्याख्यान क्विज़ +[पूर्व-व्याख्यान क्विज़](https://ff-quizzes.netlify.app/web/) -> वेब की शक्ति इसकी सार्वभौमिकता में है। विकलांगता की परवाह किए बिना सभी के लिए पहुंच एक आवश्यक पहलू है। +> वेब की ताकत इसकी सार्वभौमिकता में है। विकलांगता की परवाह किए बिना सभी के लिए पहुँच एक महत्वपूर्ण पहलू है। > > \- सर टिमोथी बर्नर्स-ली, W3C निदेशक और वर्ल्ड वाइड वेब के आविष्कारक -यह उद्धरण सुलभ वेबसाइट बनाने के महत्व को पूरी तरह से उजागर करता है। एक ऐसा एप्लिकेशन जिसे सभी द्वारा एक्सेस नहीं किया जा सकता है, वह स्वाभाविक रूप से बहिष्कृत है। एक वेब डेवलपर के रूप में हमें हमेशा सुलभता को ध्यान में रखना चाहिए। शुरुआत से ही इस पर ध्यान केंद्रित करके, आप यह सुनिश्चित करने की दिशा में सही कदम उठाएंगे कि हर कोई आपके द्वारा बनाए गए पेजों तक पहुंच सके। इस पाठ में, आप उन उपकरणों के बारे में जानेंगे जो यह सुनिश्चित करने में आपकी मदद कर सकते हैं कि आपके वेब संसाधन सुलभ हैं और सुलभता को ध्यान में रखते हुए निर्माण कैसे करें। +यहाँ कुछ ऐसा है जो आपको चौंका सकता है: जब आप सुलभ वेबसाइटें बनाते हैं, तो आप केवल विकलांग लोगों की मदद ही नहीं कर रहे होते — आप वास्तव में वेब को सभी के लिए बेहतर बना रहे होते हैं! + +क्या आपने कभी उस फुटपाथ के किनारे बने कर्ब कट्स (curb cuts) देखे हैं? वे मूल रूप से व्हीलचेयर के लिए डिजाइन किए गए थे, लेकिन अब वे स्टोलर्स (strollers) वाले लोगों, डिलीवरी कर्मचारियों के डॉलीज़, घूमने वाले यात्रियों के रोलिंग लगेज, और साइकिल चालकों की भी मदद करते हैं। यही सुलभ वेब डिजाइन का तरीका है—ऐसे समाधान जो एक समूह की मदद करते हैं अक्सर सभी के लिए लाभदायक होते हैं। काफ़ी अच्छा है, है ना? + +इस पाठ में, हम उन वेबसाइटों को बनाने के तरीकों का पता लगाएंगे जो वास्तव में हर किसी के लिए काम करती हैं, चाहे वे वेब कैसे भी ब्राउज़ करें। आप वेब मानकों में पहले से मौजूद व्यावहारिक तकनीकों को जानेंगे, परीक्षण उपकरणों के साथ व्यावहारिक ज्ञान प्राप्त करेंगे, और देखेंगे कि कैसे सुलभता आपकी साइटों को सभी उपयोगकर्ताओं के लिए अधिक उपयोगी बनाती है। + +पाठ के अंत तक, आपके पास यह आत्मविश्वास होगा कि आप सुलभता को अपने विकास वर्कफ़्लो का स्वाभाविक हिस्सा बना सकेंगे। तैयार हैं यह जानने के लिए कि सोच-समझकर लिए गए डिज़ाइन विकल्प किस तरह अरबों उपयोगकर्ताओं के लिए वेब को खोल सकते हैं? तो चलिए शुरू करते हैं! + +```mermaid +mindmap + root((वेब पहुँच)) + Users + स्क्रीन रीडर्स + कीबोर्ड नेविगेशन + वॉइस कंट्रोल + मैग्नीफिकेशन + Technologies + HTML सेमान्टिक्स + ARIA विशेषताएँ + CSS फोकस संकेतक + कीबोर्ड इवेंट्स + Benefits + व्यापक दर्शक + बेहतर SEO + कानूनी अनुपालन + सार्वभौमिक डिज़ाइन + Testing + स्वचालित उपकरण + मैनुअल परीक्षण + उपयोगकर्ता प्रतिक्रिया + वास्तविक सहायक तकनीक +``` +> आप यह पाठ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) पर भी ले सकते हैं! -> आप इस पाठ को [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) पर ले सकते हैं! +## सहायक प्रौद्योगिकियों को समझना -## उपयोग करने के लिए उपकरण +कोडिंग में कूदने से पहले, आइए एक पल लें और समझें कि विभिन्न क्षमताओं वाले लोग वेब का अनुभव कैसे करते हैं। यह केवल सिद्धांत नहीं है — इन वास्तविक दुनिया की नेविगेशन पद्धतियों को समझना आपको एक बेहतर डेवलपर बनाएगा! + +सहायक प्रौद्योगिकियाँ ऐसे अद्भुत उपकरण हैं जो विकलांग लोगों को वेबसाइटों के साथ इंटरैक्ट करने में मदद करते हैं, जो आपको आश्चर्यचकित कर सकती हैं। जब आप समझ जाते हैं कि ये प्रौद्योगिकियाँ कैसे काम करती हैं, तो सुलभ वेब अनुभव बनाना बहुत अधिक सहज हो जाता है। यह ऐसा है जैसे आप अपने कोड को किसी और की नजर से देखना सीख रहे हों। ### स्क्रीन रीडर -सबसे प्रसिद्ध सुलभता उपकरणों में से एक स्क्रीन रीडर हैं। +[स्क्रीन रीडर्स](https://en.wikipedia.org/wiki/Screen_reader) काफी परिष्कृत तकनीकें हैं जो डिजिटल टेक्स्ट को वाक् या ब्रेल आउटपुट में बदल देती हैं। जब ये मुख्य रूप से दृष्टि बाधित उपयोगकर्ता उपयोग करते हैं, ये डिस्लेक्सिया जैसे सीखने की कठिनाइयों वाले उपयोगकर्ताओं के लिए भी बेहद मददगार हैं। + +मैं स्क्रीन रीडर को ऐसे सोचता हूँ जैसे आपके लिए कोई बहुत चालाक कथावाचक किताब पढ़ रहा हो। यह सामग्री को तार्किक क्रम में जोर से पढ़ता है, इंटरैक्टिव तत्वों जैसे "बटन" या "लिंक" की घोषणा करता है, और पेज में नेविगेट करने के लिए कीबोर्ड शॉर्टकट प्रदान करता है। लेकिन बात यह है—स्क्रीन रीडर्स तभी अपना जादू दिखा सकते हैं जब हम वेबसाइटों को उचित संरचना और अर्थपूर्ण सामग्री के साथ बनाते हैं। यही वह जगह है जहाँ आप एक डेवलपर के रूप में आते हैं! + +**प्लेटफार्मों पर लोकप्रिय स्क्रीन रीडर्स:** +- **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (मुफ्त और सबसे लोकप्रिय), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (बिल्ट-इन) +- **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (बिल्ट-इन और बहुत सक्षम) +- **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (बिल्ट-इन) +- **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (मुफ्त और ओपन-सोर्स) + +**स्क्रीन रीडर्स वेब कंटेंट में इस प्रकार नेविगेट करते हैं:** + +स्क्रीन रीडर कई नेविगेशन तरीके प्रदान करते हैं जो अनुभवी उपयोगकर्ताओं के लिए ब्राउज़िंग को कुशल बनाते हैं: +- **क्रमिक पठन**: ऊपर से नीचे तक सामग्री पढ़ना, जैसे किताब पढ़ना +- **लैंडमार्क नेविगेशन**: पेज के सेक्शन्स (हेडर, नेव, मेन, फूटर) के बीच कूदना +- **हैडिंग नेविगेशन**: शीर्षकों के बीच कूदकर पेज संरचना समझना +- **लिंक सूची**: सभी लिंक की सूची बनाना तेज़ पहुँच के लिए +- **फ़ॉर्म नियंत्रण**: इनपुट फ़ील्ड्स और बटनों के बीच सीधे नेविगेट करना + +> 💡 **यह मेरी समझ से परे था**: 68% स्क्रीन रीडर उपयोगकर्ता प्राथमिक रूप से शीर्षकों के द्वारा नेविगेट करते हैं ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding))। इसका अर्थ है कि आपका शीर्षक ढांचा उपयोगकर्ताओं के लिए एक नक्शा है—जब यह सही होता है, तो आप वास्तव में लोगों को उनके सामग्री के आस-पास तेज़ी से मार्ग दिखा रहे होते हैं! + +### आपका परीक्षण वर्कफ़्लो बनाना + +यहाँ अच्छी खबर है — प्रभावी सुलभता परीक्षण भारी-भरकम नहीं होना चाहिए! आप स्वचालित उपकरणों (जो स्पष्ट समस्याओं को पकड़ने में शानदार हैं) को कुछ हाथों-हाथ परीक्षण के साथ संयोजित करना चाहेंगे। यहाँ एक व्यवस्थित तरीका है जिससे मैंने पाया है कि यह सबसे अधिक मुद्दें पकड़ता है बिना आपके पूरे दिन को खपत किए: + +**आवश्यक मैनुअल परीक्षण वर्कफ़्लो:** + +```mermaid +flowchart TD + A[🚀 परीक्षण शुरू करें] --> B{⌨️ कीबोर्ड नेविगेशन} + B --> C[सभी इंटरैक्टिव तत्वों के माध्यम से टैब करें] + C --> D{🎧 स्क्रीन रीडर परीक्षण} + D --> E[NVDA/VoiceOver के साथ परीक्षण करें] + E --> F{🔍 ज़ूम परीक्षण} + F --> G[200% ज़ूम करें और कार्यक्षमता का परीक्षण करें] + G --> H{🎨 रंग/विपरीत जाँच} + H --> I[सुनिश्चित करें कि सभी पाठ विपरीत अनुपात पूर्ण करते हैं] + I --> J{👁️ फोकस प्रबंधन} + J --> K[सुनिश्चित करें कि फोकस संकेतक दिखाई देते हैं] + K --> L[✅ परीक्षण पूर्ण] + + style A fill:#e3f2fd + style L fill:#e8f5e8 + style B fill:#fff3e0 + style D fill:#f3e5f5 + style F fill:#e0f2f1 + style H fill:#fce4ec + style J fill:#e8eaf6 +``` +**चरण-दर-चरण परीक्षण चेकलिस्ट:** +1. **कीबोर्ड नेविगेशन**: केवल Tab, Shift+Tab, Enter, Space, और एरो कीज़ का उपयोग करें +2. **स्क्रीन रीडर परीक्षण**: NVDA, VoiceOver, या Narrator चालू करें और आंखें बंद कर नेविगेट करें +3. **जूम परीक्षण**: 200% और 400% जूम स्तर पर परीक्षण करें +4. **रंग विरोध सत्यापन**: सभी टेक्स्ट और UI घटकों की जांच करें +5. **फोकस सूचक परीक्षण**: सुनिश्चित करें कि सभी इंटरैक्टिव तत्वों में स्पष्ट फोकस स्टेट्स हों + +✅ **लाइटहाउस से शुरू करें**: अपने ब्राउज़र के DevTools खोलें, लाइटहाउस सुलभता ऑडिट चलाएं, फिर परिणामों का उपयोग करके अपने मैनुअल परीक्षण के फोकस क्षेत्रों का निर्धारण करें। + +### ज़ूम और मैग्निफिकेशन उपकरण + +आप जानते हैं कि जब टेक्स्ट बहुत छोटा होता है तो आप कभी-कभी अपने मोबाइल पर पिंच टू ज़ूम करते हैं, या तेज़ धूप में लैपटॉप स्क्रीन पर नज़दीक-नज़दीक देखते हैं? कई उपयोगकर्ता प्रत्येक दिन कंटेंट को पठनीय बनाने के लिए मैग्निफिकेशन उपकरणों पर भरोसा करते हैं। इसमें कम दृष्टि वाले लोग, बूढ़े वयस्क, और कोई भी जो कभी बाहर वेबसाइट पढ़ने की कोशिश करता है, शामिल हैं। + +आधुनिक ज़ूम तकनीकें केवल चीजों को बड़ा करने से आगे निकल चुकी हैं। यह समझना कि ये उपकरण कैसे काम करते हैं, आपको उत्तरदायी डिज़ाइन बनाने में मदद करेगा जो किसी भी ज़ूम स्तर पर कार्यात्मक और आकर्षक बनाए रखे। + +**आधुनिक ब्राउज़र ज़ूम क्षमताएँ:** +- **पेज ज़ूम**: सभी सामग्री को समानुपातिक रूप से स्केल करता है (टेक्स्ट, छवियां, लेआउट) - यह सबसे पसंदीदा तरीका है +- **केवल टेक्स्ट ज़ूम**: मूल लेआउट बनाये रखते हुए फ़ॉन्ट आकार बढ़ाता है +- **पिंच-टू-ज़ूम**: मोबाइल जेस्चर समर्थन अस्थायी मैग्निफिकेशन के लिए +- **ब्राउज़र समर्थन**: सभी आधुनिक ब्राउज़र ज़ूम को 500% तक बिना कार्यक्षमता टूटे सपोर्ट करते हैं + +**विशेष मैग्निफिकेशन सॉफ़्टवेयर:** +- **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (बिल्ट-इन), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) +- **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (बिल्ट-इन साथ उन्नत विशेषताएँ) + +> ⚠️ **डिज़ाइन विचार**: WCAG यह आवश्यक करता है कि सामग्री 200% ज़ूम पर भी कार्यात्मक बनी रहे। इस स्तर पर, क्षैतिज स्क्रॉलिंग न्यूनतम होनी चाहिए, और सभी इंटरैक्टिव तत्व सुलभ बने रहना चाहिए। + +✅ **अपने उत्तरदायी डिज़ाइन का परीक्षण करें**: अपने ब्राउज़र को 200% और 400% तक ज़ूम करें। क्या आपका लेआउट सहजता से अनुकूलित होता है? क्या आप अत्यधिक स्क्रॉलिंग के बिना सभी कार्यक्षमताओं तक पहुँच सकते हैं? + +## आधुनिक सुलभता परीक्षण उपकरण + +अब जब आप समझ गए हैं कि लोग सहायक प्रौद्योगिकियों के साथ वेब पर कैसे नेविगेट करते हैं, तो आइए उन उपकरणों की खोज करें जो आपको सुलभ वेबसाइटें बनाने और परीक्षण करने में मदद करते हैं। + +इसे इस तरह सोचिए: ऑटोमेटेड उपकरण स्पष्ट मुद्दों को पकड़ने में अच्छे हैं (जैसे गायब alt टेक्स्ट), जबकि हाथों-हाथ परीक्षण आपको सुनिश्चित करने में मदद करता है कि आपकी साइट असली दुनिया में उपयोग करने में अच्छी लगती है। साथ मिलकर, वे आपको यह आत्मविश्वास देते हैं कि आपकी साइटें सभी के लिए काम करती हैं। + +### रंग भेद परीक्षण + +यहाँ अच्छी खबर है: रंग भेद सबसे आम सुलभता मुद्दों में से एक है, लेकिन यह ठीक करने में भी सबसे आसान है। अच्छा कंट्रास्ट सभी के लिए लाभकारी होता है — दृष्टि बाधित उपयोगकर्ताओं से लेकर वे लोग जो सूरज के नीचे अपने फोन पढ़ने की कोशिश कर रहे हों। + +**WCAG कंट्रास्ट आवश्यकताएँ:** + +| टेक्स्ट प्रकार | WCAG AA (न्यूनतम) | WCAG AAA (उन्नत) | +|-----------|-------------------|---------------------| +| **सामान्य टेक्स्ट** (18pt से कम) | 4.5:1 कंट्रास्ट अनुपात | 7:1 कंट्रास्ट अनुपात | +| **बड़ा टेक्स्ट** (18pt+ या 14pt+ बोल्ड) | 3:1 कंट्रास्ट अनुपात | 4.5:1 कंट्रास्ट अनुपात | +| **UI घटक** (बटन, फ़ॉर्म बॉर्डर) | 3:1 कंट्रास्ट अनुपात | 3:1 कंट्रास्ट अनुपात | + +**आवश्यक परीक्षण उपकरण:** +- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - डेस्कटॉप ऐप रंग चयनकर्ता के साथ +- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - वेब आधारित तत्क्षण फीडबैक के साथ +- [Stark](https://www.getstark.co/) - Figma, Sketch, Adobe XD के लिए डिज़ाइन उपकरण प्लगइन +- [Accessible Colors](https://accessible-colors.com/) - सुलभ रंग पट्टियाँ खोजें + +✅ **बेहतर रंग पैलेट बनाएं**: अपने ब्रांड रंगों से शुरू करें और कंट्रास्ट चेकर का उपयोग करके सुलभ विकल्प बनाएं। इन्हें अपनी डिज़ाइन प्रणाली के सुलभ रंग टोकन के रूप में दस्तावेज़ करें। + +### व्यापक सुलभता ऑडिटिंग + +सबसे प्रभावी सुलभता परीक्षण विभिन्न तरीकों का संयोजन करता है। कोई एकल उपकरण सब कुछ नहीं पकड़ पाता, इसलिए विभिन्न तरीकों के साथ परीक्षण दिनचर्या बनाना सुनिश्चित कवरेज देता है। -[स्क्रीन रीडर](https://en.wikipedia.org/wiki/Screen_reader) आमतौर पर दृष्टि बाधित लोगों द्वारा उपयोग किए जाते हैं। जैसे हम यह सुनिश्चित करने में समय लगाते हैं कि ब्राउज़र वह जानकारी सही ढंग से प्रस्तुत करता है जिसे हम साझा करना चाहते हैं, हमें यह भी सुनिश्चित करना चाहिए कि स्क्रीन रीडर भी ऐसा ही करे। +**ब्राउज़र-आधारित परीक्षण (DevTools में अंतर्निहित):** +- **Chrome/Edge**: लाइटहाउस सुलभता ऑडिट + सुलभता पैनल +- **Firefox**: विस्तृत ट्री व्यू के साथ सुलभता इंस्पेक्टर +- **Safari**: Web Inspector में ऑडिट टैब VoiceOver सिमुलेशन के साथ -सबसे बुनियादी स्तर पर, स्क्रीन रीडर एक पेज को ऊपर से नीचे तक सुनने योग्य रूप में पढ़ता है। यदि आपका पेज केवल टेक्स्ट है, तो रीडर ब्राउज़र के समान तरीके से जानकारी प्रस्तुत करेगा। हालांकि, वेब पेज शायद ही कभी केवल टेक्स्ट होते हैं; उनमें लिंक, ग्राफिक्स, रंग और अन्य दृश्य घटक होते हैं। यह सुनिश्चित करने के लिए सावधानी बरतनी चाहिए कि स्क्रीन रीडर द्वारा इस जानकारी को सही ढंग से पढ़ा जाए। +**पेशेवर परीक्षण एक्सटेंशन:** +- [axe DevTools](https://www.deque.com/axe/devtools/) - उद्योग-मानक स्वचालित परीक्षण +- [WAVE](https://wave.webaim.org/extension/) - त्रुटि हाइलाइटिंग के साथ दृश्य प्रतिक्रिया +- [Accessibility Insights](https://accessibilityinsights.io/) - Microsoft का व्यापक परीक्षण सूट -हर वेब डेवलपर को स्क्रीन रीडर से परिचित होना चाहिए। जैसा कि ऊपर बताया गया है, यह आपके उपयोगकर्ताओं द्वारा उपयोग किया जाने वाला क्लाइंट है। जिस तरह आप ब्राउज़र के संचालन से परिचित हैं, उसी तरह आपको स्क्रीन रीडर के संचालन से भी परिचित होना चाहिए। सौभाग्य से, अधिकांश ऑपरेटिंग सिस्टम में स्क्रीन रीडर अंतर्निहित होते हैं। +**कमांड-लाइन और CI/CD एकीकरण:** +- [axe-core](https://github.com/dequelabs/axe-core) - स्वचालित परीक्षण के लिए जावास्क्रिप्ट लाइब्रेरी +- [Pa11y](https://pa11y.org/) - कमांड-लाइन सुलभता परीक्षण उपकरण +- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - स्वचालित सुलभता स्कोरिंग -कुछ ब्राउज़र में अंतर्निहित उपकरण और एक्सटेंशन भी होते हैं जो टेक्स्ट को जोर से पढ़ सकते हैं या कुछ बुनियादी नेविगेशन सुविधाएँ प्रदान कर सकते हैं, जैसे [Edge ब्राउज़र के ये सुलभता-केंद्रित उपकरण](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features)। ये भी महत्वपूर्ण सुलभता उपकरण हैं, लेकिन स्क्रीन रीडर परीक्षण उपकरणों के रूप में इन्हें भ्रमित नहीं किया जाना चाहिए। +> 🎯 **परीक्षण लक्ष्य**: लाइटहाउस सुलभता स्कोर 95+ को अपने बेसलाइन के रूप में लक्ष्य बनाएं। याद रखें, स्वचालित उपकरण केवल लगभग 30-40% सुलभता मुद्दों को पकड़ पाते हैं—मैनुअल परीक्षण अभी भी आवश्यक है! -✅ स्क्रीन रीडर और ब्राउज़र टेक्स्ट रीडर आज़माएं। Windows पर [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) डिफ़ॉल्ट रूप से शामिल है, और [JAWS](https://webaim.org/articles/jaws/) और [NVDA](https://www.nvaccess.org/about-nvda/) को भी इंस्टॉल किया जा सकता है। macOS और iOS पर, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) डिफ़ॉल्ट रूप से इंस्टॉल होता है। +### 🧠 **परीक्षण कौशल जांच: मुद्दे खोजने के लिए तैयार?** -### ज़ूम +**आइए देखें कि आप सुलभता परीक्षण को लेकर कैसा महसूस करते हैं:** +- इस समय कौन सा परीक्षण तरीका आपको सबसे अधिक अपनाने योग्य लगता है? +- क्या आप कल्पना कर सकते हैं कि एक पूरा दिन सिर्फ कीबोर्ड नेविगेशन का उपयोग करें? +- ऑनलाइन आपने व्यक्तिगत रूप से कौन सी सुलभता बाधा अनुभव की है? -दृष्टि बाधित लोगों द्वारा उपयोग किए जाने वाले एक अन्य उपकरण ज़ूमिंग है। ज़ूमिंग का सबसे बुनियादी प्रकार स्थिर ज़ूम है, जिसे `Control + प्लस साइन (+)` या स्क्रीन रिज़ॉल्यूशन को कम करके नियंत्रित किया जाता है। इस प्रकार का ज़ूम पूरे पेज को पुन: आकार देता है, इसलिए [उत्तरदायी डिज़ाइन](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) का उपयोग करना बढ़े हुए ज़ूम स्तरों पर अच्छा उपयोगकर्ता अनुभव प्रदान करने के लिए महत्वपूर्ण है। +```mermaid +pie title "विभिन्न तरीकों से पकड़ी गई पहुँच संबंधी समस्याएँ" + "स्वचालित उपकरण" : 35 + "मैनुअल परीक्षण" : 40 + "उपयोगकर्ता प्रतिक्रिया" : 25 +``` +> **आत्मविश्वास बढ़ाने वाला**: पेशेवर सुलभता परीक्षक इस सटीक संयोजन का उपयोग करते हैं। आप उद्योग-मानक अभ्यास सीख रहे हैं! -ज़ूमिंग का एक अन्य प्रकार विशेष सॉफ़्टवेयर पर निर्भर करता है जो स्क्रीन के एक क्षेत्र को बड़ा करता है और पैन करता है, जैसे कि वास्तविक आवर्धक कांच का उपयोग करना। Windows पर, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) अंतर्निहित है, और [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) एक तृतीय-पक्ष आवर्धन सॉफ़्टवेयर है जिसमें अधिक सुविधाएँ और बड़ा उपयोगकर्ता आधार है। macOS और iOS दोनों में [Zoom](https://www.apple.com/accessibility/mac/vision/) नामक अंतर्निहित आवर्धन सॉफ़्टवेयर है। +## प्रारंभ से सुलभता का निर्माण -### कंट्रास्ट चेकर +सुलभता की सफलता की कुंजी इसे पहले दिन से ही अपनी नींव में बनाना है। मुझे पता है कि यह सोचने में लुभावना होता है "मैं बाद में सुलभता जोड़ लूंगा," लेकिन यह ऐसा ही है जैसे घर बनने के बाद रैंप जोड़ने की कोशिश करना। संभव? हाँ। आसान? वास्तव में नहीं। -वेबसाइटों पर रंगों का चयन सावधानीपूर्वक किया जाना चाहिए ताकि रंग-अंधता वाले उपयोगकर्ताओं या कम-कंट्रास्ट रंगों को देखने में कठिनाई वाले लोगों की ज़रूरतों को पूरा किया जा सके। +सुलभता को ऐसे सोचें जैसे आप एक घर की योजना बना रहे हों—अपने प्रारंभिक वास्तु योजना में व्हीलचेयर पहुँच शामिल करना बाद में सब कुछ फिर से बदलने से कहीं आसान होता है। -✅ किसी ब्राउज़र एक्सटेंशन जैसे [WCAG का रंग चेकर](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon) का उपयोग करके किसी वेबसाइट का रंग उपयोग परीक्षण करें। आप क्या सीखते हैं? +### POUR सिद्धांत: आपकी सुलभता की नींव -### लाइटहाउस +वेब कंटेंट सुलभता दिशानिर्देश (WCAG) चार मौलिक सिद्धांतों के इर्द-गिर्द बनाए गए हैं जिन्हें POUR कहा जाता है। चिंता मत करें—यह कोई रूढ़िवादी अकादमिक अवधारणाएँ नहीं हैं! ये वास्तव में व्यवहारिक दिशानिर्देश हैं जो ऐसी सामग्री बनाने में मदद करते हैं जो सभी के लिए काम करती है। -आपके ब्राउज़र के डेवलपर टूल क्षेत्र में, आपको लाइटहाउस टूल मिलेगा। यह टूल किसी वेबसाइट की सुलभता (साथ ही अन्य विश्लेषण) का पहला दृश्य प्राप्त करने के लिए महत्वपूर्ण है। जबकि केवल लाइटहाउस पर निर्भर रहना महत्वपूर्ण नहीं है, 100% स्कोर एक उपयोगी आधार रेखा है। +एक बार जब आप POUR को समझ जाते हैं, तो सुलभता निर्णय लेना बहुत अधिक सहज हो जाता है। यह ऐसा है जैसे आपके पास एक मानसिक चेकलिस्ट हो जो आपके डिज़ाइन विकल्पों का मार्गदर्शन करती है। आइए इसे विस्तार से देखें: -✅ अपने ब्राउज़र के डेवलपर टूल पैनल में लाइटहाउस खोजें और किसी भी साइट पर विश्लेषण चलाएं। आप क्या खोजते हैं? +```mermaid +flowchart LR + A[🔍 समझ योग्य
क्या उपयोगकर्ता इसे महसूस कर सकते हैं?] --> B[🎮 परिचालित
क्या उपयोगकर्ता इसका उपयोग कर सकते हैं?] + B --> C[📖 समझने में आसान
क्या उपयोगकर्ता इसे समझ सकते हैं?] + C --> D[💪 मजबूत
क्या यह हर जगह काम करता है?] + + A1[Alt टेक्स्ट
कैप्शंस
कॉन्ट्रास्ट] --> A + B1[कीबोर्ड पहुंच
कोई झटका नहीं
समय सीमाएं] --> B + C1[साफ भाषा
पूर्वानुमानित
त्रुटि सहायता] --> C + D1[मान्य कोड
संगत
भविष्य प्रमाण] --> D + + style A fill:#e1f5fe + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 +``` +**🔍 Perceivable**: जानकारी ऐसी होनी चाहिए जिसे उपयोगकर्ता अपनी उपलब्ध इंद्रियों के माध्यम से महसूस कर सकें + +- गैर-पाठ सामग्री (छवियां, वीडियो, ऑडियो) के लिए पाठ विकल्प प्रदान करें +- सभी टेक्स्ट और UI घटकों के लिए पर्याप्त रंग विरोध सुनिश्चित करें +- मल्टीमीडिया सामग्री के लिए कैप्शन और ट्रांसक्रिप्ट प्रदान करें +- ऐसी सामग्री डिज़ाइन करें जो 200% तक आकार बढ़ाने पर भी कार्यात्मक बनी रहे +- जानकारी व्यक्त करने के लिए कई संवेदी विशेषताओं का उपयोग करें (सिर्फ रंग नहीं) + +**🎮 Operable**: सभी इंटरफेस घटक उपलब्ध इनपुट विधियों से ऑपरेबल होने चाहिए + +- सभी कार्यक्षमता को कीबोर्ड नेविगेशन के माध्यम से सुलभ बनाएं +- उपयोगकर्ताओं को सामग्री पढ़ने और बातचीत करने के लिए पर्याप्त समय दें +- ऐसी सामग्री से बचें जो दौरे या वेस्टिबुलर विकार का कारण बने +- स्पष्ट संरचना और लैंडमार्क के साथ नेविगेशन को दक्ष बनाएं +- इंटरैक्टिव तत्वों के लिए पर्याप्त लक्ष्य आकार सुनिश्चित करें (कम से कम 44px) + +**📖 Understandable**: जानकारी और UI संचालन स्पष्ट और समझने योग्य होना चाहिए + +- अपने उपयोगकर्ता के अनुसार स्पष्ट, सरल भाषा का उपयोग करें +- सुनिश्चित करें कि सामग्री पूर्वानुमेय और सुसंगत तरीके से प्रकट और संचालन हो +- उपयोगकर्ता इनपुट के लिए स्पष्ट निर्देश और त्रुटि संदेश प्रदान करें +- उपयोगकर्ताओं को फॉर्म में त्रुटियाँ समझने और सुधारने में मदद करें +- तार्किक पठन क्रम और सूचना पदानुक्रम के साथ सामग्री व्यवस्थित करें + +**💪 Robust**: सामग्री विभिन्न तकनीकों और सहायक उपकरणों के साथ विश्वसनीय रूप से काम करनी चाहिए + +- **अपनी नींव के रूप में मान्य, सेमांटिक HTML का उपयोग करें** +- **वर्तमान और आने वाली सहायक प्रौद्योगिकियों के साथ संगतता सुनिश्चित करें** +- **मार्कअप के लिए वेब मानकों और सर्वोत्तम प्रथाओं का पालन करें** +- **विभिन्न ब्राउज़रों, उपकरणों और सहायक उपकरणों में परीक्षण करें** +- **सामग्री को इस तरह से संरचित करें कि जब उन्नत सुविधाएँ समर्थित न हों तो वह सुचारू रूप से कम गुणवत्ता वाली न दिखे** + +### 🎯 **POUR सिद्धांत जांच: इसे यादगार बनाना** + +**मूल बातें पर त्वरित चिंतन:** +- क्या आप किसी ऐसी वेबसाइट सुविधा के बारे में सोच सकते हैं जो प्रत्येक POUR सिद्धांत में विफल हो? +- आपको कौन सा सिद्धांत एक डेवलपर के रूप में सबसे स्वाभाविक लगता है? +- ये सिद्धांत केवल विकलांग उपयोगकर्ताओं के लिए ही नहीं, बल्कि सभी के लिए डिजाइन में कैसे सुधार कर सकते हैं? + +```mermaid +quadrantChart + title POUR सिद्धांत प्रभाव मैट्रिक्स + x-axis कम प्रयास --> अधिक प्रयास + y-axis कम प्रभाव --> उच्च प्रभाव + quadrant-1 त्वरित जीत + quadrant-2 प्रमुख परियोजनाएं + quadrant-3 बाद में विचार करें + quadrant-4 रणनीतिक फोकस + + Alt Text: [0.2, 0.9] + Color Contrast: [0.3, 0.8] + Semantic HTML: [0.4, 0.9] + Keyboard Nav: [0.6, 0.8] + ARIA Complex: [0.8, 0.7] + Screen Reader Testing: [0.7, 0.6] +``` +> **याद रखें**: उच्च प्रभाव वाले, कम प्रयास वाले सुधारों से शुरू करें। सेमांटिक HTML और alt टेक्स्ट आपको सबसे कम प्रयास में सबसे बड़ा पहुँच बढ़ाने वाला लाभ देते हैं! -## सुलभता के लिए डिज़ाइन करना +## सुलभ दृश्य डिज़ाइन बनाना -सुलभता एक अपेक्षाकृत बड़ा विषय है। आपकी मदद करने के लिए, कई संसाधन उपलब्ध हैं। +अच्छा दृश्य डिज़ाइन और सुलभता हाथ में हाथ देते हैं। जब आप सुलभता को ध्यान में रखकर डिजाइन करते हैं, तो अक्सर आपको पता चलता है कि ये सीमाएँ साफ-सुथरे, अधिक सुरुचिपूर्ण समाधान की ओर ले जाती हैं जो सभी उपयोगकर्ताओं के लिए फायदेमंद होती हैं। -- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers) +आइए देखें कि कैसे दृश्य रूप से आकर्षक डिज़ाइन बनाएँ जो हर किसी के लिए काम करें, चाहे उनकी दृश्य क्षमता कैसी भी हो या वे आपकी सामग्री को किस परिस्थिति में देख रहे हों। -हालांकि हम सुलभ साइट बनाने के हर पहलू को कवर नहीं कर पाएंगे, नीचे कुछ मुख्य सिद्धांत दिए गए हैं जिन्हें आप लागू करना चाहेंगे। शुरुआत से ही सुलभ पेज डिज़ाइन करना **हमेशा** मौजूदा पेज को सुलभ बनाने की तुलना में आसान होता है। +### रंग और दृश्य सुलभता रणनीतियाँ -## अच्छे प्रदर्शन सिद्धांत +रंग संचार के लिए शक्तिशाली है, लेकिन यह कभी भी महत्वपूर्ण जानकारी पहुंचाने का एकमात्र तरीका नहीं होना चाहिए। रंग के परे डिजाइन करना अधिक मजबूत, समावेशी अनुभव बनाता है जो ज्यादा परिस्थितियों में काम करता है। -### रंग सुरक्षित पैलेट +**रंग दृष्टि भिन्नताओं के लिए डिजाइन करें:** -लोग दुनिया को अलग-अलग तरीकों से देखते हैं, और इसमें रंग भी शामिल हैं। अपनी साइट के लिए रंग योजना का चयन करते समय, आपको यह सुनिश्चित करना चाहिए कि यह सभी के लिए सुलभ हो। [रंग पैलेट बनाने के लिए एक शानदार टूल Color Safe](http://colorsafe.co/) है। +लगभग 8% पुरुष और 0.5% महिलाएं किसी न किसी प्रकार की रंग दृष्टि भिन्नता (अक्सर "रंग अंधता" कहा जाता है) से प्रभावित होती हैं। सबसे सामान्य प्रकार हैं: +- **ड्युटेरानोपिया**: लाल और हरे के बीच अंतर करना मुश्किल +- **प्रोटोनोपिया**: लाल रंग अधिक फीका दिखाई देता है +- **ट्रिटानोपिया**: नीला और पीले के साथ कठिनाई (अल्पविरल) -✅ ऐसी वेबसाइट की पहचान करें जो रंगों के उपयोग में बहुत समस्याग्रस्त हो। क्यों? +**समावेशी रंग रणनीतियाँ:** -### सही HTML का उपयोग करें +```css +/* ❌ Bad: Using only color to indicate status */ +.error { color: red; } +.success { color: green; } -CSS और JavaScript के साथ, किसी भी तत्व को किसी भी प्रकार के नियंत्रण जैसा दिखाना संभव है। `` का उपयोग ` + + +
+

Latest News

+ +
+ + + +
+ Password must contain at least 8 characters, including uppercase, lowercase, and numbers. +
+
+ +
+``` + +**डायनामिक सामग्री के लिए लाइव क्षेत्र:** + +```html + +
+ +
+ + +
+ +
+ + + +
+ +
+``` + +**इंटरैक्टिव विजेट उदाहरण (एकॉर्डियन):** + +```html +
+

+ +

+ +
+``` + +```javascript +// अकॉर्डियन स्थिति प्रबंधित करने के लिए जावास्क्रिप्ट +function toggleAccordion(trigger) { + const panel = document.getElementById(trigger.getAttribute('aria-controls')); + const isExpanded = trigger.getAttribute('aria-expanded') === 'true'; + + // स्थिति टॉगल करें + trigger.setAttribute('aria-expanded', !isExpanded); + panel.hidden = isExpanded; + + // स्क्रीन रीडर्स को परिवर्तन की घोषणा करें + const status = document.getElementById('status-updates'); + status.textContent = isExpanded ? 'Section collapsed' : 'Section expanded'; +} +``` + +### ARIA कार्यान्वयन के सर्वोत्तम अभ्यास + +ARIA शक्तिशाली है लेकिन सावधानीपूर्वक लागू करने की जरूरत होती है। इन दिशानिर्देशों का पालन करने से आपकी ARIA एक्सेसिबिलिटी को बढ़ावा देती है, बाधा नहीं डालती: + +**🛡️ मूल सिद्धांत:** + +```mermaid +flowchart TD + A[🚀 सेमांटिक HTML से शुरुआत करें] --> B{क्या HTML आवश्यक सेमांटिक्स प्रदान करता है?} + B -->|हाँ| C[✅ केवल HTML का उपयोग करें] + B -->|नहीं| D[ARIA संवर्धन पर विचार करें] + D --> E{क्या आप इसे आसान तरीकों से प्राप्त कर सकते हैं?} + E -->|हाँ| F[🔄 दृष्टिकोण सरल बनाएं] + E -->|नहीं| G[📝 सावधानीपूर्वक ARIA लागू करें] + G --> H[🧪 वास्तविक AT के साथ परीक्षण करें] + H --> I{क्या अपेक्षित रूप से कार्य करता है?} + I -->|नहीं| J[🔧 डिबग और सुधार करें] + I -->|हाँ| K[✅ सफलता!] + J --> H + F --> C + + style A fill:#e3f2fd + style C fill:#e8f5e8 + style K fill:#e8f5e8 + style G fill:#fff3e0 + style H fill:#f3e5f5 +``` +1. **पहले सेमांटिक HTML को प्राथमिकता दें**: हमेशा ` +``` + +**जटिल छवियाँ** - चार्ट, आरेख, इन्फोग्राफिक्स: +```html +Quarterly sales data +
+

Detailed description: Sales data shows a steady increase across all quarters...

+
+``` + +### वीडियो और ऑडियो एक्सेसिबिलिटी + +**वीडियो आवश्यकताएँ:** +- **कैप्शंस**: बोले गए सामग्री और ध्वनि प्रभाव का पाठ्य संस्करण +- **ऑडियो विवरण**: दृष्टिहीन उपयोगकर्ताओं के लिए दृश्य तत्वों का वर्णन +- **ट्रांस्क्रिप्ट्स**: सभी ऑडियो और दृश्य सामग्री का पूरा पाठ्य संस्करण + +```html + +``` + +**ऑडियो आवश्यकताएँ:** +- **ट्रांस्क्रिप्ट्स**: बोले गए सभी कंटेंट का टेक्स्ट संस्करण +- **दृश्य संकेत**: केवल ऑडियो सामग्री के लिए दृश्य सूचनाएँ प्रदान करें + +### आधुनिक छवि तकनीकें + +**सजावटी छवियों के लिए CSS का उपयोग:** +```css +.hero-section { + background-image: url('decorative-hero.jpg'); + /* Decorative images in CSS don't need alt text */ +} +``` + +**पहुंच के साथ उत्तरदायी छवियाँ:** +```html + + + + Website traffic increased 40% after accessibility improvements + +``` + +✅ **छवि एक्सेसिबिलिटी का परीक्षण करें**: एक स्क्रीन रीडर का उपयोग करके उस पेज को नेविगेट करें जिसमें छवियाँ हों। क्या आपको सामग्री को समझने के लिए पर्याप्त जानकारी मिल रही है? + +## कीबोर्ड नेविगेशन और फोकस प्रबंधन + +कई उपयोगकर्ता पूरी वेब नेविगेशन कीबोर्ड से करते हैं। इसमें मोटर विकलांगता वाले लोग, पावर यूजर्स जो माउस से तेज़ी से कीबोर्ड इस्तेमाल करते हैं, और कोई भी जिनका माउस काम करना बंद कर देता है शामिल हैं। यह सुनिश्चित करना कि आपकी साइट कीबोर्ड इनपुट के साथ अच्छी तरह काम करे, आवश्यक है और अक्सर आपकी साइट को सभी उपयोगकर्ताओं के लिए अधिक प्रभावी बनाता है। + +```mermaid +flowchart LR + A[⌨️ कीबोर्ड नेविगेशन] --> B[टैब क्रम] + A --> C[फोकस संकेतक] + A --> D[स्किप लिंक] + A --> E[कीबोर्ड शॉर्टकट] + + B --> B1[तार्किक क्रम
सभी इंटरैक्टिव तत्व
कोई टैब जाल नहीं] + C --> C1[दृश्य आउटलाइन
उच्च कंट्रास्ट
स्पष्ट सीमाएं] + D --> D1[मुख्य पर जाएं
नेविगेशन पर जाएं
दोहराव को बायपास करें] + E --> E1[बंद करने के लिए एस्केप
सक्रिय करने के लिए एंटर
समूहों में तीर] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 +``` +### आवश्यक कीबोर्ड नेविगेशन पैटर्न + +**मापदंड कीबोर्ड इंटरैक्शन:** +- **Tab**: इंटरैक्टिव तत्वों के बीच फोकस आगे बढ़ाएँ +- **Shift + Tab**: फोकस पीछे ले जाएँ +- **Enter**: बटन और लिंक सक्रिय करें +- **Space**: बटन सक्रिय करें, चेकबॉक्स जांचें +- **एरो कीज़**: कंपोनेंट समूहों (रेडियो बटन, मेनू) के भीतर नेविगेट करें +- **Escape**: मोडल, ड्रॉपडाउन बंद करें या ऑपरेशन रद्द करें + +### फोकस प्रबंधन के सर्वोत्तम अभ्यास + +**दृश्यमान फोकस संकेत:** +```css +/* Ensure focus is always visible */ +button:focus-visible { + outline: 2px solid #4A90A4; + outline-offset: 2px; +} + +/* Custom focus styles for different components */ +.card:focus-within { + box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5); +} +``` + +**कुशल नेविगेशन के लिए स्किप लिंक:** +```html + + + + +
+ +
+``` + +**सही टैब क्रम:** +```html + +
+ + + + + + + +
+``` + +### मोडल में फोकस ट्रैपिंग + +मोडल संवाद खोलने पर, फोकस मोडल के भीतर फंसा होना चाहिए: + +```javascript +// आधुनिक फोकस ट्रैप कार्यान्वयन +function trapFocus(element) { + const focusableElements = element.querySelectorAll( + 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' + ); + + const firstElement = focusableElements[0]; + const lastElement = focusableElements[focusableElements.length - 1]; + + element.addEventListener('keydown', (e) => { + if (e.key === 'Tab') { + if (e.shiftKey && document.activeElement === firstElement) { + e.preventDefault(); + lastElement.focus(); + } else if (!e.shiftKey && document.activeElement === lastElement) { + e.preventDefault(); + firstElement.focus(); + } + } + + if (e.key === 'Escape') { + closeModal(); + } + }); + + // जब मोडल खुलता है तो पहले तत्व पर फोकस करें + firstElement.focus(); +} +``` + +✅ **कीबोर्ड नेविगेशन का परीक्षण करें**: केवल Tab कुंजी का उपयोग करके अपनी वेबसाइट नेविगेट करें। क्या आप सभी इंटरैक्टिव तत्वों तक पहुंच पा रहे हैं? क्या फोकस क्रम तार्किक है? क्या फोकस संकेत स्पष्ट रूप से दिखाई देते हैं? + +## फॉर्म एक्सेसिबिलिटी + +फॉर्म उपयोगकर्ता इंटरैक्शन के लिए महत्वपूर्ण हैं और एक्सेसिबिलिटी के लिए विशेष ध्यान आवश्यक है। + +### लेबल और फॉर्म कंट्रोल का संबंध + +**प्रत्येक फॉर्म कंट्रोल को एक लेबल चाहिए:** +```html + + + + + + + + + +``` + +### त्रुटि प्रबंधन और मान्यता + +**सुलभ त्रुटि संदेश:** +```html + + + +``` + +**फॉर्म मान्यता के सर्वोत्तम अभ्यास:** +- अमान्य फ़ील्ड को दर्शाने के लिए `aria-invalid` का उपयोग करें +- स्पष्ट, विशिष्ट त्रुटि संदेश प्रदान करें +- महत्वपूर्ण त्रुटि घोषणाओं के लिए `role="alert"` का उपयोग करें +- त्रुटियाँ तुरंत और फॉर्म जमा करने पर दोनों दिखाएँ + +### फील्डसेट और समूहबद्ध करना + +**संबंधित फॉर्म नियंत्रणों को समूहित करें:** +```html +
+ Shipping Address + + + + + +
+ +
+ Preferred Contact Method + + + + + +
+``` + +## आपकी एक्सेसिबिलिटी यात्रा: मुख्य बातें + +बधाई हो! आपने वाकई समावेशी वेब अनुभव बनाने का आधारभूत ज्ञान प्राप्त कर लिया है। यह बहुत ही रोमांचक है! वेब एक्सेसिबिलिटी केवल पालन नियमों की जाँच के बारे में नहीं है—यह डिजिटल सामग्री के साथ लोगों की विविध बातचीत की समझ के बारे में है और इस अद्भुत जटिलता के लिए डिज़ाइन करने के बारे में है। + +अब आप उस बढ़ती हुई डेवलपर्स समुदाय का हिस्सा हैं जो समझते हैं कि महान डिज़ाइन सभी के लिए काम करता है। क्लब में आपका स्वागत है! + +**🎯 आपकी एक्सेसिबिलिटी टूलकिट अब शामिल है:** + +| मूल सिद्धांत | कार्यान्वयन | प्रभाव | +|----------------|----------------|---------| +| **सेमांटिक HTML आधार** | उचित HTML तत्वों का उनके उद्देश्य के लिए उपयोग | स्क्रीन रीडर सहजता से नेविगेट कर सकते हैं, कीबोर्ड स्वतः कार्य करते हैं | +| **समावेशी दृश्य डिज़ाइन** | पर्याप्त कंट्रास्ट, सार्थक रंग उपयोग, दृश्यमान फोकस संकेत | किसी भी प्रकाश व्यवस्था में सभी के लिए स्पष्ट | +| **वर्णनात्मक सामग्री** | सार्थक लिंक टेक्स्ट, अल्ट टेक्स्ट, हेडिंग्स | उपयोगकर्ता बिना दृश्य संदर्भ के सामग्री समझते हैं | +| **कीबोर्ड एक्सेसिबिलिटी** | टैब क्रम, कीबोर्ड शॉर्टकट, फोकस प्रबंधन | मोटर एक्सेसिबिलिटी और पावर उपयोगकर्ता प्रभावशीलता | +| **ARIA संवर्धन** | सेमांटिक रिक्त स्थान भरने के लिए रणनीतिक उपयोग | जटिल ऐप्लिकेशन सहायक तकनीकों के साथ काम करते हैं | +| **समग्र परीक्षण** | स्वचालित उपकरण + मैनुअल सत्यापन + वास्तविक उपयोगकर्ता परीक्षण | उपयोगकर्ताओं पर प्रभाव डालने से पहले मुद्दों को पकड़ना | + +**🚀 आपके अगले कदम:** + +1. **अपने वर्कफ़्लो में एक्सेसिबिलिटी शामिल करें**: परीक्षण को आपकी विकास प्रक्रिया का प्राकृतिक हिस्सा बनाएं +2. **वास्तविक उपयोगकर्ताओं से सीखें**: सहायक तकनीकों का उपयोग करने वाले लोगों से प्रतिक्रिया मांगें +3. **अप-टू-डेट रहें**: नई तकनीकों और मानकों के साथ एक्सेसिबिलिटी तकनीक विकसित होती रहती है +4. **समावेशन के लिए वकालत करें**: अपना ज्ञान साझा करें और एक्सेसिबिलिटी को टीम की प्राथमिकता बनाएं + +> 💡 **याद रखें**: एक्सेसिबिलिटी प्रतिबंध अक्सर अभिनव, सुरुचिपूर्ण समाधानों को जन्म देते हैं जो सभी के लाभ में होते हैं। कर्ब कट्स, कैप्शंस और आवाज नियंत्रण सभी एक्सेसिबिलिटी विशेषताओं के रूप में शुरू हुए और बाद में मुख्यधारा में शामिल हुए। + +**व्यावसायिक मामला स्पष्ट है**: सुलभ वेबसाइट्स अधिक उपयोगकर्ताओं तक पहुंचती हैं, खोज इंजनों में बेहतर रैंक करती हैं, रखरखाव लागत कम होती है, और कानूनी जोखिमों से बचती हैं। लेकिन सच कहें तो? एक्सेसिबिलिटी की परवाह करने का असली कारण इससे कहीं गहरा है। सुलभ वेबसाइट्स वेब के सर्वोत्तम मूल्यों का प्रतिनिधित्व करती हैं— openness, समावेशन, और विचार कि हर किसी को सूचना का समान अधिकार मिलना चाहिए। + +अब आप भविष्य की समावेशी वेब बनाने के लिए सक्षम हैं। हर सुलभ साइट जो आप बनाते हैं, इंटरनेट को सभी के लिए अधिक स्वागतशील स्थान बनाता है। यह सोचने पर वास्तव में अद्भुत है! + +## अतिरिक्त संसाधन + +अपनी एक्सेसिबिलिटी सीखने की यात्रा को इन आवश्यक संसाधनों के साथ जारी रखें: + +**📚 आधिकारिक मानक और दिशा-निर्देश:** +- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) - आधिकारिक एक्सेसिबिलिटी मानक के त्वरित संदर्भ के साथ +- [ARIA Authoring Practices Guide](https://w3c.github.io/aria-practices/) - इंटरैक्टिव विजेट्स के लिए व्यापक पैटर्न +- [WebAIM Guidelines](https://webaim.org/) - व्यावहारिक, शुरुआती के अनुकूल एक्सेसिबिलिटी मार्गदर्शन + +**🛠️ टूल्स और परीक्षण संसाधन:** +- [axe DevTools](https://www.deque.com/axe/devtools/) - उद्योग मानक एक्सेसिबिलिटी परीक्षण +- [A11y Project Checklist](https://www.a11yproject.com/checklist/) - चरण-दर-चरण एक्सेसिबिलिटी सत्यापन +- [Accessibility Insights](https://accessibilityinsights.io/) - Microsoft का व्यापक परीक्षण सूट +- [Color Oracle](https://colororacle.org/) - डिजाइन परीक्षण के लिए रंग अंधता सिम्युलेटर + +**🎓 सीखना और समुदाय:** +- [WebAIM Screen Reader Survey](https://webaim.org/projects/screenreadersurvey9/) - वास्तविक उपयोगकर्ता की पसंद और व्यवहार +- [Inclusive Components](https://inclusive-components.design/) - आधुनिक सुलभ कंपोनेंट पैटर्न +- [A11y Coffee](https://a11y.coffee/) - त्वरित एक्सेसिबिलिटी सुझाव और अंतर्दृष्टि +- [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) - W3C के व्यापक एक्सेसिबिलिटी संसाधन + +**🎥 व्यावहारिक सीखना:** +- [Accessibility Developer Guide](https://www.accessibility-developer-guide.com/) - व्यावहारिक कार्यान्वयन मार्गदर्शन +- [Deque University](https://dequeuniversity.com/) - पेशेवर एक्सेसिबिलिटी प्रशिक्षण कोर्स + +## GitHub Copilot एजेंट चैलेंज 🚀 + +एजेंट मोड का उपयोग करके निम्नलिखित चुनौती पूरी करें: + +**विवरण:** एक सुलभ मोडल डायलॉग कंपोनेंट बनाएं जो उचित फोकस प्रबंधन, ARIA गुण, और कीबोर्ड नेविगेशन पैटर्न प्रदर्शित करता हो। + +**प्रॉम्प्ट:** HTML, CSS, और JavaScript के साथ एक पूर्ण मोडल डायलॉग कंपोनेंट बनाएँ जिसमें शामिल हों: उचित फोकस ट्रैपिंग, ESC कुंजी से बंद करना, बाहर क्लिक पर बंद करना, स्क्रीन रीडर के लिए ARIA गुण, और दृष्टिगोचर फोकस संकेत। मोडल में उचित लेबल और त्रुटि प्रबंधन के साथ एक फॉर्म होना चाहिए। सुनिश्चित करें कि कंपोनेंट WCAG 2.1 AA मानकों को पूरा करता है। ## 🚀 चुनौती -इस HTML को लें और इसे जितना संभव हो सके सुलभ बनाने के लिए फिर से लिखें, जो आपने सीखा है उसे ध्यान में रखते हुए। +इस HTML को लें और इसे आपकी सीखी गई रणनीतियों के अनुसार यथासंभव सुलभ बनाने के लिए पुनर्लेखन करें। ```html - + - - Example - + + + Turtle Ipsum - The World's Premier Turtle Fan Club -
-

Turtle Ipsum

+
+

Turtle Ipsum

The World's Premier Turtle Fan Club

-
-
-

Resources

-
-

"I like turtles"

-

Basic Turtle Info

-

Chocolate Turtles

-
-
-
-
-

Welcome to Turtle Ipsum. - Click here to learn more. + + +

+ +
+
+

Welcome to Turtle Ipsum

+

+ Learn more about our turtle community and discover fascinating facts about these amazing creatures.

- Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum + Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
-
-
-
- Sign up for turtle news -
-

- Internal Pages -

-
-

Index

-

Semantic Example

-
-
-

© 2016 Instrument

-
+ + + +
+ + + + +

© 2024 Instrument. All rights reserved.

+
``` +**मुख्य सुधार जिनकी गई:** +- उचित सेमांटिक HTML संरचना जोड़ी गई +- हेडिंग पदानुक्रम ठीक किया (सिर्फ एक h1, तार्किक प्रगति) +- "click here" के स्थान पर सार्थक लिंक टेक्स्ट जोड़ा +- नेविगेशन के लिए उचित ARIA लेबल शामिल किए +- lang एट्रिब्यूट और उचित मेटा टैग्स जोड़े गए +- इंटरैक्टिव तत्वों के लिए बटन एलिमेंट का उपयोग किया गया +- उचित लैंडमार्क्स के साथ फुटर सामग्री संरचित की गई + ## पोस्ट-लेक्चर क्विज़ -[पोस्ट-लेक्चर क्विज़](https://ff-quizzes.netlify.app/web/en/) +[Post-lecture quiz](https://ff-quizzes.netlify.app/web/en/) ## समीक्षा और स्व-अध्ययन -कई सरकारों के पास पहुंच योग्यता आवश्यकताओं से संबंधित कानून होते हैं। अपने देश के पहुंच योग्यता कानूनों के बारे में जानकारी प्राप्त करें। इसमें क्या शामिल है और क्या नहीं? एक उदाहरण है [यह सरकारी वेबसाइट](https://accessibility.blog.gov.uk/)। + +कई सरकारों के पास एक्सेसिबिलिटी आवश्यकताओं को लेकर कानून होते हैं। अपने गृह देश के एक्सेसिबिलिटी कानूनों के बारे में पढ़ें। क्या शामिल है, क्या नहीं? एक उदाहरण है [यह सरकारी वेब साइट](https://accessibility.blog.gov.uk/)। ## असाइनमेंट + +[असुलभ वेबसाइट का विश्लेषण करें](assignment.md) -[एक गैर-पहुंच योग्य वेबसाइट का विश्लेषण करें](assignment.md) +क्रेडिट: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) द्वारा Instrument -क्रेडिट्स: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) द्वारा Instrument +--- + +## 🚀 आपकी एक्सेसिबिलिटी महारत समयरेखा + +### ⚡ **अगले 5 मिनट में आप क्या कर सकते हैं** +- [ ] अपने ब्राउज़र में axe DevTools एक्सटेंशन इंस्टॉल करें +- [ ] अपनी पसंदीदा वेबसाइट पर Lighthouse एक्सेसिबिलिटी ऑडिट चलाएँ +- [ ] किसी भी वेबसाइट को केवल Tab कुंजी से नेविगेट करने का प्रयास करें +- [ ] अपने ब्राउज़र के बिल्ट-इन स्क्रीन रीडर (Narrator/VoiceOver) का परीक्षण करें + +### 🎯 **इस घंटे में आप क्या हासिल कर सकते हैं** +- [ ] पोस्ट-लेसन क्विज़ पूरा करें और एक्सेसिबिलिटी अंतर्दृष्टि पर विचार करें +- [ ] 10 विभिन्न छवियों के लिए सार्थक अल्ट टेक्स्ट लिखने का अभ्यास करें +- [ ] HeadingsMap एक्सटेंशन का उपयोग करके वेबसाइट की हेडिंग संरचना का ऑडिट करें +- [ ] चुनौती HTML में पाए गए एक्सेसिबिलिटी मुद्दों को ठीक करें +- [ ] WebAIM के टूल के साथ अपने वर्तमान प्रोजेक्ट पर रंग कंट्रास्ट का परीक्षण करें + +### 📅 **आपकी एक सप्ताह की एक्सेसिबिलिटी यात्रा** +- [ ] असाइनमेंट पूरा करें जिसमें असुलभ वेबसाइट का विश्लेषण करें +- [ ] एक्सेसिबिलिटी परीक्षण टूल्स के साथ अपना विकास वातावरण सेट करें +- [ ] 5 अलग-अलग जटिल वेबसाइटों पर कीबोर्ड नेविगेशन का अभ्यास करें +- [ ] उचित लेबल, त्रुटि प्रबंधन, और ARIA के साथ एक सरल फॉर्म बनाएं +- [ ] एक एक्सेसिबिलिटी समुदाय में शामिल हों (A11y Slack, WebAIM फोरम) +- [ ] विकलांग उपयोगकर्ताओं को वेबसाइटों को नेविगेट करते हुए देखें (YouTube पर उत्कृष्ट उदाहरण हैं) + +### 🌟 **आपका महीने भर का परिवर्तन** +- [ ] अपने विकास कार्यप्रवाह में एक्सेसिबिलिटी परीक्षण को एकीकृत करें +- [ ] एक्सेसिबिलिटी मुद्दों को ठीक करके किसी ओपन सोर्स प्रोजेक्ट में योगदान दें +- [ ] ऐसे व्यक्ति के साथ उपयोगिता परीक्षण करें जो सहायक तकनीक का उपयोग करता हो +- [ ] अपनी टीम के लिए एक एक्सेसिबल कंपोनेंट लाइब्रेरी बनाएं +- [ ] अपने कार्यस्थल या समुदाय में एक्सेसिबिलिटी का समर्थन करें +- [ ] एक्सेसिबिलिटी अवधारणाओं के नए व्यक्ति को मार्गदर्शन दें + +### 🏆 **अंतिम एक्सेसिबिलिटी चैंपियन चेक-इन** + +**अपने एक्सेसिबिलिटी सफर का जश्न मनाएं:** +- आपने यह जानकर सबसे हैरानी वाली बात क्या सीखी कि लोग वेब का उपयोग कैसे करते हैं? +- कौन सा एक्सेसिबिलिटी सिद्धांत आपके विकास शैली से सबसे अधिक मेल खाता है? +- एक्सेसिबिलिटी के बारे में सीखने से आपकी डिजाइन परिप्रेक्ष्य कैसे बदला है? +- आप सबसे पहले किस वास्तविक प्रोजेक्ट पर एक्सेसिबिलिटी सुधार करना चाहेंगे? + +```mermaid +journey + title आपकी पहुंच योग्यता आत्मविश्वास का विकास + section आज + अभिभूत: 3: You + जिज्ञासु: 4: You + प्रेरित: 5: You + section इस सप्ताह + अभ्यास कर रहे हैं: 4: You + परीक्षण कर रहे हैं: 5: You + समझ रहे हैं: 5: You + section अगला महीना + समर्थन कर रहे हैं: 5: You + नेतृत्व कर रहे हैं: 5: You + डिफ़ॉल्ट रूप से समावेशी: 5: You +``` +> 🌍 **आप अब एक एक्सेसिबिलिटी चैंपियन हैं!** आप समझते हैं कि बेहतरीन वेब अनुभव हर किसी के लिए काम करते हैं, चाहे वे वेब तक कैसे भी पहुंचें। आप जो भी एक्सेसिबल फीचर बनाते हैं, वह इंटरनेट को अधिक समावेशी बनाता है। वेब को आपकी तरह के डेवलपर्स की जरूरत है जो एक्सेसिबिलिटी को प्रतिबंध के रूप में नहीं बल्कि सभी उपयोगकर्ताओं के लिए बेहतर अनुभव बनाने के अवसर के रूप में देखते हैं। आंदोलन में आपका स्वागत है! 🎉 --- -**अस्वीकरण**: -यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं। \ No newline at end of file + +**अस्वीकरण**: +यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियाँ या असंगतियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं। + \ No newline at end of file diff --git a/translations/hi/1-getting-started-lessons/3-accessibility/assignment.md b/translations/hi/1-getting-started-lessons/3-accessibility/assignment.md index b0981b760..730b4bf3a 100644 --- a/translations/hi/1-getting-started-lessons/3-accessibility/assignment.md +++ b/translations/hi/1-getting-started-lessons/3-accessibility/assignment.md @@ -1,28 +1,261 @@ -# एक असुलभ साइट का विश्लेषण करें +# व्यापक वेबसाइट पहुँच परीक्षण ## निर्देश -ऐसी वेबसाइट की पहचान करें जिसे आप मानते हैं कि वह सुलभ नहीं है और उसकी सुलभता को सुधारने के लिए एक कार्य योजना बनाएं। -आपका पहला कार्य होगा इस साइट की पहचान करना, बिना किसी विश्लेषणात्मक उपकरण का उपयोग किए यह बताना कि यह साइट किस प्रकार असुलभ है, और फिर इसे Lighthouse विश्लेषण में जमा करना। -इस विश्लेषण के परिणामों का एक पीडीएफ कैप्चर करें और एक विस्तृत योजना तैयार करें जिसमें कम से कम दस बिंदु हों, जो यह दिखाएं कि साइट को कैसे सुधारा जा सकता है। +इस असाइनमेंट में, आप एक वास्तविक वेबसाइट का पेशेवर स्तर का एक्सेसिबिलिटी ऑडिट करेंगे, जिसमें आपने सीखे हुए सिद्धांतों और तकनीकों को लागू करेंगे। यह व्यावहारिक अनुभव आपकी पहुँच बाधाओं और समाधानों की समझ को गहरा करेगा। -## साइट सुलभता का परीक्षण करने के लिए तालिका +ऐसी वेबसाइट चुनें जिसमें पहुँच संबंधी समस्याएं प्रतीत होती हों—यह पहले से पूर्ण साइट का विश्लेषण करने की तुलना में अधिक सीखने के अवसर देता है। अच्छे उम्मीदवारों में पुरानी वेबसाइटें, जटिल वेब अनुप्रयोग, या मल्टीमीडिया सामग्री वाली साइटें शामिल हैं। -| मानदंड | उत्कृष्ट | पर्याप्त | सुधार की आवश्यकता | -|--------|----------|----------|--------------------| -| | आवश्यकताओं का <10% गायब | आवश्यकताओं का 20% गायब | आवश्यकताओं का 50% गायब | +### चरण 1: रणनीतिक मैनुअल मूल्यांकन ----- -छात्र रिपोर्ट: इसमें यह शामिल होगा कि साइट कितनी असुलभ है, Lighthouse रिपोर्ट का पीडीएफ, सुधार के लिए दस बिंदुओं की सूची, और उन्हें सुधारने के तरीके के विवरण +स्वचालित उपकरणों का उपयोग करने से पहले, एक व्यापक मैनुअल आकलन करें। यह मानव-केंद्रित दृष्टिकोण अक्सर उन मुद्दों को उजागर करता है जिन्हें उपकरण नजरअंदाज कर देते हैं और आपको वास्तविक उपयोगकर्ता अनुभव समझने में मदद करता है। +**🔍 आवश्यक मूल्यांकन मानदंड:** + +**नेविगेशन और संरचना:** +- क्या आप केवल कीबोर्ड (Tab, Shift+Tab, Enter, Space, Arrow keys) का उपयोग करके पूरे साइट पर नेविगेट कर सकते हैं? +- क्या सभी इंटरैक्टिव तत्वों पर फोकस संकेत स्पष्ट रूप से दिखाई देते हैं? +- क्या शीर्षक संरचना (H1-H6) तार्किक सामग्री रूपरेखा बनाती है? +- क्या मुख्य सामग्री पर कूदने के लिए स्किप लिंक मौजूद हैं? + +**दृश्य पहुंच:** +- क्या पूरे साइट में पर्याप्त रंग कॉन्ट्रास्ट है (सामान्य टेक्स्ट के लिए न्यूनतम 4.5:1)? +- क्या साइट केवल रंग पर निर्भर करती है महत्वपूर्ण जानकारी देने के लिए? +- क्या सभी छवियों में उपयुक्त वैकल्पिक पाठ (alt text) है? +- क्या लेआउट 200% ज़ूम किए जाने पर भी कार्यात्मक रहता है? + +**सामग्री और संचार:** +- क्या कोई "यहाँ क्लिक करें" या अस्पष्ट लिंक टेक्स्ट हैं? +- क्या आप बिना दृश्य संकेतों के सामग्री और कार्यक्षमता को समझ सकते हैं? +- क्या फ़ॉर्म फ़ील्ड उचित रूप से लेबल और समूहीकृत हैं? +- क्या त्रुटि संदेश स्पष्ट और सहायक हैं? + +**इंटरैक्टिव तत्व:** +- क्या सभी बटन और फ़ॉर्म नियंत्रण केवल कीबोर्ड से काम करते हैं? +- क्या गतिशील सामग्री में बदलाव स्क्रीन रीडर को सूचित किए जाते हैं? +- क्या मोडल डायलॉग और जटिल विजेट उचित पहुँच पैटर्न का पालन करते हैं? + +📝 **अपनी खोजों का दस्तावेजीकरण करें** विशिष्ट उदाहरणों, स्क्रीनशॉट और पृष्ठ URL के साथ। मुद्दों और अच्छा प्रदर्शन दोनों को नोट करें। + +### चरण 2: व्यापक स्वचालित परीक्षण + +अब उद्योग-मानक पहुंच परीक्षण उपकरणों का उपयोग करके अपने मैनुअल निष्कर्षों की पुष्टि और विस्तार करें। प्रत्येक उपकरण की ताकत अलग होती है, इसलिए कई उपकरणों का उपयोग आपको पूर्ण कवरेज प्रदान करता है। + +**🛠️ आवश्यक परीक्षण उपकरण:** + +1. **Lighthouse पहुंच ऑडिट** (Chrome/Edge DevTools में अंतर्निहित) + - कई पृष्ठों पर ऑडिट चलाएं + - विशिष्ट मापदंड और सिफारिशों पर ध्यान दें + - अपनी पहुँच स्कोर और विशिष्ट उल्लंघनों को नोट करें + +2. **axe DevTools** (ब्राउज़र एक्सटेंशन - उद्योग मानक) + - Lighthouse की तुलना में अधिक विस्तृत समस्या पहचान + - फिक्स के लिए विशिष्ट कोड उदाहरण प्रदान करता है + - WCAG 2.1 मानदंड के विरुद्ध परीक्षण करता है + +3. **WAVE वेब एक्सेसिबिलिटी इवैलुएटर** (ब्राउज़र एक्सटेंशन) + - पहुँच सुविधाओं का दृश्य प्रतिनिधित्व + - त्रुटियों और सकारात्मक विशेषताओं दोनों को रेखांकित करता है + - पृष्ठ संरचना को समझने के लिए उत्कृष्ट + +4. **रंग कॉन्ट्रास्ट विश्लेषक** + - WebAIM Contrast Checker विशिष्ट रंग जोड़ों के लिए + - पृष्ठ-व्यापी विश्लेषण के लिए ब्राउज़र एक्सटेंशन्स + - WCAG AA और AAA मानकों के विरुद्ध परीक्षण + +**🎧 असली सहायक प्रौद्योगिकी परीक्षण:** +- **स्क्रीन रीडर परीक्षण**: NVDA (Windows), VoiceOver (Mac), या TalkBack (Android) का उपयोग करें +- **कीबोर्ड-ओनली नेविगेशन**: अपने माउस को अनप्लग करें और पूरी साइट का नेविगेशन करें +- **ज़ूम परीक्षण**: कार्यक्षमता को 200% और 400% ज़ूम स्तर पर जाँचें +- **वॉइस कंट्रोल परीक्षण**: यदि उपलब्ध हो, तो वॉइस नेविगेशन उपकरण आज़माएं + +**📊 अपने परिणामों का आयोजन करें** एक मास्टर स्प्रेडशीट बनाकर: +- समस्या विवरण और स्थान +- गंभीरता स्तर (महत्वपूर्ण/उच्च/मध्यम/निम्न) +- उल्लंघित WCAG सफलता मानदंड +- समस्या पता लगाने वाला उपकरण +- स्क्रीनशॉट और प्रमाण + +### चरण 3: व्यापक निष्कर्ष दस्तावेजीकरण + +एक पेशेवर एक्सेसिबिलिटी ऑडिट रिपोर्ट तैयार करें जो तकनीकी मुद्दों और उनके मानवीय प्रभाव दोनों की आपकी समझ को दर्शाता हो। + +**📋 आवश्यक रिपोर्ट अनुभाग:** + +1. **कार्यकारी सारांश** (1 पृष्ठ) + - वेबसाइट URL और संक्षिप्त विवरण + - समग्र एक्सेसिबिलिटी परिपक्वता स्तर + - शीर्ष 3 सबसे महत्वपूर्ण मुद्दे + - विकलांग उपयोगकर्ताओं पर अनुमानित प्रभाव + +2. **पद्धति** (½ पृष्ठ) + - परीक्षण दृष्टिकोण और उपयोग किए गए उपकरण + - मूल्यांकन किए गए पृष्ठ और डिवाइस/ब्राउज़र संयोजन + - मूल्यांकन किए गए मानक (WCAG 2.1 AA) + +3. **विस्तृत निष्कर्ष** (2-3 पृष्ठ) + - WCAG सिद्धांत (Perceivable, Operable, Understandable, Robust) के अनुसार वर्गीकृत मुद्दे + - स्क्रीनशॉट और विशिष्ट उदाहरण शामिल करें + - पाए गए सकारात्मक एक्सेसिबिलिटी फीचर्स का उल्लेख करें + - स्वचालित उपकरणों के परिणामों के साथ क्रॉस-रेफरेंस करें + +4. **उपयोगकर्ता प्रभाव मूल्यांकन** (1 पृष्ठ) + - पहचाने गए मुद्दे विभिन्न अशक्तताओं वाले उपयोगकर्ताओं को कैसे प्रभावित करते हैं + - वास्तविक उपयोगकर्ता अनुभव का वर्णन करने वाले परिदृश्य + - व्यवसाय प्रभाव (कानूनी जोखिम, SEO, उपयोगकर्ता आधार विस्तार) + +**📸 साक्ष्य संग्रह:** +- एक्सेसिबिलिटी उल्लंघनों के स्क्रीनशॉट +- समस्या-संपन्न उपयोगकर्ता प्रवाह के स्क्रीन रिकॉर्डिंग +- उपकरण रिपोर्ट (PDF के रूप में सहेजें) +- मुद्दों को दर्शाने वाले कोड उदाहरण + +### चरण 4: पेशेवर सुधार योजना + +एक रणनीतिक, प्राथमिकता-आधारित योजना विकसित करें एक्सेसिबिलिटी मुद्दों को ठीक करने के लिए। यह दिखाता है कि आप एक पेशेवर वेब डेवलपर की तरह सोचते हैं जो वास्तविक व्यावसायिक प्रतिबंधों को संबोधित करता है। + +**🎯 विस्तृत सुधार सिफारिशें बनाएं (न्यूनतम 10 मुद्दे):** + +**प्रत्येक पहचाने गए मुद्दे के लिए प्रदान करें:** + +- **मुद्दा विवरण**: स्पष्ट व्याख्या कि क्या गलत है और यह क्यों समस्या है +- **WCAG संदर्भ**: उल्लंघित विशिष्ट सफलता मानदंड (जैसे "2.4.4 लिंक उद्देश्य (संदर्भ में) - स्तर A") +- **उपयोगकर्ता प्रभाव**: यह विभिन्न विकलांगताओं वाले लोगों को कैसे प्रभावित करता है +- **समाधान**: विशिष्ट कोड परिवर्तन, डिज़ाइन संशोधन, या प्रक्रिया सुधार +- **प्राथमिकता स्तर**: महत्वपूर्ण (मूल उपयोग को अवरुद्ध करता है) / उच्च (महत्वपूर्ण बाधा) / मध्यम (उपयोग की समस्या) / निम्न (सुधार) +- **कार्यान्वयन प्रयास**: समय/जटिलता का अनुमान (शीघ्र समाधान / मध्यम प्रयास / बड़ा पुनर्गठन) +- **परीक्षण सत्यापन**: कैसे सत्यापित करें कि सुधार काम करता है + +**सुधार उदाहरण प्रविष्टि:** + +``` +Issue: Generic "Read more" link text appears 8 times on homepage +WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A +User Impact: Screen reader users cannot distinguish between links when viewed in link list +Solution: Replace with descriptive text like "Read more about sustainability initiatives" +Priority: High (major navigation barrier) +Effort: Low (30 minutes to update content) +Testing: Generate link list with screen reader - each link should be meaningful standalone +``` + +**📈 रणनीतिक कार्यान्वयन चरण:** + +- **चरण 1 (0-2 सप्ताह)**: बुनियादी कार्यक्षमता अवरुद्ध करने वाले महत्वपूर्ण मुद्दे +- **चरण 2 (1-2 महीने)**: बेहतर उपयोगकर्ता अनुभव के लिए उच्च प्राथमिकता के सुधार +- **चरण 3 (3-6 महीने)**: मध्यम प्राथमिकता के सुधार और प्रक्रिया सुधार +- **चरण 4 (लगातार)**: सतत निगरानी और सुधार + +## मूल्यांकन मापदंड + +आपके एक्सेसिबिलिटी ऑडिट का आकलन तकनीकी सटीकता और व्यावसायिक प्रस्तुति दोनों पर किया जाएगा: + +| मानदंड | उत्कृष्ट (90-100%) | अच्छा (80-89%) | संतोषजनक (70-79%) | सुधार की आवश्यकता (<70%) | +|----------|-------------------|---------------|---------------------|------------------------| +| **मैनुअल परीक्षण गहराई** | सभी POUR सिद्धांतों को विस्तार से कवर करते हुए व्यापक आकलन, विस्तृत अवलोकन और उपयोगकर्ता परिदृश्य | अधिकांश पहुंच क्षेत्रों को अच्छी तरह से कवर करना, स्पष्ट निष्कर्ष और कुछ उपयोगकर्ता प्रभाव विश्लेषण | प्रमुख क्षेत्रों को कवर करने वाला बुनियादी आकलन, उपयुक्त अवलोकन | सीमित परीक्षण, सतही अवलोकन और न्यूनतम उपयोगकर्ता प्रभाव विचार | +| **उपकरण उपयोग और विश्लेषण** | सभी आवश्यक उपकरणों का प्रभावी उपयोग, निष्कर्षों का क्रॉस-रेफरेंसिंग, स्पष्ट साक्ष्य और उपकरण सीमाओं का विश्लेषण | अधिकांश उपकरणों का उपयोग, अच्छी दस्तावेजीकरण, कुछ क्रॉस-रेफरेंसिंग और उपयुक्त साक्ष्य | आवश्यक उपकरणों का उपयोग, बुनियादी दस्तावेजीकरण और कुछ साक्ष्य | न्यूनतम उपकरण उपयोग, खराब दस्तावेजीकरण या साक्ष्य की कमी | +| **मुद्दा पहचान और वर्गीकरण** | WCAG सिद्धांतों के अनुसार 15+ विशिष्ट मुद्दे, गंभीरता के अनुसार सटीक वर्गीकरण, गहरी समझ का प्रदर्शन | अधिकांश WCAG सिद्धांतों में 10-14 मुद्दे, अच्छा वर्गीकरण और ठोस समझ | 7-9 मुद्दे, उचित WCAG कवरेज और बुनियादी वर्गीकरण | 7 से कम मुद्दे, सीमित आकार या खराब वर्गीकरण | +| **समाधान की गुणवत्ता और व्यवहार्यता** | 10+ विस्तृत, कार्यात्मक समाधान, सटीक WCAG संदर्भ, यथार्थवादी कार्यान्वयन समय और सत्यापन विधियां | 8-9 अच्छी तरह विकसित समाधान, अधिकांश संदर्भ सटीक, अच्छा कार्यान्वयन विवरण | 6-7 बुनियादी समाधान, कुछ विवरण के साथ और सामान्यतः यथार्थवादी | 6 से कम समाधान या अपर्याप्त विवरण, अवास्तविक कार्यान्वयन | +| **पेशेवर संचार** | रिपोर्ट उत्कृष्ट रूप से व्यवस्थित, स्पष्ट लेखन, कार्यकारी सारांश शामिल, उपयुक्त तकनीकी भाषा, और व्यावसायिक दस्तावेज़ मानकों का पालन | अच्छी तरह से व्यवस्थित, अच्छी लेखन गुणवत्ता, अधिकांश आवश्यक अनुभाग शामिल, उपयुक्त स्वर | उपयुक्त रूप से व्यवस्थित, स्वीकार्य लेखन, बुनियादी आवश्यक अनुभाग शामिल | खराब संगठन, अस्पष्ट लेखन, या आवश्यक अनुभागों की कमी | +| **वास्तविक दुनिया में अनुप्रयोग** | व्यवसायिक प्रभाव, कानूनी विचार, उपयोगकर्ता विविधता और व्यावहारिक कार्यान्वयन चुनौतियों की समझ | व्यावहारिक अनुप्रयोगों की अच्छी समझ, कुछ व्यवसाय संदर्भ | वास्तविक दुनिया अनुप्रयोगों की बुनियादी समझ | व्यावहारिक अनुप्रयोगों से सीमित संबंध | + +## उन्नत चैलेंज विकल्प + +**🚀 अतिरिक्त चुनौती के लिए छात्रों के लिए:** + +- **तुलनात्मक विश्लेषण**: 2-3 प्रतिस्पर्धी वेबसाइटों का ऑडिट करें और उनकी पहुंच परिपक्वता की तुलना करें +- **मोबाइल पहुंच पर ध्यान**: Android TalkBack या iOS VoiceOver का उपयोग करके मोबाइल-विशिष्ट पहुंच मुद्दों में गहराई से जाएं +- **अंतरराष्ट्रीय दृष्टिकोण**: विभिन्न देशों के एक्सेसिबिलिटी मानकों (EN 301 549, सेक्शन 508, ADA) का शोध और उपयोग करें +- **एक्सेसिबिलिटी कथन समीक्षा**: आपकी खोजों के खिलाफ वेबसाइट के मौजूदा एक्सेसिबिलिटी कथन का मूल्यांकन करें (यदि कोई हो) + +## सबमिट करने योग्य दस्तावेज़ + +एक व्यापक एक्सेसिबिलिटी ऑडिट रिपोर्ट प्रस्तुत करें जो पेशेवर-स्तर के विश्लेषण और व्यावहारिक कार्यान्वयन योजना को प्रदर्शित करती हो: + +**📄 अंतिम रिपोर्ट आवश्यकताएँ:** + +1. **कार्यकारी सारांश** (1 पृष्ठ) + - वेबसाइट अवलोकन और एक्सेसिबिलिटी परिपक्वता मूल्यांकन + - मुख्य निष्कर्ष संक्षेप और व्यवसाय प्रभाव + - अनुशंसित प्राथमिकता क्रियाएं + +2. **पद्धति और दायरा** (1 पृष्ठ) + - परीक्षण दृष्टिकोण, उपयोग किए गए उपकरण, और मूल्यांकन मानदंड + - मूल्यांकन किए गए पृष्ठ/खंड और कोई सीमाएं + - मानक अनुपालन ढांचा (WCAG 2.1 AA) + +3. **विस्तृत निष्कर्ष रिपोर्ट** (3-4 पृष्ठ) + - मैनुअल परीक्षण अवलोकन सहित उपयोगकर्ता परिदृश्य + - स्वचालित उपकरण परिणामों के साथ क्रॉस-रेफरेंसिंग + - WCAG सिद्धांतों के अनुसार व्यवस्थित मुद्दे sाक्ष्यों के साथ + - पहचानी गई सकारात्मक पहुंच विशेषताएँ + +4. **रणनीतिक सुधार योजना** (3-4 पृष्ठ) + - प्राथमिकता-आधारित सुधार सिफारिशें (कम से कम 10) + - कार्यान्वयन समयसारिणी और प्रयास के अनुमान + - सफलता मीट्रिक और सत्यापन विधियां + - दीर्घकालिक एक्सेसिबिलिटी रखरखाव रणनीति + +5. **सहायक साक्ष्य** (परिशिष्ट) + - एक्सेसिबिलिटी उल्लंघनों और परीक्षण उपकरणों के स्क्रीनशॉट + - कोड उदाहरण जो मुद्दों और समाधानों को दर्शाते हैं + - उपकरण रिपोर्ट और ऑडिट सारांश + - स्क्रीन रीडर परीक्षण नोट्स या रिकॉर्डिंग + +**📊 प्रारूप आवश्यकताएँ:** +- **दस्तावेज़ प्रारूप**: PDF (पेशेवर प्रस्तुति) +- **शब्द गणना**: 2,500-3,500 शब्द (परिशिष्ट और स्क्रीनशॉट को छोड़कर) +- **दृश्य तत्व**: पूरे दस्तावेज़ में स्क्रीनशॉट, चार्ट, और उदाहरण शामिल करें +- **उद्धरण**: WCAG दिशानिर्देशों और एक्सेसिबिलिटी संसाधनों का उचित संदर्भ दें + +**💡 उत्कृष्टता के लिए प्रो टिप्स:** +- पेशेवर रिपोर्ट प्रारूपण का उपयोग करें, निरंतर शीर्षक और शेलींग के साथ +- सहज नेविगेशन के लिए तालिका सम्मिलित करें +- तकनीकी सटीकता और स्पष्ट, व्यवसाय-उपयुक्त भाषा में संतुलन बनाएं +- तकनीकी क्रियान्वयन और उपयोगकर्ता प्रभाव दोनों की समझ प्रदर्शित करें + +## सीखने के परिणाम + +इस व्यापक एक्सेसिबिलिटी ऑडिट को पूरा करने के बाद, आप आवश्यक पेशेवर कौशल विकसित कर चुके होंगे: + +**🎯 तकनीकी दक्षताएँ:** +- **एक्सेसिबिलिटी परीक्षण में महारत**: उद्योग-मानक मैनुअल और स्वचालित परीक्षण विधियों में निपुणता +- **WCAG अनुप्रयोग**: वास्तविक-विश्व परिदृश्यों पर वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस को लागू करने का व्यावहारिक अनुभव +- **सहायक प्रौद्योगिकी समझ**: स्क्रीन रीडर और कीबोर्ड नेविगेशन के साथ व्यावहारिक अनुभव +- **समस्या-समाधान मैपिंग**: एक्सेसिबिलिटी बाधाओं की पहचान और विशिष्ट, कार्यात्मक सुधार रणनीतियों का विकास करने में सक्षम + +**💼 पेशेवर कौशल:** +- **तकनीकी संचार**: विविध हितधारकों के लिए पेशेवर एक्सेसिबिलिटी रिपोर्ट लिखने का अनुभव +- **रणनीतिक योजना बनाना**: उपयोगकर्ता प्रभाव और कार्यान्वयन व्यवहार्यता के आधार पर एक्सेसिबिलिटी सुधारों को प्राथमिकता देने की क्षमता +- **गुणवत्ता आश्वासन**: विकास जीवनचक्र के हिस्से के रूप में एक्सेसिबिलिटी परीक्षण की समझ +- **जोखिम मूल्यांकन**: एक्सेसिबिलिटी अनुपालन के कानूनी, व्यवसायिक, और नैतिक प्रभावों के प्रति समझ + +**🌍 समावेशी डिज़ाइन मानसिकता:** +- **उपयोगकर्ता सहानुभूति**: विविध उपयोगकर्ता आवश्यकताओं और सहायक तकनीकों से संबंधित गहन समझ +- **सार्वभौमिक डिज़ाइन सिद्धांत**: यह मान्यता कि पहुँच योग्य डिज़ाइन सभी उपयोगकर्ताओं के लिए लाभकारी है, केवल विकलांगों के लिए नहीं +- **निरंतर सुधार**: ongoing एक्सेसिबिलिटी आकलन और सुधार के लिए रूपरेखा +- **अधिवक्ता कौशल**: भविष्य की परियोजनाओं और टीमों में एक्सेसिबिलिटी सर्वोत्तम प्रथाओं को बढ़ावा देने का आत्मविश्वास + +**🚀 करियर तैयारी:** +यह असाइनमेंट वास्तविक दुनिया की एक्सेसिबिलिटी परामर्श परियोजनाओं का प्रतिबिंब है, जो आपको पोर्टफोलियो-योग्य अनुभव प्रदान करता है जो दिखाता है: +- व्यवस्थित समस्या-समाधान दृष्टिकोण +- तकनीकी विवरण और व्यवसाय प्रभाव दोनों पर ध्यान +- जटिल तकनीकी अवधारणाओं का स्पष्ट संचार +- वेब विकास में कानूनी और नैतिक जिम्मेदारियों की समझ + +पूरा होने पर, आप किसी भी वेब विकास भूमिका में एक्सेसिबिलिटी पहलों में सार्थक योगदान देने और अपने करियर के दौरान समावेशी डिज़ाइन प्रथाओं के लिए वकालत करने के लिए तैयार होंगे। + +--- + + **अस्वीकरण**: -यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं। \ No newline at end of file +यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या असंगतियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में आधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए पेशेवर मानव अनुवाद की सलाह दी जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं। + \ No newline at end of file diff --git a/translations/hi/10-ai-framework-project/README.md b/translations/hi/10-ai-framework-project/README.md index fb25a76d7..e857403d6 100644 --- a/translations/hi/10-ai-framework-project/README.md +++ b/translations/hi/10-ai-framework-project/README.md @@ -1,41 +1,187 @@ # एआई फ्रेमवर्क -आजकल कई एआई फ्रेमवर्क उपलब्ध हैं, जिनका उपयोग करके प्रोजेक्ट बनाने में लगने वाला समय काफी कम किया जा सकता है। इस प्रोजेक्ट में, हम यह समझने पर ध्यान केंद्रित करेंगे कि ये फ्रेमवर्क किन समस्याओं का समाधान करते हैं और खुद एक ऐसा प्रोजेक्ट बनाएंगे। +क्या कभी आपने सोचा है कि शून्य से एआई एप्लिकेशन बनाना कितना भारी हो सकता है? आप अकेले नहीं हैं! एआई फ्रेमवर्क ऐसा होता है जैसे एआई विकास के लिए एक स्विस आर्मी चाकू — ये शक्तिशाली उपकरण हैं जो बुद्धिमान एप्लिकेशन बनाने में आपका समय और सिरदर्द बचाते हैं। एक एआई फ्रेमवर्क को एक सुव्यवस्थित पुस्तकालय के रूप में सोचें: यह पहले से बने घटक, मानकीकृत एपीआई, और स्मार्ट अमूर्तता प्रदान करता है ताकि आप कार्यान्वयन विवरण के बजाय समस्या सुलझाने पर ध्यान केंद्रित कर सकें। -## फ्रेमवर्क क्यों? +इस पाठ में, हम ऐसे फ्रेमवर्क्स जैसे LangChain का पता लगाएंगे जो पहले जटिल एआई समाकलन कार्यों को साफ, पठनीय कोड में बदल सकते हैं। आप सीखेंगे कि कैसे बातचीत को ट्रैक रखना है, टूल कॉलिंग लागू करनी है, और कैसे एक एकीकृत इंटरफ़ेस के माध्यम से विभिन्न एआई मॉडलों को संभालना है। -एआई का उपयोग करने के लिए विभिन्न दृष्टिकोण और कारण होते हैं, जिनके आधार पर आप इन दृष्टिकोणों को चुन सकते हैं। यहां कुछ उदाहरण दिए गए हैं: +जब हम खत्म करेंगे, तो आप जानेंगे कि कच्चे एपीआई कॉल के बजाय फ्रेमवर्क का कब उपयोग करना है, उनकी अमूर्तताओं का प्रभावी उपयोग कैसे करना है, और कैसे वास्तविक दुनिया के उपयोग के लिए तैयार एआई एप्लिकेशन बनाना है। आइये देखें कि एआई फ्रेमवर्क आपके प्रोजेक्ट्स के लिए क्या कर सकते हैं। -- **कोई SDK नहीं**, अधिकांश एआई मॉडल आपको सीधे एचटीटीपी अनुरोधों के माध्यम से एआई मॉडल के साथ इंटरैक्ट करने की अनुमति देते हैं। यह दृष्टिकोण काम करता है और यदि एसडीके विकल्प उपलब्ध नहीं है, तो यह आपका एकमात्र विकल्प हो सकता है। -- **SDK**। एसडीके का उपयोग करना आमतौर पर अनुशंसित दृष्टिकोण होता है क्योंकि यह आपके मॉडल के साथ इंटरैक्ट करने के लिए कम कोड लिखने की अनुमति देता है। यह आमतौर पर एक विशिष्ट मॉडल तक सीमित होता है और यदि आप विभिन्न मॉडलों का उपयोग कर रहे हैं, तो आपको उन अतिरिक्त मॉडलों का समर्थन करने के लिए नया कोड लिखने की आवश्यकता हो सकती है। -- **एक फ्रेमवर्क**। एक फ्रेमवर्क आमतौर पर चीजों को एक और स्तर तक ले जाता है, इस अर्थ में कि यदि आपको विभिन्न मॉडलों का उपयोग करने की आवश्यकता है, तो उन सभी के लिए एक एपीआई होता है, जो भिन्न होता है वह आमतौर पर प्रारंभिक सेटअप होता है। इसके अतिरिक्त, फ्रेमवर्क उपयोगी अमूर्तता लाते हैं जैसे कि एआई क्षेत्र में, वे टूल्स, मेमोरी, वर्कफ्लो, एजेंट्स आदि को कम कोड लिखते हुए संभाल सकते हैं। क्योंकि फ्रेमवर्क आमतौर पर एक निश्चित दृष्टिकोण अपनाते हैं, वे वास्तव में मददगार हो सकते हैं यदि आप उनके तरीके को अपनाते हैं, लेकिन यदि आप कुछ अनुकूलित करना चाहते हैं जो फ्रेमवर्क के लिए नहीं बनाया गया है, तो वे कम प्रभावी हो सकते हैं। कभी-कभी फ्रेमवर्क चीजों को इतना सरल बना देते हैं कि आप किसी महत्वपूर्ण विषय को नहीं सीख पाते, जो बाद में प्रदर्शन को नुकसान पहुंचा सकता है। +## ⚡ अगले 5 मिनट में आप क्या कर सकते हैं -सामान्यतः, काम के लिए सही उपकरण का उपयोग करें। +**व्यस्त डेवलपर्स के लिए त्वरित शुरुआत मार्ग** + +```mermaid +flowchart LR + A[⚡ 5 मिनट] --> B[LangChain इंस्टॉल करें] + B --> C[ChatOpenAI क्लाइंट बनाएं] + C --> D[पहला प्रॉम्प्ट भेजें] + D --> E[फ्रेमवर्क की शक्ति देखें] +``` +- **मिनट 1**: LangChain इंस्टॉल करें: `pip install langchain langchain-openai` +- **मिनट 2**: अपना GitHub टोकन सेट करें और ChatOpenAI क्लाइंट इम्पोर्ट करें +- **मिनट 3**: सिस्टम और मानव संदेशों के साथ एक सरल बातचीत बनाएं +- **मिनट 4**: एक बुनियादी टूल (जैसे जोड़ने वाला फंक्शन) जोड़ें और AI टूल कॉलिंग देखें +- **मिनट 5**: कच्चे एपीआई कॉल और फ्रेमवर्क अमूर्तता के बीच का अंतर अनुभव करें + +**त्वरित परीक्षण कोड**: +```python +from langchain_openai import ChatOpenAI +from langchain_core.messages import SystemMessage, HumanMessage + +llm = ChatOpenAI( + api_key=os.environ["GITHUB_TOKEN"], + base_url="https://models.github.ai/inference", + model="openai/gpt-4o-mini" +) + +response = llm.invoke([ + SystemMessage(content="You are a helpful coding assistant"), + HumanMessage(content="Explain Python functions briefly") +]) +print(response.content) +``` + +**क्यों यह महत्वपूर्ण है**: 5 मिनट में, आप देखेंगे कि कैसे एआई फ्रेमवर्क जटिल एआई समाकलन को सरल मेथड कॉल में बदल देते हैं। यह उत्पादन-स्तर के एआई एप्लिकेशन की नींव है। + +## फ्रेमवर्क क्यों चुनें? + +तो आप एक एआई ऐप बनाने के लिए तैयार हैं - शानदार! लेकिन बात यह है कि आपके पास कई अलग-अलग रास्ते हैं, और हर एक के अपने फायदे और नुकसान हैं। यह वैसा ही है जैसे कहीं पहुँचने के लिए चलना, साइकिल चलाना, या ड्राइविंग करना — ये सभी आपको वहाँ पहुंचाएंगे, लेकिन अनुभव (और प्रयास) पूरी तरह अलग होगा। + +आइए तीन मुख्य तरीकों को तोड़कर देखें जिनसे आप अपने प्रोजेक्ट्स में एआई को जोड़ सकते हैं: + +| तरीका | फायदे | सर्वश्रेष्ठ उपयोग | ध्यान देने योग्य बातें | +|----------|------------|----------|--------------| +| **प्रत्यक्ष HTTP अनुरोध** | पूर्ण नियंत्रण, कोई निर्भरता नहीं | सरल प्रश्न, मूल बातें सीखना | अधिक विस्तृत कोड, मैनुअल एरर हैंडलिंग | +| **SDK समाकलन** | कम बायलरप्लेट, मॉडल-विशिष्ट अनुकूलन | एकल-मॉडल एप्लिकेशन | विशिष्ट प्रदाताओं तक सीमित | +| **एआई फ्रेमवर्क्स** | एकीकृत एपीआई, अंतर्निर्मित अमूर्तता | बहु-मॉडल ऐप्स, जटिल वर्कफ़्लो | सीखने की प्रक्रिया, संभावित अधिक अमूर्तता | + +### प्रैक्टिस में फ्रेमवर्क लाभ + +```mermaid +graph TD + A[आपका अनुप्रयोग] --> B[एआई फ्रेमवर्क] + B --> C[ओपनएआई जीपीटी] + B --> D[एंथ्रोपिक क्लॉड] + B --> E[गिटहब मॉडल] + B --> F[लोकल मॉडल] + + B --> G[बिल्ट-इन टूल्स] + G --> H[मेमोरी प्रबंधन] + G --> I[वार्तालाप इतिहास] + G --> J[फंक्शन कॉलिंग] + G --> K[त्रुटि हैंडलिंग] +``` +**फ्रेमवर्क क्यों महत्वपूर्ण हैं:** +- **एकीकृत करता है** कई एआई प्रदाताओं को एक इंटरफ़ेस के तहत +- **बातचीत स्मृति** को स्वचालित रूप से संभालता है +- **सामान्य कार्यों** के लिए रेडी-मेड टूल्स प्रदान करता है जैसे एम्बेडिंग और फंक्शन कॉलिंग +- **त्रुटि हैंडलिंग और पुनः प्रयास** तर्क का प्रबंधन करता है +- **जटिल वर्कफ़्लो** को पठनीय मेथड कॉल में बदल देता है + +> 💡 **प्रो टिप**: जब आप विभिन्न एआई मॉडलों के बीच स्विच कर रहे हों या एजेंट्स, मेमोरी, या टूल कॉलिंग जैसे जटिल फीचर्स बना रहे हों तो फ्रेमवर्क का उपयोग करें। मूल बातें सीखते समय या सरल, केंद्रित एप्लिकेशन बनाते समय सीधे एपीआई का उपयोग करें। + +**निचोड़**: जैसे कारीगर के विशेष उपकरण और एक पूर्ण कार्यशाला के बीच चयन करना, यह काम के अनुसार उपकरण का मिलान करने का मामला है। जटिल, फीचर-समृद्ध एप्लिकेशन के लिए फ्रेमवर्क बेहतरीन हैं, जबकि सीधे एपीआई सरल उपयोग मामलों के लिए अच्छा काम करते हैं। + +## 🗺️ आपका एआई फ्रेमवर्क मास्टरी का सीखने का सफर + +```mermaid +journey + title कच्चे एपीआई से उत्पादन एआई अनुप्रयोगों तक + section फ्रेमवर्क नींव + अमूर्तन के लाभ समझें: 4: You + LangChain की बुनियादी बातें मास्टर करें: 6: You + दृष्टिकोणों की तुलना करें: 7: You + section संवाद प्रणाली + चैट इंटरफेस बनाएं: 5: You + मेमोरी पैटर्न लागू करें: 7: You + स्ट्रीमिंग प्रतिक्रियाओं को संभालें: 8: You + section उन्नत विशेषताएँ + कस्टम उपकरण बनाएं: 6: You + संरचित आउटपुट मास्टर करें: 8: You + दस्तावेज़ प्रणाली बनाएं: 8: You + section उत्पादन अनुप्रयोग + सभी विशेषताओं को मिलाएं: 7: You + त्रुटि परिदृश्यों को संभालें: 8: You + पूर्ण प्रणाली तैनात करें: 9: You +``` +**आपका लक्ष्य**: इस पाठ के अंत तक, आप एआई फ्रेमवर्क विकास में महारत हासिल कर चुके होंगे और व्यावसायिक एआई सहायकों के बराबर परिष्कृत, उत्पादन-सक्षम एआई एप्लिकेशन बना सकेंगे। ## परिचय इस पाठ में, हम सीखेंगे: -- एक सामान्य एआई फ्रेमवर्क का उपयोग करना। -- सामान्य समस्याओं जैसे कि चैट वार्तालाप, टूल उपयोग, मेमोरी और संदर्भ को संबोधित करना। -- एआई ऐप्स बनाने के लिए इसका लाभ उठाना। +- एक सामान्य एआई फ्रेमवर्क का उपयोग कैसे करें। +- सामान्य समस्याओं को संबोधित करना जैसे चैट बातचीत, टूल उपयोग, मेमोरी और संदर्भ। +- इसका उपयोग करके एआई ऐप बनाना। + +## 🧠 एआई फ्रेमवर्क विकास परिदृश्य + +```mermaid +mindmap + root((एआई फ्रेमवर्क)) + Abstraction Benefits + Code Simplification + Unified APIs + Built-in Error Handling + Consistent Patterns + Reduced Boilerplate + Multi-Model Support + Provider Agnostic + Easy Switching + Fallback Options + Cost Optimization + Core Components + Conversation Management + Message Types + Memory Systems + Context Tracking + History Persistence + Tool Integration + Function Calling + API Connections + Custom Tools + Workflow Automation + Advanced Features + Structured Output + Pydantic Models + JSON Schemas + Type Safety + Validation Rules + Document Processing + Embeddings + Vector Stores + Similarity Search + RAG Systems + Production Patterns + Application Architecture + Modular Design + Error Boundaries + Async Operations + State Management + Deployment Strategies + Scalability + Monitoring + Performance + Security +``` +**मूल सिद्धांत**: एआई फ्रेमवर्क जटिलता को अमूर्त करते हैं जबकि बातचीत प्रबंधन, टूल समाकलन, और दस्तावेज़ प्रसंस्करण के लिए शक्तिशाली अमूर्तताएँ प्रदान करते हैं, जिससे डेवलपर्स साफ-सुथरे, रखरखाव योग्य कोड के साथ परिष्कृत एआई एप्लिकेशन बना सकते हैं। -## पहला प्रॉम्प्ट +## आपका पहला एआई प्रांप्ट -हमारे पहले ऐप उदाहरण में, हम सीखेंगे कि एआई मॉडल से कैसे कनेक्ट करें और एक प्रॉम्प्ट का उपयोग करके इसे क्वेरी करें। +आइए बुनियादी बातों से शुरू करें और अपना पहला एआई एप्लिकेशन बनाएं जो प्रश्न भेजता है और उत्तर प्राप्त करता है। जैसे आर्किमिडीज़ ने अपने स्नान में विस्थापन सिद्धांत की खोज की, कभी-कभी सबसे सरल अवलोकन सबसे शक्तिशाली अंतर्दृष्टि देते हैं — और फ्रेमवर्क इन अंतर्दृष्टियों को पहुंचाने में मदद करते हैं। -### पायथन का उपयोग करना +### GitHub मॉडलों के साथ LangChain सेटअप करना -इस उदाहरण के लिए, हम Langchain का उपयोग GitHub Models से कनेक्ट करने के लिए करेंगे। हम `ChatOpenAI` नामक एक क्लास का उपयोग करेंगे और इसे `api_key`, `base_url` और `model` फील्ड देंगे। टोकन कुछ ऐसा है जो स्वचालित रूप से GitHub Codespaces में पॉप्युलेट होता है और यदि आप ऐप को लोकली चला रहे हैं, तो आपको इसे काम करने के लिए एक व्यक्तिगत एक्सेस टोकन सेट करना होगा। +हम LangChain का उपयोग GitHub मॉडलों से जुड़ने के लिए करेंगे, जो काफी अच्छा है क्योंकि यह आपको विभिन्न एआई मॉडलों का मुफ्त एक्सेस देता है। सबसे अच्छी बात? शुरू करने के लिए आपको केवल कुछ सरल कॉन्फ़िगरेशन पैरामीटर की आवश्यकता है: ```python from langchain_openai import ChatOpenAI @@ -47,32 +193,58 @@ llm = ChatOpenAI( model="openai/gpt-4o-mini", ) -# works -response = llm.invoke("What's the capital of France?") +# एक सरल प्रॉम्प्ट भेजें +response = llm.invoke("What's the capital of France?") print(response.content) ``` -इस कोड में, हम: - -- `ChatOpenAI` को कॉल करके एक क्लाइंट बनाते हैं। -- एक प्रॉम्प्ट के साथ `llm.invoke` का उपयोग करके एक प्रतिक्रिया बनाते हैं। -- `print(response.content)` के साथ प्रतिक्रिया को प्रिंट करते हैं। +**यहाँ क्या हो रहा है इसे समझते हैं:** +- **LangChain क्लाइंट बनाता है `ChatOpenAI` क्लास का उपयोग करके** - यह आपका AI का प्रवेश द्वार है! +- **GitHub मॉडलों से कनेक्शन को कॉन्फ़िगर करता है आपके प्रमाणीकरण टोकन के साथ** +- **निर्धारित करता है कौन सा AI मॉडल उपयोग करना है (`gpt-4o-mini`)** - इसे अपने AI सहायक के रूप में सोचें +- **अपने प्रश्न को `invoke()` मेथड के साथ भेजता है** - यही जादू होता है +- **उत्तर निकालता है और प्रदर्शित करता है** - और voilà, आप AI के साथ बातचीत कर रहे हैं! -आपको कुछ इस तरह की प्रतिक्रिया दिखाई देगी: +> 🔧 **सेटअप नोट**: यदि आप GitHub Codespaces का उपयोग कर रहे हैं, तो आप भाग्यशाली हैं — `GITHUB_TOKEN` पहले से सेट है! लोकल पर काम कर रहे हैं? कोई चिंता नहीं, आपको सही अनुमतियों के साथ एक व्यक्तिगत एक्सेस टोकन बनाना होगा। +**अपेक्षित आउटपुट:** ```text The capital of France is Paris. ``` -## चैट वार्तालाप +```mermaid +sequenceDiagram + participant App as आपका पायथन ऐप + participant LC as LangChain + participant GM as GitHub मॉडल्स + participant AI as GPT-4o-मिनी + + App->>LC: llm.invoke("फ़्रांस की राजधानी क्या है?") + LC->>GM: प्रॉम्प्ट के साथ HTTP अनुरोध + GM->>AI: प्रॉम्प्ट प्रोसेस करें + AI->>GM: उत्पन्न प्रतिक्रिया + GM->>LC: प्रतिक्रिया लौटाएं + LC->>App: response.content +``` +## बातचीत वाले एआई का निर्माण + +पहला उदाहरण मूल बातें दिखाता है, लेकिन यह केवल एकल आदान-प्रदान है — आप एक प्रश्न पूछते हैं, उत्तर पाते हैं, और बस। वास्तविक एप्लिकेशन में, आप चाहते हैं कि आपका AI यह याद रखे कि आप क्या चर्चा कर रहे थे, जैसे वॉटसन और होल्म्स ने समय के साथ अपनी जांच बातचीत विकसित की। + +यहाँ LangChain विशेष रूप से उपयोगी होता है। यह विभिन्न संदेश प्रकार प्रदान करता है जो बातचीत को संरचित करने में मदद करते हैं और आपको अपने AI को एक व्यक्तित्व देने देते हैं। आप चैट अनुभव बनाएंगे जो संदर्भ और चरित्र को बनाए रखते हैं। + +### संदेश प्रकार को समझना -पिछले खंड में, आपने देखा कि हमने आमतौर पर जिसे ज़ीरो शॉट प्रॉम्प्टिंग कहा जाता है, उसका उपयोग कैसे किया, एक सिंगल प्रॉम्प्ट और उसके बाद एक प्रतिक्रिया। +इन संदेश प्रकारों को इस तरह सोचें जैसे बातचीत में प्रतिभागी अलग-अलग "टोपी" पहनते हैं। LangChain अलग-अलग संदेश वर्गों का उपयोग करता है यह ट्रैक करने के लिए कि कौन क्या कह रहा है: -हालांकि, अक्सर आप खुद को ऐसी स्थिति में पाते हैं जहां आपको और एआई सहायक के बीच कई संदेशों का आदान-प्रदान करते हुए एक वार्तालाप बनाए रखना होता है। +| संदेश प्रकार | उद्देश्य | उदाहरण उपयोग केस | +|--------------|---------|------------------| +| `SystemMessage` | AI की व्यक्तित्व और व्यवहार निर्धारित करता है | "आप एक सहायक कोडिंग सहायक हैं" | +| `HumanMessage` | उपयोगकर्ता इनपुट का प्रतिनिधित्व करता है | "फ़ंक्शन कैसे काम करते हैं समझाएं" | +| `AIMessage` | AI प्रतिक्रियाओं को संग्रहित करता है | बातचीत में पिछली AI प्रतिक्रियाएं | -### पायथन का उपयोग करना +### आपकी पहली बातचीत बनाना -Langchain में, हम वार्तालाप को एक सूची में संग्रहीत कर सकते हैं। `HumanMessage` उपयोगकर्ता से एक संदेश का प्रतिनिधित्व करता है, और `SystemMessage` एक संदेश है जो एआई की "व्यक्तित्व" सेट करने के लिए होता है। नीचे दिए गए उदाहरण में, आप देख सकते हैं कि हम एआई को कैप्टन पिकार्ड की व्यक्तित्व मानने का निर्देश कैसे देते हैं और मानव/उपयोगकर्ता को "अपने बारे में बताओ" पूछने के लिए प्रॉम्प्ट के रूप में निर्देशित करते हैं। +आइए ऐसी बातचीत बनाएं जहाँ हमारा AI एक विशिष्ट भूमिका निभाए। इसे कैप्टन पिकार्ड की भूमिका निभानी होगी — एक ऐसा पात्र जो कूटनीतिक बुद्धिमत्ता और नेतृत्व के लिए जाना जाता है: ```python messages = [ @@ -81,6 +253,11 @@ messages = [ ] ``` +**इस बातचीत सेटअप को तोड़कर देखें:** +- `SystemMessage` के माध्यम से AI की भूमिका और व्यक्तित्व स्थापित करता है +- `HumanMessage` के जरिए प्रारंभिक उपयोगकर्ता प्रश्न प्रदान करता है +- बहु-टर्न बातचीत का आधार बनाता है + इस उदाहरण का पूरा कोड इस प्रकार दिखता है: ```python @@ -100,12 +277,12 @@ messages = [ ] -# works +# काम करता है response = llm.invoke(messages) print(response.content) ``` -आपको कुछ इस तरह का परिणाम दिखाई देगा: +आपको एक आउटपुट इस तरह प्राप्त होनी चाहिए: ```text I am Captain Jean-Luc Picard, the commanding officer of the USS Enterprise (NCC-1701-D), a starship in the United Federation of Planets. My primary mission is to explore new worlds, seek out new life and new civilizations, and boldly go where no one has gone before. @@ -115,7 +292,7 @@ I believe in the importance of diplomacy, reason, and the pursuit of knowledge. I hold the ideals of the Federation close to my heart, believing in the importance of cooperation, understanding, and respect for all sentient beings. My experiences have shaped my leadership style, and I strive to be a thoughtful and just captain. How may I assist you further? ``` -वार्तालाप की स्थिति को बनाए रखने के लिए, आप चैट से प्रतिक्रिया जोड़ सकते हैं, ताकि वार्तालाप याद रखा जा सके। इसे इस प्रकार किया जा सकता है: +बातचीत की निरंतरता बनाए रखने के लिए (हर बार संदर्भ रीसेट करने के बजाय), आपको संदेश सूची में लगातार प्रतिक्रियाएँ जोड़नी होंगी। जैसे मौखिक परंपराओं ने कहानियों को पीढ़ी दर पीढ़ी संरक्षित किया, यह तरीका स्थायी स्मृति बनाता है: ```python from langchain_core.messages import HumanMessage, SystemMessage @@ -134,7 +311,7 @@ messages = [ ] -# works +# काम करता है response = llm.invoke(messages) print(response.content) @@ -150,9 +327,9 @@ print(response.content) ``` -ऊपर दिए गए वार्तालाप से हम देख सकते हैं कि हमने LLM को दो बार कैसे इनवोक किया, पहले वार्तालाप में केवल दो संदेशों के साथ और फिर दूसरी बार वार्तालाप में अधिक संदेश जोड़कर। +काफी शानदार, है न? यहाँ जो हो रहा है वह यह है कि हम LLM को दो बार कॉल कर रहे हैं — पहले केवल शुरुआती दो संदेशों के साथ, फिर पूरे बातचीत इतिहास के साथ। यह ऐसा है जैसे AI वास्तव में हमारी चैट को फ़ॉलो कर रहा हो! -वास्तव में, यदि आप इसे चलाते हैं, तो आप देखेंगे कि दूसरी प्रतिक्रिया कुछ इस प्रकार होगी: +जब आप यह कोड चलाएंगे, तो आपको दूसरी प्रतिक्रिया मिलेगी जो कुछ इस प्रकार लगेगी: ```text Welcome aboard, Chris! It's always a pleasure to meet those who share a passion for exploration and discovery. While I cannot formally offer you a position on the Enterprise right now, I encourage you to pursue your aspirations. We are always in need of talented individuals with diverse skills and backgrounds. @@ -160,27 +337,165 @@ Welcome aboard, Chris! It's always a pleasure to meet those who share a passion If you are interested in space exploration, consider education and training in the sciences, engineering, or diplomacy. The values of curiosity, resilience, and teamwork are crucial in Starfleet. Should you ever find yourself on a starship, remember to uphold the principles of the Federation: peace, understanding, and respect for all beings. Your journey can lead you to remarkable adventures, whether in the stars or on the ground. Engage! ``` -मैं इसे शायद के रूप में लूंगा ;) +```mermaid +sequenceDiagram + participant User + participant App + participant LangChain + participant AI + + User->>App: "अपने बारे में बताओ" + App->>LangChain: [SystemMessage, HumanMessage] + LangChain->>AI: Formatted conversation + AI->>LangChain: Captain Picard का जवाब + LangChain->>App: AIMessage ऑब्जेक्ट + App->>User: जवाब दिखाएं + + Note over App: वार्तालाप में AIMessage जोड़ें + + User->>App: "क्या मैं आपकी टीम में शामिल हो सकता हूँ?" + App->>LangChain: [SystemMessage, HumanMessage, AIMessage, HumanMessage] + LangChain->>AI: पूरा वार्तालाप संदर्भ + AI->>LangChain: संदर्भित जवाब + LangChain->>App: नया AIMessage + App->>User: संदर्भित जवाब दिखाएं +``` +मैं इसे शायद कहूँगा ;) -## स्ट्रीमिंग प्रतिक्रियाएं +## स्ट्रीमिंग प्रतिक्रियाएँ -TODO +क्या आपने गौर किया है कि ChatGPT अपनी प्रतिक्रियाएँ रियल-टाइम में "टाइप" करता हुआ लगता है? वह स्ट्रीमिंग है। जैसे कुशल सुलेखकार काम करता है — अक्षर को स्ट्रोक दर स्ट्रोक देखते हैं बजाय सीधे एक साथ प्रकट होने के — स्ट्रीमिंग बातचीत को अधिक प्राकृतिक महसूस कराता है और त्वरित प्रतिक्रिया प्रदान करता है। -## प्रॉम्प्ट टेम्पलेट्स +### LangChain के साथ स्ट्रीमिंग लागू करना -TODO +```python +from langchain_openai import ChatOpenAI +import os + +llm = ChatOpenAI( + api_key=os.environ["GITHUB_TOKEN"], + base_url="https://models.github.ai/inference", + model="openai/gpt-4o-mini", + streaming=True +) + +# प्रतिक्रिया को स्ट्रीम करें +for chunk in llm.stream("Write a short story about a robot learning to code"): + print(chunk.content, end="", flush=True) +``` + +**स्ट्रीमिंग क्यों शानदार है:** +- **बनते हुए कंटेंट को दिखाता है** - अब और किसी तरह की असहज प्रतीक्षा नहीं! +- **उपयोगकर्ताओं को लगता है कि कुछ हो रहा है** +- **तकनीकी रूप से तेज़ न होते हुए भी तेज़ महसूस होता है** +- **उपयोगकर्ताओं को पढ़ना शुरू करने देता है जबकि AI अभी भी "सोच" रहा है** + +> 💡 **उपयोगकर्ता अनुभव टिप**: स्ट्रीमिंग तब वास्तव में चमकता है जब आप लंबी प्रतिक्रियाओं से निपट रहे हों जैसे कोड व्याख्याएँ, रचनात्मक लेखन, या विस्तृत ट्यूटोरियल। आपके उपयोगकर्ताओं को प्रगति देखते रहना पसंद आएगा बजाय खाली स्क्रीन देखते रहने के! + +### 🎯 शैक्षिक चेक-इन: फ्रेमवर्क अमूर्तता के लाभ + +**रोकें और सोचें**: आपने अभी एआई फ्रेमवर्क अमूर्तताओं की शक्ति का अनुभव किया। पिछले पाठों के कच्चे एपीआई कॉल के मुकाबले आपने जो सीखा उसका मूल्यांकन करें। + +**त्वरित स्वयं-मूल्यांकन**: +- क्या आप बता सकते हैं कि LangChain बातचीत प्रबंधन को मैन्युअल संदेश ट्रैकिंग के मुकाबले कैसे सरल बनाता है? +- `invoke()` और `stream()` मेथड्स में क्या अंतर है, और आप कब क्या उपयोग करेंगे? +- फ्रेमवर्क का संदेश प्रकार सिस्टम कोड संगठन में कैसे सुधार करता है? + +**वास्तविक दुनिया कनेक्शन**: आपने जो अमूर्त पैटर्न सीखे हैं (संदेश प्रकार, स्ट्रीमिंग इंटरफेस, बातचीत स्मृति) वे हर प्रमुख एआई एप्लिकेशन में उपयोग होते हैं — ChatGPT के इंटरफ़ेस से लेकर GitHub Copilot के कोड सहायता तक। आप उसी वास्तुकला पैटर्न में महारत हासिल कर रहे हैं जिसे पेशेवर एआई विकास टीमें उपयोग करती हैं। + +**चुनौती प्रश्न**: आप कैसे फ्रेमवर्क अमूर्तता डिजाइन करेंगे जो विभिन्न एआई मॉडल प्रदाताओं (OpenAI, Anthropic, Google) को एकल इंटरफेस से संभाल सके? इसके फायदे और जोखिम क्या होंगे? + +## प्रांप्ट टेम्प्लेट + +प्रांप्ट टेम्प्लेट वैसा काम करते हैं जैसे क्लासिकल भाषण कला में प्रयुक्त वाक्य रचनाएँ — सोचें कि किसेरो कैसे अपने भाषण पैटर्न्स को विभिन्न श्रोताओं के अनुसार अनुकूलित करता था जबकि समान प्रभावी ढांचा बनाए रखता था। ये आपको पुन: प्रयोज्य प्रांप्ट बनाने देते हैं जहां आप विभिन्न जानकारियाँ बदल सकते हैं बिना सब कुछ फिर से लिखे। एक बार टेम्प्लेट सेट करने के बाद, आप केवल वेरिएबल्स को अपनी जरूरत के अनुसार भरते हैं। + +### पुन: प्रयोज्य प्रांप्ट बनाना + +```python +from langchain_core.prompts import ChatPromptTemplate + +# कोड व्याख्याओं के लिए एक टेम्पलेट परिभाषित करें +template = ChatPromptTemplate.from_messages([ + ("system", "You are an expert programming instructor. Explain concepts clearly with examples."), + ("human", "Explain {concept} in {language} with a practical example for {skill_level} developers") +]) + +# विभिन्न मानों के साथ टेम्पलेट का उपयोग करें +questions = [ + {"concept": "functions", "language": "JavaScript", "skill_level": "beginner"}, + {"concept": "classes", "language": "Python", "skill_level": "intermediate"}, + {"concept": "async/await", "language": "JavaScript", "skill_level": "advanced"} +] + +for question in questions: + prompt = template.format_messages(**question) + response = llm.invoke(prompt) + print(f"Topic: {question['concept']}\n{response.content}\n---\n") +``` + +**आप टेम्प्लेट्स को क्यों पसंद करेंगे:** +- **पूरे ऐप में आपके प्रांप्ट्स को सुसंगत बनाए रखता है** +- **अब कोई गंदा स्ट्रिंग जोडऩा नहीं — बस साफ-सुथरे सरल वेरिएबल्स** +- **आपका AI पूर्वानुमेय व्यवहार करता है क्योंकि संरचना समान रहती है** +- **अपडेट करना आसान — टेम्प्लेट एक बार बदलो, और हर जगह ठीक हो जाता है** ## संरचित आउटपुट -TODO +क्या आप कभी अनस्ट्रक्चर्ड टेक्स्ट के रूप में आए एआई प्रतिक्रियाओं को पार्स करने में परेशान हुए हैं? संरचित आउटपुट ऐसा है जैसे आप अपने AI को जैविक वर्गीकरण के लिए लिनियस की प्रणाली की तरह व्यवस्थित, पूर्वानुमेय, और काम करने में आसान विधि का पालन करने के लिए सिखा रहे हों। आप JSON, विशिष्ट डेटा संरचनाएँ, या किसी भी प्रारूप का अनुरोध कर सकते हैं। + +### आउटपुट स्कीमा परिभाषित करना + +```python +from langchain_core.prompts import ChatPromptTemplate +from langchain_core.output_parsers import JsonOutputParser +from pydantic import BaseModel, Field + +class CodeReview(BaseModel): + score: int = Field(description="Code quality score from 1-10") + strengths: list[str] = Field(description="List of code strengths") + improvements: list[str] = Field(description="List of suggested improvements") + overall_feedback: str = Field(description="Summary feedback") + +# पार्सर सेट करें +parser = JsonOutputParser(pydantic_object=CodeReview) + +# प्रारूप निर्देशों के साथ प्रॉम्प्ट बनाएं +prompt = ChatPromptTemplate.from_messages([ + ("system", "You are a code reviewer. {format_instructions}"), + ("human", "Review this code: {code}") +]) + +# निर्देशों के साथ प्रॉम्प्ट को प्रारूपित करें +chain = prompt | llm | parser + +# संगठित प्रतिक्रिया प्राप्त करें +code_sample = """ +def calculate_average(numbers): + return sum(numbers) / len(numbers) +""" + +result = chain.invoke({ + "code": code_sample, + "format_instructions": parser.get_format_instructions() +}) + +print(f"Score: {result['score']}") +print(f"Strengths: {', '.join(result['strengths'])}") +``` + +**संरचित आउटपुट क्यों गेम-चेंजर है:** +- **अब कोई अंदाजा नहीं कि आपको किस प्रारूप में मिलेगा — हर बार सुसंगत रहता है** +- **बिना अतिरिक्त काम के सीधे आपके डेटाबेस और API में फिट हो जाता है** +- **अजीब AI प्रतिक्रियाओं को पकड़ता है इससे पहले कि वे आपके ऐप को तोड़ें** +- **आपका कोड साफ रहता है क्योंकि आप जानते हैं कि आप क्या इस्तेमाल कर रहे हैं** ## टूल कॉलिंग -टूल्स वह माध्यम हैं जिससे हम LLM को अतिरिक्त कौशल प्रदान करते हैं। विचार यह है कि LLM को उन फंक्शन्स के बारे में बताया जाए जो उसके पास हैं और यदि कोई प्रॉम्प्ट इन टूल्स के विवरण से मेल खाता है, तो हम उन्हें कॉल कर सकते हैं। +अब हम सबसे शक्तिशाली फीचरों में से एक पर पहुँच गए हैं: टूल्स। यही वह तरीका है जिससे आप अपने AI को बातचीत से परे व्यावहारिक क्षमताएँ देते हैं। जैसे मध्यकालीन गिल्ड ने विशेष शिल्पों के लिए विशिष्ट उपकरण विकसित किए, आप अपने AI को लक्षित उपकरणों से सुसज्जित कर सकते हैं। आप इंगित करते हैं कि कौन से टूल्स उपलब्ध हैं, और जब कोई ऐसा अनुरोध करता है जो मेल खाता है, तो आपका AI कार्रवाई कर सकता है। -### पायथन का उपयोग करना +### Python का उपयोग करना -आइए कुछ टूल्स जोड़ें: +आइए कुछ टूल्स इस तरह जोड़ें: ```python from typing_extensions import Annotated, TypedDict @@ -188,7 +503,7 @@ from typing_extensions import Annotated, TypedDict class add(TypedDict): """Add two integers.""" - # Annotations must have the type and can optionally include a default value and description (in that order). + # एनोटेशन में प्रकार होना चाहिए और वैकल्पिक रूप से एक डिफ़ॉल्ट मूल्य और विवरण (उसी क्रम में) शामिल हो सकते हैं। a: Annotated[int, ..., "First integer"] b: Annotated[int, ..., "Second integer"] @@ -199,9 +514,9 @@ functions = { } ``` -यहां हम एक टूल `add` का विवरण बना रहे हैं। `TypedDict` से इनहेरिट करके और `a` और `b` जैसे मेंबर्स को `Annotated` प्रकार के रूप में जोड़कर, इसे एक स्कीमा में परिवर्तित किया जा सकता है जिसे LLM समझ सकता है। फंक्शन्स का निर्माण एक डिक्शनरी है जो यह सुनिश्चित करता है कि यदि कोई विशिष्ट टूल पहचाना जाता है तो हमें क्या करना है। +तो यहाँ क्या हो रहा है? हम `add` नामक एक टूल के लिए एक ब्लूप्रिंट बना रहे हैं। `TypedDict` से विरासत लेकर और `a` और `b` के लिए उन शानदार `Annotated` प्रकारों का उपयोग करके, हम LLM को स्पष्ट रूप से बताते हैं कि यह टूल क्या करता है और इसे क्या चाहिए। `functions` शब्दकोश हमारे टूलबॉक्स की तरह है — यह हमारे कोड को बताता है कि जब AI किसी विशिष्ट टूल का उपयोग करने का निर्णय लेता है तो क्या करना है। -आइए देखें कि हम इस टूल के साथ LLM को कैसे कॉल करते हैं: +आइए देखें कि हम अगली बार इस टूल के साथ LLM को कैसे कॉल करते हैं: ```python llm = ChatOpenAI( @@ -213,9 +528,9 @@ llm = ChatOpenAI( llm_with_tools = llm.bind_tools(tools) ``` -यहां हम अपने `tools` ऐरे के साथ `bind_tools` को कॉल करते हैं और इस प्रकार LLM `llm_with_tools` अब इस टूल के बारे में जानकारी रखता है। +यहाँ हम `bind_tools` को हमारे `tools` एरे के साथ कॉल करते हैं और इस प्रकार LLM `llm_with_tools` के पास अब इस टूल का ज्ञान है। -इस नए LLM का उपयोग करने के लिए, हम निम्न कोड टाइप कर सकते हैं: +इस नए LLM का उपयोग करने के लिए, हम निम्न कोड लिख सकते हैं: ```python query = "What is 3 + 12?" @@ -227,7 +542,7 @@ if(res.tool_calls): print("CONTENT: ",res.content) ``` -अब जब हम इस नए LLM पर `invoke` को कॉल करते हैं, जिसमें टूल्स हैं, तो हमें शायद `tool_calls` प्रॉपर्टी पॉप्युलेटेड मिलेगी। यदि ऐसा है, तो किसी भी पहचाने गए टूल्स में एक `name` और `args` प्रॉपर्टी होगी जो यह पहचानती है कि किस टूल को कॉल करना चाहिए और किस आर्ग्युमेंट्स के साथ। पूरा कोड इस प्रकार दिखता है: +अब जब हम इस नए टूल वाले llm पर `invoke` कॉल करते हैं, तो संभवतः `tool_calls` संपत्ति भरी हुई होगी। यदि हाँ, तो किसी भी पहचाने गए टूल के पास `name` और `args` संपत्ति होती है जो निर्दिष्ट करती है कि कौन सा टूल कॉल किया जाना चाहिए और तर्क क्या हैं। पूरा कोड इस प्रकार दिखता है: ```python from langchain_core.messages import HumanMessage, SystemMessage @@ -238,7 +553,7 @@ from typing_extensions import Annotated, TypedDict class add(TypedDict): """Add two integers.""" - # Annotations must have the type and can optionally include a default value and description (in that order). + # एनोटेशन में प्रकार होना आवश्यक है और वैकल्पिक रूप से एक डिफ़ॉल्ट मान और विवरण (उस क्रम में) शामिल हो सकता है। a: Annotated[int, ..., "First integer"] b: Annotated[int, ..., "Second integer"] @@ -265,28 +580,29 @@ if(res.tool_calls): print("CONTENT: ",res.content) ``` -इस कोड को चलाने पर, आपको कुछ इस तरह का आउटपुट दिखाई देगा: +इस कोड को चलाने पर, आपको ऐसा आउटपुट मिलेगा: ```text TOOL CALL: 15 CONTENT: ``` -इस आउटपुट का मतलब यह है कि LLM ने प्रॉम्प्ट "What is 3 + 12" का विश्लेषण इस रूप में किया कि `add` टूल को कॉल किया जाना चाहिए और यह जानता था कि इसका नाम, विवरण और मेंबर फील्ड विवरणों के कारण। उत्तर 15 इसलिए है क्योंकि हमारी डिक्शनरी `functions` का उपयोग करके कोड ने इसे इनवोक किया: +AI ने "What is 3 + 12" को जाँचा और इसे `add` टूल के लिए कार्य के रूप में पहचाना। जैसे कुशल लाइब्रेरियन प्रश्न के प्रकार के आधार पर संदर्भ देखता है, AI ने टूल के नाम, विवरण, और फ़ील्ड विनिर्देशों से यह निर्णय लिया। 15 का परिणाम हमारे `functions` शब्दकोश द्वारा टूल को निष्पादित करने से आता है: ```python print("TOOL CALL: ", functions[tool["name"]](../../../10-ai-framework-project/**tool["args"])) ``` -### एक और दिलचस्प टूल जो एक वेब एपीआई को कॉल करता है +### एक और दिलचस्प टूल जो वेब एपीआई को कॉल करता है + -दो नंबर जोड़ने वाले टूल्स दिलचस्प हैं क्योंकि यह दिखाता है कि टूल कॉलिंग कैसे काम करती है, लेकिन आमतौर पर टूल्स कुछ अधिक दिलचस्प करते हैं, जैसे कि एक वेब एपीआई को कॉल करना। आइए इस कोड के साथ ऐसा ही करें: +संख्या जोड़ना अवधारणा को दर्शाता है, लेकिन वास्तविक टूल आम तौर पर अधिक जटिल संचालन करते हैं, जैसे वेब APIs को कॉल करना। आइए हमारे उदाहरण को इस प्रकार बढ़ाएं कि AI इंटरनेट से सामग्री प्राप्त करे - ठीक उसी तरह जैसे टेलीग्राफ ऑपरेटर्स एक समय पर दूर-दराज़ के स्थानों को जोड़ते थे: ```python class joke(TypedDict): """Tell a joke.""" - # Annotations must have the type and can optionally include a default value and description (in that order). + # एनोटेशन में प्रकार होना चाहिए और वैकल्पिक रूप से एक डिफ़ॉल्ट मान और विवरण शामिल किया जा सकता है (उसी क्रम में)। category: Annotated[str, ..., "The joke category"] def get_joke(category: str) -> str: @@ -302,17 +618,43 @@ functions = { query = "Tell me a joke about animals" -# the rest of the code is the same +# बाकी कोड समान है ``` -अब यदि आप इस कोड को चलाते हैं, तो आपको कुछ इस प्रकार की प्रतिक्रिया मिलेगी: +अब यदि आप इस कोड को चलाते हैं तो आपको कुछ इस प्रकार का प्रतिक्रिया मिलेगा: ```text TOOL CALL: Chuck Norris once rode a nine foot grizzly bear through an automatic car wash, instead of taking a shower. CONTENT: ``` -यहां पूरा कोड है: +```mermaid +flowchart TD + A[उपयोगकर्ता प्रश्न: "पशुओं के बारे में एक मजाक बताओ"] --> B[LangChain विश्लेषण] + B --> C{उपकरण उपलब्ध?} + C -->|हाँ| D[मजाक उपकरण चुनें] + C -->|नहीं| E[प्रत्यक्ष उत्तर उत्पन्न करें] + + D --> F[पैरामीटर निकालें] + F --> G[मजाक कॉल करें(category="animals")] + G --> H[chucknorris.io को API अनुरोध] + H --> I[मजाक सामग्री लौटाएं] + I --> J[उपयोगकर्ता को दिखाएं] + + E --> K[AI-निर्मित उत्तर] + K --> J + + subgraph "उपकरण परिभाषा स्तर" + L[TypedDict स्कीमा] + M[फ़ंक्शन कार्यान्वयन] + N[पैरामीटर सत्यापन] + end + + D --> L + F --> N + G --> M +``` +यहाँ पूरा कोड दिया गया है: ```python from langchain_openai import ChatOpenAI @@ -323,14 +665,14 @@ from typing_extensions import Annotated, TypedDict class add(TypedDict): """Add two integers.""" - # Annotations must have the type and can optionally include a default value and description (in that order). + # एनोटेशन में प्रकार होना चाहिए और वैकल्पिक रूप से एक डिफ़ॉल्ट मान और विवरण शामिल हो सकते हैं (उसी क्रम में)। a: Annotated[int, ..., "First integer"] b: Annotated[int, ..., "Second integer"] class joke(TypedDict): """Tell a joke.""" - # Annotations must have the type and can optionally include a default value and description (in that order). + # एनोटेशन में प्रकार होना चाहिए और वैकल्पिक रूप से एक डिफ़ॉल्ट मान और विवरण शामिल हो सकते हैं (उसी क्रम में)। category: Annotated[str, ..., "The joke category"] tools = [add, joke] @@ -364,25 +706,443 @@ if(res.tool_calls): print("CONTENT: ",res.content) ``` -## एम्बेडिंग +## एम्बेडिंग्स और दस्तावेज़ प्रसंस्करण + +एंबेडिंग्स आधुनिक AI में सबसे सुरुचिपूर्ण समाधानों में से एक का प्रतिनिधित्व करती हैं। कल्पना करें कि आप किसी भी टेक्स्ट को लेकर उसे संख्यात्मक निर्देशांक में परिवर्तित कर सकते हैं जो उसके अर्थ को पकड़ता हो। ठीक ऐसा ही एम्बेडिंग्स करती हैं - वे टेक्स्ट को मल्टी-डायमेंशनल स्पेस के बिंदुओं में तब्दील कर देती हैं जहाँ समान अवधारणाएँ एक साथ समूहित होती हैं। यह विचारों के लिए एक निर्देशांक प्रणाली की तरह है, जो मेन्डेलीव ने परमाणु गुणों के आधार पर आवर्त सारणी को व्यवस्थित करने के तरीके जैसी है। + +### एम्बेडिंग्स बनाना और उपयोग करना + +```python +from langchain_openai import OpenAIEmbeddings +from langchain_community.vectorstores import FAISS +from langchain_community.document_loaders import TextLoader +from langchain.text_splitter import CharacterTextSplitter + +# एम्बेडिंग्स प्रारंभ करें +embeddings = OpenAIEmbeddings( + api_key=os.environ["GITHUB_TOKEN"], + base_url="https://models.github.ai/inference", + model="text-embedding-3-small" +) + +# दस्तावेज़ लोड करें और विभाजित करें +loader = TextLoader("documentation.txt") +documents = loader.load() + +text_splitter = CharacterTextSplitter(chunk_size=1000, chunk_overlap=0) +texts = text_splitter.split_documents(documents) + +# वेक्टर स्टोर बनाएं +vectorstore = FAISS.from_documents(texts, embeddings) + +# समानता खोज करें +query = "How do I handle user authentication?" +similar_docs = vectorstore.similarity_search(query, k=3) + +for doc in similar_docs: + print(f"Relevant content: {doc.page_content[:200]}...") +``` + +### विभिन्न प्रारूपों के लिए दस्तावेज़ लोडर -सामग्री को वेक्टर में बदलें, कोसाइन समानता के माध्यम से तुलना करें +```python +from langchain_community.document_loaders import ( + PyPDFLoader, + CSVLoader, + JSONLoader, + WebBaseLoader +) + +# विभिन्न दस्तावेज़ प्रकार लोड करें +pdf_loader = PyPDFLoader("manual.pdf") +csv_loader = CSVLoader("data.csv") +json_loader = JSONLoader("config.json") +web_loader = WebBaseLoader("https://example.com/docs") + +# सभी दस्तावेज़ों को संसाधित करें +all_documents = [] +for loader in [pdf_loader, csv_loader, json_loader, web_loader]: + docs = loader.load() + all_documents.extend(docs) +``` + +**एंबेडिंग्स के साथ आप क्या कर सकते हैं:** +- **सर्ज** बनाएँ जो वास्तव में आपके अर्थ को समझता है, सिर्फ कीवर्ड मिलान नहीं करता +- **AI बनाएं** जो आपके दस्तावेज़ों के बारे में सवालों का जवाब दे सके +- **अनुशंसा प्रणाली** बनाएं जो सचमुच प्रासंगिक सामग्री सुझाए +- **स्वचालित रूप से** अपनी सामग्री को व्यवस्थित और वर्गीकृत करें + +```mermaid +flowchart LR + A[दस्तावेज़] --> B[पाठ विभाजक] + B --> C[एम्बेडिंग बनाएं] + C --> D[वेक्टर स्टोर] + + E[उपयोगकर्ता प्रश्न] --> F[प्रश्न एम्बेडिंग] + F --> G[समानता खोज] + G --> D + D --> H[प्रासंगिक दस्तावेज़] + H --> I[एआई प्रतिक्रिया] + + subgraph "वेक्टर स्थान" + J[दस्तावेज़ A: [0.1, 0.8, 0.3...]] + K[दस्तावेज़ B: [0.2, 0.7, 0.4...]] + L[प्रश्न: [0.15, 0.75, 0.35...]] + end + + C --> J + C --> K + F --> L + G --> J + G --> K +``` +## एक पूर्ण AI एप्लिकेशन बनाना + +अब हम आपने जोकुछ सीखा है उसे एक समग्र एप्लिकेशन में एकीकृत करेंगे - एक कोडिंग सहायक जो सवालों के जवाब दे सके, टूल्स का उपयोग कर सके, और बातचीत की स्मृति बनाए रख सके। जैसे मुद्रण प्रेस ने मौजूदा तकनीकों (स्थानांतरित टाइप, स्याही, कागज और दबाव) को एक रूपांतरणकारी चीज में जोड़ा, वैसे ही हम अपने AI घटकों को कुछ व्यावहारिक और उपयोगी में संयोजित करेंगे। + +### पूर्ण एप्लिकेशन उदाहरण -https://python.langchain.com/docs/how_to/embed_text/ +```python +from langchain_openai import ChatOpenAI, OpenAIEmbeddings +from langchain_core.prompts import ChatPromptTemplate +from langchain_core.messages import HumanMessage, SystemMessage, AIMessage +from langchain_community.vectorstores import FAISS +from typing_extensions import Annotated, TypedDict +import os +import requests + +class CodingAssistant: + def __init__(self): + self.llm = ChatOpenAI( + api_key=os.environ["GITHUB_TOKEN"], + base_url="https://models.github.ai/inference", + model="openai/gpt-4o-mini" + ) + + self.conversation_history = [ + SystemMessage(content="""You are an expert coding assistant. + Help users learn programming concepts, debug code, and write better software. + Use tools when needed and maintain a helpful, encouraging tone.""") + ] + + # उपकरण परिभाषित करें + self.setup_tools() + + def setup_tools(self): + class web_search(TypedDict): + """Search for programming documentation or examples.""" + query: Annotated[str, "Search query for programming help"] + + class code_formatter(TypedDict): + """Format and validate code snippets.""" + code: Annotated[str, "Code to format"] + language: Annotated[str, "Programming language"] + + self.tools = [web_search, code_formatter] + self.llm_with_tools = self.llm.bind_tools(self.tools) + + def chat(self, user_input: str): + # उपयोगकर्ता संदेश को वार्तालाप में जोड़ें + self.conversation_history.append(HumanMessage(content=user_input)) + + # एआई प्रतिक्रिया प्राप्त करें + response = self.llm_with_tools.invoke(self.conversation_history) + + # यदि कोई हो तो उपकरण कॉल को संभालें + if response.tool_calls: + for tool_call in response.tool_calls: + tool_result = self.execute_tool(tool_call) + print(f"🔧 Tool used: {tool_call['name']}") + print(f"📊 Result: {tool_result}") + + # एआई प्रतिक्रिया को वार्तालाप में जोड़ें + self.conversation_history.append(response) + + return response.content + + def execute_tool(self, tool_call): + tool_name = tool_call['name'] + args = tool_call['args'] + + if tool_name == 'web_search': + return f"Found documentation for: {args['query']}" + elif tool_name == 'code_formatter': + return f"Formatted {args['language']} code: {args['code'][:50]}..." + + return "Tool execution completed" + +# उपयोग का उदाहरण +assistant = CodingAssistant() + +print("🤖 Coding Assistant Ready! Type 'quit' to exit.\n") + +while True: + user_input = input("You: ") + if user_input.lower() == 'quit': + break + + response = assistant.chat(user_input) + print(f"🤖 Assistant: {response}\n") +``` + +**एप्लिकेशन वास्तुकला:** + +```mermaid +graph TD + A[उपयोगकर्ता इनपुट] --> B[कोडिंग सहायक] + B --> C[संवाद स्मृति] + B --> D[उपकरण पहचान] + B --> E[एलएलएम प्रसंस्करण] + + D --> F[वेब खोज उपकरण] + D --> G[कोड स्वरूपक उपकरण] + + E --> H[प्रतिक्रिया उत्पन्न करना] + F --> H + G --> H + + H --> I[उपयोगकर्ता इंटरफ़ेस] + H --> C +``` +**हमने जो मुख्य सुविधाएँ लागू की हैं:** +- **आपकी पूरी बातचीत को याद रखता है** ताकि संदर्भ में निरंतरता बनी रहे +- **कहानी तक सीमित नहीं, टूल कॉलिंग भी करता है** +- **पूर्वानुमानित इंटरैक्शन पैटर्न का पालन करता है** +- **त्रुटि प्रबंधन और जटिल वर्कफ़्लोज़ को स्वचालित रूप से संभालता है** -### डॉक्यूमेंट लोडर्स +### 🎯 शैक्षिक चेक-इन: प्रोडक्शन AI वास्तुकला -पीडीएफ और सीएसवी +**आर्किटेक्चर की समझ**: आपने एक पूर्ण AI एप्लिकेशन बनाया है जो बातचीत प्रबंधन, टूल कॉलिंग और संरचित वर्कफ़्लोज़ को जोड़ता है। यह प्रोडक्शन-स्तर के AI एप्लिकेशन विकास का प्रतिनिधित्व करता है। -## ऐप बनाना +**मुख्य अवधारणाएँ जो आपने मास्टर की हैं**: +- **क्लास-आधारित आर्किटेक्चर**: संगठित, बनाए रखने योग्य AI एप्लिकेशन संरचना +- **टूल एकीकरण**: बातचीत से परे कस्टम कार्यक्षमता +- **मेमोरी प्रबंधन**: लगातार बातचीत का संदर्भ +- **त्रुटि प्रबंधन**: मजबूत एप्लिकेशन व्यवहार -TODO +**उद्योग संबंध**: आपने जो वास्तुकला पैटर्न लागू किए हैं (बातचीत क्लास, टूल सिस्टम, मेमोरी प्रबंधन) वे Slack के AI सहायक, GitHub Copilot, और Microsoft Copilot जैसे एंटरप्राइज AI एप्लिकेशन में उपयोग किए जाते पैटर्न हैं। आप पेशेवर-ग्रेड आर्किटेक्चरल सोच के साथ निर्माण कर रहे हैं। -## असाइनमेंट +**विचार प्रश्न**: आप इस एप्लिकेशन को कैसे बढ़ाएंगे ताकि यह एक से अधिक उपयोगकर्ताओं, लगातार संग्रहण, या बाहरी डेटाबेस एकीकरण को संभाल सके? विस्तारशीलता और स्थिति प्रबंधन की चुनौतियों पर विचार करें। + +## असाइनमेंट: अपना खुद का AI-संचालित अध्ययन सहायक बनाएं + +**लक्ष्य**: एक AI एप्लिकेशन बनाएं जो छात्रों को प्रोग्रामिंग अवधारणाओं को सीखने में मदद करे, समझाइयों, कोड उदाहरणों, और इंटरैक्टिव क्विज़ प्रदान करके। + +### आवश्यकताएँ + +**मूल सुविधाएँ (आवश्यक):** +1. **संवादी इंटरफ़ेस**: एक चैट सिस्टम लागू करें जो कई प्रश्नों के दौरान संदर्भ बनाए रखे +2. **शैक्षिक उपकरण**: सीखने में मदद के लिए कम से कम दो टूल बनाएं: + - कोड व्याख्याकार टूल + - कॉन्सेप्ट क्विज़ जेनरेटर +3. **व्यक्तिगत सीखना**: सिस्टम संदेशों का उपयोग कर विभिन्न कौशल स्तरों के अनुसार उत्तर समायोजित करें +4. **प्रतिक्रिया स्वरूपण**: क्विज़ प्रश्नों के लिए संरचित आउटपुट लागू करें + +### कार्यान्वयन चरण + +**चरण 1: अपना वातावरण सेटअप करें** +```bash +pip install langchain langchain-openai +``` + +**चरण 2: बुनियादी चैट कार्यक्षमता** +- `StudyAssistant` क्लास बनाएं +- बातचीत स्मृति लागू करें +- शैक्षिक समर्थन के लिए पर्सनालिटी कॉन्फ़िगरेशन जोड़ें + +**चरण 3: शैक्षिक उपकरण जोड़ें** +- **कोड एक्सप्लेनर**: कोड को समझने योग्य भागों में तोड़ता है +- **क्विज़ जेनरेटर**: प्रोग्रामिंग अवधारणाओं के बारे में प्रश्न बनाता है +- **प्रगति ट्रैकर**: कवर किए गए विषयों का ट्रैक रखता है + +**चरण 4: उन्नत सुविधाएँ (वैकल्पिक)** +- बेहतर उपयोगकर्ता अनुभव के लिए स्ट्रीमिंग प्रतिक्रियाओं को लागू करें +- पाठ्यक्रम सामग्री शामिल करने के लिए दस्तावेज़ लोडिंग जोड़ें +- समानता आधारित सामग्री पुनर्प्राप्ति के लिए एम्बेडिंग बनाएँ + +### मूल्यांकन मानदंड + +| विशेषता | उत्कृष्ट (4) | अच्छा (3) | संतोषजनक (2) | सुधार की आवश्यकता (1) | +|---------|---------------|----------|----------------|------------------| +| **बातचीत प्रवाह** | प्राकृतिक, संदर्भ-जागरूक उत्तर | अच्छा संदर्भ संरक्षण | मूल बातचीत | आदान-प्रदान के बीच कोई स्मृति नहीं | +| **टूल एकीकरण** | कई उपयोगी टूल बिना रुकावट के काम कर रहे | 2+ टूल ठीक से लागू | 1-2 आधारभूत टूल | टूल कार्यात्मक नहीं | +| **कोड गुणवत्ता** | स्वच्छ, अच्छी तरह प्रलेखित, त्रुटि प्रबंधन | अच्छी संरचना, कुछ प्रलेखन | मूलभूत कार्यक्षमता काम करती है | खराब संरचना, कोई त्रुटि प्रबंधन नहीं | +| **शैक्षिक मूल्य** | सीखने में वास्तव में मददगार, अनुकूलनीय | अच्छा सीखने का समर्थन | मूल समझाइयां | सीमित शैक्षिक लाभ | + +### नमूना कोड संरचना + +```python +class StudyAssistant: + def __init__(self, skill_level="beginner"): + # LLM, उपकरण और बातचीत मेमोरी प्रारंभ करें + pass + + def explain_code(self, code, language): + # उपकरण: कोड कैसे काम करता है समझाएं + pass + + def generate_quiz(self, topic, difficulty): + # उपकरण: अभ्यास प्रश्न बनाएँ + pass + + def chat(self, user_input): + # मुख्य बातचीत इंटरफ़ेस + pass + +# उदाहरण उपयोग +assistant = StudyAssistant(skill_level="intermediate") +response = assistant.chat("Explain how Python functions work") +``` + +**बोनस चुनौतियाँ:** +- वॉइस इनपुट/आउटपुट क्षमताएं जोड़ें +- Streamlit या Flask का उपयोग करके वेब इंटरफ़ेस बनाएं +- एम्बेडिंग्स का उपयोग करके पाठ्यक्रम सामग्री से ज्ञान आधार बनाएँ +- प्रगति ट्रैकिंग और व्यक्तिगत सीखने के पथ जोड़ें + +## 📈 आपका AI फ्रेमवर्क विकास मास्टरी टाइमलाइन + +```mermaid +timeline + title प्रोडक्शन AI फ्रेमवर्क विकास यात्रा + + section फ्रेमवर्क की नींव + सार समझना + : मास्टर फ्रेमवर्क और API निर्णय + : LangChain के मूल सिद्धांत सीखें + : संदेश प्रकार सिस्टम लागू करें + + मूल एकीकरण + : AI प्रदाताओं से कनेक्ट करें + : प्रमाणीकरण संभालें + : कॉन्फ़िगरेशन प्रबंधन करें + + section संवाद प्रणाली + मेमोरी प्रबंधन + : संवाद इतिहास बनाएं + : संदर्भ ट्रैकिंग लागू करें + : सत्र स्थायित्व संभालें + + उन्नत बातचीत + : स्ट्रीमिंग प्रतिक्रियाएं मास्टर करें + : प्रॉम्प्ट टेम्पलेट बनाएं + : संरचित आउटपुट लागू करें + + section टूल एकीकरण + कस्टम टूल विकास + : टूल स्कीमास डिजाइन करें + : फंक्शन कॉलिंग लागू करें + : बाह्य API संभालें + + वर्कफ़्लो स्वचालन + : कई टूल जोड़ें + : निर्णय वृक्ष बनाएं + : एजेंट व्यवहार बनाएं + + section प्रोडक्शन एप्लीकेशंस + पूर्ण सिस्टम वास्तुकला + : सभी फ्रेमवर्क सुविधाएँ जोड़ें + : त्रुटि सीमा लागू करें + : रखरखाव योग्य कोड बनाएं + + एंटरप्राइज़ तैयारी + : स्केलेबिलिटी चिंताएं संभालें + : निगरानी लागू करें + : परिनियोजन रणनीतियाँ बनाएं +``` +**🎓 स्नातक मील का पत्थर**: आपने AI फ्रेमवर्क विकास में महारत हासिल कर ली है, वही टूल्स और पैटर्न इस्तेमाल करते हुए जो आधुनिक AI एप्लिकेशन को शक्ति देते हैं। ये कौशल एंटरप्राइज-ग्रेड बुद्धिमान सिस्टम बनाने की दिशा में आपके लिए आधार हैं। + +**🔄 अगले स्तर की क्षमताएँ**: +- उन्नत AI आर्किटेक्चर (एजेंट, मल्टी-एजेंट सिस्टम) का अन्वेषण करने के लिए तैयार +- वेक्टर डेटाबेस के साथ RAG सिस्टम बनाने के लिए तैयार +- मल्टी-मोडल AI एप्लिकेशन बनाने के लिए सुसज्जित +- AI एप्लिकेशन के पैमाने और अनुकूलन के लिए आधार स्थापित ## सारांश +🎉 आपने AI फ्रेमवर्क विकास के मूल सिद्धांतों पर महारत हासिल कर ली है और LangChain का उपयोग करके परिष्कृत AI एप्लिकेशन बनाना सीखा है। जैसे एक व्यापक प्रशिक्षुता पूरा करते हैं, आपने एक महत्वपूर्ण कौशल उपकरण सेट हासिल किया है। आइए समीक्षा करें आपने क्या-क्या हासिल किया है। + +### आपने क्या सीखा + +**मूल फ्रेमवर्क अवधारणाएँ:** +- **फ्रेमवर्क लाभ**: फ्रेमवर्क कब चुनना है API कॉल्स पर +- **LangChain मूल बातें**: AI मॉडल कनेक्शन सेटअप और कॉन्फ़िगरेशन +- **संदेश प्रकार**: संरचित बातचीत के लिए `SystemMessage`, `HumanMessage`, और `AIMessage` का उपयोग + +**उन्नत विशेषताएं:** +- **टूल कॉलिंग**: बढ़ी हुई AI क्षमताओं के लिए कस्टम टूल बनाना और एकीकृत करना +- **बातचीत मेमोरी**: कई बातचीत चक्रों में संदर्भ बनाए रखना +- **स्ट्रीमिंग प्रतिक्रिया**: रियल-टाइम उत्तर वितरण लागू करना +- **प्रॉम्प्ट टेम्प्लेट्स**: पुन: उपयोगी, गतिशील प्रॉम्प्ट बनाना +- **संरचित आउटपुट**: AI प्रतिक्रियाओं की संगति और पार्सिंग में सरलता सुनिश्चित करना +- **एंबेडिंग्स**: सेमांटिक सर्च और दस्तावेज़ प्रसंस्करण क्षमताएं बनाना + +**प्रायोगिक अनुप्रयोग:** +- **पूर्ण ऐप बनाना**: अनेक सुविधाओं को मिलाकर उत्पादन-तैयार एप्लिकेशन बनाना +- **त्रुटि प्रबंधन**: मजबूत त्रुटि प्रबंधन और सत्यापन लागू करना +- **टूल एकीकरण**: AI क्षमताओं को बढ़ाने वाले कस्टम टूल बनाना + +### मुख्य निष्कर्ष + +> 🎯 **याद रखें**: LangChain जैसे AI फ्रेमवर्क आपकी जटिलताओं को छिपाने वाले, सुविधाओं से भरपूर सबसे अच्छे दोस्त हैं। जब आपको बातचीत की स्मृति, टूल कॉलिंग, या कई AI मॉडलों के साथ कार्य करने की ज़रूरत हो तो ये आदर्श हैं। + +**AI एकीकरण के लिए निर्णय फ्रेमवर्क:** + +```mermaid +flowchart TD + A[एआई एकीकरण की आवश्यकता] --> B{सरल एकल प्रश्न?} + B -->|हाँ| C[प्रत्यक्ष एपीआई कॉल] + B -->|नहीं| D{वार्तालाप मेमोरी चाहिए?} + D -->|नहीं| E[एसडीके एकीकरण] + D -->|हाँ| F{उपकरण या जटिल विशेषताएं चाहिए?} + F -->|नहीं| G[मूल सेटअप के साथ फ्रेमवर्क] + F -->|हाँ| H[पूर्ण फ्रेमवर्क कार्यान्वयन] + + C --> I[एचटीटीपी अनुरोध, न्यूनतम निर्भरताएं] + E --> J[प्रदाता एसडीके, मॉडल-विशिष्ट] + G --> K[लैंगचेन मूल चैट] + H --> L[लैंगचेन उपकरणों, मेमोरी, एजेंट्स के साथ] +``` +### अब आप कहाँ जाएँ? + +**अभी से निर्माण शुरू करें:** +- इन अवधारणाओं को लें और कुछ ऐसा बनाएं जो आपको उत्साहित करे! +- LangChain के माध्यम से विभिन्न AI मॉडलों के साथ खेलें - यह AI मॉडल्स का एक खेल का मैदान है +- ऐसे टूल बनाएं जो आपके कार्य या परियोजनाओं में वास्तविक समस्याओं को हल करें + +**अगले स्तर के लिए तैयार हैं?** +- **AI एजेंट्स**: ऐसे AI सिस्टम बनाएं जो जटिल कार्यों की योजना बना और उन्हें स्वयं निष्पादित कर सकें +- **RAG (रिट्रीवल-अगमेंटेड जनरेशन)**: AI को अपनी ज्ञान आधार के साथ मिलाएं ताकि सुपर-पावर एप्लिकेशन बन सकें +- **मल्टी-मोडल AI**: टेक्स्ट, इमेज, और ऑडियो को एक साथ संभालें - संभावनाएँ अनंत हैं! +- **प्रोडक्शन डिप्लॉयमेंट**: सीखें कि अपने AI ऐप्स को कैसे स्केल करें और उन्हें वास्तविक दुनिया में मॉनिटर करें + +**समुदाय में शामिल हों:** +- LangChain समुदाय अद्यतित रहने और सर्वोत्तम प्रथाओं को सीखने के लिए शानदार है +- GitHub Models आपको अत्याधुनिक AI क्षमताओं तक पहुंच देता है - प्रयोग करने के लिए उपयुक्त +- विभिन्न उपयोग मामलों के साथ अभ्यास जारी रखें - हर परियोजना आपको कुछ नया सिखाएगी + +आपके पास अब बुद्धिमान, संवादात्मक एप्लिकेशन बनाने का ज्ञान है जो लोगों को वास्तविक समस्याओं को हल करने में मदद कर सकते हैं। जैसे पुनर्जागरण काल के कारीगरों ने कलात्मक दृष्टि को तकनीकी कौशल के साथ जोड़ा, आप भी अब AI क्षमताओं को व्यावहारिक अनुप्रयोग के साथ जोड़ सकते हैं। सवाल यह है कि आप क्या बनाएंगे? 🚀 + +## GitHub Copilot एजेंट चुनौती 🚀 + +एजेंट मोड का उपयोग करके निम्न चुनौती पूरी करें: + +**विवरण:** एक उन्नत AI-संचालित कोड समीक्षा सहायक बनाएं जो अनेक LangChain सुविधाओं को संयोजित करता है जिसमें टूल कॉलिंग, संरचित आउटपुट, और बातचीत की स्मृति शामिल हैं, ताकि कोड सबमिशन पर व्यापक प्रतिक्रिया दी जा सके। + +**प्रॉम्प्ट:** एक CodeReviewAssistant क्लास बनाएँ जो निम्नलिखित लागू करे: +1. कोड जटिलता का विश्लेषण करने और सुधार सुझाव देने के लिए एक टूल +2. कोड को सर्वश्रेष्ठ प्रथाओं के खिलाफ जांचने के लिए एक टूल +3. सुसंगत समीक्षा स्वरूप के लिए Pydantic मॉडलों का उपयोग कर संरचित आउटपुट +4. समीक्षा सत्रों को ट्रैक करने के लिए बातचीत की स्मृति +5. एक मुख्य चैट इंटरफ़ेस जो कोड प्रस्तुतियों को संभाल सके और विस्तृत, कार्यरत प्रतिक्रिया प्रदान करे + +सहायक को एक सत्र में कई प्रोग्रामिंग भाषाओं में कोड की समीक्षा करने में सक्षम होना चाहिए, कई कोड प्रस्तुतियों में संदर्भ बनाए रखना चाहिए, और सारांश स्कोर और विस्तार से सुधार सुझाव दोनों प्रदान करने चाहिए। + +[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) के बारे में अधिक जानने के लिए यहाँ देखें। + --- -**अस्वीकरण**: -यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं। \ No newline at end of file + +**अस्वीकरण**: +यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनूदित किया गया है। हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या असंगतियाँ हो सकती हैं। मूल भाषा में दस्तावेज़ को अधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं। + \ No newline at end of file