Ngobrolin DevTools - Ngobrolin WEB ep38

1:16lagi mas Danang kita kapan ke Bali lagi

1:18hahaha

1:20hahaha

1:22setahun berapa episode berarti?

1:24seminggu 4, 50 sekian

1:2654 pastinya

1:2854, oh iya

1:301 tahun 54 minggu

1:32oke, oh berarti bentar lagi ya

1:34iya, jadi ada acara

1:36ada usul gak temen-temen semua

1:38kalau 54 itu kita

1:40topik apa, acara apa, potong kue

1:42atau gimana gitu

1:44mungkin kita ketemuan bertiga

1:46potong kue, maybe

1:48ide bagus tuh buat ketemu

1:50offline gitu ya, atau

1:52misalnya undang temen-temen buat ngobrol bareng

1:54jadi semuanya diundang ke StreamYard

1:56kesini, kuat gak ya?

1:58atau ke Discord kali ya?

2:00mana aja deh, bisa gak dari

2:04dari StreamYard

2:06atau Discord kita broadcast gitu

2:08bisa gak ya, oh bisa bisa bisa

2:10bisa ya, bisa

2:12kalau StreamYard saya gak tau maksimumnya

2:14berapa peserta, berapa

2:16narasumber gitu ya, berapa orang

2:18mungkin 8 maksimum, tapi kalau

2:20di Discord kan bisa banyak ya

2:22jadi mungkin di Discord, di broadcast ke itu

2:24nantilah kita ngobrolin sama

2:26temen-temen

2:28GDG dan GDE yang

2:30di Discord kali ya, buat

2:32make sure, bisa apa enggak

2:34oke, sambil menunggu

2:36bintang tamu satu lagi

2:38yang paling cantik, diantara kita bertiga

2:40kita malam ini

2:42akan ngobrolin tentang DevTools

2:44kalau temen-temen

2:46web developer pasti

2:48sehari-hari berkutat dengan ya pasti

2:50kode editor sama

2:52biasanya Chrome DevTools

2:54kalau saya sama satu lagi

2:56itu nya

2:58kitab sucinya MDN

3:00MDN

3:02kitab sucinya

3:04dokumentasi ya

3:06iya

3:08kitab suci

3:10warga web dev

3:12iya, itu salah satu

3:14apa ya, salah satu yang unik juga

3:16kenapa JavaScript tidak ada

3:18dokumentasi resmi

3:20dari JavaScript nya

3:22oh iya, karena

3:24iya kan, maksudnya MDN kan punya

3:26Mozilla kan, gitu kan

3:28punya salah satu browser kan, bukan resmi

3:30javascript.com misalkan, atau

3:32golang.com atau

3:34apa gitu kan, itu alasannya

3:36beda loh

3:38antara JavaScript API

3:40dengan web API beda loh

3:42oh iya, beda, beda, tapi kan

3:44di MDN juga ada JavaScript

3:46API kan

3:48iya, ada

3:50JavaScript documentation untuk penggunaannya

3:52ada, betul

3:54ada web API nya juga kan

3:56jadi, udah gabung semua disitu kan

3:58yang mungkin

4:00awal-awal

4:02terutama saya bingung itu, waktu

4:04belajar JavaScript pertama kali

4:06ya dokumentasi resminya kok di MDN ya

4:08atau belajarnya di

4:10waitresschool ya, gak ada

4:12iya, kalau misalkan PSP kan ada

4:14PSP.net, gitu kan

4:16dokumentasinya ada disana, gitu kan

4:18Laravel, Laravel.com

4:20iya, itu kan framework ya

4:22framework, React dan lain-lainnya pasti ada

4:24tapi JavaScript ini gak ada, karena

4:26ya itu tadi, JavaScript itu

4:28adalah implementasi dari

4:30spesifikasi yang namanya

4:32ECMAScript, ECMAScript ada

4:34dokumentasinya, kemudian masing-masing

4:36browser, implementasi

4:38si

4:40spesifikasi itu dengan

4:42interpretasinya sendiri kan, awalnya

4:44ada yang pakai engine ini

4:46ada yang pakai engine itu

4:48dan ternyata sih

4:50Mozilla

4:52cukup berhasil membangun

4:54dokumentasi, akhirnya yang lain pada ngikut

4:56ya adalah di MDN aja lah, udah terkenal ini, gitu kan

4:58akhirnya jadilah

5:02kitab suci resmi dalam tanda

5:04kutip untuk JavaScript

5:06C++ juga gak ada ya

5:08bener juga ya

5:10ada kali

5:12tapi kita gak tahu

5:14karena C++ sama

5:16engine itu berbeda, kompilennya

5:18beda, ada Borland, C++

5:20ada Delphi

5:22karena

5:24ya kan, ada yang punya si

5:26Microsoft

5:28C#

5:30bukan, C++

5:32kompilennya kan beda, saya gak tahu

5:34jadi, karena saya

5:36udah lama banget belajar C++

5:38jadi set tau dulu ada

5:40Borland C, Delphi

5:42ada Turbo C

5:44ada yang open source juga

5:46GCC kan open source

5:48GCC juga beda

5:50mungkin sama kali ya

5:52jadi kayak punya

5:54apanya istilahnya, kayak

5:58algoritma nya begini loh

6:00distro

6:02distro linux ya

6:04apanya

6:06implementasinya bagaimana

6:08kompilennya itu

6:10tergantung dari asistektur

6:12bla bla bla nya

6:14ini visual C++ bener gak?

6:16visual C++ itu punya

6:18Microsoft, betul sekali

6:20terima kasih Mas Muhammad

6:22Farid, what's the

6:24dan

6:26ya itu, kita jadi

6:28ngelantor sedikit ya, kita malem ini ngomongin

6:30DevTools, DevTools itu biasanya

6:32masih pengaruh juga

6:34karena ada baseball seosan-seosan masing-masing

6:36implementasi

6:38jadi masing-masing broser

6:40punya DevTools sendiri, dan

6:42ada juga DevTools ya, DevTools ini kan

6:44kayak alat bantu buat kita kan

6:46selain code editor, nanti mungkin kita akan bahas

6:48di episode sendiri, ada extension masing-masing

6:50di broser

6:52juga ada extension nya, ada

6:54DevTools bawaannya, ada tools

6:56diluar itu juga, ada

6:58mungkin temen-temen yang nonton bisa share

7:00biasanya, kalau kerja, bikin

7:02aplikasi web, itu sukanya pakai apa

7:04favorite nya gitu, tools favorite nya apa

7:06kalau

7:08kita pasti yang paling

7:10sering dibuka adalah, dan salah satu ya

7:12ini salah satu faktor penentu

7:14kenapa kita memilih

7:16browser adalah

7:18DevTools nya nyaman

7:20dipakai, kenapa

7:22Chrome banyak

7:24yang pakai, salah satu alasannya

7:26adalah karena DevTools nya

7:28bagus

7:30Nah ini dia, bintang tamu kita

7:32sudah datang

7:34Halo, maaf Lat, habis

7:36ada emergency

7:38emergency meeting

7:40Oke, tapi mungkin sebelum

7:44ngomongin DevTools yang sekarang

7:46kita bahas sejarah dulu

7:48seperti biasa ya, bahas sejarah, keman dulu

7:50ada gak sih DevTools, kayaknya dulu

7:52ada, tapi

7:54kalau browser-browser dulu mungkin kayak

7:56apa, netscape navigator kayaknya

7:58gak ada deh

8:00jaman dulu tuh kan, oke

8:02kita harus finish kan jaman dulu

8:04jaman saya pertama kali

8:06jaman Ivan Muda

8:08ada gak

8:10nge-dink web, ya nge-dink web

8:12itu menggunakan

8:14browser aja lah, itu

8:16relatif

8:18di Indonesia

8:20jaman internet explorer

8:24kalau di Indonesia

8:26jaman waktu saya

8:28pernah muda

8:30di Indonesia itu

8:32di Indonesia

8:34browser yang top 2

8:36browser yang top ya

8:38yang menguasai pasar itu adalah EA dan

8:40Firefox

8:42itu di tahun 90

8:44tahun 2000an

8:482000an

8:50Mozilla, jaman dulu Mozilla

8:52terkenal nya ya

8:54Mozilla

8:56intinya Mozilla

8:58karena kalau di kampus

9:00atau di komputer

9:02biasa

9:04maksudnya di komputer waktu SMA

9:06gitu

9:08gurunya ngajar pakai EA

9:10sedangkan di

9:12war.net pada

9:14pakai Firefox

9:16Opera juga

9:18karena yang pertama ada extension

9:20ada plug-in, ada beaming ya

9:22dulu kan ya kalau yang

9:24orang melek teknologi lah

9:26yang techie itu pakainya

9:28apa itu Mozilla berarti?

9:30Plus flash itu lebih gampang

9:32di installnya di Mozilla, somehow

9:34saya gak tau kenapa lebih

9:36mudah pakai

9:38flash-flash blablabla

9:40untuk extension

9:42flashnya itu lebih gampang di

9:44Mozilla

9:46Kalau Opera berangkatnya dari mobile kan

9:48terkenal nya, gak?

9:50gak juga dari desktop

9:52ya brosernya ada

9:54tapi yang paling terkenal kan

9:56Opera Mini kan

9:58itu setelah

10:00Symbian

10:02sebelum jaman

10:04Symbian deh, sebelum

10:06Blackberry

10:08Safari di Indonesia kurang

10:10terkenal karena

10:12memakai Macbook, Macbook nya mahal

10:14jarang, tidak seperti

10:16sekarang, tidak seperti

10:18beberapa tahun yang lalu

10:20terus karena saya

10:26untuk moding itu

10:28antara EA dan

10:30Mozilla

10:32akhirnya saya pakai 1 extension

10:34lebih mudah akhirnya pakai

10:36Firefox karena ada

10:38extension apa?

10:40Firebug

10:42ini happening banget nih

10:44firebug itu keren banget jaman itu

10:46saya bisa inspect

10:48terus kalau mau geser-geser

10:50css-nya, geser-geser

10:52pakenya firebug

10:54firebug itu

10:56kenapa aku gak ngejamani firebug

10:58ngerasa

11:00pernah liat, mau saya baca sekilas

11:02cuma gak ada ingetan pernah

11:04pakai firebug sih

11:06firebug itu salah satu extension yang

11:08kalau misalkan kita baru install

11:10ulang nih, kan kalau jaman dulu kan

11:12Windows itu sering di install ulang ya

11:14kalau udah berat nih install ulang

11:16pertama kali

11:18extension yang pertama kali di install adalah

