#ссылка дня

Давайте раз уж обсудили проблемы с оформлением автоматически заполненных полей в Google Chrome, напомним себе о существовании user agent стилей вообще.

Что такое user agent стили? Это, в общем смысле, стили браузера по-умолчанию, встроенные. Выходит, не бывает "сырых" сайтов: даже если файл с вашей таблицей стилей по пути потеряется, будут применены встроенные.

Ну самый яркий пример, это синие ссылки, становящиеся фиолетовыми после посещения сайта.

Естественно, этим не ограничивается. Даже пресловутые таблицы надо описать как таблицы (внезапно). Каждый браузер нынче считает своим долгом заодно как-то оформить поля ввода (календарики в поле даты, ага), стили фокуса и статуса валидности.

Их не назвать в общем и целом бесполезными, нет, но именно из-за них были придуманы концепции reset.css и normalize.css.

Итак, какие же существуют? Давайте по порядку.

Chromium (Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css

WebKit (Safari): https://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/html.css

Gecko (Firefox): https://searchfox.org/mozilla-central/source/layout/style/res/html.css

Serenity: https://github.com/SerenityOS/serenity/blob/master/Userland/Libraries/LibWeb/CSS/Default.css#L4

Mozilla Servo: https://github.com/servo/servo/blob/master/resources/user-agent.css#L9

Интересно смотреть, как стили Хрома и Вебкита тянутся ещё со времён KHMTL.

А что такое Serenity?

О, я ж выкладывал недавно. Это совершенно новый браузер для одноимённой экспериментальной ОС, выросший из простой библиотеки парсинга HTML. У меня даже получилось его под macOS собрать: https://t.me/htmlshit/1821

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

Но бахать на * (селектор всего) что-то вроде общего display: block; background: transparent; всё же очень не рекомендуется, слишком многое можно упустить.

#css

#фишка дня

Голубые галочки захватывают мир! Теперь и в вашей почте, котаны.

Впрочем, на скриншоте из почты можно увидеть не только голубую галочку, но и аватарку. Обычно GMail и иные почтовые клиенты ставят там портрет контакта, но тут-то откуда оно взялось?

Это называется BIMI: Brand Indicators for Message Identification и каждая компания может получить такой. Достаточно простого советского...

1. Логотип компании должен быть зарегистрированной торговой маркой. Не у всех это так, кто бы мог подумать.
2. Необходимо получить сертификат VMC. Процесс аналогичен получению сертификата SSL.
3. После логотип и сертификат вписываются в TXT-запись DNS, вроде:
default._bimi TXT "v=BIMI1; l=https://example.com/image.svg; a=https://example.com/image/certificate.pem"
4. ...
5. Вы великолепны и сверкаете голубой галочкой. В GMail и Apple Mail точно, дальше — больше.

В будущем требование регистрации торговой марки уберут, но вот сертификат всё равно получать придётся.

Пните своих CMO, котаны.

#web #bimi #logo #email

#такое дня

Наверняка у вас стоит дома Smart TV. От Samsung, LG и так далее.

Чем отличаются Smart TV от других платформ? Тотальными ограничениями на всё подряд! И ужасной документацией. И не всегда продуманным управлением...

Казалось бы, ну уж web-технологии нынче наверное как-то стабилизированы между современными устройствами? Тоже нет. Всё очень плохо.

И забавно наблюдать, как в Google выкрутились из этой ситуации.

Они написали браузер, который поддерживает только то, что необходимо YouTube TV! Вот, собственно: https://cobalt.foo/

В то время как у многих конкурентов просто HTML5/CSS/JS, Google поставляет целый браузер чтобы запустить всё то же самое! Большинство ОС для TV это всё равно так или иначе испорченный Linux, потому и тестирование становится более предсказуемым.

Чудные дела. Рынку разработки под умные телевизоры точно есть куда расти.

#tv #google

P. S. Я случайно удалил все комментарии к постам на канале. Поэтому они теперь привязаны к другому чату, а @htmlshitchat будет независимым.

#фишка дня

Чтобы задать анимацию появления какого-либо элемента на экране при загрузке страницы, добавлении элемента или обновлении DOM совсем не нужно городить сложных конструкций.

Достаточно проделать следующий трюк:

@keyframes appear {
from {
…whatever
}
}

Это анимирует объект в момент его появления из положения, заданного в анимации, в то, что указано в стилях.

Пример на CodePen: https://codepen.io/alinaki/pen/XWXORzM

Попробуйте обновить страницу и поиграться со значениями.

Спасибо Twitter-банде https://twitter.com/keyframers за эту находку.

#css #keyframes #animation #бородач

#статья дня

Если среди моих подписчиков есть те, кому за 30, то они могут вспомнить, что 8 и 16-битные игры на ЭЛТ-телевизорах выглядели совсем не так, как их нынче имитируют. Ни о каком пиксель-арте речи не шло, всё было достаточно смазано, чтобы казаться гладким и настоящим. А пиксель-арт, собственно, распространился с ЖК-экранами и модой на ретро.

А всё потому что из особенностей и недостатков технологии делали преимущество! Нативное сглаживание, бесплатно!

К чему это я?

К тому, что набор квадратиков на иллюстрации это самый настоящий шрифт, использующий особенности технологии построения ЖК-экранов. В 1 пиксель шириной. Он так и называется: Millitext. Вот: http://www.msarnoff.org/millitext/

Но статья дня всё равно о другом.

Как происходит процесс рендеринга шрифтов вообще, что за этим стоит и почему это так сложно. И да, особенности ЖК играют в этом не последнюю роль, потому и вступление такое: https://faultlore.com/blah/text-hates-you/

Text hates you, котаны!

#font #rendering

#til дня

Вот есть у вас какая-то библиотека, которой можно передать некие обработчики событий. Особенно этим славятся карусели, кастомные селекты и прочие т. н. плагины.

Почему плагины? Потому что многие из них или до сих пор являются плагинами к jQuery, или буквально вырасли из них. Так уж повелось.

И вот эти самые обработчики событий получают доступ к this, к инстансу объекта (функции, класса). Например, Selectize.js, покажем какой-то блок над селектом:

function onDropdownClose(value: string) {
    this?.$input.parent().find(‘.alert’).html(value);
}

$(‘select’).selectize({
    hideSelected: true,
    openOnFocus: true,
    onDropdownClose,
})

Куда нас пошлёт TypeScript с этим? Правильно, в «this implicitly has any type».

А что делать-то? Как указать тип this в методе?

Всё очень просто: начиная ещё с версии 2.0 для указания типа this его нужно передать как первый аргумент в функцию. Не бойтесь, остальные implicit аргументы оно не затрёт. Итого:

function onDropdownClose(this: SelectizeInstance, value: string)

И так же с любым конструктором объектов или функцией, принимающей коллбэки как аргумент.

Такой вот сумбурный TIL сегодня, да. Сразу можно увидеть, что у меня руки по локоть в легаси.

#typescript #бородач

#инструмент дня

Мы живем в мире, где каждый продукт дает лишь иллюзию выбора. Например, у вас есть выбор удалить все свои контакты из Telegram, или смотреть истории 🤡

Ладно, это я к чему. Если вы хоть раз делали свой продукт, всегда вставал вопрос онбординга пользователей. Простите мне мой французский, это уже устоявшийся сленг. Короче говоря, как дать пользователю ознакомиться с вашим продуктом, как показать все фишки. Неважно, что это — сайт, приложение или игра.

Какие-то продукты копируют интерфейсы уже существующих популярных решений, какие-то — используют вирусную схему распространения, обеспечивая армию тиктокеров работой. Ну а кто-то использует пошаговые визарды и руководства. И вот одно из таких решений — Driver.js.

Огромное количество вариантов отображения всплывающих подсказок-указателей, поддержка (точнее, универсальность применения) разных фреймворков и вообще удобный API.

Делайте понятные продукты, котаны!

#wizard #onboarding

Собрали советы от старшего исследователя MTS AI Аммара Али, выигравшего семь конкурсов по искусственному интеллекту, организаторами которых были Google, NASA, AI Journey. 

Итак, если вы хотите побеждать в международных соревнованиях по ИИ, вам нужно:

1. выбрать направление, в котором мы чувствуете себя увереннее всего;
2. начать участвовать в соревнованиях, не бояться и не думать, что это что-то невероятно сложное;
3. превратить конкурсы в свое хобби и почувствовать драйв от турниров по ИИ;
4. подавать заявку как можно раньше, чтобы больше времени было на подготовку; 
5. совершенствовать свое решение каждый день понемногу - так больше шансов, что к финалу подачи заявки вы будете одними из лучших.

Если хотите участвовать в соревнованиях по ИИ, готовить статьи для крупнейших научных изданий, приходите работать в MTS AI. У нас есть целый отдел фундаментальных исследований и еще крутые позиции для разработчиков. Вакансии смотрите по ссылке.

#фишка дня

Использовать адрес электронной почты вместо логина — тема популярная и очень давняя.

Вот только чтобы автоподстановка в браузере работала корректно, указывать значение атрибута autocomplete нужно не email, а username. Такие дела.

С паролем похожая история. На регистрации надо указывать new-password, а на входе — current-password.

Где же почитать подробнее про все эти правила? Вот тут: https://web.dev/sign-in-form-best-practices/

Ну и в спецификации: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute

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

#html #autocomplete #form #бородач

#статья дня

Как выделить абзац полоской на всю ширину экрана?

Да вот так: https://codepen.io/t_afif/full/LYQgPgM

Упорото, не правда ли?

Илья Стрельцын предлагает ещё более упорото: https://codepen.io/SelenIT/pen/bGLmGVq, да ещё и с градиентом.

Источник — тред экспериментов в Твиттере.

Но если серьёзно, как насчёт т. н. full bleed раскладки? Весьма модная в блогах и журналах: когда какой-то абзац или изображение (галерея) резко решают, что им надо занять всю ширину экрана.

И тут на выручку приходит Джош Комо: https://www.joshwcomeau.com/css/full-bleed/

Вообще, его способ, конечно, не единственный: https://css-tricks.com/full-bleed/

Я обычно первый способ из второй статьи использовал. Люблю магию.

И вообще, как такая раскладка по-русски будет-то?

#css #fullbleed #бородач

#инструмент дня

Итак, перед вами стоит задача сделать встраиваемый виджет. Любого рода, от плагина дашборда с показателями продаж до интерактивного баннера. Писать нужно быстро, эффективно, поддерживаемо. И чтоб размер поменьше.

Ванильный JS — мелкий размер, но поддерживаемо — вряд ли. React — один только DOM-слой займёт 40kB, Preact — 4kB, уже очень хорошо, Svelte свернётся в 1.6kB, но учить птичий язык шаблонов — это надо иметь причину...

И тут выходит VanJS со своими 0.9kB: https://vanjs.org/

Сразу пример кода:

const Hello = () => div(
  p("Hello"),
  ul(
    li("World"),
    li(a({href: "https://vanjs.org/"}, "VanJS")),
  ),
)

van.add(document.body, Hello())

Максимально нативно и понятно, не правда ли? И логика построения UI сохраняется. Есть управление стейтом, поддержка TS. Не нужно никакой сборки, садись пиши. Прекрасная документация, включая примеры от сообщества!

А его шаблонный движок вообще может быть использован отдельно. Назвали Mini-Van :)

