🗜️ 👩‍🔧 🐃 ब्राउज़र स्नोफ्लेक ड्राइंग टूल 👩🏽‍🤝‍👨🏾 📫 🅱️

डिजाइन विषय "हबराब्र" ।

2 दिन पहले मैंने स्नोफ्लेक्स को पेंट करने के लिए एक उपकरण का विकास समाप्त कर दिया, इसे ग्रीनहाउस स्थानीय परिस्थितियों में डिबग किया और एक लंबी यात्रा पर जाने के लिए तैयार था। लेकिन खुले इंटरनेट पर "प्रोजेक्ट" के लॉन्च को 2 बार स्थगित करना पड़ा। सबसे पहले, जब किसी तृतीय-पक्ष साइट के साथ एकीकरण किया जाता है, तो क्रॉस-डोमेन AJAX अनुरोधों ने POST विधि (और मेरे सभी के लिए पर्याप्त नहीं है) का उपयोग करके काम करने से इनकार कर दिया, फिर एसिंक्रोनस डेटा और प्रस्तुति लोडिंग धीमी चैनल पर glitches साबित हुई। अब सब कुछ तय हो गया है, निर्धारित किया गया है और खुद के संबंध में ध्यान की अभिव्यक्तियों की अपेक्षा करता है।

मैं सहयोग की पेशकश ~~करने के लिए~~ विकास, योजनाओं, ~~बेशर्मी पीआर के~~ बारे में बात करूंगा। अब बहुत सारे पाठ जाएंगे, और नीचे एक और तस्वीर है।

पृष्ठभूमि जो इतिहास में जाती है

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

मैंने दिए गए मौसम की परिस्थितियों के अनुसार एक स्नोफ्लेक जनरेटर विकसित करने के लिए निकाल दिया, इस बारे में बहुत सारी जानकारी फिर से पढ़ी और यहां तक कि दिए गए मापदंडों के अनुसार बर्फ के क्रिस्टल को खींचने में कुछ प्रगति की ( पहले स्क्रीनशॉट देखें)। लेकिन तब मुझे महसूस हुआ कि मेरे पास सही बर्फ़ के टुकड़ों से भरा जनरेटर बनाने का समय नहीं है और मैंने खुद को एक संपादक तक सीमित रखने का फैसला किया। इसके अलावा, यह उपयोगकर्ता के लिए अधिक मजेदार है, क्योंकि इसमें उसकी व्यक्तिगत भागीदारी शामिल है। तो एक इंटरैक्टिव पोस्टकार्ड विकसित करने का विचार पैदा हुआ था। इसके बाद - एक अलग पोस्टकार्ड, और किसी अन्य परियोजना के हिस्से के रूप में नहीं। वैसे, पीडीएफ से संबंधित परियोजना, मेरे पास छुट्टियों से पहले लॉन्च करने का समय नहीं था।

विकास के शुरुआती चरणों में, स्नोफ्लेक ड्राइंग टूल एक एसवीजी छवि थी जिसमें एक अंतर्निहित जावास्क्रिप्ट लाइब्रेरी थी। बेशक, यह सभी ब्राउज़रों में काम नहीं करता था, इसलिए एक बिंदु पर मैं राफेल ग्राफिक फ्रेमवर्क में स्थानांतरित हो गया, जिसे व्यापक रूप से हमारे संकीर्ण सर्कल में जाना जाता था। वेब डेवलपर के रोजमर्रा के जीवन को और उज्ज्वल बनाने के लिए, jQuery जुड़ा हुआ था। सर्वर के लिए AJAX अनुरोधों के लिए jQuery जिम्मेदार बन गया जहां डेटा संग्रहीत है और DOM के साथ प्लेटफ़ॉर्म-स्वतंत्र जोड़तोड़ के लिए। राफेल को पूरे वेक्टर के एक ब्राउज़र-स्वतंत्र प्रतिपादन और कैनवास पर उपयोगकर्ता के माउस के साथ वस्तुओं की बातचीत के साथ सौंपा गया था।

