DevGuide

دورة تعلم لينكس كاملة باللغة العربية في 6 ساعات https://youtu.be/8f2Zsb89uoM

You know about the vh unit in CSS, but what are these new mystery units in CSS?

Real-World DevOps/Cloud Projects For Learning from Beginner to Advanced 🚀

This repository serves as a comprehensive resource for aspiring DevOps engineers to learn and implement real-world DevOps projects. It includes guides and solutions for deploying scalable systems, such as deploying a Java application on AWS using a 3-tier architecture and setting up scalable VPC architectures in the cloud. https://github.com/NotHarshhaa/DevOps-Projects

12 نصيحـة لحمـاية الـ APIs 💯 . . في عالم البرمجة، تعتبر الـ APIs هي الأعصاب في جسم التطبيقات، لو حصل فيها مشكلة، الدنيا كلها بتخرب. عشان كده، حماية الـ APIs مهمة جدًا وحاجة أساسية في التطبيق. 💡 تعال ندردش شوية عن طرق حماية الـ APIs... ——— 1- استخدم الـ HTTPS: دي أول حاجة لازم تعملها، أي حاجة بتتبعت أو بتستقبلها لازم تكون مشفّرة، عشان تحمي بياناتك. 2- اعتمد على الـ OAuth2: ده المعيار الأساسي عشان تحمي التطبيقات اللي بتتصل بـ APIs، وبيضمن إن الـ Token اللي بيتبعت آمن ومحدود الصلاحيات. 3- جرب الـ WebAuthn: لو شغلك فيه حساسية عالية، فكر في WebAuthn عشان تضيف طبقة أمان من خلال المصادقة البيومترية (زي البصمة أو التعرف على الوجه). 4- قسّم المفاتيح حسب الصلاحيات (Leveled API Keys): مينفعش نفس المفتاح يقدر يعمل كل حاجة، قسّم المفاتيح بناءً على صلاحيات المستخدم أو التطبيق. 5- ركز على الـ Authorization مش بس الـ Authentication: مجرد إن المستخدم سجل الدخول مش معناه إنه مسموح له يعمل كل حاجة. تأكد إن كل طلب معمول له تفويض. 6- طبّق الـ Rate Limiting: متخليش أي حد يقدر يضرب الـ API بتاعك بمئات الطلبات في الثانية. كده هتحمي نفسك من الـ DDoS attacks. 7- اعمل API Versioning: تغيير صغير في الـ API ممكن يبوّظ تطبيقات كتير لو مش مأمن نسخة قديمة ليها. حافظ على الإصدارات المختلفة. 8- استخدم Whitelisting: اسمح بس لطلبات جايه من IPs معينة، وده بيقلل احتمالية الاختراق من جهات غير معروفة. 9- افحص OWASP API Security Risks: قائمة OWASP دي زي الكتالوج للمخاطر الشائعة في الـ APIs. تأكد إنك عارفهم وعالجتهم. 10- خلي فيه API Gateway: ده زي الحارس الشخصي للـ APIs. بيعمل فلترة للطلبات، مصادقة، وتحكم شامل في الأمان. 11- تعامل بحرص مع الأخطاء (Error Handling): متطلعش معلومات حساسة لما يحصل خطأ، زي الـ stack traces أو البيانات الداخلية. 12- فعّل Input Validation: بلاش تدي الأمان للبيانات اللي جايه من الـ client بشكل عشوائي. افحص كل المدخلات وتأكد إنها سليمة.

React 19: Break Hook Cycles

Fix circular dependencies in your React hooks with useDeferredValue!

