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

Вместо спиннеров и скелетонов прокачивайте стратегию 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/

Читать полностью…

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

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

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

Читать полностью…

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

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

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

Читать полностью…

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

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

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

Читать полностью…

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

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

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

Читать полностью…

Frontend CTF, или Как связаны Мона Лиза и искусственный интеллект

История про ежегодный браузерный CTF, где флаги спрятаны в интерфейсе, коде и даже в видео/логах, а для прохождения нужны знания фронтенда, сетей и веб-стандартов. Разбираемся, как устроены уровни и задания: генерация идей, подготовка подсказок, автоматический деплой в изолированную среду и встраивание в сюжет, плюс что происходит при попытках «положить» сервер.

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

Читать полностью…

ariaNotify(): как заставить скринридер проговорить текст

Новый метод ariaNotify() из WAI-ARIA 1.3 позволяет программно запускать озвучивание: передайте строку и (при необходимости) конфигурацию, например document.ariaNotify("Hello, World.").

https://master.dev/blog/the-siren-song-of-arianotify/

Читать полностью…

Как мы во фронтенд-команде ПСБ прокачали релизный цикл npm-пакетов.

Внутренние библиотеки и микрофронты собрали в пакетный процесс с SemVer, обязательным migration guide для breaking changes и публикацией через CI, чтобы исключить разъезд окружений и человеческий фактор. Более подробно - в статье.

https://habr.com/ru/companies/psb/articles/1055888/

Читать полностью…

Как сделать интерактивный элемент невидимым, но доступным

Используйте hidden="until-found" для скрытия контента с сохранением доступности (поиск по странице и навигация по фрагментам работают, элемент остаётся фокусируемым), а затем компенсируйте отсутствие ховера/видимости через contain-intrinsic-size: auto none, чтобы не было layout shift.

https://master.dev/blog/how-to-make-an-interactive-element-invisible-but-accessible/

Читать полностью…

Построение скролл-зависимой 3D-галереи по пути камеры из Blender с Three.js и GSAP

Рисуем кривую в Blender, экспортируем точки в JSON с учётом различий координат, а затем в Three.js восстанавливаем путь через THREE.CatmullRomCurve3 и раскладываем вдоль него сотни plane-картинок с рандомными смещениями.

Демо | Github

https://tympanus.net/codrops/2026/07/07/building-a-scroll-driven-3d-gallery-using-a-blender-camera-path-with-three-js-and-gsap/

Читать полностью…

Декорирование gap в CSS: играем линиями между элементами

Gap Decorations позволяет украшать промежутки между элементами в grid, flex и multi-column, используя gap + rule. Псевдоэлементы внутри контейнера превращают gap в полотно для подчеркиваний, горизонтальных/вертикальных разделителей и даже паттернов с разной толщиной/цветом через rule-width, rule-color и repeat().

https://master.dev/blog/lets-play-with-gap-decorations/

Читать полностью…

Как протестировать более 40 UI-компонентов за минуту: ускоряем скриншот-тесты

Как вместо сапёра с визуальными багами внедрили визуальные регрессионные тесты на связке Storybook + Playwright + Jest, которые прогоняют десятки сценариев и сравнивают скриншоты пиксель-в-пиксель. Чтобы стабилизировать диффы, в тестах отключают загрузку реальных картинок в галереях, делают снимок строго элемента [data-test="product-snippet"], и задают допуски к микро-шуму рендеринга (threshold/blur/failureThreshold).

https://habr.com/ru/companies/domclick/articles/1050424

Читать полностью…

HTTP получил метод QUERY: зачем понадобился безопасный запрос с телом

В HTTP стандартизировали QUERY — безопасный и идемпотентный метод чтения, где сложные параметры передаются в теле запроса, а не в URI.

https://habr.com/ru/articles/1055310/?utm_campaign=1055310&utm_source=habrahabr&utm_medium=rss

Читать полностью…

