عمر قره محمد

نعم يمكنك البدء بورد بريس مباشرةً ولست بحاجة لحضور تدريب ال LARAVEL. إلا ان الافضل هو ان تمشي بشكل تدريجي في مسارات الدورة فهي مصممة ليتم دراستها بالترتيب حتى تحصل على الفائدة القصوى من الدورة.

يمكنك استخدام الدالة التالية حتى يتم اخراج الـ size بشكل رقم مهما كانت مدخلات المستخدم : const size = " something 54 something else "; const filteredSize = Number(size.match(/\d+/)[0]); console.log(filteredSize); // 54 والكود السابق يقوم بإنشاء متغير يسمى size ويعطيه القيمة " something 54 something else ". ثم يستخدم دالة match() للبحث عن أول رقم في السلسلة باستخدام تعبير منتظم يبحث عن أي رقم، ويتم تحويل النتيجة إلى رقم باستخدام دالة Number(). ثم يتم طباعة الرقم المستخرج باستخدام دالة console.log(). ليتم في النهاية استخراج الرقم 54 من النص " something 54 something else ". ويمكن تعديله حتى يكون بإمكان المستخدم ادخال الرقم كالتالي : const size = prompt("enter your size"); const filteredSize = Number(size.match(/\d+/)[0]); console.log(filteredSize); // 54 ولكن جربت الكود السابق في المحرر الخاص بك ولم يعمل، حيث يبدو أن المحرر لا يستجيب لجافاسكريبت، جرب استخدام codepen.io بدلاً منه.

لا يمكنك تشغيل Json Server على استضافة Netlify ولكن يمكنك استخدام الـ Netlify Functions بدلاً من ذلك. Netlify Functions هي خدمة تقدمها شركة Netlify لتشغيل الأكواد الخاصة بك على شكل API endpoints، وهي تعتبر جزء من خدمات serverless functions. وتعتبر Netlify Functions طريقة لنشر الأكواد التي تعمل على الجانب الخادم كـ API endpoints، حيث يتم تشغيلها تلقائيًا عند حدوث حدث معين، وتقوم بمعالجة الأكواد التي تعمل على الجانب الخادم، ثم تتوقف حتى يحدث حدث آخر. وهذا نقاش حول الموضوع على الموقع الرسمي لـ Netlify ويمكنك الوصول إلى توثيق Netlify Functions الرسمي من هنا

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

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

هذا يعتمد على نوع الموقع الذي تعمل عليه، فإذا كان موقع قابت static فالخطوة التالية هي تجريبه ورفعه على استضافة، بينما إذا كان متغير dynamic فيجب ان يتم ربطه مع الـ backend حتى يتحول لموقع متغير. عندما تريد تحويل موقعك لموقع متغير، إذا اردت مثلاً ان يحتوي موقعك على مقالات يتم اضافتها إلى الموقع وعرضها أو اي شيء يجب ان يتم اضافته و عرضه أو تعديله باستمرار. ويمكن ان يبدأ بشكل متوازي مع مطور الواجهات الأمامية بحيث يتم الربط بين الواجهتين بشكل متزامن أو أن يسبق مطور الواجهات الأمامية وعندا يقوم مطور الواجهات الامامية بالربط مع الواجهة الخلفية اثناء بناء الموقع أو أن يبدأ بعد مطور الواجهات الأمامية وعندها يجب ربط الواجه الأمامية وتعديلها لتتناسب مع الواجهة الخلفية. هذا خاطئ، فالورد بريس هو نظام ادارة محتوى CMS وهو يختصر عليك بناء الواجهات الأمامية والخلفية عن طريق تقديم قوالب جاهزة قابلة للتعديل بسهولة، وهو بحاجة لدورة مختلفة بالفعل ويوجد شرح تفصيلي عنه في دروة php ولكن يمكنك استخدامه بدون اي خبرة مسبقة فهو سهل جداً ويمكن تعلم اساسياته خلال فترة بسيطة. مقالات حسوب عن وردبريس يتم ذلك عن طريق اختبار الموقع مع عدة احجام من الصور وعدم قبول الصور التي لا تتناسب مع قياسات الموقع، وكذلك يمكن التغلب على هذه المشكلة بجعل الصور بالوضعية cover بحيث نعطيها الخاصية : object-fit: cover; حيث عند استخدام هذه الخاصية، يتم تغطية المساحة المحددة بالكامل بالصورة، ويتم تغيير حجم الصورة بحيث يتم الحفاظ على نسبة العرض إلى الارتفاع للصورة الأصلية. ويمكنك التعمق اكثر من خلال اتباع هذا النقاش : هي وظيفة الاثنين، فمطول الواجهة الامامية يقوم بإعداد الواجهة الامامية لقبول اكثر من لغة وكذلك الأمر بالنسبة لمطور الواجهات الخلفية. هذا يعتمد على الكثير من المتغيرات ولا يمكنني اعطائك سعر معين، ولكن قد يفيدك القاء نظرة على السوق المحلية والتي تريد العمل لديها حتى تعرف ماهي الاسعار المناسبة.

