Ngobrolin Slide - Ngobrolin WEB

1:29Papa Petir. Apa?

1:31Eh, ini ya.

1:33Wipe Driver by Dai ya.

1:35Iya, betul.

1:37Asik loh.

1:39Ternyata setelah ngulik-ngulik Wipe Driver by Dai.

1:42Maksudnya, ngulik-ngulik Brose Automation tuh seru-seru.

1:46Kita belum ada topik ini kan, kecuali sama Giseline kan, maksudnya yang lebih deep dive gitu.

1:52Masalahnya, ya kayak case-case pakai Brose Automation tuh apa aja kan selama ini kan.

1:58Iya, buat testing, kak, buat ini.

2:00Untuk end-to-end testing, tapi kan masih banyak hal-hal lain, kayak scraping, atau ngumpulin data.

2:08Mungkin scraping itu maknanya jelek ya, tapi sebenarnya nggak loh.

2:12Scraping itu artinya ngumpulin data ya.

2:15Karena nggak menyediakan API, mau nggak mau, kita ngumpulin datanya lewat itu salah satunya ya.

2:20Itu juga salah satu, cuma kalau yang saya contohin, saya men-scraping web vital dari situs saya sendiri.

2:32Yang saya contohin, saya demoing.

2:34Jadi, misalnya situs itu tidak menyediakan, tidak kita pakai web vital misalnya, web vital JS.

2:45Terus pakai Brose Automation, saya bisa inject web vital itu.

2:48Saat dia pertama kali load, saya inject web vital.

2:52Nanti saya inject scriptnya bisa ditampilkan di console log, dan yang dari console log bisa saya listen.

3:01Hasilnya saya simpen sebagai data.

3:04Itu bisa juga. Jadi, menjalankan situs kita sendiri, menjalankan web vital, dan kita ngumpulin data kita sendiri dari,

3:13ya anggap aja dari kumpulan koleksi URL-URL yang mau kita analisis dalam satuan waktu tertentu.

3:25Dan dengan adanya Papetir dan Webnever by Dai, sudah bisa device simulation.

3:32Jadi bisa disimulate device mobile juga.

3:36Jadi banyak kegunaannya sekarang, nggak cuma jalanin klik-klik-klik aja.

3:46Oh, jadi kita bisa ngintip web tetangga, terus kita cek performanya gimana.

3:54Terus abis itu kita bisa improve gitu ya.

3:58Sama aja kayak kita pakai Chrome, buka Titus Competitor, jalanin Lighthouse, sama aja kan.

4:09Cuma itu kan satu-satu tuh jalaninnya.

4:14Jadi ini bisa pakai script ya?

4:16Oke, pakai script, kita tinggal jalan kayak otomasi. Ya, lumper mudah hiduplah ceritanya.

4:28Oke, next-nya kemana lagi, next-nya?

4:33Jakarta. Saya di itu sama si Anggi kan, ya mas, ke Jakarta gitu.

4:41Nolak ya pasti ke Jakarta ya?

4:47Iya dong, kan nggak boleh hotel, jadi nolak aja.

4:53Saya udah lama nggak ke Jakarta, udah kayak beberapa kali ya.

4:58Padahal kita akan bangsel ya, mau ke Jakarta kan ribet ya, jadi harus nginep ya.

5:04- 2019 saya ngisi, terakhir Jakarta. - 2019? Kayaknya udah 2018.

5:12Kayaknya nggak sih, baru 2 tahun yang lalu kalau nggak salah.

5:18Waktunya kembali lagi deh sebentar.

5:22Surabaya? Surabaya, Desember ya?

5:28Kita lihat lah situasi.

5:31Oke, kita ikut join GDG mana nih?

5:38Temen-temen yang nonton mungkin dari daerah mana dan mungkin GDG terdekatnya dimana.

5:43Siapa tahu kita bisa ketemu, ngobrol-ngobrol langsung gitu ya.

5:52Mudah-mudahan nanti di Surabaya ada yang ikutan ya.

5:55- Oke, jadi. - Bajunya bagus, dapet dari mana tuh?

6:01Terima kasih.

6:05Malam hari ini kita rencananya akan ngomrolin tentang slide ya, tools atau alat untuk bikin slide.

6:14- Eka mana? - Iya, Eka-nya lagi meeting.

6:19Nanti yang punya ide acaranya nanti akan muncul.

6:23Kita dapet tambahan tools dari Eka ya, dia pakai yang namanya slide.dev kan nanti biar dia yang cerita.

6:35Itu kayaknya menarik sekali ya.

6:38Dan selama ini mungkin kalau saya sih masih sering pakai yang konvensional, yang offline.

6:49- Maksudnya slide ini kan untuk presentasi ya, bukan slider. - Iya, bener-bener.

6:57- Bukan slider web component. - Iya, presentasi.

7:02Karena bingung juga kemarin momen terjemahkan slide itu bahasa Indonesia-nya kayak hampir nggak ada padanan yang familiar di kuping kita.

7:09Jadinya akhirnya pakai kata-kata slide.

7:11Jadi kalau kita mau bikin presentasi, kita mau presentasi kan harus ada tampilannya tuh.

7:17- Powerpoint. - Iya, powerpoint, keynote.

7:22- Google slide. - Iya, Google slide.

7:27Jadi malam ini kita akan coba ngobrolin tentang tools yang bisa bantu kita untuk presentasi.

7:35Tapi tools-nya itu basisnya web.

7:40Kayak Google slide, itu kan bisa diakses di web ya.

7:43Walaupun bisa kita export ke PDF, abis itu jadi offline kan.

7:47Cuman kalau saya pribadi, untuk kebutuhan pribadi untuk penggunaan misalkan talk di Devesmana gitu ya,

7:58atau kemarin di JavaScript Bangkok, saya masih pakai keynote yang offline.

8:04Karena udah biasa, sudah terbiasa, udah nyaman gitu ya, udah tahu seluk beluknya lah gitu ya.

8:11Tapi kalau misalkan di kantor, untuk kebutuhan misalkan untuk workshop, untuk materi kelas,

8:17untuk lain-lain yang ada kebutuhan kolaborasi, itu biasanya pakai Google slide.

8:22Nah ini kelebihan si slide creator online ini ya, tempat alat untuk bikin slide secara online ini,

8:31adalah kelebihan salah satunya adalah itu kolaborasi sama si yang nonton bisa akses juga.

8:41Jadi misalkan pada saat awal gitu ya, awal kita presentasi,

8:45teman-teman bisa buka link ini atau kasih QR code, terus abis itu dibuka di handphone, bisa dilihat slide keberapa gitu.

8:53Tapi yang saya pengen tahu sebenarnya ada nggak sih, udah ada nggak sih alat yang misalkan nih, kita udah buka di handphone.

9:01Ketika si presenter ke slide ke 2 atau ke 3, yang di handphone kita juga ikut ke slide ke 2, slide ke 3, jadi ngikutin gitu.

9:12Jadi streaming aja slide-nya. Jadi slide-nya masuk ke, misalnya slide-nya dimasukin ke video ke YouTube, jadi iya sih penonton.

9:24Ribet lah. Kadang-kadang kan tujuan orang buka slide itu kan bermacam-macam ya,

9:32pengen tahu detailnya, terus mungkin nggak begitu kelihatan misalkan di belakang, oh dia pengen baca, terus mungkin...

9:38Mungkin lebih tepatnya kalau kita dalam kondisi yang kayak di JavaScript Bangkok, ingat nggak?

9:47Jadi di presentasinya di satu ruangan, terus yang di ruangan lain di-broadcast, jadi isinya sama, jadi kayak gitu kali ya.

9:57Cuma mereka pakai OBS deh. Mereka kompilasi dan disatuin dengan si Lihao-nya saat itu, terus di-broadcast ke TV-TV yang di tempat lain.

10:10Iya. Kalau itu kan ribet ya, kalau kita pengguna, istilahnya kita sebagai presenter pribadi gitu kan nggak...

10:19Ya kecuali kalau kita emang udah punya alat-alatnya kan, kita harus siapin alatnya supaya bisa streaming slide kita ke teman-teman yang lain gitu kan.

10:28Tapi kalau misalkan untuk kebutuhan kayak tadi kayaknya belum ya, belum ada ya.

10:35Ada problem nggak sih? Maksudnya ada kebutuhan kesana nggak sih? Kayaknya nggak ada ya, nggak perlu ya.

10:42Justru itu malah distraksi ya. Jadi orang pada ngeliat handphone aja gitu ya? Iya bener-bener.

10:51Yang dibutuhkan justru yang kayak si Henry Lim itu loh yang buat remote slide.

10:59Oh iya remote slide. Itu remote slide untuk Google ya? Google slide ya, coba buka aja. Jadi Henry Lim ini salah satu DJI yang mudah dari Malaysia.

11:13Iya dulu di Malaysia, sekarang dia udah pindah dari Jerman. Jadi ini salah satu tools yang saya pakai saat penyelamat,

11:25si organizer tidak menyediakan clicker. Oh jadi bisa dari handphone? Iya jadi dia pakai Websocket kah ini, saya lupa dia mungkin pakai Websocket ya.

11:36Jadi saya tinggal install extension di browser saya, nanti di handphone buka slide Henry Lim ini, nanti kasih kode buat bisa connect.

12:02Kode ini sebenarnya room number ya, room numbernya di situ supaya jadi Websocket.

12:08Nah kalau sudah connect nih, saya tinggal nextnya itu hanya dari handphone. Penyelamat saat nggak ada clicker.

12:23Jadi pengganti handphone ya? Pengganti clicker. Oh iya, pengganti clicker pakai handphone.

12:33Tapi sebenarnya kalau udah di ekosistem Apple dan menggunakan keynote itu sudah ada, udah built in. Di Apple itu udah ada keynote kan, keynote remote gitu.

12:44Ada ya? Ada, jadi nggak perlu install, nggak perlu apa, udah ada. Dan menariknya juga bisa lihat notes-nya.

12:53Kalau kita tulis notes di presentasi kita misalkan contohkan gitu ya, di handphone itu kelihatan.

12:58Kalau ekosistem Apple ya handphone-nya harus. Keynote juga bisa kolaborasi tau nggak sih?

13:06Bisa, bisa. Tapi semua harus keynote kan? Iya, ya masih ya sama aja di Google slide juga.

13:14Ya sih. Ya sih ini sebenarnya harus pakai Google slide kan, nggak bisa pakai PPT.

13:18Betul. Cuman kan kalau Google slide itu lebih approachable dalam artian semua orang punya akun Google kan?

13:24Ya depends mas, ya di environment apa. Kalau misalnya kayak, kayak abang saya kan dosen di universitas swasta dan mereka udah kayak pakai Microsoft core akademi kan.

