लेआउट मॉड्यूल एक्सट्रैक्टर

अच्छे layout blocks दूसरे लोगों के लेखों के अंदर फँसे हैं

WeChat Official Account चलाने वाला कोई भी व्यक्ति layout blocks को धीमे तरीके से इकट्ठा करता है। आप एक सुंदर SVG title card, एक साफ़-सुथरा "follow us" panel, एक तरफ़ रंगीन tab वाला एक section header वाला लेख पढ़ते हैं, और सोचते हैं: मुझे वह संरचना चाहिए। तो आप पूरे लेख को अपने editor में copy करते हैं, फिर बीस मिनट उस एक block को छोड़कर बाकी सब हटाने में बिताते हैं, प्रार्थना करते हुए कि कोई आवारा <span> न कट जाए जो SVG को ढहा दे। WeChat की SVG typography कुख्यात रूप से नाज़ुक है — एक ग़लत जगह attribute, एक image जिसे आपने गलत जगह resize किया, और card आधे पाठकों के फ़ोन पर एक टूटे box के रूप में render होता है। जो blocks आप चाहते हैं वे असली, पुन: उपयोग योग्य, और ठीक वहीं HTML में बैठे हैं, पर एक को साफ़-सुथरे तरीके से उठाकर रखने का कोई तरीका नहीं।

दर्द का दूसरा आधा हिस्सा स्वामित्व है। स्पष्ट जवाब है 秀米 या 135编辑器 जैसा एक template editor: विशाल लाइब्रेरी, drag-and-drop, वाकई शक्तिशाली। पर assets उनके cloud में रहते हैं, एक अकाउंट के पीछे, और अक्सर एक membership tier के पीछे। आपका सावधानी से जोड़ा गया style kit एक फ़ोल्डर नहीं जो आपका हो — यह एक login है जिसे आप किराए पर लेते हैं। अगर आप एक block किसी साथी को सौंपना चाहते हैं, एक बार में हर card पर एक रंग बदलना चाहते हैं, या बस उन पाँच headers की एक निजी लाइब्रेरी रखना चाहते हैं जिन्हें आप वाकई दोबारा इस्तेमाल करते हैं, आप किसी और के उत्पाद के भीतर किसी और की शर्तों पर काम कर रहे हैं।

यह टूल उल्टा तरीका अपनाता है। आप एक लेख (या कोई भी समृद्ध सामग्री, या कच्चा HTML) paste करते हैं और यह markup को सीधे आपके ब्राउज़र में parse करता है, हर पुन: उपयोग योग्य styled block को खींच निकालते हुए — SVG typography cards, titled section headers, follow-us cards, styled quotes, dividers — अपने खुद के स्वतंत्र module के रूप में। वहाँ से आप हर एक को सीधे edit करते हैं: एक card के अंदर image बदलें, इसे फिर से रंगें, इसे WeChat editor या किसी भी rich-text box में paste करने के लिए तैयार साफ़ inline HTML के रूप में copy करें, और इसे एक लोकल लाइब्रेरी में सहेजें जिसे आप JSON के रूप में export कर सकते हैं। कुछ भी अपलोड नहीं होता, कोई अकाउंट नहीं, और पेज लोड होने के बाद यह ऑफ़लाइन काम करता रहता है। एक ईमानदार सीमा पहले ही: यह एक लेख को उसके URL से fetch नहीं कर सकता — ब्राउज़र mp.weixin.qq.com पर cross-site requests को रोकते हैं, इसलिए input हमेशा copy-paste है।

इसे अलग क्या बनाता है

• लोकल-पहले, कुछ अपलोड नहीं। parsing ब्राउज़र में DOMParser के साथ होती है। जो लेख आप paste करते हैं वह कभी आपकी मशीन नहीं छोड़ता — कोई सर्वर नहीं, कोई अकाउंट नहीं, कोई backend नहीं।
• प्रति-module निष्कर्षण। हर styled block एक अलग, स्व-निहित module के रूप में निकलता है, बजाय उलझे markup की एक दीवार के जिसे आपको हाथ से छाँटना पड़े।
• image बदलें, जगह पर। एक card के अंदर तस्वीर को एक नई अपलोड करके या एक image URL paste करके बदलें — उस आसपास की SVG संरचना को छुए बिना जो इसे नाज़ुक बनाती है।
• हर जगह एक बार में फिर से रंगें। एक module जो कोई भी रंग इस्तेमाल करता है उस पर click करें और इसे पूरे block पर एक चाल में बदलें, ताकि एक card hex codes की खोज के बिना आपके ब्रांड से मेल खाए।
• साफ़ inline-HTML copy। एक click module को inline HTML के रूप में (Clipboard API के ज़रिए) आपके clipboard पर रखता है, सीधे WeChat editor, एक CMS, या किसी भी rich-text field में paste करने के लिए तैयार।
• एक लाइब्रेरी जो आपकी है। modules को local storage में सहेजें और पूरे संग्रह को JSON के रूप में export या import करें — एक असली, portable asset kit, न कि एक login जिसे आप किराए पर लेते हैं।
• पृथक previews। हर module Shadow DOM के भीतर render होता है, इसलिए एक block की styles दूसरे में लीक नहीं हो सकतीं और preview आपको ठीक वही दिखाता है जो आप paste करेंगे।
• लोड होने के बाद ऑफ़लाइन काम करता है। पेज लोड होने के बाद, निकालने, edit करने, या copy करने के लिए कोई कनेक्शन नहीं चाहिए।

IMG.DIY बनाम अन्य layout टूल

इंसाफ़ में, यह एक template editor का विकल्प नहीं है, और यह होने का दिखावा नहीं करता। 秀米, 135编辑器, और i排版 विशाल template लाइब्रेरी, लाइव drag-and-drop layout, और सालों की पॉलिश वाले परिपक्व उत्पाद हैं — अगर आप शून्य से एक समृद्ध लेख बना रहे हैं, तो वहीं आप जाते हैं, और वे अपनी प्रतिष्ठा कमाते हैं। जो वे आपको नहीं देते वह है आपके दोबारा इस्तेमाल किए जाने वाले विशिष्ट blocks का एक निजी, portable फ़ोल्डर, बिना login के edit करने योग्य और आपकी मशीन से कुछ छोड़े जाने से मुक्त। यह टूल एक extractor और organizer है, editor नहीं: यह उन blocks को जिन्हें आप बाहर सराहते हैं उन modules में बदलता है जिनके आप मालिक हैं, फिर से रंगते हैं, फिर से image देते हैं, और कहीं भी paste करते हैं। रचने के लिए बड़े editors इस्तेमाल करें; टुकड़ों को रखने के लिए इसे इस्तेमाल करें।