هنالك العديد من الحلول لهذه المشكلة وابسطها هو التالي : يمكنك تحويل الـ html و الـ css إلى عناصر js وتضعها في ملف js منفصل وليكن script.js : var style = document.createElement('style'); style.innerHTML = ` #target { color: blueviolet; } `; document.head.appendChild(style); var style = document.createElement('div'); style.innerHTML = ` <div id="target"> hello world </div> `; document.body.appendChild(style); والملف السابق سيقوم بحقن الـ html و الـ CSS في الصفحة التي نريدها ولن نقوم باستدعائها إلا عندما نريد، فمثلاً في ملف الـ html التالي سنقوم باستدعاء الملف عند النقر على زر show target : <!DOCTYPE html> <html dir="ltr"> <head> <style> body { text-align: center; } </style> </head> <body> <button id="btn">show target</button> <script> var script = document.createElement('script'); script.src = "./script.js" const btn = document.getElementById("btn"); btn.onclick = () => { document.body.appendChild(script); } </script> </body> </html> حيث ان الـ script.src يشير إلى مسار الملف script.js. ويمكنك تعديل الملف السابق ليتم عرض الـ العنصر target عند تنفيذ شرط معين، فمثلاً في الكوت التالي سيتم عرض العنصر target عندما يكون الـ pathname هو / أي سيتم عرضه في الصفحة الرئيسية فقط : <script> var script = document.createElement('script'); script.src = "./script.js" const btn = document.getElementById("btn"); if(window.location.pathname === "/" ) document.body.appendChild(script); </script> كذلك يمكنك استخدام react للقيام بنفس العملية وهي تسهل العمل عليك بشكل اكبر.

هل يمكنك شرح المشكلة بشكل افضل.

يؤثر حجم الذاكرة العشوائية RAM على أداء الحاسوب بشكل كبير، فكلما زاد حجم الذاكرة العشوائية RAM زادت سرعة الحاسوب وأداءه، والسبب في ذلك هو أنه كلما زاد حجم الذاكرة العشوائية RAM زاد عدد التطبيقات التي يمكن تشغيلها في نفس الوقت، وزادت سرعة تشغيل هذه التطبيقات، وأيضًا زادت سرعة تحميل الملفات والبرامج، وزادت سرعة تصفح الإنترنت، وزادت سرعة تشغيل الألعاب، وزادت سرعة تشغيل برامج المونتاج والجرافيكس. وفي حالتك فالـ 4 جيغا غير كافية أبداً فأقل ما يمكن يجب ان يتم رفع الذاكرة إلى 8 أو 12، والافضل هو ان تصبح 16 أو 32. ولكن سرعة الجهاز تعتمد على عدة عوامل ومنها القرص الصلب فمكما اخبرك المدرب في الاجابة السابقة فإن القرص الصلب من نوع SSD يحسن اداء الجهاز بشكل جذري حيث يعتبر القرص الصلب من النوع SSD أسرع بكثير من الأقراص الصلبة التقليدية، وذلك لأنه لا يحتوي على أجزاء متحركة، بالإضافة إلى أنه يستخدم ذاكرة فلاش لتخزين البيانات بدلاً من الأقراص المغناطيسية التي تستخدم في الأقراص الصلبة التقليدية. وبالتالي، فإنه يوفر سرعات قراءة وكتابة أسرع. ومن بين المزايا الأخرى للاستخدام SSD هو أنه يستهلك طاقة أقل من الأقراص الصلبة التقليدية، مما يؤدي إلى تحسين عمر بطارية جهاز الكمبيوتر المحمول، كما أنه يعمل بشكل هادئ ولا يحتوي على أجزاء متحركة، مما يجعله أكثر موثوقية وأقل عرضة للفشل. بعد قول ذلك فإن اداء الحاسوب يتأثر بشكل كبير من قدرة المعالج، وما انصحك به هو ان تنظر إلى مدير المهام task manager وتراقب اداء الحاسوب فإذا رأيت أن الهارد هو الذي يتم استخدامه بنسبة 100% فهذا يعني ان المشكلة لديك هي من الـ هارد وإذا كان الرام أو المعالج هو الذي يتم استهخدامه بنسبة 100% فهذا يعني ان المشكلة من الرام أو المعالج.

