Ngobrolin SVG - Ngobrolin WEB

1:49Raster, nah kalau raster itu biasanya digunakan untuk foto yang real ya.

1:54Kayak dari hasil dari kamera, foto profile gitu kan.

2:01Tapi kalau yang vector itu biasanya gambarnya itu bisa di, apa ya, gambarnya bisa di gambar.

2:10Berdasarkan koordinat.

2:11Berdasarkan koordinat, berdasarkan matematis ya.

2:13Itu semua sebenarnya gampangnya kan perhitungan.

2:15Itu ada kode koordinat.

2:17Jadi scaleable, makanya nanti kita lebih bahas lebih jauh soal scaleable-nya itu kayak gimana.

2:24Betul.

2:26Salah satu perbedaan utamanya adalah kalau yang raster itu kalau di zoom meskipun, ya walaupun ukurannya besar,

2:34di zoom sampai maksimal dia akan ada kotak-kotak pixel gitu kan.

2:39Kalau di zoom melewati lebih besar dari ukuran aslinya.

2:45Betul. Kalau vector biasanya enggak, karena dia pakai perhitungan kan.

2:51Misalkan kita bikin kotak atau bikin lingkaran gitu kan.

2:54Begitu di zoom dia kualitasnya tetap bisa sama karena dia menghitung ulang gitu.

2:59Jadi kayak apa ya, kayak ada rumus matematikanya lah gitu ya.

3:04Dan menariknya kita, ya kayak function.

3:07Dan menariknya kita bisa nguding, bisa kayak tulisan dokumen HTML gitu ya.

3:13Ya itu memang memang sebetulnya.

3:16Jadi bisa dikasih atribut, bisa di-animate, bisa dimanipulasi dengan CSS.

3:23Ya banyak. Nanti kita lihat.

3:25Betul sekali.

3:27Ini langsung ada pertanyaan. Apakah 5-10 tahun depan?

3:31Ini adalah topik yang akan kita bahas di beberapa.

3:35Mudah-mudahan minggu depannya.

3:37Ini lebih baik kita bahas nanti setelah kita balik dari I/O aja.

3:43Oh gitu ya, kenapa?

3:45Karena ada AI-AI.

3:47Soal AI dulu.

3:49Diserap dulu ya, diserap dulu ilmunya ya.

3:53Jadi bisa bawa ilmu baru gitu.

3:55Oke, siap-siap.

3:57Tapi kita tadi baru bahas ini juga.

3:59Apakah nanti semua webteam banyak yang dipecat, diganti, kita co-pilot atau berat,

4:06atau semacamnya, large language model.

4:08Ya, stay tuned.

4:10Jauhnya iya dan tidak.

4:14Mungkin.

4:16Siapa tahu kita bisa ganti profesi ya, jadi ternak lele.

4:20Oke.

4:22Nah, kita akan bahas malam ini tentang SPG.

4:28SPG adalah salah satu forma.

4:30Scalable Factor Graphic.

4:36Ini sudah cukup lama sebenarnya.

4:38Kalau teman-teman mengikuti, sebenarnya formatnya sudah sangat lama.

4:42Disini kita akan lihat ya.

4:44Mimnya itu SPG plus XML ya?

4:48Mimnya?

4:50Oh, mime type apa?

4:52Oh, mime type.

4:54Mime type-nya SPG plus XML.

4:58Ya, SPG plus XML.

5:00Oh, iya, iya.

5:02Itu punya file type sendiri ya?

5:04Oh iya, jadi itu...

5:06- XML language.

5:08Nah, 99.

5:12Siapa yang sudah lahir di tahun 99?

5:14Selain saya.

5:16Selain saya dan Ivan.

5:20Kita bertiga dulu lahir.

5:22Nah, yang menonton ini pada dulu.

5:24Oke.

5:30Nah, jadi ini introduction untuk intro ke SPG.

5:34Ini sebenarnya ada lengkap di MDN.

5:36Tapi entah kenapa.

5:38Ya, seperti biasa.

5:40Agak kurang user friendly mungkin ya.

5:44Menurut pendapat ke pribadi, kalau artikel di MDN itu bagus.

5:48Lengkap.

5:50Sangat teknis mungkin ya.

5:52Bagus kalau kita sudah paham, kita sudah tahu.

5:54Formal.

5:56Tapi kalau misalnya kita masih 0 banget gitu.

5:58Lihat tuh kayak ngantuk doang.

6:00Terus suka nggak paham gitu.

6:02Ya nggak tahu, mungkin aku aja yang RAM-nya kurang.

6:06RAM-nya kurang.

6:08Kadang, apa ya?

6:10Ada yang visual learner.

6:14Ada yang text learner.

6:16Ada yang animation learner juga kan.

6:18Itu pengisian ya.

6:20Animation learner.

6:22Cuma punya introduction-nya semua lengkap di MDN.

6:26Tapi ada alternatifnya nih.

6:28Saya saranin kalau pengen lihat tentang...

6:32Pengen belajar dari awal tentang SVG,

6:34coba buka yang O'Reilly.

6:36O'Reilly.

6:38Itu satu buku sendiri Tuntut.

6:40SVG.

6:42Enggak, justru lebih simple sih.

6:44Satu halaman.

6:46Ini ya, OEB yang tadi sudah dibuka nih.

6:48Nah, ini.

6:50Nah, ini nih.

6:52Kayak lebih simple aja udah atributnya.

6:54Yang umum digunakan, apa saja.

6:56Terus...

6:58Berarti ada skema aja ya.

7:00Ini skema kan ya.

7:02Itu kan spesifikasi semua sih.

7:04Berarti ada spek dan skema-nya dong ya.

7:06Enggak.

7:08Ini, disini udah disebutkan ada

7:107 shape element in SVG.

7:12Ada circle,

7:14ellipse. Ellipse itu apa ya?

7:16Lonjong gitu ya.

7:18Telur.

7:20Ada garis. Path itu juga sebenarnya garis ya.

7:22Tapi beda. Path itu...

7:24Bisa lebih dari satu titik.

7:26Garis itu satu gitu.

7:28Kalau path itu bisa melengkung.

7:30Oh, kalau lain berarti

7:32hanya ada X1, Y1, dan

7:34X2, Y2.

7:36Kalau path itu bisa lebih dari itu ya.

7:38Dan kalau polygon,

7:40itu nyambung.

7:42Nyambung balik ya. Path tapi

7:44jadi nyatu ya.

7:46Bisa diisi.

7:48Biasanya kalau kita

7:50pakai software

7:52untuk bikin beri gambar,

7:54grafik kayak Figma

7:56atau Photoshop atau AI,

7:58Adobe Illustrator,

8:00itu kita pakai pensil gitu ya.

8:02Nyambung-nyambung sampai

8:04balik lagi ke

8:06posisi start-nya.

8:08Itu udah bisa diisi,

8:10bisa difill, bisa diisi warna.

8:12Kalau nggak nyambung nggak bisa diisi warna kan.

8:14Dalemannya.

8:16Terus ada

8:18polyline. Polyline ini apa ya?

8:20Ah, belum pernah pakai.

8:22Polyline.

8:24Kita cari aja disini.

8:26Nah, ini.

8:28Arbitrary straight line

8:30shape without closing final

8:32stroke. Oh, ini nggak tutup.

8:34Jadi kayak path juga dong dia.

8:36Path juga nggak tutup kan.

8:38Terus apa path? Coba baca dulu path.

8:40Oh iya.

8:42Itu kayaknya bentuknya nggak kaku

8:44gitu ya. Apa sih?

8:46Dari titik A ke titik B.

8:48Tadi yang polyline, dia dibawa

8:50polyline ya tadi.

8:52Oh ini. Arbitrary shape

8:54built from line and

8:56curve segments. Oh bisa

8:58lengkung ya, lengkung.

9:00Eh, berarti

9:02dia nyambung nggak? Dia balik ke awal nggak?

9:04Nggak. Kalau path bebas.

9:06Bebas. Oh, berarti?

9:08Dia garis doang. Bisa

9:10bisa melengkung

9:12dan bisa diisi. Bisa lurus.

9:14Kan ada D. D itu apa sih?

9:16Kan aku nggak salah,

9:18path itu temennya ada D.

9:20Nah D itu buat

9:22itunya ya? Apa?

9:24Direction or data.

9:26Direction. Oh. Direction

9:28or data itu juga nggak jelas ya.

9:30Apaan itu? Data.

9:32Everything is data.

9:34Dan terakhir ada rectangle.

9:36Itu rectangle ya.

9:38Itu kotak.

9:40Kotak mau kotaknya

9:42trapezium, jajaran jenjang.

9:44Itu juga

9:46termasuk kotak ya. Jadi ada

9:484 koordinat di sana.

9:50Trapezium itu kayak apa sih? Trapezium yang begini.

9:52Jajaran jenjang? Atas, yang atas

9:54lebih sempit.

9:56Jajaran jenjang

9:58oleng ya, miring. Miring.

10:00Itu pelajaran

10:02SD ya.

10:04Tuh, makanya penting matematika kan, meskipun

10:06menjadi program.

10:08Apa? Matematika SD ya? Cukup ya?

10:12Jadi programnya cukup matematika SD.

10:14Oh, SMP.

10:16Ini topik yang lainnya.

10:18Sinus-kosinus di mana tuh?

10:22Waduh.

10:24Tergantung. Tergantung tahunnya.

10:28SMP kayaknya ya.

10:32Jaman saya muda dulu.

10:34Wiss. Jaman saya muda.

10:36Nah ini

10:38seru ya. Kita share

10:40kali ya.

10:42Lanjut, lanjut, lanjut.

