Ngobrolin CSS - Ngobrolin WEB Ep2

3:17Jawabannya tidak. Tidak ada hubungannya.

3:23Tetapi secara tidak langsung karena situsnya serasa lebih cepat, tentunya user makin senang dong untuk melihat,

3:34membrosing situs kita untuk melakukan, ngecek-ngecek situs kita ya, karena cepat banget.

3:41Kalau diimplementasinya dilakukan dengan benar, itu serasa headless, jadi serasa SPA.

3:49Diklik langsung muncul, klik langsung muncul, jadi serasa SPA dia, single page application.

3:56Jadi secara tidak langsung bisa mempengaruhi jumlah visitor lebih banyak karena user lebih engaged terhadap situsnya.

4:06Yang tidak sempat saya kasih tahu minggu lalu, itu adalah pengaruhnya ke back-end sebenarnya.

4:13Apa tuh pengaruhnya?

4:15Back-end, jadi kan dia melakukan prefetch ya, request ya, request ke back-end setiap kali link-nya muncul.

4:22Artinya di back-end itu jadi page view, jadi page request.

4:30Kalau situsnya hanya skalanya masih kecil dan menengah, ya hostingnya tentu nggak pengaruh.

4:41Tapi kalau situsnya sudah view-nya jutaan, itu dan hostingnya punya payment plan-nya itu by page request,

4:55berapa jumlah page request itu bisa perlu hati-hati untuk kendalinya.

5:01Sangat sengaja ke DDoS sendiri ya?

5:04Serasa seperti ke DDoS sendiri, tetapi gini, bill-nya bisa bengkak karena contohnya apa ya page request?

5:11Setahu saya banyak kan cloud product, kayak Google Cloud atau AWS ya, AWS atau yang manage-manage hosting itu,

5:25mereka ada batasan limit untuk jumlah page request, by page request.

5:33Jadi kalau misalnya pakai quick ring, perlu hati-hati untuk page request tersebut.

5:39Oh, sudah ya? Baru mau diganti ininya.

5:45Oke, pertanyaan kedua. Pertanyaan pertama jawabannya ya dan tidak.

5:53Ya, karena website-nya lebih cepat, lebih banyak orang yang suka dan lebih banyak juga, secara otomatis lebih banyak user yang bisa di-serve-kan.

6:03Yang kedua, apakah dengan kita belajar React, peruang mendapatkan pekerjaan akan lebih besar?

6:08Ini juga jawabannya ya dan tidak.

6:12Tergantung mau kerja dimana.

6:14Ya, betul. Jadi, ada dua kubu ya, kayak dua sisi mata uang ya.

6:22Ada yang mengikuti trend itu bukan sepenuhnya salah, tidak sepenuhnya salah.

6:28Karena memang peluang besar di sana ya, peluang banyak di sana gitu, lewangan pekerjaan dan lain-lain.

6:34Tapi di sisi yang lain, kembali lagi ke diri kita gitu.

6:39Misalkan kita kurang menyukai React, misalkan kita lebih suka framework yang lain gitu.

6:44Kenapa dipaksa untuk mengarah ke sana.

6:48Atau juga kalau kita ngomongin membuat produk atau membangun sebuah aplikasi, itu kadang-kadang klien-nya nggak peduli kan.

6:56Kita mau menulis pakai React kah, mau pakai JQuery kah, atau mau pakai vanilla Javascript gitu.

7:01Yang penting hasil lahirnya.

7:02Ada yang pakai Backbone nggak untuk Backbone?

7:07Tapi Laravel sampai sekarang, gue masih pakai Laravel karena inherit codebase sama ya.

7:15Jadi mungkin kalau kita sebagai developer lihat di sosmed atau apalah, kayaknya emang banyak banget framework baru ya.

7:23Tapi di kenyataannya kalau di dunia kerja kan nggak semua organisasi atau perusahaan bisa serta-merta tiba-tiba tiap tahun ganti framework gitu.

7:34Sesuai apa yang lagi nge-trend kan sebenarnya nggak gitu juga ya.

7:37Jadi apa, kayak Rails juga yang pakai juga mungkin masih banyak ya pokoknya framework-framework yang lama.

7:46Cuma mungkin yang penting banget, fundamental web-nya aja sih, kayak misalnya tentang performance kemarin tuh.

7:55Bisa mengimplement, entah itu kita pakai React atau Swelt atau apapun kan sebenarnya kayak prinsip prefetch

8:02atau segala macam yang kita bahas kemarin tuh kan prinsip dasarnya tetap sama ya.

8:06Jadi kalau menguasain itu sih mau pindah-pindah, mau React, Swelt, Angular, dan lain-lain, nggak seberat itu.

8:15Kalau misalnya emang suatu saat kita pengen cari kerjaan yang mengharuskan pakai stack tertentu

8:21dan buat kita itu dream job, ya udah kita bisa dengan gampang mengejar itu.

8:26Kuatkan fondasi fundamental JavaScript-nya. Atau web-nya, lebih tepatnya web. Web development-nya.

8:36Jangan cuma JavaScript. Web itu banyak.

8:40Ya, karena framework itu bisa berganti-ganti, yang bertahan itu ya fundamentalnya.

8:46Ketika amit-amit nanti misalkan React, wah udah nggak ngetrend lagi, ya ngetrend yang lain gitu kan.

8:52Kalau kita belajar spesifik ke React, begitu React-nya sudah jarang dipakai, kita harus belajar lagi dari awal.

8:58Sementara kalau udah fundamental itu udah setengah jalannya.

9:01Kita udah ngerti lah dalemannya framework itu seperti apa.

9:05Dan ngomongin teknologi web, jadi bukan hanya JavaScript, dan malam ini kita akan membicarakan tentang CSS.

9:13Banyakan CSS itu apa sih? Cascading?

9:16Cascading style sheet.

9:19Dan berhubung materi atau topik saya yang paling nyubi, jadi saya izin duluan ya.

9:29Baiklah.

9:32Ya, jadi beberapa minggu yang lalu sempat bersiluran di timeline, itu web dev itu mengeluarin sebuah media baru.

9:43Seri ya, semacam serial, seri tutorial.

9:46Betul, jadi dia bentuk dalam bentuk course, di sini ada banyak sekali di web.dev/learn.

9:53Ada mulai dari accessibility, ada learn HTML, ada responsive design, ada form,

10:00sampai ada PWA, dan ada CSS.

10:03Jadi kalau temen-temen yang ilmu CSS-nya masih cupu seperti saya dan Ivan, kita bisa belajar bareng-bareng di sini.

10:12Ya, fakta. Saya masih nyubi banget di CSS.

10:17Baru belajar CSS.

10:20Ya, sama. Dan kebetulan juga beberapa waktu yang lalu saya sempat diminta untuk isi salah satu workshop online.

10:30Dan materinya basic, HTML dan CSS.

10:33Dan berhubung waktunya itu terbatas dan khawatir nggak sampai selesai, akhirnya saya bikin dalam bentuk tulisan.

10:40Jadi temen-temen kalau mau yang cari yang bahasa Indonesia, bisa ke...

10:45HTMLcss.rizafahmi.com

10:48Asyik. Ini pakai Google Translate? Enggak, ini bahasa Indonesia.

10:53Google Translate tulis sendiri tuh, kan?

