Mustafa Suleiman

15 أغسطس 2023

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

15 أغسطس 2023

تحتاج إلى تصحيح بعض الأخطاء في عناصر HTML مثل <p1> و <p> وإضافة الصنف price إلى العنصر الذي يحمل السعر.

سنستخدم <span> بدلاً من <p1> ونضيف class="price" إلى السعر ليكون من النمط التالي:

<span class="price">120 السعر</span>

ويجب أن نجعل صندوق الشيك بوكس ظاهرًا بالإضافة إلى تحديد data-price للصنف الإضافي:

<input type="checkbox" id="بطاطس" name="اضافات[]" value="بطاطس,10" data-price="10">
<label for="بطاطس">بطاطس (10 جنية)</label><br>

ثم تصحيح النص المستخدم للشيك بوكس "مشروبات" وإضافة data-price له:

<input type="checkbox" id="مشروبات" name="اضافات[]" value="مشروبات,10" data-price="10">
<label for="مشروبات">مشروبات (10 جنية)</label><br>

في الجزء الخاص بحساب إجمالي السعر، سنحتاج إلى إضافة data-price لكل عنصر بطاطس ومشروبات:

<input type="checkbox" id="بطاطس" name="اضافات[]" value="بطاطس,10" data-price="10">
<input type="checkbox" id="مشروبات" name="اضافات[]" value="مشروبات,10" data-price="10">

ثم عليك تحديث السعر عند تغيير الكمية في الوجبات باستخدام مسمى الصنف class="price" وإضافة id لعنصر العربة:

<input type="number" value="1" class="quantity-input" onchange="calculateTotal()">

وتحديث دالة calculateTotal() في الجزء الخاص بـ JavaScript لحساب إجمالي السعر بناءً على الكمية والسعر:

function calculateTotal() {
    var total = 0;
    var cards = document.getElementsByClassName("card");
    for (var i = 0; i < cards.length; i++) {
        var quantity = parseInt(cards[i].querySelector(".quantity-input").value);
        var price = parseFloat(cards[i].querySelector(".price").textContent.replace("السعر: ", ""));

        total += (price * quantity);
    }
    document.getElementById("cart").textContent = "اجمالي السعر: " + total + " جنية";
}

وتعديل دالة addToCart() لتقوم بحساب السعر بناءً على السعر الموجود في الكارت بدلاً من السعر الثابت:

function addToCart(itemName) {
    var text = document.querySelector('h5').innerText;
    var quantity = parseInt(document.querySelector('.quantity-input').value);
    var extras = [];
    var extrascheckboxes = document.querySelectorAll('input[name="اضافات[]"]:checked');
    var totalPrice = parseFloat(document.querySelector('.price').textContent.replace("السعر: ", ""));

    extrascheckboxes.forEach(function(checkbox) {
        extras.push(checkbox.value);
        totalPrice += parseFloat(checkbox.dataset.price);
    });

    var item = {
        name: itemName,
        text: text,
        price: totalPrice,
        quantity: quantity,
        extras: extras
    };

    cartItems.push(item);
    updateCart();
    calculateTotal(); // حساب إجمالي السعر الجديد بعد الإضافة
}

15 أغسطس 2023

بتاريخ On 13‏/8‏/2023 at 20:59 قال Omar Asaad:

تمام لكن ظهر لى مشكله اخره انه عند وجود نص قبل التاريخ لن يحدده ولذلك اضفت هذا الجزء (\D*?) على السطر الخاص بك هل هذا صحيح وشكرا لك مقدما

صحيح ما ذكرته، فإن كنت ترغب في السماح بوجود نص قبل التاريخ، فعليك بإضافة (\D*?) لتمثيل أي عدد من الحروف غير الرقمية قبل التاريخ، مما يسمح للتاريخ أن يتبعه نص غير رقمي.

15 أغسطس 2023

يتم حظر الحسابات بشكل دائم إذا تم اكتشاف مخالفات للمبادئ الأساسية للمجتمع وشروط الخدمة على النحو التالي:

1- إذا لم تفي بالحد الأدنى من العمر أو المتطلبات الأخرى كما هو مبين في شروط الخدمة.

2- إذا قام الحساب بتقميص شخص آخر أو كيان بطريقة مضللة.

3- إذا كان لديك مخالفة خطيرة في حسابك:

