2020 वेब ट्रेंड्स वर्थ ट्राइंग

पिछले कुछ वर्षों में, हमने वेब प्रौद्योगिकियों की दुनिया में कई बदलाव देखे हैं। 2020 में, मैं आपका ध्यान दो मुख्य प्रवृत्तियों / लक्ष्यों की ओर आकर्षित करना चाहता हूं जो वेब समुदाय के पास हैं: विस्तार और संगतता।

तानाना (तानाना)

एक्स्टेंसिबिलिटी तब होती है जब आप अपनी जरूरतों को पूरा करने के लिए तकनीक ले सकते हैं और उसका विस्तार कर सकते हैं। कई वर्षों से हम हर जगह घटकों का उपयोग कर रहे हैं, दोनों के रूप में अनुप्रयोग विकास (प्रतिक्रिया, Vue, Svelte पर घटक) और डिज़ाइन विकास (सिस्टम डिज़ाइन) के रूप में।

फिलहाल, हम इन घटकों को उपयोग करने के लिए अधिक अद्वितीय और सुविधाजनक बनाने की कोशिश कर रहे हैं। वेब पर एक्स्टेंसिबिलिटी हमें अपनी ज़रूरतों और प्रयोगों के लिए प्लेटफ़ॉर्म (ब्राउज़र, html / css / js इंजन) का उपयोग करने की अनुमति देती है, निश्चित रूप से अधिक लाभ प्राप्त करने के लिए।

सीएसएस हुदिनी

CSS Houdini के लिए धन्यवाद, डेवलपर्स CSS ऑब्जेक्ट मॉडल की क्षमताओं का विस्तार कर सकते हैं, यह बदल सकते हैं कि ब्राउज़र कैसे प्रदर्शित होते हैं और शैलियों के साथ काम करते हैं।

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

( डेमो से लिंक करें )

Houdini आपको CSS के साथ स्टाइल का विस्तार करने की अनुमति देता है और आपको CSS में कस्टम नियम जोड़ने की अनुमति देता है। वर्तमान में, हौदिनी में शामिल हैं:

• मापदंडों और मूल्यों को बदलें
• पेंट एपीआई
• एनीमेशन कार्यपत्रक
• टाइप ऑब्जेक्ट मॉडल
• लेआउट एपीआई

इन एपीआई का उपयोग करते हुए, उपयोगकर्ता सीएसएस (टाइप्ड ऑब्जेक्ट मॉडल) में सिमेंटिक का उपयोग कर सकता है, पेंट एपीआई का उपयोग करके जैसे कि canvas पर होता है और परिणाम को सीमा (हाई ग्रेडिएंट बॉर्डर) के रूप में लागू करता है या सीएसएस की सिर्फ एक पंक्ति में एक पैरामीटर एनीमेशन बनाता है।

 .sparkles { background: paint(sparkles) } 

उदाहरण के लिए, आप एनिमेशन को एक अलग स्ट्रीम (एनीमेशन वर्कलेट) में ले जा सकते हैं और लेआउट एपीआई का उपयोग कर मार्जिन, पैडिंग, बाएं, दाएं जैसे नियमों का उपयोग किए बिना तत्वों की व्यवस्था कर सकते हैं।

सभी के सभी, हुडिनी उन चीजों में से एक है जो इस वर्ष ध्यान देने योग्य हैं।

चर फ़ॉन्ट्स

वैरिएबल फोंट वेब टाइपोग्राफी का भविष्य हैं, जो स्क्रीन पर पाठ के प्रदर्शन (आकार, बोल्डनेस, स्टाइल) को नियंत्रित करने के लिए कई विकल्प प्रदान करते हैं। और यह सब एक अपेक्षाकृत छोटे फ़ाइल आकार के साथ है। यह इस बारे में अंतहीन बहस को अलविदा कहने का समय है कि आपको अपनी सामग्री को एक नए, सुंदर जीवन से जोड़ने के लिए कितने फोंट की जरूरत है।

आप इस लेख में चर फोंट के बारे में अधिक जान सकते हैं।

