عبدالباسط ابراهيم

كما في التعليق السابق وضح عمر الفكرة الأساسية لعمل مثل هذه المواقع وطريقة بناء وترتيب ملفات المشروع ويوجد عدة طرق للقيام بذلك ولكن ترجع بالأخير للطريقة التي تفضلها ولكن كلما كانت الملفات في شكل منظم لن يسبب لك الموقع العديد من المشاكل كلما كثرة الملفات الطريقة الأولى Pages (in root of site): index.html page2.html page3.html إلى آخره Folders: > shared (كل الملفات المشتركة في صفحات ال html ) - styles.css - scripts.js - image.jpg > index (كل الملفات الخاصة بصفحة index) - index-styles.css - index-scripts.js - imageB.jpg > page2 (كل الملفات الخاصة بصفحة page-2.) - page2-styles.css - page2-scripts.js - imageC.jpg > page3 (كل الملفات الخاصة بصفحة page-3.) الطريقة الثانية <مجلد المشروع> templates index.html about.html ..... contact.html assets css style.css ..... responsive.css js script.js ..... main.js images ..... fonts ..... يمكنك إختيار الطريقة التي تفضلها

حتى نعرف الفرق بين الكود الموجود بداخل الدالة render والكود الموجود بخارجها يجب أولاُ أن نتعرف على الهدف من هذه الدالة الغرض من ()render : تقوم React بتوليد HTML إلى صفحة الويب باستخدام الدالة ()render باستخدام الدالة ()render يمكننا قراءة ال props وstate وإعادة كود JSX إلى المكون root . في الدالة ()render لا يمكننا تغيير ال وstate ، ولا يمكننا التسبب في side effects (مثل تقديم طلب HTTP إلى خادم الويب). وطريقة عملها كالتالي يتم عرض العناصر على الشاشة من خلال استدعاء ReactDOM.render الطريقة التي تقارن بين عناصر DOM الحقيقية وvirtual DOM ، مع إجراء أقل عدد ممكن من التغييرات لإحضار DOM الحقيقي إلى ال state الحديثة. أما بالنسبة للكود الموجود خارج الدالة render لسبب لتهيئة ال state للمكون عن طريق تعيين كائن إلى this.state لربط(bind) event handlers التي تحدث في المكون يمكنك قراءة المزيد من المعلومات من خلال موقع react مثل القراءة عن ال constructor القراءة عن ال render

ربما يبدو لك أن المسارات المتبيقية نفس المادة التعليمية الموجودة في المسارات السابقة ولكن سأوضح لك م المهارات الجديدة التي ستتعلمها في مسار تطوير لوحة التحكم يوجد العديد من المفاهيم التي لم تدرسها بعد مثل طريقة بناء structure المشروع والعديد من المهارات من خلال javascript والمكتبات الجاهزة حيث أن تطوير لوحات التحكم دائماً ما تحتاج لعمل كبير نظراً للعمل المطلوب لتنفيذ اللوحة بناء مواقع ثابتة باستخدم Hugo ستتعلم تقنية جديدة كلياً وهو وهو إطار عمل static site generators ستتعلم في هذا المسار بناء صفحة شخصية وموقع شركة ومدونة باستخدام إطار تطوير المواقع الثابتة Hugo. لذلك بالطبع يفضل دراسة المسارات المتبقية

حاول تنفيذ الأمر التالي وهو محاولة حذف ال cache ربما يحل المشكلة npm cache clean --force جرب حذف ال cache من خلال تنفيذ الأمر السابق ومحاولة تجربة بناء مشروع vue

بالإضافة للطرق التي تم ذكرها في التعليقات السابقة يمكنك تنفيذ المثال الذي تريده من ال css عن طريق عدة طرق منها استخدام ال text-align يمكنك تنفيذ المثال السابق بسهولة كالتالي من خلال الوسم <p> ونضع له التنسيق p { text-align: center; } أو يمكنك استخدام ال القيم left و right يمكنك استخدام ال text-indent كالتالي <p id="p0">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> ثم قم بإضافة التنسيق التالي #p0 { text-indent: 2em; } يمكنك استخدام القيم التي تريدها يمكنك استخدام ال Margins و Padding لذلك يمكنك تنفيذ المهمة التي تريدها من خلال الطريقة المناسبة لك