10:44Kita bahas sama lagi.

10:46Nah, mungkin kita bisa bahas

10:48dari ini ya,

10:50kegunaannya. Kan tadi kita udah sebutkan

10:52kalau yang tipe rastar itu

10:54biasa untuk foto, untuk

10:56ilustrasi yang ya pokoknya

10:58gambar nyata lah real gitu ya, mendekati

11:00nyata. Kalau SPG

11:02kan lebih ke

11:04ilustrasi ya kali ya. Ilustrasi

11:06kayak gambar kartun, ikon,

11:08ya kan?

11:10bentuk-bentuk. Ya, bentuk-bentuk

11:12dan hamburger itu.

11:14Kayak hamburger menu atau

11:16jempol. Ya.

11:18Kelebihannya juga dia bisa lebih kecil karena

11:20itu kode kan.

11:22Tulis apa? Text kan.

11:24Jadi bisa di kompres

11:26dan jadi lebih kecil gitu.

11:28Dibandingkan kalau rastar.

11:30Terutamanya banyak

11:32kegunaan. Kalau khusus untuk web dan

11:34performance ya. Karena dilihat dari sisi performance.

11:36Contoh aja

11:38kalau logo ya.

11:40Logo itu jaman dulu itu

11:42bentuknya bisa

11:44kalau rata-rata ya

11:46dia transparan pasti pada pakenya dulu

11:48PNG. PNG.

11:50Atau JPEG kalau gak transparan.

11:52Atau warna logo dan belakangnya

11:54sama-sama putih. Atau sama-sama hitam.

11:56Ya. Betul.

11:58Itu aneh.

12:00Nggak, jaman dulu kan belum ada

12:02transparan sih. Dan itu mahal.

12:04PNG itu kan mahal.

12:06Mahal-mahal.

12:08Terus itu

12:10kegunaannya. Lalu bisa

12:12untuk icon-icon jaman

12:14kemudian web itu kan

12:16banyak menggunakan icon-icon. Ingat dulu

12:18saya tuh

12:20supaya image itu

12:22bisa dibikin supaya

12:24kecil. Jangan dikirim satu-satu.

12:26Belum ada TTP2 ya. Jadi

12:28masih dikirim sebagai satu image.

12:30Jadi sprite namanya.

12:32Sprite.

12:34Image-nya besar.

12:36Terus isinya kecil-kecil. Dipotong-potong.

12:38Nanti kita setel sendiri

12:40pakai CSS.

12:42Kemudian lahir

12:44image tapi

12:46dibuat jadi font.

12:48Ya. Web font.

12:50Font Awesome. Font Awesome tuh paling

12:52terkenal. Paling awesome.

12:54Nah.

12:56Pengembangannya untuk

12:58performance itu rata-rata

13:00diajurkan supaya

13:02untuk

13:04image yang penting

13:06atau highest-highest priority.

13:08Contohnya kalau website-nya

13:10kita nge-load dan itu

13:12di atas above the fold.

13:14Contohnya logo deh. Karena logo itu

13:16supaya secepat mungkin bisa muncul.

13:18Jadi kalau misalnya website-nya nge-like, tahu itu

13:20website-nya benar gitu ya.

13:22Itu logonya diubah jadi

13:24SVG. SVG.

13:26Apalagi biasanya logo

13:28kan relatif simple ya. Logo type

13:30atau bentuknya ya

13:32apalah. Simple lah.

13:34Masih bisa dijadiin. Selama

13:36logonya nggak ber...

13:38ukuran

13:40logonya gede tuh semuanya

13:42semua. Selama logonya bukan

13:44muka orang, foto muka orang.

13:46Iya. Jangan terlalu banyak

13:48garis ini.

13:50Lengkung-lengkungan atau gimana gitu

13:52terlalu rame. Bisa dibikin

13:54jadi SVG lebih-lebih

13:56lebih kecil.

13:58Lebih cepat. Bahkan karena ada SVG

14:00nggak perlu di-load sebagai file.

14:02Tapi dibuat jadi. Bisa di-inline nih.

14:04Langsung di-set inline.

14:06Jadi bisa munculnya

14:08tercepat. Jadi begitu HTML-nya

14:10nge-load, dia langsung di-parsing, langsung muncul.

14:12Jadi nggak perlu di-request.

14:14Another example itu

14:16Fevicon. Fevicon.

14:18Jaman dulu.

14:20Fevicon itu bisa SVG ya?

14:22Bisa SVG sekarang ya. Buka link saya.

14:24Siap-siap-siap.

14:26Terakhir Fevicon Dynamic

14:28Fevicon.

14:30Dengan SVG.

14:32Maksudnya gimana.

14:34Jadi

14:36di dunia sekarang kan sudah

14:38ada dark mode

14:40bright

14:42light mode.

14:44Jadi yang bawa siapa sih ini?

14:46Si Apple kayaknya. Dark mode, light mode itu ya.

14:48Menyusuaikan kondisi.

14:50Bahkan juga

14:52di handphone juga bisa dark mode.

14:54Right mode tergantung jam

14:56tayang atau jam buka.

14:58Mas Nisa sudah...

15:00- Loh, mati.

15:02- Loh, ilat.

15:04- Dia mati. - Clip hangar banget

15:06lagi di tengah-tengah.

15:08- Udah apa ya kira-kira?

15:10- Udah buka

15:12layarnya. Tapi dia nggak bisa

15:14lihat. Mungkin mati lampu.

15:16- Oh.

15:18- Iya.

15:20- Jadi intinya, nggak tahu nih bener apa nggak ya.

15:22Kita coba nyamung-nyamungin aja ya.

15:24Jadi intinya ya iconnya itu

15:26bisa berubah sesuai dengan keadaan.

15:28Yang tadi light mode, dark mode, atau lagi

15:30apa? Lagi load atau lagi

15:32loading atau lagi apa?

15:34Ini sudah selesai

15:36koneksi putus ya.

15:38Lanjut, lanjut, lanjut.

15:40- Gimana tadi mau tanya apa?

15:42- Jadi kan lihat ya, SVG

15:44Fevicon-nya kan bisa sesuaikan dengan

15:46sesuai dengan

15:48dark mode atau light mode.

15:50Kenapa bisa seperti itu? Karena

15:52di SVG kan dia formanya XML

15:54dan bisa di-styling.

15:56- Bisa di-styling pakai CSS.

15:58- Pakai CSS. Jadi

16:00di dalam

16:02file SVG-nya

16:04langsung. Bisa di-scroll langsung

16:06kebawah, di-scroll kebawah.

16:08- Ini doang?

16:10- Iya, klik kanan.

16:12View source bisa nggak?

16:14- Ini dia, path kan?

16:16- Iya, itu di-style.

16:18Coba buka style tag-nya.

16:20- Nah ini.

16:22- Jadi dia bisa target

16:24ID dari path.

16:26Terus kemudian bisa dibuat

16:28preference color scheme. Jadi kalau

16:30color scheme-nya dark, stroke-stroke

16:32nya itu bisa dikasih

16:34ubah warna.

16:36- Itu query, apa?

16:38Query CSS biasa ya. Jadi bukan

16:40teknologi atau library.

16:42- Jadi ganti warna, jadi neon, kan?

16:44- Warna apa dulu yang aneh itu?

16:46Yang ada nama orang itu?

16:48- Rebecca Purple.

16:50- Oh, kan berubah kan matanya?

16:52Langsung.

16:54Bisa inline.

16:56Jadi bisa dibuat berkedip-kedip gitu ya?

17:00Popicon-nya.

17:02- Kalau bisa animation, mungkin bisa kali ya?

17:04- Bisa kali ya.

17:06- Ada contoh bagus nih animation, coba

17:08di-chat ya.

17:10Kan kita bayangin SVG itu selalu

17:12shape ya tadi ketujuh shape yang kita lihat.

17:14Tapi kan sebetulnya

17:16itu didalam

17:18bisa pakai text element juga.

17:20Penjelasannya ada tuh tadi di

17:22article O'Reilly. Coba buka demo-nya aja

17:24langsung.

17:26Bisa di-animate.

17:28- Wow.

17:30- Circle text-nya.

17:32- Jadi berasa kayak

17:34ini ya, kayak Flash gitu ya.

17:36- Kayak Flash.

17:38- Itu loading dulu dia.

17:40Wow.

17:42Lucu ya.

17:44- Itu ringan.

17:46Karena ya itu kan element

17:48biasa. Jadi

17:50kalau dibandingin apa ya?

17:52Bikin GIF atau video animation.

17:54Ya sebenarnya bisa kan pakai video atau pakai apalah.

17:56Cuma kan bakal lebih berat.

17:58- Ya.

18:00- Nah.

18:02Jadi untuk finalize tadi,

18:04SVG,

18:06ini-nya XML,

18:08dan bisa di-styling.

18:10Jadi kita bisa menyesuaikan.

18:12- Bisa ditarget dengan CSS.

18:14- Jadi dari sisi web performance,

18:16tadinya kita

18:18kalau misalnya profile SVG,

18:20kan pernah tuh ya SVG 48.48

18:22file-nya ini.

18:24128.128 file-nya ini.

18:26- Iya.

18:28Betul.

18:30- Kalau dengan

18:32progressive dynamic SVG

18:34seperti ini, nggak butuh.

18:36- Vector.

18:38Dan sudah menyesuaikan sama.

18:40- Bisa gede, bisa kecil, sesuai sama ukuran yang di-request ya.

18:42- Bisa detect OS juga kan.

18:44- Betul, betul.

18:46- Color mode dari si OS-nya.

18:48Jadi bisa lebih dynamic lagi.

18:50Itu.

