تعلم برمجة المواقع🚀
6.64K subscribers
55 photos
2 videos
19 files
545 links
قناة للبرمجة والمبرمجين ...
تحتوي على مقالات للمبرمجين.
كتب وملفات pdf مجانية للمبرمجين.
نصائح للمبتدئين والمحترفين في البرمجة ...
أفضل الدورات في مجال البرمجة مجانا..
Download Telegram
من أفضل التقنيات المطلوبة في سوق العمل دورة شاملة لتعلم مكتبة رياكت من تحت الصفر إلى الاحتراف 🔥🔥

https://youtube.com/playlist?list=PLpr1Lg_f0v3ojNKR4WzZ_SEXhiKBHDQmB&si=xvO008Gn5fz2xQA1
🔥3👍2
ما هي بيئة التطوير المتكاملة (IDE)؟
بيئة التطوير المتكاملة (IDE) هي تطبيق برمجي يوفر للمبرمجين أدوات شاملة لتطوير البرمجيات. تتضمن IDE عادةً محرر شيفرات برمجية، مصحح أخطاء (Debugger)، أدوات بناء (Build Tools)، وميزات لإدارة المشاريع. يهدف IDE إلى تسهيل عملية البرمجة من خلال توفير بيئة متكاملة تساعد المبرمجين في كتابة الشيفرة، تصحيح الأخطاء، وتجميع التطبيقات.
ومن اشهر بيئات العمل الموجودة والمتعارف عليها عند المطورين :

1- VSCode :

مفتوح المصدر ومجاني: يمكن للجميع استخدامه وتعديله.
دعم للغات متعددة: يدعم لغات برمجة متعددة مثل JavaScript, Python, C++, PHP، وغيرها.

الإضافات (Extensions): مكتبة ضخمة من الإضافات التي تزيد من وظائفه وتدعم أدوات تطوير متعددة.
تصحيح الأخطاء (Debugging): يحتوي على أدوات قوية لتصحيح الأخطاء.
تكامل مع Git: دعم مدمج لأنظمة التحكم في الإصدار مثل Git.

الاستخدامات:
تطوير تطبيقات الويب.
تطوير تطبيقات الهواتف المحمولة.
تطوير البرمجيات المكتبية.
رابط التحميل : https://code.visualstudio.com/

2- IntelliJ IDEA :

ذكي وذو كفاءة عالية: يقدم ميزات متقدمة مثل إكمال الشيفرة التلقائي (Auto Complete) والتحليل الذكي للأكواد.

دعم للغات متعددة: يدعم لغات مثل Java, Kotlin, Groovy, Scala، وغيرها.
أدوات مدمجة: يحتوي على أدوات لتكامل البناء، تشغيل التطبيقات، وتصحيح الأخطاء.

تكامل مع أدوات إدارة المشاريع: يدعم تكاملًا مباشرًا مع Maven, Gradle، وغيرها.

الاستخدامات:
تطوير تطبيقات Java.
تطوير تطبيقات Android.
تطوير تطبيقات الويب والمكتبية.
رابط التحميل :https://www.jetbrains.com/idea/download/?section=windows

3- PyCharm

خصص في لغة Python: مصمم خصيصًا لتطوير تطبيقات Python.

إكمال الشيفرة التلقائي: يوفر ميزة إكمال الشيفرة الذكي وتلميحات الأكواد.

أدوات مدمجة: يحتوي على أدوات لتصحيح الأخطاء وإدارة قواعد البيانات.
تكامل مع أدوات تطوير الويب: يدعم تكاملًا مع أدوات مثل Django و Flask.

الاستخدامات:
تطوير تطبيقات Python.
تطوير تطبيقات الويب باستخدام Django و Flask.
تحليل البيانات ومعالجة النصوص.
رابط التحميل :https://www.jetbrains.com/pycharm/download/?section=windows

4-Android Studio
خصص في تطوير تطبيقات Android: بيئة تطوير متكاملة مخصصة لتطوير تطبيقات Android باستخدام Java أو Kotlin أو Flutter.

مصمم واجهات مستخدم: يحتوي على مصمم واجهات GUI .

أدوات تصحيح الأخطاء: أدوات قوية لتصحيح الأخطاء وتحليل الأداء.

تكامل مع خدمات Google: يدعم تكاملًا مباشرًا مع خدمات Google .

الاستخدامات:
تطوير تطبيقات Android.
تحليل وتحسين أداء التطبيقات.
تصميم واجهات مستخدم لتطبيقات Android.
رابط التحميل:https://developer.android.com/studio

5-Xcode

