वेब डिजाइनर और डेवलपर्स के लिए नए संसाधन (जनवरी 2018)

नया साल 2018 यहां है। यदि हम पांच साल पहले वेब विकास में प्रगति को देखते हैं, तो यह आज हमारे पास से बिल्कुल अलग है। आज नए हैं विधियाँ, उपकरण और यहां तक ​​कि एक नया प्रतिमान आज हम वेबसाइट बनाने के तरीके में बदलाव करते हैं - और VirtualDOM उनमें से एक है.

DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) a है ट्री मॉडल जो परिभाषित करता है कि एक वेबसाइट कैसे संरचित है. DOM का चयन करना, ट्रैवर्स करना और हेरफेर करना एक बहुत ही महंगा ऑप्रेशन और हो सकता है आपकी साइट के रेंडरिंग प्रदर्शन में बाधा.

हालाँकि, इस पोस्ट में हम चर्चा नहीं करेंगे कि कैसे VirtualDOM काम करता है, इसके बजाय, अन्य उपकरणों के साथ, हम देखेंगे वे लाइब्रेरी जो आपको VirtualDOM को लागू करने की अनुमति देती हैं बिल्कुल अभी। चलो उन्हें बाहर की जाँच करें.

MaquetteJS

एक VirtualDOM का कार्यान्वयन यह आपको तरल उपयोगकर्ता-इंटरफ़ेस का निर्माण करने की अनुमति देता है जो इसके आस-पास डेटा के साथ अद्यतन रहता है। यह एक शुद्ध जावास्क्रिप्ट और है unopiniated पुस्तकालय इस प्रकार यह संभव है इसका उपयोग सिंथेटिक लैंग्वेज जैसे कॉफीस्क्रिप्ट, टाइपस्क्रिप्ट और जेएसएक्स के साथ करें. React.js के लिए एक बढ़िया वैकल्पिक पुस्तकालय; MaquetteJS आकार में बहुत छोटा है (केवल) 3KB) तुलनात्मक रूप से.

ReDOM

यह मेरी पसंदीदा VirtualDOM लाइब्रेरी में से एक है, क्योंकि सिंटैक्स को देखकर इसे चुनना आसान है. सिर्फ 2K बी के साथ, आप एक तेजी से प्रतिपादन वेब पेज या कस्टम HTML घटक बना सकते हैं। पुस्तकालय होते हैं दो प्राथमिक कार्य एल, किसी तत्व को बनाने या हेरफेर करने के लिए, तथा पर्वत इसे चयनित तत्व में जोड़ने के लिए। आप इसे ब्राउज़र और सर्वर-साइड में NodeJS के साथ लोड कर सकते हैं.

ReactiveJS

एक अस्थायी यूआई पुस्तकालय अत्यधिक इंटरैक्टिव वेब अनुप्रयोग बनाने के लिए. मूल रूप से TheGuardian के लिए बनाया गया, ReactiveJS ब्राउज़रों और मोबाइल उपकरणों पर काम करने के लिए बनाया गया है; तो आप इसकी विश्वसनीयता पर निर्भर कर सकते हैं। ReactiveJS भी साथ आता है आधुनिक वेब एप्लिकेशन के लिए कई सुविधाएँ आवश्यक हैं, जैसे स्कॉप्ड सीएसएस, कस्टम कंपोनेंट्स, एसवीजी और एनिमेशन.

RiotJS

RitoJS शुरुआती लोगों के लिए पुस्तकालय सीखने के साथ काम करने के लिए एक सुखद है और इसके लिए बहुत आसान है HTML तत्व के साथ एक कस्टम घटक को परिभाषित करने की अनुमति देता है और HTML विशेषताएँ, जबकि पिछले लाइब्रेरीज़ शुद्ध जावास्क्रिप्ट सिंटैक्स का उपयोग करने के लिए बाध्य करेंगी.

