पब्लिश करने की तारीख: 21 अक्टूबर, 2024
पिछले हफ़्ते, हमने DevTools में एक नया पैनल जोड़ा है: एआई की मदद से, सीधे DevTools में Gemini की मदद से स्टाइल से जुड़ी समस्याओं को डीबग किया जा सकता है.
क्या आपको यह जानना है कि यह क्या-क्या कर सकती है? इस नई सुविधा की मदद से, अपने पेज को आसानी से स्टाइल किया जा सकता है. इसके लिए, यहां दिए गए पांच बेहतरीन तरीके आज़माएं. इनमें लेआउट समझने से लेकर हवाई जहाज़ ठीक करने तक की जानकारी शामिल है.
1. लेआउट के बारे में जानकारी
वेबसाइटें बनाते समय, हमेशा शुरू से काम नहीं किया जाता. अक्सर, आपको ऐसे मौजूदा कोड के आधार पर काम करना पड़ता है जिसके बारे में आपको पहले से कोई जानकारी नहीं होती. यह भी हो सकता है कि आपके आस-पास मौजूद किसी व्यक्ति को भी इस बारे में जानकारी न हो.
एआई से किसी एलिमेंट के लेआउट के बारे में पूछें और जानें कि आखिरी नोड तक, इसे इस तरह क्यों दिखाया गया है - और किसी एलिमेंट पर यह overflow: hidden; असल में क्यों मौजूद है. 👀
प्रॉम्प्ट आज़माएं
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. पेयर प्रोग्रामिंग
सीएसएस अब तक का सबसे बेहतरीन टूल है. बहुत सारे विकल्पों की वजह से, कभी-कभी यह समझना मुश्किल हो सकता है कि: क्या मुझे align-items की ज़रूरत है? या justify-items? इसके बजाय, justify-self या align-content?
कभी-कभी आपको पता होता है कि आपको क्या करना है, लेकिन सीएसएस प्रॉपर्टी का सही सेट नहीं मिल पाता. अगली बार जब आप इस स्थिति में हों, तो एआई को अपनी समस्या बताएं और उसे अपने लिए समस्या हल करने दें.
एआई की मदद की सुविधा, आपके मौजूदा कोड की जांच करेगी और उसकी तुलना उस काम से करेगी जिसे आपको पूरा करना है. साथ ही, आपको कोड में बदलाव करने के लिए ज़रूरी सुझाव देगी. इन सुझावों की समीक्षा करने के बाद, उन्हें लागू किया जा सकता है और अपने कोडबेस में कॉपी किया जा सकता है.
3. सुलभता सलाहकार
अपनी वेबसाइट को ऐक्सेस करने और सहायक टेक्नोलॉजी के साथ इस्तेमाल करने में आसान बनाना ज़रूरी है. ऐप्लिकेशन डेवलप करने के दौरान, सुलभता को ध्यान में रखें. इसे बाद में न जोड़ें. साथ ही, डेवलपमेंट की पूरी प्रोसेस के दौरान, वेब कॉन्टेंट ऐक्सेसबिलिटी से जुड़े दिशा-निर्देशों (डब्ल्यूसीएजी) का पालन करें.
एआई की मदद का इस्तेमाल करके, इन चीज़ों के बारे में सलाह पाएं: <div> को ज़्यादा सेमैंटिक एचटीएमएल एलिमेंट से कहां बदला जा सकता है, aria-* एट्रिब्यूट कैसे मददगार हो सकता है या रंगों के कंट्रास्ट को कैसे बेहतर बनाया जा सकता है.
प्रॉम्प्ट आज़माएं
What about color contrast in this element?
4. रिपोर्ट को अपने हिसाब से बनाना
रुझान आते-जाते रहते हैं: पहले ग्रेडिएंट, शैडो, और तेज़ बॉर्डर का इस्तेमाल किया जाता था. इसके बाद, फ़्लैट डिज़ाइन का इस्तेमाल किया गया. अब हम गहरे रंग के बैकग्राउंड पर चमकदार नीऑन रंगों के साथ, आज के डिज़ाइन के दौर में हैं.
हालांकि, क्या कभी-कभी आपको यह नहीं लगता कि वेब पर चीज़ें एक जैसी क्यों दिखती हैं? अगर आपका दिन ठीक नहीं चल रहा है, तो एआई की मदद से वेब को थोड़ा मज़ेदार बनाएं. जैसे, थीम पार्क की किसी राइड पर!
प्रॉम्प्ट आज़माएं
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. हवाई जहाज़ का मकैनिक बनना
स्टाइल से जुड़ी समस्याओं के बारे में बताना, उन्हें ठीक करने में मदद करना, सुलभता के बारे में सलाह देना, और मौजूदा स्टाइल बदलना - एआई की मदद से, इनमें से कई काम पहले से ही किए जा सकते हैं. साथ ही, आने वाले समय में और भी काम किए जा सकेंगे! क्या आपको लगता है कि एआई की मदद से, हवाई जहाज़ ठीक किए जा सकते हैं? इसके लिए, आपको कोई अनुभव नहीं चाहिए. अपने काम के कपड़े पहनें और Chrome DevTools Hangar में जाकर, अपने हाथों से काम करें!
साथ ही, हमारे सार्वजनिक समस्या ट्रैकर में अपने अनुभव के बारे में हमें ज़रूर बताएं!