11:20firebug dulu

11:22karena kita pengen

11:24belajar

11:26segin seringnya install ulang Windows

11:28license key nya sampai hapal

11:30kan biasanya itu

11:32udah sistem dipisah

11:34di drive sendiri kan

11:36FCKGW

11:40Eka mah gak ngalamin

11:42Eka

11:44kita mah Windows bajakan

11:46keren sih gak ngalamin

11:52itu jaman dulu ya

11:54jaman ke-8

11:56tapi

11:58mau gimana pun

12:00gak aksesibel

12:02meskipun mau beli pun gak aksesibel

12:04gak bisa, gak bisa beli

12:06belinya dimana

12:08iya, kalau sekarang kan ada Windows Store

12:10ada berbagai store yang gampang

12:12kan tinggal klik, bayar, pakai kartu kredit

12:14atau apa-apa, kalau dulu kan gak ada

12:16jadi kita gak bisa juga

12:18oke, tapi

12:22ini ya, kita cari

12:24permintaannya Eka ya, disini ada gak ya?

12:26nih tampilan pertamanya, tapi saya ngalamin yang ini

12:28saya itu bagian yang

12:30nah ini

12:32udah, udah

12:34udah minum banget sama

12:36DevTools, ya essentially

12:38maksudnya di luar fitur-fitur tambahan

12:40yang sekarang ada

12:42basicnya berarti udah

12:44mirip sama DevTools yang sekarang ya

12:46Justru DevTools yang sekarang itu

12:48terinspirasi dari SpireBug

12:50iya, mereka mencontek

12:52bener-bener mencontek

12:54jadi mulai awal itu 2006

12:56pertama kali hanya ada

12:58tab console

13:00yang pertama console ya?

13:02iya, baru ada dibaging

13:04baru, abis itu di open source

13:06kemudian

13:08ini masuk web 2.0 katanya ya

13:10di 2007

13:12terus, apa lagi nih

13:162010

13:18ada namanya FireBug Lite

13:20iya, untuk bisa

13:22saya sempet ngalamin tuh

13:24pas install Google Chrome

13:26ah cari ah FireBug

13:28di Google Chrome, oh belum ada, adanya FireBug Lite

13:30terus abis itu

13:32baru mereka akhirnya

13:34masih ada loh

13:36sekarang FireBug, kalau misalnya kita pake

13:38boka ke

13:40Firefox extension

13:42masih ada FireBug

13:44cuma sebagian besar, fiturnya

13:46dan timnya itu udah menyebar

13:48masuk ke

13:50bikin

13:52Firefox DevTools

13:54dan beberapa di hire sama

13:56Google untuk bagusin

13:58Chrome DevTools nya mereka

14:00iya, jadi

14:02banyak dibajak tuh, orang-orang

14:04FireBug sama Firefox

14:06Mozilla itu masuk ke

14:08Google Chrome

14:10jadi dulu ini ga ada

14:12dan kita harus install

14:14dulu, abis itu baru bisa

14:16kita nikmatin yang seperti sekarang

14:18kalau ngeliat fitur-fiturnya itu

14:20mirip sekali, karena

14:22Toh juga ini open source kan

14:24FireBug ini open source kan, jadi

14:26di contoh, atau di ambil kodenya

14:28pun ga masalah

14:30ini timeline

14:32ini console

14:34ini yang di kanan itu ya buat

14:36layout ya, margin border

14:38dan lain-lain ya, border box

14:40eh, oh, box model

14:42sorry, box model

14:44box model, ini

14:46yslow, yslow itu

14:48yang yahoo punya ya bukan?

14:50yes, yes, yes, performance monitor

14:52sampai sekarang masih ada

14:54kalau si yslow nya sendiri

14:56masih, masih

14:58dan

15:00nah, saya mau nunjukin

15:02satu fitur yang menurut saya

15:04menarik yang kayaknya

15:06di Chrome tidak di

15:08implementasi, tapi di

15:10Firefox sekarang ada, ya maksudnya

15:12tetap dipertahankan gitu

15:14saya ganti dulu ya ke

15:16Mozilla ya, saya Mozilla

15:18ganti screen dulu

15:20mau nunjukin dulu nih

15:22demo, demo

15:24jadi dia ada multiline

15:26mode, kalau misalkan

15:28di Chrome DevTools kan

15:30misalkan kita console gitu kan

15:32solok, abc

15:34gitu kan, udah, kita mau ke

15:36baris berikutnya kan harus tekan

15:38control enter atau shift enter kan

15:40kalau kita enter kan dia

15:42eksekusi kan

15:44kalau Firefox DevTools

15:46ini ada switch to

15:48multiline editor mode

15:50atau pencet control B atau

15:52command B, dia akan jadi

15:54function

15:56enak ya, kayak IDE

15:58kalau saya kayak coding IDE

16:00jadi nggak perlu shift, nggak perlu control

16:02betul

16:04kita bisa langsung tulis disini

16:06seperti layaknya kode editor

16:08gitu

16:10kalau panjang ini kan kode-ketik

16:12di facecode, biar enak ketiknya

16:14habis itu copy paste

16:16ini bisa langsung

16:18ini salah satu fitur yang

16:20tertahankan oleh Firefox

16:22dari Firefox

16:24kalau di Chrome kayaknya nggak ada ya

16:26atau ada ya, saya nggak tahu

16:28atau ada tapi kita nggak tahu

16:30atau ada extensionnya, siapa tahu

16:32karena kan si Chrome DevTools ini ada extensionnya

16:34kan, bisa diganti timnya

16:36gitu, karena ini adalah

16:38aplikasi sendiri nih

16:40ini aplikasi web sendiri, saking

16:42besarnya gitu ya

16:44oke, kita balik lagi

16:46ke layar

16:48pertama, oke

16:50lanjut, Chrome DevTools

16:52kalau kalian biasanya

16:54Chrome DevTools yang paling

16:56favorit dipakai apa aja

16:58ininya, fiturnya

17:00yang paling sering

17:02kalau aku standar ya

17:04yang pasti inspect element

17:06itu udah pasti

17:10disable javascript

17:14disable javascript

17:16disable cache

17:18throttling

17:20throttling pakai

17:22yang ada disini ya, kita tunjukin aja kali ya

17:24iya, kita tunjukin satu-satu

17:26lighthouse

17:28kita pakai console nih

17:30misalnya, inspect element

17:32inspect element

17:34misalkan, kita mau liat

17:36judulnya

17:38cari yang ada gridnya dong, biar bisa

17:40nanti, biar bisa muntuh itunya

17:42oke, disini ya, ada grid kan

17:44gak tau

17:46ya coba aja, kali ada

17:48ini grid

17:50itu grid area tuh

17:52bisa diklik gridnya

17:54ini

17:56iya, betul

17:58itu bisa, jadi kalau kita kan suka lupa nih

18:00apa, online items aja

18:02wah, ini sering ketukar

18:04sering banget ketukar ini

18:06ini ada

18:08helpful visually lah, secara visual

18:10kita bisa nge click satu-satu tuh

18:12iya

18:14oke

18:16wah, berantakan

18:18wah, ancur, balikin lagi

18:20oke

18:22terus, kalau pengen liat itunya

18:24maksudnya, kalau ini kan gridnya mungkin

18:26simple ya, tapi kadang kalau gridnya rumit

18:28kita bisa nge click itunya

18:30tulisan gridnya tuh

18:32yang tulisannya grid di atas

18:34ini, oh ini

18:36oh, wow

18:38kelihatan

18:40breakpointnya, jadi misalnya

18:42kita punya grid yang agak

18:44kompleks, grid line-nya banyak

18:46terus misalnya pakai min max atau apa

18:48kita bingung nih, kenapa hasilnya gak sesuai

18:50bayangan kita, nah itu bisa

18:52itu helpful

18:54apa, kita nge click itu, jadi bisa

18:56check grid line-nya yang mana

18:58oke

19:00kalau di mobile sih, gak terlalu kelihatan ya

19:02tapi kalau tampilan desktop

19:04yang apa, yang lebar

19:06itunya banyak, itu helpful banget sih

19:08flex juga ada

19:10jadi semua lay out

19:12sama ya, flex juga

19:14oh iya, ada yang ketinggalan dari salah satu

19:16fitur, tadi kan kita ngomongin

19:18Mozilla ya, dari firebox kan

19:20akhirnya pindah ke firefox

19:22devtools, salah satu fitur yang

19:24sempet ada, fitur unik yang sempet ada

19:26terus sekarang udah ilang, adalah 3D view

19:28ada yang ngalamin gak?

19:30jadi kita bisa liat layer

19:32bisa liat layer-nya, betul

19:34ini dia, bisa dibalik-balik 3D

19:36bener-bener 3D

19:38tapi berat, akhirnya di hilangin

19:40ini keren banget

19:42jaman dulu, kalau kita main-main lay out kan

19:44bisa tau yang mana lay out yang

19:46yang menipas siapa, yang paling atas

19:48z-index terutama disini bisa

19:52yes, ini

19:54tapi sudah tidak ada

19:56cuma ini fancy banget ya, sebenernya kalau buat

19:58crystallized layer kan sebenernya bisa pakai

20:00kalau yang sekarang kan pakai itu kan

20:02overlay background

20:04yang ada opacity-nya gitu kan

20:06gue juga bisa liat

20:08pakai apa

20:10itu opacity background, cuma ini ada

20:12lucu banget sih itu ada

20:14ini dulu

20:16waktu ada fitur ini

20:18kita pakai bukan buat kerja

20:20tapi buat main-main lucu-lucuan

20:22gak terlalu bermanfaat buat kerja

20:24kayak dulu di chrome pernah ada deh ini

20:26gue kok lupa ya, ada loh di chrome

20:28pernah gak sih? ingat gak sih?

20:30enggak, enggak

20:32gak sempat ingat tadi ya, gue coba

20:34bongkar-bongkar lagi ya

20:36oke, anyway

20:38kita balik lagi ke sini ya

20:40yang biasa kan, inspect

20:42elemen, kalau diklik kita mau kemana gitu kan

20:44kita mau cari tau ini apa

20:46kita bisa ganti-ganti juga

20:48bisa dihapus, bebas ya

20:50walaupun kalau direfresh

20:52hilang kembali lagi kan

20:54terus konsol, yang kayak tadi kan

20:56ini konsol, mungkin jangan-jangan ada disini

21:00ya itu lah

21:02kalau disini kan

21:04kita function gitu kan

21:06function apa tadi, function

21:08open

21:10kalau di enter dia akan

21:12ke baris berikutnya

21:16enggak, ini enter dia udah langsung

