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 menggunakan ST Terminal, kita selalu dipaksa untuk menemukan berbagai macam pengaturan supaya bisa nyaman digunakan. Secara default, ST terminal tampil sangat minimalis. Untuk membuatnya lebih baik, kita harus melakukan patch terhadap fitur tertentu. Jadi kali ini saya ingin share setting saya selama menggunakan terminal ST di Nixos. Install ST Terminal di Home Manager Pengaturan ST Terminal saya simpan pada home-manager. nixpkgs.overlays = [ (self: super: { st = super.st.overrideAttrs (oldAttrs: rec { patches = [ ./st/st-scrollback-0.8.5.diff ./st/st-font2-0.8.5.diff ./st/st-glyph-wide-support-20220411-ef05519.diff ./st/st-charoffsets-20220311-0.8.5.diff #./st/st-anysize-20220718-baa9357.diff ]; configFile = super.writeText "config.h" (builtins.readFile ./st/config.h); postPatch = oldAttrs.postPatch or "" + "\necho 'Using own config file...'\n cp ${configFile} config.def.h"; }); }) ]; home.packages = with pkgs; [ gcc st ... ]; Install ST Terminal Menggunakan flakes Jika menggunakan flakex, simpan file ini default.nix di sejajar dengan configuration.nix. ...

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 akhirnya kembali mengganti terminal dari Alacritty ke Kitty Terminal. Alasannya adalah karena saat saya ngoding menggunakan nvim di Alacritty terlalu sering tiba-tiba force close. Hal ini tidak membuat saya nyaman selama bekerja dengan terminal emulator. Akhirnya saya pun kembali install terminal emulator keren ini. Setelah terinstall hal pertama yang saya lakukan adalah mengganti color scheme kitty. Cara mengganti color scheme kitty terminal Di terminal kitty, kita bisa menggunakan ratusan color scheme hanya dengan mengetik satu baris perintah yaitu: ...

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 - Saya sedang membuat wordpress custom theme. Theme dasarnya adalah Twenty Twenty Three. Yang mana pada theme ini merupakan implementasi dari fitur wordpress block. Wordpress block theme ini model pengembangannya beda sekali dengan pengembangan theme wordpress secara classic yang mana semuanya dibuat menggunakan php. Pada wordpress block theme kita menggunakan file .json untuk menulis konfigurasi sekaligus styling. Nah, karena saya tidak familiar dengan penulisan ini, saya ingin menyematkan konfigurasi css dan js saya sendiri. ...

mrfdn.com - Tmux merupakan sebuah aplikasi yang berjalan pada terminal. Dia bisa berfungsi seabagai manager pada sebuah terminal. Dengan Tmux kita bisa melakukan banyak hal hanya melalui sebuah aplikasi terminal emulator. Misalnya seperti Jika Tmux dijalankan pada mode TTY maka kita bisa melihat kelebihan utama dari Tmux. Pada tutorial kali ini saya ingin menunjukkan bagaimana cara saya setting dan menggunakan Tmux. Kenapa menggunakan tmux? Tmux banyak digunakan oleh mereka yang sering bekerja secara terminal konsol. ...

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. ...

mrfdn.com - Kali ini saya ingin membagikan tutorial tentang cara menampilkan data table dari Google Sheet ke HTML di Localhost. Di sini saya menggunakan GridJS untuk menampilkan data tersebut ke dalam tabel. Kenapa Gridjs? Karena fitur yang saya inginkan ada di sini, seperti: Pencarian Pagination Sort Fetch API dan lain-lain. Pertama, buatlah sebuah table sederhana di Google Sheet. misalnya seperti ini : Kemudian untuk membuatnya bisa diakses, tekan Share pada pojok kanan atas, lalu set menjadi Anyone. ...