Sam Ahw

هناك العديد من الطرق لجعل حجم الخط يتناسب مع أحجام الشاشات المختلفة، ولكن الطريقة الأكثر شيوعًا هي استخدام وحدة الـ "rem" بدلاً من وحدة الـ "px" أو "em". تعتمد وحدة "rem" على حجم الخط الأساسي الذي تم تعيينه على الجسم (body) في صفحة الويب، وبالتالي فإن حجم الخط يتناسب مع حجم الشاشة بشكل أكثر ديناميكية. لتحديد حجم الخط باستخدام وحدة "rem"، يمكنك استخدام القيمة النسبية لحجم الخط بدلاً من القيمة الثابتة في الوحدات الأخرى. مثلاً، إذا كان حجم الخط الأساسي (font-size) ضمن الوسم (body) 16 بكسل، فيمكنك استخدام القيمة "1.5rem" بدلاً من "24px" لتعيين حجم الخط في عنصر معين. بالإضافة إلى ذلك، يمكن استخدام الـ CSS media queries لتغيير حجم الخط بناءً على حجم الشاشة، على سبيل المثال، يمكنك تعيين حجم الخط ليكون أكبر على الشاشات الكبيرة وأصغر على الشاشات الصغيرة. هناك أيضًا العديد من المكتبات والأدوات المتاحة على الويب التي تمكنك من جعل حجم الخط يتناسب مع أحجام الشاشات بشكل أسهل، مثل Bootstrap و Google's Material Design وغيرها من مكتبات CSS التي تسهّل عليك التحكم بالخطوط والتنسيقات.

أرجو منك توضيح سؤالك أكثر وذكر المزيد من التفاصيل حول المشكلة أو إرفاق الشيفرة البرمجية التي تحوي المشكلة لنستطيع مساعدتك بشكل أفضل. في حال كنت ترغب بتضمين ملف جافاسكريبت ضمن صفحة HTML يجب عليك إضافة السطر التالي قبل إغلاق الوسم body: <script src="myScript.js"></script> مع تبديل قيمة src باسم الملف والمسار المطلق لمكان وجوده ضمن مشروعك. على سبيل المثال في حال كان الملف موجود ضمن مجلّد js يمكنك الإشارة له بالشكل التالي: <script src="/js/myScript.js"></script> لقراءة بعض الملاحظات حول أساسيات لغة الجافاسكريبت: كما يمكنك الاطلاع على إرشادات طرح الأسئلة من هنا: كيف تحصل على إجابة لسؤالك؟

يمكنك تغيير بنية الشيفرة لديك وتمرير حالة العناصر بشكل مشروط ضمن الخطّاف useState وبالتالي يصبح تغيير الصفوف أكثر مرونة للعنصر الواحد بالشكل التالي: import React, { useState } from 'react'; function ListItem(props) { return ( <li className={props.active ? 'active' : ''} onClick={props.onClick}>{props.value}</li> ); } function List() { const [activeItem, setActiveItem] = useState(null); const items = [1, 2, 3, 4, 5, 6, 7, 8]; const handleItemClick = (item) => { setActiveItem(item === activeItem ? null : item); } return ( <ul> {items.map((item) => <ListItem key={item.toString()} value={item} active={item === activeItem} onClick={() => handleItemClick(item)} /> )} </ul> ); } export default List;

يعمل السطر الثاني على تعريف متغيّر باسم count والذي يستخدم الدالة filter لإرجاع مصفوفة جديدة تحوي فقط العناصر التي تساوي العنصر الذي قمنا بتمريره، وبعد ذلك تم استخدام length لطباعة عدد العناصر فقط وإسناده للمتغيّر count. (حتى الآن لم يتم استخدام المتغيّر count وإنما فقط تم تهيئته لاستخدامه لاحقاً). وتم استخدام الصيغة المختصرة كتابع سهمي، ولكن لفهم الفكرة يمكنك تصوّره بالصيغة التالية: function count(arr, val){ return arr.filter((item) => item === val).length } بعد ذلك يتم المرور على مصفوفة العناصر الأساسية المررة لحساب في حال كان مجموع تكرارات أي من عناصرها هو أحادي (بمعنى أن عدد مرات ظهور هذا العنصر في المصفوفة غير زوجي). حاول تنفيذ الشيفرة البرمجية وطباعة بعد الرسائل النصية باستخدام console.log تظهر نتيجة القيم التي يتم تخزينها لكي تتوضح لك الصورة أكثر وحاول في كل مرة تمرير قيم مختلفة لمراقبة النتيجة ولفهم الشيفرة البرمجية بشكل أفضل.