نشر أو تشجيع استغلال الشباب أو مواد الإساءة الجنسية للأطفال (CSAM).
الترويج للعنف أو التهديد به.
نشر أو الترويج لمحتوى يصور أعمال جنس غير مرغوب فيها مثل الاغتصاب أو التحرش.
نشر محتوى يسهل الاتجار بالبشر.
نشر محتوى يصور تعذيبًا في العالم الحقيقي.
إنشاء حساب TikTok آخر أو استخدامه لتجنب القيود بصورة متعمدة أو الحظر الدائم الذي فُرض على حساب آخر.

4- إذا وصل حسابك إلى عتبة الإنذار لمخالفات متعددة داخل سياسة أو ميزة معينة.

5- مخالفات متعددة لسياسة الملكية الفكرية.

كيف ستعلم إذا تم حظر حسابك على TikTok بشكل دائم؟

إذا تم حظر حسابك، ستتلقى إشعارًا على شكل بانر عند محاولتك تسجيل الدخول، يُبلغك فيه بالحظر، ويمكنك أيضًا التحقق من المخالفات في قسم حالة الحساب في صندوق الوارد من خلال إشعار البانر.

كيفية الوصول إلى حساب TikTok الخاص بك بعد الحظر

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

كيفية الاستئناف إذا تمت إزالة محتواك أو تم حظر حسابك على TikTok؟

إن كنت تعتقد أن محتواك أو حسابك تمت إزالتهما بسبب خطأ، باستطاعتك الاستئناف على هذا القرار.

إذا تمت الموافقة على استئنافك:

سيتم استعادة محتواك أو حسابك (ما لم تكون قد حذفت الحساب أو المحتوى بالفعل).
سيتم إزالة الإنذار من حسابك.

ملاحظة: لا يقوم حذف محتواك بإزالة الإنذارات، وقد يتم لاحقًا فرض إنذارات بعد حذف المحتوى الذي ينتهك القواعد.

والخطوات هي كالتالي من أجل محاولة إزالة الحظر من تيك توك:

افتح الإشعار الذي تلقيته بخصوص الحظر.
انقر على "الاستئناف" Appeal.
اتبع التعليمات المقدمة.

هل يمكنك إنشاء حساب TikTok جديد بعد الحظر؟

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

إنشاء حساب جديد بعد حظر حسابك بسبب مخالفة خطيرة.
نشر محتوى ينتهك القواعد على حساب جديد أو قائم.
نشر مخالفات المحتوى عبر حسابات متعددة.

ينطبق ذلك طالما بقيت القيود سارية على حسابك الآخر.

15 أغسطس 2023

عليك بتقبل الأمور بواقعية وبدون تصورات غير حقيقية، دورة تطوير واجهات المستخدم هي بوابة الدخول لمجال تطوير الواجهات الأمامية Front-End بالتالي يتم بها شرح الأساسيات من خلال HTML, CSS, JS, jQuery, Bootstrap.

لذلك أنت في مرحلة البداية والتي تؤهلك لإنشاء مواقع ثابتة Static وليست ديناميكية، أي مواقع محتواها لا يتغير يبقى كما هو.

وستجد مشاريع لذلك على مستقل وخمسات أي على مواقع العمل الحر، لكن في الشركات المشاريع تتطلب الخبرة بإطار أو مكتبة للواجهة الأمامية مثل React أو Angular أو Vue.js.

وستجد هنا توضيح لتلك النقطة:

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

وإليك وصف وظيفة خاصة بمطور واجهة أمامية

Job Requirements:

Deep understanding of JavaScript fundamentals and common techniques.
Good Understanding in all ES6/ES7 features.
Strong experience in React and it's an ecosystem.

Strong experience in the next technologies and libraries:

Redux and its ecosystem such as redux-Saga, redux-thunk, redux sauce.
JSS
React-router
Building tools and module-bundlers such as Webpack and Babel + ( Gulp or Grunt )
Linting: eslint and it's common libraries
HTML5 / CSS3 and styling predecessors such as: SASS and LESS
Experience with Github
Familiarity with RESTful APIs.

15 أغسطس 2023

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

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

وطرق الدفع المتاحة في أكاديمية حسوب هي باي بال والبطاقة الإئتمانية من نوع Credit أو Debit وليس البطاقة مسبقة الدفع Prepaid.

وفي حال واجهت أية مشكلة في الإشتراك تستطيع التحدث لمركز المساعدة بخصوص عملية الدفع وسيتم مساعدتك.

