Each child in a list should have a unique "key" prop
Пример:
{items.map(item => <div>{item.name}</div>)}
Решение: Добавить уникальный key:
{items.map(item => <div key={item.id}>{item.name}</div>)}
Cоветы по работе с Node.js, Express, Nest.js, Fastify, Rust, Go, Spring. RESTful и GraphQL API, реализации микросервисной архитектуры, оптимизации с помощью кэширования, очередей и асинхронной обработки. Вопросы безопасности, аутентификация, авторизация, CI/CD, контейнеризация с Docker, облачные технологии AWS, Azure, GCP.
iOS (Swift, Objective C), Android (Kotlin), Flutter, React Native! Создание UI/UX, тестирование, интеграция API, публикация в магазины. Решайте ошибки, делитесь лайфхаками, изучайте тренды (AR, IoT). Помощь новичкам и экспертные кейсы.
2D/3D, движки (Unity, Unreal, Godot), геймдизайн, анимация! Создавайте проекты под PC, мобильные, консоли. Решайте ошибки, делитесь лайфхаками, изучайте тренды (VR, мультиплеер). Помощь новичкам и экспертные кейсы
Синтаксис, библиотеки, фреймворки, алгоритмы, ООП, функциональное, асинхронное, многопоточное программирование. Помощь новичкам, советы экспертов, тренды и кейсы. Решайте задачи, делитесь кодом.
обсуждение CI/CD, автоматизации, облаков (AWS, Azure), Docker, Kubernetes, мониторинга и IaC. Обмен опытом, решение задач, лучшие практики. Советы по инструментам (Ansible, Terraform), кейсы, оптимизация workflows
обсуждение SQL, NoSQL (MySQL, PostgreSQL, MongoDB), Redis, проектирования БД, оптимизации запросов, администрирования. Решение проблем, бэкапы, репликация, безопасность данных. Советы по настройке, кейсы, обмен опытом.
Операционные системы, кроссплатформенные программы, системы. Unix, Linux, Windows, MacOS и т д.
Актуальные IT-новости: обзоры технологий, релизы ПО, события индустрии (искусственный интеллект, кибербезопасность, стартапы). Аналитика рынка, тренды, кейсы компаний. Экспертные мнения, прогнозы, дискуссии о будущем IT. Следите за обновлениями Apple, Google, Microsoft и других гигантов.
IT-приколы, мемы про разработчиков, программистские баги и гифки. Обсуждаем смешные кейсы, шутки про искусственный интеллект, криптовалюты, GitHub и Reddit. Делитесь своими мемами, находите единомышленников, отдыхайте с пользой
Each child in a list should have a unique "key" prop
Пример:
{items.map(item => <div>{item.name}</div>)}
Решение: Добавить уникальный key:
{items.map(item => <div key={item.id}>{item.name}</div>)}
Cannot update a component while rendering a different component
Причина: Вызов setState во время рендеринга другого компонента.
Пример:
function Parent() {
const [state, setState] = useState();
return <Child setState={setState} />;
}
function Child({ setState }) {
setState(42); // Вызов здесь запрещен!
return <div>...</div>;
}
Решение: Использовать useEffect для сайд-эффектов.
const name = user.data.name; // Ошибка, если `user.data` может быть `undefined`
Причина: Не проверена возможность undefined или null.
Решение: Использовать опциональную цепочку (user.data?.name) или проверку:
if (user.data) { ... }
const [count, setCount] = useState<string>("0"); // Ошибка при попытке передать число
Причина: Несоответствие типов данных.
Решение: Указать правильный дженерик для useState:
const [count, setCount] = useState<number>(0);
Если бы меня спросили, сложно ли быть программистом, я бы ответил — да.
Это не про “тыкание по кнопкам за 300к в наносек” ️
, а про упорный мозговой труд:
— Решение алгоритмических головоломок,
— Построение логики в голове и в коде,
— Постоянное обучение и адаптацию.
Но есть и хорошие новости! Первые 2 года — самые сложные. После тонны статей, книг
и тысяч часов практики — всё становится проще. Опыт превращает хаос в понятные паттерны.
А при чём тут я?
Раз уж это мой блог, расскажу о себе в трёх словах:
1️⃣ Программист (очевидно!),
2️⃣ Рыбак (моя страсть!),
3️⃣ Штангист ️
️ (правда, бывший — не поднимаю железо профессионально уже 5 лет).
Почему это важно? Потому что работа — не вся жизнь!
Многие коллеги из Москвы (эй, вы там! ) зацикливаются на коде, забывая, что мир шире макбука. Записки к психологам? Попробуйте лучше…
Рыбалка vs. Психологи: мой лайфхак
Пару лет назад я открыл рыбалку — и это стало спасением.
Почему стоит попробовать:
— Неделя стресса? 3 часа на пруду = перезагрузка мозга ,
— Поймал рыбу? Эндорфиновый взрыв (никакой психолог так не поднимет настроение!),
— Бонус: свежий воздух вместо душного офиса.
Совет коллегам: Берите удочку, а не антидепрессанты!
Зацените какого судака поймал на волге осенью!
️
️ Качалка > Копания в мозгах
Почему тренер лучше психолога:
1️⃣ Дешевле (сеанс психолога = месяц абонемента),
2️⃣ Мотивация (деньги уплачены — придется ходить!),
3️⃣ Тренер-психолог 🧠 — хороший наставник и выслушает, и мышцы прокачает.
И да — это профилактика выгорания. Проверено!
Финал с кошачьим twist
Работаю я не из дома (только по пятницам — лень бороться с пробками ). Зато дома меня ждёт главный код-ревьюер — моя кошка Уточка. Ей можно кричать:
«ПОЧЕМУ ЭТОТ КОД НЕ РАБОТАЕТ???»
…Правда, ответа не будет. Но моральную поддержку гарантирую!
P.S. Найдите хобби — и код, и жизнь станут ярче.
Привет, я Кирилл. Я пишу код на JavaScript уже три, пять или 9 лет ?, и если вы ждёте историй про «успешного программиста с кофе на фоне MacBook» — пролистайте дальше. Здесь будет правда: гневные коммиты, бессонные ночи с документацией и вечная война между «оно работает» и «почему оно работает?».
JavaScript кажется дружелюбным, пока не столкнёшься с async/await в цепочке промисов, которые внезапно resolve в undefined
. А потом оказывается, что проблема была в опечатке переменной. Знакомо? Да, это каждый день. ️
️
Писать на чистом JS сейчас почти никто не будет — все бегут к фреймворкам. Но и там рай не наступает.
А начиналось так красиво:
document.querySelector('button').addEventListener('click', () => {
alert('Кирилл, ты попал!');
});
React — это как собрать мебель из IKEA: вроде инструкция есть, но половину деталей не понимаешь, зачем они.
Компоненты? Легко. Жизненный цикл? Уже устарело. Хуки? «Ну, это просто функции», — говорят в туториалах. А потом ты пишешь useEffect
и три часа дебагаешь, почему стейт обновляется на один рендер позже.
const [data, setData] = useState(null);
useEffect(() => {
fetchData().then((res) => {
setData(res); // А вот и нет, данные «уплывут» если компонент размонтируется
});
}, []);
Совет от меня: если useEffect
вызывает панику — вы не одиноки. Документация React читается как роман Кафки: вроде всё по-человечески, но смысл ускользает.
Next.js решает проблемы, о которых вы не знали, пока не начали его использовать. Хотите SSR? Пожалуйста. Статическую генерацию? Без проблем. А потом вы тратите день, чтобы заставить getStaticProps
правильно работать с динамическими роутами, и понимаете, что fallback: true
— это не магия, а головная боль.
Плюсы? Да, проект масштабируется.
Минусы? Конфигурация Webpack в Next.js — это как попытка починить реактивный двигатель на лету. И да, если увидите в ошибке Module not found: Can't resolve 'fs'
— добро пожаловать в клуб.
Потому что когда после 20 попыток страница наконец рендерится без ошибок, а анимация не лагает — это кайф. Потому что находить баг в чужом коде (спасибо, коллега) — это как выиграть в детективе. И да, конечно на жопе сидеть приятнее чем на заводе.
Но если вы думаете, что программирование — это про гениальные озарения и лёгкие деньги, то… Нет. Это про упорство, гугление на английском и умение смеяться над своими же комментариями // TODO: fix later
двухлетней давности.
P.S. Если React, Next.js и Node.js — это «просто», покажите свой GitHub. Мы все хотим на вас посмотреть.
Итог: Эпоха «дорогих айтишников» сменяется поиском баланса между стоимостью и качеством. Пока одни рискуют продуктивностью, другие делают ставку на мотивированных мидлов.
Шпаргалка по React 19 от Kent C Dodds, создателя Epic React
Это отчасти шпаргалка, отчасти краткое напоминание о некоторых новых возможностях React 19 с простыми примерами кода.
Вы могли не знать, что мы можем настроить вывод JSON.stringify()
По умолчанию JSON.stringify(data) не сериализует Set, Map, BigInt и т. д. Но с помощью функции replacer можно управлять тем, какие данные попадут в итоговую строку
Американский рынок потерял 1 трлн долларов из-за запуска китайского ИИ DeepSeek и продолжает терять…
p.s. - Сасай лалка))))
Китай уничтожил ChatGPT — главная тема прямо сейчас. Китайский DeepSeek с командой в 200 человек за 3 дня обошёл ChatGPT в App Store.
За $6 млн китайцы создали то, на что OpenAI потратила $6,6 млрд и 4500 сотрудников. DeepSeek работает быстрее и бесплатно (а для россиян без VPN).
Второй удар: Alibaba представили новую модель Qwen2.5-1M, которая может бесплатно генерить картинки и видео, обрабатывать огромные (!) объёмы кода, книги и базы данных. Скорость обработки в 7 раз быстрее.
Дальше — больше. В ответ на $100 млрд Трампа на «суперкомпьютер» Китай выделяет $137 млрд на развитие ИИ.
Взлёт DeepSeek связывают с падением рынка акций компаний из США и рынка криптовалют.
Как человек, который уже несколько лет работает в сфере ИТ, хочу поделиться своими мыслями о выгорании. Эта тема стала очень популярной, и многие обсуждают, действительно ли выгорание — это реальная проблема, или это просто миф, который превратился в мем.
Давайте начнем вообще с понятия что такое выгорание.
Выгорание — это когда ты чувствуешь себя полностью истощенным, как будто все силы покинули тебя. Это не просто усталость после долгого рабочего дня, а нечто большее. Ты можешь ощущать, что работа больше не приносит радости, а каждое утро вставать на работу становится настоящей пыткой.
В ИТ-сфере есть свои нюансы, которые могут способствовать выгоранию:
Долгие часы работы: Мы все знаем, как это бывает. Иногда приходится задерживаться, чтобы успеть к дедлайну. Это может затянуться на недели.
Постоянные изменения: Технологии развиваются с бешеной скоростью. Нужно постоянно учиться, осваивать новые инструменты и подходы. Это может выматывать.
Смешение работы и личной жизни: С удаленной работой границы между работой и отдыхом стираются. Ты можешь работать в любое время, и это иногда приводит к тому, что отдыхаешь меньше, чем нужно
Некоторые люди говорят, что выгорание — это просто отговорка для тех, кто не может справиться с работой. Но я не согласен. Я видел, как это состояние влияет на моих коллег и на себя. Это не просто «ленивость» или «недостаток мотивации». Это реальная проблема, с которой нужно бороться.
Но, честно говоря, устать можно на любой работе. Важно понимать, что везде есть свои трудности и стрессы. Я считаю, что нужно находить баланс. Если ты чувствуешь, что выгораешь, стоит подумать о том, как организовать свое время, чтобы не доводить себя до крайности.
Если ты чувствуешь, что на подходе к выгоранию, вот несколько советов:
Выгорание в ИТ — это не миф, но и не повод для паники. Устать можно на любой работе, но если хочешь чего-то добиться, нужно работать и прикладывать усилия. Не стоит жаловаться — лучше сосредоточиться на своих целях и двигаться вперед! Нюни хуевы.
В мире веб-разработки часто встречаются термины «фронтенд» и «бекенд». Эти два понятия относятся к различным аспектам создания веб-приложений и сайтов, и понимание их различий является ключевым для успешной работы в этой сфере.
Фронтенд (или клиентская часть) — это все то, что видит и с чем взаимодействует пользователь. Это интерфейс приложения, который включает в себя дизайн, графику, анимацию и элементы управления. Основные технологии, используемые во фронтенде, включают:
Бекенд (или серверная часть) — это часть приложения, которая работает на сервере и отвечает за обработку данных, выполнение бизнес-логики и взаимодействие с базами данных. Бекенд не виден пользователю, но он критически важен для работы приложения. Основные технологии, используемые в бекенде, включают:
Взаимодействие с пользователем: Фронтенд — это то, что пользователь видит и с чем взаимодействует, тогда как бекенд работает «за кулисами» и обрабатывает запросы, поступающие от фронтенда.
Технологии: Фронтенд использует HTML, CSS и JavaScript, тогда как бекенд может использовать множество различных языков и технологий, в зависимости от потребностей проекта.
Задачи: Фронтенд отвечает за пользовательский опыт (UX) и пользовательский интерфейс (UI), а бекенд — за логику приложения, управление данными и безопасность.
Время выполнения: Фронтенд обрабатывается на стороне клиента, что означает, что код выполняется в браузере пользователя. Бекенд обрабатывается на сервере, что требует взаимодействия с базами данных и выполнения логики приложения.
Фронтенд и бекенд работают вместе, чтобы создать полноценное веб-приложение. Когда пользователь выполняет действие на фронтенде (например, нажимает кнопку), это действие отправляет запрос на бекенд. Бекенд обрабатывает запрос, взаимодействует с базой данных, выполняет необходимую бизнес-логику и отправляет ответ обратно на фронтенд. Фронтенд затем обновляет интерфейс в соответствии с полученными данными.
Фронтенд и бекенд — это две стороны одной медали в веб-разработке. Оба аспекта важны для создания функциональных и привлекательных веб-приложений. Понимание различий между ними помогает разработчикам и дизайнерам работать более эффективно и создавать высококачественные продукты. В зависимости от потребностей проекта, разработчики могут специализироваться на одной из этих областей или стать «универсальными солдатами», обладая навыками и в фронтенде, и в бекенде.
Мэтт Мулленвег, основатель WordPress и владелец компании Automattic, заблокировал учётные записи пяти участников (Joost, Karim, Se Reed, Heather Burns и Morten Rand-Hendriksen), которые продвигали идеи создания форка WordPress и изменения модели управления в сообществе. Мэтт отметил, что поддерживает создание форков и заблокировал эти учётные записи, чтобы стимулировать переход от обсуждений к действиям.
По словам Мэтта, форки полезны для открытых проектов. Даже один участник, работающий в неправильном направлении, может нарушить совместную работу. Форки позволяют экспериментировать с новыми подходами к разработке и формами лидерства. Мэтт выразил интерес к смелым идеям, обсуждаемым заблокированными участниками, и надеется увидеть, что из этого получится. Он считает, что форк даст возможность сообществу попробовать что-то новое.
Мэтт также подчеркнул, что открытый код предоставляет возможность взять WordPress и реализовать своё видение в новом проекте без необходимости получения разрешения. Если в новом проекте удастся достичь значительных результатов, сообщество сможет перенести эти улучшения обратно в WordPress. Именно возможность обмена идеями между проектами делает открытый код движущей силой инноваций. Мэтт предложил провести совместный саммит разработчиков WordPress и форка через год, чтобы оценить достигнутые результаты и извлечённые уроки.
Кроме того, Мэтт иронично высказался о идее создания децентрализованного и немодерируемого каталога плагинов и тем оформления. Он отметил, что такая платформа предоставит авторам полную свободу, включая возможность размещать рекламные баннеры в интерфейсе администратора и собирать данные о пользователях.
Объект Intl позволяет форматировать числа, даты и валюту с учетом разных локалей и параметров.
Он предоставляется с множеством свойств, которые обеспечивают быстрое и безупречное форматирование данных.
Рассмотрим пример форматирования валюты:
let num = 100;
let RupeeFormatter = new Intl.NumberFormat("en-IN",
{style: "currency", currency: "INR"})
let RupeeFormatted = RupeeFormatter.format(num);
console.log(RupeeFormatted)
// ₹100
let USDFormatter = new Intl.NumberFormat("en-IN",
{style: "currency", currency: "USD"})
let USDFormatted = USDFormatter.format(num)
console.log(USDFormatted)
// $100
Оператор ?? присваивает переменной значение по умолчанию, если она null или undefined.
Используйте данный оператор, если сомневаетесь в существовании у объекта того или иного свойства. Если свойство отсутствует, переменной присваивается значение по умолчанию.
Пример:
let user = {}
let name = user.name ?? "Anonymous"
console.log(name)
// "Anonymous"
Метод Object.fromEntries() преобразует массив пар “ключ-значение” в объект.
Возьмем следующий массив и создадим из него объект, как показано ниже:
let arr = [["name", "Alice"], ["age", 25]]
let obj = Object.fromEntries(arr);
console.log(obj)
// {name: "Alice", age: 25}
Метод Array.flat() преобразует вложенный массив в один единственный.
Поскольку вложенными массивами сложно управлять, то данный метод помогает уменьшать их вложенность.
Пример:
let arr = [1, [2, [3, [4]]]];
let flat = arr.flat(Infinity)
console.log(flat)
// [1, 2, 3, 4]
Оператор ?. обеспечивает доступ к свойствам объекта без проверки, является ли он null или undefined.
Используйте его, когда не знаете, существует ли объект или нет.
Пример:
let user = null
let age = user?.age
console.log(age)
// undefined
Метод Array.reduce() применяет функцию к каждому элементу массива и суммирует результат в одно значение.
Пример сложения всех чисел массива:
let arr = [1, 2, 3, 4, 5]
let sum = arr.reduce((a, b) => a + b)
console.log(sum)
// 15
Метод String.repeat() создает новую строку, повторяя заданную строку указанное количество раз.
Пример:
let str = "js".repeat(10)
console.log(str)
// 'jsjsjsjsjsjsjsjsjsjs'
Метод Array.from() создает новый массив из массивоподобного или итерируемого объекта.
Пример:
let str = "Hello"
let arr = Array.from(str)
console.log(arr)
// ["H", "e", "l", "l", "o"]
Метод Math.hypot() находит квадратный корень из суммы квадратов его аргументов.
Так, сумма квадратов 3 и 4 равна 25, а квадратный корень из 25 равен 5. Следовательно, Math.hypot(3, 4) возвращает 5.
Пример:
let hyp = Math.hypot(3, 4);
console.log(hyp)
// 5
Метод Object.assign() копирует значения всех перечисляемых собственных свойств из одного или нескольких исходных объектов в целевой объект.
Пример:
let obj1 = {a: 1, b: 2};
let obj2 = {c: 3, d: 4};
let obj3 = Object.assign(obj1, obj2)
console.log(obj3)
// {a: 1, b: 2, c: 3, d: 4}
Чертановский районный суд признал Google LLC виновным в совершении административного правонарушения предусмотренного ч.1 ст.20.25 КоАП РФ — уклонение от исполнения административного наказания.
Теперь Google будет должен заплатить штраф в размере ₽8 008 684 193,68
Чтобы создать хлебные крошки в MODX, вам нужно создать отдельный чанк breadcrumbs и использовать pdoCrumbs из плагина pdoTools.
Подробнее о параметрах pdoCrumbs можно почитать в документации - ссылка.
Вот пример кода для ваших хлебных крошек:
<div class="container breadcrumbContainer">
<nav aria-label="breadcrumb">
[[!pdoCrumbs?
&showHome=`1`
&tplWrapper=`@INLINE <ol itemscope itemtype="http://schema.org/BreadcrumbList" class="breadcrumb listStyleNone pt15 pb15">[[+output]]</ol>`
&tpl=`@INLINE <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumbItem breadcrumbItemHome"><a itemprop="item" href="[[+link]]"><span itemprop="name">[[+menutitle]]</span></a><meta itemprop="position" content="[[+idx]]"></li>`
&tplCurrent=`@INLINE <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumbItem breadcrumbItemActive br-new active"><span itemprop="name">[[+menutitle]]</span><meta itemprop="position" content="[[+idx]]"></li>`
&tplHome=`@INLINE <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumbItem"><a itemprop="item" href="[[+link]]"><span itemprop="name">[[+menutitle]]</span></a><meta itemprop="position" content="[[+idx]]"></li>`
]]
</nav>
</div>
В этом примере применяются schema.org для улучшения SEO. Вы можете использовать мои наработки и адаптировать их под свои сайты.
Теперь вставьте созданный чанк в нужный шаблон, и вы готовы к работе. Я использовал эти хлебные крошки для шаблона страниц статей. Посмотреть, как выглядит готовый вариант, можно здесь.