بالرغم من إن GraphQL لها مميزات كتير زي المرونة في طلب البيانات وتقليل الـ requests، إلا أنها زي أي تكنولوجي، لها شوية عيوب لازم تاخد بالك منها... . . تعال أقولك على أهم العيوب اللي ممكن تواجهك: 1. تعقيد في الـ Server-Side  في GraphQL، السيرفر محتاج يكون ذكي شوية عشان يتعامل مع كل الـ queries المختلفة اللي ممكن يطلبها العميل (client). بمعنى إن كل query ممكن تطلب بيانات مختلفة تمامًا، فممكن يبقى فيه ضغط على المبرمجين اللي شغالين على الـ backend عشان يبنوا الـ resolvers اللي بتتعامل مع الطلبات دي. ده بيحتاج وقت وجهد أكتر مقارنة بـ REST اللي بيبقى كل endpoint ثابت ومعروف بيعمل إيه. ——— 2. الأداء (Performance) بالرغم من إن GraphQL بتقلل عدد الـ requests اللي بتتبعت، إلا إنها ممكن تستهلك موارد أكتر على السيرفر. السبب في ده إن العميل ممكن يطلب بيانات كتير في request واحد، والـ server لازم يعالج كل الـqueries دي مرة واحدة. لو كان في طلبات معقدة بتطلب بيانات كتير من أماكن مختلفة، ممكن الأداء يتأثر بالسلب. ——— 3. الـ Over-fetching والـ Under-fetching في REST، كان العيب الأساسي إنك ممكن تاخد بيانات أكتر من اللي أنت محتاجه (Over-fetching)، لكن في GraphQL، العكس ممكن يحصل. يعني ممكن تطلب بيانات قليلة جدًا (Under-fetching)، وبعدين تكتشف إنك محتاج ترجع تعمل query تاني عشان تجيب بيانات ناقصة. ——— 4. الحماية (Security) بما إن العميل في GraphQL عنده حرية يطلب البيانات اللي هو عاوزها، ممكن يبقى في مشاكل أمنية لو الـ schema مش مكتوبة بشكل صحيح. على سبيل المثال، العميل ممكن يطلب بيانات بشكل متكرر بطريقة تسبب ضغط على السيرفر أو يطلب بيانات حساسة لو الحماية مش مظبوطة. ——— 5. مسار التعلم (Learning Path) لو أنت أو التيم بتاعك متعودين على REST، التحول لـ GraphQL ممكن ياخد شوية وقت عشان تفهموا إزاي تشتغلوا بها بشكل فعّال. ——— 6. عدم التوافق مع الـ Caching التقليدي في REST، تقدر بسهولة تستخدم الـ HTTP Caching لأن الـ endpoints ثابتة، لكن في GraphQL، الـ queries ممكن تبقى مخصصة جدًا، وده بيصعب عملية الـ caching. عشان كده، هتحتاج تستخدم حلول مختلفة زي Apollo Client اللي بيوفر caching مناسب لـ GraphQL، بس ده بيزود التعقيد. ——— في النهاية، GraphQL قوية ومرنة جدًا، لكن زي أي أداة، لها مميزاتها وعيوبها. محتاج تقرر لو العيوب دي هتأثر على مشروعك ولا لا، بناءً على متطلبات التطبيق والـ team اللي شغال معاك.

إزاي تخلي الموقع يشتغل من غير انترنت؟ . . عمرك فكرت إزاي ممكن تفتح موقع ويب ويفضل يشتغل حتى لو الإنترنت قطع؟ أو تلاقي الموقع سريع جدًا كأنه مخزن كل حاجة عندك؟ السر هنا في الـ Service Workers. الـ Service Workers بتلعب دور كبير في تحسين تجربة المستخدم، كمان بتخلي المواقع تشتغل بسرعة وكفاءة حتى في حالة انقطاع الإنترنت. تعال نفهم الموضوع ببساطة... ——— 📌 يعني إيه Service Workers؟ ببساطة، ده كود أو سكربت JavaScript بيشتغل في الخلفية (background) بين المتصفح والسيرفر. وبيعطي الموقع مميزات كبيرة زي: - الـ (Caching): يعني يحفظ ملفات الموقع عندك على الجهاز عشان يفتح بسرعة حتى لو الإنترنت ضعيف. - الموقع يشتغل حتى لو الإنترنت قاطع. - الـ (Push Notifications): الرسائل اللي بتجيلك من الموقع حتى لو مش فاتح الصفحة. ——— 📌 إزاي الـ Service Workers بتشتغل؟ 1- التسجيل (Registration): أول ما المستخدم يفتح الموقع، الـ Service Worker بيتسجل مرة واحدة. 2- التثبيت (Installation): هنا يقدر يبدأ يشتغل ويحفظ الملفات اللي محتاجها. 3- الحدث (Fetch Event): لما المستخدم يطلب أي حاجة (زي صورة أو صفحة)، الـ Service Worker يقرر يجيبها من الكاش ولا من السيرفر. ——— ✅ مميزات الـ Service Workers: - أداء أفضل: لأنه بيقلل الضغط على السيرفر. - تجربة مستخدم ممتازة: من ناحية السرعة وإمكانية التشغل بدون إنترنت. - الأمان: لازم الـ Service Workers يشتغلوا على HTTPS عشان يحافظوا على بيانات المستخدم. ——— 📌 ملحوظات مهمة 📍 الـ Service Workers محتاجة تخطيط كويس عشان متعملش كاش للملفات زيادة عن اللزوم. 📍 مش كل المميزات بتشتغل في كل المتصفحات، فلازم تعمل حسابك. ——— لو عاوز تتعمق في الموضوع وتعرف تفاصيل أكتر 👇 Service Worker API https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API Service workers https://web.dev/learn/pwa/service-workers

