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

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

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

✅ 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

دورة اختبار اختراق تطبيقات الويب

https://www.youtube.com/watch?v=clLoyQeEVUw&list=PLroS9tRyoUGpAJPAgygxEP9imIZpkxFMi

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. 💯

طريق النجاح في مجال الفرونت اند - محمد أبو سريع

https://youtu.be/0UGkikHf1Yw

تركاية 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

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

https://calendar-js.com

لو مهتم بتطوير تطبيقات الويب بطريقة أفضل 💯

- لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍

https://www.linkedin.com/posts/dev-alisamir_javascript-react-nextjs-activity-7237809089198608385-NG4a

———

بالتوفيق يا بطل 💪🏻

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

تركاية فرونت اند ع السريع...⚡️

- لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍


لو زهقت من أشكال الـ 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، مهم جدًا تركز على كتابة كود نظيف (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

———
بالتوفيق يا بطل 💪🏻

معظم الشركات حاليًا معتمدة على GitLab في إدارة المشاريع الخاصة بها، فالأفضل إنك تتعلم GitLab بالإضافة إلى تعلم Git & GitHub 🔻

لو متعرفش يعني إيه Git خليني أقولك ببساطة كده، Git هو نظام إدارة إصدارات (Version Control System) بيساعدك تتحكم في كل التغييرات اللي بتحصل في الكود بتاعك. يعني لو عملت تعديل غلط، ممكن بكل سهولة ترجع لنسخة قديمة من الكود وتصلح اللي حصل.

———

أما GitHub فهو منصة بترفع عليها الكود بتاعك اللي مستخدم فيه Git عشان تقدر تخزنه أونلاين، وتشتغل عليه مع باقي التيم وكمان توصله من أي جهاز بنفس الأكونت بتاعك.

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

———

ميزة إدارة الإصدارات (Version Control) بقى إنها بتخليك تتابع كل نسخة بتعدلها في الكود، وتقدر تعمل branches يعني نسخ مختلفة من الكود لكل خاصية جديدة بتشتغل عليها، وبعد ما تخلص بتدمجها مع النسخة الأساسية من المشروع.

بالنسبة لـ GitLab فهو منصة زي GitHub من حيث الوظيفة والاستخدام. ولكن هتلاقي شكلها مختلف شوية.

———

بالتوفيق يا بطل 💪🏻

الـ 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 بتخلي عملية التواصل بين التطبيقات والسيرفر سهلة ومرنة جدًا، وبتسهل على المبرمجين إنهم يبنوا مشاريع كبيرة بشكل منظم وسهل في التعديل. 🔥

تركاية فرونت اند ع السريع...⚡️

- لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍


إزاي تتحكم في أول حرف أو أول سطر في أي فقرة داخل الموقع وتعمل ليهم ستايل مختلف عن باقي الفقرة 💯

CSS Newspaper Subheadings

———

⚡️ Tutorial Video: https://youtu.be/eSebCtQgnx0

⚡️ LinkedIn Post: https://www.linkedin.com/posts/dev-alisamir_css-css3-cssstyling-activity-7238785437761212416-V3OP

خلينا نتكلم عن حاجة مهمة جدًا في في مجال السوفتوير وهي 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 زيها زي أي تكنولوجي ليها مميزات وليها عيوب، لكن خلينا نذكر العيوب في جزء تاني منفصل. 💯

بالرغم من إن 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)

الـ GraphQL جديدة نسبيًا مقارنة بـ REST، فلو أنت أو التيم بتاعك متعودين على REST، التحول لـ GraphQL ممكن ياخد شوية وقت عشان تفهموا إزاي تشتغلوا بيها بشكل فعّال.

كمان الـ tooling بتاع GraphQL لسه مش بنفس درجة النضج اللي موجودة مع REST.

———

6. عدم التوافق مع الـCaching التقليدي

في REST، تقدر بسهولة تستخدم الـ HTTP Caching لأن الـ endpoints ثابتة، لكن في GraphQL، الـ queries ممكن تبقى مخصصة جدًا، وده بيصعب عملية الـ caching.

عشان كده، هتحتاج تستخدم حلول مختلفة زي Apollo Client اللي بيوفر caching مناسب لـ GraphQL، بس ده بيزود التعقيد.

———

في النهاية، GraphQL قوية ومرنة جدًا، لكن زي أي أداة، ليها مميزاتها وعيوبها. محتاج تقرر لو العيوب دي هتأثر على مشروعك ولا لأ، بناءً على متطلبات التطبيق والـ team اللي شغال معاك.

———

بالتوفيق يا بطل 💪🏻