Senior Frontend - javascript, html, css

@seniorFront

Kanal geosi va tili: Rossiya, Ruscha

Toifa: Texnologiyalar

Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи
Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU

Зарегистрирован в РКН

Bog‘liq kanallar | O‘xshash kanallar

Kanal geosi va tili

Rossiya, Ruscha

Toifa

Texnologiyalar

Statistika

Saralanganlar

Postlar filtri

O‘chirilganlarni yashirish

Repostlarni yashirish

Senior Frontend - javascript, html, css

5 Oct, 13:01

✨ Одна и та же CSS-переменная может дать 1, а может 2

Кастомные свойства вроде --index по умолчанию хранятся как кусок текста. Вычисляется он там, где переменную подставили через var(), а не там, где объявили.

Пример Джейка Арчибальда. У второго div задано --index: sibling-index() (номер элемента среди соседей, с единицы). Его первый ребёнок, абзац, получает scale: var(--index). Масштаб будет 1: функция считается уже для абзаца.

Теперь зарегистрируем свойство с типом:
@property --index { syntax: ''; inherits: true; initial-value: 0;}
Значение вычислится прямо на div и станет числом 2, абзац увеличится вдвое. С em, lh и единицами контейнерных запросов то же правило.

Но var() внутри значения подставляется сразу при любом типе. Если в --index есть var(--multiplier), переопределять --multiplier у ребёнка бесполезно.

А что при этом происходит с URL из разных таблиц стилей, разобрано в статье.

👉 @seniorFront

Статья

312 1 3

Senior Frontend - javascript, html, css

2 Oct, 13:00

🎉 iframe, который сам подстраивается под содержимое

Обычно у фиксированный размер. Встроенная форма или виджет комментариев выросли, и появляется полоса прокрутки.

В Chrome 154 фрейм умеет брать размер из встроенного документа. Нужно согласие обеих сторон. Внешняя страница задаёт фрейму свойство frame-sizing:

/* In styles.css for index.html */
iframe {
frame-sizing: content-height;
width: 100%;
}

А документ внутри фрейма кладёт в head мета-тег responsive-embedded-sizing. Его параметр allow-origins ограничивает, каким сайтам можно сообщать размер.

Размер передаётся после загрузки. Если содержимое изменилось, документ вызывает window.requestResize().

Пока это есть только в Chrome 154, в Firefox и Safari поддержки нет.

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

👉 @seniorFront

Статья

946 1 14 4

Senior Frontend - javascript, html, css

1 Oct, 13:00

⚽ Одна обёртка, две стороны сетки: турнирная таблица на subgrid

Турнирную сетку плей-офф рисуют симметрично: часть пар раунда слева, часть справа. На сайте FIFA каждая такая половина свёрстана отдельным div, и разметка просто повторяет картинку.

Есть вариант чище. Раунд остаётся одним элементом с детьми .start и .end. Он растягивается на всю общую сетку .rounds и через subgrid получает её колонки и строки:

.round-of-8 {
grid-column: 1 / -1;
grid-row: 1 / -1;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}

Теперь .start встаёт в первую колонку, а .end в последнюю, хотя в DOM они соседи.

Подвох в выравнивании: align-items: center не ставит матчи соседних раундов друг напротив друга. Помогает flex: 1 у каждого матча внутри flex-колонок .start и .end, чтобы матчи делили высоту поровну.

А в статье видно, как та же разметка на узком экране перестраивается так, что каждый раунд занимает одну колонку.

👉 @seniorFront

Статья

1k 1 13 1

Senior Frontend - javascript, html, css

1 Oct, 09:30

3 дня бесплатного обучения во Frontend-разработке!

Вместо лекций пройди симуляцию настоящего первого заказа. Скучных уроков не будет. Их заменяет сюжет, где ты уже начинающий Frontend-разработчик и у тебя есть первый клиент.

За 3 дня ты:

- Получишь первую задачу от «клиента» стоимостью 10 000 руб. и соберёшь структуру сайта на HTML;

- Оформишь внешний вид сайта по пожеланиям клиента с помощью CSS;

- Добавишь на страницу интерактивность с JavaScript — нажал → сработало;

- Внесёшь финальную правку и сдашь готовый проект;

- Заберёшь сайт себе. Можно оформить как кейс в портфолио.

С нас — задача, подсказки на каждом шаге и разбор, если что-то не получается.
С тебя — 20–30 минут в день.

👉 Начать бесплатно

К концу третьего дня у тебя будет не абстрактное «прошёл курс», а готовый проект и понимание, как зарабатываются деньги на удалёнке в IT.

951 0 5

Senior Frontend - javascript, html, css

30 Sep, 13:00

✨ Как не оставить один пункт меню одного на новой строке

Когда во флексбоксе включён перенос (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

Статья

1k 1 12 2

Senior Frontend - javascript, html, css

29 Sep, 13:00

📦 Почему карточка ломается на широком мониторе

Медиазапрос @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

Статья

1.1k 1 13 3

Senior Frontend - javascript, html, css

28 Sep, 13:00

✅ Свой чекбокс, который не ломает фокус

Родной чекбокс в CSS почти не настраивается: по сути, только цвет через accent-color. Псевдоэлемент ::checkmark уже есть в спецификации, но, по словам автора, браузеры над ним пока не работают.

Приём простой: настоящий не прячут, а кладут внутрь 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

Статья

1.2k 1 15 2

Senior Frontend - javascript, html, css

26 Sep, 10:00

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

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

Эксперты Podlodka Frontend Crew собрали онлайн-конференцию «Фронтенд с AI», чтобы вместе с практиками из индустрии увидеть, как работает AI в разных аспектах фронтенд-разработки, а главное — сразу начать использовать новые подходы в реальной жизни.

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

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

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

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

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

👉 Билеты на сезон

1.1k 1 5

Senior Frontend - javascript, html, css

25 Sep, 13:00

🎯 Иконка в списке съезжает, когда подпись переносится на вторую строку

Иконка и текст стоят в 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.5k 1 13 2

Senior Frontend - javascript, html, css

24 Sep, 13:00

📱 Быстро жмёте кнопку на телефоне, а страница вдруг зумится

На одном веб-радио при быстром переключении станций с мобильного браузер то приближал, то отдалял страницу. Viewport meta при этом был настроен правильно.

Виноват жест двойного тапа. Safari на iOS принимает два быстрых нажатия за просьбу увеличить элемент, в данном случае саму кнопку.

Лечится одной строкой CSS:

.button {
touch-action: manipulation;
}

Прокрутка и масштабирование двумя пальцами продолжают работать, отключается только зум по двойному тапу. По словам MDN, браузеру заодно не нужно задерживать событие click в ожидании второго тапа.

Есть соблазн вместо этого дописать в viewport maximum-scale=1.0, user-scalable=no. Не надо: так зум пропадает целиком, а это нарушение WCAG.

В оригинале два демо на CodePen, с кнопками без этого свойства и с ним: потыкайте их с телефона и почувствуйте разницу.

👉 @seniorFront

Статья

1.6k 1 13 12

Senior Frontend - javascript, html, css

15 Sep, 18:00

🔴 Тестовый собес на Frontend-разработчика со старшим разработчиком ex. Сбер в этот четверг!
[+ разбор 50 сложных вопросов в подарок ]

17 сентября (в этот четверг!) в 19:00 по мск приходи онлайн, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика!

Собеседование проведёт Даниил Дмитриев - старший разработчик в R-Vision, ex. Сбер,

Как это будет:

📂 Даниил задаст разработчику вопросы и задачи, которые могут спросить на реальном собесе

📂 После каждого ответа респондента ты услышишь подробный комментарий от ментора и поймёшь, чего на самом деле ожидает собеседующий на интервью

📂 В конце сможешь задать любой вопрос Даниилу и получить на него развёрнутый ответ

Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы

И ты можешь посмотреть его бесплатно 🔥
Только завтра, в прямом эфире!

🎁 Подарок для всех, кто зарегается на веб — файл с ОТВЕТАМИ НА 50 СЛОЖНЫХ ВОПРОСОВ с Frontend-собеседований 🔥

Переходи в бот, чтобы попасть на эфир и забрать подарок 👉 @shortcut_front_bot

Реклама.
О рекламодателе.

3.2k 1 3 1

Senior Frontend - javascript, html, css

2 Sep, 12:11

🪄 Как убрать лишний div, не трогая HTML

В CSS сетка или флексбокс действуют только на прямых детей контейнера. Если между ними затесалась обёртка, её содержимое живёт в своём мирке и в общую раскладку не попадает.

Свойство display: contents решает это так: сам элемент как коробка исчезает (фон, рамка, отступы пропадают), а его дети становятся детьми родителя. Похоже на «разгруппировать» в графическом редакторе.

Пример из статьи. В лежит div с тремя картинками и рядом . Подпись никак не встроить в сетку фотографий, потому что она снаружи div. Пишем

.photo-group {
display: contents;
}

и теперь браузер видит три картинки и подпись как четырёх равноправных детей , а сетку задаём прямо на нём.

Важная оговорка: с таблицами, заголовками, кнопками и списками это ломает доступность, автор советует там не применять и проверять результат.

В статье ещё семь живых раскладок, где приём спасает.

Статья

4.9k 1 18 12

Senior Frontend - javascript, html, css

28 May, 14:32

Нативный CSS-скоупинг: как изолировать стили без сборщиков

Если вы работали с 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

Статья

10.3k 1 28 17

Senior Frontend - javascript, html, css

11 May, 12:08

Валидация на чистом 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

Статья

8.2k 1 32 11

Senior Frontend - javascript, html, css

10 May, 08:17

Получи грант до 3,48 млн на обучение дизайну

Поступай на дизайн в Центральный университет с грантом.

Для учеников 10–11-х классов и СПО. Освой графический, UI/UX и продуктовый дизайн. Создавай визуальные концепты будущего.

На программе студенты получают фундаментальную базу, развивают прикладные навыки, приобретают опыт работы над реальными проектами, собирают портфолио и строят связи внутри дизайн-сообщества

Подать заявку

#реклама 16+
cu.ru
О рекламодателе

758 1 0 1

Senior Frontend - javascript, html, css

8 May, 16:00

00:07

Митапы — это, конечно, круто и полезно. Но что может быть лучше открытой дискуссии с коллегами о наболевшем? ☑️

AvitoTech тут зовёт на классный ивент для фронтендеров. Обещают полтора часа дискуссий на самые разные темы: от роста фронтенд-инженера в тимлида до ванильного JS. И вишенка на торте — афтерпати на веранде ☄️

Всё пройдёт вечером 19 мая, так что погода не должна подкачать. Регистрация, кстати, по ссылке.

1.2k 1 3 1

Senior Frontend - javascript, html, css

27 Apr, 14:12

Как frontend-разработчику вырасти в ЗП?

День сурка frontend-разработчика выглядит так

Зарплата замерла, задачи — бесконечный повтор, растет только кол-во бессмысленных созвонов

Откликаешься на вакансии — отвечают только ноунеймы, на собесах закидывают странными алгоритмами «на скорость».

И самое бесящее — пока буксуешь, кто-то вокруг спокойно забирает офферы в Яндекс и VK...

Ты тоже можешь получить оффер в компанию, в которой тебя будут ценить и хорошо платить.

👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.

В своем канале:
👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения
👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться
👉На примерах объясняю, как проходить собеседования, включая техничку
👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров

А еще регулярно публикую полезные материалы:
▪️Задачи, на которых валяться кандидаты
▪️База по микрофронтам
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️100 вопросов, которые точно помогут тебе на собеседовании
▪️Чек лист проверки своего резюме

А еще у меня множество успешных кейсов и трогательных отзывов, найти их можно в канале.

Реклама, erid: 2W5zFHW2DBP ИП Галактионов Тихон Витальевич, ИНН 771618975809

2.8k 1 1 2 1

Senior Frontend - javascript, html, css

16 Apr, 13:15

SVG-фильтры: от «магии» к пониманию

Если CSS-фильтры - это готовые инста-фильтры, то SVG-фильтры - полноценный Photoshop внутри браузера.

Статья Аны Тюдор - Это фундаментальный разбор того, как устроены фильтры «под капотом». Автор не просто дает код, а объясняет механику: от того, где должен лежать тег , до логики работы с альфа-каналами.

🟢Конвейер данных (in и result): Фильтр - это не одна команда, а цепочка. Вы берете исходник, размываете его, сохраняете результат под именем «Layer1», а потом накладываете на него что-то еще. Полный контроль над потоком.
🟢Магия каналов: Автор объясняет разницу между SourceGraphic (весь объект) и SourceAlpha (только его форма). Хотите создать крутую тень или свечение? Работайте с Alpha-каналом, не трогая цвета.
🟢Борьба с «обрезкой»: Самая частая проблема - когда фильтр обрезается по краям. В статье четко расписано, как через атрибуты x, y, width, height расширить «холст» фильтра, чтобы эффектам было где разгуляться.

Прочитать оригинал👇

👉 @seniorFront

Статья

9.4k 1 24 7

Senior Frontend - javascript, html, css

2 Apr, 15:58

📄 Эффект загнутого угла на чистом CSS
Интересный разбор от Kitty Giraudel.

Традиционно «загнутый уголок» на карточках создавали с помощью картинок или перегруженных псевдоэлементов. Автор статьи предлагает более изящный способ, который полагается исключительно на слоистые градиенты.

Как это работает?
Весь секрет в комбинировании двух линейных градиентов внутри одного свойства background:

Первый слой - это крошечный треугольник, который имитирует загнутую часть бумаги.

Второй слой - основной фон элемента, в котором сделан «срез» (прозрачная область) точно в том месте, где располагается наш треугольник.

Это круто из-за легкой кастомизации: достаточно изменить пару CSS-переменных, чтобы моментально перекрасить уголок или изменить его размер во всем проекте.

А еще браузер рисует градиенты быстрее, чем подгружает внешние ассеты, что экономит трафик и ускоряет рендеринг.

Оригинал статьи ниже👇

👉 @seniorFront

Статья

8.2k 1 26 13

Senior Frontend - javascript, html, css

19 Mar, 16:00

Как работает JPEG: магия, обманывающая ваши глаза

Вы когда-нибудь задумывались, почему JPEG при сжатии в 10 раз выглядит почти идеально, а при 100 — рассыпается на «кашу» из квадратов?

Вот основные этапы этой инженерной магии:

🌈Цветовой обман (YCbCr): Человеческий глаз лучше видит яркость, чем оттенки. JPEG переводит картинку в формат, где яркость отделена от цвета, и... просто выкидывает половину цветовых данных. Вы этого даже не заметите!

🟦 Сетка 8x8: Изображение режется на блоки. Именно их мы видим как «артефакты», когда перебарщиваем со сжатием.

🔄 Магия частот (DCT): Каждый блок превращается из набора пикселей в набор «частот».

🎚 Квантование: Тот самый ползунок «Quality» в редакторах. На этом этапе алгоритм решает, сколько мелких деталей превратить в нули. Больше нулей — меньше вес файла, но хуже картинка.

Потыкать интерактивные примеры и увидеть DCT в действии можно здесь 👇

Статья