دي شويه 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 لتحديد وتحسين أداء الموقع.

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

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

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

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

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

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

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

أفضل موقع للمبرمجين الذين لا يريدون أو ليس لديهم الوقت لتصميم واجهة الموقع و تنسيق الألوان و العناصر و اختيار النصوص.

‏موقع Free Figma Templates تجد فيه كل من:
‏- Website Designs
‏- Mobile Designs
‏- Illustrations & Icons
‏- Wireframes & Design Systems
‏و الأهم من هدا تحميل الملفات Templates مرفقة بالصور و الخطوط.

‏الموقع: ⁦ www.freefigmatemplates.com/ ⁩

هرمش / harmash ,هو موقع لتعلم البرمجة باللغة العربية.
المحتوى في الموقع كله في شكل مكتوب و ليس فيديوهات.

الدورات الموجدة في الموقع:
- أساسيات البرمجة
- قواعد البيانات
- HTML
- CSS
- جافاسكريبت
- بايثون
- الخوارزمات وهياكل البيانات
- Java
- C++
- SQL

بالإضافات للتحديات البرمجة و المقالات المتفرقة في كل ما يخص البرمجة

الموقع: https://harmash.com/

جماعة ال front end 🪄
مواقع مفيدة جدا لموقعك الإلكتروني
‏Amazing Website | Use For Css

‏1- Make Some Waves
موقع يوفر أداة مجانية لإنشاء موجات SVG بطريقة بسيطة وسهلة

‏ https://getwaves.io/
___

‏2- Fancy Border Radius
موقع fancy-border-radius يقدم أداة مجانية لإنشاء أشكال معقدة وجذابة باستخدام CSS border-radius.

‏ https://9elements.github.io/fancy-border-radius/

___

‏3- CSS Buttons
يعتبر أداة مفيدة لتوفير مكتبة شاملة من العناصر الجاهزة التي يمكن استخدامها في تصميم واجهات المستخدم.

‏ https://uiverse.io/elements

___


‏4- SVG Background
هو أداة مفيدة لإنشاء وتوليد صور خلفيات (Backgrounds) بشكل سريع وسهل.

‏ https://bgjar.com/#google_vignette

___

‏5- CSS Grid
هو أداة مفيدة لإنشاء وتوليد أنظمة الشبكات باستخدام CSS Grid بشكل سهل وسريع.

‏ https://cssgrid-generator.netlify.app/?ref=producthunt

___

‏6- Smooth Shadow
باختصار، موقع هو أداة ممتازة لمصممي الويب الذين يرغبون في إنشاء تصاميم حديثة وأنيقة باستخدام تقنية Neumorphism بسهولة وفعالية.

‏ https://neumorphism.io/#e0e0e0

موقع اليوم يعتبر من أحسن المواقع المفيدة جدا و اللي يستحق تحافظ عليه.

موقع GoalKicker يحتوى على أكثر من 50 كتاب إلكتروني مجاني في مجال التقنية, في أكثر من مواضيع لغات برمجة, أطر عمل (Frameworks) و أدوات تقنية.

رابط الموقع: https://books.goalkicker.com

لو عندك ملف JSON وحابب تستكشفه او تفهمه او تعمله visualize
ممكن ترفعه هنا على الموقع ده وهو هيحوله ل Graph
لينك الموقع : https://jsoncrack.com/

جبت لكم موقع ممتاز بيقدملك مصادر لأهم أُطر العمل الموجودة في مجال الويب 🔻

‏- Angular 
‏- React
‏- Vue
‏- Qwik
‏- Solid.js
‏- GraphQL
‏- Node.js 
‏- Svelte
‏- Deno

‏⁦ framework.dev⁩

‏عشان تعرض pdf من خلال ال html بكل بساطة

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

كل حاجة بتتشرح بيقولك امثلة للطرق السيئة وامثلة تانية للطرق الصحيحة اللي لازم تكتب الكود بيها

‏ https://github.com/airbnb/javascript

‏اهم المواقع لحل مسائل Problem Solving :-

‏1 - موقع Codewars :
‏⁦ codewars.com ⁩

‏2- موقع LeetCode :
‏⁦ leetcode.com ⁩

‏3- موقع HackerRank :
‏⁦ hackerrank.com ⁩
‏وده انصح بيه المبتدئين.

‏4 - موقع Topcoder :
‏⁦ topcoder.com ⁩

‏5 - موقع Coderbyte :
‏⁦ coderbyte.com ⁩

‏6-موقع Codeforces:

‏⁦ codeforces.com ⁩

‏شوية اسئلة Interview Front End ممكن تتسالها لو عندك مقابلة قريب
‏و لو معندكش هتفيدك برضو لو فى حاجه واقعه منك او حاجه اول مرة تسمع عنها ممكن تاخد الاسئلة تبحث عنها و تزود معلوماتك

‏1 - What is the difference between dom and bom
‏2 - What is the event loop?
‏3 - What is the difference between callback and promise
‏4 - What is the react helmet?
‏5 - What is nextjs?
‏6 - What is the difference between SPA & SSG & SSL & SSR
‏7 - How to improve performance in the react app
‏8 - What is the reaction cycle?
‏9 - What is the lazy function?
‏10 - How do we use the design pattern in CSS?
‏11 - How to ensure the best SEO experience
‏12 - What are the solid principles?
‏13 - What is the difference between var & let & const
‏14 - What is the difference between asynchronous function and synchronous function
‏15 - What is the difference between async and await and when to use them?
‏16 - What is the promise and what should I use?
‏17 - What is the difference between context and redux
‏18- What is the difference between next js and react helmet in seo
‏19 - What is the react query?
‏20 - What is the difference between formik and yup?
‏21 - What is usememo?
‏22 - What is hosting?
‏23 - What is call stack?
‏24 - What is it set data type ?
‏25 - What is the difference between use memo and use callback?
‏26 - What is the higher order function?