عناصر HTML الدلالية

خارطة طريق جافاسكريبت لمطوري الواجهة الأمامية.

💡 نصيحة VSCode 🔴

إذا كنت ترغب في فتح المجلد الحالي في VSCode، فقط اكتب: code .

‏[`code` + مسافة فارغة + نقطة]

Structure of URL

لو انت front-end ف البوست ده هيوفر عليك كتير

اهم المواقع اللي بتقدملك  vector icons & stickers & SVG  اللي مش هتسغني عنها

- https://storyset.com/
- https://lottiefiles.com/
- https://www.humaaans.com/
- https://www.manypixels.co/
- https://blush.design/
- https://lnkd.in/dt4FhB52
- https://www.vecteezy.com/
- https://www.flaticon.com/

دورة حياة الـ HTTP Request من المتصفح إلى الخادم والعكس
عند إدخال رابط في المتصفح، تبدأ رحلة الطلب (Request) كالتالي:

تحويل الرابط إلى عنوان IP:

المتصفح يسأل خدمة DNS عن عنوان الـ IP الخاص بالرابط.
بعد الحصول على الـ IP، يتم تخزينه مؤقتًا (Cache) لفترة قصيرة.
فتح اتصال مع الخادم:

يتم استخدام الـ IP لإنشاء اتصال TCP مع الخادم.
إذا كان الاتصال HTTPS، يتم استخدام بروتوكول TLS لتشفير الاتصال.
إعداد الطلب:

يتم تحديد طريقة الطلب (مثل GET).
تضاف الرؤوس (Headers) التي تحتوي على معلومات مثل الكوكيز ونوع البيانات.
يتم إضافة أي بيانات في الجسم (Body) إذا لزم الأمر.
إرسال الطلب:

قد يمر الطلب عبر خدمات مثل Cloudflare للحماية، أو موازن تحميل لتوزيع الطلبات.
عند وصول الطلب إلى الخادم، يتم فلترته بجدار الحماية، ثم توجيهه عبر الوكيل العكسي (مثل Nginx) إلى الخدمة المطلوبة.
معالجة الطلب:

يقوم إطار العمل الخلفي (Backend Framework) بمعالجة الطلب وإعداد الاستجابة (Response).
إرجاع الاستجابة:

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

اتعلمت tailwind بعد ال bootstrap وبيواجهك مشكلة ال Components الجاهزة وبتحتاج تعمل كل حاجة ب ايدك

الحل في flowbite

‏ https://flowbite.com/docs/getting-started/introduction/

ده موقع جاهز بيقدملك Components جاهزة ويعتبر شبه bootstrap في كل اللي بتحتاجة وبيدعم معظم ال framework 
كل اللي محتاجة تمشي علي ال documentation وهيعتبر كانك مستخدم bootstrap  

‏GET، POST، PUT، DELETE... دي قائمة بأشهر "الأفعال" في HTTP في مخطط واحد. هتلاقي الطريقة لتحميل ملف PDF عالي الدقة في الآخر.

‏HTTP GET
الطلب ده بيجيب مورد من السيرفر. مفيش مشكلة لو طلبته كذا مرة، النتيجة بتبقى هي هي.

‏HTTP PUT
الطلب ده بيحدث أو ينشئ مورد. يعني لو طلبته كذا مرة، هيحدث نفس المورد ومش هيعمله مرتين.

‏HTTP POST
الطلب ده بيتعمل لإنشاء موارد جديدة. ممكن لو طلبته مرتين، يعمل نفس المورد مرتين.

‏HTTP DELETE
الطلب ده بيمسح مورد. حتى لو طلبته كذا مرة، هيمسح نفس المورد.

‏HTTP PATCH
الطلب ده بيعمل تعديلات جزئية على مورد معين.

‏HTTP HEAD
الطلب ده بيطلب استجابة شبه GET بس من غير جسم الاستجابة.

‏HTTP CONNECT
الطلب ده بيعمل قناة اتصال (نفق) للسيرفر اللي اتحدد بواسطة المورد المستهدف.

‏HTTP OPTIONS
الطلب ده بيشرح الخيارات المتاحة للتواصل مع المورد المستهدف.

‏HTTP TRACE
الطلب ده بيعمل اختبار رجوع للرسالة على طول المسار للمورد المستهدف.

يسرّنا أن نعلن عن فريقنا المتكامل من المبرمجين المحترفين، المتخصصين في تقديم خدمات برمجية عالية الجودة لمختلف المنصات وباستخدام أحدث التقنيات. نقدم لكم:

• تطوير مواقع إلكترونية: تصميم وتطوير مواقع متكاملة بمختلف أنواعها، من المواقع الشخصية إلى المتاجر الإلكترونية.

