Ngobrolin CSS Layout
Ringkasan Episode
Bantu KoreksiEpisode ini berangkat dari pengakuan yang jujur: banyak developer web merasa takut atau jengkel pada CSS, dan salah satu dari mereka mengakuinya untuk dirinya sendiri. Alasannya menarik — ia merasa tidak pernah benar-benar memegang dasarnya. Kalau menulis JavaScript ia paham kenapa sesuatu bekerja begitu, sementara di CSS ia cenderung mengikuti saja gaya yang sudah dipasang orang lain di awal proyek. Dari situ muncul diagnosis yang lebih adil: masalahnya tidak murni pada bahasanya, melainkan pada betapa luasnya ruang bagi orang untuk menyimpang. Satu tim bisa sudah sepakat memakai Bootstrap 5, tetap saja ada yang menulis gayanya sendiri; variabel yang sudah disiapkan diabaikan, satuan yang sudah distandarkan tetap ditulis manual, dan penyimpangan diselesaikan dengan akal-akalan seperti margin negatif. Sisanya menelusuri sejarah tata letak sampai ke CSS Grid dan Flexbox. Mula-mula tidak ada pengaturan sama sekali, karena web dirancang untuk dokumen yang saling terkait, bukan aplikasi; orang mengakalinya dengan image transparan sebagai spacer, deretan NBSP, lalu tabel dan display table yang jelas disalahgunakan karena tidak ada pilihan lain, sebelum float jadi tumpuan. Tempat menulis gaya pun berpindah berulang kali — dari atribut di dalam markup, ke satu blok gaya, ke berkas tersendiri, dan kini kembali ke markup lewat Tailwind. Ada catatan menarik bahwa React Native sampai sekarang masih bertumpu pada Flex untuk layout-nya, dan prinsip penutupnya: kalau bisa di CSS, kerjakan di CSS.
Poin-poin Utama
- •Rasa takut pada CSS sering berakar pada tidak pernah memegang dasarnya — hanya mengikuti gaya yang dipasang orang lain di awal proyek tanpa tahu alasannya
- •Masalahnya bukan murni pada bahasanya melainkan pada luasnya ruang untuk menyimpang: sudah sepakat pakai Bootstrap 5 pun, tetap ada yang menulis gayanya sendiri
- •Gejalanya khas: variabel yang sudah disiapkan diabaikan, satuan yang sudah distandarkan tetap ditulis manual, dan masalah diselesaikan dengan margin negatif
- •Web mula-mula tidak punya pengaturan tata letak sama sekali karena dirancang untuk dokumen yang saling terkait, bukan aplikasi
- •Sebelum Flexbox dan CSS Grid, tata letak diakali dengan image transparan sebagai spacer, deretan NBSP, tabel dan display table, lalu float
- •Tempat menulis gaya berpindah berulang kali: dari atribut di markup, ke satu blok gaya, ke berkas tersendiri — dan kini kembali ke markup lewat Tailwind
- •React Native sampai sekarang masih bertumpu pada Flex untuk layout-nya, dan prinsip penutupnya: kalau bisa di CSS, kerjakan di CSS
Hai, hai, hai. Selamat malam. Halo semuanya. Apa kabar?
Halo, halo. Eka suaranya mana?
Halo.
Oh ada.
Seperti biasa ya, kita bertemu lagi dengan kita bertiga.
Wah.
Wah.
Pas banget.
Pas banget momennya.
Di hari Selasa seperti biasa, Selasa Malam, waktunya kita untuk...
...mobrolin weh.
Gimana kabarnya teman-teman? Mudah-mudahan sehat semua ya.
Yang nonton juga mudah-mudahan sehat.
Yang sudah hadir boleh-boleh ini lah, sapa-sapa dulu kita tuh.
Ada Abdul Malik.
Wah, halo.
Ada Bandung, wah Bandung.
Ivan ini si Bandung ya?
Nanti kita ketemu DevFest.
Iya.
DevFest, Bandung.
Norholid, Norholid, Tangsel.
Belum ada DevFest, Tangsel.
Mas Norholid di Tangsel.
Ada itu, DevFest Jakarta, itu di QB.
DevFest Jakarta.
Iya, Tangsel.
Lagi.
Kemaren juga ya? Bandara Jakarta juga di mana?
Di Tangsel.
Lihat transkrip lengkap (2795 segmen lagi)
Di Tangsel.
Tenggeran Kota ya?
Banten, Banten.
Bandara Sutak.
Ya gitu deh.
Pokoknya nggak di Jakarta.
Ya, Banten.
Eh nggak tahu gimana pokoknya, pokoknya bukan di Jakarta kan?
Iya, awalnya kan Jakarta.
Terus kan udah dipisah jadi...
Kamayoran kan dulu.
...jadi Banten.
Iya, jadi Banten kan.
Dulu banget.
Dulu banget.
Oke, jadi malam hari ini topik kita adalah tentang layout, spesifiknya CSS ya.
Jadi kan kalau analogi gitu ya.
HTML itu kan kalau misalkan kita bikin HTML, dokumen HTML itu biasanya kalau analoginya bikin rumah itu kayak apa ya?
Kayak kerangkanya, fondasinya, lantainya gitu kan.
Terus kalau kita mau nge-cet, mau tambahin interior, exterior dan lain-lain, ya pakenya CSS kan.
Mau diatur bentuknya kayak gimana juga mungkin bisa dibilang CSS lah ya.
Kita bisa aja punya div, ada 10 gitu kan.
Terus tiba-tiba kita mau bikin bentuknya kayak spreadsheet gitu, bisa.
Kita mau turun ke bawah, bisa.
Pokoknya itu nggak berpengaruh ke...
Zigzag bisa, kiri kanan.
Zigzag bisa, semuanya bisa.
Kalau JavaScript ya buat.
Biasanya kalau interactivity, JavaScript.
Iya, kalau JavaScript interactivity, pintunya udah ada tapi belum berfungsi.
Nah, difungsikan sama JavaScript, bisa buka, bisa tutup.
Kalau mencetel, ini...
Iya, itu JavaScript.
Oh nggak juga ya?
Oh iya, udah bisa ya.
Udah bisa animasi, udah bisa transisi.
Jadi kayak bahasa komograman ya.
Bisa variable, bisa program, bisa apa?
Bisa kondisi.
Dropdown tanpa JavaScript juga bisa.
Kayak itu menu dropdown, tau nggak?
Tanpa JavaScript juga bisa.
Kalau dulu harus jQuery, jQuery plugin ya.
Sekarang kita bisa.
Bisa hidden, kalau di-click.
Kalau di-click, kan checkbox-nya aktif.
Nanti kita bisa check type properties, checkbox checknya.
Terus bisa dibikin display, non-display.
Scroll animation juga bisa sekarang.
Udah usah pakai JavaScript kan.
Kan biasanya ada tuh yang kayak bar, ada warnanya.
Kita makin scroll, makin ke bawah.
Barunya warnanya berubah.
Nah, itu udah bisa CSS-only juga.
Jadi lebih baik.
Kalau bisa di-CSS kan, CSS-kan saja daripada pake JavaScript.
Nah, cuma biasanya CSS ini buat web developer apapun,
selain yang orang front-end,
ya biasanya web developer tuh pada takut sama CSS deh.
Pada entah sebel, atau trauma, atau takut.
Itu stereotype yang benar atau nggak sih?
Bisa sih.
Kalau saya, iya.
Nah, kamera aja kenapa masih bisa.
Lagi control-end, jadi ya nggak terasa.
Lagi mati.
Sebentar ya.
Lanjut aja, lanjut.
Itu ada benarnya.
Ada benarnya.
Yang berkaca dari saya sendiri.
Saya itu apa ya?
Kurang...
Kurang tertarik.
Dan kurang bisa...
Bukan.
Kurang bisa CSS, karena kurang tertarik untuk mendalaminya.
Nah, itu kan.
Karena serba memingungkan bagi saya.
Apa yang membuat bingung?
Contohnya nanti kita bahas.
Entah untuk layout.
Kalau mau bikin boxes itu,
Mau pake grid atau mau pake flags.
Mau pake table, juga bisa.
Maksudnya, display table ya.
Display table ada juga kan?
Nah, itu banyak banget property-nya yang harus dihafalin.
Dan...
Konsep...
Atau...
Konsep-konsepnya juga.
Misalnya contohnya ada utility first.
Kayak si Tewin.
Atau...
Booster utility first juga nggak sih?
Booster...
Ya, utility.
Bukan utility sih.
Kalau utility kan hanya...
Satu...
Oh itu atomic ya?
Yang satu property, satu class.
Ya, mungkin bisa dengan lebih utility kali ya.
Atau ada lagi planning line kayak...
Block element modifier, band.
Ada yang atomic design.
Yang itu yang kayak...
Mulai dari unit, terus kemudian molekul,
Terus kemudian...
Apa itu namanya?
Sebenarnya kayak...
Dari cell, terus kemudian jadi...
Molekul, terus jadi apa gitu.
Jadi...
Ada...
Ada hierarki, nggak itu maksudnya.
Ada hierarki.
Nah, mau ambil...
Kadang kalau misalnya...
Dan CSS itu...
Kalau ikutin saya...
Sepanjang karir saya...
Tergantung si content-nya.
Jadi...
Sangat opinion...
Opinionative ya.
Bisa juga ngomong opinionative.
Sangat opinionative.
Jadi...
Tergantung siapa yang setup di awal.
Dan...
Kalau sudah...
Dia yang setup, ya sudah.
Harus follow all the way through.
Caranya seperti itu.
Karena kalau masih...
Kalau sempat kita introduce...
Sesuatu yang berbeda...
Itu...
CSS jadi acara-acara.
Itu yang...
Yang kadang...
Karena...
Pengetauan CSSnya rendah.
Jadi saya kadang itu...
Terbawa arus saja.
Kalau lagi ikut project mana...
Oh, dia pakai cara begini.
Ya sudah, saya follow cara begitu.
Nanti kalau pakai...
Ada yang berbeda pakainya...
Cara yang berbeda?
Saya follow cara seperti itu.
Jadinya...
Konsep yang di kepala saya...
Enggak tahu mana yang benar, mana yang bagus, mana apa.
Dan...
Enggak pernah dapat...
Basic...
Apa?
Core-nya gitu.
Pengetauan core-nya.
Seperti kalau misalnya...
Kalau saya belajar JavaScript...
Saya ngerti itu.
Core-nya...
Dia bikin begini itu...
Ngerti kenapa.
Sedangkan kalau sudah ikutin CSS...
Dia bikin begini itu, ya sudah.
Ikutin aja lah.
Bah.
Enggak tahu saya core-nya kenapa dia berubah seperti itu.
Nah itu contohnya.
Kalau sekarang...
Sudah boleh introduce CSS variable kan.
Nah...
Semenjak akhir-akhir ini...
Udah banyak CSS variable.
Jadi rata-rata udah pakai CSS variable sekarang.
Jadi harus follow...
Itu tuh ada komen lucu ya.
Gak bisa naikin...
Komen ya.
Gak ada mas Risa.
Udah di setup variable-nya...
Yang lanjutin malah masukin hex scanner.
Nah...
Itu penting yang ikutin style-nya yang di setup.
Atau ada...
Sudah dibikin mixing-nya...
Terus...
Gak di pakai.
Yang...
Yang...
Yang...
Yang...
Yang lanjutin...
Misalnya gini...
Ada yang bikin mixing apa?
Mixingnya PX2 RAM.
Nah...
Pasti aja dipakai pixel dimana-mana.
Nah contohnya seperti itu tuh.
Cuma kalau itu bukannya...
Bukannya isi project management-nya.
Maksudnya...
Misalnya JavaScript pun kan...
Nggak, maksudnya apa?
Project setup.
Kan harusnya ada kesepakatan dong.
Apa caranya gimana?
Dokumentasinya dimana?
Kalau yang...
Kalau anggota tim-nya nggak ngerti cara pakenya...
Nanyanya ke siapa ya?
Maksudnya...
Berarti harus ada kesepakatan kayak gitu kan?
Itu kalau sudah project-nya...
Project-nya yang sudah mateng.
Jadi dari setup-nya...
Dokumentasinya, best practice-nya sudah di setup semua.
Tapi kalau project...
Kerja satu malam mana-mana gitu kan?
Ya kan?
Terus nanti pada...
Pada...
Yang nge-handle front-end dua orang.
Dua-duanya punya pandangannya berbeda.
Ya udah kacau banget untuk CSS.
Nah itu maksudnya...
CSS itu tends to opinio native-nya kencang.
Makanya saya bingung sendiri.
Jadinya...
Suka terbawa harus.
Kalau mau ke-kiri, ke-kiri.
Karena tergantung...
Siapa yang setup di awal.
Nah cuma berarti kan...
Sebetulnya kalau di pikir-pikir...
Bukan murni salah CSS-nya.
Tapi...
Apa ya?
Pengaturan...
Ya itu kalau ada dua front-end.
Tapi mereka punya perspektif...
Lain-lain.
Terus cara coding-nya lain.
Terus nggak dibikin kesepakatan.
Terus belum lagi satu team kan...
Pasti ada yang full-stack back-end.
Nggak ngerti isi kepala mereka berdua.
Terus jadi acara dulu semua.
Bukannya sebetulnya...
Tapi misalnya kalau emang...
Cara kerjanya gitu, bukannya ke depannya...
Misalnya nanti...
Mutusin buat pakai REST API...
Atau GraphQL atau apa.
Kalau misalnya cara kerjanya kayak gitu kan...
Bisa aja terjadi dengan teknologi lain.
Kalau misalnya...
Kalau dari sisi back-end.
Kalau sudah pakai framework Laravel...
Nggak mungkin ada yang introduce CI kan.
Itu dulu deh.
Di CSS...
Kalau sudah pakai bootstrap 5...
Bisa aja kan si X pakai...
Anjur-anjur.
Kalau sudah...
Misalnya kita pakai bootstrap 5.
Tapi ada aja yang bisa pakai...
Misalnya ada aja yang mau pakai...
Posisi absolut tiba-tiba.
Sesuka hatinya.
Karena ada geser-geser...
Ini kok nggak bisa sih.
Ada overflow.
Terus bingung sendiri.
Cara dengerin overflow gimana ya.
Yaudah, bikin aja.
Margin right minus.
Tiba-tiba.
Itu bayangan saya.
Ada akalan-akalan...
Akalan-akalan motirnya.
Itu masa saya...
Karena saya sering ditegor.
Berarti...
Mungkin bisa di...
Kita hipotesisnya...
Itu kayak minus.
Bukan minusnya sih. Cuma maksudnya...
Rawan...
Punya surface luas...
Untuk orang improve sembarangan kali ya.
Di banding...
Sebetulnya JavaScript pun bisa pakai arrow function.
Bisa pakai function ES5.
Dan scopingnya juga...
Behavior scopingnya...
Ada yang bisa beda.
Tapi kalau CSS mungkin...
Lebih rawan dan lebih besar kesempatan...
Buat orang yang nggak ngerti, bingung.
Rawan dan ngacau.
Gitu kali ya, berarti hipotesisnya.
Nah, biar temen-temen apa...
Nggak terlalu takut...
Atau trauma sama CSS...
Kita sekali-sekali bahas CSS.
Eh, pernah nggak? Disambung-sambungin aja udah.
Sebelumnya kita...
Sebelumnya kita pernah nggak sih...
Bahas CSS? Sebetulnya pernah sih, tapi...
Pernah. Sampai color pun pernah kita.
Nah, itu kan tentang color.
Ya, episode 2, CSS.
Kita pernah lipat-lip bahas CSS-nya doang.
Nggak tahu CSS apa, cuma CSS aja.
Bahas CSS.
Pernah, episode 2.
Iya, episode 2.
Tapi masih generic banget ya.
Nah, kalau yang sekarang juga spesifik.
Ya, jadi malam hari ini kita kan bahas tentang layout ya.
Tadi penganturan dari HTML.
Video-nya displeinan.
Iya, displeinan.
Displeinan.
Kalau...
Kalau ada float-nya, nanti melakukannya.
Iya, jadi...
Mungkin sebelum kita ngomongin
tentang layout yang baru-baru ya.
Seperti CSS Grid.
Ada lagi Flexbox.
Ada...
Sejarahnya nih, sejarahnya.
Jadi, jauh sebelum CSS punya...
Punya...
Pengaturan untuk layout.
Web itu ya seperti ini.
Dari dokumen.
Kita udah sempet bahas juga beberapa kali kan.
Jadi sebenarnya HTML itu...
Awalnya tidak didesain untuk
membuat aplikasi.
Atau aplikasi web ya, dalam hal ini.
Dia adalah dokumen yang saling terkait.
Dokumen.
Iya.
Jadi kalau pakai anal di rumah tadi,
nggak ada chat-nya kali ya?
Yang penting bisa melindungi kita dari...
Apalah, dari ujan dan lain-lain.
Iya. Dari ujan dan panas.
Nggak ada chat-nya.
Nggak ada interior-nya.
Nggak ada ubin-nya.
Ini layout-nya...
Seperti ini aja, standar.
Terus kalau misalkan kita butuh...
Ada space di sini.
Ya kita pakai paragraf.
Atau pakai BR gitu kan.
Ada juga pakai HR.
Horizontal Line gitu kan.
Kayaknya cuma sebatas itu.
Untuk kebutuhan pada saat itu.
Atau mungkin sebetulnya udah ada style-nya
dari browser kan. Sampai sekarang tuh
di browser, di ring-ring engine browser
ada kayak default-nya kan.
Mungkin ada default yang basic banget.
Kayak misalnya list indentation-nya
mungkin ya dari browser.
Tapi nggak bisa di-customize.
Nggak bisa di-styling sesuai kebutuhan kita.
Terus hyperlink sudah pasti
warna biru.
Dari dulu.
Nggak boleh merah. Maksudnya nggak ada cara
untuk kita bikin bir.
Itu umu!
Itu kita merah sih.
Kita tuh sama-sama butuh
warna lagi.
Pas FB satu warna nih.
Kita bingung semua
soal warna.
Umu! Bukan merah.
Umu ya.
Iya, iya, iya.
Terus gimana?
Sebenarnya dia sedang berusaha
memperbaiki
display inline.
Kalau display inline
berarti tiduran. Oh nggak, muncul lagi.
Ada, ada, ada.
Tapi, maaf ya temen-temen.
Ini kayaknya cuma bisa suara doang.
Kenapa kameranya, Mas Liza?
Nggak tahu. Tiba-tiba
browser-nya itu
katanya ada yang
conflict. Jadi ada kameranya
dipakai di aplikasi lain. Padahal dicek tadi
nggak ada. Semuanya nggak
pakai, nggak ada yang pakai kamera.
Udah di restart juga
komputernya.
Masih tetap sama. Untungnya
audionya bisa. Jadi ya kita lanjut aja dulu ya.
Ada-ada aja cobaannya
orang streaming sih.
Rebecca Purple. Oh ini yang kita ceritakan
waktu itu ya.
Kisah sedih ya.
Temen-temen yang belum tahu Rebecca Purple
bisa visit episode kita
mengenai warna.
Nggak tahu episode berapa.
Cari sendiri.
Oke, nah ini kan
kita lanjut lagi ya. Ini kan versi pertama
web aplikasi, bukan
aplikasi, alaman atau
dokumen web pertama kali itu KML.
Nah, di sini ya cuma ada
font size, font face,
juga itu terbatas kan. Tergantung sama.
Nah, di sini masuk di markup-nya. Jadi
presentational kan HTML
tech. Kalau sekarang lebih
buat ke struktur semantik.
Nah, kalau dulu dicampur antara
semantik dan apa
presentasi tampilan. Jadi
ya itu font, type font.
Kalau sekarang kan play ya paragraf gitu.
Kalau dulu tuh font
face perdana.
Display block.
Display initial.
Jadi kalau
apa dulu, langsung ya
di tag HTML-nya ya.
Di markup-nya ada atribut
face, atribut color.
Color.
Kemudian berubah
apa, dipisahkan
ke satu file, file-nya
CSS. Oh nggak, ke style dulu ya.
Ke text style dulu kan.
Text style. Masih
dokumen yang sama, tapi sudah
di tempat yang berbeda, mungkin di atas gitu kan.
Terus habis itu, pindah
lagi, karena mungkin makin-makin panjang
jadi file CSS.
Sekarang, balik lagi.
Kalau pakai Tailwind, kayak gini lagi nih.
Masuk ke markup,
tapi kan di satu tempat.
Jadi class name.
Dan fun fact nih,
sebenarnya kalau tadi
ada atribut online ya,
di image tadi, ada contohnya.
Itu tuh kalau, itu sebenarnya masih ada
sampai sekarang bisa dipakai tuh, yang
contoh image source smiley.gif
online, atribut
online. Masih-masih.
Dipakai di ritminya GitHub.
Kan itu nggak bisa pakai CSS ya.
Oke, yang simple.
Line-nya bisa pakai itu tuh.
Tapi, tag-tag ini juga
masih bisa dipakai kan, semuanya kan.
Voice tuh masih bisa nggak sih?
Masih.
Masih bisa semua itu.
Markie, masih bisa markie.
Butuhnya ini masih bisa kerender.
Halaman ini kerender kan?
Bukan, ini photo.
Image.
Oh, yang ini?
Nah, itu kan kerender. Itu kan isinya
beneran di belakang itu font color tuh.
Enggak lah, span tuh.
Span.
Coba tambahin.
Coba aja, div tools.
Edit.
S-H-T-M-L.
Color sama dengan red.
Coba color, color sama dengan red.
Font color ya?
Font.
Red.
Red.
Oh, udah?
Oh, belum.
Oh, bisa.
Bisa, masih bisa.
Itulah salah satu keunggulannya
teknologi web ya.
Jadi dia backward compatibility-nya
luar biasa.
Ya, baik itu
S-H-S dan juga JavaScript.
Makanya size-nya jadi bergigel-gigel kan.
Harus bisa menampilkan
versi yang awal banget
sampai yang sekarang, gitu ya.
Dari 30 tahun lalu.
Iya, iya.
Oke, kita lanjut lagi. Nah, ini kan
baru web pertama,
halaman web pertama.
Kemudian muncullah
kebutuhan untuk double kalem.
Akal-akalan. Nah, atasnya dulu sih.
Mungkin atas sedikit yang...
Atas mana? Ini.
Nah, single pixel GIF kan
dimana ada...
ada kesempatan.
Di situ ada developer akal-akalan.
Di situ ada developer yang akal-akalan, kan.
Karena pas itu
masih susah
ngatur. Ini kan sebenarnya spacing itu kan
the general layout ya.
Karena kita pengen paragraf ini
sama paragraf bawahnya
spacing-nya
space-nya jangan
standar. Pengen ini lebih besar.
Mungkin, dan bukan cuma kosmetik,
bukan cuma estetik aja, tapi mungkin
fokusnya. Misalnya untuk
hierarki. Misalnya ada section
apalah, ada satu bub gitu.
Memisahkan satu section sama section lain
untuk nandain
section itu, untuk nandain grouping kan.
Mungkin pengen misalnya spacing-nya lebih...
apa? Space-nya lebih besar.
Nah, dulu belum bisa.
Belum ada margin. Nah, pakainya image deh.
Image transparan.
Ya. Spaced.
Spaced.
Jadi...
Ya, gitu.
Atau cara yang juga
tradisional pake NBSP? NBSP, NBSP, NBSP.
Nah, pasti
non-breaking space ya.
Oh, dreamweaver ya.
Oh, dreamweaver ya.
Ini sebelumnya ya.
Ya, ya.
Nah, setelah
akalanya jadi canggih lagi,
pake table.
Ini penyalahgunaan bisa dipilihkan.
Penyalahgunaan ya.
Tapi konfinian.
Ya, dan emang gak ada...
pilihan lain sih. Gak ada pilihan lagi.
Gimana lagi? Tapi kan namanya
table. Namanya juga tag-nya,
elemennya table ya. Dibikin untuk
menampilkan data tabular.
Table.
Tapi apa boleh buat?
Masih...
Masih-masih. Email?
Email, ya.
Kalau mau leoting email itu harus mau, nggak mau,
suka-suka, harus pake table.
Masalahnya kan, problem kenapa
table ditinggalkan sebagai layout
utamanya adalah karena
performance ya. Jadi
dia...
Nggak responsif ya?
Nggak responsif.
Dan dia juga
table ini baru bisa
dirender setelah ketemu /table kan.
Setelah table tutup baru dirender kan.
Nggak tahu sekarang, masih kayak gitu nggak?
Jadi ketika misalkan
ini ada 100...
Sekarang sih udah browser udah lebih pintar ya.
Jadi bisa auto.
Berarti masalah utamanya
di responsif.
Tidak bisa dibuat responsif gitu ya?
Sama behavior
tablesill itu agak aneh.
CSS itu kan sebetulnya
layouting-nya, rendering-nya
pakai prinsip yang namanya box mobile kan.
Yang hitung margin, padding,
blah-blah-blah. Nah, coba aja kalau
tabel itu kadang padding-nya
pasti kadang ada bagian yang bisa,
ada yang nggak ribet deh.
Dan email juga sekarang sebetulnya
tergantung email kliennya ya.
Kalau nggak harus
support email klien yang luas
banget-banyak banget. Sekarang udah bisa kok
pakai blog sama apa?
Ya, display blog
yang ngonderen bisa kok.
Jadi tergantung segala-galanya.
Ini bisa dibilang web 1?
Enggak. Ini HTML 1.
HTML 3.
HTML 3.
Kita nggak pakai istilah web 1,
2, web 3 ya di sini.
Kita pakai istilahnya HTML, CSS.
Karena spesifikasi ya.
Maksudnya yang ada spesifikasi resminya.
Nah, dari kesih layout
ini, ini kan breakthrough
banget deh. Terbosen banget.
Kalau si image transparent
tadi kan cuma bisa ngasih space
yang lebih entah kesamping
atau ke bawah. Jadi
dengan men spesifikasikan
width-nya, tingginya, atau
lebernya. Nah, cuma kalau ini
pertama kali bisa pakai kolom.
Breakthrough banget pas itu.
Jadi bisa 2 kolom gitu
seperti ini ya. Ini buat teman-teman
yang tidak mengalami, ini adalah alaman
Netscape
salah satu browser
yang
terkenal di jamannya ya.
Geocities begini dulu.
Iya, geocities.
Yahoo.
Tapi umumnya masih rendah ya.
Masih rendah.
Rendah.
Nah, terus kalau di desain grafis kan
kalau orang desain kan dulu
awalnya kayak berkipulatnya
ke desain grafis yang
fisik ya, print media.
Nah, di print media itu kan
grid kolom itu kan sebetulnya kayak
udah prinsip dari dulu banget lah.
Nah, ini pertama kalinya
halaman web
bisa punya tampilan
yang desainnya bisa
menyerupai. Pada masanya
udah breakthrough banget lah. Bisa
pakai prinsip-prinsip dari
desain print,
desain cetak.
Saya teringat dulu jaman
waktu kuliah bikin
halaman tampilan web
masih pakai table, tetapi
desain yang diberikan ke saya itu
bukan kotak-kotak,
tapi alami corner.
Alami corner.
Jadi saya harus potong-potong sesuai
ya ampun, potong-potong
sesuai kan table-nya ukurannya.
Makanya dulu
ada pekerjaan yang namanya
slicing. Slicing dari
Photoshop. Jadi Photoshop
dari image gitu kan
dipotong-potong supaya bisa masuk ke table kan
pada saat itu ya.
Supaya backgroundnya
kecil, jadi ada dibikin
misalnya menu-nya
itu ada gradient, color.
Header-nya ada gradient, makanya
dipotong kayak cuma
5 pixel, terus diripit,
backgroundnya diripit.
Jadi supaya
supaya nggak besar ukurannya.
Iya, background gitu, supaya
background color-nya segitu, terus
nanti yang dipotong ujungnya kiri-kanan.
Ah, rounded-nya.
Jadi rounded, iya. Ini ada
masukkan sedikit suara mas Ivan, kecil
katanya. Mungkin bisa digedein.
Gedein volume-nya.
Nah, kalau Damar, malah ini ya, malas
banget pakai table, karena apalagi CSS
bisa hasilnya tidak sesuai
harapan kali ya.
Jadi lebih memilih pake flex column
atau grid.
Nah, jangan sedih. Sekarang udah ada display
table kan, jadi property-nya display
titik 2 table.
Oh, tapi kalau dulu, saya nyaman
banget pakai table. Bahkan sudah ada
udah masuk jamannya
float, left, float, right, gitu.
Tapi kita pakai table, lebih enak.
Walaupun dulu ya performanya kurang
bagus ya, tapi lebih gampang
untuk menyusun
apalagi bisa di drag-and-drop kan,
kalau jamannya apa?
Dreamweaver tadi kan,
jadi udah kelihatan gitu bentuknya.
Kalau float-float gitu kan agak-agak susah ya
dibayamin dulu.
Kalau float, harus ngerti
CSS-nya. Nah, cuma kalau dulu
jaman table, kalau nggak salah,
Dreamweaver itu kayak dibeli,
makromedia ya.
Makromedia, terus dibeli Adobe.
Ya, dibeli Adobe. Nah, terus Adobe itu
kalau nggak salah, kalau misalnya
kita punya layout, itu bisa
nge-slicing di situ deh,
nge-slicing di situ, jadi kita
nge-slicing-nya pakai GUI-nya Photoshop
kalau nggak salah, terus di export
somehow, somehow udah
kepotong-potong gitu.
Jadi udah jadi file banyak.
Dari Photoshop udah dipotong,
terus di...
dipotong, dia kasih kayak
gri apa, kayak...
Kita nge-garis gitu kan, kayaknya
pernah lihat deh, pernah baca bukunya.
Terus kita kasih
label, nanti sekali export,
dia langsung udah
terpotong-potong, jadi kayak sprite.
Jadi misalnya kalau layout-nya
kayak sprite deh kayaknya.
Jadi misalnya kalau satu layout dipotong,
jadi 40, misalnya
4x10 gitu, 40 kita
nggak harus nge-save gambarnya,
10x gitu, nggak kan dia yang akan mati.
Bisa sekali pakai.
Terus kayaknya bisa di
export jadi HTML file
atau gimana gitu, yang
kompatibel sama...
Oh nggak bisa ya?
Jadi slicing-slicing itu kan,
image-image kecil-kecil gitu kan,
kepotong-potong. Masukin ketamanya
sendiri tapi jadi Dreamweavers.
Kayaknya ngerti konsepnya tapi
untungnya belum pernah.
Oh.
Iya, enaknya drag-and-drop.
Jadi table-nya ada, kita tinggal drag-and-drop
si image-nya ke table
yang kita mau, column yang kita mau.
Dan...
Is what you get.
Gitu di preview,
miring-miring.
Dan biasanya
kalau kita buka source code-nya itu
biasanya banyak
ini ya, banyak sampah.
Ada yang
tambahin spasi, ada yang tambahin apa
gitu, macem-macem lah ya.
Oke, lanjut. Ternyata
sebelum kita masuk ke float,
ada ini ya, ada yang menggunakan
frame.
Ini frame sama
iframe beda ya.
Kalau frame ini seperti iframe tapi
kita nggak buka source
external
yang lain, external.
Bisa external bisa kali ya.
Bisa local, bisa external mungkin.
Tapi yang bikin unik adalah frame ini
bisa, dia punya
atribut
yang mirip
seperti browser
kita, jadi ada,
bakal ada scroll-nya.
Jadi masing-masing kotak ini bisa ada scroll.
Masing-masing kotaknya dirender
sendiri.
Secara mandiri.
Satu kotak, satu halaman lah
gitu, halaman.
Satu view, satu view.
Oh iya.
Ini konsep micro
front-end dari sini.
Masing-masing
sendiri-sendiri, ini berdiri sendiri-sendiri.
Jadi menu-nya itu
satu frame, nanti
content-nya satu frame,
header-nya satu frame, footer-nya satu
frame.
Ini di sini kan udah kelihatan ya.
Satu file HTML di sini,
dua HTML di sini.
Terus bisa di-set juga row-nya, column-nya
berapa persen, berapa persen.
Nah yang juara sih frame set itu sih.
Jadi kalau frame-nya sendiri kan ya udah itu
untuk ngerender halaman,
halaman dari tempat lain, baik internal
ataupun external ya udah kalau itu mah
straightforward ya udah.
Cuma frame set ini kan berarti sebenarnya
pertama kali bisa
mengkustomize ukuran-ukuran
grid,
column dan row
dengan apa ya, kayak deklaratif kan,
pakai kode aja udah, kita
walaupun kita belum pernah pakai,
baca itu cukup jelas kan, oh kita pengen
lebarnya 30 persen,
terus sisanya ada bintang asterisk gitu,
berarti kan silahkan mengikuti
sisanya, udah.
Sudah kayak gitu ya, udah kayak
flex auto.
Kayak CSS Grid.
CSS Grid.
Atau Flex Go.
Benar-benar-benar.
Yang pertama kali juga, cuma udah nggak dipakai ya?
Udah nggak ada ya frame set sekarang?
Udah jarang sekali.
Masih ada?
Sama bang biru.
Bang biru banyak kali.
Semua bang biru.
Ada yang tiga huruf,
ada yang lima huruf.
Yang swasta ya?
Yang swasta apa? Yang BOMN?
Yang swasta.
Oh iya.
Yang UI-nya itu
legendaris ya?
Dia nggak perlu macem-macem, tapi
getting things done ya.
Yang penting jalan. Yang penting
aplikasi webnya masih ada ya?
Bang biru sebelah ya?
BOMN sudah dihapus
aplikasi webnya.
Aplikasi webnya udah di stop.
Oke, berikutnya,
ini image map.
Siapa disini yang mengalami
menggunakan image map.
Ini asli nggak tahu ini apa?
Ada image gede,
misalkan map lah ya.
Kayak Google map lah. Bayangkan kayak Google map,
tapi nggak bisa di scroll satu image gitu.
Terus di koordinator
tertentu, kita bisa
tambahkan
apa ya istilahnya ya? Bisa diklik.
Jadi misalkan nih, gambar
bola ini kan.
Kita mau lingkaran ini, kalau diklik
menuju ke halaman lain atau
menuju ke angka yang lain.
Ke bagian dokumen yang lain.
Itu bisa.
Namanya image map.
Oh, kalau di flash lah.
Di flash aja juga.
Jadi ini kayak go to ya.
Kalau diklik, dia akan
lari kesini misalkan. Kalau ini
dia akan lari ke atas gitu.
Oh, gue tahu kalau area target ini
tahu, tapi itu namanya image map ya.
Iya.
Kalau nggak salah, di Dreamweaver
juga kita bisa buat
otomatis. Kalau ini kan kita harus ketik sendiri nih.
Kita harus tahu koordinatnya berapa kan.
Kalau Dreamweaver itu,
kita drag and drop aja, kita mau bentuknya
bulet atau kotak,
dia udah bikinin koordinasi.
Kita semacam insert image, terus kita select
di image-nya gitu ya.
Semacam itulah.
Semacam itu.
Oke, lanjut.
Nah, baru masuk ke
area-nya CSS.
Sebelumnya CSS jarang dipakai ya.
Belum dipakai, belum ada.
Baru di akhir '90-an.
Di tahun
2000-an ga?
'96 ya.
Pemendaisen itu '96.
Oke.
CSS1 ya.
'96. '98, sudah
CSS2. '98, CSS2.
Sekarang CSS3.
Ya, tapi ada
2,5 loh.
Ada 2,5? Mana?
Oh, ga disebut ya?
Itu pasti drama-drama yang kita sering liat itu lho.
Pasti yang satu jelas.
Terus nanti ada apa sih?
Ada working group perjuangan atau semacamnya
bikin sendiri. Abis itu karena udah ada yang bikin,
akhirnya jadi pada sadar, jadi compact lagi.
Pasti gitu-gitu.
Nah, CSS itu
mulai yang
CSS2 berarti ya.
CSS level 2 atau versi 2, di '98
baru mulai ada
kemampuan untuk mengatur
layout di sini dengan position.
Position fix dan
position absolute.
Dan position relative.
Jadi, kalau
dulu ya, kita
bikin web itu bisa
seenaknya kita taruh gambar di ujung kanan
bisa, gitu kan, pakai position absolute.
Tapi ga bisa gerak.
Bisa responsive, gitu-gitu ya.
Dia tetep aja di kanan atas, gitu.
Itu bisa pakai position absolute.
Sekarang masih dipakai ya.
Relatif kayaknya masih dipakai.
Kalau absolute, ada masih dipakai ya.
Masih. Masih ya.
Sama ada z-index.
Z-index ini adalah layering.
Jadi kita bisa numpuk satu
komponen di atas komponen yang lain.
Oke, tapi saya senang banget
untuk pakai position absolute.
Iya. Udah pasti
di situ ya.
Gak mungkin ada, oh, ada margin
ini, ada padding ini.
Absolute terhadap relative-nya.
Absolute terhadap parent
relative.
Jadi, bedanya fix,
position fix sama absolute.
Kalau fix itu kan, ngikut.
Itunya viewportnya.
Window, ya.
Dokumenter luar.
Yang ngikut, parent yang
punya position. Nah, mampus.
Parent yang punya position.
Kalau position-nya
gak di-define, yang gak
ngikut parent-nya.
Terus cari ke atasnya lagi.
Atausnya lagi, kalau misalnya parent-nya.
Kan bisa nested banyak nih.
Misalnya parent-nya lagi, ada position relative.
Atau position, apapun itu, asal ada position-nya.
Ya, absolute, ngikut
si parent itu.
Ini ada pertanyaan dari
Lejide, tapi nanti kita akan bahas
nanti aja ya, di akhir-akhir ya.
Biar kita ikutin topik dulu ya.
Next-nya, div.
Nah, masuk ke div sama box-node.
CSS3 tadi gimana kan?
CSS3
draft-nya di 1999.
Ya, jadi
ada beberapa modul.
Setiap modul ada fitur baru
yang direlot secara
terpisah.
Sekarang kita sedang
berada di CSS3 ya.
Dan sudah ada...
Jadi kan sejak 1999, sekarang
udah 2023 ya, kelihatannya
kalau nggak salah di podcast apa, kita pernah dengar
bahwa emang udah nggak akan
ada CSS4
cuma pada
subspecifal, karena udah ada modul-modulnya
kan. Jadi maksudnya kalau mau ada yang
lebih advance,
pakai modulnya itu.
Jadi misalnya apa ya,
color gitu, color function kan
makin canggih, ada yang baru.
Ada color specification, level-levelnya.
Jadi kalau misalnya yang
sekarang nih yang baru kayak
hue transition atau apa, itu juga
ada level-levelnya. Cuma CSS-nya
sendiri, kelihatannya
nggak akan nambah jadi CSS4,
CSS5, dan seterusnya.
Kalau nggak salah, nanti
aku cari-cari dulu.
Yes, dan CSS3 dilengkapi
dengan layout
tools yang sangat powerful,
yaitu Flexbox dan CSS Grid.
Dan pertanyaannya, kapan
kita perlu pakai Flexbox, kapan kita
pakai Grid?
Oh nanti ya.
Ya oke.
Ya oke.
Kita ke
Boxmodel dulu ya. Boxmodel itu
ada gara-gara
salah satunya adalah kita menggunakan
div. Jadi kita udah move on nih.
Dari table,
terus sekarang ke div.
Dari table, frame,
kemudian sekarang ke div.
Dan gara-gara div itu makanya ada
muncul istilah namanya Boxmodel.
Boxmodel ini adalah
div itu kan sebenarnya
kosongan ya.
Komponen kosongan gitu kan.
Nggak ada apa-apa. Bisa kita nggak isi.
Tapi sehar sebaiknya diisi kan.
Dan dia itu punya beberapa
atribut yang bisa
membuat perubahan
layout, perubahan posisi.
Ya ini 3 ini.
Margin, border, dan padding.
Jadi sebenarnya kan
semua di CSS.
Di rendering engine, di browser rendering engine.
Ya yang bisa di styling
dengan CSS. Semua itu
kotak di gampangnya.
Div itu kotak. Nah kotak itu
ada area-area
yang digambar itu. Area luarnya
sekitar si kotak itu margin.
Tinggiran kotaknya itu border.
Terus dalamnya bisa
ada padding kalau mau.
Terus ada isi kotaknya.
Kotaknya mau diisi text, mau diisi
image, mau diisi apapun, bebas.
Masih ada border radius
dan box shadow.
Box shadow. Itu nambah juga?
Nambah pixel?
Nambah pixel.
Di 2 border kan.
Udah tuh dari situ.
Sekarang ada
position yang tadi bertambah lagi.
Yang tadi kan cuman ada
relative, fixed sama
absolute. Sekarang ada sticky
dan ada static.
Static itu default. Jadi kalau nggak ada
positionnya, itu dianggap
static. Nah yang perkara si absolute
tadi tuh kalau parentnya static
itu dianggap nggak ada positionnya.
Dianggap nggak ada
property position.
Kalau sticky ini buat
kayak
header yang tetap ada di atas.
Apa bedanya fixed sama sticky?
Fixed itu
relative sama
viewport.
Kapal pingpongnya nggak tergantung
overflow scrolling.
Yaponya selalu di situ. Jadi
nempel ke sisi
kiri atau kanan atau atas atau
bawah viewport. Nah kalau sticky
itu beda utamanya
itu based on the user's scroll
position. Jadi
kalau by default
itu elemen
yang pakai sticky itu di-rendernya
sama aja kayak elemen lain biasa
aja. Sampai kita nge-scroll
dan dia harus, maksudnya
kalau itu standard
by default itu harusnya keluar viewport
tapi si sticky nggak mau keluar
viewport, nempel ke atas.
Nah kalau daily scroll
ke posisi normal lagi ya udah normal
lagi. Jadi intinya ya
semacam elemen normal
nggak bisa
keluar dari viewport.
Nah nempelnya di mana?
Di atas atau di bawah itu tergantung
kita selain posisi sticky
kita harus nambahin juga
topnya 0 atau bottomnya
0.
Kalau misalnya mau
bikin edge yang sticky
bisa juga dong, bisa
sticky edge.
Biasanya kalau saya bikin sticky edge itu
pakainya fix sih. Fix di atas
dibawah.
Dan kalau misalnya
mau
close edge
dia pindah tuh.
Close lagi dia pindah
ke atas.
Kalau ga close, yang pindah buttonnya
jadi clip bannernya.
Kalau klik close, dia pindah
jadi nggak nge-close.
Ya atau yang pindah button
close nya, jadi dia malah ngebuka bannernya.
Jadi intem.
Jadi duit.
Ini damar ya.
Malah nggak works ya
pake box model ya.
Malah nggak cocok kali ya.
Selalu salah,
asumsi nya salah ya.
Terus.
Oh itu mungkin gara-gara nggak
di reset ya.
Jadi ada CSS.
Ada CSS reset tuh.
Ada property box sizing.
Nah ini kalau di
terangin ada ribet sih.
Coba dibuka deh.
Di private box sizing.
Box sizing, oh sebentar.
Nah property.
Kenapa butuh CSS reset?
Apakah setiap browser punya
yang dari default berbeda ya?
Itu sama aja
hal-hal yang itu tadi apa
semua teknologi web itu kan harus
backwards compatible.
Dan entah kenapa, by default itu
value box sizing itu
content box yang mana itu
bikin ukuran, coba
scroll ke bawah, liat sendiri deh.
Pasti begitu liat langsung, oh maksudnya
itu. Nah itu kan
melebar
kan. Dan entah kenapa, by default
box sizing itu value-nya
content box. Dan itu
walaupun udah puluhan tahun
kayak ada kesempatan itu nggak boleh
diubah. Karena yang itu teknologi web
harus backwards compatible.
Makanya obatnya adalah semua
CSS reset pasti ada kayak
yang paling bawah tuh. Coba klik yang bawah
box sizing, border box.
Pasti pernah liat di default.
Nah solusinya itu.
Oke, oh.
Menarik-menarik. Ini ada
pendapat juga nih dari
Cognit.
Web app itu apa?
Asyrektur ya maksudnya. Sekarang yang
component-based seperti React
dan lain-lain lain. Lebih baik pakai
padding aja biar lebih mudah
di-maintain. Karena nggak seharusnya
satu component ngefek ke component lain.
Ada benarnya sih?
Ya apalagi sekarang. Udah defleks,
udah ada grid. Jadi
nggak perlu apa-apa manuali
nge-set margin keluarnya kayak gimana
kan? Karena itu diatur
dari container-nya.
Nah lanjut ke historinya
dulu aja. Nah itu. Ini yang saya sebutkan
tadi, Mas Cognit itu bilang
lebih baik begini-begini.
Itu kan sudah opinionated ya.
Yes. Masih masing-masing.
Masnya pakai begitu.
Eh ternyata ada
programmer yang lain
sesuka hatinya pakai margin.
Nanti ujung-ujung projectnya
udah pecah kepala. Ini apalah
yang bikin di-overflow?
Nah berarti itu
tantangan buat sih
front-end dev di timnya. Gimana
bisa, apa?
Kalau cuma ngikut, kalau cuma ngoding kan?
Terus gini
yang mungkin sih front-end, bukan mungkin
front-end dev-nya ya pasti tahu dan
harus tahu kan. Tapi gimana
mengkomunikasikan dan men-streamline
itu ke seluruh tim
dan membuat itu jadi gampang.
Jadi kayak misalnya
daripada improve-improve
kopas aneh-aneh
udah ini aja.
Kan orang tuh pasti
melakukan apa-apa
yang gampang asal emang jelas
jadinya kayak gitu. Nah itu
keputusan itu dibikin jadi gampang.
Nah ya
tantangannya. Challenge-nya.
Ini salah satu penggagas
box-sizing adalah sih Pak.
Oh iya selalu nama dia
ada tuh di semua CSS reset ya.
Iya ini 2012.
Itu nama orang.
Mas Paul Irish.
Iya dia itu
Eh yang terakhir
disinilah.
Oh gue nggak ikut.
Ikut. Lo yang motoin.
Motoin gue sama dia.
Ini. Oh ini
di CTN.
Ya iya iya.
Yang motoin kan Ivan
yang fotoin.
Maksanya.
Nggak gue disini tuh maksudnya di Jakarta.
Kan ada yang datang Jakarta.
Dia sempat di Jakarta. Sempat datang.
Beberapa kali.
Oh iya.
Fokus on developer.
Itu penjelasannya.
Nah atur-atur
border. Itu kan tadi masalah awalnya
atur border pakai box model.
Ya itu berarti
sizingnya salah.
Masalahnya ini kan tiba-tiba ada yang
padding 20.
Kalau bordernya 4 pixel
jadi tambah 4.
Di sekitar kopaknya.
Oke lanjut lagi.
Trivia.
Apa itu? Apa apa apa?
Apa beda visibility hidden
sama displacement.
Visibility hidden sama?
Siapa aja.
Visibility hidden sama displacement.
Kalian deh jawab dulu.
Kayaknya pernah dengar.
Tapi apa ya?
Sama-sama hilang kan.
Tapi yang satu dirender disembunyiin sama yang satu gak dirender.
Tapi gak tau yang mana nih.
Dirender.
Dirender dua-duanya.
Oh dua-duanya dirender ya?
Gak tau.
Sama-sama gak kaset mata sama-sama dirender.
Tapi visibility hidden itu
meng-occupy
space.
Standard default space.
Jadi misalnya kotaknya atau textnya harusnya
seberapa? Ya tetep ada yang gitu.
Coba kasih.
Ini sekarang, inspect yang
elicitur, static, blablabla.
UL-nya, UL-nya.
Nah, coba bikin
display none. Element style
display none.
Kalau display none, ilang
gak meng-occupy space.
Jadi bisa dianggap 0x0.
Coba sekarang.
Display none, disable.
Visibility hidden.
Hidden ya?
Hidden.
Oh ada ya?
Ada space-nya, tapi
display none.
Ini kenapa kuning-kuning?
Gak tau. Coba ini.
Ada warni apa sekarang?
Kalau display none.
Ini hilang sama sekali ya.
Tapi gak ada warning-nya.
Kalau visibility tadi
kenapa ada itunya?
Coba deh.
Di sini tulisnya, bentar ya.
Gak kelihatan.
Changes to this property will trigger
layout which can impact performance
when used inside keyframe.
Canggih ya.
Sekarang DevTools ada warning-nya.
Forma satu lagi yang perlu diketahui
soal display none
sama visibility ini
soal accessibility behavior-nya
screen reader untuk
misalnya orang yang tunai netra
atau yang pakai screen reader ya.
Lupa penjelasannya.
Cuma kalau gak salah display none itu
gak dibaca sama sekali.
Dianggap gak ada.
Itu kan kayak equal sama
secara visual kan gak meng-occupy
space apapun.
Kayak gak ada lah buat kita yang
melihat secara visual.
Jadi sama screen reader gak dibaca.
Tapi kalau visibility hidden
lupa-lupanya kayaknya dibaca.
Makanya di Tailwind atau di apapun lah
pokoknya CSS suka ada yang
screen reader only itu
akal-akalannya pakai visibility
hidden.
Tapi di height sama width-nya di-set
ke 0 sama akal-akalan
apalagi deh lupa-lupa di-clicking.
Jadi pokoknya biar gak muncul
secara visual
jadi di screen reader tetap dibaca.
Nah.
Ya itu ada taitanya.
Damar kasih trivia lagi nih.
Visibility hidden, opacity 0.
Ayo.
Itu bukannya sama ya?
Oh secara visual sama?
Benar.
Secara rendering,
coba aja opacity 0.
Opacity 0 lebih
mahal gak sih secara
performance gak ya?
Gak tahu.
Apa mungkin kayak
komposit itu loh komposit.
Kalau dibikin transition mungkin
pakai opacity lebih enak.
Ya opacity sama visibility sama.
Masa di-set
masih bisa di-select ya
font ini.
Gak bisa ya? Gak bisa.
Gak bisa ya? Gak bisa.
Gak bisa.
Gak bisa? Gak bisa.
Kalau ke note, mungkin
ada. Cuma gak keliatan aja.
Maksudnya
paste kesalah.
Oh iya, bisa ke copy.
Ya kan, kalau visibility hidden
gak bisa ke copy.
Gak bisa. Gak keliatan sama sekali ya.
Benar. Benar. Benar.
Jadi dia, textnya
sebenarnya ada.
Tapi warnanya transparan.
Gitu kan?
Oke.
Lanjut. Nah.
Sekarang ke flow.
Akhirnya, ini makin
lebih dekat di jaman
mudirin ya. Peradapan.
Peradapan mudirin.
Tapi sangat susah ada prediksi
terfloat right itu.
Susah banget prediksi.
Float pun ternyata itu
sebetulnya masih masuk kategori
akal-akalan. Karena float itu
sebetulnya kan awalnya dibikin untuk
itu lokan yang dimajalah atau apa.
Kan biasanya ada kolom
kayak full quote atau semacamnya ya.
Itu kayak buat gambar misalnya.
Gambar bisa di kiri, bisa di kanan.
Nah. Textnya, konten lain
bisa minggir. Bisa ngikutin
minggir
buat ngasih tempat untuk
elemen yang di float.
Jadi sebetulnya pun bukan untuk
bikin kolom-kolom lain out sih.
Tapi buat kayak gitu kayak image atau
section.
Untuk apa namanya? Untuk dia
mengikuti gayanya tadi.
Biasanya kan kalau di koran
gitu kan.
Atau di majalah printing gitu kan.
Kadang-kadang ada image buat highlight
di sini. Terus tiba-tiba ada huruq gede satu
biji. Terus baru ada textnya.
Nah mereka kayaknya ngikutin ini ya.
Kalau punya button, mau bikin dia
ke kanan atau ke kiri
itu pakai float atau pakai
text lain?
Coba dulu pakai text lain.
Kalau nggak bisa baru pakai float.
Biasanya gitu.
Float itu bahayanya
tanda putih adalah bikin
elemen di sekitarnya semua
ngisi sisa space-nya.
Ya itu kayak misalnya si text yang
florem ipsum-nya kan set out
perspermulannya kan naik ke atas kan.
Nah kalau misalnya kita button-nya di pinggirin
ke kanan, terus nanti text di bawahnya
naik ke atas.
Yang perbedaan utamanya text
lain, text lainnya itu di apply
ke parent-nya.
Float di apply ke elemen-nya.
Elemen yang pengen diatur posisinya ya?
Kalau text
lain itu kan si parent-nya
si div-nya mau bikin text
lainnya left right-ed.
Kalau si float ke elemen-nya
yang kita apply.
Tapi bisa ya? Button bisa
ke kiri ke kanan dengan text
lain ya? Bisa.
Bisa aja.
Itu salah satu yang membingungkan.
Karena button itu kan sebenarnya bukan text kan.
Kok di text lain bisa ke kiri?
Ya, nama property-nya
text-align, tapi sebenarnya apapun
isinya yang di dalamnya kan. Apapun itu kan
bukan text doang kan.
Apapun yang display-nya
inline.
Display-nya harus inline.
Image gitu.
Image kan, image bukan text ya.
Tapi kan bisa juga.
Yang di bayangan saya, kalau kita tulis
text-align left itu
text yang ada di button-nya
yang ke kiri. Bukan button-nya yang ke kiri.
Itulah asumsinya ya, asumsinya.
Bayangannya.
Ternyata tidak ya.
Tapi kalau bikin button
text-align di dalam button
text-nya yang berubah.
Kalau button-nya 100% ya.
100% gede itu.
Mau kiri, mau kanan, mau tengah.
Itu text-align.
Ini adalah
Nah, ini dia
akhirnya ketemu juga. Ini
pertama kali belajar webdrive
ketemunya ini si Tabela
segerit yang kayak gini.
Ini awal-awal
ini nih, sebelum ada
Flexbox namanya Floatbox.
Floatbox?
Enggak, enggak.
Kamu namanya Float kan?
Tampilan grid pakai Float.
Sebenarnya dibikin Flow.
Jadi apa?
Jadi kan
munculnya
berbarengan sama
grid system. Kan ada 12 grid
system, ada 960
grid system, ada 16,
ada 18, ada berapa gitu yang
dibikin grid gitu kalau kita mau desain.
Itu sih busra kan, awal-awal bikin gitu.
Dulu ada framework
sendiri loh. Terpisah dari
CSS framework ya.
Ada namanya grid system, banyak-banyak.
Keliatannya, mungkin kalau
kalau
bisa dikira-kira, ditebak
mungkin kan karena ada Float ini, memudahkan
orang bikin kayak apa ya,
lebih versatile aja,
lebih flexible bikin
apa, kolom-kolom
kayak box 2 konten, inbox 3 konten ini
kan. Karena ini udah
dipermudah, jadi misalnya
orang-orang bikin grid system juga
enak, jadi gampang. Soalnya
balik lagi ke graphic design
yang cetak itu sebenarnya
system 12 grid, 16 grid itu
komong sih udah dari tahun
60-70-an.
Jadi itu udah ada dicetak,
udah ada sebagai
referensi. Nah cuma selama ini
kan kalau orang web-web
ya belum bisa lah, masih ribet karena tadi
masih pakai frameset lah, masih pakai table.
Begitu ada
CSS work yang relatif lebih
gampang dipakai ya udah, jadi diadaptasi
jadi framework.
Framework apa ya?
Framework visual ya?
Iya, istilahnya GS
grid system, itu banyak dulu
banyak-banyak pilihannya.
Ini dulu
karena ada bootstrap, salah satunya
dipopulerin bootstrap nggak sih?
Ada bootstrap, ada subgroup foundation
ada yang inget subgroup foundation
ya, subgroup foundation, tahu.
Masih ada kan CSS-nya?
Udah lama banget.
Maskopnya ya, ting.
Sekarang foundation 6 lagi.
Foundation frame 6 ya sekarang.
Iya.
Dan ini pertama kali sih kita bisa
mengkustomize
sewo ini.
Masih ada yang pakai ya, Zup.
Masih, kayaknya dulu kita pernah lihat ya
lupa di episode pertanyaan. Versi berapa dia?
6 sekarang.
6 ya?
Duh!
Cloudflare.
Hehehe.
Harus divalidasi dulu
saya bukan robot.
Oh ini course-nya?
Mana ini-nya?
Oh, ini.
Getting started.
Getting started?
Blah, dia lagi.
Kumpul sesuatu.
I'm human.
Pake itu kali, pakai
VPN, nggak?
Nggak.
Tor network kali?
Nggak.
Udah, lanjut, nggak.
Oke.
Anyway, dulu
yang musuh, bukan musuh ya,
kompetitornya Bootstrap
Sur Foundation
Rep, apa lagi ya?
Nggak ada ya. Cuma 2 itu.
2 ya.
Yang pertama kali ya, mungkin habis itu ada.
Apa? Oh iya, banyak. Habis itu banyak.
Tapi
Bootstrap yang paling menguasai ya.
Menguasai pasar ya.
Nah itu ada Clearing Flux sih.
Atas dikit.
Connection type.
Cari sendiri aja.
Clearing Flux
ada di atas dikit deh.
Oh iya.
Soalnya kalau gitu, numpuk terus kan.
Cuma misalnya di Float
misalnya kita nge-set box 2
konten tuh 20%.
Ya udah.
Terus box 3 konten 50%.
Ya udah, numpuk ke kirinya
Float Live juga. Box 4
konten, misalnya
berapa tadi? Sisanya 30%.
Ke kiri. Kalo nggak diclear,
box 5 kontennya bisa numpuk.
Bisa numpuk ke samping gitu, bisa
ke kanan. Bisa nggak bisa.
Jadi diclear dulu, ini setelah box
4 diclear.
Ada divnya sendiri tuh, div clear both.
Atau clear left ya.
Dalam hal ini.
Harus div left ya.
Jadi adanya strip div malah.
Jadi nambah-nambahin
nambah-nambahin div yang
tidak dibutuhkan ya.
Yes. Dan kemudian
baru apa?
Muncul responsif ya.
Mobile. Ada dulu
kalo nggak salah.
Kalo nggak salah, dulu ada yang
memopulerkan namanya
Mobile First Web.
Jadi kita
desain dari mobile dulu
baru berkembang ke desktop.
Sebelum ya, ini sebelum ya.
Bahasanya responsif.
Responsif. Kalo responsif
sampe sekarang sih kayaknya masih
dipakai ya istilah responsif.
Istilah responsif itu
setelah
responsif ini ya.
Ya, semenjak
iPhone meledak
dan Android meledak
baru mulai
perjalanannya itu kayak
Mobile First gitu.
Jadi semua paradigma
kalo ngedesain itu jangan dari desktop
tetapi dari mobile dulu.
Dan mempermudah juga kan
begitu ada konsep media
query, ya itu
tadi sih betul kelemahannya.
Tanda kutip kelemahan CSS dalam project
kan apa? Banyak ruang
buat orang improv sembarangan.
Jadi misalnya kalo di atas ada query
pake min width, terus di bawahnya
bikin query lagi max width
itu kan pusing kan, tabrak-tabrakan kan
style-nya. Jadi kalo
dengan filosofi mobile first, semua
querinya min width, ga ada max width.
Dari awal itu juga sempat
dulu tuh kayak ada juga sempat
trending yang
mobile first. Jadi meskipun di desktop
bikin aja kecil.
Kita harus di Indonesia dikecil aja
kampilannya gitu.
Jadi mau digedein, mau digedein itu segitu ya.
Ya, kayaknya containernya
segitu, karena misalnya
MVP ngejar waktu, keburu waktu.
Itu tidak responsif justru sebenernya.
Statik.
Tapi kan bisa diakses.
Bisa, bisa.
Justru itu, karena
orang baru, ya jadi
gimana ya, ada gap
di sisi bisnis, orang-orang bisnis
yang mungkin pengetahuan teknikal
nya kurang gitu ya. Mereka menganggap
kalo kita bikin web
yang responsif, yang
desktop, tablet,
mobile, itu bikinnya satu untuk
tiga. Kalo kita kerjanya
tiga kali lipat sebenernya kan.
Jadi kayak di bakat gitu, website-nya
kita bikin responsif ya, jadi
kita cukup bikin satu website untuk
tiga jenis device gitu.
Padahal kerjaannya itu bisa tiga kali
lipat, bahkan 4 kali lipat gitu, setengah
ti, gitu kan. Hampir sama aja kayak kita
bikin 2 web
yang berbeda. Mungkin sebelum ini,
sebelum responsif, sempet ada
trend,
dimana ada mobile web,
ada web buat desktop.
Contohnya misalkan.
Kalo WAP itu, ya.
WAP itu di...
Ya,
m.something.com gitu kan.
Itu yang mobilnya.
Yang desktopnya, blablabla.comnya
juga, gitu. Nah, itu
justru lebih hemat
ini ya, lebih mudah, gitu.
Dibandingkan harus kalo pake
responsif. Mungkin karena dulu
saya...
sampai sekarang CSS-nya ilmunya
kurang, jadi susah, gitu.
Mungkin kalo temen-temen yang sedaterbiasa CSS
mungkin akan lebih mudah. Mungkin susah banget
dulu kalo bikin web yang responsif.
Tools-nya juga belum banyak,
Mas.
Kita sekarang untuk...
Sekarang terbentuk banget semenjak post-nya.
Video query-nya juga terbatas.
Bener-bener.
Padahal udah disiapin tuh, oh kita
beli aja, itu template dari Bootstrap
yang responsif, gitu kan.
Oh, dilihat dari
showcase-nya bagus, gitu kan. Begitu dicobain,
kok jelek ya.
Biasanya beli di Time Forest,
bener-bener sekali.
Dipasang
kontennya hancur.
Nah, dulu salah satu kerjaan
paling awal, pas masih
belum jadi full-time dev,
masih kayak buat
iseng-iseng freelance
seri duit, itu ngefixing,
ngebener-benerin yang kayak gitu tuh, yang
orang beli, dia menjadi. Cuma
ininya miring kesini, ininya jatuh,
kayak yang dibayar
5 dolar, 10 dolar, ngebenerin,
gitu-gituan, jadi belajar, jadi baca.
Terima kasih pembuatin di Time Forest
untuk melancarkan jalan
karir saya.
Oke.
Menarik ya. Jadi, responsif
webdesign ini,
dia muncul salah
satunya gara-gara adanya media query.
Jadi, si CSS
sudah mulai ada
kondisi. Kalo kondisinya
screen-nya sekian,
maka kita bisa
necilin hurufnya,
atau menyembunyikan
elemen-elemen yang
nggak dibutuhkan, gitu kan,
seperti. Ini udah kayak if ya?
Udah kayak if, udah kayak kondisi.
Betul, betul.
Jadi, udah kayak programming language juga.
Sekarang sudah ada container query.
Betul. Tapi, akhirnya
CSS-nya jadi banyak.
Untuk setiap, ya
kita kan baru ngomong, ini 3 ya.
Desktop, tablet,
mobile.
Ada juga yang tabletnya Portrait
Landscape. Beda lagi kan aspek
rasio-nya kan. Apakah kita
handle atau nggak, gitu ya. Tapi
kalo misalkan temen-temen diminta untuk
bikin responsif webdesign, ya
rasanya 3,
apa ya? Breakpoint.
Ya, breakpoint cukup
rasanya ya. Cukup, gitu.
Sekarang banyak,
4, 5. Iya, banyak.
Banyak banget. Belum ada foldable.
Foldable lagi, aduh.
Nah, abis itu baru muncul
lah. CSS Framework.
Nah, ini panjang umur.
Iya, ada panjang umur.
Nah.
Pre-written CSS.
Nah, pas itu, maksudnya
kalo mungkin yang
sekarang kan kita bayangin kayak udah
berupa library yang gimana yang canggih
banget ya. Kalo ini mah,
pas itu cuma bentuknya pre-written
CSS. Jadi, kita ada the class
name. Tapi, nggak ada yang
kayak, kalo misalnya tailwind,
sekarang kan kayak udah lebih canggih kan, bisa
bisa, apa, generate
berdasarkan yang kita pake doang, bisa
generate on the fly, pake arbitrary
value, misalnya yang dipake square
bracket, itu ya.
Nah, kalo dulu mah belum secanggih itu
beneran cuma, apa?
Beneran cuma class name yang
bisa dipake aja.
Iya, tapi dulu juga itu sudah sangat membantu.
Ya, Framework, Framework.
Kayak, itu deh pada
semua berantakan pada bikin class name-nya
sendiri-sendiri.
Iya, betul.
Tabak-tabrakan.
Ya, justru, apa,
Bootstrap ini salah satu yang
mempelopori itu tadi
tablet-tablet tadi.
Jadi, berdasarkan class name-class name
yang ada di Bootstrap, kita ganti-ganti
CSS-nya, warnanya dari merah jadi biru,
dari biru jadi kuning,
disesuaikan, akhirnya jadi satu
tablet-tablet sendiri, orang tinggal download,
tinggal download atau beli
gitu kan.
Terus dicemplungin, udah jadi berubah
warna, berubah tampilan, mungkin
yang tadinya button-nya kotak,
kita mau ganti yang pakai
radius, itu juga
bisa memanfaatkan
apa, kostumisasinya dari Bootstrap
foundation dan temen-temen.
Dulu ada helper-helper-nya juga buat
CSS.
Ada source code-nya kan,
dulu masih pakai CSS.
Yang harus dikompile dulu, baru bisa
dipakai kan.
Pake Google sama Grunt, atau Grunt.
Dan
berbarengan dengan munculnya
Bootstrap ini,
mungkin ada yang
nggak tahu juga, Bootstrap ini awalnya
muncul dari Twitter.
Twitter, Twitter Bootstrap dulu namanya,
dibikin in-house Twitter.
Untuk produknya
mereka sendiri.
Akhirnya lepas ya, akhirnya apa,
jadiin open source project
setelan-setelan.
Terus akhirnya jadilah Bootstrap, awalnya namanya
Twitter Bootstrap.
Iya, terus abis itu
Twitter, nggak ya?
Udah, kayaknya udah independent deh.
Maksudnya nggak, nggak
nggak dibawah Twitter.
Iya. Kayaknya
kalau nggak salah ya, kalau nggak salah dulu
dia open source itu,
yang bikin Bootstrap itu kayaknya
entah dia masih bekerja untuk Twitter
atau dia baru resign atau apa
terus dia bikin gitu, mungkin ya, nggak tahu.
Detailnya sih nggak tahu.
Nah, si Bootstrap dan Foundation
sendiri, mereka akhirnya bikin
untuk memudahkan kita bikin
column grid istilahnya.
Selain ada grid system tadi,
di Bootstrap sudah disediakan.
Ini dia pakai column grid
system, nah ini salah satu yang
mempopularkan juga kali ya.
Grid-grid ini ya.
Jadi kalau misalkan kita
mau 2 column,
ya udah, kita pakai
ada
Nah, ini dia.
Tapi sudah mulai ini ya,
sudah mulai
kompleks, gara-gara kita harus pakai
yang small,
ada yang MD, MD.2
gitu-gitu kan, untuk
reservoir.
Karena
di saat yang sama, maksudnya, ukuran HP
juga kan smartphone, udah bukan cuma
iPhone doang kan, udah nambah banyak.
HP Android mulai banyak.
iPhone juga, apa,
besarnya juga udah mulai lain-lain.
Tablet juga udah muncul, ada apa,
Fablet ya,
antara phone sama tablet.
Size viewportnya makin-makin-makin
jadi ada
udah macam-macam breakpoint. Ini bisa
dikustomize juga kalau nggak salah,
kalau di versi SCSS-nya.
Oke, ini contohnya.
Jadi panjang begini ya tulisannya ya.
Kalau sekarang sih lebih panjang ya, kalau pakai Tailwind ya.
Tapi gini aja udah
pusing ya.
Nah, ini yang tadi kita bahas kan, harus
diwrap sama satu div sendiri,
parent div class row.
Ngebatesin. Terus, itu tuh
clearfixnya
tadi, apa, untuk
memastikan float-nya nggak
kesamping tapi jatuh ke bawah.
Ini harus ada div sendiri
yang isinya kosong, untuk
supaya dia ini nggak ke kanan.
Nggak nempel kesini ya.
Jadi dia ke bawah.
Jadi ini kayak, apa ya,
kayak break ya,
BR gitu ya.
Jadi misalnya kalau sampingnya isinya panjang banget,
kan by default, float akan naikkan
ke atasnya mengisi tempat yang kosong.
Nah, ini memastikan nggak
terjadi kayak gitu ya.
Mastikan jatuh ke bawah.
Nah, setelah kolom-kolom
ini baru muncul Flexbox.
Akhirnya.
Akhirnya.
Flexbox muncul.
Flexbox ini adalah, ini ya,
one dimensional.
Ya, satu dimensi.
Dalam bentuk
row dan column.
Atau column, pilih salah satu.
Iya.
Jadi
ditujuannya adalah untuk
menyelesaikan masalah
positioning dan float.
Mulainya dari 2009,
working draftnya
baru dipublish di 2013.
Masuk browser tuh
tahun berapa ya?
Ini kan working draft
publish 2013 kan nggak mungkin langsung
semua browser nge-adopsi
ke bar, jadi can I use?
Holy grail layout apa ini?
The problem was
so great, it became like trying to
find the holy grail.
Oh, ini. Kita nggak bisa
bikin ini jadi ini kan?
Full ke bawah.
Yang penting itu sebetulnya
harus pakai JavaScript-nya sih
dulu, jadi kita ukur kotak kuningnya
terus manual
link, kasih style height-nya ke
kiri kanannya tuh.
Betul, karena si flex ini kan dia
naturalnya adalah mengikuti content kan.
Jadi kontennya segini ya udah
segini dia, dia nggak bakal panjang ke bawah.
Ya bukan flex doang sih, float
juga kayak gitu kan.
By default ya
ukuran intrinsic itu namanya
di CSS, ukuran intrinsic kan
kita nggak tahu tuh mau panjangnya ke bawah.
Ya, kecuali kita tahu fix-nya
berapa gitu panjangnya kan.
Kita tahu berapa pixel ya udah,
pakai itu, cuma kan karena nggak tahu
ngikutin isinya, kan dia nggak tahu.
Nah, si element itu nggak tahu
bahwa expectasinya karena
dia berada dalam sebuah
row yang berisi 3 kolom
terus harus ngikut
tinggi dari
parent-nya, si element itu kan
nggak ngerti sampai
situ, nggak ngerti dia harus ngikutin
ukuran parent-nya. Sampai
ada flex, nah pas ada flex work
bisa diatur biar kayak gitu tuh.
Yes, jadi
ada direction-nya, kita mau pakai
row, bisa reverse juga,
mau column,
dan lain-lain ya, ini dia
sifatnya tadi ya, one-dimensional.
Kalau
di cek flex-base, ternyata
2012-2013 udah masuk
sebagian browser loh, lumayan juga.
Iya, jadi udah ada yang
eksperimen mungkin ya.
Nah, baru kemudian
kalau flex-box itu kan
terus dikit, eh
kebanyakan yang berada
direction flow, eh
flow direction.
Flex direction.
Kalau misalnya
1, 2, 3, 4, berarti dia
ke bawah kan ya?
Nggak, something.
Kalau udah kecil.
Nggak muat.
Kebawah kan?
Kebawah atau mengecil?
Mengecil.
Mengecil.
Atas ngomong yang
flex direction row kan,
pokoknya dia cuma bisa satu dimensi,
dia cukup pintar buat turun sendiri ke bawah.
Oh, oke.
Itu satu dimensi maksudnya itu ya?
Oke.
Nggak lama setelah itu muncul grid.
Nah, orang kan suka bingung
antara, ini kita baru
belajar flex, kita udah bisa bikin
apa namanya, layout yang
keren-keren, yang lebih sederhana
dengan flex,
kemudian muncul grid.
Bedanya apa?
Yang luik, itunya
penciptanya CSS sendiri dong.
Siapa itu? Hartcon William Lee.
Birdboss and Hartcon William Lee.
Namanya unik sekali ya.
Birdboss itu
ada hubungan servernya sama Westboss nggak ya?
Yang disetak sih.
Nggak kayaknya.
Itu namanya Hugo Boss.
Ha, Hugo Boss.
Eh, nggak boleh.
Episode ini disponsori
oleh Hugo Boss.
Microsoft actually.
Nah, yang pertama kali bikin
grid layout justru
Microsoft di IA-10.
IA-10, coba bayangkan.
Kalian...
dihina-hina ya.
Ternyata ya.
Yang pertama kali
punya konsep.
Jadi mereka langsung ya, implementasi
langsung, nggak pakai
consortium-consortium apa-apa gitu.
Iya, kan dulu suka-suka, itu
masih agak-agak. Dan paketnya pakai
vendor prefix juga. Jadi mereka mikir,
"Ah, kodama tuh nggak pengaruh ke
browser lain." Jadi
pakai MS-
display grid atau
apa lah. Tapi maksud saya, justru
menginspirasi itu, menginspirasi
para web
developer dan designer.
Wah, ini experimental
layout lab.
Bisa miring-miring begini ya.
Pakai grid.
Nggak aksesibel ini.
Iya, ya kan cuma buat contoh doang.
Nah, kalau tadi
si Flexbox itu one-dimensional,
kalau CSS Grid itu two-dimensional.
Jadi bisa menghandle
column dan row.
Column dan row ya, udah sesuai apa ya,
kayak sesuai
konsepnya grid yang
di... apa ya,
print dan print graphic design.
Ya, grid kan
normal ini ada di tersamping, maksanya
column, ada row.
Kalau sebelum-sebelumnya, ketahuan-ketahuan kan
pasti mau bisa satu-satu,
mau bisa saling-salu aja, atau sulit
lah. Maksudnya nggak
sulit di-custom,
column dan row sekaligus.
Kalau grid is, column container
nya bisa mengatur column
dengan cara yang
lebih flexible.
Ya, kalau perbedaan-perbedaan,
perbedaan utamanya itu sih.
Itu gua utamanya.
Pekan putus-putus ya?
Wah,
gilanya...
sudah bisa,
sudah kedengeran, tapi
gambarnya ngefreeze.
Ya.
Beberapa
property CSS yang
bisa digunakan untuk grid, tentunya
display grid dulu, di-set dulu, dipastikan
bahwa container atau div
atau apapun itu adalah grid,
kemudian kita bisa pakai grid template
column dan grid template rows.
Contohnya ada nggak di sini?
Nah ini ya.
Jadi kita pakai template
grid template column atau grid template
row, itu kalau
kita menentukan secara
spesifik, misalnya kita
ingin lebarnya berapa, kalau misalnya
kita pakai grid template column
atau grid template row,
pilihannya men-speksifikasikan
satu persatu lebarnya
berapa atau tingginya berapa,
atau bisa
gitu itu.
Iya.
Ini teman-teman bisa
lihat-lihat sendiri ya.
Bisa baca sendiri, lebih dalam.
Contoh-contohnya cukup
comprehensive di sini, jadi bisa dicoba-coba
untuk
berbagai properties-nya.
Ada contoh, oh ada animation lagi ya.
Learning CSS Grid.
Ini banyak ya.
Banyak sekali ini, lengkap.
Pasti overwhelming sih.
Banyak sekali.
Cuma ya
kalau penasaran di
tumpuk-tumpuk satu.
Oh ada ini lagi, satu-nya grid garden.
CSS Grid Garden.
Oh ini kayak frog ya?
Iya itu temennya.
Flexbox frog.
Itu kan ada link-nya dulu.
Iya.
Dulu ada yang terkenal ya.
Flexbox frog.
Flexbox.
Kita belajar flexbox dengan
mengatur kodok-kodok.
Dengan mengatur kodok-kodok kan.
Habis itu
itu saudaranya temennya.
Saudaranya temennya membuat
CSS Grid Garden ya.
Yang bikin satu orang mungkin ya, kelihatannya.
Mau belajar ya? Mau belajar ini?
Beneran? Water.
Ini water kan. Water mau disuruh
dipindah kesini kan.
Gimana caranya? Ya silahkan.
Iya.
Coba sendiri.
Atau yang praktikal, misalnya Tailwind kan
udah ada, kalo yang udah pake Tailwind
kan ada utility-nya buat grid.
Dia liat aja contohnya kayak gimana.
Bandingin aja, oh,
kalau kodanya gini, coba buka di DevTools.
Kan muncul tuh CSS-nya.
Oh ternyata CSS-nya gini.
Hmm.
Itu contoh yang praktikal ya, bisa langsung diliat.
Ya.
Dan DevTools juga, apa?
Itunya, tools-nya udah oke banget sih.
Buat Flexbox sama grid.
Ya.
Nah tadi, apa,
menjawab pertanyaan, kapan
perlu, kapan kita menggunakan grid,
kapan kita menggunakan
Flexbox.
Itu tadi ya, perbedaannya yang satu
one-dimensional, yang satu lagi
multi-dimensional,
dua dimensi, bisa kolom dan row.
Kalau Flexbox hanya satu
kolom atau satu row aja kan.
Ini kan.
Hmm.
Contohnya di sini,
dia kasih contoh juga ya, ini ya.
Wrapper, one, two, three, four, five.
CSS-nya adalah
Flex, dia akan jadi
one, two, three, four, five.
Kebawah.
Bisa kalau pakai FlexWrap.
Tapi by default nggak?
Kalau by default nggak ya, kalau nggak pakai ini ya.
Hmm.
Ini, oh, ini
bisa diliat dari sini juga ya, oke.
In the image, you can see two items
have wrapped onto new line, this item
are sharing available space, not lining up
underneath the item above. This is because
when you wrap, Flex item is new row
or column, when working with column
is independent Flex line
in the Flex container.
Hmm.
Same layout with CSS grid.
Jadi ini masih sama, one, two, three, four, five.
Kita menggunakan grid, grid template-nya
repeat tiga.
Satu FR ini, satu
FR itu panjangan apa?
Free, free space.
Free space atau fraction?
Friction mungkin ya. Friction.
Friction apa fraction? Artinya apa?
Friction pecahan.
Masuk apa sih fraction?
Iya, jadi dia minta
ini supaya jadi
maksimum tiga ya.
Macam ini.
Ulang tiga kali.
Ulang tiga kali.
Apa?
Dua fraction, satu. Seperti tiga lah ya.
Loh mana?
Kok beda?
Ini ya.
Gak pakai grid dia.
Hah?
Itu pakai grid?
Enggak, yang disini auto-play.
Mana gridnya?
Di bawah.
Oh, wrapper. Oh iya. Sorry.
Mana gridnya?
Nih, kalau saya bikin dua gimana?
Jadi dua.
Coba scroll ke bawah.
Nah, jadi dua kolom kan.
Kalau satu dia jadi kolom aja.
Satu kolom.
Tapi dia gak otomatis
yang paling bawah itu kan
pas lagi tiga kolom
isinya cuma lima.
Yang kelima itu gak otomatis
ngisi tempat yang tersisa ya.
Satu fraction.
Kalau saya bikin dua fraction
jadi gimana?
Sama aja sih.
Ini apa?
Kecuali gini, coba grid template
kolomnya, gak pakai repeat
tapi gini misalnya, dua fraction
satu fraction, coba.
Dua FR.
Spasi.
Dua FR. Oh iya boleh.
Oh dua.
Ya bebas.
Jadi ini dua, ini dua, ini satu ya?
Dua, dua, satu.
Ini satuan ya, kalau misalkan kita mau
kayak gini juga boleh kan.
Sama aja jadinya kan.
Percentage ya, seperti percent ya.
Jadi ini diatur
untuk kolomnya,
kolom pertama dua,
dua lah ya, jangan dua puluh ya.
Dua, totalnya berarti
lima gitu kan.
Nanti kita bisa atur juga
untuk baris,
untuk row gitu.
Bisa tambah ini juga.
Karena grid itu kan bisa ada
marginnya, apa namanya?
Gap.
Gap, gap, gap, grid gap.
Flex maupun
grid, sama-sama bisa pakai gap
sekarang. Udah ya, ada di semua
roder. Gap aja, gap.
Udah gak ada flex gap,
grid gap lagi. Tapi ada
row gap sama kolom gap. Oh iya, bisa.
Nah, kalau itu
khusus grid, karena grid kan
dua akses ya.
Jadi bisa spesify row gap
sama kolom gap.
Ini satuannya apa, 20 piksel?
Ya, berapa sepiksel, rem?
Oh, rem, oh iya.
Dua rem, oh,
gede banget.
Nah, sekarang
bedain row gap sama
kolom gap.
Row?
Row gap.
Ini, grid row gap ya?
Gak, row gap aja.
Bisa, sudah bisa dipakai dua-dua.
Oh, sudah bisa dua-duanya.
Iya.
Kalau flex ya, gak bisa row gap, grid gap, kan
flex cuma satu dimension.
Kolom?
Kolom gap, coba yang besar.
Ini dua-duanya sama ya, berarti ya?
Sama.
Kolom piksel.
Mau bikin 200 piksel?
Aduh.
500.
Kepotong ke bawah, oh,
kegeser ya, kegeser.
Wah, di luar kotak.
Kasian banget.
Dia di luar kotak finalty.
Jadi kayak itu, memes
CSS modules.
Keluar kotak.
Itu kan running joke
nya komunitas CSS deh.
CSS is awesome, itu lo yang sering
di swipe.
Text safe luar kotak.
Oke.
Terus kita mau bahas apa lagi?
Ada yang perlu dibahas lagi?
Oh, ini ada
flexbox zombie. Ini buat apa nih?
Game juga ya, permainan juga ya?
Game juga? Iya, sama.
Buat belajar CSS.
Yes.
Wah, lucu-lucu sekarang ya.
Mau berbicara juga.
Ini mantep. Itu belajar.
Apa tuh?
Yang habis dari ini, kok mau belajar itu?
Oh, mantap.
Nah, kalau yang si zombie
yang bikin itu, tau gak sih?
Yang buat belajar PWA
Service Worker.
Service Worker.
Ada game, pokoknya tentang Warrior gitu deh.
Oh, iya, iya, iya. Tau.
Tau kan? Tau kan? Coba lupa namanya.
Yang bikin di Google.
Ini?
Oh.
Devgedes.
Tapi bayar?
Kok ada 179?
Iya, namanya
Rahasa Market.
Ini harusnya harganya segini,
tapi saya kasih gratis.
Luar biasa. Apa?
Minggu depan harga naik.
Ya, minggu depan. Hari Senin.
Oh, hari Senin harganya naik.
Ada lagi tuh, satu lagi tuh
GridCreators.com
GridCreators.com
Ya.
GridCreators.
Oh, modelnya mirip-mirip ya.
Game-game juga ya.
Kalau yang
serius,
itu pengen yang serius,
course-nya WazeBoss.
Yang CSS GridBlock.io.
Oh iya.
Itu menarik.
Keri kan?
Keri.
Oh iya, punya Pak Sandika juga bagus.
Gratis.
Yang punya Pak Sandika di YouTube.
Saya belajarnya dari video ini.
Video Grid.
Tapi,
yang menariknya,
nggak tahu alasannya kenapa,
React Native
masih pakai Flex.
Untuk layout.
Ya, nggak masalah memang.
Maksudnya, dia by default,
React Native itu kan
kalau untuk CSS-nya kan,
ini ya, apa,
ada yang bisa, ada yang nggak lah ya,
kan beda platform kan.
Jadi mereka...
Eh, React Native itu dibuild kan?
Kalau dibuild, dia jadi apa?
Jadi JavaScript sama CSS juga?
Enggak.
Dia jadi native.
Jadi dia
pakai apa ya namanya ya?
React Native itu.
Ada semacam polyfilm gitu.
Ada semacam transpiler
gitu.
Ada library namanya apa gitu.
Dia pakainya,
konsepnya pakai itu.
Flex. Sementara kan kalau di mobile,
baik iOS atau OpenArea kan nggak pakai
flex atau grid
atau apa kan.
Jadi mereka memanfaatkan
Flexbox untuk templatingnya.
Eh, untuk, sorry, untuk
layoutingnya.
Tapi berarti itu kan kayak
konsepnya doang kan, sebetulnya.
Harus di-translate. Entah apapun itu
yang di mengerti oleh si
engine native-nya itu kan.
Betul.
Nah, kalau teman-teman mau...
Kita episode React Native apa ya?
Invite orang yang ngerti.
Gue nggak ngerti sama sekali gitu.
Nanti,
apa, GDI Flutter
nanti minta gabung lagi.
Minta.
Versus lah, versus.
Kira belum pernah belajarkan fast kan ya?
Belum.
Nah, kalau teman-teman tertarik
mau belajar grid tapi yang
praktikal, ini ada video
yang luar biasa bagus nih dari
yang kita omongin minggu lalu. Mas Yohan.
Nah, jadi
di video ini
kita belajar bikin
layout-nya Twitter dengan menggunakan
grid.
Ini menarik banget.
Eh, ada komen gue.
Gak, ada
komen.
Oh, kamu nonton? Oh iya, ini dia.
Ada spasinya kayaknya. Satu rem.
Gak inget komen apa.
Bahkan nggak inget sama video itu sih.
Ada flex juga ya, belajar flex juga ya.
Kalau ini course,
online course, kalau tadi
video Pak Sandika Gali,
itu bentuknya playlist YouTube ya.
Oke.
Ada lagi mau dibahas?
Eh, tadi ada yang nanya.
Oh iya, apa tuh?
Apa tuh yang di-start tadi?
Oh, yang di-start. Iya, iya, iya.
Ini framework buat CSR.
Kalo CSR,
kalo CSR sebetulnya nggak perlu
amat pake, eh,
iya kan, bukan framework.
Oh, framework ya.
Kan, kalau dulu kan
Create Track App.
Itu starter juga.
Iya, bukan framework sih ya.
Bukan framework ya. Kalau framework
udah pasti Next.js kan. Udah gitu kan
semenjak
apa,
beberapa bulan yang lalu, Create Track App
sudah tidak di-feature lagi,
di-dokumentasinya React.
Bahkan nggak recommended gitu. Cuma, ya udah,
kalo pengen create yang simple
Single Page App, ya udah,
create sama feed aja.
Itu udah cukup. Tapi kan, ini balik lagi,
kita pengen pake framework
buat apa sih? Misalnya buat SEO.
Misalnya ada yang harus,
eh, apa sih, SR ya.
Ya,
SEO kan di shellnya, shell HTML-nya
bisa kita... Kalo mau bikin itu dashboard,
bikin internal tools
yang nggak butuh SEO.
Itu
mungkin feature framework
routing ya.
JQuery plus
Backbone. JQuery sih.
Nggak, dia nanyanya itu kan, React
CSR. React framework.
Oh, CS, React ya. Terus ya.
Client side rendering. Ya.
Pertanyaannya adalah React CSR, sebetulnya
ya, kalo nggak ada keperluan
tertentu banget, ya itu feed sama
React aja udah cukup.
Kalo buat
routing, pake React
Router lah. Eh, apa tuh yang dibikin?
Ya, React Router. Benar, React Router.
Router kan betul namanya, React Router.
Kalo cuma
untuk routing, ya itu React,
React Router, feed.
Udah, kan CSR ya.
Pure CSR.
Nah, kalo mau yang lebih...
Kalo langsung ke Next.js, kayaknya
terlalu overwhelmed deh, ya.
Tapi kebutuhannya juga emang cuma CSR.
Kebutuhannya nggak banyak macam-macam.
Kalo cuma buat apa?
Buat routing doang, di React
ada, gitu. Jadi nggak usah langsung
buruk-buruk ke Next.js juga, gitu kan.
Karena konsepnya juga banyak hal-hal
yang berbeda, yang
mungkin kalo kita baru belajar React,
bingung kan. Oh, ini kok
pake folder, terus foldernya harus
pake kurung siku, gitu-gitu kan, bingung ya.
Kalo kita baru belajar React, emang-emang
cocoknya CSR sih.
Biasanya sih, pake VT yang paling
sederhana, ya.
- Saya... - Terus?
Bicara bikin aplikasi
offline
pake web,
elektron, dan
jaman itu belum ada React
ya kan, pakenya jQuery
dan Breakable.
Sudah reaktif, loh.
Reaktif, maksudnya
kalo diklik apa,
datanya ke update,
gitu, terus ada search-nya,
dan single-base
application.
Karena jalannya di ini,
kan. Jalannya di elektron.
- Tenstack ini apa, nih?
-
Itu tuh state management,
cuman kayak wow banget lah,
powerful banget. Jadi maksudnya, ya,
keliatannya buat simple routing
juga bisa deh, integrasi
routing-nya exactly gimana, gatau sih, cuman
itu bisa jadi alternatif juga,
jadi ga usah pake framework yang kayak
Next.js React.
Ini kalo ngomongin React.csr,
bisa pake library itu.
Itu bukan framework juga sih.
- Ya.
Ini ya contohnya, ya.
Silahkan diliat-liat sendiri, ya.
Kayaknya menarik, ya.
Ini Bayu mengembari
Ionic. Kita bisa bahas multi-platform, ya.
Ionic,
React Native, Flutter.
Tapi yang menarik, mungkin kita akan bahas
di... - Ionic itu dulu
pernah hampir pake, cuman beneran lupa
kenapa deh. Kayaknya jaman masih ada
Opera Mini.
Pas belum bisa pake.
Ada yang dari Vue.js apa namanya?
Ada itu juga, kan?
Dari Vue.js yang
multi-platform juga.
Lupa namanya.
Nah,
kapan-kapan kita bahas
multi-platform.
Oh, oke. Ionic itu
bukan mobile, ya.
Bukan hybrid, ya.
Web Component.
PWA, ya.
Ya, pokoknya web lah.
Bisa di-compile jadi, ya, JavaScript biasa.
Lupa-lupa inget sih.
Ya, ya, ya.
Yang bawalnya Vue.js apa ya namanya ya?
Buat ke mobile
gitu. Ada gak ya?
Vue Native.
Gak kreatif gitu, pasti namanya.
Ada Vue Native beneran?
Ada, ada, ada.
Jangan bilang ada soal framework.
Kwasar, Kwasar.
Kwasar Framework.
Kwasar Framework.
Nah, ini bisa kita
bahas, nih. Untuk...
Kapasitor. Kapasitor, ya.
Kapasitor apa Kwasar?
Nih.
Oh, ya, ya, ya.
Itu beneran hampir
pernah pake gara-gara itu deh.
Oke, oke. Menarik, menarik.
Ini juga ada kapasitor, ada
macem-macem ya. Ada lumayan banyak yang
gini ya.
Kayaknya kalau untuk dokumentasi,
banyak pake template
begini dari mana ya?
Template? Bentuknya kayak gini?
Iya, Ionic Framework juga begini
template-nya. Bukan saja.
Mungkin Native Starter buat dokumentasi.
Iya. Atau jadinya Dempores,
oh, ini bawa, oh, ini open source.
Karena dia masih
Ionic juga.
Kapasitor masih dibawa Ionic.
Ini kayaknya DocuSaurus deh.
Coba ya.
Oh, iya. Kayak
Penclap-penclap.
Kayaknya DocuSaurus deh.
Oh, kan? Bener kan?
Iya, betul. DocuSaurus.
Nah, sama tuh.
Ada sidebar-nya? Oh, iya. Ada sidebar-nya.
Ada. Sama. Buka DocuSaurus.
Buka Docs.
MacuSaurus, buka Docs. Iya, coba.
Get Started. Oh, kan?
Oh, iya. Ketemu, ketemu.
Hacker.
Mystery Show.
Oke.
Anyway, kita udah ngelantar ke mana-mana
sebelum lebih ngelantar lagi.
Tapi itu layout. Masih ada layout-nya
DocuSaurus template.
Iya deh. Baiklah.
Itu juga menarik.
Itu 2 topik menarik yang
bisa kita dapat malam hari.
Di akhir episode ini.
Yang pertama adalah hybrid,
ionic, dan temen-temennya.
Kemudian yang kedua adalah
tools untuk membuat dokumentasi.
Banyak, kan?
Oh, iya. Tools untuk
bikin dokumentasi.
Oke. Jadi, lumayan.
Terima kasih banyak buat inspirasinya
untuk episode kali ini. Kita udahan dulu.
Kita jumpa lagi minggu depan
di Selasa malam jam 8 malam.
Yang belum subscribe, silahkan
subscribe. Yang mau
bertanya, atau
mau kasih topik, atau mau
kasih nodong narasumber,
silahkan ke sana.
kesana.in/ngobroinline
kesana.in
kesana.in/ngobroinline
Oke. Sekian dulu. Terima kasih banyak.
Sampai jumpa
minggu depan
di hari Selasa jam 8 malam.
Bye-bye.
Deskripsi asli dari YouTube
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://ksana.in/ngobrolinweb Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
13 Sep 2023
Ngobrolin Framework
Episode ini kedatangan seorang engineer yang kini bekerja di GovTech di kementerian pendidikan, dan salah satu pesan sam...
16 Agu 2023
Ngobrolin Performa CLS feat Jessica Cecilia
Episode ini kedatangan Jessica Cecilia, front-end engineer di Tokopedia, dan sebagian awalnya berisi cerita di balik lay...
14 Jun 2023
Ngobrolin SVG
SVG dibahas sebagai format gambar yang berbeda jenisnya dari JPEG atau PNG: ia bukan kumpulan titik warna melainkan rang...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .