#статья дня

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

Передавать соотношение сторон можно через классы, конечно, но мы в 2023 году, так что будем использовать CSS-переменные (`--ratio: 4/3`). Дальше имеются два варианта:

1. Задать соотношение сторон всей строке через, удивительное рядом, складывание дробей: 4/3 + 2/3 = 6/3. Сразу можно понять, что минусов у решения достаточно.
2. flex-grow. Легко и просто.

Подробнее о решениях и ходе мысли в статье:
https://9elements.com/blog/building-a-combined-css-aspect-ratio-grid/

Флексы рулят, котаны :)

#css #grid #flex

#ссылка дня

Немного неожиданного контента хотите?

Не так давно открылся сайт DOTOWN с семью сотнями иконок в стиле 8-битных игр от дизайн-студии под руководством экс-дизайнера Nintendo:

https://dotown.maeda-design-room.net

Все изображения можно использовать бесплатно без ссылок, в том числе и в коммерческих проектах! Есть ряд ограничений.

Так что если вам за каким-то интересом понадобились восьмибитные иконки… ну может пет-проект у вас, вы знаете, куда идти.

Да, на японском. Но кого это вообще останавливало?

#icons #8bit #бородач

#статья дня

С чего начать построение своего веб-секвенсора?

Конечно же с изучения Web Audio и Web Midi API!

Статья Мэдса Стоуманна рассказывает не только о том, как сверстать свою MIDI-клавиатуру и потыкать в неё мышкой, чтобы послушать звуки, но и как подключить настоящую MIDI-клавиатуру и даже подсветить аккорды: https://blog.logrocket.com/exploring-web-audio-api-web-midi-api/

Ну и, конечно, сразу демо: https://codepen.io/stoumann/pen/ZEjjyEp

Есть у кого MIDI-синтезатор, кстати? Делитесь результатом!

#web #audio #grid #music

#автор дня

Ввожу новую рубрику! Ибо крутых авторов фронтенд-арта стоит отмечать отдельно. Мы уже обсуждали с вами создателей комиксов на чистых HTML/CSS и создателей CSS-арта вообще. Так же можно вспомнить Юрия Артюха и его великолепные WebGL-стримы.

Герой сегодняшнего поста — Julia Miocene (Юля Миоцен).

Итак, Юля делает прекрасные сюжетные анимации на чистом HTML/CSS а ещё она автор проектов https://keyframes.dev/ и https://www.pickles.rocks/

На каждую анимацию имеется видео с созданием и, собственно, кодпен. Вот, например, Зайцы с иллюстрации: https://codepen.io/miocene/pen/aPwrpw

Проработка деталей зашкаливает!

Канал Юли на YouTube: https://www.youtube.com/@julia_miocene/featured

А ещё есть совсем свежий стрим с Вадимом Макеевым, где процесс очень подробно объяснён: https://www.youtube.com/watch?v=ZhWdhMpJ8bs

Шикарное, короче :)

P. S. Мне тут подсказывают, что Юля также соведущая подкаста Веб-стандарты.

#css #art

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

Ох что я вам нашёл! Просто пушка.

Как вам отладка на мобильных устройствах? Ну только честно. По-моему — мучение.

Да, можно подключить телефон кабелем к телефону и пользоваться консолью настольного браузера. Можно купить доступ к Browserstack или аналогам и разруливать косяки на десятках устройств. Ах да, можно ещё воспользоваться эмулятором!

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

Зато есть Eruda! Встраиваемая консоль для мобильных браузеров: https://github.com/liriliri/eruda

Демо: https://eruda.liriliri.io/

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

В общем, забавная вещь! В какой-то момент может и выручить.

#js #devtools #mobile

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

А есть ли среди моих подписчиков школьники и студенты/аспиранты? Потому что то, что я нашёл, очень может пригодиться при подготовке различного рода рефератов, презентаций и научных работ.

И это — кто бы мог подумать, моя любимая тема — снова DSL для представления диаграмм! Но на сей раз, всяческого рода научных, от простых блок-схем до описания векторных полей и молекул!

Ну вот буквально, молекула на иллюстрации описывается простыми конструкциями вроде:

SingleBond(N2, C4)
SingleBond(C4, C5)
DoubleBond(C5, C6)

...и так далее. Прелестно же!

Короче, называется это всё Penrose: https://penrose.cs.cmu.edu/

Работает полностью в браузере, написано на TypeScript и открыто. Естественно есть биндинги к React.

