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

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

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

И если я, человек, который почти 10 лет уже работает в ИТ, испытываю трудности с поиском кнопки отмены подписки, то что же испытают люди, который едва умеют пользоваться смартфонами?

В общем, на коротком видео в UI представлены две кнопки, открывающие всплывающее окно управления подпиской. Но ни в одной из них нет кнопки "отменить подписку". Конечно, первый импульс - написать в поддержку, но мне часто интересно докопаться до сути и я начал слишком дотошно клацать по интерфейсу, чтобы всё-таки понять, как ее отключить.

Как оказалось, та самая кнопка находится в разделе Вопросы и ответы. Любопытно, как спрятано. Это получается уже третья кнопка на странице, которая открывает Управление подпиской, но только в ней есть кнопка Отменить.

Как на ваш взгляд, это про пользователя?)

#ux #wildberries

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

#ux #wildberries

Завершаю посты про Вайлдберрис. Давайте вместе посмотрим как происходит отмена подписки.

Мы уже знаем, что отменить подписку можно только из раздела Вопросы и ответы. Вероятно, у фронтенд-разработчиков есть KPI на количество кликов и скролла на странице 😀

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

Неприятная обратная сторона эпохи маркетплейсов.

#ux #wildberries

В своё время для меня стал открытием тот факт, что метод fetch в JavaScript не кидает исключения на 400-х и 500-х ошибках, так как по сути, это всё валидные ответы сервера, и нам, разработчикам, решать, как эти ошибки обрабатывать.

В методе fetch() promise будет отклонён (reject) с TypeError, когда случится ошибка сети или не будет сконфигурирован CORS на стороне запрашиваемого сервера, хотя обычно это означает проблемы доступа или аналогичные — для примера, 404 не является сетевой ошибкой. Для достоверной проверки успешности fetch() будет включать проверку того, что promise успешен (resolved), затем проверку того, что значение свойства Response.ok является true.

Для моего неокрепшего ума начинающего веб-разработчика было малопостижимо, что ошибка 404 ошибкой самой по себе не является и это моя задача проверить статус запроса и соответствующе отреагировать. Лично по моему скромному мнению, обработка ошибок - одна из самых нудных задач в разработке, потому самому обрабатывать такую банальщину, как 400-е ответы, кажется уж совсем не современно.

Да, конечно, вы можете справедливо мне посоветовать Axios, TanStack или RTK Query и будете правы, но когда сам по себе проект является очень маленьким, почти домашним, тащить туда целую библиотеку для запросов кажется избыточным, потому было грустно осознавать, что придется все оборачивать в try\catch.

Однако, поковырявшись в интернетах я набрел на вот такую либу: ky.
По сути, это обёртка над fetch, но с упрощенным синтаксисом и очень широким списком фичей, в виде автоматических повторов запросов, автоматического парсинга JSON, понятных исключений при 400-х и 500-х ошибках и много еще чего другого.

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

Происходит запрос => Токен истек => Запрос рефреш-токена => повторный запрос.

ky.extend({
  hooks: {
    afterResponse: [
      async (request, options, response) => {
        if (response.status === 401) {
          const newToken = await refreshAuthToken();
          request.headers.set('Authorization', `Bearer ${newToken}`);
          return ky(request);
        }
      }
    ]
  }
});

Я наткнулся на этот инструмент, когда изучал JWT-токены. Пытаясь реализовать сценарий работы с ними, мне не понравился подход с Interceptors в Axios. Очень уж громоздко.

#javascript #React #dx

#code #dry #dx

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

Один из таких принципов называется DRY (от англ. «сухой»). Аббревиатура расшифровывается как Don’t repeat yourself (Не повторяйся). На мой взгляд, название интуитивно понятное, нет смысла дублировать строки кода по сто раз, если у нас есть инструменты, чтобы этого избежать.

А вот наглядный пример "на пальцах" для тех, кто далек от программирования:

Была у меня история как-то, очень объемная и многогранная.

