🌊 🏈 🛒 इंटरनेट कार्यक्रमों में सुधार 👿 👩🏿‍🤝‍👨🏽 🤲

देशी कार्यक्रमों के युग में, उपयोगकर्ता उन्हें केवल डेवलपर द्वारा अनुमत कॉन्फ़िगरेशन सेटिंग्स के ढांचे के भीतर उपयोग कर सकते हैं। आज, इंटरनेट अनुप्रयोगों के युग में, उपयोगकर्ता अपने विवेक पर आसानी से न केवल कार्यक्रम का बाहरी प्रतिनिधित्व कर सकता है, बल्कि इसके व्यवहार को भी बदल सकता है।

यह लेख वेब अनुप्रयोगों को अधिक सुविधाजनक, सुंदर बनाने, उनकी कार्यक्षमता का विस्तार करने, खुद के लिए अनुकूलित करने के तरीकों का वर्णन करता है।

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

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

यह तय करना इतना कठिन है, यह बताना असंभव है कि यह कितना कठिन है! अगर मुझे निकानोर इवानोविच के होंठों को इवान कुजिचम की नाक में डाल दिया जाता, तो बाल्टाजार बाल्टाजरिच की तरह कुछ स्वैगर लेते, और शायद इवान पावलोविच की अपव्ययता को इसमें जोड़ते, मैं तुरंत फैसला करता। अब सोचिये!

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

लगभग हर कोई इसके बारे में जानता है, लेकिन कुछ लोग इसका उपयोग करते हैं। हम कस्टम इंजेक्शन के स्पष्ट लाभों के सरल उदाहरण दिखाते हैं।

to-do.microsoft.com

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

खुद को सी.एस.

.app.detail-visible #detail { width: 40%; } #detail .detail-inner { width: 100%; } .theme-purple .checkBox .svgIcon svg { width: 16px; } .addTask .addTask-icon { opacity: 0.5; } .detailNote .editableContent .editableContent-display, .detailNote .editableContent .editableContent-edit, .detailNote .editableContent .editableContent-textarea { font-size: 16px; } .taskItemInfo { opacity: 0.4; } #addTaskInput { font-weight: normal; opacity: 0.5; } .taskItem-title { font-size: 16px; font-weight: 400; font-family: "Segoe UI", "Arial", "sans-serif"; } .tasksToolbar { margin-bottom: 20px; margin-top: 10px; } .taskItem-body { padding: 7px 0; }

बायाँ स्तंभ। यहां Microsoft के पास एक-आयामी कार्य सूचियों के लिए पूर्ण डाउनशिफ्टिंग है। मुझे एक पेड़ चाहिए। सिद्धांत रूप में, इसे लागू भी किया जा सकता है, लेकिन यहां, सादगी के लिए, हम एक गैर-ढहते हुए पेड़ का निर्माण करते हैं।

यहाँ जावास्क्रिप्ट है

 window.onload = function() { setTimeout(function() { $('span.listItem-titleParsed') .filter("span:contains(''), span:contains(''), span:contains('')") .closest(".listItem-inner").css("padding-left", "30px"); }, 5000); };

यहाँ छद्म वृक्ष है:

कुछ पहले से ही। JQeury को कनेक्ट करने की आवश्यकता है, और कभी-कभी आपको इसे स्क्रिप्ट के शरीर में कॉपी करना होगा, अन्यथा समस्याएं उत्पन्न होती हैं। आरंभीकरण में देरी के साथ एक ही बात।

आइए अब हम कार्यक्रमों के इस परिवार के एक और बौद्धिक रूप से उन्नत प्रतिनिधि को देखें।

trello.com

यहाँ एक विस्तृत सूची कार्ड है:

हो सकता है कि कोई इस उद्देश्य के लिए ट्रोलो कार्ड का उपयोग करता है कि डेवलपर्स ने इस एप्लिकेशन में निवेश किया है, लेकिन मेरे लिए इस कार्ड पर नेत्रहीन रूप से उपयोगी जानकारी का 10% से कम दिखाई देता है, बाकी सब एक उज्ज्वल रंगीन चीज है जो सही पर ध्यान केंद्रित करने से विचलित करती है।

