👩‍💻 Использование 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