एक शक्तिशाली GrapesJS संपादक का निर्माण केवल अधिक ब्लॉक और घटकों को जोड़ने के बारे में नहीं है। सर्वश्रेष्ठ विज़ुअल संपादकों को तेज़ नेविगेशन, विश्वसनीय उत्तरदायी उपकरण, स्वचालित पुनर्प्राप्ति और यथार्थवादी सामग्री की भी आवश्यकता होती है।
यही कारण है कि हमने UnStudio बनाया - एक नया प्लगइन स्टूडियो जो GrapesJS का उपयोग करने वाले डेवलपर्स के लिए व्यावहारिक उपकरण बनाने पर केंद्रित है।
आज, हम चार नए GrapesJS प्लगइन्स पेश कर रहे हैं जो विज़ुअल संपादकों के निर्माण और उपयोग करते समय चार सामान्य समस्याओं को हल करने के लिए डिज़ाइन किए गए हैं:
- कमांड पैलेट - अपने संपादक को तेजी से नेविगेट और नियंत्रित करें
- उत्तरदायी पैक — ब्रेकप्वाइंट और उत्तरदायी शैलियों का प्रबंधन करें
- ऑटोसेव और रिस्टोर - उपयोगकर्ताओं को अपना काम खोने से बचाएं
- ऑटोफिल - खाली लेआउट को यथार्थवादी पृष्ठों में बदलें
आओ हम इसे नज़दीक से देखें।
अनस्टूडियो क्या है?
UnStudio एक प्लगइन स्टूडियो है जो GrapesJS के रोजमर्रा के अनुभव को बेहतर बनाने पर केंद्रित है।
हमारा लक्ष्य प्लगइन्स बनाना नहीं है जो केवल एक संपादक में अधिक सुविधाएँ जोड़ते हैं। इसके बजाय, हम उन छोटे विवरणों में रुचि रखते हैं जो एक दृश्य संपादक को उपयोग करने के लिए काफी बेहतर महसूस कराते हैं।
एक अच्छे संपादक को उपयोगकर्ताओं को इस तरह के सवालों के जवाब देने में मदद करनी चाहिए:
- मैं इस घटक को जल्दी से कैसे ढूंढूं?
- यह उत्तरदायी शैली कहाँ से आई?
- यदि ब्राउज़र क्रैश हो जाए तो क्या होगा?
- मैं इस खाली टेम्पलेट को यथार्थवादी कैसे बना सकता हूं?
चार पहले UnStudio प्लगइन्स बिल्कुल इन्हीं समस्याओं के आसपास बनाए गए हैं।
1. GrapesJS के लिए कमांड पैलेट
आधुनिक डेवलपर टूल ने सॉफ़्टवेयर के साथ हमारे इंटरैक्ट करने के तरीके को बदल दिया है।
मेनू के माध्यम से खोज करने के बजाय, उपयोगकर्ता तेजी से ⌘K या Ctrl+K दबाने की उम्मीद करते हैं, जो उन्हें चाहिए उसे टाइप करें और तुरंत एक कार्रवाई निष्पादित करें।
GrapesJS के लिए कमांड पैलेट इस वर्कफ़्लो को आपके विज़ुअल एडिटर में लाता है।
कमांड पैलेट - GrapesJS के लिए K
ब्लॉक, कमांड और घटकों को तेज़ी से ढूंढें
कमांड पैलेट आपके GrapesJS प्रोजेक्ट के लिए एक एकीकृत खोज इंटरफ़ेस प्रदान करता है।
उपयोगकर्ता खोज सकते हैं:
- ब्लॉक
- अवयव
- आदेश
- पेज
- कस्टम कार्रवाइयां
यह फजी खोज और कीबोर्ड नेविगेशन का भी समर्थन करता है, जिससे पैनल के बीच लगातार आगे बढ़े बिना संपादक के साथ काम करना संभव हो जाता है।
कस्टम GrapesJS एप्लिकेशन बनाने वाले डेवलपर्स के लिए, प्लगइन को कस्टम खोज स्रोतों के साथ भी बढ़ाया जा सकता है।
यह क्यों मायने रखता है
जैसे-जैसे एक GrapesJS परियोजना बढ़ती है, इसके साथ ब्लॉक, घटकों और कमांड की संख्या बढ़ती है।
एक कमांड पैलेट उस जटिलता को नेविगेट करने का एक स्केलेबल तरीका प्रदान करता है।
कम क्लिक करना। कम खोज। अधिक भवन।
2. GrapesJS के लिए उत्तरदायी पैक
उत्तरदायी डिजाइन एक दृश्य संपादक के निर्माण के सबसे कठिन भागों में से एक है।
एक पृष्ठ डेस्कटॉप पर एकदम सही दिख सकता है और एकल ब्रेकपॉइंट-विशिष्ट शैली के कारण मोबाइल पर पूरी तरह से अलग दिख सकता है।
समस्या अक्सर बदलाव नहीं कर रही है - यह समझ रही है कि परिवर्तन कहां से आया है।
उत्तरदायी पैक GrapesJS अधिक शक्तिशाली ब्रेकपॉइंट और डिवाइस-प्रबंधन वर्कफ़्लो देता है।
उत्तरदायी पैक — GrapesJS के लिए ब्रेकपॉइंट प्रबंधक
प्रतिक्रियाशील परिवर्तन अधिक स्पष्ट रूप से देखें
उत्तरदायी पैक कई उपकरणों और ब्रेकपॉइंट के साथ काम करने के लिए उपकरण जोड़ता है, जिनमें शामिल हैं:
- ब्रेकपॉइंट-विशिष्ट ओवरराइड संकेतक
- एकाधिक डिवाइस पूर्वावलोकन
- सिंक्रनाइज़ स्क्रॉलिंग
- कस्टम ब्रेकप्वाइंट
- डिवाइस प्रीसेट
- पोर्ट्रेट और लैंडस्केप मोड
- डिवाइस फ्रेम
- ब्रेकपॉइंट प्रबंधन
डेस्कटॉप, टैबलेट और मोबाइल के बीच स्विच करने और यह याद रखने की कोशिश करने के बजाय कि क्या बदल गया है, आप सीधे उत्तरदायी राज्यों की तुलना कर सकते हैं।
वास्तविक उत्तरदायी वर्कफ़्लोज़ के लिए बनाया गया
डिफ़ॉल्ट GrapesJS डिवाइस मैनेजर बुनियादी परियोजनाओं के लिए उपयोगी है।
लेकिन बड़े संपादकों को अक्सर अधिक दृश्यता और नियंत्रण की आवश्यकता होती है।
उत्तरदायी पैक उन स्थितियों के लिए डिज़ाइन किया गया है - खासकर जब आप एक उत्पादन-ग्रेड वेबसाइट बिल्डर या सास संपादक का निर्माण कर रहे हों।
उत्तरदायी संपादन को किसी रहस्य को डीबग करने जैसा महसूस नहीं होना चाहिए।
3. GrapesJS के लिए ऑटोसेव और रिस्टोर करें
प्रत्येक दृश्य संपादक को अंततः एक ही समस्या का सामना करना पड़ता है:
कोई अपना काम खो देता है।
ब्राउज़र क्रैश हो जाता है।
टैब बंद हो जाता है।
कंप्यूटर की बैटरी खत्म हो जाती है।
कोई पृष्ठ गलती से ताज़ा हो जाता है.
पुनर्प्राप्ति तंत्र के बिना, काम के घंटे गायब हो सकते हैं।
ऑटोसेव और रिस्टोर GrapesJS में एक स्थानीय क्रैश-रिकवरी परत जोड़ता है।
ऑटोसेव और रिस्टोर - GrapesJS के लिए क्रैश रिकवरी
स्वचालित स्थानीय बैकअप
प्लगइन स्वचालित रूप से IndexedDB का उपयोग करके संपादक स्थिति के स्नैपशॉट बनाता है।
उपयोगकर्ता पिछले संस्करणों तक पहुंच सकते हैं और कुछ गलत होने पर अपने काम को पुनर्स्थापित कर सकते हैं।
पुनर्प्राप्ति प्रणाली प्रदान करती है:
- स्वचालित पृष्ठभूमि स्नैपशॉट
- संस्करण इतिहास
- स्नैपशॉट टाइमस्टैम्प
- घटक आँकड़े
- मैनुअल स्नैपशॉट
- कार्यक्षमता पुनर्स्थापित करें
- बहाली के बाद पूर्ववत करें
- संपादक को फिर से खोलने के बाद पुनर्प्राप्ति
- कीबोर्ड शॉर्टकट समर्थन
प्लगइन इसे बदलने के बजाय मौजूदा GrapesJS StorageManager के साथ काम करता है।
क्यों हर गंभीर संपादक को पुनर्प्राप्ति की आवश्यकता है
डेवलपर्स के लिए, ऑटोसेव केवल एक सुविधा सुविधा नहीं है।
यह एक विश्वसनीयता विशेषता है।
यदि आप ग्राहकों, एजेंसियों या आंतरिक टीमों के लिए एक विज़ुअल एडिटर का निर्माण कर रहे हैं, तो उनके काम की सुरक्षा करने से समग्र उत्पाद अनुभव में नाटकीय रूप से सुधार हो सकता है।
एक अच्छा संपादक उपयोगकर्ताओं को बनाने में मदद करता है। एक महान संपादक जो बनाता है उसकी भी रक्षा करता है।
4. GrapesJS के लिए ऑटोफिल
विज़ुअल एडिटर बनाते समय एक और आम समस्या है।
आप किसी पृष्ठ की संरचना बनाते हैं, लेकिन सब कुछ खाली है.
आपके पास एक हेडलाइन प्लेसहोल्डर है.
एक खाली पैराग्राफ।
रिक्त छवि घटक।
प्लेसहोल्डर बटन।
लेआउट तकनीकी रूप से काम करता है - लेकिन यह एक वास्तविक वेबसाइट की तरह नहीं दिखता है।
यहीं पर ऑटोफिल आता है।
ऑटोफिल - GrapesJS के लिए डमी सामग्री भराव
अपने लेआउट के लिए यथार्थवादी सामग्री उत्पन्न करें
ऑटोफिल स्वचालित रूप से आपके GrapesJS घटकों को यथार्थवादी डमी सामग्री से भर देता है।
अपने टेम्पलेट को सामान्य लोरेम इप्सम से भरने के बजाय, आप लेआउट और उद्योग के लिए उपयुक्त सामग्री तैयार कर सकते हैं।
उदाहरणों में शामिल:
- सुर्खियाँ
- पैराग्राफ
- बटन लेबल
- कंपनी के नाम
- कीमतें
- छवियां
- उद्योग-विशिष्ट सामग्री
ऑटोफिल विभिन्न वेबसाइट श्रेणियों जैसे SaaS, ई-कॉमर्स, एजेंसियों, ब्लॉगों और रेस्तरां का समर्थन करता है।
यह अंग्रेजी, स्पेनिश, जर्मन, फ्रेंच और रूसी सहित कई भाषाओं का भी समर्थन करता है।
खाली टेम्पलेट से यथार्थवादी वेबसाइट तक
ऑटोफिल इस दौरान विशेष रूप से उपयोगी है:
- टेम्पलेट विकास
- क्लाइंट प्रस्तुतियाँ
- प्रोटोटाइप
- क्यूए परीक्षण
- डिजाइन समीक्षा
- वेबसाइट बिल्डर विकास
नकली सामग्री को मैन्युअल रूप से दर्ज करने में समय बिताने के बजाय, आप सेकंडों में एक पूरे पृष्ठ को पॉप्युलेट कर सकते हैं।
संरचना का निर्माण करें। सामग्री भरें। परिणाम देखें।
चार समस्याएं। चार GrapesJS प्लगइन्स।
चार UnStudio प्लगइन्स को विज़ुअल एडिटिंग अनुभव के विभिन्न हिस्सों पर काम करने के लिए डिज़ाइन किया गया है।
| प्लगइन | समस्या यह हल करता है |
|---|---|
| कमांड पैलेट | कार्यों को शीघ्रता से ढूँढना और निष्पादित करना |
| उत्तरदायी पैक | उत्तरदायी लेआउट को समझना और प्रबंधित करना |
| स्वतः सहेजें और पुनर्स्थापित करें | उपयोगकर्ताओं को खोए हुए काम से बचाना |
| ऑटोफिल | खाली लेआउट के लिए यथार्थवादी सामग्री बनाना |
साथ में, वे एक आधुनिक GrapesJS संपादक के चार महत्वपूर्ण क्षेत्रों को कवर करते हैं:
नेविगेशन → उत्तरदायी डिज़ाइन → विश्वसनीयता → सामग्री
GrapesJS डेवलपर्स के लिए बनाया गया
UnStudio GrapesJS के साथ उत्पादों का निर्माण करने वाले डेवलपर्स पर केंद्रित है - कस्टम वेबसाइट बिल्डरों से लेकर SaaS प्लेटफॉर्म, आंतरिक टूल और क्लाइंट-फेसिंग संपादकों तक।
हमारा मानना है कि प्लगइन्स को डेवलपर्स को अपने मौजूदा संपादक आर्किटेक्चर को फिर से बनाने के लिए मजबूर किए बिना वास्तविक समस्याओं को हल करना चाहिए।
इसलिए हमारा दृष्टिकोण सरल है:
केंद्रित विशेषताएं। स्वच्छ एकीकरण। बेहतर संपादन अनुभव।
और ये चार प्लगइन्स केवल शुरुआत हैं।
हम GrapesJS पारिस्थितिकी तंत्र के लिए और अधिक उपकरण बना रहे हैं और उन्हें GJS.Market के माध्यम से साझा कर रहे हैं।
अनस्टूडियो का अन्वेषण करें
यदि आप GrapesJS के साथ निर्माण कर रहे हैं, तो GJS.Market पर संपूर्ण अनस्टूडियो संग्रह का पता लगाएं और उन उपकरणों को ढूंढें जो आपके संपादक के लिए उपयुक्त हों।
GJS.Market पर UnStudio पर जाएं
बेहतर संपादक बनाएं। GrapesJS अपने लिए कड़ी मेहनत करें।