اذهب إلى المحتوى

Kais Hasan

الأعضاء
 عرض الملف الشخصي  تصفح المحتوى

  • المساهمات

    2355

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

  • تاريخ آخر زيارة

  • عدد الأيام التي تصدر بها

    24

 نوع المحتوى 

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

البرمجة

التصميم

DevOps

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

العمل الحر

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

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

قصص نجاح

أسئلة وأجوبة

كتب

دورات

كل منشورات العضو Kais Hasan

  1. Kais Hasan
    هناك طريقة و هي القيام بجعل الصفحة أبعد و بالتالي يبدو ال scroll أبطئ، كمثال على ذلك من الواقع فإنك ترى الطائرة في السماء و كأنها بطيئة و تشعر بأن سيارة قربك أسرع منها و لكن ذلك نتيجة وهم المسافة. و بالتالي يمكن القيام بنفس الأمر مع الموقع عن طريق دفعه إلى الخلف باستعمال الخاصية transform و طبعا سنضطر إلى القيام ب scale للموقع ﻷنه سيبدو أصغر. يمكن القيام بذلك بالشكل التالي: <body> <div class="scroll"> <div class="scroll2"> ... </div> </div> </body> body { padding: 0; overflow: hidden; } .scroll { width: 100vw; height: 100vh; overflow-y: auto; overflow-x: hidden; perspective: 1px; transform-style: preserve-3d } .scroll2 { transform: translateZ(-1px) scale(2); }
  2. Kais Hasan
    لا يمكنك القيام بأكثر من export default واحد في كل module، يمكنك القيام بأنماط أخرى من ال export مثل ال named export عوضاً عن ذلك. أي يمكن تعديل الكود الخاص بك بالشكل التالي: export function Container() { return ( <div> <Slide /> <Slide /> <Slide /> </div> ); } export function Slide() { return ( <div> Some Text Content </div> ); }
  3. Kais Hasan
    يمكنك استعمال إحدى مكونات bootstrap و هو ال carousel، كمثال بسيط عليه: <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="..." alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> هنا لدينا أول قسم يمثل ال indicators و التي تسمح لك بالتنقل بشكل مباشر بين الصور، و لكن هنا قمت بوضعها بشكل بسيط على شكل مستطيل صغير، و لكن يمكنك وضعها كصور بسهولة. و من ثم القسم الثاني carousel-inner و الذي يمثل الصور التي سيتم عرضها. و من ثم لدينا زران للتحكم بالانتقال.
  4. Kais Hasan
    توجد مكتبة تساعد على القيام بذلك و هي مكتبة pyjwt، و هي مكتبة عامة للبايثون و ليس فقط لل Flask و بالطبع يمكنك استعمالها، و هي تقوم بترميز و فك ترميز الطلبات التي تحتوي على المعلومات المطلوبة لتسجيل الدخول. و بالتالي يمكنك بناء ال request بشكل عادي و استعمال توابع هذه المكتبة للترميز بالشكل المطلوب. كمثال على ذلك: >>> import jwt >>> encoded_jwt = jwt.encode({"some": "payload"}, "secret", algorithm="HS256") >>> print(encoded_jwt) eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzb21lIjoicGF5bG9hZCJ9.Joh1R2dYzkRvDkqv3sygm5YyK8Gi4ShZqbhK2gxcs2U >>> jwt.decode(encoded_jwt, "secret", algorithms=["HS256"]) {'some': 'payload'}
  5. Kais Hasan
    بما أنك تريد القيام بذلك من أجل اللغة فهناك طريقة أفضل من استعمال ال regex لذلك، و هو استعمال ال i18_patterns بحيث تقوم بإحاطة ال urls التي تريد أن يكون خيار اللغة مفعل من أجلهم و سيقوم الدجانغو تلقائياً بأخذ الخيارات التي قمت بإتاحتها عن طريق ال settings من أجل اللغة. كمثال على ذلك: from django.urls import path, include from pages.views import HomeView from django.conf.urls.i18n import i18n_patterns urlpatterns = i18n_patterns( path('admin/', admin.site.urls), path('products/', include('products.urls')), path('accounts/', include('allauth.urls')), path('reviews/', include('reviews.urls')), path('language-preference/', include('pages.urls')), path('shopping_cart/', include('shopping_cart.urls')), path('', HomeView.as_view(), name='home'), ) و في ملف ال settings يجب عليك وضع ما يلي: LANGUAGES = ( ('ar', gettext('Arabic')), ('fr', gettext('French')), ) USE_I18N = True و بالتالي هنا لن يأخذ غير الخيارين الذي يعبران عن اللغات التي قمت بتحديدها. هذه الطريقة أفضل ﻷنها تلقائياً سوف تقوم بوضع اللغة على اللغة المحلية للمستخدم، بالطبع يجب عليك توفير زر يقوم بعملية التحويل (لن يقوم المستخدم بكتابة اللغة في الرابط)، و لكن حتى بدون زر التحويل هذا سوف يقوم بأخذ اللغة الافتراضية لجهاز المستخدم. هناك طريقة أخرى تعتمد على ال regex و لكنها ليست مستحبة، أما إذا كنت تريد أن يقوم المستخدم بإدخال متحول و له شروط معينة يمكنك القيام بتعديل ذلك في ال view بحيث تقوم بإرجاع 404 في حال لم تكن قيمة المتحول ما تريده. و إذا كنت مصراً على استعمال ال regex فيمكنك استعمال re_path و الذي هو يمثال ال path و لكن يقبل ب regex و بالتالي يمكنك ضمنه وضع خيار ar|fr بحيث سيأخذ فقط أحدهما.
  6. Kais Hasan
    بشكل أساسي نقوم باستعمال auto now عندما نريد التاريخ أن يتحدث في كل تعديل، مثلا في حال كنت تقوم بتصميم موقع يحتوي على مراجعات زوار الموقع، فإنه يمكن لك أن تستعمل هذه الخاصية لتنشئ وسم على المراجعة الخاصة بالزائر تدل على آخر تعديل قام به هذا الزائر على المراجعة الخاصة به. بينما نقوم باستعمال auto now add في حال كنا نريد تاريخ الإنشاء فقط، يمكنك استعمال ذلك مثلاً إذا كان لديك متجر و تقوم بإضافة البضائع إليه، فيمكن وضع تاريخ الإضافة فقط و ليس تاريخ كل تعديل، كما يمكنك بنفس مثال مراجعات الزوار السابق أن تضيف وسم يدل على تاريخ إنشاء المراجعة كإضافة على تاريخ آخر تعديل الذي تحدثت عنه سابقاً.
  7. Kais Hasan
    هناك عدة طرق للقيام بذلك. الطريقة الأولى و هي الطريقة اليدوية، هو أن تقوم بتحويل الصورة في البداية إلى صورة رمادية (في حال لم تكن كذلك بالفعل)، و من ثم تحدد عتبة ما، حيث أن جميع القيم فوق هذه العتبة أو القيم المساوية لها سوف تصبح 1 (أي أبيض) و ما تبقى سيصبح 0 (أي أسود)، يمكن القيام بالتحويل ببساطة باستعمال المكتبة و ما تبقى هو عملية طبيعية على المصفوفات. الطريقة الثانية الأسرع، هي استعمال توابع PIL الجاهزة للتحويل مباشرة بالشكل التالي: from PIL import Image file = "example.jpg" img = Image.open(file) img.convert("1") img.show() حيث أن ال 1 هنا يمثل التمثيل باستعمال بت واحد فقط، و هذا مكافئ للتحويل إلى 0 و 1 فقط.
  8. Kais Hasan
    إن البيانات سيكون قد تم إرسالها في ال body الخاص بال request و بشكل عام على شكل json و هذا هو الأمر المتعارف عليه. و بالتالي يمكنك الوصول إلى البيانات المرسلة عن طريق الوصول إلى ال body الخاص بال request بالشكل التالي: app.post('/api/search', function(req, res){ console.log(req.body); } يمكنك رؤية خرج ما سبق حتى تعرف تماما كيف تم تنظيم البيانات ضمن ال json المرسل و بالتالي كيف يمكن الوصول إلى كل قيمة، تذكر يمكنك معاملة ما سبق على أنه object في ال js و بالتالي يمكن الوصول إلى ال attriubutes بسهولة بعد معرفة الهيكل العام لل body.
  9. Kais Hasan
    writeFile يسمح لك بإنشاء ملف و تمرير البيانات في وقت الإنشاء. هذا التابع يأخذ 3 بارمترات و بارامتر اختياري. file هذا البارامتر يمثل المسار للملف متضمنا اسم الملف و اللاحقة. data يخزن في هذا البارامتر البيانات التي نريد حفظها في الملف. options هذا البارامتر اختياري و يمكن استعماله لتغيير القيم الافتراضية للترميز و النمط و هل سنقوم بالكتابة أم القراءة أم الإضافة الخ.. callback هذا البارامتر يمثل تابع سيتم استدعاءه عند الانتهاء من تنفيذ التعليمة بشكل صحيح أو في حال حدوث خطأ. writeFileSync يقوم بنفس مهام التابع السابق و لكن يأخذ فقط 2 بارامتر و بارامتر اختياري كما يلي: file data options كل هذه البارامترات لها نفس الوظيفة كما في التابع الأول و لكن الفرق أن هذا التابع لا يأخذ تابع كبارامتر، و هذا سيؤدي إلى أن هذا التابع سيوقف تنفيذ البرنامج حتى ينتهي من عمله على عكس التابع السابق الذي لن يقوم بذلك و عوضاً عن ذلك سيستعمل التابع callback الذي سنقوم بتمريره لمعالجة حالات الخطأ أو لتنفيذ كود معين بعد انتهاء الكتابة.
  10. Kais Hasan
    من أشهر المكتبات الخاصة بالتعامل مع الصور هي opencv، يمكنك استعمال تابع خاص لعرض الصور أو حتى يمكنك حفظ الصورة إلى ملف، كمثال على ذلك: import numpy as np data = np.zeros( (512, 512, 3), dtype=np.uint8) data[256, 256] = [255, 255, 255] import cv2 img = data / 255 cv2.imwrite('color_img.jpg', img) cv2.imshow("image", img) طبعاً هنا في البداية علينا تضمين المكتبة و التي لها الاسم cv2. التوابع تستعمل تمثيل الصور كأرقام حقيقية بين الصفر و الواحد و بالتالي علينا فقط التقسيم على أكبر قيمة و التي هي 255 للتحويل إلى هذا التمثيل. يمكن استعمال التابع imwrite لحفظ الصورة إلى ملف. يمكن استعمال التابع imshow لعرض الصورة.
  11. Kais Hasan
    توجد خدمة tawk.to حيث أنها مجانية للأبد، و هي تقدم خدمات مشابهة للخدمة التي قمت بذكرها. و هي تسمح لك بتنظيم الرسائل و التحدث إلى مستخدمي موقعك، الاستجابة إلى رسائل الدعم و الشكاوى و حتى يمكن القيام بإنشاء مركز دعم عن طريقها. يمكن الاطلاع على الموقع و التسجيل به للقيام بتجربة هذه الخدمة.
  12. Kais Hasan
    لا توجد واحدة منهما أفضل من الأخرى في كل شيء، كل منهما له محاسنه و مساوئه و يجب علينا معرفتها و من ثم معرفة متطلبات التطبيق الذي نريد بناءه حتى نعرف ما الذي يجب علينا استعماله. ال SQL تستطيع أن تستعلم بشكل مهيكل بينما ال nosql ليست كذلك، و بالتالي في حال كان هناك هيكلية معينة للبيانات فستكون ال sql أفضل. يمكنك بسهولة توسعة ال nosql من ناحية ال attributes فهي ديناميكية أكثر من ال sql، و بالتالي في حال كان لديك تطبيق فيه كيانات ستتغير بشكل كثير فيفضل استعمال ال nosql. هذه هي الميزات الأساسية لكل منهما و التي يجب أن تكون كافية لتحديد ما الذي تريده.
  13. Kais Hasan
    البرنامج الخاص بذلك كبير نوعا ما و يصلح لعرض في موقع مستقل، يمكنك التوجه إلى هناك و نشر العرض و ستجد من يقوم بكتابته لك باحترافية كبيرة.
  14. Kais Hasan
    بشكل عام فإنه يجب عليك أن تقوم في البداية بمعرفة هيكلية الموقع لمعرفة كيفية استخراج المعلومات منه، يمكننا تسمية ذلك webscrabing،و من ثم عليك التعامل مع ال API الخاص بال whatsapp للقيام بالإرسال إلى المستخدم. من الصعب كتابة الكود بدون معرفة التفاصيل الخاصة بالموقع المطلوب سحب البيانات منه. يمكنك نشر طلبك على موقع مستقل، و ستجد من يقوم بذلك بشكل احترافي و بسرعة.
  15. Kais Hasan
    إن الخطأ غالبا من الترميز المستعمل للإرسال، يجب عليك تحديد الترميز عندما تقوم بالإرسال عن طريق وضع ذلك في ال header، و يمكنك استعمال الترميز التالي: charset=UTF-8 و ذلك ﻷن الأحرف العربية تعتبر Unicode و ليست من الأحرف العادية. يمكنك تزويدي بمعلومات إضافية كالكود الذي استعملته في الإرسال حتى يمكنني مساعدتك أكثر و بشكل دقيق.
  16. Kais Hasan
    ال hooks وظيفتها تكون ضمن ال component، فمثلا ال hook التي قمت باستعمالها تقوم بالإضافة إلى ال state، و بالتالي لا معنى من وجودها خارج ال component. و هذا تماما ما يقوله لك الخطأ. يمكنك تصحيح الكود عن طريق إدخال ال hook إلى داخل التابع بالشكل التالي: import React, { useState } from "react"; export const MyComponent = (props) => { const [count, setCount] = useState(0); return <span>{count}</span> }
  17. Kais Hasan
    إن السؤال السابق يبدو سؤال امتحاني و بالتالي سأقوم بمساعدتك لفهم المطلوب و الفكرة العامة بدون تقديم الجواب بشكل مباشر. في البداية نحتاج إلى قاعدة معطيات لتخزين ما سبق، بما أنه يمكننا تحديد أي عنصر عن طريق الرمز الخاص به فيفضل استعمال map. بعد تحديد ذلك كل ما علينا القيام به هو استقبال دخل من المستخدم يمثل الرمز الخاص بالمنتج، و عدد القطع منه، و من ثم يجب علينا الذهاب إلى قاعدة المعطيات و إيجاد المنتج (لا ننسى أن نقوم باختبار فيما إذا كان هذا المنتج موجود فعلاً) و الحصول على معلوماته لحساب السعر و طباعة الفاتورة. طبعا يمكننا قبول أكثر من دخل واحد، مثلا يمكننا قبول مصفوفة دخل كل عنصر فيها عبارة عن الرمز و عدد القطع (يمكن تخزين ذلك في pair).
  18. Kais Hasan
    يمكنك تحويل المصفوفتين إلى مجموعات و القيام بعملية تقاطع بينهما، على الشكل التالي: a = [1, 2, 3, 4, 5] b = [3, 4, 5, 6, 7] s1 = set(a) s2 = set(b) ans = s1.intersection(s2) print(ans) # {3, 4, 5} أي أننا هنا نقوم بتحويل ال list إلى set عن طريق استعمال set(a) مثلاً، و من ثم نقوم بعملية التقاطع باستعمال التابع intersection. بالطبع يمكنك القيام بذلك بشكل يدوي، و هناك عدة طرق سأذكر أبسط واحدة بينها لسهولة الفهم و لكن هذه الطريقة غير مستحبة ﻷنها تستهلك زمن كبير في حال كانت المصفوفات كبيرة: def shared(a, b): ans = [] for i in a: if i in b: ans.append(i) return ans a = [1, 2, 3, 4, 5] b = [4, 5, 6, 7, 8] ans = shared(a, b) print(ans) # [4, 5] إن التابع السابق يأخذ مصفوفتين سنقوم بحساب العناصر المشتركة بينهما، في البداية نقوم بتعريف مصفوفة فارغة لنخزن الجواب فيها. ثم نقوم بالمرور على عناصر المصفوفة الأولى، و نختبر فيما إذا كان العنصر الحالي موجود في المصفوفة الثانية، للتحقق من ذلك نستعمل المعامل in ، في حال تحقق الشرط نقوم بإضافة العنصر الحالي إلى المصفوفة ans عن طريق استعمال التابع append. و لكن كما ذكرت مسبقاً يفضل استعمال المجموعات للتحقق من هذه الأمور، ﻷن أداءها أفضل.
  19. Kais Hasan
    يمكن القيام بذلك بسهولة باستعمال التابع toLocaleString، مثلا يمكن كتابة تابع يقوم بذلك بشكل كامل بالشكل التالي: function convertTZ(date, tzString) { return new Date((typeof date === "string" ? new Date(date) : date).toLocaleString("en-US", {timeZone: tzString})); } الآن إذا كنت تريد تغيير التاريخ إلى منطقة أخرى يمكنك ذلك عن طريق تمرير القيمة إما ك string أو ك object من Date، مثال على ذلك: date = new Date(); convertedDate = convertTZ(date, 'Asia/Riyadh'); console.log(convertedDate);
  20. Kais Hasan
    كمقارنة بين النوعين: SVG أفضل من ناحية التوسع حيث أنه يمكن طباعته بجودة عالية مهما كانت دقة الشاشة، بينما canvas لا يملك هذه الخاصية و له جودة منخفضة في حال كانت دقة الشاشة عالية. SVG يعطي أداء أفضل من أجل عدد قليل من الأشكال أو في حال كانت مساحة الشكل كبيرة، بينما canvas له أداء أفضل في حال كان هناك عدد كبير من الأشكال و في حال كانت مساحة الشكل صغيرة. يمكن تعديل ال SVG عن طريق js, CSS بينما يمكن تعديل ال canvas فقط باستعمال ال js.
  21. Kais Hasan
    في البداية علينا التغيير في ملف ال html كما يلي: <button class="op">-</button> <button class="op">+</button> <button class="op">x</button> <br> <button id="equal" >=</button> لقد قمت بوضع ما يلزم تغييره، و بالتالي ما تبقى يمكن تركه كما هو. الآن في كود ال javascript يجب علينا وضع حدث يستمع إلى العمليات، كما يجب التفريق بين أول رقم و ثاني رقم، سأضع مثال يوضح كيف يمكن القيام بذلك في حال كنا نريد تطبيق العمليات على أعداد من خانة واحدة، يكون الكود كما يلي: في البداية نقوم بتعريف المتحولات المطلوبة، و سأعطيها القيمة null لتوضيح أنها لم تأخذ قيمة حتى الآن let op = null; let num1 = null; let num2 = null; الآن من أجل الأرقام سأقوم بتعديل هو أنه في حال كانت العملية لا تزال null أي أننا لم نقم بإدخالها بعد، فهذا يعني أننا نقوم بإدخال الرقم الأول و أضع قيمته في المتحول المطلوب، طبعا قيمة الدخل ستكون عبارة عن string و بالتالي يجب تحويلها إلى int عن طريق التابع parseInt كما هو موضح num.forEach(item => { item.addEventListener("click", ()=>{ value = input.value = item.innerText calc.innerText+=value console.log(); if (op === null) num1 = parseInt(value); else num2 = parseInt(value); }) }); من ثم أقوم بإضافة الحدث الذي يقوم بمراقبة إذا ما تم إدخال عملية، و هنا نفس الكود السابق و لكن الفرق أنني أدخل العملية و أحتفظ بها في المتحول المناسب، في حال كانت العملية null فقط أقوم بوضع قيمتها و إلا لن أحدث قيمتها، كما أنني أقوم بطباعتها على الشاشة كما في حال الأرقام. op_btns = document.querySelectorAll('.op'); op_btns.forEach(op_btn => { op_btn.addEventListener("click", () => { if (op === null){ op=op_btn.innerText; calc.innerText += op } }) }); في النهاية يبقى الزر المسؤول عن حساب العملية و هنا أقوم في البداية باختبار في حال كانت هناك قيمة لم يتم إدخالها بعد فلا يجب حساب شيء و إلا فإنني أقوم بطباعة = على الشاشة من ثم أقوم بحساب العملية المطلوبة و طباعتها على الشاشة eq_btn = document.getElementById('equal'); eq_btn.addEventListener("click", () => { if (op === null || num1 === null || num2 === null) return; calc.innerText += '='; let result = num1; switch(op){ case '+': result+=num2; break; case 'x': result*=num2; break; case '-': result -= num2; break; } calc.innerText += result; }) طبعا هنا المثال تعليمي و يجب تطويره لكي يقوم بمعالجة حالات الخطأ و حالة أعداد أكثر من خانة
  22. Kais Hasan
    إن الكود الموجود يقوم فقط بأخذ كل ما يتم إدخاله و إضافته إلى الخرج حيث أن ذلك يتم تماما في هذا المقطع من الكود: num.forEach(item => { item.addEventListener("click", ()=>{ value = input.value = item.innerText calc.innerText+=value console.log(); }) }); للقيام بالعمليات الحسابية يجب أن نقوم بالتمييز بين الأزرار أيضاً، حيث أنه في الكود فإن جميع الأزرار لها نفس الصنف، بينما يجب علينا مثلاً إضافة حدث خاص عند النقر على عملية = للقيام بالعملية المطلوبة و طباعة الناتج. للقيام بالعملية الحسابية أيضاً يجب علينا تخزين العدد الأول المدخل و العدد الثاني المدخل و العملية مع ملاحظة أن العدد الأول المدخل قد لا يكون من خانة واحدة، أي أن حدث الضغط على زر الرقم لا يكفي، فيجب علينا أن نقوم ببناء الرقم حتى إدخال العملية الحسابية و هنا ينتهي الرقم الأول، و من ثم يبدأ الرقم الثاني و لا ينتهي حتى الضغط على عملية المساواة.
  23. Kais Hasan
    الجواب على هذا السؤال يحتمل عدة طرق بحسب التقنية التي قمت باستعمالها لبناء التطبيق، من ناحية قاعدة البيانات يمكنك فرض القيد Unique على العمود حتى يتم منع إضافة قيم مكررة، و لكن من الأفضل أيضاً معالجة ذلك من ناحية التطبيق. و بغض النظر عن التقنية المستعملة فإن الطريقة العامة هي أن تقوم بأخذ القيم من المستخدم ثم القيام بالبحث في قاعدة البيانات عما اذا كانت تلك القيمة موجودة من قبل أم لا. يفترض أن تكون التقنية التي تستعملها تسمح بالقيام بذلك باستعمال تابع بسيط، يمكنك ذكر التقنية حتى أقوم بمساعدتك بشكل محدد أكثر.
  24. Kais Hasan
    يجب في البداية تحويل القيمة إلى سلسلة و من ثم يمكننا إضافة الأصفار باستعمال التابع padStart الذي يقوم بأخذ الطول الأعظمي للسلسلة كأول وسيط و من ثم القيمة التي يجب حشوها كثاني وسيط، كمثال على ذلك: let x = 43; let s = String(x).padStart(4, '0'); console.log(s); //0043
  25. Kais Hasan
    في البداية عليك انشاء مشروع vite بمكنك استعمال المكتبة create-vite بالشكل التالي: $ npm create vite@latest من ثم نقوم بتهيئة المشروع و الانتقال إلى المجلد الخاص به بالشكل التالي: npm init vite my-project cd my-project و من ثم يمكنك القيام بتنزيل tailwind و تهيئة ملفات الضبط الخاصة به بالشكل التالي: npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
×
×
  • أضف...