#статья дня

То тут то там можно услышать, что Google Chrome с 91 версии исправил что-то там в таблицах. А точнее, в их рендеринге. Но что конкретно?

А вот давайте и посмотрим, с примерами: https://www.bram.us/2021/06/21/tablesng-improvements-to-table-rendering-in-chromium/

Итак, по-порядку:

1. Ширина колонок наконец-то может быть в долях пикселей. 33.333px вместо 33px, 33px и 34px как было раньше.
2. TD/TH начали поддерживать writing-mode без дополнительных обёрток. Т. е. можно делать вертикальные заголовки и содержимое.
3. colgroup начал поддерживать схлопывание колонок (visibility: collapse).
4. Полноценная поддержка position: sticky на всех элементах таблицы.

К сожалению, в отстающих теперь Safari. Надеюсь, это ненадолго. У Firefox дела давно весьма хорошо.

Да и прогрессивное улучшение никто не отменял.

#css #table #sticky

#фишка дня

А вы знали, что тег video поддерживает субтитры?

Ну, допустим, кто-то знал.

А вы знали, что эти субтитры можно ещё и стилизовать?

Через псевдоэлемент ::cue. Буквальный перевод — реплика. Кто бы мог подумать.

А вот и пример: https://codepen.io/alinaki/pen/qBreeBK

Обратите внимание на переданные в стили реплик параметры v и c. Самые наблюдательные уже заметили: разным героям — разный цвет слов.

Так вот, субтитры должны поставляться в файле особого формата — WebVTT (Web Video Text Tracks). И уже внутри разметки субтитров можно указать голосовые отрезки — voice spans, выглядящие как самые обычные теги:

<c><i>[ evil laughter ]</i></c>

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

#html #video #subtitles #vtt #webvtt

#статья дня

Как правильно настроить фавиконку или изображение для закладки на таскбаре или экране мобильного телефона? Сколько файлов нужно, какого формата?

Можно бездумно воспользоваться инструментами-генераторами вроде https://favicomatic.com/

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

А для этого — вот отличная статья Андрея Ситника из Evil Martians: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

1. favicon.ico для старых браузеров
2. SVG с версиями под тёмную и светлую темы для современных браузеров
3. PNG 180x180 для устройств Apple
4. PNG 192x192 и 512x512 для Android-устройств

Всё остальное — или устарело, или просто оказалось ненужным в современных реалиях, об этом даётся справка.

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

#svg #png #favicon #touch

#codepen дня

Даже не кодпен дня, а коллаборация дня. Это моя любимая тема.

Автор A выкладывает концепт, автор B дополняет его. Автор C анимирует и добавляет интерактива.

Следите за руками:

1. При помощи правила -webkit-background-clip: text; можно сделать полосатый текст, просто наложив градиент: https://codepen.io/TajShireen/pen/YzZmbep
2. Градиент может быть и коническим: https://codepen.io/argyleink/pen/XWRWagg
3. Или анимированным, используя Houdini и пользовательские свойства: https://codepen.io/bramus/pen/abWbvXJ
4. А ещё можно заставить градиент следить за курсором, используя всё те же пользовательские свойства: https://codepen.io/bramus/pen/PomoJym

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

#css #houdini #gradient #clip

#статья дня

Не так давно по многим ресурсам катком прошлась статья про использование тригонометрии в вёрстке: https://tympanus.net/codrops/2021/06/01/trigonometry-in-css-and-javascript-introduction-to-trigonometry/

А точнее, там целый цикл, ссылки внутри.

Но они не применили ничего из этого в CSS-анимациях, хоть и привели пример на canvas. Так что пришло время расчехлить наше всё.

Вашему вниманию предлагается… прыгающая коробочка: https://codepen.io/alinaki/pen/GbxrwO

Если вы ездили поездами РЖД, она может быть вам знакома по их Wi-Fi порталу. Но там-то просто гифка, а тут — магия SCSS.

Я решил не использовать библиотеку math для SCSS и реализовал тригонометрические функции по известным алгоритмам, SCSS вполне себе позволяет такое.