10:56Ini tulis sendiri, dan tulisan ini, website-nya itu dibikin dengan kit docs-nya yang ditulis di atas spell kit.

11:06Jadi ini adalah seperti dokumentasi, kita belajar HTML, basic banget gitu,

11:13sampai akhirnya bisa bikin aplikasi sederhana seperti ini, kumpulan link-link gitu aja.

11:17CSS-nya juga nggak terlalu banyak dibahas, terlalu mendalam, tapi ya lumayan lah, ada box model, hampir sama ya.

11:25Gak spesifik terhadap framework tertentukan, ya?

11:33Gak lah, dasarnya dulu.

11:36Dasarnya dulu, betul.

11:37Dasar banget. Ini memang ditujukan untuk yang belum pernah programming, jadi memang benar-benar dari dasar.

11:44Oke, untuk materinya sudah sampai di sini.

11:49Selanjutnya kita lanjut ke pembahasan tentang CSS inline dari Ivan. Silahkan.

12:00Ya, sini semangat, sorry.

12:03Ini masih berkaitan dengan performa, karena saya ahlinya di performa.

12:09Saya nggak punya materi yang ini, jadi saya mau buka soal topic discussion aja, diskusi-diskusi topic.

12:16Yang sering kita alami ya sebagai web developer itu CSS, saya langsung gambar aja pakai framework tertentu misalnya.

12:29Tetapi penggunaannya salah misalnya, jadi contohnya pakai Bootstrap 5 misalnya.

12:37Pake apa? Bootstrap.

12:42Itu kan maksudnya kalau dipakai dengan cara yang salah ya, dipakai dengan cara yang salah itu ukurannya kan bisa gede banget ya.

12:50Bisa sampai, I don't know.

12:52Oh, 3 mega. Gak diminify ya?

12:55100 sentikilo byte contohnya ya. Saya nggak tahu tepatnya, cuma begini.

13:01Ada salah satu artikel, itu Optimize untuk LCP.

13:07Itu disarankan Largest Content Full Pay untuk loading dari sebuah situs.

13:15Saya coba cari linknya dulu ya, Optimize LCP.

13:28Saya share screen aja tadi ya, biar enak.

13:31Boleh, boleh.

13:33Share screen.

13:40Linknya saya kasih.

13:46Optimize LCP.

13:57Bentar saya kasih linknya dimana ya?

14:00Gak di sini, private chat.

14:03Jadi sedikit saja mengenai, karena saya mau nyangkutin ke bagian stylesetnya.

14:13Kan kalau LCP kita bahas minggu lalu itu kan Largest Content Full Pay bagaimana kita bisa menampilkan bagian content full art.

14:23Bagian yang terbesar dari above the fold.

14:26Jadi kalau misalnya di sebuah situs, kita ingin dari header kemudian feature image itu secepat mungkin bisa muncul ya.

14:38Kita udah bahas juga minggu-minggu lalu bagaimana strategi-strateginya untuk supaya bisa eliminate render blocking request and so on.

14:48Silahkan nanti, kalau nggak salah itu di episode 0 kita bahas itu.

14:53Nah, selanjutnya saya mau bahas sedikit mengenai inline CSS versus non-inline CSS.

15:00Seperti yang kita tahu, CSS itu render blocking ASCEN.

15:08Kalau kita link pakai style tag ya?

15:12Ya, betul. Jadi kalau link style gitu, jadi saat web atau halaman kita di request kemudian di render,

15:24browser akan menunggu CSS-nya didownload dulu, diparse baru bisa melanjutkan proses rendering.

15:32Jadi itulah maksudnya render blocking ASCEN seperti yang kita lihat di sini.

15:38Jadi, si browser itu menunggu style sit-nya kita, CSS-nya kita didownload supaya bisa dilanjutkan proses rendering.

15:50Betul. Jadi HTML secara keseluruhan memang dia baris-perbaris ya.

15:55Jadi dari sini ke header, dari header, ada muncul dia loading, berarti di sini loading font-nya.

16:02Font lagi, kemudian loading image, kemudian dan lain-lain, baru dia masuk ke bagian body terus ke bawah.

16:14Pokoknya salah satu yang disarankan adalah JavaScript kalau bisa ditaruh di bawah sebelum body tutup.

16:21Di deeper execution.

16:24Kalau kita pahami grafik ini pelan-pelan, saat HTML didownload, diparse, kemudian CSS-nya didownload.

16:35Yang ungu itu CSS dan yang hijau itu image, biasanya feature image yang biasanya menjadi LCP.

16:44Di layar siapa?

16:47Oh, bukan layar saya ya? Sorry.

16:50Sudah, sudah.

16:55Ini dokumennya, ini CSS-nya, terus ini image-nya, dan image ini kan biasanya menjadi LCP ya.

17:10Biasanya ya.

17:12Tetapi proses LCP-nya ini ke block sampai menunggu si CSS file yang besar ini selesai didownload.

17:24Ada, ada opsi, itu pertama yang kritikal CSS itu di inline.

17:32Inline berarti dimasukin ke style?

17:37Iya, betul, dimasukin ke style, jadi style tag di HTML.

17:43Jadi rulesetnya apa, deklarasinya, stylingnya di dalam style-nya ya, maksudnya inline.

17:50Jadi bukan styling, kalau styling itu kan dia ngambil dari file dari server external atau CDN didownload.

18:01Kalau inline artinya di dalam head tag, jadi style itu di dalam head tag-nya HTML.

18:10Jadi ini bukan display inline ya, maksudnya kebetulan aja namanya sama.

18:15Iya, bukan.

18:17Ada satu lagi kan?

18:19Ada yang di dalam HTML style inline.

18:21Oh, di dalam tag-nya.

18:22H1 style sama dengan itu, bukan itu.

18:24H1 style sama dengan itu, bukan juga.

18:26Bukan itu.

18:27Yang di head ya, oke, siap-siap.

18:29Betul, jadi yang terjadi, pertanyaan yang saya mau bawa.

18:36Kalau misalnya kita inline CSS-nya, tentu HTML kita ukurannya makin besar kan?

18:42Dan nggak bisa di-cache ya?

18:45Jadi nggak bisa di-cache, betul.

18:47Jadi gimana caranya strategi kita untuk develop?

18:55Sebenarnya yang above the fold, above the fold itu contohnya begini ya.

18:59Kalau misalnya saya pakai begini, berarti yang above the fold itu kan antara icon ini, style yang ada di sini sama yang ini nggak penting ya.

19:13Style yang ada di sini itu sebisa mungkin di inline.

19:18Harus secepat mungkin ya munculnya.

19:21Ada masalah yang terjadi kalau dengan inline dan non-inline.

19:29Jadi kalau lihat kita inline, dia nggak bisa di-cache oleh browser.

19:35Kalau misalnya kita lihat di network kan, itu biasanya ada CSS yang di-download tuh.

19:40Kalau kita disable cache.

19:43Nah, ini kan ada CSS-nya ya?

19:46Nah, kalau CSS ini kan biasanya sudah di-size this case gitu ya.

19:51Sudah di-case, jadinya nggak perlu di-request ulang.

19:54Tetapi kalau di-inline, dia nggak bisa di-case karena dia termasuk di halaman, di markup HTML.

20:03Ini maksudnya link ya.

