#til дня

Нечасто использую этот тег, TIL aka Today I Learned (сегодня я узнал).

Не потому что я всё знаю, а потому что такие штуки обычно или в заметки уходят, или в фишке. Редко что прямо шокирует сходу.

Итак, тема дня: CSS paint-order, порядок отрисовки.

И предназначено это самое правило для управления порядком применения заливки, обводки (контура) и маркеров в SVG и HTML.

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

По-умолчанию, обводка контура рисуется после заливки, но можно установить наоборот и получить эффект, как на иллюстрации: https://codepen.io/argyleink/pen/MWoeoKV

.paint-order {
paint-order: stroke fill;
}

Итого, контуры останутся только снаружи, а внутри всё будет залито.

Казалось бы, такая простая штука, а как забавно.

Поддержка очень хорошая: https://caniuse.com/mdn-css_properties_paint-order

Правда, как всегда, есть нюанс с Safari. Его алгоритмы теней чуть-чуть отличаются, но добиться нужного эффекта всё ещё можно, чуть-чуть поиграв с тенью.

#css #paint #order

#такое дня

Есть тут те, кто настолько погружён в интернациональные проекты, что приходится работать с вертикальным написанием?

Чтож, с Safari версии 17.4 вертикальным может быть не только текст (writing-mode), но и элементы управления!

Я понимаю, что абсолютному большинству это и в жизни не пригодится, но какая красота!

Статья от разработчиков WebKit: https://webkit.org/blog/15190/implementing-vertical-form-controls/

Кстати, так-то поддержка набирает обороты. В WebKit просто решили добить все элементы разом: https://caniuse.com/mdn-css_properties_writing-mode_vertical_oriented_form_controls

#css #cjk

#новость дня

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

Итак, какой-то никакой-то React 19 Beta!

Вокруг этого релиза было слишком много разговоров. И причина проста: React Compiler.

TL;DR: React Compiler это особый инструмент сборки кода на React, автоматически мемоизирующий нужные данные в нужный момент. Никаких больше раздражающих useCallback, useMemo и memo не требовалось бы.

Собственно, блог разработчиков: https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024

И нет, этого в релизе React 19 не будет. Почему-то все кругом решили наоборот.

А что будет? Да много всего: https://react.dev/blog/2024/04/25/react-19

Наборы хуков и API для Suspense это нечто потрясающее. Я крайне рекомендую посмотреть хотя бы на use и useOptimistic. С такими нововведениями, можно даже думать об отказе от React Query.

И давайте пройдёмся по руководству к обновлению:

0. react-test-renderer объявлен устаревшим! Теперь официально: используйте React Testing Library.
1. ref как проперти. Дождались!
2. Возможность обрабатывать ошибки разных категорий: пойманные ErrorBoundary и пропущенные им же.
3. Наконец-то удалены propTypes и defaultProps. Висели с 2017 года как Deprecated.
4. Удалён ReactDOM.render. Вот тут мне стало больно, но я выживу: я абьюзил эту штуку чтобы рендерить реакт-виджеты в легаси-части кода.
5. Удалён ReactDOM.findDOMNode (кому-то тоже будет больно, да)
6. Сборок UMD больше нет. Если вам очень нужно работать без сборки прямо в браузере — используйте сервисы вроде esm.sh. На канале был пост об этом сервисе.

В общем, изменений достаточно. Но сначала надо обновиться до 18.3.0 хотя бы 🙂

#react #javanoscript

#codepen дня

Если doomscrolling — то только такой!

https://codepen.io/cobra_winfrey/pen/oNOMRav

Работает только в браузерах, поддерживающих Scroll Timeline API. Это пока только Chrome, Canary и за флагом. Ну и полифиллы.

#css #scroll #animation

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

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

А единой документации по этим типам нет!

Точнее, не было, но теперь вышел https://tsdocs.dev/

Это система поиска по существующим пакетам с типами. Она установит нужный пакет, распарсит типы и JSDoc и отобразит в удобном формате.

