14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#баг дня
Как вы думаете, что обозначает тип {}?
Ну, буквально:
type b = {};
TemplateQueryDetails = Omit<
z.infer<typeof QueryDetails>, 'metadata'
>;
TemplateQueryDetails = Omit<
z.infer<typeof QueryDetails>, 'metadata'
> & {};
Фронтенд с юмором — это "Frontline" 💻😂
Ты кодишь, но не забываешь смеяться? Тогда заходи, тимлид фронтенда рассказывает про все что связано с web-разработкой и не забывает запостить смешных мемасов.
На Frontline соединяются профессионализм и веселье в мире веб-разработки.
Здесь ты найдешь:
👨💻 Гайды и советы по HTML, CSS, JavaScript и популярным фреймворкам.
😂 Мемы и шутки про будни разработчика — потому что смех это тоже часть работы!
🔥 Новости и тренды в веб-разработке — чтобы быть на шаг впереди.
💬 Обсуждения и обмен опытом с коллегами по цеху.
🎉 Вдохновение и мотивация — ведь кодить можно с улыбкой (даже на javascript)
🔗 Присоединяйся и и будь в курсе фронтенд-новинок, не забывая про отличное настроение 🚀
#реальноклассныйканал
#новость дня
Вчерашнего дня, конечно, и многие из вас уже в курсе, но...
TypeScript переписывают на Go!
Да, если вы не знали — транслятор TypeScript всё это время был написан на самом себе, что, как вы понимаете, не делало его быстрым :)
И вот, новость: https://devblogs.microsoft.com/typescript/typescript-native-port/
Результат ошеломляет: разбор типов и сборка уже в 10 раз быстрее! Это означает, что и LSP в ваших IDE будут быстрее. И работать станет приятнее.
Очень рекомендую пойти почитать статью.
Кстати, кто же этот седой дядя на видео? А это Андерс Хейлсберг! Создатель Turbo Pascal, Delphi, C# и, внезапно, TypeScript.
И на этом видео он, в том числе, объясняет, почему не Rust. Этим вопросом задолбали уже всю команду.
И, если коротко:
1. Это портирование, а не переписывание. Они хотели оставить структуру проекта и работы над ним той же, что и была.
2. Rust, хоть и облегчает управление памятью, полностью не освобождает от связанного с этим управлением бойлерплейта. И, поскольку, структура транслятора TypeScript представляет из собой огромный набор вложенных друг в друга структур, количество бойлерплейта вышло бы неразумным.
В общем, нас ждёт дивный новый мир! И я очень рад. И выбором языка тоже.
#typescript #go
Алгоритмы, кодогенерация и куда идёт Go: строим платформу для разработчиков
В новом выпуске подкаста «Расскажите про MWS» обсуждаем как работает команда, которая создает базовую инфраструктуру для разработчиков облака. Дмитрий Новиков — TechLead команды Development Platform в MWS рассказывает:
— Зачем команда пишет собственный кодогенератор
— Нужны ли задачи про алгоритмы на собеседованиях
— В каком направлении развивается Go и есть ли повод для беспокойства
Смотрите и слушайте на всех популярных площадках:
🎬 YouTube
🎬 VK Видео
🎧 Яндекс Музыка
🎧 Apple Podcasts
🎧 Mave Digital
#новость дня
Утекли промпты и модели v0.dev от Vercel: https://github.com/x1xhlol/v0-system-prompts-and-models/
Я их почитал и — как и со всеми кастомными промптами для тех же Cursor, Aider и Claude — сделал для себя всё тот же вывод.
Если вы сами прочитаете промпты и будете следовать им и в своей работе — это сделает вас лучшим (чем вы сейчас) разработчиком. Как подготовка к собеседованию.
Серьезно, они буквально представляют из себя весьма хорошее техническое задание.
К тем, кто составляет эти промпты — вопросов нет :)
В любом случае, очень круто, что инструменты, сокращающие рутину, стали нашей нормальной действительностью.
#ai #vercel #prompt
#статья дня
В чатике всплыл очередной вопрос про эффект ambilight.
Если кто не помнит, фоновая интерактивная подсветка ambilight — от Ambient Light — пришла к нам от телевизоров Филипс, а нынче есть даже на YouTube.
Мы уже рассматривали пару вариантов создания такого эффекта, но не для видео.
А для видео же — есть прекрасная статья на Smashing Magazine: https://www.smashingmagazine.com/2023/07/recreating-youtube-ambient-mode-glow-effect/
Описывается создание нужного эффекта на основе canvas, со всеми пояснениями и кодом. Даже хук для React по пути сделали.
Вообще, до меня не сразу дошло, почему именно холст. Почему бы просто не запустить два видео и одно размыть?
Но, на самом деле, выходит так, что на холст можно отправлять далеко не все кадры, можно по пути накладывать дополнительные эффекты, не нужно заботиться о синхронизации двух видео. Ну и requestAnimationFrame позволяет здорово снизить нагрузку на клиента.
#ambilight #video #canvas
#фишка дня
Я всегда считал карту кода достаточно бестолковой фишкой. С другой стороны, TODO-комментарии и ошибки достаточно легко распознаваемы и перемещаться по ним удобно.
А сегодня я узнал, что блоки кода можно ещё и помечать комментарием // MARK: Something, и этот самый Something будет виден на карте.
В идеале, конечно, не стоит развозить свой код на несколько экранов, но прежде чем разбивать — надо ж распознать, верно? :)
#vscode #minimap #бородач
#инструмент дня
F*ck Leetcode.
Как-то так приветствует нас проект https://www.interviewcoder.co/
Что же он делает?
А разработчики проекта догадались сделать невидимый для шаринга экрана ИИ-оверлей, который находит на экране и решает алгоритмические задачи.
Невидим он для:
- Zoom < v6.1.6
- Всех браузеров
- Discord
- Встроенного в maxOS скриншотера (не видео)
Видим для:
- Zoom > v6.1.6
- Записи видео в том же macOS
Может не только решать код, но и дебажить его, давать построчные подсказки и исправлять ошибки.
Ну что, литкод-собесам конец? :)
Да, проект — открытый: https://github.com/ibttf/interview-coder
И в доказательство — запись реального собеседования: https://youtu.be/rcH813f5vCE
#leetcode #interview #ai #cheat
Привет, котаны! 🐱
В Телеге всегда была проблема с поиском классных авторов — здесь почти нет рекомендаций, алгоритмы не подсовывают похожие каналы, и найти что-то годное можно либо случайно, либо по совету тех, кто уже читает.
У меня есть несколько любимых каналов, но интересно, что читаете вы? Давайте вместе соберем список Telegram-каналов, которые реально заходят.
Не просто те, на которые когда-то подписались, а те, куда заглядываете с интересом, читаете посты, комментируете, прислушиваетесь.
Это могут быть каналы про разработку, ИТ, технологии или даже научпоп, общетематические или авторские — главное, чтобы читать их было интересно, а не «ну ладно, пусть висит в подписках».
Делитесь в комментариях! Если видите канал, который тоже читаете — ставьте реакцию. Посмотрим, какие из них набирают больше всего респекта в нашей ленте.🚀
#молния дня
Вы знали, что git reset --hard после git add . грохает все новые файлы в репе?
89 штук 🥲
Подробности завтра...
#статья дня
Сегодня у нас, прости господи, статья с Хабра. Там нынче много странного контента и плохих переводов, но эта — хорошая.
Автор — Карен Ананян, продуктовый дизайнер — предлагает новый (?) метод адаптивного дизайна, объединяющий принципы отзывчивого дизайна, адаптивного дизайна и масштабирования.
Я поставил вопрос после «новый», потому что, по факту, автор перепридумал clamp(). Но не то чтобы совсем.
Существующие подходы:
Responsive design (отзывчивый дизайн): Элементы интерфейса адаптируются к размерам экрана, сохраняя общую композицию и функциональность. Однако при значительном увеличении размеров экрана элементы могут чрезмерно растягиваться, ухудшая удобочитаемость и внешний вид.
Adaptive design (адаптивный дизайн): Структура блоков и элементов перестраивается в зависимости от устройства. Это требует разработки и поддержки нескольких макетов для разных типов устройств, что может быть трудоемким процессом.
Проблемы существующих подходов:
В Responsive design элементы могут чрезмерно растягиваться на больших экранах, что снижает удобство использования.
Adaptive design требует значительных ресурсов для разработки и поддержки множества макетов под разные устройства.
Предлагаемое решение: Stretch, Scale, Switch (SSS):
Автор предлагает трехэтапный подход к адаптивному веб-дизайну:
Stretch (Растяжение): Использование принципов отзывчивого дизайна для гибкого изменения размеров элементов по ширине или высоте, что обеспечивает адаптацию интерфейса к различным размерам экранов.
Scale (Масштабирование): При значительном изменении размеров экрана применяется пропорциональное масштабирование всего макета, включая шрифты, отступы и размеры блоков, с использованием выбранного множителя (scale-фактора).
Switch (Переключение): Если масштабирование достигает предела своей эффективности, происходит переключение на другой макет, оптимизированный для текущего разрешения экрана.
На самом деле, статья является действительно сборником хороших примеров и техник. Я сам пытался на эту территорию заходить с своё время, но не делал попыток свести всё к какому-то названию.
А вот собственно, ссылка: https://habr.com/ru/companies/simpleone/articles/881168/
#css #adaptive #responsive
Фронтенд — это не только натянуть верстку и подключить API. Чем глубже вникаешь в технологии, тем больше вопросов возникает. Как браузер работает с памятью? Почему одни операции быстрее других? Как устроены алгоритмы, которые ты используешь, даже не задумываясь?
Я уже некоторое время подписан на канал Андрея Кобеца (t.me/kobezzza_channel). Андрей — инженер с 20-летним опытом, 10 лет руководил фронтендом в Яндексе, а теперь делится знаниями с разработчиками, которые хотят расти не только в грейде, но и в понимании технологий.
Что у него интересного:
🔹 Разборы концепций — «Передача по ссылке и по значению», «Как интерпретируется код», «Потоки и память в JS»
🔹 Как алгоритмы помогают фронтендеру — реальные кейсы, без теории ради теории
🔹 Карьерные советы — что делать, чтобы зарабатывать больше, но не превращаться в менеджера
🔹 Нестандартные темы — например, как устроена безопасность по памяти или почему в Unix «всё есть файл»
Читается легко, но плотно. Если интересно не просто писать код, а понимать, как он работает под капотом, рекомендую заглянуть:
👉 t.me/kobezzza_channel
Реклама. ИП Кобец Д.Д. ОГРНИП: 322237500264561 erid: 2VtzqwmTdAW
#фишка дня
Надоело искать гит-бранчи в бесконечном их списке в консоли?
Это всё потому что они сортируются по алфавиту. Что вообще далеко не всегда удобно. Точнее, это удобно только когда название ветки начинается с номера тикета.
Но, опять же, а если проектов несколько?..
Решение очевидно: сортировать бранчи по дате изменения!
Для чего нужен вот этот конфиг:
git config --global branch.sort -committerdate
#фишка дня
От Темани Афифа aka CSS Challenges! Он нам уже много крутого подарил :)
Что делать, если нужно несколько кнопок одной ширины? В смысле, подстраивающихся под самую широкую, а не просто заданной.
Использовать гриды, конечно!
Как-то так:
.container {
display: inline grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
#фишка дня
Думаю, все знают про :nth-child, :nth-last-child. А также про :nth-of-type и :nth-last-of-type.
Что в них самое раздражающее?
Кто сказал нумерация с единицы? Иди в свой Си.
Конечно же это неочевидность, а когда-то и невозможность, выбора элементов по классу или иному атрибуту!
Да-да, :nth-of-type выбирает по тегу, даже не по классу. Так что же делать?
А делать вот что: уже пару лет с нами присутствует синтаксис-дополнение к nth-child. И называется он of S.
Выглядит так:
:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)
:nth-child(2 of .highlight)
:nth-child(even of :not([hidden]))
.highlight, а второй — все чётные не скрытые элементы.
#проект дня
Мы прошлым летом проводили отпуск в Валенсии. Целью был более пляжный и гастрономический отпуск, нежели любование музеями и природой, потому поселились в районе, который когда-то представлял из себя рыбацкую деревню — Эль Каваньял (El Cabanyal).
Этот бывший рыбацкий квартал славится домами, украшенными азулежу — расписными глазурованными плитками. Они служили не только украшением, но и защитой стен от влаги и солнца.
Часто встречаются узоры в сине-белых тонах, растительные мотивы, геометрические орнаменты и изображения святых. Многие дома облицованы плиткой полностью или частично, создавая неповторимый колорит района. Сейчас плитки ценятся как культурное наследие, но часть зданий с ними утрачена из-за застройки.
Меня настолько эти плитки и эта традиция восхитили, что я посвятил несколько прогулок по жаре +40 только их фотографированию.
К сожалению, сфотографировать и сами дома тоже мозгов не хватило.
И так фотографии и лежали с конца июля, но я подумал, что пришло время их оформить в очередной проект!
Итак:
1. Собираем фотографии в каталоге
2. Вычленяем из них геоданные
3. Находим в интернете векторный файл пина на карте, для маски, и готовим картинки маркеров и миниатюры.
4. Выводим всё на карте используя библиотеку React Leaflet.
Ну по пути, конечно, пришлось придумать простой алгоритм, центрирующий карту по фотографиям и отсекающий выбросы. Довольно коротко получилось:
const sortedTiles = [...tiles].sort((a, b) => a.lat - b.lat || a.lng - b.lng);
const majorityStart = Math.floor(tiles.length * 0.3);
const majorityEnd = Math.ceil(tiles.length * 0.7);
const majorityTiles = sortedTiles.slice(majorityStart, majorityEnd);
#codepen дня
Как сделать элементы интерфейса... зернистыми? Напоминающими шершавую структуру, например, пластика? Или плёнки...
Для достижения эффекта можно воспользоваться SVG-фильтром! Например, от Аны Тюдор: https://codepen.io/thebabydino/pen/MWBNrZq
К сожалению, на Safari съехали буквы, но сути дела не меняет :)
#svg #grainy #бородач
#codepen дня
Давно не было рубрики, потому что это ну как-то ну слишком лениво.
Но вы только посмотрите на эту кнопку от Петра Кнолла: https://codepen.io/Petr-Knoll/pen/QwWLZdx
Если это не приближает нас к пику глассморфизма — то я не знаю, что приближает :)
#css #glassmorphism
#инструмент дня
Сложно представить себе проект, в котором не использовался бы ESLint.
Ну разве что вы или до сих пор на TSLint или ушли на Biome.
Так вот, в прошлом году, совместно с релизом версии 9, они обозначили свои планы. А планы большие: стать основным инструментом для поддержки качества кода на фронтенде. Это значит, линтинг JS, TS, JSON, Markdown. Ну и CSS тоже.
И вот, наконец, 18 февраля команда объявила о начальной поддержке линтинга CSS: https://eslint.org/blog/2025/02/eslint-css-support/
Соответственно, выпустив плагин @eslint/css:
no-duplicate-imports - запрещает дубликаты @import rules
no-empty-blocks - запрет пустых блоков
no-invalid-at-rules - валидация @-правил
no-invalid-properties - запрет некорректных свойств
require-baseline - самое интересное, заставляет придерживаться Baseline (современных фич веба и CSS в том числе, которые поддерживаются всеми браузерами в должной мере)
use-layers - а вот это спорно, использование слоёв aka @layer. Я пока не видел никого, кто их понимает :)
Ну что, убираем Stylelint?
#css #lint #eslint
#фишка дня
Не совсем про разработку, но достаточно интересно.
Итак, понадобилось мне вчера отправить фотографии костюмов из одного сериала знакомой портной. Зашёл я на стриминг HBO Max, нашёл нужные кадры, снял скриншот...
А он чёрный. Элементы UI и... чёрный экран.
— DRM, — подумал Штирлиц.
И таки да, DRM. Защита авторских прав содержимого.
Виральность? Не, не слышали.
Технология, по которой работает DRM на стримингах, называется EME: Encrypted Media Extensions. Разработана совместно Netflix, Google и Microsoft.
Есть хорошее описание её работы: https://hsivonen.fi/eme/
Encrypted Media Extensions (EME) — это JavaScript API для <video> и <audio>, предназначенное для работы с DRM-защищенным контентом. Для расшифровки требуется Content Decryption Module (CDM), который доверен правообладателями и скрывает определенные данные от пользователя. Браузер при этом считается ненадежным.
CDM может быть встроен в браузер, загружен отдельно или реализован на уровне ОС и железа. Он управляет ключами для расшифровки контента. В EME есть учебная система Clear Key, но она не предназначена для коммерческого использования.
CDM может работать по-разному: просто расшифровывать данные, расшифровывать и декодировать видео в браузере, передавать декодированные кадры напрямую ОС или работать с GPU, скрывая пиксели даже от системы. EME определяет только интерфейс API, оставляя детали DRM разработчикам.
Так вот, к фишке дня. В Firefox EME не реализованы, скриншоты делаются без проблем. А в Chrome — работают на GPU, иначе ваши процессоры сошли бы с ума.
А это значит, что достаточно (по крайней мере пока) отключить аппаратное ускорение графики. И, вуаля, скриншоты снова можно делать!
Очевидно, с развитием железа и это скоро станет невозможно. Останется только аналоговая брешь (крутое название для экранки, не правда ли?).
#drm #eme #api
#молния дня
Вы же посмотрели видеодемонстрацию ИИ-помощника, который поверх экрана выводит ответ на тестовое лайвкодинг-задание?
Вот: https://youtu.be/rcH813f5vCE
Так вот, повторю: это было реальное собеседование в Амазон. И интервьюверу потом это видео прислали.
И в Амазон обиделись! И требуют отчисления автора проекта из университета!
Пруф: https://x.com/im_roy_lee/status/1895276427005845981
В комментарии приложу картинку оттуда, на случай, если что-то с твитом пойдёт не так :)
🔹 Яндекс упростил запуск и дообучение нейросетей для бизнеса🔹
Теперь разворачивать и адаптировать модели в облаке можно быстрее, проще и дешевле. Два новых инструмента в Yandex Cloud помогут разработчикам и компаниям внедрять ИИ с минимальными затратами на инфраструктуру:
⚡️ Запуск моделей на выделенных мощностях в Foundation Models
Хотите развернуть нейросеть без возни с серверами? Теперь можно запускать модели (включая LLaMa, Qwen, Mixtral, DeepSeek) прямо в Yandex Cloud. Инфраструктура, настройка и мониторинг — уже внутри. Это означает:
—Быстрое развертывание без настройки железа
—Стабильность и предсказуемая производительность
—Возможность комбинировать и тестировать разные модели
📌 Попробовать
⚡️ Дообучение методом LoRA
Когда базовой модели недостаточно, LoRA (Low-Rank Adaptation) поможет быстро адаптировать её под ваши задачи. Это метод частичного дообучения, который:
— Позволяет кастомизировать YandexGPT и LLaMa за 10 минут
— Улучшает точность выполнения задачи на младших моделях иногда даже выше, чем на более мощных версиях
Компании уже используют LoRA для автоматической генерации презентаций, анализа документов и классификации данных.
📌 Подробнее
Теперь можно комбинировать модели, переключаться между ними и ускорять работу с ИИ без лишних затрат.
Какими мини-апами в tg вы пользуетесь?
Вот какой удобный Mini App появился недавно: Calendar for Telegram
Это:
💫 Быстрый доступ к расписанию, которое теперь всегда под рукой;
💫 Лёгкий шэринг событий – без e-mail! Просто отправьте приглашение другу/коллеге в чат или в группу;
💫 Афиши – общее расписания для работы, мероприятий, совместных путешествий или спорта;
💫 Слоты – отражают доступность вашего свободного времени для назначения встреч (это как Calendly, только в вашем tCalendar);
💫 Моментальный видео-звонок – возможность создавать Google Meet сразу в tCalendar;
💫 Синхронизация с Google Календарем – все события всегда актуальны в обоих календарях.
Самое приятное, что всё это бесплатно и незаменимо в обычной жизни👌
Юзкейс такой: поняли, что нужна встреча -> создали её тут же в тг -> пригласили участников. В Гугл календарь само придет. 🪄✨
#такое дня
Итак, что же произошло?
Жена изучает Wordpress и React. Вот вы знали, почему Gutenberg — конструктор блоков в Wordpress — так боготворят? Вот я раньше не знал, пока, собственно, жена в колледже не начала его изучать.
Если коротко, каждый блок в Gutenberg можно описать в React. А потом рендерить WYSIWYG в конструкторе и PHP-версию для сайта. Исконный SSR как он есть :) На самом деле, я был почти в восторге.
И для этого процесса имеется кодогенератор.
Он сгенерирует JSON-схему блока, стили и начальные скрипты для редактора и клиентской части сайта, package.json с нужными скриптами, PHP-обвязку, readme... В общем, с десяток файлов.
Но вы не за этим тут собрались, верно?
Итак, нагенерировали 9 блоков, три из них практически полностью закончили, остальные — оставили в виде кодгена. И попросила жена меня помочь уложить всё в git. Последить, что все сделано правильно.
Как показали события, нашла, конечно, кого просить.
Ну, первый раз чтоле:git inittouch .gitignoregit add .git status
...так, index.php же не нужен...git reset --hardecho "index.php" >> .gitignore
...блять
89 файлов исчезли, осталось лишь то, что было открыто в файлах.
Зачем я сказал сделать хард-ресет — я сам не очень понимаю, если честно. Даже не спрашивайте. Я привык работать инкрементально: и добавлять файлы с самого начала, и ветки на каждый чих и так далее. Потому ресет для меня был инструментом простой подчистки мусора.
Теперь-то понятно, что от этой привычки надо избавляться.
К счастью, в git ничего не пропадает бесследно. Есть возможность вытащить «подвисшие» файлы из индекса, пока не произошёл коммит. Как-то так:git fsck --lost-found
Эта команда вытащит подвисшие файлы в директорию .git/lost-found/.
Вот только вытащит она их по хэшу. Названия будут утеряны. Ну и ещё — одинаковые файлы будут, очевидно, схлопнуты в один (ещё раз внимание на слово хэш).
К счастью, мы же помним, что у нас кодогенератор? Содержимое каждого из этих файлов явно говорит, к чему оно относится. Так что, вооружившись списком файлов, который мне ранее дала команда git status, я создал 89 пустых файлов с верными именами и пошёл копировать один за одним. Полчаса из жизни.
Но точно не впустую. Выводы сделаны. Учитесь пользоваться инструментами, котаны. Не полагайтесь на привычку.
Да, во многи редакторах присутствует концепция локальной истории, но тот же VS Code реагирует только на открытые файлы.
В общем, было весело. И немного стыдно, да.
P. S. удалять index.php из списка добавленных файлов надо было так:git reset index.php
Или просто git reset
...чтобы очистить список файлов к добавлению.
#git #wordpress #fail
Яндекс открыл тестирование платформы для разработки SourceCraft
SourceCraft — это новая платформа от Yandex B2B Tech для работы с кодом: писать, тестировать, управлять версиями, разворачивать и сопровождать проекты можно в одном месте.
🔹 Сейчас платформа в Technical Preview — можно оставить заявку на тестирование на сайте, доступы выдают поэтапно.
💡 Что в ней есть?
— Удобная навигация по коду
— Автодополнение с AI, в будущем — чат, код-ревью, автотесты
— Гибкий Git на базе S3
В будущем также добавят возможность интеграции с сервисами Yandex Cloud.
👨💻 Кому может пригодиться?
— Разработчикам, тестировщикам, DevSecOps
— Менеджерам проектов и продуктов
— Техническим писателям и владельцам бизнеса
Перед открытым тестированием команда проверила платформу на себе — это называется догфудинг. В сентябре-октябре 2024 они полностью перевели свои процессы в SourceCraft и дорабатывали его, пока сами не остались довольны. Сейчас к тесту приглашают всех желающих.
📌 Оставить заявку: sourcecraft.dev
#инструмент дня
Как сконвертировать что угодно во что угодно?
Через https://transform.tools/, конечно!
SVG в JSX, CSS в TailwindCSS и обратно, Flow в TypeScript, JSON Schema в OpenAPI schema и так далее до бесконечности.
Конечно, если нужно делать это массово — не вопрос, стоит использовать специально подготовленные утилиты. Но, как минимум, их можно подсмотреть прямо в репозитории проекта: https://github.com/ritz078/transform
#tool
#инструмент дня
Наткнулся на тред Андрея Романова про мониторинг крашей. Публикуется с изменениями.
Не тех крашей, что с чёлкой, а крашей браузера. Падений на ровном месте.
Очевидно, при падении ваш код перестанет выполняться, поэтому стандартные методы здесь не работают.
Зато Chrome нарисует симпатичную графику, очень полезно.
Однако, есть экспериментальный Reporting API, который позволяет браузеру отправлять отчёты о сбоях, нарушениях политик безопасности и использовании устаревших функций:
🔗 Спецификация API: https://w3c.github.io/reporting/
🔗 Обзор на Chrome for Developers: https://developer.chrome.com/docs/capabilities/web-apis/reporting-api
Reporting API предоставляет два способа получения отчётов:
📌 Глобальный класс ReportingObserver — позволяет подписаться на предупреждения и обрабатывать их в JavaScript. Он не фиксирует падения, так как работает на клиенте.
📌 HTTP-заголовок Reporting-Endpoints — задаёт серверные эндпойнты, на которые браузер отправляет отчёты. Этот метод покрывает все виды ошибок, включая падения вкладки.
Хотя API остаётся нестабильным и реализован не во всех браузерах, у него нет аналогов. Например, Figma уже использует его для мониторинга крашей браузера:
🔗 Разбор использования в Figma: https://neugierig.org/software/blog/2023/01/browser-crashes.html
Лучше так, чем совсем не иметь :)
Впрочем, отличным вариантом остаётся и пульс aka heartbeat с выставлением флага. Если приложение завершилось адекватно — флаг помечается как закрытый, а по пути можно собрать дополнительных данных.
Ну и, как минимум, средства вроде Sentry и Datadog отлично справляются с трекингом ошибок, по которым тоже можно косвенно понять причину падения.
#web #crash #report
Формошлёп теперь в телеграмUSB Фронтенд здесь... Здесь все: HTML, CSS, JS и фреймворки)
Авторский канал без душноты.
Пишу у себя про верстку и JS. Без копипаста и обсасывания одинаковых тем по десятому кругу.
Просто, с юмором и без цензуры.
Присоединяйся: @frontbox будем вместе шлёпать формы и красить кнопки)
Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает?
Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам.
✔️ Как научиться отвлекаться от работы и отдыхать?
✔️ Как совместить кучу рабочих задач и время с семьей?
✔️ Как справиться с прокрастинацией?
✔️ Как не растерять запал, даже если кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
👨🏻💻 Псс. Заходите в закреп канала - там много полезного, и даже бесплатный мини-курс.
🔥 Фронтендеры тут? Выкатили кучу докладов с «Я💛Фронтенд»
Пару интересных докладов, которые я заценил:
💡Зачем нужен паттерн Backend for Frontend: разобрали, почему стандартных API недостаточно в современных мультиплатформенных системах и как BFF позволяет изолировать клиентскую логику
💡Как побороть рутину добавления новых иконок: рассказали про автоматизацию процесса и обсудили альтернативные подходы – использование шрифтов иконок, спрайтов или CSS background-иконок.
Посмотреть все выступления можно тут. Еще можно глянуть полезный подкаст, который записали перед ивентом. Там Сергей Бережной вместе с другими участниками обсудили, как по-разному переписать код. Красота vs. производительность, минимализм vs. выразительность.