DEV Community: Ayus Irfang Filaras

vimconfig: Auto-Setup Vim dengan Backup Otomatis

Ayus Irfang Filaras — Thu, 06 Nov 2025 06:17:55 +0000

Halo semuanya.

Aku dari Indonesia dan mau share tools konfigurasi Vim yang aku buat. Namanya VimConfig, ini bikin setup Vim jadi lebih gampang dan cepat, terutama kalau sering reinstall atau ganti device.

Kenapa Aku Bikin Ini

Aku males setup Vim dari nol terus, apalagi kalau reinstall sistem. Jadi aku bikin tools ini buat otomatis setup semuanya. Develop-nya di Termux pake proot-distro, jadi mungkin ada case yang belum kepikiran buat sistem lain.

Fitur Utama

vcfg tool - CLI tool buat manage plugin dan konfigurasi
Modular - Konfigurasi per bahasa terpisah
Auto backup - Config lama kamu otomatis di-backup ke ~/.config/vim.backup.{date}
Multi-bahasa - Support JS/TS, Python, C/C++, Go, PHP, Bash
Termux-friendly - Optimized buat mobile development

Instalasi

curl -fsSL https://raw.githubusercontent.com/aidomx/vimconfig/main/install.sh | bash

Atau pake wget:

wget -qO- https://raw.githubusercontent.com/aidomx/vimconfig/main/install.sh | bash

Tenang aja, config lama kamu bakal di-backup otomatis.

Command vcfg

Yang paling sering aku pake:

vcfg search fuzzy   # Mencari plugin
vcfg update         # Update semua plugin
vcfg add <plugin>   # Tambahin plugin baru
vcfg doctor         # Cek kesehatan config
vcfg editmap        # Edit key mapping

Masih ada command lain, bisa cek di dokumentasi.

Key Mappings

Leader key di-set ke Space. Beberapa shortcut:

pp - Cari file
gg - Search text di semua file
tt - Toggle file tree
<leader>fmt - Format code
gd - Go to definition

Lengkapnya ada di dokumentasi.

Support Bahasa

Sejauh ini support:

JavaScript/TypeScript (React, Next.js, Vue)
Python (Django, Flask)
C/C++
Go
PHP/Laravel
Bash

Sebagian sudah include LSP, auto-completion, dan formatting.

Platform

Aku test di:

Termux (Android)
Arch Linux (via proot-distro)
Ubuntu/Debian

Karena develop-nya mostly di Termux pake proot-distro, mungkin ada issue di platform lain yang belum ketemu. Makanya aku share ini buat dapet feedback juga.

Butuh Tester

Aku butuh feedback dari yang pake:

Linux native (bukan via proot)
Distro Linux lain
macOS (kalau ada yang mau coba)

Config kamu aman, ada auto backup.

Dokumentasi

Dokumentasi lengkap ada di:

Installation Guide
Quick Start
Key Mappings Reference
Language-specific Guides
Troubleshooting
Customization

Semua ada di repository.

Repository

https://github.com/aidomx/vimconfig

Kontribusi

Welcome buat:

Report bug
Suggest feature
Improve docs
Test di platform lain

Semua feedback berguna buat aku.

Penutup

Ini side project iseng-iseng aja, jadi mungkin ada bug atau hal yang kurang optimal.

Apakah ada yang mau coba?

Kalau ada pertanyaan, silakan drop comment atau open issue di GitHub.

Semoga bermanfaat.

Optimasi NextJS dengan Aidomx React

Ayus Irfang Filaras — Fri, 25 Apr 2025 15:23:49 +0000

Menata Ulang UI React dengan Pendekatan Deklaratif dan Terkontrol

Latar Belakang

Dalam proyek React berskala menengah hingga besar, pengelolaan komponen dan logika UI sering kali menjadi tantangan. Komponen UI tersebar di banyak file, logika bisnis tercampur dengan tampilan, dan perubahan kecil di satu bagian dapat berdampak besar pada keseluruhan aplikasi.

