عادل | مبرمج | برمجة | برمجه
12.6K subscribers
1.34K photos
8 videos
8 files
232 links
“برمجيات الريادة الذكية” – حلول تقنية مبتكرة. تابعنا لأحدث التطورات.

تابعنا للمزيد وفعل التنبيهات🛎

حسابتنا علي تويتر👇
https://twitter.com/AdelDeveloperX

https://twitter.com/SmartLeadTechX

للتواصل📩
@AdelAhmedDev

Or

@SmartLeadTech_CS
Download Telegram
‏جوجل ستنهي ميزة الـ Cookies بداية من 2024 وبالضبط في الرابع من يناير، وستطلق تقنية أخرى جديدة لتخزين البيانات ومعلومات التعقب لا يمكن لخدمات الطرف الثالث الوصول إليها. وبالتالي يمكنها أن تحافظ على جزء كبير للغاية من خصوصية المستخدم.
تعالو اشرحلكم الفرق بين map و filter و reduce في لغه جافا سكريبت

ال map و forEach و filter هم ثلاثة حاجات مهمة في JavaScript بيتعاملوا بيها مع ال Arrays



1 - Filter :
- بينشئ array جديدة فيها العناصر اللي اجتازت الشرط اللي أنت حددته
- بيتستخدم لما تحتاج تجيب مجموعة من الحاجات اللي تمشي مع شرط معين

مثلا :
const numbers = [1, 2, 3, 4, 5];
const evenNumbers =
numbers.filter( num => num % 2 === 0 );
// evenNumbers هتكون فيها [2, 4]



2 - Map :
- بينفذ function معينة على كل حاجة في ال array
- بيديك array جديدة فيها النتائج
- بيتستخدم لما تحتاج تحول كل حاجة في ال array بناءً على function معينة

مثلا :
const numbers = [1, 2, 3];
const doubledNumbers =
numbers.map( num => num * 2 );
// doubledNumbers هتكون فيها [2, 4, 6]




3 - Reduce :
- بيتستخدم عشان تقلل ال array لقيمة واحدة بتطبيق function تجميع على كل حاجة
- فيه متغير تراكمي بيتخزن فيه القيمة النهائية
- بتتستخدم لعمليات زي الجمع أو الضرب أو أي عملية تجميع

مثلا (جمع الأرقام) :
const numbers = [1, 2, 3];
const sum =
numbers.reduce(( accumulator, num) =>
accumulator + num, 0 );
// sum هتكون فيها 6




ببساطة :
ال map بترجع array بعد ما تحول كل حاجة
ال reduce بتستخدم لتقليل ال array إلى قيمة واحدة
ال filter بترجع array فيها الحاجات اللي اجتازت الشرط وتحققت الشرط
تعالو اشرحلكم الفرق بين Slice vs Splice في لغه جافا سكريبت

جافا سكريبت بتقدملك اتنين حاجات في مجال ال arrays
هما slice و splice الاتنين بيبدوا زي بعض، بس كل واحد فيهم عنده غرض مختلف لما تتعامل مع ال arrays

ال slice :
الطريقة slice بتتستخدم عشان تقطع جزء من ال array وتنشاء array تانية فيها العناصر اللي انت اخترتها. الحاجة الحلوة إنها مبتغيرش في ال array الأصلية، بس بترجعلك نسخة جديدة من ال array من الجزء اللي انت اخترته

const originalArray = [1, 2, 3, 4, 5];
const slicedArray = originalArray.slice(1, 4);

console.log(slicedArray);
// output : [2, 3, 4]

console.log(originalArray);
// output : [1, 2, 3, 4, 5]

في المثال ده، slice(1, 4) بتقطع العناصر
من index ال 1 لل index ال 3
(بس مش ال index ال 4) من originalArray