13:41Ekosistem ya. Jadi semuanya sudah pakai PPTX gitu kan. Jadi kalau misalnya mau kolaborasi dengan mahasiswa, PPTX-nya itu dan submission-nya segala macam udah. Sebenarnya bisa juga.

13:54Kolaborasi PPTX itu bisa kolaborasi juga. Iya, iya betul. Cuman kalau yang paling apa ya, yang paling umum sih Google slide ya untuk kolaborasi ya, paling umum ya.

14:05Karena kan kita asumsi hampir, hampir sebuah orang punya akun Google, walaupun dia belum pernah buka Google drive atau Google slide sama sekali dia bisa kan.

14:15Tinggal di klik, udah login, tinggal join. Dan itu lah istimewanya. Iya. Itu lah istimewanya browser.

14:23Bukan, kelihatan web application. Oh browser, iya. Tapi kan kalau di Microsoft juga ada Microsoft yang web kan, 365 ya. Apa sih? Office 360.

14:37Oh, 360. 360. Iya, 360 apa 365 ya. Itu bisa buat kolaborasi juga kan. Ya itu lah. Bisa, bisa. Bisa. Ya itu kan baru-baru. Cuma awal-awalnya kan dari si Google ya.

14:53Kalau untuk yang Google slide itu web application ya awalnya si Google slide. Betul, betul.

14:59Nah beda kan kalau keynote kan, walaupun pengguna Apple belum tentu dia menggunakan keynote, bahkan belum tentu download keynote kan. Kayaknya udah otomatis ya, nggak tau ya.

15:08Pokoknya belum tentu menggunakan keynote. Udah otomatis sih, main OS, by default sudah ada keynote. Udah ada kan ya.

15:13Udah ada. Yes. 365 tuh bener kan. Setahun 365. Jangan korupsi 5 hari. Gak pernah pakai, gak punya ini soalnya.

15:235 harinya cuti soalnya. 5 harinya cuti. Apakah ada alternatif lain selain Google slide? Nah ini yang mau kita overhaul nih.

15:32Ini lah yang mau kita overhaul nih. Terima kasih ya segway-nya luar biasa MiawLiet yang recommended.

15:39Nah mungkin saya cerita dulu ya pengalaman saya pribadi. Jadi awalnya pakai PowerPoint lah, PowerPoint. Karena dulu sering berkecimpung di Linux ya pakai yang open office, versi open office namanya apa saya nggak tau ya.

15:56- Sekarang LibreOffice. - Iya sekarang LibreOffice. Terus abis itu berkenalan lah dengan Apple Ecosystem. Gara-gara dulu waktu lagi kuliah tugas akhir,

16:10pas mau tugas akhir, baca buku presentasi ala Steve Jobs. Jadi termakan marketingnya Steve Jobs, karena Steve Jobs itu kan dia memang bener-bener keynote itu dibangun untuk dia.

16:23Gaya-nya dia semua gitu. Jadi akhirnya belilah sendiri itu Macbook, Macbook yang putih zaman dulu, dan pakai keynote.

16:36Abis itu presentasi di depan dosen pada saat sidang, dan berhasil membuat dosennya tidur. Mungkin boring gitu ya.

16:47Dan dosen yang tidur itu yang paling banyak nanya secara ajaib ya, luar biasa. Karena mungkin dia udah baca. Jadi dia nggak peduli dengan presentasi saya,

16:56dan dia sudah punya pertanyaan banyak. Nah dari situ akhirnya nggak lepas kalau mau bikin presentasi biasanya untuk keperluan pribadi biasanya ke keynote, sampai sekarang.

17:10Nah ini Anara Sumbernya baru datang, selamat datang. - Halo maaf telat lagi, macul over time. Karena mau dia presentasi besok.

17:22- Yes. - Nah pakai apa nih presentasinya?

17:26- Ntar dulu, ntar dulu. Belum selesai. - Bukan gue sih yang presentasi untungnya.

17:30Ya, jadi setelah sekian lama masih tetap pakai keynote. Salah satu alasannya biasanya kalau di pro-nya ya kelebihan menggunakan yang nggak mesti keynote nih.

17:43Four point juga boleh. Pokoknya yang sifatnya offline. Salah satu kelebihannya adalah kalau di venue, di lokasi itu koneksinya kurang bagus,

17:54atau ada koneksi putus-putus, aman, nggak ada masalah. Kalau misalkan diharuskan, atau karena satu dan lain-lain hal,

18:04saya harus pakai yang versi online seperti google slide, biasanya saya download versi pdf-nya. Cuma kekurangannya adalah nggak ada animasi dan lain-lain.

18:13Kalau keynote, wah luar biasa animasi, mantap. - Kalau nggak pakai laptop sendiri, dan pakai phone yang aneh-aneh, belum tentu di phone tetangga ada.

18:23- Ya, kalau itu harus ekspor ke pdf juga. Jadi dari keynote juga bisa di ekspor ke pdf. Terus habis itu sempat nyoba beberapa tools yang pertama kali,

18:37seingat saya yang pertama kali apa ya, pioneer atau yang memulai slide versi online itu ada yang namanya revial.js. Ada yang tahu nggak?

18:47- Tahu, tahu, tahu. - Tahu ya, revial.js itu kayaknya awal-awal.

18:53- Yang bikin Ken Miller bukan sih? - Yang bikin, saya kurang tahu yang bikin siapa.

19:01- Tapi revial.js kan bisa. - Hakim L. Hatap. - Saya pernah pakai revial.js. - Dulu banget.

19:17- Loh, yang atasnya nggak bisa di zoom. Bawah doang. Ya, jadi revial.js ini library sebenarnya. Terus kita download, kita taruh di satu folder,

19:30terus foldernya kita jalanin pakai web server, pakai live server atau apa sekarang, itu mungkin pakai VT ya, nggak tahu lah, pokoknya itulah.

19:42Terus file mark down-nya nanti akan dibaca sebagai presentasi. Jadi kita ada tombol gini, kita bisa next, next bisa ke bawah juga.

19:55- Tidak bisa ke bawah, itu yang asiknya. - Terus bisa next lagi untuk topik berikutnya dan seterusnya.

20:03Nah ini setau saya ada versi komersialnya yaitu slides.com. Kita bisa bikin, nggak perlu pakai localhost, nggak perlu develop, nggak perlu ngetik di kode,

20:16itu ada editor-nya dan berbayar. Ada pressing-nya nih. Nah 5 dolar per bulan. Jadi kita bisa langsung desain di situ, di sini.

20:32Kalau udah login, desain kayak Canva gitu. Dan Canva juga ada kan, sekarang slides kan untuk bikin slides ada Canva.

20:41Saya juga pernah coba. Tapi balik lagi, kalau untuk pribadi tetap keynote, tapi kalau untuk perjalanan Google Slides.

20:49Itu sih kalau cerita singkat penggunaan alat-alat presentasi. Kalau Ivan gimana Ivan?

21:00- Saya selama ini hanya pakai Google Slides. - Google Slides ya? - Iya, saya cuma pakai, jangan dulu sih PPTX, PPT, PPTX, Google Slides, keynote.

21:16- Gak pernah. - Lu, dan Reveal.js pernah pakai tapi uyang sendiri cara pakai-nya. - Iya, dia harus ada kelas name apa, kelas name apa gitu ya.

21:30- Susah banget dan terakhir sudah lah. Habis waktu hanya untuk memperbaikinya dan kembali lagi ke Google Slides.

21:41Susah hanya karena Google Slides ini, misalnya waktu udah kerja pun ya, dan dari company sudah ngasih template.

21:53Jadi karena omongannya membawa bandera company, brandingnya sudah harus ikut. Jadi gak mungkin saya pakai ke Reveal.js.

22:05Karena gak dikasih template di Reveal.js. - Iya, betul. Jadi yang umum ya Google Slides lah ya.

22:13Tapi untuk DevFace atau I/O Extended juga kita dikasih kan sebenarnya template-nya kan ya. Nah biasanya itu saya export ke keynote.

22:23Bosen sih pengen. Makanya kenapa topik ini lahir, saat saya bincang-bincang dengan Eka, bosen ya pakai Google Slides mulu.

22:35Sesuatu javascript ada gak sih? Terus Eka bilang, ada tuh Slide Dev. Yaudah kita bahas di podcast.

22:42Biasanya kalau dari template ya, kalau untuk acara-acara yang Google atau yang berhubungan dengan GDE, itu biasanya saya convert.

22:54Di download dulu template-nya, dibuka di keynote, abis itu di edit aja dikit, tetap pakainya keynote untuk sekarang.

23:02Kecuali kalau udah mepet banget ya, tinggal pakai ya udah.

23:06Kalau untuk kerjaan, balik lagi Google Slides. Karena itu tadi template yang disediakan kantor ya Google Slides.

23:15Kalau tadi ada pertanyaan alternatif selain Google Slides, salah satu yang direkomendasikan sama Eka adalah Slidev.

23:24- Slidev ini. - Gue lagi yang dibawa. Apa, sudah ditanya lu pakai apa? Slidev. - Oh iya, Eka ya. Iya, boleh, silahkan.

23:37- Powerpoint dulu. - Dulu.

23:40Dan belum jadi programmer, dulu pakai ya karena bawaan ya laptop. Microsoft Office ada Powerpoint ganti Mac. Kayaknya Mac, mungkin kayaknya bajakan juga sih ada keynote.

23:56Ya, misalnya yang bawaan ya yang enak. Abis itu, ya lama-lama Google Slides. Kalau di tempat kerja sekarang karena pakai Google Workspace, ya pakai Slides biar standar.

24:10Jadi sampai sekarang sebetulnya ya kalau misalnya cuma presentasi simple, masih pakai Google Slides juga sih.

24:19Cuma, nggak tahu kenapa, gue paling nggak suka, ya bisa, cuma kayak nggak nyaman aja pakai Wiswick editor yang kayak gitu.

24:29Kayak, aduh, nggak enak, kak. Kayak geser kotak, biar kotaknya separuh. Itu tuh kayak butuh tenaga mental yang besar buat ngedrag sampai setengah itu dimana.

24:40Terus kayak cuma buat rata tengah aja. Terus kayak kalau Google Slides itu kan otomatis suka random, ada yang apa sih, setting ukuran font size-nya tuh bisa melar-melar sendiri gitu loh.

24:53Tergantung itunya ukurannya. Biasanya kan udah dapet template ya. Entah kita ngisi acara atau dari tempat kerja atau apapun.