К слову, котаны, что вы предпочитаете по cmd- (ctrl)-click в редакторе? Прыгать к имплементации, или к типам?

Я вот — к имплементации, прыгать к типам меня раздражает.

#typenoscript #dts #types #doc #бородач

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

Вы, конечно, все в курсе, что порядок подключения ресурсов сильно влияет на скорость отображения страницы, на TTI — время от начала загрузки до возможности работы со страницей. Но как конкретно? Как точно выяснить, в каком порядке и что загружать?

И вот тут нам поможет сниппет для DevTools под названием Capo.js: https://github.com/rviscomi/capo.js

Порядок применения:
1. Берёте capo.js, значит
2. Солите его блять Загружаете как сниппет в девтулзы: https://developer.chrome.com/docs/devtools/javanoscript/snippets/
4. ...
5. Наблюдаете диаграмму в консоли! Она отобразит текущее и желаемое положение вещей.

А кому охота подробностей, тому вот сюда, на эту презентацию Виталия Фридмана: https://youtu.be/uqLl-Yew2o8

#css #js #performance #бородач

#codepen дня

Маскинг зашёл слишком далеко! Вы только посмотрите, что можно сделать при помощи небольшого количества геометрии и градиентов!

И всё это на единственном теге img, без обёрток!

Сразу будет сказано: в Safari пока сам цветной кружочек не работает, даже в Technology Preview :( но это не значит, что нам нечего почерпнуть! Исправлено!

Ссылка: https://codepen.io/alinaki/pen/xxeoXjN (это форк пена от t_afif, но с более универсальным сдвигом аутлайна)

Небольшой разбор:
1. clip-path требуется только для ограничения области ховера, можно и без него
2. чтобы чётко расположить кружочек на окружности, требуется немного геометрии с извлечением квадратного корня из радиуса.
3. Оказывается, аутлайн можно двигать. К сожалению, в Safari пока не прокатило. Суть перемещения outline — как раз в том, чтобы разместить квадратик, обозначающий статус пользователя, на окружности.

Буду пробовать починить это дело в Safari, посмотрим, что к чему :)

Upd. я нашёл способ починить в Safari, сейчас подбираю значения. Потому основная ссылка сломана, смотрите оригинальную :)

Upd. 2 Я починил в Safari! Осталось понять аналитическое решение :)

#css #hack #mask

#фишка дня

А приходилось ли вам, котаны, плавно менять текст?

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

Причина, по которой это происходит, не уложится в один пост: это много-много математики цвета и режимов смешивания. Для такого у меня подготовлена вам целая статья: https://jakearchibald.com/2021/dom-cross-fade/

А фишкой же дня будет простое решение проблемы:

mix-blend-mode: plus-lighter;

И мерцания как не бывало. Особенно заметно на больших объёмах текста.

Пример: https://codepen.io/alinaki/pen/zYeVdgX

#css #blend #mix #color #бородач

#фишка дня

Итак, встала задача расширить элемент при наведении. Да ещё с каким-нибудь пружинящим дефектом эффектом. Что делать?

На самом деле, элемент мы физически не расширяем. Такова задача.

Один из первых вариантов, помимо манипуляции непосредственно размерами (что довольно тяжело при отрисовке) — это box-shadow. Но вот градиенты таким способом не нарисовать...

Потому у нас есть два варианта! Первый, от Adam Argyle (осторожно, видео из его твиттера и содержит крики на его же детей 😃) и от Temani Afif.

Итак, первый способ: использовать border-image и анимировать свойство border-image-outset.

Пример: https://codepen.io/argyleink/pen/abxgPKE?editors=1100

Второй, более очевидный, на самом деле — анимация clip-path, а точнее параметров функции inset.

Пример: https://codepen.io/t_afif/pen/BaEgEGa?editors=1100

Разница, кстати, имеется. В первом случае градиент нарисован border-image и прыгает вместе с ним, а во втором — буквально, обрезается.

Так что выбирайте тот, что вам по душе :)