Всем науки, котаны!

#dsl #diagram #science

#ссылка дня

Сложно давать ссылки на что-то поддерживаемое какой-нибудь компанией и не быть обвиненным в рекламе.

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

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

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

На помощь приходят подборки тестовых! Вот, например, от Хекслета: https://github.com/Hexlet/ru-test-assignments

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

Полезная штука, котаны. И не только для начинающих!

#work #assignment #list

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

Итак, что у нас сегодня? А сегодня у нас прекрасное. Презентация Ивана Акулова с конференции 3perf: React Concurrency, Explained.

React 18 уже давно с нами, SSG-компоненты нынче считаются чуть ли не дефолтом (я не очень с этим согласен, но уж как есть), useTransition, <Suspense>... Надо втягиваться же.

Сразу ссылка: https://3perf.com/talks/react-concurrency/

Рассмотренные топики:
1. React 17 и блокирующее выполнение
2. То же, но в React 18
3. useTransition()
4. <Suspense>
5. Проблемы

Демки тоже включены 🙂

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

#react #concurrency #suspense #бородач

#фишка дня

Элемент fieldset — штука со сложной судьбой. Вас никогда не удивляло, что тег, предназначенный, казалось бы, для группировки элементов — никогда для этого не используется? Почему?

Ну вот, например, Bootstrap 5: https://getbootstrap.com/docs/5.3/forms/input-group/

Там div, не fieldset.

Всё потому, что до недавнего времени комбинация fieldset+legend отрисовывалась виджетами ОС. Как, например, те же select и button. И даже flex-модель в них не работала правильно:

Баг Chrome (исправлено в 86)
Баг Firefox (исправлено в 46)

К счастью, это изменилось и использовать fieldset можно ровно так же как и другие элементы.

Тем более, что никто не отменял его одной очень интересной фишки: атрибут disabled будет отнаследован всеми вложенными элементами!

Вот так: https://codepen.io/alinaki/pen/NWLOPqy

Где это может пригодиться?

Очевидно, если есть группа кнопок для отправки формы, а обычно это submit+reset, но может быть и несколько submit-ов на разные адреса, можно не отключать их по одной, а просто положить в fieldset и отключить разом.

Ну или всю форму, при желании.

P. S. disabled дело не ограничивается, invalid тоже работает, введите что-нибудь в текстовое поле: https://codepen.io/alinaki/pen/VwGELwr

#fieldset #disabled #бородач

#баг дня

Итак, проблема известная с десяток лет: при автозаполнении полей форм Хром заливает фон поля цветом. Раньше жёлтым, сейчас — небесно-голубым (во всяком случае, на моём сетапе).

Так что же не так с этим поведением?

Ну, для начала, оно очень непросто отключается. А точнее, не отключается — можно только переопределить. А во-вторых, стоит вам поставить фоновую картинку на ваше поле, для, например, иконки — как Хром и её сотрёт. Вот, посмотрите сами: https://codepen.io/alinaki/pen/oNQyGjo?editors=1100

Повторю: поведение касается только автоматически заполненного текста.

Сразу скажу, что официально это багом не признано и разработчики Google Chrome вертеть нас всех хотели на своих won't fix-ах: https://bugs.chromium.org/p/chromium/issues/detail?id=46543

Какие у нас есть варианты? Вообще, несколько. Все — буквально хаки.

1. Установить атрибут autocomplete в "new-password" или в любое случайное значение. Отключит автозаполнение вообще.
2. Повесить слушатель на событие change поля и восстанавливать стили скриптом.
3. Убрать заполнение цветом можно через игры с transition, например:

input:-webkit-autofill {
  transition: all 9999s;
  transition-delay: 9999s;
}

...в кодпене выше так и сделано. Но картинке это никак не поможет, потому что background-image не анимируется.

На протяжении всех этих более 10 лет разработчики Chrome и WebKit вообще активно меняли способы заливки полей, поэтому вариантов обхода можно найти десятки. Вот только абсолютное большинство из них стало или бесполезно, или попросту неудобно.

Поэтому, дамы и господа, остаётся лишь один верный вариант: выносите иконку в отдельный элемент и размещайте поверх поля ввода. Победить это всё, кажется, возможным не представляется. По крайней мере, в рамках разумного 😔

#chrome #autocomplete #bug

#ссылка дня

Давайте раз уж обсудили проблемы с оформлением автоматически заполненных полей в 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.iss.one/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. Вот: https://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 #бородач