تعال ندردش شوية عن GraphQL، ونعرف الفرق بينها وبين REST APIs 💯 ——— 📌 إيه هي GraphQL؟ الـ GraphQL عبارة عن طريقة للتعامل مع الـ APIs، وهي تعتبر بديل أو تحسين لـ REST APIs. اللي بيحصل في GraphQL إنك بتقدر تحدد البيانات اللي عاوزها بالضبط من الـ API، من غير ما ترجع كل حاجة موجودة في الـ endpoint زي ما بيحصل في REST. بمعنى تاني، في REST لو بتطلب بيانات المستخدم مثلًا، الـ API بيرجعلك كل حاجة عن المستخدم حتى لو أنت محتاج جزء صغير منها زي الاسم أو الإيميل بس. لكن في GraphQL، أنت اللي بتحدد أنت عاوز إيه بالضبط، يعني لو محتاج الاسم بس، هتاخد الاسم بس وهكذا. ——— 📌 إيه الفرق بين GraphQL وREST؟ ✅ الـ REST بيعتمد على فكرة الـ endpoints، يعني كل endpoint مسؤول عن إرجاع نوع معين من البيانات. لكن في GraphQL، عندك query واحدة تقدر تطلب بيها أي بيانات أنت محتاجها، بغض النظر عن عدد الـ endpoints. ✅ في REST ممكن تبقى محتاج تعمل أكتر من request عشان تجيب البيانات من أكتر من مكان، لكن في GraphQL، تقدر تطلب كل البيانات المطلوبة في request واحدة. ✅ كمان GraphQL بتقلل كمية البيانات اللي بترجع في الـ response، وده لأنه أنت اللي بتحدد إيه اللي محتاجه بالضبط. على عكس REST اللي ممكن يبعت بيانات أكتر من اللي أنت عاوزها. ——— 📌 ليه ممكن تفكر تستخدم GraphQL؟ ⚡️ لو المشروع معقد وفيه علاقات كتير بين البيانات، GraphQL هتساعدك تنظم البيانات وتطلبها بطريقة أسهل. ⚡️ هتقلل عدد الـ requests اللي بتتبعت للسيرفر. ⚡️ هتتحكم أكتر في البيانات اللي بترجع، وده هيحسن أداء التطبيق خصوصًا لو شغال على موبايل أو انترنت بطيء. ——— الـ GraphQL مش بديل كامل عن REST، لكن هي طريقة مختلفة في التعامل مع الـ APIs فيها مرونة أكتر في طلب البيانات. لو بتطور تطبيق معقد أو محتاج تحكم أكتر في الـ requests اللي بتبعتها وتستقبلها، يبقى GraphQL ممكن تكون اختيار مناسب لك. ——— طيب هي ملهاش عيوب؟ الـ GraphQL زيها زي أي تكنولوجي لها مميزات ولها عيوب، لكن خلينا نذكر العيوب في جزء تاني منفصل...

