☺️ Команда дня: 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

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

#свежак

🐱 Шпаргалка: методы работы со строками и RegExp в JavaScript

Кратко и по делу — основные методы работы со строками и регулярными выражениями: search, match, replace, а также полезные шаблоны для замены вроде $&, $', $$ и других.

Отличный инструмент, чтобы освежить знания или быстро найти нужный синтаксис.

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

#буст

🚀 ТОП-38 Hover-эффектов для современного веб-дизайна в 2025 году

Сегодня просто красиво — уже не работает. Люди ожидают деталей, анимации, микровзаимодействий. Именно это и собрал автор: 38 hover-эффектов, которые делают интерфейс живым, современным и цепляющим.

Что в статье:

➡️ Подборка визуально эффектных решений

➡️ Примеры использования и разбор кода

➡️ Акценты на актуальные тренды 2025 года

🔗 Смотреть и вдохновляться

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

😺 Как создавать адаптивные страницы: от медиазапросов до гибких сеток

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

1️⃣ Используем медиазапросы (@media), чтобы адаптировать стили под разные экраны

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

Пример кода:

/* Для мобильных устройств */
body {
font-size: 14px;
}

/* Для экранов шириной от 768px */
@media (min-width: 768px) {
body {
font-size: 16px;
}
}

2️⃣ Применяем гибкие сетки с помощью Flexbox и CSS Grid

Flexbox и CSS Grid дают нам возможность создавать макеты, которые «тянутся» или сжимаются в зависимости от размера экрана.

Пример с Flexbox:

.container {
display: flex;
flex-wrap: wrap;
}

.item {
flex: 1 1 30%;
margin: 10px;
}

Пример с CSS Grid:

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

.item {
background-color: #f0f0f0;
padding: 20px;
}

3️⃣ Используем относительные единицы измерения для гибкости

Вместо фиксированных значений мы выбираем такие единицы измерения, как em, rem, %, чтобы размеры и отступы изменялись в зависимости от размера экрана.

Пример кода:

.container {
width: 80%;
padding: 2rem;
}

4️⃣ Придерживаемся подхода mobile-first

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

Пример кода:

Для мобильных устройств

body {
font-size: 14px;
}

Для экранов шириной от 768px
@media (min-width: 768px) {
body {
font-size: 16px;
}
}

5️⃣ Тестируем сайт на разных устройствах

Используем инструменты вроде BrowserStack или проверяем в режиме мобильных устройств в браузерах. Это помогает найти и устранить все проблемы до релиза.

🚀 Советы:

• Используйте max-width для медиазапросов, чтобы стили применялись на экранах с шириной меньше указанного значения.

• Применяйте min-width для добавления стилей на более крупных экранах.

• Активно используйте clamp() для динамической настройки размеров в зависимости от размера экрана.

• Всегда применяйте object-fit: cover; для изображений, чтобы они корректно масштабировались в контейнерах.

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

#буст

😰 Мошенники получается….

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

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

💬Промпт для создания формы обратной связи с помощью Tailwind CSS

Если вам нужно быстро и эффективно разработать форму обратной связи с минимальными усилиями — не пренебрегайте Tailwind CSS.

Для удобства можно использовать данный запрос, но обязательно проверяйте на точность (нам выдал без метатега кодировки UTF-8).

PROMPT:

Generate a semantic HTML and Tailwind CSS "Contact Support" form consisting of the user's name, email, issue type, and message. The form elements should be stacked vertically and placed inside a card.

Также вы можете использовать универсальный промпт для других задач:

Generate a semantic and accessible HTML and (framework) CSS [UI component] consisting of [component parts]. The [component parts] should be [layout].

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

#буст

🚀 Как ускорить React на 300%: реальный кейс

Виртуальный DOM — вещь полезная, но не всемогущая. Если каждый клик запускает цепочку ререндеров, он не спасёт. Со временем даже шустрое React-приложение превращается в тормозящего гиганта.

