عمار الخوالدة

Members
  • عدد منشوراتي

    4
  • تاريخ الإنضمام

  • تاريخ اخر زياره

السمعه بالموقع

3 Neutral

عن العضو عمار الخوالدة

  • الرتبه
    مبدع جديد
  1. السلام عليكم ورحمة الله وبركاته، سنلقي اليوم نظرة سريعة لأهم أدوات المطورين المرفقة مع متصفحي Chrome و Firefox، وينطبق هذا الشرح على أغلب المتصفحات التي تستخدم Webkit أو Gecko. يمكنك فتحها في كروم وفايرفوكس بالضغط على F12 أو Ctrl+Shift+I أولا: Inspect elements. هذه الخاصية تُظهر لك عناصر HTML في قائمة بحيث يمكنك توسيع العنصر الأب لرؤية العناصر الأبناء، وبمجرد الضغط على أي عنصر، ستظهر لك جميع خصائص CSS المطبقة على ذلك العنصر سواء كانت inline-style أو في ملف css منفصل، أو بداخل <style> إضافة إلى الخصائص الموروثة عن العناصر ذات المستوى الأعلى، ومن أهم ما يميز هذه الخاصية إمكانية تعديل وإضافة وحذف أي عنصر من عناصر HTML أو أي خاصية CSS مطبقة على ذلك العنصر بحيث تظهر التعديلات مباشرة على المتصفح وتختفي بمجرد تحديث الصفحة، وتفيد هذه الخاصية بشكل كبير أثناء التصميم، فبإمكانك تجربة عدة أشكال أو أنماط للعنصر دون الحاجة لتعديل الكود الأصلي أو تحديث الصفحة كلما عدلت شيئا، وبمجرد وصولك للشكل الذي تريد كل ما عليك فعله هو نسخ الخصائص التي أضفتها ولصقها في مشروعك. ويمكنك بالضغط على زر computed (الموجود فوق خصائص css في المتصفحين) مشاهدة مقياس العوامل المؤثرة في حجم العنصر (margin/padding/border/size) بشكل منظم كما في الصورة: ولتسهيل الأمر وتخفيف العناء في البحث عن عنصر HTML الذي تريد اختياره وفرت لك أدوات المطورين هذه الأداة : وبمجرد الضغط عليها يمكنك اختيار العنصر من الصفحة مباشرة دون الحاجة للبحث في كود HTML. ثانيا: اختبار توافقية التصميم مع مختلف أحجام الشاشات. يمكنك الوصول إلى هذه الخاصية بالضغط على ctrl+shift+m في المتصفحين أو من خلال الضغط على الأيقونة التي على شكل هاتف محمول. ولعمل تصميم متجاوب مع جميع الأجهزة بسرعة وسهولة يمكنك استخدام أطر عمل جاهزة، تعرف على أفضل أطر العمل : ثالثا: Console. هي أداة مفيدة لمبرمجي جافاسكربت، حيث أنها مساحة تُظهر الأخطاء البرمجية في جافاسكربت، أو بعض المعلومات المهمة التي يتم طباعتها باستخدام جافاسكربت، إضافة إلى إمكانية كتابة أكواد جافاسكربت وتنفيذها مباشرة على الصفحة (في الــ console الخاص بفايرفوكس توجد خصائص أكثر حيث يمكنك فلترة النتائج لعرض نتيجة أي XHR request أو عرض المشاكل الموجودة في css) مقدمة في جافاسكربت : رابعا: Networking. هذه الأداة من أهم الأدوات أثناء اختبار الموقع حيث ستظهر لك جميع الاتصالات التي تقوم بها الصفحة، فالصفحة تتصل بعدد من ملفات CSS و JS إضافة إلى طلبات XHR ، ويمكنك عرض وفلترة جميع هذه الطلبات فيمكنك إظهار Requests Headers و Response Headers إضافة إلى معرفة السرعة التي تم بها معالجة الطلب مما سيمكنك من معرفة الملفات أو الطلبات التي تأخذ وقتا أطول ومحاولة معالجة الأمر. هنا شرح لأدوات Networking في متصفح كروم: وهذه هي أدوات Networking في فايرفوكس: نلاحظ وجود خاصية باسم Throttling في كروم، هذه الخاصية مفيدة جدا، من خلالها بإمكانك اختيار سرعة اتصال الإنترنت لديك، تفيد هذه الخاصية في محاكاة عمل الموقع لدى أصحاب الاتصال الضعيف، إضافة إلى إمكانية اختبار الأمور التي تتم بشكل سريع عندك، مثل عرض كلمة Loading مثلا أو شيء متحرك يدل على تحميل مكونات الصفحة، غالبا ستتم بشكل سريع جدا لديك ولن تلاحظها ولن تعلم إذا كانت تعمل بشكل جيد لأنك تشغل الموقع بشكل محلي فسيكون تحميل الصفحات سريعا جدا، فتساعد هذه الخاصية على اختبار هذه الأمور التي قد لا تلاحظها بالعادة إلا بعد رفع الموقع إلى السيرفر. نلاحظ أن الخاصية غير موجودة في قسم Networking في فايرفوكس، لكنهم أدرجوها ضمن أداة اختبار التوافقية مع أحجام الشاشات كما في الصورة : بالطبع هذا ليس شرحا كاملا لأدوات المطورين في المتصفحات، لكنني أحببت أن ألقي الضوء على أهم الأدوات المستخدمة بكثرة، يمكنك الاطلاع أكثر على الأدوات الخاصة بكروم من هذه الروابط: https://developer.chrome.com/devtools https://developers.google.com/web/tools/chrome-devtools/ وهنا مراجع لأدوات المطورين في فايرفوكس: https://developer.mozilla.org/son/docs/Tools https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox
  2. السلام عليكم ورحمة الله وبركاته، سنلقي اليوم نظرة سريعة لأهم أدوات المطورين المرفقة مع متصفحي Chrome و Firefox، وينطبق هذا الشرح على أغلب المتصفحات التي تستخدم Webkit أو Gecko. يمكنك فتحها في كروم وفايرفوكس بالضغط على F12 أو Ctrl+Shift+I أولا: Inspect elements. هذه الخاصية تُظهر لك عناصر HTML في قائمة بحيث يمكنك توسيع العنصر الأب لرؤية العناصر الأبناء، وبمجرد الضغط على أي عنصر، ستظهر لك جميع خصائص CSS المطبقة على ذلك العنصر سواء كانت inline-style أو في ملف css منفصل، أو بداخل <style> إضافة إلى الخصائص الموروثة عن العناصر ذات المستوى الأعلى، ومن أهم ما يميز هذه الخاصية إمكانية تعديل وإضافة وحذف أي عنصر من عناصر HTML أو أي خاصية CSS مطبقة على ذلك العنصر بحيث تظهر التعديلات مباشرة على المتصفح وتختفي بمجرد تحديث الصفحة، وتفيد هذه الخاصية بشكل كبير أثناء التصميم، فبإمكانك تجربة عدة أشكال أو أنماط للعنصر دون الحاجة لتعديل الكود الأصلي أو تحديث الصفحة كلما عدلت شيئا، وبمجرد وصولك للشكل الذي تريد كل ما عليك فعله هو نسخ الخصائص التي أضفتها ولصقها في مشروعك. ويمكنك بالضغط على زر computed (الموجود فوق خصائص css في المتصفحين) مشاهدة مقياس العوامل المؤثرة في حجم العنصر (margin/padding/border/size) بشكل منظم كما في الصورة: ولتسهيل الأمر وتخفيف العناء في البحث عن عنصر HTML الذي تريد اختياره وفرت لك أدوات المطورين هذه الأداة : وبمجرد الضغط عليها يمكنك اختيار العنصر من الصفحة مباشرة دون الحاجة للبحث في كود HTML. ثانيا: اختبار توافقية التصميم مع مختلف أحجام الشاشات. يمكنك الوصول إلى هذه الخاصية بالضغط على ctrl+shift+m في المتصفحين أو من خلال الضغط على الأيقونة التي على شكل هاتف محمول. ولعمل تصميم متجاوب مع جميع الأجهزة بسرعة وسهولة يمكنك استخدام أطر عمل جاهزة، تعرف على أفضل أطر العمل : ثالثا: Console. هي أداة مفيدة لمبرمجي جافاسكربت، حيث أنها مساحة تُظهر الأخطاء البرمجية في جافاسكربت، أو بعض المعلومات المهمة التي يتم طباعتها باستخدام جافاسكربت، إضافة إلى إمكانية كتابة أكواد جافاسكربت وتنفيذها مباشرة على الصفحة (في الــ console الخاص بفايرفوكس توجد خصائص أكثر حيث يمكنك فلترة النتائج لعرض نتيجة أي XHR request أو عرض المشاكل الموجودة في css) مقدمة في جافاسكربت : رابعا: Networking. هذه الأداة من أهم الأدوات أثناء اختبار الموقع حيث ستظهر لك جميع الاتصالات التي تقوم بها الصفحة، فالصفحة تتصل بعدد من ملفات CSS و JS إضافة إلى طلبات XHR ، ويمكنك عرض وفلترة جميع هذه الطلبات فيمكنك إظهار Requests Headers و Response Headers إضافة إلى معرفة السرعة التي تم بها معالجة الطلب مما سيمكنك من معرفة الملفات أو الطلبات التي تأخذ وقتا أطول ومحاولة معالجة الأمر. هنا شرح لأدوات Networking في متصفح كروم: وهذه هي أدوات Networking في فايرفوكس: نلاحظ وجود خاصية باسم Throttling في كروم، هذه الخاصية مفيدة جدا، من خلالها بإمكانك اختيار سرعة اتصال الإنترنت لديك، تفيد هذه الخاصية في محاكاة عمل الموقع لدى أصحاب الاتصال الضعيف، إضافة إلى إمكانية اختبار الأمور التي تتم بشكل سريع عندك، مثل عرض كلمة Loading مثلا أو شيء متحرك يدل على تحميل مكونات الصفحة، غالبا ستتم بشكل سريع جدا لديك ولن تلاحظها ولن تعلم إذا كانت تعمل بشكل جيد لأنك تشغل الموقع بشكل محلي فسيكون تحميل الصفحات سريعا جدا، فتساعد هذه الخاصية على اختبار هذه الأمور التي قد لا تلاحظها بالعادة إلا بعد رفع الموقع إلى السيرفر. نلاحظ أن الخاصية غير موجودة في قسم Networking في فايرفوكس، لكنهم أدرجوها ضمن أداة اختبار التوافقية مع أحجام الشاشات كما في الصورة : بالطبع هذا ليس شرحا كاملا لأدوات المطورين في المتصفحات، لكنني أحببت أن ألقي الضوء على أهم الأدوات المستخدمة بكثرة، يمكنك الاطلاع أكثر على الأدوات الخاصة بكروم من هذه الروابط: https://developer.chrome.com/devtools https://developers.google.com/web/tools/chrome-devtools/ وهنا مراجع لأدوات المطورين في فايرفوكس: https://developer.mozilla.org/son/docs/Tools https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox
  3. السلام عليكم ورحمة الله وبركاته. سنشرح في هذه المقالة طريقة الاستفادة من منصة Transifex لترجمة مشاريعك ترجمة "بشرية" دقيقة بعيدا عن استخدام المترجمات الآلية. نبذة عن موقع Transifex: هي منصة متكاملة لترجمة المشاريع البرمجية، حيث يطرح المبرمج أو المسؤول عن ترجمة البرنامج ملف الترجمة الخاص بالبرنامج، ويمكنه تعيين فرق أو إدارتها لتسهيل عملية الترجمة إلى مختلف اللغات. هل الموقع مجاني ؟ في حال أردت التسجيل في الموقع كمترجم متطوع فتسجيل الحساب مجاني ويمكنك طلب الانضمام إلى الفرق للبدء بالمساعدة بالترجمة، أما في حال أردت نشر مشروعك لطلب المساعدة على الترجمة من المتطوعين في الموقع أو لتسهيل عملية الترجمة على فريق الترجمة لديك باستخدام هذه المنصة فسيكون نشر المشروع مجانيًا في حال كان مشروعك مفتوح المصدر. من يستخدم هذه المنصة؟ العديد من المواقع والبرامج المعروفة تستخدم Transifex لترجمة مشاريعها مثل Trello, Soundcloud, VLC وغيرها. كيف أنشر مشروعي (المفتوح المصدر) على المنصة؟ بعد تسجيل حساب جديد في الموقع إضغط على القائمة المجاورة لصورة المستخدم، هذه القائمة هي قائمة المنظمات التي اشتركت بها وتساعد في ترجمة مشاريعها، إضغط على Create Organization لإنشاء منظمة جديدة: ثم املأ النموذج بالمعلومات الصحيحة لمنظمتك أو فريقك، وضع علامة ☑️ على خيار Yes, my content has Open Source license ويجب أن يكون مشروعك في هذه الحالة مفتوح المصدر ومرخصا بإحدى الرخص المتعارف عليها للمشاريع مفتوحة المصدر (مثل GPL, MIT, Apache وغيرها) وسيُطلب منك إدخال رابط المستودع الخاص بمشروعك لاحقا. تم الآن إنشاء المنظمة الخاصة بك، عليك أن تقوم بإنشاء مشروع جديد بالضغط على سيظهر لك نموذج إنشاء المشروع، وسنشرح الخيارات واحدة واحدة: عليك أن تحدد في هذه الخانة نوع المشروع، private للمشاريع الخاصة التي لا تريد أن يطلع عليها إلا فريقك الخاص، public للمشاريع العامة، اختر public واختر My project is a non-commercial Open Source project في حال كان مشروعك مفتوح المصدر وغير ربحي (في حال لم يكن كذلك فلن يكون نشر مشروعك على المنصة مجانيا) ثم عليك تزويد Transifex برابط المستودع الخاص بمشروعك (على GitHub مثلا) حتى يتحققوا من الرخصة الخاصة بالمشروع: في هذه الخانة ستحدد نوع المشروع على Transifex من ناحية طريقة الترجمة، الطريقة الأولى هي File-based يجب عليك فيها أن ترفع ملف اللغات إلى الموقع ويقوم المترجمون بتصفح قائمة الكلمات وترجمتها، أما الطريقة الثانية (وهي طريقة جديدة في تاريخ كتابة هذه الكلمات) فهي تعتمد على Javascript حيث يقوم الموقع باستخراج جميع الكلمات من موقعك، ويعرض موقعك داخل نافذة مصغرة بحيث يمكنك الضغط على الكلمة التي تريد وترجمتها. وهذا مثال من موقع عالم البرمجة على طريقة عرض وترجمة الكلمات (لكن بالطبع لا يمكنني القيام بالترجمة فيجب إضافة مكتبة Javascript تزودني بها Transifex حتى تتمكن من تخزين الكلمات لديها مع الترجمات) : الخيار الأخير تحدد منه اللغة الأصلية لمشروعك واللغات التي تريد الترجمة إليها : كل ما بقي عليك فعله الآن هو دعوة المترجمين إلى المشروع وانتظار الترجمات الدقيقة 🙃
  4. السلام عليكم ورحمة الله وبركاته. سنشرح في هذه المقالة طريقة الاستفادة من منصة Transifex لترجمة مشاريعك ترجمة "بشرية" دقيقة بعيدا عن استخدام المترجمات الآلية. نبذة عن موقع Transifex: هي منصة متكاملة لترجمة المشاريع البرمجية، حيث يطرح المبرمج أو المسؤول عن ترجمة البرنامج ملف الترجمة الخاص بالبرنامج، ويمكنه تعيين فرق أو إدارتها لتسهيل عملية الترجمة إلى مختلف اللغات. هل الموقع مجاني ؟ في حال أردت التسجيل في الموقع كمترجم متطوع فتسجيل الحساب مجاني ويمكنك طلب الانضمام إلى الفرق للبدء بالمساعدة بالترجمة، أما في حال أردت نشر مشروعك لطلب المساعدة على الترجمة من المتطوعين في الموقع أو لتسهيل عملية الترجمة على فريق الترجمة لديك باستخدام هذه المنصة فسيكون نشر المشروع مجانيًا في حال كان مشروعك مفتوح المصدر. من يستخدم هذه المنصة؟ العديد من المواقع والبرامج المعروفة تستخدم Transifex لترجمة مشاريعها مثل Trello, Soundcloud, VLC وغيرها. كيف أنشر مشروعي (المفتوح المصدر) على المنصة؟ بعد تسجيل حساب جديد في الموقع إضغط على القائمة المجاورة لصورة المستخدم، هذه القائمة هي قائمة المنظمات التي اشتركت بها وتساعد في ترجمة مشاريعها، إضغط على Create Organization لإنشاء منظمة جديدة: ثم املأ النموذج بالمعلومات الصحيحة لمنظمتك أو فريقك، وضع علامة ☑️ على خيار Yes, my content has Open Source license ويجب أن يكون مشروعك في هذه الحالة مفتوح المصدر ومرخصا بإحدى الرخص المتعارف عليها للمشاريع مفتوحة المصدر (مثل GPL, MIT, Apache وغيرها) وسيُطلب منك إدخال رابط المستودع الخاص بمشروعك لاحقا. تم الآن إنشاء المنظمة الخاصة بك، عليك أن تقوم بإنشاء مشروع جديد بالضغط على سيظهر لك نموذج إنشاء المشروع، وسنشرح الخيارات واحدة واحدة: عليك أن تحدد في هذه الخانة نوع المشروع، private للمشاريع الخاصة التي لا تريد أن يطلع عليها إلا فريقك الخاص، public للمشاريع العامة، اختر public واختر My project is a non-commercial Open Source project في حال كان مشروعك مفتوح المصدر وغير ربحي (في حال لم يكن كذلك فلن يكون نشر مشروعك على المنصة مجانيا) ثم عليك تزويد Transifex برابط المستودع الخاص بمشروعك (على GitHub مثلا) حتى يتحققوا من الرخصة الخاصة بالمشروع: في هذه الخانة ستحدد نوع المشروع على Transifex من ناحية طريقة الترجمة، الطريقة الأولى هي File-based يجب عليك فيها أن ترفع ملف اللغات إلى الموقع ويقوم المترجمون بتصفح قائمة الكلمات وترجمتها، أما الطريقة الثانية (وهي طريقة جديدة في تاريخ كتابة هذه الكلمات) فهي تعتمد على Javascript حيث يقوم الموقع باستخراج جميع الكلمات من موقعك، ويعرض موقعك داخل نافذة مصغرة بحيث يمكنك الضغط على الكلمة التي تريد وترجمتها. وهذا مثال من موقع عالم البرمجة على طريقة عرض وترجمة الكلمات (لكن بالطبع لا يمكنني القيام بالترجمة فيجب إضافة مكتبة Javascript تزودني بها Transifex حتى تتمكن من تخزين الكلمات لديها مع الترجمات) : الخيار الأخير تحدد منه اللغة الأصلية لمشروعك واللغات التي تريد الترجمة إليها : كل ما بقي عليك فعله الآن هو دعوة المترجمين إلى المشروع وانتظار الترجمات الدقيقة 🙃
  5. وعليكم السلام، أولا: إذا كان المستخدم سيدخل قيمة كبيرة يفضل أن تستخدم long كنوع بيانات للمدخلات. ثانيا، أنت بحاجة إلى تحديد عدد السنين والأيام باستخدام الدقائق، بالتالي ستقوم بتحويل الدقائق إلى سنين عن طريق قسمتها على كل من (60 للتحويل إلى ساعات ثم 24 للتحويل إلى أيام ثم 365 للتحويل إلى سنين) ثم ستقوم ، بإيجاد باقي القسمة لنفس العملية الحسابية الآتية حتى تعرف كم دقيقة ستبقى معك وتقسم هذا الرقم على كل من ( 60 للتحويل إلى ساعات ثم 24 للتحويل إلى أيام) وتطبع الناتج للمستخدم. لنفترض أن المستخدم أدخل الرقم في متغير باسم min int min = (user input); int numberOfMinutesInYear = 365 * 24 * 60; // عدد الدقائق في السنة الواحدة int numberOfMinutesInDay = 24 * 60; // عدد الدقائق في اليوم الواحد int years = min/numberOfMinutesInYear; // نقسم عدد الدقائق الموجودة لدينا على عدد الدقائق في السنة للتحويل int days = (min%numberOfMinutesInYear)/numberOfMinutesInDay; // في العملية الحسابية الاولى بين الاقواس سيتم ايجاد عدد الدقائق الباقية من القسمة على الرقم المستخدم في التحويل إلى سنين System.out.print("Y: " + years); System.out.print("M: " + days); لاحظ أننا لم نضطر أن نستخدم Math.floor أو أي ميثود أخرى لإزالة الأعشار الناتجة مع السنين، لأننا نستخدم أصلا متغيرات من نوع int ، أو long إذا كنت تتوقع أرقام طويلة، فلن تكون هناك أعشار ناتجة من العملية الحسابية.
  6. هل جربت استخدام unique في ملف الـ Migrations و في الـ Validator الخاص بالفورم ؟

عالم البرمجة

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