Bedah Situs - Ngobrolin WEB

0:00[Music]

0:12Dapatkan hanya di Domestika

0:14[Music]

0:20[Music]

0:24Halo, selamat malam. Selamat malam.

0:30Asik ya. Selasa malam waktunya

0:34ngobrolin web. Ngobrolin web.

0:37Kirain selasa malam waktunya Timnas.

0:40Banyak yang usuh, gara-gara dibantai, gak apa-apa ya.

0:44Kita hibur. Yang penting lolos.

0:48Yang penting lolos. Iya. Beda kelas, beda kelas.

0:54Ternyata nanti di Bapak Penyisihan ketemu lagi sama Jepang.

0:58Nggak mungkin lah.

1:00Dia kan di atas kan?

1:02Biasanya di seber sih kayak yang Asia, apa?

1:06Kayak gomor-gomor.

1:08Gomor-gomor kan?

1:10Iya, tapi kan kayaknya ada pot-potnya gitu loh.

1:14Gak bakal ketemu satu grup lagi.

1:18Iya, ketemunya sama yang lebih jago daripada Jepang.

1:22Kalaupun masuknya ya.

1:26Sekian kesinkan masuknya lagi dia, ya pasti langsung pulang.

1:30Itu di Domestika.

1:32Eh, send sponsor dulu dong.

1:36Sorry ya.

1:38Lupa, belum buka ini.

1:40Belum buka topik.

1:42Oke, episode malam ini masih disponsori oleh Domestika.

1:50Ya, jadi kita kolaborasi dengan Domestika untuk beberapa episode kemarin dan beberapa episode mendatang.

2:00Jadi kalau buat teman-teman yang mau beli hosting, hostingnya udah canggih loh.

2:06Kalau jaman dulu kan hosting cuma bisa terbatas lah ya. Cuma bisa poll, cuma bisa php, ngas equal gitu kan.

2:12Sekarang kayaknya hampir semua bahasa udah di dukun ya.

2:16Not.js bisa, go lang.

2:18Not.js bisa, go, bisa.

2:20Rush juga bisa.

2:22Jadi kalau mau nyobain boleh pakai promo code ngobrolinwebdn.

2:26Dn itu dominisia.

2:28Itu ada di bawah.

2:30Nanti dapet diskon.

2:32Diskon 10%.

2:34Semua paket web hosting, diskonnya berlaku untuk seiklus 1 atau 2 tahun untuk pembelian pertama.

2:40Jadi terima kasih banyak buat dominisia yang sudah mendukung acara kita ini.

2:46Oke.

2:48Malam hari ini kita akan kembali membedah situs.

2:52Bedah situs.

2:54Terakhir kan pancingan ya.

2:56Situs pancingan.

2:58Sekarang beneran.

3:00Ternyata ada yang submit.

3:02Dari mas IM Gdev.

3:06Gdev itu apa ya?

3:08Google Dev.

3:10Google Developer.

3:12Awalnya mau submit website yang dibuat kantor tapi takutnya nggak boleh.

3:20Terus ada website yang dia buat untuk temannya juga ternyata nggak bisa diakses gara-gara.

3:28Apa?

3:32Domainnya nggak diperpanjang.

3:36Padahal bisa dikasih source code-nya aja ya.

3:40Source code-nya boleh nggak ya?

3:42Nggak boleh kali ya.

3:44Akhirnya disapit ulang.

3:48Sapit ulang website undangan ya. Kayaknya ya website pernikahan tapi kode-nya 3 tahun yang lalu.

4:00Ada ini juga nih.

4:02Tapi kayaknya belinya salah ya.

4:04Ada source code-nya juga nih.

4:06Nanti kita bongkar-bongkala ya.

4:10Loh.

4:12Salah ya.

4:14Oh ada ini-nya.

4:18Nah ini dia.

4:20Bacanya gimana nih?

4:22Fendangan.

4:24Fendangan.

4:26Biar EG. Sekarang kan U itu jadi V.

4:28Biar KPI metal.

4:30Ini tampilannya.

4:32Oh ada musiknya.

4:36Nggak denger ya musiknya?

4:38Langsung bunyi kan. Langsung autoplay.

4:42Denger ya?

4:44Dengar nggak?

4:46Enggak kan? Karena nggak share tab ya.

4:50Ini kita bisa tebak lagu apa.

4:54Tapi harus di-share ulang ya bentar ya.

4:56Ada tulisannya.

4:58Share-nya harus pakai itu.

5:00Share tab.

5:02Gimana dia?

5:04Nah ini ada suaranya kan.

5:08Ini ada apa nih?

5:12Begitu ke kanan atas itu loh.

5:18Karena atas kan udah ada dulu nih.

5:20Karena atas itu yang ada buat kemudahan tuh.

5:24Oh ini.

5:26Oh.

5:28Keren juga.

5:30Pakai apa ya? MP4 ya?

5:32Atau MP3?

5:34MP3.

5:36Itu kan ada source code-nya.

5:38MIDI.

5:40Coba lagi. Penasaran.

5:44Oke.

5:50Mana media?

5:52Apa nih? MP3.

5:54Oh nggak kelihatan ya.

5:56Nggak kelihatan ya.

5:58Berarti present-nya diulang lagi.

6:00Sekarang balik lagi ke full screen.

6:04Cuma mau dengerin suara doang.

6:06Nah.

6:08Nih MP3.

6:10Minang.

6:12Tuh udah kelihatan udah ketahuan juga kan judulnya.

6:14Dari judul.

6:16Ternyata ini adat Minang.

6:18Ini 3 tahun yang lalu.

6:22Oh 2002. Dikitnya 2022.

6:24Oh 2023.

6:26Oke.

6:28Namanya Grafis.

6:30Iya itu nama orang ya.

6:34Pasti developer.

6:36Bukan desainer. Grafis.

6:38Desain grafis.

6:42Ntar ada yang ngasih nama anaknya.

6:44Figma.

6:46Oh Figma.

6:48Oke.

6:54Jadi malam ini kita akan

6:56membedah situs ini.

6:58Jadi ini adalah situs landing page kali ya.

7:00Tadi ada

7:02depannya itu.

7:04Ini kita bisa masukin nama ya.

7:06Nama dan keluarga.

7:08Oh iya bisa.

7:10Enggak ya tulis nama.

7:12Tulis nama Eka.

7:14Tulis nama keluarga bisa

7:16ngobrolin web.

7:18Oh iya.

7:20Oh musiknya bisa di index lagi.

7:22Ini gak copyright ya.

7:26Ada itu.

7:28Can help falling in love.

7:30Apa lagi?

7:32Oh cuma 2.

7:34Cuma 2.

7:36Oke.

7:38Tadi udah dimasukin nama. Terus ada

7:40keterangannya.

7:42Ketika nya kapan.

7:44Oh ini fontnya lucu juga ya. Menarik ya.

7:46Ini sama ini fontnya sama.

7:48Ini standar.

7:50Ini gimana tadi?

7:52Mobile.

7:54Kalau mobile fotonya ilang.

7:56Kasian. Yang kiri tuh pasti udah

7:58capai-capai foto pre-wet kan.

8:00Pasti itu fotonya lama

8:02ribut.

8:04Oh yang sebelah kiri ya.

8:06Ya yang kiri.

8:08Itu yang bunga.

8:16Bunga itu bisa kembang pempis.

8:18Pake jeep.

8:20Itu bunganya gitu-gitu.

8:22Iya kayak ada animasinya tuh.

8:26Ini bukannya pakai CSS bisa ya?

8:28Bisa lah.

8:30Gak tau ini pakai apa coba.

8:32Bukannya opacity.

8:34Apa ini?

8:36Kok gak ke select ya?

8:40Deep ya. Di dalam deep berarti ya?

8:42Di sini.

8:44Background ya.

8:46Ini opacity nya tuh jalan tuh.

8:48Pake JS.

8:50Di edit opacity nya berubah-ubah gitu.

8:52Bukan pakai animate.

8:54Bukan pakai animate. Pake JS ya.

8:56Berarti image, background,

9:00terus opacity nya yang dimainin pakai

9:02JavaScript ya.

9:04Oke.

9:06Terus kalau kita pencet next itu

9:08kita dikasih

9:102 acara karena ada

9:12karnika dan resepsi.

9:14Jadi di sini ada petanya.

9:16Petanya gak bisa diklik kanan ya.

9:18Kalau diklik buka modal.

9:22Ya, buka modal.

9:24Di Riau.

9:26Wuh, bunyi lagi.

9:28Butuh modal.

9:30Terus kalau ingatkan

9:34saya masuk ke Google Calendar.

9:36Boleh calendar nya masih aja?

9:40Jangan.

9:42Ga ada yang rahasia juga sih.

9:44Ternyata ketemu dengan

9:48Presiden, ketemu dengan...

9:50Tenggak.

9:52Bayar tagihan,

9:54bayar ini.

9:56Isi tokan listrik ya.

10:02Itu isi listrik.

10:04Oke.

10:06Ini...

10:08Ini...

10:10Indonesia langsung lupa

10:12calendar event nya.

10:14Kemungkinan besar menggunakan

10:16nest.js. Bener gak?

10:18Ya, iya.

10:20Itu ada nest.config.js.

10:22Next config itu isinya apa sih?

10:24Iya, config buat nest.js.

10:28Masih webpack.

10:30Ya, masih ya.

10:32Iya, belum...

10:34Kalau sekarang udah...

10:36Udah turbo pack atau masih

10:38bisa milih?

10:40Atau harus pakai...

10:42Sekarang by default kayak si turbo pack.

10:44Udah by default ya?

10:46Iya. Udah bukan

10:48experimental.

10:50Ini yang menarik nih CSSnya.

10:52Kalau misalnya

10:54masih ada

10:56field webpack di config

10:58sih gak ditimpa.

11:00Tetep pakai webpack.

11:02Cuma kalau baru by default udah pakai

11:04turbo pack.

11:06Oke.

11:08Wait sebentar.

11:10Yang subnet kan

11:12must

11:14gdf nih.

11:16Tapi yang punya projectnya

11:18mas graphis.

11:20Tapi fotonya sama.

11:22Ini projectnya punya

11:24gdf.

11:26Tapi yang commit

11:28mas graphis.

11:30Eh, sama ya?

11:32Orangnya sama.

11:34Akunnya 2.

11:36Oh ini...

11:38Coba...

11:40Coba lihat commit.

11:42Ada 2 akun.

11:44Dua akun, oke.

11:46Ini ada 2. Orangnya sama, fotonya sama.

11:48Itu sama-sama mas graphis itu.

11:50Akan iya namanya graphis, tapi jadi

11:52webdev kan.

11:54Jalan-jalan punya adik namanya

11:56webdev, jadi graphis designer.

11:58Selamat malam.

12:04Siapa nih?

12:06Kizois.

12:08Gak, gak pakai keyframe ternyata.

12:10Pakai JavaScript.

12:12Aldebaran.

12:14Next config islin matiin

12:16biar production gak gagal build.

12:18Oh, biasanya

12:20bikin gagal build gitu.

