ما هي لغة javascript و مميزاتها
اقرأ المقال هتستفاد جدا

‏ https://creators.nafezly.com/u/adelahmed/what-is-javascript-language-and-its-advantages

الموقع دا بقيت بعتمد عليه بنسبة كبيرة الفترة الآخيرة وانا بكتب كود 🚀


الموقع هوا https://devdocs.io/ وفكرة الموقع ببساطة انه مجمعلك كل ال documents بتاعة اغلب مكتبات ولغات البرمجة في مكان واحد 💪

والموضوع دا مريح جدا جدا ليك كمبرمج لانه لو انت شغال بأكتر من لغة او اكتر من تقنية ف بدل ما تفتح ال documents بتاعة كل لغة ف تاب لوحدها انت بتفتح موقع واحد وبتلاقي فيه كل حاجة.

والجميل انه هتلاقيه فيه documents مكتبات خاصة بمكتبات زي مثلا مكتبة React Router الخاصة بمكتبة React JS ودي اكتر حاجة عجباني فيه 👌

جربه وقولي رأيك 💙

مهارة حل المشكلات (Problem Solving) من أهم المهارات اللي لازم تكون عند أي مبرمج.

- لا تنسوا أهلنا في ـ,f,ـلسطين وفي كل دول العالم من المسلمين من الدعاء. 🤍


دي بعض المواقع اللي هتساعدك في تنمية مهارة حل المشكلات ... Problem Solving

Coding Challenge Platforms 🔥

→ leetcode.com
→ codewars.com
→ topcoder.com
→ codingame.com
→ hackerrank.com
→ projecteuler.net
→ coderbyte.com
→ codechef.com
→ exercism.io
→ spoj.com
→ atcoder.jp
→ hackerearth.com
→ interviewbit.com
→ codesignal.co

ما هو الـ Lazy Loading
الـ Lazy Loading هو practice تحميل أو تهيئة resources , objects حتى تكون هناك حاجة فعلية لها لتحسين performance وحفظ system resources.
على سبيل المثال ، إذا كانت إحدى صفحات page تحتوي على image يتعين على المستخدم scroll down لرؤيتها ، فيمكنك عرض عنصر placeholder وتحميل الصورة الكاملة فقط عندما يصل المستخدم إلى موقعها.
تشمل مزايا lazy loading ما يلي:
* يقلل وقت load time - يؤدي الـ Lazy loading لصفحة ويب إلى تقليل وزن الصفحة ، مما يسمح بتحميل أسرع للصفحة.
* الحفاظ على Bandwidth - يحافظ الـ Lazy loading على Bandwidth من خلال تقديم المحتوى للمستخدمين فقط عند الطلب.
* الحفاظ على resource النظام - يحافظ الـ Lazy loading على موارد server و client لأن بعض images وJavaScript و الـ code الأخرى فقط هي التي تحتاج إلى عرض أو تنفيذ.
الـ Lazy Loading مقابل الـ Eager Loading
بينما تقوم الـ lazy loading بتاخر تهيئة resource ، يؤدي الـ Eager Loading إلى تهيئة resource أو تحميله بمجرد تنفيذ الكود.
يتضمن الـ Eager Loading أيضًا التحميل المسبق للكيانات ذات الصلة المشار إليها بواسطة resource .
الـ Eager loading مفيد عندما تكون هناك opportunity أو حاجة load resources في الخلفية
على سبيل المثال ، تعرض بعض مواقع الويب شاشة "loading" وتحمل بفارغ الصبر جميع الـ resources الـ required لتشغيل تطبيق الويب.
طرق تنفيذ الـ Lazy Loading
هناك العديد من المكتبات open source التي يمكن استخدامها لتنفيذ الـ lazy loading :
الـ blazy.js - blazy.js هي مكتبة JavaScript خفيفة تقوم بالـ lazy loading
لـ images, iframes, video and و الـ resources الاخري
الـ LazyLoad - LazyLoad هو script يقوم تلقائيًا بتحميل images عند دخولها إلى viewport .
الـ Best Practices لـ Lazy Loading
عند إجراء الـ Lazy Loading ، ضع في اعتبارك التالي:
* جعل فقط resources الـ Lazy Loading التي يتم عرضها أسفل viewport من الصفحة أو خارج إطار عرض المستخدم في code الـ Lazy Loading غير المطلوبة
لـ system operations الأساسية.
* عند الـ Lazy Loading لصورة ، قم بفك تشفيرها (decode ) بشكل asynchronously باستخدام طريقة فك JavaScript () قبل إدخالها في DOM حيث تتسبب الصور الكبيرة في بطئ المتصفح.
* معالجة errors في حالة فشل تحميل image أو object .

