Febry Handi — Software Engineer

My Project

Show All Project

Kumpulan snippet, eksperimen, dan utilitas yang saya pakai sehari-hari. Silakan disalin, dipelajari, atau dimodifikasi.

@febryhnd

Febry Handi · 2 jam lalu

Custom React Hook: useDebounce

Hook simple buat nge-delay value, cocok buat search input biar gak spam API call. Udah saya pake di production, works like a charm.

#react #hooks #javascript #typescript

useDebounce.ts

import { useState, useEffect } from 'react';

export function useDebounce<T>(value: T, delay: number = 500): T {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debounced;
}

1.2k 3 hari lalu

@febryhnd

Febry Handi · 5 jam lalu

Utility Hook: useLocalStorage

State React yang otomatis sinkron ke localStorage. Gak perlu useEffect manual di tiap komponen lagi — tinggal pakai hook-nya.

#react #hooks #localstorage

useLocalStorage.ts

import { useEffect, useState } from 'react';

export function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    try {
      const raw = localStorage.getItem(key);
      return raw ? (JSON.parse(raw) as T) : initial;
    } catch {
      return initial;
    }
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue] as const;
}

892 5 jam lalu

@febryhnd

Febry Handi · 1 minggu lalu

CSS Utility: Fluid Container & Grid

Dua utility CSS pakai clamp() biar layout otomatis scale dari mobile sampai desktop tanpa media query.

#css #responsive #design-system

container.css

/* Fluid container — otomatis scale, tanpa media query */
.container {
  width: 100%;
  max-width: clamp(320px, 92vw, 1140px);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Responsive grid auto-fit */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

3.4k 1 minggu lalu

Kontak

Mari membangun sesuatu bersama

Terbuka untuk proyek freelance, kolaborasi jangka panjang, maupun sekadar bertukar pikiran.