#тип дня

Говоришь такой коллеге: «Ты зачем столько классов насоздавал для такой простой вещи? Используй CSS-переменные».

А он приходит к тебе с картинкой выше и грустный весь.

Что мы делаем в таком случае?

Да очень просто, дополняем интерфейс CSSProperties, чтобы до реакта, наконец, дошло:

declare module 'react' {
    interface CSSProperties {
        [key: `--${string}`]: string | number
    }
}

Пруф: песочница.

Странно, конечно, что это не из коробки всё.

#css #types #react #typenoscript

#видео дня

Я, конечно, не дизайнер, но Figma пользуюсь, естественно. И постоянно на связи с нашим штатным дизайнером команды.

Иногда мне кажется, что возможности Figma почти безграничны, а потом оказывается, что это и правда так.

Например, вы знали, что есть плагины, позволяющие синхронизировать ваши макеты с реальными данными? Например, из Google Sheets.

Вот и я не знал.

Пока не увидел это: https://www.youtube.com/watch?v=3nXbUH9YYgo

Ссылка на обучающий файл из презентации: https://www.figma.com/community/file/1207693268826001427

Сам плагин: https://www.figma.com/community/plugin/735770583268406934/google-sheets-sync

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

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

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

Пользуемся, котаны! И делитесь вашим мнением о расширенных прототипах.

#figma #design #prototype

#такое дня

Каждый раз когда тебе кажется, что ты плохой разработчик, помни: скорее всего так и есть это текстовое поле в Google Maps делал разработчик из, очевидно, Google. С зарплатой много выше твоей.

Я, честно, не знаю, как это может кого-то успокоить. Но вдруг.

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

Думаю, все в курсе, что если нужно поставить изображение-заглушку, можно воспользоваться сервисами для т. н. плейсхолдеров: https://news.1rj.ru/str/htmlshit/431

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

Для этого можно или поставить серое поле, или применить различные техники под общим названием LQIP — Low Quality Image Preview: https://github.com/zouhir/lqip

Например, SQIP: https://github.com/axe312ger/sqip

Произносится сквиб, Гарри Поттер объяснит

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

И вот новое: BlurHash от Wolt: https://blurha.sh/

Результатом генерации является хеш вида LEHV6nWB2yk8pyo0adR*.7kCMdnj (ограниченный набор из 83 доступных символов).

По факту, он и описывает максимально размытое изображение.

Плагины есть под любые мыслимые средства, от Eleventy до Flutter.

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

#css #img #placeholder

#статья дня

Уже известный нам Ахмад Шадид продолжает выдавать шикарное.

Сейчас он осваивает интерактив в своих статьях. В прошлый раз это была статья о размере кликабельных областей в виджетах: https://ishadeed.com/article/target-size

А теперь — о :has(). Мне кажется, в CSS нет более популярного селектора в последние годы :)

Встречайте: https://ishadeed.com/article/css-has-guide

Да, стоит напомнить, что :has официально поддерживается во всех мейнстримных браузерах, но тот же Firefox ESR или Safari 15 его не поддерживают, так что применяйте вдумчиво.

#css #has

#расширение дня

А что, если история гита может быть представлена не в виде вертикального списка?

А что, если можно правильно использовать анимации, акцентируя внимание на изменениях?

А что, если можно не открывать интерфейс git blame на каждый чих?

Именно так подумал Родриго Помбо и нафигачил прекрасное расширение для Visual Studio Code: Git File History.

Принцип действия понятен по виде, устанавливайте: https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history

Всем git, котаны!

P. S. вы же в курсе, что устанавливать расширения можно из консоли?

Как-то так:

code --install-extension pomber.git-file-history

Если команда code недоступна, решение тут.

#git #history #vscode #бородач

#фишка дня

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

Буквально — используя параметры строки запроса (query string parameters).

Ну то есть что-то вроде https://buy.that?noscript=Product&action=buy&config=2&amount=3, классические GET-параметры, но управляемые с фронта.