20:05Nah, apa sih strategi kalian untuk menetapkan, mana sih yang perlu di-inline, mana sih yang nggak perlu di-inline?

20:15Karena kita perlu hati-hati di situ, kita tetap perlu menetapkan Leverage Browser Case karena itu penting.

20:23Karena untuk hidup kita, nggak untuk mengoptimasi Core Web Vitals untuk search engine.

20:30Salah, hidup kita, optimasi Core Web Vitals untuk user kita.

20:36User experience ya.

20:38Betul, bukan search engine experience.

20:42Jadi, kalau memang mau bagus, biasanya untuk Service Core Web Vitals bagus, inline-kan aja semua seabrek-abrek, masukin aja ke HTML.

20:52Pasti itu render blocking recourse-nya hilang.

20:57Tetapi user kita nggak senang karena yang di-download-nya, file yang sama di-download itu-itu saja.

21:05Jadi ya boros-boros kuota.

21:08Nah, ada nggak sih cara supaya menentukan itu kalian sehari-hari?

21:20Sehari-hari?

21:24Gue dulu deh. Apa ya, pokoknya kayaknya segala cara dari yang aneh sampai aneh banget sampai nggak terlalu aneh.

21:30Gue udah pernah pake semua deh, termasuk yang beneran di-inline semua di dalam style tech itu pun pernah.

21:38Cuma kan sebetulnya kerjaan developer itu trade-off banyak hal ya.

21:43Kayak tadi tuh, udah ada satu trade-off yang dibahas, trade-off antara bikin apa itu?

21:48Bikin search engine, bikin lighthouse senang, sama bikin user beneran senang.

21:53Dan kadang, ya itu punya satu propusi yang sama, sebetulnya halaman yang cepat, enak digunakan, blablabla.

22:00Tapi kadang berada prakteknya, itu kan sebetulnya mencabang kayak branching kedua hal yang berbeda ya.

22:06Kayak tadi, jadi kalau kita pengen utamain bikin lighthouse senang atau search engine senang, kita bakal di-inline semua.

22:15Sedangkan kalau kita pengen bikin user senang, ya mesti kita nggak akan menggunakan cara itu.

22:22Nah, selain itu kita juga kan sebetulnya di tim kita, kita ada mungkin product owner atau tim growth atau tim-tim lain

22:30yang punya matrix yang ingin dicapa ya, termasuk salah satunya nyambung ke search engine score tadi.

22:37Nah, terus di sisi lain, kan itu bergantung banget sama konten aplikasi kita ya.

22:42Maksudnya inline style kita misalnya semua ditaruh, style CSS kita semua di-inline ke head, kalau misalnya sebetulnya nggak terlalu banyak,

22:54nggak sampai bermega-mega gitu, dan mungkin kebetulan misalnya user kita pakai device yang nggak kuno-kuno amat

23:04atau mungkin kemampuan download data-nya nggak terlalu rendah, itu nggak cukup mengganggu.

23:11Maksudnya gangguan yang dirasakan user pun nggak cukup signifikan.

23:15Bisa aja kadang ada kasus gitu di mana gue pernah inline style semua secara apa, payload yang di-download, payload ke user pun nggak sampai ekstrim.

23:27Dan ya itu akhirnya pelan-pelan sambil dibetulin sih, jadi emang itu sebetulnya solusi sementara.

23:34Jadi itu kalau udah di lapangan sih agak susah ya kalau untuk di prescribe harus begini atau begitu, jadi kita juggling aja sebetulnya sih.

23:43Kayak art ya, kita nggak bisa semuanya satu titik gitu ya.

23:48Kita tetap harus kayak, oke kita perlu critical, berarti waktu di CSS-nya, di SAS-nya, kita perlu pisahin gitu.

23:56Oh, above default nih untuk mobile, masukin di, I don't know, mungkin kalau pakai Vue atau apa yang untuk transpile,

24:10itu kan bisa pakai apa namanya, ini transpile bisa di grouping ya, ini critical CSS, non-critical.

24:20Terus gini, kadang sih masih nyambung sama itu, kalau gue kadang sebenarnya nge-check dulu aja LCP-nya apa.

24:29Ya udah, kan kita tahu, sebenarnya kan rata-rata ya, tergantung desainnya juga, kita punya shell ya, kita punya apa sih, header,

24:37kita bisa tahu itu tingginya berapa, terus biasanya kita punya shell apa itu yang apa, container, kita tahu lebernya berapa, kita tahu tingginya header berapa,

24:48terus kita afalin aja, maksudnya kita check aja dulu LCP-nya, text-nya apa, udah itu aja yang di-inline, sisanya ya di-diver.

24:56Terus saya juga pernah, pernah juga dulu sampai, sampai extreme, di CSS-nya itu per block, sorry, per component.

25:07Per component.

25:08Jadi, iya per component, jadi kalau misalnya, oke kalau yang komponen-komponen umum, saya memang sudah block, sudah jadiin satu CSS file,

25:19tetapi kalau misalnya kayak komponen-komponen tertentu, ini saya ambil kasusnya WordPress ya,

25:24WordPress itu kan bisa dibangun pakai block-block, kan ada biasanya komponen-komponen itu contohnya apa ya,

25:33komen, komen kan paling bawah ya, kan nggak perlu di-load, CSS-nya nggak perlu di-load di atas contohnya.

25:43Terus, jadi saya biasanya grouping lagi per component, per component yang bawah-bawah yang nggak perlu gitu ya,

25:54komen lah, author profile, contohnya, atau footer, footer, footer, yang paling bawah tuh, footer, bagian footer biasanya kan,

26:04gede-gere juga ya, tentu nggak perlu di-load di awal, saya sampai pisah-pisahin tuh kecil-kecil,

26:11tapi justru pisahin kecil-kecil malah jadi lambat.

26:16Iya, karena semua harus ke-download, ke-download.

26:19Ya betul, kalau dia, meskipun katanya sudah HTTP/2 yang ngedownload bisa parallel, tetap aja ada race condition delay.

26:33Dan kalau misalnya satu file-nya ke delay, akhirnya yang terjadi adalah render blocking request.

26:41Jadi jangan juga sampai ke extreme yang pisahin per component, nggak perlu juga.

26:48Jadi kalau saya saat ini masih menganut above the fold, pisahin di grouping ke satu folder kah, atau satu endpoint, di inline.

27:00Itu saya batasi ya, batasi biasanya up to sampai 5 kilobyte sampai, ya 5 kilobyte aja, itu CSS file.

27:12Jadi kalau dia sampai 5 kilobyte hasil transparent-nya inline-kan aja,

27:18karena ya 5 kilobyte ya nggak terlalu haru-haru ya, untuk HTML-nya terlalu besar ya, 10 kilobyte pun masih fine lah gitu ya.

27:29Tetapi kalau sudah sampai kayak 40, jangan deh, mending coba prisahin lagi, masa 40 kilobyte above the fold.

27:37Kita bicara mobile first ya, mobile first.

27:39Jadi kalau desktop mah, nggak perlu mikir ginian kalau desktop, karena udah pasti kuat.

27:47Jadi sisanya CSS-nya di preload supaya lebih cepat, itu tetap perlu jadi fine.

27:55Pake library nggak sih? Sebenarnya udah ada banyak kan, ada beberapa library yang bisa otomatis nge-grab above the fold CSS.

