14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Воздух мы вам не продадим!
Даже не уговаривайте😏
Зато готовы дать крепкую предпринимательскую базу тем, кто хочет открыть бизнес.
Идти ли в бизнес или лучше остаться в найме?
Кому и как продавать?
Как платить налоги, чтобы не кусалось и не болело?
Как вести учёт денег?
Эти и другие вопросы разберём на марафоне «Бизнес с нуля», который пройдёт с 10 по 19 января. Вход свободный.
Марафон проведут Игорь Олемской и Антон Скобин, руководители образовательного B2B-центра «Слёрм».
«Слёрм» — неправильная компания: в ней сотрудники сами выбирают, чем заниматься и каким способом решать задачи. Здесь не боятся совершать ошибки и очень мало менеджерского контроля.
На марафоне Игорь и Антон будут опираться на опыт «Слёрма» и поделятся секретами создания таких компаний.
Посмотреть программу и записаться на марафон
Реклама. ООО "СЛЁРМ". ИНН 3652901451.
#фишка дня
Как использовать CSS-переменную в псевдоэлементе?
Просто так в content запихать её нельзя. Т. е.
.cell::before {
content: var(--i);
}
.cell::before {
counter-reset: i var(--i);
content: counter(i);
}
#ссылка дня
Сложно давать ссылки на что-то поддерживаемое какой-нибудь компанией и не быть обвиненным в рекламе.
Но, если честно, есть несколько компаний, которых я готов упоминать всегда даже бесплатно. Ну просто потому что они отвечают моим каким-то внутренним критериям качества и репутации.
Но ладно, хватит вводных. Вот откуда вы, господа и дамы, берёте тестовые задания чтобы потренироваться?
Самые прожженные, я точно знаю, натурально ходят по собеседованиям раз-два в квартал и берут оттуда. А что если у меня нет столько смелости и наглости?
На помощь приходят подборки тестовых! Вот, например, от Хекслета: https://github.com/Hexlet/ru-test-assignments
Собрано очень много заданий от различных компаний, группировки по технологиям нет, что минус, но сгруппированы по компаниям, что дает возможность оценить стек.
Полезная штука, котаны. И не только для начинающих!
#work #assignment #list #бородач
🔤 У нас часто спрашивают: "Какие каналы мы читаем в телеграме?"
Хотим посоветовать крутой канал CodeRoll | Frontend, где вы найдете:
- задачи для собеседований
- полезные статьи
- свежие новости из мира Frontend разработки
Проведи январь с пользой! 🎄
Участвуй в новогоднем марафоне от онлайн-школы METHED. Получи возможность создать свой собственный "Интернет-магазин мебели" при помощи react.js. Мы предлагаем полное погружение под руководством опытного куратора, который будет помогать тебе на каждом этапе.
Марафон проходит с 8 по 21 января. Стоимость всего 1990 рублей (вместо 5490 рублей).
Проведи январь с пользой и развивай свои навыки вместе с нами!
Регистрируйся по ссылке:
https://tglink.io/17571b58f30c?erid=LjN8KXqcG
Реклама. ИП Кислов Сергей Михайлович. ИНН 272198970024.
#фишка дня
Я долгое время не понимал, нафига нужен 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;
}
mask:
linear-gradient(transparent, transparent),
linear-gradient(white, white);
mask-clip: padding-box, border-box;
mask-composite: intersect;
#прекрасное дня
Ни больше ни меньше. Прекрасное. Потому что я не могу это описать каким-то другим словом.
Я вообще сел другой пост писать, но наткнулся на эти карточки в моей твиттер-ленте.
Не, я понимаю, мода на 3D-карточки в лендингах давно прошла, все эти перевороты и шевеления мышкой… Это всё прошлое десятилетие.
Но ребят, я за всю свою карьеру и представить не мог, что можно настолько точно передать эффект переливающейся металлизированной карточки настолько точно манипулируя одним только положением фона! Это какое-то безумное умение сочитать mix-blend-mode, градиенты и SVG-фильтры.
Вам срочно надо зайти и посмотреть самим: https://poke-holo.simey.me/
Прекрасно выглядит даже на мобильных устройствах.
Ну и гитхаб, конечно: https://github.com/simeydotme/pokemon-cards-css
Крышу сносит, потрясающе. И без WebGL.
#css #3d #gradient #бородач
Тревожитесь о том, что делаете недостаточно, что вы хуже других и, чтобы чего-то достичь - нужно работать еще больше?
Это загоняет вас в бесконечный бег по кругу - быть лучше, зарабатывать больше, чтобы наслаждаться жизнью в полной мере, уделять время семье и хобби, получать удовольствие от работы, копить на собственный бизнес.
Гонка, в которой нет места для отдыха, для семьи, для отношений.
Зайдите на канал Лезь в свое дело, в котором бывший директор кадровой компании и психотерапевт с 15-летней практикой пишет о том, как справляться с хронической усталостью, страхом, неуверенностью в себе:
Выгорел, но не могу бросить работу
Как остановить тревогу прямо сейчас?
Считаю себя хуже других
Подписывайтесь на канал Лезь в своё дело и начинайте делать то, чего хочется по-настоящему.
Что выбрать для изучения фронтенд-разработки: интенсив, вебинар, курс?
Выберете бесплатный интенсив от школы "METHED", на котором вы сможете попробовать свои силы, познакомиться поближе с преподавателем и узнать секретные фишки работы.
За 4 дня (с 26 по 29 декабря) мы вместе создадим полноценный сайт-конструктор, сделаем его адаптивным и реализуем функционал на JavaScript. И это абсолютно бесплатно!
Все уроки продуманы до мелочей, а значит вы точно сможете повторить все алгоритмы и прийти к результату.
👉 Для бесплатного участия регистрируйтесь прямо сейчас: https://tglink.io/e85e080c037d?erid=LjN8K8Nwc
Сделайте шаг в мир IT уже сегодня!
Реклама. ИП Кислов Сергей Михайлович. ИНН 272198970024.
#инструмент дня
Ладно, мы все можем согласиться, что у TypeScript замечательный офсайт, прекрасная документация и удобная песочница, но в мире есть сотни тысяч JS-библиотек и десятки тысяч из них либо написаны на TS, либо имеют выделенные типы.
А единой документации по этим типам нет!
Точнее, не было, но теперь вышел https://tsdocs.dev/
Это система поиска по существующим пакетам с типами. Она установит нужный пакет, распарсит типы и JSDoc и отобразит в удобном формате.
К слову, котаны, что вы предпочитаете по cmd- (ctrl)-click в редакторе? Прыгать к имплементации, или к типам?
Я вот — к имплементации, прыгать к типам меня раздражает.
#typescript #dts #types #doc
Отвлекись от серьезных тем, заходи к нам и наслаждайся смешными мемами и гифками про беспощадную борьбу между программистами и кодом!
@nophumor
#библиотека дня
Нужно ли вам представлять date-fns? Думаю, нет. Но всё же: это небольшая и весьма эффективная библиотека для работы с временем и датами. В отличие от (уже устаревшего) moment.js она не является монолитной и во многом опирается на современные API.
Так вот, сегодня вышла третья версия и она знаменует собой большой шаг вперёд:
- операции с датами в честном UTC (и поддержка расширений класса Date)
- только именованные экспорты
- плоская структура модулей
- 100%-е покрытие типами TS (библиотека полностью переписана на TypeScript)
Полный список изменений и немного истории создания можно почитать в блоге разработчиков: https://blog.date-fns.org/v3-is-out/
#date #lib
#фишка дня
А приходилось ли вам, котаны, плавно менять текст?
Тогда вы не могли не заметить раздражающее мерцание, особенно заметное на одинаковых частях текста.
Причина, по которой это происходит, не уложится в один пост: это много-много математики цвета и режимов смешивания. Для такого у меня подготовлена вам целая статья: https://jakearchibald.com/2021/dom-cross-fade/
А фишкой же дня будет простое решение проблемы:
mix-blend-mode: plus-lighter;
#мероприятие недели
В Москве пройдёт митап для начинающих IT-специалистов
28 спикеров, 19 лекций: backend, frontend, data science, кибербезопасность, прокачка IT-карьеры и многое другое.
Участников ждут:
🔹 лайфхаки, как вырасти от джуна до сеньора;
🔹 прожарка резюме;
🔹 нетворкинг с 1000+ участниками митапа и спикерами;
🔹 after-party.
P.S.: 🎁 Каждому участнику подарят велком пэк с мерчем.
Участие бесплатное!
📍 Москва, ул. Покровка, д. 47 (м. Красные ворота / м. Курская)
🔗 Зарегистрироваться
#ds #backend #frontend #infosec
Реклама. БАНК ГПБ (АО). ИНН 7744001497.
Найден полезный канал по Frontend - разработке!
Его ведёт Senior Frontend разработчик Катя! Она:
▫️ пишет обучающие статьи на простом языке для начинающих разработчиков с примерами по HTML, CSS, JavaScript, TypeScript, Angular;
▫️ ведёт рубрику #ПроходимСобеседование, где делится вопросами из разных собеседований и даёт подробные инструкции для правильного ответа на них;
▫️ устраивает опросы и даёт практические задачи для лучшего усвоения материала.
На канале реально много полезного. Если для старта ждали знак свыше, то знайте - это он! Не упускайте возможность 😉
Присоединиться!
#заметка дня
Многим из вас знакомо видео выше. неудивительно, ведь я использую его как промо канала. Не всегда удачно, но почти 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);
nth-child: https://codepen.io/alinaki/pen/PoLNMgjnth-child, чтобы выйти за пределы главной диагонали пришлось внести ограничения по номерам элементов, иначе, начиная с 9 диагонали, затрагивалась 2 (из 12):.cell:nth-child(7n + 10):not(:nth-child(-n + 17)) {
--i: 10;
}
:nth-child(-n + 17) буквально выделяет первые 17 нод.each r, rx in rows
each c, cx in cols
- d = rx + cx + 1
.cell(style=`--dia: ${d};`)
🤑 Стать программистом в 2024 году и перейти на удаленку легче, чем кажется!
Освойте один из самых популярных языков программирования в мире - Python.
👨💻 9 января - старт онлайн-курса «Основы программирования на Python», где вы получите:
— Максимум практики
— Сертификат об обучении
— 100% возврат средств, если вам не понравится курс
— Подробные методички к урокам и чат учеников
Курс охватывает все основные концепции Python, начиная от базовых операций и структур данных, таких как списки и словари, заканчивая более сложными темами - функции, модули и обработка исключений.
🔥Оставляйте заявку на промодоступ до 19 января и начните зарабатывать удаленно!
Реклама. ООО "АКАДЕМИЯ КОДЕБАЙ". ИНН 9706020333.
#заметка дня
Элемент 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
#фишка дня
Раз :has уже везде, грех не воспользоваться. Тем более, некоторые селекторы получаются весьма угарными.
Например, как затемнить все элементы, кроме того, на который наведена мышь?
Вот как-то так:
main:has(article:hover) article:not(:hover) {
opacity: 0.3;
}
main:hover article {
opacity: 0.3;
}
main:hover article:hover {
opacity: 1;
}
#просьба дня
Дамы и господа, кто уже отошёл от новогодних праздников и у кого есть аккаунт на GitHub.
Наставьте реакций, пожалуйста, под этим багом в Telegram MacOS: https://github.com/overtake/TelegramSwift/issues/1056
Я дико устал переписывать посты по два раза из-за сбоев в форматировании :(
#заметка дня
Недавно я в серии ностальгических постов вспомнил о своём первом крупном проекте, который жил без малого 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
#релиз дня
Итак, котаны, что мы с вами пропустили?
А пропустили мы релиз Firefox 121!
Что в нём такого важного? Ну, как минимум, поддержка :has aka родительский селектор!
Конечно же, он не родительский, но то такое.
Теперь поддержка имеется во всех трёх движках, а это значит, что можно вовсю применять!
На что способен :has
1. Подсветка колонок: /channel/htmlshit/2396
2. Анимация в стиле MacOS Dock: /channel/htmlshit/1873 с полным разбором: /channel/htmlshit/1876
3. Весёлая анимация букв: /channel/htmlshit/1634
4. Когда вышел Chrome 105, разработчики разродились большой статёй: /channel/htmlshit/1391
5. Джим Нильсен тоже не отставал: /channel/htmlshit/1313
6. Зум на определённых частях изображения: /channel/htmlshit/1206
7. Ну и шикарнейший тред от Веса Боса в Твиттере о десяти применениях новинки: https://twitter.com/wesbos/status/1737148340322652632
В общем, не переключайтесь. Будет ещё :)
#css #has #future
#фишка дня
Валидация форм в HTML, мягко говоря, раздражает. Я даже не буду начинать о том, что все встроенные способы валидации или выглядят уродливо, или имеют странную логику.
Тем не менее, браузеры пытаются и много лет назад у нас появились селекторы :invalid и :valid.
Как несложно догадаться, они целятся в поле ввода, не соответствующее критериям и соответствующее критериям соответственно. Например, required.
Я сел на книгу с каламбурами, простите.
Казалось бы, вот оно, счастье! Пишем что-то такое:
input:invalid ~ .invalid-message {
display: block;
}:invalid в том, что пустое, не тронутое пользователем поле, изначально не удовлетворяет заданным условиям! И сообщение будет висеть сразу, раздражая всех.
#инструмент дня
Есть категория инструментов, наиболее сильные в тех средах, которые все кругом ненавидят.
Это всяческого рода таблицы с 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
#инструмент дня
Вообще, это обучающий ресурс с хорошими визуальными примерами по селекторам в CSS. Но я не знаю, какой хештег придумать :)
Вот он, CSS Selectors: A Visual Guide: https://fffuel.co/css-selectors/
Однозначно подойдёт даже опытным верстальщикам: освежить знания про ~, $= и удостовериться, что ты понимаешь :has — очень полезно.
Удобная навигация, иллюстрации, конечно, не Джош Комо и даже не Ахмад Шадид, но с задачей справляются :)
Кстати, https://fffuel.co/ в принципе очень большой проект с кучей разных инструментов для генерации интересных градиентов и паттернов. Точно стоит вашего внимания, котаны.
#css #education
#заметка дня
Почему-то так получилось, что на канале очень мало WebGL и я даже React Three Fiber не обозревал. Думаю, надо исправить.
Давайте сразу ссылку на демо, а потом поясню, что к чему: https://nrzns4.csb.app/
Итак, для работы с производительной 3D-графикой у нас имеется WebGL. Но работать с сырым API никому не охота, поэтому вокруг него образовалась куча фреймворков, и наиболее популярный — Three.js.
А вот чтобы объединить React-приложение и сцену (так принято называть 3D-работы) — имеется интересная штука с названием React Three Fiber. В итоге можно с лёгкостью смешивать HTML, хуки, сцены и вообще любой код вместе.
Как-то так:
<Canvas camera={{ position: [0, 0, 20], fov: 15 }}>
<Lens>
<Background />
<Words />
</Lens>
</Canvas>
‼️Всем кодерам посвящается‼️
Code ready — лучшие подборки эффектов, анимаций и многое другое для твоих проектов, сразу с готовым кодом и примером их использования.
🪩 Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_ready
#инструмент дня
Что быстрее всех на свете?
Неправильно! Быстрее всех на свете Lightning CSS. В чём конкретно быстрее это сейчас не важно :)
Важно то, что это шикарный инструмент для парсинга, последующей обработки, сборки и минификации вашего CSS. Создан ребятами из Parcel и написан, как это нынче принято, на Rust. А ты уже учишь Rust?
Вот: https://lightningcss.dev/
Объединяет в себе возможности CSSNano, ESBuild и PostCSS. Кстати, не только быстрее, но ещё и размер сжатого файла получается меньше.
Основан на коде из Firefox, поэтому назвать его появившимся из ниоткуда просто невозможно. Lightning CSS обработает CSS точно так же, как браузер, построив правильную CSSOM (Object Model, по аналогии с DOM), с учётом типов токенов.
Естественно, имеется разлапистая поддержка плагинов и CSS-модулей.
Кстати, молния понимает @import, за бандл не беспокойтесь.
И вообще, сам Андрей Ситник предлагает мигрировать с PostCSS: https://web-standards.ru/podcast/381/#01:17:39
Пробуем?
#css #lightningcss #rust #бородач
#инструмент дня
Ох что я вам нашёл! Просто пушка.
Как вам отладка на мобильных устройствах? Ну только честно. По-моему — мучение.
Да, можно подключить телефон кабелем к компьютеру и пользоваться консолью настольного браузера. Можно купить доступ к Browserstack или аналогам и разруливать косяки на десятках устройств. Ах да, можно ещё воспользоваться эмулятором!
Но почему бы просто не воспользоваться девтулзами? Ну потому что в мобильных браузерах их нет.
Зато есть Eruda! Встраиваемая консоль для мобильных браузеров: https://github.com/liriliri/eruda
Демо: https://eruda.liriliri.io/
В принципе, выглядит как сильно упрощённая копия хромовых вебтулзов и вполне себе может помочь в отладке, особенно учитывая количество всяческих официальных и не очень плагинов от визуализации касаний до пиксель-пёрфект подложки.
В общем, забавная вещь! В какой-то момент может и выручить.
#js #devtools #mobile #бородач
#баг дня
Итак, вы что-то продаёте на своём сайте, услугу или товар, используя Stripe.
inb4 я в курсе, что большинство подписчиков из РФ и Stripe там не работал никогда, но мой поинт не в этом, принцип работы платёжных систем на клиенте одинаков.
Тут вы замечаете, что 1-2% пользователей не могут завершить покупку. И никак не можете понять, что же не так. И всё как-то нестабильно при этом... то могут, то не могут.
В какой-то момент до тебя доходит, что проблемные пользователи сидят на нестабильном интернете или за VPN. Включаешь Throttle на вкладке Network — и, чудо, повторяешь проблему!
Не очень понятно, почему сразу нельзя было залезть на гитхаб официальной клиентской библиотеки, но выясняется, что проблема стара как говно мамонта, сразу даю ссылку на повтор: https://github.com/stripe/stripe-js/issues/26#issuecomment-1477716731
Конечно, если говну мамонта 4 года. Но это именно так в случае подобных библиотек.
Проблема прям настолько простая, насколько вообще возможно: люди на нестабильных соединениях могут быть неспособны загрузить библиотеку.
Но, более того, загрузчик реализован таким образом, что если ты попытаешься реализовать повтор загрузки самостоятельно, у тебя не выйдет. Стоит получить "Error: Failed to load Stripe.js", поможет только перезагрузка страницы.
К счастью, Stripe, наконец, выпустила решение: https://github.com/stripe/stripe-js/pull/518
И оно потрясающе простое: удалить упавший промис и дать возможность создать его заново.
Я почему вообще это вынес, пусть многие никогда с проблемой Stripe и не встретятся: надо быть очень внимательным, загружая код по запросу. Всегда думать о возможности перезапустить загрузку и не позволять коду оставаться в подвешенном состоянии.
Да и PR достаточно прост, чтобы понять принцип работы подобных решений.
#stripe #promise #defer