#статья дня

Когда разработчикам браузеров заняться нечем, они... занимаются подсветкой текста.

Ладно, кроме шуток. Для некоторых задач подсветка текста поважнее будет, чем View Transitions API. Например, как вам текстовый редактор, который подсвечивает слова не путём создания тысяч элементов span, а с накладывая CSS прямо на текст?

А это ближе, чем кажется! И вот Брамус Ван Дамм написал большую статью, описывающую современное состояние Custom Highlight API. И, если коротко, фича уже вполне готова, чтобы создавать редакторы кода буквально на одном contenteditable элементе!

Собственно, что нам нужно?
1. Токенайзер — выделение значащих "токенов" в текста: зарезервированные слова, переменные, комментарии... В примере используется токенайзер из Prism.js
2. Генератор CSS для Custom Highlight API.
3. ...
4. Готово!

Вот статья: https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting/

Да, пока не без косяков, включая рандомные проблемы с производительностью, но работа идёт!

И пример для самых нетерпеливых: https://codepen.io/bramus/pen/MWxLjEo

#css #highlight

#заметка дня

Я часто вижу в профильных чатах вопросы типа: «Помогите, тут истерика, текст не занимает всю ширину контейнера и мой флексбокс не работает!»

Короче, происходит ситуация, как на картинке: кажется, что место справа никак не используется.

Ладно бы только начинающие такое спрашивали, но нет же. У всех дыры и паника, паника и дыры.

А суть в том, что рендер текста — это сложно. Рендер длинных слов — это очень сложно.

Потому браузер всегда выделяет для текста максимально возможную ширину. Неважно, ограничили ли вы её условиями флексбокса или установили max-width. Возьмёт всё и начнёт упихивать буквы и слова. Как сможет.

Пример расчётов можно посмотреть в серии статей Инлайновый контекст форматирования, раздел «Горизонтальное выравнивание».

Подсказка: он не сможет. И выделенное место не вернет.

А люди ожидают, что текст спокойно сдвинется вправо и у чекбокса будет больше воздуха. К сожалению, так не получится вообще никак.

Единственно, кажущееся разумным, решение — это заполнить всю предоставленную ширину, используя переносы (словарь или ­). Ну или word-break: break-all;

Есть ещё не очень разумные решения с использованием JavaScript для подсчета реально занимаемой ширины.

Вот три примера: https://codepen.io/alinaki/pen/ExrGRwL?editors=1100

Кстати, если кому реально интересно как работают алгоритмы Flexbox (вы же не думали, что это изобретение только для CSS? Во Flutter тоже они) есть прекрасная статья по поводу: https://tchayen.com/how-to-write-a-flexbox-layout-engine

Не паникуйте, ну.

#css #flex #render #бородач

#новость дня

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

8 лет назад мимо меня почему-то прошла тема, что ребята из Font Awesome собрали миллион долларов на разработку пятой версии своих иконочных шрифтов. Миллион, вместо планируемых 30 000. Этот рекорд, кстати, до сих пор держится.

Не в смысле рекорд кикстартера вообще, а в смысле рекорд среди поддержки софтовых проектов.

В чём отличие подобного сбора средств от простого инвестирования или бизнес-планов? Это свобода не только произвести некий платный продукт, но и вернуть что-то сообществу. И уж Font Awesome сложно упрекнуть в том, что они жадные.

Ну ладно, разве что чуток.

Так вот, к чему это я. Они вернулись!

Пару лет назад ребята взяли под своё крыло открытый проект UI-кита, основанного на веб-компонентах — Shoelace. И потихоньку его пилили. Почему потихоньку? Потому что путь веб-компонентов ко всеобщей поддержке и стандартизации весьма тернист. Одни только битвы YouTube с Firefox чего стоят.

И вот они решили повторить свой успех и резко собрать денег на выпуск третьей версии набора, превратив его в полновесную и конкурентоспособную дизайн-систему! Под таким скучным названием Web Awesome.

Естественно, обещан достаточно жирный бесплатный пакет, а в платном — плюшки вроде конструктора раскладок, тем, шаблонов... Причём, на каждые собранные 50к увеличивается число бесплатных плюшек.

Я это пишу в тот момент, когда сбор кончается. Как и 8 лет назад, прошло мимо моих радаров. Рекорда не случилось, но 700 000 собранных — это потрясающий результат.

Ну что, веб-компоненты захватят мир, или как обычно? :)

#ui #design #awesome

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

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

Напомню, мы уже знаем как правильно рисовать треугольники и звёзды. Пришло время всего остального.

Встречайте: https://css-shape.com/

Их там какое-то невероятное количество, некоторые, с вырезами, даже конфигурируются!

Меня особенно Stamp и Grid Lines восхитили. Просто и элегантно.

#css #shape #clip

#фишка дня

Как сделать вывод консоли красивеньким?

Очень просто, использовать спецификаторы преобразования!

Прямо как sprintf в Си, ну как вы можете этого не знать?

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

А делается это буквально так: https://codepen.io/alinaki/pen/PoXrejX

Для тех, кто по ссылкам не ходит, сокращённая версия:

console.info(
  "%c %cAdobe %cPhotoshop Web%c  %c2023.20.0.0%c  %c1bba617e276",
  "padding-left: 36px; line-height: 36px; background-image: url('data:image/gif;base64,R0lGODlhIAAgAPEBAAAAAPw==');"
)

Как можно догадаться, %c это спецификатор, указывающий, что сюда надо подставить CSS, переданный соответствующим аргументом.

Полный список спецификаторов есть на MDN.

Красота спасёт мир, котаны!

#console #js #sprintf #бородач

#video дня

В продукте, с которым я работаю, в качестве решения для стора используется Effector: https://effector.dev/

И, честно говоря, под него надо немного ломать мозг. То есть, базовые атомарные сторы с событиями на нем делаются так же просто, как и в этих ваших модных Reatom, Jotai, Zustand и так далее. Но когда ты открываешь для себя мир гардов, сэмплов и, какая неожиданность, эффектов — вот тут начинается всё самое интересное. Хотя и не без проблем, о них в соответствующем посте.

Так вот, автор Эффектора — Дмитрий Болдырев — очень много времени уделяет попыткам визуализировать архитектуру приложения и логики всех связей внутри него. Конечная цель — получить самые крутые девтулзы для отладки сторов на свете.

А пока результатом этого стала презентация на HolyJS в этом году. Посвященная, собственно, визуализации архитектуры приложения вообще. Кто, как, когда пытался. Инструменты и результаты:
https://www.youtube.com/watch?v=fWwC45TYxkA

#effector #conference #architecture

#фишка дня

Щас открою секрет. Чтобы не страдать от разработки, надо научиться отлаживать программы? Филологи — молчать!

Поднимите руку те, кто дебажит через console.log(var) 🙋

А надо не так.

Надо открыть девтулзы, в них — исходный код. И там просто нажать «Add logpoint…» на строке. Вуаля. Никаких тебе ожиданий сборки.

#debug #devtools

#фишка дня

Я всегда считал карту кода достаточно бестолковой фишкой. С другой стороны, TODO-комментарии и ошибки достаточно легко распознаваемы и перемещаться по ним удобно.

А сегодня я узнал, что блоки кода можно ещё и помечать комментарием // MARK: Something, и этот самый Something будет виден на карте.

В идеале, конечно, не стоит развозить свой код на несколько экранов, но прежде чем разбивать — надо ж распознать, верно? :)

#vscode #minimap

#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