• تطوير تطبيقات iOS: بناء تطبيقات أيفون مبتكرة تلبي احتياجات السوق وتحقق رضا المستخدمين.

• تطوير تطبيقات Android: إنشاء تطبيقات أندرويد عالية الأداء تتوافق مع مختلف الأجهزة.

• تطوير تطبيقات سطح المكتب: تطوير برامج سطح المكتب القابلة للتخصيص لتتناسب مع احتياجاتكم المهنية والشخصية.

• تطوير ألعاب: تصميم وتطوير ألعاب متكاملة من الفكرة إلى التنفيذ، مع الاهتمام بكافة التفاصيل لتوفير تجربة لعب مميزة.

• التصميم: تقديم حلول تصميم مبتكرة وجذابة تشمل واجهات المستخدم وتصميمات جرافيكية مميزة.

• إنشاء وتطوير بوتات: تطوير بوتات مخصصة تساعد في أتمتة الأعمال وتحسين الكفاءة التشغيلية.

📩 للتواصل والاستفسار، يُرجى مراسلتنا عبر الرسائل الخاصة.
@adela7med

نحن هنا لخدمتكم وتحقيق رؤيتكم الرقمية بأفضل صورة ممكنة.

🚀 يسر فريق برمجيات الريادة الذكية أن يعلن عن إطلاق نظام إدارة قطع الغيار الشامل! 🛠️

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

‏✨ مميزات النظام:

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

‏🔒 أمان البيانات: نظامنا مزود بميزات أمان متقدمة تشمل التحقق من الهوية، تشفير البيانات الحساسة، وإدارة الجلسات بشكل آمن.

‏⚙️ التكامل: يتكامل النظام بسهولة مع أنظمة إدارة المخزون والفوترة لضمان سير العمل بسلاسة وكفاءة.

‏🎯 نظام مرن وقابل للتخصيص: يمكن تعديل النظام وتخصيصه بالكامل ليناسب احتياجات عملك، سواء من حيث التصميم أو إضافة ميزات جديدة.

‏🛡️ مواكب لأحدث التقنيات: تم تطوير النظام باستخدام أحدث الأدوات والتقنيات لضمان أفضل أداء وأمان.

‏📲 لا تفوت فرصة امتلاك نسختك وتجربة هذا النظام الفريد!

‏للمزيد من التفاصيل أو للحصول على نسخة تجريبية، يمكنكم التواصل معنا 📥

@adela7med

يسر فريق برمجيات الريادة الذكية 🎯 أن يقدم لكم نظام فحص الحماية (Security Guard Scanner) 🔒، الحل الأمثل لحماية مواقعكم الإلكترونية من الثغرات الأمنية والهجمات السيبرانية. نظامنا مصمم خصيصًا لفحص المواقع الإلكترونية بشكل شامل وتقديم تقارير مفصلة حول الثغرات المكتشفة.

‏ميزات النظام:
‏- فحص شامل للثغرات 🛡️: يغطي نظامنا مجموعة واسعة من الثغرات الأمنية بما في ذلك:
‏ - ثغرات XSS (البرمجة عبر المواقع) 🕸️.
‏ - ثغرات SQL Injection (حقن قواعد البيانات) 💾.
‏ - ثغرات CSRF (تزوير الطلب عبر المواقع) 🚨.
‏ - ثغرات أمن الخادم، أمان التكوين، البرمجيات، التحكم في الوصول، وتحميل الملفات غير الآمنة.

‏- واجهة مستخدم متقدمة وسهلة الاستخدام 👨‍💻:
‏ - تصميم نظيف ومتجاوب باستخدام Bootstrap لسهولة الوصول والاستخدام.
‏ - تنقل بديهي للوصول السريع إلى الأقسام المختلفة من الفاحص.
‏ - عرض تقارير مفصلة تشمل مستويات المخاطر، CVE، التوصيات، والنقاط النهائية المتأثرة.

‏- تقارير شاملة وقابلة للتنزيل 📄:
‏ - تقارير قابلة للتنزيل بتنسيق HTML تشمل معلومات عن الثغرات الأمنية وبيانات استخبارات التهديدات.
‏ - تقارير مخصصة تحتوي على بيانات إضافية مثل WHOIS، ترتيب Alexa، نوع الخادم، ونوع المحتوى.

‏ ميزات الخلفية:
‏- لفحص التلقائي** ⚙️:
‏ - يتم تشغيل الفحوصات الأمنية تلقائيًا باستخدام برنامج Python المتكامل مع Laravel لإجراء الفحوصات وجلب البيانات.
‏ - يدمج مع أدوات خارجية مثل PTT لفحص الثغرات واستخبارات التهديدات من AlienVault OTX.