15 أغسطس 2023

السؤال غير واضح، ما هو الرابط الذي تحاول الوصول إليه من خلال الهاتف، هل قمت بنسخ المشروع إلى هاتفك وتحاول تشغيله؟ في تلك الحالة من المفترض أن تقوم بتشغيل ملف HTML الرئيسي وسيتم تشغيل المشروع بشكل سليم في المتصفح طالما يوجد ملف التنسيق CSS أيضًا.

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

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

15 أغسطس 2023

صحيح، يجب عليك تسجيل حساب على موقع Gravatar حتى تتمكن من استخدام ميزة رفع صور الرمز الشخصي، وبعد التسجيل، يمكنك تحديد صورة الرمز الشخصي الخاصة بك وإعداد إعداداتها، ثم استخدام عنوان URL الخاص بـ Gravatar الخاص بك في تطبيقاتك.

وإليك الخطوات لتسجيل حساب على Gravatar وإعداد صورة الرمز الشخصي:

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

بمجرد إعداد صورة الرمز الشخصي الخاصة بك، تستطيع استخدام عنوان URL الخاص بـ Gravatar في تطبيقاتك.

مثلاً استخدام عنوان URL الخاص بـ Gravatar الخاص بك في النموذج التالي:

<img src="https://gravatar.com/avatar/[your_email_address]?s=200&r=pg&d=mm" />

وسيعرض ذلك الكود صورة الرمز الشخصي الخاصة بك بحجم 200 بكسل وتنسيق صورة شخصي وخلفية بيضاء.

15 أغسطس 2023

حاول استخدام الخاصية alignment لضبط محاذاة الملصق على الزر، أي لتحاذيه على اليمين، استخدم الكود التالي:

FloatingActionButton(
  child: Icon(Icons.add),
  label: Text('Add'),
  alignment: Alignment.centerRight,
)

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

ولتعيين مسافة 10 بكسل بين الزر والملصق استخدم التالي:

FloatingActionButton(
  child: Icon(Icons.add),
  label: Text('Add'),
  alignment: Alignment.centerRight,
  padding: EdgeInsets.all(10.0),
)

ولاحظ أنه يمكنك تعديل مكان الـ FloatingActionButton من خلال خواص مختلفة وستجدها هنا في المستند الرسمي:

https://api.flutter.dev/flutter/material/FloatingActionButtonLocation-class.html

13 أغسطس 2023

بتاريخ 3 ساعة قال Omar Asaad:

جربت لكن اعطانى خطء مره اخرى قد الحقت الملف

re_1.py 216 B · 0 تنزيلات

ما هو الخطأ الذي يظهر لك أرجو نسخ الخطأ ولصقه هنا.

وحاول تجربة كتابة الكود على الشكل التالي:

import openpyxl
from pathlib import Path

file_path = Path('E:/data analysis/data_project/xlx data/202201-divvy-tripdata.xlsx')

with openpyxl.open(file_path) as workbook:
  print(workbook.sheetnames)

13 أغسطس 2023

معنى خطأ "javax.net.ssl.SSLHandshakeException: Remote host terminated the handshake" أن Flutter SDK غير قادر على إنشاء اتصال آمن بالمضيف البعيد، ويمكن أن يكون ذلك بسبب عدد من الأسباب، بما في ذلك:

قد يكون للمضيف البعيد شهادة ذاتية التوقيع لا يثق بها Flutter SDK.
للمضيف البعيد شهادة قديمة أو غير صالحة.
هناك مشكلة في اتصال الشبكة لديك.

وحاول تجربة التالي:

تحقق من التاريخ والوقت على جهاز الكمبيوتر، حيث يستخدم Flutter SDK ساعة النظام للتحقق من الشهادات، لذلك إذا لم يكن ساعتك صحيحة، فقد لا يتمكن من الوثوق بشهادة المضيف البعيد.
تأكد من أنك متصل بالإنترنت فيحتاج Flutter SDK إلى تنزيل شهادة المضيف البعيد لإنشاء اتصال آمن.
حاول استخدام اتصال شبكة مختلفة أو تشغيل VPN.
حاول تعطيل التحقق من الشهادات في Flutter SDK، وللقيام بذلك، افتح ملف .flutter/config/gradle.properties وأضف السطر التالي:

flutter.sdk.disableCertificateVerification=true

