VOL46: Introduction to Tailwind - Building Modern User Interfaces
أهلًا وسهلا بكم في العدد السادس والأربعين من النشرة الأسبوعية لاقرأ-تِك 🚀
لا تنسوا أهلنا من صالح الدعاء,اللهم إنّا استودعناك اياهم، اللهم كُن عوناً لهم، اللهم انصرهم واحفظهم. 🇵🇸
أهلًا وسهلا بكم في العدد السادس والأربعين من النشرة الأسبوعية لاقرأ-تِك 🚀
سواء كنت مهندس برمجيات مبتدئ أو محترف، فنشرتنا هدفها انها تثري المحتوى التقني العربي سعيا للتطوير من جودة المحتوى باللغة العربية، من خلال تقديم أحدث المستجدات والتطورات في عالم البرمجيات، بالإضافة إلى أفضل الممارسات والنصائح القيمة، ونشر أحدث المقالات وترشيحات الكتب ومحتوى ورقة وقلم اللي بينزلوا بشكل مستمر في موقع اقرأ-تِك.
في الإصدار ده الفهرس هيكون كالآتي:
Interprocess Communication - Shared Memory
Introduction to Tailwind: Building Modern User Interfaces
N+1 Problem Explanation
فرصة تكسب 6,000 جنيه من خلال CodeQuests
Introduction to Microservices
Interprocess Communication - Shared Memory
في المقال ده هنتناول كيفية تحقيق تواصل فعال بين الـ Concurrent Tasks ، وازاي نختار النوع المناسب لتطبيقاتنا، وكمان هنتعرف على نمط شائع في بناء الـ Concurrent Applications ألا وهو الـ Thread Pool.
زي ما ذكرنا في الـ Building Blocks احنا دايمًا مش بايدينا إننا نضمن إن الـ Concurrent Tasks تكون Independent عن بعضها ولكن احنا بنسعى لده ، وغالبًا ما هيكون فيه جزء في التطبيق بيعتمد على نتيجة Task تانية عشان يسلموا بعض فغالبًا التواصل بين المهام دي هيكون مهم وضروري في تنفيذ التطبيق بتاعنا.
اتكلمنا في بداية السلسلة عن الـ Building Blocks في أي Concurrent Application وهم الـ Process والـ Thread نقدر نشوفهم من هنا الأول:
أنواع التواصل
التواصل بين الـ Tasks أو المهام في أي Concurrent Program هو جوهر الموضوع لإنه لو متمش بشكل سليم فالمكاسب الناتجة من الموضوع هتكون عديمة الفايدة ، والـ OS بيوفر آليات بتسمح للـ Process والـ Threads من إنها تتواصل وتنسق بينها وبين بعض والآليات دي هي اللي بتعرف بالـ Interprocess Communication أو الـ IPC.
وفيه أكتر من نوع للـ Interprocess Communication وأكتر أنواع الـ IPC شيوعًا هم طريقتين ألا وهم الـ
الـ Shared Memory
الـ Message Passing
التواصل من خلال الـ Shared Memory
أبسط طريقة للتواصل بين المهام هي استخدام الـ Shared Memory ، وده لإنها بتسمح للمهام بإنهم يتواصلوا من بعض ويتشاركوا المعلومات من خلال الـ Virtual Address Space ويكأنهم بيقرأوا ويكتبوا في Local Variables موجودة في الـ Address Space.
فبالشكل ده أي تغييرات بتعملها Process أو Thread بتنعكس بشكل فوري على التانيين بدون تدخل الـ Operating System.
مثال من الواقع
تخيل أنك عايش في نفس البيت مع مجموعة من أصدقائك ، وفيه تلاجة واحدة بتستعملوها كلكوا ، فأنت ممكن في أي وقت تجيب منها اللي انت عاوزه وليكن تاخد شوكولاتة من علبة الشوكولاتة وتعرف أصدقائك إنهم ممكن ياخدوا شوكولاتة من العلبة كذلك.
فالتلاجة هنا كانت هي بمثابة الـ Shared Memory وانت وأصدقائك بمثابة المهام الي محتاجة تتواصل مع بعضها من خلال تخزين الـ Shared Data اللي هي في الحالة دي الشوكولاتة.
Introduction to Tailwind: Building Modern User Interfaces
Tailwind CSS هو إطار عمل CSS مفتوح المصدر CSS Open-source Framework بنستخدمه في تصميم ال Frontend للمواقع بسرعة وسهولة, لكنه بيتميز علي بقية ال Frameworks اللي بتقدملك pre-defined classes جاهزة للاستخدام, بأنه يتيح ما يسمى ب ال Utility class واللي تقدر تستخدمها عشان تعمل Styling لكل عنصر عن طريق Mix and Match.
مميزات Tailwind CSS
1. يستخدم طريقة Utility-First
بيوفر العديد من الأدوات (utilities) الجاهزة مثل text-center، bg-blue-500، p-4، والتي يمكن استخدامها مباشرة في HTML لكتابة التنسيقات.
2. مرونة عالية ودعم عالي للتخصيص (Customization)
على عكس الأطر التقليدية مثل Bootstrap، لا يأتي Tailwind بتصاميم جاهزة مثل الأزرار أو الكروت، بل يسمح لك ببناء تصاميمك الخاصة.ودي تعتبر من أهم مميزات Tailwind يوفر ملف إعدادات (Configuration File) يمكنك من خلاله تعديل الألوان، والخطوط، والمسافات، والمزيد ليناسب احتياجات مشروعك.
3. يدعم ال (Responsiveness) بسهولة
بيقدم نظام قوي لجعل المواقع Responsive مع أحجام الشاشات المختلفة مثال:<div class="sm:text-sm md:text-md lg:text-lg"></div>
6. تكامل مع الأدوات الحديثة
يتكامل مع أدوات مثل PostCSS وPurgeCSS لتقليل حجم الكود في ال Production.
عيوب Tailwind
زيادة حجم الـ HTML:
بما إننا بنستخدم Classes كثيرة للتنسيق داخل كود ال HTML دا ممكن يكبر حجمه ويجعله أصعب في القراءة ودا يعتبر أكبر عيب في استخدام هذا الإطار.
اعتمادية كبيرة على الأداة:
في حال الانتقال إلى مشروع آخر بدون Tailwind، قد تحتاج إلى إعادة كتابة التنسيقات يدويًا.
متى استخدمه؟
في المشاريع البسيطة Bootstrap بالتأكيد هيكون الخيار الأفضل لبساطته عن Tailwind, لكن مع المشاريع الكبيرة والتي تحتاج لقدر كبير من ال Customisation ف Tailwind هيكون خيار جيد جدًا وكمان هيتيح ملفات CSS أصغر بعد ضغطها مقارنة ب Bootstrap.
N+1 Problem Explanation
الـ N+1 Problem هي مشكلة في طريقة تعاملنا مع قواعد البيانات ، ومن المشاكل اللي لازم احنا كمطورين ناخد بالنا منها لانها ليها ضريبة كبيرة أوي خصوصا في التعامل مع البيانات الكبيرة.
فورقة وقلم وتعالوا نتعرف على المشكلة دي وازاي نقدر نتجنبها
N+1 Problem
الـ N+1 Problem هي مشكلة بتخلينا نعمل عدد Requests أكبر بكتير من اللي محتاجينه وعشان نكون محددين فبالتحديد N+1 Requests على الرغم اننا ممكن نحل نفس المشكلة بعدد Requests أقل.
وطبعًا الـ Requests الكثيرة اللي ملهاش لزمة بتشغل الـ Database وبالتالي الموقع أو التطبيق بتاعنا بيكون أبطأ و بيدينا Performance سيء.
وعشان نفهم كويس خلينا ناخد مثال, أنت بتبرمج موقع لمكتبة وعاوز بيانات الكتب الأكثر مبيعًا وكمان بيانات عن المؤلفين للكتب دي عشان تعرضها في صفحة مخصصة.
بيانات الكتب الأكثر مبيعًا في Books Table
وبيانات المؤلفين في Authors Table
فأول حل هيجي في بالنا:
نكتب Query نجيب بيه List of Books من Books Table
Select * from books;
sql
لكل كتاب في قائمة الكتب هنعمل Request علي ال
Authors Table
عشان نجيب معلومات مؤلف الكتاب.
Select * from authors where authorID = <>;
sql
هنا إحنا روحنا للـ Database مرة عشان قائمة الكتب و عدد N من المرات - بعدد الكتب - عشان نجيب معلومات مؤلف كل كتاب.
دا هيخلي تحميل الصفحة بتاعت الكتب الأكثر مبيعًا على موقعك بطيئة جدًا بينما ممكن نحسّن من ال Performance بتاعنا بإننا نطلب البيانات من قاعدة البيانات في عدد أقل من ال Requests ودا بإننا نعمل اعادة هيكلة للـ Queries بتاعتنا.
خصم يصل إلى 40% على جميع خطط الاشتراك السنوية لفترة محدودة، تقدروا دلوقتي تشتركوا في اقرأ-تِك وتستمتعوا بكافة المقالات في كل ما يخص هندسة البرمجيات باللغة العربية والمحتوى المميز من ورقة وقلم ومدونات فطين اللي بيتميزوا بتصاميم ذات جودة عالية وكل ده بحرية كاملة وكمان مفاجآت اقرأ-تِك الجاية 🚀
وبرضو متاح الاشتراك من خلال InstaPay و VodafoneCash 🎁
بفضل الله أصبح متاح حاليا دعمنا من خلال الرعاة والشراكات وفعلنا الـ Sponsorship واحنا بنرحب بجميع الشراكات مع المؤسسات والشركات وأصحاب الأعمال لبناء مجتمع عربي يشجع على القراءة والتعلم ومشاركة التجارب والخبرات العملية في هندسة البرمجيات.
دورك كشريك أو راعي هيكون محوري في دعم المحتوى وتوسيع نطاق تأثيره. فانضم لرحلتنا وكن جزءًا من صناعة مستقبل التكنولوجيا في المنطقة 🚀
تقدروا تشوفوا التفاصيل كاملة من هنا والـ Analytics بتاعتنا من خلال اقرأ-تِك والنشرة الأسبوعية 👇
فرصة تكسب 6,000 جنيه من خلال CodeQuests
دلوقتي عندك فرصة تبهرنا بأفكارك 💡 وتدخل عالم الـ AI حتى لو مش AI Engineer! كل اللي محتاجه إنك تتعلم Flowise AI وتبني Agents تناسب ثقافتنا واحتياجاتنا 💬.
أمثلة بسيطة:
لخدمة القرآن الكريم أو الحديث الشريف.
مساعدة الأمهات في التعليم وتلخيص شغل جروب الماميز.
تسهيل تجهيزات الجواز: "عفشك منين؟ جهازك منين؟".
صيانة السيارات بأسلوب عملي وسريع.
التخطيط المالي وتقييم القرارات بطريقة ذكية.
ودي مجرد أمثلة! تقدر تبدع أكتر في حاجات تساعد ناس تانية في Industries مختلفة.
الجوائز المميزة 💰
جايزة لأحسن Agent من وجهة نظر لجنة الحكام. 🏆
جايزة لأكتر شخص هيبعت Agents عدّت شروط التقييم. 🎯
جايزة لأكتر Agent خد Votes من الكوميونتي بتاعتنا. ❤️
هتشتغل على تاسكات مميزة 💻، تنافس ناس زيك 🤝، تبني خبرة قوية 📚، وتضيف إنجازات لمحفظتك 💼.
متفوتش الفرصة دي! سجل دلوقتي🚀
Introduction to Microservices
ال Microservices عبارة عن أسلوب حديث في بناء ال software applications، بيعتمد على تقسيم ال application لعدد من الخدمات الصغيرة والمستقلة. كل خدمة (service) بتشتغل بشكل منفصل، وبتتعامل وتتواصل مع باقي الخدمات باستخدام أساليب مختلفة. الفكرة الرئيسية إنها بتقدّم حلول مرنة وسهلة لتطوير التطبيقات الكبيرة.
What are Microservices
ال microservices عبارة عن Architecture (طريقة تصميم) بيخلّي ال application مكوّن من خدمات صغيرة، وكل خدمة ليها وظيفة محددة وممكن يتم تطويرها أو تتغير لوحدها من غير ما تأثر على باقي ال services التانية.
أهم مميزاتها:
الاستقلالية: كل خدمة منفصلة في التطوير والنشر عن باقي الخدمات.
المرونة: لو حصل عطل او مشكلة في service معينة مش بيأثر ع الباقي ولا بيعطلهم.
الحرية التقنية: العزل ده يخليك تقدر تختار لغات البرمجة وأدوات مختلفة لكل service.
Why use Microservices Instead of Monolith
ال monolith application هي إن كل ال application بيكون كود واحد كبير. ده بيبقى سهل في الأول، لكن لما التطبيق يكبر، بيبقى صعب التوسع (Scalability) والتطوير والصيانة (Maintainability). هناظهرت ال Microservices كحل، وده ليه فوائد كتير، منها:
الإصدار الأول - ورقة وقلم 🚀
في الإصدار ده جمعنا أكتر من 50 موضوع في مختلف مجالات هندسة البرمجيات بأكتر من 170 صفحة + تصاميم بجودة عالية وكل ده بالعربي وبشكل مميز ومتقسم لفصول سهل تنتقلوا من فصل وموضع للتاني بدون مشاكل 💎
تقدروا تشوفوا النسخة كاملة من هنا كـ E-Book ، وحاولنا نخليها بسعر رمزي يناسب الجميع 👇
ولو عندكوا أي مشكلة في الدفع ، تقدروا تتواصلوا معانا وهنكون مبسوطين باننا نوفر بدايل زي InstaPay و VodafoneCash 🎁
ولو عاوزين تعاينوا جودة الـ E-Book قبل ما تشتروه ، تقدروا تحملوا النسخة المجانية واللي بتضم حوالي 30 موضوع فيما لايزيد عن 100 صفحة من هنا 😉
رؤيتنا هي إثراء المحتوى التقني العربي وجعل التعلم من خلال القراءة أمتع، وذلك من خلال إثراء المحتوى التقني باللغة العربية وتشجيع المبرمجين على القراءة بلغتهم الأم والتفكير أيضًا بها.
لذلك اتحنا الفرصة أمام الجميع للمساهمة ومساعدتنا في نشر واثراء المحتوى التقني باللغة العربية, من خلال كتابة المقالات التقنية في مختلف مجالات هندسة البرمجيات.
وجب التنويه أنه لن يتم نشر كافة الأعمال التي تصل إلينا، وإنما سيتم الانتقاء منها ما يحقق هدفنا بإثراء المحتوى التقني العربي، ولذلك قد تُطلب بعض التعديلات من الكاتب قبل النشر.
لمعرفة المزيد بخصوص :
💬 المعايير العامة لكتابة ونشر المقالات
⚡️ كيفية الإرسال
🔥 التزامات اقرأ-تِك تجاه الكتاب
يمكنكم قراءة كافة التفاصيل من هنا 👇