Forem: Mashofa

DaisyUI: Custom Theme in NuxtJs

Mashofa — Tue, 16 Sep 2025 01:43:50 +0000

DaisyUI saya biasanya saya pilih karena component-base css bisa mempercepat dalam development dengan kustomisasi yang tinggi dan mudah. namun saat saya menggunakan DaisyUI untuk custom theme menemukan sedikit masalah pada setup awalnya. Pada kasus ini saya menggunakan nuxtJs

Intalasi DaisyUI

Kalian bisa menginstall DaisyUI pada projek nuxt kalian dengan menjalankan kode dibawah ini:

npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest

Lalu setting pada file nuxt.config

import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
  vite: {
    plugins: [tailwindcss()],
  },
  css: ["~/assets/app.css"],
});

Lalu import Tailwindcss dan DaisuUI pada app.css yang disimpan difolder assets

@import "tailwindcss";
@plugin "daisyui";

Kustom Tema

Agar mudah kalian bisa langsung ke website DaisyUI, setelah itu kalian bisa lihat button {}css dan ketika diklik maka akan muncul berbagai properti tema kustom yang kalian atur.

Buka kembali app.css dengan menambahkan css yang telah disalin dari button {}css

@import "tailwindcss";
@plugin "daisyui";
// tambahkan disini setting theme nya
@plugin "daisyui/theme" {
  name: "winter";
// jika ini tema utama, ubah default menjadi true
  default: true;

  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(97% 0.014 254.604);
  --color-base-200: oklch(93% 0.032 255.585);
  --color-base-300: oklch(88% 0.059 254.128);
  --color-base-content: oklch(37% 0.146 265.522);
  --color-primary: oklch(0% 0 0);
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: oklch(44% 0.017 285.786);
  --color-secondary-content: oklch(98% 0 0);
  --color-accent: oklch(59% 0.145 163.225);
  --color-accent-content: oklch(97% 0.021 166.113);
  --color-neutral: oklch(54% 0.245 262.881);
  --color-neutral-content: oklch(97% 0.014 254.604);
  --color-info: oklch(78% 0.154 211.53);
  --color-info-content: oklch(30% 0.056 229.695);
  --color-success: oklch(79% 0.209 151.711);
  --color-success-content: oklch(26% 0.065 152.934);
  --color-warning: oklch(85% 0.199 91.936);
  --color-warning-content: oklch(28% 0.066 53.813);
  --color-error: oklch(71% 0.194 13.428);
  --color-error-content: oklch(27% 0.105 12.094);
  --radius-selector: 2rem;
  --radius-field: 0.5rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.21875rem;
  --border: 1px;
  --depth: 1;
  --noise: 1;
}

Jika belum berpengaruh pada projek kalian, maka kalian bisa menambahkan attribut data-theme="winter"(contoh diatas dengan nama winter) pada element html.

<body data-theme="winter">....</body>

HonoJS + AlpineJS: Interaksi Antarmuka

Mashofa — Mon, 01 Sep 2025 20:33:26 +0000

Hono secara default support penulisan kode menggunakan jsx sebagai template engine yang memudahkan penggunanya untuk looping data ataupun hanya sekedar untuk membuat component. Namun bukan cuma itu, HonoJS juga mendukung CSR(client-side rendering) dengan menggunakan vite ataupun bisa diatur pada tsconfig.ts dengan memberi nilai "jsxImportSource": "hono/jsx",. Dengan dukungan tersebut saya kira teman-teman yang terbiasa menggunakan basis reactjs akan lebih mudah jika ingin mencoba fullstack menggunakan honojs.

Kesempatan kali ini saya ingin skip terlebih dahulu untuk membuat halaman website dengan pendekatan CSR pada honojs. Yang saya gunakan adalah jsx sebagai template engine dan untuk interaksinya menggunakan alpinejs.

Menambahkan AlpineJS Pada Halaman

Kita bisa menambahkan alpinejs dengan script tag, untuk lebih jelasnya kita bisa mengunjugi website alpinejs disini.
Untuk memulainya kita coba dengan membuat layout terlebih dahulu.

// Layout.tsx
import { html } from "hono/html";

