Коля Шабалин и великий аттрактор кода

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

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

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

Codrops

A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view() | Codrops

With just CSS you can add scroll animations that toggle shadows on navbars, reveal images, add scrollytelling, link up carousel elements and much more.

👍2

198 views13:05

Коля Шабалин и великий аттрактор кода

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

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

Bejamas

Learn CSS :has() selector by examples: 5 top use cases

Discover the power of the :has() selector in CSS with our comprehensive guide. Learn the basics and explore 5 top use cases through 10 practical demos.

👍1🔥1

218 views15:04

Коля Шабалин и великий аттрактор кода

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

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

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

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

😭2😁1😈1

170 viewsedited 15:03

Коля Шабалин и великий аттрактор кода

<head>

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

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

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

GitHub

GitHub - htmlacademy/HEAD: Список того, что вы можете указать в HEAD

Список того, что вы можете указать в HEAD. Contribute to htmlacademy/HEAD development by creating an account on GitHub.

🔥11💯1

177 views07:56

Коля Шабалин и великий аттрактор кода

Пагинация

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

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

Medium

Design better pagination

Pagination UI best practices and complex considerations

🔥6

183 views09:03

Коля Шабалин и великий аттрактор кода

Тренировка JS

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

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

Web Design Envato Tuts+

Create a currency converter with HTML, CSS, and vanilla JavaScript

Let’s create a currency converter using HTML, CSS, and vanilla JavaScript, with data from the Exchange Rate API.

❤2👍2

194 views11:03

Коля Шабалин и великий аттрактор кода

Когда использовать 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/

Stephanie Stimac's Blog

When to use CSS text-wrap: balance; vs text-wrap: pretty;

A ruthless look at when to use these two CSS text-wrap values.

189 views13:03

Коля Шабалин и великий аттрактор кода

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

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

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

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

Adamsilver.io

The problem with disabled buttons and what to do instead

Adam Silver – interaction designer - London, UK

206 views15:04

Коля Шабалин и великий аттрактор кода

Большие изменения Apple в iOS, Safari и App Store в Европейском Союзе

Масштабные изменения грядут для пользователей iOS, Safari и App Store в ЕС, однако разработчикам по всему миру тоже нужно быть в курсе изменений. Особое внимание разработчиков фронтенда привлечет внедрение альтернативных браузерных движков (т. е. браузеров, работающих не на базе WebKit), начиная с iOS 17.4. Однако не все так просто...

https://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-store-in-the-european-union/

Apple Newsroom

Apple announces changes to iOS, Safari, and the App Store in the European Union

Apple announced changes to iOS, Safari, and the App Store impacting developers’ apps in the EU to comply with the DMA.

186 views11:30

Коля Шабалин и великий аттрактор кода

Выделение текста, когда пользователь прокручивает вниз до этого фрагмента текста

Классный эффект, когда вы докручиваете до выделенного текста с помощью CSS

Изучить: https://frontendmasters.com/blog/highlight-text-when-a-user-scrolls-down-to-that-piece-of-text/

🔥3

370 views11:37

Коля Шабалин и великий аттрактор кода

понеслась

Mozilla заявляет, что новые правила браузера Apple «настолько болезненны, насколько это возможно» для Firefox

https://www.theverge.com/2024/1/26/24052067/mozilla-apple-ios-browser-rules-firefox

The Verge

Mozilla says Apple’s new browser rules are “as painful as possible” for Firefox

Mozilla is “extremely disappointed.”

😁3

200 views12:04

Коля Шабалин и великий аттрактор кода

Что было в январе. Вспоминает Рейчел Эндрю

- <hr> в <select>
- HTMLSelectElement.showPicker
- Largest Contentful Paint (LCP) API
- Свойства полосы прокрутки CSS
- CSS font-palette animation
- Методы transfer() и transferToFixedLength() буфера ArrayBuffer

В блоге: https://web.dev/blog/web-platform-01-2024

web.dev

New to the web platform in January | Blog | web.dev

Discover some of the interesting features that have landed in stable and beta web browsers during January 2024.

219 views13:04

Коля Шабалин и великий аттрактор кода

В каком мире мы вообще живём?

Знали ли вы, что PNG произносится как «пинг»? И это написано в спецификации

> Portable Network Graphics (PNG, pronounced "ping") 😱😱😱

https://www.w3.org/TR/2003/REC-PNG-20031110/#1Scope

😱9😁4🤪1

226 views14:03

Коля Шабалин и великий аттрактор кода

Switch на современных CSS техниках

:has(), кастомные свойства, выражения от контейнера, логические свойства, inset - всё это и многое другое.