#van #framework #js

#статья дня

Скорее даже заметка от Софии Валитовой о порядке применения трансформаций в CSS, но концентрация знаний зашкаливает. В чём же весь вопрос?

Как вы можете помнить, не так давно все современные движки браузеров стали поддерживать определение трансформаций не только в правиле transform, но и в индивидуальных. То есть:

transform: translateX(20px) rotate(40deg) scale(1.5);

может быть записано как:

translate: 20px;
rotate: 40deg;
scale: 1.5;


Но так ли это на самом деле? И да и нет. В первом случае порядок важен, во втором — нет, он всегда будет translate👉rotate👉scale. И, естественно, повторяющиеся правила будут схлопнуты.

Подробнее — в заметке Софии. Вообще у неё очень много полезного выходит, глубоко копает в спеки.

#css #transform

#такое дня

Thank you CSS!

P. S. соус

#заметка дня

Наглядное отличие алгебры от теории алгоритмов.

На КДПВ — паттерн и его алгебраическое решение.

В тексте ниже — аналогичный CSS:

li:nth-child(6n+4),
li:nth-child(6n+5),
li:nth-child(6n+6) {
color: red;
}

Выводов не будет, в тред приглашаются математики :)

#бородач

#грусть дня

Умер создатель редактора Vim — Брам Моленар (Bram Moolenaar) 😢