18:52Keuntungan menggunakan SVG.

18:54Untuk vertical.

18:56Bisa untuk, hal yang sama juga

18:58bisa diaplikasikan ke

19:00SVG yang lainnya,

19:02termasuk logo.

19:04- Termasuk logo.

19:06Oh iya, benar. Logo-nya

19:08kalau misalkan kita light mode,

19:10mungkin logo-nya

19:12atau dark mode, nggak cocok itu dengan

19:14warna logo yang

19:16biasa, ya harus

19:18di-invert. - Bisesuaikan.

19:20- Bisesuaikan.

19:22- Jadi nggak perlu 2 file kan.

19:24Cukup 1 file.

19:26Atau nggak perlu file.

19:28Jadi inline semua.

19:30- Dan lanjutannya, ada yang

19:32lebih ekstrim, kita bisa

19:34ini, bikin

19:36apa namanya, chart.

19:38Charting library. Ini

19:40buatannya Pak Aris-Aris.

19:42Dia bisa bikin

19:44charting library tanpa JavaScript.

19:46Pakai. - Orang gila ya.

19:48- Orang gila.

19:50Ini di New York Times article dia bikin.

19:52- Oh, sebelum

19:54beliau pindah ke virtual ya.

19:56- Jadi, bentuknya kayak gini nih.

19:58Nah ini adalah SVG semua.

20:00Digambar dengan SVG.

20:02Sekarang programatik.

20:04Namanya Pancake.

20:06- Nah poliline tuh tadi.

20:08- D3.

20:10- D3.

20:12- D3 kan bisa di-export jadi SVG.

20:14- Benar, benar. Bisa, bisa.

20:16- Ini sudah selesai di-render.

20:18Dia di-export jadi SVG hasilnya.

20:20- Outputnya SSPG bisa.

20:22Betul.

20:24Dan kita bisa juga main-mainin

20:26pakai library yang

20:28D3 tadi untuk membuat

20:30misalkan circle atau rectangle.

20:32Itu menggunakan SVG juga bisa.

20:34Karena ya semuanya sama kan.

20:36Apa namanya?

20:38- Tempat matematika. Vector.

20:40- Maksudnya, tektek XML

20:42atau HTML kan mirip kan. Jadi bisa pakai

20:44div. Divnya bisa diganti circle gitu kan.

20:46Ini mana dia?

20:48Apa namanya? Nah ini dia.

20:50Pancake namanya. Pancake chart.

20:52source.sh.

20:54Wah dia belum diversal nih. Masih pakai surga.

20:56Open PR, open PR.

21:00- Pasti open deh.

21:02Udah nggak diurus lagi.

21:04- Udah nggak diurus lagi. Ini

21:06kita lihat aja ya. Kita lihat isinya

21:08seperti apa. Wah nggak kelihatan.

21:10Nah itu. Pet-pet aja nih isinya.

21:12SVG aja udah.

21:14- Dan ini auto-generate ya.

21:16Jadi dia sudah bikin

21:18bookie. Apa namanya? Functionnya.

21:20- Algorithmenya dia bikin.

21:22- Itu dia nulis sendiri gitu ya. Dia cuma tulis.

21:24- Iya.

21:26- Tulis patternnya ceritanya.

21:28- Betul. Ini juga SPG.

21:30- Cuma kan itu ada perhitungan ya kan.

21:32Misalnya under the hood dia sebetulnya

21:34ngitung algoritma-nya kalau pengen bikin bentuk

21:36misalnya apa, surfing dari angka

21:3810 ke angka 21.

21:40Itu mustahilnya titik-titiknya

21:42apa aja berarti dia kan udah bikin

21:44abstraksinya ya.

21:46- Dia bikin functionnya.

21:48Dia mau buka. Dia supaya bisa melengkung ya

21:50harus pakai function kan.

21:52- Betul.

21:54- Function ini maksudnya x^2 + y^2

21:56sama dengan x^2.

21:58Kayak gitulah contohnya maksudnya.

22:00- Iya.

22:02Ini adalah salah satu contoh yang lebih

22:04ekstrim lagi kan. Kalau tadi cuma icon tapi

22:06ini sekarang udah bisa jadi charting

22:08library yang

22:10jenisnya banyak, datanya

22:12banyak, dan tetap bisa

22:14performanya juga bagus gitu kan.

22:16Tadi sempat

22:18dibahas juga sama Ivan tentang

22:20Webphone.

22:22Fun Awesome. Fun Awesome ini awalnya

22:24kan adalah Webphone. Sekarang dia sudah

22:26berganti jadi SPG kan.

22:28- Iya.

22:30- Karena udah nggak recommended ya.

22:32- Coba. - Udah nggak recommended.

22:34- Ada nggak ya versi 2 atau versi 1-nya?

22:36- Udah nggak ada. Palfersen coba.

22:38- Webex Time Machine gitu.

22:40- Oh. Ini ada, masih ada.

22:42- Itu ada.

22:44- Itu masih ini loh.

22:46- Download.

22:48- 2001 tuh. Masih icon.

22:50- Iya. Coba ya.

22:52Free icon.

22:54- Tapi itu masih berupa phone file kan ya

22:56dulu. - Iya.

22:58Dua belas tahun yang lalu. Sebelas tahun yang lalu.

23:00Ada yang lahir belum?

23:02- Masa sebelas tahun.

23:04- Udah lah.

23:06- Di antara kita maksudnya.

23:08- Anaknya udah lahir.

23:10- Umur sebelas.

23:12- Umur sebelas.

23:14Iya. Ini

23:16dia mulai convert ke

23:18SPG. Kapan ya?

23:20Font Assam versi berapa ya?

23:22- 5 kali ya.

23:24- 5 ya.

23:26- Oh ya. SPG support.

23:28- SPG support.

23:30- 7800 icon.

23:32- Jadi karena bentuk

23:36shape itu di ekspresikan dengan

23:38kita sebaiknya pakai SPG.

23:40Jangan pakai phone file ya.

23:42- Kenapa?

23:44- Phone file buat text.

23:46- Oh itu ya.

23:48Accessibility.

23:50- Ya. Performance ya. Yang jelas ya.

23:52Oh bukan. Paling utama

23:54sih performance.

23:56- Butuhnya cuma 2 icon. Downloadnya

23:582000 icon.

24:00- Performance tapi betul juga. Accessibility juga.

24:02Kan suka ada tuh kalau loading-nya lambat.

24:04Malah

24:06FA, FA-

24:08FA-hamburger

24:10lah. Itu kan.

24:12Iya.

24:14- Tadi itu yang tadi

24:16di komen yang pink

24:18waving. Nggak ada.

24:20- Nggak muncul ya.

24:22Iya iya iya.

24:24Terus sekarang

24:26ada

24:28trend-nya malah

24:30sekarang ke emoji ya.

24:32Banyakan udah nggak pakai.

24:34Jarang. Maksudnya ada beberapa website

24:36yang malah menggunakan emoji sebagai

24:38ilustrasi.

24:40- Udah standard ya?

24:42- Udah standard ya?

24:44- Udah standard. Tapi kan

24:46sebenarnya ada masalahnya juga.

24:48Karena antar OS kan

24:50- Berbeda?

24:52Atau tidak? Belum ada?

24:54- Versi-versinya. Nah

24:56buat besok-besok lah kita kayaknya

24:58ngobrolin Unicode atau ngobrolin

25:00emoji.

25:02- Siap, siap, siap. Nah ini

25:04beberapa contoh ya. Penggunaannya tadi ada icon.

25:06Ini juga ada buat

25:08menggantikan. Apa? Favicon

25:10ada buat icon buat

25:12navigasi web dan lain-lain.

25:14- Favicon, icon biasa.

25:16- Bahkan ada sampai

25:18charting library.

25:20- Charting sama tadi art

25:22atau animation lah.

25:24- Iya betul-betul. Animation

25:26juga lumayan ya sekarang.

25:28Banyak juga yang ada

25:30library-nya untuk SVG ya.

25:32- SVG di-animate gimana sih caranya?

25:36- Gitu atau gimana?

25:38- Ini pakai transform bisa.

25:40- Pakai transform ya?

25:42- Ternyata transform deh CSS itu.

25:44- Iya mana? Oh yang tadi ya?

25:46Circular ini ya?

25:48- Iya.

25:50- Kayaknya ada contoh kode-nya.

25:52- Pakai JavaScript apa?

25:54Kalau D3 kan ada ya?

25:56- Iya.

25:58- Gak kelihatan. Itu scriptnya.

26:02Gak kelihatan. - Iya, gak kelihatan.

26:04- Ya, gitu lah.

26:06Tapi seru ya.

26:08- Oh ini transform.

26:10- Transform ya?

26:12- CSS transform.

26:14- Jadi CSS pun udah

26:16lumayan powerful ya. Sampai animasi segala

26:18udah didukung ya.

26:20- Sebetulnya

26:22transformasi sih.

26:24Bukan animation.

26:26Soalnya kayaknya beda itu ya.

26:28Beda API.

26:30- Animation dia keyframe

26:32ya.

26:34- Oh iya ada satu lagi use case

26:36yang biasanya juga

26:38cukup sering saya gunakan ini.

26:40Dari NyanJS.

26:42Biasanya kalau dari

26:44file, dari Photoshop

26:46kita mau import gak bisa kan.

26:48Kita export dulu

26:50sebagai SVG, terus kita buka di Figma

26:52atau di software lain.

26:54Itu juga bisa jadi file

26:56perantara.

26:58- Tapi itu kan sebenarnya ala-ala

27:00kan. - Ala-ala doang.

27:02- Dalemnya use kayak reference

27:04ke image rasternya.

