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

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

Это всяческого рода таблицы с CRUD- (Create-Read-Update-Delete) возможностями.

Несложно догадаться, что наиболее прокачаны они в разного рода энтерпрайз-фреймворках (на Java и C#), под общим названием GridView, в Sencha Ext JS и... в том же 1С.

Ну ещё бы бухгалтерская платформа не умела в таблицы.

Для веба их в целом огромное количество, но многие из них, как тот же Ext JS, разрабатывались последние лет 20, выросли в огромных слабо поддерживаемых монстров. Казалось бы, ну уж за столько времени можно написать что-то гибкое и универсальное? Да не особо. И ещё денег просят.

К счастью, прогресс не стоит на месте и у нас уже есть несколько прекрасных гридов. Одним из самых крутых, несомненно, является универсальный TanStack Table (бывший React Table): https://tanstack.com/table/v8

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

И пример такого рабочего грида мне на днях прислал подписчик: Material React Table.

Ссылка: https://www.material-react-table.com/

Как раз пару месяцев назад у них вышел новый релиз.

Если TanStack Query оставляет выбор UI-кита за вами, то MRT, как несложно догадаться, берёт за основу MUI (Material UI до версии 5) и добивает плюшками и полновесными примерами.

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

В общем, рекомендуем, котаны :)

#js #table #crud #grid

#фишка дня

Валидация форм в HTML, мягко говоря, раздражает. Я даже не буду начинать о том, что все встроенные способы валидации или выглядят уродливо, или имеют странную логику.

Тем не менее, браузеры пытаются и много лет назад у нас появились селекторы :invalid и :valid.

Как несложно догадаться, они целятся в поле ввода, не соответствующее критериям и соответствующее критериям соответственно. Например, required.

Я сел на книгу с каламбурами, простите.

Казалось бы, вот оно, счастье! Пишем что-то такое:

input:invalid ~ .invalid-message {
  display: block;
}

...и получаем сообщение о незаполненном поле!

Ага, хрен там.

Прикол того же :invalid в том, что пустое, не тронутое пользователем поле, изначально не удовлетворяет заданным условиям! И сообщение будет висеть сразу, раздражая всех.

Если email — то пустая строка, очевидно, не является правильным адресом почты. То же самое с обязательным вводом.

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

Потребовалось всего 6 лет ожидания, чтобы в Chrome и Safari, наконец, появилось то, что в Firefox было все эти годы: концепция грязных полей в виде селекторов :user-invalid и :user-valid.

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

Кроме шуток, это буквально самый настоящий термин для библиотек обработки форм, вроде того же react-hook-form, или Angular.

Есть ещё концепция touched, когда ввода не было, но произошло событие blur.

Я, чувствую, мог запутать... Давайте сразу к делу. Если вы до сих пор не прошли по ссылкам, то вот сейчас самое время пойти в CodePen с примером, который показывает разницу: https://codepen.io/alinaki/pen/NWJPvPE

Согласитесь, это уже похоже на удобную валидацию, котаны!

#css #validation #required #forms

#релиз дня

Итак, котаны, что мы с вами пропустили?

А пропустили мы релиз Firefox 121!

Что в нём такого важного? Ну, как минимум, поддержка :has aka родительский селектор!

Конечно же, он не родительский, но то такое.

Теперь поддержка имеется во всех трёх движках, а это значит, что можно вовсю применять!

На что способен :has

1. Подсветка колонок: https://news.1rj.ru/str/htmlshit/2396
2. Анимация в стиле MacOS Dock: https://news.1rj.ru/str/htmlshit/1873 с полным разбором: https://news.1rj.ru/str/htmlshit/1876
3. Весёлая анимация букв: https://news.1rj.ru/str/htmlshit/1634
4. Когда вышел Chrome 105, разработчики разродились большой статёй: https://news.1rj.ru/str/htmlshit/1391
5. Джим Нильсен тоже не отставал: https://news.1rj.ru/str/htmlshit/1313
6. Зум на определённых частях изображения: https://news.1rj.ru/str/htmlshit/1206
7. Ну и шикарнейший тред от Веса Боса в Твиттере о десяти применениях новинки: https://twitter.com/wesbos/status/1737148340322652632

В общем, не переключайтесь. Будет ещё :)

#css #has #future

#прекрасное дня

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

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

