لوحة المتصدرين

اصبحت استخدم vh و vw بدلا من الpx لانه متجاوب بكل شيء عندما اكبر او اصغر الصفحة, وذالك حقا يساعدني في موضوع استخدام media queries اصبحت استخدمها قليلا, لكن لا اعلم اذا كان استخدامهم يفسد بيئة العمل او يجعل فهم الاوامر صعب

انا احيانا استخدم ghatgpt لحل بعض المشاكل البرمجة او ليشرح لي بعض الجزئيات التي لم افهمها او حل مشاكل في الكود.مع العلم اني في مرحلة تعلم البرمجة فهل استخدامي لchatgpt سيساعدني للتعلم اسرع ام انه علي البحث في قوقل وستاك اوفر فلو افضل لاتعلم مهارة البحث

هل يتم استخدام هذة التقنيات سويتا ام واحد في التصميم وما افضلهم

السلام عليكم هل لغتي HTML و CSS مهمتان لتطوير التطبيقات باستخدام JS؟ انا اعرف اساسيات كلا اللغتين ولكن هل يجب علي التعمق واحترافهم ام يكفي الاساسيات؟ هل سيلزمانني بكثرة في أحد أطر العمل بJS مثلا؟ وهل سيتم تعليمنا استخدام الوسوم والخاصيات في دورة تطور التطبيقات باستخدام JS؟ شكرا لكم

