السلام عليكم.

عملت تطبيق ويب باستخدام vite من خلال الأوامر:

npm create vite@latest
npm install
npm run dev

بس لما بفتحه في المتصفح بيظهرلي الخطأ ده مع العلم اني لم أعدل سطر واحد كود 

السلام عليكم ورحمة الله.

رمضان كريم.

انا اعمل كمرمج Full-stack ولكن لا استطيع تسعير شغلي حيث اني عندما سعرت العمل يقول العميل انه باهظ الثمن 

طلبات-بسيطه-Blue-Wings.pdf

بتاريخ 40 دقائق مضت قال ياسر مسكين:

تقديم العروض على مختلف المشاريع البرمجية على منصة مستقل يعتمد على أساس كل مشروع على حدى، أي أن لكل مشروع وطريقة التقدّم إليه، بصراحة هذا الأمر يزداد تعقيدا لأن المشكلة ليست في طريقة التقديم فقط، بل في طبيعة العميل صاحب المشروع فليس كل العملاء لهم نفس التفكير ونفس الأهداف كي نضبط إيقاعا موحّدا للتقدّم على مشاريعهم.

لهذا سأخبرك بطريقتي الشخصية لعلها تنفعك، أحاول مع رؤية كل مشروع تم فتحه أن أقرأ جميع التفاصيل ووصف المشروع وأحلله، فإن كنت قادرا على الإنجاز، انتقلت إلى الخطوة التالية.

وهي رؤية ما إذا كان هنالك العديد من العروض التي تم التقديم عليها، في الغالب لا أتقدم على المشاريع التي فاقت التقديم عليها بعشرة عروض لأن احتمال الوصول إلى عرضي سيكون ضئيلا، فمن النادر أن تجد من يتفاوض مع أكثر من 10 ولا يجد من ينجز له المشروع إلا نادرا، وهذا لأني أحاول أ، أحتفظ بعدد التقديمات المحدودة التي لدي.

بعدها، أنتقي الكلمات المناسبة وأكون خفيفا ظريفا، لا أبالغ ولا أكذب، ولا أطيل ولا أقصّر، فيكون العرض في حدود الميزانية ولا يفوق المتوسط، ومن جهة أشير إلى إمكانية تقديمي لنماذج عمل جاهزة، أو اختبار تقييمي، أو الإشارة إلى وجود معرض أعمال خاص بي، هكذا يمكن أن تلفت انتباه العميل إليك فيقوم بالتفاوض معك.

في حالة ما قام بالتواصل معك ستظهر معلوماته الشخصية ومشاريعه المفتوحة والمنجزة، ومعلومات تتعلق بمعدل التوظيف، الكثيرون يقومون بتحليلها ومن هناك يعرفون إن كانت العميل جادّا في مشروعه أم لا، أتمنى أن أكون قد أفدتك، بالتوفيق.

يعني مثلا هذا نص مشروع:

"موقع تعريفي بخدمات لي أقدمها

احتاج ربط whatsup"

وانا قدمت هذا العرض: "

السلام عليكم استاذ احمد. أستطيع مساعدتك في ذلك فقد قمت بعمل العديد من المواقع التعريفية لأشخاص ولشركات ايضاََ وانا مهتم جداََ ببناء موقع التعريفي.

التقنيات التي سأستخدمها:

1- HTML

2- CSS

3- JS

سيكون الموقع

1- متجاوب مع جميع احجام الشاشات

2- سريع جدا في التصفح وسلس ايضا في الإستخدام لأنني سأضيف تأثيرات animation

3- سأربط الموقع بواتس اب ليكلمك العملاء

انا هنا في انتظارك للرد علي اي استفسار لديك أستاذ احمد."

فهل العرض جيد ام لا وما كنت ستكتبه

كيف اضيف عرض احترافي وجذاب علي مشروع علي مستقل كمبرمج Front-end لأجذب إنتباه العميل ويرجى عدم ترشيح الفيديو اللي علي مستقل علشان مش عارف اطبقه.

const cookies = (handler) => (req, res) => {
    res.cookie = (name, value, options) => cookie(res, name, value, options)
    return handler(req, res)
}

export default cookies

هل يمكن شرح هذا الكود لاني لا استطيع فهمه

كيف يمكنني اضافة middleware في next js في ال api ?

بتاريخ 5 دقائق مضت قال Hikmat Jaafer:

مرحباً منتصر ,
أرجو أن تقوم بإرسال ملف الlogin لنتمكن من تحليل وحل مشكلتك بشكل أفضل . لكن بجميع الأحوال هذه خطوات عامة لكيف ممكن توضع jwt token في الcookies من خلال response api عندما يقوم المستخدم بتسجيل دخول .