21:18ini otomatis, berarti udah multi-line

21:20otomatis ya

21:22aneh, kok aneh

21:24kok

21:26demonya gagal

21:28kalau konsolok, kalau satu ini ya

21:30tuh kan, error kan

21:32oh kalau

21:34kalau ada buka

21:36kurungnya

21:38coba jangan langsung tutup

21:40konsoloknya jangan langsung tutup

21:42jadi multi-line, oh ini berarti lebih smart

21:44tuh, baru tau kan

21:46sama, kita juga baru tau

21:48jadi gak usah pake Firefox, udah langsung disini aja

21:54ya maksudnya pake

21:56untuk

21:58untuk yang tadi

22:003D-3D ada nih

22:02ada? ada

22:04di mana?

22:06itu yang titik 3

22:08titik 3 di atas itu

22:10more tools

22:12layers

22:14nah

22:16tuh bisa kelihat

22:18di kanan ini bisa di zoom

22:20sebentar, ini

22:22full screen aja kali ya?

22:24bukan

22:26ini bisa di scroll

22:28nah di zoom

22:30tapi gak 3D ya? oh bisa di putar ya

22:32bisa, bisa di putar

22:34tuh

22:36kita biar gak terlihat 3D-nya gak se

22:40ekstrim yang tadi ya

22:42iya, tidak se fancy yang tadi

22:44mainan kan

22:46mainan, tuh kelihatan kan

22:48kelihatan z-index, nah itu

22:50di kiri kan ada tree-nya tuh

22:52yang crash 2, nah itu bisa liat tuh

22:54itu layer-nya semua tuh

22:56oh, oke

22:58makanya gue inget ada gitu

23:00ada kok, itu tidak se fancy

23:02si Firefox punya ya, jarang

23:04jarang pake

23:06iya

23:08nah pertanyaannya sebenarnya

23:10ya itu tadi ya, jadi kalo temen-temen

23:12penasaran mau

23:14tau ada fitur apa aja, liat

23:16disini banyak sekali, kalo misalkan disini

23:18ada tab gitu kan

23:20klik, ada apa aja, terus

23:22kemudian kalo kurang, ada more tools, disini ada

23:24banyak juga tambahannya

23:26yang kita sendiri belum banyak

23:28main-main kesini, itu ada web

23:30outan segala disini

23:32dan mungkin tiap minggu atau tiap bulan ada

23:34bertambah gitu, tambah satu, tambah satu

23:36gitu kan, ada update

23:38yang biasanya nge-update beginian tuh

23:40bahasa selin, yang

23:42bintang tamu lalu

23:44iya, episode lalu

23:46oh, terus kalo misalnya kita

23:48udah tau feature yang mau kita cari

23:50tinggal ada shortcut-nya kan

23:52command + shift + p

23:54iya, ini juga salah satu

23:56command + shift + p, nanti muncul

23:58palette-nya, jadi

24:00kalo misalnya kita mau buka apalah

24:02lighthouse atau

24:04enable/disable javascript, kan

24:06lebih cepet ya daripada nyarinya

24:08saya tadi udah liat notenya mas Riza

24:10tau gak kalo kalian itu bisa

24:12nge-screenshot tanpa perlu extension

24:14nah, ini salah satu

24:16fitur menarik juga nih, yang sering

24:18sekali saya pakai, jadi kalo misalkan kita mau

24:20screenshot ini, ini kan halaman-nya

24:22panjang sekali kan, gitu kan

24:24kalo kita screenshot satu-satu kan capek ya

24:26kalo dulu kita harus pake

24:28aplikasi tuh, namanya apa

24:30kalo di windows itu ada, otomatis dia

24:32pake scroll sendiri gitu kan

24:34kalo di devtools itu

24:36ada fiturnya, jadi kalo misalkan

24:38temen-temen mau print, ctrl + shift + p

24:40terus screenshot

24:42yang full

24:44full size

24:46jadi dia akan

24:48sampe ke

24:50bawah-bawahnya

24:52udah selesai dia

24:54oh biasanya, kalo

24:56gue sering pake itu, kalo udah lagi

24:58responsif mobile mode sih

25:00kalo itu kan muncul

25:02icon-nya juga buat screenshot

25:04cuma mungkin, enaknya ini

25:06bisa semua

25:08nih hasilnya, panjang begini

25:10kalo di zoom

25:12oh sama, responsif mode juga

25:14bisa

25:16bisa per node juga ya

25:18jadi klik inspect element, node

25:20yang bagian mana, terus bisa

25:22di screenshot per node

25:24klik kanan bisa screenshot juga

25:26itu tools yang

25:28paling sering, yang paling sering saya

25:30pake kalo di, kalo butuhkan

25:32kadang-kadang buat demo, nunjukin gitu kan

25:34nah, pakenya itu

25:36terus, ada saya mau share juga

25:40untuk

25:42yang

25:44saya pake

25:46untuk nge-develop untuk

25:48client, namun karena

25:50males kayak ya elah

25:52ini ads-nya muncul mulu

25:54atau ada

25:56script yang saya gak pengen

25:58gue mau liat, gak mau pengen ngejalanin

26:00elu gitu, gue pengen liat yang gue punya

26:02aja gitu, itu bisa network

26:04request blocking

26:06jadi, go to network, refresh

26:08dulu

26:10refresh

26:12itu kan ada tuh CSS atau

26:14JS ya, JS, JS ya

26:16paling sering kan di-blockan JS, ah gak pengen

26:18ngejalanin si GA, ngapain si GA

26:20ngejalanin gitu, klik kanan

26:22klik kanan, oh

26:26gak keliatan ya, oh yaudah

26:28bentar-bentar, di, harus desktop ya

26:30harus desktop

26:32ya, screen, desktop

26:34entire screen, kalo entire screen nanti

26:36muka kita keliatan

26:38nah, dah

26:40klik kanan

26:42klik kanan tuh ada network request

26:44block, request URL

26:46ini ya, ya

26:48nah, kan jadi enable network

26:50request blocking, kalo ini di-refresh

26:52di-refresh

26:54udah gak ada lagi

26:56balik ke tab tadi, keliatan tuh

26:58GA itu block by

27:00block by script, oh

27:02statusnya nge-block

27:04jadi di-load ya

27:06ini juga bisa jadi

27:08salah satu pertama

27:10kalo saya gak suka ngejalanin

27:12analytic, karena gak penting kalo lagi

27:14nge-develop misalnya, gak penting

27:16nge-jalanin tech manager

27:18atau gak penting melihat ads

27:20tertentu, karena pengennya cepat, karena

27:22requestnya banyak banget kan, eh refreshnya

27:24nge-loadnya banyak, ngapain sih di ads gitu

27:26kalo lagi gak fokus di ads

27:28atau

27:30misalnya ngetest script kita

27:32jangan sampe script kita itu harus ada

27:34fallback ya

27:36script kita itu harus bisa kalo, kan gak bisa

27:38ngeharapin si user itu

27:40bisa kita harapin

27:44semua javascript bisa didownload dengan

27:46sempurna

27:48what happen kalo misalnya highlight common pack

27:50jsnya itu gak jalan

27:52apakah web kita

27:54fatal error dan gak

27:56kalo newsletter.js

27:58yang gak jalan, apakah

28:00terjadi fatal error di javascript

28:02semua

28:04eksekusi javascript rusak

28:06kita harus bisa ngetest

28:08pake ini, jadi block satu-satu

28:10script kita

28:12sebagus

28:14kalo yang

28:16apa namanya

28:18idealnya

28:20adalah salah satu

28:22script atau salah dua script yang gak keload

28:24webnya kita

28:26masih bisa ngerender dengan benar

28:28meskipun fitur itu tidak jalan

28:30tetapi

28:32modular ya

28:34catchnya

28:36rapih

28:38kontennya tetap bagus

28:40progressive

28:46enhancement

28:48itu di network, ada lagi yang biasa

28:54sering juga dipakai adalah

28:56device

28:58untuk liat

29:00kira-kira web site kita

29:02atau aplikasi web kita

29:04tampilan di layar yang kecil

29:06misalkan di iphone

29:08itu seperti apa

29:10kita bisa, udah ada presetnya juga ya

29:12bisa di edit juga, kalo mau

29:18nambahin misalkan blackberry

29:20atau fold, ada gak fold?

29:24ada, harusnya ada fold

29:26itu galaxy fold, udah ada

29:28ditambahkan galaxy fold itu di atas

29:30berarti kalo kita disini

29:34galaxy

29:36mana?

29:40nah, terus?

29:42gedein

29:44itu kan ada di atas kanan

29:48di atas kanan

29:50kanan atas

29:52icon kanan atas

29:54di bawah rotation

29:56nah, kalo dibuka

29:58jadinya begini

30:00jadi ada rotate

30:04itu rotate

30:06rotate device biasa

30:08seperti hp biasa

30:10ada rotate, ada fold

30:12liat viewportnya jadi aneh kan

30:14280 itu biasa

30:16tapi 7177 itu

30:18belum pernah liat saya 7177

30:22cantiknya, nambah lagi

30:24kan biasanya 720

30:28720

30:30768 ipad itu standard

30:32sekarang ada 7177

30:34inget ya

30:36nambah lagi kejar

30:40gak usah di target angka execnya

30:42pake range, makanya media query

30:44nah, dari sini juga bisa screenshot tuh

30:46di 3 dots yang kanan atas

30:48kanan atas

30:50dari dotsnya panel utama

30:52capture screenshot ya, bisa juga full

30:56sama kayak tadi ya modelnya ya

30:58jadi kita bisa bikin mockup buat

31:00macam-macam ukuran device

31:02di network juga biasanya saya

31:06enable disable cage disini

31:08buat ngecek, misalkan kita

31:10butuh offline mode, ya berarti

31:12kita enable cage nya

31:14trottling nih

31:16juga cukup sering

31:18performance, terutama semacam

31:20S atau S jenisnya ya

31:22kalau speed normal kan apalagi di lokal

31:24kita gak bakal bisa liat tuh

31:26kayak overhaul yang

31:28font loading tuh shiftingnya kayak gimana

31:30nah kalau misalnya di throttle ya minimal

31:32kita ada gambaran visual lah

31:34ini buat apa ya network ya

31:38saya suka kan kalau defaultnya

31:40cuma ada slow 3G, fast 3G

31:42apa lagi itu

31:44saya lupa

31:46saya suka pake

31:48regular 4G

31:50saya tambahin sendiri

31:52saya suka pake wi-fi

31:54saya suka pake

31:56tanpa batas

31:58unlimited