Masalah ini memunculkan kebutuhan akan sistem yang:

Memisahkan logika dan tampilan,
Dapat dikontrol secara terpusat,
Mendukung struktur UI yang dinamis,
Mudah untuk diuji dan dikembangkan lebih lanjut.

Apa itu Aidomx?

Aidomx adalah sistem berbasis rules yang memungkinkan kamu merender UI React secara deklaratif dan terpusat. Sistem ini dibagi menjadi dua bagian utama:

@aidomx/core: Mengelola virtual elements, komposisi logic, dan struktur berbasis identitas.
@aidomx/react: Bertugas sebagai integrasi React dan perender komponen berdasarkan rules dari core.

Dengan pendekatan ini, UI tidak lagi ditulis sebagai JSX biasa, melainkan dibentuk dari konfigurasi objek (rules) yang bisa didefinisikan, diubah, dan bahkan dienkripsi jika diperlukan.

Fitur Utama

UI berbasis aturan (rules-driven)
Pemisahan logika dan presentasi
Dukungan penuh untuk tema, skeleton, dan komposisi dinamis
Deklaratif dan mudah dikontrol
Performant, bahkan mengungguli rendering statis Next.js dalam beberapa kasus

Contoh Implementasi Sederhana

// rules/index.ts
import { defineRules } from '@aidomx/core'

export const rules = defineRules({
  root: 'container',
  components: [],
})

// rules/welcome.ts
import type { RuleComponent } from '@aidomx/core'

const welcome: RuleComponent[] = [
  {
    name: 'title',
    design: {
    type: 'h1',
      className: 'text-xl font-bold',
      content: 'Welcome to Aidomx!',
    },
  },
]

export default welcome

Untuk menerapkan rules, buat file :

// app/providers.tsx
"use client"

import { AidomxProvider } from '@aidomx/react'
import { rules } from '../rules'
import { ReactNode } from 'react'

export function Providers({ children }: { children: ReactNode }) {
  return (
    <AidomxProvider value={rules}>
      {children}
    </AidomxProvider>
  )
}

Dan atur layout.tsxseperti berikut :

import type { Metadata } from 'next'
import { Geist, Geist_Mono } from 'next/font/google'
import './globals.css'
import { Providers } from './providers'

const geistSans = Geist({
  variable: '--font-geist-sans',
  subsets: ['latin'],
})

const geistMono = Geist_Mono({
  variable: '--font-geist-mono',
  subsets: ['latin'],
})

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

Untuk melihat hasilnya, kita perlu membuat file Home.tsx seperti berikut :

// app/Home.tsx
'use client'

import { Aidomx } from '@aidomx/react'
import { useEffect, useRef, useState } from 'react'
import welcome from '../rules/welcome'

export default function Home() {
  const start = useRef(performance.now())
  const [renderTime, setRenderTime] = useState('')
  const [interactTime, setInteractTime] = useState('')
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    const end = performance.now()
    setRenderTime((end - start.current).toFixed(2) + 'ms')

    const interactStart = performance.now()
    const interactEnd = performance.now()
    setInteractTime((interactEnd - interactStart).toFixed(2) + 'ms')

    setMounted(true)
  }, [])

  if (!mounted) return <>Loading...</>

  return (
    <div className="p-6">
      <div className="mb-4 text-gray-500">
        <div>Waktu render: {renderTime}</div>
        <div>Waktu interaksi: {interactTime}</div>
      </div>
      <Aidomx name="container" scope={{ welcome }} />
    </div>
  )
}

Dan atur page.tsx seperti berikut :

// app/page.tsx
import Home from './Home'

export default async function Page() {
  return <Home />
}

Manfaat Aidomx

