Frontender's notes [ru]

Public

Просмотреть канал

Не можете присоединиться? @frontendnoteschannel_ru

32.7k Участники

Обновлено: May 12, 2026 at 3:40 AM

Frontender's notes [ru]

Ведущий канал о современном фронтенде: статьи, новости, практики, вайбкодинг и автоматизация фронта ИИ-агентами. Личный блог автора - @just_genych По вопросам рекламы или разработки - @g_abashkin

Follow @frontendnoteschannel_ru to stay updated with the latest g_abashkin and just_genych trends and news

Рейтинг

Глобальный рейтинг

#456

Рейтинг по языку

#45

Рейтинг по категории

#23

-1

Рост участников (Последние 12 дней)

Всего: 32.7K

Рост за 24ч: +0 0%

Последние посты

Frontender's notes [ru]

11 мая 2026 г., 21:02

📷 Photo

⬇️ Этот текст видят только те, кто пишет на JavaScript ⬇️
Проходите бесплатный курс по JS, чтобы прокачать навыки

Бесплатный курс Академии Selectel поможет освоить базу по синтаксису и конструкциям языка. На финальных модулях вы создадите веб-приложение с интерактивным менеджером задач, который станет частью вашего портфолио.

Во время курса вы:

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

Бонусом вас ждет промокод на работу с IT-инфраструктурой Selectel для практики. А после прохождения вы получите именной сертификат.

Начните обучение сейчас ➡️ https://slc.tl/9ialv

Больше материалов по фронтенд-разработке ищите в профиле https://t.me/selectel_academy

Реклама. АО "Селектел". erid:2W5zFHwDKvy

3,230

Frontender's notes [ru]

11 мая 2026 г., 21:02

Shadow DOM в больших приложениях: изоляция или усложнение поддержки

Есть ощущение, что Shadow DOM — это серебряная пуля.
Полная изоляция, никакие стили не протекают, всё аккуратно и предсказуемо.

На практике в больших приложениях всё не так однозначно.

Что даёт Shadow DOM

Главная идея — изолировать компонент от внешнего мира.

👉 стили не протекают внутрь
👉 внутренние стили не ломают остальной UI
👉 DOM скрыт за границей компонента

Звучит как идеальный вариант для масштабирования.

Где это реально помогает

UI-киты и дизайн-системы
Компоненты работают в разных проектах
и не зависят от чужих стилей.

Встраиваемые виджеты
👉 чаты
👉 формы
👉 плееры

То, что живёт внутри чужого сайта.

Здесь изоляция критична.

Грязные окружения
Когда нельзя доверять глобальным стилям.

Где начинаются проблемы

Стилизация становится сложнее

Глобальные темы, переменные, overrides —
всё это уже не так просто.

Нужно:

👉 ::part
👉 ::theme (в будущем)
👉 CSS variables как мост

Интеграция ломается

Обычные вещи:

👉 глобальные стили
👉 reset
👉 типографика

перестают работать внутри Shadow DOM.

Дебаг сложнее

DevTools помогают, но:

👉 структура глубже
👉 границы неочевидны
👉 сложнее искать источник проблемы

События ведут себя иначе

Event retargeting может ломать ожидания.

То, что снаружи выглядит как один элемент,
внутри имеет другую структуру.

Не дружит с частью экосистемы

Некоторые библиотеки:

👉 не учитывают Shadow DOM
👉 ожидают доступ к обычному DOM
👉 ломаются на интеграции

Главный trade-off

Shadow DOM даёт изоляцию,
но забирает простоту интеграции.

Когда это оправдано

👉 переиспользуемые компоненты вне проекта
👉 независимые виджеты
👉 строгая инкапсуляция важнее гибкости

Когда лучше не использовать

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

Главная мысль

Shadow DOM — это не просто технология.
Это архитектурное решение.

Он не делает систему проще.
Он делает её более изолированной и более сложной одновременно.

И если изоляция не решает конкретную боль —
скорее всего, вы платите сложностью просто так.

Frontender's notes [ru]

11 мая 2026 г., 21:02

📷 Photo

❌ «Никакого кода вручную — такая политика»

Так говорит айтишник Disney. Дело в том, что компания Disney https://www.businessinsider.com/disney-pushes-ai-usage-manager-checkin-messages-2026-4 для своих программистов «панель мониторинга внедрения ИИ» с лидербордом. Чем больше дней подряд ты используешь Cursor или Claude, тем больше у тебя ачивок.

Некоторые сотрудники говорят, что чувствуют давление «максимально использовать токены».

✖️ https://t.me/xCode_Journal

2,900

Frontender's notes [ru]

11 мая 2026 г., 21:02

🐱 GitHub покидают разрабы и опенсорс проекты

Разработчик Митчелл Хашимото, создатель популярного эмулятора терминала Ghostty, переносит проект из-за проблем со стабильностью платформы.
«Я пользователь GitHub под номером 1299, присоединился в феврале 2008 года. Я заходил на GitHub почти каждый день в течение более 18 лет. Для меня никогда не было вопроса, куда размещать свои проекты: всегда GitHub. Мне очень грустно это говорить, но пришло время уходить», — https://x.com/mitchellh/status/2049213597419774026?s=46 он.

✖️ https://t.me/xCode_Journal

View on X (Twitter)

3,560

Frontender's notes [ru]

11 мая 2026 г., 21:02

📷 Photo

🖥 Делаем сайт https://github.com/zubair-trabzada/geo-seo-claude

Появился топовый инструмент для SEO-оптимизации. Внутри скилл, который позволяет провести полноценный аудит сайта. То есть оценку на AI-видимость, контент, SEO, структурированные данные и другие параметры.

По итогу получите балл от 0 до 100, PDF-отчет и подробный план действий, который поможет улучшить ситуацию.

✖️ https://t.me/xCode_Journal

4,080

Frontender's notes [ru]

11 мая 2026 г., 21:02

📷 Photo

🏄‍♂️ Приближаем лето всем фронтенд-сообществом

23 мая Яндекс Вертикали и Авто.ру собирают разработчиков на Vertis JS, чтобы обменяться опытом, понетворкаться и зарядиться летним настроением — вне зависимости от погоды🌴

♦️Приходите обсудить, как прокачать AI-агентов под реальные задачи и тестировать на телефоне без единого деплоя. Ребята из разных сервисов поделятся, как их команды выстраивают процессы, которые экономят время и снижают риски в продакшене.

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

🔖 https://yandex.ru/project/verticals/vertis-js-meetup/?utm_source=telegram&utm_medium=paid&utm_campaign=frontendnotes&erid=CQH36pWzJqE1dR7FjGuicoY6vS5NeT2gjtcc3rSzn54ck4 Встречаемся только в офлайне, количество мест ограничено.

4,220

Frontender's notes [ru]

11 мая 2026 г., 21:02

📷 Photo

🖥 Программист решил ускорить возвращение в нулевые и создал Шакализатор сайтов 3000

Сервис отбрасывает любой современный ресурс в эпоху Web 1.0: он вырезает из HTML все современные стили, скрипты, сжимает картинки, добавляет кислотный фон, гифки и прочее. Самое забавное — ссылки внутри тоже переписываются, так что погружение будет полноценным. И да, https://github.com/Dark0ne1/shakal-3000
«Я посмотрел на эти робкие попытки регуляторов и подумал: а зачем нам эти полумеры? Если интернет всё равно замедляют и ломают, почему бы не возглавить этот процесс и не деградировать с ветерком?»

✖️ https://t.me/xCode_Journal

4,190

Frontender's notes [ru]

11 мая 2026 г., 21:02

📷 Photo

Собственные функции в CSS

Принято считать, что CSS — это про декларации, а не про логику.
Если нужна логика — идёшь в JS или препроцессоры.

Но CSS постепенно становится умнее.

И один из самых интересных шагов в эту сторону — function.
Что это вообще такое

Идея простая:
возможность объявлять свои функции прямо в CSS
и переиспользовать вычисления.

Что-то вроде:


@function --spacing($step) {
@return calc($step * 8px);
}

.card {
padding: --spacing(2);
}


Это попытка сделать CSS более выразительным
без ухода в Sass или JS.
Зачем это нужно

Повторяемые вычисления
Все эти calc(...) быстро начинают дублироваться.

С функциями:
👉 меньше копипасты
👉 единая логика расчёта

Дизайн-система в коде

Можно зашить правила прямо в стили:


@function --radius($size) {
@return clamp(4px, $size * 1px, 16px);
}


И использовать везде одинаково.

Меньше зависимости от препроцессоров

Часть логики, ради которой раньше брали Sass,
можно держать нативно.

Но есть нюанс

👉 поддержка браузерами ограничена
👉 синтаксис может меняться
👉 в проде использовать нужно осторожно

Это всё ещё экспериментальная история.
И важный момент

CSS-функции — это не полноценный язык программирования.

Нельзя:
👉 писать сложные ветвления
👉 хранить состояние
👉 делать побочные эффекты

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

👉 токены дизайн-системы
👉 отступы, размеры, сетки
👉 адаптивные значения
👉 повторяемые формулы

Там, где сейчас много calc и дублирования.

Frontender's notes [ru]

11 мая 2026 г., 21:02

📷 Photo

😁 Даёшь опенсорс

💥 https://t.me/xCode_Journal

4,730

Frontender's notes [ru]

11 мая 2026 г., 21:02

📷 Photo

А не приходило кому-то мысля что ии просто пытался сбежать?)

💥 https://t.me/xCode_Journal

3,980

Frontender's notes [ru]

30 мар. 2026 г., 19:47

📷 Photo

🤣 Надёжность инфраструктуры 100%

💥 https://t.me/xCode_Journal

3,020

Frontender's notes [ru]

30 мар. 2026 г., 19:47

📷 Photo

🧭 Разбираем React вместе с Podlodka React Crew

Современные React-приложения становятся всё сложнее. Разработчики регулярно сталкиваются с проблемами производительности, утечками памяти и архитектурными вызовами.

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

💡Эксперты https://podlodka.io/reactcrew?utm_campaign=early_bird_react_crew_4&utm_source=telegram&utm_medium=paid&utm_content=frontendnoteschannel_ru https://podlodka.io/reactcrewрешили разобраться с этой проблемой на онлайн-конференции под названием «Продвинутый React».

С 23 по 27 марта ее участники:

⚙️ узнают, как устроен рендер и внутренние механизмы в современном React

🧠 познакомятся с архитектурой приложений, где применяются React Server Components

📊 научатся профилировать React-приложения и выявлять медленные рендеры, memory leak

🛠️познакомятся с дополнительными инструментами, которые помогут упростить отладку и выявить сложные проблемы

Формат — удобный и ламповый: пять дней, живые Zoom-сессии утром и вечером, закрытое профессиональное сообщество в Telegram и общение со спикерами.

Если хотите углубить свои знания про React в компании крутых экспертов, присоединяйтесь к Podlodka React Crew👇

🎟Забрать early-bird билет: https://podlodka.io/reactcrew?utm_campaign=early_bird_react_crew_4&utm_source=telegram&utm_medium=paid&utm_content=frontendnoteschannel_ru

Frontender's notes [ru]

30 мар. 2026 г., 19:47

📷 Photo

🤣 Что за дурацкие простые задачки?

💥 https://t.me/xCode_Journal

3,900

Frontender's notes [ru]

30 мар. 2026 г., 19:47

📷 Photo

Недавно решил разобраться с фичей skills в Claude Code. Если коротко, это инструмент, который пришел на смену кастомным slash-командам и значительно расширяет их возможности.

В процессе изучения нашел несколько интересных моментов:

- https://github.com/ComposioHQ/awesome-claude-skills/blob/master/content-research-writer/SKILL.md:
Анализирует приложение и помогает писать посты для продвижения, например для Хабра.

- https://skillsmp.com/skills/davila7-claude-code-templates-cli-tool-components-skills-utilities-domain-name-brainstormer-skill-md:
Проверяет доступность доменов по теме проекта и предлагает варианты.

- https://github.com/ComposioHQ/awesome-claude-skills/blob/master/lead-research-assistant/SKILL.md:
Помогает находить аудиторию, которой может быть интересен ваш продукт. Эту штуку я еще не тестил но звучит как магия.

- https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md:
Помогает привести сгенерированный нейросетью фронтенд в более аккуратный и продакшен-подобный вид. Так как фронт это мое основное направление то эта штука это то что я протестил чуть больше. Разница в качестве генерируемого кода мне показалась довольно заметной.

Вообще про skills я слышал уже несколько раз, но игнорировал. Для работы мне обычно хватало базовых команд вроде проверки кода. На данный момент я еще продолжаю изучать этот инструмент но уже выглядит как что то довольно интересное.

👉 https://t.me/just_genych

Frontender's notes [ru]

30 мар. 2026 г., 19:47

🎥 Video

🖥 Anthropic https://claude.com/blog/code-review Code Review

Систему, которую в компании запускают почти на каждом PR. За последний год объём кода на инженера в Anthropic вырос примерно на 200%. При такой скорости неудивительно, что ревью стало узким местом.

Теперь Code Review автоматически проверяет PR: несколько ИИ-агентов параллельно ищут баги, перепроверяют результаты и ранжируют проблемы по серьёзности. Причем чем более объемным и сложным будет PR — тем больше агентов туда пойдет работать.

✖️ https://t.me/xCode_Journal

4,050

Frontender's notes [ru]

30 мар. 2026 г., 19:47

Отрисовка шрифтов в браузерах

Важность отрисовки шрифтов
В своей практике я часто сталкиваюсь с задачей правильно отобразить типографику на веб-страницах. Это кажется тривиальным, но отрисовка шрифтов — это целая наука, в которой браузеры играют ключевую роль. Мне важно понимать, как браузеры работают со шрифтами, чтобы гарантировать их корректное и согласованное отображение во всех средах. Типографика влияет не только на внешний вид, но и на удобочитаемость и общее восприятие контента.

Процесс отрисовки шрифтов в браузерах
Когда я разрабатываю интерфейсы, я учитываю, что браузеры выполняют несколько этапов, чтобы отрисовать шрифты. Браузер загружает @font-face декларации, определяет доступные шрифты, применяет их к текстовым элементам и в итоге отрисовывает текст на экране. На каждом из этих этапов может возникать ряд проблем, например, флэш безстилевых текстов (FOUT).

Базовый пример использования @font-face


