Meskipun framework modern seperti Vue atau React jadi standar saat ini, banyak dari kita yang masih setia pakai jQuery karena praktis, terutama untuk project cepat atau integrasi sistem legacy.

Masalahnya, kalau dipakai sembarangan di Progressive Web App (PWA) atau mobile view, jQuery gampang bikin UI/UX terasa berat (laggy) karena boros di DOM manipulation dan main thread.

Supaya AI tidak menghasilkan kode jQuery yang bikin browser megap-megap, berikut adalah System Prompt siap pakai yang bisa kamu berikan ke AI, lengkap dengan panduan optimasinya.

📋 Prompt AI Siap Pakai (Copy-Paste)

“Tuliskan kode frontend menggunakan jQuery, tetapi pastikan kodenya dioptimalkan untuk performa tinggi agar tidak membuat UI PWA terasa lambat atau patah-patah (jank). Ikuti aturan ketat ini:

1. Dilarang keras melakukan DOM manipulation (.append(), .html(), dll) di dalam perulangan (for, forEach, $.each). Kumpulkan semua string HTML ke dalam satu variabel terlebih dahulu, lalu masukkan ke DOM sekali saja di luar loop.
2. Selalu cache selector. Jangan panggil $('#id') atau $('.class') berulang kali untuk elemen yang sama. Simpan terlebih dahulu ke dalam variabel dengan awalan $.
3. Untuk efek visual atau transisi, hindari menggunakan method animasi bawaan jQuery (.fadeIn(), .slideToggle(), dll). Gunakan addClass atau removeClass agar animasi sepenuhnya di-handle oleh CSS (memanfaatkan GPU Acceleration).
4. Jika membuat event listener yang sering dipicu (keyup, scroll, resize), wajib terapkan teknik debounce agar fungsi tidak dieksekusi terus-menerus setiap milidetik.”

Nikmati hasilnya web kamu jadi sat-set sat-set dengan jquery classical !

Filter hooks WordPress bandel dan tidak bisa mengubah link readmore secara langsung. Gimana dong caranya agar tetap bisa merubah link text itu secara dinamis terhadap seluruh komponen dalam website?

Pernah coba ganti teks “Read More” via functions.php pakai filter hook bawaan WordPress (seperti excerpt_more atau the_content_more_link), tapi teksnya tetep kekeh enggak berubah?
Masalah ini biasanya terjadi karena theme, page builder, atau grid plugin yang kamu pakai mencetak tag HTML <a class="more-link"> secara hardcoded atau menggunakan fungsi internal mereka sendiri yang mengabaikan filter standar WordPress.
Kalau opsi filter hooks biasa sudah tidak mempan, berikut 2 cara paling ampuh untuk memaksa teks tersebut berubah atau hilang total.

Solusi 1: Menggunakan JavaScript / jQuery (Paling Cepat & Manjur)

Cara paling praktis adalah mencegat tag HTML tersebut begitu halaman selesai dimuat di browser (client-side). Karena elemen <a class="more-link"> sudah terlanjur dirender oleh theme, kita ubah isinya langsung menggunakan JavaScript.
Tambahkan snippet berikut di bagian paling bawah file functions.php tema aktif kamu:
PHP

add_action( 'wp_footer', function() {
    ?>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        // Cari semua elemen link dengan class 'more-link'
        const moreLinks = document.querySelectorAll('a.more-link');
        
        moreLinks.forEach(function(link) {
            // OPTION A: Jika ingin mengganti teksnya
            link.textContent = 'Baca Selengkapnya'; 
            
            // OPTION B: Jika ingin menghapus tombolnya secara total
            // (Hapus tanda '//' pada baris di bawah ini untuk mengaktifkannya)
            // link.remove(); 
        });
    });
    </script>
    <?php
}, 999 );

Keunggulan: Sangat ringan, tidak membebani server, dan dipastikan berjalan di level client.

Solusi 2: Menggunakan Output Buffering (Manipulasi Server-Side)

Jika kamu ingin teks tersebut diubah langsung dari server sebelum HTML dikirim ke browser (server-side), kamu bisa memanfaatkan fitur Output Buffering milik PHP.
Teknik ini akan meraba seluruh output HTML halaman dan mengganti teks secara otomatis menggunakan regular expression (regex).
Masukkan kode berikut ke file functions.php:
PHP

add_action( 'wp_loaded', function() {
    ob_start( function( $buffer ) {
        // Mengganti teks 'Read more' spesifik di dalam elemen class 'more-link'
        $buffer = preg_replace(
            '/(<a[^>]*class="[^"]*more-link[^"]*"[^>]*>)Read more(<\/a>)/i',
            '${1}Baca Selengkapnya${2}',
            $buffer
        );
        return $buffer;
    });
});

Keunggulan: Teks langsung berubah di struktur HTML mentah dari server, sehingga bagus untuk kustomisasi yang tidak ingin bergantung pada eksekusi JavaScript di browser pengunjung.

Kesimpulan

• Gunakan Solusi 1 jika kamu ingin cara serbaguna yang aman dan gampang di-custom (termasuk kalau cuma mau hide/remove elemennya).
  
• Gunakan Solusi 2 jika kamu ingin hasil perubahan sudah langsung ter-render murni dari sisi server PHP.

Ada kendala teknis terkait WP Project? Atau website wordpressmu ingin dimodifikasi sesuai kebutuhan bisnis sehari-hari? Kontak langsung tim dev kami untuk penanganan segera!

Pernah ngerasa malu pas buka halaman login Roundcube di depan klien? Polos, kusam, kayak halaman error tahun 90-an. Padahal, first impression itu segalanya, bro!

