📣 Дайджест материалов за неделю

🔘 Как устранить FOUC

🔘 Инструмент недели: Lighthouse — карманный инспектор сайта

🔘 Апрельские выпуски подкаста PodRocket

🔘 Команда дня: npx browserlist

🔘 React Compiler RC: автоматическая оптимизация React-приложений

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

#свежак

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

Middle Frontend-разработчик (Angular) — удаленно (Москва)

Dev Team Lead — 350 000 —‍ 450 000 ₽, удаленно (Москва)

Senior Frontend Developer — офис/гибрид (Москва)

Frontend-разработчик — 180 000 —‍ 240 000 ₽, офис/гибрид (Екатеринбург/Новокузнецк)

TypeScript Developer — 3 500 —‍ 5 000 €, удаленно (Литва)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

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

#свежак

⚡ Новые фреймворки и мета-фреймворки

➡️ Solid.js — легковесный фреймворк без виртуального DOM, обеспечивающий высокую производительность за счет тонкой реактивности и минимального размера бандла.

➡️ Qwik — фреймворк, ориентированный на мгновенную загрузку страниц, с поддержкой серверного рендеринга и оптимизированной гидратацией.

➡️ Analog — новый фреймворк, сочетающий преимущества серверного рендеринга и статической генерации, с акцентом на производительность и простоту использования.

➡️ React Router v7 — переименованный Remix, теперь объединяет возможности серверного рендеринга и клиентского маршрутизатора, предлагая более гибкую архитектуру.

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

#свежак

🚀 Redis представляет LangCache и Vector Sets — инструменты для ускорения AI-приложений

Redis, который мы все привыкли видеть как «быстрый кэш для бэка«» внезапно делает шаг в сторону AI — и это может пригодиться и нам, фронтендерам.

Недавно они выкатили два новых инструмента:

🔴 LangCache

Это умное семантическое кэширование — Redis сам понимает, что кэшировать, чтобы запросы к LLM (типа ChatGPT) летали быстрее.
Представьте: вы делаете чат с ИИ, и Redis помогает не гонять одинаковые вопросы по 100 раз, а отвечает из памяти, как будто сам ChatGPT запомнил всё.

🔴 Vector Sets

Теперь Redis может хранить и искать вектора — например, эмбеддинги от нейросетей. Это открывает дорогу к реализации умного поиска или рекомендаций прямо у себя, без тяжёлых внешних API.

А что фронту:

➡️ Быстрее и дешевле LLM-интеграции. Теперь можно кэшировать ответы от ИИ — это снижает задержки и экономит токены.

➡️ Интеллектуальные фичи — «похожие товары», «что-то на эту тему», и даже поиск по смыслу — становятся реальными без сложных бэков.

➡️ Всё это уже можно подключить через Node.js или edge-фреймворки типа Next.js / Remix.

🔗 Читать подробнее

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

#свежак

🧩 Как сгенерировать нужный кусок кода за секунды: промпт для ChatGPT

Мелкие, но регулярные задачи вроде хуков, адаптивных блоков или забытого fetch с таймаутом съедают часы. Вместо бесконечного гуглинга — спроси у ИИ.

Один из наиболее практичных промптов из блога Requestly помогает именно с этим:

🔴 PROMPT:

Generate a code snippet for [specific task]

Например:

“Generate a code snippet for a custom React hook that syncs state with localStorage”

Чем полезен этот промпт:

1️⃣ Код появляется за пару секунд — без лишнего гуглинга.

2️⃣ ChatGPT объясняет, как и почему всё работает.

3️⃣ Подходит под любой стек — от React до Tailwind.

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

#буст

Спасибо, что сегодня последний рабочий день на неделе 🙂

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

#развлекалово

❓ Как починить баг, когда onChange в React не срабатывает

Проблема: ты повесил onChange на input, но он не триггерится. Или работает, но странно: с задержкой, через раз, или вовсе игнорирует ввод.