export const Layout = ({children}: {children?: any}) => {

// saya menggunakan helper html 
return html`
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- inisiasi Alpinejs -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <title>Hono + Alpine </title>
  </head>
  <body>

// kita bisa membuat store disini agar bisa diakses dengan mudah
// kita juga bisa menggunakan x-init ataupun x-data untuk inisiasi
    <div
x-data="{
init() {
Alpine.store('kumpulanModal', {
showConfirm: false,
})
},
}"
>${children}</div>
  </body>
  </html>
`
}

Alpine Untuk Tampilkan Modal

Selanjutnya kita bisa membuat halaman contoh

// ContohPage.tsx
import {Layout} from './layout'

export const ContohPage = () => {

return(
<div>
<button x-on:click="$store.kumpulanModal.showConfirm =  !$store.kumpulanModal.showConfirm">Tampil Modal</button>
// modal
<div x-show="$store.kumpulanModal.showConfirm"> 
<div className={'fixed inset-0 bg-black/50 flex justify-center items-center'}>
<div className={'bg-white rounded min-w-1/3 '}>
<button x-on:click="$store.kumpulanModal.showConfirm =  false">Tutup</button>
</div>
</div>
</div>

</div>
)
}

Panggil Contoh Halaman di`index.tsx`

Terkadang kita lupa mengganti index.ts menjadi index.tsx

import {Hono} from 'hono'
import {ContohPage} from './ContohPage'

const app = new Hono()

app.get('/contoh', (c) => {
return c.html(<ContohPage />)
})
.
.
.
.

JWT HonoJs, membuat authorization sederhana

Mashofa — Wed, 06 Aug 2025 18:32:51 +0000

Pada kesempatan ini saya ingin eksplorasi dengan membuat JWT sederhana yang memiliki dua role yaitu user dan admin. dimana admin bisa mengakses endpoint /admin/jadwal sementara user tidak bisa.

Berikut adalah kode dari file middleware.ts

// middleware.ts
import { Context, Next } from "hono";
import { verify } from "hono/jwt";
import { Variables } from "hono/types";

export const SECRET = "inirahasia"

export async function authMiddleWare(c: Context, next: Next){
    const auth = c.req.header('Authorization');
    if(!auth?.startsWith('Bearer ')) return c.json({error: 'Unauthoriztaion'}, 401); // cek ketersediaan auth

    const token = auth.split(' ')[1] // mengambil token

    try {
        const decoded = verify(token, SECRET) 
        c.set('jwtPayload', decoded)
        await next();
    } catch (error) {
        return c.json({error: 'Invalid token'}, 401)
    }
}

// fungsi untuk memberikan akses pada role tertentu
export function withRoles(roles: string[]) {
    return async function (c: Context<Variables>, next: Next) {
        const payload = await c.get('jwtPayload')
        console.warn(payload);
        if(!roles.includes(payload.role)) return c.json({error: 'Access denied'}, 403);
        await next()
    }
}

dan dibawah ini adalah file index.ts


import { Hono} from "hono";
import { sign } from "hono/jwt";
import type { JwtVariables } from "hono/jwt";
import { authMiddleWare, SECRET, withRoles } from "./middleware";
import { IUserPayload } from "./type";
// type Variables = JwtVariables;

const app = new Hono();
const fakeUser: IUserPayload[] = [
  {
    id: 1,
    username: "admin",
    password: "123456",
    role: "admin",
  },
  {
    id: 2,
    username: "user",
    password: "abcdef",
    role: "user",
  },
];

//auth 
app.post("/login", async (c) => {
  const {username, password } = await c.req.json()

  const user = fakeUser.find((u) => u.username === username && u.password === password)
  if(!user) return c.json({error: "Invalid"}, 401)

  const payload= {
    id: user.id,
    username: user.username,
    password: user.password,
    role: user.role,
    exp: Math.floor(Date.now() / 1000) + 60 * 60
  }
  const token = await sign(payload,SECRET)
  return c.json({token})

})


// Public
app.get("/", (c) => c.text("Hello from Hono + JWT"));
app.get("/jadwal", authMiddleWare, (c) => {
  return c.json({message: "Hallo semua "})
})
app.get("/admin/jadwal", authMiddleWare, withRoles(['admin']) ,(c) => {
  return c.json({message: "Hello admin "})
})

export default app;

Dokumentasi JWT hono

Membuat Tombol 'Play' Sederhana dengan WebSocket dan Honojs

