FrontEndDev

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

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

«Вы не знаете 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 и структура данных, после чего можно собрать компактную защищённую паролем веб-страницу без лиш...

Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании?На фото ребята из моего комьюнити, где уже больше 220 frontend-разработчиков. Все они успешно устроились в крутые компании и получили офферы от 300 тыс рублей 🫂👋 Привет, меня зовут Тихон, я действующий Frontend-разработчик и ментор. З...

Тамагочи TAMA-90: тамагочи из 90-х, собранный на JavaScript своими рукамиБраузерный симулятор тамагочи по классической схеме яйцо → детёныш → взрослый → старый. Питомец рисуется прямо на canvas без спрайтов: эмоции и контуры получаются математикой и трюком с globalCompositeOperation. Проект разбит н...

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

backdrop-filter: blur() — как он работает и как его правильно использоватьbackdrop-filter размывает не сам элемент, а то, что находится за ним, причём эффект считается на уровне compositing layers, поэтому DOM-логика вроде overflow: hidden может не сработать.https://habr.com/ru/articles/1057226/

Frontend CTF, или Как связаны Мона Лиза и искусственный интеллектИстория про ежегодный браузерный CTF, где флаги спрятаны в интерфейсе, коде и даже в видео/логах, а для прохождения нужны знания фронтенда, сетей и веб-стандартов. Разбираемся, как устроены уровни и задания: генерация идей, подготовка ...

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

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