🥺 Фронтендеры, угадайте ситуацию

Подсказка: три слоя вёрстки, один клик — и всё летит в тартарары.

Что это за баг, который не правится ни руками, ни молитвой?

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

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

🗞 Апдейт недели: что обновилось в мире

Собрали для вас ключевые новости, чтобы вы были в курсе самых важных событий:

➡️ Тенденции фронтенд-разработки в 2025 году: согласно статье на DEV Community, в 2025 году ожидаются значительные изменения в фронтенд-разработке, включая интеграцию искусственного интеллекта, использование no-code решений, улучшение пользовательского опыта и устойчивую разработку.

➡️ Обновления в Svelte и SvelteKit: в апреле 2025 года команда Svelte анонсировала несколько минорных релизов для SvelteKit и самого Svelte. Среди нововведений — опция idPrefix для функции render, улучшающая генерацию идентификаторов при наличии нескольких экземпляров Svelte на странице.

➡️ Конференция HolyJS 2025 Spring: 7–8 апреля в Москве и онлайн пройдет конференция HolyJS 2025 Spring, посвященная JavaScript.

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

#свежак

🔍 Задачка на внимательность

На фото — код популярной функции debounce, которую часто просят реализовать на собеседованиях в 2025 году. Но в этом коде есть ошибки, которые могут привести к неожиданному поведению.

Твоя задача: найти и объяснить ошибки. Сколько багов ты насчитаешь 👀

Подсказка: подумай про замыкания, setTimeout, контекст вызова и потери данных.

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

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

🙂 Как на самом деле работает async и await

Многие используют эти конструкции, совершенно не понимая, что там под капотом. Давайте разберёмся, как работают эти конструкции и почему именно они делает твой код чище и понятнее.

⭐ Что такое async и await

• async: ключевое слово перед функцией делает её асинхронной. Это означает, что она всегда возвращает промис, даже если вы явно не указали это.

Например:

async function fetchData() {
return "Данные получены";
}

fetchData().then(console.log); // Выведет: "Данные получены"

await: используется внутри асинхронной функции. Заставляет код «подождать» завершения промиса, после чего возвращает его результат.

async function fetchData() {
let promise = new Promise((resolve) => {
setTimeout(() => resolve("Данные получены"), 2000);
});

let result = await promise;
console.log(result); // Выведет: "Данные получены" через 2 секунды
}

fetchData();


⭐ Что используется для обработки ошибок

Стандартный блок try...catch:

async function fetchData() {
try {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
} catch (error) {лол
console.error('Ошибка:', error);
}
}

fetchData();

⭐ Преимущества использования async/await

• Упрощение кода: асинхронный код становится более читаемым и похожим на синхронный, что облегчает его понимание и поддержку.

• Избегание «адской пирамиды колбэков»: async/await помогает избежать глубокой вложенности, характерной для колбэков.

Этот подход упрощает работу с промисами и делает код более линейным и читаемым.

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

#буст

📣 Программисты, нужен ваш совет

Пилим крутую подборку ноутов для кодеров в 2025-м и хотим собрать реальный фидбек от тех, кто в теме!

Какой ноут спасает вас в кодинге и почему?

Расскажите все:

⭐ Что за зверь (модель, начинка)

⭐ Где жмет и где радует в ежедневной работе

⭐ На какие фишки смотреть при выборе

⭐ Как вам с ним живется

Топовые советы попадут в нашу статью. Сделаем годный гайд, который реально поможет коллегам!

Делитесь в комментах ⬇️

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

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

Фронтендеры!

Проголосуйте за наш канал, и в сторис мы опубликуем топ материалов, которые должен прочитать каждый фронтендер.

➡️Поддержать канал: https://yangx.top/boost/frontendproglib

🖥 Метрики эффективности сотрудника

В каждой команде бывают специалисты, чья ценность не укладывается в привычные метрики продуктивности. Они редко в топе по количеству закрытых задач, но именно их вклад критически важен для общего результата.

Такие люди помогают менее опытным коллегам разобраться в сложных вопросах, улучшают архитектуру и процессы незаметными правками, предотвращают ошибки ещё до того, как они стали задачами, создают культуру качества, которую не видно в отчётах.