Не, я понимаю, мода на 3D-карточки в лендингах давно прошла, все эти перевороты и шевеления мышкой… Это всё прошлое десятилетие.

Но ребят, я за всю свою карьеру и представить не мог, что можно настолько точно передать эффект переливающейся металлизированной карточки настолько точно манипулируя одним только положением фона! Это какое-то безумное умение сочитать mix-blend-mode, градиенты и SVG-фильтры.

Вам срочно надо зайти и посмотреть самим: https://poke-holo.simey.me/

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

Ну и гитхаб, конечно: https://github.com/simeydotme/pokemon-cards-css

Крышу сносит, потрясающе. И без WebGL.

#css #3d #gradient #бородач

#заметка дня

Недавно я в серии ностальгических постов вспомнил о своём первом крупном проекте, который жил без малого 13 лет: форум Рупор Петрозаводска.

Проект грохнули вскоре после продажи провайдера дочке Ростелекома.

Речь пойдёт об одной штуке, над которой мы в 2009 году чуть-чуть заморочились, но сейчас бы сделали иначе: "Телевизор".

Под каждым сообщением была иконка телевизора, по тогдашней Web 2.0-моде размером 16x16 пикселей, нажав на которую можно было подписаться на обновления к посту.

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

Я вам даже демо с React Query приготовил: https://3md85t.csb.app/

Естественно, телевизор я сделал покрупнее. Уж очень мне тогда нравилось внимание нашего дизайнера к деталям, пиксель-арт, не меньше.

Привет, Тима! Если не подписан — я тебе ссылку пришлю :)

Теперь о том, почему в 2024 году это делать ну, как минимум, странно.

Потому что гораздо разумнее опираться на подход Optimistic Updates.

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

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

В нашем случае — сразу включить "телевизор", а уж если что, сообщить об ошибке.

Да, в таком случае надо бы внимательнее отнестись к обработке нештатных ситуаций и дать возможность повторить операцию на тех же вводных. Для React Query есть отдельный гайд: https://tanstack.com/query/v5/docs/react/guides/optimistic-updates

Зато каков прирост качества UX!

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

Не залипайте в телевизор в новогоднюю ночь :)

Увидимся в 2024.

#optimistic #updates

#фишка дня

Я долгое время не понимал, нафига нужен background-attachment: fixed;. Но потом в моду вошли скелетоны для загрузки (терпеть их не могу), и существование fixed стало чуть более понятным.

Но тут же появилась такая штука, как CSS-переменные... Это привело к тому, что буквально парой строк JS можно установить координаты этому самому фону и практически бесплатно получить эффект "фонарика". Вот демо от DX-инженера Vercel Джея: https://codepen.io/alinaki/pen/poYyNbB

Но он не остановился на достигнутом эффекте и пошёл дальше. Я не просто так сначала приложил простое демо. "Фонарик" — это радиальный градиент, координаты центра которого устанавливаются JS-ом. Собственно, база.

Теперь давайте перейдём к эффекту посложнее, на видео. Там подключен реакт, чтобы можно было добавлять карточки и управлять параметрами эффекта.

Впрочем, хоть сам эффект и кажется сложным, реализация его хорошо раскладывается на шаги: https://codepen.io/alinaki/pen/jOJqVmR

1. Применяем всё тот же радиальный градиент для "фонарика".
2. Цвета меняем через функцию hsl, передавая в неё градусы поворота цветового колеса:

[data-glow] {
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue) 100% 70% / 0.25), transparent
  );
  background-attachment: fixed;
}

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

  mask:
    linear-gradient(transparent, transparent),
    linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;

4. Вы великолепны.

#css #mask #var

#просьба дня

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

Наставьте реакций, пожалуйста, под этим багом в Telegram MacOS: https://github.com/overtake/TelegramSwift/issues/1056

