Hai hai kawan
Kembali lagi ke blogku, makasih masih setia baca blogku hehee
kali ini materi yang akan aku share dari kak Windi yang bekerja di PT.8villages indonesia as front-end developer untuk produk regopantes.com.
oke... kita mulai ya, pertama yang akan dibahas adalah salah satu pertanyaan dari teman kita juga, dia berrtanya beda dari Front end dan backend dev.
dan jawaban dari kak Windi yaitu "kalo dikantor gue sih gue kek maen tampilan trus muncul data
dari api yang dikasih backend gitu sih. Ibaratnya kalo konsep MCV MC itu backend Vdan sedikit C itu
frontend.
Boostrap adalah kerangka HTML, CSS dan JS paling populer
untuk mengembangkan website responsif yang di desain untuk siapapun dan
dimanapun. Dengan Bootstrap kita dapat membuat website lebih cepat dan lebih
mudah. Bisa digunakan untuk para pemula, pengguna tingkat lanjut atau bahkan
project kelas dunia. nah gue pertama kali gue belajar sama bootstrap 3 sekarang
gue mau kasih perbedaan nya.
yang pertama
Bootstrap mengganti sumber file CSS nya, Bootstrap 3
menggunakan LESS, sedangkan Bootstrap 4 menggunakan SASS. Untuk beberapa
pengguna di Indonesia mungkin kurang menyenangi ini termasuk gue, karena
menurut gue SASS agak sulit dipahami dibanding LESS. Tapi banyak juga yang
menggunakan SASS, seperti yang kita tau hampir semua tema menggunakan SASS
karena lebih powerful (kaya fitur) dibanding LESS.
gue pun baru belajar SASS ini pas kerja
yang kedua
Bootstrap merubah ukuran font default (global), Bootstrap 3
menggunakan 14px sedangkan Bootstrap 4 menggunakan 16px. Jadi, ketika membuat
tulisan (misalnya postingan) akan terlihat lebih besar dari sebelumnya. Perlu
sesuaikan lagi px nya jika ingin diperkecil.
nah ini ukuran H1-H6 jadi berubah di bootstrap 3 dan 4
yang ketiga
Unit CSS yang utama atau yang primary sekarang menggunakan
rem, sedangkan di Bootstrap 3 menggunakan px. Jika bergelut di dunia web desain
tentu pasti memahami apa itu rem, jadi sekarang jika melakukan perubahan font
(px) harus dilihat rem pada komponen bersangkutan (pembungkusnya) terlebih
dahulu.
yang keempat
Default font Bootstrap 3 adalah Heltvetica Neue, Helvetica,
Arial, dan Sans-Serif, sedangkan di Bootstrap 4 defaul font-nya akan
menggunakan font sistem dari pengguna dengan fallback Helvetica Neue, Arial,
dan Sans-Serif. Jadi, jika Bootstrap tidak berhasil membaca font sistem
pengguna, ia akan menggunakan font fallback tersebut.
aku masih ga ngerti bedanya SASS sama LESS
kalian tau sass dan less itu apa?
Selama make bootstrap slama ini blum pernah make sass atau
less
CSS preprocessors. isn't right?
CSS Preprocessor, tools untuk memudahkan kita untuk membuat
sebuah file CSS yang terstruktur dan terorganisir, tanpa melalui proses yang
rumit.
biasanya nulis css kalian termasuk yang mana nih? inline,
embedded atau linked
biasanya linked
Kadang inline kalau coba-coba
kalo di dunia kerja sih gaakan kalian nulis inline atau
embedded bisa diomelin karna jorok dan kalian bakal puyeng sendiri
Aku masih buta di front end hehe
CSS preprocessor tuh sass sama less?
Bedanya apa ka
tapi ada beberapa case sih yg aku masih nulis inline haha
Linked kalau bukan variable dan inline kalau variable
misalnya user nentukan style sendiri di form kita
Apa pengaruhnya ke web klw nge-reference scara online kayak
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
n mana yg lbih bagus dbandingin nyimpen source file nya di
local?
gue sih ga pernah pake less ya, karna pas kerja pake sass.
kalo di sass gini misal lo punya warna lo bisa deklarasiin
dulu warnanya
$putih = #ffffff
nah si $putih ini kalian bisa taro di class yang kalian mau
isi putih.
penulisan juga beda sih, gue ga bakal jelasin terlalu jauh
tentang sass bisa 2 hari :(
http://sass-lang.com/ bisa diliat disini ya
kalo cdn gini bikin lama ga sih? setau gue bikin lama deh.
lebih saran nyimpen dilocal sih.
tapi gue kalo font-awsome sih pake cdn :"D
kalo internet ga bagus dia bakal kotak doang :"D
pernah pake col-md-offsite-x ga di bootstrap 3?
Sebelumnya di Bootstrap 3 harus menggunakan class
“col-md-offset-x″ untuk membatasi kolom, tapi di Bootstrap 4 sudah tidak
memerlukan col- lagi, cukup gunakan offset-md-x saja.
yang ke enam
Di Bootstrap 3 tersedia 4 sistem grid yaitu col-xs, col-sm,
col-md, dan col-lg, sedangkan Bootstrap 4 memiliki 5 sistem grid yaitu col-sm,
col-md, col-lg, col-xl, dan col-*. Bootstrap menghilangkan col-xs untuk
perangkat super kecil (extra small) karena sebetulnya sudah bisa di wakilkan
oleh col-sm, atau bisa juga menggunakan col-* sebagai definisi dari “semua
perangkat” tanpa harus menentukan ukurannya.
yang ketujuh
Pada Bootstrap 3 hanya perlu memasukkan class “input-lg”
(contoh) untuk menentukan ukuran bidang form, tapi di Bootstrap 4 perlu
menulisnya lengkap langsung bersama class from control, menjadi
“.form-control-sm” (contoh).
yang ke delapan
Sebelumnya di Bootstrap 3 bisa menggunakan feedback ikon
yang disedikan oleh Bootstrap (glyphicons) misalnya .has-success (contoh untuk
validasi berhasil berwarna hijau) dengan ikon “glyphicons glyphicons-envelope”
(ikon amplop), tapi di Bootstrap 4 validasi / feedback ini ditiadakan. Perlu
custom forms jika ingin menggunakan validasi.
yang ke sembilan
Bootstrap 3 dapat menampilkan horizontal form dengan
menggunakan .form-horizontal, Bootstrap 4 tidak dapat menampilkan horizontal
form (.form-horizontal dihilangkan dari sistem). Jika ingin menampilkan
horizontal form di Bootstrap 4, mungkin bisa dibantu dengan menggunakan grid
layout untuk form tersebut dan form label.
yang ke sepuluh
Sebelumnya di Bootstrap 3 untuk menampilkan tombol radio
menggunakan .radio / .radio-inline, dan menggunakan .checkbox /
.checkbox-inline untuk menggunakan kotak centak. Ada sedikit perubahan di
Bootstrap 4, .form-check / .form-check-label untuk radio dan .form-check-input
/ .form-check-inline untuk kotak centang.
sisi powerfulnya dari mana si bootstrap 4 ini? sejujurnya
kalau dari penjelasan2 yang diatas, berarti ngodingnya lumayan juga effortnya
haha jadi gimana gitu kalau mau moveon ke bootstrap 4
https://webdesign.tutsplus.com/articles/twitter-bootstrap-101-trimming-file-size--webdesign-7532
wah ga pernah coba sih biasanya cssnya di compress aja, jadi
kaya bootstrap.css.min gitu
ini sebenernya minta motivasi juga sih buat moveon ke bootstrap
4. karena logika aku, pasti tiap pengembangan, perubahan versi, ada banyak
kelebihan didalamnya misal kalian kurang margin atau padding tinggal nambahin
class p-1 atau mb-1
gausah nulis css lagi margin-botton :10px;
wah, ini enak nih
trus kalo mau bikin card udah ada, gantinya panel di
bootstrap 3
yang gatau card
Card itu biasanya di pakE buat apa kak?
ini kotak2 ini pake card walau custom ya dikit
trus trus ceritain dong, yang mesti kita perhatiin waktu
convert dari 3 ke 4. ya biar cepet developmentnya, karena semua projekku pake
bootstrap 3 euy 🙈
apa ya :D paling kalo pas migrasi sering ngomong gini
"dih parah udah ada classnya masa enak bgt"
o ya ka, https://jsfiddle.net/ udah bisa baca bootstrap 4?
jadi lebih baik cepet2 migrasi ke boostrap 4 ya?
class warna juga banyak yang baru
.text-muted, .text-primary, .text-success, .text-info,
.text-warning, .text-danger, .text-secondary, .text-white, .text-dark and
.text-light:
coba kasih contohnya boleh ka? dikiiiiiit aja...
implementasinya gimana hehe
boleh kok bentar yak ngilang dulu
<span class="border
border-primary"></span>
oiya manage layout juga bisa pake flexbox gitu.
buat bikin kotak cobain deh
Mbak Windi buat web regopantes.com 100% pakai bootstrap ya?
ini pake bootstrap dia
pernah pake pull-right pull-left?
kalau untuk prosesnya seperti regist itu pakai php biasa
atau ada tambahan framework lain ?
masih pake codeigniter sih kita, tapi untuk tahun ini
rencana mau pindah ke react :"D
itu di ganti float-right float-right
Sebelumnya di Bootstrap 3 perlu menggunakan
.navbar-fixed-top / .navbar-fixed-bottom untuk membuat bar navigasi menetap di
atas / di bawah, sedangkan di Bootstrap 4 cukup gunakan .fixed-top /
.fixed-bottom saja.
Bootstrap 3 tidak mendukung .btn-secondary melainkan hanya
.btn-default, .btn-info, dan lainnya, Bootstrap 4 mendukung .btn-secondary,
.btn-light, .btn-dark, dan menghilangkan .btn-default.
👆lanjutan dari yang
warna2 gue kasih tadi
kaya kotak ini ga cuma "border border-primary" aja
bisa kalian ganti pake class bawaan bootstrap 4
nah kalo card kalian mau taruh di tengah nih kan di
bootstrap 3 pake center-block kalo di bootstrap 4 pake .mx.auto
Bootstrap 3 .img-responsive, Bootstrap 4 menggunakan
.img-fluid.
itu yang baru gue temuin sih pas migrasi, kalo gaada yang
lupa itu juga :D
Terima kasih untuk kak Windi yang sudah memberikan materi di kulgram dan bisa aku share di blogku ini