Крайне рекомендую посмотреть скомпилированный CSS чтобы понять изначальный принцип.

Итого, «физически правильно» прыгаем по косинусу и пружиним по синусу :)

Школьная тригонометрия вам о таком использовании не рассказывала, уверен.

#css #trigonometry #animation

#игра дня

Ну что, обучающие игры у нас уже были: тарелки на флексах, лягушки на флексах, огород на гридах, tower defence на флексах, ну и сборники всего и сразу.

Давайте бахнем хардкором: https://css-challenges.com/

Ваша задача – повторить изображённое на экране минимальным числом правил. Есть обучающий блок. Все задачи поделены на уровни. Встречаются и крайне упоротые 👀

Коллекция пополняется, в том числе и сообществом. Есть прекрасный раздел Tips&Tricks в котором полно неочевидных фишек и сниппетов.

Дерзайте 🔥

P. S. было бы глупо не упомянуть заодно о https://cssbattle.dev/

Там, кстати, небезызвестный Илья Стрельцын в лидерах :)

#css #game

#фишка дня

TIL что можно получить список всех внутренних страниц браузеров. Ну знаете, этих chrome://flags, chrome://dino, edge://surf.

На самом же деле это всё — about:// страницы, просто переписываются каждым вендором. Попробуйте ввести about://flags.

А вот если ввести chrome://flags в Edge — он превратится в edge://flags. Гордые какие. Brave, кстати, тем же самым занимается.

Ладно, к делу: получить список всех страниц можно через about://about. Возможно, кто-нибудь найдёт там что-то экстраординарное.

Ну и на закуску: слеши можно не писать.

#chrome #edge #firefox #about #url

#статья дня

Неожиданно прекрасная статья о том, как делали сайты тогда: https://habr.com/ru/company/ruvds/blog/564300/

"Когда?", — спросите вы. "Тогда", — отвечу вам я. Потому что уж слишком долго IE6 задержался на олимпе браузеров и доживал своё ещё век.

В общем, автор решил повторить интерфейс Facebook теми средствами, что были доступны тогда. Под IE6, соответственно.

Получилось прекрасно, всплакнул.

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

Рекомендую. 11 из 10.

#ie6 #facebook #css #layout

#фишка дня

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

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

@keyframes appear {
   from {
       …whatever
   }
}

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

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

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

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

#css #keyframes #animation

#жизнь дня

Опаздываю с постом по простой причине: член команды (я не знаю как лучше перевести teammate) свалился с панической атакой 👀, а баги на мне никуда не делись.

Есть у меня теория, почему это произошло, будем думать, как избежать.

А через 15 минут у меня собеседование очередного соискателя из Португалии. Или Бразилии, я точно не помню уже, их много сейчас проходит.

Русский акцент это плохо, считаете вы? Вы не слышали португальского. Впрочем, это всё равно легче вьетнамского. Но ко всему привыкаешь.

Быть личинкой тимлида – сложно. Но не буду советовать вам избегать по-возможности. Это весело.

#work #teamlead

#заметка дня

Многие из вас наверняка используют CodePen. Кто-то потому что так требуют в чатах 👀, a кто-то — для развлечения. Тут я напоминаю вам про рубрику #codepen дня 🔥.

Но сегодня попробуем поговорить о том, как использовать в ваших экспериментах npm-пакеты. Ибо не всегда нужная библиотека есть на CDN, а копировать код целиком ну откровенно неудобно.

Давайте возьмём для примера sal.js: https://github.com/mciastek/sal

Что говорит документация? А говорит она нам: установите npm-пакет и импортируйте модуль.

Ну что же, давайте откроем настройки нашего кодпена (шестерёнка) и посмотрим на раздел JS. Там есть поиск по npm.

Как только вы ввели в поле название и выбрали нужный пакет, CodePen вставит в блок JS что-то такое:

import * as salJs from "https://cdn.skypack.dev/sal.js";

Это отличается от того, что в документации:

import sal from 'sal.js’;

И дело тут вовсе не в кавычках. А дело в том, что существуют разные форматы экспорта модулей из пакетов. Я рекомендую обратиться к учебникам: https://learn.javascript.ru/modules или https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/import

Но у нас тут не гвоздями же прибито, давайте просто исправим импорт:

import sal from "https://cdn.skypack.dev/sal.js";

И вот нужная функция импортирована. Остались стили.

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

Судя по документации, это каталог dist. Ну, давайте попробуем открыть через наш Skypack CDN: https://cdn.skypack.dev/sal.js/dist/sal.css

Надо же, стили нашлись. Опять открываем настройки кодпена и просто добавляем в раздел CSS этот адрес.

И вот готовый результат: https://codepen.io/alinaki/pen/RwVROKN

Если вы уже самостоятельно открыли ссылку на модуль: https://cdn.skypack.dev/sal.js, то могли заметить, что некая инструкция есть и там. Крайне рекомендую ознакомиться.

Например, можно просто найти пакет на самом https://www.skypack.dev/ и нажать на кнопку «Open in CodePen».

А вообще, не бойтесь экспериментировать и внаглую писать то, что ожидаете увидеть. Иногда оно так и работает.

#es6 #modules #javascript #scroll #animation

Кто догадается, о чём будет надвигающийся пост? :)

#заметка дня

Сразу с панча: не используйте input[type=“number”].

Он тащит за собой целый ворох проблем:

1. странно выглядит (ниже о том, почему);
2. плохо стилизуется;
3. не подчиняется стандартным атрибутам вроде maxlength (sick!);
4. имеет ARIA-роль spinbutton (ниже поясню, что это);
5. позволяет ввести e (10e9) и валидация даже не заикнётся;
6. в старых Safari и Chrome округляет введённые числа (например, номер кредитки) до мантиссы и экспоненты (по-моему, это уже конец);
7. во время ввода можно случайно нажать стрелку вверх или вниз (или даже тронуть колесо мышки на некоторых ос) и введённое число изменится.

Как видите, минусов немало. А откуда они вообще взялись?

А всё просто: input[type=“number”] создавался для имитации т. н. tally counter, ручного счётчика. Ну вы наверняка видели фильмы, где людей или скот считали надетым на палец устройством (см. иллюстрацию выше). Отсюда и ARIA-роль spinner (счётчик оборотов), и стрелки ввода.

Вот только числа с плавающей запятой или ввод мантиссы и экспоненты — это уже самодеятельность браузеров. Что приводит к идиотичным ситуациям вроде округления чисел.

Так что же делать?

А делать следующее:

<input type="text" inputmode="numeric" pattern="[0-9]*">

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

Да, это не предотвращает ввод чисел, только даёт валидацию. Но вы в любом случае должны задать нужное поведение вашей формы скриптом, от этого никуда не деться. даже с number.

За подробностями можно обратиться к блогу разработчиков официального сайта правительства Великобритании: https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/

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

Я помню подобное было у сайта kremlin.ru. И то в итоге почти все фишки исчезли со временем... Но мы отклонились от темы.

Подытожим: input[type=“number”] делался не для того, как его применяют.

Подумайте об этом.

#css #html #number #aria #semantics #a11y

#видео дня

Должен признаться, моё знакомство с TypeScript случилось вынужденно. Я до последнего избегал его, максимально соблюдая общую гигиену кода. Но как же легко становится, когда ты просто не можешь допустить ошибку типов, пока специально этого не захочешь.

У меня ещё есть огромный проект на работе на ES3 и перевести его на TS очень непросто, но очень хочется.

Так вот, совсем недавно Евгений Обрезков записал целую двухчасовую лекцию про типы в TypeScript: https://youtu.be/i03l0N5g7nE

И вот мне всего год назад чего-то подобного очень и очень не хватало.

Желательно иметь хоть какое-то понятие о том, что такое TypeScript и базовые типы вообще, ибо лекция построена по принципу велосипедостроения. Создавая свои типы для разных данных, вы сможете понять, зачем в TS введена та или иная сущность.