12:22Kenapa? Kenapa

12:24harus dimatiin? Karena ini ya

12:26masih pakai

12:28yang require-require gini ya.

12:30Masih gadul ya.

12:32Nggak apa-apa kalau JS sih.

12:36Nggak ngaruh kan?

12:38Gak tau.

12:40Di dunia virtual kadang-kadang

12:42ada masalah-masalah mistis.

12:44Mau complain sedikit.

12:46Kalau mereka

12:48ke GitHub-nya,

12:50buka di tab baru,

12:52di tab baru.

12:54Gak pergi ke

12:58commit semuanya,

13:00commit apa lagi ya.

13:02Hal pertama yang saya comment

13:06di sini adalah

13:08commitnya kita menggunakan

13:10conventional.

13:12Sentang hijau.

13:14Gak sign.

13:16Kirain commit message-nya.

13:18Oh, sign commit.

13:20Itu penting sekali.

13:22Sign commit.

13:26Oh, yang kayak ini ya?

13:28Yang kayak kemarin itu ya? Harus di

13:30approve ya?

13:32GPG key atau

13:34SSH

13:36juga bisa.

13:38Bukannya itu automatis ya?

13:42Gue malah nggak nyander.

13:44Gimana cara setting-nya?

13:46Ini baru gue mau kasih.

13:48GitHub sign commit.

13:52Gak mesti GitHub juga.

13:56Semuanya bisa git.

13:58Semua git.

14:00Bukan semua lain.

14:02Semua git.

14:04Semua git hosting-nya.

14:06Oh, pakai global. Pantesan.

14:08Mau pakai patch juga bisa.

14:10Harus designnya.

14:12Kalau udah sekali

14:14di...

14:16Sekali enable.

14:18Dan abis itu lupa.

14:20Abis itu lupa.

14:22Ini adalah

14:24salah satu

14:26requirement dasar.

14:28Kalau misalnya di tempat saya gue kerja.

14:30Semua pekerjaan harus

14:32design.

14:34Iya, iya, iya, iya.

14:38Oke.

14:42Mudah-mudahan mas

14:44grafisnya datang ya.

14:46Nonton gitu maksudnya.

14:48Nah nonton ya itu. Coba di komen

14:50say hi dong. Mana mas grafis, mana mas grafis?

14:52Iya, boleh. Yang punya...

14:54Ya pertama-tama kita ucapkan terima kasih banyak.

14:56Udah berpartisipasi ya.

14:58Jadi kalau teman-teman punya...

15:00Akhirnya dapet pasien juga setelah

15:02berapa... Berapa bulan kita

15:04minta apa? Cari-cari situs yang

15:06muda-muda. - Udah datang malah mas Danang Jufri.

15:08Samburnya.

15:14Nah mas Kay, saya tanya tuh

15:18apa gunanya, apa fungsinya

15:20dengan... - Oh iya, fungsinya

15:22yang ini ya.

15:24Shining Commit ya.

15:26Ya pasti

15:28pertama buat security.

15:30Jadi kalau kalian mau

15:32mencoba

15:34coba bikin

15:36repo-nya sendiri public.

15:38Saya pakai

15:40komputer yang belum pernah sign commit.

15:42Coba bikin aja

15:44gitconfig username sama gitconfig

15:46email-nya orang yang

15:48I don't know.

15:50Kalau kalian tahu emailnya dan Abrahamov. - Impersonate gitu.

15:52Ya, dan

15:54dan pakai emailnya dan Abrahamov gitu

15:56misalnya, post aja commit-nya.

15:58Nanti yang... - Elon Musk @ email.com

16:00Itu nanti yang muncul namanya

16:02username-nya itu dan Abrahamov.

16:04Nah,

16:06kalau sudah muncul commit seperti itu kan bisa jadi

16:08kayak, kalau di luar sana ya

16:10kalau misalnya

16:12somehow seorang

16:14nge-post commit gitu, ngaku-ngaku sebagai

16:16dan Abrahamov, dan Abrahamov bilang

16:18"No, itu bukan saya. Semua

16:20commit dari saya

16:22saya pasti psycho." - Ada cintang

16:24cintang ijunya? - Iya.

16:26Coba aja buka. - Kayak twitter ya

16:28ada cintang ijunya ya? - Iya.

16:30Buka... - Cintang biru.

16:32Coba github-nya siapa lagi tuh?

16:34Github-nya mungkin...

16:36Mas Riza mungkin jadi contoh.

16:38Mas Riza belum cinta. - Bisa dibuka?

16:40Ya, sama. - Emang bisa dibuka?

16:42Eh, emang bisa kelihatan?

16:44Dari mana kelihatannya?

16:46Buka satu repo, yang ada

16:48commit-nya Mas Riza.

16:50Itu cintang hijau itu.

16:52Itu cintang hijau itu.

16:54- Oh, ini C.I.

16:56C.I. ini kan? - Itu, itu G.P.G.

16:58Sine. - C.I.

17:00C.I. - Oh, sorry ya, sorry.

17:02Ke... - C.I.

17:04Ke ini, ke ini.

17:06Ke... - Ke commit.

17:08Verified.

17:10Oh, verified.

17:12- Cintang ijun verified. Klik aja, klik.

17:14Klik verified ya.

17:16Tuh, kelihatan.

17:18C.I. was signed by

17:20verified signature.

17:22G.P.G. ID-nya itu.

17:24And more about vigilant mode.

17:26Vigilant mode? Apa nih vigilant mode?

17:28Ya itulah mencegah

17:30mencegah impersonate.

17:32Siapa gitu.

17:34Ngaku-ngaku Mas Riza

17:36nge-push commit ke

17:38Actifate, bikin PR.

17:40Terus dia approve sama admin.

17:42Hmm.

17:44Ternyata nyolong semua

17:46user. - Iya juga ya.

17:48Karena kita

17:50apa, config

17:52username dan

17:54username dan apa

17:56ya, nama dan email

17:58untuk ke

18:00GitHub, itu nggak perlu password ya.

18:02Jadi kita bisa pakai

18:04nama siapa aja sebenarnya. Dan email

18:06dari mana aja, nggak di-conform

18:08juga kan emailnya ya.

18:10Iya ya, benar juga.

18:12Dah.

18:14Sip.

18:16Halo Wilbert.

18:20Nah Wilbert ini juga ini ya.

18:22Pasti pada kenal ya.

18:24Dari GDG

18:26Surabaya.

18:28Itu pertama

18:30tadi harus

18:32di-sign. Cara sign-nya

18:34adalah dengan config ya.

18:36Config global ya.

18:38G.P.G. sign. Ini langsung aja

18:40jalan ini udah selesai gitu.

18:42Harus, harus generate G.P.G.

18:44juga. - Harus, harus di-generate dulu kan?

18:46Ada step-nya di sini juga ada.

18:48Oh ini, ini.

18:50Iya.

18:52Itu generate ya G.P.G. key

18:54nanti dimasukin ke

18:56GitHubnya. - Oh ini verified.

18:58Dari tadi dilihat di sini aja ya harusnya ya.

19:00Tapi generate

19:04G.P.G. key-nya nggak ada di sini ya?

19:06Oh ini ya. - Ada-ada nanti di bawah.

19:08Di bawah kan ada. - Di bawah?

19:10Ini? - Atas, atas, atas

19:12dikit, atas dikit.

19:14Oh generate G.P.G. key.

19:16Generate your G.P.G. key.

19:18Ini kita share dulu lah ya. - Bisa di GitHubnya juga.

19:20Bisa di Rokal.

19:22To you.

19:24Dan bisa SSA side juga

19:26bisa. Nggak perlu SSA G.P.G. key.

19:28Kayak gini ya.

19:30Hampir sama

19:32seperti kita

19:34set up untuk GitHub ya.

19:36Push ya. - Push G.P.G.

19:38Push SSA via SSA.

19:40Kalau misalkan kita mau

19:42apa?

19:44Mau

19:46git clone

19:48kalau pakai SSA kan kita harus

19:50itu dari setting dulu kan.

19:52Kayak gitu ya, kurang lebih ya.

19:54Oke, oke.

19:56Sapa lagi?

19:58Itu yang pertama.

20:00Yang kedua?

20:02Yang mau dibahas?

20:06Ininya?

20:08Coba lihat konfignya.

20:10Apa? Next

20:12atau Package?

20:14Yesan.

20:16Ya, coba lihat. Package-nya apa aja?

20:18Package Yesan.

20:20Dependency.

20:24Ada Turbo Pack tuh?

20:26Dia pakai Dev Turbo. Apa itu Dev Turbo di atas?

20:28Hah?

20:30Itu Dev Turbo. - Oh, yang pakai Turbo.

20:32Jadi kan

20:34masih pakai flag kan.

20:36Iya, jadi Interchangeable dulu.

20:38Masih transisi ya?

20:40Masih dulu pas sebelum dipindah,

20:42kalau pengen nyoba nih, tanpa harus

20:44mengomit, tanpa harus bikin keputusan

20:46dulu, pindah nih

20:48dari WP ke Turbo Pack, coba aja jalan

20:50pakai Turbo.

20:52Ngecek yang jalan apa, yang error apa.

20:54Kalau misalnya semua udah smooth,

20:56ya bisa apa?

20:58Kalau mau switch ke Turbo Pack,

21:00tinggal switch aja.

21:02Browser list

21:04since 2015.

21:06Nggak ketinggalan jauh itu ya, udah 10 tahun.

21:08Browser list

21:12since 2015.

21:14Better di-update

21:18pakai yang 2 major

21:20browser terakhir, atau

21:22non-ID, lebih

21:24sederhana jadinya.

21:26Oh, ini target

21:28kompilasi ya, berarti ya?

21:30Browser yang

21:322015

21:34atau yang lebih baru ya.

21:36Ini terlalu panjang sih.

21:38Terlalu panjang.

21:40Terlalu lampau.

21:42Ilmu baru, betul.

21:46Saya juga inget sih

21:48setup-nya, tapi nggak inget

21:50ternyata itu fungsinya buat verified itu.

21:52Waktu itu kalau nggak salah, mau submit

21:54sesuatu ke

21:56repo, disaratkan

21:58harus jalanin itu dulu.

22:00Jadi setup-nya juga

22:02karena terpaksa.

22:04Gak boleh.

22:06Kalau saya

22:08harus dari kantor ya.

22:10Jadi preacher soal itu.

22:12Nah, cuma

22:14gue malah

22:16nggak aware soal ini.

22:18Tapi, jadi kalau di

22:20repo pribadi, yang project pribadi,

22:22banyak yang nggak ada centangnya.

22:24Cuma barusan ini barusan banget, jadi

22:26kita cek

22:28di repo

22:30organisasi pribadi, tempat kerja,

22:32centang semua kelihatannya di on-boarding

22:34guide atau whatever, emang

22:36suruh ngejelani comment itu, tapi

22:38di save-nya ke .git

22:40di project-project repo

22:42kerja, jadi by default emang

22:44setiap kapus udah centang.

22:46Kan tadi ada pilihan yang pertama,

22:48kalau nggak pakai flag global, kan

22:50ke save-nya ke .git yang

22:52di hiriku itu.

22:54Per folder, misalnya

22:56folder indoor, semua

22:58project yang di dalam folder itu

23:00pakai .git kerja.

23:02Iya, ponnya

23:04.git kan emang apa?

23:06.git terdekat lah.

23:08.git config.

23:10Oke.

23:12Sebelum lanjut, ini ada ini nih.

23:14Komentar menarik nggak?

23:16Disoise.

23:18"Saya mau pindah ke app dev,

23:20tapi sayang banget butuh spek PC

23:22laptop yang agak tinggi masih

23:24nabung biar eksperimen lagi soalnya baru lulus

23:26SMA." Wah, baru lulus SMA udah

23:28belajar ini ya. Maksudnya mau jadi

23:30web dev.

23:32Natif kali ya maksudnya.

23:34Web dev, ya. "Saya mau pindah

23:36ke app dev." Oh iya.

23:38Kalau app dev memang

23:40butuh

23:42mesin yang lebih

23:44kencang. Kalau web dev

23:46selama masih bisa

23:48berhasil aman.

23:50Ya, bisa di cloud juga kan

23:52bisa kayak pakai

23:54semacam yang online

23:56kayak code sandbox lah

23:58atau dulu sebelum itu ada

24:00IDX ya.

24:02"Keyjoys pindah ke web dev." Nah, lebih

24:04murah. Iya, mendingan web

24:06biar ada. Entry,

24:08better entry-nya lebih murah.

24:10Lebih, ya, lebih

24:12terjangkau.

24:14Ya, lebih terjangkau. Ya, sepunyanya

24:16apalah laptop yang udah ada,

24:18kemungkinan besar ya bisa dipakai.

24:20Nggak bisa jalanin next.js

24:22nggak usah khawatir banyak. Vanilla bisa.

24:24Aman ya.

24:26Kalau next.js mungkin agak berat ya.

24:28Nggak perlu

24:30VS Code. Nggak perlu

24:32VS Code. Nggak perlu pakai FIM.

24:34Belajar FIM ya.

24:36Ringan.

24:38Kalau

24:40kalau app dev mungkin

24:42agak susah pakai FIM ya.

24:44Karena harus

24:46kompilasinya harus pencet tombol

24:48play gitu kan.

24:50Ya banyak lah ya.

24:52Iya, IDX sekarang udah jadi Firebase Studio.

24:54Ganti nama, ganti branding.

24:56Atau di GitHub bisa

24:58pakai Codespaces. GitHub Codespaces.

25:00Tapi ada free tier-nya ya.

25:02Jadi jangan melampaui

25:04perangas aja.

25:06Jangan udah tinggal lagi jalan.

25:08Pastiin. Coupar nolos. Oh nggak.

25:10Dia kalau 5 menit belum aktif, mati sendiri.

25:12Oh dia auto shutdown.

25:14Studen kan?

25:16Ada akun

25:18ada email studen nggak?

25:20Kalau ada kan bisa dapat studen tag ya.

25:22Kalau di GitHub. Oh iya yang kita bahas

25:24kemarin itu.

25:26Bukan, beda. Kalau kemarin itu Google.

25:28Mas Tize juga.

25:30Web dev ringan.

25:36Bisa pakai VPS. Betul.

25:38Bisa pakai VPS.

25:40Coding pakai terminal ya. Kalau mobile

25:42memang agak berat ya.

25:44Jadi ya salah satu kelebihan

25:46nya web dev juga.

25:48Oke lanjut. Ini tadi

25:50browser release-nya kalau bisa yang

25:52lebih baru kali ya. Ngapain kita support

25:54terlalu panjang ya?

25:562015 berarti

25:58IANA

26:00masih ya. Masih di support ya.

26:02Intinya jadi banyak polyfill kan.

26:06Atau compilingnya

26:08juga jadi kayak ke JS.

26:10JS.

26:12Common JS.

26:14Kalau web dev murah

26:18apakah bisa coding pakai tablet?

26:20Bisa. Pakai handphone juga bisa.

26:22Asal sabar.

26:24Asal sabar aja.

26:26Saya pernah pakai, mencoba

26:30menggunakan tablet.

26:32Pakai termux loh. Codingnya pakai

26:34VIN. Coba, wah ini.

26:36Benar. Bisa.

26:38Saya pernah beneran pakai ini loh.

26:40Jadi kayak server down.

26:42Saya harus ke server

26:44pakai SSH.

26:46Terus saya pakai VIN.

26:48Pakai handphone.

26:50Lagi di mall istri

26:52dan anak lagi main saya. Benarin server

26:54pakai VIN di handphone.

26:56Benarin engine config saya.

27:00Aduh.

27:02Serem.

27:04Disanalah fungsinya apa skillnya

27:06VIN berguna ya.

27:08Untuk SSH ke server.

27:10Nggak bisa tuh buka VS Code.

27:12Kecuali kalau udah install

27:14VS Code server ya.

27:16Di servernya. Mungkin masih bisa.

27:18Oke. Kita lihat

27:22dependensinya ya.

27:24Oh itu pakai konten full tuh CMS-nya.

27:26Konten full.

27:28Itu.

27:30Paling atas.

27:32Oh iya.

27:34Restack HTML

27:36Renderer. Maksudnya ini kan

27:38webnya kan

27:40nggak dinamis kan ya.

27:42Maksudnya

27:44datanya kan nggak perlu berubah

27:46sering-sering kan ya. Kenapa pakai

27:48konten full? Nggak. Cuma kan

27:50mungkin kliennya ya yang nggak input.

27:52Maksudnya kayak blurbnya text-text

27:54yang tentang apalah itu

27:56tentang si apa?

27:58Si klien yang mau

28:00nikah ya mungkin punya admin atau apa

28:02yang buat input.

28:04Oh iya benar.

28:06Konten full tuh enak loh.

28:08Dia layanan headless CMS.

28:10Pernah pakai soalnya.

28:12Tapi ini nggak berbayar sih. Ini

28:14murni pengalaman pribadi.

28:16Maksudnya free tier-nya cukup

28:18generous. Nah terus ya enak lah

28:20user-friendly. Jadi kalau kita

28:22build buat

28:24yang harus datanya

28:26sering-sering diupdate oleh

28:28orang lain yang bukan kita,

28:30bukan developer, itu enak banget.

28:32Ya tinggal login ke

28:34konten full, terus post type-nya juga

28:36macem-macem. Nah itu

28:38headless. Jadi kayak

28:40konten full-nya udah nyediain

28:42SDK untuk berbagai layanan

28:44apa? Berbagai library

28:46termasuk di React

28:48atau JavaScript. Ya udah.

28:50Itu manggil datanya tinggal pakai

28:52si library yang udah

28:54disediain.

28:56Ya Mas, yudah

28:58kita lagi apa?

29:00Lagi membahas tentang

29:02situs yang

29:04disubmit oleh Mas

29:06Grafis namanya.

29:08Mas Grafis. Ada di

29:10GitHub ininya. Diskusinya ada

29:12di GitHub sini. Jadi silahkan

29:14ini bentukannya

29:16kalau mobile, tapi kalau

29:18ini yang

29:20versi full-nya seperti ini.

29:22Tadi kalau baru

29:24mulai masuk tuh ada

29:26masukin nama, terus

29:28ada kayak shock.

29:30Terus ada apa? Oh ada lagi.

29:32Itu navigasi. Ya navigasi.

29:34Berarti ya.

29:36Sama-sama

29:38kalau arrow kiri-kanan.

29:40Ya.

29:42Konten

29:44full, berarti

29:46kontennya di

29:48entry, dia nyediain kayak

29:50back-office gitu ya buat

29:52ngisi kontennya gitu ya?

29:54Tapi itu hosted di konten full-nya.

29:56Jadi nggak pake

29:58infromosi, kita nggak harus mikir

30:00itu hosted di mana.

30:02Oke.

30:04Ini semacam

30:06Netflix, eh Netflix.

30:08Netlify punya juga kan ya?

30:10Netlify juga ada kan ya CMS-nya?

30:12Oh kalau Netlify

30:14bukan.

30:16Agak sedikit beda Netlify itu.

30:18Netlify itu

30:20menarik sih, Netlify CMS.

30:22Jadi Netlify nyediain kayak

30:24front-end-nya, front-end

30:26untuk admin ya, itu dihostingnya

30:28di website, di aplikasi

30:30kita sendiri sebenarnya kalau yang punya

30:32Netlify ya, Netlify CMS.

30:34Cuma dikasih interface, dikasih

30:36front-end, terus setiap kita edit

30:38atau bikin perubahan itu jadi

30:40full request.

30:42Nah maksudnya itu kenyanya Netlify.

30:44Direct push, Strapi, oke.

30:46Direkt. Nah iya.

30:50Saya ingin lihat.

30:52Sekarang itunya banyak ya.

30:54Gatau punya CMS apa ya?

30:56Pernah pakai dulu banget pas kayaknya

30:58belum se...

31:00Oh ini ya, kurang lebih kayak gini ya.

31:02Ada

31:04ada web suite-nya, gitu-gitu ya.

31:06Iya.

31:08Jadi ya tipe

31:10data yang standar lah ya, kalau buat

31:12front-end, misalnya bisa drop-down select,

31:14bisa checkbox,

31:16bisa date, bisa reach text,

31:18itu semua kita bisa customize,

31:20dan terus ya nanti tinggal

31:22panggil aja.

31:24Date bisa. Oh itu kayak

31:26widget gitu ya, drag and drop gitu.

31:28Kayaknya bisa, mungkin ya.

31:30Gimana?

31:32Kayak apa? Drag and drop gitu.

31:34Date.

31:36Content kan, bukan

31:38bikin, bukan

31:40no code platform kan. Ini kayak

31:42no code platform bukan?

31:44Bukan, ini buat CMS,

31:46ini headless CMS.

31:48Oh iya.

31:50Oke, taxonomy, segala macemnya.

31:52Cuma maksudnya

31:54drag and drop itu dalam arti

31:56si admin interface-nya itu loh,

31:58misalnya selain title,

32:00kan mungkin ada custom field

32:02macem-macem, itu mau ditaruh atas atau

32:04ditaruh bawah, kayak WordPress juga ada kan.

32:06Nah, cuma

32:08ini kayak lebih

32:10more style aja.

32:12Si...

32:14Siapa tadi namanya?

32:16Ada sisi admin-nya?

32:18Ada sisi admin-nya, berarti ya?

32:20Itu hosted

32:22di Contentful, loginnya

32:24lewat Contentful.

32:26Kalau nggak salah ya, ini

32:28sekitar 2-3 tahun lalu, pokoknya

32:30terakhir gue pakai Contentful itu

32:32agak lama.

32:34Masih grafisnya

32:36nggak ada sih yang bisa kita tanya-tanya.

32:38Harusnya

32:40kalau ada, bisa kita tanya.

32:42Kita tanya-tanya, apa?

32:44Contentful. Oh, Atlas CMS.