सीएसएस और जेएस सभी एक सभ्य देखो के लिए नेतृत्व कर सकते हैं। ट्रेलो में पहले से ही jQuery है, और इस तरह से एक स्क्रिप्ट है:

 $('.mod-card-detail-icons-smaller .window-module-title h3').bind('click', function(){ $('.mod-comment-type').hide(); });

उदाहरण के लिए, "गतिविधि" पर क्लिक करने पर सभी टिप्पणियां छिप जाती हैं। उन्हें फिर से देखने के लिए, बस दाईं ओर छिपाएँ / दिखाएँ विवरण पर लिंक पर क्लिक करें।

और अंत में, कुछ और दिलचस्प।

मुझे ट्रेलो कार्ड पर एक अनुस्मारक की आवश्यकता है। स्क्रीन पर पॉप-अप विंडो नहीं, लेकिन मुझे हर जगह पाने के लिए एक वास्तविक अनुस्मारक। यानी फोन पर साउंड नोटिफिकेशन। बगीचे को बाड़ न देने और किसी भी IFTTTs और Zapiers को जोड़ने के लिए नहीं, हम केवल Google कैलेंडर के लिए एक ईवेंट बनाते हैं, जो तब एंड्रॉइड पर आपकी ज़रूरत का हर काम करेगा।

हम कार्ड की नियत तारीख से जुड़ेंगे ताकि ट्रेलो डेटा मॉडल का विस्तार न हो (हालांकि यह भी एक विकल्प है)।

तिथि को सहेजते समय, हमें Google कैलेंडर API को अपने कैलेंडर में एक ईवेंट बनाने का अनुरोध भेजने की आवश्यकता है। कोड ही काफी सरल है:

जावास्क्रिप्ट

 var event = { 'summary': ' ', 'location': '', 'description': ' (    , )', 'start': { 'dateTime': '2018-10-14T09:00:00-07:00', 'timeZone': 'Europe/Moscow' }, 'end': { 'dateTime': '2018-10-14T17:00:00-07:00', 'timeZone': 'Europe/Moscow' }, 'reminders': { 'useDefault': false, 'overrides': [ {'method': 'email', 'minutes': 3 * 60}, {'method': 'popup', 'minutes': 10} ] } }; var request = gapi.client.calendar.events.insert({ 'calendarId': 'primary', 'resource': event });

लेकिन इससे पहले, आपको Google API कंसोल पर एक एप्लिकेशन बनाने, क्लाइंट_एड और एपि_की प्राप्त करने और OAuth प्रमाणीकरण को जोड़ने के लिए कुछ और सरल मानक चरण बनाने की आवश्यकता है। गूगल पर मैनुअल।

यदि ट्रेलो कार्ड की नियत तारीख संशोधन के साथ, कैलेंडर घटना को संशोधित करना आवश्यक है, तो आपको अधिक काम करना होगा, लेकिन यह भी संभव है।

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

डिस्क्लेमर: उपरोक्त सभी उदाहरण पूरी तरह से js और css की क्षमता का उपयोग करने के उदाहरण के रूप में प्रदान किए जाते हैं, और खुद को कोई मूल्य नहीं देते हैं।

Habr के लिए अतिरिक्त

बड़े मॉनिटरों पर, हैबे पर लेख का पाठ पढ़ने के लिए सुविधाजनक है, लेकिन चित्र (विशेष रूप से पाठ के साथ स्क्रीनशॉट) बल्कि खराब रूप से भिन्न हैं। यह स्क्रिप्ट:

 window.onload = function() { $(function() { $('.post img').each(function() { $(this).wrap('<a target="_blank" href="' + $(this).attr('src') + '"></a>'); }); }); };

पूर्ण आकार में एक नई विंडो में खोलने के लिए चित्र पर क्लिक करने की अनुमति देता है

इंटरनेट कार्यक्रमों में सुधार

to-do.microsoft.com

trello.com

Habr के लिए अतिरिक्त

More articles: