Latest posts
Senior Frontend - javascript, html, css
15 Sept, 15:00
🔴 Тестовый собес на Frontend-разработчика со старшим разработчиком ex. Сбер в этот четверг! [+ разбор 50 сложных вопросов в подарок ]17 сентября (в этот четверг!) в 19:00 по мск приходи онлайн, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика!Собеседование проведёт Даниил Дмитриев - старший разработчик в R-Vision, ex. Сбер,Как это будет:📂 Даниил задаст разработчику вопросы и задачи, которые могут спросить на реальном собесе📂 После каждого ответа респондента ты услышишь подробный комментарий от ментора и поймёшь, чего на самом деле ожидает собеседующий на интервью📂 В конце сможешь задать любой вопрос Даниилу и получить на него развёрнутый ответЭфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллыИ ты можешь посмотреть его бесплатно 🔥 Только завтра, в прямом
Senior Frontend - javascript, html, css
2 Sept, 09:11
🪄 Как убрать лишний div, не трогая HTMLВ CSS сетка или флексбокс действуют только на прямых детей контейнера. Если между ними затесалась обёртка, её содержимое живёт в своём мирке и в общую раскладку не попадает.Свойство display: contents решает это так: сам элемент как коробка исчезает (фон, рамка, отступы пропадают), а его дети становятся детьми родителя. Похоже на «разгруппировать» в графическом редакторе.Пример из статьи. В <figure> лежит div с тремя картинками и рядом <figcaption>. Подпись никак не встроить в сетку фотографий, потому что она снаружи div. Пишем.photo-group { display: contents; }и теперь браузер видит три картинки и подпись как четырёх равноправных детей <figure>, а сетку задаём прямо на нём.Важная оговорка: с таблицами, заголовками, кнопками и списками это ломает доступность, автор советует там не применять и проверять результат.В статье ещё семь
Senior Frontend - javascript, html, css
28 May, 11: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; } } Теперь, даже если на
Senior Frontend - javascript, html, css
11 May, 09: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 {
Senior Frontend - javascript, html, css
16 Apr, 10:15
SVG-фильтры: от «магии» к пониманиюЕсли CSS-фильтры - это готовые инста-фильтры, то SVG-фильтры - полноценный Photoshop внутри браузера.Статья Аны Тюдор - Это фундаментальный разбор того, как устроены фильтры «под капотом». Автор не просто дает код, а объясняет механику: от того, где должен лежать тег <filter>, до логики работы с альфа-каналами.🟢Конвейер данных (in и result): Фильтр - это не одна команда, а цепочка. Вы берете исходник, размываете его, сохраняете результат под именем «Layer1», а потом накладываете на него что-то еще. Полный контроль над потоком. 🟢Магия каналов: Автор объясняет разницу между SourceGraphic (весь объект) и SourceAlpha (только его форма). Хотите создать крутую тень или свечение? Работайте с Alpha-каналом, не трогая цвета. 🟢Борьба с «обрезкой»: Самая
Senior Frontend - javascript, html, css
2 Apr, 12:58
📄 Эффект загнутого угла на чистом CSS Интересный разбор от Kitty Giraudel.Традиционно «загнутый уголок» на карточках создавали с помощью картинок или перегруженных псевдоэлементов. Автор статьи предлагает более изящный способ, который полагается исключительно на слоистые градиенты.Как это работает? Весь секрет в комбинировании двух линейных градиентов внутри одного свойства background:Первый слой - это крошечный треугольник, который имитирует загнутую часть бумаги.Второй слой - основной фон элемента, в котором сделан «срез» (прозрачная область) точно в том месте, где располагается наш треугольник.Это круто из-за легкой кастомизации: достаточно изменить пару CSS-переменных, чтобы моментально перекрасить уголок или изменить его размер во всем проекте.А еще браузер рисует градиенты быстрее, чем подгружает внешние ассеты, что экономит трафик и ускоряет рендеринг.Оригинал
Senior Frontend - javascript, html, css
19 Mar, 13:00
Как работает JPEG: магия, обманывающая ваши глазаВы когда-нибудь задумывались, почему JPEG при сжатии в 10 раз выглядит почти идеально, а при 100 — рассыпается на «кашу» из квадратов?Вот основные этапы этой инженерной магии:🌈Цветовой обман (YCbCr): Человеческий глаз лучше видит яркость, чем оттенки. JPEG переводит картинку в формат, где яркость отделена от цвета, и... просто выкидывает половину цветовых данных. Вы этого даже не заметите!🟦 Сетка 8x8: Изображение режется на блоки. Именно их мы видим как «артефакты», когда перебарщиваем со сжатием.🔄 Магия частот (DCT): Каждый блок превращается из набора пикселей в набор «частот».🎚 Квантование: Тот самый ползунок «Quality» в редакторах. На этом этапе алгоритм решает, сколько мелких деталей превратить в нули. Больше нулей — меньше вес файла, но хуже картинка.Потыкать интерактивные примеры и увидеть DCT в действии можно
Senior Frontend - javascript, html, css
18 Mar, 13:46
Apple TV Macbeth Poster AnimationАнимированная карточка, реализованная на HTML и SCSS.👉 @seniorFrontSenior Frontend - javascript, html, css
17 Mar, 09:41
🧭 Разбираем React вместе с Podlodka React CrewСовременные React-приложения становятся всё сложнее. Разработчики регулярно сталкиваются с проблемами производительности, утечками памяти и архитектурными вызовами.Базового понимания фреймворка становится недостаточно для результативной работы.💡Эксперты Podlodka React Crew решили разобраться с этой проблемой на онлайн-конференции под названием «Продвинутый React».С 23 по 27 марта ее участники:⚙️ узнают, как устроен рендер и внутренние механизмы в современном React🧠 познакомятся с архитектурой приложений, где применяются React Server Components📊 научатся профилировать React-приложения и выявлять медленные рендеры, memory leak🛠️познакомятся с дополнительными инструментами, которые помогут упростить отладку и выявить сложные проблемыФормат — удобный и ламповый: пять дней, живые Zoom-сессии утром и вечером, закрытое
Senior Frontend - javascript, html, css
14 Mar, 09:00
System Design - этап собеседования, на котором часто сыпятся даже сильные разработчики. Не потому, что они плохо пишут код, а потому что никогда не проектировали системы целиком и не знают, как уложить это в 40 минут собеса.В одном из гайдов собрана база, без которой сложно пройти System Design интервью: что именно проверяют на таких собеседованиях, почему плохой архитектурный дизайн может уронить продукт, какие требования собирают перед проектированием и как инженеры подходят к построению систем уровня Amazon.В первой части рассказывается: - что такое системный дизайн и кому он нужен - как в целом проектируются системы: монолиты, микросервисы, нагрузка, масштабирование, проектирование API - какие темы нужно понимать для продвинутого уровня: распределённые транзакции, 2PC, 3PC, TCC и другие.Во второй части планируют разобрать System Design во фронтенде, но для подготовки кYouTubeПервая часть гайда по System Design (все IT направления) / Пройти интервью на Middle+➡️ Полный 5ти часовой курс: https://youtu.be/HHQTVvMXadE 👉 Менторы, принявшие участие в записи курса: Инара Гаврилина: https://t.me/find_it_mentor_bot?startapp=mentor_432142118 Михаил Савин: https://t.me/find_it_mentor_bot?startapp=mentor_1168274840 👉…Senior Frontend - javascript, html, css
13 Mar, 10:00
👀Что проще - зарабатывать 1 млн руб. в найме или в собственном проекте?Или все-таки сочетать? Автор этой схемы на своем опыте рассказывает, как сделать миллион в найме, где сейчас стоит учиться, с какой компании начать работу, надо ли «прыгать по компаниям» и как раскачивать личный бренд.🔥Вот ТОП посты, которые точно пригодятся - Каких продактов выделяет рынок труда - Какие продакты сейчас самые востребованные на рынке - МОК-собес на product managerНу и вот что нам особо интересно: 🔴45 офферов по разным ИТ ролям: от аналитика до тим тим лида за 850к 🔴Какой продакт лид получил 12 млн по году 🔴Оффер на Product lead в ЯндексМного полезненького )) 💬@proProject1TelegramПро Проекты и карьеру в ИТ | РомановаКак зайти в ИТ и выйти с ЗП в 1 млн. 🍋Лимонный Алгоритм🍋 Навеяно вашими запросами у нас в анкетах на карьерное сопровождение- все хотят мильОны зарабатывать - ну ок, давайте разбираться, что нужно для этого сделать в найме. Сразу задам условия. Обсуждаем…Senior Frontend - javascript, html, css
11 Mar, 06:30
Если ты хочешь войти во фронтенд-разработку — сейчас идеальный момент входа.ИИ не убил профессию. Он убрал самое страшное — барьер входа.Сегодня первый рабочий сайт можно сгенерировать через ChatGPT или DeepSeek, довести до ума на HTML и CSS, оживить JavaScript и выложить в продакшен. Всё это за одну неделю.Именно это мы и делаем на бесплатном 7-дневном практикуме.Ты пройдёшь путь от чистого листа до реального проекта в портфолио, с поддержкой кураторов на каждом шаге. Не один на один с туториалами.Стартуем завтра.👉 Приходи на бесплатный практикум🎁 Каждому участнику гайд «Фронтенд в 2026: что делать новичку в эпоху ИИ»
Senior Frontend - javascript, html, css
27 Jan, 09:50
Reveal Elements on Page ScrollВ этом видео создается эффект появления элементов при прокрутке страницы на чистом JS.👉 @seniorFrontSenior Frontend - javascript, html, css
25 Jan, 21:54
dropdown conceptЗдесь создается интерактивное выпадающее меню с 3D-эффектами, используя HTML, CSS с радиальным градиентом и 3D-трансформациями (rotateY, perspective, transform-style: preserve-3d), а также JavaScript с плагином jQuery Makisu для реализации анимации сворачивания/разворачивания элементов меню, оптимизированной через CSS-ключевые кадры и динамическое управление стилями.👉 @seniorFrontSenior Frontend - javascript, html, css
24 Jan, 07:00
В канале “Frontend менторинг | Косилов” вы можете найти честные зарплатные вилки, разборы резюме и портфолио, стратегии поиска работы и роста в кризис, обзор технологий и мысли по этому поводу.Так же публикует в Инсте смешные ролики и полезный контент про АйТи.https://www.instagram.com/kosilllov?igsh=MXN1ZWxvN3JhaW5uMg%3D%3D&utm_source=qrВсем, кто подпишется и напишет в личку слово js в инстаграме, пришлет список вопросов по JavaScript с собесов + даст краткие ответы/подсказки, как лучше отвечать.TelegramFrontend менторинг | КосиловSenior Фронтенд‑разработчик / ментор Помогаю прокачаться во фронте и карьере в IT Консультации, программа обучения с доведением до офицера и сопровождением на испыталке Записаться: @kosilllovSenior Frontend - javascript, html, css
9 Jan, 10:25
Ни одного лишнего блюра: хардкорная оптика IDE для тех, кто пишет код десятилетия подрядЧем больше строк кода за спиной, тем отчётливее чувствуется «песок в глазах» после вечернего ревью. Эта статья — попытка собрать в одном месте практические ходы — от выбора вариативных шрифтов до реактивного переключения тем по кривой солнечного спектра — которые позволят зрелым разработчикам продолжать писать осмысленный код, а не эпитафии своему зрению.👉 @seniorFront
Senior Frontend - javascript, html, css
8 Jan, 18:00
Айти “умирает”, вакансий нет, все говорят про кризис? В канале “Frontend менторинг | Косилов” разбираю, что реально происходит на рынке и как всё-таки находить офферы.Там: честные зарплатные вилки, разборы резюме и портфолио, стратегии поиска работы и роста в кризис, без инфоцыганства и розовых обещаний. Я действующий фронтенд-разработчик и ментор, показываю, как адаптироваться к рынку, а не ждать “когда всё наладится”.Для тех, кто придёт отсюда, — скидка 30% на менторство и разборы по промокоду Kosilov2026.
Senior Frontend - javascript, html, css
17 Dec 2025, 15:48
Почему ИИ в кодинге не панацея и как объяснить это менеджментуЯ — разработчик с 8 годами опыта, от C++ до ML и продуктовой разработки. Прошёл "ИИ-изацию" компании в 2023 и делюсь, почему не стоит слепо пушить ИИ в кодинг.Проблемы ИИ в разработке: 1. Контекст. ИИ не знает историю проекта и продуктовые требования, которые живут в головах разработчиков. Он видит только код, теряя важные нюансы. 2. Иллюзия ускорения. Исследование METR показывает: ИИ замедляет разработку на 19%, хотя кажется, что ускоряет на 20%. Ощущения обманчивы! 3. Потеря фокуса. ИИ требует переключения внимания, разрывая рабочий поток и снижая продуктивность. 4. Посредственный код. ИИ, обученный на среднем коде из интернета, плодит техдолг, переписывает тесты, откладывая проблемы. 5. Баги и откаты. Стэнфордский рисерч: до 25% ИИ-кода содержит ошибки, которые ловят QA или пользователи, увеличивая цикл разработки.НоSenior Frontend - javascript, html, css
17 Dec 2025, 14:02
Rotating 3D SliderЛогика работы слайдера реализована в JS. Стилизовано и анимировано в SCSS.👉 @seniorFrontSenior Frontend - javascript, html, css
10 Dec 2025, 20:18
Псевдоэлементы для подсветки текстаПсевдоэлементы выделения представляют собой части документа, которым присвоен определенный статус, и обычно имеют другой стиль, чтобы указать этот статус пользователю. Например, выбранные части документа обычно выделяются (заданы альтернативные цвета фона и переднего плана или цветовая размывка), чтобы указать их выбранный статус.::selection: выделенный текст ::target-text: представляет собой конкретный текст, к которому браузер прокручивает страницу при использовании фрагментов текста (например, через URL с #:~:text=...). ::spelling-error: содержимое, которое было помечено user-agent как ошибочное ::grammar-error: содержимое, которое было помечено user-agent как грамматически не верноеПоследние два псевдоэлемента еще не поддерживаются браузерами.Эти псевдоэлементы могут принимать свойства: - color - background-color - cursor - caret-color - out
Related Channels
Other channels in the same section of the catalogue.