32:46Ini kayaknya beda deh, yang platform ini

32:48kayaknya beda deh.

32:50Kayaknya ya.

32:52Content Platform

32:58Origin

33:00Tradisional.

33:02Oh, ini perbandingan ya.

33:04Adanya di mana kelihatan di sini ya?

33:06Wait, cuma gue nggak lupa sih

33:10apa, punya docks Contentful

33:12yang sesuai

33:14yang dipakai di situ.

33:16Mana ya? Gak tahu, ini ternyata

33:18Contentful produknya udah banyak.

33:20Ya, cuma kalau TLDR-nya

33:22sih gitu, Atlas CMS, ya mirip

33:24Strapi lah.

33:26Oke.

33:28Oke, kita lanjut ya.

33:30Ini pakai Contentful untuk

33:32isinya, untuk kontennya.

33:34Terus,

33:36wah, banyak yang nggak dikenal nih.

33:38Loadable Component, apa ini?

33:40Loadable.

33:42Gak tahu.

33:44Splite.js

33:46Splite itu apa ya?

33:48Kayak slideshow, atau apa ya?

33:50Carousel. Carousel.

33:52Carousel, betul. Carousel, ya.

33:54Yeslin. Yeslin.

33:58Yeslin, bukannya

34:00mendingan taro di dev ya?

34:02Dev dependency.

34:06Ya, sama aja.

34:08Next.js, presi 13.

34:10Next.progress, ini progress bar ya, mungkin ya.

34:12React.

34:16React. React.

34:18Pakai Kapcah.

34:20Kapcahnya buat apa ya?

34:22Buat ngirim komen, itu yang di slide

34:24terakhir. Nah, paling

34:26terakhir.

34:28Oke.

34:30Ini ada duitnya.

34:32Dia ngirimin duit gitu?

34:34Nah, tadi gue

34:36ngecek, nggak bisa itu.

34:38Itu kelihatan mungkin perukup konsep doang ya.

34:40Maksudnya nggak ada integrasi

34:42payment-nya.

34:44Iya. Kirim tanda kasih.

34:46Oh, dari sini ya.

34:48Oh, ini product contentful

34:52yang dipakai, ini yang

34:54CMS ini namanya sekarang

34:56Studio. Studio.

34:58Oh, yang tadi.

35:04Ini kayak

35:06no-code platform, bukan ya?

35:08Kayak kita bisa desain sendiri kayak Wix

35:10gitu, bukan ya?

35:12Tuh, dia bisa drag-and-drop itu.

35:14Kayak gitu, tapi bukan

35:16untuk web, apa?

35:18Bukan untuk client-facing,

35:20user-facing web app-nya.

35:22Untuk CMS

35:24experience-nya.

35:26Untuk nginput datanya.

35:28Oke.

35:30Jadi data-nya nanti semuanya

35:32jadi data-nya nanti sudah

35:34dimarkup, tinggal dia kirimkan

35:36HTML-nya, tinggal kita tampilkan aja

35:38berarti ya?

35:40Enggak. Ya, pasti panggil

35:42jadi JavaScript Object biasa.

35:44Desain gitu, bentuknya.

35:46Ya kayak API ya,

35:48panggil API ya.

35:50Kalau nggak salah sih, udah type

35:52juga, udah ada typing-nya.

35:54Jadi misalnya apa, custom di sini,

35:56custom entry-nya misalnya

35:58data-data apa itu tadi kayak

36:00lokasi-lokasi

36:02akaknikah-nya, lokasi

36:04resepsinya itu kan map point.

36:06Ya, misalnya ada field-field-nya gitu

36:08udah data yang dibalikin tuh

36:10udah ada type-nya.

36:12Nah, ini ada

36:14komentar dari mas

36:16Ahmad Muwafak nih.

36:18Kayaknya lebih

36:20ngerti ya. Loadable buat

36:22lazyload-component, code-splitting

36:24juga. Ini

36:26ngomentarin content code?

36:28Tadi loadable, bukan

36:30loadable. Tadi packaging

36:32kita nggak tahu itu. Oh,

36:34loadable, ya ya. Loadable itu

36:36buat lazyload-

36:38component, oke.

36:40Tapi bukannya Next sebenarnya

36:42udah handle

36:44itu ya? Itu semua udah bisa

36:46di Next.js nggak sih? Maksudnya

36:48use-casenya kenapa ya?

36:50Yang nggak bisa di handle

36:52Next.js sampe harus

36:54pakai loadable.

36:56Penasaran.

36:58NPM.js

37:00apa nih? Memory Load Pro.

37:02Memory

37:04Cache Pro.

37:06Buat caching.

37:08Modern, excellent, fast, well

37:12tested, reliable caching module.

37:14Itu kali buat lagunya

37:16biar na di caching

37:18di lokal.

37:20Nggak, ini buat

37:22nyimpen data ya.

37:26Kayak

37:28local storage ya.

37:30Tapi ini buat caching ya.

37:32Browser cache

37:34berarti ya?

37:36Browser cache ya.

37:38Iya, di client, kan?

37:40Dependency.

37:42Sudah, pakai JSON aman.

37:48Aman, pakai JSON oke.

37:50Terus, apa lagi? Kita lihat

37:54apa lagi?

37:56Pakainya Windy ya.

37:58Bukan pakai Tailwind ya.

38:00Ketiba node

38:02modules.

38:04Windy bukannya based on Tailwind ya?

38:06Belum pernah pakai sih.

38:08Oh, nggak

38:10ternyata Windy CSS

38:12migrate from Tailwind.

38:14Oh, baru tahu.

38:16Next generation utility first CSS

38:18framework.

38:20Lihat yang bawah, the Windy CSS

38:22setting. Oh, sun setting.

38:24Ya.

38:26Bukan musuh sih.

38:28Dulu dibuat untuk kebacakan

38:30Tailwind's performance issues.

38:32Tapi sekarang udah. Ingat-ingat-ingat.

38:34Windy itu yang pertama kali

38:36menggunakan just in time.

38:38Oh.

38:40Abis itu, diikuti

38:42oleh si Tailwind. Tailwind

38:44sekarang udah just in time. Makanya sekarang Windy udah

38:46sunset karena udah

38:48di. My job here is

38:50done. - Iya.

38:52Untuk membuktikan bahwa ini bagus gitu.

38:54- Berjalan ke musik gue sudah selesai.

38:56- For new project, we recommend to consider

39:00alternative like Uno CSS or Tailwind.

39:02Dulu ingatnya gitu, sempet

39:04apa, sempet

39:06ada drama juga tuh sama

39:08yang bikin Tailwind.

39:10Biasalah.

39:14- Skena web web itu nggak lupa

39:16seri drama. - Iya.

39:20.env.development

39:22- Kenapa

39:24.env?

39:26- Kenapa begitu?

39:28Kenapa

39:30ditaro di situ?

39:32- Nah, itu introduction-nya.

39:34- Kenapa beneran ini?

39:36- Jangan di-commit.

39:38- Jangan di-commit.

39:40Di-ignore dong, di-ignore.

39:42Tulung.

39:44- Cuma, bukannya sekarang

39:48otomatis ya?

39:50- Otomatis ya?

39:52Pasti ada warning dari GitHub-nya.

39:54Ada warning dari GitHub-nya.

39:56- Bukan GitHub.

39:58Dari Next.js kan

40:00sebenarnya kan kita bisa pakai

40:02environment variable.

40:04Kenapa harus dipasang ke file?

40:06- Iya.

40:08Ini,

40:10maaf ya, kita buka tadi.

40:12Tapi udah dilihat juga

40:14ini yang reponya. Ini content

40:16full-nya, hati-hati ini kalau berbayar.

40:18Soalnya...

40:20- Ini orang yang submit,

40:22untung mesti cuma bersyukur

40:24ini kita anekanin bahwa project-nya

40:26harus project kalian sendiri

40:28dan kalian yang submit. Ya udah kan, mesti

40:30ngomit-ngomit ada apa-apa

40:32ini.

40:34- Iya. Ini API

40:36content full-nya kebuka ini.

40:38Berhati-hati.

40:40Takutnya nanti kena

40:42kalau masih...

40:44- Dimention dulu, Pak.

40:46Dimention dulu

40:48di diskusi.

40:50Ini coba

40:52di riset dari

40:54konten file-nya.

40:56- Iya sih.

40:58Gini nggak bisa dihapus doang

41:00kalian cara hapus.

41:02- Iya nggak jadi konten full-nya

41:04di riset.

41:06- Di revoke. Terus

41:08INV ini-nya dihapus,

41:10bukan di bagian commit itu aja, tapi harus

41:12historinya juga yang dari awal

41:14pertama kali muncul

41:16Git Ignore-nya apa?

41:18Oh, Git Ignore-nya ini dari Next.js ya?

41:22- Masa nggak ada

41:24Ignoran INV ya?

41:26- Iya.

41:28Kalau misalnya

41:30Next.js official starter

41:32Git Ignore-nya nggak ada INV

41:34itu agak bahaya sih, kasihan.

41:36Maksudnya kan mungkin banyak orang yang baru belajar,

41:38baru nyoba juga.

41:40Ya.

41:42Oke.

41:44Oke. Mungkin

41:46kita sekarang masuk

41:48ke

41:50kirain.inv

41:52example, gitu kan.

41:54- Kirain kosong.

41:56- Iya.

41:58Taunya beneran.

42:00Maaf lah ya.

42:02Kita nggak, tidak menyangka

42:04beneran. Oke.

42:06Apa lagi yang mau kita

42:08inspek?

42:10Ya, inspek sih.

42:12Bagian performance nyata

42:14atau kodanya.

42:16Ini berarti masih pakai yang

42:18lama ya? - Regis, kan?

42:202 tahun yang lalu.

42:22- Riaq Dead Picker.

42:24Padahal kan ada

42:26Dead Picker dari bawaan

42:28bawaan

42:30browser.

42:32- Oh, Riaq Dead Picker ya?

42:34Dead Pickernya buat dimana ya?

42:36- Atau, atau butuh-butuh apa?

42:38- Lagian Dead Pickernya kayaknya nggak ada

42:40keperluan. - Buat dimana?

42:42- Mistake deh. - Ini?

42:44- Nggak ada sih kayaknya.

42:46- Dah kan kelihatan kalendernya? - Nggak ada.

42:48- Nggak ada ya? Apa buat ini?

42:50Buat, ini kan cuma

42:52URL

42:54doang kan ya?

42:56Ada keperluan apa ya? - Iya, buat apa ya?

42:58- Dead Picker ya?

43:00Benar juga?

43:02Nggak ada?

43:04Bahkan nggak ada

43:06keperluan Dead Picker sih.

43:08- Ini audio player nih

43:10yang di atas tuh

43:12icons.

43:14Riaq Select.

43:16- Nggak ada select juga.

43:20- Riaq Pop Up.

43:32Pop Up yang tadi yang awal ya?

43:34Ini, munculin yang ini kali ya?

43:36Pop Up ya?

43:38Mungkin kalau sekarang

43:40udah ada dialog dan lain-lain ya?

43:42- Betul.

44:00- Ini

44:02struktur

44:04folder-nya.

44:06Ini layout-nya.

44:10Terus

44:18komponen

44:20Gallery Image Pop Up.

44:22Pop Up-nya ini ya?

44:24Yang tadi ya?

44:26Pop X.

44:30Iya.

44:32Ini.

44:34Buat nampilin

44:36Pop Up yang pertama kali.

44:38Terus

44:40ini undangannya yang

44:42Agenda,

44:44Form,

44:46Form Info sama Form

44:48Guest, Guest Book,

44:50sama ceritanya

44:52Love Story.

44:58Pastikan environment diignore.

45:00Itu

45:04bukannya udah wajib ya.

45:06- Public Repo lagi?

45:08- Iya.

45:10Untung loh produksinya nggak diignore.

45:18Sudah diignore ya untungnya.

45:22Dari next.js-nya udah kasih git ignore kan ya biasanya ya.

45:24Udah aman lah ya.

45:26Pidisnya berarti

45:28ada berapa pidis? Satu pidis doang

45:30sebenarnya ini kan.

45:32- Biar dibuka aja coba.

45:36- Iya kan.

45:38Tapi ini ada

45:40kayak ada ini.

45:42Ini ada gambar-gambarnya.

45:46Ini gallery ya.

45:48- Yang hijau. Apa tadi halaman tadi?

45:52Ada halaman hijau yang ada

45:54batangnya itu.

45:56Ini?

45:58Peta lokasi.

46:00Oh ini tohap.

46:02Navigasi.

46:04- Hijau-nya terang,

46:06tulisannya terang.

46:08Ini lagi?

46:10- Komentar-nya di Google Docs

46:12kan cuma itu punya

46:14accessibility sama usability

46:16sih yang paling

46:18kerasa.

46:20Termasuk behavior slide-nya itu

46:22keren.

46:24- Biasanya apa?

46:26- Apa?

46:28Jadi gini, ini kan pakai

46:30library external ya.

46:32Trus apa? Coba

46:34klik cursor.

46:36Tapi kalau ini sih tadi

46:38gue nyobanya, kantang liat kode ya

46:40cuma pakai aja. Cuma buka

46:42dari website-nya aja.

46:44Apa? Di yang kanan itu.

46:46Kanan yang putih.

46:48Nah

46:50kanan yang putih-putihnya itu

46:52diklik, terus tahan,

46:54terus geser dikit, tiba-tiba

46:56apa? Jadi misalkan

46:58use case-nya gini sih, misalkan kita

47:00pengen ngopas alamatnya,

47:02kan pasti cursor kita taruh kesitu

47:04teks alamatnya, terus kita

47:06berusaha nge-like.

47:08Tapi malah

47:10jadi kelihatannya dia

47:12malah-malah ini ya?

47:14Oh.

47:16Tidak.

47:18Kalau swipe di mobile,

47:20swipe di touchscreen, baru

47:22behavior swipe-nya dibikin

47:24berser-slide kalau

47:26user swipe. Tapi ini pakai

47:28modalities apapun, pakai cursor

47:30yang bukan

47:32buat nge-swipe, itu

47:34dia otomatis pindah

47:36kartu.

47:38Oh, ini targetnya

47:40buat dibuka di mobile ya?

47:42Iya.

47:44Cuma itu kan ada desktop-nya juga.

47:46Iya.

47:48Benar-benar.

47:50Semua yang terkait karusel-nya sih

47:52ini usability-nya

47:54agak

47:56kurang. Jadi kayak

47:58contoh lain misalnya gini nih,

48:00yang

48:02tapi nggak, gue belum sampai lihat kodenya

48:04sih, coba dibuku tamu aja.

48:06Nah, sekarang coba deh.

48:08Bisa nggak? Kan pengen

48:10lihat pesan dari orang lain,

48:12coba. Ini kan

48:14benar-benar minta.

48:16Coba gimana caranya?

48:18Gak bisa.

48:20Iya, coba cari caranya sampe

48:22bisa. Terus

48:24tebakan kita selanjutnya kan kita slide

48:26pakai mouse, kan?

48:28Iya, betul-betul.

48:30Bisa pakai

48:32tab, tebakan selanjutnya

48:34pakai tab, kita klik sekitar

48:36situ, terus tab-tab-tab aja sampai ke fokus,

48:38juga nggak bisa, nggak ada fokusnya.

48:40Ternyata, lihat nggak? Ijo-iju

48:42yang di kanan itu, bentik-bentik

48:44ijo, itu bukan dekorasi,

48:46itu step-card usaha.

48:48Oh, ini

48:50page-ing ya page-ingnya.

48:52Cuma karena isunya banyak,

48:54tadi kayak mleber gitu loh,

48:56jadi bukan di bawah.

48:58Ini ternyata

49:00pesan-pesan orang-orang ya,

49:02daftar pesan. Apa? Posisiunnya juga

49:04jadi aneh, karena pesannya banyak.

49:06Kalau pesannya cuma 3 atau 4, mungkin

49:08agak bagus ya. Maksudnya di kanan atas,

49:10semuanya jelas, nah ini makin banyak

49:12jadi kayak acak-acakan kan, kedurung ke kiri,

49:14karena steps-nya bukan di bawah.

49:16Terus maksudnya modalitas navigasinya itu

49:18slide nggak bisa,

49:20click nggak bisa,

49:22tab, tab untuk fokus,

49:24maksudnya tab atau apapun yang pakai

49:26assistive device ya, misalnya orang pakai

49:28apa itu yang screen reader

49:30atau alat-alat lain pun, nggak bisa.

49:32Terus yang anak Pim kan

49:34biasanya, ngelanjutin,

49:36tadi tuh anak Pim kan nggak suka

49:38mouse ya, semua pakai keyboard,

49:40tab, tab aja, nah ini jelas nggak bisa

49:42juga. Gak bisa juga tab-nya nggak jalan ya, nggak ada

49:44tab, namanya tab index ya,

49:46nggak dikasih tab index, jadi kalau kita

49:48mau ngisi, harus klik mouse dulu.

49:50Jadi sebetulnya sih mungkin

49:54alternatif yang

49:56paling ideal ya,

49:58sekarang kan carusel atau

50:00slider udah ada

50:02JavaScript dan CSS

50:04yang web API ya,

50:06jadi paling ideal itu bikin sendiri.

50:08Nah, kalau nggak

50:10memungkinkan, nggak sempat dan

50:12lain-lain, alasan lain, sebenernya

50:14kayak ShadCN,

50:16ShadCN tuh ada carusel, kalau

50:18Radix UI, agak lupa

50:20apa, ada carusel atau nggak,

50:22intinya sih pakai

50:24React UI Library yang

50:26udah support accessibility

50:28features, sekarang udah banyak

50:30lho, jadi maksudnya paling ideal ya

50:32bikin sendiri, jadi kita bisa

50:34control semua

50:36fungsionalitasnya, tapi kalau itu nggak

50:38memungkinkan cari UI Library yang

50:40udah ada support,

50:42ya itu tadi segala macam

50:44accessibility features,

50:46jadi accessibility features itu

50:48bukan cuma buat

50:50apa,

50:52bukan cuma buat

50:54yang kayak apalah

50:56screen reader atau defabilitas doang,

50:58tapi ya beneran

51:00literally sesuai namanya,

51:02memastikan segala macam

51:04user dengan berbagai cara

51:06akses website itu mudah buat

51:08akses kontennya.

51:10Oh, kita kan waktu itu

51:12udah tutorial sama Ivan ya

51:14cara ngecek performance.

51:16Iya, performance-nya nih

51:18oke nih ya.

51:20Ya kan,

51:22karena pakenya

51:24komputer hebat dan

51:26dan

51:28oh iya,

51:30belum di, itu ya,

51:32belum di throttle ya,

51:34no throttling,

51:38coba slow,

51:40terus

51:42yang di refresh ya, yang di performance-nya ya,

51:44ini ya,

51:46gitu ya.

51:48Tapi ini kalau kita

51:50nggak klik, dia masih

51:52ngitung sebagai ini nggak?

51:54Udah loading kan semuanya kan?

51:56Iya.

52:00Modern

52:02Classic,

52:04oh, apa nih?

52:06Wow.

52:12Masih ke-mutein lagi.

52:14Mendingan ini di-mute aja ya.

52:16Mute.

52:18Nah itu salah satu juga

52:20bisa opt-out dan itu.

52:22Nah itu aksesibility dan usability.

52:24Tapi itu stress banget.

52:26Padi asli, itu asli

52:28kaget sih tadi,

52:30pas sebelum mulai live ini,

52:32oh coba, mau udah situs nih

52:34nge-check, tiba-tiba

52:36tiba-tiba

52:38lagu ini bunyi,

52:40dan nggak tahu dari mana,

52:42kalau emang user-nya

52:44nge-click play dengan sengaja,

52:46ya udah kan, udah expect.

52:48Bayangin dong kalau lagi meeting atau apa,

52:50tiba-tiba dikirimin

52:52link ini undangan,

52:54di-play, diliatin

52:56sekeluangan.

52:58LCP, INP,

53:00dan CLS.

53:02Ya

53:04layout shift-nya nggak,

53:06minimum lah ya, nggak ada ya.

53:08Hampir bisa dibilang nggak ada ya.

53:10Ya, karena

53:12jenis website-nya juga ya.

53:14Itu bentuk

53:20live-nya tuh pakai CSS atau

53:22image?

53:24Ini image-nya udah pakai EI nih,

53:263 tahun yang lalu.

53:28Itu, ada

53:30gambar kartun yang gitu, versi kartunnya

53:32itu, itu yang berubah

53:34jadi kartun.

53:36Image.

53:40Thumbnail.

53:44Nah, ini salah satunya,

53:46kalau misalnya

53:48image-nya PNG itu

53:50berat, 76 kilo

53:52kan, lumayan tuh.

53:5476 kilobyte?

53:56Iya.

53:58Padahal kalau dia misalnya pakai

54:00image yang

54:02image yang

54:04GPEG aja,

54:06itu

54:08ada animasinya ya?

54:10Iya, ada animasinya.

54:12Itu yang berubah jadi versi

54:14kartun.

54:16Jadi ghibli-ghibli.

54:22Ya.

54:24Sama itu versi load itu

54:26harusnya nggak kan?

54:28Nggak, ini ya, kayak kecilan

54:30itu tulisan

54:32kayak

54:34Ini dia pakai

54:38WP, udah pakai WP.

54:40Upper case semua itu juga nggak bagus lho.

54:42Gimana?

54:44Upper case itu memplay wanita,

54:46memplay pria, itu kan upper case.

54:48Oh, ini tulisan ini?

54:50Iya.

54:52Kenapa?

54:54Alasannya kenapa?

54:56Ya, sudah upper case tapi

54:58dibikin font-nya kecil dan tipis.

55:00Itu nggak enak.

55:02Ini upper case-nya pakai CSS

55:04lagi ya?

55:06Karena aslinya nggak.

55:08Nggak masalah ya? Nggak ngaruh ya?

