DevGuide

الـ REST APIs دلوقتي بقت حاجة أساسية في أي مشروع برمجي، سواء كان تطبيق ويب أو موبايل. طيب تعال نفهم واحدة واحدة، يعني إيه أصلاً REST API وليه مهمة؟ ⚡️ أول حاجة كلمة API هي اختصار لـ Application Programming Interface، وده معناه إن الـ API عبارة عن وسيلة بتسمح لتطبيقات مختلفة إنها "تتكلم" مع بعض. 💯 يعني إيه "تتكلم"؟ يعني تطبيق زي تطبيق موبايل أو ويب يقدر يطلب بيانات أو خدمات من سيرفر (الخادم) ويستقبل رد. طب إزاي بنعمل ده؟ هنا بييجي دور الـ REST. ——— كلمة REST اختصار لـ Representational State Transfer، وده نوع من أنواع الـ APIs اللي بيسمح لنا إننا نستخدم بروتوكول HTTP (اللي هو نفس البروتوكول اللي بنستخدمه لما ندخل على أي موقع) علشان نبعت طلبات للسيرفر وناخد ردود منه. 🔻 ——— 📌 إزاي ده بيشتغل بقى؟ الفكرة ببساطة إنك بتبعت حاجة اسمها request للسيرفر. الطلب ده ممكن يكون مثلًا إنك عاوز تجيب بيانات معينة زي قائمة المنتجات، أو إنك عاوز تضيف مستخدم جديد. السيرفر بيشوف الطلب بتاعك، وبيرجعلك response اللي بيكون فيه البيانات المطلوبة. البيانات اللي السيرفر بيرد بيها بتكون في الغالب مكتوبة بصيغة اسمها JSON (JavaScript Object Notation)، ودي طريقة بسيطة ومنظمة علشان التطبيقات تقدر تفهم البيانات بشكل سهل وتشتغل بيها. ——— 📌 ليه بقى REST APIs مهمة؟ ✅ فصل الـ frontend عن الـ backend: بمعنى إن المبرمجين اللي شغالين على تصميم واجهة المستخدم (frontend) يقدروا يشتغلوا بعيد عن اللي شغالين على السيرفر والبيانات (backend). كل واحد بيبعت طلبات للتاني وياخد منه ردود من غير ما يكونوا مرتبطين ببعض بشكل مباشر. ✅ المرونة: الـ REST APIs بتخلي التطبيقات المختلفة (موبايل، ويب، برامج ديسكتوب) تقدر تتكلم مع نفس السيرفر. يعني مثلًا لو عندك موقع ويب وتطبيق موبايل، الاتنين ممكن يستخدموا نفس الـ API عشان يجيبوا نفس البيانات. ✅ لو عاوز تضيف مميزات أو تطور في التطبيق، مش بتحتاج تغير كل حاجة. فقط بتضيف نقاط جديدة (endpoints) في الـ API. ——— فبالتالي، الـ REST APIs بتخلي عملية التواصل بين التطبيقات والسيرفر سهلة ومرنة جدًا، وبتسهل على المبرمجين إنهم يبنوا مشاريع كبيرة بشكل منظم وسهل في التعديل. 🔥

معظم الشركات حاليًا معتمدة على GitLab في إدارة المشاريع الخاصة بها، فالأفضل إنك تتعلم GitLab بالإضافة إلى تعلم Git & GitHub 🔻 لو متعرفش يعني إيه Git خليني أقولك ببساطة كده، Git هو نظام إدارة إصدارات (Version Control System) بيساعدك تتحكم في كل التغييرات اللي بتحصل في الكود بتاعك. يعني لو عملت تعديل غلط، ممكن بكل سهولة ترجع لنسخة قديمة من الكود وتصلح اللي حصل. ——— أما GitHub فهو منصة بترفع عليها الكود بتاعك اللي مستخدم فيه Git عشان تقدر تخزنه أونلاين، وتشتغل عليه مع باقي التيم وكمان توصله من أي جهاز بنفس الأكونت بتاعك. يعني تخيل إنك شغال في مشروع كبير ومعاك تيم، كل واحد ممكن يشتغل على جزء معين من الكود، وبعدين تدمجوا شغلكم كله مع بعض من غير ما يحصل أي لخبطة. ——— ميزة إدارة الإصدارات (Version Control) بقى إنها بتخليك تتابع كل نسخة بتعدلها في الكود، وتقدر تعمل branches يعني نسخ مختلفة من الكود لكل خاصية جديدة بتشتغل عليها، وبعد ما تخلص بتدمجها مع النسخة الأساسية من المشروع. بالنسبة لـ GitLab فهو منصة زي GitHub من حيث الوظيفة والاستخدام. ولكن هتلاقي شكلها مختلف شوية. ——— بالتوفيق يا بطل 💪🏻

