Hassan Hedr

إذا كنت تستخدم windows و النسخة 11.1.1 من NextJS ففيها خطأ يسبب عدم تشغيل مشروع جديد، حاول التطوير إلى النسخة 11.2.0 فقد حلت فيها المشكلة npm install next@11.2.0 أو النزول إلى النسخة 11.1.0 npm install next@11.1.0

قد يكون أحد أخطاء ESLint يمنع عملية البناء، حاول تجاهل الأخطاء وحاول البناء من جديد بإضافة التالي إلى next-config.js module.exports = { eslint: { ignoreDuringBuilds: true, }, };

المعرف id قيمته تبقى ثابتة لكل سطر في جدول البيانات، لا يجب ان يتغير أو ان تعتمد عليه لمعرفة ترتيب العناصر فهو يميز كل منشور عن الاخر يمكنك معرفة ترتيب كل منشور ضمن جميع المنشورات المستعلم عنها باستخدام for in مع enumerate كالتالي for index, post in enumerate(posts_queryset): # index // ترتيب هذا المنشور ...

outputPath هي تدل على المسار الذي ستحفظ فيه الصور publicPath تدل على المسار الذي يجب على المتصفح بجهة العميل الوصول للصور على الخادم عن طريقه جرب حذف الخاصية publicPath بما انك تريد الوصول للصور من نفس المجلد { test: /\.(svg|png|jpg|gif)$/, use: { loader: "file-loader", options: { name: "[name].[hash].[ext]", outputPath: "images/", }, }, };

يبدو أنك تستخدم النسخة webpack رقم 5 وهي لا تدعم الخاصية contentBase غير نسخة webpack الى 4 كالتالي (بما انك تستعمل yarn) yarn add webpack@4 أو يمكنك نقل الخاصية تحت الخاصية static لتصبح كالتالي devServer: { static: { contentBase: path.resolve(__dirname, './dist'), }, historyApiFallback: true, open: true, compress: true, hot: true, port: 8080, allowedHosts: 'all', }

