mrfdn.com - Saya memiliki projek yang mengharuskan saya untuk resize gambar lalu rename gambar tersebut. Saya memilih aplikasi via terminal untuk melakukan hal ini. Lalu saya menemukan workflow yang bagus yaitu dengan menggunakan Magick untuk resize gambar dan VIM untuk rename gambar secara batch. Begini langkahnya. Resize gambar secara batch menggunakan Magick Buka terminal. Install magick terlebih dahulu. cd ke folder gambar yang ingin diresize. Resize gambar dengan perintah mogrify -resize 1920 -quality 70 *jpg. Perintah ini akan merize semua gambar jpg menjadi lebar maksimal 1920px, tingginya mengikuti lalu menurunkan kualitas gambar menjadi 70% dari aslinya. Silahkan sesuaikan dengan kebutuhan anda. Tunggu sejenak, lalu cek kembali size gambar, pasti akan berubah. Selesai. Rename gambar secara batch menggunakan VIM Masih di terminal dengan cd ke folder gambar tadi. Buka vim dengan meload semua nama file gambar ke dalamnya dengan perintah \ls | vim - Setelah vim terbuka, nama file akan otomatis tampil secara berurutan ke bawah. Lalu lalukan visual mode lalu copy setiap baris sehingga tampil secara berdampingan. Kira-kira seperti ini mv fileori.jpg renamedfile.jpg Eksekusi rename file menggunakan perintah :w !sh, sekali saja. Sekarang cek folder gambar tadi, pasti filename setiap gambar sudah terganti. Kemudian supaya filename bisa tampil secara numbering, lakukan trik ini. Misalnya setiap renamedfile-1.jpg memiliki angka di akhirnya. ...

mrfdn.com - Terkadang kita butuh aplikasi perekam layar untuk merekam aktivitas layar desktop linux. Dan mungkin ini salah satu aplikasi yang digunakan oleh streamer / youtuber untuk merekam aktivitas ngoding mereka. Jika anda menggunanakan desktop linux berbasis wayland, anda bisa merekam layar desktop anda menggunakan aplikasi gratis bernama wf-recorder. Saya saat ini sedang menggunakan Hyprland di Nixos, dan untuk merekam layar saya menggunakan wf-recorder. Aplikasi ini ternyata bisa menghasilkan video yang sangat smooth, 60fps tanpa delay atau lag. ...

mrfdn.com - Waybar bisa digunakan pada window manager Sway ataupun Hyprland. Sesuai namanya waybar yaitu bar untuk menampilkan sejumlah data, widget atau aktivitas pada system. Ini sama saja seperti Polybar saat menggunakan i3 atau bspwm. Atau juga SLStatus, DWMBlock pada DWM. Tapi memiliki tampilan Waybar yang standar itu cukup membosankan. Bagi anda yang punya preferensi tertentu, mungkin butuh untuk edit tampilan waybar bahkan sampai menjalankan script tertentu. Kali ini saya mencoba untuk menjalankan script yang saya butuhkan, salah satunya yaitu script Uptime. Script ini berfungsi untuk mengetahui sudah seberapa lama komputer kita menyala. ...

mrfdn.com - Hyprland merupakan sebuah desktop compositor untuk Wayland. Singkatnya Hyprland ini sama seperti KDE, Gnome, Xfce, Awesome, dll, tapi hanya menyediakan tampilan saja, tidak include dengan aplikasi. Hyprland menyajikan sebuah tampilan yang terkesan modern, minimalis dan elegan lengkap dengan beberapa animasi keren untuk setiap window. Dengan menggunakan kelebihan dari teknologi Wayland, kita bisa merasakan pengalaman penggunakan desktop Linux yang berbeda dan menyenangkan. Pengetahuan dasar seputar Hyprland, Wayland dan Xorg ...

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