25:01Nah, giliran kita paste pakai konten kita sendiri kayak acak-acakan, terus ah, pokoknya kalau buat orang yang nggak ada OCD tuh kayaknya Wiswick yang kayak gitu nggak enak ya.

25:12Cuma, ya kalau for practical purposes ya udahlah ya, pasain itu satu. Terus dua, pernah nyoba juga kan, Pak, biar estetik.

25:22Karena lihat orang-orang kayaknya kalau yang presentasinya di Canva itu template. Template-nya tuh macam-macam kan, bisa sesuai branding atau ada yang kayak professional.

25:33Wah, hilang. Eka. Halo Eka. Eka-nya Heng.

25:40Iya, Kanva, saya pernah coba juga Kanva. Cuma serunya Kanva adalah biasanya di awal-awal tuh, karena template-nya tuh banyak banget pilihannya.

25:51Ya, banget. Tapi jadi lama juga sih milih punya cari yang misalnya punya minimalis, Swiss design, monochrome, cari banyak.

26:00Nah, itu lumayan. Tapi ya lagi-lagi masalahnya sama kayak yang tadi, kayak apa ya, kerja jadi lambat.

26:07Terutama kalau misalnya kita punya yang banyak atau rumit, kayak kita masih lagi berusaha figure out juga gimana cara yang asik buat nyampein ini.

26:18Kayak contoh kodenya gimana, highlight-nya gimana. Apalagi kalau misalnya kita matering-nya banyak atau rumit.

26:28Itu Wiswik Editor itu sangat perlambat sih. Masuklah eksplorasi macam-macam aplikasi web atau apa?

26:38Aplikasi JavaScript, web app atau website JavaScript yang bisa buat bikin slides.

26:47Pertama, dulu pakenya bukan slide dev, tapi MDX deck.

26:52- MDX deck. - Apa ya namanya?

26:55- Iya, sama. - Jadi map-down yang ini ya?

27:00Nanti-nanti share dulu. Share screen dulu. Yang ini.

27:06Yang bikin itu dulu orangkongnya dulu banget pas zaman Gatsby, pas Gatsby ngetrend, itu kayaknya dia terjadi Gatsby deh.

27:12Dan sense of, salah satu dari sedikit web dev developer yang sense of desainnya, wow.

27:21- Bagus. Wah, udah kena HTTPS-nya belum dibeli sertifikasinya. - Enggak Pak, kita yang kasih.

27:29- Belum dapat sertifikat. - Kapan terakhir ini?

27:34- Enggak tahu, enggak tahu. - Tiga tahun yang lalu.

27:37Tiga tahun lalu, tapi itu kayaknya enggak hype-nya ya sekitar 4 tahun yang lalu tuh.

27:43Jadi ya ini pertama kali ketemu kenalan sama tools yang seperti ini.

27:49Dan pas lihat ini tuh kayak blow away banget ya.

27:52- Wow. - Wow, bisa pakai Vim.

27:57- Ya pakai apapun, mau pakai IDE. - Kode editor kesukaan kita kan.

28:04- Tapi Vim juga ada loh, presentasi ininya. - Oh ada presentasi, apa namanya?

28:09Ada, ada. Apa ya namanya ya? Cuman enggak pernah pakai sih.

28:13Vim presentation. Slide ya.

28:20Oke lanjut dulu, lanjut dulu, nanti cari dulu.

28:23Itu tadi bukan cuma markdown tapi karena MDX kalau buat yang belum tahu mungkin MDX itu sebenarnya kayak markdown

28:35tapi bisa markdown sebetulnya JSX. Markdown in JSX atau JSX in markdown ya antara itu deh.

28:43Pokoknya kalau untuk text-nya, syntax-nya adalah seperti markdown.

28:48Tapi kita bisa mengimport dan menggunakan komponen.

28:53- Jadi wow, seneng banget. - Jadi bisa moding slide ya.

28:58Dan maksudnya kayak ngegeser, bikin kotak 2 kolom setengah-setengah itu enak banget.

29:04Ngetikkan cepetnya, nggak usah aduh berak ke atas.

29:08Pokoknya cuma buat biar lay off gitu, nggak perlu repot-repot pakai Wispic editor.

29:15Tinggal diketik dengan syntax yang kita udah familiar karena itu pakai Ria.

29:21Ya, kalau buat Eka, motong-motong oh harus box begini di atas, kiri-bawah, kanan itu lebih gampang pakai CSS.

29:29Kalau saya yang skill issue CSS lebih gampang pakai YCWIC.

29:34Itu kan Ria, nggak usah menggunakan CSS juga nggak apa-apa tuh.

29:38- Ya, saya sama dengan 50%. - Iya sih.

29:45Kenapa kita perlu pakai yang versi JS, compared to slides?

29:55Kenapa kita perlu pakai yang versi JS, compared to slides?

30:00Versi yang ini dibandingkan dengan Google Slides atau Canva.

30:09Apa tadi, versi yang kayak Google Slides dan Canva versus ini?

30:17Versus JavaScript Base.

30:22Kalau buat gue yang lebih suka ini, pertama, velocity, lebih cepat. Terutama kalau pengen nyoba.

30:32Kalau kita belum, mungkin kalau orang yang udah terbiasa bikin presentasi,

30:36udah punya kayak kalimatnya tuh harus kalimat pendek, singkat, atau mungkin contohnya udah kebayang.

30:44Kalau buat yang nggak terlalu haklia atau instinktif, itu kan udah nyoba nih.

30:52Kalau misalnya statement-nya begini, misalnya punya bullet point 3 atau 4,

30:55itu panjangan atau nggak, kayak buat nyoba-nyoba berbagai penyampaian konten,

31:02pengen feedback yang cepat, jadi kayak cepat aja.

31:06Itu pertama, kecepatan. Terus kedua, itu tadi kemudahan nge-layout.

31:12Misalnya mau nge-chilling besar-input, ya udah, itu kan bisa pake component atau CSS dan JS.

31:21Ganti aja 15, 14, tinggal diketik, nggak usah nge-click text yang mau diganti.

31:28Terus harus cari tools buat drop-down font atau size atau apa.

31:35Itu nge-layout-nya lebih cepat buat.

31:38Yang ketiga, kopas-kopasnya lebih gampang sih, karena itu kan kopas text biasa ya.

31:43Daripada kalau kita mau nge-select beberapa elemen, harus pake mausa,

31:49harus me-hold down comment atau apapun itu wishlist yang lebih sulit aja, lebih ribet.

31:57Sama keempat, portability.

31:59Lebih gampang kan backup-nya tinggal di-push the repo private.

32:04Misalnya amit-amit laptop kita meledak, ya udah, tinggal pake laptop orang lain, tinggal di-pull.

32:10Sebenarnya kalau dipikir-pikir, Google Flight juga bisa ya.

32:14Cuma nggak tahu, rasanya kayak lebih simple aja.

32:18Ada salah satu alasan yang tambahan dari Eka bilang.

32:23Oh ya, offline juga bisa kan.

32:25Kita sebagai web dev itu keren banget, misalnya kalau misalnya mau presentasi sesuatu yang demo-in.

32:34Ingat nggak kalau kayak ini mungkin kayak Houdini, ingat nggak waktu Chrome Dev Summit 2019?

32:45Ini mungkin share aja kali ya.

32:48Share, share.

32:52Atau gimana eraknya?

32:56Gua share apa, mas?

32:58Share.

32:59Share aja, share aja, share aja.

33:00Ya, coba aja tes dulu, bisa nggak?

33:04Share screen.

33:06Allow for one month entire screen.

33:17Oke, ya, ini salah satu casenya ya.

33:23Nah, gua gedein kali ya, entah.

33:27Ini kan, ya ini Chrome Dev Summit 2019 nih.

33:33Jadi Dasurma ini lagi apa namanya, ngedemo-in Houdini contohnya.

33:41Jadi kalau dia misalnya pakai Google Slides segala macam, itu nggak bisa, ya kayak harus bolak-balik,

33:52mau kodanya didemo-in sama hasilnya didemo-in.

33:57Nah, sedangkan kalau misalnya kalau dia pakai yang full code begini, semuanya kan di browser.

34:06Dia tunjukin kodanya di atas, mungkin komponen yang dia demo-in langsung di bawah.

34:12Contohnya ya seperti Houdini yang dia lagi tampilin di atas sini.

34:16Dan ingat nggak waktu salah satu presentasinya, brosernya crash.

34:24Bukan brosernya, laptopnya hang.

34:28Laptopnya crash ya, laptopnya crash.

34:30Gak bisa dia apa-apain.

34:32Ini satu-satunya, kalian kayak gini ini bukan video loh.

34:37Ini beneran diaksekusi di browser saat JavaScriptnya dijalankan.

34:45Dan ini yang sesuatu yang kita nggak bisa, apa namanya, oh ini dia kayaknya ya.

34:53Ini dia, moment lucunya ini.

34:58Cuma berarti malah penontonnya gitu, itu real.

35:04Tapi abis itu mereka ngedebug bareng sama si Surma sama si Jake berdua.

35:11Tapi kalau jaman itu kan belum ada webcontainer ya jaman itu.

35:20Nah sekarang, tapi embed susah juga kan di slide kan embed itu, bahkan embed untuk video aja

35:30- serasa kurang bagus sebenarnya. - Kurang bagus.

35:35YouTube nya harus bisa autoplay atau harus diklik dulu gitu kan.

35:40Sedangkan kalau pakai yang JavaScript-based ini, dia sudah kayak seamless.

35:48Kita mau ngalir aja gitu ya.

35:51Dan tolnya kita itu bisa ngalir dan langsung kita tunjukin demo-demo yang kita mau tunjukin.

35:58- Betul. - Kalau untuk yang full CSS atau full JavaScript.

36:06Jadi demo-demonya itu bisa langsung di browser.

36:10Ya kalau demo kode, kode nya bisa di eksekusi langsung di slide nya kalau menggunakan tools-tools seperti ini.

36:18Karena kan dia kan komponen react kan.

36:22Bahkan bisa embed code sandbox, bisa se-extreme itu gitu.

36:31Kalau Google site kan nggak sembarangan, bisa embed tapi nggak bisa embed sembarangan.

36:35Kalau video, ya videonya terbatas harus di YouTube.

36:40Dan YouTube nya juga harus buffering dulu kalau mau koneksi internetnya kurang lancar gitu kan.

36:46Jadi memang salah satu kelebihan nya di browser adalah kalau kita mendemokan kode

36:52yang berhubungan dengan HTML, CSS, JavaScript yang bisa di eksekusi di browser,

36:56itu kayaknya salah satu use case yang bagus.

37:00Kalau untuk video sebenarnya kalau tools kayak PowerPoint atau Keynote malah lebih bagus untuk nampilin.

37:07Karena dia offline kan. Jadi memang lebih lancar lah.

37:12Cuman kalau untuk demo seperti ini ya memang kayaknya lebih cocok dibandingkan kalau kita menggunakan tools yang lain,

37:20yang offline, kita harus keluar dulu dari presentasi, terus buka editor atau terminal, jalanin kode.

37:29Bolak-balik sih sebenarnya.

37:33Nggak asik ya. Jadi kayak kurang smooth ya experience-nya gitu.

37:39Tapi jujur nggak sih, apa sejauh ini walaupun udah pakai MDX Deck atau Slide Dev,

37:46belum pernah dapet kesempatan manfaatin yang sampai segitu yang beneran di-execute langsung sih.

37:56Tapi kalau buat saya se-simple kayak langsung nunjukin ini kalau yang pakai style ini bentuknya begini,

38:03kalau pakai style itu bentuknya begini, pernah.

38:06Cuma kalau yang sampai ngerender, nge-execute langsung, belum pernah.

38:11Tapi kalau video itu emang kerasa banget sih kalau pakai Google Slides itu kan yang kayak formatnya harus...

38:18Nggak smooth kalau pakai video. Bahkan jadi kayak videonya kan lebih kayak kepotong.

38:24Terus pakai player-nya, kayak player YouTube kan, nggak bisa auto-play.

38:29Padahal cuma nunjukin hal simple kalau ke-slide ya.

38:32Kalau MDX Deck atau ATML Tech video bisa.

38:37Iya, betul.

38:40Render ATML aja.

38:42Makanya pengen belajar pakai yang JavaScript kayaknya bisa lebih enak.

38:47Bahkan gua kan kepikiran pakai webcontainer nih, sudah bisa webcontainer kan.

38:52Sebenarnya asik ya kalau mau demo-demoin web API yang langsung kita bisa langsung kasih webcontainer.

39:04Jadi seamless aja nggak usah bolak-balik.

39:06Matiin Google Slides, pindah lagi ke editor, execute node-nya, pindah ke tab lagi.

39:18Kayaknya kurang enak gitu. Bukan untuk saya.

39:22Makanya itu yang belajar SlideDev.

39:24Iya, betul.

39:27Tergantung web API yang apa sih, mungkin ada yang pakai SlideDev.

39:37Kalau SlideDev atau MDX Deck itu kan karena masih...

39:41Sebenarnya itu web app ya, kalau MDX Deck pakai React.

39:46Kalau SlideDev pakai Vue.

39:48Tapi kalau misalnya mau pure demo-in dan lihat proses jalannya web API gitu,

39:58ya pakai webcontainer-based IDE kayak StackBlitz atau CodeSandbox, mungkin lebih cocok kali ya.

40:06Iya, maksudnya webcontainer kan bisa di-embed di slide-nya kita kan, karena itu sebenarnya di-execusi.

40:13Ya kan? Mesti sebenarnya lebih asik kalau mau dari pada pindah-pindah.

40:19Embed StackBlitz, emang kalau Google Slides nggak bisa embed ya?

40:23Karena belum pernah coba.

40:25Nggak bisa embed sembarangan.

40:27Dia cuma nonton video sama video aja.

40:31Embed sama video aja.

40:33Iya, paling itu.

40:35Ada benarnya, tapi belum pernah coba kan.

40:39Nggak tahu sesmooth apa atau lag atau gimana kan, kita nggak tahu ya.

40:43Cuman kalau untuk, yang kepikiran adalah use case-nya adalah

40:47kalau untuk demo kecil misalkan, kode snippet, kode snippet-nya di-play atau di-jalankan,

40:53itu mungkin masih makes sense.

40:54Tapi kalau satu project, full satu project, belum pernah.

40:59Jadi nggak berani bilang kalau itu bakal lebih smooth atau lebih bagus.

41:04Karena belum pernah misalkan kita embed benar-benar...

41:07Terus jalanin lokal host dan lain-lain.

41:13Apakah akan smooth, apalagi kan itu butuh koneksi internet juga dong, gitu kan.

41:20Untuk jalanin lokal host di sana kan kita, abis itu kita harus konek ke

41:26misalkan stacklist.app something-something gitu kan.

41:30Nah itu kan butuh koneksi internet juga kan.

41:32Nggak ada Docker-nya ya?

41:34Kan webcontainer.

41:37Iya, maksudnya nggak ada versi lokalnya, nggak nih?

41:41Siapa sih stacklist-nya?

41:43Stacklist-nya nggak ada, nggak ada, nggak ada.

41:46Jadi tetap harus butuh koneksi internet yang cukup stabil supaya

41:51ketika kita tulis perintah atau kita jalankan sesuatu, dia tetap bisa, apa namanya?

41:57Tetap bisa responsif lah, gitu kira-kira.

42:01Nah ini juga ada salah satu, ini kan tadi kita baru bahas tentang MDX Deck.

42:08Ada ini dari Damar juga, saya juga baru lihat nih namanya AI presenter.

42:13Ini juga markdown base, tapi bukan berbasis JavaScript, bukan di lokal host,

42:20tapi dia adalah aplikasi.

42:21Cuman dia, apa namanya, tools-nya menggunakan markdown.

42:27Jadi mirip ya, cuman nggak pakai lokal host, benar-benar-benar menarik.

42:34Cuman ya berbayar ya, cuman tidak gratis.

42:38Ya karena itu buat public, buat musuhnya general public kan, audience-nya.

42:43Kok bisa dia dulu?

42:45Kok ini?

42:48Nah yang kayak gini nih dia tampilannya.

42:51Nah kan dia juga yang jual kemudahan ya, nggak harus ngeklik ya, set sana geser kiri, udah ketik aja.

42:57Sebenarnya selling point-nya mirip kayak tadi.

43:00Iya, jadi kita cukup nulis markdown, terus ya mungkin tambahin image atau apa gitu ya.

43:08Udah, habis itu tinggal play, karena tools-nya ya cuman itu doang, jadi based on text ya.

43:14Text based gitu, bukan yang drag and drop dan lain-lain gitu.

43:22Ini juga cukup menarik ya.

43:26Kalau sleedev sendiri juga modelnya juga kayak gitu, kayak kita bikin web lah ya, jadi jatuhnya ya.

43:34Kayak kita bikin markdown, kalau kita nggak mau berurusan sama komponen, nggak apa-apa, udah ketik markdown.

43:46Github pages, atau apa itu yang static site yang di github?

43:53Static site generator ssg, semacam-macam, bebas kan.

43:58Ada apa namanya, informator-nya, kemudian ada judulnya, isinya.

44:04Kalau butuh image, kayak gimana pakai, oh pakai itu aja ya, image biasa ya.

44:08Kalau mau background, image-nya sebagai background itu gimana?

44:11Nggak, jadi apa, kalau punya syntax markdown apapun, itu diterima di situ.

44:17Jadi kalau buat image di dalam gambar, ya bisa pakai HTML text, IMG bisa pakai markdown

44:25square bracket sama apa, anda kurung juga bisa.

44:29Cuma sleedev itu punya beberapa template sendiri.

44:35Coba itu aja buka di dokumentasinya.

44:38Atau buka dimananya ya? Oh, atau itu aja tuh, welcome to sleedev ya.

44:43Apanya ini apakah background masukin dari front matter?

44:49Oh, oke, bisa. Masukinnya dari front matter.

44:58New docs, aneh ya, kok bahkan nggak inget bagian-bagian dari docs-nya.

45:05Sebenarnya yang apa, balik ke home-nya tuh demo-nya lumayan sih, lumayan jelas.

45:14Oh, yang menarik lagi, by default, waktu kita initiate sleedev project,

45:24nah itu tadi front matter background tuh, background titik 2, image-nya.

45:32Baru kelihatan, iya.

45:34Nah, dia by default udah provided style visual yang cukup estetik,

45:40ya itu tuh kayak gitu tuh, kayak di demo, cukup estetik tapi minimalis, nggak terlalu macem-macem.

45:45Jadi, unless kita pengen edit, misalnya kalau konteksnya slide gue biasanya buat Devest

45:53atau buat IO Extended, kan ada brand guide-nya sendiri ya.

45:56Ada spawn-nya, warnanya, terus grafiknya, ya itu disesuaikan boleh.

46:01Tapi kalau misalnya kita bergurudan atau nggak mau, ya udah, pakai itu beneran nggak usah mikir

46:06estetika visual apapun udah provided yang cukup proper by default.

46:12Kayak selo slide-nya beneran, dibayarnya nggak, laurang slide-nya juga.

46:17Kalau misalkan, oke, misalkan, saya mau custom nih, ini kayaknya kurang gede,

46:22mau sampai segini misalkan, 75%, itu gimana caranya?

46:25Ada, pakai CSS, silahkan menulis CSS.

46:30Eh, ada di mana?

46:31Kalau misalnya pengen pakai themes, jadi ini kan ada theme default,

46:39pengen pakai theme lain yang ready-made juga bisa.

46:42Adanya di theme and add-ons yang tadi tuh.

46:45Bisa pakai theme buatan orang, dan itu macem-macem.

46:53Themes Gallery coba tunggu, Pak.

46:55Meanwhile, gue sambil nyari CSS-nya mana nih.

47:00Oke, community themes, oke, ada di NPM lagi ya.

47:18Nah, itu, bahkan kita mau bikin theme kita sendiri, misalnya kita punya personal guide ya,

47:29personal style guide, kayak si Mas Anfu sendiri,

47:32dia tuh kan bikin slide-dev ini karena buat dia sendiri kan,

47:36jadi kelihatannya dia punya template pribadi juga,

47:39jadi tiap dia butuh bikin slide baru, ya dia pakai theme-nya dia.

47:43Hmm, oh, Damar nih pemakaian slide-dev juga nih kayaknya.

47:48Slide-dev CLE Global sungguh konfinien, tapi nggak tahu kenapa nggak direkomendasikan.

47:53Maksudnya apa? Yang ini ya, yang CLI ini ya, built-in CLI ini ya?

47:57Ada comment-comment.

47:59Ada segala lainnya, terus kita bisa NPM run, remote.

48:05Terus apa lagi? Oh, buat jadi server-nya gitu ya.

48:11Iya, kan kalau kita lagi build dia jalanin server-nya.

48:15Iya, iya, iya, iya.

48:17Itu dibalik layar mah fit sebetulnya.

48:19Coba ke syntax guide, syntax guide yang di guide di sebelah kiri,

48:24mungkin ada yang kan title, terus kemudian...

48:28Sintax highlighting-nya juga pakai punyanya dia kan, yang apa tuh?

48:33Si Anfu.

48:35Ada built-in, iya, server Anfu Universe.

48:40Anfu Universe. Apa sih namanya?

48:44Ya, itu ada punya.

48:47Bisa pakai VS Code lagi.

48:49Siki.

48:54Siki, betul. Nah, itu yang salah satu keunggulan Slide Dev,

48:58buat code, nunjukin kode itu.

49:01Oh iya, ada runner-nya.

49:03Segala macam mau code highlighting, mau apa sih,

49:07mau yang munculin line-by-line gitu loh.

49:09Misalnya kita pengen nunjukin step-by-step.

49:11Pertama kita gini, habis itu selanjutnya ini,

49:15itu user friendly banget, DX-nya bagus banget,

49:20kalau buat nunjukin demo-in kode.

49:24Tuh, macam-macam lah opsi-opsinya.

49:27Nah, terus tadi masih lanjutan soal CSS, buka di private chat tuh, link-nya.

49:34Oke.

49:37Kalian, Mas Deja kan pengen belajar CSS dulu.

49:41Atas, ya itu intinya, file, kalau buat global nih,

49:49file CSS biasa, silahkan menulis CSS.

49:54Oh, buat di-overwrite gitu ya?

49:56Iya.

49:59Nah, terus bisa import dan, tapi ini diproses,

50:02jangan sedih diproses pakai UNO CSS atau Post CSS.

50:06Oke, produknya dia juga, universe-nya ya.

50:11Oh ya, Anfu universe, bisa nestling.

50:14Itu luar biasa.

50:16Itu kalau buat yang global,

50:20kalau buat yang per-slide, itu bisa pakai style-tech biasa,

50:24nanti otomatis di-scope, asik kan?

50:27Seru ya?

50:30Anfu itu ngapain sih dia?

50:32Dia tiap hari cuma kayak bikin project open source 1,

50:35project open source 2, gitu ya.

50:37Mungkin itu hidupnya dari GitHub sponsor, Pak, nggak tahu.

50:42Atau jangan-jangan dia punya kerjaan.

50:45Maksudnya, dia full-time community maker atau sampingan ya?

50:51Nggak tahu.

50:54Nggak tahu.

50:56Kalau kenal, boleh diundang.

50:59Ya, kerjanya di Nux Lab, katanya.

51:05Oh iya, waktu itu kan kita pernah bahas ya.

51:07Dia bikin produk kan.

51:09Nux itu kan kerjaan open source dia.

51:12Terus dia bikin perusahaan atau bikin produk lah ya, Nux Lab ini ya.

51:17Jadi buat monetisasi Nux JS-nya ya.

51:24Atau Nux Lab ini adalah apa nih?

51:28Company aja, holding company.

51:30Bikin banyak produk-produk ini.

51:33Iya, dia bikin tools-tools open source semua.

51:36Oh, ada yang pro-nya juga.

51:38Ya, kayak ini ya, kayak Telwyn Labs ya.

51:42Itu support tool biasa tuh.

51:45Kalau udah support, mungkin bayarnya di situ tuh.

51:55Iya, kan dari Nux kan.

51:58Versi komersilnya dari Nux untuk freelancers, agensi dan enterprise.

52:04Ya, kerjaan dia ini.

52:09Kerjaan dia open source juga, dari project open source juga.

52:11Di monetisasi kan kayaknya ya.

52:13Betul, kontribusinya di Ecosystem View banyak sekali.

52:17Betul.

52:19Kita kembali ke sini.

52:22Oke.

52:26Start it-nya gimana?

52:29Oke, bikin project biasa aja ya.

52:32Iya, ini web app biasa.

52:34Ya, anggap aja framework lah.

52:36Framework untuk slides.

52:39Buat slides, iya, iya, iya.

52:42Dan itu tuh, kalau lokal, slide dev, command-nya.

52:46Export, bisa di-export ke macem-macem format.

52:49Kalau di-build, biasanya nge-build.

52:52Di-build, jadi static web page ya.

52:56Static assets, JavaScript, CSS.

52:59Tinggal drag and drop ke Netlify atau Vercel atau apapun.

53:03Terus kita ke organizer, misalnya apa?

53:07Presentasi, kirim link-nya aja.

53:10Itu yang ke hosting itu.

53:12Hosting itu apa sih maksudnya?

53:14Di sebelah kiri, di menu guide hosting.

53:17Hosting slide-nya.

53:19Ya maksudnya,

53:21perlu di-build distribution-nya,

53:23tinggal taro file-nya aja ya maksudnya.

53:25Iya, drag and drop aja.

53:27Cuma kan command-nya di-build dulu, biar jadi static assets-nya.

53:30Oh, udah tinggal di...

53:32Itu, by default generated files-nya,

53:35ditaruh di folder disk.

53:37Nah, dist.

53:39Bisa di-preview juga.

53:41Kita nge-check.

53:42Iya, kok biasanya drag and drop ke Netlify atau Vercel?

53:46Nah, kalau sandainya kita udah build,

53:51terus kita udah deploy ke Netlify atau Vercel atau ke mana.

53:54Terus begitu kita lagi sampe di slide 5,

53:57enggak, slide ke 5 gitu, mau slide ke 6, tiba-tiba internet mati.

54:01Bisa next ya?

54:03Udah di-download.

54:05Udah di-download.

54:07Kita access-nya udah di-versal.

54:09Udah di-download.

54:11Asset-nya slide-nya udah di-download.

54:14Tapi kalau misalnya di isi page-nya ada videonya...

54:18Oh, iya, enggak, enggak.

54:20Kita nggak ngomongin video, ya.

54:22Ngomongin slide-nya aja, sampe akhir itu berarti udah bisa di-access, ya.

54:25Kalau kayaknya text dan segala macem sudah aman.

54:29Paling image yang lazy-load.

54:32Kalau image sama di sini, walaupun lokal,

54:35maksudnya walaupun image-nya kan sebenarnya di-build di situ juga,

54:38image-nya lazy-load.

54:40Video, kalau pun pake file video yang lokal,

54:43itu lazy-load juga.

54:45Apanya gitu-gitu lazy-load, tapi slide-nya sendiri sama text-text-nya,

54:49sama kayak next-next-nya, interaksinya gitu, aman.

54:53Oh, oke. Berarti harus tetap jaga-jaga, ya.

54:56Antara kita jalanin di localhost atau convert ke PDF.

54:59Jadi kalau misalkan kejadian apa-apa, escape,

55:02nyalain localhost atau buka PDF, ya.

55:05Kalau gue, biasanya kalau pas lagi ngecek, buka aja semua.

55:10Buka semua slide-nya, next-next-next-next.

55:13Kan itu ke lazy-load, ke download.

55:15- Ke cache, ya. - Ke cache.

55:17Jadi kalau pun di tengah-tengah internet mati, ya nggak apa-apa.

55:21Menarik, menarik.

55:24Nah, ada lagi nih, lihat bagian layout di kiri.

55:32Jadi slideshift ini udah nyediain beberapa built-in layouts

55:40yang umum-umum aja lah, kayak cover, title, center, cover, default, blablabla.

55:47Jadi, apa, kita tinggal pilih.

55:50Ya. Tapi kita bisa bikin sendiri juga, pastinya ya.

55:56Oh, ada iframe. Nah, ini yang cocok buat tadi, iframe-write.

56:02Contoh kodenya, gitu ya.

56:06RL-nya apa?

56:10Ya, kita bertiga, ini harus mulai pake slide-dev atau sebinisnya.

56:15Pusun kan pake keynote atau pake google slide?

56:19Enggak. Enggak pusun.

56:22Kalau gue, emang lebih sering pake slide-dev.

56:25Enggak, enggak pusun.

56:27Enggak, gini-gini, karena flow-nya mungkin masing-masing orang agak beda ya.

56:33Kalau, dan masing-masing apa ya, masing-masing presentasi juga flow-nya agak beda.

56:38Kalau kemarin yang di, mungkin cerita sedikit yang di Bangkok gitu,

56:42topiknya udah dapet.

56:44Outline-nya udah ada, tapi kan belum ada slide-nya.

56:47Pas mau bikin slide, itu nggak sengaja ngeliat satu font, awalnya nyari font.

56:53Font apa yang bagus ya, gitu kan.

56:55Jadi pas mau bikin slide itu, nyari font-nya dulu.

56:58Terus tiba-tiba ngeliat ada font, tapi berbayar, sayangnya berbayar.

57:03Cuman web-nya itu bagus banget kayak gini.

57:06Wah, bagus.

57:09Bagus kan? Cuman yang berbayar.

57:11Nah, akhirnya cari alternatifnya di google font atau di font yang lain, cari yang music.

57:17Tapi themes-nya, warnanya, saya colong dari sini ngambil.

57:22Ini slide.

57:24Dan tema utamanya adalah kayak surat kabar gitu, kayak koran lah gitu ya, kayak gini lah modelnya kan.

57:32Oh, ada informasi, ada apa segala macam.

57:34Akhirnya jadilah slide yang kemarin, gitu.

57:37Itu dari sini tuh berangkatnya.

57:40Nah, kalau seandainya workflow seperti itu diterapkan di Slidev, gimana tuh?

57:45Harus bikin template-nya dulu kan, nggak bisa...

57:48Rubah template, bukan bikin template. Kan bisa template yang sudah ada di ini.

57:54Iya, kalau nggak bisa berapa ekstrem sih obahnya.

57:57Iya, stylingnya di rubah.

58:00Kan kalau ngeliat apa namanya, gayanya ini kan dia ada pilihan mana tadi.

58:06Ada yang center, ada yang left, ada yang right, terus pakai subtitle dan lain-lain.

58:12Misalkan saya mau taro ada kayak garis gitu, di tengah-tengah gitu.

58:18Misalkan ini nih, yang kemarin, dari yang kemarin.

58:22Apa, yang dari inspirasi yang tadi akhirnya jadi slide saya kayak bentuknya kayak gini lah kira-kira.

58:29Gitu.

58:32Kan ada ornament lain kan, ada ini misalkan.

58:37Terus ada ini.

58:39Terus abis itu agendanya kayak gini, ya kan?

58:43Terus abis itu nanti di slide ketiganya untuk kasih tahu bahwa judul kayak gini gitu.

58:50Dan seterusnya, tapi tetap ngikutin apa ya?

58:53Tetap ngikutin warna dan itu sebenarnya bisa.

58:57Kalau mau gampang kan harus bikin layout-nya dulu, jadi tinggal dipakai aja gitu kan.

59:02Iya, ya itu cukup simple sih, ya itu bisa bikin layout-nya.

59:09Atau kalau cuma lebih ke warna dan font-font-nya yang kayak gitu, ya pakai CSS biasa, CSS global.

