🐸 Библиотека фронтендера

#pixel_pause

⚠️ StrictMode перезапускает эффекты (dev-ловушка)

useEffect(() => {
  initAnalytics();
}, []);

На вид — инициализация один раз.

🔵 На деле (в dev):

— React в StrictMode выполняет дополнительный цикл
setup → cleanup → setup
— аналитика / подписки / запросы могут выполняться повторно
— баг выглядит как «только у меня локально»

♾ Почему так:

Это dev-only проверка в React 18+, чтобы находить неидемпотентные сайд-эффекты и отсутствие cleanup.

✅ Правильный фикс: реализовать cleanup

useEffect(() => {
  const dispose = initAnalytics(); // возвращает отписку

  return () => {
    dispose?.();
  };
}, []);

Cleanup должен полностью зеркалить всё, что было создано в effect.

✅ Если SDK не поддерживает cleanup — делайте init идемпотентным

// analytics.ts
let inited = false;

export function initAnalyticsOnce() {
  if (inited) return;
  inited = true;
  initAnalytics();
}

useEffect(() => {
  initAnalyticsOnce();
}, []);

♾ В production StrictMode не добавляет этот дополнительный цикл — поведение отличается только в dev.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#hotfix #react

🗂 Управление ресурсами и деградацией в JavaScript

Явное управление ресурсами в JavaScript — про using и Symbol.dispose/asyncDispose: способ «гарантированно прибраться» при выходе из области видимости (как try/finally, но более декларативно). Полезно для стримов, подписок, блокировок и любых API, где легко забыть сделать cleanup.

Как ограничивать скорость отдельного сетевого запроса в Chrome — полезная техника, когда надо проверить, как ведёт себя приложение при «очень медленной» загрузке конкретной зависимости, а не всего трафика сразу.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#read_watch

📌 Команда дня: animation-composition

Когда вы вешаете сразу несколько анимаций на один элемент, они обычно дерутся.

Свойство animation-composition решает это:

.element {
  animation: fade 2s, slide 2s;
  animation-composition: add;
}

💡 Теперь fade и slide накладываются друг на друга, а не заменяют.

📍 Для чего это:

Чтобы не объединять всё в один @keyframes, не городить JS, и не терять голову от конфликтов.

Работает в Chrome, Firefox, и постепенно внедряется в остальное.

🐸 Библиотека фронтендера

#readme

🐰 Что такое область видимости в JavaScript

Область видимости (scope) — это правила, по которым переменные «видны» в разных частях кода.

Основные виды:

🅰️ Глобальная — переменная доступна везде.
🅰️ Функциональная — только внутри функции.
🅰️ Блочная (let, const) — только внутри фигурных скобок { }.

function test() {
  let msg = "Hi!";
}
console.log(msg); // Ошибка: msg не существует вне функции

Почему так:

msg создана внутри функции и доступна только там. Вне — она как будто не существует.

💡 Зачем понимать scope:

— Избегаешь конфликтов между переменными.
— Пишешь чистый и предсказуемый код.
— Не ловишь ошибки из-за «невидимых» переменных.

🐸 Библиотека фронтендера

#read_watch

🔥 Топ-вакансий недели для фронтендеров

Frontend Developer — от 4 500 €, помощь с переездом (Лимассол)

Middle Frontend Developer — from 3 200 $ gross, fully remote

Junior JS-developer — удаленно

➡️ Больше офферов в канале: @jsdevjob

🐸 Библиотека фронтендера

🐸 Библиотека фронтендера

#pixel_pause

🚦 Быстрый аудит сайта через CLI

lighthouse https://site.com --view

Одна команда — и вы видите:

• LCP
• CLS
• TTFB
• Вес страницы
• Unused JS/CSS

🔵 Когда использовать:

— После деплоя
— Если сайт «ощущается» медленным
— Для сравнения staging / prod
— Перед оптимизацией

🔢 Сохранить отчёт:

lighthouse https://site.com --output html --output-path ./report.html

Подходит для тикета или демонстрации заказчику.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#readme

🔥 Надёжная библиотека для drag-and-drop списков

Sortable позволяет перетаскивать элементы внутри одного списка и между разными контейнерами. Основана на нативном Drag & Drop API браузера.

API лаконичный и понятный, без сторонних зависимостей. Есть плавная анимация при перемещении, корректно работает как на десктопах, так и на тач-устройствах. Без проблем интегрируется с популярными фронтенд-фреймворками.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack

🛠 Что нового в DevTools

✅ Performance быстрее
Исправлен лаг при работе с тяжёлыми трейсами. Flame chart теперь листается и масштабируется заметно плавнее.

✅ Soft navigations для SPA
В Performance появились маркеры soft navigation и soft LCP — проще анализировать переходы без перезагрузки страницы.

✅ Точный построчный профайлер
Теперь корректно работает с pretty-print и source maps. Можно реально увидеть, какая строка кода грузит CPU.

✅ Render blocking колонка
В Network появилась отдельная колонка, показывающая ресурсы, блокирующие рендер (JS, CSS, шрифты). Удобно для оптимизации First Paint.

✅ Throttling отдельных запросов
Можно замедлять конкретные ресурсы, а не всю сеть — полезно для тестирования медленных зависимостей.

✅ AI Assistance
Теперь можно вставлять изображения из буфера обмена прямо в чат для разбора визуальных проблем.

Плюс десятки мелких фиксов, улучшения доступности и доработки MCP Server для автоматизации.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#release_digest

🧵 10 приёмов работы со строками в JavaScript

Строки в JavaScript — это не просто текст. Это полноценный инструмент для трансформации, валидации и подготовки данных.

1️⃣ Развернуть строку в одну строку кода

const reverse = str => str.split('').reverse().join('');
reverse("hello"); // "olleh»

2️⃣ Проверить наличие подстроки

"hello world".includes("world"); // true

Быстро и читаемо — без indexOf.

3️⃣ Сделать каждое слово с заглавной буквы

const toTitleCase = str =>
  str.split(' ')
     .map(w => w[0].toUpperCase() + w.slice(1).toLowerCase())
     .join(' ');

toTitleCase("javascript string tricks");
// "Javascript String Tricks»

4️⃣ Убрать пробелы по краям

"   hello world   ".trim(); // "hello world»

Полезно при работе с формами и вводом пользователя.

5️⃣ Повторить строку несколько раз

"hello ".repeat(3);
// "hello hello hello «

6️⃣ Посчитать количество вхождений подстроки

const count = (str, sub) => str.split(sub).length - 1;

count("hello world, hello JS", "hello"); // 2

7️⃣ Дополнить строку до нужной длины

"42".padStart(5, "0"); // "00042»

Удобно для форматирования ID и чисел.

8️⃣ Заменить все вхождения

"banana".replaceAll("a", "o"); // "bonono"

Если replaceAll недоступен:

"banana".replace(/a/g, «o»);

9️⃣ Оставить только буквы или только цифры

const onlyLetters = str => str.replace(/[^a-zA-Z]/g, '');

onlyLetters("a1b2c3"); // "abc»

Регулярки решают 80% задач по очистке данных.

🔟 Разбить строку в массив символов

[..."hello"]; 
// ['h', 'e', 'l', 'l', ‘o’]

Работает быстрее и аккуратнее, чем split('').

💡 Эти приёмы закрывают большинство повседневных задач: форматирование, валидацию, очистку, трансформацию. Чем лучше вы владеете строками — тем меньше лишней логики пишете.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#readme #js