Frontend разработчик

📌Подборка полезных функций, которые пригодятся продвинутым 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;
return (...args: any[]) => {
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), delay);
};
}



3. Deep Clone (без structuredClone)


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

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

4. Safe Access (Optional Chaining + Fallback)


function get(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 {
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);
});
}


📲 Мы в MAX

👉 @frontend_1

🚀 Git для фронтендера: Осваиваем продвинутые команды!

Все мы знаем основы Git: add, commit, push. Но чтобы по-настоящему эффективно работать в команде и поддерживать чистую историю проекта, нужно копнуть глубже. Сегодня поговорим о трёх мощных инструментах, которые сделают вашу работу с Git намного комфортнее: ветки, разрешение конфликтов и rebase.


🌱 Ветки: Ваш личный песочник

Ветки – это как параллельные вселенные вашего кода. Они позволяют вам работать над новой фичей или исправлением бага, не затрагивая основной код (обычно ветку main или master).

Почему это важно?

🟢Изоляция: Ваши изменения не сломают работу других разработчиков.
🟢Безопасность: Можно экспериментировать, не боясь испортить стабильную версию.
🟢Параллельная разработка: Несколько фич могут разрабатываться одновременно.

Основные команды для работы с ветками:

🟢git branch : Создать новую ветку.
🟢git checkout : Переключиться на ветку.
🟢git checkout -b : Создать и сразу переключиться (комбинация двух предыдущих).
🟢git branch -d : Удалить ветку (после мержа).
🟢git merge : Влить изменения из указанной ветки в текущую.


💥 Разрешение конфликтов: Не паникуем!

Конфликты слияния (merge conflicts) – это неизбежная часть командной разработки. Они возникают, когда Git не может автоматически объединить изменения из разных веток, потому что они затронули одну и ту же строку кода или файл.

Как это выглядит?
В файле появятся специальные маркеры:


> feature/new-design


Что делать?

1. Определите конфликтующие участки: Ищите маркеры .
2. Примите решение: Вручную отредактируйте файл, оставив нужный код (ваш, чужой или комбинацию).
3. Удалите маркеры: Очень важно убрать все эти !
4. Добавьте и закоммитьте изменения:
🟢git add
🟢git commit -m "Resolve merge conflict"

Спокойствие и внимание к деталям – залог успешного разрешения конфликтов!


✨ Git Rebase: Чистая история коммитов

git rebase позволяет переписать историю коммитов, перемещая или комбинируя их. В отличие от merge, который добавляет новый коммит слияния, rebase "пересаживает" ваши коммиты на новый базовый коммит, создавая линейную и чистую историю.

Когда использовать rebase?

🟢Для "очистки" вашей ветки перед мержем в main: Сделать историю более читаемой, сгруппировать мелкие коммиты.
🟢Чтобы синхронизировать свою ветку с main: Подтянуть свежие изменения из main в свою фича-ветку без создания лишнего мерж-коммита.

Пример использования:

1. Переключитесь на свою фича-ветку: git checkout feature/my-new-feature
2. Заберите свежие изменения из main: git pull origin main (или git fetch origin main)
3. Выполните rebase: git rebase main

Важно:

🟢Никогда не делайте rebase публичных веток! Это может сломать историю для других разработчиков. Используйте rebase только для своих личных веток, которые ещё не были отправлены в общий репозиторий или над которыми вы работаете в одиночку.
🟢При rebase могут возникнуть конфликты, решать их нужно так же, как и при merge.

📲 Мы в MAX

👉 @frontend_1

Сегодня хочу поделиться с тобой одной тонкостью, которая помогает делать интерфейс более дружелюбным — скелетоны (skeleton loaders). Это те самые серые заглушки, которые показываются до загрузки данных. Пользователь видит, что «что-то происходит», и не чувствует, что приложение тормозит.

🦴 Как сделать скелетон быстро и без боли?
Я часто использую компонент из @radix-ui/react-skeleton или shadcn/ui. Но можно собрать свой за 5 минут:


const Skeleton = ({ className }: { className?: string }) => (

)


А потом использовать так:


{isLoading ? (

) : (
{user.name}
)}


Без скелетонов пользователь может увидеть "прыгающий" интерфейс — сначала пустота, потом всё резко появилось. Это раздражает. Скелетоны создают ощущение плавности и контроля.

📲 Мы в MAX

👉 @frontend_1

💡 Scroll-snap-type

Позволяет создавать плавные, контролируемые прокрутки с «привязкой» к определённым позициям.


.container {
scroll-snap-type: x mandatory;
}
.item {
scroll-snap-align: start;
}


🔘Используется для каруселей, слайдеров и списков.

Зачем это нужно:

➡️ Сделать UX удобным и предсказуемым.

➡️ Избавиться от костылей на JS.

📲 Мы в MAX

👉 @frontend_1