कुछ समय पहले मैंने Apple संग्रह शुरू किया था। मैं बचपन से ही Apple हार्डवेयर (और इसके सौंदर्यशास्त्र) का अनुसरण कर रहा हूं, लेकिन उस समय मेरे पास Mac खरीदने के लिए पैसे नहीं थे।
मुझे अपना पहला मैक तब मिला जब मैं 19 साल का था। यह एक आईबुक 700 मेगाहर्ट्ज था, जिसे ब्राजील में ईबे जैसी वेबसाइट पर अधिग्रहित किया गया था। पैसा फ्लैश प्रोजेक्ट से आया है।
कनाडा में कुछ वर्षों तक रहने के बाद, मेरे पास शौक पर खर्च करने के लिए कुछ अतिरिक्त पैसे हैं। ज्यादातर समय मैं क्रेगलिस्ट पर लोगों से उपकरण खरीदता हूं।
कुछ लैपटॉप और iDevices के बाद, मैंने फैसला किया कि मुझे अपने iThings के बारे में जानकारी एकत्र करना शुरू कर देना चाहिए। शुरुआत में, मैंने एक Gist बनाया जिसमें मॉडल, सीरियल नंबर, मुझे डिवाइस कैसे मिला, न्यूनतम/अधिकतम OS, इत्यादि।
सूची बड़ी और बड़ी होती जा रही थी, और सामग्री गड़बड़ लगने लगी थी। मैंने सोचा था कि इस सामग्री को किसी वेबसाइट पर दिखाना सही होगा, और मुझे किसी डेवलपर को नियुक्त करने की आवश्यकता नहीं थी :D
सबसे पहले, मैंने फैसला किया कि मैं अपने डेटा को एक SQL डेटाबेस में व्यवस्थित करूंगा, जिसमें विभिन्न कॉलम और टेबल में जानकारी वितरित की जाएगी। उसके बाद, मैं अपने यूआई को पॉप्युलेट करने के लिए आवश्यक डेटा प्रदान करने के लिए एक ग्राफक्यूएल एपीआई बनाउंगा - शायद रिएक्ट में लिखा गया, बेबेल के साथ संकलित और वेबपैक के साथ पैक किया गया।
पिछले पैराग्राफ को जोर से पढ़ते हुए, आप देख सकते हैं कि कई प्रौद्योगिकियां हैं, और मैंने बैकएंड भाषा और यूआई विवरण जैसे एसएएसएस या स्टाइल-घटकों को भी नजरअंदाज कर दिया है। यह सब थोड़ा अटपटा लगा जब मेरा अंतिम लक्ष्य एक अच्छे डिजाइन में वस्तुओं की सूची दिखा रहा था।
कहा जा रहा है, मैंने सोचा कि मैं इस सामग्री को बिना कैसे वितरित कर सकता हूं:
- एपीआई या कोई बैकएंड कार्य
- कोई भी JS फ्रेमवर्क/लाइब्रेरी
- कोई भी JS टूलिंग (वेबपैक, बैबेल, आदि)
- कोई भी सीएसएस काम
इन बाधाओं के ऊपर, मेरे पास कुछ खिंचाव लक्ष्य थे:
- अच्छी पहुंच वाली वेबसाइट बनाएं
- एक ऐसी वेबसाइट बनाएं जो पुराने ब्राउज़र पर काम करे, क्योंकि मेरे पास Mac OS 9.2 चलाने वाले कंप्यूटर और iOS 3 चलाने वाले iDevices हैं
चुनौती स्वीकार की गई। एक index.html, कुछ वैनिला JS फ़ाइलें, और कोई कस्टम CSS नहीं। मैं आपके साथ साइट बनाने का अनुभव साझा करना चाहता हूं।
टीएल, डीआर:
- अंतिम वेबसाइट
- स्रोत कोड
आइए बिंदु दर बिंदु बाधाओं के बारे में बात करते हैं:
कोई API या कोई बैकएंड कार्य नहीं
कुछ समय पहले मैंने स्टीन नामक सास उत्पाद देखा था। आप अपना डेटा Google पत्रक दस्तावेज़ के अंदर बनाते हैं और वे आपको आपके डेटा के साथ एक समापन बिंदु प्रदान करते हैं। उनका पुस्तकालय हैंडलबार की तरह काम करता है, और यह मेरे उपयोग के मामले के लिए एकदम सही लग रहा था:
<div data-stein-url="https://api.steinhq.com/v1/storages/5cc158079ec99a2f484dcb40/Sheet1" data-stein-limit="2">
<div>
<h1>{{title}}</h1>
<h6>By {{author}}</h6>
{{content}}
Read on <a href="{{link}}">Medium</a>
</div>
</div>
कोई JS फ्रेमवर्क/लाइब्रेरी और टूलिंग नहीं
मैंने इस परियोजना में एक ढांचा या पुस्तकालय जोड़ने से बचने का फैसला किया क्योंकि उपयोग के मामले में एक की आवश्यकता नहीं थी। इस पृष्ठ पर सभी जेएस इंटरैक्शन काफी सरल हैं (मेनू दिखाएं/छुपाएं, एक मोडल स्क्रीन खोलें, परमालिंक्स को संभालें)।
चूंकि मैं एक फ्रेमवर्क/लाइब्रेरी का उपयोग नहीं कर रहा था, इसलिए मैं वेबपैक और बैबेल को जोड़ने से बच सकता था। प्रीसेट और लोडर में खुदाई करने की आवश्यकता नहीं है।
पी.एस. आप तर्क दे सकते हैं कि मैं create-react-app या Next.js चुन सकता था और इन सभी समस्याओं को हल कर सकता था, लेकिन नहीं।
कोई CSS कार्य नहीं
मुझे सीएसएस लिखना पसंद है, खासकर जब मैं एसएएसएस का उपयोग कर सकता हूं, लेकिन मैंने यहां कोई सीएसएस नहीं लिखने का फैसला किया। मेरे पास ऐसा करने से बचने के कुछ अच्छे कारण थे:
- मेरे मन में कोई डिज़ाइन नहीं था, और इस तथ्य के बावजूद कि मैं कुछ अच्छा दिखने वाला कर सकता था, मैं इसमें समय और ऊर्जा नहीं लगाना चाहता था
- मैं Tailwind CSS का उपयोग करना चाहता था
यदि आपने टेलविंड सीएसएस के बारे में कभी नहीं सुना है, तो कृपया यह न सोचें, "यह बूटस्ट्रैप का सिर्फ एक विकल्प है।" यहां उनकी वेबसाइट से एक अच्छी, संक्षिप्त व्याख्या दी गई है:
<ब्लॉकक्वॉट>
अधिकांश सीएसएस ढांचे बहुत ज्यादा करते हैं।
…
पूर्व-डिज़ाइन किए गए घटकों के बजाय, टेलविंड निम्न-स्तरीय उपयोगिता वर्ग प्रदान करता है जो आपको अपने HTML को छोड़े बिना पूरी तरह से कस्टम डिज़ाइन बनाने देता है।
यह काफी हद तक सच है। एक त्वरित खोज आपको Tailwind CSS के साथ कई वेब ऐप्स "पुनर्निर्मित" देती है:
- व्हाट्सएप
- टेलीग्राम
- फेसबुक
- रेडिट
- यूट्यूब
- सुस्त
- कॉइनबेस
- गीथब
- ट्रेलो
- ट्विटर
- नेटलिफ़ाई
अच्छी पहुंच वाली वेबसाइट बनाएं
पिछले महीने मैंने डेक यूनिवर्सिटी में एक्सेसिबिलिटी कोर्स करना शुरू किया। उनकी सामग्री बहुत अच्छी है और इसने मुझे याद दिलाया कि HTML डिफ़ॉल्ट रूप से पहुंच योग्य है . सिमेंटिक HTML संरचना का उपयोग करके और कीबोर्ड नेविगेशन और रंग कंट्रास्ट जैसी बुनियादी चीज़ों का परीक्षण करके आप कई बाधाओं को समाप्त कर देते हैं जो विकलांग लोगों को आपकी सामग्री से दूर ले जाती हैं।
मैं एक एक्सेसिबिलिटी विशेषज्ञ नहीं हूं, लेकिन यहां कुछ एक्सेसिबिलिटी-संबंधित चीजें हैं जिन पर मैंने इस वेबसाइट के लिए काम किया है:
- स्टाइलशीट अक्षम करें:स्टाइलशीट को अक्षम करके आप यह सुनिश्चित कर सकते हैं कि आपकी सामग्री तार्किक/संरचनात्मक तरीके से चल रही है।
- VoiceOver:VoiceOver macOS और iOS में शामिल है। इसका उपयोग करना बहुत आसान है, और इसके साथ प्रयोग करके आप इस बात को बेहतर ढंग से समझ सकते हैं कि लोग इस सुविधा का उपयोग कैसे करते हैं।
- मॉडल:मॉडल समस्याग्रस्त हो सकते हैं। मैंने Ire Aderinokun के दृष्टिकोण का अनुसरण करने का निर्णय लिया।
- कुल्हाड़ी:एक्सटेंशन डब्ल्यूसीएजी 2 और धारा 508 पहुंच योग्यता नियमों के लिए एक एक्सेसिबिलिटी चेकर है।
यह सही नहीं है -- कुछ चीजें हैं जिन पर मैंने अपनी साइट के लिए काम नहीं किया, जैसे मुख्य सामग्री में एक स्किप लिंक जोड़ना। यदि आप उत्सुक हैं, तो सभी परिवर्तनों के साथ पुल अनुरोध यहां दिया गया है।
ऐसी वेबसाइट बनाएं जो पुराने ब्राउज़र में काम करे
मैं इस उद्देश्य को प्राप्त नहीं कर सका क्योंकि स्क्रिप्ट और शैलियों पर मेरा कोई नियंत्रण नहीं था। हालांकि, यह असंभव नहीं लगता। कुछ चीज़ें जो मैंने देखीं:
- Expedite (स्टीन क्लाइंट) फ़ेच का उपयोग करता है, जिसे केवल Safari 10 में जोड़ा गया था। उनके सर्वर से अनुरोध को संभवतः XMLHttpRequest से बदला जा सकता है।
- Tailwind कई तत्वों में Flexbox का उपयोग करता है। सफारी ने केवल आईओएस 7 में फ्लेक्सबॉक्स का समर्थन करना शुरू कर दिया है। हो सकता है कि मैं उनके मौजूदा तत्वों के लिए एक सभ्य रूप प्राप्त करने के लिए कुछ गुण लिख सकूं।
- SSL प्रमाणपत्र पुराने ब्राउज़र के लिए एक समस्या हो सकती है।
निष्कर्ष
इस वेबसाइट को बनाना बेहद मजेदार रहा। इस तरह की पालतू परियोजना होने से मुझे तकनीक के साथ काम करने का एक अच्छा कारण मिला जिसका मैं अपने काम में उपयोग नहीं करता। हो सकता है कि भविष्य में, Stein और/या TailwindCSS किसी फीचर का प्रोटोटाइप बनाने या हैकथॉन प्रोजेक्ट बनाने में उपयोगी हो।
तथ्य यह है कि मैंने अपनी परियोजना में "बाधाओं" को जोड़ा, मुझे बॉक्स के बाहर सोचने पर मजबूर कर दिया। भले ही मैं अपने सभी उद्देश्यों को प्राप्त नहीं कर पाया, लेकिन इससे मुझे यह समझने में मदद मिली कि सभी टुकड़े कैसे जुड़े हैं।
मैं आपको अलग तकनीक के साथ खेलने का मौका देने के लिए ऐसा कुछ करने की पूरी तरह से अनुशंसा करता हूं। इसे Apple संग्रह होने की आवश्यकता नहीं है -- आप अपनी पसंदीदा पुस्तकों या आपके द्वारा की गई सर्वोत्तम यात्राओं को सूचीबद्ध करने के लिए एक साइट बना सकते हैं। ऐसे में यात्रा लक्ष्य से ज्यादा मायने रखती है।
उत्सुकतावश, मैंने क्लॉकिफ़ाइ का उपयोग करके और कोडिंग के बीच, डेटा बनाने, परीक्षण करने और इस पोस्ट को लिखने के बीच अपना समय ट्रैक किया, मैंने इस पर 13 घंटे काम किया है।
मेरे ब्लॉग पर भी पोस्ट किया गया। ट्विटर पर मेरा अनुसरण करें