إزاي تبقى تنين في JavaScript؟ 🔥


أهم المواضيع اللي ممكن تقابلها في JavaScript خلال رحلتك في النقاشة (فرونت اند) أو في السباكة (باك اند):

✅ this
✅ Closure
✅ Scopes
✅ Functions
✅ Arrays
✅ Objects
✅ ES6 and More
✅ Promise

الريبو ده فيه مجموعة مقالات لذيذة بتتكلم عن المواضيع دي

رابط الريبو:
‏ https://github.com/didicodes/javascript-dev-bookmarks

لو انت Front end فاكيد سمعت عن API ....

ال API، ده اختصار لـ "Application Programming Interface"، يعني حاجة بتربط بين مكونين
بتساعد على نقل البيانات بينهم. يعني لو عايز تجيب معلومات من موقع تاني وتستخدمها في موقعك أو تطبيقك، هتستند على الـ API عشان تجيب البيانات دي.

ال API مش بس بيستقبل بيانات، لكنه بيبعت بيانات كمان.
مثال ، لو حد عنده موقع بيبيع منتجات وعنده فورم بيملاه بتفاصيل المنتج، زي الاسم والسعر وكدة، وبعد ما يملاه يضغط علشان يضيف المنتج، دور الشخص اللي خلف الكواليس (الباك إند) بيكون إنه بيأخد البيانات دي وبيبعتها للـ API.

الـ API بيرجع بيأخد البيانات دي ويخزنها في قاعدة البيانات. وبعدين الشخص اللي خلف الكواليس بيبعت الـ API للجهة اللي بتعمل الواجهة (الفرونت إند). هنا بيبقى دور الفرونت إند إنه يأخد البيانات من الـ API ويعرضها في الموقع بتاعه.

والـ Fetch هو العملية اللي بتخلِّيك تجيب البيانات من الـ API. يعني بتستخدم الـ Fetch عشان تجيب البيانات اللي بتجيلك من الـ API وتستعملها في مشروعك.

و اخيرا API من اهم الحاجات اللى هتستخدمها كتير و خصتا فى المشاريع الكبيرة فلازم تكون ملم بيها كويس و تدرب عليها كتير فانك ازاى تعرض البيانات بالشكل المطلوب و تبعت بيانات بشكل صحيح و الاهم من كل ده يكون كود منظم و مرتب مش مجرد تطلع المطلوب و بس

HTTP Status Codes

ظهراداة جديدة من أدوات الـ AI اسمها "Devin" وده ياسيدي AI Software Engineer المفروض يقوم بدورك كمبرمج زي ماهو واضح من الاسم كده وبيقدر يحل مشاكل فالكود ويعمل مشاريع بأحجام مختلفة ويدور على المشاكل اللي بتقابله على جوجل زينا بالظبط وبعد مايخلص يقوم عامل push للكود على الـ github repo كمان ويعمل pull request و new branch اذا لزم الامر.
لحد هنا الامر ممكن يبان مرعب للمبرجين خصوصا الشباب الغلابة اللي لسه بتدرس برمجة فالكلية او بيعملوا shift career لمجال البرمجة, ولكن أعلق بالكلمتين دول ونفكّر نفسنا بيهم:
أدوات الـ AI دي هتستبدل الـ Coders اللي وظيفتهم كتابة الكود ولكن عمرها ماهتستبدل الـ Engineers اللي وظيفتهم حل المشاكل وبيستخدموا الكود كأداة لتنفيذ الحل (أدوات الـ AI دي أحد هذه الادوات).
الـ Engineer بيعمل أكتر بكتيييرمن مجرد كتابة الكود اللي بييجي أخر مرحلة في الحل:
- بيتعامل مع مشاكل بتعتمد على inputs مختلفة ممكن ميكنش ليها علاقة بعض ومتنتوره في حتت مختلفة
- بيتعامل مع البني ادمين وبيحاول يفهم دوافعهم (اللي هما نفسهم مش عارفنها
) والمشاكل اللي بتواجهم لمحاولة إيجاد حلول مناسبة لها
- بيسأل الاسئلة الصح والاشخاص المناسبين اللي يسألها ليهم
- بيقدر يـ Collaborate مع ناس تانية او حتى teams تانية فالفريق حسب إحتياج المهمة او المشروع
- يقدر يشتغل في حدود الميزانية المتاحة وبناء عليها يحدد الخدمات والمكتبات اللي ممكن يستخدمها
وغيرها كتير من ال soft and technical skills اللي صعب جدا على اي اداة ذكاء إصطناعي انها تتقنها معاً

