😎 «Вайб-кодинг»: почему доверить свой проект ИИ – это кринж

Новый тренд среди разработчиков — «вайб-кодинг». Это когда ты не продумываешь архитектуру, не пишешь руками, а просто даёшь задание ИИ и ждёшь, что он всё сам сделает. Быстро, магически… и с кучей подводных камней.
⠀
Что в статье:

😗 Как «вайб-кодинг» реально работает (или не работает);

😗 Какие ошибки делают даже самые продвинутые модели;

😗 Почему проект, собранный ИИ, чаще всего выглядит как полуфабрикат.
⠀
Это не нытьё про «машины нас заменят», а здравый взгляд на технологии без розовых очков.
⠀
👉 Читайте статью, обсуждайте, спорьте

🚀 Быстрая очистка localStorage: для тех, кто дебажит по 100 раз в день

Тестируешь авторизацию, сбрасываешь флаг «прошёл онбордин»— localStorage быстро забивается хламом. Вот как
чистить его без лишних кликов:

⏭ Через консоль

Универсальный способ для любого браузера:

localStorage.clear()

• Открой DevTools (F12)

• Перейди на вкладку Console

• Вбей команду — и всё, память чиста.

⏭ Chrome DevTools

• F12 → вкладка Application

• Слева: Local Storage → нужный домен

• ПКМ → Clear

⏭ Firefox DevTools

• F12 → вкладка Storage

• Local Storage → домен

• ПКМ → Delete All

⏭ Быстро с хоткеем (через расширение)

Если задолбался каждый раз лазить в DevTools — поставь Clear Local Storage

• По умолчанию:

Alt + Shift + L (Windows/Linux)
Cmd + Shift + L (Mac)

Грязный localStorage — частая причина бага. Чисти в один клик или шорткат — и дебажь спокойно 🫡

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

#буст

🔄🚀 Express vs Fastify: какой фреймворк следует использовать в 2025 году

В мире backend-разработки всё меняется, и то, что работало в 2015, может тормозить твой проект в 2025. Express уже давно стал классикой, но стоит ли держаться за него, когда на горизонте есть Fastify — молодой, быстрый и модульный?

➡️ Что в статье:

• Что такое Express и Fastify, в чём разница

• Какой фреймворк быстрее и почему

• Где проще настраивать архитектуру

• Что лучше подходит для масштабируемых проектов

• У кого сильнее сообщество и экосистема

Читай до конца и выбирай фреймворк, который действительно ускорит твой проект, а не тянет его назад 🔗

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

🌟

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

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

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

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

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

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

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

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

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

➡️ Тенденции фронтенд-разработки в 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

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

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

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

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

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