سيسمح ذلك لـ Flutter SDK بالاتصال بأي مضيف، بغض النظر عما إذا كانت الشهادة موثوقة أم لا.

وأيضًا قد يفيدك تشغيل أمر flutter doctor في منفذ الأوامر لتفقد الأخطاء في المشروع.

13 أغسطس 2023

يجب استيراد المكتبة قبل استخدامها باستخدام import openpyxl.
تحتاج إلى تقديم مسار ملف Excel الصحيح مع امتداد الملف (.xlsx على الأغلب).
تحتاج إلى استخدام وظيفة load_workbook بعد استيراد المكتبة لفتح الملف.

والكود الصحيح هو:

import openpyxl
from pathlib import Path

# مسار الملف
file_path = Path('E:', 'data analysis', 'data_project', 'xlx data', '202201-divvy-tripdata.xlsx')

# استدعاء الملف
workbook = openpyxl.load_workbook(file_path)

# بدء التعامل مع الملف

قمت باستخدام وظيفة Path من مكتبة pathlib لإنشاء مسار صحيح، كما أنني أضفت .xlsx لامتداد الملف بناءً على افتراض أنه ملف Excel بصيغة xlsx.

لاحظ أنه إذا كنت ترغب في الوصول إلى ورقة معينة داخل الملف، فيجب عليك استخدام workbook.active أو استخدام اسم الورقة بعد تحميل الملف باستخدام workbook['اسم الورقة'].

13 أغسطس 2023

حاول تجربة تثبيت نظام إفتراضي على الماك مثل الويندوز وتجربة ما تريد عليه مثل VMware Fusion 13 و VirtualBox 7.

وبخصوص سؤالك عن تحويل الكود إلى ملف DMG على macOS، فالأمر بسيط إليك الخطوات:

1- قم بتثبيت حزمة py2app، وتلك الحزمة ستسمح لك بإنشاء حزم تطبيقات مستقلة من ملفات Python.

pip install py2app

2- قم بإنشاء دليل جديد لمشروعك.

mkdir my_project
cd my_project

3- انسخ ملف Python الخاص بك إلى دليل المشروع.

cp my_script.py .

4- عليك إنشاء ملف setup.py في دليل المشروع، وسيخبر ذلك الملف py2app كيفية إنشاء حزمة التطبيق الخاصة بك.

from setuptools import setup

setup(
    name='My App',
    version='1.0',
    app=[ 'my_script.py' ],
    data_files=[ 'icon.icns' ],
)

5- قم بتشغيل الأمر التالي لإنشاء حزمة التطبيق:

py2app

سيؤدي ذلك إلى إنشاء دليل جديد يسمى dist في دليل المشروع، يحتوي على حزمة التطبيق الخاصة بك، وهي ملف بلاحقة .app.

6- لإنشاء ملف DMG من حزمة التطبيق، عليك باستخدام أداة create-dmg، وتتوفر تلك الأداة من Homebrew.

brew install create-dmg

بمجرد تثبيت create-dmg، يمكنك إنشاء ملف DMG من حزمة التطبيق الخاصة بك باستخدام الأمر التالي:

create-dmg -v -s 512M my_app.app my_app.dmg

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

وتستطيع البحث عن Convert python script to DMG file MacOS وستجد شروحات مفيدة لك.

12 أغسطس 2023

في البداية عليك بفهم الفرق بين الـ Native والـ Cross platform .

حيث أن تطوير تطبيقات الـ Native يتضمن إنشاء تطبيقات تُصمم خصيصًا لنظام تشغيل معين، مثل Android أو iOS، وتُكتب تلك التطبيقات بلغات البرمجة التي تتوافق مع النظام الأساسي، مثل Java أو Kotlin لـ Android، و Swift أو Objective-C لـ iOS.

وتطوير تطبيقات الـ Native باستخدام Kotlin له مزايا:

تطبيقات الـ Native التي تم تطويرها باستخدام لغة مثل Kotlin تستفيد من أداء عالي جدًا، حيث يتم تنفيذ الشيفرة مباشرة على النظام الهدف.

يمكنك تطوير واجهات مستخدم متجانسة مع تصميم مبني على مبادئ تصميم النظام الهدف (مثل Material Design في حالة Android)، مما يمنح تجربة مستخدم أفضل وأكثر تناغمًا مع النظام.