Я дико устал переписывать посты по два раза из-за сбоев в форматировании :(

#фишка дня

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

Например, как затемнить все элементы, кроме того, на который наведена мышь?

Вот как-то так:

main:has(article:hover) article:not(:hover) {
  opacity: 0.3;
}

Собственно: https://codepen.io/alinaki/pen/XWGdadP

Впрочем, похожий, хоть и не настолько гибкий, эффект достигается и без :has:

main:hover article:not(:hover) {
  opacity: 0.3;
}

Пруф: https://codepen.io/alinaki/pen/OJqNjWb

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

Но тут кому как, конечно.

#css #trick #hover

#заметка дня

Элемент marquee, который когда-то давно долгое время использовался для создания бесконечной бегущей строки, давно объявлен устаревшим. При этом, желание создавать бегущие строки у дизайнеров и заказчиков никуда не исчезло.

Давайте сразу определимся: хоть он и устаревший, он всё ещё прекрасно работает... в Chrome. Кому-то из разработчиков было весьма интересно переделать его на Shadow DOM и оптимизировать. В Safari и Firefox всё довольно плохо, тормозит безбожно. Поэтому, если ваша задача сделать киоск или использовать в приложении на Electron — не мучайте себя, берите его.

Поэтому долгое время бегущие сроки создавали, используя translate на контейнер и дублирование содержимого. Например, так: https://codepen.io/studiojvla/pen/qVbQqW

Но мы же с вами ровные, зачем нам такие технологии? Можно же жить в 2024 году и не дублировать контент почём зря!

А сделать это можно просто: через CSS-переменные и анимацию индивидуальных элементов! Для этого прямо в разметке указываем порядковый номер элемента и передаём его в определение анимации: https://codepen.io/thebabydino/pen/BaMqgPO?editors=1100

Пример выше — от Аны Тюдор. Вот то же самое, но без Pug, чтобы легче было понять принцип: https://codepen.io/alinaki/pen/poYyaMJ?editors=1100

В чём плюс такого подхода?

1. Никакого дублирования
2. Короткий код
3. Можно применить любые трансформации к каждому элементу, помимо сдвига
4. Фон принадлежит контейнеру и никуда не сдвигается. Можно прозрачность наложить, можно маски, можно глассморфизм... далее — везде.

Не нужны даже псевдоэлементы чтобы затухание сделать (собственно, маска).

Крутота же, котаны? Крутота.

#marquee

#ссылка дня

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

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

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

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

На помощь приходят подборки тестовых! Вот, например, от Хекслета: https://github.com/Hexlet/ru-test-assignments

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

Полезная штука, котаны. И не только для начинающих!

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

#work #assignment #list #бородач

#заметка дня

Многим из вас знакомо видео выше. неудивительно, ведь я использую его как промо канала. Не всегда удачно, но почти 12000 вас уже здесь :)

Так вот, на иллюстрации — не совсем оно. А имитация на HTML и CSS. Оригинальное было сделано моим коллегой в After Effects.

Но на чистом CSS подобные прыгающие анимации сделать было невозможно... до недавнего времени. Теперь же на Chrome или Firefox (не iOS), есть возможность использовать функцию анимации linear(). Обратите внимание, не linear!

Вот так:

linear(0, 0.14 4.43%, 0.93 16.722%, 1.14 24.312%, 1.15 29.933%, 1.01 43.094%, 0.97 50.995%, 1 76.878%, 0.99);

Это буквально параметры кривой: https://developer.mozilla.org/en-US/blog/custom-easing-in-css-with-linear/

Раньше у нас в лучшем случае была возможность описывать кривые Безье, но добиться правильного пружиняшего эффекта с ними было невозможно :)

Теперь о задержки проигрывания на диагоналях...

Сначала я упёрся в аналитическое решение через nth-child: https://codepen.io/alinaki/pen/PoLNMgj

И всё прекрасно получалось, но из-за повторяющейся природы nth-child, чтобы выйти за пределы главной диагонали пришлось внести ограничения по номерам элементов, иначе, начиная с 9 диагонали, затрагивалась 2 (из 12):

.cell:nth-child(7n + 10):not(:nth-child(-n + 17)) {
  --i: 10;
}

...делать мне этого очень не хотелось.

Собственно, запись :nth-child(-n + 17) буквально выделяет первые 17 нод.

И тут я обратил внимание, что суммы индексов колонки и строки на элементах по нужным мне диагоналям одинаковы, так что с помощью Pug я их передал в CSS-переменные: https://codepen.io/alinaki/pen/mdoEPbR

Как-то так:

each r, rx in rows
  each c, cx in cols
    - d = rx + cx + 1
    .cell(style=`--dia: ${d};`)

А почему я упомянул вчера счётчики? Ну куда-то выводить переменную диагонали для отладки надо было же.

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

Всем неглавных диагоналей за мой счёт, котаны!

#css #matrix #pug

