00:00:00أعتقد أن الإنترنت يحتاج بشدة إلى المزيد من الخيال، خاصة الآن بعد أن أصبح الذكاء الاصطناعي
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 في Canvas. دعونا نتحدث عنه.
00:00:43لقد عرفت بهذا مؤخراً بفضل مات روثنبيرغ على تويتر. وبعد أن
00:00:46رأيت هذا المنشور، بدا وكأنه أطلق أسبوعاً على تويتر مليئاً بالكثير من
00:00:50العروض التوضيحية الرائعة التي كانت تظهر طوال الوقت. رأيت أن ويس بوس كان يجرب هذا ويحظى بالكثير
00:00:54من المرح. ثم رأيت أيضاً هذا العرض من AA الذي كان عبارة عن مسدس إصبع. وكلا عرضينا
00:00:58ألهما في الواقع ذلك العرض الخاص بـ يوتيوب الذي وضعته في المقدمة. لذا سأضع روابط جميع المصادر
00:01:02للعروض الموضحة في الوصف أدناه إذا كنت ترغب في رؤية المزيد.
00:01:05بالنسبة للآن، ما هو HTML في Canvas؟ حسناً، باختصار، هو ببساطة يسمح لك بإسقاط عناصر
00:01:10DOM تفاعلية حقيقية مباشرة في عناصر WebGL أو 2D canvas الخاصة بك. وفي الوقت الحالي، هو مجرد مقترح.
00:01:15لقد تمت إضافته بالفعل إلى Chrome Canary كتجربة، وهذا هو السبب في أن كل هذه العروض
00:01:19التوضيحية قد ظهرت مؤخراً ويمكنك تجربتها في Chrome Canary الآن عن طريق تفعيل هذا العلم.
00:01:24سؤالك التالي قد يكون "لماذا؟" حسناً، لأن Canvas يمكنه تمكين بعض واجهات المستخدم
00:01:28والتخصيصات الرائعة كما رأينا بالفعل. أشياء يصعب القيام بها، إن لم تكن مستحيلة،
00:01:32باستخدام CSS. لكن ما لا يستطيع Canvas فعله هو عرض تخطيطات معقدة للنصوص ومحتوى HTML بسهولة.
00:01:38غالباً ما تضطر إلى إعادة بنائها من الصفر داخلياً. وهذا يعني أن المحتوى المعتمد
00:01:42على Canvas يمكن أن يعاني من مشاكل في الوصول، التدويل، الأداء والجودة.
00:01:47وهذه أشياء عالجتها HTML إلى حد كبير. لذا فإن HTML في Canvas هو الأفضل في
00:01:51كلا العالمين.
00:01:52لأوضح لك كيفية عمل ذلك، دعني آخذك خلال عرض توضيحي لاستخدامه فعلياً. وما
00:01:56لدي هنا هو موقع جداول مواعيد مترو أنفاق لندن الذي صنعته منذ سنوات قبل أن يتمكن الذكاء الاصطناعي
00:02:00من القيام بذلك بضغطة واحدة. ولطالما اعتقدت أنه سيكون من الرائع لو تمكنا من الحصول على هذه المعلومات
00:02:02داخل مشهد Three.js. الآن نعم، تقنياً يمكنك فعل ذلك باستخدام Three.js، ومن الواضح أن Three.js تدعم
00:02:08النصوص، لكن سيكون من الأسهل بكثير إذا تمكنت فقط من استخدام HTML في Canvas وأخذ العنصر
00:02:12الذي يستخدم الجدول الزمني ووضعه مباشرة داخل مشهدي. فبدلاً من هذه الصورة
00:02:16لقطار "توماس ذا تانك إنجين" هنا، أريد فقط رؤية HTML الخاص بي. للقيام بذلك، الخطوة الأولى
00:02:20ستكون أخذ HTML الذي نريد عرضه فعلياً في المشهد ووضعه
00:02:24داخل الـ Canvas. إذن هذا هو HTML الذي بنى فعلياً تلك اللوحة التي
00:02:28رأيناها للتو. ووضعناه كعنصر تابع لـ Canvas نفسه. الآن في هذه اللحظة، هذا
00:02:32العنصر يعمل في الواقع كبديل لـ Canvas. لذا إذا لم يتم تحميل Canvas على متصفح
00:02:36المستخدم لأي سبب من الأسباب، فسيشاهدون هذا العنصر. وهذا ليس ما
00:02:39نريده. لإصلاح ذلك، ما يمكننا فعله باستخدام HTML في Canvas هو توفير سمة على عنصر canvas
00:02:44تسمى layout subtree. هذا يخبر المتصفح بمعاملة أي عناصر تابعة لـ canvas
00:02:48كمشاركين فعليين في التخطيط. لذا يتم وضعهم في شجرة الوصول، ويمكنهم تلقي
00:02:52التركيز، لكنهم لا يزالون غير مرسومين على الشاشة. يمكننا رؤية ذلك في عرضي التوضيحي هنا
00:02:56حيث لا يزال لا يوجد شيء يظهر. لن يظهر العنصر في أي مكان هنا،
00:03:00لكن لدينا هذا في "فحص العنصر" (inspect element) وعندما نمرر المؤشر فوقه. يظهر أنه تقنياً
00:03:04يتم عرضه. إنه غير مرئي فقط. لذا للرسم فعلياً على الـ Canvas، نحتاج إلى تحويله
00:03:08إلى نسيج (texture)، والذي يمكننا بعد ذلك استخدامه بدلاً من صورة "توماس ذا تانك إنجين". و
00:03:12هذا بالضبط ما أفعله بهذه الدالة هنا. الآن، معظم هذا في الواقع Three
00:03:15JS، لذا لا داعي للقلق بشأن ذلك. الأول هو ببساطة الحصول على النسيج، وهو
00:03:19GL texture، وهو صورة "توماس ذا تانك إنجين" في الوقت الحالي. ولكن بعد ذلك ما
00:03:22نفعله في هذا السطر هو استخدام دالة HTML في canvas تسمى textElementImage2d.
00:03:27الآن تبدو معقدة نوعاً ما، لكن كل ما نفعله هو أننا نأخذ نسيج Three.js الذي
00:03:30نريد تطبيق العنصر عليه. نحن نقدم بعض المعلومات حول كيفية عرضه، مثل
00:03:34مساحة اللون وأشياء أخرى لوحدة معالجة الرسومات (GPU)، لكن لا نحتاج للقلق بشأن ذلك كثيراً.
00:03:38وبعد ذلك نقوم أيضاً بتوفير عنصر HTML الذي نريد عرضه. في هذه الحالة،
00:03:42إنه اللوحة. وهذا يأتي ببساطة من هذا السطر هنا حيث نستخدم document.getElementById
00:03:45للحصول على العنصر الذي وضعناه داخل الـ Canvas. مع عودة ذلك
00:03:49إلى عرضنا التوضيحي، يمكنك رؤية أن لدينا الآن الجدول الزمني مكان تلك الصورة وهو
00:03:53يتحدث مباشرة. الساعة تتحدث وقد رأيت الأوقات تتحدث أيضاً. إذن هذا الآن
00:03:57يستخدم عنصر HTML الخاص بنا، ولكن يتم توفيره كنسيج على هذا الـ Canvas. الآن سنقوم
00:04:02بفحص العنصر. يمكنك في الواقع رؤية أننا نمرر المؤشر فوق العنصر الذي هو هذه اللوحة التي
00:04:06لا تزال تُعرض بطريقة غير مرئية. وذلك لأنك تستطيع التفكير في هذا
00:04:09باعتباره ببساطة نظرة على ما سيكون عليه هذا العنصر، التقاط لقطة شاشة له ثم
00:04:14وضعه في مكان النسيج. لذا سيتم تحديثه في كل مرة يتم فيها إعادة عرض أي من تلك العناصر.
00:04:19يتم ذلك في الواقع باستخدام حدث طلاء (paint event) في HTML canvas الذي يطلق التحديثات عندما
00:04:22يكتشف أنه تم إعادة عرض أي من العناصر التابعة للـ canvas، ولكن يمكنك
00:04:26أيضاً طلب إعادة طلاء إذا أردت، على غرار كيفية القيام بذلك باستخدام requestAnimationFrame.
00:04:30الآن إذا كنت لا تزال مشوشاً بعض الشيء، فأنا أنصح بشدة بالتحقق من ذلك المقترح على GitHub.
00:04:34إنه يحتوي على الكثير من المعلومات والعروض التوضيحية. ولكي أكون صادقاً معك، لقد اتخذت مساراً
00:04:38أكثر تعقيداً قليلاً، باختياري Three.js وWebGL. ولكن إذا كنت تريد رؤية المثال
00:04:42الأبسط، كل ما عليك فعله هو وضع شيء مثل عنصر form داخل الـ canvas
00:04:46هنا. وإذا كنت تريد عرض ذلك على الـ Canvas، يمكننا ببساطة قول context.draw
00:04:49ElementImage، ثم توفير عنصر نموذج (form element) وأيضاً المكان الذي نريد وضع ذلك فيه. لذا هذا
00:04:54هو الشكل الأبسط لـ HTML في canvas. أريد أيضاً بسرعة كبيرة أن أريكم
00:04:58هذا العرض. أعتقد أنه ممتع للغاية. يمكنك رؤية أنه يستخدم WebGPU ودالة copyElementImage
00:05:02الخاصة بـ HTML في canvas لرسم div تحت شريط تمرير هلامي. وهو ممتع للغاية.
00:05:07ولكن الشيء الرائع حقاً في هذا هو أنه لا يزال يستخدم مدخلاً (input) خلف الكواليس.
00:05:11إنه مجرد مدخل مخصص رائع جداً. هذا هو نوع الأشياء التي يمكن لـ HTML في canvas تمكينها.
00:05:16هناك بعض العيوب رغم ذلك التي يحاول المقترح معالجتها. أحد العيوب الرئيسية
00:05:19بالطبع هو الأداء. إنه متذبذب قليلاً في الوقت الحالي. هناك أيضاً بضع
00:05:24أخطاء مثل كون drawElementImage متأخراً إطاراً واحداً مقارنة بحالة DOM. هذا قليل
00:05:28من عدم التزامن البصري. وعلى ما يبدو إذا حاولت وضع شريط تمرير داخل عناصر
00:05:32الـ canvas التابعة، فسيؤدي ذلك إلى تعطل المتصفح مباشرة. ولكن هذا هو سبب كونه تجربة في الوقت الحالي.
00:05:36هذا بالضبط ما يبحثون عنه. كانت هناك أيضاً بعض المخاوف المتعلقة بالخصوصية بأنه إذا
00:05:40كان هذا قادراً على عرض عنصر HTML، فأنت لا تريده أن يسرب أي معلومات أكثر مما
00:05:44يمكنك عادة الحصول عليه من خلال JavaScript. لذا لديهم مخاطر الرسم التي تحافظ على الخصوصية
00:05:48عن طريق استبعاد المعلومات الحساسة مثل ألوان النظام، السمات، التفضيلات، علامات الإملاء
00:05:52والقواعد، معلومات الروابط التي تمت زيارتها، وما إلى ذلك. وأعتقد فقط أن القلق الرئيسي هنا هو
00:05:56أنهم لا يريدون إضافة نقطة أخرى لجمع البيانات من أجل البصمة الرقمية (fingerprinting). في كلتا الحالتين،
00:06:00أعجبني ما رأيته حتى الآن. لذا أود لو كان بإمكان هذا الخروج من كونه مجرد تجربة،
00:06:04لكنني فضولي للغاية لمعرفة رأيك. أخبرني في التعليقات أدناه، ولماذا
00:06:07اشترك، وكما هو الحال دائماً، أراكم في المرة القادمة.