Вот собственно, сообщение его семьи: https://groups.google.com/g/vim_announce/c/tWahca9zkt4

Я использовал Vim много лет и, периодически, и сейчас. Хотелось бы этой грустной новостью напомнить, что это не только бесконечный источник мемов про выход, но и очень хороший редактор.

:wq!

#codepen дня

The next big thing после Scroll-driven animations в CSS это View Transitions.

Когда в предложении английских слов больше, чем русских.

О чем же речь? Ну, представьте себе, что вы сможете задавать элементам анимации не только на прямые воздействия, но и на изменение DOM или смену страницы в браузере. Какой элемент должен уйти совсем, какой — уступить своё место другому. И всё это — в CSS.

Яркий пример такого взаимодействия — сортировка. Благодаря Адаму Аргайлу у нас есть и демонстрация: https://codepen.io/argyleink/pen/rNQZbLr

В браузерах, которые не поддерживают View Transitions, элементы просто поменяют свои места. А в Chrome 111 и выше — с анимацией :)

Имеется статья в блоге разработчиков Хрома, с огромным числом примеров: https://developer.chrome.com/docs/web-platform/view-transitions/

Ну а мы с вами ещё вернёмся к ним, котаны. И сайты будут еще больше похожи на нативные приложения :)

#css #view #transition