دي شويه extensions في الـ visual studio code ممكن تساعدك


🔹Rainbow Tags
بيلون الـ HTML Tags فشكل الكود بيكون منظم اكتر


🔹 Color Highlight
بيعمل Heighlight للـ variables او الـ hex بتاعة الألوان باللون بتاعها

🔹 Todo Highlighter
بتساعدك تقسم مهامك ف الكود.

🔹 Auto Renametag
و دي من خلالها لو هتعدل اسم الـ Tag تقدر تغير إسمه في الـOpen tag و هيسمع في الـClose tag تلقائي.

🔹 Bookmarks
بتقدر تميز بيها الأجزاء المهمة بتاعتك علشان تعرف ترجعلها ف أي وقت بسهولة.

🔹Image preview
بيحط صوره مصغره للصوره جنب رقم الـ Line اللي موجوده فيه فبيساعدك تتأكد انك من الصوره اللي عاوزها

🔹 Auto Import
بيعملك Auto Import وبيحطلك ال Path كمان

🔹Project Manager
بيساعدك توصل للـ Projects اللي شغال عليها بسهوله بغض النظر عن المكان اللي هما موجودين فيه

🔹SQL server
بتحول VS Code لسيرفر قواعد بيانات كامل عن طريق إنك تجرب الـQueries و تتأكد منها قبل ما تضيفها ف البرنامج بتاعك.

🔹 SVG Viewer
تقدر من خلاله تشوف الصور الـSVG من غير ما تحتاج لبرامج خارجيه ، و كمان تقدر تحولها لـPNG أو تعملها URL

🔹Material Icon Theme
بيعملك الـFile Icon علشان تكون عارف ال file دا الـ Extension بتاعه ايه

🔹IntelliSense for CSS class names in HTML
بيشوف كل فايلات الـ CSS اللي ف ال project بتاعك وبيعملها Cash وانت شغال بيبدأ يعملك auto complete لاسماء ال classes

🔹 ESLint
بتستخدم مجموعة من القواعد و تحلل الكود بتاعك بهدف إنها تحسنه.

🔹 CSS Peek
و دي من خلالها بتقدر تشوف كود ال CSS إللي بيأثر على الـTag إللي إنت عنده.

🔹 Faker
بتوفرلك بيانات وهميه للتجربة زي أسماء أو أرقام أو صور و حاجات تاني.

🔹Live Server
و دي بقى بتعمل تحديث لبيانات المتصفح تلقائي من غير ما تعمل Refresh.

🔹HTML Boilerplate
بتسهل علينا بدال ما نكتب تاج head و body ف بنكتب html بس و بنلاقي هيكلة صفحة html كاملة إتبنت.


🔹Code OCR - Extract Code from image VS Code Extension
من خلاله تقدر تعمل Extract للـ Code لو موجود في صوره

🔹 CodeSnap
بيخليك تعمل Screenshot الكود بتاعك بسرعة و بشكل حلو

🔹Change Case
بتقدر من خلالها تغير الـtext بتاعك من Small لـCapital أو العكس.


🔹One Monokai Theme
بتقدر من خلالها تغير الوان VS Code و لون الكود بتاعك.

🔹 Minify
بتساعدك تعمل ملفات صغيره لملفاتك و بتدعم HTML, CSS, JS.

🔹 Auto CloseTtag
و دا علشان لو بتنسى تقفل الـTag بتاعك فدا بيقفلك الـTag تلقائي.


🔹 Open in Browser
من خلاله تقدر تفتح البروجكت على الـ Browser من و انت في VSCode بمجرد ما تعمل Alt + B