يوجد العديد من الثغرات التي يجب الإهتمام بها من جانب مطورو الواجهات الخلفية لتقليل فرص تعرض الموقع أو البيانات للخطر وحسب OWASP و هو منظمة دولية غير ربحية مكرسة لأمن تطبيقات الويب . أحد المبادئ الأساسية لـ OWASP هو أن تكون جميع موادها متاحة مجانًا ويمكن الوصول إليها بسهولة على موقع الويب الخاص بها ، مما يتيح لأي شخص تحسين أمان تطبيق الويب الخاص به. تشمل المواد التي يقدمونها الوثائق والأدوات ومقاطع الفيديو والمنتديات. ربما يكون مشروعهم الأكثر شهرة هو OWASP Top 10. وهذا المشروع يتضمن الكثير من المعلومات حول ال 10 ثغرات الأكثر خطراً 1. الحقن Injection 2. المصادقة المعطلة Broken Authentication 3. التعرض للبيانات الحساسة Sensitive Data Exposure 4. XML External Entities (XEE) 5. كسر التحكم في الوصول Broken Access Control 6. خطأ في التكوين الأمني Security Misconfiguration 7. البرمجة النصية عبر المواقع Cross-Site Scripting 8. إزالة التسلسل غير الآمن Insecure Deserialization 9. استخدام المكونات مع الثغرات المعروفة Using Components With Known Vulnerabilities 10. Insufficient Logging And Monitoring لإلقاء نظرة أكثر تقنية ومتعمقة على OWASP Top 10 ، راجع التقرير الرسمي .

بالإضافة للتعليق السابق تحتاج لإضافة التعليقات في الكود للعديد من الفوائد منها لجعل الآخرين يفهمون التعليمات البرمجية الخاصة بك (مفيدة جداً إذا كنت تعمل ضمن فريقعمل) ذكّر نفسك بما فعلته - لقد جرب معظم المبرمجين العودة إلى عملهم بعد عام أو عامين واضطرارهم إلى إعادة اكتشاف ما فعلوه. يمكن أن تذكرك التعليقات بما كنت تفكر فيه عندما كتبت الكود يمكنك استخدام التعليقات من خلال php عن طريق <?php // تعليق سطر واحد # تعليق سطر واحد ?> /* تعليق يمكن أن يكون على عدة أسطر */ و يمكنك استخدام التعليقات من خلال laravel blade عن طريق {{-- This comment will not be in the rendered HTML --}}

هذه ليست مشكلة حيث تحتاج فقط لوضع ال text-align: center لل #header #header { padding: 20px 0; text-align: center; }

هذا الخطأ نتيجة القيام بإعطاء ال body العرض 80% إذا لم تقم بإضافتها لسبب قم يحذف هذا السطر body{ font-family: Arial, Helvetica, sans-serif; width: 80%; <!-- هذا السطر --> overflow: hidden; } أما إذا قمت بإضافة هذا التنسيق لسبب ما ولا تريد حذفه يمكنك تحدد العرض الكامل لل head-v .head-v{ display: flex; transform: scaleX(1.3); position: relative; top: 5px; width: 100vw; <!-- هذا السطر --> @include breakpoints(large){ top: 25px; } }

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