Еще когда я работал в Москве, мне купили ноут для работы Asus Vivobook S14. Прикольный, OLED-экран, 4К разрешение, ГПУ, хоть и встройка, но Back 4 Blood тащил на высоких, только тени убавлял. Но был у него такой прикол, когда пускаешь звук через Bluetooth-колонку и оставляешь ноут стоять, он уходит в сон, а сигнал блютуза начинает прерываться, превращая фоновое прослушивание музыки во вьетнамскую пытку. Тут можно видео посмотреть, как оно выглядело и звучало. Еще он включался кнопкой не с первого раза, когда работал от батареи, но поскольку ноут стоял у меня статично на столе по большей части, меня это не так сильно беспокоило.

Понятно дело, первое, что я сделал, это обновил все драйвера и биос файлами с сайта производителя, но это не поменяло абсолютно ничего. Поверхностно погуглив и не найдя очевидных решений, я решил не париться и отдать его по гарантии. Я пришел в сервисный центр, попытался все объяснить, но честно, сложилось впечатление, что меня никто не слушал. Я в этом убедился, прочитав описание проблем на квитанции СЦ. Написали вообще не то, о чем я рассказывал. Ну бог с ним, гарантия есть, пусть разбираются. Ноут забрали, вернули спустя 45 дней (!!!), сказали, что все пофиксили прошивкой биоса🤪. Я при них пытаюсь включить ноут и он не заводится.

Я вопросительно смотрю на работника СЦ, он не понимает вопроса в моих глазах. И тут я совершил первую ошибку из многих, которые потом последовали. Я решил забрать ноут и нормально протестить его дома. "Ну мало ли".

Конечно же, ничего не поменялось и я решил вернуть его в СЦ опять. Но вот незадача. Я пролил кофе прямо под ноут, когда работал. Ошибка номер два. Я думаю, дальше нет смысла угадывать, меня стали всячески отбривать на той почве, что я его залил и это я лох, сломал себе ноут. Я попытался воззвать к совести работника и сказал ему, мол, я же при вас показывал эту проблему еще когда приносил его в первый раз. Он сразу же открестился, что ничего не помнит и не знает. Ошибка номер три.

После долгого конфликтного разговора он все-таки решил его забрать, мол, пусть руководство решает ремонтировать по гарантии или нет. В итоге мой ноутбук пролежал у них больше полугода. Я звонил каждые две недели и мне сначала говорили, что ждут детали на замену с Кореи, потом они его сушили и диагностировали, ведь плата залита, а когда я уже пришел с досудебкой, мне его вернули с ответом СЦ, что нет технической возможности провести ремонт. В качестве компенсации дали на пиво, а я дальше этого не полез, так как ноут всё-таки покупал не я. Убрал его в долгий ящик.

Тут заканчивается эта избыточная прелюдия и начинается интересная техническая часть.

#asus #service #vivobook #bluetooth

У меня есть вредная черта: если что-то не работает как задумано, это нужно либо починить, либо сломать окончательно в попытках. Так я и взялся за этот несчастный ноутбук. Переустановил Windows раз тридцать, не меньше. Кстати, из этого вынес интересный опыт: если купить NVMe-диск, положить его в бокс и ставить Windows с него через USB 3.1, система устанавливается за считанные минуты.

Пробовал разные сборки Windows 10 и 11, ставил Debian — на нём всё работало идеально. Ковырял режимы питания, менял Bluetooth-модуль, пробовал разные драйверы из интернета, спрашивал на Stack Overflow и подобных форумах. Был даже забавный момент: воткнул USB-адаптер Bluetooth — и он вёл себя точно так же, что окончательно убедило меня: проблема не аппаратная.

Уже не помню по какой логике, но я был уверен, что дело в BIOS, и мне нужно найти для него обновление. Тут начался настоящий квест. Сначала разместил объявление на Profi.ru, обещая золотые горы тому, кто решит проблему. Нашлось несколько энтузиастов, пытавшихся помочь удалённо, но, к сожалению, безуспешно. Потом попался возрастной мужчина с советским техническим образованием — блестящий профиль на Profi.ru, миллион выполненных заказов, ноль жалоб, сплошные пять звёзд. Решил: вот оно, советское качество, наверняка поможет.