ال splice :
بس الطريقة splice بتتستخدم إما لإضافة عناصر جديدة أو حتى لحذف عناصر من ال array ، وده بيعدل في ال array الأصلية. بتأخذ تلاتة حاجات: index البداية، عدد العناصر اللي هتتم حذفها، وإذا كنت عايز تضيف عناصر جديدة

const originalArray = [1, 2, 3, 4, 5];
const removedElements = originalArray.splice(1, 2, 6, 7);

console.log(removedElements);
// output : [2, 3]

console.log(originalArray);
// output : [1, 6, 7, 4, 5]

في المثال ده، splice(1, 2, 6, 7) بتحذف عنصرين
من index ال 1 وبتضيف 6 و 7 في نفس المكان

الفروق الرئيسية :
- ال slice مبتعدلش في ال array الأصلية، بس بترجعلك نسخة جديدة من ال array

- ال splice بتعدل في ال array الأصلية بإضافة أو حذف العناصر

- ال slice بتاخد اتنين باراميترز ( index البداية و index النهاية)، بينما splice بتاخد على الأقل اتنين ( index البداية وعدد العناصر اللي هتتم حذفها)

- ال slice بترجع نسخة سطحية، بينما splice بترجع array فيها العناصر المحذوفة

ببساطة، فهم الفرق بين slice و splice مهم جداً للتحكم الفعّال في ال Arrays في جافا سكريبت. إستخدم slice لاستخراج جزء بدون تغيير في ال array الأصلية، وإستخدم splice للتعديل في ال array نفسها
لو انت Web developer وخصوصًا لو Frontend ومحتاج Backend حقيقي تتعامل معاه بدل ما تلف وتدور وتتعب وتقابلك مشاكل، يبقى المقال ده ليك.
ما هو الStrapi؟
من ضمن الأدوات المهمة الحديثة في مجال الويب ظهر بقوة الStrapi وفي المقال ده هنشرح ليه وازاي ممكن يفيدنا في عمل بروجيكتس

الStrapi:
هو headless CMS بمعنى انه نظام إدارة محتوى بدون Head يعني بدون Frontend، وهو open-source بيسمح للمطورين بناء API بسرعة للتعامل مع كافة أشكال الFrontend
من الأخر هو عبارة عن نظام مكون من Dashboard مش بتحتاج أي خبرة نهائي في الBackend عشان تعمل الAPI، كمان الواجهة الخاصة به سلسة منظمة وبيدعم بناء Models وتعمل بينهم Relations بسهولة.

ما الفائدة من استخدام Strapi؟
- لو عايز تبني API بدون خبرة في الBackend وتفصل الBack عن الFront؛ فهو اختيار ممتاز
- لو عايز تعمل Mobile App.
- ممكن تستخدمة لمشاريع صغيرة زي Blog أو إدارة مدرسة أو إدارة مطعم أو إدارة شركة بدون الحاجة لBackend حقيقي

مميزات Strapi:
- بيوفرلك Database: وبأي معمارية انت بتحبها سواء عندك لغة قواعد بيانات أو لا هتقدر تعمل من خلاله Database قوية جدًا.
- قابل للتطوير (extensible) ومزاياه المجانية قوية
- قابل لعمل شئ مخصوص (Customizable): لو عندك أي فكرة unique في المشروع هتقدر انك تتعامل معاها من خلال Strapi
- بيوفرلك الRESTful يعني تقدر تتعامل مع أي فريمورك بسهولة.
- بيوفرلك مبدأين مهمين authentication وauthorization وبتحدد لكل Users أو نوع من أنواع الAuthorization الpermissions الخاصة بيه
- قابل للتوسع (Scalability) ويمكنه التعامل مع Docker وKubernetes.
- بيقلل من صعوبة البدء في المشاريع.
- ينفع تدرب من خلاله على الBackend بمجرد تثبيت مشروع Strapi
- ينفع تتعامل بPlugins كتيرة مشهورة معاه على سبيل المثال GraphQL