28:03Kalau masalah kayak Next.js itu sudah otomatis ya, Next.js ada.

28:08Saya baru tahu Next.js, kayaknya library lain kayak Gatsby, maybe, I don't know.

28:14Nggak, bahkan yang Pure Vanilla JavaScript, misalnya kita masih pakai server-side framework ya, kayak Laravel, Rails, atau apapun,

28:22itu ada untuk sisi JavaScript-nya ada yang konon bisa nge-grab above the fold.

28:28Cuma belum sempat nyobain, belum pernah nyobain, jujur.

28:31Ada itu di artikel web dev?

28:35Iya, Eka baru publish ini, baru kasih. Jadi artikel-nya cukup lama juga ya, nice.

28:43Extract critical CSS.

28:45Itu kan masalah yang dari dulu ada, cuman dulu, justru mungkin karena waktu artikel ini diposting tahun...

28:54Oh ya, udah sih, orang udah banyak yang pakai Next.js pun udah banyak.

29:00Cuma mungkin kan nggak semua orang bisa pakai framework itu kan.

29:05Jadi kalau ini ada beberapa solusi yang masih JavaScript atau webpack lah, apapun yang berbasis webpack.

29:13Cuma emang kalau framework modern, kelihatannya udah lebih segala ada ya, kayak Next.js.

29:19Ya, kayaknya emang dia handle itu. Dan remix, waktu itu gue inget remix.

29:24Terusnya itu cukup menarik, kita di setiap halaman atau di setiap layout, nested routes apapun itu,

29:32ada tag khusus untuk nambahin CSS dan nggak tau lah, pokoknya library-nya remix itu secara otomatis nge-handle.

29:41Jadi waktu kita buka satu halaman yang di-load adalah hanya CSS yang hanya style yang ada di halaman itu.

29:49Nah, kalau misalnya kita pindah ke halaman lain, dan itu kan mereka udah intercept pakai client-side router mereka punya remix.

29:56Nah, dia bisa meng-calculate sendiri style apa yang ada di halaman kedua itu, halaman baru itu, di-inject ke CSS-nya.

30:06Jadi emang dia udah smartly nge-handle berdasarkan isi halaman, dan kelihatannya ya handle above default juga.

30:15- Oke, wah ini seru ya. - Sedikit melenceng, CSS in JS masih in nggak sih?

30:22- Masih, masih, masih. - Masih ya?

30:24- Masih. - Walaupun lebih banyak yang loncat ke Tailwind ya sekarang, cuma kan ya gitu.

30:31- Seru nih. Nah, maksudnya... - Tailwind versus...

30:36Versus lainnya, versus the world.

30:39Ya, jadi kayaknya kalau di-establish companies atau organizations kan ya itu nggak mungkin semua yang teranjur pakai style components atau emotion

30:48tiba-tiba udah rewrite semua ke Tailwind, ya kan? Nggak mungkin kayak gitu.

30:52Jadi sebetulnya di lapangan pasti masih banyak banget yang pakai emotion dan temen-temennya.

30:59Dan meskipun nanti ke depannya banyak framework seperti Next.js atau remix dan lain-lain sudah meng-handle ini di belakang layar,

31:08kita tetap harus tahu, karena suatu saat ya kita bisa ketemu masalah di sini dan kalau kita nggak tahu ini, ya.

31:15- Bisa berabih juga. - Bingung.

31:18- Loh, kok ini bisa di above default, bisa tiba-tiba muncul di atas gitu. Dari mana ini, ya kan?

31:23- Dan framework, apa sih, automation bawaan dari framework kan nggak selamanya akurat ya, namanya mesin mah bisa-bisa aja salah.

31:31- Iya, dia kan hanya mengantisipasi atau menebak, gitu kan. Kira-kira ini...

31:36Tidak kan antara implementator, kalau saya menyebut yang hanya tahu pakai tertentu, itu implementator.

31:45Dan web engineer yang oke, memang tahu, oh, cara terjadinya begitu, saya pakai framework ini, cocok nih, bisa, gitu.

31:54Dan bisa mengimplementasikannya. Jadi kalau ada masalah, tahu tuh, oh, bisa di-debug ke mana harus di-debug.

32:01Biasanya yang menentukan career-nya yang menelijik adalah yang tahu fundamental.

32:07- Asik tips career ini. Yang tanya career tadi siapa tuh? Yang tanya Riknyas tuh tadi. Ini ada tips.

32:15- Yaitu yang tahu cara kerjanya, ya. - Ada nggak yang tahu cara kerja bagaimana web vital itu dihitung?

32:29- Di Lighthouse kan, open source kan. - Iya, tapi ada yang buka nggak?

32:36- Enggak, ingat tuh dulu pernah ngebuka cuma pengen tahu device yang dipakai apa, bener nggak sih.

32:43- Motorola G4 kan ya? - Oh iya, Motorola. Eh, Motorola G4.

32:49Jadi dulu kayaknya ada masalah gara-gara belum update browser atau apalah, Lighthouse-nya jadi updated.

32:56Ternyata hasilnya lain gitu. Terus akhirnya ngecek karena penasaran, ngecek ke source code-nya Lighthouse.

33:03Cuma buat cari tahu device apa yang dipakai buat simulate.

33:08- Yes. Oke, ada lagi dari Ivan? - Itu dulu, nanti kita lanjut ke yang performance observer setelah si Eka aja.

33:22- Oke, berarti sekarang gilirannya Eka tentang container queries.

33:27- Tentang container queries, masih CSS. - Itu baru tuh.

33:31- Nah, ini nih. Waktu kita ketemu di Bali ya, waktu itu kita kayaknya bahas ini deh bentar. Apa?

33:38- Yay, akhirnya launching. - Terus gue bingung, apa itu container queries?

33:47- Nah jawaban dari apa itu, ya scroll aja sedikit ke bawah, kita lihat gambarnya aja.

33:53Jadi buat temen-temen yang penasaran itu apa, baca sendiri aja ya artikelnya, kalau pengen detailnya.

33:59Cuma kalau sekilas adalah intinya kan CSS kita selama ini punya media query ya.

34:05Add media, terus diapit tanda kurung, parentesis, terus kita tulis deh kondisionalnya sesuai kebutuhan kita.

34:13Misalnya add media dalam kurung main width 1024px, berarti apapun yang di dalam curly brackets itu,

34:23tanda kurung-kurawal itu akan di aplikasikan, stylesheetnya akan di aplikasikan kalau kondisi itu terpenuhi.

34:32Nah oke itu udah membantu banget, tapi masalahnya media queries itu kan cuma buat ukuran viewport.

34:39Viewport itu besar ukuran layar yang muncul di device user.

34:48Nah media queries itu kekurangannya apa, karena kalau misalnya kita bikin komponen UI,

34:55itu kan bisa diletakkan, kita layoutnya tuh bisa macem-macem.

34:59Misalnya product card nih, tampilan product bisa ditampilin di sidebar tuh, kayak digambar di contoh yang sebelah kiri warna ungu.

35:07Itu kan ditampilin di sidebar, jadi walaupun viewportnya ukuran besar itu dibuka dari desktop,

35:16tapi komponen itu sendiri ditampilkan di container atau di layout yang ukurannya kecil.

