Что на самом деле делает атрибут decoding у img?
Сейчас будет сложно, а в оригинальной статье ещё сложнее, но когда-нибудь эти знания вам пригодятся.
Возможно, вы замечали, что иногда к изображениям зачем-то добавляют
Барри Поллард задался тем же вопросом и раскопал много интересностей, пообщавшись непосредственно с разработчиками браузеров.
Начнём с того, что у
-
-
-
Пока понятней не стало. Но мы уже знаем, что у картинок есть этап декодирования. То есть когда браузер видит в коде страницы
Парадокс в том, что на обычные статические страницы этот атрибут почти никак не влияет. То есть браузеры и так знают, что им важно пользователю показать контент как можно раньше, при этом не рисовать вообще каждое изменение, поэтому уже есть умные механизмы сбора изменений в отрисовке в чанки. И картинки не декодируются в основном потоке, так что JavaScript тоже с картинками за время основного потока не борется.
А ещё в Firefox по умолчанию у всех картинок применяется
На самом деле значительная разница появляется тогда, когда вы вставляете картинки при помощи JavaScript. А в современном SPA-мире такое сплошь и рядом. Джейк Арчибальд собрал демку, на которой в разных браузерах можно эту разницу заметить (ссылка в статье). Суть в том, что если внутри JS последовательно создать
А ещё браузеры шибко умные, поэтому картинки, которых внутри вьюпорта нет, не декодируются до тех пор, пока к ним не подскроллишь. Что в целом логично, память нагружать тем, что может и не понадобиться, как будто не стоит. Но если вы на странице с большим количеством картинок ближе к футеру нажмёте клавишу
В общем, после прочтения статьи хочется дать такие советы:
- Если вы и так загружаете картинки при помощи JS, то добавьте ещё
-
- Для тонкого тюнинга Core Web Vitals, особенно LCP, пробуйте разное. Интуитивно кажется, что
- Если вы занимаетесь тюнингом декодирования картинок на сайте, то либо ваш сайт уже идеален по перфомансу, либо можно заняться более полезными вещами, вроде ленивой загрузки и оптимизации самих картинок.
https://www.tunetheweb.com/blog/what-does-the-image-decoding-attribute-actually-do/
Сейчас будет сложно, а в оригинальной статье ещё сложнее, но когда-нибудь эти знания вам пригодятся.
Возможно, вы замечали, что иногда к изображениям зачем-то добавляют
decoding=async. Возможно, вы даже сами добавляли такой атрибут по советам из статей по оптимизации перфоманса. А если вы пользуетесь компонентом Image из NextJS, то у вас в проекте точно по умолчанию для картинок включён этот атрибут. А он вообще важный?Барри Поллард задался тем же вопросом и раскопал много интересностей, пообщавшись непосредственно с разработчиками браузеров.
Начнём с того, что у
decoding может быть три значения по спеке:-
sync — просим браузер декодировать картинку синхронно;-
async — просим браузер декодировать асинхронно;-
auto — доверяем браузеру выбрать самостоятельно.Пока понятней не стало. Но мы уже знаем, что у картинок есть этап декодирования. То есть когда браузер видит в коде страницы
<img src='...'>, он сначала попросит сетевой кусок браузера сходить за картинкой в сеть или кэш, потом ещё один вспомогательный кусок попросит декодировать картинку (превратить из набора байтов в понятные для отрисовки данные, не просто так же кучу кодеков придумали сложных для сжатия), и только потом отрисует.Парадокс в том, что на обычные статические страницы этот атрибут почти никак не влияет. То есть браузеры и так знают, что им важно пользователю показать контент как можно раньше, при этом не рисовать вообще каждое изменение, поэтому уже есть умные механизмы сбора изменений в отрисовке в чанки. И картинки не декодируются в основном потоке, так что JavaScript тоже с картинками за время основного потока не борется.
А ещё в Firefox по умолчанию у всех картинок применяется
async. А у Chrome sync. А у WebKit в большинстве случаев sync, но для некоторых исключений всё же async. То есть сами браузеры до сих пор не договорились, какое поведение должно быть дефолтным.На самом деле значительная разница появляется тогда, когда вы вставляете картинки при помощи JavaScript. А в современном SPA-мире такое сплошь и рядом. Джейк Арчибальд собрал демку, на которой в разных браузерах можно эту разницу заметить (ссылка в статье). Суть в том, что если внутри JS последовательно создать
div с красным фоном, а потом внутрь него положить баааальшой img, загруженный через тот же JS, то в случае с sync случится подвисание страницы, потому что браузер увидит инструкцию декодировать синхронно и отложить отрисовку до окончания декодирования. А в случае с async вы сначала увидите красный фон у div, и только потом поверх нарисуется картинка, что тоже не ок, потому что моргание на экране.А ещё браузеры шибко умные, поэтому картинки, которых внутри вьюпорта нет, не декодируются до тех пор, пока к ним не подскроллишь. Что в целом логично, память нагружать тем, что может и не понадобиться, как будто не стоит. Но если вы на странице с большим количеством картинок ближе к футеру нажмёте клавишу
End на клавиатуре... получите подвисание.В общем, после прочтения статьи хочется дать такие советы:
- Если вы и так загружаете картинки при помощи JS, то добавьте ещё
await img.decode();. Эта конструкция всё равно асинхронная, зато перед отрисовкой будет всё готово, чтобы отрисовать быстро.-
async всё же предпочитетельнее для ситуаций, когда вам текстовый контент на странице важнее картинок. Будет два кадра отрисовки, но зато текст появится чуть-чуть раньше. На слабых устройствах это «чуть-чуть» будет заметно глазу.- Для тонкого тюнинга Core Web Vitals, особенно LCP, пробуйте разное. Интуитивно кажется, что
sync правильнее, чтобы не тратить время на лишнюю отрисовку, но браузер слишком умный, поэтому банально надо пробовать разное и сравнивать.- Если вы занимаетесь тюнингом декодирования картинок на сайте, то либо ваш сайт уже идеален по перфомансу, либо можно заняться более полезными вещами, вроде ленивой загрузки и оптимизации самих картинок.
https://www.tunetheweb.com/blog/what-does-the-image-decoding-attribute-actually-do/
Tunetheweb
What does the image decoding attribute actually do?
An in-depth look at the decoding attribute and how it affects web performance differently when using sync, async or not at all
🔥36🌚10👍8❤3🐳2⚡1
Держим <head> в порядке
Наткнулся на интересный скрипт, который позволяет провести очень быстрый аудит и относительно быстро починить порядок тегов внутри
Есть такой CSS-сниппет от Гарри Робертса, который подсвечивает неправильный порядок служебных тегов. Называется ct.css. И ещё доклад про этот сниппет. Гарри — очень крутой специалист по веб-перфомансу, к тому же слайды довольно убедительны.
Скрипт capo.js делает почти то же самое, только выводит результаты аудита в консоль. И даёт советы, как лучше отсортировать мета-теги, OG-разметку и прочее содержимое
Попробовал запустить на нескольких сайтах — не врёт, и правда есть смысл внести правки.
Документация у проекта пока в сыром виде, но это опенсорс — можно прийти и помочь её дописать. А для пользования скриптом всего хватает.
https://rviscomi.github.io/capo.js/
Наткнулся на интересный скрипт, который позволяет провести очень быстрый аудит и относительно быстро починить порядок тегов внутри
<head>.Есть такой CSS-сниппет от Гарри Робертса, который подсвечивает неправильный порядок служебных тегов. Называется ct.css. И ещё доклад про этот сниппет. Гарри — очень крутой специалист по веб-перфомансу, к тому же слайды довольно убедительны.
Скрипт capo.js делает почти то же самое, только выводит результаты аудита в консоль. И даёт советы, как лучше отсортировать мета-теги, OG-разметку и прочее содержимое
<head>, чтобы отдавать самое важное для быстрого отображения страницы сразу, а остальное попозже.Попробовал запустить на нескольких сайтах — не врёт, и правда есть смысл внести правки.
Документация у проекта пока в сыром виде, но это опенсорс — можно прийти и помочь её дописать. А для пользования скриптом всего хватает.
https://rviscomi.github.io/capo.js/
capo.js
capo.js: get your ﹤𝚑𝚎𝚊𝚍﹥ in order
Getting starting with capo.js
🔥45🥰16❤6⚡4🤨2🤯1
Открытие файлов в веб-приложении
Думаю, все когда-нибудь делали набор действий «Правой кнопкой мыши — Открыть с помощью... — Какое-то приложение». PWA на десктопе тоже можно добавить в список приложений, при помощи которых можно открывать файлы определённого формата.
Ларс Кнудсен собирает веб-приложение, в котором можно просматривать файлы формата GeoJSON. По умолчанию они имеют расширение
Для этого нужно сделать две вещи:
- Добавить в веб-манифест массив обработчиков
- При открытии PWA обработать
Я у себя похожее внедрял в своём D&D Tokenizer, чтобы любые картинки быстро передавать в PWA для рисования игровых токенов. Экономит время, удобно. А для всяких веб-плееров, которые умеют работать с локальными файлами, ещё и необходимо.
https://dev.to/denladeside/handling-files-in-enterprise-web-solutions-3mkc
Думаю, все когда-нибудь делали набор действий «Правой кнопкой мыши — Открыть с помощью... — Какое-то приложение». PWA на десктопе тоже можно добавить в список приложений, при помощи которых можно открывать файлы определённого формата.
Ларс Кнудсен собирает веб-приложение, в котором можно просматривать файлы формата GeoJSON. По умолчанию они имеют расширение
.geojson, собственно. И кажется логичным каким-то образом сказать системе, чтобы все файлы с таким расширением открывали это веб-приложение.Для этого нужно сделать две вещи:
- Добавить в веб-манифест массив обработчиков
file_handlers. Нужно указать, какой относительный URL открывать при открытии файла. И можно указать иконки, чтобы они в меню подставлялись рядом с названием приложения.- При открытии PWA обработать
window.launchQueue — именно сюда браузер сложит файлы, которые пользователь попытается открыть из операционной системы.Я у себя похожее внедрял в своём D&D Tokenizer, чтобы любые картинки быстро передавать в PWA для рисования игровых токенов. Экономит время, удобно. А для всяких веб-плееров, которые умеют работать с локальными файлами, ещё и необходимо.
https://dev.to/denladeside/handling-files-in-enterprise-web-solutions-3mkc
DEV Community
Handling files in enterprise web solutions
Using the File Handling API to create file use shortcuts for enterprise
🔥30👍10❤3😍1🐳1
Создание цветовых палитр при помощи CSS-функции color-mix()
Мишель Баркер очень подробно объясняет, как работает функция
Когда вы пишете
Для записи
А вот с
Я бы эту функцию пока использовал только для смешивания с чёрным и белым. Смешивать цвета в sRGB всё ещё сложно с точки зрения предсказуемости — правила интерполяции там не очень. А вот когда
https://developer.mozilla.org/en-US/blog/color-palettes-css-color-mix/
Мишель Баркер очень подробно объясняет, как работает функция
color-mix(). По сути при помощи неё можно смешивать цвета, только важно разобраться, как работает это смешивание.Когда вы пишете
color-mix(in srgb, blue, red), то по сути вы смешиваете синий и красный в соотношении 1:1. При этом смешивание — это интерполяция. Очень грубо говоря, для sRGB браузер возьмёт отрезок на градиентной цветовой плоскости между двумя точками, выберет середину, выдаст результат. Для пространств вроде oklch всё сложнее, но суть та же — у браузера есть правила интерполяции.Для записи
color-mix(in srgb, blue, red 10%) синего будет 90%. В сумме браузер попытается сделать 100%.А вот с
color-mix(in srgb, blue 10%, red 20%) случай интересный. Здесь суммарный цвет получится в соотношении 1:2, но непрозрачность цвета будет 0.3, потому что оставшееся до 100% заполняется прозрачным цветом.Я бы эту функцию пока использовал только для смешивания с чёрным и белым. Смешивать цвета в sRGB всё ещё сложно с точки зрения предсказуемости — правила интерполяции там не очень. А вот когда
oklch можно будет втаскивать в проекты, тогда уже можно начать играться с математикой цвета в более подходящем для этого пространстве. С CSS-переменными функция работает замечательно, так что можно на основе нескольких базовых цветов математически описать полную палитру для всех состояний.https://developer.mozilla.org/en-US/blog/color-palettes-css-color-mix/
MDN Web Docs
Creating color palettes with the CSS color-mix() function | MDN Blog
Working with colors on the web just got more interesting! In this article, we’ll explore how to use the CSS color-mix() function to create variations in color palettes.
👍25❤1🔥1
Safe/unsafe в флексбоксах
Когда в субботу записывали подкаст, внезапно обнаружил в релизноутах Safari TP поддержку внутри flexbox ключевых слов
Стефан Джадис удивился так же, как я. В своей статье он показывает, для чего эти ключевые слова нужны.
Пусть у вас есть вёрстка на флексбоксах, в колонку. И пусть вы выравниваете контент по центру при помощи
Если мне всё-таки важно не прятать левый край, можно написать
https://www.stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/
Когда в субботу записывали подкаст, внезапно обнаружил в релизноутах Safari TP поддержку внутри flexbox ключевых слов
safe и unsafe. Подумал, что это что-то новое, пошёл разбираться. Оказалось, в Firefox это есть аж с 2018 года. И в Chrome оно тоже есть.Стефан Джадис удивился так же, как я. В своей статье он показывает, для чего эти ключевые слова нужны.
Пусть у вас есть вёрстка на флексбоксах, в колонку. И пусть вы выравниваете контент по центру при помощи
align-items: center;. Если контент по какой-то причине не помещается во вьюпорт, что должен сделать браузер? Ну, я его попросил выравнивать по центру, он и будет выравнивать по центру. Но, к сожалению, левая часть большого блока будет спрятана за левым краем вьюпорта. И, как вы понимаете, подскроллить к этой спрятанной области у пользователя возможности не будет. Это — поведение ключевого слова unsafe, которое прописывать не обязательно. Для картинок такое поведение, наверное, подходит, а вот для текстов нужен другой подход.Если мне всё-таки важно не прятать левый край, можно написать
align-items: safe center;. И в таком случае браузер, когда уткнётся левым краем большого блока в левый край вьюпорта, начнёт этот большой блок двигать вправо. Скролл спасёт пользователя от потери информации. Удобно.https://www.stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/
Stefanjudis
Safe/unsafe alignment in CSS flexbox
Safe alignment can prevent data loss in CSS flexbox layouts
❤41👍22🤯12🔥6❤🔥3
Тултипы на CSS
Темани Афиф показывает, как при помощи разных CSS-техник рисовать тултипы с хвостиками. Есть варианты со сплошной заливкой, с выделенной обводкой. Позиция хвостика управляется при помощи CSS-переменных. Ну и в HTML это всего лишь один элемент
Часть 1: https://www.smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/
Часть 2: https://www.smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part2/
Темани Афиф показывает, как при помощи разных CSS-техник рисовать тултипы с хвостиками. Есть варианты со сплошной заливкой, с выделенной обводкой. Позиция хвостика управляется при помощи CSS-переменных. Ну и в HTML это всего лишь один элемент
<div class="tooltip">Текст</div>. Под капотом много clip-path и математики.Часть 1: https://www.smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/
Часть 2: https://www.smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part2/
Smashing Magazine
Modern CSS Tooltips And Speech Bubbles (Part 1) — Smashing Magazine
Tooltips are a very common pattern used in CSS for years. There are a lot of ways to approach tooltips in CSS, though some evoke headaches with all the magic numbers they require. In this article, Temani Afif presents modern techniques to create tooltips…
👏25👍17❤🔥8❤2🐳1
CSS-каскад. (Ново)введение
Видео выходного дня. Мануэль Матузович на примерах показывает, как работает каскад в CSS. Особый упор делает на объяснение
https://vimeo.com/916686376
Видео выходного дня. Мануэль Матузович на примерах показывает, как работает каскад в CSS. Особый упор делает на объяснение
@layer и @scope, которые появились не так давно, но на каскад сильно влияют.https://vimeo.com/916686376
Vimeo
The CSS Cascade - A (re)introduction
This is "The CSS Cascade - A (re)introduction" by Manuel Matuzovic on Vimeo, the home for high quality videos and the people who love them.
❤🔥19💯7❤4👍2
Индикатор прогресса
Энди Белл показывает, как можно собрать веб-компонент, который умеет в анимацию прогресса, показывает галочку на 100%, доступный, стилизуемый, адаптируемый под размеры контейнера. Решение родилось из челленджа, который Энди запускал в своём Front-End Challenges Club.
https://piccalil.li/blog/solution-009-progress-indicator/
Энди Белл показывает, как можно собрать веб-компонент, который умеет в анимацию прогресса, показывает галочку на 100%, доступный, стилизуемый, адаптируемый под размеры контейнера. Решение родилось из челленджа, который Энди запускал в своём Front-End Challenges Club.
https://piccalil.li/blog/solution-009-progress-indicator/
Piccalilli
Front-End solution: progress indicator
All is revealed about how to build this Front-End Challenges Club challenge, with some great contributions to the community too.
🔥30❤4🙏1
Scroll snapping для заголовков
Думаю, вы уже успели попробовать свойства из семейства
Крис Койер предлагает интересную, хоть и сомнительную идею применять снаппинг для заголовков. Представьте, что у вас есть статья с короткими абзацами, где много заголовков. И когда пользователь скроллит, можно заголовок с абзацем как карточку «примагничивать» к верху вьюпорта, чтобы красиво переключалось между разными фрагментами текста.
Сомнительность такой истории в том, что сложно предугадать, поместится текст во вьюпорт или нет. И в демках Криса я не могу прочитать последний абзац одной из таких «карточек» — его выбрасывает за вьюпорт постоянно.
Но в целом статья заставила задуматься, что снаппинг можно применять не только для картинок: на странице же могут быть разные элементы, в том числе текстовые, которые хочется «примагнитить» к какому-нибудь краю или центру вьюпорта.
https://frontendmasters.com/blog/chill-scroll-snapping-article-headers/
Думаю, вы уже успели попробовать свойства из семейства
scroll-snap в CSS. Они очень удобные, чтобы создавать всякие простые карусельки без JavaScript. И почти везде их как раз на карусельках и показывают, потому что самый очевидный пример.Крис Койер предлагает интересную, хоть и сомнительную идею применять снаппинг для заголовков. Представьте, что у вас есть статья с короткими абзацами, где много заголовков. И когда пользователь скроллит, можно заголовок с абзацем как карточку «примагничивать» к верху вьюпорта, чтобы красиво переключалось между разными фрагментами текста.
Сомнительность такой истории в том, что сложно предугадать, поместится текст во вьюпорт или нет. И в демках Криса я не могу прочитать последний абзац одной из таких «карточек» — его выбрасывает за вьюпорт постоянно.
Но в целом статья заставила задуматься, что снаппинг можно применять не только для картинок: на странице же могут быть разные элементы, в том числе текстовые, которые хочется «примагнитить» к какому-нибудь краю или центру вьюпорта.
https://frontendmasters.com/blog/chill-scroll-snapping-article-headers/
Frontend Masters
Chill Scroll Snapping: Article Headers
CSS has a feature called scroll snapping. A lot of the demos and examples, rightfully so, focus around things that benefit highly from it. For instance, an image slider, carousel, or grid of things that just beg to be aligned after scrolling.
🤔22👍10❤2🎉2💔1
«Я💛Ф» CTF 2024
Вот уже четвёртый год мы небольшой командой делаем фронтенд-игру в стиле Capture the Flag. Участникам нужно найти спрятанные в разных местах текстовые флаги и ввести их в терминалы, чтобы перейти на следующий уровень. Кто первым соберёт обязательные флаги — победит. Кто первым соберёт вообще все флаги — тоже победит. И всё это с приятной музыкой, красивым оформлением и даже полноценным сюжетом.
Если считаете, что разбираетесь во фронтенд-технологиях, заходите сегодня после 20:07 по минскому времени, чтобы поучаствовать в гонке за призами.
https://ctf-2024.ilovefrontend.ru/
Вот уже четвёртый год мы небольшой командой делаем фронтенд-игру в стиле Capture the Flag. Участникам нужно найти спрятанные в разных местах текстовые флаги и ввести их в терминалы, чтобы перейти на следующий уровень. Кто первым соберёт обязательные флаги — победит. Кто первым соберёт вообще все флаги — тоже победит. И всё это с приятной музыкой, красивым оформлением и даже полноценным сюжетом.
Если считаете, что разбираетесь во фронтенд-технологиях, заходите сегодня после 20:07 по минскому времени, чтобы поучаствовать в гонке за призами.
https://ctf-2024.ilovefrontend.ru/
❤26🔥8👍5🤬2
Service Worker Static Routing API
В Chrome 123 из-под флага выехало классное улучшение для сервис-воркеров.
Представьте, что у вас есть сервис-воркер на сайте. Даже если вы настроили его при помощи Workbox (популярный пакет для автоматизации большого числа типовых кейсов, связанных с SW), то всё равно этот сервис-воркер под капотом обрабатывает вообще любой запрос.
Когда сервис-воркер активен, то прогон каждого запроса через обработчик не сильно замедляет, потому что скачивание файла всё равно медленнее, чем достать его из кэша. Но если сервис-воркер в спящем режиме, а при этом вам для каких-то запросов нужен именно Network Only подход, то добавление сервис-воркера скорее мешает, чем помогает. То есть для сайтов, на которые пользователи заходят очень редко, добавление SW приносит больше вреда, чем пользы.
Так вот, в Chrome 123 добавили возможность задать специальный конфиг, в котором вы можете попросить браузер за какими-то ресурсами ходить только через сеть, за какими-то — через кэш, и так далее.
Тут в коде явно прописывается, что все POST-запросы по маске
Почитайте в статье про все возможные значения. И самое приятное, что такой конфиг можно использовать как прогрессивное улучшение. Надеюсь, Workbox тоже реализует у себя такие фичи в скором времени, потому что в основном я пользуюсь им для настройки SW.
https://developer.chrome.com/blog/service-worker-static-routing
В Chrome 123 из-под флага выехало классное улучшение для сервис-воркеров.
Представьте, что у вас есть сервис-воркер на сайте. Даже если вы настроили его при помощи Workbox (популярный пакет для автоматизации большого числа типовых кейсов, связанных с SW), то всё равно этот сервис-воркер под капотом обрабатывает вообще любой запрос.
Когда сервис-воркер активен, то прогон каждого запроса через обработчик не сильно замедляет, потому что скачивание файла всё равно медленнее, чем достать его из кэша. Но если сервис-воркер в спящем режиме, а при этом вам для каких-то запросов нужен именно Network Only подход, то добавление сервис-воркера скорее мешает, чем помогает. То есть для сайтов, на которые пользователи заходят очень редко, добавление SW приносит больше вреда, чем пользы.
Так вот, в Chrome 123 добавили возможность задать специальный конфиг, в котором вы можете попросить браузер за какими-то ресурсами ходить только через сеть, за какими-то — через кэш, и так далее.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
urlPattern: "/form/*",
requestMethod: "post"
},
source: "network"
});
});
Тут в коде явно прописывается, что все POST-запросы по маске
/form/* должны идти мимо сервис-воркера. Не тратим время на бесполезную обработку, идём сразу в сеть.Почитайте в статье про все возможные значения. И самое приятное, что такой конфиг можно использовать как прогрессивное улучшение. Надеюсь, Workbox тоже реализует у себя такие фичи в скором времени, потому что в основном я пользуюсь им для настройки SW.
https://developer.chrome.com/blog/service-worker-static-routing
Chrome for Developers
Use the Service Worker Static Routing API to bypass the service worker for specific paths | Blog | Chrome for Developers
Find out how to use this new API, available from Chrome 123.
🔥31👍7🐳2
Железобетонные автогриды
Иногда возникает необходимость собрать такие гриды, где вёрстка идёт не от количества колонок, а от размеров ячеек. То есть мы хотим, чтобы ячейки были от какого-то размера до какого-то, а количество колонок под это подстраивалось бы.
Нильс Байндер по шагам собирает как раз такой CSS-компонент. Причём каждый шаг подробно объясняет. Полезно для тех, кто хочет разобраться в том, как работают
https://9elements.com/blog/building-a-rock-solid-auto-grid/
Иногда возникает необходимость собрать такие гриды, где вёрстка идёт не от количества колонок, а от размеров ячеек. То есть мы хотим, чтобы ячейки были от какого-то размера до какого-то, а количество колонок под это подстраивалось бы.
Нильс Байндер по шагам собирает как раз такой CSS-компонент. Причём каждый шаг подробно объясняет. Полезно для тех, кто хочет разобраться в том, как работают
auto-fit, функции max, min и minmax в контексте гридов и как создавать CSS-компоненты, которые всю магию держат внутри, а наружу отдают API в виде CSS-переменных.https://9elements.com/blog/building-a-rock-solid-auto-grid/
9elements
Building a Rock Solid Auto Grid
Combining finest craftsmanship with elegant design to ship innovative digital experiences.
🔥53👍8❤🔥5🌚2❤1
«По-настоящему красивые переходы средствами браузера»
Читал на Dump Spb доклад про то, как уже сейчас можно потихоньку внедрять View Transitions API и Scroll-driven Animations в ваши проекты для вау-эффектов. Показывал на демках, ссылался на статьи. Видео доклада опубликовали, теперь можно посмотреть.
Простите за звук, я никак не мог повлиять на его качество.
Видео: https://youtu.be/Dud0DozVwvo
Слайды: https://mefody.github.io/talks/pretty-transitions/
Читал на Dump Spb доклад про то, как уже сейчас можно потихоньку внедрять View Transitions API и Scroll-driven Animations в ваши проекты для вау-эффектов. Показывал на демках, ссылался на статьи. Видео доклада опубликовали, теперь можно посмотреть.
Простите за звук, я никак не мог повлиять на его качество.
Видео: https://youtu.be/Dud0DozVwvo
Слайды: https://mefody.github.io/talks/pretty-transitions/
👍35❤15🔥5👏4💯2⚡1
Компонент для отображения активности
Думаю, вы не раз видели компонент, который показывает активность в каком-нибудь сервисе. Самый популярный пример — активность коммитов в GitHub. Эдакая сетка с разноцветными квадратиками. Чем насыщеннее квадратик — тем больше в этот день было активности.
Марио Хаманн делится опытом, как он собирал клиентский веб-компонент
Все наработки доступны на GitHub и в npm, так что можно брать и подключать к себе в проект, если вам нужен такой компонент.
https://mariohamann.com/activity-graph-component
Думаю, вы не раз видели компонент, который показывает активность в каком-нибудь сервисе. Самый популярный пример — активность коммитов в GitHub. Эдакая сетка с разноцветными квадратиками. Чем насыщеннее квадратик — тем больше в этот день было активности.
Марио Хаманн делится опытом, как он собирал клиентский веб-компонент
<activity-graph>, адаптировал его под SSR, упаковывал в WASM. Интересный пример того, как прогрессивно улучшая что-то существующее прийти к решению, которое можно переиспользовать на клиенте, на сервере и даже в других технологиях (в статье пример с PHP).Все наработки доступны на GitHub и в npm, так что можно брать и подключать к себе в проект, если вам нужен такой компонент.
https://mariohamann.com/activity-graph-component
❤🔥21👍7🔥4🤩1🐳1
Как я могу помочь CSS развиваться
Периодически в подкасте «Веб-стандарты» мы обсуждаем всякие новые CSS-фичи. CSS-блогеры активно делятся демками с этими фичами, выпускают про них обучающие материалы, готовят доклады. Но я, например, не часто задумываюсь, откуда у людей, которые занимаются тем, чтобы новые фичи в принципе появлялись, берётся мотивация этим заниматься.
С внедрением в браузеры всё более-менее понятно. Часто здесь мотивация либо зарплатная (есть программист на ставке, который внедряет фичи из беклога), либо саморазвивающая (привлечение стажёров и студентов в открытые части проектов, опенсорс как получение опыта), либо самоутверждение в хорошем смысле этого слова (тот же опенсорс, но для закрытия какой-то своей потребности в участии в чём-то глобальном).
А что с придумыванием этих фичей? Есть комитет w3c, рабочие группы в нём: там некоторые занимаются фичами на зарплате, а кто-то — на энтузиазме. И вот среди энтузиастов есть люди и компании, которые очень сильно влияют на стандарты как качественно, так и количественно.
Мириам Сюзанн — как раз такой человек.
Никого ни к чему не призываю, но так как я сам спецификации писать не умею, а в браузере их реализовывать и подавно, то помогаю как могу. Буду донатить OddBird, которым сейчас нужны деньги на дальнейшую работу. Когда-то веб-разработчики всем миром собрали на атрибут
Хотите так же помогать развитию CSS — https://opencollective.com/oddbird-open-source.
Вообще советую поддерживать денежкой те инструменты, которые вам очень важны. Многие опенсорс-авторы выгорают, потому что после работы приходят делать классное для всего сообщества, а им в issues прилетает не благодарность, а баги и негатив.
Ну а если ваш путь — тот самый open source, который вы хотите делать своими руками, то вот вам видео выходного дня: Андрей Ситник ещё в 2019 году поделился опытом, как продвигать open source.
https://youtu.be/-CLm8bwwL_M
Периодически в подкасте «Веб-стандарты» мы обсуждаем всякие новые CSS-фичи. CSS-блогеры активно делятся демками с этими фичами, выпускают про них обучающие материалы, готовят доклады. Но я, например, не часто задумываюсь, откуда у людей, которые занимаются тем, чтобы новые фичи в принципе появлялись, берётся мотивация этим заниматься.
С внедрением в браузеры всё более-менее понятно. Часто здесь мотивация либо зарплатная (есть программист на ставке, который внедряет фичи из беклога), либо саморазвивающая (привлечение стажёров и студентов в открытые части проектов, опенсорс как получение опыта), либо самоутверждение в хорошем смысле этого слова (тот же опенсорс, но для закрытия какой-то своей потребности в участии в чём-то глобальном).
А что с придумыванием этих фичей? Есть комитет w3c, рабочие группы в нём: там некоторые занимаются фичами на зарплате, а кто-то — на энтузиазме. И вот среди энтузиастов есть люди и компании, которые очень сильно влияют на стандарты как качественно, так и количественно.
Мириам Сюзанн — как раз такой человек.
@scope, @layer, CSS Anchor Positioning, popover — все эти довольно революционные для CSS спецификации так или иначе дошли до браузеров благодаря OddBird — компании Мириам. Они ещё делают SCSS.Никого ни к чему не призываю, но так как я сам спецификации писать не умею, а в браузере их реализовывать и подавно, то помогаю как могу. Буду донатить OddBird, которым сейчас нужны деньги на дальнейшую работу. Когда-то веб-разработчики всем миром собрали на атрибут
inert. Я хочу таким образом двигать CSS вперёд.Хотите так же помогать развитию CSS — https://opencollective.com/oddbird-open-source.
Вообще советую поддерживать денежкой те инструменты, которые вам очень важны. Многие опенсорс-авторы выгорают, потому что после работы приходят делать классное для всего сообщества, а им в issues прилетает не благодарность, а баги и негатив.
Ну а если ваш путь — тот самый open source, который вы хотите делать своими руками, то вот вам видео выходного дня: Андрей Ситник ещё в 2019 году поделился опытом, как продвигать open source.
https://youtu.be/-CLm8bwwL_M
YouTube
Продвижение опенсорс-проектов / Андрей Ситник (Злые марсиане)
РИТ++ 2019
FrontendConf
Тезисы и презентация:
http://frontendconf.ru/moscow-rit/2019/abstracts/4784
Андрей Ситник, создатель популярных Автопрефиксера, PostCSS, Браузерлиста и Nano ID расскажет про свой опыт продвижения опенсорс-проектов.
Доклад будет…
FrontendConf
Тезисы и презентация:
http://frontendconf.ru/moscow-rit/2019/abstracts/4784
Андрей Ситник, создатель популярных Автопрефиксера, PostCSS, Браузерлиста и Nano ID расскажет про свой опыт продвижения опенсорс-проектов.
Доклад будет…
❤🔥29👍5🔥1
Полезные стили для кнопок
Дэвид Бушелл делится набором дефолтных стилей для кнопок, который он добавляет в свои проекты. И каждое свойство обосновывает.
-
-
-
-
Как обычно, почитайте внимательно, что даёт каждый из советов Дэвида. У любого свойства есть спецэффекты, их хорошо бы понимать прежде, чем внедрять в проект. Но в общем и целом набор интересный, себе в закладки добавил.
https://dbushell.com/2024/03/10/css-button-styles-you-might-not-know/
Дэвид Бушелл делится набором дефолтных стилей для кнопок, который он добавляет в свои проекты. И каждое свойство обосновывает.
-
touch-action: manipulation поможет отключить спецэффекты типа зума страницы по двойному тапу в мобильных браузерах.-
user-select: none выключит выделение текста кнопок (если нужно).-
::file-selector-button даст стилизовать кнопку выбора файла для <input type=file>.-
inline-size: fit-content — моё любимое, задаёт кнопке ширину по контенту, а не контейнеру.Как обычно, почитайте внимательно, что даёт каждый из советов Дэвида. У любого свойства есть спецэффекты, их хорошо бы понимать прежде, чем внедрять в проект. Но в общем и целом набор интересный, себе в закладки добавил.
https://dbushell.com/2024/03/10/css-button-styles-you-might-not-know/
dbushell.com
CSS Button Styles You Might Not Know
The one where I demo some lesser-known CSS for stylin’ buttons
👍53👏10❤9🤔2
Мгновенная валидация форм
Юлия Макарова делится рецептом, как сделать нативную валидацию форм без фреймворков. Сразу с продумыванием доступности. Как будто можно брать и копировать в свои пет-проекты как основу.
https://doka.guide/recipes/validation/
Юлия Макарова делится рецептом, как сделать нативную валидацию форм без фреймворков. Сразу с продумыванием доступности. Как будто можно брать и копировать в свои пет-проекты как основу.
https://doka.guide/recipes/validation/
Дока
Мгновенная валидация форм — Рецепты — Дока
На лету проверяем, правильно ли пользователь заполнил поля формы.
❤41👍18🔥6🤔1👌1
Тестирование HTML при помощи CSS
Ох, как я люблю такие элегантные решения. Хейдон Пикеринг рассказывает, как реализована библиотека REVENGE.CSS (именно капсом, иначе она не работает).
Суть в том, что многие HTML-конструкции можно легко проверить банальной проверкой атрибутов. А в CSS для этого всё есть. Ещё часть можно проверить вложенностью, и тут нас радует
1. Прямо в интерфейсе жутким шрифтом Comic Sans на розовом фоне выводим текстом предупреждение.
2. В DevTools в CSS-переменную записываем информативное сообщение об ошибке, чтобы его было видно при разработке.
Хейдон дополнительно использует новомодную директиву
В общем, кажется, я затащу эту библиотеку к себе в проекты и дотюню до своих требований. Многие рекомендации по доступности можно так реализовать довольно быстро.
https://heydonworks.com/article/testing-html-with-modern-css/
Ох, как я люблю такие элегантные решения. Хейдон Пикеринг рассказывает, как реализована библиотека REVENGE.CSS (именно капсом, иначе она не работает).
Суть в том, что многие HTML-конструкции можно легко проверить банальной проверкой атрибутов. А в CSS для этого всё есть. Ещё часть можно проверить вложенностью, и тут нас радует
:has(). Когда видим конструкцию, которая нас смущает, делаем две вещи:1. Прямо в интерфейсе жутким шрифтом Comic Sans на розовом фоне выводим текстом предупреждение.
2. В DevTools в CSS-переменную записываем информативное сообщение об ошибке, чтобы его было видно при разработке.
Хейдон дополнительно использует новомодную директиву
@layers, чтобы создать слой tests в проекте. Подключает его в самый низ слоёв, чтобы тестовые стили наверняка применились.В общем, кажется, я затащу эту библиотеку к себе в проекты и дотюню до своих требований. Многие рекомендации по доступности можно так реализовать довольно быстро.
https://heydonworks.com/article/testing-html-with-modern-css/
🔥42👍9❤5
Спеки-потеряшки на iOS
Шалана Доусон собрала замечательный по визуалу сайт, который на основе данных из caniuse показывает, какие спецификации не реализованы в WebKit для iOS, хотя уже есть в других мобильных браузерах (Chrome и Firefox).
Во-первых, это мило. Задумка в виде коробок с молоком, на которых напечатаны объявления о потеряшках, вызывает эмоции.
Во-вторых, можно сделать небольшую ревизию свойств и API, которые много лет по какой-то причине не реализуются в WebKit.
В-третьих, это просто красивый сайт для вдохновения. Сижу ковыряюсь в исходниках, изучаю, как синхронизируется вращение 3D-коробки и объявления на ней.
https://ios404.com/
Шалана Доусон собрала замечательный по визуалу сайт, который на основе данных из caniuse показывает, какие спецификации не реализованы в WebKit для iOS, хотя уже есть в других мобильных браузерах (Chrome и Firefox).
Во-первых, это мило. Задумка в виде коробок с молоком, на которых напечатаны объявления о потеряшках, вызывает эмоции.
Во-вторых, можно сделать небольшую ревизию свойств и API, которые много лет по какой-то причине не реализуются в WebKit.
В-третьих, это просто красивый сайт для вдохновения. Сижу ковыряюсь в исходниках, изучаю, как синхронизируется вращение 3D-коробки и объявления на ней.
https://ios404.com/
Ios404
The missing web features of iOS
❤24🔥13🎉4🤩1
Квантовая механика: 100 лет открытий за один час
Видео выходного дня. Доктор физико-математических наук Алексей Семихатов популярным языком объясняет, как устроен мир согласно квантовой механике. Люблю такие видео, которые ломают мозг, но при этом двигают вперёд.
https://youtu.be/4iAkAT7mhnw
Видео выходного дня. Доктор физико-математических наук Алексей Семихатов популярным языком объясняет, как устроен мир согласно квантовой механике. Люблю такие видео, которые ломают мозг, но при этом двигают вперёд.
https://youtu.be/4iAkAT7mhnw
YouTube
КВАНТОВАЯ МЕХАНИКА: 100 лет открытий за 1 час / физик Семихатов
Квантовой механика – самая точная теория из всех придуманных человеком. И самая сложная для понимания. В этом выпуске РЕВОЛЬТ.НАУКА вы узнаете о парадоксах квантовой реальности и попробуете вообразить невообразимое. А еще поговорим про мультивселенные, телепортацию…
👍30❤🔥4🔥4👏1🤯1🥴1🤣1
Игра Wordle на HTML и CSS
Очередное интересное применение возможностей CSS не для того, для чего он задумывался.
Скотт Джел попробовал реализовать игру Worlde без использования JavaScript. Вы можете помнить эту игру, она когда-то была на хайпе: есть 5 ячеек, нужно в них ввести буквы. Если буква правильная и на правильном месте, то клеточка закрашивается в зелёный. Если буква правильная, но не на том месте — в жёлтый. И если мимо — в серый.
Сначала Скотт реализовал только хардкорную версию, где нет жёлтых клеточек. Либо угадал полностью букву, либо нет. Для этого использовал комбинацию селекторов по атрибуту, псевдоклассы
Затем Скотт попытался реализовать всё-таки жёлтые клетки. Но как будто валидация по паттерну у инпута не умеет в сразу два паттерна: возможные значения и правильные значения. Если бы можно было задать три состояния, тогда получилось бы на чистом CSS. Но, увы, пришлось всё-таки добавить несколько строчек JavaScript, чтобы доделать игру полностью.
Понятно, что вряд ли вам пригодится такое решение в продакшене (хотя я для CTF на следующий год идейку записал). Но разобраться в каждом селекторе и всех применённых свойствах точно будет полезно, расширяет сознание немного.
https://scottjehl.com/posts/wordleish/
Очередное интересное применение возможностей CSS не для того, для чего он задумывался.
Скотт Джел попробовал реализовать игру Worlde без использования JavaScript. Вы можете помнить эту игру, она когда-то была на хайпе: есть 5 ячеек, нужно в них ввести буквы. Если буква правильная и на правильном месте, то клеточка закрашивается в зелёный. Если буква правильная, но не на том месте — в жёлтый. И если мимо — в серый.
Сначала Скотт реализовал только хардкорную версию, где нет жёлтых клеточек. Либо угадал полностью букву, либо нет. Для этого использовал комбинацию селекторов по атрибуту, псевдоклассы
:invalid и :valid, отслеживание фокуса и показа плейсхолдера. У меня сразу возникла идея, что можно было бы сделать генератор кроссвордов, которому не нужен JavaScript — принцип работы тот же.Затем Скотт попытался реализовать всё-таки жёлтые клетки. Но как будто валидация по паттерну у инпута не умеет в сразу два паттерна: возможные значения и правильные значения. Если бы можно было задать три состояния, тогда получилось бы на чистом CSS. Но, увы, пришлось всё-таки добавить несколько строчек JavaScript, чтобы доделать игру полностью.
Понятно, что вряд ли вам пригодится такое решение в продакшене (хотя я для CTF на следующий год идейку записал). Но разобраться в каждом селекторе и всех применённых свойствах точно будет полезно, расширяет сознание немного.
https://scottjehl.com/posts/wordleish/
Scottjehl
How would you build Wordle with just HTML & CSS? | Scott Jehl, Web Designer/Developer
A fun little form validation and CSS selector experiment
🔥14👍11😐4❤3