snack.js - Tiny bites of frontend magic 🍪

Trusted by Developers Who Love Speed

Company X

DevStudio

PixelPushers

Acme.io

"snack.js adalah hal termudah untuk ditambahkan ke proyek vanilla JS mana pun. Utilitas `debounce` menyelamatkan kami ribuan *render* yang tidak perlu."

— Jane Doe, Lead Frontend Engineer

Why snack.js?

Grab a cookie and start coding 🍪 Fokus pada performa dan pengalaman developer.

Lightweight & Fast

Under 15KB minified. Tidak ada *bloat*, hanya esensial yang Anda butuhkan untuk pengembangan frontend modern.

<15KB Total Size

Zero Dependencies

Pure vanilla JavaScript. Tanpa masalah *dependency hell*. Hanya modul ES modern yang bersih.

100% Native JS ✓

Seamless Integration

Bekerja secara native di browser. Impor dan gunakan segera di React, Vue, Svelte, atau Vanilla JS.

Framework Agnostic

Focused Utilities

Helpers for animation, scrolling, performance, and more.

import { ... } from "snack.js"

Core Utilities

Semua yang Anda butuhkan, tidak ada yang tidak Anda butuhkan. Disajikan dalam gaya kartu produk.

Performance Helpers

debounce throttle sleep

DOM & Visual Effects

scrollToEl fadeIn toggleClass isInViewport

View All Utilities

Works Everywhere You Do

Integrasi mulus dengan framework dan alat favorit Anda.

React

Gunakan dalam hooks Anda.

Vue

Helper untuk komposisi.

Svelte

Berfungsi secara native.

Vanilla JS

Import langsung via CDN.

Installation

Tidak ada *build step*. Bekerja secara native di browser.

Via NPM

Install melalui *package manager* favorit Anda:

$ npm install snack.js

Via CDN

Gunakan langsung di HTML dengan ES modules:

<script type="module">
  import { fadeIn } 
    from "https://unpkg.com/snack.js";
</script>

Zero Configuration Required

Tidak ada webpack, tidak ada rollup, tidak ada *build tools* yang rumit. Impor dan gunakan segera.

Try snack.js Live 🍪

Interactive playground dengan contoh nyata

Live Demos

Debounce Demo:

Log akan muncul 300ms setelah Anda berhenti mengetik.

Throttle Demo:

Gerakkan mouse di sini

Log akan muncul paling banyak 1x setiap 500ms.

Click a button or interact to see snack.js in action...

🍪

Demo Box

This box will animate based on your selection

Join the Cookie Jar! 👩‍💻

snack.js adalah proyek *open-source*. Kontribusi dan ide Anda disambut hangat.

Contribute Code

Laporkan *bug* atau kirimkan *pull request* untuk fitur baru.

View on GitHub →

Join Discussion

Bergabunglah dengan server Discord kami untuk bantuan dan obrolan.

Join Discord →

Improve Docs

Bantu kami membuat dokumentasi lebih jelas dan komprehensif.

See Docs →

Documentation (FAQ Style)

Clean, readable, and comprehensive

Getting Started (Overview)

snack.js adalah *utility library* modern dan ringan yang dirancang untuk *frontend developer* yang menghargai kesederhanaan dan kinerja. Dengan *zero dependencies* dan dukungan penuh ES module, Anda dapat mulai menggunakan utilitas canggih dalam hitungan detik.

🎯 Core Philosophy

Small, focused utilities
Tree-shakeable by default
No external dependencies
TypeScript support included

🚀 Quick Start

Install dan gunakan dalam waktu kurang dari 30 detik:

npm i snack.js

Function Reference

debounce(fn, delay)

Membuat fungsi *debounced* yang menunda pemanggilan fungsi sampai setelah jeda waktu tertentu berlalu.

const dSearch = debounce(fn, 300);

Real-World Examples

Search Input with Debounce

import { debounce } from 'snack.js';
const input = document.querySelector('#search');
input.addEventListener('input',
  debounce((e) => console.log(e.target.value), 300)
);

Power Your Frontend with Real-Time Clarity