क्रोम ने हाल ही में इंटरनेट ब्राउज़र बाजार का 25% हिस्सा हासिल किया है, जो इसे इंटरनेट एक्सप्लोरर (जो प्रोजेक्ट स्पार्टन में विकसित हो रहा है) के बाद दुनिया में दूसरा सबसे अधिक उपयोग किया जाने वाला ब्राउज़र बनाता है। अंततः, इसका मतलब है कि क्रोम वेब डेवलपर्स के लिए व्यवहारिक घर है।
हालांकि मैं फ़ायरफ़ॉक्स का पक्षधर हूं, मैं सराहना कर सकता हूं कि लोग क्रोम को क्यों पसंद करते हैं। यह ब्राउज़र बेंचमार्क पर हावी होता है और यह नियमित लोगों के लिए क्रोम पावर यूज़र बनना आसान बनाता है। अन्य वास्तव में क्रोम से नफरत करते हैं लेकिन कुछ एक्सटेंशन की उपलब्धता के कारण इसका उपयोग करने के लिए मजबूर हैं।
यही एक कारण है कि क्रोम वेब डेवलपर्स के लिए इतना अच्छा है: क्रोम वेब स्टोर और इसके एक्सटेंशन का पूल। यदि आप कभी किसी वेबसाइट को डिज़ाइन या कोड करने की योजना बनाते हैं, तो यहां कुछ आवश्यक उपकरण हैं जिन्हें आपको तुरंत इंस्टॉल करना चाहिए।
ColorZilla
ColorZilla एक फ़ायरफ़ॉक्स ऐड-ऑन के रूप में शुरू हुआ, लेकिन यह इतना लोकप्रिय हो गया कि कई लोगों ने क्रोम संस्करण का अनुरोध किया। अब हम यहां हैं। यह आसान एक्सटेंशन मूल रूप से पेंट या फ़ोटोशॉप जैसे प्रोग्राम में मिलने वाले आई ड्रॉपर टूल का एक उन्नत संस्करण है।
इसके साथ, आप अपने ब्राउज़र में किसी भी स्थान पर इंगित कर सकते हैं और उस स्थान पर रंग की जानकारी तुरंत प्राप्त कर सकते हैं। एक बार प्राप्त होने पर, आप इसे (चाहे RGB, HSV, या सीधे हेक्स द्वारा) समायोजित कर सकते हैं और फिर इसे अपने क्लिपबोर्ड पर कॉपी कर सकते हैं। उपयोग करने में बेहद आसान।
यह CSS ग्रेडिएंट जेनरेटर, वेबपेज कलर एनालाइज़र, और आपकी सुविधा के लिए कुछ पूर्व-स्थापित रंग पैलेट के साथ भी आता है।
Window Resizer
वेब डेवलपर के खतरों में से एक यह सुनिश्चित करना है कि सभी प्रकार के उपकरणों पर उपयोगकर्ताओं के लिए वेबसाइट का देखने का अनुभव सुखद हो। हम केवल मोबाइल बनाम डेस्कटॉप के बारे में बात नहीं कर रहे हैं — जो महत्वपूर्ण है — बल्कि छोटे टैबलेट और विशाल मॉनिटर के बीच के अंतर के बारे में भी।
Window Resizer बटन के एक क्लिक पर ब्राउज़र विंडो को तुरंत रीसाइज़ करने का एक आसान तरीका है। आप अपनी वेबसाइट को विभिन्न रिज़ॉल्यूशन में परीक्षण कर पाएंगे कि आपके उपयोगकर्ता क्या देख रहे हैं — और फिर तदनुसार समायोजित कर सकते हैं।
IE Tab
वेब डेवलपर का एक और बड़ा खतरा ब्राउज़र मानक हैं (या उनकी कमी)। इंटरनेट एक्सप्लोरर, फ़ायरफ़ॉक्स, क्रोम, ओपेरा, और अन्य सभी छोटे ब्राउज़र वेबसाइटों को थोड़े अलग तरीकों से रेंडर करेंगे। इस बीच, कुछ ब्राउज़र दूसरों की तुलना में मानकों को अपनाने में धीमे हैं।
या इंटरनेट एक्सप्लोरर के मामले में, मानकों को खिड़की से बाहर फेंक दिया जाता है और वेब डेवलपर्स को अपने बाल नोचने के लिए मजबूर किया जाता है क्योंकि उन्हें समायोजन करने के लिए मजबूर किया जाता है।
IE Tab के साथ, यह प्रक्रिया थोड़ी आसान हो जाती है। यह आपको एक नए क्रोम टैब में एक वेबसाइट देखने की अनुमति देता है, लेकिन रेंडर किया गया जैसे वह IE में दिखाई देगा। IE की समस्या का एक क्रांतिकारी समाधान नहीं, लेकिन कम से कम यह कुछ है।
Validity
सभी HTML कोड समान नहीं होते। जबकि ब्राउज़र मानक अनुपालन में एक बड़ी भूमिका निभाते हैं, इसका एक हिस्सा वेब डेवलपर पर भी निर्भर करता है कि वह अच्छी HTML प्रथाओं का पालन करे। इसलिए HTML के परीक्षण और सत्यापन के लिए उपकरण मौजूद हैं।
Validity एक एक्सटेंशन है जो आपको बिना किसी तृतीय-पक्ष साइट पर जाए यह सब करने देता है। बस अपनी वेबसाइट खोलें, बटन पर क्लिक करें, और यह ब्राउज़र कंसोल में सभी अमान्य HTML संदेश प्रदर्शित करेगा। सत्यापन W3C सत्यापन सेवा के माध्यम से किया जाता है।
BuiltWith
वेब विकास के बारे में एक चीज जो मुझे नापसंद है वह यह है कि उपयोग करने के लिए इतने सारे लाइब्रेरी, फ्रेमवर्क, और इंजन उपलब्ध हैं। चुनाव की स्वतंत्रता बहुत अच्छी है, लेकिन जब प्रौद्योगिकियों की संख्या इतनी अधिक हो जाती है कि आप उन सभी के साथ नहीं रह सकते, तो यह एक दर्द होता है।
क्या आपने कभी किसी वेबसाइट पर जाकर सोचा है कि अंतर्निहित तकनीक क्या है?
BuiltWith एक्सटेंशन एक सिंगल बटन है जो वर्तमान वेबपेज का विश्लेषण करता है ताकि सभी वेब लाइब्रेरी, फ्रेमवर्क, और इंजन देखे जा सकें जो इसे शक्ति प्रदान करते हैं, जिसमें विज्ञापन नेटवर्क, सामग्री वितरण प्लेटफॉर्म, और यहां तक कि इसके पीछे होस्टिंग सॉफ्टवेयर शामिल हैं।
Postman REST Client [अब उपलब्ध नहीं]
आप में से जो REST API के साथ काम कर रहे हैं, उनके लिए Postman एक सुव्यवस्थित वर्कफ़्लो के लिए आवश्यक एक उपकरण है। इसके साथ, आप HTTP अनुरोध बना सकते हैं और JSON और XML में स्वरूपित प्रतिक्रियाएं प्राप्त कर सकते हैं। प्रतिक्रियाएं HTML के रूप में एक अलग विंडो में खुलती हैं।
आप कई अनुरोधों को एक संग्रह नामक किसी चीज़ में समूहित भी कर सकते हैं, जो संगठित और कुशल रहने का एक शानदार तरीका है। आप एक्सटेंशन के अंदर ही पर्यावरण चर को बदलकर कई वातावरणों पर परीक्षण भी कर सकते हैं।
Corporate Ipsum
फिलर टेक्स्ट उत्पन्न करने का एक तरीका "asdf" को सौ बार कॉपी और पेस्ट करना है। एक बेहतर तरीका Corporate Ipsum इंस्टॉल करना होगा और इसे पलक झपकते ही आपके लिए फिलर टेक्स्ट उत्पन्न करने देना।
हमने पहले कई लोरम इप्सम जेनरेटर कवर किए हैं, लेकिन Corporate Ipsum की अपील यह है कि यह सीधे आपके ब्राउज़र में बैठता है। आप इसे एक बटन क्लिक से खींच सकते हैं। इसका उपयोग न करने का कोई कारण नहीं है, अगर आप मुझसे पूछें। अब आप अपनी वेबसाइट को वास्तव में कोड करने में वापस आ सकते हैं!
TabCloud
वेब विकास कभी-कभी कई मशीनों पर होता है। जबकि डेवलपर्स के लिए स्रोत नियंत्रण सिंक्रनाइज़ और अद्यतित रहने का मुख्य तरीका है, क्या होगा यदि आप कई टैब को कंप्यूटरों के बीच स्थानांतरित करना चाहते हैं? यहीं TabCloud आता है।
TabCloud आपके टैब को क्लाउड में सिंक करता है, जिससे आप उन्हें कहीं और फिर से खोल सकते हैं। इसका उपयोग स्थानीय रूप से सत्र सेवर के रूप में भी किया जा सकता है, जिससे आप बाद में फिर से देखने के लिए टैब का एक सेट संग्रहीत कर सकते हैं। टैब आपके गूगल खाते में सहेजे जाते हैं।
WhatFont
फॉन्ट डिज़ाइन वेब विकास का एक बड़ा घटक है, यही कारण है कि Google Web Fonts जैसी सेवाएं इतनी लोकप्रिय हो गई हैं। अच्छी खबर यह है कि ये मुफ्त फॉन्ट अब उपलब्ध कुछ सबसे सुंदर वेब फॉन्ट हैं।
लेकिन मान लीजिए: ऐसे समय होते हैं जब आप वेब ब्राउज़ कर रहे होते हैं और आपको एक शानदार फॉन्ट मिलता है जिसे आपने पहले कभी नहीं देखा। इसकी पहचान करने के कई तरीके हैं, लेकिन सबसे तेज़ तरीका WhatFont का उपयोग करना है। इसके साथ, आप बस उन पर होवर करके फॉन्ट का निरीक्षण कर सकते हैं। इससे आसान क्या हो सकता है?
Awesome Screenshot [अब उपलब्ध नहीं]
यदि स्क्रीनशॉट आपके नियमित वेब विकास दिनचर्या का हिस्सा नहीं हैं, तो Awesome Screenshot इसे बदलने में मदद करेगा। स्क्रीन कैप्चर डिज़ाइन में परिवर्तनों को दस्तावेज़ करने और क्लाइंट या टीम के सदस्यों के साथ कार्यों-प्रगति को साझा करने के लिए बहुत अच्छे हैं।
इस एक्सटेंशन में पूर्ण पृष्ठ, चयनित क्षेत्र, या दृश्यमान क्षेत्र सहित कई कैप्चर फ़ंक्शन हैं। यह आपको एनोटेशन जोड़ने, छवि के संवेदनशील हिस्सों को धुंधला करने, और एक क्लिक से साझा करने की अनुमति भी देता है। या अपने गूगल ड्राइव पर अपलोड करें।
यदि अवधारणा आपको आकर्षित करती है लेकिन आप एक अधिक शक्तिशाली डेस्कटॉप प्रोग्राम का उपयोग करना पसंद करेंगे, तो इस स्क्रीनशॉट टूल तुलना को देखें और अपने लिए सबसे अच्छा काम करने वाले का उपयोग करना शुरू करें।
Check My Links
बहुत सारी वेब विकास त्रुटियां आपके आगंतुकों को निराश करेंगी, और टूटे हुए लिंक सबसे बुरे अपराधियों में से एक हैं। एक टूटा हुआ लिंक ठीक हो सकता है, लेकिन इससे अधिक और आपकी वेबसाइट विश्वसनीयता और प्रतिष्ठा खोने लगती है। सौभाग्य से, यह एक आसानी से टाली जा सकने वाली गलती है।
Check My Links वही करता है जो यह वादा करता है: यह आपके लिंक की जांच करता है। वैध लिंक हरे रंग से चिह्नित होते हैं जबकि टूटे हुए लिंक लाल रंग से चिह्नित होते हैं और अंत में यह आपको एक प्रतिशत स्कोर देगा। इसके बाद आपको बस उन लिंक को सुधारना है!
आप किन एक्सटेंशन का उपयोग करते हैं?
उत्पादकता के लिए मैं जिस एक और एक्सटेंशन की सिफारिश करूंगा वह है StayFocusd। यह वेब विकास एक्सटेंशन की तुलना में अधिक सामान्य उद्देश्य वाला एक्सटेंशन है, लेकिन यह निश्चित रूप से किसी भी मामले में उपयोगी है। यह आपको काम करते समय वेब से विचलित होने से रोकता है!
आप इनके बारे में क्या सोचते हैं? क्या कोई अन्य आवश्यक वेब विकास एक्सटेंशन हैं जिनकी आप सिफारिश करेंगे? नीचे टिप्पणियों में हमारे साथ साझा करें!