राफेल को काफी हद तक खत्म करना पड़ा, क्योंकि क्रोम में कैनवास को अपडेट करने में समस्याएं थीं (वहां WebKit के लिए एक विशेष बैसाखी है, लेकिन यह WebKit पर सभी ब्राउज़र के संस्करणों के लिए काम नहीं करता है) और <ग्राफिक टैग में संलग्न ग्राफिक ऑब्जेक्ट्स के ढेर में तत्वों की स्थिति को बदलना नहीं चाहता है। > (और ये केवल लिंक में ही नहीं हैं, बल्कि वे भी हैं जिन्हें टूलटिप दिया गया है)। पहले ब्राउज़र इंजन को परिभाषित करने वाली नियमित अभिव्यक्ति को समायोजित करके इलाज किया गया था। दूसरा है href और टाइटल पैरामीटर की खाली लाइनों को रीसेट करते समय <a> स्वचालित विलोपन जोड़कर। एक अच्छे तरीके से, चलती वस्तुओं के तरीकों को स्वयं समाप्त करना आवश्यक होगा, लेकिन वहां मैं थोड़ा खून नहीं बहाऊंगा।

वैसे, एसवीजी में <a> टैग एडिट " बुकमार्क " बटन के सही इनिशियलाइज़ेशन के साथ हस्तक्षेप करता है। मैंने इसका इस्तेमाल ड्राइंग के परिणामों को साझा करने के साथ साइकिल बनाने के लिए नहीं किया।

अब POST विधि का उपयोग करके क्रॉस-डोमेन AJAX अनुरोधों के बारे में। दुर्भाग्य से, वे उपयोगकर्ता सुरक्षा सुनिश्चित करने के लिए ब्राउज़र द्वारा समर्थित नहीं हैं। GET विधि में इस तरह के प्रतिबंध नहीं हैं, लेकिन इसकी वास्तविक लंबाई सीमा है। डी जुरे, यह नहीं होना चाहिए, हालांकि, कुछ ब्राउज़र, हम अपनी उंगलियों को प्रहार नहीं करेंगे, हमें 2 हजार से अधिक वर्णों के लिंक के लिए अनुरोध करने की अनुमति नहीं देंगे। और किसी तरह पतों में बड़ी मात्रा में डेटा ड्राइव करना बदसूरत है। इसलिए, यह POST को जारी रखने के लिए डोमेन के भीतर तय किया गया था, और जब आवेदन को तीसरे पक्ष की साइट पर रखा जाता है, तो डेटा को टुकड़ों में काट लें, इसे GET विधि (JSONP तकनीक का उपयोग करके) में स्थानांतरित करें और केवल तभी जब सर्वर पर अनुरोध को पूरा करने के लिए अंतिम टुकड़ा स्थानांतरित करें।

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

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

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

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

"व्हाइट रैबिट" आने वाले वर्ष का मुख्य विषय है।

योजनाओं

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

UPD ₁ : ~~अब एप्लिकेशन का उपयोग करते समय~~

UPD ₂ : कल, जब एक साथी के रूप में पंजीकरण के बिना किसी तृतीय-पक्ष साइट पर एप्लिकेशन का उपयोग करते हुए, आगंतुकों को मेरी साइट पर छवियों के लिंक दिए गए थे। इस गलतफहमी को दूर किया। और अधिक। यदि कोई अपने दम पर कोड पोस्ट करने की योजना बना रहा है या सिर्फ प्रोजेक्ट के बारे में समाचार प्राप्त करना चाहता है, तो मुझे yuriyapostol@gmail.com पर लिखें "मुझे स्नेझिंका प्रोजेक्ट के बारे में समाचार प्राप्त करना है" या "मैं स्नोफ्लेक एपीआई में परिवर्तन के बारे में जानना चाहता हूं"।

UPD ₃ : आपकी वेबसाइट पर एप्लिकेशन एम्बेड करने के लिए कोड:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="http://apostolstudio.com/lab/snowflake/raphael-apos.min.js" type="text/javascript" charset="utf-8"></script> <script src="http://apostolstudio.com/lab/snowflake/snowflake.js" type="text/javascript" charset="utf-8"></script> <div id="snowflake_container"><div id="snowflake_paper">...</div></div>

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

 <script src="http://apostolstudio.com/lab/snowflake/snowflake.js#theme=Rabbit&flake=kOQxOPNwnQZS" type="text/javascript" charset="utf-8"></script>

ब्राउज़र स्नोफ्लेक ड्राइंग टूल

पृष्ठभूमि जो इतिहास में जाती है

योजनाओं

More articles: