اذهب إلى المحتوى

Salah Eddin Beriani2

الأعضاء
 عرض الملف الشخصي  تصفح المحتوى

  • المساهمات

    847

  • تاريخ الانضمام

  • تاريخ آخر زيارة

 نوع المحتوى 

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

كل منشورات العضو Salah Eddin Beriani2

  1. Salah Eddin Beriani2
    كلاهما يمثل paradigm اي أسلوب أو "طريقة" من البرمجة و تختلف نماذج البرمجة عن بعضها البعض بناءً على الميزات والأسلوب الذي تدعمه فهناك العديد من الميزات التي تحدد نموذج البرمجة مثل الوحدات النمطية أو الكائنات أو المقاطعات أو الأحداث و لكل نموذج برمجة ميزته الخاصة لذلك من الأفضل معرفة مكان استخدامه قبل استخدامه و تعد اللغات الموجهة للكائنات oop جيدة عندما يكون لديك مجموعة ثابتة من العمليات على الأشياء ومع تطور التعليمات البرمجية الخاصة بك فإنك تقوم في المقام الأول بإضافة أشياء جديدة يمكن تحقيق ذلك عن طريق إضافة فئات ضمن الفئات القديمة. اما البرمجة الوظيفية functional programming فهي جيدة عندما يكون لديك مجموعة ثابتة من الأشياء ومع تطور شفرتك فإنك تضيف بشكل أساسي عمليات جديدة على الأشياء الموجودة يمكن تحقيق ذلك عن طريق إضافة وظائف جديدة تحسب مع أنواع البيانات الموجودة من الممكن أيضًا استخدام كل من نماذج البرمجة وفقًا لاحتياجاتنا الخاصة نظرًا لأن لدينا لغات مثل python و java وما إلى ذلك تدعم كلا من المفاهيم الموجهة للكائنات oop وتعمل أيضًا بالبرمجو الوظيفية functional programming
  2. Salah Eddin Beriani2
    يمكنك الخلط بين find و include لتحصل على بحث محسن قليلا بحيث يخولك لتبحث ليس فقط على العنوان وأيضا على الكاتب والأشياء الأخرى let books = [ [1, 'Start with why', 'Simon Sinek', 80.0, 13], [2, 'But how do it know', 'J. Clark Scott', 59.9, 22], [3, 'Clean Code', 'Robert Cecil Martin', 50.0, 5], [4, 'Zero to One', 'Peter Thiel', 47, 12], [5, "You don't know JS", 'Kyle Simpson', 39.9, 9], ]; const book = books.find((book) => book.includes('Zero to One')); لبحث متقدم بحيث لا يجب عليك مثلا توفير العنوان كاملا او اسم الكاتب كاملا يمكنك اظافة map let books = [ [1, 'Start with why', 'Simon Sinek', 80.0, 13], [2, 'But how do it know', 'J. Clark Scott', 59.9, 22], [3, 'Clean Code', 'Robert Cecil Martin', 50.0, 5], [4, 'Zero to One', 'Peter Thiel', 47, 12], [5, "You don't know JS", 'Kyle Simpson', 39.9, 9], ]; const book = books.find((book) => { const res = book.map((el) => { if (typeof el === 'string') return el.includes('Zero'); return false; }); return res.includes(true); });
  3. Salah Eddin Beriani2
    عندما يشتغل المكون للمرة الأولى سيضع condition false وبالتالي Link لن يكون mounted غير موجود للتفاعل معه وفي useeffect سيشتغل السطر ali.current.click() على مكون غير موجود وبالتالي انت عندما وضعت الشرط if condition وكأنك قلت تفاعل مع Link فقط عندما يكون mounted وبازالة الشرط سيصبح لديك هذا الخطأ
  4. Salah Eddin Beriani2
    يمكنك استعمال مكتبة react-i18next أولا قم بتثبيتها npm install react-i18next i18next --save // اذا كنت تريد دمج التحقق التلقائي للغة فستضيف أيضا هذه المكتبات npm install i18next-http-backend i18next-browser-languagedetector --save قم بإنشاء ملف جديد i18n.js بجانب index.js الخاص بك يحتوي على المحتوى التالي: import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import Backend from 'i18next-http-backend'; import LanguageDetector from 'i18next-browser-languagedetector'; i18n .use(Backend) .use(LanguageDetector) .use(initReactI18next) .init({ fallbackLng: 'en', debug: true, interpolation: { escapeValue: false, } }); export default i18n; ثم قم باستيراد ذلك في index.js: import React, { Component } from "react"; import ReactDOM from "react-dom"; import App from './App'; import './i18n'; ReactDOM.render( <App />, document.getElementById("root") ); قم بإنشاء ملف جديد public / locales / <language_code> /translation.json مع نموذج المحتوى التالي مثلا سيكون هناك في public / locales / en /translation.json { "title": "Welcome", } و في public / locales / ar /translation.json { "title": "مرحبا", } ثم بكل سهولة يمكنك استعمال الترجمة كالتالي import React, { Suspense } from 'react'; import { useTranslation } from 'react-i18next'; function MyComponent() { const { t, i18n } = useTranslation(); return <h1>{t('title')}</h1> } export default function App() { return ( <Suspense fallback="loading"> <MyComponent /> </Suspense> ); }
  5. Salah Eddin Beriani2
    بافتراض تصميمك كالتالي فيمكنك استعمال flexbox في كلتا الحالتين على النحو التالي <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> .login { display: flex; justify-content: center; align-items: center; height: 100vh; } .logo { display: flex; justify-content: center; } </style> <body> <div class="login"> <div class="logo"> <h1>logo</h1> </div> <form action="">...</form> </div> </body> </html>
  6. Salah Eddin Beriani2
    personContext معرفة داخل المكون Context مما يعني انها scoped ويمكن قراءتها فقط من داخل المكون Context لقد قمت ببناء الهيكلة التي تريد تحقيقها يمكنك ملاحظة التغييرات في الأسفل import "./styles.css"; import React, { useContext, useState } from "react"; const PersonContext = React.createContext(); export default function App() { const [people, setPeople] = useState([{ name: "salah" }]); const removePeople = () => { console.log("removed"); }; return ( <PersonContext.Provider value={{ people, setPeople, removePeople }}> <List></List> </PersonContext.Provider> ); } function List() { const { people } = useContext(PersonContext); console.log("access people in list", people); return ( <div > <h1>list of people</h1> <SinglePerson></SinglePerson> </div> ); } function SinglePerson() { //access removePeople from SinglePerson const { removePeople } = useContext(PersonContext); return ( <div> <h1>single person</h1> <button onClick={removePeople}>remove</button> </div> ); }
  7. Salah Eddin Beriani2
    المشكلة هي في فتح الاتصال بقاعدة البيانات من Thread ثم التعامل معها من thread اخر و الحل هو فتح الاتصال في الدالة نفسها ثم أداء التعاملات مع القاعدة ثم غلقها في الدالة @app.route('/api/v1/register', methods=['POST']) def register(): form = RegisterForm(request.form) if form.validate(): name = form.name.data email = form.email.data username = form.username.data password = form.password.data conn = sql.connect("database-name.db") cur = conn.cursor() cur.execute("INSERT INTO users(name,email,username,password) VALUES(?,?,?,?)", [name, email, username, password]) conn.commit() conn.close() أو يمكنك الحاق المعامل check_same_thread=False عند انشاء المحرك الخاص بقاعدة البيانات engine = create_engine( 'sqlite:///restaurantmenu.db', connect_args = { 'check_same_thread': False } )
  8. Salah Eddin Beriani2
    يوجد موقع عربي لحل التحديات البرمجية انصح بالتمرن هناك لحل المشاكل https://coderhub.sa/challenges اذا كنت تريد موقع انجليزي ف hackerrank من أفضل المواقع لتنمية المهارات
  9. Salah Eddin Beriani2
    للعثور على الحل في الغالب انت فقط تحتاج لبعض ال console.logs const storage = multer.diskStorage({ destination: function (req, file, cb) { const isValid = FILE_TYPE_MAP[file.mimetype]; let uploadError = new Error("invalid image type"); if (isValid) { uploadError = null; } cb(uploadError, "public/uploads"); }, filename: function (req, file, cb) { const fileName = file.originalname.split(" ").join("-"); console.log(filename) // تحقق هنا const extension = FILE_TYPE_MAP[file.mimetype]; cb(null, `${fileName}-${Date.now()}.${extension}`); }, }); وأيضا router.put( "/gallery-images/:id", uploadOptions.array("images", 10), // الاسم هنا مهم ويجب أن يستعمل في الواجهة async (req, res) => { const files = req.files; let imagesPaths = []; const basePath = `${req.protocol}://${req.get("host")}/public/uploads/`; console.log("basePath",basePath)// تحقق هنا if (files) { files.map((file) => { imagesPaths.push(`${basePath}${file.filename}`); }); } console.log("imagesPaths",imagesPaths)// تحقق هنا console.log("req.params.id",req.params.id)// تحقق هنا const product = await ProductModel.findByIdAndUpdate( req.params.id, { images: imagesPaths, }, { new: true } ); if (!product) return res.status(500).send("the gallery cannot be updated!"); res.send(product); } ); تحقق أيضا من ال model الخاص بك ProductModel
  10. Salah Eddin Beriani2
    عادة للقيام بالاختراق من النوع الذي قلت عنه يجب ان يكون المستخدم الذي سيخترق مهمل لحاسوبه ليقع في أيدي الغرباء أو يتصل بشبكات wifi لا يملكها لكن هناك الكثير من الطرق لزيادة الحماية فمثلا هناك طبقة حماية يمكن اضافتها تسمى two factor authentication هذه تعمل مثلا عند تسجيل المستخدم للدخول ترسل له رسالة للهاتف تحمل 6 أرقام يقوم هو بادخالها هذه تؤكد لك أن المستخدم استعمل هاتفه بحيث الرسالة ستصله للرقم الهاتف الذي حدده هو
  11. Salah Eddin Beriani2
    عند تسجيل المستخدم الدخول سيقوم بارسال بيانات تسجيل الدخول الى الخادم ويمكن مثلا ان تكون بريد الكتروني وكلمة سر أنت تتحقق من البيانات التي تم ارسلها لك اذا كان حقا هناك مستخدم بالمعلومات التي تم ارسالها لك اذا وجدت مستخدم مسجل ستستخرج بياناته من قاعدة البيانات ويمكن ان تكون بالشكل التالي { "id":1, "username":"salah" } عن استخراج البيانات ستقوم بتشفيرها وانتاج jwt وسيكون من الصعب قراءته مثلا sdf1sd1ffF12f12F21f12F12f1212F12DS1F1F1S هذا تقوم بارساله للواجهة حيث مطور الواجهة سيستخدمه في المستقبل في طلبات المستخدم أي أنه سيتم ارسال لك التوكن مرة أخرى بافتراض مثلا أن المستخدم salah أراد تغيير كلمة السر الخاصة به سيرسل لك البيانات الجديدة مرفوقة بالتكوكن التي أرسلته اليه لتفك التشفير عن التوكن وتتاكد من هوية المستخدم
  12. Salah Eddin Beriani2
    مرحبا اذا كنت جادة حول الموضوع ففكرة توفير حاسوب مكتبي او محمول ضرورية جدا لبدء التعلم لذا أنصحك بايجاد طريقة لتحصيل وتوفير بعض النقود وشراء حاسوب بمعايير متوسطة فهو ليس مكلف كثيرا ويمكنك الحصول على حاسوب بسعر جيد ثم بعد ذلك يجب أن تتعودي على العمل بحاسوب لبعض الوقت فذلك سيساعد في مرحلة بدء التعلم وبعد توفر الشرطين السابقين يمكنك البحث عن المسار التعليمي التي تريدين التوجه فيه و جمع مصادر عنه للمبتدئين وتبدئي رحلتك لتحصيل العلم في المسار المختار ويمكنك ايجاد الكثير من المقالات والاسئلة المجاب عنها في أكاديمية حاسوب وكما انصحك باتقان اللغة الانجلزية لمدى متوسط لتساعدك في تحصيل العلم من مصادر أجنبية
  13. Salah Eddin Beriani2
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> #container { display: none; } </style> <body> <button id="show" onclick="show()">show detials</button> <div id="container"> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> <button onclick="hide()">less detials</button> <button>book</button> </div> </body> <script> var x = document.getElementById('container'); //تحديد الحاوية var b = document.getElementById('show'); // تحديد زر الاظهار function show() { x.style.display = 'block'; // اظهار الحاوية b.style.display = 'none'; //اخفاء زر الاظهار } function hide() { x.style.display = 'none'; // اخفاء الحاوية b.style.display = 'block'; // اظهار زر الاظهار } </script> </html> هذا مثال واضح اقرايه جيدا وستستطيعين تنفيذ ما تريدين
  14. Salah Eddin Beriani2
    اذا كان تساؤلك عن طريقة لتواجد bootstrap في المشروع والعمل بدون انترنت يعني تجنب التضمين عبر cdn فيمكنك تثبيته في المشروع عبر هذه الاوامر composer require laravel/ui بعد تثبيت الحزمة بنجاح نقوم بتثبيت Bootstrap 4 في تطبيقنا باستخدام الأمر التالي php artisan ui bootstrap يمكنك أيضًا تثبيت مكتبات المصادقة باستخدام الأمر التالي بدلاً من ذلك php Artisan ui bootstrap --auth أخيرًا تحتاج إلى تثبيت حزمة bootstrap والاعتماديات ذات الصلة بالواجهة الأمامية مثل jquery باستخدام الأمر التالي npm install
  15. Salah Eddin Beriani2
    بالجافاسكريبت يمكنك فعل ذلك بسهولة عن طريق التلاعب بخاصية display في css <button onclick="myFunction()">show</button> <tabel id="table"> ... </table> function myFunction() { var x = document.getElementById("table"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } ويمكنك استخدام الاستراتيجية ذاتها لاخفاء زر الاظهار مثلا واظهار زر الاخفاء
  16. Salah Eddin Beriani2
    الملف .env يعمل فقط في بيئة التطوير أي انه لا يجب أن ترفعه الى اي مكان فعمله ينتهي في حاسوبك ولهذا يجب تجاهله عن الرفع على github وبالنسبة ل heroku فانت أي متغير بيئي مستخدم من طرفك في المشروع يجب وضعه في ال config vars ولن تكون هناك مشكلة لأن مشروعك سيتغذى على متغيرات البيئة الموضوعة في config vars ملاحظة عند تغيير متغيرات البيئة config vars يجب عمل restart ل dyno لتأخذ الفعالية
  17. Salah Eddin Beriani2
    في javascript يمكنك تنفيذ شئ كالتالي for (let i = 1; i < 6; i++) { console.log('*'.repeat(i)); } بما انك تريد التوقف عند 5 نجوم فيمكنك تحديد بدء الطباعة من 1 والتوقف عند 5 أي أقل من 6 ولاحظ هناك وظيفة في strings تخول لتكرير حرف أو علامة ما وهي الوظيقة repeat ويمكن ايجاد مثيلاتها في لغات برمجة اخرى * ** *** **** *****
  18. Salah Eddin Beriani2
    اذا كانت items هي ال state الخاص بذلك الجزء ففي react هذا يعد سئ جدا رغم انه في javascript طبيعي فطريقة تغييرك لل state items هنا items[item.id] = item; ستسبب مشاكل ولن تعمل معك و في حالتك الحل ببساطة سيكون ان تستخدم setItems فقط بهذه الطريقة const addItem = (item) => { setItems((prev)=>({...prev, [item.id]:item})); } يمكنك الاطلاع على هذا المقال فهو يوفر بعض المفاهيم القريبة للموضوع
  19. Salah Eddin Beriani2
    تسمح لك تعليمات RUN بتثبيت التطبيقات والحزم المطلوبة وتنفذ الاوامر في طبقة عالية على الصورة المشأة و غالبًا ما ستجد تعليمات RUN متعددة في Dockerfile. تعليمات CMD تسمح لك بتعيين أمر افتراضي والذي سيتم تنفيذه فقط عند تشغيل الحاوية دون تحديد أم إذا تم تشغيل حاوية Docker بأمر فسيتم تجاهل الأمر الافتراضي إذا كان Dockerfile يحتوي على أكثر من تعليمة CMD فسيتم تجاهل تعليمات CMD. لذا الحل هو أن تستعمل run في هذه الحالة بدل cmd
  20. Salah Eddin Beriani2
    function printNums(n) { if (!Number.isInteger(n)) return; // التحقق من العدد const nums = [...Array(n + 1).keys()]; // انشاء قائمة تحتوي أرقام من 0 الى العدد nums.map((num) => console.log(num.toString())); // انشاء حلقة لطبع الأعداد على شكل نص } printNums(9);
  21. Salah Eddin Beriani2
    يوجد العديد من بوابات الدفع الالكتروني والكل يتنافس بطريقته ويحاول استغلال شريحة معين من الزبائن لكن يبقى التقارب بينهم ملحوظ وهذه السبعة شركات المنصوح بها لأفضل بشكل عام: Authorize.Net الوصيف للأفضل بشكل عام: stripe الأفضل للأعمال التجارية عبر الإنترنت: PayPal الأفضل لشركات الطوب والملاط: Square الأفضل للشركات الناشئة: Braintree الأفضل للقنوات المتعددة: WePay الأفضل للبيع دوليًا: 2Checkout أنصحك بالتحقق من كل واحد منهم لاختيار بوابة دفع مناسبة لك
  22. Salah Eddin Beriani2
    يمكنك استخدام input type button وسيعمل معك دون مشاكل وسيلبي حاجتك في هذه الحالة <form> <input type="search" placeholder="Search" /> <input type="button" onclick="location.href='search.html';" value="Go to Search" /> </form> كما اذا أردت زر لاطلاق ال form يمكنك اضافة button type submit لذلك <form > <input type="search" placeholder="Search" /> <input type="button" onclick="location.href='search.html';" value="Go to Search" /> <button class="btn btn-success" type="submit">submit</button> </form> في هذه الحالة سيكون لديك زر التوجيه للصفحة search.html وزر اطلاق لل form
  23. Salah Eddin Beriani2
    اذا كنت تستخدم atlas تأكد من أنك عملت whitelist لل ip الخاص بالسيرفر لكي يتمكن من الاتصال بقاعدة البيانات كما يمكنك فتح صلاحية الاتصال مؤقتا للجميع عبر وضع ال ip 0.0.0.0 ولكن للتطوير فقط وأيضا تحقق جيدا من متغيرات البيئة الخاصة بالاتصال بقاعدة البيانات وبعد هذا قم بعمل restart لل dyno لتحديثه
  24. Salah Eddin Beriani2
    الأمر جدًا بسيط فقط قم بعمل compile لمشروعك flutter build web ستحصل على مجلد build داخله مجلد web /build/web قم بنسخ المجلد الى خادم IIS في مجلد website و هذا كل شئ
  25. Salah Eddin Beriani2
    هناك عدة هجمات لكن أكثر الهجمات خطورة هي التي تعطي المهاجم صلاحيات دخول لل server وعادة يقومون بهذه بتحليل ال server لرؤية ما تم تأمينه ويمكنهم انشاء هجوم bruteforce لايجاد كلمة السر ولكن هناك طرق للحماية وتقليل الأخطار ورفع مستوى الأمان منها تحديث النظام الخاص بك يقدم مطورو التوزيعات وأنظمة التشغيل تحديثات متكررة لحزم البرامج ، غالبًا لأسباب أمنية. يعد ضمان تحديث التوزيع أو نظام التشغيل نقطة أساسية لتأمين VPS الخاص بك. تغيير منفذ استماع SSH الافتراضي من أول الأشياء التي يجب القيام بها على الخادم تهيئة منفذ الاستماع لخدمة SSH. تم تعيينه على المنفذ 22 افتراضيًا ، وبالتالي فإن محاولات اختراق الخادم بواسطة الروبوتات ستستهدف هذا المنفذ. يعد تعديل هذا الإعداد باستخدام منفذ مختلف إجراءً بسيطًا لتقوية الخادم الخاص بك ضد الهجمات الآلية. إنشاء مستخدم بحقوق مقيدة بشكل عام ، يجب تنفيذ المهام التي لا تتطلب امتيازات root عبر مستخدم عادي. تعطيل الوصول إلى الخادم عبر المستخدم root يتم إنشاء المستخدم root افتراضيًا على أنظمة GNU / Linux. الوصول إلى root يعني الحصول على معظم الأذونات على نظام التشغيل. ليس من المستحسن بل من الخطير أن تترك الخادم الافتراضي الخاص بك متاحًا فقط عبر root، حيث يمكن لهذا الحساب أن يؤدي عمليات ضارة بشكل لا رجعة فيه. تثبيت Fail2ban Fail2ban هو إطار عمل برمجي لمنع التطفل مصمم لحظر عناوين IP غير المعروفة التي تحاول اختراق نظامك. يوصى باستخدام حزمة البرامج هذه للحماية من أي هجمات عنيفة على خدماتك.
×
×
  • أضف...