Ngobrolin CSS Layout - Ngobrolin WEB

1:29Di Tangsel.

1:32Tenggeran Kota ya?

1:33Banten, Banten.

1:34Bandara Sutak.

1:35Ya gitu deh.

1:37Pokoknya nggak di Jakarta.

1:38Ya, Banten.

1:41Eh nggak tahu gimana pokoknya, pokoknya bukan di Jakarta kan?

1:44Iya, awalnya kan Jakarta.

1:46Terus kan udah dipisah jadi...

1:48Kamayoran kan dulu.

1:49...jadi Banten.

1:50Iya, jadi Banten kan.

1:51Dulu banget.

1:52Dulu banget.

1:54Oke, jadi malam hari ini topik kita adalah tentang layout, spesifiknya CSS ya.

2:02Jadi kan kalau analogi gitu ya.

2:05HTML itu kan kalau misalkan kita bikin HTML, dokumen HTML itu biasanya kalau analoginya bikin rumah itu kayak apa ya?

2:14Kayak kerangkanya, fondasinya, lantainya gitu kan.

2:20Terus kalau kita mau nge-cet, mau tambahin interior, exterior dan lain-lain, ya pakenya CSS kan.

2:30Mau diatur bentuknya kayak gimana juga mungkin bisa dibilang CSS lah ya.

2:34Kita bisa aja punya div, ada 10 gitu kan.

2:37Terus tiba-tiba kita mau bikin bentuknya kayak spreadsheet gitu, bisa.

2:44Kita mau turun ke bawah, bisa.

2:46Pokoknya itu nggak berpengaruh ke...

2:48Zigzag bisa, kiri kanan.

2:50Zigzag bisa, semuanya bisa.

2:52Kalau JavaScript ya buat.

2:54Biasanya kalau interactivity, JavaScript.

2:58Iya, kalau JavaScript interactivity, pintunya udah ada tapi belum berfungsi.

3:02Nah, difungsikan sama JavaScript, bisa buka, bisa tutup.

3:05Kalau mencetel, ini...

3:07Iya, itu JavaScript.

3:09Oh nggak juga ya?

3:12Oh iya, udah bisa ya.

3:13Udah bisa animasi, udah bisa transisi.

3:16Jadi kayak bahasa komograman ya.

3:18Bisa variable, bisa program, bisa apa?

3:22Bisa kondisi.

3:24Dropdown tanpa JavaScript juga bisa.

3:28Kayak itu menu dropdown, tau nggak?

3:32Tanpa JavaScript juga bisa.

3:35Kalau dulu harus jQuery, jQuery plugin ya.

3:41Sekarang kita bisa.

3:43Bisa hidden, kalau di-click.

3:46Kalau di-click, kan checkbox-nya aktif.

3:49Nanti kita bisa check type properties, checkbox checknya.

3:55Terus bisa dibikin display, non-display.

3:58Scroll animation juga bisa sekarang.

4:03Udah usah pakai JavaScript kan.

4:05Kan biasanya ada tuh yang kayak bar, ada warnanya.

4:09Kita makin scroll, makin ke bawah.

4:11Barunya warnanya berubah.

4:13Nah, itu udah bisa CSS-only juga.

4:17Jadi lebih baik.

4:19Kalau bisa di-CSS kan, CSS-kan saja daripada pake JavaScript.

4:24Nah, cuma biasanya CSS ini buat web developer apapun,

4:29selain yang orang front-end,

4:31ya biasanya web developer tuh pada takut sama CSS deh.

4:34Pada entah sebel, atau trauma, atau takut.

4:37Itu stereotype yang benar atau nggak sih?

4:40Bisa sih.

4:42Kalau saya, iya.

4:44Nah, kamera aja kenapa masih bisa.

4:46Lagi control-end, jadi ya nggak terasa.

4:49Lagi mati.

4:51Sebentar ya.

4:52Lanjut aja, lanjut.

4:54Itu ada benarnya.

4:58Ada benarnya.

4:59Yang berkaca dari saya sendiri.

5:01Saya itu apa ya?

5:04Kurang...

5:07Kurang tertarik.

5:09Dan kurang bisa...

5:11Bukan.

5:12Kurang bisa CSS, karena kurang tertarik untuk mendalaminya.

5:16Nah, itu kan.

5:18Karena serba memingungkan bagi saya.

5:22Apa yang membuat bingung?

5:25Contohnya nanti kita bahas.

5:32Entah untuk layout.

5:34Kalau mau bikin boxes itu,

5:36Mau pake grid atau mau pake flags.

5:39Mau pake table, juga bisa.

5:42Maksudnya, display table ya.

5:44Display table ada juga kan?

5:46Nah, itu banyak banget property-nya yang harus dihafalin.

5:51Dan...

5:56Konsep...

5:58Atau...

6:00Konsep-konsepnya juga.

6:01Misalnya contohnya ada utility first.

6:04Kayak si Tewin.

6:06Atau...

6:08Booster utility first juga nggak sih?

6:10Booster...

6:12Ya, utility.

6:13Bukan utility sih.

6:15Kalau utility kan hanya...

6:17Satu...

6:18Oh itu atomic ya?

6:19Yang satu property, satu class.

6:21Ya, mungkin bisa dengan lebih utility kali ya.

6:24Atau ada lagi planning line kayak...

6:27Block element modifier, band.

6:30Ada yang atomic design.

6:32Yang itu yang kayak...

6:34Mulai dari unit, terus kemudian molekul,

6:36Terus kemudian...

6:38Apa itu namanya?

6:40Sebenarnya kayak...

6:42Dari cell, terus kemudian jadi...

6:44Molekul, terus jadi apa gitu.

6:47Jadi...

6:48Ada...

6:50Ada hierarki, nggak itu maksudnya.

6:52Ada hierarki.

6:53Nah, mau ambil...

6:54Kadang kalau misalnya...

6:56Dan CSS itu...

6:58Kalau ikutin saya...

7:00Sepanjang karir saya...

7:02Tergantung si content-nya.

7:04Jadi...

7:06Sangat opinion...

7:08Opinionative ya.

7:10Bisa juga ngomong opinionative.

7:12Sangat opinionative.

7:14Jadi...

7:16Tergantung siapa yang setup di awal.

7:18Dan...

7:20Kalau sudah...

7:22Dia yang setup, ya sudah.

7:24Harus follow all the way through.

7:26Caranya seperti itu.

7:27Karena kalau masih...

7:29Kalau sempat kita introduce...

7:31Sesuatu yang berbeda...

7:33Itu...

7:34CSS jadi acara-acara.

7:36Itu yang...

7:38Yang kadang...

7:40Karena...

7:44Pengetauan CSSnya rendah.

7:45Jadi saya kadang itu...

7:47Terbawa arus saja.

7:48Kalau lagi ikut project mana...

7:49Oh, dia pakai cara begini.

7:51Ya sudah, saya follow cara begitu.

7:53Nanti kalau pakai...

7:54Ada yang berbeda pakainya...

7:56Cara yang berbeda?

7:57Saya follow cara seperti itu.

7:59Jadinya...

8:01Konsep yang di kepala saya...

8:02Enggak tahu mana yang benar, mana yang bagus, mana apa.

8:04Dan...

8:05Enggak pernah dapat...

8:07Basic...

8:08Apa?

8:09Core-nya gitu.

8:10Pengetauan core-nya.

8:11Seperti kalau misalnya...

8:12Kalau saya belajar JavaScript...

8:14Saya ngerti itu.

8:15Core-nya...

8:16Dia bikin begini itu...

8:17Ngerti kenapa.

8:18Sedangkan kalau sudah ikutin CSS...

8:20Dia bikin begini itu, ya sudah.

8:21Ikutin aja lah.

8:22Bah.

8:23Enggak tahu saya core-nya kenapa dia berubah seperti itu.

8:25Nah itu contohnya.

8:27Kalau sekarang...

8:28Sudah boleh introduce CSS variable kan.

8:31Nah...

8:32Semenjak akhir-akhir ini...

8:33Udah banyak CSS variable.

8:34Jadi rata-rata udah pakai CSS variable sekarang.

8:37Jadi harus follow...

8:38Itu tuh ada komen lucu ya.

8:40Gak bisa naikin...

8:41Komen ya.

8:42Gak ada mas Risa.

8:44Udah di setup variable-nya...

8:47Yang lanjutin malah masukin hex scanner.

8:49Nah...

8:50Itu penting yang ikutin style-nya yang di setup.

8:55Atau ada...

8:56Sudah dibikin mixing-nya...

8:58Terus...

8:59Gak di pakai.

9:00Yang...

9:01Yang...

9:02Yang...

9:03Yang...

9:04Yang lanjutin...

9:05Misalnya gini...

9:06Ada yang bikin mixing apa?

9:07Mixingnya PX2 RAM.

9:09Nah...

9:10Pasti aja dipakai pixel dimana-mana.

9:12Nah contohnya seperti itu tuh.

9:14Cuma kalau itu bukannya...

9:17Bukannya isi project management-nya.

9:19Maksudnya...

9:20Misalnya JavaScript pun kan...

9:22Nggak, maksudnya apa?

9:24Project setup.

9:26Kan harusnya ada kesepakatan dong.

9:28Apa caranya gimana?

9:30Dokumentasinya dimana?

9:32Kalau yang...

9:33Kalau anggota tim-nya nggak ngerti cara pakenya...

9:36Nanyanya ke siapa ya?

9:38Maksudnya...

9:39Berarti harus ada kesepakatan kayak gitu kan?

9:41Itu kalau sudah project-nya...

9:44Project-nya yang sudah mateng.

9:46Jadi dari setup-nya...

9:48Dokumentasinya, best practice-nya sudah di setup semua.

9:51Tapi kalau project...

9:53Kerja satu malam mana-mana gitu kan?

9:55Ya kan?

9:57Terus nanti pada...

9:58Pada...

9:59Yang nge-handle front-end dua orang.

10:01Dua-duanya punya pandangannya berbeda.

10:03Ya udah kacau banget untuk CSS.

10:05Nah itu maksudnya...

10:08CSS itu tends to opinio native-nya kencang.

10:11Makanya saya bingung sendiri.

10:14Jadinya...

10:15Suka terbawa harus.

10:17Kalau mau ke-kiri, ke-kiri.

10:19Karena tergantung...

10:21Siapa yang setup di awal.

10:23Nah cuma berarti kan...

10:27Sebetulnya kalau di pikir-pikir...

10:29Bukan murni salah CSS-nya.

10:31Tapi...

10:32Apa ya?

10:33Pengaturan...

10:34Ya itu kalau ada dua front-end.

10:36Tapi mereka punya perspektif...

10:39Lain-lain.

10:41Terus cara coding-nya lain.

10:43Terus nggak dibikin kesepakatan.

10:45Terus belum lagi satu team kan...

10:47Pasti ada yang full-stack back-end.

10:49Nggak ngerti isi kepala mereka berdua.

10:51Terus jadi acara dulu semua.

10:53Bukannya sebetulnya...

10:55Tapi misalnya kalau emang...

10:57Cara kerjanya gitu, bukannya ke depannya...

10:59Misalnya nanti...

11:00Mutusin buat pakai REST API...

11:02Atau GraphQL atau apa.

11:04Kalau misalnya cara kerjanya kayak gitu kan...

11:06Bisa aja terjadi dengan teknologi lain.

11:12Kalau misalnya...

11:16Kalau dari sisi back-end.

11:18Kalau sudah pakai framework Laravel...

11:20Nggak mungkin ada yang introduce CI kan.

11:22Itu dulu deh.

11:24Di CSS...

11:28Kalau sudah pakai bootstrap 5...

11:30Bisa aja kan si X pakai...

11:40Anjur-anjur.

11:42Kalau sudah...

11:44Misalnya kita pakai bootstrap 5.

11:46Tapi ada aja yang bisa pakai...

11:48Misalnya ada aja yang mau pakai...

11:50Posisi absolut tiba-tiba.

11:52Sesuka hatinya.

11:56Karena ada geser-geser...

11:58Ini kok nggak bisa sih.

12:00Ada overflow.

12:02Terus bingung sendiri.

12:04Cara dengerin overflow gimana ya.

12:06Yaudah, bikin aja.

12:08Margin right minus.

12:10Tiba-tiba.

12:12Itu bayangan saya.

12:16Ada akalan-akalan...

12:20Akalan-akalan motirnya.

12:22Itu masa saya...

12:26Karena saya sering ditegor.

12:30Berarti...

12:32Mungkin bisa di...

12:34Kita hipotesisnya...

12:36Itu kayak minus.

12:38Bukan minusnya sih. Cuma maksudnya...

12:40Rawan...

12:42Punya surface luas...

12:44Untuk orang improve sembarangan kali ya.

12:46Di banding...

12:48Sebetulnya JavaScript pun bisa pakai arrow function.

12:50Bisa pakai function ES5.

12:52Dan scopingnya juga...

12:54Behavior scopingnya...

12:56Ada yang bisa beda.

12:58Tapi kalau CSS mungkin...

13:00Lebih rawan dan lebih besar kesempatan...

13:02Buat orang yang nggak ngerti, bingung.

13:04Rawan dan ngacau.

13:06Gitu kali ya, berarti hipotesisnya.

13:08Nah, biar temen-temen apa...

13:10Nggak terlalu takut...

13:12Atau trauma sama CSS...

13:14Kita sekali-sekali bahas CSS.

13:16Eh, pernah nggak? Disambung-sambungin aja udah.

13:20Sebelumnya kita...

13:22Sebelumnya kita pernah nggak sih...

13:24Bahas CSS? Sebetulnya pernah sih, tapi...

13:26Pernah. Sampai color pun pernah kita.

13:28Nah, itu kan tentang color.

13:32Ya, episode 2, CSS.

13:34Kita pernah lipat-lip bahas CSS-nya doang.

13:36Nggak tahu CSS apa, cuma CSS aja.

13:38Bahas CSS.

13:40Pernah, episode 2.

13:42Iya, episode 2.

13:44Tapi masih generic banget ya.

13:46Nah, kalau yang sekarang juga spesifik.

13:50Ya, jadi malam hari ini kita kan bahas tentang layout ya.

13:54Tadi penganturan dari HTML.

13:58Video-nya displeinan.

14:00Iya, displeinan.

14:02Displeinan.

14:04Kalau...

14:06Kalau ada float-nya, nanti melakukannya.

14:08Iya, jadi...

14:10Mungkin sebelum kita ngomongin

