Оптимизация в React почти всегда сводится к двум факторам: объёму работы, которую выполняет JavaScript, и частоте (а также «стоимости») перерисовок компонентов. Сам React работает достаточно быстро, но в крупных интерфейсах даже небольшие архитектурные промахи и на первый взгляд безобидные ререндеры начинают заметно бить по производительности.В данной статье мы расскажем про ключевые подходы к оптимизации React-приложений: как уменьшить количество лишних ререндеров, сократить объём вычислений п…
Несмотря на весь технический прогресс IT, мне за всё время так и не удалось повстречать убедительное решение проблемы ввода «ghbdtn» вместо «привет» или «lf» вместо «да» — путаницы с раскладкой клавиатуры при наборе текста.Какие решения мне знакомы:стандартный системный индикатор на панели — он малозаметен, особенно на больших мониторах; его использование требует отдельный навык дисциплины — перед каждым прикосновением к клавиатуре искать глазами крохотный индикатор где‑то в углу экранавариант …
Разберём микрофронтенд через историю вымышленного хакера — и заодно поймём, почему это спрашивают на собеседованиях.Статья собрана по заметкам в телеграм канале.Недавно на собесе меня спросили: "А как именно работают микрофронты? Там что, прямо eval используют?"Я что-то промямлил про expose, host, сборку... и понял, что вообще не понимаю сути. Знакомо?После этого я потратил неделю на изучение webpack изнутри. Чтобы запомнить материал, придумал историю про горе-хакера.Это образовательная…
Декларативные шаблоны Vue решают 90% задач фронтенда. Но периодически возникают ситуации, где шаблонного синтаксиса оказывается мало. Нужен более тонкий контроль над рендерингом или возможность вынести часть компонента за пределы его естественной позиции в DOM-дереве. Для таких случаев Vue 3 послал нам render-функции и встроенный компонент Teleport.Проблема, которую решают рендер-функцииVue компилирует шаблоны в JavaScript-функции автоматически. Пишем <div>{{ text }}</div>, а Vue пр…
Сколько будет корень из нуля? Даже школьник ответит не задумываясь: ноль. Но если задать этот вопрос JIT‑компилятору Maglev внутри движка V8, то при определённых обстоятельствах он сначала скажет: «ноль», а потом решит сэкономить на проверке безопасности и отдаст злоумышленнику доступ к памяти браузера.Меня зовут Паша Кузьмин, я занимаюсь практической безопасностью Яндекс Браузера и проекта Chromium. В нашей команде мы регулярно разбираем уязвимости и исследуем методы атак — чтобы защищать поль…
Что это простыми словами?Мультиплексирование — это технология, позволяющая передавать несколько независимых потоков данных через одно физическое соединение. Представьте официанта в ресторане, который несёт один поднос с заказами для десяти разных столиков, вместо того чтобы делать десять отдельных ходок. Техническое определение: Совместное использование общего ресурса (канала связи, сокета, порта) для одновременной передачи множества логических потоков данных. Почему это важно в наше время?В эп…
«А сегодня в завтрашний день не все могут смотреть. Вернее смотреть могут не только лишь все, мало кто может это делать»Для сравнения доходности торговых стратегий применяют бектест, прокрутка исторических данных для симуляции как алгоритм поведёт себя в той или иной ситуации. Look-ahead bias - когда бэктест подглядывает в будущее. То есть, использует данные, которых в момент принятия решения ещё не было. // Прямая передача массива с историческими данными function shouldBuy(candles, idx) { …
Команда JavaScript for Devs подготовила перевод статьи о CSS Grid Lanes — новом подходе к masonry-раскладкам, который наконец-то становится нативной частью CSS. Grid Lanes используют всю мощь CSS Grid, работают без JavaScript, учитывают доступность и дают дизайнерам и разработчикам гибкость, о которой раньше можно было только мечтать. Разбираемся, как это работает и почему это важный шаг вперёд для веба. Он уже здесь — будущее «каменных» (masonry) раскладок в вебе. После фундамента, заложенног…
В компьютерных сетях (как и, в принципе, при любой передаче информации) есть и всегда будут существовать две задачи:конфиденциальность (confidentiality) - я отправляю письмо Маше, это всем известно, но что в этом письме - можем прочитать только мы с Машейанонимность (anonymity) - все могут прочитать содержимое письма, но от кого оно и куда - непонятно (понимаем только мы с Машей)Соответственно, имея те или иные цели есть множество решений этих задач.Итак, хорошо. Вот я подключаюсь к своему люби…