وأنت بتكتب كود JavaScript، مهم جدًا تركز على كتابة كود نظيف (Clean Code) وسهل الفهم، مش بس عشان نفسك، لكن كمان عشان أي حد تاني يشتغل على الكود بعدك وبالأخص لو شغال في تيم في شركة أو على مشروع معين. ⚡️ ——— 📌 حاول تخلي أسماء المتغيرات والدوال معبرة: لازم الاسم يكون بيوضح إيه اللي بيحصل، بلاش تختار أسماء زي x وy. مثال: بدل ما تكتب tmp، خلي الاسم زي userAge أو productPrice. ——— 📌 خلي الدالة بتعمل حاجة واحدة بس: كل دالة لازم يبقى ليها وظيفة واضحة محددة، يعني لو عندك دالة بتجيب داتا من API وكمان بتعمل معالجة ليها وتعرضها، فالأفضل إنك تقسمهم لدوال أصغر كل واحدة منهم مسؤولة عن وظيفة واحدة. ——— 📌 قلل من استخدام الـ comments: الكود بتاعك المفروض يبقى واضح لدرجة إنه مش محتاج كومنتات كتير، استخدم الكومنتات بس لما يكون فيه حاجة فعلاً محتاجة توضيح. ——— 📌 استخدم الـ const و let صح: بلاش تستخدم var، ودايمًا خلي بالك إنك تستخدم const للمتغيرات اللي مش هتتغير، وlet للحاجات اللي ممكن تتغير قيمتها. ——— 📌 رتب الكود وخليه مقروء: خلي فيه مسافات بين الأسطر واهتم بتنسيق الكود، استخدام أدوات زي Prettier ممكن يساعدك في الموضوع ده. ——— لو مهتم أكثر بالـ Clean Code في JavaScript بنصحك تشوف الموقع ده 🔻 https://blog.abdelhadi.org/clean-code-javascript-in-arabic ——— بالتوفيق يا بطل 💪🏻

تركاية فرونت اند ع السريع...⚡️ - لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍 لو زهقت من أشكال الـ list التقليدية في الـ CSS، تعال أقولك على حاجة عبقرية تقدر من خلالها تعمل الـ list style الخاصة بيك وتتحكم في شكل الأرقام أو الرموز بكل سهولة💡 CSS Custom List Styles 🔻 ——— ⚡️ Tutorial Video: https://youtu.be/wZ4TdxtvLdQ ⚡️ LinkedIn Post: https://www.linkedin.com/posts/dev-alisamir_css-cssstyling-frontendabrtips-activity-7238241222073479169-CQpA ——— بالتوفيق يا بطل 💪🏻

السؤال اللي هتقابله في أي انترفيو JavaScript Learn Closures In 13 Minutes https://youtu.be/47SPG8TvUXA

Throttling & Debouncing in JavaScript: A Beginner's Guide ⚡️ - When using JavaScript, excessive event triggers can slow down your application. For instance, a user resizing the browser window or typing in a search bar can cause events to fire repeatedly in a short time, impacting app performance. - This is where throttling and debouncing come to the rescue. They help you manage how often your functions are called when dealing with events that fire too often. ——— https://dev.to/alisamir/throttling-debouncing-in-javascript-a-beginners-guide-3j7n

لو مهتم بتطوير تطبيقات الويب بطريقة أفضل 💯 - لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍 https://www.linkedin.com/posts/dev-alisamir_javascript-react-nextjs-activity-7237809089198608385-NG4a ——— بالتوفيق يا بطل 💪🏻

JavaScript Promises Crash Course https://youtu.be/3xYd9fJ_0Z8

Calendar.js - a JavaScript drag & drop event calendar that is fully responsive and compatible with all modern browsers. https://calendar-js.com

تركاية CSS ع السريع...⚡️ - لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍 CSS Text Line Clamp 🔻 ——— ⚡️ Tutorial Video: https://youtu.be/78RorK5M-Uk ⚡️ LinkedIn Post: https://www.linkedin.com/posts/dev-alisamir_css-css3-cssstyling-activity-7237352868641443841-PCNK

