CodeBase | Frontend

Как добавлять условные свойства объектов в JavaScript При создании объектов в JavaScript иногда требуется включать определённые свойства только при выполнении конкретных условий. Этот приём можно реализовать с помощью оператора расширения (…) в сочетании с условной логикой. Давайте разберём, как овладеть этим мощным инструментом для более гибкого и динамичного создания объектов. Проблема статических свойств объектов Представьте: вы создаёте объект пользователя и хотите добавить разные свойства в зависимости от его статуса. Возможно, он администратор, или у него есть премиум-подписка, или и то, и другое! Как создать объект, который гибко включает или исключает свойства в зависимости от условий? Решение: условное распространение (Conditional Spreading) в JavaScript Вот где начинается магия. Мы можем использовать оператор расширения (…) вместе с логическим оператором И (&&), чтобы условно добавлять свойства в объекты JavaScript. Такой подход позволяет создавать чистый и гибкий код, динамически добавляя свойства на основании различных условий. Разберём это на примере: const isAdmin = true; const hasPremium = false; const user = { username: 'johndoe', email: 'john@example.com', ...(isAdmin && { role: 'admin' }), ...(hasPremium && { subscription: 'premium' }), ...((isAdmin || hasPremium) && { specialFeatures: ['dashboard', 'reports'] }), }; console.log(user); /* { "username": "johndoe", "email": "john@example.com", "role": "admin", "specialFeatures": [ "dashboard", "reports" ] } */ Как работают условные свойства объектов Выражение && в JavaScript вычисляется слева направо. Если первая часть выражения ложна (falsy), то происходит короткое замыкание — вся конструкция возвращает это ложное значение, а вторая часть даже не вычисляется. Вот что происходит в нашем примере: - isAdmin && { role: 'admin' }: так как isAdmin === true, в объект добавляется свойство role: 'admin'. - hasPremium && { subscription: 'premium' }: так как hasPremium === false, это свойство не добавляется. - (isAdmin || hasPremium) && { specialFeatures: [...] }: условие истинно (потому что isAdmin === true), поэтому в объект добавляется массив specialFeatures. Профессиональные советы по работе с условными свойствами объектов в JavaScript 🚀 1- Порядок имеет значение: помните, что порядок операций распространения (spread) может влиять на итоговый объект. Более поздние операции перезапишут более ранние при одинаковом ключе. 2- Вопросы производительности: хотя этот приём выглядит чисто и читаемо, будьте осторожны при использовании с большими объектами или в критичных к производительности местах. Каждая операция spread создаёт новый объект, что может повлиять на производительность при чрезмерном использовании. 3- Отладка условных свойств: при отладке помните, что "ложные" значения (...false, ...null, ...undefined) просто игнорируются, из-за чего некоторые проблемы могут быть неочевидны на первый взгляд. 4- Nullish coalescing: для более продвинутых случаев использования рассмотрите комбинацию этого подхода с оператором объединения с null (??) для задания значений по умолчанию. const user = { ...someCondition && { prop: valueIfTrue ?? defaultValue } }; Этот приём позволяет создавать объекты чисто и гибко, добавляя свойства динамически на основе различных условий. Он особенно полезен при работе со сложными объектами, которые должны адаптироваться к разным сценариям или типам пользователей. CodeBase | Frontend | #JS

CodeBase | Frontend | #meme

Джуны — всё, ИИ победил. По статистике BCG, за последний год компании выбросили на улицу 75% молодняка. При этом миддлам и сеньорам зарплаты подняли в 4 (!) раза. Чтобы подняться до уровня элит в аномально короткие сроки — подпишитесь на полезные каналы для айтишников: 👉 Журнал об IT 🖥 Фронтенд разработка 🖥 Data Science | Machinelearning 🖥 Node js | Backend 👩‍💻 Вёрстка 🖥 Python | Backend 🖥 QA Там раскрыли инфу из курсов общей стоимостью 5.000.000р в эксклюзивных пошаговых инструкциях. Пока остальные пойдут на дно якорем, вы войдете в 10% тех, кто сломал систему.

Typescript для React Типобезопасный React — это круто! Если хотите применить TypeScript для React, нашёл для вас хорошую статью по тому, как сделать это эффективно. Вкратце о чём статья: Даются приёмы использования ReturnType и Awaited для извлечения типов из функций, типизации children через ReactNode, применения React.ComponentProps, объединений & и Omit для точного описания пропсов, способов группировки через объединения и использования as const для кортежей. ➡️ Читать статью CodeBase | Frontend | #JS

Вот что происходит, когда просишь ИИ отцентрировать div CodeBase | Frontend | #meme ©

Шпаргалка по выравниванию в CSS Grid 👨‍💻 CodeBase | Frontend | #CSS

CodeBase | Frontend | #meme