بفضل التطوير الـ Native، يمكنك الوصول الكامل لجميع مميزات النظام الهدف بما في ذلك الكاميرا والمستشعرات والموقع وغيرها.

تطوير تطبيقات Cross-Platform باستخدام React Native:

تسمح بكتابة شيفرة واحدة تعمل على عدة منصات مثل Android وiOS، مما يقلل من الجهد والتكاليف.
يمكن تطوير التطبيقات بشكل أسرع باستخدام React Native، حيث يمكن إعادة استخدام العديد من العناصر والعمليات.
React Native لديها مجتمع نشط وواسع، وهذا يعني توفر العديد من المكتبات والأدوات المفيدة التي يمكن استخدامها لتسريع عملية التطوير.

تطوير تطبيقات Cross-Platform باستخدام Flutter:

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

وإطارات العمل الخاصة بتطبيقات الـ Cross platform تتطور باستمرار، وتصبح أكثر قدرة على الوصول إلى ميزات النظام الأساسي، بالإضافة إلى ذلك، هناك العديد من الأدوات والموارد المتاحة لمساعدتك في الوصول إلى الميزات التي تحتاجها في تطبيقات الـ Cross platform.

وستجد المزيد من الشرح هنا:

هل ابدأ مع جافا او كوتلن؟

12 أغسطس 2023

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

عمرك مناسب للعمل على مواقع العمل الحر فقط حيث أن في الشركات من الصعب تعيين شخص في مجال جديد تجاوز الـ 30 إلا في ظروف معينة مثل إمتلاكه مهارة وسنوات خبرة عن طريق العمل الحر.

لكن ذلك يظل في حدود ضيقة أي حتى الـ 35 عامًا.

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

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

12 أغسطس 2023

ما ستحصل عليه كقيمة هو قيمة نصية أي كالتالي "2" + "2" يساوي "22" أي يتم عمل concatenation دمج، وبالتالي لحل المشكلة عليك بتحويل القيمة إلى رقم أولاً سواء من خلال إضافة علامة + قبل القيمة أي كالتالي:

Result1.value = +num1.value + +num2.value

أو باستخدام دالة parseInt() أو parseFloat() لتحويل السلاسل (strings) إلى أرقام قبل القيام بالعملية الحسابية.

وكمثال:

Result1.value = parseInt(num1.value) + parseInt(num2.value)

أو باستخدام الكلمة الأساسية Number لتحويل سلاسل الأرقام إلى أرقام في JavaScript، وإليك كيفية استخدامها لتنفيذ العملية المطلوبة:

Result1.value = Number(num1.value) + Number(num2.value)

12 أغسطس 2023

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

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

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

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

12 أغسطس 2023

ما طبيعة الموقع ذو الصفحة الواحدة؟

هل تريد إنشاء صفحة Landing page من أجل منتج معين؟ إذا يوجد منصة باسم easy orders وسهلة الاستخدام ومجانية وغيرها من المنصات مثل you can.

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

وإذا كنت تمتلك المهارة البرمجية اللازمة، فتستطيع إنشاء تلك الصفحة من الصفر من خلال HTML, CSS, JS في حال كانت الصفحة بها محتوى ثابت، أو تستطيع الإعتماد على مكتبة أو إطار للواجهة الأمامية مثل React وVue.js وAngular في حال كان المحتوى متغير بناءًا على تفاعل المستخدم مع الواجهة.

وبرأي منصة ووردبريس هي الخيار الأمثل لك، ويمكنك البحث عن free wordpress themes ثم ضع بجانبه نوع القالب مثل portfolio مثلاً وستجد قوالب مجانية.

12 أغسطس 2023

حاليًا لا يوجد شرح مخصص لإطار عمل Prisma في أكاديمية حسوب.

وPrisma هو إطار عمل (framework) يستخدم للتفاعل مع قواعد البيانات باستخدام لغة الاستعلام SQL في تطبيقات Node.js، ويتيح لك Prisma تحديد نماذج البيانات والعلاقات بينها بشكل أكثر انسيابية، مما يجعل عمليات التفاعل مع قاعدة البيانات أكثر سهولة وأمانًا.

وهو عبارة عن طبقة وسيطة (ORM)، وهي اختصار لـ "Object-Relational Mapping"، وهذا يعني أنها تساعد في تحويل البيانات المخزنة في قاعدة البيانات إلى كائنات JavaScript والعكس صحيح، مما يجعل عمليات القراءة والكتابة أكثر سهولة بدلاً من التعامل مباشرة مع لغة SQL.