تخصص في تطوير تطبيقات iOS و macOS: بيئة تطوير متكاملة مخصصة لتطوير تطبيقات Apple المكتوبة بلغة Swift او C.

مصمم واجهات مستخدم: يحتوي على مصمم واجهات GUI.

أدوات تصحيح الأخطاء: أدوات قوية لتصحيح الأخطاء وتحليل الأداء.

محاكي iOS مدمج: يحتوي على محاكي لاختبار التطبيقات على أجهزة iOS.

الاستخدامات:
تطوير تطبيقات iOS.
تطوير تطبيقات macOS.
تصميم واجهات مستخدم لتطبيقات Apple.

ولا يعمل الا على اجهزة Apple

تعتمد أفضل بيئة تطوير متكاملة (IDE) للمبرمجين على نوع المشاريع التي يعملون عليها ولغات البرمجة التي يستخدمونها. سواء كنت تعمل على تطوير تطبيقات الويب، تطبيقات الهواتف المحمولة، أو البرمجيات المكتبية،  اختر ما يناسبك وابدأ بالقيام بما هو صحيح .
🔥43👍2
📌نصائح للمبتدئين بمجال FrontEnd 👨‍💻

ابدأ بتعلم كيف يعمل الويب Web .
ابدأ وتعلم HTML و CSS جيدا .
لاتتعلم اطر العمل Bootstrap  و Tailwind قبل معرفتك ل CSS .

استخدم أطر العمل مثل React و Next Js لانها تسهل وتختصر عليك الكثير من الوقت  

لاتنسى الاهتمام بمعرض اعمالك
🔥62👍2
7 أدوات ل Frontend  لتصبح مطورًا أفضل

1- Uiverse
عبارة عن منصة مفتوحة المصدر تقدم مجموعة من عناصر واجهة المستخدم الجميلة التي تم إنشاؤها باستخدام CSS وTailwind.
--------------------------------
2-Figma Plugin: Motion
هو إضافة لبرنامج Figma بتبسط عملية إنشاء الرسوم المتحركة. الأداة دي بتخلي مطوري الواجهة الأمامية يقدروا يصمموا الرسوم المتحركة ويعملوا نماذج أولية مباشرة جوه Figma، من غير ما يحتاجوا للبرمجة المعقدة.
--------------------------------
3-CSSFX
يوفر مجموعة من الرسوم المتحركة CSS الجاهزة للاستخدام والتي يمكن دمجها بسهولة في أي مشروع ويب.
--------------------------------
4-Frontend Mentor
هي منصة ممتازة ل Frontend  الذين يتطلعون عن تحسين مهاراتهم من خلال مشروعات واقعية.
--------------------------------
5- Greensock Animation Platform (GSAP)
هي مكتبة جافا سكريبت قوية لإنشاء رسوم متحركة عالية الأداء. يقدم GSAP مجموعة من الميزات، بما في ذلك الرسوم المتحركة السلسة والتوافق عبر المتصفحات.
--------------------------------
6-CodePen
هي بيئة تطوير اجتماعي لمطوري الواجهة الأمامية لعرض أعمالهم وتجربة التعليمات البرمجية واكتشاف الإلهام.
--------------------------------
7-Polypane
هو متصفح معمول مخصوص لمطورين ومصممي الويب. بتقدم ميزات زي التمرير المتزامن والمعاينات السريعة الاستجابة وفحص سهولة الوصول
--------------------------------
6👍2🔥1
شوية مصادر مجانية تقدروا تستخدموها لو حد عاوز يعمل ابليكشن اسلامي. سواء كان التطبيق بتاعك بيحتاج مواقيت الصلاة، تحويل التاريخ الهجري، أو نصوص القرآن الكريم، هتلاقي هنا اللي انت محتاجه!

📌Api شاملhttps://documenter.getpostman.com/view/7929737/TzkyMfPc