59:16Misalnya H1, atau header, H1, H2, H3, semua header, selalu tampilannya, selalu pakai font-font-family ini.

59:26Terus pakai font yang itu, oke.

59:28Jadi kalau branding-nya, customization-nya cukup simple,

59:34bahkan nggak harus mikir bikin komponen atau bikin layout task kan bisa dari global CSS.

59:41Ya, termasuk kayak aksen-aksen, misalnya ada border atau apa.

59:44Itu kan, itu semua kan per slide ada class name-nya, ya itu bisa ditambah, bisa ditarget.

59:50Jadi misalnya apa, setiap slide ada border-nya kotak gitu atau apa.

59:55Nah, cuma kalau mau yang custom banget, ya itu custom layout.

1:00:00Oke, seru ya.

1:00:04Terus yang di kiri itu, komponen-komponen.

1:00:07Ini kalau anak front-end suka banget nih pasti pakai ginian.

1:00:10Betul, makanya jadi sel-slide dev dibayar, enggak, tapi dengan fanatik ngomong-ngomong.

1:00:22Ini pakai komponen yang ini berguna banget buat bikin.

1:00:26Kayak misalnya kalau yang use case yang simple banget, grid kali 3 itu loh.

1:00:31Tahu kan yang kalau setiap template presentasi kayak DevFest atau IO Extended,

1:00:36pasti ada kayaknya yang satu, dua, tiga.

1:00:38Nah, kalau misalnya di Google Slash user-user-nya belum ukurannya selain sama text-nya, malas banget.

1:00:45Ini bikin sekali, ya kan ikutin aja, apalagi kurang lebih bentuknya kayak gimana.

1:00:49Oh udah, tinggal masukin grid-gridnya.

1:00:54Terus ya bisa interactive juga.

1:00:57Misalnya apalah counter atau apa, ya bisa apapunnya bisa interactive semua ini pakai Vue.

1:01:02Cuman downside-nya adalah buat yang belum bisa Vue, harus belajar Vue ya.

1:01:10Kalau mau customize lebih lanjut ya untuk pakai komponennya.

1:01:13Betul, di situ pentingnya generatif AI code assistant.

1:01:19Enak loh dan itu, gue kan pakai cursor ya.

1:01:22Cuman nyuruh apapunnya buatlah komponen bernama blah, menerima, property blah, string, property A, B, C.

1:01:32Apapunnya kita deskripsiin, ya bisa kok.

1:01:35Gimana kalau Slidev ini kita porting ke Astro.

1:01:44Biar lebih banyak yang bisa kita bikin komponennya.

1:01:48Gak bisa Astro ya.

1:01:50Kenapa saya gak bisa?

1:01:53Ya bukan maksudnya, ya bentuk.

1:01:58Kan Astro Meta Framework ya, justru kelas sama Slidev-nya kan.

1:02:02Slidev kayak cuma butuh ngeproses bahasa UI-nya kan.

1:02:10UI framework-nya atau UI library-nya.

1:02:13Bisa static slide juga kan, kalau Astro kan bisa static slide juga kan.

1:02:19Oh ya bisa, kalau gitu bikin slide-nya di Astro aja kalau mau kayak gitu.

1:02:23Ya iya maksudnya itu, maksudnya kita port Slidev-nya ada versi Astro.

1:02:28Maksudnya gitu.

1:02:30Jadi komponennya bisa pakai React, bisa pakai Svelte, bisa pakai Vue, atau Astro.

1:02:38Lebih sulit ya, mending pakai routing-nya Astro aja.

1:02:42Iya semuanya Astro, gak usah pakai Slidev-nya udah ditinggalin gitu.

1:02:47Kita porting maksudnya.

1:02:49Namanya gak pakai Slidev sama sekali.

1:02:52Gak, gak pakai Astrodev.

1:02:55Slastro.

1:02:59Maksudnya, tapi gak apa-apa. Slastrodev.

1:03:03Itu built-in components apa sih? Maksudnya built-in components sih, built-in components.

1:03:07Yang udah ada tuh.

1:03:09Oh ya ada lagi yang keren, icon-icon, icon, semuanya cari by icon.

1:03:16Coba kulitnya ada basic set icon, kalau misalnya kan icon-nya banyak tuh.

1:03:21Icon-nya juga keliatannya ngambil dari...

1:03:23Oh ngambilnya dari mana?

1:03:25Dan Unplugin Icons itu powered by Unplugin Icons itu bikinannya Mas Anfu juga.

1:03:31Dia jualan produk sendiri ini kayaknya ya.

1:03:37Gak habis-habis ya semua produknya dia.

1:03:40Dan bikin ekosistemnya sendiri kayaknya.

1:03:43Oke, lanjut, lanjut.

1:03:51Ini banyak pilihan icon.

1:03:53Dan bahkan kita gak browsing icon-nya tuh, browse and search for all icons available with icon-ness.

1:04:00Itu tuh enak banget, membantu banget asli.

1:04:04Oh bisa langsung pakai udah.

1:04:08Oh wow.

1:04:09Search aja butuh icon apa.

1:04:11Kayak phone awesome jaman dulu nih.

1:04:14Ya emang, ya prinsipnya gitu.

1:04:17Cuma ini mengkolekkan phone awesome satu provider, phone icon ya.

1:04:21Dia tuh mengkolek semua icon provider yang bisa dipakai.

1:04:28Bukan sosial icon, icon buat aplikasi sih ini ya.

1:04:34Beda ya.

1:04:36Coba like, like, like atau apa gitu.

1:04:40Like button ya?

1:04:43Ya.

1:04:44ByteDance.

1:04:46Oh ByteDance.

1:04:48Iya button like, byteDance.

1:04:51Ini like.

1:04:52Tuh, iya itu.

1:04:54Oh, Damer paling suka pakai?

1:04:59Fluent.

1:05:01Fluent Microsoft.

1:05:03Oh ada ya disini.

1:05:05Icon-ness.

1:05:07Bisa diklik?

1:05:08Oh like-nya dihilangin dulu.

1:05:11Oh ini, Microsoft-nya ya.

1:05:14Nah, search aja.

1:05:16Load all.

1:05:17Buset, gamasli phone ya.

1:05:20Load more, load more.

1:05:21Gak jadi, gak jadi.

1:05:22Ini bisa SVG ya?

1:05:27Ini seperti ini SVG?

1:05:30Ya bisa SVG, bisa PNB.

1:05:34Kalo yang buat dimasukin ke slide dev, jadinya dirender sebagai SVG.

1:05:40Jadi bisa di styling.

1:05:42Bisa di styling sesuatu.

1:05:44Bisa di warna-warnain.

1:05:45Pakai CSS bisa.

1:05:46Pakai quas juga bisa.

1:05:48Ini kayaknya by default slide dev itu udah detail win-nya deh.

1:05:51Jadi maksudnya kalo kita, kalo buat yang gak suka nulis CSS langsung,

1:05:56tapi kebiasa detail win ya udah text dash blue, dash 500.

1:06:02Wah seru ya.

1:06:06Ini kayaknya bisa di, apa ya, bisa di explore ke arah yang tadi.

1:06:12Jadi bisa demo code sekaligus ada di slide-nya.

1:06:15Mungkin bisa pake kayak tutorial kit kah, atau bahkan satu project full.

1:06:23Kayak StackBlitz atau sandbox ya.

1:06:28Lebih tepatnya mungkin kayak tutorial kit kali ya.

1:06:30Jadi kayak snippet-snippet gitu.

1:06:32Tutorial kit gak snippet, itu project, satu project dia sebenernya.

1:06:36I-frame dibuat.

1:06:39Tapi kan pake web containers juga.

1:06:42Jalanin Node.js bisa di browser.

1:06:47Oke, oke.

1:06:54Ada lagi yang menarik kah?

1:06:56Ini seru banget.

1:06:57Ada tapi, ada tapi belum, oh, si luar slide dev maksudnya.

1:07:01Kalo slide dev ya, maksudnya...

1:07:03Enggak, slide dev aja, slide dev aja.

1:07:05Kalo dari slide dev sih ada. Bisa ngejalanin ini gak, apa yang mau kita capai tadi kayak ngejalanin.

1:07:12Berarti kita kalo menjalani satu ini, satu sample lah yang penggunaan web API.

1:07:18Misalnya kayak block yang bisa jalan-jalan-jalan.

1:07:23Berarti kita bikin komponen sendiri ya.

1:07:25Kita bikin komponen view.

1:07:27Jadi apapun yang render dan dicapai di view.

1:07:30Enggak mau bikin ini, transition, transition API, pake transition API.

1:07:39Apa ya, mungkin si block itu bisa kita bikin di satu komponen,

1:07:48nanti di apply transition API dia jalan gitu.

1:07:51Bisa wait kan, jalaninnya harus di laptop kita, atau kan browser ya.

1:07:58Ini kan di render browser.

1:08:00Kita mau demo-in view transition API.

1:08:02Berarti harus dijalani di browser yang udah support.

1:08:06Jadi jawabannya bisa.

1:08:08Dibikin aja di view komponen.

1:08:12Tapi transition antar slide-nya juga bisa gak sih?

1:08:18- Udah ada belum sih? - Udah, by default, fitur-fitur apapun yang ada di sewajarnya presentation atau slide show ada semua.

1:08:29Kayak misalnya fade atau slide.

1:08:31Kalau next slide-nya, animasinya gimana, udah ada semua.

1:08:36Terus udah ada itu loh.

1:08:38Tahu gak sih yang dalam satu slide, kita ada bullet point gitu, 1, 2, 3.

1:08:42Kan mau ditampilinnya satu persatu, kita harus next, next, next gitu, itu juga udah ada.

1:08:48Dan itu pakai view semua, pakai kayak attribute view.

1:08:57Oh ya, itu tadi ya, harus mempelajari view kalau mau lebih lanjut ya.

1:09:03Oh kalau lebih lanjut, ya cuma kalau buat yang kayak built-in animasi atau misalnya apa, next yang setiap item munculnya kalau di next,

1:09:12itu udah tinggal tulis attribute v-click doang, v-click.

1:09:17Maksudnya kita gak harus ngulik internalnya, jeruannya.

1:09:21Bener kan? Bisa, pasti bisa sih run code.

1:09:26Ini salah satu kelebihannya ya, yang untuk model-model slide yang JS, JS gini pasti bisa evaluate code-nya.

1:09:37Bisa, tapi itu tadi bisa with kafeat, misalnya kita teranjur deploy di URL,

1:09:42terus kita pakai laptop-nya panitia, misalnya ternyata laptop panitia gak pernah diambil.

1:09:46Browser-nya versi lama, ya gak jalan.

