Adnane Kadri

توجد مكتبة Dropzone.js أظنها الأفضل والأكثر شيوعا، تمتلك حتى جزء خاص بالتلاعب مع الملفات على مستوى الخادم، تثبت عن طريق: npm install --save dropzone او عن طريق تضمين الملفات المصدرية: <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" /> ثم تمرير معرف العنصر المستهدف الى التابع الباني الخاص بهاته المكتبة: let myDropzone = new Dropzone("div#myId", { url: "/file/post"}); تعرف عن المكتبة اكثر من خلال التوثيق الخاص بها.

من المهم جدا الاستعانة بنافذة الطرفية console لتشخيص الأخطاء والعمل عليها. في codepen يمكن الوصول اليها عن طريق الضغط على تبويبة console في الشريط السفلي. عند التبديل بين خيارات القائمة المسندلة يظهر الخطأ: Uncaught ReferenceError: actor is not defined وذلك لأن الوظيفة actor المسندة لحدث onchange: <div class="tagrba" onchange="actor(this.Valuo)"> <h2 id="h2"> </h2> </div> غير معرفة فهي موجودة في شيفرة الجافاسكربت كـ actore (انتبهي الى الخطأ في this.Valuo ايضا، هل تقصدين this.value؟) أيضا، راجع اسناد وظيفة الى حدث onchage خاصة بعنصر div من الاساس. سيضل الخطأ Uncaught ReferenceError: actore is not defined يظهر رغم اصلاح المشكلة، وهذا لأن الوظيفة actore معرفة بشكل محلي داخل الوظيفة get. لا يمكن استدعاءه من خارجها. لاصلاح المشكلة قم باخراجها الى ما قبل او بعد الوظيفة get: async function get() { const apiLink = await fetch("https://www.breakingbadapi.com/api/characters") const data = await apiLink.json() document.querySelector(".tagrba").innerHTML += `<h1>${data[3].name}</h1>` document.querySelector(".tagrba").innerHTML += ` <select onchange="actore(this.Value)"> ${data.map (item => `<option> ${item.name}</option>` )} </select> ` } get(); function actore(e) { console.log(e); }

بشكل بسيط، يمكنك اسناد وظيفة تشغيل الصوت الى حدث الضغط على الزر. نشغل الصوت عن طريق الجافاسكربت بشكل عادي كـ: let audio = new Audio("/audio.mp3") ثم الحدث start: const start = () => { audio.play() } وأخيرا استهداف الحدث onClick: <button onClick={start}>Play</button> يكون كاملا: import React from 'react'; function App() { let audio = new Audio("/audio.mp3") const start = () => { audio.play() } return ( < div > <button onClick={start}>تشغيل</button> </div > ); } export default App;

يمكنك استعمال التابع parse بفعالية. حيث يتيح طريقة لاستخراج عدد الثواني بين تاريخ معين و أول جانفي 1970 الساعة 00:00:00. بعد هذا ستحتاج طرح تمثيل الوقت الحالي من التمثيل الناتج، ان كان الناتج موجبا فان الناتج من الماضي. let d1 = Date.parse(your_datestring); let d2 = Date.parse(new Date()); console.log(d2 - d1) في مثل الحالة التي لديك لا تنسى تحويل datetime الى datestring فيكون كاملا: let d1 = new Date('2022-10-01T00:12:10.19Z').toDateString(); d1 = Date.parse(d1); let d2 = Date.parse(new Date()); console.log(d2 - d1) الناتج: -2088323000 تعبر الاشارة عن ان التاريخ من المستقبل. الكائن Date في JavaScript

يمكنك ايضا باستعمال مكتبة moment.js الاستعانة بالتابع diff لتحديد فرق الايام بين تاريخ وآخر. مثال: var a = moment([2022, 1, 1]); var b = moment([2023, 1, 1]); a.diff(b) // الفرق بالثواني a.diff(b ,'days') // الفرق بالأيام بالطبع فان هذا يقتضي تضمين الملف المصدري للحزمة: <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