السلام عليكم جمعة مباركة إن شاء الله مشكلتي في صفحة الاختبارات، عند الانتقال من سؤال لآخر في اختبار الاستماع، يتم تحديث الرابط ولكن الصوت لا يتغير. وأعتقد أن المشكلة تكمن في ذاكرة التخزين المؤقت (Cache). هل يمكنكم المساعدة في حل هذه المشكلة؟ علما أنني أستخدم إطار عمل laravel مع livewire @elseif($questions[$currentQuestionIndex]->type == 'record_voice') <audio id="question-audio" controls> <source src="{{ asset('audio/'.$questions[$currentQuestionIndex]->question_text) }}?v={{ $questions[$currentQuestionIndex]->updated_at->timestamp }}" // src="{{ $audioSource }}" type="audio/mpeg"> Your browser does not support the audio element. </audio> @endif يتم اختيار سؤال الحالي عن طريق الكورنت اندكس الذي يستخرجه من مصفوفه الاسئله المشكله تكون فقط اذا كان اكثر من سؤال فيه ملف صوتي بحيث بقيه الاسئله تاخذ نفس المقطع الصوتي السابق رغم اني طبعت الرابط ولاحظت ان الرابط يتغير كل مره لكن الملف الصوتي يظل هو هو جربت كم من طريقه لم تفلح معي انتم تعرفون ان الصفحه لا يتم تحديثها في اللايف وير ربما هذه هي المشكله $questions[$currentQuestionIndex] يتم تغيير الاندكس الخاص بالسؤال الحالي في متحكم لايف وير في حال إنتقل المستخدم من سؤال لآخر سواء ذهابا أم إيابا و إذا كان آخر سؤال يتم إرسال الأجوبة أو إذا إنتهى الوقت سأرفق لكم الشيفة الخاصة بالمتحكم وصفحة العرض لايفوير صفحة العرض : <div class="page-body dark:bg-black dark:text-white bg-gray-200 mb-12 px-8 border h-full grid grid-cols-4 gap-2 p-20"> {{-- 1 --}} <img src="{{ asset('storage/online2.png') }}" alt="" class="flex m-auto col-span-1"> <div class="sec-question col-span-3 px-16"> <div class="border-4 border-white dark:border-2 p-4 rounded-lg"> {{-- Step and Exam information --}} <div class="space-x-32 relative px-1 m-auto"> <!-- Display the current queepion number and the total number of questions --> <div class="total-number text-2xl text-red-400 font-bold absolute left-5"> {{ $currentQuestionIndex + 1 }}/{{ $questions->count() }}</div> <!-- Display the name of the exam --> <div class="exam-number font-bold right-5 absolute">{{ $exam->name }}</div> </div> {{-- Divider --}} <hr class="w-[94%] h-1 my-10 border-white text-white m-auto flex"> {{-- Question and Time --}} <div class="justify-between text-clip flex"> <div class="question-part font-bold px-7 mr-16 text-2xl overflow-wrap-anywhere"> {{ $questions[$currentQuestionIndex]->question }}</div> <div class="time-down font-bold text-lg"> <div id="taim" class="taim flex gap-x-2 "> <div class="circle relative w-28 h-28 justify-center flex items-center"> <div class="dots hours absolute w-full h-full rounded-[50%] flex justify-center items-start z-[1000] before:w-3 before:h-3 before:absolute before:top-[02px] before:bg-amber-600 before:rounded-[50%] before:shadow-[0_0_20px_rgb(202_138_4)_,_0_0_60px_rgb(202_138_4)] "> </div> <svg class="relative w-28 h-28 rotate-[270deg] "> <circle class="w-full h-full fill-transparent stroke-[8] stroke-stone-900 translate-x-1 translate-y-1" cx="50" cy="50" r="50"></circle> <circle stroke-dashoffset="440" stroke-dasharray="440" class=" w-full h-full fill-transparent stroke-[8] stroke-amber-600 translate-x-1 translate-y-1" cx="50" cy="50" r="50" id="hh"></circle> </svg> <div class="absolute text-center font-[500] text-[1.5rem] text-gray-800" id="hours"> 00<br> <span class="uppercase text-gray-900 absolute translate-x-[-50%] translate-y-[-10px] text-[0.65rem] font-[500] tracking-[0.1rem]">hours</span> </div> </div> <div class="circle relative w-28 h-28 justify-center flex items-center "> <div class="dots minutes absolute w-full h-full rounded-[50%] flex justify-center items-start z-[1000] before:w-3 before:h-3 before:absolute before:top-[02px] before:bg-green-600 before:rounded-[50%] before:shadow-[0_0_20px_rgb(22_163_74)_,_0_0_60px_rgb(22_163_74)] "> </div> <svg class="relative w-28 h-28 rotate-[270deg] "> <circle class="w-full h-full fill-transparent stroke-[8] stroke-stone-900 translate-x-1 translate-y-1" cx="50" cy="50" r="50"></circle> <circle stroke-dashoffset="300" stroke-dasharray="612" class=" w-full h-full fill-transparent stroke-[8] stroke-green-600 translate-x-1 translate-y-1" cx="50" cy="50" r="50" id="mm"></circle> </svg> <div class="absolute text-center font-[500] text-[1.5rem] text-gray-800" id="minutes"> 00<br> <span class="uppercase text-gray-900 absolute translate-x-[-50%] translate-y-[-10px] text-[0.65rem] font-[500] tracking-[0.1rem]">minutes</span> </div> </div> <div class="circle relative w-28 h-28 justify-center flex items-center "> <div class="dots seconds absolute w-full h-full rounded-[50%] flex justify-center items-start z-[1000] before:w-3 before:h-3 before:absolute before:top-[02px] before:bg-purple-500 before:rounded-[50%] before:shadow-[0_0_20px_rgb(168_85_247)_,_0_0_60px_rgb(168_85_247)] "> </div> <svg class="relative w-28 h-28 rotate-[270deg] "> <circle class="w-full h-full fill-transparent stroke-[8] stroke-stone-900 translate-x-1 translate-y-1" cx="50" cy="50" r="50"></circle> <circle stroke-dashoffset="300" stroke-dasharray="612" class=" w-full h-full fill-transparent stroke-[8] stroke-purple-500 translate-x-1 translate-y-1" cx="50" cy="50" r="50" id="ss"></circle> </svg> <div class="absolute text-center font-[500] text-[1.5rem] text-gray-800" id="seconds">00 </div> </div> </div> </div> <script> var remainingTime = localStorage.getItem('remainingTime') || {{ $remainingTime }}; var initialTime = {{ $remainingTime }}; // Define a function to update the remaining time function updateRemainingTime() { // Check if the exam time has expired if (remainingTime <= 0) { // If so, submit the answers // Livewire.emit('sendAnswersToServer'); console.log('exam finish'); @this.call('sendAnswersToServer'); localStorage.removeItem('remainingTime'); } else { // Otherwise, decrement the remaining time by 1 second remainingTime = remainingTime - 1; // @this.call('updatePivotTable', remainingTime); // Update the remaining time displayed on the page var minutes = Math.floor(remainingTime / 60); var seconds = remainingTime % 60; document.getElementById('minutes').innerHTML = minutes + '<br> <span class="uppercase text-gray-900 absolute translate-x-[-50%] translate-y-[-10px] text-[0.65rem] font-[500] tracking-[0.1rem]">menutes</span>'; document.getElementById('seconds').innerHTML = (seconds < 10 ? "0" : "") + seconds + '<br> <span class="uppercase text-gray-900 absolute translate-x-[-50%] translate-y-[-10px] text-[0.65rem] font-[500] tracking-[0.1rem]">seconds</span>'; // retrieve the circle element by its id var myHCircle = document.getElementById('hh'); var myMCircle = document.getElementById('mm'); var mySCircle = document.getElementById('ss'); // set the new stroke-dashoffset value // mySCircle.setAttribute('stroke-dashoffset', 440 - (440 * minutes) / 60); myMCircle.setAttribute('stroke-dasharray', 312 + (300 * minutes) / (initialTime / 60)); mySCircle.setAttribute('stroke-dasharray', 312 + (300 * seconds) / 60); // formatTime(remainingTime); // document.getElementById('remainingTime').innerHTML = // Store the remaining time in local storage localStorage.setItem('remainingTime', remainingTime); // Call the updateRemainingTime function again after 1 second setTimeout(updateRemainingTime, 1000); } } // Use setTimeout to update the remaining time after the exam has started document.addEventListener('livewire:load', function() { console.log('Livewire loaded'); setTimeout(updateRemainingTime, 1000); }); </script> </div> @if ($questions[$currentQuestionIndex]->type == 'fill') <div class="mt-8 font-bold px-10"> @php $listItems = $questions[$currentQuestionIndex]->blanks; $text = $questions[$currentQuestionIndex]->question_text; $fillQuestion = ''; for ($i = 1; $i < count($listItems) + 1; $i++) { if (strpos($text, '[__]')) { $fillQuestion = '<input type="text" class="m-1 text-center space-x-5 bg-inherit shadow border-none h-8 focus:ring-0 p-4 w-fit" placeholder="_ _ _ _ _ _ _ _ _" name="' . $i . '__blank" wire:model.lazy="fill_answers.' . $currentQuestionIndex . '.' . $i . '">'; $text = substr_replace($text, $fillQuestion, strpos($text, '[__]'), 4); } } echo $text; @endphp {{-- <button type="submit" wire:click="saveInputs">submit</button> --}} @foreach ($fill_answers as $key => $items) {{ $key . ':' }} @foreach ($items as $item) {{ $item }} @endforeach @endforeach </div> @elseif($questions[$currentQuestionIndex]->type == 'Multiple_choice') {{-- Answers --}} <div class="answers mt-8"> <ul class="px-8"> {{-- Previous answer --}} @if (isset($currentAnswers[$questions[$currentQuestionIndex]->id])) @if (array_key_exists($questions[$currentQuestionIndex]->id, $currentAnswers)) <h1>Your previous answer</h1> @php $answer = $all_answers->where('id', $currentAnswers[$questions[$currentQuestionIndex]->id])->first(); @endphp <li class="my-2 w-full p-4 font-bold text-lg border rounded-lg dark:text-white/60 dark:font-semibold text-[#523b92] dark:border-white hover:text-white bg-red-400"> {{ $answer->answer }} </li> <hr class="h-2 bg-slate-400"> @endif @endif {{-- Shuffled answers --}} @php $shuffledAnswers = collect($all_answers->where('question_id', $questions[$currentQuestionIndex]->id))->shuffle(); @endphp @foreach ($shuffledAnswers as $key => $item) <li class="my-2 cursor-pointer w-full p-4 font-bold text-lg border rounded-lg dark:text-white/60 dark:font-semibold text-[#523b92] dark:border-white border-[#523b92] hover:text-white hover:bg-[#523b92]" wire:click="submitAnswer('{{ $item->id }}')"> {{ $item->answer }} </li> @endforeach </ul> </div> @elseif($questions[$currentQuestionIndex]->type == 'record_voice') <audio id="question-audio" controls> <source src="{{ $audioSource }}" type="audio/mpeg"> Your browser does not support the audio element. </audio> @endif {{-- Navigation buttons --}} <div class="inline-flex justify-around mt-6 w-full"> <button wire:click="preAnswer()" onclick="stopAudio()" class="bg-orange-500 hover:bg-orange-400 text-white font-bold py-2 px-4 rounded-l"> <span class="material-symbols-outlined">Undo Prev</span> </button> @if ($questions->count() == $currentQuestionIndex + 1) <button wire:click="submitAnswer()" class="bg-orange-500 hover:bg-orange-400 text-white font-bold py-2 px-4 rounded-r"> Finish Exam </button> @else <button wire:click="goToNextQuestionIfPossible()" onclick="stopAudio()" class="bg-orange-500 hover:bg-orange-400 text-white font-bold py-2 px-4 rounded-r"> <span class="material-symbols-outlined">Redo Next</span> </button> @endif </div> <script> function stopAudio() { var audio = document.getElementById("question-audio"); audio.pause(); audio.currentTime = 0; } </script> </div> </div> </div> المتحكم : <?php // In your Questions component namespace App\Http\Livewire; use App\Models\Answer; use App\Models\Exam; use App\Models\Question; use App\Models\UserAnswer; use Illuminate\Contracts\Session\Session; use Illuminate\Database\Eloquent\Collection; use Livewire\Component; use Illuminate\Session\SessionManager; use Illuminate\Support\Facades\Auth; class Questions extends Component { public Exam $exam; public Collection $questions; public int $currentQuestionIndex = 0; public $all_answers; public $remainingTime; public $fill_answers = []; public $audioSource; // /تحديث الوقت كل ثانية / إحضار جميع الإجابات public function mount() { $this->emit('examStarted'); $this->getAnswers(); $this->getUser(); $this->remainingTime = $this->user->exams->find($this->exam->id)->pivot->time_of_exam * 60; } // إحضار جميع الإجابات public function getAnswers() { $this->all_answers = Answer::all(); } // المستخد الحالي public function getUser() { $this->user = auth()->user(); } // Define a function to update the remaining time public function submitAnswer($choiceKey, SessionManager $session) { // Get ID for current question $questionId = $this->questions[$this->currentQuestionIndex]->id; // Get stored answers from session $storedAnswers = json_decode($session->get('answers', '{}'), true); // Check if an answer for this question already exists if (array_key_exists($questionId, $storedAnswers)) { // Remove existing answer unset($storedAnswers[$questionId]); } // Add new answer $storedAnswers[$questionId] = $choiceKey; // Save updated answers to session $session->put('answers', json_encode($storedAnswers)); if ($this->isLastQuestion()) { // Send answers to server and redirect to exam result page $this->sendAnswersToServer(); $session->forget('answers'); // exam-result // return redirect()->route('types'); } $this->goToNextQuestionIfPossible(); } public function sendAnswersToServer() { // جلب عدد المحاولات المتبقية للامتحان الخاصة بالطالب $examPivot = $this->user->exams()->where('exam_id', $this->exam->id)->first()->pivot; $attempts = $examPivot->number_of_submission; if ($attempts > 0) { $attempts = $attempts - 1; } // Save the user's answers $answers = json_decode(request()->session()->get('answers', '{}'), true); $score = 0; $num_questions = count($answers); // اذا كانت الاجوبة اختيار من متعدد if ($num_questions > 0) { foreach ($answers as $answerId) { // Get the question from the database $answer = Answer::find($answerId); // Check if the user's answer is correct if ($answer->is_correct == true) { $score++; } } foreach ($answers as $question_id => $answer_key) { $answer = new UserAnswer(); $answer->user_id = $this->user->id; $answer->question_id = $question_id; $answer->answer_id = $answer_key; $answer->save(); } } // اذا كانت الاجوبة املئ الفراغ if (count($this->fill_answers)) { $questionScore = 0; foreach ($this->fill_answers as $questionIndex => $fillAnswers) { $question = $this->questions[$questionIndex]; foreach ($fillAnswers as $index => $answer) { // Check if the answer is valid $answer = strtolower(trim($answer)); foreach ($question->blanks as $validAnswer) { // dd($validAnswer); if (strtolower(trim($validAnswer['text'])) === $answer) { // Add score for valid answer $questionScore += 1 / count($question->blanks); } } } } $score += $questionScore; } // Update the exam_user pivot table $examPivot->update([ 'number_of_submission' => $attempts, ]); $this->user->exams()->updateExistingPivot($this->exam->id, [ 'score' => $score, 'closed' => ($attempts == 0), ]); return redirect()->route('exam.result', $this->exam->id); } public function preAnswer() { $this->goToPreviousQuestionIfPossible(); } public function isLastQuestion(): bool { return $this->currentQuestionIndex === $this->questions->count() - 1; } public function goToNextQuestionIfPossible() { if ($this->canGoToNextQuestion()) { $this->currentQuestionIndex++; $this->audioSource = asset('audio/' . $this->questions[$this->currentQuestionIndex]->question_text); } } public function goToPreviousQuestionIfPossible() { if ($this->canGoToPreviousQuestion()) { $this->currentQuestionIndex--; } } public function canGoToNextQuestion(): bool { return $this->currentQuestionIndex < $this->questions->count() - 1; } public function canGoToPreviousQuestion(): bool { return $this->currentQuestionIndex > 0; } // update time every secend public function updatePivotTable($remainingTime) { $this->user->exams()->updateExistingPivot($this->exam->id, ['time_of_exam' => $this->remainingTime]); } public function render() { $answers = json_decode(request()->session()->get('answers', '{}'), true); return view('livewire.questions', [ 'currentAnswers' => $answers ?? null, ]); } } شكرا لكم واتمنى ان تقدموا لي نصائح بشان تحسين الشفره او عن اي اخطاء موجوده فيها او ملاحظات