#фишка дня

В посте про поиск диагоналей в сетке и CSS-функции linear() вы могли заметить, что анимацию можно перезапустить, кликнув по экрану. Вот, кто пропустил: https://news.1rj.ru/str/htmlshit/2439

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

Но это звучит как какой-то бред. Если анимация добавляется по классу, разве нельзя просто взять и этот самый класс передёрнуть?

К сожалению, нет. Браузеры — штуки ленивые. Точнее, они берегут вычислительные ресурсы, батарею... и не знаю, что там ещё.

Убрали класс, вернули класс... дерево не поменялось. Браузеру, стало быть, пофигу и никакого reflow (перестройки лейаута), так необходимого для анимации, не случится.

А чтобы случилось, нужно просто подёргать за разные ниточки. Например, обратиться к element.offsetWidth или element.offsetHeight.

Эти свойства — ленивые, они вернут ширину или высоту элемента с учётом отступов, полей, скроллбаров...

Чтобы их взять точно и в нужный момент, браузеру придётся остановить выполнение JS, выполнить обновление "экрана" и, собственно, вычислить.

Кстати, если этот путь кажется слишком хитрожопым, можно воспользоваться Web Animations API, достать анимации документа и перезапустить:

const replayAnimations = () => {
  document.getAnimations().forEach((ani) => {
    ani.cancel();
    ani.play();
  });
};

Подробнее: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API

Под капотом произойдёт всё тот же самый reflow, но магии станет сильно поменьше.

#css #animation

#такое дня

Нераскрытая история веба. Этим невозможно не поделиться:

1990: HTML invented
1994: CSS invented to fix HTML
1995: JS invented to fix HTML/CSS
2006: jQuery invented to fix JS
2010: AngularJS invented to fix jQuery
2013: React invented to fix AngularJS
2014: Vue invented to fix React & Angular
2016: Angular 2 invented to fix AngularJS & React
2019: Svelte 3 invented to fix React, Angular, Vue
2019: React hooks invented to fix React
2020: Vue 3 invented to fix React hooks
2020: Solid invented to fix React, Angular, Svelte, Vue
2020: HTMX 1.0 invented to fix React, Angular, Svelte, Vue, Solid
2021: React suspense invented to fix React, again
2023: Svelte Runes invented to fix Svelte
2024: jQuery still used on 75% of websites

#фишка дня

Итак, сегодня в уютный канальчик™️ с ноги залетает уже всем известный Джей c кое-чем насколько потрясающим, настолько же и забытым.

И это API document.getAnimations(), позволяющий не только получить список всех CSS-анимаций, но и, внимание, выставить промис и дождаться их выполнения! 🤯

const animations = document.getAnimations()
.map(a => a.finished)
await Promise.all(animations)

Сразу кодпен: https://codepen.io/alinaki/pen/rNoEOwX

*с некоторых пор я начал форкать пены, потому что пропадают иной раз

Теперь о применимости.

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

Ну а разработчикам промо-сайтов важность синхронизации действий и анимаций объяснять не надо.

Отличный пример забытых технологий 🙂

Не, ну серьёзно, оно с 75 Firefox доступно, как я мог его проглядеть?

А я знаю, как. Я же писал уже, что PR-служба Chrome работает прекрасно только в том случае, когда что-то появилось там первым...

#css #js #animations #promise #бородач

#статья дня

А знаете ли вы, котаны, что такое безопасный треугольник печали? Aka safe triangle.

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

Да-да, в вашей Windows или MacOS такое тоже есть. Проверьте сами.

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

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

В общем, с чего всё началось, зачем это нужно и как сделать сайты удобными — в первой интерактивной статье Шадида: https://ishadeed.com/article/target-size

Огромное количество примеров, просто новый уровень для автора. Моё увожение.

#css #ui #ux #safe #target

#новость дня

14 января 2006 года на конференции BarCamp в Нью-Йорке Джон Ресиг представил первую версию jQuery.

Что это значит?

Что jQuery сегодня исполнилось 18 лет!

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

Скольким подписчикам канала меньше? У вас всё ещё впереди, котаны :)

Да и у остальных тоже, камон.

#заметка дня

Итак, котаны, у нас сегодня офигительная информация от Глеба. Вы уже с ним знакомы, он автор библиотеки extended-fetch, расширяющей возможности стандартного fetch. Горячо рекомендую, кстати.

