«Летающий» фокус на View Transitions API
Анимация перемещения фокуса между элементами (focus ring) делает интерфейс «живее» и помогает пользователю не терять активный элемент при навигации с клавиатуры. Раньше для этого высчитывали координаты через getBoundingClientRect, теперь всё делает браузер.
Вместо анимации самой кнопки мы анимируем только рамку фокуса. Для этого каждому интерактивному элементу добавляется вспомогательный <span>.
1️⃣ CSS: Рамка фокуса получает уникальное view-transition-name только в тот момент, когда родительский элемент находится в состоянии :focus-visible.
2️⃣ JS: Переключаем фокус программно внутри startViewTransition. Браузер увидит, что элемент с именем focus-ring переместился и изменил размер, и сам создаст плавный переход.
👉 @frontendInterview
Анимация перемещения фокуса между элементами (focus ring) делает интерфейс «живее» и помогает пользователю не терять активный элемент при навигации с клавиатуры. Раньше для этого высчитывали координаты через getBoundingClientRect, теперь всё делает браузер.
Вместо анимации самой кнопки мы анимируем только рамку фокуса. Для этого каждому интерактивному элементу добавляется вспомогательный <span>.
1️⃣ CSS: Рамка фокуса получает уникальное view-transition-name только в тот момент, когда родительский элемент находится в состоянии :focus-visible.
2️⃣ JS: Переключаем фокус программно внутри startViewTransition. Браузер увидит, что элемент с именем focus-ring переместился и изменил размер, и сам создаст плавный переход.
👉 @frontendInterview
❤1👍1
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 - отличный кандидат на замену старым инструментам.
👉 @frontendInterview
Все знают TanStack Query (бывший React Query), который перевернул работу с запросами. Теперь команда разработчиков выпустила TanStack Form - библиотеку для управления формами, которая решает старые боли фронтендеров.
Главные фишки:
Если вам надоело мучиться с настройкой сложных форм, TanStack Form - отличный кандидат на замену старым инструментам.
👉 @frontendInterview
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
3 сентября(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.
Как это будет:
Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.
Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot
Реклама.
О рекламодателе
Please open Telegram to view this post
VIEW IN TELEGRAM
Как убрать «висячие» строки во 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;
}
Подробнее в статье👇
👉 @frontendInterview
Каждый фронтендер сталкивался с проблемой: настраиваешь 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;
}
Подробнее в статье👇
👉 @frontendInterview
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Оффер 427 000₽ на руки в Сбер и отказались
Оффер 380 000₽ на руки в банк
Оффер 6 800$ net с релокацией на Кипр
Оффер 4 500$ в американскую компанию
👆Это недавние результаты участников нашего комьюнити.
В нашем канале много ценного для разработчиков по подготовке к собесам👇
Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ
Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще
Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY
Как я прохожу собесы:
Оффер 260к на Go в Empoycity
Оффер 300к на Go в "Системная интеграция"
Отжал 390 gross + 25% премии в Иннотех
Оффер на лида 415 gross + 20% премии в ПСБ
🏆Статистика по рынку:
Июль, Июнь, Май, Апрель, Март
А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)
Подписывайся 👇
frontend_punks
Реклама, erid: 2W5zFGy3wrZ ИП Галактионов Тихон Витальевич, ИНН 771618975809
Оффер 380 000₽ на руки в банк
Оффер 6 800$ net с релокацией на Кипр
Оффер 4 500$ в американскую компанию
👆Это недавние результаты участников нашего комьюнити.
Меня зовут Тихон - я действующий разработчик и ментор. Уже 2 года я развиваю комьюнити, где 300+ разработчиков, и вместе мы выжимаем из рынка максимум!
В нашем канале много ценного для разработчиков по подготовке к собесам👇
Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ
Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще
Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY
Как я прохожу собесы:
Оффер 260к на Go в Empoycity
Оффер 300к на Go в "Системная интеграция"
Отжал 390 gross + 25% премии в Иннотех
Оффер на лида 415 gross + 20% премии в ПСБ
🏆Статистика по рынку:
Июль, Июнь, Май, Апрель, Март
А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)
Подписывайся 👇
frontend_punks
Реклама, erid: 2W5zFGy3wrZ ИП Галактионов Тихон Витальевич, ИНН 771618975809
❤1👍1👎1
🔴 Тестовый собес на Frontend-разработчика со старшим разработчиком ex. Сбер в этот четверг!
[+ разбор 50 сложных вопросов в подарок ]
17 сентября (в этот четверг!) в 19:00 по мск приходи онлайн, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика!
Собеседование проведёт Даниил Дмитриев - старший разработчик в R-Vision, ex. Сбер,
Как это будет:
📂 Даниил задаст разработчику вопросы и задачи, которые могут спросить на реальном собесе
📂 После каждого ответа респондента ты услышишь подробный комментарий от ментора и поймёшь, чего на самом деле ожидает собеседующий на интервью
📂 В конце сможешь задать любой вопрос Даниилу и получить на него развёрнутый ответ
Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы
И ты можешь посмотреть его бесплатно 🔥
Только завтра, в прямом эфире!
🎁 Подарок для всех, кто зарегается на веб — файл с ОТВЕТАМИ НА 50 СЛОЖНЫХ ВОПРОСОВ с Frontend-собеседований 🔥
Переходи в бот, чтобы попасть на эфир и забрать подарок 👉 @shortcut_front_bot
Реклама.
О рекламодателе.
[+ разбор 50 сложных вопросов в подарок ]
17 сентября (в этот четверг!) в 19:00 по мск приходи онлайн, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика!
Собеседование проведёт Даниил Дмитриев - старший разработчик в R-Vision, ex. Сбер,
Как это будет:
📂 Даниил задаст разработчику вопросы и задачи, которые могут спросить на реальном собесе
📂 После каждого ответа респондента ты услышишь подробный комментарий от ментора и поймёшь, чего на самом деле ожидает собеседующий на интервью
📂 В конце сможешь задать любой вопрос Даниилу и получить на него развёрнутый ответ
Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы
И ты можешь посмотреть его бесплатно 🔥
Только завтра, в прямом эфире!
🎁 Подарок для всех, кто зарегается на веб — файл с ОТВЕТАМИ НА 50 СЛОЖНЫХ ВОПРОСОВ с Frontend-собеседований 🔥
Переходи в бот, чтобы попасть на эфир и забрать подарок 👉 @shortcut_front_bot
Реклама.
О рекламодателе.
❤1👎1
ДА! Вайбкодинг реально начали проверять на интервью, поэтому мы нашли собеседующего, который проводит AI-секцию в международном финтехе, чтобы вы увидели что на ней спрашивают и как к ней подготовиться.
Как это будет:
Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят сменить работу, повысить свой грейд, ЗП и прокачать скиллы.
Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot
Реклама.
О рекламодателе.
Please open Telegram to view this post
VIEW IN TELEGRAM
711 собесдований и 51 оффер получили наши ученики за лето
- 370k -> Инфра, облачный провайдер
- 235k -> Крупный банк
- 220k -> Fullstack в офис, в регионе
- 371k + премии -> бигтех e-commerce, удаленка
- 250k -> Vue удаленка
- 200k -> Angular удаленка
- 160k -> React удаленка
- 240k -> Vue, удаленка
и другие.... + 11 оффер за сентябрь за сентябрь
В нашем канале много ценного для разработчиков по подготовке к собесам👇
Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ
Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще
Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY
Как я прохожу собесы:
Оффер 260к на Go в Empoycity
Оффер 300к на Go в "Системная интеграция"
Отжал 390 gross + 25% премии в Иннотех
Оффер на лида 415 gross + 20% премии в ПСБ
🏆Статистика по рынку:
Июль, Июнь, Май, Апрель, Март
А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)
Подписывайся 👇
frontend_punks
Реклама, erid: 2W5zFJYfjRj ИП Галактионов Тихон Витальевич, ИНН 771618975809
- 370k -> Инфра, облачный провайдер
- 235k -> Крупный банк
- 220k -> Fullstack в офис, в регионе
- 371k + премии -> бигтех e-commerce, удаленка
- 250k -> Vue удаленка
- 200k -> Angular удаленка
- 160k -> React удаленка
- 240k -> Vue, удаленка
и другие.... + 11 оффер за сентябрь за сентябрь
👋 Привет, я Тихон — действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и не бросаю на испытательном сроке. Вокруг меня собралось целое комьюнити из фронтендеров.
В нашем канале много ценного для разработчиков по подготовке к собесам👇
Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ
Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще
Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY
Как я прохожу собесы:
Оффер 260к на Go в Empoycity
Оффер 300к на Go в "Системная интеграция"
Отжал 390 gross + 25% премии в Иннотех
Оффер на лида 415 gross + 20% премии в ПСБ
🏆Статистика по рынку:
Июль, Июнь, Май, Апрель, Март
А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)
Подписывайся 👇
frontend_punks
Реклама, erid: 2W5zFJYfjRj ИП Галактионов Тихон Витальевич, ИНН 771618975809
🎚 «Больше или равно» в CSS без единого if
Новая CSS-функция progress(значение, от, до) показывает, где значение лежит в диапазоне: дробь от 0 до 1. Всё, что за границами, по умолчанию обрезается до 0 или 1.
Отсюда трюк. В диапазоне от 0 до порога ровно 1 выйдет, только когда значение достигло порога. Это готовый флаг.
Например, бейджи за фильмы: пороги 3, 6 и 9 в --badgeLevel, число фильмов в --movieCount:
При 2 фильмах из 6 получится 0.33, при 6 или 10 будет 1. Container style query (проверка значения переменной у родителя) показывает бейдж при style(--isLevelUnlocked: 1). Перебирать уровни в JS не нужно.
Учтите, что флаг регистрируют через @property с типом <number>, чтобы style query могла проверить его значение.
Приём годится для любого сравнения с порогом, не только для бейджей.
👉 @seniorFront
Новая 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 с типом <number>, чтобы style query могла проверить его значение.
Приём годится для любого сравнения с порогом, не только для бейджей.
👉 @seniorFront
👎2❤1
AI-инструменты уже используют все, но порой в обсуждении с LLM возникает ощущение, что голова полна ответов, но их всё ещё недостаточно, чтобы разрешить вполне себе прикладные вопросы.
Эксперты Podlodka Frontend Crew собрали онлайн-конференцию «Фронтенд с AI», чтобы вместе с практиками из индустрии увидеть, как работает AI в разных аспектах фронтенд-разработки, а главное — сразу начать использовать новые подходы в реальной жизни.
Полная программа — уже на сайте! Формат: пять дней живых Zoom-сессий по утрам и вечерам, закрытое Telegram-комьюнити и много общения со спикерами.
Если хочется не просто читать про AI-тренды, а получить концентрированную порцию знаний именно про AI для фронтенда, присоединяйтесь к сезону.
Вы поймёте, как встроить новые инструменты и подходы в свою работу и найдёте множество единомышленников.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
📏 Высота блока в строках, а не в пикселях
В CSS есть единица lh: 1lh равен вычисленному line-height, то есть высоте одной строки текста. Она давно существует, но о её применении рассказывают редко.
Пример: список надо обрезать по пяти строкам и плавно растворить низ. С max-height: 120px стоит увеличить шрифт, и всё ломается: строки растут, а пиксели нет. С lh размер считается в строках:
Теперь при любом шрифте видно пять строк, а последняя плавно тает.
Оговорка: lh берётся от line-height самого элемента. Чтобы расчёт на родителе совпал со строками детей, задайте шрифт на родителе, а детям оставьте наследование.
В статье ещё отступы между абзацами, «тетрадные» линейки, картинки с float точно по строкам и иконки по размеру текста.
👉 @seniorFront
В 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
👍1