شرف الدين حفني

ال cacheاو ال (query cache) في قواعد البيانات تعبر عن تخزين النتائج للجملة الإستعﻻمية الواحدة(query) ,فمثلاً لو قمنا بتنفيذ تلك الإستعﻻمة select * from users where rating between(10,100) سيتم تخزين الناتج في الcache وهو مكان في الذاكرة يكون الوصول إليه أسهل من الوصول إلى القرص الصلب, أو يكون مكان بين المعالج وبين الذاكرة, فعند تنفيذ نفس الإستعﻻمة في المرة القادمة يتم تنفيذها في وقت أقل حيث لا يحتاج نظام قواعد البيانات إلى البحث عبر جميع الجداول , فقد تم تخزين الناتج بالفعل ولكن إن قمنا بتنفيذ إستعﻻمة أخرى حتى وإن كانت تحتاج بعضاً من البيانات التي حصلنا عليها من الإستعﻻمة السابقة , فسيقوم نظام قواعد البيانات بتنفيذ الإستعﻻمة بدلاً من جلب البيانات المشتركة من الcache بينما ال buffer pools ﻻ يعتمد على إستعﻻمة معينة, ففي قواعد البيانات عندما تبحث عن بيانات معينة يتم التساؤل أولاً إن كانت تلك البيانات موجودة في الbuffer pools (والذي هو بالمناسبة جزءاً في الذاكرة يتم تخصيصه من أجل قواعد البيانات) , لو كانت الإجابة بنعم يتم جلبها إلى المستخدم, لو كانت الإجابة ب"لا" يتم نقلها من القرص الصلب إلى الbuffer pool ومن ثم جلبها للمستخدم, في المرة القادمة إن قمنا بتنفيذ إستعﻻمة مختلفة ولكن تحتاج إلى نفس البيانات ﻻ نحتاج إلى الذهاب إلى القرص الصلب, حيث يتم جلب البيانات بشكل تلقائي من الbuffer pool ,وذلك يُعد أسرع وأفضل للأداء, ومن المُستحسن أن يكون حجم الbuffer pool مناسب للبيانات, ولكن قاعدة الإبهام أن يكون مساحته بمقدار 80% من الذاكرة, إن أصبح مساحة الbuffer poolأقل من المطلوب سيؤدي ذلك إلى مشاكل في الأداء بسبب كثرة عمليات الswapping المُكلفة للموارد والمؤثرة على الأداء بشكلٍ ملحوظ

قم بحذف ملف الyarn_lock.json وملف ال node_modules ومن ثم قم بكتابة ذلك الأمر من جديد yarn install وجرب مرة اخرى أن ترفعه وبإذن الله يعمل معك

يجب عليك أولاً أ تتأكد من أنك فعﻻً تحتاج أن تغير من قيمة الswap , ويمكنك التحقق من ذلك الأمر عن طريق الشفرة الأتية cat /proc/sys/vm/swappiness عند كتابة هذا الأمر في الterminal ستخرج لك قيمة الswap والتي تتراوح من بين 0 إلى 100 حيث 0 تعني أنه ﻻ يتم حدوث عملية الswap على الإطﻻق إلى في الحالات القصوى مثل أن تكون الذاكرة في كامل إستخدامها وﻻ يوجد مكان أخر في الذاكرة ال60(والتي بالمناسبة هي القيمة الإفتراضية) تعني أن الswap سيحدث بشكل شائع ومتوازن بين إستهﻻكه وإستهﻻك الذاكرة ال100 تعني أن الswap سيكون هو الخيار الإفتراضي دائماً, ولتغيير قيمة الswap يمكنك كتابة الأمر التالي sudo sysctl vm.swappiness=10 بالطبع يمكنك إستبدال 10 بالقيمة التي تريدها من أجل الswap

سأقوم بكتابة خطوات الحل لك, ولكن لن أكتب الشفرة البرمجية حتى تحاول كتابتها بنفسك والإستفادة تعتمد تلك المسألة على تكنيك في الحل معروف يُسمى بالgreedy algorithm وهو يعني أن تقوم بالمرور على العناصر والقيام بعملية معينة على كل عنصر حتى يتم حل المسألة, وهذا ما سنقوم بعمله الأن على النحو التالي: نقوم أولاً بترتيب العناصر ترتيباً تنازلياً نقوم بحساب مجموع العناصر كلها نقوم بالمرور على العناصر , واحدا تلو الأخر ونخزن قيمة مجموع العناصر التي نمر عليها في متغير في كل لفة نتسائل, هل قيمة مجموع العناصر التي مررنا علينا حتى الأن أكبر من نصف مجموع العناصر كلها ؟ إن كانت الإجابة بأجل نطبع رقم العنصر الذي وقفنا عنه, إن كانت بﻻ نستكمل إلى اللفة التي تليها إن أنهينا المرور على جميع العناصر دون تحقيق الشرط بالأعلى نقوم بطباعة عدد العناصر

