Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
21.3K subscribers
3.53K photos
304 videos
82 files
5.79K links
Все самое полезное для фронтенда в одном канале.

Как запустить своего ии-агента: https://clc.to/tvpmDQ

По рекламе: @proglib_adv

Для обратной связи: @proglibrary_feeedback_bot

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
💻 3 курса по цене одного — собери стек для оффера в топовую IT-компанию

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

Одно направление закрывает только часть задачи.

Поэтому сейчас мы предлагаем освоить сразу несколько востребованных навыков — выбери любой курс и получи доступ еще к двум бесплатно 🔥

Собери стек навыков под свою цель:

🔹 подготовка к сильным компаниям (алгоритмы, архитектура);
🔹 переход в AI-направление (ИИ-агенты, AgentOps);
🔹 развитие в ML и Data Science (математика, основы ML);
🔹 новый оффер и рост дохода.

Полученные знания применяешь в работе уже во время обучения.

Акция действует 48 часов — 13 и 14 июня.

👉 Переходи на сайт, выбирай курсы и оставляй заявку — за 10 минут поможем собрать комплект под твою цель.
🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
🔗 Соединяем элементы кривой линией на чистом CSS

Появился интересный эксперимент, который позволяет соединять элементы интерфейса плавными линиями без SVG и JavaScript.

🟢 В основе решения:

— Anchor Positioning
— shape()
— border-shape
— if()
— контейнерные единицы измерения


Линия автоматически меняет форму в зависимости от положения и расстояния между элементами.

🔗 Источник

📍 Навигация: [Вакансии]

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

#under_hood #css
Please open Telegram to view this post
VIEW IN TELEGRAM
5👍2🔥2
🤩 Гайд по выживанию на собесе по API

Даже если вы не пишете backend, вопросы про API на собеседованиях встречаются постоянно.

Например:

— Когда использовать PUT, а когда PATCH?
— Что такое идемпотентность?
— Как работает пагинация?
— Зачем версионировать API?


В гайде разобраны темы, которые полезно понимать каждому:

🈂️ CRUD и REST
🈂️ PUT vs PATCH
🈂️ Безопасность API
🈂️ Кэширование и пагинация
🈂️ Идемпотентность
🈂️ Рейтлимиты и производительность

🔗 Ссылка

📍 Навигация: [Вакансии]

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

#career_merge
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3🥰2
🎥 До открытого урока — несколько дней. Подготовили небольшую подборку материалов от нашего спикера Дмитрия Юдина.

Дмитрий руководит AI/ML-направлением в Сloud․ru и развивает Evolution AI Factory — среду для работы с GenAI: от инфраструктуры обучения LLM до внедрения интеллектуальных агентов.

С чего начать:

📺 AI-инструменты для разработчиков — как код, автотесты и ассистенты меняют рутину инженера.
📺 AI-эволюция бизнеса в эпоху генеративных моделей — агентные системы в реальных продуктах.
📺 Разработка мертва? — дискуссия о будущем профессии и роли AI в ней.
📖 Применение LLM в бизнесе — статья Дмитрия о практике внедрения и роли облака.

Одна из ключевых тем Дмитрия — практическое применение агентных систем и их ограничения.

Именно об этом бесплатный урок 18 июня в 19:00: «Мультиагентные системы: почему большинство архитектур переусложнены» 🔥

🎁 Для участников подготовили промокод на скидку 10 000 ₽ на курс «Разработка ИИ-агентов».

👉 Успей занять место на открытом уроке
3🥰1
This media is not supported in your browser
VIEW IN TELEGRAM
🫧 React-компоненты в стиле Liquid Glass

Появился интересный open-source проект для создания интерфейсов в стиле Liquid Glass с поддержкой React, Three.js и React Three Fiber.

Что умеет:

— WebGPU-рендеринг эффектов стекла
— React-компоненты для декларативного UI
— Интеграция с Three.js и R3F
— Собственный layout engine в духе SwiftUI
— Работа с DOM-контентом внутри WebGPU-сцены


Для рендеринга используется WebGPU, а некоторые возможности требуют экспериментальный HTML-in-Canvas API в Chrome.

🔗 Ссылка

📍 Навигация: [Вакансии]

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

#stack
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13👍3
🧩 Двойной клик по кнопке оплаты

Пользователь нажал «Оплатить» два раза подряд — и в системе появились две операции.

Классическая ошибка: защититься только на фронтенде.

Кнопку действительно нужно блокировать, loader — показывать, повторный submit — предотвращать. Но это защищает только интерфейс.

🔜 Настоящую гарантию от двойного списания даёт сервер: один и тот же платёжный запрос должен обрабатываться один раз по idempotency key.

Выберите правильный ответ на картинке 👆

📍 Навигация: [Вакансии]

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

#career_merge
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥105🥰1😁1🌚1
This media is not supported in your browser
VIEW IN TELEGRAM
🔍 Рентген для любого сайта

Наткнулись на интересный инструмент — Web Check 🔗

Он помогает быстро понять, что происходит под капотом любого сайта:

🈂️ используемый стек технологий
🈂️ DNS, SSL и настройки безопасности
🈂️ cookies, трекеры и заголовки
🈂️ производительность и SEO
🈂️ открытые порты и сетевую информацию
🈂️ ещё 30+ проверок

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

📍 Навигация: [Вакансии]

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

#stack
Please open Telegram to view this post
VIEW IN TELEGRAM
6👍2🔥2🥰1
💡 Как правильно посчитать радиус для вложенной границы

Когда внутри элемента появляется дополнительная рамка или вложенный блок с собственным border-radius, подобрать значение «на глаз» не всегда получается.

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

Полезно для:

🟠 карточек с внутренними рамками
🟠 вложенных контейнеров
🟠 кнопок и инпутов
🟠 сложных UI-компонентов

🔗 Поиграться с примером можно здесь

📍 Навигация: [Вакансии]

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

#readme #css
Please open Telegram to view this post
VIEW IN TELEGRAM
7🔥4👍2
This media is not supported in your browser
VIEW IN TELEGRAM
📊 Baseline Checker научился работать напрямую с Google Analytics

Раньше для проверки поддержки Baseline-фич приходилось вручную выгружать данные из Google Analytics, скачивать отчёт и загружать его в инструмент.

Теперь процесс занимает несколько кликов:

— вход через Google-аккаунт
— выбор нужного GA-проекта
— выбор периода анализа
— автоматическое получение данных через API


🔜 После этого Baseline Checker покажет, какой процент ваших пользователей поддерживает конкретные Baseline-таргеты и современные веб-фичи.

Полезно, если хотите принимать решения на основе реальной аудитории сайта, а не общих данных по рынку браузеров.

🔗 Ссылка на блог

📍 Навигация: [Вакансии]

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

#release_digest
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥3
🧩 Таймаут для fetch без ручного AbortController

AbortSignal.timeout() создаёт сигнал, который автоматически отменяет запрос через заданное время.


try {
const response = await fetch("/api/users", {
signal: AbortSignal.timeout(5000)
});

const data = await response.json();
} catch (error) {
if (error.name === "TimeoutError") {
console.log("Запрос превысил лимит времени");
} else {
console.error(error);
}
}


🔜 Если ответ не пришёл за 5 секунд, fetch будет отменён, а в catch попадёт TimeoutError.

Полезно для API-запросов, загрузки файлов и защиты интерфейса от бесконечного ожидания.

📍 Навигация: [Вакансии]

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

#readme
Please open Telegram to view this post
VIEW IN TELEGRAM
7👍4🥰2🥱1
🚀 React окончательно отделяется от Meta*

React Foundation запустил собственный сайт, а GitHub-репозиторий переехал с facebook/react на react/react.

Для разработчиков ничего не меняется в API или коде.

🔜 Но организационно это важный шаг: с февраля 2026 года React, React Native и JSX официально развиваются под управлением независимого фонда React Foundation в составе Linux Foundation.

*Meta признана экстремистской организацией в РФ

📍 Навигация: [Вакансии]

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

#release_digest #react
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥163🤔2👍1🥰1
🔍Тестовое собеседование с руководителем Frontend-разработки в этот четверг

18 июня(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.

Как это будет:
📂 Виталий Черков, руководитель группы Frontend разработки с опытом 8+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Виталий будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Виталию

Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.

Переходи в нашего бота, чтобы получить ссылку на эфир →
@shortcut_front_bot

Реклама.
О рекламодателе.
Please open Telegram to view this post
VIEW IN TELEGRAM
4🥰2🔥1🥱1
😳 Хотите понять, что на самом деле происходит внутри Event Loop?

JavaScript Visualizer 9000 показывает выполнение кода шаг за шагом: Call Stack, Task Queue, Microtask Queue и работу Event Loop в реальном времени.

🔜 Особенно полезно для задач в стиле:

«Что выведет этот код?»


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

🔗 Ссылка

📍 Навигация: [Вакансии]

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

#stack #js
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥64👍3🥰1
This media is not supported in your browser
VIEW IN TELEGRAM
📄 PDF-вьюер для современных фронтенд-приложений

Это библиотека для просмотра и взаимодействия с PDF прямо в веб-приложении. Работает поверх Mozilla PDF.js и даёт готовые интеграции для:

— React
— Svelte
— Solid
— Vanilla JavaScript

Из полезного:

🟠 просмотр PDF-документов
🟠 навигация по страницам
🟠 responsive-режим
🟠 тёмная тема
🟠 аннотации
🟠 реактивное состояние документа


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

🔗 Ссылка на GitHub

📍 Навигация: [Вакансии]

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

#stack
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥42👍1🥰1
💡 Не блокируйте интерфейс тяжёлыми вычислениями

Если обработка данных занимает много времени, её можно вынести в отдельный поток через Web Workers. Это позволяет не блокировать основной поток браузера и сохранять отзывчивость интерфейса.

Полезно для:

🔴 обработки больших массивов данных
🔴 парсинга крупных JSON-файлов
🔴 работы с изображениями и видео
🔴 криптографических операций
🔴 любых ресурсоёмких вычислений

Web Workers работают в отдельном потоке и не имеют прямого доступа к DOM.

📍 Навигация: [Вакансии]

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

#readme
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥2