👩‍💻 Использование async и defer для управления скриптами

В мире веб-разработки оптимизация времени загрузки страниц имеет решающее значение. Два мощных атрибута тега <script> — async и defer — могут существенно повлиять на производительность сайта. Использование этих атрибутов без их глубокого понимания может негативно сказаться на производительности и привести к ошибкам. Давайте начнём с основ и узнаем, что делают эти атрибуты и когда их следует использовать.

🖥 Читать статью

📱 @dev_notes_ru

#html #script #async #defer

👩‍💻 Практические советы по доступности, которые можно применить сегодня

Мы все бывали там, когда, торопясь уложиться в срок, создавали выпадающее меню или модальное окно, не задумываясь о его доступности. Но что, если внести несколько небольших изменений, которые могли бы значительно улучшить работу с сайтом для широкого круга пользователей? Доступность не должна быть сложной задачей или галочкой в графе соответствие. Речь идёт о создании продуктов, которыми могут пользоваться все, независимо от их способностей, технической грамотности, операционной системы или устройства.

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

🖥 Читать статью

📱 @dev_notes_ru

#frontend #a11y #html #tips

👩‍💻+👩‍💻 Реалистичные зернистые тени без дублирования изображения

👩‍💻 Realistic grainy shadows with no image duplication

Навеяно https://codepen.io/gayane-gasparyan/pen/LYGGmmr, только здесь не нужно устанавливать каждое изображение в качестве фона div, а затем дублировать его в pseudo.

Вместо этого используется один элемент img с alt. Более поддерживаемый, доступный + меню img по правому клику.

Ana Tudor

📱 @dev_notes_ru

#html #css #tips

👩‍💻👩‍💻👩‍💻 Переходите на сторону light-dark()

За последние несколько лет интерфейсы с темным режимом сильно изменились. Все мы знаем традиционный подход с использованием медиа-запросов, но в этой статье Sara Joy демонстрирует современные CSS-функции, благодаря которым соблюсти предпочтения пользователя в выборе цветовой схемы становится чертовски просто.

Вас можно простить, если думаете, что кодировать одновременно тёмный и светлый режимы — это очень сложно. Нужно помнить о @media запросах на основе prefers-color-scheme, а также о дополнительных сложностях, возникающих, когда посетители могут выбирать светлый или тёмный режим отдельно от настроек ОС. И давайте не будем забывать о самой цветовой палитре! Переход от светлого режима к тёмному может потребовать новых вариаций, чтобы добиться нужного уровня контрастности для обеспечения доступности.

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

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS #HTML #JS #ColorScheme #DarkMode #LightMode

👩‍💻 Предзагрузка отзывчивых изображений

Отзывчивые изображения и предзагрузка не очень хорошо сочетаются друг с другом. Когда используются отзывчивые изображения, браузер принимает разумные решения о том, какое изображение загрузить, основываясь на характеристиках устройства. Но перед тем, как эти решения будут приняты, должна произойти предварительная загрузка. Давайте узнаем, как сделать так, чтобы они работали вместе.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #HTML #Responsive #Image #Preloading

👩‍💻 Лучший подход к SVG иконкам

SVG — лучший подход к реализации системы иконок в вебе. Существует множество способов использования SVG, каждый из которых имеет свои плюсы и минусы, и все их мы рассмотрим.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #SVG #Icons #HTML #CSS

👩‍💻 link rel='modulepreload': Оптимизация загрузки модулей JavaScript

rel='modulepreload' указывает, что скрипт модуля должен быть получен, проанализирован и откомпилирован заранее, и сохранён для последующего выполнения.


🖥 Читать статью

📱 @dev_notes_ru

#Frontend #HTML #JavaScript #Preload #Module

👩‍💻👩‍💻 Кнопки с несколькими состояниями

Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью CSS-хитростей.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #HTML #CSS #Button #MultiState

👩‍💻 HTML элемент search

24 марта 2023 года в спецификации HTML появился элемент search — специализированный контейнер для интерфейсов поиска.

Элемент <search> служит семантической обёрткой для форм поиска и фильтрующих компонентов UI. Он обеспечивает лучшую доступность, чем общие элементы <div>, и разъясняет назначение связанного с поиском контента как браузерам, так и вспомогательным технологиям.

До его появления разработчики полагались на типовые элементы div с ролями ARIA для обозначения областей поиска — решение приемлемое, но не идеально. Элемент search меняет ситуацию, предоставляя собственное семантическое значение для интерфейсов поиска и фильтрации.

🖥 Читать статью

📱 @dev_notes_ru

#html #search

👩‍💻 HTML элемент <details>: Встроенный аккордеон, который вы не используете

Узнайте, как HTML элемент <details> может заменить JavaScript аккордеоны и почему он может быть лучше, чем ваше текущее решение.

HTML элемент <details>, возможно, один из самых недооцененных встроенных элементов. Меня постоянно удивляет, как много разработчиков прибегают к использованию JavaScript, когда им нужно показать/скрыть содержимое, совершенно не обращая внимания на эту встроенную возможность.

🖥 Читать статью

📱 @dev_notes_ru

#HTML #details

👩‍💻👩‍💻 Модернизация с Web-платформой: Производительность изображений

Демонстрация того, как современная Web-платформа может радикально упростить и обогатить старую кодовую базу.

Это первая часть серии статей о силе современной Web-платформы. Я написал каждую статью, основываясь на результатах проекта, созданного в 2018 году, а затем обновлённого в 2024 году.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #HTML #JavaScript #WebPlatform

👩‍💻👩‍💻 Тёмная и светлая темы для SVG

Использование CSS функции `light-dark()` для реализации светлого и тёмного режима для SVG иконок,включая SVG, используемые с HTML элементом `img` или в качестве CSS свойства `background-image`.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #HTML #CSS