عمر قره محمد

إليك بعض النصائح من اجل قبول مدونتك في جوجل ادسنس : يجب أن يكون عمر نطاقك 3 أشهر على الأقل. لا يجب أن يخالف نوع محتواك سياسة الخصوصية لـ Blogger و AdSense، وهذا يعني أنه لا يجب أن تتحدث عن برامج مسروقة أو برامج تم اختراقها، وأيضًا لا يجب أن تتحدث عن أي محتوى إباحي. يجب أن تكون فوق سن 18 عامًا. اكتب ما لا يقل عن 30 إلى 35 منشورًا بطول 1000 كلمة أو أكثر في Blogger . استخدم نطاقات المستوى الأعلى مثل .com و .in و .tech و .org و .net و .gov أو .edu . تأكد من أن مدونتك غير ناقصة . يجب أن يحتوي موقعك على محتوى فريد ومثير للاهتمام . يجب أن يحتوي موقعك على تنقل واضح (بمعنى ان تكون الصفحات مترابطة بشكل جيد) والافضل لك هو ان تطلع على شرح غوغل لكيفية حل المشكلة

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

رغم ان كل من Sass و Tailwind هما أدوات لتنسيق وتصميم صفحات الويب ،إلا ان لكل منهما اسلوب مختلف في العمل، ولذلك فتعلمها يعتمد على اسلوبك بشكل اساسي، وأنا شخصياً افضل استخدام sass مع react اكثر من bootstrap أو Tailwind أو styled component. حيث ان Sass يقدم ميزات إضافية مثل المتغيرات والتضمين والمكتبات والتعليقات ، مما يجعلها أكثر قوة ومرونة من CSS. و يتطلب Sass معرفة بالبرمجة وقد يستغرق وقتًا أطول لإنشاء التصميمات. بينما على الصعيد الاخر فإن Tailwind هو إطار عمل CSS يستخدم تقنية "Utility-First" ، وهي تقنية تسمح بإنشاء التصميمات باستخدام فئات CSS المحددة مسبقًا. و يتضمن Tailwind مجموعة كبيرة من الفئات CSS التي يمكن استخدامها لإنشاء التصميمات بسرعة. يتطلب Tailwind بعض الوقت لتعلم فئات CSS المحددة مسبقًا ، ولكنه يسمح بإنشاء التصميمات بسرعة وسهولة. وللتفصيل اكثر : Sass: يسمح للمصممين بإنشاء متغيرات وتضمينات ومكتبات وتعليقات في CSS. يجعل عملية تصميم الصفحات أكثر قوة ومرونة. يساعد على تقليل الكود المكرر وتسهيل عملية الصيانة. يوفر القدرة على إنشاء شبكات مرنة وقابلة للتعديل. يدعم Sass الوظائف البرمجية مثل الشروط والحلقات. Tailwind: يستخدم تقنية "Utility-First"، مما يسهل عملية إنشاء التصميمات. يحتوي على مجموعة كبيرة من الفئات CSS المحددة مسبقًا، مما يسهل عملية التحكم في التصميم. يساعد على تقليل حجم الكود وتحسين أداء الموقع. يتضمن Tailwind أدوات تحكم في الألوان والخطوط والأبعاد والهوامش. يدعم Tailwind إنشاء تصاميم متناسبة مع جميع الأحجام والأجهزة.

First Class Function أي وظائف من الدرجة الأولى وهي تطلق على الوظائف إذا كانت تعامل مثل باقي المتغيرات (Variable) . و هذا يعني أن هذه الوظائف يمكن تمريرها كوسائط إلى وظائف أخرى (Argument)، وإعادتها كقيم من وظائف أخرى ، وتعيينها لمتغيرات أو تخزينها في هياكل البيانات. Higher-Order Function الوظيفة الأعلى مرتبة وهي الوظيفة التي تقوم بتنفيذ واحد على الأقل مما يلي: يأخذ وظيفة أو أكثر كوسائط parameters. إرجاع دالة كنتيجة لها. جميع الوظائف الأخرى هي وظائف من الدرجة الأولى. تُستخدم الدوال من مرتبة عليا عادةً في حالات التحكم في التدفق (Flow Control) والتلاعب بالبيانات (Data Manipulation) والتعامل مع الأحداث (Events) وغيرها، ومن أمثلة الدوال من مرتبة عليا في جافاسكريبت: 1- دوال التحكم في التدفق: forEach() map() filter() reduce() sort() 2- دوال التلاعب بالبيانات: find() every() some() concat() slice() 3- دوال التعامل مع الأحداث: addEventListener() setTimeout() setInterval() يمكن استخدام الدوال من مرتبة عليا لتحسين كفاءة الكود وتقليل حجمه، كما يمكن استخدامها لإنشاء دوال مخصصة تعمل بشكل محدد في حالات معينة. قد يفيدك الاطلاع على هذه المقالة :

يمكنك عرض الـ option باستخدام الـ EJS واعطاء الـ selected للعنصر المحدد : <select id="volume"> <% var options = [ "1", "5", "10", "50", "75", "100" ]; for ( var i = 0; i < options.length; i++ ) { var selected = ( config[0].volume == i ) ? "selected" : ""; %><option value="<%=options[ i ] %>" <%=selected %>><%=i %></option><% } %> </select> لتفاصيل اكثر راجع النقاش التالي HTML select option with EJS

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

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

