सर्वश्रेष्ठ HTML, CSS, जावास्क्रिप्ट प्रैक्टिस: क्रोम एक्सटेंशन

उन लोगों के लिए, जिन्होंने अभी-अभी Codecademy समाप्त किया है।

जब आप प्रोग्रामिंग का अध्ययन करते हैं, तो स्व-अध्ययन का सबसे कुशल तरीका एक उत्पाद विकसित करना है। यह तरीका आपके प्रोग्रामिंग कौशल को बेहतर बनाने के लिए किसी भी प्रोग्रामिंग कोर्स को लेने की तुलना में बहुत तेज़ है।

आम तौर पर, लोग वेब प्रोग्रामिंग में HTML, CSS, और बुनियादी जावास्क्रिप्ट के साथ प्रोग्रामिंग सीखना शुरू करते हैं, हालांकि, इससे पहले कि वे सर्वर-साइड भाग तक पहुंचते हैं, एक सार्थक अनुप्रयोग बनाने में मुश्किल है।

इसलिए, मैंने हमेशा छात्रों को इस तरह समझाने की कोशिश की,

यदि आप सर्वर-साइड सीखना और कुछ एप्लिकेशन लॉन्च करना शुरू करते हैं, तो यह मज़ेदार होगा। कृपया, हार मत मानिए।

लेकिन कई छात्र HTML और CSS स्टेज पर प्रोग्रामिंग सीखना बंद कर देते हैं।

(हो सकता है, प्रोग्रामिंग शुरू करने के लिए लोगों को प्रोत्साहित करने के लिए HTML से शुरुआत करना एक अच्छा विचार नहीं है।)

एक दिन, मैंने काम शुरू करने के लिए अपना क्रोम ब्राउज़र खोला। तब मुझे एहसास हुआ कि मैं वास्तव में सबसे अच्छा अनुप्रयोग का उपयोग कर रहा था जिसे आप केवल एचटीएमएल, सीएसएस और जावास्क्रिप्ट का उपयोग करके बना सकते हैं।

गति

संक्षिप्त रूप से, यदि आप क्रोम पर इस एक्सटेंशन को स्थापित करते हैं, तो हर बार जब आप एक नया टैब खोलते हैं तो सुपर कूल तस्वीर पर एक बधाई संदेश होगा। डाउनलोड की संख्या पहले ही कई मिलियन है। यदि आपने इसका उपयोग नहीं किया है, तो मैं आपको इसे स्थापित करने की अत्यधिक सलाह देता हूं। हो सकता है कि आप केवल 2 से 3 सेकंड प्रति नए टैब के लिए इस एप्लिकेशन का अनुभव करेंगे, लेकिन आप उस छोटे से पल के लिए आराम कर सकते हैं।

इस एप्लिकेशन को क्लोन करने का प्रयास करें!

चरण 1: तैयारी के लिए चीजें

  • एचटीएमएल
  • सीएसएस
  • जावास्क्रिप्ट
  • अच्छी तस्वीर: अनपलाश से
  • मैनिफ़ेस्ट .json (क्रोम से लोड किया जाना है)

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

चलो इसे सरल रखें

हम एक बड़ी तस्वीर, एक बड़ा ग्रीटिंग संदेश और शायद वर्तमान समय के साथ एक वेबसाइट बना रहे हैं।

एक तस्वीर खोजें

यदि आप Unsplash वेबसाइट पर जाते हैं, तो आप बहुत सारे शांत लाइसेंस-मुक्त चित्र पा सकते हैं।

चूंकि मैं नॉर्वे में हूं, इसलिए मैंने इस तस्वीर का उपयोग करने का फैसला किया।
धन्यवाद, विदर्भ नॉर्डली-मैथिसन। (उनकी प्रतिभा को स्वीकार करना हमेशा महत्वपूर्ण होता है।)

Unsplash पर Vidar Nordli-Mathisen द्वारा फोटो

एक परियोजना बनाओ

सहज सरल सरल

एक HTML फ़ाइल, एक सीएसएस, एक जावास्क्रिप्ट और एक मैनिफ़ेस्ट फ़ाइल।

हमें बस इतना ही चाहिए

ठीक है, यह पहला संस्करण है।

यह एक साधारण वेबपेज है। अब, क्रोम से लोड होने के लिए, आपको निम्न मेनिफ़ेस्ट जोड़ना होगा। json फ़ाइल।

"Chrome_url_overrides" इस एप्लिकेशन की सबसे महत्वपूर्ण संपत्ति है।

एक्सटेंशन पेज पर जाएंअपने प्रोजेक्ट फ़ोल्डर के अंदर सेलेक्ट बटन पर क्लिक करेंहमारा विनम्र विस्तार ...हर बार जब आप नया टैब खोलते हैं, तो यह आपका सरल वेबपेज दिखाएगा।