35:23Nah selama ini CSS itu belum mampu menghandle, dan ini sebetulnya salah satu feature CSS yang paling banyak di request.

35:32Jadi pas lagi baca-bacain ini, nemu talk CSS Conf dari tahun 2018.

35:40Nah ini talknya, kocaknya, oleh mas Philip Walton yang tadi kayaknya sekilas ada di artikelnya Ivan juga deh.

35:47Jadi beliau emang udah aktif per CSS-an dari kapan tau.

35:51Jadi CSS Conf di 2018 itu beliau ngomong tentang container queries dan kocaknya lagi.

36:00Itu ngebahas sejarahnya, latar belakangnya apa itu container queries CSS.

36:05Ini tahun 2018 ya, dan dia bilang bahwa, wah ini feature yang dari dulu di request dan goes back to sekitar 2013.

36:14Orang udah pada nge-request, udah pada menyuarakan tentang kebutuhan akan container queries, kenapa media queries tidak cukup, blablabla.

36:24Itu 2013 doang bayangin, dan akhirnya sekarang 2022, 9 tahun kemudian, stable, ya lumayan lah.

36:31Jadi itu historinya, dan saat itu sih di tahun 2018, conclusion-nya adalah belum bisa dicapai.

36:40Tapi dia ngasih beberapa tips atau beberapa cara work around untuk mendapatkan hasil yang sama.

36:50Cuma untungnya sekarang di tahun 2022 kita udah bisa dapet feature itu.

36:56Jadi itu contoh penggunaannya bisa dilihat.

37:00Kalau nggak salah pakai itu ya, resize observer sama mutation observer.

37:04Iya betul sekali.

37:06Jadi bisa diakali dengan JavaScript, ya cek aja kalau element itu direcise, berarti ngetrigger styling yang...

37:17Ya bisa add class, add class, remove class mungkin.

37:22Ya standard lah, akal-akal anwantir standard.

37:27Nah, cuma karena sekarang sudah di-launch, sudah jadi bagian dari web API yang diimplementasikan oleh browser.

37:35Browser support juga cukup bagus, jadi intinya hampir semua major browser kecuali Firefox.

37:42Ini tuh semua nggak bisa kompak giliran Firefox implement, Safari nggak, Chrome Edge, Firefox kadang Safari nggak.

37:52Nah sekarang nih Chrome Edge, Safari, Firefox nggak.

37:57Tapi jangan sedih buat yang pengen pakai nih, udah ada Polyfill, Polyfill-nya bagus.

38:03Polyfill-nya ya yang tadi dibahas itu.

38:05Jadi Polyfill-nya adalah workaround yang di-propos oleh mas Philip Walton di tahun 2018 itu.

38:12Yang tadi sekilas dibahas oleh Ivan.

38:15Nah itu udah dibuat dalam bentuk package yang bisa di-install.

38:21Jadi itu, mungkin pindah tab ke yang tadi lagi?

38:25Boleh, ke mana kata?

38:27Nah, scroll ke bawah.

38:28Oh ini Polyfill-nya.

38:30Nah itu dia, jadi kalau misalnya pengen pakai Polyfill itu, bisa langsung install.

38:38Udah ada library yang tinggal plug and play aja dan support-nya cukup lumayan sih.

38:42Firefox, Chrome, Edge, Safari.

38:45Bisa langsung, bisa langsung ke CSS-nya nggak? Atau perlu...

38:48Ya nggak, itu kan library JavaScript, ya di-install aja itu.

38:55Oh, Edge Supports ya?

39:00Oke.

39:02Nah terus ini topik juga, ini masih terkait nih.

39:05Sekarang giliran gue yang tanya, kalian atau temen-temen yang lagi ngedengerin juga bisa nge-reply di chat.

39:11Apa yang kalian lakukan kalau nemu kayak gini nih, hal-hal feature-feature baru yang oke banget?

39:17Ini kan relevan ya, maksudnya ini hal yang cukup, ini hal yang relevan banget.

39:21Kalau kita bikin component UI, ini berguna. Ini oke lah, kita udah senang pengen pakai.

39:26Tapi tadaa, belum bisa, browser support-nya belum merata.

39:32Nah kalian gimana, nggak usah pakai sama sekali, udah ntar-ntar aja tunggu dulu.

39:38Atau pakai Polyfill, Polyfill dengan konsekuensi ya sedikit, walaupun sekecil apapun kan,

39:44menambah package yang harus di-install ya, menambah JavaScript runtime juga.

39:50Atau mungkin hand roll, bikin pakai kan CSS, ada add support square itu.

39:57Jadi kita manually bikin styling untuk CSS yang belum support, atau bagaimana? Coba.

40:06Tergantung target audience-nya. Kalau target audience-nya cukup modern ya.

40:16Browser-nya update terus, rasanya perlu. Dan tergantung juga dengan aplikasi yang mau dibuat.

40:26Kalau misalkan nggak butuh-butuh banget, bukan critical, bukan sesuatu yang terlalu critical,

40:32ya nggak usah dipakai. Tapi kalau misalkan, wah ini dinamis banget nih, kayak misalkan apa ya?

40:38Pinterest misalkannya, card-nya ditambahin terus dia berubah posisi dan lain-lain gitu, ketika butuh itu ya

40:47mungkin Polyfill bisa menjadi jalan tengah untuk sementara, sampai akhirnya di-support secara full.

40:54Kalau saya, pengalamannya gini, lihat dulu nih, API yang saya senang itu sudah menjadi standard belum.

41:02Jangan-jangan kalau masih draft atau trial, yang masih belum tahu nasibnya gimana, jangan dulu.

41:11Contohnya yang kemarin minggu lalu, transition API, saya nggak mau implementasi, belum rani.

41:18Iya itu ada warning-nya juga kan emang, di halamannya. Hati-hati kalau pakai ini pasti akan berubah.

41:25Kalau ini, kalau ini? Kalau ini, saya baru saja woro-woro, saya hijau ke tim, yuk kita mulai implementasi CSS content.

41:34Meskipun Firefox belum ada?

41:37Saya mau relate ke itu, Polyfill. Kebetulan, kebetulan, project yang sedang saya pegang berdasarkan data analytics-nya,

41:49Firefox itu menduduki top 8 yang cuma sekitar 3% traffic.

41:57Jadi terbesarnya itu Chrome, Safari, dan Edge terbesarnya.

42:10Jadi kayak top 5, top 6-nya itu Chrome, Safari, Edge. Bahkan Chrome Mobile, Safari Mobile, Chrome Desktop, Safari Mobile,

42:27baru kemudian Edge, Edge Mobile, dan Edge Desktop. Baru kemudian Opera, baru Firefox.

42:41Itu dari data hasil analytics ya. Jadi dengan demikian, sayang juga nggak mau pilih-pilih kalau kecil banget 3%, nggak boleh juga.

42:52Harus di-serve semua kan? Harus di-serve semua. Jadi saya bisa mungkin, kalau ada Polyfill-nya, saya lanjut.

42:58Contohnya yang ini, saya green light, implementasi. Nanti ujung-ujungnya pakai Polyfill. Harus.

43:08Tetap harus ada notes nanti dibuat. Kalau nanti Firefox sudah support.

43:17Jangan lupa remove Polyfill-nya. Kode yang ini di-remove.