البصمة ما هي إلا واحدة من البيانات البومترية biometric data. التي ستحتاج لهذا الغرض استخراجها بطريقة ما وتشغيلها في عمليات المصادقة. يوجد مثلا حزمة DarkGhostHunter/Larapass التي تم ارشفتها واستبدالها بـ Laragear/WebAuthn. تحتوي هاته الحزمة على واجهة تطبيق برمجية من تشكيلة من التوابع في الجافاسكربت للتعامل مع هاته البيانات على مستوى المتصفح. وواجهة برمجية كاملة للتعامل مع عمليات المصادقة ككل وليس فقط تحليل هاته البيانات. قد تكون ما تبحث عنه.

ضع في اعتبارك ان هاته الحلقات ليس الا آداة لتكرار كتلة برمجية معينة عددا من المرات وفق شرط معين او اعتبارا لشيء ما. يمكن تمييز كل تكرارة من الحلقة بفهرس يميزها عن غيرها. فالحلقة الاولى تمتلك فهرسا 0 والثانية 1 والثالثة 2 الى ان ينقضي التكرار او ينتفي شرطه. فمثلا يوجد: الحلقة for التي تقوم بتكرار الكتلة البرمجية من اجل قيمة متغير ما. for(var i = 0 ; i < 5 ; i++) { // اي كتلة برمجية } الحلقة while التي تقوم بتكرار الكتلة البرمجية باعتبار شرط ما، فطول ما كان الشرط محققا يتم تكرار التنفيذ. var i = 1; while(i < 5 ) { // كتلة برمجية } تتبع هاته الحلقات غالبا ما يكون عن طريق الفهرس الذي يميز كل تكرارة. فقد تحتاج مثلا تتبع قيمة ما يتم تجاوز قيمتها من داخل التكرار. هنا ستكون طباعة هاته القيمة داخل الحلقة بجانب الفهرس الخاص بهاته التكرارة عمليا. لا اظن انه يوجد طريقة معينة لاحتراف هذا المفهوم، وانما يجب فهمه واستيعابه جيدا والخروج للتطبيق العملي ومصادفات حالات استخدام تتطلب استعمال الحلقات.

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

كنت لأختار استعمال التجميعة الاولى كونها صديقة لمحركات البحث أكثر من الثانية، خصوصا ان الموقع موقع شخصي سيعتمد على حظه وظهوره في نتائج محركات البحث. فباعتمادك على جافاسكربت كليا (React) سيقوم الموقع ببناء او تصيير المكونات والصفحة بعد طلبها من قبل المتصفح فقط، بمعنى أن هاته العناصر والمكونات لن تتم فهرستها من قبل محركات البحث. وللتخلص من هاته المشكلة قد تحتاج الاعتماد على مفهوم التصيير على الخادم SSR او التصيير المسبق Pre rendering وهي مفاهيم خارجة عن سياق تطوير الواجهات الامامية فأنت ستحتاج معرفة بـ NodeJS و اطار عمل مثل NextJS.

لا يمكن حصر الموضوع في بضعة طرق فالمواقع الشخصية تعبر عن أشخاص او شركات او مؤسسات ولكل منها ما يميزها بشكل يتطلب الاشارة اليه بها في هاته المواقع، قم بالبحث بشكل اكثر تخصيصا. فبدل البحث عن portfolio websites examples قم بالبحث عن portfolio websites for front end developers examples او web designer portfolio website . بعد استلهام افكار منها يمكنك الانطلاق في بناء موقع شخصي، إما بمحتوى مشابه او هيكلة او تصميمين مشابهين. وبالطبع يمكنك اضافة لمساتك الخاصة التي تظن انها تميزك دون غيرك. فيما يلي بعض الخطوات التي قد تساعدك: قم بتحديد المحتوى الذي تريد الاشارة اليه في موقعك. (مثال: نبذة عامة، الخبرات، الدراسة، الأعمال السابقة، شهادات عملاء، قسم للمراسلة) استلهم افكارا بخصوص التصميم والهيلكة بخصوص كل جزئية بدل استلهام الشكل العام للموقع فقط. سيعطي هذا لمسة خاصة تميز كل مكون دون ان يخرج عن نمط البقية. (مثال: ابحث عن امثلة عن نماذج اتصل بنا في الانترنت، او عن امثلة عن قسم شهادة العملاء) لا تتكلف كثيرا وركز على تجربة الاستخدام، فالزوار او العملاء غالبا لن يقوموا بقراءة كامل ما ستشير إليه. ركز على دلالية العناصر والألوان وتموضعها. وعلى ما قل ودل من النصوص والكلام.

ان كنت تنوي تطبيق الخاصية scroll-behavior على كامل العقد الفرعية لعنصر body فيجب اضافة ذلك في عنصري body,html وسيتم التقاطها من قبل كامل العناصر: body , html { scroll-behavior: smooth; } تأثيرات التمرير في صفحات الويب باستخدام Javascript وCSS

لما لا تستعمل querySelectorAll مرفقة بذات المحدد *؟ var nodes = document.querySelectorAll('*'); nodes.forEach(node => { console.log(node) }) Document.querySelectorAll()‎

توجد هنالك واجهة برمجية كاملة تخص السحب والافلات في جافاسكربت، تأتي بمجموعة من الأحداث يمكن بناءا عليها تحريك العناصر وفق شكل ما. نذكر: drag: حدث سحب العنصر. dragend: حدث نهاية سحب العنصر. dragstart: حدث بداية السحب drop: حدث افلات العنصر مثلما يوجد الأحداث dragenter، dragleave و dragover يجب اولا تعريف الخاصية draggable واسناد القيمة true لها في html . مثال عملي: نقوم بتعريف متغير dragItem يحدد العنصر الذي يتم سحبه كل مرة. فعند سحب العنصر نقوم بتحديده عن طريق الجافاسكربت ولنعطه الصنف invisible حيث يتم تطبيق display:none على هذا العنصر، ننشئ الدالة dragStart: function dragStart() { dragItem = this; setTimeout(() => this.className = 'invisible', 0) } تعبر this عن العنصر المسحوب. عند نهاية السحب يفترض ان تعود القيمة dragItem الى قيمتها الافتراضية. نلخص ذلك في الوظيفة dragEnd: function dragEnd() { this.className = 'item' dragItem = null; } تعبر this عن العنصر المسحوب. عند الافلات يفترض ان يستقبل الحاوي الذي تم الافلات فيه العنصر المسحوب ويضيفه اليه، نلخص ذلك: function dragDrop() { this.append(dragItem); } تعبر this عن الحاوي الذي تم الافلات فيه. تعبر dragItem عن العنصر الذي يتم سحبه. كخطوة اضافية نقوم بتعطيل الحدث dragOver لأنه يتم تشغيل هذا الحدث عند سحب الماوس فوق العنصر. وغالبا ما تكون العملية التي تحدث مماثلة لحدث السحب ونحن نستهدفها بالفعل. لنعطلها: function dragOver(e) { e.preventDefault() } لنعرف الهيكلية التالية في HTML: <div class="container"> <div class="column"> <h1>اسحب من هنا</h1> <div class="item" draggable="true">عنصر 1</div> <div class="item" draggable="true">عنصر 2</div> <div class="item" draggable="true">عنصر 3</div> <div class="item" draggable="true">عنصر 4</div> </div> <div class="column"> <h1>افلت هنا</h1> </div> </div> نطبق التنسيقات التالية: .container{ display: flex; gap: 30px; } .column{ flex-basis: 20%; background: #ddd; min-height: 90vh; padding: 20px; border-radius: 10px; } .column h1{ text-align: center; font-size: 22px; } .item{ background: #fff; margin: 20px; padding: 20px; border-radius: 3px; cursor: pointer; } .invisible{ display: none; } نسند الأحداث الى الحاويات والعناصر كـ: const items = document.querySelectorAll('.item') const columns = document.querySelectorAll('.column') items.forEach(item => { item.addEventListener('dragstart', dragStart) item.addEventListener('dragend', dragEnd) }); columns.forEach(column => { column.addEventListener('dragover', dragOver); column.addEventListener('drop', dragDrop); }); يفترض ان يقدم هذا مقاربة بسيطة لعملية السحب والافلات عن طريق الجافاسكربت مباشرة. اختبر النتيجة هنا.

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

في jQuery يمكنك استعمال التابع isEmptyObject للتحقق من ما ان كان الكائن فارغا، إذ يتحقق هذا التابع من الخصائص الموجودة على الكائن نفسه ومن الخصائص الموروثة من النماذج الأولية. يستقبل هذا التابع معاملا يعبر عن الكائن المشار اليه. يكون الاستعمال العام لها كـ: jQuery.isEmptyObject({}); // true jQuery.isEmptyObject({ foo: "bar" }); // false

لاحظ ان الصور التي لديك تظهر وبشكل عادي على: https://site.com/public/storage/logo1.png في حين انها غير متوفرة على: https://site.com/storage/logo1.png يعني هذا ان لا مشكلة في تكوين الرابط الرمزي symlink فهو يعمل وبشكل عادي تماما. الفكرة هنا هي في ان هنالك مشكلة في تكوين روابط ملفات الاصول مثل الصور. اعد ارفاق مسارات صحيحة الى خصائص src الخاصة بهاته الصور.

هل يمكنك الاشارة الى لغة البرمجة التي تعتمدينها؟ عموما، يتم ذلك عن طريق تصيير الصفحات على مستوى الخادم وحقن الترجمات بما يوافق لغة معينة. فعلى سبيل المثال في PHP، لا نصف عنوان الموقع كـ: <title> عنوان الموقع </title> بل يكون ضمن صفحة بامتداد PHP كـ: <title> <?php echo translate('page title'); ?> </title> حيث ان هنالك وظيفة translate تستقبل معاملا يعبر عن الكلمة المراد ترجمتها والبحث ضمن مصفوفة او ملف ترجمات. مثال: function translate($key) { $language = 'ar'; if($language == 'fr'){ return [ 'page title' => 'titre de la page' ][$key]; }elseif($language == 'en'){ return [ 'page title' => 'page title' ][$key]; }else{ return [ 'page title' => 'عنوان الصفحة' ][$key]; } } يمكن التوسع في الفكرة اكثر وفصل كل مكون على حدة. مثال: يمكن جلب وقراءة اللغة المستهدفة كمعامل في الرابط او كترويسة في الطلب. يمكن ايضا فصل ملف الترجمات الخاص بكل لغة وتحميل الملف المناسب بحسب اللغة المطلوبة. فالفكرة واحدة، يمكن تطبيقها وفق اي منطق ما ووفق اي لغة ما. ف PHP هنا هي مثال لا أكثر.

ما المشكلة اذن؟ هل تواجه مشكلة باستعراض الصور في المتصفح او الوصول اليها؟

يفترض ان يبقى على نفس مستوى ملف index.php بالنسبة لـلرابط الرمزي، قد لا يعمل بشكل صحيح ان كنت تحاول تنفيذ الامر php artisan storage:link بعد التعديل على هيكلة الملفات. وبما انه لم يكن هنالك مشكلة في انشاء رابط رمزي اول مرة، فيمكنك على كل حال انشاءه بشكل مخصص. يوجد الدالة symlink في php لفعل ذلك قم بـ: انشاء ملف وليكن symlink.php على نفس مستوى index.php يحتوي هذا الملف السطر التالي: <?php symlink('/home/username/folder_name/storage/app/public' ,'/home/username/public_html/storage'); حيث ان المعامل الاول يعبر عن الملف الاصل الذي ستشير اليه الوصلة. في حين ان المعامل الثاني يشير الى اسم الوصلة ووجهتها. قم بتعديله وفق ما هو لديك. لتنفيذ هذا الملف قم بفتحه على المتصفح وانتظر الى حد توقف الصفحة عن التحميل. هل قام هذا بحل مشكلتك؟ من المهم حذف الملف symlink بعد انشاء الوصلة او الرابط الرمزي. الدالة symlink()‎ في PHP

هل يتم انشاء الرابط الرمزي symlink بشكل عادي ثم لا تعمل الصفحات؟ هل يمكنك ارفاق محتويات ملف htaccess لديك؟ ايضا يرجى الاشارة ان كنت تمتلك ملف htaccess آخر ضمن مجلد المشروع

هو لا يخص لارافيل على وجه الخصوص، وانما يخص خوادم Apache. فملف htaccess هو ملف اعداد من قبل خوادم Apache يحدد كيفية تقديم أشكال مختلفة من البيانات والتعامل مع طلبيات HTTP. ويتم ذلك عن طريق وصف مجموعة من الموجهات Directives. هاته الموجهات تحدد كيفية الترخيص والتوثيق، تخصيص رسائل الاخطاء واكوادها، تجاوز واعادة كتابة الروابط، اعداد الكاش وغيرها.. يمكن تعميم هاته الكيفيات على كامل الانماط والمجلدات والملفات الفرعية، كما يمكن تخصيص طرق للتعامل مع كل مجلد او ملف بشكل مستقل. وهذا هو سبب تسميته بملف التكوينات الموزعة او distributed configuration files حسب التوثيق الرسمي له. هذا المنطق يفرض عليه الكيفية التي هو عليها في كتابته. ورغم انه مكتوب بلغة Apache إلا انه لا يجب عليك معرفة الا ما تحتاجه منه بالضبط. لنأخذ كلا من الأمثلة: Header add Sample-Header "My Value" يقوم هذا باضافة ترويسة Sample-Header بالقيمة My Value لكامل الطلبيات. وهذا تعليق: # Header add Sample-Header "My Value" اي قواعد هنا سيتم تطبيقها في نمط mod_expires: <IfModule mod_expires.c> # fff </IfModule> استعن بالتوثيق الرسمي لخادم Apache لفهم محتوى ملف ما لديك. ستجد مجموعة موجهات متعلق بكل نمط على حدى. اعرف اكثر عن تلك التي تخصك. ملف htaccess معد بشكل جيد في لارافيل. لا أظن انك تحتاج اعادة تجاوزه. مرفق.

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

استعمل querySelectorAll ومرر ذات المحدد مباشرة: var allButLastOne = document.querySelectorAll('div a:not(:last-child)');

يمكنك الاستعانة بالمحدد الزائف not: div a:not(:last-child) { opacity: 0.3; } يحدد هذا كامل العناصر a داخل العنصر div باستثناء العنصر الأخير. اعرف اكثر عن المحددات (Selectors) في CSS

هل جربت انشاء دالة مخصصة لذلك؟ لنسميها sleep ايضا! تقوم هاته الدالة بجلب الوقت time الذي تم فيه استدعاءها ثم تنفيذ حلقة while مقيدة بشرط ان يكون وقت تنفيذ التكرارة الواحدة من الحلقة اقل من الوقت الذي تم فيه استدعاء الدالة مضافا اليه الوقت الذي نريد تمريره الى الدالة sleep. تطبيق عملي لها: function sleep(duration){ // جلب الوقت time الذي تم فيه استدعاءها var now = new Date().getTime(); // تنفيذ حلقة while مقيدة بشرط ان يكون وقت تنفيذ التكرارة الواحدة من الحلقة اقل من الوقت الذي تم فيه استدعاء الدالة مضافا اليه الوقت الذي نريد تمريره الى الدالة sleep while(new Date().getTime() < now + duration){ /* لا شيء */ } } function exampleFunc(){ sleep(2000); console.log("Hello"); } exampleFunc() لاحظ ان القيمة المسندة لـ now يتم تنفيذها مرة واحدة. وبالتالي فهي تخزن مرة واحدة في التخزين المحلي. في حين ان تلك التي استعمالها في شرط الحلقة while يتم تحديثها كل حلقة من التكرار الى حد انتفاء الشرط.