Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
21.2K subscribers
3.62K photos
326 videos
86 files
5.89K links
Все самое полезное для фронтенда в одном канале.

Наши курсы: https://clc.to/WV2U4g

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
🤑 Function Declaration vs Expression — в чём разница

В JavaScript одну и ту же функцию можно объявить по-разному — и это влияет на поведение кода.

В карточках разобрали:

😗 Чем отличается function declaration от function expression
😗 Почему одна работает до строки, а другая — падает с ошибкой
😗 Какой пример можно привести на собеседовании

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

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

#read_watch
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
7🥰2
This media is not supported in your browser
VIEW IN TELEGRAM
💡 Коллекция эффектных переключателей темы

Нашли open-source подборку анимаций для переключения светлой и тёмной темы.

🔵 Внутри — разные переходы, которые можно изучить, адаптировать и использовать в своих интерфейсах.

Хороший источник идей, если обычный toggle уже кажется слишком скучным.

🔗 Ссылка на GitHub

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

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

#stack
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰6👍4🔥1
🤔 Вопрос с собеседования

Почему нельзя вызывать Hooks внутри if, for или switch?

👇 Правильный ответ (нажми, чтобы прочитать):

React определяет каждый Hook по порядку его вызова, а не по имени.

Если в одном рендере Hook вызвался, а в следующем — нет (например, из-за if), порядок нарушится. Тогда React начнет сопоставлять состояния и эффекты не тем Hook’ам, что приведет к ошибкам и непредсказуемому поведению.

💡 Запомните правило:

Hooks всегда должны вызываться на верхнем уровне компонента или собственного Hook’а — без условий, циклов и switch. Если логика зависит от условия, проверку нужно делать внутри Hook’а.

👍 — знал/а
🔥 — стало понятнее

💼 Щелкаешь такие задачи как орешки? Найди проект с достойной зарплатой тут

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

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

#career_merge
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥8🥰2
💡 6 принципов современного React Data Grid

Хороший Data Grid помогает быстрее находить информацию, снижает количество ошибок и остается отзывчивым даже при работе с большими объемами данных.

Вот что считается хорошей практикой:

Условное форматирование вместо лишнего текста
Цвета, бейджи и иконки позволяют мгновенно увидеть статус, предупреждение или критичное значение.


Дизайн-токены вместо хардкода цветов
Цвета, отступы и типографика должны наследоваться от общей дизайн-системы, а не быть разбросаны по CSS.


Поддержка dark mode
Таблица должна одинаково хорошо выглядеть в светлой и темной теме, сохраняя контраст и читаемость.


Виртуализация + легкие CSS-классы
Для больших наборов данных виртуализируйте строки и избегайте тяжелых инлайновых стилей и лишних перерисовок.


Доступность по умолчанию
Поддержка клавиатурной навигации, Screen Reader, фокус-состояний и достаточного контраста — уже базовое требование.


Адаптивность
На планшетах и небольших экранах таблица должна корректно менять ширину колонок, сохраняя удобство работы.


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

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

#blueprint #react
Please open Telegram to view this post
VIEW IN TELEGRAM
7🥰2🔥1
🚀 Уже завтра стартует новый поток курса «ИИ-агенты»!

Мы собрали мощнейший состав преподавателей. Учить вас проектировать архитектуру и собирать продакшн-агентов будут инженеры и исследователи из топовых IT-компаний.

Старт уже завтра!

Сомневаетесь, подойдет ли вам программа и подача? Начните с бесплатного демо-урока!

Всего за 2 часа вы заглянете под капот ИИ-агента, поймете, чем мышление модели отличается от ее ответа, и научите систему чинить собственный код. Это идеальный способ протестировать нашу платформу перед покупкой.

🔗 Пройти демо-урок и занять место на курсе
🥰3👍1🔥1
Почему tooltip больше не обязательно писать на JavaScript

Еще недавно для tooltip, dropdown и popover почти всегда подключали Popper.js или похожие библиотеки. Теперь большую часть этой работы берет на себя браузер благодаря CSS Anchor Positioning.

