#фишка дня

Есть псевдокласс :disabled, который выберет отключенные поля. Есть псевдокласс :read-only, который выберет недоступные для ввода поля (только для чтения).

Вот только есть нюанс.

Отключенные поля они так-то тоже для ввода недоступны. Как же тогда быть?

Использовать селектор атрибута: [readonly].

Пример: https://codepen.io/elad2412/pen/wvpmjGR

Отличие disabled-полей от readonly: первые не отправятся с формой вообще, а значение вторых просто нельзя изменить.

Скелетон вернётся с новыми подробностями о фронтенде завтра.

#css #html #input #бородач

#шпаргалка дня

Уникальное предложение!

Берёте короче эту пирамиду код-ревью и ваши пулл-реквесты станут не только вкусными, но и полезными: https://www.morling.dev/images/code_review_pyramid.svg

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

#pr #process #work #бородач

#фишка дня

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

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

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

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

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

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

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

#js #array #sort

#фишка дня

Накидали секций, поставили к ним якоря, поставили ссылки вида #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 #бородач

#видео дня

Тут Андрей Ситник (PostCSS и Logux) выложил видео с митапа Злых Марсиан в Лиссабоне. Мне кажется, ни Андрея ни Марсиан отдельно представлять не надо 🙂

Продублирую выложеные видео здесь и, заодно, напомню об одном предстоящем событии, уже не Марсиан 🙂

1. Роман Шамин о том, как делать динамическую тему приложения: https://www.youtube.com/watch?v=K6ksuVzTz5U

2. Ольга Русакова о том, как продвигать опенсорс-проекты: https://www.youtube.com/watch?v=9Xg__hgL8zg

3. Глеб Строганов об адаптации иконок к особенностям шрифтаа: https://www.youtube.com/watch?v=0fQhhEM1AMw

4. Александр Байгельдин о Cloudflare Workers: https://www.youtube.com/watch?v=mjCMW8MpP30

5. И рэп про разработку, а заодно как сделать рабочую кассету на React и SVG, от Элизабет Оливейры: https://www.youtube.com/watch?v=bcbnkm2IZjk

А отдельное событие, о котором я хотел вам напомнить, это ViteConf, уже завтра: https://viteconf.org/23/

Сгенерируйте себе билетик и добавьте в календарь, котаны!

#events #vite

#codepen дня

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

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

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

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

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

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

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

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

#ссылка дня

В сентябре прошла Practical ML Conf от Яндекса и вот, наконец, стали доступны записи.

Наиболее интересные доклады:

1. Zero-cost fault tolerance в распределённом глубоком обучении

Руководитель группы модернизации нейронных сетей Яндекса, Алексей Морозов о том, что делать чтобы избавить специалистов от необходимости постоянно проверять работоспособность системы и вообще не думать об инфраструктурных вопросах

2. Multi-view pathology detection on medical images

Евгений Сидоров, Head of AI, Third Opinion, рассказал о методе анализа медицинских снимков на основе множественных проекций – он позволяет восполнить недостаток трехмерной визуальной информации. Интересно, что здесь применили опыт из самоуправляемых автомобилей.

Я в университете максимум такие изображения воссоздавал по данным, но уж никак не анализировал...

3. Геоэмбеддинги: векторное представление контекста в пространственной аналитике

Юлий Шамаев из ВТБ рассказал как его команда использует ИИ, чтобы определить лучшее расположение для банкоматов и банковских отделений.


Записи докладов доступны здесь

#фишка дня

Я не знаю, зачем вам эта информация, но в CSS в числе типов есть Infinity.

Ах, вы не знали, что CSS давно уже типизированный язык? Ну я напомню: https://t.me/htmlshit/1971

Скоро вернусь с постом, котаны, не переключайтесь.

#статья дня

Глупо считать, что сложные системы это привилегия айти, пусть даже айти зачастую пронизывает их с ног до головы. Хотя, конечно, стоит признать, что даже кажущиеся простыми системы на самом деле далеко не такие (на иллюстрации — система уведомлений в Slack).

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