Что в статье:

📍 Разбор реального кейса: как e-commerce приложение превратилось из быстрого в тормозное, и что помогло это исправить

📍 Причины медленной работы: ненужные ререндеры, монолитные компоненты, неоптимальный context

📍 Использование инструментов: React DevTools, why-did-you-render, профилирование

📍 Практические примеры кода «до» и «после»

📍 Хаки и техники: React.memo, useCallback, useMemo, react-window, динамическая загрузка компонентов

🔗 Читать статью

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

🙂 Как не утонуть в дедлайнах и при этом успевать жить

Иногда кажется, что жизнь — это просто список задач в Jira. Только без кнопки “Complete” и с багами в расписании. Когда работаешь фронтендером, особенно в стартапе или на жестком проекте, легко потеряться между фичами, срочными хотфиксами и «вот это надо было ещё вчера».

Моя история:

Был у меня период, когда я всерьёз думал, что «выйти в оффлайн» — это привилегия. Дни сливались в один длинный поток: созвон — коммит — правка — деплой — баг — снова правка.
Я ел на бегу, спал плохо, даже выходные проваливались в режим «да я тут чуть-чуть подфикшу, это на 5 минут» (никогда не 5 минут).

Однажды просто поймал себя на мысли:
«А я вообще живу, или просто существую между спринтами?»

С тех пор стал менять подход:

• Планировать не только работу, но и отдых. Прям в телефоне ставил напоминание «погулять» или «позвонить другу».

• Старался заканчивать день в нормальное время, даже если не всё сделал. Потому что «успеть всё» — это миф.

• Начал говорить честно команде, если не вывозил. Без героизма. Просто по-человечески.

• И главное — напоминал себе, что я не машина. Я не создан быть продуктивным 24/7.

💡 Что понял:

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

А вы как справляетесь, когда накрывает волной задач? Что помогает не терять себя?

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

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

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

😎 Zustand и DevTools: лайфхаки для управления состоянием в React

Интеграция библиотеки Zustand с React DevTools превращает её в мощный инструмент для быстрого отслеживания и отладки состояния в реальном времени.

1️⃣ Сначала установим Zustand

npm install zustand

Или с использованием yarn:

yarn add zustand

Также убедитесь, что у вас установлены React DevTools в браузере.

2️⃣ Теперь добавим поддержку DevTools в ваше хранилище Zustand. Для этого оборачиваем хранилище в devtools middleware:

import create from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(devtools((set) => ({
bears: 0,
increase: () => set((state) => ({ bears: state.bears + 1 })),
decrease: () => set((state) => ({ bears: state.bears - 1 }))
})));

Использование Redux DevTools для дополнительных функций

Если вы хотите использовать расширенные возможности, такие как time travel (перемещение по истории состояния), вы можете настроить Redux DevTools с Zustand.

3️⃣ Установим Redux DevTools:

npm install simple-zustand-devtools --dev

Или:

yarn add simple-zustand-devtools --dev

4️⃣ Подключим Redux DevTools:

import create from 'zustand';
import { mountStoreDevtool } from 'simple-zustand-devtools';

const useStore = create((set) => ({
bears: 0,
increase: () => set((state) => ({ bears: state.bears + 1 })),
decrease: () => set((state) => ({ bears: state.bears - 1 }))
}));

if (process.env.NODE_ENV === 'development') {
mountStoreDevtool('Store', useStore);
}

Какие плюсы это использовать:

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

➡️ Перемещайтесь по истории состояний, чтобы понять, что именно изменилось, и как это повлияло на приложение.

➡️ React DevTools предоставляет удобный интерфейс, который позволяет отслеживать состояние и взаимодействовать с ним без необходимости писать дополнительный код.

➡️ Если в вашем проекте используется несколько хранилищ Zustand, вы сможете отслеживать их изменения одновременно, что особенно полезно в крупных приложениях.

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

#буст