Иногда стоит пересмотреть, как мы оцениваем эффективность. Потому что не все цифры отражают суть.

🔗 Подробности в статье

🐸 Библиотека джависта

☺️ Команда дня: Vite для быстрого старта проекта

Vite обеспечивает молниеносную скорость разработки благодаря использованию нативных ES-модулей и оптимизированной системе плагинов.

Как установить:

npm create vite@latest



Как создать новый проект:

npm create vite@latest my-project




➡️ my-project — название вашей новой папки проекта

Как перейти в каталог проекта:

cd my-project



Как установить зависимости:

npm install



Как запустить сервер разработки:

npm run dev




☝️ При создании проекта Vite предложит выбрать шаблон для конкретного фреймворка. Выберите подходящий, чтобы сразу получить настроенное окружение.

Подробнее почитать на официальном сайте 🔗

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

#буст

💭 Облачная среда разработки с AI-ассистентом: обзор GigaIDE Cloud в деталях

СберТех представил GigaIDE Cloud — первую российскую облачную среду разработки с ИИ, встроенную в GitVerse.

Что в статье:

🔜 Кому и зачем стоит попробовать GigaIDE Cloud

🔜 Как запускать проекты с шаблонов и работать с репозиториями

🔜 Как настраивается среда под себя (да, с расширениями от VS Code)

🔜 Как работает AI-ассистент GigaCode и в чём он реально помогает

Забудьте про настройку окружения и тяжёлый ноутбук — GigaIDE Cloud запускает проекты за секунды прямо в браузере.

Читай обзор, как это работает на практике 🔗

Наглядный пример для прошлого поста, как работает одна из команд 🤡

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

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

🧩 Чек-лист для рекламных спецпроектов

Используются примеры на основе проектов для VK, но подходы легко адаптируются под любые рекламные веб-продукты.

1️⃣ Сетап проекта

➡️ Выбираем шаблон: берем готовые (create-react-app, create-vk-mini-app, vite) или клонируем проверенные боем шаблоны из других проектов.

➡️ Обновляем зависимости: следим за актуальностью внутренних библиотек и часто обновляемых пакетов (например, vk-ui, vk-bridge).

➡️ Подготавливаем среду: настраиваем CI/CD, собираем базу знаний, создаём ветки, выдаём доступы — чтобы команда могла сразу включиться в работу.

➡️ Настраиваем тестовое окружение: деплоим каждую ветку на отдельный поддомен, прописываем нужные конфиги в .gitlab-ci.yml.

2️⃣ Верстка и интерактив

➡️ Добавляем анимации: оживляем интерфейс — появления элементов, ховеры, плавные переходы.

➡️ Настраиваем интерактив: кнопки, инпуты, модалки, выпадашки — особенно внимательно проверяем поведение в Safari и на iOS.

➡️ Добавляем лоадеры: отображаем загрузку контента и блокируем повторные действия пользователя во время ожидания.

➡️ Используем VK UI: подключаем готовые компоненты для сборки экранов, анимации и навигации — особенно удобно в проектах под VK.

3️⃣ Темизация

➡️ Поддерживаем темы: светлая и тёмная, а также цветовые схемы под платформу (VK — синий)

➡️ Используем VK UI или CSS-переменные: реализуем переключение тем через контекст, хуки или встроенные механизмы библиотеки.

4️⃣ Работаем с текстами

➡️ Проверяем тексты: без опечаток, по тону и ТЗ.

➡️ Типографируем: через плагин typograf или вручную, если важна точная подача.

➡️ Добавляем шрифты: используем woff2, настраиваем прелоад, чтобы избежать мигания.

5️⃣ Работа со статикой

➡️ Сжимаем изображения: через Squoosh или аналогичные сервисы.

➡️ Оптимизируем SVG: используем @svgr/webpack для подключения как компонентов, избегаем тяжёлых SVG-анимаций.

➡️ Предзагружаем картинки: заранее загружаем изображения через loadImage() — повышаем отзывчивость интерфейса.

6️⃣ Обработка ошибок

➡️ Добавляем Error Boundary: показываем понятные сообщения об ошибках и кнопку «Перезагрузить».

➡️ Интегрируем Sentry: логируем ошибки с данными об окружении, пользователе, версии и методе.