أفضل 5 مكتبات جافاسكربت قد تحول مسار مشروعك وتبرز إبداعك

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

1. ANIME.JS
مع انتشار الأنيميشن والتفاعلات الدقيقة، برزت مكتبة anime.js كأداة مرنة تتيح لك إضافة حركة جذابة لموقعك. متعددة الاستخدامات، تعد هذه المكتبة فرصة رائعة لتطوير مهاراتك وإثراء مشاريعك بلمسات إبداعية.

2. AOS.JS
كإضافة مميزة لمكتبة jQuery، تقدم AOS.JS أكثر من 28 تأثيرًا مختلفًا لتحريك العناصر وتأثيرات التسهيل بشكل جمالي عند تمرير الصفحة، مما يضيف بُعدًا جديدًا لتجربة المستخدم.

3. D3.JS
لمحبي البيانات والراغبين في عرضها بطريقة جذابة، D3.js توفر الأدوات اللازمة لإضفاء الحيوية على هذه البيانات باستخدام HTML، SVG، وCSS، مما يجعل عرض البيانات أكثر تفاعلًا وجاذبية.

4. OWL-CAROUSEL
في عالم تصميم المواقع، بقت السلايدرز (carousels) عنصر أساسي، وOWL Carousel تقدم حلاً سهل التركيب ومتوافق مع كل المتصفحات، مما يجعلها خيار مثالي لعرض المنتجات والصور بشكل احترافي.

5. CHOREOGRAPHER-JS
كمكتبة بسيطة وسهلة الاستخدام، Choreographer-JS تساعد في إنشاء تأثيرات حركية ولمسات سحرية باستخدام CSS، مما يثري الموقع بأنيميشن مميزة وجذابة.

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

مالذي يميز Tailwind CSS عن بقية التقنيات واطر العمل ؟


- تخصيص لا حدود له: يوجد لدى Tailwind css نظام التخصيص المتقدم حيث يمكنك جعل تصميماتك تبرز بسهولة.

- تصميم ومنطق مفصولين: احصل على واجهات مستخدم رائعة دون تعقيد في ترتيب ملفات التطبيق، مما يضمن سهولة التطوير.

- أداء مثالي: مع Tailwind، الملفات المستخدمة حجمها قليل بفضل إزالة الكلاسات غير المستخدمة، لتحصل على سرعة عرض فائقة.

- تحكم سحري في التصميم: باستخدام Tailwind تستطيع التحكم في التصميم بكل سهولة ، دون الحاجة إلى كتابة CSS من الصفر.

- سرعة فائقة في التطوير: وفر وقتك بالابتعاد عن التنقل المستمر بين ملفات HTML وCSS، واستمتع بعملية تطوير أسرع.


Tailwind CSS هي الاختيار المثالي للمطورين الذين يطمحون لتحقيق التميز والابتكار في تصميماتهم، دون التضحية بالأداء أو الكفاءة.

ايه هو ال Docker✨️
ليه ال Docker مهم
ال Docker image vs Docker container
ال Docker extension ل VS Code

 
⭐️قبل ما اعرف ال Docker تعالى نضرب مثال يوضح وظيفته
لو انت شخص بيحب الالعاب, بعد اي لعبة بتنزلها في شوية حجات محتاج تسطبها قبل ما تشغل اللعبة زي DirectX, .NET Framework, إلخ
بعد كدا تقدر تشغل اللعبة عادي

⭐️طب افترض لو العبة كانت محتاجه حجات تانيه اكتر وكمان كل حاجه فيهم ليها version معين مينفعش اللعبة تشتغل من غيره, الموضوع اكيد هيكون صعب
تخيل لو عرفنا نوصل لطريقه نقدر من خلالها نحمل اللعبة علي الجهاز بتعنا وكل المطلوب مننا اننا نشغل اللعبة فقط بدون ما نشغل دماغنا هي محتاجه ايه
دا بالظبط هو ال Docker

