True Frontender

Уязвимость в React ⚠️ Команда разработки React сообщила об обнаружении критической уязвимости в серверных компонентах React, позволяющей выполнять удалённое выполнение кода на уязвимых серверах, использующих React Server Components. Что случилось? Ошибка в механизме обработки данных в RSC даёт возможность злоумышленнику отправить специально сформированный запрос и выполнить произвольный код на сервере без авторизации. Уязвимость получила идентификатор CVE-2025-5518 и максимальный рейтинг критичн...

Привет 👋 Разберём полезный и редко используемый атрибут inputmode. Он говорит браузеру, какую клавиатуру показывать на мобильных устройствах при вводе данных. Пример: <input type="text" inputmode="numeric" placeholder="Введите номер телефона" /> Пользователь увидит цифровую клавиатуру, хотя поле обычное текстовое. Доступные значения inputmode 1. text — обычная клавиатура 2. none — клавиатура не показывается 3. tel — клавиатура с цифрами и символами телефона 4. numeric — только цифры 5. decimal ...

Привет! 👋 Хочу поделиться историей, которая началась этим летом в июле и до сих пор продолжается. В одном из дворов мы заметили кота, который выглядел настолько плохо, что пройти мимо было просто невозможно. Худой, в ранах, с кучей проблем, о которых тогда мы ещё даже не подозревали. Мы решили поймать его и отвезти в больницу, но это оказалось не так просто. Нам не удалось поймать его самим и пришлось искать человека, который умеет ловить животных. К счастью, нам удалось поймать его и отправить...

В проектах часто встречается рендер через логический оператор И: {condition && <div>Component</div>} Если condition истинно, то отрендерится компонент. Если же условие ложно, то мы ничего не увидим. Причину этого мы разбирали в этом посте(клац). А что если мы хотим вывести компонент при одном из условий? Можно написать так: {condition || secondCondition && <div>Component</div>} Но тут есть какой-то подвох... Он не всегда бросается в глаза. Из-за приоритета операторов И(&&) выполняется раньше, че...

Привет! Сегодня разберём StrictMode для разработки в React 🖼️ Он помогает находить потенциальные ошибки и улучшать качество кода. Что делает StrictMode? StrictMode активирует дополнительные проверки в режиме разработки: - Дважды вызывает функции (например, useEffect, useState, конструкторы классов), чтобы выявить побочные эффекты. - Подскажет, если вы используете методы, которые скоро удалят. - Находит потенциальные баги, такие как мутации состояния или неправильная работа с хуками. Как подключ...

Привет! Обычно для группировки я использую groupBy из Lodash, но в самом JavaScript тоже есть встроенные методы: 1. Object.groupBy 2. Map.groupBy Пример данных с которыми будем дальше работать: const users = [ { name: "Аня", age: 25, city: "Москва" }, { name: "Иван", age: 30, city: "Москва" }, { name: "Оля", age: 22, city: "Казань" }, { name: "Петя", age: 30, city: "Казань" }, ]; Object.groupBy: const byCity = Object.groupBy(users, user => user.city); console.log(byCity); // { // "Москва": [ { n...

Сегодня разберём CSS-свойство — display: contents. Оно редко встречается, но может сильно упростить вёрстку в некоторых кейсах. Что такое display: contents? Это свойство заставляет элемент "исчезнуть" из рендера, но его дочерние элементы остаются и ведут себя так, будто родителя нет. Пример У нас есть сетка, но лишняя обёртка ломает структуру: <style> .wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .inner { display: contents; } p { background: lightblue; padding: 10px; } <...

Привет! Начнем неделю с разбора интересного метода padStart. Метод padStart добавляет в начало строки указанные символы (пробелы по умолчанию), пока строка не достигнет заданной длины. Синтаксис: string.padStart(targetLength, padString) 1. targetLength: желаемая длина строки после дополнения. 2. padString: символы, которыми дополняется строка (по умолчанию — пробел). Как это работает? Если длина исходной строки меньше targetLength, метод добавляет padString в начало, пока строка не станет нужной...

Бывают ситуации, когда нужно развернуть вложенный массив. Некоторые начинают писать reduce и вручную перебирать вложенность. В JS есть готовое решение — метод flat(). Что делает? Метод flat() разворачивает вложенные массивы на указанную глубину, создавая новый массив. Примеры const arr = [1, [2, 3], [4, [5]]]; console.log(arr.flat()); // [1, 2, 3, 4, [5]] По умолчанию разворачивает массив на 1 уровень вложенности. Но можно указать нужную глубину или даже развернуть массив полностью. Если массив ...

Привет! Недавно мы разбирали нативный метод Object.groupBy, а сегодня разберём задачу с реализацией кастомного groupBy. Задача Дан массив объектов: const users = [ { name: 'Алиса', age: 21 }, { name: 'Макс', age: 25 }, { name: 'Ваня', age: 21 }, ]; Нужно сгруппировать по возрасту: groupBy(users, user => user.age); // Результат: // { // 21: [{ name: 'Алиса', age: 21 }, { name: 'Ваня', age: 21 }], // 25: [{ name: 'Макс', age: 25 }] // } Решение через&nbsp;reduce: function groupBy(array, fn) { retu...