ما المقصود من هذا التنبيه .. مرحبًا ، نرجو منك رفع ملفّات العمل المصدرية النهائيّة ضمن مناقشة المشروع (----------------) تجنبًا لتجميد الرصيد. شكراً لتفهمك. مع العلم انه تم تسليم المشروع ضمن مناقشة المشروع مع العميل .. ما الحل حتى لا يتم تجميد رصيدي ؟

تم ارسال اشعار لي ان العميل قام باستلام المشروع ووضع علامة مكتمل على المشروع ... إذن سأتواصل مع مركز المساعدة .. شكرا لك على وقتك وعلى الافادة

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

هل يحدث مشكلة اذا قمت بتسليم العمل في مناقشة المشروع دون الضغط على زر تسليم المشروع .. لقد مت بإرفاق الملفات في مناقشة المشروع والعميل اكد استلام المشروع ... هل هذا يحدث مشكلة ؟

بخصوص التنبيه أرجو منك قراءة النص التالي المقتبس من موقع مستقل - من قاعدة المعرفة للمستقلين صفحة إدارة المشروع بعد توظيفك: تأكد من العمل المنجز بعد إنهاء جميع أقسام المشروع تأكد جيدًا مما قمت بتنفيذه، واحرص على التزامك بحقوق الملكية وخلو العمل من النسخ (هذا التصرف يؤدي لإيقافك عن العمل في مستقل). أما لو ظهر لدى صاحب المشروع أي خطأ أو لاحظ وجود نقص في العمل ننصحك بالتعاون معه لإصلاحه. تسليم كامل الملفات أرسل جميع الملفات المتعلقة بالعمل، تأكد من إمكانية تشغيلها لدى العميل وحاول مساعدته لو احتاج ذلك. قبل أن تضغط على زر تسليم المشروع اسأل العميل عن رأيه بما قدمت، واسأله عن وجود أي استفسارات أو ملاحظات او حتى مشاكل في التنفيذ وساعده في حلها حال وجودها. تسليم المشروع بعد الضغط على زر تسليم المشروع، سيتم إرسال إشعار للعميل يعلمه بطلبك. في حال موافقته على الطلب سيصبح المشروع مكتملًا كما سينتقل الرصيد لحسابك. علمًا أنه يمكنه العودة إليك خلال 14 يومًا من استلام المشروع للإبلاغ عن أي مشكلة أو طلب توضيح أي شيء غامض ضمن المشروع. احرص على منح العميل تجربةً إيجابيةً، لمنحك تقييماتٍ جيدةٍ بعد انتهاء المشروع ولزياة فرصة اختيارك مجددًا لتنفيذ مشاريع أخرى. تواصل ضمن نقاش المشروع لتكن جميع محادثاتك مع العميل موثقة ضمن المنصة لنتمكن من ضمان حقوقك في حال حدوث أي مشكلة. إذا أردتي الاستفسار عن المشكلة ومعرفة المزيد تحدثي إلى مركز المساعدة الخاص بمستقل وبالنسبة لتسجيل الدخول يمكنك الإطلاع على الدليل التالي، حيث يتم إنشاء حساب واحد لمنصة حسوب وبذلك تمتلكي حساب على مواقع مثل مستقل وخمسات وأكاديمية حسوب وبيكاليكا وبعيد وأنا: https://support.mostaql.com/login-to-mostaql