55:10Nggak masalah, cuma secara

55:12kembali ke accessibility

55:14sih saya.

55:16Nah, cuma itu seberapa ketat sih, kalau di luar

55:18emang ada syarat

55:20WCAG, cuma kalau ini kan

55:22asumsinya berarti target market-nya

55:24lokal ya, Indonesia.

55:26Mungkin nggak harus seketat itu.

55:28Cuma yang jelas sih

55:30kalau buat...

55:32Bukan soal aturan

55:34yang ketat, tapi dengan

55:36memberikan accessibility yang bagus,

55:38bagi pembacanya

55:40juga lebih enak sebenarnya lho.

55:42Jadi kayak

55:44kita itu memberikan konten yang

55:46enak buat dibaca dan

55:48dikonsumsi sebenarnya.

55:50Bukan soal ikutin aturan.

55:52Nggak, sebagai

55:54kalau yang

55:56secara ideal sih setuju. Cuma

55:58kadang kayak gini kan webdev kita

56:00harus bentuk-bentukan

56:02sama pihak di luar kita.

56:04Kayak kalau gue pribadi kadang pick our battle

56:06gitu. Kayak misalnya kalau gini,

56:08daripada tawar-menawar soal tulisan

56:10memply one time, mending ngabisin tenaga

56:12buat lobby si button yang

56:14apa? Button hijau itu

56:16yang lebih nggak kelihatan sama itu tuh

56:18kanan atas lagu

56:20muter-muter. Kalau itu sih

56:22kalau ini bakal... Apa ya? Maksudnya daripada

56:24cerewet banget banyak yang diminta,

56:26gue bakal memfokuskan

56:28tenaga ke nge-lobby

56:30button warna,

56:32warna button hijau, plus

56:34behavior audio yang di kanan atas itu.

56:36Coba deh survey, sekian

56:38user, terutama yang nggak tech-savvy,

56:40bakal tahu nggak cara

56:42ngapain lagu yang tiba-tiba nyala.

56:44Itu kan kalau ini bakal...

56:48Dari tab browser kan ada

56:50tanda microphone tuh.

56:52User yang nggak tech-savvy,

56:54tiba-tiba bunyi nih, bunyi-bunyi terus.

56:56Nah, terus apa?

56:58Sementara itu di atas,

57:00di kanan atas nyempil,

57:02ada icon lagu muter-muter dengan

57:04kontras yang rendah, nggak langsung kelihatan

57:06juga, dan itu nggak tahu

57:08harus diklik baru buat

57:10untuk ngelakuin lagunya.

57:12Untung lagunya lagu slow ya,

57:14kalau coba noise rock, yang trik.

57:16Biasa yang nikah

57:18anak metal kan.

57:20Pada saat posisi play,

57:24lagunya lagi dimatiin,

57:26pun dia masih muter-muter.

57:28Soal awalnya lagi

57:30jalan gitu, padahal sebenarnya nggak.

57:32Ya itu hal-hal kecil sih ya.

57:34Muka ke

57:36hit memory bisa kelihatan nggak?

57:38Si button icon yang lagu muter-muter itu,

57:42itu nggak bisa ditap juga,

57:44harus pakai mouse.

57:46Oh nggak bisa diklik

57:48pakai mobile gitu?

57:50Iya, harus pakai

57:54pake tangan, pake

57:56touch bisa, cuma nggak ada.

57:58Nggak fokusable, nggak bisa difokus.

58:00Fokusable.

58:02Dimana? Network?

58:04Perfomance.

58:06Memory?

58:08Memory.

58:10Saya tadinya mau liat

58:26sam apainya kayak

58:28tuh, lumayan kan?

58:30Maksudnya,

58:32di hip snapshot-nya tadi,

58:34hip snapshot-nya, kayak

58:36animasi-animasi gitu sebenarnya bisa

58:38kelihatan tuh nanti

58:40berapa

58:42kepakainya

58:44memory di

58:46browser untuk merender itu.

58:48Ini size

58:54bundlenya

58:56dimana ya?

58:58Itu di bawah, 4,1 megabyte.

59:004,1 megabyte.

59:02Ya, image kelihatan ya.

59:04Image kali ya.

59:06Paling gede.

59:08Click image,

59:10click image di atas.

59:12Nah, kelihatan kan tuh sekarang jadi

59:14di bawah,

59:16jadi 1 megabyte tuh,

59:181 megabyte

59:20/ 1 megabyte.

59:22Itu artinya image-nya 1 megabyte.

59:241 dari 4 ya?

59:26Kalau ke JS-nya coba.

59:28JS-nya 1,4.

59:305. / Nah, jadi cara bacanya ya,

59:32kalau JS-nya tuh ada 17

59:34request dari 98 request.

59:36Ini yang kepakai, bandwidth yang

59:40kepakai 1,1 kilobytes dari

59:4246 kilobytes.

59:44Dan 1,4 megabyte.

59:46/ Ini khusus untuk JS ya? / Ya.

59:48Kalau mau lihat font, contohnya

59:50font-nya gede nggak?

59:52Nggak, font-nya kecil.

59:54/ Nggak, kecil.

59:56CSS-nya? / CSS.

59:58/ HTML-nya?

1:00:00/ HTML-nya nggak gede kan?

1:00:02154.

1:00:04CSS juga nggak gede.

1:00:06/ Ya, berarti gede-nya di?

1:00:08/ Media.

1:00:10/ Nah... / Media...

1:00:12Iya, 700 kilobytes.

1:00:14Wasm? Nggak ada ya Wasm.

1:00:20/ Ada, ada.

1:00:22Ada.

1:00:24/ 500 kilobytes...

1:00:26500 kilobytes ini apa?

1:00:28/ Ini tuh call web vital.

1:00:30Web worker.

1:00:32Web worker-nya dia jalan.

1:00:34/ Web worker.

1:00:36/ Recapcha.

1:00:38/ Recapcha berapa?

1:00:42Kecil ya?

1:00:44/ Karena Mas Riza ini,

1:00:46coba disable cache, terus reload.

1:00:48Kalau mau lihat.

1:00:50Terus matiin lagunya.

1:00:54Udah di...

1:00:56Udah di mute.

1:00:58Woh, nggak pake cache,

1:01:04lumayan juga ya.

1:01:0615 detik, 16.

1:01:08Karena heavy di image juga ya.

1:01:10Event,

1:01:12image-nya nggak kelihatan

1:01:14di sini ya. Cuman yang kelihatan kan

1:01:16image ini doang ya.

1:01:18/ Itu kayaknya image-nya di-load deh.

1:01:20/ Iya, ikut ke-load juga semuanya.

1:01:22Walaupun

1:01:24walaupun belum muncul di viewport,

1:01:26udah dipanggil laluan

1:01:28semua image-nya.

1:01:30/ Padahal capcha-nya nggak butuh-butuh di awal kan?

1:01:32/ Iya, nggak lagi load ya.

1:01:34Capcha-nya

1:01:36di akhir bahkan.

1:01:38/ Coba ke-image.

1:01:40/ Udah di-load semua?

1:01:44/ Satu dari lima.

1:01:46Lima setengah.

1:01:48Oh, tadi empat-empat sekian itu

1:01:50ke-cache ya?

1:01:52/ Iya.

1:01:54Ada yang sebagian ke-cache.

1:01:56/ Font, oh, nambah lagi nih.

1:02:00/ Iya, ada yang di-load.

1:02:02/ Ada yang di-load lagi?

1:02:04/ Apa yang di-load? / GS-nya

1:02:06dua setengah,

1:02:08hampir tiga.

1:02:10Dari tujuh.

1:02:14Gede juga ya.

1:02:18Oke.

1:02:20S-nya nggak gede kan ya?

1:02:24Oh, ini yang dari content-full ya?

1:02:26Google Analytics.

1:02:28/ Google Analytics, collect itu

1:02:30Google Analytics. / Collect.

1:02:32/ Iya, ini nih. / Itu yang dari

1:02:34content-full ya? / Content-full.

1:02:36/ S-nya ini ya?

1:02:40/ APK.

1:02:46Alright, alright.

1:02:48Apa lagi yang menarik?

1:02:50Yang perlu dibahas.

1:02:52/ Tips-tips. Ini pakai

1:02:56kalau pengen

1:02:58nge-check. Tadi kan

1:03:00kontras warna ya.

1:03:02Color contrast. Sebetulnya

1:03:04di Chrome DevTools,

1:03:06di Chromium DevTools sepatnya

1:03:08itu udah ada kontras checker,

1:03:10tapi ada tapinya.

1:03:12Tapi apa? Masih

1:03:14kurang bagus. Jadi, apa?

1:03:16Dalam satu element

1:03:18yang bawaan DevTools nih. Dalam

1:03:20satu element tuh harus diset color dan

1:03:22background-nya. Dan elementnya

1:03:24nggak boleh punya children. Kayak tadi

1:03:26padahal proteknya tuh

1:03:28kan filling-nya tuh

1:03:30misalnya A.

1:03:32Elementnya A. Belumnya kan ada

1:03:34icon kan. Karena mau saya lihat kita

1:03:36ada icon map. Nah,

1:03:38jadi nggak bisa pakai

1:03:40kontras checker

1:03:42bawaannya DevTools. Coba deh.

1:03:44Nah, di apa?

1:03:46/ Ini ya. / Nah,

1:03:48Inspect Element. / Yang mana?

1:03:50Yang muda? / Iya, itu.

1:03:52Terserah. / Ini.

1:03:54Contras fiturnya gimana? Ini?

1:03:58Bukan, computed.

1:04:00Detect computed.

1:04:02Scroll ke bawah, sampai

1:04:06nemu color, property color.

1:04:08/ Ini? / Color.

1:04:10Diklik.

1:04:12Nah, itu

1:04:14harusnya kalau kita klik warnanya,

1:04:16warna ijo itu.

1:04:18Nah, harusnya

1:04:20kontras rasio-nya ada,

1:04:22tapi no contrast information

1:04:24available. Kenapa? Karena

1:04:26lihat elementnya deh, buka

1:04:28element button-nya di atas.

1:04:30Nah, itu

1:04:32di buka.

1:04:34Nah, kan ada SVG-nya.

1:04:36Sekarang coba SVG-nya

1:04:38ilangin.

1:04:40Hapus aja.

1:04:42Terus klik lagi button.

1:04:44Terus kayak tadi.

1:04:46Color.

1:04:48Ini.

1:04:50Gak bisa diklik. Ini?

1:04:52Bisa, harusnya.

1:04:54Nah, kontras rasio-nya muncul.

1:04:56Agak ribet ya, agak capek kan?

1:04:58Nah, terus yang kasiannya nih,

1:05:00yang sangat disayangkan,

1:05:02itu bug Chromium

1:05:04udah 2 tahunan kali ya?

1:05:062 tahun.

1:05:08Belum dibenerin juga, jadi kalau

1:05:10mungkin temen-temen yang

1:05:12bisa nulis, apa ya, C++

1:05:14atau apalah, bisa kontribusi ke

1:05:16source code Chromium, tolong

