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
🚀 Два атрибута у картинки, и страница перестаёт прыгать
Пока картинка грузится, тег img занимает на странице нулевой размер. Когда файл приходит, блок раздвигается, и текст под ним резко уезжает вниз. Браузер заново пересчитывает раскладку, а читатель теряет строку.
Лечится это атрибутами width и height у img, например width=800 height=600. Браузер ещё до загрузки файла знает пропорции и сразу оставляет под картинку место. В замере автора это сэкономило около 12% процессорного времени.
Одна тонкость: в CSS картинке нужно задать
А ещё в статье объяснено, почему padding-bottom и aspect-ratio автор считает худшими вариантами и как самому замерить разницу в профайлере.
👉 @seniorFront
Пока картинка грузится, тег img занимает на странице нулевой размер. Когда файл приходит, блок раздвигается, и текст под ним резко уезжает вниз. Браузер заново пересчитывает раскладку, а читатель теряет строку.
Лечится это атрибутами width и height у img, например width=800 height=600. Браузер ещё до загрузки файла знает пропорции и сразу оставляет под картинку место. В замере автора это сэкономило около 12% процессорного времени.
Одна тонкость: в CSS картинке нужно задать
width: 100% и height: auto. Тогда ширина подстроится под контейнер, а высота посчитается по пропорциям. Без height: auto изображения растянутся.А ещё в статье объяснено, почему padding-bottom и aspect-ratio автор считает худшими вариантами и как самому замерить разницу в профайлере.
👉 @seniorFront
👍3
Ищем новичков, готовых взять свой первый заказ на разработку сайта. Опыт не нужен.
Заказ: лендинг для AI-сервиса NOVA AI
Срок: 3 дня
Занятость: 20–30 минут в день
Оплата: 10 000 ₽
Опыт: не нужен
Как это устроено:
1. Получаете сообщение от клиента и задачу на разработку лендинга.
2. Собираете структуру сайта на HTML — часть кода мы уже подготовили.
3. Оформляете страницу с помощью CSS и сами выбираете цветовую палитру с ИИ.
4. Добавляете JavaScript, чтобы заработали кнопки и форма генерации текста.
5. Получаете последнюю правку от клиента, адаптируете сайт под смартфон и сдаёте проект.
Если раньше не писали код — не страшно. Перед каждой задачей будет короткое объяснение, готовые фрагменты и подсказки.
Весь путь проходится за 3 дня, от первого сообщения клиента до сданного проекта. Справляются 10 из 10, проверено на сварщиках, кассирах, курьерах и мамах в декрете.
10 000 рублей можно потратить на продукты Айтилогии.
Главное за 3 дня вы поймёте, каково это на самом деле: сидеть с задачей от клиента, доводить её до результата и зарабатывать хорошие деньги, не выходя из дома.
👉 Проскочить на практикум бесплатно
Реклама. ИП Чернова О. А., ИНН:771399721044
Заказ: лендинг для AI-сервиса NOVA AI
Срок: 3 дня
Занятость: 20–30 минут в день
Оплата: 10 000 ₽
Опыт: не нужен
Как это устроено:
1. Получаете сообщение от клиента и задачу на разработку лендинга.
2. Собираете структуру сайта на HTML — часть кода мы уже подготовили.
3. Оформляете страницу с помощью CSS и сами выбираете цветовую палитру с ИИ.
4. Добавляете JavaScript, чтобы заработали кнопки и форма генерации текста.
5. Получаете последнюю правку от клиента, адаптируете сайт под смартфон и сдаёте проект.
Если раньше не писали код — не страшно. Перед каждой задачей будет короткое объяснение, готовые фрагменты и подсказки.
Весь путь проходится за 3 дня, от первого сообщения клиента до сданного проекта. Справляются 10 из 10, проверено на сварщиках, кассирах, курьерах и мамах в декрете.
10 000 рублей можно потратить на продукты Айтилогии.
Главное за 3 дня вы поймёте, каково это на самом деле: сидеть с задачей от клиента, доводить её до результата и зарабатывать хорошие деньги, не выходя из дома.
👉 Проскочить на практикум бесплатно
Реклама. ИП Чернова О. А., ИНН:771399721044
👎5
🌈 Свечение внутри элемента, но из любого фона
Подсветить элемент изнутри проще всего через box-shadow с inset. Но такое свечение одноцветное. А если хочется радужный conic-gradient() или картинку?
Решение из статьи: накрыть элемент псевдоэлементом ::after с нужным фоном и маской оставить видимыми только края. Середина прозрачна, и сам элемент под ней виден.
Маска для левого и правого краёв (black в маске значит «видно»):
Вторая такая же маска с to bottom берёт верх и низ, а mask-composite: add объединяет обе полосы в рамку.
Накладка стоит на position: absolute и inset: 0, поэтому самому элементу нужен position: relative.
В статье есть демо, где оба вида свечения вспыхивают на случайных элементах.
👉 @seniorFront
Подсветить элемент изнутри проще всего через 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
❤2
🔍 Убрал повтор в скринридере и сломал кнопку
Джейк Арчибальд делал кнопку-иконку «жирный» с подсказкой «Bold (⌘B)» на popover="hint". На кнопке стояли aria-label="Bold" и aria-describedby со ссылкой на подсказку.
VoiceOver читал «Bold. Bold. Command B». Чтобы убрать повтор, Джейк удалил aria-label. И кнопка осталась без доступного имени, то есть без названия для скринридера. aria-describedby добавляет только описание, имя он не заменяет.
JAWS в итоге собрал текст из соседних элементов и объявил кнопку сразу жирной и курсивной.
Чинится заменой одного атрибута: aria-labelledby вместо aria-describedby. Он тоже ссылается на подсказку по id, но берёт из неё именно имя. Теперь VoiceOver говорит «Bold. Command B. Button».
Сам Джейк советует проверять в нескольких скринридерах: один, как и один браузер, полной картины не даёт.
В статье есть и вариант, где имя и сочетание клавиш разведены по разным span.
👉 @seniorFront
Джейк Арчибальд делал кнопку-иконку «жирный» с подсказкой «Bold (⌘B)» на popover="hint". На кнопке стояли aria-label="Bold" и aria-describedby со ссылкой на подсказку.
VoiceOver читал «Bold. Bold. Command B». Чтобы убрать повтор, Джейк удалил aria-label. И кнопка осталась без доступного имени, то есть без названия для скринридера. aria-describedby добавляет только описание, имя он не заменяет.
JAWS в итоге собрал текст из соседних элементов и объявил кнопку сразу жирной и курсивной.
Чинится заменой одного атрибута: aria-labelledby вместо aria-describedby. Он тоже ссылается на подсказку по id, но берёт из неё именно имя. Теперь VoiceOver говорит «Bold. Command B. Button».
Сам Джейк советует проверять в нескольких скринридерах: один, как и один браузер, полной картины не даёт.
В статье есть и вариант, где имя и сочетание клавиш разведены по разным span.
👉 @seniorFront
🔥1
🎨 Текст, который сам подбирает цвет под фон
Если фон карточки задаётся фирменным цветом и может быть любым, подбирать к нему цвет текста вручную неудобно.
CSS-функция contrast-color() берёт цвет и возвращает black или white, смотря что контрастнее:
Можно пойти дальше. Сохраняем результат в кастомное свойство, зарегистрированное через @property, и проверяем его запросом @container style(). Вышло white, значит фон тёмный, и текст красим в светлый оттенок цвета карточки. Вышло black, берём глубокий тон того же оттенка.
Если цвета палитры задать вручную, а не выводить из фона, на результат contrast-color() уже не опереться: такие пары автор советует тщательно тестировать.
В статье этот приём вместе с light-dark() собран в целую систему светлой и тёмной темы.
👉 @seniorFront
Если фон карточки задаётся фирменным цветом и может быть любым, подбирать к нему цвет текста вручную неудобно.
CSS-функция contrast-color() берёт цвет и возвращает black или white, смотря что контрастнее:
.card {
--bg: var(--brand-color);
background: var(--bg);
color: contrast-color(var(--bg));
}Можно пойти дальше. Сохраняем результат в кастомное свойство, зарегистрированное через @property, и проверяем его запросом @container style(). Вышло white, значит фон тёмный, и текст красим в светлый оттенок цвета карточки. Вышло black, берём глубокий тон того же оттенка.
Если цвета палитры задать вручную, а не выводить из фона, на результат contrast-color() уже не опереться: такие пары автор советует тщательно тестировать.
В статье этот приём вместе с light-dark() собран в целую систему светлой и тёмной темы.
👉 @seniorFront
🧮 Поле ввода, в которое можно вписать формулу
Часто число для формы сначала надо посчитать. С обычным <input> приходится бегать в калькулятор и обратно. А позже в поле виден только итог, и непонятно, откуда он взялся.
Bramus сделал для этого веб-компонент
Считает компонент своим парсером, без eval(). Он понимает обычные операторы, скобки и функции вроде sqrt, round, min, max. Внутри лежат обычные <input>, поэтому отправка формы и валидация работают как есть. С недописанной формулой вроде
Учтите, что по умолчанию в поле с вашим name уходит сама формула «2 + 3», а не 5. Чтобы сервер получил число, нужен атрибут
Как устроены три поля внутри и почему стили на самом теге сразу применяются к ним, Bramus показывает в статье.
👉 @seniorFront
Часто число для формы сначала надо посчитать. С обычным <input> приходится бегать в калькулятор и обратно. А позже в поле виден только итог, и непонятно, откуда он взялся.
Bramus сделал для этого веб-компонент
<calc-input>. Пишешь (2 + 3) * 4, уходишь из поля, и там появляется 20. Возвращаешь фокус, и снова видна формула, её можно проверить или поправить.Считает компонент своим парсером, без eval(). Он понимает обычные операторы, скобки и функции вроде sqrt, round, min, max. Внутри лежат обычные <input>, поэтому отправка формы и валидация работают как есть. С недописанной формулой вроде
2 + форма не отправится.Учтите, что по умолчанию в поле с вашим name уходит сама формула «2 + 3», а не 5. Чтобы сервер получил число, нужен атрибут
submit="result".Как устроены три поля внутри и почему стили на самом теге сразу применяются к ним, Bramus показывает в статье.
👉 @seniorFront
❤1
5 офферов получили наши ребята на прошлой неделе
Оффер на 4,2k долларов
Оффер на 5k евро
Оффер 260k рублей
Оффер на 210k рублей
Оффер на 220k рублей
И еще 19 за сентябрь... а за лето более 50... и у тебя получится!
Я веду канал, в котором уже 15 тыс разработчиков. Регулярно публикую полезные материалы по подготовке к собесам. А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)
Забирайте в закрепленном сообщении
Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ
Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще
Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY
🏆Статистика по рынку:
Июль, Июнь, Май, Апрель, Март
Подписывайся 👇
frontend_punks
Реклама, erid: 2W5zFGdRKcm ИП Галактионов Тихон Витальевич, ИНН 771618975809
Оффер на 4,2k долларов
Оффер на 5k евро
Оффер 260k рублей
Оффер на 210k рублей
Оффер на 220k рублей
И еще 19 за сентябрь... а за лето более 50... и у тебя получится!
👋 Меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и не бросаю на испытательном сроке. Вокруг меня собралось целое комьюнити из почти 300 фронтендеров.
Я веду канал, в котором уже 15 тыс разработчиков. Регулярно публикую полезные материалы по подготовке к собесам. А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)
Забирайте в закрепленном сообщении
Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ
Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще
Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY
🏆Статистика по рынку:
Июль, Июнь, Май, Апрель, Март
Подписывайся 👇
frontend_punks
Реклама, erid: 2W5zFGdRKcm ИП Галактионов Тихон Витальевич, ИНН 771618975809
👎2