14:12tentang layout yang baru-baru ya.

14:14Seperti CSS Grid.

14:16Ada lagi Flexbox.

14:18Ada...

14:20Sejarahnya nih, sejarahnya.

14:22Jadi, jauh sebelum CSS punya...

14:24Punya...

14:26Pengaturan untuk layout.

14:28Web itu ya seperti ini.

14:30Dari dokumen.

14:32Kita udah sempet bahas juga beberapa kali kan.

14:34Jadi sebenarnya HTML itu...

14:36Awalnya tidak didesain untuk

14:38membuat aplikasi.

14:40Atau aplikasi web ya, dalam hal ini.

14:42Dia adalah dokumen yang saling terkait.

14:44Dokumen.

14:46Iya.

14:48Jadi kalau pakai anal di rumah tadi,

14:50nggak ada chat-nya kali ya?

14:52Yang penting bisa melindungi kita dari...

14:54Apalah, dari ujan dan lain-lain.

14:56Iya. Dari ujan dan panas.

14:58Nggak ada chat-nya.

15:02Nggak ada interior-nya.

15:04Nggak ada ubin-nya.

15:06Ini layout-nya...

15:08Seperti ini aja, standar.

15:10Terus kalau misalkan kita butuh...

15:12Ada space di sini.

15:14Ya kita pakai paragraf.

15:16Atau pakai BR gitu kan.

15:18Ada juga pakai HR.

15:20Horizontal Line gitu kan.

15:22Kayaknya cuma sebatas itu.

15:24Untuk kebutuhan pada saat itu.

15:26Atau mungkin sebetulnya udah ada style-nya

15:28dari browser kan. Sampai sekarang tuh

15:30di browser, di ring-ring engine browser

15:32ada kayak default-nya kan.

15:34Mungkin ada default yang basic banget.

15:36Kayak misalnya list indentation-nya

15:38mungkin ya dari browser.

15:40Tapi nggak bisa di-customize.

15:42Nggak bisa di-styling sesuai kebutuhan kita.

15:44Terus hyperlink sudah pasti

15:46warna biru.

15:48Dari dulu.

15:50Nggak boleh merah. Maksudnya nggak ada cara

15:52untuk kita bikin bir.

15:54Itu umu!

15:56Itu kita merah sih.

15:58Kita tuh sama-sama butuh

16:00warna lagi.

16:02Pas FB satu warna nih.

16:04Kita bingung semua

16:06soal warna.

16:08Umu! Bukan merah.

16:10Umu ya.

16:12Iya, iya, iya.

16:14Terus gimana?

16:20Sebenarnya dia sedang berusaha

16:22memperbaiki

16:24display inline.

16:26Kalau display inline

16:28berarti tiduran. Oh nggak, muncul lagi.

16:30Ada, ada, ada.

16:32Tapi, maaf ya temen-temen.

16:34Ini kayaknya cuma bisa suara doang.

16:36Kenapa kameranya, Mas Liza?

16:38Nggak tahu. Tiba-tiba

16:40browser-nya itu

16:42katanya ada yang

16:44conflict. Jadi ada kameranya

16:46dipakai di aplikasi lain. Padahal dicek tadi

16:48nggak ada. Semuanya nggak

16:50pakai, nggak ada yang pakai kamera.

16:52Udah di restart juga

16:54komputernya.

16:56Masih tetap sama. Untungnya

16:58audionya bisa. Jadi ya kita lanjut aja dulu ya.

17:00Ada-ada aja cobaannya

17:02orang streaming sih.

17:04Rebecca Purple. Oh ini yang kita ceritakan

17:06waktu itu ya.

17:08Kisah sedih ya.

17:10Temen-temen yang belum tahu Rebecca Purple

17:14bisa visit episode kita

17:16mengenai warna.

17:18Nggak tahu episode berapa.

17:20Cari sendiri.

17:22Oke, nah ini kan

17:24kita lanjut lagi ya. Ini kan versi pertama

17:26web aplikasi, bukan

17:28aplikasi, alaman atau

17:30dokumen web pertama kali itu KML.

17:32Nah, di sini ya cuma ada

17:34font size, font face,

17:36juga itu terbatas kan. Tergantung sama.

17:38Nah, di sini masuk di markup-nya. Jadi

17:40presentational kan HTML

17:42tech. Kalau sekarang lebih

17:44buat ke struktur semantik.

17:46Nah, kalau dulu dicampur antara

17:48semantik dan apa

17:50presentasi tampilan. Jadi

17:52ya itu font, type font.

17:54Kalau sekarang kan play ya paragraf gitu.

17:56Kalau dulu tuh font

17:58face perdana.

18:00Display block.

18:02Display initial.

18:04Jadi kalau

18:08apa dulu, langsung ya

18:10di tag HTML-nya ya.

18:12Di markup-nya ada atribut

18:14face, atribut color.

18:16Color.

18:18Kemudian berubah

18:20apa, dipisahkan

18:22ke satu file, file-nya

18:24CSS. Oh nggak, ke style dulu ya.

18:26Ke text style dulu kan.

18:28Text style. Masih

18:30dokumen yang sama, tapi sudah

18:32di tempat yang berbeda, mungkin di atas gitu kan.

18:34Terus habis itu, pindah

18:36lagi, karena mungkin makin-makin panjang

18:38jadi file CSS.

18:40Sekarang, balik lagi.

18:42Kalau pakai Tailwind, kayak gini lagi nih.

18:44Masuk ke markup,

18:46tapi kan di satu tempat.

18:48Jadi class name.

18:50Dan fun fact nih,

18:52sebenarnya kalau tadi

18:54ada atribut online ya,

18:56di image tadi, ada contohnya.

18:58Itu tuh kalau, itu sebenarnya masih ada

19:00sampai sekarang bisa dipakai tuh, yang

19:02contoh image source smiley.gif

19:04online, atribut

19:06online. Masih-masih.

19:08Dipakai di ritminya GitHub.

19:10Kan itu nggak bisa pakai CSS ya.

19:12Oke, yang simple.

19:14Line-nya bisa pakai itu tuh.

19:16Tapi, tag-tag ini juga

19:18masih bisa dipakai kan, semuanya kan.

19:20Voice tuh masih bisa nggak sih?

19:22Masih.

19:24Masih bisa semua itu.

19:26Markie, masih bisa markie.

19:28Butuhnya ini masih bisa kerender.

19:30Halaman ini kerender kan?

19:32Bukan, ini photo.

19:34Image.

19:36Oh, yang ini?

19:38Nah, itu kan kerender. Itu kan isinya

19:40beneran di belakang itu font color tuh.

19:42Enggak lah, span tuh.

19:44Span.

19:46Coba tambahin.

19:48Coba aja, div tools.

19:50Edit.

19:52S-H-T-M-L.

19:54Color sama dengan red.

19:56Coba color, color sama dengan red.

19:58Font color ya?

20:00Font.

20:02Red.

20:04Red.

20:06Oh, udah?

20:08Oh, belum.

20:10Oh, bisa.

20:12Bisa, masih bisa.

20:14Itulah salah satu keunggulannya

20:16teknologi web ya.

20:18Jadi dia backward compatibility-nya

20:20luar biasa.

20:22Ya, baik itu

20:24S-H-S dan juga JavaScript.

20:26Makanya size-nya jadi bergigel-gigel kan.

20:28Harus bisa menampilkan

20:32versi yang awal banget

20:34sampai yang sekarang, gitu ya.

20:36Dari 30 tahun lalu.

20:38Iya, iya.

20:40Oke, kita lanjut lagi. Nah, ini kan

20:42baru web pertama,

20:44halaman web pertama.

20:46Kemudian muncullah

20:48kebutuhan untuk double kalem.

20:50Akal-akalan. Nah, atasnya dulu sih.

20:52Mungkin atas sedikit yang...

20:54Atas mana? Ini.

20:56Nah, single pixel GIF kan

20:58dimana ada...

21:00ada kesempatan.

21:02Di situ ada developer akal-akalan.

21:04Di situ ada developer yang akal-akalan, kan.

21:06Karena pas itu

21:08masih susah

21:10ngatur. Ini kan sebenarnya spacing itu kan

21:12the general layout ya.

21:14Karena kita pengen paragraf ini

21:16sama paragraf bawahnya

21:18spacing-nya

21:20space-nya jangan

21:22standar. Pengen ini lebih besar.

21:24Mungkin, dan bukan cuma kosmetik,

21:26bukan cuma estetik aja, tapi mungkin

21:28fokusnya. Misalnya untuk

21:30hierarki. Misalnya ada section

21:32apalah, ada satu bub gitu.

21:34Memisahkan satu section sama section lain

21:36untuk nandain

21:38section itu, untuk nandain grouping kan.

21:40Mungkin pengen misalnya spacing-nya lebih...

21:42apa? Space-nya lebih besar.

21:44Nah, dulu belum bisa.

21:46Belum ada margin. Nah, pakainya image deh.

21:48Image transparan.

21:50Ya. Spaced.

21:52Spaced.

21:54Jadi...

21:58Ya, gitu.

22:00Atau cara yang juga

22:02tradisional pake NBSP? NBSP, NBSP, NBSP.

22:04Nah, pasti

22:06non-breaking space ya.

22:08Oh, dreamweaver ya.

22:10Oh, dreamweaver ya.

22:12Ini sebelumnya ya.

22:14Ya, ya.

22:16Nah, setelah

22:18akalanya jadi canggih lagi,

22:20pake table.

22:22Ini penyalahgunaan bisa dipilihkan.

22:24Penyalahgunaan ya.

22:26Tapi konfinian.

22:28Ya, dan emang gak ada...

22:30pilihan lain sih. Gak ada pilihan lagi.

22:32Gimana lagi? Tapi kan namanya

22:34table. Namanya juga tag-nya,

22:36elemennya table ya. Dibikin untuk

22:38menampilkan data tabular.

22:40Table.

22:42Tapi apa boleh buat?

22:44Masih...

22:46Masih-masih. Email?

22:48Email, ya.

22:50Kalau mau leoting email itu harus mau, nggak mau,

22:52suka-suka, harus pake table.

22:54Masalahnya kan, problem kenapa

22:56table ditinggalkan sebagai layout

22:58utamanya adalah karena

23:00performance ya. Jadi

23:02dia...

23:04Nggak responsif ya?

23:06Nggak responsif.

23:08Dan dia juga

23:10table ini baru bisa

23:12dirender setelah ketemu /table kan.

23:14Setelah table tutup baru dirender kan.

23:16Nggak tahu sekarang, masih kayak gitu nggak?

23:18Jadi ketika misalkan

23:20ini ada 100...

23:22Sekarang sih udah browser udah lebih pintar ya.

23:24Jadi bisa auto.

23:26Berarti masalah utamanya

23:28di responsif.

23:30Tidak bisa dibuat responsif gitu ya?

23:32Sama behavior

23:34tablesill itu agak aneh.

23:36CSS itu kan sebetulnya

23:38layouting-nya, rendering-nya

23:40pakai prinsip yang namanya box mobile kan.

23:42Yang hitung margin, padding,

23:44blah-blah-blah. Nah, coba aja kalau

23:46tabel itu kadang padding-nya

23:48pasti kadang ada bagian yang bisa,

23:50ada yang nggak ribet deh.

23:52Dan email juga sekarang sebetulnya

23:54tergantung email kliennya ya.

23:56Kalau nggak harus

23:58support email klien yang luas

24:00banget-banyak banget. Sekarang udah bisa kok

24:02pakai blog sama apa?

24:04Ya, display blog

24:06yang ngonderen bisa kok.

24:08Jadi tergantung segala-galanya.

24:10Ini bisa dibilang web 1?

24:12Enggak. Ini HTML 1.

24:14HTML 3.

24:16HTML 3.

24:18Kita nggak pakai istilah web 1,

24:222, web 3 ya di sini.

24:24Kita pakai istilahnya HTML, CSS.

24:26Karena spesifikasi ya.

24:28Maksudnya yang ada spesifikasi resminya.

24:30Nah, dari kesih layout

24:32ini, ini kan breakthrough

24:34banget deh. Terbosen banget.

24:36Kalau si image transparent

24:38tadi kan cuma bisa ngasih space

24:40yang lebih entah kesamping

24:42atau ke bawah. Jadi

24:44dengan men spesifikasikan

24:46width-nya, tingginya, atau

24:48lebernya. Nah, cuma kalau ini

24:50pertama kali bisa pakai kolom.

24:52Breakthrough banget pas itu.

24:54Jadi bisa 2 kolom gitu

24:56seperti ini ya. Ini buat teman-teman

24:58yang tidak mengalami, ini adalah alaman

25:00Netscape

25:02salah satu browser

25:04yang

25:06terkenal di jamannya ya.

25:08Geocities begini dulu.

25:10Iya, geocities.

25:12Yahoo.

25:14Tapi umumnya masih rendah ya.

25:16Masih rendah.

25:18Rendah.

25:20Nah, terus kalau di desain grafis kan

25:22kalau orang desain kan dulu

25:24awalnya kayak berkipulatnya

25:26ke desain grafis yang

25:28fisik ya, print media.

25:30Nah, di print media itu kan

25:32grid kolom itu kan sebetulnya kayak

25:34udah prinsip dari dulu banget lah.

25:36Nah, ini pertama kalinya

25:38halaman web

25:40bisa punya tampilan

25:42yang desainnya bisa

25:44menyerupai. Pada masanya

25:46udah breakthrough banget lah. Bisa

25:48pakai prinsip-prinsip dari

25:50desain print,

25:52desain cetak.

25:54Saya teringat dulu jaman

25:56waktu kuliah bikin

25:58halaman tampilan web

26:00masih pakai table, tetapi

26:02desain yang diberikan ke saya itu

26:04bukan kotak-kotak,

26:06tapi alami corner.

26:08Alami corner.

26:10Jadi saya harus potong-potong sesuai

26:12ya ampun, potong-potong

26:14sesuai kan table-nya ukurannya.

26:16Makanya dulu

26:18ada pekerjaan yang namanya

26:20slicing. Slicing dari

26:22Photoshop. Jadi Photoshop

26:24dari image gitu kan

26:26dipotong-potong supaya bisa masuk ke table kan

26:28pada saat itu ya.

26:30Supaya backgroundnya

26:32kecil, jadi ada dibikin

26:34misalnya menu-nya

26:36itu ada gradient, color.

26:38Header-nya ada gradient, makanya

26:40dipotong kayak cuma

26:425 pixel, terus diripit,

