00:00:00मुझे लगता है कि इंटरनेट को थोड़ी और सनक (whimsy) की सख्त जरूरत है, खासकर अब जब AI
00:00:03वेबसाइटों को एक बार में बनाने में माहिर हो गया है।
00:00:05तो क्या होगा अगर वेब को और मजेदार बनाना आसान हो जाए? बिल्कुल ऐसे। चिंता न करें, मैं
00:00:09आपको रोक नहीं रहा हूँ या कुछ और, बस इस वेबसाइट पर थोड़ा मज़ा कर रहा हूँ। आप देख सकते हैं अब
00:00:13कि नीचे मेरी आंखों का एक समूह है। और वैसे, अगर मैं सब्सक्राइब बटन
00:00:17दबा सकता हूँ, तो आप भी दबा सकते हैं।
00:00:18इसके बजाय, शायद आप अपनी साइट के लिए अधिक कार्यात्मक लेकिन सुंदर इंटरैक्शन चाहते हैं, या
00:00:22आप नए डार्क पैटर्न का आविष्कार करना चाहते हैं जैसे कि किसी उपयोगकर्ता को अनसब्सक्राइब करने के लिए पिनबॉल खिलाना। या बस
00:00:27शायद काम के एक लंबे दिन के बाद आप बीयर के साथ अपने कंप्यूटर पर बैठना चाहते हैं, बैठना
00:00:30चाहते हैं अपने वर्चुअल कंप्यूटर पर बीयर के साथ और ट्विटर या कुछ और ब्राउज़ करना चाहते हैं। यह सब
00:00:34संभव है 'HTML in Canvas' नामक किसी चीज़ की बदौलत। आइए इसके बारे में बात करते हैं।
00:00:43तो मुझे इसके बारे में हाल ही में ट्विटर पर मैट रोथेनबर्ग की वजह से पता चला। और मेरे
00:00:46यह पोस्ट देखने के बाद, ऐसा लगा जैसे ट्विटर पर एक हफ़्ते तक धमाल मच गया, जहाँ हर समय बहुत सारे कूल
00:00:50डेमो सामने आ रहे थे। मैंने देखा कि वेस बॉस इसे आज़मा रहे थे और बहुत
00:00:54मज़ा कर रहे थे। फिर मैंने AA का भी यह डेमो देखा जो उंगली से बंदूक चलाने वाला था। और हमारे दोनों डेमो
00:00:58ने वास्तव में उस यूट्यूब डेमो को प्रेरित किया जो मैंने इंट्रो में दिखाया था। तो मैं सभी स्रोतों को लिंक कर दूँगा
00:01:02डेमो के लिए, नीचे विवरण में, यदि आप और देखना चाहते हैं।
00:01:05फिलहाल, 'HTML in Canvas' क्या है? खैर, संक्षेप में, यह आपको वास्तविक इंटरैक्टिव
00:01:10DOM तत्वों को सीधे अपने WebGL या 2D कैनवस में डालने देता है। और फिलहाल यह सिर्फ एक प्रस्ताव है।
00:01:15यह वास्तव में क्रोम कैनरी (Chrome Canary) में एक प्रयोग के रूप में जोड़ा गया है, यही कारण है कि ये सभी डेमो
00:01:19हाल ही में सामने आए हैं और आप अभी क्रोम कैनरी में इस फ्लैग को इनेबल करके इसे आज़मा सकते हैं।
00:01:24आपका अगला सवाल हो सकता है कि क्यों? खैर, इसलिए क्योंकि कैनवस कुछ अद्भुत
00:01:28UI और कस्टमाइज़ेशन को सक्षम कर सकता है जैसा कि हमने पहले ही देखा है। ऐसी चीजें जिन्हें CSS में करना कठिन, यदि असंभव नहीं तो,
00:01:32होता है। लेकिन जो कैनवस नहीं कर सकता वह है टेक्स्ट और HTML सामग्री के जटिल लेआउट को आसानी से रेंडर करना।
00:01:38आपको उन्हें आंतरिक रूप से खरोंच से फिर से बनाना पड़ता है। और इसका मतलब यह है कि कैनवस
00:01:42आधारित सामग्री एक्सेसिबिलिटी, अंतर्राष्ट्रीयकरण, प्रदर्शन और गुणवत्ता जैसी चीजों से प्रभावित हो सकती है।
00:01:47और ये वे चीजें हैं जिन्हें HTML ने काफी हद तक हल कर लिया है। तो 'HTML in Canvas' दोनों
00:01:51दुनिया का सबसे अच्छा मिश्रण है।
00:01:52यह कैसे काम करता है, यह दिखाने के लिए, मुझे आपको इसे इस्तेमाल करने का एक डेमो दिखाने दें। और जो
00:01:56मेरे पास यहाँ है वह लंदन अंडरग्राउंड समय-सारणी साइट है जिसे मैंने सालों पहले बनाया था, इससे पहले कि AI
00:02:00इसे इतनी आसानी से बना पाता। और मैंने हमेशा सोचा था कि यह कितना अच्छा होगा अगर हम इस जानकारी को
00:02:02एक 3JS सीन के अंदर रख सकें। अब हाँ, तकनीकी रूप से आप इसे 3JS के साथ कर सकते हैं, जाहिर है 3JS समर्थन करता है
00:02:08टेक्स्ट, लेकिन यह बहुत आसान होगा अगर मैं केवल 'HTML in Canvas' का उपयोग कर सकूँ और उस तत्व को ले सकूँ
00:02:12जो समय-सारणी का उपयोग करता है और इसे सीधे अपने सीन के अंदर डाल सकूँ। तो यहाँ थॉमस द टैंक इंजन की तस्वीर के बजाय
00:02:16मैं बस अपना HTML देखना चाहता हूँ। ऐसा करने के लिए, पहला कदम
00:02:20उस HTML को लेना होगा जिसे हम वास्तव में सीन में रेंडर करना चाहते हैं और उसे
00:02:24कैनवस के अंदर रखना होगा। तो यह वह HTML है जिसने वास्तव में उस बोर्ड को बनाया था जिसे हमने
00:02:28अभी देखा है। और हमने इसे कैनवस के चाइल्ड तत्व के रूप में रखा है। अब फिलहाल, यह
00:02:32तत्व वास्तव में कैनवस फॉलबैक के रूप में काम कर रहा है। तो अगर कैनवस उपयोगकर्ता के
00:02:36ब्राउज़र पर किसी कारण से लोड नहीं होता है, तो वे वास्तव में इस तत्व को देखेंगे। और वह नहीं है जो
00:02:39हम चाहते हैं। इसे ठीक करने के लिए, 'HTML in Canvas' के साथ हम अपने कैनवस तत्व पर
00:02:44layout subtree नामक एक एट्रिब्यूट प्रदान कर सकते हैं। यह फिर ब्राउज़र को कैनवस के बच्चों को
00:02:48वास्तविक लेआउट प्रतिभागियों के रूप में मानने के लिए कहता है। तो उन्हें एक्सेसिबिलिटी ट्री में डाल दिया जाता है, वे फोकस प्राप्त कर सकते हैं,
00:02:52लेकिन उन्हें अभी भी स्क्रीन पर पेंट नहीं किया जाता है। हम इसे मेरे डेमो में देख सकते हैं
00:02:56जहाँ अभी भी कुछ भी नहीं दिख रहा है। तत्व यहाँ कहीं भी प्रदर्शित नहीं होने वाला है,
00:03:00लेकिन हमारे पास यह 'इंस्पेक्ट एलिमेंट' में है और हम उस पर होवर करते हैं। यह दिखाता है कि यह तकनीकी रूप से
00:03:04रेंडर हो रहा है। यह बस अदृश्य है। तो वास्तव में कैनवस पर रेंडर करने के लिए, हमें इसे
00:03:08एक टेक्सचर में बदलने की आवश्यकता है, जिसे हम फिर थॉमस द टैंक इंजन तस्वीर की जगह उपयोग कर सकते हैं। और
00:03:12यही मैं यहाँ इस फ़ंक्शन के साथ कर रहा हूँ। अब, इसमें से अधिकांश वास्तव में 'थ्री JS' है,
00:03:15तो आपको इसके बारे में चिंता करने की ज़रूरत नहीं है। पहला वाला बस टेक्सचर प्राप्त करना है, जो
00:03:19GL टेक्सचर है, और वह फिलहाल थॉमस द टैंक इंजन की तस्वीर है। लेकिन फिर हम
00:03:22इस लाइन पर 'HTML in Canvas' फ़ंक्शन का उपयोग कर रहे हैं जिसे text element image 2d कहते हैं।
00:03:27अब यह काफी जटिल दिखता है, लेकिन हम बस इतना कर रहे हैं कि हम थ्री JS टेक्सचर ले रहे हैं
00:03:30जिस पर हम तत्व को लागू करना चाहते हैं। हम इसके बारे में कुछ जानकारी प्रदान कर रहे हैं कि यह कैसे रेंडर होता है जैसे
00:03:34कलर स्पेस और GPU के लिए अन्य चीजें, लेकिन हमें इसके बारे में बहुत चिंता करने की ज़रूरत नहीं है।
00:03:38और फिर हम वह HTML तत्व भी प्रदान कर रहे हैं जिसे हम रेंडर करना चाहते हैं। इस मामले में,
00:03:42यह बोर्ड है। और यह बस इस लाइन से आता है जहाँ हम केवल document dot
00:03:45get element by ID का उपयोग करके उस तत्व को प्राप्त कर रहे हैं जिसे हमने कैनवस के अंदर रखा था। उसके साथ
00:03:49वापस हमारे डेमो में, आप देख सकते हैं कि हमारे पास वास्तव में उस छवि के स्थान पर समय-सारणी है और यह
00:03:53लाइव अपडेट हो रही है। घड़ी अपडेट हो रही है और मैंने समय भी अपडेट होते देखा है। तो यह अब
00:03:57हमारे HTML तत्व का उपयोग कर रहा है, लेकिन इसे इस कैनवस पर एक टेक्सचर के रूप में प्रदान किया जा रहा है। अब हम
00:04:02'इंस्पेक्ट एलिमेंट' में जा रहे हैं। आप वास्तव में उस तत्व पर होवर कर सकते हैं जो यह बोर्ड है
00:04:06जो अभी भी एक अदृश्य तरीके से रेंडर किया जा रहा है। और ऐसा इसलिए है क्योंकि आप इसे
00:04:09मूल रूप से केवल यह देखने के रूप में सोच सकते हैं कि यह तत्व क्या होगा, इसका स्क्रीनशॉट लेना और फिर
00:04:14इसे टेक्सचर की जगह पर रखना। तो यह हर बार अपडेट होगा जब उनमें से कोई भी तत्व फिर से रेंडर होगा।
00:04:19यह वास्तव में HTML कैनवस में एक पेंट इवेंट के साथ किया जाता है जो अपडेट को ट्रिगर करता है जब
00:04:22यह पता लगाता है कि कोई भी कैनवस चाइल्ड तत्व फिर से रेंडर किया गया है, लेकिन आप
00:04:26चाहे तो रिपेंट (repaint) का अनुरोध भी कर सकते हैं, जैसा कि आप request animation frame के साथ कर सकते हैं।
00:04:30अब यदि आप अभी भी थोड़े भ्रमित हैं, तो मैं GitHub पर उस प्रस्ताव को देखने की अत्यधिक अनुशंसा करता हूँ।
00:04:34इसमें ढेर सारी जानकारी और डेमो हैं। और सच कहूँ तो, मैंने थोड़ा
00:04:38अधिक जटिल रास्ता अपनाया, थ्री JS और WebGL को चुनकर। लेकिन अगर आप सबसे
00:04:42बुनियादी उदाहरण देखना चाहते हैं, तो आपको बस इतना करना है कि कैनवस के अंदर, कुछ ऐसा डालें जैसे एक फ़ॉर्म तत्व
00:04:46यहाँ। और यदि आप उसे कैनवस पर रेंडर करना चाहते हैं, तो हम बस कह सकते हैं context dot draw
00:04:49element image, फिर एक फ़ॉर्म तत्व प्रदान करें और यह भी कि हम उसे कहाँ रखना चाहते हैं। तो यह
00:04:54HTML in Canvas का सबसे सरल रूप है। मैं वास्तव में बहुत जल्दी आपको
00:04:58यह डेमो भी दिखाना चाहता हूँ। मुझे लगता है कि इसमें बहुत मज़ा है। आप देख सकते हैं कि यह वेब GPU और copy element image
00:05:02फ़ंक्शन का उपयोग करता है, HTML in Canvas का, जेली स्लाइडर के नीचे एक div खींचने के लिए। और यह बस बहुत मज़ेदार है।
00:05:07लेकिन इसके बारे में वास्तव में कूल बात यह है कि यह वास्तव में अभी भी पर्दे के पीछे एक इनपुट का उपयोग कर रहा है।
00:05:11यह सिर्फ एक बहुत ही कूल कस्टम इनपुट है। यह वह प्रकार की चीजें हैं जो 'HTML in Canvas' सक्षम कर सकता है।
00:05:16हालांकि कुछ कमियां हैं जिन्हें प्रस्ताव सुलझाने की कोशिश कर रहा है। उनमें से एक मुख्य
00:05:19जाहिर है प्रदर्शन है। यह फिलहाल थोड़ा अजीब है। कुछ बग भी हैं
00:05:24जैसे draw element image का DOM स्थिति की तुलना में एक फ्रेम पीछे होना। यह थोड़ा
00:05:28विजुअल डि-सिंक (visual desync) है। और जाहिर तौर पर अगर आप कैनवस बच्चों के अंदर
00:05:32स्क्रॉल बार डालने की कोशिश करते हैं, तो यह बस क्रैश हो जाएगा। लेकिन यही कारण है कि यह अभी के लिए एक प्रयोग है।
00:05:36यह बिल्कुल वही है जिसकी वे तलाश कर रहे हैं। कुछ गोपनीयता संबंधी चिंताएं भी रही हैं कि यदि
00:05:40यह एक HTML तत्व में रेंडर कर सकता है, तो आप नहीं चाहेंगे कि यह JavaScript के माध्यम से
00:05:44प्राप्त होने वाली सामान्य जानकारी से अधिक जानकारी लीक करे। इसलिए उनके पास 'प्राइवेसी प्रिजर्विंग पेंटिंग'
00:05:48जोखिम है, जिसमें संवेदनशील जानकारी जैसे सिस्टम रंग, थीम, प्राथमिकताएं, स्पेलिंग और
00:05:52ग्रामर मार्कर, विज़िट किए गए लिंक की जानकारी आदि को शामिल नहीं किया गया है। और मुझे बस लगता है कि यहाँ मुख्य चिंता यह है कि
00:05:56वे फिंगरप्रिंटिंग के लिए डेटा संग्रह का एक और बिंदु नहीं जोड़ना चाहते हैं। किसी भी तरह,
00:06:00मुझे अब तक जो मैंने देखा है वह पसंद है। तो मुझे खुशी होगी अगर यह सिर्फ एक प्रयोग होने से बाहर निकल सके,
00:06:04लेकिन मैं बहुत उत्सुक हूँ कि आप क्या सोचते हैं। मुझे नीचे कमेंट्स में बताएं, क्यों सब्सक्राइब करें
00:06:07और हमेशा की तरह, अगले वाले में मिलते हैं।