DevGuide

برنامج ITIDA Gigs لتأهيل الشباب للعمل الحر https://landing.eyouthlearning.com/index.php/digital-freelancing-placement-program

يعني إيه Bearer Token وإزاي بيشتغل؟ 🤔

. . خليني أسألك سؤال... لما تدخل أي موقع ويطلب منك تسجيل الدخول، هل كل مرة بتفتح الموقع بيطلب منك اسم المستخدم والباسورد من الأول؟ "في الغالب" لا، لأنه بعد ما بتسجّل دخول بيتم إصدار Token تستخدمه بدل ما تدخل بياناتك كل مرة. هنا بقى بييجي دور الـ Bearer Token... ده واحد من أشهر أنواع الـ Access Tokens واللي بيتم استخدامه في الـ authentication (وغالبًا مع معيار OAuth 2.0)، وده معناه إنك لما تبعت request لأي API محمي (Protected)، بدل ما تبعت بيانات تسجيل الدخول كل مرة، بتبعت الـ Token بيأكد إنك شخص موثوق. بس خليني أقولك إن استخدام Bearer Token محتاج شوية تفاصيل لازم تبقى فاهمها كويس، لأن أي غلطة في التعامل معاه ممكن تخلي بياناتك عرضة للإختراق. . . لا تنسوا أهلنا المستضعفين من الدعاء. ———

📌 إزاي الـ Bearer Token بيشتغل؟

الموضوع بيتم على 3 مراحل: 1- تسجيل الدخول: لما المستخدم بيدخل بياناته الصح، السيرفر بيعمله authenticate، وبعدها بيصدرله Bearer Token (ممكن يكون مشفر زي JWT). 2- استخدام الـ Token: في كل request بعد كده، الـ Token بيتبعت مع الهيدر (Header) في الـ Authorization بالشكل ده:

Authorization: Bearer YOUR_ACCESS_TOKEN

وده معناه إن أي حد معاه الـ Token يقدر يستخدمه للوصول للـ API 3- التحقق من الـ Token: السيرفر بيستلم الـ Token ويشوف إذا كان صالح ولا لا (ممكن بمفتاح تشفير لو مشفر)، ولو كان صحيح، بيكمل تنفيذ الطلب، ولو كان منتهي أو غير صحيح، بيرد بخطأ Unauthorized (401). ———

📌 طب ليه اسمه Bearer Token؟

كلمة Bearer معناها "حامل"، وده لأن أي حد معاه الـ Token ده يقدر يستخدمه من غير ما يثبت هويته بأي حاجة تانية. بمعنى إن الـ Token لو اتسرق، اللي سرقه هيقدر يستخدمه كأنه أنت بالضبط. ———

📌 إيه المشاكل الأمنية اللي ممكن تواجهك مع Bearer Token؟

💀 الـ Token Theft: لو حد قدر يحصل على الـ Token بتاعك، يقدر يستخدمه كأنه أنت، ومفيش extra verification زي الـ refresh tokens أو OAuth flows اللي بتتأكد إن الشخص فعلًا هو المستخدم الحقيقي. ⌛️ الـ Expiration Issues: لو الـ Token مش بيخلص بسرعة، يبقى عندك مشكلة، لأن أي حد يسرقه يقدر يستخدمه لمدة طويلة، عشان كده الـ Tokens بتبقى لها expiry time، وبعدها لازم تعمل refresh. 📡 الـ Man-in-the-Middle Attacks: لو الـ Token بيتبعت من غير encryption، ممكن حد يعترضه ويستخدمه، عشان كده لازم تتأكد إن كل حاجة بتتم تحت HTTPS مش HTTP 🔄 الـ Replay Attacks: لو مكنش فيه حماية زي timestamps، ممكن حد يستخدم الـ Token المسروق أكتر من مرة. ———

📌 إزاي تأمن الـ Bearer Token؟

✅ استخدم HTTPS: عشان تمنع أي حد من التجسس على الـ Token أثناء نقله. ✅ حدد مدة صلاحية قصيرة للـ Token: خلي الـ Token يخلص بعد فترة قصيرة عشان لو اتسرق، يبقى ملوش لازمة. ✅ استخدم Refresh Tokens: عشان المستخدم يقدر يحصل على Token جديد لما الـ Token القديم يخلص. ✅ خزن الـ Token في مكان آمن: في المتصفح، بلاش تخزنه في localStorage لأنه ممكن يتسرق بسهولة، استخدم HttpOnly Cookies لو أمكن. ✅ استخدم Scopes: لو بتستخدم API، متديش الـ Token صلاحيات أكتر من المطلوب، مثلًا متديلوش صلاحية إنه يمسح داتا لو هو بس هيقرأ بيانات. ✅ ظبط CORS كويس: عشان تمنع أي مصدر مش موثوق من استخدام الـ Token. ——— وفقكم الله لكل خير 🌿