Возможные причины и решение:

1️⃣ Компонент неконтролируемый (uncontrolled):

<input defaultValue="test" onChange={handleChange} />

📛 onChange может не срабатывать стабильно, особенно если не следить за value.

Решение: переводи компонент в контролируемый:

const [value, setValue] = useState('');
<input value={value} onChange={(e) => setValue(e.target.value)} />

2️⃣ Используешь onInput вместо onChange:

Это не одно и то же. onInput срабатывает чаще, но может работать по-разному в разных браузерах.

Решение: если нужен универсальный UX — лучше onChange, особенно для форм.

3️⃣ Слишком агрессивный debounce или throttle:

const debouncedHandler = debounce((e) => doSomething(e.target.value), 500);
<input onChange={debouncedHandler} />

📛 Если debounce неправильно настроен, ввод «глушится».

Решение: убедись, что debounce работает корректно и не отваливается при e.persist() или вне зоны контроля React.

Пиши компонент осознанно: React не про «оно само заработает».

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

#буст

🤝 Мгновенное дублирование строки или блока в VSCode

Shift + Alt + ↓ / ↑

— дублирует текущую строку или выделенный блок вниз / вверх.

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

• Быстро копировать блоки кода без использования буфера обмена.

• Ускоряет повторяющиеся шаблоны, особенно в вёрстке или React-компонентах.

• Работает с несколькими курсорами — мощный инструмент для продуктивности.

💡 Совмести с Alt + Click для создания нескольких курсоров — и обновляй дублированные блоки одновременно.

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

#буст

🎙 Frontend Mix 2025: как защитить, оживить и ускорить фронтенд

ЮMoney и Сбер собрали фронтенд-инженеров в Петербурге, чтобы обсудить практики, которые реально работают в продакшене.

Запись уже доступна, а мы кратко делимся, что было ⬇️

🟥 Рефакторинг за секунды: показали, как через jscodeshift и CLI-инструменты массово обновлять код без боли.

🟥 Анимации без лагов: секреты плавных интерфейсов: FLIP, requestAnimationFrame, CSS-трюки.

🟥 Безопасность в финтехе: как не дать сломать ваш фронт: защита от XSS, supply-chain атак, фишинга.

🟥 Тестирование UI: показали, как грамотно покрывать фронт без фанатизма.

🔗 Смотреть запись митапа

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

#буст

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

#развлекалово

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

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

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

• Глобальная — переменная доступна везде.

• Функциональная — только внутри функции.

• Блочная (let, const) — только внутри фигурных скобок { }.

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

Почему так:

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

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

• Избегаешь конфликтов между переменными.

• Пишешь чистый и предсказуемый код.

• Не ловишь ошибки из-за «невидимых» переменных.

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

#междусобойчик

📣 Подборка статей для старта в карьере

🔘 Что с работой в IT в 2025 году: обзор от TheCode.Media, анализирующий текущее состояние рынка труда в IT, включая востребованные профессии, зарплаты и влияние нейросетей.

🔘 Фронтенд в 2025 году: тренды, которые изменят разработку

🔘 Как войти в IT в 2025 году и не потратить на это 10 лет: практическое руководство от Хабра, предлагающее советы начинающим специалистам по выбору ниши, обучению, созданию пет-проектов и поиску работы.

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

#свежак

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

Frontend-разработчик (React JavaScript) — от 200 000 ₽, удаленно (Москва)

Разработчик интерфейсов (Видеопоиск) — 250 000 —‍ 380 000 ₽, офис/гибрид (Москва/Санкт-Петербург)

Middle Backend/Full Stack JavaScript Developer — удаленно (США/Канада)

Middle Frontend-разработчик (React, Next.js) — от 150 000 до 250 000 ₽, офис (Тамбов)

Frontend Vue & Developer Middle++ — от 2000 до 2500 $, удаленно (ОАЭ)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

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

#свежак