يجب عليك تعلّم الجافاسكريبت Javascript فهي العنصر الأساسي الثالث بالإضافة إلى HTML و CSS في تطوير الويب بجميع مجالاته سواء واجهات المستخدم أو خوام الويب. على الرغم من تشابه الاسم بينها وبين جافا إلا أن اللغتين مختلفتين تماماً لذلك أقترح عليك أولاً الاطلاع على بعض المصادر والتعرّف على تقنيات الويب واللغات الأساسية المستخدمة في تطوير الويب للتمييز بينها والبدء بالتعلّم بالشكل الصحيح. ستجد قسم كامل خاص بالجافاسكريبت بكافة فروعها ضمن أكاديمية حسوب من خلال الرابط التالي: https://academy.hsoub.com/programming/javascript/ كما يمكنك البدء بقراءة المقالات التالية:

يمكنك إنشاء حلقة تكرارية للمرور على العناصر، وفي حال كان المفتاح غير موجوداً في المتغيّر الهدف يتم إضافة زوج key-value كعنصر جديد أما في حال كان موجود مسبقاً يتم إضافة الزوج للعنصر الموجود بالشكل التالي: data = [{ "January": {"China": 6569.4, "Japan": 49448.61,"Norway": 28000.0,"Poland": 3525.427,"Singapore": 33190.231851,"United States": 25976.4,"Taiwan": 15363.884885}}, {"February": {"Japan": 2540.32,"Poland": 14750.0,"Singapore": 16044.473973}}] result = {} for d in data: for k, v in d.items(): if k not in result: result[k] = v else: result[k].update(v) أو يمكنك اختصار الشيفرة السابقو تنفيذها كالتالي: data = [{ "January": {"China": 6569.4, "Japan": 49448.61,"Norway": 28000.0,"Poland": 3525.427,"Singapore": 33190.231851,"United States": 25976.4,"Taiwan": 15363.884885}}, {"February": {"Japan": 2540.32,"Poland": 14750.0,"Singapore": 16044.473973}}] result = {k: v for d in data for k, v in d.items()} for k, v in result.items(): if isinstance(v, dict): result[k] = {**result[k], **v} print(result) والنتيجة: {'January': {'China': 6569.4, 'Japan': 49448.61, 'Norway': 28000.0, 'Poland': 3525.427, 'Singapore': 33190.231851, 'United States': 25976.4, 'Taiwan': 15363.884885}, 'February': {'Japan': 2540.32, 'Poland': 14750.0, 'Singapore': 16044.473973}}

يمكنك الاعتماد فقط على الحلقات التكرارية وكتابة الشيفرة المبسطة التالية: #include <iostream> using namespace std; void drawPyramid(int height) { for (int i = 1; i <= height; i++) { for (int j = 1; j <= height - i; j++) { cout << " "; } for (int j = 1; j <= 2 * i - 1; j++) { cout << "*"; } cout << " "; } cout << endl; } int main() { int pyramidHeight = 5; // لرسم الأهرامات بجانب بعضها فقط نستدعي التابع السابق حسب الطول for (int i = 1; i <= pyramidHeight; i++) { drawPyramid(i); } return 0; } ويمكنك التحكّم بطول كل عنصر من خلال المتغيّر height، ستكون النتيجة بالشكل التالي: * * * *** *** *** ***** ***** ***** ******* ******* ******* ********* ********* *********

أولاً يجب عليك التأكد من فتح عملية التثبيت كمسؤول للنظام من خلال الضغط على الزر الأيمن للفأرة واختيار Run as administrator. وحاول تعطيل برنامج مضاد الفيروسات أو جدار الحماية قبل التثبيت، وفي حال استمرت المشكلة حاول تحميل نسخة مختلفة. يمكنك أيضاً مشاركة رسائل الخطأ التي تظهر لك في log file الظاهرة في الشاشة أو محاولة البحث عنها على الانترنت على الأرجح ستجد العديد من الحلول