Совет CSS 💡 Вы можете не знать об этом псевдоклассе CSS CodeBase | Frontend | #CSS

🪄 Трюк: «Скелетон» без JS При загрузке данных часто ставят Spinner. Но современный UX → Skeleton (серый шаблон контента). И делать его можно без JS! .skeleton { background: linear-gradient( 90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; } @keyframes shimmer { 100% { background-position: -200% 0; } } 📌 Как использовать: 1. Создаёте div с классом .skeleton вместо контента. 2. Размеры задаёте под будущий элемент (картинка, текст). 3. Меняете на реальные данные после загрузки. Плюсы: - Нет лишнего JS. - Лёгко адаптировать под любую форму. - Современный UI → выглядит «дорого». CodeBase | Frontend | #вебдизайн

🏁Тестовый собес на Frontend с разработчиком из R-Vision, ex-Сбер 15 октября в 19:00 (МСК) приходи посмотреть открытое онлайн-собеседование на Frontend-разработчика! Интервьюер: Даниил Дмитриев – Frontend-разработчик в R-Vision, ex-Сбер. Пишет на React и TypeScript, совмещает роль тимлида, менторит разработчиков и проводит код-ревью. На эфире нет сценария ↓ Кандидат – случайный разработчик, который не знает вопросов заранее. На обычном собесе ты не знаешь, что думает интервьюер, пока не придёт фидбек. На этом эфире Даниил проговорит всё вслух:

— какие вопросы и задачи даёт кандидатам на Frontend-собесах; — что в каждом ответе засчитал бы, а что нет — и почему.

А в конце ответит на твои вопросы. Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят повысить грейд, ЗП и прокачать скиллы! Участие бесплатное 🔥 Зарегаться на эфир можно в боте → @shortcut_front_bot Реклама. О рекламодателе.

Совет по CSS 💡 Используйте табличные цифры для отображения таймеров ✅ https://www.codewithshripal.com/playground/css/use-tabular-number-for-timers CodeBase | Frontend | #CSS

Работа в Т‑Банке — топ‑3 лучших работодателей России по версии Forbes. Приходите работать по админской ссылке и получите 7 000 ₽ https://tbank-online.com/baf/1Gfz7QB2oIu

Мини-хак: :has() в CSS — меньше JS для интерактивности 🎯 Современные браузеры уже поддерживают :has() — “родительский селектор”, который раньше приходилось эмулировать на JS. Пример: показать рамку у карточки, если внутри есть картинка: .card:has(img) { border: 2px solid #4ade80; } Ещё круче: стилизовать соседний элемент, если внутри инпута что-то введено: .input-wrapper:has(input:focus) label { color: #3b82f6; } Зачем это нужно? — Меньше JS → проще поддержка — Новый уровень гибкости для UI Документация: MDN про :has() Пробуйте! Это реально меняет подход к верстке. CodeBase | Frontend | #CSS

Напоминаем про наш секретный второй ресурс тут тонны крутых постов, которых вы здесь точно не увидите. Бегом подписываться, а то будете потом завидовать тем кто в теме 😉 (Контент не повторяется)

💡 HTML Tip: Скачивание файлов одной строкой Хочешь, чтобы пользователь скачивал файл по клику? Просто добавь атрибут download к ссылке: <a href="/images/logo.svg" download="codewithshripal-logo.svg">Download File</a> 📌 Что важно знать: – download — указывает браузеру, что нужно не открыть файл, а скачать его – Можно задать имя файла прямо в атрибуте – Работает только с ресурсами того же источника (same-origin) – Поддерживает blob: и data: ссылки для скачивания сгенерированного контента 🔍 Важно: имя из download будет использоваться только если сервер не задал своё имя в заголовке Content-Disposition. CodeBase | Frontend | #HTML

CodeBase | Frontend | #meme

Как работает комбинация clip + mask: - маска применяется к контейнеру с использованием соответствующего изображения клавиши, чтобы изображение обрезалось при смещении (translate) - clip применяется к контейнеру, чтобы зона взаимодействия (hit area) не перекрывала другие клавиши 🧑‍🍳 CodeBase | Frontend | #animate

Почему твой AI тормозит? Платишь, а потом всё равно перепроверяешь, переписываешь и переспрашиваешь, а дело ведь даже не в твоих навыках На разных тарифах предусмотрены разные лимиты и уровни доступа — часть ограничений производительности заложена в сам план. Если AI — твой рабочий инструмент, на больших объёмах иногда выгоднее брать максимальный тариф и экономить не на подписке, а на своём времени. Claude Max 20x, ChatGPT Pro, Google AI Ultra — нужный тариф поможет оплатить Raketa Pay 🚀 SPUTNIK7 — скидка 5% 👉 https://t.me/raketa_pay_public?erid=2W5zFHaSvt9