А вот как позволить клиенту обновить страницу, сохранив эти параметры? Желательно, без лишней работы и без использования JS вообще.

А очень просто!

<a href="">Reload</a>

Да, вот так просто! Самое классное, что абсолютно валидно и есть в спеках: https://stackoverflow.com/questions/5637969/is-an-empty-href-valid/43340108#43340108

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

Не пишите лишнего, котаны!

#http #html #trick #бородач

#заметка дня

Не знаю, как вас, но меня очень раздражает то, что в React Router состоянием скролла надо управлять самостоятельно.

Перемещаешься по роутам, а скролл на месте остаётся. Ну типа, што.

К счастью, решение что для v5 React Router, что для v6 одинаковое:

function ScrollToTop() {
    const { pathname } = useLocation();

    useLayoutEffect(() => {
        document.documentElement.scrollTo(0, 0);
    }, [pathname]);

    return null;
}

И потом вставляете его в контекст роутинга:

<BrowserRouter>
    <Routes>
         ...
    </Routes>
    <ScrollToTop/>
</BrowserRouter>

Но вот я это всё по привычке написал и решил всё-таки посмотреть документацию. Ну бывает. И вот что там: https://reactrouter.com/en/main/components/scroll-restoration

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

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

По-моему, очень круто. И хорошо, что решение официальное.

#react #router

#фишка и #статья дня

Надоело проигрывать битву z-index? Используй BFG от CSS: infinity.

Ладно, кроме шуток (хотя я и не шутил). С помощью infinity можно гарантировать верно скруглённые углы на прямоугольниках, мы с вами уже рассматривали алгоритм для веба и Flutter: https://news.1rj.ru/str/htmlshit/1565

Вместо

  border-radius: 9999px;

...пишем:

  border-radius: calc(infinity * 1px);

А ещё в CSS общепринятое «если что-то поделить на ноль, получится бесконечность» вполне себе закреплено на практике:

calc(infinity) = calc(1 / 0)
calc(1px / 0) = calc(infinity * 1px)

Учителя вторых классов будут нами явно недовольны.

В общем, читаем статью и погружаемся в бесконечность и далее:
https://codersblock.com/blog/playing-with-infinity-in-css/

#css #infinity #math

#такое дня

Невозможно заниматься фронтендом и не знать о существовании ресурса css-tricks.com

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

Автором проекта, кстати, был создатель codepen.io, Крис Койер

Так вот, два года назад он продал проект самому неожиданному покупателю — DigitalOcean.

Казалось бы, где виртуальные сервера, а где — верстка. Но в продаже была своя логика: вокруг DigitalOcean тоже имеется большое сообщество и их статьи-руководства очень хороши. Была надежда, что дело пойдет.

Ну и бабки, конечно, камон.

Но... нет. CSS-Tricks.com де-факто мёртв. Сначала убрали выпускающего редактора, потом и всю остальную редакцию. Последние статьи вышли в начале прошлого года и в них нет вообще никакого смысла.

И вот, наконец, Крис Койер приоткрыл завесу о том, как происходила покупка и как он пытался — внезапно — вернуть контроль над сайтом: https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/

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