32:00gak sih, ada yang kayak broadband

32:02broadband kan bisa

32:04ini adalah koneksi kita sendiri

32:06tapi perlu diingat juga fast 3G

32:08disini adalah versi luar ya

32:10beda kecepatannya sama fast 3G

32:12disini

32:14mungkin ini 2.5G kalau disini ya

32:16kalau 4G

32:18berarti 3G lah disini

32:20jadi ya kurang lebih gitu

32:22terus ada apa lagi

32:24apa lagi nih di network

32:26ada lagi gak di network

32:28ya itu sih offline itu

32:30bergunanya kalau yang

32:32pengalaman pribadi sih

32:34misalnya kita pakai service worker nih

32:36yang

32:38kegunaannya misalnya

32:40kalau misalnya koneksi tiba-tiba mati

32:42user udah nge-click post

32:44tapi

32:46post misalnya posting

32:48sosmed atau email atau apapun

32:50ngirim suatu data tapi lagi offline

32:52nah kalau misalnya kita pakai service worker

32:54kan bisa

32:56apalah begitu online langsung

32:58ngirim lagi atau mungkin yang lebih

33:00sering itu munculin tampilan

33:02apa sih kayak bener

33:04kalau offline muncul bener

33:06wah maaf ada sejang offline

33:08begitu online lagi

33:10muncul apa icon

33:12now back online

33:14ini offline apa berguna banget

33:16dulu pas belum tau

33:18beneran pernah ini pas belum tau trot link itu

33:20bisa simulate offline

33:22matiin wifi dong

33:24ya bisa tapi repot

33:26lalu

33:28kalau di network

33:30ada juga tambahan ini

33:32coba masuk ke filternya all

33:34filternya all dulu

33:36terus kemudian refresh

33:38reload reload

33:40nah di bagian

33:44yang namanya itu bisa

33:46pencet shift

33:48contohnya shift

33:50ya di shift tapi di hover

33:52gak usah di pencet

33:54lihat kalau misalnya

33:56di shift ke

33:58contohnya gini

34:00kalau di hovernya ke mana

34:02coba tadi

34:04ke phone awesome

34:06kok jadi begitu

34:08kalau di klik

34:10ok shift dulu

34:12itu yang hijau berarti dia yang manggil

34:14jadi si phone awesome

34:16kalau di hovernya

34:18ke saying goodbye

34:20to firebug

34:22coba kayak yang lain dulu

34:24jquery

34:26ada yang merah tadi kan

34:28nah yang merah

34:30berarti dia memanggil apa

34:32phone awesome memanggil ini semua bawahnya ya

34:34dokumen html

34:36yang paling teri paling tinggi dia memanggil semuanya

34:38kalau misalnya mas Riza

34:40ke jquery min deh

34:42hovernya ke jquery min

34:44coba scroll ke bawah

34:46ya kalau

34:48ini tadi hijau

34:50yang hijau berarti

34:52dia dipanggil oleh si

34:54dokumen tadi

34:56dan kalau dia ke bawah dia akan

34:58manggil yang merah

35:00jadi kalau misalnya tadi jquery min

35:02memanggil sesuatu yang lain

35:04berarti dia

35:06ada dependensinya ya

35:08jadi siapa yang manggil dan siapa yang

35:10dipanggil itu bisa

35:12di shift hover

35:14jadi bisa tau

35:16itu tahunya dari mana

35:18fitur kayak gini tuh

35:20saya

35:22nggak sengaja aja nemu

35:24karena gini

35:26kan bisa kelihatan itu initiatornya

35:28siapa kalau misalnya kita ke

35:30jangan yang ini deh ini terlalu simple

35:32coba ke chrome dev tool

35:34sorry ke web

35:36web.dev

35:38atau yang lebih

35:40coba ke network mungkin yang lebih banyak

35:42pakai

35:44ke all

35:46coba di

35:50ya coba aja di kanan

35:52ya di kanan

35:54klik

35:56oke

35:58turun turun satu turun lagi

36:00main.js nah main.js manggil

36:02manggil bawahnya kan dipanggil oleh dev tool

36:04dan

36:06memanggil enhance select

36:08kalau ini

36:10berarti dia ke main

36:12jadi bisa juga dilihat dari

36:16dari initiator itu

36:18main.js dipanggil index

36:20enhance select dipanggil oleh main.js

36:22main.js

36:24jadi bisa kelihat waterfall

36:26jadi pengen tahu

36:28ini script dari mana sih datangnya

36:30kita kan

36:32kadang bingung ya kalau sudah terlalu

36:34dalam ya

36:36terutama ads

36:38ini siapa sih yang manggil ini

36:40script yang aneh ini

36:42kita bisa trace

36:44nge trace nya dari pada pakai initiator

36:46susah amat

36:48di save hover bisa liat langsung

36:50kemana pergi nya

36:52oke

36:54keren ya

36:56terus bisa baca itu di bagian bawah

36:58paling bawah jadi halaman

37:00ini karena performance ya

37:0215 request

37:04ada untuk

37:06load halaman ini kita

37:08transport

37:10melakukan 15 request

37:12ada 102 kilobyte

37:14yang di transfer

37:16tetapi itu di gezip

37:18ya jadi network

37:20transport ya artinya dan

37:22status 2 kilobyte itu

37:24uncompressed

37:26jadi 255 kilobyte

37:28finish nya

37:302 detik

37:32don't content loaded nya tidak kelihatan ya

37:34mungkin harus di geser

37:36nah itu kelihatan

37:38itu dia

37:40untuk network

37:42nah biasanya teman-teman kan

37:44suka gak suka ini apa sih

37:46itu yang ada timeline itu

37:48yang di tengah-tengah itu kan biasanya

37:50yang di tengah-tengah ini

37:52bisa di hilangin dengan

37:54cara

37:56pen chat itu

37:58ya itu

38:00show overview ilangin

38:02nah

38:04iya tuh gak suka tapi bingung

38:06ilangin

38:08oke banyak sekali ya

38:10fiturnya ya

38:12luar biasa

38:14oke next apa lagi

38:18saya suka

38:20pakai filter juga

38:22filter itu

38:24kalau pengennya cuman ini

38:26liat jquerynya

38:28ada gak sih jquery contohnya

38:30analytics aja

38:32gpm

38:34dia bisa pakai filter

38:36jadi ini kan

38:38iya ini

38:40iya ini

38:42bisa langsung ya

38:44bisa langsung ya

38:46punya target namanya kan

38:48kita mau ngecek script tertentu

38:50yang kita tau namanya

38:52usually kalau saya pakai filter

38:54itu ini ada gak sih dia pakai

38:56kembali lagi ke ads ya

38:58dia pakai

39:00itu kan jpt bukan

39:02jpt ya google producer tag

39:04ini jpt nya siapa

39:06punya sih gitu nanti bisa decodenya

39:08itu biasanya filter

39:10aja lah daripada cari satu-satu

39:12scroll-scroll kayak susah amat gitu

39:14pakai lah filter

39:16kalau aku biasanya pakai filter

39:18buat ngecek ya

39:20operasi-operasi client side sih

39:22misalnya punya analytics

39:24in house ya yang bukan

39:26ga atau apalah

39:28fetching data pengen mastiin

39:30apa sih datanya

39:32request nya payload nya gimana

39:34terus apa return

39:36datanya gimana itu

39:38enak banget sih daripada

39:40console lock atau apa ya gak perlu kan

39:42kita langsung ngecek aja request nya

39:44sama tadi

39:46Mas Riza ada sempat

39:48sekilas itu yang

39:50network api diklik misalnya

39:52di name dev tool nya

39:54salah di waterfall nya

39:56di waterfall nya

39:58di hover aja

40:00server timing api

40:02sorry

40:04bisa keliatan itu

40:06pernah

40:08pernah bahas ini web performance api

40:10dan kita

40:12saya ngasih tahu

40:14kita bisa nge-ngirim

40:16lewat header

40:18pakai server timing api

40:20itu

40:22kalau misalnya di header itu pakai server timing api

40:24kita bisa kirim misalnya

40:26untuk eksekusi database tertentu

40:28kalian bisa kirimkan

40:30itu db duration nya berapa kali

40:32berapa millisecond

40:34total nya itu bisa

40:36dikirimkan

40:38jadi

40:40saat di hover itu bisa kelihatan

40:42nanti db request berapa lama

40:44itu bisa dijual disini

40:46jadi bisa tahu dari sisi server

40:50berapa lama kirimnya

40:52ini sebenarnya bottleneck nya ada dimana

40:54apakah di client atau di server gitu ya

40:56salah satu fungsinya

40:58ini damar

41:00nge-share nih dia paling

41:02sering pakai application storage sama live host

41:04application storage

41:06biasanya kepakai untuk

41:08pwa ya

41:10ya semua sih

41:12service worker

41:14service worker

41:16saya kalau di storage sukanya untuk

41:18ngapus doang masuk ke storage

41:20clear case

41:22clear case clear itu

41:24lokal storage nya di clear ya

41:26bukan langsung di storage lewat storage

41:28itu yang di storage

41:30application storage clear

41:32clear all

41:34ini ya

41:36bahasa kerennya

41:38di nuke

41:40di nuke

41:42semua

41:44ya kalau ini kan

41:46ya

42:02jadi

42:04sebetulnya dicek dari konsol atau

42:06di lock di server atau dimana

42:08lokal server bisa

42:10cuman kan tampilannya gak enak

42:12kalau misalnya lewat tools ini

42:14lebih enak misalnya

42:16objek ya tampilannya jadi

42:18kayak objek lah kalau array atau

42:20apapun tapi jangan lupa nih

42:22bahwa sebenarnya gimana pun

42:24itu isi data nya tetap string

42:26jadi kalau misalnya kita mau manipulasi

42:28atau nampilin di front end

42:30atau semacamnya tetep jangan lupa

42:32diparse dulu

42:34diparse buat pake data

42:36stringify buat

42:38nestore jadi yang di dev tools itu

42:40walaupun tampilan

42:42array atau objek itu sebenarnya cuman visual

42:44aja biar kita

42:46gampang liatnya

42:48jadi ibaratnya gini lah kalau

42:50temen-temen ngoding di back end kan butuh

42:52tuh mysql apa php

42:54mysql gitu kan

42:56buat ngeliat daripada harus

42:58dia harus apa di console

43:00harus di select bintang blablabla

43:02kan ada alat bantu seperti ini kan

43:04lebih membantu ya daripada

43:06kita harus ke console terus

43:08local storage something something

43:10gitu kan dot get gitu kan

43:12lama sekali gitu