📌 Aladhan Prayer Times API: عشان تعرف مواقيت الصلاة لأي مكان.
🔗 [Aladhan API]( https://aladhan.com/prayer-times-api)

📌 IslamicFinder API: عشان مواقيت الصلاة، التقويم الهجري، وموارد قرآنية.
🔗 [IslamicFinder API]( https://www.islamicfinder.us/index.php/api/)

📌 Quran API: نصوص وترجمات القرآن الكريم مع الصوتيات.
🔗 [Quran API]( https://alquran.cloud/api)

📌 Hijri Date API: تحويل التاريخ من الميلادي للهجري والعكس.
🔗 [Hijri Date API]( https://hijriapi.com/)

📌 Muslim Salat API: مواقيت الصلاة مع موارد إسلامية أخرى.
🔗 [Muslim Salat API]( https://muslimsalat.com/)

📌 Hadith API: عشان توصل لمجموعة الأحاديث.
🔗 [Hadith API]( https://api.sunnah.com/)

📌  Tanzil.net API: نصوص وترجمات القرآن مع التلاوات.
🔗 [ Tanzil.net API]( http://tanzil.net/docs/api)
🔥72👍1
Fake Filler
إضافة على قوقل كروم تساعدك زيادة إنتاجيتك و تكسبك وقت كمبرمج 🚀
هده الإضافة  تسمح لك بملء كل  ال form اللي لديك بضغطة زر واحدة ببيانات وهمية.

الرابط :  https://chromewebstore.google.com/detail/fake-filler/bnjjngeaknajbdcgpfkgnonkmififhfo?pli=1
🔥4
مشروع إدارة البنك ب لغة سي بلس بلس بمميزات احترافية وكل الشكر للاستاذ محمد ابو الهدهود على تقديم المادة بشكل بسيط وتدريجي لمشاهدة العمل كامل👇👇

https://youtu.be/4ElayOe2rtQ?si=ZcE41BwOTReqH1wQ
🔥43👍1
يعني ايه temp table في sql وايه فايدته؟
وايه انواعه؟

من اسمه كده temporary  يعني حاجه مؤقتة
 
بيتكريت جوا داتابيز اسمها temp table بيكون موجود عندي في الميموري بشكل مؤقت بيتمسح اول مالسيشن بتاعتي تقفل او اخر connection بيأكسس الtable  دا يقفل
امتى بستخدمه
بستخدمه لما احتاج احفظ جواه داتا بشكل مؤقت بستخدمها as input at another query
ازاي بستخدمه؟
بضيف # قبل اسم الtable
انواعه؟
1-  Local temp table
2-  Global temp table
ايه الفرق بينهم؟
 
الـ local  بيكون على مستوى السيشن بتاعتي
اول مالسيشن بتخلص بيتمسح
بستخدمه ب ان احط # قبل الtable
Create Table #TableName
 
الـ global  بيكون على مستوى الداتابيز
يعني انا واي user تاني اقدر استخدمه
طيب بيتمسح امتى ؟
لما اخر  Connection يتقفل
يعني لو انا بستخدمه وuser تاني بيستخدمه وجيت انا قفلت هيفضل موجود عادي
هيقفل فقط في حاله ان اخر  connection يقفل الاكسس بتاعته وقتها هيتمسح من الميموري

بكتبه ازاي؟

بحط ## قبل اسم الTable
Create Table ##TableName

منقول من

https://www.linkedin.com/posts/aliaa-ali-gabr_tablename-tablename-activity-7224466255594831873-514h?utm_source=share&utm_medium=member_ios
🔥6👍1
أعمل أيه عشان أكون تنين JavaScript ؟ 🐉

✅️ لغة الـ JavaScript واحدة من أهم اللغات البرمجية في العالم اليوم. من تطوير مواقع الويب إلى تطبيقات الهواتف الذكية، الجافاسكريبت تلعب دورًا كبيرًا في كل جانب من جوانب البرمجة الحديثة. لو كنت عايز تكون محترف في الجافاسكريبت.

👈 تعالى نقولك على بعض الخطوات اللي ممكن تساعدك في الوصول للمستوى ده👇

1️⃣ فهم أساسيات الـ JavaScript :
أول حاجة لازم تعملها هي إنك تفهم الأساسيات. ده يشمل قواعد اللغة الأساسية، المتغيرات، الحلقات الشرطية، والحلقات التكرارية. إبدأ بدراسة الجافاسكريبت من مصادر موثوقة زي كتب البرمجة أو المواقع التعليمية المشهورة.

2️⃣ التطبيق اليومي :
زي أي مهارة، البرمجة بالجافاسكريبت بتتطلب ممارسة مستمرة. حاول تكتب أكواد صغيرة كل يوم وتطبيق اللي اتعلمته. التطبيقات العملية دي هتساعدك تفهم المفاهيم بشكل أعمق.

3️⃣ إنشاء مشاريع وتاسكات  :
بعد ما تتقن الأساسيات، ابدأ في تنفيذ مشاريع صغيرة. ممكن تبدأ بمشروع ويب بسيط زي قائمة مهام (To-Do List) أو حاسبة (Calculator). المشاريع دي هتديك خبرة عملية وتساعدك تتغلب على التحديات البرمجية.

4️⃣ التعلم المستمر للغة :
الجافاسكريبت بتتطور بشكل مستمر، فلازم تتابع التحديثات والتقنيات الجديدة. مواقع زي MDN Web Docs و Stack Overflow هتكون مفيدة جدًا في متابعة آخر الأخبار والتطورات.

5️⃣ قراءة الكود المفتوح المصدر:
فيه مشاريع مفتوحة المصدر كتير مكتوبة بالجافاسكريبت. قراءة الكود ده ممكن تساعدك تتعلم طرق جديدة لحل المشاكل وتفهم أفضل الممارسات في البرمجة.

6️⃣ الانضمام للمجتمعات البرمجية :
الانضمام لمجتمعات برمجية زي GitHub و Reddit هيساعدك تتواصل مع مبرمجين آخرين وتستفيد من خبراتهم. ممكن كمان تشارك في مشاريع مفتوحة المصدر وتساهم بكودك.

7️⃣ تعلم إطار عمل أو مكتبة :
بعد ما تتقن اللغة، حاول تتعلم إطار عمل أو مكتبة زي React أو Vue.js. الإطارات دي بتسهل عليك كتير من العمليات وبتخليك تقدر تبني تطبيقات معقدة بشكل أسرع وأسهل.

إنك تكون محترف في لغة الجافاسكريبت مش حاجة سهلة، لكن بالممارسة والتعلم المستمر تقدر توصل للمستوى ده. ابدأ بفهم الأساسيات، وبعدها ابني مشاريع صغيرة، وتابع التطورات، وانضم للمجتمعات البرمجية. والأهم من ده كله، ما توقفش عن التعلم والممارسة🚶‍♂️
🔥62👍2
هي ال Tables بتاعت ال Database بتتخزن إزاي علي ال disk ؟
إزاي فهم طريقة التخزين ممكن يخليني أحسن من ال Query اللي بعملها من حيث ال Performance.


في البداية أنت عملت جدول إسمه Employee وحطيت فيه بعض الاعمدة زي ال Id و ال Name وال Adress مثلا وخليت
ال Id ده يكون هو ال Primary Key

وخزنت ف الجدول ده مثلا 22 موظف.

الجدول ده بقا هيتخزن في ال Memory عندك علي شكل حاجه إسمها Data pages زي ما هو موضح بالصورة كده
وكل Data page بتكون حجمها 8 Kb

طيب أي شكل Tree اللي ظاهر في الصورة دي ؟
ببساطه أنت لما عملت Id وخليته Primary key
فبيتم إنشاء حاجه إسمها Clustered Index
وال Clusterd index ده بيخلي الداتا بتاعتك مترتبه بناءاً علي ال Id
وكمان بتكون علي شكل Tree بالشكل اللي انت شايفه ده
وبتكون كل نود بتشاور علي الي بعدها
والداتا بتاعت الموظف كامله بتكون موجوده اخر حاجه خالص

بالتالي لو حبيت تبحث عن الموظف الي ال Id بتاعه 11 مثلا
فأنت هتبدا من ال Tree من فوق خالص وتعدي علي ال Nodes كده ما هو موضع ف الصورة لحد ما تنزل في ال Range اللي أنت عاوزه
وتروح للData page اللي أنت متأكد ان الرقم اللي أنت بتبحث عنه موجود بداخلها وده بفضل ال Tree
هتروح لل Data Page تبحث جواها عم رقم 11 اللي أنت عاوزه
لكن كمان أنت مش هتبحث بشكل Linear لا
أنت كده كده ال Date page مترتبه فتقدر تعمل binary search بالتالي هتوصل أسرع وبتدا تقرأ ال Record اللي بتبحث عنه وترجعه.

بالتالي ك Performance ده كويس جداً

طيب لو كنت عمت الجدول بدون Primary key مكنش هيحصل Clustered Index ده بالتالي الداتا مش هتكون مترتبه بالتالي مش هتتخزن بالشكل ده وهيكون فيه عيوب كتير أبرزها
ال Performance أنت بقيت محتاج تعدي علي كلو لحد ما توصل لل Record اللي أنت عاوزه وده بيطلق عليه Table Scan.

طيب لو أنت عملت Primary key علي الId
لكن أنت للأسف بتبحث بال Age فأنت كده محتاج ال Tree بتاعتك تكون منظمه بس المره دي مش بال Id بس
لا بالAge علشان عملية ال Search تكون أسرع

فأنت هنا بقا بايدك تروح تعمل باردو Index علي ال Age بحيث
يشتغل بنفس طريقة ال Id
لكن ال Table بيكون فيه Clustered Index واحد فقط
فأنت هتعمل نوع تاني وهو Non Clustered Index
وبيتشغل بنفس الطريقة باختلاف بسيط.

فلو أنت عندك Database وعاوز تحسن من Query Performance بتاعك ممكن تشوف أنت بتبحث باي بالظبط
هل id ولا Name ولا Age وتعمل عليهم Index

هتقولي طيب ما أعمل علي كل الاعمدة Index وخلاص
هقولك ان كل Index بتعمله بياخد من Memory بتاعك.
مش بس كده في مشكلة تانيه
وأنك هتلاحظ بطئ في عميلة ال Insert أو ال Update
لانك بيحتاج انك تعمل maintenance لل Index ده ف كل مره

https://stackoverflow.com/questions/12915623/index-all-columns

وممكن تقرأ أكتر في اللينك ده عن ليه مينفعش
نعمل index for all columns

ودي طريقة من الطرق اللي ممكن نحسن بيها ال Performance بتاعت Query
🔥2
🔰      مـا هـو ChatGPT ؟

▫️ هـل فـعـلاً ChatGPT سـيـقـضـي عـلـى عـمـل الـمـبـرمـجـيـن ؟
في الأيام الأخيرة ظهر نظام ChatGPT المُقدم من طرف OpenAI، وهو عبارة عن نظام يعمل بالذكاء الاصطناعي بإمكانه الإجابة عن الأسئلة وكتابة المقالات في جميع المجالات كما أنه يقوم بحل التمارين والمشاكل بالشرح المفصل.

ومن هنا انتشرت معلومات بأن هذا النظام سيقضي على عمل المبرمجين نهائياً، لأنه يستطيع حل المشاكل البرمجية بسهولة.
🔹 لـكـن هـل هـذا صـحـيـح ؟

صيحيح أن هذا النظام بإمكانه الإجابة على تمرين برمجي وكتابة كود كامل لك لحل أحد المسائل البرمجية بنجاح تام.
لكن البرمجة ليست هكذا؛ البرمجة دائماً تعتمد على الإبداع واستخراج أفكار جديدة وهذا الذي عجز عنه الذكاء الاصطناعي، فمثلاً لو أردت إنشاء برنامج لإدارة متجرك حتى وإن استطاع الذكاء الاصطناعي إنشاءه لا يمكنه أبداً أن يأتي بأفكار إبداعية مثل التي يولدها العقل البشري.

حالياً هذا النظام يقوم بحل مشكلات ومسائل برمجية معروفة ولا يمكنه القيام بمشروع برمجي متكامل.

__ أعتقد أن هذا النظام هو شيئ إيجابي للمبرمجين لأنه يُسهل مهمتهم ويحل بعض المسائل بسرعة، ولا داعي للخوف منه أبداً .
🔥153
لو انت شغال في الـ Front-end، البوست ده هيبسط عليك حاجات كتير

هنا هتلاقي أهم إضافات VS Code اللي لازم تبقى عندك وانت شغال:


‏CSS Peek ‍
الإضافة دي بتخليك تنقل بسرعة بين الـ HTML وCSS، فلو عندك عنصر في الـ HTML، تقدر تشوف الأنماط المرتبطة بيه في الـ CSS بسهولة.
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

 
‏Path Intellisense ‍
بتكمل لك مسارات الملفات تلقائيًا، يعني لما تكتب اسم ملف، الإضافة هتعرض لك اقتراحات للمسار
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

 
‏Auto Rename Tag
بتغير لك اسم الوسم (Tag) في الـ HTML أو JSX وتطبق التغيير على الوسم المقابل تلقائيًا.
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

 
‏React PropTypes Intellisens‍
بتوفر لك IntelliSense للـ PropTypes في React، فبتسهل عليك كتابة الـ Props بشكل أسرع.
https://marketplace.visualstudio.com/items?itemName=OfHumanBondage.react-proptypes-intellisense

 
‏Project Manager
بتساعدك في تنظيم المشاريع وتبديل بين المشاريع المختلفة بسرعة.
https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

 
‏npm Intellisense
بتكمل لك أوامر npm تلقائيًا وتعرض لك اقتراحات للأوامر، فبتسهل كتابة الأوامر بسرعة.
https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

 
‏Color Highlight
تعرض الألوان في الكود بشكل مرئي، يعني لو عندك كود لون، الإضافة هتعرض اللون بشكل مباشر.
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

 
‏Code Spell Checker
بتكتشف الأخطاء الإملائية في الكود، سواء في التعليقات أو النصوص.
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

 
 
‏JSON Tools
بتحسن تجربة التعامل مع ملفات JSON، فتعرض البيانات بشكل مرئي وسهل التعديل.
https://marketplace.visualstudio.com/items?itemName=eriklynd.json-tools

 
 
👍4🔥32