Сегодняшняя статья имеет простое и понятное название: «How Complex Systems Fail», имеется перевод на русский: «Как ломаются сложные системы». Автор — доктор Ричард Кук. В смысле медицины доктор.

В чём суть? Всё просто: опасность – неотъемлемый атрибут сложных систем. На этом можно было бы и закончить, но там ещё 17 пунктов. Кому-то они помогут расслабиться, очень надеюсь.

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

10. Все действия специалистов – авантюры
14. Изменения создают новые виды сбоев
18. Работа без сбоев требует опыта работы со сбоями

Прописные истины? Возможно. Но их стоило собрать в одном месте. И собрали — аж в 1998 году.

В общем, всем рекомендую, котаны.

#system #testing

#статья дня

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

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

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

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

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


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

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

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

#фишка дня

Как предотвратить взаимодействие пользователя с элементом?

pointer-events: none — скажете вы.

Да. Но нет. А что насчёт клавиатурного фокуса? А скринридеры? Так не пойдёт.

Благо, есть решение!

Начиная с Firefox 112 и Safari 15.5 у нас наконец-то есть поддержка атрибута inert. Что это такое?

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

То есть, если вы зададите элементу атрибут inert, то:
1. Будет предотвращена обработка события click.
2. Элемент перестанет получать фокус и...
3. ...станет недоступен для скринридеров (исключён из a11y tree).

Поддержка уже давно есть в Chrome, начиная со 102 версии, и теперь, с вводом в строй Firefox 112 — есть во всех современных движках.

Ну и, естественно, присущие атрибуту свойства можно повторить ручками, вот пример: https://codepen.io/alinaki/pen/ZEqJepB

#inert #attribute #html #a11y #бородач

#такое дня

Вы, наверное, уже слышали, что Adobe выпустила Photoshop for Web: https://photoshop.adobe.com/

Работает только в Chrome, потому что — кто бы мог подумать — Google активно участвовал в создании и подгонке кода. По этому поводу даже выпустили статью о процессе создания и об используемых технологиях: https://web.dev/ps-on-the-web/

Впрочем, со времён порта Quake 3 мало что поменялось, разве что, используя всё тот же Emscripten, код на C++ стали собирать в WebAssembly, а не чистый JavaScript 🙂

Кстати, по этому поводу они в процессе добавили отладку WebAssembly в девтулзы.

Собственно, вот и статья: https://web.dev/ps-on-the-web/

А теперь здоровая такая ложка дёгтя.

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

И всё бы ничего, GPDR и прочее, вот только нюанс: не открывается лишь с личного профиля. С рабочего и дублёра — открывается.

И единственное отличие, что я нашёл — это второй язык в профиле браузера. Русский.

И есть у меня дикое предположение, что Adobe использует сложный фингерпринтинг и блокирует по языку, предполагая, что я в РФ. Даже если это не связано конкретно с языком — причина очевидна.

Не очень приятно. Поэтому, используйте https://www.photopea.com/ для ваших мелких задач. Меня не подводила, дизайны сайтов и превьюшек открываются отлично 🙂

#webassembly #chrome #photoshop

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

Вот как ты, котан, ищешь недавний баг в проекте?

Выкатываешься куда-нибудь, тестируешь, откатываешь последний коммит, да?

А что если баг оказался хитрее, обошел тесты и уже сидит на проде, ножками качает?

Тут в дело вступает встроенный в git инструмент бинарного поиска: git bisect. Принцип прост: помечаем заведомо плохой коммит или тег (последний) и заведомо хороший (ну, за сутки до бага):

$ git bisect start
$ git bisect bad # Current is bad
$ git bisect good v2.6.13-rc2

После чего bisect выберет средний коммит из этих двух. Теперь нужно собрать проект и протестировать.

Если эта версия работает хорошо, сообщаем bisect об этом: git bisect good. Ну или bad, если нет. И продолжаем; снова случится checkout коммита посередине.