27:06Pernah kecewa.

27:08- Pernah kecewa.

27:10- Pernah jadi korban Fox.

27:12- Atau mungkin kalau dari

27:14Photoshop agak-agak berbeda ya. Karena

27:16yang satu raster, yang satu vector. Mungkin dari

27:18Adobe Illustrator, atau dari

27:20Inkscape, ya dari software-software

27:22yang sama-sama vector.

27:24Bisa menggunakan SVG.

27:26Bahkan Inkscape itu default

27:28file-nya itu

27:30dia pakai SVG.

27:32Jadi kalau misalkan kita

27:34kan ini kalau di web kan biasanya

27:36kita programatically kan.

27:38Kita coding atau kita

27:40tulis kodenya kan. Kalau di

27:42Inkscape atau di Figma itu

27:44kita bisa gambarin dengan ada

27:46GUI-nya lah.

27:48Jadi kalau misalkan temen-temen

27:50nanti ada rencana mau bikin

27:52aplikasi gambar, ya bisa

27:54pakai format SVG.

27:56Mungkin kayak

27:58Excalidraw gitu-gitu, mungkin formatnya

28:00SVG kali ya.

28:02- Mungkin ya. Eh, itu canvas sih

28:04tapi. - Canvas ya.

28:06Nah, bedanya canvas sama SVG

28:08beda ya. Yang satu buat

28:10buat apa?

28:12- Gua apa? Mas Riza nih.

28:14- Apa tuh? - Normal kok.

28:16- Oh, Mas Riza ya. Oh, gua buat nih.

28:18Di tempatnya. - Kenapa?

28:20- Macet-macet antara Mas Riza sama

28:22Eka, Gobbini. Kayaknya.

28:24Kita malah Ivan yang macet.

28:26- Iya, maksudnya, koneksi gua lagi

28:28ini, kayaknya lagi nge-switch itu tuh.

28:30- Oh, pindah, ini

28:32pindah koneksi.

28:34Oke.

28:36Nah, kita bahas

28:38ini aja kali ya. Apa?

28:40Bagaimana penggunaan

28:42SVG di React.

28:44Ini dia.

28:48- React Rectangle.

28:50- React Rectangle.

28:52Sebetulnya ya

28:54sama aja kan ya?

28:56- Sama.

28:58- Di framework atau UI

29:00library apapun. Cuma ini mungkin

29:02lebih ke beginner friendly

29:04aja sih buat yang bingung

29:06kenapa SVG itu kan bisa dianggap

29:08bisa di loading sebagai file image

29:10juga. Jadi bisa

29:12dimasukin ke dalam image tag.

29:14Terus dia bisa

29:16di inline seperti biasa.

29:18Tapi kan jangan lupa React

29:20itu kan sebenarnya menyerupai HTML

29:22tapi bukan. Dia kan JSX

29:24kan. Jadi apa? Bisa

29:26di inline, ya sebenarnya

29:28sama kayak elemen

29:30JSX lainnya. Nah,

29:32jangan lupa kayak atribut-atributnya

29:34juga harus disesuaikan

29:36sama JSX. Jadi nggak boleh

29:38ada dash-nya atau

29:40apapun yang aslinya, atributnya

29:42ada dash-nya, xlink drive

29:44atau apapun harus di-convert

29:46jadi camel case ya.

29:48Terus bisa

29:50dijadikan komponen juga. Coba

29:52scroll ke bawah ya.

29:54Scroll ke bawah, zoom in

29:56dikit biar besar. Nah,

29:58atas dikit.

30:00Nah, itu yang pertama sebenarnya

30:06kita bisa pakai

30:08kayak image biasa.

30:10Tapi ya sebenarnya kurang recommended

30:12ya karena semua keuntungan

30:14yang kita bahas tadi kan jadi nggak

30:16berlaku.

30:18Tapi ya bisa. Maksudnya

30:20kalau bisa atau nggak bisa-bisa aja.

30:22Oke.

30:24Nah,

30:26terus bisa di

30:28import.

30:30Iya, apa React kalau pakai

30:32CRA kan begini ya?

30:34Logo SVG ya. Ini demo-nya ya.

30:36Logo

30:38React di demo kan ini kan.

30:40Iya, yang muter-muter itu.

30:44Apa?

30:46Nyemput itu langsung kebayang gitu.

30:48Langsung ada mental image-nya.

30:50Ya, itulah.

30:52Nah, terus ada

30:54ini library yang

30:56teken banget sih ya, SVGR

30:58mengkonversi

31:00SVG biasa

31:02jadi React Komponen.

31:04Jadi ya bisa dipakai

31:06sebagai komponen

31:08biasa, komponen React biasa.

31:10Oh, jadi panggil komponen

31:12gini, nanti dia akan expand seperti ini.

31:14Dia akan meng-inline.

31:16Gak, kayaknya jadi SVG.

31:18Oh, nggak ya. SVG ya.

31:20Jadi kayak gini.

31:22Nggak pakai Dangerous

31:26set HTML.

31:28Nggak usah pakai Dangerous list.

31:30Blah-blah-blah.

31:32Nah, terus kalau mau

31:34create komponen manually juga

31:36ya, boleh-boleh aja.

31:38Bisa-bisa aja.

31:40Aman ya.

31:42Tetap, apa, di React

31:44kita bisa langsung tulis kayak gini ya.

31:46Tanpa perlu ada rabli-rabli apa-apa.

31:48Cuma ada beberapa atribut

31:50yang nggak bisa kan.

31:52Maksudnya harus, harus

31:54diubah biar apa?

31:56JSX-friendly.

31:58Kelas jadi kelas name, contohnya.

32:00Yang jelas, kelas jadi kelas name.

32:02Terus, apa, xlink-ref.

32:04Oh.

32:06Berarti...

32:08titik dua

32:10itu harus diubah kayak cuma

32:12sintaksnya doang berubah dikit.

32:14Ya. Dan bisa

32:16ditambahkan logika juga seperti ini kan.

32:18Kalau mau, misalkan lagi aktif

32:20dia warnanya apa, lagi pasif dia warnanya apa.

32:22Pakai JavaScript aja

32:24di sini ya.

32:26Atau misalnya apa?

32:28Icon kayak new email

32:30atau notif atau apalah gitu.

32:32Ada angkanya didalemnya

32:34tergantung misalnya unread items-nya

32:36berapa itu ya bisa diubah juga.

32:38Yang bikin orang FOMO gitu.

32:42Yang Gmail itu kan biasanya ada

32:46itu kan ada, ada

32:48badge-nya kan.

32:50Buat orang OCD kan jadi FOMO gitu.

32:52Harus ngeklik.

32:54Pengen ngeklik jadinya ya.

32:56Bisa bikin distracting juga misalnya di

32:58animate atau di apa, di rotate.

33:00Bisa loncat.

33:02Genggung.

33:04Mencari perhatian itu ya.

33:06Terus apa lagi penggunaannya?

33:12Bisa buat

33:14Sprite. Sprite ini kan

33:16tadi Ivan udah sempet bahas juga ya.

33:18Sprite ini

33:20sebenarnya konsep dari

33:22game kan. Bukan minuman ya.

33:24Sprite.

33:28Jadi kita punya banyak icon.

33:30Habis itu kita

33:32crop. Kita crop

33:34untuk digunakan misalkan icon

33:36yang koordinat 1.1

33:38X-nya 1, Y yang 1.

33:40Atau cell 1 gitu kan.

33:42Cell 2, kolom

33:442 gitu dan seterusnya.

33:46Ada nggak contohnya di sini?

33:48Gak ada gambarnya ya.

33:52Penjelasan aja ya.

33:54Jadi salah satu kelebihannya

33:56si SPG ini kita bisa melakukan

33:58crop dengan

34:00cara, iya.

34:02Di sini bisa banyak.

34:04Di sini bisa banyak

34:06dan bisa di crop juga dengan

34:08program, dengan kode.

34:10Kalau misalkan kayak

34:12raster PNG gitu

34:16mungkin bisa pakai CSS

34:18sekarang ya untuk kita dapetin

34:20di ujung kiri, ujung kanan, tapi

34:22nggak spesifiknya.

34:24Bisa ya?

34:26Oh iya, yang Sprite itu juga bahkan

34:28nggak SVG ya?

34:30SVG Sprite itu kelebihannya sih

34:32kalau menurutku adalah

34:34kita bisa pakai ID kan.

34:36Jadi nggak perlu

34:38secara manual. Maksudnya

34:40kalau jaman dulu atau buat game atau apapun

34:42PNG atau

34:44JPG kalau mau pun

34:46sebenarnya bisa dibikin jadi Sprite kan.

34:48Cuma kalau SVG kan nggak perlu karena

34:50maksudnya kita nggak perlu

34:52menspesifikasi

34:54koordinatnya satu persatu. Pusing juga

34:56kan misalnya kita punya SVG besar

34:58ikonnya kita ngitung

35:00manual, misalnya kita pengen

35:02pakai ikon

35:04yang, apa?

35:06image yang ada di tengah-tengah.

35:08Kita nggak perlu memikir koordinat

35:10semua tinggal dikasih ID.

35:12Masing-masing isinya dikasih ID

35:14terus kita tinggal pakai

35:16pas kita mengkonsumsi maka

35:18tinggal pakai SVG terus pakai itu.

35:20Itu tuh di contoh kodenya.

35:22Use bla bla bla

35:24/icons.svg

35:26ada itu-nya

35:28ada pound sign-nya

35:30ada hash-nya, nah, terus tinggal

35:32panggil aja ID name-nya.

35:34Oke.

35:36Oh, lucu juga ya.

