Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

💡 Совет для начинающих фронтендеровНужно проверить, как блок будет выглядеть в другом месте страницы? Не спешите открывать редактор и менять HTML.🔤 В Chrome, Firefox, Edge и Safari можно просто перетащить элемент в дереве DOM прямо в DevTools.Это удобно для быстрой проверки:— как изменится вёрстка— влияет ли родительский контейнер на элемент— не ломаются ли стили после перестановки— где именно находится проблема в разметке❗️ Частая ошибка джунов — менять код, пересобирать проект и обновлять страницу ради каждого эксперимента. DevTools позволяют проверить идею за несколько секунд.📍 Навигация: [Вакансии]🐸 Библиотека фронтендера#readme #devtools

👍 Пасхалки для вашего пет-проектаНашли забавную JavaScript-библиотеку easter-egg-collection, которая добавляет на сайт десятки скрытых анимаций и эффектов.Достаточно подключить библиотеку и ввести секретное слово вроде:unicorn 🦄mario 🎮pikachu ⚡nyancat 🌈sonic 💨После этого на странице появится соответствующая анимация или персонаж.🔗 GitHub📍 Навигация: [Вакансии]🐸 Библиотека фронтендера#stack

😳 Подсветить активную ссылку в Next.js кажется простой задачейПока не сталкиваешься с App Router.Что выбрать: usePathname() или useSelectedLayoutSegments()? Как показать pending-состояние при переходе? Почему ссылка может мигнуть после загрузки страницы? И при чём тут cacheComponents и гидрация?Подготовили 5 карточек, где разобрали основные подходы и подводные камни при создании собственного NavLink в Next.js.Сохраняйте в закладки — пригодится каждому, кто работает с App Router 💡📍 Навигация: [Вакансии]🐸 Библиотека фронтендера#under_hood

🖥 Шпаргалка по React HooksСобрали небольшой файл по основным хукам React — с примерами и быстрыми пояснениями.Внутри:— useState и useReducer— useEffect и useLayoutEffect— useContext— useMemo и useCallback— useRef и useImperativeHandle— Custom HooksПолезно для повторения, подготовки к собеседованию и ежедневной разработки на React ✅📍 Навигация: [Вакансии]🐸 Библиотека фронтендера#артефакт #react

🤖 Мы тут подготовили небольшую игру по ИИ-агентамВ ней нужно собрать AI-агента на LangGraph: выбрать узлы, пройти развилки и запустить собственный workflow.Никакой теории — сразу практика. Можно наглядно увидеть, как работают агентные системы, проверьте свои знания или показать другим как это всё работает 🔥🎁 За прохождение получите персональную скидку на курс. Чем больше баллов наберете — тем больше будет скидка.Плюс сейчас действует предложение: покупаешь 1 курс, получаешь еще 2 любых в подарок. Для этого надо будет оставить заявку на сайте академии после прохождения игры.🚀 Собрать своего AI-агента

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

🤖 Используешь AI для написания кода? В Яндексе покажут, как применять AI для реальных задач разработки.23 июня в 19:00 совместно с Яндексом проведём открытый урок «AI-инструменты в разработке: как писать код быстрее с помощью ассистентов».Спикер — Ольга Лукьянова, руководитель команды поиска и навигации по коду в SourceCraft. Более 18 лет развивала инструменты для разработчиков в JetBrains и руководила разработкой IDE в Huawei.Что получишь на уроке:— поймёшь, как использовать AI-ассистентов и облачных агентов в работе;— научишься быстрее разбираться в новых проектах и кодовой базе;— узнаешь, какие задачи стоит отдавать AI и как получать качественный результат;— увидишь полный workflow работы с AI: от постановки задачи до код-ревью.На уроке — живой разбор реального проекта с кодом. Ольга покажет промпты из рабочих сценариев и ответит на ваши вопросы в Q&A.⚠️ Количество мест ограничено🗓️ Когда: 23 июня, 19:00 (МСК)👉 Занять место на открытом уроке

