#такое дня

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

Я приношу свои извинения. Это не первый раз, когда команда телеги совершает подобное, и явно не в последний :(

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

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

Ванильный JS — мелкий размер, но поддерживаемо — вряд ли. React — один только DOM-слой займёт 40kB, Preact — 4kB, уже очень хорошо, Svelte свернётся в 1.6kB, но учить птичий язык шаблонов — это надо иметь причину...

И тут выходит VanJS со своими 0.9kB: https://vanjs.org/

Сразу пример кода:

const Hello = () => div(
p("Hello"),
ul(
li("World"),
li(a({href: "https://vanjs.org/"}, "VanJS")),
),
)

van.add(document.body, Hello())


Максимально нативно и понятно, не правда ли? И логика построения UI сохраняется. Есть управление стейтом, поддержка TS. Не нужно никакой сборки, садись пиши. Прекрасная документация, включая примеры от сообщества!

А его шаблонный движок вообще может быть использован отдельно. Назвали Mini-Van :)

#van #framework #js #бородач

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

Полку API-клиентов прибыло! Я уже рассказывал про GUI для HTTPie, который делали Злые Марсиане, а теперь пришло время рассказать ещё об одном. Почему пришло? Ну потому что Postman борзеет просто по часам и работает отвратительно.

Итак, Bruno: https://www.usebruno.com/

Хранит все запросы и коллекции в простых текстовых файлах (разрабы придумали язык разметки Bru специально для этого). Правда, я знаю как минимум одного человека-пользователя PhpStorm, который на этом месте презрительно хмыкнул.

Как следствие, все ваши коллекции запросов хранятся просто на диске. Нужно облако — используйте Git. Вот так просто. Планов на своё облако у команды нет.

Да, есть платная версия, 12 долларов в год (двенадцать в год). В ней из интересного есть поддержка вебсокетов и массового прогона данных по коллекциям для нагрузочного тестирования.

Кажется мне, для многих профессиональных пользователей Postman основной причиной всё ещё будут скрипты, но они и в Bruno есть. Посмотрим, куда вывезет.

#api #client

#такое дня

Сегодня на работе обновили проект до последней стабильной Node.js и была сказана немного неаккуратная фраза:
— Next on our list is Next.js 14.

И понеслась...

— I have remixed feelings about this
— You are being so reactive
— Not a good move from my vue
— Tired of this, I'll rest on my nest
— Bun intended
— I hate you all I want to underscore this. You’ve ruined everything I believe is good with humanity.
— I'll go
— This conversation is full of solid puns

Продолжим в комментариях? Или ну такое?

#заметка дня

В чём разница между селекторами :disabled и [disabled]?

Вот вы не знали (наверное), а она есть!

Псевдокласс :disabled выберет любой элемент, находящийся в отключённом состоянии.

Селектор атрибута [disabled] выберет любой элемент, имеющий атрибут disabled.

Например, <input type="text" disabled/> подпадёт под оба селектора, вне зависимости от того, случилось это на этапе прямого рендера или через установку свойства disabled узлу.

Да не томи уже!

Короче, суть дела в том, что атрибут disabled может быть установлен на fieldset, в таком случае поля будут недоступны, но в селектор input[disabled] не попадёт ничего.

Сложно? Вот пример: https://codepen.io/alinaki/pen/VwgKOPE

Короче, аккуратнее.

#css #disabled

#фишка дня

Одна из самых недооценённых возможностей CSS-анимаций, это функция steps(n).

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

Почему недооценена? Потому что SVG, Lottie и Rive-анимации предоставляют чуть больше возможностей, но ценой подключения скриптов или целого рантайма. А всего-то надо подготовить лист спрайтов-кадров.

Поэтому сегодня я дам вам два примера. Первый — анимашка шагающего пиксель-артного Локи: https://codepen.io/alinaki/pen/GRPrYdv

Здесь есть небольшой хак чтобы картинка стала отзывчивой: вместо размера указано соотношение сторон, а фон сдвигается в процентах. Ну и, чтобы пиксель-арт оставался собой, а не размывался, стоит накинуть соответствующее правило image-rendering.

И наглядно от мэтра Джея: https://codepen.io/jh3y/pen/KKbpeBQ

Если концепция спрайтов вам совсем не знакома, в этом примере можно включить раскадровку.

Никаких рантаймов, красота.

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

#заметка дня

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

Ну вот такое вот архитектурное решение: метод экспортирован из модуля, а тип или интерфейс — нет?

Делать unknown или any? Копировать и переопределять с помощью as?

Ни в коем случае! Вам нужен простой советский... ReturnType: https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype

Пример использования — на иллюстрации. Ну или ещё можно так:

const createPerson = () => ({
firstName: 'John',
lastName: 'Doe'
})

type Person = ReturnType<typeof createPerson>

