#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.svg

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

#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://t.me/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 оказался.

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

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

Всё ещё испытываете проблемы с ветками в Git?

Not anymore!

Только сейчас открывая ссылку https://learngitbranching.js.org/ на вашем компьютере, вы получаете уникальную возможность научиться ветвлениям и слияниям в любимой системе контроля кода.

Или вы любите Mercurial? 🤔

#git #education #бородач

#статья дня

Музыканты тут? Хотите нотную запись на гридах?

Нет? А я принёс! Сходу: https://cruncher.ch/blog/printing-music-with-css-grid/

В общем, предыстория такая. Разработчик по имени Стивен Бэнд несколько лет назад реализовал генерацию нотного стана в SVG из JSON записи, но осознал, что правильный рендеринг этого дела слишком сложен, и отложил.

И тут до него дошло: раз всё равно всё делать в браузере, почему бы не сделать гридами?

Ну и пошло-поехало:

grid-template-rows:
    [A5] 0.25em [G5] 0.25em [F5] 0.25em [E5] 0.25em
    [D5] 0.25em [C5] 0.25em [B4] 0.25em [A4] 0.25em
    [G4] 0.25em [F4] 0.25em [E4] 0.25em [D4] 0.25em
    [C4] 0.25em ;

Дальше — больше. Итогом стал веб-компонент, генерирующий стан из записи аккордов:

0 chord D maj 4
0 F#5 0.2 4
0 A4  0.2 4
0 D4  0.2 4

Гитхаб тоже имеется: https://github.com/stephband/scribe/

Шикарное решение, интересный ход мыслей. Всем рекомендую к прочтению, даже если вы не музыкант

я тоже нет, но это так красиво! :)

#css #grid #music

#фишка дня

Как заставить элемент изменять свою ширину... ступенчато?

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

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

1. От Аны Тюдор: https://codepen.io/thebabydino/pen/zYbZpBq

Используем функцию модуля:

width: calc(95vmin + -1*mod(95vmin, 15px));

Но вот беда, в Chrome модуль пока не поддерживается... но не унываем! Есть ещё два варианта от Темани Афифа aka CSS Challenges.

2. Эффективное значение функции выше это, буквально, округление. Но так и такая функция в CSS имеется! Как-то так:

min-width: round(95vmin,15px);

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

Но... Chrome опять в обломе.

Да, и в первом и во втором вариантах на коне Firefox и Safari. Как я уже недавно писал, парни из Chrome взяли привычку реализовывать только то, что можно красиво оформить в пост. И реализовали тригонометрические функции, забыв про базу.

Потому нам ничего не остаётся кроме как...

3. CSS Grid конечно же: https://codepen.io/t_afif/pen/KKEXwmR

И секрет будет в правиле:

grid-template-columns: repeat(auto-fill, 15px);

Всем шахмат, котаны :)

#css #trick #math #бородач

#фишка дня

Если ваш конфиг ESLint до сих пор заставляет писать rel="noopener noreferrer" в каждой targer="_blank" ссылке, вы живёте в прошлом.

Потому что писать noopener не надо.

Этот атрибут запрещает установку свойства window.opener на открытое окно, таким образом, запрещая доступ открытого окна к открывающему.

Это уже 4 года как дефолтное поведение всех (нормальных) браузеров.

Ну а ставить ли noreferrer — чтобы узнать URL, откуда пришёл пользователь — дело ваше.

#eslint #security #anchor

#ссылка дня

Комиксы о веб-разработке должны быть нарисованы с помощью веб-технологий и точка! Всё остальное — ересь и подделки!

Во всяком случае, так считает автор блога Comicss: https://comicss.art/

Каждый комик-стрип на его сайте нарисован с помощью CSS и HTML. Буквально.

Потом, конечно, сконвертирован в webp/png, но к каждой картинке можно посмотреть исходный код.

Максимально забавный подход.

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