👋 Ищем разработчиков, которые недавно проходили IT-курсыЕсли за последние 2 месяца вы где-то покупали курс или проходили интенсив, хотим узнать о вашем опыте 🔥После какого обучения вы почувствовали реальный прогресс? А после какого осталось ощущение, что потратили время или деньги зря?❗️ Ваш опыт поможет нам создавать программы, которые действительно приносят пользу разработчикам.👉 Напишите в бот, о каком курсе можете рассказать и мы пришлем небольшой опросник: @proglibrary_feedback_botНам нужны 10-15 человек, готовых поделиться своим опытом.🎁 В благодарность — подписка на Cursor, Claude или другой AI-инструмент до 3 000₽, либо денежное вознаграждение.

🌴 TanStack Table V9 выходит в BetaПосле нескольких лет разработки команда TanStack представила TanStack Table V9 Beta.Что изменилось:🈂️ новый механизм управления состоянием на базе TanStack Store🈂️ более точечные ререндеры через селекторы и подписки🈂️ меньше потребление памяти в больших виртуализированных таблицах🈂️ tree-shaking для фич — в бандл попадает только то, что реально используется🈂️ возможность создавать собственные расширения таблицы через feature API🈂️ новые DevTools для отладки состояния и данных🈂️ улучшенная поддержка React Compiler и современных версий ReactЕсли используете TanStack Table в крупных проектах, релиз точно стоит изучить.🔗 Ссылка на блог📍 Навигация: [Вакансии]🐸 Библиотека фронтендера#release_digest

🔗 Какие библиотеки выбирают React-разработчики в 2026В гайде собрали актуальные библиотеки для разных задач:— Vite, Next.js, TanStack Start— Zustand и TanStack Query— React Router и TanStack Router— Tailwind CSS и shadcn/ui— React Hook Form, Zod, Playwright— Motion, Recharts, Tauri, Expo и другиеПолезно, если собираете новый проект или хотите сверить свой стек с тем, что сейчас используют в экосистеме 💡🔗 Читать гайд📍 Навигация: [Вакансии]🐸 Библиотека фронтендера#read_watch

🤩 Гайд по выживанию на собесе по APIДаже если вы не пишете backend, вопросы про API на собеседованиях встречаются постоянно.Например:— Когда использовать PUT, а когда PATCH?— Что такое идемпотентность?— Как работает пагинация?— Зачем версионировать API?В гайде разобраны темы, которые полезно понимать каждому:🈂️ CRUD и REST🈂️ PUT vs PATCH🈂️ Безопасность API🈂️ Кэширование и пагинация🈂️ Идемпотентность🈂️ Рейтлимиты и производительность🔗 Ссылка📍 Навигация: [Вакансии]🐸 Библиотека фронтендера#career_merge

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

🔗 Соединяем элементы кривой линией на чистом CSSПоявился интересный эксперимент, который позволяет соединять элементы интерфейса плавными линиями без SVG и JavaScript.🟢 В основе решения:— Anchor Positioning— shape()— border-shape— if()— контейнерные единицы измеренияЛиния автоматически меняет форму в зависимости от положения и расстояния между элементами.🔗 Источник📍 Навигация: [Вакансии]🐸 Библиотека фронтендера#under_hood #css

💻 3 курса по цене одного — собери стек для оффера в топовую IT-компаниюДля следующего карьерного шага мало писать код. Работодатели ждут не только знания языка, но и понимания архитектуры, алгоритмов, автоматизации, AI-инструментов и агентных систем.Одно направление закрывает только часть задачи.Поэтому сейчас мы предлагаем освоить сразу несколько востребованных навыков — выбери любой курс и получи доступ еще к двум бесплатно 🔥Собери стек навыков под свою цель:🔹 подготовка к сильным компаниям (алгоритмы, архитектура);🔹 переход в AI-направление (ИИ-агенты, AgentOps);🔹 развитие в ML и Data Science (математика, основы ML);🔹 новый оффер и рост дохода.Полученные знания применяешь в работе уже во время обучения.⏳ Акция действует 48 часов — 13 и 14 июня.👉 Переходи на сайт, выбирай курсы и оставляй заявку — за 10 минут поможем собрать комплект под твою цель.

