Верстаем письма на React: инженеры Yelp рассказывают, как они адаптировали для разработки писем привычные их фронтендерам инструменты вроде React и Storybook → https://engineeringblog.yelp.com/2022/07/writing-emails-using-react.html

Cворачиваемые вложенные списки без JS: современное руководство по вёрстке деревьев на HTML/CSS с хорошей семантикой и полноценной навигацией с клавиатуры → https://iamkate.com/code/tree-views/

Введение в popover API, новый API для всплывающих элементов, нативно решающий большинство проблем вроде позиционирования поверх страницы, управления фокусом, закрытия при нажатии Escape → https://developer.chrome.com/blog/introducing-popover-api/

Давние желания, сбывающиеся благодаря scroll-driven анимациям: стилизация sticky-элементов в состоянии прилипания, появление и скрытие тени при прокрутке, оглавление с подсветкой текущей секции. Роман Комаров экспериментирует с новой CSS-фичей → https://kizu.dev/scroll-driven-animations/

Улучшаем UX сообщений об ошибках: обзор практических приёмов с примерами и постер-шпаргалка в PDF → https://www.nngroup.com/articles/error-message-guidelines/

Новые единицы измерения вьюпорта в CSS: решение для вёрстки, учитывающей скрытие адресной строки в мобильных браузерах → https://ishadeed.com/article/new-viewport-units/

Дебаг сдвигов раскладки. Кейти Хемпениус показывает, как найти причины прыжков контента во время загрузки страницы.

https://web.dev/debug-layout-shifts/

Доступный переключатель. Китти Жирадель делится реализацией переключателя, который основан на чекбоксе, легко кастомизируется, поддерживает выключенное состояние и может работать без CSS.

https://kittygiraudel.com/2021/04/05/an-accessible-toggle/

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

https://github.com/web-standards-ru/indie-list

Гэпы? Опа! Эрик Мейер с заметкой на CSS-Tricks, суммирующей случаи применения CSS-свойства gap для отступов между элементами раскладки: не только в гридах, но и во флексах и мультиколонках.

https://css-tricks.com/gaps-gasp/

Руководство по вёрстке HTML-писем. Виталий Фридман со списком инструментов, генераторов, фреймворков, шаблонов и хороших практик, помогающих в вёрстке писем.

https://www.smashingmagazine.com/2021/04/complete-guide-html-email-templates-tools/

CSS-препроцессоры в 2024. Большой обзор

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

👉Читать статью

#css #полезное

#фишка дня

Как подсказать пользователю мобильного устройства, что сейчас произойдёт при отправке формы?

Места на экране мало, ещё и клавиатура съест.

Очень просто! Использовать атрибут enterkeyhint!

Спека: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute

Поддержка: https://caniuse.com/?search=enterkeyhint

Пользуемся!

#mobile #form #html #бородач

#фишка дня

Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...

...и ваша секция уехала под шапку ко всем чертям. Что же делать?

Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2023, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.

В чем отличие 2 от 3?

Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.

Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html

#css #scroll #snap #anchor

В новом выпуске подкаста «Подлодка» наш фронтенд-гуру Андрей Ситник погружается в теорию цвета, в историю создания цветовых пространств и в процесс работы цвета от кода до светодиодов экрана — и все это для того, чтобы правильно понимать, почему мы хотим активно развивать oklch().

https://podlodka.io/305

Разработчики Chrome рекомендуют наш опенсорсный проект OKLCH color picker в своем новом CSS Color Guide, приятно!

https://developer.chrome.com/articles/high-definition-css-color-guide/#migrating-to-hd-css-color

Подробнее об этом OSS-проекте: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

Свежая статья в нашем блоге: марсианский фронтенд-инженер Иван Буряк объясняет, как предотвратить некоторые проблемы в React, которые могут возникнуть в “local-first” приложениях с асинхронным стейт-менеджером. Больше никаких покореженных интерфейсов, заедающих анимаций и недовольных пользователей!

https://evilmartians.com/chronicles/how-to-avoid-tricky-async-state-manager-pitfalls-react

6 инструментов фронтенд-разработчика в 2024 году

Читайте статью ниже про новые фронтенд-инструменты: Srcbook, Zod и еще четыре технологии, которые реально могут изменить подход к разработке.

👉Читать статью

#полезное