Konsistensi: Semua elemen UI dikontrol dari satu sumber aturan.
Adaptif: Perubahan UI dapat dikontrol berdasarkan identitas pengguna, lingkungan, atau kondisi lain.
Testability: Karena UI didefinisikan sebagai data, mudah diuji tanpa perlu merender DOM.
Enkripsi: Data sensitif di dalam komponen bisa dienkripsi dan didekripsi secara aman.

Kesimpulan

Aidomx lahir dari kebutuhan nyata untuk mengelola kompleksitas UI modern dengan cara yang terstruktur, modular, dan efisien. Dengan memisahkan logika dan tampilan, serta mendukung pendekatan deklaratif, Aidomx memberikan fondasi yang kuat untuk membangun antarmuka dinamis yang terkontrol penuh—tanpa mengorbankan performa atau fleksibilitas.

Repository github : @aidomx/react

Membuat realtime chat

Ayus Irfang Filaras — Wed, 19 Mar 2025 16:08:47 +0000

Dalam artikel ini, kita akan membuat aplikasi Next.js dari awal dengan Prisma sebagai ORM, Socket.io untuk real-time chat, dan tanpa backend terpisah.

Semua dijalankan dalam satu proses menggunakan npm run dev.

1. Membuat Proyek Next.js

Pertama, buat proyek baru menggunakan Next.js:

npx create-next-app@latest my-app --ts --tailwind
cd my-app

Jalankan proyek:

npm run dev

Buka http://localhost:3000 untuk melihat tampilan default Next.js.

2. Setup Prisma di Next.js

Install Prisma dan klien database:

npm install @prisma/client @prisma/cli
npx prisma init

Buka file prisma/schema.prisma dan ubah skema sebagai berikut:

model User {
  id    String @id @default(uuid())
  name  String
  email String @unique
}

model Message {
  id        String   @id @default(uuid())
  senderId  String
  recipientId String
  content   String
  createdAt DateTime @default(now())

  sender    User @relation(fields: [senderId], references: [id])
  recipient User @relation(fields: [recipientId], references: [id])
}

Jalankan migrasi:

npx prisma migrate dev --name init

Buat file /lib/prisma.ts untuk mencegah banyak instance Prisma:

import { PrismaClient } from "@prisma/client";

const globalForPrisma = global as unknown as { prisma?: PrismaClient };

export const prisma = globalForPrisma.prisma ?? new PrismaClient();

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

Buat fungsi database di /lib/messages.ts:

import { prisma } from "./prisma";

export const sendMessage = async (senderId: string, recipientId: string, content: string) => {
  return prisma.message.create({ data: { senderId, recipientId, content } });
};

export const getMessages = async (userId: string) => {
  return prisma.message.findMany({
    where: { OR: [{ senderId: userId }, { recipientId: userId }] },
    orderBy: { createdAt: "asc" },
  });
};

3. Setup Socket.io di Next.js

Install Socket.io:

npm install socket.io socket.io-client

Buat file /lib/socket.ts untuk menangani koneksi Socket.io:

import { Server as HttpServer } from "http";
import { Server as SocketIOServer } from "socket.io";
import { sendMessage } from "./messages";

let io: SocketIOServer | null = null;

export const initSocket = (server: HttpServer) => {
  if (!io) {
    io = new SocketIOServer(server, { cors: { origin: "*" } });

    io.on("connection", (socket) => {
      console.log("User connected:", socket.id);

      socket.on("sendMessage", async (data) => {
        const message = await sendMessage(data.senderId, data.recipientId, data.content);
        io?.emit("newMessage", message);
      });

      socket.on("disconnect", () => console.log("User disconnected:", socket.id));
    });
  }
};

Tambahkan server.ts untuk menjalankan Next.js dan Socket.io dalam satu proses:

import { createServer } from "http";
import { initSocket } from "./lib/socket";
import next from "next";

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = createServer((req, res) => handle(req, res));

  initSocket(server);

  server.listen(3000, () => {
    console.log("Server running on http://localhost:3000");
  });
});

Tambahkan ke package.json:

"scripts": {
  "dev": "node server.ts"
}