عيوب Strapi:
- صعب في عمل Migrating مع Api موجودة بالفعل؛ فهتحتاج انك تبني كل حاجة من الصفر
- بعض الFeatures غير مجانية، يمكنك فقط إستخدامها اذا كنت تستخدم نسخة Enterprise Strapi مدفوعة.
- بعض مشاكل التكرار، لكن مع الوقت والتطوير قلت هذه المشاكل إلى حد الإنعدام.

أشباه Strapi:
بالتأكيد هو مشروع مميز وأنا شخصيًا بفضله عن الجميع لكن له أشباه تانية قوية جدًا وبمميزات مهمة للكثير من المطورين غير إن التلاتة بيحظوا بدعم أكتر من Strapi وهم:
1- Netlify CMS
2- Prismic CMS
3- Hapi dev
عشان تعرض pdf من خلال ال html بكل بساطة
بدل ما تعمل ملف ستايل كامل مخصص لل rtl
ممكن على طول جوا العنصر تحط الستايل بتاعه في حالة العربي
موقع tinypng بيقلل حجم الصور بنفس الجودة

https://tinypng.com/
عادل | مبرمج | برمجة | برمجه
Photo
25 فكرة 💡 مشاريع Web Development هتحسن مستواك جدا في تطوير المواقع

1. صندوق الوصفة
- أنشئ تطبيقًا لصندوق الوصفات حيث يمكن للمستخدمين إضافة الوصفات وتعديلها وحذفها.

2. قائمة مشاهدة الأفلام
- إنشاء تطبيق قائمة مراقبة الأفلام حيث يمكن للمستخدمين إضافة وإزالة الأفلام التي يريدون مشاهدتها.

3. غرف الدردشة مع المصادقة
- تطوير غرفة دردشة في الوقت الفعلي مع مصادقة المستخدم باستخدام Firebase أو خدمة مصادقة أخرى.

4. تطبيق اللياقة البدنية مع الرسوم البيانية
- أنشئ تطبيقًا لتتبع اللياقة البدنية باستخدام مخططات لعرض التقدم بمرور الوقت.

5. المحفظة مع قسم المدونة
- عزز محفظتك الاستثمارية عن طريق إضافة قسم للمدونة حيث يمكنك كتابة المقالات ونشرها.

6. لوحة معلومات الطقس
- إنشاء لوحة معلومات الطقس التي تعرض الطقس الحالي والتنبؤات وخرائط الطقس.

7. مقسم النفقات
- أنشئ تطبيقًا يساعد الأصدقاء على تقسيم النفقات بعد رحلة أو حدث ما.

8. تطبيق تدوين الملاحظات
- تطوير تطبيق بسيط لتدوين الملاحظات مع ميزات مثل إضافة الملاحظات وتحريرها وحذفها.

9. تطبيق مسابقة البطاقات التعليمية
- قم بإنشاء تطبيق بطاقة تعليمية للدراسة باستخدام ميزات مثل وضع الاختبار وإنشاء البطاقة.

10. تطبيق قائمة تشغيل الموسيقى
- إنشاء تطبيق قائمة تشغيل الموسيقى حيث يمكن للمستخدمين إنشاء قوائم التشغيل وإدارتها

11. تطبيق تعلم اللغة
- تطوير تطبيق يساعد المستخدمين على تعلم لغة جديدة من خلال التمارين والاختبارات التفاعلية.

12. تعقب طلب الوظيفة
- إنشاء تطبيق لتتبع طلبات العمل والمقابلات والمتابعات أثناء البحث عن وظيفة.

13. مؤقت العد التنازلي للحدث
- أنشئ تطبيقًا يتيح للمستخدمين ضبط مؤقتات العد التنازلي للأحداث القادمة.

14. كتالوج الكتب
- تطوير تطبيق كتالوج الكتب حيث يمكن للمستخدمين إضافة الكتب وتقييمها ومراجعتها.

