#codepen дня

Гори всё синим пламенем!

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

Впрочем Awwwards получили :)

Не то, что я сейчас о них что-то знаю, но хотя бы и поддержки сильно больше.

Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa

Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить 🙂

Спасибо Ксении Кондрашёвой.

#webgl #shader #бородач

#такое дня

Крайне показательное чтиво на ночь: исследование российского опенсорса.

https://research.nplus1.ru/

Довольно длинный обзор, но меня очень смутили три вещи:

1. Человек, который сделал скролл на этом сайте, ты что покушал в тот день?

2. 58,4% Считают, что опенсорс не имеет границ и не существует «российского опенсорса»

В смысле, 58,4? Почему так мало?

К счастью, изоляционистская риторика пока всё ещё однозначно осуждается.

3. Эти глаза, они там зачем?

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

А вы, котаны, контрибьютите в опенсорс? Как часто? На каком уровне?

#opensource #longread

#такое дня

Playwright-код на иллюстрации — это ваш знак свыше чтобы начать писать тесты.

Нет тестов? Сделай первый прямо сейчас. Просто возьми и напиши один. Юнит, интеграционный, e2e — неважно.

Собственно, соус: небезызвестный в фронтенд-сообществе Кент Доддс (Kent C. Dodds) написал, на первый взгляд, глупый тест: дождаться загрузки главной страницы.

Но не всё так просто. И этот тест его спас.

E2E тест что значит? Значит, end-to-end, от точки до точки. Он не проверяет как работает конкретно ваше приложение.

Задача проверить, как работает система целиком.

И тут оказалось, что Кент просто неправильно сконфигурировал редиректы на сервере :) Не было бы теста — упал бы продакшен. И сиди думай потом.

В общем, котаны. Нет тестов — прямо сейчас сделайте свой первый. Хватит откладывать. Иди уже.

P. S. Это, кстати, напомнило мне уже с точки зрения ведения блога: не бывает постыдных записей или находок. Нет ничего стыдного признаться в том, что ты что-то прочитал в документации или сделал какую-то глупость.

#tests #e2e #playwright

#тип дня

Вышел TypeScript 5.4.

А это что значит? Что у нас теперь есть служебный тип NoInfer.

Коротко, зачем он нужен: с его указанием TS больше не будет пытаться угадать тип передаваемого аргумента. Например, если не указать тип массива ["red", "yellow", "green"], TS определит его как string[] и разрешит запихнуть туда значение "blue" или, что хуже, позволить вашему коду попытаться, например, это самое значение в нём найти:

function createStreetLight<C extends string>(colors: C[], defaultColor?: C) {
    // ...
}

createStreetLight(["red", "yellow", "green"], "blue");

Чтобы такого не происходило, есть два пути. Первый:

function createStreetLight<C extends string, D extends C>(colors: C[], defaultColor?: D) {
}

createStreetLight(["red", "yellow", "green"], "blue");
//                                            ~~~~~~
// error!
// Argument of type '"blue"' is not assignable to parameter of type '"red" | "yellow" | "green" | undefined'.

Ну такое, многословно и D больше нигде в коде не используется. Вот тут и приходит на помощь NoInfer:

function createStreetLight<C extends string>(colors: C[], defaultColor?: NoInfer<C>) {
    // ...
}

createStreetLight(["red", "yellow", "green"], "blue");
//                                            ~~~~~~
// error!
// Argument of type '"blue"' is not assignable to parameter of type '"red" | "yellow" | "green" | undefined'.

Всё, тип массива определён как, практически, у константы ["red", "yellow", "green"] и передать "blue" уже не выйдет.

Естественно, улучшений и нововведений в TS 5.4 сильно больше, рекомендую прочитать заметки о выпуске: https://devblogs.microsoft.com/typescript/announcing-typescript-5-4/

#typescript #generics

#статья дня

Чтобы разбавить инструменты, коих сотни, давайте возьмём статью. Впрочем, она тоже о визуализации.

А конкретно, о визуализации вашей JavaScript-сборки (бандла), что поставляется в браузер: Lighthouse Treemap.

Знакомое название? Lighthouse — стандарт де-факто для измерения производительности сайтов и веб-приложений и анализа способов её улучшения.