الـ Asynchronous Programming في JavaScript ⚙️ . . البرمجة فيها نوعين أساسيين: Synchronous و Asynchronous، ولما نفهم الفرق بينهم، هيبقى أسهل نعرف ليه الـ Asynchronous مهم جدًا.

📌 الـ Synchronous Programming:

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

📌 الـ Asynchronous Programming:

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

📌 إزاي الكلام ده بيحصل في JavaScript؟

في JavaScript، عندنا طريقتين رئيسيتين للتعامل مع الـ asynchronous programming 🔻 الـ Callbacks 🔻 الـ Promises (وطبعًا async/await اللي هو تحسين للـ Promises) ———

📌 الـ Callbacks

أول طريقة للتعامل مع الـ asynchronous programming كانت عن طريق الـ Callbacks. الفكرة ببساطة إنك بتمرر دالة معينة كـ "callback" للكود اللي بيتنفذ، ولما الكود ده يخلص، الدالة دي بتشتغل. لكن الـ callbacks بتتحول بسرعة لكود معقد جدًا لما يكون عندك عمليات كتير وبتحتاج تكتب حاجات كتير جوة بعضها، وده اللي بنسميه Callback Hell.

📌 الحل: الـ Promises

هنا بيجي دور الـ Promises، اللي هي طريقة جديدة وأكثر تنظيمًا للتعامل مع العمليات الـ asynchronous. الـ Promise هو في الأساس "وعد" إن العملية هتخلص في المستقبل. الـ Promise بيكون ليه 3 حالات: 🔻 حالة الـ Pending: يعني العملية لسه مخلصتش. 🔻 حالة الـ Fulfilled: يعني العملية نجحت وطلعت النتيجة. 🔻 حالة الـ Rejected: يعني العملية فشلت وفيه خطأ حصل. لما العملية تخلص بنجاح، الـ Promise بيتحول لحالة "fulfilled"، ولو العملية فشلت بيتحول لحالة "rejected". ——— خلينا نشوف مثال عشان نفهم الكلام ده بشكل أوضح. هنفترض إننا عايزين نحاكي عملية استرجاع بيانات من الـ API.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const dataAvailable = true;

      if (dataAvailable) {
        resolve("Data retrieved successfully!");
      } else {
        reject("Error: Unable to retrieve data.");
      }
    }, 3000);
  });
};

fetchData()
  .then((result) => console.log(result))
  .catch((error) => console.log(error));

في الكود ده، الدالة fetchData بترجع Promise. داخل الـ Promise، بنستخدم إما resolve لو العملية نجحت أو reject لو حصل خطأ. باستخدام then، بنقدر نتعامل مع النتيجة لو العملية نجحت، ولو حصل خطأ، الـ catch بتساعدنا في التعامل معاه. ———

📌 الـ Async/Await

علشان نخلي الكود أبسط وأوضح، ظهر حاجة اسمها async/await اللي بتشتغل على الـ Promises بس بشكل مبسط جدًا وبتخلي الكود يبان كأنه synchronous. نفس المثال اللي اللي فات نقدر نكتبه بطريقة async/await بالشكل ده:

const fetchData = async () => {
  try {
    const result = await new Promise((resolve, reject) => {
      setTimeout(() => {
        const dataAvailable = true;
        if (dataAvailable) {
          resolve("Data retrieved successfully!");
        } else {
          reject("Error: Unable to retrieve data.");
        }
      }, 3000);
    });
    console.log(result);
  } catch (error) {
    console.log(error);
  }
};

fetchData();

الميزة هنا إننا استخدمنا await عشان نستنى النتيجة من الـ Promise وكأن العملية دي synchronous، لكن في الحقيقة الكود شغال بطريقة asynchronous. وبدل ما نستخدم then و catch، استخدمنا try و catch علشان نتعامل مع النجاح أو الفشل. ———

📌 ليه تستخدم الـ Promises والـ Async/Await؟

✅ تنظيم الكود: الكود بيبقى أنضف وأبسط في الفهم مقارنة بالـ Callbacks. ✅ الـ Error Handling أفضل: التعامل مع الأخطاء بقى أسهل باستخدام try/catch. ✅ لما يكون عندك مشروع كبير، الـ async/await هيساعدك في إدارة الأكواد الطويلة والمعقدة بسهولة. ——— وفقكم الله لكل خير 🌿