يمكنك تحقيق ذلك عن طريق الجافاسكريبت, الفكرة بسيطة: أولاً يجب تحديد الأعمدة الرئيسية يجب أن تقوم بالمرور على الصفوف صف صف وفي كل صف نقوم بإضافة قيمة الأعمدة الخاصة به نقوم بإزالة المساافات الزائدة وتلك عينة من شفرة برمجية تقوم بما تريده function init_excel_sheet(table_id, separator = ',') { var rows = document.querySelectorAll("table#"+table_id+" tr"); console.log(document.querySelector(`.table`)); console.log(rows); var csv = []; for (var i = 0; i < rows.length; i++) { var row = [], cols = rows[i].querySelectorAll('td, th'); for (var j = 0; j < cols.length; j++) { var data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, '').replace(/(\s\s)/gm, ' ') data = data.replace(/"/g, '""'); row.push('"' + data + '"'); } csv.push(row.join(separator)); } var csv_string = csv.join('\n'); var filename = 'export_' + table_id + '_' + new Date().toLocaleDateString() + '.csv'; var link = document.querySelector("#download_excel"); link.setAttribute('target', '_blank'); link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv_string)); link.setAttribute('download', filename); }

قم بطباعة الarticles وأرني ناتج الطباعة من فضلك

ﻻ يجب عمل شئ كهذا , حيث أن الid هو عبارة عن index , ال index عبارة عن قيمة مميزة يتم تخزينها في مكان معين في قاعدة البيانات لتسهيل الوصول إليها في المرات القادمة ويتم ذلك بإستخدام هياكل بيانات وخورزميات مثل ال binary search tree فمثلاً لو كان لدينا هذا الصف { name:"sharaf", id:4 } تقوم قاعدة البيانات تلقائياً بتخزين المعرف(id)في مكان خاص مع باقي المعرفات (ids) , فعندما نقوم بالبحث بإستخدام المعرف, يتم الوصول إليه بشكل أسرع بسبب إستخدام الbinary search tree بينما, ولذلك ﻻ يجب تغيير الid , أما في حالة أنك تريد معرفة ترتيب العناصر حسب دخولهم يمكنك إستخدام حل الأستاذ حسن حيدر

تلك المشكلة تحدث بسبب أن ليس لديك الصﻻحيات للعمل على هذا المسار, الحل أن تقوم بتلك العملية بصفتك super user إما عن طريق تحريق الملف أو نسخه mv old_path new_path cp old_path new_path وإن كان الملف الذي تريد تحريكه عبارة عن مجلد فيجب إذا إضافة-r والتي ترمز ل recursive والتي تقوم بعمل نفس الأمر لجميع الملفات داخل المجلد حتي ينتقلو جميعاً mv -r old_path new_path cp -r old_path new_path

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

للsemantic tags اهمية كبرى تتمثل في عدة صفات مثل: تجعل الشفرة البرمجية أسهل قراءةً وفهماً, فإذا قارننا هذه الشفرة <html> <head> <title>Example</title> </head> <body> <div id="header"> </div> <div id="main-content"> </div> <div id="footer"> </div> </body> </html> بهذه الشفرة : <html> <head> <title>Example</title> </head> <body> <header> </header> <main> </main> <footer> </footer> </body> </html> سنﻻحظ أن الشفرة الثانية أوضح وأسهل للفهم, حيث للوسوم أسامي لها دلالات على وظيفتها الsemantic tags تُحسن من الseo الخاص بالموقع , وتسهل عملية البحث من محركات البحث تزيد من إمكانية الوصول(accessibility) وتساعد قارئ الشاشة على فهم محتوى الصفحة بشكل أفضل

أخي الكود الذي أرسلته لا يوجد به صفحات حتى أستطيع إختباره, هل يمكنك أن تحدد لي كيف أقوم بإختبار الكود حتى أستطيع مساعدتك؟

حسب فهمي فأنت تريد أن يكون هنالك صورة بجانب القائمة عندما ﻻ يكون هناك محتوى, ولكن عند توفر محتوى ما يجب أن تنتقل الصورة الى جانب المحتوى بدلاً من أن تكون بجانب القائمة مباشرةً , هل فهمتك بشكل صحيح؟

برجاء عملexport لقاعدة البيانات بالبيانات التي بداخلها + ما المشكلة التي تحدث تحديداً؟ هل تقوم قاعدة البيانات بإرسال مصفوفة فارغة بدلاً من إرسال البيانات أم ماذا تحديداً؟

من أجل جعل قاعدة البيانات تقبل الحروف العربية يجب عليك أن تجعل قيمة خاصية الcollation لكل من قاعدة البيانات نفسها utf-8 بالإضافة إلى كل الجداول والعواميد , مثلاً إن كان لديك قاعدة بيانات تُسمى test وجدول user وعواميد username, password وجعلت الcollation لقاعدة البيانات والجدول user والعامود username كل منهم بcollation مساوياً للutf-8 , فستجد أن العامود الباقي والذي هو password مازال ﻻ تستطيع إدخال الحروف العربية به , فيجب جعله هو أيضا بcollation utf-8 لتغيير الcollation الخاص بقاعدة البيانات يمكنك أن تختار قاعدة البيانات من يسار صفحة الphpmyadmin ومن ثم تختار operations من القائمة بالأعلى , ومن ثم تنزل إلى أسفل الصفحة ستجد بإمكانك تغيير قيمة ال.collation بالنسبة للجداول يمكنك أن تختار الجدول المراد تغيير لغته من القائمة المنسدلة من قاعدة البيانات ومن ثم تنفيذ نفس العمليات التي قمت بتنفيذها مسبقاً على قاعدة البيانات. بالنسبة للعواميد يمكنك أن تدخل على قائمة ال structure الخاص بالجدول الذي يحتوي على العامود , ومن ثم الضغط على كلمة change بجانب إسم العامود ومن ثم ستجد نفسك قادراً على تغيير قيمة الcollation

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

أعتقد أنك تقصد خواص الposition الfixed: تجعل العنصر مثبت بالنسبة إلى الviewport , بمعنى أنك إن وضعت عنصر مثل الheader فلن يتغير مكانه مهما قمت بعمل scroll ال sticky : مثله مثل الfixed ولكن الفرق أنه يكون موجود في مكانه الطبيعي حتى تقوم بعمل scroll وتصل إليه في الviewport ثم يتم تثبيته ولكن يجب الحرص عند إستخدام الfixed حيث كما قلنا فإن العنصر يثبت في الviewport مما يعني أنه قد يقوم بإخفاء عناصر أخرى ويجب الحرص أيضاً عند إستخدام الsticky حيث أنه معتمد على العنصر الأب parent element فإن قمت بعمل scroll وذهبت بعيداً عن العنصر الأب , يختفي العنصر الsticky

ايقونات الsvg تعمل بشكل مختلف عن الصور مثل ال.png, .jpg , حيث عند تغيير خواص الحجم مايحدث فقط أنك تقوم بتغيير حجم المربع الحامل للأيقون, عند الحاجة لتغيير الحجم يجب عليك تغيير ملف الsvg نفسه, إفتحه في محرر الأكواد الخاص بك ستجده عبارة عن كود xml كما في هذا الشكل <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="309.000000pt" height="275.000000pt" viewBox="0 0 309.000000 275.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,275.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M1275 2565 c-273 -37 -507 -162 -707 -373 -150 -160 -245 -344 -294 -567 -24 -111 -24 -360 0 -470 59 -268 181 -477 386 -660 307 -273 770 -366 1165 -233 346 116 632 398 748 738 46 135 62 233 62 390 0 357 -135 653 -406 895 -252 225 -606 329 -954 280z m400 -60 c112 -23 185 -50 297 -107 499 -254 738 -843 556 -1373 -132 -387 -448 -664 -858 -752 -116 -25 -334 -25 -450 0 -116 25 -189 51 -301 108 -629 321 -813 1135 -383 1699 55 73 195 206 264 251 137 91 309 158 470 184 106 18 296 13 405 -10z"/> <path d="M1695 1440 l-390 -390 -201 201 c-165 165 -205 200 -225 197 -17 -2 -25 -10 -27 -28 -2 -21 35 -62 222 -248 193 -193 226 -222 242 -214 11 6 203 195 428 420 375 376 407 411 397 431 -26 48 -44 33 -446 -369z"/> </g> </svg> سنركز الأن على الجزأ العلوي في الملف <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="309.000000pt" height="275.000000pt" viewBox="0 0 309.000000 275.000000" preserveAspectRatio="xMidYMid meet"> تﻻحظ وجود خاصيتين width و height, قم بتغييرهم للقيمة التي تريد الحصول عليها. وأريد الإضافة أن نفس المشكلة ستقابلك إن حاولت تغيير لون الأيقونة, حيث يجب عليك تعديل لون الأيقونة أيضاً من نفس الملف, حيث ستﻻحظ وجود وسم إسمه path <path d="M1275 2565 c-273 -37 -507 -162 -707 -373 -150 -160 -245 -344 -294 -567 -24 -111 -24 -360 0 -470 59 -268 181 -477 386 -660 307 -273 770 -366 1165 -233 346 116 632 398 748 738 46 135 62 233 62 390 0 357 -135 653 -406 895 -252 225 -606 329 -954 280z m400 -60 c112 -23 185 -50 297 -107 499 -254 738 -843 556 -1373 -132 -387 -448 -664 -858 -752 -116 -25 -334 -25 -450 0 -116 25 -189 51 -301 108 -629 321 -813 1135 -383 1699 55 73 195 206 264 251 137 91 309 158 470 184 106 18 296 13 405 -10z"/> ستقوم بإضافة خاصية تسمى fill وتضع فيها إسم اللون الذي تريده ولكن بصيغة السادس عشر hexa code <path fill="#fff" d="M1275 2565 c-273 -37 -507 -162 -707 -373 -150 -160 -245 -344 -294 -567 -24 -111 -24 -360 0 -470 59 -268 181 -477 386 -660 307 -273 770 -366 1165 -233 346 116 632 398 748 738 46 135 62 233 62 390 0 357 -135 653 -406 895 -252 225 -606 329 -954 280z m400 -60 c112 -23 185 -50 297 -107 499 -254 738 -843 556 -1373 -132 -387 -448 -664 -858 -752 -116 -25 -334 -25 -450 0 -116 25 -189 51 -301 108 -629 321 -813 1135 -383 1699 55 73 195 206 264 251 137 91 309 158 470 184 106 18 296 13 405 -10z"/> وتلك مقالة قد تجدها مفيدة إن أردت معرفة المزيد عن ملفات الsvg وإستعمالها في الويب

يمكنك تحقيق ذلك عن طريق أن تقوم بإنشاء أكثر من keyframe كل واحد لكل حجم , ومن ثم تقوم بتغيير خاصية الanimation-name حسب تغيير حجم الشاشة عن طريق media query @keyframes myanim{ //شفرتك البرمجية } @keyframes myanim_xs{ //شفرتك البرمجية } #myAnimated{ animation-name:myanim; } @media screen and (max-width: 500px) { #myAnimated { animation-name: myanim_xs; } } يمكنك أيضا أن تقوم بإدماج الkeyframes بداخل الmedia query ولكن قد ﻻ يعمل هذا الأمر على المتصفحات الأقدم @media screen and (max-width: 800px) { @keyframes test{ //شفرتك البرمجية } #myAnimated{ animation-name:test } }

عملية إعادة التصنيع (refactoring) يُقصد بها إعادة كتابة الشفرة البرمجية أو إعادة كتابة جزءاً من الشفرة البرمجية بغرض: تحسين كفائة الشفرة البرمجية من حيث الأداء تحسين الكفاءة من حيث جعلها أسهل فهماً التأكد من سهولة تطوير الشفرة البرمجية وتمديدها extend وبوجه عام فإن غالبا الشفرة البرمجية التي نحتاج أن نقوم بإعادة تصنيعها (refactoring) تكون هي الشفرة التي ﻻ تراعي المبادئ الخمسة SOLID Principles والتي تنص على التالي مبدأ المسؤلية الواحدة: وهو مبدأ ينص على أن لكل class مسؤلية واحدة , وكل دالة فيه يكون لها وظيفة واحدة فقط ﻻ أكثر مبدأ المفتوح - المغلق: ينص هذا المبدأ على أن أي نظام يكون مفتوح للتمدد مغلق للتعديل مبدأ ليسكوف للإستبدال: إذا كان النظام يستخدم class معين فإنه يجب أن يكون قادراً على إستخدام أي class مشتق منه مبدأ فصل الواجهات (interface Segregation) : ﻻ يجب أن تحتوي الواجهات interfaces على دوال قد ﻻ يحتاج المستخدم لإستخدامها, حيث يجب إختيار الدوال في الواجهات بعناية مبدأ عكس الإعتمادية (dependency inversion): ينص على أن classes المستويات العليا ﻻ يجب أن تعتمد على classes المستويات الدنيا , فمثلاً إن كان لدينا class مُسمى سيارة و class أخر مُسمى محرك , فﻻ يجب أن تعتمد السيارة على المحرك وبالأسفل بعض المقالات المفيدة في فهم هذا الموضوع بشكل أفضل

على الرغم من أن الorm يُسهل التعامل مع قواعد البيانات ألا أن لديه عدد من العيوب يستغرق وقتاً لبدأ المشروع, مثلاً تحضير ملفات الEntity classes أو تحضير ملفات الxml إن كنت تستخدم jpa مثلاً او الannotations الorm ليست سريعة مثل إستخدام sql مباشرةً , هذا قد يؤثر بشكل ملحوظ في التطبيقات التي تحتاج إلى عدم تأخير البيانات والبرامج التي تحتاج إلى أداء عالي بالنسبة للجمل المعقدة نسبياً , يكون الموضوع إنتحاريا بالنسبة للorm , قد تجد فعلياً جُمل بال sql ﻻ تستطيع تنفيذها بال orm الorm يسبب طبقة من التعقيد ,خاصةً كون قواعد البيانات عبارة عن عﻻقات, والorm عبارة عن تمثيل للكائنات

الinner join يُمثل عملية التقاطع بين المجموعات set a ={1,3,5,7,8,6} set b = {2,4,5,6,8} a inner join b={5,6,8} الouter join ثُمثل عملية الإتحاد بين المجموعات set a ={1,3,5} set b ={2,4,6} a outer join b={1,2,3,4,5,6} ويمكن التعبير عن التداخل الداخلي(inner join) بالsql عن طريق الشفرة البرمجية الأتية select * from a inner join b on a.a = b.b وبالنسبة للتداخل الخارجي (outer join) بال sql يتم عن طريق الشفرة البرمجية الأتية select * from a outer join b on a.a = b.b

ﻻ يمكنك إرجاع مصفوفة بشكل مباشر في لغة c++ ولكن بدلاً من ذلك يمكنك إرجاع مؤشر pointer int* function(){} يمكنك في تلك الحالة أن تقوم بإرجاع مصفوفة دون مشاكل, حيث أن عﻻمة الأقواس [] تُترجم خلف الكواليس كمؤشر (pointer) فمثلاً int func(int arr[]){} مثلها مثل int func(int elm*){}

حقيقي أن ال scanfو printf أسرع من cin و cout ولكن يمكن تعديل ذلك حيث يكمن تفوق السرعة في أن مكابت الiostream في الc++ تحاول المحافظة على التزامن مع مكاتب إدخال وإخراج في لغة الc , إذا قمنا بإيقاف هذا التزامن ستتفوق مكاتب الc++ ويمكننا تحقيق ذلك من خﻻل الكود الأتي std::ios::sync_with_stdio(false); إن قارنت نتائج إستخدام مكاتب الc مع مكاتب الc++ قبل تعطيل المزامنة ستجدها كالأتي iostream version: 24.3 seconds scanf version: 6.4 seconds بينما بعد تعطيل المزامنة نجد أن النتائج تحولت كالتالي scanf version: 6.8 seconds iostream with 5.5 seconds

للreact hooks فوائد عدة أهمها: تمكنك من العمل على الfunctional components ﻻ تحتاج للقلق بشأن الكلمة this حيث أنها ﻻ تُستخدم في الreact functinal components , وتلك الكلمة المفتاحية لها معاملة خاصة نوعاً ما وتسبب نوع من التشتت لبعض المطورين class ComponentClss extends React.component{ constructor(props){ super(props); this.state={ name:"" } } componentDidMount(){ this.setState({ name:this.props.name }) } } const FunctuinalComponent=(props)=>{ const [name,setName]=useState(""); useEffect(()=>setName(props.name),[]) } كما تﻻحظ أن الشفرة البرمجية أصبحت أقل حجماً, أقل تعقيدا, وأسهل للإستخدام ﻻ تحتاج لربط الدوال , ففي class components تحتاج لربط الدوالmethod binding حتى تستطيع إستخدامها class ComponentClass extends React.component{ constructor(){ /////initialization code this.handleClick=this.handleClick.bind(this); } handleClick(e){ ///do something } }

كلمة generic مشتقة من كلمة general بمعني "العمومية" بمعني أن تجعل الكائن أو الدالة لديك تقبل أنواع عامة من البيانات وليست أنواع محددة , سيتوضح لك الأمر من الأمثلة القادمة: إفترض أن لدينا نوع من هياكل البيانات وهو عبارة عن قائمة, إن أردنا إنشائها بدون ال generics نحتاج إلى إضافة دوال بهذا الشكل حتى تكون قادرة على التعامل مع مختلف العناصر public int insertElement(int element){ this.list.push(element); } public double insertElement(double element){ this.list.push(element); } public float insertElement(float element){ this.list.push(element); } ولكن بإستخدام الgenerics يمكننا القيام بهذه المهمة بشكل أسهل كما في هذا الشكل: public <T> insertElement(T element){ ///الشفرة لإضافة العنصر }