Senior Frontend - javascript, html, css

🔴 Тестовый собес на Frontend-разработчика со старшим разработчиком ex. Сбер в этот четверг!  [+ разбор 50 сложных вопросов в подарок ] 17 сентября (в этот четверг!) в 19:00 по мск приходи онлайн, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика! Собеседование проведёт Даниил Дмитриев - старший разработчик в R-Vision, ex. Сбер, Как это будет: 📂 Даниил задаст разработчику вопросы и задачи, которые могут спросить на реальном собесе 📂 После каждого ответа респондента ты услышишь подробный комментарий от ментора и поймёшь, чего на самом деле ожидает собеседующий на интервью 📂 В конце сможешь задать любой вопрос Даниилу и получить на него развёрнутый ответ Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы И ты можешь посмотреть его бесплатно 🔥 Только завтра, в прямом эфире! 🎁 Подарок для всех, кто зарегается на веб — файл с ОТВЕТАМИ НА 50 СЛОЖНЫХ ВОПРОСОВ с Frontend-собеседований 🔥 Переходи в бот, чтобы попасть на эфир и забрать подарок 👉 @shortcut_front_bot Реклама. О рекламодателе.

🪄 Как убрать лишний div, не трогая HTML В CSS сетка или флексбокс действуют только на прямых детей контейнера. Если между ними затесалась обёртка, её содержимое живёт в своём мирке и в общую раскладку не попадает. Свойство display: contents решает это так: сам элемент как коробка исчезает (фон, рамка, отступы пропадают), а его дети становятся детьми родителя. Похоже на «разгруппировать» в графическом редакторе. Пример из статьи. В <figure> лежит div с тремя картинками и рядом <figcaption>. Подпись никак не встроить в сетку фотографий, потому что она снаружи div. Пишем .photo-group { display: contents; } и теперь браузер видит три картинки и подпись как четырёх равноправных детей <figure>, а сетку задаём прямо на нём. Важная оговорка: с таблицами, заголовками, кнопками и списками это ломает доступность, автор советует там не применять и проверять результат. В статье ещё семь живых раскладок, где приём спасает.

Нативный 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

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

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

📄 Эффект загнутого угла на чистом CSS Интересный разбор от Kitty Giraudel. Традиционно «загнутый уголок» на карточках создавали с помощью картинок или перегруженных псевдоэлементов. Автор статьи предлагает более изящный способ, который полагается исключительно на слоистые градиенты. Как это работает? Весь секрет в комбинировании двух линейных градиентов внутри одного свойства background: Первый слой - это крошечный треугольник, который имитирует загнутую часть бумаги. Второй слой - основной фон элемента, в котором сделан «срез» (прозрачная область) точно в том месте, где располагается наш треугольник. Это круто из-за легкой кастомизации: достаточно изменить пару CSS-переменных, чтобы моментально перекрасить уголок или изменить его размер во всем проекте. А еще браузер рисует градиенты быстрее, чем подгружает внешние ассеты, что экономит трафик и ускоряет рендеринг. Оригинал статьи ниже👇 👉 @seniorFront

Как работает JPEG: магия, обманывающая ваши глаза Вы когда-нибудь задумывались, почему JPEG при сжатии в 10 раз выглядит почти идеально, а при 100 — рассыпается на «кашу» из квадратов? Вот основные этапы этой инженерной магии: 🌈Цветовой обман (YCbCr): Человеческий глаз лучше видит яркость, чем оттенки. JPEG переводит картинку в формат, где яркость отделена от цвета, и... просто выкидывает половину цветовых данных. Вы этого даже не заметите! 🟦 Сетка 8x8: Изображение режется на блоки. Именно их мы видим как «артефакты», когда перебарщиваем со сжатием. 🔄 Магия частот (DCT): Каждый блок превращается из набора пикселей в набор «частот». 🎚 Квантование: Тот самый ползунок «Quality» в редакторах. На этом этапе алгоритм решает, сколько мелких деталей превратить в нули. Больше нулей — меньше вес файла, но хуже картинка. Потыкать интерактивные примеры и увидеть DCT в действии можно здесь 👇

Apple TV Macbeth Poster Animation Анимированная карточка, реализованная на HTML и SCSS. 👉 @seniorFront

🧭 Разбираем React вместе с Podlodka React Crew Современные React-приложения становятся всё сложнее. Разработчики регулярно сталкиваются с проблемами производительности, утечками памяти и архитектурными вызовами. Базового понимания фреймворка становится недостаточно для результативной работы. 💡Эксперты Podlodka React Crew решили разобраться с этой проблемой на онлайн-конференции под названием «Продвинутый React». С 23 по 27 марта ее участники: ⚙️ узнают, как устроен рендер и внутренние механизмы в современном React 🧠 познакомятся с архитектурой приложений, где применяются React Server Components 📊 научатся профилировать React-приложения и выявлять медленные рендеры, memory leak 🛠️познакомятся с дополнительными инструментами, которые помогут упростить отладку и выявить сложные проблемы Формат — удобный и ламповый: пять дней, живые Zoom-сессии утром и вечером, закрытое профессиональное сообщество в Telegram и общение со спикерами. Если хотите углубить свои знания про React в компании крутых экспертов, присоединяйтесь к Podlodka React Crew👇 🎟Забрать early-bird билет: https://podlodka.io/reactcrew

System Design - этап собеседования, на котором часто сыпятся даже сильные разработчики. Не потому, что они плохо пишут код, а потому что никогда не проектировали системы целиком и не знают, как уложить это в 40 минут собеса. В одном из гайдов собрана база, без которой сложно пройти System Design интервью: что именно проверяют на таких собеседованиях, почему плохой архитектурный дизайн может уронить продукт, какие требования собирают перед проектированием и как инженеры подходят к построению систем уровня Amazon. В первой части рассказывается: - что такое системный дизайн и кому он нужен - как в целом проектируются системы: монолиты, микросервисы, нагрузка, масштабирование, проектирование API - какие темы нужно понимать для продвинутого уровня: распределённые транзакции, 2PC, 3PC, TCC и другие. Во второй части планируют разобрать System Design во фронтенде, но для подготовки к собеседованию, по сути, достаточно уже первой. Ссылка на видео: https://youtu.be/PgC7LzIG29k