А Treemap, собственно, это его часть. Показывает из чего ваша сборка состоит, что позволит проанализировать наиболее тяжёлые её части и сделать выводы о том, как поступить: разбить на части (чанки) или заменить.

Итак, статья: https://sia.codes/posts/lighthouse-treemap/

TL;DR

Открыли DevTools, запустили анализ проекта. После прохождения анализа появится кнопка View Treemap. Жамкаем и анализируем.

Заодно нелишним будет вспомнить Statoscope и Webpack Bundle Analyzer.

Пользуемся, наслаждаемся.

#devtools #chrome #бородач

#фишка дня

Давайте на минутку вернёмся к недавней статье про правильную стилизацию кнопок.

Помимо базовых стилей всегда хочется добавить немного эффектов: на наведение мыши (:hover), на фокус (:focus), на нажатие (:active).

Так вот, если с первыми двумя состояниями всё ясно, то нажатие – процесс мгновенный, т. е. длится явно меньше базовых 300 мс. Ваша анимация просто не успеет отыграть! Разве только вы не задержите кнопку мыши или тачпада нажатой.

И решение весьма неожиданное: :not(:active).

Внезапно, не правда ли? Ведь это, по факту, состояние кнопки по-умолчанию.

Так в этом и суть!

Хотим мы, например, стартовать пульсацию по клику. Сам эффект создаётся при помощи по-умолчанию скрытого псевдоэлемента, а секрет в том, что :not(:active) – это самое состояние перезапускает.

В общем, статья по поводу: https://codeburst.io/why-you-should-style-the-wrong-button-state-d4e4c2db8f7e

И CodePen, поскольку автор решил ограничиться gist’ом: https://codepen.io/alinaki/pen/wvgeWxY

#css #button #click #animation #бородач

#статья дня

Очень часто в коде многих верстальщиков я наблюдаю примерно следующее:

font-weight: normal;
font-family: BrutalType-Bold, sans-serif;

Кажется, не все люди понимают, что же такое @font-face и с чего начать подключение шрифтов. Давайте разбираться.

Статья слишком длинная для канала, поэтому я её выложил на Телеграф: https://telegra.ph/CHto-takoe-font-face-07-16

#css #fonts #шрифты #бородач

#фишка дня

Сделали вы такие флекс-контейнер, потомки в колонку, по центру, красота.

Но тут что-то пошло не так и контейнер стал слишком узким. Появился скролл. Казалось бы, невелика потеря: пользователь поскроллит.

А вот фиг!

Контейнер просто обрежет самого широкого потомка и не даст посмотреть его содержимого.

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

Очень просто, Стефан Юдис напоминает нам о существовании ключевого слова safe, которое можно передать аргументом в align-правило:

.container {
display: flex;
flex-direction: column;
align-items: safe center;
width: 50%;
}

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

Подробнее: https://www.stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/

По поводу поддержки браузерами: Safari умеет только в бета-версии (Tech Preview), Chrome со 115 и Firefox с 63.

#flex #css #scroll

#фишка дня

Селектор :empty в CSS реализован максимально тупо: он не считает пустым элемент, внутри которого есть пробелы или прочие незначащие символы.

Да-да, это официально признанный косяк спецификации https://t.me/htmlshit/2243

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

К счастью, есть :has. И вот что предлагает Ана Тюдор: использовать :has для поиска элементов без потомков! То бишь, де-факто, пустых!

:not(:has(*))

Это просто гениально!

#css #trick #has

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

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

Встречайте: AnimXYZ,
https://animxyz.com/.

Подход простой: вы указываете нужную комбинацию трансформаций, таймингов, уровней прозрачности, последовательность проигрыша прямо в классах и ставите атрибут xyz. Остальное она сделает за вас: объединит их и проиграет в нужный момент.

Основная моя к ней претензия – атрибут xyz. Для меня остаётся загадкой, почему нельзя использовать валидные data-атрибуты. С другой стороны, в React и Vue такой проблемы у вас не появится вообще.

Я считаю, что ей можно дать шанс. Особенно если вы создаёте различные баннеры.

#css #transitions #animation #бородач

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

Всем же знаком 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 и т. д. не всегда являются экономически обоснованными и не учитывают интересы всех сторон.

Мысли?