Просто иногда они умирают, растворяясь в новой организации. А иногда — абсолютно ни за что :(

Спасибо, что хоть не закрыли архив.

#молния дня

Как нам всем уже известно, в Евросоюзе Apple даст возможность использовать не только разные браузеры (в смысле, на разных движках), но и разные магазины приложений.

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

Мне иногда пытаются доказать, что Chrome рендерит иначе, но это лишь постобработка.

Ладно, давайте к делу. Какое-то время назад поступила информация, что Apple мстит за эти решения Евросоюзу и хочет отказаться от PWA (progressive web apps) под предлогом, что для разных движков они не могут гарантировать такой же уровень безопасности песочницы.

Следует отметить, что PWA и правда умеют работать абсолютно независимо друг от друга, обладая каждое своим кешем и сервисами. Так что можно смело держать несколько аккаунтов в банках и тех же соцсетях, например.

Так или иначе, решение вызвало неистовую бурю возмущения. В итоге буквально вчера прошло официальное заявление от Apple о том, что PWA останутся, но работать будут все так же на WebKit.

Тут следует отметить, что, хоть на Android прогрессивные веб-приложения могут работать каждое в своем браузере, в магазин могут быть загружены только те, что используют системный движок Chrome WebView.

Так что хотя и можно повозмущаться в сторону iOS, решение лично мне кажется достаточно адекватным.

Победа или нет, котаны?

#заметка дня

Интересно наблюдать, как с приходом Bun на сцену JavaScript-сред расшевелились все остальные.

Например, вот Parcel.js. Казалось бы, ну сборщик и сборщик, но начиная с его 2 версии каждая минорная удивляет!

В версии 2.12.0 появилась, например, поддержка макросов: https://parceljs.org/blog/v2-12-0/

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

И вот появились они сначала как раз в Bun.

Ну и LightningCSS тоже не стоит на месте. Если раньше он успешно заменял собой PostCSS, то начиная с этой версии — понимает директиву import и собирает ваш CSS в кучу, без препроцессоров.

Очень ждём поддержку React Server Components, потому что это будет первая "ванильная" реализация. В смысле, не в составе фреймворка.

Пробуем, котаны!

#parcel #bundler #macros

#codepen дня

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

Что я имею в виду: поля ввода, чекбоксы, радиокнопки, кнопки вообще, филдсеты, селекты — они были (и частично до сих пор являются) замещаемыми элементами. Вы указываете браузеру "хочу тут видеть такой-то инпут", а рисуется инпут уже операционной системой, её виджетами.

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

И только select до сих пор рисуется совершенно отдельно. Кстати, это одна из причин, почему селекты не видно в трансляции экрана на митингах :)

Возвращаясь к чекбоксам и радио: до недавнего времени по вышеозначенным причинам к ним нельзя было применять, например, псевдоэлементы. Что весьма ограничивало возможности по стилизации.

Теперь же это не так. Google Chrome уже давно не стесняясь разрешает псевдоэлементы на ваших чекбоксах, Safari и Firefox тоже недавно подтянулись.

В итоге, в сочетании с appearance: none можно творить что-то такое: https://codepen.io/alvaromontoro/pen/OJqKGBz

Я, кстати, уже говорил ведь, что в стандарт пытаются пропихнуть атрибут switch, чтобы окончательно распрощаться с чекбоксами?

Вот такое (работает только в Safari TP): https://nt1m.github.io/html-switch-demos/

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

#css #switch #checkbox

#такое дня

Сейчас ASCII-графика это такой арт и способ передачи некоторых мемов. Но в 80х и 90х символы, встроенные в шрифт, использовались сплошь и рядом.

Увидеть игру, собранную целиком на символах из разных шрифтов, было чем-то совершенно обычным. Да и до сих пор в консоли можно увидеть прогресс загрузки из символов "\/|-", образующих спиннер.

Вот казалось бы, 2024 год на дворе. Можно вывести любую картинку. Консоли тоже давно не работают только в текстовом режиме...

Оттого удивительнее, что в Windows до сих пор прогресс загрузки в момент установки системы отрисовывается шрифтами! Segoe Boot, если быть точным.

В Half Life и Counter-Strike символы граффити, кстати, тоже.

Раз они упаковали это в шрифт, значит нам можно и нужно это использовать!

Предлагаю посмотреть забавный пример использования: https://z2r-yt.github.io/Fake-Windows-Update-Screen/

Теперь вы знаете, что делать, когда кто-то забыл заблокировать экран.

P. S. Очень, очень, рекомендую почитать комментарии к коду выше. Это потрясающе.

#font #spinner

#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/typenoscript/announcing-typenoscript-5-4/

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