43:14jadi ini sangat memudahkan

43:16iya

43:18iya

43:20selanjutnya apa lagi

43:22kalau tampil application banyak

43:24light house

43:26ya kalau light house ini

43:28tadinya

43:30saya ga suka pake ini

43:32karena lambat

43:34saya di cli nya pake

43:36pake di terminal

43:38saya justru

43:40bukan pake ini kalau mau liat

43:42hasil kan

43:44tapi ya yes ini lebih lengkap ya

43:46tapi untuk melihat

43:48core web vital saya lebih suka pake

43:50itu

43:52performance step

43:54bukan performance step

43:56ada satu lagi yang pernah saya share

43:58dulu apa namanya

44:00performance

44:02performance inside

44:04performance monitor

44:06salah

44:08karena dirimu bukan menggunakan

44:10chrome

44:12jadi

44:14jadi ada

44:16ada performance inside

44:18jadi lebih suka pake

44:20performance inside

44:22light house ini bukan cuma performance ya

44:24macem-macem

44:26itu sebenernya handy juga

44:28sih berguna buat kalau ngecek

44:30semua sekaligus emang yaudahlah

44:32pake CLI aja

44:34cuma kalau misalnya cuma pengen ngecek

44:36accessibility atau cuma

44:38biasanya yang sering aku pake adalah

44:40ngecek accessibility atau PWA

44:42jadi apa

44:44buat PWA itu kan ada kriteria kayak misalnya

44:46manifest nya item nya apa aja

44:48field nya apa aja itu kan sebenernya

44:50kriterianya icon nya

44:52maskable atau enggak

44:54size nya gimana

44:56ini praktis sih sebenernya pake light house ini

44:58light house ini

45:00hampir sama kayak firebox ya awalnya dia extension

45:02chrome extension

45:04terus akhirnya di ambil

45:06di akwisisi

45:08sama devtools

45:10dimasukin ke langsung

45:12sudah disediakan

45:14build in dari chrome devtools

45:16sama

45:18dan ada satu lagi

45:20yang simple

45:22dan sering saya baca itu adalah

45:24coba di klik yang tanda titik

45:26ini

45:28ya more tools

45:30coverage

45:32atau help ya

45:34itu biasanya what's new

45:36oh oh oh

45:38documentation

45:40what's new

45:42what's new

45:44what's new

45:46nggak ada

45:48kok nggak ada disini ya

45:50komen cfp aja lah

45:52what's

45:54oh ada ada show what's new

45:56nggak ada ya

45:58ini apa ya pencah

46:00show what's new

46:02nggak ada

46:04ini what's new aja coba

46:06ini versi berapa

46:08coba gue share ya

46:10coba coba

46:12ini khusus

46:14kalau kita nggak sengaja

46:16mencet escape muncul ini lagi

46:18oh iya bener bener bener

46:20iya iya

46:22sering ke pencet

46:24iya bener bener

46:26iya kalau escape ini muncul

46:28tunggu tunggu

46:30ini nggak bisa

46:32coba scale screen nih

46:34mana

46:36oh iqvan oke

46:38tunggu ya gue

46:40tuh what's new

46:42ini lah yang menyebabkan

46:44saya banyak tau

46:46tuh selalu baca nih kalau misalnya

46:48ini kan lagi di saya pakai chrome

46:50oh udah ditutup

46:52chrome dev ya 1.1.6

46:54misalnya

46:56pengen tau apa yang what's new

46:58oh bukan

47:00ayo udah

47:02what's new misalnya

47:04terus

47:06ini yang saya bilang tadi performance insight

47:08kalau misalnya teman-teman pengen tahu

47:10kalau untuk

47:12pertama

47:14kalau hanya untuk nge-detek core

47:16web vital saya udah pernah share juga itu

47:18pakai rendering

47:20bisa

47:22core web vital

47:24bisa nggak sih

47:26core web vital

47:28rendering core web vital

47:30bisa lihat

47:32hasilnya langsung

47:34nggak perlu

47:36like house

47:38tetapi kalau misalnya

47:40mau lihat lebih jelas

47:42ini apa sih yang

47:44yang mengalami layout shift

47:46dan dom content loadingnya bagaimana sih

47:48bisa saya eh bukan

47:50performance salah

47:52kalau performance bisa juga dipakai

47:54karena bisa kelihatan timingnya

47:56tetapi saya lebih suka

47:58menggunakan performance insight

48:00performance insight

48:04dan saya throttling

48:064G

48:08dan

48:10slow 4 kali

48:12terus saya record

48:14salah

48:16recordnya yang ini

48:18record yang master page load

48:24nanti

48:26bisa lihat

48:28layout shift

48:30bisa lihat

48:32dom content loaded

48:34ada markernya

48:36semua ya

48:38jadi kalau

48:40bisa saya magnify

48:42bisa kelihatan juga

48:44mana

48:46di network mana yang

48:48script yang berasal

48:50dari internal atau domain

48:52sendiri mana script yang dari third party

48:54yang internal di dalam network

48:56yang third party bisa kelihatan

48:58jadi kalau kita lihat dari situs

49:00ini

49:02dia

49:04dom content loadednya di 1.4

49:06eh sorry

49:08ini lcp

49:10nya bisa kelihatan

49:12apa lagi ya

49:14terus

49:16tools yang akhir-akhir ini saya suka

49:18mulai favorit gunakan itu

49:20rendering

49:22karena bisa

49:24apa isilahnya ini

49:26overlay

49:28bisa lihat

49:30paint flashing

49:32misalnya lihat ya

49:34kalau saya reload ya

49:36bisa lihat yang mana yang di render ya

49:38kalau saya klik

49:40mana yang di render ulang

49:42terus kemudian bisa

49:44lihat layer borders

49:46lihat

49:48border border nya enggak

49:50layer ya

49:52itu bisa liat di situ

49:58kayak kotak-kotaknya

50:00oh container nya ya

50:02kayak diff

50:04betul-betul

50:06itu aja

50:08disable local font

50:10saya enggak suka pakai itu

50:12saya pakainya pen flashing sama

50:14layer border

50:16frame rendering start

50:20ya cukup sih

50:22kalau bisa sih 60 fps

50:24kalau bisa

50:26kalau bisa

50:28kalau sempat nge-scroll

50:30nge-like kelihatan kan

50:32dia bukan 60 fps

50:34hit dock

50:36that's it

50:40ada lagi

50:42ada lagi

50:44accessibility

50:46ah ya itu

50:48nah itu

50:50firefox

50:52firefox lebih bagus kan

50:54accessibility nya ya

50:56iya enggak sih

50:58yang paling praktis sih

51:00coba command shift

51:02command shift

51:04accessibility

51:06show accessibility

51:10iya

51:12jadi kita bisa liat

51:14kita pernah bahas ya

51:16di episode accessibility

51:18detailnya

51:20kan harus ada landmark

51:22mana pengguna screen reader

51:24terutama atau apa assistive device

51:26lainnya itu kan navigasinya

51:28berdasarkan namanya landmark

51:30mana yang area utama

51:32mana area navigasi

51:34nah ini semua kita bisa liat

51:36disini coba

51:38mouse over di yang

51:40root web area

51:42atas

51:44nah itu ke highlight kan bagian

51:46yang dimaksud habis itu click

51:48generic tuahnya generic itu diff

51:50apa pun yang nggak ada makna semantiknya

51:52jadi itu kayak container aja

51:54terus generic lagi

51:56akan skip ya

51:58iya

52:00jadi user yang menggunakan

52:02apa pakai screen reader

52:04atau assistive device nggak bisa loncat

52:06ke generic tapi bisa loncat ke

52:08banner lo misalnya

52:10banner yang di highlight

52:12coba scroll ke

52:14skrol halaman utama katas banner

52:16kalau kita mouse over

52:18banner yang di highlight adalah

52:20area banner-nya

52:22harusnya sih

52:24nah itu sih header-nya jadi user

52:26misalnya lagi yang

52:28pakai screen reader lagi di tengah-tengah

52:30dia mau loncat kelik atas

52:32bisa tuh bisa navigate ke

52:34banner-nya

52:36coba di area key panel

52:38accessibility-nya scroll lagi ke bawah

52:40nggak bisa di scroll

52:44di accessibility

52:46nah itu ada generic

52:48ada main

52:50main tuh main area-nya

52:52yang dianggap isi utama dari halaman itu

52:54terus

52:56isinya ada article

52:58click article lagi

53:00click main tadi

53:02main di panel

53:04accessibility

53:06ada article

53:08itu harusnya ada

53:10biasanya ada judulnya

53:12ya itu punya

53:14itu

53:16article

53:18di atas justru ya

53:20disini

53:22kok nggak kebaca

53:24karena dalam satu halaman itu

53:26kan cuma ada satu article ya

53:28kecuali itu list of articles

53:30nah terus ada subheading-nya juga

53:32subheading-nya tuh ada kan tuh

53:34main

53:40article

53:42ada subheading-nya juga

53:44tadi ada subheading-nya

53:46atas dikit

53:48looking forward

53:50looking back

53:52itu kan subsection-nya

53:54bisa scroll into view

53:56juga mas Tiza

53:58misalnya lagi

54:00scroll dulu halamannya ke atas

54:02terus tadi masuk

54:04ke heading

54:06dari H3 yang di atas

54:08H3 yang di atas

54:10click kanan

54:12scroll into view

54:14ada nggak scroll into view

54:18nggak ada

54:20kok beda-beda sih

54:22harusnya bisa itu

54:28udah lama itu scroll into view

54:30nggak ada

54:32click kanan

54:36ini click kanan udah nggak ada

54:38mau

54:40lihat lagi

54:42iya itu chrome bukan sih

54:44break

54:46mungkin

54:48dihilangin

54:50agak lain ya

54:52coba click kanan

54:54nggak ada kan

54:56oh iya

54:58beda dihilangin

55:00kalau di chrome ada

55:02jadi bisa scroll into view

55:04dia otomatis nge scroll ke

55:06elementnya itu

55:08hmm

55:10oke

55:12ya

55:20menyer

55:24Facebook tiga

55:26hmm

55:36bisa dicek di situ

55:38oke

55:40ini role ini lumayan

55:42dikenal juga salah satunya

55:44gara-gara testing

55:46yang menggunakan role

55:48sebagai penanda

55:50oh iya kalau kita get by role

55:52nah itu bisa buat investigate

55:54get by role terus levelnya level berapa

55:56misalkan get by role heading level berapa

55:581,2,3,1,2,3

56:00dan seterusnya

56:02terus si property

56:043 ini

56:06terutama berguna buat kalau misalnya