1:09:49Browser-nya masih E6 gitu ya?

1:09:54E6, E6 ma, Google Slides juga gak bisa.

1:09:58Nah, ini beritsi indegus ya.

1:10:01Ini ada info.

1:10:02Udah masukin di topik salnya.

1:10:04Iya, tapi belum kita bahas kebetulan, tepat banget.

1:10:07Karena belum pakai juga, cuma maksudnya udah pernah ngebook market.

1:10:10Ini lebih simpel ya, kalau kata Jimmy katanya lebih simpel.

1:10:14Markdown Presentation Ecosystem, oh sama kayak tadi ya AI presenter juga ya, AI.

1:10:21Cuma dia berusaha bikin standarisasinya.

1:10:24Suka kebalik-balik, oke.

1:10:30Ini ngasih, ngasih AI.

1:10:33Oh ya lupa.

1:10:35Sorry, sorry. Ini ya.

1:10:37Get Started-nya gimana?

1:10:41Dia ada aplikasi? Oh enggak, dia pakai ini juga ya, pakai code editor masing-masing ya.

1:10:46Terus jalaninnya juga pakai NGM ya.

1:10:48Jadi dia bikin plugin untuk diaskop, bikin CLI-nya.

1:10:54Ada framework-nya, ada core-nya, cuma justru karena terlalu rapi.

1:11:01Terlalu heboh ya, terlalu rapi.

1:11:03Terlalu apa ya, kayak niat bikin foundation.

1:11:09Soalnya kan dia pengen bikin Ecosystem tuh, Markdown Presentation Ecosystem.

1:11:16Jadi yang kayak beneran modular gitu loh, ada core-nya, ada apanya.

1:11:20Cuma malah jadi nggak pernah sempet-sempet ngulik, udah nyaman pakai slidef juga.

1:11:26Ya, next time ya.

1:11:28Ada contohnya di sini ya?

1:11:29Slidef tuh udah bisa DTS code kan?

1:11:32Udah bisa DTS code slidef.

1:11:34Tinggal install extension-nya.

1:11:36Bisa, bisa, bisa.

1:11:38Nggak perlu juga buat apa?

1:11:40Ya sambil nulis langsung lihat hasilnya mas.

1:11:44Oh iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya, iya.

1:11:48Next time.

1:11:49Check out Markdown repository.

1:11:52Oh nggak, maksudnya contoh slide-nya gitu nggak ada ya?

1:11:56Website, discussion, assemblies, Markbit apps.

1:12:02The skinny framework for creating slide deck for Markdown Ecosystem.

1:12:12Managed by Mark Team.

1:12:14Satu orang doang?

1:12:16Sama dong kayak Anfu.

1:12:18Tiga bulan yang lalu, oke.

1:12:21Aktif kok itu.

1:12:23Cuma ya nggak tahu kenapa kayak butuh mental energy yang banyak gitu kalau mau mempelajari.

1:12:28Iya, untuk mempelajarinya masuk lebih dalemnya harus.

1:12:31Kayaknya banyak yang di...

1:12:32Ayo atas, atas, scroll atas.

1:12:34Scroll atas.

1:12:36Atas, atas lagi.

1:12:39Atas lagi.

1:12:42Atau get started.

1:12:43Itu kalau diklik, masuk mana sih?

1:12:45Klik get started.

1:12:46Atas.

1:12:47Oh gitu.

1:12:48Itu.

1:12:49Gue punya doang.

1:12:50QSCode.

1:12:51Iya.

1:12:52Nggak membantu ya.

1:12:54Katanya lebih simple.

1:12:56Bukannya slide deck juga Markdown doang?

1:12:59Markdown juga?

1:13:01Nggak, kalau slide deck kan sebenarnya rumit.

1:13:04Maksudnya dibalik layar kan ada view components, ada CSS, ada CSS-nya.

1:13:09Oh karena ada view-nya ya.

1:13:10Ada pre-processor-nya.

1:13:11Kalau ini kelihatannya lebih yang puris Markdown ke slide.

1:13:16Nggak pakai itu JS apa framework atau UI.

1:13:23Tapi kalau ngeliat modelnya begini mirip-mirip juga.

1:13:28Mirip sih, nggak jauh lagi juga.

1:13:30Syntax-nya Markdown kan, slide deck juga pakai Syntax Markdown.

1:13:34Tapi diberkaya sama view MDX deck juga bisa pakai Syntax Markdown.

1:13:40Bikin sendiri berarti.

1:13:41Kalau ini lebih kayak ritminya GitHub nggak sih?

1:13:47Ya maksudnya yang pure Markdown renderer aja.

1:13:50Iya, pure Markdown.

1:13:51Mungkin ada beberapa customization-nya ya.

1:13:53Tapi perspektifnya adalah Markdown renderer.

1:13:57Yang target niche-nya itu untuk presentasi.

1:14:03Bentar.

1:14:06Ini nggak ada dependency.

1:14:07Dia bikin sendiri gitu semuanya?

1:14:10Ya, karena sebetulnya dia adalah Markdown parser.

1:14:14Iya, Markdown parser-nya pun dia bikin sendiri berarti.

1:14:17Itu kan dependency-nya di atas kali.

1:14:21Oh, coba lihat atas.

1:14:22Nggak ada.

1:14:23Mana?

1:14:25Depend.

1:14:31Cuma itu nggak ada.

1:14:34Ini website-nya.

1:14:37Wait, wait, wait.

1:14:38Ini website-nya.

1:14:39Oh iya, nggak ada package-nya.

1:14:41Coba.

1:14:42Yang mana?

1:14:43Marpid?

1:14:44Markcore?

1:14:45Iya, Markcore.

1:14:47Nah, coba buka package.

1:14:48Nah, ini berbanyak nih.

1:14:49Nah, ini.

1:14:55Marpid Highlight JS.

1:14:57Oh, dia pakai Highlight JS.

1:14:59Nggak pakai CK.

1:15:01OCSS.

1:15:03Atex.

1:15:05Nggak banyak tuh.

1:15:07OCSS itu untuk itu ya, yang matte apa?

1:15:09Latex bukan?

1:15:11Rumus-rumus gitu kan?

1:15:12Kayaknya yang mirip-mirip ya.

1:15:14Iya, latex.

1:15:15Oke, ya kalau mau simple katanya pakai Mark,

1:15:26tapi kalau mau yang bisa presentasi pakai code sample gitu ya,

1:15:33code highlighter, lebih ke slidev ya.

1:15:36Tapi slidev juga bisa simple kan?

1:15:38Kalau misalkan kita kayak yang di depan ini,

1:15:41ini juga simple kan?

1:15:42Bisa.

1:15:43Udah gini aja, udah.

1:15:44Bisa, cuma mungkin kalau orang yang puris banget kan,

1:15:46ya apa, nggak mau ada apalah dependensi macem-macem,

1:15:51kayak pengen yang beneran pure,

1:15:54semurni-murninya Markdown.

1:15:56Oh, nggak ada sintasitas tambahan gitu ya.

1:16:01Ini juga sebenarnya kan di slidev kalau nggak mau pakai,

1:16:05nggak mau pakai tambahan apa-apa, kayak gitu bisa.

1:16:08Tapi kan tetep-tepitnya.

1:16:09Maksudnya dibalik layar ada view yang jalan.

1:16:13Kayak mungkin kalau sekarang mentally nggak rela ada JavaScript-JavaScript-an,

1:16:19mungkin ya bisa pakai Mark.

1:16:21Slidev kayak Astro?

1:16:24Enggak, Astro kan meta framework buat web, ini kan buat slide.

1:16:28Nah, tadi kita baru bilang ya, mau bikin...

1:16:31Iya, mau bikin versinya.

1:16:33Ini bikin slide, tapi bentuknya web, bentuk akhirnya bentuknya web,

1:16:38jadi bisa dibuka pakai browser.

1:16:40Itu, bedanya.

1:16:43Jadi kalau teman-teman yang mau present, ya bisa pakai ini ya.

1:16:49Slidev.

1:16:51Slidev.

1:16:53Oh iya, Swap. Kenapa Swap belum ada ya?

1:16:58Nggak ada yang bikin, kayaknya nggak cukup major.

1:17:02Nggak ada yang sebesar universe-nya Anfu soalnya.

1:17:06Mau pakai ini udah punya dia, semuanya dia.

1:17:10Gila ya, luar biasa.

1:17:13Oke.

1:17:14Nggak perlu, sebenarnya nggak perlu cari ida.

1:17:16Apa yang dibikin Anfu, bikin aja versi Svelte.

1:17:19Svelte.

1:17:21Anfu dimirur, Anfu universe dimirur jadi Svelte.

1:17:26Anfu Svelte, gitu.

1:17:29Anfu. Anfu alternatif.

1:17:32Namanya Anfu Svelte, bukan Anfu.

1:17:37Iya.

1:17:41Mantap lah.

1:17:43Dia bikin produk dari produknya dia yang lain ya.

1:17:48Di buku-buku sih ya.

1:17:50Disusun-susun.

1:17:52Disusun-susun.

1:17:54Nah, kalau Jimmy pakai Slidev juga nggak untuk presentasi?

1:17:57Jimmy kan suka presentasinya yang berhubungan dengan cloud kan.

1:18:00Demo-demo cloud gitu ya nggak bisa lah ya.

1:18:03Tetep harus keluar dari slide.

1:18:07Terus abis itu buka browser, buka tab, atau buka terminal gitu kan ya.

1:18:12Atau perlu. Atau bisa.

1:18:14Atau screenshot, masukin aja image-nya.

1:18:16Oh, yang kemarin Jenaya Itur pakai Slidev.

1:18:21Oke, oke, menarik, menarik.

1:18:23Tim Slidev.

1:18:25Mau belajar pakai Slidev.

1:18:28Tenggal bikin view komponen kan tinggal punya view biasa segala macam interaksinya.

1:18:37Soalnya kan saya nonton ya waktu Jimmy LiveCode nonton.

1:18:39Udah gitu pakai nama saya juga kan kaget ya.

1:18:41Kok tiba-tiba nama saya di situ ternyata demo code.

1:18:45Oh itu pakai Slidev, nggak nyadar loh.

1:18:48Kirain buka browser biasa.

1:18:50Luar biasa. Mantap, mantap, mantap.

1:18:52Bisa ditiru, bisa ditiru.

1:18:54Asik kali ya.

1:18:59Udah mulai kebayang kalau modem-modem web API kayaknya asik tuh pakai.

1:19:04Iya, cocok-cocok.

1:19:06Dari pada bolak-balik, bolak-balik masuk ke tab lalu di browsernya di-float kayaknya.

