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

عبد النور محمد

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

  • المساهمات

    95

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

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

 نوع المحتوى 

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

البرمجة

التصميم

DevOps

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

العمل الحر

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

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

قصص نجاح

أسئلة وأجوبة

كتب

دورات

كل منشورات العضو عبد النور محمد

  1. عبد النور محمد
    هذا هو سير العمل الحالي الخاص بي لاستيراد الصور والأيقونات في webpack عبر ES6: import cat from './images/cat1.jpg' import cat2 from './images/cat2.svg' import doggy from './images/doggy.png' import turtle from './images/turtle.png' <img src={doggy} /> لكن هذا سرعان ما يصبح فوضوي وأريد شئ مثل هذا import * from './images' <img src={doggy} /> <img src={turtle} /> هل هناك طريقة ما لاستيراد جميع الملفات ديناميكيًا من دليل معين كملحق لاسمها ، ثم استخدام هذه الملفات حسب الحاجة.
  2. عبد النور محمد
    لماذا عند ارفاق src لصورة خارجية في مكون image احصل على خطا أنه لا يمكن جلب تلك الصورة <Image alt="" src="https://images.unsplash.com/photo-1464375117522-1311d6a5b81f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2250&q=80" width={2250} height={1390} layout="responsive" />
  3. عبد النور محمد
    لدي مشروع PHP حالي مع jquery و bootstrap ، ولا يستخدم أي إطار عمل للواجهة الأمامية. أحاول استخدام أداة تجميع وحدات webpack لإنشاء نقطة دخول واحدة لموارد مشروعي ، وإدارة تبعيات js باستخدام مدير حزم العقدة js ، وتشغيل المهام على شكل تصغير js css ، وإعادة حجم الصورة ... إلخ. وتحسين وقت تحميل المتصفح المطلوب لتحميل صفحة واحدة. صادفت برامج webpack التعليمية وحصلت على تثبيتها وتثبيتها على خادم dev الخاص بها ، ولكن المشكلة هي أنني لست قادرًا على فهم كيفية تحويل جميع نصوص js وروابط css الحالية في المشروع (حيث لدي الكثير من مكتبات jquery و CSS المستخدمة لتوفير ميزات متعددة في المشروع) لاستخدام حزمة الويب. هل يجب علي إعادة كتابة جميع ملفات JS و CSS الخاصة بي بطريقة تناسب webpack ؟ بالإضافة إلى ذلك ، لا يمكنني تشغيل تطبيق php الحالي الخاص بي على webpack dev-server ، فهل من المفترض أن يعمل هناك في المقام الأول؟ لقد قمت بإنشاء ملف test index.js واستخدمت تكوين حزمة الويب التالية: var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ './public/js/index.js', 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080' ], plugins: [ new webpack.HotModuleReplacementPlugin() ], output: { path: path.join(__dirname, "public/dist/js"), publicPath : "http://localhost:8080/my_proj/public/dist/js", filename: "bundle.js" } }; <script type="text/javascript" src="public/dist/js/bundle.js"></script> <script type="text/javascript" src="public/js/jquery.min.js"></script> <script type="text/javascript" src="public/js/jquery.migrate.js"></script> <script type="text/javascript" src="public/js/jquery.bxslider.min.js"></script> <script type="text/javascript" src="public/js/jquery.appear.js"></script> <script type="text/javascript" src="public/js/jquery.countTo.js"></script> <script type="text/javascript" src="public/js/bootstrap.js"></script>
  4. عبد النور محمد
    أنا أتعلم React / javascript بسرعة كبيرة وارى الجميع يتكلمون عن next و gatsby كنت أتساءل متى سيصل الناس إلى إطار عمل مثل Next.js أو Gatsby.js مقابل تطبيق Create React . أستخدم create react كثيرا لكن هل هناك سبب في المستقبل سيحتم علي استبدال الاطار واستخدام اطار مثل gatsby او nextjs
  5. عبد النور محمد
    لا أفهم سبب عدم قراءة webpack-config.js في مشروعي. إذا ارتكبت خطأً في بناء الجملة في webpack-config.js ، فلن يظهر الخطأ حتى. package.json: { "name": "ff", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack-dev-server --mode development --hot --progress --open", "build": "webpack --mode production" }, "author": "", "license": "MIT", "devDependencies": { "path": "^0.12.7", "webpack": "^4.23.1", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.10" }, "dependencies": { "jquery": "^3.3.1" } } webpack-config.js: const path = require('path'); const conf = { entry: './src/index.js', output: { path: path.resolve(__dirname, './dist'), filename: 'main.js', publicPath: 'dist/' }, devServer: { overlay:true } }; module.exports = conf;
  6. عبد النور محمد
    كيف يمكنني إزالة أو تحديث معلمات الاستعلام بدون تحديث الصفحة في Next JS (React)؟ المستخدم موجود على URL / about؟ login = success & something = yes انقر فوق الزر وإزالة login = success & something = yes كيف يمكنني تحقيق ذلك؟
  7. عبد النور محمد
    أود استخدام قوالب html التي يقدمها webpack عبر HtmlWebpackPlugin. تبدو قوالب html كما يلي: <!DOCTYPE html> [...] <body> <h1 class="text-red-600">Test: include HTML partial with standard lodash functionality</h1> <%= require('./partials/header').default %> </body> </html> header.html <h2>Header in H2 as Test</h2> webpackconfig const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { module { rules: [ { test: /\.html$/, exclude: /node_modules/, use: ['html-loader'] } ] }, plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: './src/templates/index.html', }) ] } عند تشغيل npm run dev أحصل على Cannot Get /
  8. عبد النور محمد
    CSS Loader و Style Loader هما محملان webpack. لم أستطع فهم الفرق بين الاثنين. لماذا يتعين علي استخدام محملتين عندما يقوم كلاهما بنفس المهمة؟
  9. عبد النور محمد
    كيف نستهدف الرابط النشط في Next.js مثل الطريقة التي نقوم بها في React-Router؟ بمعنى ، أعطي الرابط النشط class عندما يكون مساره نشطًا؟
  10. عبد النور محمد
    مرحبا لدي صفحة تحتوي على form للاضافة وعند زيارتها يظهر لي الخطأ window is not defined لكنه لا يشير لشيء معين يسبب المشكلة وهذا هو مكون الصفحة import React, { useState } from 'react'; import { Flex, Box, FormControl, FormLabel, Input, Textarea, Stack, Button, Heading, FormErrorMessage, useColorModeValue, useToast, } from '@chakra-ui/react'; import axios from 'axios'; import { useForm } from 'react-hook-form'; import { useRouter } from 'next/router'; import {Editor} from "react-draft-wysiwyg" import { EditorState, convertToRaw } from 'draft-js'; import draftToHtml from 'draftjs-to-html'; // import htmlToDraft from 'html-to-draftjs'; import 'node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css'; export default function EditorConvertToHTML() { const router = useRouter(); const toast = useToast(); const [state, setState] = useState({ editorState: EditorState.createEmpty(), }); const onEditorStateChange = (editorState) => { setState({ editorState, }); }; const { handleSubmit, register, formState: { errors, isSubmitting }, } = useForm(); async function onSubmit(values, e) { e.preventDefault(); console.log({ ...values, content: draftToHtml(convertToRaw(state.editorState.getCurrentContent())), }); try { const res = await axios.post(`${process.env.NEXT_PUBLIC_API}/article/add`, { ...values, content: draftToHtml(convertToRaw(state.editorState.getCurrentContent())), }); router.push('/'); } catch (error) { console.log(error); toast({ title: 'فشل في عملية الارسال', status: 'error', duration: 9000, // isClosable: true, }); } } //title //description //content //imageUrl return ( <Box> <form onSubmit={handleSubmit(onSubmit)}> <Box p="4" w="50%" mb="8" bg="white"> <FormControl id="email" isInvalid={errors.title}> <FormLabel>العنوان</FormLabel> <Input {...register('title', { required: 'هذا مطلوب', })} /> <FormErrorMessage>{errors.title && errors.title.message}</FormErrorMessage> </FormControl> <FormControl id="email" isInvalid={errors.description}> <FormLabel>وصف</FormLabel> <Textarea {...register('description', { required: 'هذا مطلوب', })} /> <FormErrorMessage>{errors.description && errors.description.message}</FormErrorMessage> </FormControl> <FormControl id="email" isInvalid={errors.imageUrl}> <FormLabel>الصورة</FormLabel> <Input {...register('imageUrl', { required: 'هذا مطلوب', })} /> <FormErrorMessage>{errors.imageUrl && errors.imageUrl.message}</FormErrorMessage> </FormControl> </Box> <Box shadow="md" dir="ltr" w="50%" mb="8" bg="white"> <Editor editorState={state.editorState} wrapperClassName="demo-wrapper" editorClassName="demo-editor" onEditorStateChange={onEditorStateChange} /> </Box> <Box w="50%" bg="white"> <Textarea disabled value={draftToHtml(convertToRaw(state.editorState.getCurrentContent()))} /> </Box> <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting} bg={'blue.400'} color={'white'} _hover={{ bg: 'blue.500', }} > سجل الدخول </Button> </form> </Box> ); }
  11. عبد النور محمد
    لدي ملف .env.local وفي الملف لدي المتغير البيئي API=....... يمكنني استخدام هذا المتغير في getServerSideProps لكن لا يمكنني استخدامه في جسد المكون
  12. عبد النور محمد
    أستخدم nextjs في مشاريع صغيرة ولحد الان لم أستخدم المكون الخاص بهم للصور image والسبب هو انه لا يسمح لك بوضعه دون تحديد المقاسات width و height والمشكلة أحيانا يكون لدي صور تأتي من الخادم غير معروفة المقاسات وكنت أبحث عن حل لأنني اريد الاستفادة من مكون ال Image الخاص بهم import Image from 'next/image' const MyImage = (props) => { return ( <Image loader={myLoader} src="me.png" alt="Picture of the author" width={500} height={500} /> ) }
  13. عبد النور محمد
    لدي صفحة index وأردت إعادة التوجيه إلى صفحة orders عندما يدخل إلى صفحة index. ما هي الطريقة الصحيحة للقيام بذلك؟ أنا أستخدم Next JS React. import { useRouter } from 'next/router' const Index = () => { const router = useRouter() return router.replace('/orders') }
  14. عبد النور محمد
    لماذا مكون ال head لا يعرض معلومات ال meta ويرسلها أثناء server side rendering function Book({ getBook, addBook, removeBook, auth, cart, book }) { ....... return ( <Box m={['0', '5%']}> {data && <Filter categories={data.bookCategories} publishers={data.publishers}></Filter>} <Box mt="50px"> <Box> {!data && ( <Box textAlign="center"> <Spinner size="xl" /> </Box> )} <Grid pr={['2%', '2%', '7%', '7%']} pl={['2%', '2%', '7%', '7%']} templateColumns={['1fr', '1fr', '0.5fr 2fr', '0.5fr 2fr']} gap="10px" > {data ? ( <> <Head> <title>{book?.title}</title> <meta name="title" content={book?.title} /> <meta name="description" content={book?.description} /> <meta property="og:title" content={book?.title} /> <meta property="og:url" content={`${process.env.NEXT_PUBLIC_BASE}/book/${book?.id}`} /> <meta property="og:type" content="book" /> <meta property="og:description" content={book?.description} /> <meta property="og:image" content={`${process.env.NEXT_PUBLIC_STORAGE}/${book?.cover}`} /> </Head> </Grid> </Box> </Box> </Box> ); } const mapStateToProps = (state) => { return { cart: state.cart, auth: state.auth }; }; const mapDispatchToProps = (dispatch) => { return { getBook: (id) => dispatch(getBook(id)), addBook: (book) => dispatch(addBook(book)), removeBook: (book) => dispatch(removeBook(book)), }; }; export async function getServerSideProps({ params }) { const res = await axios.get(`${process.env.NEXT_PUBLIC_API}/books/${params.id}`); return { props: { book: res.data, }, }; } export default connect(mapStateToProps, mapDispatchToProps)(Book);
  15. عبد النور محمد
    مرحبا قمت بأنهاء مشروع react وقمت باستضافته وكل شيء يعمل دون مشاكل باستثناء مشاركة صفحات الموقع لا تظهر معلومات الخاصة بالصفحات مثلا صفحة الكتاب الواحد لدي أضفت فيها المعلومات بمكتيه helmet <Helmet> <title>{data.title}</title> <meta name="title" content={data.title} /> {/* <meta name="description" content={data.description} /> */} <meta property="og:title" content={data.title} /> <meta property="og:url" content={`....${data.id}`} /> <meta property="og:type" content="book" /> {/* <meta property="og:description" content={data.description} /> */} <meta property="og:image" content={`${process.env.REACT_APP_STORAGE}/${data.cover}`} /> </Helmet> المشكلة ان المعلومات تظهر تظهر في ادوات المطور element لكن لا تظهر في page source وعند مشاركة الصفحة في وسائل التواصل الاجتماعي لا تظهر مغلومات ال meta فما المشكلة
  16. عبد النور محمد
    هذا هو رمز مجلد nextjs _app.js الخاص بي. import "../styles/globals.css"; import "bootstrap/dist/css/bootstrap.min.css"; import "bootstrap/dist/js/bootstrap.min.js"; function MyApp({ Component, pageProps }) { return <Component {...pageProps} />; } export default MyApp; لدي هذا الخطأ module.exports = require("bootstrap/dist/js/bootstrap.min.js");; كيف يمكنني استخدام offcanvas في nexjts؟ كيف يمكنني استيراد ملف js الخاص بي؟
  17. عبد النور محمد
    لدي مشروع في material-ui ، nextjs. أحاول جعل شريط التنقل الخاص بي يعمل مع nextjs: import * as React from 'react'; import AppBar from '@material-ui/core/AppBar'; import Link from "next/link"; import {Tab, Tabs} from "@material-ui/core"; export default function NavBar() { return ( <AppBar position="static"> <Tabs> <Tab label="Timer"><Link href="timer" /> </Tab> <Tab label="Home" to="/" component={Link} /> </Tabs> </AppBar> ); } لكنه يتسبب في فشل البناء. هل هناك شيء مفقود؟
  18. عبد النور محمد
    أنا أعمل على مشروع NextJS وأريد استخدام خطاف ويب GITHUB لنشر برنامج نصي يحتوي على إرشادات النشر. لقد قمت بإعداد خطاف ويب للدفع في GITHUB حاولت إضافة الكود التالي في ملف server.ts الخاص بي واختباره الآن مع ngrok // testing server.post("/webhooks/github", function(req, res) { var sender = req.body.sender; var branch = req.body.ref; if (branch.indexOf("master") > -1 && sender.login === githubUsername) { deploy(res); } }); function deploy(res: any) { childProcess.exec("sh deploy.sh", function(err, stdout, stderr) { if (err) { console.error(err, stderr); return res.send(500); } console.log(stdout); res.send(200); }); } هذا الملف هو ملف NODEالخاص بي لتطبيق JS التالي لكنني أحصل على 502 في سجلات ngrok الخاصة بي أرغب في معرفة المكان الذي يجب أن أضع فيه نقطة نهاية خطاف الويب هذا في تطبيق NextJS الخاص بي لتشغيله
  19. عبد النور محمد
    لقد أنشأت تطبيق next.js الأساسي باستخدام "npx create-next-app" وملف .eslintrc.json الذي تم إنشاؤه لإضافة قواعد eslint. ولكنه لا يعمل. كيف أضيف قواعد الفحص إلى nextjs { "env": { "browser": true, "es6": true }, "extends": [ "standard" ], "globals": { "Atomics": "readonly", "SharedArrayBuffer": "readonly", "React": "writable" }, "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 2018, "sourceType": "module" }, "plugins": [ "react" ], "rules": { "react/react-in-jsx-scope": "off" } }
  20. عبد النور محمد
    لدي مكون يتحقق من اسم المسار ويعمل عليه: const router = useRouter(); const path = router.pathname;//props.location.pathname; const p = path.split('/').filter((s) => s !== "") let submissionId = p[0] == 's' && p[1] const submission = useQuery(SUBMISSION, { variables: { id: submissionId }, skip: submissionId === false }) يعمل هذا بشكل جيد في تطبيق react ولكن nextjs يعيد التوجيه إلى 404. هل هناك طريقة لإعداد نمط لـ nextjs لتجاهل المسارات غير الموجودة والسماح لرمز المكون بمعالجته؟
  21. عبد النور محمد
    أرغب في استخدام NextJS مع وظائف سحابة Firebase وأنا أقوم بإنشاء وظيفة سحابية: import * as functions from 'firebase-functions'; import cors from 'cors'; import express from 'express'; import next from 'next'; const nextApp = next({ dev: false }); const handle = nextApp.getRequestHandler(); nextApp .prepare() .then(() => { const server = express(); server.use(cors({ origin: true })); server.get('/a', (req, res) => { return nextApp.render(req, res, '/b', req.query); }); server.get('/b', (req, res) => { return nextApp.render(req, res, '/a', req.query); }); server.get('*', (req, res) => { return handle(req, res); }); }) .catch(ex => { console.error(ex.stack); process.exit(1); }); export let app = functions.https.onRequest(nextApp); يقوم NextJS بإنشاء مجلد مع إنشاء تطبيق JS الخاص بي. المشكلة هي أنه لا يمكنني تحميل مجلد بناء NextJS على السحابة. كيف يمكنني تضمين هذا المجلد؟
  22. عبد النور محمد
    أنا أبحث عن نصيحة حول كيفية بدء fastify-cli مع fastify-nextjs لقد حاولت إضافة رمز بسيط إلى المكان المقترح ، لكنه لا يعمل. const path = require('path'); const AutoLoad = require('fastify-autoload'); module.exports = function (fastify, opts, next) { fastify.register(require('fastify-nextjs')).after(() => { fastify.next('/hello'); }); fastify.register(AutoLoad, { dir: path.join(__dirname, 'plugins'), options: Object.assign({}, opts), }); fastify.register(AutoLoad, { dir: path.join(__dirname, 'services'), options: Object.assign({}, opts), }); next(); };
  23. عبد النور محمد
    اعمل مع NextJS ورأيت مثالاً لصفحة class IndexPage extends Component { static async getInitialProps(context) { return {}; } render() { return <div>hello world</div>; } } export default withRouter(IndexPage); ما هي بالضبط طريقة getInitialProps في NextJS؟
  24. عبد النور محمد
    أين هو المجلد العام لمشروع nextjs؟ أعني ، هل هناك مكان ما يمكنني وضع favicon.png فيه ، أو التحقق من موقع google ، أو manifest.json ، أو robots.txt ، وما إلى ذلك؟
  25. عبد النور محمد
    هناك تحذير يطلع معي Warning : componentWillMount is deprecated and will be removed in the next major version. Use componentDidMount instead. As a temporary workaround, you can rename to UNSAFE_componentWillMount. Please update the following components: Container, Text, TouchableOpacity, Transitioner, View المشروع يعمل بدون مشاكل لكن أريد اصلاح التحذير
×
×
  • أضف...