قومِ بالدخول على الإيميل الخاص بك ، ورؤية هل هناك رسائل مرفقة من قبل مستقل وهل تحتوي على رمز ما ، في حال كان هناك رسائل وتحتوي على رمز أرفقيه .

لقد قمت بإدخاله عدة مرات بشكل صحيح ولكن يعطيني إشعار بأن الرمز غير صحيح وانا متأكدة من صحته فما الحل هل هناك طريقة اخرى للتواصل معهم ؟

حاولت التواصل مع مركز المساعدة ولكن يطلب مني رمز الدخول هل هي كلمة المرور الخاصة بي على مستقل ؟؟

السلام عليكم اريد مقالة باللغةالعربية جيدة عن wordpres او powerpoint slides باللغة العربية ايضا

يمكنك الإعتماد على المقال التالي: أيضًا قسم البرمجة بلغة PHP لمنصة ووردبريس ومن ضمنه المقالات التالية: وهنا ستجدي القسم الخاص بشروحات وورد بريس بالتصنيفات الفرعية أيضًا وهما WooCommerce و إدارة الشبكة على ووردبريس مُتعدّد المواقع https://academy.hsoub.com/apps/web/wordpress/

وعليكم السلام، من الواضح من الشيفرة التي قدمتها أنه يتم استخدام Cache Busting technique في الرابط الذي يحمل ملف الصوت، ولكن هذا لن يحل المشكلة بشكل كامل في حال كان لديك أكثر من سؤال يحتوي على ملف صوتي. يمكن حل هذه المشكلة بتغيير رابط ملف الصوت في كل مرة تنتقل فيها إلى سؤال جديد باستخدام JavaScript. في الصفحة التي تحتوي على الاختبار، يمكنك إضافة JavaScript الذي يقوم بتغيير رابط ملف الصوت عند التبديل بين الأسئلة. يمكنك القيام بذلك عن طريق إضافة معرف فريد لعنصر الصوت وتحديث الخاصية src في كل مرة تنتقل فيها إلى سؤال جديد. يمكنك القيام بذلك باستخدام الشيفرة التالية: // إنشاء متغير جديد للإشارة إلى عنصر الصوت var audioElement = document.getElementById('question-audio'); // إنشاء دالة لتحديث مصدر الصوت في كل مرة تتغير فيها الأسئلة function updateAudioSource() { // إستخراج رابط ملف الصوت الجديد من الأسئلة الحالية var audioSource = '{{ asset('audio/'.$questions[$currentQuestionIndex]->question_text) }}?v={{ $questions[$currentQuestionIndex]->updated_at->timestamp }}'; // تحديث خاصية src في عنصر الصوت audioElement.src = audioSource; // تشغيل الصوت audioElement.play(); } // استدعاء دالة updateAudioSource في كل مرة يتم فيها التبديل بين الأسئلة updateAudioSource(); يمكنك وضع هذا الكود في ملف JavaScript منفصل وتضمينه في صفحة الاختبار. يجب تحديث قيمة $currentQuestionIndex عندما يتم التبديل بين الأسئلة في متحكم Laravel Livewire الخاص بك. اذا استمرت المشكلة فيرجي مشاركة ملفات المشروع حتي يمكننا مساعدتك.

