14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#крик дня
Семантическое версионирование? А нахуя?
Видимо, так подумали авторы популярного GitHub-экшена upload-artifact, предназначенного чтобы результат какого-либо необходимого для деплоя процесса выгрузить дальше.
Что они сделали?
Я максимально пытаюсь не материться, но пару недель назад они предупредили в ишью на гитхабе, что перестанут выгружать скрытые файлы (с точкой в начале имени).
Вот: https://github.com/actions/upload-artifact/issues/602
Что это значит? Так-то намерения хорошие: не позволить выгрузить .env и условные .config.json, содержащие секреты. Чтобы эти самые секреты никуда не утекли.
Вот только ребята забыли, что благими намерениями выложена дорога в ад! И, я надеюсь, они там будут гореть.
Это изменение предназначалось для версии 4, но они с какого-то перепугу решили выполнить его в 3 версии.
НА-ХЕ-РА?! Кому от этого хорошо? Зачем?
Если люди выгружают секреты куда-то случайно — не беда, перезагрузят!
Абсолютно нормально иметь sample-файлы .env.sample, .config.sample и так далее. Что мы и делали, обогащая эти файлы секретами.
Вот что ненормально — так это навязывать свою точку зрения пост-фактум. Ещё и в стабильной версии.
Просто уроды, слов нет. Certified scumbag engineering.
#github #подстава
#ссылка дня
Мы тут немного повеселились с XSS в разных продуктах и сайтах, результаты удивили. Распространяться я не буду, неприлично, но парочкой полезных ссылок поделюсь.
1. Расширение для Chrome, позволяющее быстро выбрать и вставить XSS-строку в нужное вам текстовое поле: https://chrome.google.com/webstore/detail/bug-magnet/efhedldbjahpgjcneebmbolkalbhckfi?hl=en
2. Постоянно обновляемый репозиторий на ту же тему: https://github.com/minimaxir/big-list-of-naughty-strings
Впрочем, там не только XSS. Помните, например, в чатах люди свои ники пишут с “грязью”? Красиво поломать интерфейс — это туда. Вставить эмодзи, смайлы, управляющие символы.
Ломайте свои интерфейсы сами и избегайте XSS, котаны.
#xss #naughty #injection #бородач
#статья дня
Я, пару лет назад, чтобы облегчить себе разработку расширения для Google Sheets, написал тоже расширение, но уже для браузера.
Что оно делало?
- слушало лог сети, как список событий
- вычленяло нужные события вызовов функций Google AppsScript
- десериализовало ответ
- выводило на экран, с разными фильтрами (с тех пор я ненавижу MUI)
И так прекрасно работало пару лет, а потом появился треклятый Manifest v3 и у меня не было времени перевести на него своё расширение... чуток всё заглохло.
Но зато на работе награду получил
Ладно, давайте к делу.
Итак, статья дня от Злых Марсиан: как конвертировать расширение для Chrome в расширение для Safari.
Оказывается, есть там пара подводных камней. Самое раздражающее — нужен чёртов XCode :)
Ну и своевременное появление этой статьи — оно мне как некий толчок к восстановлению моего решения.
#chrome #safari #extension
🖥Для многих ИТ-компаний, которые занимаются разработкой софта, одним из важнейших элементов является лицензирование ПО. Оно выполняет не только функцию защиты от пиратства, но и является хорошим средством заработка. Гибкое лицензирование помогает продавать ПО эффективно и соответствовать меняющимся требованиям рынка.
🐪20 сентября в Москве и 4 октября в Санкт-Петербурге состоится конференция Guardant Day – мероприятие для обмена практическим опытом по вопросам обеспечения технической защиты, выбора бизнес-модели лицензирования и определения стратегии развития продукта.
Что мы подготовили для участников:
🔘Круглый стол, посвященный мерам государственной поддержки вендоров ПО.
🔘Кейсы по работе с системой защиты и лицензирования от разработчиков ПО: практические рекомендации.
🔘 Экспертные доклады о технологиях, инструментах и продуктах.
🔘Презентация новой версии Guardant SLK 4.0 и планы по развитию.
🔘Сессия для ИТ/ИБ-маркетологов с экспертными докладами и обменом опытом.
🔘Технические стенды с возможностью увидеть продукты в действии.
В этом году мероприятие пройдет:
🌆20 сентября в Москве. Регистрация тут
🌉4 октября в Санкт-Петербурге. Регистрация тут
В обоих городах начало деловой части в 14:00.
Участие в мероприятии бесплатное по предварительной регистрации.
Подробнее о мероприятии в ТГ-канале Guardant TechClub
#codepen дня
А давайте, вдогонку к предыдущей новости о появлении popover, взглянем на такой вот шикарный эффект удаления диалога 🙂
Гори всё синим пламенем! Эх, жаль в своё время на проекте, где это было уместно, я не шибко много знал о шейдерах.
Не то, что я сейчас о них что-то знаю, но хотя бы и поддержки сильно больше.
Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa
Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить 🙂
Спасибо Ксении Кондрашёвой.
#webgl #shader #бородач
#фишка дня
Автор твита с картинкой выше буквально написал: «It's official. I don't understand URL.canParse 🫠»
Ну, давайте разбираться, что же тут не так. Или всё так?
И надо ли это вообще понимать?
Для начала, подумаем, зачем нам может понадобиться URL.canParse. А нужно это для случаев, когда отбросить токенизацию aka URL.parse и выполнение запроса дешевле и быстрее, чем упасть в ошибку или городить try-catch. Например, в работе с микросервисами, с БД.
Если внимательно оценить все случаи и глянуть на документацию, наблюдаются два паттерна:
1. Если есть порт, протокол не нужен
2. IP-адресам всегда нужен протокол
Ну, собственно, это и есть ответ на вопрос, как же работает canParse и особо больше понимать там нечего.
Другое дело, что URL.parse и URL.canParse в принципе как-то странно реализованы... Попробуйте в консоли сделать URL.parse("google.com:80").
Так что история ещё не закончена. Понять canParse — можно. А стоит ли применять — вопрос.
#url #parse #static #javascript
#игра дня
Глядите чо я откопал. По-моему, мы уже рассматривали все CSS-игры и игроподобные занятия, но этот ресурс больше похож на продвинутый #опрос.
Итак, встречайте: Guess CSS!
https://www.guess-css.app/
Возможно, это максимально быстрый способ прокачать своё понимание стилей, их композиции и каскада.
Делитесь результатами, котаны!
#css #game #quiz #бородач
#такое дня
Итак, куда же переносить ваши драгоценные заметки из богоподобного Notion? Если вы следите за новостями, конечно.
Очевидный душный ответ: «Не надо было начинать пользоваться облачным сервисом вне зависимости от».
Но если вас всё же угораздило, давайте подумаем, что же делать.
Ответ, на самом деле, простой: всё есть текст. А некоторые виды текста нынче являются индустриальным стандартом.
Чуете, куда я веду? Конечно же к Markdown. И Git.
Markdown легко читать, легко писать, легко переносить. Легко вести учёт ревизий, ну просто потому что это всего лишь текст. И любая платформа совместной разработки давно его поддерживает, не GitHub-ом единым, что решает проблему синхронизации и переноса.
Но сырой маркдаун всё же ещё недостаточен, чтобы назваться заменой полновесного сервиса заметок. И тут на сцену выхожит Obsidian.
Им пользуются буквально все, от разработчиков до писателей и стендаперов. Бесплатное приложение для всех платформ, включая мобильные. Если нужна синхронизация — приобретается отдельно, но можно и просто через Git, файлы же у вас.
Про стендаперов не шутка, вон Денис Чужой вовсю его использует.
Огромное сообщество, поддержка плагинов, поддержка вики-стиля (если вы понимаете, о чём я), какое-то невероятное число хаков и секретов.
Да, Obsidian не открытый, но при этом максимально дружелюбный. А тот факт, что всё хранится в простых стандартизированных файлах — мощно накидывает ему плюсов в карму.
Пользуемся, котаны.
#notion #note #obsidian #tool
Анализ спринта, собесы, дейлики с командой и помощь со сложными архитектурными решениями — типичные будни лида в Авито. Твоя работа может быть такой же — стань руководителем команды разработки за выходные на Avito TeamLead Марафоне!
Тебя ждёт:
— работа над продуктом, которым пользуются больше 50 миллионов людей в месяц;
— сложные технические решения и мощная кросс-функциональная команда;
— конкурентная зарплата и дополнительные дни отпуска.
Управляешь командой больше года, а твой опыт в разработке 5+ лет? Любишь не только вести проекты, но все еще писать код?
Регистрируйся на марафон и стань лидом в Авито уже 9 сентября!
P.S. Если ты пока не готов менять работу, проверь свои силы на технических секциях или набирайся опыта через мок-собесы от Авито. Подробности на сайте.
#такое дня
Интересно, а выдача буквального denylisted-сообщения — это баг Твиттера, или фича?
#codepen дня
Признавайтесь, кто в TikTok часы проводит за скроллингом ленты?
Но я вообще не за тем пришёл. Меня их прелоадер заинтересовал. Яркий пример режима смешивания цветов со слоями ниже, mix-blend-mode: multiply.
Без него анимация была бы совсем простой: https://codepen.io/frontendcorn/pen/poWZObX
Кстати, прекрасная статья есть с примерами: https://web.dev/learn/css/blend-modes/
А тут разобрана вся их математика: https://www.w3.org/TR/compositing-1/
А тут вся математика разобрана еще более подробно: https://css-tricks.com/taming-blend-modes-difference-and-exclusion/
И перевод от Ильи Стрельцына: https://css-live.ru/tricks/ukroshhaem-rezhimy-nalozheniya-difference-i-exclusion.html
А самое забавное, что с видео это тоже работает: https://codepen.io/jcoulterdesign/pen/QagxgJ
#css #mixblendmode #бородач
⚡️ Бесплатное обучение HTML/CSS, JavaScript, React.js с нуля с поддержкой от наставника
На канале Интенсивный JavaScript действующий тимлид уровня мидл+ помогает изучить фронтенд на практических задачах, которые интересно кодить
С 26 по 30 августа он проводит бесплатное обучение, где на практике поможет разобраться в HTML/CSS, JavaScript и — React.js
Что вы сделаете на обучении
— Сверстаете макет под присмотром тимлида
— Затем добавите JavaScript (и это не пара скриптов для модального окна)
— И перепишете проект на React.js
🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее
Помимо работы с кодом на обучении он расскажет, где новичку взять опыт работы, что ни в коем случае нельзя говорить на собеседовании, почему 90% новичков никогда не получат даже отклика на своё резюме
В общем — даст пошаговый подробный план «Что учить во фронтенде и как найти работу джуну в 2024 году» . По этому плану его ученики устраиваются на работу
Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля
Подписывайтесь, осталось 30 мест
Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду
👉Участвовать бесплатно
Первый урок из обучения уже доступен
#инструмент дня
Вот как ты, котан, ищешь недавний баг в проекте?
Выкатываешься куда-нибудь, тестируешь, откатываешь последний коммит, да?
А что если баг оказался хитрее, обошел тесты и уже сидит на проде, ножками качает?
Тут в дело вступает встроенный в 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 #бородач
#инструмент дня
Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: /channel/htmlshit/2516
Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.
А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/
Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?
Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.
Естественно, присутствуют ссылки на документацию, рассмотрены разные комбинации атрибутов. Особенно порадовал полный список автодополнения. Оно, конечно, редко когда правильно работает (зависит от усилий разработчиков), но уж если работает — то это приятно.
#input #attribute #mobile #tool #бородач
Лето выдалось по-настоящему жаркое: закончилась одна акция, а уже поспела новая — с увеличенным призовым фондом 🤗
👉 Вкратце: оформляйте страхование ипотеки в этих компаниях до 31 августа, и вы получите шанс на один из четырех призов по 300 000 ₽ и 75 призов по 4000 ₽
💰 А еще вы получите кэшбэк до 50% за покупку полиса ипотечного страхования в любой СК
Подробности описали на странице акции ➡️
#til дня
Вам когда-нибудь было мучительно стыдно за то, что чего-то не знаете?
Мне — нет. Но вот сейчас почти да.
Вы знали, что вот уже djn больше года как nth-child в CSS стал нормальным?
Что я имею в виду: у тебя раньше был выбор, nth-child для индексации узлов aka тегов любого вида или nth-of-type для индексации конкретного типа узла (div, p, section).
Выходит какой-то бред, как мне посчитать второй элемент с классом .star?
И вот чего я не знал, это что nth-child может принимать селектор в виде аргумента of!:nth-child(2 of .star) {
background: red;
}
Ведь счастье так возможно. Стефан Юдис мне это показал.
Вот, Baseline 2023: https://caniuse.com/css-nth-child-of
И демо: https://codepen.io/alinaki/pen/LYKXWYo
Я, короче, очень доволен.
#css #nth #фишка
Онлайн-интенсив от НИУ ВШЭ: начните свой путь в веб-разработку
Изучить фронтенд с нуля, научиться верстке и работе с современными инструментами и создать свой первый мини-проект для портфолио — все это можно сделать на бесплатном онлайн-интенсиве «Frontend с нуля: первый шаг в веб-разработку» от Центра непрерывного образования факультета компьютерных наук НИУ ВШЭ.
Интенсив подойдет:
➖➖➖➖➖➖
▫️Начинающим во фронтенд-разработке: изучите основы фронтенда и сделаете первые шаги в новой области
▫️Тем, кто хочет работать в IT: погрузитесь в направление и поймете, подходит ли вам фронтенд-разработка
▫️Тем, кто рассматривает возможность дальнейшего обучения: углубитесь в изучение веб-технологий и сделаете первый проект для портфолио
Программа:
➖➖➖➖
▫️Буткемп: лекция о том, как устроен фронтенд, его технологиях и инструментах, а также воркшопы по верстке и React
▫️Практика: задания с автоматической проверкой на Stepik для закрепления навыков
▫️Мини-проект для портфолио: создание своего первого сайта в рамках интенсива
Спикер: Андрей Сухов, Frontend-разработчик Evocargo и эксперт Центра непрерывного образования ФКН
Онлайн-интенсив пройдет с 9 по 13 сентября. Участие бесплатное для всех желающих, нужно только зарегистрироваться.
Реклама: Федеральное государственное автономное образовательное учреждение высшего образования «Национальный исследовательский университет «Высшая школа экономики».
Erid: 2SDnjepHSTC
Чтобы попасть в Meta нужно пройти сложное собеседование и уметь писать высокопроизводительный код.
Высокопроизводительные решения би лайк:
#инструмент дня
Любишь GUI? Ошибка! Не любишь консоль? Фатальная ошибка!
Короче, я знаю, конечно, людей, которые чуть что — сразу в man лезут, инструкции, но их реально не так много.
Большинство повторяет заученные когда-то команды и сочетания
sudo rm -rf /*, например
Так вот, вне зависимости от того, долбишься ты в гуй или нет, знать команды консоли всё равно надо, потому что рано или поздно понадобится. А чтобы понимать состав команд и не копировать бездумно из руководств, есть прекрасный инструмент: https://explainshell.com/
И нет, ChatGPT очень часто генерирует какую-то херню. Уж лучше man тогда научиться понимать 🙂
#console #shell #bash #бородач
Стать сотрудником Яндекса быстрее и проще, чем кажется. Участвуйте в днях быстрого найма: решите тестовое, пройдите несколько секций собеседования и получите офер за несколько дней.
Ближайшие Fast Track мероприятия:
• 7-8 сентября — для аналитиков со знанием SQL и Python, офер за 2 дня в команды Маркета, Еды и Лавки.
#инструмент дня
Сегодня на повестке дня очередная дикая вкуснятина по SVG!
SSSVG: https://www.fffuel.co/sssvg/
Да, руководств по созданию и работе с SVG было много, но настолько подробного я ещё не приносил.
Что такое viewBox, как работает clipPath, на что влияют группы aka g, что такое use и symbol, как использовать маску и так далее и так далее — есть всё.
Каждый пример интерактивен, легко ориентироваться.
Вообще рекомендую обратить внимание на весь проект fffuel.co, ребята пилят невероятное количество гайдов и утилит для работы с цветом, SVG, мозаиками и генеративным шумом. Некоторые вещи на стыке разработки и искусства, буквально.
#svg #tool #interactive
Этот навык – чит-код для разработчика
Работодатели тратят миллионы из-за лишних 10 секунд, которые грузился интернет-магазин или банк. Поэтому главный навык IT-специалиста в 2024 году – уметь создавать системы, которые обрабатывают огромные потоки данных без задержек и сбоев.
Если вы хотите стать востребованным разработчиком, вам нужно знать Redis.
Эта система позволяет гарантировать великолепный опыт юзеров от использования ключевых фич вашего проекта.
Специально для этого ребята из FAANG School подготовили онлайн эфир, где расскажут, как создавать высоконагруженное приложение с Redis.
Вы узнаете:
– что такое кэш и когда его использовать
– как избежать ошибок многопоточности в Redis
– как использовать Redis в высоконагруженных проектах. Реальные примеры кода
– о концепции NoSQL и горизонтальном масштабировании
– как корректно работать с данными в Redis
– как использовать Redis в качестве основной БД
Переходите, чтобы после эфира реализовать несколько фич с Redis и увеличить шанс получить оффер.
#инструмент дня
Итак, задались вы целью сделать, например, генератор кастомных фигур и тем оформления для Google Slides. Вот чтобы бац-бац, скопировал — вставил и все довольны. Но возникает закономерный вопрос.
А что копировать-то? Какой формат данных внутри Google Slides?
И на этот вопрос нам ответит Clipboard Inspector: https://evercoder.github.io/clipboard-inspector/
Забавно смотреть, как разные программы рулят буфером обмена. Да и если самому реализовать придётся — очень полезно.
#tool #clipboard
#cтатья дня
Возможность заменить кучу элементов интерфейса на промо-сайтах и обучающих ресурсах на видео с прозрачностью будоражит умы людей уже несколько лет.
А именно, с момента появления поддержки альфа-канала (читай, прозрачности) во всех современных видеокодеках.
Ну прекрасно же: дайте моушен-дизайнеру выполнить свою работу и просто вставьте результат в проект. Это во много раз лучше чередующихся картинок или реализации эффектов через холст.
Да, интерактивность будет минимальная, но всем и всегда ли она нужна?
В любом случае, ситуация с поддержкой до сих пор остаётся не лучшей. AVIF, будучи самым продвинутым видеокодеком, не поддеживается в Safari. Комбинация из VP9 и HEVC — вроде неплохо, но сильно больше весит и лагает на Android и в Firefox.
И тут на сцену выходит WebGL! Вот, например, стрим Юрия Артюха о добавлении альфа-канала в любое видео: /channel/htmlshit/2538
А вот статья Джейка Арчибальда обо всех вышеописанных проблемах с некоторыми методиками решения и FFMPEG-командами для генерации видео и текстур: https://jakearchibald.com/2024/video-with-transparency/
Выводы, впрочем, те же самые: используйте WebGL. Для чего Джейк выпустил NPM-пакет stacked-alpha-video.
Почему stacked? Потому что он предлагает сохранять текстуру альфа-канала прямо в самом видео. Получается лучше, чем кажется!
В общем, будущее тут, хотя и такое себе пока.
P. S. в некоторых случаях можно использовать и SVG-маски, об этом потом.
#video #transparency #tool
👨💻 Изучай фронтенд по мини-гайдам!
Канал WebTaverna ежедневно публикуют полезные обучающие мини-гайды в картинках, а также различные полезные шпаргалки и советы по HTML, CSS и JavaScript
➡️ Подписывайся на WebTaverna 😮
#статья дня
С чего начать построение своего веб-секвенсора?
Конечно же с изучения Web Audio и Web Midi API!
Статья Мэдса Стоуманна рассказывает не только о том, как сверстать свою MIDI-клавиатуру и потыкать в неё мышкой, чтобы послушать звуки, но и как подключить настоящую MIDI-клавиатуру и даже подсветить аккорды: https://blog.logrocket.com/exploring-web-audio-api-web-midi-api/
Демо: https://codepen.io/stoumann/pen/ZEjjyEp
Есть у кого MIDI-синтезатор, кстати? Делитесь результатом!
#web #audio #grid #music #бородач
#codepen дня
Как всегда, немного настоящего будущего. На днях я сидел и думал, как было бы круто повторить анимацию по скроллу, которую много-много лет назад мы в студии делали для одного рекламного агентства.
Но там всё было просто: перехват события колёсика/тачпада и перенос на горизонтальное движение. Да, мы были настолько ленивы, что даже не стали имитировать скроллбар на первом экране. Всем хватило, все довольны.
Но вот на дворе 2024 год, появились нативные CSS-анимации по скроллу. Да, пока только в Chrome и Firefox за флагом, но, опять же, знай свою аудиторию! Да и полифиллы есть :)
В общем, великолепная Ана Тюдор и её демо с горизонтальной анимацией по вертикальному скроллу: https://codepen.io/thebabydino/pen/WNqJXXa
И секрет тут прост: position: sticky, 100vh и немного магии через animation-timeline, который мы когда-то уже обозревали.
Короче, моё демо теперь тоже не за горами :)
#css #scroll #animation
Канал, где пишут честно про IT
Автор больше 8 лет работает в IT и вырос от junior фронтенд-разработчика до тимлида. На канале Вайтишная вы узнаете как начать карьеру в IT, расти дальше и получать больше!
Интересные посты:
- Накрутка опыта и обман на собесах: подстроиться или остаться аутсайдером
- Почему сейчас такие высокие требования к джунам
- Про личную эффективность и борьбу с прокрастинацией
- Ветераны IT с высоким ЧСВ
- Норм ли работать 2 часа в день?
Подписывайтесь на Вайтишная, чтобы узнать обо всех нюансах работы в IT
#книга дня
Сегодня книгой дня выбрана API от Сергей Константинова. Доступна на двух языках, на русском и английском. И на английском название даже более точно звучит — The API Book. Куда уж однозначней.
Ссылка: https://twirl.github.io/The-API-Book/API.ru.html
Эта книга написана для того, чтобы поделиться опытом и изложить лучшие практики разработки API. Состоит из шести разделов, посвящённых:
• проектированию API,
• паттернам дизайна API,
• поддержанию обратной совместимости,
• HTTP API и архитектурным принципам REST,
• SDK и UI-библиотекам,
• продуктовому управлению API.
Сергей Константинов был главой инжиниринга в Яндекс.Лавка, а с 2020 года — занимается примерно тем же в Bolt, развивая их маркет.
Труд действительно объёмный и охватывает практически все аспекты от проектирования API до взаимодействия с ним.
Важно заметить, что она постоянно дополняется и автор не стесняется спрашивать вопросы у аудитории, что выливается в прекрасные рекомендации.
Кстати, доступна и для Kindle, и для Apple Books, но уже как спонсорский пакет :)
#book #api
#статья дня
Я тут в нашем продукте всё пытаюсь сделать идеальные всплывающие уведомления, aka тосты.
Потому что выскакивают, как хлеб из тостера.
Поначалу они были сугубо императивные, вызвали уведомление вручную, вручную же скрыли все разом или по некому id. Потом я решил объединить уведомления и некоторые виды модальных окон (например, подтверждение или отмену действия).
Параллельно я начал переписывать императивные уведомления на React, потому что на тот момент приложение стало гибридным. Получалось вроде неплохо. Но в какой-то момент...
В какой-то момент я на полную познал, что такое гипотеза Чёрной Королевы (забавно, что в английском языке — Красной Королевы). В простейшем варианте она звучит так: "Нужно бежать, чтобы оставаться на месте". Непомерно много усилий требуется, чтобы лишь чуть-чуть двигаться вперёд.
В мире разработки она же значит, что на один закрытый баг — получаешь пятнадцать новых :)
Да, пришло время признать, что я со своей реализацией уведомлений зашёл в тупик, и надо смотреть в сторону альтернатив.
И тут попадается нечто прекрасное, компонент Sonner: https://emilkowal.ski/ui/building-a-toast-component
И сразу ссылка на репозиторий: https://github.com/emilkowalski/sonner
Статья буквально на острие взаимодействия CSS и JS, объяснены принципы построения анимаций на CSS-переменных и управления ими из React-приложения.
Сами же тосты реализованы на простой шине событий, что весьма надёжно.
В общем, я ещё свой поиск идеальной реализации не завершил, но Sonner — максимально к ней близок.
#react #toasts #notification #animation