26:44backgroundnya diripit.

26:46Jadi supaya

26:48supaya nggak besar ukurannya.

26:50Iya, background gitu, supaya

26:52background color-nya segitu, terus

26:54nanti yang dipotong ujungnya kiri-kanan.

26:56Ah, rounded-nya.

26:58Jadi rounded, iya. Ini ada

27:00masukkan sedikit suara mas Ivan, kecil

27:02katanya. Mungkin bisa digedein.

27:04Gedein volume-nya.

27:06Nah, kalau Damar, malah ini ya, malas

27:08banget pakai table, karena apalagi CSS

27:10bisa hasilnya tidak sesuai

27:12harapan kali ya.

27:14Jadi lebih memilih pake flex column

27:16atau grid.

27:18Nah, jangan sedih. Sekarang udah ada display

27:20table kan, jadi property-nya display

27:22titik 2 table.

27:24Oh, tapi kalau dulu, saya nyaman

27:26banget pakai table. Bahkan sudah ada

27:28udah masuk jamannya

27:30float, left, float, right, gitu.

27:32Tapi kita pakai table, lebih enak.

27:34Walaupun dulu ya performanya kurang

27:36bagus ya, tapi lebih gampang

27:38untuk menyusun

27:40apalagi bisa di drag-and-drop kan,

27:42kalau jamannya apa?

27:44Dreamweaver tadi kan,

27:46jadi udah kelihatan gitu bentuknya.

27:48Kalau float-float gitu kan agak-agak susah ya

27:50dibayamin dulu.

27:52Kalau float, harus ngerti

27:54CSS-nya. Nah, cuma kalau dulu

27:56jaman table, kalau nggak salah,

27:58Dreamweaver itu kayak dibeli,

28:00makromedia ya.

28:02Makromedia, terus dibeli Adobe.

28:04Ya, dibeli Adobe. Nah, terus Adobe itu

28:06kalau nggak salah, kalau misalnya

28:08kita punya layout, itu bisa

28:10nge-slicing di situ deh,

28:12nge-slicing di situ, jadi kita

28:14nge-slicing-nya pakai GUI-nya Photoshop

28:16kalau nggak salah, terus di export

28:18somehow, somehow udah

28:20kepotong-potong gitu.

28:22Jadi udah jadi file banyak.

28:24Dari Photoshop udah dipotong,

28:26terus di...

28:28dipotong, dia kasih kayak

28:30gri apa, kayak...

28:32Kita nge-garis gitu kan, kayaknya

28:34pernah lihat deh, pernah baca bukunya.

28:36Terus kita kasih

28:38label, nanti sekali export,

28:40dia langsung udah

28:42terpotong-potong, jadi kayak sprite.

28:44Jadi misalnya kalau layout-nya

28:46kayak sprite deh kayaknya.

28:48Jadi misalnya kalau satu layout dipotong,

28:50jadi 40, misalnya

28:524x10 gitu, 40 kita

28:54nggak harus nge-save gambarnya,

28:5610x gitu, nggak kan dia yang akan mati.

28:58Bisa sekali pakai.

29:00Terus kayaknya bisa di

29:02export jadi HTML file

29:04atau gimana gitu, yang

29:06kompatibel sama...

29:08Oh nggak bisa ya?

29:10Jadi slicing-slicing itu kan,

29:12image-image kecil-kecil gitu kan,

29:14kepotong-potong. Masukin ketamanya

29:16sendiri tapi jadi Dreamweavers.

29:18Kayaknya ngerti konsepnya tapi

29:22untungnya belum pernah.

29:24Oh.

29:26Iya, enaknya drag-and-drop.

29:28Jadi table-nya ada, kita tinggal drag-and-drop

29:30si image-nya ke table

29:32yang kita mau, column yang kita mau.

29:34Dan...

29:38Is what you get.

29:40Gitu di preview,

29:42miring-miring.

29:44Dan biasanya

29:46kalau kita buka source code-nya itu

29:48biasanya banyak

29:50ini ya, banyak sampah.

29:52Ada yang

29:54tambahin spasi, ada yang tambahin apa

29:56gitu, macem-macem lah ya.

29:58Oke, lanjut. Ternyata

30:00sebelum kita masuk ke float,

30:02ada ini ya, ada yang menggunakan

30:04frame.

30:06Ini frame sama

30:08iframe beda ya.

30:10Kalau frame ini seperti iframe tapi

30:14kita nggak buka source

30:16external

30:18yang lain, external.

30:20Bisa external bisa kali ya.

30:22Bisa local, bisa external mungkin.

30:24Tapi yang bikin unik adalah frame ini

30:26bisa, dia punya

30:28atribut

30:30yang mirip

30:32seperti browser

30:34kita, jadi ada,

30:36bakal ada scroll-nya.

30:38Jadi masing-masing kotak ini bisa ada scroll.

30:40Masing-masing kotaknya dirender

30:42sendiri.

30:44Secara mandiri.

30:46Satu kotak, satu halaman lah

30:48gitu, halaman.

30:50Satu view, satu view.

30:52Oh iya.

30:54Ini konsep micro

30:56front-end dari sini.

30:58Masing-masing

31:00sendiri-sendiri, ini berdiri sendiri-sendiri.

31:02Jadi menu-nya itu

31:04satu frame, nanti

31:06content-nya satu frame,

31:08header-nya satu frame, footer-nya satu

31:10frame.

31:12Ini di sini kan udah kelihatan ya.

31:14Satu file HTML di sini,

31:16dua HTML di sini.

31:18Terus bisa di-set juga row-nya, column-nya

31:20berapa persen, berapa persen.

31:22Nah yang juara sih frame set itu sih.

31:24Jadi kalau frame-nya sendiri kan ya udah itu

31:26untuk ngerender halaman,

31:28halaman dari tempat lain, baik internal

31:30ataupun external ya udah kalau itu mah

31:32straightforward ya udah.

31:34Cuma frame set ini kan berarti sebenarnya

31:36pertama kali bisa

31:38mengkustomize ukuran-ukuran

31:40grid,

31:42column dan row

31:44dengan apa ya, kayak deklaratif kan,

31:46pakai kode aja udah, kita

31:48walaupun kita belum pernah pakai,

31:50baca itu cukup jelas kan, oh kita pengen

31:52lebarnya 30 persen,

31:54terus sisanya ada bintang asterisk gitu,

31:56berarti kan silahkan mengikuti

31:58sisanya, udah.

32:00Sudah kayak gitu ya, udah kayak

32:02flex auto.

32:04Kayak CSS Grid.

32:06CSS Grid.

32:08Atau Flex Go.

32:10Benar-benar-benar.

32:12Yang pertama kali juga, cuma udah nggak dipakai ya?

32:14Udah nggak ada ya frame set sekarang?

32:16Udah jarang sekali.

32:18Masih ada?

32:22Sama bang biru.

32:24Bang biru banyak kali.

32:28Semua bang biru.

32:30Ada yang tiga huruf,

32:32ada yang lima huruf.

32:34Yang swasta ya?

32:36Yang swasta apa? Yang BOMN?

32:38Yang swasta.

32:40Oh iya.

32:42Yang UI-nya itu

32:44legendaris ya?

32:46Dia nggak perlu macem-macem, tapi

32:48getting things done ya.

32:50Yang penting jalan. Yang penting

32:52aplikasi webnya masih ada ya?

32:54Bang biru sebelah ya?

32:56BOMN sudah dihapus

32:58aplikasi webnya.

33:00Aplikasi webnya udah di stop.

33:02Oke, berikutnya,

33:04ini image map.

33:06Siapa disini yang mengalami

33:08menggunakan image map.

33:10Ini asli nggak tahu ini apa?

33:12Ada image gede,

33:14misalkan map lah ya.

33:16Kayak Google map lah. Bayangkan kayak Google map,

33:18tapi nggak bisa di scroll satu image gitu.

33:20Terus di koordinator

33:22tertentu, kita bisa

33:24tambahkan

33:26apa ya istilahnya ya? Bisa diklik.

33:28Jadi misalkan nih, gambar

33:30bola ini kan.

33:32Kita mau lingkaran ini, kalau diklik

33:34menuju ke halaman lain atau

33:36menuju ke angka yang lain.

33:38Ke bagian dokumen yang lain.

33:40Itu bisa.

33:42Namanya image map.

33:44Oh, kalau di flash lah.

33:48Di flash aja juga.

33:52Jadi ini kayak go to ya.

33:54Kalau diklik, dia akan

33:56lari kesini misalkan. Kalau ini

33:58dia akan lari ke atas gitu.

34:00Oh, gue tahu kalau area target ini

34:02tahu, tapi itu namanya image map ya.

34:04Iya.

34:06Kalau nggak salah, di Dreamweaver

34:08juga kita bisa buat

34:10otomatis. Kalau ini kan kita harus ketik sendiri nih.

34:12Kita harus tahu koordinatnya berapa kan.

34:14Kalau Dreamweaver itu,

34:16kita drag and drop aja, kita mau bentuknya

34:18bulet atau kotak,

34:20dia udah bikinin koordinasi.

34:22Kita semacam insert image, terus kita select

34:24di image-nya gitu ya.

34:26Semacam itulah.

34:28Semacam itu.

34:32Oke, lanjut.

34:34Nah, baru masuk ke

34:36area-nya CSS.

34:38Sebelumnya CSS jarang dipakai ya.

34:40Belum dipakai, belum ada.

34:42Baru di akhir '90-an.

34:44Di tahun

34:462000-an ga?

34:48'96 ya.

34:50Pemendaisen itu '96.

34:52Oke.

34:54CSS1 ya.

34:56'96. '98, sudah

34:58CSS2. '98, CSS2.

35:00Sekarang CSS3.

35:02Ya, tapi ada

35:042,5 loh.

35:06Ada 2,5? Mana?

35:08Oh, ga disebut ya?

35:10Itu pasti drama-drama yang kita sering liat itu lho.

35:12Pasti yang satu jelas.

35:14Terus nanti ada apa sih?

35:16Ada working group perjuangan atau semacamnya

35:18bikin sendiri. Abis itu karena udah ada yang bikin,

35:20akhirnya jadi pada sadar, jadi compact lagi.

35:22Pasti gitu-gitu.

35:24Nah, CSS itu

35:26mulai yang

35:28CSS2 berarti ya.

35:30CSS level 2 atau versi 2, di '98

35:32baru mulai ada

35:34kemampuan untuk mengatur

35:36layout di sini dengan position.

35:38Position fix dan

35:40position absolute.

35:42Dan position relative.

35:44Jadi, kalau

35:46dulu ya, kita

35:48bikin web itu bisa

35:50seenaknya kita taruh gambar di ujung kanan

35:52bisa, gitu kan, pakai position absolute.

35:54Tapi ga bisa gerak.

35:56Bisa responsive, gitu-gitu ya.

35:58Dia tetep aja di kanan atas, gitu.

36:00Itu bisa pakai position absolute.

36:02Sekarang masih dipakai ya.

36:04Relatif kayaknya masih dipakai.

36:06Kalau absolute, ada masih dipakai ya.

36:08Masih. Masih ya.

36:10Sama ada z-index.

36:12Z-index ini adalah layering.

36:14Jadi kita bisa numpuk satu

36:16komponen di atas komponen yang lain.

36:20Oke, tapi saya senang banget

36:24untuk pakai position absolute.

36:26Iya. Udah pasti

36:28di situ ya.

36:30Gak mungkin ada, oh, ada margin

36:32ini, ada padding ini.

36:34Absolute terhadap relative-nya.

36:36Absolute terhadap parent

36:38relative.

36:40Jadi, bedanya fix,

36:42position fix sama absolute.

36:44Kalau fix itu kan, ngikut.

36:46Itunya viewportnya.

36:48Window, ya.

36:50Dokumenter luar.

36:52Yang ngikut, parent yang

36:54punya position. Nah, mampus.

36:56Parent yang punya position.

36:58Kalau position-nya

37:00gak di-define, yang gak

37:02ngikut parent-nya.

37:04Terus cari ke atasnya lagi.

37:06Atausnya lagi, kalau misalnya parent-nya.

37:08Kan bisa nested banyak nih.

37:10Misalnya parent-nya lagi, ada position relative.

37:12Atau position, apapun itu, asal ada position-nya.

37:14Ya, absolute, ngikut

37:16si parent itu.

37:18Ini ada pertanyaan dari

37:20Lejide, tapi nanti kita akan bahas

37:22nanti aja ya, di akhir-akhir ya.

37:24Biar kita ikutin topik dulu ya.

37:26Next-nya, div.

37:28Nah, masuk ke div sama box-node.

37:30CSS3 tadi gimana kan?

37:32CSS3

37:34draft-nya di 1999.

37:36Ya, jadi

37:38ada beberapa modul.

37:40Setiap modul ada fitur baru

37:42yang direlot secara

37:44terpisah.

37:46Sekarang kita sedang

37:48berada di CSS3 ya.

37:50Dan sudah ada...

37:52Jadi kan sejak 1999, sekarang

37:54udah 2023 ya, kelihatannya

37:56kalau nggak salah di podcast apa, kita pernah dengar

37:58bahwa emang udah nggak akan

38:00ada CSS4

38:02cuma pada

38:04subspecifal, karena udah ada modul-modulnya

38:06kan. Jadi maksudnya kalau mau ada yang

38:08lebih advance,

38:10pakai modulnya itu.

38:12Jadi misalnya apa ya,

38:14color gitu, color function kan

38:16makin canggih, ada yang baru.

38:18Ada color specification, level-levelnya.

38:20Jadi kalau misalnya yang

38:22sekarang nih yang baru kayak

38:24hue transition atau apa, itu juga

38:26ada level-levelnya. Cuma CSS-nya

38:28sendiri, kelihatannya

38:30nggak akan nambah jadi CSS4,

38:32CSS5, dan seterusnya.

38:34Kalau nggak salah, nanti

38:36aku cari-cari dulu.

38:38Yes, dan CSS3 dilengkapi

38:40dengan layout

38:42tools yang sangat powerful,

38:44yaitu Flexbox dan CSS Grid.

38:46Dan pertanyaannya, kapan

38:48kita perlu pakai Flexbox, kapan kita

38:50pakai Grid?

38:52Oh nanti ya.

38:54Ya oke.

38:56Ya oke.

38:58Kita ke

39:00Boxmodel dulu ya. Boxmodel itu

39:02ada gara-gara

39:04salah satunya adalah kita menggunakan

39:06div. Jadi kita udah move on nih.

