Apps Artificial Intelligence CSS DevOps Go JavaScript Laravel Linux MongoDB MySQL PHP Python Rust Svelte Vue

Apps

Posts

Struct di Go: Panduan Praktis dengan Contoh
Struct di Go: Panduan Praktis dengan Contoh
struct di Go itu lifesaver buat memodelkan data kompleks. Gini deh, daripada ribet nyimpen tiap variabel terpisah, kita bisa gabungin semuanya jadi satu unit. Membuat Struct Copy type Person struct { Name string Age int Address string } // Instance p := Person{Name: "Alice", Age: 30, Address: "123 Main St"} fmt.Println(p.Name, p.Age, p.Address) Cara Membuat Instance Literal struct: p := Person{Name:"Alice", Age:30} Fungsi new: p := new(Person); p.Name="Bob" Nilai nol: p := Person{} Mengakses & Memodifikasi Copy p.Age = 31 fmt.Println(p.Age) // 31 Struct dengan Metode Copy func (p Person) Display() { fmt.Printf("%s, %d, %s\n", p.Name, p.Age, p.Address) } func (p *Person) HaveBirthday() { p.Age++ } p.Display() p.HaveBirthday() p.Display() Struct sebagai Argumen Fungsi By value → salinan dibuat By pointer → fungsi bisa ubah data asli Copy func celebrateBirthdayPtr(p *Person) { p.Age++ } celebrateBirthdayPtr(&p) fmt.Println(p.Age) // 31 Struct Bersarang Copy type Address struct { Street, City, Zip string } type Person struct { Name string; Age int; Address Address } p := Person{Name:"Alice", Age:30, Address:Address{Street:"123 Main St", City:"Wonderland", Zip:"12345"}} fmt.Printf("%s lives at %s, %s, %s.\n", p.Name, p.Address.Street, p.Address.City, p.Address.Zip) Refleksi Singkat Pada akhirnya, struct bikin kode Go lebih rapi dan fleksibel. Dari entitas sederhana sampai data kompleks bersarang, semua bisa diatur dengan elegan.
Bikin Galeri Masonry Keren dengan Efek Zoom (Tailwind CSS)
Bikin Galeri Masonry Keren dengan Efek Zoom (Tailwind CSS)
Pernah lihat galeri foto yang tampilannya rapi, tapi nggak monoton—gambar disusun kayak dinding bata (masonry) dan pas di-hover ada efek zoom yang halus? Ternyata gampang banget bikinnya pakai Tailwind CSS. Di tulisan ini, saya bikin galeri responsif pakai layout masonry plus efek zoom pas kursor diarahkan ke gambar. Yuk langsung coba! 1. Struktur HTML Galeri Cukup beberapa div dengan class Tailwind, galeri sudah jadi: Copy <div class="columns-1 sm:columns-2 md:columns-3 lg:columns-4 gap-4 p-4"> <div class="mb-4 overflow-hidden rounded-lg"> <img src="https://picsum.photos/500/700.webp" alt="Image 1" class="w-full hover:scale-110 transition-transform duration-300 ease-in-out"> </div> <div class="mb-4 overflow-hidden rounded-lg"> <img src="https://picsum.photos/500/500.webp" alt="Image 2" class="w-full hover:scale-110 transition-transform duration-300 ease-in-out"> </div> <!-- Tambahkan gambar lain sesuai kebutuhan --> </div> 2. Apa arti class? columns-1 sm:columns-2 md:columns-3 lg:columns-4 → jumlah kolom berubah sesuai ukuran layar (1 di HP, 2 di tablet, dst). gap-4 → jarak antar kolom. p-4 → kasih padding biar galeri nggak mepet ke pinggir. mb-4 → jarak antar item. overflow-hidden + rounded-lg → bikin gambar rapi, ujung melengkung, dan zoom-nya nggak keluar batas. hover:scale-110 + transition-transform duration-300 ease-in-out → bikin efek zoom halus pas di-hover. 3. Bisa diutak-atik Jumlah kolom: ubah columns- sesuai kebutuhan. Misalnya, mau 5 kolom di layar besar, pakai xl:columns-5. Zoom lebih besar: ganti hover:scale-110 jadi hover:scale-125 atau hover:scale-150. Transisi lebih kalem: ganti duration-300 jadi duration-500. 4. Kapan cocok dipakai? Galeri foto pribadi atau portofolio. Showcase produk di toko online. Landing page yang butuh tampilan visual interaktif. 5. Penutup Dengan Tailwind, bikin galeri masonry + efek zoom tuh cuma butuh beberapa baris HTML. Hasilnya responsif, interaktif, dan enak dilihat di semua ukuran layar.
chevron-up