تنسيق جواب الطلب للملف من الخادم يبدو أنه خاطئ ولا يعيد تنسيق JSON، حاول تحديد ال Accept مع الطلب وتحديد النوع ك application/json لطلب التسنيق حصرا JSON كالتالي: let res = await fetch(`${server}/data`,{ headers: { 'Content-Type': 'application/json' // طلب التنسيق JSON من الخادم }, }); const articles = await res.json(); return { props: { articles, }, };

كلاهما قيم تعطى للخاصية position وتحدد مكان العنصر fixed يكون العنصر ثابتا بالنسبة لنافذة المتصفح لا يؤثر على المساحة المتوفرة للعناصر التي ستليه حتى لو كان العنصر داخل عنصر آخر فإن مكانه سيكون نسبة لنافذة المتصفح يتم تحديد مكان العنصر عبر القيم top, bottom, right, left .class { position: fixed; top: 10px; left: 10px; } /* أو */ .class { position: fixed; bottom: 50px; right:10px; } sticky يبقى مكان العنصر ثابتا على الشاشة فقط حتى نهاية مساحة التمرير scroll للعنصر الحاوي يشغل العنصر مساحة ويؤثر على مكان العناصر التي ستليه يتم تحديد مكان العنصر بإزاحة من أحد الجوانب عبر القيم top, bottom, right, left .class { position: sticky; top: 10px; } /* أو */ .class { position: sticky; bottom: 10px; } /* أو */ .class { position: sticky; left: 10px; } /* أو */ .class { position: sticky; right:10px; }

بما ان القائمتين ليستا متجاورتين لا يمكن استخدام next، بما انك وجدت العنصر الأب المشترك للقائمتين يمكنك الوصول لأي منهما كالتالي var mainDIV = $(this).parents('div.sara1'); ... success:(data) => { mainDIV.find(".size_select").html(data); // الوصول للعنصر عن طريق العنصر الأب }

المكون الإضافي image-webpack-loader لا يحول الصور من صيغ الى أخرى، بل مهمته تعديل دقة الصور بصيغها الحالية تستفيد منه لوضع صورك بدقتها الاصلية اثناء التطوير، وهو يقوم ببناء الموقع وتخفيض دقة الصور لزيادة سرعتها يمكنك تحويل الصور يدويا الى webp عبر الخدمات المجانية المتاحة مثل هذه الخدمة هنا، ثم استخدام المكون image-webpack-loader لتصغير حجمها

يمكن معرفة رمز الحالة للطلب ونص الخطأ من الغرض response داخل الخطأ err كالتالي error.response.status // رمز الحالة error.response.data // جسم الجواب يصبح المثال كالتالي const handleFormSubmit = async (formData, e) => { e.preventDefault(); try { const res = await axios.post('/api/v1/auth/signin', formData); router.push('/secure/home'); } catch (err) { const code = err.response.status; // الرمز const message = err.response.data; // جسم الطلب ويحوي الرسالة if(code === 401) { // خطأ في التسجيل } // خطأ آخر } };

المعامل on_delete يجب أن يكون قابل للاستدعاء أي تابع أنت تحاول تمرير None ولكن محاطة بعلامة الاقتباس " ' " أي يتم معاملتها كنوع نص يمكنك تغييرها الى التالي user = models.ForeignKey(User, on_delete=None) لكن اذا كنت تقصد ب None أن لا يتم اتخاذ اجراء عند حذف البيانات المرتبطة يمكنك تمرير التالي user = models.ForeignKey(User, on_delete=models.DO_NOTHING) حيث قيم on_delete يمكن أن تكون التالي models.CASCADE models.SET_NULL models.DO_NOTHING models.PROTECT

هل يمكنك تعديل المثال في Code Pen لإرفاق ال HTML ايضا كمثال كامل لأقوم بمساعدتك

المشكلة هي في السطر التالي حيث this تدل على التابع التي توجد به مباشرة success:function(data){ $(this).next('.size_select').html(data); // this تدل على التابع الحالي } يمكن استبدالها بتابع مجهول حيث لا يملك هذا التابع القيمة this بل تكون تدل على قيمة التابع الأب له وهو الذي تريده كالتالي success:(data) => { $(this).next('.size_select').html(data); // this تدل على التابع الأب }

يمكنك التواصل مع مركز المساعدة من هنا وسيقومون بمتابعة المشكلة و توضيح الإجراءات

هي عملية تغيير بنية الشيفرة المصدرية بدون أن يتغير عملها لكي تحقق التالي: سهولة القراءة، كتغيير اسماء المتحولات والتوابع الى اسماء واضحة معبرة معنى واضح وفهم أكثر، عبر اختيار اسماء تعبر عن معنى ووظيفة كل متحول أو تابع أو صف تقليل التكرار، حيث نحاول جمع العمليات المكررة بمكان واحدة ونسخة واحدة نستعملها دوما، لتخفيف وقت الصيانة لاحق السرعة، حيث نحسن أداء الخوارزميات المستخدمة لرفع الأداء مثال function a(x, s) { return x + s; } المثال السابق لتابع لا يدل أبدا على وظيفته ولا تعبر المعاملات الممرة له عن هويتها، نقوم بإعادة كتابة التابع السابق كالتالي function sum(number1, number2) { return number1 + number2; }

يمكن ذلك عن طريق تغيير استهداف القائمة المنسدلة التالية، انت تستهدف جميع العناصر ذات الصف select2، يمكنك الاستفادة من الدالة next في JQuery حيث تستهدف فقط العناصر اللاحقة للعنصر الحالي يمكن كتابة المثال كالتالي: $(".select1").change(function() { if ($(this).data('options') === undefined) { /*Taking an array of all options-2 and kind of embedding it on the select1*/ $(this).data('options', $('.select2 option').clone()); } var id = $(this).val(); var options = $(this).data('options').filter('[value=' + id + ']'); // نستهدف فقط العناصر اللاحقة والمجاورة للعنصر الحالي $(this).next('.select2').html(options); });

لا داع لاستخدام useRef في مكونات الصفوف حيث يمكن انشاء متحولات ثابتة في this مباشرة لا داع لاستخدام useCallback لنفس السبب السابق للتزامن بين حالة المكون والعوامل props الممررة يمكن الاستفادة من التابع getDerivedStateFromProps يصبح المكون بالشكل التالي import React, { memo } from "react"; import { StyleSheet, Animated, View, TouchableWithoutFeedback, I18nManager, } from "react-native"; import { ISwitchInter } from "./types"; export class Switch extends React.Component<ISwitchInter> { constructor(props: any) { super(props); const { isActive = false } = this.props; this.state = { active: false }; this.slideInOut = new Animated.Value(isActive ? 1 : 0); } toggleActive = () => { this.setState({ active: !this.state.active }); this.props.onValueChange && this.props.onValueChange(this.state.active); Animated.spring(this.slideInOut, { toValue: this.state.active ? 0 : 1, useNativeDriver: true, }).start(); }; static getDerivedStateFromProps(props, state) { if ((props.isActive || false) !== state.active) { return { active: props.isActive }; } return null; } render() { const { contentContainerStyle, thumbStyle } = this.props; const translate = { transform: [ { translateX: this.slideInOut.interpolate({ inputRange: [0, 1], outputRange: [0, 18.5], }), }, ], }; return ( <TouchableWithoutFeedback onPress={this.toggleActive}> <View style={[ styles.container, contentContainerStyle, { borderColor: this.state.active ? "#FDEC00" : "#707070" }, ]}> <Animated.View style={[ styles.thumb, translate, thumbStyle, !this.state.active && { backgroundColor: "#707070" }, ]} /> </View> </TouchableWithoutFeedback> ); } } export default memo(Switch); const styles = StyleSheet.create({ container: { backgroundColor: "#fff", width: 40, height: 18, borderRadius: 50, padding: 3, justifyContent: "center", alignItems: I18nManager.isRTL ? "flex-end" : "flex-start", }, thumb: { width: 15, height: 15, borderRadius: 25, backgroundColor: "#FDEC00", }, });

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

عند الاستعلام عن بيانات في جدول ما ونريد جلب بيانات من جداول أخرى متعلقة (مرتبطة) ببيانات هذا الجدول فإننا نستخدم الربط Join ولديه نوعين لنفترض أن لدينا جدولين A و B : Inner join أي نريد فقط البيانات في A التي يوجد لها بيانات مقابلة في الجدول الآخر B Outer join أي لا يشترط وجود تقابل في البيانات بين A و B وله ثلاث أنواع: يساري Left أي نريد كل البيانات في A التي يوجد لها ارتباط في B والتي لا يوجد لها ارتباط أيضا (تكون قيمة الأعمدة للجدول B هنا Null) يميني Right أي نريد كل البيانات في B التي لها ارتباط مع A والتي لا يوجد لها ارتباط أيضا (تكون قيمة الأعمدة للجدول A هنا Null) كلي Full أي نريد كل البيانات من كلا الجدولين A و B سواء كان بينهما ارتباط أم لم يكن (تكون قيمة الأعمدة التي ليس لها قيمة مقابلة في الجدول الآخر Null)

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

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

هذه المشكلة تتعلق بنسخة ال matplotlib لديك يمكنك تحديث المكتبة الى اخر نسخة نفذ الامر التالي pip install --upgrade matplotlib أو يمكنك الرجوع الى النسخة 3.1.0 لحل المشكلة pip install matplotlib==3.1.0

يجب توضيح سؤالك وتوضيح تفاصيل أكثر ليتمكن زوار الموقع من مساعدتك، أفترض أنك تريد تضمين حقل ادخال لجملة بحث وزر ينفذ أمر بحث عن بيانات ما في قاعدة البيانات، لتنفيذ هذه العملية يوجد قسمان: الواجهة الامامية: مسؤوليتها جمع المدخلات من المستخدم (في هذه الحالة جملة البحث) وإراسلها إلى الخادم ليقوم بمعالجتها، يمكن استخدام العنصر form لهذا الغرض وارسال البيانات عبر طلب بالطريقة POST <form action="/" method="post"> <label for="term">ادخل جملة البحث:</label> <input id="term" type="text" name="term"> <input type="submit" value="بحث"> </form> الواجهة الخلفية: مسؤوليتها تلقي طلبات البحث واستخراج جملة البحث منها وتنفيذ استعلام ما بقاعدة البيانات عن هذه الجملة، ثم طباعة وارسال النتائج على الشكل الذي يرغب به العميل، سنفترض انك تستخدم PHP ستقوم بالتالي // استخراج جملة البحث $term = $_POST['term'] // اتصال بقاعدة البيانات $conn = new mysqli($servername, $username, $password, $dbname); // البحث في قاعدة البيانات $result = $conn->query('SELECT * FROM users WHERE name='.$term); if ($result->num_rows > 0) { // طباعة النتائج echo "نتيجة البحث:" . "<br>"; while($row = $result->fetch_assoc()) { echo "رقم المستخدم: " . $row["id"]. " - اسم المستخدم: " . $row["firstname"]. " " . $row["lastname"]. "<br>"; } } else { echo "لا يوجد مستخدمين بهذا اللإسم"; } $conn->close();

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

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