Category: Uncategorized

mrfdn.com – Mungkin anda pernah terpikir untuk membuat responsif navbar yang bisa sembunyi saat scroll ke bawah lalu saat scroll layar ke atas navbar tersebut bisa munucl tanpa scroll full ke atas layar. Ini bisa dipecahkan dengan menjalankan beberapa baris javascript DOM. Misalnya navbar saya tempatkan di dalam sebuah header seperti ini. <header> <nav class="container"> […]

mrfdn.com – Saya memiliki sebuah projek website dimana saya menggunakan AstroJS sebagai backend nya. Kemudian beberapa waktu yang lalu Astro sudah memiliki versi terbaru yaitu astro versi 2.0. Terdapat beberapa perubahan dimana saya harus beradaptasi lagi dengan fitur-fitur baru astro 2.0 ini. Sebelumnya projek saya sedang berjalan pada astro versi 1.9.2. Saat tulisan ini dibuat […]

mrfdn.com – Saat ini saya belajar rebuild website undangan online menggunakan Svelte. Web undangan online yang sedang aktif dibuild menggunakan Astro. Menggunakan astro untuk build website sungguh sangat memudahkan. Selama rebuild website saya mengalami beberapa tantangan, seperti bagaimana cara menampilkan props di Svelte sehingga data bisa diakses pada halaman manapun. Setelah itu tantangan baru sebagai […]

mrfdn.com – Pada artikel ini saya mencoba untuk membuat form sederhana. Fungsi form ini adalah mengirim data dari aplikasi web ke Google Sheet tapi kali ini menggunakan Svelte JS. Jadi langsung saja, pertama buat sebuah file komponen Svelte. Kemudian paste kode ini pada bagian <script> //export let data; const scriptURL = "https://script.google.com/macros/s/AKfycbyguZjskDwvOMge67lJXgNfFkWX9xt7orf5Hx3UyFjE3OMELyitQ3wh6jM5Vl_casdf/exec"; let form; let […]

mrfdn.com – Setelah membuat undangan online berbasis website, anda mungkin ingin tahu trik supaya lebih gampang menyebarkan link undangan online tersebut. Pasti repot ingin nulis nama tamu satu per satu untuk setiap link undangan yang ingin dikirimi. Di sini saya ingin share salah satu triknya, hanya dengan menggunakan Excel/Google sheets atau aplikasi serupa. Cara mengirim […]

Setelah menggunakan Bulma, kini saatnya saya menggunakan Tailwind untuk web Hugo saya karena class-class Tailwind lebih mudah dipahami dari pada Bulma. Tailwind merupakan salah satu CSS Framework yang ada di dunia. Ini merupakan css framework saya. Dengan tailwind saya bisa menciptakan berbagai macan halaman website yang keren dengan sangat mudah. Tailwind benar-benar mudah karena di […]

CSS reset adalah teknik dalam pengembangan web yang bertujuan untuk mengatur ulang (reset) tampilan default dari elemen-elemen HTML yang diatur oleh browser. Tujuan utama dari CSS reset adalah untuk menciptakan konsistensi antara berbagai browser yang berbeda dalam menampilkan elemen-elemen dasar HTML. Setiap browser memiliki gaya bawaan (default styles) yang diterapkan pada elemen-elemen HTML seperti margin, […]

mrfdn.com – Hugo memiliki sedemikian rupa fungsi-fungsi yang bisa digunakan untuk merender halaman yang diinginkan. Salah satunya adalah fungsi if dan isset yang bisa dilakukan untuk melakukan kondisional. Dari pada melakukan pengkondisian sederhana seperti menampilkan description atau summary di hugo Pada artikel ini saya ingin menunjukkan cara saya menggunakan rungsi if isset untuk merender taxonomy […]

mrfdn.com – Kali ini saya hanya ingin mencatat bagaimana cara bekerja menggunakan file blade laravel dengan mengintegrasikan tailwind css. Pertama install dependencies dulu npm install -D tailwindcss postcss autoprefixer Sekarang install tailwind npx tailwindcss init -p Sekaranb buka file tailwind.config.js lalu tambahkan baris ini: /** @type {import('tailwindcss').Config} */ export default { content: ["./resources/**/*.blade.php"], theme: { […]

mrfdn.com – Sebagaimana diketahui bahwa wordpress memiliki sebuah fitur bernama Rest API. Jika fitur ini diaktifkan maka kita bisa menggunakannya dengan bebas. Kita bisa menangkap daftar artikel pada web wordpress. Salah satu cara menggunakan WordPress Rest API adalah dengan Svelte/SvelteKit SvelteKit memiliki fitur untuk menampilkan data / load data dari sebuah link api. Jadi tanpa […]