🤔 Вопрос с собеседованияКакое свойство чаще всего забывают при использовании ::before и ::after?👇 Правильный ответ (нажми, чтобы прочитать):Для псевдоэлементов ::before и ::after почти всегда нужно задавать content. Без него псевдоэлемент обычно не появится на странице.🟢 Например:.button::before { content: ""; display: inline-block; width: 8px; height: 8px; background: red;}Даже если внутри нет текста, пустая строка всё равно нужна:content: "";🔜 Идеальный короткий ответ:::before и ::after создаются через свойство content. Если его не указать, псевдоэлемент обычно не будет отрисован, даже если задать ему размеры, цвет или позиционирование.👍 — знал/а🔥 — стало понятнее💼 Щелкаешь такие задачи как орешки? Найди проект с достойной зарплатой тут🐸 Библиотека фронтендера#career_merge

✨ Больше полезного — в сторисХотим вынести туда короткий формат: быстрые находки, мини-опросы, ссылки и идеи, которые не тянут на отдельный пост.Сторис открываются через бусты — кнопка ниже.➡️ Забустить каналСпасибо, вы лучшие ❤️🐸 Библиотека фронтендера

💡 Почему таблицам нужен <caption><caption> добавляет таблице понятный заголовок.Для пользователей скринридеров это особенно важно: они сначала слышат описание таблицы, а уже потом переходят к строкам и ячейкам.<table> <caption>Отчёт по продажам за май</caption> ...</table>Положение заголовка можно настроить через CSS:table { caption-side: bottom;}Небольшой тег, который делает таблицы понятнее и доступнее.📍 Навигация: [Вакансии]🐸 Библиотека фронтендера#readme

🔥 Строишь ИИ-агентов? Руководитель AI/ML-направления Сloud․ru покажет, где большинство архитектур ломаются, и как этого избежать.18 июня в 19:00 совместно с Сloud․ru проведём открытый урок «Мультиагентные системы: почему большинство архитектур переусложнены».Спикер — Дмитрий Юдин, эксперт по масштабированию и оптимизации вычислительных ресурсов для ML. Под его руководством развивается Evolution AI Factory — цифровая среда для работы с GenAI. Он занимается развитием сервисов генеративного ИИ, инфраструктуры для обучения больших языковых моделей и внедрением интеллектуальных агентов.Что получишь на уроке:— критерии выбора между одним агентом и мультиагентной системой;— разбор популярных архитектурных ошибок;— реальные ограничения современных ИИ-агентов;— практические рекомендации по проектированию агентных систем.🎁 Для участников урока подготовили промокод на скидку 10 000 ₽.🗓️ Когда: 18 июня, 19:00 (МСК)👉 Занять место на открытом уроке

⚡ Обычно мы стараемся не блокировать рендеринг страницы и используем async или deferНо в HTML есть малоизвестный атрибут blocking="render", который позволяет намеренно задержать первый paint и избежать FOUC или скачков интерфейса.Разбираемся, как он работает, когда может пригодиться и почему иногда блокировка рендера — вполне осознанное решение.🔗 Ссылка на оригинал📍 Навигация: [Вакансии]🐸 Библиотека фронтендера#under_hood #html #javascript

🔥 Швейцарский нож для работы с JSONЕсли приходится регулярно разбирать ответы API, этот инструмент может сэкономить немало времени.🔜 Что умеет:— визуализировать JSON в виде дерева и таблиц — сравнивать два JSON-файла — показывать ошибки в структуре данных — выполнять jq-запросы прямо в интерфейсе — конвертировать JSON ↔ CSV Полезно при работе с REST API, моками, логами и большими ответами бэкенда, которые уже неудобно читать в сыром виде.🔗 Ссылка на GitHub📍 Навигация: [Вакансии]🐸 Библиотека фронтендера#stack #json