35:40Menarik-menarik.

35:42Kita nggak perlu mengitung apapun manual.

35:44Iya. Nah,

35:46ini ada pertanyaan bagus.

35:48Jadi lebih bagus pakai elemen apa untuk

35:50embed image SVG?

35:52UMG kah, picture, figure,

35:54atau objek, atau apa?

35:56Langsung aja SVG-nya.

35:58Iya.

36:00Langsung SVG ya. / Memang jelas.

36:02Nggak usah pakai image ya. / Iya.

36:04Kalau image itu malah

36:06jadi nggak dapet keuntungannya

36:08nggak dapet advantage-nya si SVG sih.

36:10Iya, langsung SVG gini aja.

36:12Iya, langsung SVG.

36:14Oh, cuma pernah lihat sih. Kenapa ya

36:16SVG di-wrap pakai objek.

36:18Cuma nggak ingat use case-nya apa.

36:22Nah, kalau picture itu kan

36:24sebetulnya untuk art direction ya.

36:26Biasa dipakai

36:28picture itu kan

36:30di dalamnya ada kayak image

36:32source set, macem-macem, jadi buat

36:34fallback. Mungkin buat fallback kali ya.

36:36Buat fallback. Bisa jadi, bisa jadi.

36:38Kalau ada yang

36:40belum support.

36:42Belum support

36:44apa?

36:46SVG. / Elemen-elemen lainnya.

36:48Tapi

36:50modern browser udah semua kan?

36:52Sudah. / Udah lah.

36:54Itu udah standard kan?

36:56SVG ini nggak ada baseline-nya, belum ada baseline-nya.

36:58Justru ini paling baseline kali.

37:00Yang ini nggak ada ya.

37:02Nggak ada

37:04widget baseline-nya di sini ya.

37:06Kita harus pakai NIU.

37:08Open PR nanti.

37:10Karena dulu semua disambahin.

37:12Kita lihat ya

37:14SVG.

37:16UI semua.

37:18UI pun justru.

37:20Udah justru semua. Jadi nggak usah khawatir kalau

37:22berarti nggak perlu fallback dong.

37:24Tetap ya.

37:26Bukan. Picture itu

37:28isinya banyak ya.

37:30Mungkin misalnya

37:32misalnya atasnya ada image yang

37:34pakai Aviv gitu.

37:36Pakai Aviv atau WebP.

37:38Mungkin fallbacknya SVG

37:40mungkin bisa aja.

37:42Nah ini nih

37:44kalau penjelasan

37:46picture itu

37:48jadi picture itu

37:50berisi satu

37:52atau lebih

37:54image element.

37:56Apapun yang bisa

37:58menampilkan image.

38:00Nah itu tuh

38:02urut dari atas ke bawah

38:04ya standard lah.

38:06Jadi kalau yang di atas support.

38:08Kalau support udah ditabrikan gini.

38:10Kalau nggak dia ke bawah lagi.

38:12Mungkin bisa aja

38:14paling bawah SVG sebagai

38:16fallback yang paling praktis.

38:18Yang paling praktis. Yang paling banyak dibung

38:20di mana-mana.

38:22Tapi kita jangan

38:26perlu mengetahui

38:28kekurangan

38:30dari SVG bahaya ini.

38:32Nah tadi tuh

38:34pas sebelum live katanya

38:36pedang bermata dua kata Ivan.

38:38SVG adalah pedang bermata dua.

38:42Dia support

38:44browser-nya cukup lama.

38:46Sudah bagus, sudah standard, sudah

38:48bisa dipakein

38:50XML, bisa di-sprite,

38:52bisa di-animate, segala macem.

38:54Tetapi SVG itu

38:56bisa punya security vulnerability.

38:58Coba buka link saya The Dangerous of SVG.

39:02Karena

39:04di SVG itu kan XML.

39:06Dia XHTML bisa dirender

39:08oleh si browser.

39:10Di dalam file

39:12SVG.

39:14Di file SVG

39:16juga bisa disusupin

39:18JavaScript.

39:20Bisa di-inject.

39:22Membaca cookies.

39:24Bisa masukin script.

39:28Waduh, kita baru tahu ini.

39:32Ya ampun.

39:34Bisa dimasukin style.

39:36Bisa dimasukin

39:38style. Bisa dimasukin

39:40XHTML ya.

39:42Bisa di-running

39:44oleh si browser. Bisa di-render.

39:46Bisa di-execute.

39:48Bisa dimasukin script.

39:50Makanya sampai sekarang

39:54kalau teman-teman pakai WordPress

39:56untuk upload

39:58image, kalau standard

40:00bukan ditaman plugin ya.

40:02Upload image via media library

40:04yang WordPress, SVG itu

40:06belum bisa.

40:08Perlu diberikan

40:12apa namanya

40:14raw access tertentu.

40:16Dan pakai plugin supaya

40:18tidak membolehkan.

40:20Untuk dalam control

40:22environment aja kalau mau upload

40:24SVG. Jadi kalau mau pakai SVG

40:26atau buat teman-teman

40:28yang pakai

40:30yang ingin mengutamakan SVG

40:32pakai lah SVG yang kalian

40:34tahu source-nya

40:36buat sendiri atau pakai sendiri

40:38hanya pakai untuk yang kalian

40:40load dari internal website sendiri.

40:42Jangan terlalu upload

40:44dari user.

40:48User generated content jangan ya.

40:50User generated content bisa upload SVG

40:52jangan. Jangan.

40:54Jangan juga ngambil

40:56file SVG dari website

40:58orang gitu ya.

41:02Sanitize dulu.

41:04Sanitize dulu.

41:06Dihapus dulu.

41:08Terus jangan simpan

41:10file SVG-nya di folder

41:12yang

41:14bisa di access

41:16dari luar contohnya.

41:18Public maksudnya.

41:20Jadi hati-hati

41:22dengan SVG.

41:24Padang bermata dua.

41:26Padang bermata dua.

41:28Baru sadar ini selama ini

41:30pakai SVG. Ya, cuma emang

41:32apa? Nggak pernah

41:34handle user submitted SVG

41:36sih untungnya.

41:38Caranya gimana ya?

41:44Kalau saya biasanya

41:46kalau ada file SVG yang mau

41:48dimasukin ke web

41:50saya compress dulu pakai

41:52SVG-OMG.

41:54Itu termasuk ada ininya nggak?

41:56Ada, ini dia

41:58masuk ke ini nggak ya? Maksudnya

42:00copy aja tadi ya?

42:02Benar-benar.

42:04Ini

42:06tap paste, markup,

42:08paste.

42:10Oh, alert tuh. Dia baca

42:12jadi text ya.

42:14Ditampilkan?

42:16Ya,

42:18berarti ini

42:20aman ya. Kita download dari sini.

42:22Bukan aman ya.

42:24Download dulu jadinya apa?

42:26Itu ada markupnya. Coba

42:28ditap markup jadi apa tuh?

42:30Oh iya, cek.

42:32Kiri atas.

42:34Itu masih ada.

42:36Tapi di decode.

42:38Aman, aman. Udah di

42:40decode HTML entities.

42:42Ya, nggak bisa jalan ya.

42:44Error ya.

42:46Bukan error, ya itu text.

42:48Dianggap sebagai text.

42:50Ya kan, bisa aja.

42:52Ada use case yang

42:54inosen. Misalnya kita

42:56nama perusahaan atau nama text yang

42:58pengen kita tampilin, ada apa?

43:00Ada itunya, bracketsnya,

43:02kan bisa aja.

43:04Jadi nggak di execute

43:06sebagai JavaScript, ya ditampilin

43:08aja itu.

43:10Jadi kalau misalkan teman-teman punya file SVG

43:12untuk memastikan bahwa tidak

43:14ada hal-hal yang aneh, bisa

43:16pakai, salah satunya bisa pakai tools ini ya.

43:18Selain untuk

43:20compress, tapi juga untuk

43:22keamanan juga.

43:24Jadi SVGU itu

43:26tools library

43:28SVGeo Primersers juga umat ya?

43:30Featuresnya apa sih?

43:32Featuresnya apa lagi?

43:34Mungkin ada remove apa lagi coba?

43:36Ya, bisa remove metadata, remove

43:38command, jadi dia compress.

43:40Oh lagi, clean up,

43:42attribute, style to

43:44attribute, clean up IDs,

43:46remove raster image.

43:48Nah, ini nih

43:50kalau yang apa, dari Figma atau

43:52ember image,

43:54hilang semua itu.

43:56Banyak sekali.

43:58Soalnya kan itu ya, mungkin sejarahnya kan

44:00SVG itu banyak yang

44:02degenerate oleh software ya,

44:04jarang malah yang ditulis

44:06sama programmer,

44:08sama manusia.

44:10Remove script element.

44:12Dah, hilang.

44:14Hilang.

44:16Kalau jadi remove,

44:18hilang.

44:20Kalau nggak di remove, di apa?

44:22Encode ya?

44:24Encode.

44:26Jadi

44:28di render sebagai text biasa.

44:30Jadi, kalau menerima SVG,

44:34dari siapapun,

44:36pakailah dulu ini.

44:38Hapus script.

44:40Ya.

44:42Betul.

44:44Selain jazz entice, juga kan banyak kalau misalnya

44:46download dari

44:48software kan, suka banyak

44:50grouping atau metadata yang

44:52nggak perlu, yang bikin

44:54jadi ini jadi lebih rapih.

44:56Ya.

44:58Ini ada pertanyaan yang cukup panjang.

45:00Sering convert SVG jadi JSX

45:02termasuk logo, cuma bakal ke crowd

45:04Google tidak ya? Penasaran juga