ما هي فائدة ال generator function في ال javascript والتي تكتب function* myFunction() {} وماذا يمكنني ان استفيد بها في العمل

قد يكون من المفيد استخدام الذكاء الأصطناعي في البحث عن حلول المشاكل وشرح مواضيع معينة وحل مشاكل الكود المستعصية، ولكن بالنسبة للمبتدئين فيفضل البحث بنفسك في التوثيقات الرسمية للغة والبحث في Google و Stack Overflow و قراءة المقالات لفهم المواضيع التي تريد، فهذا سيزيد معرفتك بشكل كبير حيث أنك في رحلة البحث عن حل للمشاكلك أو شرح لأحد المواضيع ستتعرض لكم كبير من المعلومات المفيدة وستطلع علي مواضيع لم تكن تعرف أنها موجودة وأفكار جديدة ستوسع مداركك وربما تتعلم شيء لا تحتاجة الآن ولكن في المستقبل ستجد أن ما تعلمتة قد أفادك وهذا ما سيقودك الي الإحتراف. علي عكس chatGPT والذي سيعطيك أجابة واحدة وقد لا تكون أفضل إجابة ممكنة. قم بالإطلاع علي هذه النقاشات قد تعطيك فكرة أفضل عن هذا الموضوع: https://io.hsoub.com/programming/141918-هل-حقا-الإستعانة-بمساعد-الذكاء-الإصطناعي-في-البرمجة-تجعل-الأكواد-غير-آمنة https://io.hsoub.com/tech/141784-مستقبل-المبرمجين-في-السنوات-القادمة-و-جحيم-الchatgpt

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

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

يمكن استخدام ChatGPT للحصول على مساعدة في البرمجة، ولكن ينبغي الانتباه إلى أنه يجب عدم الاعتماد عليها بشكل كامل في عملية التعلم. فعلى الرغم من أن ChatGPT يمكن أن يساعد في حل بعض المشاكل البرمجية وتوضيح بعض الجوانب الغامضة في البرمجة، إلا أنه لا يمكن أن يحل محل البحث الذاتي والتجريب في كتابة الشفرة وفهمها. بالإضافة إلى ذلك، ينصح بتعلم مهارات البحث الفعال في جوجل و Stack Overflow وغيرها من المواقع المتخصصة في البرمجة، حيث يمكن الحصول على معلومات شاملة وموثوقة ومفيدة لتعلم البرمجة وحل المشاكل البرمجية. إذا كنت تحتاج إلى مساعدة في فهم بعض المفاهيم البرمجية أو حل مشكلة برمجية معينة، فيمكن استخدام ChatGPT للحصول على توضيحات وإرشادات عامة. ولكن يجب عليك أن تحرص على فهم الحلول التي تحصل عليها ومحاولة تطبيقها بنفسك، وعدم الاعتماد عليها كحل نهائي دون فهم المبادئ الأساسية للبرمجة. ولا تستهون أبدًا بمهارة القدرة على البحث عن المعلومة وسط أكوام من النصوص والروابط، فهى مهارة تحتاج إلى وقت، وأيضًا عود نفسك على قراءة الـ Docs الخاصة بالمكتبات وأطر العمل التي تستخدمها. فمن خلال التجربة والخطأ ستتعلم الكثير، وعند صعوبة الوصول للمعلومة بعد البحث يمكنك سؤال ChatGPT لحل المشكلة، ويجب الإنتباه إلى أنه في بعض الأحيان يخطيء لذلك أنت بحاجة إلى أن تكون واعي وتقرأ الكود وتقوم بتجربته وتصحح له، لكنه مفيد حقًا مقارنًة بالخطأ الذي يحدث منه أحيانًا.

يمكن استخدام هذه التقنيات بشكل منفصل أو مجتمعة في التصميم، حسب الحاجة والغرض من التصميم. - Grid: تستخدم لتقسيم الصفحة إلى شبكة من الأعمدة والصفوف، وتسهل تنظيم المحتوى بشكل دقيق وسريع. يعتبر Grid أحدث تقنية في CSS لإنشاء تخطيطات مرنة وديناميكية. - Flexbox: تستخدم لتحديد اتجاه عرض العناصر داخل عنصر واحد أو على مستوى المستند بأكمله، مثل صف أو عمود. يساعد Flexbox في إنشاء تخطيطات مرنة وسهلة التعديل. - Float: تستخدم لتحديد موضع العناصر داخل عنصر واحد، حيث يتم تطبيق خاصية float على العنصر المطلوب نقله إلى جانب آخر. يستخدم Float بشكل أساسي في إضافة صور أو نص بجانب بعضها البعض. لا يوجد تقنية أفضل من الأخرى، فالاختيار يعتمد على طبيعة التصميم والغرض منه.

