Hassan Hedr

التعديلات في الحزم الخارجية يجب أن تكون داخل تطبيقك وليس بتعديل مباشر على الحزمة، هذا يقتضي أن توفر الحزمة طريقة لتغيير عملها مثلا عبر التحميل الزائد للتوابع الموروثة
في حالتك يمكن التعديل على LoginController من داخل مشروعك والتحميل الزائد للتابع username المسؤول عن تحديد الحقل الخاص باسم المستخدم كالتالي:
namespace App\Http\Controllers\Auth; use App\Http\Controllers\Controller; use Illuminate\Foundation\Auth\AuthenticatesUsers; class LoginController extends Controller { use AuthenticatesUsers; protected $redirectTo = '/home'; public function __construct() { $this->middleware('guest')->except('logout'); } public function username() { return 'username'; // تحدد اسم الحقل هنا } }  

نعم عمليات القراءة تحسب بعدد المستندات Documents المقروءة استدعاء كامل المجموعة Collection سيكلفك عمليات قراءة بعدد المستندات داخلها
عبر استدعاء فقط المستندات Documents التي تحتاجها (لتقليل عمليات القراءة) باستعلام واحد فقط (لتقليل السرعة)،
مثلا باستخدام المعامل in سيجلب لك فقط المستندات بالمعرفات المحددة كالتالي:
productsCollection.where('id', 'in', [ /* ... معرفات المنتجات المطلوبة */ ]) أو حتى تقليل عدد المستندات أكثر اذا كنت تريد استردادهم بغرض العرض بحيث فقط تطلب العدد الذي تحتاجه للعرض وتتصفح بين المجموعات باستخدام pagination كالتالي:
productsCollection.where('id', 'in', [ /* ... */ ]) .startAt(21) // ترتيب أول منتج في الصفحة .limit(10) // عدد المنتجات المطلوبة  

المشكلة في حال طابق الطلب أي من المسارين "/" و "about/" سيتم إرسال رد للعميل، ولن ينتهي التنفيذ وسيتم محاولة ارسال الرد الموجود في نهاية التابع وهذا ينتج خطأ لأنه تم ارسال رد سابق للعميل وانتهى الاتصال
الحل يكون بانهاء تنفيذ التابع (باستخدام return) عند أول إرسال لرد كالتالي:
const server = http.createServer((req, res) => { if (req.url === '/') { return res.end('Welcome to our home page') } if (req.url === '/about') { return res.end('Here is our short history') } res.end(` <h1>Oops!</h1> <p>We can't seem to find the page you are looking for</p> <a href="/">back home</a> `) }) أو وضع الردود في سلسلة if else حيث تضمن تنفيذ رد واحد فقط كالتالي:
const server = http.createServer((req, res) => { if (req.url === '/') { res.end('Welcome to our home page') } else if (req.url === '/about') { res.end('Here is our short history') } else { res.end(` <h1>Oops!</h1> <p>We can't seem to find the page you are looking for</p> <a href="/">back home</a> `) } })  

عند التعامل مع الملفات عن طريق الحزمة fs يمكنك تحديد عدة طرق تنوي التعامل فيها مع الملف المذكور عبر تمرير المعامل flag يوجد له عدة قيم بعدة معاني أمثلة:
'a' يتم فتح الملف المذكور للكتابة واضافة المحتوى لنهاية الملف، إذا لم يكن الملف موجودا فسيتم انشائه (هذا كما في المثال المذكور) 'w' يتم فتح الملف المذكور للكتابة وازالة محتوياته وكتابة المحتويات الممررة كما لو انك تنشئ ملف جديد، إذا لم يكن الملف موجودا فسيتم انشائه 'r' يتم فتح الملف المذكور للقراءة، وسيظهر خطأ في حال الملف لم يكن موجودا (لا يتم تمريرها للتابع writeFileSync بل للتابع open) في مثالك السابق في كل مرة ستنفذ البرنامج سيقوم بإضافة محتويات الملفين المذكورين إلى الملف content/result-sync.txt

حاول انشاء Middleware وتسجيله ضمن النواة Kernel،
تتحقق داخله من نوع المستخدم وبعدها تقوم بفصل الاتصال مع قاعدة البيانات، ثم تغيير الاعدادات ديناميكيًا، ثم إعادة الاتصال مجددا واكمال الطلب كالتالي
class ChangeDatabaseForUser { public function handle(Request $request, Closure $next, ...$guards) { \DB::disconnect('mysql'); \Config::set('database.connections.mysql.database', auth()->user()->type == 0 ? 'db1' : 'db2'); \DB::reconnect(); return $next($request); } }  

لديك أرضية جيدة في JavaScript وعدة مفاهيم متقدمة تجعلك قادرا على تنفيذ المشاريع،
الخبرات التي ذكرتها كافية لبناء تطبيقات في NodeJS
لا تعتمد على المسميات من Junior و Senior  فهي نسبية حسب كل مؤسسة وما تتطلبه من مهارات، قد تلقبك مؤسسة بمطور متوسط، بينما مهاراتك تكفي حاجة مؤسسة أخرى ستدعوك مطور متقدم 

NextJS لا يدعم تمرير الاعدادات الى webpack مباشرة
يمكنك بدل من ذلك تمرير الدالة webpack وتعديل اعدادات webpack داخل ملف اعداد next.config.js 
module.exports = { webpack(config, { buildId, dev, isServer, defaultLoaders, webpack }) { config.module.rules[3].oneOf.forEach((moduleLoader, i) => { Array.isArray(moduleLoader.use) && moduleLoader.use.forEach((l) => { if ( l.loader.includes("\\css-loader") && !l.loader.includes("postcss-loader") ) { const { getLocalIdent, ...others } = l.options.modules; l.options = { ...l.options, modules: { ...others, localIdentName: "[hash:base64:6]", // هنا يمكنك تخصيص الاسم }, }; } }); }); return config; }, };  

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

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

يبدو أنك تستخدم النسخة 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', }  

كلاهما قيم تعطى للخاصية 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); // الوصول للعنصر عن طريق العنصر الأب }  

يمكن معرفة رمز الحالة للطلب ونص الخطأ من الغرض 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  

لا داع لاستخدام 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", }, });  

عند الاستعلام عن بيانات في جدول ما ونريد جلب بيانات من جداول أخرى متعلقة (مرتبطة) ببيانات هذا الجدول فإننا نستخدم الربط 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 مع الواجهة البرمجية للاضافة التي تريد التطوير عليها أنصحك بأسلوب التعلم من الأعلى للأسفل، أي تبدأ بتعلم ووردبرس وحين تواجه مشكلة ما يحتاج حلها لاستخدام هياكل بيانات أو خوارزميات أن تقوم بالبحث والتعمق وفهم ما تحتاجه
بعد فترة سيصبح لديك خبرة بهياكل البيانات والخوارزميات التي تحتاجها في عملك 

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

خاصية text-fill-color ليست قياسية (standard) وانما تابعة للإضافة webkit أي عند استعمال الخاصية تكتب بالشكل
-webkit-text-fill-color صحيح فعملها مطابق تماما لعمل الخاصية color ولها الأولوية، الصف التالي عندما يطبق على عنصر سيتم تطبيق اللون الأحمر على النص وتجاهل قيمة color
.text { color: black; -webkit-text-fill-color: red; } وسبب وجودها أن الحزمة webkit تحتوي على عدة خصائص متعلقة بتنسيق النص
-webkit-text-stroke-width: 1px; //خاصية عرض خط تحديد النص -webkit-text-stroke-color: black; // خاصية لون خط تحديد النص
ربما يسعى مطورو webkit لجعلها حزمة متكاملة مستقلة ولو على حساب تكرار خصائص موجودة في CSS

يمكنك ذلك عبر تغيير إعدادات اللون لهذا النوع من الصفوف إلى أي لون تفضلينه عبر تغيير الإعدادات من  Settings > Editor > Color Scheme > Java > Anonymous class
ومن ثم تغيير اللون الأمامي Foreground كما في الصورة 

يمكنك انشاء View لتمثل جدول جديد (وهمي) يجمع كل البيانات ويخفي البنية الحقيقية للجداول ويجعل عبارة الاستعلام اقصر واسهل كالتالي
CREATE VIEW usersView AS ( SELECT u.id_user AS id_user, u.email AS email, u.createdAtU AS createdAtU, u.updatedAtU AS updatedAtU, ui.fullname AS fullname, ui.createdAtI AS createdAtI, ui.updatedAtI AS updatedAtI, uc.code AS code, uc.createdAt AS createdAt, uc.updatedAt AS updatedAt FROM users u LEFT JOIN usersInfo ui ON u.id_user = ui.id_user LEFT JOIN usersCode uc ON u.id_user = uc.id_user ); وتستعلم عن بيانات مستخدم ما كالتالي
SELECT * FROM usersView WHERE user_id = 5 لادخال بيانات في عدة جداول معا تتعامل مع ال View كانها جدول حقيقي   
INSERT INTO usersView (fullname, email, code) Values ('Full Name', 'email@example.com', 'AX5');  

لمعرفة عدد المحارف في النص يمكن استخدام التابع strlen لمعرفة عدد الكلمات في النص يمكن استخدام التابع str_word_count لمعرفة عدد الاسطر يمكن تقسيم النص عند كل سطر وعد الأقسام باستخدام التوابع count, explode يمكن كتابة الصف كالتالي
class Text { public string $text; public function __construct($text) { $this->text = $text; } public function characters() { return strlen($this->text); } public function words() { return str_word_count($this->text); } public function lines() { return count(explode("\n", $this->text)); } } // يستخدم كالتالي $text = new Text("..."); $chars = $text->charachters(); $words = $text->words(); $lines = $text->lines();  

يمكنك تمرير المكون من MaterialUI كإبن للمكون Link 
import Link from 'next/link' import { Link as StyledLink } from '@material-ui/core'; // .. return ( <Link href="/" passHref> <StyledLink>Home</StyledLink> </Link> ) لاحظ تمرير الخاصية passHref وهي تجعل المكون يمرر الرابط للمكون الإبن

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

بما أنك تستخدم Expo في مشروعك يمكنك الاستفادة من الحزمة expo-asset لجلب مسار الملف المطلق كالتالي
// في الأعلى import { Asset } from 'expo-asset'; // لتنفيذ أمر فتح الملف OpenAnything.Pdf(Asset.fromModule(require('../PDF/quran.pdf')).uri)