43:22Nah, itu cara kita catch up dengan, itu gimana? Nungguin Firefox-nya hijau. Gimana trick-nya?

43:31Sekarang trick-nya saya kayak cuma ada mental aja ya. Remember aja, nanti gimana? Nunggu aja kayak 2 bulan.

43:43Gak ada ditaro di sticky note gitu ya.

43:48Di apa? Di JIRA.

43:51Gimana sih?

43:53Iya sih, so far implementasi aja dulu. Karena kalau Polyfill, meskipun dia sudah ada,

44:02kalau Polyfill-nya pintar, kalau dia sudah ada, dia nggak bisa menjalani lagi kan?

44:07Dia nge-check. Ya, cuma kan kalau mau itu banget, kalau mau irit banget performance budget-nya,

44:14kan ya gimana pun dia runtime dikit.

44:17Tetap loading.

44:19Tetap loading buat nge-check support.

44:23Nah, ini ada pendapat menarik nih dari Devi.

44:27"You're missing the whole point of progressive enhancement. If you think you need to wait for wide browser support."

44:37Nah, ini oke ya. Maksudnya mungkin karena web itu kan platform yang apa ya, dinamis banget dan diverse.

44:47Kayak beda-beda banget kan? Nggak mungkin kita nunggu semua browser setuju buat mengadopsi suatu feature.

44:55Semua user pakai browser yang sudah support, yaudah, kayaknya kita nggak bakal ada apa-apa-apa udah.

45:02Bahkan saya kalau untuk decide untuk pakai atau tidak, yang penting API-nya secara web standard sudah approve bersama,

45:12secara konsersium sudah approve. Tapi kalau yang masih baru diajukan, masih trial, no, nanti dulu deh, jangan dulu.

45:22Kalau mau coba-coba, silahkan. Itu wajib untuk dicobakan di feedback.

45:26Apalagi kita pada GDI yang diminta untuk mencoba-coba hal tersebut.

45:32Dan membagikannya kepada teman-teman yang lain biar juga tahu.

45:37Dan mungkin kadang kita mesti agak, apa ya, kan mungkin kalau desainer visual ya yang terbiasa dengan,

45:46kita sebagai developer kan mindset-nya agak beda dengan desainer visual yang mungkin latar belakangnya dari cetak atau apalah yang harus pixel perfect banget.

45:56Nah, mungkin mindset-nya kita harus bisa ngomunikasiin mindset juga ya.

46:01Jadi misalnya kasus tadi tuh 97% sudah bisa, sudah bisa dapat full experience, full ideal experience.

46:12Ya, anggap lah misalnya belum ada polyfill-nya. Mungkin kita bisa mengakalin pakai supersquare buat modifikasi sederhana.

46:20Jadi tujuannya mungkin 1% atau 2% user kita nggak bisa dapat desain yang ideal, pixel perfect seperti yang diinginkan.

46:32Tapi kita mestiin info yang mereka butuhkan bisa dibaca, bisa diakses.

46:37Ya, kadang ada kalanya kita mesti ngakalin kayak gitu. Nah, sebagai developer mungkin kita harus bisa mengkomunikasikan itu dengan baik ke misalnya desainer di tim kita kali ya.

46:49Karena kalau desain, cetak, ya kan kalau cetak pasti semua hasilnya gitu.

46:55Kita tinggal pesan kertas, jenis kertas apa bisa dipastikan semua sama.

46:59Tapi kalau web, device yang dipakai seluruh user kita buat mengakses kan nggak bisa di-streamline se-gampang itu kan.

47:07Saya punya pengalaman harus support IE11.

47:13Waduh.

47:15IE11 dikarenakan jadi di sebuah bank, international bank saat itu. Kan biasanya kalau user-nya mereka, bukan sorry, user-nya pengguna sistem artinya pegawai bank ya.

47:35Jadi bagian konten segala macam itu. Kan mereka menggunakan laptop yang dikasih dari kantor.

47:43Ya, dan kalau sudah bank kan security-nya ketat ya. Nggak bisa install apa-apa. Itu dikontrol semua dari pusat.

47:50Dan browser-nya masih IE11. Gak bisa install Chrome, nggak diperbolehkan.

47:57Tetapi target user yang public itu top 3 browser semua.

48:05Moderen semua. Jadi kita harus support IE11 supaya user yang pakai di internal bisa menggunakan sistem yang kita pakai.

48:17Karena UAT-nya mereka. Mereka nggak bisa UAT pakai top 3 browser.

48:24Gimana coba?

48:27Dua versi. Kisah. Yang kalian pakai file CSS yang di-load berdasarkan user engine.

48:35Itulah suka-dukanya jaman itu.

48:39Wah jadi ingat jaman dulu tuh ada web pencari kerja, portal pencari kerja, yang hanya support IE sekian.

48:47Oh iya, saya tahu itu.

48:51Malah kebalik ya. Bukan IE yang tidak disupport, tapi harus IE. Nggak boleh yang lain.

49:01Karena dia teknologi pakai .NET salah satunya.

49:05Beberapa tahun lalu di sebuah urusan untuk SIM card gitu lho.

49:17Saya lihat mereka untuk, itu lho kayak salah satu provider telekomunikasi.

49:25Jadi bagian customer service-nya untuk melakukan back office sistemnya dia itu harus pakai IE karena masih menggunakan ActiveX.

49:34Beberapa tahun lalu sih. Intinya back to ini, bagaimana bisa tetap memberikan support terbaik terhadap internal bank,

49:54tetapi juga harus ikut modern ininya. Jadi di tooling-nya sistem kita juga harus kayak kan bisa pakai browser revise segala macam itu untuk,

50:06eh sorry, apa namanya? Ada untuk...

50:10Browser list ya?

50:12Ya browser list, betul.

50:14Dan waktu di compile, transpile kita harus tetap memasukkan IE 11 itu sebagai salah satu yang kita cek.

50:22Linternya kita juga kita cek. Jadi tetap harus ada. Bahkan di stylesheet-nya kita itu satu folder khusus IE 11, support IE 11 support.

50:34Tetap harus di support.

50:36Kita lah, suka-dukanya web development.

50:42Kita tetap ingin maju cepat, tetapi kita harus lihat ke belakang.

50:46Tetap mau adopsi latest technology, tetapi nggak boleh meninggalkan yang...

50:59Old technology, not so latest technology.

51:02Tetapi tetap harus ada ini ya, harus ada baseline yang ditetapkan, perjanjian bersama.

51:10Tetapi sekarang project-project baru, project baru kita langsung bilang, nope, IE 11 is no more.

51:19Karena sudah mati, sudah nggak di support juga kan, sama Microsoft, pindah.

51:26Jadi biasanya kan Windows 10 sama Windows 11, kalau sudah service pack kesekian, itu sudah IE 11-nya udah nggak ada kan, udah ganti edge kan.

51:39Jadi sudah biasanya dipengaruhi itu.

51:44Kalau laptop-laptop baru dari meskipun dia corporate, kalau dapatnya Windows 11, udah pasti edge kan dapatnya.

51:54Jadi sekarang kita kasih baseline, yang di support adalah browser dan 3 versi terakhir.

52:063 versi terakhir, perjanjiannya kalau iOS, sorry, Safari 16 misalnya.

52:14Berarti sampai 14 kita harus support, wajib.