1:05:18demi kemaslahatan bersama,

1:05:20coba mungkin bisa nge-fix. Tapi

1:05:22in the meantime, sementara itu, kita

1:05:24bisa pakai ya macem-macem

1:05:26sih extension yang buat

1:05:28check aksesibilitas secara

1:05:30keseluruhan tuh banyak. Cuma yang paling

1:05:32simple dan enak, ini, pakai

1:05:34ini.

1:05:36Which is the color contrast checker.

1:05:38Itu maksudnya,

1:05:40itu dia nge-check-nya dari Domnode

1:05:42dan langsung, apa, langsung

1:05:44kelihatan, terutama kalau kita

1:05:46kerja sama-sama misalnya

1:05:48anak QA atau maksudnya pihak-pihak lain

1:05:50yang bukan developer,

1:05:52nggak usah jalanin macem-macem, udah langsung

1:05:54klik aja extension-nya, langsung

1:05:56kelihatan. Coba deh. Tapi sekarang dari

1:05:58Figma sendiri, kalau dari designer ya

1:06:00dari Figma itu, sudah kelihatan sih

1:06:02color contrast-nya di Figma,

1:06:04ada extension-extension,

1:06:06jadi sebenarnya udah bisa pointy

1:06:08"Ini nggak bener ya" gitu.

1:06:10- Bagus sih kalau pakai Figma.

1:06:12- Kalau sekarang kan

1:06:14jamannya AI,

1:06:16kita bisa screenshot terus

1:06:18minta ke Gemini misalkan gitu.

1:06:20Coba tolong dicek aksesibilitas apa.

1:06:22- Ini akan too much effort ya.

1:06:24- Iya sih.

1:06:26- Iya too much effort. Kalau ini tinggal matiin aja

1:06:28dev tools-nya, coba buka aja extension-nya

1:06:30langsung kelihatan.

1:06:32- Coba install dulu.

1:06:34- Mana ini ya? Oh ini, ilang tuh.

1:06:36Kalau di plus, ilang.

1:06:38Nggak bisa install.

1:06:40- Nggak responsive berarti.

1:06:42- Nggak responsive.

1:06:44Gimana sih?

1:06:46- Chrome Web Store nggak responsive.

1:06:48- Pake Kanari.

1:06:50Chrome Kanari.

1:06:52Udah nih, coba de-close ya.

1:06:56- Coba aja.

1:06:58Coba.

1:07:00Ayo, kelihatan semua extension-nya.

1:07:02Lihat aja.

1:07:04- Ada fake filler.

1:07:06- Buat ngisi form.

1:07:12Gimana sih?

1:07:14Gimana caranya? Klik kanan aja.

1:07:16- Harusnya sih langsung.

1:07:20- Buat ngisi form ini loh, ngisi form ini.

1:07:22Gisi form tuh, ngisi form.

1:07:24Fake filler.

1:07:26Daripada gitu.

1:07:28- Masuk ke extension-nya.

1:07:30Masuk ke extension-nya tadi.

1:07:32Terus dipin.

1:07:34- Oh, dipin dulu.

1:07:36Oh, harus dipin dulu.

1:07:38Nggak bisa langsung dipake gitu.

1:07:40- Iya, itu ya.

1:07:42Diklik.

1:07:44Diklik.

1:07:46- Bentar dulu. Ini kan, diklik.

1:07:48Udah.

1:07:50Udah nih, kentang.

1:07:52Harus refresh kali ya.

1:07:54Refresh kali ya.

1:07:56Refresh.

1:07:58- Matiin lagunya lagi.

1:08:00- Nggak.

1:08:02Ah, baru. Harus refresh dulu.

1:08:04Lagunya nyala terus dari tadi. Cuman udah di-mute.

1:08:06Mute tab.

1:08:08Ini, ini, mute.

1:08:10- Iya, itu langsung kelihatan.

1:08:14- Ini cara bacanya gimana?

1:08:18- Iya, itu.

1:08:20Pokoknya yang XX itu yang salah.

1:08:22Yang salah berarti yang

1:08:24warna ini harus diganti.

1:08:26Sebaiknya diganti gitu.

1:08:28Jangan pakai warna ini gitu ya.

1:08:30Gimana?

1:08:32- Oh, apa?

1:08:34Itu dimerahin

1:08:36yang bermasalah.

1:08:38Di-highlight dimerahin.

1:08:40Jadi kita tinggal screenshot atau tinggal

1:08:42tunjukin.

1:08:44- Oh, yang ini.

1:08:46Yang perlu diganti

1:08:48warna ininya.

1:08:50Kalau kita lihat di sini kan warnanya.

1:08:52- Pokoknya itu

1:08:54kan yang untung adalah

1:08:56nilai kontrasnya harus

1:08:58cukup tinggi biar bisa kelihatan kan.

1:09:00- Coba ganti.

1:09:02Coba ganti.

1:09:04- Atau

1:09:06kalau memungkinkan

1:09:08teksi dibuat lebih terang. Cuma ini

1:09:10teksi kan udah putih. Udah nggak bisa terangin lagi.

1:09:12- Ini text-nya kan

1:09:14ini kan

1:09:16background-nya ganti.

1:09:18Eh, salah.

1:09:20Ganti warna lebih gelap.

1:09:22- Lebih terang misalnya.

1:09:24Atau lebih gelap.

1:09:26Yang penting kontrasnya.

1:09:28- Contohnya kelihatan di bawah.

1:09:30Yang 14 bol itu. Nah.

1:09:32Nah.

1:09:34Tapi belum triple A.

1:09:36Nah. - Nah, triple A.

1:09:38Berarti ini udah aman ya.

1:09:40Tapi nggak geganti ya?

1:09:42Gak geganti.

1:09:44Harus manual ya.

1:09:46Cuma yang jelas

1:09:48kita dengan gampang

1:09:50di sidebar di kiri

1:09:52langsung kelihatan mana.

1:09:54Jadi, yang penting kan, mana aja sih

1:09:56yang kontrasnya kurang.

1:09:58Itu langsung dijabari.

1:10:00Terus

1:10:02kombinasi

1:10:04warna yang bermasalah.

1:10:06Itu apa yang men-trigger.

1:10:08Terus bisa langsung di-highlight.

1:10:10Lebih ke itunya aja sih. Terus

1:10:12simple aja pakainya.

1:10:14Ini pun

1:10:16nggak lulus ya. - Terganggu sekali.

1:10:18- Kekcilannya. Terlalu kecil ya.

1:10:20- Terlalu menutup

1:10:22muka si

1:10:24ceweknya.

1:10:26- Iya. Memang

1:10:28bikin web

1:10:30gallery foto itu

1:10:32sangat triki ya. Karena kan

1:10:34warna-kewarnaan dari

1:10:36image-nya kan nggak bisa kita atur kan.

1:10:38- Iya.

1:10:40Harus di-overlay atau dikasih

1:10:42kotak sedikit.

1:10:44Ya, pokoknya itu harus terang,

1:10:46fotonya gelap, gitu kan.

1:10:48Itu kan tergantung kontennya atau fotonya kan.

1:10:50Iya.

1:10:52Apple aja baru update,

1:10:54langsung itu kan nggak bisa kebaca kan.

1:10:56Lagi heboh.

1:10:58Gara-gara glass.

1:11:00Glass-glass kaca.

1:11:02- Liquid glass.

1:11:04- Liquid glass. Nggak kebaca tuh notifikasinya.

1:11:06Gara-gara ada foto

1:11:08wallpaper yang mungkin agak terang, agak cerah

1:11:10gitu kan. Terus glass-nya juga

1:11:12cerah, nggak kebaca.

1:11:14Iya, iya. Ini

1:11:18tools-nya yang

1:11:20yang mesti banyak kita

1:11:22belajar dari tools-nya ini ya. Sebenarnya

1:11:24udah disediakan. Cuman kadang-kadang kita nggak

1:11:26ada tools seperti ini.

1:11:28- Jadi di atas kan ada tool level.

1:11:30Jadi level-nya itu udah kayak

1:11:32itu aja. Ayam gebrek lah.

1:11:34Ada level pedesnya kan.

1:11:36Jadi kalau A, A itu

1:11:38paling minimum, dan itu kayak

1:11:40dianggap

1:11:42belum masuk conformance, semuanya

1:11:44belum mengikuti aturan WCAG, jadi

1:11:46bahkan nggak masuk ke itu.

1:11:48Kalau AA itu yang kayak standard lah.

1:11:50Jadi minimum acceptable-nya

1:11:52tuh AA. Biasanya kalau

1:11:54aturan-aturan ini tuh, regulasi

1:11:56itu minimal AA. Tapi

1:11:58kalau mau yang maksimal,

1:12:00yang sangat-sangat

1:12:02compliant, itu ada

1:12:04AA. Terus ada itu kayaknya

1:12:06filter buta warna atau apa lah.

1:12:08Gak pernah pake sih. - Oh yang ini ya

1:12:10buat orang yang mungkin

1:12:12buta warna. - Parsial.

1:12:14- Parsial.

1:12:16- Macam-macam variasinya. Dan itu biasa dipake

1:12:18kalau, terutama

1:12:20kalau warna mengkomunikasikan

1:12:22makna. Jadi kayak misalnya kalau aplikasi

1:12:24saham atau keuangan atau apa itu

1:12:26misalnya kan

1:12:28diangkanya

1:12:30ya kalau misalnya naik turun kan ada car.

1:12:32- Kalau bulis itu kan ijo.

1:12:34- Tapi maksudnya diangkanya pun

1:12:36angkanya kan ga beda terus.

1:12:38Kalau dia lagi naik tuh angkanya merah.

1:12:40Jadi merah ijo bisa gonta ganti kan.

1:12:42Sesuai itu kan gantinya cepet ya.

1:12:44Nah itu kalau misalnya

1:12:46ngide pake variasi

1:12:48warna merah dan ijo yang kurang jelas

1:12:50buat orang-orang

1:12:52varian buta warna tertentu itu malah

1:12:54kayak ga kelihatan sama sekali. Jadi

1:12:56maksudnya perlu di tes pake

1:12:58macem-macem variasi itu.

1:13:00- Oke.

1:13:02Ada lagi yang mau

1:13:04dibahas?

1:13:06-

1:13:08YouTube pastikan jangan

1:13:10commit and file.

1:13:12- Oh itu udah tadi, udah ya.

1:13:14Gimana Ivan?

1:13:16- Kita bahas sedikit lagi sebelum

1:13:18kita lanjut.

1:13:20Kalau misalnya

1:13:22ada yang bisa dirobah dengan

1:13:24modern API

1:13:26atau CSS,

1:13:28apa sih yang bisa dirobah dari website ini?

1:13:30- Iya

1:13:32- Coba apa?

1:13:34- Dialog.

1:13:36- Dialog.

1:13:38- Carousel

1:13:40sudah ada.

1:13:42- Carousel.

1:13:44- Carousel.

1:13:46Dialognya sudah ada.

1:13:48- Apa lagi ya?

1:13:50- Lazy load.

1:13:52- Lazy load.