45:06karena si JSX ini tidak diperlukan

45:08sebagai aset disimpan di public folder

45:10atau di host di cloud storage.

45:12Ini patinya hubungannya sama

45:14SEO kan ya?

45:16Ya.

45:18Rata-rata, kalau misalnya

45:20untuk Google image tentunya

45:22saya nggak tahu apakah SVG

45:24jadi

45:26belum pernah that case-nya ya, saya nggak tahu.

45:28Belum pernah research juga.

45:30Apakah misalnya...

45:32Kalau ke crawl sih pasti ke crawl ya.

45:34Pasti.

45:36Apa yang di crawl.

45:38Biasanya...

45:40Ya kan JSX itu di convert jadi HTML biasa.

45:42Jadi dianggap sebagai HTML sih.

45:44Ya maksudnya gini.

45:46Funksinya apa sih

45:48kalau misalnya si Google itu

45:50nge-crawl atau bisa masuk

45:52di hasil pencarian.

45:54Konteksnya apa?

45:56Apakah kita ingin image kita itu

45:58muncul di hasil pencarian Google image.

46:00Image.

46:02Logo.

46:04Kalau logo...

46:06Di sini soalnya dicontohin logo.

46:08Termasuk logo misalkan, contohnya.

46:12Apakah logo kita mau hasilnya muncul

46:14di Google image?

46:16Iya, bisa aja kan.

46:18Kalau misalnya kita...

46:20Yang penting harus ada all attribute.

46:22React logo.

46:24All attribute mungkin.

46:26Jadi harus ada all attribute.

46:28Jadi kalau logonya itu

46:30kalau dirender sebagai SVG mungkin

46:32kayaknya nggak masuk jadi

46:34image.

46:36Tapi tetap di crawl dan bisa dicari

46:38dengan keyword itu kan.

46:40Karena di SVG nggak ada

46:42all attribute.

46:44Ada nggak sih?

46:46Nah ada link-nya tentang accessibility.

46:48Cok nih bridging-nya.

46:50Coba deh.

46:52Mantap. Accessibility yang ini.

46:54Yang smashing

46:56magazine.

46:58Iya, yang teratas dulu.

47:00Attributnya apa?

47:04Popo-nya ada.

47:06Ya, di bawah.

47:08Pattern, image, artwork.

47:10Kalau pakai image.

47:14Ini kan pakai image kan.

47:16Pasti bisa.

47:18Lanjut, lanjut.

47:20Terus pakai image juga.

47:22Masih pakai role image.

47:24Pattern 3, ini pakai area label.

47:26Pattern 4 masih image juga.

47:28Masih image. Nah ini image semua.

47:30SVG ada role.

47:32Oh, ada title.

47:34Oh ternyata pakenya title.

47:38Oh ini buat keterangan ya.

47:40Keterangan dari image-nya.

47:42Kalau misalnya

47:44image ini logo kita

47:46dibikin. Selama masih ada

47:48text itu bisa jadinya.

47:50Masuknya.

47:52Itu dibaca

47:54di crawling sebagai text

47:56biasa. Text yang bagian

47:58dari SVG itu.

48:00Menarik banget.

48:04SVG, role image.

48:06Ada title, terus ada area described.

48:08Soal area ini kita pernah bahas

48:12di episode kapan ya?

48:14Waktu bahas accessibility.

48:16A11I.

48:20A11I.

48:22Oke, berikutnya.

48:28Ini ada, kenapa?

48:30Lanjut, lanjut.

48:32Ada contohnya lagi. Link di bawahnya tuh.

48:34Hmm.

48:36A101.

48:40Hmm,

48:50buat the accessibility ya.

49:04Oke, dan lain-lain itu

49:06nama-nama screen reader yang

49:08populer, yang banyak dipakai.

49:10Nah, jadi

49:12itu ya udah cukup helpful

49:14grafik Hibiscus Blossom

49:16atau image Hibiscus Blossom.

49:18Nah, coba ke bawah lagi.

49:20Ini masih image juga

49:24sama.

49:26Coba inline SVG jadinya apa?

49:28Nah, inline SVG.

49:30Will not request

49:32recognizes.

49:34Nah, tuh, ada

49:36recognize ya. Tidak di recognize ya.

49:38Oh, karena bukan ada title-nya kan.

49:40Oh, berarti

49:42ini ya.

49:44Atribut yang penting ya.

49:46Described by.

49:48Ini contoh.

49:50Nah, SVG.

49:54Ada title, ada described

49:56by-nya mana?

49:58Di atas.

50:00Oh, ini ini.

50:02Ya, maksudnya

50:04area described by itu, habis itu

50:06itu adalah element ID, my title.

50:08Terus, dia akan

50:10ke my title itu kan.

50:12Title itu apa isinya.

50:14Jadi, ini dibaca

50:16heart,

50:18shape of red heart.

50:20Ya,

50:22baru description-nya.

50:24Shape of red heart.

50:28NVDA itu

50:30gak coba.

50:32There's nothing.

50:34Or NVDA, there's nothing.

50:36Gak dibaca sama sekali ya.

50:38Gak peduli.

50:40Gak peduli dia.

50:42Diskip.

50:44Ada area role.

50:46Area role image ya.

50:48Area role image ya.

50:50Jadinya ini.

50:52Oh, NVDA

50:54jadi peduli, jadi ngebaca.

50:56Oh, nice.

50:58Don't ask me why

51:00announce the heart twice.

51:02Description-nya tetep gak dibaca.

51:06Tapi dia nams heart.

51:08Sampe artikel pun

51:10agak bingung.

51:12Tapi false offer juga agak

51:16misleading ya. Agak sedikit misleading.

51:18Karena dia gak recognize

51:20SVG sebagai image.

51:22Dia mengedit

51:24sebagai group ya.

51:26For practical purpose

51:28ya cukup reasonable lah.

51:30Misalnya kita ada icon

51:32thumbs up

51:34itu jempol.

51:36Itu dibaca itu icon jempol.

51:38Siap-siap.

51:42Apa nih? Lanjut.

51:48Nah, ini ada ini nih.

51:50Ada saran topik.

51:52Saran topik.

51:54Bahas 3DS. Masih ada hubungannya kan?

51:56Eh, gak ada ya. Gak ada.

51:58Cuman ada hubungannya grafik lah.

52:00Kita perlu bahas tentang

52:02ini juga nih. VR.

52:04VR, AR,

52:06XR ya. Yang

52:083D gitu ya. Kayaknya menarik juga ya.

52:10Terima kasih ya.

52:12Apalagi udah DI tuh kan.

52:14Beli Vision Pro dulu.

52:16Vision Pro.

52:18Oh iya, iya, iya.

52:20Ya, gara-gara Apple ya.

52:22Dipuja puja, luar biasa.

52:30Tapi nanti ada yang beli aja.

52:34Terus

52:40it, it, it.

52:50Web GPU juga udah makin

52:52canggih ya.

52:54Eh, web apa sih yang baru? Web GPU

52:56yang versi baru.

52:58Nah, itu bakal ngaruh banget ke

53:00AR, VR, XR, dan

53:02RRR lainnya.

53:04Iya. Kalo di

53:06apa? Di device

53:08yang si punya-nya

53:10Facebook apa namanya?

53:12Lupa.

53:14Iya, Meta.

53:16Kan dia punya

53:18punya merk sendiri kan.

53:20Nah itu udah dilengkapi dengan

53:22tentu saja udah dilengkapi dengan

53:24browser yang bisa 3D.

53:26Oh dia bikin browser sendiri?

53:28Enggak, enggak, enggak.

53:30Browser, kayaknya

53:32Firefox ada versi

53:34yang web XRnya ada.

53:36Kayaknya Chrome juga ada.

53:38Jadi

53:40cara yang paling sederhana

53:42untuk masuk ke dunia

53:44AR, XR, dan lain-lain, ya itu

53:46manfaatkan web browser.

53:48Salah satunya pakai 3DS.

53:50Kalo misalkan mau bikin native,

53:52harus belajar di Unity.

53:54Agak ribet tuh.

53:56Gitu.

53:58Itu juga salah satu yang

54:00topik yang, gitu ya,

54:02topik yang menarik juga

54:04untuk dibahas. Nah, ini ada pertanyaan

54:06tapi kita nggak bisa jawab.

54:08Kenapa SPG lebih ribet dibandingkan

54:10gambar di Flutter padahal Android itu sendiri

54:12XML. Iya.

54:14Bisa. Kita nggak tahu.

54:16Satu buat

54:18XMLnya buat configure

54:20dan buat layout.

54:22Satu buat rendering.

54:24Completely different thing.

54:26Mungkin si renderingnya nggak

54:28atau tidak memudahkan developer

54:30untuk menggunakan SPG.

54:32Mungkin belum

54:34terlalu populer si

54:36menggunakan format SPG.

54:38Makanya prioritasnya agak diturunin

54:40untuk developer experience-nya.

54:42Mungkin gitu ya.

54:44Karena jarang masih jarangnya.

54:46Seperti kita bisa featuring jadi Flutter lagi nih.

54:48Eh, belum pernah. Iya, ini juga ada nih.

54:50Performa Flutter Web itu gimana?

54:52Kita nggak tahu.

54:54Jujur saja kita nggak tahu.

54:56Kita juga nanya nanti.

54:58Jadi,

55:00kalau featuring jadi Flutter, kita sambil

55:02tanya-tanya juga ya.

55:04Terakhir jawabannya

55:06masih suram katanya.

55:08Flutter Web itu masih suram.

55:10Itu kan soal usage,

55:12bukan soal performance.

55:14Nggak, masih

55:16developer experience-nya