Не делайте ерунды, котаны. Читайте документацию.

#typescript #ts #types #бородач

А вот в комментариях к предыдущему посту ещё полезное :)

Более того, что делать если вам нужно создать тип, параметры которого служат для передачи в функцию, которая является библиотекой и вам нужно передать все required параметры, не делайте это ручками, используйте Parameters

const createPerson = ({
  firstName, 
  lastName
}: { 
  firstName: string, 
  lastName: string
}) => ({
  firstName,
  lastName
})

type CreatePersonParams = Parameters<typeof createPerson>[0]; 

const params: CreatePersonParams = {
  firstName: 'John', 
  lastName: 'Doe' 
};

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

Каждый разработчик за свою жизнь должен сделать следующее: написать музыкальный плеер, тетрис, игру Жизнь. Если ты веб-разработчик, то ещё свою CMS, PHP-фреймворк, стейт-менеджер и... и уведомления.

Если тебе 14 лет, то ещё и криптобиржу.

Короче, уведомления вообще штука раздражающая. Всегда чего-то не хватает в существующих решениях. Но в любом случае, сегодня вашему вниманию React Hot Toast: https://react-hot-toast.com/

Отличаются маленьким весом, возможностью отмены скрытия пока наведена мышь, поддержкой промисов и JSX-содержимого, стилизуются, прости господи, через Tailwind. Не думал, что внесу это в плюсы, но после UI-китов на Emotion это уже очень хорошо.

Ещё бы туда диалоги добавить, было бы уапще.

Всем тостов, котаны! За мой счет :)

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

#фишка дня

Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...

...и ваша секция уехала под шапку ко всем чертям. Что же делать?

Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2023, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.

В чем отличие 2 от 3?

Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.

Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html

#css #scroll #snap #anchor #бородач

#баг дня

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

Попробовал повторить проблему, воссоздал все условия — не вышло. Утром взял её ноутбук и сел отлаживать.

Ни одной ошибки в консоли нет. На вкладке Network тоже всё чисто...

...подозрительно чисто.

Полез в дебаггер и обнаружил, что хуки загрузки данных, основанные на React Query, не вызываются вообще. Ни разу.

Сетевые операции без React Query работают прекрасно — приложение состоит их микрофронтендов, какие-то из них легаси, какие-то нет.

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

И тут коллега сообщает, что в Safari всё прекрасно работает.

Отчаявшись понять, что происходит, я вбил в гугл банальный запрос вида: "react query not working in chrome"

И нахожу золото.

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

1. Google Chrome на macOS неверно определяет состояние сети и поднимает флаг "офлайн" на navigator.onLine.
2. React-Query считывает этот флаг и ставит все ваши запросы на паузу. Без уведомлений, без ошибок. Молча.

Всё, вы в ловушке.

Как исправить? Передёрнуть wi-fi на ноутбуке. Я щас не шучу даже.

Проблеме в Chrome 7 лет! Создатели React-Query знали об этой проблеме и ничего не сделали!

Они исправили поведение на "всегда считать, что мы онлайн" только в 5 версии своего продукта, которая ломает совместимость!

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

Я ничем кроме как "горе от ума" это описать не могу. React-Query в принципе делает слишком много спорных настроек по-умолчанию, но после этого случая мы буквально пересмотрим своё решение по альтернативам.

#заметка дня

Давайте продолжим про React Query aka TanStack Query нынче.

В комментариях писали, мол, использовать React Query (возьму старое название) это плохая привычка, современные браузерные API прекрасно справляются, надо всего лишь немного их расширить.

Немного в моём случае это:
1. Состояния isLoading, isSuccess, isError
2. Сообщение об ошибке
3. Отмена запроса через AbortController
4. Глобальное состояние загрузки (на всё приложение)
5. Нормализация данных
6. Инициация повторной загрузки
7. Поллинг
8. Кеширование данных в едином слое и решение об инвалидации.

Веб-приложения они потому и веб, что грузят данные из удалённого источника, необязательно одного. И необязательно сетевые! Об этом ниже.

Уследить за всем непросто, но это полбеды. Тесты писать кто будет на ваши обёртки?

Да, React Query и ему подобные SWR-решения (stale-while-revalidate в клиентских приложениях превратился в целый концепт) не являются вечнозелёными. Термин "вечнозелёный" я принёс сюда из CMS Drupal: там это означало модули, поставляющиеся с ядром системы. Это значит, вероятность их удаления или радикального изменения API крайне мала. В нашем случае вечнозелёными являются браузерные API.

Но вы забываете об одной крайне немаловажной фишке React Query и SWR: они могут работать с любыми промисами. Не только с сетью и fetch!