كما في التعليق السابق فيمكنك استخدام الطريقة التي تفضلها ولكن ال async/await هي الطريقة الموصى بها كما في المثال التالي const documentCount = await userModel.countDocuments({}); console.log( "Number of users:", documentCount ); أو يمكنك استخدام then كالتالي someModel .estimatedDocumentCount() .then(docCount => { console.log(docCount) //and do one super neat trick }) .catch(err => { //handle possible errors }) للمزيد من المعلومات يمكنك قراءة توثيق mongoose

ال Redux-saga هي مجرد برمجية وسيطة (middleware) تتعامل مع المنطق غير المتزامن بشكل أفضل. إذا كان لديك تطبيق واسع النطاق ، يُفضل redux-saga على redux-saga . redux-thunk يجعل ال testing أسهل. لذلك ال redux saga ليس مثل redux toolkit إنما هي مجرد redux toolkit ويمكنك استخدامها مع redux toolkit في النفس المشروع كالتالي قم بإضافتها أولاً import { all } from "redux-saga/effects"; import { firstSaga } from "./firstSaga"; export default function* rootSaga() { yield all([...firstSaga]); } ثم يمكنك استخدام ال redux saga كالتالي import { configureStore } from "@reduxjs/toolkit"; import createSagaMiddleware from "redux-saga"; import rootSaga from "./rootSaga"; const sagaMiddleware = createSagaMiddleware(); const store = configureStore({ reducer: { movie: MovieReducer, }, middleware: (getDefaultMiddleware) => // adding the saga middleware here getDefaultMiddleware().concat(sagaMiddleware), }); sagaMiddleware.run(rootSaga); export default store;

بالإضافة للمميزات السابقة يمكنك أيضاً الإستفادة من خلال Ubuntu مجاني على عكس الأنظمة الأخرى وإضافة على ذلك يوفر لك نظام التشغيل Ubuntu العديد من التطبيقات المنافسة لتطبيقات مثل مجموعة adobe مجاناً وتطبيقات بديلة لتطبيقات office والعديد من التطبيقات الأخرى Ubuntu قابل للتخصيص بالكامل من لحظة تثبيته. يستخدم أحدث إصدار بيئة سطح مكتب جنوم التي تتيح لك تخصيص كل عنصر من عناصر واجهة المستخدم / تجربة المستخدم الخاصة بك تقريبًا ، من أصوات الإشعارات ونمط النوافذ المنبثقة والخطوط والرسوم المتحركة للنظام ومساحات العمل. سطر الأوامر من Command Line ) Ubuntu ) يعد سطر الأوامر الموجود في Ubuntu أو linux عموماً الأفضل من بين جميع أنظمة التشغيل وبالأخير نحن نستخدم نظام التشغيل الذي يقوم لنا أكثر إفادة من غيره لذلك قم بتجربته وإختيار نظام التشغيل الذي تفضله

ليس هناك علاقة بين ال web design وال Web Development حيث أن إذا كنت تتكلم عن مجال البرمجة وتريد تعلم البرمجة فليس هناك حاجة لتعلم ال web design إلا إذا كنت تريد تعلم مهارة جديدة لذلك ليس هناك علاقة بين ال web design وال Web Development فهذا تصميم مواقع ويب وهذا برمجة ذللك يربطهما الويب وتم شرح ال Web Development بالتفصيل في التعليق السابق وفي هذا التعليق سأوضح ال web design يتحكم تصميم الويب في كل ما يتعلق بالجماليات المرئية وسهولة استخدام موقع الويب - نظام الألوان والتخطيط وتدفق المعلومات وكل شيء آخر يتعلق بالجوانب المرئية لواجهة المستخدم / UX (واجهة المستخدم وتجربة المستخدم). بعض المهارات والأدوات الشائعة التي تميز مصمم الويب عن مطور الويب هي: Adobe Creative Suite (مثل Photoshop و Illustrator) أو برامج تصميم أخرى تصميم غرافيك تصميم واجهة المستخدم تصميم UX تصميم شعار تخطيط / تنسيق وضع أزرار call-to-action Branding Wireframes, mock-ups, and storyboards Color palettes Typography

هذه ليست مشكلة مع تثبيت redux أو مع الكود الخاص بك و لكن ال createStore تعتبر deprecated أي تم إستبدالها بخاصية جديدة configureStore من خلال ال reduxjs/toolkit package ويمكنك قراءة المزيد من المعلومات عن هذا الموضوع من خلال هذا الرابط ويفترض أن يعمل المشروع بدون مشاكل ولكن ستظهر لك ال createStore كما في الصورة كتحذير أنها deprecated ويمكنك إزالة هذا التحذير عن طريق استدعائها من خلال الكود التالي import { legacy_createStore as createStore} from 'redux'

كم في التعليق السابق فإنه يجب إضافة الخاصية muted وذلك لأن المتصفح google chrome منع حديثاً التشغيل التلقائي للفيديوهات بإستثناء الفيديوهات التي يضاف لها الخاصية muted <video autoplay muted> <source src="video.mp4" type="video/mp4" /> </video> أما بالنسبة للمتصفح iOS Safari يظل لا يعمل مع إضافة الخاصية muted بل يجب إضافة الخاصية playsinline كما في الكود التالي <video autoplay muted playsinline> <source src="video.mp4" type="video/mp4" /> </video>

هذه الإختيارات هي أدوات مساعدة لك في البرمجة على ال visual studio لذلك يمكنك إختيار تثبيت أياً من الخيارات حسب المجال الذي تعمل فيه أما بالنسبة للعمل مع النظامين في وقت واحد نعم يمكنك تنفيذ ذلك بدون مشكلة عن طريق الخروج ممن وضع ملئ الشاشة في نظام ubuntu (عن طريق الضغط على زر ctrl + c معاً) ويمكنك وقتها الخروج منه والعمل مع windows

إذا كنت تبحث عن حلول فعالة بنسبة 100٪ في منع الهندسة العكسية، فيجب أن أخبرك أنه لسوء الحظ ، لا يمكن تحقيق ذلك ، ولكن يمكنك جعل القيام بذلك الأمر أصعب ... ما مدى صعوبة ذلك يعتمد على الجهد والموارد التي ترغب في وضعها أو التي يتطلبها القانون لحالة الاستخدام الخاصة بك. ويمكنك محاولة حماية التطبيق ( جعل عملية إختراقه مكلفه) الخاص بك من خلال الخطوات التالية استخدام ال code obfuscation يعد تشفير / فك تشفير مفاتيح API في وقت التشغيل طريقة فعالة أخرى لتأمين مفاتيح API ومنع المتسللين من فك تشفير البيانات. يجب تجنب تتبع مفاتيح واجهة برمجة التطبيقات في المستودع لتقليل مخاطر كشف القيم. لا يُنصح باستخدام Firebase Remote Config لتخزين البيانات الحساسة. يوجد العديد من الممارسات التي يجب عليك إتباعها لزيادة حماية التطبيق الخاص بك

يمكنك عمل export للبرنامج عن طريق عدة خطوات في solution Explorer ، انقر بزر الماوس الأيمن على مشروعك وانقر على Build بمجرد اكتمال البناء ، انقر بزر الماوس الأيمن مرة أخرى على مشروعك وانقر فوق Open Folder in File Explorer سيفتح Visual studio نافذة Windows Explorer بها الكثير من الملفات والمجلدات. افتح مجلد "bin" ستجد داخل مجلد bin مجلدًا يسمى "Debug" أو مجلدًا يسمى "Release" اعتمادًا على تكوين البناء الذي اخترته. ستجد داخل مجلد "Debug" (أو "Release") جميع الملفات المطلوبة لتشغيل تطبيقك (عادةً ملف exe. وملف config. وبعض ملفات DLL قم بنسخ هذه الملفات وأنقلها إلى أي جهاز تريد تجربة الطبيق عليه

بالإضافة للتعليقات السابقة يمكنك استخدام ال tooltip عن طريق الخاصية title كما في المثال التالي <img src="source of image" alt="alternative text" title="this will be displayed as a tooltip"/>

هذه ليست مشكلة لأن السبب بسيط وهو أنه عند فتح ملفات ال html نقوم بفتح الملف من خلال أي متصفح وهذا هو الطريقة الوحيدة حيث أنه صفحات الويب تعمل في المتصفح فقط ولا يعمل معها الأمر run فتح الملف من خلال أي متصفح عن طريق عدة طريق فتح الملف مباشرة من خلال المتصفح مثل open with google chrome عن طريق الإضافة live-server عن طريق webpack والعديد من الطرق الأخرى ولكن كلها عن طريق المتصفح كما قلت لك أنه صفحات الويب تعمل في المتصفح

بالإضافة للتعليق السابق إذا كنت تقصد الفرق بين ال div والbr في عمل line break فهناك بالطبع بعض الفروقات استخدم <br/>عندما تريد سطرًا جديدًا في فقرة مثل <p>Hi Josh, <br/> How are you?</p> استخدم <br/> عند كتابة عنوان <p>John Dough<br/> 1155 Saint. St. #33<br/> Orlando, FL 32765 </p> ولكن إذا كنت تريد مسافة بين عنصرين ، فيمكنك استخدام div وليس <br/> فالكود التالي غير مستحب <div>Hello</div> <br/> <div>Something else here</div> ال <br> له عيب يتمثل في تحديد حجم الفاصل بين الأقسام على خاصية ال line-height بالنسبة لإستخدامات ال span تتمثل في إضافة تنسيقات مختلفة لجملة مثلاً عن بقية ال paragraph <p>We can use span tags to target text with CSS styling, <span id="green-text">this green text</span>.</p> <p>You can use span for <span class="highlighted">any CSS rule</span>.</p> يمكنك أيضاً أن تستخدم ال span لعمل وظيفة من خلال ال javascript كل هذه الإستخدامات ستقوم بتجربتها من خلال التطبيق العملي

تقوم ال Functions مع الخطافات بنفس الوظيفة التي تقوم بها ال classes ولكن مع بعض المميزات منها لا داعي للقلق بشأن "this" بعد الآن ليس عليك استخدام ال bindings يمكنك فصل ال logic عن ال ui يمكنك بسهولة مشاركة ال stateful logic بين المكونات والعديد من المميزات الأخرى يمكنك الإطلاع على المزيد من التفاصيل من خلال هذه المقالة

هل تقصد أنماط التصميم البرمجي Design patterns ؟ إذا كان كذلك فيتم تقسيم أنماط التصميم حسب استخدام كل نمط حيث أن أنماط التصميم الإنشائية Creational design patterns تستخدم في عملية ال Class instantiation أنماط التصميم الهيكلية Structural design patterns تستخدم فيما يتعلق بهيكل ال class وتكوينه أنماط التصميم السلوكية Behavioral design patterns تم تصميم هذه الأنماط اعتمادًا على كيفية تواصل Communication بين كائنات الأصناف يمكنك قراءة هذه المقالة للمزيد من التفاصيل

إجابة هذا السؤال تنقسم ل هل يجب تعلم ال framework : نعم بالطبع يجب عليك تعلم ال framework لأسباب عديدة منها تطوير المهارات لديك للدخول لسوق العمل بالمهارات المطلوبة لمطور الواجهات الأمامية وأيضاً هناك بعض المواقع لا تحتاج فيها لمميزات ال custom css إنما تحتاج للframework لسرعة العمل به والمميزات الأخرى التي يوفرها ال framework ذلك إذا كنت تريد المنافسه في سوق العمل أيضاً هل يجب أن استخدم ال framework أم ال custom css : ذلك يعتمد على المشروع الذي تقوم به إذا كنت تحتاج السرعة في بناء الموقع أكثر من أداء الموقع الذي تقدمة ال custom css أو حسب متطلبات العميل بالنسبة لنسيان ال custom css : بالطبع ستستعمل ال custom css مع استخدام ال framework حيث أن لن تكتفي بال framework فقط ستكتب بعض ال css ونصيحة لك قم باستخدام ال custom css طالما لا تهمك كثيراً السرعة في بناء الموقع حتى لا تنسى أو تقل مهاراتك في ال css وقم بعمل نظام grid خاص بك حتى يساعدك عند استخدام ال custom css وحتى تعرف مدى أهمية ال framework يمكنك قراءة المميزات التي يقدمها إنها توفر كتابة الأكواد التي تحتاج إلى كتابتها من البداية في كل مرة ، مثل عمليات إعادة التعيين تقوم بالمساعدة في جعل موقعك يعمل بشكل جيد على معظم المتصفحات تجعلك تستخدم دائماً ال grid system وهي ميزة قوية في ال framework بالطبع توفر عليك الكثير من خلال ال components الجاهزة