00:00:00بالنسبة لبعض المشاريع الجديدة التي أعمل عليها، بل لمعظم مشاريعي الجديدة الحالية،
00:00:05لقد توقفت بالفعل عن استخدام Tailwind. لم أعد أعتمد عليه في تلك المشاريع،
00:00:11وبالتالي لم أعد أستخدم Shadcn أيضًا. وهناك سبب لذلك، وليس لأن Tailwind سيئ،
00:00:18بالطبع لا، بل على العكس تمامًا؛ فهي مكتبة رائعة، وأريد أن أكون واضحًا جدًا بشأن ذلك.
00:00:22أشعر بنوع من الذنب لإنتاج هذا الفيديو أو هذه الحلقة لأنني،
00:00:27منذ بضعة أسابيع فقط، تحدثت عن المشاكل المالية الكبيرة التي كانت تواجه Tailwind آنذاك.
00:00:32منذ ذلك الحين، ولحسن الحظ، تحسنت الأمور كثيرًا وانضم العديد من الرعاة الجدد. وأعتقد الآن
00:00:38أنهم في وضع مالي أفضل بكثير. وبطبيعة الحال، Tailwind أداة مذهلة.
00:00:43وهناك أشخاص يعملون بشغف وطاقة كبيرة على هذا المشروع. وما أقصده ليس
00:00:49أنه سيئ، ولا أحاول إقناع أي شخص بعدم استخدامه. أنا فقط أستخدم هذه القناة
00:00:56لمشاركة أفكاري وآرائي وبعض الأفكار حول طريقة عملي، وظننت أن هذا قد يكون ممتعًا.
00:01:01إذًا، لماذا لا أستخدم Tailwind إذا كنت أراه رائعًا؟ حسنًا، علي أن أعود خطوة للوراء.
00:01:07قبل بضع سنوات، قبل ثورة الذكاء الاصطناعي، أو قبل أن يصبح الذكاء الاصطناعي بارعًا في البرمجة،
00:01:15كنت أستخدم Tailwind مثل معظم المطورين في كل مكان، لسبب رئيسي واحد،
00:01:21وهو أنه سمح لي بتطوير الكود وتعديله بسرعة. لم أستخدم Figma أبدًا
00:01:28أو أي أدوات مشابهة، وذلك لأنني غالبًا ما أعمل بمفردي.
00:01:34وعندما أعمل بمفردي على مشاريعي، لا أحتاج حقًا لاستخدام أدوات التصميم تلك. فبالنسبة لي،
00:01:40كان من الأسرع دائمًا تجربة التصاميم مباشرة داخل الكود.
00:01:45ومع Tailwind، وبما أن فئات التنسيق (classes) تكون مدمجة في الـ DOM أو كود JSX، يمكنك
00:01:50تحديث الكود والأنماط بسرعة وتجربة خيارات مختلفة، مثل تعديل الهوامش (margin) بدقة.
00:01:57كان ذلك يمثل سير عمل فعالًا للغاية. وكان هذا هو السبب الرئيسي لي ولربما
00:02:04لمطورين آخرين في استخدام Tailwind. وأعلم أن بالنسبة لعدد لا بأس به من المطورين،
00:02:10وربما الغالبية، هناك سبب قوي آخر وهو كرههم للـ CSS. أعلم أن CSS ليس محبوبًا
00:02:17بين مطوري الويب، وأفهم السبب؛ فقد يبدو معقدًا للغاية بوجود مئات وآلاف
00:02:23الخصائص والقيم، نعم، قد يكون الأمر مربكًا. لكن، يجب أن أقول إن CSS الحديث
00:02:31قطع شوطًا طويلاً، وأصبحت الكثير من الأمور أسهل الآن مما كانت عليه في الماضي. Flexbox ليس
00:02:37جديدًا على الإطلاق، لكنه سهّل الكثير. وفكر في Flexbox وفي مجالات أخرى
00:02:44مثل استخراج الألوان الذي أصبح أسهل بكثير، حيث تتوفر الآن ميزة الألوان النسبية في CSS.
00:02:51وبالمناسبة، أطلقت على قناتي “Akatamine” بضعة فيديوهات أتحدث فيها عن مميزات المتصفحات
00:02:55وCSS الحديثة، مثل الألوان النسبية أو “container queries” المذهلة حقًا
00:03:01لبناء مكونات تتغير أحجامها ديناميكيًا ولا تعتمد على مساحة الشاشة (viewport)، بل على المساحة
00:03:08المتاحة للمكون نفسه. لذا، فقد تطور CSS كثيرًا. والنقطة هي أنه يمكنك استخدام كل هذه
00:03:14المميزات الحديثة مع Tailwind أيضًا، لكن يمكنك أيضًا كتابة CSS خام (vanilla)،
00:03:23وأصبح القيام بذلك أسهل الآن باستخدام الذكاء الاصطناعي، فحتى لو كنت تكره CSS،
00:03:28يكفي أن تكون على دراية ببعض الميزات ودعم المتصفحات لها. يمكنك توجيه الذكاء الاصطناعي
00:03:34نحو الميزات التي تريد استخدامها، وتزويده ببعض الوثائق أو مقالات MDN، وسيقوم هو بكتابة الكود.
00:03:39قد تتساءل: لماذا أفعل ذلك؟ لماذا لا أستخدم Tailwind فحسب؟ فهو
00:03:45يحتوي على كل هذه الميزات الحديثة أيضًا. هناك سبب ونصف لهذا، على الأقل بالنسبة لي.
00:03:51السبب الأقل أهمية هو أن Tailwind قد لا يدعم دائمًا أحدث الميزات فور صدورها،
00:03:58والأهم من ذلك، أن الذكاء الاصطناعي لا يعرف بالتأكيد كل ميزات Tailwind. فبالرغم من ميزاته الكثيرة،
00:04:05إلا أن الذكاء الاصطناعي لا يستخدمها جميعًا، بل يستخدم نفس الفئات المتكررة وغالبًا ما يستخدم
00:04:13صيغة قديمة للفئات، مما يجعلك تفوت بعض الميزات. وبالطبع، قد يحدث نفس الشيء
00:04:17إذا كنت تستخدم CSS الخام؛ فإذا لم تطلب من الذكاء الاصطناعي استخدام ميزة معينة،
00:04:22فقد لا يفعل. ولكن يمكنك تعلم أهم ميزات CSS التي تريدها
00:04:29وتطلب منه استخدامها. وبالطبع أفهم وجهة نظرك، يمكنك فعل الشيء نفسه مع Tailwind
00:04:34وتطلب منه استخدام ميزات محددة، لكن قد يكون من الأسهل تسمية ميزات CSS رئيسية بدلاً من فئات Tailwind.
00:04:40لكن مجددًا، ليست هذه نقطتي الأساسية. نقطتي الأساسية هي
00:04:48أنني أحاول دائمًا تقليل عدد المكتبات التي أستخدمها في مشاريعي،
00:04:53والسبب في ذلك مزدوج. أولاً، أنا أصنع محتوى تعليميًا، لذا اعتدت على
00:05:01اعتبار المكتبات الخارجية أو الإضافية أمرًا سيئًا؛ فإذا كنت أقدم دورة عن React،
00:05:07واستخدمت فيها Tailwind، وحدث تغيير جذري في Tailwind،
00:05:12ستتعطل أجزاء كثيرة من الكود أو الدورة التدريبية فجأة، وسأتلقى الكثير من الأسئلة من الطلاب،
00:05:17رغم أن الموضوع الرئيسي وهو React لم يتغير. أدرك أن هذه مشكلة خاصة جدًا تؤثر عليّ،
00:05:23ولكنها لا تؤثر على معظم المواقع. ومع ذلك، حتى لو كنت تبني موقعًا عاديًا،
00:05:29أعتقد أن تقليل المكتبات الخارجية قدر الإمكان وبشكل معقول هو فكرة جيدة.
00:05:38لا أقول إنه يجب الاستغناء عن كل المكتبات قسرًا، فهناك أسباب وجيهة لاستخدام بعضها.
00:05:44فمثلاً، إذا كنت تبني موقعًا يحتوي على محرر نصوص غني (rich text editor)،
00:05:50فإن استخدام شيء مثل TipTap منطقي جدًا، لأنه يمكنك من بناء محررك الخاص.
00:05:54باستخدام الذكاء الاصطناعي، أصبح الأمر أسهل من ذي قبل إلى حد ما،
00:05:59لكنك ستواجه أيضًا الكثير من الحالات الخاصة أو المشاكل التي سيتعين عليك حلها بنفسك.
00:06:06نعم، سيساعدك الذكاء الاصطناعي، لكنه لا يصيب في كل شيء دائمًا، وأنت تعرف ذلك إذا جربته.
00:06:11لذا هناك أسباب لاستخدام مكتبات خارجية. لكنني أقول فقط إن التنسيق (styling)
00:06:16هو شيء يمكن استبداله بالفعل. ولا أقول إن على الجميع فعل ذلك،
00:06:21لكن بالنسبة لي، هذا التوجه يعمل بشكل جيد. وبالتالي، هذه مكتبة يمكنني التخلص منها
00:06:28لأنني لا أمانع مراجعة كود CSS الذي يعطيه لي الذكاء الاصطناعي وإصلاح مشاكل التنسيق
00:06:37باستخدام CSS الخام عندما تسوء الأمور، وبالتأكيد ستسوء في مرحلة ما عند استخدامه.
00:06:44لكنني لا أمانع ذلك. أما إذا كنت تكره تمامًا النظر إلى أكواد CSS، فهذا الخيار لن يناسبك.
00:06:50لكن بالنسبة لي، يمكنني الاستغناء عن مكتبة Tailwind، وعن Shadcn أيضًا
00:06:56لأنني أبني مكوناتي الخاصة. و Shadcn بالطبع ليس مكتبة تقليدية،
00:07:00لكنه يستخدم RADIX UI في الخلفية، وهي مكتبة وضع صيانتها الآن يثير التساؤلات حسب علمي.
00:07:08وهنا تكمن المشكلة الحقيقية في رغبتي بتجنب المكتبات، حتى بعيدًا عن فكرة المحتوى التعليمي.
00:07:16فكل مكتبة تضيفها لمشروعك قد تصبح عبئًا إذا توقفت صيانتها.
00:07:21في تلك اللحظة، قد لا تُحل الثغرات الأمنية أو الأخطاء البرمجية، حتى أخطاء التنسيق
00:07:29في Tailwind مثلاً. وقد لا تُضاف ميزات جديدة. فإذا ظهرت ميزة جديدة في CSS
00:07:35ولم تعد Tailwind تحت الصيانة -وهي تحت الصيانة حاليًا بالطبع- فلن تتمكن أبدًا من استخدامها.
00:07:41وكدنا نقترب من ذلك مع Tailwind. في الفيديو الذي تحدثت فيه عن مشاكلهم،
00:07:46كان هناك منشور للمبتكر الرئيسي لـ Tailwind يقول فيه إنهم إذا لم يجدوا حلاً لمشكلة التمويل،
00:07:52فقد تصبح Tailwind مشروعًا مهجورًا. ربما كان ذلك مبالغًا فيه لجذب الانتباه،
00:07:58لكن على أي حال، إحدى المشاكل الدائمة مع معظم المكتبات الخارجية هي أنها قد لا تحظى
00:08:03بالصيانة في المستقبل، اعتمادًا على من يعمل عليها أصلاً.
00:08:11وهذا هو السبب الذي يجعلني أفضل استخدام CSS الخام مجددًا، وهذا أمر مهم
00:08:17لأنني كنت أفعل ذلك دائمًا. ولا يسعني إلا أن أؤكد مجددًا أنني أتمنى الأفضل لـ Tailwind
00:08:22وما زلت أستخدمها في الكثير من المشاريع، فأنا لا أكرهها.
00:08:28الأمر مجرد تجربة لعدم استخدامها في بعض المشاريع. وسواء كان الأمر يتعلق بـ Tailwind
00:08:35أو أي شيء آخر، سأفكر دائمًا مرتين قبل استخدام أي مكتبة خارجية،
00:08:41رغم وجود أسباب وجيهة لاستخدامها؛ مثل “Better Auth” للمصادقة، فهي مذهلة وسأستخدمها بالتأكيد.
00:08:46لكن إذا كانت هناك مكتبة يمكنك استبدالها، فقد يستحق الأمر إعادة النظر فيها.
00:08:53before using a third-party library. There are many good reasons to use them. For example, better auth
00:08:57for authentication is amazing. I would definitely do that. But if there is a library you can replace,
00:09:04it might be worth a second look or thought, I guess.