#css #border #clip #animation

#статья дня

Моя любимая дизайн-система и набор компонентов React Aria получила очередное обновление!

1. Наконец-то появились подменю (submenu)! И как раз мы недавно рассматривали статью о том, как добиться стабильного открытия меню по ховеру, что движения мыши будут напоминать треугольник, вот всё учтено: https://react-spectrum.adobe.com/blog/creating-a-pointer-friendly-submenu-experience.html

2. 7 (семь!) разных виджетов для выбора цвета

3. Виджет для построения дерева (поддиректорий, например)

4. DropZone для перетаскивания файлов

5. Улучшенный тришейкинг — размер бандла сильно снизится.

В общем, крутейший выпуск. Ребятам из React Aria респект, работаем дальше :)

#react #ui #kit #aria

#шпаргалка дня

Уникальное предложение!

Берёте короче эту пирамиду код-ревью и ваши пулл-реквесты станут не только вкусными, но и полезными: https://www.morling.dev/images/code_review_pyramid.noscript

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

#pr #process #work #бородач

#статья дня

Из разряда прекрасного!

Чтобы понять как работает движок Flex в браузере можно попробовать его... написать :)

Не, кроме шуток. Я не знаю, как проходит сейчас обучение в школах, но у нас был Turbo Pascal и многим так и осталось более понятным рисование на холсте, нежели вёрстка.

Такие люди называются бакендеры.

Потому, давайте взглянем на пример реализации: https://tchayen.com/how-to-write-a-flexbox-layout-engine

Кстати, я объяснял своей жене недавно принципы работы Flexbox как раз практически картинкой с иллюстрации :)

Как бусы нанизать на нитку.

#flex

#видео дня

Вдогонку к посту про алгоритмы работы движка Flex-раскладки, позволю себе обнаглеть и приложить ещё и это видео: https://www.youtube.com/watch?v=RVnARGhhs9w

Называется буквально "How to render in WebKit".

Да, ему 10 лет, но 10 лет назад Flex уже был сформирован и даже прошли споры по первой версии Grid. Там определённо есть что почерпнуть.

На правах закладки, ага :)

#render #webkit

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

Товарищ прислал невероятное признание: он перешёл с комбинации ESLint и Prettier на... Biome!

Вот на этот вот: https://biomejs.dev/

Для тех кто не в курсе, Biome это реинкарнация самого амбициозного в истории тулчейнов проекта, Rome.js, целью которого было всё и сразу.

Затея Rome увенчалась своеобразным успехом: ребята собрали инвестиций и... всё. Почитайте, там очень интересно.

Так вот, давайте перейдём к Biome. Сразу слово моему товарищу, вы его уже знаете по проекту extended-fetch. Мои комментарии, как всегда, курсивом.

«Преимущества Biome:

- нет таких серьезных ломающих изменений как в ESLint (например сейчас, чтобы перейти на 9-ю версию с 8-й нужно проверить работу всех используемых плагинов и перенести вручную конфигурацию на новый формат)

Я не согласен, что это преимущество. Невозможно развивать ESLint без того, чтобы не разбить пару яиц. Никто не заставляет лезть сразу на 9.

- существенно выше производительность

Предстоит узнать, какой ценой.

- форматирование и проверка кода в одном инструменте (выигрыш как в производительности, так и в поддержке одного инструмента вместо двух)

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

- Лучшая поддержка сообщества

Как у Rome? :)

- JSON схема для описания конфигурации (не нужно лезть в документацию и изучать доступные параметры или их измененное именование)

- Отдельная команда biome ci для CI/CD процессов

Меня пока устраивает скорость, единый тулинг, простая миграция с еслинта и преттира, жисон схема для конфига».

Ваши мысли, котаны?

P. S. сегодня мы попали в список, вручную отобранный Виталием Зюзиным по критерию авторской подачи: https://news.1rj.ru/str/addlist/Z6Efi4jXwe9lODcy

Всем новоприбывшим привет, располагайтесь поудобнее.