Mashofa — Sat, 02 Aug 2025 16:37:21 +0000

Pada kesempatan ini saya ingin membagikan perjalanan saya menyelami Honojs dengan memanfaatkan websocket untuk komunikasi realtime.

"Play"

Saya sangat menyukai permainan, terutama jenis permainan kompetitif. Salah satu momen yang menarik dalam permainan semacam ini adalah ketika para pemain memasuki sebuah ruangan sebelum memasuki medan kompetisi. Di ruangan tersebut, pemain akan menunggu sampai seluruh tim siap untuk bertanding. Proses ini memerlukan komunikasi realtime antara pemain, di mana teknologi seperti WebSocket dan Honojs dapat digunakan untuk menghubungkan mereka dalam sesi permainan, memastikan bahwa setiap pemain menerima pembaruan status secara langsung.

Alur

Terinspirasi dari latar belakang diatas, maka saya membuat sebuah 2 halaman yaitu HomePage dan RoomPage.
...
Pada halaman HomePage user bisa membuat sebuah room dengan menekan tombol "Buat room", dan juga user bisa masuk ke sebuah room dengan memasukan nama room pada input text lalu tekan "Join"

Lalu pada halaman RoomPage terdapat tombol "Play" yang ketika semua user sudah menekannya maka ada pesan bahwa semua pemain sudah siap.

Pembuatan

file index.ts

import { Hono } from "hono";
import { HomePage } from "./views/Home";
import { jsxRenderer } from "hono/jsx-renderer";
import { RoomPage } from "./views/Room";
import { serveStatic } from "hono/bun";
import { cors } from "hono/cors";
// import { poweredBy } from 'hono/powered-by';

import room, { websocket } from './room.ws'

const app = new Hono();
app.use(
  "/*",
  cors({
    origin: ["http://localhost", "https://localhost"],
    allowMethods: ["GET", "POST"],
    exposeHeaders: ["Content-Type"],
    maxAge: 300,
  })
);

app.use(jsxRenderer());

app.use(
  "/js/*",
  serveStatic({
    root: "./src/public",
    onNotFound: (path, c) => {
      console.log(`${path} is not found, you access ${c.req.path}`);
    },
  })
);

app.get("/", (c) => {
  return c.html(<HomePage />);
});
app.get("/play/:name", (c) => {
  const name = c.req.param("name");
  return c.html(<RoomPage roomName={name} />);
});

app.route("/ws", room);

export default {
  fetch: app.fetch,
  websocket
};

file room

import { Hono } from "hono";
import { createBunWebSocket } from "hono/bun";
import type { ServerWebSocket } from "bun";
import { WSContext } from "hono/ws";

const room = new Hono();

const { upgradeWebSocket, websocket } = createBunWebSocket<ServerWebSocket>();

type User = {
  id: string | number;
  socket: WSContext<ServerWebSocket<undefined>>;
  isUserReady: boolean;
};

const roomUser: Record<string, User[]> = {};

let roomName: string = "";
let userId: string = "";

room.get(
  "/play",
  upgradeWebSocket((c) => {
    // userId++;

    return {
      onOpen(evt, ws) {
        console.log("Connected ");
        ws.send(JSON.stringify({ message: "Hello from server !" }));
      },

      onMessage(evt, ws) {
        console.log(evt.data);
        let dataParse: any;

        try {
          dataParse = JSON.parse(evt?.data.toString());
        } catch (error) {
          ws.send("Invalid JSON");
          return;
        }

        dataParse = JSON.parse(evt.data.toString());
        roomName = dataParse.roomName;
        userId = dataParse.userId;

        if (!roomUser[roomName]) {
          roomUser[roomName] = [];
        }

        const thisUser = roomUser[roomName].find((u) => u.id == userId);

        if (!thisUser) {
          roomUser[roomName].push({
            id: userId,
            socket: ws,
            isUserReady: false,
          });
        }

        // console.log(thisUser);
        console.log(roomUser);

        if (dataParse.type === "STATUS_USER") {
          roomName = dataParse.roomName;

          if (!roomName) return console.warn("Room name not found !!");

          if(thisUser) thisUser.isUserReady = dataParse.isUserReady;
        console.warn(thisUser);

          if (roomUser[roomName].every((u) => u.isUserReady)) {
            roomUser[roomName].forEach((u) => {
              u.socket.send(
                JSON.stringify({
                  type: "PLAY",
                  message: "Everyone is ready",
                })
              );
            });
          } else {
            roomUser[roomName].forEach((u) => {
              u.socket.send(
                JSON.stringify({
                  type: "PLAY",
                  message: "Waiting for " + roomUser[roomName].filter(u => !u.isUserReady).length + " more",
                })
              );
            });
          }
          console.warn(roomUser[roomName]);

        }
      },

      onClose(evt, ws) {
        if (roomName && roomUser[roomName]) {
          roomUser[roomName] = roomUser[roomName].filter(
            (u) => u.id !== userId
          );
        }
        // console.log(userId);
        // console.log(roomUser);
      },
      onError(evt, ws) {},
    };
  })
);

