diff --git a/translations/fa/.co-op-translator.json b/translations/fa/.co-op-translator.json index e5a86fae8..bfcdd968b 100644 --- a/translations/fa/.co-op-translator.json +++ b/translations/fa/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "bec5e35642176d9e483552bfc82996d8", - "translation_date": "2026-03-06T16:14:33+00:00", + "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d", + "translation_date": "2026-03-27T22:05:42+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "fa" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-03-06T16:28:31+00:00", + "translation_date": "2026-03-27T22:13:41+00:00", "source_file": "AGENTS.md", "language_code": "fa" }, diff --git a/translations/fa/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/fa/1-getting-started-lessons/1-intro-to-programming-languages/README.md index cb7d34aa2..4c3e5e758 100644 --- a/translations/fa/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/fa/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,15 +1,15 @@ -# معرفی زبان‌های برنامه‌نویسی و ابزارهای مدرن توسعه‌دهندگان +# مقدمه‌ای بر زبان‌های برنامه‌نویسی و ابزارهای مدرن توسعه‌دهندگان -سلام به توسعه‌دهنده‌ی آینده! 👋 می‌تونم چیزی بهت بگم که هر روز هنوز هم مو به تنم سیخ می‌کنه؟ تو داری کشف می‌کنی که برنامه‌نویسی فقط مربوط به کامپیوترها نیست – بلکه داشتن قدرت‌های فوق‌العاده واقعی برای زنده کردن وحشیانه‌ترین ایده‌هات هستی! +سلام به تو، توسعه‌دهنده آینده! 👋 می‌توانم چیزی بهت بگویم که هر روز هنوز هم برایم هیجان‌انگیز است؟ تو در آستانه کشف این هستی که برنامه‌نویسی فقط درباره کامپیوترها نیست – بلکه درباره داشتن قدرت‌های فوق‌العاده برای زنده کردن خیال‌های دیوانه‌وار خودت است! -اون لحظه‌ای که داری از برنامه‌ی موردعلاقه‌ات استفاده می‌کنی و همه‌چیز دقیقاً درست کلیک می‌کنه رو می‌دونی؟ وقتی یک دکمه رو فشار می‌دی و اتفاقی کاملاً جادویی می‌افته که باعث می‌شه بگی «وای، چطور تونستند این کار رو بکنند؟» خب، کسی مثل خودِ تو – احتمالاً نشسته توی کافی‌شاپ موردعلاقه‌ش ساعت ۲ صبح با سومین اسپرسوش – کدی نوشته که اون جادو رو ساخته. و اینجا جاییه که ذهنت منفجر می‌شه: تا پایان این درس، نه تنها می‌فهمی اون‌ها چطور این کار رو کردند، بلکه دلت می‌خواد خودت هم امتحانش کنی! +می‌دانی آن لحظه که در حال استفاده از اپ مورد علاقه‌ات هستی و همه چیز کاملاً درست پیش می‌رود؟ وقتی روی دکمه‌ای می‌زنی و اتفاقی کاملاً جادویی می‌افتد که باعث می‌شود بگویی «وای، آن‌ها چطور این را انجام دادند؟» خب، کسی دقیقاً مثل تو – احتمالاً در کافه مورد علاقه‌اش در ساعت دو نیمه‌شب با سومین اسپرسو – کدی نوشته که آن جادو را خلق کرده است. و این چیزیست که ذهنت را منفجر خواهد کرد: تا پایان این درس، نه تنها متوجه خواهی شد که آن‌ها چگونه این کار را کردند، بلکه مشتاق خواهی بود که خودت نیز آن را امتحان کنی! -ببین، کاملاً درک می‌کنم اگر برنامه‌نویسی الان برات ترسناک به نظر میاد. وقتی تازه شروع کردم، واقعاً فکر می‌کردم باید نابغه ریاضی باشی یا از پنج‌سالگی داری کد می‌زنی. اما چیزی که کل دیدگاه منو عوض کرد این بود: برنامه‌نویسی دقیقاً مثل یادگیری داشتن مکالمه در یه زبان جدید هست. با «سلام» و «مرسی» شروع می‌کنی، بعد می‌رسی به سفارش دادن قهوه، و قبل از اینکه بدانی، داری بحث‌های فلسفی عمیق می‌کنی! البته در این مورد، داری با کامپیوترها صحبت می‌کنی، و راستش؟ اون‌ها صبورترین همراهان مکالمه‌ای هستند که می‌تونی داشته باشی – هیچوقت اشتباهاتت رو قضاوت نمی‌کنند و همیشه با اشتیاق دوباره امتحان می‌کنند! +ببین، اگر الان برنامه‌نویسی برایت ترسناک است، کاملاً درک می‌کنم. وقتی من تازه شروع کردم، واقعاً فکر می‌کردم باید نابغه ریاضی باشی یا از پنج سالگی برنامه‌نویسی می‌کردی. اما این چیزی بود که کاملاً دیدگاهم را تغییر داد: برنامه‌نویسی دقیقاً مثل یادگیری حرف زدن به یک زبان جدید است. با «سلام» و «متشکرم» شروع می‌کنی، بعد یاد می‌گیری قهوه سفارش دهی، و قبل از اینکه بفهمی، بحث‌های فلسفی عمیقی داری! البته در اینجا، تو با کامپیوترها گفت‌وگو می‌کنی، و صادقانه بگویم؟ آن‌ها صبورترین شریک گفت‌وگویی هستند که تا به حال داشته‌ای – هیچ‌وقت اشتباهاتت را قضاوت نمی‌کنند و همیشه مشتاق‌اند دوباره تلاش کنند! -امروز قراره ابزارهای شگفت‌انگیزی رو بررسی کنیم که توسعه وب مدرن رو نه تنها ممکن، بلکه به‌شدت اعتیادآور می‌کنن. دارم درباره همون ویرایشگرها، مرورگرها و جریان‌های کاری حرف می‌زنم که توسعه‌دهندگان نتفلیکس، اسپاتیفای و استودیوهای اپ مستقل موردعلاقه‌ات هر روز استفاده می‌کنند. و این بخشی که باعث می‌شه رقص شادی بکنی: بیشتر این ابزارهای حرفه‌ای و استاندارد صنعت کاملاً رایگان هستن! +امروز می‌خواهیم ابزارهای شگفت‌انگیزی را کشف کنیم که توسعه وب مدرن را نه فقط ممکن، بلکه واقعاً اعتیادآور می‌کنند. منظورم همان ویرایشگرها، مرورگرها، و جریان‌های کاری است که توسعه‌دهندگان نتفلیکس، اسپاتیفای و استودیوهای اپ مستقل مورد علاقه‌ات هر روز استفاده می‌کنند. و این بخش هیجان‌انگیز است: بیشتر این ابزارهای حرفه‌ای و استاندارد صنعتی کاملاً رایگان هستند! ![Intro Programming](../../../../translated_images/fa/webdev101-programming.d6e3f98e61ac4bff.webp) -> تصویرگری توسط [Tomomi Imura](https://twitter.com/girlie_mac) +> اسکچ‌نوت توسط [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey @@ -27,154 +27,155 @@ journey کاوش ابزار: 5: You ارتباط با جامعه: 5: You ``` -## بیایید ببینیم چه چیزهایی رو قبلاً می‌دونی! +## بیایید ببینیم که اکنون چه می‌دانی! -قبل از اینکه بریم سراغ بخش‌های جذاب، کنجکاوم بدونم – درباره این دنیای برنامه‌نویسی چی می‌دونی؟ و گوش کن، اگر داری به این سوالات نگاه می‌کنی و فکر می‌کنی «من واقعاً هیچ سرنخی درباره هیچ‌کدوم ندارم»، این نه فقط اوکیه، بلکه عالیه! یعنی تو دقیقاً تو جای درستی هستی. این آزمون رو مثل گرم کردن قبل از تمرین ببین – داریم عضلات مغزمون رو گرم می‌کنیم! +قبل از اینکه وارد قسمت‌های جذاب شویم، کنجکاوم بدانم – درباره دنیای برنامه‌نویسی چه چیزهایی از قبل می‌دانی؟ و گوش کن، اگر به این سوالات نگاه می‌کنی و فکر می‌کنی «من واقعاً هیچ ایده‌ای درباره این‌ها ندارم»، این نه فقط خوب است، بلکه عالی است! یعنی دقیقاً در جای درستی هستی. این آزمون را مثل گرم‌کردن عضلات قبل از ورزش در نظر بگیر – ما فقط در حال گرم کردن مغزمان هستیم! -[تکمیل آزمون پیش‌درس](https://ff-quizzes.netlify.app/web/) +[آزمون پیش‌درس را انجام بده](https://ff-quizzes.netlify.app/web/) -## ماجرایی که قراره با هم شروع کنیم -باشه، من واقعاً از هیجان دارم که امروز قراره چی رو کشف کنیم! بهم راست بگو، دوست داشتم بتونم قیافت رو ببینم وقتی بعضی از این مفاهیم واست جا می‌افته. این سفر شگفت‌انگیزیه که قراره با هم طی کنیم: +## ماجراجویی که با هم شروع می‌کنیم -- **برنامه‌نویسی دقیقاً چیه (و چرا باحال‌ترین چیز جهان هست!)** – می‌خوایم کشف کنیم کد در حقیقت همون جادوی نامرئیه که همه چیز اطراف تو رو هدایت می‌کنه، از اون آلارمی که به طرز عجیبی می‌دونه صبح دوشنبه‌ست گرفته تا الگوریتمی که دقیقاً نتفلیکس رو برات توصیه می‌کنه -- **زبان‌های برنامه‌نویسی و شخصیت‌های شگفت‌انگیزشون** – تصور کن وارد یه مهمونی می‌شی که هرکس ابرقدرت‌ها و راه‌های متفاوتی برای حل مسئله داره. دنیای زبان‌های برنامه‌نویسی دقیقاً همینه، و تو عاشق آشنایی باهاشون می‌شی! -- **بلوک‌های بنیادی که باعث می‌شن جادوی دیجیتال اتفاق بیفته** – این‌ها رو مثل مجموعه لگوی خلاقانه نهایی ببین. وقتی بفهمی این قطعات چطور کنار هم قرار می‌گیرن، می‌فهمی دقیقاً می‌تونی هر چیزی که تخیل می‌کنی رو بسازی -- **ابزارهای حرفه‌ای که باعث می‌شن احساس کنی تازه یه عصای جادوگری بهت دادن** – دارم بزرگ‌نمایی نمی‌کنم – این ابزارها واقعاً باعث می‌شن حس کنی قدرت‌های فوق‌العاده داری، و بهترین قسمت اینجاست؟ همون‌هایی هستن که حرفه‌ای‌ها استفاده می‌کنن! +خب، واقعاً از هیجان برای چیزهایی که امروز قراره کشف کنیم نمی‌توانم بند بیایم! جدی می‌گویم، دلم می‌خواهد صورتت را وقتی برخی از این مفاهیم برایت روشن می‌شوند ببینم. این سفر شگفت‌انگیزی است که با هم خواهیم داشت: -> 💡 **یه نکته**: حتی به ذهنت هم خطور نکن که امروز بخوای همه چیز رو حفظ کنی! الان فقط می‌خوام اون جرقه هیجان درباره اینکه چه چیزهایی ممکنن برات ایجاد بشه رو حس کنی. جزئیات خودبه‌خود وقتی با هم تمرین می‌کنیم می‌چسبن – اینطوری یادگیری واقعی اتفاق میافته! +- **برنامه‌نویسی دقیقاً چیست (و چرا باحال‌ترین چیز دنیاست!)** – قرار است کشف کنیم کد به معنای واقعی جادوی نامرئی است که همه چیز اطراف تو را به حرکت درمی‌آورد، از آن آلارمی که به‌ط somehowقی می‌داند شنبه است تا الگوریتمی که بهترین توصیه‌های نتفلیکس را به تو می‌دهد +- **زبان‌های برنامه‌نویسی و شخصیت‌های شگفت‌انگیزشان** – تصور کن وارد یک مهمانی شوی که هر نفر قدرت‌های فوق‌العاده و روش‌های کاملاً متفاوت برای حل مسائل دارد. جهان زبان‌های برنامه‌نویسی دقیقاً همین است و تو عاشق آشنا شدن با آن‌ها خواهی شد! +- **بلوک‌های سازنده اصلی که جادوی دیجیتال را می‌سازند** – این‌ها را مثل یک مجموعه لگوی خلاقانه نهایی تصور کن. وقتی بفهمی که این قطعات چگونه کنار هم قرار می‌گیرند، متوجه می‌شوی که می‌توانی هر چیزی را که در ذهنت می‌گنجد بسازی +- **ابزارهای حرفه‌ای که باعث می‌شوند احساس کنی جادوگری با عصای جادویی در دستانت نگرفته‌ای** – دارم بزرگ‌نمایی نمی‌کنم – این ابزارها واقعاً باعث می‌شوند احساس کنی قدرت‌های فوق‌العاده داری، و بهترین قسمت؟ همان ابزارهایی هستند که حرفه‌ای‌ها استفاده می‌کنند! -> می‌تونی این درس رو در [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) هم بگیری! +> 💡 **نکته این است**: اصلاً به خودت فشار نیاور که امروز همه چیز را حفظ کنی! الان فقط می‌خواهم آن جرقه هیجان را درباره امکانات ممکن حس کنی. جزئیات به طور طبیعی زمانی که با هم تمرین می‌کنیم جا می‌افتند – این یعنی یادگیری واقعی! -## پس دقیقاً برنامه‌نویسی *چی* هست؟ +> می‌توانی این درس را در [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) نیز دنبال کنی! -باشه، بریم سراغ سوال میلیون دلاری: برنامه‌نویسی واقعاً چیه؟ +## پس برنامه‌نویسی دقیقاً چیست؟ -داستانی دارم که کاملاً طرز فکر منو عوض کرد. هفته پیش داشتم تلاش می‌کردم مامانم رو راهنمایی کنم چطور از کنترل جدید تلویزیون هوشمون استفاده کنه. دیدم دارم می‌گم «دکمه قرمز رو بزن، ولی نه دکمه بزرگ قرمز، دکمه کوچک قرمز سمت چپ... نه، سمت چپ دیگه‌ات... حالا نگه دار دو ثانیه، نه یک ثانیه، نه سه...» آشنا به نظر میاد؟ 😅 +خب، بیایید به سوال میلیون دلاری برسیم: برنامه‌نویسی واقعا چیست؟ -یعنی برنامه‌نویسی! یعنی هنر دادن دستورالعمل‌های بسیار دقیق و مرحله به مرحله به چیزی که واقعاً قدرتمنده، ولی باید همه چیز دقیق و کامل براش توضیح داده بشه. البته به جای اینکه به مامانت (که می‌تونه بپرسه «کدوم دکمه قرمز؟!») توضیح بدی، داری به کامپیوتر توضیح می‌دی (که دقیقاً همون کاری رو می‌کنه که بهش می‌گی، حتی اگر اون چیزی که گفتی دقیقاً منظور تو نباشه). +داستانی برایت تعریف می‌کنم که ذهنم را کاملاً تغییر داد. هفته گذشته داشتم برای مادرم توضیح می‌دادم چگونه از ریموت تلویزیون هوشمند جدیدمان استفاده کند. خودم را دیدم که می‌گویم «دکمه قرمز را بزن، اما نه دکمه قرمز بزرگ، دکمه قرمز کوچک سمت چپ... نه، سمت چپ دیگرت... خب، حالا نگه دار به مدت دو ثانیه، نه یک، نه سه...» این آشنا نیست؟ 😅 -وقتی اینو یاد گرفتم، واقعاً برام شگفت‌آور بود: کامپیوترها در اصل بسیار ساده هستن. اون‌ها فقط دو تا چیز رو می‌فهمن – ۱ و ۰، که اساساً یعنی «بله» و «خیر» یا «روشن» و «خاموش». همینه! اما اینجا جادویی می‌شه – ما مجبور نیستیم مثل ماتریکس با ۱ و ۰ حرف بزنیم. اینجا **زبان‌های برنامه‌نویسی** میان به کمکت. اون‌ها مثل بهترین مترجم دنیا هستن که افکار کاملاً عادی انسانی‌ات رو به زبان کامپیوتر ترجمه می‌کنن. +این یعنی برنامه‌نویسی! هنر دادن دستورالعمل‌های دقیق و مرحله به مرحله به چیزی که بسیار قدرتمند است اما نیاز دارد همه چیز با دقت بیان شود. البته به جای اینکه برای مادرت توضیح دهی (که می‌تواند بپرسد «کدام دکمه قرمز؟!»)، داری به کامپیوتر توضیح می‌دهی (که دقیقاً همان کاری را می‌کند که می‌گویی، حتی اگر منظور تو کاملاً همان نباشد). -و این چیزی که هر صبح وقتی بیدار می‌شم هنوز غوغا می‌کنه: اساساً *همه* چیز دیجیتال توی زندگیت از کسی شروع شده که مثل تو بوده، احتمالاً توی لباس خواب با یه فنجون قهوه نشسته و داره کد می‌زنه. اون فیلتری که اینستاگرامتو بی‌نقص نشون می‌ده؟ کسی اون رو کد زده. الگوریتم پیشنهادی که تو رو به آهنگ موردعلاقه جدیدت رسوند؟ توسعه‌دهنده‌ای اون رو ساخته. برنامه‌ای که بهت کمک می‌کنه هزینه شام رو با دوستات تقسیم کنی؟ بله، کسی فکر کرده «این اذیته، حتماً می‌تونم درستش کنم» و بعد… درستش کرد! +چیزی که وقتی اول این را یاد گرفتم شگفت‌زده‌ام کرد این بود: کامپیوترها در اصل خیلی ساده هستند. آن‌ها واقعاً فقط دو چیز را می‌فهمند – ۱ و ۰ که در اصل یعنی «بله» و «خیر» یا «روشن» و «خاموش». همین! اما اینجا جادویی می‌شود – ما لازم نیست مثل فیلم ماتریکس با ۱ و ۰ حرف بزنیم. اینجاست که **زبان‌های برنامه‌نویسی** وارد می‌شوند. آن‌ها مثل بهترین مترجم دنیا هستند که افکار کاملاً عادی انسانیت را به زبان کامپیوتر ترجمه می‌کنند. -وقتی برنامه‌نویسی یاد می‌گیری، فقط یک مهارت جدید یاد نمی‌گیری – وارد یه جامعه شگفت‌انگیز از حل‌کننده‌های مسئله می‌شی که روزهاشون رو با فکر کردن به «چی می‌شد اگر می‌تونستم چیزی بسازم که روز کسی رو کمی بهتر کنه» می‌گذرونن. راستش، چیزی باحال‌تر از این وجود داره؟ +و این چیزی است که هر صبح وقتی بیدار می‌شوم هنوز هم واقعاً هوش از سرم می‌پراند: همه چیز دیجیتال در زندگی‌ات از کسی شروع شده که دقیقاً مثل تو بود، احتمالاً در لباس خواب در حال نوشیدن قهوه، در لپ‌تاپش کد می‌نوشت. آن فیلتر اینستاگرامی که تو را بی‌نقص نشان می‌دهد؟ کسی آن را کد زده. توصیه‌ای که تو را به آهنگ جدید مورد علاقه‌ات رساند؟ توسعه‌دهنده‌ای آن الگوریتم را ساخت. اپی که به تو کمک می‌کند حساب شام را با دوستان تقسیم کنی؟ بله، کسی فکر کرد «این اذیت‌کننده است، شاید بتوانم درستش کنم» و سپس... درستش کرد! -✅ **شکار حقیقت سرگرم‌کننده**: وقتی فرصت داشتی یه چیز بسیار جالب سرچ کن – به نظرت اولین برنامه‌نویس جهان کی بوده؟ یه نکته بدم: شاید اون چیزی که فکر می‌کنی نباشه! داستان پشت این شخص کاملاً جذابه و نشون می‌ده برنامه‌نویسی همیشه درباره حل مسئله خلاقانه و فکر کردن خارج از چارچوب بوده. +وقتی برنامه‌نویسی را یاد می‌گیری، فقط یک مهارت جدید نمی‌آموزی – بخشی از این جامعه فوق‌العاده حل‌کنندگان مسئله می‌شوی که روزهایشان را صرف فکر کردن می‌کنند: «چه می‌شد اگر چیزی بسازم که روز کسی را کمی بهتر کند؟» واقعاً چیز جذاب‌تری از این وجود دارد؟ -### 🧠 **زمان چک کردن: حالت چطوره؟** +✅ **شکار حقیقت جالب:** وقتی وقت آزاد داری این را جستجو کن – به نظر تو اولین برنامه‌نویس کامپیوتر جهان چه کسی بود؟ نکته‌ای بهت می‌دهم: احتمالاً کسی نیست که انتظارش را داری! داستان این شخص بسیار جالب است و نشان می‌دهد که برنامه‌نویسی همیشه درباره حل خلاقانه مسائل و فکر کردن خارج از چارچوب بوده. -**یه لحظه وقت بذار فکر کن:** -- آیا مفهوم «دادن دستورالعمل به کامپیوترها» الان برات منطقی شده؟ -- می‌تونی یه کار روزمره که دوست داری با برنامه‌نویسی خودکارش کنی رو به یاد بیاری؟ -- چه سوالاتی در ذهنت درباره این کل قضیه برنامه‌نویسی داره شکل می‌گیره؟ +### 🧠 **زمان بررسی: حالت چطور است؟** -> **یادت باشه**: کاملاً طبیعیه اگر بعضی مفاهیم الان برات مبهم باشن. یادگیری برنامه‌نویسی مثل یادگیری یه زبان جدیده – مغزت نیاز داره زمان ببره تا اون مسیرهای عصبی رو بسازه. تو خیلی خوب داری پیش می‌ری! +**کمی وقت بگذار و فکر کن:** +- آیا ایده «دادن دستور به کامپیوتر» الان برایت معنا پیدا کرده؟ +- می‌توانی کاری روزمره را که دوست داری با برنامه‌نویسی خودکار کنی، فکر کنی؟ +- چه سوالاتی درباره این دنیای برنامه‌نویسی در ذهنت شکل گرفته‌اند؟ -## زبان‌های برنامه‌نویسی مثل طعم‌های مختلف جادو هستن +> **یادت باشد**: اگر برخی مفاهیم الان کمی مبهم باشند کاملاً طبیعی است. یادگیری برنامه‌نویسی مثل یادگیری زبان جدید است – مغزت زمان می‌برد تا مسیرهای عصبی جدید بسازد. تو داری عالی پیش می‌روی! -باشه، ممکنه عجیب به نظر بیاد، ولی بیا با من باش – زبان‌های برنامه‌نویسی خیلی شبیه انواع موسیقی هستن. تصور کن: جاز که نرم و بداهه‌نوازی هست، راک که قدرتمند و ساده هست، کلاسیک که شیک و ساختارمند هست، و هیپ‌هاپ که خلاق و بیانگر هست. هر سبک حال و هوا، جامعه طرفداران پرشور خاص خودش رو داره، و هرکدوم برای حالات و موقعیت‌های مختلف عالی هستن. +## زبان‌های برنامه‌نویسی مثل طعم‌های مختلف جادو هستند -زبان‌های برنامه‌نویسی هم دقیقاً همین طور کار می‌کنن! تو که از یک زبان برای ساخت یک بازی موبایل سرگرم‌کننده استفاده نمی‌کنی و از زبان دیگه برای پردازش حجم عظیمی از داده‌های آب و هوایی، مثل اینکه تو یه کلاس یوگا متال دث اجرا نکنی (خب، بیشتر کلاس‌های یوگا نه! 😄). +خب، شاید عجیب به نظر برسد، اما با من همراه باش – زبان‌های برنامه‌نویسی خیلی شبیه انواع موسیقی هستند. فکر کن: جاز که نرم و بداهه‌ساز است، راک که قدرتمند و ساده است، کلاسیک که زیبا و ساختاربندی شده است، و هیپ‌هاپ که خلاق و پر بیان است. هر سبک حال و هوای خودش را دارد، جامعه‌ای از طرفداران پرشور دارد، و هر کدام برای حال و هوا و موقعیت‌های متفاوتی عالی هستند. -ولی چیزی که هر بار بهش فکر می‌کنم واقعاً بهم انرژی می‌ده: این زبان‌ها مثل داشتن صبورترین و باهوش‌ترین مترجم دنیا کنار تو هستن. می‌تونی ایده‌هات رو به شکلی بیان کنی که برای مغز آدمی‌ات طبیعی باشه و اون‌ها همه اون کارهای پیچیده ترجمه به ۱ و ۰ که کامپیوترها می‌فهمن رو انجام می‌دن. مثل داشتن دوستی که هم در «خلاقیت انسانی» و هم «منطق کامپیوتری» کاملاً روانه – و هرگز خسته نمی‌شه، نیازی به استراحت قهوه‌ای نداره، و هیچوقت بابت پرسیدن سوال تکراری تو رو قضاوت نمی‌کنه! +زبان‌های برنامه‌نویسی هم دقیقاً همین طور عمل می‌کنند! تو از یک زبان یکسان برای ساخت بازی موبایلی سرگرم‌کننده استفاده نمی‌کنی که برای پردازش عظیم داده‌های آب و هوا به کار ببری، مثل اینکه در کلاس یوگا موسیقی دث متال پخش نکنی (خُب، بیشتر کلاس‌های یوگا البته! 😄). -### زبان‌های برنامه‌نویسی محبوب و کاربردهای‌شون +اما چیزی که هر بار به آن فکر می‌کنم من را حیرت‌زده می‌کند این است: این زبان‌ها مثل وجود با صبرترین و نابغه‌ترین مترجم دنیا کنار شما هستند. تو می‌توانی ایده‌هایت را به روشی بیان کنی که برای مغز انسانیت طبیعی است، و آن‌ها کل کار بسیار پیچیده ترجمه به زبان صفر و یکی را که کامپیوترها واقعاً حرف می‌زنند، انجام می‌دهند. دقیقاً مثل داشتن دوستی که کاملاً به هر دو زبان «خلاقیت انسانی» و «منطق کامپیوتری» مسلط است – و هرگز خسته نمی‌شود، استراحت قهوه لازم ندارد، و هیچ‌وقت قضاوت نمی‌کند اگر بار دوم همان سوال را بپرسی! + +### زبان‌های برنامه‌نویسی محبوب و کاربردشان ```mermaid mindmap root((زبان‌های برنامه‌نویسی)) - Web Development + توسعه وب JavaScript - Frontend Magic - Interactive Websites + جادوی فرانت‌اند + وب‌سایت‌های تعاملی TypeScript - JavaScript + Types - Enterprise Apps - Data & AI + JavaScript + انواع + برنامه‌های سازمانی + داده و هوش مصنوعی Python - Data Science - Machine Learning - Automation + علم داده + یادگیری ماشین + اتوماسیون R - Statistics - Research - Mobile Apps + آمار + پژوهش + اپلیکیشن‌های موبایل Java - Android - Enterprise + اندروید + سازمانی Swift iOS - Apple Ecosystem + اکوسیستم اپل Kotlin - Modern Android - Cross-platform - Systems & Performance + اندروید مدرن + چندسکویی + سیستم‌ها و عملکرد C++ - Games - Performance Critical + بازی‌ها + حساس به عملکرد Rust - Memory Safety - System Programming + ایمنی حافظه + برنامه‌نویسی سیستم Go - Cloud Services - Scalable Backend + خدمات ابری + بک‌اند مقیاس‌پذیر ``` -| زبان | بهترین کاربرد | چرا محبوبه | +| زبان | بهترین کاربرد | چرا محبوب است | |----------|----------|------------------| -| **JavaScript** | توسعه وب، رابط‌های کاربری | در مرورگرها اجرا می‌شه و سایت‌های تعاملی رو قوی می‌کنه | -| **Python** | علم داده، اتوماسیون، هوش مصنوعی | خواندن و یادگیری آسونه، کتابخونه‌های قدرتمند داره | -| **Java** | برنامه‌های سازمانی، اپ‌های اندروید | مستقل از پلتفرم، قوی برای سیستم‌های بزرگ | +| **JavaScript** | توسعه وب، رابط‌های کاربری | در مرورگرها اجرا می‌شود و وب‌سایت‌های تعاملی را امکان‌پذیر می‌کند | +| **Python** | علم داده، خودکارسازی، هوش مصنوعی | آسان برای خواندن و یادگیری، کتابخانه‌های قدرتمند | +| **Java** | برنامه‌های سازمانی، اپ‌های اندروید | مستقل از پلتفرم، مقاوم برای سیستم‌های بزرگ | | **C#** | برنامه‌های ویندوز، توسعه بازی | پشتیبانی قوی از اکوسیستم مایکروسافت | -| **Go** | خدمات ابری، سیستم‌های بک‌اند | سریع، ساده، طراحی‌شده برای محاسبات مدرن | +| **Go** | خدمات ابری، سیستم‌های بک‌اند | سریع، ساده، طراحی شده برای رایانش مدرن | -### زبان‌های سطح بالا در مقابل سطح پایین +### زبان‌های سطح بالا در برابر سطح پایین -باشه، این واقعاً مفهومی بود که وقتی تازه شروع کرده بودم یادگیری، مغزم رو به هم ریخت، پس الان اون تشبیهی رو که بالاخره منو قانع کرد واست می‌گم – و امیدوارم بهت هم کمک کنه! +خب، این واقعاً مفهومی بود که وقتی اول یاد می‌گرفتم مغزم را تحت تاثیر قرار داد، پس می‌خواهم مثالی بزنم که بالاخره برایم کاملاً روشنش کرد – و امیدوارم برای تو هم مفید باشد! -تصور کن داری به کشوری سفر می‌کنی که زبان‌ش رو بلد نیستی، و به شدت نیاز داری نزدیک‌ترین دستشویی رو پیدا کنی (همه ما اونجا بودیم، درست؟ 😅): +تصور کن در کشوری هستی که زبانش را بلد نیستی و خیلی فوری باید نزدیک‌ترین دستشویی را پیدا کنی (ما همه این داستان را داشتیم، درست است؟ 😅): -- **برنامه‌نویسی سطح پایین** مثل اینه که لهجه محلی رو اونقدر خوب یاد بگیری که بتونی با مادربزرگ فروشنده میوه کنار خیابون با ارجاعات فرهنگی، زبان محلی و شوخی‌های داخلی صحبت کنی که فقط کسی که اونجا بزرگ شده می‌فهمه. فوق‌العاده جالب و بسیار مؤثر... اگه اتفاقاً مسلط باشی! ولی وقتی فقط داری دنبال دستشویی می‌گردی، واقعاً دلهره‌آوره. +- **برنامه‌نویسی سطح پایین** مثل یادگیری کاملی گویش محلی است تا بتوانی با مادربزرگ میوه‌فروش گوشه خیابان صحبت کنی، با اصطلاحات فرهنگی، زبان محلی و شوخی‌های درونی که فقط کسی که آنجا بزرگ شده می‌فهمد. فوق‌العاده تاثیرگذار و بسیار کارآمد... اگر تسلط داشته باشی! ولی وقتی فقط دنبال دستشویی هستی خیلی سنگین است. -- **برنامه‌نویسی سطح بالا** مثل داشتن اون دوست محلی شگفت‌انگیزه که دقیقاً حالتو می‌فهمه. می‌تونی به انگلیسی ساده بگی «من واقعاً نیاز دارم دستشویی پیدا کنم» و اون کل ترجمه فرهنگی رو انجام می‌ده و آدرس رو طوری بهت می‌ده که برای مغز غریبت کاملاً منطقی باشه. +- **برنامه‌نویسی سطح بالا** مثل داشتن آن دوست محلی فوق‌العاده‌ای است که کاملاً تو را درک می‌کند. می‌توانی به انگلیسی ساده بگویی «واقعاً باید یک دستشویی پیدا کنم» و او همه ترجمه فرهنگی را انجام می‌دهد و به روشی که برای مغز غیرمحلی تو کاملاً قابل فهم است آدرس می‌دهد. -از دید برنامه‌نویسی: -- **زبان‌های سطح پایین** (مثل اسمبلی یا C) این امکان رو می‌دن که با سخت‌افزار واقعی کامپیوتر گفتگوی فوق‌العاده دقیقی داشته باشی، ولی باید مثل یک ماشین فکر کنی، که... خب، بزار بگم یک تغییر ذهنی بزرگه! -- **زبان‌های سطح بالا** (مثل JavaScript، Python، یا C#) اجازه می‌دن مثل یه انسان فکر کنی در حالی که اون‌ها پشت پرده همه زبان ماشین رو مدیریت می‌کنن. بعلاوه، این زبان‌ها جوامع فوق‌العاده مهربانی دارن پر از آدم‌هایی که یادشون هست تازه بودن چطوری بوده و واقعاً می‌خوان کمک کنن! +در زبان برنامه‌نویسی: +- **زبان‌های سطح پایین** (مثل اسمبلی یا C) به تو اجازه می‌دهند گفت‌وگوی دقیق و مفصل با سخت‌افزار واقعی کامپیوتر داشته باشی، اما باید مثل یک ماشین فکر کنی که... خب، بگذار بگویم تغییر ذهنی خیلی بزرگی است! +- **زبان‌های سطح بالا** (مثل جاوااسکریپت، پایتون یا C#) اجازه می‌دهند مثل یک انسان فکر کنی و آن‌ها کار زبان ماشینی پشت صحنه را انجام می‌دهند. بعلاوه، این زبان‌ها جوامع فوق‌العاده صمیمی دارند که یادشان می‌آید تازه‌کار بودن چگونه است و واقعاً می‌خواهند کمک کنند! -حدس بزن با کدوم‌ها شروع به یادگیری می‌کنی؟ 😉 زبان‌های سطح بالا مثل چرخ‌های کمکی هستن که هیچ وقت نمی‌خوای ازشون بزنی پایین چون کل تجربه رو خیلی لذت‌بخش‌تر می‌کنن! +حدس بزن چه زبان‌هایی را پیشنهاد می‌کنم با آن‌ها شروع کنی؟ 😉 زبان‌های سطح بالا مثل چرخ‌های آموزشی هستند که هرگز نمی‌خواهی از آن‌ها جدا شوی چون کل تجربه را بسیار لذت‌بخش‌تر می‌کنند! ```mermaid flowchart TB - A["👤 فکر انسان:
'می‌خواهم اعداد فیبوناچی را محاسبه کنم'"] --> B{انتخاب سطح زبان} + A["👤 فکر انسان:
'می‌خواهم اعداد فیبوناچی را حساب کنم'"] --> B{انتخاب سطح زبان} B -->|سطح بالا| C["🌟 جاوااسکریپت/پایتون
خواندن و نوشتن آسان"] - B -->|سطح پایین| D["⚙️ اسمبلی/C
کنترل مستقیم سخت‌افزار"] + B -->|سطح پایین| D["⚙️ اسمبلی/سی
کنترل مستقیم سخت‌افزار"] C --> E["📝 نوشتن: fibonacci(10)"] D --> F["📝 نوشتن: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 درک کامپیوتر:
مترجم پیچیدگی‌ها را مدیریت می‌کند"] + E --> G["🤖 فهم کامپیوتر:
مترجم پیچیدگی‌ها را مدیریت می‌کند"] F --> G - G --> H["💻 نتیجه یکسان:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 نتیجه یکسان:
0، 1، 1، 2، 3، 5، 8، 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### بذار نشونت بدم چرا زبان‌های سطح بالا اینقدر دوست‌داشتنی هستن +### اجازه بده نشان دهم چرا زبان‌های سطح بالا دوستانه‌تر هستند -باشه، می‌خوام چیزی بهت نشون بدم که کاملاً نشون می‌ده چرا عاشق زبان‌های سطح بالا شدم، اما اول – باید قول بدی. وقتی اولین نمونه کد رو دیدی، نترس! طراحی شده که کمی ترسناک به نظر بیاد. این دقیقاً همون نکته‌ایه که می‌خوام برسونم! +خوب، الان می‌خواهم چیزی به تو نشان دهم که دقیقاً دلیل عشقم به زبان‌های سطح بالا را نشان می‌دهد، اما اول – باید برایم قول بدهی. وقتی اولین نمونه کد را دیدی، نترس! قرار نیست ترسناک به نظر برسد. این دقیقاً همان نکته‌ای است که می‌خواهم بگویم! -قراره به یه وظیفه یکسان نوشته‌شده در دو سبک کاملاً متفاوت نگاه کنیم. هر دو یه چیزی به اسم دنباله فیبوناچی ایجاد می‌کنن – یه الگوی ریاضی زیبا که هر عدد مجموع دو عدد قبلیشه: ۰، ۱، ۱، ۲، ۳، ۵، ۸، ۱۳... (نکته جالب: این الگو رو در طبیعت دقیقاً همه جا پیدا می‌کنی – مارپیچ دانه‌های آفتابگردان، الگوهای مخروط‌های کاج، حتی شکل‌گیری کهکشان‌ها!) +ما همین کار را در دو سبک کاملاً متفاوت انجام خواهیم داد. هر دو دنباله فیبوناچی را تولید می‌کنند – الگوی زیبای ریاضی که هر عدد جمع دو عدد قبل خود است: ۰، ۱، ۱، ۲، ۳، ۵، ۸، ۱۳... (نکته جالب: این الگو واقعاً در همه جای طبیعت پیدا می‌شود – مارپیچ‌های دانه آفتابگردان، الگوهای کاج، حتی شکل‌گیری کهکشان‌ها!) -آماده‌ای فرق رو ببینی؟ بریم! +آماده‌ای تفاوت را ببینی؟ بزن بریم! -**زبان سطح بالا (JavaScript) – دوست‌داشتنی برای انسان:** +**زبان سطح بالا (جاوااسکریپت) – مناسب انسان:** ```javascript -// مرحله ۱: راه‌اندازی اولیه فیبوناچی +// مرحله ۱: تنظیم پایه‌ای دنباله فیبوناچی const fibonacciCount = 10; let current = 0; let next = 1; @@ -182,11 +183,11 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**این کد چیکار می‌کنه:** -- **اعلان** یه عدد ثابت برای تعیین تعداد اعداد فیبوناچی که می‌خوایم تولید کنیم -- **مقداردهی اولیه** دو متغیر برای نگه داشتن عدد فعلی و بعدی در دنباله -- **تنظیم** مقادیر شروع (۰ و ۱) که الگوی فیبوناچی رو تعریف می‌کنن -- **نمایش** یک پیغام سرصفحه برای شناسایی خروجی +**این کد چه کار می‌کند:** +- **اعلام** یک مقدار ثابت برای مشخص کردن تعداد اعداد فیبوناچی که می‌خواهیم بسازیم +- **مقداردهی اولیه** دو متغیر برای پیگیری عدد حاضر و عدد بعدی در دنباله +- **تنظیم** مقادیر شروع (۰ و ۱) که الگوی فیبوناچی را تعریف می‌کنند +- **نمایش** یک پیام عنوان برای شناسایی خروجی ما ```javascript // مرحله ۲: تولید دنباله با یک حلقه @@ -200,14 +201,14 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**شرح عملکرد این بخش:** -- **حلقه** زدن از طریق هر جایگاه در دنباله با استفاده از حلقه `for` -- **نمایش** هر عدد با جایگاهش با استفاده از قالب‌بندی رشته قالبی -- **محاسبه** عدد فیبوناچی بعدی با جمع کردن مقادیر فعلی و بعدی -- **به‌روزرسانی** متغیرهای دنبال‌کننده تا به تکرار بعدی بریم +**چه اتفاقی اینجا می‌افتد:** +- **در حلقه** با استفاده از حلقه `for` از هر موقعیت در دنباله عبور می‌کند +- **نمایش** هر عدد همراه با موقعیت آن با فرمت قالب رشته +- **محاسبه** عدد بعدی فیبوناچی با جمع کردن حاضر و بعدی +- **بروزرسانی** متغیرهای پیگیری برای حرکت به تکرار بعدی ```javascript -// گام ۳: رویکرد کاربردی مدرن +// مرحله ۳: رویکرد تابعی مدرن const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -224,12 +225,12 @@ console.log(fibSequence); ``` **در کد بالا ما:** -- **ایجاد** تابعی قابل استفاده مجدد با استفاده از نحو مدرن تابع پیکانی -- **ساخت** آرایه‌ای برای ذخیره دنباله کامل به جای نمایش تک‌تک اعداد -- **استفاده** از اندیس‌گذاری آرایه برای محاسبه هر عدد جدید از مقادیر قبلی -- **بازگرداندن** دنباله کامل برای استفاده انعطاف‌پذیر در بخش‌های دیگه برنامه +- **تابعی چندبار استفاده‌شدنی** با استفاده از نحو تابع فلش مدرن ساخته‌ایم +- **آرایه‌ای ساخته‌ایم** تا دنباله کامل را ذخیره کنیم به جای نمایش یک به یک +- **از ایندکس‌آرایه استفاده کرده‌ایم** تا هر عدد جدید را از مقادیر قبلی محاسبه کنیم +- **دنباله کامل را برگردانده‌ایم** برای استفاده انعطاف‌پذیر در بخش‌های دیگر برنامه -**زبان سطح پایین (ARM Assembly) – دوست‌داشتنی برای کامپیوتر:** +**زبان سطح پایین (اسمبلی ARM) – مناسب کامپیوتر:** ```assembly area ascen,code,readonly @@ -256,62 +257,62 @@ back add r0,r1 end ``` -توجه کن چطور نسخه JavaScript تقریباً مثل دستورالعمل‌های انگلیسی می‌خونه، در حالی که نسخه اسمبلی از دستورات رمزآلودی استفاده می‌کنه که مستقیماً کنترل پردازنده کامپیوتر رو در دست دارن. هر دو دقیقاً همون کار رو انجام می‌دن، ولی زبان سطح بالا برای انسان‌ها بسیار راحت‌تر برای فهمیدن، نوشتن و نگهداریه. +توجه کن چگونه نسخه جاوااسکریپت تقریباً مثل دستورات انگلیسی می‌خواند، در حالی که نسخه اسمبلی از دستورات رمزگونه‌ای استفاده می‌کند که مستقیماً پردازنده کامپیوتر را کنترل می‌کند. هر دو دقیقاً همان کار را انجام می‌دهند، اما زبان سطح بالا برای انسان‌ها خیلی راحت‌تر است که بفهمند، بنویسند و نگهداری کنند. -**تفاوت‌های کلیدی که متوجه می‌شی:** -- **خوانایی**: جاوااسکریپت از نام‌های توصیفی مانند `fibonacciCount` استفاده می‌کند در حالی که اسمبلی از برچسب‌های رمزگونه‌ای مانند `r0`، `r1` استفاده می‌کند -- **توضیحات**: زبان‌های سطح بالا تشویق به نوشتن توضیحات توضیحی می‌کنند که کد را خودمستندسازی می‌کند -- **ساختار**: جریان منطقی در جاوااسکریپت با روشی که انسان‌ها در مورد مسائل گام به گام فکر می‌کنند مطابقت دارد -- **نگه‌داری**: به‌روزرسانی نسخه جاوااسکریپت برای نیازهای مختلف ساده و واضح است +**تفاوت‌های کلیدی که متوجه خواهی شد:** +- **خوانایی**: جاوااسکریپت از نام‌های توصیفی مانند `fibonacciCount` استفاده می‌کند در حالی که اسمبلی از برچسب‌های رمزی مانند `r0`، `r1` بهره می‌برد +- **توضیحات**: زبان‌های سطح بالا تشویق به نوشتن کامنت‌های توضیحی می‌کنند که کد را خودمستند می‌سازد +- **ساختار**: جریان منطقی جاوااسکریپت مطابق با نحوه تفکر انسان‌ها در مورد مسائل گام به گام است +- **نگهداری**: به‌روزرسانی نسخه جاوااسکریپت برای نیازهای مختلف ساده و واضح است -✅ **درباره دنباله فیبوناچی**: این الگوی عددی فوق‌العاده زیبا (جایی که هر عدد برابر مجموع دو عدد قبلی آن است: 0، 1، 1، 2، 3، 5، 8...) تقریباً *در همه جا* در طبیعت دیده می‌شود! شما آن را در مارپیچ‌های آفتابگردان، الگوهای کاج، نحوه خم شدن صدف ناتیلوس و حتی در رشد شاخه‌های درخت خواهید یافت. فوق‌العاده است که ریاضیات و کد چگونه به ما کمک می‌کنند تا الگوهایی را که طبیعت برای خلق زیبایی استفاده می‌کند، بفهمیم و بازسازی کنیم! +✅ **درباره دنباله فیبوناچی**: این الگوی عددی فوق‌العاده زیبا (که هر عدد برابر است با مجموع دو عدد قبلی: ۰، ۱، ۱، ۲، ۳، ۵، ۸...) عملاً در *همه‌جا* در طبیعت ظاهر می‌شود! این دنباله را در مارپیچ‌های گل آفتابگردان، الگوهای کاج، نحوه خم شدن صدف ناوتیلوس و حتی نحوه رشد شاخه‌های درخت خواهید یافت. واقعاً عجیب است که چگونه ریاضیات و کد می‌توانند به ما کمک کنند الگوهایی را که طبیعت برای خلق زیبایی استفاده می‌کند، درک و بازآفرینی کنیم! ## بلوک‌های سازنده‌ای که جادو را رقم می‌زنند -خوب، حالا که دیدید زبان‌های برنامه‌نویسی چگونه کار می‌کنند، بیایید به پایه‌های اساسی که عملاً هر برنامه‌ای را تشکیل می‌دهند، نگاهی بیندازیم. این‌ها را مثل مواد اصلی دستور غذایی مورد علاقه‌تان در نظر بگیرید – وقتی بفهمید هرکدام چه کاری انجام می‌دهند، خواهید توانست کد را در تقریباً هر زبانی بخوانید و بنویسید! +خُب، حالا که دیدید زبان‌های برنامه‌نویسی چگونه در عمل به نظر می‌رسند، بیایید قطعات بنیادی که عملاً هر برنامه‌ای از آن‌ها ساخته شده است را تجزیه و تحلیل کنیم. به این‌ها مانند اجزای ضروری در دستور پخت مورد علاقه شما فکر کنید – وقتی بفهمید هر کدام چه کار می‌کنند، می‌توانید تقریباً در هر زبانی کد بخوانید و بنویسید! -این کمی شبیه یادگیری دستور زبان برنامه‌نویسی است. یادتان می‌آید وقتی در مدرسه درباره اسم‌ها، فعل‌ها و ساختن جملات یاد گرفتید؟ برنامه‌نویسی هم دستور زبان خودش را دارد و صادقانه بگویم، خیلی منطقی‌تر و بخشنده‌تر از دستور زبان انگلیسی است! 😄 +این کمی شبیه یادگیری دستور زبان برنامه‌نویسی است. یادتان می‌آید در مدرسه چطور درباره اسم‌ها، فعل‌ها و چگونگی ساخت جملات یاد گرفتید؟ برنامه‌نویسی هم دستور زبان خاص خودش را دارد، و راستش کمی منطقی‌تر و بخشنده‌تر از دستور زبان انگلیسی است! 😄 -### عبارات: دستورالعمل‌های گام به گام +### دستورات: راهنمای گام به گام -بیایید با **عبارات** شروع کنیم – این‌ها مثل جملات جداگانه در یک گفتگو با کامپیوتر شما هستند. هر عبارت به کامپیوتر می‌گوید یک کار مشخص انجام دهد، مثل دادن جهت‌ها: «چرخ به چپ همینجا»، «توقف در چراغ قرمز»، «پارک در آن جایگاه». +با **دستورات** شروع کنیم – این‌ها مانند جملات جداگانه در گفت‌وگو با کامپیوتر شما هستند. هر دستور به کامپیوتر می‌گوید یک کار مشخص انجام دهد، مثل دادن دستور: «اینجا بپیچ به چپ»، «سر چراغ قرمز بایست»، «تو آن جای پارک پارک کن.» -چیزی که در مورد عبارات دوست دارم این است که معمولاً تا چه حد قابل خواندن‌اند. این را ببینید: +چیزی که درباره دستورات دوست دارم، خوانایی آن‌هاست. مثلاً این را ببین: ```javascript -// دستورات پایه‌ای که یک عمل را انجام می‌دهند +// دستورات پایه‌ای که اقدامات منفرد را انجام می‌دهند const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` **این کد چه کاری انجام می‌دهد:** -- **اعلام** یک متغیر ثابت برای ذخیره نام کاربر -- **نمایش** پیام خوش‌آمدگویی در کنسول +- **اعلان** یک متغیر ثابت برای ذخیره نام کاربر +- **نمایش** پیام خوش‌آمدگویی در خروجی کنسول - **محاسبه** و ذخیره نتیجه یک عملیات ریاضی ```javascript -// دستورات که با صفحات وب تعامل دارند +// عبارت‌هایی که با صفحات وب تعامل دارند document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**گام به گام، اتفاقات اینجا:** -- **تغییر** عنوان صفحه وب که در تب مرورگر نشان داده می‌شود -- **تغییر** رنگ پس‌زمینه کل بدنه صفحه +**گام به گام، اینجا چه اتفاقی می‌افتد:** +- **تغییر** عنوان صفحه وب که در تب مرورگر نمایش داده می‌شود +- **تغییر** رنگ پس‌زمینه کل محتوای صفحه -### متغیرها: سیستم حافظه برنامه شما +### متغیرها: حافظه برنامه شما -خوب، **متغیرها** یکی از مفاهیمی هستند که واقعاً دوست دارم آموزش دهم چون خیلی شبیه چیزهایی هستند که هر روز استفاده می‌کنید! +خب، **متغیرها** واقعاً یکی از مفاهیم مورد علاقه من برای آموزش هستند چون خیلی شبیه به چیزهایی هستند که هر روز استفاده می‌کنید! -یک لحظه به دفترچه تلفن موبایل‌تان فکر کنید. شما شماره هر کسی را حفظ نمی‌کنید – بلکه «مادر»، «دوست صمیمی» یا «فست‌فودی که تا ساعت ۲ صبح پیک دارد» را ذخیره می‌کنید و گوشی شما شماره‌ها را به خاطر می‌سپارد. متغیرها دقیقاً همین‌طور کار می‌کنند! آن‌ها مثل ظروف برچسب‌دار هستند که برنامه شما می‌تواند اطلاعات را ذخیره کند و بعد با نامی که معنا دارد دوباره از آن‌ها استفاده کند. +برای یک لحظه به دفترچه تلفن گوشی‌تان فکر کنید. شما شماره همه را حفظ نمی‌کنید – به جای آن، «مامان»، «بهترین دوست» یا «فروشگاه پیتزایی که تا ساعت ۲ صبح تحویل می‌دهد» را ذخیره می‌کنید و گوشی شما شماره‌ها را به یاد می‌سپارد. متغیرها دقیقاً همین‌طورند! آن‌ها مانند ظرف‌های برچسب‌دار هستند که برنامه شما می‌تواند اطلاعات را در آن ذخیره و بعد با نامی که معنی دارد فراخوانی کند. -چیزی که خیلی جالب است این است که متغیرها می‌توانند در حین اجرای برنامه تغییر کنند (از همین رو اسمشان «متغیر» است – متوجه بازی کلمه شدند؟). درست مثل اینکه ممکن است وقتی یک فست‌فودی بهتر پیدا کردید، مخاطب آن را به‌روزرسانی کنید، متغیرها هم زمانی که برنامه شما اطلاعات جدید یاد می‌گیرد یا شرایط تغییر می‌کند، به‌روزرسانی می‌شوند! +حاصل کار خیلی جالب است: متغیرها می‌توانند هنگام اجرای برنامه تغییر کنند (به همین دلیل به آنها متغیر می‌گویند). درست مثل اینکه ممکن است وقتی فروشگاه پیتزایی بهتری پیدا کنید شماره را به‌روزرسانی کنید، متغیرها هم می‌توانند در طول اجرای برنامه به‌روزرسانی شوند چون برنامه اطلاعات جدید یاد می‌گیرد یا شرایط تغییر می‌کند! -اجازه دهید نشان دهم چقدر این می‌تواند ساده و زیبا باشد: +اجازه دهید نشان دهم چقدر می‌تواند ساده و زیبا باشد: ```javascript -// مرحله ۱: ایجاد متغیرهای پایه +// گام ۱: ایجاد متغیرهای پایه const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; @@ -320,9 +321,9 @@ let isRaining = false; **درک این مفاهیم:** - **ذخیره** مقادیر ثابت در متغیرهای `const` (مثل نام سایت) -- **استفاده** از `let` برای مقادیری که در طول برنامه تغییر می‌کنند -- **اختصاص** انواع داده مختلف: رشته‌ها (متن)، عددها و بولین‌ها (true/false) -- **انتخاب** نام‌های توصیفی که توضیح می‌دهند هر متغیر چه چیزی را نگه می‌دارد +- **استفاده** از `let` برای مقادیری که می‌توانند در کل برنامه تغییر کنند +- **اختصاص** انواع مختلف داده: رشته‌ها (متن)، اعداد، و بولین‌ها (true/false) +- **انتخاب** نام‌های توصیفی که توضیح می‌دهند هر متغیر چه چیز دارد ```javascript // گام ۲: کار با اشیاء برای گروه‌بندی داده‌های مرتبط @@ -333,10 +334,10 @@ const weatherData = { }; ``` -**در بالا ما:** -- **ساختیم** یک شیء برای گروه‌بندی اطلاعات مرتبط هواشناسی -- **سازمان‌دهی** چندین داده زیر یک نام متغیر -- **استفاده** از جفت کلید-مقدار برای برچسب زدن واضح به هر داده +**در مثال بالا:** +- **ساخت** یک شیء برای گروه‌بندی داده‌های هواشناسی مرتبط +- **سازمان‌دهی** چندین داده تحت یک نام متغیر +- **استفاده** از جفت‌های کلید-مقدار برای برچسب زدن واضح اطلاعات ```javascript // مرحله ۳: استفاده و به‌روزرسانی متغیرها @@ -348,30 +349,30 @@ currentWeather = "cloudy"; temperature = 68; ``` -**بیایید هر بخش را بفهمیم:** -- **نمایش** اطلاعات با استفاده از قالب رشته‌ها و نحو `${}` -- **دسترسی** به خصوصیات شیء با استفاده از نقطه‌گذاری (`weatherData.windSpeed`) -- **بروزرسانی** متغیرهای تعریف‌شده با `let` برای بازتاب شرایط در حال تغییر +**اجزای هر بخش:** +- **نمایش** اطلاعات با استفاده از قالب‌بندی رشته‌ها (template literals) با نحو `${}` +- **دسترسی** به خصوصیات شیء با نقطه (مثل `weatherData.windSpeed`) +- **به‌روزرسانی** متغیرهای تعریف‌شده با `let` برای نمایش شرایط متغیر - **ترکیب** چند متغیر برای ساخت پیام‌های معنادار ```javascript -// مرحله ۴: ساختار شکنی مدرن برای کدی تمیزتر +// مرحله ۴: تخریب مدرن برای کد تمیزتر const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**چیزی که باید بدانید:** -- **استخراج** خصوصیات خاص از شیءها با استفاده از انتساب تخریب‌کننده (destructuring) -- **ساخت** متغیرهای جدید به طور خودکار با همان نام‌های کلیدهای شیء -- **ساده‌سازی** کد با اجتناب از چند بار نوشتن نقطه‌گذاری +**نکات مهم:** +- **استخراج** خصوصیات خاص از اشیاء با دسرتراکچری (تخصیص تجزیه‌ای) +- **ساخت** خودکار متغیرهای جدید با همان نام کلیدهای شیء +- **سادگی** کد با اجتناب از تکرار زیاد نحوه دسترسی نقطه‌ای -### جریان کنترل: آموزش تفکر به برنامه شما +### جریان کنترل: آموزش به برنامه برای تفکر -خوب، اینجاست که برنامه‌نویسی واقعاً ذهن را منفجر می‌کند! **جریان کنترل** اساساً آموزش به برنامه شماست که چگونه تصمیمات هوشمندانه بگیرد، دقیقاً مثل کاری که شما هر روز بدون فکر کردن انجام می‌دهید. +خب، اینجاست که برنامه‌نویسی کاملاً شگفت‌انگیز می‌شود! **جریان کنترل** اساساً آموزش برنامه‌تان است تا تصمیم‌های هوشمندانه بگیرد، درست مثل خود شما که هر روز بدون فکر کردن این کار را می‌کنید. -تصور کنید: امروز صبح احتمالاً چیزی شبیه این را داشتید «اگر باران می‌آید، چتر برمی‌دارم. اگر سرد است، کاپشن می‌پوشم. اگر دیر کردم، صبحانه را رد می‌کنم و در راه قهوه می‌گیرم.» مغز شما به طور ذاتی این منطق شرطی if-then را ده‌ها بار در روز دنبال می‌کند! +تصور کنید: امروز صبح احتمالاً چیزی شبیه به این را طی کردید «اگر باران می‌آید، چتر برمی‌دارم. اگر هوا سرد است، کاپشن می‌پوشم. اگر دیر شده باشم، صبحانه نمی‌خورم و onderweg قهوه می‌گیرم.» مغز شما به‌طور طبیعی این منطق‌های اگر-آنگاه را ده‌ها بار در روز دنبال می‌کند! -این همان چیزی است که باعث می‌شود برنامه‌ها هوشمند و زنده به نظر برسند بجای اینکه صرفاً یک اسکریپت کسل‌کننده و قابل پیش‌بینی را دنبال کنند. آن‌ها به واقع می‌توانند وضعیت را نگاه کنند، ارزیابی کنند چه اتفاقی می‌افتد و پاسخ مناسب بدهند. این مثل دادن یک مغز به برنامه شماست که می‌تواند سازگار شود و تصمیم بگیرد! +همین باعث می‌شود برنامه‌ها هوشمند و زنده به نظر برسند، نه اینکه فقط یک اسکریپت خسته‌کننده و قابل پیش‌بینی اجرا کنند. آن‌ها واقعاً می‌توانند یک وضعیت را ببینند، آنچه در جریان است را ارزیابی کنند و به درستی پاسخ دهند. انگار به برنامه‌تان مغزی داده‌اید که بتواند سازگار باشد و انتخاب کند! می‌خواهید ببینید چقدر زیبا کار می‌کند؟ اجازه دهید نشان دهم: @@ -388,13 +389,13 @@ if (userAge >= 18) { ``` **این کد چه کاری انجام می‌دهد:** -- **بررسی** اینکه آیا سن کاربر شرایط رأی دادن را دارد -- **اجرای** بلوک‌های کد مختلف بر اساس نتیجه شرط -- **محاسبه** و نمایش زمان تا رسیدن به شرایط رأی دادن اگر کمتر از ۱۸ سال باشد -- **دادن** بازخورد خاص و مفید برای هر موقعیت +- **بررسی** اینکه آیا سن کاربر برای رای دادن کافی است +- **اجرا** بلوک‌های کد متفاوت بر اساس نتیجه شرایط +- **محاسبه** و نمایش مدت زمان باقی‌مانده تا مجاز شدن به رای دادن اگر زیر ۱۸ سال باشد +- **ارائه** بازخورد مشخص و مفید برای هر سناریو ```javascript -// مرحله ۲: چندین شرایط با عملگرهای منطقی +// گام ۲: شرایط متعدد با عملگرهای منطقی const userAge = 17; const hasPermission = true; @@ -409,20 +410,20 @@ if (userAge >= 18 && hasPermission) { **تجزیه و تحلیل اتفاقات اینجا:** - **ترکیب** چند شرط با استفاده از عملگر `&&` (و) -- **ساختن** سلسله مراتب شرایط با `else if` برای سناریوهای متعدد -- **رسیدگی** به همه حالات ممکن با دستور نهایی `else` -- **دادن** بازخورد واضح و قابل عمل برای هر وضعیت متفاوت +- **ساخت** یک سلسله مراتب شرط با `else if` برای شرایط متعدد +- **رسیدگی** به همه موارد ممکن با یک دستور نهایی `else` +- **دادن** بازخورد واضح و کاربردی برای هر وضعیت متفاوت ```javascript -// مرحله ۳: شرط کوتاه با عملگر شرطی +// مرحله ۳: شرط مختصر با عملگر سه‌تایی const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` **چیزی که باید به یاد داشته باشید:** -- **استفاده** از عملگر شرطی سه‌تایی (`? :`) برای شرایط ساده با دو گزینه -- **نوشتن** شرط اول، سپس `?`، بعد نتیجه درست، بعد `:`، و سپس نتیجه نادرست -- **اجرای** این الگو وقتی می‌خواهید بر اساس شرایط مقادیر را اختصاص دهید +- **استفاده** از عملگر سه‌تایی (`؟ :`) برای شرایط ساده دوگزینه‌ای +- **نوشتن** ابتدا شرط سپس `?`، نتیجه درست، `:`، سپس نتیجه نادرست +- **کاربرد** این الگو هنگام نیاز به اختصاص مقادیر بر اساس شرط ```javascript // مرحله ۴: مدیریت چندین مورد خاص @@ -445,54 +446,54 @@ switch (dayOfWeek) { } ``` -**این کد کارهای زیر را انجام می‌دهد:** -- **مقایسه** مقدار متغیر با چند حالت خاص -- **گروه‌بندی** حالات مشابه (روزهای هفته در مقابل تعطیلات آخر هفته) -- **اجرای** بلوک کد مناسب وقتی که تطابق پیدا شود -- **شامل** حالت `default` برای رسیدگی به مقادیر غیرمنتظره -- **استفاده** از دستورات `break` برای جلوگیری از ادامه کد به حالت بعدی +**این کد انجام می‌دهد:** +- **مقایسه** مقدار متغیر با چندین حالت خاص +- **گروه‌بندی** حالت‌های مشابه (روزهای هفته در مقابل تعطیلات آخر هفته) +- **اجرای** بلوک کد مناسب هنگام یافتن تطبیق +- **شامل** حالت پیش‌فرض (`default`) برای مدیریت مقادیر غیرمنتظره +- **استفاده** از دستورات `break` برای جلوگیری از ادامه به حالت بعدی -> 💡 **تشبیه دنیای واقعی**: جریان کنترل مثل داشتن صبورترین GPS جهان است که به شما مسیر می‌دهد. می‌گوید «اگر ترافیک در خیابان اصلی است، بزرگراه را برو. اگر ساخت‌وساز بزرگراه را مسدود کرده، مسیر مناظر را امتحان کن.» برنامه‌ها دقیقاً همین منطق شرطی را برای پاسخ هوشمندانه به موقعیت‌های مختلف به کار می‌برند و همیشه بهترین تجربه را برای کاربران فراهم می‌کنند. +> 💡 **مثال واقعی**: جریان کنترل را مانند این تصور کنید که صبورترین GPS جهان به شما مسیر می‌دهد. می‌گوید «اگر ترافیک در خیابان اصلی است، به جای آن از بزرگراه برو. اگر ساخت و ساز بزرگراه را بسته است، مسیر دیدنی را امتحان کن.» برنامه‌ها دقیقاً از همین منطق شرطی برای پاسخ هوشمندانه به شرایط مختلف استفاده می‌کنند و همیشه بهترین تجربه ممکن را برای کاربران فراهم می‌آورند. -### 🎯 **چک مفهومی: تسلط بر بلوک‌های سازنده** +### 🎯 **بررسی مفهوم: تسلط بر بلوک‌های سازنده** -**ببینیم چقدر با پایه‌ها خوب هستید:** -- می‌توانید تفاوت بین متغیر و عبارت را به زبان خودتان توضیح دهید؟ -- یک سناریوی واقعی را تصور کنید که در آن از تصمیم if-then استفاده می‌کنید (مثل مثال رأی دادن ما) -- کدام بخش از منطق برنامه‌نویسی برایتان شگفت‌آور بود؟ +**بیایید ببینیم چطوری با اصول کار می‌کنید:** +- آیا می‌توانید تفاوت یک متغیر با یک دستور را با کلمات خودتان توضیح دهید؟ +- یک موقعیت واقعی را تصور کنید که در آن از تصمیم‌گیری اگر-آنگاه استفاده می‌کنید (مثل مثال رای دادن ما) +- یک چیز درباره منطق برنامه‌نویسی که برایتان شگفت‌آور بوده چیست؟ -**افزایش اعتماد به نفس سریع:** +**تقویت اعتماد به نفس سریع:** ```mermaid flowchart LR - A["📝 دستورات
(دستورات)"] --> B["📦 متغیرها
(ذخیره‌سازی)"] --> C["🔀 جریان کنترل
(تصمیم‌ها)"] --> D["🎉 برنامه‌ی فعال!"] + A["📝 دستورات
(دستورات)"] --> B["📦 متغیرها
(ذخیره‌سازی)"] --> C["🔀 جریان کنترل
(تصمیمات)"] --> D["🎉 برنامه‌ی کاری!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **چه چیزی در انتظار شماست**: ما قرار است یک سفر فوق‌العاده را ادامه دهیم و عمیق‌تر با این مفاهیم آشنا شویم! همین الان تمرکز کنید روی هیجانی که بابت تمام امکانات شگفت‌انگیز پیش رو دارید. مهارت‌ها و تکنیک‌های خاص به طور طبیعی وقتی با هم تمرین می‌کنیم شکل خواهند گرفت – قول می‌دهم این خیلی جذاب‌تر از آن چیزی باشد که فکرش را می‌کنید! +✅ **قدم بعد چیست**: ما قراره با هم حسابی لذت ببریم و عمیق‌تر به این مفاهیم بپردازیم! همین حالا فقط روی حس هیجان نسبت به همه فرصت‌های شگفت‌انگیزی که پیش رو دارید تمرکز کنید. مهارت‌ها و تکنیک‌های خاص به‌طور طبیعی در حین تمرین با هم رشد خواهند کرد – قول می‌دهم خیلی بیشتر از آنچه انتظار دارید سرگرم‌کننده خواهد بود! ## ابزارهای کار -خوب، واقعاً اینجاست که آن‌قدر هیجان‌زده می‌شوم که نمی‌توانم خودم را کنترل کنم! 🚀 داریم درباره ابزارهای فوق‌العاده‌ای صحبت می‌کنیم که باعث می‌شوند احساس کنید همین الان کلیدهای یک سفینه فضایی دیجیتال به دستتان آمده است. +خُب، واقعاً اینجا جایی است که هیجان‌زده می‌شوم تا جایی که نمی‌توانم خودم را کنترل کنم! 🚀 قراره درباره ابزارهای فوق‌العاده‌ای صحبت کنیم که باعث می‌شوند احساس کنید کلیدهای یک سفینه دیجیتال به دستتان رسیده است. -می‌دانید آشپز چطور چاقوهای متعادل دقیقاً متناسب با دستش دارد؟ یا نوازنده‌ای که گیتاری دارد که انگار از همان لحظه لمس، شروع به آواز خواندن می‌کند؟ خب، توسعه‌دهندگان نسخه خودشان از این ابزارهای جادویی را دارند، و این چیزی است که واقعاً ذهنتان را منفجر خواهد کرد – بیشتر آن‌ها کاملاً رایگان هستند! +می‌دانید چطور یک سرآشپز چاقوهای متعادل‌شده عالی دارد که انگار بخشی از دستش هستند؟ یا نوازنده‌ای که یک گیتار دارد که همین که لمسش می‌کند شروع به نواختن می‌کند؟ خب، توسعه‌دهندگان ابزار جادویی مشابه خودشان را دارند، و این چیزی است که کاملاً شما را شگفت‌زده خواهد کرد – بیشتر آن‌ها کاملاً رایگان هستند! -تقریباً از شدت خوشحالی در صندلی‌ام می‌پرم که این‌ها را با شما به اشتراک بگذارم چون کل روش ساخت نرم‌افزار را انقلابی کرده‌اند. ما درباره دستیاران کدنویسی مبتنی بر هوش مصنوعی صحبت می‌کنیم که می‌توانند به نگارش کد کمک کنند (جادوی واقعی است!)، محیط‌های ابری که در آن‌ها می‌توانید برنامه‌های کامل را از هر جای دنیا با وای-فای بسازید، و ابزارهای اشکال‌زدایی‌ای که آن‌قدر پیشرفته‌اند که انگار برنامه‌های شما را با دید اشعه ایکس می‌بینند. +عملاً از صندلی‌ام بالا و پایین می‌روم که قرار است این‌ها را با شما به اشتراک بگذارم چون به کل نحوه ساخت نرم‌افزار را تغییر داده‌اند. داریم درباره دستیاران برنامه‌نویسی مبتنی بر هوش مصنوعی صحبت می‌کنیم که به شما کمک می‌کنند کد بنویسید (اصلاً شوخی نمی‌کنم!)، محیط‌های ابری که می‌توانید از هر جایی با وای‌فای کل برنامه‌ها را بسازید، و ابزارهای دیباگینگ چنان پیشرفته که مثل داشتن بینایی ایکس‌ری برای برنامه‌هایتان است. -و بخشی که هنوز برایم هیجان‌انگیز است: این‌ها ابزارهای «مبتدی» نیستند که بعد از چند ماه از آن‌ها دلزده شوید. این دقیقاً همان ابزارهای حرفه‌ای هستند که توسعه‌دهندگان گوگل، نتفلیکس و آن استودیوی اپلیکیشن مستقل مورد علاقه‌تان همین الان دارند استفاده می‌کنند. شما احساس خواهید کرد چقدر حرفه‌ای هستید وقتی از آن‌ها استفاده می‌کنید! +و بخش شگفت‌انگیز تر این است: این‌ها ابزارهای «مبتدی» نیستند که زود از آن‌ها رد شوید. این‌ها همان ابزارهای حرفه‌ای هستند که توسعه‌دهندگان در گوگل، نتفلیکس و استودیوی اپلیکیشن مستقل مورد علاقه شما همین الان استفاده می‌کنند. وقتی از آن‌ها استفاده کنید، واقعاً احساس حرفه‌ای بودن خواهید کرد! ```mermaid graph TD A["💡 ایده شما"] --> B["⌨️ ویرایشگر کد
(VS Code)"] - B --> C["🌐 ابزارهای توسعه مرورگر
(آزمایش و اشکال‌زدایی)"] - C --> D["⚡ خط فرمان
(خودکارسازی و ابزارها)"] + B --> C["🌐 ابزارهای توسعه مرورگر
(تست و اشکال‌زدایی)"] + C --> D["⚡ خط فرمان
(اتوماسیون و ابزارها)"] D --> E["📚 مستندات
(یادگیری و مرجع)"] - E --> F["🚀 برنامه وب شگفت‌انگیز!"] + E --> F["🚀 اپلیکیشن وب شگفت‌انگیز!"] B -.-> G["🤖 دستیار هوش مصنوعی
(GitHub Copilot)"] - C -.-> H["📱 آزمایش دستگاه
(طراحی واکنش‌گرا)"] + C -.-> H["📱 تست دستگاه
(طراحی واکنش‌گرا)"] D -.-> I["📦 مدیران بسته
(npm, yarn)"] E -.-> J["👥 جامعه
(Stack Overflow)"] @@ -503,155 +504,155 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### ویرایشگرها و محیط‌های توسعه: بهترین دوستان دیجیتال جدید شما +### ویرایشگرهای کد و محیط‌های توسعه یکپارچه: دوستان دیجیتال جدید شما -بیا درباره ویرایشگرهای کد صحبت کنیم – واقعاً قرار است به محل مورد علاقه جدید شما برای کار تبدیل شوند! آن‌ها را مثل آرامگاه شخصی کدنویسی خودتان تصور کنید که بیشتر وقتتان را صرف خلق و بهبود ساخته‌های دیجیتالتان خواهید کرد. +بیایید درباره ویرایشگرهای کد صحبت کنیم – این‌ها واقعاً قرار است به مکان‌های مورد علاقه شما برای وقت گذراندن تبدیل شوند! آن‌ها را مانند پناهگاه شخصی برنامه‌نویسی‌تان تصور کنید که بیشتر وقتتان را صرف ساخت و تکمیل آثار دیجیتال خواهد کرد. -اما چیز جادویی درباره ویرایشگرهای مدرن این است که آن‌ها فقط ویرایشگرهای متن ظریف نیستند. آن‌ها مثل هوشمندترین و حامی‌ترین مربی کدنویسی هستند که ۲۴ ساعته کنار شما نشسته‌اند. تایپ اشتباهات شما را قبل از اینکه متوجه شوید می‌گیرند، پیشنهادهایی می‌دهند که شما را نابغه نشان می‌دهد، کمک می‌کنند بفهمید هر قطعه کد چه کاری انجام می‌دهد، و بعضی حتی حدس می‌زنند شما می‌خواهید چه چیزی بنویسید و پیشنهاد تکمیل جمله را می‌دهند! +اما جادوی واقعی ویرایشگرهای مدرن اینست که آن‌ها فقط یک ویرایشگر متن معمولی نیستند. انگار بهترین، پشتیبان‌ترین مربی برنامه‌نویسی دقیقاً کنار شما نشسته است ۲۴ ساعته. غلط‌های تایپی شما را قبل از اینکه خودتان بفهمید می‌گیرند، پیشنهادهایی می‌دهند که شما را نابغه نشان می‌دهد، کمک می‌کنند بفهمید هر تکه کد چه کاری می‌کند، و بعضی حتی می‌توانند پیش‌بینی کنند شما چه می‌خواهید بنویسید و پیشنهاد تکمیل افکارتان را می‌دهند! -یادم است وقتی اولین بار تکمیل خودکار را کشف کردم – واقعاً احساس کردم در آینده زندگی می‌کنم. شروع می‌کنید به تایپ چیزی، و ویرایشگر می‌گوید: «هی، آیا به این تابع فکر می‌کردی که دقیقاً کاری را انجام می‌دهد که تو نیاز داری؟» مثل اینکه یک ذهن‌خوان به عنوان رفیق کدنویسی کنارتان است! +یادم می‌آید وقتی برای اولین بار تکمیل خودکار را کشف کردم – دقیقاً احساس می‌کردم در آینده زندگی می‌کنم. شروع می‌کنید به نوشتن، و ویرایشگرتان می‌گوید: «هی، آیا به این تابع فکر می‌کردی که دقیقاً همان کاری را می‌کند که لازم داری؟» انگار یک ذهن‌خوان به عنوان دوست کدنویسی شماست! -**چه چیزی این ویرایشگرها را باور نکردنی می‌کند؟** +**چه چیزی این ویرایشگرها را فوق‌العاده می‌کند؟** -ویرایشگرهای کد مدرن مجموعه‌ای چشمگیر از ویژگی‌ها را ارائه می‌دهند که هدفشان افزایش بهره‌وری شماست: +ویرایشگرهای کد مدرن امکانات فراوانی دارند که برای افزایش بهره‌وری شما طراحی شده‌اند: -| ویژگی | کارکرد | چرا مفید است | -|-------------|-----------------------|-------------------------------------------| -| **برجسته‌سازی نحو** | رنگی کردن قسمت‌های مختلف کد | خواندن کد و یافتن خطاها را آسان‌تر می‌کند | -| **تکمیل خودکار** | پیشنهاد کد هنگام تایپ | سرعت کدنویسی را بالا می‌برد و از اشتباهات می‌کاهد | -| **ابزارهای اشکال‌زدایی** | کمک به یافتن و رفع خطاها | ساعت‌ها صرفه‌جویی در عیب‌یابی می‌کند | -| **افزونه‌ها** | افزودن ویژگی‌های تخصصی | ویرایشگر را برای هر فناوری سفارشی می‌کند | -| **دستیارهای هوش مصنوعی** | پیشنهاد کد و توضیحات | یادگیری و بهره‌وری را تسریع می‌کند | +| ویژگی | عملکرد | چرا مفید است | +|---------|--------------|--------------| +| **برجسته‌سازی نحو** | بخش‌های مختلف کد شما را رنگی می‌کند | کد خواناتر شده و خطاها بهتر دیده می‌شوند | +| **تکمیل خودکار** | هنگام نوشتن کد پیشنهاد می‌دهد | سرعت نوشتن را بالا برده و غلط‌ها را کم می‌کند | +| **ابزارهای خطایابی** | کمک می‌کند خطاها را پیدا و رفع کنید | ساعت‌ها وقت عیب‌یابی ذخیره می‌کند | +| **افزونه‌ها** | ویژگی‌های تخصصی اضافه می‌کند | ویرایشگر را برای هر فناوری سفارشی می‌کند | +| **دستیاران هوش مصنوعی** | کد و توضیح پیشنهاد می‌دهند | یادگیری و بهره‌وری را تسریع می‌کند | -> 🎥 **منبع ویدئو**: می‌خواهید این ابزارها را در عمل ببینید؟ این ویدئو [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) یک مرور کامل ارائه می‌دهد. +> 🎥 **منبع ویدیویی**: می‌خواهید این ابزارها را در عمل ببینید؟ این [ویدیو درباره ابزارهای کار](https://youtube.com/watch?v=69WJeXGBdxg) را برای یک مرور کامل ببینید. #### ویرایشگرهای پیشنهادی برای توسعه وب **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (رایگان) -- محبوب‌ترین میان توسعه‌دهندگان وب -- اکوسیستم عالی افزونه‌ها +- محبوب‌ترین در میان توسعه‌دهندگان وب +- اکوسیستم افزونه بسیار عالی - ترمینال داخلی و ادغام با Git -- **افزونه‌های ضروری**: +- **افزونه‌های ضروری:** - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - پیشنهاد کد مبتنی بر هوش مصنوعی - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - همکاری همزمان + - [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) - گرفتن اشتباهات املایی در کد + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - گرفتن غلط‌های املایی در کد -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (پرداختی، رایگان برای دانش‌آموزان) -- ابزارهای پیشرفته اشکال‌زدایی و تست +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (پرداختی، رایگان برای دانشجویان) +- ابزارهای پیشرفته دیباگ و تست - تکمیل هوشمند کد - کنترل نسخه داخلی -**محیط‌های توسعه ابری** (قیمت‌های مختلف) -- [GitHub Codespaces](https://github.com/features/codespaces) - نسخه کامل VS Code در مرورگر شما -- [Replit](https://replit.com/) - عالی برای یادگیری و به اشتراک‌گذاری کد +**محیط‌های توسعه مبتنی بر ابر** (قیمت‌های مختلف) +- [GitHub Codespaces](https://github.com/features/codespaces) - VS Code کامل در مرورگر شما +- [Replit](https://replit.com/) - عالی برای یادگیری و اشتراک‌گذاری کد - [StackBlitz](https://stackblitz.com/) - توسعه وب فول‌استک فوری -> 💡 **نکته شروع به کار**: با Visual Studio Code شروع کنید – رایگان است، در صنعت به‌طور گسترده استفاده می‌شود، و جامعه عظیمی آموزش‌ها و افزونه‌های مفید می‌سازد. +> 💡 **نکته شروع کار**: از Visual Studio Code شروع کنید – رایگان، پرکاربرد در صنعت و جامعه بزرگی که آموزش‌ها و افزونه‌های مفید می‌سازند دارد. -### مرورگرهای وب: آزمایشگاه پنهان توسعه شما +### مرورگرهای وب: آزمایشگاه مخفی توسعه شما -خوب، آماده باشید که ذهنتان کاملاً منفجر شود! می‌دانید که شما از مرورگرها برای گشت‌وگذار در شبکه‌های اجتماعی و تماشای ویدئو استفاده می‌کنید؟ خب، معلوم شده که آن‌ها تمام این مدت یک آزمایشگاه توسعه فوق‌العاده پنهانی داشته‌اند که فقط منتظر بودند شما آن را کشف کنید! +خب، آماده باشید که کاملاً شگفت‌زده شوید! می‌دانید چطور از مرورگرها برای گشت‌وگذار در شبکه‌های اجتماعی و تماشای ویدیو استفاده می‌کنید؟ خوب، معلوم شده که آن‌ها مدت‌هاست همین آزمایشگاه توسعه‌دهندگان شگفت‌انگیز را مخفی کرده‌اند و منتظر شما بوده‌اند که کشفش کنید! -هر بار که روی یک صفحه وب راست‌کلیک می‌کنید و «Inspect Element» را انتخاب می‌کنید، شما در دنیای پنهانی از ابزارهای توسعه‌دهنده باز می‌کنید که واقعاً قدرتمندتر از برخی نرم‌افزارهای گران‌قیمتی هستند که قبلاً برایشان صدها دلار می‌پرداختم. مثل کشف اینکه آشپزخانه معمولی شما پشت یک پنل مخفی آزمایشگاه یک سرآشپز حرفه‌ای را پنهان کرده است! -اولین باری که کسی ابزارهای توسعه‌دهنده مرورگر را به من نشان داد، حدود سه ساعت فقط کلیک می‌کردم و می‌گفتم «صبر کن، اینم می‌تونه این کارو بکنه؟!» شما واقعاً می‌توانید هر وب‌سایتی را در زمان واقعی ویرایش کنید، دقیقاً ببینید همه چیز چقدر سریع بارگذاری می‌شود، تست کنید سایت‌تان روی دستگاه‌های مختلف چگونه به‌نظر می‌رسد و حتی جاوااسکریپت را مثل یک حرفه‌ای دیباگ کنید. این واقعاً ذهن را متحیر می‌کند! +هر بار که روی صفحه وب کلیک راست می‌کنید و «Inspect Element» را انتخاب می‌کنید، دنیایی پنهان از ابزارهای توسعه‌دهنده را باز می‌کنید که واقعاً قدرتمندتر از بعضی نرم‌افزارهای گران‌قیمتی است که من قبلاً صدها دلار بابتشان می‌پرداختم. انگار آشپزخانه معمولی شما پشت یک پنل مخفی آزمایشگاه یک سرآشپز حرفه‌ای را مخفی کرده است! +اولین باری که کسی ابزارهای توسعه‌دهنده مرورگر را به من نشان داد، نزدیک سه ساعت فقط کلیک می‌کردم و می‌گفتم «صبر کن، این هم می‌تواند این کار را بکند؟!» شما عملاً می‌توانید هر وب‌سایتی را به صورت زنده ویرایش کنید، دقیقاً ببینید همه چیز با چه سرعتی بارگذاری می‌شود، تست کنید سایتتان روی دستگاه‌های مختلف چطور نمایش داده می‌شود و حتی جاوااسکریپت را مثل یک حرفه‌ای دیباگ کنید. این فوق‌العاده شگفت‌انگیز است! **دلیل اینکه مرورگرها سلاح مخفی شما هستند:** -وقتی وب‌سایت یا برنامه وبی می‌سازید، باید ببینید در دنیای واقعی چطور به نظر می‌رسد و چگونه رفتار می‌کند. مرورگرها نه تنها کار شما را نمایش می‌دهند، بلکه بازخورد دقیق درباره عملکرد، دسترسی‌پذیری و مشکلات احتمالی ارائه می‌دهند. +زمانی که یک وب‌سایت یا برنامه وب می‌سازید، باید ببینید در دنیای واقعی چگونه به نظر می‌رسد و رفتار می‌کند. مرورگرها فقط کار شما را نمایش نمی‌دهند بلکه بازخورد دقیق درباره عملکرد، دسترسی و مشکلات احتمالی ارائه می‌کنند. #### ابزارهای توسعه‌دهنده مرورگر (DevTools) -مرورگرهای مدرن شامل مجموعه‌های توسعه جامعی هستند: +مرورگرهای مدرن مجموعه‌های توسعه جامعی دارند: -| دسته ابزار | کارکرد | مثال کاربرد | +| دسته ابزار | عملکرد آن | نمونه مورد استفاده | |---------------|--------------|------------------| -| **بازرس المان (Element Inspector)** | مشاهده و ویرایش HTML/CSS در زمان واقعی | تنظیم استایل‌ها برای دیدن نتایج فوری | -| **کنسول (Console)** | مشاهده پیام‌های خطا و تست جاوااسکریپت | رفع اشکال و آزمایش کد | -| **نظارت شبکه (Network Monitor)** | پیگیری بارگذاری منابع | بهینه‌سازی عملکرد و زمان بارگذاری | -| **بررسی دسترسی‌پذیری (Accessibility Checker)** | تست طراحی فراگیر | اطمینان از کارکرد سایت برای همه کاربران | -| **شبیه‌ساز دستگاه (Device Simulator)** | پیش‌نمایش در اندازه صفحه‌های مختلف | تست طراحی واکنش‌گرا بدون دستگاه‌های متعدد | +| **بازرس عناصر** | مشاهده و ویرایش HTML/CSS به صورت زنده | تنظیم استایل برای دیدن نتیجه فوری | +| **کنسول** | دیدن پیام‌های خطا و تست جاوااسکریپت | دیباگ مشکلات و آزمایش کد | +| **نظارت شبکه** | پیگیری بارگذاری منابع | بهینه‌سازی عملکرد و زمان بارگذاری | +| **بررسی دسترسی‌پذیری** | تست طراحی فراگیر | اطمینان از عملکرد سایت برای همه کاربران | +| **شبیه‌ساز دستگاه** | پیش‌نمایش روی اندازه‌های مختلف صفحه | تست طراحی واکنش‌گرا بدون دستگاه‌های متعدد | -#### مرورگرهای پیشنهادی برای توسعه +#### مرورگرهای توصیه‌شده برای توسعه -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - ابزارهای توسعه استاندارد صنعت با مستندات گسترده -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - ابزارهای عالی برای CSS Grid و دسترسی‌پذیری -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - مبتنی بر کرومیوم با منابع توسعه‌دهنده مایکروسافت +- **[کروم](https://developers.google.com/web/tools/chrome-devtools/)** - ابزارهای توسعه استاندارد صنعت با مستندات جامع +- **[فایرفاکس](https://developer.mozilla.org/docs/Tools)** - ابزارهای عالی CSS Grid و دسترسی‌پذیری +- **[اج](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - ساخته شده روی کرومیوم با منابع توسعه مایکروسافت -> ⚠️ **نکته مهم درباره تست:** همیشه وب‌سایت‌های خود را در مرورگرهای مختلف آزمایش کنید! چیزی که در Chrome عالی است، ممکن است در Safari یا Firefox متفاوت به‌نظر برسد. توسعه‌دهندگان حرفه‌ای برای اطمینان از یک تجربه کاربری یکنواخت در همه مرورگرهای اصلی تست می‌کنند. +> ⚠️ **نکته مهم تست:** حتماً وب‌سایت‌های خود را در مرورگرهای مختلف آزمایش کنید! چیزی که در کروم بی‌نقص کار می‌کند ممکن است در سافاری یا فایرفاکس متفاوت به نظر برسد. توسعه‌دهندگان حرفه‌ای در همه مرورگرهای اصلی تست می‌کنند تا تجربه کاربری یکنواختی ایجاد کنند. -### ابزارهای خط فرمان: دروازه شما به قدرت‌های فراوان توسعه‌دهنده +### ابزارهای خط فرمان: دروازه شما به ابرقدرت‌های توسعه‌دهنده -خب، بیایید درباره خط فرمان کاملاً صادق باشیم، چون می‌خواهم این را از کسی بشنوید که واقعاً آن را درک می‌کند. وقتی اولین بار آن را دیدم – فقط یک صفحه سیاه ترسناک با متن چشمک‌زن – واقعاً فکر کردم، «نه، هرگز! این شبیه چیزی از فیلم هکرهای دهه ۸۰ است و من قطعاً به اندازه کافی باهوش نیستم!» 😅 +باشه، بیایید اینجا یک لحظه کاملاً صادق باشیم درباره خط فرمان، چون می‌خواهم این حرف را از کسی که واقعاً می‌فهمد به شما بزنم. وقتی اولین بار آن را دیدم – فقط یک صفحه سیاه ترسناک با متنی که چشمک می‌زد – واقعاً فکر کردم «نه، هرگز! این مثل یک فیلم هکری دهه ۱۹۸۰ است، و من قطعاً به اندازه کافی باهوش نیستم!» 😅 -اما این چیزی است که دلم می‌خواست آن موقع بشنوم و الان به شما می‌گویم: خط فرمان ترسناک نیست – در واقع مثل داشتن یک گفتگوی مستقیم با کامپیوترتان است. آن را مثل تفاوت بین سفارش غذا از یک اپ شیک با عکس‌ها و منوها (که خوب و راحت است) در نظر بگیرید و رفتن به رستوران محله خودتان که آشپز دقیقاً می‌داند چه چیزی دوست دارید و فقط با گفتن «لطفاً مرا با چیزی شگفت‌انگیز سورپرایز کن» می‌تواند چیزی عالی درست کند. +اما چیزی که آرزو داشتم آن زمان کسی به من می‌گفت، و همین الان به شما می‌گویم این است: خط فرمان ترسناک نیست – در واقع مثل یک گفتگوی مستقیم با کامپیوتر شماست. تصور کنید تفاوت سفارش غذا از طریق یک اپ fancy با عکس‌ها و منوها (که راحت است) با رفتن به رستوران محلی مورد علاقه‌تان است که آشپز دقیقاً می‌داند چه چیزی دوست دارید و فقط با گفتن «یک سوپرایز عالی برایم بیاور» می‌تواند چیزی بی‌نظیر آماده کند. -خط فرمان جایی است که توسعه‌دهندگان حس می‌کنند واقعاً جادوگر هستند. چند کلمه به ظاهر جادویی (باشه، آنها دستور هستند، اما مثل جادو به نظر می‌رسند!) تایپ می‌کنید، اینتر می‌زنید و بوم – ساختارهای پروژه کامل، نصب ابزارهای قدرتمند از سراسر جهان، یا راه‌اندازی برنامه خود بر روی اینترنت برای میلیون‌ها نفر رخ می‌دهد. وقتی یکبار طعم این قدرت را بچشید، واقعاً معتادکننده است! +خط فرمان جایی است که توسعه‌دهندگان احساس می‌کنند جادوگرانی واقعی هستند. چند کلمه که ظاهراً جادویی هستند (خب، در واقع فرمان هستند، اما احساس جادویی دارند!) تایپ می‌کنید، اینتر می‌زنید و بوم – ساختار کل پروژه را ایجاد می‌کنید، ابزارهای قدرتمند از سراسر جهان نصب می‌کنید، یا برنامه‌تان را برای میلیون‌ها نفر به اینترنت می‌فرستید. وقتی اولین طعم این قدرت را بچشید، واقعاً اعتیادآور است! **چرا خط فرمان ابزار مورد علاقه شما خواهد شد:** -در حالی که رابط‌های گرافیکی برای بسیاری از کارها عالی هستند، خط فرمان در اتوماسیون، دقت و سرعت برتری دارد. بسیاری از ابزارهای توسعه عمدتاً از طریق خط فرمان کار می‌کنند و یادگیری استفاده بهینه از آنها می‌تواند به‌شدت بهره‌وری شما را افزایش دهد. +در حالی که رابط‌های گرافیکی برای خیلی از کارها عالی‌اند، خط فرمان در اتوماسیون، دقت و سرعت بی‌نظیر است. بسیاری از ابزارهای توسعه عمدتاً از طریق خط فرمان کار می‌کنند و یادگیری کارآمد آن‌ها می‌تواند بهره‌وری شما را به طرز چشمگیری افزایش دهد. ```bash -# مرحله ۱: ایجاد و رفتن به دایرکتوری پروژه +# مرحله ۱: ایجاد و رفتن به پوشه پروژه mkdir my-awesome-website cd my-awesome-website ``` **این کد چه کاری انجام می‌دهد:** - **ایجاد** یک پوشه جدید به نام "my-awesome-website" برای پروژه شما -- **رفتن** به داخل پوشهٔ تازه ایجاد شده برای شروع کار +- **رفتن** به داخل پوشه تازه ایجاد شده برای شروع کار ```bash # مرحله ۲: پروژه را با package.json مقداردهی اولیه کنید npm init -y -# ابزارهای توسعه مدرن را نصب کنید +# نصب ابزارهای توسعه مدرن npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**مرحله به مرحله، این کاری است که انجام می‌شود:** -- **راه‌اندازی** پروژه جدید Node.js با تنظیمات پیش‌فرض با دستور `npm init -y` -- **نصب** Vite به عنوان یک ابزار ساخت مدرن برای توسعه سریع و ساخت‌های تولیدی -- **اضافه کردن** Prettier برای قالب‌بندی خودکار کد و ESLint برای بررسی کیفیت کد -- **استفاده از** گزینه `--save-dev` برای نشانه‌گذاری این‌ها به عنوان وابستگی‌های مخصوص توسعه +**گام به گام، این اتفاقات رخ می‌دهد:** +- **راه‌اندازی** یک پروژه Node.js جدید با تنظیمات پیش‌فرض با دستور `npm init -y` +- **نصب** Vite به عنوان یک ابزار ساخت مدرن برای توسعه سریع و ساخت تولید +- **افزودن** Prettier برای قالب‌بندی اتوماتیک کد و ESLint برای بررسی کیفیت کد +- **استفاده** از پرچم `--save-dev` برای مشخص کردن این‌ها به عنوان وابستگی‌های فقط توسعه ```bash -# مرحله ۳: ایجاد ساختار پروژه و فایل‌ها +# مرحله ۳: ساختار و فایل‌های پروژه را ایجاد کنید mkdir src assets echo 'My Site

Hello World

' > index.html -# شروع سرور توسعه +# سرور توسعه را راه‌اندازی کنید npx vite ``` -**در بالا، ما:** -- **سازماندهی** پروژه با ساخت پوشه‌های جداگانه برای کد منبع و محتوا -- **ساخت** یک فایل HTML پایه با ساختار درست سند -- **راه‌اندازی** سرور توسعه 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/)** | قالب‌بندی کد | حفظ یکنواختی قالب کد و خوانایی آن | +| **[Git](https://git-scm.com/)** | کنترل نسخه | پیگیری تغییرات، همکاری با دیگران، پشتیبان‌گیری از کارتان | +| **[Node.js & npm](https://nodejs.org/)** | محیط اجرای جاوااسکریپت و مدیریت بسته‌ها | اجرای جاوااسکریپت خارج از مرورگر، نصب ابزارهای توسعه مدرن | +| **[Vite](https://vitejs.dev/)** | ابزار ساخت و سرور توسعه | توسعه بسیار سریع با جایگزینی داغ ماژول | +| **[ESLint](https://eslint.org/)** | کیفیت کد | پیدا کردن و رفع خودکار مشکلات در جاوااسکریپت | +| **[Prettier](https://prettier.io/)** | قالب‌بندی کد | حفظ قالب‌بندی یکنواخت و خوانایی کد | -#### گزینه‌های مخصوص پلتفرم +#### گزینه‌های مربوط به پلتفرم **ویندوز:** -- **[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)** 💻 - خط فرمان سنتی ویندوز +- **[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://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** 💻 - خط فرمان سنتی ویندوز -**macOS:** +**مک‌اواس:** - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - برنامه ترمینال داخلی -- **[iTerm2](https://iterm2.com/)** - ترمینال پیشرفته با ویژگی‌های اضافه +- **[iTerm2](https://iterm2.com/)** - ترمینال ارتقا یافته با امکانات پیشرفته **لینوکس:** - **[Bash](https://www.gnu.org/software/bash/)** 💻 - شل استاندارد لینوکس @@ -659,193 +660,195 @@ npx vite > 💻 = از پیش روی سیستم عامل نصب شده است -> 🎯 **مسیر یادگیری:** با دستورات پایه‌ای مانند `cd` (تغییر پوشه)، `ls` یا `dir` (دیدن فایل‌ها)، و `mkdir` (ساخت پوشه) شروع کنید. با دستورات مدرن جریان کاری مانند `npm install`، `git status` و `code .` (باز کردن پوشه فعلی در VS Code) تمرین کنید. هرچه راحت‌تر شدید، دستورات پیشرفته‌تر و تکنیک‌های اتوماسیون را به‌طور طبیعی یاد خواهید گرفت. +> 🎯 **مسیر یادگیری**: با دستورات پایه‌ای مثل `cd` (تغییر پوشه)، `ls` یا `dir` (نمایش فایل‌ها) و `mkdir` (ایجاد پوشه) شروع کنید. با دستورات متداول مثل `npm install`، `git status` و `code .` (باز کردن پوشه جاری در VS Code) تمرین کنید. وقتی راحت‌تر شدید، به طور طبیعی دستورات پیشرفته‌تر و تکنیک‌های اتوماسیون را یاد می‌گیرید. -### مستندسازی: مربی همیشگی و در دسترس شما +### مستندسازی: مربی یادگیری همیشه دردسترس شما -خوب، اجازه دهید یک راز کوچک بگویم که باعث می‌شود حس بهتری نسبت به مبتدی بودن داشته باشید: حتی توسعه‌دهندگان باتجربه مقدار زیادی از وقت خود را صرف خواندن مستندات می‌کنند. و این به این دلیل نیست که نمی‌دانند دارند چه کار می‌کنند – بلکه نشانه‌ای از خرد است! +باشه، یک راز کوچک بگویم که باعث می‌شود حس خیلی بهتری نسبت به تازه‌کار بودن بگیرید: حتی با‌تجربه‌ترین توسعه‌دهندگان بخش عظیمی از وقت خود را صرف خواندن مستندات می‌کنند. و این به این دلیل نیست که نمی‌دانند دارند چه می‌کنند – بلکه نشانه خرد است! -مستندات را مانند داشتن دسترسی به صبورترین و دانشمندترین معلمان جهان فرض کنید که ۲۴ ساعته و ۷ روز هفته در دسترس هستند. مشکلی در ساعت ۲ نیمه شب؟ مستندات با یک آغوش گرم مجازی و دقیقاً همان جوابی که نیاز دارید در کنار شماست. دوست دارید درباره یک ویژگی جدید جالب که همه درباره آن صحبت می‌کنند یاد بگیرید؟ مستندات با گام‌به‌گام و مثال‌های کاربردی پشتیبانی می‌کند. می‌خواهید بفهمید چرا چیزی آنطور کار می‌کند که می‌کند؟ حدس زدید – مستندات آماده توضیح است به‌گونه‌ای که بالاخره همه چیز برایتان روشن شود! +مستندات را مانند دسترسی به صبورترین و دانا‌ترین معلمان جهان در نظر بگیرید که ۲۴/۷ در دسترس‌اند. اگر ساعت ۲ صبح جایی گیر کردید، مستندات آنجاست با یک آغوش مجازی گرم و دقیقاً پاسخ مورد نیاز شما را دارد. می‌خواهید درباره یک ویژگی جدید جالب که همه درباره‌اش صحبت می‌کنند یاد بگیرید؟ مستندات پشت شماست با مثال‌های قدم‌به‌قدم. سعی دارید بفهمید چرا چیزی اینطور کار می‌کند؟ حدس بزنید – مستندات آماده توضیح آن به گونه‌ای است که بالاخره متوجه می‌شوید! -چیزی که دیدگاه من را کاملاً تغییر داد این است: دنیای توسعه وب به شدت سریع حرکت می‌کند و هیچ‌کس (اصلاً هیچ‌کس!) همه چیز را حفظ نمی‌کند. من توسعه‌دهندگان ارشد با بیش از ۱۵ سال تجربه را دیده‌ام که هنوز نحوه نوشتن سینتکس پایه را جستجو می‌کنند، و می‌دانید چی؟ این شرم‌آور نیست – هوشمندانه است! مسئله داشتن حافظه کامل نیست؛ مسئله این است که بدانید پاسخ‌های مطمئن را سریع کجا پیدا کنید و چگونه آنها را به کار ببرید. +چیزی که دیدم کل دیدگاه من را تغییر داد: دنیای توسعه وب خیلی سریع حرکت می‌کند و هیچ‌کس (واقعاً هیچ‌کس!) همه چیز را حفظ نیست. من توسعه‌دهندگان ارشد با بیش از ۱۵ سال تجربه را دیدم که قواعد پایه را جستجو می‌کنند، و می‌دانید چه؟ این خجالت‌آور نیست – هوشمندانه است! مسأله حافظه کامل نیست؛ بلکه دانستن اینکه چگونه پاسخ‌های قابل اعتماد را سریع پیدا کنید و چطور از آن‌ها استفاده کنید است. -**اینجاست که جادوی واقعی اتفاق می‌افتد:** +**جایی که جادوی واقعی اتفاق می‌افتد:** -توسعه‌دهندگان حرفه‌ای بخش قابل توجهی از وقت خود را صرف خواندن مستندات می‌کنند – نه به این دلیل که نمی‌دانند چه می‌کنند، بلکه به این دلیل که چشم‌انداز توسعه وب به سرعت تغییر می‌کند و برای به‌روز ماندن باید همواره یاد بگیرند. مستندات خوب کمک می‌کند بفهمید نه فقط *چگونه* از چیزی استفاده کنید، بلکه *چرا* و *چه زمانی* باید آن را به کار ببرید. +توسعه‌دهندگان حرفه‌ای بخش زیادی از زمان خود را صرف خواندن مستندات می‌کنند – نه به این دلیل که نمی‌دانند چه می‌کنند، بلکه به این دلیل که چشم‌انداز توسعه وب آنقدر سریع تکامل می‌یابد که برای به‌روز ماندن نیاز به یادگیری مستمر است. مستندات خوب به شما کمک می‌کند نه تنها *چگونه* چیزی را استفاده کنید بلکه *چرا* و *کی* باید استفاده کنید را بفهمید. -#### منابع مستندات ضروری +#### منابع مستندسازی ضروری **[شبکه توسعه‌دهندگان موزیلا (MDN)](https://developer.mozilla.org/docs/Web)** -- استاندارد طلایی مستندات فناوری وب +- مرجع طلایی مستندات فن‌آوری وب - راهنماهای جامع برای HTML، CSS و جاوااسکریپت - شامل اطلاعات سازگاری مرورگرها -- دارای مثال‌های عملی و دموهای تعاملی +- حاوی مثال‌های عملی و دموهای تعاملی **[Web.dev](https://web.dev)** (توسط گوگل) -- بهترین شیوه‌های توسعه وب مدرن -- راهنمای بهینه‌سازی عملکرد +- بهترین روش‌های توسعه وب مدرن +- راهنماهای بهینه‌سازی عملکرد - اصول دسترسی‌پذیری و طراحی فراگیر - مطالعات موردی از پروژه‌های واقعی **[مستندات توسعه‌دهندگان مایکروسافت](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- منابع توسعه مرورگر Edge -- راهنماهای برنامه‌های وب پیش‌رونده -- بینش‌های توسعه کراس‌پلتفرم +- منابع توسعه مرورگر اج +- راهنماهای برنامه وب پیشرو (PWA) +- دیدگاه‌های توسعه کراس‌پلتفرم **[مسیرهای یادگیری Frontend Masters](https://frontendmasters.com/learn/)** -- دوره‌های آموزشی ساختارمند -- دوره‌های ویدیویی از کارشناسان صنعت -- تمرین‌های عملی برنامه‌نویسی +- برنامه‌های یادگیری ساختاریافته +- دوره‌های ویدیویی از متخصصان صنعت +- تمرین‌های کدنویسی عملی -> 📚 **استراتژی مطالعه:** سعی نکنید مستندات را حفظ کنید – بلکه یاد بگیرید چگونه به‌صورت بهینه در آنها جستجو کنید. مراجع پرتکرار را نشانه‌گذاری کرده و با عملکرد جستجو تمرین کنید تا اطلاعات خاص را سریع پیدا کنید. +> 📚 **استراتژی مطالعه:** سعی نکنید مستندات را حفظ کنید – به جای آن یاد بگیرید چگونه به‌طور مؤثر در آن‌ها جستجو کنید. مراجع پرکاربرد را بوکمارک کنید و استفاده از عملکرد جستجو برای پیدا کردن سریع اطلاعات خاص را تمرین کنید. -### 🔧 **بررسی تسلط ابزار: کدام یک با شما هم‌راستا است؟** +### 🔧 **بررسی تسلط ابزار: چه چیزی با شما هماهنگ است؟** -**یک لحظه به اینها فکر کنید:** -- کدام ابزار بیشترین هیجان را برای اولین امتحان به شما می‌دهد؟ (جواب اشتباه وجود ندارد!) -- آیا خط فرمان هنوز ترسناک است یا نسبت به آن کنجکاو شده‌اید؟ -- می‌توانید تصور کنید از ابزارهای توسعه‌دهنده مرورگر برای نگاهی پشت صحنه وب‌سایت‌های محبوب خود استفاده کنید؟ +**کمی فکر کنید:** +- کدام ابزار بیشتر برای امتحان کردن شما را هیجان‌زده می‌کند؟ (جواب اشتباهی وجود ندارد!) +- آیا خط فرمان هنوز ترسناک است یا کنجکاو شده‌اید درباره‌اش بیشتر بدانید؟ +- می‌توانید تصور کنید از ابزارهای توسعه‌دهنده مرورگر برای نگاهی پشت صحنه وب‌سایت‌های مورد علاقه‌تان استفاده کنید؟ ```mermaid pie title "زمان صرف شده توسعه‌دهنده با ابزارها" "ویرایشگر کد" : 40 - "آزمایش مرورگر" : 25 + "آزمون مرورگر" : 25 "خط فرمان" : 15 "مطالعه مستندات" : 15 "اشکال‌زدایی" : 5 ``` -> **نکته جالب:** بیشتر توسعه‌دهندگان حدود ۴۰٪ از وقت خود را در ویرایشگر کد می‌گذرانند، اما ببینید چقدر وقت صرف تست، یادگیری و حل مسئله می‌شود. برنامه‌نویسی فقط نوشتن کد نیست – درباره خلق تجربه‌هاست! +> **نکته جالب:** اکثر توسعه‌دهندگان حدود ۴۰٪ وقت خود را در ویرایشگر کد می‌گذرانند، اما توجه کنید چقدر زمان صرف تست، یادگیری و حل مسئله می‌شود. برنامه‌نویسی فقط نوشتن کد نیست – خلق تجربه است! -✅ **موضوع قابل تأمل:** چیزی که برای فکر کردن جالب است – فکر می‌کنید ابزارهای ساخت وب‌سایت (توسعه) چگونه ممکن است با ابزارهای طراحی ظاهر آن (طراحی) متفاوت باشند؟ این مثل تفاوت بین یک معمار که خانه‌ای زیبا طراحی می‌کند و پیمانکاری است که آن را می‌سازد. هر دو خیلی مهم هستند، اما جعبه ابزارهای متفاوتی نیاز دارند! این نوع تفکر به شما کمک می‌کند تصویری بزرگتر از چگونگی زنده شدن وب‌سایت‌ها ببینید. +✅ **موضوع برای فکر:** یک سوال جالب برای بررسی – به نظر شما ابزارهای ساخت وب‌سایت (توسعه) چطور ممکن است با ابزارهای طراحی چهره آن‌ها متفاوت باشند؟ این مثل تفاوت یک معمار که خانه زیبایی طراحی می‌کند با پیمانکاری است که واقعاً آن را می‌سازد. هر دو مهم‌اند اما جعبه‌ابزارهای متفاوتی نیاز دارند! این دیدگاه کمک می‌کند تصویر بزرگ‌تر ساخت وب‌سایت‌ها را بهتر ببینید. ## چالش GitHub Copilot Agent 🚀 -از حالت Agent استفاده کنید تا چالش زیر را کامل کنید: +از حالت Agent برای انجام چالش زیر استفاده کنید: -**توضیح:** ویژگی‌های یک ویرایشگر کد یا IDE مدرن را بررسی کنید و نشان دهید چگونه می‌تواند جریان کاری شما را به عنوان یک توسعه‌دهنده وب بهبود بخشد. +**توضیح:** ویژگی‌های یک ویرایشگر کد یا IDE مدرن را بررسی کنید و نشان دهید چگونه می‌تواند گردش کار شما را به عنوان توسعه‌دهنده وب بهبود بخشد. -**دستور:** یک ویرایشگر کد یا IDE انتخاب کنید (مثل Visual Studio Code، WebStorm یا IDE مبتنی بر ابر). سه ویژگی یا افزونه را فهرست کنید که به شما در نوشتن، دیباگ یا نگهداری کد کمک می‌کنند. برای هرکدام، توضیح مختصری درباره اینکه چگونه به بهبود جریان کاری شما کمک می‌کند ارائه دهید. +**پرومپت:** یک ویرایشگر کد یا IDE انتخاب کنید (مانند Visual Studio Code، WebStorm یا یک IDE مبتنی بر ابر). سه ویژگی یا افزونه که به شما در نوشتن، دیباگ یا نگهداری کد کمک می‌کند را لیست کنید. برای هر کدام، توضیح کوتاهی درباره مزیت آن برای گردش کارتان ارائه دهید. --- ## 🚀 چالش -**خب، کارآگاه، برای اولین پرونده آماده‌ای؟** +**خب، کارآگاه، آماده اولین پرونده‌ات هستی؟** -حالا که این پایه عالی را بدست آورده‌ای، ماجراجویی‌ای داریم که به شما کمک می‌کند دنیای برنامه‌نویسی را چقدر متنوع و جذاب است ببینید. و گوش کن – هنوز درباره نوشتن کد نیست، پس نگران نباش! خودت را مثل یک کارآگاه زبان برنامه‌نویسی در اولین پرونده هیجان‌انگیز خودت تصور کن! +حالا که این پایه عالی را بدست آورده‌ای، یک ماجراجویی دارم که به تو کمک می‌کند ببینی دنیای برنامه‌نویسی چقدر متنوع و شگفت‌انگیز است. و گوش کن – این مربوط به نوشتن کد نیست پس استرس نداشته باش! خودت را مثل یک کارآگاه زبان برنامه‌نویسی تصور کن که اولین پرونده هیجان‌انگیز خود را دارد! -**ماموریت تو، اگر بخواهی قبولش کنی:** -۱. **کاوشگر زبان شو:** سه زبان برنامه‌نویسی از دنیاهای کاملاً متفاوت انتخاب کن – شاید یکی که وب‌سایت می‌سازد، یکی که اپ موبایل می‌سازد و یکی که داده‌های علمی را پردازش می‌کند. نمونه‌هایی از همان کار ساده نوشته شده به هر کدام پیدا کن. قول می‌دهم از اینکه چقدر می‌توانند در عین انجام همان کار کاملاً متفاوت باشند شگفت‌زده شوی! +**ماموریت تو، اگر قبول کنی:** +1. **کاوشگر زبان شو:** سه زبان برنامه‌نویسی از دنیاهای کاملاً متفاوت انتخاب کن – مثلاً یکی برای ساخت وب‌سایت، یکی برای ساخت اپ موبایل و یکی برای تحلیل داده دانشمندان. نمونه‌هایی از همان کار ساده در هر زبان پیدا کن. قول می‌دهم از تفاوت آن‌ها در انجام همان کار شگفت‌زده خواهی شد! -۲. **داستان منشأ آنها را کشف کن:** چه چیزی هر زبان را خاص می‌کند؟ یک حقیقت جالب – هر زبان برنامه‌نویسی به این دلیل ساخته شده که کسی فکر کرده، «می‌دانی؟ باید راه بهتری برای حل این مشکل خاص وجود داشته باشد.» می‌توانی بفهمی آن مشکلات چه بودند؟ بعضی از این داستان‌ها واقعاً جذاب هستند! +2. **داستان‌های منشأ را کشف کن:** چه چیزی هر زبان را ویژه می‌کند؟ این یک حقیقت جالب است – هر زبان برنامه‌نویسی به این دلیل ایجاد شده که کسی فکر کرده «می‌دونی چی؟ باید راه بهتری برای حل این مشکل خاص باشد.» می‌توانی بفهمی این مشکلات چه بودند؟ بعضی از این داستان‌ها واقعاً جذاب‌اند! -۳. **با جوامع آنها آشنا شو:** ببین چقدر جامعه هر زبان خوش‌قلب و پرشور است. بعضی میلیون‌ها توسعه‌دهنده دارند که دانش را به اشتراک می‌گذارند و کمک می‌کنند، برخی کوچکتر اما صمیمی و حمایتگر هستند. عاشق دیدن شخصیت‌های متفاوت این جوامع خواهی شد! +3. **با جوامع آشنا شو:** ببین هر زبان چقدر جامعه‌اش گرم و پرشور است. بعضی‌ها میلیون‌ها توسعه‌دهنده دارند که دانش به اشتراک می‌گذارند و کمک می‌کنند، بعضی‌ها کوچک‌تر اما خیلی صمیمی و حمایتی‌اند. دیدن شخصیت‌های مختلف این جوامع را دوست داشتی! -۴. **به حس درونیت گوش بده:** کدام زبان در حال حاضر برایت قابل دسترس‌تر به نظر می‌رسد؟ نگران انتخاب «بی‌نقص» نباش – فقط به غرایز خود گوش کن! واقعاً جواب اشتباه وجود ندارد و می‌توانی بعداً زبان‌های دیگر را هم کاوش کنی. +4. **با حس درونیت حرکت کن:** الان کدام زبان برایت راحت‌تر و قابل دسترس‌تر به نظر می‌رسد؟ نگران انتخاب «ایده‌آل» نباش – فقط به غریزه‌ات گوش کن! واقعاً جواب اشتباهی وجود ندارد و همیشه می‌توانی بعداً زبان‌های دیگر را هم کشف کنی. -**کار جایزه‌ای کارآگاهی:** ببین می‌توانی کشف کنی کدام وب‌سایت‌ها یا اپلیکیشن‌های بزرگ با هر زبان ساخته شده‌اند. قول می‌دهم که درباره اینکه اینستاگرام، نتفلیکس یا آن بازی موبایلی که نمی‌توانی دست از آن بکشی با چه تکنولوژی‌هایی ساخته شده‌اند شگفت‌زده شوی! +**کارآگاهی اضافه:** ببین می‌توانی کشف کنی وب‌سایت‌ها یا اپ‌های بزرگ با هر زبان ساخته شده‌اند؟ مطمئنم وقتی بفهمی اینستاگرام، نتفلیکس یا بازی موبایلی که نمی‌توانی از آن دل بکنی با چه زبانی ساخته شده‌اند شوکه می‌شوی! -> 💡 **یادت باشد:** امروز قصد ندارید در هیچ‌کدام از این زبان‌ها خبره شوی. فقط داری با محله آشنا می‌شوی تا تصمیم بگیری کجا می‌خواهی خانه‌ات را بسازی. وقت بگذار، لذت ببر و کنجکاوی‌ات را راهنما کن! +> 💡 **به یاد داشته باش:** امروز قرار نیست در هیچ کدام از این زبان‌ها خبره شوی. فقط داری با محله آشنا می‌شوی قبل از اینکه تصمیم بگیری کجا زمین معامله کنی. وقت بگذار، از آن لذت ببر و بگذار کنجکاوی‌ات راهنمایت باشد! -## بیایید پیشرفت‌هایی که کردی را جشن بگیریم! +## جشن کشفیاتت! -وای، تو امروز مقدار زیادی اطلاعات شگفت‌انگیز یاد گرفتی! واقعاً هیجان‌زده‌ام ببینم چقدر از این سفر شگفت‌انگیز در ذهنت مانده. و به یاد داشته باش – این یک آزمون نیست که باید همه چیز کاملاً درست باشد. این بیشتر مثل جشن گرفتن همه چیزهای جالبی است که درباره دنیای جذابی که قرار است واردش شوی یاد گرفته‌ای! +خدای من، امروز اطلاعات فوق‌العاده زیادی یاد گرفتی! واقعاً هیجان‌زده‌ام که ببینم چقدر از این سفر عالی با تو مانده است. و یادت باشد – این یک آزمون نیست که همه چیز دقیق و کامل باشد. این بیشتر جشن همه چیزهای جالبی است که درباره دنیای شگفت‌انگیزی که می‌خوای واردش شوی یاد گرفته‌ای! -[شرکت در آزمون بعد از درس](https://ff-quizzes.netlify.app/web/) +[شرکت در آزمون پس از درس](https://ff-quizzes.netlify.app/web/) -## مرور و خودآموزی +## بازبینی و مطالعه خودآموز -**وقت بگذار و با آن بازی کن و لذت ببر!** -امروز پیشرفت زیادی داشتید و این چیزی است که باید به آن افتخار کنید! حالا بخش سرگرم‌کننده شروع می‌شود – کشف موضوعاتی که کنجکاوی شما را برانگیخته‌اند. به یاد داشته باشید، این تکلیف نیست – این یک ماجراجویی است! +**وقت بگذار، کاوش کن و از آن لذت ببر!** +امروز پیشرفت زیادی داشتید و این چیزی است که باید به آن افتخار کنید! حالا بخش سرگرم‌کننده می‌آید – کاوش در موضوعاتی که کنجکاوی شما را برانگیخته‌اند. به یاد داشته باشید، این تکلیف نیست – این یک ماجراجویی است! -**عمیق‌تر در آنچه شما را هیجان‌زده می‌کند بپردازید:** +**عمیق‌تر به آنچه شما را هیجان‌زده می‌کند بپردازید:** -**با زبان‌های برنامه‌نویسی به‌صورت عملی آشنا شوید:** -- به وب‌سایت‌های رسمی ۲ تا ۳ زبان که توجه‌تان را جلب کرده‌اند سر بزنید. هر کدام شخصیت و داستان خاص خود را دارند! -- با برخی محیط‌های برنامه‌نویسی آنلاین مانند [CodePen](https://codepen.io/)، [JSFiddle](https://jsfiddle.net/) یا [Replit](https://replit.com/) کار کنید. نترسید که آزمایش کنید – چیزی خراب نمی‌شود! -- درباره چگونگی پیدایش زبان مورد علاقه‌تان بخوانید. جدی می‌گویم، بعضی از این داستان‌های آغاز جذاب هستند و به شما کمک می‌کنند بفهمید چرا زبان‌ها به آن شکلی که دارند کار می‌کنند. +**دست به کار زبان‌های برنامه‌نویسی شوید:** +- از وب‌سایت‌های رسمی ۲-۳ زبان که توجه شما را جلب کرده‌اند بازدید کنید. هر کدام شخصیت و داستان خاص خود را دارند! +- برخی محیط‌های آنلاین برنامه‌نویسی مانند [CodePen](https://codepen.io/)، [JSFiddle](https://jsfiddle.net/) یا [Replit](https://replit.com/) را امتحان کنید. از آزمایش کردن نترسید – چیزی خراب نمی‌شود! +- درباره چگونگی پیدایش زبان برنامه‌نویسی مورد علاقه‌تان مطالعه کنید. واقعاً، برخی از این داستان‌های منشأ بسیار جذاب هستند و به شما کمک می‌کنند بفهمید چرا زبان‌ها به این شکل کار می‌کنند. **با ابزارهای جدید خود راحت شوید:** -- اگر هنوز Visual Studio Code را دانلود نکرده‌اید – همین حالا دانلودش کنید، رایگان است و عاشقش خواهید شد! -- چند دقیقه‌ای در فروشگاه افزونه‌ها بگردید. این مثل فروشگاه برنامه برای ویرایشگر کد شماست! -- ابزارهای توسعه‌دهنده مرورگرتان را باز کنید و اطراف کلیک کنید. نگران این نباشید که همه چیز را بفهمید – فقط با آنچه هست آشنا شوید. +- اگر هنوز دانلود نکرده‌اید، Visual Studio Code را دانلود کنید – رایگان است و مطمئناً آن را دوست خواهید داشت! +- چند دقیقه‌ای در بازار افزونه‌ها (Extensions marketplace) چرخ بزنید. انگار یک فروشگاه اپلیکیشن برای ویرایشگر کد شماست! +- ابزارهای توسعه‌دهنده مرورگرتان را باز کنید و فقط کلیک‌کردن را امتحان کنید. نگران این نباشید که همه چیز را بفهمید – فقط با آنچه هست آشنا شوید. **به جامعه ملحق شوید:** -- چند جامعه توسعه‌دهنده را در [Dev.to](https://dev.to/)، [Stack Overflow](https://stackoverflow.com/) یا [GitHub](https://github.com/) دنبال کنید. جامعه برنامه‌نویسی به‌طور شگفت‌انگیزی به تازه‌واردها خوش‌آمد می‌گوید! -- ویدئوهای برنامه‌نویسی مناسب مبتدی‌ها را در یوتیوب تماشا کنید. خالقان بسیار خوبی وجود دارند که به یاد دارند شروع کردن چه حسی دارد. -- به گردهمایی‌های محلی یا جوامع آنلاین بپیوندید. باور کنید، برنامه‌نویسان عاشق کمک به تازه‌واردها هستند! +- برخی از انجمن‌های برنامه‌نویسان را در [Dev.to](https://dev.to/)، [Stack Overflow](https://stackoverflow.com/) یا [GitHub](https://github.com/) دنبال کنید. جامعه برنامه‌نویسی به شدت به تازه‌واردان خوش‌آمد می‌گوید! +- ویدئوهای برنامه‌نویسی مناسب مبتدی‌ها را در یوتیوب تماشا کنید. خالقان فوق‌العاده‌ای هستند که به یاد دارند شروع کردن چگونه است. +- به میت‌آپ‌های محلی یا جوامع آنلاین بپیوندید. باور کنید، توسعه‌دهندگان عاشق کمک به تازه‌واردان هستند! + +> 🎯 **گوش کنید، این چیزی است که می‌خواهم به خاطر بسپارید**: انتظار نمی‌رود یک شبه جادوگر برنامه‌نویسی شوید! همین حالا فقط در حال آشنا شدن با این دنیای شگفت‌انگیز هستید که قرار است بخشی از آن شوید. وقت خود را بگیرید، از سفر لذت ببرید و به خاطر داشته باشید – هر توسعه‌دهنده‌ای که تحسین می‌کنید روزی دقیقاً همان جایی نشسته بود که شما هستید، هیجان‌زده و شاید کمی سردرگم. این کاملاً طبیعی است و یعنی دارید کار درستی انجام می‌دهید! + -> 🎯 **گوش کنید، این چیزی است که می‌خواهم به یاد داشته باشید**: از شما انتظار نمی‌رود یک شبه جادوگر کد شوید! در حال حاضر، فقط دارید این دنیای جدید شگفت‌انگیز را که قرار است بخشی از آن باشید، می‌شناسید. زمان بگذارید، از سفر لذت ببرید، و به یاد داشته باشید – هر توسعه‌دهنده‌ای که تحسین می‌کنید یک زمانی دقیقاً جایی که شما الان هستید نشسته بود، هیجان‌زده و شاید کمی دلهره‌دار. این کاملاً طبیعی است و یعنی راه را درست می‌روید! ## تکلیف [Reading the Docs](assignment.md) -> 💡 **یه تلنگر کوچک برای تکلیف شما**: خیلی دوست دارم ببینم ابزارهایی که هنوز بررسی نکرده‌ای را کشف می‌کنید! از ویرایشگرها، مرورگرها و ابزارهای خط فرمانی که قبلاً صحبت کردیم عبور کنید – یک جهان شگفت‌انگیز کامل از ابزارهای توسعه خارق‌العاده وجود دارد که منتظر کشف شدن هستند. به دنبال آن‌هایی باشید که به طور فعال نگهداری می‌شوند و جوامع پرجنب‌وجوش و پشتیبان خوبی دارند (این‌ها معمولاً بهترین آموزش‌ها و حمایت‌کننده‌ترین افراد را دارند وقتی که ناگهان گیر می‌کنید و به دست مهربانی نیاز دارید). +> 💡 **یک تلنگر کوچک برای تکلیف شما**: خیلی دوست دارم ببینم ابزارهایی را کشف می‌کنید که هنوز به آنها نپرداخته‌ایم! از ویرایشگرها، مرورگرها و ابزارهای خط فرمانی که قبلاً بحث کردیم عبور کنید – یک دنیای فوق‌العاده از ابزارهای توسعه خارق‌العاده وجود دارد که فقط در انتظار کشف شدن هستند. به دنبال ابزارهایی باشید که به طور فعال نگهداری می‌شوند و جوامع فعالی دارند (این‌ها معمولاً بهترین آموزش‌ها و حمایت‌ترین افراد را دارند وقتی که در نهایت گیر می‌کنید و به کمک دوستانه نیاز دارید). --- -## 🚀 جدول زمانی سفر برنامه‌نویسی شما +## 🚀 جدول زمان‌بندی سفر برنامه‌نویسی شما -### ⚡ **چیزی که می‌توانید در ۵ دقیقه آینده انجام دهید** -- [ ] نشانک ۲ تا ۳ وب‌سایت زبان برنامه‌نویسی که توجه‌تان را جلب کرده‌اند بسازید -- [ ] اگر هنوز Visual Studio Code دانلود نکرده‌اید، آن را دانلود کنید -- [ ] ابزارهای توسعه‌دهنده مرورگر را باز کنید (F12) و در هر وب‌سایتی کلیک کنید -- [ ] در یک جامعه برنامه‌نویسی عضو شوید (Dev.to، Reddit r/webdev، یا Stack Overflow) +### ⚡ **کارهایی که می‌توانید در ۵ دقیقه آینده انجام دهید** +- [ ] نشانک ۲-۳ وب‌سایت زبان برنامه‌نویسی که توجهتان را جلب کرده‌اند بزنید +- [ ] اگر Visual Studio Code را هنوز دانلود نکرده‌اید، دانلود کنید +- [ ] ابزارهای توسعه‌دهنده مرورگرتان (F12) را باز کنید و در هر وب‌سایتی کلیک کنید +- [ ] به یک جامعه برنامه‌نویسی بپیوندید (Dev.to، Reddit r/webdev، یا Stack Overflow) -### ⏰ **چیزی که می‌توانید در این ساعت انجام دهید** -- [ ] آزمون پس از درس را کامل کنید و به پاسخ‌هایتان بیندیشید +### ⏰ **کارهایی که می‌توانید در این ساعت انجام دهید** +- [ ] آزمون پس از درس را کامل کنید و پاسخ‌های خود را مرور کنید - [ ] VS Code را با افزونه GitHub Copilot تنظیم کنید -- [ ] در ۲ زبان برنامه‌نویسی مختلف آنلاین یک نمونه «Hello World» را امتحان کنید -- [ ] ویدئوی «یک روز در زندگی یک توسعه‌دهنده» را در یوتیوب ببینید -- [ ] کار کارآگاهی زبان برنامه‌نویسی خود را شروع کنید (از چالش) +- [ ] یک نمونه «سلام دنیا» را به صورت آنلاین در ۲ زبان برنامه‌نویسی مختلف امتحان کنید +- [ ] یک ویدئوی «یک روز در زندگی یک توسعه‌دهنده» را در یوتیوب تماشا کنید +- [ ] شروع به کار کارآگاهی در زبان برنامه‌نویسی خود کنید (از چالش) ### 📅 **ماجراجویی یک هفته‌ای شما** -- [ ] تکلیف را کامل کنید و ۳ ابزار توسعه جدید را کشف کنید -- [ ] ۵ توسعه‌دهنده یا حساب برنامه‌نویسی را در شبکه‌های اجتماعی دنبال کنید -- [ ] سعی کنید چیزی کوچک در CodePen یا Replit بسازید (حتی فقط «Hello, [نام شما]!») -- [ ] یک نوشته بلاگی از توسعه‌دهنده‌ای درباره سفر برنامه‌نویسی‌اش بخوانید -- [ ] در یک گردهمایی مجازی شرکت کنید یا یک گفتگو درباره برنامه‌نویسی ببینید -- [ ] شروع به یادگیری زبان انتخابی خود با آموزش‌های آنلاین کنید - -### 🗓️ **تغییر ماهانه شما** +- [ ] تکلیف را کامل کنید و ۳ ابزار توسعه جدید را کاوش کنید +- [ ] ۵ توسعه‌دهنده یا حساب برنامه‌نویسی در شبکه‌های اجتماعی دنبال کنید +- [ ] سعی کنید چیزی کوچک در CodePen یا Replit بسازید (حتی فقط «سلام، [نام شما]!») +- [ ] یک پست وبلاگی از یک توسعه‌دهنده درباره سفر برنامه‌نویسی‌اش بخوانید +- [ ] به یک میت‌آپ مجازی بپیوندید یا یک سخنرانی برنامه‌نویسی تماشا کنید +- [ ] شروع به یادگیری زبان انتخابی خود از طریق آموزش‌های آنلاین کنید + +### 🗓️ **تغییر یک ماهه شما** - [ ] اولین پروژه کوچک خود را بسازید (حتی یک صفحه وب ساده هم حساب می‌شود!) -- [ ] به یک پروژه متن‌باز کمک کنید (با اصلاح مستندات شروع کنید) -- [ ] کسی که تازه برنامه‌نویسی را شروع کرده را راهنمایی کنید -- [ ] وب‌سایت نمونه‌کار توسعه‌دهنده‌تان را بسازید -- [ ] با جوامع محلی توسعه‌دهنده یا گروه‌های مطالعه ارتباط برقرار کنید -- [ ] شروع به برنامه‌ریزی برای مرحله بعدی یادگیری خود کنید +- [ ] در یک پروژه متن‌باز مشارکت کنید (با اصلاح مستندات شروع کنید) +- [ ] کسی که تازه برنامه‌نویسی را شروع کرده راهنمایی کنید +- [ ] وب‌سایت نمونه‌کار توسعه‌دهنده خود را بسازید +- [ ] با جوامع محلی توسعه‌دهندگان یا گروه‌های مطالعه ارتباط بگیرید +- [ ] شروع به برنامه‌ریزی مرحله بعدی یادگیری خود کنید -### 🎯 **بازنگری نهایی** +### 🎯 **بازبینی نهایی** -**قبل از رفتن، لحظه‌ای جشن بگیرید:** -- یک چیزی درباره برنامه‌نویسی که امروز شما را هیجان‌زده کرد چیست؟ +**قبل از ادامه، لحظه‌ای جشن بگیرید:** +- یک چیز درباره برنامه‌نویسی که امروز شما را هیجان‌زده کرد چه بود؟ - کدام ابزار یا مفهوم را می‌خواهید اول کاوش کنید؟ -- چگونه درباره شروع این سفر برنامه‌نویسی احساس می‌کنید؟ -- یک سؤال که دوست دارید همین الان از یک توسعه‌دهنده بپرسید چیست؟ +- حس شما نسبت به شروع این سفر برنامه‌نویسی چگونه است؟ +- الان دوست دارید چه سوالی از یک توسعه‌دهنده بپرسید؟ ```mermaid journey title سفر ساخت اعتماد به نفس شما section امروز کنجکاو: 3: You - سر در گم: 4: You - هیجان زده: 5: You + تحت فشار: 4: You + هیجان‌زده: 5: You section این هفته کاوش: 4: You یادگیری: 5: You - ارتباط برقرار کردن: 4: You + ارتباط: 4: You section ماه آینده ساختن: 5: You با اعتماد به نفس: 5: You کمک به دیگران: 5: You ``` -> 🌟 **به یاد داشته باشید**: هر کارشناس یک زمانی تازه‌کار بود. هر توسعه‌دهنده ارشد یک زمانی دقیقاً همان حس شما را داشت – هیجان‌زده، شاید کمی دلهره‌دار، و قطعاً کنجکاو نسبت به آنچه ممکن است. در جمعی شگفت‌انگیز هستید و این سفر فوق‌العاده خواهد بود. به دنیای شگفت‌انگیز برنامه‌نویسی خوش آمدید! 🎉 +> 🌟 **به یاد داشته باشید**: هر کارشناس روزی مبتدی بوده است. هر توسعه‌دهنده ارشدی یک زمانی دقیقاً مثل شما احساس می‌کرد – هیجان‌زده، شاید کمی گیج، و قطعاً کنجکاو درباره آنچه ممکن است. شما در جمعی فوق‌العاده هستید و این سفر شگفت‌انگیز خواهد بود. به دنیای زیبا و جذاب برنامه‌نویسی خوش آمدید! 🎉 --- **سلب مسئولیت**: -این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما در تلاش برای دقت هستیم، لطفاً آگاه باشید که ترجمه‌های خودکار ممکن است حاوی خطاها یا نادرستی‌هایی باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما در قبال هرگونه سوءتفاهم یا تفسیر نادرست ناشی از استفاده از این ترجمه مسئولیتی نداریم. +این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما برای دقت تلاش می‌کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است اشتباهات یا نواقصی داشته باشند. سند اصلی به زبان بومی خود باید منبع معتبر تلقی شود. برای اطلاعات حیاتی، توصیه می‌شود از ترجمه حرفه‌ای انسانی استفاده شود. ما در قبال هرگونه سوءتفاهم یا تفسیر نادرست ناشی از استفاده از این ترجمه مسئولیتی نداریم. \ No newline at end of file diff --git a/translations/fa/AGENTS.md b/translations/fa/AGENTS.md index 4cb34e296..56a3b6a56 100644 --- a/translations/fa/AGENTS.md +++ b/translations/fa/AGENTS.md @@ -2,23 +2,23 @@ ## نمای کلی پروژه -این یک مخزن آموزشی برای آموزش مبانی توسعه وب به مبتدیان است. این دوره آموزشی جامع شامل ۱۲ هفته است که توسط تیم Microsoft Cloud Advocates توسعه یافته و شامل ۲۴ درس عملی درباره JavaScript، CSS و HTML می‌باشد. +این یک مخزن برنامه درسی آموزشی برای آموزش مبانی توسعه وب به مبتدیان است. این برنامه درسی یک دوره جامع ۱۲ هفته‌ای توسعه یافته توسط مدافعان ابر مایکروسافت است که شامل ۲۴ درس عملی در زمینه‌های JavaScript، CSS و HTML می‌باشد. ### اجزای کلیدی -- **محتوای آموزشی**: ۲۴ درس سازمان‌دهی شده به صورت ماژول‌های پروژه‌محور -- **پروژه‌های عملی**: تراریوم، بازی تایپ، افزونه مرورگر، بازی فضایی، برنامه بانکی، ویرایشگر کد و دستیار چت هوش مصنوعی -- **آزمون‌های تعاملی**: ۴۸ آزمون با ۳ سوال هر کدام (ارزیابی قبل و بعد از درس) -- **پشتیبانی چندزبانه**: ترجمه خودکار به بیش از ۵۰ زبان با استفاده از GitHub Actions +- **محتوای آموزشی**: ۲۴ درس سازمان‌یافته در قالب ماژول‌های پروژه‌محور +- **پروژه‌های عملی**: Terrarium، بازی تایپ، افزونه مرورگر، بازی فضایی، برنامه بانکداری، ویرایشگر کد، و دستیار چت هوش مصنوعی +- **آزمون‌های تعاملی**: ۴۸ آزمون با ۳ سوال هر کدام (ارزیابی قبل و بعد درس) +- **پشتیبانی چندزبانه**: ترجمه‌های خودکار به بیش از ۵۰ زبان از طریق GitHub Actions - **فناوری‌ها**: HTML، CSS، JavaScript، Vue.js 3، Vite، Node.js، Express، Python (برای پروژه‌های هوش مصنوعی) ### معماری -- مخزن آموزشی با ساختار مبتنی بر درس‌ها -- هر فولدر درس شامل README، مثال‌های کد و راه‌حل‌ها است -- پروژه‌های مستقل در دایرکتوری‌های جداگانه (quiz-app، پروژه‌های مختلف درس‌ها) +- مخزن آموزشی با ساختار مبتنی بر درس +- هر پوشه درس شامل README، نمونه کدها و راه‌حل‌ها +- پروژه‌های مستقل در دایرکتوری‌های جداگانه (quiz-app و پروژه‌های مختلف درس) - سیستم ترجمه با استفاده از GitHub Actions (co-op-translator) -- مستندات ارائه شده از طریق Docsify و قابل دسترسی به صورت PDF +- مستندسازی ارائه شده توسط Docsify و قابل دسترس به صورت PDF ## دستورات راه‌اندازی @@ -31,7 +31,7 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### راه‌اندازی برنامه آزمون (Vue 3 + Vite) +### راه‌اندازی اپلیکیشن آزمون (Vue 3 + Vite) ```bash cd quiz-app @@ -41,7 +41,7 @@ npm run build # ساخت برای تولید npm run lint # اجرای ESLint ``` -### API پروژه بانکی (Node.js + Express) +### API پروژه بانک (Node.js + Express) ```bash cd 7-bank-project/api @@ -56,7 +56,7 @@ npm run format # قالب‌بندی با Prettier ```bash cd 5-browser-extension/solution npm install -# دستورالعمل‌های بارگذاری افزونه مخصوص مرورگر را دنبال کنید +# دستورالعمل‌های بارگذاری افزونه خاص مرورگر را دنبال کنید ``` ### پروژه‌های بازی فضایی @@ -64,7 +64,7 @@ npm install ```bash cd 6-space-game/solution npm install -# فایل index.html را در مرورگر باز کنید یا از Live Server استفاده کنید +# فایل index.html را در مرورگر باز کنید یا از سرور زنده استفاده کنید ``` ### پروژه چت (بک‌اند پایتون) @@ -72,7 +72,7 @@ npm install ```bash cd 9-chat-project/solution/backend/python pip install openai -# مقداردهی متغیر محیطی GITHUB_TOKEN +# تنظیم متغیر محیطی GITHUB_TOKEN python api.py ``` @@ -80,118 +80,118 @@ python api.py ### برای مشارکت‌کنندگان محتوا -1. **Fork** مخزن به حساب GitHub خود -2. **Clone** کردن Fork روی سیستم محلی -3. ایجاد شاخه جدید برای تغییرات -4. اعمال تغییرات در محتوا یا مثال‌های کد -5. تست تغییرات کد در دایرکتوری پروژه‌های مرتبط -6. ارسال Pull Request با رعایت دستورالعمل‌های مشارکت +1. **فورک کردن مخزن** در حساب GitHub خود +2. **کلون کردن فورک** به صورت محلی +3. **ایجاد شاخه جدید** برای تغییرات +4. اعمال تغییرات در محتوای درس یا نمونه کدها +5. تست تغییرات کد در دایرکتوری‌های پروژه مرتبط +6. ارسال درخواست‌های pull طبق دستورالعمل‌های مشارکت ### برای یادگیرندگان -1. Fork یا clone مخزن -2. به ترتیب به دایرکتوری‌های درس‌ها بروید -3. فایل‌های README هر درس را مطالعه کنید -4. آزمون‌های قبل از درس را در https://ff-quizzes.netlify.app/web/ انجام دهید -5. مثال‌های کد در پوشه‌های درس را بررسی کنید -6. تکالیف و چالش‌ها را کامل کنید -7. آزمون‌های پس از درس را برگزار کنید +1. فورک یا کلون کردن مخزن +2. رفتن به دایرکتوری‌های درس به ترتیب +3. مطالعه فایل‌های README هر درس +4. انجام آزمون‌های قبل از درس در https://ff-quizzes.netlify.app/web/ +5. کار با نمونه کدهای داخل پوشه‌های درس +6. تکمیل تمرین‌ها و چالش‌ها +7. شرکت در آزمون‌های پس از درس -### توسعه به صورت زنده +### توسعه زنده -- **مستندات**: اجرای `docsify serve` در شاخه اصلی (پورت 3000) -- **برنامه آزمون**: اجرای `npm run dev` در دایرکتوری quiz-app -- **پروژه‌ها**: استفاده از افزونه VS Code Live Server برای پروژه‌های HTML -- **پروژه‌های API**: اجرای `npm start` در دایرکتوری‌های مربوط به API +- **مستندسازی**: اجرای `docsify serve` در ریشه (پورت 3000) +- **اپلیکیشن آزمون**: اجرای `npm run dev` در دایرکتوری quiz-app +- **پروژه‌ها**: استفاده از افزونه Live Server در VS Code برای پروژه‌های HTML +- **پروژه‌های API**: اجرای `npm start` در دایرکتوری‌های مربوطه ## دستورالعمل‌های تست -### تست برنامه آزمون +### تست اپلیکیشن آزمون ```bash cd quiz-app npm run lint # بررسی مشکلات سبک کد -npm run build # تأیید موفقیت ساخت +npm run build # اطمینان از موفقیت ساخت ``` -### تست API بانکی +### تست API بانک ```bash cd 7-bank-project/api -npm run lint # بررسی مسائل سبک کد -node server.js # تایید راه‌اندازی سرور بدون خطاها +npm run lint # بررسی مشکلات سبک کد +node server.js # اطمینان از شروع سرور بدون خطاها ``` ### رویکرد کلی تست -- این یک مخزن آموزشی است و تست‌های خودکار جامع ندارد -- تست دستی تمرکز دارد روی: - - اجرای بدون خطا مثال‌های کد - - عملکرد صحیح لینک‌ها در مستندات - - ساخت پروژه‌ها به صورت موفقیت‌آمیز - - رعایت بهترین شیوه‌ها در مثال‌ها +- این مخزن آموزشی فاقد تست‌های خودکار جامع است +- تست دستی بر موارد زیر تمرکز دارد: + - اجرای بدون خطای نمونه کدها + - عملکرد صحیح لینک‌های مستندات + - کامپایل موفق پروژه‌ها + - پیروی نمونه‌ها از بهترین شیوه‌ها -### بررسی‌های قبل از ارسال +### بررسی‌های پیش از ارسال -- اجرای `npm run lint` در دایرکتوری‌هایی که package.json دارند -- اعتبارسنجی لینک‌های مارک‌داون -- تست مثال‌های کد در مرورگر یا Node.js -- اطمینان از حفظ ساختار ترجمه‌ها +- اجرای `npm run lint` در دایرکتوری‌های دارای package.json +- اطمینان از اعتبار لینک‌های markdown +- تست نمونه کدها در مرورگر یا Node.js +- بررسی ساختار درست ترجمه‌ها -## دستورالعمل‌های سبک کد +## راهنمایی‌های سبک کدنویسی -### JavaScript +### جاوااسکریپت -- استفاده از نحو مدرن ES6+ -- پیروی از تنظیمات ESLint موجود در پروژه‌ها -- نام‌گذاری متغیرها و توابع معنادار برای آموزش بهتر -- افزودن کامنت جهت توضیح مفاهیم برای یادگیرندگان -- فرمت کردن با Prettier در صورت تنظیم بودن +- استفاده از نحو ES6+ مدرن +- پیروی از تنظیمات ESLint استاندارد پروژه‌ها +- استفاده از نام‌های معنادار متغیرها و توابع برای وضوح آموزشی +- افزودن کامنت‌های توضیحی برای مفاهیم +- فرمت کد با Prettier در صورت تنظیم ### HTML/CSS -- استفاده از المان‌های معنایی HTML5 +- استفاده از عناصر معنایی HTML5 - اصول طراحی واکنش‌گرا -- شیوه نام‌گذاری کلاس‌ها به صورت واضح -- کامنت‌های توضیحی روش‌های CSS برای یادگیرندگان +- نام‌گذاری کلاس‌ها به صورت واضح +- کامنت‌هایی برای توضیح تکنیک‌های CSS برای یادگیرندگان ### پایتون -- پیروی از دستورالعمل‌های سبک PEP 8 -- مثال‌های کد واضح و آموزشی -- استفاده از نوع‌دهی در مواقع لازم برای یادگیری +- پیروی از قوانین سبک PEP 8 +- نمونه کدهای واضح و آموزشی +- استفاده از تایپ هینت‌ها در صورت امکان و مفید بودن برای یادگیری -### مستندات مارک‌داون +### مستندسازی مارک‌داون -- سلسله مراتب شفاف عناوین -- بلاک کد با مشخص کردن زبان +- سلسله مراتب هدینگ واضح +- بلوک‌های کد با تعیین زبان - لینک به منابع اضافی -- تصاویر و اسکرین‌شات‌ها در دایرکتوری `images/` +- اسکرین‌شات‌ها و تصاویر داخل پوشه‌های `images/` - متن جایگزین برای تصاویر جهت دسترسی‌پذیری ### سازماندهی فایل‌ها -- نام‌گذاری درس‌ها به صورت عددی متوالی (1-getting-started-lessons، 2-js-basics و غیره) -- هر پروژه شامل پوشه‌های `solution/` و معمولاً `start/` یا `your-work/` -- تصاویر در پوشه‌های خاص هر درس واقع در `images/` ذخیره می‌شوند +- شماره‌گذاری درس‌ها به ترتیب (1-getting-started-lessons، 2-js-basics و غیره) +- هر پروژه دارای دایرکتوری‌های `solution/` و معمولاً `start/` یا `your-work/` +- تصاویر در پوشه‌های خاص آن درس در `images/` ذخیره می‌شوند - ترجمه‌ها در ساختار `translations/{language-code}/` قرار دارند ## ساخت و استقرار -### استقرار برنامه آزمون (Azure Static Web Apps) +### استقرار اپلیکیشن آزمون (Azure Static Web Apps) -برنامه quiz-app برای استقرار در Azure Static Web Apps پیکربندی شده است: +اپلیکیشن quiz-app برای استقرار در Azure Static Web Apps تنظیم شده است: ```bash cd quiz-app -npm run build # پوشه dist/ ایجاد می‌کند -# در هر بار پوش کردن به main با استفاده از گردش کار GitHub Actions مستقر می‌کند +npm run build # ایجاد پوشه dist/ +# استقرار از طریق گردش کار GitHub Actions هنگام فشار به شاخه main ``` پیکربندی Azure Static Web Apps: - **مکان برنامه**: `/quiz-app` - **مکان خروجی**: `dist` -- **جریان کاری**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +- **فرآیند کاری**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### تولید PDF مستندات @@ -200,83 +200,83 @@ npm install # نصب docsify-to-pdf npm run convert # تولید PDF از docs ``` -### مستندسازی Docsify +### مستندسازی با Docsify ```bash npm install -g docsify-cli # نصب Docsify به صورت سراسری docsify serve # سرویس‌دهی در localhost:3000 ``` -### ساخت‌های خاص پروژه +### ساخت‌های مخصوص پروژه -هر دایرکتوری ممکن است فرایند ساخت مخصوص به خود را داشته باشد: -- پروژه‌های Vue: اجرای `npm run build` برای تولید نسخه‌های نهایی -- پروژه‌های استاتیک: بدون گام ساخت، فایل‌ها مستقیماً سرو می‌شوند +هر دایرکتوری پروژه ممکن است روند ساخت خاص خود را داشته باشد: +- پروژه‌های Vue: اجرای `npm run build` بسته‌های پروداکشن ایجاد می‌کند +- پروژه‌های استاتیک: بدون مرحله ساخت، فایل‌ها مستقیماً سرو می‌شوند -## دستورالعمل‌های Pull Request +## دستورالعمل‌های ارسال Pull Request ### قالب عنوان -از عناوین شفاف و توصیفی استفاده کنید که حوزه تغییر را مشخص کند: +از عناوین واضح و توصیفی با اشاره به حوزه تغییر استفاده کنید: - `[Quiz-app] افزودن آزمون جدید برای درس X` -- `[Lesson-3] اصلاح اشتباه تایپی در پروژه تراریوم` -- `[Translation] افزودن ترجمه اسپانیایی برای درس ۵` -- `[Docs] به‌روزرسانی دستورالعمل‌های راه‌اندازی` +- `[درس-3] اصلاح غلط املایی در پروژه terrarium` +- `[ترجمه] افزودن ترجمه اسپانیایی برای درس 5` +- `[مستندات] به‌روزرسانی دستورالعمل‌های راه‌اندازی` -### بررسی‌های مورد نیاز +### بررسی‌های اجباری قبل از ارسال PR: 1. **کیفیت کد**: - - اجرای `npm run lint` در دایرکتوری‌های مرتبط - - رفع تمامی خطاها و هشدارهای lint + - اجرای `npm run lint` در دایرکتوری‌های پروژه مربوطه + - اصلاح تمام خطاها و هشدارهای lint 2. **تأیید ساخت**: - - اجرای `npm run build` در صورت نیاز - - اطمینان از عدم وجود خطای ساخت + - اجرای `npm run build` در صورت لزوم + - اطمینان از عدم وجود خطا در ساخت 3. **اعتبارسنجی لینک‌ها**: - - بررسی همه لینک‌های مارک‌داون - - اطمینان از کارکرد ارجاعات تصاویر + - تست تمام لینک‌های markdown + - اطمینان از عملکرد لینک تصاویر 4. **بازبینی محتوا**: - - بازخوانی و بررسی املایی و دستوری - - اطمینان از صحیح و آموزشی بودن مثال‌های کد - - تضمین دقیق بودن ترجمه‌ها و حفظ معنی اصلی + - بازخوانی برای غلط‌های املایی و گرامری + - اطمینان از درستی و آموزشی بودن نمونه کدها + - تأیید حفظ معنی اصلی ترجمه‌ها -### الزامات مشارکت +### نیازمندی‌های مشارکت -- موافقت با CLA مایکروسافت (بررسی خودکار در اولین PR) -- رعایت [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- توافق با CLA مایکروسافت (بررسی خودکار در اولین PR) +- پیروی از [کد رفتار منبع باز مایکروسافت](https://opensource.microsoft.com/codeofconduct/) - مشاهده [CONTRIBUTING.md](./CONTRIBUTING.md) برای دستورالعمل‌های دقیق -- ارجاع به شماره مسائل در توضیحات PR در صورت وجود +- ارجاع شماره مسائل در توضیحات PR در صورت لزوم -### روند بازبینی +### فرایند بازبینی -- PRها توسط نگهدارندگان و جامعه بازبینی می‌شوند -- وضوح آموزشی الویت دارد -- مثال‌های کد باید بهترین شیوه‌ها را دنبال کنند -- ترجمه‌ها برای دقت و انطباق فرهنگی بازبینی می‌شوند +- بازبینی PRها توسط نگه‌داران و جامعه +- اولویت به وضوح آموزشی +- نمونه کدها باید بهترین شیوه‌های جاری را رعایت کنند +- بررسی ترجمه‌ها برای دقت و مناسب بودن فرهنگی ## سیستم ترجمه ### ترجمه خودکار -- استفاده از GitHub Actions با جریان کاری co-op-translator +- استفاده از GitHub Actions با workflow co-op-translator - ترجمه خودکار به بیش از ۵۰ زبان - فایل‌های منبع در دایرکتوری‌های اصلی -- فایل‌های ترجمه شده در `translations/{language-code}/` +- فایل‌های ترجمه شده در ساختار `translations/{language-code}/` ### افزودن بهبودهای ترجمه دستی -1. ورود به فایل در `translations/{language-code}/` -2. اعمال بهبودها با حفظ ساختار -3. اطمینان از عملکرد صحیح مثال‌های کد -4. تست هر محتوای آزمون محلی شده +1. فایل را در `translations/{language-code}/` بیابید +2. بهبودها را در حفظ ساختار اعمال کنید +3. اطمینان داشته باشید نمونه کدها عملکرد دارند +4. هر محتوای آزمون محلی‌شده را تست کنید -### فراداده ترجمه +### متادیتای ترجمه -فایل‌های ترجمه شده شامل هدر فراداده: +فایل‌های ترجمه دارای هدر متادیتا هستند: ```markdown ``` -## عیب‌یابی و رفع مشکلات +## اشکال‌زدایی و عیب‌یابی -### مشکلات متداول +### مشکلات رایج -**برنامه آزمون اجرا نمی‌شود**: -- نسخه Node.js را بررسی کنید (v14+ توصیه شده) -- حذف `node_modules` و `package-lock.json`، سپس اجرای دوباره `npm install` -- بررسی تداخل پورت‌ها (پیش‌فرض: Vite از پورت 5173 استفاده می‌کند) +**اپلیکیشن آزمون اجرا نمی‌شود**: +- نسخه Node.js بررسی شود (v14+ توصیه می‌شود) +- حذف `node_modules` و `package-lock.json` سپس اجرای مجدد `npm install` +- بررسی تداخل پورت (پورت پیش‌فرض Vite برابر ۵۱۷۳ است) -**سرور API اجرا نمی‌شود**: +**سرور API راه‌اندازی نمی‌شود**: - اطمینان از حداقل نسخه Node.js (node >=10) - بررسی استفاده بودن پورت -- اطمینان از نصب همه وابستگی‌ها با `npm install` +- اطمینان از نصب تمامی وابستگی‌ها با `npm install` -**افزونه مرورگر لود نمی‌شود**: -- بررسی صحت قالب manifest.json -- چک کردن کنسول مرورگر برای خطاها -- دنبال کردن دستورالعمل نصب افزونه مرورگر خاص +**افزونه مرورگر بارگذاری نمی‌شود**: +- بررسی قالب‌بندی صحیح manifest.json +- مشاهده کنسول مرورگر برای خطاها +- پیروی از دستورالعمل نصب افزونه مطابق مرورگر **مشکلات پروژه چت پایتون**: -- اطمینان از نصب پکیج OpenAI: `pip install openai` -- بررسی تنظیم متغیر محیطی GITHUB_TOKEN +- نصب بسته OpenAI: `pip install openai` +- تنظیم متغیر محیطی GITHUB_TOKEN - بررسی مجوزهای دسترسی به مدل‌های GitHub -**مستندات Docsify بارگیری نمی‌شود**: -- نصب docsify-cli به صورت جهانی: `npm install -g docsify-cli` -- اجرای دستور از شاخه ریشه مخزن +**عدم سرو مستندات Docsify**: +- نصب docsify-cli به صورت سراسری: `npm install -g docsify-cli` +- اجرای دستور از دایرکتوری ریشه مخزن - اطمینان از وجود فایل `docs/_sidebar.md` ### نکات محیط توسعه - استفاده از VS Code با افزونه Live Server برای پروژه‌های HTML -- نصب افزونه‌های ESLint و Prettier برای قالب‌بندی یکنواخت -- استفاده از DevTools مرورگر برای اشکال‌زدایی JavaScript +- نصب افزونه‌های ESLint و Prettier برای فرمت یکنواخت +- استفاده از ابزارهای توسعه مرورگر برای اشکال‌زدایی جاوااسکریپت - نصب افزونه Vue DevTools برای پروژه‌های Vue ### ملاحظات عملکرد -- تعداد زیاد فایل‌های ترجمه شده (بیش از ۵۰ زبان) باعث بزرگ شدن کلون کامل می‌شود -- استفاده از کلون کم‌عمق در صورت کار صرفاً روی محتوا: `git clone --depth 1` -- حذف ترجمه‌ها از جستجو هنگام کار روی محتوای انگلیسی -- فرایندهای ساخت ممکن است در اجرای اولیه کند باشند (npm install، ساخت Vite) +- تعداد زیاد فایل‌های ترجمه شده (بیش از ۵۰ زبان) سبب حجم بزرگ کلون کامل می‌شود +- استفاده از کلون سطحی در صورت کار صرفاً با محتوا: `git clone --depth 1` +- حذف ترجمه‌ها از جستجو هنگام کار با محتوای انگلیسی +- روندهای ساخت در اولین اجرا ممکن است کند باشند (npm install، ساخت Vite) ## ملاحظات امنیتی ### متغیرهای محیطی -- کلیدهای API هرگز نباید در مخزن کامیت شوند -- استفاده از فایل‌های `.env` (در `.gitignore` موجود است) +- کلیدهای API نباید در مخزن کامیت شوند +- استفاده از فایل‌های `.env` (قبلاً در `.gitignore` قرار دارند) - مستندسازی متغیرهای محیطی مورد نیاز در README پروژه‌ها ### پروژه‌های پایتون - استفاده از محیط‌های مجازی: `python -m venv venv` -- به‌روزرسانی مداوم وابستگی‌ها +- نگه داشتن به‌روزرسانی وابستگی‌ها - توکن‌های GitHub باید حداقل مجوزهای لازم را داشته باشند ### دسترسی به مدل‌های GitHub -- توکن‌های Personal Access Token (PAT) برای مدل‌های GitHub لازم است -- توکن‌ها باید به صورت متغیر محیطی ذخیره شوند -- هرگز توکن‌ها یا اطلاعات اعتبار را کامیت نکنید +- توکن‌های دسترسی شخصی (PAT) برای دسترسی به مدل‌ها لازم است +- توکن‌ها باید در متغیرهای محیطی ذخیره شوند +- هرگز توکن‌ها یا اطلاعات حساس را کامیت نکنید ## یادداشت‌های اضافی @@ -358,51 +358,51 @@ CO_OP_TRANSLATOR_METADATA: - مبتدیان کامل در توسعه وب - دانش‌آموزان و یادگیرندگان خودآموز -- معلمانی که از این دوره در کلاس‌های درس استفاده می‌کنند -- محتوای طراحی شده برای دسترسی‌پذیری و ساخت مهارت تدریجی +- معلمانی که برنامه درسی را در کلاس تدریس می‌کنند +- محتوا به گونه‌ای طراحی شده که دسترسی‌پذیر و به صورت تدریجی مهارت‌ها را می‌سازد ### فلسفه آموزشی -- رویکرد یادگیری پروژه محور -- بررسی‌های دانش مکرر (آزمون‌ها) -- تمرین‌های عملی کد نویسی -- مثال‌های کاربردی دنیای واقعی -- تمرکز بر اصول قبل از فریم‌ورک‌ها +- رویکرد یادگیری مبتنی بر پروژه +- بررسی مکرر دانش (آزمون‌ها) +- تمرین‌های عملی برنامه‌نویسی +- مثال‌های کاربردی در دنیای واقعی +- تأکید بر مبانی پیش از فریمورک‌ها ### نگهداری مخزن -- جامعه فعال از یادگیرندگان و مشارکت‌کنندگان -- به‌روزرسانی‌های منظم وابستگی‌ها و محتوا -- نظارت نگهدارندگان بر مسائل و بحث‌ها -- به‌روزرسانی ترجمه‌ها به صورت خودکار از طریق GitHub Actions +- جامعه فعالی از یادگیرندگان و مشارکت‌کنندگان +- به‌روزرسانی منظم وابستگی‌ها و محتوا +- نظارت بر بحث‌ها و مسائل توسط نگه‌داران +- بروزرسانی ترجمه‌ها به‌طور خودکار توسط GitHub Actions ### منابع مرتبط - [ماژول‌های Microsoft Learn](https://docs.microsoft.com/learn/) -- [منابع Student Hub](https://docs.microsoft.com/learn/student-hub/) -- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) توصیه شده برای یادگیرندگان -- دوره‌های اضافی: هوش مصنوعی مولد، علوم داده، یادگیری ماشین، دوره‌های IoT موجود +- [مرکز دانش‌آموزان Student Hub](https://docs.microsoft.com/learn/student-hub/) +- [گیت‌هاب کوپایلوت GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) توصیه‌شده برای یادگیرندگان +- دوره‌های اضافی: هوش مصنوعی مولد، علوم داده، یادگیری ماشین، برنامه درسی اینترنت اشیا ### کار با پروژه‌های مشخص -برای دستورالعمل‌های دقیق درباره پروژه‌های فردی به فایل README مراجعه کنید: -- `quiz-app/README.md` - برنامه آزمون Vue 3 -- `7-bank-project/README.md` - برنامه بانکی با احراز هویت +برای دستورالعمل‌های دقیق درباره پروژه‌های فردی، به فایل‌های README در: +- `quiz-app/README.md` - اپلیکیشن آزمون Vue 3 +- `7-bank-project/README.md` - برنامه بانکداری با احراز هویت - `5-browser-extension/README.md` - توسعه افزونه مرورگر - `6-space-game/README.md` - توسعه بازی مبتنی بر Canvas -- `9-chat-project/README.md` - پروژه دستیار چت هوش مصنوعی +- `9-chat-project/README.md` - پروژه دستیار چت AI ### ساختار مونو رپو -اگرچه این مخزن یک مونو رپو سنتی نیست، شامل چندین پروژه مستقل است: -- هر درس به صورت جداگانه مستقل است +اگرچه این مخزن یک مونو رپوی سنتی نیست، شامل چند پروژه مستقل است: +- هر درس خودکفا است - پروژه‌ها وابستگی مشترک ندارند -- روی پروژه‌های فردی بدون تأثیر بر دیگران کار کنید -- کلون کامل مخزن برای تجربه کامل دوره لازم است +- می‌توان روی پروژه‌های فردی بدون تأثیر بر دیگران کار کرد +- کلون کل مخزن برای تجربه کامل برنامه درسی لازم است --- -**سلب مسئولیت**: -این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما در تلاش برای دقت هستیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است حاوی خطاها یا نادقتی‌هایی باشند. سند اصلی به زبان بومی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما مسئول هیچ گونه سو تفاهم یا برداشت نادرستی که ناشی از استفاده از این ترجمه باشد، نیستیم. +**سلب مسئولیت**: +این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما برای دقت تلاش می‌کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا عدم دقت‌هایی باشند. سند اصلی به زبان بومی خود باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما مسئول هیچ گونه سوءتفاهم یا تفسیر نادرست ناشی از استفاده از این ترجمه نیستیم. \ No newline at end of file diff --git a/translations/ur/.co-op-translator.json b/translations/ur/.co-op-translator.json index 17c0ea53a..e0dbcc84e 100644 --- a/translations/ur/.co-op-translator.json +++ b/translations/ur/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "bec5e35642176d9e483552bfc82996d8", - "translation_date": "2026-03-06T16:21:37+00:00", + "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d", + "translation_date": "2026-03-27T22:09:45+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "ur" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-03-06T16:29:46+00:00", + "translation_date": "2026-03-27T22:14:49+00:00", "source_file": "AGENTS.md", "language_code": "ur" }, diff --git a/translations/ur/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/ur/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 14be4c6c0..3332be2b1 100644 --- a/translations/ur/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/ur/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,180 +1,181 @@ # پروگرامنگ زبانوں اور جدید ڈویلپر ٹولز کا تعارف -ہیلو، آئندہ کے ڈویلپر! 👋 کیا میں آپ کو کچھ بتا سکتا ہوں جو ہر دن مجھے سن سن کر دلچسپ کر دیتا ہے؟ آپ یہ جاننے والے ہیں کہ پروگرامنگ صرف کمپیوٹرز کے بارے میں نہیں ہے – یہ آپ کے جانوروں کی طرح خیالات کو حقیقت میں لانے کے لیے حقیقی سپر پاورز حاصل کرنے کے بارے میں ہے! +ہیلو، مستقبل کے ڈویلپر! 👋 کیا میں آپ کو کچھ بتا سکتا ہوں جو مجھے ہر روز لرزا دیتا ہے؟ آپ اب دریافت کرنے والے ہیں کہ پروگرامنگ صرف کمپیوٹروں کے بارے میں نہیں ہے – بلکہ یہ اصل سپر پاورز کے بارے میں ہے جو آپ کے سب سے دیوانہ خیالات کو حقیقت میں تبدیل کرتی ہے! -آپ جانتے ہیں وہ لمحہ جب آپ اپنے پسندیدہ ایپ کا استعمال کر رہے ہوتے ہیں اور ہر چیز بلکل صحیح طریقے سے جمی ہوتی ہے؟ جب آپ کسی بٹن کو ٹیپ کرتے ہیں اور کچھ جادوی طور پر ہوتا ہے جو آپ کو کہنے دیتا ہے "واہ، انہوں نے یہ کیسے کیا؟" تو ایسے ہی کسی نے – شاید اپنی پسندیدہ کافی شاپ میں رات 2 بجے اپنی تیسری ایسپریسو کے ساتھ بیٹھا ہوا – وہ کوڈ لکھا جو اس جادو کو تخلیق کیا۔ اور یہ بات آپ کو حیران کر دے گی: اس لیکچر کے آخر تک، آپ نہ صرف سمجھ جائیں گے کہ انہوں نے یہ کیسے کیا، بلکہ آپ خود بھی اسے کرنے کے لیے بےتاب ہوں گے! +آپ کو وہ لمحہ یاد ہے جب آپ اپنی پسندیدہ ایپ استعمال کر رہے ہوتے ہیں اور سب کچھ بالکل ٹھیک جٍڑ جاتا ہے؟ جب آپ کسی بٹن پر ٹیپ کرتے ہیں اور کچھ جادوئی ہوتا ہے جسے دیکھ کر آپ کہتے ہیں "واہ، انہوں نے یہ کیسے کیا؟" تو وہی جادوئی کوڈ کوئی آپ جیسے ہی شخص نے لکھا ہوتا ہے – شاید رات کے 2 بجے اپنی پسندیدہ کافی شاپ میں تیسری ایسپریسو کے ساتھ بیٹھا ہو۔ اور یہ بات آپ کا دماغ ہلا دے گی: اس سبق کے آخر تک، آپ نہ صرف سمجھ جائیں گے کہ انہوں نے یہ کیسے کیا، بلکہ آپ خود بھی اسے آزمانے کے لیے بےتاب ہوں گے! -دیکھیں، میں بالکل سمجھتا ہوں اگر پروگرامنگ ابھی آپ کو خوفزدہ لگتی ہے۔ جب میں نے شروع کیا تھا تو میں نے حقیقتاً یہ سوچا کہ آپ کو کوئی ریاضی کا جینئس ہونا چاہیے یا آپ کو پانچ سال کی عمر سے کوڈنگ کرنی چاہیے۔ لیکن یہ کیا ہے جو میرے نظریے کو مکمل بدل دیا: پروگرامنگ بالکل ویسے ہی ہے جیسے نئی زبان میں بات چیت کرنا سیکھنا۔ آپ "ہیلو" اور "شکریہ" سے شروع کرتے ہیں، پھر کافی کا آرڈر دیتے ہیں، اور پھر اچانک آپ گہری فلسفیانہ گفتگو کرتے ہیں! فرق صرف یہ ہے کہ آپ کمپیوٹرز کے ساتھ بات چیت کر رہے ہوتے ہیں، اور سچ کہوں؟ وہ سب سے زیادہ صبر کرنے والے بات چیت کرنے والے پارٹنر ہیں جو آپ کبھی بھی دیکھیں گے – وہ آپ کی غلطیوں کا کبھی فیصلہ نہیں کرتے اور ہمیشہ دوبارہ کوشش کرنے کے لیے پرجوش رہتے ہیں! +دیکھیں، مجھے پوری طرح سمجھ آتی ہے اگر پروگرامنگ ابھی آپ کو مشکل لگ رہی ہو۔ جب میں نے شروع کیا تھا تو مجھے لگتا تھا کہ آپ کو کوئی ریاضی کا نابغہ ہونا چاہیے یا پانچ سال کی عمر سے کوڈنگ کرنی چاہیے۔ لیکن یہ بات جس نے میری سوچ بدل دی: پروگرامنگ بالکل نئی زبان میں بات چیت سیکھنے جیسی ہے۔ آپ "ہیلو" اور "شکریہ" سے شروع کرتے ہیں، پھر کافی کا آرڈر دینا سیکھتے ہیں، اور پھر آپ گہرے فلسفیانہ مباحثے کر رہے ہوتے ہیں! فرق صرف یہ ہے کہ آپ کمپیوٹروں سے بات کر رہے ہیں، اور سچ پوچھیں تو یہ سب سے صبر والے بات چیت کرنے والے ہیں – وہ کبھی آپ کی غلطیوں پر فیصلے نہیں کرتے اور ہمیشہ دوبارہ کوشش کرنے کے لیے تیار رہتے ہیں! -آج، ہم ان زبردست ٹولز کو دریافت کریں گے جو جدید ویب ڈویلپمنٹ کو ممکن ہی نہیں بلکہ واقعی نشہ آور بناتے ہیں۔ میں بات کر رہا ہوں بالکل وہی ایڈیٹرز، براؤزرز، اور ورک فلو کے بارے میں جو نیٹ فلکس، اسپاٹائفائی، اور آپ کے پسندیدہ انڈی ایپ اسٹوڈیو کے ڈویلپر روزانہ استعمال کرتے ہیں۔ اور یہاں وہ حصہ ہے جو آپ کو خوشی میں جھومنے پر مجبور کر دے گا: ان میں سے زیادہ تر پروفیشنل معیار کے، صنعت کے اسٹینڈرڈ ٹولز مکمل طور پر مفت ہیں! +آج، ہم ان شاندار ٹولز کو دریافت کریں گے جو جدید ویب ڈیولپمنٹ کو ممکن بناتے ہیں اور بالکل نشہ جیسا کر دیتے ہیں۔ میں بالکل انہی ایڈیٹرز، براؤزرز، اور ورک فلو کے بارے میں بات کر رہا ہوں جو نیٹ فلکس، اسپاٹیفائی، اور آپ کے پسندیدہ انڈی ایپ اسٹوڈیو کے ڈویلپر استعمال کرتے ہیں۔ اور یہ حصہ آپ کو خوش کر دے گا: زیادہ تر یہ پروفیشنل، صنعت کی معیاری ٹولز مکمل طور پر مفت ہیں! ![Intro Programming](../../../../translated_images/ur/webdev101-programming.d6e3f98e61ac4bff.webp) -> اسکیچ نوٹ از [ٹومومی امورا](https://twitter.com/girlie_mac) +> سکیچ نوٹ از [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title آپ کا آج کا پروگرامنگ سفر + title آپ کا پروگرامنگ سفر آج section دریافت کریں - پروگرامنگ کیا ہے: 5: You - پروگرامنگ زبانیں: 4: You - ٹولز کا عمومی جائزہ: 5: You - section کھوج کریں - کوڈ ایڈیٹرز: 4: You - براؤزرز اور ڈیولپر ٹولز: 5: You - کمانڈ لائن: 3: You + پروگرامنگ کیا ہے: 5: آپ + پروگرامنگ زبانیں: 4: آپ + آلات کا جائزہ: 5: آپ + section دریافت کریں + کوڈ ایڈیٹرز: 4: آپ + براؤزر اور ڈیو ٹولز: 5: آپ + کمانڈ لائن: 3: آپ section مشق کریں - زبان کا جاسوس: 4: You - ٹول کی کھوج: 5: You - کمیونٹی سے رابطہ: 5: You + زبان کا تفتیشی: 4: آپ + آلات کی تحقیق: 5: آپ + کمیونٹی سے رابطہ: 5: آپ ``` -## آئیں دیکھیں آپ پہلے سے کیا جانتے ہیں! +## دیکھتے ہیں آپ کیا جانتے ہیں! -مذاق شروع کرنے سے پہلے، مجھے یہ جاننے کی تجسس ہے – آپ پہلے سے اس پروگرامنگ کی دنیا کے بارے میں کیا جانتے ہیں؟ اور سنیں، اگر آپ ان سوالات کو دیکھ کر سوچ رہے ہیں "مجھے ان میں سے کچھ بھی بالکل معلوم نہیں"، تو یہ نہ صرف ٹھیک ہے، بلکہ بہترین ہے! اس کا مطلب ہے کہ آپ بالکل صحیح جگہ پر ہیں۔ اس کو کسی ورزش سے پہلے کشش کی طرح سمجھیں – ہم بس اپنے دماغی عضلات کو گرم کر رہے ہیں! +مزے کی باتوں میں جانے سے پہلے، مجھے جاننا ہے – آپ پروگرامنگ کی دنیا کے بارے میں پہلے ہی کیا جانتے ہیں؟ اور سنیں، اگر آپ ان سوالات کو دیکھ کر سوچ رہے ہیں "مجھے اس میں سے بالکل کچھ معلوم نہیں"، تو یہ نہ صرف ٹھیک ہے بلکہ بہترین ہے! اس کا مطلب ہے کہ آپ بالکل صحیح جگہ پر ہیں۔ اس کوئز کو ورزش سے پہلے کی اسٹریچنگ سمجھیں – ہم صرف اپنے دماغی پٹھوں کو گرم کر رہے ہیں! [سبق سے پہلے کا کوئز لیں](https://ff-quizzes.netlify.app/web/) -## وہ مہم جس پر ہم ساتھ روانہ ہو رہے ہیں +## وہ سفر جس پر ہم ساتھ جا رہے ہیں -ٹھیک ہے، میں واقعی اس بارے میں بہت خوش ہوں جو ہم آج دریافت کرنے جا رہے ہیں! سنجیدگی سے، کاش میں آپ کا چہرہ دیکھ سکتا جب کچھ تصورات آپ کو اچانک سمجھ آتے ہیں۔ یہاں وہ شاندار سفر ہے جو ہم ساتھ کر رہے ہیں: +اچھا، میں واقعی آج جو کچھ ہم دریافت کرنے والے ہیں اس کے بارے میں بہت پرجوش ہوں! سچ میں، کاش میں آپ کا چہرہ دیکھ سکتا جب کچھ خیالات آپ کے لیے کلک کریں گے۔ یہاں ہمارا شاندار سفر ہے: -- **پروگرامنگ درحقیقت کیا ہے (اور یہ سب سے زبردست چیز کیوں ہے!)** – ہم یہ جانیں گے کہ کوڈ بالکل وہ پوشیدہ جادو ہے جو آپ کے آس پاس ہر چیز کو چلاتا ہے، اس الارم سے جو کسی طرح جانتا ہے کہ آج پیر ہے، اس الگوردمی تک جو آپ کی نیٹ فلکس کی سفارشات کو بلکل درست کرتا ہے۔ -- **پروگرامنگ زبانیں اور ان کی حیرت انگیز شخصیات** – تصور کریں کہ آپ ایک پارٹی میں جا رہے ہیں جہاں ہر شخص کے پاس مکمل طور پر مختلف سپر پاورز اور مسائل حل کرنے کے طریقے ہیں۔ یہی پروگرامنگ زبانوں کی دنیا ہے، اور آپ کو انہیں مل کر بہت مزہ آئے گا! -- **وہ بنیادی بلاکس جو ڈیجیٹل جادو کو ممکن بناتے ہیں** – ان کو انتہائی تخلیقی LEGO سیٹ سمجھیں۔ جب آپ سمجھ جائیں گے یہ ٹکڑے کس طرح جڑتے ہیں، تو آپ ایسا کچھ بھی بنا سکیں گے جو آپ کی تخیل دیکھتی ہے۔ -- **پروفیشنل ٹولز جو آپ کو بالکل محسوس کرائیں گے کہ آپ کو جادوگر کی چھڑی مل گئی ہے** – میں ڈرامائی نہیں ہوں – یہ ٹولز واقعی آپ کو سپر پاورز کا احساس دلائیں گے، اور بہترین بات؟ یہ وہی ٹولز ہیں جو ماہر استعمال کرتے ہیں! +- **پروگرامنگ اصل میں کیا ہے (اور یہ سب سے زبردست چیز کیوں ہے!)** – ہم دریافت کریں گے کہ کوڈ کیسے ہر چیز کے پیچھے پوشیدہ جادو ہے، اس الارم سے جو پیر کی صبح کا پتہ لگا لیتا ہے، اس الگورتھم تک جو آپ کی نیٹ فلکس کی سفارشات کو بالکل ترتیب دیتا ہے۔ +- **پروگرامنگ زبانیں اور ان کی حیرت انگیز خصوصیات** – تصور کریں کہ آپ ایک پارٹی میں جا رہے ہیں جہاں ہر شخص کے پاس بالکل مختلف سپر پاورز اور مسئلے حل کرنے کے طریقے ہیں۔ پروگرامنگ زبانوں کی دنیا ویسی ہی ہے، اور آپ ان سے مل کر خوش ہوں گے! +- **وہ بنیادی بلاکس جو ڈیجیٹل جادو کو ممکن بناتے ہیں** – انہیں حتمی تخلیقی LEGO سیٹ سمجھیں۔ جب آپ سمجھ لیں گے کہ یہ ٹکڑے کیسے ایک ساتھ آتے ہیں، تو آپ حقیقت میں کچھ بھی اپنا تصور بنا سکتے ہیں۔ +- **پروفیشنل ٹولز جو آپ کو ایسا محسوس کرائیں گے جیسے آپ کو جادوگر کا عصا دیا گیا ہو** – میں ڈرامائی نہیں ہوں – یہ ٹولز واقعتاً آپ کو سپر پاورز کا احساس دیں گے، اور سب سے اچھی بات؟ یہ وہی ٹولز ہیں جو پروفیشنلز استعمال کرتے ہیں! -> 💡 **یہ بات یاد رکھیں**: آج سب کچھ یاد کرنے کی کوشش نہ کریں! ابھی، میں چاہتا ہوں کہ آپ ممکنات کے بارے میں جوش کا احساس کریں۔ تفصیلات قدرتی طور پر یاد رہیں گی جب ہم مل کر مشق کریں گے – یہی حقیقی سیکھنے کا طریقہ ہے! +> 💡 **بات یہ ہے**: آج سب کچھ حفظ کرنے کی کوشش مت کریں! ابھی، بس میں چاہتا ہوں کہ آپ کو ممکنہ چیزوں کے بارے میں جوش محسوس ہو۔ تفصیلات خود بخود یاد رہیں گی جب ہم مشق کریں گے – یہی اصل سیکھنے کا طریقہ ہے! > آپ یہ سبق [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) پر بھی لے سکتے ہیں! -## تو پروگرامنگ کیا *ہے*؟ +## تو آخر پروگرامنگ *کیا* ہے؟ -چلیں، سب سے بڑا سوال حل کریں: پروگرامنگ کیا ہے؟ +اچھا، اب اس لاکھوں ڈالر کے سوال کا جواب دیتے ہیں: پروگرامنگ اصل میں کیا ہے؟ -میں آپ کو ایک کہانی دیتا ہوں جس نے میرے سوچنے کے انداز کو مکمل بدل دیا۔ پچھلے ہفتے، میں اپنی ماں کو ہمارا نیا اسمارٹ ٹی وی ریموٹ استعمال کرنا سکھانے کی کوشش کر رہا تھا۔ میں نے خود کو کہتے سنا "سرخ بٹن دبائیں، لیکن وہ بڑا سرخ نہیں، بایاں طرف چھوٹا سرخ بٹن... نہیں، آپ کا دوسرا بایاں... ٹھیک ہے، اب اسے دو سیکنڈ کے لیے تھامیں، ایک نہیں، تین نہیں..." کیا یہ آپ کو معلوم لگتا ہے؟ 😅 +میں آپ کو ایک کہانی سناتا ہوں جس نے میری سوچ کو مکمل طور پر بدل دیا۔ پچھلے ہفتے، میں اپنی ماں کو نیا سمارٹ ٹی وی ریموٹ استعمال کرنا سکھانے کی کوشش کر رہا تھا۔ میں نے خود کو کہتے سنا، "سرخ بٹن دبائیں، مگر بڑا سرخ نہیں، بائیں طرف والا چھوٹا سرخ... نہیں، آپ کا دوسرا بایاں... ٹھیک ہے، اب اسے دو سیکنڈ تک دبائے رکھیں، ایک نہیں، تین نہیں..." کیا یہ آپ کو معلوم ہے؟ 😅 -یہی پروگرامنگ ہے! یہ جادو ہے جس میں آپ کسی بہت طاقتور چیز کو انتہائی تفصیلی، قدم بہ قدم ہدایات دیتے ہیں جو کہ بالکل واضح ہوں۔ فرق صرف یہ ہے کہ آپ اپنی ماں کو نہیں سمجھا رہے (جو پوچھ سکتی ہے "کون سا سرخ بٹن؟!"), آپ کمپیوٹر کو سمجھا رہے ہیں (جو بالکل ویسا ہی کرتا ہے جیسا آپ کہتے ہیں، چاہے آپ نے جو کہا وہ بالکل آپ کا مطلب نہ ہو)۔ +یہی پروگرامنگ ہے! یہ ایک طاقتور چیز کو انتہائی تفصیلی، قدم بہ قدم ہدایات دینے کا فن ہے، جس میں ہر چیز کو بالکل واضح لکھنا ضروری ہوتا ہے۔ فرق یہ ہے کہ آپ اپنی ماں کو نہیں سمجھا رہے (جو پوچھ سکتی ہیں "کون سا سرخ بٹن؟!"), بلکہ آپ ایک کمپیوٹر کو سمجھا رہے ہیں (جو بالکل ویسا ہی کرے گا جیسا آپ نے کہا، چاہے آپ کا مطلب بالکل وہی نہ ہو)۔ -یہ بات جب میں نے پہلی بار سیکھی تو مجھے حیران کر گئی: کمپیوٹرز دراصل بنیادی طور پر بہت سادہ ہوتے ہیں۔ وہ صرف دو چیزیں سمجھتے ہیں – 1 اور 0، جو اصل میں "ہاں" اور "نہیں" یا "آن" اور "آف" ہوتے ہیں۔ صرف اتنا! لیکن یہیں جادو شروع ہوتا ہے – ہمیں 1 اور 0 میں بولنا نہیں پڑتا جیسا ہم دیے تمغے میں ہوتے ہیں۔ یہاں **پروگرامنگ زبانیں** مدد کرتی ہیں۔ وہ ایسی ہیں جیسے دنیا کے بہترین مترجم جو آپ کے بالکل عام انسانی خیالات کو کمپیوٹر زبان میں تبدیل کر دیتے ہیں۔ +جب میں نے یہ سمجھا تو میری سوچ بدل گئی: کمپیوٹر درحقیقت بہت آسان ہیں۔ وہ صرف دو چیزیں سمجھتے ہیں – 1 اور 0، جو بنیادی طور پر "ہاں" اور "نہیں" یا "آن" اور "آف" ہیں۔ بس! لیکن جادو تب شروع ہوتا ہے جب ہمیں 1 اور 0 میں بات کرنے کی ضرورت نہیں ہوتی۔ یہاں **پروگرامنگ زبانیں** مدد کے لیے آتی ہیں۔ وہ بہترین مترجم کی طرح ہیں جو آپ کے عام انسانوں والے خیالات کو کمپیوٹر کی زبان میں بدل دیتی ہیں۔ -اور یہ بات جو ہر صبح مجھے واقعی حیران کن لگتی ہے: آپ کی زندگی کی ہر ڈیجیٹل چیز کی شروعات کسی ایسے شخص نے کی، شاید پاجامے میں بیٹھا اور کافی پی رہا ہو اور کوڈ ٹائپ کر رہا ہو۔ وہ انسٹاگرام فلٹر جو آپ کو بے عیب بناتا ہے؟ کسی نے وہ کوڈ کیا۔ جو سفارش آپ کو آپ کے نئے پسندیدہ گانے تک لے گئی؟ کسی ڈویلپر نے وہ الگوردم بنایا۔ وہ ایپ جو آپ کو دوستوں کے ساتھ کھانے کا بل تقسیم کرنے میں مدد دیتی ہے؟ ہاں، کسی نے سوچا "یہ کتنا پریشان کن ہے، میں اسے ٹھیک کر سکتا ہوں" اور پھر… کیا کیا! +اور یہ روزانہ میری روح کو جھنجھوڑ دیتا ہے: آپ کی زندگی کی ہر ڈیجیٹل چیز کسی ایسے شخص نے شروع کی جو آپ کی طرح ہو گا، شاید پیجاما پہنے ہوئے، کافی کے کپ کے ساتھ، اپنے لیپ ٹاپ پر کوڈ لکھ رہا ہو۔ وہ انسٹاگرام فلٹر جو آپ کو بے عیب دکھاتا ہے؟ کسی نے وہ کوڈ کیا۔ وہ سفارش جو آپ کو آپ کا نیا پسندیدہ گانا دکھاتی ہے؟ ایک ڈویلپر نے وہ الگورتھم بنایا۔ وہ ایپ جو آپ کو دوستوں کے ساتھ کھانے کے بل تقسیم کرنے میں مدد دیتی ہے؟ ہاں، کسی نے سوچا "یہ تو بہت تکلیف دہ ہے، میں اسے درست کر سکتا ہوں" اور پھر... کیا بھی! -جب آپ پروگرامنگ سیکھتے ہیں، تو آپ صرف نئی مہارت حاصل نہیں کر رہے – آپ اس زبردست کمیونٹی کا حصہ بن رہے ہیں جو حل تلاش کرنے والوں کی ہے جو دن رات سوچتے ہیں، "کیا ہوتا اگر میں ایسی چیز بنا سکتا جو کسی کا دن تھوڑا بہتر بنا دے؟" سچ پوچھیں تو، اس سے زبردست کیا ہو سکتا ہے؟ +جب آپ پروگرامنگ سیکھتے ہیں، تو آپ صرف نیا ہنر نہیں سیکھ رہے – بلکہ آپ اس حیرت انگیز کمیونٹی کا حصہ بن رہے ہیں جو مسائل کا حل نکالتی ہے اور دن بھر سوچتی رہتی ہے، "کیا میں کچھ ایسا بنا سکتا ہوں جو کسی کی زندگی تھوڑا بہتر بنا دے؟" واقعی، اس سے بہترین کیا ہو سکتا ہے؟ -✅ **دلچسپ حقائق کی تلاش**: جب آپ کے پاس وقت ہو تو یہ دلچسپ بات دیکھیں – آپ کے خیال میں دنیا کا پہلا کمپیوٹر پروگرامر کون تھا؟ میں آپ کو اشارہ دیتا ہوں: شاید وہ وہ نہیں جس کی آپ توقع کر رہے ہوں! اس شخص کی کہانی بالکل دلچسپ ہے اور دکھاتی ہے کہ پروگرامنگ ہمیشہ تخلیقی مسائل کے حل اور دیے گئے دائرے سے باہر سوچنے کے بارے میں تھی۔ +✅ **مزے دار حقیقت کی تلاش**: جب آپ کے پاس وقت ہو تو یہ انتہائی دلچسپ معلوم کریں – آپ کے خیال میں دنیا کا پہلا کمپیوٹر پروگرامر کون تھا؟ میں ہیٖنٹ دیتا ہوں: شاید وہ وہ نہیں جس کی آپ توقع کر رہے ہوں! اس شخص کی کہانی انتہائی دلچسپ ہے اور یہ ظاہر کرتی ہے کہ پروگرامنگ ہمیشہ تخلیقی مسئلہ حل کرنے اور باکس کے باہر سوچنے کے بارے میں رہی ہے۔ ### 🧠 **چیک ان کا وقت: آپ کیسا محسوس کر رہے ہیں؟** **ذرا غور کریں:** -- کیا "کمپیوٹرز کو ہدایات دینا" اب آپ کے لیے سمجھ میں آتا ہے؟ -- کیا آپ روزمرہ کا کوئی کام سوچ سکتے ہیں جسے آپ پروگرامنگ سے خودکار کرنا چاہیں گے؟ -- اس پورے پروگرامنگ کے بارے میں آپ کے ذہن میں کیا سوالات اٹھ رہے ہیں؟ +- کیا "کمپیوٹروں کو ہدایات دینا" کا تصور آپ کو اب سمجھ آتا ہے؟ +- کیا آپ ایسی روزمرہ کی کوئی چیز سوچ سکتے ہیں جسے آپ پروگرامنگ کی مدد سے خودکار بنانا چاہیں؟ +- اس پروگرامنگ چیز کے بارے میں آپ کے ذہن میں کون سے سوالات اٹھ رہے ہیں؟ -> **یاد رکھیں**: اگر کچھ تصورات اب مشکل لگ رہے ہیں تو بالکل نارمل ہے۔ پروگرامنگ سیکھنا ایک نئی زبان سیکھنے کی طرح ہے – آپ کے دماغ کو نیورل پاتھ بنانے کے لیے وقت لگتا ہے۔ آپ بہترین کر رہے ہیں! +> **یاد رکھیں**: اگر کچھ خیالات ابھی تھوڑے غیر واضح لگیں تو یہ بالکل نارمل ہے۔ پروگرامنگ سیکھنا ایک نئی زبان سیکھنے جیسا ہے – دماغ کے نیورل راستے بنانے میں وقت لگتا ہے۔ آپ شاندار کر رہے ہیں! -## پروگرامنگ زبانیں جادو کی مختلف ذائقوں کی طرح ہیں +## پروگرامنگ زبانیں جادو کے مختلف ذائقوں کی طرح ہیں -ٹھیک ہے، یہ سننے میں عجیب لگ سکتا ہے، لیکن میرے ساتھ رہیں – پروگرامنگ زبانیں موسیقی کی مختلف اقسام کی بہت طرح کی ہوتی ہیں۔ سوچیں: آپ کے پاس جاز ہے جو ہموار اور فوری ہے، راک جو طاقتور اور سیدھا ہے، کلاسیکل جو نفیس اور منظم ہے، اور ہپ ہاپ جو تخلیقی اور جذباتی ہے۔ ہر انداز کا اپنا ماحول ہوتا ہے، اپنے پرجوش مداحوں کی جماعت ہوتی ہے، اور ہر ایک مختلف مزاجوں اور مواقع کے لیے بالکل مناسب ہوتا ہے۔ +اچھا، یہ تھوڑا عجیب لگ سکتا ہے، لیکن میرے ساتھ رہیں – پروگرامنگ زبانیں موسیقی کی مختلف اقسام جیسی ہیں۔ سوچیں: آپ کے پاس جاز ہے، جو نرم اور فوری ہوتا ہے، راک ہے، جو طاقتور اور سیدھا سادا ہے، کلاسیکل ہے، جو خوبصورت اور منظم ہے، اور ہپ ہاپ ہے، جو تخلیقی اور اظہار خیال ہے۔ ہر انداز کی اپنی فضا، اپنے پرجوش مداح ہیں، اور ہر ایک مختلف موڈز اور مواقع کے لیے بہترین ہے۔ -پروگرامنگ زبانیں بھی بالکل ویسے ہی کام کرتی ہیں! آپ وہی زبان استعمال نہیں کریں گے جو موبائل گیم بنانے کے لیے استعمال کریں وہی زبان موسمیاتی ڈیٹا کے بہت بڑے ذخیرے کے لیے بھی ہو، بالکل ویسے جیسے آپ یوگا کلاس میں ڈیتھ میٹل نہیں بجائیں گے (خیر، زیادہ تر یوگا کلاسوں میں نہیں! 😄)۔ +پروگرامنگ زبانیں بھی بالکل ایسا ہی کام کرتی ہیں! آپ ایک ہی زبان میں تفریحی موبائل گیم نہیں بنائیں گے جس زبان کو آپ بڑے پیمانے پر ماحولیاتی ڈیٹا کے لیے استعمال کریں گے، جیسے آپ یوگا کلاس میں ڈیٹھ میٹل نہیں سنائیں گے (کم از کم زیادہ تر یوگا کلاسوں میں نہیں! 😄)۔ -لیکن ہر بار جب میں اس کے بارے میں سوچتا ہوں تو مجھے حیرت ہوتی ہے: یہ زبانیں دنیا کے سب سے صبر کرنے والے، شاندار مترجم کی طرح ہیں جو آپ کے ساتھ بیٹھی ہوتی ہیں۔ آپ اپنے خیالات اس طرح ظاہر کر سکتے ہیں جو آپ کے انسانی دماغ کے لیے نیچرل ہو، اور وہ سب پیچیدہ کام کرتے ہیں کہ اسے 1 اور 0 میں تبدیل کر دیں جو کمپیوٹر سمجھتے ہیں۔ یہ ایسا ہے جیسے آپ کے پاس ایک ایسا دوست ہو جو انسانی تخلیقیت اور کمپیوٹر منطق دونوں پر عبور رکھتا ہو – اور وہ کبھی تھکتا نہیں، کبھی کافی کے بریک نہیں لیتا، اور کبھی آپ کو ایک ہی سوال دو بار پوچھنے پر نہیں طعنہ دیتا! +لیکن جو چیز مجھے ہر بار حیران کر دیتی ہے وہ یہ ہے: یہ زبانیں دنیا کے سب سے صبر والے، ذہین مترجم کی طرح ہوتی ہیں جو آپ کے بالکل قریب بیٹھا ہے۔ آپ اپنے خیالات اسے اپنے انسانی دماغ کے مطابق بیان کرتے ہیں، اور وہ سب پیچیدہ کام کرکے اسے 1 اور 0 میں بدل دیتے ہیں جو کمپیوٹر بولتے ہیں۔ یہ ایسا ہے جیسے آپ کے پاس ایک ایسا دوست ہو جو "انسانی تخلیق" اور "کمپیوٹر منطق" دونوں میں مکمل ماہر ہو – اور وہ کبھی تھکتا نہیں، کبھی کافی بریک نہیں لیتا، اور کبھی آپ سے ایک ہی سوال دوبارہ پوچھنے پر فیصلہ نہیں کرتا! -### مشہور پروگرامنگ زبانیں اور ان کے استعمال +### مقبول پروگرامنگ زبانیں اور ان کے استعمالات ```mermaid mindmap - root((پروگرامنگ زبانیں)) + root((پروگرامنگ کی زبانیں)) Web Development JavaScript فرنٹ اینڈ جادو - انٹرایکٹو ویب سائٹس + تعاملی ویب سائٹس TypeScript - جاوا اسکرپٹ + اقسام + JavaScript + اقسام انٹرپرائز ایپس Data & AI Python ڈیٹا سائنس مشین لرننگ - خود کاری + خودکار عمل R - شماریات + اعدادوشمار تحقیق Mobile Apps Java - اینڈرائیڈ + اینڈرائڈ انٹرپرائز Swift آئی او ایس - ایپل ماحولیاتی نظام + ایپل ایکو سسٹم Kotlin - جدید اینڈرائیڈ - کثیر المنصوبہ + جدید اینڈرائڈ + کروس پلیٹ فارم Systems & Performance C++ کھیل کارکردگی اہم Rust میموری کی حفاظت - نظام پروگرامنگ + سسٹم پروگرامنگ Go - کلاؤڈ خدمات - توسیع پذیر بیک اینڈ + کلاؤڈ سروسز + پیمانے پر مبنی بیک اینڈ ``` -| زبان | بہترین استعمال کے لیے | کیوں مشہور ہے | -|----------|-------------|------------------| -| **JavaScript** | ویب ڈویلپمنٹ، صارف انٹرفیس | براؤزرز میں چلتی ہے اور تعاملی ویب سائٹس کو طاقت دیتی ہے | -| **Python** | ڈیٹا سائنس، خودکاری، AI | آسانی سے پڑھنے اور سیکھنے والی، طاقتور لائبریریز | -| **Java** | انٹرپرائز ایپلیکیشنز، اینڈرائیڈ ایپس | پلیٹ فارم آزاد، بڑے نظاموں کے لیے مضبوط | -| **C#** | ونڈوز ایپلیکیشنز، گیم ڈویلپمنٹ | مائیکروسافٹ کے ذریعہ مضبوط سپورٹ | -| **Go** | کلاؤڈ سروسز، بیک اینڈ سسٹمز | تیز، سادہ، جدید کمپیوٹنگ کے لیے بنایا گیا | +| زبان | بہترین استعمال | کیوں مشہور ہے | +|----------|----------|------------------| +| **JavaScript** | ویب ڈویلپمنٹ، یوزر انٹرفیس | براؤزرز میں چلتی ہے اور انٹرایکٹو ویب سائٹس کو طاقت دیتی ہے | +| **Python** | ڈیٹا سائنس، آٹومیشن، AI | پڑھنے اور سیکھنے میں آسان، طاقتور لائبریریز | +| **Java** | انٹرپرائز ایپلیکیشنز، اینڈرائیڈ ایپس | پلیٹ فارم سے آزاد، بڑے سسٹمز کے لیے مضبوط | +| **C#** | ونڈوز ایپلیکیشنز، گیم ڈیولپمنٹ | مائیکروسافٹ کے مضبوط نظام کی حمایت | +| **Go** | کلاؤڈ سروسز، بیک اینڈ سسٹمز | تیز، سادہ، جدید کمپیوٹنگ کے لیے ڈیزائن کیا گیا | + +### ہائی-لیول بمقابلہ لو-لیول زبانیں -### ہائی لیول بمقابلہ لو لیول زبانیں +اچھا، یہ وہ تصور تھا جس نے پہلے مجھے مکمل طور پر کنفیوژ کر دیا تھا جب میں نے سیکھنا شروع کیا تھا، اس لیے میں وہ مثال شیئر کرتا ہوں جس نے آخر کار مجھے سمجھایا – اور مجھے امید ہے یہ آپ کو بھی مدد دے گا! -ٹھیک ہے، یہ وہ تصور تھا جس نے پہلی بار جب میں نے سیکھنا شروع کیا تو میرا دماغ گڑبڑ کر دیا، تو میں آپ سے وہ مثال شیئر کرنے جا رہا ہوں جس نے آخرکار مجھے سمجھایا – اور مجھے امید ہے یہ آپ کی بھی مدد کرے گا! +تصور کریں کہ آپ ایسے ملک میں ہیں جہاں آپ زبان نہیں بولتے، اور آپ کو بہت ضرورت ہے کہ قریب ترین باتھ روم کہاں ہے (ہم سب وہ مقام پر پہنچے ہیں، ہے نا؟ 😅): -تصور کریں کہ آپ ایسی جگہ جا رہے ہیں جہاں زبان نہیں آتی اور آپ کو شدید ضرورت ہے قریب ترین غسل خانے کو تلاش کرنے کی (ہم سب یہ حالات دیکھ چکے ہیں، ہے نا؟ 😅): +- **لو-لیول پروگرامنگ** ایسی ہے جیسے آپ وہاں کی مقامی زبان اتنی اچھی بولتے ہوں کہ آپ پھل بیچنے والی دادی سے ثقافتی حوالے، مقامی محاورے، اور اندرونی مذاق کے ساتھ بات کر سکیں جو صرف وہی سمجھے جو وہاں بڑے ہوئے ہوں۔ یہ بہت متاثر کن اور انتہائی موثر ہے... اگر آپ فلوئنٹ ہوں! لیکن جب آپ صرف باتھ روم تلاش کر رہے ہوں تو یہ کافی پیچیدہ ہے۔ -- **لو لیول پروگرامنگ** ایسے ہے جیسے آپ نے مقامی بولی اتنی اچھی سیکھ لی ہے کہ آپ اس پھل بیچنے والی دادی کے ساتھ چٹکلے، ثقافتی حوالے، اور مقامی زبان میں بات کر سکتے ہیں جو صرف وہ لوگ سمجھتے ہیں جو وہاں شوروم میں بڑے ہوئے ہوں۔ یہ بہت متاثر کن اور انتہائی مؤثر ہے... اگر آپ واقعی ماہر ہوں! لیکن جب آپ صرف غسل خانہ تلاش کر رہے ہوں تو بہت مشکل۔ -- **ہائی لیول پروگرامنگ** ایسے ہے جیسے آپ کا وہ زبردست مقامی دوست جو آپ کو بالکل سمجھتا ہے۔ آپ انگریزی میں کہہ سکتے ہیں "مجھے واقعی باتھ روم ملنا ہے"، اور وہ ساری ثقافتی ترجمہ کر کے آپ کو ایسی ہدایات دیتا ہے جو آپ کے غیر مقامی دماغ کے لئے بلکل آسان ہوں۔ +- **ہائی-لیول پروگرامنگ** ایسی ہے جیسے آپ کا ایک شاندار مقامی دوست ہو جو آپ کی بات فوراً سمجھ لے۔ آپ آسان انگریزی میں کہہ سکتے ہیں "مجھے باتھ روم جلدی چاہیے" اور وہ تمام ثقافتی ترجمہ سنبھال کر آپ کو ایسے راستے بتائے جو آپ کے غیر مقامی دماغ کو بالکل سمجھ آئیں۔ -پروگرامنگ کی زبانوں میں: -- **لو لیول زبانیں** (جیسے اسمبلی یا C) آپ کو کمپیوٹر کے ہارڈویئر سے انتہائی تفصیلی بات چیت کرنے دیتی ہیں، لیکن آپ کو مشین کی طرح سوچنا پڑتا ہے، جو... چلیے کہہ لیتے ہیں یہ دماغ کے لیے بڑا چیلنج ہے! -- **ہائی لیول زبانیں** (جیسے JavaScript, Python, یا C#) آپ کو انسان کی طرح سوچنے دیتی ہیں جب کہ وہ پس منظر میں مشین کی زبان کو سنبھالتی ہیں۔ علاوہ ازیں، ان کے پاس خوش آمدید کہنی والی کمیونٹیز ہوتی ہیں جو آپ کے لیے مدد کرنے کے لیے ہمیشہ موجود ہوتی ہیں کیونکہ وہ جانتی ہیں کہ نئی ہونے کا کیا مطلب ہے! +پروگرامنگ کی اصطلاحات میں: +- **لو-لیول زبانیں** (جیسے اسمبلی یا C) آپ کو کمپیوٹر کے اصل ہارڈویئر سے انتہائی تفصیلی بات چیت کرنے دیتی ہیں، لیکن آپ کو مشین کی طرح سوچنا پڑتا ہے، جو... اچھا، بہت بڑا دماغی تبدیلی ہے! +- **ہائی-لیول زبانیں** (جیسے جاوا اسکرپٹ، پائتھن، یا C#) آپ کو انسان کی طرح سوچنے دیتی ہیں جبکہ وہ پس پردہ تمام مشین کی زبان سنبھالتی ہیں۔ اس کے علاوہ، ان کی شاندار کمیونٹیز ہوتی ہیں جو یاد رکھتی ہیں کہ نئی زبان سیکھنے والا کیسا ہوتا ہے اور واقعی مدد کرنا چاہتی ہیں! -تو میں آپ کو کس سے شروع کرنے کی تجویز دوں گا؟ 😉 ہائی لیول زبانیں ایسی ہیں جیسے آپ کے پاس تربیتی پہیے ہوں جو آپ کبھی نہیں اتارنا چاہیں گے کیونکہ وہ پورے تجربے کو بہت زیادہ خوشگوار بناتے ہیں! +آپ سمجھیں کون سی زبانوں سے شروع کرنے کا مشورہ دوں گا؟ 😉 ہائی-لیول زبانیں ایسی تربیتی پہیے کی طرح ہیں جنہیں آپ کبھی اتارنا نہیں چاہیں گے کیونکہ وہ پورے تجربے کو بہت خوشگوار بنا دیتی ہیں! ```mermaid flowchart TB A["👤 انسانی سوچ:
'میں فیبوناچی اعداد شمار کرنا چاہتا ہوں'"] --> B{زبان کی سطح منتخب کریں} - B -->|اعلی سطح| C["🌟 جاوااسکرپٹ/پائتھن
پڑھنے اور لکھنے میں آسان"] - B -->|نیچلی سطح| D["⚙️ اسمبلی/سی
براہ راست ہارڈویئر کنٹرول"] + B -->|اعلیٰ سطح| C["🌟 جاوا اسکرپٹ/پائتھون
پڑھنا اور لکھنا آسان"] + B -->|نچلی سطح| D["⚙️ اسمبلی/سی
براہ راست ہارڈویئر کنٹرول"] C --> E["📝 لکھیں: fibonacci(10)"] D --> F["📝 لکھیں: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 کمپیوٹر کی سمجھ:
مترجم پیچیدگی کو سنبھالتا ہے"] + E --> G["🤖 کمپیوٹر کی سمجھ:
مترجم پیچیدگیاں سنبھالتا ہے"] F --> G - G --> H["💻 ایک ہی نتیجہ:
0، 1، 1، 2، 3، 5، 8، 13..."] + G --> H["💻 یکساں نتیجہ:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### میں آپ کو دکھاتا ہوں کیوں ہائی لیول زبانیں زیادہ خوشگوار ہوتی ہیں +### میں آپ کو دکھاتا ہوں کہ ہائی-لیول زبانیں اتنی زیادہ دوستانہ کیوں ہیں -ٹھیک ہے، میں آپ کو کچھ دکھانے والا ہوں جو بالکل وضاحت کرتا ہے کہ میں ہائی لیول زبانوں سے کیوں محبت کرتا ہوں، لیکن پہلے – مجھے آپ سے وعدہ چاہیے۔ جب آپ پہلا کوڈ مثال دیکھیں، گھبرائیں نہیں! یہ دباؤ ڈالنے والا لگنا چاہیے۔ یہی وہ بات ہے جو میں بتانا چاہتا ہوں! +اچھا، میں آپ کو کچھ دکھانے والا ہوں جو بالکل ظاہر کرتا ہے کہ میں ہائی-لیول زبانوں سے کیوں محبت کرتا ہوں، لیکن پہلے – مجھے آپ سے ایک وعدہ چاہیے۔ جب آپ وہ پہلا کوڈ دیکھیں تو گھبرائیں نہیں! وہ خوفناک لگنا چاہیے۔ یہی میرا مقصد ہے! -ہم ایک ہی کام دو بالکل مختلف انداز میں لکھے ہوئے دیکھنے جا رہے ہیں۔ دونوں وہ فبوناکی تسلسل بناتے ہیں – یہ ایک خوبصورت ریاضیاتی پیٹرن ہے جہاں ہر نمبر اس سے پہلے کے دو نمبروں کا مجموعہ ہوتا ہے: 0, 1, 1, 2, 3, 5, 8, 13... (دلچسپ بات: آپ کو یہ پیٹرن ہر جگہ ملے گا – سورج مکھی کے بیجوں کے سرپل، پنجہ دار درختوں کے نمونے، حتیٰ کہ کہکشاؤں کے بننے کے انداز میں!) +ہم وہی کام دو بالکل مختلف انداز میں لکھے ہوئے دیکھیں گے۔ دونوں Fibonacci sequence بناتے ہیں – یہ ایک خوبصورت ریاضیاتی ترتیب ہے جہاں ہر نمبر پچھلے دو نمبرز کا مجموعہ ہوتا ہے: 0، 1، 1، 2، 3، 5، 8، 13... (مزے کی بات: یہ ترتیب قدرت میں ہر جگہ پائی جاتی ہے – سورج مکھی کے بیج کا سرپل، پائن کون پیٹرن، حتیٰ کہ کہکشاؤں کے بننے کا طریقہ!) -فرق دیکھنے کے لیے تیار؟ چلیے چلتے ہیں! +فرق دیکھنے کے لیے تیار؟ چلیں! -**ہائی لیول زبان (JavaScript) – انسان دوست:** +**ہائی-لیول زبان (جاوا اسکرپٹ) – انسان کے لیے آسان:** ```javascript -// مرحلہ 1: بنیادی فبونیکی ترتیب +// مرحلہ 1: بنیادی فبوناکی سیٹ اپ const fibonacciCount = 10; let current = 0; let next = 1; @@ -183,31 +184,31 @@ console.log('Fibonacci sequence:'); ``` **یہ کوڈ کیا کرتا ہے:** -- **ایک مستقل متغیر اعلان کریں** کہ ہم کتنے Fibonacci نمبر بنانا چاہتے ہیں -- **دو متغیرات کو شروع کریں** جو موجودہ اور اگلے نمبروں کو ٹریک کریں -- **آغاز کی قیمتیں سیٹ کریں** (0 اور 1) جو Fibonacci کے پیٹرن کو وضع کرتے ہیں -- **ایک ہیڈر پیغام دکھائیں** جو ہماری آؤٹ پٹ کی نشاندہی کرتا ہے +- **ایک کانسٹنٹ** اعلان کرتا ہے جس سے ہم یہ بتاتے ہیں کہ ہمیں کتنے Fibonacci نمبرز بنانے ہیں +- **دو ویریبلز** شروع کرتا ہے جو اس وقت اور اگلے نمبر کو ٹریک کرتے ہیں +- **شروع کے ویلیوز** (0 اور 1) سیٹ کرتا ہے جو Fibonacci پیٹرن کو ڈیفائن کرتے ہیں +- **ہمارے آؤٹ پٹ کی شناخت کے لیے** ایک ہیڈر پیغام دکھاتا ہے ```javascript -// مرحلہ 2: لوپ کے ساتھ تسلسل پیدا کریں +// قدم 2: لوپ کے ساتھ سلسلہ پیدا کریں for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // سلسلے میں اگلا نمبر حساب کریں + // سلسلے میں اگلا نمبر معلوم کریں const sum = current + next; current = next; next = sum; } ``` -**یہاں کیا ہوتا ہے اس کی وضاحت:** -- **ایک `for` لوپ کے ذریعے** ہماری فہرست کے ہر مقام پر چلیں -- **ہر نمبر کو اس کے مقام کے ساتھ دکھائیں** ٹیمپلیٹ لٹریل فارمیٹنگ کے ذریعے -- **اگلا Fibonacci نمبر نکالیں** موجودہ اور اگلی قیمتوں کو جمع کر کے -- **ہماری ٹریکنگ ویریبلز کو اپ ڈیٹ کریں** تاکہ اگلی تکرار پر جا سکیں +**یہاں کیا ہو رہا ہے تفصیل سے:** +- **ہر پوزیشن پر لوپ** چلتا ہے `for` لوپ کے ذریعے +- **ہر نمبر اور اس کی پوزیشن دکھائی جاتی ہے** تمپلیٹ لٹریل فارمیٹنگ کے ساتھ +- **اگلا Fibonacci نمبر حساب کیا جاتا ہے** موجودہ اور اگلے نمبروں کو جمع کر کے +- **ھن ویریبلز کو اپ ڈیٹ کیا جاتا ہے** تاکہ اگلے چکر کے لیے تیاری ہو جائے ```javascript -// مرحلہ 3: جدید فنکشنل نقطہ نظر +// مرحلہ 3: جدید فنکشنل طریقہ const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -223,13 +224,13 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**مندرجہ بالا میں، ہم نے:** -- **جدید ایرو فنکشن نحو استعمال کرتے ہوئے** ایک دوبارہ استعمال کے قابل فنکشن بنایا -- **ایک صف (array) بنائی** تاکہ مکمل تسلسل کو ذخیرہ کیا جا سکے بنسبت ایک ایک نمبر ظاہر کرنے کے -- **پچھلے نمبروں سے ہر نئے نمبر کے حساب کے لیے** صف کی انڈیکسنگ استعمال کی -- **مکمل تسلسل واپس کیا** تاکہ پروگرام کے دوسرے حصوں میں لچکدار استعمال ہو سکے +**مندرجہ بالا میں ہم نے:** +- **جدید arrow function syntax سے** ایک ری یوز ایبل فنکشن بنایا ہے +- **ایک ایرے بنایا** جو پورا سیکوئنس ایک ساتھ اسٹور کرتا ہے بجائے ایک ایک کر کے دکھانے کے +- **اررے انڈیکسنگ کا استعمال کیا** ہر نئے نمبر کو پچھلے ویلیوز سے کیلکولیٹ کرنے کے لیے +- **پورا سیکوئنس ریٹرن کیا** تاکہ اسے پروگرام کے دوسرے حصوں میں فلیکسبلی استعمال کیا جا سکے -**لو لیول زبان (ARM اسمبلی) – کمپیوٹر دوست:** +**لو-لیول زبان (ARM اسمبلی) – کمپیوٹر کے لیے آسان:** ```assembly area ascen,code,readonly @@ -256,62 +257,60 @@ back add r0,r1 end ``` -نوٹ کریں کہ JavaScript ورژن تقریباً انگریزی ہدایات کی طرح پڑھتا ہے، جبکہ اسمبلی ورژن خفیہ کمانڈز استعمال کرتا ہے جو کمپیوٹر کے پروسیسر کو براہ راست کنٹرول کرتے ہیں۔ دونوں بالکل ایک ہی کام انجام دیتے ہیں، لیکن ہائی لیول زبان انسانوں کے لیے سمجھنا، لکھنا اور برقرار رکھنا بہت آسان ہے۔ +نوٹ کریں کہ جاوا اسکرپٹ ورژن انگریزی ہدایات کی طرح پڑھتا ہے، جب کہ اسمبلی ورژن خفیہ کمانڈز استعمال کرتا ہے جو براہ راست کمپیوٹر کے پروسیسر کو کنٹرول کرتے ہیں۔ دونوں بالکل ایک جیسا کام کرتے ہیں، لیکن ہائی-لیول زبان انسانوں کے لیے زیادہ سمجھنے، لکھنے، اور برقرار رکھنے میں آسان ہے۔ -**اہم فرق جو آپ نوٹس کریں گے:** -- **قابل مطالعہ**: جاوا اسکرپٹ وضاحتی نام جیسے `fibonacciCount` استعمال کرتا ہے جب کہ اسمبلی میں مخفف لیبل جیسے `r0`, `r1` استعمال ہوتے ہیں -- **تفسیرات**: ہائی لیول زبانیں وضاحتی کمنٹس کی حوصلہ افزائی کرتی ہیں جو کوڈ کو خود دستاویزی بناتی ہیں -- **ساخت**: جاوا اسکرپٹ کی منطقی روانی اس طریقے سے مماثل ہے جس طرح انسان مسائل کو قدم بہ قدم سوچتے ہیں -- **بحالی**: مختلف ضروریات کے لئے جاوا اسکرپٹ ورژن کو اپ ڈیٹ کرنا سیدھا اور واضح ہے +**اہم فرق جو آپ نوٹ کریں گے:** +- **قابل خواندگی**: جاوااسکرپٹ وضاحتی نام استعمال کرتا ہے جیسے `fibonacciCount` جبکہ اسمبلی پیچیدہ لیبلز استعمال کرتا ہے جیسے `r0`, `r1` +- **تبصرے**: اعلیٰ سطحی زبانیں وضاحتی تبصرے کی ترغیب دیتی ہیں جو کوڈ کو خود دستاویزی بناتی ہیں +- **ساخت**: جاوااسکرپٹ کا منطقی بہاؤ وہی ہے جس طرح انسان مرحلہ وار مسائل کو سوچتے ہیں +- **بحالی**: مختلف ضروریات کے لیے جاوااسکرپٹ ورژن کو اپ ڈیٹ کرنا آسان اور واضح ہوتا ہے -✅ **فائبوناچی تسلسل کے بارے میں**: یہ بالکل حیرت انگیز نمبر کا پیٹرن (جہاں ہر نمبر اس سے پہلے دو نمبروں کے مجموعے کے برابر ہوتا ہے: 0، 1، 1، 2، 3، 5، 8...) قدرت میں بالکل *ہر جگہ* ظاہر ہوتا ہے! آپ اسے سورج مکھی کے پیچ، پائن کون کے نمونوں میں، ناٹیلس کے خول کے خم میں، اور یہاں تک کہ درختوں کی شاخوں کے بڑھنے کے انداز میں بھی دیکھیں گے۔ یہ واقعی ذہن کو حیران کرنے والا ہے کہ ریاضی اور کوڈ ہمیں قدرت کے ذریعے خوبصورتی پیدا کرنے والے نمونوں کو سمجھنے اور دوبارہ بنانے میں کس طرح مدد دیتے ہیں! +✅ **فبونیکی سیریز کے بارے میں**: یہ انتہائی خوبصورت عددی ترتیب (جہاں ہر عدد اس کے دو پچھلے عدد کا مجموعہ ہوتا ہے: 0، 1، 1، 2، 3، 5، 8...) فطرت میں واقعی *ہر جگہ* پائی جاتی ہے! آپ اسے سورج مکھی کے گھومتے دھاگوں میں، پائن کون کے نمونوں میں، ناٹیلَس شیلز کے خم میں، اور یہاں تک کہ درخت کی شاخوں کے بڑھنے کے طریقے میں بھی دیکھیں گے۔ یہ واقعی حیرت انگیز ہے کہ ریاضی اور کوڈ ہماری مدد کرتے ہیں ان خوبصورت پیٹرنز کو سمجھنے اور دوبارہ بنانے میں جو فطرت استعمال کرتی ہے! ## وہ بنیادی اجزاء جو جادو کو ممکن بناتے ہیں -چلیں، اب جب آپ نے دیکھا کہ پروگرامنگ زبانیں ایکشن میں کیسی دکھتی ہیں، تو آئیے ان بنیادی حصوں کو سمجھتے ہیں جو اصل میں ہر لکھے ہوئے پروگرام کی تشکیل کرتے ہیں۔ انہیں اپنے پسندیدہ نسخے کے اہم اجزاء سمجھیں – جب آپ کو یہ معلوم ہو جائے کہ ہر ایک کیا کرتا ہے، تو آپ تقریباً کسی بھی زبان میں کوڈ پڑھ اور لکھ سکیں گے! - -یہ پروگرامنگ کے گرامر سیکھنے جیسا ہے۔ یاد ہے جب آپ اسکول میں اسم، فعل اور جملے بنانے کا طریقہ سیکھتے تھے؟ پروگرامنگ کی اپنی گرامر ہوتی ہے، اور ایمانداری سے، یہ انگریزی گرامر سے کہیں زیادہ منطقی اور معاف کرنے والی ہے! 😄 +اب جب آپ نے دیکھا کہ پروگرامنگ زبانیں عملی طور پر کیسی دکھتی ہیں، آئیے ان بنیادی حصوں کا جائزہ لیں جو دراصل ہر لکھے گئے پروگرام کا حصہ ہوتے ہیں۔ انہیں اپنے پسندیدہ نسخے کے اہم اجزاء سمجھیں – جب آپ ان کی فعالیت سمجھ لیں گے، تو آپ تقریباً کسی بھی زبان میں کوڈ پڑھنے اور لکھنے کے قابل ہو جائیں گے! +یہ پروگرامنگ کی گرامر سیکھنے جیسا ہے۔ یاد ہے اسکول میں جب آپ نے اسماء، افعال، اور جملے بنانے کا طریقہ سیکھا تھا؟ پروگرامنگ کی اپنی گرامر ہوتی ہے، اور سچ کہیں تو یہ انگریزی گرامر سے کہیں زیادہ منطقی اور معاف کرنے والی ہے! 😄 -### اسٹیٹمنٹس: قدم بہ قدم ہدایات +### اظہاریے: مرحلہ وار ہدایات -آئیے **اسٹیٹمنٹس** سے شروع کرتے ہیں – یہ آپ کے کمپیوٹر کے ساتھ بات چیت میں ہر ایک جملے کی مانند ہوتے ہیں۔ ہر اسٹیٹمنٹ کمپیوٹر کو ایک خاص کام کرنے کا کہتا ہے، جیسے ہدایات دینا: "یہاں بائیں مڑو"، "سرخ بتی پر رک جاؤ"، "اس جگہ گاڑی پارک کرو"۔ +آئیے شروع کرتے ہیں **اظہاریے** سے – یہ آپ کے کمپیوٹر کے ساتھ بات چیت میں انفرادی جملوں کی طرح ہیں۔ ہر اظہاریہ کمپیوٹر کو ایک خاص کام کرنے کا حکم دیتا ہے، بالکل جیسے ہدایات دینا: "یہاں بائیں مڑو"، "سرخ بتی پر رکو"، "اس جگہ گاڑی پارک کرو"۔ -جو بات مجھے اسٹیٹمنٹس میں پسند ہے وہ ان کی عمومیت اور قابل فہم ہونا ہے۔ یہ دیکھیں: +مجھے اظہاریوں کی جو بات سب سے زیادہ پسند ہے وہ ان کی پڑھنے میں آسانی ہے۔ یہ دیکھیں: ```javascript -// بنیادی بیانات جو ایک واحد عمل انجام دیتے ہیں +// بنیادی بیانات جو واحد کارروائیاں انجام دیتے ہیں const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**یہ کوڈ کیا کرتا ہے:** -- صارف کے نام کو ذخیرہ کرنے کے لیے ایک مستقل ویری ایبل کا اعلان کرنا -- کنسول آؤٹ پٹ میں ایک خیرمقدمی پیغام دکھانا -- ایک ریاضیاتی عمل کا نتیجہ حساب اور ذخیرہ کرنا + +**یہ کوڈ یہ کرتا ہے:** +- صارف کے نام کو محفوظ کرنے کے لیے ایک مستقل متغیر کا اعلان کرنا +- کنسول آؤٹ پٹ پر ایک خوش آمدید پیغام دکھانا +- ایک ریاضیاتی آپریشن کا نتیجہ حساب کر کے محفوظ کرنا ```javascript -// بیانات جو ویب صفحہ جات کے ساتھ تعامل کرتے ہیں +// بیٹیاں جو ویب صفحات کے ساتھ بات چیت کرتی ہیں document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` - -**قدم بہ قدم، یہ ہو رہا ہے:** -- ویب پیج کے ٹائٹل کو تبدیل کرنا جو براؤزر کے ٹیب میں ظاہر ہوتا ہے -- پورے صفحے کے پس منظر کا رنگ بدلنا +**مرحلہ وار، یہ ہو رہا ہے:** +- براؤزر ٹیب میں ظاہر ہونے والے صفحہ کے عنوان میں ترمیم کرنا +- پورے صفحہ کے پس منظر کا رنگ بدلنا -### ویری ایبلز: آپ کے پروگرام کا میموری سسٹم +### متغیرات: آپ کے پروگرام کا میموری سسٹم -ٹھیک ہے، **ویری ایبلز** درحقیقت میرے سب سے پسندیدہ تصورات میں سے ہیں کیونکہ یہ آپ کی روزمرہ کی چیزوں سے بہت مشابہ ہوتے ہیں! +ٹھیک ہے، **متغیرات** میرے پڑھانے کے پسندیدہ خیالات میں سے ایک ہیں کیونکہ یہ بلکل روزمرہ کی چیزوں کی طرح ہیں جو آپ ہر دن استعمال کرتے ہیں! -اپنے فون کی کانٹیکٹ لسٹ کے بارے میں سوچیں۔ آپ ہر کسی کا نمبر یاد نہیں رکھتے – بلکہ آپ "ماں"، "سب سے اچھے دوست"، یا "پیزا کی دکان جو رات 2 بجے تک ڈلیور کرتی ہے" محفوظ کرتے ہیں اور فون نمبر کو یاد رکھتا ہے۔ ویری ایبلز بھی ویسے ہی کام کرتے ہیں! یہ لیبل لگائے ہوئے کنٹینرز کی طرح ہیں جہاں آپ کا پروگرام معلومات ذخیرہ کر سکتا ہے اور بعد میں سمجھ آنے والے نام کے ذریعے اسے حاصل کر سکتا ہے۔ +اپنے فون کے رابطہ فہرست کے بارے میں سوچیں۔ آپ سب کے نمبر یاد نہیں رکھتے – بلکہ "ماں"، "بہترین دوست"، یا "پیزا کی جگہ جو رات 2 بجے تک پہنچاتی ہے" محفوظ کرتے ہیں اور فون کو اصل نمبر یاد رکھنے دیتے ہیں۔ متغیرات بھی بالکل اسی طرح کام کرتے ہیں! یہ پروگرام کے لیے لیبل والے کنٹینرز کی طرح ہوتے ہیں جہاں معلومات محفوظ کی جاتی ہیں اور بعد میں اس نام سے بازیافت کی جاتی ہے جو حقیقت میں معنی رکھتا ہے۔ -یہ واقعی زبردست ہے: ویری ایبلز پروگرام کے چلنے کے دوران بدل سکتے ہیں (اسی لیے انہیں "ویری ایبل" کہتے ہیں – آپ نے دیکھا؟)۔ جیسے آپ پیزا کی دکان کو اپ ڈیٹ کر سکتے ہیں جب آپ کہیں بہتر تلاش کر لیتے ہیں، ویری ایبلز بھی نئی معلومات سیکھنے یا حالات کی تبدیلی پر اپ ڈیٹ ہو سکتے ہیں! +واہ کیا بات ہے: متغیرات چلاتے وقت بدل بھی سکتے ہیں (اسی لیے انہیں "متغیر" کہا جاتا ہے – سمجھ گئے؟)۔ جیسے آپ کسی بہتر پیزا کی جگہ کا نمبر دریافت کر کے رابطہ اپ ڈیٹ کرتے ہیں، ویسے ہی جب پروگرام نئی معلومات سیکھتا ہے یا حالات بدلتے ہیں تو متغیرات کو اپ ڈیٹ کیا جا سکتا ہے! -آئیے دیکھتے ہیں کہ یہ کتنے خوبصورتی سے آسان ہے: +دیکھیں یہ کتنا خوبصورت آسان ہے: ```javascript // مرحلہ 1: بنیادی متغیرات بنانا @@ -320,12 +319,12 @@ let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**ان تصورات کو سمجھنا:** -- `const` ویری ایبلز میں غیر تبدیل ہونے والی قیمتیں ذخیرہ کرنا (جیسے سائٹ کا نام) -- ان قیمتوں کے لیے `let` کا استعمال کرنا جو پروگرام میں بدل سکتی ہیں -- مختلف ڈیٹا ٹائپس تفویض کرنا: سٹرنگز (متن)، نمبر، اور بولینز (true/false) -- وضاحتی نام منتخب کرنا جو ہر ویری ایبل کے مواد کی وضاحت کریں + +**ان تصورات کو سمجھیں:** +- `const` متغیرات میں غیر قابل تبدیلی قدریں محفوظ کریں (جیسے سائٹ کا نام) +- ایسے قدروں کے لیے `let` استعمال کریں جو پروگرام کے دوران بدل سکتے ہیں +- مختلف ڈیٹا کی اقسام تفویض کریں: سٹرنگز (متن)، نمبر، اور بولینز (true/false) +- وضاحتی نام منتخب کریں جو بتاتے ہیں کہ ہر متغیر میں کیا ہے ```javascript // مرحلہ 2: متعلقہ ڈیٹا کو گروپ کرنے کے لیے اشیاء کے ساتھ کام کرنا @@ -335,49 +334,48 @@ const weatherData = { windSpeed: 12 }; ``` - -**اوپر، ہم نے کیا کیا:** -- متعلقہ موسمی معلومات کو ایک جگہ جمع کرنے کے لیے ایک آبجیکٹ بنایا -- ایک ہی ویری ایبل کے تحت متعدد ڈیٹا کو منظم کیا -- ہر معلومات کے ٹکڑے کو واضح لیبل دینے کے لیے کلید-قدر جوڑی استعمال کی + +**اوپر کے کوڈ میں ہم نے:** +- متعلقہ موسمی معلومات کو ایک ساتھ گروپ کرنے کے لیے ایک چیز تخلیق کی +- ایک متغیر نام کے تحت متعدد ڈیٹا پیس کو منظم کیا +- ہر معلوماتی جز کو واضح طور پر لیبل کرنے کے لیے کی-ویلیو جوڑے استعمال کیے ```javascript -// مرحلہ ۳: متغیرات کا استعمال اور تازہ کاری +// قدم 3: متغیرات کا استعمال اور تازہ کاری console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// قابل تبدیلی متغیرات کی تازہ کاری +// قابل تبدیلی متغیرات کو اپ ڈیٹ کرنا currentWeather = "cloudy"; temperature = 68; ``` - -**چلو ہر حصہ کو سمجھتے ہیں:** -- ٹیمپلیٹ لٹریلز کے ذریعے `${}` سنٹیکس کے ساتھ معلومات دکھانا -- ڈاٹ نوٹیشن (`weatherData.windSpeed`) کے ذریعے آبجیکٹ کی خصوصیات تک رسائی -- `let` سے اعلان کیے گئے ویری ایبلز کو بدلتے حالات کی عکاسی کے لیے اپ ڈیٹ کرنا -- بامعنی پیغامات بنانے کے لیے کئی ویری ایبلز کو ملانا + +**ہر حصے کو سمجھیں:** +- ٹیمپلیٹ لٹریلز کے ذریعے معلومات دکھائیں جن میں `${}` سنٹیکس استعمال ہوتا ہے +- ڈاٹ نوٹیشن (`weatherData.windSpeed`) کے ذریعے آبجیکٹ کی خصوصیات تک رسائی حاصل کریں +- `let` سے تعریف شدہ متغیرات کو بدلتے حالات کے مطابق اپ ڈیٹ کریں +- متعدد متغیرات کو جوڑ کر معنی خیز پیغامات تخلیق کریں ```javascript -// مرحلہ 4: صاف ستھرا کوڈ کے لیے جدید تقسیم کاری +// مرحلہ 4: صاف کوڈ کے لیے جدید ڈسٹرکچرنگ const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` - -**جو آپ کو جاننا چاہیے:** -- ڈیسٹرکچرنگ اسائنمنٹ کے ذریعے آبجیکٹس سے مخصوص خصوصیات نکالنا -- آبجیکٹ کی چابیوں کے ایک جیسے ناموں کے ساتھ خودکار طور پر نئے ویری ایبلز بنانا -- بار بار ڈاٹ نوٹیشن استعمال کرنے سے بچ کر کوڈ سادہ بنانا +**آپ کو جاننا ضروری ہے:** +- مخصوص خصوصیات کو آبجیکٹ سے نکالنے کے لیے ڈسٹرکچرنگ اسائنمنٹ استعمال کریں +- آبجیکٹ کی چابیاں کے ناموں کے ساتھ خودکار طور پر نئے متغیرات بنائیں +- کوڈ کو آسان بنائیں تاکہ بار بار ڈاٹ نوٹیشن استعمال نہ کرنا پڑے -### کنٹرول فلو: اپنے پروگرام کو سوچنا سکھانا +### کنٹرول فلو: آپ کے پروگرام کو سوچنا سکھانا -اب یہ حصہ واقعی دماغ ہلا دینے والا ہے! **کنٹرول فلو** بنیادی طور پر اپنے پروگرام کو ہوشیار فیصلے کرنا سکھانے کے برابر ہے، بالکل ویسے ہی جیسے آپ روزانہ بغیر سوچے سمجھے کرتے ہیں۔ +ٹھیک ہے، یہاں پروگرامنگ بالکل دماغ ہلا دینے والی ہو جاتی ہے! **کنٹرول فلو** بنیادی طور پر آپ کے پروگرام کو سمجھدار فیصلے لینے کی تربیت ہے، بالکل ویسے جیسے آپ ہر روز بغیر سوچے ہی کرتے ہیں۔ -تصور کریں: آج صبح آپ نے شاید یہ سوچا ہوگا "اگر بارش ہو رہی ہے تو میں چھتری لے جاؤں گا۔ اگر سردی ہے تو جیکٹ پہنوں گا۔ اگر دیر ہو رہی ہے تو ناشتہ چھوڑ کر راستے میں کافی لے لوں گا۔" آپ کا دماغ یہ if-then منطق روزانہ درجنوں بار فطری طور پر استعمال کرتا ہے! +تصور کریں: آج صبح آپ نے شاید یہ سوچا "اگر بارش ہو رہی ہے، تو چھتری لوں گا۔ اگر سردی ہے تو جیکٹ پہنوں گا۔ اگر دیر ہو رہی ہے تو ناشتہ چھوڑ کر راستے میں کافی لے لوں گا۔" آپ کا دماغ قدرتی طور پر اس if-then منطق کو دن میں کئی بار فالو کرتا ہے! -یہی چیز پروگرامز کو ذہین اور زندہ محسوس کراتی ہے، نہ کہ محض ایک بورنگ، قابل پیش گوئی اسکرپٹ کی پیروی کرنے والا۔ وہ حقیقت میں ایک صورتحال کو دیکھ سکتے ہیں، اس کا جائزہ لے سکتے ہیں، اور مناسب ردعمل دے سکتے ہیں۔ یہ آپ کے پروگرام کو ایک ایسا دماغ دینے کے مترادف ہے جو حالات کے مطابق ڈھلتا اور فیصلے کرتا ہے! +یہ وہ چیز ہے جو پروگرامز کو ذہین اور زندہ محسوس کراتی ہے، نہ کہ محض بور اور پیش گوئی شدہ اسکرپٹ کی طرح۔ یہ واقعی صورتحال کا جائزہ لیتے ہیں، جو ہورہا ہے اسے پرکھتے ہیں، اور مناسب جواب دیتے ہیں۔ یہ آپ کے پروگرام کو ایسا دماغ دیتی ہے جو حالات کے مطابق ڈھل سکتا ہے اور فیصلے کر سکتا ہے! -دیکھنا چاہتے ہیں یہ کمال کیسے کام کرتا ہے؟ میں آپ کو دکھاتا ہوں: +دیکھنا چاہتے ہیں یہ کتنا خوبصورتی سے کام کرتا ہے؟ میں آپ کو دکھاتا ہوں: ```javascript // مرحلہ 1: بنیادی مشروط منطق @@ -390,15 +388,15 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**یہ کوڈ کیا کرتا ہے:** -- چیک کرتا ہے کہ صارف کی عمر ووٹنگ کے معیار پر پوری اترتی ہے یا نہیں -- حالت کے نتیجے کی بنیاد پر مختلف کوڈ بلاکس چلاتا ہے -- اگر عمر 18 سے کم ہے تو ووٹنگ کی اہلیت تک کتنا وقت ہے حساب اور دکھاتا ہے -- ہر منظرنامے کے لیے مخصوص، مددگار رائے فراہم کرتا ہے + +**یہ کوڈ کیا کرتا ہے:** +- چیک کرے کہ صارف کی عمر ووٹنگ کی شرط پوری کرتی ہے یا نہیں +- شرط کے نتیجے کے مطابق مختلف کوڈ بلاکس چلائیں +- اگر عمر 18 سے کم ہو تو ووٹنگ کے اہل ہونے تک باقی وقت کا حساب لگائیں اور دکھائیں +- ہر صورتحال کے لیے مخصوص، مفید فیڈبیک فراہم کریں ```javascript -// مرحلہ 2: منطقی آپریٹروں کے ساتھ متعدد شرائط +// مرحلہ 2: منطقی آپریٹرز کے ساتھ متعدد شرائط const userAge = 17; const hasPermission = true; @@ -410,26 +408,26 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**یہاں کیا ہو رہا ہے اس کی وضاحت:** -- متعدد شرائط کو `&&` (اور) آپریٹر کے ساتھ جوڑنا -- کئی منظرناموں کے لیے `else if` کے ذریعے ہیرارکی بنانا -- آخری `else` سٹیٹمنٹ کے ذریعے تمام ممکنہ کیسز کا ہینڈل کرنا -- ہر مختلف حالت کے لیے واضح اور قابل عمل فیڈبیک دینا + +**یہاں کیا ہوتا ہے:** +- کسی سے زیادہ شرائط کو `&&` (اور) آپریٹر سے جوڑیں +- متعدد حالات کے لیے `else if` کے ذریعہ ہئیرارکی بنائیں +- ایک آخری `else` اسٹیٹمنٹ کے ساتھ تمام ممکنہ کیسز کو ہینڈل کریں +- ہر مختلف حالت کے لیے واضح اور عملی فیڈبیک دیں ```javascript -// قدم 3: مختصر مشروط آپریٹر کے ساتھ ٹرنری +// مرحلہ 3: مختصر شرطی تیسری آپریٹر کے ساتھ const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**جو آپ کو یاد رکھنا ہے:** -- سادہ دو انتخابی شرائط کے لیے ٹرنیری آپریٹر (`? :`) کا استعمال -- پہلے شرط لکھیں، پھر `?`، پھر سچ کا نتیجہ، پھر `:`، اور پھر جھوٹ کا نتیجہ -- جب آپ کو شرائط کی بنیاد پر قیمتیں تفویض کرنی ہوں تو یہ پیٹرن اپلائی کریں + +**آپ کو یاد رکھنے کی ضرورت ہے:** +- سادہ دو آپشن والی شرائط کے لیے ternary آپریٹر (`? :`) کا استعمال کریں +- پہلے شرط لکھیں، پھر `?`، پھر صحیح نتیجہ، پھر `:`، پھر غلط نتیجہ لکھیں +- جب حالات کی بنیاد پر قدریں تفویض کرنا ہو تو اس پیٹرن کو اپنائیں ```javascript -// مرحلہ 4: متعدد مخصوص معاملات کو سنبھالنا +// مرحلہ 4: متعدد مخصوص کیسوں کو سنبھالنا const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -448,59 +446,57 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` - -**یہ کوڈ درج ذیل کام انجام دیتا ہے:** -- ویری ایبل کی قیمت کو متعدد مخصوص کیسز کے خلاف ملانا -- ایک جیسے کیسز کو گروپ کرنا (کام کے دن بمقابلہ ویک اینڈ) -- جب میچ ملے تو مناسب کوڈ بلاک چلانا -- غیر متوقع قیمتوں سے نمٹنے کے لیے `default` کیس شامل کرنا -- `break` اسٹیٹمنٹس استعمال کرنا تاکہ کوڈ اگلے کیس تک نہ پہنچے -> 💡 **حقیقی دنیا کی مثال**: کنٹرول فلو کو اس طرح سوچیں جیسے دنیا کا سب سے صبر والا GPS آپ کو راستے بتا رہا ہو۔ وہ کہہ سکتا ہے "اگر مین اسٹریٹ پر ٹریفک ہے تو ہائی وے لو۔ اگر ہائی وے تعمیراتی کام کی وجہ سے بلاک ہے تو خوبصورت راستہ آزما۔" پروگرام بھی بالکل اسی قسم کی شرطی منطق استعمال کرتے ہیں تاکہ مختلف حالات پر ہوشیاری سے رد عمل دیں اور صارفین کو بہترین ممکنہ تجربہ فراہم کریں۔ +**یہ کوڈ مندرجہ ذیل کام انجام دیتا ہے:** +- متغیر کی قدر کو متعدد مخصوص کیسز کے ساتھ موازنہ کرے +- ملتے جلتے کیسز کو گروپ کرے (ہفتہ کے دن بمقابلہ ہفتے کے آخر کے دن) +- میچ ہونے پر مناسب کوڈ بلاک چلائے +- غیر متوقع قدروں کے لیے `default` کیس شامل کرے +- کوڈ کو اگلے کیس تک جانے سے روکنے کے لیے `break` اسٹیٹمنٹس استعمال کرے +> 💡 **حقیقی دنیا کی مثال**: کنٹرول فلو کو سمجھیں جیسے دنیا کا سب سے صابر GPS جو آپ کو ہدایات دے رہا ہو۔ یہ کہہ سکتا ہے "اگر مینسٹریٹ پر ٹریفک ہے تو ہائی وے لو۔ اگر ہائی وے بند ہے تو خوبصورت راستہ آزمائیں۔" پروگرام اسی طرح کی شرطیہ منطق استعمال کرتے ہیں تاکہ مختلف حالات میں سمجھداری سے جواب دے سکیں اور صارفین کو بہترین تجربہ فراہم کریں۔ -### 🎯 **تصور کا جائزہ: بنیادی اجزاء کی مہارت** +### 🎯 **تصور کی جانچ: بنیادی اجزاء کی مہارت** -**آئیے دیکھیں آپ بنیادی باتوں میں کیسے ہیں:** -- کیا آپ وضاحت کر سکتے ہیں کہ ویری ایبل اور اسٹیٹمنٹ میں کیا فرق ہے؟ -- کوئی حقیقی دنیا کی مثال سوچیں جہاں آپ if-then فیصلہ استعمال کریں (جیسا کہ ہمارا ووٹنگ مثال) -- پروگرامنگ لاجک میں آپ کو کون سی چیز سب سے زیادہ حیران کن لگی؟ +**آئیے دیکھتے ہیں آپ بنیادیات میں کہاں کھڑے ہیں:** +- آپ اپنے الفاظ میں متغیر اور اظہاریہ کے فرق کی وضاحت کر سکتے ہیں؟ +- ایک حقیقی دنیا کی مثال سوچیں جہاں آپ if-then فیصلہ استعمال کریں (جیسا کہ ہمارا ووٹنگ کا مثال) +- پروگرامنگ منطق کے بارے میں آپ کو کیا چیز سب سے زیادہ حیران کن لگی؟ -**اعتماد بڑھانے کے لیے جلدی سے:** +**اعتماد بڑھانے کا چھوٹا سا ٹوٹکا:** ```mermaid flowchart LR - A["📝 بیانات
(ہدایات)"] --> B["📦 متغیرات
(ذخیرہ)"] --> C["🔀 کنٹرول بہاؤ
(فیصلے)"] --> D["🎉 کام کرنے والا پروگرام!"] + A["📝 بیانات
(ہدایات)"] --> B["📦 متغیرات
(ذخیرہ)"] --> C["🔀 کنٹرول فلو
(فیصلے)"] --> D["🎉 کام کرنے والا پروگرام!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 -``` -✅ **اگلا کیا ہے:** ہم ان تصورات کو مزید گہرائی میں جا کر دریافت کرنے کے لیے بے حد پرجوش ہیں! ابھی کے لیے صرف یہ جذبہ محسوس کریں کہ آپ کے سامنے کتنے حیرت انگیز امکانات ہیں۔ مخصوص مہارتیں اور تکنیکیں قدرتی طور پر ہمارے ساتھ مشق کرتے ہوئے آپ میں جم جائیں گی – میں وعدہ کرتا ہوں یہ بہت زیادہ مزہ دار ہوگا جیسا کہ آپ شاید سوچ رہے ہوں! - +``` +✅ **آگے کیا آنے والا ہے**: ہم اس ناقابل یقین سفر کے دوران ان تصورات میں مزید گہرائی سے جائیں گے! ابھی صرف ان تمام شاندار امکانات کے بارے میں جوش محسوس کریں جو آپ کے سامنے ہیں۔ مخصوص مہارتیں اور تکنیکیں ایسی قدرتی طور پر جڑ جائیں گی جب ہم مل کر مشق کریں گے – میں وعدہ کرتا ہوں یہ آپ کی توقعات سے کہیں زیادہ مزے دار ہوگا! -## اوزارِ تجارت +## پیشہ ورانہ آلات -ٹھیک ہے، یہ وہ جگہ ہے جہاں میں واقعی اتنا پرجوش ہوتا ہوں کہ خود کو روک نہیں پاتا! 🚀 ہم ان شاندار آلات کے بارے میں بات کرنے والے ہیں جو آپ کو ایسا محسوس کرائیں گے جیسے آپ کو ابھی ابھی ڈیجیٹل اسپیس شپ کی چابیاں دے دی گئی ہوں۔ +ٹھیک ہے، سچ کہوں تو یہاں میرا جوش حد سے زیادہ بڑھ جاتا ہے کہ میں خود کو روک نہیں پاتا! 🚀 ہم بات کرنے والے ہیں ان زبردست آلات کے بارے میں جن کے استعمال سے آپ کو محسوس ہوگا کہ جیسے آپ کو ایک ڈیجیٹل خلائی جہاز کی چابیاں تھما دی گئی ہیں۔ -کیا آپ نے کبھی غور کیا ہے کہ شیف کے پاس عین مطابق تیز دھار چھریاں ہوتی ہیں جو ان کے ہاتھوں کا توسیع محسوس ہوتی ہیں؟ یا موسیقار کے پاس وہ گٹار ہوتا ہے جو جیسے ہی اسے چھوتے ہیں گانے لگتا ہے؟ اچھا، ڈیولپرز کے پاس بھی ان جادوئی آلات کا اپنا ورژن ہے، اور آپ کا دماغ ہکا بکا رہ جائے گا کہ ان میں سے زیادہ تر بالکل مفت ہیں! +آپ جانتے ہیں کہ ایک شیف کے پاس وہ بہترین توازن والے چھریاں ہوتی ہیں جو اس کے ہاتھوں کی توسیع لگتی ہیں؟ یا ایک موسیقار کا وہ ایک گیٹار جو جیسے ہی وہ چھیڑتا ہے گانا گانے لگتا ہے؟ ٹھیک اسی طرح، ڈویلپرز کے پاس بھی ایسے جادوی آلات ہوتے ہیں، اور میں آپ کو حیرت میں ڈال دوں کہ ان میں سے اکثر بالکل مفت ہیں! -میں اپنی کرسی پر چھلانگیں لگا رہا ہوں ان کے بارے میں آپ سے شیئر کرنے کے خیال سے کیونکہ انہوں نے ہمارے سافٹ ویئر بنانے کے طریقہ کو مکمل طور پر بدل کر رکھ دیا ہے۔ ہم بات کر رہے ہیں AI سے چلنے والے کوڈنگ اسسٹنٹس کی جو آپ کے کوڈ کو لکھنے میں مدد دیتے ہیں (میں مذاق نہیں کر رہا!), کلاؤڈ ماحول جہاں آپ کہیں سے بھی وائی فائی کے ذریعے پورے ایپس بنا سکتے ہیں، اور ڈیبگنگ ٹولز جو اتنے ماہر ہیں جیسے آپ کے پروگرامز کے لیے ایکس رے وژن ہو۔ +میں اپنی کرسی پر اچھلتا ہوں یہ سوچ کر کہ آپ سے یہ شیئر کر رہا ہوں کیونکہ انہوں نے سافٹ ویئر بنانے کے طریقے کو مکمل طور پر بدل کر رکھ دیا ہے۔ ہم بات کر رہے ہیں AI سے چلنے والے کوڈنگ اسسٹنٹس کی جو آپ کا کوڈ لکھنے میں مدد کرتے ہیں (میں مذاق نہیں کر رہا!), کلاؤڈ ماحول جہاں آپ وائی فائی سے کہیں بھی مکمل ایپلی کیشنز بنا سکتے ہیں، اور ڈی بگنگ کے آلات جو اتنے عمدہ ہیں کہ ایسے لگتا ہے جیسے آپ کے پروگرامز کے لیے ایکس رے وژن ہو۔ -اور یہ وہ حصہ ہے جو ابھی بھی مجھے سردیوں میں کپکپاہٹ دیتا ہے: یہ "نئے سیکھنے والوں کے ٹولز" نہیں ہیں جنہیں آپ بعد میں چھوڑ دیں گے۔ یہ وہی پروفیشنل درجے کے ٹولز ہیں جنہیں گوگل، نیٹ فلکس، اور آپ کے پسندیدہ انڈی ایپ اسٹوڈیو کے ڈیولپرز ابھی اسی لمحے استعمال کر رہے ہیں۔ آپ انہیں استعمال کرتے ہوئے خود کو واقعی ماہر محسوس کریں گے! +اور یہ وہ حصہ ہے جو مجھے ابھی بھی تھرتھراہٹ دیتا ہے: یہ "نئے سیکھنے والوں کے آلات" نہیں جو آپ جلد ہی چھوڑ دیں گے۔ یہ وہی پیشہ ورانہ معیار کے آلات ہیں جو گوگل، نیٹ فلکس، اور وہ انڈی ایپ اسٹوڈیو جو آپ پسند کرتے ہیں، اس وقت بالکل استعمال کر رہے ہیں۔ آپ انہیں استعمال کر کے خود کو ایک ماہر محسوس کریں گے! ```mermaid graph TD - A["💡 آپ کا خیال"] --> B["⌨️ کوڈ ایڈیٹر
(VS Code)"] - B --> C["🌐 براؤزر ڈیوٹولز
(ٹیسٹنگ اور ڈی بگنگ)"] + A["💡 آپ کا خیال"] --> B["⌨️ کوڈ ایڈیٹر
(VS کوڈ)"] + B --> C["🌐 براؤزر ڈیولپمنٹ ٹولز
(ٹیسٹنگ اور ڈیبگنگ)"] C --> D["⚡ کمانڈ لائن
(آٹومیشن اور ٹولز)"] - D --> E["📚 دستاویزات
(تعلم اور حوالہ)"] - E --> F["🚀 شاندار ویب ایپ!"] + D --> E["📚 دستاویزات
(سیکھنا اور حوالہ)"] + E --> F["🚀 زبردست ویب ایپ!"] - B -.-> G["🤖 اے آئی اسسٹنٹ
(GitHub Copilot)"] - C -.-> H["📱 ڈیوائس ٹیسٹنگ
(ردعملی ڈیزائن)"] - D -.-> I["📦 پیکج منیجرز
(npm, yarn)"] - E -.-> J["👥 کمیونٹی
(Stack Overflow)"] + B -.-> G["🤖 اے آئی اسسٹنٹ
(گٹ ہب کوپائلٹ)"] + C -.-> H["📱 ڈیوائس ٹیسٹنگ
(جوابی ڈیزائن)"] + D -.-> I["📦 پیکیج مینیجرز
(npm, yarn)"] + E -.-> J["👥 کمیونٹی
(اسٹیک اوور فلو)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -508,349 +504,348 @@ graph TD style H fill:#f3e5f5 style I fill:#ffccbc style J fill:#e8eaf6 -``` +``` ### کوڈ ایڈیٹرز اور IDEs: آپ کے نئے ڈیجیٹل بہترین دوست -آئیے کوڈ ایڈیٹرز کے بارے میں بات کرتے ہیں – یہ واقعی آپ کے نئے پسندیدہ جگہیں بننے والے ہیں جہاں آپ اپنے ڈیجیٹل تخلیقات بنانے اور بہتر کرنے میں زیادہ تر وقت گزاریں گے۔ +آئیں بات کرتے ہیں کوڈ ایڈیٹرز کی – یہ واقعی آپ کی نئی پسندیدہ جگہیں بننے جا رہی ہیں جہاں آپ زیادہ تر وقت اپنے ڈیجیٹل تخلیقات کو تیار اور بہتر کرنے میں گزاریں گے۔ -مگر جدید ایڈیٹرز کی خاص بات یہ ہے: یہ صرف فینسی ٹیکسٹ ایڈیٹر نہیں ہیں۔ یہ ایسے ہیں جیسے سب سے ذہین، مددگار کوڈنگ رہنما آپ کے ساتھ 24/7 بیٹھا ہو۔ یہ آپ کی ٹائپنگ کی غلطیاں آپ کو دکھائی دینے سے پہلے پکڑ لیتے ہیں، آپ کو بہتری کے ایسے مشورے دیتے ہیں جو آپ کو نابغہ ظاہر کرتے ہیں، ہر کوڈ کے ٹکڑے کو سمجھنے میں مدد کرتے ہیں، اور بعض ایڈیٹرز تو اس بات کا اندازہ بھی لگا لیتے ہیں کہ آپ کیا لکھنے والے ہیں اور آپ کے خیالات مکمل کرنے کی پیشکش کرتے ہیں! +لیکن جدید ایڈیٹرز کی خاص بات یہ ہے کہ یہ صرف عام ٹیکسٹ ایڈیٹر نہیں ہیں۔ یہ ایسے ہیں جیسے آپ کے ساتھ ہمارے سب سے ذہین، مددگار کوڈنگ مینٹر 24/7 بیٹھا ہو۔ یہ آپ کی ٹائپنگ کی غلطیوں کو آپ سے پہلے پکڑ لیتے ہیں، بہتری کے مشورے دیتے ہیں جو آپ کو ایک جینیئس بناتے ہیں، ہر کوڈ کے حصے کو سمجھنے میں آپ کی مدد کرتے ہیں، اور کچھ آپ کے لکھنے سے پہلے ہی اندازہ لگا لیتے ہیں کہ آپ کیا لکھنے والے ہیں اور آپ کے خیالات مکمل کرنے کی پیشکش کرتے ہیں! -مجھے یاد ہے جب میں نے پہلی بار آٹو کمپلیشن دریافت کی تھی – میں واقعی محسوس کر رہا تھا جیسے مستقبل میں ہوں۔ آپ کچھ ٹائپ کرنا شروع کرتے ہیں، اور آپ کا ایڈیٹر کہتا ہے، "ارے، کیا آپ اس فنکشن کے بارے میں سوچ رہے تھے جو آپ کو بالکل چاہیے؟" یہ ایسا ہے جیسے آپ کا کوڈنگ دوست ایک ذہن پڑھنے والا ہو! +مجھے یاد ہے جب میں نے پہلی بار آٹو-کمپلیشن دریافت کی تھی – میں واقعی محسوس کر رہا تھا کہ میں مستقبل میں جی رہا ہوں۔ آپ لکھنا شروع کرتے ہیں، اور آپ کا ایڈیٹر کہتا ہے، "ارے، کیا آپ اس فنکشن کے بارے میں سوچ رہے تھے جو بالکل آپ کی ضرورت کو پورا کرتا ہے؟" یہ ایسا ہے جیسے ایک ذہن پڑھنے والا آپ کا کوڈنگ دوست ہو! -**یہ ایڈیٹرز اتنے شاندار کیوں ہیں؟** +**کیا چیزیں ان ایڈیٹرز کو ناقابل یقین بناتی ہیں؟** -جدید کوڈ ایڈیٹرز ایک متاثر کن فیچر سیٹ پیش کرتے ہیں جو آپ کی پیداواری صلاحیت کو بڑھانے کے لیے ڈیزائن کیا گیا ہے: +جدید کوڈ ایڈیٹرز آپ کی پیداواریت بڑھانے کے لیے درج ذیل خصوصیات رکھتے ہیں: -| خصوصیت | یہ کیا کرتی ہے | کیوں مددگار ہے | -|---------|----------------|---------------| -| **سِنٹیکس ہائلائٹنگ** | کوڈ کے مختلف حصوں کو رنگین کرتی ہے | کوڈ پڑھنا اور غلطیاں تلاش کرنا آسان بناتی ہے | -| **آٹو کمپلیشن** | جیسے جیسے آپ لکھتے ہیں کوڈ کی تجویز دیتی ہے | کوڈنگ کی رفتار بڑھاتی ہے اور ٹائپنگ کی غلطیاں کم کرتی ہے | -| **ڈیبگنگ کے ٹولز** | غلطیاں تلاش اور درست کرنے میں مدد دیتی ہے | مسئلے حل کرنے میں گھنٹوں کی بچت کرتی ہے | -| **ایکسٹینشنز** | مخصوص فیچرز شامل کرتی ہیں | آپ کے ایڈیٹر کو کسی بھی ٹیکنالوجی کے لیے حسبِ ضرورت بناتی ہیں | -| **AI اسسٹنٹس** | کوڈ اور وضاحتیں تجویز کرتی ہیں | سیکھنے اور پیداواری صلاحیت کو تیز کرتی ہیں | +| خصوصیت | کیا کرتا ہے | کیوں مددگار ہے | +|---------|--------------|--------------| +| **سِنٹیکس ہائی لائٹنگ** | آپ کے کوڈ کے مختلف حصوں کو رنگین کرتا ہے | کوڈ کو پڑھنا آسان اور غلطیاں دیکھنا آسان بناتا ہے | +| **آٹو کمپلیشن** | ٹائپ کرتے وقت کوڈ کی تجاویز دیتا ہے | کوڈنگ کو تیز اور ٹائپوں کی غلطی کم کرتا ہے | +| **ڈی بگنگ ٹولز** | آپ کو غلطیوں کو تلاش کرنے اور درست کرنے میں مدد دیتا ہے | مسئلے حل کرنے کے گھنٹوں بچاتا ہے | +| **ایکسٹینشنز** | خصوصیات شامل کریں | اپنے ایڈیٹر کو کسی بھی ٹیکنالوجی کے لیے حسب ضرورت بنائیں | +| **AI اسسٹنٹس** | کوڈ اور وضاحتیں تجویز کرتے ہیں | سیکھنے اور پیداواریت کو تیز کرتے ہیں | -> 🎥 **ویڈیو وسائل**: کیا آپ یہ ٹولز ایکشن میں دیکھنا چاہتے ہیں؟ اس [Tools of the Trade ویڈیو](https://youtube.com/watch?v=69WJeXGBdxg) کو دیکھیں جو ایک جامع جائزہ فراہم کرتا ہے۔ +> 🎥 **ویڈیو ذریعہ**: ان آلات کو عملی طور پر دیکھنا چاہتے ہیں؟ یہ [Tools of the Trade ویڈیو](https://youtube.com/watch?v=69WJeXGBdxg) دیکھیں، جامع جائزے کے لیے۔ -#### ویب ڈویلپمنٹ کے لیے تجویز کردہ ایڈیٹرز +#### ویب ڈویلپمنٹ کے لیے سفارش کردہ ایڈیٹرز -**[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) - کوڈ میں ٹائپنگ کی غلطیاں پکڑنا +**[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) - کوڈ میں ٹائپوز پکڑنے والا -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (ادا شدہ، طلباء کے لیے مفت) -- اعلی درجے کے ڈیبگنگ اور ٹیسٹنگ کے ٹولز -- ذہین کوڈ کمپلیشن -- بلٹ ان ورژن کنٹرول +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (ادا شدہ، طلباء کے لیے مفت) +- جدید ڈی بگنگ اور ٹیسٹنگ ٹولز +- ذہین کوڈ مکمل کرنا +- بلٹ ان ورژن کنٹرول -**کلاؤڈ بیسڈ IDEs** (مختلف قیمتیں) -- [GitHub Codespaces](https://github.com/features/codespaces) - آپ کے براؤزر میں مکمل VS Code -- [Replit](https://replit.com/) - سیکھنے اور کوڈ شئیر کرنے کے لیے بہترین -- [StackBlitz](https://stackblitz.com/) - فوری، مکمل ویب ڈویلپمنٹ +**کلاؤڈ بیسڈ IDEs** (مختلف قیمتیں) +- [GitHub Codespaces](https://github.com/features/codespaces) - آپ کے براؤزر میں مکمل VS Code +- [Replit](https://replit.com/) - سیکھنے اور کوڈ شئیر کرنے کے لیے بہترین +- [StackBlitz](https://stackblitz.com/) - فوری، مکمل اسٹیک ویب ڈویلپمنٹ -> 💡 **شروع کرنے کا مشورہ**: Visual Studio Code سے شروع کریں – یہ مفت ہے، صنعت میں وسیع پیمانے پر استعمال ہوتا ہے، اور اس کی ایک بڑی کمیونٹی ہے جو مددگار ٹیوٹوریلز اور ایکسٹینشنز بناتی ہے۔ +> 💡 **شروع کرنے کا مشورہ**: Visual Studio Code سے شروع کریں – یہ مفت ہے، صنعت میں وسیع پیمانے پر استعمال ہوتا ہے، اور اس کی ایک بہت بڑی کمیونٹی ہے جو مددگار ٹیوٹوریلز اور ایکسٹینشنز تیار کرتی ہے۔ -### ویب براؤزرز: آپ کی خفیہ ترقیاتی لیب +### ویب براؤزرز: آپ کی خفیہ ترقیاتی لیبارٹری -ٹھیک ہے، اپنے ذہن کو مکمل طور پر حیران ہونے کے لیے تیار ہو جائیں! آپ جانتے ہیں کہ آپ براؤزرز کو سوشل میڈیا اسکрол کرنے اور ویڈیوز دیکھنے کے لیے استعمال کرتے ہیں؟ حقیقت یہ ہے کہ یہ پورا وقت آپ سے چھپایا ہوا ایک شاندار خفیہ ڈیولپر لیب تھا، جو آپ کے دریافت کرنے کا منتظر تھا! +ٹھیک ہے، تیاری کریں کہ آپ کا ذہن مکمل طور پر پریشان ہو جائے! آپ جانتے ہیں کہ آپ براؤزرز کو سوشل میڈیا پر سکرول کرنے اور ویڈیوز دیکھنے کے لیے استعمال کرتے ہیں؟ تو یہ بات سامنے آئی ہے کہ پورے وقت یہ ایک شاندار خفیہ ڈویلپرز کی لیبارٹری چھپائے ہوئے تھے، بس آپ کے دریافت کرنے کے انتظار میں! -ہر بار جب آپ کسی ویب پیج پر رائٹ کلک کرتے ہیں اور "Inspect Element" کا انتخاب کرتے ہیں، آپ ایک پوشیدہ دنیا کے ڈیولپر ٹولز کھول رہے ہوتے ہیں جو سچ میں کچھ مہنگے سافٹ ویئر سے زیادہ طاقتور ہیں جن کے لیے میں نے سینکڑوں ڈالر ادا کیے ہیں۔ یہ ایسے ہے جیسے آپ کے عام باورچی خانے میں ایک خفیہ پینل کے پیچھے ایک پیشہ ور شیف کی لیبارٹری چھپی ہوئی ہو! -جب کسی نے مجھے پہلی بار براؤزر کے DevTools دکھائے، میں تین گھنٹے صرف کلک کرتے ہوئے اس پر غور کرتا رہا اور کہتا رہا "رکو، یہ بھی کر سکتا ہے؟!" آپ واقعی کسی بھی ویب سائٹ کو حقیقی وقت میں ایڈٹ کر سکتے ہیں، بالکل دیکھ سکتے ہیں کہ سب کچھ کتنی تیزی سے لوڈ ہو رہا ہے، اپنے سائٹ کو مختلف ڈیوائسز پر کیسا لگتا ہے جانچ سکتے ہیں، اور یہاں تک کہ جاوا اسکرپٹ کو ایک ماہر کی طرح ڈی بگ بھی کر سکتے ہیں۔ یہ واقعی دماغ ہلا دینے والا ہے! +جب بھی آپ کسی ویب صفحے پر رائٹ کلک کر کے "Inspect Element" منتخب کرتے ہیں، آپ ایک خفیہ ڈویلپر ٹولز کی دنیا کھول رہے ہوتے ہیں جو اتنے طاقتور ہیں کہ میں نے پہلے چند سو ڈالر کی مہنگی سافٹ ویئر کے لیے ادا کیے ہیں۔ یہ ایسا ہے جیسے آپ کا عام باورچی خانہ ایک خفیہ پینل کے پیچھے ایک پروفیشنل شیف کی لیبارٹری چھپا رہا ہو! +جب کسی نے پہلی بار مجھے براؤزر کے ڈویلپر ٹولز دکھائے، تو میں تقریباً تین گھنٹے بس کلک کرتا رہا اور کہہ رہا تھا "رکو، یہ بھی کر سکتا ہے؟!" آپ حقیقت میں کسی بھی ویب سائٹ کو حقیقی وقت میں ایڈٹ کر سکتے ہیں، دیکھ سکتے ہیں کہ سب کچھ کتنی تیزی سے لوڈ ہوتا ہے، اپنی سائٹ کو مختلف ڈیوائسز پر کیسے نظر آتا ہے جانچ سکتے ہیں، اور یہاں تک کہ جاوا اسکرپٹ کو پروفیشنل انداز میں ڈیبگ بھی کر سکتے ہیں۔ یہ واقعی دماغ ہلا دینے والا ہے! -**براؤزر آپ کا پوشیدہ ہتھیار کیوں ہیں:** +**براؤزر آپ کا رازدار ہتھیار کیوں ہیں:** -جب آپ کوئی ویب سائٹ یا ویب ایپلیکیشن بناتے ہیں، تو آپ کو یہ دیکھنا ہوتا ہے کہ یہ حقیقی دنیا میں کیسا دکھتا ہے اور کیسے چلتا ہے۔ براؤزر صرف آپ کا کام دکھاتے ہی نہیں بلکہ کارکردگی، رسائی، اور ممکنہ مسائل کے بارے میں تفصیلی فیڈبیک بھی فراہم کرتے ہیں۔ +جب آپ کوئی ویب سائٹ یا ویب ایپلیکیشن بناتے ہیں، تو آپ کو یہ دیکھنے کی ضرورت ہوتی ہے کہ یہ حقیقی دنیا میں کیسا لگتا ہے اور کیسے برتاؤ کرتا ہے۔ براؤزر نہ صرف آپ کا کام دکھاتے ہیں بلکہ کارکردگی، رسائی، اور ممکنہ مسائل کے بارے میں تفصیلی معلومات بھی فراہم کرتے ہیں۔ -#### براؤزر ڈیولپر ٹولز (DevTools) +#### براؤزر ڈویلپر ٹولز (DevTools) -جدید براؤزرز میں جامع ترقیاتی سوئٹس شامل ہیں: +جدید براؤزر جامع ترقیاتی سوئٹس فراہم کرتے ہیں: | ٹول کیٹیگری | یہ کیا کرتا ہے | استعمال کی مثال | -|--------------|---------------|----------------| -| **المنٹ انسپکٹر** | حقیقی وقت میں HTML/CSS دیکھیں اور ایڈٹ کریں | سٹائلنگ میں تبدیلی کر کے فوری نتائج دیکھیں | -| **کنسول** | ایرر پیغامات دیکھیں اور جاوا اسکرپٹ ٹیسٹ کریں | مسائل کی ڈی بگنگ کریں اور کوڈ کے ساتھ تجربہ کریں | -| **نیٹ ورک مانیٹر** | وسائل کے لوڈ ہونے کا ریکارڈ رکھیں | کارکردگی اور لوڈنگ وقت کو بہتر بنائیں | -| **ایکسسیسبلٹی چیکر** | جامع ڈیزائن کے لیے ٹیسٹ کریں | یقینی بنائیں کہ آپ کی سائٹ تمام صارفین کے لیے کام کرتی ہے | -| **ڈیوائس سمیولیٹر** | مختلف سکرین سائزز پر پریویو کریں | متعدد ڈیوائسز کے بغیر ریسپانسیو ڈیزائن کو ٹیسٹ کریں | +|---------------|--------------|------------------| +| **Element Inspector** | حقیقی وقت میں HTML/CSS دیکھیں اور ایڈٹ کریں | فوری نتائج دیکھنے کے لیے اسٹائلنگ کو ایڈجسٹ کریں | +| **Console** | ایرر میسجز دیکھیں اور جاوا اسکرپٹ کو ٹیسٹ کریں | مسائل کو ڈیبگ کریں اور کوڈ کے ساتھ تجربہ کریں | +| **Network Monitor** | وسائل کے لوڈ ہونے کا سراغ لگائیں | کارکردگی اور لوڈنگ اوقات کو بہتر بنائیں | +| **Accessibility Checker** | جامع ڈیزائن کے لیے ٹیسٹ کریں | یقینی بنائیں کہ آپ کی سائٹ تمام صارفین کے لیے کام کرتی ہے | +| **Device Simulator** | مختلف اسکرین سائز پر پریویو کریں | متعدد ڈیوائسز کے بغیر ریسپانسو ڈیزائن ٹیسٹ کریں | -#### ترقی کے لئے تجویز کردہ براؤزر +#### ترقی کے لیے تجویز کردہ براؤزرز -- **[کروم](https://developers.google.com/web/tools/chrome-devtools/)** - صنعت کا معیار DevTools کے ساتھ وسیع دستاویزات -- **[فائر فاکس](https://developer.mozilla.org/docs/Tools)** - بہترین CSS Grid اور ایکسیسبلٹی ٹولز -- **[ایج](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - کرومیم پر مبنی، مائیکروسافٹ کے ڈیولپر وسائل کے ساتھ +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - صنعت کے معیاری DevTools کے ساتھ مکمل دستاویزات +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - بہترین CSS Grid اور رسائی کے آلات +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - کرومیئم پر مبنی مائیکروسافٹ کے ڈویلپر وسائل کے ساتھ -> ⚠️ **اہم ٹیسٹنگ ٹپ**: اپنی ویب سائٹس کو ہمیشہ مختلف براؤزرز میں ٹیسٹ کریں! جو کچھ کروم میں بالکل کام کرتا ہے، وہ سفاری یا فائر فاکس میں مختلف لگ سکتا ہے۔ ماہر ڈیولپرز تمام اہم براؤزرز میں تجربہ کرتے ہیں تاکہ مستقل صارف تجربات کو یقینی بنایا جا سکے۔ +> ⚠️ **اہم ٹیسٹنگ ٹپ**: اپنی ویب سائٹس کو ہمیشہ متعدد براؤزرز میں ٹیسٹ کریں! جو چیز Chrome میں بہترین کام کرتی ہے، وہ Safari یا Firefox میں مختلف نظر آ سکتی ہے۔ پیشہ ور ڈویلپرز تمام بڑے براؤزرز میں ٹیسٹ کرتے ہیں تاکہ صارفین کو یکساں تجربہ ملے۔ -### کمانڈ لائن ٹولز: آپ کی ڈیولپر سپرپاورز کا دروازہ +### کمانڈ لائن ٹولز: آپ کے ڈویلپر سپر پاورز کا دروازہ -چلیے، کمانڈ لائن کے بارے میں ایک بالکل ایماندار لمحہ لیتے ہیں، کیونکہ میں چاہتا ہوں کہ آپ یہ کہیں کسی ایسے شخص سے سنیں جو واقعی اسے سمجھتا ہے۔ جب میں نے پہلی بار اسے دیکھا – صرف یہ خوفناک سیاہ سکرین جس پر متن ٹمٹما رہا تھا – میں نے واقعی سوچا، "نہیں، بالکل نہیں! یہ کچھ 1980 کی دہائی کی ہیکر فلم جیسا لگتا ہے، اور میں یقینی طور پر اس کے لیے کافی سمجھدار نہیں!" 😅 +چلو، یہاں کمانڈ لائن کے بارے میں کھری بات کرتے ہیں، کیونکہ میں چاہتا ہوں کہ آپ یہ کسی ایسے شخص سے سنیں جو واقعی اسے سمجھتا ہے۔ جب میں نے پہلی بار اسے دیکھا — بس یہ خوفناک سیاہ سکرین جس پر متن ٹمٹما رہا تھا — میں نے واقعی سوچا، "نہیں، بالکل نہیں! یہ کسی 1980 کی دہائی کی ہیکر فلم کا منظر لگتا ہے، اور میں یقینی طور پر اس کے لیے کافی ذہین نہیں ہوں!" 😅 -لیکن وہ بات جو میں چاہتا تھا کہ کسی نے مجھے اس وقت بتائی ہوتی، اور جو میں آپ کو ابھی بتا رہا ہوں یہ ہے: کمانڈ لائن خوفناک نہیں ہے – یہ درحقیقت آپ کے کمپیوٹر کے ساتھ براہ راست بات چیت کرنے جیسا ہے۔ اسے ایسے سمجھیں جیسے کھانے کا آرڈر دینا ایک خوبصورت ایپ کے ذریعے، جس میں تصاویر اور مینیو ہوں (جو آسان اور خوشگوار ہے)، کے بجائے آپ اپنے پسندیدہ مقامی ریسٹورنٹ میں جا رہے ہوں جہاں شیف جانتا ہے کہ آپ کو کیا پسند ہے اور صرف "چمکتا دمکتا کوئی سپرائز بنا دیں" کہنے پر کچھ بہترین بنا دیتا ہے۔ +لیکن یہ وہ بات ہے جو کاش کسی نے مجھے تب بتائی ہوتی، اور جو میں ابھی آپ کو بتا رہا ہوں: کمانڈ لائن خوفناک نہیں – یہ اصل میں آپ کے کمپیوٹر کے ساتھ براہ راست بات چیت کرنے جیسی ہے۔ اسے اس فرق کی طرح سمجھیں جو آپ کو فوڈ آرڈر کرنے میں ایک خوبصورت ایپ کے ذریعے پکچرز اور مینو کے ساتھ ہوتا ہے (جو آسان ہے) بمقابلہ آپ کے پسندیدہ مقامی ریسٹورنٹ میں جانا جہاں شیف بالکل جانتا ہے کہ آپ کو کیا پسند ہے اور آپ کے بس "کچھ حیرت انگیز میرے لیے بنا دو" کہنے پر وہ بہترین تیار کر دیتا ہے۔ -کمانڈ لائن وہ جگہ ہے جہاں ڈیولپرز خود کو جادوگر محسوس کرتے ہیں۔ آپ کچھ دکھاوے والے الفاظ (ٹھیک ہے، وہ صرف کمانڈز ہیں، لیکن جادوئی لگتے ہیں!) ٹائپ کرتے ہیں، انٹر دباتے ہیں، اور بوم! آپ نے پورے پروجیکٹ کے ڈھانچے بنا لیے، دنیا بھر سے طاقتور ٹولز انسٹال کیے، یا اپنی ایپ کو انٹرنیٹ پر لاکھوں لوگوں کے لیے تعینات کر دیا۔ جب آپ پہلی بار اس طاقت کا ذائقہ چکھ لیتے ہیں تو یہ واقعی عادت بن جاتی ہے! +کمانڈ لائن وہ جگہ ہے جہاں ڈویلپرز خود کو جادوگر محسوس کرتے ہیں۔ آپ چند جادوئی الفاظ (ٹھیک ہے، یہ صرف کمانڈز ہیں، لیکن جادوئی محسوس ہوتے ہیں!) ٹائپ کرتے ہیں، انٹر دباتے ہیں، اور جھٹ پٹ – آپ پورا پراجیکٹ ڈھانچہ بنا چکے ہوتے ہیں، دنیا بھر سے طاقتور ٹول انسٹال کر چکے ہوتے ہیں، یا اپنی ایپ کو انٹرنیٹ پر لاکھوں لوگوں کے سامنے تعینات کر چکے ہوتے ہیں۔ جب آپ پہلی بار اس طاقت کا ذائقہ چکھ لیتے ہیں، تو یہ واقعی بہت عادت بخش ہو جاتا ہے! **کمانڈ لائن آپ کا پسندیدہ ٹول کیوں بنے گا:** -جبکہ گرافیکل انٹرفیس بہت سے کاموں کے لیے بہترین ہیں، کمانڈ لائن خودکار کاری، درستگی، اور رفتار میں نمایاں ہے۔ بہت سے ترقیاتی ٹولز بنیادی طور پر کمانڈ لائن انٹرفیسز کے ذریعے کام کرتے ہیں، اور ان کو مؤثر طریقے سے سیکھنا آپ کی پیداواری صلاحیت کو نمایاں طور پر بڑھا سکتا ہے۔ +جبکہ گرافیکل انٹرفیس بہت سے کاموں کے لیے بہترین ہیں، کمانڈ لائن خود کاری، درستگی، اور رفتار میں مہارت رکھتا ہے۔ بہت سے ترقیاتی ٹولز بنیادی طور پر کمانڈ لائن انٹرفیس کے ذریعے کام کرتے ہیں، اور ان کا مؤثر استعمال سیکھنا آپ کی پیداواریت کو نمایاں طور پر بہتر بنا سکتا ہے۔ ```bash -# مرحلہ 1: پروجیکٹ کی ڈائریکٹری بنائیں اور اس میں جائیں +# مرحلہ 1: پروجیکٹ ڈائرکٹری بنائیں اور اس میں جائیں mkdir my-awesome-website cd my-awesome-website ``` - -**یہ کوڈ کیا کرتا ہے:** -- **ایک نیا ڈائریکٹری بنائیں جس کا نام "my-awesome-website" ہو آپ کے پروجیکٹ کے لیے** -- **نئے بنائے گئے ڈائریکٹری میں جائیں اور کام شروع کریں** + +**یہ کوڈ کیا کرتا ہے:** +- **ایک نئی ڈائریکٹری بنائیں** جس کا نام "my-awesome-website" ہو آپ کے پراجیکٹ کے لیے +- **نئی بنائی گئی ڈائریکٹری میں جائیں** تاکہ کام شروع کیا جا سکے ```bash -# مرحلہ 2: پراجیکٹ کو package.json کے ساتھ شروع کریں +# مرحلہ 2: پروگرام کو package.json کے ساتھ شروع کریں npm init -y -# جدید ترقیاتی ٹولز انسٹال کریں +# جدید ترقیاتی آلات انسٹال کریں npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` - -**قدم بہ قدم، یہ ہو رہا ہے:** -- **نئے Node.js پروجیکٹ کو ڈیفالٹ سیٹنگز کے ساتھ `npm init -y` چلائیں** -- **Vite کو تیز ترقی اور پروڈکشن بیلڈ کے لیے جدید بلڈ ٹول کے طور پر انسٹال کریں** -- **Prettier کو خودکار کوڈ فارمیٹنگ کے لیے اور ESLint کو کوڈ کوالٹی چیکس کے لیے شامل کریں** -- **`--save-dev` فلیگ استعمال کریں تاکہ یہ صرف ترقیاتی انحصار کے طور پر نشان زد ہوں** + +**قدم بہ قدم، یہاں کیا ہو رہا ہے:** +- `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 ڈویلپمنٹ سرور شروع کیا -**اوپر، ہم نے:** -- **اپنے پروجیکٹ کو منظم کیا، سورس کوڈ اور اثاثوں کے لیے الگ فولڈر بنائے** -- **مناسب دستاویز ڈھانچے کے ساتھ ایک بنیادی 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/)** | کوڈ فارمیٹنگ | اپنا کوڈ مستقل اور قابل پڑھائی رکھیں | +| **[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)** 💻 - روایتی ونڈوز کمانڈ لائن +**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://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** 💻 - روایتی Windows کمانڈ لائن -**macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - بلٹ ان ٹرمینل ایپلیکیشن -- **[iTerm2](https://iterm2.com/)** - جدید خصوصیات کے ساتھ ترقی یافتہ ٹرمینل +**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)** - جدید ٹرمینل ایمولیٹر +**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 میں کھولیں) جیسے جدید ورک فلو کمانڈز کی مشق کریں۔ جیسے جیسے آپ کو آرام دہ محسوس ہوتا ہے، آپ خود بخود مزید جدید کمانڈز اور خودکار طریقے سیکھ لیں گے۔ +> 🎯 **سیکھنے کا راستہ**: بنیادی کمانڈز جیسے `cd` (ڈائریکٹری تبدیل کریں)، `ls` یا `dir` (فائلیں فہرست کریں)، اور `mkdir` (فولڈر بنائیں) سے شروع کریں۔ جدید ورک فلو کمانڈز جیسے `npm install`, `git status`, اور `code .` (موجودہ ڈائریکٹری VS Code میں کھولیں) کی مشق کریں۔ جیسے جیسے آپ آرام دہ ہوتے جائیں گے، آپ خود بخود مزید پیچیدہ کمانڈز اور خود کاری کی تکنیکیں سیکھیں گے۔ -### ڈاکیومنٹیشن: آپ کا ہمہ وقت دستیاب لرننگ مینٹر +### دستاویزات: آپ کا ہمیشہ دستیاب تعلیم دینے والا رہنما -چلیے، ایک چھوٹا راز شیئر کرتا ہوں جو آپ کو بطور مبتدی بہت بہتر محسوس کرائے گا: یہاں تک کہ سب سے تجربہ کار ڈیولپرز بھی اپنی بہت ساری وقت ڈاکیومنٹیشن پڑھنے میں گزارتے ہیں۔ اور یہ اس لیے نہیں کہ انہیں پتہ نہیں ہے کہ وہ کیا کر رہے ہیں – بلکہ یہ حکمت کی نشانی ہے! +اچھا، میں ایک چھپا ہوا راز بتاتا ہوں جو آپ کو بطور مبتدی بہت بہتر محسوس کروائے گا: سب سے تجربہ کار ڈویلپرز بھی اپنی زیادہ تر وقت دستاویزات پڑھنے میں گزارتے ہیں۔ اور یہ اس لیے نہیں کہ وہ نہیں جانتے کہ کیا کر رہے ہیں – بلکہ یہ عقل کی علامت ہے! -ڈاکیومنٹیشن کو ایسے سمجھیں جیسے دنیا کے سب سے صبر والے، علم والے استاد جو چوبیس گھنٹے آپ کے لیے دستیاب ہوں۔ کوئی مسئلہ آدھی رات کو؟ ڈاکیومنٹیشن ایک گرم ورچوئل گلے کے ساتھ آپ کے سوال کا بالکل درست جواب لاتی ہے۔ کوئی نیا فیچر سیکھنا ہے جس کی ہر کوئی بات کر رہا ہو؟ ڈاکیومنٹیشن آپ کی مدد میں موجود ہے قدم بہ قدم مثالوں کے ساتھ۔ کوئی چیز کیوں کام کرتی ہے اس کی سمجھنا چاہتے ہیں؟ جی ہاں – ڈاکیومنٹیشن آپ کو ایک ایسے انداز میں سمجھاتی ہے جو آخر کار بات سمجھ میں آ جائے! +دستاویزات کو اس دنیا کے سب سے صابر، علم والے استاد سمجھیں جو چوبیس گھنٹے دستیاب ہیں۔ رات کے دو بجے مسئلہ میں پھنس گئے؟ دستاویزات وہاں ہوتی ہے ایک گرم ورچوئل ہگ کے ساتھ اور بالکل وہ جواب جو آپ کو چاہیے۔ کوئی نیا دلچسپ فیچر سیکھنا چاہتے ہیں جس کے بارے میں سب بات کر رہے ہیں؟ دستاویزات آپ کا ساتھ دیتی ہے مرحلہ وار مثالوں کے ساتھ۔ سمجھنا چاہتے ہیں کہ کوئی چیز کیوں اس طرح کام کرتی ہے؟ آپ نے صحیح سوچا – دستاویزات اسے ایسی وضاحت کے ساتھ پیش کرتی ہے کہ آخر کار سمجھ آ جائے! -یہ بات جو میری نظر بدلی: ویب ڈویلپمنٹ کی دنیا بہت تیز بڑھتی ہے، اور کوئی بھی (بلکل کوئی نہیں) سب کچھ یاد نہیں رکھتا۔ میں نے سینئر ڈیولپرز کو 15+ سال کے تجربے کے ساتھ بنیادی سنٹیکس دیکھتے دیکھا ہے، اور جانتے ہیں کیا؟ یہ شرمندہ کرنے والی بات نہیں ہے – یہ ہوشیاری ہے! بات یادداشت کی نہیں، بلکہ اس بات کی ہے کہ آپ کو قابل اعتماد جوابات کہاں تلاش کرنے ہیں اور انہیں کیسے استعمال کرنا ہے۔ +یہ چیز جو میرا نظریہ مکمل طور پر بدل گئی: ویب ڈیولپمنٹ کی دنیا بہت تیزی سے تبدیل ہوتی ہے، اور کوئی بھی (بلکل کوئی بھی نہیں!) سب کچھ یاد نہیں رکھتا۔ میں نے 15+ سال کے تجربے والے سینئر ڈویلپرز کو بنیادی نحو تلاش کرتے دیکھا ہے، اور جانتے ہیں؟ یہ شرمندگی کی بات نہیں – یہ ہوشیاری ہے! بات کامل یادداشت رکھنے کی نہیں، بلکہ تیزی سے قابل اعتماد جواب تلاش کرنے اور انہیں سمجھ کر استعمال کرنے کی ہے۔ -**یہاں اصل جادو ہو رہا ہے:** +**یہیں اصل جادو ہوتا ہے:** -پیشہ ور ڈیولپرز اپنی بہت ساری وقت ڈاکیومنٹیشن پڑھنے میں گزارتے ہیں – اس لیے نہیں کہ وہ نہیں جانتے کہ کیا کرنا ہے، بلکہ چونکہ ویب ڈویلپمنٹ کا میدان تیزی سے بدل رہا ہے، تازہ دم رہنے کے لیے مسلسل سیکھنے کی ضرورت ہوتی ہے۔ زبردست ڈاکیومنٹیشن نہ صرف یہ سمجھاتی ہے کہ *کسی چیز کو کیسے استعمال کریں* بلکہ *کیوں* اور *کب* اسے استعمال کرنا چاہیے۔ +پیشہ ور ڈویلپرز اپنی زیادہ تر وقت دستاویزات پڑھنے میں گزارتے ہیں – اس لیے نہیں کہ وہ نہیں جانتے کہ کر کیا رہے ہیں، بلکہ کیونکہ ویب ڈیولپمنٹ ایسا میدان ہے جو بہت تیزی سے بدلتا رہتا ہے، اس لیے جدید رہنے کے لیے مسلسل سیکھنا ضروری ہے۔ عمدہ دستاویزات آپ کو صرف یہ نہیں سکھاتی کہ کچھ کیسے استعمال کریں، بلکہ یہ بھی کہ کیوں اور کب اسے استعمال کرنا چاہیے۔ -#### ضروری ڈاکیومنٹیشن وسائل +#### ضروری دستاویزی وسائل -**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- ویب ٹیکنالوجی ڈاکیومنٹیشن کا سونا -- HTML، CSS، اور جاوا اسکرپٹ کے لیے جامع رہنما -- براؤزر کی مطابقت کی معلومات شامل -- عملی مثالیں اور انٹرایکٹو ڈیمو شامل +**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** +- ویب ٹیکنالوجی کی دستاویزات کا سونے کا معیار +- HTML، CSS، اور جاوا اسکرپٹ کے مکمل رہنما +- براؤزر مطابقت کی معلومات شامل +- عملی مثالیں اور انٹرایکٹو ڈیموز -**[Web.dev](https://web.dev)** (گوگل کی جانب سے) -- جدید ویب ڈویلپمنٹ کی بہترین مشقیں -- کارکردگی کو بہتر بنانے کے گائیڈز -- رسائی اور جامع ڈیزائن کے اصول -- حقیقی دنیا کے منصوبوں کے کیس اسٹڈیز +**[Web.dev](https://web.dev)** (گوگل کی جانب سے) +- جدید ویب ڈیولپمنٹ کی بہترین مشقیں +- کارکردگی بہتر بنانے کے گائیڈز +- رسائی اور جامع ڈیزائن اصول +- حقیقی دنیا کے منصوبوں کے کیس اسٹڈیز -**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- ایج براؤزر کی ترقیاتی وسائل -- پروگریسیو ویب ایپ گائیڈز -- کراس-پلیٹ فارم ترقیاتی بصیرت +**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** +- ایج براؤزر کی ترقی کے وسائل +- پروگریسو ویب ایپ گائیڈز +- کراس پلیٹ فارم ترقی کے بصیرت -**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- منظم تعلیمی نصاب -- صنعت کے ماہرین کے ویڈیو کورسز -- عملی کوڈنگ مشقیں +**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** +- منظم تعلیمی نصاب +- صنعت کے ماہرین کے ویڈیو کورسز +- عملی کوڈنگ مشقیں -> 📚 **مطالعہ کی حکمت عملی**: ڈاکیومنٹیشن کو یاد کرنے کی کوشش نہ کریں – بلکہ اسے مؤثر طریقے سے نیویگیٹ کرنا سیکھیں۔ بار بار استعمال ہونے والے حوالے بک مارک کریں اور مخصوص معلومات جلد حاصل کرنے کے لیے سرچ فنکشنز کی مشق کریں۔ +> 📚 **مطالعہ کی حکمت عملی**: دستاویزات کو یاد کرنے کی کوشش نہ کریں – اس کے بجائے اسے مؤثر طریقے سے نیویگیٹ کرنا سیکھیں۔ اکثر استعمال ہونے والے حوالہ جات کو بک مارک کریں اور مخصوص معلومات تیزی سے تلاش کرنے کے لیے سرچ فیچرز کی مشق کریں۔ -### 🔧 **ٹول ماسٹری چیک: آپ سے کیا مطابقت رکھتا ہے؟** +### 🔧 **ٹول ماسٹری چیک: آپ کے لیے کیا جَذب ہوتا ہے؟** -**ایک لمحہ لیں اور غور کریں:** -- سب سے پہلے کون سا ٹول آزمانے کے لیے سب سے زیادہ پرجوش ہیں؟ (اس کا کوئی غلط جواب نہیں!) -- کیا کمانڈ لائن اب بھی خوفناک لگتی ہے یا آپ کو اس کے بارے میں تجسس ہے؟ -- کیا آپ تصور کر سکتے ہیں کہ براؤزر DevTools کے ذریعے اپنی پسندیدہ ویب سائٹس کے پردے کے پیچھے جھانکیں؟ +**ذرا سوچیں:** +- سب سے پہلے کون سا ٹول آزمانے کے لیے سب سے زیادہ پرجوش ہیں؟ (کوئی غلط جواب نہیں!) +- کیا کمانڈ لائن اب بھی خوفناک محسوس ہوتی ہے، یا آپ اسے جاننے کے لیے متجسس ہیں؟ +- کیا آپ اپنے پسندیدہ ویب سائٹس کے پیچھے جھانکنے کے لیے براؤزر DevTools کا استعمال کرنے کا تصور کر سکتے ہیں؟ ```mermaid -pie title "ڈیویلپر کے آلات کے ساتھ گزارا گیا وقت" +pie title "ڈویلپر کا آلات کے ساتھ صرف کیا گیا وقت" "کوڈ ایڈیٹر" : 40 "براؤزر ٹیسٹنگ" : 25 "کمانڈ لائن" : 15 - "دستاویزات کا مطالعہ" : 15 + "دستاویزات پڑھنا" : 15 "ڈیبگنگ" : 5 -``` -> **دلچسپ بات**: زیادہ تر ڈیولپرز اپنے کوڈ ایڈیٹر میں تقریباً 40% وقت گزارتے ہیں، لیکن دیکھیں کہ ٹیسٹنگ، سیکھنے، اور مسئلے حل کرنے میں کتنا وقت لگتا ہے۔ پروگرامنگ صرف کوڈ لکھنے کے بارے میں نہیں – یہ تجربات تخلیق کرنے کے بارے میں ہے! +``` +> **دلچسپ بات**: زیادہ تر ڈویلپرز اپنا تقریباً 40% وقت کوڈ ایڈیٹر میں گزارتے ہیں، لیکن دیکھیں کہ ٹیسٹنگ، سیکھنے، اور مسئلے حل کرنے میں کتنا وقت لگتا ہے۔ پروگرامنگ صرف کوڈ لکھنا نہیں – بلکہ تجربات تخلیق کرنا ہے! -✅ **غور و فکر کے لیے**: یہ سوچیں – ویب سائٹس بنانے (ترقی) کے ٹولز اور ان کے دکھاوے کے انداز (ڈیزائن) کے لیے ٹولز میں کیا فرق ہو سکتا ہے؟ یہ ایسے ہے جیسے ایک معمار جو خوبصورت گھر ڈیزائن کرتا ہے اور ایک ٹھیکیدار جو اسے حقیقت میں بناتا ہے۔ دونوں اہم ہیں، مگر ان کے ٹول باکس مختلف ہوتے ہیں! یہ سوچ آپ کو یہ سمجھنے میں بہت مدد دے گی کہ ویب سائٹس کیسے زندگی پاتی ہیں۔ +✅ **غور کرنے کی بات**: یہ سوچیں — ویب سائٹ بنانے (ڈیولپمنٹ) کے لیے ٹولز اور ان کی ڈیزائننگ (ڈیزائن) کے لیے ٹولز کیسے مختلف ہو سکتے ہیں؟ یہ اس فرق کی طرح ہے جیسے ایک معمار خوبصورت گھر ڈیزائن کرتا ہے اور ٹھیکیدار اسے حقیقت میں بناتا ہے۔ دونوں اہم ہیں، لیکن ان کے لیے مختلف ٹول باکسز کی ضرورت ہوتی ہے! یہ سوچ آپ کو ویب سائٹس کے اصل وجود کو سمجھنے میں مدد دے گی۔ ## GitHub Copilot Agent چیلنج 🚀 -ایجنٹ موڈ استعمال کریں اور درج ذیل چیلنج مکمل کریں: +ایجنٹ موڈ کا استعمال کرتے ہوئے مندرجہ ذیل چیلنج مکمل کریں: -**تفصیل:** جدید کوڈ ایڈیٹر یا IDE کی خصوصیات دریافت کریں اور دکھائیں کہ یہ آپ کے ویب ڈیولپر ورک فلو کو کیسے بہتر بنا سکتا ہے۔ +**تفصیل:** جدید کوڈ ایڈیٹر یا IDE کی خصوصیات کا مطالعہ کریں اور دکھائیں کہ یہ آپ کے ورک فلو کو بطور ویب ڈویلپر کیسے بہتر بنا سکتا ہے۔ -**پرومپٹ:** کوئی کوڈ ایڈیٹر یا IDE منتخب کریں (جیسے Visual Studio Code, WebStorm، یا کلاؤڈ بیسڈ IDE)۔ تین خصوصیات یا توسیعات کی فہرست بنائیں جو آپ کو کوڈ لکھنے، ڈی بگ کرنے، یا کوڈ کی دیکھ بھال میں مدد دیتی ہیں۔ ہر ایک کے لیے اپنے ورک فلو پر اس کے فائدے کی مختصر وضاحت کریں۔ +**پرومپٹ:** کوئی کوڈ ایڈیٹر یا IDE منتخب کریں (جیسے Visual Studio Code, WebStorm، یا کلاؤڈ بیسڈ IDE)۔ تین خصوصیات یا ایکسٹینشنز کی فہرست بنائیں جو آپ کو کوڈ لکھنے، ڈیبگ کرنے، یا اس کی دیکھ بھال کرنے میں مدد دیتی ہیں۔ ہر ایک کے بارے میں مختصر وضاحت دیں کہ یہ آپ کے ورک فلو کو کیسے فائدہ دیتی ہے۔ --- ## 🚀 چیلنج -**ٹھیک ہے، جاسوس، کیا آپ اپنے پہلے کیس کے لیے تیار ہیں؟** +**چلو، ڈیٹیکٹو، آپ کا پہلا کیس تیار ہے؟** -اب جب کہ آپ نے یہ زبردست بنیاد حاصل کر لی ہے، میرے پاس ایک مہم ہے جو آپ کو دکھائے گی کہ پروگرامنگ کی دنیا کتنی حیرت انگیز اور مختلف ہو سکتی ہے۔ اور سنیں – ابھی یہ کوڈ لکھنے کا مرحلہ نہیں ہے، لہٰذا دباؤ نہ لیں! خود کو ایک پروگرامنگ زبانوں کے جاسوس کے طور پر سوچیں جو اپنے پہلے دلچسپ کیس پر ہے! +اب چونکہ آپ کے پاس یہ زبردست بنیاد ہے، میرے پاس آپ کے لیے ایک ایڈونچر ہے جو آپ کو دکھائے گا کہ پروگرامنگ کی دنیا کتنی مختلف اور دلچسپ ہے۔ اور سنیں – ابھی کوڈ لکھنے کا عمل شروع نہیں ہے، تو کوئی دباؤ نہیں! اپنے آپ کو پروگرامنگ زبان کا ایک انسپکٹر سمجھیں جو اپنے پہلے پرجوش کیس پر ہے! -**آپ کا مشن، اگر آپ قبول کریں:** -1. **زبانوں کے کھوجی بنیں**: تین پروگرامنگ زبانوں کو منتخب کریں جو بالکل مختلف ہیں – شاید ایک ویب سائٹس بناتی ہے، ایک موبائل ایپس تیار کرتی ہے، اور ایک سائنس دانوں کے لیے ڈیٹا پروسیسنگ کرتی ہے۔ ہر زبان میں ایک ہی آسان کام کی مثالیں تلاش کریں۔ میں وعدہ کرتا ہوں کہ آپ حیران رہ جائیں گے کہ یہ مختلف زبانیں ایک ہی کام کتنی مختلف نظر آ کر کر سکتی ہیں! +**آپ کا مشن، اگر آپ قبول کریں:** +1. **زبانوں کے ماہر بنیں:** بالکل مختلف دنیاوں سے تین پروگرامنگ زبانیں منتخب کریں — شاید ایک ویب سائٹ بناتی ہو، ایک موبائل ایپس بناتی ہو، اور ایک سائنسدانوں کے لیے ڈیٹا پراسیس کرتی ہو۔ ہر زبان میں ایک ہی سادہ کام کی مثالیں تلاش کریں۔ میں وعدہ کرتا ہوں کہ آپ حیران رہ جائیں گے کہ یہ سب ایک ہی کام کیسے بہت مختلف نظر آ سکتے ہیں! +2. **ان کی ابتداء کی کہانیاں جانیں:** ہر زبان کو خاص کیا بناتا ہے؟ یہ ایک زبردست حقیقت ہے — ہر پروگرامنگ زبان اس لیے بنائی گئی ہے کیونکہ کسی نے سوچا، "مجھے لگتا ہے کہ اس مخصوص مسئلے کا بہتر حل ہونا چاہیے۔" کیا آپ ان مسائل کو سمجھ سکتے ہیں؟ کچھ کہانیاں واقعی دلچسپ ہوتی ہیں! +3. **کمیونٹی سے ملو:** چیک کریں کہ ہر زبان کی کمیونٹی کتنی خوش آمدید کہتی ہے اور پرجوش ہے۔ کچھ لاکھوں ڈویلپرز پر مشتمل ہیں جو معلومات شیئر کرتے اور ایک دوسرے کی مدد کرتے ہیں، جبکہ دوسرے چھوٹے مگر بے حد قریبی اور معاون ہوتے ہیں۔ آپ کو ان مختلف شخصیات کو دیکھ کر لطف آئے گا! +4. **اپنے احساس پر عمل کریں:** کون سی زبان آپ کو ابھی سب سے زیادہ قابلِ رسائی لگتی ہے؟ "کامل" انتخاب کے بارے میں فکر نہ کریں – بس اپنے جذبے کو سنیں! حقیقت میں یہاں کوئی غلط جواب نہیں، اور آپ بعد میں دوسرے بھی دریافت کر سکتے ہیں۔ -2. **ان کی اصل کہانیاں دریافت کریں**: ہر زبان کیا خاص بناتی ہے؟ ایک دلچسپ حقیقت یہ ہے کہ ہر پروگرامنگ زبان اسی لیے بنی ہے کیونکہ کسی نے سوچا، "یہ مسئلہ حل کرنے کا ایک بہتر طریقہ ہونا چاہیے۔" کیا آپ ان مسائل کو سمجھ سکتے ہیں؟ ان میں سے کچھ کہانیاں واقعی دلچسپ ہیں! +**بونس ڈیٹیکٹو ورک:** دیکھیں کہ آپ کون سی بڑی ویب سائٹس یا ایپس ہر زبان سے بنی ہوئی دریافت کر سکتے ہیں۔ میں شرط لگاتا ہوں کہ آپ حیران رہ جائیں گے کہ انسٹاگرام، نیٹ فلکس، یا وہ موبائل گیم جو آپ بند نہیں کر پاتے انہیں کون سی زبانیں چلاتی ہیں! -3. **کمیونٹیز سے ملیں**: دیکھیں کہ ہر زبان کی کمیونٹی کتنی خوش آمدید کہتی ہے اور جذباتی ہے۔ کچھ کمیونٹیز میں لاکھوں ڈیولپرز ہوتے ہیں جو علم شیئر کرتے ہیں اور ایک دوسرے کی مدد کرتے ہیں، جبکہ کچھ چھوٹی مگر انتہائی مضبوط اور مددگار ہوتی ہیں۔ آپ مختلف شخصیتوں کو دیکھ کر لطف اندوز ہوں گے جو ان کمیونٹیز میں ہوتی ہیں! +> 💡 **یاد رکھیں:** آج آپ کا مقصد کسی زبان میں ماہر بننا نہیں بلکہ علاقے کو جاننا ہے تاکہ آپ فیصلہ کر سکیں کہ کہاں اپنی دکان لگانی ہے۔ اپنا وقت لیں، مزہ کریں، اور اپنی تجسس کو رہنمائی کرنے دیں! -4. **اپنی جبلت پر عمل کریں**: کون سی زبان آپ کو ابھی سب سے زیادہ قابل رسائی لگتی ہے؟ "پرفیکٹ" انتخاب کرنے کی فکر نہ کریں – بس اپنی حس پر یقین کریں! واقعی یہاں کوئی غلط جواب نہیں، اور آپ ہمیشہ بعد میں دوسری زبانیں بھی دریافت کر سکتے ہیں۔ +## آپ نے جو سیکھا اسے منائیں! -**اضافی جاسوسی کام**: دیکھیں کہ آپ کو معلوم ہو سکے کہ کون سی بڑی ویب سائٹس یا ایپس ہر زبان کے ساتھ بنی ہیں۔ میں ضمانت دیتا ہوں کہ آپ حیران رہ جائیں گے کہ Instagram, Netflix، یا وہ موبائل گیم جو آپ بند نہیں کر سکتے، ان کے پیچھے کون سی زبان ہے! +واہ، آپ نے آج بہت ہی زبردست معلومات حاصل کی ہے! میں واقعی پرجوش ہوں کہ یہ حیرت انگیز سفر آپ کے ساتھ کتنا مضبوط پکڑا ہے۔ اور یاد رکھیں – یہ کوئی امتحان نہیں جہاں آپ کو ہر چیز بالکل درست کرنی ہو۔ یہ اس دلچسپ دنیا کے بارے میں آپ کی سیکھنے کی جشن ہے جس میں آپ غوطہ لگانے والے ہیں! -> 💡 **یاد رکھیں**: آپ آج ان زبانوں میں ماہر بننے نہیں جا رہے۔ آپ صرف اس علاقے کو جان رہے ہیں تاکہ فیصلہ کر سکیں کہ کہاں قیام کریں۔ وقت لیں، مزہ کریں، اور اپنی تجسس کو رہنمائی دیں! - -## آئیں منائیں آپ کی دریافت! - -واہ، آپ نے آج بہت زبردست معلومات سیکھیں ہیں! میں واقعی پرجوش ہوں کہ دیکھوں کہ اس شاندار سفر کا کتنا حصہ آپ کے ساتھ رہ گیا ہے۔ اور یاد رکھیں – یہ کوئی امتحان نہیں ہے جس میں سب کچھ بالکل درست ہونا ضروری ہو۔ یہ صرف اس حیرت انگیز دنیا کے بارے میں آپ کی سیکھ کا جشن ہے جس میں آپ داخل ہونے والے ہیں! - -[سبق کے بعد کا کوئز دیں](https://ff-quizzes.netlify.app/web/) +[سبق کے بعد کا کوئز لیں](https://ff-quizzes.netlify.app/web/) ## جائزہ اور خود مطالعہ -**اپنا وقت لیں اور اس کا لطف اٹھائیں!** -آپ نے آج بہت کچھ سیکھا ہے، اور یہ واقعی قابل فخر بات ہے! اب آتا ہے دلچسپ حصہ – ان موضوعات کی کھوج کرنا جو آپ کی تجسس کو بھڑکاتے ہیں۔ یاد رکھیں، یہ ہوم ورک نہیں ہے – یہ ایک مہم جوئی ہے! +**آرام سے وقت نکالیں اور اس کے ساتھ مزہ کریں!** +آپ نے آج بہت کچھ سیکھا ہے، اور یہ فخر کی بات ہے! اب مزے کی بات آتی ہے – ان موضوعات کو دریافت کرنا جنہوں نے آپ کی دلچسپی جگائی۔ یاد رکھیں، یہ ہوم ورک نہیں ہے – یہ ایک مہم ہے! -**اس بات میں مزید گہرائی سے غوطہ لگائیں جو آپ کو پرجوش کرتا ہے:** +**اپنے جذبے کو گہرائی سے سمجھیں:** -**پروگرامنگ زبانوں کے ساتھ عملی کام کریں:** -- 2-3 زبانوں کی سرکاری ویب سائٹس دیکھیں جنہوں نے آپ کی توجہ حاصل کی ہو۔ ہر ایک کی اپنی شخصیت اور کہانی ہوتی ہے! -- کچھ آن لائن کوڈنگ پلیگراؤنڈز آزما کر دیکھیں جیسے [CodePen](https://codepen.io/)، [JSFiddle](https://jsfiddle.net/)، یا [Replit](https://replit.com/). تجربہ کرنے سے نہ گھبرائیں – آپ کچھ بھی خراب نہیں کر سکتے! -- اپنے پسندیدہ زبان کی پیدائش کے بارے میں پڑھیں۔ واقعی، ان اصل کہانیوں میں دلچسپ حقائق ہوتے ہیں اور یہ آپ کو سمجھنے میں مدد دیں گے کہ زبانیں اس طرح سے کام کیوں کرتی ہیں۔ +**پروگرامنگ زبانوں کے ساتھ عملی تعلق قائم کریں:** +- 2-3 ایسی زبانوں کی آفیشل ویب سائٹس دیکھیں جنہوں نے آپ کی توجہ حاصل کی ہو۔ ہر ایک زبان کی اپنی شخصیت اور کہانی ہوتی ہے! +- کچھ آن لائن کوڈنگ پلیگراؤنڈز استعمال کریں جیسے [CodePen](https://codepen.io/)، [JSFiddle](https://jsfiddle.net/)، یا [Replit](https://replit.com/). تجربہ کرنے سے گھبرائیں مت – آپ کچھ بھی خراب نہیں کر سکتے! +- پڑھیں کہ آپ کی پسندیدہ زبان کیسے وجود میں آئی۔ صدقے جاؤں، کچھ داستانیں بہت دلچسپ ہوتی ہیں اور ان سے آپ کو سمجھ میں آئے گا کہ زبانیں اس طرح کیوں کام کرتی ہیں۔ -**اپنے نئے آلات کے ساتھ آرام دہ ہو جائیں:** -- اگر آپ نے ابھی تک Visual Studio Code ڈاؤن لوڈ نہیں کیا تو اسے ابھی ڈاؤن لوڈ کریں – یہ مفت ہے اور آپ کو بہت پسند آئے گا! -- ایک چند منٹ خرچ کر کے ایکسٹینشنز مارکیٹ پلیس کو براؤز کریں۔ یہ آپ کے کوڈ ایڈیٹر کے لیے ایک ایپ اسٹور کی مانند ہے! -- اپنے براؤزر کے ڈویلپر ٹولز کھولیں اور بس مختلف جگہوں پر کلک کریں۔ ہر چیز کو سمجھنے کی فکر نہ کریں – صرف آشنائی حاصل کریں۔ +**اپنے نئے اوزاروں سے مانوس ہوں:** +- اگر آپ نے ابھی تک Visual Studio Code ڈاؤن لوڈ نہیں کیا تو کر لیں – یہ مفت ہے اور آپ کو بہت پسند آئے گا! +- کچھ منٹ ایکسٹینشنز مارکیٹ پلیس میں گزاریں۔ یہ آپ کے کوڈ ایڈیٹر کے لیے ایک ایپ اسٹور کی طرح ہے! +- اپنے براؤزر کے ڈیولپر ٹولز کھولیں اور وہاں کلک کریں۔ سب کچھ سمجھنے کی فکر نہ کریں – بس وہاں موجود چیزوں سے واقف ہوں۔ **کمیونٹی میں شامل ہوں:** -- کچھ ڈویلپر کمیونٹیز کو [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), یا [GitHub](https://github.com/) پر فالو کریں۔ پروگرامنگ کمیونٹی نئے آنے والوں کے لیے بے حد خوش آمدید کہنے والی ہے! -- یوٹیوب پر کچھ ابتدائی سطح کے کوڈنگ ویڈیوز دیکھیں۔ بہت سے شاندار تخلیق کار ہیں جو یاد رکھتے ہیں کہ شروع کرنا کیسا ہوتا ہے۔ -- مقامی ملاقاتوں یا آن لائن کمیونٹیز میں شامل ہونے پر غور کریں۔ یقین کریں، ڈویلپر نئے آنے والوں کی مدد کرنا پسند کرتے ہیں! +- کچھ ڈیولپر کمیونٹیز کو فالو کریں جیسے [Dev.to](https://dev.to/)، [Stack Overflow](https://stackoverflow.com/)، یا [GitHub](https://github.com/). پروگرامنگ کمیونٹی نئے آنے والوں کا بے حد استقبال کرتی ہے! +- یوٹیوب پر کچھ ابتدا پسند کوڈنگ ویڈیوز دیکھیں۔ بہت سے شاندار تخلیق کار موجود ہیں جو یاد رکھتے ہیں کہ شروع کرنا کیسا ہوتا ہے۔ +- مقامی ملاقاتوں یا آن لائن کمیونٹیز میں شامل ہونے پر غور کریں۔ یقین کریں، ڈیولپرز نئے آنے والوں کی مدد کرنا پسند کرتے ہیں! + +> 🎯 **سنو، یہ بات یاد رکھنا:** آپ سے توقع نہیں کی جا رہی کہ آپ راتوں رات کوڈنگ میں ماہر بن جائیں! آپ ابھی اس شاندار نئی دنیا سے واقف ہو رہے ہیں جس کا آپ حصہ بننے جا رہے ہیں۔ اپنا وقت لیں، اس سفر کا لطف اٹھائیں، اور یاد رکھیں – ہر ایک پروگرامر جس کی آپ تعریف کرتے ہیں، کبھی آپ کی جگہ پر بیٹھا تھا، پُرجوش اور شاید تھوڑا سا گھبرایا ہوا۔ یہ بالکل فطری ہے اور اس کا مطلب ہے کہ آپ صحیح راستے پر ہیں۔ + -> 🎯 **سنیں، یہ بات یاد رکھیں:** آپ سے توقع نہیں کی جاتی کہ آپ ایک رات میں کوڈنگ کے جادوگر بن جائیں! ابھی، آپ بس اس حیرت انگیز نئی دنیا کو جان رہے ہیں جس کا حصہ بننے والے ہیں۔ اپنا وقت لیں، اس سفر کا لطف اٹھائیں، اور یاد رکھیں – ہر وہ ڈویلپر جس کی آپ تعریف کرتے ہیں کبھی آپ کی جگہ پر بیٹھا تھا، پرجوش اور شاید تھوڑا مغلوب محسوس کر رہا تھا۔ یہ بالکل معمول کی بات ہے، اور اس کا مطلب ہے کہ آپ صحیح راستے پر ہیں! ## اسائنمنٹ [Reading the Docs](assignment.md) -> 💡 **آپ کے اسائنمنٹ کے لیے تھوڑی رہنمائی:** میں واقعی چاہوں گا کہ آپ کچھ ایسے آلات دریافت کریں جو ہم نے ابھی تک کور نہیں کیے! ان ایڈیٹرز، براؤزرز، اور کمانڈ لائن ٹولز کو چھوڑ دیں جن پر ہم بات کر چکے ہیں – وہاں ایک پوری حیرت انگیز دنیا ہے شاندار ڈویلپمنٹ ٹولز کی جو دریافت ہونے کا انتظار کر رہی ہے۔ ایسے ٹولز تلاش کریں جو باقاعدگی سے اپڈیٹ ہوتے ہوں اور جن کی زبردست، مددگار کمیونٹیز ہوں (ایسے ٹولز کے بہترین ٹیوٹوریلز اور سب سے زیادہ معاون لوگ ہوتے ہیں جب آپ کہیں پھنس جائیں اور دوستوں کی مدد چاہتے ہوں)۔ +> 💡 **آپ کے اسائنمنٹ کے لیے ایک چھوٹا اشارہ:** میں واقعی چاہوں گا کہ آپ کچھ ایسے اوزار دریافت کریں جن کا ہم نے ابھی تک ذکر نہیں کیا! ان ایڈیٹرز، براؤزرز، اور کمانڈ لائن ٹولز کو چھوڑ دیں جن پر ہم پہلے بات کر چکے ہیں – وہاں ایک شاندار ترقیاتی اوزاروں کی پوری دنیا ہے جو دریافت ہونے کی منتظر ہے۔ ایسے اوزار تلاش کریں جو فعال طور پر برقرار رکھے جاتے ہوں اور ان کی کمیونٹیز متحرک اور مددگار ہوں (یہ عام طور پر بہترین ٹیوٹوریلز اور سب سے مددگار لوگ رکھتے ہیں جب آپ کبھی پھنس جائیں اور مدد کی ضرورت ہو)۔ --- -## 🚀 آپ کے پروگرامنگ کے سفر کا ٹائم لائن +## 🚀 آپ کے پروگرامنگ سفر کا ٹائم لائن ### ⚡ **اگلے 5 منٹ میں آپ کیا کر سکتے ہیں** -- [ ] 2-3 پروگرامنگ زبانوں کی ویب سائٹس کو نشان زد کریں جو آپ کی توجہ حاصل کریں -- [ ] اگر آپ نے ابھی تک Visual Studio Code نہیں ڈاؤن لوڈ کیا تو اسے ڈاؤن لوڈ کریں -- [ ] اپنے براؤزر کے ڈویلپر ٹولز (F12) کھولیں اور کسی بھی ویب سائٹ پر کلک کریں -- [ ] ایک پروگرامنگ کمیونٹی میں شامل ہوں (Dev.to, Reddit r/webdev, یا Stack Overflow) +- [ ] 2-3 پروگرامنگ زبانوں کی ویب سائٹس کو بُک مارک کریں جنہوں نے آپ کی توجہ حاصل کی +- [ ] اگر آپ نے ابھی تک نہیں کیا تو Visual Studio Code ڈاؤن لوڈ کریں +- [ ] اپنے براؤزر کے DevTools (F12) کھولیں اور کسی بھی ویب سائٹ پر کلک کر کے چیک کریں +- [ ] ایک پروگرامنگ کمیونٹی میں شامل ہوں (Dev.to، Reddit r/webdev، یا Stack Overflow) -### ⏰ **اس گھنٹے میں آپ کیا حاصل کر سکتے ہیں** -- [ ] سبق کے بعد کا کوئز مکمل کریں اور اپنے جوابات پر غور کریں +### ⏰ **اس گھنٹے میں آپ کیا کر سکتے ہیں** +- [ ] پوسٹ-سبق کوئز مکمل کریں اور اپنے جوابات پر غور کریں - [ ] VS Code میں GitHub Copilot ایکسٹینشن سیٹ اپ کریں -- [ ] دو مختلف پروگرامنگ زبانوں میں آن لائن "Hello World" کی مثال آزما کر دیکھیں -- [ ] یوٹیوب پر "Day in the Life of a Developer" ویڈیو دیکھیں -- [ ] پروگرامنگ زبان کی تفتیش کا کام شروع کریں (چیلنج سے) - -### 📅 **آپ کا ہفتہ لمبا ایڈونچر** -- [ ] اسائنمنٹ مکمل کریں اور 3 نئے ڈیولپمنٹ ٹولز دریافت کریں -- [ ] سوشل میڈیا پر 5 ڈویلپرز یا پروگرامنگ اکاؤنٹس کو فالو کریں -- [ ] CodePen یا Replit میں کچھ چھوٹا سا چیز بنانے کی کوشش کریں (یہاں تک کہ "Hello, [آپ کا نام]!" بھی!) -- [ ] کسی ڈویلپر کے کوڈنگ کے سفر کے بارے میں ایک بلاگ پوسٹ پڑھیں -- [ ] ایک ورچوئل میٹ اپ میں شامل ہوں یا کوئی پروگرامنگ ٹاک دیکھیں -- [ ] اپنے منتخب کردہ زبان کو آن لائن ٹیوٹوریلز سے سیکھنا شروع کریں - -### 🗓️ **آپ کا مہینہ لمبا تبدیلی کا دور** -- [ ] اپنا پہلا چھوٹا پروجیکٹ بنائیں (یہاں تک کہ ایک سادہ ویب پیج بھی شمار ہوتا ہے!) -- [ ] کسی اوپن سورس پروجیکٹ میں تعاون کریں (دستاویزات کی مرمت سے شروع کریں) -- [ ] کسی نئے آنے والے کو مینٹر کریں جو اپنی پروگرامنگ کا سفر شروع کر رہا ہو -- [ ] اپنا ڈویلپر پورٹ فولیو ویب سائٹ بنائیں -- [ ] مقامی ڈویلپر کمیونٹیز یا اسٹڈی گروپس سے رابطہ کریں -- [ ] اگلے سیکھنے کے سنگ میل کی منصوبہ بندی شروع کریں - -### 🎯 **آخری جائزہ چیک ان** - -**آگے بڑھنے سے پہلے، ایک لمحہ نکال کر جشن منائیں:** -- پروگرامنگ کے بارے میں آج آپ کو کیا چیز سب سے زیادہ پرجوش کر گئی؟ -- کون سا ٹول یا تصور آپ پہلے دریافت کرنا چاہیں گے؟ -- اس پروگرامنگ سفر کو شروع کرنے کے بارے میں آپ کیسا محسوس کر رہے ہیں؟ -- آپ فی الحال ڈویلپر سے کون سا سوال پوچھنا چاہیں گے؟ +- [ ] 2 مختلف پروگرامنگ زبانوں میں آن لائن "Hello World" مثال آزمانا +- [ ] یوٹیوب پر "ایک ڈیولپر کی زندگی کا دن" کا ویڈیو دیکھیں +- [ ] اپنی پروگرامنگ زبان کی تحقیقات شروع کریں (چیلنج سے) + +### 📅 **آپ کے ہفتے بھر کے مہم** +- [ ] اسائنمنٹ مکمل کریں اور 3 نئے ترقیاتی اوزار دریافت کریں +- [ ] سوشل میڈیا پر 5 ڈیولپرز یا پروگرامنگ اکاؤنٹس فالو کریں +- [ ] CodePen یا Replit میں کچھ چھوٹا سا بنانے کی کوشش کریں (یہاں تک کہ صرف "ہیلو، [آپ کا نام]!" بھی ٹھیک ہے!) +- [ ] کسی ڈیولپر کے بلاگ میں ان کے کوڈنگ سفر کے بارے میں ایک پوسٹ پڑھیں +- [ ] ورچوئل میٹ اپ میں شامل ہوں یا کوئی پروگرامنگ کا ٹاک دیکھیں +- [ ] اپنی منتخب کردہ زبان آن لائن ٹیوٹوریلز کے ذریعے سیکھنا شروع کریں + +### 🗓️ **آپ کا مہینے بھر کا ٹرانسفارمیشن** +- [ ] اپنا پہلا چھوٹا سا پروجیکٹ بنائیں (ایک سادہ ویب پیج بھی شمار ہوگا!) +- [ ] اوپن سورس پروجیکٹ میں حصہ ڈالیں (دستاویزات کی اصلاحات سے شروع کریں) +- [ ] کسی نئے پروگرامر کو رہنمائی کریں جو ابھی اپنا پروگرامنگ سفر شروع کر رہا ہو +- [ ] اپنا ڈیولپر پورٹ فولیو ویب سائٹ بنائیں +- [ ] مقامی ڈیولپر کمیونٹیز یا اسٹڈی گروپس سے رابطہ کریں +- [ ] اپنی اگلی سیکھنے کی منزل کا منصوبہ بنانا شروع کریں + +### 🎯 **آخری عکاسی اور چیک ان** + +**آگے بڑھنے سے پہلے، جشن منائیں:** +- پروگرامنگ کے بارے میں آج آپ کو کون سی بات سب سے زیادہ پرجوش کر گئی؟ +- کون سا ٹول یا تصور آپ سب سے پہلے دریافت کرنا چاہتے ہیں؟ +- آپ اس پروگرامنگ سفر کا آغاز کرنے کے بارے میں کیسا محسوس کر رہے ہیں؟ +- آپ ابھی کسی ڈیولپر سے کون سا سوال پوچھنا چاہتے ہیں؟ ```mermaid journey - title آپ کا اعتماد بڑھانے کا سفر + title آپ کے اعتماد سازی کا سفر section آج - متجسس: 3: You - مغلوب: 4: You - پرجوش: 5: You + Curious: 3: آپ + Overwhelmed: 4: آپ + Excited: 5: آپ section اس ہفتے - تلاش کر رہے ہیں: 4: You - سیکھ رہے ہیں: 5: You - رابطہ قائم کرنا: 4: You - section اگلا مہینہ - تعمیر کر رہے ہیں: 5: You - پراعتماد: 5: You - دوسروں کی مدد کر رہے ہیں: 5: You + Exploring: 4: آپ + Learning: 5: آپ + Connecting: 4: آپ + section اگلے مہینے + Building: 5: آپ + Confident: 5: آپ + Helping Others: 5: آپ ``` -> 🌟 **یاد رکھیں:** ہر ماہر کبھی نیا سیکھنے والا تھا۔ ہر سینئر ڈویلپر نے بھی بالکل ویسا ہی محسوس کیا ہے جیسا آپ اب محسوس کر رہے ہیں – پرجوش، شاید تھوڑا سا مغلوب، اور حقیقتاً یہ جاننے کے لیے بے چین کہ کیا ممکن ہے۔ آپ شاندار ساتھیوں کے درمیان ہیں، اور یہ سفر ناقابل یقین ہوگا۔ پروگرامنگ کی شاندار دنیا میں خوش آمدید! 🎉 +> 🌟 **یاد رکھیں:** ہر ماہر کبھی مبتدی ہوتا ہے۔ ہر سینئر ڈیولپر کبھی آپ کی طرح محسوس کرتا تھا – پُرجوش، شاید تھوڑا گھبرایا ہوا، اور یقیناً یہ جاننے کے لیے متجسس کہ ممکن کیا ہے۔ آپ بہترین کمپنی میں ہیں، اور یہ سفر ناقابل یقین ہوگا۔ پروگرامنگ کی شاندار دنیا میں خوش آمدید! 🎉 --- -**اخطار**: -یہ دستاویز 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/ur/AGENTS.md b/translations/ur/AGENTS.md index 83dca474c..856cdb853 100644 --- a/translations/ur/AGENTS.md +++ b/translations/ur/AGENTS.md @@ -2,29 +2,29 @@ ## پروجیکٹ کا جائزہ -یہ ویب ڈویلپمنٹ کے بنیادی اصولوں کو ابتدائی افراد کو سکھانے کے لیے ایک تعلیمی نصاب کا ذخیرہ ہے۔ نصاب مائیکروسافٹ کلاؤڈ ایڈووکیٹس کی طرف سے تیار کردہ 12 ہفتوں پر محیط جامع کورس ہے، جس میں 24 عملی سبق شامل ہیں جو جاوا اسکرپٹ، CSS اور HTML کو کور کرتے ہیں۔ +یہ ابتدائیوں کو ویب ڈویلپمنٹ کے بنیادی اصول سکھانے کے لیے ایک تعلیمی نصاب کا مخزن ہے۔ نصاب 12 ہفتوں پر محیط ایک جامع کورس ہے جو Microsoft Cloud Advocates نے تیار کیا ہے، جس میں جاوا اسکرپٹ، CSS، اور HTML پر مشتمل 24 عملی اسباق شامل ہیں۔ -### اہم اجزاء +### کلیدی اجزاء -- **تعلیمی مواد**: 24 منظم سبق جو پروجیکٹ پر مبنی ماڈیولز میں ترتیب دیے گئے ہیں -- **عملی پروجیکٹس**: ٹیریریم، ٹائپنگ گیم، براؤزر ایکسٹینشن، اسپیس گیم، بینکنگ ایپ، کوڈ ایڈیٹر، اور AI چیٹ اسسٹنٹ -- **انٹرایکٹو کوئزز**: 48 کوئزز، ہر ایک میں 3 سوالات (سبق سے پہلے/بعد کی جانچ) -- **کثیر اللسانی حمایت**: GitHub Actions کے ذریعے 50+ زبانوں میں خودکار تراجم -- **ٹیکنالوجیز**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI پروجیکٹس کے لیے) +- **تعلیمی مواد**: 24 منظم اسباق جو پراجیکٹ پر مبنی ماڈیولز میں منظم ہیں +- **عملی پراجیکٹس**: ٹیریریم، ٹائپنگ گیم، براؤزر ایکسٹینشن، اسپیس گیم، بینکنگ ایپ، کوڈ ایڈیٹر، اور AI چیٹ اسسٹنٹ +- **انٹرایکٹو کوئزز**: 48 کوئزز جن میں ہر ایک میں 3 سوالات ہوتے ہیں (سبق سے پہلے/بعد کی تشخیص) +- **کثیراللسانی معاونت**: GitHub Actions کے ذریعے 50+ زبانوں میں خودکار ترجمے +- **ٹیکنالوجیز**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI پراجیکٹس کے لیے) ### فن تعمیر -- سبق پر مبنی تعلیمی ذخیرہ -- ہر سبق کے فولڈر میں README، کوڈ کے مثالیں، اور حل شامل ہیں -- علیحدہ ڈائریکٹریز میں آزاد پروجیکٹس (quiz-app، مختلف سبق کے پروجیکٹس) -- GitHub Actions (co-op-translator) کے ذریعے ترجمہ نظام -- دستاویزات Docsify کے ذریعے فراہم اور پی ڈی ایف میں دستیاب +- سبق پر مبنی تعلیمی مخزن +- ہر سبق فولڈر میں README، کوڈ مثالیں، اور حل شامل ہوتے ہیں +- علیحدہ ڈائریکٹریز میں آزاد پراجیکٹس (quiz-app، مختلف سبق پراجیکٹس) +- GitHub Actions کا استعمال کرتے ہوئے ترجمہ نظام (co-op-translator) +- Docsify کے ذریعے دستاویزات فراہم کی جاتی ہیں اور PDF میں دستیاب ہیں ## سیٹ اپ کمانڈز -یہ ذخیرہ بنیادی طور پر تعلیمی مواد کے استعمال کے لیے ہے۔ مخصوص پروجیکٹس پر کام کرنے کے لیے: +یہ مخزن بنیادی طور پر تعلیمی مواد کے استعمال کے لیے ہے۔ مخصوص پراجیکٹس کے ساتھ کام کرنے کے لیے: -### مرکزی ذخیرہ سیٹ اپ +### مرکزی مخزن سیٹ اپ ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git @@ -37,246 +37,246 @@ cd Web-Dev-For-Beginners cd quiz-app npm install npm run dev # سرور کی ترقی شروع کریں -npm run build # پیداواری کے لیے تعمیر کریں +npm run build # پیداوار کے لیے تیار کریں npm run lint # ESLint چلائیں ``` -### بینک پروجیکٹ API (Node.js + Express) +### بینک پراجیکٹ API (Node.js + Express) ```bash cd 7-bank-project/api npm install -npm start # اے پی آئی سرور شروع کریں +npm start # API سرور شروع کریں npm run lint # ESLint چلائیں -npm run format # Prettier کے ساتھ فارمیٹ کریں +npm run format # Prettier کے ساتھ شکل دیں ``` -### براؤزر ایکسٹینشن پروجیکٹس +### براؤزر ایکسٹینشن پراجیکٹس ```bash cd 5-browser-extension/solution npm install -# براوزر مخصوص ایکسٹینشن لوڈ کرنے کی ہدایات پر عمل کریں +# مخصوص براؤزر کی توسیع لوڈ کرنے کی ہدایات پر عمل کریں ``` -### اسپیس گیم پروجیکٹس +### اسپیس گیم پراجیکٹس ```bash cd 6-space-game/solution npm install -# index.html کو براؤزر میں کھولیں یا Live Server استعمال کریں +# براوزر میں index.html کھولیں یا Live Server استعمال کریں ``` -### چیٹ پروجیکٹ (Python Backend) +### چیٹ پراجیکٹ (Python بیک اینڈ) ```bash cd 9-chat-project/solution/backend/python pip install openai -# GITHUB_TOKEN ماحول کی متغیر سیٹ کریں +# GITHUB_TOKEN ماحولیاتی متغیر مقرر کریں python api.py ``` ## ترقیاتی ورک فلو -### مواد کے تعاون کاروں کے لیے +### مواد کے شراکت داروں کے لیے -1. **ذخیرہ اپنے GitHub اکاؤنٹ پر فورک کریں** -2. **اپنے فورک کو مقامی کلون کریں** -3. **اپنے تبدیلیوں کے لیے نیا برانچ بنائیں** -4. سبق کے مواد یا کوڈ مثالوں میں تبدیلی کریں -5. متعلقہ پروجیکٹ ڈائریکٹریز میں کوڈ میں تبدیلیوں کو ٹیسٹ کریں -6. تعاون کی ہدایات کے مطابق پل ریکوئسٹس بھیجیں +1. اپنا GitHub اکاؤنٹ میں مخزن کو **فورک کریں** +2. اپنے فورک کو لوکل **کلون کریں** +3. اپنی تبدیلیوں کے لیے **نئی برانچ بنائیں** +4. سبق کے مواد یا کوڈ مثالوں میں تبدیلی کریں +5. متعلقہ پراجیکٹ ڈائریکٹریز میں کوڈ کی تبدیلیاں ٹیسٹ کریں +6. شراکت کے رہنما خطوط کے مطابق پل ریکویسٹ جمع کروائیں -### طلباء کے لیے +### سیکھنے والوں کے لیے -1. ذخیرہ فورک یا کلون کریں -2. سبق کی ڈائریکٹریز کو ترتیب سے دیکھیں -3. ہر سبق کے README فائلز پڑھیں -4. سبق سے پہلے کوئزز مکمل کریں https://ff-quizzes.netlify.app/web/ -5. سبق کے فولڈرز میں کوڈ مثالوں پر کام کریں -6. اسائنمنٹس اور چیلنجز مکمل کریں -7. سبق کے بعد کوئزز لیں +1. مخزن کو فورک یا کلون کریں +2. مرحلہ وار سبق کی ڈائریکٹریز پر جائیں +3. ہر سبق کے README فائلز پڑھیں +4. سبق سے پہلے کی کوئزز مکمل کریں https://ff-quizzes.netlify.app/web/ +5. سبق کی فولڈرز میں کوڈ کی مثالوں پر کام کریں +6. اسائنمنٹس اور چیلنجز مکمل کریں +7. سبق کے بعد کی کوئزز دیں -### لائیو ترقی +### لائیو ڈیولپمنٹ -- **دستاویزات**: روٹ میں `docsify serve` چلائیں (پورٹ 3000) -- **کوئز ایپ**: `quiz-app` ڈائریکٹری میں `npm run dev` چلائیں -- **پروجیکٹس**: HTML پروجیکٹس کے لیے VS Code Live Server ایکسٹینشن استعمال کریں -- **API پروجیکٹس**: متعلقہ API ڈائریکٹریز میں `npm start` چلائیں +- **دستاویزات**: روٹ میں `docsify serve` چلائیں (پورٹ 3000) +- **کوئز ایپ**: quiz-app ڈائریکٹری میں `npm run dev` چلائیں +- **پراجیکٹس**: HTML پراجیکٹس کے لیے VS Code Live Server ایکسٹینشن استعمال کریں +- **API پراجیکٹس**: متعلقہ API ڈائریکٹریز میں `npm start` چلائیں -## جانچ کے ہدایات +## ٹیسٹنگ کی ہدایات -### کوئز ایپ جانچ +### کوئز ایپ ٹیسٹنگ ```bash cd quiz-app npm run lint # کوڈ اسٹائل کے مسائل کی جانچ کریں -npm run build # یقین دہانی کریں کہ تعمیری عمل کامیاب ہو گیا ہے +npm run build # تصدیق کریں کہ بلڈ کامیاب ہو گیا ہے ``` -### بینک API جانچ +### بینک API ٹیسٹنگ ```bash cd 7-bank-project/api -npm run lint # کوڈ کے طرز کے مسائل کی جانچ کریں +npm run lint # کوڈ کے انداز کے مسائل چیک کریں node server.js # تصدیق کریں کہ سرور بغیر کسی خرابی کے شروع ہوتا ہے ``` -### عمومی جانچ کا طریقہ کار +### عمومی ٹیسٹنگ طریقہ کار -- یہ تعلیمی ذخیرہ جامع خودکار ٹیسٹوں کے بغیر ہے -- دستی جانچ پر توجہ مرکوز ہے: - - کوڈ مثالیں بغیر غلطی کے چلیں - - دستاویزات میں لنکس درست کام کریں - - پروجیکٹ بنڈلز کامیابی سے مکمل ہوں - - مثالیں بہترین عملی طریقے اپنائیں +- یہ ایک تعلیمی مخزن ہے جس میں جامع خودکار ٹیسٹ شامل نہیں +- دستی ٹیسٹنگ پر توجہ مرکوز ہے: + - کوڈ مثالیں بغیر غلطی کے چلتی ہیں + - دستاویزات میں لنکس درست کام کرتے ہیں + - پراجیکٹ بلڈ کامیابی سے مکمل ہوتے ہیں + - مثالیں بہترین طریقے کار کی پیروی کرتی ہیں -### جمع کروانے سے پہلے چیک +### پیشگی چیک -- package.json والی ڈائریکٹریز میں `npm run lint` چلائیں -- مارک ڈاؤن لنکس کی درستگی یقینی بنائیں -- کوڈ مثالوں کو براؤزر یا Node.js میں ٹیسٹ کریں -- تصدیق کریں کہ تراجم صحیح ساخت برقرار رکھیں +- package.json والے فولڈرز میں `npm run lint` چلائیں +- مارک ڈاؤن لنکس کی درستگی کی تصدیق کریں +- کوڈ مثالوں کو براؤزر یا Node.js میں ٹیسٹ کریں +- یقینی بنائیں کہ تراجم ڈھانچے کو صحیح طریقے سے برقرار رکھتے ہیں -## کوڈ اسٹائل گائیڈ لائنز +## کوڈ اسٹائل کے رہنما اصول ### جاوا اسکرپٹ -- جدید ES6+ نحو استعمال کریں -- پروجیکٹس میں فراہم کردہ معیاری ESLint کنفیگریشن پر عمل کریں -- تعلیمی وضاحت کے لیے بامعنی متغیر اور فنکشن کے نام استعمال کریں -- سیکھنے والوں کے لیے تصورات کی وضاحت کے لیے تبصرے شامل کریں -- جہاں کنفیگر ہو وہاں Prettier سے فارمیٹ کریں +- جدید ES6+ نحو استعمال کریں +- پراجیکٹس میں مہیا کردہ معیاری ESLint کنفیگریشن پر عمل کریں +- تعلیمی وضاحت کے لیے معنی خیز متغیر اور فنکشن نام استعمال کریں +- سیکھنے والوں کے لیے تصورات کی وضاحت کے لیے تبصرے شامل کریں +- جہاں کنفیگر کیا گیا ہو Prettier سے فارمیٹ کریں ### HTML/CSS -- معنوی HTML5 عناصر استعمال کریں -- ریسپانسیو ڈیزائن کے اصول -- واضح کلاس ناموں کے قواعد -- CSS تکنیک کی وضاحت کے لیے تبصرے +- معنوی HTML5 اجزاء +- ریسپانسیو ڈیزائن کے اصول +- واضح کلاس نامی کنونشنز +- سیکھنے والوں کے لیے CSS تکنیک کی وضاحت کے تبصرے -### پائتھان +### پائتھون -- PEP 8 اسٹائل گائیڈ لائنز -- واضح، تعلیمی کوڈ مثالیں -- جہاں مفید ہو، ٹائپ ہنٹس +- PEP 8 اسٹائل گائیڈ لائنز +- واضح، تعلیمی کوڈ مثالیں +- سیکھنے کے لیے جہاں مفید ہو ٹائپ ہنٹس ### مارک ڈاؤن دستاویزات -- واضح ہیڈنگ ہائیرارکی -- زبان کی وضاحت کے ساتھ کوڈ بلاکس -- اضافی وسائط کے لنکس -- `images/` فولڈرز میں اسکرین شاٹس اور تصاویر -- رسائی کے لیے تصاویر کا alt متن +- واضح ہیڈنگ ہائیرارکی +- زبان کی وضاحت کے ساتھ کوڈ بلاکس +- اضافی وسائل کے لنکس +- `images/` ڈائریکٹریز میں اسکرین شاٹس اور تصاویر +- معذوری کے لیے تصاویر کے لیے Alt متن ### فائل تنظیم -- سبق نمبر وار ترتیب دیے گئے (1-getting-started-lessons, 2-js-basics, وغیرہ) -- ہر پروجیکٹ میں `solution/` اور اکثر `start/` یا `your-work/` ڈائریکٹریز -- تصاویر سبق مخصوص `images/` فولڈرز میں محفوظ -- تراجم `translations/{language-code}/` ساخت میں +- اسباق متسلسل نمبرات کے ساتھ (1-getting-started-lessons, 2-js-basics, وغیرہ) +- ہر پراجیکٹ کے پاس `solution/` اور اکثر `start/` یا `your-work/` ڈائریکٹریز +- اسباق کے مخصوص `images/` فولڈرز میں تصویریں محفوظ +- تراجم `translations/{language-code}/` ساخت میں -## بلڈ اور تعیناتی +## بلڈ اور ڈیپلائمنٹ -### کوئز ایپ تعیناتی (Azure Static Web Apps) +### کوئز ایپ ڈیپلائمنٹ (Azure Static Web Apps) -کوئز ایپ کو Azure Static Web Apps تعیناتی کے لیے ترتیب دیا گیا ہے: +کوئز ایپ Azure Static Web Apps پر ڈیپلائمنٹ کے لیے ترتیب دی گئی ہے: ```bash cd quiz-app npm run build # فولڈر dist/ بناتا ہے -# مرکزی شاخ پر push کرنے پر GitHub Actions ورک فلو کے ذریعے تعینات کرتا ہے +# مین پر پش کرنے پر GitHub Actions ورک فلو کے ذریعے تعینات کرتا ہے ``` -Azure Static Web Apps کنفیگریشن: -- **ایپ کا مقام**: `/quiz-app` -- **آؤٹ پٹ لوکیشن**: `dist` -- **ورک فلو**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +Azure Static Web Apps کنفیگریشن: +- **اپلیکیشن مقام**: `/quiz-app` +- **آؤٹ پٹ مقام**: `dist` +- **ورک فلو**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### دستاویزات PDF جنریشن ```bash npm install # docsify-to-pdf انسٹال کریں -npm run convert # دستاویزات سے PDF بنائیں +npm run convert # docs سے PDF بنائیں ``` ### Docsify دستاویزات ```bash -npm install -g docsify-cli # ڈاکسفائی کو عالمی سطح پر انسٹال کریں -docsify serve # لوکل ہوسٹ پر 3000 پورٹ پر سروس فراہم کریں +npm install -g docsify-cli # ڈاکسفائی کو عالمی طور پر انسٹال کریں +docsify serve # لوکل ہوسٹ:3000 پر سروس دیں ``` -### پروجیکٹ مخصوص بلڈز +### پراجیکٹ مخصوص بلڈز -ہر پروجیکٹ ڈائریکٹری کا اپنا بلڈ عمل ہو سکتا ہے: -- Vue پروجیکٹس: `npm run build` پروڈکشن بنڈل بناتا ہے -- سٹیٹک پروجیکٹس: کوئی بلڈ مرحلہ نہیں، فائلز براہ راست سرونگ +ہر پراجیکٹ ڈائریکٹری کا اپنا بلڈ عمل ہو سکتا ہے: +- Vue پراجیکٹس: `npm run build` سے پروڈکشن بنڈلز بنتے ہیں +- Static پراجیکٹس: کوئی بلڈ مرحلہ نہیں، فائلیں براہ راست سرف کی جاتی ہیں -## پل ریکوئسٹ گائیڈ لائنز +## پل ریکویسٹ رہنما خطوط ### عنوان کی شکل -واضح، وضاحتی عنوان استعمال کریں جو تبدیلی کے شعبے کو ظاہر کریں: -- `[Quiz-app] سبق X کے لیے نیا کوئز شامل کریں` -- `[Lesson-3] ٹیریریم پروجیکٹ میں ٹائپو درست کریں` -- `[Translation] سبق 5 کے لیے ہسپانوی ترجمہ شامل کریں` -- `[Docs] سیٹ اپ ہدایات اپ ڈیٹ کریں` +صاف، وضاحتی عنوانات استعمال کریں جو تبدیلی کے علاقے کی نشاندہی کرتے ہوں: +- `[Quiz-app] سبق X کے لیے نیا کوئز شامل کریں` +- `[Lesson-3] ٹیریریم پراجیکٹ میں ٹائپو کی اصلاح کریں` +- `[Translation] سبق 5 کے لیے ہسپانوی ترجمہ شامل کریں` +- `[Docs] سیٹ اپ ہدایات اپ ڈیٹ کریں` -### ضروری چیکس +### درکار چیک PR جمع کروانے سے پہلے: -1. **کوڈ کوالٹی**: - - متعلقہ پروجیکٹ ڈائریکٹریز میں `npm run lint` چلائیں - - تمام لِنٹنگ غلطیاں اور وارننگز حل کریں +1. **کوڈ معیار**: + - متاثرہ پراجیکٹ ڈائریکٹریز میں `npm run lint` چلائیں + - تمام lint غلطیاں اور وارننگز درست کریں -2. **بلڈ تصدیق**: - - جہاں قابل اطلاق ہو `npm run build` چلائیں - - یقینی بنائیں کہ کوئی بلڈ غلطی نہ ہو +2. **بلڈ توثیق**: + - اگر قابل اطلاق ہو تو `npm run build` چلائیں + - یقینی بنائیں کہ کوئی بلڈ غلطی نہ ہو -3. **لنک ویلیڈیشن**: - - تمام مارک ڈاؤن لنکس ٹیسٹ کریں - - تصویر کے ریفرنس کام کریں +3. **لنک ویریفیکیشن**: + - تمام مارک ڈاؤن لنکس کی جانچ کریں + - امیج حوالہ جات کی تصدیق کریں -4. **مواد کا جائزہ**: - - املا اور گرامر کی پروف ریڈنگ کریں - - کوڈ مثالیں درست اور تعلیمی ہوں - - تراجم اصل معنی برقرار رکھیں +4. **مواد کا جائزہ**: + - املا اور گرامر کی جانچ کریں + - کوڈ مثالیں درست اور تعلیمی ہوں + - ترجمے اصل معنی برقرار رکھیں ### تعاون کی ضروریات -- Microsoft CLA سے اتفاق کریں (پہلے PR پر خودکار چیک) -- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) پر عمل کریں -- تفصیلی ہدایات کے لیے [CONTRIBUTING.md](./CONTRIBUTING.md) دیکھیں -- PR تفصیل میں اگر قابل اطلاق ہو تو مسئلہ نمبر شامل کریں +- Microsoft CLA سے اتفاق کریں (پہلے PR پر خودکار چیک) +- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) کی پیروی کریں +- تفصیلی رہنما خطوط کے لیے [CONTRIBUTING.md](./CONTRIBUTING.md) دیکھیں +- اگر قابل اطلاق ہو تو PR کی وضاحت میں مسئلے کے نمبر حوالہ کریں -### جائزہ کا عمل +### جائزہ لینے کا عمل -- PRs کی ملاحظہ کاری مینٹینرز اور کمیونٹی کرتے ہیں -- تعلیمی وضاحت کو ترجیح دی جاتی ہے -- کوڈ مثالیں موجودہ بہترین طریقوں کی پیروی کریں -- تراجم درستگی اور ثقافتی مناسبت کے لیے جائزہ لیے جاتے ہیں +- PRs کا جائزہ مینٹیینرز اور کمیونٹی کرتے ہیں +- تعلیمی وضاحت کو ترجیح دی جاتی ہے +- کوڈ مثالیں موجودہ بہترین طریقوں کی پیروی کریں +- تراجم کی درستگی اور ثقافتی مطابقت کی جانچ کی جاتی ہے -## ترجمہ نظام +## ترجمہ کا نظام ### خودکار ترجمہ -- GitHub Actions کے ساتھ co-op-translator ورک فلو استعمال کرتا ہے -- 50+ زبانوں میں خودکار ترجمہ کرتا ہے -- بنیادی ڈائریکٹریز میں ماخذ فائلیں -- ترجمہ شدہ فائلیں `translations/{language-code}/` ڈائریکٹریز میں +- GitHub Actions کے ساتھ co-op-translator ورک فلو استعمال کرتا ہے +- 50+ زبانوں میں خودکار ترجمہ کرتا ہے +- ماخذ فائلیں مرکزی ڈائریکٹریز میں +- ترجمہ شدہ فائلیں `translations/{language-code}/` ڈائریکٹریز میں -### دستی ترجمے کی بہتری شامل کرنا +### دستی ترجمہ کی بہتری شامل کرنا -1. `translations/{language-code}/` میں فائل تلاش کریں -2. ساخت کو برقرار رکھتے ہوئے بہتریاں کریں -3. کوڈ مثالیں کام کرتی رہیں -4. کسی بھی مقامی کوئز مواد کو ٹیسٹ کریں +1. `translations/{language-code}/` میں فائل تلاش کریں +2. ڈھانچہ برقرار رکھتے ہوئے بہتری کریں +3. یقینی بنائیں کہ کوڈ مثالیں کام کر رہی ہوں +4. کسی مقامی کوئز مواد کی جانچ کریں ### ترجمہ میٹا ڈیٹا -ترجمہ شدہ فائلیں میٹا ڈیٹا ہیڈر شامل کرتی ہیں: +ترجمہ شدہ فائلوں میں میٹا ڈیٹا ہیڈر شامل ہوتا ہے: ```markdown ``` -## ڈیبگنگ اور مسئلے حل کرنا +## خرابیوں کا سراغ لگانا اور مسائل حل کرنا ### عام مسائل -**کوئز ایپ شروع نہیں ہوتی**: -- Node.js ورژن چیک کریں (v14+ کی سفارش) -- `node_modules` اور `package-lock.json` حذف کریں، پھر `npm install` چلائیں -- پورٹ تنازعہ چیک کریں (ڈیفالٹ: Vite پورٹ 5173 استعمال کرتا ہے) +**کوئز ایپ شروع نہیں ہوتی**: +- Node.js کا ورژن چیک کریں (v14+ تجویز کردہ) +- `node_modules` اور `package-lock.json` کو حذف کریں، دوبارہ `npm install` چلائیں +- پورٹ تنازعات کی جانچ کریں (ڈیفالٹ: Vite پورٹ 5173 استعمال کرتا ہے) -**API سرور شروع نہیں ہوتا**: -- Node.js ورژن کم از کم (node >=10) یقینی بنائیں -- دیکھیں کہ پورٹ استعمال میں تو نہیں -- تمام dependencies `npm install` سے انسٹال ہوں +**API سرور شروع نہیں ہوتا**: +- Node.js ورژن کم از کم node >=10 ہونا چاہیے +- چیک کریں کہ پورٹ استعمال میں نہ ہو +- تمام انحصارات `npm install` سے انسٹال ہوں -**براؤزر ایکسٹینشن لوڈ نہیں ہوتی**: -- manifest.json کی درست فارمیٹنگ چیک کریں -- براؤزر کنسول میں غلطیاں دیکھیں -- براؤزر مخصوص ایکسٹینشن انسٹالیشن ہدایات پر عمل کریں +**براؤزر ایکسٹینشن نہیں چلتی**: +- manifest.json کی درست فارمیٹنگ چیک کریں +- براؤزر کنسول میں غلطیاں دیکھیں +- براؤزر مخصوص ایکسٹینشن انسٹالیشن ہدایات پر عمل کریں -**Python چیٹ پروجیکٹ مسائل**: -- OpenAI پیکج انسٹال کریں: `pip install openai` -- GITHUB_TOKEN ماحول متغیر سیٹ ہے -- GitHub Models رسائی کی اجازتیں چیک کریں +**Python چیٹ پراجیکٹ کے مسائل**: +- OpenAI پیکج انسٹال کریں: `pip install openai` +- GITHUB_TOKEN ماحول کی ویریبل سیٹ ہے +- GitHub Models تک رسائی کے اجازت نامے چیک کریں -**Docsify دستاویزات سرونگ نہیں کرتا**: -- docsify-cli عالمی انسٹال کریں: `npm install -g docsify-cli` -- ذخیرہ کی روٹ ڈائریکٹری سے چلائیں -- چیک کریں کہ `docs/_sidebar.md` موجود ہے +**Docsify دستاویزات سرور نہیں کر رہا**: +- docsify-cli گلوبلی انسٹال کریں: `npm install -g docsify-cli` +- مخزن کی روٹ ڈائریکٹری سے چلائیں +- چیک کریں کہ `docs/_sidebar.md` موجود ہو -### ترقیاتی ماحول کے مشورے +### ترقیاتی ماحول کے ٹپس -- HTML پروجیکٹس کے لیے VS Code لائیو سرور ایکسٹینشن استعمال کریں -- مستقل فارمیٹنگ کے لیے ESLint اور Prettier ایکسٹینشن انسٹال کریں -- JavaScript ڈیبگنگ کے لیے براؤزر ڈویلپر ٹولز استعمال کریں -- Vue پروجیکٹس کے لیے Vue DevTools براؤزر ایکسٹینشن انسٹال کریں +- HTML پراجیکٹس کے لیے VS Code میں Live Server ایکسٹینشن استعمال کریں +- ESLint اور Prettier ایکسٹینشن انسٹال کریں تاکہ فارمیٹنگ یکساں رہے +- جاوا اسکرپٹ کی خرابیوں کے لیے براؤزر DevTools استعمال کریں +- Vue پراجیکٹس کے لیے Vue DevTools براؤزر ایکسٹینشن انسٹال کریں -### کارکردگی کے پہلو +### کارکردگی کے امور -- بڑی تعداد میں ترجمہ شدہ فائلیں (50+ زبانیں) مکمل کلونز کو بڑا بناتی ہیں -- صرف مواد پر کام کرتے وقت shallow clone استعمال کریں: `git clone --depth 1` -- انگریزی مواد پر کام کرتے ہوئے تراجم کو تلاش سے خارج کریں -- بلڈ عمل پہلے رن پر سست ہو سکتا ہے (npm install, Vite build) +- ترجمہ شدہ فائلوں کی بڑی تعداد (50+ زبانیں) کلوننگ کو بڑا بناتی ہے +- صرف مواد پر کام کے لیے shallow clone استعمال کریں: `git clone --depth 1` +- انگریزی مواد پر کام کے دوران ترجمہ شدہ فائلوں کو تلاش سے خارج کریں +- بلڈ عمل پہلے چلاوے پر سست ہو سکتا ہے (npm install، Vite build) -## سیکیورٹی کے پہلو +## سیکیورٹی کے امور -### ماحول متغیرات +### ماحول کی ویریبلز -- API کیز کبھی بھی ریپوزٹری میں کمیٹ نہ کریں -- `.env` فائلز استعمال کریں (جو پہلے سے `.gitignore` میں ہیں) -- پروجیکٹ کے READMEs میں ضروری ماحول متغیرات دستاویز کریں +- API کیز کبھی بھی مخزن میں جمع نہ کریں +- `.env` فائلز کا استعمال کریں (جو پہلے ہی `.gitignore` میں ہیں) +- درکار ماحول کی ویریبلز پراجیکٹ READMEs میں دستاویزی کریں -### پائتھان پروجیکٹس +### پائتھون پراجیکٹس -- ورچوئل ماحول استعمال کریں: `python -m venv venv` -- dependencies کو اپ ڈیٹ رکھیں -- GitHub ٹوکنز میں کم از کم ضروری اجازتیں ہوں +- ورچوئل ماحول استعمال کریں: `python -m venv venv` +- انحصارات کو بروقت اپڈیٹ رکھیں +- GitHub ٹوکنز کو کم از کم ضروری اجازتیں دینی چاہئیں ### GitHub Models تک رسائی -- GitHub Models کے لیے پرسنل ایکسس ٹوکنز (PAT) ضروری -- ٹوکنز ماحول متغیرات کے طور پر محفوظ -- ٹوکنز یا کریڈینشلز کبھی بھی کمیٹ نہ کریں +- GitHub Models کے لیے Personal Access Tokens (PAT) ضروری ہیں +- ٹوکنز کو ماحول کی ویریبلز کے طور پر محفوظ کریں +- ٹوکنز یا اسناد کو کبھی بھی کمیٹ نہ کریں ## اضافی نوٹس ### ہدف سامعین -- ویب ڈویلپمنٹ کے کل جب beginner -- طلباء اور خود سیکھنے والے -- اساتذہ جو نصاب کلاس روم میں استعمال کرتے ہیں -- مواد رسائی کے لیے ڈیزائن کیا گیا ہے اور ہنر کی تدریجی ترقی +- ویب ڈویلپمنٹ کے مکمل نو آموز +- طلباء اور خود سیکھنے والے +- اساتذہ جو نصاب کو کلاس رومز میں استعمال کرتے ہیں +- مواد قابل رسائی اور بتدریج مہارت سازی کے لیے ڈیزائن کیا گیا ہے ### تعلیمی فلسفہ -- پروجیکٹ پر مبنی سیکھنے کا طریقہ -- کثرت سے علم کی جانچ (کوئزز) -- عملی کوڈنگ مشقیں -- حقیقی دنیا کی تطبیقی مثالیں -- فریم ورکس سے پہلے بنیادی اصولوں پر توجہ +- پراجیکٹ پر مبنی سیکھنے کا طریقہ +- بار بار علم کی جانچ (کوئزز) +- عملی کوڈنگ مشقیں +- حقیقی دنیا کی ایپلیکیشن کی مثالیں +- فریم ورکس سے پہلے بنیادی اصولوں پر توجہ -### ذخیرہ کی دیکھ بھال +### مخزن کی دیکھ بھال -- سرگرم سیکھنے والوں اور تعاون کاروں کی کمیونٹی -- dependencies اور مواد کی باقاعدہ اپ ڈیٹ -- مینٹینرز کی طرف سے اشوز اور مباحثے کی نگرانی -- GitHub Actions کے ذریعے ترجمہ اپ ڈیٹس خودکار +- سیکھنے والوں اور تعاون کنندگان کی فعال کمیونٹی +- انحصارات اور مواد کی باقاعدہ اپ ڈیٹس +- مسائل اور مباحثے مینٹیینرز کی نگرانی میں +- ترجمہ کی اپ ڈیٹس GitHub Actions کے ذریعے خودکار ### متعلقہ وسائل -- [Microsoft Learn modules](https://docs.microsoft.com/learn/) -- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/) -- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) سیکھنے والوں کے لیے تجویز کردہ -- اضافی کورسز: جنریٹیو AI، ڈیٹا سائنس، ML، IoT نصاب دستیاب +- [Microsoft Learn modules](https://docs.microsoft.com/learn/) +- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/) +- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) سیکھنے والوں کے لیے تجویز کردہ +- اضافی کورسز: جنریٹو AI، ڈیٹا سائنس، ML، IoT نصاب دستیاب ہیں -### مخصوص پروجیکٹس کے ساتھ کام کرنا +### مخصوص پراجیکٹس کے ساتھ کام -انفرادی پروجیکٹس کے لیے تفصیلی ہدایات کے لیے README فائلز دیکھیں: -- `quiz-app/README.md` - Vue 3 کوئز ایپلیکیشن -- `7-bank-project/README.md` - بینکنگ ایپلیکیشن مع تصدیق -- `5-browser-extension/README.md` - براؤزر ایکسٹینشن کی ترقی -- `6-space-game/README.md` - کینوس پر مبنی گیم ڈویلپمنٹ -- `9-chat-project/README.md` - AI چیٹ اسسٹنٹ پروجیکٹ +انفرادی پراجیکٹس کی تفصیلی ہدایات کے لیے، درج ذیل README فائلوں کا حوالہ دیں: +- `quiz-app/README.md` - Vue 3 کوئز ایپلیکیشن +- `7-bank-project/README.md` - تصدیق کے ساتھ بینکنگ ایپلیکیشن +- `5-browser-extension/README.md` - براؤزر ایکسٹینشن ڈیولپمنٹ +- `6-space-game/README.md` - کینوس پر مبنی گیم ڈیولپمنٹ +- `9-chat-project/README.md` - AI چیٹ اسسٹنٹ پراجیکٹ -### مونو ریپو کا ڈھانچہ +### مونو رپو ساخت -اگرچہ روایتی مونو ریپو نہیں ہے، یہ ذخیرہ کئی آزاد پروجیکٹس پر مشتمل ہے: -- ہر سبق خود مختار ہے -- پروجیکٹس مشترکہ dependencies نہیں رکھتے -- انفرادی پروجیکٹس پر بغیر دوسرے متاثر کیے کام کریں -- مکمل نصاب کے تجربے کے لیے پورا ریپو کلون کریں +اگرچہ یہ روایتی مونو رپو نہیں ہے، یہ مخزن متعدد آزاد پراجیکٹس پر مشتمل ہے: +- ہر سبق خود مختار ہے +- پراجیکٹس انحصارات شیئر نہیں کرتے +- بغیر دوسرے پراجیکٹس کو متاثر کیے انفرادی پراجیکٹس پر کام کریں +- پورے نصاب کے تجربے کے لیے پورا مخزن کلون کریں --- -**دفعۂ اخطار**: -اس دستاویز کا ترجمہ 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/zh-CN/.co-op-translator.json b/translations/zh-CN/.co-op-translator.json index 1ec012f02..3f1c38f70 100644 --- a/translations/zh-CN/.co-op-translator.json +++ b/translations/zh-CN/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "bec5e35642176d9e483552bfc82996d8", - "translation_date": "2026-03-06T16:27:11+00:00", + "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d", + "translation_date": "2026-03-27T22:12:34+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "zh-CN" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-03-06T16:30:45+00:00", + "translation_date": "2026-03-27T22:15:37+00:00", "source_file": "AGENTS.md", "language_code": "zh-CN" }, diff --git a/translations/zh-CN/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/zh-CN/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 9687474eb..19730d4cb 100644 --- a/translations/zh-CN/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/zh-CN/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,19 +1,19 @@ # 编程语言与现代开发工具简介 -嗨，未来的开发者！👋 我可以告诉你一件每天都让我激动不已的事吗？你即将发现，编程不只是关于计算机——它是拥有实际超能力，将你最狂野的想法变为现实的能力！ +你好，未来的开发者！👋 我能告诉你一件每天都让我激动不已的事情吗？你即将发现编程不仅仅是关于计算机——它是赋予你把最疯狂的想法变为现实的超能力！ -你知道那种时刻吗？当你使用你最喜欢的应用，所有东西恰到好处地运作起来？当你点击一个按钮，发生了某种完全神奇的事情，让你不禁惊呼“哇，他们是怎么做到的？”嗯，正是像你一样的某个人——可能深夜两点坐在他最爱咖啡馆，喝着第三杯浓缩咖啡——写下了创造那魔法的代码。最让你惊讶的是：到本课结束时，你不仅会理解他们是如何做到的，还会迫不及待想自己试一试！ +你知道使用你最喜欢的应用时，有那么一瞬间所有东西都完美契合吗？当你点击一个按钮，发生了某种绝对神奇的事情，让你忍不住惊呼“哇，他们是怎么做到的？” 那正是像你一样的人——可能凌晨两点坐在最喜欢的咖啡馆里，喝着第三杯浓缩咖啡——写出了创造那份魔力的代码。接下来要让你惊叹的是：在这节课结束时，你不仅会明白他们是怎么做到的，还会迫不及待地想自己尝试！ -听着，如果现在觉得编程有点吓人，我完全理解。我刚开始学习时，真的以为你得是数学天才，或者从五岁就开始写代码。但彻底改变我看法的是：编程就像学习用新语言对话。你从“你好”和“谢谢”学起，然后慢慢学会点咖啡，过不了多久，你就能进行深刻的哲学讨论！不过这里，你是在跟计算机对话，说实话？它们是你见过最有耐心的对话伙伴——从不因为你的错误而评判你，总是乐意再试一次！ +说实话，如果你现在觉得编程令人害怕，我完全理解。一开始我也觉得编程一定要是数学天才，或者从五岁起就开始写代码才行。但真正让我改变看法的是：编程就像学习一门新语言的交流。你起步于“你好”和“谢谢”，接着学会点咖啡，没多久就能谈哲学了！不过这次是和计算机“对话”，说实话？它们是你遇到过最耐心的“对话伙伴”——永不批评你的错误，永远兴奋地愿意再尝试一次！ -今天，我们将探索那些让现代网页开发不仅可能还极其上瘾的神奇工具。我说的正是 Netflix、Spotify 以及你最喜欢的独立应用工作室的开发者们每天使用的编辑器、浏览器和工作流。这里有个让你忍不住开心跳舞的部分：大部分这些专业级、行业标准的工具都是完全免费的！ +今天，我们将探索那些让现代网页开发不仅可能而且极具吸引力的惊人工具。我说的正是 Netflix、Spotify 和你喜欢的独立应用工作室每天都在用的编辑器、浏览器和工作流程。最让你开心的是：这些专业级、行业标准工具大多数都是免费的！ ![Intro Programming](../../../../translated_images/zh-CN/webdev101-programming.d6e3f98e61ac4bff.webp) -> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) +> 草图由 [Tomomi Imura](https://twitter.com/girlie_mac) 绘制 ```mermaid journey - title 你今天的编程旅程 + title 你今天的编程之旅 section 发现 什么是编程: 5: You 编程语言: 4: You @@ -27,61 +27,60 @@ journey 工具探索: 5: You 社区连接: 5: You ``` - ## 来看看你已经知道些什么！ -在我们跳入有趣的内容之前，我很想知道——你对这个编程世界已经了解多少？听着，如果你看到这些问题时想“我一点头绪都没有”，那不但没关系，反而是完美的！这意味着你来对地方了。把这个测试当成运动前的热身——我们只是在热身你的大脑肌肉！ +在进入有趣的内容之前，我很好奇——你对编程世界已经了解多少？听着，如果你看着这些问题想“我完全不知道这些东西”，没关系，这完全没问题！这就意味着你来对地方了。把这个测验当作运动前的热身——我们只是让脑子热身一下！ -[参加课前测试](https://ff-quizzes.netlify.app/web/) +[参加课前测验](https://ff-quizzes.netlify.app/web/) -## 我们即将一起展开的冒险 +## 我们即将共同冒险的旅程 -好吧，我真的是激动得跳起来，迫不及待要和你一起探索今天的内容！说真的，我真希望能看到你在某些概念终于明白时的表情。这是我们一起踏上的精彩旅程： +好吧，我对今天要探索的内容真的是兴奋得跳起来！说真的，我真希望我能看到当你理解某些概念时的表情。以下是我们共同踏上的精彩旅程： -- **什么是编程（以及为什么它是最酷的事情！）**——我们将发现代码是如何成为无形的魔法，驱动你周围的一切，从那个奇妙知道现在是周一早晨的闹钟，到精准策划你 Netflix 推荐的算法 -- **编程语言及其令人惊叹的性格**——想象走进一个派对，每个人都拥有完全不同的超能力和解决问题的方式。编程语言的世界就是这样，你会喜欢认识它们！ -- **构成数字魔法的基本构件**——把它们想象成终极乐高积木。一旦理解了这些拼接方式，你会发现你可以建立任何你想象出来的东西 -- **让你感觉像刚拿到魔法棒的专业工具**——我一点不会夸张——这些工具真能让你感觉拥有超能力，最棒的是？它们跟专业人士用的是一样的！ +- **什么是编程（以及为什么它是最酷的事情！）**——我们将发现代码是如何成为你周围一切的无形魔法推动力，从那个莫名其妙知道周一早晨的闹钟，到完美策划你 Netflix 推荐的算法 +- 编程语言及其奇妙个性——想象你进入一个聚会，每个人都拥有完全不同的超能力和解决问题的方式。编程语言的世界就像这样，你一定会喜欢认识它们！ +- 打造数字魔法的基础构件——把它们想象成终极创意乐高积木。理解这些零件如何组合后，你会发现自己真的可以建造出任何你想象中的东西 +- 让你感觉仿佛刚拿到魔法棒的专业工具——我并不夸张——这些工具会让你真切感受到拥有超能力，最棒的是？它们和专业人士用的一样！ -> 💡 **提示**：别想着今天把所有东西都记住！现在，我只希望你感受到对无限可能的那份兴奋。细节会随着一起练习自然牢固——这才是真正的学习！ +> 💡 重点是：今天不要试图记住所有内容！现在，我只想让你感受到即将实现的那份激情。细节会随着我们一起练习自然而然地牢记——这才是真正的学习！ -> 你也可以在 [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) 上学习本课程！ +> 你也可以在 [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) 上学习这节课！ -## 那么编程到底*是什么*？ +## 那么，什么是编程？ -好，来解答这个价值百万的问题：编程到底是什么？ +好了，让我们来回答这个价值百万美元的问题：编程究竟是什么？ -我给你讲一个完全改变我看法的故事。上周，我试图给我妈妈讲怎么用我们新的智能电视遥控器。我发现我一直在说“按红色按键，但不是那个大红色，是左边那个小红色……不，另一个左边……好了，现在按住两秒，不是一秒，也不是三秒……”听起来熟悉吗？😅 +我给你讲个让我彻底改变看法的故事。上周我试图给妈妈讲怎么用我们新的智能电视遥控器。我发现自己老是说“按那个红色按钮，但不是大红按钮，是左边那个小红按钮……不，不，是你另一只手那边的左边……好了，现在按住两秒，不是一秒，也不是三秒……” 是不是很熟悉？😅 -这就是编程！向一个非常强大的对象提供极其详细、一步步的说明的艺术，但需要把所有事都细致到位。只是你不是解释给你妈妈（她可以问“哪个红色按键？！”），而是在解释给计算机（它只执行你说的，哪怕你说的不是你真正想表达的意思）。 +这就是编程！它是给非常强大的东西制定极其详细、一步步的指令的艺术，只不过你要把每条都讲清楚。唯一的区别是，你不是给妈妈解释（她可能会反问“哪个红按钮？”），而是给计算机解释（它只会严格执行你说的，哪怕那不是你真想表达的）。 -我刚学时最震撼的是：计算机其实内核非常简单。它们只懂两种东西——1 和 0，基本上就是“是”和“否”或者“开”和“关”。就是这样！但是这里就神奇了——我们不需要像《黑客帝国》那样直接用 1 和 0 交流。这时，**编程语言**就派上用场了。它们就像最棒的翻译官，把你正常人的思维转成电脑能懂的语言。 +我刚开始学时最让我震惊的是：计算机本质很简单。它们只懂两件事——1 和 0，基本上就是“是”和“否”或者“开”和“关”。仅此而已！神奇的地方在这——我们不必像《黑客帝国》那样用 1 和 0 交流。这时编程语言就派上用场了。它们就像是最棒的翻译官，将你正常的人类思维转换成计算机语言。 -还有让我每天早上醒来都激动得起鸡皮疙瘩的是：你生活中几乎所有数字化的东西，都是某个跟你一样的人开始的，可能穿着睡衣，手捧一杯咖啡，在笔记本上敲代码。那个让你看起来完美无瑕的 Instagram 滤镜？有人写了那段代码。为你推荐新歌的算法？有个程序员构建了它。帮你和朋友分摊晚餐账单的应用？是的，某个人想“这太烦了，我能解决”，然后他们做到了！ +每天醒来时让我激动不已的是：你生活中所有数字内容，都是由像你一样的人创造的。可能穿着睡衣，拿着一杯咖啡，坐在笔记本电脑前敲代码。那个让你完美无瑕的 Instagram 滤镜？有人写了代码。推荐你新喜欢音乐的算法？开发者构建了它。帮你和朋友一起分摊晚饭账单的应用？有人想“这个好烦，我一定能改进”，然后……他们做到了！ -当你学会编程，不只是学会一项新技能——你成为了一个不可思议的解决问题社区的一员。他们每天都在想，“如果我能造出点让别人生活稍微好一点的东西怎么办？”老实说，这还有什么比这更酷的吗？ +当你学会编程时，不仅仅是在掌握一门新技能——你正在加入这个惊人的问题解决社区，他们每天思考着：“如果我能造点什么让别人一天变得更好一点？” 说真的，还有什么比这更酷的吗？ -✅ **趣味小知识**：有空时查查这个超酷话题——你知道世界上第一个计算机程序员是谁吗？我给你个提示：可能不是你想象的那个人！这个人的故事绝对精彩，展示了编程一直是关于创造性解决问题和跳出思维框架。 +✅ 趣味小知识狩猎：当你有空时，查查世界上第一位程序员是谁？提示：这可能不是你想象的那个人！这位先驱的故事绝对引人入胜，证明编程一直都是创造性解决问题和跳出框架思考的代名词。 -### 🧠 **自我检测时间：你感觉如何？** +### 🧠 **心情检视时间：你感觉如何？** -**花点时间思考：** -- 现在“给计算机下指令”的概念对你有意义吗？ -- 你能想到一个想用编程自动化的日常任务吗？ -- 对整个编程世界有什么疑问在你脑海中冒出来？ +**静下心来想想：** +- “给计算机下指令”的概念现在对你来说通了吗？ +- 你能想到某个想自动化的日常任务吗？ +- 关于编程，你现在脑海中有哪些问题正在涌现？ -> **记住**：现在有些概念模糊是完全正常的。学编程就像学新语言——你的大脑需要时间来建立神经通路。你做得很棒！ +> 记住：即使某些概念现在有些模糊也完全正常。学习编程就像学习一门新语言，神经回路需要时间建立。你做得很棒！ -## 编程语言就像不同口味的魔法 +## 编程语言就像不同风味的魔法 -好，这听起来可能怪怪的，但坚持听我说——编程语言很像不同类型的音乐。想想看：有爵士，顺滑而即兴；摇滚，强力而直白；古典，优雅且结构严谨；还有嘻哈，充满创意与表达。每种风格都有自己的氛围，热情的粉丝团体，各自适合不同场合和情绪。 +好，这听起来怪怪的，但跟我来——编程语言很像不同类型的音乐。试想：你有爵士乐，慵懒而即兴；摇滚，强劲直率；古典，高雅有序；还有嘻哈，创意丰富。每种风格有自己的氛围、激情粉丝群，适合不同心情和场合。 -编程语言也是一样！你不会用同一种语言写一个有趣的手机游戏，也用它来处理庞大的气候数据分析，就像在瑜伽课上不可能放着死亡金属（嗯，大多数瑜伽课至少如此😄）。 +编程语言也完全如此！你不会用一样的语言去开发一个有趣的手机游戏，同时用它处理海量气候数据，就像你不会在瑜伽课上听死亡金属一样（嗯，大部分瑜伽课是这样 😄）。 -但让我每次想起都惊叹的是：这些语言就像身旁有最耐心、最聪明的翻译官。你可以用大脑自然的方式表达思想，它们会帮你完成将想法翻译成计算机真正懂的 1 和 0 的复杂工作。这就像你有个朋友，精通“人类创造力”和“计算机逻辑”两种语言——而且他们永不疲倦，不用喝咖啡休息，也不会因为你重复问同一个问题而不耐烦！ +但每次想到这点，都让我着迷：这些语言就像你身边有一个最耐心、最聪明的翻译官。你用符合人类思维的方式表达想法，他们负责复杂转换成计算机真正能理解的 1 和 0。就好比你有了那个能流利“人类创意”和“计算机逻辑”的朋友——他们永不疲倦，不需要咖啡休息，也绝不嘲笑你反复问同一个问题！ -### 流行的编程语言及其用途 +### 流行编程语言及其用途 ```mermaid mindmap @@ -122,36 +121,36 @@ mindmap 云服务 可扩展后端 ``` -| 语言 | 最佳用途 | 热门原因 | +| 语言 | 适用范围 | 流行原因 | |----------|----------|------------------| -| **JavaScript** | 网页开发、用户界面 | 浏览器运行，驱动交互式网站 | -| **Python** | 数据科学、自动化、人工智能 | 易读易学，强大库支持 | -| **Java** | 企业应用、安卓应用 | 跨平台，适合大型系统 | -| **C#** | Windows 应用、游戏开发 | 微软生态支持强大 | -| **Go** | 云服务、后端系统 | 快速简单，面向现代计算 | +| **JavaScript** | 网页开发，用户界面 | 运行在浏览器中，支持交互式网站 | +| **Python** | 数据科学，自动化，人工智能 | 易读易学，拥有强大库支持 | +| **Java** | 企业应用，安卓应用 | 跨平台，适合大型系统 | +| **C#** | Windows 应用，游戏开发 | 强大的微软生态支持 | +| **Go** | 云服务，后端系统 | 快速简洁，专为现代计算设计 | -### 高级语言 vs 低级语言 +### 高级语言 vs. 低级语言 -老实说，这是我初学时最头疼的概念，所以我想用一个帮我彻底领会的比喻分享给你——希望对你也有帮助！ +说实话，这一概念一开始把我搞晕了，后来我用下面这个类比终于弄懂了——希望对你也有帮助！ -想象你去一个语言不通的国家，急需找洗手间（谁都经历过吧？😅）： +想象你去一个完全不会说其语言的国家，急需找到最近的厕所（相信我，我们都经历过😅）： -- **低级编程** 就像你学会当地方言，能跟街角卖水果的老太太聊上天，用文化暗示、本地俚语和只有本地人懂的笑话。超级厉害且效率极高……如果你流利的话！但当你只是想找个厕所时，真的很难。 +- 低级编程 就像你把当地方言学到可以跟卖水果的老奶奶侃大山，用文化典故、本地俚语、只有土生土长才能懂的“梗”。超级厉害且效率奇高……如果你懂的话！不过当你只是要找厕所时会超头疼。 -- **高级编程** 像有个能懂你心思的当地朋友。你直接用英文说“我真的需要找洗手间”，他帮你翻译成当地话，给你解释得非常明白，适合你这种外来者理解。 +- 高级编程 就像你有个超棒的本地朋友懂你想表达啥。你只需用普通英语说“我真的需要找洗手间”，好友帮你翻译、指路，一切对你这个外地人来说都明明白白。 -用编程术语来说： -- **低级语言**（如汇编或C）让你直接与计算机硬件细致对话，但你得用机器思维，这……嗯，心理转换很大！ -- **高级语言**（如 JavaScript、Python或 C#）让你像人类思考，它们负责幕后处理机器语言。另外，它们有热情欢迎新手的社区，大家都记得刚学时的辛苦，真心想帮忙！ +在编程世界： +- 低级语言（比如汇编或 C）让你能和电脑硬件“详谈”，但你得像机器一样思考……这心理转变很大啊！ +- 高级语言（比如 JavaScript、Python 或 C#）让你保持人类思维，幕后帮你处理机器语言。他们还有超友好的社区，记得刚入门时的尴尬并真诚乐于帮忙！ -你猜我建议你从哪种开始学？😉 高级语言就像带着辅助轮的自行车，根本不想摘掉，因为它让整个体验轻松愉快！ +猜你该从哪种语言开始学？😉 高级语言就像训练轮，根本不想摘掉，因为它们让整个学习过程更轻松愉快！ ```mermaid flowchart TB - A["👤 人类思维:
'我想计算斐波那契数列'"] --> B{选择语言级别} + A["👤 人类思考:
'我想计算斐波那契数列'"] --> B{选择语言层级} - B -->|高级| C["🌟 JavaScript/Python
易读易写"] - B -->|低级| D["⚙️ 汇编/C
直接控制硬件"] + B -->|高级| C["🌟 JavaScript/Python
易于阅读和编写"] + B -->|底层| D["⚙️ 汇编/C
直接硬件控制"] C --> E["📝 编写: fibonacci(10)"] D --> F["📝 编写: mov r0,#00
sub r0,r0,#01"] @@ -165,19 +164,18 @@ flowchart TB style D fill:#fff3e0 style H fill:#e8f5e8 ``` +### 让我给你演示高级语言有多友好 -### 为你展示为何高级语言更亲切 - -好，我马上给你展示一段代码，完美说明我为何爱上高级语言。但首先——我需要你答应我，看到第一段代码时别慌！它故意看起来可怕。这正是我要强调的点！ +好，我马上给你展示我为啥爱上高级语言。先跟我约定看到第一个代码示例时别慌！它看上去吓人是故意的，这正是我想讲的重点！ -我们将以两种完全不同的风格写出相同的任务。它们生成的是斐波那契数列——一个美丽的数学模式，每个数字都是前两个之和：0, 1, 1, 2, 3, 5, 8, 13……（趣味知识：自然界到处都有这个模式——向日葵种子螺旋、松果纹理，甚至银河系的形成！） +我们会对比两种完全不同风格的代码实现同一任务——生成斐波那契数列——这是个美妙的数学模式，每个数是前两个数字之和：0，1，1，2，3，5，8，13……（趣味知识：自然界随处可见这个规律——向日葵种子螺旋、松果纹理，甚至银河形成方式！） -准备好了看差别吗？走起！ +准备好看区别吗？走起！ -**高级语言 (JavaScript) —— 友好易懂：** +**高级语言（JavaScript）——人类友好：** ```javascript -// 第一步：基本斐波那契设置 +// 第1步：基本的斐波那契数列设置 const fibonacciCount = 10; let current = 0; let next = 1; @@ -185,11 +183,11 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**这段代码做了什么：** -- **声明**一个常量确定我们要生成多少个斐波那契数字 -- **初始化**两个变量跟踪当前和下一个数字 -- **设定**起始值（0 和 1），定义数列规则 -- **展示**一个标题，标识输出结果 +**此代码做了以下事情：** +- 声明一个常量，指定生成多少个斐波那契数 +- 初始化两个变量，追踪序列中的当前数和下一个数 +- 设定起始值（0 和 1），定义斐波那契模式 +- 显示输出头部信息 ```javascript // 第2步：使用循环生成序列 @@ -203,11 +201,11 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**下面发生了什么：** -- **使用**`for` 循环遍历序列的位置 -- **显示**每个数字和其位置，采用模板字符串格式化 -- **计算**下一个数，当前值加上下一个值 -- **更新**变量，前进到下一步循环 +**这里发生了什么：** +- **用`for`循环**遍历序列每个位置 +- 用模板字符串格式显示每个数及其位置 +- 计算下一个斐波那契数（当前值加下一个值） +- 更新追踪变量，进入下一次循环 ```javascript // 第3步：现代函数式方法 @@ -226,11 +224,11 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**上述代码中我们：** -- **创建**了一个使用现代箭头函数语法的可重用函数 -- **构建**了一个数组来存储完整序列，而不是逐个显示 -- **用**数组索引计算每个新数字，基于前面值 -- **返回**完整序列，方便程序其他部分调用 +**上述代码还：** +- 用现代箭头函数语法创建可复用函数 +- 构建了数组保存完整序列而不是逐个打印 +- 利用数组索引从之前值计算新数 +- 返回完整序列以便其他程序部分灵活使用 **低级语言（ARM 汇编）——计算机友好：** @@ -259,27 +257,28 @@ back add r0,r1 end ``` -你注意到 JavaScript 版本几乎像英文说明，而汇编版本则使用神秘命令直接控制计算机处理器。两者任务相同，但高级语言更易理解、编写和维护。 +你会发现 JavaScript 版本几乎像英语指令，而汇编版本则使用直接控制处理器的冷僻命令。两者实现完全相同的功能，但高级语言对人类来说更易懂、编写和维护。 -**你会注意到的主要区别：** -- **可读性**：JavaScript 使用描述性名称如 `fibonacciCount`，而汇编语言则使用晦涩的标签如 `r0`、`r1` -- **注释**：高级语言鼓励写解释性注释，使代码具备自我文档功能 -- **结构**：JavaScript 的逻辑流程符合人类逐步思考问题的方式 -- **维护**：根据不同需求更新 JavaScript 版本简单清晰 +**你会注意到的关键区别：** +- 可读性：JavaScript 使用像 `fibonacciCount` 这样描述性强的名称，而汇编语言使用像 `r0`、`r1` 这样的晦涩标签 +- 注释：高级语言鼓励写解释性注释，使代码自带文档功能 +- 结构：JavaScript 的逻辑流程符合人类一步步思考问题的方式 +- 维护：针对不同需求更新 JavaScript 版本直观且清晰 -✅ **关于斐波那契数列**：这个绝美的数字模式（每个数字等于前两个数字之和：0、1、1、2、3、5、8……）实际上在大自然中 *无处不在*！你会在向日葵的螺旋形、松果的纹理、鹦鹉螺壳的弯曲方式，甚至树枝生长的方式中找到它。数学和代码能帮助我们理解并复刻自然用来创造美丽的模式，这真是令人震惊！ +✅ 关于斐波那契数列：这个绝美的数字模式（其中每个数字都是前两个数字之和：0、1、1、2、3、5、8……）实际上在大自然中无处不在！你会在向日葵的螺旋、松球的图案、鸵蚌壳的曲线，甚至树枝的生长方式中发现它。数学和代码帮助我们理解并重现大自然用来创造美丽的模式，这真是令人惊叹！ -## 构建魔法的基石 -好了，现在你已经看到编程语言的实际表现了，接下来让我们拆解构成所有程序的基础要素。把它们想象成你最喜欢的食谱中的必备材料——一旦了解每个材料的用途，你就能用几乎任何语言读写代码！ +## 让魔法发生的基本构件 -这有点像学习编程的语法。还记得学校里学习名词、动词和如何构成句子吗？编程也有自己的语法，坦白说，它比英语语法要逻辑得多，也宽容得多！😄 +好了，现在你已经看到编程语言的实际样子了，让我们拆解构成所有程序的基础部分。把它们想象成你最喜欢食谱中的必备原料——一旦你理解了每个部分的作用，你就能读懂并编写几乎任何语言的代码！ + +这有点像学习编程的语法。还记得学校里学名词、动词和造句吗？编程也有自己的“语法”，老实说，它比英文语法更合逻辑、更宽容！😄 ### 语句：一步步的指令 -让我们从**语句**开始——它们就像跟计算机对话中的一句句子。每条语句告诉计算机做一件具体的事，就像给出指示：“这里左转”、“红灯停”、“在那个车位停车”。 +先从 语句 开始——它们就像你和电脑对话中的单句子。每条语句指示电脑做一件具体的事情，就像给出方向：“这里左转”，“红灯停”，“停到那个车位”。 -我喜欢语句的原因是它们通常很易读。看看这个： +我喜欢语句的一点是它们通常非常可读。看这个例子： ```javascript // 执行单个操作的基本语句 @@ -288,10 +287,10 @@ console.log("Hello, world!"); const sum = 5 + 3; ``` -**这段代码的功能是：** -- **声明**一个常量变量用来存储用户的名字 -- **向控制台输出**一条问候信息 -- **计算**并存储一个数学运算结果 +**这段代码做了什么：** +- 声明一个常量变量来存储用户的名字 +- 向控制台输出问候信息 +- 计算并存储数学运算结果 ```javascript // 与网页交互的语句 @@ -299,19 +298,19 @@ document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**一步步说明：** -- **修改**浏览器标签页中显示的网页标题 -- **更改**整个页面主体的背景颜色 +**一步步来看看发生了什么：** +- 修改浏览器标签页中显示的网页标题 +- 改变整个页面主体的背景颜色 ### 变量：程序的记忆系统 -好了，**变量**是我最喜欢讲解的概念之一，因为它们和你日常使用的东西非常相似！ +好了，变量说实话是我最喜欢教的概念之一，因为它们非常像你每天都在用的东西！ -想象一下你的手机通讯录。你不会记住每个人的电话号码——相反，你会保存“妈妈”、“最好朋友”或“凌晨两点还送外卖的披萨店”，然后让手机帮你记住实际号码。变量也是这样！它们就像带标签的容器，你的程序可以用有意义的名字存储信息，之后再取出来用。 +想象一下你的手机通讯录。你不会记住所有人的电话号码，而是保存“妈妈”、“最好的朋友”或者“凌晨2点之前送餐的披萨店”，然后让手机记住具体号码。变量的作用就是这样！它们就像带标签的容器，程序可以把信息存在里面，然后通过有意义的名字叫出来。 -更酷的是：变量可以随着程序运行而改变（所以叫“变量”——懂了吗？）。就像你可能会更新那个披萨联系人的号码，变量会随着程序获取到新信息或环境变化不断更新！ +最酷的是：变量可以在程序运行时变化（因此得名“变量”——你看这名字多贴切！）。就像你发现了更棒的披萨店时会更新联系人一样，变量也会随着程序学习新信息或情况变化而更新！ -我来给你演示一下，这可以多么简单： +看看这多简单： ```javascript // 第一步：创建基本变量 @@ -322,13 +321,13 @@ let isRaining = false; ``` **理解这些概念：** -- **用 `const` 存储**不变的值（比如网站名称） -- **用 `let` 存储**在程序中可能改变的值 -- **赋值**不同数据类型：字符串（文本）、数字和布尔值（真/假） -- **选择**描述性名称，说明变量存储的内容 +- **在 `const` 变量中**存储不变的值（例如网站名称） +- **用 `let`** 存储程序运行中可能会改变的值 +- 分配不同数据类型：字符串（文本）、数字和布尔值（true/false） +- 选择描述性名称解释变量内容 ```javascript -// 第2步：使用对象对相关数据进行分组 +// 第2步：使用对象来分组相关数据 const weatherData = { location: "San Francisco", humidity: 65, @@ -336,10 +335,10 @@ const weatherData = { }; ``` -**上面代码里，我们：** -- **创建**一个对象，将相关的天气信息组合在一起 -- **用一个变量名**组织多条数据 -- **使用**键值对明确定义每条信息 +**上面代码中，我们：** +- 创建了一个对象，用于组合相关的天气信息 +- 将多条数据组织到一个变量名下 +- 用键值对清楚标注每条信息内容 ```javascript // 第3步：使用和更新变量 @@ -351,32 +350,32 @@ currentWeather = "cloudy"; temperature = 68; ``` -**理解各部分功能：** -- **用模板字符串**（`${}` 语法）展示信息 -- **用点号语法**访问对象属性（如 `weatherData.windSpeed`） -- **更新**用 `let` 声明的变量，反映变化的情况 -- **组合**多个变量加工输出有意义的信息 +**逐部分理解：** +- 使用模板字符串 `${}` 来显示信息 +- 用点号表示法访问对象属性（`weatherData.windSpeed`） +- 更新用 `let` 声明的变量以反映变化的条件 +- 组合多个变量来生成有意义的消息 ```javascript -// 步骤4：使用现代解构赋值使代码更简洁 +// 第4步：使用现代解构使代码更简洁 const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` **你需要知道的是：** -- **用解构赋值**提取对象中的特定属性 -- **创建**与对象键相同名称的新变量 -- **简化**代码，避免重复使用点号语法 +- 用解构赋值从对象中提取特定属性 +- 自动创建与对象键同名的新变量 +- 简化代码，避免重复使用点号 -### 控制流：教程序如何思考 +### 控制流：教程序“思考” -好了，接下来编程就有点神奇了！**控制流**基本上就是教你的程序像你每天自然而然做的那样，做出聪明决策。 +好了，这里是绝对令人震撼的地方！控制流基本上就是教你的程序如何做出聪明决策，正如你每天毫不费力地做的事。 -想象一下：今天早晨你可能经历了这样的逻辑，“如果下雨了，我就带伞。如果很冷，我就穿夹克。如果我要迟到了，我就跳过早餐在路上买咖啡。”你每天大概都用这种 if-then 逻辑思考几十次！ +想象一下：今天早上你大概做了类似这样的判断：“如果下雨，我带伞；如果冷，我穿夹克；如果赶时间，我跳过早餐路上喝杯咖啡。”你的大脑每天都会无数次自然而然地遵循这种“如果-那么”的逻辑！ -这让程序看起来聪明有活力，而不是死板乏味地执行脚本。它们可以观察情况，评估发生了什么，并做出相应反应。就像给程序装了大脑，能灵活地做决定！ +这就是让程序看起来聪明、有生命力、不再像流水线脚本的原因。它们可以实际观察情况，评估当前状态，并做出合适反应。就像给你的程序装上了一颗能适应环境、做出选择的大脑！ -想看到它多酷吗？我来给你演示： +想看看它是怎么美妙工作的？我来给你演示： ```javascript // 第一步：基本条件逻辑 @@ -390,14 +389,14 @@ if (userAge >= 18) { } ``` -**这段代码作用：** -- **检查**用户年龄是否符合投票要求 -- **根据条件结果**执行不同代码块 -- **计算**并显示未满 18 岁者距离投票资格还有多久 -- **为每种情况**提供具体有用的反馈 +**这段代码的作用：** +- 检查用户年龄是否满足投票条件 +- 根据条件执行不同的代码块 +- 计算并显示未满18岁还需多久才有资格投票 +- 针对每种情况提供具体且有帮助的反馈 ```javascript -// 第2步：使用逻辑运算符的多条件判断 +// 第2步：使用逻辑运算符的多个条件 const userAge = 17; const hasPermission = true; @@ -410,22 +409,22 @@ if (userAge >= 18 && hasPermission) { } ``` -**代码解析：** -- **用 `&&`（且）操作符合并多条件** -- **用 `else if` 构建多层条件判断** -- **用最终的 `else`**应对所有其他情况 -- **针对每种情况**给出清晰且可操作的反馈 +**这里发生了什么：** +- **用 `&&`（且）运算符**组合多个条件 +- **用 `else if`** 创建多层条件判断体系 +- **用最后的 `else`** 处理所有可能的其他情况 +- 为每种情况提供明确、可操作的反馈 ```javascript -// 第3步：使用三元运算符实现简洁的条件语句 +// 第3步：使用三元运算符的简洁条件语句 const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` **你需要记住：** -- **用三元运算符 (`? :`)**处理简单的两选一条件 -- **写条件，跟 `?`，然后是为真时返回的结果，再是冒号 `:`，最后是为假时返回结果** -- **在需要根据条件赋值时使用此模式** +- **使用条件（三元）运算符 (`? :`)** 表达简单的两选一条件 +- **先写条件，紧跟`?`，然后是满足条件的结果，再写冒号`:`，最后是假时的结果** +- **当你需要根据条件给变量赋值时，使用这个模式** ```javascript // 第4步：处理多个特定情况 @@ -449,52 +448,52 @@ switch (dayOfWeek) { ``` **这段代码实现了：** -- **将变量值与多个特定情况匹配** -- **将相似情况分组**（工作日与周末） -- **匹配时执行**相应代码块 -- **包含 `default`**应对意外值 -- **用 `break`**防止代码继续执行下一个情况 +- 匹配变量值和多个具体案例 +- 将类似情况组合（工作日 vs. 周末） +- 找到匹配时执行相应代码块 +- **使用 `default`** 处理意外情况 +- **用 `break` 语句** 防止继续执行后续案例 -> 💡 **现实类比**：把控制流想象成世界上最有耐心的 GPS 指路。它可能会说：“如果主街有堵车，那走高速。如果高速封闭施工，试试风景路线。”程序用同样的条件逻辑智能响应不同情境，总是给用户最佳体验。 +> 💡 现实世界类比：把控制流想象成世界上最耐心的 GPS 给你指路。它可能会说：“如果主街有堵车，就走高速。如果高速施工，试试风景路线。”程序用完全相同的条件逻辑智能地应对各种情况，总是为用户提供最佳体验。 -### 🎯 **概念检测：构建基石掌握度** +### 🎯 **概念检查：构建模块掌握情况** -**让我们看看你对基础的掌握情况：** -- 用你自己的话解释变量和语句的区别？ -- 想个现实生活中的 if-then 决策场景（比如投票示例） -- 有关编程逻辑，你觉得最让你惊讶的一点是什么？ +**来看看你对基础的理解：** +- 你能用自己的话解释变量和语句的区别吗？ +- 想一个现实例子说明你会在什么情况下用 if-then 判断（比如我们的投票例子） +- 编程逻辑中，有什么让你感到惊讶的地方？ -**快速提升信心：** +**快速信心提升：** ```mermaid flowchart LR - A["📝 语句
(指令)"] --> B["📦 变量
(存储)"] --> C["🔀 控制流
(决策)"] --> D["🎉 工作程序！"] + A["📝 语句
(指令)"] --> B["📦 变量
(存储)"] --> C["🔀 控制流
(决策)"] --> D["🎉 工作程序!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **接下来是什么**：我们将继续这段精彩旅程，深入探讨这些概念，绝对轻松愉快！现在只需感受对未来无限可能的兴奋，具体技能和技巧随着练习自然掌握——我保证这比你想象的要有趣多了！ +✅ 接下来内容：我们将继续深入探讨这些概念，一路玩得开心！现在只要感受对未来各种奇妙可能的兴奋就好。具体技能和技巧自然会随着练习变得得心应手——保证比你想象的有趣多了！ -## 必备工具 +## 工具介绍 -说实话，这部分让我激动得几乎无法自持！🚀 我们即将聊聊那些超级棒的工具，它们会让你感觉仿佛刚拿到了数字飞船的钥匙。 +好吧，坦白说我现在简直激动得不行！🚀 我们马上要聊的是那些让你感觉仿佛刚拿到数字宇宙飞船钥匙的神奇工具。 -你知道厨师用那种平衡感极佳、仿佛手的一部分的刀子吗？或音乐家一碰吉他就让它唱起来的那把吉他吗？开发者也有属于自己的魔法工具，更令人震撼的是——它们大多数都是完全免费的！ +你知道厨师手中那些平衡极佳、像手臂扩展一样的刀具是什么感觉吗？或是音乐家那把刚被触碰就会唱歌的吉他？开发者们也有自己的“魔法工具”，让我爆料一波——它们中的大多数居然是完全免费的！ -想到能和你分享它们我就激动不已，因为这些工具彻底改变了软件构建方式。我们说的是 AI 驱动的编码助手，能帮你写代码（真不是开玩笑！），还有云端环境让你随时随地用 Wi-Fi 构建完整应用，调试工具先进到像给程序配了透视眼。 +想到要跟你分享这些工具我已经兴奋得坐立不安了，因为它们彻底改变了我们构建软件的方式。我们说的是由 AI 驱动的代码助手，它们能帮你写代码（不是开玩笑！），基于云的开发环境可以让你随时随地有 Wi-Fi 都能做完整应用，调试工具强大到就像给程序装上了 X 光眼。 -最让我热血沸腾的是：这些可不是“入门工具”，你用它们不会觉得学完就扔。Google、Netflix 甚至你喜欢的独立应用工作室里的开发者们现在就用这些专业级工具。你用它们也能秒变高手！ +还有让我浑身起鸡皮疙瘩的是：这些可不是“初学者工具”，你用着会觉得棒极了，这正是 Google、Netflix 和你喜欢的那些独立应用工作室此刻正在使用的专业级工具。你用起来一定也会觉得自己超专业！ ```mermaid graph TD - A["💡 你的创意"] --> B["⌨️ 代码编辑器
(VS Code)"] + A["💡 你的想法"] --> B["⌨️ 代码编辑器
(VS Code)"] B --> C["🌐 浏览器开发者工具
(测试与调试)"] C --> D["⚡ 命令行
(自动化与工具)"] D --> E["📚 文档
(学习与参考)"] - E --> F["🚀 惊艳的网络应用！"] + E --> F["🚀 奇妙的网页应用！"] - B -.-> G["🤖 人工智能助手
(GitHub Copilot)"] + B -.-> G["🤖 AI 助手
(GitHub Copilot)"] C -.-> H["📱 设备测试
(响应式设计)"] D -.-> I["📦 包管理器
(npm, yarn)"] E -.-> J["👥 社区
(Stack Overflow)"] @@ -506,120 +505,119 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### 代码编辑器与 IDE：你新的数字好朋友 +### 代码编辑器和 IDE：你的数字新好友 -聊聊代码编辑器——它们马上就会成为你最喜欢待的地方！把它们看作你的个人编程圣地，你将在这里花费大部分时间创作和打磨数码作品。 +说说代码编辑器——这些将成为你新的最爱地盘！把它们看作你专属的编程圣地，大部分时间你都将在这里打造和完善数字作品。 -现代编辑器的魔法：它们不仅是高级文本编辑器，更像是全天候最聪明、最支持你的编程导师。它们能在你察觉错误前帮你抓住错字，给出让你看起来像天才的改进建议，帮你理解每段代码作用，还有些能预测你即将输入什么，主动帮你补全！ +现代编辑器的神奇之处在于：它们不仅仅是高级文本编辑器，更像是全天候在你旁边鼎力相助的天才导师。它们能在你察觉错字前帮你抓住，智能推荐让你代码写得像大神一样，帮你理解每行代码的功能，有些甚至能预测你要敲的内容并帮你补全思路！ -我记得第一次发现自动补全时，感觉自己像生活在未来。你开始输入，编辑器就说：“嘿，你是不是想用这个正好符合你需要的函数？”就像有个读心术好友陪编程一样！ +我还记得第一次用到自动补全时的感觉，仿佛活在未来。你开始敲字，编辑器就“嗨，你是不是想调用这个正好符合需求的函数？”这简直像是有个心灵感应的编程伙伴！ -**这些编辑器的强大在哪？** +**这些编辑器为何如此神奇？** -现代代码编辑器提供了丰富功能提升效率： +现代代码编辑器提供了令人印象深刻的功能，极大提升你的生产力： -| 功能 | 作用 | 优点 | +| 功能 | 作用 | 益处 | |---------|--------------|--------------| -| **语法高亮** | 为代码不同部分着色 | 让代码更易读，更易发现错误 | -| **自动补全** | 输入时推荐代码 | 加快编码速度，减少错误 | -| **调试工具** | 帮你查找修复错误 | 节省大量排错时间 | -| **插件扩展** | 添加专门功能 | 定制编辑器适配各种技术 | -| **AI 助手** | 推荐代码和解释 | 加速学习和开发效率 | +| 语法高亮 | 用颜色区分代码的不同部分 | 让代码更易读，帮助发现错误 | +| 自动补全 | 输入时建议代码 | 加快编码速度，减少错别字 | +| 调试工具 | 帮助定位和修复错误 | 节省大量排查时间 | +| 扩展功能 | 添加专门的功能模块 | 可针对任意技术定制编辑器 | +| **AI助手** | 提供代码建议和解释 | 加速学习与编程效率 | -> 🎥 **视频资源**：想看这些工具怎么用？看这段[必备工具视频](https://youtube.com/watch?v=69WJeXGBdxg)来全面了解。 +> 🎥 视频资源：想看看这些工具如何运作？请观看这段[工具介绍视频](https://youtube.com/watch?v=69WJeXGBdxg)了解详细内容。 -#### 推荐的网页开发编辑器 +#### 推荐用于 Web 开发的编辑器 **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)**（免费） -- 网页开发者中最流行 -- 插件生态丰富 +- Web 开发者中的首选 +- 优秀的扩展生态系统 - 内置终端和 Git 集成 -- **必装插件**： - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI 代码建议 +- 必装扩展： + - [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) - 检查拼写错误 + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 自动代码格式化 + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - 代码拼写检查 **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)**（付费，学生免费） -- 先进的调试和测试工具 +- 高级调试和测试工具 - 智能代码补全 - 内置版本控制 -**基于云的 IDE**（价格各异） -- [GitHub Codespaces](https://github.com/features/codespaces) - 浏览器里的完整 VS Code -- [Replit](https://replit.com/) - 适合学习和共享代码 -- [StackBlitz](https://stackblitz.com/) - 即时全栈网页开发 +**云端 IDE**（多种价格） +- [GitHub Codespaces](https://github.com/features/codespaces) - 浏览器中的完整 VS Code +- [Replit](https://replit.com/) - 适合学习和分享代码 +- [StackBlitz](https://stackblitz.com/) - 即刻启动的全栈 Web 开发 -> 💡 **入门建议**：从 Visual Studio Code 开始——它免费、业内广泛使用，有庞大的社区提供教程和插件支持。 +> 💡 入门建议：从 Visual Studio Code 开始——它免费、业界广泛使用，有庞大的社区提供教程和扩展。 ### 网页浏览器：你的秘密开发实验室 -准备好让你大开眼界吧！你知道一直在用浏览器刷社交媒体、看视频吗？它们其实藏着一个惊人的秘密开发实验室，只等着你去发现！ +准备好被完全震撼了吗！你平时用浏览器滚动社交媒体、看视频，但其实它们一直隐藏着一个惊人的秘密开发实验室，等着你去发现！ -每次右键网页选择“检查元素”，你就打开了一个隐藏世界，里面的开发者工具功能强大得远超我曾经花数百美元购买的软件。这就像发现你家普通厨房后面藏着专业大厨的秘密实验室！ -第一次有人向我展示浏览器开发者工具时，我花了差不多三个小时不停地点击，心里想着“等等，它居然还能做这个？！”你真的可以实时编辑任何网站，准确看到加载速度，测试你的网站在不同设备上的表现，甚至像专家一样调试 JavaScript。这简直让人震惊！ +每次你右键点击网页选择“检查元素”，就打开了一个隐藏的开发者工具世界。这些工具强大得比我以前花几百美元买的软件还厉害。就像发现普通厨房背后藏着专业大厨基地的秘密开关一样！ +第一次有人给我演示浏览器开发者工具的时候，我光是瞎点瞎点就花了三个小时，然后不断地惊呼：“等等，它居然还能这样？！”你真的可以实时编辑任何网站，准确地看到加载速度，测试你的网站在不同设备上的显示效果，甚至像专业人士一样调试 JavaScript。简直令人震惊！ **这就是浏览器成为你秘密武器的原因：** -当你创建网站或网络应用时，你需要看到它在现实中的外观和行为。浏览器不仅展示你的作品，还提供关于性能、可访问性和潜在问题的详细反馈。 +当你创建网站或网络应用时，你需要看到它在现实世界中的外观和表现。浏览器不仅展示你的作品，还提供有关性能、可访问性和潜在问题的详细反馈。 -#### 浏览器开发者工具 (DevTools) +#### 浏览器开发者工具（DevTools） -现代浏览器包含全面的开发工具套件： +现代浏览器包含全面的开发套件： -| 工具类别 | 功能介绍 | 示例用例 | -|----------|----------|----------| -| **元素检查器** | 实时查看和编辑 HTML/CSS | 调整样式即刻查看效果 | -| **控制台** | 查看错误信息及测试 JavaScript | 调试问题和试验代码 | -| **网络监视器** | 跟踪资源加载情况 | 优化性能和加载时间 | -| **可访问性检查器** | 测试包容性设计 | 确保网站适合所有用户 | -| **设备模拟器** | 预览不同屏幕尺寸 | 无需多设备测试响应式设计 | +| 工具类别 | 功能描述 | 示例用例 | +|---------------|--------------|------------------| +| 元素检查器 | 实时查看和编辑 HTML/CSS | 调整样式立即查看效果 | +| 控制台 | 查看错误信息和测试 JavaScript | 调试问题和尝试代码 | +| 网络监视器 | 跟踪资源加载情况 | 优化性能和加载速度 | +| 可访问性检查器 | 测试包容性设计 | 确保网站适合所有用户 | +| 设备模拟器 | 预览不同屏幕尺寸 | 无需多台设备测试响应式设计 | #### 推荐的开发浏览器 -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - 行业标准的 DevTools，附带详尽文档 +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - 行业标准的 DevTools，文档丰富 - **[Firefox](https://developer.mozilla.org/docs/Tools)** - 出色的 CSS Grid 和可访问性工具 -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - 基于 Chromium，配备微软的开发资源 +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - 基于 Chromium，拥有微软开发资源 -> ⚠️ **重要测试提示**：一定要在多种浏览器中测试你的网站！在 Chrome 上完美运行的东西，可能在 Safari 或 Firefox 中看起来完全不同。专业开发者会跨所有主要浏览器测试，以确保用户体验一致。 +> ⚠️ 重要测试提示：务必在多个浏览器中测试你的网站！在 Chrome 上完美运行的内容，在 Safari 或 Firefox 可能会有不同表现。专业开发者会在所有主流浏览器中测试，以确保一致的用户体验。 +### 命令行工具：开发者超级力量的大门 -### 命令行工具：你的开发超级力量入口 +好了，我们来个坦白时刻聊聊命令行，因为我想让你听听一个真正懂它的人说说感受。一开始我看到那个——黑漆漆的屏幕上闪烁着文字——直接想：“不，不行！这看起来就像80年代黑客电影里的东西，我肯定没那个头脑！”😅 -好了，来说一说关于命令行的完全坦白时刻，因为我想让你听听一个真的懂它的人的看法。刚看到时——就是那个黑黑的屏幕，闪烁的文字——我真的想，“不，我绝对不行！这看起来像80年代黑客电影里的东西，我肯定不够聪明！”😅 +但我当时希望有人告诉我，现在我也想告诉你：命令行其实一点都不可怕——它就像你和电脑在直接对话。想象一下，这就好比你不是用附带图片和菜单的精美应用点餐（那很简单），而是走进你最爱的当地餐馆，厨师知道你喜欢什么，你一句“给我惊喜”的话，他就能做出完美美味。 -但我希望当时有人告诉我，现在我告诉你：命令行并不可怕——它实际上就像与你的计算机直接对话。想象一下通过带图片和菜单的高级点餐App订餐（既方便又轻松），和走进你最喜欢的本地餐馆，厨师只需听你说“给我个惊喜的美味”就能做出完美菜肴的区别。 +命令行是开发者感受魔力的地方。你输入几个看似神奇的词（其实就是命令，但感觉很神奇！），按回车，哔——你可以创建整个项目结构，安装来自全世界的强大工具，或者把应用部署到互联网上供数百万人访问。一旦尝过这种力量，真是让人上瘾！ -命令行是令开发者感觉自己像魔法师的地方。你输入几条看似神奇的命令（其实就是命令，但感觉很神奇！），按下回车，砰——你创建了完整的项目结构，从世界各地安装强大工具，或者将应用部署到互联网上供数百万人访问。一旦尝到那种力量，真的会上瘾！ +**命令行将成为你最喜欢工具的理由：** -**命令行为何会成为你最爱的工具：** - -虽然图形界面适用于许多任务，但命令行在自动化、精确度和速度上无与伦比。许多开发工具主要通过命令行操作，学会高效使用它们能大幅提升你的生产力。 +虽然图形界面适合许多任务，但命令行在自动化、精确和速度上无可匹敌。许多开发工具主要通过命令行接口工作，学会高效使用它们能显著提升你的生产力。 ```bash # 第一步：创建并进入项目目录 mkdir my-awesome-website cd my-awesome-website ``` - -**这段代码的作用是：** -- **创建** 一个名为 "my-awesome-website" 的新目录作为你的项目文件夹 -- **进入**这个新建的目录开始工作 + +**这段代码做了什么：** +- 创建一个名为"my-awesome-website"的新目录用于你的项目 +- 进入新建目录开始工作 ```bash -# 第2步：使用package.json初始化项目 +# 第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` 标记这些依赖为开发阶段专用 + +**一步步来看发生了什么：** +- 使用 `npm init -y` 初始化一个默认配置的新 Node.js 项目 +- 安装 Vite 作为现代构建工具用于快速开发和生产构建 +- 添加 Prettier 进行自动代码格式化，ESLint 检查代码质量 +- 使用 `--save-dev` 标记它们为仅开发环境依赖 ```bash # 第3步：创建项目结构和文件 @@ -629,215 +627,210 @@ echo 'My Site

Hello Wo # 启动开发服务器 npx vite ``` + +**以上操作包括：** +- 组织项目，创建源码和资源分别存放的文件夹 +- 生成结构完整的基本 HTML 文件 +- 启动 Vite 开发服务器实现实时重载和热模块替换 -**上述操作中，我们：** -- **组织** 项目结构，创建独立的源代码和资源文件夹 -- **生成** 一个基本的 HTML 文件，包含正确的文档结构 -- **启动** Vite 开发服务器，实现实时重载和热模块替换 - -#### Web开发必备命令行工具 - -| 工具 | 作用 | 你为什么需要它 | -|------|-------|-----------------| -| **[Git](https://git-scm.com/)** | 版本控制 | 追踪变更，协作开发，数据备份 | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript 运行环境及包管理 | 浏览器外运行 JavaScript，安装现代开发工具 | -| **[Vite](https://vitejs.dev/)** | 构建工具及开发服务器 | 支持极快的开发速度和热模块替换 | -| **[ESLint](https://eslint.org/)** | 代码质量检测 | 自动发现并修复 JavaScript 问题 | -| **[Prettier](https://prettier.io/)** | 代码格式化 | 保持代码风格一致，易于阅读 | +#### Web 开发必备命令行工具 -#### 平台专属选项 +| 工具 | 作用 | 你需要它的理由 | +|------|---------|-----------------| +| **[Git](https://git-scm.com/)** | 版本控制 | 追踪更改、协作与备份 | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript 运行时与包管理 | 在浏览器外运行 JS，安装现代开发工具 | +| **[Vite](https://vitejs.dev/)** | 构建工具与开发服务器 | 极速开发与热模块替换 | +| **[ESLint](https://eslint.org/)** | 代码质量 | 自动发现并修复 JS 问题 | +| **[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)** 💻 - 强大的脚本环境 -- **[命令提示符](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - 传统的 Windows 命令行 +#### 不同平台的选择 -**macOS：** -- **[终端](https://support.apple.com/guide/terminal/)** 💻 - 系统自带终端应用 -- **[iTerm2](https://iterm2.com/)** - 功能增强的终端模拟器 +**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)** 💻 - 强大的脚本环境 +- **[命令提示符](https://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** 💻 - 传统 Windows 命令行 -**Linux：** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - 标准 Linux Shell -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - 高级终端模拟器 +**macOS:** +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - 内置终端应用 +- **[iTerm2](https://iterm2.com/)** - 功能增强型终端 -> 💻 = 操作系统预装 +**Linux:** +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - 标准 Linux Shell +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - 高级终端模拟器 -> 🎯 **学习路径**：先从基础命令学起，如 `cd`（切换目录）、`ls` 或 `dir`（列出文件）、`mkdir`（创建文件夹）。练习用现代工作流命令，如 `npm install`、`git status`、`code .`（在 VS Code 打开当前目录）。渐渐熟悉后，你会自然而然掌握更多高级命令和自动化技巧。 +> 💻 = 操作系统预装 +> 🎯 学习路径：先掌握基本命令如 `cd`（切换目录），`ls` 或 `dir`（列出文件），`mkdir`（创建文件夹）。练习现代工作流命令如 `npm install`，`git status`，`code .`（在 VS Code 打开当前目录）。熟悉后自然能掌握更高级命令和自动化技巧。 -### 文档：你随时可用的学习导师 +### 文档：你随时可依赖的学习导师 -好，让我透露一个小秘密，让你作为新手的心情好很多：即使是最有经验的开发者，也大量时间花在看文档上。这并不是说他们不知道在做什么——相反，这是一种聪明的表现！ +好，我来透露一个让你作为初学者心里踏实点的小秘密：即便是最有经验的开发者也会花大量时间阅读文档。这不是因为他们不懂，而是智慧的表现！ -把文档想象成世界上最耐心、最有知识的老师，全年无休随时待命。凌晨两点卡壳了？文档就像温暖的虚拟拥抱，给你正需要的答案。想了解某个大家都在聊的炫酷新功能？文档里有详细步骤和示例。想弄明白某个东西为什么这样工作？对，文档准备好了以你最终能理解的方式解释！ +可以把文档看作全球最耐心、知识最丰富的老师，全天候在线。凌晨两点卡在问题上？文档给你温暖的虚拟拥抱，恰到好处的答案。想了解热门新功能？文档带你一步步学。试图理解为什么某个东西会这样工作？没错，文档就是帮你“恍然大悟”的那把钥匙！ -这有个让我彻底转变认知的事实：网络开发变化飞快，没有人（我说的是绝对没人！）能把所有东西记在脑子里。我见过有15年经验的资深开发者查基本语法，你知道吗？这不丢脸——这很聪明！不是记忆有多好，而是知道该去哪里快速找到可靠答案，并懂得如何应用。 +这彻底改变我看法的一点是：网络开发变化非常快，没人（真的没人！）能背下所有东西。我见过有 15 年经验的高级开发者查基础语法，知道吗？这不丢脸——那是聪明！不是完美记忆，而是知道快速找到可靠答案的方法，并懂得如何应用。 -**真正的魔法发生在这里：** +**真正的魔力在哪里：** -专业开发者大量时间阅读文档——不是因为他们不会，而是因为网络开发环境更新迅速，必须不断学习才能跟上。优秀的文档帮你理解不仅是*怎么用*，还有*为什么用*和*什么时候用*。 +专业开发者大量时间用来阅读文档——不是因为他们不懂，而是网络开发领域更新太快，保持领先需要不断学习。优秀文档不仅告诉你怎么用东西，更说明为什么和何时用。 -#### 重要文档资源 +#### 必备文档资源 -**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Web 技术文档的金标准 -- HTML、CSS 和 JavaScript 的综合指南 -- 包含浏览器兼容信息 -- 有实用示例与交互演示 +**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** +- 网页技术文档的黄金标准 +- HTML、CSS 和 JavaScript 全面指南 +- 包含浏览器兼容性信息 +- 具实用示例和互动演示 -**[Web.dev](https://web.dev)**（Google 提供） -- 现代 Web 开发最佳实践 -- 性能优化指南 -- 可访问性与包容性设计原则 -- 真实项目案例研究 +**[Web.dev](https://web.dev)**（谷歌出品） +- 现代网络开发最佳实践 +- 性能优化指南 +- 可访问性和包容性设计原则 +- 真实项目案例研究 -**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Edge 浏览器开发资源 -- 渐进式 Web 应用指南 -- 跨平台开发洞见 +**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** +- Edge 浏览器开发资源 +- 渐进式 Web App 指南 +- 跨平台开发见解 -**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- 结构化学习课程 -- 行业专家视频课程 -- 实战编码练习 +**[Frontend Masters 学习路径](https://frontendmasters.com/learn/)** +- 结构化学习课程 +- 行业专家视频课程 +- 实战编码练习 -> 📚 **学习策略**：别试图背文档——学会高效查阅才是关键。收藏常用参考文档，练习使用搜索功能快速找到具体信息。 +> 📚 学习策略：别试图死记文档，学会高效浏览才重要。收藏常用文档，多练习用搜索功能快速找到所需信息。 -### 🔧 **工具掌握检测：你最有兴趣是什么？** +### 🔧 **工具掌握度自测：你最共鸣的是？** -**花点时间思考：** -- 你最想先尝试哪个工具？（没有错误答案！） -- 命令行还觉得可怕吗，还是开始好奇了？ -- 你能想象用浏览器 DevTools 探秘你喜欢的网站幕后吗？ +**花点时间想想：** +- 你最想先试哪个工具？（答案无对错！） +- 命令行还让你害怕吗，还是渐渐好奇了？ +- 你能想象用浏览器 DevTools 去窥探你最喜欢网站的“幕后”吗？ ```mermaid -pie title "开发者使用工具的时间分配" +pie title "开发者使用工具所花费的时间" "代码编辑器" : 40 "浏览器测试" : 25 "命令行" : 15 "阅读文档" : 15 "调试" : 5 -``` -> **趣味见解**：大多数开发者约40%的时间在代码编辑器，但留心有多少时间用于测试、学习和解决问题。编程不仅是写代码——更是创造体验！ +``` +> 有趣的见解：多数开发者约 40% 时间花在代码编辑器里，但更多时间用于测试、学习和解决问题。编程不仅是写代码，更是打造体验！ -✅ **思考素材**：来点有意思的——你觉得用来构建网站（开发）的工具和设计外观（设计）的工具会有何不同？这就像设计漂亮房子的建筑师和真正盖房子的承包商的区别。两者都很重要，但需要不同的工具箱！这样的思维能帮你更好理解网站诞生的全貌。 +✅ 思考点：思考一个有趣问题——构建网站的工具（开发）和设计网站外观的工具（设计）可能有什么不同？就像建筑师设计漂亮房子和承包商真正建造一样。两者都关键，但需要不同的工具箱！这种思路能帮你更好理解网站诞生的全貌。 ## GitHub Copilot Agent 挑战 🚀 -用 Agent 模式完成以下挑战： +使用 Agent 模式完成以下挑战： -**描述：** 探索现代代码编辑器或 IDE 的功能，演示它如何提升你作为 Web 开发者的工作流程。 +**描述：** 探索现代代码编辑器或 IDE 的功能，展示它如何提升你作为网页开发者的工作流程。 -**提示：** 选择一个代码编辑器或 IDE（如 Visual Studio Code、WebStorm 或云端 IDE）。列出三个能帮助你更高效编写、调试或维护代码的功能或扩展。并简述它们如何助益你的工作流程。 +**提示：** 选择一个代码编辑器或 IDE（如 Visual Studio Code、WebStorm 或云端 IDE）。列出三个帮助你更高效编写、调试或维护代码的功能或扩展。简要说明它们对你工作流程的好处。 --- ## 🚀 挑战 -**好了，侦探，准备好迎接你的第一个案件了吗？** +**好了，侦探，准备好接第一单案子吗？** -既然打下了坚实基础，这次冒险会帮你看到编程世界多么丰富多彩又迷人。听好了——这次不用立刻写代码，别有压力！把自己当作编程语言的侦探，开启令人兴奋的首次侦察任务！ +既然你已经打下了坚实基础，这次冒险将帮助你认识编程世界多么丰富多彩、有趣。而且听着——这还不是写代码的时候，完全无压力！把你当作编程语言侦探，踏上第一单激动人心的案件！ -**你的任务，如果接受的话：** -1. **成为语言探险者**：选择三个完全来自不同领域的编程语言——比如一个做网站的，一个做手机应用的，一个做科学数据分析的。找出用这三种语言做相同简单任务的示例。我保证你会惊讶于它们虽然目的相同，但写法差异巨大！ +**你的任务，如果你愿意接受：** +1. 成为语言探索者：选三种来自完全不同领域的编程语言——也许一个用于建网站，一个做移动应用，另一个助科学家分析数据。找到每种语言写的同一简单任务示例。我保证你会惊叹它们虽然做同样事，却长得多么不一样！ +2. 挖掘起源故事：每种语言有什么特别之处？有个酷事实——每种语言诞生，都是因为有人想：“解决这个问题一定有更好方式。”你能找出那个问题是什么吗？这些故事往往非常有趣！ +3. 见见社区：看看每种语言社区多么热情友好。有的有数百万开发者互帮互助，有的虽小但紧密团结。你会喜欢了解这些社区各自的个性！ +4. 跟随直觉：哪种语言现在看起来最容易上手？别急着找“完美”答案——相信你的直觉！真的没有错误答案，而且你以后可以随时探索其他语言。 -2. **揭秘它们的起源**：每种语言有什么特别之处？有个有趣的事实——每种语言诞生都是有人想，“嗯，我觉得一定有更好的方式解决这个特定问题。”你能搞清那些问题是什么吗？其中一些故事真很有趣！ +额外侦探任务：看看能否发现哪些主流网站或应用用每种语言开发。我保证你会被 Instagram、Netflix 或那个让你停不下来的手游背后的技术震惊！ -3. **认识社区**：看看每种语言的社区有多热情友好。有的有百万开发者分享知识互帮互助，有的虽小但紧密支持。你一定会喜欢观察这些社区的不同“性格”！ +> 💡 记住：你今天不是要成为这些语言专家，只是在决定“落脚点”前先逛逛附近。放轻松，玩得开心，让好奇心带路！ -4. **跟随直觉**：现在哪个语言最让你觉得容易接近？别纠结“完美”选择——听听内心声音！真的没有错，反正以后还可以探索其他的。 +## 来庆祝你的新发现吧！ -**额外侦探任务**：试试看能不能发现每种语言支撑着哪些大型网站或应用。我敢打赌你会震惊 Instagram、Netflix，甚至那个让你停不下来的手机游戏都是用什么做的！ - -> 💡 **记住**：今天你不用成为任何语言的专家。你只是在熟悉环境，为选址打基础。慢慢来，玩得开心，让好奇心带路！ - -## 一起庆祝你的发现吧！ - -哇哦，今天的信息量太惊人了！我真心期待看到你记住了多少这段奇妙旅程。记住——这不是考试，不需要一切完美。这更像是庆祝你对即将进入的迷人世界学到的所有酷知识！ +天哪，你今天吸收了这么多不可思议的信息！我真的很兴奋看到你对这段精彩旅程的理解。记住——这不是必须完全正确的测试，而是庆祝你对这个迷人世界学到的所有酷知识的时刻！ [参加课后测验](https://ff-quizzes.netlify.app/web/) ## 复习与自学 **慢慢探索，玩得开心！** -你今天已经学习了很多内容，这值得你骄傲！现在迎来有趣的部分——探索那些激发你好奇心的话题。记住，这不是作业——而是一场冒险！ +你今天已经学了很多东西，这值得你骄傲！现在有趣的部分来了——探索那些激发你好奇心的主题。记住，这不是作业——而是一场冒险！ **深入探索让你兴奋的内容：** **动手体验编程语言：** -- 访问你感兴趣的2-3种语言的官方网站。每种语言都有自己独特的个性和故事！ -- 试试在线编码游乐场，比如 [CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/) 或 [Replit](https://replit.com/)。别害怕试验——你不会弄坏任何东西的！ -- 阅读你喜欢的语言的诞生故事。真的，有些起源故事非常吸引人，有助于你理解语言为何这么设计。 +- 访问你感兴趣的2-3个编程语言的官方网站。每种语言都有自己独特的个性和故事！ +- 试试一些在线编码平台，比如 [CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/) 或 [Replit](https://replit.com/)。不要害怕尝试——你不会破坏任何东西！ +- 阅读你喜欢的编程语言是如何诞生的。真的，有些起源故事非常有趣，能帮助你理解语言为什么会以这样的方式运作。 **熟悉你的新工具：** -- 如果你还没下载 Visual Studio Code，赶紧下载吧——它是免费的，你一定会喜欢！ -- 花几分钟浏览扩展市场。它就像你的代码编辑器的应用商店！ -- 打开浏览器的开发者工具，随便点击浏览。别担心完全理解——先熟悉下里面的内容。 +- 如果还没下载 Visual Studio Code，赶快下载吧——它是免费的，你会喜欢它的！ +- 花几分钟浏览一下扩展市场。它就像你的代码编辑器的应用商店！ +- 打开浏览器的开发者工具，随便点点。别担心马上理解所有东西——先熟悉它们的存在就好。 **加入社区：** -- 关注一些开发者社区，比如 [Dev.to](https://dev.to/)、[Stack Overflow](https://stackoverflow.com/) 或 [GitHub](https://github.com/)。编程社区非常欢迎新人！ -- 在 YouTube 上观看一些适合初学者的编程视频。很多优秀的创作者都记得刚开始时的感觉。 -- 考虑参加线下聚会或加入线上社区。相信我，开发者们很乐于帮助新人！ - -> 🎯 **听着，我希望你记住这点**：你不必一夜之间变成编程高手！现在，你只是刚开始了解你即将加入的这个精彩世界。慢慢来，享受这段旅程，记住——每个你敬佩的开发者，曾经也坐在你现在的位置上，既兴奋又可能有点不知所措。这完全正常，也说明你正在正确地前进！ +- 关注一些开发者社区，比如 [Dev.to](https://dev.to/)、[Stack Overflow](https://stackoverflow.com/) 或 [GitHub](https://github.com/)。编程社区对新人非常友好！ +- 在 YouTube 上观看一些适合初学者的编程视频。有很多优秀的创作者会记得刚开始时的感受。 +- 考虑参加本地聚会或加入线上社区。相信我，开发者们很乐意帮助新手！ +> 🎯 **听着，我希望你记住的是**：你不需要一夜之间成为编程高手！现在，你只是开始认识你即将加入的这个惊奇世界。慢慢来，享受这段旅程，记住——每一个你崇拜的开发者，都曾坐在你的位置上，感到既兴奋又有点不知所措。这完全正常，意味着你走在正确的路上！ -## 作业 +## 任务 [Reading the Docs](assignment.md) -> 💡 **作业小提示**：我真心希望看到你探索一些我们还没提过的工具！跳过我们讲过的编辑器、浏览器和命令行工具——外面有一整个令人惊叹的开发工具宇宙正待你发现。寻找那些活跃维护且拥有充满活力、乐于助人的社区的工具（这些通常有最好的教程，当你遇到困难需要帮助时人们也非常友好）。 +> 💡 给你任务的小提示：我非常希望看到你去探索一些我们还没涉及过的工具！跳过我们已经讨论过的编辑器、浏览器和命令行工具——外面有一整个令人惊叹的开发工具世界等待你去发现。挑选那些活跃维护且拥有活跃帮助社区的工具（通常这些工具有最棒的教程，以及当你卡住时最乐于助人的人群）。 --- -## 🚀 你的编程之旅时间表 +## 🚀 你的编程旅程时间表 -### ⚡ **接下来5分钟你可以做什么** +### ⚡ **接下来5分钟你可以做的事** - [ ] 收藏2-3个引起你兴趣的编程语言网站 - [ ] 如果还没下载，安装 Visual Studio Code -- [ ] 打开浏览器开发者工具（F12），在任意网站随便点点 -- [ ] 加入一个编程社区（Dev.to、Reddit r/webdev 或 Stack Overflow） - -### ⏰ **这小时你能完成什么** -- [ ] 完成课后测验并回顾你的答案 -- [ ] 在 VS Code 中安装 GitHub Copilot 扩展 -- [ ] 在线试着用2种不同编程语言写一个“Hello World”示例 -- [ ] 观看YouTube上一段“开发者的一天”视频 -- [ ] 开始你的编程语言侦探之旅（来自挑战部分） - -### 📅 **你的一周冒险计划** -- [ ] 完成作业，并探索3个新的开发工具 -- [ ] 在社交媒体上关注5位开发者或编程账号 -- [ ] 在CodePen或Replit尝试做点小东西（甚至只是“Hello，[你的名字]！”） -- [ ] 阅读一篇开发者博客，讲述某人的编程历程 +- [ ] 打开浏览器的开发者工具（F12），随意浏览任何网站 +- [ ] 加入一个编程社区（Dev.to、Reddit r/webdev，或 Stack Overflow） + +### ⏰ 这一小时你可以完成的任务 +- [ ] 完成课后测验并反思你的答案 +- [ ] 配置 VS Code，安装 GitHub Copilot 扩展 +- [ ] 在线尝试用两种不同的编程语言写一个“Hello World”示例 +- [ ] 在 YouTube 上观看一条“开发者的一天”视频 +- [ ] 开始你的编程语言侦探之旅（挑战内容） + +### 📅 你的一周冒险计划 +- [ ] 完成任务并探索3个新的开发工具 +- [ ] 关注5位开发者或编程账号的社交媒体 +- [ ] 在 CodePen 或 Replit 上尝试做点小东西（哪怕只是“Hello, [你的名字]！”） +- [ ] 阅读一篇开发者博客，了解他们的编程历程 - [ ] 参加一次线上聚会或观看一次编程讲座 -- [ ] 用在线教程开始学习你选择的语言 +- [ ] 开始用在线教程学习你选择的语言 -### 🗓️ **你一个月的转变计划** -- [ ] 搭建你的第一个小项目（简单网页也算！） -- [ ] 为开源项目贡献代码（从文档修正开始） +### 🗓️ 你一个月的转变 +- [ ] 构建你的第一个小项目（即使是一个简单的网页也算！） +- [ ] 参与开源项目（从文档修正开始） - [ ] 指导一个刚开始编程的人 -- [ ] 创建你的开发者作品集网站 -- [ ] 与本地开发者社区或学习小组建立联系 -- [ ] 开始规划你的下一个学习里程碑 +- [ ] 创建你的开发者个人网站作品集 +- [ ] 连接本地的开发者社区或学习小组 +- [ ] 开始规划你的下一个学习目标 -### 🎯 **最终反思检查** +### 🎯 最终反思检查 -**继续之前，花点时间庆祝一下：** -- 今天编程中，哪一点最让你兴奋？ +**在前进之前，花点时间庆祝一下：** +- 今天让你对编程感到兴奋的是什么？ - 你最想先探索哪个工具或概念？ -- 你对开始这段编程之旅感觉如何？ -- 你现在最想问一个开发者什么问题？ +- 你对开始这段编程旅程的感觉如何？ +- 你现在最想问开发者的一个问题是什么？ ```mermaid journey - title 你的自信建立之旅 + title 你的自信心建设之旅 section 今天 好奇: 3: You - 不堪重负: 4: You + 不知所措: 4: You 兴奋: 5: You - section 这周 + section 本周 探索: 4: You 学习: 5: You 连接: 4: You @@ -846,11 +839,11 @@ journey 自信: 5: You 帮助他人: 5: You ``` -> 🌟 **记住**：每一个专家曾经都是初学者。每一个资深开发者曾经都像你现在这样——既兴奋，可能有点压力，但绝对好奇未来可能会有的精彩。你处在非凡的群体中，这段旅程将会非常精彩。欢迎来到奇妙的编程世界！🎉 +> 🌟 记住：每个专家曾经都是新手。每个高级开发者曾经和你现在一样——兴奋，也许有点不知所措，当然还有对可能性的好奇。你现在处于一个了不起的大家庭中，这段旅程将会令人难以置信。欢迎来到奇妙的编程世界！ 🎉 --- **免责声明**： -本文件由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/zh-CN/AGENTS.md b/translations/zh-CN/AGENTS.md index fed0bdcb9..eb9ec4d42 100644 --- a/translations/zh-CN/AGENTS.md +++ b/translations/zh-CN/AGENTS.md @@ -2,27 +2,27 @@ ## 项目概述 -这是一个面向初学者教授网页开发基础知识的教育课程仓库。该课程是由微软云推广者开发的为期12周的综合课程，包含24个涵盖JavaScript、CSS和HTML的实践课程。 +这是一个面向初学者教授网页开发基础知识的教育课程仓库。该课程是由微软云推广人员开发的为期12周的综合课程，包含24个涵盖JavaScript、CSS和HTML的实践课程。 ### 关键组成部分 -- **教育内容**：24节结构化课程，按项目模块组织 -- **实践项目**：生态瓶项目、打字游戏、浏览器扩展、太空游戏、银行应用、代码编辑器及 AI 聊天助手 -- **互动测验**：48个测验，每个3个问题（课前/课后评估） -- **多语言支持**：通过 GitHub Actions 自动翻译为50多种语言 -- **技术栈**：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（用于 AI 项目） +- 教育内容：24个结构化课程，按项目模块组织 +- 实用项目：生态瓶、打字游戏、浏览器扩展、太空游戏、银行应用、代码编辑器和AI聊天助手 +- 互动测验：48个测验，每个含3个问题（课前/课后评估） +- 多语言支持：通过GitHub Actions实现50多种语言的自动翻译 +- 技术栈：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（用于AI项目） ### 架构 - 以课程为基础结构的教育仓库 -- 每节课程文件夹包含 README、代码示例和解决方案 -- 独立项目存放在单独目录中（quiz-app、各种课程项目） -- 使用 GitHub Actions（co-op-translator）实现翻译系统 -- 文档通过 Docsify 提供，并可导出为 PDF +- 每个课程文件夹包含README、代码示例和解决方案 +- 独立项目位于单独目录（quiz-app，各种课程项目） +- 使用GitHub Actions的翻译系统（co-op-translator） +- 通过Docsify提供文档并支持PDF格式 -## 设置命令 +## 安装命令 -此仓库主要用于教育内容的学习。针对特定项目的操作： +该仓库主要用于学习内容使用。对于特定项目的使用： ### 主仓库设置 @@ -37,11 +37,11 @@ cd Web-Dev-For-Beginners cd quiz-app npm install npm run dev # 启动开发服务器 -npm run build # 生产环境构建 +npm run build # 构建生产环境 npm run lint # 运行 ESLint ``` -### 银行项目 API（Node.js + Express） +### 银行项目API（Node.js + Express） ```bash cd 7-bank-project/api @@ -64,10 +64,10 @@ npm install ```bash cd 6-space-game/solution npm install -# 在浏览器中打开 index.html 或使用实时服务器 +# 在浏览器中打开 index.html 或使用 Live Server ``` -### 聊天项目（Python 后端） +### 聊天项目（Python后端） ```bash cd 9-chat-project/solution/backend/python @@ -76,33 +76,33 @@ pip install openai python api.py ``` -## 开发工作流程 +## 开发流程 -### 内容贡献者 +### 对内容贡献者 -1. **Fork 仓库**到你的 GitHub 账户 -2. **克隆你的 Fork**到本地 -3. **创建新的分支**进行更改 +1. Fork该仓库到你的GitHub账户 +2. 克隆你的Fork到本地 +3. 创建新分支进行更改 4. 修改课程内容或代码示例 -5. 在相关项目目录测试代码修改 -6. 提交符合贡献指南的拉取请求 +5. 在相关项目目录测试代码更改 +6. 根据贡献指南提交Pull Request -### 学习者 +### 对学习者 -1. Fork 或克隆仓库 -2. 按顺序浏览课程目录 -3. 阅读每节课程的 README 文件 -4. 在 https://ff-quizzes.netlify.app/web/ 完成课前测验 +1. Fork或克隆仓库 +2. 按顺序进入课程目录 +3. 阅读各课程README文件 +4. 访问 https://ff-quizzes.netlify.app/web/ 完成课前测验 5. 完成课程文件夹中的代码示例 6. 完成作业和挑战 7. 参加课后测验 ### 实时开发 -- **文档**：在根目录运行 `docsify serve`（端口3000） -- **测验应用**：在 quiz-app 目录运行 `npm run dev` -- **项目**：使用 VS Code Live Server 扩展运行 HTML 项目 -- **API 项目**：在对应 API 目录运行 `npm start` +- 文档：在根目录运行 `docsify serve`（端口3000） +- 测验应用：在quiz-app目录运行 `npm run dev` +- 项目：HTML项目使用VS Code Live Server扩展 +- **API项目**：在相应API目录运行 `npm start` ## 测试说明 @@ -114,93 +114,93 @@ npm run lint # 检查代码风格问题 npm run build # 验证构建是否成功 ``` -### 银行 API 测试 +### 银行API测试 ```bash cd 7-bank-project/api npm run lint # 检查代码风格问题 -node server.js # 验证服务器启动无错误 +node server.js # 验证服务器启动是否无错误 ``` -### 一般测试方法 +### 常规测试方法 -- 这是教育仓库，无全面自动测试 +- 这是一个教育用仓库，没有全面的自动化测试 - 手动测试重点： - 代码示例无错误运行 - - 文档链接正确 - - 项目构建成功 - - 示例符合最佳实践 + - 文档中的链接正常 + - 项目能成功构建 + - 示例遵循最佳实践 ### 提交前检查 -- 在包含 package.json 的目录运行 `npm run lint` -- 验证 markdown 链接有效 -- 浏览器或 Node.js 中测试代码示例 -- 确认翻译结构无误 +- 在含package.json的目录运行 `npm run lint` +- 验证markdown链接有效 +- 在浏览器或Node.js中测试代码示例 +- 确保翻译保持正确结构 ## 代码风格指南 ### JavaScript -- 使用现代 ES6+ 语法 -- 遵循项目提供的标准 ESLint 配置 -- 使用有意义的变量名和函数名，便于教学 -- 添加注释解释概念，方便学习者 -- 按配置使用 Prettier 格式化 +- 使用现代ES6+语法 +- 遵守项目中标准的ESLint配置 +- 变量和函数命名有意义，便于教学理解 +- 添加注释解释概念，帮助学习者 +- 在配置处使用Prettier格式化 ### HTML/CSS -- 使用语义化 HTML5 元素 +- 使用语义化HTML5元素 - 响应式设计原则 - 清晰的类命名规范 -- 使用注释解释 CSS 技巧，便于理解 +- 注释说明CSS技术，方便学习者理解 ### Python -- 遵循 PEP 8 规范 -- 提供清晰易懂的代码示例 -- 在有助学习的地方使用类型提示 +- 遵循PEP 8风格指南 +- 提供清晰、易懂的示例代码 +- 需要时添加类型提示以辅助学习 -### Markdown 文档 +### Markdown文档 -- 清晰的标题层级 -- 代码块指定语言 -- 链接附带额外资源 -- 在 `images/` 目录中存放截图和图片 -- 图片附带 alt 文本便于无障碍访问 +- 清晰的标题层级结构 +- 带语言标注的代码块 +- 链接额外资源 +- `images/`目录下的截图和图片 +- 图片配备辅助访问的alt文字 ### 文件组织 -- 课程按照数字顺序编号（1-getting-started-lessons，2-js-basics 等） -- 每个项目包含 `solution/` 及通常的 `start/` 或 `your-work/` 目录 -- 图片存放在对应课程的 `images/` 文件夹 -- 翻译文件存放结构为 `translations/{language-code}/` +- 课程按顺序编号（1-getting-started-lessons，2-js-basics等） +- 每个项目有 `solution/`，通常还有 `start/` 或 `your-work/` 目录 +- 图片保存在各课程对应的 `images/` 文件夹 +- 翻译文件存放在 `translations/{语言代码}/` 结构下 ## 构建与部署 -### 测验应用部署（Azure 静态网页应用） +### 测验应用部署（Azure静态网页应用） -quiz-app 已配置为 Azure 静态网页应用部署： +quiz-app配置为Azure静态网页应用部署： ```bash cd quiz-app npm run build # 创建 dist/ 文件夹 -# 通过 GitHub Actions 工作流在推送到 main 时部署 +# 在推送到 main 时通过 GitHub Actions 工作流部署 ``` -Azure 静态网页应用配置： -- **应用位置**：`/quiz-app` -- **输出位置**：`dist` -- **工作流**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +Azure静态网页应用配置： +- 应用位置：`/quiz-app` +- 输出位置：`dist` +- 工作流：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### 文档 PDF 生成 +### 文档PDF生成 ```bash npm install # 安装 docsify-to-pdf -npm run convert # 从 docs 生成 PDF +npm run convert # 从文档生成 PDF ``` -### Docsify 文档 +### Docsify文档 ```bash npm install -g docsify-cli # 全局安装 Docsify @@ -210,74 +210,71 @@ docsify serve # 在 localhost:3000 上提供服务 ### 项目特定构建 各项目目录可能有自己的构建流程： -- Vue 项目：`npm run build` 生成生产包 +- Vue项目：`npm run build`生成生产包 - 静态项目：无构建步骤，直接提供文件 -## 拉取请求指南 +## Pull Request指引 ### 标题格式 -使用明确描述更改范围的标题： -- `[Quiz-app] 为第 X 课添加新测验` -- `[Lesson-3] 修正生态瓶项目中的拼写错误` -- `[Translation] 添加第5课的西班牙语翻译` -- `[Docs] 更新安装说明` +使用清晰且描述性标题表明变更范围： +- `[Quiz-app] 添加第X课新测验` +- `[Lesson-3] 修正生态瓶项目中的错别字` +- `[Translation] 添加第5课西班牙语翻译` +- `[Docs] 更新设置说明` -### 必须检查项 +### 提交前必需检查 -提交 PR 前： +1. 代码质量： + - 在涉及的项目目录执行 `npm run lint` + - 修复所有lint错误和警告 -1. **代码质量**： - - 在受影响项目目录运行 `npm run lint` - - 修复所有 lint 错误和警告 - -2. **构建验证**： +2. 构建验证： - 如适用，运行 `npm run build` - 确保无构建错误 -3. **链接验证**： - - 测试所有 markdown 链接 - - 确认图片引用有效 +3. 链接校验： + - 测试所有markdown链接 + - 确认图片引用正常 -4. **内容审核**： - - 校对拼写和语法 - - 确保代码示例正确且有教育意义 - - 核实翻译保持原意 +4. 内容校对： + - 校查拼写及语法 + - 确认代码示例正确且具有教学意义 + - 验证翻译保持原意 ### 贡献要求 -- 同意微软 CLA（首次 PR 自动检查） -- 遵守 [微软开源行为准则](https://opensource.microsoft.com/codeofconduct/) -- 详见 [CONTRIBUTING.md](./CONTRIBUTING.md) 指南 -- PR 描述中引用相关 issue（如有） +- 同意微软CLA（首次PR时自动检查） +- 遵守[微软开源行为准则](https://opensource.microsoft.com/codeofconduct/) +- 详见[CONTRIBUTING.md](./CONTRIBUTING.md)获取细节指南 +- PR描述中引用相关issue编号（如有） -### 审查流程 +### 审核流程 -- PR 由维护者和社区审核 -- 优先保证教育清晰度 -- 代码示例应遵循当前最佳实践 -- 翻译审核准确且符合文化背景 +- PR由维护者和社区审核 +- 重点确保教育内容清晰 +- 代码示例需遵循当前最佳实践 +- 审核翻译准确性和文化适宜性 ## 翻译系统 ### 自动翻译 -- 利用 GitHub Actions 和 co-op-translator 工作流 +- 采用GitHub Actions 和 co-op-translator工作流 - 自动翻译成50多种语言 -- 源文件位于主目录 -- 翻译文件保存在 `translations/{language-code}/` 目录 +- 源文件在主目录 +- 翻译文件置于 `translations/{语言代码}/` 目录 -### 添加手动翻译改进 +### 手动翻译改进 -1. 定位到 `translations/{language-code}/` 目录文件 -2. 在保持结构的情况下进行改进 +1. 找到 `translations/{语言代码}/` 目录下的文件 +2. 保持结构完成改进 3. 确保代码示例功能正常 4. 测试本地化测验内容 ### 翻译元数据 翻译文件包含元数据头： - ```markdown ``` -## 调试与故障排除 +## 调试与故障排查 ### 常见问题 -**测验应用无法启动**： -- 检查 Node.js 版本（建议 v14+） +测验应用启动失败： +- 检查Node.js版本（推荐v14+） - 删除 `node_modules` 和 `package-lock.json`，重新运行 `npm install` -- 检查端口冲突（默认：Vite 使用5173端口） +- 检查端口冲突（默认：Vite使用端口5173） -**API 服务器无法启动**： -- 确认 Node.js 版本符合最低要求（node >=10） +**API服务器无法启动**： +- 确认Node.js版本满足最低要求（node >=10） - 检查端口是否被占用 -- 确保依赖已通过 `npm install` 安装 +- 确认所有依赖安装完成（`npm install`） -**浏览器扩展无法加载**： -- 确认 manifest.json 格式正确 +浏览器扩展无法加载： +- 检查manifest.json格式正确 - 查看浏览器控制台错误 -- 按照浏览器特定扩展安装说明操作 +- 遵守浏览器特有的扩展安装说明 -**Python 聊天项目问题**： -- 确保安装 OpenAI 包：`pip install openai` -- 确认 GITHUB_TOKEN 环境变量已设置 -- 检查 GitHub Models 访问权限 +**Python聊天项目问题**： +- 确保安装OpenAI包：`pip install openai` +- 确认设置GITHUB_TOKEN环境变量 +- 检查GitHub Models访问权限 -**Docsify 未能提供文档**： -- 全局安装 docsify-cli：`npm install -g docsify-cli` -- 在仓库根目录运行 +**Docsify未能提供文档**： +- 全局安装docsify-cli：`npm install -g docsify-cli` +- 从仓库根目录运行 - 确认存在 `docs/_sidebar.md` -### 开发环境建议 +### 开发环境提示 -- 使用带 Live Server 扩展的 VS Code 运行 HTML 项目 -- 安装 ESLint 和 Prettier 扩展保持一致格式 -- 利用浏览器开发工具调试 JavaScript -- Vue 项目安装 Vue DevTools 浏览器扩展 +- 使用VS Code并结合Live Server扩展运行HTML项目 +- 安装ESLint和Prettier扩展保持格式一致 +- 利用浏览器开发者工具调试JavaScript +- Vue项目安装Vue DevTools浏览器扩展 -### 性能考虑 +### 性能注意事项 -- 多语言（50+）翻译文件数量大，全量克隆较大 -- 只处理内容时可使用浅克隆：`git clone --depth 1` -- 在处理英文内容时排除翻译目录搜索 -- 初次运行（npm install、Vite 构建）可能较慢 +- 多语言翻译文件数量众多（50+），完全克隆体积较大 +- 若仅处理内容，使用浅克隆：`git clone --depth 1` +- 处理英文内容时排除翻译文件搜索 +- 构建过程首次运行可能较慢（npm install，Vite构建） ## 安全注意事项 ### 环境变量 -- API 密钥绝不可提交到仓库 -- 使用 `.env` 文件（已列入 `.gitignore`） -- 在项目 README 中记录必需的环境变量 +- API密钥绝不提交到仓库 +- 使用 `.env` 文件（已加入 `.gitignore`） +- 在项目README中记录必需环境变量 -### Python 项目 +### Python项目 - 使用虚拟环境：`python -m venv venv` - 保持依赖更新 -- GitHub 令牌应具备最小权限 +- GitHub令牌需仅授予最小必要权限 -### GitHub Models 访问 +### GitHub Models访问 -- 需要个人访问令牌 (PAT) -- 令牌应存储为环境变量 -- 切勿提交令牌或凭证 +- 需个人访问令牌（PAT） +- 令牌作为环境变量存储 +- 绝不提交令牌或凭据 ## 其他说明 ### 目标受众 -- 完全的网页开发初学者 -- 学生及自学者 -- 在课堂使用课程的教师 -- 内容针对无障碍和逐步技能提升设计 +- 完全零基础网页开发者 +- 学生和自学者 +- 在课堂中使用本课程的教师 +- 内容设计注重无障碍及技能渐进提升 ### 教育理念 - 基于项目的学习方法 - 频繁知识检测（测验） -- 实践编码练习 -- 真实场景应用示例 -- 强调基础知识，先于框架学习 +- 实践编程练习 +- 真实应用案例 +- 先打好基础核心，再学习框架 ### 仓库维护 - 活跃的学习者和贡献者社区 - 定期更新依赖和内容 -- 维护者监控 issue 和讨论 -- 通过 GitHub Actions 自动更新翻译 +- 维护者持续监控问题和讨论 +- 翻译更新通过GitHub Actions自动化 ### 相关资源 -- [Microsoft Learn 模块](https://docs.microsoft.com/learn/) +- [微软Learn模块](https://docs.microsoft.com/learn/) - [学生中心资源](https://docs.microsoft.com/learn/student-hub/) -- 推荐学习者使用 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) -- 额外课程：生成式 AI、数据科学、机器学习、物联网课程可用 +- 推荐学习者使用[GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) +- 还有生成式AI、数据科学、机器学习、物联网课程可选 -### 特定项目操作指南 +### 特定项目使用 -查看以下 README 获取详细项目说明： -- `quiz-app/README.md` - Vue 3 测验应用 +详见项目README： +- `quiz-app/README.md` - Vue 3测验应用 - `7-bank-project/README.md` - 带身份验证的银行应用 - `5-browser-extension/README.md` - 浏览器扩展开发 -- `6-space-game/README.md` - 基于 Canvas 的游戏开发 -- `9-chat-project/README.md` - AI 聊天助手项目 +- `6-space-game/README.md` - Canvas画布游戏开发 +- `9-chat-project/README.md` - AI聊天助手项目 -### 单体仓库结构 +### Monorepo结构 -虽非传统单体仓库，本仓库包含多个独立项目： -- 每节课程自包含 +虽然不是传统的monorepo，该仓库包含多个独立项目： +- 每个课程独立自成体系 - 项目之间不共享依赖 -- 可独立开发项目，互不影响 -- 克隆完整仓库可体验全课程 +- 可单独开发项目不影响其他 +- 克隆整个仓库体验完整课程体系 --- -**免责声明**： -本文件由 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