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

#pixel_pause

Читать полностью…

🐋 Полный гайд по UI Kit: как их создавать, подключать и ничего не бояться

Леша Кузьмин, руководитель фронтенд-направления в AGIMA, делится опытом его команды в подготовке UI-китов: от «зачем это вообще нужно» до «как использовать в реальном проекте»

➡️ Зачем это знать айтишнику:

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

👉 Читать

🔹 Курс разработка AI-агентов
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

🏃‍♀️ Азбука айтишника

#магиякода

Читать полностью…

😳 input.value всегда возвращает строку

Даже если это:

<input type="number" />

Поэтому в коде постоянно встречается:

parseInt(value)
+value

🔴 Но у HTMLInputElement есть встроенное свойство valueAsNumber.

const age = input.valueAsNumber

Оно сразу возвращает число без ручного преобразования.

🔤 Полезно для:

— форм
— фильтров
— калькуляторов
— numeric inputs

⚠️ Если поле пустое или значение невалидное — получите NaN.

🔤 Работает с:

— type="number"
— range
— date
— datetime-local

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

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

#readme #js #html

Читать полностью…

⚡️ Знакомьтесь с экспертом Proglib Academy: AI-архитектор Антон Будняк

Антон — мастер превращения сырых AI-идей в отказоустойчивые системы. Он знает, как запустить MVP за неделю и масштабировать его так, чтобы архитектура не рассыпалась под нагрузкой в сотни тысяч юзеров.

За что его ценит IT-комьюнити:

🟣 Опыт в финтехе и крупном бизнесе

Руководил разработкой ML-моделей в финтехе с экономическим эффектом более 100 млн ₽

🟣 Запуск продуктов на 6.000+ пользователей

Антон строит сервисы, которыми пользуются тысячи людей в реальном проде.

🟣 Ускоряет разработку

Оптимизировал ML-пайплайны и кратно сократил время от начала разработки до релиза

📚 Где Антон черпает знания (рекомендации эксперта):

- X* — главный источник новостей. Рекомендую блог Бориса Черни (создателя Claude Code) — там база про использование ИИ в разработке.
- Нетворкинг в ТГ: чаты LLM под капотом и AI-чат — здесь можно найти ответ почти на любой технический вопрос.
- Новости AI: каналы Сиолошная и Denis Sexy IT.

На курсе Agentops Антон учит строить «неубиваемый» бэкенд: работать с очередями, таймаутами и балансировкой нагрузки, чтобы ваши агенты работали стабильно 24/7.

🎁 Майские СКИДКИ в Proglib Academy!

До конца мая на все курсы академии (включая AgentOps и разработку ИИ-агентов) действует скидка -40%. Это лучший момент, чтобы войти в AI-разработку под присмотром практиков.

Узнать больше о программе и обучении у Антона:
👉 Курс о том, как внедрять AI-логику в бэкенд и сохранять стабильность сервиса

Продолжаем знакомить вас с командой?
👍 — Да, ждем новых лиц
🔥 — Пойду подпишусь на каналы из списка Антона

🏃‍♀️ Proglib Academy

* - запрещен в рф

Читать полностью…

🧩 TypeScript умеет проверять даже формат строки

Через template literal types можно указать, что Authorization должен начинаться с Bearer. Так TypeScript поймает ошибку ещё до запуска кода: например, если передали токен без префикса.

🟢 Полезно для:

— API clients
— typed headers
— SDK
— frontend/backend contracts

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

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

#readme #ts

Читать полностью…

🌓 light-dark() — простой способ делать light/dark theme в CSS

Теперь переключение темы можно писать прямо в значении цвета:

color: light-dark(#111, #fff);

Работает так:

— первый цвет → light mode
— второй → dark mode

Нужно только указать:

:root {   color-scheme: light dark; }

Чем это удобно:

— меньше CSS
— не нужны отдельные variables
— читается очень просто

⚠️ Подходит только для light/dark theme.

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

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

#readme #css

Читать полностью…

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

#pixel_pause

Читать полностью…

До 31 мая можно забрать любой курс Proglib Academy со скидкой 40%

Если давно хотели прокачаться в Python, ML, алгоритмах или AI-агентах, сейчас самое время выбрать программу и начать обучение по сниженной цене.

🎁 Разработка AI-агентов — от 49.000 ₽ (вместо 69.000 ₽)

Практический курс по разработке AI-агентов для автоматизации задач, работы и собственных проектов

🎁 Курс AgentOps — 129.000 ₽ (вместо 149.000 ₽)

Для разработчиков и LLM-инженеров, которые хотят внедрять AI-логику в бэкенд и сохранять стабильность сервиса.

🎁 Математика для разработки AI-моделей — 23.990 ₽ (вместо 31.990 ₽)

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

🎁 Математика для Data Science — от 29.990 ₽ (вместо 39.990 ₽)

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

🎁 ML для старта в Data Science — 28.990 ₽ (вместо 38.990 ₽)

Разберётесь в машинном обучении: от базовых понятий и линейных моделей до ансамблей, бустинга и рекомендательных систем.

🎁 Основы IT для непрограммистов — 16.990 ₽ (вместо 28.990 ₽)

Курс для IT-рекрутеров, маркетологов, проджектов, продактов и всех, кто работает с IT, но не пишет код.

🎁 Архитектуры и шаблоны проектирования — 27.990 ₽ (вместо 37.900 ₽)

Освоите основные паттерны проектирования и прокачаете навыки архитектора программного обеспечения.

🎁 Специалист по ИИ — 89.000 ₽ (вместо 113.900 ₽)

Курс для тех, кто хочет получить профессию в сфере ИИ, собрать портфолио из 5 проектов и научиться разрабатывать сложных AI-агентов.

🎁 Алгоритмы и структуры данных — 33.990 ₽ (вместо 57.990 ₽)

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

🎁 Программирование на языке Python — 27.990 ₽ (вместо 47.390 ₽)

Освоите Python на практике: без сухой теории, с пошаговой прокачкой навыков и итоговым проектом в портфолио.

🙌 Выбирайте курс по ссылке, оставляйте заявку, и менеджер поможет подобрать программу под ваши цели — https://clc.to/tncrBA

Читать полностью…

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

#pixel_pause

Читать полностью…

🧩 agent skill, который превращает терминальный вывод в нормальный UI

Вместо ASCII-диаграмм и огромных таблиц в терминале инструмент генерирует полноценные HTML-страницы с:

— Mermaid-диаграммами
— zoom/pan
— таблицами
— dark/light theme
— slide deck режимом

Полезно для:

🔜 архитектурных схем
🔜 diff review
🔜 visual plan
🔜 code review
🔜 project recap

Например:

bash /generate-web-diagram /diff-review /plan-review 

На выходе — self-contained HTML-страница, которая открывается в браузере.

🔗 Ссылка на GitHub

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

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

#stack

Читать полностью…

👐 Почему ChatGPT не выглядит как сложный инструмент

Внутри ChatGPT много сценариев, но пользователь чаще всего видит только одно поле ввода и поток ответа.

🔜 В карточках разберём 6 UX-паттернов, которые помогают скрыть сложность: от streaming UX и progressive rendering до empty states и tool abstraction.

Полезно для любых продуктов, где много функций, но интерфейс не должен превращаться в панель управления самолётом ✅

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

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

#ux_review

Читать полностью…

🤔 Вопрос с собеседования

Чем отличается Reflow от Repaint и как это влияет на производительность?

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

🔵 Repaint — это перерисовка элемента без пересчёта layout.

Например, при изменении:

— color
— background
— visibility

Браузер обновляет внешний вид элемента, но не пересчитывает его размеры и позицию.

🔴 Reflow или layout — это пересчёт геометрии страницы.

Он может происходить при изменении:

— width
— height
— margin
— font-size
— DOM-структуры

После layout браузеру часто приходится делать ещё и repaint.

⚠️ Почему это важно:

Reflow обычно дороже repaint, потому что браузер пересчитывает размеры и позиции элементов.

Частые layout-пересчёты могут вызывать:

— лаги
— просадки FPS
— дёрганые анимации
— медленную работу интерфейса

✅ Что обычно оптимизируют:

— избегают layout thrashing
— не читают и не меняют layout вперемешку
— анимируют transform и opacity
— группируют DOM-изменения

🔤 Идеальный короткий ответ:

Repaint обновляет внешний вид элемента без пересчёта layout, а reflow/layout пересчитывает размеры и позиции элементов страницы. Layout обычно дороже и сильнее влияет на производительность.

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

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

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

#career_merge

Читать полностью…

База 🐶

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

#pixel_pause

Читать полностью…

❓ Что делает useState

useState — базовый hook для локального состояния компонента.

Используется для:

— modal
— forms
— tabs
— dropdown
— counters
— UI state

tsx const [open, setOpen] = useState(false)

⚠️ Частая ошибка — хранить derived state отдельно через useEffect.

tsx const [fullName, setFullName] = useState('')  useEffect(() => {   setFullName(`${first} ${last}`) }, [first, last])

Такой state дублирует данные и усложняет компонент.

🔜 Лучше вычислять значение напрямую:

tsx const fullName = `${first} ${last}` 

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

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

#readme

Читать полностью…

🔥 База по экономике токенов и кэшированию от AI Platform Lead из Bitrix24

Знакомьтесь, Сергей Нотевский. AI Platform Lead в Bitrix24.

Он один из ключевых экспертов нашего курса AgentOps. На своих лекциях он детально разбирает экономику AI-агентов, кэширование токенов, LLM-инфраструктуру и вывод генеративных систем в стабильный прод.

Мы попросили Сергея поделиться материалами для тех, кто хочет оптимизировать косты на LLM в проде. Сохраняйте методичку по prefix cache метрике, которая напрямую влияет на ваши деньги.

Как говорят создатели Manus:

“KV-cache hit rate is the single most important metric for a production-stage AI agent.”

🛠 Что внутри методички (комбо из 3 статей + код):

Экономика кэширования — особенности провайдеров и как правильно считать затраты.

Частые анти-паттерны — почему ваш кэш постоянно сбрасывается и вы платите больше.

Кэш в AI-агентах — специфика работы с памятью в автономных системах.

🍒 Вишенка на торте: готовый SKILL для агента, который делает ревью вашего проекта, находит анти-паттерны и предотвращает низкое попадание в кэш.

— Забрать комбо-материалы на GitHub

P.S. Если хотите послушать Сергея вживую — ловите его на конференциях Kode Waves (май), Conversations AI и Highload Spb (июнь).

🎁 Акция в честь старта продаж!

Прямо сейчас при покупке Инженерного трека вы получаете полный доступ к материалам курса «Разработка ИИ-агентов» в подарок.

👉 Забрать 2 курса по цене 1 и начать обучение

Читать полностью…

👀 Практический курс «Разработка AI-агентов для автоматизации задач, работы и собственных проектов» со скидкой 40% до конца мая!

Мы поговорили с десятками разработчиков, учли главные боли индустрии и запускаем полностью обновленный курс «ИИ-агенты 5.0». 🎉

Что вы узнаете?

- Как радикально оптимизировать траты на токены.
- Как на практике оценивать качество и точность работы агента.
- Как «докручивать» RAG-системы без потери качества.
- Как обеспечить устойчивость агента к сбоям внешних сервисов без падения всей системы, и про многое-многое другое.

Спикеры — практики с опытом в AI и Data Science в крупных IT-компаниях, таких как Яндекс, Сбер, Raft и Газпромбанк др.

Длительность: 6–12 недель в зависимости от тарифа.

👉 Занимайте место на главном агентском интенсиве по лучшей цене

Читать полностью…

🟦 Современный drag-and-drop

Библиотека от Atlassian, которая появилась как переосмысление проблем react-beautiful-dnd.

➡️ Что внутри:

— low-level API
— работа поверх нативного browser drag & drop
— независимость от фреймворка
— поддержка React, Vue, Svelte, Angular и других стеков
— модульная архитектура без тяжёлой обвязки

✅ Подходит для:

— kanban boards
— sortable lists
— dashboard UI
— drag-and-drop интерфейсов в больших приложениях

Инструмент уже используется в Trello, Jira, Confluence.

🔗 Ссылка на GitHub

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

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

#stack

Читать полностью…

🌐 RTL всё ещё ломает огромное количество интерфейсов

Курсор прыгает, input печатает «не в ту сторону», layout выглядит странно — и часто проблема решается буквально парой HTML-атрибутов.

✅ Разберём в карточках:

— когда нужен dir="auto"
— зачем ставить dir="rtl"
— и почему margin-left уже пора заменять на logical properties

🔗 Источник

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

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

#under_hood #css

Читать полностью…

✔️ Коллекция готовых UI-анимаций, которые можно забрать в проект

transitions.dev — небольшая библиотека переходов для веб-интерфейсов.

Внутри есть анимации для:

— карточек
— модальных окон
— dropdown-меню
— уведомлений
— переключателей
— загрузочных состояний
— success-экранов
— переходов между страницами

⚡️ Поддержку можно подключить как skill для ИИ-агента, чтобы он предлагал готовые transitions прямо во время разработки.

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

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

#stack

Читать полностью…

🤫 Font Tester — расширение для быстрой проверки шрифтов на сайте

Инструмент позволяет тестировать Google Fonts прямо на реальной странице: выделяете текст, выбираете шрифт и сразу видите результат в интерфейсе.

🔜 Что умеет:

— preview 1000+ Google Fonts
— менять font-weight и line-height
— тестировать шрифты на любом сайте
— сравнивать варианты
— копировать готовый CSS
— определять шрифты на странице

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

📎 Ссылка

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

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

#stack

Читать полностью…

🧩 Декларативная установка PWA без JS-обвязки

<install> — экспериментальный HTML-элемент для установки веб-приложений. Вместо кастомной кнопки, beforeinstallprompt и ручной логики браузер сам показывает install-кнопку и запускает процесс установки.

html <install></install> 

🔜 Что делает браузер:

— рендерит кнопку установки
— локализует текст под язык пользователя
— контролирует доверенный install flow
— убирает часть JS-логики из PWA

Фича пока экспериментальная и не Baseline, поэтому для production всё ещё нужен fallback ❗️

🔗 Источник

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

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

#under_hood #pwa

Читать полностью…

✅ Правильный ответ: React повторно вызовет родителя и его дочерние компоненты

При изменении state React заново вызывает render родительского компонента и по умолчанию проходит по его дочернему дереву. Даже если props дочернего компонента не изменились, его render-функция всё равно может быть вызвана повторно.

Чтобы избежать лишних ререндеров используют:

— React.memo
— useMemo
— useCallback

🔜 Идеальный короткий ответ:

Изменение state родителя по умолчанию запускает повторный render родителя и обход его дочернего дерева.

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

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

#career_merge #react

Читать полностью…

📂 Шпаргалка по поиску в строках JavaScript

startsWith(), endsWith() и includes() помогают быстро проверить содержимое строки. indexOf() и lastIndexOf() — найти позицию первого или последнего совпадения.

Полезно для работы с текстом, данными и подготовки к собеседованиям ✅

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

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

#readme #js

Читать полностью…

📕 83 правила для сильного TypeScript-кода

«Effective TypeScript» Дэна Вандеркама — одна из самых полезных книг для тех, кто уже знает основы TS, но хочет писать действительно сильный и предсказуемый код.

Внутри:

— 83 практических правила
— типичные ошибки
— работа с type system
— generics
— type-level programming
— TypeScript 5
— реальные TS-рецепты для production-кода

🔜 Книга только на английском языке.

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

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

#read_watch

Читать полностью…

📌 Зачем дата-сайентисту матанализ?

Основная компетенция специалиста по Data Science – способность анализировать и интерпретировать данные, а математика является фундаментом для начала работы.

В карточках мы разбираем основные разделы математики, с которых стоит начать изучение специалисту по анализу данных.

Хотите подготовиться к офферу или подтянуть знания? Оставляйте заявку на наш курс по математике для Data Science 💙

P.S. Только до 31 мая на курс (и вообще на все программы Академии) действует СКИДКА 40%

А как у вас дела с высшей математикой?
❤️ — Помню всё
🔥 — Знаю основы
🌚 — Ничего не знаю

🏃‍♀️ Proglib Academy

Читать полностью…

Приглашаем на Frontend Mix — бесплатный митап ЮMoney для всех, кто интересуется фронтенд-разработкой 🤩

🕓 28 мая, четверг, 19:00 (мск) — приходите на митап в Санкт-Петербурге или подключайтесь онлайн.

Спикеры из ЮMoney поделятся, как работают над задачами и улучшают процессы в команде.

Вот о чём будут рассказывать:
🟣 Как спят вкладки в браузере. На живом примере разберём, как браузер усыпляет вкладки, почему из-за этого ломается real-time и какие приёмы дебага и resync помогают находить и чинить их в продакшене.
🟣 Как построить Spec-Driven платформу для генерации писем. Используя OpenAPI как единый источник правды, покажем, как описывать контракты электронных писем через спецификацию и автоматически генерировать консистентный HTML.
🟣 Подключение модуля шумоподавления в рабочее место оператора. Рассмотрим инструменты React, WebSockets, WebRTC, а также архитектуру и логику работы модуля шумоподавления.
🟣 Круглый стол — AI во фронтенде: вызовы и реальность. Обсудим влияние нейросетей на фронтенд с трёх позиций: рынка, разработки и образования.

Чтобы попасть на митап, нужна регистрация. Все подробности — на сайте Frontend Mix 👈

Читать полностью…

🔥Git-команда для расследования истории функции

Если нужно понять, как менялась конкретная функция, не обязательно читать всю историю файла.

🔵Есть команда:

bash git log -L :functionName:path/to/file

Она покажет историю изменений только выбранной функции или метода.

🔵Например:

bash git log -L :calculateTotal:src/cart.ts

✅ Полезно, когда нужно понять:

— кто и когда менял логику
— после какого коммита появился баг
— почему функция стала такой сложной
— какие решения принимались раньше

Это особенно помогает в legacy-коде, где один файл мог жить годами и меняться десятки раз.

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

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

#readme #git

Читать полностью…

✍️ Современный Markdown-редактор для React

MDXEditor 4.0 — Markdown/MDX-редактор на базе Lexical, который можно встроить прямо в React-приложение.

✔️ Поддерживает:

— code blocks
— таблицы
— изображения
— ссылки
— markdown shortcuts
— MDX-компоненты

Подойдёт для:

➖ CMS
➖ документации
➖ admin panel
➖ internal tools
➖ editor-like UI

У проекта есть live demo, где можно посмотреть почти все возможности редактора в одном интерфейсе.

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

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

#stack

Читать полностью…

🦊 Новые CSS и Web API в Firefox 151

В новом релизе Firefox появилось несколько полезных фич для frontend и DevTools:

— @container style() queries
— поддержка Document Picture-in-Picture API
— Web Serial API для работы с устройствами через браузер
— shadowrootslotassignment для Shadow DOM
— field-sizing для auto-size форм
— улучшения fullscreen API и WebDriver BiDi

Из интересного:

🔴 теперь можно проверять CSS-свойства контейнера прямо в @container
🔴 Picture-in-Picture поддерживает произвольный HTML, а не только видео
🔴 браузер получил встроенную работу с serial-устройствами вроде ESP32 и Raspberry Pi Pico

🔗 Источник

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

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

#release_digest

Читать полностью…

🛠 React vs Web Components

Автор разобрал реальную миграцию маркетингового сайта: React → нативные Web Components + Astro.

Результат:

🔜 примерно −100 KB JavaScript
🔜 без потери функциональности
🔜 меньше runtime и hydration

В статье хорошо показано:

— почему React часто используют «по привычке»
— когда SPA-фреймворк становится лишним
— чем удобны Web Components в связке с Astro
— почему писать Custom Elements руками всё ещё больно
— как появился nanotags — тонкий слой над платформой

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

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

#code_battle

Читать полностью…