لم أفهم ما علاقة الهاتف بالضبط في سؤالك، كون التقنية التي نتحدث عنها في طرف خادم الويب ولا علاقة لها بمستخدم الموقع. ولكن بشكل عام معظم استضافات مواقع الويب توفّر دعم لـ Redis أو يمكنك التواصل مع الدعم الفني أو الاطلاع على التوثيق الخاص بالاستضافة التي لديك معرفة طرق التثبيت.

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

Redis هو ليس مكتبة ولا إطار عمل، بل تقنية برمجية أشبه بقاعدة بيانات ضمن الذاكرة، مفيد جداً في بعض الحالات التي نحتاج من خلالها لتخزين بعض القيم بشكل مؤقت دون التأثير على عمل التطبيق ولتجنّب التأخير الذي قد يحصل في حال استخدام قاعدة البيانات الأساسية المستخدمة مع موقع الويب. يمكنك الاطلاع عليها من هذا الفيديو: أو من القسم الخاص بـ Redis ضمن أكاديمية حسوب على الرابط التالي: https://academy.hsoub.com/devops/servers/databases/redis/

من الأفضل استخدام Redis كذاكرة مؤقتة لحفظ عناوين IP المستخدمين دون التأثير على بنية الموقع لديك، ويمكنك استخدام الشيفرة التالية كمثال: <?php //الاتصال بخادم redis $redis = new Redis(); $redis->connect('127.0.0.1', 6379); $redis->auth('REDIS_PASSWORD'); $max_calls_limit = 3; // العدد الأعظمي للطلبات خلال وقت محدد $time_period = 10; // نافذة الوقت (الوقت اللازم لإعادة الحساب) $total_user_calls = 0; // إجمالي عدد الطلبات من نفس المستخدم // للحصول على عنوان المستخدم من الممكن أن يكون ضمن 3 أماكن في الطلب الذي يتم استقباله if (!empty($_SERVER['HTTP_CLIENT_IP'])) { $user_ip_address = $_SERVER['HTTP_CLIENT_IP']; } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) { $user_ip_address = $_SERVER['HTTP_X_FORWARDED_FOR']; } else { $user_ip_address = $_SERVER['REMOTE_ADDR']; } //التحقق في حال كان عنوان المستخدم جديد وغير موجود في الذاكرة if (!$redis->exists($user_ip_address)) { $redis->set($user_ip_address, 1); $redis->expire($user_ip_address, $time_period); $total_user_calls = 1; } else { $redis->INCR($user_ip_address); $total_user_calls = $redis->get($user_ip_address); if ($total_user_calls > $max_calls_limit) { echo "User " . $user_ip_address . " limit exceeded."; exit(); } } يمكنك مراجعة التوثيق الرسمي لـ Redis وقراءة الأوامر وطرق التثبيت والمزيد من التفاصيل. أو البحث على الانترنت عن تثبيت Redis ضمن نظام التشغيل الموجود لديك في بيئة الاستضافة.

ممكن طبعاً، يجب عليك إنشاء وتصميم واجهات الموقع بشكل مشابه للتصميم الموجود في القالب المستخدم وبعد ذلك يمكنك تحديد لغات البرمجة وأطر العمل التي يجب من خلالها بناء الموقع، في PHP يمكن استعمال إطار العمل Laravel وستكون عملية التطوير أسهل والتعامل مع قاعدة بيانات MySQl بحيث يتم إجراء نسخ احتياطي لقاعدة بيانات موقع ووردبريس واستيراد البيانات إلى قاعدة البيانات الجديدة. أو يمكن فصل واجهة المستخدم والتعامل مع خادم ويب منفصل API لتزويد المعلومات إلى المتصفح، ولكن في كلا الحالتين ستحتاج إلى لوحة تحكّم بديلة لوردبريس للتحكم في محتوى الموقع بشكل كامل. وبعد ذلك يمكنك العمل على إضافة الميزات التي يحتاجها موقعك واستبدال الإضافات plugins التي كانت مستخدمة في موقع ووربريس بشيفرات برمجية مكتوبة في موقعك الجديد.

يمكنك حذف المسافات من خلال استخدام Regex كالتالي: Regex.Replace(XML, @"\s+", ""); وفي حال كنت ستستخدمها في أكثر من مكان ضمن شيفرتك البرمجية يمكنك كتابة تابع بسيط لحذف المسافات: private static readonly Regex sWhitespace = new Regex(@"\s+"); public static string ReplaceWhitespace(string input, string updatedstr) { return sWhitespace.Replace(input, updatedstr); } يوجد أيضاً طريقة أخرى باستخدام ToCharArray : public static string RemoveWhitespace(this string input) { return new string(input.ToCharArray() .Where(c => !Char.IsWhiteSpace(c)) .ToArray()); }