➡️ Учитываем версионность: передаём номер сборки, чтобы понимать, устранён ли баг в новой версии.

7️⃣ Сбор статистики

➡️ Согласовываем трекеры: Метрика, GA, VK Retargeting, кастомная аналитика — по выбору клиента.

➡️ Настраиваем трекинг событий: логируем переходы, клики, скроллы — с учетом особенностей SPA.

➡️ Разделяем среды: используем отдельные счётчики для дева и прода, чтобы не мешать статистике.

8️⃣ Тестирование

➡️ Проверяем во всех средах: Chrome, Safari, Firefox, Edge, мобильные браузеры и нативные VK/OK на Android и iOS.

➡️ Тестируем поведение: навигация, модалки, переходы по «назад», свайпы, скроллы, корректность ссылок.

➡️ Добавляем dev-инструменты: eruda для отладки на мобилках, скрытые кнопки для сброса и рестарта данных.

9️⃣ Выкатка в прод

➡️ Проверяем окружение: .gitlab-ci.yml, переменные окружения, ID приложений, ссылки на API.

➡️ Чистим окружение: удаляем dev-инструменты, временные данные, финализируем тексты и изображения.

➡️ Запускаем джобу: деплоим через GitLab CI, проверяем успешность пайплайна.

➡️ Следим за состоянием: мониторим Sentry, анализируем нагрузку, при необходимости увеличиваем ресурсы.

Сохраняй себе, пригодится ☝️

🔗 Источник

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

#буст

🕸 Как работает протокол HTTP/2: основные принципы и преимущества в сравнении с HTTP/1.1

​HTTP/2 — это как переход с однополосной дороги HTTP/1.1 на скоростное шоссе: быстрее, эффективнее и без пробок.

Узнайте, как новые технологии ускоряют загрузку веб-страниц и улучшают работу приложений.

➡️ Читать статью

🐸Библиотека шарписта

🚀 Что нужно знать и уметь фронтенд-разработчику, чтобы не потеряться в 2025 году

Если хочешь оставаться востребованным фронтендером в 2025-м, готовься — лёгких путей не будет, но и ничего невозможного. Вот что действительно стоит держать под контролем:

➖ Современный JavaScript и TypeScript
Знать просто «JS» уже не прокатит. Освой новые фичи, пиши на TypeScript — он как злобный преподаватель: сначала бесит, потом понимаешь, зачем он нужен.

➖ Фреймворки — React, Angular, Vue
React до сих пор в топе, особенно с его Server Components. Если проект серьёзный — там точно что-то из этого используется. Ну или хотя бы Tailwind + React как минимум.

➖ SSR и SSG
Next.js или Nuxt.js — must-have. Умеешь делать серверный рендеринг и статическую генерацию? Значит ты не просто фронтендер, а оптимизатор SEO, лорд скорости загрузки и повелитель ботов Google.

➖ ИИ — не только хайп
GitHub Copilot, Codeium, ChatGPT-плагины — всё это твои новые тиммейты. Нет, они не отнимут работу. Но если ты не будешь с ними работать — отнимут.

➖ PWA — приложения, которые живут в браузере, но выглядят как нативные
Офлайн-режим, пуши, лайк от Google — делай как надо, и пользователи вернутся даже без интернета.

➖ WebAssembly (Wasm)
Нужен супер-перформанс? Подключи Wasm и пусть браузер дышит на полную. Особенно если ты делаешь что-то около AI, 3D или визуализации.

➖ Дизайн-системы
Делай не просто «чтобы работало», а «чтобы было консистентно и красиво». Компоненты, переиспользование, UI-киты — это как чистая кухня: никто не видит, но все кайфуют.

➖ Accessibility (A11y)
В 2025 году делать недоступные сайты — всё равно что выпускать VHS-кассеты. Не игнорь эту тему, будь профи.

Скучно точно не будет 🙂

P.S. Если хотите задать вопрос, заполните нашу гугл-форму. Это займет 5 минут.

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

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

📌 Собеседование на мидла

С опытом во фронтенде приходит понимание, что одного React и красивой верстки уже мало. На уровне мидла и сеньора важно уметь объяснять свои решения, думать про архитектуру, производительность и то, как всё работает внутри. На собеседованиях это проверяют в первую очередь. Чтобы не теряться на вопросах и понимать, чего от тебя ждут — посмотри это видео ⬇️