39:08Dari table,

39:10terus sekarang ke div.

39:12Dari table, frame,

39:14kemudian sekarang ke div.

39:16Dan gara-gara div itu makanya ada

39:18muncul istilah namanya Boxmodel.

39:20Boxmodel ini adalah

39:22div itu kan sebenarnya

39:24kosongan ya.

39:26Komponen kosongan gitu kan.

39:28Nggak ada apa-apa. Bisa kita nggak isi.

39:30Tapi sehar sebaiknya diisi kan.

39:32Dan dia itu punya beberapa

39:34atribut yang bisa

39:36membuat perubahan

39:38layout, perubahan posisi.

39:40Ya ini 3 ini.

39:42Margin, border, dan padding.

39:44Jadi sebenarnya kan

39:46semua di CSS.

39:48Di rendering engine, di browser rendering engine.

39:50Ya yang bisa di styling

39:52dengan CSS. Semua itu

39:54kotak di gampangnya.

39:56Div itu kotak. Nah kotak itu

39:58ada area-area

40:00yang digambar itu. Area luarnya

40:02sekitar si kotak itu margin.

40:04Tinggiran kotaknya itu border.

40:06Terus dalamnya bisa

40:08ada padding kalau mau.

40:10Terus ada isi kotaknya.

40:12Kotaknya mau diisi text, mau diisi

40:14image, mau diisi apapun, bebas.

40:16Masih ada border radius

40:18dan box shadow.

40:20Box shadow. Itu nambah juga?

40:22Nambah pixel?

40:24Nambah pixel.

40:26Di 2 border kan.

40:28Udah tuh dari situ.

40:34Sekarang ada

40:36position yang tadi bertambah lagi.

40:38Yang tadi kan cuman ada

40:40relative, fixed sama

40:42absolute. Sekarang ada sticky

40:44dan ada static.

40:46Static itu default. Jadi kalau nggak ada

40:48positionnya, itu dianggap

40:50static. Nah yang perkara si absolute

40:52tadi tuh kalau parentnya static

40:54itu dianggap nggak ada positionnya.

40:56Dianggap nggak ada

40:58property position.

41:00Kalau sticky ini buat

41:02kayak

41:04header yang tetap ada di atas.

41:06Apa bedanya fixed sama sticky?

41:08Fixed itu

41:10relative sama

41:12viewport.

41:14Kapal pingpongnya nggak tergantung

41:16overflow scrolling.

41:18Yaponya selalu di situ. Jadi

41:20nempel ke sisi

41:22kiri atau kanan atau atas atau

41:24bawah viewport. Nah kalau sticky

41:26itu beda utamanya

41:28itu based on the user's scroll

41:30position. Jadi

41:32kalau by default

41:34itu elemen

41:36yang pakai sticky itu di-rendernya

41:38sama aja kayak elemen lain biasa

41:40aja. Sampai kita nge-scroll

41:42dan dia harus, maksudnya

41:44kalau itu standard

41:46by default itu harusnya keluar viewport

41:48tapi si sticky nggak mau keluar

41:50viewport, nempel ke atas.

41:52Nah kalau daily scroll

41:54ke posisi normal lagi ya udah normal

41:56lagi. Jadi intinya ya

41:58semacam elemen normal

42:00nggak bisa

42:02keluar dari viewport.

42:04Nah nempelnya di mana?

42:06Di atas atau di bawah itu tergantung

42:08kita selain posisi sticky

42:10kita harus nambahin juga

42:12topnya 0 atau bottomnya

42:140.

42:16Kalau misalnya mau

42:18bikin edge yang sticky

42:20bisa juga dong, bisa

42:22sticky edge.

42:24Biasanya kalau saya bikin sticky edge itu

42:26pakainya fix sih. Fix di atas

42:28dibawah.

42:30Dan kalau misalnya

42:32mau

42:34close edge

42:36dia pindah tuh.

42:38Close lagi dia pindah

42:40ke atas.

42:42Kalau ga close, yang pindah buttonnya

42:46jadi clip bannernya.

42:48Kalau klik close, dia pindah

42:50jadi nggak nge-close.

42:52Ya atau yang pindah button

42:54close nya, jadi dia malah ngebuka bannernya.

42:56Jadi intem.

42:58Jadi duit.

43:00Ini damar ya.

43:10Malah nggak works ya

43:12pake box model ya.

43:14Malah nggak cocok kali ya.

43:20Selalu salah,

43:22asumsi nya salah ya.

43:26Terus.

43:28Oh itu mungkin gara-gara nggak

43:30di reset ya.

43:32Jadi ada CSS.

43:34Ada CSS reset tuh.

43:36Ada property box sizing.

43:38Nah ini kalau di

43:40terangin ada ribet sih.

43:42Coba dibuka deh.

43:44Di private box sizing.

43:46Box sizing, oh sebentar.

43:48Nah property.

43:52Kenapa butuh CSS reset?

43:54Apakah setiap browser punya

43:56yang dari default berbeda ya?

43:58Itu sama aja

44:00hal-hal yang itu tadi apa

44:02semua teknologi web itu kan harus

44:04backwards compatible.

44:06Dan entah kenapa, by default itu

44:08value box sizing itu

44:10content box yang mana itu

44:12bikin ukuran, coba

44:14scroll ke bawah, liat sendiri deh.

44:16Pasti begitu liat langsung, oh maksudnya

44:18itu. Nah itu kan

44:20melebar

44:22kan. Dan entah kenapa, by default

44:24box sizing itu value-nya

44:26content box. Dan itu

44:28walaupun udah puluhan tahun

44:30kayak ada kesempatan itu nggak boleh

44:32diubah. Karena yang itu teknologi web

44:34harus backwards compatible.

44:36Makanya obatnya adalah semua

44:38CSS reset pasti ada kayak

44:40yang paling bawah tuh. Coba klik yang bawah

44:42box sizing, border box.

44:44Pasti pernah liat di default.

44:48Nah solusinya itu.

44:52Oke, oh.

44:54Menarik-menarik. Ini ada

44:56pendapat juga nih dari

44:58Cognit.

45:00Web app itu apa?

45:02Asyrektur ya maksudnya. Sekarang yang

45:04component-based seperti React

45:06dan lain-lain lain. Lebih baik pakai

45:08padding aja biar lebih mudah

45:10di-maintain. Karena nggak seharusnya

45:12satu component ngefek ke component lain.

45:14Ada benarnya sih?

45:16Ya apalagi sekarang. Udah defleks,

45:18udah ada grid. Jadi

45:20nggak perlu apa-apa manuali

45:22nge-set margin keluarnya kayak gimana

45:24kan? Karena itu diatur

45:26dari container-nya.

45:28Nah lanjut ke historinya

45:30dulu aja. Nah itu. Ini yang saya sebutkan

45:32tadi, Mas Cognit itu bilang

45:34lebih baik begini-begini.

45:36Itu kan sudah opinionated ya.

45:38Yes. Masih masing-masing.

45:40Masnya pakai begitu.

45:42Eh ternyata ada

45:44programmer yang lain

45:46sesuka hatinya pakai margin.

45:48Nanti ujung-ujung projectnya

45:50udah pecah kepala. Ini apalah

45:52yang bikin di-overflow?

45:54Nah berarti itu

45:56tantangan buat sih

45:58front-end dev di timnya. Gimana

46:00bisa, apa?

46:02Kalau cuma ngikut, kalau cuma ngoding kan?

46:04Terus gini

46:06yang mungkin sih front-end, bukan mungkin

46:08front-end dev-nya ya pasti tahu dan

46:10harus tahu kan. Tapi gimana

46:12mengkomunikasikan dan men-streamline

46:14itu ke seluruh tim

46:16dan membuat itu jadi gampang.

46:18Jadi kayak misalnya

46:20daripada improve-improve

46:22kopas aneh-aneh

46:24udah ini aja.

46:26Kan orang tuh pasti

46:28melakukan apa-apa

46:30yang gampang asal emang jelas

46:32jadinya kayak gitu. Nah itu

46:34keputusan itu dibikin jadi gampang.

46:36Nah ya

46:38tantangannya. Challenge-nya.

46:40Ini salah satu penggagas

46:42box-sizing adalah sih Pak.

46:44Oh iya selalu nama dia

46:46ada tuh di semua CSS reset ya.

46:48Iya ini 2012.

46:50Itu nama orang.

46:52Mas Paul Irish.

46:56Iya dia itu

46:58Eh yang terakhir

47:00disinilah.

47:02Oh gue nggak ikut.

47:04Ikut. Lo yang motoin.

47:06Motoin gue sama dia.

47:08Ini. Oh ini

47:10di CTN.

47:12Ya iya iya.

47:14Yang motoin kan Ivan

47:16yang fotoin.

47:18Maksanya.

47:20Nggak gue disini tuh maksudnya di Jakarta.

47:22Kan ada yang datang Jakarta.

47:24Dia sempat di Jakarta. Sempat datang.

47:26Beberapa kali.

47:28Oh iya.

47:30Fokus on developer.

47:32Itu penjelasannya.

47:34Nah atur-atur

47:36border. Itu kan tadi masalah awalnya

47:38atur border pakai box model.

47:40Ya itu berarti

47:42sizingnya salah.

47:44Masalahnya ini kan tiba-tiba ada yang

47:46padding 20.

47:48Kalau bordernya 4 pixel

47:50jadi tambah 4.

47:52Di sekitar kopaknya.

47:54Oke lanjut lagi.

47:56Trivia.

47:58Apa itu? Apa apa apa?

48:00Apa beda visibility hidden

48:02sama displacement.

48:04Visibility hidden sama?

48:06Siapa aja.

48:08Visibility hidden sama displacement.

48:10Kalian deh jawab dulu.

48:12Kayaknya pernah dengar.

48:16Tapi apa ya?

48:18Sama-sama hilang kan.

48:20Tapi yang satu dirender disembunyiin sama yang satu gak dirender.

48:22Tapi gak tau yang mana nih.

48:24Dirender.

48:26Dirender dua-duanya.

48:28Oh dua-duanya dirender ya?

48:30Gak tau.

48:32Sama-sama gak kaset mata sama-sama dirender.

48:36Tapi visibility hidden itu

48:38meng-occupy

48:40space.

48:42Standard default space.

48:44Jadi misalnya kotaknya atau textnya harusnya

48:46seberapa? Ya tetep ada yang gitu.

48:48Coba kasih.

48:50Ini sekarang, inspect yang

48:52elicitur, static, blablabla.

48:54UL-nya, UL-nya.

48:56Nah, coba bikin

48:58display none. Element style

49:00display none.

49:02Kalau display none, ilang

49:04gak meng-occupy space.

49:06Jadi bisa dianggap 0x0.

49:08Coba sekarang.

49:10Display none, disable.

49:12Visibility hidden.

49:14Hidden ya?

49:16Hidden.

49:18Oh ada ya?

49:22Ada space-nya, tapi

49:24display none.

49:26Ini kenapa kuning-kuning?

49:28Gak tau. Coba ini.

49:30Ada warni apa sekarang?

49:32Kalau display none.

49:34Ini hilang sama sekali ya.

49:36Tapi gak ada warning-nya.

49:38Kalau visibility tadi

49:40kenapa ada itunya?

49:42Coba deh.

49:44Di sini tulisnya, bentar ya.

49:46Gak kelihatan.

49:48Changes to this property will trigger

49:50layout which can impact performance

49:52when used inside keyframe.

49:54Canggih ya.

49:56Sekarang DevTools ada warning-nya.

49:58Forma satu lagi yang perlu diketahui

50:00soal display none

50:02sama visibility ini

50:04soal accessibility behavior-nya

50:06screen reader untuk

50:08misalnya orang yang tunai netra

50:10atau yang pakai screen reader ya.

50:12Lupa penjelasannya.

50:14Cuma kalau gak salah display none itu

50:16gak dibaca sama sekali.

50:18Dianggap gak ada.

50:20Itu kan kayak equal sama

50:22secara visual kan gak meng-occupy

50:24space apapun.

50:26Kayak gak ada lah buat kita yang

50:28melihat secara visual.

50:30Jadi sama screen reader gak dibaca.

50:32Tapi kalau visibility hidden

50:34lupa-lupanya kayaknya dibaca.

50:36Makanya di Tailwind atau di apapun lah

50:38pokoknya CSS suka ada yang

50:40screen reader only itu

50:42akal-akalannya pakai visibility

50:44hidden.

50:46Tapi di height sama width-nya di-set

50:48ke 0 sama akal-akalan

50:50apalagi deh lupa-lupa di-clicking.

50:52Jadi pokoknya biar gak muncul

50:54secara visual

50:56jadi di screen reader tetap dibaca.

50:58Nah.

51:00Ya itu ada taitanya.

51:02Damar kasih trivia lagi nih.

51:04Visibility hidden, opacity 0.

51:06Ayo.

51:08Itu bukannya sama ya?

51:10Oh secara visual sama?

51:12Benar.

51:14Secara rendering,

51:16coba aja opacity 0.

51:18Opacity 0 lebih

51:20mahal gak sih secara

51:22performance gak ya?

51:24Gak tahu.

51:26Apa mungkin kayak

51:28komposit itu loh komposit.

51:30Kalau dibikin transition mungkin

51:32pakai opacity lebih enak.

51:34Ya opacity sama visibility sama.

51:36Masa di-set

51:38masih bisa di-select ya

51:40font ini.

51:42Gak bisa ya? Gak bisa.

51:44Gak bisa ya? Gak bisa.

51:46Gak bisa.

51:48Gak bisa? Gak bisa.

51:50Kalau ke note, mungkin

51:52ada. Cuma gak keliatan aja.

51:54Maksudnya

51:56paste kesalah.

51:58Oh iya, bisa ke copy.

52:00Ya kan, kalau visibility hidden

52:02gak bisa ke copy.

52:04Gak bisa. Gak keliatan sama sekali ya.

52:06Benar. Benar. Benar.

52:08Jadi dia, textnya

52:10sebenarnya ada.

52:12Tapi warnanya transparan.

52:14Gitu kan?

52:16Oke.

52:18Lanjut. Nah.

52:20Sekarang ke flow.

52:22Akhirnya, ini makin

52:24lebih dekat di jaman

52:26mudirin ya. Peradapan.

52:28Peradapan mudirin.

52:30Tapi sangat susah ada prediksi

52:32terfloat right itu.

52:34Susah banget prediksi.

52:36Float pun ternyata itu

52:38sebetulnya masih masuk kategori

52:40akal-akalan. Karena float itu

52:42sebetulnya kan awalnya dibikin untuk

52:44itu lokan yang dimajalah atau apa.

52:46Kan biasanya ada kolom

52:48kayak full quote atau semacamnya ya.

52:50Itu kayak buat gambar misalnya.

52:52Gambar bisa di kiri, bisa di kanan.

52:54Nah. Textnya, konten lain

52:56bisa minggir. Bisa ngikutin

52:58minggir

53:00buat ngasih tempat untuk

53:02elemen yang di float.

53:04Jadi sebetulnya pun bukan untuk

53:06bikin kolom-kolom lain out sih.

53:08Tapi buat kayak gitu kayak image atau

53:10section.

53:12Untuk apa namanya? Untuk dia

53:14mengikuti gayanya tadi.

53:16Biasanya kan kalau di koran

53:18gitu kan.

53:20Atau di majalah printing gitu kan.

53:22Kadang-kadang ada image buat highlight

53:24di sini. Terus tiba-tiba ada huruq gede satu

53:26biji. Terus baru ada textnya.

53:28Nah mereka kayaknya ngikutin ini ya.

53:30Kalau punya button, mau bikin dia

53:32ke kanan atau ke kiri

53:34itu pakai float atau pakai

53:36text lain?

53:38Coba dulu pakai text lain.

53:40Kalau nggak bisa baru pakai float.

53:44Biasanya gitu.

53:46Float itu bahayanya

53:48tanda putih adalah bikin

53:50elemen di sekitarnya semua

53:52ngisi sisa space-nya.

53:54Ya itu kayak misalnya si text yang

53:56florem ipsum-nya kan set out

53:58perspermulannya kan naik ke atas kan.

54:00Nah kalau misalnya kita button-nya di pinggirin

54:02ke kanan, terus nanti text di bawahnya

54:04naik ke atas.

54:06Yang perbedaan utamanya text

54:08lain, text lainnya itu di apply

54:10ke parent-nya.

54:12Float di apply ke elemen-nya.

54:14Elemen yang pengen diatur posisinya ya?

54:18Kalau text

54:20lain itu kan si parent-nya

54:22si div-nya mau bikin text

54:24lainnya left right-ed.

54:26Kalau si float ke elemen-nya

54:28yang kita apply.

54:30Tapi bisa ya? Button bisa

54:34ke kiri ke kanan dengan text

54:36lain ya? Bisa.

54:38Bisa aja.

54:40Itu salah satu yang membingungkan.

54:42Karena button itu kan sebenarnya bukan text kan.

54:44Kok di text lain bisa ke kiri?

54:46Ya, nama property-nya

54:48text-align, tapi sebenarnya apapun

54:50isinya yang di dalamnya kan. Apapun itu kan

54:52bukan text doang kan.

54:54Apapun yang display-nya

54:56inline.

54:58Display-nya harus inline.

55:00Image gitu.

55:02Image kan, image bukan text ya.

55:04Tapi kan bisa juga.

55:06Yang di bayangan saya, kalau kita tulis

55:08text-align left itu

55:10text yang ada di button-nya

55:12yang ke kiri. Bukan button-nya yang ke kiri.

55:14Itulah asumsinya ya, asumsinya.

55:16Bayangannya.

55:18Ternyata tidak ya.

55:20Tapi kalau bikin button

55:22text-align di dalam button

55:24text-nya yang berubah.

55:26Kalau button-nya 100% ya.

55:28100% gede itu.

55:30Mau kiri, mau kanan, mau tengah.

55:32Itu text-align.

55:36Ini adalah

55:38Nah, ini dia

55:40akhirnya ketemu juga. Ini

55:42pertama kali belajar webdrive

55:44ketemunya ini si Tabela

55:46segerit yang kayak gini.

55:48Ini awal-awal

55:50ini nih, sebelum ada

55:52Flexbox namanya Floatbox.

55:54Floatbox?

55:56Enggak, enggak.

55:58Kamu namanya Float kan?

56:00Tampilan grid pakai Float.

56:02Sebenarnya dibikin Flow.

56:04Jadi apa?

56:06Jadi kan

56:08munculnya

56:10berbarengan sama

56:12grid system. Kan ada 12 grid

56:14system, ada 960

56:16grid system, ada 16,

56:18ada 18, ada berapa gitu yang

56:20dibikin grid gitu kalau kita mau desain.

56:22Itu sih busra kan, awal-awal bikin gitu.

56:24Dulu ada framework

56:26sendiri loh. Terpisah dari

56:28CSS framework ya.

56:30Ada namanya grid system, banyak-banyak.

56:32Keliatannya, mungkin kalau

56:34kalau

56:36bisa dikira-kira, ditebak

56:38mungkin kan karena ada Float ini, memudahkan

56:40orang bikin kayak apa ya,

56:42lebih versatile aja,

56:44lebih flexible bikin

56:46apa, kolom-kolom

56:48kayak box 2 konten, inbox 3 konten ini

56:50kan. Karena ini udah

56:52dipermudah, jadi misalnya

56:54orang-orang bikin grid system juga

56:56enak, jadi gampang. Soalnya

56:58balik lagi ke graphic design

57:00yang cetak itu sebenarnya

57:02system 12 grid, 16 grid itu

57:04komong sih udah dari tahun

57:0660-70-an.

57:08Jadi itu udah ada dicetak,

57:10udah ada sebagai

57:12referensi. Nah cuma selama ini

57:14kan kalau orang web-web

57:16ya belum bisa lah, masih ribet karena tadi

57:18masih pakai frameset lah, masih pakai table.

57:20Begitu ada

57:22CSS work yang relatif lebih

57:24gampang dipakai ya udah, jadi diadaptasi

57:26jadi framework.

57:28Framework apa ya?

57:30Framework visual ya?

57:32Iya, istilahnya GS

57:34grid system, itu banyak dulu

57:36banyak-banyak pilihannya.

57:38Ini dulu

57:40karena ada bootstrap, salah satunya

57:42dipopulerin bootstrap nggak sih?

57:44Ada bootstrap, ada subgroup foundation

57:46ada yang inget subgroup foundation

57:48ya, subgroup foundation, tahu.

57:50Masih ada kan CSS-nya?

57:52Udah lama banget.

57:54Maskopnya ya, ting.

57:56Sekarang foundation 6 lagi.

57:58Foundation frame 6 ya sekarang.

58:00Iya.

58:02Dan ini pertama kali sih kita bisa

58:04mengkustomize

58:06sewo ini.

58:08Masih ada yang pakai ya, Zup.

58:10Masih, kayaknya dulu kita pernah lihat ya

58:12lupa di episode pertanyaan. Versi berapa dia?

58:146 sekarang.

58:166 ya?

58:18Duh!

58:22Cloudflare.

58:24Hehehe.

58:26Harus divalidasi dulu

58:28saya bukan robot.

58:30Oh ini course-nya?

58:32Mana ini-nya?

58:34Oh, ini.

58:36Getting started.

58:38Getting started?

58:40Blah, dia lagi.

58:42Kumpul sesuatu.

58:44I'm human.

58:46Pake itu kali, pakai

58:48VPN, nggak?

58:50Nggak.

58:52Tor network kali?

58:54Nggak.

58:56Udah, lanjut, nggak.

58:58Oke.

59:00Anyway, dulu

59:02yang musuh, bukan musuh ya,

59:04kompetitornya Bootstrap

59:06Sur Foundation

59:08Rep, apa lagi ya?

59:10Nggak ada ya. Cuma 2 itu.

59:122 ya.

59:14Yang pertama kali ya, mungkin habis itu ada.

59:16Apa? Oh iya, banyak. Habis itu banyak.

59:18Tapi

59:20Bootstrap yang paling menguasai ya.

59:22Menguasai pasar ya.

59:24Nah itu ada Clearing Flux sih.

59:26Atas dikit.

59:28Connection type.

59:30Cari sendiri aja.

59:32Clearing Flux

59:34ada di atas dikit deh.

59:36Oh iya.

59:38Soalnya kalau gitu, numpuk terus kan.

59:42Cuma misalnya di Float

59:44misalnya kita nge-set box 2

59:46konten tuh 20%.

59:48Ya udah.

59:50Terus box 3 konten 50%.

59:52Ya udah, numpuk ke kirinya

59:54Float Live juga. Box 4

59:56konten, misalnya

59:58berapa tadi? Sisanya 30%.

1:00:00Ke kiri. Kalo nggak diclear,

1:00:02box 5 kontennya bisa numpuk.

1:00:04Bisa numpuk ke samping gitu, bisa

1:00:06ke kanan. Bisa nggak bisa.

1:00:08Jadi diclear dulu, ini setelah box

1:00:124 diclear.

1:00:14Ada divnya sendiri tuh, div clear both.

1:00:16Atau clear left ya.

1:00:18Dalam hal ini.

1:00:20Harus div left ya.

1:00:22Jadi adanya strip div malah.

1:00:24Jadi nambah-nambahin

1:00:26nambah-nambahin div yang

1:00:28tidak dibutuhkan ya.

1:00:30Yes. Dan kemudian

1:00:34baru apa?

1:00:36Muncul responsif ya.

1:00:38Mobile. Ada dulu

1:00:40kalo nggak salah.

1:00:42Kalo nggak salah, dulu ada yang

1:00:44memopulerkan namanya

1:00:46Mobile First Web.

1:00:48Jadi kita

1:00:50desain dari mobile dulu

1:00:52baru berkembang ke desktop.

1:00:54Sebelum ya, ini sebelum ya.

1:00:56Bahasanya responsif.

1:00:58Responsif. Kalo responsif

1:01:00sampe sekarang sih kayaknya masih

1:01:02dipakai ya istilah responsif.

1:01:04Istilah responsif itu

1:01:06setelah

1:01:08responsif ini ya.

1:01:10Ya, semenjak

1:01:12iPhone meledak

1:01:14dan Android meledak

1:01:16baru mulai

1:01:18perjalanannya itu kayak

1:01:20Mobile First gitu.

1:01:22Jadi semua paradigma

1:01:24kalo ngedesain itu jangan dari desktop

1:01:26tetapi dari mobile dulu.

1:01:28Dan mempermudah juga kan

1:01:30begitu ada konsep media

1:01:32query, ya itu

1:01:34tadi sih betul kelemahannya.

1:01:36Tanda kutip kelemahan CSS dalam project

1:01:38kan apa? Banyak ruang

1:01:40buat orang improv sembarangan.

1:01:42Jadi misalnya kalo di atas ada query

1:01:44pake min width, terus di bawahnya

1:01:46bikin query lagi max width

1:01:48itu kan pusing kan, tabrak-tabrakan kan

1:01:50style-nya. Jadi kalo

1:01:52dengan filosofi mobile first, semua

1:01:54querinya min width, ga ada max width.

1:01:56Dari awal itu juga sempat

1:02:00dulu tuh kayak ada juga sempat

1:02:02trending yang

1:02:04mobile first. Jadi meskipun di desktop

1:02:06bikin aja kecil.

1:02:08Kita harus di Indonesia dikecil aja

1:02:10kampilannya gitu.

1:02:12Jadi mau digedein, mau digedein itu segitu ya.

1:02:14Ya, kayaknya containernya

1:02:16segitu, karena misalnya

1:02:18MVP ngejar waktu, keburu waktu.

1:02:20Itu tidak responsif justru sebenernya.

1:02:22Statik.

1:02:24Tapi kan bisa diakses.

1:02:26Bisa, bisa.

1:02:28Justru itu, karena

1:02:30orang baru, ya jadi

1:02:32gimana ya, ada gap

1:02:34di sisi bisnis, orang-orang bisnis

1:02:36yang mungkin pengetahuan teknikal

1:02:38nya kurang gitu ya. Mereka menganggap

1:02:40kalo kita bikin web

1:02:42yang responsif, yang

1:02:44desktop, tablet,

1:02:46mobile, itu bikinnya satu untuk

1:02:48tiga. Kalo kita kerjanya

1:02:50tiga kali lipat sebenernya kan.

1:02:52Jadi kayak di bakat gitu, website-nya

1:02:54kita bikin responsif ya, jadi

1:02:56kita cukup bikin satu website untuk

1:02:58tiga jenis device gitu.

1:03:00Padahal kerjaannya itu bisa tiga kali

1:03:02lipat, bahkan 4 kali lipat gitu, setengah

1:03:04ti, gitu kan. Hampir sama aja kayak kita

1:03:06bikin 2 web

1:03:08yang berbeda. Mungkin sebelum ini,

1:03:10sebelum responsif, sempet ada

1:03:12trend,

1:03:14dimana ada mobile web,

1:03:16ada web buat desktop.

1:03:18Contohnya misalkan.

1:03:20Kalo WAP itu, ya.

1:03:22WAP itu di...

1:03:24Ya,

1:03:26m.something.com gitu kan.

1:03:28Itu yang mobilnya.

1:03:30Yang desktopnya, blablabla.comnya

1:03:32juga, gitu. Nah, itu

1:03:34justru lebih hemat

1:03:36ini ya, lebih mudah, gitu.

1:03:38Dibandingkan harus kalo pake

1:03:40responsif. Mungkin karena dulu

1:03:42saya...

1:03:44sampai sekarang CSS-nya ilmunya

1:03:46kurang, jadi susah, gitu.

1:03:48Mungkin kalo temen-temen yang sedaterbiasa CSS

1:03:50mungkin akan lebih mudah. Mungkin susah banget

1:03:52dulu kalo bikin web yang responsif.

1:03:54Tools-nya juga belum banyak,

1:03:58Mas.

1:04:00Kita sekarang untuk...

1:04:02Sekarang terbentuk banget semenjak post-nya.

1:04:04Video query-nya juga terbatas.

1:04:06Bener-bener.

1:04:08Padahal udah disiapin tuh, oh kita

1:04:12beli aja, itu template dari Bootstrap

1:04:14yang responsif, gitu kan.

1:04:16Oh, dilihat dari

1:04:18showcase-nya bagus, gitu kan. Begitu dicobain,

1:04:20kok jelek ya.

1:04:22Biasanya beli di Time Forest,

1:04:24bener-bener sekali.

1:04:26Dipasang

1:04:28kontennya hancur.

1:04:30Nah, dulu salah satu kerjaan

1:04:32paling awal, pas masih

1:04:34belum jadi full-time dev,

1:04:36masih kayak buat

1:04:38iseng-iseng freelance

1:04:40seri duit, itu ngefixing,

