वेब डिजाइनर और डेवलपर्स के लिए नए संसाधन (अक्टूबर 2017)

इस महीने फ्रेश रिसोर्सेस पिछले महीनों की तुलना में थोड़ा अलग होने वाले हैं। हम, वेब डेवलपर, तेजी से बदलते उद्योग में एक साथ रह रहे हैं, और मैंने कुछ बड़ी तकनीकी कंपनियों जैसे कि Google, Microsoft, Firefox, और PHP से बहुत सारी घोषणाएँ देखी हैं, जो हमारे निर्माण के तरीके को बदल देंगी मकड़जाल.

इस किस्त में, हमारी आधी सूची इन घोषणाओं के बारे में होगी। इसलिए, भविष्य के लिए नमस्ते कहने के लिए तैयार रहें!

आवश्यक छवि अनुकूलन

यह एक वेब के लिए एक छवि का अनुकूलन करने के लिए संपूर्ण लेख Addy उस्मानी द्वारा लिखित। यह अन्य राइट-अप की तरह नहीं है जो केवल कैसे-कैसे घूमते हैं, या केवल करते हैं और करते हैं.

यह आलेख वास्तव में आपको तकनीकी विवरणों के साथ-साथ चलता है अनुकूलन के पीछे विज्ञान. आपको कई अनुकूलन दृष्टिकोणों और छवि प्रारूपों पर पूरी तरह से जानकारी मिलेगी, उपकरण, टिप्स, और कुछ वास्तविक दुनिया उदाहरण.

PHP 7.2

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

PHP 7.2 में, ऐसे दो कार्य हैं, जिन्हें संक्षिप्त करने जा रहे हैं create_function () तथा __autoload (). यदि आप एक वेब डेवलपर हैं, अपने कोड की समीक्षा करें और आवश्यक परिवर्तन करें. मैंने कई वर्डप्रेस प्लगइन्स देखे हैं जो अभी भी इन दो कार्यों का उपयोग कर रहे हैं.

वेब शेयर एपीआई

मैंने ईमानदारी से इस एपीआई को वेब पर आते नहीं देखा। हालाँकि, वेब पर हमारी आधी बातचीत के बारे में है “साझा करने”, यह एपीआई बहुत कुछ बना देगा वेब डेवलपर्स के लिए देशी साझाकरण अनुभव का निर्माण करना आसान है, खासकर मोबाइल प्लेटफॉर्म पर.

यह एपीआई वर्तमान में केवल डेस्कटॉप और एंड्रॉइड के लिए Google क्रोम में उपलब्ध है। कार्रवाई में देखने के लिए इस YouTube वीडियो को देखें.

छवि Async विशेषता

एक और चीज जो वेब में क्रांति लाएगी वह है async img तत्व के लिए विशेषता। लेखन के समय, कुछ मुट्ठी भर दृष्टिकोण होते हैं एसिंक्रोनस रूप से लोड छवि जिसमें जावास्क्रिप्ट की एक छोटी सी चाल शामिल है. जल्द ही हम सिर्फ जोड़ पाएंगे async = पर उस पर img तत्त्व.

फ़ायरफ़ॉक्स क्वांटम

मोज़िला आक्रामक रूप से कुछ सुधारों, कोड-नाम के साथ फ़ायरफ़ॉक्स के अपडेट को आगे बढ़ा रहा है “प्रोजेक्ट क्वांटम”. इसमें क्वांटम सीएसएस - एक नया इंजन शामिल है अत्यंत तेज सीएसएस प्रतिपादन, एक नया यूआई, और नया DevTools.

रिलीज है वेब डेवलपर्स में कर्षण प्राप्त करना और कुछ ने पहले से ही अपने मुख्य ब्राउज़र को फ़ायरफ़ॉक्स में बदल दिया है। इस परियोजना में क्वांटम डोम और वेबरेंडर सहित और भी बहुत से काम हैं। क्या हम फ़ायरफ़ॉक्स क्वांटम इंजन पर आधारित Node.js के दावेदार को देखने जा रहे हैं? खैर, शायद हाँ.

IOS और Android के लिए MS Edge

Microsoft ने अभी घोषणा की है iOS और Android के लिए अपने नवीनतम ब्राउज़र, एज, जारी करें. इसका मतलब है कि आपकी वेबसाइटों के लिए परीक्षण करने के लिए एक और ब्राउज़र है.

गुटेनबर्ग

