📌 Подборка полезных функций, которые пригодятся продвинутым frontend-разработчикам при работе с UI, производительностью и архитектурой


1. Throttle

Контролирует частоту вызова функции, полезно для scroll/resize-событий.

function throttle(fn: Function, delay: number) {
let last = 0;
return (...args: any[]) => {
const now = Date.now();
if (now - last >= delay) {
last = now;
fn(...args);
}
};
}

2. Debounce

Откладывает выполнение функции до окончания серии вызовов.

function debounce(fn: Function, delay: number) {
let timeout: ReturnType<typeof setTimeout>;
return (...args: any[]) => {
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), delay);
};
}

3. Deep Clone (без structuredClone)

function deepClone<T>(obj: T): T {
return JSON.parse(JSON.stringify(obj));
}

Подходит для простых объектов, не содержащих функций, дат и т.п.

4. Safe Access (Optional Chaining + Fallback)

function get<T>(obj: any, path: string, fallback?: T): T {
return path.split('.').reduce((acc, key) => acc?.[key], obj) ?? fallback;
}

5. Wait (async delay)

function wait(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}

6. Generate UUID v4

function uuidv4() {
return crypto.randomUUID(); // нативно в современных браузерах
}

7. Copy to Clipboard

async function copyToClipboard(text: string) {
try {
await navigator.clipboard.writeText(text);
} catch {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}
}

8. Detect Outside Click (для dropdown/modals)

function onClickOutside(element: HTMLElement, callback: () => void) {
function handler(event: MouseEvent) {
if (!element.contains(event.target as Node)) {
callback();
}
}
document.addEventListener('click', handler);
return () => document.removeEventListener('click', handler); // для очистки
}

9. Download File from Blob

function downloadBlob(blob: Blob, filename: string) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
}

10. Dynamic Script Loader (например, для внешних SDK)

function loadScript(src: string): Promise<void> {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.async = true;
script.onload = () => resolve();
script.onerror = () => reject(new Error(Failed to load ${src}));
document.head.appendChild(script);
});
}

CodeBase | Frontend | #JS

Как работает комбинация clip + mask:

- маска применяется к контейнеру с использованием соответствующего изображения клавиши, чтобы изображение обрезалось при смещении (translate)

- clip применяется к контейнеру, чтобы зона взаимодействия (hit area) не перекрывала другие клавиши 🧑‍🍳

CodeBase | Frontend | #animate

💡 HTML Tip: Скачивание файлов одной строкой

Хочешь, чтобы пользователь скачивал файл по клику? Просто добавь атрибут download к ссылке:

<a href="/images/logo.svg" download="codewithshripal-logo.svg">Download File</a>

📌 Что важно знать:

– download — указывает браузеру, что нужно не открыть файл, а скачать его
– Можно задать имя файла прямо в атрибуте
– Работает только с ресурсами того же источника (same-origin)
– Поддерживает blob: и data: ссылки для скачивания сгенерированного контента

🔍 Важно: имя из download будет использоваться только если сервер не задал своё имя в заголовке Content-Disposition.

CodeBase | Frontend | #HTML

Напоминаем про наш секретный второй ресурс тут тонны крутых постов, которых вы здесь точно не увидите. Бегом подписываться, а то будете потом завидовать тем кто в теме 😉
(Контент не повторяется)

Мини-хак: :has() в CSS — меньше JS для интерактивности 🎯

Современные браузеры уже поддерживают :has() — “родительский селектор”, который раньше приходилось эмулировать на JS.

Пример: показать рамку у карточки, если внутри есть картинка:

.card:has(img) {
border: 2px solid #4ade80;
}

Ещё круче: стилизовать соседний элемент, если внутри инпута что-то введено:

.input-wrapper:has(input:focus) label {
color: #3b82f6;
}

Зачем это нужно?
— Меньше JS → проще поддержка
— Новый уровень гибкости для UI

Документация: MDN про :has()

Пробуйте! Это реально меняет подход к верстке.

CodeBase | Frontend | #CSS

Работа в Т‑Банке — топ‑3 лучших работодателей России по версии Forbes. Приходите работать по админской ссылке и получите 7 000 ₽
https://tbank-online.com/baf/1Gfz7QB2oIu

Совет по CSS 💡

Используйте табличные цифры для отображения таймеров ✅

https://www.codewithshripal.com/playground/css/use-tabular-number-for-timers

CodeBase | Frontend | #CSS

🏁Тестовый собес на Frontend с разработчиком из R-Vision, ex-Сбер

15 октября в 19:00 (МСК) приходи посмотреть открытое онлайн-собеседование на Frontend-разработчика!

Интервьюер: Даниил Дмитриев – Frontend-разработчик в R-Vision, ex-Сбер. Пишет на React и TypeScript, совмещает роль тимлида, менторит разработчиков и проводит код-ревью.

На эфире нет сценария ↓
Кандидат – случайный разработчик, который не знает вопросов заранее.

На обычном собесе ты не знаешь, что думает интервьюер, пока не придёт фидбек. На этом эфире Даниил проговорит всё вслух:

— какие вопросы и задачи даёт кандидатам на Frontend-собесах;
— что в каждом ответе засчитал бы, а что нет — и почему.

А в конце ответит на твои вопросы.

Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят повысить грейд, ЗП и прокачать скиллы!

Участие бесплатное 🔥

Зарегаться на эфир можно в боте → @shortcut_front_bot

Реклама.
О рекламодателе.

🪄 Трюк: «Скелетон» без JS

При загрузке данных часто ставят Spinner. Но современный UX → Skeleton (серый шаблон контента). И делать его можно без JS!

.skeleton {
background: linear-gradient(
90deg,
#e0e0e0 25%,
#f0f0f0 50%,
#e0e0e0 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 8px;
}

@keyframes shimmer {
100% {
background-position: -200% 0;
}
}

📌 Как использовать:

1. Создаёте div с классом .skeleton вместо контента.
2. Размеры задаёте под будущий элемент (картинка, текст).
3. Меняете на реальные данные после загрузки.

Плюсы:

- Нет лишнего JS.
- Лёгко адаптировать под любую форму.
- Современный UI → выглядит «дорого».

CodeBase | Frontend | #вебдизайн