Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
22.1K subscribers
2.58K photos
170 videos
39 files
4.96K links
Все самое полезное для фронтенда в одном канале.

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

Учиться у нас: https://proglib.io/w/77178ed4

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
📂 htmx: быстрый способ оживить интерфейс

Вместо тонны JS-кода можно писать интерактив прямо в атрибутах: hx-get, hx-post, hx-swap, hx-trigger.

➡️ Зачем пробовать:

— Минимум кода, максимум динамики

— Быстрый старт без фреймворка

— Удобно и для пет-проектов, и для прототипов

💡 Не заменит полноценный React/Vue, если нужна сложная логика

➡️ Мини-пример:


<button hx-get="/api/articles" hx-target="#list" hx-swap="innerHTML">
Загрузить статью
</button>

<div id="list"></div>


Запрос уходит на сервер → HTML-фрагмент прилетает и рендерится в #list.

📎 Подробнее

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

#stack #html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🤔42
Сегодня премьера

В 19:00 МСК стартует бесплатный вебинар с Максимом Шаланкиным«ИИ-агенты: новая фаза развития искусственного интеллекта».

В программе:
— почему агенты ≠ чат-боты;
— живое демо простого агента;
— и как эта тема встроена в курс, который разработан под руководством Никиты Зелинского.

Это прямой эфир: подключиться можно через лендинг курса.
🌚3😁1
🌪 CSS-баттл

Представим: старт проекта завтра. Что возьмете в основу?

➡️ Tailwind CSS

— Быстрая верстка за счёт утилитарных классов
— Чёткий дизайн-системный язык без лишнего нейминга
— Удобно для больших команд — меньше стиля-разброда

➡️ Styled Components

— Стили прямо в компоненте → чище структура
— Динамика через пропсы без костылей
— Отличная интеграция с React, всё на JS

Голосуем реакциями:

👍 — Tailwind
❤️ — Styled Components

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

#code_battle
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4627🥱10
🌪 useEffect и зависимости

На картинке 3 кейса:

➡️ Забыли проп в deps → эффект не срабатывает при изменении данных

➡️ Положили объект/функцию → эффект запускается каждый ререндер

➡️ Скаляр в deps → всё стабильно, эффект срабатывает ровно при нужном изменении

⌨️ Совет:

— Всегда указывайте все зависимости эффекта

— Если зависимость нестабильна (объект/функция) → мемоизируйте (useMemo, useCallback)

— Примитивы (строка, число) в deps — самый безопасный вариант

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

#hotfix #react
Please open Telegram to view this post
VIEW IN TELEGRAM
6👍2🔥2
🧠 Как строить UI-компоненты по принципу атомов, молекул и организмов

Компоненты делятся на уровни:

1️⃣ Атомы — базовые элементы: кнопки, инпуты, иконки.

2️⃣ Молекулы — простые комбинации атомов, например форма поиска.

3️⃣ Организмы — сложные блоки интерфейса, например хедер или карточка товара.

4️⃣ Шаблоны — структура страницы с расставленными организмами, без конкретного контента.

5️⃣ Страницы — финальная реализация шаблонов с реальными данными.

➡️ Зачем это нужно:

— Упрощает повторное использование компонентов

— Делает код предсказуемым и масштабируемым

— Помогает поддерживать дизайн-систему

📌 Atomic Design особенно полезен для больших проектов, где интерфейс постоянно растёт и нужно избегать хаоса в компонентах.

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

#blueprint
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥2
🪄 Как откатить коммит и не потерять работу

Бывает: сделал коммит слишком рано — что-то забыл или добавил лишнее. Удалять изменения не хочется, а переписывать руками — долго.

Решение:


git reset --soft HEAD~1


➡️ Что произойдёт:

— последний коммит исчезнет из истории,
— все изменения вернутся в staged,
— можно поправить и закоммитить заново.

🧠 Идеально для случаев «ой, рано нажал git commit».

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

#readme #git
Please open Telegram to view this post
VIEW IN TELEGRAM
8👍4🔥1🥱1
📌 Разбор интерфейсов: Pinterest

Сегодня смотрим, за счёт чего сетка Pinterest выглядит цельной и удобной.

➡️ Разберем принцип Masonry-layout, способы его реализации и то, почему он стал стандартом для галерей и бесконечных лент.

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

#ux_analysis
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
6🔥3
🤟 Апдейт новостей за неделю

➡️ Temporal API в Chrome 144

Наконец-то добавят современный API для работы с датами и временем. Это большой апгрейд по сравнению с Date.

➡️ GitHub Copilot CLI

AI-ассистент теперь работает прямо в терминале: можно генерировать команды, документацию, делать ревью кода.

➡️ TanStack Start v1.0 RC

Новый современный фреймворк на базе TanStack Router подходит к первому стабильному релизу.

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

#release_digest
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥32👍1
📖 Под капотом браузера: баги гидрации

SR и гидрация обещают быстрый рендер, но на деле фронтендеры часто сталкиваются с расхождениями между сервером и клиентом.

➡️ В карточках — разберём, как работает процесс, где появляются баги и как их избежать.

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

#under_hood
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
3👍1
🚀 Всё о курсе «ИИ-агенты для DS-специалистов»

Зачем нужны ИИ-агенты?

Это системы, которые берут на себя задачи аналитики и автоматизации. Именно они становятся основой для работы с корпоративными данными и для поддержки принятия решений.

Зачем мне курс?

Курс отвечает на три ключевых вопроса:

— Как построить собственную систему агентов с нуля?
— Каким образом использовать RAG-подход для работы с корпоративными данными?
— Как адаптировать LLM под реальные задачи бизнеса?

Подходит ли это мне?

Курс рассчитан на специалистов уровня middle+ и senior: ML/AI инженеров, Data Scientists, backend и platform-разработчиков. Подойдёт и студентам CS/DS, если вы готовы к продвинутым практикам.

Запись вводной встречи «ИИ-агенты: новая фаза развития искусственного интеллекта» доступна по ссылке.

Когда старт?

Обучение начинается 3 октября.

Сколько стоит?

До 28 сентября действует скидка → 57 000 ₽ вместо 69 000 ₽ (промокод datarascals).

🔗 Описание программы и регистрация
🔥3
⚡️ React vs Vue: что выберете вы

Два фреймворка, два подхода, одна вечная дискуссия.

➡️ React

— Компонентная архитектура и масштабируемость
— Огромная экосистема и сообщество
— Hooks и современный подход к состоянию

➡️ Vue

— Мгновенный старт и лёгкая интеграция
— Реактивность «из коробки»
— Понятный синтаксис для шаблонов

Голосуем реакциями:

👍 — React
❤️ — Vue

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

#code_battle
Please open Telegram to view this post
VIEW IN TELEGRAM
90👍38🥱6❤‍🔥1