ابراهيم حمدى2
-
المساهمات
220 -
تاريخ الانضمام
-
تاريخ آخر زيارة
-
عدد الأيام التي تصدر بها
1
نوع المحتوى
ريادة الأعمال
البرمجة
التصميم
DevOps
التسويق والمبيعات
العمل الحر
البرامج والتطبيقات
آخر التحديثات
قصص نجاح
أسئلة وأجوبة
كتب
دورات
أجوبة بواسطة ابراهيم حمدى2
-
-
من فضلكم ماذ تعنى رسالة الخطأ التالية
431 Request Header Fields Too Largeوما هى الحالات التى تسبب هذا الخطأ
-
2
-
-
إصدار bootstrap 5.1.3
تم التعديل بالاعلى
-
بتاريخ 2 دقائق مضت قال محمد أبو عواد:
هل يمكنك ارفاق الكود الخاص بملف package.json لكي نتأكد من اصدار حزمة بوتستراب لديك؟
{ "name": "safarnysite", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack serve --mode development", "dist": "webpack serve --mode production" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@fortawesome/fontawesome-free": "^5.15.1", "bootstrap": "^5.1.3", "clean-webpack-plugin": "^4.0.0", "css-loader": "^5.0.0", "file-loader": "^6.2.0", "html-loader": "^1.3.2", "html-webpack-plugin": "^5.5.0", "jquery": "^3.6.0", "mini-css-extract-plugin": "^2.6.0", "popper.js": "^1.16.1", "sass": "^1.49.9", "sass-loader": "^12.6.0", "url-loader": "^4.1.1", "webpack": "^5.70.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.7.4" }, "repository": { "type": "git", "url": "git+https://github.com/IBRHMHMDY/SafarnySite.git" }, "bugs": { "url": "https://github.com/IBRHMHMDY/SafarnySite/issues" }, "homepage": "https://github.com/IBRHMHMDY/SafarnySite#readme", "description": "" } -
بتاريخ 40 دقائق مضت قال محمد أبو عواد:
تأكد أن الخاصية data-target في الزر الخاص بالمودل له نفس قيمة الخاصية id للمودل , لاحظ
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> ^^^^^^^^^^^^^^^^^^^^^^^^^^^ Launch demo modal </button> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> ^^^^^^^^^^^^^^^^
تأكد أنك نسخت الكود الخاص بالمكون مودل التابع للاصدار الذي تعمل عليه ,لو كنت تعمل على الاصدار الرابع من بوتستراب فتأكد أنك تستخدم المكون الخاص بالاصدار الرابع , وبالمثل للاصدار الخامس , تأكد انك تضمن ملف jquery و Popper.js اذا كنت تستخدم الاصدار الرابع من بوتستراب
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
انا اعمل على webpack ولا يوجد اى اخطاء تظهر حتى jquery يعمل ويظهر ids فى مكانه ومع ذلك لا يظهر modal
-
1
-
-
قمت بمراجعة الكود اكثر من مرة ولكن لا يعمل
لا يظهر modal box رغم عدم ظهور اى اخطاء فى console
Code html
<div class="container"> <div class="row"> <div class="row"> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="image-gallery-image" data-toggle="modal" data-title="egypt-1" data-image="./images/EGYPT-G1.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="./images/EGYPT-G1.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-2" data-image="./images/EGYPT-G2.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="./images/EGYPT-G2.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-3" data-image="./images/EGYPT-G3.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="./images/EGYPT-G3.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-4" data-image="./images/EGYPT-G4.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="./images/EGYPT-G4.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-5" data-image="./images/EGYPT-G5.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="./images/EGYPT-G5.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-6" data-image="./images/EGYPT-G6.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="./images/EGYPT-G6.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-7" data-image="./images/EGYPT-G7.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="./images/EGYPT-G7.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-8" data-image="./images/EGYPT-G8.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="./images/EGYPT-G8.jpg" alt="Another alt text"> </a> </div> </div> <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="image-gallery-title"></h4> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span> </button> </div> <div class="modal-body"> <img id="image-gallery-image" class="img-responsive col-md-12"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary float-left" id="show-previous-image"><i class="fa fa-arrow-left"></i> </button> <button type="button" id="show-next-image" class="btn btn-secondary float-right"><i class="fa fa-arrow-right"></i> </button> </div> </div> </div> </div>
Code JS
$(function() { // Gallery Tours let modalId = $('#image-gallery'); loadGallery(true, 'a.thumbnail'); //This function disables buttons when needed function disableButtons(counter_max, counter_current) { $('#show-previous-image, #show-next-image').show(); if (counter_max === counter_current) { $('#show-next-image').hide(); } else if (counter_current === 1) { $('#show-previous-image').hide(); } } /** * * @param setIDs Sets IDs when DOM is loaded. If using a PHP counter, set to false. * @param setClickAttr Sets the attribute for the click handler. */ function loadGallery(setIDs, setClickAttr) { let current_image, selector, counter = 0; $('#show-next-image, #show-previous-image').on('click',function () { if ($(this).attr('id') === 'show-previous-image') { current_image--; } else { current_image++; } selector = $('[data-image-id="' + current_image + '"]'); updateGallery(selector); }); function updateGallery(selector) { let $sel = selector; current_image = $sel.data('image-id'); $('#image-gallery-title').text($sel.data('title')); $('#image-gallery-image').attr('src', $sel.data('image')); disableButtons(counter, $sel.data('image-id')); } if (setIDs == true) { $('[data-image-id]').each(function () { counter++; $(this).attr('data-image-id', counter); }); } $(setClickAttr) .on('click', function () { updateGallery($(this)); }); } });Code SCSS
#image-gallery { .modal-footer{ display: block; } } .thumb{ margin-top: 15px; margin-bottom: 15px; }-
1
-
-
لا تظهر اى اخطاء ولكن الصور لم تظهر فى المتصفح عند التعديل فى sass فقط
-
أنا اعمل على مشروع بإستخدام webpack اخر اصدار وعند التعديل على ملف sass أثناء تشغيل السيرفر يتم عمل تحديث للصفحة ولكن الصور لا تظهر وعند عمل تعديل فى اى ملف اخر مثل ملف index.html مثلا تعود للعمل مرة أخرى فهل هذه مشكلة بالإصدارات وما هى الإصدارات المتوافقه بين CSS و SASS و URL
-
1
-
-
قمت بإزالة مجلد node_module وإعادة الأمر
npm iثم تشغيل السيرفر
npm run devشكرا لكم
-
-
هل هناك حل لهذه المشكلة
-
-
1
-
-
ليست خاصة بالدورات هذا مشروع التخرج
-
قمت بتنصيب fontawesome 5.15.4 وإضافة المسار الى ملف js وكود تجميع الخطوط الى ملف webpack.config.js من خلال url-loader وقمت بتشغيل السيرفر فيظهر لى رسالة خطأ كما فى المرفقات
-
بالفعل لم يتم نقل ملف اللوجو عند التجميع فى المجلد الصور
-
1
-
-
لم تظهر صورة اللوجو بإمتداد png رغم ان صورة الخلفية تظهر وذلك بإستخدام الإصدار الأخير من webpack فما الحل
مع العلم أن صورة الخلفية كانت لا تريد الظهور حتى قمت بإنزال إصدار خاص بـ html-loader@1.3.2" و css-loader@5.0.0
هذا ملف package.json
{ "name": "safarnysite", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack serve --mode development", "dist": "webpack serve --mode production" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "bootstrap": "^5.1.3", "clean-webpack-plugin": "^4.0.0", "css-loader": "^5.0.0", "file-loader": "^6.2.0", "html-loader": "^1.3.2", "html-webpack-plugin": "^5.5.0", "jquery": "^3.6.0", "mini-css-extract-plugin": "^2.6.0", "popper.js": "^1.16.1", "sass": "^1.49.9", "sass-loader": "^12.6.0", "url-loader": "^4.1.1", "webpack": "^5.70.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.7.4" } }وهذا ملف webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const path = require('path'); module.exports = { entry: './src/js/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'js/[name].bundle.js', // clean: true, }, // optimization: { // chunkIds: false, // }, stats: { warnings: false, }, performance: { maxEntrypointSize: 400000, maxAssetSize: 100000, hints: false, }, devServer: { static: { directory: path.join(__dirname, 'dist'), }, devMiddleware:{ writeToDisk: true, }, // compress: true, port: 9000, open: true, // livereload: false, hot: false, }, module: { rules: [ { test: /\.(css|sass|scss)$/i, use: [ // Creates `style` nodes from JS strings MiniCssExtractPlugin.loader, // Translates CSS into CommonJS "css-loader", // Compiles Sass to CSS "sass-loader", ], }, { test: /\.(jpe?g|png|gif)$/, use: { loader: 'url-loader', options:{ name: '[name].[ext]', outputPath:'images', limit: 8192, } }, }, { test: /\.(svg|eot|woff|woff2|ttf)$/, use: { loader: 'url-loader', options:{ name: '[name].[ext]', outputPath:'fonts', limit: 8192, } }, }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', filename: 'index.html', }), new MiniCssExtractPlugin({ filename: 'css/[name].bundle.css', }), // new CleanWebpackPlugin({ // dry: true, // verbose: true, // }), ], };-
1
-
-
بتاريخ 12 دقائق مضت قال محمد أبو عواد:
هل يمكنك ارفاق كود معالجة الصور وملفات css الموجود في ملف webpack.config وأيضا محتوى ملف package.json ؟
بالطبع تفضل
ملف webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const path = require('path'); module.exports = { entry: './src/js/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'js/[name].bundle.js', clean: true, }, optimization: { chunkIds: false, }, stats: { warnings: false, }, performance: { maxEntrypointSize: 400000, maxAssetSize: 100000, hints: false, }, devServer: { static: { directory: path.join(__dirname, 'dist'), }, devMiddleware:{ writeToDisk: true, }, // compress: true, port: 9000, open: true, // livereload: false, hot: false, }, module: { rules: [ { test: /\.(css|sass|scss)$/i, use: [ // Creates `style` nodes from JS strings MiniCssExtractPlugin.loader, // Translates CSS into CommonJS "css-loader", // Compiles Sass to CSS "sass-loader", ], }, { test: /\.(jpe?g|png|gif)$/, use: { loader: 'url-loader', options:{ name: '[name].[ext]', outputPath:'images', limit: 8192, } }, }, { test: /\.(svg|eot|woff|woff2|ttf)$/, use: { loader: 'url-loader', options:{ name: '[name].[ext]', outputPath:'fonts', limit: 8192, } }, }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', filename: 'index.html', }), new MiniCssExtractPlugin({ filename: 'css/[name].bundle.css', }), new CleanWebpackPlugin({ dry: true, verbose: true, }), ], };وملف الSCSS
header{ background: url('../images/header.jpg'); background-size: cover; background-position: center; }
وملف الpackage.json
{ "name": "safarnysite", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack serve --mode development", "dist": "webpack serve --mode production" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "bootstrap": "^5.1.3", "clean-webpack-plugin": "^4.0.0", "css-loader": "^6.7.1", "file-loader": "^6.2.0", "html-loader": "^3.1.0", "html-webpack-plugin": "^5.5.0", "jquery": "^3.6.0", "mini-css-extract-plugin": "^2.6.0", "popper.js": "^1.16.1", "sass": "^1.49.9", "sass-loader": "^12.6.0", "url-loader": "^4.1.1", "webpack": "^5.70.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.7.4" } }-
1
-
-
لقد وضعت وبحثت عن كل الاكواد لإبطال توليد الملفات العشوائية ولكن دون جدوى أرجو الحل حيث أضفت صورة من خلال scss فقام بقراءة الملف العشوائى الخارجى ولم تظهر الصورة
-
1
-
-
ظهر لى هذا الخطأ عندما طبقت الأكواد السابقة
[webpack-cli] ReferenceError: root is not defined
-
بحثت ولم أصل الى حل واضفت الأكواد وعدلت فيها ولم يحدث شيئا جديدا
مازالت مشكلة توليد الملفات موجودة
-
بتاريخ 14 دقائق مضت قال Wael Aljamal:
لحل مشكلة التحذيرات، نضيف الكائن performance لإعداد webpack
بالشكل التالي: (إخفاء تنبيهات الأداء -منها حجم الملفات) وزيادة حجم الملفت المقبولة لكي لا تظهر الرسالة مجدداً ل 244 كيلو بايت مثلاً..
حاول إضافة التالي لملف إعداد ويب باك
module.exports = { //... performance: { maxEntrypointSize: 400000, maxAssetSize: 100000, hints: false, }, };كما نضع stats في dev server ونبطل التحذيرات
devServer: { ... stats: { warnings: false } },إختفت التحذيرات بالفعل ولكن الملفات العشوائية عادت مرة أخرى
-
بتاريخ 21 دقائق مضت قال Wael Aljamal:
هذه ليست مشكلة، إنما مع عمل تعديلات على الشيفرة يقوم مخدم ويب باك بإرسال التعديلات للمتصفح على شكل ملفات جافاسكربت صغيرة وهذه يمكن إيقاف كتابتهم على القرص من خلال خواص webpack dev server.
هي تدعى مثل hot reload أي إعادة التحميل السريع يمكن إيقافها بإضافة hot بقيمة false لكائن dev server
مثل:.
devServer { hot: false }ضمن كائن إعداد ويب باك webpack config، كما في التوثيق:
module.exports = { //... devServer: { hot: true, // أضف هذه }, };عند التشغيل تظهر هذه الرسالة حتى بعد إستخدام الامر السابق hot: true
أعلم أنه تنبيه فقط ولكن يظهر دائما عند تشغيل المشروع فى وضع الإنتاج
-
عند تشغيل الموقع يقوم بتوليد ملفات عشوائية بإمتداد js حتى ظهر لى هذا الخطأ كما موضح بالصور
أرجو شرح ماذا يعنى ولماذا يتم توليد هذه الملفات وماذا تعنى رسالة الخطأ
-
1
-
-
بتاريخ 6 دقائق مضت قال Hassan Hedr:
تأكد من إدراج الربط لملف تنسيق bootstrap-rtl ضمن صفحات HTML ضمن موقعك عبر إضافة الوسم التالي
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
بعدها يجب تعيين كل من الخواص dir بالقيمة rtl و lang بالقيمة ar على العنصر الجذر html ضمن الصفحات ليتم تطبيق خواص التنسيق من اليمين إلى اليسار ضمن الصفحة بشكل سليم، يصبح الوسم لديك كالتالي:
<html lang="ar" dir="rtl"> ...
عفوا أنا لاأريد إدراجه بالطريقة الإعتيادية أريد إستخدام أوامر عن طريق NPM
-
1
-
-
السلام عليكم
أعمل على مشروع التخرج وأريد إستخدام آخر إصدار من bootstrap-rtl 5 مع nodejs آخر إصدار ولكن لم أجد الطريقة لإستدعاءه وبحثت كثيرا ولكن لم اجد شئ عنه
-
1
-
كيفية تشغيل التطبيق على الموبايل ReactNative+Expo
في جافا سكريبت
نشر
السلام عليكم
قمت بإنهاء التطبيق وإختبرت تشغيله قبل النشر على Expo ثم قمت بإستخراج ملف apk وقمت بتنصيبه على هاتفى المحمول وفتح معى :
هناك عدة أسئلة وأرجو الإجابة بشرح وبتوضيح مستفيض :
- ولكن عند ملء البيانات والضغط "إنشاء حساب" يظهر رسائل الخطأ كأنى لم أدخل البيانات بالحقول فهل هذا معناه أنه لا يتصل بقاعدة البيانات ام أن هناك شئ آخر خطأ ؟
- الجزء الخاص بالسيرفر هل نرفعه على سيرفر إستضافة وكيف يتم إختبار العمل من خلاله؟
- فإذا كان الامر كذلك معظم السيرفرات تدعم MYSQL فكيف ننصب قاعدة بيانات postgresQL على سيرفر يدعم MySQL فقط
- إذا اردت رفع الملف على google play كيف أضمن أنه يتصل بالسيرفر ويعمل قبل الرفع ؟
شكرا لكم