جرّب تثبيت clang أولاً من خلال الأمر التالي: pip install clang ثم أعد تثبيت kivy: pip install kivy

ربما يمكنك البحث على الانترنت عن مصطلح "online video recognition" وستجد العديد من المواقع التي تميّز بين الفيديوهات في حال كان هذا مقصدك. أو إن كنت تقصد برمجة تطبيق يقوم بهذه العملية فالأمر معقّد قليلاً ويحتاج بعض الخبرة في برمجة الويب وتطبيقات الهاتف الجوال والمعرفة بأساسيات لغات البرمجة والذكاء الاصطناعي حتى تستطيع تحقيق الهدف من التطبيق. وللبدء يمكنك التوجه إلى قسم الكتب أو الدروس والمقالات للاطلاع على بعض النقاط الأساسية في عالم البرمجة. حاول كتابة المزيد من التفاصيل في سؤالك أو كتابة المصطلح كاملاً باللغة الانكليزية أو العربية حتى تحصل على إجابات أفضل، يمكنك الاطلاع على إرشادات الأسئلة من هنا: كيف تحصل على إجابة لسؤالك؟

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

يوجد بعض النقاط الأساسية التي يمكنك الانتباه لها لتحسين أداء تطبيقات React: 1- State management: في حال كنت تستخدم Context API أو غيرها قد يؤدي الأمر إلى إعادة عرض كامل الصفحة أو الواجهة عند كل تغيير. لذلك يجب عليك محاولة فصل العناصر قدر المستطاع وتحديد الحالة المراد تحديثها. 2- عدد كبير من العناصر الأبناء التابعة لعنصر واحد: عند تحديث حالة المتغيرات في شجرة DOM ووجود عدد كبير من العناصر أيضاً سيبطئ من الأداء لذا عليك البحث عن طرق استخدام React.memo. 3- وجود العديد من الأحداث ضمن واجهة العرض: في حال كان لديك العديد من الأحداث التي يتم الاستماع لها ضمن واجهة واحدة سيؤدي ذلك أيضاً إلى بطئ تحميل وتحديث العناصر، لذا يمكنك اللجوء إلى استخدام infinity scroll أو تحميل العناصر فقط ضمن الجزء الظاهر للمستخدم. بعض النصائح لتحسين الاداء: 1- استخدام Stateless Components والابتعاد عن تحديث الحالة بشكل عام ضمن المكونات الكبيرة. 2- استخدام Webpack أو مايشابهه عند نشر المشروع لضغظ الملفات وتحضيرها لبيئة النشر. 3- اعتماد "Dependency optimization" ومحاولة الاستغناء عن المكتبات الكبيرة الحجم قدر المستطاع. 4- الابتعاد عن اعتبار Index كمعرّف فريد في الحلقات، لمنع تكرار القيم بين عناصر الواجهة الواحدة. وأخيراً، يمكنك الاعتماد على نافذة المطوّر في المتصفح أثناء التطوير ومراقبة الأداء والوقت اللازم لتحميل وإظهار العناصر في كل مكوّن أو واجهة والعمل على تحديد النقاط على تؤثر على الأداء وتحسينها. كما يمكنك قراءة المزيد من التفاصيل من توثيق مكتبة React الرسمي في قسم "Optimizing Performance" أو باللغة العربية في ويكي حسوب: https://wiki.hsoub.com/React/optimizing_performance

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

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

نعم يمكن استخدام الجافاسكريبت لذلك، بحيث يتم استخدام العنصر canvas في HTML كحاوية للرسومات التي يتم إنشائها والتحكم بها من خلال الجافاسكريبت وتتيح لك رسم النقاط والخطوط وجميع الأشكال الهندسية دائرة، مربع، مستطيل،..إلخ أو أي شكل هندسي آخر تبعاً لإحداثيات النقاط والوصل فيما بينها. مثال: <canvas id="myCanvas" width="200" height="100"></canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); </script> بحيث تبدأ الإحداثيات من أعلى اليسار، وعند الرسم يتم استخدام التوابع المتاحة في جافاسكريبت لتحريك نقطة البداية والوصل بين هذه النقاط على شكل خطوط وأشكال هندسية. يمكنك الاطلاع أكثر على canvas والتوابع الرسومية المتاحة من خلال البحث على الانترنت. ويوجد أيضاً بعض الطرق الأخرى للرسم من خلال استخدام عنصر SVG أو مكتبات إضافية متاحة للتعامل مع الرسوم والتحريك. شرح عن العنصر canvas في ويكي حسوب: https://wiki.hsoub.com/HTML/canvas مقال مفيد عن canvas:

