محمد أبو عواد

يجب ضبط اعدادات ملف next.config.js أولا, في ملف next.config.js يجب اضافة الكود التالي module.exports = { images: { domains: ['images.unsplash.com'], }, } في ملف الصفحة <Image alt="" src="https://images.unsplash.com/photo-1464375117522-1311d6a5b81f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2250&q=80" width={2250} height={1390} layout="responsive" />

بالنسبة إلى TF 2.0 يمكنك استخدام الكود الآتي import tensorflow as tf raw_dataset = tf.data.TFRecordDataset("path-to-file") for raw_record in raw_dataset.take(1): example = tf.train.Example() example.ParseFromString(raw_record.numpy()) print(example) أو يمكنك استخدام الكود الآتي import tensorflow as tf for example in tf.python_io.tf_record_iterator("data/foobar.tfrecord"): print(tf.train.Example.FromString(example)) يمكنك اضافة الكود التالي أيضا from google.protobuf.json_format import MessageToJson ... jsonMessage = MessageToJson(tf.train.Example.FromString(example))

السبب في ذلك هو اختلاف أحجام الصور, الصورة التي قمت بتغييرها ارتفاعها أكبر من ارتفاع الصور الاخرى ولذلك يحدث هذا الخطأ, يمكنك اعطاء عنصر img ارتفاع ثابت, لاحظ الكود التالي الذي كتبته أنت img { height: 100%; width: 50%; } نريد تغيير الرتفاع ليكون كالتالي img { height: 200px; width: 50%; } يمكنك اختبار الطول الذي تريده بالطبع, هكذا نضمن أحن جميع الصور سوف يكون لها ارتفاع ثابت وهو 200 بكسل