Слово автору.

Наверняка вы сталкивались с проблемой медленного eslint и очень хотели использовать все ядра процессора

По этой проблеме существует issue в репозитории eslint аж с 2015 года, однако лишь в ноябре 2023 года появился PR с добавлением параллелизма при помощи флага --parallel (к сожалению, он до сих пор не смержен).

В комментарии к issue автор PR описывает как его вдохновил пакет @mixer/parallel-prettier: создается очередь и распределяется по процессам с воркерами, а затем их результаты выполнения аккумулируются и создается общий отчет.

По его замерам на 6 ядрах время выполнения eslint снизилось с 4 до 1 минуты исключая правила Typenoscript, а с ними с 4 до 2 минут.

Конечно же, предстоит решить вопрос с кеширвоанием и шарингом кеша между процессами, ну и никуда не исчезнут нюансы парсинга Typenoscript.

И совсем недавно появился форк eslint с поддержкой параллельной проверки нескольких файлов.

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

Всем ускорения, котаны!

#eslint #multicore #parallel

#codepen дня

Яркий пример работы UI/UX сообществ.

1. Один популярный в iOS UX-сообществе автор, Робера Гелера, выдвигает идею. Например, индикатор pull-to-refresh совсем необязательно делать чем-то вроде спиннера или капли, как сейчас везде. Ну, типа, зачем это делать, когда есть скроллбар? Ну и делает пример на SwiftUI. Именно его я прикладываю к посту.

2. Потом приходит второй, популярный уже во frontend-кругах (ну Джей, конечно, кто же ещё), и говорит, что это можно легко сделать на CSS и JS.

3. Пока Джей телится с кодпеном, выходит Альваро Монторо и достаёт из широких штанин свой: https://codepen.io/alvaromontoro/pen/JjzEKWG

4. Спустя несколько часов Джей, наконец, прикладывает свой вариант: https://codepen.io/jh3y/pen/gOEgxbd

Грубо говоря, там, конечно, не настоящие скроллбары, а их имитация на SVG, анимированная через GSAP и ScrollTrigger.

Но! В скором времени нас ждёт Scroll-Driven Animations API и можно будет сделать всё то же самое. С нетерпением ждём.

Бросайте вызов устоявшимся практикам, котаны!

#css #ui #gsap #noscript

#баг дня

Кастомные скроллбары — штука прекрасная, хоть за 20 лет так и не нашедшая свой путь в стандарты. До сих пор полноценная стилизация возможна только в Blink aka Chromium и WebKit aka Safari.

В Firefox как не работало, так и не работает.

К слову, хорошая статья Ахмада Шадида на тему: https://ishadeed.com/article/custom-scrollbars-css/

Короче, суть бага: если вы решились таки стилизовать скроллбар, то не рассчитывайте, что Safari правильно применит стили по наведению мыши :)

Я, правда, не знаю, кому может прийти в голову менять стили скроллбара по hover.

Раз сработает, два сработает, а на третий — всё, нет. Смотрим видео, собственно.

Решение от Брамуса Ван-Дамма довольно забавное: нужно стриггерить инвалидацию стилей, для чего можно рандомной CSS-переменной присвоить неопределённое значение. Вот так:

.section:hover {
  --force-rerender: ;
}

Странные вайбы такие... IE-шные.

Короче, как будет ссылка на официальный багтрекер — закину.

Upd. Ссылка на багтрекер: https://bugs.webkit.org/show_bug.cgi?id=267575

#css #scrollbar #safari #bug

#статья дня

Скорее даже заметка от Софии Валитовой о порядке применения трансформаций в CSS, но концентрация знаний зашкаливает. В чём же весь вопрос?

Как вы можете помнить, не так давно все современные движки браузеров стали поддерживать определение трансформаций не только в правиле transform, но и в индивидуальных. То есть:

transform: translateX(20px) rotate(40deg) scale(1.5);

может быть записано как:

translate: 20px;
rotate: 40deg;
scale: 1.5;


Но так ли это на самом деле? И да и нет. В первом случае порядок важен, во втором — нет, он всегда будет translate👉rotate👉scale. И, естественно, повторяющиеся правила будут схлопнуты.

Подробнее — в заметке Софии. Вообще у неё очень много полезного выходит, глубоко копает в спеки.

#css #transform #бородач