1:04:42ngebener-benerin yang kayak gitu tuh, yang

1:04:44orang beli, dia menjadi. Cuma

1:04:46ininya miring kesini, ininya jatuh,

1:04:48kayak yang dibayar

1:04:505 dolar, 10 dolar, ngebenerin,

1:04:52gitu-gituan, jadi belajar, jadi baca.

1:04:54Terima kasih pembuatin di Time Forest

1:04:56untuk melancarkan jalan

1:04:58karir saya.

1:05:00Oke.

1:05:02Menarik ya. Jadi, responsif

1:05:04webdesign ini,

1:05:06dia muncul salah

1:05:08satunya gara-gara adanya media query.

1:05:10Jadi, si CSS

1:05:12sudah mulai ada

1:05:14kondisi. Kalo kondisinya

1:05:16screen-nya sekian,

1:05:18maka kita bisa

1:05:20necilin hurufnya,

1:05:22atau menyembunyikan

1:05:24elemen-elemen yang

1:05:26nggak dibutuhkan, gitu kan,

1:05:28seperti. Ini udah kayak if ya?

1:05:30Udah kayak if, udah kayak kondisi.

1:05:32Betul, betul.

1:05:34Jadi, udah kayak programming language juga.

1:05:36Sekarang sudah ada container query.

1:05:40Betul. Tapi, akhirnya

1:05:42CSS-nya jadi banyak.

1:05:44Untuk setiap, ya

1:05:46kita kan baru ngomong, ini 3 ya.

1:05:48Desktop, tablet,

1:05:50mobile.

1:05:52Ada juga yang tabletnya Portrait

1:05:54Landscape. Beda lagi kan aspek

1:05:56rasio-nya kan. Apakah kita

1:05:58handle atau nggak, gitu ya. Tapi

1:06:00kalo misalkan temen-temen diminta untuk

1:06:02bikin responsif webdesign, ya

1:06:04rasanya 3,

1:06:06apa ya? Breakpoint.

1:06:08Ya, breakpoint cukup

1:06:10rasanya ya. Cukup, gitu.

1:06:12Sekarang banyak,

1:06:144, 5. Iya, banyak.

1:06:16Banyak banget. Belum ada foldable.

1:06:18Foldable lagi, aduh.

1:06:22Nah, abis itu baru muncul

1:06:24lah. CSS Framework.

1:06:26Nah, ini panjang umur.

1:06:28Iya, ada panjang umur.

1:06:30Nah.

1:06:32Pre-written CSS.

1:06:34Nah, pas itu, maksudnya

1:06:36kalo mungkin yang

1:06:38sekarang kan kita bayangin kayak udah

1:06:40berupa library yang gimana yang canggih

1:06:42banget ya. Kalo ini mah,

1:06:44pas itu cuma bentuknya pre-written

1:06:46CSS. Jadi, kita ada the class

1:06:48name. Tapi, nggak ada yang

1:06:50kayak, kalo misalnya tailwind,

1:06:52sekarang kan kayak udah lebih canggih kan, bisa

1:06:54bisa, apa, generate

1:06:56berdasarkan yang kita pake doang, bisa

1:06:58generate on the fly, pake arbitrary

1:07:00value, misalnya yang dipake square

1:07:02bracket, itu ya.

1:07:04Nah, kalo dulu mah belum secanggih itu

1:07:06beneran cuma, apa?

1:07:08Beneran cuma class name yang

1:07:10bisa dipake aja.

1:07:12Iya, tapi dulu juga itu sudah sangat membantu.

1:07:14Ya, Framework, Framework.

1:07:18Kayak, itu deh pada

1:07:20semua berantakan pada bikin class name-nya

1:07:22sendiri-sendiri.

1:07:24Iya, betul.

1:07:26Tabak-tabrakan.

1:07:28Ya, justru, apa,

1:07:30Bootstrap ini salah satu yang

1:07:32mempelopori itu tadi

1:07:34tablet-tablet tadi.

1:07:36Jadi, berdasarkan class name-class name

1:07:38yang ada di Bootstrap, kita ganti-ganti

1:07:40CSS-nya, warnanya dari merah jadi biru,

1:07:42dari biru jadi kuning,

1:07:44disesuaikan, akhirnya jadi satu

1:07:46tablet-tablet sendiri, orang tinggal download,

1:07:48tinggal download atau beli

1:07:50gitu kan.

1:07:52Terus dicemplungin, udah jadi berubah

1:07:54warna, berubah tampilan, mungkin

1:07:56yang tadinya button-nya kotak,

1:07:58kita mau ganti yang pakai

1:08:00radius, itu juga

1:08:02bisa memanfaatkan

1:08:04apa, kostumisasinya dari Bootstrap

1:08:06foundation dan temen-temen.

1:08:08Dulu ada helper-helper-nya juga buat

1:08:10CSS.

1:08:12Ada source code-nya kan,

1:08:14dulu masih pakai CSS.

1:08:16Yang harus dikompile dulu, baru bisa

1:08:18dipakai kan.

1:08:20Pake Google sama Grunt, atau Grunt.

1:08:22Dan

1:08:24berbarengan dengan munculnya

1:08:26Bootstrap ini,

1:08:28mungkin ada yang

1:08:30nggak tahu juga, Bootstrap ini awalnya

1:08:32muncul dari Twitter.

1:08:34Twitter, Twitter Bootstrap dulu namanya,

1:08:36dibikin in-house Twitter.

1:08:38Untuk produknya

1:08:40mereka sendiri.

1:08:42Akhirnya lepas ya, akhirnya apa,

1:08:44jadiin open source project

1:08:46setelan-setelan.

1:08:48Terus akhirnya jadilah Bootstrap, awalnya namanya

1:08:50Twitter Bootstrap.

1:08:52Iya, terus abis itu

1:08:54Twitter, nggak ya?

1:08:56Udah, kayaknya udah independent deh.

1:08:58Maksudnya nggak, nggak

1:09:00nggak dibawah Twitter.

1:09:02Iya. Kayaknya

1:09:04kalau nggak salah ya, kalau nggak salah dulu

1:09:06dia open source itu,

1:09:08yang bikin Bootstrap itu kayaknya

1:09:10entah dia masih bekerja untuk Twitter

1:09:12atau dia baru resign atau apa

1:09:14terus dia bikin gitu, mungkin ya, nggak tahu.

1:09:16Detailnya sih nggak tahu.

1:09:18Nah, si Bootstrap dan Foundation

1:09:20sendiri, mereka akhirnya bikin

1:09:22untuk memudahkan kita bikin

1:09:24column grid istilahnya.

1:09:26Selain ada grid system tadi,

1:09:28di Bootstrap sudah disediakan.

1:09:30Ini dia pakai column grid

1:09:34system, nah ini salah satu yang

1:09:36mempopularkan juga kali ya.

1:09:38Grid-grid ini ya.

1:09:40Jadi kalau misalkan kita

1:09:42mau 2 column,

1:09:44ya udah, kita pakai

1:09:46ada

1:09:48Nah, ini dia.

1:09:50Tapi sudah mulai ini ya,

1:09:56sudah mulai

1:09:58kompleks, gara-gara kita harus pakai

1:10:00yang small,

1:10:02ada yang MD, MD.2

1:10:04gitu-gitu kan, untuk

1:10:06reservoir.

1:10:08Karena

1:10:10di saat yang sama, maksudnya, ukuran HP

1:10:12juga kan smartphone, udah bukan cuma

1:10:14iPhone doang kan, udah nambah banyak.

1:10:16HP Android mulai banyak.

1:10:18iPhone juga, apa,

1:10:20besarnya juga udah mulai lain-lain.

1:10:22Tablet juga udah muncul, ada apa,

1:10:24Fablet ya,

1:10:26antara phone sama tablet.

1:10:28Size viewportnya makin-makin-makin

1:10:32jadi ada

1:10:34udah macam-macam breakpoint. Ini bisa

1:10:36dikustomize juga kalau nggak salah,

1:10:38kalau di versi SCSS-nya.

1:10:40Oke, ini contohnya.

1:10:46Jadi panjang begini ya tulisannya ya.

1:10:48Kalau sekarang sih lebih panjang ya, kalau pakai Tailwind ya.

1:10:50Tapi gini aja udah

1:10:52pusing ya.

1:10:54Nah, ini yang tadi kita bahas kan, harus

1:10:56diwrap sama satu div sendiri,

1:10:58parent div class row.

1:11:00Ngebatesin. Terus, itu tuh

1:11:02clearfixnya

1:11:04tadi, apa, untuk

1:11:06memastikan float-nya nggak

1:11:08kesamping tapi jatuh ke bawah.

1:11:10Ini harus ada div sendiri

1:11:12yang isinya kosong, untuk

1:11:14supaya dia ini nggak ke kanan.

1:11:16Nggak nempel kesini ya.

1:11:18Jadi dia ke bawah.

1:11:20Jadi ini kayak, apa ya,

1:11:22kayak break ya,

1:11:24BR gitu ya.

1:11:26Jadi misalnya kalau sampingnya isinya panjang banget,

1:11:28kan by default, float akan naikkan

1:11:30ke atasnya mengisi tempat yang kosong.

1:11:32Nah, ini memastikan nggak

1:11:34terjadi kayak gitu ya.

1:11:36Mastikan jatuh ke bawah.

1:11:38Nah, setelah kolom-kolom

1:11:40ini baru muncul Flexbox.

1:11:42Akhirnya.

1:11:44Akhirnya.

1:11:46Flexbox muncul.

1:11:48Flexbox ini adalah, ini ya,

1:11:50one dimensional.

1:11:52Ya, satu dimensi.

1:11:54Dalam bentuk

1:11:56row dan column.

1:11:58Atau column, pilih salah satu.

1:12:00Iya.

1:12:02Jadi

1:12:04ditujuannya adalah untuk

1:12:06menyelesaikan masalah

1:12:08positioning dan float.

1:12:10Mulainya dari 2009,

1:12:14working draftnya

1:12:16baru dipublish di 2013.

1:12:18Masuk browser tuh

1:12:20tahun berapa ya?

1:12:22Ini kan working draft

1:12:24publish 2013 kan nggak mungkin langsung

1:12:26semua browser nge-adopsi

1:12:28ke bar, jadi can I use?

1:12:30Holy grail layout apa ini?

1:12:32The problem was

1:12:34so great, it became like trying to

1:12:36find the holy grail.

1:12:38Oh, ini. Kita nggak bisa

1:12:40bikin ini jadi ini kan?

1:12:42Full ke bawah.

1:12:44Yang penting itu sebetulnya

1:12:46harus pakai JavaScript-nya sih

1:12:48dulu, jadi kita ukur kotak kuningnya

1:12:50terus manual

1:12:52link, kasih style height-nya ke

1:12:54kiri kanannya tuh.

1:12:56Betul, karena si flex ini kan dia

1:12:58naturalnya adalah mengikuti content kan.

1:13:00Jadi kontennya segini ya udah

1:13:02segini dia, dia nggak bakal panjang ke bawah.

1:13:04Ya bukan flex doang sih, float

1:13:08juga kayak gitu kan.

1:13:10By default ya

1:13:12ukuran intrinsic itu namanya

1:13:14di CSS, ukuran intrinsic kan

1:13:16kita nggak tahu tuh mau panjangnya ke bawah.

1:13:18Ya, kecuali kita tahu fix-nya

1:13:20berapa gitu panjangnya kan.

1:13:22Kita tahu berapa pixel ya udah,

1:13:24pakai itu, cuma kan karena nggak tahu

1:13:26ngikutin isinya, kan dia nggak tahu.

1:13:28Nah, si element itu nggak tahu

1:13:30bahwa expectasinya karena

1:13:32dia berada dalam sebuah

1:13:34row yang berisi 3 kolom

1:13:36terus harus ngikut

1:13:38tinggi dari

1:13:40parent-nya, si element itu kan

1:13:42nggak ngerti sampai

1:13:44situ, nggak ngerti dia harus ngikutin

1:13:46ukuran parent-nya. Sampai

1:13:48ada flex, nah pas ada flex work

1:13:50bisa diatur biar kayak gitu tuh.

1:13:52Yes, jadi

1:13:54ada direction-nya, kita mau pakai

1:13:56row, bisa reverse juga,

1:13:58mau column,

1:14:00dan lain-lain ya, ini dia

1:14:02sifatnya tadi ya, one-dimensional.

1:14:04Kalau

1:14:08di cek flex-base, ternyata

1:14:102012-2013 udah masuk

1:14:12sebagian browser loh, lumayan juga.

1:14:14Iya, jadi udah ada yang

1:14:16eksperimen mungkin ya.

1:14:18Nah, baru kemudian

1:14:20kalau flex-box itu kan

1:14:24terus dikit, eh

1:14:26kebanyakan yang berada

1:14:28direction flow, eh

1:14:30flow direction.

1:14:32Flex direction.

1:14:34Kalau misalnya

1:14:361, 2, 3, 4, berarti dia

1:14:38ke bawah kan ya?

1:14:40Nggak, something.

1:14:42Kalau udah kecil.

1:14:44Nggak muat.

1:14:46Kebawah kan?

1:14:48Kebawah atau mengecil?

1:14:50Mengecil.

1:14:52Mengecil.

1:14:54Atas ngomong yang

1:14:56flex direction row kan,

1:14:58pokoknya dia cuma bisa satu dimensi,

1:15:00dia cukup pintar buat turun sendiri ke bawah.

1:15:02Oh, oke.

1:15:04Itu satu dimensi maksudnya itu ya?

1:15:06Oke.

1:15:10Nggak lama setelah itu muncul grid.

1:15:12Nah, orang kan suka bingung

1:15:14antara, ini kita baru

1:15:16belajar flex, kita udah bisa bikin

1:15:18apa namanya, layout yang

1:15:20keren-keren, yang lebih sederhana

1:15:22dengan flex,

1:15:24kemudian muncul grid.

1:15:26Bedanya apa?

1:15:30Yang luik, itunya

1:15:32penciptanya CSS sendiri dong.

1:15:34Siapa itu? Hartcon William Lee.

1:15:36Birdboss and Hartcon William Lee.

1:15:38Namanya unik sekali ya.

1:15:40Birdboss itu

1:15:42ada hubungan servernya sama Westboss nggak ya?

1:15:44Yang disetak sih.

1:15:46Nggak kayaknya.

1:15:48Itu namanya Hugo Boss.

1:15:50Ha, Hugo Boss.

