#библиотека дня

Всем же знаком UI-kit, а нынче уже целая дизайн-система, MUI?

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

Эти ребята двигали идею CSS-in-JS чуть ли не с самого появления концепта. Сначала они использовали JSS, потом дикую смесь из JSS и Emotion, что приводило к, мягко говоря, мучениям.

По всей видимости, они сами наелись и решили перейти к созданию своего CSS-in-JS фреймворка, основанного на проекте WyW-in-JS
(на котором основан Linaria): Pigment CSS.

Как и многие современные альтернативы, стили Пигмента будут собираться в статичный CSS (с CSS-переменными), а API уже стандартно напоминает Styled Components:

const Button = styled('button')({
  border: 'none',
  padding: '0.75rem',
  // ...other base styles
  variants: [
    {
      props: (props) => props.variant !== 'contained',
      style: { backgroundColor: 'transparent' },
    },
  ],
});

Документация небольшая, но полна примеров. Плюс, учитывая распространённость MUI, у Pigment есть все шансы на распространение. Как минимум, насильно :)

Правда, мне кажется, что теперь мы получим три CSS-фреймворка в одном UI-ките одновременно...

#css #cssinjs #mui

#заметка дня

Почему-то многие люди путают решение проблемы с её описанием. И это не то чтобы мешает в работе, но замедляет некоторые процессы.

TL;DR
Говорите о том, что вас беспокоит, а не о том, что, по вашему мнению, стоило бы сделать.

Теперь для менее нетерпеливых.

Есть у нас в продукте процедура подключения к источнику данных. Там, где ваш типичный пользователь логинится один раз, в наших задачах считается нормальным логиниться раз десять в день. В разные источники данных, под разными именами, с разными правами доступа... ну не суть.

И приходит ко мне тестировщик с фразой: "А почему нет уведомления о подключении?"

На что получает логичный ответ: потому что интерфейс меняет своё состояние в момент успешного подключения. Positive thinking, вот это вот всё.

Он упирается, что хочет видеть сообщение об успехе. Я не понимаю, зачем. Объясняю ему логику. В итоге, садимся и смотрим.

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

Что, естественно, гораздо лучший способ уведомления, чем попап со словами "Подключение создано успешно".

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

А стоило просто прийти с проблемой.

P. S. В комментариях подсказывают, что это называется "Ошибка молотка".

#фишка дня

Как получить последний элемент массива?

Можно посчитать длину массива минус один, чтобы получить нужный индекс.

Можно сделать array.slice(-1) и взять нулевой элемент получившегося массива.

А можно воспользоваться сравнительно новым методом Array.prototype.at! Ну, уже два года как в продакшене. И полифилл давно есть.

Весьма удобно, я считаю.

#javascript #array

#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 #бородач

Я сегодня пытался на iPod Classic заменить тридцатипиновый разъём на type c, но контактные площадки оказались сгнившими и попытки их восстановить провалились.

Но это не проблема. Дорожки к площадкам же где-то начинаются, верно? :) И я их уже идентифицировал. Жду провода и паяльную маску.

А как прошло ваше воскресенье?

​​⚛️ React 19 — useOptimistic

useOptimistic — новый хук, который позволяет отобразить “оптимистичное” состояние. Оно называется “оптимистичным”, потому что мы “оптимистично” надеемся, что наш запрос не свалится с ошибкой и после выполнения запроса состояние будет выглядеть именно так.

❓Как используется

- В useOptimistic передаётся реальное состояние (cart) и функцию-reducer, для обновления оптимистичного состояния
- Компонент (Cart) использует “оптимистичное” состояние (optimisticCart) для рендера
- Перед выполнением запроса обновляется “оптимистичное” состояние
- Когда запрос завершился, нужно обновить реальное состояние
- Как только реальное состояние обновилось, оптимистичное состояние обновится автоматически, так как оно передано в useOptimistic первым параметром. ⚠️ Поэтому важно следить, чтобы приходило одно и тоже состояние.
- Если запрос упал с ошибкой, нужно откатить изменения в оптимистичном состояние.

ℹ️ Первый вопрос, которым я задался, а в чём отличие от обычного setState, путём экспериментов, вот что удалось найти:

- useOptimistic работает с формами. Работать с обычной кнопкой в Single Page Application мне не удалось, обновление происходило только после завершения запроса
- useOptimistic работает только внутри асинхронного обработчика, что логично. Если убрать async/await, обновление произойдёт только после завершения запроса
- Параметр в useState используется только для инициализации, и игнорируется в последующих рендерах. useOptimistic будет сихронизироваться со значением переданным первым параметром.

🤷‍♂️ Очень мало полезного удалось найти о useOptimistic. Во всех статьях и видео тривиальные примеры, нигде не рассказывается как обрабатывать более сложные ситуации:

- Как обновлять оптимистичное состояние, если запустить несколько запросов одновременно?
- Как использовать useOptimistic в SPA вне форм?

Поэтому пришлось создать пару ишью: раз и два. В любом случае, пока useOptimistic выглядит каким-то низкоуровневым API. Надеюсь скоро появится больше Best Practices по его применению. Если вам есть, что добавить — пишите в комментах.

Ещё по теме:

- Frontend First — Ep 179 - React Deep Dive: useOptimistic
- Официальная документация по useOptimistic
- Код из примера тут

#react #frontend #new

#такое дня

Я тут умудрился пропустить одну довольно интересную новость, несущую серьёзные выводы для веб-разработчиков.

В декабре 2023 года NASA перешла от использования CMS Drupal и React.js SPA на...

я выговорить это не могу, не то, что написать

...на Wordpress и классическую схему доставки контента aka backend generated.

Давате углубимся в историю.

В 2014 году NASA объявило о совершенно новом сайте, построенном по так называемой headless технологии, безголовой. Что это значит?

Что не подумали.

Берётся фреймворк или CMS, неважно, отрезаем часть, генерирующую HTML клиенту, вместо неё — JSON API. Фронтенд пишется на любом доступном фреймворке. В данном случае, React.

Эффект был потрясающий: хорошее кеширование, шикарная работа под большой нагрузкой, простота обновлений. Кейс: https://www.drupal.org/case-study/nasagov

Шли годы, агентство NASA всё больше работало на широкую аудиторию (конкуренты заставили), нанимало редакторов, журналистов и учёных... Более 400 человек!

И неожиданно оказалось, что создатели контента-то привыкли к Wordpress, когда-то такому простому, а нынче развившему редактор Gutenberg до состояния, утирающего нос не только Drupal, но и многим коммерческим решениям.

Кроме шуток, сообщество вокруг Wordpress огромное, а создатели, развивая проект, не забывали о корнях.

Drupal довести до такого состояния весьма сложно, личный опыт.

При этом разработчики Drupal не сильно заботились о простоте обновления. И когда Drupal 7 достиг EOL, было принято решение.

Собственно, вот и кейс, и ещё, включающие в себя интервью создателей и людей из NASA.

И ещё: контент доставляется классическим способом, HTML генерируется самим Wordpress, а не на клиенте.

Подытожим.

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

То, что сделали в NASA сродни пощёчине всем модным веяниям.

Придётся признать, что даже современные вещи вроде Next.js, Contentful и т. д. не всегда являются экономически обоснованными и не учитывают интересы всех сторон.

Мысли?

#баг дня

Срочно в номер! В Chrome 123 обнаружен баг, из-за которого блокируется открытие DevTools.

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

Ссылка на баг: https://issues.chromium.org/issues/330112831

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

#фишка дня

Один из моих любимых вопросов на собеседованиях был про поведение Array.prototype.sort().

Вы не представляете какое количество людей просто не задумывается о том, что sort — мутирующий метод, то есть он возвращает не новый массив, а ссылку на изменённый текущий.

Да, в большинстве случаев ничего страшного не произойдёт, но в остальных — будет неприятно.

Так вот, к чему это я. С выходом Firefox 115 в июле 2023 года мы получили иммутабельные методы работы с массивами во всех браузерах:
.toReversed()
.toSorted()
.toSpliced()
.with()

Если что, with — это про замену элементов по индексам.

Есть и полифиллы на core-js, так что без работы никто не останется.

И это прекрасно.

#js #array #sort #бородач

#фишка дня

Заканчивайте использовать JSON.parse(JSON.stringify(obj)) для дублирования (aka глубокого копирования aka deep copy) объектов в JavaScript.

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

