DevGuide

Docker Cheat Sheet https://docker.how

Next.js 16 RLS for Partial Prerendring 💯

Secure your streams. Use RLS and server-side tokens to keep partial prerenders correct and private in Next.js 16

8 خطوات لتحسين أداء الموقع 🚀 . . في عالم الفرونت إند، يعتبر أداء الموقع (Performance) من أهم الحاجات اللي لازم تركز عليها علشان تضمن تجربة مستخدم سلسة وسريعة وتضمن إن الـ SEO يكون كويس وترتيب الموقع معقول. 💯 . . تعال ندردش شوية عن أهم التقنيات اللي ممكن تستخدمها لتحسين أداء الموقع بطريقة سهلة وبسيطة 👇 ——— 1- الـ Selective Rendering ببساطة، مش لازم تعمل (Rendering) لكل حاجة مرة واحدة. استخدم تقنيات زي Virtual DOM أو Intersection Observer علشان تعمل rendering بس للعناصر اللي ظاهرة للمستخدم، وده هيقلل من استهلاك الموارد بشكل كبير. ——— 2- الـ Code Splitting بدل ما تدي للمستخدم ملف JavaScript ضخم، قسم الكود لمجموعة من الملفات الصغيرة باستخدام React.lazy أو Webpack Code Splitting. مثال: بدل ما يكون عندك ملف app.js حجمه 5MB، ممكن تقسّمه إلى: - home.js (1.5MB) - product.js (3MB) - about.js (0.5MB) كده الصفحة هتحمل أسرع وهيتم تحميل الجزء المطلوب بس لما المستخدم يحتاجه. ——— 3- الـ Prefetching لو عندك صفحات متوقع المستخدم هيزورها، استخدم الـ Prefetching علشان تحمل الملفات في الـ cache قبل ما يحتاجها. ده بيخلي الانتقال بين الصفحات أسرع بكتير. ——— 4- الـ Priority-Based Loading حدد الأولويات في تحميل الملفات، يعني الـ HTML والـ CSS يحملوا الأول علشان الصفحة تظهر بسرعة، وبعد كده تحمل الـ JavaScript والـ images حسب الأهمية. ——— 5- الـ Compression قبل ما تبعت أي حاجة للمتصفح، لازم تضغط الملفات باستخدام Gzip أو Brotli علشان تقلل حجمها وتحسن سرعة التحميل، وده بيخلي وقت التحميل (Load Time) أقل بكتير. ——— 6- الـ Loading Sequence رتب تحميل الملفات بطريقة صحيحة بحيث يتم تحميل العناصر المهمة اللي بتظهر في الـ "Above-the-fold" الأول زي HTML & CSS، وبعد كده الملفات اللي مش مهمة في البداية زي الـ scripts وغيرها. ——— 7- الـ Dynamic Imports بدل ما تحمل كل الكود في الأول، استخدم الـ Dynamic Imports لتحميل الملفات عند الحاجة فقط. مثلًا لما المستخدم يضغط على زرار معين تحمل ملفات معينة dynamically باستخدام import() function ——— 8- الـ Tree Shaking وأخيرًا، لازم تتأكد إن الـ bundle بتاعك مفيهوش أكواد غير مستخدمة. أدوات زي الـ Webpack والـ Rollup بتساعدك على إزالة الأكواد الزيادة وتحسين حجم الملفات اللي بتوصل للمستخدم. ——— 📌 ده مقال شرحت فيه كل الخطوات بالتفصيل وبطريقة سهلة https://dev.to/alisamir/frontend-performance-optimization-a-comprehensive-guide-2bfk

التطبيق العملي من أفضل الطرق اللي هتساعدك جدًا في مجال البرمجة. 💯 . . موقع DevProjects هتلاقي فيه مشاريع ممتازة تقدر تشتغل عليها بنفسك، وتتعلم خطوة بخطوة لحد ما توصل لمستوى احترافي.🚀 ——— 📌 أنواع المشاريع المتاحة على الموقع: - Web Development - Mobile App - Automation Or Tools - HTML/CSS - JavaScript - React - Vue - Angular - Node.js - Python - Ruby - Java - PHP - Swift - React Native ——— 📌 رابط الموقع: https://www.codementor.io/projects

What is Next.js Middleware?

Let’s explore how middleware can handle auth, redirects, A/B tests, and more—right at the edge.