Free Professional Logo Placeholders https://uilogos.co

طريق النجاح في مجال الفرونت اند - محمد أبو سريع https://youtu.be/0UGkikHf1Yw

Best ChatGPT Prompts For Web Development 🔥

Develop an architecture and code for a <website description> website with JavaScript.

Help me find mistakes in the following code <paste code below>.

I want to implement a sticky header on my website. Can you provide an example of how to do that using CSS and JavaScript?

Please continue writing this code for JavaScript <post code below>

I need to create a REST API endpoint for my web application. Can you provide an example of how to do that using Node.js and Express?

Find the bug with this code: <post code below>

I want to implement server-side rendering for my React application. Can you provide an example of how to do that using Next.js?

Assume the table names and generate an SQL code to find out Elon Musk’s tweets from 2019.

What exactly does this regex do? rege(x(es)?|xps?).

Write a docstring for the following function <paste function below>.

I’m making a website for a small business [Business description]. I need ideas on how to structure the website using WordPress.

Generate a list of 10 relevant skills and experiences for a web developer job application.

——— You can edit these messages and achieve improved outcomes based on your preferences. 💯

Enjoy our content? Advertise on this channel and reach a highly engaged audience! 👉🏻 It's easy with Telega.io. As the leading platform for native ads and integrations on Telegram, it provides user-friendly and efficient tools for quick and automated ad launches. ⚡️ Place your ad here in three simple steps: 1- Sign up 2- Top up the balance in a convenient way 3- Create your advertising post If your ad aligns with our content, we’ll gladly publish it. Start your promotion journey now!

دورة اختبار اختراق تطبيقات الويب https://www.youtube.com/watch?v=clLoyQeEVUw&list=PLroS9tRyoUGpAJPAgygxEP9imIZpkxFMi

✅ The Node.js Best Practices List (2024) - This comprehensive guide for Node developers is divided into 8 regularly updated sections. - It covers error handling, code style, Docker, and security practices. https://github.com/goldbergyoni/nodebestpractices

Learn About Operating Systems In-Depth ⚡️ - For many types of software engineers it is important to understand the fundamentals of operating systems. ——— 📌 Course Content 🔻 Academically Oriented & Comprehensive Understanding: Dive deep into the intricacies of Operating Systems with the most detailed course on this platform. 🔻 Conceptual Clarity: Solve numerous practice questions to ensure your concepts are crystal clear. 🔻 Enhanced Problem-Solving Skills: Learn to analyze and solve complex OS-related problems. 🔻 Appreciation for Depth: Explore a wide range of OS topics with meticulous attention to detail. https://youtu.be/yK1uBHPdp30

Mongez React Router, The Best Router System You'll ever use with React 🥷🏻 - لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍 This package is meant to make your code elegant, easy to maintain, and decouple your project into multiple apps and modules. ——— 📌 Highlighted Features: ✅ Declaring routes in a more readable and clean way. ✅ Common Base Layouts for multiple routes won't be rerendering for partials such as header and footer. ✅ Easy Middleware definitions ✅ Lazy loading for entire apps and modules to reduce production bundle size. ✅ Grouping routes with common features such as setting base path, and common middleware between routes. ✅ Language switching without reloading the page ✅ Optionally refresh the same page when navigating to it again. ✅ Many helpers to navigate between routes using functions. ✅ Working with functions for navigation instead of hooks. ✅ Optionally redirect to the Not Found page route or render a component. ✅ Defines a preloader (Progress Bar for instance) until the app/module bundle is loaded. ❌ No ugly writing for routes in components. ——— 🔻 Article Link: https://dev.to/hassanzohdy/mongez-react-router-the-best-router-system-youll-ever-use-with-react-1ln1 🔻 Mongez React Router (MRR): https://www.npmjs.com/package/@mongez/react-router 🔻 Tutorial Video: https://youtu.be/x9t8uz3qFlg

Data Structures Cheat Sheet 🔻 In this article, we will introduce data structures, provide examples of each structure, and show how they can be represented in Memgraph. https://memgraph.com/blog/data-structures-cheat-sheet

Data Structures Cheat Sheet 🔻 In this article, we will introduce data structures, provide examples of each structure, and show how they can be represented in Memgraph. https://memgraph.com/blog/data-structures-cheat-sheet