بالطبع يمكنك استخدام تقنيات CSS المختلفة مثل grid و flexbox و float معًا في تصميم واجهة المستخدم. ولكن يعتمد استخدام أي تقنية على المتطلبات التصميمية للمشروع والنتيجة المطلوبة. Grid: يستخدم Grid لتصميم الأشكال المعقدة ذات العديد من الصفوف والأعمدة، وهو مناسب لترتيب العناصر في شبكة من المستطيلات المتباينة الأحجام. Flexbox: يستخدم Flexbox لترتيب العناصر في صف أو عمود واحد، وهو مناسب لتصميم مكونات واجهة المستخدم الصغيرة والتعامل مع التنقلات. Float: يستخدم Float لتحديد توجه العناصر في الصفحة (اليمين، اليسار، الأعلى، الأسفل)، وهو مناسب لترتيب العناصر بشكل سطحي في الموقع. يمكن استخدام التقنيات المختلفة بشكل متداخل في تصميم واجهة المستخدم، مثل استخدام Grid لتقسيم الصفحة إلى مناطق مختلفة، واستخدام Flexbox لتنظيم عناصر المنطقة. بشكل عام، فإن استخدام الأداة المناسبة يعتمد على طبيعة ومتطلبات التصميم، ولذلك فمن المهم التعرف على مزايا وعيوب كل تقنية لاختيار الأداة الأفضل لتلبية احتياجات التصميم. بخصوص الأفضل بينهم؟ لا يوجد تقنية واحدة أفضل من الأخرى في CSS، فكل تقنية لها مزايا وعيوبها، ويعتمد استخدامها على متطلبات التصميم والمشروع الذي تعمل عليه. لكن حاليًا أصبح استخدام الـ float من الماضي وعليك استخدام flexbox أو Grid، فقط يمكنك فهم الـ Float أي كيف يعمل ولكن لا تركز عليه بشكل كبير. فمثلاً يعد Flexbox مفيدًا لتنظيم عناصر المستخدم على محاور واحدة (الأفقية أو العمودية)، بينما يعد Grid أفضل لتصميم شبكات متعددة الأعمدة والصفوف، مما يجعل الصفحات مرنة وسهلة القراءة والتنظيم.

شكرا معلوماتكم جميلة

لا، لا يوجد أي ضرر في استخدام وحدات الـvh والـvw بدلاً من وحدات الـpx في تصميم الويب، بالعكس، فإن استخدام هذه الوحدات يعتبر أكثر مرونة وسهولة في التعامل مع الأحجام والأبعاد المختلفة للعناصر على صفحة الويب، خاصة عند عرضها على شاشات مختلفة الحجم. عند استخدام وحدات الـpx، يتم تحديد الحجم بشكل ثابت وصلب، مما يعني أنه قد يؤدي إلى تشويش أو تشوه العناصر عند تغيير حجم الشاشة، خاصة عند استخدام شاشات ذات دقة عالية. أما عند استخدام وحدات الـvh والـvw، فإنها تعتمد على نسبة الحجم النسبي للعنصر إلى حجم الشاشة، وبالتالي فهي أكثر مرونة وتتكيف بشكل أفضل مع أحجام الشاشات المختلفة، مما يؤدي إلى تحسين تجربة المستخدم والوصول إلى تصميم يتناسب مع جميع الأجهزة والشاشات. ويمكنك أيضا استخدام وحدة الـrem و تستخدم لتحديد حجم الخطوط والمسافات والأبعاد في تصميم الويب، وهي وحدة نسبية تعتمد على حجم الخط المحدد للعنصر الأساسي في صفحة الويب (عادةً الجسم body). على سبيل المثال، إذا كان حجم الخط المحدد للجسم body هو 16 بكسل، فإن قيمة 1rem ستعادل 16 بكسل، وإذا تم تعيين حجم الخط لعنصر ما بقيمة 2rem، فسيكون حجم الخط هو 32 بكسل (2 × 16 بكسل). استخدام وحدة الـrem يتيح للمصممين تحديد الأحجام والأبعاد بشكل نسبي، مما يساعد على تعديل تصميم الويب بشكل أسهل وأكثر مرونة، خاصة عند تغيير حجم الشاشة أو عند استخدام شاشات مختلفة الحجم. كما أن استخدامها يجعل التعامل مع العناصر المتعددة في صفحة الويب أسهل وأكثر تنظيمًا. ومع ذلك، يجب أن يتم استخدام وحدة الـrem بحذر، حيث يمكن أن تؤثر بشكل كبير على تصميم الويب إذا تم تحديد القيم بشكل غير مناسب. لذلك، ينبغي أن يتم تحديد حجم الخط المحدد للجسم body بشكل جيد وفقًا لاحتياجات التصميم، كما ينبغي أيضًا تحديد قيم الـrem بحسب نسب محددة ومناسبة لكل عنصر في صفحة الويب. وحدة الـpx: يمكن استخدام وحدة الـpx لتحديد حجم العناصر الثابتة مثل الصور والإطارات والشعارات. مميزات: تستخدم لتحديد حجم العناصر الثابتة مثل الصور والإطارات والشعارات. سهلة الاستخدام والفهم. عيوب: هي وحدة ثابتة وصلبة ولا تتكيف بشكل جيد مع الشاشات ذات الأحجام المختلفة. يمكن أن تسبب مشاكل في تنسيق التصميم عند تغيير حجم الشاشة. وحدة الـvh والـvw: يمكن استخدام وحدة الـvh والـvw لتحديد حجم العناصر النسبية بناءً على حجم الشاشة مثل العناصر النصية وأبعاد الحاويات والعناصر المتغيرة بناءً على حجم الشاشة. مميزات: تستخدم لتحديد حجم العناصر النسبية مثل العناصر النصية وأبعاد الحاويات والعناصر المتغيرة بناءً على حجم الشاشة. تتكيف بشكل جيد مع الشاشات ذات الأحجام المختلفة. عيوب: يمكن أن تؤدي إلى تغيير حجم العناصر بشكل كبير عند تغيير حجم الشاشة بشكل مفاجئ، مما قد يؤثر على مظهر التصميم ويجعله غير قابل للقراءة. قد تكون صعبة الفهم للمبتدئين في تصميم الويب. وحدة الـrem: يمكن استخدام وحدة الـrem لتحديد حجم العناصر النسبية مثل العناصر النصية وأبعاد الحاويات والعناصر المتغيرة بناءً على حجم الخط الأساسي للصفحة. مميزات: تستخدم لتحديد حجم العناصر النسبية بناءً على حجم الخط الأساسي للصفحة. تتكيف بشكل جيد مع الشاشات ذات الأحجام المختلفة. تتيح للمستخدم تغيير حجم الخطوط في المتصفح بسهولة. عيوب: قد تكون صعبة الفهم للمبتدئين في تصميم الويب. يمكن أن يؤثر استخدامها على أداء الموقع إذا استخدمت بشكل غير صحيح. عادةً ما يتم استخدام مزيج من هذه الوحدات في التصميم لتحقيق التوازن بين تحديد حجم العناصر بشكل دقيق ومرونة التصميم لتتكيف مع الشاشات المختلفة.

