Каждый frontend-разработчик сталкивался с ошибкой вида TypeError: Cannot read property 'name' of undefined. Это часть целого класса ошибок в JavaScript, возникающих из-за несоответствия фактического формата данных ожидаемому. Расскажу, как избавиться от подобных проблем и добиться стабильности, внедрив три ключевых шага: API-слой, Backend-for-Frontend (BFF) и проверку с помощью Zod.А в чём проблема?Мы знаем, что пользовательский ввод нужно проверять, особенно на бэкенде, прежде чем сохр…
История этой статьи началась с того, что я вспомнил о довольно известном высказывании Мартина Фаулера, автора книг и статей по архитектуре ПО, которое нередко вызывает недопонимание (во всяком случае так было у меня) — «Я делаю рефакторинг ежечасно». Первая мысль, которая логично возникает после этого высказывания — уважаемый публицист просто лукавит. Вторая — что, наверное, кроме рефакторинга он в своей жизни ничем больше не занимается. Но так ли это? С вами в очередной раз Костя Логиновских,…
Привет! На связи Даня, разработчик на Angular в T-Банке. Поделюсь с вами опытом использования фикстур в Playwright. Я решил поговорить об этом, потому что вместе с ростом функциональности проектов растут и сложности при тестировании, а фикстуры предоставляют удобный способ избавиться от дублирующегося кода и сложных моков.Эта статья посвящена основам: зачем нужны фикстуры, чем они отличаются друг от друга и какую пользу приносят при тестировании веб-приложений. Мы подробно разберем устройство ф…
ВведениеFPS расшифровывается как «кадры в секунду» (Frames Per Second) и означает измерение того, сколько кадров, или изображений, отображается на экране за одну секунду. Для frontend-разработчика эта метрика позволяет понять насколько интерфейс плавно и четко работает. От переводчикаВсем привет, с вами Максим Иванов, и сегодня мы поговорим о простом, но интересном трюке, который поможем вам сделать вас сайт быстрее за счет улучшения показателя FPS. Раньше всего с этой аббревиатурой вы могли ст…
Привет, Хабр, меня зовут Алёна, я senior фронтент-разработчик в отдела разработки ПО для розничного бизнеса в Райффайзенбанке. Недавно наша команда решила улучшить пользовательский опыт обработки ошибок запроса к бекенду и я решила комплексно исследовать эту тему и собрать воедино все лучшие практики.Начтем с того, что при обработке ошибок Axios запросов существуют 4 ситуации, которые необходимо по-разному интерпретировать:Запрос был обработан сервером и статус ответа сервера вне диапазона 2xxЗ…
▍ Введение Наш первый «компилятор WebAssembly в твите» имел длину 269 байт; с тех пор мы смогли снизить её всего до 192 байтов. В результате мы получили компилятор, получающий арифметическое выражение, записанное в обратной польской нотации, и компилирующий его в валидный модуль WebAssembly. Этот модуль экспортирует одну функцию, которая возвращает результат исходного арифметического выражения. Компилятор выглядит так: let c=(b,l)=>WebAssembly.instantiate(new Int8Array( [,97,115,109,1,,,,…
ВведениеПри разработке у нас зачастую возникает необходимость прямого взаимодействия с DOM-элементами. Для такого случая React предоставляет нам механизм рефов (refs), который позволяет получать доступ к элементам после того, как они зарендерятся. Чаще всего используются обычные объектные рефы через useRef (обзовём их так), но также существует другой подход — callback refs. Этот метод даёт нам дополнительную гибкость и контроль над жизненным циклом элементов, позволяя выполнять необходимые нам …
Атрибуты импорта Фича ECMAScript "Атрибуты импорта" (import attributes) позволяет импортировать артефакты, отличающиеся от модулей JavaScript. В этом разделе мы рассмотрим, как это выглядит и почему может быть полезным. Атрибуты импорта достигли 4 стадии в октябре 2024 года и, вероятно, станут частью ECMAScript 2025. ❯ 1. Импорт артефактов, отличающихся от JS-модулей (ESM) Импорт артефактов, которые не являются кодом JS в виде модулей, имеет давнюю традицию в экосистеме JS. Например,…
ПредисловиеНе часто приходится встречать людей, которые понимают зачем он нужен и ещё реже попадаются проекты, в которых его используют. А шаблон-то очень полезный!В этой статье вы поймёте как он устроен, зачем он нужен и на примерах научитесь его правильно применять.Как он устроен?Главная смысл шаблона - передача в качестве props функции, которая будет принимать какие-то данные от дочернего компонента и отрисовывать их так, как будет указано в родительском.Например:const ParentComponent = () =…