FrontEndDev

🔴 Тестовое собеседование на Frontend-разработчика со старшим разработчиком ex. Сбер

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

Как это будет:
📂 Даниил Дмитриев, старший разработчик в R-Vision, ex. Сбер, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Даниил будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Даниилу

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

Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot

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

Монолит больше не приговор: строим быстрые и гибкие микрофронтенды на ES-модулях

Монолитное фронтенд-приложение можно разрезать на микрофронты, собирая их как нативные ES-модули: меньше конфликтов зависимостей, быстрее загрузка и естественный lazy loading через import(). Для интеграции нужен чёткий контракт между хостом и микрофронтом (и единый механизм монтирования в Shadow DOM с обработкой ошибок/состояний.

https://habr.com/ru/companies/sberbank/articles/1067496

5 CSS-свойств, которые прокачают дизайн текста

Показывайте фон внутри букв через background-clip: text, управляйте вертикальным выравниванием инлайновых элементов через vertical-align, добавляйте выразительность letter-spacing и еще несколько свойств и кейсов их применения — по ссылке.

https://master.dev/blog/typographic-css-tricks/

Фронтенд не умер — просто AI уже копает за нас лопатой

AI уже берёт на себя рутину: помогает делать черновики, тесты и фикстуры, ускоряет миграции и онбординг, а также может расследовать инциденты и собирать десятки связанных PR.
Главный риск не в плохом коде, а в скорости: растут объём ревью, число переделок и вероятность уверенно закрепить неверное решение, поэтому нужны планы, этапная проверка и ответственность инженера за результат.

https://habr.com/ru/companies/avito/articles/1066228/

Переходы View Transitions: важно не сделать интерфейс некликабельным

Если не настроить View Transitions, псевдоэлемент ::view-transition может перекрыть весь вьюпорт на время анимации и блокировать клики по интерактивным элементам. Решение — отключить участие :root в снапшоте и убрать перехват событий у ::view-transition. Подробнее — в статье

https://master.dev/blog/view-transitions-careful-not-to-make-stuff-unclickable/

Конец адаптивных изображений.

Атрибут sizes для <img> раньше был самым сложным: его синтаксис приходилось постоянно держать в актуальном состоянии вместе с CSS.

Идея в том, чтобы перейти к Client Hints: браузер подсказывает серверу нужный размер, сервер присылает подходящее изображение, а разметка сводится к простому <img src="" alt=""> (плюс не забыть про lazy loading).

https://master.dev/blog/ending-responsive-images/

Опенсорсная Весёлая Ферма: поднимаем preview‑окружения без боли.

Пример построения системы сборок. Preview‑окружения для каждого пул‑реквеста перестают быть ручной магией: код из ветки собирается, запускается изолированный инстанс и ему выдаётся уникальный URL, а проксирование трафика берёт на себя nginx/Ingress.

https://habr.com/ru/companies/yandex/articles/1064394/

🔴 Тестовое собеседование с ТимЛидом Frontend-разработки в этот четверг

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

Как это будет:
📂 Алексей Романов, Teamlead в Underhood.dev с опытом 6+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Алексей будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Алексею

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

Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot

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

Обфускация JavaScript в эпоху ИИ: всё ещё имеет смысл?

Обфускация не делает фронтенд секретным: браузерный код всё равно можно извлечь, но становится заметно сложнее читать, копировать и безопасно модифицировать. ИИ ускоряет понимание и может собирать правдоподобную чистую версию. Используйте обфускацию только как часть защиты, а реальные ключи, авторизацию и валидацию критичных правил держите на сервере.

https://www.jstools.space/blog/javascript-obfuscation-ai/

Как верстали 15 лет назад

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

https://habr.com/ru/companies/ruvds/articles/1060630/

Лучшие состояния загрузки — это когда их нет.

Вместо спиннеров и скелетонов прокачивайте стратегию preloading: заранее подгружайте данные и готовьте переходы между маршрутами, чтобы страница ощущалась как загруженная сразу. Route transitions не убирают загрузку полностью, но помогают перенести её на уровень приложения, делая UX стабильнее и предсказуемее в SPA.

https://master.dev/blog/the-best-loading-states-are-no-loading-states/

Анимация In-N-Out с sibling-index()

Фишка в CSS-функции sibling-index(): при добавлении/удалении элементов индекс пересчитывается, а значит меняются значения translate, и включённый transition автоматически превращает перестроение DOM в плавную анимацию. Отлично подходит для аватаров, списков и сеток.

https://master.dev/blog/in-n-out-animation-using-sibling-index/

Masonry с анимацией в CSS

display: grid уже умеет раскладку в стиле masonry через grid-lanes. Чтобы получить плавную перестановку без JS-логики, анимируют не сами карточки, а их внутренний слой: он привязывается якорями и двигается за счёт inset: anchor(inside) с transition.

https://master.dev/blog/masonry-with-animation-in-css/

«Вы не знаете CSS»: вопросы о CSS с ответами, версия 2026 года

Проверка знаний CSS в формате вопросов: разбор специфичности с :has(), логики :focus-within, работы rem, inline-grid и нюансов применения margin при разных display и многое другое.

https://habr.com/ru/companies/ruvds/articles/1057086/

Когда имеет смысл блокировать главный поток

Кратко о том, когда правило “не тормози main thread” можно нарушать. Разбираем пример screenshot-расширения с сериализацией Base64.

https://smashingmagazine.com/2026/07/when-makes-sense-block-main-thread/

Ваше приложение может быть просто сайтом

Пример перевода приложения в формат веб страницы: когда установка — бесполезный шаг для пользователя. Через перехват сетевого трафика выясняем схема запросов к API и структура данных, после чего можно собрать компактную защищённую паролем веб-страницу без лишних функций

https://habr.com/ru/companies/ruvds/articles/1060106/

Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании?

На фото ребята из моего комьюнити, где уже больше 220 frontend-разработчиков. Все они успешно устроились в крутые компании и получили офферы от 300 тыс рублей 🫂

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

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

И у тебя тоже получится 😎

У меня есть канал, где я:
👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения
👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти
👉 На примерах показываю, как проходить собеседования, включая техничку
👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеров

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

Подписывайся: https://t.me/+-Y-h7mIuMJ9hNzBi

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

Тамагочи TAMA-90: тамагочи из 90-х, собранный на JavaScript своими руками

Браузерный симулятор тамагочи по классической схеме яйцо → детёныш → взрослый → старый. Питомец рисуется прямо на canvas без спрайтов: эмоции и контуры получаются математикой и трюком с globalCompositeOperation. Проект разбит на небольшие модули без сборщиков (HTML/CSS + набор скриптов), чтобы легко менять логику мини-игры или UI и не ловить расползание багов.

https://habr.com/ru/companies/ruvds/articles/1057138/

FixCSS: исправляем исторические ошибки в CSS

В CSS Working Group есть список старых проектных промахов, из‑за которых до сих пор приходится вручную обходить поведение вроде box-sizing: border-box в стартовых стилях. FixCSS предлагает починить эти нюансы библиотекой, чтобы не тащить постоянные костыли в код, но с понятным компромиссом по runtime‑стоимости. Если хотите прокачать понимание того, как CSS реально эволюционировал и почему многие практики закрепились, это отличный повод разобраться глубже.

https://master.dev/blog/fixcss/

backdrop-filter: blur() — как он работает и как его правильно использовать

backdrop-filter размывает не сам элемент, а то, что находится за ним, причём эффект считается на уровне compositing layers, поэтому DOM-логика вроде overflow: hidden может не сработать.

https://habr.com/ru/articles/1057226/