#статья дня

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

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

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

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

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

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

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

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

#system #testing #бородач

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

Разобраться в концепциях Git просто не только лишь всем. Кто-то схватывает на лету, кто-то продирается сквозь ветки и листья документации. Кто-то забивает на всё, использует UI любимой IDE и ничего сложнее git pull origin master не разруливает.

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

И называется он git-sim, вот так вот буквально.

Нужно разрулить конфликтный cherry-pick? Слить несколько веток вместе? Посмотреть последствия reset, stash, rebase? Да запросто! Просто вместо git команда пишете git-sim команда и наслаждаетесь.

Ах да, ссылки на примеры от авторов (много видео и иллюстраций): https://initialcommit.com/tools/git-sim

И на GitHub проекта: https://github.com/initialcommit-com/git-sim

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

#git #sim #tool #бородач

#фишка дня

Многие (к сожалению, не все) кто хоть раз разрабатывал формы, сталкивались с элементом label (лейбл, ярлык, как вам угодно). И знают, что при правильном его использовании пользователю не приходится целиться мышью в галочку или радиокнопку.

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

Но не все знают, что лейбл можно повесить и на элемент button: https://codepen.io/alinaki/pen/XWjLedQ

Да, возможно, кнопке свой ярлык не нужен и даже MDN сообщает нам об этом, но!

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

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

А вот если вы не используете кнопки и балуетесь role=“button” на div-ах (в лучшем случае) — этой возможности вы лишены в принципе.

#html #button #label #бородач

#ссылка дня

Итак, файлы конфигурации, они же dotfiles.

.bashrc, .zshrc, .vimrc, emacs/.config/emacs, .gitignore

Понятно, почему dotfiles? У всех есть точка в начале названия самого файла или директории до него. В Unix-подобных системах такой файл будет скрыт от файлового менеджера или дефолтной команды списка файлов aka ls.

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

Я когда-то давно дико упарывался по сложной конфигурации своих машин. Эффективность over 9000. Но заметил одну проблему...

На машинах коллег и удаленных серверах эффективность падала до нуля. Я просто привык к своим стандартам.

Так что закончилось это минимальным набором вроде vimrc (все равно вим никто не использует больше) и глобального gitignore.

Так вот, ссылка дня представляет собой сборную солянку различных dotfiles на GitHub. Делитесь, котаны, кто что использует: https://github.com/topics/dotfiles

Может, я что-то упускаю?

#статья дня

Итак, каждый раз когда выходит новая версия React, просыпаются сотни пиарщиков других фреймворков, расписывая, почему же всем нужно перейти на их продукт.

Проблема тут в том, что за каждым из них стоит какой-нибудь стартап или ожидание инвестора. Да, конечно, было бы нелогично игнорировать тот факт, что за реактом вообще стоит Meta, но забывать о том, что пиар есть пиар тоже не стоит. Да и Meta накидывает нам проблем...

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

А статья дня от Тайгера Аброди — попытка объять и осмыслить весь путь реакта от внедрения хуков до его сегодняшнего состояния, т. н. concurrent React: https://tigerabrodi.blog/reacts-evolution-from-hooks-to-concurrent-react

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

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

#react #concurrent

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

Итак, потребовалось тебе написать статью. В статье что должно быть? Правильно, примеры. Где у нас лежат одни из лучших примеров?

Правильно, на CodePen.

Но как вставить кодпен на страницу, да ещё так, чтобы это все удобно хранить в гите и даже редактировать?

Ответ: использовать web-компонент <code-pen>!

Вот этот вот: https://darn.es/code-pen-web-component/

<script type="module" src="code-pen.js"></script>

<code-pen>
<pre>
<code>&lt;p&gt;Hello world&lt;/p&gt;</code>
</pre>
</code-pen>

Красота.

#component #codepen

#статья дня

Вечнозелёная (суть, никогда не устареет) статья Павла Лаптева о CSS Grid: https://pavellaptev.medium.com/learning-css-grid-with-the-swiss-2bd02e913fa

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