جرب تعديل الكود للشكل التالي : let date1 = moment(date).fromNow(); بدلاً من الـ : let date1 = moment(date, "YYYY-MM-DD").fromNow();

هل يمكنك مشاركة ملفات المشروع الخاص بك ؟

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

بالتأكيد سيكون ثابت بما انه بالساعات، ستحتاج للإنظار لساعة حتى يتغير.

قم بتعريف المتغير خارج الدالة ولكن لا تعطيه أي قيمة ثم في داخل الدالة تقوم بإعطائه المعلومات التي تريدها، مثل : let firstName; // عرفنا المتغير خار ج الدوال جميعاً const fun1 = (data)=>{ firstName=data; // نسند القيمة للمتغير من الدالة الأولى } const fun2 = (data)=>{ console.log(firstName); // data سيعيد الـ } ولكن هذه الطريقة لن تعمل بالنسبة لك لأن الدالة الثانية لديك قد تحدث قبل ان تحدث الدالة الاولى وبالتالي سيكون المتغير firstName فارغاً أو يحتوي على معلومات المستخدم السابق. والشكل الاصح للعملية هو إضافة middleware تقوم بإحضار هذه البيانات من قاعدة البيانات في كل من الطلبين، والشكل الاعتيادي ان تستخدم هذه الـ middleware البيانات المخزنة في الـ token بعد التحقق منه لتقوم بإحضار بيانات المستخدم ثم تمرر هذه البيانات لكل الطلبات.

هنالك مكاتب جاهزة للقيام بهذه العملية lمثل : momentjs وتحصل على الوقت مثل الصورة التي شاركتها بالشكل : npm install moment --save import moment from 'moment'; moment('2013-03-01', 'YYYY-MM-DD').fromNow();

جرب حذف الحزمة live server وأعادة تنزيلها، وفي حال لم يعمل جرب اعادة تشغيل vs، وفي حال لم يعمل جرب إعادة تشغيل الحاسوب. في حال لم تفد الطرق السابقة، قم بمشاركة ملفات المشروع

هل يمكنك مشاركة ملفات المشروع بصيغة اخرى

جرب إضافة الـ effect التالي والذي يقوم بتعديل الحالة setQtyArray عند كل تعديل على الحالة cartItems في اللمف Cart.jsx : useEffect(() => { const ids = cartItems.map((item) => { return item.id; }); const filteredCartItems = qtyArray.filter((item) => ids.indexOf(item.id) !== -1); setQtyArray(filteredCartItems); }, [cartItems]);