إشكالية الـRoadmap...💯 . . - يعني إيه Roadmap؟ - هل لازم أتبع Roadmap ولا أمشي بالبركة؟ - هل لازم أخلص كل حاجة في الـRoadmap؟ - هل لو خلصت الـRoadmap كلها هلاقي شغل؟ ——— ببساطة الـRoadmap أو خارطة الطريق هي عبارة عن مسار محدد لتعلم شيء معين بطريقة منظمة وبالترتيب. مثلًا لو حد هيبدأ في مجال الفرونت فالطبيعي إنه يتعلم HTML ثم CSS ثم JavaScript وهكذا...مينفعش إنه يتعلم CSS قبل ما يتعلم HTML. لو حد هيبدأ في مجال الموبايل فالطبيعي إنه يتعلم لغة Java أو Kotlin ثم يبدأ في كورسات الأندرويد بالترتيب من البداية وهكذا... ——— نيجي للنقطة الثانية...الأفضل إنك تمشي على Roadmap معينة علشان ميحصلش تشتت وتلاقي نفسك دخلت في متاهات وده عن تجربة شخصية...الدنيا تكون منظمة بالنسبة لك وعارف أنت رايح فين وإيه الخطوة الجاية وإيه اللي هتركز عليه وإيه اللي محتاج تقرأه من باب العلم بالشيء فقط وهكذا... ——— طيب هل محتاج تخلص الـ Roadmap كلها؟ فيه بعض الـRoadmaps بتبقى موضحة الحاجات اللي محتاج تركز عليها في اللغة أو في إطار العمل اللي بتذاكره وفيه Roadmaps بتسيب الدنيا سايحة وهنا أنت ممكن تحس بإحباط وإن الطريق لسه طويل... طب إيه الحل؟ اسأل...بس قرر هتسأل مين وليه وهتسأله في إيه...متسألش صاحبك اللي بيذاكر معاك ونفس مستواك...متسألش جوجل ولا ChatGPT لأنهم هيكبروا الموضوع زيادة عن اللزوم...متسألش حد في غير تخصصك حتى لو له مسمى وظيفي كبير... اسأل حد في نفس المجال ونفس التخصص ونفس اللغة ونفس إطار العمل اللي بتذاكره ولكن عنده خبرة كويسة في سوق العمل...هيختصر عليك الطريق وهيوفر عليك وقت جامد وهيقولك على الخلاصة...لازم خبرة في سوق العمل؟ أيوه لأن طبيعي هو اشتغل في أكتر من مكان واشتغل على مشاريع مختلفة وعارف الدنيا ماشية إزاي وده اللي أنت محتاجه فعلًا...بعكس لو شخص أكاديمي بيشرح كورسات فقط أو بيقدم محتوى برمجي فقط... ——— ممكن تلاقي شغل قبل ما تخلص الـ Roadmap، لكن ده مش بالضرورة ومش دائمًا ده هيحصل، ولكن هتبقى شبه مؤهل لسوق العمل وباقي حاجات بسيطة...زي إنك تبدأ تعمل مشاريع وتطبق على اللي تعلمته...إنك تشوف متطلبات الوظيفة إيه في سوق العمل وتشوف الشركات بتحتاج إيه تاني... لو أنت محدد شركة معينة عاوز تشتغل فيها فالأفضل إنك تشوف الوظائف عندهم بتحتاج إيه وتقيس على مهاراتك... كمان إنك تظهر نفسك على لينكدان وتخلي ليك بروفايل كويس وبيظهر في البحث عند الـ HR وتأكد إنك كاتب المسمى الوظيفي صح... تعمل CV محترم وابن ناس وتخلي أكتر من حد يراجعه علشان لو فيه تعديلات، وقبل كل ده خليك دائمًا فاكر: "إِنَّ اللَّهَ هُوَ الرَّزَّاقُ ذُو الْقُوَّةِ الْمَتِينُ"... ——— بالتوفيق يا صديقي 🌿

مهم جدًا تحفظ الريبو ده عندك 💯 . . Awesome YouTube Channels A comprehensive list of +180 YouTube Channels (in no particular order) for Data Science, Data Engineering, Machine Learning, Deep Learning, Artificial Intelligence, Computer Science, programming, software engineering, and more! ——— https://github.com/benthecoder/yt-channels-DS-AI-ML-CS

مجموعة مصادر هتساعدك في التحضير لانترڤيو الـ React Native 💯 . . - React Native Interview Questions and Answers https://lnkd.in/dyirJaJx - 100 Must-Know React Native Interview Questions https://lnkd.in/dvfsRYXP - Top 30 React Native Interview Questions https://lnkd.in/dpfeAm97 - 10 Essential React Native Interview Questions https://lnkd.in/dbmi_esw - Top 100 React Native Interview Questions and Answers https://lnkd.in/ddbk7HmS - 40 React Native Interview Questions and Answers https://lnkd.in/dan8uYHb - 41 React Native Interview Questions (ANSWERED) https://lnkd.in/dPWUb_Ff - Top 30 React Native Interview Questions https://lnkd.in/dbHazhdb - Advanced React Native Interview Questions & Answers https://lnkd.in/dtYuggAQ - Best React Native Interview Questions And Answers https://lnkd.in/d-VJqKye - Top 100+ React Interview Questions and Answers https://lnkd.in/djifvmzH - 40+ React Native Interview Questions for Tech Interview Preparation https://lnkd.in/dx8N6Cdb - Top 45+ React Native Interview Questions https://lnkd.in/f69_UpZ