دردشة سريعة عن الـ Shadow DOM 💡 . . تخيل معايا أنك شغال على مشروع ضخم، وعامل Components Modular، بس فجأة حصلت كارثة! الـ CSS اللي كتبته لـمكون (Component) معين بقى بيأثر على مكونات (Components) تانية في الصفحة، والـ JavaScript بدأ يدخل في متاهات بسبب الـ Global Scope. الحل؟ هنا بييجي دور Shadow DOM! تعال ندردش شوية عن Shadow DOM، إزاي بيشتغل، ليه هو مهم، وإزاي تستخدمه عمليًا في مشاريعك...🔥 ———

📍 LinkedIn

https://www.linkedin.com/posts/dev-alisamir_webdeveloper-webdevelopment-devabrguide-activity-7303859163757957121-bwdh

📍 Qabilah

https://qabilah.com/posts/pXMvwi8VKXk

📍 Facebook

https://www.facebook.com/share/p/1A8EL2kmMj ——— وفقكم الله لكل خير 🌿

Announcing TypeScript 5.8 https://devblogs.microsoft.com/typescript/announcing-typescript-5-8

لو شغال بـ React، أكيد سمعت عن useCallback، بس هل فعلًا محتاج تستخدمه؟ 🤔 في المقال ده، هتفهم الـ useCallback بطريقة بسيطة، وإزاي تستخدمه صح عشان تحسن أداء الكود بتاعك بدون تعقيد. 🚀 ——-

Simplifying React Hooks: useCallback 💯

📍 Dev Community https://dev.to/alisamir/simplifying-react-hooks-usecallback-46pp 📍 Medium https://medium.com/@dev.alisamir/simplifying-react-hooks-usecallback-bb03cf54a641

ليه لازم تستخدم الـ Module Bundler؟ 🤔 . . لما تبدأ مشروع ويب جديد، الأمور في الأول بتكون بسيطة وسهلة، مجرد كام ملف HTML و CSS و JavaScript، وكل حاجة شغالة تمام. لكن مع الوقت، ومع إضافة ميزات جديدة، بتبدأ الأمور تتعقد تدريجيًا، وتلاقي نفسك بتواجه مشاكل زي بطء التحميل أو صعوبة في تنظيم الكود... والحل السحري لكل المشاكل دي هو الـ Module Bundler... تعال نوضح الموضوع ببساطة...💯 ——— إيه هو الـ Module Bundler؟ 🛠 ببساطة، هو أداة بتاخد كل الملفات اللي بتستخدمها في مشروعك (JS, CSS, Images... إلخ)، وتظبطها وتجمعهم في ملف واحد أو مجموعة ملفات صغيرة ومنظمة، بحيث تكون جاهزة للتشغيل على المتصفح بكفاءة عالية. من أشهر الـ Bundlers اللي ممكن تستخدمهم: - Webpack - Vite - Parcel - Rollup ——— ليه تستخدم الـ Module Bundler؟ 🤷‍♂️ 1- تحسين الأداء (Performance Optimization) 🚀 - بيعمل Minification للكود، يعني بيشيل المسافات والتعليقات الزايدة، فحجم الملف بيصغر ويتحمّل أسرع. - بيعمل Tree Shaking، يعني بيشيل أي كود مش مستخدم من المشروع علشان يبقى خفيف. 2- تقليل عدد الـ Requests 📦 بدل ما المتصفح يطلب 100 ملف JavaScript و CSS، الـ Bundler بيحطهم في ملف واحد أو كام ملف قليلين، فالصفحة تفتح أسرع. 3- التعامل مع الـ Dependencies بسهولة 🔗 لو بتستخدم مكتبات زي React أو Vue، الـ Bundler بينظمها ويدمجها في الكود بذكاء. 4- التوافق مع جميع المتصفحات 🌐 بيحول الكود الحديث لكود قديم مفهوم للمتصفحات القديمة باستخدام أدوات زي Babel. 5- سهولة تقسيم الكود (Code Splitting) 🧩 ممكن تحمل أجزاء معينة من الكود لما تحتاجها بس، بدل ما تحمل كل حاجة مرة واحدة، وده بيسرّع الصفحة. 6- دعم الـ Hot Reloading 🔄 مع أدوات التطوير اللي بتيجي مع الـ Bundler (زي Vite أو Webpack Dev Server)، لما تعدل الكود الصفحة بتتحدث لوحدها من غير ما تعمل Refresh. 7- سهولة التعامل مع الملفات المختلفة 🎨 تقدر تستخدم CSS و SCSS وتضيف صور وخطوط بسهولة عن طريق إعدادات الـ Bundler زي الـ Loaders في Webpack. ——— امتى ممكن تستغنى عن الـ Bundler؟ ❌ لو مشروعك صغير جدًا، زي صفحة HTML بسيطة مع شوية CSS و JS، ممكن تشتغل من غير Bundler. لكن لو المشروع كبر ودخل فيه مكتبات أو أكواد كتير، هتحتاجه جدًا. ——— خلاصة الكلام 🎯 استخدام Module Bundler بيساعدك في: ✅ تحسين الأداء وتسريع التحميل. ✅ تنظيم المشروع وتقليل المشاكل. ✅ توافق أفضل مع المتصفحات. ✅ تجربة تطوير أسهل وأسرع. ——— وفقكم الله لكل خير 🌿