خلي بالك الموضوع مش بعدد المشاريع... . . أهلًا بيك صديقي المبرمج، الكلام ممكن يبقى صعب شويتين لكن هو ده الواقع ودي الحقيقة اللي لازم تعرفها وتبقى فاهمها كويس... ——— خليني أمشي معاك في سيناريو ولنختار مجال الويب مثلًا (لكن الكلام عام على كل مجالات البرمجة)... تعلمت أساسيات الويب ووصلت عند إطار العمل وعملت 50 مشروع ورفعتهم على GitHub والدنيا بقت لذيذة... هات الـ 50 مشروع وتعال... - هل الـ 50 مشروع تقدر تبيعهم لعميل أو لشركة أو على الأقل ترفعهم على أي موقع لبيع المواقع؟ - هل الـ 50 مشروع اتعملوا بأفضل طريقة من حيث هيكل المشروع وتنظيم الملفات والـ Clean Code ولا الدنيا سايحة؟ - هل الـ 50 مشروع فاهمهم كويس وعارف كل حاجة فيهم ولا ناقلهم ورا الفيديوهات وخلاص؟ - هل الـ 50 مشروع مختلفين ولا كلهم نفس الفكرة؟ - هل لو بعت مشروع منهم لمبرمج تاني يقدر يكمل شغل في المشروع بدون صعوبة ولا هيضطر يقرفك كل شوية؟ ——— لو الإجابة نعم متكملش البوست... أنت كده في السليم 💯 لو لا، خليني أوضحلك شوية حاجات تاخد بالك منها في المشاريع... حاول تعمل مشاريع حقيقية لها علاقة بسوق العمل... في البداية هتعمل مشاريع صغيرة زي Weather App وكمان مشروع آلة حاسبة، وغيرهم وده طبيعي جدًا لكن التاسكات دي متنفعش تبقى في الـ CV بتاعك وأنت بتقدم... خليها على GitHub وأنت في الطبيعي بتضيف لينك GitHub في الـ CV لو حد مهتم يشوفهم هيشوفهم وفي الغالب محدش بيركز عليهم وبيدور على المشاريع الكبيرة اللي فيها شغل لوجيك كتير مش مجرد UI وخلاص... وده بيختلف من شركة للتانية حسب طبيعة الشركة فخلي بالك من النقطة دي. ——— بالنسبة لطريقة عمل المشروع وتنفيذه بأفضل طريقة... في البداية هتكون بتكتب أي حاجة وخلاص وده طبيعي لكن مينفعش تبقى بتقدم على شغل خبرة سنة مثلًا وأنت الكود بتاعك معجنة في بعضه... علشان كده يفضل تهتم بالموضوع ده من بداية التعلم وتبحث وتدور إزاي تكتب وتنظم المشروع بتاعك بأفضل طريقة حتى لو شغال HTML, CSS, JS فقط... ——— نيجي لفهم المشاريع... فيه بعض الشركات أثناء الإنترفيو بتفتح GitHub بتاعك وتجيب مشروع معين وليكن E-Commerce ويبدأ الشخص تبع الشركة يسألك عن إزاي عملت دي وليه فصلت دي عن التانية وهكذا... فلو أنت مش فاهم أو لقاك بتهبد يبقى أنت كده بالسلامة وهيعرف إنك بصمجي... طيب تعمل إيه وأنت بتطبق مع الفيديو؟ = عندك أكتر من أداة تقدر تسألها إذا الكود ده معمول بأفضل طريقة ولا ممكن يتعمل بطريقة أفضل من كده وأقل تعقيدًا زي ChatGPT وغيره وكمان حاول تغير بعض الحاجات في المشروع اللي في الفيديو (زود حاجة - أو حسّن حاجة موجودة وهكذا) ——— طيب هل المشاريع كلها شبه بعضها ولا مختلفة؟ يعني متبقاش عامل 20 Landing Page ومعتبر كل واحدة منهم على إنها مشروع مستقل وهي أصلًا صفحة أو اتنين... حاول تخلي المشاريع مختلفة عن بعضها وقريبة من المشاريع الموجودة في الشركات زي E-Commerce و Real Estate مثلًا وحاول تخلي المشاريع أغلبها لوجيك مش UI لأنك في الغالب هتستخدم مكتبات UI جاهزة هتسهل عليك الدنيا كتير... ولو عاوز أفكار مشاريع اسأل الـ AI... ——— بعد ما تخلص المشروع اقفل الجهاز وارجع بعد كام ساعة وحاول تفهم الكود اللي أنت كاتبه... لو مكتوب بطريقة كويسة هتفهمه بسهولة... ودي حاجة أساسية في البرمجة لأنك هتشتغل في تيم في الشركة وأكتر من واحد هيعدل على الكود فلازم تبقى منظم الكود بتاعك سواء من خلال كتابة التعليقات أو من خلال الـ Documentation... ——— طبعًا الكلام اللي فوق ده ينطبق على كل مجالات البرمجة مش الويب فقط... ——— بالتوفيق يا صديقي 🌿