مجموعة Repos رايقة لجماعة الـ Web 💯 . . 𝐀 𝐜𝐨𝐥𝐥𝐞𝐜𝐭𝐢𝐨𝐧 𝐨𝐟 𝐚𝐰𝐞𝐬𝐨𝐦𝐞 𝐭𝐡𝐢𝐧𝐠𝐬 𝐫𝐞𝐠𝐚𝐫𝐝𝐢𝐧𝐠 𝐖𝐞𝐛 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐦𝐞𝐧𝐭. ⭐️ - Awesome JavaScript https://lnkd.in/dR2BxbtF - Awesome TypeScript https://lnkd.in/df8JBEBm - Awesome React.js https://lnkd.in/dApUkSQ5 - Awesome Angular https://lnkd.in/dZ6reGbx - Awesome Vue.js https://lnkd.in/d92TyJQ7 - Awesome React Native https://lnkd.in/dZcYTemC - Awesome Svelte https://lnkd.in/dTe8PpXJ - Awesome Node.js https://lnkd.in/diQfrRdR - Awesome Express.js https://lnkd.in/dCNQrQWY - Awesome MongoDB https://lnkd.in/dPNFewDm - Awesome Next.js https://lnkd.in/dD7ZyT3g - Awesome PHP https://lnkd.in/dSRNZFir - Awesome Laravel https://lnkd.in/dJDU7xHe - Awesome .NET https://lnkd.in/dVd2KFBF - Awesome Java https://lnkd.in/dxjRPzRS - Awesome C# https://lnkd.in/dbFvQkVA - Awesome Spring https://lnkd.in/d6egPvPN - Awesome Deno https://lnkd.in/dYCz6Cza - Awesome Bun https://lnkd.in/dusj4z4p - Awesome Remix https://lnkd.in/dKzh7v6m - Awesome Qwik https://lnkd.in/deVfxNAG - Awesome Git https://lnkd.in/dc5YD3Nw - Awesome GitHub https://lnkd.in/dvNzdCQe - Awesome Tailwind CSS https://lnkd.in/dKziPbDG - Awesome Bootstrap https://lnkd.in/dq9QHZp2 - Awesome Sass https://lnkd.in/dRtSe58W - Awesome Flask https://lnkd.in/dpgnJ8uT - Awesome Django https://lnkd.in/d9SQKnKB - Awesome Python https://lnkd.in/dcmkHKJ4 - Awesome SvelteKit https://lnkd.in/dC7MVefh - Awesome DevOps https://lnkd.in/dxBBbvbf - Awesome Interviews https://lnkd.in/dC6Ru4hh - Awesome Web https://lnkd.in/dsX2iwnp - Awesome HTML5 https://lnkd.in/d6ieWMqC - Awesome CSS https://lnkd.in/dHZ8gNmy

Build Large Next.js Projects Lightning Fast 🚀

قناة الوظائف والتدريبات ⚡️ DevJobs Your daily destination for top-tier programming jobs and training. https://t.me/devsjobs

مجموعة مصادر لأهم أسئلة انترڤيو الـVue.js 🚀 ——— - List of 300 Vue.js Interview Questions https://lnkd.in/daiv9PWz - Top 50 Vue.js Interview Questions and Answers https://lnkd.in/dVEyAdAU - Top 30 Vue JS Interview Questions https://lnkd.in/drJm6ZPN - 100+ Vue.js Interview Questions and Answers https://lnkd.in/dKqVD6T2 - Top Vue.js Interview Questions and Answers https://lnkd.in/dt-Qc7uj - 50+ Essential Vue Interview Questions & Answers https://lnkd.in/dEzp69_H - Top 50 Vue.js Interview Questions And Answers https://lnkd.in/d8t3q94F - Most Important Vue.js Interview Questions with Answers https://lnkd.in/dPZSZZh4 - A list of questions for interviewing Vue.js candidates https://lnkd.in/df3wS7XN - Vue.js Frontend Developer Interview Questions https://lnkd.in/dhAeXg2F - 60 Vue.js interview questions to ask developers https://lnkd.in/d-WFUr45 - Top 100 Vue.js Interview Questions https://lnkd.in/duMwgK2Y - Top 41 Vue.js Interview Questions And Answers https://lnkd.in/dC6mQK4e