يعتبر استخدام ال px ليس أفضل شئ ولكن لا يمكنك استخدام ال vh و vw دائماً في جميع التنسيقات ومن مميزات استخدام vh و vw بدلا من الpx هي: تجعل الموقع متجاوب مع أي حجم شاشة. تسهل عملية التخطيط والتنسيق للعناصر. تحافظ على نسبة ثابتة بين الارتفاع والعرض. بينما من عيوب استخدام vh و vw بدلا من الpx هي: قد تحتاج إلى استخدام وحدات أخرى للتحكم في الحجم الأدنى أو الأقصى. قد تواجه مشاكل في التوافق مع بعض المتصفحات. قد تؤثر على قراءة المحتوى في بعض الأجهزة. يفضل استخدام وحدات القياس rem في تصميم المواقع، يجب أن تعرف أن rem هي وحدة نسبية تعتمد على قيمة font-size للعنصر الأساسي (الجذري)، وهو عنصر الـ html1. بشكل افتراضي، تساوي قيمة font-size للعنصر الأساسي 16px1. لذلك، إذا كتبت: p { font-size: 2rem; } فهذا يعني أن حجم خط الفقرة سيكون ضعف حجم خط العنصر الأساسي، أي 32px1. إذا أردت تغيير قيمة font-size للعنصر الأساسي، يمكنك كتابة: html { font-size: 20px; } وهذا سيؤثر على جميع العناصر التي تستخدم وحدة rem في حجم خطها1. الفائدة من استخدام وحدات rem هي أنها تجعل الموقع متجاوب مع تغير حجم شاشة المستخدم، وتسهل التحكم في حجم خط جميع العناصر بشكل موحد لذلك يعتبر استخدام الوحدات القياسية يختلف بحسب العناصر والتنسيقات المطبقة عليها فمثلاً ربما تحتاج لتحديد العرض لعنصر ما بنص قيمة العرض للعنصر الأب فتستخدام النسبة المئوية أفضل لذلك كل وحدة قياس مناسبة حسب التنسيقات والعناصر الموجودة ولكن من أكثر وحدات القياس التي تقوم باستخدامها هي ال rem

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

لا يوجد مشكلة في إستخدام vh و vw , فكرة الvh والvw هي أن يكون العرض والإرتفاع متناسب مع طول وعرض النافذة مما يساعد على جعل التصميم مُتجاوب , فإن هذا بالفعل هو إستخدامهما لذا ما تقوم به صحيح ولا يوجد فيه مشكلة