بداية يجب أن تثبتي الحزمتين webpack و webpack-cli من خلال الأمر التالي npm install --save-dev webpack webpack-cli ثم يجب ان تقومي باشناء مجلد البناء بداخل مجلد المشروع , ثم تنشئين فيه الملفات التالية config.base.js config.production.js config.development.js بالطبع سوف تكون فارغة وسوف نملأها,لكن أولا ، سنحتاج إلى تثبيت webpack-merge من خلال الأمر التالي npm install --save-dev webpack-merge تسمح لنا هذه الحزمة بدمج التكوينات معا, الآن لنظبط الملف config.base.js module.exports = { } من الواضح أن الملف يقوم فقط بتصدير كائن فارغ في الوقت الحالي ، لكننا سنحتاج إلى ذلك للخطوات التالية , ضع هذا الكود في الملف config.production.js const merge = require('webpack-merge') module.exports = merge(require('./config.base.js'), { mode: 'production' }) ونفس الكود تقريبا في الملف config.development.js const merge = require('webpack-merge') module.exports = merge(require('./config.base.js'), { mode: 'development', watch: true }) الآن لتشغيل العملية من خلال الأمر التالي npx webpack --config build/config.development.js قم بإنشاء ملف جديد ليكن اسمه paths.js في مجلد البناء الذي أنشأته سابقا وجعل وظيفته تصدير بعض المسارات التي نريد استخدامها لاحقا: const path = require('path') module.exports = { SRC: path.resolve(__dirname, '..', 'public'), DIST: path.resolve(__dirname, '..', 'public', 'dist'), ASSETS: '/dist' } والآن نفذي الأمر التالي npx webpack --config build/config.development.js في ملف package.json أضيفي الكود التالي { "scripts": { "dev": "webpack --config build/config.development.js", "prod": "webpack --config build/config.production.js" } } يمكنك الآن تشغيل المشروع باستخدام الاوامر npm run dev و npm run prod , الآن ضعي الكود التالي في config.base.js const path = require('path') const { SRC, DIST, ASSETS } = require('./paths') module.exports = { entry: { scripts: path.resolve(SRC, 'js', 'index.js') }, output: { // Put all the bundled stuff in your dist folder path: DIST, // Our single entry point from above will be named "scripts.js" filename: '[name].js', // The output path as seen from the domain we're visiting in the browser publicPath: ASSETS } } الآن قومي بإنشاء ملف JavaScript ويجب أن يكون في المجلد src , لنقم بإنشاء هذا الملف بالمحتوى التالي: import './jquery.min.js' import './jquery.migrate.js' import './jquery.bxslider.min.js' import './jquery.appear.js' import './jquery.countTo.js' import './bootstrap.js' كما ترى ، يقوم index.js فقط باستيراد جميع الملفات التي تريد استخدامها. الآن نفذي الامر npm run prod هكذا تكوني قد حصلتي على إعدادات webpack بشكل فعال

من المحتمل أنك استخدمت اسم ملف خاطئ حيث أن webpack يبحث عن ملف "webpack.config.js" ، ولكن أنتي قمتي بتسمية الملف لديك "webpack-config.js" , كما تلاحظي شرطة بدلا من نقطة. حاولي إعادة تسمية الملف أو ساعدي webpack في العثور على الملف عن طريق تعيين مسار التكوين الخاص بك بشكل صريح باستخدام الخيار --config

يمكنك استخدام history.replaceState لتنفيذ ذلك كالتالي window.history.replaceState(null, '', '/about')

تستطيع استعراض محتويات الدورة التي اشتريتها أنت وأيضا أول مسار فقط من باقي الدورات ,الدورة التي اشتريتها اسمها دورة تطوير التطبيقات باستخدام JavaScript , هذه الدورة تحتوي على عدة مسارات كالآتي أساسيات لغة JavaScript أساسيات React.js أساسيات Node.js تطوير تطبيق جوال باستخدام React Native تطبيق دردشة يشبه WhatsApp تطوير تطبيق سطح مكتب باستخدام Electron.js إنشاء تطبيق أسئلة وأجوبة باستخدام Next.js أرشيف المسارات الأقدم : يحتوي هذا التصنيف على أرشيف المسارات القديمة التي استبدلت بمسارات أحدث. جميع هذه المسارات موجودة ضمن الدورة تطوير التطبيقات باستخدام JavaScript ,تستطيع استعراض كافة هذه المسارات, هذه المسارات أيضا تحتوي على عدة وحدات كما أرفقت في الصورة, المسار أساسيات لغة JavaScript يحتوي على عدة وحدات مثل مقدمة أساسيات JavaScript حلقات التكرار Loops وغيرها من الوحدات التي تستطيع ملاحظتها من خلال الصورة التي أرفقتها انت, ولكن لا تستطيع استعراض باقي الدورات بشكل كامل, فقط أول مسار من كل دورة.

تقوم Ubuntu وبعض توزيعات Linux بتثبيت node كـ /usr/bin/nodejs ، وليس ك /usr/local/bin/node يمكنك حل هذه المشكلة بتثبيت حزمة nodejs-legacy التي تنشئ ارتباط من /usr/bin/nodejs إلى /usr/bin/node يمكنك تثبيتها من خلال الأمر التالي sudo apt-get install nodejs-legacy

عند إجراء django ranges باستخدام filter ، تأكد من معرفة الفرق بين استخدام كائن date و كائن datetime __range شامل للتواريخ ولكن إذا كنت تستخدم كائن datetime لتاريخ الانتهاء ، فلن يتضمن إدخالات ذلك اليوم إذا لم يتم تعيين الوقت. from datetime import date, timedelta startdate = date.today() enddate = startdate + timedelta(days=6) Sample.objects.filter(date__range=[startdate, enddate]) سوف يقوم الكود بإرجاع كافة الإدخالات من تاريخ البدء إلى تاريخ الانتهاء بما في ذلك تلك التواريخ المدخلة

لكل حقل يحتوي على مجموعة اختيارات ، سيكون للكائن دالة اسمها get_FOO_display () ، حيث FOO هو اسم الحقل. تقوم هذه الطريقة بإرجاع قيمة الحقل والتي يمكننا قراءتها, في ملف العرض user = User.objects.filter(to_be_listed=True) context['gender'] = User.get_gender_display() في التمبليت {{ user.get_gender_display }}

بداية يجب أن يكون لديك مكون يسمى Link ، مع خاصية activeClassName import { useRouter } from 'next/router' import PropTypes from 'prop-types' import Link from 'next/link' import React, { Children } from 'react' const ActiveLink = ({ children, activeClassName, ...props }) => { const { asPath } = useRouter() const child = Children.only(children) const childClassName = child.props.className || '' // pages/index.js will be matched via props.href // pages/about.js will be matched via props.href // pages/[slug].js will be matched via props.as const className = asPath === props.href || asPath === props.as ? `${childClassName} ${activeClassName}`.trim() : childClassName return ( <Link {...props}> {React.cloneElement(child, { className: className || null, })} </Link> ) } ActiveLink.propTypes = { activeClassName: PropTypes.string.isRequired, } export default ActiveLink ثم يكون لديك شريط تنقل به ارتباط مكون تم إنشاؤه ومحدد css :active للتمييز بين الارتباط النشط وغير النشط. import ActiveLink from './ActiveLink' const Nav = () => ( <nav> <style jsx>{` .nav-link { text-decoration: none; } .active:after { content: ' (current page)'; } `}</style> <ul className="nav"> <li> <ActiveLink activeClassName="active" href="/"> <a className="nav-link">Home</a> </ActiveLink> </li> <li> <ActiveLink activeClassName="active" href="/about"> <a className="nav-link">About</a> </ActiveLink> </li> <li> <ActiveLink activeClassName="active" href="/[slug]" as="/dynamic-route"> <a className="nav-link">Dynamic Route</a> </ActiveLink> </li> </ul> </nav> ) export default Nav بعد ذلك يمكنك تنفيذ شريط التنقل على صفحتك: import Nav from '../components/Nav' export default () => ( <div> <Nav /> <p>Hello, I'm the home page</p> </div> ) ما يحدث تماما داخل مكون link ،هو أنن نقارن قيمة router.pathname بالسمة href الخاصة ب link، إذا كانت القيمتان متطابقتان ، نقوم بوضع className المحدد لجعل الرابط يبدو نشطا.

يعد كل من ArrayList و LinkedList تطبيق لواجهة list في Java. فيما يلي الاختلافات المهمة بين طريقة ArrayList و LinkedList: من حيث التنفيذ الداخلي: يستخدم ArrayList داخليا مصفوفة ديناميكية لتخزين عناصرها بينما تستخدم LinkedList ما يعرف ب Doubly Linked List لتخزين عناصرها. ArrayList بطيئة لأن المعالجة تكون أبطأ بينما LinkedList أسرع لأنه لا يتطلب الكثير من عمليات التحويل أو التي تسمى shifting . ArrayList تنفذ القائمة فقط بينما تطبق LinkedList القائمة بالإضافة إلى قائمة الانتظار حيث يمكن أن يعمل كقائمة انتظار أيضًا (queue) ArrayList أسرع في تخزين البيانات والوصول إليها بينما LinkedList أسرع في معالجة البيانات. مثال على ArrayList import java.util.ArrayList; import java.util.LinkedList; import java.util.List; public class JavaTester { public static void main(String args[]) { //انشاء ArrayList List<String> list = new ArrayList<>(); //اضافة البيانات الى القائمة list.add("A"); list.add("B"); list.add("C"); list.add("D"); //طباعة القائمة System.out.println(list); } } الناتج كالتالي [A, B, C, D] مثال على LinkedList import java.util.ArrayList; import java.util.LinkedList; import java.util.List; public class JavaTester { public static void main(String args[]) { //انشاء LinkedList List<String> list1 = new LinkedList<>(); //اضافة البيانات للقائمة list1.add("A"); list1.add("B"); list1.add("C"); list1.add("D"); //طباعة بيانات القائمة System.out.println(list1); } } الناتج كالتالي [A, B, C, D]

المشكلة في هذا الكود productPrice =""; productCategory =""; productDesc =""; productName=""; أنت تفرغ المتغيرات وليس الحقول, لتفريغ الحقول يجب استخدام المتغيرات التي أسندتها للحقول , فيكون شكل الكود كالتالي productPriceInput.value=""; productCategoryInput.value=""; productDescInput.value=""; productNameInput.value=""; حدث الصفحة وجرب الأمر

list & set يتم استخدامها لتجميع الكائنات في وحدة واحدة. يتمثل الاختلاف الرئيسي بين list و set في أن set غير مرتبة وتحتوي على عناصر مختلفة أي غير متشابهة، في حين أن list مرتبة ويمكن أن تحتوي على نفس العناصر فيها. توفر الحزمة java.util واجهة list تستخدم للحفاظ على المجموعة المرتبة. يمكن أن تحتوي list على القيم الخالية والمكررة. تعتمد دوال list على الفهرس أو ما يعرف ب index ، لذا فإن جميع العمليات مثل الإدراج والحذف والتحديث والبحث تعتمد على الفهرس, مثال على استخدام list import java.util.*; class ListExample{ public static void main(String args[]){ //إنشاء قائمة List<String> names = new ArrayList<String>(); // إضافة عناصر في القائمة. names.add("Mohammed"); names.add("Ahmed"); names.add("Sami"); //لطباعة القائمة نستخدم حلقة التكرار for for(String name: names) System.out.println(name); } } سوف يكون الناتج كالتالي Mohammed Ahmed Sami تنتمي واجهة Set إلى حزمة java.util, وكما قلنا سابقا هي غير مرتبة ، لذلك لا يحافظ على ترتيب العناصر المدخلة. تُستخدم واجهة Set لتصميم المجموعة الرياضية في Java, مثال على استخدام set import java.util.*; public class SetExample{ public static void main(String[] args) { // إنشاءالمجموعة Set<String> names = new HashSet<String>(); //إدخال بيانات الى المجموعة veg.add("Mohammed"); veg.add("Ahmed"); veg.add("sami"); //طباعة عناصر المجموعة System.out.println(veg); } } الاختلافات بينهما كالتالي list يسمح لنا بإضافة نفس العناصر أو تكرارها بينما set لا يسمح لنا بذلك list تحتفظ بترتيب القائمة بينما set لا يحافظ على الترتيب list تسمح لنا بإضافة أي عدد من القيم الخالية بينما set تسمح لنا بإضافة قيمة فارغة واحدة على الأقل فيها فئات تطبيق list هي LinkedList و ArrayList. بينما set Tree Set و HashSet و LinkedHashSet. في list يمكننا الحصول على عنصر محدد بالفهرس من القائمة باستخدام الدالة get (). بينما set لا يمكننا العثور على العنصر من المجموعة بناء على الفهرس لأنه لا يوفر أي دالة لذلك يتم استخدام list عندما نريد الوصول إلى العناصر بشكل متكرر باستخدام الفهرس بينما set يتم استخدامه عندما نريد تصميم مجموعة من العناصر المميزة. في list يتم استخدام الدالة listiterator () لتكرار عناصر القائمة بينما في set يتم استخدام المكرر عندما نحتاج إلى تكرار عناصر المجموعة.

container و container-fluid عبارة عن أصناف جاهزة في بوتستراب, كلاهما يعملان كحاوية للعناصر, ولهما نفس التنسيقات , لاحظ ذلك .container, .container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } الاختلاف الأساسي هو أن container متجاوب مع مختلف الشاشات وسوف تجد أن العرض الخاص به يختلف باختلاف الشاشات, لاحظ ذلك @media (min-width: 992px) .container { max-width: 960px; } @media (min-width: 768px) .container { max-width: 720px; } @media (min-width: 576px) .container{ max-width: 540px; } ، بينما container-fluid دائمًا عرضه 100٪ ولن يختلف باختلاف الشاشات

لحل المشكلة يمكنك استخدام verbatim Django template tag كالتالي <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> {% verbatim %} <div ng-app=""> <p>10 is {{ 5 + 5 }}</p> </div> {% endverbatim %}

يمكنك فعل ذلك كالتالي <script> $(document).ready(function() { $('form').submit( function(e) { var clikedForm = $(this); var m=clikedForm.find('#num').val(); if(m==''){ e.preventDefault(); alert('يجب اختيار قيمة') } }); }); </script> قمت بتخزين عنصر form الذي تم عمل submit له في متغير اسمه clikedForm ثم نستيطع الوصول لباقي العناصر من خلاله لكي نضمن عدم تداخل العناصر في بعضها جرب الامر

نحتاج لاضافة كود آخر واسم الحدث الخاص ليس change بل submit وهو يتنفذ عند عمل submit للنموذج, فمثلا لو كان لدينا كود html التالي <form action="#" id="form"> <select name="num" id="num"> <option value="">اختر الرقم</option> <option value="1">1</option> <option value="2">2</option> </select> <input type="submit"> </form> أريد عندما أضغط على زر الارسال أتحقق من قيمة القائمة المنسدلة كالتالي <script> $(document).ready(function() { $(document).on('submit', '#form', function(e) { var m=$('#num').val(); if(m==''){ alert('asda') e.preventDefault(); } }); }); </script> قمت بتحديد العنصر form وأسندت اليه الحدث submit , عندما أعمل submit سوف يتم التحقق من قيمة select , يتم ذلك من خلال السطر التالي var m=$('#num').val(); الآن لقد حصلت على قيمة select , أريد أن افحص هل تساوي قيمة أم لا باستخدام الكود التالي if(m==''){ alert('asda') e.preventDefault(); } اذا كانت قمية m تساوي قيمة فارغة, اذا هي لا تحتوي على قيمة وبالتالي سوف نمنع عملية ارسال البيانات باستخدام السطر التالي e.preventDefault(); يمكنك ايضا بداخل if كتابة الكود الذي تريده, فمثلا يمكنك اضهار الرسالة التي تريدها, يمكن فعل ذلك عن طريق عمل alert كالتالي if(m==''){ e.preventDefault(); alert('يجب اختيار قيمة') } فيصبح شكل الكود بشكل كامل كالتالي <script> $(document).ready(function() { $(document).on('submit', '#form', function(e) { var m=$('#num').val(); if(m==''){ e.preventDefault(); alert('يجب اختيار قيمة') } }); }); </script>

لحل مشكلة المقاسات وتحديد المقاسات بنفسك يمكنك احاطة المكون image بعنصر div واعطائه بعض الخصائص كالتالي import Image from 'next/image' const MyImage = (props) => { return ( <div style={{position:"relative", height:50, width:100}}> <Image loader={myLoader} src="me.png" alt="Picture of the author" width={500} height={500} /> </div> ) }

بالنسبة للمشكلة الثانية , لاحظ الكود الخاص به <div class="logo-goo">//سوف نعطيه بعض الأصناف <span class="logo mr-auto"></span>//سوف نحذف الصنف mr-auto <i class="fa fa-umbrella-beach fa-3x"></i> </span> <div class="text "> <h2>DIAGOONA</h2> <p>new bootstrap template</p> </div> </div> بعد التعديل يصبح كالتالي <div class="logo-goo d-flex align-items-center"> ^^^^^^^^^^^^^^^^^^^^^^^^^ <span class="logo"></span> <i class="fa fa-umbrella-beach fa-3x"></i> </span> <div class="text "> <h2>DIAGOONA</h2> <p>new bootstrap template</p> </div> </div> سوف يعرض اللوجو بجانب النص أما بالنسبة للكود لا يعمل فهو بسبب أنك لم تقم بتضمين ملف js.js <script src="js/js.js"></script> أرجو منك اضافة السطر , بالنسبة slides.lenght , لاحظ الكود التالي var slides = document.getElementsByClassName("mySlides"); لقد قمنا بجلب جميع العناصر التي لديها الصنف mySlides, نريد ان تقوم بعدهم, نستطيع فعل ذلك كالتالي slides.length حيث أن الخاصية length تقوم بارجاع عدد العناصر في المصفوفة, أما بالنسبة ل n, لاحظ كود جافاسكربت وكود html كود جافاسكربت function showSlides(n) { كود html <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> لاحظ أن الدالة المعرفة في جافاسكربت تستقبل متغير اسمه n , أي عند استدعاءها يجب أن نقوم بتمرير قيمة لها, لاحظ كود html , لقد قمنا باستدعاءها ثلاثة مرات, في كل مرة مررنا قيمة n بقيمة مختلفة , في المرو ألأولى قيمة المتغير n تساوي 1 والمرة الثانية تساوي 2 والمرة الأخيرة والثالثة 3 , ويمكننا استخدام هذه القيمة في الكود الذي ارفقه لك المدرب, سوف تواجهم مشكلة في الكود المرفق وبالتحديد في هذا السطر slides[slideIndex - 1].style.display = "block"; أرجو منك حذفه وتعديل الكود كالآتي function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); // تحديد كامل الشرائح var dots = document.getElementsByClassName("dot"); // تحديد كامل الدوائر if (n > slides.length) { slideIndex = 1 } // تحديد الشريحة الاولى كمفعلة if (n < 1) { slideIndex = slides.length } // تحديد الشريحة الأخيرة كمفعلة for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; // إخفاء كامل الشرائح if (i+1 == n) { slides[i].style.display = "block"; } } }

لتحويل كائن إلى مصفوفة ، يمكنك استخدام إحدى الدوال الثلاثة التالية: Object.keys () و Object.values () و Object.entries (), افترض أن لديك كائن person كالتالي const person = { firstName: 'Mohammed', lastName: 'Sami' }; لتحويل أسماء خصائص كائن person إلى مصفوفة ، يمكنك استخدام طريقة Object.keys (): const property = Object.keys(person); console.log(property); سوف يكون الناتج كالتالي [ 'firstName', 'lastName' ] كما تلاحط الدالة Object.keys () فقط تقوم بتحويل أسماء الخصائص الى مصفوفة, لتحويل قيم خصائص الكائن person إلى مصفوفة ، يمكنك استخدام طريقة Object.values () const values = Object.values(person); console.log(values); سوف يكون الناتج كالتالي [ 'Mohammed', 'Sami' ] أما اذا استخدمت الدالة Object.entries (). كما في المثال الآتي const entries = Object.entries(person); console.log(entries); سوف يكون الناتج كالتالي [ [ 'firstName', 'Mohammed' ], [ 'lastName', 'Sami' ] ]

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

الطريقة الصحيحة للقيام بذلك باستخدام Django 3.2 أو أعلى هي باستخدام display decorator كالتالي class BookAdmin(admin.ModelAdmin): model = Post list_display = ['title', 'get_author_name'] @admin.display(description='Author Name', ordering='author__name') def get_author_name(self, obj): return obj.author.name

تستطيع استخدام lambda لفعل ذلك كالتالي combine_lambda = lambda x: '{}{}'.format(x.Year, x.quarter) ثم تستطيع استخدم الناتج في إنشاء العمود الجديد كالتالي df['period'] = df.apply(combine_lambda, axis = 1)

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