RiotJS Node.js environement या ब्राउज़रों में संगत है, और हो सकता है Vue.js के शानदार विकल्प ने सिमिलारिटी दी.

HyperHTML

hyperHTML, जैसे नाम का अर्थ है, DOM को रेंडर और मैनिपुलेट करने पर परफॉर्मेंस. आप इसका उपयोग कस्टम तत्व और वेब घटक बनाने के लिए कर सकते हैं। यह jQuery के रूप में आसान काम करता है जिसमें इसे ब्राउज़र में उपयोग किया जा सकता है CDN से स्क्रिप्ट लोड करना और हाइपर HTML एक्सेस करना. जटिल की कोई जरूरत नहीं है टूलींग.

Mithril

जैसे ही यह शांत होता है, मिथ्रिल एक है शक्तिशाली जावास्क्रिप्ट पुस्तकालय. विरुटलडॉम और कंपोनेंट्स के अलावा, मिथ्रिल रूटिंग और एक्सएचआर से भी सुसज्जित है आप किसी भी अन्य पुस्तकालय पर भरोसा किए बिना सिंगल-पेज वेब एप्लिकेशन का निर्माण कर सकते हैं. बेंचमार्क दिखाता है कि यह कुछ लोकप्रिय पुस्तकालयों जैसे Vue.js, React.js और कोणीय को बेहतर बनाता है.

SlimJS

SlimJS एक जावास्क्रिप्ट लाइब्रेरी है देशी वेब घटक एपीआई का उपयोग करके कस्टम वेब घटक का निर्माण करें. चूंकि यह देशी ब्राउज़र घटक के आसपास बनाया गया है, स्लिमजेएस एक से लैस है polyfill जो ब्राउज़र में एपीआई को हिलाता है जो अभी तक इसका समर्थन नहीं करता है. यदि आप मूल तरीके को अपनाना पसंद करते हैं तो यह एक शानदार ढांचा है.

VSVG

जबकि यह HTML के समान सिंटैक्स है, एसवीजी अपने स्वयं के quirks के साथ एक अन्य प्रकार का जानवर है। यह पुस्तकालय, जैसा कि नाम से पता चलता है, होगा आप मक्खी पर एसवीजी बनाने और हेरफेर करने की अनुमति देते हैं.

EmotionSH

भावना है CSS-in-JS फ्रेमवर्क जिसकी आवश्यकता आपको VirtualDOM के साथ वेबसाइट बनाते समय पड़ सकती है. यह आपको अपनी साइट पर आवश्यक सीएसएस के केवल बिट वितरित करने की अनुमति देता है और आप कर सकते हैं स्टाइल को अपडेट करें क्लास के नामकरण और विशिष्टता के साथ दोषी पाए बिना शैली को केवल उस घटक के लिए बंद कर दिया जाता है जिस पर इसे लागू किया जाता है.

रिएक्टर स्टार्टर किट

यदि आप पिछले कुछ वर्षों में वेब का अनुसरण कर रहे हैं, तो आपको हर जगह रिएक्ट (लगभग) मिलेगा। यह है एक 5 लघु-वीडियो कोर्स, रिएक्ट की शुरुआत. यदि आप उद्योग से जुड़े रहना चाहते हैं, तो ये शुरुआत करने के लिए सही जगह हो सकती है.

तत्वों

तत्वों का एक संग्रह है iOS घटक स्केच में iOS ऐप प्रोटोटाइप बनाने के लिए. इसे लोगों द्वारा स्केच द्वारा बनाया गया है और iPhone X UI के साथ अपडेट किया गया है.

Modaal

Modaal एक JavaScript लाइब्रेरी है, जिसे ध्यान में रखते हुए बनाया गया है। काफ़ी हद तक के लिए सत्यापित “WCAG 2.0 स्तर एए समर्थन” वह (मुझे लगता है) सबसे सुलभ “मॉडल” पुस्तकालय आज। आईटी इस हल्के, jQuery के संगत, और छवियों, वीडियो और यहां तक ​​कि Instagram के लिए इस्तेमाल किया जा सकता है. इसके अलावा, Google का यह लघु पाठ्यक्रम आपको वेब एक्सेसिबिलिटी के साथ आरंभ करने में मदद करेगा और यह महत्वपूर्ण क्यों है.