1:19:12Kayak terpotong gitu nggak ini ya experience-nya untuk ngomongnya.

1:19:16Kurang smooth ya experience-nya.

1:19:18Dan yang paling membantu tuh di codeblog-nya, jadi kita kayak menunjukin kodenya satu bersatu tuh ngetiknya enak banget.

1:19:25Dibanding kalau misalnya kayak apalagi Google Slides atau Canva atau apa.

1:19:29Kan emang bukan spesial di desain untuk codeblog ya.

1:19:34Jadi kita harus bikin kotak hitam atau kopas kotak hitam.

1:19:38Terus apa, text kodenya harus kita ganti pakai phone yang monospace, ribet.

1:19:48Kalau ini, highlight-nya, code highlight-nya step-by-step-nya enak banget.

1:19:54Saya biasanya kalau mau saya masukin codeblog, saya tuh bikin ini dulu.

1:19:59Ada tools-nya yang untuk ngerobah kode.

1:20:04Screenshot. Oh, ngerobah.

1:20:06Nggak, ada Syntax Highlighting for Slides.

1:20:09Wow, jadi tetap text, cuma kayak warna-warnanya diubah sama dia gitu.

1:20:15Ini nih, kalau saya pakai ini, mas Liza tolong bukain.

1:20:31Boleh.

1:20:33Wow, mantap, baru tahu.

1:20:36Jadi saya biasanya paste dulu ke Syntax for Highlighting-nya di sini.

1:20:40Oh, yang punya romanulik.

1:20:42Terus saya paste ke sini, nanti hasilnya saya baru copy ke slide saya.

1:20:47Jadi sudah ada Syntax Highlight-nya juga.

1:20:49Kenapa nggak susah sabar itu, nggak pakai pola code.

1:20:52Pola code PSGOT di draft image.

1:20:55Tapi ribet juga.

1:20:57Kalau ada kebutuhan-kebutuhan tertentu, misalkan workshop, terutama ya.

1:21:01Untuk workshop kan, kode-nya itu bisa di-copy paste.

1:21:05Jadi kan ini bentuknya text kan.

1:21:08Jadi misalkan peserta ikut buka slide-nya.

1:21:11Oh, daripada dia ngetik-ngetik, dia bisa copy paste.

1:21:13Nah, ini salah satu solusinya ini.

1:21:17Jadi sudah disiapkan, apa namanya, Syntax Highlighting-nya ada.

1:21:21Tapi itu dalam bentuk kode, bukan dalam bentuk screenshot.

1:21:25Saya juga beberapa kali pakai.

1:21:29Jadi lebih fleksibel juga.

1:21:31Kalaupun nggak untuk copy paste, bisa untuk customize.

1:21:35Oh, font-nya mau diganti.

1:21:37Misalkan, oh kurang gede.

1:21:40Kita tinggal tambahin gedein font-nya.

1:21:42Nggak perlu screenshot ulang atau apa-apa.

1:21:45Ada lagi kah yang mau dibahas?

1:21:55Go slide-desk, go slide-desk.

1:22:00Berarti, Defe Surabaya ini pakai slide-desk semua nih?

1:22:05Nggak, udah selesai. Apa ini?

1:22:08Pake selesai ya.

1:22:10Oh iya, kita kan kesefesinya pendek ya, banyakan ngobrolnya.

1:22:13Sekalian teaser.

1:22:15Sekalian teaser.

1:22:17Dan gue kan browser automation, nggak bisa pakai slide-desk.

1:22:20Browser automation.

1:22:22Oh iya.

1:22:24Justru balsumnya yang di jalan-jalan.

1:22:27Terus kembalikannya.

1:22:29Bikin komponen yang bisa buka browser di dalam browser.

1:22:34Ada hubungannya tentang Headless.

1:22:38Galaxy brain.

1:22:41Powerpoint versi web, iya.

1:22:43Dan Powerpoint sendiri sekarang udah ada versi web-nya yang tadi Office 365.

1:22:47Jadi kalau memang masih nggak mau move on dari Powerpoint, mungkin bisa cek yang webnya.

1:22:55Itu mirip-mirip kan, UI-nya juga mirip-mirip, hasilnya juga mirip-mirip.

1:22:59Jadi bisa diperiksa juga.

1:23:01Dan ya tadi udah sempat diomongin juga sama Ivan tadi ya, apa sama Eka juga ya.

1:23:06Salah satu kelebihan yang online ini untuk kolaborasi bagus, enak gitu.

1:23:12Kalau misalkan kayak keynote, ya bisa, cuman agak kurang kan, kurang seamless lah.

1:23:18Biasanya kita pakai Google slide, tapi kalau misalkan yang gini tinggal push kerepo aja.

1:23:22Github aja, semua bisa ngedit.

1:23:24Iya, push kerepo.

1:23:26Figma slide, iya Figma slide, saya pernah cobain tapi ribet sekali.

1:23:30Ini satu-satu.

1:23:32Sama kalau di push kerepo, contohnya kayak ke GitHub ya.

1:23:37GitHub kan ada code spaces.

1:23:39Bisa dibuka juga di situ.

1:23:42Jalanin aja di situ.

1:23:44Bisa hotfix ya, kalau ada typo langsung hotfix ya.

1:23:46Sam bisa kolaborasi juga kan, code spaces dia bisa invite orang lain untuk kolaborasi.

1:23:52Jadi dia nggak perlu jalanin di lokal ya.

1:23:55Benar-benar.

1:23:57Makanya saya mau pakai slide.

1:23:59Code spaces, iya.

1:24:01Code spaces, iya.

1:24:03Bisa jalan di idx.dev juga kali ya.

1:24:06Bisa harusnya.

1:24:09Bisa aja.

1:24:11Oh, jalanin gitu kan.

1:24:13Bisa aja.

1:24:15Termasuk juga hostingnya bisa langsung di GitHub pages.

1:24:18Betul.

1:24:20Oh, kata Jimmy, bisa host langsung.

1:24:22Yoi.

1:24:24Good, good, good.

1:24:26Hemat energi, hemat biaya.

1:24:28Iklannya mengepantah.

1:24:31Hemat energi.

1:24:33Hemat energi.

1:24:35Memang Eka udah, damannya Eka ya itu ya.

1:24:38Kok bisa tahu sih?

1:24:40Udah nonton TV sih.

1:24:42Oke, nextnya.

1:24:46Ika ngecapin semua.

1:24:48Deves ini kan, Deves Jakarta.

1:24:50Habis itu Sarabaya.

1:24:52Eka?

1:24:54Kemarin Bogor kan, habis itu kemarin lagi.

1:24:56Makasar, iya, kemarin Bogor.

1:24:582 minggu lagi Makasar.

1:25:00Makasar kapan?

1:25:0223.

1:25:04Oh, Sabtu depan.

1:25:06Makasar, Jogja, Surabaya.

1:25:08Jadi, terakhir kita semua ketemu di Surabaya.

1:25:10Masih tinggal lagi.

1:25:12Mas Elisa?

1:25:14Surabaya.

1:25:16Doang?

1:25:18Medan udah propose, tapi belum di accept.

1:25:20Accept? Nggak tahu.

1:25:22Belum dapat venue katanya.

1:25:24Eh, Spam tau, kadang masuk Spam.

1:25:26Oh, emang belum dapet venue.

1:25:28Kata Mas Danang, iya, belum dapet venue.

1:25:30Pengen aja ke Medan.

1:25:32Tiga propose juga.

1:25:34Eh, Surabaya, berarti kita bisa,

1:25:36karena kita bertiga,

1:25:38kemarin ngomong sama Esther,

1:25:40bisa rekam atau live di sana aja kita podcast.

1:25:44Iya, kita ngobrolin web live dari Surabaya.

1:25:47Iya, temen-temen yang di Surabaya

1:25:49boleh merapat ya.

1:25:51Ada yang di Surabaya ngomongin hit chat.

1:25:53Mudah-mudahan ada.

1:25:55Medan tuh, Soto Medan.

1:25:57Wah, Jimmy.

1:25:59Jadi pengen kan?

1:26:01Soto Medan tuh yang ada undangnya.

1:26:03Mudah-mudahan diterima proposalnya.

1:26:05Udah propose talk soalnya.

1:26:07Soto Medan gimana yang enak ya di Spam?

1:26:09Atau di mana tuh?

1:26:11Di Jakarta.

1:26:15Jakarta tanggal berapa, Ivan?

1:26:17Minggu depan.

1:26:2130 November.

1:26:23Toma tuh ke Jakarta aja.

1:26:27Makan suatu sampai kolesterol 200.

1:26:30Jangan lah.

1:26:32Jangan.

1:26:34Nah, ini Surabaya.

1:26:36Ayo kita itu lah.

1:26:38Kita ngumpul-ngumpul kali ya abis acara.

1:26:40Tapi abis acara mau langsung pulang.

1:26:42Soalnya acaranya hari minggu.

1:26:44Oh iya.

1:26:46Iya.

1:26:48Iya, maksudnya ngumpulnya Sabtu kan bisa.

1:26:50Oh iya, benar.

1:26:52Kita bikin meet and greet.

1:26:54Wah, meet and greet.

1:26:56Pukidarak.

1:26:58Meat and grill.

1:27:00Meat and grill.

1:27:02Oh iya, boleh-boleh.

1:27:04Meat and grill.

1:27:06Daging dan panggang ya.

1:27:08Oke, kalau gitu.

1:27:10Terima kasih buat semuanya

1:27:12yang sudah ikutan diskusi

1:27:14buat tambahan-tambahan

1:27:18pengetahuan juga

1:27:20buat kita.

1:27:22Mudah-mudahan yang kita sampaikan juga

1:27:24bermanfaat buat teman-teman semua

1:27:26yang mau presentasi.

1:27:28Yang bingung mau pakai

1:27:30slide, mau bikin slide

1:27:32dari mana, ya bisa pakai slide.

1:27:34Mungkin sekarang tambah bingung karena

1:27:36opsinya tambah banyak.

1:27:38Mungkin juga.

1:27:40Ngobrolin Haskell.

1:27:42Enggak.

1:27:44Enggak, terima kasih.

1:27:46Ngobrolin Haskell.

1:27:48Jangan-jangan-jangan.

1:27:50Terlalu matematis ya.

1:27:52Kita, matematika kita

1:27:54nggak terlalu bagus.

1:27:56Oke, itu aja untuk malam ini.

1:27:58Ditunggu minggu depan

1:28:00dengan topik-topik yang berbeda.

1:28:02Ketemu lagi minggu depan

1:28:04di hari Selasa Malam.

1:28:06Selamat malam, sampai jumpa

1:28:08minggu depan. Bye bye.