export default room;
export { websocket };

file Home.tsx

import { Layout } from "../components/Layout";
import { InputText } from "../components/InputText";

export const HomePage = () => {
  return (
    <Layout text="HONO JSX">
      <main class={`h-[90%] flex flex-col gap-[50px] max-w-[500px]`}>
        <h1 class={`text-center`}>Bermain bersama dengan HonoJS</h1>
        <div
          class={`p-4 bg-slate-200 rounded-md border border-stone-200 border-b-[2px] border-solid`}
        >
          <div class={`flex gap-2 items-center mb-4`}>
            <InputText
              type="text"
              id="inputRoom"
              placeholder="Masukan nama room"
              name="inputRoom"
              className="w-full bg-slate-50 border border-solid border-slate-300 px-2 py-3 rounded-lg"
            />
            {/* <input class={`w-full`} type="text" /> */}
            <Button id="join" label="Join" size="small" variant="secondary" />
          </div>
          <div className="w-full border-0 border-b-[2px] border-solid border-slate-300 mb-4"></div>
          <Button
            size="small"
            variant="primary"
            label="Buat Room"
            id="clickIni"
            fullWidth
          />
        </div>
      </main>
      <Footer></Footer>
      {html`<script src="/js/script.js" defer></script>`}
    </Layout>
  );
};

export const Footer = () => html`
  <footer class="py-3 bg-red-200 text-center rounded-4 w-full">
    <p>2025 mencoba <a href="https://github.com/mbank14">Hono</a></p>
  </footer>
`;

untuk lebih lengkapnya kalian bisa kunjungi Repo ini

Apa yang saya dapat pelajari

Saya mempelajari bagaimana memanfaatkan JSX diHonoJs untuk membuat Component dan Layout, bagaimana cara mengimport static file dan tentunya membuat websocket.

Tantangan selanjutnya

Tantangan selanjutnya ini diambil dari beberapa saja kekuranganya seperti saya ingin mencoba menggunakan client side dengen memanfaatkan Vite, membuat batasan user yang bergabung, dan membuat efisiensi dalam alur websocket yang saya buat.

tulisan ini adalah jurnal perjalanan saya, jika kalian memiliki masukan ataupun kritik silahkan tulis dikomentar.

Serve static not found pada Hono/bun

Mashofa — Tue, 29 Jul 2025 17:40:52 +0000

Okey DEVturer,
Saya ingin sharing masalah saya saat belajar hono terkait dengan serveStatic yang not found. ini adalah kecerobohan saya dalam membaca direktori folder.

// dibawah ini adalah kode error not found saya
app.use(
  "/js/*",
  serveStatic({
    root: "./",
    onNotFound: (path, c) => {
      console.log(`${path} is not found, you access ${c.req.path}`);
    },
  })
);

// kode benar
app.use(
  "/js/*",
  serveStatic({
    root: "./src/public",
    onNotFound: (path, c) => {
      console.log(`${path} is not found, you access ${c.req.path}`);
    },
  })
);

yap saya lupa bahwa untuk mengakses index.ts harus masuk terlebih dahulu ke folder src. saya pikir root pada serveStatic adalah posisi dari index.ts namun sepertinya root adalah posisi package.json. Jika saya keliru mohon komen dibawah.

Belajar CSS mulai dari mana? dari layouting sederhana aja dulu.

Mashofa — Wed, 23 Jul 2025 19:51:55 +0000