/* Подключение шрифта через @font-face */
@font-face {
font-family: 'Open Sans';
src: url('/fonts/OpenSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}



Практический сценарий: динамическое подключение шрифтов


/* Использование переменных CSS для изменения шрифта в зависимости от темы */
:root {
--main-font: 'Open Sans', sans-serif;
}
body {
font-family: var(--main-font);
}



Факты:
👉 Браузеры используют систему шрифтовой субпиксельной рендеринга для улучшения читаемости.
👉 Некоторые браузеры поддерживают новое свойство font-display для контроля загрузки шрифтов.

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

TG:

Frontender's notes [ru]

30 мар. 2026 г., 19:47

Как одна строка CSS может сломать производительность вашего приложения

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

Сложные селекторы
Использование сложных CSS-селекторов увеличивает нагрузку на браузер при рендеринге страницы. Например, глубокая вложенность или чрезмерно специфичные селекторы усложняют обработку стилей и могут замедлить отображение контента. Рекомендуется упрощать селекторы и избегать избыточной специфичности. Освоение этой практики поможет избежать проблем, таких как https://www.c-sharpcorner.com/article/avoiding-common-mistakes-in-css/.

Неиспользуемые стили
Загрузка неиспользуемых CSS-правил увеличивает размер страницы и время ее загрузки. Исследования показывают, что средний сайт содержит около 37% неиспользуемого CSS. Это приводит к дополнительной нагрузке на браузер и замедляет рендеринг. Регулярный аудит и удаление неиспользуемых стилей помогают оптимизировать производительность. Подробнее об этом вы можете узнать в статье о https://srworks.co/blog/unused-css-js-performance-tax/.

Инлайн-стили
Использование инлайн-стилей увеличивает размер HTML-документа и препятствует кэшированию стилей браузером, что замедляет загрузку страниц. Кроме того, инлайн-стили усложняют поддержку и обновление кода. Рекомендуется использовать внешние таблицы стилей для улучшения производительности и удобства сопровождения. Ознакомьтесь с причинами, почему https://www.linkedin.com/advice/3/what-risks-using-inline-styles-html-skills-web-development-kip2c.

Оптимизация CSS
Для повышения производительности следует минимизировать и объединять CSS-файлы, избегать глубокого вложения селекторов и использовать только необходимые стили. Инструменты, такие как PurgeCSS, помогают выявлять и удалять неиспользуемые CSS-правила, снижая нагрузку на браузер и ускоряя рендеринг страниц. Узнайте больше о решении каскадных проблем в больших проектах из https://blog.pixelfreestudio.com/overcoming-css-cascade-issues-in-large-projects/.

Факты
👉 Средний сайт содержит около 37% неиспользуемого CSS, что замедляет загрузку страниц.
👉 Сложные селекторы и глубокая вложенность усложняют обработку стилей браузером, замедляя рендеринг.

Итог
❗️ Даже одна строка CSS может существенно повлиять на производительность приложения. Регулярный аудит и оптимизация стилей необходимы для обеспечения быстрой и эффективной работы веб-приложений.

Источники
Освоение сложных CSS-селекторов — https://www.c-sharpcorner.com/article/avoiding-common-mistakes-in-css/.
Анализ неиспользуемого CSS — https://srworks.co/blog/unused-css-js-performance-tax/.
Влияние инлайн-стилей — https://www.linkedin.com/advice/3/what-risks-using-inline-styles-html-skills-web-development-kip2c.
Оптимизация каскадных проблем — https://blog.pixelfreestudio.com/overcoming-css-cascade-issues-in-large-projects/.

Frontender's notes [ru]

30 мар. 2026 г., 19:47

pinned «📍 Авторский канал про вайбкодинг и разработку ИИ-агентов ➡️ Геныч.»

Frontender's notes [ru]

30 мар. 2026 г., 19:47

📷 Photo

😭 Гендерный разрыв в IT никуда не делся

Исследование Selecty и hh․ru показало: >200 тыс. рублей в месяц получают 51,5% мужчин и только 34,8% женщин. В тестировании этот порог пробивают 60% парней и 45% девушек, а в бэкенде высокие доходы лишь у 26,5% разработчиц.

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

✖️ https://t.me/xCode_Journal

3,730

Frontender's notes [ru]

30 мар. 2026 г., 19:47

📍 Авторский канал про вайбкодинг и разработку ИИ-агентов

➡️ https://t.me/just_genych

4,030

Showing 20 of 20 posts

No more posts

Рейтинг

Требуется вход

Отзывы пользователей (0)

Пока нет отзывов. Будьте первым, кто поделится своим опытом!

Frontender's notes [ru]

Frontender's notes [ru]

Рейтинг

Рост участников (Последние 12 дней)

Последние посты

Рейтинг

Отзывы пользователей (0)

Похожие каналы Telegram

Магазин цифровых товаров YanGoShop(@yangosart)

Финтехстан

Горизонт событий | Event horizon

Новости в 3д сфере. Stl news 3d models. Видео по 3D

Электрион Клуб

TMT Channel

ИнфоТЭК

Афонтово

Похожие каналы Telegram

Магазин цифровых товаров YanGoShop(@yangosart)

Финтехстан

Горизонт событий | Event horizon

Новости в 3д сфере. Stl news 3d models. Видео по 3D

Электрион Клуб

TMT Channel

ИнфоТЭК

Афонтово

Отзывы пользователей (0)

Последние посты