Уже достаточно давно имеется structuredClone.

Наличествует во всех современных браузерах, есть полифилл.

P. S. вот тока не надо мне про лодаш тут плиз) все же использовали JSON-решение из-за скорости ⚡️

#js #clone #бородач

#такое дня

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

Объяснение через час.

#такое дня

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

1. Конструктор RegExp принимает только строки, а {}.toString() это '[object Object]'
2. Квадратные скобки [] устанавливают соответствие любому символу внутри них
3. Ну и mom приводит к совпадению по o, а dad — нет 🫠

#ссылка дня

Типизирование React-компонентов, рефов и хуков может обернуться большой болью. Особенно если в первый раз. Но к счастью, у нас есть GitHub, который добрые люди используют не только как хранилище кода, но и как идеальный универсальный блог :)

Встречайте: https://github.com/typescript-cheatsheets/react

Буквально, из описания: «Cheatsheets for experienced React developers getting started with TypeScript».

Впрочем, у ребят есть и более привычная веб-версия, разбитая на секции: https://react-typescript-cheatsheet.netlify.app/

Мне, например, недавно понадобилось сделать полиморфичный компонент, который в зависимости от условий мог становиться то ссылкой, то кнопкой (какой прекрасный повод для холивара). Я не нашёл решения непосредственно здесь, зато нашёл в обсуждениях и PR. Что тоже показывает, как удобен GitHub для коллективного блога.

В общем, всем типов, котаны.

#typescript #react #бородач

#фишка дня

Показать цвет белее белого? Легко!

На самом деле не белее, а ярче, но кого это волнует? Ну ладно, многих...

Так вот. Многим, если не всем, знаком волшебный термин HDR: High Dynamic Range (здесь ссылка на технологию для видео). В последние годы ей прожужжали уши, наверное, всем.

А ещё она очень бесит в тиктоке и инстаграме.

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

Так вот, ближе к делу. Если правильно сформировать HDR-видео, например, QR-кода, то оно будет показано ярче остального экрана! Например, глядите сюда (точно — обладатели айфонов и недревних макбуков): https://notes.dt.in.th/HDRQRCode

Выкрутите яркость экрана пониже и увидите, как левый код ярче правого! Белее белого, буквально.

Вполне можно применять в билетных сервисах...

Ну и чуток технических подробностей и ещё одно демо: https://github.com/dtinth/superwhite

Такое вот милое прогрессивное улучшение (если, конечно, найти способ генерировать HDR-видео ffmpeg-ом)...

#hdr #video #ios #macos #бородач

#фишка дня

Как плавно остановить вращение? Ведь резкая остановка нередко вызывает отторжение к анимации вообще.

Темани Афиф aka CSS Challenges показывает простой трюк: ставим на паузу и добавляем трансформацию "доворота":

.box:hover {
animation-play-state: paused;
transform: rotate(.2turn);
}

Пример: https://codepen.io/t_afif/pen/XWQMPqY

#css #animation #transform #trick

В DevTools Chrome 123 встроили какую-то пасхалку. Мол, искать под эмодзи 💫 (комета).

Кто искал? Кто нашёл?

Upd.  окей, в комментариях рассказали, как это сделать. Скоро выкачу и сюда :)

#статья дня

Забудьте всё, что вы знали о режимах смешивания aka mix-blend-mode в CSS. А если не знали ничего, почитайте пару моих постов, и возвращайтесь обратно. Например, вот: https://t.iss.one/htmlshit/1757

Лучшее, для чего их обычно применяют, это убирание белого фона под логотипами. Не видели? Потом покажу, сейчас о другом.

Что если я вам скажу, что изображение выше — это, кстати, реализация циферблата с Apple Watch — целиком и полностью реализовано режимами смешивания и градиентом?

Верится с трудом, да? Весь секрет в том, чтобы выйти за рамки двух слоёв и смешать несколько за раз. Можно добиться потрясающих эффектов, вплоть до dithering.

Статья Скотта Вэндехе как раз об этом: https://cloudfour.com/thinks/the-power-of-css-blend-modes/

Была бы в 2013 году поддержка mix-blend-mode пошире, можно было бы такой техникой сделать имитацию гравировки в моём невыпущенном конструкторе надгробий, кек

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