Chrome Dev Summit 2014 में कई विषयों और नए एपीआई के बारे में जानकारी दी गई थी. हालांकि, इसमें सिर्फ़ नई और बेहतर चीज़ों के बारे में जानकारी नहीं दी गई थी.
अगर आप नए वेब डेवलपर हैं या अनुभवी डेवलपर हैं और आपको नए एपीआई एक्सप्लोर करने हैं, तो हो सकता है कि आप इन तीन चरणों को अपनाएं: सीखना, बनाना, और बार-बार करना.
मैट गौंट ने Chrome Developer Platform की टीम की ओर से इन समस्याओं को हल करने के लिए किए जा रहे प्रयासों के बारे में बताया है.
सिखाओ
वेब की बुनियादी बातें, इस्तेमाल के उदाहरणों के आधार पर तैयार किए गए दस्तावेज़ों का एक सेट है. इसमें कई विषयों के बारे में बताया गया है. इसका मुख्य मकसद, डेवलपर को कम या कोई जानकारी न होने पर भी, सबसे सही तरीकों को जल्द से जल्द लागू करने में मदद करना है.
वेब फ़ंडामेंटल का एक मुख्य लक्ष्य यह पक्का करना है कि अगर आप किसी विषय के बारे में नए हैं, तो दिशा-निर्देशों की मदद से, "विकल्पों की कमी" की समस्या को कम से कम किया जा सके. अड्डी उस्मानी ने Pastry Box पर इस बारे में बेहतरीन तरीके से बताया है.
अगर आपको साइट या उसके कॉन्टेंट में कोई समस्या मिलती है या आपको Web Fundamentals में किसी खास विषय को शामिल कराना है, तो कृपया GitHub पर सुझाव, शिकायत या राय सबमिट करें.
बनाएं
नया वेब प्रोजेक्ट शुरू करने में आपकी मदद करने के लिए, हमने वेब स्टार्टर किट बनाई है. इसमें आपको सब कुछ मिलता है:
- बिल्ड करने की मज़बूत प्रोसेस
- बॉयलरप्लेट एचटीएमएल
- स्टाइल गाइड
बिल्ड प्रोसेस
अगर आपने पहले कभी भी बिल्ड प्रोसेस का इस्तेमाल नहीं किया है, तो इसे एक प्रोग्राम के तौर पर देखें. यह प्रोग्राम, फ़ाइलों के किसी सेट को लेकर उन पर कुछ काम करता है और नए वर्शन को किसी दूसरी जगह पर भेजता है. ये टास्क, फ़ाइलों को ऑप्टिमाइज़ करते हैं, ताकि लोड होने में लगने वाला समय कम हो. साथ ही, ये संभावित गड़बड़ियों की जांच करते हैं या ऐसे टास्क मैनेज करते हैं जिन्हें ऑटोमेट किया जा सकता है.
वेब स्टार्टर किट में ये प्रोसेस शामिल हैं:
हम सीएसएस और JavaScript को छोटा करके जोड़ते हैं, ताकि ब्राउज़र फ़ाइल को तेज़ी से फ़ेच कर सके. साथ ही, JavaScript को JSHint के ज़रिए भी चलाया जाता है, ताकि JavaScript के सबसे सही तरीकों और कोडिंग से जुड़ी आम गलतियों की जांच की जा सके. इमेज को imagemin की मदद से छोटा किया जाता है. इसका इस्तेमाल करके, फ़ाइल के साइज़ को काफ़ी कम किया जा सकता है. हमारे पास स्टाइल गाइड की सीएसएस बनाने की प्रोसेस भी है.
मल्टी-डिवाइस एचटीएमएल के लिए बॉयलरप्लेट
किसी नए पेज के लिए लिखा गया एचटीएमएल का पहला सेट बहुत ही स्टैंडर्ड होता है. ऐसा हो सकता है कि आपके पास स्टॉक एचटीएमएल फ़ाइल को तुरंत पाने का कोई तरीका हो, जो कई डिवाइसों और स्क्रीन साइज़ पर अच्छी तरह से काम करती हो.
वेब स्टार्टर किट में, हम ऐसी सुविधाएं जोड़ना चाहते थे जिनसे प्लैटफ़ॉर्म और आपकी साइट के बीच का फ़र्क़ कम हो. इसलिए, हमने Android, Windows Phone, iOS, और Opera Coast के लिए, होम स्क्रीन पर जोड़ें और स्प्लैश स्क्रीन की सुविधा जोड़ी है.
स्टाइल गाइड
वेब स्टार्टर किट का आखिरी हिस्सा स्टाइल गाइड है.
इससे किसी भी नए प्रोजेक्ट को डिफ़ॉल्ट स्टाइल और कॉम्पोनेंट का बेहतरीन सेट मिलता है. इससे स्टाइल के हिसाब से डेवलपमेंट को बढ़ावा मिलता है. एलिमेंट में मौजूदा स्टाइल में बदलाव किया जा सकता है और अपनी स्टाइल जोड़ी जा सकती है.
अगले साल की शुरुआत में रिलीज़ होने वाले WSK के अगले वर्शन में, हम स्टाइल गाइड को आसान बनाने और मटीरियल डिज़ाइन के लुक और स्टाइल पर स्विच करने के लिए लगातार काम कर रहे हैं. मैट ने Chrome Dev Summit में, इसके दिखने के तरीके का एकशुरुआती मॉक दिखाया था. इसका उदाहरण यहां दिया गया है.
आकलन करके कॉन्टेंट दोबारा बनाएं
नई जानकारी को इस्तेमाल करने के बाद, आपको अपने काम को डीबग करने, बेहतर बनाने, और उसे मैनेज करने के लिए, DevTools का इस्तेमाल करना होगा.
DevTools में कुछ नई सुविधाएं जोड़ी गई हैं. इन सुविधाओं के बारे में मैट बताते हैं.
डिवाइस मोड
डिवाइस मोड, DevTools का एक नया सेक्शन है. इसकी मदद से, अपनी सीएसएस में मीडिया क्वेरी देखते समय, यह तुरंत देखा जा सकता है कि आपकी साइट अलग-अलग मोबाइल डिवाइसों पर कैसे काम करती है.
डिवाइस मोड की एक बेहतरीन सुविधा यह है कि इससे नेटवर्क की स्पीड को कम किया जा सकता है. इससे, जीपीआरएस, एज, 3G, डीएसएल या वाई-फ़ाई कनेक्शन पर उपयोगकर्ता के अनुभव को सिम्युलेट किया जा सकता है.
Paint प्रोफ़ाइलर
अगर आपने कभी टाइमलाइन टैब खोला है और रिकॉर्ड बटन दबाया है, तो हो सकता है कि आपको वॉटरफ़ॉल में कुछ पेंट इवेंट दिखे हों. आम तौर पर, यह एक ऐसा ब्लैक बॉक्स होता है जिससे यह पता नहीं चलता कि ब्राउज़र ने ऐसा क्यों किया या वह क्या कर रहा था.
पेंट प्रोफ़ाइलर से आपको इस बारे में ज़्यादा जानकारी मिलती है कि पेंट के दौरान ब्राउज़र क्या कर रहा है.
अमान्य होने की जानकारी ट्रैक करना
DevTools अब इस बात की वजह बताता है कि पेंट या लेआउट कब हुआ. यह जानकारी, टाइमलाइन और ब्राउज़र के व्यवहार के बारे में जानने वाले लोगों के लिए मददगार है. साथ ही, इससे परफ़ॉर्मेंस से जुड़ी समस्याओं से बचने के लिए, कोड को ऑप्टिमाइज़ करने में मदद मिलती है.
फ़्लेम चार्ट व्यू
टाइमलाइन में मौजूद जानकारी को देखने का यह एक अलग तरीका है. इससे यह देखना आसान हो जाता है कि टास्क ओवरलैप कैसे होते हैं और दूसरे टास्क की वजह से ब्राउज़र का व्यवहार कैसा रहा.
फ़्रेम व्यूअर
फ़्लेम चार्ट व्यू में, कोई फ़्रेम चुना जा सकता है. इसके बाद, यह पता लगाया जा सकता है कि पेज के किन एलिमेंट को कंपोजिट लेयर में प्रमोट किया गया है. साथ ही, यह भी पता लगाया जा सकता है कि उन्हें प्रमोट क्यों किया गया है.
सीखें. बिल्ड करें. आकलन करके कॉन्टेंट दोबारा बनाएं
Chrome की टीम ने वेब डेवलपमेंट के बारे में डेवलपर को अपडेट रखने के लिए, ये कुछ काम किए हैं. इसलिए, वेब के बुनियादी सिद्धांत, वेब स्टार्टर किट, और Chrome DevTools की नई सुविधाओं को ज़रूर देखें.