ازاي تبني ال Backend بتاعك من غير سطر كود ؟؟
النهارده هنتكلم عن ال starp.js
headlees CMS open source
فكرته عاملة زي ال Wordpress
عبارة عن شاشة Admin تقدر من خلالها تعمل كل ال Relation بتاعتك الانت عايزه
وهو هيعملها Generate
مكتوب بلغة جافا سكريبت ، و به قابلة للـ customizable بالكامل ، و يوفر وقت تطوير API من خلال لوحة تحكم يمكن لاي شخص استخدامها.
‌‏
- تدعم العديد من قواعد البيانات sql ,sqlite and postgres .
- Authentication & Permissions
يمكنك تأمين الـendpoints الخاصة بك عن طريق السماح أو عدم السماح للمستخدمين بالوصول إلى API الخاصة بك عن طريق الـ roles.
- documentation
توفر لك توليد الـ documentation تلقائياً
‏- صور للوحة التحكم
‏- رابط الاداة في موقع jamstack
https://jamstack.org/
هذا الموقع يوفر لك عدد لا نهائي من الادوات headless-cms

‏ https://jamstack.org/headless-cms/strapi/
وهيوفر معاك وقت ف انك تبني Api بسيط
بس لو شغال باك ايند في تعقيد strapi مش هينفع معاك
هسيبلكم شويه لينكات ممكن تتعمق فيهم اكتر

‏ https://m.youtube.com/watch?si=AIKiOriZY-fT9yzb&v=nXra_bb3q7g&feature=youtu.be

‏ https://m.youtube.com/watch?si=00VSgmmIvOQ-brK_&v=p4Tab_8KEew&feature=youtu.be

‏ https://m.youtube.com/watch?si=2Z4rSe3Fqlr2oOfr&v=EBvd8vcte1s&feature=youtu.be

‎مهم جدا Google cloud بتقدم 300 ساعة من تعليم machine learning حوالي 15 كورس من beginner لل advanced

‎بيغطي كل حاجة تقريبا زي :
• Fundamentals of Machine Learning
• Feature Engineering
• Production Machine Learning Systems
• Computer Vision and Natural Language
• Recommendation Systems
• MLOps
• TensorFlow, Google Cloud, VertexAI

Link : https://cloud.google.com/products/ai?hl=en

𝗥𝗼𝗮𝗱𝗺𝗮𝗽 𝘁𝗼 𝗹𝗮𝘂𝗻𝗰𝗵 𝘆𝗼𝘂𝗿 𝘀𝗼𝗳𝘁𝘄𝗮𝗿𝗲 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 𝗷𝗼𝘂𝗿𝗻𝗲𝘆!

GET, POST, PUT... Common HTTP “verbs” in one figure. Next week's topics will be listed at the end

‏جوجل ستنهي ميزة الـ 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/

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

لو عايز تبدأ تعلم الذكاء الاصطناعي AI وعايز خطة فيها المصادر تبدأ من البداية
وكمان عايز تعرف هل المصدر ده صعب ولا متوسط ولا سهل عشان تعرف تبدأ بيه ولا لا

الرابط: https://github.com/ahmedbahaaeldin/From-0-to-Research-Scientist-resources-guide

من اجمل package الي ممكن تستخدمها وتوفر عليك وقت وانتا شغال علي مشروع react وده لانها فيها اغلب hooks الي ممكن تحتاجها وانتا شغال في مشروعك

الرابط:
‏ https://usehooks.com/

ملخص ممتاز لكيفية صياغة سطر الأوامر في ChatGPT بطريقة إحترافية و سهلة للحصول على إجابات مركزة.