مسار مسك المهارات 💯 . . مسار مسك المهارات هو مسار شامل يضم مجموعة متنوعة من الدورات التي تهدف إلى مساعدة طلاب الجامعة والخريجين والمحترفين ذوي الخبرة القصيرة على تطوير أنفسهم وتحسين مهاراتهم على المستوى المهني والشخصي. ⚡️ يشمل هذا المسار دورات تغطي مختلف الجوانب المهنية والشخصية التي تساعد الشباب على بناء مسار مهني ناجح وتحقيق التميز في سوق العمل من خلال تعزيز فرص النجاح في مجال عملهم وتطوير مهاراتهم لتحقيق النجاح المستقبلي. ✅ ——— 📌 الدورات المشمولة في التخصص: - فهم سوق العمل - التخطيط لبناء مسار مهني - البحث واكتشاف الفرص - دورة الاستعداد للمقابلة الشخصية - دورة استخدام لينكد إن للوصول للفرص المهنية - مهارات الاستعداد الجامعي - دورة بناء السيرة الذاتية ——— https://www.edraak.org/programs/specialization/miskskill-v1

مفهوم الـ MERN Stack 💡 . . الـMERN اختصار لـ - MongoDB - Express.js - React.js - Node.js خلينا نتعمق شوية... https://www.linkedin.com/posts/dev-alisamir_aliabrsamir-fullstackwebdeveloper-fullstackdevelopment-activity-7030517717812031488-J2On ——— وهتلاقي هنا مصادرة كويسة هتساعدك في مذاكرة الـ MERN Stack https://www.youtube.com/@The_Dev_Guide

Helpful regex visualization tool, especially to debug while building.

https://regex-vis.com

السلام عليكم ورحمة الله وبركاته 👋🏻 . . لو ناوي تبدأ في مجال الفرونت إند أو بدأت والدنيا مش أفضل حاجة معاك فإن شاء الله البوست هيفيدك. 💯 جمعتلك أفضل المصادر اللي هتساعدك في رحلة التعلم وكمان هضيفلك بعض المواضيع اللي محتاج تركز عليها سواء في مجال الفرونت إند أو في مجال الويب بشكل عام علشان تبقى محترف بإذن الله تعالى. 🚀 ——— 📌 رابط الجزء الأول: https://www.linkedin.com/posts/dev-alisamir_devguide-frontenddeveloper-frontenddevelopment-activity-7174767846806216704-seF5 ——— 📌 رابط الجزء الثاني: https://www.linkedin.com/posts/dev-alisamir_devguide-frontenddeveloper-frontenddevelopment-activity-7175782913542635523-on8f ——— 📌 رابط الجزء الثالث: https://www.linkedin.com/posts/dev-alisamir_devguide-frontenddeveloper-frontenddevelopment-activity-7176532222290661376-5_gu ——— 📌 رابط الجزء الرابع: https://www.linkedin.com/posts/dev-alisamir_devguide-frontenddeveloper-frontenddevelopment-activity-7177015197805518849-7ax2 ——— بالتوفيق يا صديقي. 🌿

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

Power BI Roadmap

https://www.notion.com/templates/power-bi-roadmap

Python Roadmap

https://www.notion.com/templates/python-roadmap

AI Engineering Roadmap

https://www.notion.com/templates/aiengineering-roadmap

Data Analyst Roadmap

https://www.notion.com/templates/data-analyst-roadmap

Data Engineering Roadmap

https://www.notion.com/templates/data-engineering-roadmap-125

Data Scientist Roadmap

https://www.notion.com/templates/data-scientist-roadmap-648

SQL Data Warehouse Project

https://www.notion.com/templates/sql-data-warehouse-project

Skills are reusable capabilities for AI agents.

Install them with a single command to enhance your agents with access to procedural knowledge. https://skills.sh

مصادر مهمة لانترڤيو الـ Problem Solving 💯 . . 📌 This repository contains LeetCode articles which are very useful during the interview preparation. https://github.com/ashishps1/awesome-leetcode-resources 📌 A curated list of awesome Leetcode problems, algorithms, and data structures. https://github.com/kiranpalsingh1806/awesome-leetcode