А уж кто знает о типографских сетках больше швейцарцев? Да в общем-то, никто. Как и о типографике, впрочем.

Давайте-ка сюда сразу добавим статью про золотой канон в сетках (golden canon grid): https://habr.com/ru/post/479580/

#css #grid #swiss #бородач

#тизер дня

План поста на вечер. Кто догадается, о чём он будет? :)

Upd. Раз никто не догадался, речь о Web Bluetooth API.

#заметка дня

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

Итак, на фото — коллекционные машинки из серии Shell Motorsport.

Их можно купить на любой заправке Shell за 10 или 5 евро, в зависимости от наличия распродаж, но есть нюанс.

Нюанс заключается в том, что машинки — на радиоуправлении. А точнее, на Bluetooth-управлении. Вот только в самой машинке никакой электроники нет, есть только два моторчика и четыре провода.

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

На ней, кстати, виден логотип Bluetooth 😛

Вот такой вот беспощадный маркетинг. Впрочем, машинки лицензированные и кто-то покупает их для коллекции, а один аккумулятор можно использовать для всех. Обеспечивает 5-10 минут игры.

Естественно, играть можно только включив пульт в проприетарном приложении от Shell.

На аккумуляторе есть два светодиода, разъём Micro USB для зарядки, четыре контакта и выключатель.

Понятное дело, что я не похвастаться вам их принёс (хотя я-то как раз умудрился попасть на распродажу и купить аккумуляторы и машинки по 5 евро), а показать, как можно работать с Bluetooth-устройствами прямо из браузера!

Да-да, получается, что за 5-10 евро можно приобрести готовый набор Bluetooth плюс аккумулятор и использовать его для чего угодно! Ведь что угодно лучше, если в нём есть Bluetooth. Потому, было бы неплохо научиться этим пользоваться. На входе радио, на выходе — четыре контакта, током на которых можно управлять.

И тут нам на помощь и придёт Web Bluetooth API. К сожалению, пока доступен он только в Chrome и я раньше вообще не понимал, зачем оно мне нужно. Не то, чтоб я теперь понимал больше, но почему бы и нет.

Ну что же, для начала было бы неплохо найти и прочитать протокол этих аккумуляторов. К счастью, эта работа уже проделана за нас: https://gist.github.com/scrool/e79d6a4cb50c26499746f4fe473b3768

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

Итак:

1. Организуем соединение по стандартному Bluetooth Low Energy протоколу, какое совпадение, ведь Web Bluetooth API как раз про него:

var device = await navigator.bluetooth.requestDevice({
filters: [
{ namePrefix: "QCAR-" },
],
optionalServices: [
CONTROL_SERVICE_UUID,
BATTERY_SERVICE_UUID,
CONTROL_CHARACTERISTICS_UUID,
BATTERY_CHARACTERISTICS_UUID,
]
});
await connectDevice(device);

2. Обмениваемся ключами шифрования
3. Формируем командный пакет, который состоит из последовательности байт: нажатые клавиши направления, включён ли турбо-режим, включены ли лампочки.
cmd[1] = 0x43;
cmd[2] = 0x54;
cmd[3] = 0x4c;
cmd[8] = 1;
cmd[9] = 0x50;

if (up) cmd[4] = 1;
if (down) cmd[5] = 1;
if (left) cmd[6] = 1;
if (right) cmd[7] = 1;

if (light) cmd[8] = 0;
if (turbo) cmd[9] = 0x64;
4. Отправляем!

Я отдаю себе отчёт в том, что не у всех может быть доступ к этим машинкам, да и не всем это может быть интересно, но мне очень нравится, что потребительская техника и embedded-разработка становятся намного ближе к веб-разработчикам, позволяя нам очень и очень многое :)

Саму страницу я выкатил на сервис Netlify Drop, мало ли у кого эти машинки имеются: https://6692b38da9380d4b1dbd0170--lucky-cat-37a5ab.netlify.app/

Доступ только с Chrome, даже в браузере Brave приходится отдельно включать нужные API.

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

И не надо мне говорить про клавиши на ноутбуке, это не мой 🙃