جرب تعديل كود الـ login للشكل التالي : import { ChangeEvent, FormEvent, useRef, useState } from "react"; import { Link, Navigate } from "react-router-dom"; import "../scss/styles.scss"; import { UilEye, UilEyeSlash } from "@iconscout/react-unicons"; import api_key from "../Services/Api_Url"; import { LoginType, SignupType } from "../../types/mainTypes"; import axios from "axios"; import { useLogin } from "../Context/Login"; let emailReg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; export default function Login() { let { jwt, setJwt, setIsLoggedIn, isLoggedIn } = useLogin(); // email error message const emailRef = useRef<HTMLInputElement>(null); const emailErrorMessage = useRef<HTMLParagraphElement>(null); // email error message const passwordRef = useRef<HTMLInputElement>(null); const passwordErrorMessage = useRef<HTMLParagraphElement>(null); const [isShowPassword, setIsShowPassword] = useState(false); const LoginReq = async ({ email, password }: LoginType) => { const res = await axios.post(`${api_key}/auth/login`, { data: { email, password, }, }); let data = res.data; setJwt(data.data.accessToken); localStorage.setItem("jwt", data.data.accessToken); setIsLoggedIn(true); localStorage.setItem("isLoggedin", "true"); window.location.href = window.location.origin; // الكود المضاف }; function handleSubmit(e: FormEvent<HTMLFormElement>) { e.preventDefault(); // validate email if (emailRef.current.value.toLowerCase().match(emailReg) === null) { emailErrorMessage.current.innerText = "Please Enter A Valid Email !"; emailRef.current.classList.add("invalid"); } else { emailErrorMessage.current.innerText = ""; emailRef.current.classList.remove("invalid"); } // validate password if (passwordRef.current.value.length <= 6) { passwordErrorMessage.current.innerText = "Password Is Too Short !"; passwordRef.current.classList.add("invalid"); } else { passwordErrorMessage.current.innerText = ""; passwordRef.current.classList.remove("invalid"); } let inputs = [emailRef.current, passwordRef.current]; let invalidInputs = []; for (let i = 0; i < inputs.length; i++) { if (inputs[i].classList.contains("invalid")) { invalidInputs.push(inputs[i]); } } if (invalidInputs.length === 0) { // send req console.log(typeof emailRef.current.value); console.log(typeof passwordRef.current.value); LoginReq({ email: emailRef.current.value, password: passwordRef.current.value, }); } } const validateEmail = (e: ChangeEvent<HTMLInputElement>) => { const inputValue = e.target.value; const errorMessage = emailErrorMessage.current; // validate email if (inputValue.toLowerCase().match(emailReg) === null) errorMessage.innerText = "Please Enter A Valid Email !"; else errorMessage.innerText = ""; }; const validatePassword = (e: ChangeEvent<HTMLInputElement>) => { if (e.target.value.length <= 6) { passwordErrorMessage.current.innerText = "Password Is Too Short !"; } else { passwordErrorMessage.current.innerText = ""; } }; document.body.classList.add("login-page"); return ( <> {/* {isLoggedIn ? <Navigate to={"/"} /> : ""} الغي الكود التالي */} <div className='about'> <h1>Mohamed Montaser's Social Media</h1> <p style={{ textTransform: "capitalize" }}> Hello I'm mohamed montaser, I'm Building This Project To Improve my Fullstack Skills. I Hope You Enjoy With My Social Media Website </p> </div> <form id='form' className='form-container' onSubmit={handleSubmit} spellCheck='false'> <div className='form-control form-username'> <label htmlFor='email' className='label'> Email: </label> <input type='text' onChange={(e) => validateEmail(e)} id='email' ref={emailRef} autoFocus /> <p className='error-msg' ref={emailErrorMessage}></p> </div> <div className='form-control form-username'> <label htmlFor='password' className='label'> Password: </label> <div className='input'> <input type={isShowPassword ? "text" : "password"} id='password' ref={passwordRef} onChange={(e) => validatePassword(e)} /> <button type='button' onClick={(e) => setIsShowPassword(!isShowPassword)}> {isShowPassword ? <UilEyeSlash /> : <UilEye />} </button> </div> <p ref={passwordErrorMessage} className='error-msg'></p> </div> <input type='submit' value='Submit' /> <p className='register-link'> You Have Already An Account ? <Link to={"/register"}>Sign up</Link> </p> </form> </> ); }

هل يمكنك مشاركة ملفات المشروع بالكامل ؟

جرب عمل reload بشكل تلقائي بعد عملية تسجيل الدخول : windows.location.reload() بحيث يتم إعادة تحميل الصفحة بعد عملية تسجيل الدخول بدلاً من ان تقوم بفعلها تلقائياً.

جرب الذهاب إلى File > Preferences > Settings ثم اكتب color في خانة البحث وحاول تعديل اللون من الخصائص التي ستظهر لك.

ليس لدي فكرة

الافضل برأيي أن تكمل دراستك في بلدك، فالدراسة الأكاديمية افضل دائماً ول كان التعليم ليس على قدر المستوى، ويمكنك متابعة الدورات فيما بعد دخول الجامعة.

نستخدمه عندما نريد ان نجعل العناصر تطفو بجانب بعضها البعض. يطبق على الـ header فقط ولا يطبق على العناصر التي تأتي بعده، ولكن عليك استخدام الـ clear على العنصر الذي يأتيب بعده مثل : <style> div { padding: 15px; } .div1 { background: red; float: left; } .div2 { clear: left; background: yellow; } .div3 { background: green; } </style> <body> <h2>Float and clear</h2> <div class="div1">Div 1</div> <div class="div2">Div 2</div> <div class="div3">Div 3</div> </body> انصحك بنسخ الكود السابق والتعديل عليه اكثر من مرة حتى تتعرف على الـ float بشكل افضل.

حتى تستطيع التقدم للامتحان والحصول على الشهادة لابد من ان تحقق الشروط التالية : إتمام أربعة مسارات تعليمية على الأقل التطبيق العملي مع المدرب، والاحتفاظ بالمشاريع العملية الناتجة لإرسالها للمراجعة رفع المشاريع على حسابك على GitHub أولًا بأول لمشاركتها معنا اعرف اكثر من هنا الامتحان والحصول على الشهادة

لحل مشاكل CSS لابد من ان تكون متمرس بشكل جيد في استخدم الـ developer tool الخاصة بالمتصفح. بحيث تتمكن بسهولة من تغيير اعدادات CSS التي تقوم بتطبيقها على العنصر وكذلك تستطيع التأكد بسهولة من ان التنسيقات التي اضفتها تم إضافتها بنجاح للعنصر. فأغلب مشاكل CSS تأتي من وجود مشكلة في الـ selector أو من وجود تنسيقات سابقة تمنع ظهور التنسيقات الحالية، وهنالك نوع ثالث من المشاكل وهي المشاكل المتعلقة بالجهل في الية عمل CSS ولحل هذه المشكلة يجب ان يكون لديك المهارة الكافية للبحث عن المشكلة، فإذا اردت توسيط عنصر من النوع inline يجب ان تضيف للأب text-align: center بينما إذا اردت ان توسيط عنصر من النوع block فيجب ان تعطيه width ومن ثم margin: auto وهذا النوع من الحلول بحاجة لخبرة ولن تستطيع حل هذه المشاكل بدون ان تملك مهارة في البحث. فمثلاً للبحث عن المشكلة السابقة يمكن ان نكتب how to center inline elements in CSS.