Встретились, поговорили, ударили по рукам. Через неделю он звонит и говорит, что установил свою «особую» Windows и прошивку BIOS от другой модели ноутбука — теперь всё работает отлично. Больших надежд я не питал, но удивился, когда на встрече ноут сразу включился нормально. Но это было просто совпадение 😮. После этого я настолько отчаялся, что отправился в LinkedIn и стал добавляться в друзья ко всем, кто разрабатывает ПО в ASUS — нашим, корейцам, американцам. Набрал кучу контактов, все обещали уточнить у коллег и вернуться ко мне, но никто так и не ответил 😶. Техподдержка ASUS тоже себя проявила: в одном из моих постов на Reddit американский сегмент компании попросил прислать им серийник, после чего ушел во тьму, а поддержка Казахстана не давала советов глубже, чем переустановка драйверов. Они еще выдали одно замечание интересное, но чтобы не бежать вперед паровоза, об этом расскажу в следующем посте.

Ах да, я даже нашёл на Avito всех, кто продавал ноутбук моей модели. Писал им и просил подтвердить, есть ли у них такая же проблема. Один человек подтвердил и поддерживал со мной связь — вместе тестировали и строили теории.

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

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

Поиски продолжились. И тут я наткнулся на режим Modern Standby в Windows.

#Windows #bluetooth #drivers #asus #vivobook

Внезапно представилась возможность сделать своё расширение для VSCode. Товарищ обратился за советом, хотел узнать, как можно работать с комментариями в .json файлах. Я поделился тем, что знал, и сказал, что есть формат .jsonc, который поддерживает комменты, но парсинг в обычный json он не пройдет. Потолкались идеями, подумали о том, что было бы здорово написать какой-то скрипт, который бы удалял бы комменты, висящие запятые и лишние пустые строки и выдавал это всё в обычный .json.

Сказано - сделано. Скрипт я накидал, но как его встроить в работу? Сразу подумал про магазин расширений в VSCode. По быстрой консультации с DeepSeek выяснил, что нужно сначала сделать учетку на Azure DevOps, там выпустить токен для идентификации своей организации и использовать его в при регистрации в качестве организации в магазине расширений. Практика оказалось гораздо проще: Azure вообще не понадобился. Можно просто создать учетку на сайте магазине расширений и там дропнуть файл с расширением .vsix, после чего он сразу попадает в магазин, валидируется и попадает в индексацию поиска. Azure нужен, чтобы получить упомянутый токен и с его помощью публиковать расширения напрямую из VSCode. Я в рамках своей небольшой задачи обошелся просто загрузкой на сайте.

Сама разработка расширения довольно любопытная. У VSCode есть свои встроенные методы, которыми можно пользоваться.
Например, чтобы добавить команду в палитру команд (ctrl + shift + p), можно воспользоваться методом vscode.commands.registerCommand.
Или, например, чтобы запускать команду на сохранении документа onDidSaveTextDocument, но нужно убедиться, что скрипт стартует вместе с приложением. В package.json в activationEvents добавить "onStartupFinished".

Если кто не знает, VScode написан на Electron. Это фреймворк для написания десктоп приложений на JavaScript, потому мы можем использовать привычный npm при написании расширений.

Само расширение довольно простое: библиотекой strip-json-comments вычищаются комменты, лишние запятые, а потом всё это парсится в JSON, чтобы почистить форматирование.
Посмотреть можно тут: GitHub и VSCode Marketplace.

Есть еще пара идей, как расширить функционал скрипта. Если дойдут руки - поделюсь.

#vscode #Code #javascript #extension #github #json

Как-то на одном из предыдущих мест работы был спор с руководителем касательно того, как лучше валидировать данные пользователя. Предлагалось на фронте делать очень сложную валидацию на всё: на знаки препинания, смайлики, нелатиницу и даже цифры. Я предложил переместить все сложные проверки на бэкенд, а на фронте остановиться на простых обработках, вроде минимального и максимального количества символов и проверки регулярок для телефонов и почты.