55:18masih kurang bagus.

55:20Jadi, masih belum direkomendasikan

55:22untuk digunakan. Terakhir itu.

55:24Itu sebelum Google I/O ya.

55:26Kemarin Google I/O juga ada beberapa hal

55:28yang terkait dengan Flutter.

55:30Salah satunya

55:32yang multi-platform kan.

55:34Itu sempat kita bahas juga

55:36yang direndernya ke

55:38Canvas yang kemarin itu.

55:40- Iya, iya, iya.

55:42- Nah, itu juga

55:44kita nggak tahu tuh gimana tuh.

55:46Karena aksesibilitinya jadi

55:48berkurang ya.

55:50- Jadi nggak ada sama sekali.

55:52- Jadi nggak ada sama sekali. Nah,

55:54buat SVG dari Canvas langsung jadi.

55:56Oh iya, iya. Bisa pakai SVG ya?

55:58Bisa.

56:00- Nah, jangan lupa pakai, apa, dioptimize

56:02dulu biar nggak, biasanya kalau yang

56:04auto-generate-nya lepotan.

56:06- Hmm.

56:08Terus NFT juga,

56:10NFT masih itu ya?

56:12Sekarang kan?

56:14- Mesti ada yang main.

56:16- Mending daripada NFT. - Masih banyak lah.

56:18- Itu AI-generated image.

56:20Kalau kan ada mid-journey untuk

56:22generate image. Siapa tahu,

56:24next-nya adalah meet something yang

56:26generate-nya SVG.

56:28- Oke, NFT. Masih.

56:30- Oh, SVG.

56:32- Oh iya, benar juga.

56:34Jadi nggak pakai raster ya?

56:36Image-nya SVG ya?

56:38Wah, ide bagus, ide bagus.

56:40- Kombinasinya bisa lebih,

56:42bisa combine jauh lebih banyak ya.

56:44- Iya.

56:46- Satu NFT compute itu bisa generate

56:48kira-kira macam variasi tuh.

56:50- Hmm, benar, benar, benar, benar.

56:52- Randomly generated. Kan tadi ada

56:54PET, ada Polygon, ada Polyline.

56:56- Iya, iya, iya.

56:58Nah, ini juga ada yang menarik nih, tentang

57:00JPEG XL. Yang

57:02lagi rame ya, yang lagi rame,

57:04kalau nggak salah,

57:06coba tolong dikonfirmasi,

57:08kalau nggak salah, salah satu browser,

57:10saya lupa brosernya apa, mereka masih

57:12support JPEG XL, dan

57:14performanya lebih bagus daripada

57:16WebP,

57:18kalau nggak salah.

57:20Sebagai informasi tambahan, JPEG XL

57:22ini kan di-remove ya,

57:24jadi tidak didukung oleh

57:26Chromium, Chromium

57:28Family kan, keluarganya Chromium

57:30udah di-drop kan, tadinya

57:32support habis itu udah di-drop kan.

57:34Nah, yang bikin kontroversi adalah browser

57:36non-Chrome, yang

57:38bilang kalau JPEG XL itu lebih bagus

57:40daripada WebP

57:42atau Aviv yang

57:44digadang-gadangkan

57:46jadi format masa depan. Format masa

57:48depan.

57:50Itu ada di

57:52Twitter, kalau nggak

57:54salah, di Twitter.

57:56Itu Gkarsi

57:58Wild juga yang

58:00jemputnya, coba ya, JPEG XL.

58:02Ada mediumnya tuh?

58:04Ada ya?

58:06Mana-mana.

58:08Tapi sebenernya itu

58:10itu masih, itu kayak

58:12interchangeable sama JPEG nggak ya?

58:14Kayak algoritm.

58:16Iya, JPEG versi berikutnya.

58:18Ada kan, ada JPEG yang biasa,

58:20ada JPEG 2000,

58:22ada JPEG XL. Yang tidak

58:24disupport itu hanya JPEG XL, yang JPEG 2000

58:26disupport.

58:28Oh iya benar, Apple.

58:32Apple emang suka beda-beda ya dia.

58:34Suka beda sendiri gitu ya.

58:36Iya, karena dia bikin

58:38engine, dia bikin software buat

58:40hardwarenya sendiri. Jadi ya udah kan

58:42benar-benar suka-suka.

58:44Yang paling optimis untuk

58:46engine-nya dia.

58:48Ini, ada nih.

58:54Ada hasilnya.

58:56Edit support HEAC.

58:58Kan si Apple kan dia supportnya

59:00HEAC kan, karena Apple foto itu

59:02pakai ini kan.

59:04Sama nambahin JPEG XL yang baru,

59:06si Safari yang baru.

59:08Di WWDC kemarin.

59:10Kalau nggak salah

59:16Jake Archibald juga komen dia

59:18kemarin.

59:20Sekarang ini di mana sih?

59:22Dia udah pergi dari Google.

59:24Dia ternak lelih ya sekarang.

59:26Ternak lelih dia.

59:28Avocado Farm.

59:30Mana ya?

59:32Wah nggak ada ya.

59:34Dia sempat komen atau apa gitu?

59:36Pernah lihat.

59:38Tapi nggak di mark saya sekali.

59:40JPEG XL itu format file-nya JXL.

59:48Ini ada detailnya.

59:50Ada hasilnya.

59:52Mungkin kita bahas tentang JPEG XL

59:54aja dulu kali ya. Masalah kontroversinya

59:56nanti belakangan.

59:58Cari sendiri.

1:00:00Kok?

1:00:02Sebentar.

1:00:04Ada nih.

1:00:06JPEG XL dot

1:00:08info.

1:00:10Sebentar.

1:00:12Ya berasa dasar support JPEG

1:00:18XL tulisannya.

1:00:20Mana dia?

1:00:30Oh internetnya mati.

1:00:32Kok bisa?

1:00:34Maaf. Halo, halo. Cek, cek, cek.

1:00:36Bisa, bisa denger kok.

1:00:38Putus-putus?

1:00:40Enggak, lancar.

1:00:42Kok kalian putus-putus suaranya?

1:00:46Enggak tau sejauh ini sih.

1:00:48Ini siapa yang koneksinya ngaco coba?

1:00:52Matiin dulu ya hitiknya ya.

1:00:54Videonya. Kameranya.

1:00:56JPEG XL is next generation

1:00:58general purpose image compression

1:01:00codec by JPEG committee.

1:01:02It was based on Google pick

1:01:04proposal. Loh, dari Google ya.

1:01:06Terus dia abis itu.

1:01:08Loh, kok seru.

1:01:10Nah cuma ini nggak ke screen, Sir.

1:01:16Delay kayaknya.

1:01:18Ayo.

1:01:24Ini nih ada comment.

1:01:26Loh, apa lagi ilang?

1:01:28Iya, ini kayaknya

1:01:30koneksi Mas Riza.

1:01:32Mulai.

1:01:36Udah masuk lagi ya?

1:01:38Muter-muter.

1:01:40Itu SVG nggak tuh loading screen-nya?

1:01:42Spinner-nya SVG.

1:01:44Spinner-nya SVG itu.

1:01:46Halo.

1:01:50Udah.

1:01:52Oke.

1:01:54Coba mesen lagi ya.

1:01:56Ini koneksi.

1:01:58Bukan hanya Ikan.

1:02:00Menular-menular.

1:02:02Menular.

1:02:04It was based on

1:02:06Google pick proposal. Ternyata dari

1:02:08Google ya. Abis itu dia

1:02:10remote code ya.

1:02:12UIF proposal.

1:02:14Ya, proposal kan.

1:02:16Bisa di-retract.

1:02:18Oh, ada mimei-nya

1:02:20sendiri. Media type-nya.

1:02:22Image JXL.

1:02:24Oh, ini

1:02:26JXL.

1:02:28Key features-nya.

1:02:30High fidelity.

1:02:32Lossy.

1:02:34Jadi, beda sama PNG yang lossless ya.

1:02:38Ini cocok

1:02:40buat nampilin foto-foto yang

1:02:42istilahnya yang

1:02:44resolusi tinggi ya.

1:02:46Google pick

1:02:48masih ada nggak sih?

1:02:50Google pick itu apa?

1:02:52Google pick apa? Belum ada.

1:02:54Itu apa?

1:02:56Jaman dulu punya produk.

1:02:58Image format and photo

1:03:00and the internet.

1:03:022022 masih update

1:03:04terakhir, Oktober.

1:03:06Jangan bilang update date me.

1:03:08Dependabot.

1:03:10Enggak, dependabot.

1:03:12Merge pull request.

1:03:14Pull request dari dependabot.

1:03:18Tetep keke.

1:03:22Ya, jadi intinya

1:03:28ada satu format namanya

1:03:30JPEG SL. Ya, itu lanjutannya dari

1:03:32JPEG. Tapi

1:03:34si Google Chrome

1:03:36memutuskan untuk tidak mendukung

1:03:38tidak mendukung support si

1:03:40JPEG SL ini beberapa

1:03:42tahun yang lalu.

1:03:44Ya, sementara

1:03:46Apple malah menambahin

1:03:48di Safari yang

1:03:50versi terbaru.

1:03:52Itu yang bikin kontroversi.

1:03:54Selamat pusing-pusing ya.

1:03:56Jadi banyak

1:03:58banyak ininya ya.

1:04:00Tapi itu terbantu sama tadi tuh. Kita

1:04:02bahas sekilas kan, picture element.

1:04:04Nah, di situ. Picture element

1:04:06comes to the rescue kan. Kita bisa

1:04:08men-specify beberapa

1:04:10format. Kalau misalnya ya mostnya

1:04:12sebetulnya realistically lebih

