लेआउट नोट्स: 2019 में उपयोगी Google क्रोम एक्सटेंशन

मेरे ब्राउज़र में लगभग 30 एक्सटेंशन इंस्टॉल किए गए हैं जो जीवन को सरल बनाते हैं और इंटरनेट पर काम करते हैं। इस लेख में मैं टाइपसेटर के लिए 10 प्रासंगिक Google क्रोम एक्सटेंशन साझा करना चाहता हूं जो मैं लगातार साइटों का उपयोग करते समय उपयोग करता हूं।

1. परफेक्टपिक्सल

Www.wrike.com पर नए ब्लॉक विकसित करते समय PerfetPixel का उपयोग करने का एक उदाहरण

साइट पिक्सेल-टू-पिक्सेल का लेआउट शुरुआती और अनुभवी पेशेवरों दोनों के लिए कठिनाइयों का कारण बनता है। PerfectPixel ब्राउज़र में लेआउट के ऊपर लेआउट छवि को ओवरले करता है। विस्तार सेटिंग्स में, आप लेआउट की पारदर्शिता और लेआउट को समायोजित कर सकते हैं, जो आपको सभी आवश्यक आकारों और सूचक को ध्यान में रखने की अनुमति देता है। इस प्लगइन का उपयोग लेआउट को सरल करेगा और प्रोजेक्ट सबमिट करते समय संपादन की संख्या को कम करेगा। मेरे एक्सटेंशन सेट में, PerfectPixel अपनी कार्यक्षमता और प्रयोज्य के कारण पहले स्थान पर है।

एक्सटेंशन इंस्टॉल करने के लिए लिंक

2. वािपलेजर

सहयोग पर Wappalyzer केस स्टडी। www.rike.com/2019/london

यह हमेशा दिलचस्प होता है कि साइटों पर कौन से उपकरण और तकनीक का उपयोग किया जाता है। Wappalyzer CMS, JS फ्रेमवर्क, CSS लाइब्रेरीज़, एनालिटिक्स टूल्स और बहुत कुछ पर जानकारी प्रदान करता है। कल्पना करें कि साइट पर एनीमेशन एक मुफ्त सीएसएस पुस्तकालय है जिसे आप अपने प्रोजेक्ट में उपयोग कर सकते हैं। यह आवश्यक उपकरण के लिए खोज समय को कम करेगा और उन प्रौद्योगिकियों के बारे में जागरूक होगा जो साइट का उपयोग करता है।

एक्सटेंशन इंस्टॉल करने के लिए लिंक

3. एचटीएमएल 5 आउटलाइनर

हैदर Hierarchy पर habr.com/en/company/wrike

HTML 5 आउटलाइनर साइट पृष्ठ पर हेडर की एक सूची प्रदर्शित करता है। विस्तार शीर्षकों की संरचना करने और पदानुक्रम में उल्लंघनों की पहचान करने में मदद करता है। उदाहरण के लिए, अनुभाग टैग में एचटीएमएल 5 आउटलाइनर एच 2 टैग की अनुपस्थिति के बारे में एक चेतावनी प्रदर्शित करता है। यह लेआउट में शीर्षकों के सही उपयोग को निर्धारित करने के लिए त्वरित और सुविधाजनक तरीकों में से एक है।

एक्सटेंशन इंस्टॉल करने के लिए लिंक

4. वायरफ्रेमिफ़

वायरफ्रेमाइज केस स्टडी www.wrike.com पर

डिजाइनर एक वायरफ्रेम का उपयोग करके साइटों को डिजाइन करते हैं - लाइनों, ब्लॉकों और हस्ताक्षर का एक सेट। यह दृष्टिकोण आपको पृष्ठ पर ब्लॉकों के इंडेंटेशन, आकार और स्थान के आधार पर एक प्रोजेक्ट आर्किटेक्चर बनाने की अनुमति देता है। वायरफ्रेमिफ में वायरफ्रेम के रूप में साइट का एक वैकल्पिक रूप शामिल है, जो गलत उपयोग से बचने में मदद करेगा:

• नकारात्मक मार्जिन;
• पैडिंग का उपयोग करने वाले तत्वों का संरेखण;
• सीएसएस गुणों का उपयोग कर इंडेंटेशन बाएं, दाएं;

एक्सटेंशन इंस्टॉल करने के लिए लिंक

5. पेज पेजर

पेजलाइनर केस स्टडी www.wrike.com/apps पर

ग्राफिक्स एडिटर में, आप तत्वों को संरेखित कर सकते हैं या गाइड लाइन का उपयोग करके साइट ग्रिड प्रदर्शित कर सकते हैं। टाइप्टर पेजलाइनर का उपयोग करके ब्राउज़र में इस कार्यक्षमता को सक्षम कर सकता है। एक्सटेंशन उसी तरह के गाइड को दिखाता है, जैसा कि Adobe Photoshop में है। पेजलाइनर के साथ , तत्वों को संरेखित करना बहुत आसान है।

एक्सटेंशन इंस्टॉल करने के लिए लिंक

6. वेब डेवलपर