🔗 В карточках разбираем, как это работает под капотом, что такое Anchor и Target, как браузер автоматически выбирает лучшую позицию для всплывающего элемента и почему эта технология может заменить целый класс JS-решений.

🔗 Ссылка на статью

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

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

#under_hood #css
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🥰31
This media is not supported in your browser
VIEW IN TELEGRAM
💬 AI-чат для React за 3 строки кода

ChatbotLite — open source-виджет, который позволяет быстро добавить AI-чат в React-приложение.

Что умеет:

— Работает с React, Next.js, Shopify и WordPress
— Поддерживает 10+ LLM, включая OpenAI, Gemini, Groq, DeepSeek и Mistral
— Автоматически переключается между моделями при ошибках
— Использует ваши API-ключи (BYOK)
— Весит менее 50 КБ (gzipped)


➡️ Подключение занимает буквально несколько строк:


import { ChatWidget } from "chatbotlite/react";

<ChatWidget
endpoint="/api/chat"
title="Acme"
/>


Такой виджет подойдет для документации, внутренних инструментов, FAQ, поддержки пользователей и AI-функций в собственных продуктах.

🔗 Ссылка на GitHub

💡 Если хотите не просто встроить чат, а разобраться, как создавать полноценных ИИ-агентов с инструментами, памятью и RAG, обратите внимание на курс «Разработка ИИ-агентов», который стартует уже завтра 🔥


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

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

#stack
Please open Telegram to view this post
VIEW IN TELEGRAM
👍41🔥1🥰1🙏1
🔥 Стартуем СЕГОДНЯ! Новый поток курса «Разработка ИИ-агентов» открыт

По этому поводу мы решили выложить закрытую запись одного из уроков из программы. Найти её в поиске YouTube нельзя — она доступна только по ссылке и всем, кто будет на курсе.

Внутри глубокий разбор LLM от Алексея Яндутова (Senior ML-инженер, развивал ответы «Алисы» и «Нейро» в Яндексе). Учимся получать точный результат без галлюцинаций.

Что внутри урока:

- Устройство LLM.
- Рабочие шаблоны промптов (Persona, Chain-of-Thought и др.).
- Разбор реального кейса Яндекса. Как автоматизировать разметку, обойти качество людей на 5% и срезать косты на 60%.


После просмотра вы поймете, когда хватает промпт-инжиниринга, а когда нужен RAG или fine-tuning.

👉Смотреть закрытый урок на YouTube

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

🔗 Занять место на курсе
🥰2
💬 «Что вообще случилось с фронтендом?»

Пожалуй, лучший материал 2026 года, который отвечает на этот вопрос.

Без бесконечных терминов и рекламных лозунгов — только последовательная история того, почему появились React, сборщики, SSR, гидратация, TypeScript, современные фреймворки и AI-инструменты.

🔗 Читать по ссылке

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

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

#read_watch
Please open Telegram to view this post
VIEW IN TELEGRAM
5🥰2
📌 Интересный эксперимент с Reddit: разработчик написал Markdown-редактор на чистом React и показал, как обойтись без тяжелых редакторных фреймворков.

Разбираем главные идеи, которые помогли добиться высокой производительности 💡

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

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

#under_hood
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰6👏1
🧩 Почему полифиллы до сих пор нужны вебу

Полифиллы часто критикуют за то, что они занимают имена будущих API и могут ограничивать разработчиков стандартов.

🔴 Но отказ от них проблему не решает: разработчики всё равно будут писать собственные fallback-реализации — только менее переносимые и сложнее поддерживаемые.

Главная польза полифиллов в другом:

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

переключаются на нативную реализацию, когда она появляется;

дают стандартам обратную связь от реальных проектов;

не позволяют одному отстающему браузеру тормозить развитие всей платформы.


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

🔗 Читать подробнее

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

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

#blueprint #web_platform
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🥰2🔥1