#статья дня

В заметке про работу с отменой запросов в React Query я лишь косвенно упомянул такую потрясающую штуку, как Abort Controller.

Зачем он вообще нужен?

Можно перестать слушать события, отменить ненужный запрос на сервер (и даже в девтулзах он пометится как canceled), отменить транзакцию, отменить вообще всё, что отменяется, да ещё сделать это стандартным способом!

Документация на MDN крайне скудна и не описывает и половину вариантов применения. Поэтому, нужно что-то ещё.

Про отмену событий мы уже писали, про React Query я упомянул выше... так что давайте для остальных примеров возьмём свежую статью Артёма Захарченко: https://kettanaito.com/blog/dont-sleep-on-abort-controller

1. Уже ставшие классическими примеры отмены событий и запросов
2. Отмена чего угодно вообще
3. AbortSignal.timeout для отработки, внезапно, таймаутов
4. AbortSignal.any для ситуаций, когда сигнал может поступить от разных контроллеров.

Учитывая, что для работы с Google AppsScript API у меня имеется самописный преобразователь коллбэков в промисы, мне и самому стоит дополнить реализацию поддержкой Abort Controller.

Так что статья как раз вовремя.

#javascript #abortcontroller

#статья дня

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

А что делают тяжёлые компоненты? Правильно, блокируют нам весь UI! И в этот момент мы понимаем, что же за конкурентный режим рендеринга такой, о котором постоянно твердят авторы...

Итак, чтобы вынести рендеринг в неблокирующий режим, в React имеются два хука: useTransition и useDeferredValue. И сегодня речь пойдёт о первом.

Конечно, можно просто посмотреть видеоиллюстрацию от Алекса Сидоренко, но и документация очень даже исчерпывающая: https://react.dev/reference/react/useTransition

Выглядит интересно? Не то слово! Но...

Всегда есть но :) Это же React. И господа-авторы на странице документации максимально схитрожопили (я не нашёл слова лучше), использовав мемоизацию на странице медленного компонента, и не пояснив, зачем.

А ведь без неё возврат из тяжёлого компонента на лёгкий будет происходить ровно так же медленно, как и переход на тяжёлый компонент!

Зато без блокировки. Гении, не иначе.

И по этому поводу имеется статья Нади Макаревич: https://www.developerway.com/posts/use-transition

Я очень рекомендую её прочитать и прокликать примеры. И в комментарии тоже загляните — там описаны варианты решения проблемы без мемоизации.

В интересные времена живём.

#react #concurrent

#фишка дня

Да неужели! Да ну наконец-то!

Уже сколько нас кормят тем, что уже давно можно смело нативно валидировать формы, а нормального менеджера состояний в девтулзах так и не было. Пойди выставь что-то отличное от focus :)

Теперь же можно не только использовать тот же :user-valid, но и форсить его в девтулзах!

А ещё есть юзер-инвалид: https://www.tg-me.com/htmlshit/2760

Начиная с Chrome 129.

Вообще, секция про девтулзы — буквально моя самая любимая в блоге разработчиков Chrome: https://developer.chrome.com/blog/new-in-devtools-129

#chrome #devtools

#такое дня

Есть у меня некое предубеждение к продуктам, которые распространяются через инфлюенсеров. Как, например, браузер Arc.

А когда есть предубеждение, стараешься невольно найти подтверждение своим опасениям.

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

Или что концепция бустов, Boosts — это когда кто-то может сделать свой набор скриптов и правил для изменения поведения любого сайта — звучит как встроенный MITM?

Man in the middle, если что. Это вот: https://en.wikipedia.org/wiki/Man-in-the-middle_attack

И ведь так и оказалось! Автор xyzeva (я только знаю, что зовут её Ева) опубликовала результаты исследования безопасности Boosts и смогла воспроизвести атаку с подменой авторства буста на любое нужное ей.

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

Вот, почитайте: https://kibty.town/blog/arc/

TL;DR: они использовали Firebase максимально наивно.

Даже если не интересуетесь инфобезом, там прекрасная кошечка бегает за курсором.

Arc признали существование уязвимости, выкатили об этом пост и выплатили автору вознаграждение: https://arc.net/blog/CVE-2024-45489-incident-response

По счастью, предположительно никто не пострадал.

В общем, внимательно рассматривайте продукты, которые предлагают всё и сразу, just call my toll free number.

