पब्लिश करने की तारीख: 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 में जाकर, अपने हाथों से काम करें!
साथ ही, सार्वजनिक समस्याओं को ट्रैक करने वाले टूल में, हमें अपने अनुभव के बारे में ज़रूर बताएं!