عدل الكود الخاص بك للشكل التالي : function App() { const skills = [ { id: 1, language: 'html', progress: 70, }, { id: 2, language: 'css', progress: 65, }, { id: 3, language: 'javascript', progress: 50, }, { id: 4, language: 'github', progress: 40, }, { id: 5, language: 'jest', progress: 35, }, ]; const progressAnim = useRef(); const [animate, setAnimate] = useState(false); window.onscroll = function () { if (window.scrollY >= progressAnim.current.offsetTop - 300) { setAnimate(true); } }; return ( <div className="App"> <Section src={img_1} /> <Section src={img_2} /> <div className="skills" ref={progressAnim}> { skills.map(skill => ( <ProgressItem data={skill} animate={animate} /> )) } </div> </div> ); } const ProgressItem = ({ data, animate }) => { const [percentage, setPercentage] = useState(1); useEffect(() => { if (animate) setPercentage(data.percentage) }, [animate]); return ( <Progress key={data.id} percentage={percentage} circleWidth="200" name={data.language} /> ) }; بحيث تجعل لكل عنصر الحالة percentage الخاصة به.

Telegram Bot API هي واجهة برمجية تم تصميمها للمطورين الذين يرغبون في بناء الروبوتات (Bots) لـ Telegram و يمكنك البدء في استخدام Telegram Bot API عن طريق قراءة الدليل الرسمي للمطورين في Telegram والذي يحتوي على شرح مفصل لكيفية استخدام الـ API والتعامل معها وهو الشرح الاكثر شمولية والمقدم من تلغرام. كذلك قد تجد بعض الشروحات إذا بحث عن (انشاء بوت تلغرام) على يوتيوب. وهذه بعض المقالات عن الموضوع :

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

ليس لدي فكرة عن كيفية تشغيل HTML , CSS, JavaScript من الجوال، وانصحك بشدة بان تعمل على حاسوب ولو كانت مواصفاته متواضعة فالبرمجة من الهاتف ليست جيدة، فلن تحصل على توثيق كافي للعمل على الهاتف. بعد قول هذا فيمكنك تجريب استخدام مواقع الـ online مثل codepen.io، حيث يقوم بتشغيل الكود مباشرةً.

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

Double Precision هو مصطلح يشير إلى الاعداد العشرية كما اخبرك المدرب في التعليق السابقة، و في جافاسكريبت الأعداد كلها هي من النوع Number وهو من نوع Double Precision أي يمكنك وضع فواصل عشرية بدقة تصل إلى 64 بت قد يفيدك الاطلاع على السؤال التالي : Syntactic Sugar هي عبارة عن تعبيرات مختصرة وسهلة الفهم والاستخدام، والتي تساعد على تبسيط الكود وجعله أكثر قراءةً وفهمًا. فمثلاً، في جافاسكريبت، يمكن استخدام العملية المختصرة : i++ بدلاً من العملية الطويلة : i = i + 1 لزيادة قيمة متغير بمقدار 1. و Syntactic Sugar في جافاسكريبت تشمل العديد من التعبيرات المختصرة مثل +=, -= و ++ و -- وغيرها، والتي تساعد على تبسيط الكود وجعله أكثر قراءةً وفهمًا.

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

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