4. Menggunakan Socket.io di Frontend

Buat hook /lib/useChat.ts:

import { useEffect, useState } from "react";
import { io } from "socket.io-client";

const socket = io("http://localhost:3000");

export const useChat = () => {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    socket.on("newMessage", (message) => {
      setMessages((prev) => [...prev, message]);
    });

    return () => {
      socket.off("newMessage");
    };
  }, []);

  const sendMessage = (senderId: string, recipientId: string, content: string) => {
    socket.emit("sendMessage", { senderId, recipientId, content });
  };

  return { messages, sendMessage };
};

5. Membuat UI Chat

Di dalam components/Chat.tsx:

"use client";

import { useChat } from "@/lib/useChat";
import { useState } from "react";

export const Chat = ({ userId }: { userId: string }) => {
  const { messages, sendMessage } = useChat();
  const [content, setContent] = useState("");

  const handleSend = () => {
    sendMessage(userId, "recipient-id", content);
    setContent("");
  };

  return (
    <div className="p-4 border border-gray-300 rounded-md w-96">
      <div className="h-60 overflow-y-auto border-b border-gray-300 mb-2 p-2">
        {messages.map((msg, index) => (
          <div key={index} className="p-2 bg-gray-100 rounded-md my-1">
            {msg.content}
          </div>
        ))}
      </div>
      <div className="flex gap-2">
        <input
          className="flex-1 p-2 border rounded-md"
          value={content}
          onChange={(e) => setContent(e.target.value)}
        />
        <button className="bg-blue-500 text-white px-4 py-2 rounded-md" onClick={handleSend}>
          Send
        </button>
      </div>
    </div>
  );
};

Kesimpulan

Dengan pendekatan ini:

Next.js digunakan sebagai frontend dan backend dalam satu proses.
Prisma dikelola langsung tanpa API Routes.
Socket.io berjalan dalam server Next.js.
Chat real-time bisa langsung digunakan dengan npm run dev.

Pendekatan ini sangat cocok untuk proyek sederhana tanpa backend terpisah.

Mencegah SQL Injection di Prisma dengan Middleware dan withAccelerare

Ayus Irfang Filaras — Wed, 19 Mar 2025 14:46:32 +0000

Prisma adalah ORM yang sangat populer di ekosistem TypeScript dan Next.js. Namun, untuk aplikasi yang menangani input pengguna secara langsung, keamanan sangat penting. Dalam tutorial ini, kita akan belajar cara menggunakan middleware di Prisma untuk mencegah SQL injection dan mengoptimalkan query dengan withAccelerate.

🔍 Masalah yang Dihadapi

Saat menggunakan Prisma, ada beberapa pola query yang bisa berisiko terhadap SQL Injection, seperti:

DROP TABLE users;
SELECT * FROM users;
INSERT INTO users VALUES (...);
DELETE FROM users WHERE ...;
UPDATE users SET ...;
Komentar SQL yang mencurigakan (-- atau /* */)

Kita ingin memastikan bahwa Prisma dapat memblokir query berbahaya ini sebelum dieksekusi.

✅ Solusi: Middleware Prisma dengan `withAccelerate`

Prisma versi terbaru (v6.4.1) mendukung middleware berbasis $extends. Kita bisa menggunakannya untuk:

Mencegah SQL Injection dengan memeriksa pola query.
Mendukung optimasi query dengan withAccelerate.

Berikut adalah implementasi lengkapnya:

import { PrismaClient } from "@prisma/client";
import { withAccelerate } from "@prisma/extension-accelerate";

const prismaClient = new PrismaClient();