Конечно, вопрос "Как лучше?" всегда стоит внутри команды, грань между тем, чтобы сделать недостаточно, и чтобы сделать слишком много зачастую очень тонка. Я в итоге решил поискать вдохновения на сайтах популярных компаний и набрел на сайт icloud.com. Стал в поля ввода данных пихать всё подряд, разные знаки, символы и додумался начать пихать туда Эмодзи.

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

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

Вспоминается принцип Парето: 20% усилий дают 80% результата, а остальные 80% усилий — лишь 20% результата.

А вы как думаете, стоит ли на фронте обрабатывать все узкие случаи валидации формы?

#icloud #frontend #webdev #apple #emoji

Are you ready, kids?

Продолжаю историю про свой Vivobook. Мне кажется, этот пост будет самым интересным из серии. В какой-то момент я начал ковырять журнал событий в Windows 11 и обнаружил там запись, связанную с переходом системы в режим Modern Standby. Как оказалось, в этот режим переходил мой ноутбук каждый раз, когда по таймауту выключался экран и начинались лаги с Bluetooth.

Здесь стоит взять паузу и ввести необходимые для повествования понятия. Возможно, многие знают, что классический режим сна, в который уходит Windows, называется S3 (Suspend to RAM). В этом режиме система обесточивается, за исключением оперативной памяти, где сохраняется вся работа. Однако, с приходом мобильных устройств в наши жизни, Microsoft посчитала, что было бы здорово унифицировать подходы к циклу питания устройств и выкатили Modern Standby.
Цель Modern Standby — сделать выключение и включение ПК мгновенным, как на смартфоне или планшете. Устройство не полностью выключено, а находится в состоянии очень низкого энергопотребления, но при этом может выполнять некоторые фоновые задачи.

На бумаге, казалось бы, красота. По кнопке включения ноутбук моментально включается и выключается, действительно, как телефон. Я даже успел лицезреть эту технологию на своем ноутбуке, пока ковырялся, но как оно часто бывает, теория расходится с практикой. Для идеальной работы Modern Standby требуется безупречная оптимизация:
• Драйверов (особенно Wi-Fi, аудио, сенсорной панели)
• Прошивки UEFI
• Фонового ПО (антивирусы, облачные клиенты, мессенджеры)

Если хотя бы один компонент "будит" систему слишком часто или не даёт ей уйти в Modern Standby, потребление энергии в "сне" становится сравнимым с работой в простое, что приводит к разрядке батареи за несколько часов.
Modern Standby принес много новых проблем, которые сделали использование этого режима головной болью для пользователей. Настолько большой, что даже крупные техноблогеры, вроде LTT, делали несколько видео на эту тему.

Основной проблемой стал чрезмерный разряд батареи в режиме ожидания:
• Драйвера: если драйвер устройства или фоновое приложение не оптимизированы для Modern Standby, они могут не давать системе войти в режим энергосбережения, что приводит к повышенному потреблению энергии.
• Сетевые активности: Постоянный опрос почты, синхронизация, обновления.
• Пробуждения таймера: Планировщик задач Windows или другие программы могут будить систему для выполнения задач.

Для чуть более полного понимания еще стоит ввести термин DRIPS. Расшифровывается как Deepest Runtime Idle Power States – состояние устройства, в котором оно может уйти в глубокий режим простоя и для обслуживания которого не требуется пробуждение ЦП.
Например, если драйвер Wi-Fi не умеет правильно работать в DRIPS, он может либо вообще блокировать вход в Modern Standby, либо войти в него, но продолжать активно сканировать сети, обмениваться пакетами.

Так что, если у вас какие-то странные проблемы с относительно новым ноутбуком, вроде непонятного перегрева в режиме сна, случайных включений экрана или быстрой разрядки батареи, то возможно стоит посмотреть в эту сторону.
Я столкнулся именно с проблемой перехода в Modern Standby, которую я решил костылем, но тем не менее – решил, и это заняло почти 2 года. В следующем посте расскажу детально, что именно было с моим ноутбуком, так как этот пост получился довольно длинным.

#vivobook #modernstandby #laptop #asus #s3 #s0

Для тех, кто любит страшилки перед сном:

#1c #frontend