Экономия на спичках

Отличная статья от microsoft про перформанс селекторов. В проектах мы стараемся использовать простые селекторы, например .link, а значит производительные, но что если необходимо написать сложный селектор, например .wrapper .section .title .link.. Повлияет ли сложный селектор на перформанс интерфейса и как сильно повлияет?

Быстродействие сложного селектора, в основном, зависит от глубины и ширины DOM-дерева, чем больше дерево, тем менее производительный сложный селектор. Также перформанс зависит от того как часто изменяется DOM-дерево. Это значит, что перформанс одного и того же сложного селектора зависит от проекта.

В простом проекте быстродействие между простым селектором и сложным будет одинаковым, а в сложном проекте может сильно отличаться. Чтобы проверить производительность селектора можно воспользоваться панелью Performance в Edge.

Статья: https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/

ЕС признал, что баннеры с использованием файлов cookie слегка раздражают, и теперь пытается пересмотреть свой подход.

Статья: https://www.techspot.com/news/101396-european-union-set-revise-cookie-law-admits-cookie.html

Баннер с превьюшки показывается тут - https://www.artlebedev.ru/

10 самых распространенных ошибок доступности , обнаруженных на сайтах в 2023 году.

1. Нет текста ссылки
2. Неактивный элемент в порядке табуляции (tabindex="0").
3. Отсутствует атрибут alt ссылки.
4. Нет альтернативного текста
5. Список вложен неправильно. Имеется ввиду, когда список вложен в список
6. Задублированные лейблы
7. Положительное значение табиндекса.
8. Неверное aria описание. Нет цели для aria-describedby
9. Нет надписи для кнопки.
10. Неверная ариа-маркировка. нет цели для aria-labelledby

Детальнее: https://www.tpgi.com/the-top-accessibility-errors-found-in-2023/

Разбираем самый маленький PNG в мире

Самый миниатюрный PNG в мире весит 67 байт и представляет собой один чёрный пиксель.

Узнайте почем так https://habr.com/ru/companies/ruvds/articles/787302/

Использование передовых функций CSS для создания индикатора прогресса

Объединяет такие вещи, как анимация, связанная с прокруткой, тригонометрические функции CSS и свойства color-mix, чтобы создать индикатор прогресса, связанный с текущей позицией прокрутки страницы, без какого-либо JS.

Статья: https://component-odyssey.com/articles/05-using-heaps-of-cutting-edge-css-to-build-a-progress-indicator

Прощай .no-js.

Во всех основных браузерах появилось медивыражение срабатывающее на отключённый JS.

@media (scripting: none) {
    
}

Медиавыражение имеет три значения:
- Значение none означает, что браузер не будет запускать скрипты для текущего документа, поскольку он не поддерживает их или поддержка скриптов не активна.
- Значение initial-only означает, что сценарии доступны во время начальной загрузки страницы, но не после.
- Значение enabled означает, что сценарии поддерживаются и активны в текущем документе и в течение всего "времени жизни" документа.

Статья: https://blog.stephaniestimac.com/posts/2023/12/css-media-query-scripting/

