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

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

@greatAttractorCode

339 subscribers

230 photos

2 videos

328 links

Некий Коля Шабалин рассказывать про фронтенд, обучение, CSS-спецификации и фичи

Чат для общения: https://t.me/+W80kxMBPKvAwNzBi

Поддержать на Бусти - https://boosty.to/css-space

Download Telegram

About

Blog

Apps

Platform

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

339 subscribers

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

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

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

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

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

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

Designing better target sizes

An interactive guide on designing better target sizes on the web.

🔥1

181 views13:04

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

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/

Release Notes for Safari Technology Preview 186

Safari Technology Preview Release 186 is now available for download for macOS Sonoma and macOS Ventura.

176 views15:05

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

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

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

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

whatpwacando.today

What PWA Can Do Today

A showcase of what is possible with Progressive Web Apps today.

👍1

164 views09:03

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

Буквально все разработчики сегодня написали, что вышел 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

Interop 2024 | Blog | web.dev

Again in 2024, all major browser vendors, and other stakeholders, work together to solve the top browsers compatibility issues.

👍2

166 views11:03

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

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/

Modern CSS Solutions

12 Modern CSS One-Line Upgrades | Modern CSS Solutions

Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience.

🔥7👍1

172 views11:03

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

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

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

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

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/

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 - 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

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/

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 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

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

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/

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