⭐️ال Docker هو برنامج بيسمحلك انك ت create virtual operating system وتنزل عليه كل حاجه انت محتاجها عشان تحط عليه المشروع بتاعك وتكون قادر انك تشيرو مع اي حد من زملائك ويشتغل عليه بدون اي مجهود منهم لإعداد ال environment الخاصة بالبروجيكت

 
⭐️كل اللي أنت بتعمله إنك بتنزل برنامج الـ Docker عندك على الجهاز ، وبعدها بتعمل عندك فولدر بأي اسم بيمثل البرنامج بتاعك وبتعمل فيه ملف اسمه Dockerfile ، وجوة الملف ده بتكتب شوية أوامر ، الأوامر دي بتشمل نظام التشغيل اللي عايز تنزله ، وايه البرامج اللي عايز تنزلها جواه ، ولو في ملفات عايز تنقلها على نظام التشغيل ده عشان تشغل البرنامج بتاعك هتنقلها فين وهكذا.

⭐️بعد اما بتخلص بتنفذ أمر معين ليه علاقة بالـ Docker جوة الفولدر عشان يعمل حاجة اسمها Build ، الـ Build ده بيمسك الـ  Dockerfile اللي أنت كتبته ويقراه وينزل شوية الحاجات اللي أنت كتبتها بطريقة معينة وبيعملك حاجة اسمها Image.

⭐️من أول ما تتعمل الـ Image هنا بيبدأ السحر بتاع الـ Docker.
الـ Image دي هي الحاجة اللي بتقدر تخلق منها حاجة اسمها Container ، الـ  Container ده بقى يا سيدي عبارة عن مكان في الميموري شغال على جهازك عليه كل الـ Environment اللي أنت نزلتها بالبرنامج بتاعك ، يعني بمعنى أصح أنت على الجهاز بتاعك بقيت مشغل نظام تشغيل كامل عليه البرنامج بتاعك بكل البرامج اللي محتاجها كأنهم برنامج واحد نازل على جهازك وبتستخدمه.

⭐️أنت كمان تقدر تخلق من الـ Image دي أكتر من Container يشتغلوا في نفس الوقت على جهازك وكل واحد منهم معزول عن التاني ، كأنك مشغل نظامين تشغيل على جهازك ببرامجهم ، وتقدر تدخل على أي واحد منهم عن طريق الـ Terminal بحبة أوامر ليها علاقة بالـ Docker.

💡لو جربت تبص على اللوجو بتاع الـ Docker بعد الكلام اللي احنا قولناه ده هتقدر تفهم هو ليه متصمم بالشكل ده.

⚡️ال Docker extension ل VS Code⚡️
عشان تعمل اي خطوه من الخطوات السابقة, الموضوع بيكون صعب نوعا ما علي المبتدأين واحيانا المحترفين كمان, عشان كدا Microsoft عملت extension ل VS Code اسمها Docker تقدر من خلالها:

🎈create Docker images
🎈build Docker images
🎈run Docker containers
🎈debug Docker containers
وكمان ممكن ال extension تساعدنا عشان تعمل image خاص للمشروع بتاعنا من خلال ال command Add Docker files to workspace

مهم انك تظبط شكل البروفايل بتاعك علي Github علشان هيفيدك في الشغل كتير ... وطبعا كلنا عارفين اهميه Github😁

لو عاوز بقا تظبط شكل الحساب بتاعك علي Github و مش فاضي تكتب ملف الـReadMe او مش بتعرف تكتبة🤔
‏Github ذات نفسها موفرالك موقع drag and drop بكل بساكه عليه بعد كدة بتعملة Generate للأكونت بتاعك

الرابط : https://profile-readme-generator.com/

ودي شوية تيمبليت جاهزه ممكن تشوفهم برضه❤️😍:

‏ https://github.com/durgeshsamariya/awesome-github-profile-readme-templates/tree/master/templates

‏ https://github.com/kautukkundan/Awesome-Profile-README-templates/tree/master/multimedia

ما هو ال Middleware في Asp.net؟

تخيل معايا لو عندك امتحان اونلاين على Google Form
بعد ماجاوبت ع الاسألة وعملت ارسال للاجابة , النتيجة بتاعتك ظهرت
مش ملاحظ حاجة‼️