https://piccalil.li/blog/a-highly-configurable-switch-component-using-modern-css/

244 views15:04

Коля Шабалин и великий аттрактор кода

Блокировка прокрутки с помощью :has()

Интересный приём по скрытию скрола и отслеживания этого на элементах

body:has(.lock-scroll) {
  overflow: hidden;
}

<dialog class="lock-scroll">
  <!-- some wonderful modal content -->
</dialog>

Если у элемента появляется класс lock-scroll, то у body убирается скрол.

Подробнее: https://robbowen.digital/wrote-about/locking-scroll-with-has/

Robb Owen Digital

Locking scroll with :has().

Now that :has has landed in all browsers, here's a quick tip for handling locked scroll

🔥6❤1

219 views10:05

Коля Шабалин и великий аттрактор кода

@property в CSS

Полная поддержка @property в браузерах близится к завершению. @property позволяет проверить тип кастомного свойства, а также определить поведение наследования

@property --primary-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #ea1ca5;
}

body {
  background-color: var(--primary-color);
}

Больше в статье: https://utilitybend.com/blog/taking-a-closer-look-at-property-in-css/

Utilitybend

Taking a closer look at @property in CSS | utilitybend

With browser support for @property nearing completion, we delve into the technical aspects of this CSS feature. Explore inner workings and uncover benefits of @property, ready for production use.

👍3

201 viewsedited 11:04

Коля Шабалин и великий аттрактор кода

Как сделать внешние ссылки доступными

Внешняя ссылка может открываться в той же вкладке или в новой вкладке. В статье рассматривается почему большинство внешних ссылок должны открываться но одной вкладке: https://blog.pope.tech/2024/01/02/how-to-make-external-links-accessible/

👍4

187 views13:05

Коля Шабалин и великий аттрактор кода

border-image

Одно из сложнейших, для понимания, CSS-свойств border-image. Очередная статья пытается нас рассказать как делать градиенты, и даже конические градиенты для border.

Статья: https://www.smashingmagazine.com/2024/01/css-border-image-property/

👍4❤1

201 views15:03

Коля Шабалин и великий аттрактор кода

CSS Motion Path

Наткнулся на статью, объясняющую свойство CSS Motion Path. Это свойство позволяет анимировать элементы по заранее заданному пути непосредственно с помощью CSS, минуя необходимость в сложных вычислениях или использовании библиотек JavaScript. В статье приведено несколько примеров, таких как анимация квадрата по кривой "S", перемещение текста по кривой и значок автомобиля, который перемещается в зависимости от положения прокрутки.

Статья: https://www.letsbuildui.dev/articles/what-is-css-motion-path/

🔥3

201 views09:19

Коля Шабалин и великий аттрактор кода

Палитра анимированных шрифтов

> С выпуском Chrome 121 мы теперь можем анимировать плавный переход между палитрами шрифтов в Color Fonts, используя только CSS.

<h1>Jello</h1>

@font-palette-values --base {
  font-family: "Bungee Spice";
  override-colors: 0 #1894b0, 1 #fc00fc;
}

@font-palette-values --transition {
  font-family: "Bungee Spice";
  override-colors: 0 #fc00fc, 1 #4200d9;
}

h1 {
  font-family: "Bungee Spice", sans-serif;
  font-palette: --base;
  transition: ease 250ms font-palette;
}

h1:hover {
  font-palette: --transition;
}

👍1

214 views11:04

Коля Шабалин и великий аттрактор кода

Использование элемента <abbr> с атрибутом `title`

Использование тега <abbr> с атрибутом title представляет собой эффективный способ добавления аббревиатур или сокращений, обеспечивая при этом их расшифровку для пользователя. Вот пример кода, иллюстрирующий это:

<p>
Join <abbr title="National Aeronautics and Space Administration">NASA</abbr> for a briefing on its zero-G espresso cup, powered by capillary action!
</p>

Реализация и отображение тега <abbr> значительно различается в зависимости от браузера и даже операционной системы.

Посмотрите на результаты тестирования в различных средах: https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html

Вывод: Не используйте <abbr> с заголовком или без него. Показ информации в браузерах и вспомогательных технологиях оставляет желать лучшего. Некоторые пользователи всегда будут пропускать какую-то часть информации.

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

Adrian Roselli

Using abbr Element with title Attribute

How the <abbr> element is defined and exposed, along with the title attribute: § 4.5.9 The abbr element from WHATWG. ARIA in HTML entry on <abbr> notes it has no implicit role and naming is prohibited. Which is probably why Core Accessibility API Mappings…

👍3

200 views13:05

About

Blog

Apps

Platform