#typescript #types

#заметка дня

В чате вопрос возник: «А при каких условиях и на что нужно ставить role=“button”?»

Вопрос весьма разумный, ведь вроде как кнопка она и есть кнопка, button. Вот только не всё так просто.

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

Ссылка – это или переход к якорю на этой же странице, или же переход на другую страницу и только. Никаких a[href=“#”] с onClick, забудьте.

Остаются button, input[type=“button”] и input[type=“submit”].

Последние потомков внутри не предполагают и являются замещаемыми. Это значит, псевдо-элементов у нас тоже там нет. Впрочем, они вполне себе неплохо оформляются и как вещь в себе работают сносно: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button

И вот, button. Что же с ним может быть не так, что нам потребуется нечто с role=“button”?

Давайте с очевидного: валидатор запрещает иметь div внутри button.

Выражаясь языком спецификации, button ожидает фразовый контент, а не потоковый: https://caninclude.glitch.me/can/include/?child=div&parent=button

То есть речь идёт не только о div, а ещё о десятке тегов. В итоге официально вкладывать можно практически один лишь span. Наверное, это не всем и не всегда удобно.

Впрочем, браузеры такой трюк позволяют.

Но если вам не всё равно — добавьте role=“button” и tabindex на любой удобный вам элемент, чтобы превратить его в интерактивный. Валидатор и скринридеры будут довольны. А ещё старые Safari,  которые не умеют во flexbox на кнопках.

Мы у себя в дизайн-системе назвали такой компонент PlainButton, вот иногда ну надо.

Второй же случай посложнее.

Есть такой вид кнопок, toggle-кнопки. Переключатели. Это не checkbox, это не switch. Это просто что-то, что можно «зажать» сейчас и «отжать» потом. Например, кнопки в текстовом редакторе.

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

Почему это не чекбоксы? Потому что это не волеизъявление (согласие на что-то) как таковое, это просто некое действие, влияющее на что-то в приложении. Почему не свитчи? Потому что мы ничего не включаем физически. Кажется, об этих концептах стоит потом подробнее написать 😅

В общем, если вы подменяете логику работы кнопки с моментальной реакции на что-то иное вроде toggle, вам необходимо отдельно указать как минимум два необходимых атрибута: role=“button” и aria-pressed. Это же касается, например, кнопок открытия аккордеонов. Вот только вместо pressed нужно будет устанавливать expanded: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

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

#button #a11y #role #toggle

#работа дня

Итак, по моей вине новые пользователи нашего продукта не могли его запустить. Как это обнаружилось? Упало число запросов на пробную лицензию.

Что в этой ситуации плохо?

Плохо не то, что я допустил ошибку в коде. Плохо не то, что этот кусок кода практически невозможно протестировать. И даже не то, что этот PR прошёл ревью.

Плоха скорость реакции.

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

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

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

Естественно, будет встреча по поводу даунтайма. Естественно, придётся объяснять, что случилось.

Любая ошибка — это повод анализировать проблему, а никак не нервничать.

#work

#заметка дня

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

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

На это всё дело имеется спецификация: https://drafts.csswg.org/mediaqueries/#pointer

И конечно же можно посмотреть поддержку: https://caniuse.com/css-media-interaction

Ну и попробуем, почему же нет: https://codepen.io/meduzen/pen/BqwYgj?editors=1100

Кажется, прям хорошо. Но не совсем.

iPad Pro что в режиме стилуса, что в режиме мыши пошлёт вас куда подальше. А если вспомнить, насколько велико разрешение его экрана… в общем, вернётесь вы к медиазапросам с плотностью пикселей.

Но в целом, в 2021 году этим всем вполне уже можно пользоваться.

#css #media #stylus #touch #hover #cursor #mobile

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

Два моих в комментариях. Поддержите :)

Переключайте codepen из заметки в режим Full Page и делитесь.

#вопрос дня

Что браузер выведет в консоль?