الفترة القصيرة مابين ارسال الاجابة وظهور النتيجة حصلت على طول كده؟
طبعا لا كان فيه شوية اجراءات كده حصلت الاول زي مثلا التأكد من اسمك والميل بتاعك والحاجات دي

⭐️وبكده ممكن نقدر نعرف ال Middleware
هو عبارة عن وسيط يتحقق من بعض الاشياء بعد ارسال المستخدم لبيانات معينه وقبل الرد على المستخدم بناءا على تلك البيانات
✨️او ببساطة كده هو الكود اللي بيتنفذ خلال الفترة بين ال Request و ال Response✨️

فيه عندنا methods 3 بنستخدمهم علشان نضيف middleware وهما :
app.Use & app.Run & app.Map

طيب ايه الفرق؟
🔻app.Use
 اقدر من خلالها اني استخدم next.Invoke() فتقدر انها تروح للمرحلة اللي بعدها.

🔻app.Run  
ده اول ما الريكويست يروح للمرحلة دي فالريكويست هيبدأ يتنفذ ومش هيروح لاي مرحلة بعدها

🔻app.Map
 لو انا عايز ريكويست معين يعدي علي مراحل معينه مختلف عن باقي ال requests

انواع ال Middleware كتيره منها ماهو جاهز كـ Package او ممكن تكتب ال Middleware الخاص بيك زي المثال اللي تحت ف ال comments

في استخدامات تانيه كتير لل Middleware
زي مثلا ال Authentication و ال Validation

مثال أكثر تفصيلاً
عندما تقوم بشراء شئ ما اونلاين، هل يتم تنفيذ طلبك على الفور؟ كلا بل يتم التحقق من بعض الأمور الهامة مثل: -هل قُمت بتسجيل الدخول على الموقع؟ -هل قُمت بإدخال معلومات مهمة مثل عنوانك ورقم هاتفك للتواصل معك عند توصيل طلبك -وأشياء اخرى كثيرة كل هذه الأشياء يمكن التحقق منها بإستخدام الـ Middlware، والكود التالي يوضح الأمر

عايزين نعمل مواقعنا الإلكترونية أسرع وأحسن؟ يلا نشوف ازاي نحسن أداء الموقع بتاعنا عشان ندي لزوارنا تجربة مستخدم فوق الرائعة وكمان نتقدم في نتائج البحث.

هنا 9 نصائح ذهبية ليك:
1- ضغط الصور: استعمل أدوات زي TinyPNG أو ImageOptim عشان تقلل حجم الصور مع الحفاظ على جودتها.
2- خفف حجم ملفات CSS وJavaScript: دمج وضغط الملفات دي مهم جداً عشان تقلل عدد الطلبات وزمن التحميل، وتأكد إنك بتستخدم أحسن الطرق في الترتيب وإزالة أي كود مش مستخدم.
3- استفيد من التخزين المؤقت: خلي المتصفح يخزن نسخ مؤقتة من الملفات على جهاز المستخدم لتسريع التحميل في المرات الجاية.
4- تحسين CSS وJavaScript: تأكد تاني إنك بتستخدم أحسن الممارسات للتحسين.
5- استخدام خوارزميات الضغط: استخدم Gzip أو Brotli لتقليل حجم الملفات قبل ما توصل للمستعرض.
6- ركز على تحسين الواجهة الأمامية: تحسين تجربة المستخدم بتقليل وقت تحميل الصفحة الأولى وتجنب العناصر اللي ممكن تعطل التفاعل.
7- تحسين قواعد البيانات: شغل تحسين لاستعلامات قواعد البيانات واستخدم فهارس لتسريع البحث.
8- استخدام CDN: خدمات شبكة توزيع المحتوى بتساعد على تحسين سرعة تحميل الموقع للمستخدمين في أماكن مختلفة.
9- اختبار الأداء بانتظام: استعمل أدوات زي Google PageSpeed Insights وGTmetrix وWebPageTest لتحديد وتحسين أداء الموقع.

بالتطبيق الجد للنصائح دي، هتقدر تحسن من أداء موقعك جامد وتقدم تجربة مستخدم لا تنسى