1:04:14simple kalau tetap pakai yang di support

1:04:16semua aja kan. Tapi misalnya

1:04:18kita beneran

1:04:20udah harus-harus banget

1:04:22pakai JXL itu, ya udah

1:04:24kita bisa pakai picture tadi, picture

1:04:26element, terus bisa specify

1:04:28JXL. Abis itu bawahnya

1:04:30kasih fallback JPEG

1:04:32atau format lain.

1:04:34Benar.

1:04:36What? Mau?

1:04:40Bukan,

1:04:42JXL itu yang untuk codecnya.

1:04:44Jadi kalau misalnya operating

1:04:46systemnya

1:04:48bisa buka

1:04:50JPEG XL enggak?

1:04:52Oh, di private chat, oke.

1:04:56Lib JXL.

1:05:00Ini berarti

1:05:02kita harus ngobrol dulu.

1:05:04Tiga jam yang lalu.

1:05:06Iya.

1:05:08Remove litmy tuh, tapi.

1:05:10Bukan update.

1:05:14Curiga banget ya.

1:05:16Kalau ada update-update gitu, curiga banget.

1:05:18Cuma litmy doang.

1:05:20Tapi sudah standard loh

1:05:22by ISO blablabla.

1:05:24Iya, udah standard.

1:05:26Kan based on proposal. Proposal itu kan ya

1:05:28ya.

1:05:30On the way ya.

1:05:32On the way, tapi bisa aja.

1:05:34Bisa aja Chrome-nya, nggak mau

1:05:36ada.

1:05:38Bukan ini bukan suatu

1:05:40browser, tapi untuk jadi

1:05:42jadi library-nya, codec-nya

1:05:44supaya bisa baca.

1:05:46Jadi kalau misalnya

1:05:50yang kirim file Lib JXL, bisa

1:05:52dibuka gitu. Kita buka di

1:05:54laptop kita masing-masing.

1:05:56Oke, bro. Insert JPEG XL.

1:05:58Nah, ini dia ketemu.

1:06:00Oh, ini belum masuk. Bahkan belum masuk

1:06:02OS ya? Belum.

1:06:04Oh, masih baru banget.

1:06:06Masih baru.

1:06:08Ubuntu 2.3 aja belum nih?

1:06:14Iya.

1:06:16Yang paling populer, salah satu

1:06:18yang paling populer.

1:06:20Nah, ini ketemu nih.

1:06:22Nah, ini dia.

1:06:24Interesting move.

1:06:26JPEG XL outperform Aviv

1:06:28at size larger than ideal for

1:06:30the web. But provided that

1:06:32browsers keep up, keep the

1:06:34implementation safe and up to date, more

1:06:36format is better for developer.

1:06:38Ini dia nggak

1:06:42tweet, ini setelah out dari Google

1:06:44pas masih. Setelah, setelah.

1:06:46Iya, setelah. Ini baru kok. Baru.

1:06:486 Juni. Iya,

1:06:50WWE DC kemarin.

1:06:52Oh ya, setelah itu denounce ya.

1:06:54Itu ada penjelasannya.

1:06:56JPEG XL folks sometimes

1:06:58claim it outperform

1:07:00Aviv at web-optimized

1:07:02size.

1:07:04Ini yang bikin perang nih.

1:07:14Twitter war, Twitter war.

1:07:16Biarin aja mereka perang.

1:07:18Yang penting kita nanti setelah

1:07:20setelah damai ya kita pake lah

1:07:22kalau emang beneran bagus kan.

1:07:24Kalau...

1:07:26Tahun depan mungkin bisa jadi topic

1:07:28IOXN gitu.

1:07:30Iya, siapa tahu

1:07:34kalau Google-nya wait and see

1:07:36juga, kalau emang perspektnya

1:07:38bagus, bisa aja diadopsi.

1:07:40Iya, siapa tahu kalau misalkan safari

1:07:42support, habis itu firefox support,

1:07:44pasti mereka nggak tinggal diem dong.

1:07:46Apa lagi?

1:07:48Sebenernya sekarang kan Chromium

1:07:50udah championing Aviv ya.

1:07:52Nah kalau DXL punya

1:07:54keunggulan dibanding Aviv,

1:07:56yang emang unggulnya jauh banget

1:07:58dan repot port ngejar ya bisa aja kan.

1:08:00Akhirnya ya udahlah.

1:08:02Adopsi aja.

1:08:04Oke.

1:08:06Kita sudah satu jam,

1:08:08ada yang mau dibahas lagi tentang

1:08:10SPG atau

1:08:12komen-komen yang bisa kita highlight?

1:08:14Tuh, SPG adalah

1:08:16format masa depan.

1:08:18Ya kita nggak pernah tahu ya, masa depan.

1:08:24Format masa lalu, masa sekarang,

1:08:26dan masa depan. Asik.

1:08:28SPG tuh evergreen sih.

1:08:30Evergreen.

1:08:32Bahkan, apa?

1:08:34Inter Explorer aja support ya udah aman.

1:08:36Itu sih, mungkin

1:08:38bonus satu resource, jadi

1:08:40aku tuh suka banget sama

1:08:42artikel cara apa, Sarah

1:08:44Sweden membahas SPG.

1:08:46Kalau suka bingung dan pingin

1:08:48ngedelmin, coba deh buka

1:08:50link blog yang atas itu,

1:08:52SPG Basic Concepts.

1:08:54Yang ini ya?

1:08:56Bukan?

1:08:58Iya nggak tahu, belum di-screen ya.

1:09:00Sorry, sorry, sorry. Ini?

1:09:02Bukan? Ini?

1:09:04Nah, jadi si Mbak Sarah

1:09:06Sweden ini punya artikel

1:09:08banyak banget tentang SPG.

1:09:10Bukan satu ini doang sih. Cuma maksudnya

1:09:12itu salah satu yang paling beginner-friendly.

1:09:14Dan penjelasannya kayak jelas

1:09:16banget, contohnya lucu-lucu.

1:09:18Kayaknya dia bikin custom icon

1:09:20sendiri buat sebagai

1:09:22contoh, terus ada contoh kodenya juga.

1:09:24Dan itu banyak.

1:09:26Maksudnya, dia

1:09:28deep dive banget emang, jadi

1:09:30itu baca kalau lagi santai aja sih

1:09:32sebetulnya, kalau lagi buru-buru sih.

1:09:34Itu tadi yang artikel, yang apa?

1:09:36Content Aureli aja yang mau copy paste

1:09:38cepet-cepet. Tapi kalau misalnya

1:09:40bingung, kan SPG itu

1:09:42agak overwhelming ya, suka ada

1:09:44view box lah, ada clipping,

1:09:46ada apa-nya, ada macem-macem

1:09:48konsep yang nggak langsung jelas.

1:09:50Jadi cari aja

1:09:52artikel, semua artikel di

1:09:54blog dia tuh. Ada kayak

1:09:56mungkin, berapa ya di atas?

1:09:58Hampir 10 artikel ada kali tentang SPG.

1:10:00Jadi, kalau

1:10:02ada liat SPG yang bingung, copas

1:10:04aja masukin CGP kita atau Google Bar,

1:10:06minta aja jelasin.

1:10:08Itu juga bisa.

1:10:10Jelasin, jelasin

1:10:12tag-tag itu isinya apa gitu,

1:10:14supaya kita mengerti.

1:10:16Ini website-nya enak banget buat dibaca ya.

1:10:18Dia designer ya,

1:10:20berarti ya?

1:10:22Iya, nggak sih front-end.

1:10:24Oh, front-end.

1:10:26Pemilihan font-nya juga bagus tuh.

1:10:28Iya, pemilihan font, warna, dan lain-lain kayaknya

1:10:30ya, sederhana, hitam putih, cuman

1:10:32kok enak dibaca gitu.

1:10:34Bikin betah gitu.

1:10:38Seru-seru.

1:10:40Kayak ngobrolin web juga kan.

1:10:42Asik.

1:10:44Bikin betah.

1:10:46Bikin betah.

1:10:48Amin, amin, amin.

1:10:50Yang betah kita nggak tahu.

1:10:52Saya nggak tau nggak.

1:10:54Iya, iya, iya, iya.

1:10:58Banyak belajar.

1:11:00Meskipun betah, kita harus tetap

1:11:02ini ya, harus

1:11:04berpisah ya, untuk malam hari ini.

1:11:06Karena kita bisa ketemu

1:11:08lagi minggu depan.

1:11:10Bahasannya tentang apa ya.

1:11:12Tunggu saja, announcement

1:11:14kita di hari Selasa.

1:11:16Oh iya, links laido ya.

1:11:18Kalau yang pengen

1:11:20usul topik, atau malah

1:11:22bikin bintang kamu featuring,

1:11:24bisa di situ.

1:11:26bit.ly/ngobrolinweb

1:11:28Ya, ditunggu saran-sarannya.

1:11:30Tadi ada beberapa saran yang udah

1:11:32kita tulis juga. Terima kasih

1:11:34buat teman-teman semua yang sudah

1:11:36hadir dan sudah meramaikan

1:11:38acara kita malam hari ini.

1:11:40Mudah-mudahan apa yang kita sampaikan

1:11:42bermanfaat dan bisa digunakan untuk

1:11:44pekerjaan sehari-hari ya.

1:11:46Kita ketemu lagi minggu depan.

1:11:48Selamat malam, selamat istirahat.

1:11:50Dadah.

1:11:52Bye.

1:11:54Tunggu, tunggu, dadah terus, dadah terus.

1:11:56Susah ini.

1:11:58Nah.

1:12:04Oke.

1:12:06Nah, minggu depan apa ya?