-
المساهمات
5196 -
تاريخ الانضمام
-
تاريخ آخر زيارة
-
عدد الأيام التي تصدر بها
52
إجابات الأسئلة
-
إجابة Adnane Kadri سؤال في ما سبب الخطأ index is not defined كانت الإجابة المقبولة
تمعن جيدا في رسالة الخطأ وحاول فهم مضمونها. فالرسالة تحاول هنا اخبارك ان المتغير index الذي تحاول الوصول اليه غير معرف اساسا. وتشير رسالة الخطأ الى الموضع 13 من السطر 9 الموافق لـ:
while (index < msgs.length) { ^^^^^^^ } يفترض ان يشير index الى فهرس معين صحيح؟
اظن ما تشير اليه في السطر 8 هو تصريح هذا المتغير.
تأكد من اصلاح التصريح:
let index = 0;
-
إجابة Adnane Kadri سؤال في كيفية تشغيل مشروع php mvc كانت الإجابة المقبولة
في خوادم Apache الانتاجية قد تحتاج توصيف ملف htaccess. للتوجيه الى ملف index.php مباشرة.
محتوى الملف سيكون مشابها للخاص بمحتوى الملف في لارافيل كـ:
<IfModule mod_rewrite.c> <IfModule mod_negotiation.c> Options -MultiViews -Indexes </IfModule> RewriteEngine On # Handle Authorization Header RewriteCond %{HTTP:Authorization} . RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] # Redirect Trailing Slashes If Not A Folder... RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} (.+)/$ RewriteRule ^ %1 [L,R=301] # Send Requests To Front Controller... RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.php [L] </IfModule>
-
إجابة Adnane Kadri سؤال في ما هي الطريقة الصحيحة لإزالة العناصر المتكررة من مصفوفة في جافاسكربت؟ كانت الإجابة المقبولة
يظهر الخطأ لأنك تحاول استدعاء تابع يخص المصفوفات على سلسلة نصية.
myString.split(""); myString.filter فالتابع split لا يقوم بتجاوز تعريف المتغير بل يعيد مصفوفة جديدة تماما. في هاته الحالة تبقى myString سلسلة نصية في حال لم يتم تجاوزها عن طريق:
let myString = "EElllzzzzzzzeroo"; myString = myString.split(""); او مباشرة:
.split("") .filter((el,i) => { return myString.indexOf(el) === i }) ثم لخدمة الغرض الذي لديك يكفي :
let myString = "EElllzzzzzzzeroo"; myString = myString .split("") .filter((el,i) => { return myString.indexOf(el) === i }) يفترض ان يحل المشكل لديك.
ستعاد مصفوفة من حروف فريدة في المصفوفة.
["E", "l", "z", "e", "r", "o"] String.prototype.split() Array.prototype.filter() String.prototype.indexOf() -
إجابة Adnane Kadri سؤال في سؤال بخصوص تصدر محركات البحث عبر html meta كانت الإجابة المقبولة
تحسين ظهور الموقع في محركات البحث عملية متواصل تحتاج الكثير من المتابعة والتحليل على فترات زمنية مفتوحة.
بشكل عام، يعتبر كل توصيف ميتا meta description يعبر عن محتوى الموقع او التطبيق بشكل مختصر ودال جيدا. أما بالنسبة للكلمات المفتاحية meta tags فهي كلمات دالة تعبر بشكل مباشر او غير مباشر عن محتوى الموقع او التطبيق.
راعي في عملية تحسين محركات البحث كتابة محتوى جيد خال من الأخطاء بشكل دوري. واهتم ايضا بالالتزام بالنصائح التي يتم تقديمها بخصوص الـ SEO في تبويبة SEO في PageSpeed Insights من Google.
استعن ايضا بـ Google Analytics لمتابعة العملية بشكل دائم.
اعرف اكثر عن
-
إجابة Adnane Kadri سؤال في كيفية السماح بكتابة رموز معينة فقط ومنع أي رموز أخرى في حقل إدخال بإسنخدام جافاسكريبت JavaScript؟ كانت الإجابة المقبولة
يمكنك على كل حال استعمال حقل من نوع number. ان دعت الحاجة الى استعمال حقل من نوع text فيمكنك الاستماع للحدث onkeypress والتحقق من القيمة المدخلة ثم ان كانت موافقة لمعاييرك قبلتها وفي حالة عدم ذلك قم بتعطيل السلوك الافتراضي وهو:
طباعة المحرف لنستعن بالتعابير النمطية regex لتوصيف النمط المقبول وهو: محارف الأرقام + محرفي + و - :
/[0-9\.\-+]/ مثال عملي:
<input type='text' onkeypress='validate(event)' /> function validate(e) { var key = e.keyCode || e.which; key = String.fromCharCode(key); var regex = /[0-9\.\-+]/; if( !regex.test(key) ) { e.returnValue = false; if(e.preventDefault) e.preventDefault(); } }
-
إجابة Adnane Kadri سؤال في تقليل شفافية صورة الخلفيه في css كانت الإجابة المقبولة
بجانب ما اقترحه المدرب حسن، يمكنك ايضا استعمال الصنف الزائف after:: او before:: لإنشاء عنصر بوضعية مطلقة position absolute تحكم في تموضعه:
.bg::after{ background-image: url(path/to/image); position: absolute; top:0; left:0; height:100%; width:100%; opacity:0.4; content:''; } لاحظ أن الحاوي يجب ان يمتلك الوضعية relative ايضا:
.container { position: relative; } يمكنك ايضا تشكيل الخلفية من طبقة بيضاء نتحكم في شفافيتها + صورة. يكون ذلك كـ:
.bg{ background-size: cover; height: 500px; background: linear-gradient( rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7) ), url(imgage.jpg); } يعطي هذا نفس المقاربة ايضا.
-
إجابة Adnane Kadri سؤال في كيفية الحصول على كل المدخلات في إستمارة Form بإستعمال jQuery؟ كانت الإجابة المقبولة
يمكنك استعمال التابع serializeArray لتحليل كامل المدخلات واعدادها في مصفوفة كائنات.
<form> <input type="radio" name="active" value="1" checked="checked" /> <input type="radio" name="active" value="0" /> <input name="title" type="text" /> <input name="subtitle" type="text" /> </form> <button onclick="getData()"> get data </button> شيفرة الجافاسكربت:
function getData(){ var data = $('form').serializeArray(); console.log(data) } الناتج:
[{ name: "active", value: "1" }, { name: "title", value: "TITLE VALUE" }, { name: "subtitle", value: "SUBTITLE VALUE" }] يمكنك انشاء ازواج key-value انطلاقا من قيمة واسم كل حقل عن طريق المرور حول كل كائن من المصفوفة من الناتج. يكون المنطق العملية مشابها لـ:
function getData(){ var data = {}; var dataArray = $('form').serializeArray(); for(var i=0; i < dataArray.length ; i++){ data[dataArray[i].name] = dataArray[i].value; } console.log(data) } الناتج:
{ active: "1", subtitle: "SUBTITLE VALUE", title: "TITLE VALUE" } jQuery -
إجابة Adnane Kadri سؤال في كيفية الحصول على معرف العنصر id من خلال jQuery؟ كانت الإجابة المقبولة
يمكنك ايضا الوصول اليه من خلال تمرير id عبر التابع prop كـ:
var myId = $("span").parent().prop("id"); التابع .prop() في jQuery
الفرق بين خاصيات Attributes) HTML) وخاصيات الكائنات (Properties)
-
إجابة Adnane Kadri سؤال في كيفية فتح رابط في نفس الصفحة عبر جافاكسريبت JavaScript؟ كانت الإجابة المقبولة
جرب تمرير الخاصية self_ كمعامل ثان للتابع open كالتالي:
window.open("https://site.co","_self")
-
إجابة Adnane Kadri سؤال في كيف يتم عمل reset لعنصر input من خلال جافاسكريبت JavaScript؟ كانت الإجابة المقبولة
يوجد بالفعل زر من نوع reset يقوم بإعادة القيم المسندة لحقول الادخال في استمارة ما لقيمتها الافتراضية. يمكنك الاستعانة به مباشرة:
<form> <input type="file" name="file"> <button type="reset"> reset </button> </form> اما ان تطلب الامر فعل ذلك برمجيا، يمكنك مباشرة تجاوز قيمة value الخاصة بهذا الحقل وفقط.
<form> <input type="file" name="file" id="file"> <button type="button" id="reset" onclick="file.value = ''"> reset </button> </form>
-
إجابة Adnane Kadri سؤال في كيفية ررفع الملفات من خلال السحب والإفلات في جافاسكريبت JavaScript؟ كانت الإجابة المقبولة
توجد مكتبة 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"}); تعرف عن المكتبة اكثر من خلال التوثيق الخاص بها.
-
إجابة Adnane Kadri سؤال في كيفية تشغيل صوت عند الضغط على زر في React.js؟ كانت الإجابة المقبولة
بشكل بسيط، يمكنك اسناد وظيفة تشغيل الصوت الى حدث الضغط على الزر. نشغل الصوت عن طريق الجافاسكربت بشكل عادي كـ:
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;
-
إجابة Adnane Kadri سؤال في ما هي أفضل التقنيات لإستخدامها في موقع شخصي كانت الإجابة المقبولة
كنت لأختار استعمال التجميعة الاولى كونها صديقة لمحركات البحث أكثر من الثانية، خصوصا ان الموقع موقع شخصي سيعتمد على حظه وظهوره في نتائج محركات البحث.
فباعتمادك على جافاسكربت كليا (React) سيقوم الموقع ببناء او تصيير المكونات والصفحة بعد طلبها من قبل المتصفح فقط، بمعنى أن هاته العناصر والمكونات لن تتم فهرستها من قبل محركات البحث. وللتخلص من هاته المشكلة قد تحتاج الاعتماد على مفهوم التصيير على الخادم SSR او التصيير المسبق Pre rendering وهي مفاهيم خارجة عن سياق تطوير الواجهات الامامية فأنت ستحتاج معرفة بـ NodeJS و اطار عمل مثل NextJS.
-
إجابة Adnane Kadri سؤال في نصائح بشأن انشاء موقع شخصي كانت الإجابة المقبولة
لا يمكن حصر الموضوع في بضعة طرق فالمواقع الشخصية تعبر عن أشخاص او شركات او مؤسسات ولكل منها ما يميزها بشكل يتطلب الاشارة اليه بها في هاته المواقع، قم بالبحث بشكل اكثر تخصيصا. فبدل البحث عن portfolio websites examples قم بالبحث عن portfolio websites for front end developers examples او web designer portfolio website . بعد استلهام افكار منها يمكنك الانطلاق في بناء موقع شخصي، إما بمحتوى مشابه او هيكلة او تصميمين مشابهين. وبالطبع يمكنك اضافة لمساتك الخاصة التي تظن انها تميزك دون غيرك. فيما يلي بعض الخطوات التي قد تساعدك:
قم بتحديد المحتوى الذي تريد الاشارة اليه في موقعك. (مثال: نبذة عامة، الخبرات، الدراسة، الأعمال السابقة، شهادات عملاء، قسم للمراسلة) استلهم افكارا بخصوص التصميم والهيلكة بخصوص كل جزئية بدل استلهام الشكل العام للموقع فقط. سيعطي هذا لمسة خاصة تميز كل مكون دون ان يخرج عن نمط البقية. (مثال: ابحث عن امثلة عن نماذج اتصل بنا في الانترنت، او عن امثلة عن قسم شهادة العملاء) لا تتكلف كثيرا وركز على تجربة الاستخدام، فالزوار او العملاء غالبا لن يقوموا بقراءة كامل ما ستشير إليه. ركز على دلالية العناصر والألوان وتموضعها. وعلى ما قل ودل من النصوص والكلام. -
إجابة Adnane Kadri سؤال في كيفية تحريك العناصر عند سحبها بإستخدام JavaScript؟ كانت الإجابة المقبولة
توجد هنالك واجهة برمجية كاملة تخص السحب والافلات في جافاسكربت، تأتي بمجموعة من الأحداث يمكن بناءا عليها تحريك العناصر وفق شكل ما. نذكر:
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); });
يفترض ان يقدم هذا مقاربة بسيطة لعملية السحب والافلات عن طريق الجافاسكربت مباشرة. اختبر النتيجة هنا.
-
إجابة Adnane Kadri سؤال في كيفية التحقق من أن كائن ما Object فارغ في جافاسكريبت؟ كانت الإجابة المقبولة
في jQuery يمكنك استعمال التابع isEmptyObject للتحقق من ما ان كان الكائن فارغا، إذ يتحقق هذا التابع من الخصائص الموجودة على الكائن نفسه ومن الخصائص الموروثة من النماذج الأولية. يستقبل هذا التابع معاملا يعبر عن الكائن المشار اليه.
يكون الاستعمال العام لها كـ:
jQuery.isEmptyObject({}); // true jQuery.isEmptyObject({ foo: "bar" }); // false
-
إجابة Adnane Kadri سؤال في ملف 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 معد بشكل جيد في لارافيل. لا أظن انك تحتاج اعادة تجاوزه. مرفق.
-
إجابة Adnane Kadri سؤال في كيفية المرور على محتوى كائن Object في JavaScript؟ كانت الإجابة المقبولة
يمكنك ايضا استعمال التابع entries عن الكائن Object لطباعة كل مفتاح وقيمة على التوالي، يكون ذلك كـ:
Object.entries(obj) يعيد هذا التابع مصفوفة ثنائية البعد Two-dimensional Arrays ذات ثنائيات مفتاح قيمة كـ:
[["p1", "value1"], ["p2", "value2"], ["p3", "value3"]] يمكنك المرور عليها عن طريق اي تكرار، وليكن for in :
for (const [key, value] of result) { console.log(key, value); } فتكون كاملة الشيفرة:
const myObj = { a: 1, b: 2, c: 3 }; let i = Object.entries(myObj); for (const [key, value] of i) { console.log(key, value); } الناتج:
"a", 1 "b", 2 "c", 3 الكائن Object في JavaScript التابع Object/entries في جافاسكربت -
إجابة Adnane Kadri سؤال في كيفية ملء رقم بأصفار بادئة leading zeros في جافاسكريبت JavaScript؟ كانت الإجابة المقبولة
يمكنك انشاء دالة مخصصة تقوم بالأمر عليك، فيما يلي منطق عمل الدالة:
تقوم هاته الدالة باستقبال العدد المراد اضافة بادئة صفرية اليه num وعدد الاصفار المراد اضافتها اليه num_of_zeros. تقوم الدالة بتكرار السلسلة النصية "0" عدد num_of_zeros مرة. وتخزنها في متغير محلي. في حالة ما كان العدد موجبا فإن الدالة ستقوم مباشرة باضافة الاصفار الى بدايته. في حالة ما كان العدد سالبا فان الدالة ستقوم بحقن الاصفار بعد علامة ال -. مثال عملي:
/** * اضافة بادئة اصفار الى عدد * * @param num * @param num_of_zeros * @return string */ function padZeros(num, num_of_zeros) { var zeros = ('0').repeat(num_of_zeros); return num >= 0 ? zeros + num : String(num).substr(0, 1) + zeros + String(num).substr(1) ; } مثال عن الاستعمال:
console.log(padZeros(-4, 10)) // "-00000000004" console.log(padZeros(1, 4)) // "00001" الكائن String في JavaScript التابع Repeat في جافاسكربت التابع substring في جافاسكربت -
إجابة Adnane Kadri سؤال في كيفية دمج vite مع tailwind في مشروع عادي كانت الإجابة المقبولة
بداية، قم بتثبيت tailwindcss وملحقاتها:
npm install -D tailwindcss postcss autoprefixer قم بتكوين ملف اعداد tailwindcss:
npx tailwindcss init -p قم بتوصيف امتدادات الملفات المراد التعامل معها في ملف tailwind.config.js:
module.exports = { content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], } اضف موجهات tailwindcss الى ملف التنسيقات الرئيسي لديك:
@tailwind base; @tailwind components; @tailwind utilities; قم بتضمين ملف التنسيقات بملف الجافاسكربت الرئيسي لديك:
import './css/style.css'; قد تحتاج كخطوة اضافية تضمين tailwindcss و autoprefixer ضمن اضافات postcss في ملف اعداد postcss.config.js:
module.exports = { plugins: [ // ... require('tailwindcss'), require('autoprefixer'), // ... ] } وأخيرا تشغيل الامر npm run dev والبدء في استعمال tailwindcss ضمن مشروعك.
-
إجابة Adnane Kadri سؤال في تغيير كلاسات tailwind بإستخدام جافاسكريبت كانت الإجابة المقبولة
بداية، يمكنك اختصار الشيفرات التالية:
function toggleOn(){ if(toggleBtn.classList.contains('toggle-on')){ toggleBtn.classList.remove('toggle-on'); toggleBtn.classList.add('toggle-off'); navMenu.classList.remove('w-[75px]'); navMenu.classList.remove('rounded-[40px]'); navMenu.classList.add('w-[250px]'); navMenu.classList.add('rounded-[20px]'); container.classList.remove('left-[70px]'); container.classList.add('left-[250px]'); }else{ toggleBtn.classList.remove('toggle-off'); toggleBtn.classList.add('toggle-on'); navMenu.classList.remove('w-[250px]'); navMenu.classList.add('w-[75px]'); navMenu.classList.remove('rounded-[20px]'); navMenu.classList.add('rounded-[40px]'); container.classList.remove('left-[250px]'); container.classList.add('left-[70px]'); } لتصبح:
function toggleOn(){ if(toggleBtn.classList.contains('toggle-on')){ toggleBtn.classList.remove('toggle-on'); toggleBtn.classList.add('toggle-off'); navMenu.classList.remove('w-[75px]' ,'rounded-[40px]'); navMenu.classList.add('w-[250px]' ,'rounded-[20px]'); container.classList.remove('left-[70px]'); container.classList.add('left-[250px]'); }else{ toggleBtn.classList.remove('toggle-off'); toggleBtn.classList.add('toggle-on'); navMenu.classList.remove('w-[250px]' ,'rounded-[20px]'); navMenu.classList.add('w-[75px]' ,'rounded-[40px]'); container.classList.remove('left-[250px]'); container.classList.add('left-[70px]'); } ثم ما الحاجة من كل هاته التلاعبات بشجرة الوثيقة؟ لما لا يكفي تغيير صنف واحد وليكن هو حاوي قائمة التصفح. قم بتبديل صنف واحد مثلا وليكن is-enabled
function toggleOn(){ if(toggleBtn.classList.contains('toggle-on')){ navMenu.classList.add('is-enabled') }else{ navMenu.classList.remove('is-enabled') } أو حتى:
function toggleOn(){ navMenu.classList.toggle('is-enabled') ثم تعامل مع الباقي عن طريق الـ css و tailwindCSS:
.nav-menu { // اي تنسيقات } .nav-menu .toggle-btn{ // اي تنسيقات } .nav-menu .container{ // اي تنسيقات } .nav-menu.is-enabled { // اي تنسيقات } .nav-menu.is-enabled .toggle-btn{ // اي تنسيقات } .nav-menu.is-enabled .container{ // اي تنسيقات } او عن طريق sass:
.nav-menu { // اي تنسيقات .toggle-btn{ // اي تنسيقات } .container{ // اي تنسيقات } &.is-enabled { // اي تنسيقات .toggle-btn{ // اي تنسيقات } .container{ // اي تنسيقات } } } يوجد قاعدة تسعى لتحسين تجربة الاستخدام تسمى Less Javascript, more HTML and CSS أي "اقل جافاسكربت ، اكثر HTML و CSS". حاول التقليل من الاعتماد على جافاسكربت كليا في اشياء يمكن القيام بها عن طريق css (رغم انها قادرة).
-
إجابة Adnane Kadri سؤال في كيفية إستعمال أكثر من mail service في مشروع لارافيل Laravel؟ كانت الإجابة المقبولة
كطريقة تقليدية جدا يمكنك اعادة اعداد البريد كل مرة تريد فيها تبديل تلك التي تعدها في المشروع. استعمل التابع الثابت set عن الواجهة Config لتعيين قيمة جديدة لمفتاح معين:
/** * ارسال رسالة بريد الكتروني باستخدام خدمة معينة * @return void */ public function sendMail() { // شيفرة ارسال الرسالة } /** * ارسال رسالة بريد الكتروني باستخدام خدمة غير الاولى * @return void */ public function sendMailUsingOtherService() { $this->switchMailer(); // شيفرة ارسال الرسالة } /** * اعادة اعداد خدمة البريد * @return void */ private function switchMailer() { Config::set('mail.encryption','ssl'); // طريقة تشفير جديدة Config::set('mail.host','smtps.example.com'); // مستضيف خدمة جديد Config::set('mail.port','465'); // منفذ جديد Config::set('mail.username','youraddress@example.com'); // اسم مستخدم جديد Config::set('mail.password','password'); // كلمة مرور جديدة Config::set('mail.from', ['address' => 'JhonDoe@gmail.com' , 'name' => 'JhonDoe']); Artisan::call('cache:clear'); // قد تكون هاته الخطوة ضرورية ايضا لاعادة التقاط التحديثات } اما كحل يلائم النسخ التي هي اكبر من النسخة 7.x فيوجد التابع mailer الذي يمكن من خلاله تحديد خدمة البريد التي تستهدفها بارسالك رسالة معينة:
Mail::mailer('my_mailer') ->to($user()) ->send(new MyMailableClass()); راجع ايضا
التعامل مع البريد الإلكتروني (Mail) في Laravel
-
إجابة Adnane Kadri سؤال في هل يمكن إستعمال قواعد بيانات NoSQL مع لارافيل Laravel؟ كانت الإجابة المقبولة
بالطبع يمكن. فآداء لارافيل مع قاعدة بيانات NoSQL شيء خرافي حقا. يتم الاستعمال عادة مع اعدادها بوساطة بيئات تطوير مثل Homestead. يوجد خيار mongodb يقبل قيمة بوليانية في ملف اعداد homestead مثلا.
اما استعمالها بشكل منفصل فيكون بوساطة حزم composer توفر هاته الوظيفية (أظنها افضل). توجد مثلا حزمة jenssegers/mongodb. حيث تضيف هذه الحزمة وظائف إلى نموذج Eloquent ومنشئ لاستعلامات لـ MongoDB باستخدام واجهة التطبيق البرمجية للارافيل. وتستعمل نفس الوظائف بالضبط تماما. أي انك بعد عملية الضبط واعداد الاتصال الا التعامل مع Laravel Eloquent بشكل كلي.
تثبت عن طريق تنفيذ الامر:
composer require jenssegers/mongodb ويتم اعداد الاتصال في مصفوفة connections في ملف الاعداد database.php كـ:
'connections' => [ 'mongodb' => [ 'driver' => 'mongodb', 'host' => env('DB_HOST', '127.0.0.1'), 'port' => env('DB_PORT', 27017), 'database' => env('DB_DATABASE', 'homestead'), 'username' => env('DB_USERNAME', 'homestead'), 'password' => env('DB_PASSWORD', 'secret'), 'options' => [ 'database' => env('DB_AUTHENTICATION_DATABASE', 'admin'), // required with Mongo 3+ ], ], في الاستعمال، يجب وراثة صنف النموذج الاساسي للحزمة:
use Jenssegers\Mongodb\Eloquent\Model; class Book extends Model { // } ثم يمكنك البدء باستعمالها بشكل عادي تماما.
-
إجابة Adnane Kadri سؤال في خطأ Authentication required عند إرسال بريد إلكتروني في لارافيل Laravel؟ كانت الإجابة المقبولة
ان كنت تقوم بتعريف قيمة لمتغير البيئة MAIL_MAILER في ملف env. فإنه سيتم اعتبارها مباشرة، وستترك القيمة log كقيمة افتراضية في حالة عدم اعداد هذا المتغير فقط.
جرب ايضا تجاوز تعريف القيمة بملف متغيرات البيئة:
MAIL_MAILER=log اجعلها log بدل smtp.
لا تنسى ايضا محو التخزين المؤقت لملفات الاعداد لالتقاط الاعداد الجديد:
php artisan config:clear
-
إجابة Adnane Kadri سؤال في كيفية إستعمال ملفات config في لارافيل Laravel؟ كانت الإجابة المقبولة
بجانب الاشارة الى المفتاح يجب الاشارة ايضا الى اسم الملف الحاوي للاعداد. فان كان الملف هو app.php نشير الى المتغير كـ:
app.author ويكون استدعاءه كـ:
{{ Config::get('app.author') }} او مباشرة باستعمال الدالة المساعدة config:
config('app.author') الضبط في Laravel