WordPressify

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

लैंडो

लैंडो एक विकास उपकरण है जो विकास के वातावरण को जल्दी और आसानी से स्पिन करने के लिए बहुत पसंद है WordPressify जो हमने अभी ऊपर बताया है। लेकिन Node.js के बजाय, यह लेता है डॉकटर का लाभ एक हल्का कंटेनरीकरण है प्रौद्योगिकी और यह आपके विकास में उपयोग किए जाने वाले स्टैक की अवधि में अधिक लचीलापन प्रदान करता है.

उदाहरण के लिए, आप कर सकते हैं PHP संस्करण निर्दिष्ट करें, XDebug को सक्षम करें, और संगीतकार को स्थापित करें.

WP-Docklines

WP-Docklines एक है निरंतर एकीकरण और वितरण करने के लिए आप बेसलाइन के रूप में उपयोग कर सकते हैं कि छवियों का संग्रह अपने वर्डप्रेस विषयों और बिटबकेट, सर्किलसीआई और गिटलैब जैसी सेवाओं में प्लिन के लिए। प्रत्येक छवि के साथ बंडल है वर्डप्रेस को विकसित करते समय सामान्यतः आवश्यक उपकरण जैसे PHP कोड स्निफर, PHPUnit और WP-CLI.

WP-लॉकर

WP-Locker केवल एक मिनट में वर्डप्रेस डेवलपमेंट वातावरण को स्पिन करने के लिए Docker Compose कॉन्फ़िगरेशन है। यह है अपाचे, MySQL और phpMyAdmin के साथ सेट अप करें और चूंकि यह WP-Docklines छवि का विस्तार करता है, इसलिए यह आउट-ऑफ-द-बॉक्स छवि पर अतिरिक्त टूल भी करता है.

केवल प्रकार bin / शुरू इसे करने के लिए, कॉन्फ़िगर करें स्थानीय होस्ट और प्लगइन्स स्थापित करें और कॉन्फ़िगरेशन फ़ाइल में आपके द्वारा कॉन्फ़िगर की गई थीम.

Docusaurus

फेसबुक की ओर से एक और ओपन-सोर्स पहल, Docusaurus अपनी परियोजना की एक प्रलेखन वेबसाइट बनाने के लिए एक उपकरण है. प्रतिक्रिया और मार्कडाउन के साथ निर्मित, आप आसानी से प्रलेखन की रचना कर सकते हैं, इसे बनाए रख सकते हैं, और यहां तक ​​कि अपनी साइट के लिए एक ब्लॉग भी बना सकते हैं, और इसे Github Pages पर प्रकाशित करें.

VSCode यो

येओमन एक नोड पैकेज है जो आपको जल्दी से प्रोजेक्ट शुरू करने की अनुमति देता है पूर्व-निर्मित मचान का चयन करना जो आपकी परियोजनाओं के अनुरूप हो. यदि आप विज़ुअल स्टूडियो कोड का उपयोग कर रहे हैं, तो यह प्लगइन आगे भी वर्कफ़्लो को सुव्यवस्थित करेगा, क्योंकि यह आपको सक्षम बनाता है चलाएं “यो” Visual Studio कोड विंडो से सही कमांड.

BluebirdJS

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

खूबसूरत

Prettier एक उपकरण है भाषा के कोडिंग मानक के अनुरूप अपना कोड प्रारूपित करें. यह आपको और आपकी टीम को नियम की अनुमति देते हुए स्क्रेच से आपके कोड को फिर से लिखेगा कोड लेखन शैलियों पर बहस करने के बजाय अधिक उत्पादक.