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

शुभ दिन, प्रिय Kravravchians। हाल ही में, मैंने कई दिलचस्प और उपयोगी उपकरण / पुस्तकालय / कार्यक्रम देखे जो मैं ह्रब के साथ साझा करना चाहता हूं।

Webflow

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

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

Parallax.js

लंबन प्रभाव बनाने के लिए कार्यात्मक और सरल उपकरण।


उन सभी तत्वों के लिए जिन पर प्रभाव लागू किया जाएगा, हम layer वर्ग को इंगित करते हैं और data-depth विशेषता में आंदोलन की गति का मूल्य निर्धारित करते हैं। पुस्तकालय में कई पैरामीटर हैं:

 <ul id="scene" data-calibrate-x="false" //     data-calibrate-y="true" data-invert-x="false" data-invert-y="true" //     data-limit-x="false" data-limit-y="10" //    10    data-scalar-x="2" data-scalar-y="8" //    data-friction-x="0.2" data-friction-y="0.8"> //        <li class="layer" data-depth="0.00"><img src=""></li> <li class="layer" data-depth="0.20"><img src=""></li> <li class="layer" data-depth="0.40"><img src=""></li> <li class="layer" data-depth="0.60"><img src=""></li> <li class="layer" data-depth="0.80"><img src=""></li> <li class="layer" data-depth="1.00"><img src=""></li> </ul> 

तब हम पैरलल कंस्ट्रक्टर के मूल तत्व को पास करते हैं:

 var scene = document.getElementById('scene'); var parallax = new Parallax(scene); 

Intention.js

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

Device.js

मॉडर्निजर सिद्धांत के अनुसार स्क्रिप्ट, HTML टैग में ios/android/windows/blackberry phone/tablet landscape/portrait कक्षाएं प्रदान करती है, जिससे मीडिया प्रश्नों में बुनियादी डिवाइस अनुमतियों को पंजीकृत करने की आवश्यकता समाप्त हो जाती है।

"क्रॉस-डिवाइस" के बारे में बोलते हुए, मैं उत्तरदायी डिज़ाइन के परीक्षण के लिए रिसाइज़र - बुकमार्क के बारे में भी बताना चाहूंगा । हम सभी कई समान सेवाओं के बारे में जानते हैं, लेकिन मुझे लगता है कि यह विधि सबसे सुविधाजनक है।

GistBox

GistBox आपके GitHub प्रोफ़ाइल के साथ सिंक्रनाइज़ करता है और सही रूप में Gist शीट प्रदर्शित करता है। आपके सभी स्निपेट को टैग और हमेशा हाथ से सॉर्ट किया जाता है। Chrome के लिए एक्सटेंशन के रूप में उपलब्ध है।

सीएसएस मोडल

शुरू करने के लिए, इस परियोजना को बॉयलरप्लेट टीम के सदस्यों में से एक द्वारा बनाया गया था। CSS Modal आपके प्रोजेक्ट के लिए एक अनुकूली मोडल विंडो जोड़ने का सबसे आसान तरीका है:

  <section class="semantic-content" id="modal-text" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true"> <div class="modal-inner"> <header id="modal-label"><!-- Header --></header> <div class="modal-content"><!-- The modals content --></div> <footer><!-- Footer --></footer> </div> <a href="#!" class="modal-close" title="Close this modal" data-close="Close" data-dismiss="modal">×</a> </section> 

और आपको बस बॉडी टैग बंद करने से पहले स्क्रिप्ट को कनेक्ट करना होगा, जिसके बाद यह मार्कअप एक मोडल विंडो बन जाएगा।

Dotdotdot.js, Wikit, HTML2PDF

हाल ही में, मुझे दीर्घवृत्त के साथ पैराग्राफ में कटौती करने की आवश्यकता थी। लेकिन मानक text-overflow केवल एक पंक्ति पर no-wrap काम करता है। और इंटरनेट पर, मुझे एक अद्भुत स्क्रिप्ट (dotdotdot.js) मिली जो इस समस्या को पूरी तरह से हल करती है।

विकिट - अपनी विशेषताओं के साथ मौजूदा वेब फ्रेमवर्क में एक।

HTML2PDF । सेवा Phantom.js के आधार पर लिखी गई है। शायद .pdf में एक पोर्टफोलियो डिजाइन करने के लिए उपयोगी है।

आपके ध्यान के लिए सभी को बहुत धन्यवाद।

अगला संग्रह (अंक 3) पिछला संग्रह (अंक 1)