#security #browser

🚀 ИТМО назвал компании, которые активно развивают Open Source в России

Участники оценивались по количеству опенсорс-проектов в сфере ML/Data, их популярности, качеству репозиториев и активности контрибьюторов.

Лидером рейтинга с лучшими результатами стал Яндекс. Среди наиболее популярных решений:

CatBoost — библиотека для градиентного бустинга на деревьях решений, используемая для ускорения работы алгоритмов.
YTsaurus — мощная платформа для хранения и обработки больших данных, востребованная в различных отраслях.
YDB — отказоустойчивая распределённая SQL база данных, обеспечивающая высокую доступность и масштабируемость.

Также в топ вошли Сбер и Т-Банк, а в академической среде ИТМО, ВШЭ, МФТИ и Сколтех.

Подробности исследования на Хабре.

#статья дня

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

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

Да и вообще, интересно последить за ходом мысли при выборе технологий, поэтому, вот: https://www.joshwcomeau.com/blog/how-i-built-my-blog-v2/

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

Очень крутая работа, на самом деле.

#react #next #blog

#фишка дня

А заодно поддерживающая #статья.

Итак, анимация height до auto-значений!

Я не могу написать «я джва года ждал», потому что лично я ждал больше 12 лет!

Да, у нас была анимация min-height (максимально мерзко выглядящая). Да, год назад нам дали анимацию гридов, что скрашивало существование, но заставляло добавлять лишние обёртки.

И вот оно, свершилось! В Google Chrome 129 появилось свойство interpolate-size: allow-keywords, дающее возможность, полностью сохраняя обратную совместимость, включать интерполяцию контентозависимых свойств узлов до auto!

В них входят: width, height, min-content, max-content, fit-content и так далее.

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

Кодпен с иллюстрации к посту: https://codepen.io/alinaki/pen/abezWpO

Только посмотрите, как просто:

:root {
  interpolate-size: allow-keywords;
}

p {
  transition: 1s;
  overflow: hidden;
}

p:not(:hover) {
  height: 5lh;
}

Да, мне ещё очень нравится единица измерения lh aka line-height. Ну просто красота.

И обещанная статья из блога разработчиков: https://developer.chrome.com/docs/css-ui/animate-to-height-auto

Будущее здесь, котаны!

#css #height #animation #auto

#рекомендация дня

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

Есть ребята из компании 53xapps, занимаются созданием сайтов и автоматизацией бизнеса. Ну и вот они решили запилить свой собственный курс по Frontend разработке.

Конкретно: введение в алгоритмы, HTML/CSS, JavaScript и Vue.js.

Разработка курса заняла около полугода. Большое количество видео и практики.

Подход к обучению немного отличается от других курсов: сперва несколько уроков вас учат понимать алгоритмы и рисовать блок-схемы. После этого обучение становится более осмысленным.

Курс довольно плотный, тестовые студенты проходили его по 15-20 часов в неделю 4 месяца, но сейчас есть возможность проходить курс в спокойном собственном темпе. Все для вас 🙂

Освоите JavaScript, HTML/CSS, Vue.js. Познакомитесь с несколькими популярными библиотеками. Для старта во фронте вполне достаточно.

Есть несколько бесплатных уроков, можно попробовать и пощупать.

Итак, цена. 5000 рублей. А подписчикам канала промокод HTMLSHIT даст 1000 рублей скидки.

Программа курса и бесплатные уроки доступны по ссылке.

#frontend #HTML #CSS #JavaScript

#codepen дня

К посту про interpolate-size: allow-keywords и о том, что теперь можно анимировать высоту, отлично подойдёт сегодняшний кодпен от Адама Аргайла.

Демо: https://codepen.io/argyleink/pen/BaXyJRL

Этот же кодпен является прекрасной иллюстрацией, что ничего не случится, если анимации не будет (а не будет её в Safari и Firefox).

Кстати, там же можно увидеть применение селектора :user-valid, а именно, концепции грязных полей: чтобы показать поле пароля в первый раз, надо сойти с поля ввода имени, blur; но после этого поле считается грязным и ввод пароля появляется моментально.

Грязное — потому что пользователь потрогал. И наверняка, немытыми руками.

Ну чо вы начинаете, это известный концепт почти во всех библиотеках работы с формами. Вот в React Hook Form, например.

Если кто-то не понял, что происходит в кодпене, есть поддерживающая статья: https://nerdy.dev/interpolate-size

#css #animate #height

#статья дня

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

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

И теперь пришёл черёд углов: https://verpex.com/blog/website-tips/how-to-create-shapes-with-inner-curves-using-css-mask

И реализовано всё на CSS Mask: https://developer.mozilla.org/en-US/docs/Web/CSS/mask

Описываете маску, накладываете на фигуру — красота.

.shape {
  --r: 25px; /* the radius */
  --s: 40px; /* the size of the cut */
  
  --_m:/calc(2*var(--r)) calc(2*var(--r))
    radial-gradient(#000 70%,#0000 72%) no-repeat;
  mask:
    right calc(var(--s) + var(--r)) top 0 var(--_m),
    right calc(var(--s) + var(--r)) var(--_m),
    radial-gradient(var(--s) at 100% 0,#0000 99%,#000 101%) 
     calc(-1*var(--r)) var(--r) no-repeat,
    conic-gradient(at calc(100% - var(--s) - 2*var(--r)) calc(var(--s) + 2*var(--r)), #0000 25%,#000 0);
}

Собственно, это весь код, дальше только параметры менять.

Как описать — прочитаете в статье. И да, геометрии 8-9 класса там достаточно :)

#css #figure #mask #clip

#фишка дня

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

Вставляете этот контейнер в какой-нибудь флекс или грид и получаете... херню получаете, потому что содержимое вашего контейнера подчиняться внешнему флексу или гриду и не собирается.

Но есть решение! Правило display: contents буквально развернёт контейнер и предоставит внешнему потоку полный контроль над компонентами внутри. Это реально самая мозговзрывающая вещь на сегодня.

Демо: https://codepen.io/alinaki/pen/abeOjKw

Статья на тему от Ахмада Шадида: https://ishadeed.com/article/display-contents/

Пугаться данных на caniuse.com не надо: смотрите сноску о доступности.

Не рекомендую разворачивать таким способом значащие элементы вроде кнопок, таблиц, заголовков. А вот дивы — милое дело.

Да, ваш любимый TailwindCSS тоже в курсе: https://tailwindcss.com/docs/display#contents

Спасибо Весу Босу за напоминание об этом.

#css #display #contents

#такое дня

Я не плачу, это дождь.

И ref в пропсах.

Запись в блоге разработчиков React: https://react.dev/blog/2024/04/25/react-19#ref-as-a-prop

Кодмод, пока нет официального: https://codemod.com/registry/react-19-remove-forward-ref

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

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

Вот, например, плавный полукруглый "кусь", подобный тому, что описан в статье: https://css-shape.com/inner-curve/

При этом, кстати, вырезание круга с "острыми краями" происходит сильно, сильно проще: https://css-shape.com/circle-cut/

Крутейший инструмент.

#css #mask

#ссылка дня

Немного неожиданного контента. Скорее, для личного пользования, но вдруг кому зайдёт.

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

И тут я вспомнил, что не кто иные как BBC выложили на днях свою библиотеку звуков в свободный доступ: https://sound-effects.bbcrewind.co.uk/search?cat=Machines

Какое-то невероятное количество просто.

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

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

Я честно не знаю, зачем и в какой ещё момент это может понадобиться лично мне — но звук падающей в слот монетки поставлю на оценку задач на backlog refinement :)

#sound #content

#ссылка дня

Олды тут?

Когда я начал официальную рабочую карьеру как верстальщик, в 2006 году, не было в интернете ресурса круче по CSS чем http://cssplay.co.uk/

И что-то мне подсказывает, что и нет.

Автору уже тогда было под 60, сейчас 75, но он фигачил и фигачит потрясающе сложные и при этом простые для понимания примеры вёрстки.

В 2009 году, например, в моде были выпадающие мега-меню, у него десятки их примеров. Естественно, без хаков для IE6 тогда не обходилось вообще ничего. Before, after? Забудьте. Flex? Забудьте. Float во все поля.

Коллекция меню поражает воображение. И до сих пор обновляется!

Раскладки на любой вкус и браузер. Всё категоризировано. Тоже обновляется!

Ну и он один из первопроходцев игр на CSS: https://cssplay.co.uk/menu/cssplay-connect-four-game.html

Да, без JavaScript, вся логика — HTML, CSS и ваши клики мышкой или ввод с клавиатуры. Расскажите мне теперь, что вёрстка — не программирование, вперёд.

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

Не старейте, котаны.

#бородач

#codepen дня

Как сделать элементы интерфейса... зернистыми? Напоминающими шершавую структуру, например, пластика? Или плёнки...

Для достижения эффекта можно воспользоваться SVG-фильтром! Например, от Аны Тюдор: https://codepen.io/thebabydino/pen/MWBNrZq

К сожалению, на Safari съехали буквы, но сути дела не меняет :)