1:15:52Eh, nggak boleh.

1:15:54Episode ini disponsori

1:15:56oleh Hugo Boss.

1:15:58Microsoft actually.

1:16:00Nah, yang pertama kali bikin

1:16:02grid layout justru

1:16:04Microsoft di IA-10.

1:16:06IA-10, coba bayangkan.

1:16:10Kalian...

1:16:12dihina-hina ya.

1:16:14Ternyata ya.

1:16:16Yang pertama kali

1:16:18punya konsep.

1:16:20Jadi mereka langsung ya, implementasi

1:16:24langsung, nggak pakai

1:16:26consortium-consortium apa-apa gitu.

1:16:28Iya, kan dulu suka-suka, itu

1:16:30masih agak-agak. Dan paketnya pakai

1:16:32vendor prefix juga. Jadi mereka mikir,

1:16:34"Ah, kodama tuh nggak pengaruh ke

1:16:36browser lain." Jadi

1:16:38pakai MS-

1:16:40display grid atau

1:16:42apa lah. Tapi maksud saya, justru

1:16:44menginspirasi itu, menginspirasi

1:16:46para web

1:16:48developer dan designer.

1:16:50Wah, ini experimental

1:16:52layout lab.

1:16:54Bisa miring-miring begini ya.

1:16:56Pakai grid.

1:16:58Nggak aksesibel ini.

1:17:00Iya, ya kan cuma buat contoh doang.

1:17:02Nah, kalau tadi

1:17:06si Flexbox itu one-dimensional,

1:17:08kalau CSS Grid itu two-dimensional.

1:17:10Jadi bisa menghandle

1:17:14column dan row.

1:17:16Column dan row ya, udah sesuai apa ya,

1:17:18kayak sesuai

1:17:20konsepnya grid yang

1:17:22di... apa ya,

1:17:24print dan print graphic design.

1:17:26Ya, grid kan

1:17:28normal ini ada di tersamping, maksanya

1:17:30column, ada row.

1:17:32Kalau sebelum-sebelumnya, ketahuan-ketahuan kan

1:17:34pasti mau bisa satu-satu,

1:17:36mau bisa saling-salu aja, atau sulit

1:17:38lah. Maksudnya nggak

1:17:40sulit di-custom,

1:17:42column dan row sekaligus.

1:17:44Kalau grid is, column container

1:17:46nya bisa mengatur column

1:17:48dengan cara yang

1:17:50lebih flexible.

1:17:52Ya, kalau perbedaan-perbedaan,

1:17:54perbedaan utamanya itu sih.

1:17:56Itu gua utamanya.

1:17:58Pekan putus-putus ya?

1:18:02Wah,

1:18:04gilanya...

1:18:06sudah bisa,

1:18:08sudah kedengeran, tapi

1:18:10gambarnya ngefreeze.

1:18:12Ya.

1:18:14Beberapa

1:18:16property CSS yang

1:18:18bisa digunakan untuk grid, tentunya

1:18:20display grid dulu, di-set dulu, dipastikan

1:18:22bahwa container atau div

1:18:24atau apapun itu adalah grid,

1:18:26kemudian kita bisa pakai grid template

1:18:28column dan grid template rows.

1:18:32Contohnya ada nggak di sini?

1:18:34Nah ini ya.

1:18:36Jadi kita pakai template

1:18:38grid template column atau grid template

1:18:40row, itu kalau

1:18:42kita menentukan secara

1:18:44spesifik, misalnya kita

1:18:46ingin lebarnya berapa, kalau misalnya

1:18:48kita pakai grid template column

1:18:50atau grid template row,

1:18:52pilihannya men-speksifikasikan

1:18:54satu persatu lebarnya

1:18:56berapa atau tingginya berapa,

1:18:58atau bisa

1:19:00gitu itu.

1:19:02Iya.

1:19:04Ini teman-teman bisa

1:19:06lihat-lihat sendiri ya.

1:19:08Bisa baca sendiri, lebih dalam.

1:19:10Contoh-contohnya cukup

1:19:12comprehensive di sini, jadi bisa dicoba-coba

1:19:14untuk

1:19:16berbagai properties-nya.

1:19:18Ada contoh, oh ada animation lagi ya.

1:19:20Learning CSS Grid.

1:19:22Ini banyak ya.

1:19:24Banyak sekali ini, lengkap.

1:19:26Pasti overwhelming sih.

1:19:28Banyak sekali.

1:19:30Cuma ya

1:19:32kalau penasaran di

1:19:34tumpuk-tumpuk satu.

1:19:36Oh ada ini lagi, satu-nya grid garden.

1:19:38CSS Grid Garden.

1:19:40Oh ini kayak frog ya?

1:19:42Iya itu temennya.

1:19:44Flexbox frog.

1:19:46Itu kan ada link-nya dulu.

1:19:48Iya.

1:19:50Dulu ada yang terkenal ya.

1:19:52Flexbox frog.

1:19:54Flexbox.

1:19:56Kita belajar flexbox dengan

1:19:58mengatur kodok-kodok.

1:20:00Dengan mengatur kodok-kodok kan.

1:20:02Habis itu

1:20:04itu saudaranya temennya.

1:20:06Saudaranya temennya membuat

1:20:08CSS Grid Garden ya.

1:20:10Yang bikin satu orang mungkin ya, kelihatannya.

1:20:12Mau belajar ya? Mau belajar ini?

1:20:14Beneran? Water.

1:20:16Ini water kan. Water mau disuruh

1:20:18dipindah kesini kan.

1:20:20Gimana caranya? Ya silahkan.

1:20:22Iya.

1:20:24Coba sendiri.

1:20:26Atau yang praktikal, misalnya Tailwind kan

1:20:28udah ada, kalo yang udah pake Tailwind

1:20:30kan ada utility-nya buat grid.

1:20:32Dia liat aja contohnya kayak gimana.

1:20:34Bandingin aja, oh,

1:20:36kalau kodanya gini, coba buka di DevTools.

1:20:38Kan muncul tuh CSS-nya.

1:20:40Oh ternyata CSS-nya gini.

1:20:42Hmm.

1:20:44Itu contoh yang praktikal ya, bisa langsung diliat.

1:20:46Ya.

1:20:48Dan DevTools juga, apa?

1:20:50Itunya, tools-nya udah oke banget sih.

1:20:52Buat Flexbox sama grid.

1:20:54Ya.

1:20:56Nah tadi, apa,

1:20:58menjawab pertanyaan, kapan

1:21:00perlu, kapan kita menggunakan grid,

1:21:02kapan kita menggunakan

1:21:04Flexbox.

1:21:06Itu tadi ya, perbedaannya yang satu

1:21:08one-dimensional, yang satu lagi

1:21:10multi-dimensional,

1:21:12dua dimensi, bisa kolom dan row.

1:21:14Kalau Flexbox hanya satu

1:21:16kolom atau satu row aja kan.

1:21:18Ini kan.

1:21:20Hmm.

1:21:22Contohnya di sini,

1:21:24dia kasih contoh juga ya, ini ya.

1:21:26Wrapper, one, two, three, four, five.

1:21:28CSS-nya adalah

1:21:30Flex, dia akan jadi

1:21:32one, two, three, four, five.

1:21:34Kebawah.

1:21:36Bisa kalau pakai FlexWrap.

1:21:38Tapi by default nggak?

1:21:40Kalau by default nggak ya, kalau nggak pakai ini ya.

1:21:42Hmm.

1:21:44Ini, oh, ini

1:21:46bisa diliat dari sini juga ya, oke.

1:21:48In the image, you can see two items

1:21:50have wrapped onto new line, this item

1:21:52are sharing available space, not lining up

1:21:54underneath the item above. This is because

1:21:56when you wrap, Flex item is new row

1:21:58or column, when working with column

1:22:00is independent Flex line

1:22:02in the Flex container.

1:22:04Hmm.

1:22:06Same layout with CSS grid.

1:22:08Jadi ini masih sama, one, two, three, four, five.

1:22:10Kita menggunakan grid, grid template-nya

1:22:12repeat tiga.

1:22:14Satu FR ini, satu

1:22:16FR itu panjangan apa?

1:22:18Free, free space.

1:22:20Free space atau fraction?

1:22:22Friction mungkin ya. Friction.

1:22:24Friction apa fraction? Artinya apa?

1:22:26Friction pecahan.

1:22:28Masuk apa sih fraction?

1:22:30Iya, jadi dia minta

1:22:32ini supaya jadi

1:22:34maksimum tiga ya.

1:22:36Macam ini.

1:22:38Ulang tiga kali.

1:22:40Ulang tiga kali.

1:22:42Apa?

1:22:44Dua fraction, satu. Seperti tiga lah ya.

1:22:46Loh mana?

1:22:48Kok beda?

1:22:50Ini ya.

1:22:52Gak pakai grid dia.

1:22:54Hah?

1:22:56Itu pakai grid?

1:22:58Enggak, yang disini auto-play.

1:23:00Mana gridnya?

1:23:02Di bawah.

1:23:04Oh, wrapper. Oh iya. Sorry.

1:23:06Mana gridnya?

1:23:08Nih, kalau saya bikin dua gimana?

1:23:10Jadi dua.

1:23:12Coba scroll ke bawah.

1:23:14Nah, jadi dua kolom kan.

1:23:16Kalau satu dia jadi kolom aja.

1:23:18Satu kolom.

1:23:20Tapi dia gak otomatis

1:23:22yang paling bawah itu kan

1:23:24pas lagi tiga kolom

1:23:26isinya cuma lima.

1:23:28Yang kelima itu gak otomatis

1:23:30ngisi tempat yang tersisa ya.

1:23:32Satu fraction.

1:23:34Kalau saya bikin dua fraction

1:23:36jadi gimana?

1:23:38Sama aja sih.

1:23:40Ini apa?

1:23:42Kecuali gini, coba grid template

1:23:46kolomnya, gak pakai repeat

1:23:48tapi gini misalnya, dua fraction

1:23:50satu fraction, coba.

1:23:52Dua FR.

1:23:54Spasi.

1:23:56Dua FR. Oh iya boleh.

1:23:58Oh dua.

1:24:00Ya bebas.

1:24:02Jadi ini dua, ini dua, ini satu ya?

1:24:04Dua, dua, satu.

1:24:06Ini satuan ya, kalau misalkan kita mau

1:24:08kayak gini juga boleh kan.

1:24:10Sama aja jadinya kan.

1:24:12Percentage ya, seperti percent ya.

1:24:14Jadi ini diatur

1:24:16untuk kolomnya,

1:24:18kolom pertama dua,

1:24:20dua lah ya, jangan dua puluh ya.

1:24:22Dua, totalnya berarti

1:24:24lima gitu kan.

1:24:26Nanti kita bisa atur juga

1:24:28untuk baris,

1:24:30untuk row gitu.

1:24:32Bisa tambah ini juga.

1:24:34Karena grid itu kan bisa ada

1:24:36marginnya, apa namanya?

1:24:38Gap.

1:24:40Gap, gap, gap, grid gap.

1:24:42Flex maupun

1:24:44grid, sama-sama bisa pakai gap

1:24:46sekarang. Udah ya, ada di semua

1:24:48roder. Gap aja, gap.

1:24:50Udah gak ada flex gap,

1:24:52grid gap lagi. Tapi ada

1:24:54row gap sama kolom gap. Oh iya, bisa.

1:24:56Nah, kalau itu

1:24:58khusus grid, karena grid kan

1:25:00dua akses ya.

1:25:02Jadi bisa spesify row gap

1:25:04sama kolom gap.

1:25:06Ini satuannya apa, 20 piksel?

1:25:08Ya, berapa sepiksel, rem?

1:25:10Oh, rem, oh iya.

1:25:12Dua rem, oh,

1:25:14gede banget.

1:25:16Nah, sekarang

1:25:20bedain row gap sama

1:25:22kolom gap.

1:25:24Row?

1:25:26Row gap.

1:25:28Ini, grid row gap ya?

1:25:30Gak, row gap aja.

1:25:32Bisa, sudah bisa dipakai dua-dua.

1:25:34Oh, sudah bisa dua-duanya.

1:25:36Iya.

1:25:38Kalau flex ya, gak bisa row gap, grid gap, kan

1:25:40flex cuma satu dimension.

1:25:42Kolom?

1:25:46Kolom gap, coba yang besar.

1:25:48Ini dua-duanya sama ya, berarti ya?

1:25:50Sama.

1:25:52Kolom piksel.

1:25:54Mau bikin 200 piksel?

1:25:58Aduh.

1:26:02500.

1:26:04Kepotong ke bawah, oh,

1:26:08kegeser ya, kegeser.

1:26:10Wah, di luar kotak.

1:26:12Kasian banget.

1:26:14Dia di luar kotak finalty.

1:26:16Jadi kayak itu, memes

1:26:20CSS modules.

1:26:22Keluar kotak.

1:26:24Itu kan running joke

1:26:26nya komunitas CSS deh.

1:26:28CSS is awesome, itu lo yang sering

1:26:30di swipe.

1:26:32Text safe luar kotak.

1:26:34Oke.

1:26:36Terus kita mau bahas apa lagi?

1:26:40Ada yang perlu dibahas lagi?

1:26:42Oh, ini ada

1:26:44flexbox zombie. Ini buat apa nih?

1:26:46Game juga ya, permainan juga ya?

1:26:48Game juga? Iya, sama.

1:26:50Buat belajar CSS.

1:26:52Yes.

1:26:54Wah, lucu-lucu sekarang ya.

1:26:58Mau berbicara juga.

1:27:00Ini mantep. Itu belajar.

1:27:02Apa tuh?

1:27:04Yang habis dari ini, kok mau belajar itu?

1:27:06Oh, mantap.

1:27:08Nah, kalau yang si zombie

1:27:10yang bikin itu, tau gak sih?

1:27:14Yang buat belajar PWA

1:27:16Service Worker.

1:27:20Service Worker.

1:27:22Ada game, pokoknya tentang Warrior gitu deh.

1:27:24Oh, iya, iya, iya. Tau.

1:27:26Tau kan? Tau kan? Coba lupa namanya.

1:27:28Yang bikin di Google.

1:27:30Ini?

1:27:32Oh.

1:27:34Devgedes.

1:27:36Tapi bayar?

1:27:40Kok ada 179?

1:27:42Iya, namanya

1:27:44Rahasa Market.

1:27:46Ini harusnya harganya segini,

1:27:48tapi saya kasih gratis.

1:27:50Luar biasa. Apa?

