// jQuery made this easy$('#button').addClass('active').fadeIn(300);// Instead of this nightmarevar button = document.getElementById('button');button.className += ' active';button.style.display = 'block';// ... plus opacity animation code

// jQuery: Manual state managementlet count = 0;$('#increment').on('click', function() {    count++;    $('#counter').text(count);    $('#doubled').text(count * 2);    $('#quadrupled').text(count * 4);    $('#squared').text(count * count);    // Update every element manually!     // Miss one? Good luck debugging! 😅    // It's like Whac-A-Mole but with DOM updates});

// YakaJS: Automatic reactivityconst count = _.signal(0);const doubled = _.computed(() => count() * 2);_.effect(() => {    _('#counter').text(count());    _('#doubled').text(doubled());    // Add 100 more elements? Still just these 2 lines!});_('#increment').on('click', () => count.set(count() + 1));// Everything updates automatically! ✨// It's like having a personal assistant for your DOM

// jQuery: Basic animations$('#card').fadeIn(300);// Wow. Much animation. So 2006. 🐕// YakaJS: Advanced effects_('#card')    .bounce(500)      // Bounce effect    .flip3D(1000)     // 3D flip (jQuery: "What's 3D?")    .pulse(300)       // Pulsing    .shake(400)       // Shake effect (perfect for error messages!)    .swing(500)       // Swing motion    .rotate(600)      // Rotation    .zoom(400);       // Zoom effect// It's like upgrading from black & white TV to 4K HDR 📺

// With jQuery, you need to Google:// "best router library for jquery 2025"// Then install one of:// - React Router (but then why use jQuery?)// - Vue Router (same question...)// - Page.js (okay, decent)// - Navigo (who?)// - director.js (last updated: 2014 💀)// etc.// Plus you'll need to:// 1. Read documentation// 2. Configure it// 3. Debug weird edge cases// 4. Wonder why you're still using jQuery

// YakaJS: Built-in SPA routingconst router = _.createRouter();router.addRoute('/user/:id', {    component: (params) => `<h1>User ${params.id}</h1>`,    beforeEnter: async () => await checkAuth(),    onEnter: () => trackPageView(),    onLeave: () => saveState()});router.navigate('/user/123');// One library. Zero drama. Infinite possibilities. ∞

// jQuery: You must remember to sanitize!$('#content').html(userInput);  // 🚨 DANGEROUS! Hello, XSS! 🚨// You need a separate sanitization library// (and to remember to use it EVERYWHERE)$('#content').html(DOMPurify.sanitize(userInput));// Forgot it one place? Congratulations, you have a security hole! 🕳️// Also you:$('#other-place').html(userInput);  // Oops, forgot again!$('#another-place').html(userInput);  // And again!// Welcome to playing security whack-a-mole 🔨

// YakaJS: Automatic sanitization_('#content').html(userInput, true);  // Safe by default! 🛡️// Sanitized automatically. Sleep well tonight!// Still can use raw HTML when needed_('#content').html(trustedHTML, false);  // Explicit is better than implicit// But you have to TRY to make it unsafe// The YakaJS way:_('#place1').html(userInput);  // Safe ✅_('#place2').html(userInput);  // Safe ✅_('#place3').html(userInput);  // Safe ✅_('#place4').html(userInput);  // Safe ✅// All safe, all the time. It's called "secure by default" ✨

// Impossible in jQuery without:// - Installing additional libraries// - Reading Web Speech API docs// - Crying into your keyboard// - Questioning your career choices// YakaJS: Native voice control (works out of the box!)_.voice.listen({    'show menu': () => _('#menu').slideDown(),    'hide menu': () => _('#menu').slideUp(),    'search for *': (query) => performSearch(query),    'scroll to top': () => window.scrollTo({ top: 0 }),    'make me a sandwich': () => alert('Nice try! 🥪')});// It just works™️

$('#element')    .addClass('active')    .text('Hello')    .fadeIn(300);

_('#element')    .addClass('active')    .text('Hello')    .fadeIn(300);

$.ajax({    url: '/api/data',    method: 'POST',    data: { key: 'value' },    success: (data) => console.log(data),    error: (err) => console.error(err)    // No retry? Network failed? Too bad!     // Try again manually, peasant! 👑});// Also jQuery:// - No progress tracking// - No timeout handling// - No automatic retries// - No CSRF protection// - You're on your own, buddy! 🏝️

_.ajax({    url: '/api/data',    method: 'POST',    data: { key: 'value' },    retry: 3,              // Auto-retry on failure (because networks are flaky)    timeout: 5000,         // Request timeout    progress: (e) => {},   // Progress tracking    cache: true,           // Smart caching    csrf: true             // CSRF protection}).then(data => console.log(data));// Modern promises! Welcome to 2015... I mean 2026! 🚀

$(document).on('click', '.button', function() {    $(this).addClass('clicked');});

_(document).on('click', '.button', function() {    _(this).addClass('clicked');});// YakaJS uses optimized event delegation// Translation: It's faster. Much faster. Zoom zoom! 🏎️

npm install yakajs

<!-- Just drop this in your HTML and you're good to go! --><script src="https://cdn.jsdelivr.net/gh/Yaka-UI-Labs/YakaJS@latest/dist/min.yaka.js"></script>

// Before (jQuery)$('#button').addClass('active');// After (YakaJS)_('#button').addClass('active');

// Add reactive state (say goodbye to manual updates!)const userCount = _.signal(0);// Add voice commands (impress your boss!)_.voice.listen({    'show dashboard': () => _('#dashboard').slideDown()});// Add routing (build a real SPA!)const router = _.createRouter();router.addRoute('/dashboard', { ... });// Add whatever you want! The world is your oyster! 🦪

let todos = [];  // Hope you don't forget to update this everywhere!$('#add-todo').on('click', function() {    const text = $('#todo-input').val();    todos.push({ id: Date.now(), text, done: false });    renderTodos();  // Manual render. Every. Single. Time.});$(document).on('click', '.todo-item', function() {    const id = $(this).data('id');    const todo = todos.find(t => t.id === id);    todo.done = !todo.done;    renderTodos();  // Called it again!});function renderTodos() {    const html = todos.map(t => `        <li class="todo-item ${t.done ? 'done' : ''}" data-id="${t.id}">            ${t.text}        </li>    `).join('');    $('#todo-list').html(html);    // If you forget to call this function, good luck debugging! 🐛    // This is what we call "the manual transmission of web dev"}// Pros: Works// Cons: You have to call renderTodos() 847 times// Rating: 5/10 "Works but you'll hate yourself" ⭐⭐⭐⭐⭐

const todos = _.signal([]);  // Reactive state! Set it and forget it! 🎯_('#add-todo').on('click', () => {    const text = _('#todo-input').val();    todos.set([...todos(), { id: Date.now(), text, done: false }]);    // That's it. No render call needed. Magic? No, reactivity! ✨});_(document).on('click', '.todo-item', function() {    const id = _(this).data('id');    todos.set(todos().map(t =>         t.id === id ? { ...t, done: !t.done } : t    ));    // Still no render call. Still works perfectly. Mind. Blown. 🤯});// Automatic rendering with reactivity!_.effect(() => {    const html = todos().map(t => `        <li class="todo-item ${t.done ? 'done' : ''}" data-id="${t.id}">            ${t.text}        </li>    `).join('');    _('#todo-list').html(html);    // This runs automatically whenever todos changes!    // It's like having a personal assistant for your UI 👔});// Pros: Everything// Cons: You'll never want to use jQuery again// Rating: 11/10 "Would recommend to my grandma" ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