#фишка дня

Лет так 15-20 назад, когда Интернет ещё был про документы и будущее веб-приложений только начинало формироваться, все кругом были озабочены темой типографики. Если ты не использовал один из множества инструментов-типографов — ты и не верстальщиком был вовсе.

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

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

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

А вот куда будем — так это в способы реализации.

Первый и очевидный, которым пользовались много лет назад и по сей день — это реализация на JavaScript: https://codepen.io/alinaki/pen/BaeBOBr

Рассчитываем положение строк, смотрим, нужно ли подвесить ту же кавычку и подвешиваем.

Второй способ — для выделения цитат или набоков-стайл прямой речи — это text-indent, идеально подходит, просто свешиваем первую строку на ширину символа: https://codepen.io/alinaki/pen/vYwBzBm

И самый современный вариант — это использование CSS-правила hanging-punctuation. Которое, к сожалению, поддерживается пока только в Safari (смотрим предыдущий пример, секцию supports).

Правда, Safari не будь Safari если бы не накосячили в текстовых полях, поэтому, если применяете правило глобально — отключайте его на формах.

Ну и, конечно, не стоит забывать о том, что висячая пунктуация на самом деле не очень прижилась в советской и пост-советской типографской среде, и сместилась в сторону оптического выравнивания. В таком случае, text-indent или JS-решение вполне себе ваш выбор.

#css #typography

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

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

И этот процесс было бы неплохо автоматизировать.

Да, в какой-то мере справляется dependabot, но не во всех компаний используется GitHub и хотелось бы получать сводки в любой момент. Ну а npm audit такая себе игрушка.

И тут у нас имеются прекрасные инструменты. Для начала, конечно же, база уязвимостей для Open Source библиотек: https://ossindex.sonatype.org/

Обратите внимание, речь не только про JS aka npm, в каталоге присутствуют практически все мыслимые среды и пакетные менеджеры.

Второй момент это тулинг. И тут от тех же Sonatype имеется пакет AuditJS: https://github.com/sonatype-nexus-community/auditjs

И расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=SonatypeCommunity.vscode-iq-plugin

Всем безопасной разработки, котаны!

#security #vulnerability #scan #audit #бородач

#баг дня

Кастомные скроллбары — штука прекрасная, хоть за 20 лет так и не нашедшая свой путь в стандарты. До сих пор полноценная стилизация возможна только в Blink aka Chromium и WebKit aka Safari.

В Firefox как не работало, так и не работает.

К слову, хорошая статья Ахмада Шадида на тему: https://ishadeed.com/article/custom-scrollbars-css/

Короче, суть бага: если вы решились таки стилизовать скроллбар, то не рассчитывайте, что Safari правильно применит стили по наведению мыши :)

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

Раз сработает, два сработает, а на третий — всё, нет. Смотрим видео, собственно.

Решение от Брамуса Ван-Дамма довольно забавное: нужно стриггерить инвалидацию стилей, для чего можно рандомной CSS-переменной присвоить неопределённое значение. Вот так:

.section:hover {
  --force-rerender: ;
}

Странные вайбы такие... IE-шные.

Короче, как будет ссылка на официальный багтрекер — закину.

Upd. Ссылка на багтрекер: https://bugs.webkit.org/show_bug.cgi?id=267575

#css #scrollbar #safari #bug #бородач

#статья дня

Плохо ли патчить глобальные методы? Казалось, что ещё со времён PrototypeJS и MooTools было понятно, что да.

Из-за них у нас String.prototype.includes() вместо String.prototype.contains().

Но так вышло, что аж три крупных проекта решили, что им-то всё можно :) И это React.js, Next.js и Bun.

Next.js и React.js оба патчили fetch. Причём, React по факту сделал это ради поддержки React Server Components, которые — сюрприз — на момент внедрения тоже были только в Next.

А Bun всё в тот же несчастный fetch добавил конфиг proxy.