سوف نستخدم مكتبة `cookie` لتسهيل هذه العملية.

قبل كل شيء، تأكد من تثبيت المكتبة `cookie` باستخدام الأمر التالي:

npm install cookie

بعد تثبيت المكتبة، يمكنك استخدام الكود التالي لتعيين توكن JWT في الكوكيز عند تسجيل الدخول:

import { NextApiResponse } from 'next';
import cookie from 'cookie';

// دالة تقوم بتوليد التوكن JWT بناءً على البيانات الخاصة بالمستخدم
function generateToken(user: UserData): string {
  // قم بتوليد التوكن هنا
  // ...
  return token;
}

// مثال على دالة تسجيل الدخول
export function login(req: NextApiRequest, res: NextApiResponse): void {
  // قم بإجراء عملية التوثيق هنا
  // ...

  // توليد التوكن JWT
  const token = generateToken(user);

  // تعيين الكوكيز في الاستجابة
  res.setHeader('Set-Cookie', cookie.serialize('token', token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production', // تحديد ما إذا كانت الكوكيز تعمل على اتصال آمن أم لا
    sameSite: 'strict', // تحديد سياسة SameSite للكوكيز
    maxAge: 3600, // تحديد وقت انتهاء صلاحية الكوكيز بالثواني
    path: '/', // تحديد المسار الذي يمكن الوصول إليه الكوكيز من خلاله
  }));

  res.status(200).json({ message: 'تم تسجيل الدخول بنجاح' });
}

 

بعد تعيين الكوكيز في الاستجابة، ستكون الكوكيز متاحة في الجانب العميل (المتصفح) ويمكن الوصول إليها من خلال `document.cookie`.

تمام اخي.

هل 

القيمه 30 * 60 * 60 * 24 هنا تساوي شهر ؟

دلوقتي انا بعمل facebook clone ب next js مع typescript.

طالعلي مشكله ان لما الuser بيحاول يعمل تسجيل دخول (Login) مش بعرف احط ال jwt token في cookie في ال response

السلام عليكم جميعا اتمنى ان تكونوا في افضل حال.

انا حاليا اواجه مشكلة التشتت في تعلم تطوير مواقع الويب.

انا اتعلمت 

Html, Css, Js, Bootstrap, Tailwind, Webpack, React, Next.js, Node js, Mongodb, Scss, Npm

ولكن بنهاية المطاف لا اجد اي عمل علي مستقل علي سبيل المثال يطلب هذه المهارات !!!

وانا مشتت جدا حاليا في التعلم.

المشكله: 

1- كيف اجد عمل علي مستقل 

2- كيف اذاكر بطريقه فعاله لاني بدات انسى الأشياء اللي بتعلمها

السلام عليكم ورحمة الله وبركاته. 

انا اتعلمت Node js ك واجهه خلفيه ولاكن ما هيا افضل بيئات العمل او اللغات للتعامل مع الصور والفيديوهات ك يوتيوب مثلا او انستجرام ؟

السلام عليكم يارب تكوني بخير.

دلوقتي انا اتعلمت Fullstack development بس في مشكله اني مش بعرف اجيب ديزاين اعمله او اخليه موقع يعني فلما بعمل موقع من خيالي بيبقي وحش الصراحه بس لما بحول من ديزاين بيبقي قوي فدلوقتي المفروض اعمل ايه هل اتعلم UI design ولا اعمل ايه ؟

بتاريخ منذ ساعة مضت قال أسامة زيادة:

كل من useCallback و useMemo هما هوكز (Hooks) في مكتبة React لإدارة الحالة والأداء في تطبيقات React. يتم استخدام هذين الهوك لتحسين أداء التطبيق عن طريق تقليل العمل الزائد وإعادة العمليات غير الضرورية.
useCallback

useCallback هو هوك يسمح بتذكر واستخدام دالة معينة بصورة مرنة. يستخدم عادة عندما تحتاج إلى تمرير دالة إلى مكون فرعي كخاصية (prop)، وترغب في تجنب إعادة إنشاء الدالة في كل مرة يتم فيها إعادة رسم المكون الأصلي. بوجود useCallback، يمكنك ضمان أن الدالة لا تعاد إلا عندما تتغير إحدى الاعتماديات (dependencies) التي تمرّرها إليه.

مثال

import React, { useState, useCallback } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

في المثال أعلاه، يتم استخدام useCallback لتذكر الدالة handleClick وتمريرها إلى خاصية onClick للزر. يتم إعادة إنشاء الدالة handleClick فقط عندما يتغير count.

useMemo
useMemo هو هوك يسمح بحفظ نتيجة عملية محسوبة وإعادة استخدامها عندما تكون الاعتماديات ثابتة. يستخدم عادة لتجنب إعادة حساب قيم مكلفة مثل العمليات الحسابية أو تحويلات البيانات في كل مرة يتم فيها إعادة رسم المكون.
مثال:

import React, { useMemo } from 'react';

function MyComponent({ items }) {
  const totalPrice = useMemo(() => {
    return items.reduce((sum, item) => sum + item.price, 0);
  }, [items]);

  return (
    <div>
      <p>Total Price: {totalPrice}</p>
    </div>
  );
}

في المثال أعلاه، يتم استخدام useMemo لحساب totalPrice بناءً على items الممررة كاعتمادية. يتم حساب totalPrice فقط عندما يتغير items، وإلا سيتم إعادة استخدام القيمة المحسوبة السابقة.

باستخدام useCallback و useMemo، يمكن تحسين أداء تطبيقات React وتقليل العمل الزائد وإعادة العمليات غير الضرورية.

اليس بإمكاني استخدام useEffect بدلا من useCallback ؟

ما هي وظائف كل من 

1- useCallback

2- useMemo

*  بالتفصيل الممل وأمثله من مواقع حقيقة عليهما

بتاريخ 1 دقيقة مضت قال Mustafa Suleiman:

بالطبع تستطيع في أي سن لا مشكلة، طالما تمتلك المهارات اللازمة لإتمام المشاريع تستطيع العمل على مواقع العمل الحر، ومن الأفضل أن تقرأ  التالي:

https://blog.mostaql.com/tag/mostaql-freelancers-guide/

 

انا لما بدخل علي موقع مستقل مثلا بيطلب مني توثيق الهوية للتقديم علي الطلبات

بتاريخ 2 دقائق مضت قال Mustafa Suleiman:

تستطيع تعلم ما تريد، لكن العمل في الشركات يتطلب أن تكون حاصل على مؤهل جامعي وذلك في أغلب الشركات، وبعض الشركات الصغيرة قد تتغاضى عن ذلك، أو تستطيع العمل مع بعض الشركات عن بعد في حال كان لديك الخبرة الكافية ومعرض أعمال جيد.

أيضًأ أمامك موقع العمل الحر تستطيع العمل عليها لكن يجب تعلم كيفية تقديم عرض جيد على المشاريع وبناء معرض أعمال إحترافي.

يعني هل يمكنني التقديم علي مواقع العمل الحر وانا 15 سنه ؟ ولا ازاي مش فاهم ؟

بتاريخ 3 دقائق مضت قال Mustafa Suleiman:

تستطيع تعلم ما تريد، لكن العمل في الشركات يتطلب أن تكون حاصل على مؤهل جامعي وذلك في أغلب الشركات، وبعض الشركات الصغيرة قد تتغاضى عن ذلك، أو تستطيع العمل مع بعض الشركات عن بعد في حال كان لديك الخبرة الكافية ومعرض أعمال جيد.

أيضًأ أمامك موقع العمل الحر تستطيع العمل عليها لكن يجب تعلم كيفية تقديم عرض جيد على المشاريع وبناء معرض أعمال إحترافي.

انا لا اقصد العمل في شركه بالظبط يعني اقصد العمل بشكل عامل كعامل حر يعني كمستقل

السلام عليكم ورحمة الله وبركاته.

انا دلوقتي اتعلمت 

1- How Internet Work

2- HTML 

3- CSS / Bootstrap & Tailwind / SCSS

4- Javascript / Typescript

5- Webpack

6- Git / Github

7- React js / Next js

8- BABEL

9- REACT ROUTER / REACT ROUTER DOM

10- VIM

11- RESTFUL API

12- Node js / NPM

13- Express js

14- Mongodb

15- GraphQl

16 - Material UI

بس هنالك مشكله صغيره ان سني صغير يعني انا لسه تامم اليوم 15 عام وهطلع بطاقة هوية شخصيه كمان شهر فهل عادي ولا لازم 18 سنه ؟

انا كان مطلوب مني مشروع علشان اخد الشهاده انا خلصته كله حرفيا بس مش عارف اضيف ال like, unlike في زر واحد المفروض ان ده شكل ال Card ده JSX component بس مش عارف اظبط ال like system خالص جربت كتير اوي بس مش عارف اعمل ايه ؟

https://github.com/mohamed-montaser1/Gallary-Website-NextTs/tree/fix-likes

هذا هو نص الخطأ

No overload matches this call.
Overload 1 of 5, '(reducer: ReducerWithoutAction<any>, initializerArg: any, initializer?: undefined): [any, DispatchWithoutAction]', gave the following error.
 

هذه هيا ال reducerFunction

enum actions {
  INCREASE = "INCREASE",
  DECREASE = "DECREASE",
}

interface state {
  b_count: number;
  a_count: number;
}