The Complete Backend Developer Roadmap 2025 🔥

https://miro.com/app/board/uXjVLx4LrpU= https://docs.google.com/document/d/18XX61zq7HwtyNYoOV-VRNChx-CxGK8VJi3BLjXx2n_s

Professional English for Software Engineer

This program is designed to provide you with the knowledge, skills, and tools necessary to become a highly effective professional communicator. https://app.manara.tech/learning/36

Operating Systems Course for Beginners 🚀

This course will give you a comprehensive understanding of how operating systems function and manage resources. https://youtu.be/yK1uBHPdp30

10 Best GitHub Repositories to Learn Node.js (2025) 💯

1- Learn Node.js – A Beginner-Friendly Guide https://github.com/manthanank/learn-nodejs 2- Node.js Best Practices https://github.com/goldbergyoni/nodebestpractices 3- Node.js Projects https://github.com/MAshrafM/NodeJS_Projects 4- JavaScript Algorithms https://github.com/trekhleb/javascript-algorithms 5- Awesome Node.js https://github.com/sindresorhus/awesome-nodejs 6- Node.js Full Stack Tutorial https://github.com/Subham-Maity/node-js-full-stack-tutorial 7- The Node.js Master Class https://github.com/pirple/The-NodeJS-Master-Class 8- Learn You Node https://github.com/workshopper/learnyounode 9- Express.js Boilerplate https://github.com/hagopj13/node-express-boilerplate 10- GraphQL Starter Kit https://github.com/kriasoft/graphql-starter-kit

الـدَيْـن التـقـنـي .. Technical Debt 💰 . . عارف لما تبقى مستعجل تخلص شغل، فتقول "ما علينا، خلينا نعديها دلوقتي، وبعدين نرجع نصلحها"؟ المشكلة إن "بعدين" دي غالبًا مش بتيجي، وبتلاقي نفسك في دوامة مشاكل ملهاش نهاية! 👀 في عالم البرمجة، فيه حاجة اسمها Technical Debt أو الدين التقني، وده ببساطة الكود اللي بيتم كتابته بسرعة أو بدون اهتمام بالجودة، علشان ننجز حاجة معينة على المدى القصير، لكن على المدى الطويل بيتحول لكابوس! 😨 ———

📍 LinkedIn

https://www.linkedin.com/posts/dev-alisamir_devabrguide-activity-7302372227067310080-ReYE

📍 Qabilah

https://qabilah.com/posts/VZC8RNt70Xo

State of JS 2024: Top Backend Frameworks Reshaping the JavaScript Ecosystem 💯

ESLint now officially supports linting of CSS ⚡️

Taking our next step towards providing a language-agnostic platform for source code linting. https://eslint.org/blog/2025/02/eslint-css-support

React Native Crash Course+ | Build a Mobile App In 3 Hours 🚀 https://youtu.be/bCpFbERgj7s

The Intelligent Terminal. 🔥

Become a command line power user on day one. Warp combines AI and your dev team’s knowledge in one fast, intuitive terminal. https://www.warp.dev

لما تيجي تبني موقع بـ Next.js، ممكن تلاقي نفسك محتاج تمنع بعض المستخدمين من الوصول لصفحات معينة، سواء لأنهم مش مسجلين دخولهم (Unauthorized - 401) أو لأن الصفحة مش متاحة لهم أساسًا (Forbidden - 403). 🛑 دردشة خفيفة عن الفرق بين الصفحتين، امتى تستخدم كل واحدة فيهم، وإزاي تطبقهم في Next.js 15 بطريقة منظمة وسهلة. 💯 ———

Unauthorized and Forbidden Pages in Next.js 15 🛑

📍 Dev Community https://dev.to/alisamir/unauthorized-and-forbidden-pages-in-nextjs-15-2jm 📍 Medium https://medium.com/@dev.alisamir/unauthorized-and-forbidden-pages-in-next-js-15-%EF%B8%8F-e2ec267a4697

AI Agents Course by Hugging Face 🤗 This free course will take you on a journey, from beginner to expert, in understanding, using and building AI agents. https://huggingface.co/learn/agents-course/unit0/introduction

Master the Art of Crafting Responsive Web Apps like a Pro! 🚀

A must-have DevTool for all web developers that will make your job easier. https://responsively.app