Web

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: { extend: {}, }, plugins: [], }; Selanjutnya edit file resources/css/app.css lalu tambahkan file ini: @tailwind base; @tailwind components; @tailwind utilities; Setelah itu buka file blade.php lalu set Tailwind pada dengan menambahkan baris ini. ...

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 yang saya beri nama keyword dan tags, yang mana tag dan keyword ini sudah saya set pada bagian frontmatter file artikel.md saya. ...

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, padding, jenis huruf, ukuran teks, dan sebagainya. Gaya-gaya ini dapat berbeda antara satu browser dengan browser lainnya, yang menyebabkan tampilan yang tidak konsisten antar browser. ...

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 sana kita hanya menulis class class pada setiap tag html yang dibuat. Tapi jika ingin menggunakan Tailwind di Hugo ini butuh trik khusus. ...

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 Undangan pernikahan lewat WA Pertama, copy URL link undangan anda ke kolom A1 di excel. Biasanya diakhiri dengan ...

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 hadir; let hadirberapa; let btnKirim; let btnLoading; function jumlahorang() { hadirberapa.style.display = hadir.checked ? "block" : "none"; }; function konfirmasihadir() { form.addEventListener("submit", async (e) => { e.preventDefault(); btnLoading.classList.toggle("hidden"); btnKirim.classList.toggle("hidden"); const formData = new FormData(form); const response = await fetch(scriptURL, { method: "POST", body: formData, }); if (response.ok) { btnLoading.classList.toggle("hidden"); btnKirim.classList.toggle("hidden"); form.reset(); console.log("Success!"); } else { console.error("Error!"); } }); }; </script> Kemudian pada bagian bawah, buat form yang diinginkan. ...

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 developer pemula adalah bagaimana cara menampilkan nama tamu yang telah ditulis pada url ke halaman web. ...

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 astro sudah berada pada versi 2.0.11. Untuk upgrade ke versi astro terbaru cukup gunakan perintah npm i astro@latest. ...

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"> <a href="{{ .Site.BaseURL }}" title="{{ .Site.Title }}"> <img src="{{ .Site.Params.logo | absURL }}" class="logo" alt="{{ .Site.Title }}" width="60" height="60" /> <span class="hidden"> {{ .Site.Title }}<span> </a> <ul> {{ with .Site.Menus.main }} {{ range .}} <li> <a href="{{ .URL | absURL }}">{{ .Name }}</a> </li> {{ end }} {{ end }} <li> <!-- search --> <a href="/search" aria-label="search button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" /> </svg> </a> </li> </ul> </nav> </header> Lalu set css untuk header menjadi fixed. ...

mrfdn.com - Pada tutorial sebelumnya sudah dijelaskan tentang cara menampilkan data dari Google Sheet ke file HTML di Localhost. Kali ini saya ingin share bagaimna cara mengirim data dari localhost ke Google Sheet menggunakan form HTML sederhana. Script HTML untuk submit ke satu sheet Google Sheet Pertama, buat file form html nya, kira-kira seperti ini. <h1 id="pesan"></h1> <form id="submitform"> <input type="text" name="nomor" id="nomor" placeholder="nomor" /><br /><br /> <input type="text" name="nama" id="nama" placeholder="nama" /><br /><br /> <input type="text" name="alamat" id="alamat" placeholder="alamat" /><br /><br /> <input type="submit" id="sub" value="kirim" /> </form> <script is:inline> // submit let form = document.getElementById("submitform"); form.addEventListener("submit", (e) => { e.preventDefault(); document.querySelector("#sub").value = "Sedang mengirim.."; let user = new FormData(form); fetch( "GANTI-URL-EXEC-GOOGLE-APPSCRIPT-DISINI", { method: "POST", body: user, } ) .then((res) => res.text()) .then((user) => { document.querySelector("#pesan").innerHTML = user; document.querySelector("#sub").value = "Submit"; document.getElementById("submitform").reset(); }); }); </script> Pada script ini kita akan menggunakan metode POST untuk mengirim data ke Google Sheet melalui API yang sudah didapatkan. ...