Путеводитель по grid-lanes: как строить сложные раскладки на чистом CSS.

display: grid-lanes позволяет делать masonry с произвольной шириной колонок и при этом сохранять корректный порядок табуляции — без JS.

Это подходит для progressive enhancement: начинайте с базовой разметки и улучшайте визуальную и навигационную часть средствами HTML/CSS.

https://master.dev/blog/the-field-guide-to-grid-lanes/

Читать полностью…

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

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

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

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

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

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

Читать полностью…

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

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

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

Читать полностью…

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

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

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

Читать полностью…

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

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

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

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

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

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

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

Подписывайся: /channel/+-Y-h7mIuMJ9hNzBi

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

Читать полностью…

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

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

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

Читать полностью…

16 июля встречаемся с JS‑сообществом SberProfi в Сбер.Среде.

AI уже меняет JavaScript‑разработку. Вопрос не в том, заменит ли он инженеров, а в том, кто освоит его быстрее и качественнее.

🔥 Обсудим изменения на реальных кейсах от Сбера, Cloud․ru и Mish. Очные участники увидят спецформат от блогеров и пообщаются с экспертами GigaCode и GitVerse.

⏳ Начало в 17:00, встреча очных гостей - в 16:00.
Количество очных мест ограничено – успейте зарегистрироваться!

Читать полностью…

TypeScript 7.0 — самое радикальное обновление за 10 лет

TypeScript 7 ускоряет сборку и работу в IDE за счёт нативного порта, многопоточности и оптимизаций: полная сборка проекта до 8–12 раз быстрее, а цикл в --watch становится заметно короче. На реальных крупных open-source кодовых базах ускорение достигает почти 12×, а потребление памяти снижается на 6–26%.

https://habr.com/ru/companies/haulmont/articles/1057526

Читать полностью…

Как проектировать интерфейсы для уязвимых пользователей: почему ментальным health-приложениям нельзя гнаться за любыми UI-трендами

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

https://smashingmagazine.com/2026/07/designing-distressed-users-mental-health-apps-ui/

Читать полностью…

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

Навайбкодить приложение - дело часа. Но что дальше? Продукт готов - пользователей 0

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

— трафик льётся, окупаемость падает
— площадок больше, чем рук: Reels, TikTok, Shorts, Telegram — везде нужен контент
— продакшн контента стоит как отдел
— все говорят про ИИ, но как это реально приносит деньги — непонятно

Прибыль появляется, когда ИИ становится системой: ресерч → продукт → креативы → реклама → контент → конверсия → удержание 👋

Меня зовут Давид, я 8 лет в маркетинге приложений и за последний год вырастил 3 приложения с 0 до $300к MRR

Я пересобрал свой опыт в собственный AI-стек и на вебинаре покажу как выглядит инфраструктура, которая приносит прибыль и действительно экономит время и деньги

🗓 14 июля
🕗 20:00 МСК
📌 Регистрация по ссылке (тык)

👉 Что в программе:

1. Поиск идей и точек роста — ресерч ниш, конкурентов и болей аудитории через ИИ → список точек роста существующего бизнеса, ниши для новых продуктов и понимание как в них строить маркетинг

2. AI-продакшн и закупка — генерация баннеров и видео + автоматизация кампаний в Meta, Google, Яндексе → сотни креативов в день без дизайнера

3. Виральный контент-продакшн для соц.сетей — контент-планы, анализ конкурентов, AI-аватары, монтаж, авто-карусели → ежедневный постинг в одиночку

4. Персонализация — AI-сегментация, офферы и воронки под каждый сегмент → выше конверсия из тех же лидов

🎁 Зарегистрированным - бесплатные уроки по Claude

До встречи на вебинаре!

Читать полностью…

Стили в CSS с учетом границ

