В экосистеме JavaScript произошёл серьёзный инцидент, который хорошо показывает, насколько опасными стали атаки на open source и цепочки поставок. Исследователи StepSecurity сообщили о компрометации axios — одной из самых популярных HTTP-библиотек в npm (~83 миллионов загрузок в неделю). Злоумышленник получил доступ к аккаунту одного из ведущих мейнтейнеров проекта и опубликовал две вредоносные версии пакета: axios@1.14.1 и axios@0.30.4.На первый взгляд это выглядит как обычное обновление завис…
Замыкание это важный механизм JavaScript, понимание которого обязательно фронтендера. Он позволяет изящно реализовать принцип наименьшего раскрытия, благодаря инкапсулированию функций, сохраняя их состояние во внутренней области видимости, для последующего использования.Замыкания в лямбда-вычисленияхЗамыкания лежать в основе функционального программирования и даже в основе ООП. Изначально они были математической концепцией из области лямбда-вычислений, получившей воплощение во многих языка прог…
Привет! Я Никита, Staff-инженер в крупном финтехе. В этой статье я хочу поделиться нашим опытом построения системы observability. Мы прошли путь от простых логов до сквозной трассировки, и я покажу, как это работает на фронтенде.TL;DR: В статье разбираем опыт внедрения OpenTelemetry в крупном финтех-проекте. Проблема: Логи без контекста не позволяют быстро найти причину 500-й ошибки в распределенной системе. Решение: Сквозная трассировка (Distributed Tracing) от фронтенда до бэкенда. Что внутри…
Мне нравится писать тесты. Написание теста и последующее обновление кода для его прохождения — всегда увлекательный процесс.Но нет ничего хуже, чем выяснение того, что проверяют существующие тесты (раньше я сам часто был автором таких тестов).Представляю вашему вниманию мои советы по написанию высококачественных тестов для фронтенда.Некоторые примеры намеренно упрощены путем удаления специфичных для фронтенда частей для облегчения понимания. Эта статья посвящена тестированию фронтенда, но, чест…
Тот вечер я помню хорошо. Двадцать минут в звонке, пытаясь объяснить человеку как установить VPN. Через пару дней и этот способ тоже закрыли.Но это была не единственная боль. Простой звонок другу в Москву, переписка с клиентом, групповой чат с командой - всё превратилось в логистическую задачу. Один сидит без VPN, у другого он не работает, третий не может установить нужное приложение. Люди тратят время не на разговор, а на то чтобы вообще выйти на связь.А потом мой российский номер, к которому …
Знакома ли вам ситуация? Вы открываете файл контроллера на 2000 строк. Там перемешаны SQL-запросы, HTML-разметка, бизнес-логика и комментарии на ломаном английском. В голове начинает играть тревожная музыка, а внутренний голос шепчет: “Закрой это немедленно, пока оно не сломалось”.В психологии это называется “когнитивная перегрузка”. Мозг просто отказывается парсить такое количество переменных одновременно. Раньше программистам приходилось часами медитировать над распечатками кода, как сыщикам,…
Решил написать продолжение к предыдущей моей статье Операционная система Анна. Назвал "операционной системой" скорее как отсылку к фильму "Она" (Her) - понимаю, что это, конечно, не ОС в классическом смысле, так что прошу воспринимать это как художественное название, а не технический термин. Ну и вот недавно моя жена затеяла вести расходы в Google Sheets. Увидел её мучения о том, как создать формулы, листы и т. д. В итоге ей посоветовал поставить Анну на её домашний компьютер. П…
У меня OpenClaw крутится на VPS уже два месяца. Штука крутая, но есть один момент, который бесит: весь интерфейс личного кабинета на английском. Я-то ладно, привык, но когда показываешь коллегам или знакомым — сразу «а что тут нажимать» и «а это что за Settings».Казалось бы, ну загугли «openclaw на русском» — и найдёшь готовую локализацию. Нет. Нету. В roadmap проекта тоже ничего про i18n. Строки захардкожены прямо в JSX, никакого react-intl или i18next там и близко нет. То есть даже если отпра…
Когда говорят «React перерендерился» — обычно имеют в виду что-то расплывчатое. Новичкам это слово объясняет всё и ничего одновременно. В официальной документации процесс описан точнее: trigger → render → commit. Давайте разберём, что происходит на каждом этапе — без магии, зато с Fiber, флагами и браузерным пайплайном.Render-фаза: вычисление измененийRender-фаза — это не обновление DOM. Это вычисление того, каким DOM должен стать.React рекурсивно обходит дерево компонентов, вызывает их функции…