आप वहां जाते हैं, हमने अपनी पहली परियोजना पूरी कर ली है।

आप इसे केवल इस कार्यक्षमता के साथ उपयोग कर सकते हैं। हो सकता है कि आप पाठ को उस चीज़ से संपादित कर सकते हैं जिसे आप खुद से प्रेरित करना चाहते हैं, जैसे कि "असंभव कुछ भी नहीं है", "बस करो", "हम दुनिया हैं", कुछ-कुछ। या हो सकता है कि आप इसके बजाय अपनी पारिवारिक फोटो लगा सकें।

लेकिन इसे इससे बेहतर बनाते हैं।

चरण 2: जोड़े जाने वाली चीजें

  • वर्तमान समय
  • नाम बदलने का कार्य
  • चित्र बदलते कार्य

उन तीन नई विशेषताओं को शामिल करने के लिए, मैंने नीचे की तरह HTML फ़ाइल को बदल दिया।

सीएसएस को भी बदला जाना चाहिए।

फिर नया पेज नीचे की तरह होगा।

ओह, मैंने सोचा कि यह गति थी :)

मैनिफ़ेस्ट अपडेट करना .json

अब, हम दो सुविधाएँ जोड़ेंगे।

सबसे पहले, हम इस एप्लिकेशन में एक इनपुट फ़ॉर्म जोड़ेंगे ताकि लोग इस पर अपना नाम रख सकें। हम इस फ़ॉर्म को "हैलो, जुंगवोन एसईओ" संदेश के तहत जोड़ देंगे।

यह बदसूरत है, इसे ठीक कर दें

इनपुट टैग के लिए नई शैली।

ठीक है, बहुत बेहतर।

अब से, हमें यह सोचने की ज़रूरत है कि इस जानकारी को कैसे संग्रहीत किया जाए।

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

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

इसके अलावा, चूंकि मैं अभी भी jQuery का उपयोग करना पसंद करता हूं, इसलिए इसे जोड़ने दें।

मैंने jQuery CDN जोड़ने की कोशिश की, लेकिन ...

चिंता न करें, हमें सिर्फ एक और संपत्ति को मैनिफ़ेस्ट में जोड़ने की आवश्यकता है।

अच्छा है, अब हम script.js फ़ाइल में कोड करने के लिए तैयार हैं।

जो मैं पहले करना चाहता हूं वह है:

  1. उपयोगकर्ताओं को अपना नाम लिखें।
  2. कुकी में संग्रहीत करें (केवल सबसे लोकप्रिय कोड का उपयोग करें)
  3. ग्रीटिंग संदेश में इनपुट फ़ॉर्म को फीका करें और फीका करें।

अब, यह पहली बार है जब हमें एक वास्तविक डेवलपर की तरह सोचना है।

केस 1: जब आप इसे पहली बार खोलते हैं।
केस 2: अपना नाम टाइप करने के बाद जब आप इसे खोलेंगे।

हमें यह तय करने की आवश्यकता है कि क्या दिखाई देना चाहिए और क्या नहीं होना चाहिए।

मामला एक:
समय: वर्तमान समय
शुभकामना संदेश: आपका नाम क्या है?
इनपुट फॉर्म: दर्शनीय

केस 2:
समय: वर्तमान समय
बधाई संदेश: नमस्कार, <नाम>!
इनपुट फॉर्म: अदृश्य

और, इन दोनों मामलों में अंतर करने का तरीका यह है कि कुकी की कुंजी 'उपयोगकर्ता नाम' है या नहीं।

समय अद्यतन करने के साथ, नई script.js नीचे की तरह होगी।

नाम लिखने से पहलेनाम टाइप करने के बाद

ठीक है, यह काम कर रहा है।

बेशक, कुछ चीजें हैं जिन्हें हमें अभी भी सुधारने की आवश्यकता है, जैसे कि संक्रमण प्रभाव।

लेकिन, मैं इसे आपको दूंगा।

अब, और क्या?

हमें उस कार्यक्षमता को जोड़ना होगा जो उपयोगकर्ताओं को अपनी तस्वीर बदलने की अनुमति देता है।

अनप्लैश एपीआई

आप आसानी से अपने ऐप को रजिस्टर कर सकते हैं और इस पेज से टोकन प्राप्त कर सकते हैं।

Unsplash API का उपयोग करने के लिए, आपको अपना एप्लिकेशन उनके डेवलपर पृष्ठ में पंजीकृत करना होगा।

‘न्यू एप्लीकेशन’ पर क्लिक करके आप अपना पंजीकरण करा सकते हैं।