Современный CSS-reset с современным CSS-свойствами

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: unset;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
  }

  img,
  picture,
  svg,
  canvas {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

В статье рассказывается для чего используется каждое правило.

Статья: https://keithjgrant.com/posts/2024/01/my-css-resets/

Как использоваться google.fonts в npm

1. npm install @fontsource/roboto
2. import "@fontsource/roboto";
3.

body {
    font-family: 'Roboto', sans-serif;
}

Подробнее в статье: https://www.amitmerchant.com/google-fonts-as-npm-packages/

Делайте область клика больше

Маленькие размеры цели затрудняют нажатие, что приводит к ошибкам. Увеличьте размер цели для более плавного взаимодействия. Проверьте, как это работает: наведите курсор на элемент, заметите разницу? Оптимальный размер цели, согласно рекомендациям, составляет 44x44 пикселя CSS.

- Применяйте закон Фиттса - больше целей, быстрее действия! Не забывайте про интервалы, чтобы избежать случайных нажатий.
- Визуальная обратная связь улучшает пользовательский опыт.
- Тестируйте и адаптируйте различные варианты ввода.
- Учитывайте "проблему толстых пальцев". Перчатки?
- Следите за изменением угла касания.
- Мелкие цели - это проблема.
- Расстояние имеет значение!
- Знайте методы определения размера цели - изучите примеры: навигация по сайту, выпадающие элементы, кнопки-иконки.

Обеспечьте большие размеры для доступности и удобства использования.

Отличнейший мануал по размерам интерактивных элементов: https://ishadeed.com/article/target-size

Safari Technology Preview 186

- Добавлена поддержка :any-link,:link и :-webkit-any-link внутри :has()
- Добавлена поддержка :scope внутри @scope.
- Добавлена поддержка align-content ячеек таблицы
- content-visibility теперь анимируемый

Продолжает играться с <input type="checkbox" switch>
- Добавлена ​​поддержка кольца фокусировки для <input type="checkbox" switch>
- Добавлена ​​поддержка вертикального рендеринга для файлов <input type="checkbox" switch>

и многое другое: https://webkit.org/blog/14916/release-notes-for-safari-technology-preview-186/

Демонстрация того, что сегодня умеют PWA

Оно из самых важных умений это возможность работать с файловой системой. Интересно, а чего не умеет PWA по сравнению с обычным приложением?

Всё внутри: https://whatpwacando.today/

Буквально все разработчики сегодня написали, что вышел Interop 2024.

Основной фокус на этот год:
- Доступность
- CSS вложенность(nesting)
- Кастомные свойства
- Декларативный Shadow DOM
- font-size-adjust
- HTTPS URLs для WebSocket
- IndexedDB
- Сетки: флексы и гриды
- События Pointer and Mouse
- Popover API
- Относительные цвета
- requestVideoFrameCallback
- стили скролбара
- @starting-style и transition-behavior
- Направленность текста
- text-wrap: balance
- URL

Дашборд

Статья от гуглов - https://web.dev/blog/interop-2024

12 современных обновлений одной строкой для вашего CSS

/* До */
margin-left: auto;
margin-right: auto;

/* После */
margin-inline: auto;

:is(h1, h2, h3, h4, .text-balance) {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

Посмотреть остальные: https://moderncss.dev/12-modern-css-one-line-upgrades/

Практическое введение в анимацию, управляемую прокруткой, с помощью CSS scroll() и view()

Узнайте, как привязать прокрутку к анимации элемента.

Статья: https://tympanus.net/codrops/2024/01/17/a-practical-introduction-to-scroll-driven-animations-with-css-scroll-and-view/

5 практических примеров использования :has()

Посмотреть примеры: https://bejamas.io/blog/learn-css-has-selector-by-examples-top-use-cases/

Автоматически увеличивающиеся элементы форм

Продолжает продвигаться свойство field-sizing, которое позволяет полям формы изменять свой размер под контент. Это удобно, например, для многострочных <textarea>.

Пока предлагает два значения:
- field-sizing: fixed; - значение по умолчанию. Сохраняет текущее поведение.
- field-sizing: content; - отключает функцию сохранения постоянного размера элемента управления формой, позволяя определять размер на основе содержимого.

Свойство нигде не работает

<head>

Самый полный список того, что вы можете указать в <head>.

https://github.com/htmlacademy/HEAD, изначально я форкнул репозиторий и просто перевёл его. Оказалось, что оригинальный репозиторий не имеет многих современных мета-тегов, а в итоге стало понятно, что оригинальный репозиторий больше не развивается. Часть мета-тегов я перевёл в "устаревшие" для истории.

Ставьте звёздочки. Если есть предложения по улучшению - пишите мне.

Пагинация

Узнайте всё про визуальный паттерн "Пагинация". В статье шаг за шагом усложняют пагинацию. Из интересного: посмотрите как делать пагинацию для бесконечного контента, например новостные ленты в соц.сетях.

Статья: https://coyleandrew.medium.com/design-better-pagination-a022a3b161e1

Тренировка JS

Если хотите потренировать HTML/CSS и простой JavaScript, то для вас есть пошаговое руководство по созданию конвертера валюта.

Пошаговое руководство: https://webdesign.tutsplus.com/currency-converter-with-html-css-and-vanilla-javascript--cms-108362t

Когда использовать text-wrap: balance, а когда pretty?

Очередная статья подтверждающая слова гуглов, что balance лучше использовать для заголовков или чего угодно с маленьким количеством текста, до шести строк, иначе производительность резко падает.

h1, h2, h3, h4, h5, h6, blockquote { text-wrap: balance; }

pretty же применяется для последних четырёх строк поэтому он чуть более производительный, а значит можно применять к большому массиву текстов.

p {
  text-wrap: pretty;
}

Статья: https://blog.stephaniestimac.com/posts/2023/10/css-text-wrap/

Не отключайте кнопки

Не указывайте кнопкам disabled, если у вас есть требование заполнить все поля.

Вот несколько причин почему так лучше не отключать кнопки:
- Они не дают обратной связи
- Из-за них интерфейс кажется сломанным
- Их трудно заметить
- На них не сфокусироваться (по мне это самое важное)
- Они обманчивы
- Пользователи могут не заметить, что кнопка стала активной

Посмотрите визуально на все проблемы из списка - https://adamsilver.io/blog/the-problem-with-disabled-buttons-and-what-to-do-instead/