15. لوحة تحكم تحليلات النفقات
- تعزيز تعقب النفقات عن طريق إضافة ميزات التحليلات والتصور.

16. منصة تبني الحيوانات الأليفة
- بناء منصة لتبني الحيوانات الأليفة، مما يسمح للمستخدمين بتصفح الحيوانات الأليفة وتبنيها.

17. نظام إدارة السيارة
- إنشاء نظام لإدارة تفاصيل السيارة وجداول الصيانة وكفاءة استهلاك الوقود.

18. مؤقت المهام
- إنشاء تطبيق مؤقت للمهام لمساعدة المستخدمين على إدارة وقتهم والتركيز على المهام.

19. لعبة متعددة اللاعبين
- تطوير لعبة بسيطة متعددة اللاعبين باستخدام تقنيات مثل المقبس.

20. تطبيق تذكير يعتمد على الموقع
- إنشاء تطبيق يرسل تذكيرات للمستخدمين بناءً على موقعهم.

21. تطبيق المجلة اليومية
- أنشئ تطبيق مجلة يومية حيث يمكن للمستخدمين الكتابة والتأمل في يومهم.

22. تعقب العملة المشفرة
- أنشئ تطبيقًا يتتبع أسعار العملات المشفرة واتجاهات السوق في الوقت الفعلي.

23. نظام إدارة الموظفين
- إنشاء نظام إدارة الموظفين مع ميزات مثل إضافة سجلات الموظفين وتحريرها وحذفها.

24. منصة الاختبار عبر الإنترنت
- تطوير منصة اختبار عبر الإنترنت مع تسجيل المستخدم، وإنشاء الاختبار، والتسجيل.

25. مخطط السفر
- إنشاء تطبيق يساعد المستخدمين على التخطيط لرحلاتهم، بما في ذلك ميزات خط سير الرحلة والميزانية.
أهم 16 موقع لازم تعرفهم كـ Flutter Developer 👌

1️⃣ Flutter
2️⃣ Dart
3️⃣ Chatgpt
4️⃣ GitHub
5️⃣ Stackoverflow
6️⃣ Medium
7️⃣ Flutter awesome
8️⃣ GetWidget
9️⃣ Fluttermarket
🔟 Start Flutter
1️⃣1️⃣ Flutter campus
1️⃣2️⃣ Free Fluter Source
1️⃣3️⃣ FlutterDevs
1️⃣4️⃣ Konstant Infosolutions
1️⃣5️⃣ Pub.dev
1️⃣6️⃣ Flutter Gems
1
لو عايز تبدأ تعلم الذكاء الاصطناعي AI وعايز خطة فيها المصادر تبدأ من البداية
وكمان عايز تعرف هل المصدر ده صعب ولا متوسط ولا سهل عشان تعرف تبدأ بيه ولا لا

الرابط: https://github.com/ahmedbahaaeldin/From-0-to-Research-Scientist-resources-guide
من اجمل package الي ممكن تستخدمها وتوفر عليك وقت وانتا شغال علي مشروع react وده لانها فيها اغلب hooks الي ممكن تحتاجها وانتا شغال في مشروعك

الرابط:
https://usehooks.com/
ملخص ممتاز لكيفية صياغة سطر الأوامر في ChatGPT بطريقة إحترافية و سهلة للحصول على إجابات مركزة.
تعاااالى أقولك معلومة ممكن تصدمك !!

🟡 ناس كتير بيكونوا فاكرين ال Console اللى كل يوم بنستخدمه دا جزء من من ال JavaScript!!!!

حابب أصدمك و اقولك لأ ان ال Console مالوش علاقة بال JS أصلا.
و لكن ال Console هو جزء من ال Web APIs
CSS Flex-box cheatsheet
‏مكتبات لريأكت يجب معرفتها لو شغال او بتتعلم فرونت اند بأطار عمل ريأكت🔥👌🏼
👍1