const prisma = prismaClient
  .$extends(withAccelerate()) // Mengaktifkan Accelerate
  .$extends({
    query: {
      $allModels: {
        async findMany({ args, query }) {
          const forbiddenPatterns = [
            /drop\s+table/i,
            /select\s+\*/i,
            /insert\s+into/i,
            /delete\s+from/i,
            /update\s+\w+\s+set/i,
            /--/i,
            /\/\*/i,
          ];

          const argsString = JSON.stringify(args);
          if (forbiddenPatterns.some((pattern) => pattern.test(argsString))) {
            throw new Error("Query terdeteksi mengandung pola SQL injection.");
          }

          return query(args);
        },
        async findUnique({ args, query }) {
          return prisma.$queryMiddleware(args, query);
        },
        async findFirst({ args, query }) {
          return prisma.$queryMiddleware(args, query);
        },
      },
    },
  });

export default prisma;

🔄 Bagaimana Cara Kerjanya?

Memeriksa Query sebelum dieksekusi
- Middleware membaca args dan mengubahnya menjadi string.
- Jika ada pola SQL yang mencurigakan, query diblokir dengan error.
Menangani findMany, findUnique, dan findFirst secara otomatis
- Middleware diterapkan ke semua model tanpa perlu kode berulang.
Menggunakan withAccelerate untuk optimasi
- Menambahkan dukungan caching otomatis dari Prisma.

🚀 Penggunaan di Aplikasi Next.js

Jika Anda menggunakan Next.js dengan Prisma, cukup impor prisma seperti biasa:

import prisma from "@/lib/prisma";

async function getData() {
  return await prisma.post.findMany({
    where: { published: true },
    take: 10,
  });
}

Semua query akan otomatis melewati middleware keamanan dan dipercepat oleh Accelerate.

❌ Error yang Mungkin Terjadi

Saat mencoba menggunakan Prisma di Next.js dengan middleware dan withAccelerate, saya awalnya menambahkan "use server" dalam file lib/prisma.ts. Namun, saya mendapatkan error berikut:

Error: A "use server" file can only export async functions, found object.
Next.js Docs: Invalid use server value

Error ini terjadi karena Prisma tidak bisa diekspor langsung sebagai objek ketika menggunakan "use server".

Solusi: Gunakan Fungsi Async untuk Prisma

Alih-alih mengekspor Prisma secara langsung, kita perlu menggunakan fungsi async untuk memastikan Prisma hanya diakses di lingkungan server.

Perbaikan Kode

import { PrismaClient } from '@prisma/client';
import { withAccelerate } from "@prisma/extension-accelerate";

const prismaClient = new PrismaClient().$extends(withAccelerate());

export async function getPrisma() {
  return prismaClient;
}

Lalu, gunakan Prisma dengan cara berikut dalam fungsi server:

"use server";

import { getPrisma } from "@/lib/prisma";

export async function fetchData() {
  const prisma = await getPrisma();
  const data = await prisma.user.findMany();
  return data;
}

Dengan cara ini, Prisma hanya digunakan dalam lingkungan server, menghindari error yang terjadi sebelumnya.

DEV Community: Ayus Irfang Filaras

vimconfig: Auto-Setup Vim dengan Backup Otomatis

Kenapa Aku Bikin Ini

Fitur Utama

Instalasi

Command vcfg

Key Mappings

Support Bahasa

Platform

Butuh Tester

Dokumentasi

Repository

Kontribusi

Penutup

Optimasi NextJS dengan Aidomx React

Latar Belakang

Apa itu Aidomx?

Fitur Utama

Contoh Implementasi Sederhana

Manfaat Aidomx

Kesimpulan

Membuat realtime chat

1. Membuat Proyek Next.js

2. Setup Prisma di Next.js

3. Setup Socket.io di Next.js

4. Menggunakan Socket.io di Frontend

5. Membuat UI Chat

Kesimpulan

Mencegah SQL Injection di Prisma dengan Middleware dan withAccelerare

🔍 Masalah yang Dihadapi

✅ Solusi: Middleware Prisma dengan withAccelerate

🔄 Bagaimana Cara Kerjanya?

🚀 Penggunaan di Aplikasi Next.js

❌ Error yang Mungkin Terjadi

✅ Solusi: Middleware Prisma dengan `withAccelerate`