يجب عليك تثبيت خادم ويب مثل Nginx أو Apache وربط مسار المجلّد الذي يحوي على ملفات موقعك ضمن إعدادات خادم الويب. ثم من إعدادات DNS يجب عليك إضافة عنوان IP Address الخاص بالخادم ليتم ربط اسم النطاق بشكل صحيح. يمكنك إيجاد خطوات مفصّلة عن طرق تحميل وإعداد خادم الويب من خلال إجراء بحث بسيط على الانترنت حسب نوع الخادم الذي ترغب بالتعامل معه.

في لارافل مثلاً يتم تعريفه التحكم بالمسار المراد تحديد عدد الطلبات له بالخطوات التالية: 1- ضمن المسار App\Providers\RouteServiceProvider يتم إضافة الإعدادات ضمن الدالة configureRateLimiting : use Illuminate\Cache\RateLimiting\Limit; use Illuminate\Http\Request; use Illuminate\Support\Facades\RateLimiter; /** * Configure the rate limiters for the application. */ protected function configureRateLimiting(): void { RateLimiter::for('api', function (Request $request) { return Limit::perMinute(60)->by($request->user()?->id ?: $request->ip()); }); } حيث يمكنك التحكّم بالمسارات بشكل عام أو بشكل مخصص لكل مسار، بزمن الحجب بالثانية، والعامل الذي سيتم من خلاله التأكد من أن المستخدم هو نفسه وهنا تحققنا من id أو عنوان IP يوجد العديد من الأمثلة في التوثيق الرسمي للارافل، يمكنك ترجمتها إلى اللغة الغربية في حال لم تكن قادراً على قرائتها أو فهمها.

آلية الإضافة تتم من خلال useState التابعة لمكتبة React والتي بدورها تتحكم بحالة القيم والعناصر في شجرة DOM ضمن المتصفح وهذا أساس عمل مكتبة React. أما القيم الموجودة في الجدول، بما أنها أيضاً موجودة ضمن شجرة DOM وطباعة القيم تعتمد على حالة المصفوفة tasks، فعند تحديث هذه المصفوفة ستعمل مكتبة React على تحديث عناصر الواجهة المعتمدة على هذه القيمة وبالتالي تحديث الجدول الذي يظهر العناصر من خلال الدالة map. ولن يحدث تكرار لأن React قادرة على مقارنة القيمة القديمة والجديدة للحالة أو لشجرة DOM وبالتالي تستطيع تحديد العناصر الجديدة فقط لإضافتها.

أي جزء غير واضح تحديداً بالنسبة لك؟ الدالة map هي دالة في لغة جافاسكريبت يتم تنفيذها على المصفوفات كنوع من الحلقات التكرارية بحيث تسمح لنا تنفيذ بعض الشيفرات البرمجية بالنسبة لكل عنصر من عناصر هذه المصفوفة. وهنا في المثال لديك، يتم استخدامها على المصفوفة tasks بحيث تقوم بإظهار عناصر المصفوفة وعندما يتم إضافة أي عنصر جديد إلى المصفوفة tasks سيتم إظهاره ضمن واجهة المستخدم بما يتوافق مع آلية عمل React. لكن يوجد بعض الأخطاء البسيطة في هيكلية الشيفرة البرمجية، بشكل عام يجب وضع الحلقة التكرارية على مستوى عنصر القائمة أي li بدلاً من ul، لأنه من غير المنطقي تكرار القوائم ul كاملة بدلاً من تكرار العناصر فقط. فتصبح كالتالي: <div className='list-notes'> <ul className='container-list'> {tasks.map((task)=>{ return ( <li> <h5>{task.text} </h5> <button id='Del'>Delete</button> </li> ) } ) } </ul> </div> مع العلم أنه لن يسبب خطأ برمجي، وإنما سيسهّل عليك فهم الشيفرة البرمجية وترتيبها بشكل منطقي أكثر.