Не будем углубляться в бизнес-решения, стоящие за этим, но React в итоге отказался от патчинга и ни в один релиз это так и не дошло.

Итак, статья по теме: https://kettanaito.com/blog/why-patching-globals-is-harmful

Выдержки:
1. Страдает поддержка
2. Теряется предсказуемость работы (особенно с тем, как это пытались сделать в React)
3. Предложенные API — они про решение бизнес-задач здесь и сейчас, но никак не про будущие процессы и обучение разработчиков.
4. Подобные решения — это лок на поставщика. Используете proxy в Bun — на ноду не слезете.
5. Если подобное внезапно наберёт популярность — как в случае с Prototype.js и MooTools, то уже спеку придётся подгонять под вендора.

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

#js #patch #fetch #react

#фишка дня

Одна из знаменитых проблем Safari на iOS — это утечка скролла. Условно говоря, показали вы модалку, скроллите её — а фон тоже скроллится. В Safari 16, впрочем, проблема была решена.

Тем не менее, модалками и overflow: hidden поведением проблемы со скроллом в разных браузерах не ограничиваются.

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

Я устал придумывать синонимы слову скроллить.

Так вот, уже достаточно давно существует свойство overscroll-behavior. Оно позволяет не только запретить цепочку событий прокрутки, но и отменить пограничные эффекты!

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

Демо: https://mdn.github.io/css-examples/overscroll-behavior/

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

Ах да, Safari... как обычно, поддержка только-только появилась, с 16 версии. До того приходилось мучаться.

В любом случае, свойство очень удобное, пользуемся.

#css #scroll #overscroll #бородач

#фишка дня

Валидация форм в HTML, мягко говоря, раздражает. Я даже не буду начинать о том, что все встроенные способы валидации или выглядят уродливо, или имеют странную логику.

Тем не менее, браузеры пытаются и много лет назад у нас появились селекторы :invalid и :valid.

Как несложно догадаться, они целятся в поле ввода, не соответствующее критериям и соответствующее критериям соответственно. Например, required.

Я сел на книгу с каламбурами, простите.

Казалось бы, вот оно, счастье! Пишем что-то такое:

input:invalid ~ .invalid-message {
  display: block;
}

...и получаем сообщение о незаполненном поле!

Ага, хрен там.

Прикол того же :invalid в том, что пустое, не тронутое пользователем поле, изначально не удовлетворяет заданным условиям! И сообщение будет висеть сразу, раздражая всех.

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

Что же делать?

Потребовалось всего 6 лет ожидания, чтобы в Chrome и Safari, наконец, появилось то, что в Firefox было все эти годы: концепция грязных полей в виде селекторов :user-invalid и :user-valid.

Почему грязных? Потому что их потрогал пользователь! То есть, совершил ввод.

Кроме шуток, это буквально самый настоящий термин для библиотек обработки форм, вроде того же react-hook-form, или Angular.

Есть ещё концепция touched, когда ввода не было, но произошло событие blur.

Я, чувствую, мог запутать... Давайте сразу к делу. Если вы до сих пор не прошли по ссылкам, то вот сейчас самое время пойти в CodePen с примером, который показывает разницу: https://codepen.io/alinaki/pen/NWJPvPE

Согласитесь, это уже похоже на удобную валидацию, котаны!

#css #validation #required #forms #бородач

#интерактив дня

А поделитесь своими самыми странными, стрёмными или вообще — просто запомнившимися собеседованиями.

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

На тот момент компания была маленькой и процессы были медленные. Кончилось тем, что меня пригласила на собеседование в Хельсинки другая компания, и нынешней я написал: «Так может уже познакомимся уже?». Отсылку поймут не все.

Ну и вместо трех этапов получился один, не считая скрининг. Правда, собеседовали 8 человек разом, включая CEO.

Ну и по ходу пьесы я просил перевод пары терминов у русскоязычных собеседующих…

А в ту компанию, которая, собственно, пригласила я не попал. Недостаточно senior оказался.

Давайте свои прохладные былины.