Ну что, котаны, все в embedded? :)

#codepen дня

А кому тут неожиданно уместных применений CSS 3D-преобразований?

Я, честно, не ожидал, что такой простой эффект будет настолько... эффектным. И никакого WebGL не требуется!

Вариант с видео: https://codepen.io/t_afif/full/mdzxJaa
Альтернативный вариант: https://codepen.io/gayane-gasparyan/pen/wvxewXO

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

Маги тут?

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

#ссылка дня

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

Оно как бы и да и нет. Например, давайте представим себе на минуту средних дизайнеров сайтов и приложений.

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

Как по их представлению человек будет пользоваться приложением? Припарковался, устроился поудобнее и оплатил?

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

И так с любым проектом. Думать надо.

Собственно, вот и ссылка на сегодня: https://a11ymyths.com/ru/

Мифы о доступности на разных языках. Всем читать, котаны.

#a11y #бородач

#ссылка дня

Кто-то: Идеальной страницы 404 не существует...

Пежо: подержи мой бокал вина!

https://www.peugeot.fr/pourquoi

Я даже картинку прикладывать не буду, чтобы не сбить настрой :)

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

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

Тут недавно в комментариях проскочил вопрос, чем так удобна командная оболочка zsh (Z shell) и набор расширений к ней Oh My Zsh. Чем оно лучше bash и вообще — ну зачем?

Ну короткий ответ — Tab умнее :)

Длинный — плагинами! Я не буду распыляться сейчас вообще, просто покажу один из свежих: автодополнение по npm-скриптам! Поддерживаются npm, yarn и pnpm.

Видео говорит само за себя, но что конкретно мне нравится — отображается не только команда, но и сам скрипт!

https://github.com/grigorii-zander/zsh-npm-scripts-autocomplete

Я сам только начинаю путь в zsh, но дефолтные настройки того же Oh My Zsh очень удобные.

#zsh #plugin #tool #linux #macos #wsl #бородач

#разгрузка дня

Ну хэ-тэ-эм-эл же? У кого как?

#баг дня

От подписчика в @htmlshitchat:
В мобильном сафари есть бага с залупленными видео: при проигрывании видео нажимаешь кнопку выбора вкладок, ждешь время для окончания одного цикла проигрывания, возвращаешься на табу и видео заморожено на 0 кадре. Хотят статус у него paused = false.

Проще всего проверять на коротких видео: https://codepen.io/mdss/pen/OJeVbRP

Репродюс: открываешь ссылку, ждешь начала видео. Жмешь кнопку выбора вкладки, ждешь 6 секунд, возвращаешься

Я для себя выявил два способа лечения, одно с подпиской на timeupdate (что дорогое решение), а второе это на подписку фокуса окна. Только нюанс в том, что надо не просто заново тригернуть метод play, а еще перед ним pause.

От автора канала:
На iPhone 14 Pro и iOS 17.5.1 трюк с вкладками к багу не приводит. А вот переключение между приложениями и такое же ожидание полного цикла видео — да.

Делитесь вашими результатами. А мы пока попробуем найти ишью в багтрекере.

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

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

Оказалось, изобретать ничего не нужно — уже есть https://jsonhero.io/

Сгруппирует по категориям, покажет связанное, отобразит картинку.

Удобно.

#json #viewer #бородач

#заметка дня

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

Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.

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

Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.

По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.

Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».

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

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

Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ

#css #table #keyboard #focus #a11y #бородач

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

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

И это — кто бы мог подумать, моя любимая тема — снова DSL для представления диаграмм! Но на сей раз, всяческого рода научных, от простых блок-схем до описания векторных полей и молекул!

Ну вот буквально, молекула на иллюстрации описывается простыми конструкциями вроде:

SingleBond(N2, C4)
SingleBond(C4, C5)
DoubleBond(C5, C6)

...и так далее. Прелестно же!

Короче, называется это всё Penrose: https://penrose.cs.cmu.edu/

Работает полностью в браузере, написано на TypeScript и открыто. Естественно есть биндинги к React.

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

#dsl #diagram #science #бородач