سأوضح لك Flexbox بشكل بسيط وسهل مع توضيح ذلك بالأكواد. أولاً شرح Flexbox بشكل مختصر في البداية Flexbox هي تقنية CSS تستخدم لتنسيق وترتيب العناصر داخل الصفحة. تم تصميم Flexbox لتسهيل تنسيق العناصر داخل العناصر الأساسية مثل العناصر المتداخلة، والأزواج، والأعمدة، والأرقام. يمكن استخدام Flexbox لتنسيق العناصر على محور واحد أو عدة محاور في نفس الوقت. يتم تحديد ترتيب وموقع العناصر في Flexbox باستخدام خصائص CSS مثل display وflex-direction وjustify-content وalign-items وغيرها. فيما يلي مثال بسيط على استخدام Flexbox لترتيب العناصر على محور واحد: <div class="flex-container"> <div class="box1">Box 1</div> <div class="box2">Box 2</div> <div class="box3">Box 3</div> </div> <style> .flex-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .box1, .box2, .box3 { background-color: lightblue; padding: 10px; margin: 10px; flex: 1; } </style> في المثال السابق، تم استخدام Flexbox لترتيب العناصر على محور واحد (المحور الأفقي) باستخدام الخصائص display: flex و flex-direction: row. تم توزيع العناصر على المحور الأفقي باستخدام justify-content: space-between لترك فراغ بين الصناديق 1 و 2 و 3. تم تحديد موضع العناصر على المحور الرأسي باستخدام align-items: center. لاحظ أن العناصر الثلاثة (box1 و box2 و box3) لديها خاصية flex: 1 التي تحدد نسبة الفضاء المتاح لكل صندوق داخل العنصر المرن. هذا يساعد على توزيع العناصر على المحور الأفقي بشكل متساوٍ. أدوات لاستخدام وفهم flexbox بشكل سهل وبسيط عليك باستخدام الموقع التالي إذا كنت تريد فهم خصائص flexbox حيث يعرض خصائص flexbox على هيئة صور متحركة لتبيان ماذا تفعل كل خاصية، فضع ذلك الموقع أمامك وأنت تستخدم flexbox وستجد نفسك قد فهمته بسهولة. https://flexbox.malven.co/ وأيضًا هناك بعض ألعاب المتصفح التي غرضها تعليمك كيفية استخدام فليكس بوكس من خلال لعبة مسلية، وإليك بعضها: https://flexboxfroggy.com/ https://codingfantasy.com/games/flexboxadventure شرح Flexbox بشكل مفصل طريقة استخدام Flexbox تشمل العديد من الخصائص التي يمكن استخدامها لتنسيق العناصر وترتيبها في المساحة المتاحة. فيما يلي شرحًا لجميع الخصائص الخاصة ب Flexbox بالإضافة إلى أمثلة على استخدام كل منها. 1- display خاصية display تحدد نوع عرض Flexbox. يمكن تعيينها إلى القيمة flex لعرض Flexbox. ويمكن تعيينها إلى inline-flex لعرض Flexbox على نفس سطر النص. .flex-container { display: flex; } 2- flex-direction خاصية flex-direction تحدد توجه العناصر داخل Flexbox. يمكن تعيينها إلى row لتوجيه العناصر أفقيًا، وإلى column لتوجيهها عموديًا. ويمكن استخدام row-reverse أو column-reverse لتوجيه العناصر بالاتجاه المعاكس. .flex-container { display: flex; flex-direction: row; } 3- flex-wrap خاصية flex-wrap تحدد ما إذا كانت العناصر في Flexbox يجب أن تنتقل إلى السطر التالي إذا كانت المساحة غير كافية. يمكن تعيينها إلى nowrap لعدم السماح بالتعبئة الزائدة، وإلى wrap للسماح بالتعبئة الزائدة وانتقال العناصر إلى السطر التالي. .flex-container { display: flex; flex-wrap: wrap; } 4- justify-content خاصية justify-content تحدد توزيع العناصر على محور Flexbox. يمكن تعيينها إلى flex-start لتوزيع العناصر على بداية المحور، وإلى flex-end لتوزيعها على نهاية المحور، وإلى center لتوزيعها على وسط المحور، وإلى space-between لتوزيعها بتساوٍ على المحور، وإلى space-around لتوزيعها بالتساوي مع توفير مساحة إضافية حول كل عنصر. .flex-container { display: flex; justify-content: center; } 5- align-items خاصية align-items تحدد توزيع العناصر على محور عمودي متعامد على محور Flexbox. يمكن تعيينها إلى flex-start لتوزيع العناصر على بداية المحور العمودي، وإلى flex-end لتوزيعها على نهاية المحور العمودي، وإلى center لتوزيعها على وسط المحور العمودي، وإلى baseline لتوزيعها على خط الأساس للنص، وإلى stretch لتوسيع العناصر لتملأ المساحة العمودية بأكملها. .flex-container { display: flex; align-items: center; } 6- align-content خاصية align-content تحدد توزيع العناصر الإضافية في الفراغ الإضافي على محور عمودي متعامد على محور Flexbox عند استخدام التعبئة الزائدة. يمكن تعيينها إلى flex-start لتوزيع العناصر على بداية المحور العمودي، وإلى flex-end لتوزيعها على نهاية المحور العمودي، وإلى center لتوزيعها على وسط المحور العمودي، وإلى space-between لتوزيعها بتساوٍ على المحور، وإلى space-around لتوزيعها بالتساوي مع توفير مساحة إضافية حول كل عنصر، وإلى stretch لتوسيع العناصر لتملأ المساحة العمودية بأكملها. .flex-container { display: flex; flex-wrap: wrap; align-content: center; } 7- flex-grow خاصية flex-grow تحدد قدرة العنصر على التوسع في المساحة المتاحة. يمكن تعيينها إلى أي عدد صحيح (عادةً ما تستخدم قيم 0 و 1) ، حيث يتم توزيع المساحة المتاحة بالتساوي على جميع العناصر الذين يحملون هذه الخاصية بنسبة تناسبية مع قيمتها. .flex-item { flex-grow: 1; } 8- flex-shrink flex-shrink تحدد قدرة العنصر على الانكماش في حالة اضطراره لتقليص حجمه بسبب الفراغ المتاح لمجموعة Flexbox. يمكن تعيينها إلى أي عدد صحيح (عادةً ما تستخدم قيم 0 و 1) ، حيث يتم توزيع المساحة المتاحة بالتساوي على جميع العناصر الذين يحملون هذه الخاصية بنسبة تناسبية مع قيمتها. على سبيل المثال، عندما تقلل المساحة المتاحة، فإن العناصر التي تحمل القيم الأعلى ستتقلص بشكل أسرع من العناصر التي تحمل القيم الأقل. .flex-item { flex-shrink: 1; } 9- flex-basis خاصية flex-basis تحدد الحجم الأولي للعنصر قبل توزيع المساحة الإضافية المتاحة بين العناصر الموجودة في Flexbox. يمكن تعيينها إلى القيمة التي تعبر عن العرض أو الارتفاع، مثل 200px أو 50%. يمكن استخدام auto لتحديد حجم العنصر بناءً على حجم محتواه الفعلي. .flex-item { flex-basis: 100px; } 10- flex flex هي اختصار لثلاث خصائص flex-grow وflex-shrink وflex-basis بالترتيب. يمكن استخدامها بدلاً من تعيين الخصائص بشكل منفصل. يتم تحديد القيم المستخدمة في الاختصار كقيمة واحدة أو اثنين أو ثلاثة. على سبيل المثال، القيمة flex: 1 تحدد الخصائص flex-grow: 1 و flex-shrink: 1 و flex-basis: 0 للعنصر. .flex-item { flex: 1 0 auto; } وبذلك إنتهينا من أهم الخصائص المستخدمة في Flexbox، والتي يمكن استخدامها لتنظيم وتحكم في توزيع العناصر وتحديد موقعها في الصفحة. مصادر