वर्डप्रेस वर्तमान में एक महत्वाकांक्षी परियोजना पर है, कोड जिसका नाम गुटेनबर्ग है। गुटेनबर्ग ए वर्डप्रेस संपादक के लिए नया रूप लगभग पूरी तरह से जावास्क्रिप्ट के साथ बनाया गया है.

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

FoitFout

FoitFout दो अलग-अलग तरीकों से तथाकथित FOIT और FOUT की तुलना करने का एक आसान साधन है वेब पर कस्टम फ़ॉन्ट लोड करें. इस उपकरण के साथ, आप दो दृष्टिकोणों का अनुकरण करने में सक्षम हैं और यह निर्णय लेते हैं कि आपकी साइट के लिए कौन सा दृष्टिकोण सबसे उपयुक्त है.

Vuera

वुरा एक है जावास्क्रिप्ट लाइब्रेरी जो आपको एक साथ Vue और React का उपयोग करने की अनुमति देती है. आप एक से एक पु घटक को शामिल कर सकते हैं .Vue या Vue में एक प्रतिक्रिया घटक का उपयोग करें। अब आपकी टीम हो सकती है किसी भी ढांचे के साथ अधिक उत्पादक कि वे उपयोग करना पसंद करते हैं.

खींचने योग्य

“खींचने योग्य” Shopify से शानदार लाइब्रेरी है। यह देशी ब्राउज़र के शीर्ष पर बनाया गया है ड्रैग-एन-ड्रॉप एपीआई और आप के साथ काम करने के लिए एक व्यापक एपीआई की अनुमति देता है. मामले में, यह ऐसा कुछ प्रदान नहीं करता है जिसकी आपको आवश्यकता है, आप एक लिख सकते हैं कस्टम मॉड्यूल अपनी कार्यक्षमता का विस्तार करने के लिए. यह कैसे काम करता है यह देखने के लिए डेमो देखें.

FlowchartJS

जैसा कि नाम से ही स्पष्ट है, फ़्लोचार्ट जेएस एक है लाइब्रेरी जो PowerPoint में फ्लोचार्ट के निर्माण की अनुमति देता है. इसी तरह, आप सर्कल, दीर्घवृत्त, वर्ग, हीरा, त्रिकोण, आदि सहित चार्ट के विभिन्न आकार बना सकते हैं.

QuickBill

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

Mocka

Mocka एक है सामग्री प्लेसहोल्डर जिसे आप प्रोटोटाइप वेबसाइट के लिए उपयोग कर सकते हैं. यह केवल 500 बाइट्स और पूरी तरह से अनुकूलन योग्य है। आप इसे आसानी से अपने प्रोजेक्ट की CSS फ़ाइल में Sass मिक्सिन का उपयोग करके शामिल कर सकते हैं.

सीएसएस कई कक्षाएं प्रदान करता है समेत mocka मीडिया एक छवि प्लेसहोल्डर बनाने के लिए, mocka-शीर्षक एक शीर्षक बनाने के लिए, और mocka-पाठ एक मनमाना पाठ बनाने के लिए.

VueStar

VueStar एक है जब आप किसी आइकन पर क्लिक करते हैं तो स्पार्कलिंग प्रभाव जोड़ने के लिए Vue घटक, ट्विटर के साथ भी ऐसा ही होता है “दिल” उनके मोबाइल ऐप में आइकन। घटक नाम के एक नए तत्व का परिचय देता है Vue सितारा जहां आप इसे वेब युग में जोड़ सकते हैं। और आपने कल लिया!

ग्रिड का मैदान

CSS ग्रिड एक लेआउट बनाने के लिए वेब पर एक नई अवधारणा का परिचय देता है और पहली नज़र में यह एक तरह का जटिल होता है, जिसमें कई नए गुण होते हैं।.

ग्रिडप्लेग्राउंड मूल रूप से एक है सीएसएस ग्रिड को पढ़ाने और सीएसएस ग्रिड अपनाने को आगे बढ़ाने के लिए मोज़िला पहल. यहां तक ​​कि फ़ायरफ़ॉक्स ग्रिड लेआउट का निरीक्षण करने के लिए DevTools में एक नया टूल लाता है.

स्निपेट मैनेजर

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

टैब्ड इंटरफ़ेस

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

SwissInCSS

स्विसइएनसीएसएस क्लासिक स्विस पोस्टर डिजाइनों में से कई का उपयोग नहीं करता है, लेकिन सीएसएस। स्रोत कोड CodePen में उपलब्ध है.