‼️ 🧑🏿‍🤝‍🧑🏻 🎣 एक वेब डेवलपर के लिए कुछ रोचक और उपयोगी बातें 🍋 🤶🏻 🎇

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

Prepros

CSS, JS के लिए शानदार प्रीप्रोसेसर एप्लीकेशन। निम्न प्रकार की फ़ाइलें संकलित करें: LESS, Sass, SCSS, स्टाइलस, जेड, स्लिम, कॉफ़ीस्क्रिप्ट, लाइवस्क्रिप्ट, Haml। हर फाइल में बदलाव के साथ जेएस को फ्लाई पर छोटा करता है। छवियों का अनुकूलन करता है। विंडोज और मैक के लिए उपलब्ध है, साथ ही क्रोम के लिए एक एक्सटेंशन। साथ ही, यह विभिन्न उपकरणों पर साइट का परीक्षण करने के लिए एक HTTP सर्वर बनाता है। कोडकिट और घोस्टलैब के लिए नि: शुल्क प्रतिस्थापन ~~, जो कुल मिलाकर आपको $ 75 बचाएगा~~ ।

Dimensionsapp

विभिन्न स्क्रीन पर वेब एप्लिकेशन के प्रदर्शन का परीक्षण करने के बारे में बोलते हुए, मैं डाइमेंशनएप ऑनलाइन सेवा के बारे में कहना चाहता हूं।

कोष्ठक

विशेष रूप से वेब डेवलपर्स के लिए जावास्क्रिप्ट में लिखा गया एडोब का ओपन सोर्स एडिटर । अच्छा डिज़ाइन, बिल्ट-इन पेज री -लोडिंग के बिना रीफ़्रेश किए गए (एनालॉग्स: एम्मेट लिव्सटाइल और लाइवरेलैड ), सीएमडी / Ctrl + ई का उपयोग करके संपादक से HTML तत्वों के लिए शैलियों को देखना और कई प्लगइन्स, जो और भी अधिक होंगे।

VerbalExpressions

नियमित अभिव्यक्ति लिखना किसे पसंद नहीं है? क्या होगा यदि जेएस में यूआरएल की जाँच इस तरह होती है:

// Create an example of how to test for correctly formed URLs var tester = VerEx() .startOfLine() .then( "http" ) .maybe( "s" ) .then( "://" ) .maybe( "www." ) .anythingBut( " " ) .endOfLine(); // Create an example URL var testMe = "https://www.google.com"; // Use RegExp object's native test() function if( tester.test( testMe ) ) alert( "We have a correct URL "); // This output will fire else alert( "The URL is incorrect" );

लाइब्रेरी भी इसके लिए मौजूद है: रूबी, सी #, पायथन, जावा, ग्रूवी, पीएचपी, हास्केल, सी ++, ऑब्जेक्टिव-सी।
GitHub

HTML.js

अपेक्षाकृत हाल ही में मैंने Habré पर Voyeur.js के बारे में बात की थी जो DOM के साथ काम करने के लिए बहुत ही सुखद वाक्य रचना है। HTML.js कई नए तरीकों के साथ वायुरिटी का एक कांटा है:। each(), remove(), ify(), ._other(), _fn()

GitHub

LiveScript

LiveScript "एक भाषा है जो जावास्क्रिप्ट के लिए संकलन है, जो कॉफीस्क्रिप्ट का एक अप्रत्यक्ष वंशज है।" पहली नज़र में वाक्यविन्यास बहुत आकर्षक नहीं हो सकता है, लेकिन लाइवस्क्रिप्ट स्वयं बहुत, बहुत कार्यात्मक है:

 LiveScript take = (n, [x, ...xs]:list) --> | n <= 0 => [] | empty list => [] | otherwise => [x] ++ take n - 1, xs take 2, [1 2 3 4 5] #=> [1, 2] take-three = take 3 take-three [3 to 8] #=> [3, 4, 5] # Function composition, 'reverse' from prelude.ls last-three = reverse >> take-three >> reverse last-three [1 to 8] #=> [6, 7, 8]

लेकिन आपको JS कोड की कितनी आवश्यकता होगी

 var take, takeThree, lastThree, slice$ = [].slice; take = curry$(function(n, list){ var x, xs; x = list[0], xs = slice$.call(list, 1); switch (false) { case !(n <= 0): return []; case !empty(list): return []; default: return [x].concat(take(n - 1, xs)); } }); take(2, [1, 2, 3, 4, 5]); takeThree = take(3); takeThree([3, 4, 5, 6, 7, 8]); lastThree = function(){ return reverse(takeThree(reverse.apply(this, arguments))); }; lastThree([1, 2, 3, 4, 5, 6, 7, 8]); function curry$(f, bound){ var context, _curry = function(args) { return f.length > 1 ? function(){ var params = args ? args.concat() : []; context = bound ? context || this : this; return params.push.apply(params, arguments) < f.length && arguments.length ? _curry.call(context, params) : f.apply(context, params); } : f; }; return _curry(); }

Git-html5.js

जावास्क्रिप्ट आपके ब्राउज़र में लागू होता है। मैं केवल क्रोम के लिए एक एक्सटेंशन के रूप में उपरोक्त ब्रैकेट (जावास्क्रिप्ट में) के काम के उदाहरण में आवेदन देखता हूं, लेकिन मुझे यकीन है कि यह वास्तविक गीक्स के लिए एक उपयोगी चीज है।

GitHub
डेमो पेज कमिट, पुश, पुल और ब्रांचिंग के प्रदर्शन के साथ

क्राउडफंडिंग: घोस्ट - जस्ट ए ब्लॉगिंग प्लेटफार्म

जहां तक मुझे पता है, क्राउडफंडिंग द्वारा विकसित किया जाने वाला यह पहला सीएमएस है। परियोजना के लेखक जॉन ओ 'नोलन ने पहले ही किकस्टार्टर पर $ 400,000 जुटा लिए हैं , जो कि आवश्यक राशि का 785% है। घोस्ट एक ओपन सोर्स प्रोजेक्ट, शानदार डिज़ाइन और एक बहुत ही सुविधाजनक उत्तरदायी इंटरफ़ेस है।

Infogram

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

अगला संग्रह (अंक 2)

एक वेब डेवलपर के लिए कुछ रोचक और उपयोगी बातें