Создаем offline-friendly систему загрузки изображений

Как с помощью IndexedDB, service workers и Background Sync API создать приложение, устойчивое к перебоям с сетью.

https://www.smashingmagazine.com/2025/04/building-offline-friendly-image-upload-system/

Делаем карусели с GSAP

Руководство от Тома Миллера по созданию каруселей: от простых до продвинутых.

https://tympanus.net/codrops/2025/04/21/mastering-carousels-with-gsap-from-basics-to-advanced-animation/

JSON Mocker

Онлайн сервис, позволяющий генерировать JSON данные в соответствии со схемой.

https://laurawebdev.github.io/json-mocker/

CSS Hell

15 CSS головоломок для пытливых умов, где нужно менять свойства для того чтобы сматчить элементы.

https://csshell.com/

Экспериментальные функции в React: ViewTransition и Activity

Компонент <ViewTransition> позволяет легко добавлять анимации при переходах между состояниями интерфейса, используя новый API браузера startViewTransition.
Компонент <Activity> предоставляет возможность управлять отображением частей UI, скрывая или показывая их в зависимости от активности.

https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more

LaLoka Layouts

Коллекция макетов и компонентов, созданных с Tailwind CSS. Готовые и адаптивные шаблоны для ускорения разработки.

https://layoutsfortailwind.lalokalabs.dev/

Favicon v2025

Как готовить favicon в соответствии с требованиями десктоп и мобильных браузеров + PWA в 2025.

https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

Улучшаем типографику с помощью единиц line-height

О новой экспериментальной возможности в WebKit — единицах line-height, таких как lh, rlh, cqh, позволяющих задавать размеры элементов на основе текущей высоты строки. Это упрощает создание адаптивной типографики и позволяет разработчикам лучше контролировать вертикальные ритмы в дизайне.

https://webkit.org/blog/16831/line-height-units/

Пишем эффективные и понятные сообщения об ошибках

О том, почему важно использовать простой язык, избегая технического жаргона и как не раздражать пользователей в стрессовых ситуациях. Рекомендации по формулировке четких инструкций для исправления ошибок чтобы повысить ясность и доверие к интерфейсу.

https://piccalil.li/blog/how-to-write-error-messages-that-actually-help-users-rather-than-frustrate-them/

Что такое Owl Selector (а я думал сова)?

Как и когда удобно применять селектор вида (* + *), а также существующие альтернативы ему.

https://www.youtube.com/watch?v=0O0ssm70g1g

Справочник по операторам JS

Удобный интерактивный справочник по JavaScript-операторам с примерами использования.

https://www.joshwcomeau.com/operator-lookup/

Новоe CSS-свойство margin-trim

Оно позволяет автоматически обрезать внешние отступы своих дочерних элементов, примыкающих к его краям. Это упрощает создание макетов без необходимости вручную удалять отступы у первого и последнего дочерних элементов. Поддерживается пока только в Safari.

https://webkit.org/blog/16854/margin-trim/

GSAP теперь бесплатная

Популярную библиотеку для анимации можно использовать бесплатно, включая все ее плагины. Плюс подробности по релизу 3.13.

https://gsap.com/blog/3-13/

WebTUI

Модульная CSS библиотека для оформления веб интерфейсов в стиле терминала.

Демо: https://webtui.ironclad.sh/examples/

https://github.com/webtui/webtui

Frontend + Летний митап + Суббота = Я.Субботник по разработке интерфейсов 💛

7 июня в Москве Яндекс Go проводит Я.Субботник по разработке интерфейсов. В программе 4 доклада и воркшоп:

👉 Артемий Карпов расскажет, как команда выстраивает взаимодействие между разработкой и тестированием при написании автотестов и улучшении семантики приложения
👉 Миша Колосовский покажет, как сделать статические схемы интерактивными и причем тут SVG
👉 Давид Давыдов объяснит, что мы сделали с серверным API и как пришли к одной строчке кода вместо сотни
👉 Серёжа Алейников поделится опытом портирования нативного BDUI в вебе

На воркшопе участники в командах будут исправлять некорректные интерфейсы, стараясь учесть требования дизайнеров, бэкенд-разработчиков и тестировщиков. Вместе обсудим варианты решений, а коллеги из Яндекса помогут найти самое оптимальное.

Регистрируйтесь и зовите друзей!

Мероприятие бесплатное. Количество мест в офлайне ограничено — пожалуйста, дождитесь нашего подтверждения.

Реклама. ООО «Яндекс.Такси» ИНН 7704340310