Senior Frontend - javascript, html, css

Совет на ближайшие годы — изучайте ВАЙБ-КОДИНГИИ уже пишет код, чинит баги, генерирует тесты, документацию и помогает запускать продукты быстрее, чем это делали классические команды разработки. И это уже не "будущее когда-нибудь", а реальность, которая меняет рынок уже сегодняИ те, кто научится вайбкодить сейчас, будут увереннее конкурировать на рынке и зарабатывать больше тех, кто по-прежнему делает всё вручную.Стартовать с нуля поможет канал Вайб-кодинг. Там ребята круглосуточно мониторят более 320 российских и зарубежных источников и публикуют только главное: релизы, инструменты, гайды, курсы и практические кейсы.Подписывайтесь, нас уже 45 тысяч: @vibecoding_tg

Айтишники ловите сборник бесплатных курсов, полезных инструментов и книг Проект «TERMINAL» стал крупнейшей библиотекой бесплатного образования. В одном канале собраны курсы, книги, полезные инструменты и практические тренажёры для всех разработчиков🎓 Практические курсы и задания🪽 Книги и статьи известных авторов😮‍💨 Полезные инструменты и ресурсы🌟 IT-новости и инсайдыОбучение по всем направлениям: SQL, Python, Frontend, PHP, C++, Golang, GIT, Linux, QA, Java, кибербезопасность и др.Ценишь знания, подпишись: Terminal_tg

На Stepik запустили мощный курс по «Troubleshooting Docker и Kubernetes: поиск и устранение проблем»В программе только важные аспекты:— troubleshooting Docker и образов— диагностика сетевых проблем— настройка readiness/liveness probes— отладка pod’ов, деплоев и ingress— анализ логов контейнеров и кластера— разбор ошибок CrashLoopBackOff, OOMKilled, ImagePullBackOff и другихСобеседования на DevOps/SRE сейчас всё чаще строятся вокруг реальных инцидентов. Данный курс фокусируется именно на таких сценариях и помогает в подготовке к практическим вопросам48 часов доступен со скидкой 25%↗️ Пройти курс на Stepik

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

👀Что проще - зарабатывать 1 млн руб. в найме или в собственном проекте? Или все-таки сочетать? Автор этой схемы на своем опыте рассказывает, как сделать миллион в найме, где сейчас стоит учиться, с какой компании начать работу, надо ли «прыгать по компаниям» и как раскачивать личный бренд. 🔥Вот ТОП посты, которые точно пригодятся- Каких продактов выделяет рынок труда- Какие продакты сейчас самые востребованные на рынке- МОК-собес на product manager Ну и вот что нам особо интересно: 🔴45 офферов по разным ИТ ролям: от аналитика до тим тим лида за 850к🔴Какой продакт лид получил 12 млн по году 🔴Оффер на Product lead в ЯндексМного полезненького ))💬@proProject1

Если ты хочешь войти во фронтенд-разработку — сейчас идеальный момент входа.ИИ не убил профессию. Он убрал самое страшное — барьер входа.Сегодня первый рабочий сайт можно сгенерировать через ChatGPT или DeepSeek, довести до ума на HTML и CSS, оживить JavaScript и выложить в продакшен. Всё это за одну неделю.Именно это мы и делаем на бесплатном 7-дневном практикуме.Ты пройдёшь путь от чистого листа до реального проекта в портфолио, с поддержкой кураторов на каждом шаге. Не один на один с туториалами.Стартуем завтра.👉 Приходи на бесплатный практикум🎁 Каждому участнику гайд «Фронтенд в 2026: что делать новичку в эпоху ИИ»

Reveal Elements on Page ScrollВ этом видео создается эффект появления элементов при прокрутке страницы на чистом JS.👉 @seniorFront

dropdown conceptЗдесь создается интерактивное выпадающее меню с 3D-эффектами, используя HTML, CSS с радиальным градиентом и 3D-трансформациями (rotateY, perspective, transform-style: preserve-3d), а также JavaScript с плагином jQuery Makisu для реализации анимации сворачивания/разворачивания элементов меню, оптимизированной через CSS-ключевые кадры и динамическое управление стилями.👉 @seniorFront