Mastering SSR Hydration in Next.js 💯 Optimize server-side rendering (SSR) and client-side hydration in Next.js for seamless interactivity.

كـنـز الـ GitHub 💎 . . لو مهتم بتطوير مهاراتك كمهندس برمجيات، لازم تبقى عارف إن GitHub مليان كنوز هتساعدك بشكل كبير خلال رحلتك... في البوست ده هشارك معاك مجموعة Repositories لازم تبقى عندك في الـ bookmarks، هتلاقي فيها أدوات، شروحات، وأكواد مفتوحة المصدر وأسئلة انترفيو هتسهّل عليك مشوارك في البرمجة. 💯 ——— GitHub Repositories Every Software Engineer Should Know 💯 📍 developer-roadmap https://github.com/kamranahmedse/developer-roadmap 📍 awesome-roadmaps https://github.com/liuchong/awesome-roadmaps 📍 free-programming-books https://github.com/EbookFoundation/free-programming-books 📍 engineering-blogs https://github.com/kilimchoi/engineering-blogs 📍 Best-websites-a-programmer-should-visit https://github.com/sdmg15/Best-websites-a-programmer-should-visit 📍 freeCodeCamp https://github.com/freeCodeCamp/freeCodeCamp 📍 The Algorithms https://github.com/TheAlgorithms 📍 Data-Structure-Algorithms-LLD-HLD https://github.com/arpit20adlakha/Data-Structure-Algorithms-LLD-HLD 📍 awesome-algorithms https://github.com/tayllan/awesome-algorithms 📍 design-patterns-for-humans https://github.com/kamranahmedse/design-patterns-for-humans 📍 awesome-design-patterns https://github.com/DovAmir/awesome-design-patterns 📍 system-design-101 https://github.com/ByteByteGoHq/system-design-101 📍 system-design-primer https://github.com/donnemartin/system-design-primer 📍 system-design-resources https://github.com/InterviewReady/system-design-resources 📍 system-design https://github.com/karanpratapsingh/system-design 📍 Awesome-Design-Tools https://github.com/goabstract/Awesome-Design-Tools 📍 design-resources-for-developers https://github.com/bradtraversy/design-resources-for-developers 📍 app-ideas https://github.com/florinpop17/app-ideas 📍 project-based-learning https://github.com/practical-tutorials/project-based-learning 📍 public-apis https://github.com/public-apis/public-apis 📍 interviews https://github.com/kdn251/interviews 📍 tech-interview-handbook https://github.com/yangshun/tech-interview-handbook 📍 awesome-interview-questions https://github.com/DopplerHQ/awesome-interview-questions 📍 Coding Interview University https://github.com/jwasham/coding-interview-university 📍 free-for-dev https://github.com/ripienaar/free-for-dev 📍 build-your-own-x https://github.com/codecrafters-io/build-your-own-x 📍 realworld https://github.com/gothinkster/realworld ——— لو عندك Repos مميزة بتستخدمها ممكن تشاركها معنا في التعليقات وتفيد غيرك 💡

Stop your React components from re-rendering unnecessarily! Learn how to optimize Context with selectors and memoization to keep your apps lightning fast.

الفرق بين الـ Microservices والـ Monolith 💯 . . لما بنيجي نشتغل على مشروع كبير، بنلاقي دايمًا إن اختيار الـ architecture بتاع المشروع من أهم الحاجات اللي ممكن تأثر على نجاح المشروع. فيه نوعين رئيسيين بنسمع عنهم كتير في مجال السوفتوير: الـ Monolith والـ Microservices. طيب، إيه الفرق بين الاتنين وإمتى نختار كل واحد فيهم؟ ———

1. الـ Monolith Architecture

ده الـ approach الكلاسيكي اللي بنلاقيه في المشاريع القديمة أو المشاريع الصغيرة. ببساطة، الـ Monolith عبارة عن application واحد كبير متكامل. كل حاجة فيه متشابكة ومربوطة ببعض: الـ frontend، الـ backend، الـ database، وكل الـ business logic. لما تيجي تضيف feature جديدة أو تعدل على حاجة، بتضطر تشتغل على الكود كله. ——— ✅ المميزات - سهولة التطوير في البداية: لو المشروع لسه صغير، بيكون سهل إنك تشتغل على كل حاجة في مكان واحد. - أبسط في الـ deployment: بتعمل build و deploy مرة واحدة للتطبيق كله. - أقل تعقيد: الكود كله موجود في مكان واحد، فلو التيم صغير أو المشروع بسيط، الـ Monolith هيكون حل عملي. ——— ❌ العيوب: - المشروع مش scalable بسهولة: كل ما المشروع يكبر، هتلاقي إن تعديل جزء بسيط ممكن يأثر على أجزاء تانية في النظام. - صعوبة الصيانة: الكود بيبقى ضخم ومعقد، وممكن يبقى صعب جدًا تضيف features جديدة أو تصلح bugs. - التعامل مع الترافيك العالي: لو فيه جزء معين من التطبيق هو اللي بيستهلك موارد كتير، مش هتقدر تخصص له موارد أكتر بسهولة. ———

