Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
12 August 2025 20:03
🔥 Как мы мигрировали на Vue 3
В статье команда «М.Видео – Эльдорадо» делится опытом миграции с Vue 2 на Vue 3, перехода на Vite и TypeScript, а также оптимизацией зависимостей.
Все это позволило ускорить сборку и уменьшить вес проекта без приостановки разработки новых фич 😵💫
Что вы узнаете:
➡️ Как провести аудит и приоритизацию техдолга.
➡️ Плавная миграция на Vue 3 и Vite.
➡️ Как автоматизация ускоряет разработку.
🔗 Читать по ссылке на Habr
🐸 Библиотека фронтендера
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
11 August 2025 20:03
😎 Топ-вакансий для фронтендеров за неделю
Frontend‑разработчик — от 100 000 ₽, гибрид (Санкт-Петербург)
Senior Frontend-разработчик (React) — от 270 000 до 320 000 ₽, удаленно (Санкт-Петербург)
Frontend developer Junior/Junior+ — удаленно (Москва)
Senior React Developer — от 220 000 до 300 000 ₽, удаленно (Москва)
Frontend Developer — от 4 500 до 5 500 €, удаленно (Кипр, помощь с переездом)
➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs
🐸 Библиотека фронтендера
#свежак
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
10 August 2025 15:05
📌 ТОП-5 инструментов для аудита UI во фронтенде
Не всегда баги в логике — часто проблемы в визуале: съехавшие элементы, неверные отступы, несогласованные цвета, низкая читаемость. Эти инструменты помогут протестировать именно UI.
➡️ Polypane
Браузер для фронтендеров, который позволяет одновременно тестировать адаптивность, доступность и дизайн на разных экранах.
➡️ Storybook
Среда для разработки и изолированного тестирования UI-компонентов, что помогает находить визуальные баги ещё до интеграции.
➡️ Percy
Инструмент для визуального регрессионного тестирования, автоматически фиксирует и сравнивает изменения интерфейса между версиями.
➡️ Contrast
Проверяет контрастность текста и фона на соответствие стандартам WCAG, чтобы интерфейс был читаем для всех пользователей.
➡️ VisBug
Расширение для Chrome, позволяющее прямо в браузере изменять CSS, проверять позиционирование и оперативно тестировать UI.
🐸 Библиотека фронтендера
#свежак
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
09 August 2025 11:01
🐸 Библиотека фронтендера
#развлекалово
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
08 August 2025 09:02
🛠 Фишка библиотеки: why-did-you-render
why-did-you-render — это дебаг-библиотека для React, которая показывает, что именно вызвало лишний ререндер компонента.
В консоли видно, какие пропсы или состояние изменились — даже если данные по сути остались теми же. Это помогает быстро вычислить узкие места 👍
Что умеет:
— Сравнивает старые и новые пропсы/стейт
— Подсвечивает !==-сравнения, где изменения фиктивны
— Работает с функциями и классами, включая memo, useMemo, useCallback
Пример использования:
import React from 'react';
import whyDidYouRender from '@-software/why-did-you-render';
whyDidYouRender(React, {
trackAllPureComponents: true
});
🔗 GitHub проекта🐸 Библиотека фронтендера#буст
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
07 August 2025 20:01
🫠 Как я отловил «утечку» стилей через CSS-in-JS в крупном SPA
Наш подписчик работал над крупным корпоративным SPA на React с использованием Emotion для стилизации компонентов. В какой-то момент приложение стало заметно «тормозить» после нескольких переключений между разделами:
«Заглянув в DevTools, увидел, что <head> заполняется дублирующимися <style>-тегами. Оказалось, я каждый раз создавал новый Emotion-cache при рендере, и старые стили не удалялись — вечером перенёс провайдер кеша в корень приложения, и лаги исчезли.»
❓ А вы сталкивались с такими «утечками»?
🐸 Библиотека фронтендера#междусобойчик
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
06 August 2025 20:03
Бедный кролик - бедный ты 💻
🐸 Библиотека фронтендера
#развлекалово
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
05 August 2025 20:03
🙂 Вайб-кодинг: модный тренд или путь к деградации
ИИ всё глубже проникает в код — и с этим уже никто не спорит. Но что, если вы почти не пишете код руками, а просто даtте команды нейросети?
В карточках:
➡️ Что такое вайб-кодинг на самом деле
➡️ Почему его обожают новички и выгоревшие синьоры
➡️ Какие риски он влечёт за собой
➡️ Что думают разработчики и работодатели
🔗 Полный текст статьи — по ссылке
🐸 Библиотека фронтендера
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
04 August 2025 20:05
😎 Топ-вакансий для фронтендеров за неделю
Frontend Engineer — от 3000 $, удаленно (Лондон)
Middle React Native разработчик — офис (Москва)
Frontend Developer (React JS) Middle — 1 100 $, удаленно (Астана)
Frontend разработчик на Angular — от 100 000 до 200 000 ₽, офис (Казань)
Frontend-разработчик — от 150 000 до 180 000 ₽, удаленно (Москва)
➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs
🐸 Библиотека фронтендера
#свежак
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
03 August 2025 15:04
📌 От прототипа до класса: как устроено наследование в JS
Как JavaScript находит методы, кто у кого что наследует и зачем нужен extends. 5 статей, которые расставят всё по полочкам.
1. Прототипное наследование
Подробно рассказывает про механизм [[Prototype]], цепочку прототипов и делегирование свойств через proto.
2. Наследование классов
Разбирает синтаксис class и extends, эффективность и подводные камни ES6-наследования.
3. Prototypal Inheritance Explained
Свежая статья с простыми объяснениями, примерами и визуальными схемами цепочек прототипов.
4. 7 способов реализации наследования в JavaScript
Обзор альтернатив и техник: от Object.create до работы со ссылочными типами, плюсы и минусы каждого подхода.
5. MDN: Inheritance & the prototype chain
Официальная документация MDN: простое объяснение чего искать JavaScript при обращении к свойству, как работает цепочка наследования.
🐸 Библиотека фронтендера
#свежак
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
02 August 2025 11:01
🦇
🐸 Библиотека фронтендера
#развлекалово
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
01 August 2025 09:05
🔥 Как работает TypeScript внутри — и почему он может тормозить
Глубокий разбор проблем с производительностью TypeScript в больших проектах и монорепах.
В подкасте:
➖ Почему TS может тормозить в монорепозиториях — и что с этим делать
➖ Как project references и workspace реально ускоряют компиляцию
➖ Почему VSCode иногда медленнее самого tsc
➖ Альтернативы: Go‑компилятор для TypeScript и другие неожиданные решения
➖ Советы по оптимизации типов, импорта и структуры проекта
Разговор не про хейт TypeScript, а про то, как сделать его быстрым и удобным даже в огромных кодовых базах.
🔗 Слушать выпуск
🐸 Библиотека фронтендера
#буст
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
31 July 2025 09:00
⭐️ Чек-лист для Performance-анализ перед релизом
Перед запуском проекта важно проверить его производительность. Этот чек-лист поможет выявить слабые места и обеспечить пользователям быстрый и стабильный опыт.
1️⃣ Тестирование TBT (Total Blocking Time):
— Используйте инструменты, такие как Lighthouse или WebPageTest, чтобы измерить TBT и убедиться, что основная часть контента становится интерактивной в пределах 100-200 мс.
2️⃣ Ленивая загрузка ресурсов:
— Убедитесь, что изображения, видео и другие ресурсы, которые не видны при загрузке страницы, загружаются только по мере необходимости (lazy-loading).
3️⃣ Использование requestIdleCallback:
— Оптимизируйте неважные задачи (например, отправка аналитики, обработка неважных фонов задач) с помощью requestIdleCallback, чтобы не блокировать основной поток выполнения.
4️⃣ Шрифты не блокируют рендер:
— Используйте font-display: swap для веб-шрифтов, чтобы они не блокировали рендер страницы при их загрузке.
5️⃣ Оптимизация загрузки JavaScript:
— Разделите код на части с помощью динамической загрузки (code splitting), чтобы минимизировать начальный бандл. Используйте defer или async для скриптов.
6️⃣ Ресурсы и кеширование:
— Настройте заголовки кеширования для статичных ресурсов и используйте механизмы вроде stale-while-revalidate для API-запросов.
7️⃣ Минимизация и сжатие ресурсов:
— Проверьте, что весь JavaScript, CSS и HTML сжаты и минифицированы, используя инструменты типа Terser или CSSNano.
8️⃣ Асинхронная загрузка стилей и скриптов:
— Используйте preload или prefetch для приоритетных ресурсов, чтобы ускорить их загрузку, а также отложите менее важные ресурсы.
9️⃣ Проверка по инструментам измерения производительности:
— Прогоните ваше приложение через Lighthouse и WebPageTest, чтобы узнать, есть ли какие-то узкие места, которые могут замедлять работу.
🔧 Завершающая проверка:
— Пройдитесь по результатам и проверьте, не превышают ли важные метрики (например, FCP, LCP) пороговых значений.
🐸 Библиотека фронтендера
#буст
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
30 July 2025 09:01
📌 Команда дня: загружаем компонент отложенно
Позволяет лениво подгружать компонент, разделяя бандл и ускоряя первую загрузку.
const LazyComponent = React.lazy(() => import("./MyComponent»));
✔️ Используется для тяжёлых страниц, графиков, модалок, админок и любых не-критичных блоков.
Зачем это нужно:
— Уменьшает размер основного бандла.
— Улучшает скорость первого рендера (LCP).
— Позволяет загружать компонент только тогда, когда он реально нужен.
😳 Лайфхаки:
— Можно обернуть в Suspense, чтобы показать loader:
<Suspense fallback={<Spinner />}>
<LazyComponent />
</Suspense>
— Компонент загружается один раз и кешируется браузером.
— Можно использовать dynamic import и в Next.js:
const LazyComponent = dynamic(() => import("./MyComponent"), { ssr: false });
🐸 Библиотека фронтендера#буст
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
29 July 2025 14:04
Последний шанс залутать курсы Proglib Academy с выгодой 40% и пожизненным доступом.
До 1 августа действует скидка на курсы по математике для Data Science, алгоритмам и структурам данных, обновлённому Python, frontend-разработке с нуля, основам IT для непрограммистов, базовым моделям ML, а также архитектурам и шаблонам проектирования.
Выбираем и забираем 👈
P.S. Акция не распространяется на курсы «AI-агенты для DS-специалистов» и «ML для старта в Data Science».
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
12 August 2025 09:01
😀 Как экономить трафик на API-запросах
Частая проблема — пользователь меняет фильтр или вводит новый запрос, а старые fetch всё ещё летят на сервер.
В итоге:
— Лишняя нагрузка на бэкенд
— Дублирующийся трафик
— Мешанина в результатах
💡 Решение: отменяйте старые запросы через AbortController.
const c = new AbortController();
fetch('/search?q=cat', { signal: c.signal });
// отмена
c.abort();
Минимум кода, максимум пользы — особенно в поиске и live-фильтрах. Работает и в
axios (v1.2+), и во всех современных браузерах.
🐸 Библиотека фронтендера#буст
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
11 August 2025 09:01
❤️ Производительность при рендеринге больших списков
В вашем приложении есть список из 1000+ элементов, который подгружается на страницу сразу. Пользователь жалуется на низкую производительность и долгую загрузку страницы.
❓ Как бы вы улучшили производительность?
🐸 Библиотека фронтендера
#междусобойчик
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
09 August 2025 16:06
🧐 Зоопарк моделей в ML: с чего начать?
Открываешь статью по машинному обучению — и в тебя летят слова: трансформеры, бустинги, SVM, регрессии.
Кажется, придётся учить всё это, иначе в ML не пустят.
Хорошая новость: 90% задач можно закрыть 2–3 классическими методами. Разберёшь их — уже сможешь собирать работающие проекты. А хайповые названия подождут.
Важно: не распыляйся на всё подряд. Начни с базового — это фундамент, на котором держится остальное.
👉 Успей попасть на курс «ML для старта в Data Science»
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
08 August 2025 20:03
🤑 Function Declaration vs Expression — в чём разница
В JavaScript одну и ту же функцию можно объявить по-разному — и это влияет на поведение кода.
В карточках разобрали:
😗 Чем отличается function declaration от function expression
😗 Почему одна работает до строки, а другая — падает с ошибкой
😗 Какой пример можно привести на собеседовании
🐸 Библиотека фронтендера
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
07 August 2025 21:00
Proglib Academy — это место, где вы превращаете теорию в практику. Здесь ваши знания становятся проектами для портфолио, а вы — более уверенным специалистом.
Выберите курс, который поможет сделать следующий шаг ⬇️
🚀 Для тех, кто начинает путь в IT:
— Основы IT для непрограммистов
— Программирование на Python (обновлённый)
— Frontend-разработчик с нуля: HTML, CSS, JavaScript
🧠 Для будущих и настоящих Data Scientist'ов:
— ML для старта в Data Science (начинается в сентябре)
— Базовые модели ML и приложения
— Математика для Data Science
— AI-агенты для DS-специалистов (скоро второй поток)
🛠️ Для опытных разработчиков, готовых к росту:
— Алгоритмы и структуры данных
— Архитектуры и шаблоны проектирования
Независимо от вашей цели, у нас есть курс, который поможет её достичь. Переходите в Proglib Academy, выбирайте свой путь и инвестируйте в навыки, которые всегда будут в цене!
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
07 August 2025 09:01
👍 Промпт, который превращает макет в HTML + CSS
ChatGPT с этим промптом превращается в мощный парсинг-инструмент: скрин → код.
Что нужно сделать:
➡️ Загрузить скриншот интерфейса, макета или сайта
➡️ Вставить промпт ниже
Промпт:
You're a professional web developer and UI/UX expert.
I’m going to upload an image of a website design or component. Please:
1. Analyze the layout and design from the image.
2. Generate clean, responsive HTML and CSS (Tailwind is fine too).
3. Add comments in the code to explain your logic.
4. Ask me any questions if something in the image isn’t clear.
Output everything inside code blocks and make sure it's mobile-friendly.
Работает отлично для:
— hero‑секций
— форм логина/регистрации
— табличек с ценами
— админок и портфолио
🐸 Библиотека фронтендера#буст
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
06 August 2025 09:01
🐟 Как оптимизировать фронтенд с помощью Web Vitals
Web Vitals — это метрики от Google, которые измеряют реальное восприятие производительности пользователями.
Особенно важны:
* LCP — скорость загрузки главного контента
* INP — отзывчивость при взаимодействии
* CLS — стабильность интерфейса
Зачем прокачивать Web Vitals:
📍 Сайт загружается быстрее — пользователь видит контент без ожидания
📍 Интерфейс становится стабильным — ничего не дергается и не мешает восприятию
📍 Растёт SEO-трафик — Google любит быстрые и стабильные страницы
Как внедрить в проект:
1️⃣ Отслеживание метрик в коде:
import { getCLS, getINP, getLCP } from 'web-vitals';
getCLS(console.log);
getINP(console.log);
getLCP(console.log);
2️⃣ Анализ с помощью Lighthouse:
— Откройте DevTools → вкладка Lighthouse
— Запустите аудит и смотрите рекомендации по улучшению
3️⃣ Улучшения в реальном коде:
— Используйте
loading="lazy" для изображений
— Добавьте
font-display: swap к шрифтам
— Минимизируйте и разбивай JS на чанки
🐸 Библиотека фронтендера#буст
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
05 August 2025 09:03
🌸 Box Model, с которым не больно верстать
— display, float, clear, width/height, margin — простые, но коварные
— auto, %, inherit — ведут себя по-разному в зависимости от контекста
— даже один auto может всё сломать, если не учесть родителя
📌 На картинке — та самая шпаргалка, которую стоит сохранить, чтобы не гуглить в самый неудобный момент.
🐸 Библиотека фронтендера
#буст
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
04 August 2025 09:02
🤔 Задача: как должен вести себя интерфейс при удалении
Вы создаёте SPA для управления задачами. У каждой задачи есть id, title и status. Удаление реализовано так:
await fetch(`/api/tasks/${id}`, { method: 'DELETE' });
Далее замечаете следующую проблему: после клика по «Удалить» задача исчезает из интерфейса, но при ошибке сервера (например, 500) остаётся в базе.
Пользователь думает, что задача удалена, но при обновлении страницы она возвращается
😭❓ Как улучшить UX и корректно реализовать удаление задачи?
🐸 Библиотека фронтендера#междусобойчик
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
02 August 2025 14:56
🧩 Компоненты или все в одном
Когда разрабатываете интерфейс, всегда возникает вопрос: стоит ли разделять его на маленькие, атомарные компоненты или проще собрать всё в одном?
Каждый подход имеет свои плюсы и минусы, и важно выбрать тот, который подходит именно для вашего проекта.
✅ Преимущества разделения на компоненты:
— Маленькие компоненты легко переиспользуются, что упрощает поддержку и расширение проекта.
— Компоненты легче тестировать и изменять, что делает код более гибким и читаемым.
— Когда каждый работает над своим компонентом, это упрощает взаимодействие в команде.
⛔️ Почему всё в одном тоже имеет смысл:
— В небольших проектах бывает проще не заморачиваться на создание множества компонентов, а просто сделать один большой.
— Иногда большое количество маленьких компонентов может повлиять на производительность, особенно в крупных приложениях.
— Когда всё в одном компоненте, проще контролировать логику и избежать излишней абстракции.
Что для вас удобнее: дробить интерфейс на множество маленьких компонентов или работать с одним большим?
Поделитесь в комментариях! ✏️
🐸 Библиотека фронтендера
#междусобойчик
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
01 August 2025 20:04
⭐️ Что известно про A11y
Доступность (A11y) — не про «особые случаи», а про качество интерфейса в целом. Если элемент невозможно использовать с клавиатуры, он недоступен. Если цветовая схема неразборчива — он недоступен.
Что разобрано в карточках:
➡️ Как семантика и aria-атрибуты помогают пользователям с разными потребностями
➡️ Какие визуальные и технические требования предъявляются к доступному UI
➡️ Чем и как проверять интерфейс на соответствие стандартам доступности
Если вы ещё не проверяли свои компоненты на A11y — самое время начать.
🐸 Библиотека фронтендера
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
31 July 2025 20:03
🧑💻 Безумные запросы от дизайнеров, которые пришлось реализовать
Работа с дизайнерами — это всегда вызов, когда их креативные идеи выходят за рамки привычного.
Вопрос от подписчика:
«Однажды дизайнер настоял на том, чтобы кнопки в интерфейсе были в стиле старых приложений Windows 95 — с анимациями и даже с мигающими кнопками. «Старый стиль», «кнопки, которые моргают», — все это нужно было сделать с помощью CSS. Конечно, такой запрос вызвал у меня вопросы и у всей команды, но в итоге мы смогли воссоздать эту атмосферу, только с использованием современных технологий.»
❓ Какие странные идеи от дизайнеров вам приходилось выполнять? Что из этого точно не для продакшн?
Поделитесь своими историями в комментариях 🔚
P.S. Если хотите задать вопрос, заполните нашу
гугл-форму. Это
займет
5
минут
.🐸 Библиотека фронтендера#междусобойчик
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
30 July 2025 20:01
Все герои выдуманы и совпадения случайны, конечно же 😶
🐸 Библиотека фронтендера
#развлекалово
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
29 July 2025 20:00
💡 Web3 Frontend: с чего начать
Разработка интерфейсов для dApp — это не просто интеграция с блокчейном, а создание безопасных и удобных инструментов для пользователей.
Что в карточках:
✅ Основы Web3: ключевые термины и понятия
✅ Какие библиотеки нужны для работы
✅ Настройка кошельков и взаимодействие с сетью
🔗 Полный текст статьи — по ссылке
🐸 Библиотека фронтендера
Читать полностью…
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
29 July 2025 13:04
👍 Что нового в Next.js
14 июля вышел Next.js 15.4, в котором улучшена производительность и стабильность. Теперь команда next build --turbopack прошла все 8298 интеграционных тестов, что приближает Turbopack к стабильному релизу.
Также был анонсирован первый взгляд на Next.js 16 — следующую мажорную версию, которая принесет новые возможности для разработки.
🔗 Читать подробнее
🐸 Библиотека фронтендера
#свежак
Читать полностью…
21509