frontend utilities

1<div class="flex-column md:flex-row g-1 md:g-2">...</div>

1select('.btn-primary')              // querySelector shorthand
2selectAll('.card')                  // querySelectorAll, returns a true array
3select('.input', formElement)       // scoped to a parent element

1const cleanup = listen(button, 'click', handler);
2cleanup(); // detach manually if needed
3 
4listenAll(selectAll('.btn'), 'click', handler);

1addClass(el, 'active')
2removeClass(el, 'hidden')
3toggleClass(el, 'open')
4hasClass(el, 'disabled')  // returns boolean

1await nextFrame(); // resolves after 2 raf cycles (safe for measuring after dom changes)
2await sleep(300);  // promise based delay

1isString(v)    isNumber(v)    isBoolean(v)
2isArray(v)     isObject(v)    isFunction(v)
3isEmpty(v)     // true for "", [], {}, null, undefined
4hasValue(v)    // true if not empty, null, or undefined

1move(input, from, to)       // move an item within an array or string
2remove(input, index)        // remove an item at index
3replace(input, index, val)  // replace an item at index
4limit(input, max)           // slice to a maximum length
5uniquify(input)             // remove duplicates from an array or string
6 
7asyncForEach(arr, fn)       // serial async iteration (awaits each fn before continuing)

1random(1, 100)              // inclusive integer random
2uniqueId(8)                 // collision resistant unique id string
3clipboard('text to copy')   // write to system clipboard
4formatTime(seconds)         // returns "mm:ss"
5formatDate(date, false)     // returns "YYYY-MM-DD"
6formatDate(date)            // returns "YYYY-MM-DD HH:mm:ss"
7localizeDate(date, false)   // returns "YYYY-MM-DD" in the user's timezone
8localizeDate(date)          // returns "YYYY-MM-DD HH:mm:ss" in the user's timezone
9distance(a, b)              // levenshtein or jaccard distance between two strings
10 
11Storage.get('key')          // typed localStorage wrapper
12Storage.set('key', value)
13Storage.remove('key')
14Storage.clear()

1notify('profile updated');
2notify('upload failed — please try again', 6000); // custom duration in ms

1notify('<button class="undo-btn">undo</button>', 5000, (n) => {
2  n.listen(n.querySelector('.undo-btn'), 'click', () => {
3    undoLastAction();
4    n.close();
5  });
6});
7 
8// omit the timer to control close timing from the callback
9notify('<button class="undo-btn">undo</button>', (n) => {
10  n.listen(n.querySelector('.undo-btn'), 'click', () => n.close());
11});

1modal('<h2>success</h2><p>your order has been placed.</p>');

1modal(`
2  <h2>delete post</h2>
3  <p>this action cannot be undone.</p>
4  <button class="btn-danger confirm">delete</button>
5  <button class="btn cancel">cancel</button>
6`, (m) => {
7  m.listen(m.querySelector('.confirm'), 'click', async () => {
8    await fetch(`/posts/${postId}`, { method: 'DELETE' });
9    m.close();
10    notify('post deleted');
11  });
12 
13  m.listen(m.querySelector('.cancel'), 'click', () => m.close());
14});