جرب استخدام هذا كود الذي يستخدم المكتبة react-excel-renderer لتحميل ملف الـ excel ثم يقوم بعرض النتيجة في جدول : import React from 'react'; import {ExcelRenderer} from 'react-excel-renderer'; class ExcelPage extends React.Component { constructor(props) { super(props); this.state = { rows: [], cols: [] }; } fileHandler = (event) => { let fileObj = event.target.files[0]; //just pass the fileObj as parameter ExcelRenderer(fileObj, (err, resp) => { if(err){ console.log(err); } else{ this.setState({ cols: resp.cols, rows: resp.rows }); } }); } render() { return ( <div> <input type="file" onChange={this.fileHandler.bind(this)} style={{padding: '10px'}} /> <br /> <table> <thead> <tr> {this.state.cols.map((c) => <th>{c}</th>)} </tr> </thead> <tbody> {this.state.rows.map((r) => <tr>{r.map((d) => <td>{d}</td>)}</tr>)} </tbody> </table> </div> ); } } export default ExcelPage; في حال لم يعمل الكود السابق فقد تكون المشكلة من ملف الـ excel، ولذلك جرب استخدام ملف excel اخر. وفي حال لم يعمل، جرب استخدام مكتبة ثانية.

بالنسبة لـ next js فما زالت نسخة الـ app directory ( في المرحلة التجريبية beta ) والتي هي التغيير الجذري في Next 13، ولذلك من غير المنطقي إضافتها للمسار وهي لم يعلن عنها إلا منذ بضعة اشهر ولم يتم إصدارها بشكل رسمي حتى الآن. لاحظ ان اسم الموقع الخاص بالتوثيق يخبرك أنها نسخة الـ beta : بينما نسخة الـ 13 المستقرة تستخدم نفس نظام الـ pages القديم والذي يتم شرحه في الدورة. للحقيقة انا كمطور next حالياً استخدم app directory الجديد وهي مستقرة بشكل جيد وتشبه نظام الـ pages القديم بشكل كبير ولكن مع وجود بعض الميزات الرائعة الإضافية، ونصيحتي لك ان تدرس الدورة الخاصة ب next 11 وبعد الانتهاء منها وتنفيذ مشروع باستخدامها، ربما يكون اصدار الـ app directory قد تم إطلاقه بشكل رسمي ويمكنك البدء بتعلمه.

جرب بإضافة الإشارة important للخاصية flex-direction مثل : flex-direction:column !important; وفي حال لم تشتغل، قم بمشاركة ملفات المشروع.

المشكلة انك تستخدم اصدار حديث من react-router-dom والذي لم يعد يدعم الوظيفة Switch ولا Redirect، ونستخدم Routes بدلاً عنها ولذلك يجب ان تقوم بتعديل الكود : import React from 'react'; import { BrowserRouter,Switch, Route } from 'react-router-dom'; import HomePage from './HomePage'; import './App.css'; function App() { return ( <BrowserRouter> <Switch> <Route exact path="/" component={HomePage} /> {/* Other routes here */} </Switch> </BrowserRouter> ); } export default App; للشكل التالي : import React from 'react'; import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'; import HomePage from './pages/HomePage'; import './App.css'; function App() { return ( <BrowserRouter> <Routes> <Route exact path="/" element={HomePage} /> <Route path="*" element={<Navigate replace to="/" />} /> {/* Other routes here */} </Routes> </BrowserRouter> ); } export default App; وكذلك هنالك مشكلة في الـ HomePage.jsx حيث لا يمكن استخدام الـ Routes اكثر من مرة داخل التطبيق، وكذلك هنالك مشكلة ثانية وهي انك كنت تستدعي الـ App داخل الـ HomePage والـ HomePage داخل الـ App. ولحل المشكلة جرب تعديل الكود في HomePage للشكل : import React from 'react'; import ButtonTest from './btnPage'; const HomePage = () => { return ( <div> <ButtonTest /> </div> ); }; export default HomePage;

ما هو معهد التصميم الذي تتحدث عنه، هل يمكنك الايضاح اكثر.

لاحظت المشكلة، إنها من الخادم الخاص بك، حيث يرسل صور صغيرة جداً (اصغر من المساحة التي تشغلها) ثم يتم تمطيطها لتشغل كامل المساحة، ولذلك تكون غير واضحة. تأكد من انك تقوم بإرسال الطلب إلى الرابط الصحيح، حيث ان رابط الصور لديك ينتهي بـ : /s72-w640-c-h358/business-gf45bc5937_1920.jpg الصورة : والمقطع : /s72-w640-c-h358/ هو المسؤول عن قياسات الصورة، وإذا عدلت الرابط إلى : /s400-w640-c-h358/business-gf45bc5937_1920.jpg بتغير الـ s72 إلى s400 ستحصل على صورة بجودة افضل : مع الاسف ليس لدي خبرة كافية في بلوغر حتى اخبرك كيف تعديل رابط الصورة.

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

ذلك يحدث لأن الكود يعض الـ end الخاص بالـ print للقيمة " "، بدلاً من القيمة الافتراضية "سطر جديد" والتي تعني سطر جديد. جرب الكود التالي : print("Hello", end = ' ') print("World") ستكون النتيجة : Hello World وعند تنفيذ الأمر print() عند نهاية كل حلقة صغيرة for j in، فإننا نقوم بطباعة القيمة الافتراضية "سطر جديد"، حتى يتم طباعة ارقام الحلقة التالية في السطر التالي. لتعميق الفهم، جرب المثال التالي : print("Hello", end = ' ') print("World") print() print("my name is", end = ' ') print("omar") وحاول التعديل عليه.