مجموعة مشاريع للتطبيق العملي على Node.js ⚡️ بلاش تنقل الكود واعتبر المشاريع دي مرجع تاخد منه أفكار تنفذها بنفسك الأول... ——- - https://dev.to/anderrv/web-scraping-with-javascript-and-node-js-2d - https://dev.to/sm0ke/node-js-react-soft-dashboard-free-version-1k5g - https://towardsdatascience.com/building-a-real-time-web-app-in-nodejs-express-with-socket-io-library-d9b50aded6e6 - https://dev.to/koladev/authentication-and-authorization-with-jwts-in-node-expressjs-5a9a - https://devdojo.com/teri/how-to-build-a-web-scraper-with-nodejs - https://javascript.plainenglish.io/google-api-authentication-using-oauth2-0-and-passport-js-in-nodejs-7b2d9b73c513 - https://www.bezkoder.com/node-express-sequelize-postgresql - https://kirablog.hashnode.dev/rest-api-using-nodejs - https://reactjsexample.com/docker-tutorial-nodejs-express-mongodb-react-redis-nginx - https://blog.avneesh.tech/building-a-crud-api-with-nodejs-and-mongodb - https://dev.to/nerdjfpb/how-to-build-simple-crud-restful-api-with-nodejs-expressjs-and-mongodb-in-2022-4756 - https://reactjsexample.com/a-fullstack-web-application-built-using-mern-stack-mongodb-express-react-nodejs - https://devdojo.com/usmanwrites/build-a-whatsapp-api-using-node-express - https://redis.com/blog/how-to-build-a-music-sharing-app-using-nodejs-and-redis - https://towardsdev.com/creating-a-nodejs-restful-api-without-expressjs-part-1-123933e7141a - https://www.freecodecamp.org/news/build-a-realtime-chat-app-with-react-express-socketio-and-harperdb - https://www.telerik.com/blogs/modern-apis-fastify-node - https://dev.to/permify/build-a-team-permissions-system-in-nodejs-app-using-auth0-and-permify-part-1-52bo - https://hackernoon.com/building-a-simple-telegram-bot-with-nodejs-and-grammy - https://www.freecodecamp.org/news/how-to-build-a-command-line-application-with-nodejs - https://dzone.com/articles/your-go-to-guide-to-develop-cryptocurrency-blockch - https://dev.to/francescoxx/build-a-crud-rest-api-in-javascript-using-nodejs-express-postgres-docker-jkb - https://blog.erickwendel.com.br/implementing-the-websocket-protocol-from-scratch-using-nodejs - https://deno.com/blog/build-api-express-typescript - https://blog.logrocket.com/best-node-js-web-scrapers-use-case - https://dev.to/wesleymreng7/uploading-multiple-files-at-the-same-time-using-multithreading-in-nodejs-3ib4 - https://reflectoring.io/tutorial-graphql-apollo-server-nodejs-mongodb - https://blog.javascripttoday.com/blog/build-a-rest-api-in-javascript - https://blog.javascripttoday.com/blog/creating-a-url-shortener-with-node - https://blog.erickwendel.com.br/how-to-create-e2e-tests-in-nodejs-with-no-frameworks-step-by-step - https://antman-does-software.com/implementing-the-outbox-pattern-in-nodejs-and-postgres - https://dev.to/pavanbelagatti/build-a-real-time-chat-application-with-socketio-and-nodejs-with-automated-testing-38h8 - https://www.thisdot.co/blog/implementing-a-task-scheduler-in-node-using-redis - https://www.freecodecamp.org/news/how-to-use-elastic-beanstalk-to-deploy-node-js-app - https://www.freecodecamp.org/news/how-to-work-with-files-in-node-js - https://levelup.gitconnected.com/api-development-with-nodejs-express-and-typescript-from-scratch-dto-interface-and-54ebab8c447e - https://www.freecodecamp.org/news/build-a-secure-server-with-node-and-express - https://hackernoon.com/web-scraping-using-a-headless-browser-in-nodejs - https://code.tutsplus.com/token-based-authentication-with-angularjs-nodejs--cms-22543t - https://hackernoon.com/creating-a-nodejs-server-with-postgres-and-knex-on-express?source=rss - https://hackernoon.com/how-to-extract-and-generate-json-data-with-gpts-langchain-and-nodejs?source=rss - https://hackernoon.com/build-a-personal-shopping-assistant-using-brainjs-and-nodejs?source=rss - https://blog.javascripttoday.com/blog/web-scraping-bright-data-nodejs - https://www.freecodecamp.org/news/nodejs-tutorial-build-a-task-manager-cli-tool - https://www.freecodecamp.org/news/build-an-online-image-to-pdf-converter-with-html-css-js-nodejs - https://alexmaina.hashnode.dev/sending-emails-using-resend