Можно искать не только баги, но и любое изменение в коде. Так что вместо меток good и bad есть ещё old и new.

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

#git #bisect #бородач

#фишка дня

Понадобилось мне тут создать список полей для функции watch (обозреватель введенных значений) в react-hook-form.

Но дело в том, что поля в форме сгруппированы по одному из параметров. Ну, условно: feature1[goods], feature1[variants], feature2[goods], feature2[variants].

А watch на вход принимает одномерный массив строк. Так что же делать?

А тут нам поможет flatMap! Это как map, но любой возвращённый массив развернёт и включит в состав возвращаемого.

Удобно? Удобно.

#js #map #flatMap

#статья дня

Каким-то образом View Transition API ещё ни разу не освещался на канале. Пришло время это исправить! Особенно учитывая, что соответствующая статья разработчиков Chrome как раз недавно обновилась: https://developer.chrome.com/docs/web-platform/view-transitions/

Итак, что такое View Transitions API?

Это, собственно, то, что раньше называли page transition: анимации перехода между страницами сайта. Реализовывалось по разному в разных системах, помните PJAX? Хорошая была штука.

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

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

Бебебе анимации замедляют работу! Да, но замедляют, отвлекая пользователя. Об этом, впрочем, будет выложен видосик.

Ну и ещё пример анимации грида: https://codepen.io/bramus/pen/VwEXmqd

Никаких плагинов! Будущее здесь 🙂

#css #view #transition #бородач

#статья дня

Ох, что тут принесло!

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

Далеко ходить не надо: Google Sheets, Google Docs, Miro, да даже Microsoft в онлайн и не очень офисных пакетах это позволяет. И, кстати, онлайн игры это тоже самое что ни на есть приложение для совместной работы. Особенно это интересно в файтингах, но об этом потом.

Общее название структур данных для организации подобного это CRDT. Conflict-free Replicated Data Type, или, по-русски, бесконфликтная репликация данных.

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

Встречайте: https://jakelazaroff.com/words/an-interactive-intro-to-crdts/

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

#crdt #algorithm

#фишка дня

А давайте немного заглянем в будущее.

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

Так вот, если у вас есть Chrome Canary aka 120, можно пройти в chrome://flags, включить Experimental Web Features и увидеть возможности будущего элемента selectlist.

Уна Кравец собирает различные примеры использования в своей коллекции на Codepen: https://codepen.io/collection/QWeLGB?cursor=eyJwYWdlIjoyfQ==

Вот, например, меню из Airbnb с видеоиллюстрации: https://codepen.io/una/pen/PoXbgVW

А вот GitHub: https://codepen.io/una/pen/KKbNYbo

Там много разных. Повторю: только на Canary и только с Experimental Web Features.

Впрочем, естественно, давно имеется веб-компонент, ведущий себя ровно так же: https://github.com/luwes/selectlist-polyfill

Так что пробовать можно уже сейчас. Пора начинать!

P. S. я тут сделал sortable multiselect combobox на React Downshift. Надо кому инструкцию?

#select #html #future

#такое дня

Дежурное напоминание о том, что перфекционизм убивает мотивацию и не боги горшки обжигают.

Откуда скриншот? Да из типов для React: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L1258

Не то чтобы я вам предлагал везде писать any, но уж тормозить разработку и быть party pooper-ом TypeScript не должен.

P. S. обновил ссылку до React 18. До сих пор там.

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

#фишка дня

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

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

Одно из них — адаптация изображений для, например, тёмной или светлой темы или для людей, предпочитающих ограничение анимаций на экране.

В первом случае мы заменим картинку дня на картинку ночи, а во втором — гифку на фотографию.

В общем, смотрим иллюстрацию и кодпен: https://codepen.io/alinaki/pen/wvROeaR

И на закуску, универсальный компонент для отзывчивых изображений, Unpic: https://unpic.pics/img/learn/

#picture #media #theme