#фишка дня

Давайте сегодня продолжим тему SVG.

Не знаю, скольким из вас вообще известно, как создаются простейшие SVG-анимации заполнения кривой (кстати, скольким?), но, зная длину кривой (контура, path), её заполнение легко можно анимировать.

Примерно вот таким образом: https://codepen.io/alinaki/pen/oNXjEzz?editors=1111

Как узнать длину кривой? Ну это можно посмотеть всё в том же кодпене: circle.getTotalLength().

Но я сегодня не про анимации хочу рассказать, а про более интересный случай использования полученной информации.

Например, как разместить что-либо по контуру кривой? Для простоты, сделаем бусы.

1. Нарисуем окружность.
2. Получим её длину
3. Найдём на окружности 15 равномерно распределённых точек используя getTotalLength getPointAtLength
4. Разместим 15 бусин-кругов по контуру.

Вуаля: https://codepen.io/alinaki/pen/eYPmayO

Такое можно и с текстом провернуть, кто первый? :)

#svg #path #length #бородач

#видео дня

Ох какую я вам мякотку нашёл, котаны! Только представьте как было бы круто иметь руководство по такому сценарию:

1. Тебе не нравится что-то на каком-то сайте.
2. Открываешь девтулзы, вешаешь слушатель изменения атрибута или контента ноды.
3. Включаешь дебаггер, находишь точное место.
4. Меняешь код, тестируешь.
5. Заменяешь файл на локальный.
...
6. PROFIT!

И по этому поводу я решил принести вам видео как починить Тwitter. Ой, простите, X. Ну нельзя же на канале совсем без хайповых тем!

Получилось прекрасное руководство, целый скринкаст.

Не сцыте менять мир как вам нужно, котаны!

#js #devtools #debug

#презентация дня

Раз уж я упомянул не так давно и Scroll-driven Animations и View Transitions API в одном сообщении, надо идти дальше.

Хорошо уже нам известный товарищ Ван Дамм, который Брамус, собрал всё в кучу. Он давно оседлал тематику скроллозависимых анимаций и теперь, с выходом Chrome 115, пушит максимально.

Итак, встречайте: Scroll-Driven Animations and View Transitions (2023.06.09 @ CSS Day)

Ну и сразу ссылку на видео: https://youtu.be/nFbuXdEU-oA

#css #scroll #view #transition

#фишка дня

Так, котаны мои хорошие, чтобы начать процедуру отладки, например, по клику на элементе, вам вообще не надо идти в Elements 👉 Event listeners, искать там click, искать нужный файл, или, ещё хуже, сразу начинать ковыряться в коде... Сейчас всё расскажу.

Открываем девтулзы, ползём в Sources, открываем в сайдбаре справа раздел Event Listener Breakpoints и выбираем событие click в ветке Mouse. Всё, вы прекрасны, все довольны.

Пользуемся 💝️️️️️️

#devtools #debug