И вот тут начинается прекрасное. Долгие вычисления? Промис! Забрать картинку с холста? Промис! Обработать загруженный на клиенте файл? Тоже промис! Написать расширение для браузера и обратиться к данным со страницы или результату парсера? Промис! Обратиться к прослойке между Google Sheets и твоим расширением? Промис! То же самое в Excel. То же самое в Figma. Далее вообще везде.

Вы понимаете, к чему я клоню? Хватит думать сетью, начинайте думать операциями!

И вот тут у React Query в моём случае из конкурентов разве что Effector. Но есть одна проблема... его концепты мало того, что сложны, так и обзорных статей не на русском очень мало. Но об этом потом.

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

Если React Query принимает на вход любой промис, то что вам нужно для того, чтобы протестировать своё приложение? Поднимать Mock API Server? Вы уверены?

Замокайте вызов промиса! Всё, вы прекрасны. Остальное уже протестировано за вас.

Задавайте ваши ответы, котаны.

#react #query #development

#новость дня

Кто-то тут не использует Prettier? Ладно, это я могу понять.

Но если кто-то не использует ESLint — проследуйте на выход, пожалуйста. Ладно, шучу. Но без этого в больших проектах никуда вообще. IDE подскажет многое, но процессы важнее.

Так вот, долгое время у многих (и у меня) возникали сомнения в нужности одновременного использования и форматтера aka Prettier и линтера aka ESLint.

Например, ESLint с лёгкостью может повторить все возможности Prettier и даже больше. Вот только... вот только надо ли?

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

Но давайте честно. Задача линтера — прививать хорошие привычки кодирования и не давать неосознанно писать говнокод применять плохие практики. Да, JavaScript — язык, в котором слишком много можно написать слишком плохо.

А вот форматтер — уже чистая вкусовщина. В целом, каждая IDE умеет так или иначе применять форматирование к уже написанному коду, но остаётся вопрос распространения этого на команду и процессы деплоя.

Потому Prettier остаётся хорошим выбором. Тот факт, что он уже внедрён в огромное число проектов с минимальными изменениями в конфигурации по-умолчанию, даёт уверенность в том, что люди не будут тратить время на споры (не даёт, но то такое).

К чему я веду? А вот: https://eslint.org/blog/2023/10/deprecating-formatting-rules/

Для тру: ESLint 10 больше не будет поддерживать настройки форматирования кода и вся работа ляжет на плечи сторонних средств форматирования (предлагаются Prettier, dprint и stylistic). Начиная с версии 8.53.0 эти настройки будут объявлены устаревшими.

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

А как дела на ваших проектах, котаны?

#eslint #prettier

#статья дня

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

Вот тут: https://t.iss.one/htmlshit/1638

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

Так, к статье дня. Анастасия Щедрина о том, как работает ESLint и о том, как написать свой плагин для линтинга React-приложения: https://habr.com/ru/companies/domclick/articles/743384/

Да, я в посте тоже писал про AST и инструменты, позволяющее это самое абстрактное синтаксическое дерево построить, но в статье тут всё гораздо подробнее. Меня редко хватает на целую статью, так что читайте что у других есть, котаны :) Ведь вышло неплохо и подробно.

#eslint #react #ast #бородач

#фишка дня

Одна из знаменитых проблем 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

#такое дня

Можно я немного побуду душным?

Этот мем всплывает разве что не ежегодно в твиттере и программерских пабликах и каналах.

Это, конечно, не уровень Max Howell, создателя Homebrew (самого популярного менеджера пакетов на macOS, используемого всеми разработчиками), но всё же. Напомню, он был отвергнут Гуглом за незнание структур данных.

В случае с Дэном многие пишут, что он «создатель реакта» и строят на этом панчи. Ну нет же, котаны.

Он один из разработчиков, а по большей части — лицо проекта, евангелист.

Ден Наше всё Абрамов. Кроме шуток, вы наверняка такое видели.

Что он создал — так это всем известный Redux, будучи соавтором. Потому давайте не будем распространять ерунду дальше.

Ну и, понятное дело, его не приняли в VK тогда, когда он не был ни тем, ни другим.

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

#meme #debunk

#заметка дня

В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"

Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!

Он очень давно и хорошо поддерживается, так что почему бы и нет.

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

И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100

Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится!

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

#css #placeholder #svg #sprite

#ссылка дня

Не так давно я обновил логотип канала, до того момента это был символ пустого фрагмента, </>, выражаясь языком React.js, на фоне логотипов кучи Веб-технологий, с которыми я работал.

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

Так вот, я это к чему. Когда это всё происходило, не было ресурса https://icones.js.org/

По его названию можно было бы подумать, что там одни только иконки. Но нет!

Там не только собраны иконки под открытыми или свободными лицензиями, но и изображения флагов, эмодзи и логотипов различных технологий, ресурсов, программ и компаний!

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

Но вот вам, котаны, берите и пользуйтесь 🙂

#icons #logos #emoji #flags #бородач