52:20Terus itu pentingnya kita collect analytics juga kali ya.

52:25Contohnya analytics kan emang kalau nggak di handle dengan baik, bisa disalahgunain dan mungkin kita atau publik yang awam tuh lebih sering dengar tentang hal-hal negatif lah.

52:38Hal-hal negatif dari analytics kan, jadi sering dianggap sebagai sesuatu yang buruk atau cuma bikin lambat aja.

52:46Tapi di sini kita bisa lihat pentingnya analytics, kita tahu device apa aja yang dipakai oleh user kita.

52:56Dan kita bisa optimize experience-nya dan itu bisa jadi bahan buat kita nentuin mau menggunakan suatu API atau nggak.

53:07Jadi kepikiran kalau di analytics kita misalnya nih, misalnya, gue langsung kepikiran tidak nih.

53:19Contohnya kita kan bisa ngedetek pakai JavaScript apakah suatu API tertentu ada atau tidak gitu ya.

53:29-Navigator-nya aja semua. -Contohnya ada sebuah, kita mau lakukan field analysis.

53:42Field analysis itu artinya kita mau ngetes di user kita itu datanya cukup mendukung atau tidak.

53:48Contohnya kita mau apa sih API yang baru? Fugu, contoh file system misalnya, file system API.

54:06Kita kan bisa ngedetek pakai JavaScript kalau si browser itu support file system API atau tidak.

54:12Jadi kita juga bisa, sebelum menentukan kita harus pakai atau tidak, kita harus buka analytics.

54:19Analytics ada data-nya ada atau tidak? Kan kita tidak bisa melihat langsung.

54:22Kita kan cuma bisa lihat top 10 browser bisa kita lihat, tapi apakah browser itu support atau tidak kita belum tahu.

54:30Jadi bisa kita juga lakukan send data pakai analytics atau GTM contohnya.

54:36Kita ngedetek aja itu si API tersebut ada atau tidak. Kita send datanya ke GTM, kita collect data misalnya 2 minggu atau sebulan

54:50dari data yang kita punya kita dapat user kita, berapa persen sih yang sudah support file system API?

55:01Baru kita bisa implementasi. Jadi sebelum warung-warung kita pakai, justru kita pakai tidak, cek dulu.

55:13Pakai aja analytics, kirim ada dari JavaScript, collecting data sebulan mungkin.

55:19Mungkin data cukup sebulan atau 2 minggu terserah, dari situ berapa persen yang support API baru

55:27yang kita ingin implementasi itu sudah ada atau belum.

55:31Kayak can I use tapi khusus untuk user kita aja gitu ya?

55:35User kita, betul.

55:37Yang gue pernah malah itu sih semacam soft launching feature, itu kan bisa dipakai misalnya feature itu ada geolocation-nya.

55:45Nah kan pertama sebelum munculin, ya sebelum ngerunning, cek dulu kan if geolocation in navigator.

55:52Itu untuk ngecek kalau di support atau nggak, kalau di support ya munculin feature itu.

55:58Kalau nggak, apa di else-nya kan kita bisa kirim event juga.

56:03Ya udah, itu salah satu bentuk soft launching.

56:07Kalau yang support dikit ya udah, berarti kan nggak terlalu worth it. Belum.

56:13Jadi menarik tuh untuk dibahas nanti di sebuah DevFest. Gimana sih kita lakukan field report atau dari report dari user kita

56:23sebelum kita menentukan, decide untuk menentukan adomsi teknologi terbaru.

56:27Ya kalau yang caranya Eka itu kan udah di develop kan, udah di develop baru di cek kan apakah ini support atau nggak.

56:34Udah tapi MVP-nya doang.

56:36Sebelum kita decide untuk pakai, kita cek usernya dulu, apakah usernya udah support.

56:43Terus abis itu dibikin model prediksinya, kira-kira dia akan support berapa bulan lagi, berapa tahun lagi.

56:51Masin learning, over thinking, penyakit develop.

56:58Ide-nya bagus tuh, ide-nya menarik.

57:01Boleh gue berpikiran setelah ngobrol begini, asik ya.

57:06Loh nggak, apa kalau mau iseng nih, ya udah pas lagi baru loading, cek aja di navigatornya misalnya bikin satu objek nih.

57:15Apakah geolocation in navigator, apakah misalnya add to home screen ada, apakah web RTC ada, kumpulin jadi satu objek, stringify, kirim.

57:26Ya hati-hati soal GDPR, belum.

57:29Oh iya, gitu.

57:31Kalau kita ambil data itu.

57:34Ya kan itu asal anonymize.

57:37Jadi kalau kan GDPR ada aturannya sendiri, terus California kan di Amerika khusus California juga ada.

57:45Jadi ya pastiin kita tetap ngikutin aturan yang dilakukan.

57:49Itu ngaruhnya ke personally identifiable information.

57:54Nah apa, pastiin misalnya cookiesnya nggak ikut dikirim ya, cookiesnya nggak diinclude.

57:59Atau misalnya kita pakai apa itu yang bawaannya AWS, Cognito.

58:03Atau apalah ya service apapun yang buat ngacak dan menghilangkan personally identifiable information dari data yang kita kirim.

58:12Karena maksudnya kalau yang kasus tadi kan tujuan kita pingin dapat gambaran besar tentang seluruh user base kita.

58:19Bukan satu persatu tapi seluruh user base, berapa persen yang support geolocation, berapa persen yang support WebRTC atau apapun itu.

58:28Jadi tetap, ya harus hati-hati, tetap hati-hati tapi bisa, bukannya nggak bisa juga.

58:33Ini biasanya tugas kayak dari sisi high level kali ya, jadi kita pingin datanya.

58:39Terus menentukan next feature yang akan kita launch itu berdasarkan adopsi user kira-kira ke depannya.

58:49Ya kalau kita terlalu cepat adopsi sebuah feature tapi user yang belum bisa pada pakai ya percuma juga kan.

58:55Mending sampai threshold tertentu baru di develop.

58:59Jadi secara investasinya lebih tepat waktu dan tepat guna.

59:06Walaupun memakan waktu lebih panjang ya.

59:10Harus reset dulu.

59:12Begitu resetnya selesai ternyata si user-user nya.

59:16User nya pas udah update.

59:20Oke, menarik, menarik.

59:24Oke nextnya, ada yang mau di share lagi dari Eka mungkin?

59:30Enggak, udah dulu.

59:32Tentang TypeScript error?

59:36Oh iya ini, ada bonus konten, sampai lupa.

59:41Jadi kan kalau kita pakai TypeScript itu suka ada error yang agak kriptik ya, agak terlalu poetis.

59:49Agak kurang praktikal, maksudnya kita nggak secara langsung tahu itu maksudnya apa.

59:55Nah ini ada website yang mengumpulkan error itu dengan penjelasan yang lebih mudah di mengerti oleh pengungsinya.

1:00:06Coba di klik.

1:00:08Static modifier cannot be used with abstract modifier.

1:00:12What? Kadang apaan coba itu maksudnya.

1:00:16Tapi ini di sini dijelasin itu maksudnya apa.

1:00:19Jadi mungkin kalau kita nemu error yang kita sulit pahamin, coba aja dicek di situ.

1:00:28Oke, oke, mantap.