कस्टम गुण

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

 :root { --first-color: #488cff; --second-color: #ffff8c; } #firstParagraph { background-color: var(--first-color); color: var(--second-color); } #secondParagraph { background-color: var(--second-color); color: var(--first-color); } #container { --first-color: #48ff32; } #thirdParagraph { background-color: var(--first-color); color: var(--second-color); } 

 //   element.style.getPropertyValue("--my-var"); //     getComputedStyle(element).getPropertyValue("--my-var"); //   element.style.setProperty("--my-var", jsVar + 4); 

कस्टम गुण पहले से ही चर फ़ॉन्ट के रूप में समर्थित हैं और आपको उनके लिए किसी भी पोस्ट / प्री प्रोसेसर का उपयोग करने की आवश्यकता नहीं है। ये "प्रौद्योगिकियां" विभिन्न ब्राउज़रों में और विभिन्न प्रणालियों पर काम करती हैं। यहाँ से हम आसानी से अनुकूलता की ओर बढ़ते हैं।

अनुकूलता

परिभाषा के अनुसार, इस लेख में अनुकूलता उपयोगकर्ता की आवश्यकता के आधार पर विनिमेय होने वाली प्रौद्योगिकियों की क्षमता है। तकनीकी पक्ष पर, आप एक उदाहरण दे सकते हैं कि कितनी कंपनियों ने पुराने स्टैक से नए तक प्रवास की प्रक्रिया पूरी की है या यहां तक ​​कि। उदाहरण के लिए, बैकबोन -> रिएक्ट, और वे एक आम दृश्य में आना चाहते हैं जिसे अब इतने बड़े प्रवास की आवश्यकता नहीं होगी। घटक और वेब घटक, शायद मामलों की वर्तमान स्थिति, जो कई के अनुरूप है।

वेब घटक

वेब घटक वेब मानकों की संगतता समस्या को हल करने की कोशिश कर रहे हैं। जिसका मुख्य कार्य एक ऐसा एकीकृत रूप प्रदान करना है, जिसमें घटकों को बनाने के लिए किसी ढांचे या पुस्तकालय की भी आवश्यकता नहीं होगी।

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

तार्किक गुण

तार्किक गुण हमें उस मॉडल पर पुनर्विचार करने की अनुमति देते हैं जिसका उपयोग हम पृष्ठ पर तत्वों को व्यवस्थित करने के लिए करते हैं और इसे विभिन्न भाषाओं और उपकरणों के लिए अधिक अनुकूल बनाते हैं जिनके साथ उपयोगकर्ता वेबसाइटों तक पहुंचते हैं।

उदाहरण के लिए, रूसी में, जिसे बाएं से दाएं पढ़ा जाता है, हम ऊंचाई, चौड़ाई, बाएं, दाएं, ऊपर, नीचे - अच्छी तरह से प्रतिनिधित्व करते हैं, जैसा कि हम कल्पना करते हैं (आपकी टोपी)। लेकिन उदाहरण के लिए, अरबी में, जहां सब कुछ दाएं से बाएं ओर है, चीजें थोड़ी अलग हैं। padding-left , अब पैराग्राफ की शुरुआत में इंडेंटेशन नहीं होगा, क्योंकि यह बाईं ओर शुरू नहीं होता है।

बूलियन प्रॉपर्टी के उदाहरण के रूप में, आप padding-left बजाय padding-inline-start उपयोग कर सकते हैं। और फिर उस तरफ padding स्थापित की जाएगी जिसके साथ शब्दों को उपयोगकर्ता द्वारा चुनी गई भाषा में आमतौर पर पढ़ा जाता है। यदि यह रूसी है, तो padding-left का उपयोग किया जाएगा, और यदि यह अरबी है, तो padding-right ।

कस्टम मीडिया प्रश्न

ये मीडिया चैनल हैं जो हमें उपयोगकर्ता की प्राथमिकताओं के बारे में जानने की अनुमति देते हैं। उदाहरण के लिए, एक उपयोगकर्ता एक अंधेरे विषय को पसंद करता है। हम इस बारे में पता लगा सकते हैं कि prefers-color-scheme का उपयोग कर:

 .day { background: #eee; color: black; } .night { background: #333; color: white; } @media (prefers-color-scheme: dark) { .day.dark-scheme { background: #333; color: white; } .night.dark-scheme { background: black; color: #ddd; } } @media (prefers-color-scheme: light) { .day.light-scheme { background: white; color: #555; } .night.light-scheme { background: #eee; color: black; } } .day, .night { display: inline-block; padding: 1em; width: 7em; height: 2em; vertical-align: middle; } 

हमेशा की तरह, सबसे दिलचस्प और मजेदार हिस्सा केवल एज और आईई में समर्थित नहीं है।

सबसे दिलचस्प मीडिया शो:
पसंद-रंग-योजना
पसंद विपरीत
पसंद-कम-गति
पसंद-कम-पारदर्शिता

गति

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

वेब लगातार और लगातार विकसित हो रहा है, शायद यही है जो इसे इतना दिलचस्प बनाता है। और आपको लगता है कि कौन सी प्रौद्योगिकियां 2020 का चलन बन जाएंगी?