वेब डेवलपर की सूची है

वेब डेवलपर ब्राउज़र में एक अतिरिक्त टूलबार जोड़ता है। इसके अंदर 10 टैब हैं: अक्षम करें, कुकीज़, सीएसएस, फ़ॉर्म, चित्र, सूचना, विविध, रूपरेखा, आकार और उपकरण। विस्तार कार्यक्षमता आपको इसकी अनुमति देती है:

• सीएसएस, जेएस और छवियों को अक्षम करें;
• HTML, CSS की वैधता की जाँच करें;
• सीएसएस शैलियों में हेरफेर;
• HTML रूपों का परीक्षण करें
• आवश्यक जानकारी मेटा टैग प्रदर्शित करें;
• ब्राउज़र विंडो का आकार बदलें
• कैश साफ़ करें;

डेवलपर्स के बीच वेब डेवलपर एक लोकप्रिय विस्तार बना हुआ है। इसकी तुलना वास्तविक जीवन में मल्टीटूल के साथ की जा सकती है: आपके पास हमेशा आवश्यक उपकरण होते हैं।

एक्सटेंशन इंस्टॉल करने के लिए लिंक

7. उपयोगकर्ता सीएसएस

Www.wrike.com/customers पर उपयोगकर्ता सीएसएस उदाहरण

कल्पना करें कि आप सीएसएस को सीधे ब्राउज़र में ठीक करना चाहते थे, लेकिन उसके बाद आपको पृष्ठ को फिर से लोड करना पड़ा। आपकी सभी उपलब्धियां गायब हो गई हैं, और आपको फिर से बदलाव करना होगा। उपयोगकर्ता सीएसएस का उपयोग करें, जो आपकी शैलियों को बचाएगा। CSS गायब होने के बारे में अधिक चिंता नहीं। एक्सटेंशन की कार्यक्षमता आपको अन्य पृष्ठों पर जाने पर लिखित सीएसएस का परीक्षण करने की अनुमति देगा।

एक्सटेंशन इंस्टॉल करने के लिए लिंक

8. स्टाइलूर

Wrike www.wrike.com/customers पर स्टाइलुरल का केस स्टडी

उपयोगकर्ता सीएसएस ब्राउज़र डेवलपर पैनल को प्रतिस्थापित नहीं करेगा। यदि आप devtools में काम करने के आदी हैं और एक ही समय में ब्राउज़र को अपडेट करने के बाद बदलाव नहीं खोना चाहते हैं, तो StyleURL इंस्टॉल करें । एक्सटेंशन आपके परिवर्तनों को याद रखेगा और कार्य को एक अलग फ़ाइल में सहेजने या गिटबस्ट जिस्ट पर अपलोड करने की क्षमता प्रदान करेगा।

एक्सटेंशन इंस्टॉल करने के लिए लिंक

9. साइटिमप्रोवे एक्सेसिबिलिटी चेकर

साइटविप्रोवे एक्सेसिबिलिटी चेकर केस स्टडी www.wrike.com/newsroom पर

साइटइमप्रोव एक्सेसिबिलिटी चेकर एक उपकरण है जो सभी के लिए सामग्री तक पहुंच प्रदान करने के लिए एक्सेस मानकों के अनुपालन के लिए HTML की जांच करता है। विस्तार विस्तृत जानकारी के साथ त्रुटियों को प्रदर्शित करता है। उनके लिए विवरण में आप WCAG 2 से फुटनोट्स और एक्सेसिबिलिटी पर विस्तृत लेखों के लिए सीधे लिंक पा सकते हैं।

एक्सटेंशन इंस्टॉल करने के लिए लिंक

10. टैबबुक

टैब्सबुक उदाहरण

हर एक अपने तरीके से बुकमार्क के साथ काम करता है। वे हैं जो साइटों तक त्वरित पहुंच के लिए लिंक सहेजते हैं, और जो उपयोगी जानकारी संग्रहीत करने के लिए बुकमार्क का उपयोग करते हैं। टैबबुक के साथ आप अपने बुकमार्क को ज्ञान के आधार में बदल सकते हैं। विस्तार इंटरफ़ेस आपके बुकमार्क के आसान नेविगेशन के लिए एक पेड़ की तरह फ़ोल्डर संरचना प्रदर्शित करता है। सभी डेटा को क्लाउड में संग्रहीत किया जाता है, जो आपको किसी भी डिवाइस से इसे एक्सेस करने की अनुमति देता है।

एक्सटेंशन इंस्टॉल करने के लिए लिंक

एक्सटेंशन उन सभी शुरुआती और अनुभवी पेशेवरों के लिए उपयोगी होगा जो उनके बारे में नहीं जानते थे। टिप्पणियों में लिखें कि आप किस एक्सटेंशन का उपयोग करते हैं।

अधिक उपयोगी ब्राउज़र एक्सटेंशन डिजाइनरों के लिए क्रोम प्लगइन्स के शीर्ष 10 लिंक और प्रोग्रामर के लिए उपयोगी Google क्रोम एक्सटेंशन पर पाए जा सकते हैं ।