डेमो उत्पाद के लिए, आपको प्रति घंटे 50 अनुरोधों का उपयोग करने की अनुमति होगी। और यह हमारे लिए काफी है।

बस नीचे दिए गए फॉर्म को भरें, हालांकि आप चाहते हैं।

कोई भी नाम लिखें

यदि आप एप्लिकेशन बनाते हैं, तो आपको रीडायरेक्ट की गई वेबसाइट से ’कीज़’ भाग दिखाई देगा।

मैंने इस एप्लिकेशन को हटा दिया है, इसलिए कोशिश करने का कोई मतलब नहीं है।

आपको बस Key एक्सेस की ’को कॉपी करना होगा और अपने जावास्क्रिप्ट चर _ ACCESS_KEY’ में असाइन करना होगा।

हम खोज एपीआई का उपयोग करेंगे।

यहाँ परिदृश्य है। सभी लोगों के अलग-अलग हित हैं। इसलिए मैं पहले उनकी रुचि पूछना चाहता हूं, और फिर मैं उस छवि को Unsplash API का उपयोग करके खोजूंगा। उसके बाद, मैं हर 12 घंटे (एक ही कीवर्ड, अलग तस्वीर) छवि को अपडेट करता रहूंगा।

तो AJAX फंक्शन नीचे की तरह होगा।

और आपकी रुचि टाइप करने के बाद यह फ़ंक्शन कहा जाएगा।

फिर, जैसा कि आप उम्मीद कर सकते हैं, हमें फिर से डेवलपर बनने की आवश्यकता है।

केस 1-1: पहली बार
केस 1-2: नाम के बाद
केस 2: आप अपनी रुचि टाइप करने के बाद
केस 3: 12 घंटे बाद।

ठीक है, एक-एक करके तय करते हैं।

केस 1-1 में, हमें केवल छवि से संबंधित सभी भाग छिपाने की आवश्यकता है। इससे छोड़ो।

केस १-२ में, बस ब्याज के लिए इनपुट फॉर्म दिखाता है।

केस 2 में, AJAX को कॉल करें और छवि जानकारी को बचाएं।

केस 3 में, बस समाप्ति का समय 12 घंटे निर्धारित करें और यदि कुकी खाली है, तो AJAX के अनुरोध को फिर से कॉल करें।

कीवर्ड: लंदन

हाँ, यह काम कर रहा है।

चरण 3: अंतिम स्पर्श

फोटोग्राफर को क्रेडिट देना अनिवार्य नहीं है, लेकिन क्यों नहीं?

हम कोड की एक और लाइन लिख सकते हैं और फोटोग्राफर के नाम और पेज को टॉप-लेफ्ट साइड में क्रेडिट कर सकते हैं।

ताकि जब आप पहली बार कुकी की जांच करें तो हम फोटोग्राफर की जानकारी का उपयोग कर सकें।

एक और बात, अगर कोई अपनी रुचि बदलना चाहता है तो क्या होगा?

आइए उस कार्यक्षमता को जोड़ें जो लोगों को उनकी रुचि को फिर से टाइप करने की अनुमति देता है।

इससे पहले कि आप बटन पर क्लिक करें

तुम वहाँ जाओ। यदि आप "एक नई रुचि चुनें" बटन पर क्लिक करते हैं, तो यह उस इनपुट फ़ॉर्म को खोलने के लिए ट्रिगर होगा जहाँ आपने अपनी रुचि पहले टाइप की थी।

आप बटन पर क्लिक करने के बाद

चरण 4: अपना खुद का उत्पाद बनाएं।

मैं सिर्फ यह चाहता हूं कि आप शुरुआत से अंत तक इस प्रक्रिया का अनुभव करें। फिर भी, आपको वास्तव में उस कौशल को अवशोषित करने की आवश्यकता है जिसे आपने सीखा है।

कुछ कार्य होने चाहिए जो आपको लगता है कि यादृच्छिक चित्र चुनने के तरीके को शामिल करना अच्छा होगा। या आप सोच सकते हैं कि मेरे कुछ कोड अक्षम हैं। आप बेहतर कोड के साथ उसी उत्पाद के अपने संस्करण में सुधार कर सकते हैं।

गुड लक और हार मत मानो!

पूरा संस्करण यहां पाया जा सकता है: https://github.com/thejungwon/MyChromeExtension

यह कहानी नोटवर्थी में प्रकाशित हुई है, जहाँ हर दिन 10,000+ पाठक उन लोगों और विचारों के बारे में जानने के लिए आते हैं जिन्हें हम प्यार करते हैं।

जर्नल टीम द्वारा चित्रित अधिक उत्पाद और डिजाइन कहानियों को देखने के लिए हमारे प्रकाशन का पालन करें।