1:00:30Tapi saya penasaran, soalnya beberapa waktu yang lalu waktu di acaranya, di meet up-nya Jakarta JS, itu sempat nanya,

1:00:38ini kalian masih nulis JS apa udah ke TypeScript, udah ke TS?

1:00:42Ternyata masih banyak juga yang menulis JavaScript ya.

1:00:45Ya itu tadi. Itu tadi di dunia Jakarta nggak mungkin semua langsung error.

1:00:53Sama mungkin kalau terutama kalau di tim besar, mungkin nggak segampang itu dapetin buy-in untuk meng-convert suatu codebase.

1:01:02Ya, konversinya memang, walaupun TypeScript cenderung lebih mudah dibandingkan bahasa yang lain ya seperti rescript atau elm lebih parah.

1:01:13Ini sebenarnya bisa pelan-pelan sih adopsinya maksudnya integrate ke TypeScript, pakai TS config.

1:01:21Tapi kita ignore aja dulu JS-nya kan.

1:01:24Kalau JS kan kayaknya by default nggak diproses oleh TypeScript ya, kecuali kita configure apa itu allow JavaScript.

1:01:32Sebenarnya bisa, cuma ya itu kalau tim besar, mungkin birokrasi ribet atau apa lah nggak segampang itu langsung di...

1:01:39untuk mengubah suatu codebase.

1:01:45Oke, kemudian dari Ivan ada PWA Summit.

1:01:51PWA Summit. Kapan ya caranya?

1:01:54Besok ya?

1:01:55Besok, tanggal 5.

1:01:57Ya besok. Gua ada di kalender jadi nggak tau. Besok.

1:02:00Ya, register aja for free.

1:02:02Jam 4 sore ya?

1:02:04Jam 4 sore.

1:02:05Jam 8 malam.

1:02:07Tumpen jamnya enak.

1:02:09Iya, jam 9 pagi.

1:02:13Karena Eropa kali ya, kalau Amerika kan jamnya lebih sulit.

1:02:18Ini Eropa Eropa, jadi jam 9 pagi di sana.

1:02:20Kalau jam 9 pagi mereka ya kita masih oke lah, masih sore.

1:02:25Register aja free?

1:02:27Free, online dan kira-kira ada materi yang ditunggu nggak, yang menarik?

1:02:35Workshop mana? Kalau masih pengen mulai getting started ya untuk workshop, boleh.

1:02:44Kalau Ivan sendiri tertariknya kemana?

1:02:47Itu yang Modern PWA Winning Combo for Best Client Experience pengen menarik juga soal studi kasusnya.

1:02:55GDI juga ya?

1:02:59Betul.

1:03:01GDI, dia kerjanya di Intel?

1:03:03Oke.

1:03:05Intel Indonesia atau Intel USD?

1:03:09Kayaknya dia Eropa ya.

1:03:15Kalau Intel Indonesia kan itu, katanya masak nasi goreng gitu ya.

1:03:21Masak nasi goreng, oh iya.

1:03:23Maksudnya sekalian gitu.

1:03:25Katanya, katanya.

1:03:27Oh iya, yang pakai HT gitu kan.

1:03:32Winning combo, menarik.

1:03:35Terus apa lagi ya, kira-kira menariknya?

1:03:38Itu banyak loh getting started with PWA workshop itu banyak, itu diulang orangnya berbeda.

1:03:44Jadi silahkan, silahkan ikuti yang mana mau gitu loh maksudnya.

1:03:49Yang paling cocok.

1:03:51Yang paling sesuai, betul.

1:03:53Karena ini fokusnya kayaknya supaya membangkitkan lagi orang supaya awalnya kayaknya masuk PWA.

1:04:01PWA terus nggak bisa masuk karena webnya makin lama, makin berat, makin banyak JavaScript.

1:04:08Terus akhirnya call web fighter dulu, baru sekarang balik lagi PWA.

1:04:12Progressive Enhancement.

1:04:14Progressive Enhancement.

1:04:17Itu tuh emang kalau misalnya terlalu banyak JavaScript.

1:04:21Oh iya, nggak bisa ya, nggak muncul itu homescreennya ya.

1:04:25Kalau misalnya suatu, jadi semua situs atau aplikasi web itu sebenarnya bisa jadi PWA.

1:04:32Tapi dia harus memenuhi kriteria tertentu, berarti yang jadi barrier secara nggak langsung.

1:04:38Yang jadi halangan adalah memenuhi kriteria-kriteria itu ya harus responsif.

1:04:44Harus ada service worker minimal buat handle 404 kalau offline di halaman utama ya.

1:04:52Iya, betul.

1:04:56Oke, udah satu jam kita ngobrol.

1:05:00Banyak ide berseliwaran, jangan lupa dicata.

1:05:04Jangan sampai lupa.

1:05:05Ada yang tanya nggak di Slido?

1:05:07Ada yang tanya di Slido.

1:05:10Tak ada.

1:05:12Apakah mempelajari core web fighter meningkatkan apa itu?

1:05:16Kesempat anda berkerjaan?

1:05:18Ya bisa, coba iya dan tidak juga itu.

1:05:23Bisa banget bisa jadi selling point.

1:05:29Menaikan revenue ya.

1:05:32Oke, kalau gitu mungkin untuk malam ini episode kedua kita sudahi dulu saja.

1:05:38Sebelum udahan mungkin dari teman-teman ada yang mau share sosial medianya silahkan.

1:05:46Kalau saya bisa share ke twitter.com/rizafahmi22

1:05:51Kalau yang lain?

1:05:53Ke twitter.com/ivanchris.com saja.

1:05:56Ivanchris.com

1:05:59D-O-T ya.

1:06:00E-K-F-Y-I.

1:06:02Gak pernah buka ya.

1:06:04Oh, gak pernah.

1:06:06Oke, kalau gitu silahkan di follow.

1:06:08Minggu depan bahasa apa?

1:06:09Ini ada pertanyaan nih. Minggu depan bahasa apa kita?

1:06:11Minggu depan bahasa apa ya?

1:06:13Ada ide nggak Mas Lucky?

1:06:15Ada yang mau request bahasa apa?

1:06:18Kita ada topik menarik tentang apa ya?

1:06:23Ya itu best content PWA summit.

1:06:27Itu ya summary ya?

1:06:30Bisa bisa.

1:06:32Oh ya, kalau teman-teman ada ide, silahkan langsung lempar ide nya.

1:06:38Topik minggu depan mau bahasa apa?

1:06:40Kita masih ada waktu sekitar 5-6 hari untuk berembuk, untuk bahas topiknya.

1:06:47Jadi kalau ada suggestion, silahkan ke beat.ly/ngobrolinweb.

1:06:53Nanti kalau sarannya menarik, kita akan angkat menjadi topik.

1:06:58Oke, kalau gitu terima kasih buat semuanya.

1:07:01Terima kasih.

1:07:02Terima kasih buat teman-teman, terima kasih buat Eka dan Ivan yang sudah menemani juga.

1:07:06Sama-sama Mas Riza.

1:07:08Kita ketemu lagi minggu depan di jam yang sama, di hari dan jam yang sama.

1:07:13Selamat malam, selamat istirahat.

1:07:15Dadah.

1:07:16Selamat malam, bye.

1:07:17Bye.

1:07:18Mari kita inburn kes.