‏- دمج استخبارات التهديدات🔍:
‏ - نظامنا يجلب بيانات استخبارات التهديدات بشكل مباشر من مصادر موثوقة مثل AlienVault OTX، ويقدم معلومات دقيقة عن التهديدات الأمنية.

‏- معالجة البيانات والتخزين الآمن 💼:
‏ - تحليل دقيق للنتائج لاستخراج المعلومات الهامة وتخزينها بتنسيق JSON لسهولة الاسترجاع والمعالجة لاحقًا.

‏- التزام بأعلى معايير الأمان 🛡️:
‏ - يضمن النظام تنفيذ آمن لأوامر shell لمنع هجمات الحقن والتحقق من إدخال المستخدم لضمان سلامة النظام.

‏النقاط التقنية البارزة:
‏- تكامل متقدم مع Python وLaravel 🤖:
‏ - ينفذ النظام عمليات الفحص الأمني عبر تكامل بين Python وLaravel، مما يتيح كفاءة عالية في الأداء وسرعة في توليد التقارير.
‏
‏- العمليات غير المتزامنة🚀:
‏ - يتم تنفيذ الفحوصات بشكل غير متزامن لضمان توليد التقارير بسرعة دون التأثير على أداء النظام.

‏- إعدادات مخصصة وأمان معزز🔒:
‏ - يستخدم النظام متغيرات بيئية لإدارة مفاتيح API والمعلومات الحساسة بأمان تام.

‏إذا كنت تبحث عن نظام فعال ومتكامل لحماية موقعك الإلكتروني، فإن فريق برمجيات الريادة الذكية هنا لتقديم أفضل الحلول. تواصل معنا الآن للمزيد من التفاصيل 📩.

@adela7med

ورقة الغش الخاصة بـ SQL

لو انت شغال في الـ 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

 
 

ازاي تحسن مهاراتك كمطور.

نظام الملفات في لينكس

فاكر إن موقعك باين حلو على الموبايل؟

استنى لما تشوفه على شاشة 1920 بكسل!

اتعلم كويس الـ CSS breakpoints عشان تظبط كل بكسل.

فيه 6 أساليب معمارية لـ API لازم تعرفهم:

REST: اختصار لـ “Representational State Transfer”، وهو أسلوب معماري بيستخدم في تصميم التطبيقات المتصلة على الشبكة بيسمح بالتواصل بين المكونات بشكل “stateless”.

GraphQL: ده لغة استعلامات وبيئة تشغيل APIs، بيتيح للعميل يطلب البيانات اللي محتاجها بالظبط من غير زيادة.

WebSocket: بروتوكول للتواصل بيوفر قنوات اتصال “full-duplex” يعني الاتصال بيكون في الاتجاهين في نفس الوقت على اتصال TCP واحد، وده مناسب لتطبيقات الوقت الفعلي.

gRPC: إطار عمل مفتوح المصدر وذو أداء عالي لـ “Remote Procedure Call” بيستخدم HTTP/2 للنقل و Protocol Buffers كواجهة تعريف للغة.

MQTT: بروتوكول مراسلة خفيف بيستخدم لأجهزة الاستشعار الصغيرة والموبايلات، مناسب جداً للشبكات ذات النطاق الترددي المنخفض أو اللي فيها تأخير عالي أو غير موثوقة.

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

أوامر Git - الأساسيات

"نحن فريق برمجيات الريادة الذكية نعلن بفخر عن انطلاق موقعنا الإلكتروني الجديد! 🌐💻 نهدف من خلاله إلى تقديم خدماتنا التقنية المتميزة في تطوير المواقع والتطبيقات بكل احترافية. زورونا على smartleadtech.com واكتشفوا كيف يمكن لفريقنا مساعدتكم في تحقيق النجاح الرقمي. #فريق_الريادة_الذكية #إطلاق_الموقع #خدمات_تقنية"

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

‏🔍 تعرف على أكواد الاستجابة HTTP الأكثر شيوعًا:

‏•1xx: معلوماتي - زي 100 Continue عشان الطلبات تكمل.
‏•2xx: نجاح - زي 200 OK لما الطلب يتنفذ بنجاح.
‏•3xx: إعادة توجيه - زي 301 Moved Permanently لما المورد يتنقل بشكل دائم.
‏•4xx: أخطاء العميل - زي 404 Not Found لما المورد المطلوب مش موجود.
‏•5xx: أخطاء الخادم - زي 500 Internal Server Error لما يحصل خطأ غير متوقع في الخادم.

‏دايمًا افتكر إن الفهم العميق للأكواد دي هيساعدك تحل المشاكل بسرعة ويحسن من جودة التطبيقات اللي بتطورها. 🛠️