56:08kalau ini kan halaman yang simple ya

56:10cuma kayak single post

56:12cuma satu artikel

56:14di halaman itu isinya cuma satu artikel doang

56:16tapi kalau misalnya kita

56:18buat halaman yang strukturnya

56:20lebih rumit misalnya e-commerce

56:22halaman depan atau

56:24kalau bukan e-commerce situs berita

56:26atau situs apapun lah yang

56:28ada section-sectionnya

56:30terus satu section misalnya berita terbaru

56:32chart post itu terdiri dari

56:34beberapa artikel

56:36nah itu perlu dicek dari

56:38accessibility tree

56:40udah betul atau belum strukturnya

56:42terus gampang atau nggak untuk

56:44dinavigasi antar section dan

56:46antar artikel

56:48iya

56:50mantap

56:52terus masih accessibility juga nih

56:54color contrast kita bisa liat langsung

56:56bisa liat

56:58mana-mana

57:00ya kan

57:02ke 3 nya

57:04terus kita klik computed

57:06oh

57:08ya mana

57:10kosong

57:12kok kosong sih

57:14ya ada color sih

57:16kok aneh

57:18kok bisa hilang

57:20biasanya semua property nya muncul disitu

57:22semua property

57:24nah ya

57:26color color

57:28oh ini color

57:30kanan bawah color

57:32klik buka

57:34oh klik yang T nya

57:36putih itu RGB

57:38ini

57:40klik warnanya

57:42klik

57:44kotak

57:46kotak warna putihnya itu punya

57:48nggak ngaru

57:50nggak keluar apa-apa

57:52klik panahnya kesini tadi

57:56nah terus

57:58coba hover di

58:00kotak potihnya

58:02nah

58:04no contrast information

58:06nah ini kadang-kadang nggak sih

58:08ini agak hit and miss

58:10bisa kelihatan

58:12di tempat gua bisa kelihatan

58:14web.dev coba

58:16coba buka

58:18web.dev

58:20nah udah slide apa aja

58:22lah event timing API

58:24computed

58:26ini kita close dulu

58:28terus di bawahnya

58:30color

58:32RGB

58:34oh kok

58:36kenapa ya

58:38bentar bentar

58:40biasa biasa

58:42bisa nih sempat gua bisa kalo mau liat

58:44boleh boleh mana

58:46oke ntar

58:48sekalian nanti abis ini mau demo-in

58:50asik

58:52ah

58:54oh

58:56pindahin dulu

58:58nah tadi kan

59:00ini kan

59:02location

59:04inspect

59:06ada reading mode lho sekarang

59:08baru tau

59:10oh iya udah di announce pas I/O kemarin

59:12di top siapa gitu

59:14oh topnya ada Margel

59:20location kan

59:22google computed

59:24contrast ratio

59:30coba ganti warnanya ke

59:32warna yang abu-abu muda

59:34kesukaan desainer

59:36AAA gitu

59:38contrast ratio

59:40satu tujuh satu

59:42nggak lulus

59:44ini ada ini nih ada

59:46bukan nih garis nih

59:48kalo di AAA

59:50di itu ke atas udah nggak

59:52lulus AAA

59:54kalo mau triple A harus ke bawah

59:56tuh masih

59:58bagus tuh

1:00:00jadi kalo AAA itu

1:00:02itu standar yang

1:00:04menengah yang standar

1:00:06accessibility yang ya menengah

1:00:08biasa kalo aturan apa aturan

1:00:10resmi hukum tuh pakainya itu

1:00:12kalo AAA bukan baterai nih

1:00:14AAA itu standar yang

1:00:16paling strict yang maksudnya

1:00:18yang accessible banget dan biasa itu

1:00:20agak spesifik sih jadi misalnya untuk

1:00:22institusi yang emang untuk

1:00:24pernah kita bahas di accessibility

1:00:26oh iya

1:00:28pernah kita bahas

1:00:30nah itu jadi

1:00:32sekarang udah gampang udah nggak bisa

1:00:34excuse ah repot tribut meriksanya

1:00:36nah ini bisa langsung di DevTools

1:00:38tadi kok ada

1:00:40leading mode? mana sih?

1:00:42iya ada

1:00:44salah

1:00:46kok ilang?

1:00:48nah kalo si leading mode ini

1:00:50yang di luar aja di safari

1:00:52udah ada agak lama

1:00:54iya udah lama oh bisa begini ya

1:00:56keren

1:00:58oke nah

1:01:00gua mau demoin

1:01:02breakpoint tau nggak kalo

1:01:04ini bisa breakpoint

1:01:06itu juga sering pakai

1:01:08ya dibagi

1:01:10contohnya

1:01:12source

1:01:14ini gua hapus dulu

1:01:16dia punya

1:01:18blocking segala macem

1:01:20refresh

1:01:22terus mau

1:01:24cari

1:01:26source apa ya

1:01:28nah ini kebetulan dia buka

1:01:30main.js ya

1:01:32main.js nya dari situs ini

1:01:34nah asal

1:01:36aja ya saya pakai

1:01:38saya mau

1:01:40ini aja

1:01:42terus

1:01:44saya bikin

1:01:46breakpoint

1:01:48saya refresh

1:01:50oh ternyata

1:01:52dia nggak lewat disitu

1:01:54terus kita disini aja deh pasti

1:01:56kita

1:01:58tuh dia

1:02:00nge-stop di

1:02:02eksekusi javascriptnya

1:02:04nge-stop disini nanti kita bisa

1:02:06check variable

1:02:08check variable nya apa

1:02:10ini kan karena sudah di

1:02:12minify ya kalo nggak di minify kan

1:02:14kalo misalkan javascript tolong

1:02:16temen belum di minify bisa keliatan lebih baik

1:02:18jadi bisa step over

1:02:20step into segala macem

1:02:22sama bisa terus

1:02:24terus saya paling suka pakai ini

1:02:26kalo lagi nge-debug jadi

1:02:28memang masih pertama

1:02:30saya kalo nge-debug pakai console lock

1:02:32pengen tau value nya apa

1:02:34tapi kalo sudah sampai kayak

1:02:36bigung ini kenapa sih

1:02:38masih nggak bisa saya pakainya

1:02:40debugger

1:02:42bisa langsung ngeliat isinya apa

1:02:44dari setiap step-stepnya

1:02:46dan kalo sudah nemu bugnya

1:02:48ya tinggal dijalani udah

1:02:50biasanya sih

1:02:52kalo gue pribadi

1:02:54console lock itu buat nge-check

1:02:56bentuk data lebih sering itu

1:02:58jadi maksudnya nggak ada error kan

1:03:00nggak selalu ada error beneran

1:03:02tapi pengen tau datanya kayak gimana

1:03:04itu juga overlapped bisa di-check dari

1:03:06network request kan

1:03:08nah cuma

1:03:10breakcoin ini berguna banget kalo tiba-tiba

1:03:12ada error

1:03:14error yang belum kayak handle nggak tau dari mana

1:03:16dan itu breaking sesuatu

1:03:18misalnya ya udah check aja

1:03:20satu persatu di bagian-bagian yang

1:03:22keliatannya mencurigakan

1:03:24kalo masih lancar belum muncul errornya

1:03:26berarti bukan dari sini

1:03:28check tersangka selanjutnya

1:03:30kalo misalnya

1:03:32nyampe situ errornya

1:03:34muncul berarti

1:03:36ada sesuatu yang perlu di-check lagi

1:03:38bisa juga jadi kayak marking

1:03:40bahasanya bisa juga

1:03:42either mau pake console atau mau

1:03:44pake debugger terserah

1:03:46intinya kalo pake debugger itu

1:03:48kita bisa di-idea step-by-step

1:03:50gitu ya

1:03:52terus karena

1:03:54kita bicara console

1:03:56console itu nggak cuma console.lock ya

1:03:58temen-temen

1:04:00kalo liat console itu isinya apa

1:04:02klik aja console

1:04:04enter, terus kemudian misalnya

1:04:06ada assert, clear

1:04:08context, count

1:04:10ada table juga

1:04:12ada lock

1:04:14ada info

1:04:16ada error dan segala macem

1:04:18ada debug kalo misalnya

1:04:20di scriptnya temen-temen

1:04:22masukin console.debug itu

1:04:24di

1:04:26line-nya

1:04:28waktu di jalanin

1:04:30devtool, direload

1:04:32maka waktu di debug itu

1:04:34akan nge-stop disitu dan debuggernya

1:04:36otomatis jalan

1:04:38sebetulnya jujur dari sebanyak

1:04:42metode ini yang pernah

1:04:44gue pake tuh cuma selain lock

1:04:46warn info sama time

1:04:48udah kalo time itu biasanya buat nge-check

1:04:50trace condition atau semacamnya

1:04:52pake table

1:04:54pake table juga suka

1:04:56itu buat apa sih? coba-coba

1:04:58kok unexpected number?

1:05:00itu objek apaan?

1:05:04maksudnya array?

1:05:06atau gimana?

1:05:08misalnya asal aja kayak...

1:05:10itu kan key value store, nggak bisa

1:05:12kalo mau array

1:05:14console.table

1:05:18console.table

1:05:20jadi keren bentuknya

1:05:22itu

1:05:24menarik

1:05:26cuman sayangnya

1:05:28kayak console.info

1:05:30console.warn, console.error

1:05:32di note.js nggak ada ya?

1:05:34iya, di note.js nggak ada, di backend nggak kelihatan

1:05:36warna-warnanya

1:05:38padahal seru kalo misalkan ada warna begitu ya

1:05:40jadi ini hanya bisa berlaku di browser

1:05:42aja, walaupun nggak error ya

1:05:44walaupun kita pake console.warn itu terpada

1:05:46console.lock jadinya

1:05:48metode-nya ada, cuma print nggak berfungsi

1:05:50tidak berfungsi

1:05:52ya, kalo time tetep-tetap

1:05:54ya kalo time ya

1:05:56gimana sih pake console.time?

1:05:58console.time

1:06:00ya udah, jalanin mapnya aja

1:06:02udah

1:06:04default already exist

1:06:14anyway

1:06:16dah, itu

1:06:18debugger bisa dipake

1:06:20juga console

1:06:22ada lebih dari satu, bukan cuma console.lock

1:06:24apa lagi ya?

1:06:28security

1:06:32css overview juga

1:06:34menarik sih

1:06:36hmm, yang itu apa?

1:06:38unused css

1:06:40oh ya, coverage, coverage

1:06:42coverage

1:06:44coba kita cek

1:06:46misalkan

1:06:48ceknya dimana ya?