Hello DEVturer!
Menurut saya dan menjadi jalan ninja saya saat bingung belajar CSS mulai dari mana, memang saya awali dengan komponen kecil terlebih dahulu seperti membuat button. Secara pararel waktu itu saya juga sedang dalam proses mempelajari membuat layout difigma, jadi buat layout difigma lalu coba slicing menggunakan html css, dan akhir nya ada beberapa properti yang cukup sering saya gunakan, yaitu display, width, heigh, margin, dan padding.

Gunakan kaidah BEM agar lebih rapih

Ada beberapa kaidah yang bisa kalian gunakan untuk penulisan css, namun pada kasus ini saya menggunakan kaidah penulisan BEM. lebih lengkapnya kalian bisa baca artikel disini.

Layouting card sederhana

Sebelum memulai menuliskan CSS yang dibutuhkan, kalian bisa melakukan CSS reset terlebih dahulu untuk menghindari inkonsistensi pada berbagai browser. kalian bisa menggunakan CSS reset dari website ini. dan berikut adalah layouting card sederhana

Kesalahan saya saat membuat route di HONO

Mashofa — Sat, 19 Jul 2025 13:41:07 +0000

Hello DEV!! saya newcomer didunia backend dan memulai petualangan saya dengan memilih menggunakan Hono sebagai senjata utama untuk menemani dalam perjalanan mengeksekusi logika bisnis, membuat REST API, mengaplikasikan JWT, dan Websocket.

Masalah ini saya temui saat merapihkan kode saya dengan lebih mencoba lebih modular

//room.ts

// ekspektasi yang benar
room.post('/create-room', async (c) =>{......});


//==========================
//index.ts
app.post("/api/room/test-room, (c) => {.....});
app.route("/api", room);

respon yang saya dapat adalah Invalid JSON one or two..., hal pertama saya lakukan adalah waktu itu mengecek log saya dan tidak ditemukan kalau saya membuat error seperti itu. Lalu saya iseng menambah "/" diakhir endpoint menjadi "/create-room/, dan berjalan sesuai ekspektasi.
Yang saya coba lakukan yaitu "/api/room/test-room" saya ubah menjadi "/api/rom/test-room" dan yap ketika saya memanggil endpoint "/create-room" bisa berhasil. jadi saya hapus dan pindahkan endpoint "/test-room" ke file room.ts karena memang akan dipindahkan juga nantinya agar lebih rapih. jadi berikut gambaran kode nya sekarang.

//room.ts
const room = new Hono().basePath("room");

room.post("/test-room", (c) => {});
room.post("/create-room", (c) => {});

//===================
//index.ts

app.route("/api", room);

Ada beberapa hal yang membuat saya melakukan kesalahan tersebut dalam petualangan seru ini, yaitu:

Kurangnya pengetahuan

Kurangnya pengetahuan teknis dan praktis membuat perjalanan ini cukup rumit dan tidak terstruktur dengan baik. Apa yang saya ekspektasikan terhadap tantangan didepan pasti memiliki jawaban yang diforum ataupun diinternet, ternyata tidak. Seperti kata Austin Kleon dalam bukunya "Steal Like an Artist" bahwa yang namanya proses itu berantakan. Saya seperti anak dalam ramalan yang bisa menyelamatkan desa kelak, karena saya merasa sudah memiliki tongkat sihir maka saya langsung menuju ke dungeon untuk membasmi monster dan berfikir bahwa saya akan bertambah kuat diperjalanan nanti(sebuah cerita klise dari game rpg).

Spaghetti code

Hal pertama dalam pikiran saya adalah tulis code saja dulu, rapikan kemudian. saya hanya memiliki 1 file yaitu index.ts untuk lebih dari 800 baris kode. seluruh interface, type, setting env, middleware dan lainnya ada disitu sehingga saya cukup kerepotan dalam memaintain kode tersebut.
Karena pada awalnya saya hanya ingin membuat CRUD sederhana saja, namun seiring waktu saya ingin mencoba hal lain seperti websocket dan implementasi JWT yang membuat kode semakin banyak dan kompleks. namun sayang ratusan baris itu sudah menjadi bubur yang diaduk.

Kurang teliti

Spaghetti code membuat saya kesulitan sendiri membaca kode saya, ini ironi dimana saya ingin cepat beres namun setelah mencoba merapihkan saya malah dibuat pusing sendiri.