أي توفر Prisma أدوات لتوليد تعليمات SQL آمنة وفعالة ومحسنة، مما يساهم في تحسين أداء تطبيقك، كما توفر أيضًا ميزات مثل التحقق من صحة البيانات وإدارة العلاقات بين الجداول بشكل سهل.

وإليك مثال على استخدام الإطار:

const { PrismaClient } = require('@prisma/client');

const prisma = new PrismaClient();

async function main() {
  const newUser = await prisma.user.create({
    data: {
      username: 'exampleUser',
      email: 'user@example.com',
    },
  });
  console.log('Created user:', newUser);
}

main()
  .catch((error) => {
    console.error('Error:', error);
  })
  .finally(async () => {
    await prisma.$disconnect();
  });

قمت بإنشاء كائن PrismaClient الذي يمثل الاتصال بقاعدة البيانات، ثم إنشاء مستخدم جديد باستخدام الدالة user.create المقدمة من Prisma.

والمثال قد يختلف بناءًا على الإصدار الذي تستخدمه.

وستجد هنا شرح من خلال المستند الرسمي لطريقة الاستخدام:

https://www.prisma.io/docs

وفي المحتوى الأجنبي ستجد شروحات كثيرة على اليوتيوب.

12 أغسطس 2023

التعبير [String] داخل المعكوفين يشير إلى أن الحقل "skills" سيحتوي على مصفوفة (Array) من النصوص (Strings).

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

skills: {
    type: [String], // يُتوقع أن تكون مصفوفة من النصوص (مهارات)
    required: true
}

إذا أدخلنا قيمة مثل ["Programming", "Design", "Communication"] في حقل "skills"، سيتم قبولها بسبب أنها تطابق نوع البيانات المتوقع.

11 أغسطس 2023

بتاريخ منذ ساعة مضت قال Muhammad Alahmad:

المشكلة لم تحل مع الاسف

المشكلة بسبب أنه عند عمل Hover على عناصر قائمة التنقل، يتم تطبيق التنسيق التالي:

header nav ul li a:hover {
    color: var(--main-color);
    border-bottom: 1px solid var(--main-color);
}

وبسبب إضافة border-bottom تحدث تلك المشكلة.

11 أغسطس 2023

بتاريخ 5 دقائق مضت قال Chamekh Med:

الblocks element وinline elements رأيته في الدرس 9 أحدهما يواصل نفس السطر ولايأخذ إلا مثله أما الآخر فيرجع لرأس السطر ويأخذ مساحة لنفسه وذاك blocks element ........لكن inline-block لم أسمع بيه في أي درس في html؟

صحيح عذرًا كتبت الأمر بشكل خاطيء، في عناصر HTML يوجد blocks element وinline elements.

لكن عند تعلم CSS ستتمكن من تحويل أي عنصر إلى inline-block من خلال الخاصية display.

والخاصية display في CSS تحدد كيفية عرض العنصر في صفحة الويب، وإحدى القيم الشائعة لهذه الخاصية هي inline-block، وتلك القيمة تجمع بين سلوكين مختلفين: العرض كعنصر مضمن inline (مثل نص) ولكن مع إمكانية تحديد ارتفاع وعرض مشابهة لعنصر block (مثل صورة).

وعند استخدام display: inline-block، يكون للعنصر نفس سلوك العرض المضمن مع القدرة على تحديد ارتفاع وعرض، وذلك يعني أنه يمكنك وضع عناصر inline-block بجانب بعضها البعض داخل نص أو أي عنصر مضمن آخر، مع الاستفادة من إمكانية تحديد الأبعاد.

وإليك مثال:

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    border: 1px solid blue;
    margin: 10px;
  }
</style>
</head>
<body>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

</body>
</html>

11 أغسطس 2023

"Nest.js" و"Express" هما إطاري عمل (frameworks) لتطوير تطبيقات ويب باستخدام بيئة عمل Node.js.

وعلى الرغم من أنهما يستندان إلى نفس تقنية الخلفية (Node.js) ويستخدمان لتطوير تطبيقات ويب، إلا أن لديهما اختلافات واختيارات تصميم مختلفة، وإليك بعض الفروق الرئيسية بينهما:

الفلسفة والهيكل التنظيمي