Функция view() позволяет привязывать прогресс анимации к видимости элемента в ближайшем scroll-контейнере: цвет/размер/поворот меняются, когда объект приближается к краям или уходит за них. На практике так раскрашивают элементы в сетке по горизонтальному положению, меняют тон при перетаскивании и подсвечивают ползунки по мере движения.

https://master.dev/blog/boundary-aware-styling-in-css/

Читать полностью…

Нужен ли здесь `useEffect`? 12 сценариев из React-код-ревью — от производного состояния до React 19.2

На code review я регулярно встречаю один и тот же вопрос, только записанный разным кодом: «Как правильно синхронизировать эти значения через useEffect?» Со временем я понял, что чаще полезнее спросить иначе: а эффект здесь вообще нужен? В статье разбираю 12 типичных сценариев из React-код-ревью.

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

Читать полностью…

Редактор дизайна для Claude Code и Cursor: «Figma Comments» прямо в браузере

Drawbridge — это Chrome-расширение, которое позволяет кликать по интерфейсу в запущенном приложении, оставлять Figma-style комментарии и заметки с прямоугольниками, а затем превращать их в локальные task-файлы для AI-инструментов.

https://github.com/breschio/drawbridge

Читать полностью…

Проверка вакансий и рекрутеров на мошенничество с помощью OSINT для Claude.

JobVerify помогает за секунды отличать реальные предложения от скама: вы вставляете сообщение рекрутера, название компании, ссылку на вакансию или email, а инструмент собирает публичные сигналы и выдает понятный вердикт. Он сверяет регистрацию компании, домены и возраст сайтов, подозрительные паттерны (предоплата, “задачи”, крипта, перевод в Telegram/WhatsApp), проверяет ссылки, почту/телефон и даже историю через Internet Archive — без API-ключей и без хранения ваших данных.

https://github.com/yessGlory17/job-verify

Читать полностью…

ИИ поможет написать за тебя код, и в то же время помешает найти тебе работу? Ирония судьбы.

Мы уже доверили нейросетям генерацию компонентов, написание целых функций и даже тестов. Но когда дело доходит до твоего резюме — тот же самый ИИ безжалостно отправляет его в корзину.

До 90% откликов отсеиваются алгоритмами ещё до того, как их увидит человек. В 2026 году ты соревнуешься не только с другими разработчиками, но и с машиной, которая оценивает твоё резюме по десяткам критериев за доли секунды.

Время играть по новым правилам.

📅 8 июля в 19:00 МСК на бесплатном вебинаре «Как пробить AI-фильтры и получать приглашения на интервью» мы расскажем, как обойти эту систему.

На эфире разберем:
🔹 Как AI и ATS отбирают кандидатов прямо сейчас
🔹 Как найти работу в США и Европе
🔹 Что такое «теневой рынок» труда и как использовать его возможности

Спикер — Ангелина Волкова, карьерный эксперт AgileFluent.

Ангелина знает, как обмануть AI-фильтры:
✔️ Сама придумывает стратегии, которые ведут к офферу
✔️ Обладает большой экспертизой по рынку Северной Америки
✔️ За плечами — более 200 кейсов с международными офферами

За время работы AgileFluent уже помогли 800+ специалистам из IT и Digital найти работу в России и за рубежом.

Оставляй заявку на вебинар и бронируй место
👉 [ссылка] 👈

Реклама. ООО «Эджайл», ИНН 7810964334, erid: 2Vtzqwp1D3F

Читать полностью…

Rattribute.js — генерация адаптивных атрибутов для любых HTML-элементов.

Лёгкая библиотека без зависимостей, которая на основе брейкпоинтов автоматически проставляет нужные атрибуты (по умолчанию размеры как у Bootstrap: xs–xxl и доп. xxxl, плюс можно задавать свои). Поддерживаются переключение адаптивности, авто-подхват элементов при добавлении в DOM сторонними библиотеками и исключение элементов через data-rattribute-js-ignore

https://github.com/williamtroup/Rattribute.js

Читать полностью…