1:06:50itu di more tools

1:06:52more tools ya?

1:06:54ya, more tools

1:06:56eh, salah

1:06:58more tools

1:07:00tools, coverage

1:07:02refresh ya?

1:07:04kok cuma ini aja?

1:07:10belum selesai kali?

1:07:12css

1:07:14itu, contohnya tuh

1:07:16oh, lambat soalnya di drop-in tuh

1:07:18kan di network ada icon warningnya tuh

1:07:20jadi lambat

1:07:22soalnya slow 3G

1:07:24kan lagi di troto

1:07:26mana tadi? kok ilang?

1:07:28oh, ini coveragenya di bawah

1:07:30iya

1:07:32ini

1:07:34js, js semua ya?

1:07:36itu css paling atas?

1:07:38oh ya, next css

1:07:40ini pake next js

1:07:44nah, disini ada nih

1:07:46unused bytes

1:07:48disini 64%

1:07:50keliatannya dari mana?

1:07:54yang tidak digunakan itu yang merah ya?

1:07:56iya

1:07:58kok gak ada?

1:08:00adanya hijau biru doang

1:08:02kok gak ada yang mana?

1:08:10aneh sekali

1:08:12di klik, di kliknya bisa gak di klik?

1:08:14udah di klik, ini di klik

1:08:16nah, kalo ini merah tuh banyak tuh

1:08:18oh iya

1:08:20importnya masa gak dipake

1:08:22kalau diapus, error dong

1:08:24tapi kan, buat halaman ini

1:08:28ya, buat halaman ini gak dipake

1:08:30cuma mungkin dipake di halaman lain

1:08:32oh iya, bisa jadi

1:08:34sebetulnya, nah

1:08:36cuma kan kadang kalo misalnya

1:08:38baru pengen premature optimization

1:08:40semua di pisah jadi banyak

1:08:42tapi kan sebenernya ini statik

1:08:44kan ini di cached, jadi ya sebetulnya

1:08:46gak apa-apa juga sih, kalo emang

1:08:48hasil performance yang lainnya baik-baik aja

1:08:50cuma minimal kita

1:08:54kita punya senjata ya

1:08:56kita punya tambahan senjata lah

1:08:58terutama biasanya css

1:09:00css yang paling seringnya

1:09:02terutama kalo kita pake legacy

1:09:04misalnya, dululah jaman dulu itu

1:09:06bootstrap dari kapan, cuma gak ada yang

1:09:08nyenggol atau

1:09:10mubek sama sekali, takut

1:09:12berubah semua, makin lama makin banyak

1:09:14makin numpuk

1:09:16ini, bisa lah

1:09:18terus kita

1:09:20mungkin kita pengen ngerapihin pelan-pelan

1:09:22tapi kan, rendah ngeri juga

1:09:24takut nyenggol sesuatu

1:09:26jadi kita bisa pelan-pelan

1:09:28pake ini buat ngebantu liat

1:09:30mana yang gak pernah dipake

1:09:32iya, ini contoh

1:09:34ekstrim ya, contoh ekstrim, kayak saya gak yakin

1:09:36ada yang mengalami

1:09:38tapi misalkan nih, teman-teman

1:09:40mau pake bootstrap

1:09:42tapi hanya button-nya aja

1:09:44yang lainnya pake yang lain

1:09:46atau yang lainnya bikin sendiri

1:09:48kan sayang ya, maksudnya

1:09:50bootstrap itu ada berapa kilobyte gitu kan

1:09:52berapa puluh atau berapa ratus kilobyte pake button doang

1:09:54yang lainnya ya diapos aja

1:09:56berarti harus ke source-nya ya, kalo itu ya

1:09:58bootstrap kan sudah bisa

1:10:00udah modular dia ya

1:10:02import-import ya

1:10:04sekarang ya

1:10:06iya, tinggal pake yang mau aja

1:10:08kalo nggak ya, tailwind kan aja lah

1:10:10pusing amat

1:10:12misalnya kita dapet kode orang lain

1:10:14kode dari jaman, gak tau kapan

1:10:16kode dari jaman firebat masih

1:10:18ngetrele

1:10:20ya mungkin use case-nya lebih kesitu sih

1:10:22kalo bikin baru ya itu tadi

1:10:24bahkan vanilla CSS pun udah cukup canggih

1:10:26kalo mau yang lebih khasis

1:10:28apalagi yang kita dapat

1:10:30misalkan

1:10:32dia bikin sendiri misalkan

1:10:34bootstrap perjuangan

1:10:36.min.css

1:10:38source-nya gak dapet

1:10:40yang minimisenya aja yang dapet gitu kan

1:10:42ya gak apa-apa kalo itu

1:10:44sekarang kan udah bisa di agnify lagi tuh

1:10:46iya, dibalikin lagi

1:10:48terus abis itu ya bisa pake ini kan

1:10:50css kan

1:10:52ngomong soal css

1:10:56kita bisa nambah nih ada

1:10:58apa tuh

1:11:00css overview

1:11:02more tools

1:11:04tadi keliatan

1:11:06masih itu

1:11:08sebentar tanda

1:11:10ini eksperimen ya

1:11:12lab

1:11:14klik

1:11:16matiin dulu, ya capture overview

1:11:18pencet dulu

1:11:20nah bisa liat nih overview dari

1:11:22kira-kira ya kita di halaman ini

1:11:24ada 2700 elemen

1:11:26color

1:11:28palette yang digunakan

1:11:30text color

1:11:32terus yang mana yang

1:11:34kontrasi issue

1:11:36font yang dipake apa

1:11:38terus fontnya dipake dimana

1:11:40berapa kali occurrence-nya

1:11:42oh wow

1:11:44itu kenapa sih fontnya 16,6506px

1:11:48random banget

1:11:50itu kayaknya dikalkulasi secara random

1:11:52ngindarin cls

1:11:54apa biarnya shifting

1:11:56terus kemudian

1:11:58unused declaration

1:12:00itu ada juga

1:12:02nah ini yang gak pakai

1:12:04terus media query yang kepakai

1:12:06apa

1:12:08jadi bisa juga liat

1:12:10kalau kalian misalnya punya media query tertentu

1:12:12mana yang gak kepakai juga bisa keliatan sih

1:12:14nah itu tadi

1:12:16kan udah nambah

1:12:18717px segala macem

1:12:20mungkin media query yang dipake dulu

1:12:22udah obsolete atau kurang

1:12:24sesuai

1:12:26ini enak ya liat overview-nya dari sini

1:12:28coba masuk ke overview summary

1:12:30mungkin temen-temen di sini

1:12:32ada yang masih

1:12:34penyuka id selektor

1:12:36yang mungkin harus berubah haluahan

1:12:38mana id

1:12:40kan itu ada id selektor 0 kan

1:12:42oh iya

1:12:44itu loh id selektor

1:12:46kalau misalnya

1:12:48kebanyakan pakai id selektor

1:12:50yang mungkin harus

1:12:52segera

1:12:54ya kan terlalu

1:12:56spesifik

1:12:58kalau bisa

1:13:00ngasih style itu kan

1:13:02lebih general

1:13:04tergantung lah ada yang mau pakai

1:13:06block element modifier

1:13:08ada yang mau pakai modular

1:13:10gak salah tapi kalau misalnya terlalu banyak

1:13:12di id-in semua ya

1:13:14berarti size css-nya makin gede

1:13:16oh iya maksudnya

1:13:18mungkin risiko aja

1:13:20kita pusing

1:13:22footer misalnya di halaman

1:13:24ada footer, lalu ternyata kenapa

1:13:26kita kasih id footer, tapi di

1:13:28section atau di mana lah

1:13:30di suatu pose gitu

1:13:32posenya ada footernya juga

1:13:34terus ya kayak

1:13:36mental overload aja

1:13:38kita harus kasih kan id itu

1:13:40harus dalam satu halaman

1:13:42harus cuma satu

1:13:44kalau misalnya semua di id-in

1:13:46tambah beban aja sih

1:13:48lebih baik

1:13:50diutamakan

1:13:52ke class

1:13:54ke type

1:13:56atau attribute

1:13:58biar sekalian

1:14:02kalau data attribute

1:14:04biar sekalian mengaplikasikan

1:14:06accessibility

1:14:08yes

1:14:10betul sekali

1:14:12oke

1:14:14ada lagi kah yang mau dibahas

1:14:18habis

1:14:20devtool pak 2

1:14:22kapan pun

1:14:24oh iya ini

1:14:26pertanyaan, ini kan

1:14:28buat

1:14:30ya buat saya pun

1:14:32beberapa fitur

1:14:34performance tadi kan

1:14:36ivan kan udah biasa kan main

1:14:38kalau buat saya yang awam

1:14:40itu kayaknya overwhelming banget gitu

1:14:42devtool secara umum juga kayaknya overwhelming banget kan

1:14:44kalau mulai belajar itu

1:14:46enaknya dari mana ya, buat temen-temen

1:14:48ngobrolin web

1:14:50asik

1:14:52selain dari ngobrolin web

1:15:02terlalu frontal kali

1:15:06terlalu

1:15:08self-proclaim ya

1:15:10terlalu harsel

1:15:12ini ya

1:15:14bisa cek di

1:15:16developer.chrome.com/

1:15:18text/devtools

1:15:20oke

1:15:22nah ini kan itemnya sebenernya banyak banget

1:15:24dan kayaknya sebetulnya

1:15:26gak perlu juga ya kita

1:15:28pelajarin urut satu persatu

1:15:30ngapalin kayak mau buat ujian gitu ya

1:15:32sebenernya gak penting kan kita pick and choose

1:15:34aja bagian, kita lagi perlu optimize

1:15:36apa nih, nah misalnya kita lagi perlu

1:15:38find form issues ya udah kita

1:15:40buka itu, pelajarin itu

1:15:42artikel-artikelnya sih enak sih

1:15:44gampang di cerna, dan hampir selalu

1:15:46ada videonya, dan biasanya mba Jocelyn

1:15:48itu yang apa, yang present

1:15:50jadi maksudnya kita gak harus

1:15:52menguasain beneran semua kan

1:15:54fiturnya banyak banget tuh tadi

1:15:56cuma banyak hal-hal

1:15:58yang menarik dan berguna yang mungkin kita

1:16:00kelewat, nah jadi kita bisa

1:16:02apa, cek di blognya itu

1:16:04ada komen dari

1:16:08NyanJS

1:16:10tentang, by the way, pernah pake eruda gak?

1:16:12eruda? gak pernah

1:16:14eruda itu apa sih?

1:16:16itu, console

