This media is not supported in your browser
VIEW IN TELEGRAM
Apple TV Macbeth Poster Animation
Анимированная карточка, реализованная на HTML и SCSS.
👉 @seniorFront
Анимированная карточка, реализованная на HTML и SCSS.
👉 @seniorFront
❤4👍1
Как работает JPEG: магия, обманывающая ваши глаза
Вы когда-нибудь задумывались, почему JPEG при сжатии в 10 раз выглядит почти идеально, а при 100 — рассыпается на «кашу» из квадратов?
Вот основные этапы этой инженерной магии:
🌈Цветовой обман (YCbCr): Человеческий глаз лучше видит яркость, чем оттенки. JPEG переводит картинку в формат, где яркость отделена от цвета, и... просто выкидывает половину цветовых данных. Вы этого даже не заметите!
🟦 Сетка 8x8: Изображение режется на блоки. Именно их мы видим как «артефакты», когда перебарщиваем со сжатием.
🔄 Магия частот (DCT): Каждый блок превращается из набора пикселей в набор «частот».
🎚 Квантование: Тот самый ползунок «Quality» в редакторах. На этом этапе алгоритм решает, сколько мелких деталей превратить в нули. Больше нулей — меньше вес файла, но хуже картинка.
Потыкать интерактивные примеры и увидеть DCT в действии можно здесь 👇
Вы когда-нибудь задумывались, почему JPEG при сжатии в 10 раз выглядит почти идеально, а при 100 — рассыпается на «кашу» из квадратов?
Вот основные этапы этой инженерной магии:
🌈Цветовой обман (YCbCr): Человеческий глаз лучше видит яркость, чем оттенки. JPEG переводит картинку в формат, где яркость отделена от цвета, и... просто выкидывает половину цветовых данных. Вы этого даже не заметите!
🟦 Сетка 8x8: Изображение режется на блоки. Именно их мы видим как «артефакты», когда перебарщиваем со сжатием.
🔄 Магия частот (DCT): Каждый блок превращается из набора пикселей в набор «частот».
🎚 Квантование: Тот самый ползунок «Quality» в редакторах. На этом этапе алгоритм решает, сколько мелких деталей превратить в нули. Больше нулей — меньше вес файла, но хуже картинка.
Потыкать интерактивные примеры и увидеть DCT в действии можно здесь 👇
❤1🔥1
📄 Эффект загнутого угла на чистом CSS
Интересный разбор от Kitty Giraudel.
Традиционно «загнутый уголок» на карточках создавали с помощью картинок или перегруженных псевдоэлементов. Автор статьи предлагает более изящный способ, который полагается исключительно на слоистые градиенты.
Как это работает?
Весь секрет в комбинировании двух линейных градиентов внутри одного свойства background:
Первый слой - это крошечный треугольник, который имитирует загнутую часть бумаги.
Второй слой - основной фон элемента, в котором сделан «срез» (прозрачная область) точно в том месте, где располагается наш треугольник.
Это круто из-за легкой кастомизации: достаточно изменить пару CSS-переменных, чтобы моментально перекрасить уголок или изменить его размер во всем проекте.
А еще браузер рисует градиенты быстрее, чем подгружает внешние ассеты, что экономит трафик и ускоряет рендеринг.
Оригинал статьи ниже👇
👉 @seniorFront
Интересный разбор от Kitty Giraudel.
Традиционно «загнутый уголок» на карточках создавали с помощью картинок или перегруженных псевдоэлементов. Автор статьи предлагает более изящный способ, который полагается исключительно на слоистые градиенты.
Как это работает?
Весь секрет в комбинировании двух линейных градиентов внутри одного свойства background:
Первый слой - это крошечный треугольник, который имитирует загнутую часть бумаги.
Второй слой - основной фон элемента, в котором сделан «срез» (прозрачная область) точно в том месте, где располагается наш треугольник.
Это круто из-за легкой кастомизации: достаточно изменить пару CSS-переменных, чтобы моментально перекрасить уголок или изменить его размер во всем проекте.
А еще браузер рисует градиенты быстрее, чем подгружает внешние ассеты, что экономит трафик и ускоряет рендеринг.
Оригинал статьи ниже👇
👉 @seniorFront
❤6🔥3👍2🤔2
SVG-фильтры: от «магии» к пониманию
Если CSS-фильтры - это готовые инста-фильтры, то SVG-фильтры - полноценный Photoshop внутри браузера.
Статья Аны Тюдор - Это фундаментальный разбор того, как устроены фильтры «под капотом». Автор не просто дает код, а объясняет механику: от того, где должен лежать тег <filter>, до логики работы с альфа-каналами.
🟢 Конвейер данных (in и result): Фильтр - это не одна команда, а цепочка. Вы берете исходник, размываете его, сохраняете результат под именем «Layer1», а потом накладываете на него что-то еще. Полный контроль над потоком.
🟢 Магия каналов: Автор объясняет разницу между SourceGraphic (весь объект) и SourceAlpha (только его форма). Хотите создать крутую тень или свечение? Работайте с Alpha-каналом, не трогая цвета.
🟢 Борьба с «обрезкой»: Самая частая проблема - когда фильтр обрезается по краям. В статье четко расписано, как через атрибуты x, y, width, height расширить «холст» фильтра, чтобы эффектам было где разгуляться.
Прочитать оригинал👇
👉 @seniorFront
Если CSS-фильтры - это готовые инста-фильтры, то SVG-фильтры - полноценный Photoshop внутри браузера.
Статья Аны Тюдор - Это фундаментальный разбор того, как устроены фильтры «под капотом». Автор не просто дает код, а объясняет механику: от того, где должен лежать тег <filter>, до логики работы с альфа-каналами.
Прочитать оригинал👇
👉 @seniorFront
Please open Telegram to view this post
VIEW IN TELEGRAM
❤7
Валидация на чистом CSS: считаем поля через :nth-child(n of selector)
Раньше для проверки «заполнено ли хотя бы 3 поля» нам обязательно нужен был JavaScript. Теперь с этим справляется нативный CSS.
В чем суть?
Синтаксис :nth-child(n of .selector) позволяет считать не все элементы подряд, а только те, что соответствуют определенному правилу.
Как это работает для валидации:
Мы определяем «заполненное» состояние (например, через :not(:placeholder-shown) или :valid).
Используем селектор :nth-child(3 of .field:has(:valid)). Он «выстрелит» только тогда, когда в списке появится третий валидный элемент.
Через комбинатор «тильда» (~) управляем состоянием кнопки отправки или показываем сообщение об успехе.
Пример кода:
CSS
/* Разблокируем кнопку, когда заполнено минимум 3 поля */
.form:has(.field:nth-child(3 of :has(input:not(:placeholder-shown)))) button {
opacity: 1;
pointer-events: auto;
}
👉 @seniorFront
Раньше для проверки «заполнено ли хотя бы 3 поля» нам обязательно нужен был JavaScript. Теперь с этим справляется нативный CSS.
В чем суть?
Синтаксис :nth-child(n of .selector) позволяет считать не все элементы подряд, а только те, что соответствуют определенному правилу.
Как это работает для валидации:
Мы определяем «заполненное» состояние (например, через :not(:placeholder-shown) или :valid).
Используем селектор :nth-child(3 of .field:has(:valid)). Он «выстрелит» только тогда, когда в списке появится третий валидный элемент.
Через комбинатор «тильда» (~) управляем состоянием кнопки отправки или показываем сообщение об успехе.
Пример кода:
CSS
/* Разблокируем кнопку, когда заполнено минимум 3 поля */
.form:has(.field:nth-child(3 of :has(input:not(:placeholder-shown)))) button {
opacity: 1;
pointer-events: auto;
}
👉 @seniorFront
🔥11❤2👍1
Нативный CSS-скоупинг: как изолировать стили без сборщиков
Если вы работали с Vue или Svelte, то наверняка любите их локальные стили (scoping) — это когда код компонента заперт внутри него и не ломает верстку в других частях сайта. Раньше для этого приходилось настраивать CSS Modules или плагины для Webpack/Vite. Теперь браузеры учатся делать это сами.
В Safari появилась интересная фича — контейнеры только по имени (Name-Only Containers).
Обычно директива @container проверяет размеры экрана (например, «если родитель шире 500px»). Но если убрать условие размера и оставить только имя, мы получаем отличный инструмент для изоляции стилей:
Теперь, даже если на сайте есть другие элементы с классом .title, наш цвет применится только внутри .my-card.
👉 @seniorFront
Если вы работали с Vue или Svelte, то наверняка любите их локальные стили (scoping) — это когда код компонента заперт внутри него и не ломает верстку в других частях сайта. Раньше для этого приходилось настраивать CSS Modules или плагины для Webpack/Vite. Теперь браузеры учатся делать это сами.
В Safari появилась интересная фича — контейнеры только по имени (Name-Only Containers).
Обычно директива @container проверяет размеры экрана (например, «если родитель шире 500px»). Но если убрать условие размера и оставить только имя, мы получаем отличный инструмент для изоляции стилей:
CSS
/* Обозначаем границы нашего компонента карточки */
.my-card {
container-name: card-container;
}
/* Пишем стили, которые будут работать ТОЛЬКО внутри этой карточки */
@container card-container {
.title { color: royalblue; }
}Теперь, даже если на сайте есть другие элементы с классом .title, наш цвет применится только внутри .my-card.
👉 @seniorFront
🔥12❤5
🪄 Как убрать лишний div, не трогая HTML
В CSS сетка или флексбокс действуют только на прямых детей контейнера. Если между ними затесалась обёртка, её содержимое живёт в своём мирке и в общую раскладку не попадает.
Свойство
Пример из статьи. В
и теперь браузер видит три картинки и подпись как четырёх равноправных детей
Важная оговорка: с таблицами, заголовками, кнопками и списками это ломает доступность, автор советует там не применять и проверять результат.
В статье ещё семь живых раскладок, где приём спасает.
В CSS сетка или флексбокс действуют только на прямых детей контейнера. Если между ними затесалась обёртка, её содержимое живёт в своём мирке и в общую раскладку не попадает.
Свойство
display: contents решает это так: сам элемент как коробка исчезает (фон, рамка, отступы пропадают), а его дети становятся детьми родителя. Похоже на «разгруппировать» в графическом редакторе.Пример из статьи. В
<figure> лежит div с тремя картинками и рядом <figcaption>. Подпись никак не встроить в сетку фотографий, потому что она снаружи div. Пишем.photo-group {
display: contents;
}и теперь браузер видит три картинки и подпись как четырёх равноправных детей
<figure>, а сетку задаём прямо на нём.Важная оговорка: с таблицами, заголовками, кнопками и списками это ломает доступность, автор советует там не применять и проверять результат.
В статье ещё семь живых раскладок, где приём спасает.
❤11🔥2
🔴 Тестовый собес на 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
📱 Быстро жмёте кнопку на телефоне, а страница вдруг зумится
На одном веб-радио при быстром переключении станций с мобильного браузер то приближал, то отдалял страницу. Viewport meta при этом был настроен правильно.
Виноват жест двойного тапа. Safari на iOS принимает два быстрых нажатия за просьбу увеличить элемент, в данном случае саму кнопку.
Лечится одной строкой CSS:
Прокрутка и масштабирование двумя пальцами продолжают работать, отключается только зум по двойному тапу. По словам MDN, браузеру заодно не нужно задерживать событие click в ожидании второго тапа.
Есть соблазн вместо этого дописать в viewport
В оригинале два демо на CodePen, с кнопками без этого свойства и с ним: потыкайте их с телефона и почувствуйте разницу.
👉 @seniorFront
На одном веб-радио при быстром переключении станций с мобильного браузер то приближал, то отдалял страницу. Viewport meta при этом был настроен правильно.
Виноват жест двойного тапа. Safari на iOS принимает два быстрых нажатия за просьбу увеличить элемент, в данном случае саму кнопку.
Лечится одной строкой CSS:
.button {
touch-action: manipulation;
}Прокрутка и масштабирование двумя пальцами продолжают работать, отключается только зум по двойному тапу. По словам MDN, браузеру заодно не нужно задерживать событие click в ожидании второго тапа.
Есть соблазн вместо этого дописать в viewport
maximum-scale=1.0, user-scalable=no. Не надо: так зум пропадает целиком, а это нарушение WCAG.В оригинале два демо на CodePen, с кнопками без этого свойства и с ним: потыкайте их с телефона и почувствуйте разницу.
👉 @seniorFront
❤10👍3
🎯 Иконка в списке съезжает, когда подпись переносится на вторую строку
Иконка и текст стоят в flex-контейнере с align-items: center. Когда текст переносится, иконка встаёт посередине всего блока, а не напротив первой строки.
С align-items: start она поднимается выше букв: у строки есть пустое место от шрифта. Сдвиг на фиксированные 3px ломается, как только меняется шрифт или размер иконки.
Надёжнее считать сдвиг через CSS-единицу lh, она равна высоте строки:
Иконка сдвигается на половину разницы между высотой строки и своим размером и встаёт по центру первой строки при любом шрифте. Подвох в том, что размер иконки нужно знать заранее.
А для иконки в ::before понадобятся ещё aspect-ratio и height: auto, и это отдельная история.
👉 @seniorFront
Иконка и текст стоят в flex-контейнере с align-items: center. Когда текст переносится, иконка встаёт посередине всего блока, а не напротив первой строки.
С align-items: start она поднимается выше букв: у строки есть пустое место от шрифта. Сдвиг на фиксированные 3px ломается, как только меняется шрифт или размер иконки.
Надёжнее считать сдвиг через CSS-единицу lh, она равна высоте строки:
.icon {
/* --icon-size is defined via JS. */
--size: var(--icon-size);
--offset: calc((1lh - var(--size)) / 2);
transform: translateY(var(--offset));
}Иконка сдвигается на половину разницы между высотой строки и своим размером и встаёт по центру первой строки при любом шрифте. Подвох в том, что размер иконки нужно знать заранее.
А для иконки в ::before понадобятся ещё aspect-ratio и height: auto, и это отдельная история.
👉 @seniorFront
👍1🔥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 почти не настраивается: по сути, только цвет через accent-color. Псевдоэлемент ::checkmark уже есть в спецификации, но, по словам автора, браузеры над ним пока не работают.
Приём простой: настоящий <input> не прячут, а кладут внутрь span с рамкой, снимают родной вид и растягивают поверх коробки:
Его не видно, но он по-прежнему получает фокус и рисует кольцо фокуса. Галочка — отдельная SVG рядом, появляется по селектору
Оговорка: для промежуточного состояния нужна ещё одна SVG, которую переключают.
Тот же код подходит для радиокнопок и масштабируется одним font-size.
👉 @seniorFront
Родной чекбокс в CSS почти не настраивается: по сути, только цвет через accent-color. Псевдоэлемент ::checkmark уже есть в спецификации, но, по словам автора, браузеры над ним пока не работают.
Приём простой: настоящий <input> не прячут, а кладут внутрь span с рамкой, снимают родной вид и растягивают поверх коробки:
.checkbox input {
margin: 0;
width: 100%;
height: 100%;
appearance: none;
position: absolute;
top: 0;
left: 0;
border-radius: 0.2em;
}Его не видно, но он по-прежнему получает фокус и рисует кольцо фокуса. Галочка — отдельная SVG рядом, появляется по селектору
input:checked + svg.Оговорка: для промежуточного состояния нужна ещё одна SVG, которую переключают.
Тот же код подходит для радиокнопок и масштабируется одним font-size.
👉 @seniorFront
👍2❤1🔥1
📦 Почему карточка ломается на широком мониторе
Медиазапрос @media знает только ширину окна. Положите карточку в колонку 300px на экране 1920px, и правило min-width: 1024px всё равно сработает. Карточка получит широкую раскладку и начнёт сжиматься и вылезать за края.
Контейнерный запрос @container спрашивает другое: сколько места у компонента именно здесь. Обёртку объявляем контейнером, а стили карточки завязываем на её ширину:
Теперь карточка встаёт в ряд, только если у обёртки есть 450px по горизонтали. Хоть на телефоне, хоть в узком сайдбаре десктопа.
Подвох: контейнер не может запрашивать сам себя. Чтобы менять .card, её нужно обернуть ещё одним элементом.
В статье ещё типографика на единицах cqi и способ поймать перенос строки во flexbox без JavaScript.
👉 @seniorFront
Медиазапрос @media знает только ширину окна. Положите карточку в колонку 300px на экране 1920px, и правило min-width: 1024px всё равно сработает. Карточка получит широкую раскладку и начнёт сжиматься и вылезать за края.
Контейнерный запрос @container спрашивает другое: сколько места у компонента именно здесь. Обёртку объявляем контейнером, а стили карточки завязываем на её ширину:
.card-wrapper {
container-name: card;
container-type: inline-size;
}
@container card (min-width: 450px) {
.card {
display: flex;
flex-direction: row;
}
}Теперь карточка встаёт в ряд, только если у обёртки есть 450px по горизонтали. Хоть на телефоне, хоть в узком сайдбаре десктопа.
Подвох: контейнер не может запрашивать сам себя. Чтобы менять .card, её нужно обернуть ещё одним элементом.
В статье ещё типографика на единицах cqi и способ поймать перенос строки во flexbox без JavaScript.
👉 @seniorFront
❤2🔥2
✨ Как не оставить один пункт меню одного на новой строке
Когда во флексбоксе включён перенос (flex-wrap: wrap), элементы уходят на следующую строку, как только перестают помещаться. Бывает, что там оказывается ровно один: пять пунктов меню сверху и одинокий «Speaking» снизу.
Обычно это чинят медиазапросом, но он легко ломается, стоит поменять текст. Новое значение flex-wrap: balance делает иначе: браузер сам раскладывает элементы по строкам ровнее, без расчётов ширины.
Для сравнения: тот же ряд иконок соцсетей без balance приходится выравнивать обходными путями, от контейнерных запросов до display: contents. Все четыре варианта из разбора заметно длиннее.
Оговорка: на момент публикации это работает только в Chrome, начиная со 150-й версии.
Рядом появилось ещё свойство flex-line-count, которое задаёт минимальное число строк, и на нём получается даже экспериментальная masonry-раскладка.
👉 @seniorFront
Когда во флексбоксе включён перенос (flex-wrap: wrap), элементы уходят на следующую строку, как только перестают помещаться. Бывает, что там оказывается ровно один: пять пунктов меню сверху и одинокий «Speaking» снизу.
Обычно это чинят медиазапросом, но он легко ломается, стоит поменять текст. Новое значение flex-wrap: balance делает иначе: браузер сам раскладывает элементы по строкам ровнее, без расчётов ширины.
.channels {
display: flex;
flex-wrap: balance;
justify-content: center;
gap: 1rem;
}Для сравнения: тот же ряд иконок соцсетей без balance приходится выравнивать обходными путями, от контейнерных запросов до display: contents. Все четыре варианта из разбора заметно длиннее.
Оговорка: на момент публикации это работает только в Chrome, начиная со 150-й версии.
Рядом появилось ещё свойство flex-line-count, которое задаёт минимальное число строк, и на нём получается даже экспериментальная masonry-раскладка.
👉 @seniorFront
👍3
3 дня бесплатного обучения во Frontend-разработке!
Вместо лекций пройди симуляцию настоящего первого заказа. Скучных уроков не будет. Их заменяет сюжет, где ты уже начинающий Frontend-разработчик и у тебя есть первый клиент.
За 3 дня ты:
- Получишь первую задачу от «клиента» стоимостью 10 000 руб. и соберёшь структуру сайта на HTML;
- Оформишь внешний вид сайта по пожеланиям клиента с помощью CSS;
- Добавишь на страницу интерактивность с JavaScript — нажал → сработало;
- Внесёшь финальную правку и сдашь готовый проект;
- Заберёшь сайт себе. Можно оформить как кейс в портфолио.
С нас — задача, подсказки на каждом шаге и разбор, если что-то не получается.
С тебя — 20–30 минут в день.
👉 Начать бесплатно
К концу третьего дня у тебя будет не абстрактное «прошёл курс», а готовый проект и понимание, как зарабатываются деньги на удалёнке в IT.
Вместо лекций пройди симуляцию настоящего первого заказа. Скучных уроков не будет. Их заменяет сюжет, где ты уже начинающий Frontend-разработчик и у тебя есть первый клиент.
За 3 дня ты:
- Получишь первую задачу от «клиента» стоимостью 10 000 руб. и соберёшь структуру сайта на HTML;
- Оформишь внешний вид сайта по пожеланиям клиента с помощью CSS;
- Добавишь на страницу интерактивность с JavaScript — нажал → сработало;
- Внесёшь финальную правку и сдашь готовый проект;
- Заберёшь сайт себе. Можно оформить как кейс в портфолио.
С нас — задача, подсказки на каждом шаге и разбор, если что-то не получается.
С тебя — 20–30 минут в день.
👉 Начать бесплатно
К концу третьего дня у тебя будет не абстрактное «прошёл курс», а готовый проект и понимание, как зарабатываются деньги на удалёнке в IT.