1:13:54- Sudah native juga

1:13:56kan?

1:13:58- Lazy load.

1:14:00- Next.js.

1:14:02- Yang misalnya kita pake Next.js,

1:14:04itu dead picker.

1:14:06- Ya nggak apa-apa.

1:14:08Orang dead pickernya aja nggak dipake.

1:14:10Gak usah pake dead picker.

1:14:12- Gihapus aja udah.

1:14:14- Ya sama web API yang

1:14:20simple sih, yang dari dulu ada, kayak misalnya

1:14:22kiri-kanan gini, ya

1:14:24dikasih aja keyboard

1:14:26di event listener

1:14:28biar bisa navigasi.

1:14:30- Bisa next previous ya.

1:14:32- Itu kan bukan fitur yang modern-modern banget ya.

1:14:34Dari dulu ada.

1:14:36- Oh ini tadi yang pake JavaScript

1:14:38terang gelap-gelap ini.

1:14:40- Oh iya, animasi.

1:14:42- Animasi yang ini.

1:14:44Eh mana tadi?

1:14:46- Ini juga animasi muka ini bisa dibikin.

1:14:48- Oh itu apa?

1:14:50Apa?

1:14:52Scrollable event ya?

1:14:54- Scroll driven animation.

1:14:56- Oh scroll driven animation.

1:14:58Iya, daripada kiri-kanan mendingan ke bawah

1:15:00gitu, di scroll.

1:15:02- Itu mah kan nggak perlu scroll driven animation sih.

1:15:04Kalau yang animasi ya,

1:15:06ini animasi foto sama

1:15:08tanem kanan yang

1:15:10pake keyframe animate

1:15:12biasa aja kan ini.

1:15:14- Tapi ini foto ini juga nggak jalan otomatis,

1:15:16harus di-click ya.

1:15:18Jadi bukan animasi kan ini aja.

1:15:20Iya.

1:15:22- Jadi kita kirain.

1:15:24- Oh iya misalnya.

1:15:26- Beter bikin slide gallery sendiri.

1:15:28- Yang jadi kaktun itu.

1:15:30- Kalau misalnya daripada

1:15:32ini yang galerinya ini,

1:15:34daripada bikin jadi

1:15:36background terus dibikin ada

1:15:38depannya begitu, toh orang nggak bisa menikmati

1:15:40fotonya ya kan.

1:15:42- Itu galerinya kanan.

1:15:44- Itu polos aja, sisanya ya

1:15:46gallery yang bikin gallery foto

1:15:48gitu ya bagus.

1:15:50Itu galerinya dua.

1:15:52- Oh itu yang ini

1:15:54aslinya kalau satu raw begini ya.

1:15:56Ini masih kelihatan.

1:15:58- Iya bagus. Tadi gue bilang, makanya

1:16:00kalau pesennya dikit,

1:16:02kalau pas dia ngetest data, mungkin pesennya masih dikit.

1:16:04Nah pas pesennya udah banyak,

1:16:06udah bingung.

1:16:08- Tapi ini juga rentan

1:16:10ke-click background-nya.

1:16:12- Vertical sih lebih bagus.

1:16:14Eh salah.

1:16:16- Ini pas banget sama

1:16:18tiang ini.

1:16:20Jadi nggak kelihatan.

1:16:22- Dikira dekorasi pasti kan.

1:16:24Dan itu nggak bisa di-slide, nggak bisa di-swipe,

1:16:26nggak bisa di-swipe, dan nggak bisa di-slide,

1:16:28dan nggak bisa di-tap atau arrow.

1:16:30- Kalau fotonya agak gelap

1:16:32gini, oke.

1:16:34Gambarnya oke, ini masih masuk kan.

1:16:36- Itu pun kayak dekorasi kan, maksudnya bisa aja kan.

1:16:38- Iya bener-bener kayak dekorasi.

1:16:40Terus udah gitu di-click,

1:16:42malah masuknya ke foto

1:16:44pop-up.

1:16:46Jadi navigasinya

1:16:48bisa lebih baik lah ya.

1:16:50- Iya.

1:16:52- Nah ini foto yang disini sama-disini sama

1:16:54sebenarnya. - Sama.

1:16:56- Ada juga kan tuh, sama.

1:16:58- Sama itu gallery yang sama,

1:17:00tapi kayak ada dua macam UI.

1:17:02- Iya, iya, iya.

1:17:04- Ya kalau gitu yang kiri mas

1:17:06satu foto statik aja kan.

1:17:08Harusnya foto yang emang ya kayak cover

1:17:10image gitu lah. Jadi maksudnya kontrasnya

1:17:12juga bisa lebih diatur, bisa ditimpap

1:17:14di layer yang

1:17:16gradient, opacity, separo,

1:17:18atau berapa lah.

1:17:20- Oke, ada lagi,

1:17:24ada lagi?

1:17:26- Udah sih.

1:17:28- Sudah cukup?

1:17:30Cukup ya? - Sudah.

1:17:32- Wah, ini kayaknya

1:17:34ada yang ini nih,

1:17:36ada yang masuk lagi, bedasitas baru nih.

1:17:38Nah,

1:17:40buat bedasitas berikutnya ya.

1:17:42Mas Yuda terima,

1:17:44Mas Yudi, Yudi.

1:17:46- Nvnya tolong diumpetin,

1:17:48pastiin Nvnya nggak dulu.

1:17:50- Ini nggak dikasih source code,

1:17:52kayaknya takut.

1:17:54Kasihnya website ya,

1:17:56alamat webnya aja.

1:17:58Oke, kalau ada

1:18:00source code-nya boleh, tapi

1:18:02coba dicek lagi, jangan sampai

1:18:04kayak tadi.

1:18:06Udah gitu iseng lagi mencet, kirain kosong,

1:18:08taunya ada isinya.

1:18:12Oke.

1:18:14Cukup?

1:18:16Oke, cukup sekian.

1:18:18Buat malam ini,

1:18:20terima kasih banyak buat semuanya,

1:18:22terima kasih juga Mas Grafis,

1:18:24yang sudah, apa,

1:18:26untuk berpartisipasi

1:18:28untuk di beda.

1:18:30Mudah-mudahan,

1:18:32dapat banyak pelajaran ya,

1:18:34buat next-nya,

1:18:36untuk bikin-bikin web seperti itu,

1:18:38jadi lebih

1:18:40baik lagi.

1:18:42Oke.

1:18:44Sekian dulu untuk malam ini. Sekali lagi

1:18:46terima kasih buat

1:18:48apa?

1:18:50Sponsor kita, Dominesia.

1:18:52Jangan lupa kalau teman-teman

1:18:54mau bikin website kayak tadi,

1:18:56bisa hosting-nya di Dominesia

1:18:58pakai promo code "Kobrolinwebdn".

1:19:00- Pakai Next.js juga bisa.

1:19:04Pakai Next.js kan bisa.

1:19:06Tapi agak ribet ya.

1:19:08Agak ribet ya, harus di-compile dulu kan.

1:19:10- Kalau statik bisa.

1:19:12Kalau statik sih aman.

1:19:14Tapi kalau yang pakai fungsionalitas

1:19:16server-side ya, gitu agak ribet.

1:19:18Harus pakai apa itu?

1:19:20Yang open source, open next.

1:19:22- Open next.

1:19:24Oke.

1:19:26Sekian dulu dari kita.

1:19:28Minggu depan kita akan bahas tentang

1:19:30database dengan

1:19:32narasumber. Jadi ditunggu aja

1:19:34narasumbernya siapa, kita tunggu aja

1:19:36Minggu depannya.

1:19:38Itu dulu.

1:19:40Apa?

1:19:42Itu lagu apa?

1:19:46- Lagu...

1:19:48Ada lagu sekitar berapa?

1:19:505 tahun lalu atau 6 tahun lalu itu?

1:19:52Oh, all about that place.

1:19:54Ada all about that place,

1:19:56not right place.

1:19:58- Oh, dipleset kan.

1:20:00Oke deh.

1:20:04Sekarang, you cannot unhear that.

1:20:06You cannot unhear that.

1:20:08Kalau lu dengerin,

1:20:10lagu itu pasti gak bisa lagi.

1:20:12- Lagu apa?

1:20:16Lagu apa sih? Apache.

1:20:20Ternyata itu apa?

1:20:22Selama ini gue mikirnya apache.

1:20:24Apache.

1:20:26Kan lagu apache itu?

1:20:32Emang nih ya lagu apache?

1:20:34Apache.

1:20:36Nah itu apache.

1:20:38Nah selama ini gue mikirnya apache.

1:20:40Kira itu

1:20:42perintah ini.

1:20:44Ubuntu.

1:20:46APT.

1:20:48Kira apache server itu loh.

1:20:50Iya apache.

1:20:54Gue malah kiranya awalnya apache helikopter.

1:20:56Beda lagi.

1:21:02[tertawa]

1:21:04Pasti skl server ya Rafki ya?

1:21:10[tertawa]

1:21:12Skl server.

1:21:14Skl server emang sering issue ya?

1:21:16Enggak lah.

1:21:18Skl server bagus kan?

1:21:20Supportnya.

1:21:22Semua skl server sama ya.

1:21:24Asal pintar ngerawatin.

1:21:26Maksudnya ada plus and plus.

1:21:28Tapi harus pintar ngerawat.

1:21:32Yang bikin gelus dada itu adalah

1:21:34kalau misalnya kita

1:21:36punya mutiplikasi.

1:21:38Terus somehow

1:21:40indeksnya gak matching.

1:21:42Itu gak matching ulangnya.

1:21:44Bagus asal ada duitnya.

1:21:46Semua juga gitu.

1:21:48Semua juga gitu.

1:21:50Oke cukup ya.

1:21:52Terima kasih semuanya.

1:21:54Kita ketemu lagi minggu depan.

1:21:56Selamat malam. Selamat istirahat. Bye bye.

1:22:02Atau mungkin telah kesekian kali melihat

1:22:04untuk membandingkan kembali dengan lainnya?

1:22:06Jika Anda mencari tahu mengenai

1:22:08layanan web hosting terbaik, kami

1:22:10pastikan Anda berada di tempat yang tepat.

1:22:12Dengan Domainesia dapatkan pengalaman

1:22:14menggunakan layanan hosting

1:22:16yang lebih baik.

1:22:18Dengan SSD berperforma tinggi dalam

1:22:20infrastruktur cloud yang telah dioptimalkan

1:22:22untuk kebutuhan personal maupun bisnis.

1:22:24Teknologi ini memungkinkan Anda

1:22:26memperoleh layanan yang lebih stabil

1:22:28serta proteksi dari korupsi data.

1:22:30Hosting Domainesia juga

1:22:32telah mendukung Node.js, Python,

1:22:34Ruby, Go, PHP, Java,

1:22:36serta binary Linux.

1:22:38Lebih dari 200.000 pelanggan

1:22:40telah mempercayakan layanan hosting

1:22:42di Domainesia, kepercayaan yang kami

1:22:44jaga dengan garansi uptime 99,9%

1:22:46serta garansi uang kembali 100%.