Express إطار عمل خفيف الوزن ومرن جدًا، ويقدم حلاً بسيطًا لبناء تطبيقات ويب بمساعدة مجموعة من المكتبات المتخصصة.

Nest.js تم تصميمه لتوفير هيكل تنظيمي قوي ومنظم لتطبيقات Node.js، ويشجع على استخدام مفهوم الـ "Modules" و"Dependency Injection" لتسهيل إدارة واختبار التطبيقات الكبيرة والمعقدة.

من حيث نمط التطوير

Express يتيح لك حرية كبيرة في تنظيم التطبيق وكتابة الكود كما تراه مناسبًا.

Nest.js يفرض تنظيمًا محددًا وهيكلاً معينًا على التطبيقات من خلال استخدام مفاهيم ونماذج محددة.

الأداء

Express بما أنه خفيف الوزن ولا يفرض الكثير من التجهيزات الإضافية، فهو أسرع من حيث الأداء في بعض الحالات.

أما Nest.js بسبب هيكله التنظيمي والاعتماد على مكتبات إضافية، فهو أبطأ قليلاً في بعض الحالات.

لكن دائمًا هناك تنازلات من أجل الحصول على أمرًا ما أي trade-off.

دعم الأمان والتحقق

Nest.js يتيح نمطًا صارمًا لمعالجة الأمان والتحقق من الهوية من خلال استخدام Middlewares وحماية الطرق (Guards).

Express يقدم مكتبات وسائط (middlewares) للتحقق والأمان، ولكن Nest.js يقدم هيكلًا أكثر تنظيمًا وقوة في هذا الصدد.

أيضًا Express لديه مجتمع ضخم ومستندات متاحة بشكل واسع، وهو أحد أقدم الإطارات وأكثرها شهرة.

و Nest.js مع تزايد شعبيته، يزداد توفر المستندات والموارد، ولكنه لا يزال أحدث مقارنةً بـ Express.

11 أغسطس 2023

عليك أن تقوم بتعديله ليقبل فقط هذه الصيغة ويستبعد الصيغة الأخرى (dd/mm/yyyy) عن طريق تعديل بعض أجزاء التعبير:

^(0?[1-9]|1[0-2])/([0-2]?[0-9]|3[0-1])/((19|20)\d{2})$

(0?[1-9]|1[0-2])

يسمح للشهر بأن يكون مكونًا من رقم واحد مع الصفر الاختياري مثل 01 أو رقمين بدون صفر مثل 12.

([0-2]?[0-9]|3[0-1])

يعبر عن اليوم ويسمح لليوم بأن يكون مكونًا من رقم واحد أو اثنين مع الصفر الاختياري مثل 01 أو أي رقم يتراوح بين 00 و 29، بالإضافة إلى الرقم 30 و 31 إذا كان الشهر يسمح بذلك.

((19|20)\d{2})

يعبر عن السنة وهو لا يحتاج إلى تعديل.

وإليك مثال على كود جافاسكريبت لاستخدام التعبير النمطي المعدل للتحقق من تاريخ بتنسيق "mm/dd/yyyy":

function validateDate(inputDate) {
  const regex = /^(0?[1-9]|1[0-2])\/([0-2]?[0-9]|3[0-1])\/((19|20)\d{2})$/;
  return regex.test(inputDate);
}

const date1 = "08/11/2023"; // تاريخ صالح بالتنسيق المطلوب
const date2 = "11/08/2023"; // تاريخ غير صالح بالتنسيق المطلوب
const date3 = "2023/08/11"; // تاريخ غير صالح بأي تنسيق

console.log(validateDate(date1)); // سيطبع true
console.log(validateDate(date2)); // سيطبع false
console.log(validateDate(date3)); // سيطبع false

11 أغسطس 2023

تقييم جيد أحسنت، ولكن إذا أردت نصيحتي فلا تنتقل من HTML إلى CSS إلا بعد التفرقة بين عناصر الـ Block وinline وأيضًا القدرة على إنشاء نموذج form بالعناصر الخاصة به بشكل جيد بدون CSS أي تنسيقه من خلال عناصر HTML فقط.

وذلك تحدي جيد لك وستتعلم الكثير من تلك التجربة، وتستطيع البحث عما تريد معرفته سواء على يوتيوب أو جوجل، ولكن عليك بالتفكير أولاً قبل البحث.

ثم بعد تعلم CSS أنصحك بقراءة التالي :

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

أجوبة بواسطة Mustafa Suleiman