Купить живой трафик

2 руб / подписчик

Telegram Analytics

TGStat хизмати янгиликларидан бохабар бўлиш учун обуна бўл!

SearcheeBot

Telegram-каналлар оламидаги сизнинг йўлбошчингиз.

Statistika Saralanganlar

Frontend Головного Мозга

Kanal geosi va tili: Rossiya, Ruscha

Toifa: Texnologiyalar

Фронтендер из сибири, обо всём что связано с frontend разработкой и интересно самому:
✅ Новости, статьи,
✅ Авторские кейсы,
✅ Песочница, готовые UI макеты.
✅ Юмор
Я хочу услышать три главных слова: JS, Angular, Redux
Сотрудничество: @cyberJohnny

Bog‘liq kanallar | O‘xshash kanallar

Kanal geosi va tili

Rossiya, Ruscha

Toifa

Texnologiyalar

Statistika

Postlar filtri

O‘chirilganlarni yashirish

Repostlarni yashirish

Frontend Головного Мозга

2 Oct, 15:32

🌈 Свечение внутри элемента, но из любого фона

Подсветить элемент изнутри проще всего через box-shadow с inset. Но такое свечение одноцветное. А если хочется радужный conic-gradient() или картинку?

Решение из статьи: накрыть элемент псевдоэлементом ::after с нужным фоном и маской оставить видимыми только края. Середина прозрачна, и сам элемент под ней виден.

Маска для левого и правого краёв (black в маске значит «видно»):
--inset: 30px;
mask-image: linear-gradient(
to right,
black 0%,
transparent var(--inset),
transparent calc(100% - var(--inset)),
black 100%
);
Вторая такая же маска с to bottom берёт верх и низ, а mask-composite: add объединяет обе полосы в рамку.

Накладка стоит на position: absolute и inset: 0, поэтому самому элементу нужен position: relative.

В статье есть демо, где оба вида свечения вспыхивают на случайных элементах.

👉 @seniorFront

@frontend_mind

297 0 3

Frontend Головного Мозга

30 Sep, 15:40

🚀 Два атрибута у картинки, и страница перестаёт прыгать

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

Лечится это атрибутами width и height у img, например width=800 height=600. Браузер ещё до загрузки файла знает пропорции и сразу оставляет под картинку место. В замере автора это сэкономило около 12% процессорного времени.

Одна тонкость: в CSS картинке нужно задать width: 100% и height: auto. Тогда ширина подстроится под контейнер, а высота посчитается по пропорциям. Без height: auto изображения растянутся.

А ещё в статье объяснено, почему padding-bottom и aspect-ratio автор считает худшими вариантами и как самому замерить разницу в профайлере.

👉 @seniorFront

@frontend_mind

362 0 1

Frontend Головного Мозга

29 Sep, 11:18

Если вы занимаетесь ручным тестированием и хотите перейти к автоматизации, отдельных уроков по JavaScript и Playwright может быть недостаточно. Чтобы уверенно писать автотесты, важно понимать, как устроен весь процесс: от проверки API и интерфейса до запуска тестов в CI/CD.

Курс «Автоматизатор тестирования на JavaScript» поможет выстроить эту систему на практике. Вы научитесь писать автотесты для API и UI, работать с Jest и Playwright, проектировать тестовый фреймворк и запускать проверки с помощью Docker и GitHub CI.

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

Старт курса — 30 сентября. Пройдите вступительное тестирование и узнайте условия обучения: https://vk.cc/d2bLJo

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

370 0 0

Frontend Головного Мозга

28 Sep, 15:48

📏 Высота блока в строках, а не в пикселях

В CSS есть единица lh: 1lh равен вычисленному line-height, то есть высоте одной строки текста. Она давно существует, но о её применении рассказывают редко.

Пример: список надо обрезать по пяти строкам и плавно растворить низ. С max-height: 120px стоит увеличить шрифт, и всё ломается: строки растут, а пиксели нет. С lh размер считается в строках:

.list {
max-height: 5lh;
mask-image: linear-gradient(
to bottom,
#000,
#000 calc(100% - 1lh),
transparent 100%
);
}

Теперь при любом шрифте видно пять строк, а последняя плавно тает.

Оговорка: lh берётся от line-height самого элемента. Чтобы расчёт на родителе совпал со строками детей, задайте шрифт на родителе, а детям оставьте наследование.

В статье ещё отступы между абзацами, «тетрадные» линейки, картинки с float точно по строкам и иконки по размеру текста.

👉 @seniorFront

@frontend_mind

372 0 3

Frontend Головного Мозга

26 Sep, 15:57

299 0 1

Frontend Головного Мозга

26 Sep, 15:57

🤖 AI для фронтенд-разработчика: собираем инструменты на Podlodka Frontend Crew

AI-инструменты уже используют все, но порой в обсуждении с LLM возникает ощущение, что голова полна ответов, но их всё ещё недостаточно, чтобы разрешить вполне себе прикладные вопросы.

Эксперты Podlodka Frontend Crew собралионлайн-конференцию «Фронтенд с AI» (https://podlodka.io/fecrew?utm_campaign=early_bird_frontend_crew_6&utm_source=telegram&utm_medium=paid&utm_content=seniorFront), чтобы вместе с практиками из индустрии увидеть, как работает AI в разных аспектах фронтенд-разработки, а главное — сразу начать использовать новые подходы в реальной жизни.

💬 Какие темы ждут участников сезона с 5 по 9 октября:

🔴 AI Coding и подготовка репозитория к работе с AI
🔴 Spec Kit для разработки интерфейсов
🔴 Агентная разработка в закрытом контуре
🔴 WebMCP как дополнительный harness
🔴 AI-дизайн и его место в процессе разработки.

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

Если хочется не просто читать про AI-тренды, а получить концентрированную порцию знаний именно про AI для фронтенда, присоединяйтесь к сезону.

Вы поймёте, как встроить новые инструменты и подходы в свою работу и найдёте множество единомышленников.

👉 Билеты на сезон (https://podlodka.io/fecrew?utm_campaign=early_bird_frontend_crew_6&utm_source=telegram&utm_medium=paid&utm_content=seniorFront)

@frontend_mind

Онлайн-конференция Podlodka Frontend Crew, сезон #6

Недельное мероприятие от команды Podlodka: ежедневные интерактивные сессии в Zoom по актуальным проблемам frontend-разработки, нон-стоп общение с экспертами и звёздами индустрии, закрытое профессиональное сообщество в Telegram.

300 0 1

Frontend Головного Мозга

25 Sep, 16:01

🎚 «Больше или равно» в CSS без единого if

Новая CSS-функция progress(значение, от, до) показывает, где значение лежит в диапазоне: дробь от 0 до 1. Всё, что за границами, по умолчанию обрезается до 0 или 1.

Отсюда трюк. В диапазоне от 0 до порога ровно 1 выйдет, только когда значение достигло порога. Это готовый флаг.

Например, бейджи за фильмы: пороги 3, 6 и 9 в --badgeLevel, число фильмов в --movieCount:

.badge {
--isLevelUnlocked: progress(var(--movieCount), 0, var(--badgeLevel));
}

При 2 фильмах из 6 получится 0.33, при 6 или 10 будет 1. Container style query (проверка значения переменной у родителя) показывает бейдж при style(--isLevelUnlocked: 1). Перебирать уровни в JS не нужно.

Учтите, что флаг регистрируют через @property с типом , чтобы style query могла проверить его значение.

Приём годится для любого сравнения с порогом, не только для бейджей.

👉 @seniorFront

@frontend_mind

435 0 5

Frontend Головного Мозга

2 Sep, 17:40

Как убрать «висячие» строки во Flexbox: flex-wrap: balance и flex-line-count

Каждый фронтендер сталкивался с проблемой: настраиваешь flex-wrap: wrap, но при сужении экрана на последнюю строку перескакивает ровно один элемент. Раньше это костылили через медиазапросы. Теперь в Chrome есть нативные свойства flex-wrap: balance и flex-line-count.

Автобалансировка: flex-wrap: balance
Свойство распределяет элементы по строкам равномерно, убирая одиноких «сирот» в конце:

CSS
.channels {
display: flex;
flex-wrap: balance;
justify-content: center;
gap: 1rem;
}
Никаких сложных вычислений или JS — браузер всё делает сам.

Контроль строк через flex-line-count
Оно задает минимальное количество строк. Даже если места хватает для одного ряда, элементы принудительно распределятся по заданному числу:

CSS
.nav-list {
display: flex;
flex-wrap: balance;
flex-line-count: 2; /* Минимум 2 строки */
gap: 0.5rem;
}

Подробнее в статье👇

👉

@frontend_mind

1k 0 5 1

Frontend Головного Мозга

28 May, 18:08

TanStack Form: новый стандарт для работы с формами в JS

Все знают TanStack Query (бывший React Query), который перевернул работу с запросами. Теперь команда разработчиков выпустила TanStack Form - библиотеку для управления формами, которая решает старые боли фронтендеров.

Главные фишки:

🟢Агностицизм: работает не только с React, но и с Vue, Angular, Solid, Svelte и даже Vanilla JS.

🟢100% Type-Safe: глубокая интеграция с TypeScript. Ошибки в названиях полей или типах данных подсвечиваются прямо при написании кода.

🟢Валидация без привязки: можно использовать любую привычную библиотеку (Zod, Valibot, Yup) или писать кастомные функции.

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

Если вам надоело мучиться с настройкой сложных форм, TanStack Form - отличный кандидат на замену старым инструментам.

👉

@frontend_mind

1.3k 0 8 7 1

Frontend Головного Мозга

11 May, 13:14

«Летающий» фокус на View Transitions API

Анимация перемещения фокуса между элементами (focus ring) делает интерфейс «живее» и помогает пользователю не терять активный элемент при навигации с клавиатуры. Раньше для этого высчитывали координаты через getBoundingClientRect, теперь всё делает браузер.

Вместо анимации самой кнопки мы анимируем только рамку фокуса. Для этого каждому интерактивному элементу добавляется вспомогательный .

1️⃣ CSS: Рамка фокуса получает уникальное view-transition-name только в тот момент, когда родительский элемент находится в состоянии :focus-visible.

2️⃣ JS: Переключаем фокус программно внутри startViewTransition. Браузер увидит, что элемент с именем focus-ring переместился и изменил размер, и сам создаст плавный переход.

👉

@frontend_mind

992 0 4 10

Frontend Головного Мозга

18 Mar, 22:39

CSS-анимация на примере аналоговых часов

Классический разбор того, как знание спецификации заменяет скрипты. Автор воссоздал реалистичные часы, используя только возможности CSS3.

Адаптивность через em: Один font-size родителя масштабирует все часы пропорционально (включая тени и засечки).

Реалистичный хром: Многослойные box-shadow (внешние и inset) создают объем и металлический блеск без картинок.

Вложенные transform: rotate(): Умная расстановка минутных делений по кругу с помощью всего нескольких тегов .

Тиканье стрелки: Анимация с animation-timing-function: steps(60) вместо плавного вращения.

Понимание вложенных трансформаций и оптимизации рендеринга помогает делать производительные UI-анимации, не нагружая Main Thread.

📖 Детали реализации на Хабре: https://habr.com/ru/articles/171015/

👉

@frontend_mind

777 0 4 1 2

Frontend Головного Мозга

27 Jan, 13:47

Find the stray number

Вам дан массив целых чисел нечетной длины, все из которых одинаковы, за исключением одного единственного числа. Завершите метод, который принимает такой массив и возвращает это единственное число.

Входной массив всегда будет верным! (нечетная длина >= 3)

Примеры:
[1, 1, 2] ==> 2
[17, 17, 3, 17, 17, 17, 17] ==> 3

👉

@frontend_mind

959 0 0 20

Frontend Головного Мозга

26 Jan, 01:53

Программирование в алгоритмах

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

👉

@frontend_mind

723 0 6 2

Frontend Головного Мозга

26 Jan, 01:52

Программирование_в_алгоритмах_2017_Окулов_С_М_1_pdf.pdf

600 0 8 2

Frontend Головного Мозга

9 Jan, 14:58

Как реализовать перегрузку функции в TypeScript?

TypeScript поддерживает перегрузку функций, но её реализация отличается от той, которую можно видеть в других языках. А именно, описывается лишь одна функция и некоторое количество её объявлений с разными параметрами. Когда такой код компилируется в JavaScript, в нём остаётся лишь одна функция. Этот механизм работает благодаря тому, что JS-функции можно вызывать с любым количеством параметров.

class Foo {
myMethod(a: string);
myMethod(a: number);
myMethod(a: number, b: string);
myMethod(a: any, b ? : string) {
alert(a.toString());
}
}

👉

@frontend_mind

971 0 4 7

Frontend Головного Мозга

11 Dec 2025, 04:52

Зачем использовать семантические классы в CSS?

So‘rovnoma

Для ускорения рендеринга страницы
Для создания читаемого и понятного кода, упрощающего поддержку и масштабирование
Для автоматического подключения стилей к HTML-элементам
Для замены CSS-препроцессоров

103 ta ovoz

949 0 0 4 1

Frontend Головного Мозга

11 Dec 2025, 04:52

804 0 0 2 1

Frontend Головного Мозга

5 Dec 2025, 23:14

Story Points или искусство делать ставку на выдуманные числа

Сегодня я хотел бы в очередной раз поднять тему оценки задач, а конкретно оценки при помощи Story Points. Хотя мы давно применяем их в работе, оказалось, что команда по-разному трактует детали. Поэтому мы решили систематизировать и выровнять наши знания, собрать хорошие практики по работе со Story Points и попробовать улучшить процедуру оценки задач у нас.

Результатом работы стал этот материал, которым я с радостью делюсь с вами. Он не претендует на откровения, но удобно собирает терминологию, практические советы и наш опыт — возможно, это сэкономит вам пару-тройку Story Points.

👉

@frontend_mind

670 0 0 3 2

Frontend Головного Мозга

4 Dec 2025, 17:18

‍CSS cвойство margin

Margin задаёт внешние отступы вокруг элемента. Эти отступы не являются частью ширины/высоты элемента при любом значении box-sizing.

Схлопывание
Вертикальные отступы схлопываются друг с другом, горизонтальные – нет. То-есть, если два расположить в колонку (один под другим) и задать каждому margin: 20px 0, то расстояние между ними будет равняться 20px, а не 40px. При этом, если бы у верхнего элемента был задан отступ в 40px, а у нижнего - в 30px, то автоматически выбрался бы больший из них - 40px. Горизонтальные отступы при этом не схлопываются, а суммируются.

Отрицательные значения
Отрицательные значения margin-top/margin-left смещают элемент со своего обычного места.

В CSS есть другой способ добиться похожего эффекта – а именно position:relative. Но между ними есть одно принципиальное различие: при сдвиге через margin соседние элементы занимают освободившееся пространство в отличие от position: relative, при котором элемент визуально сдвигается, но место, где он был, остаётся «занятым».

👉

@frontend_mind

868 0 2 3 1

Frontend Головного Мозга

28 Nov 2025, 23:40

Какое значение примет result?

So‘rovnoma

"undefined"
"string"
"number"
"1"
"null"

583 0 0 4

20 ta oxirgi post ko‘rsatilgan.

6 290

obunachilar

Kanal statistikasi

Kanalda mashhur

🎚 «Больше или равно» в CSS без единого if Новая CSS-функция progress(значение, от, до) показывае...

📏 Высота блока в строках, а не в пикселях В CSS есть единица lh: 1lh равен вычисленному line-hei...

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

🚀 Два атрибута у картинки, и страница перестаёт прыгать Пока картинка грузится, тег img занимает...

#4425 post: Rasm