Bayangin kalau login page-mu tiba-tiba berubah jadi layar hijau berkilau ala film The Matrix—hujan kode, efek neon, dan form login melayang di atasnya. Kesan profesional, modern, dan keren langsung nempel!

Yang lebih epic: Kamu nggak perlu install plugin, nggak perlu utak-atik file inti, dan aman dari update Roundcube. Cukup 1 file dan 1 kali copy-paste—beres!

🔥 Langkah Instan: 3 Menit Selesai!

1. Buka File head.html

Lokasi pasti:

/usr/share/roundcube/skins/elastic/includes/head.html

(Atau sesuaikan dengan path instalasi Roundcube-mu)

2. Edit dengan sudo (biar aman)

sudo nano /usr/share/roundcube/skins/elastic/includes/head.html

Kalau muncul error permission? Tenang, pakai sudo sudah cukup. Percaya deh, file ini memang didesain untuk dikustom.

3. Tempel Kode Sakti Ini di PALING BAWAH

Salin semua kode di bawah, tempelkan setelah semua isi head.html yang sudah ada.

<style>
  /* Canvas latar belakang - tidak mengganggu interaksi */
  #matrix-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.85;
  }

  /* Form login jadi transparan dengan efek kaca (glassmorphism) */
  #layout-content {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(6px);
    border-radius: 20px;
    padding: 30px 35px !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    margin: 6% auto !important;
    max-width: 420px !important;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
  }

  /* Mode gelap otomatis */
  .dark-mode #layout-content {
    background: rgba(20, 22, 30, 0.92) !important;
    border: 1px solid rgba(255,255,255,0.1);
  }

  /* Tombol login melebar */
  #login-form .formbuttons .button {
    width: 100% !important;
    border-radius: 50px !important;
    font-weight: bold;
    letter-spacing: 1px;
  }

  /* Efek hover pada form */
  #layout-content:hover {
    transform: scale(1.01);
    box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6);
  }
</style>

<canvas id="matrix-canvas"></canvas>

<script>
(function() {
  const canvas = document.getElementById('matrix-canvas');
  const ctx = canvas.getContext('2d');

  let w, h;
  function resize() {
    w = canvas.width = window.innerWidth;
    h = canvas.height = window.innerHeight;
  }
  resize();
  window.addEventListener('resize', resize);

  // Karakter keren: angka, huruf, dan simbol Jepang biar makin autentik
  const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZｦｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ';
  const charArray = chars.split('');
  const fontSize = 16;
  let columns, drops;

  function initDrops() {
    columns = Math.floor(w / fontSize);
    drops = [];
    for (let i = 0; i < columns; i++) {
      drops[i] = Math.floor(Math.random() * -100);
    }
  }
  initDrops();

  function draw() {
    // Jejak kabur (trailing effect)
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
    ctx.fillRect(0, 0, w, h);
    ctx.font = fontSize + 'px monospace';

    for (let i = 0; i < drops.length; i++) {
      const char = charArray[Math.floor(Math.random() * charArray.length)];
      const brightness = Math.random() * 0.8 + 0.2;
      ctx.fillStyle = `rgba(0, ${Math.floor(200 * brightness)}, 0, ${brightness})`;
      const x = i * fontSize;
      const y = drops[i] * fontSize;
      ctx.fillText(char, x, y);

      // Reset ke atas setelah mencapai bawah
      if (y > h && Math.random() > 0.975) {
        drops[i] = 0;
      }
      drops[i]++;
    }
    requestAnimationFrame(draw);
  }

  draw();

  window.addEventListener('resize', function() {
    resize();
    initDrops();
  });
})();
</script>

4. Simpan & Lihat Hasilnya!

• Nano: Ctrl+O, Enter, Ctrl+X
• Refresh browser dengan Ctrl+F5 (hard refresh)

Tadaa! Sekarang halaman login Roundcube-mu berubah jadi panggung digital yang memukau. Klien pasti bertanya, “Wah, ini webmail canggih dari mana?”

✨ Kenapa Metode Ini Lebih Cerdas?

• ✅ Nggak sentuh file inti → Update Roundcube aman.
• ✅ Nggak pakai plugin → Ringan, cepat, tanpa konflik.
• ✅ Kode ringan & responsif → Jalan mulus di HP, tablet, desktop.
• ✅ Dark mode support → Otomatis menyesuaikan tema.
• ✅ Efek kaca (glass) → Terlihat premium.

🧙‍♂️ Mau Lebih Gila Lagi? (Bonus)

Kode di atas udah kece, tapi kalau kamu merasa kurang greget, coba utak-atik sedikit:

• Ubah kecepatan hujan – Ganti angka 0.975 menjadi 0.99 (lebih lambat) atau 0.95 (lebih cepat).
• Warna hologram – Ganti rgba(0, ... ) menjadi warna biru atau ungu, misal rgba(0, 150, 255, ...).
• Tambahkan logo melayang – Sisipkan tag <img> di atas form.

Tapi ingat, jangan terlalu rame biar tetap elegan!

🔥 Stop! Jangan Lewatkan!

Kalau kamu suka tutorial kaya gini, ada banyak lagi trik rahasia untuk Roundcube:

1. Ganti Background dengan Video Cinematic (biar kayak landing page Apple)
2. Pasang Captcha Biar Aman dari Brute Force (tanpa plugin!)
3. Buat Halaman Login Multi-Bahasa Otomatis (sesuai browser)

Ikuti Kelas Offlinenya agar bisa lancar jaya bongkar langsung nempel seketika!