1:16:18for mobile

1:16:20browser itu tulisannya, belum pernah pake sih

1:16:22tapi

1:16:24dia bisa kayak drag

1:16:26console di android

1:16:28oh, buat ngedibak android

1:16:30gitu maksudnya

1:16:32url browser

1:16:36jadi, kalau di android

1:16:38kalau di android kan

1:16:40kalau di mobile

1:16:42buka deh, buka, buka aja eruda

1:16:44.lyri.io

1:16:46android

1:16:52jadi kayak

1:16:54kayak

1:16:56eruda apa ini

1:16:58lyri.io

1:17:00tapi keren sih, coba aja klik salah satu

1:17:02kalau monitor, klik aja

1:17:04di plugin, ya monitor lah

1:17:06mungkin

1:17:08klik aja, terus nanti keluar kan ininya

1:17:10tuh bisa kelihatan console, jadi kalau lagi di mobile

1:17:12bisa ada overlay ini

1:17:14jadi kayak gak perlu

1:17:16kalau

1:17:18kita kan mau

1:17:20ngedibak di mobile, saya

1:17:22pakenya remote debugging tuh

1:17:24bisa disambung ke chrome

1:17:26terus pake cable, remote debugging

1:17:28bisa, iya kan, pake cable kan ya

1:17:30ya, USB

1:17:32USB debugging, nah ini mungkin lebih simple

1:17:34thank you, thank you mas Jan

1:17:36belum pernah pake

1:17:38wah coba, keren sih

1:17:40berarti bisa

1:17:42gak mesti di

1:17:44bisa di ini juga dong ya, bisa di

1:17:46safari coba ya

1:17:48oke, nah berikutnya

1:17:50kalau mau belajar lebih lanjut

1:17:52temen-temen bisa ke channelnya

1:17:54youtube channelnya chrome dev

1:17:56cari aja, atau youtube.com/

1:17:58@chromedev

1:18:00pake S, liat di bagian

1:18:02bawah, nah di sini

1:18:04ada what's new in devtools isinya adalah

1:18:06jislin semua

1:18:08siapa yang nonton

1:18:10kertian dia

1:18:12tiap minggu, eh tiap minggu apa tiap bulan

1:18:14dia ada update yang baru, tentang

1:18:16devtools

1:18:18berserta dengan apa ya

1:18:20versi chrome yang

1:18:22muncul kan, jadi 103, 104

1:18:24sampai sekarang sudah 112

1:18:26silahkan

1:18:28ditonton aja

1:18:30saya tonton ini

1:18:32gak abis-abis

1:18:34oh iya damar

1:18:36kalau devtools gs framework

1:18:38nukes devtools harus ditiru semua framework

1:18:40kenapa tuh, boleh tahu gak alesannya

1:18:42saya jadi penusaran

1:18:44nah kita bikin, ini bisa

1:18:46dijadikan episode sendiri ini devtools

1:18:48tapi integrasi dengan extension

1:18:50atau library

1:18:52kan kayak, yang ini ya

1:18:54karena masih ada react

1:18:56devtools, masih ada

1:18:58redux devtools

1:19:00ada suspect

1:19:02gak ada ya

1:19:04view, ada view

1:19:06iya ada view

1:19:08atau yang third party yang

1:19:10berdasarkan fungsi, misalnya

1:19:12x to accessibility, masih buat

1:19:14accessibility, kalau yang baru

1:19:16devtools asli kan, ya masih terbatas banget

1:19:18tuh, nah biasa kalau

1:19:20accessibility, pakai x atau semacamnya

1:19:22apa tuh namanya, gue lupa deh

1:19:24itu muncul

1:19:26accessibility

1:19:28inside for web

1:19:30yang dari punya si

1:19:32edge

1:19:34accessibility inside

1:19:36for web, bagus

1:19:38nah itu biasa munculnya

1:19:40di devtools, jadi ada tab baru

1:19:42ya sama lah, mirip kayak tab lighthouse

1:19:44gitu, cuma ini third party

1:19:46detail banget, kayaknya kita

1:19:48pernah ke sini juga ya

1:19:50pas episode accessibility

1:19:52nah itu

1:19:54banyak juga yang sudah kita bahas

1:19:56iya, belum pernah pakai nax

1:19:58jadi belum pernah pakai devtools

1:20:00tapi ini seru sih, maksudnya third party integration

1:20:02beberapa hari

1:20:04yang lalu, saya pernah

1:20:06pernah dapat

1:20:08promo

1:20:10course, tentang nax.js

1:20:12katanya, nax.js ini adalah salah satu

1:20:14framework yang developer

1:20:16experience-nya bagus

1:20:18makanya tadi begitu dikasih tahu

1:20:20jadi penasaran, apa sih bagusnya

1:20:22gitu

1:20:24kalau sveltekit

1:20:26devtools integration-nya bagusnya ya

1:20:28sveltekit, nggak ada

1:20:30kan sveltekit

1:20:32nggak ada devtools gitu-gitu kan

1:20:34mungkin ada library

1:20:36tambahan

1:20:38masalahnya kan dia di compile

1:20:40itu yang agak ribet

1:20:42kalau dev environment

1:20:44mungkin bisa nggak tahu

1:20:46ya nggak tahu sih, tapi belum ada sih

1:20:48sejauh ini, belum tahu

1:20:50mungkin ada, tapi kita belum tahu juga

1:20:52kalau teman-teman yang menonton

1:20:58kayaknya nggak ada yang penggunaan

1:21:00juga

1:21:02apa tuh?

1:21:04misalnya lihat nih bagian features

1:21:06ke

1:21:08getting started

1:21:10terus kemudian ke features

1:21:14scroll

1:21:16scroll

1:21:18nah, scroll terus

1:21:20jadi bisa kayak ngelihat

1:21:22per komponen, per

1:21:24wow

1:21:26ada

1:21:28tree-nya juga ya

1:21:30dom tree, iya

1:21:32tapi justru

1:21:34jangan-jangan nax devtools ini

1:21:36lebih bagus dari view devtools, ada nggak sih

1:21:38view devtools

1:21:40view devtools ada

1:21:42yang dia nempel ke

1:21:44chrome devtools gitu kalau nggak salah

1:21:46iya

1:21:48kalau nggak salah ya

1:21:50kalau react kan ada juga, kita bisa liat tree-nya

1:21:52di react devtools

1:21:54regardless nggak peduli kita pakai

1:21:56framework apapun

1:21:58kalau misalnya masih react

1:22:00react dan devmob

1:22:02bisa ngeliat tree-nya

1:22:04oke, wah ini menarik nih

1:22:06untuk di pelajari

1:22:08view devtools ada

1:22:10view devtools ada

1:22:12UIKit

1:22:14UIKit ini apa?

1:22:16devtools UIKit

1:22:18oh, jadi kita

1:22:20bisa integrasi dimasukin

1:22:22ke devtools-nya ya

1:22:24oh, seru ya

1:22:26seru ya ekosistemnya ya

1:22:28ekosistem devtools ini

1:22:30ide episode

1:22:32coba masukin

1:22:34ya, tulis, tulis, tulis, tulis, catat, catat

1:22:36mantap

1:22:38advanced devtools ekosistem

1:22:40devtools

1:22:42system dalam kurung

1:22:44max devtools extension

1:22:46react devtools

1:22:48redux

1:22:50misalnya, di antara kita bertiga

1:22:52belum ada yang pengalaman

1:22:54menggunakan view ya

1:22:56kita undang nggak sih

1:22:58kita harus cari orang yang menggunakan view

1:23:00iya, eh ada komunitasnya nggak sih

1:23:02view ID

1:23:04ada, pasti

1:23:06damar aja kita undang gimana

1:23:08demo in max devtools

1:23:10deal, deal, deal

1:23:12langsung ditembak

1:23:16kalau nggak komen, berarti iya

1:23:18opin ya

1:23:20opinionated sekali

1:23:22orang dia

1:23:26nggak nonton lagi

1:23:28jadi nggak belas

1:23:30iya, iya, iya

1:23:32iya, iya, iya

1:23:34oke, oke, oke

1:23:36nanti kita carilah ya, mudah-mudahan damar mau ya

1:23:38kalau nggak, kita harus cari orang lain

1:23:40oke, oh cuma bagus kan

1:23:42di bikin seri ya, kita bahas library

1:23:44atau framework, tapi

1:23:46tetap dari perspektif disambungin

1:23:48sama teknologi web

1:23:50betul, betul, betul

1:23:52oh iya, ini ada komen

1:23:54sedikit ini ya, damar juga ya

1:23:56tailwind atau uno css

1:23:58mungkin tuh, eh vanille aja

1:24:00nggak bisa

1:24:02coba, kalau bisa

1:24:04kalau kenal sih

1:24:06boleh dikenalin, bagiin nomor

1:24:08whatsapp-nya dong

1:24:10ternyata yang muncul

1:24:12apa dia nggak pilih whatsapp ya

1:24:14Envandy Mas

1:24:16ini tailwind

1:24:20atau uno css, uno css ini

1:24:22yang bikin si itu kan

1:24:24si Anthony Fu

1:24:26dia produktif banget sih

1:24:28dia juga dari

1:24:30ekosistem Vue.js kan

1:24:32dia pakai Vitez ya

1:24:34dia yang bikin Vitez ya

1:24:36sama kemarin

1:24:38Iseng nyobain ini

1:24:40Open Props

1:24:42yang punya Arjal

1:24:44itu keren juga sih

1:24:46itu keren juga

1:24:48karena itu pure css ya

1:24:50berbasis custom properties

1:24:52variable

1:24:54tapi kita harus benar-benar

1:24:56bisa css

1:24:58kalau tailwind kan kita masih bisa

1:25:00coba-coba ya, oh mungkin ini

1:25:02kalau ini

1:25:04kita benar-benar harus bisa tahu

1:25:06vanilla css-nya, baru bisa pakai

1:25:08gitu, oke

1:25:12ada lagi, ada lagi

1:25:14penutup, penutup

1:25:16udah, oke

1:25:18kalau nggak ada

1:25:20kita udahan dulu, teman-teman terima kasih banyak

1:25:22buat obrolannya

1:25:24malam hari ini seru-seru

1:25:26dan banyak belajar juga

1:25:28saran topik seperti biasa

1:25:30bit.ly/

1:25:32otomatis kan

1:25:36pakai operator

1:25:40pakai operator, oke sekian dulu

1:25:42buat malam ini

1:25:44kita ketemu lagi insyaAllah minggu depan

1:25:46selamat malam, selamat istirahat

1:25:48jaga kesihatan, bye bye