मेटा ने अपना खुद का shadcn (Astryx) बनाया
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00यह है एस्टेरिक्स, मेटा का अपना ShadCN वर्ज़न, जिसे हमारे स्टाइलिंग सॉल्यूशन, StyleX पर बनाया गया है।
00:00:05यह पूरी तरह से थीम-सक्षम (themable) है, MIT लाइसेंस प्राप्त है, और मेटा का कहना है कि वे इसे आंतरिक रूप से 8 सालों से
00:00:0913,000 ऐप्लिकेशन्स में रिफाइन कर रहे हैं। यदि आप ऐसे व्यक्ति हैं जिसे Tailwind या ShadCN पसंद नहीं है,
00:00:15तो इसमें आपको ज़रूर दिलचस्पी लेनी चाहिए, और अगर आपको ShadCN पसंद भी है,
00:00:18तो आइए देखें कि क्या इसे बदलने का कोई कारण है।
00:00:24मैं ईमानदारी से बहुत प्रभावित हूँ कि यह कितने सारे कंपोनेंट्स और फीचर्स के साथ लॉन्च हुआ है,
00:00:29यह दिखाता है कि वे वास्तव में सालों से इसे आंतरिक रूप से इस्तेमाल कर रहे हैं।
00:00:32इसमें रिएक्ट (React) पर आधारित 150 से अधिक सुलभ कंपोनेंट्स हैं, लेकिन इस सूची को देखने के बजाय,
00:00:37आपको दिखाने का सबसे अच्छा तरीका शायद हमारे टेम्प्लेट हैं, क्योंकि वे उन सभी को एक साथ उपयोग में दिखाते हैं।
00:00:41हमारे पास यहाँ स्टेटस सेक्शन और ड्रॉप-डाउन मेनू के साथ एक ग्रुप टेबल है।
00:00:44हमारे पास एक पेमेंट फॉर्म है जहाँ आप उन सभी व्यक्तिगत फॉर्म तत्वों को देख सकते हैं जिनकी आपको आवश्यकता होगी,
00:00:48साथ ही एरर मैसेज जैसी चीज़ों के लिए फॉर्म स्टेटस भी है।
00:00:50आप इसके साथ ड्रैग-एंड-ड्रॉप कान्बन बोर्ड बना सकते हैं, या टैब और साइडबार के साथ एक IDE तैयार कर सकते हैं।
00:00:56ई-कॉमर्स साइट्स, इसके लिए भी यह कारगर है।
00:00:58यहाँ तक कि एक AI चैट साइट भी, यह उसे भी कर सकता है, जिसमें रिस्पॉन्स को रेंडर करने के लिए एक मार्कडाउन कंपोनेंट भी शामिल है।
00:01:03इसमें एक सब्सक्राइब बटन भी है।
00:01:05नहीं रुकिए, वह YouTube है, लेकिन अगर आप हमारे काम को पसंद करते हैं तो सब्सक्राइब बटन ज़रूर दबाएं, इससे बहुत मदद मिलती है।
00:01:10जैसा कि आप देख सकते हैं, एस्टेरिक्स वास्तव में आपकी लगभग सभी कंपोनेंट संबंधी जरूरतों को पूरा करेगा,
00:01:14और ये सभी कंपोनेंट्स वास्तव में उस कोर लाइब्रेरी से आते हैं।
00:01:16इसलिए इसका उपयोग करना किसी भी अन्य कंपोनेंट का उपयोग करने जैसा ही है, और आप कंपोनेंट के सभी विकल्पों के लिए डॉक्यूमेंटेशन देख सकते हैं।
00:01:23उदाहरण के लिए, एक बटन में एक आइकन हो सकता है, अंत में कंटेंट, साइज़, वेरिएंट्स, फिर से, लगभग सब कुछ जो आपको चाहिए।
00:01:30लेकिन अब आइए बात करते हैं कि आपको वास्तव में इसका उपयोग क्यों करना चाहिए।
00:01:32मेटा का तर्क यह है कि डिज़ाइन सिस्टम ने हमेशा आपको दो बुरे विकल्पों के लिए मजबूर किया है।
00:01:36पहला विकल्प यह है कि आप Material UI जैसे किसी बड़े कंपनी सिस्टम को अपनाएं, और अब आपके सभी ऐप्स सीमित कस्टमाइज़ेबिलिटी वाले Google उत्पाद जैसे दिखते हैं।
00:01:44दूसरा विकल्प यह है कि आप ShadCN जैसा कुछ लें, कंपोनेंट्स को कॉपी और पेस्ट करके अपने प्रोजेक्ट में डालें, लेकिन अब कोड आपका है,
00:01:50इसलिए प्रत्येक प्रोजेक्ट में हर कंपोनेंट का अपना फोर्क होता है, और अपस्ट्रीम फिक्स को फॉलो करना कठिन हो जाता है क्योंकि अब इन सभी को अपडेट करना आपका काम है।
00:01:57कुछ लोग उस सारे कंपोनेंट कोड के लिए ज़िम्मेदार नहीं होना चाहते, इसलिए एस्टेरिक्स उस ट्रेडऑफ़ को खत्म करने का दावा करता है।
00:02:03एस्टेरिक्स के साथ, सिस्टम व्यवहार, एक्सेसिबिलिटी और गुणवत्ता को नियंत्रित करता है, और थीम यह नियंत्रित करती हैं कि यह कैसा दिखता है,
00:02:08जिसे बिना किसी कंपोनेंट को दोबारा लिखे, रंग, टाइप, रेडियस, मोशन जैसी चीज़ों के लिए टोकन स्तर पर कस्टमाइज़ किया जाता है।
00:02:14तो यहाँ मेरे पास एक एप्लिकेशन है जिसे मैंने एस्टेरिक्स वेबसाइट के कुछ टेम्प्लेट का उपयोग करके बनाया है,
00:02:18और अगर आप उन्हें थीम प्रदान नहीं करते हैं तो यह वास्तव में सभी कंपोनेंट्स का डिफ़ॉल्ट लुक है, इसलिए यह एक बेस थीम के साथ आता है।
00:02:24अपनी खुद की थीम बनाने के लिए, हम define theme फंक्शन का उपयोग कर सकते हैं,
00:02:27और यह वास्तव में कुछ कूल फीचर्स के साथ आता है।
00:02:29पहला विकल्प रंग (color) का है।
00:02:31कभी-कभी आप जानते हैं कि आपका मुख्य ब्रांड रंग क्या होना चाहिए, मेरे मामले में यह एक चमकीला हरा है,
00:02:35लेकिन आप बैकग्राउंड रंग, एक्सेंट रंग उत्पन्न नहीं करना चाहते, आप वास्तव में उन सभी व्यक्तिगत रंगों के बारे में सोचना नहीं चाहते।
00:02:40इसलिए एस्टेरिक्स के साथ, यदि मैं इस पर सेव दबाता हूँ, तो आप देख सकते हैं कि यह वास्तव में मेरे लिए उन्हें जनरेट करता है,
00:02:44इसलिए मुझे सिर्फ़ एक हेक्स कलर के आधार पर बहुत अच्छा शुरुआती पॉइंट मिल जाता है।
00:02:48रंग के बाद, हमारे पास टाइपोग्राफी विकल्प भी हैं।
00:02:50यह काफी स्पष्ट है, हम यहाँ 'into' का उपयोग कर रहे हैं, लेकिन फिर हमारे पास एक स्केल भी है।
00:02:54तो मेरे टेक्स्ट के लिए बेस साइज़ 14 होगा,
00:02:57लेकिन फिर इसका अनुपात 1.2 होगा।
00:02:59इसका मतलब यह है कि हम टेक्स्ट साइज़ में हर कदम ऊपर की ओर बढ़ाते हैं, तो अगर मैं टेक्स्ट साइज़ 'large' लेता हूँ,
00:03:03यह बेस को लेगा और 1.2 से गुणा करेगा, और वह हमारा व्यक्तिगत टेक्स्ट साइज़ होगा,
00:03:08इसलिए यह हमारे लिए उन सभी टोकन को जनरेट कर रहा है।
00:03:10इसके बाद, हम रेडियस को नियंत्रित कर सकते हैं।
00:03:12यह काफी स्पष्ट है।
00:03:14अगर मैं चाहता हूँ कि हमारे बटन गोल (rounded) हों, तो मैं इसे एक बड़ी संख्या पर सेट कर सकता हूँ,
00:03:17और अगर मैं चाहता हूँ कि हर चीज़ का कोना नुकीला हो, तो मैं इसे ज़ीरो पर सेट कर सकता हूँ।
00:03:21इसके बाद, हमारे पास अंतिम हेल्पर विकल्प है, जो कि मोशन है,
00:03:23और यह अनिवार्य रूप से होवरिंग और प्रेसिंग जैसी चीज़ों के लिए एनिमेशन गति को नियंत्रित करता है।
00:03:27तो आप यहाँ कुछ वेरिएबल्स परिभाषित करके कस्टम थीम के साथ बहुत आगे जा सकते हैं,
00:03:31और यह आपके लिए सभी टोकन जनरेट करता है।
00:03:34लेकिन क्या होगा अगर आपको चुने गए कुछ टोकन पसंद नहीं हैं?
00:03:36उदाहरण के लिए, यदि मैं अपने सेकेंडरी बटन के लिए चुने गए रंग को बदलना चाहता हूँ,
00:03:40हम यहाँ टोकन सेक्शन में जा सकते हैं,
00:03:42और इस थीम और इस टोकन सेक्शन के बारे में एक बहुत अच्छी बात यह है कि सब कुछ टाइप सेफ है,
00:03:47इसलिए यह उन टोकन को जानता है जिन्हें हम वास्तव में परिभाषित कर सकते हैं,
00:03:49और यही कारण है कि CSS के बजाय JavaScript या TypeScript फ़ाइल में ऐसा करना बेहतर है,
00:03:53क्योंकि हमें वह टाइप सेफ्टी मिल सकती है।
00:03:55उस सेकेंडरी बटन का बैकग्राउंड रंग कलर न्यूट्रल टोकन द्वारा परिभाषित किया गया है,
00:03:58इसलिए मुझे सिर्फ़ इसे एक एरे (array) में सेट करने की ज़रूरत है जहाँ एक लाइट मोड है और दूसरा डार्क मोड।
00:04:03मेरे लिए, वह बस एक ही रंग होगा।
00:04:05यदि मैं अब सेव दबाता हूँ, तो आप देख सकते हैं कि इसने मेरे सेकेंडरी बटन का रंग बदल दिया है,
00:04:08लेकिन हमारे पास एक समस्या है कि यह टेक्स्ट वास्तव में सही नहीं दिख रहा है,
00:04:11क्योंकि मैंने अब रंग बदल दिया है।
00:04:12इसलिए मैं उस टेक्स्ट का रंग काला करना चाहता हूँ,
00:04:15लेकिन समस्या यह है कि वह वास्तव में कलर टेक्स्ट प्राइमरी वेरिएबल द्वारा परिभाषित है,
00:04:18इसलिए अगर मैं इसे सेव कर देता हूँ,
00:04:19आप देख सकते हैं कि यह मेरी स्क्रीन पर बहुत सारे टेक्स्ट को काला कर देता है,
00:04:22सिर्फ़ बटन वाले को बदलने के बजाय जैसा मैं चाहता था।
00:04:24तो उस टोकन को वैश्विक स्तर पर बदलने के बजाय,
00:04:26मैं सिर्फ़ कंपोनेंट के लिए इसे बदल सकता हूँ।
00:04:28यहीं पर हम कंपोनेंट सेक्शन का उपयोग कर सकते हैं।
00:04:30मैं कहता हूँ कि हम यहाँ अपना बटन बदलना चाहते हैं।
00:04:32मैं बताता हूँ कि वेरिएंट क्या है, मेरे मामले में सेकेंडरी,
00:04:35फिर मैं यहाँ कोई भी CSS वेरिएबल्स डाल सकता हूँ जो मैं चाहता हूँ।
00:04:37तो मैं सिर्फ़ रंग को काला रखना चाहता हूँ।
00:04:39तो अब अगर मैं इसे सेव करूँ,
00:04:40हम देख सकते हैं कि हमारे सेकेंडरी बटन में वह काला टेक्स्ट रंग है,
00:04:42लेकिन अब और कुछ नहीं बदला है।
00:04:44यह सिर्फ़ इस कंपोनेंट तक सीमित है।
00:04:46इस कंपोनेंट सेक्शन के बारे में एक और अच्छी बात
00:04:47यह है कि आप अपने खुद के कस्टम वेरिएंट्स भी परिभाषित कर सकते हैं।
00:04:50तो मान लीजिए कि मैं 'my button' नाम का एक बटन वेरिएंट चाहता हूँ।
00:04:52मैं इसे यहाँ काले रंग और लाल बैकग्राउंड रंग के साथ सेट कर सकता हूँ,
00:04:56और फिर जब मैं अपने बटन का उपयोग करूँगा,
00:04:57यह सब टाइप सेफ है,
00:04:58और यह जानता है कि मेरा बटन एक वैध वेरिएंट है।
00:05:00आप यहाँ देख सकते हैं,
00:05:01अब हमारे पास एक सब्सक्राइब बटन है।
00:05:02तो आप वास्तव में उस थीम कॉन्फ़िगरेशन से बहुत कुछ कर सकते हैं,
00:05:05प्रत्येक कंपोनेंट के हर हिस्से को पूरी तरह से समायोजित कर सकते हैं,
00:05:07या बस अपने ऐप की कुल शैली।
00:05:09और यहाँ कुछ पहले से बनी थीम भी हैं
00:05:10अगर आप अच्छे बेस से शुरू करना चाहते हैं।
00:05:12आप देख सकते हैं कि इन फ़ाइलों में बहुत सारे कस्टमाइज़ेशन हैं,
00:05:15और आप थीम को बढ़ा (extend) भी सकते हैं
00:05:16ताकि आप किसी मौजूदा थीम पर निर्माण कर सकें
00:05:18बजाय हर बार पूरी तरह से नई थीम बनाने के।
00:05:20इन सभी थीम्स को प्रोडक्शन के लिए भी बनाया जा सकता है।
00:05:23इसलिए यह नेक्स्ट-जेएस (Next.js) जैसे सर्वर-साइड रेंडर किए गए ऐप्स में काम करता है।
00:05:26यह सभी आवश्यक CSS और JavaScript को स्टेटिक रूप से जनरेट करेगा।
00:05:28आपकी थीम्स के लिए इस तरह की एक ही जगह होने के महान लाभों में से एक
00:05:31यह है कि यह आपके ब्रांड कंसिस्टेंसी को लागू करने में मदद करता है।
00:05:34यह वास्तव में एक तर्क है जो मैंने टेलविंड (Tailwind) के खिलाफ देखा है,
00:05:36जहाँ क्योंकि एक डेवलपर कोई भी क्लास लिख सकता है,
00:05:38या AI कुछ भी लिख सकता है,
00:05:40कभी-कभी आपको ऐसे कंपोनेंट्स मिलते हैं जिनमें थोड़ा स्टाइल ड्रिफ्ट होता है
00:05:42क्योंकि किसी ने अपनी टेलविंड क्लास का उपयोग करने का फैसला किया है।
00:05:45जब आपके पास इस तरह की सेट थीम होती है,
00:05:46तो इसे ट्रैक करना आसान होता है क्योंकि यह सब एक जगह होता है।
00:05:49यदि आप देखना चाहते हैं कि आपकी थीम में क्या बदल गया है तो आप आसानी से डिफर व्यू (differ view) कर सकते हैं,
00:05:53और AI को उन टेलविंड क्लासेस के बारे में सोचने की ज़रूरत नहीं है जिनका वह उपयोग कर सकता है,
00:05:56यह बस दिए गए टोकन और कंपोनेंट्स का उपयोग करता है।
00:05:58हालाँकि मैं कहूँगा कि आप कुछ ऐसा ही हासिल कर सकते हैं
00:06:00टेलविंड और ShadCN के साथ,
00:06:01जहाँ आप हर चीज़ को एक टोकन के रूप में परिभाषित करते हैं,
00:06:03हालाँकि यह टाइप-सेफ नहीं है,
00:06:05इसलिए इसे लागू करना बहुत कठिन होगा।
00:06:06अब थीम्स के अलावा,
00:06:07आप किसी कंपोनेंट को सीधे स्टाइल भी कर सकते हैं
00:06:09यदि आप बदलाव करना चाहते हैं,
00:06:10और ऐसा करने के वास्तव में कुछ तरीके हैं।
00:06:12अनुशंसित तरीका शायद X-Style का उपयोग करना है,
00:06:14क्योंकि वह StyleX का उपयोग करता है,
00:06:16जिस पर इसे बनाया गया है,
00:06:17और जिसे मेटा ने स्पष्ट रूप से बनाया है।
00:06:19आप टेलविंड (Tailwind), पांडा (Panda) जैसी अन्य लाइब्रेरी का भी उपयोग कर सकते हैं,
00:06:21और इस तरह की विभिन्न चीज़ें,
00:06:22या क्लास नेम के साथ साधारण CSS।
00:06:24तो आप यहाँ देख सकते हैं,
00:06:25मेरे पास StyleX में परिभाषित ओवरराइड्स हैं।
00:06:27मेरे पास 'Primary button' नामक कुछ शैलियाँ हैं,
00:06:29जहाँ मैं चाहता हूँ कि रंग सफेद हो,
00:06:30और बैकग्राउंड रंग लाल हो।
00:06:32अगर मैं अब सिर्फ़ इस पेज पर एक बटन बदलना चाहता हूँ,
00:06:34मुझे बस इसे X-Style प्रॉप देना है,
00:06:36और इसे मेरी StyleX शैलियाँ पास करनी हैं,
00:06:38और अगर मैं इसे सेव करता हूँ,
00:06:39आप देख सकते हैं कि मेरा Primary बटन अब उन शैलियों के अनुसार समायोजित हो गया है।
00:06:42तो यह है कि आप किसी चीज़ को कैसे स्टाइल करते हैं,
00:06:43यदि आप सिर्फ़ इसे एक बार के लिए चाहते हैं,
00:06:45और आप यह बदलाव नहीं करना चाहते
00:06:46सभी Primary बटनों के लिए।
00:06:47आप डॉक्यूमेंटेशन पर देख सकते हैं
00:06:48किसी कंपोनेंट को स्टाइल करने के आपके पास सभी अलग-अलग तरीके।
00:06:51यह सुपर लचीला है,
00:06:52लेकिन वास्तव में कूल चीज़ जिसे मैं इंगित करना चाहता हूँ
00:06:53वह यह टेलविंड (Tailwind) सपोर्ट है।
00:06:55उन्होंने वास्तव में ऐसा किया है
00:06:56जिसे वे टेलविंड ब्रिज कहते हैं।
00:06:58तो यह आपको टेलविंड का उपयोग जारी रखने देता है,
00:07:00लेकिन यह एस्टेरिक्स में आपके द्वारा सेट की गई थीम से
00:07:01सभी डिज़ाइन टोकन को मैप करता है
00:07:03उन टेलविंड यूटिलिटी क्लासेस के लिए।
00:07:06तो रंग, रेडियस, फ़ॉन्ट साइज़ जैसी चीज़ें,
00:07:07सब एस्टेरिक्स थीम द्वारा परिभाषित हैं,
00:07:07लेकिन फिर टेलविंड उन
00:07:08टेलविंड क्लास नेम्स के साथ उनका उपयोग कर सकता है।
00:07:10मेरे लिए, मैं शायद StyleX का उपयोग करना जारी रखूँगा
00:07:11क्योंकि एस्टेरिक्स को उसी के इर्द-गिर्द बनाया गया है,
00:07:13और मुझे लगता है कि उन लाइब्रेरीज़ को मिलाना
00:07:13जितना लायक है उससे कहीं अधिक भ्रम पैदा करेगा।
00:07:15हालाँकि स्टाइलिंग से आगे बढ़ते हुए,
00:07:17एस्टेरिक्स की एक और बड़ी विशेषता
00:07:18यह है कि यह AI के साथ कितनी अच्छी तरह काम करता है।
00:07:20वास्तव में एक एस्टेरिक्स CLI है,
00:07:21लेकिन यह मुख्य रूप से मानवीय उपयोग के लिए नहीं है,
00:07:22और यह वास्तव में AI के लिए है।
00:07:24इसमें हर कंपोनेंट पर सभी डॉक्यूमेंटेशन को लाने के लिए
00:07:26कमांड्स जैसी चीज़ें शामिल हैं,
00:07:28उसे कॉन्टेक्स्ट में लोड करें
00:07:29बस अपने एजेंट्स को उस कंपोनेंट के साथ काम करने में मदद करने के लिए,
00:07:30और यह आपके agents.md को भी भर सकता है
00:07:31बस कुछ और मार्गदर्शन देने के लिए।
00:07:33मैंने वास्तव में पाया जब मैं इसे अपने सभी डेमो में इस्तेमाल कर रहा था
00:07:34कि इसने इसका बेहद अच्छा काम किया,
00:07:36और मुझे लगा कि Fable, GPT जैसे मॉडल्स,
00:07:38वे सभी एस्टेरिक्स के साथ काम कर सकते हैं,
00:07:40भले ही यह एक अपेक्षाकृत नई लाइब्रेरी है।
00:07:41कुल मिलाकर,
00:07:42आप देख सकते हैं कि एस्टेरिक्स बस एक गंभीरता से
00:07:43फीचर-पैक डिज़ाइन सिस्टम है,
00:07:45और मैंने सिर्फ़ मूल बातों के बारे में बताया।
00:07:45मैं डॉक्यूमेंटेशन देखने की अत्यधिक अनुशंसा करता हूँ
00:07:47क्योंकि यह वास्तव में अच्छी तरह से लिखा गया है,
00:07:49और इनमें से अधिकांश कंपोनेंट्स में
00:07:49बेस्ट प्रैक्टिस सेक्शन भी हैं,
00:07:51जो LLM के लिए वास्तव में उपयोगी होने वाले हैं,
00:07:52और यहाँ एक प्लेग्राउंड भी है
00:07:54अगर आप बस इसे आज़माना चाहते हैं
00:07:55बिना किसी प्रोजेक्ट के।
00:07:57क्या आप इस तरह की किसी चीज़ का उपयोग करेंगे?
00:07:58मुझे नीचे कमेंट्स में बताएं,
00:08:00वहाँ रुकें, सब्सक्राइब करें,
00:08:02और हमेशा की तरह,
00:08:03अगले वीडियो में मिलते हैं।
00:08:04बिना किसी प्रोजेक्ट के।
00:08:06क्या आप ऐसी किसी चीज़ का इस्तेमाल करेंगे?
00:08:07मुझे नीचे कमेंट्स में बताएं,
00:08:08रुकिए, सब्सक्राइब करें,
00:08:09और हमेशा की तरह,
00:08:10अगले वीडियो में मिलते हैं।