1:27:52Minggu depan harga naik.

1:27:54Ya, minggu depan. Hari Senin.

1:27:56Oh, hari Senin harganya naik.

1:27:58Ada lagi tuh, satu lagi tuh

1:28:00GridCreators.com

1:28:02GridCreators.com

1:28:04Ya.

1:28:06GridCreators.

1:28:08Oh, modelnya mirip-mirip ya.

1:28:10Game-game juga ya.

1:28:12Kalau yang

1:28:14serius,

1:28:16itu pengen yang serius,

1:28:18course-nya WazeBoss.

1:28:20Yang CSS GridBlock.io.

1:28:22Oh iya.

1:28:24Itu menarik.

1:28:26Keri kan?

1:28:28Keri.

1:28:30Oh iya, punya Pak Sandika juga bagus.

1:28:32Gratis.

1:28:36Yang punya Pak Sandika di YouTube.

1:28:38Saya belajarnya dari video ini.

1:28:40Video Grid.

1:28:42Tapi,

1:28:48yang menariknya,

1:28:50nggak tahu alasannya kenapa,

1:28:52React Native

1:28:54masih pakai Flex.

1:28:56Untuk layout.

1:28:58Ya, nggak masalah memang.

1:29:00Maksudnya, dia by default,

1:29:02React Native itu kan

1:29:04kalau untuk CSS-nya kan,

1:29:06ini ya, apa,

1:29:08ada yang bisa, ada yang nggak lah ya,

1:29:10kan beda platform kan.

1:29:12Jadi mereka...

1:29:14Eh, React Native itu dibuild kan?

1:29:16Kalau dibuild, dia jadi apa?

1:29:18Jadi JavaScript sama CSS juga?

1:29:20Enggak.

1:29:22Dia jadi native.

1:29:24Jadi dia

1:29:26pakai apa ya namanya ya?

1:29:28React Native itu.

1:29:30Ada semacam polyfilm gitu.

1:29:32Ada semacam transpiler

1:29:34gitu.

1:29:36Ada library namanya apa gitu.

1:29:38Dia pakainya,

1:29:40konsepnya pakai itu.

1:29:42Flex. Sementara kan kalau di mobile,

1:29:44baik iOS atau OpenArea kan nggak pakai

1:29:46flex atau grid

1:29:48atau apa kan.

1:29:50Jadi mereka memanfaatkan

1:29:52Flexbox untuk templatingnya.

1:29:54Eh, untuk, sorry, untuk

1:29:56layoutingnya.

1:29:58Tapi berarti itu kan kayak

1:30:00konsepnya doang kan, sebetulnya.

1:30:02Harus di-translate. Entah apapun itu

1:30:04yang di mengerti oleh si

1:30:06engine native-nya itu kan.

1:30:08Betul.

1:30:10Nah, kalau teman-teman mau...

1:30:12Kita episode React Native apa ya?

1:30:14Invite orang yang ngerti.

1:30:16Gue nggak ngerti sama sekali gitu.

1:30:18Nanti,

1:30:20apa, GDI Flutter

1:30:22nanti minta gabung lagi.

1:30:24Minta.

1:30:26Versus lah, versus.

1:30:28Kira belum pernah belajarkan fast kan ya?

1:30:30Belum.

1:30:32Nah, kalau teman-teman tertarik

1:30:34mau belajar grid tapi yang

1:30:36praktikal, ini ada video

1:30:38yang luar biasa bagus nih dari

1:30:40yang kita omongin minggu lalu. Mas Yohan.

1:30:42Nah, jadi

1:30:44di video ini

1:30:46kita belajar bikin

1:30:48layout-nya Twitter dengan menggunakan

1:30:50grid.

1:30:52Ini menarik banget.

1:30:54Eh, ada komen gue.

1:30:56Gak, ada

1:30:58komen.

1:31:00Oh, kamu nonton? Oh iya, ini dia.

1:31:02Ada spasinya kayaknya. Satu rem.

1:31:04Gak inget komen apa.

1:31:08Bahkan nggak inget sama video itu sih.

1:31:10Ada flex juga ya, belajar flex juga ya.

1:31:12Kalau ini course,

1:31:14online course, kalau tadi

1:31:16video Pak Sandika Gali,

1:31:18itu bentuknya playlist YouTube ya.

1:31:20Oke.

1:31:22Ada lagi mau dibahas?

1:31:28Eh, tadi ada yang nanya.

1:31:30Oh iya, apa tuh?

1:31:32Apa tuh yang di-start tadi?

1:31:34Oh, yang di-start. Iya, iya, iya.

1:31:36Ini framework buat CSR.

1:31:38Kalo CSR,

1:31:40kalo CSR sebetulnya nggak perlu

1:31:42amat pake, eh,

1:31:44iya kan, bukan framework.

1:31:46Oh, framework ya.

1:31:48Kan, kalau dulu kan

1:31:50Create Track App.

1:31:52Itu starter juga.

1:31:54Iya, bukan framework sih ya.

1:31:56Bukan framework ya. Kalau framework

1:31:58udah pasti Next.js kan. Udah gitu kan

1:32:00semenjak

1:32:02apa,

1:32:04beberapa bulan yang lalu, Create Track App

1:32:06sudah tidak di-feature lagi,

1:32:08di-dokumentasinya React.

1:32:10Bahkan nggak recommended gitu. Cuma, ya udah,

1:32:12kalo pengen create yang simple

1:32:14Single Page App, ya udah,

1:32:16create sama feed aja.

1:32:18Itu udah cukup. Tapi kan, ini balik lagi,

1:32:20kita pengen pake framework

1:32:22buat apa sih? Misalnya buat SEO.

1:32:24Misalnya ada yang harus,

1:32:26eh, apa sih, SR ya.

1:32:28Ya,

1:32:30SEO kan di shellnya, shell HTML-nya

1:32:32bisa kita... Kalo mau bikin itu dashboard,

1:32:34bikin internal tools

1:32:36yang nggak butuh SEO.

1:32:38Itu

1:32:40mungkin feature framework

1:32:42routing ya.

1:32:44JQuery plus

1:32:46Backbone. JQuery sih.

1:32:48Nggak, dia nanyanya itu kan, React

1:32:50CSR. React framework.

1:32:52Oh, CS, React ya. Terus ya.

1:32:54Client side rendering. Ya.

1:32:56Pertanyaannya adalah React CSR, sebetulnya

1:32:58ya, kalo nggak ada keperluan

1:33:00tertentu banget, ya itu feed sama

1:33:02React aja udah cukup.

1:33:04Kalo buat

1:33:06routing, pake React

1:33:08Router lah. Eh, apa tuh yang dibikin?

1:33:10Ya, React Router. Benar, React Router.

1:33:12Router kan betul namanya, React Router.

1:33:14Kalo cuma

1:33:16untuk routing, ya itu React,

1:33:18React Router, feed.

1:33:20Udah, kan CSR ya.

1:33:22Pure CSR.

1:33:24Nah, kalo mau yang lebih...

1:33:26Kalo langsung ke Next.js, kayaknya

1:33:28terlalu overwhelmed deh, ya.

1:33:30Tapi kebutuhannya juga emang cuma CSR.

1:33:32Kebutuhannya nggak banyak macam-macam.

1:33:34Kalo cuma buat apa?

1:33:36Buat routing doang, di React

1:33:38ada, gitu. Jadi nggak usah langsung

1:33:40buruk-buruk ke Next.js juga, gitu kan.

1:33:42Karena konsepnya juga banyak hal-hal

1:33:44yang berbeda, yang

1:33:46mungkin kalo kita baru belajar React,

1:33:48bingung kan. Oh, ini kok

1:33:50pake folder, terus foldernya harus

1:33:52pake kurung siku, gitu-gitu kan, bingung ya.

1:33:54Kalo kita baru belajar React, emang-emang

1:33:56cocoknya CSR sih.

1:33:58Biasanya sih, pake VT yang paling

1:34:00sederhana, ya.

1:34:02- Saya... - Terus?

1:34:04Bicara bikin aplikasi

1:34:06offline

1:34:08pake web,

1:34:10elektron, dan

1:34:12jaman itu belum ada React

1:34:14ya kan, pakenya jQuery

1:34:16dan Breakable.

1:34:18Sudah reaktif, loh.

1:34:20Reaktif, maksudnya

1:34:22kalo diklik apa,

1:34:24datanya ke update,

1:34:26gitu, terus ada search-nya,

1:34:28dan single-base

1:34:30application.

1:34:32Karena jalannya di ini,

1:34:34kan. Jalannya di elektron.

1:34:36- Tenstack ini apa, nih?

1:34:38-

1:34:40Itu tuh state management,

1:34:42cuman kayak wow banget lah,

1:34:44powerful banget. Jadi maksudnya, ya,

1:34:46keliatannya buat simple routing

1:34:48juga bisa deh, integrasi

1:34:50routing-nya exactly gimana, gatau sih, cuman

1:34:52itu bisa jadi alternatif juga,

1:34:54jadi ga usah pake framework yang kayak

1:34:56Next.js React.

1:34:58Ini kalo ngomongin React.csr,

1:35:00bisa pake library itu.

1:35:02Itu bukan framework juga sih.

1:35:04- Ya.

1:35:06Ini ya contohnya, ya.

1:35:08Silahkan diliat-liat sendiri, ya.

1:35:10Kayaknya menarik, ya.

1:35:12Ini Bayu mengembari

1:35:14Ionic. Kita bisa bahas multi-platform, ya.

1:35:16Ionic,

1:35:18React Native, Flutter.

1:35:22Tapi yang menarik, mungkin kita akan bahas

1:35:24di... - Ionic itu dulu

1:35:26pernah hampir pake, cuman beneran lupa

1:35:28kenapa deh. Kayaknya jaman masih ada

1:35:30Opera Mini.

1:35:32Pas belum bisa pake.

1:35:34Ada yang dari Vue.js apa namanya?

1:35:40Ada itu juga, kan?

1:35:42Dari Vue.js yang

1:35:44multi-platform juga.

1:35:46Lupa namanya.

1:35:50Nah,

1:35:52kapan-kapan kita bahas

1:35:54multi-platform.

1:35:56Oh, oke. Ionic itu

1:35:58bukan mobile, ya.

1:36:00Bukan hybrid, ya.

1:36:02Web Component.

1:36:04PWA, ya.

1:36:06Ya, pokoknya web lah.

1:36:08Bisa di-compile jadi, ya, JavaScript biasa.

1:36:10Lupa-lupa inget sih.

1:36:12Ya, ya, ya.

1:36:14Yang bawalnya Vue.js apa ya namanya ya?

1:36:16Buat ke mobile

1:36:18gitu. Ada gak ya?

1:36:20Vue Native.

1:36:24Gak kreatif gitu, pasti namanya.

1:36:26Ada Vue Native beneran?

1:36:28Ada, ada, ada.

1:36:30Jangan bilang ada soal framework.

1:36:32Kwasar, Kwasar.

1:36:34Kwasar Framework.

1:36:36Kwasar Framework.

1:36:40Nah, ini bisa kita

1:36:42bahas, nih. Untuk...

1:36:44Kapasitor. Kapasitor, ya.

1:36:46Kapasitor apa Kwasar?

1:36:48Nih.

1:36:50Oh, ya, ya, ya.

1:37:14Itu beneran hampir

1:37:16pernah pake gara-gara itu deh.

1:37:18Oke, oke. Menarik, menarik.

1:37:20Ini juga ada kapasitor, ada

1:37:22macem-macem ya. Ada lumayan banyak yang

1:37:24gini ya.

1:37:26Kayaknya kalau untuk dokumentasi,

1:37:28banyak pake template

1:37:30begini dari mana ya?

1:37:32Template? Bentuknya kayak gini?

1:37:34Iya, Ionic Framework juga begini

1:37:36template-nya. Bukan saja.

1:37:38Mungkin Native Starter buat dokumentasi.

1:37:40Iya. Atau jadinya Dempores,

1:37:42oh, ini bawa, oh, ini open source.

1:37:44Karena dia masih

1:37:46Ionic juga.

1:37:48Kapasitor masih dibawa Ionic.

1:37:50Ini kayaknya DocuSaurus deh.

1:37:52Coba ya.

1:37:54Oh, iya. Kayak

1:37:56Penclap-penclap.

1:37:58Kayaknya DocuSaurus deh.

1:38:00Oh, kan? Bener kan?

1:38:02Iya, betul. DocuSaurus.

1:38:04Nah, sama tuh.

1:38:06Ada sidebar-nya? Oh, iya. Ada sidebar-nya.

1:38:08Ada. Sama. Buka DocuSaurus.

1:38:10Buka Docs.

1:38:12MacuSaurus, buka Docs. Iya, coba.

1:38:14Get Started. Oh, kan?

1:38:16Oh, iya. Ketemu, ketemu.

1:38:18Hacker.

1:38:20Mystery Show.

1:38:22Oke.

1:38:24Anyway, kita udah ngelantar ke mana-mana

1:38:26sebelum lebih ngelantar lagi.

1:38:28Tapi itu layout. Masih ada layout-nya

1:38:30DocuSaurus template.

1:38:32Iya deh. Baiklah.

1:38:36Itu juga menarik.

1:38:38Itu 2 topik menarik yang

1:38:40bisa kita dapat malam hari.

1:38:42Di akhir episode ini.

1:38:44Yang pertama adalah hybrid,

1:38:46ionic, dan temen-temennya.

1:38:48Kemudian yang kedua adalah

1:38:50tools untuk membuat dokumentasi.

1:38:52Banyak, kan?

1:38:54Oh, iya. Tools untuk

1:38:56bikin dokumentasi.

1:38:58Oke. Jadi, lumayan.

1:39:00Terima kasih banyak buat inspirasinya

1:39:02untuk episode kali ini. Kita udahan dulu.

1:39:04Kita jumpa lagi minggu depan

1:39:06di Selasa malam jam 8 malam.

1:39:08Yang belum subscribe, silahkan

1:39:10subscribe. Yang mau

1:39:12bertanya, atau

1:39:14mau kasih topik, atau mau

1:39:16kasih nodong narasumber,

1:39:18silahkan ke sana.

1:39:20kesana.in/ngobroinline

1:39:22kesana.in

1:39:24kesana.in/ngobroinline

1:39:26Oke. Sekian dulu. Terima kasih banyak.

1:39:28Sampai jumpa

1:39:30minggu depan

1:39:32di hari Selasa jam 8 malam.

1:39:34Bye-bye.