00:00:00Menurut saya internet sangat membutuhkan lebih banyak keunikan, terutama sekarang karena AI
00:00:03sudah mahir membuat situs web dalam sekali coba.
00:00:05Jadi, bagaimana jika membuat web yang lebih menyenangkan itu lebih mudah? Seperti ini. Jangan khawatir, saya
00:00:09tidak menghalangi Anda atau apa pun, hanya bersenang-senang sedikit di situs web ini. Anda bisa lihat sekarang
00:00:13ada banyak mata saya di bagian bawah. Dan juga, jika saya bisa menekan tombol
00:00:17subscribe, Anda juga bisa.
00:00:18Sebagai gantinya, mungkin Anda menginginkan interaksi yang lebih fungsional namun indah untuk situs Anda, atau
00:00:22Anda ingin menciptakan pola gelap baru seperti membuat pengguna bermain pinball untuk berhenti berlangganan. Atau mungkin
00:00:27setelah seharian bekerja, Anda ingin duduk di depan komputer dengan segelas bir, untuk duduk
00:00:30di depan komputer virtual Anda dengan segelas bir dan menjelajahi Twitter atau semacamnya. Semua itu
00:00:34mungkin berkat sesuatu yang disebut HTML di Canvas. Mari kita bahas.
00:00:43Jadi saya baru mengetahuinya baru-baru ini berkat Matt Rothenberg di Twitter. Dan setelah saya
00:00:46melihat postingan ini, sepertinya itu memicu seminggu di Twitter di mana ada banyak demo keren
00:00:50bermunculan sepanjang waktu. Saya melihat Wes Boss mencobanya dan bersenang-senang.
00:00:54Lalu saya juga melihat yang satu ini dari AA, yaitu demo pistol jari. Dan kedua demo kami
00:00:58sebenarnya menginspirasi demo YouTube yang saya tampilkan di intro. Jadi saya akan menautkan semua sumber
00:01:02untuk demo yang ditampilkan di deskripsi di bawah jika Anda ingin melihat lebih banyak.
00:01:05Untuk saat ini, apa itu HTML di Canvas? Singkatnya, ini memungkinkan Anda untuk memasukkan elemen DOM
00:01:10interaktif sungguhan langsung ke dalam WebGL atau Canvas 2D Anda. Dan saat ini itu baru berupa proposal.
00:01:15Kami sebenarnya sudah menambahkannya ke Chrome Canary sebagai eksperimen, itulah sebabnya semua demo ini
00:01:19bermunculan baru-baru ini dan Anda dapat mencobanya di Chrome Canary sekarang dengan mengaktifkan flag ini.
00:01:24Pertanyaan Anda selanjutnya mungkin adalah mengapa? Yah, itu karena Canvas dapat memungkinkan beberapa UI
00:01:28yang luar biasa dan kustomisasi seperti yang sudah kita lihat. Hal-hal yang lebih sulit dilakukan jika tidak mustahil
00:01:32di CSS. Namun apa yang tidak bisa dilakukan Canvas adalah merender tata letak teks dan konten HTML yang kompleks dengan mudah.
00:01:38Anda cenderung harus membangunnya dari awal secara internal. Dan ini berarti konten berbasis Canvas
00:01:42bisa mengalami masalah seperti aksesibilitas, internasionalisasi, performa, dan kualitas.
00:01:47Dan ini adalah hal-hal yang sebagian besar sudah diselesaikan oleh HTML. Jadi HTML di Canvas adalah yang terbaik dari
00:01:51keduanya.
00:01:52Untuk menunjukkan cara kerjanya, izinkan saya memandu Anda melalui demo penggunaan aslinya. Dan apa
00:01:56yang saya miliki di sini adalah situs jadwal kereta bawah tanah London yang saya buat bertahun-tahun yang lalu sebelum AI bisa
00:02:00mungkin melakukannya dalam sekali coba. Dan saya selalu berpikir akan keren jika kita bisa mendapatkan info ini
00:02:02di dalam adegan 3JS. Sekarang ya, secara teknis Anda bisa melakukan ini dengan 3JS, jelas 3JS mendukung
00:02:08teks, tetapi akan jauh lebih mudah jika saya hanya menggunakan HTML di Canvas dan mengambil elemen
00:02:12yang menggunakan jadwal tersebut dan memasukkannya langsung ke dalam adegan saya. Jadi alih-alih gambar
00:02:16Thomas the Tank Engine ini, saya hanya ingin melihat HTML saya. Untuk melakukannya, langkah pertama
00:02:20adalah mengambil HTML yang ingin kita render di adegan dan memasukkannya
00:02:24ke dalam canvas. Jadi ini adalah HTML yang benar-benar membangun papan yang baru saja kita
00:02:28lihat. Dan kita menempatkannya sebagai elemen turunan dari canvas itu sendiri. Sekarang saat ini,
00:02:32elemen ini sebenarnya berfungsi sebagai fallback canvas. Jadi jika canvas tidak dimuat di browser pengguna
00:02:36karena alasan apa pun, mereka sebenarnya akan melihat elemen ini. Dan bukan itu yang
00:02:39kita inginkan. Untuk memperbaikinya, apa yang bisa kita lakukan dengan HTML di Canvas adalah pada elemen canvas kita, sediakan
00:02:44atribut yang disebut layout subtree. Ini kemudian memberi tahu browser untuk memperlakukan turunan canvas
00:02:48sebagai partisipan tata letak yang nyata. Jadi mereka dimasukkan ke dalam pohon aksesibilitas, mereka bisa menerima
00:02:52fokus, tetapi mereka tetap tidak dicat ke layar. Kita bisa melihatnya di demo saya di sini
00:02:56di mana masih belum ada yang muncul. Elemen tersebut tidak akan ditampilkan di mana pun di sini,
00:03:00tetapi kita memilikinya di elemen inspect dan kita mengarahkan kursor ke sana. Itu memang menunjukkan bahwa secara teknis
00:03:04itu sedang merender. Hanya saja tidak terlihat. Jadi untuk benar-benar merender di canvas, kita perlu mengubahnya
00:03:08menjadi tekstur, yang kemudian bisa kita gunakan untuk menggantikan gambar Thomas the Tank Engine. Dan
00:03:12itulah yang sebenarnya saya lakukan dengan fungsi di sini. Sekarang, sebagian besar ini sebenarnya adalah three
00:03:15JS, jadi Anda tidak perlu khawatir tentang hal itu. Yang pertama hanyalah mendapatkan tekstur,
00:03:19yaitu tekstur GL, dan itu adalah gambar Thomas the Tank Engine saat ini. Tapi kemudian apa
00:03:22yang kita lakukan pada baris ini adalah menggunakan fungsi HTML di canvas bernama text element image 2d.
00:03:27Sekarang terlihat cukup rumit, tetapi yang kita lakukan hanyalah mengambil tekstur three JS
00:03:30yang ingin kita terapkan elemennya. Kita memberikan beberapa informasi tentang bagaimana itu dirender seperti
00:03:34ruang warna dan hal-hal lain untuk GPU, tetapi kita tidak perlu terlalu khawatir tentang itu.
00:03:38Dan kemudian kita juga hanya menyediakan elemen HTML yang ingin kita render. Dalam kasus ini,
00:03:42yaitu papan. Dan itu berasal dari baris ini di mana kita hanya menggunakan document dot
00:03:45get element by ID untuk mendapatkan elemen yang kita masukkan ke dalam canvas. Dengan itu kembali
00:03:49di demo kita, Anda bisa melihat kita sekarang benar-benar memiliki jadwal di tempat gambar itu dan itu
00:03:53memperbarui secara langsung. Jamnya diperbarui dan saya melihat waktunya juga diperbarui. Jadi ini sekarang
00:03:57menggunakan elemen HTML kita, tetapi diberikan sebagai tekstur ke canvas ini. Sekarang kita akan
00:04:02melakukan inspect element. Anda sebenarnya bisa melihat kita mengarahkan kursor ke elemen yang merupakan papan ini yang
00:04:06masih dirender dengan cara yang tidak terlihat. Dan itu karena Anda bisa menganggap ini
00:04:09sebagai pada dasarnya hanya melihat apa elemen ini nantinya, mengambil tangkapan layar dari ini dan kemudian
00:04:14menempatkannya di tempat tekstur. Jadi itu akan diperbarui setiap kali elemen-elemen tersebut dirender ulang.
00:04:19Ini sebenarnya dilakukan dengan event paint di HTML canvas yang memicu pembaruan saat
00:04:22ia mendeteksi bahwa salah satu elemen turunan canvas telah dirender ulang, tetapi Anda
00:04:26juga bisa meminta pengecatan ulang jika mau, mirip dengan bagaimana Anda bisa dengan request animation frame.
00:04:30Sekarang jika Anda masih sedikit bingung, saya sangat menyarankan untuk memeriksa proposal itu di GitHub.
00:04:34Itu memiliki banyak informasi dan demo. Dan sejujurnya, saya memang menempuh rute yang sedikit
00:04:38lebih kompleks, memilih three JS dan WebGL. Tapi jika Anda ingin melihat contoh paling
00:04:42dasar, yang perlu Anda lakukan adalah di dalam canvas, masukkan sesuatu seperti elemen form
00:04:46di sini. Dan jika Anda ingin merender itu ke canvas, kita bisa cukup mengatakan context dot draw
00:04:49element image, lalu sediakan elemen form dan juga di mana kita ingin meletakkannya. Jadi itu
00:04:54adalah bentuk paling sederhana dari HTML di canvas. Saya juga hanya ingin menunjukkan dengan sangat cepat
00:04:58demo ini. Menurut saya ini sangat menyenangkan. Anda bisa melihat ini menggunakan web GPU dan fungsi copy element image
00:05:02dari HTML di canvas untuk menggambar div di bawah penggeser jeli. Dan itu sangat menyenangkan.
00:05:07Tapi hal yang sangat keren tentang ini adalah itu sebenarnya masih menggunakan input di balik layar.
00:05:11Itu hanyalah input kustom yang sangat keren. Itulah jenis hal yang bisa diaktifkan oleh HTML di canvas.
00:05:16Namun ada beberapa kelemahan yang coba diselesaikan oleh proposal tersebut. Salah satu yang utama
00:05:19jelas adalah performa. Saat ini sedikit tidak stabil. Ada juga beberapa
00:05:24bug seperti draw element image yang terlambat satu frame dibandingkan dengan status DOM. Ini sedikit
00:05:28sedikit desinkronisasi visual. Dan tampaknya jika Anda mencoba memasukkan bilah gulir ke dalam
00:05:32turunan canvas, itu akan langsung crash. Tapi inilah mengapa ini menjadi eksperimen untuk saat ini.
00:05:36Ini persis seperti yang mereka cari. Ada juga beberapa masalah privasi bahwa jika
00:05:40ini bisa merender elemen HTML, Anda tidak ingin itu membocorkan informasi lebih banyak daripada yang biasanya
00:05:44bisa Anda dapatkan melalui JavaScript. Jadi mereka memang memiliki risiko pengecatan yang menjaga privasi
00:05:48mengecualikan info sensitif seperti warna sistem, tema, preferensi, penanda ejaan dan
00:05:52tata bahasa, info tautan yang dikunjungi, dan sebagainya. Dan saya hanya berpikir kekhawatiran utama di sini adalah bahwa
00:05:56mereka tidak ingin menambahkan titik pengumpulan data lagi untuk sidik jari. Bagaimanapun,
00:06:00saya suka apa yang telah saya lihat sejauh ini. Jadi saya akan senang jika ini bisa keluar dari sekadar menjadi eksperimen,
00:06:04tapi saya sangat ingin tahu pendapat Anda. Beri tahu saya di kolom komentar di bawah mengapa mereka
00:06:07subscribe dan seperti biasa, sampai jumpa di video berikutnya.