 Terima kasih, saya tidak mahu berhenti-henti. Okey, untuk semua orang di Zoom, maafkan saya untuk kita mulakan. Saya akan melakukannya dengan cepat. Selamat datang ke The 52nd Edition of Talk CSS. Twitter is Singapore CSS. Hashtag is Talk CSS. Web site is Singapore CSS, what? We have a close-up window. Close-up window? The YouTube. The YouTube. Oh. Bagaimana anda melihat? So, I'll try it off. Apa? Boleh saya lakukannya? Boleh? Boleh? Boleh. Okey. The technical guru sayang, carry on. Okey, saya ada kota kondakt. Jangan menghargai orang-orang. Pak Kong akan kembali dari kamu. Ya. Ileksen datang. Jangan lakukannya. Terima kasih. Saya akan berhenti-henti dengan The 52nd Edition untuk mempunyai keperluan teknik kami selama selama 4 tahun. Saya masih tidak tahu bagaimana untuk melakukannya. Ya Tuhan. Sebenarnya, saya tidak dapat melihat siapa yang berada di live chat YouTube. Jadi, saya tidak tahu siapa yang berada di Tuhan. Tapi, di Tuhan, siapa yang berada di Tuhan? Kerana Tuhan membesar di Singapura. Dan... Pak Kong. Yang pertama di Singapura, CSS yang pernah dilakukannya oleh Mr Lim. Jadi, apabila anda melihat Mr Lim, hanya berkata perkara yang baik kepada dia. Baiklah. Kita ada kawan-kawan. Saya akan melakukannya di Singapura. Mungkin akan berlaku di tengah bulan bulan sebab kita... Ya, kita ada schedule yang paling keras semasa kita tidak berjumpa dengan orang lain. Mereka lain. Bersama saya, Riet Nguyen, yang akan berkongsi pada FYI. Kami, Tuan kita, akan bercakap dengan Riet Nguyen. Jadi, anda harus berkongsi. Sebab itu, Riet Nguyen yang berkongsi, yang sebegini. Bagus. Puan-kawan adalah interweb. Sebab COVID-19 masih masih hidup. Ya, saya tidak bercakap tentang itu. Saya tidak bercakap tentang itu. Sangat berbeda. Baiklah. Terima kasih. Terima kasih kerana menikmati interweb. CSS Colour Demand. Seperti yang anda lihat. Ini adalah sifat yang sangat rendah, atau merah. Sifat ini, ia disebut merah. Sebabnya, kita memilih merah merah adalah sebab, saya akan menunjukkan, menunjukkan keputusan di belakang kita untuk mempunyai merah. Ini adalah sebegini yang mempunyai merah sebegini yang kita dapat menyebabkan mempunyai merah merah adalah sifat yang sangat rendah. Ia mempunyai merah merah. Ya. Jadi, kita mempunyai merah untuk mempunyai merah dan sifat yang sangat rendah. Mari kita bercakap tentang merah merah. Sebenarnya, mari kita bercakap tentang merah. Merah merah adalah salah sebuah merah yang tidak terdapat jika anda memikirkannya daripada merah atau merah. Merah. Ia adalah merah di RGB. Ia mempunyai merah 440-490 nm di perjalanan perjalanan elektromagnetik. Merah merah adalah merah merah daripada merah. Kerana merah memaksa 2.5.5. Jika anda dapat melihat nombor saya, merah merah untuk merah merah hanya adalah 2.05. Jadi, merah merah daripada merah dan merah. Jika anda memikirkannya merah merah, anda memikirkannya merah merah daripada merah, terdapat 20% merah daripada merah. Semuanya lain mengingatkan merah yang sama. Merah merah merah adalah merah merah. Merah merah, jika anda memikirkannya, merah merah adalah penggunaan. Kita perlu bercakap tentang perkara ini, i, s, c, n, b, s. Ia adalah 7 letar. Sebenarnya, merah merah adalah k, n, b, c, c, b. Tetapi, tidak semua anda tahu apa yang berlaku. Jadi, jika anda yang tahu, saja menjaga saja. Sebenarnya, sistem ini adalah sistem nama warna dan ia sangat logikal kerana ia dibuat pada 12 warna warna dan sebarang modifiasi. Jadi modifiasi seperti VVIT, Moderate, Brilliant, Strong, Deep, Very Deep, Very Light, Very Pale. Melah merah merah pada sistem i, s, c, c, n, b, s adalah VVIT Blue kerana mengapa tidak. Ya. Melah merah merah semua anda dalam sebaiknya PM. Hari ini, agenda hari ini adalah saya bercakap tentang HTML dan CSS dan kemudian kita mempunyai yang lama yang terlalu lama di sini adalah Curves yang akan dibuat oleh teman yang mempunyai teman yang mempunyai Gawai yang banyak diberikan teman yang yang saya sengaja mendengar atau tidak tapi sering juga juga kita mempunyai yang mempunyai teman yang mempunyai tetapi sebelum itu tentu kita perlu menyebabkan sesi yang saya menentuhi semua orang untuk mendengar Jadi, kita akan memopong HTML setiap sejauh atau memopong sebab saya tidak tahu anda dapat memilih tab sebelum tangan. Lola, scroll scroll scroll. Saya akan zoom. Kerana kenapa tidak, tekanan besar adalah tekanan baik. Hari ini 1 Juli. Saya percaya Firefox 76 terlalu terlalu stabil terlalu semalam. atau sesuatu yang ada di sana. Jadi jika anda telah dikatakan, anda dapat melihat keadaan yang anda sekarang di versi yang terbaru dari Firefox, yang adalah 78. Jika anda telah memperkenalkan keadaan yang terbaik pada tahun 2020, yang terbaik anda bercakap tentang keadaan dan keadaan. Kerana saya rasa, sebenarnya semua browser-vendor berkordinasi dengan baik-baik. Kron orang, ya-ya-ya, keadaan dan keadaan. Sangat bagus. Safari juga membuat beberapa penerbangan disebabkan WWDC. Saya akan bercakap tentangnya nanti. Jadi ia mempunyai keadaan dan keadaan dengan keadaan dan keadaan dan keadaan. Jika anda lupa keadaan dan keadaan, mereka adalah selektor sudo. Jika anda mempunyai keadaan yang lebih kuat, anda dapat meletakkan keadaan keadaan. Pertama-tama, keadaan dan keadaan tidak memperkenalkan keadaan. Saya boleh bercakap lebih banyak apabila kami bercakap tentang Safari nanti, kerana orang WWDC memperkenalkan banyak penerbangan. Yang lain yang diberikan di 78 untuk Firefox adalah mempunyai keadaan dan keadaan untuk sebuah keadaan. Jadi sebenarnya ada banyak keadaan yang saya akan berkata, kerana ia sangat baru dan terutamanya untuk keadaan keadaan. Jadi anda dapat memilih keadaan yang berdasarkan keadaan. Jadi saya rasa keadaan adalah lebih banyak keadaan yang diperkenalkan. Anda dapat meletakkan keadaan pada keadaan dan keadaan. Mereka cuba memperkenalkan keadaan dan dapat memperkenalkan keadaan kerana mereka tidak memperkenalkan keadaan. Kepada keadaan dan keadaan, saya rasa kita sudah melihat keadaan lebih common yang diperkenalkan adalah perkara yang diperkenalkan untuk pilihan pilihan pilihan pilihan. Mereka dapat memperkenalkan keadaan yang sebenarnya juga yang sangat common. Saya rasa untuk radio dan pilihan pilihan, ia adalah sebuah keadaan yang diperkenalkan. Bukan untuk radio, tapi jika anda mempunyai keadaan yang diperkenalkan, jika anda mahu memilih, ia perlu menggunakan keadaan yang diperkenalkan untuk membuat semua itu membuat perlukan. Tetapi itu adalah keadaan yang tidak terlalu baik. Anda akan mengharapkan keadaan dan mengharapkan semuanya. Jadi, kita boleh mengharapkan keadaan yang diperkenalkan dengan CSS yang sangat bagus. Sebuah keadaan yang diperkenalkan, saya mengharapkan keadaan yang terakhir adalah 108. Jadi, banyak keadaan yang diperkenalkan dan perkara seperti itu. Saya mengharapkan keadaan yang diperkenalkan dengan sepanjang bulan. Sebenarnya, keadaan yang baru untuk keadaan yang diperkenalkan dengan keadaan yang diperkenalkan pada WWDC, hanya seperti sumber V, sehingga berlaku sejauh ini. Jika anda mencari jika anda melihat nafas dan tidak memasak makan malam, melihat perlukan censi dan mendengar ini kerana anda memasak. Keadaan yang baru untuk keadaan yang diperkenalkan adalah WWDC video, yang sebenarnya sangat bagus. Perlukan censi online, tetapi mereka memasak keadaan yang diperkenalkan. Jadi, saya meletakkan keadaan yang diperkenalkan dengan javascript dan api api juga. Sebenarnya, tidak terlalu lama. Ada HDTV3, yang sangat menarik. Saya akan bercakap tentang ini. Sebenarnya, jika anda melihat nafas, jika anda memasak keadaan yang diperkenalkan dan mendengar untuk orientasi gambar, jika semua ini memasak keadaan anda, melihat nafas video yang diperkenalkan dan memasak keadaan yang diperkenalkan. Jadi, tidak terlalu lama. Apa yang baru dalam DevTools? Chrome 85, seperti biasa, banyak javascript dan api. Tetapi, jika anda melihat nafas dan api, jika anda melihat nafas dan api, jika anda melihat nafas dan api, CSS- dalam frameworks javascript dalam Chrome 85.彼如此, ada juga tepuk dari tim pengawal yang bercakap tentang berkebaikan serta biasa ini, yang sangat baik. Semua orang boleh mabuk sikit lebih daripada membuatkan kerja dengan bertegur atau tidak. Sebenarnya, saya beritahu ia seorang peluk kembali, dan nanti adalah New in Chrome Maksud saya, jika anda berada di live stream, saya akan ingat. Oh, hai, hai, hai, hai, jackup. Saya tidak tahu. Anda dapat memasak tangan anda di live chat. Okey, anda memasak banyak-banyak kali. Helo, Mr Tan. Terima kasih kerana menikmati saya. Jadi, apa adalah overview CSS? Saya pasti saya memasak tangan saya dan bukan hanya tangan saya. Jadi, anda dapat melihat, ini adalah sebuah kopi kron karnari kerana saya ingin tinggalkan bahagian. Jadi, jumpa-jumpa, jumpa-jumpa. Pertama-tama, bukannya deptose. Dan kemudian, sebenarnya saya tidak dapat ingat. Saya rasa... Maksud saya, keadaan. Anda dapat memasak tangan. Kemudian, anda dapatkan navigasi yang baik. Saya sedikit besar. Satu-satunya. Bagaimana saya dapat memasak? Oh, tidak. Hota California. Anda tidak dapat tinggalkan. Maksud saya, saya akan memasak eksperimen. Kemudian, anda memasakkan overview CSS. Saya akan memasak. Ia sepatutnya berjaya. Kemudian, saya perlu... Saya perlu memasak. Okey, kita cuba memasak. Dan lihat jika ini berjaya. Saya tidak pernah memasak sebelum itu. Saya akan memasak semuanya. Ya, sudah. Kita akan memasak selepas anda memasak eksperimen. Jadi, jika anda memasak, saya akan memasak. Saya akan memasak. Saya akan memasak untuk kelas-kelas-kelas. Kerana kelas-kelas itu sangat kecil. Tapi saya tidak tahu berapa banyak... CSS dan jahat-jahat saya memasak. Jadi, mungkin ini bukan idea yang terbaik. Mari kita memasak. Dan memasak kelas-kelas saya sendiri. Dan kita cuba lagi. Memasak. Sebenarnya, sangat lama. Sebenarnya, saya sudah memasak sebelum itu. Saya tidak memasak selepas itu. Okey, saya akan memasak. Anda sepatutnya melihat... Kita akan memasak. Kita akan memasak. Saya akan ke sana dan menunjukkan... bagaimana ia sepatutnya memasak. Jadi, seperti ini. Jadi, anda harus melihat sumber... ...saya memasak berapa banyak pengalaman. Sebenarnya, saya akan memasak kelas-kelas saya sendiri. Saya tidak mengerti jika anda memasak selama lama. Bagaimanapun, anda akan melihat kelas-kelas anda. Anda dapat melihat jika anda memasak kelas-kelas... etc. Jadi, ia seperti... CSS Report... ...untuk web-nya yang Krom buat untuk anda. Sangat. Saya akan memasak selama lama. Kita boleh kembali ke sini... nanti. Saya akan memasak. Okey, bagaimana lagi? Yang ini cukup kontroversial. Google Confirmation Experiment untuk memasak kelas-kelas dari URL. Tapi... ...saya tidak memasak banyak kelas-kelas ini. Saya lebih suka memasak kelas-kelas. Saya rasa... ...saya akan memasak kelas-kelas ini. Saya tidak memasak kelas-kelas itu... ...sepanjang masa. Jadi, saya tidak tahu apakah dia masih di sana atau tidak. Tapi anda dapat memasak kelas-kelas. Saya rasa saya memasak kelas-kelas ini... ...dan untuk kelas-kelas untuk... ...masa kelas-kelas kelas-kelas... ...atau hanya seorang yang melihat kelas-kelas itu. Kita boleh memasak kelas-kelas lagi. Tapi, ia sebuah kelas-kelas. Jadi, saya tidak tahu apakah ia akan menjadi kelas-kelas ini. Kerana saya... ...saya rasa kelas-kelas itu... ...saya akan memasak kelas-kelas itu... ...untuk kelas-kelas ini. Jadi, itu saja. Yang terakhir adalah Flub Browser. Flub Browser, kami beritahu beberapa kali... ...sebab sebenarnya... ...saya hanya memasak kelas-kelas yang tidak besar. Jadi, saya... ...kalau anda memasak kelas-kelas itu... ...saya juga memasak kelas-kelas yang memasak kelas-kelas itu... ...sebahagian saya adalah... ...sebelum hari ini, 20 tahun lalu... ...kalau anda mahu membuat penjualan yang baru dari Skratch... ...supaya ia sempurna tidak boleh... ...sebelum anda ada penjualan-penjualan. Penjualan-penjualan sangat memasak kelas-kelas itu. Flub Browser adalah sangat menarik... ...sebab mereka tidak mencari untuk memasak dengan penjualan besar. Mereka sebenarnya... ...tentang menjaga kelas yang lebih kelas yang lebih darah... ...yang adalah... ...saya mahu memasak kelas-kelas untuk... ...tentang klient yang berbeza untuk... ...menjaga kelas-kelas itu. Mereka adalah... ...berbeda dengan penjualan-penjualan yang yang berbeza. Saya tidak rasa mereka memastikan... ...sebelum menjaga kelas-kelas itu. Saya percaya jika saya tidak salah, saya tidak mengatakan... ...selepas itu tidak ada penjualan yang sudah diberikan. Kerana mereka adalah produk yang yang lebih terkenal. Tapi mereka mempunyai... ...beri peraturan tentang prosesnya. Mereka juga... ...sebab mereka sangat baru, artikeja mereka... ...sebabnya mempunyai jenis yang terkenal. Mereka sangat menarik... ada orang lain untuk membuat apa-apa pun yang mereka ada. Jadi ada banyak perkara yang mereka mahu bergerak ke perjalanan mountai. Firefox, saya percaya, dan Chrome berdua berdua aktif kerja di migrati tetapi ia seperti, anda cuba mengubah engine apabila air plane bergerak. Jadi ia juga sangat menyerangkan. Jadi mungkin untuk mereka, ia sangat bagus dari awal. Anda boleh pergi dari awal yang berbeza yang berbeza yang berbeza yang berbeza yang berbeza. Jadi sebenarnya saya mahu bercakap tentang perkara ini yang dipanggil asid. Baiklah. Saya rasa beberapa anda mesti melihat perkara yang lebih awal dari perjalanan asid sebelumnya. Kerana, ya. Jadi untuk perjalanan mountai, anda tidak mahu menerima perkara yang saya beritahu. Web compatibility. Ini adalah perjalanan platform. Mereka datang dengan perjalanan asid ini. Mereka ada 3 perkara sejauh ini. Tetapi bahkan versi 3 telah dibuat pada tahun 2008. Jadi ia tidak teruk. Ia tidak teruk. Untuk dipercayai. Pertama, ini adalah versi awal yang paling awal. Ia seperti HTML4. Jadi jika anda menggunakan perjalanan, anda akan menggunakan perjalanan ini. Ada perkara yang sesuai. Perjalanan untuk perkara yang sesuai. Kemudian pada masa yang terakhir, orang tak pernah mengandalkan dengan baik. Mereka tidak akan mencari perkara itu. Mereka tidak akan mengandalkan perkara yang sesuai. Mereka tidak akan mencari perkara yang sesuai. Mereka tidak akan mencari perkara yang sesuai. Jadi saya rasa hari ini, orang dan saya menggunakan perjalanan asid yang pertama. Pertama, asid 2 adalah lebih lebih mudah untuk mengandalkan. Jadi jika anda mengandalkan. Jadi ada perkara yang berbicara. Jadi ini adalah perjalanan. Jadi anda perlu mengandalkan. Anda harus mengandalkan. Saya rasa akan berkurang pada 100%. Asid 3 adalah perkara yang adalah lebih mudah. Tapi cosek ! Masukinan 2008 masih pernah bother Idol. Asid 3. Bahana hating tari n magnitude ini ialah Transmissing menu麼fetas zoals Anda yang berada di Sefarie Di beispielsweise e-Bag axes 97 ini dungup. ... Dan mereka dapat melapati perkara 2018. Jadi, poin maksimum yang anda dapat dapat hari ini adalah 97. Jadi, 97 adalah seperti, oh, bagus kerja semua orang. Jadi, itu adalah aset-aset itu. Jadi, saya fikir ia sangat menarik untuk kisahkan kisah. Okey, kembali. Apa lagi? Oh, spesifikasi. Di platform web, kontribusi, mempunyai banyak dokumentasi yang sangat bagus. Jika anda berminat, saya fikir bahawa bahawa aset-aset itu sangat penting. Saya selalu bercakap tentang kisah web. Kemudian, kisah web tidak sangat jauh. Semua orang boleh berkongsi, orang saja tidak boleh berkongsi. Tetapi, jika kawasan untuk masuk, saya rasa mereka cuba membuatnya sejujurnya. Cuba membuatnya lebih berkawasan. Jadi sekarang, ada yang sangat bagus. Saya menerima kawasan dan kawasan. Kepada kawasan kawasan, untuk membuat kawasan W3C. Kemudian ada kawasan, tidak teruk. Mereka berkongsi, WPC.Guide. Saya tidak tahu bagaimana mereka berkongsi untuk kawasan ini kerana tiga kawasan. Tetapi, orang sebenarnya investasi untuk mendapatkan lebih banyak orang untuk cuba berkongsi kembali ke platform web. Saya ingin beritahu semua orang dengan perhatian untuk kawasan ini. Kenapa? Saya tidak boleh zoom kawasan kawasan, tetapi, ia adalah kawasan. Pilihan kawasan kawasan kawasan ini, saya berikannya kecuali kawasan kawasan kawasan saya. Kawasan kawasan kawasan itu sangat penting untuk hidup. jika anda sudah tahu, saya berbicara dengan cepat kerana saya sedang menerima masa kerana kawasan saya teruk. Okey, sekarang saya mengubah Bersama Huy Jing Jeng dan Jeng Huanx Zuma Man merasakan bahasa ke English. Sebab ini, Huy Jing berkongsi dengan cepat kerana saya sedang menerima masa sehingga kawasan saya berhenti. D sahabat kawasan saya berhenti, nanti, saya akan bersen, Tetapi bagaimana-bagaimana, di sisi spesifikasi, tidak ada banyak update untuk update editorial. Jadi, saya rasa media query level 5 juga tidak ada di sini. Semua orang juga bercakap tentang media query level 5. Dan di dalam layak saya telah diubah beberapa kali ini. Jadi, saya rasa mereka aktifnya bekerja di spek. Jadi mereka melakukan tiga kali. Ya, ia seperti bagaimana saya membuang keputusan saya hari ini. Mereka melihat bahawa, oh, saya terus mengalirkan dia. Kemudian, saya terus mengambil komit yang satu. Siapa tahu? Jadi, tidak ada banyak yang menarik. Satu perkara yang sebenarnya saya ingin bercakap tentang lebih sedikit lagi sebagai sebuah strategi untuk masa saya. Ia adalah bahan-bahan ini. Jadi, salah satu teman saya berjaya bekerja di Gekko. Dan ia berjaya banyak. Ia adalah bahan-bahan yang berjaya. Jadi, ia berjaya. Saya sangat suka apabila pembinaan, pembinaan pelajaran, kerana dia perlu melakukan sub-piksa. So, sub-piksa berkaitan dengan... Bagaimana saya berkata? Bagaimana saya berkata? Ia perlu melakukan dengan sub-piksa berkaitan. So, perkara ini tidak sangat berjaya. Berbicara-bicara, jika anda ingin berkaitan dengan sesuatu yang sangat kisah, ternyata-ternyata, semua permainan anda masih berkaitan, masih berkaitan dengan piksa. Bagaimanapun, anda tahu, pembina-piksa anda masih berkaitan. Jadi, anda tidak boleh menghubungkan kecuali-cuali-cuali-cuali. Bagaimanapun, anda perlu mempunyai pembina-piksa. Jadi, apabila anda mempunyai pembina-piksa yang sangat kecil, seperti 0.01, jika anda mempunyai pembina-piksa yang sangat kecil, jika anda mempunyai pembina-piksa yang sangat kecil, semua orang berkata, ok, kita membuatnya dengan pembina-piksa, tiada masalah. Pembina-piksa berkaitan. Pembina-piksa yang penting adalah apabila anda mempunyai pembina-piksa yang lebih besar, seperti di sini, pembina-piksa anda adalah 10.5. Jadi, 10.5 adalah lebih besar, tidak lebih besar, jadi apabila anda mempunyai pembina-piksa yang 1.5, anda perlu membuat antialiasis, yang mempunyai pembina-piksa yang besar. Jadi, sekarang ini adalah masalah yang berlaku, kerana Gekko, Gekko, Wad Ke, dan semua orang, semua orang mempunyai pembina-piksa yang besar, dan tiada masalah yang baik. Jadi, anda hanya memilih, anda hanya memilih yang, berdua juga ada yang baik, berdua juga ada yang baik. Jadi, apa yang dia lakukan, dia pergi bersama, dia menggabungkan ia, tapi sebelum itu, Wad Ke, Wad Ke dan Firefox akan membuat, akan membuat, akan membuat pada masa yang membuat. Wad Ke, jadi, pembina-piksa yang berkaitan, bagaimana cara saya membuat pembina-piksa yang lebih kecil daripada yang saya fikir ia akan menjadi. Bling tidak membuat itu, Bling menggunakan perjalanan lain, tetapi, perjalanan Bling sebenarnya menolakkan masalah lain, yang tidak membuat pada skor atau original, tetapi, keadaan dia, ada sebuah solusi tidak terbaik, ia adalah sebuah artikel yang sangat keras, jadi, saya sebenarnya memujuk, hanya membuat, ia adalah yang menarik, sangat menarik untuk melihat bagaimana orang, membuat hal, selalu berhutusan, kerana saya tidak tahu, apakah ia telah dibuat atau tidak. Tetapi, saya masih dapat lebih banyak perkara, saya juga dapat lebih banyak perkara untuk berbincang, kita akan memutuskan, artikel saya semua sangat menarik, jadi boleh mencari, atau menulis pembina-pembinaan, yuk, ok, menjelaskan dua pembina-pembinaan, kerana, satu pembina-pembinaan adalah oleh Olivia, jadi, apa-apa saja yang berlaku, saya akan menjelaskan, Olivia, membuatnya lagi, sangat menarik, jadi, ya, ok, sangat menarik, semua orang, tolong pergi dan menarik, menarik petang, saya akan menarik, saya akan menarik, saya akan menarik, ini yang lain, ini adalah oleh, iya, ok, ia tidak menarik, kerana saya akan menarik pembinaan, ok, kita pergi ke Chrome. Pembina-pembinaan kita, Pembina-pembinaan Mr. Lim Cheon, membuat saya sangat mendukung, mendukung pembina-pembinaan, jadi, ya, boleh menarik, saya akan berkata, oh, hi, oh, mendukung pembina-pembinaan, mendukung pembinaan, oh, ya, semua orang, tolong menarik pembinaan itu juga, sangat menarik, bergerak, kamu boleh menarik pembinaan itu, saya ada banyak perkara untuk bercakap, ok, pembina-pembinaan hari ini, pembina-pembinaan hari ini adalah pembina-pembinaan, jadi, kamu selesai, atau kamu mahu saya terus bercakap, atau kamu mahu bercakap bersama saya? Ya, saya akan menarik pembina-pembinaan kamu. ok, sangat menarik, pembina-pembinaan, pembina-pembinaan, ok, ok, kamu sendiri, ot, ot, pembina-pembinaan pertama, saya boleh mulakan dengan Pembina-pembinaan, Pembina-pembinaan, kemudian, berkongsi, maksud saya, ok, mari kita lihat. Kamu tidak mahu jauh, ok, kamu tidak mahu jauh, sebaik saja. Jadi, kamu mungkin atau tidak akan ada kecunjangan yang lebih berat dalam hidup kamu, mungkin sebuah guru yang teruk kamu, mungkin sebuah guru yang teruk kamu, sebuah guru yang teruk kamu, saya akan cuba menerimanya mengapa ia digunakan oleh CSS, kerana ia, kerana ia, hari ini, history of CSS animations. So, everybody you can take a look at my meticulously crafted notes that I actually just put together before I see upon today. So actually it's quite anyhow neat but hello everybody you can, we will talk about this together. So the first transition working draft was published in 20th of March. Okay, the reason I put everything there is because I need to click links. So okay, when you look at old specs right, you will have to have the date there. Of course, this is like the snapshot. If you keep, if you do the, without all the date one, you just go to a data source so you can see all the like, you know, exciting bits. So they'll tell you it's outdated lah, they'll just remind you bro, this is like everybody cannot keep saying bro but like, this version is outdated. But this was the first one published 2009. So this was animation actually quite new when CSS, even until CSS2 don't have. So somebody was like, yeah, let's be able to, you know, transitions hopefully. So the abstract is very, is one sentence that's the best abstract. I feel like, you know, distill the, distill the essence to one sentence. CSS transitions came up, came up first. Yes, both, both scratch actually release at the same time. So like, you know, day rise also 20th of March. Ah, this is because um, you had to have the transition first animation is extension of transition. So animation natural survey.com, one sentence, allow author to modify CSS property values over time. Then, amazing. So yeah, at the time 2009, they wanted to introduce this to, you know, let people animate, transit. And the math starts from here, because at the end of the day, right, what is a transition? A transition is you need to change the value of your CSS property smoothly over time. So got number mah, got number means got match law eh. So at the time, SVG already can animate, but at the time CSS don't have. But because SVG and CSS, people are friends. There's a SVG and CSS effects taskforce, click link. So this, this, this here, this is a taskforce. And then there is actually a very quite cool. Y'all want to do, y'all can subscribe. It's a public mailing list. So it's like public dash effects. So how W3C works is that until now, I'm still very old school. Like it still, so it still goes by the mailing list style of interaction and communication. And what's fun about this is that you can, everything recorded mah. So you can go back and see all the discussion. One very nice one. So Rachel neighbors, I think the children, all your children nowadays, you'll probably know her as oh, the person who write the reactive dogs. But way, way, way, way, way, way before. Actually, no lah, we are, we are, we are quite similar in age. She was a work meeting cartoonist and animator. And a lot of web animation stuff, like, you know, cause is because of her involvement. So let's go back to five years ago, five years ago. Five years ago, Rachel neighbors posted a suggestion in this effects mailing list. In her travels around web animation, the community, like the, the animators they want. Cause animators are, are, are quite, how should I say, they would like to fine tune their animations the best they can. Right. So okay, I think I should zoom this a bit. So she was like, eh, can we have more powerful timing function because you know, like two coordinates, like not very fun. You know what I mean? Um, so she says, ya, ya, ya. Everywhere ya, look ah, okay. I wanna point invest attention to the date. 11 August. Okay, 11 August. And then, immediately same day response ah, by, ah, Amelia Bellamy Royce. Ah, she's also like, she's been the, as far as I know, she's been in the CSS working group forever lah. Same day ah, same day ah. Just like, few hours later, people already got, got, got proposal for the, like come up with the explanation, then the proposal spec, then the, ah, propose property value, then propose more things, and then ya, within three hours. So this is, this is efficiency everybody. This is how the, actually this is also a peek into how a spec potentially comes about lah. So basically, and the max part of it I explain in more detail ah, by my mathematically inclined speaker. Ah, but the transition timing function takes a number of, of values that like, like most of us have used before lah. Is in, is out. By default, if you don't know how to do hor, then you just put is lah. Nobody put linear one for some weird reason. But there's also one value for qubit vizier. And qubit vizier, you'll take four value, which is for two, two coordinates. Just like the most basic, basic nurse, then people say, ah ya, these two basic ready. So actually her proposal was like, can we have like, more complicated vizier function. So she'll be covered in my mathematically inclined speaker talk. So that's that. And let's, so then it like, you know, then it trail off lah, because it's a bit, it's very initial stages. So Q, one year later, what did Webkit do? Webkit implemented, or no, Webkit propose this function called the spring function in 2016. So we should all look at the spring function. Ah, it only works in, it looks like it works here, but this is fake. This is like, fallbacked by Javascript one. But if we want to look at the real one, right? Okay, everybody install Safari technology preview, like the developer you should be. Anyway, okay, everybody can watch this. Click on use systems ring just to proof to everybody that is legit. Ah, canvas object. Ah, there's no exclamation mark for everybody. This one ah, your browser say, oh hi, I know what spring is. Spring is a timing function that is legit. If you try this on Safari, right? Sorry, I don't recognize. So must be Safari technology preview everybody. So yeah, so if you throw, if you drag this cute little ball, right, you're like poing. So the poing thing, right, is spring lah. But like, so by then, right, this is 2016. Ah, this is like storytime, sorry, I'm eating a lot of time. But spring, right, spring very specific, spring can be spring, right spring point, then you want to do other things, how? So um, it was like revitalized again, whereby, so imagine if you're trying in again to say that spring, that's great, that's great, but this will have been solved with the support for more complicated, kerf fungsi. So, jika saya dapat bukannya, saya tak tahu. Mereka tak berhubung ke tawaran. Okey, tidak, tidak, tidak, tidak. Jadi, ini lagi, publik-punyak ada informasi yang digunakan. Kamu pergi ke Gihak, kamu pergi ke W3C organisasi, kemudian kamu pergi ke CSS working group draft. Jadi ada 1,800.9 isu. Sudah tentu, sebab semua pilihan yang berlaku di sana. Mereka mempunyai pakaian nama. Jadi kamu melihat pakaian yang betul, pakaian yang mudah. Apa-apa pun ini adalah masalah pada tahun 2006. Ia berlaku, berlaku, berlaku, berlaku, berlaku, berlaku. Apa yang saya akan katakan? Saya akan katakan sesuatu. Ya, okey. Jadi, pada masa awal, ada beberapa perkara lain yang berlaku pada animasi. Ada web animasi APR, yang adalah jawa street side 1, yang terutamanya dibuat oleh seorang perempuan nama Brian Bertels. Kemudian ada perempuan yang berlaku pada Houdini, yang juga ada seorang perempuan yang lain. Kerana kamu boleh menggantikan perempuan yang berlaku pada perempuan yang berlaku pada Houdini. Jadi okey, saya perlu berhati-hati di sana juga. Kemudian ada juga perempuan baru yang berlaku. Perempuan baru yang berlaku dengan apa yang sudah digunakan. Kiframes dan kebanyakan perempuan CSS. Metematik yang berlaku pada spot. Saya nampak ini lebih awal. Tapi, benar-benar? Ya, ada 3 perkara yang berlaku. Baiklah. Jadi, saya menerima perkara ini, perkara yang berlaku pada perempuan baru yang berlaku. Biasanya, ada perkara yang berlaku pada perempuan baru yang berlaku. Kemudian, perkara yang berlaku pada perempuan baru yang berlaku pada 4 atau 5 perkara yang berlaku adalah terlalu susah. Jadi, mereka berkata, oh ya, kubik sibuk. Polinomial adalah sederhana, tetapi kubik sibuk adalah sebuah spot matematik yang berlaku. Jadi, Sarah Dessner sebenarnya memulakan perkara yang lain. Sarah Dessner, semua perkara yang kamu sudah tahu, tapi jika kamu tidak tahu, dia adalah perempuan yang tidak berlaku. Pernahkanan untuk penerbangan. Juga, seperti Netlify, penerbangan penerbangan, penerbangan penerbangan, sebagainya, semua orang tahu dia untuk penerbangan penerbangan dan penerbangan yang berlaku. Jadi, dia sebenarnya bercakap tentang menggantikan penerbangan perempuan. Jadi, penerbangan, setiap penerbangan yang anda gunakan, setiap penerbangan yang anda gunakan, dalam pengen program hari ini. Bersama orang ini, orang ini adalah penerbangan yang berlaku, nama dia Robert Pener. Dia mengubah buku 2002 untuk Flash, dan kemudian keadaan ini telah diletakkan dan menggantikan menjadi banyak penerbangan animasi. Banyak kali jika anda memiliki penerbangan penerbangan, ia mengundangkan penerbangan penerbangan. Jadi, Dessner berkata, bolehkah kita menggantikan penerbangan penerbangan penerbangan untuk mendukung lebih banyak, lebih baik fizikal, tahu tak? Jadi mereka berkata, oh ya, bagus, kita memiliki kesilapan ini, keadaan 229, kita hanya menggantikan semuanya. Jadi sekarang, keadaan itu adalah, wah, berkata-kata, anda pernah melihat keadaan yang terakhir untuk, saya tidak tahu, 4 tahun? Jangan memiliki keadaan CSS. Apa kata, jadi, dia dapat menggantikan lagi pada tahun terakhir, dan ia sebenarnya sangat bagus, kerana ia banyak lebih detail sekarang, ada yang bagus, diagram dan segala-galanya. Tetapi, keadaan yang panjang adalah, hari ini, hari ini masih tidak mempunyai keadaan yang lebih mudah, belum mempunyai, kerana ia telah mempunyai beberapa keadaan, ia telah mempunyai keadaan yang sendiri, disebabkan keadaan CSS, ia disebabkan keadaan CSS, keadaan itu adalah, dan bukan hanya keadaan CSS, ada lebih banyak keadaan yang lebih berlainan, keadaan CSS, keadaan itu juga. Kerana, sangat susah, sangat susah untuk menggantikan keadaan yang berlainan. Ya, seperti yang saya katakan, baiklah, dia sudah selesai, jadi, anda patut berkongsi dengan Syirah. Ya, saya berkongsi dengan Syirah. Sekarang saya telah mempunyai konteks mengapa kerana sibuk berlainan dengan CSS, dan jika anda semua tidak mempunyai keadaan, anda boleh berkongsi dengan Syirah, anda... ...tidak hanya berkongsi dengan Syirah. Pada masa depan, semasa dia mempunyai keadaan yang berlainan, berkongsi dengan Syirah. Kita boleh terus bercakap lebih banyak tentang keadaan. Okey, jadi lihat, lihat keadaan yang paling cantik seperti ini. Itu adalah keadaan yang berlainan. Kami sudah menghubungi keadaan. Ya, tidak. Okey, sebenarnya, tidak ada sebuah kata-kata yang berlainan. Kita sudah mempunyai keadaan yang berlainan. Itu telah berlainan. Saya akan membuatkan kongsi dengan Bowtol. Saya akan membuatkan kongsi dengan Bowtol. Jangan menghubungi kita. Saya akan membuatkan kongsi dengan Bowtol. Saya masih tidak boleh berkongsi dengan Syirah. Yang mana anda guna? Awak pun memakannya? Ya, saya memang memakannya. Maaf. Saya gunakan hal itu. Bukan orang yang salah. Tak. Okey, semua orang tahu di mana kita sudah di. Baguslah. Kita akan berhenti bercerai dan lancar. Okey, saya akan berhenti berhenti bercerai dan lancar. Ke arah seorang profesional, berbincang tentang kerja penyakit ini. Jadi, entah, entah, entah. Bukan saya dapat berpengalaman. Ya, saya rasa saya dapat lihat. Tapi tidak? Bagaimana anda dapat lihat dan melihat kini? Kami pun mempunyai klinya yang klinya. Ya, saya mempunyai klinya. Tanpa? Tidak. Tidak? Tidak. Biar saya berhenti dan lepaskan ini lagi. Selamat datang kembali di world of technical difficulties, semua. Oh, saya dapat periksa. Okey, mari kita lihat. Ia tidak menunjukkan? Ya. Okey, saya dapat. Pada masa. Oh, okey. Jacob kata, Milo browser, saya melakukannya dengan cepat. Okeylah, okeylah. Jacob, kamu menang. Baguslah, kamu telah mempunyai css. Kamu menunjukkan? Saya berbincang dengan sekarang. Bukan ccs. Itu jalan muntung jadah. Terima kasih. Faham? Kamu menggunakan perkara ini? Saya rasa saya menggunakan perkara yang membeli. Kamu dapat melihat. Apakah? Kenapa? Saya akan memperkenalkannya. Tak pakai zoom saja? Saya memang perlu mempertahui Google. Sangat menarik. Eh, but Zoom recognise that she's stressque eh? Ya, okay let me do this again. We are doing everybody's solution to all of the worst type problems which is to turn it off and turn it on again. Everybody must send us positive thoughts. I'm using this because I need to pull off. Ya, I know. Eh wule ah, everybody remember, if it doesn't work, turn it off and on again. Okay, like ya. Is this page showing up? Time lag lah. Is my slides showing up? We are lagging right? Is this about lag? For you. Got leh. It's a bit lag. It's lag gal gal. Ya showing watermelon. Okay, watermelon. It's like, previously I feel that vizier curves is like... Saya nak tanya tentang ini. What does vizier curves have to do with watermelon? Chinese called sikua. You know the meme about chigua cunzhong? Don't know leh. Ya, so in Chinese if you say you're chigua cunzhong, it basically means you have not much to do with this, but you are still participating to be somewhat relevant. So it's because vizier curve is not exactly CSS. Eh, I already debunked that meme. Anyway, if this was a variety show, you would see the editor put 3 question marks on top of my head for the sikua thing. Today you not only learn CSS, not only learn maths, you still learn Chinese. Chinese meme, not really real Chinese. Okay, mystery of the watermelon soft. So let's explain vizier curves to computer engineer friends. I am technically not a computer engineer. So okay, you can explain it to Shifu sitting on the earth with a computer engineer. You're an engineer now? Ya, you're an engineer now. But anyway, moving on. Ya, so it all begins when we try to have some kind of natural animation. Oh, like the spring ah, point. Ya, the spring is new to me actually. But the, like... It's a very cool storage, it's a very cool storage function because only TP got, so they are like testing like, I think they tried to push ah, then it's like fail. I'm not taking it out. So it's still there. Okay, oh well. So, okay, let's see if there's loads. Um, this is Google material design, design language, and it has this... Why doesn't it load? Um... Eh, why not Wi-Fi? Why don't you do it not on the Facebook. I thought 4G is okay. Then, okay, let me, let me connect. Everybody, this is how a professional presents people use iPad. Ah, not like Earth ah. It use like, type on a keyboard and then use two fingers to type. Then, like, cannot even open a web page. So if you can see this animation, it has two side-by-side comparison. There is one with easing and the other one is like linear. Why not highlight? Highlight. Why so bad? Eh, ya, interesting. So if you see the no easing one, it's kind of moving like steadily but it doesn't feel as natural. But the one with the easing kind of has a natural take. And then there are different types of easing. Like, like this one kind of looks like you're throwing a toast like, like up to your screen. And then there will be one that's like, looks like things dropping. Like that. So, so how, how... Now they become bright, I'm so confused. Oh, ya, ya. So how does a curve do that? So, just connect it. Oh, right, okay. So, updating. Okay. Multi-patient! Fine, okay. So if we are to implement this without the help of easing function, right? We do have another option. Like we can have, this is dividing into 10 frames. And then for each frame, you can like function a number and maybe you... Actually, no, actually, I legit do this for... I didn't do this very recently. I just can't remember what I did it for. Ah, okay. Ya, but... It's okay. We'll show later. Ya, ya. Please carry on. But like, keep frame. And what I do is I boil it. I boil it, like in my mind, I just imagine. So I did a 0 to 10. And then 10 to, I think 10 to 40, 40, 50, 50, up 90, 90, 100. Ya, ya, ya. Ya, exactly. That's what you can do. And if you want to be more precise, maybe you can do some physics calculation to evaluate how much the thing drop. At my age, I'm like weighing the pros and cons. Ya. My youth physics calculation. My youth physics near mine. So, yes. Ya, so that's like your alternative. Tell us what the best scenario is. Well, anyway, here we have like 10 frames, but you can do better. You can do like 100 frames. Do better. Okay. Ken, moving on. But then, but then if you have this magic cubic bezier curve, right? There are some default ones. These are like shortcuts of the actual cubic, the actual bezier curves. But what you have now is you have this magic number. And then, actually, you do not have to understand what is really going on with the bezier curve. You don't tell them that. Masih must understand. Eh. Okay. I think my iPad cannot drag and drop this thing, but anyway. Mama, you be more precise. Use your hundred dollar size. No, it's not about the pencil. It's more about the iPad, interaction. Anyway, so you... I'm going to say something very snaky. When things go wrong, blame it on the machine. Anyway. But you have the option of this. You can drag around and you can see what this curve looks like. And then the y-axis will be the displacement. So where your moving object is, and then the x-axis will be the time. So if we look at this curve, it looks like it's moving slowly in the beginning. And then as it moves, it gets a bit faster and then it slows down again. So that's what this curve tells us geometrically. We can do everything and our... So if you look at the actual animation that is happening, you can test. I prefer to have this with sound. So if someone use wavelength and then you can it's easier for me to understand. I need to hear. Yeah, that's a nice one. But anyway, that's why... That's why our designers can give us very specific those numbers. And we just punch those in our corbis and then we have their desire animation. Ya, so sebelum kita bercakap tentang curve basia, kita tahu n-gol kita ada hanya 4 nombor dan sehingga kita mendapat curve basia. Jadi kembali ke curve basia. Becian. Ya, kenapa ini? Ingat? Jika sesuatu salah, jelaskannya pada masin. Saya tak tahu apa yang berlaku. Terima kasih. Slice.com. Tolong jelaskan ini lebih baik. Ya, jadi... bagaimana ia berlaku? Kenapa beberapa nombor boleh berlaku? Jadi ia berlaku. Kita tak belajar dari penerbangan computer. Kita belajar dari senpai 50 tahun lalu yang penerbangan otomobile. Jadi spesifikasi penerbangan otomobile. Semua orang tahu bagaimana berlaku? Saya sebenarnya tak tahu. Saya tak lakukan penerbangan. Peugeot? Saya rasa Peugeot. Jadi, kartan ini adalah kartan pertama yang saya berlaku menggunakan unisof CAD. Jadi, sistem baru ini yang dihubungi oleh lelaki-lelaki ini. Dan lelaki-lelaki. Saya suka bagaimana lelaki-lelaki ini berlaku. Semua orang lebih sibuk. Bukan lebih sibuk. Kamu semua tak belajar perkara yang betul. Walaupun pada hari ini, jika saya betul-betul-betul mahu berpunyakkan perkara yang betul-betul, jadi sibuk. Bukan sibuk. Ada kawasan kontrol di sana. Jadi, kemudian, dia bekerja dengan Renu. Renu. Renu dan C2N. C2N. Tapi, jika kamu tak tahu apa yang kita bincangkan, biar saya beri kepada kamu perkara Singapura. Renu dan C2N. Jadi, kemudian, dia bekerja di Singapura. Mereka bekerja dalam perniagaan. Dia cuba mencari cara untuk model kerja. Dia juga cuba mencari beberapa perniagaan dalam perniagaan. Tapi, dia tak dapat banyak sokongan daripada perniagaan. Tapi, dia tak buat apa-apa pun. Saya menyebabkan perniagaannya sendiri. Saya rasa itu sebuah kisah. Jika perniagaan kamu tak boleh buat, hanya buat apa-apa saja. Itu merupakan bahagia. Ya, saya tahu. Jadi, saya bekerja dalam perniagaan kerja dalam perniagaan kerja. Sebenarnya, perniagaan kerja tak sangat mudah. Kamu fikir? Ya. Jadi, ada beberapa perniagaan. Bukan sepatutnya, dalam perniagaan itu. Tapi, ada beberapa perniagaan. Mereka boleh nampak sederhana. Tapi, mereka semua ada beberapa perniagaan. Dulu, dalam perniagaan ini, kamu cuba membuat kerja eleptik dengan memasuk kerja ke keadaan. Kemudian, perniagaan itu boleh digunakan ke dalam perniagaan. Pada masa yang sama, perniagaan akan berubah. Jadi, kamu dapat kerja yang baru yang nampak macam itu. Di sini adalah cara lain. Jadi... Ya, yang ini... Yang ini nampak lebih berbeza untuk perniagaan kerja. Jadi, mungkin mereka membuat perniagaan ini. Apa yang kamu lakukan adalah mempunyai perniagaan yang kamu membuat dulu. Kemudian, kamu memasuk perniagaan, ke belakang perniagaan. Kemudian, kamu memasuk perniagaan ke dalam perniagaan. Kemudian, kamu memasuk di mana setiap perniagaan. Jadi, itu lainnya. Tapi, jika kita melihat kembali, keadaan yang tinggi adalah 2020, tapi sebelum kita mempunyai ini... Sekarang kita tahu bagaimana kita membuat ini atau sekarang kita tahu satu cara untuk membuat ini. Tapi sebelum kita datang dengan cara ini, semua perniagaan ini bukan seperti yang kita mungkin rasa hari ini. Di sini adalah satu lagi. Sebenarnya, saya tidak pasti bagaimana satu ini juga berlaku. Saya tidak faham. Jadi, kamu mempunyai beberapa perniagaan, dan kemudian memasuk perniagaan yang berlaku... Perniagaan berlaku dengan perniagaan? Ya. Saya tidak tahu bagaimana kamu dapat memasuk perniagaan. Ya, saya minta, apa yang kita gunakan untuk menggunakan penjara? Tidak mengapa. Kamu tidak memasukkan perniagaan kita. Saya pasti ia adalah perniagaan yang baik. Mereka dapat memasukkan beberapa perniagaan dengan menggunakan perniagaan. Bagaimana untuk memasuk perniagaan? Tidak mengapa. Sebenarnya, ia berlaku. Kamu tidak dapat memasuk perniagaan. Kamu boleh, tapi... Ya, ya. Saya dapat memasuk perniagaan. Ya. Bagaimana kemudian? Ya. Ada lebih banyak perniagaan. Ia hanya beberapa perniagaan. Saya mengharapkan semua orang. Sebenarnya, ia tidak mudah. Mereka berkata, jika kamu mempunyai perniagaan yang berlaku, maksudnya perniagaan yang berlaku, tetapi dengan perniagaan yang berakhir, jika kamu mempunyai perniagaan yang berlaku, kamu pasti akan mempunyai fungsi polinomial. Maksudnya, ia berkumpulan kekuatan yang berlaku. Saya tidak beri kekakitangan. Saya dapat memasuk perniagaan untuk 20 tahun. Ya. Jadi kamu berharap untuk mempunyai polinomial yang berlaku. Jangan membaca sebuah perniagaan. Kamu hanya membuat perniagaan yang berlaku. Jangan memasuk perniagaan yang berlaku. Semua perniagaan yang berlaku. Sebenarnya, maksudnya, kamu berharap untuk mempunyai 1 perniagaan. Tetapi perniagaan yang tidak akan mempunyai perniagaan ini. Jangan membaca sebuah perniagaan yang berlaku. Macam mana? Ya. Sebenarnya, perniagaan yang berlaku merupakan perniagaan yang sempurna. Saya akan berkata, perniagaan yang berlaku. Pada masa yang berlaku, kamu memasuk perniagaan yang berlaku. Jika ia berlaku, kamu gembira. Tetapi perniagaan, menggunakan perniagaan yang berlaku. Kami perlukan cara konstruktif untuk bekerja. Mari kita menunjukkan perniagaan namanya. Walaupun satu cara berlaku kepadanya seperti kami memasuk perniagaan. Jika kami melihat perniagaan ini, ia seperti kami memasuk perniagaan. Dia akan menjelaskan Ia keluar dari sebuah raktang yang panjang dan cuba menerima sisi yang lain. Jadi, saya rasa ini akan berkongsi dari Wikipedia. Tetapi, bagaimanapun, jika kita cuba memasangkan apa yang ia buat, ia memasangkan dari satu kata untuk memasangkan keadaan. Tetapi, dengan memasangkan dua kata-kata pada masa yang sama. Jadi, anda memasangkan kata-kata pertama, tetapi pada masa yang sama, anda juga memasangkan kata-kata itu. Jadi, bagaimana anda mengatakan keadaan ini dengan matematik? Bagaimana kata-kata keadaan ini? Kini, anda memasangkan keadaan di dalam keadaan... atau jika anda tidak tahu yang sebab keadaan ini sangat penat, anda akan memasangkan keadaan ini. Awak memasangkan keadaan ini dengan satu orang dan yang lain di keadaan ini, anda tidak akan menyebut keadaan ini dengan terlebih baik. Ya, ia betul. Jika anda memasangkan sesuatu, Keputusan adalah parabola. Jadi bagaimana primitive parabola? You have an initial force, an initial velocity that goes horizontally. And you have gravity that goes down. Specifinya, if this use case doesn't work, if you throw straight out straight out, everybody is like throw forward. Like short part. Actually that one is also, it can be generalized to that. Because if you throw up and it falls down. But visually you won't see it. What you will see is the object. You have to plot the velocity onto a graph to be able to visualize the curve. In the physical world, you cannot see the path intuitively. It's a bit harder for you to intuitively imagine it. But it's actually the same thing. Because the initial velocity, we are used to thinking of it as a magnitude. But actually it comprises of the direction and the magnitude. So even if we're throwing this, if I'm throwing it that way, then the initial velocity is not necessarily completely horizontal. So it can go like, likely it will go towards the upper direction. So basically if you all got play, maplestory, or gun, it was a gun one. So there's this game, last time I played series school, then I spent too much time on it all. You go around bombing other people and then you have to adjust the direction of your cannon. So it's like, if you cannot understand what I was talking about, like what's this ball throwing, just think back to your secondary school and ask you study, you don't want to study, then go and play game. It's the same thing. So the throwing up is just another... Basically you were trying to bomb yourself. Special case of throwing things like... Without a horizontal line at the most. But then the actual physics is the same. Actually you can draw that with the physics. Physics makes more sense. Just saying. I believe my father. Moving on. So anyway, in Wikipedia, you will get this beautiful gift, I believe. So... Amazing! So here what it does is, you can see that this point is trying to move towards these two directions at the same time. And that's actually exactly the approach of the basic. A picture says a thousand words. So if you're only listening to audio, sorry everybody. So basically how we want to do this in a computer today. Time travel 70 years later. 70, ya. Is to try to figure out what is the coordinate of that black dot. So here is... I'm going to start drawing. So first of all, I want to share with you how in a simple case, how we find the final dot with the... Let me just start drawing. While she's drawing, I will entertain everybody with what? Jacob has revealed the game that I can remember the name too. Ganbao. Everybody is called Ganbao. Jacob, you just dated yourself. You're like, almost same age as us on, hey, oh man, just kidding guys. Oh, it's you. So basically for a simple case, I'll just redraw the triangle. Draw your line as crooked as you can. And then, auto-correct straight line. So let's say we're trying to find a curve that goes roughly from this first point to the final point. And what we do is we try to depict this as a progression. So if we're talking about progression, we're talking about a number from zero to one. Zero meaning you just, you haven't started and one means you finished. So it goes from zero to one. And normally we call it T. Maybe that stands for time. So let's say that we want to find the 25% progression of this. What we do is we find the 25% of the first line. First is not 25%. Let me use another curve. So we're here a bit too early. I'll keep my snarky opinion so I'm kind of like, they are squares. So you find your first line. No, first point on the first line. And then similarly, you will need to find your corresponding 25% on the other line. I think everybody just use your imagination and imagine it's 25%, okay? I think I got it first. I got it first. So these are both 25%. She's epitomising the mathematician mindset of approximation, everybody. And then what you do is you connect these two dots. Auto-correct. And you have a second line. Now we notice that we are getting rid of one line segment. And what you do next is just like a next generation. This is precisely the word that we're going to use later. So what you do again is you find the 25% on this line segment. So normally we don't call it 25%, we call it like 20.25% to be the T. So now this point is going to be on the curve, on the final curve. But the final curve consists of many, many points. You can consist of infinitely many points. But how you actually get the actual curve is while your engineer manager is going to tell you how many points we want to draw. Maybe not your manager, but your colleague is to... Or you are going to decide how... Basically the threshold is like how much approximation is acceptable. So you'll draw many, many points and then eventually you'll likely get the curve. It's not like improvement or nothing. Sorry, we watched this before. So it's like, eh, patu. So okay, so yeah, the idea is you you find the progression, you define the progression. Step. Ya, ya. Ya, you define a step maybe 500 or 1000. And for every one of those steps you will have a corresponding T value. And then for that T value you try to find the point on the curve. And also as you can see here like for any single T value the progression you happen to have progressed on the curve is exactly the same. So on the first on the first line segment you are 25% and on the second line segment you are also 25% and then you get your intermediate generation of the line and then on that next generation of line. Use it to find the next point. You still use the point 25 progression to find the actual curve. Ya. So that's the rough idea. And it actually doesn't have to so the two two line segment is relatively simple case and so the next engineer we're going to talk about is his name is D. Castigio Castelju. Castelju. I find it easier to pronounce but anyway French. It's easier to pronounce Castelju. So actually D. Castelju he is actually the first one to discover this method using a constructive approach. So he described the whole process in a procedural algorithm that he uses when he works for Situang. Oh, this one is the Situang guy ah. Oh, today I learnt. Ya. But then Bezier is actually the one who formalised the notation of using the points. So they were in competing companies. Nah. Like that it also worked. Maybe in collaboration. Actually I don't think I don't know eh. Cause automobile might be a bit more Maybe not formally collaborate. But in fact their industry also got a community. It's more like even though you might not I feel like you think they're like browser vendors where people imagine that they are fighting but because they are just everyone is just friends right? Ya, they probably are friends with each other and maybe that's why Dezier knows about this and formalised. I don't think it's that bit of community. Every know every else right? Cause they are similar age also. Maybe they will be an F. Ya, so anyway he devised this algorithm and so let me just draw another graph to to show you again how it actually works. Seriously la, if you are listening to audio don't lah eh must watch videos ya. Like this is like someone calls his audio. Can someone like frying fish then Ya ya ya, I'll hear what's going on. You missing out half of the presentation. So this time we use like slightly life drawing. Slightly more complex situation. We use 3 control points. So together with the initial point we have 4 points. I'm not sure. I'm not sure. I think it's a square. To show to be more precise. Let's also give them a question. So I think this one will be 0 and 0. And this one will be 0 let's say 4. Just for ease of calculation. And this one will be 4. And then also for ease of calculation let's just try to find a halfway point that this curve eventually will be. So T will be 0.5. So what's our next blue colour blue colour which one? Medium blue. Today is medium blue. Miss the beginning but never mind. It's okay. It's a bit but never mind. Again, imagine. And then this will be our second point. Then midpoint. Supposed to be the midpoint. So everything should be like you can control like auto-current technology my friends. So this will be our second set of points. And let's give them so the first one will be 0, 2 and the second one will be 2 and 4. 4 and 2. And then similarly next generation so we'll find the first point looks like it will be here. Not bad. Can pass Approximately acceptable. And then according to this will be average of 0 and 2 will be 1, then average of 2 and 4 will be 3. And this one will be 3 and 3. Notice how we're losing one segment each time and therefore also losing one point. So eventually we will land on the final point. This is coral. Last one. Yes. Coral. So final point will be here but it's computable or the coordinate will be 2 and 3. So this will be because we're left with one point and then this will be the final point on the curve. And so we've only calculated one curve, but not one point. But if we do this likewise many, many times for many different T's we'll get a curve. This is going to be challenging. So they don't use like move the whole arm. Can you do this? Are you You want to connect from here already? You're standing. I move my wrist. I just say wrong. Ya. So that's how you curve autocorrect. Fetli. Ya, it will be nice if it does. Ya, so Ya, this is how the Castile Castile Castile algorithm works. And if you read into the books, you will see something called the triangular scheme. So what is that? So let's move this like Let's move this away. So like I mentioned we're recursively trying to find some points on the line segment. So what is really happening is for the first set of points, we have been calling that generation. So the first set of points is the initial control points. So we have P Gen 0, index 0, everybody. P1 P2 P3 And because we're computer engineers and we like to start with 0 so we have P0 P1 P2 P3 And because generation 0, we superscripted P0 P1 P2 P3 So how did we get to next generation we decided it will be blue and then this will be generation 1 and so how did we get from generation 0 to generation 1 we did that we find the first point this one will be seriously ok, what's going on 30, off and on again pencil, bobe, tree 100% what's happening 30, off and on again, everybody so P0 of the first generation how we found that it's a combination it's actually a weighted combination of P0 and P1 but what is the weight no he like that we use a halfway point which is slightly inconvenient for explaining intuitively what it is but actually so how I perceive this is right after it leaves the first point the weight of the first point is nearly 100% so that's when T is really really small so how we come up with this is we're taking the first point and we're multiplying the first point with 1 minus T not working so we're multiplying the first one with 1 minus T then we're multiplying the second point with T and that's how we get P0 of the first generation and then likewise we're using the same method like sorry IOCD so this is P1 of the first generation and so once again we're multiplying the first point with 1 minus T that's this point and then and the second point that's this point with T and then similarly for the third P2 of the first generation so we're multiplying first one 1 minus T so you can see how this goes and how do we get the third generation second generation 012 once again we take this one and it will be multiplied by 1 minus T and then then this 1 by T and that's how we get P0 of 2 and then technology amazing and then T and then finally we reach our final point wrong corner so 1 minus T and then this 1 by T so it will be the P3 which is the final point so now first of all never mind I'll just say you OCD straightness I OCD car it's about your friends yeah I'm not close enough anyway so we see a beautiful triangle that's how they name it triangular scheme semantic naming my friends and also notice how to deduce the final point all we need is the coordinate of the first 4 points and then a bunch of T's 1 minus T's multiplied and with a few coefficients and it turns out it turns out these are pascal triangle ding ding the song effects guy so the pascal triangle you can google I'm not going into detail let's teach everybody how to spell pascal P-A-S-C-L-L if I remember correctly I don't know how to pronounce this name pascal or pascal you know what I mean I don't know seriously not sure it's okay I'm partial to the french carry on I just have an impression so the pascal triangle gives you easy ways to figure out what those coefficients are basically you start with 1 you start with 1 and then the next set of coefficients will be 1 and 1 and then 1, 2, 1 so these will be the coefficients you will get multiplied in front of all the T's but anyway the point is we we only need the corners of the initial points and then with our engineering skills we can punch in a bunch of T's and then we can calculate engineering skills, flex so so that's triangular scheme ladies and gentlemen that's the the castle algorithm and the triangle scheme there will be pseudo curve so jump jump jump sorry ah tan tan can, very nice so this is exactly what we just did the draw curve pseudo actually I think it's probably better named as draw point oh yeah actually right segway currently in kind friend has shared with everybody who is not on zoom but in youtube we must say pasca triangle was actually known by uh i don't know jia xian whatever 11th century chinese scholar centuries before pasca be proud to be chinese everybody yeah there is a chinese tongue twer part 2 pasco so in china if you study like in elementary school they tell you it's yanghui not pasco triangle yanghui yanghui is like a chinese chinese yanghui it's just not like some random yeah yeah so the this pattern basically multiply a bunch of things factor them out and the coefficients i think people figure out the pattern without i guess they haven't talked to each other nef is universal no language or cultural boundaries just saying so okay back to the actual so the draw point the function the input will be the points those points are the initial control points these are the only information this is the only coordinates and we also need a t to precision determined by t actually that's a progress because precision is like 1 divided by whatever then the progress is t whichever point you're drawing so it's a recursive procedure so if we're magic word has just come out everybody drinking game the word has come out recursive so if we reach our final point already which means we reach the only one point that's left we draw that point the actual point the actual point on the curve otherwise we're not there yet so what we do is we try to calculate the next generation points and and every generation if you remember we're losing one point therefore our new generation point the array will be one size smaller and then we try to fill all those points and how do we fill those this is exactly what we just did we take each point and it's next point and we multiply the first point by 1 minus t and then we multiply the second point by t and then those are our coordinates we're assuming we're in two-dimensional world this is our screen but just can also go up to more dimensions like if we're doing something in augmented reality or 3D coordinate it's the same thing so after we populate the next generation of points we will call the recursive procedure with the new points you can drink now if you're playing the recursion drinking game with the new points and then the same key so yeah that's the pseudo code after we understand what's going on it shouldn't be too hard to yeah it can be implemented so I happen to be a react developer so I implement this with react okay actually it's very good that there's no audience because usually at this point some people in the audience will just look at me very apologetically and say sorry sorry sorry it's not like I don't want to judge everybody it's just that I like CSS more love is unlimited not a zero sum game I think I need to close I don't want to close all okay got it so let me just briefly the this so I do have some some UI implementation so the this first few lines I I created some controller basically for you to add or remove control points so you do click click click control points state management state management and then once I get the control point we can get the t-functions by we can go into the use draw curve later on but how we get the t-functions is by using the d-curse to use roles algorithm with calling them with the control points and then and then and then this is like curry because if we go back to another magical word came up carying everybody you all should be drunk by now if we go back to the second parameter is T but I don't know T so I want to partial evaluate this function Selepas saya dapat fungsi t-fun, saya dapat menjadikan keguguran. Macam keguguran, bagaimana kita mencari keguguran yang anda mahu. Untuk keguguran dari satu ke satu ke keguguran anda, itu progresif kami. Kemudian kami mahu mengembangkan keguguran terakhir. Dan kami menemukan keguguran dari keguguran dengan menghubungkan t-fun. Jadi keguguran i dengan keguguran set-size akan menjadi keguguran t-fun. Kemudian setelah kita menghubungkan keguguran ini, kami dapat semua keguguran. Dan kemudian untuk keguguran itu, kami akan mencari keguguran yang anda mahu. Bagus nama. Jadi itu bagaimana keguguran yang anda mahu. Jika kita masuk ke keguguran yang anda mahu, kami dapat mengingatkan keguguran yang anda mahu sekarang. Jadi keguguran ini mengambil t-fun. Dan kemudian ia menghubungkan keguguran t-fun. Jadi bagaimana bagaimana keguguran itu? Ini adalah sebegitu mengikut kota sudo yang diberikan oleh Dekas Deljo. Jika kita tinggal dengan satu kota, kami akan menerima kota. Dan kemudian, jika tidak, kami akan menghubungi kota baru. Dan dengan melakukan apa yang kami berbicara. Jadi ini adalah kordinat kota. Dan kemudian, kami akan menghubungi kota baru. Jangan risaukan perkara yang di-lihat dulu. Jadi kami akan menghubungi kota baru lagi. Dan menghubungi kota baru dengan kota baru dan kota yang sama. Jadi ini adalah... Kami tidak cuba menjadi senang. Kami mengikuti kota itu. Jadi kami akan bekerja. Sebenarnya, kami sudah tahu. Jangan menghubungi kota baru. Jadi, saya rasa kita harus... Jadi di sini, apa yang anda boleh lakukan adalah... Klik-klik dan klik-klik. Terdapat kota seperti ini. Magik! Kota M1. Kota M1. Kota M1. Kota M1. Kota M1. Kota M1. Kota M1. Kota M1. Kota M1. Kota M1. Kota M1. Kota M1. Kota M1. Kota M1. Mari saya memberi kota ini di dalam miniman. Selepas saya memberi kota M1. Saya mem speeding. Ini jadi kerja di bawah. Jadi, saya dapat mengalami kota. Bagus. Ya, saya tahu. Saya pun tahu. Jadi, saya tidak tahu. Saya tidak tahu. Bagaimana? Bagaimana? Saya ingat, saya ingat kita setidaknya. Bagaimana? Sangat bergaduh. Bagaimana? Bagaimana? Sangat bergaduh. Kepulih adalah kota saya. Orang-orang boleh click. Mereka tak perlukan mesej itu. Hari ini, bos saya sangat menakjubkan. Hari ini, bos saya akan buat x click-click-click. Ya, saya rasa itu menarik. Sebenarnya, ada yang benar. Tapi saya rasa saya buat begini. Dan kemudian, saya seperti... Oh, tunggu. Awak tak boleh lakukannya. Sebenarnya, saya lakukannya. Saya lakukannya. Saya lakukannya bagaimana saya klik yang lain. Saya rasa itu cara yang menarik untuk klik-click. Awak boleh melihat untuk diri sendiri. Semua orang akan berkongsi link untuk kode sandbox nanti. Selamat tinggal di kode sandbox. Baguslah. Tapi saya juga dapat buat selepas nanti klik-click. Awak tak boleh buat begitu banyak. Ya, jadi... Sebenarnya, awak tak mahu bos awak berkongsi. Setiap hari. Setiap hari juga. Maksudnya, awak tak mahu bos awak berkongsi. Mula-mula. Ya, itu implementasi. Sebelumnya, saya mahu bercakap tentang... beberapa keputusan. Bagaimana keputusan? Tolonglah. Pertama-tama, itu menarik. Tapi beberapa keputusan setelah itu. Keputusan setelah itu akan selalu tinggal di dalam poligon yang menarik. Jadi, apa yang itu bermakna... termasuk kondensi. Itu menarik. Tapi itu bermaksud, jika awak ambil tanda... dan awak pergi sekitar semua kondensi. Kemudian, poligon seluruh itu adalah kondensi. Jadi, keputusan setelah itu... keputusan setelah itu akan tidak berada di... Kondensi dari poligon yang original. Ya. Jadi, sebenarnya... maka ini menjadikan awak akan mempunyai kondensi. Kondensi adalah sesuatu yang kita lebih kenal dengan. Bukan sebuah kondensi sebenar. Tapi awak ada cara konstruktif... kita menemukan kondensi juga. Tapi awak yakin kondensi... bahawa kondensi akan tinggal di dalam kondensi. Jadi, itu adalah yang pertama. Kemudian, yang kedua... jika awak ada kondensi yang sangat besar... awak boleh membalik kondensi... ke dalam kondensi yang lebih kecil... dengan kondensi. Dan setiap kondensi... awak masih belajar kondensi. Jadi itu... menurut saya, tapi setelah awak fikir tentangnya... setelah kita mempunyai kondensi ini... ia adalah perkembangan. Tapi apakah saya mempunyai... sehingga kondensi ini tidak berjalan lagi? Jadi, kondensi ini boleh dilihat... sebagai kondensi akhir... yang saya telah berjalan. Tapi kondensi awal yang saya telah berjalan... adalah saya. Jadi, kondensi itu... memutuskan kondensi kondensi... menjadi dua kondensi kondensi kondensi. Dan kemudian... kemudian yang lebih... perkembangan... adalah bahawa... kondensi kondensi... sudah berjalan. Jadi... kita dapat melihat dari sini... saya rasa... kita mungkin tidak akan mempercayai ini. Jika anda berminat, anda boleh melihat kondensi kondensi kondensi untuk melihat kondensi. Sebenarnya... tidak teruk. Tapi kita dapat melihat dari sini... bahawa kondensi kondensi kondensi... kondensi kondensi kondensi... akan menjadi... kondensi... kondensi kondensi kondensi... dan kemudian... yang lain... yang lain... kemudian... kalau anda memiliki... lebih banyak kondensi kondensi... yang berlaku... kondensi kondensi kondensi... ini adalah kondensi kebebasan... kondensi yang muda. Kemudian... kondensi kondensi kanan terakhir... akan menjadi kondensi kondensi kondensi terakhir... dari kondensi yang terakhir. Dan kemudian kemudian keadaan keadaan kebelakangan yang terakhir. Dengan sedikit keadaan, kita boleh juga mempunyai semua keadaan keadaan keadaan pertama, seperti keadaan kedua. Jadi ini adalah perkara yang di-lihat yang saya bercakap tentang. Dan anda ada keadaan yang sama juga. Dan anda dapat periksa perkara itu. Saya tidak akan memikirkannya dengan berjaya untuk membuat reka-reka yang di-lihat, tetapi ini adalah cara yang anda boleh membuat keadaan keadaan keadaan keadaan keadaan ke belakang. Jadi saya baru bercakap tentang perkara yang di-lihat. Baiklah, saya akan beritahu. Baiklah, ini kode Sulu. Kita akan berhati-hati hari ini. Dan kemudian, dengan pilihan pilihan yang kita baru bercakap tentang, ia ada pilihan yang saya menurut teman-teman saya akan suka. Sebenarnya, ia bermaksud anda dapat mencari pilihan pilihan pilihan yang terlambat dengan menghubungi pilihan pilihan pilihan yang terlambat. Selepas anda menghubungi pilihan pilihan pilihan pilihan, setiap akan mempunyai pilihan pilihan yang lebih kecil. Dan anda dapat mencari apakah pilihan pilihan yang anda mempunyai. Dan kemudian anda dapat mencari pilihan yang tidak ada pilihan pilihan pilihan yang tidak ada atau anda tetap bergerak dan anda tetap menghubungi pilihan pilihan. Sehingga pada masa-masa anda mencari pilihan pilihan pilihan, anda menggunakan satu pilihan dan mereka masih berlambat. Jadi, mempunyai pilihan pilihan, mereka sebenarnya tidak masih berhati-hati, tetapi mereka sangat berlambat. Mereka sangat berlambat dengan berlambat, tetapi berlambat pada sebuah kata-kata anda tidak lebih berlambat kerana anda di pilihan pilihan pilihan dan orang tidak dapat beritahu perbezaan. Apa kata-kata yang digunakan? Kami tidak berhati-hati, tetapi tidak berhati-hati. Ada nama untuk anda, bukan? Anda tahu? Ya, tapi saya juga tidak dapat mencari pilihan pilihan pilihan. Ya, okey. Atau anda sebenarnya mempunyai pilihan pilihan pilihan. Tetapi kemudian, keadaan pilihan pilihan, anda mempunyai pilihan pilihan. Apabila anda menggunakan pilihan pilihan, anda masih dapat pilihan pilihan pilihan pilihan. Kemudian anda mengambil pilihan pilihan. Kemudian anda dapat mengambil pilihan pilihan. Apa kata-kata ini? Ini tidak untuk diri. Ya, ya. Dan ia tidak di atas pilihan pilihan pilihan. Pilihan pilihan pilihan yang masih tidak digunakan di CSS Ini adalah masalah yang anda berhubung. Anda dapat mengambil pilihan pilihan pilihan. Bukan sebenarnya mengambil pilihan pilihan pilihan pilihan. Anda mengambil pilihan pilihan pilihan. Ini tidak lebih sebuah pilihan pilihan pilihan. Tapi ada segmen pilihan pilihan pilihan. Anda dapat lihat, nama itu tidak ke-bit. Pilihan pilihan pilihan. Ia tidak berguna. Mereka tidak mempunyai pilihan yang susah. Mereka tidak mengambil pilihan pilihan pilihan pilihan. Para bagi saya, mereka tidak mempunyai pilihan pilihan pilihan pilihan pilihan. Mengambil pilihan pilihan pilihan pilihan. Sekarang, saya rasa sebab saya tidak terlalu mengambil pilihan pilihan pilihan, saya tidak dapat membuangnya pada masa itu. Saya perlu keberkaan sekitar laptop ini. Begitau kamu? Ia tidak mendilang. Okay, saya ada sebuah efek untuk apabila dia bekerja. Fingga, Fingga. Zombe haureya. You can best the action. It's got victory. I got a lot more. We can discuss this soundboard later. Okay, so you can join them to form polybasic curves. That's actually the sweet spot that we just talked about. So they look nice enough. But then they also are backed by all the math behind the bezier curves. So basically here's how it happens that intuitively. What you want to do is you want to match both the velocity and the direction of the two curves. So you can see from here like these two segments are same length and then they're pointing away from each other exactly 180 degrees. So what happens if they're not like that, right? So maybe it becomes really short but still roughly same direction. You can see that the point is moving much slower. Or if you get roughly the same length but pointing at another direction, you also see like a sharp turn there. So what you want to do is to make sure that the velocity matches at the joint. So this is why, I think once you see this picture. So here it is a polybasic curve and each connecting each other. And then based on the restriction that I just talked about, if we change something here and this side will try to match that segment. So this is why it's kind of like everything is moving. But then if we use cubit bezier curve, you can imagine if I change it here only this segment will move but this part won't. So this is how you can actually make some local changes but without affecting the whole curve. So that's, I believe that's part of the reason why they choose cubit bezier curve because you have this nice property that goes around the non-localness. It's like limitation of bezier curve. But then you can keep connecting and then to form a more rich curve that you might actually need. At this point, I guess the more, it will be more relevant for those of us who have to do graphics. So this is the reason why I thought about the timing thing earlier because this is not really CSS. But it is very, very relevant for SVG because I don't know how many of you would hand-draw your own sheet but I did have to hand-draw my own sheet in a fast life. And clearly Max is not my strong suit. So what do I do? I use a measure by eyeballs to eyeball all the diagrams. Oh yeah, you might actually enjoy this game but it's called bezier game. So what you try to do is you, I think this is what a graphic designer. So basically, if you use illustrator or the Figma sketch, if you use the pen tool, this is basically the same interface. I'm apparently not good at sketch. You can try this one. You can try this one. But this may be perfect. So limitations, one is, like I mentioned, it's not local if you remember, we'll recalculate. Model shapes. Oh, kaipo. Oh, model. Ah, don't mind the model shape. Very confused. Kepita G. Gay confused, confused. So anyway, non-localness talks about if you recall how we calculate a point on a curve, we actually, so at every segment takes part in it. So once we change the T, at every segment we're using a new T. Everybody gets affected. So in a Bezier curve, changing one control point will change your whole curve. Sometimes if you have very high order curve, you might not seem that obvious, but it's actually changing the whole curve. So that's non-localness. So that's why, so there is more advanced technique for that. Basically the spline thing that the polybezier curve is trying to handle and then the connection. And then the other limitation is that you cannot precisely model circles or eclipses. I'm going to talk about this later. That's also another limitation of Bezier curve, but once again you will have workarounds. Bezier curve in browser. This is your big attempt to try to link it back to CSS. Don't worry, we already cover that for you. So Bezier is okay. Well, if we look beyond CSS the timing functions, actually timing functions, it's over simplification to visualise it directly as the parapla because what it really does is it's kind of twisting your timing It's modelling the speed at which whatever you want to animate. Ya. So yes, CSS definitely one use case in our work, and then SVG pass. Oh ya, so in SVG if we draw a pass the SVG command goes like there is an M which means move to and then L means I think I'm not explaining this properly so while you scroll I was going to say something about SVG but never finish first. Ya, so the pass is you define pass this way the letter M means move, so you move to 100 and then L means line so from 100 you draw a line to 300 and 100 and then you draw a line again to 300 and then Z means you close the curve but then you might want to draw a curve the straight line and so that's the cubic base curve commands come from and then S is slightly different it means to use the previous endpoint as the first control point and then so you can so it's actually implemented in SVG already and then you have two options, you have the cubic version you also have the quadratic, quadratic means power 2 cubic power 3 just in case you forgot what a secondary school math teacher told you so basically cubic means you have 3 control points and then quadratic means you have 2 2 2 what was the thing we wanted to talk about oh ok, some people who are in the data visualisation space or web development shout out Shirley Wu who showed up we managed to get her for JSConf Asia in 18 she's if you do data visualisation you'll know she's Shirley Wu and she draws her SVGs by hand because now you already know the secret she already explained to you what the C, what the L is you can actually according to her la but yes SVGs you don't really have to draw them by hand after you know this but you can tweak because you know what number to tweak but I don't draw them by hand I can just tweak the numbers by hand yeah so yeah basically practical applications of cubic media functions, everybody if you do not want to write because still by yourself you already have like the browser because you think you're very good at maths but the browser can do maths better than you so it should not be surprising to you that canvas has it's counterpart, it's also canvas so so it says because semantic naming is a thing everybody so because this is older so we so if we take step even further of course browser also renovants but then browser is a subset is graphics rendering everybody so font glyph is defined like this just once again it's not a single basial code actually tiger talks about this no hard shell so yeah it's saved in the computer this way and this is actually just a bunch of basial curves it works everybody next slide so it's actually basial curves empowered for working language is the very first vector font released by adobe can you remember a name because i've not given this talk in like 2 years but this is essentially what they use to like i think that this one a lot of the other font formats had come after this because raster font is just you can't you really cannot so this was the first vector font that ever was commercially on the market and i think adobe made a bomber a bit like seriously but yes fonts maybe we will have a fonts talk someday heen heen no hard shell i hope it's what it is i don't know so yeah that's the references will be shared with everybody in the newsletter that nobody subscribe actually not sure, according to tiny letter i have 40 subscribers i don't know if they open the mail or not but i spend my every month anyway amazing actually i own people so sad right more references because one page is not enough amazing i still got one more appropriate song excellent i stole this from somewhere if anybody can play again you can tell me where i stole this from you won't get a prize that's all play it twice tell me where i got it from okay okay thank you everybody please give virtual applause wash hand i like what everyone wash hand on youtube if you don't get the wash hand what i'm talking about i'm going to figure it out i got okay a bit long today so i will cash out my announcement session share screen desktop you think i know how to do this hi kriss this is tangentially relevant to kriss announcement skip because only i got announcement okay happening friday already say already venerable sifu it's going to be on so everybody must tune in and subscribe subscribe to rk because we will not we will go we are 500 by n a year moving on we are partnering with web directions code so as you see kriss put in and out everybody must please remember that kriss is now back in australia in melbourne so he will be involved in web directions code which is now a remote conference and they have gone with a interesting format whereby it's not just one day conference it's a weekly conference also they have tried to structure it that optimise for southeast asian time zone so as you can see wow thanks september human lah human then 9am to 12.30 the code the discount code is syingapore css but according to the guy he's he's trying to do a billing for sgd so you all hold off first remember that the discount code is syingapore css is like $100 of so i let you all know first i implant this idea in your brain then you all can mark your calendar first if you want to go and part-talk no no no no you bring the part-talk person to come watch this conference with you but anyway i'll keep reminding everybody about this just let y'all know first so yes it's a cv now facebook y'all could have gone out to i don't know go and meet boyfriend meet wife is the wife or husband but you all still chose to tune in and we are very thankful that you continue to support the most any holly meet up in syingapore okay and don't touch your face don't touch any other people okay thanks bye we will see you next month if next month happens alright cut i don't have the youtube window open because i was forced to close it so somebody please turn it off for me in the meantime ya ya the non-local won't get this ni ingat ya tinggal la we will explain to you later can you help me off the youtube me? ya because i think i still streaming okay off la ma