🔗 Собеседование на фронтенд мидл/сеньор с разбором

Показывают реальные вопросы, объясняют, что важно в ответах, и как не выглядеть джуном под стрессом.

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

#буст

🎨🧱 Tailwind или наковальня

Ты открыл Figma, но вместо фреймов видишь чанки. CSS Grid напоминает тебе о редстоуне. А когда верстаешь, кажется, что строишь портал в ад.

Если ты выбираешь цвета по аналогии с биомами и уже пытался оптимизировать DOM с помощью шалкера — у нас для тебя кое-что есть.

👉 Пройди наш тест и узнай, насколько глубоко ты ушёл в пиксельный UI/UX

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

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

Признаемся, было или да 😄

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

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

🌟 Универсальные компоненты против специализированных

Ты делаешь кнопку. Вроде просто, но решаешь сделать переиспользуемую: добавляешь пропсы на цвет, размер, иконки, лоадер, курс Меркурия. Через день — это уже не кнопка, а мини-фреймворк.

А потом ПМ говорит:

«Нужна такая же кнопка, но чтобы внутри был селект и тултип. Завтра в прод.»

Ты смотришь на своё творение… и плачешь.

И вот ты стоишь на развилке:

1️⃣ Универсальные компоненты

+ Один раз написал — используешь везде

+ Красиво в теории

- Становятся слишком умными, и потом ими невозможно пользоваться

- Каждый новый флаг ломает старые кейсы

2️⃣ Специализированные

+ Просто и понятно

+ Быстро пилится под задачу

- В каждом модуле своя кнопка, своя модалка, свой select

- Стиль, UX и логика могут расползаться

Мораль?

Универсальность — это хорошо… до тех пор, пока ты не начал дебажить. А потом ты просто хочешь простую кнопку, которая не знает про весь остальной мир.

💡 А ты в каком лагере — абстракции или прагматизма?

Давайте драться в комментах — по-доброму, конечно.

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

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

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

🔘 Как на самом деле работает async и await

🔘 Команда дня: Vite для быстрого старта проекта

🔘 Чек-лист для рекламных спецпроектов: используются примеры на основе проектов для VK

🔘 Что нужно знать и уметь фронтенд-разработчику, чтобы не потеряться в 2025 году: полезные советы

🔘 Собеседование на мидла: реальные вопросы, объясняют, что важно в ответах, и как не выглядеть джуном под стрессом

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

#свежак

⭐ Что такое теневые DOM деревья

Shadow DOM — это технология из стандарта Web Components, позволяющая создавать изолированные участки DOM с собственными стилями и логикой.

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

Зачем нужен:

➡️ Инкапсуляция: стили и скрипты внутри Shadow DOM не влияют на остальную часть страницы и наоборот.

➡️ Изоляция: элементы внутри Shadow DOM недоступны через document.querySelector, что предотвращает случайные изменения.

➡️ Переиспользуемость: компоненты можно использовать в разных частях приложения без опасений за конфликты стилей.

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

<!-- HTML -->
<div id="host"></div>

// JavaScript
const host = document.querySelector('#host');
const shadowRoot = host.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
<style>
p { color: blue; }
</style>
<p>Это текст внутри Shadow DOM</p>
`;

console.log(document.querySelector('p')); // null

В этом примере элемент <p> находится внутри Shadow DOM и недоступен через глобальный document.querySelector.

Для более глубокого изучения Shadow DOM и Web Components можно обратиться к следующим ресурсам:

🔗 MDN Web Docs: Using shadow DOM

🔗 Современный учебник JavaScript: Shadow DOM

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

#буст

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

Middle-frontend разработчик — от 280 000 ₽, гибрид (Москва)

Frontend разработчик — от 275 000 до 350 000 ₽, удаленно (Санкт-Петербург)

Frontend-разработчик — от 100 000 до 120 000 ₽, офис/гибрид (Краснодар)

Middle+ Frontend Web3 Developer — от 200 000 до 260 000 ₽, удаленно (Дубай)

Разработчик интерфейсов в Вертикали — гибрид (Москва)

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

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

#свежак