لوحة المتصدرين
المحتوى الأكثر حصولًا على سمعة جيدة
المحتوى الأعلى تقييمًا في 03/12/24 في كل الموقع
-
السلام عليكم. يتم إنشاء عنصر HTML واحد في الصفحة, ثم باقي الكود يتم توليده عبر فانيلا جافا سكريبت, كمثال: <div class="root"> // الكود هنا يتم توليده بجافا سكريبت </div> هل هذه الممارسة تعتبر من الممارسات الجيدة أم لا؟ أعلم أن أطر العمل تستخدم هذه الممارسة, لكن ماذا عن استخدامها خارج هذه الأطر3 نقاط
-
وعليكم السلام ورحمة اله وبركاته .رمضان مبارك علينا جميعا، نعم بالفعل توجد طريقتان تمكنك من تنفيذ ذلك . اول طريقة وهى فى نظرى معقدة بالنسبة لما تريد تنفيذه . وهى استخدام خاصية clip-path فى css وهى تسمح لك بقص الصورة واظهار جزء فقط منها ولكنها تحتاج ان تمرر لها القيم التى تريد ان تقص منها . clip-path: polygon(99% 0, 98% 18%, 96% 38%, 98% 60%, 97% 82%, 94% 100%, 0 100%, 0% 43%, 0 0); يمكنك استخدام تلك القيمة . وهذا رابط لموقع يمكنك من خلاله تجربة القيم التى تريدها . والطريقة الثانية هى خاصية mask وهى تمكنك من وضع صورة فوق صورة ودمجهم فيجب ان تكون الصورة التى فى ال mask تحتوى على لونين لون اسود او ابيض ومن خلال الخاصية mask سيتم دمج الصورتين واظهار المكان فى الصورة الاصلية الذى بالاسود واخفاء الجزء الذى بالابيض وهذه الصورة توضح ما اقصد. <!DOCTYPE html> <html> <head> <style> .mask1 { -webkit-mask-image: url(w3logo.png) ; mask-image: url(w3logo.png); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } </style> </head> <body> <h1>The mask-image Property</h1> <h3>An image with a mask layer image:</h3> <div class="mask1"> <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400"> </div> <h3>Original image:</h3> <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400"> <h3>Mask image:</h3> <img src="w3logo.png" alt="Cinque Terre" width="" height=""> </body> </html> وهذا هو الكود الخاص بها يمكنك التعديل عليه و تجربته ولكن سيتوجب عليك تعديل الصورة zigzag حيث يجب ان تجعل الجزء الايمن منها كله بالابيض حتى تعمل معك هذه الطريقة.
2 نقاط -
اين اجد القران الكريم دون حقوق الطبع والنشر1 نقطة
-
اريد وضع الكلام المكتوب ب lorem تحت الصور وليس فوقها مثل في الصوره
1 نقطة -
لقد قمتم بشرح كونسول بلاي مطورين في دورة ادراة المنتجات. سؤالي هو ان فريق كونسول مطورين بلاي يعملون على تغيير سياسات مخالفه لمطورين تطبيقات الموبايل كل وقت وحين سؤالي هو هل انتم تواكبون هذا التغيير وتكونوا على متابعه لهذه التغييرات لسياسات جوجل بلاي مطورين ومن ثم تقومون بشرحها في محتوى دورة ادراة المنتجات لكي تنقذوا المطورين من اغلاق حساباتهم في كونسول بلاي مطوين تطبيقات الموبايل حيث هذه النقطه مهمه في غايه الاهميه يجب التركيز عليها فريق اكاديميه حسوب حيث في عام 2024 نزلت تغييرت كثيره منها اختبار تطبيقات الموبايل وما الى ذلك ارجوا الاهتمام بهذه النقاط غايه الاهتمام ولكم منا جزيل الشكر والتقدير1 نقطة
-
السلام عليكم ورحمة الله وبركاته ، الله يعطيكم العافيه 🌹 ، اخواني انا عندي سؤال ان شاء الله احصل له اجابه بحثت في كل مكان ولم اجد له حل ولم اجد من يعطيني الفكرة الاساسية بس ، كيف اربط الاسكرول بحركة العناصر بحيث اذا ( مثلاً كنت انزل في الصفحة اذا وصلت الى طول الصفحة 700px يبدأ عنصر يتحرك بنائاً على keyframes ويبدأ يدخل الى الصفحة من جهة اليمين ولنفترض يتغير لونه ويدور حول نفسه واذا وصل الى طول صفحة 800px يخرج من جهة اليسار واذا ذهبت الى اعلى الصفحة ووصلت الى طول صفحة 800px يبدأ العنصر يدخل من جهة اليسار ويرجع الى ادراجه ) اتمنى وصلت الفكرة ، اظن يسمى ( التحكم السلس ) اثق في مجتمع اكاديمية حسوب لإجاد الحل ❤️❤️. وشكراً امثله على شرحي هذا الموقع ملاحظة انا ابتعد عن استخدام المكتبات لأن لا يوجد لها شرح عربي واريد فهم الفكرة لوحدها1 نقطة
-
وعليكم السلام ورحمة الله وبركاته. هذه الطريقة ليست جيدة و تحتوى على كثير من المشاكل . اولا بالنسبة للارشفة ومواقع البحث SEO فان هذه الطريقة ليست جيدة لانها تعتمد على المتصفح الخاص بالمستخدم ومواقع البحث لا تقوم بفتح الموقع ولكن تكتفى بالرد الذى ياتى من الخادم وبذلك فانها سترى ان محتوى الصفحة هو div فارغ . ثانيا بالنسبة لسرعة التنفيذ فان هذه الطريقة ستسبب بطئ شديد اذا تم استخدامها بطريقة خاطئة فان كنت تستعمل فانيلا جافا سكريبت للتعامل مع ال DOM مباشرة فان حذف عنصر او اضافة عنصر او حتى تعديله فانه سيتسبب فى اعادة بناء ال DOM من جديد واذا كان محتوى الصفحة كبير فان تكلفة اعادة البناء عالية وستزعج المستخدم حيث سيلاحظ بطئ التصفح على الموقع . واطر العمل تعتمد على Virtual DOM وهى اسرع من ال DOM . وايضا من الممكن ان تسبب ثغرات فى الموقع اذا كان الكود كبير ومعقد واذا حدث خطأ فليس من السهل تصحيحه.1 نقطة
-
لا مشكلة في ذلك، فبتلك الآلية تعمل مكتبة React، لكن يجب أن تكون على دراية بما تفعله، فمكتبة مثل React تم تطويرها على مدار سنوات وإختبارها في كافة أنواع المشاريع وبمختلف الأحجام والتعقيد. لذا بشكل صريح مهما فعلت لن تصل لنفس الجودة والأداء لمكتبة أو إطار تم تطويره واستخدامه على مدار سنوات. لذا من الأفضل أن تستخدم مكتبة React أو أحد الإطارات الأخرى الخاصة بالواجهة الأمامية مثل Angular و Vue.js. وإذا كان أمر الـ SEO مهم بالنسبة لك إذن استخدم NEXT.JS.1 نقطة
-
وعليكم السلام في البداية ان استخدام توليد اكواد الجافا سكريبت بطريقة ديناميكية له العديد من المميزات ولكن كثرتها وعدم استخدامها بشكل صحيح قد يولد العديد من المشاكل كمان ان كثرة استخدامها ممكن ان يسبب بطئ في عملية تحميل الصفحة والان دعني اعطيك اهم ايجابيات وسلبيات استخدامها الايجابيات : يمكن استخدام التوليد الديناميكي لإنشاء تجارب مستخدم متفاعلة وديناميكية. يمكن تجنب تحميل محتوى غير ضروري مما يقلل من وقت تحميل الصفحة وبالتالي سرعة في تحميل الصفحة. يمكن استخدام التوليد الديناميكي لتحميل البيانات من الخوادم بشكل ديناميكي دون إعادة تحميل الصفحة. يمكن تحديث المحتوى والتعديل عليه بسهولة من دون الحاجة إلى تغييرات في الصفحة الأساسية. السلبيات : قد يؤدي استخدام التوليد الديناميكي للمحتوى إلى زيادة في وقت تحميل الصفحة وتأخير في عرض المحتوى. قد تواجه مشاكل في التوافق مع بعض المتصفحات القديمة أو المتصفحات التي لا تدعم بعض ميزات JavaScript الحديثة. قد تكون التجارب المتعددة المستخدمة في التوليد الديناميكي معقدة وصعبة الفهم لبعض المستخدمين. قد تحتاج إلى تحميل مكتبات JavaScript إضافية لدعم التوليد الديناميكي، مما يزيد من حجم الموارد المطلوبة للصفحة. لذلك ان استخدام التوليد الديناميكي للمحتوى بواسطة JavaScript يمكن أن يكون أداة قوية لتحسين تجربة المستخدم وتحسين أداء الموقع، ولكن يجب استخدامها بحكمة وفقًا لاحتياجات المشروع وظروفه. بالتوفيق لك1 نقطة
-
ما هي طريقه تغير الابعاد لل div1 نقطة
-
هذا الأمر يمكن القيام به باستخدام JavaScript في صفحة الويب. الشيء الأساسي في مثل هذه التطبيقات هو التنصّت على الحدث scroll، وفي الدالة التي تقوم بعمليّة التنصّت يمكنها قراءة الخصائص window.scrollY و window.scrollX لمعرفة مقدار الإزاحة الحالي. بناء على هذا المقدار، يمكنك تحريك أو تغيير لون أو حجم أي عنصر في الصفحة بتعديل خصائص CSS التي يمكن الوصول إليها من JavaScript. العنصر الذي يمكن تحريكه يجب أن يكون لديه تموضع مطلق (absolute). إنشاء كود مثل هذا قد يحتاج تفكيرا وعملا، لذلك توجد مكتبات تسهل هذا، لكن إذا كنت تريد نقطة انطلاق فإليك هذا الكود الذي قمت بكتابته، والذي يحرك عنصرا بشكل عشوائي (ليس لدي وقت للتفكير في كيفية فعل هذا بشكل أحسن، يمكنك أن تتدرب على تحسينه إن أردت): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>replit</title> <style> html { height: 100%; width: 100%; } .movable { border: 1px solid gray; border-radius: 0.5em; box-shadow: 0em 0em 0.2em black; padding: 0.5em; width: fit-content; background-color: lightgray; color: cornflowerblue; } </style> </head> <body> <p class="movable">Hello world</p> <script> for (var i=0; i<100; i++) { p = document.createElement("p") p.innerText = "Test text " + i document.body.appendChild(p) } movable_p = document.getElementsByClassName('movable')[0] movable_p.style.position = 'absolute' movable_p.style.left = '10px' movable_p.style.top = '10px' window.addEventListener('scroll', function() { movable_p.style.left = (Math.random() * 0.5 * window.innerWidth - movable_p.clientWidth / 2 ) + 'px' movable_p.style.top = (Math.random() * 0.5 * window.innerHeight - movable_p.clientHeight / 2) + 'px' }) </script> </body> </html>1 نقطة
-
السلام عليكم ورحمه الله وبركاته وبعد رمضان مبارك عليكم جميعا، لدي استفسار لدي تصميم لsection في الصورة التي في المرفقات، الديزاين مكون من صورة illustration, ligh blue background و صورة zigzag (تبدو كانها شيء ممزق) المهم اني حاولت ان عمل تصميم الصورة الممزقة باستخدام الpsuedo code و لل parent div خصائص css مثل background-image , background color و لكن لا اعرف كيف ادمج الصورة الممزقة مع صورة الخلفية الزرقاء كما في الصورة الثانية المرفقة، هل احد يعلم ما هي الproperty التي من الممكن ان تجعل الصورة الممزقة تندمج مع الصورة ذات الخلفية الزرقاء؟
1 نقطة -
واياكم اللهم امين اخى الغالى1 نقطة
-
جزاك الله خيرا اخ محمد عاطف1 نقطة
-
وعليكم السلام، إذا كنت تقصد جعل الجزء الممزق أبيضا بدل أن يكون شفافا كما في الصورة الثانية، فلا أظن أنه يمكنك القيام بذلك باستخدام CSS لأن لغة CSS تتعامل مع عناصر HTML باعتبارها صناديق مستطيلة الشكل، فلا يمكنها دعم مثل هذا الشكل المتعرّج. أسهل طريقة لحل هذا المشكل هي أن تقوم باستخدام برنامج لتعديل الصور وتضيف خلفية بيضاء في الجزء التابع للورقة بدل أن تبقى الخلفية شفافة.1 نقطة
-
بيستخدم الأمر SET @r1 = 0 في استعلامات SQL لتعيين قيمة المتغير المؤقت @r1 إلى 0 شرح مفصل لجمله كامله SET: كلمة رئيسية تدل على تعيين قيمة. @r1: اسم المتغير المؤقت. =: مشغل تعيين. 0: القيمة التي يتم تعيينها للمتغير بيستخدم هذا الأمر بكثره في استعلامات SQL المعقدة التي تتضمن حسابات متعددة. يمكن استخدامه لتخزين القيم الوسيطة لإعادة استخدامها لاحقًا في الاستعلام مثال لو فيه جدول يحتوي على أسماء الطلاب ودرجاتهم. و تريد العثور على الطلاب الذين حصلوا على أعلى 10 درجات. يمكنك استخدام استعلام SQL التالي SELECT Name FROM Students ORDER BY Score DESC LIMIT 10; سيقوم هذا الاستعلام بترتيب الطلاب حسب الدرجة تنازليًا وإرجاع أسماء أفضل 10 طلاب. طيب لو كنت تريد أيضًا معرفة متوسط درجة الطلاب في أعلى 10 يمكنك استخدام استعلام SQL التالي: SET @total_score = 0; SET @count = 0; SELECT Name, Score FROM Students ORDER BY Score DESC LIMIT 10; WHILE @count < 10 DO SET @total_score = @total_score + Score; SET @count = @count + 1; END WHILE; SET @average_score = @total_score / @count; SELECT @average_score AS AverageScore; في هذا المثال، يتم استخدام المتغيرين المؤقتين @total_score و @count لتخزين القيم الوسيطة التي يتم استخدامها لاحقًا لحساب متوسط الدرجة1 نقطة
-
استخدام findOrFail($id) بدلاً من find($id) يعتبر عملية جيدة في بعض الحالات وذلك لضمان أمان التطبيق والتعامل مع الأخطاء بشكل أفضل. ولكن يجب توضيح الفرق بين الاثنين: User::find($id) تلك الطريقة تقوم بالبحث عن سجل في قاعدة البيانات باستخدام المفتاح الرئيسي للجدول (وغالبًا ما يكون الـ ID)، وإن وجد السجل، فيتم إرجاع السجل نفسه، وإذا لم يتم العثور عليه، فيتم إرجاع قيمة null. User::findOrFail($id) نفس عملية البحث السابق، ولكن في حالة عدم العثور على السجل، فيتم برفع استثناء من نوع ModelNotFoundException، وذلك يعني أنه إذا لم يتم العثور على السجل، يتم رمي استثناء وتوقف تنفيذ البرنامج، مما يتطلب التعامل مع الاستثناء في الكود. السبب الرئيسي لاستخدام findOrFail($id) هو تجنب الحصول على قيمة null ومعالجة تلك القيمة في حالة عدم وجود السجل المطلوب في قاعدة البيانات، وعند استخدام findOrFail($id)، تستطيع ببساطة التعامل مع الاستثناء المرتبط في الكود، مما يسهل تحديد الأخطاء والتعامل معها بشكل أفضل. إذا قمت بتعيين APP_DEBUG=true في ملف .env، فذلك سيساعدك في رؤية الأخطاء والاستثناءات التي تم رفعها، ولكن لا ينصح بالاعتماد على ذلك الإعداد في بيئة الإنتاج، حيث سيكشف عن معلومات حساسة. أي بإختصار، سيتسبب استخدام User::find($id) في تلقي المستخدمين خطأً 500 ، مما قد يكشف عن بيانات غير مقصودة، وسيتسبب استخدام User::findOrFail($id) في تلقي المستخدمين خطأ 404 ، والذي يعد أكثر أمانًا. بالإضافة إلى ذلك ، فإن استخدام User::findOrFail($id) سيساعد على منع الأخطاء التي قد تحدث إذا لم يكن المستخدم موجودًا، وإذا استخدمت User::find($id) ولم يكن المستخدم موجودًا ، فستتلقى خطأً 500. مما يؤدي إلى توقف API الخاص بك عن العمل، وسيكون من الصعب تحديد سبب المشكلة، وسيتسبب استخدام User::findOrFail($id) في تلقي خطأ 404 ، مما سيسهل تحديد سبب المشكلة وإصلاحها.1 نقطة
