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

前往频道在 Telegram

Некий Коля Шабалин рассказывать про фронтенд, работу, образование, обучение и всякое хобби Чат для общения: https://t.me/+W80kxMBPKvAwNzBi

显示更多

俄罗斯538 702 技术与应用53 165

253

订阅者

无数据24 小时

无数据7 天

无数据30 天

221

帖子浏览量

无数据24 小时

无数据48 小时

87.35%

参与率

无数据

每日帖子数

Ads index

beta

帖子存档

253

Большие изменения 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/

253

Не отключайте кнопки Не указывайте кнопкам disabled, если у вас есть требование заполнить все поля. Вот несколько причин почему так лучше не отключать кнопки: - Они не дают обратной связи - Из-за них интерфейс кажется сломанным - Их трудно заметить - На них не сфокусироваться (по мне это самое важное) - Они обманчивы - Пользователи могут не заметить, что кнопка стала активной Посмотрите визуально на все проблемы из списка - https://adamsilver.io/blog/the-problem-with-disabled-buttons-and-what-to-do-instead/

253

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

253

Тренировка JS Если хотите потренировать HTML/CSS и простой JavaScript, то для вас есть пошаговое руководство по созданию конвертера валюта. Пошаговое руководство: https://webdesign.tutsplus.com/currency-converter-with-html-css-and-vanilla-javascript--cms-108362t

253

Пагинация Узнайте всё про визуальный паттерн "Пагинация". В статье шаг за шагом усложняют пагинацию. Из интересного: посмотрите как делать пагинацию для бесконечного контента, например новостные ленты в соц.сетях. Статья: https://coyleandrew.medium.com/design-better-pagination-a022a3b161e1

253

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

253

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

253

5 практических примеров использования :has() Посмотреть примеры: https://bejamas.io/blog/learn-css-has-selector-by-examples-top-use-cases/

253

Практическое введение в анимацию, управляемую прокруткой, с помощью CSS scroll() и view() Узнайте, как привязать прокрутку к анимации элемента. Статья: https://tympanus.net/codrops/2024/01/17/a-practical-introduction-to-scroll-driven-animations-with-css-scroll-and-view/

253

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/

253

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

253

Демонстрация того, что сегодня умеют PWA Оно из самых важных умений это возможность работать с файловой системой. Интересно, а чего не умеет PWA по сравнению с обычным приложением? Всё внутри: https://whatpwacando.today/

253

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/

253

Делайте область клика больше Маленькие размеры цели затрудняют нажатие, что приводит к ошибкам. Увеличьте размер цели для более плавного взаимодействия. Проверьте, как это работает: наведите курсор на элемент, заметите разницу? Оптимальный размер цели, согласно рекомендациям, составляет 44x44 пикселя CSS. - Применяйте закон Фиттса - больше целей, быстрее действия! Не забывайте про интервалы, чтобы избежать случайных нажатий. - Визуальная обратная связь улучшает пользовательский опыт. - Тестируйте и адаптируйте различные варианты ввода. - Учитывайте "проблему толстых пальцев". Перчатки? - Следите за изменением угла касания. - Мелкие цели - это проблема. - Расстояние имеет значение! - Знайте методы определения размера цели - изучите примеры: навигация по сайту, выпадающие элементы, кнопки-иконки. Обеспечьте большие размеры для доступности и удобства использования. Отличнейший мануал по размерам интерактивных элементов: https://ishadeed.com/article/target-size

253

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

253

Современный 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/

253

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


@media (scripting: none) {
    
}

Медиавыражение имеет три значения: - Значение none означает, что браузер не будет запускать скрипты для текущего документа, поскольку он не поддерживает их или поддержка скриптов не активна. - Значение initial-only означает, что сценарии доступны во время начальной загрузки страницы, но не после. - Значение enabled означает, что сценарии поддерживаются и активны в текущем документе и в течение всего "времени жизни" документа. Статья: https://blog.stephaniestimac.com/posts/2023/12/css-media-query-scripting/

253

Использование передовых функций CSS для создания индикатора прогресса Объединяет такие вещи, как анимация, связанная с прокруткой, тригонометрические функции CSS и свойства color-mix, чтобы создать индикатор прогресса, связанный с текущей позицией прокрутки страницы, без какого-либо JS. Статья: https://component-odyssey.com/articles/05-using-heaps-of-cutting-edge-css-to-build-a-progress-indicator

253

Разбираем самый маленький PNG в мире Самый миниатюрный PNG в мире весит 67 байт и представляет собой один чёрный пиксель. Узнайте почем так https://habr.com/ru/companies/ruvds/articles/787302/

253

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/