Next.js AVIF Fallbacks ⚡️

من ضمن المصطلحات المهمة في مجال الويب 💯 . . خلال رحلتك في مجال الويب أكيد مر عليك مصطلح الـ CORS، أو واجهتك مشكلة بسبب موضوع الـ CORS في المتصفح. تعال ندردش شوية... ——— ببساطة الـ CORS اختصار لـ Cross-Origin Resource Sharing 📌 في الأول كده خلينا نعرف يعني إيه Origin؟ الـ "Origin" هو الدومين (domain) أو النطاق اللي الموقع أو السيرفر بتاعك شغال عليه. بيبقى عبارة عن الـ "Protocol" (زي HTTP أو HTTPS) + اسم الدومين (زي example.com) + البورت (لو مختلف عن الـ 80 لـ HTTP أو 443 لـ HTTPS). ——— ⚡️ فين المشكلة؟ لو أنت شغال على موقع معين وعاوز الموقع بتاعك يطلب بيانات أو resources (زي JSON أو ملفات) من سيرفر تاني، السيرفر التاني ده لازم يبقى من نفس الـ origin بتاعك، يعني نفس الدومين، نفس البروتوكول، ونفس البورت. ودي حاجة اسمها Same-Origin Policy، السياسة دي معمولة أساسًا علشان تحمي المستخدمين من أي طلبات ضارة ممكن تجي من مواقع تانية غير موثوقة. بس في بعض الحالات، أنت كـ Developer بتبقى محتاج تعمل طلبات للسيرفرات اللي مش من نفس الـ origin بتاعك، زي لما يكون عندك Frontend شغال على دومين معين وAPI أو Backend شغالين على دومين أو بورت مختلف. ——— هنا بقى ييجي دور الـ CORS 👇 الـ Cross-Origin Resource Sharing (CORS) هو الحل اللي بيسمح للمواقع إنهم يطلبوا بيانات أو ملفات من سيرفرات تانية بمختلف الـ origins بشكل آمن، بمعنى إنك تقدر تتخطى الـ Same-Origin Policy وتعمل طلبات لسيرفرات تانية طالما السيرفر ده بيقبل إنه يتعامل مع الموقع بتاعك. ——— 📌 إزاي الـ CORS بتشتغل؟ لما موقعك بيطلب بيانات من سيرفر تاني مختلف عن الـ origin بتاعه، السيرفر اللي عليه الـ resource اللي أنت بتطلبها هو اللي بيقرر إذا كان الطلب ده مسموح أو لا. السيرفر بيرد على الطلب من خلال الـ (headers) اللي بيرجعها مع الـ response. واحد من أهم الـ headers دي هو:

Access-Control-Allow-Origin

اللي بيحدد الـ origins اللي مسموح ليها تطلب بيانات من السيرفر ده. لو الـ origin بتاع موقعك موجود في القيمة بتاعت الـ header ده، السيرفر هيسمح بتنفيذ الطلب وهيرجعلك الـ response. ولو لل، الطلب هيتمنع وهيجيلك error من نوع CORS في المتصفح. ——— 📍 كمان فيه Headers تانية زي: - الـ Access-Control-Allow-Methods: اللي بتحدد أنواع الطلبات اللي مسموح ليك تعملها (GET, POST, PUT, DELETE...). - الـ Access-Control-Allow-Headers: اللي بتحدد الـ headers اللي مسموح ليك تبعتها في الطلبات. - الـ Access-Control-Allow-Credentials: لو الطلب محتاج يبعت Cookies أو بيانات معينة، لازم الـ header ده يبقى موجود ومظبوط على true. ——— وفقكم الله لكل خير 🌿

Mastering Web Security 💯 https://youtu.be/-GfSbk_VqSk