#svg #grainy

#заметка дня

Не так давно я коротко обозревал браузер Ladybird, написанный с нуля и представляющий собой интересный феномен one-man band.

На самом деле, новых браузеров больше одного. Но не сильно :)

Например, Flow, разработчики которого случайно сделали браузер, пока делали демо-приложения под умные телевизоры. Просто в какой-то момент им потребовался быстрый и простой парсер SVG. Кстати, доступны публичные сборки, но только для Raspberry Pi. Разработчики пишут коммерческий продукт и пытаются избежать лишних сравнений.

Так вот, есть ещё один. Servo. Если у вас сейчас на подкорке памяти что-то зашевелилось, вы правы: судьба Servo плотно связана с браузером Firefox.

Много лет назад казалось, что весь Firefox перепишут на тогда только зарождавшийся язык Rust, который компания Mozilla и создала. Именно такие вайбы исходили от их тогдашнего CEO — Брэндана Айка. Да-да, создателя JavaScript. Но речь не о нём.

В итоге, что же произошло? Ведь Firefox так и не переписан на Rust целиком. Проект провален?

Вовсе нет!

Хотя кажется, что Mozilla отказалась от Servo, продолжив с Gecko, это не совсем так. Полная замена никогда не была целью.

Создать браузер, полностью совместимый со всеми стандартами и особенностями веб-сайтов (прошлого, настоящего и будущего), почти невозможно. Google не начинала Chrome с нуля, а фактически сделала форк открытой части Safari — WebKit. А тот в свою очередь — форк движка KHTML.

Microsoft потратила более миллиарда долларов на создание Edge и допиливание Internet Explorer, но в итоге сдалась и использует движок Blink, из Chrome.

По факту сейчас существует только три крупных независимых движка: Webkit (Apple), Blink (Google) и Gecko (Mozilla). Запустить новый проект с нуля — слишком дорого для некоммерческой организации, такой как Mozilla.

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

В итоге Rust стал важной частью экосистемы Mozilla и активно используется в её кодовой базе. Он помог упростить и обезопасить важные части Gecko, сделав их доступнее для сторонних разработчиков.

Тут стоит напомнить, что история Firefox своими корнями уходит в Netscape, а это уже что-то из середины девяностых.

Так что же конкретно в Firefox из Servo?

Движок CSS — Stylo, поддержка протокола HTTP/3 тоже стала возможной лишь с интеграцией сетевого слоя Neqo (название созвучно с Necko, а Necko — это Network Gecko).

А теперь то, ради чего писалась эта длинная заметка. Сам Servo никуда не делся и также развивается как самостоятельный проект! Вот, репозиторий более чем живой: https://github.com/servo/servo

Как и сайт: https://servo.org/

Более того, он прекрасно собирается прямо из транка репозитория! На иллюстрации к посту — браузер, собранный на моей машине. Собрался вообще без каких-либо проблем.

Работает, правда, довольно медленно в смысле отрисовки: пока что никакого GPU-ускорения нет, но это не в приоритете проекта. Ladybird в этом отношении позволяет себе сильно больше вольностей. Да и поддержка JavaScript в зачаточном состоянии.

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

#browser #history

#фишка дня

А вы знали, что background вполне можно наследовать через значение inherit?

А ведь это позволяет с лёгкостью имитировать эффект подсветки Ambilight!

Демо: https://codepen.io/alinaki/pen/PoMZNBp

А если есть необходимость сделать то же самое, но на img, можно воспользоваться SVG-фильтром от Аны Тюдор: https://codepen.io/thebabydino/pen/OJYwgpe

У неё, как всегда, с усложнением — зернистостью. Но это настраивается.

#svg #blur #ambilight