interface payload {
  b_count: number;
  a_count: number;
}

interface action {
  type: string;
  payload: payload;
}
  
function reducerFunction(state: state, action: action) {
  switch (action.type) {
    case actions.INCREASE:
      return {
        ...state,
        a_count: state.b_count + 1,
      };
    case actions.DECREASE:
      return {
        ...state,
        a_count: state.b_count - 1,
      };
    default:
      state;
  }
}

وهذه هي كيفية الإستخدام 

let [state, dispatch] = useReducer(reducerFunction, {
  b_count: 0,
  a_count: 0,
});

انا اعمل علي تطوير موقع الذي بعد انهائه ساخذ الشهاده.

انا خلصت الموقع كله بس في خاصيه مش عارف اضيفها هيا ان لما ال user يضغط علي ال like button يضيف like ولما يضغط تاني يمسح ال like

انا عملته في ال backend عملت 2 endpoints واحده /like والتانيه /unlike وهما شغالين تمام بس المشكله في ال front end.
ممكن مساعده علشان بقالي اكتر من يوم بحاول ومش عارف

مش شغال

دلوقتي انا بحاول ابعت ايميل بnodejs + nodemailer بس باللغة العربية فبيطلعلي كده

كيف يمكنني إنشاء api routes في ال app routing في next js 13 مع typescript ؟

لقد بدات تعلم oop (object orianted programming) اليوم منذ حوالي ساعه او ساعتين وقد كتبت هذا الملف عن الoop في typescript.

محتاج أراكم فيها ولو في اي تعديل.

يمكنك تحميل الملف من classes.txt

او يمكنك قرآئته من هنا

Why Should I Use Classes Insted Of Functions ?
Classes Offer You A Better Code With Features Like:

1- Encapsulation
2- Inheritance
3- Abstrution
4- Polymorphism

***************************************************

Encapsulation is Create A Class With Related Variables And Functions
Like LocalStorage In JAVASCRIPT
You Have Variables Like: 
length which is number
You Have Methods Like:
getItem
setItem
removeItem
clear

Encapsulation Concept reduce the complexity of the app and reduce the spaghetti Code

***************************************************

Inheritance

Inheritance From Class Is Very Important Concept
The Main Idea Behind Concept Is Child Class inherit properties and methods from the parent class

Imagine We Have More Than On Car Like Tesla, Toyota, Honda, kia, etc....

if we create single class to all of these cars the code will be Agly, Bad and spaghetti

So We Use The Inheritance Concept
We Use It Like This: 

// Parent Class

class Car {
    constructor(public name: string, public createdAt: string, public model: string) {}

    printCarProperties() {
        console.log(`Name: ${name}, createdAt: ${createdAt}, model: ${model}`)
    }
}

// Child Class

class kia extends Car {
   constructor(name: string, createdAt: string, model: string) {
        // Like constructor but from parent class This Super function have the same args of parent class
        super(name, createdAt, model) 
   }
   // Now In This Class We Have The Same Properties And Methods In Parent Class
   // We Can Add More As We Want
   greeting(companyName: string) {
        console.log(`Hello ${companyName}`) 
   }
}

***************************************************

Abstrution

Abstrution is Important Concept To Understand

The Main Idea Behind Abstrution Is _Creating A Model For Variable Or Methods In Main Class_
Like: 

abstract class MainClass {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    abstract printUserInfo():void;
    abstract username: string;
    abstract userPhoneNumber: string;
}

class Child extends MainClass {
    constructor(name: string, age: number) {
        super(name, age)
    }
    printUserInfo(): void {
        console.log(this.name, this.age)
    }
    username: string = "Hello Username";
    userPhoneNumber: string = "+20 100 892 18 10";
}

It's Hard To Understand In The Beginning But It will be very easy

***************************************************

Polymorphism

Polymorphism is the ability to create a class that has more than one form or in other words, classes have the same methods but different implementations

بتاريخ 21 ساعة قال أسامة زيادة:

يبدو أنك قمت بالتطبيق اللعبة بشكل جيد  وبالطبع تحتاج إلى المزيد في تطوير الواجهة ، لكن لاحظت أنه عندما يحدث تعادل ولا يفوز أحد الاعبين لا يتم إعادة تحميل اللعبة من جديد بل يجب إعادة تحديث الصفحة من أجل بدء لعبة جديدة . أيضاً قم باضافة عدد لحساب عدد مرات الفوز للاعبين . 

نعم نسيت ان اضيف تلك الميزه 😅 سأقوم بإضافتها هيا والعدد. شكرا لك

https://mohamed-montaser1.github.io/Typescript-XO_Game/dist/index.html

لقت صنعت هذه اللعبة في وقت فراغي للتمرن علي typescript + react