14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#инструмент дня
С места в карьер: утилита qnm предназначена для поиска установленных пакетов в node_modules. Зачем?
Ну, как минимум, это офигенно быстрый способ просмотреть версии всех установленных лично и не очень лично модулей: https://github.com/ranyitz/qnm
Почему ремарка про "не очень лично"? Потому что какой-либо пакет может запросто тянуть за собой более старую или более новую версию некой утилиты, на которую вы так сильно опирались.
Почему-то меня в этом отношении очень раздражает emotion. Его тащат просто куда ни попадя, а у людей потом на CSS-in-JS аллергия...
Так или иначе, посмотреть, почему тот или иной модуль был установлен — это очень полезно.
Моя рекомендация!
#npm #node #package #бородач
Никакие платные курсы больше не нужны — по этим 4 каналам можно освоить Frontend-разработку с нуля 👇
📌Senior Frontend — JS, HTML и CSS
📌Frontend Interview — как проходить собеседования
📌Web Craft — только Web-разработка
📌Frontender Libs — библиотеки для фронтендеров
#такое дня
Очень интересно наблюдать за тем, как люди переоткрывают для себя старые Web API. Только с другой стороны.
Ну я в том смысле, что на нас с вами сплошь и рядом несётся поток нововведений и он настолько шумит, что складывается впечатление, будто раньше вообще не было фана.
Был. Но, скажем так, интрузивный 🙂 Сейчас поясню.
Вот пронеслась ураганом демка, на которой 3D-сцена делится на два окна и эти окна взаимодействуют между собой: https://twitter.com/_nonfigurativ_/status/1727657155409363120
Автор пока не дал исходников самой модельки, только демо попроще: https://bgstaal.github.io/multipleWindow3dScene/
Но работает это взаимодействие на API из начала нулевых: window.screenX и, соответственно, screenY (и их алиасы screenLeft и screenTop; потому что IE).
Ну, то есть, буквально доступно в любом браузере вообще. И давно.
Так что давайте повторим! Не без помощи мэтра Wes Bos, конечно. Он не дал ссылку на демо, потому пришлось немного постараться уже мне и собрать пример: https://htmlshit.github.io/webcam/dist/
Открывайте, разрешайте доступ к камере и увидите примерно ту же картину, что и на моём видео к посту.
Применить это, конечно, тупо некуда. Но как пример взаимодействия разных окон через localStorage — очень даже заходит :)
Так во, почему интрузивно: потому что раньше можно было двигать открытое окно. То есть, представьте себе, вы хотите окно закрыть, мышкой двигаете — а оно уползает. Сейчас такого, конечно, сделать нельзя.
P. S. Перезалил видео. Я не ожидал, что телега оригинал зальёт.
#webcam #localstorage #fun
#фишка дня
Как сделать описания проектов на GitHub более явными и привлечь внимание читателя там, где это необходимо?
Использовать кастомные цитаты!
Пример: https://github.com/HTMLShit/htmlshit.github.io/blob/master/demo.md
Доступные типы: NOTE, TIP, IMPORTANT, WARNING, CAUTION.
Очевидно, это доступно и в управлении проектами на гитхабе. Для небольших задач — очень хорошо, не нужно переходить в Trello.
Пример синтаксиса:
> [!NOTE]
> Заметка о выпуске
Что отличает промышленный проект от обычного? Может быть огромная кодовая база из миллиона строк? Или существование на протяжении десятилетий? 🤔
На самом деле мы упустили важный нюанс, а как все это великолепие тестируется и собирается.
Ребята из крупнейшей IT компании страны на основе собственного опыта создали курс по продвинутому использованию Webpack для сборки Frontend приложений промышленного уровня.
За 3 месяца на курсе ты научишься:
▪️настраивать сборку под любые самые нестандартные задачи,
▪️писать сложные плагины и лоадеры;
▪️узнаешь про микрофронтенды и сборку WASM;
▪️а также как настроить все это, чтобы оно работало быстро даже на сверх огромных проектах.
Это не просто «еще один обзорный тур по Webpack, а очень глубокий и проработанный материал, выходящий далеко за пределы обычной сборки 👍🏼
Чтобы познакомиться с ребятами и получить бесплатные материалы на тему сборки, переходи в бот - /channel/Kobezzzainfo_bot
Рекламодатель: ИП Кобец Д.Д., ИНН 032620506600
ERID 2VtzqucZqms
#заметка дня
Развитие индустрии нейросетей в последние дни напоминает сериал про эпоху дворцовых переворотов, поэтому пришло время посмотреть что-то более близкое к нам.
Технологические компании активно внедряют нейросети в свои сервисы и продукты, только его еще и обучать надо, а за этим стоят огромные расходы и дополнительный персонал. Такова цена пальмы первенства в этой сфере.
В сериале Яндекса YaC 2023 рассказали, о создании профессии AI-тренера и взяли в штат уже 300 сотрудников с междисциплинарными скиллами в разных областях для обучения своей YandexGPT.
Сейчас модель может тезисно представить информацию из видеоролика, пересказать статью и дать общую оценку по товару или услуге на Маркете через анализ отзывов.
Звучит неплохо, настрой прямо-таки боевой, вероятно, в будущем увидим YandexGPT и в других сервисах.
С 23 по 28 ноября пройдёт леденящий душу марафон о самом устрашающем языке программирования — JavaScript. Марафон отлично подойдёт для всех, кто давно хотел научиться новому, но боялся начать.
На 6 дней вы получите бесплатный доступ к тренажерам и полезным материалам HTML Academy.
Выполняйте задания, знакомьтесь с JavaScript и побеждайте все страшные баги на своём пути. Ну или просто знакомьтесь с JavaScript, так тоже можно. На каждом этапе помощь наставника, а в конце марафона разбор всех вопросов и сложностей в прямом эфире.
Среди участников мы проведем розыгрыш крутых подарков и предоставим скидки на наши лучшие продукты.
Узнать подробнее.
Реклама. ООО "ИНТЕРАКТИВНЫЕ ОБУЧАЮЩИЕ ТЕХНОЛОГИИ". ИНН 7807382880. erid: LjN8K8kre
#баг дня
В чат поступил вопрос: «Как проиграть звук в браузере на iOS?»
И я помню, что там не самое всё тривиальное, но в итоге сводилось к (нынче) стандартному для всех браузеров требованию: «Человек должен провзаимодействовать со страницей». После чего можно запускать звук.
Причём, раньше-то «взаимодействия» было достаточно среагировать событие mousemove и вызвать метод play на audio-элементе, такой себе autoplay для бедных. Но теперь — обязательно нужен click.
Но с iOS и Safari вообще всё же всё не было так просто. Там приходилось для начала прогреть контекст звука — AudioContext.
Ну как господа аудиофилы провода из вешалок прогревают перед запуском любимой пластинки.
Выглядит это счастье как-то так: https://codepen.io/alinaki/pen/vYbREJZ?editors=0010
Здесь пример чуть усложнён, поскольку требуется разблокировать контекст и оставить его свободным, чтобы в любой момент подменить звук на нужный.
Для этого в момент клика на странице стартует пустой mp3-файл (обратите внимание на его размер), а потом просто через таймаут src звукового объекта подменяется на нужный (как в попапах; если кто не в курсе, могу рассказать).
Я честно довольно долго пытался понять, что же не так и почему на моём телефоне пример не работает...
Upd. Как минимум на моем телефоне все работает! iOS 17.0.3 Напишите в комментариях, у кого как, пожалуйста. Точно знаю, что на 17.0 не пашет.
А свелось всё к тому, что в iOS 17 всё сломано. Вот issue на тему: https://bugs.webkit.org/show_bug.cgi?id=261414
Помечено как исправленное, но ещё не доехало до всех устройств.
Теперь о том, как всё же заставить это работать: надо запросить разрешение на использование микрофона, тогда и звуковой контекст разблокируется. Но я ещё не попробовал это сделать.
В общем, Apple как обычно, да. Грустно.
P. S. Нет, примеры Howler.js тоже не работают в данный момент.
P. P. S. Блин, стоило написать пост и всё заработало. Чатом клянусь, вчера не работало!
#ios #sound #safari
#codepen дня
Давно собирался написать игру по Гарри Поттеру, но не знал, как?
Не расстраивайся, я принёс решение! Steve Gardner и его прекрасное создание Spell Caster!
Вот: https://codepen.io/ste-vg/pen/zYerxoR
Я обожаю подобные примеры. Игра буквально укладывается в несколько экранов кода, но красива до безобразия.
Из технологий — Three.js и стейт-машина Stately, позволяющая описывать состояния приложения через удобные диаграммы.
Много комментариев по коду, интересная реализация распознавания жестов. Хоть сейчас бери и в магазин выкладывай :)
Я залип, в общем, как в игре, так и в её исходниках.
#webgl #threejs #game
Новый бесплатный Fullstack-интенсив от METHED «Сервис бронирования мест на StandUp»
Овладей навыками fullstack-разработки с 21 по 25 ноября!
Что будет на интенсиве:
- Напишем fullstack-приложение по выбору мест на мероприятии;
- Поработаем на фронтенде HTML, CSS, JS;
- Для бэка воспользуемся Node.js.
Уроки, прямый трансляции, общий чат и кайфовая атмосфера. Присоединяйся к нашей команде!
Переходи по ссылке, чтобы зарегистрироваться - https://tglink.io/283786ee287b
Количество мест ограничено!
Реклама. ИП Кислов Сергей Михайлович. ИНН 272198970024.
#заметка дня
В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"
Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!
Он очень давно и хорошо поддерживается, так что почему бы и нет.
Оставим за пределами этого обсуждения тот факт, что плейсхолдеры не должны заменять реальные метки. Это всё равно уже стало де-факто стандартом индустрии... но постарайтесь так не делать.
И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100
Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится!
Всем бу, котаны!
#css #placeholder #svg #sprite
#такое дня
Можно я немного побуду душным?
Этот мем всплывает разве что не ежегодно в твиттере и программерских пабликах и каналах.
Это, конечно, не уровень Max Howell, создателя Homebrew (самого популярного менеджера пакетов на macOS, используемого всеми разработчиками), но всё же. Напомню, он был отвергнут Гуглом за незнание структур данных.
В случае с Дэном многие пишут, что он «создатель реакта» и строят на этом панчи. Ну нет же, котаны.
Он один из разработчиков, а по большей части — лицо проекта, евангелист.
Ден Наше всё Абрамов. Кроме шуток, вы наверняка такое видели.
Что он создал — так это всем известный Redux, будучи соавтором. Потому давайте не будем распространять ерунду дальше.
Ну и понятное дело, что его не приняли в VK тогда, когда он не был ни тем, ни другим.
Что, впрочем, даёт на самом деле надежду гораздо больше, чем повод посмеяться. Если вас не приняли куда-то, подумайте, а так ли плохо это вообще.
#meme #debunk
Хотели бы попробовать свои силы в финтехе и узнать, что там и как? Такая возможность появилась благодаря симулятору от агентства Ар и Росбанка. В нем вы можете познакомиться с продуктовыми задачами Росбанка в роли product-менеджера или backend-разработчика. Пообщаться с коллегами, узнать больше о корпоративной культуре.
Чтобы начать, переходите в бота, выбираете направление, выполняете задачи, изучаете материалы и знакомитесь с командой. В конце вас ждет список актуальных вакансий, если так понравится, что захотите продолжить свой путь!
Симулятор продакта и бэкенда доступен только до 18 ноября, так что поторопитесь! Ссылка на бота тут.
Реклама. Рекламодатель
#новость дня
Кто-то тут не использует Prettier? Ладно, это я могу понять.
Но если кто-то не использует ESLint — проследуйте на выход, пожалуйста. Ладно, шучу. Но без этого в больших проектах никуда вообще. IDE подскажет многое, но процессы важнее.
Так вот, долгое время у многих (и у меня) возникали сомнения в нужности одновременного использования и форматтера aka Prettier и линтера aka ESLint.
Например, ESLint с лёгкостью может повторить все возможности Prettier и даже больше. Вот только... вот только надо ли?
Конфигурация становится раздутой, даже можно сказать, сложной. Начинаются споры о количестве свойств объекта на одной строке. Обязательно найдётся кто-то с очень важным мнением и обидится.
Но давайте честно. Задача линтера — прививать хорошие привычки кодирования и не давать неосознанно писать говнокод применять плохие практики. Да, JavaScript язык, в котором слишком много можно написать слишком плохо.
А вот форматтер — уже чистая вкусовщина. В целом, каждая IDE умеет так или иначе применять форматирование к уже написанному коду, но остаётся вопрос распространения этого на команду и процессы деплоя.
Потому Prettier остаётся хорошим выбором. Тот факт, что он уже внедрён в огромное число проектов с минимальными изменениями в конфигурации по-умолчанию, даёт уверенность в том, что люди не будут тратить время на споры (не даёт, но то такое).
К чему я веду? А вот: https://eslint.org/blog/2023/10/deprecating-formatting-rules/
Для тру: ESLint 10 больше не будет поддерживать настройки форматирования кода и вся работа ляжет на плечи сторонних средств форматирования (предлагаются Prettier, dprint и stylistic). Начиная с версии 8.53.0 эти настройки будут объявлены устаревшими.
Это сильно облегчит работу разработчиков ESLint и позволит им сосредоточиться на внедрении хороших практик, нежели на вкусовщине.
А как дела на ваших проектах, котаны?
#eslint #prettier
#заметка дня
Давайте продолжим про React Query aka TanStack Query нынче.
В комментариях писали, мол, использовать React Query (буду использовать старое название) это плохая привычка, современные браузерные API прекрасно справляются, надо всего лишь немного их расширить.
Немного в моём случае это:
1. Состояния isLoading, isSuccess, isError
2. Сообщение об ошибке
3. Отмена запроса через AbortController
4. Глобальное состояние загрузки (на всё приложение)
5. Нормализация данных
6. Инициация повторной загрузки
7. Поллинг
8. Кеширование данных в едином слое и решение об инвалидации.
Веб-приложения они потому и веб, что грузят данные из удалённого источника, необязательно одного. И необязательно сетевые! Об этом ниже.
Уследить за всем непросто, но это полбеды. Тесты писать кто будет на ваши обёртки?
Да, React Query и ему подобные SWR-решения (stale-while-revalidate в клиентских приложениях превратился в целый концепт) не являются вечнозелёными. Термин "вечнозелёный" я принёс сюда из CMS Drupal: там это означало модули, поставляющиеся с ядром системы. Это значит, вероятность их удаления или радикального изменения API крайне мала. В нашем случае вечнозелёными являются браузерные API.
Но вы забываете об одной крайне немаловажной фишке React Query и SWR: они могут работать с любыми промисами. Не только с сетью и fetch!
И вот тут начинается прекрасное. Долгие вычисления? Промис! Забрать картинку с холста? Промис! Обработать загруженный на клиенте файл? Тоже промис! Написать расширение для браузера и обратиться к данным со страницы или результату парсера? Промис! Обратиться к прослойке между Google Sheets и твоим расширением? Промис! То же самое в Excel. То же самое в Figma. Далее вообще везде.
Вы понимаете, к чему я клоню? Хватит думать сетью, начинайте думать операциями!
И вот тут у React Query в моём случае из конкурентов разве что Effector. Но есть одна проблема... его концепты мало того, что сложны, так и обзорных статей не на русском очень мало. Но об этом потом.
Буду закругляться, но напишу ещё кое что о тестировании.
Если React Query принимает на вход любой промис, то что вам нужно для того, чтобы протестировать своё приложение? Поднимать Mock API Server? Вы уверены?
Замокайте вызов промиса! Всё, вы прекрасны. Остальное уже протестировано за вас.
Задавайте ваши ответы, котаны.
#react #query #development
#фишка дня
Сейчас в CSS присутствует 54 разных единицы измерения (units).
Пятьдесят четыре!
А ты до сих пор используешь одни только пиксели aka px.
Так вот, используя единицу измерения lh — line-height — и свойство background-clip можно, например, красиво подсветить нужное число строк в любом тексте.
Прям как тут: https://codepen.io/alinaki/pen/xxMJXaV
Поиграйтесь с настройками и шириной блока, получается очень интересно. Автор красоты — Jhey.
А чтобы не запутаться — есть прекрасный ресурс https://whatunit.com/
На нём имеется диаграмма принятия решений, когда какую единицу брать. Если всё ещё непонятно, посмотрите видео от Kevin Powell: https://www.youtube.com/watch?v=Utc_uhvTluk
Он, кстати, автор диаграммы.
В общем, просыпаемся, котаны. Будущее здесь.
#css #rem #lh #vh #measure
#ссылка дня
«Что происходит когда ты набираешь google.com в адресной строке браузера и жмёшь ввод?»
Да, котаны, вы угадали: это довольно популярный вопрос на собеседованиях.
Если у тебя его не спрашивали, значит, предполагается, что ты знаешь ответ.
И да, ответ очень многослойный и зависит не только от позиции, на которую собеседуешься, но и вообще от уровня задротства. Твоего и интервьювера.
Как же хорошо, что у нас уже есть максимально полное описание происходящего в одном репозитории.
Максимально полный без открытия книги по архитектуре ПК, я имею в виду.
Вот: https://github.com/alex/what-happens-when
Официального перевода на русский нет, но есть PR: https://github.com/alex/what-happens-when/pull/1462/files
Как вы думаете, котаны, имеет ли смысл в 2023 году вообще такое спрашивать? Должен ли условный фронт это понимать?
#web #interview
#шок дня
Мы уже видели предложение работы в консоли браузера. Баннеры вида
<script>
alert("We're hiring");
</script>
#codepen дня
Какой самый приятный момент ведения канала по веб-разработке? inb4 Когда заказывают рекламу
Конечно же когда кто-то из подписчиков присылает свои измышления и эксперименты! Как будто у нас тут с вами настоящее сообщество!
Итак, сегодня — очередная вариация на тему из игры World of Goo. Жидкие перекаты 🙂
Предыдущий пост был вот: /channel/htmlshit/1867
Основан эффект на размытии и последующем повышении контраста до уровней, когда края снова становятся чёткими.
Итак, встречайте: https://codepen.io/mdss/pen/qBLZeya?editors=1100
Автор честно признаётся, что анимация украдена с https://maps.mel.fm/ Вот только у них там SVG. Пример с SVG можете увидеть по ссылке на чат или на сайте.
В общем, вдохновлять людей — приятно. Рекомендую!
P. S. Кто на айфоне починит?
#css #goo #filter #svg #бородач
#статья дня
CSS Grid... с чего бы начать. Наверное с того, что это безумно просто и безумно сложно одновременно.
Кто-то пришёл в вёрстку когда гриды уже вовсю были в ходу, для кого-то гриды до сих пор означают flex-колонки из Bootstrap aka grid system и ничего другого знать не хочет. Или не может.
Я уже молчу о том, сколько изменений стандарта они пережили...
Потому я постоянно слежу за новыми обучающими инструментами и статьями и приношу их вам. И сегодня — очередной бриллиант от Джоша Камю.
Встречайте интерактивное руководство по CSS Grid: https://www.joshwcomeau.com/css/interactive-guide-to-grid/
И когда я говорю интерактивное в контексте — это буквально означает что вам не просто примеры кода дадут, а кучу ползунков, чекбоксов и живой вёрстки.
С красивыми иллюстрациями, конечно же.
В общем, бросайте все дела и бегом читать. Нашему чату нужен новый властелин гридов. Старый теперь по скриншотам гадает...
#css #grid #tool
#codepen дня
Итак, вашему вниманию самый популярный в октябре кодпен небезызвестной Аны Тюдор.
Переливающийся всеми цветами радуги светящийся текст!
Вот: https://codepen.io/thebabydino/pen/rNPOpJK
Реализовано на SVG-фильтре gaussian blur: фон обрезается по контенту текста через -webkit-background-clip: text и размывается.
Жаль, я не знал об этой технике когда много лет назад делал сайт школе стриптиза. Там было много эффектов а-ля неоновое свечение. Фоток не будет.
#css #svg #filter
#фишка дня
Да-да, на дворе 2023 год и JavaScript в браузерах включён по-умолчанию.
Вот только байки про параноиков в вязаных и не очень свитерах — вовсе и не байки. Зайдите на LOR.
Потому нормальной для многих практикой было и остаётся добавление класса no-js на body и его удаление во время исполнения скриптов.
Тем более странно, что указаный на картинке медиазапрос @media (scripting: enabled) появился только сейчас.
Поддерживается в Chrome 120+, Firefox 117+ и Safari 17+.
Маловато, конечно, но пусть будет.
#css #js #media #paranoid
Erid:2Vtzqv45E96
Это Маша Палагина и Стас Буткеев — ведущие самого трушного* подкаста о тестировании и качестве «QAk-QAk — и в продакшен».
В этом выпуске они обсуждали, что такое доступность (accessibility), как ее тестировать и какие функции должны быть в удобном и инклюзивном приложении.
И это только один выпуск из трех сезонов. Ребята записали целую аудиобиблиотеку для QA-инженеров, с помощью которой можно прокачать хард-скиллы.
Подкаст есть на всех стриминговых платформах.
P. S. А еще у QA-команды Тинькофф есть телеграм-канал с кейсами, задачи и инструментами — подписывайтесь, чтобы не пропустить новые посты.
* по версии ведущих Маши Палагиной и Стаса Буткеева
#шок дня
TL;DR: Идем на https://makereal.tldraw.com/, вставляем ключ GPT4, рисуем интерфейс с описанием и нажимаем кнопку Make Real.
Я не то чтобы старательно, но избегал темы ИИ в контексте кодогенерации. Хотя, естественно, использовал и использую для генерации конфигов, тестов, типов. Пару раз пробовал для создания и обработки структур данных.
Просто как-то скучно всё выглядело.
Но тут уже два дня интернет разрывает от работы Стива Руиза, автора офигенной совместной рисовалки диаграмм tldraw: https://tldraw.com/
И называется она Make Real: https://tldraw.substack.com/p/make-real-the-story-so-far?r=1vezzj
Если у вас есть ключ OpenAI GPT4 — вот ссылка на демо: https://makereal.tldraw.com/
Рисуем интерфейс и, например, схему состояний конечного автомата (state machine, проще говоря, схему состояний приложения и его реакцию на внешние действия). Дополняем описанием, группируем и нажимаем кнопку Make Real.
И у вас есть готовое приложение. Не нравится? Выделили результат, описали снова и снова нажали. И так пока не получится.
Это выглядит как волшебство. Работает на GPT-4V aka Vision Model. Особый кайф придает стиль взаимодействия с нейросетью — через холст. В три миллиона раз более наглядно, чем чат или любой конструктор. Повторю: результат работы возвращается на холст в виде рабочего приложения и превращается в часть диаграммы. Это пушка.
Если ключа нет — очень рекомендую хотя бы прочитать статью выше и посмотреть примеры.
Лень и это? Ну хотя бы на твиттер тогда зайдите: https://twitter.com/tldraw, примеров уже десятки!
Это потрясающее путешествие. Прототипы выйдут на новый уровень. Ждём подобное в Figma? :)
#ai #tldraw #future #prototype
#ссылка дня
Не так давно я обновил логотип канала, до того момента это был символ пустого фрагмента, </>, выражаясь языком React.js, на фоне логотипов кучи Веб-технологий, с которыми я работал.
Нарисовал его бывший коллега, а потом я много раз пытался обновить и освежить. Но терялась душа 🙂 Так что обновлённую версию вы могли встретить разве что в рекламе канала, многие по ней же подписались.
Так вот, я это к чему. Когда это всё происходило, не было ресурса https://icones.js.org/
По его названию можно было бы подумать, что там одни только иконки. Но нет!
Там не только собраны иконки под открытыми или свободными лицензиями, но и изображения флагов, эмодзи и логотипов различных технологий, ресурсов, программ и компаний!
А я потратил тогда кучу времени на поиск логотипов и приведение их в приличный вид... Аж обидно.
Но вот вам, котаны, берите и пользуйтесь 🙂
#icons #logos #emoji #flags #бородач
Хотите офер мечты от международной компании?
Возьмите английский для IT-специалистов в Skyeng: в честь Чёрной пятницы скидки до 50%, а платёж за курс можно разделить на четыре части с Яндекс Сплитом. Кстати, ещё среди участников разыграют макбуки и айфоны. Подробнее на сайте.
Реклама. ООО «Яндекс Пэй»,
ИНН 7703466743,
Erid LjN8JzwE3
#фишка дня
Одна из знаменитых проблем Safari на iOS — это утечка скролла. Условно говоря, показали вы модалку, скроллите её — а фон тоже скроллится. В Safari 16, впрочем, проблема была решена.
Тем не менее, модалками и overflow: hidden поведением проблемы со скроллом в разных браузерах не ограничиваются.
Например, скролл в любом плавающем или просто переполненном элементе очень даже протекает наружу, в итоге скроллите вы колесом (или пальцем) textarea, доходите до конца — и начинает прокручиваться остальной документ.
Я устал придумывать синонимы слову скроллить.
Так вот, уже достаточно давно существует свойство overscroll-behavior. Оно позволяет не только запретить цепочку событий прокрутки, но и отменить пограничные эффекты!
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
Демо: https://mdn.github.io/css-examples/overscroll-behavior/
Наиболее популярный и, для кого-то, раздражающий эффект окончания прокрутки — это пружинка. Именно поэтому я записываю демо из Safari, чтобы сразу стало понятно, о чём речь.
Ах да, Safari... как обычно, поддержка только-только появилась, с 16 версии. До того приходилось мучаться.
В любом случае, свойство очень удобное, на забывайте о нём.
#css #scroll #overscroll
#статья дня
Не так давно я писал о том, что мне пришлось написать плагин для ESLint, потому что а) среда, в которой я работаю — упоротая, б) инструменты — упоротые, в) люди тоже себя могут иногда вести... упорото.
Вот тут: /channel/htmlshit/1638
Мой плагин был очень простой: запрет констант уровня модуля. Ну вот так вот :( Они при сборке терялись, потому что иди нахер, вот почему.
Так, к статье дня. Анастасия Щедрина о том, как работает ESLint и о том, как написать свой плагин для линтинга React-приложения: https://habr.com/ru/companies/domclick/articles/743384/
Да, я в посте тоже писал про AST и инструменты, позволяющее это самое абстрактное синтаксическое дерево построить, но в статье тут всё гораздо подробнее. Меня редко хватает на целую статью, так что читайте что у других есть, котаны :) Ведь вышло неплохо и подробно.
#eslint #react #ast #бородач
Авито ждет Backend-разработчиков и предлагает возможность получить оффер за одни выходные!
Компания предлагает:
— зарплату от 204 до 484 тысяч рублей в зависимости от грейда;
— расширенный ДМС, компенсацию питания и другие крутые бонусы;
— формат работы на выбор: офис или удаленка;
— отличную команду с экспертами в Go- и PHP-разработке;
— возможность участвовать в запуске новых проектов и идей.
Авито — это про карьерное развитие и комфортные условия. Регистрируйтесь, чтобы присоединиться: https://u.to/BjoXIA
Реклама, ООО "Авито Тех", ИНН 9710089440, erid 2Vtzqx28DZZ
#баг дня
Вчера вечером коллега пришла с проблемой: бесконечная загрузка на паре проектов. И если на одном проекте подобное казалось логичным — он сильно зависит от платформы — то для второго это уже был перебор.
Попробовал повторить проблему, воссоздал все условия — не вышло. Утром взял её ноутбук и сел отлаживать.
Ни одной ошибки в консоли нет. На вкладке Network тоже всё чисто...
...подозрительно чисто.
Полез в дебаггер и обнаружил, что хуки, основанные на React Query не вызываются вообще. Ни разу.
Сетевые операции без React Query работают прекрасно — приложение состоит их микрофронтендов, какие-то из них легаси, какие-то нет.
Я начинаю подозревать браузер, отключаю все расширения и разрешаю все куки (мало ли). Нет, не помогает.
И тут коллега сообщает, что в Safari всё прекрасно работает.
Отчаявшись понять, что происходит, я вбил в гугл банальный запрос вида: "react query not working in chrome"
И нахожу золото.
Я понимаю, что к этому моменту уже мог вас утомить, но попробуйте понять происходящее. Это слишком хорошо.
1. Google Chrome на macOS неверно определяет состояние сети и поднимает флаг "офлайн" на navigator.onLine.
2. React-Query считывает этот флаг и ставит все ваши запросы на паузу. Без уведомлений, без ошибок. Молча.
Всё, вы в ловушке.
Как исправить? Передёрнуть wi-fi на ноутбуке. Я щас не шучу даже.
Проблеме в Chrome 7 лет! Создатели React-Query знали об этой проблеме и ничего не сделали!
Они исправили поведение на "всегда считать, что мы онлайн" только в 5 версии своего продукта, которая ломает совместимость!
Не могу передать свою злость и, одновременно, восхищение глупостью бага. И наглостью разработчиков, конечно же.
Я ничем кроме как "горе от ума" это описать не могу. React-Query в принципе делает слишком много спорных настроек по-умолчанию, но после этого случая мы буквально пересмотрим своё решение по альтернативам.