2. الـ Microservices Architecture

في الـ Microservices، المشروع بيتقسم لمجموعة من الـ services الصغيرة، وكل service بتبقى مسؤولة عن جزء معين من الـ business logic. الـ services دي بتتواصل مع بعض عن طريق APIs (زي REST أو GraphQL)، وكل واحدة منها ممكن تبقى مكتوبة بلغة برمجة مختلفة أو حتى تستخدم قاعدة بيانات مختلفة. ——— ✅ المميزات: - الـ Scalability عالي جدًا: ممكن تعمل scaling لكل service بشكل منفصل. يعني لو عندك service بتتعامل مع الـ orders في e-commerce site والترافيك عليها عالي، ممكن تعمل لها scaling من غير ما تضطر تعمل scaling للتطبيق كله. - مرونة في التطوير: كل service بتشتغل بشكل مستقل، فالتيم ممكن يشتغل على أكتر من feature في نفس الوقت بدون ما يحصل تعارض. - سهولة الصيانة: لو فيه bug في service معينة، بتقدر تعدل عليها أو حتى تعملها إعادة تشغيل من غير ما تأثر على الـ services التانية. ——— ❌ العيوب: - تعقيد في الـ deployment والـ management: إدارة وتنسيق كل الـ services بيحتاج أدوات وعمليات إضافية زي الـ orchestration tools (زي Kubernetes). - صعوبة في الـ debugging: بما إن كل service مستقلة، الـ logging والـ monitoring بيبقوا معقدين شوية. - التواصل بين الـ services: الـ inter-service communication ممكن يضيف latency ومشاكل لو مش معمول بشكل صحيح. ———

إمتى تختار كل واحد؟

لو المشروع بتاعك لسه صغير أو الـ requirements بتاعته مش معقدة، فالـ Monolith ممكن يبقى اختيار منطقي وسهل. هيوفرلك وقت ومجهود في الـ setup والـ deployment. لكن لو المشروع كبير أو بيكبر بسرعة، والـ team عندك عايز يشتغل بكفاءة أكتر على features كتير في نفس الوقت، فالـ Microservices هتكون الأنسب. ——— الخلاصة إن كل approach له مميزاته وعيوبه، والاختيار ما بينهم بيعتمد بشكل كبير على حجم المشروع واحتياجاته. الـ Monolith مناسب للمشاريع الصغيرة أو اللي مش متوقعة نمو كبير في القريب العاجل. أما الـ Microservices فهي الأفضل للمشاريع الكبيرة اللي بتحتاج scalability ومرونة أعلى، بس لازم تكون مستعد للتعامل مع التعقيد الإضافي في الإدارة والـ deployment.

The Ultimate DevOps Developer Roadmap 🔻

Programming Languages

Pick and master one or two programming languages. Choose from options like Python, JavaScript, Go, Ruby, etc.

Operating Systems

Master the ins and outs of major operating systems like Linux, Windows, Mac, and so on.

Source Control Management

Learn about source control management tools such as Git, GitHub, GitLab, and Bitbucket.

Networking

Master the basics of networking concepts such as DNS, IP, TCP, and SSH.

CI/CD

Pick tools like GitHub Actions, Jenkins, or CircleCI to learn about continuous integration and continuous delivery.

Scripting and Terminals

Learn scripting in bash, and PowerShell along with knowledge of various terminals and editors.

Hosting and Platforms

Master multiple hosting platforms such as AWS, Azure, GCP, Docker, Kubernetes, Digital Ocean, Lambda, Azure Functions, etc.

Infrastructure as Code

Learn infrastructure as code tools like Terraform, Pulumi, Ansible, Chef, Puppet, Kubernetes, etc.

Monitoring and Logging

Master the key tools for monitoring and logging for infrastructure and applications such as Prometheus, Elasticsearch, Logstash, Kibana, etc.

Basics of Software Development

Learn the basics of software development such as system availability, data management, design patterns, and team collaboration.

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