Совет по Javascript 💡

Как выбрать последний элемент массива

👉 @frontend_1

🤩Хотите, чтобы ваши React-приложения не просто работали, а вызывали вау-эффект?

Присоединяйтесь к открытому уроку «Анимируем React: от нуля до вау-эффекта» 12 августа в 20:00 МСК. Мы покажем, как создать живые, отзывчивые интерфейсы с помощью библиотеки анимаций Framer Motion и API Intersection Observer. Разберём, как добавить современный UX без перегрузки сторонними библиотеками, чтобы каждый элемент интерфейса был динамичным и запоминающимся.

Освойте практические подходы и техники, которые используют профессионалы для создания визуально выразительных интерфейсов. Получите знания, которые значительно улучшат ваш опыт в React.

⚡️Присоединяйтесь к открытому вебинару и получите скидку на курс «React.js Developer»: https://vk.cc/cOmfRV

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Почему стоит использовать Tagged Unions при разработке на TypeScript

Сегодня я хочу поговорить на тему Tagged Unions (размеченных объединений) и объяснить, почему они ваш секретный инструмент для написания надежного TypeScript-кода.

https://habr.com/ru/companies/megafon/articles/933752/

👉 @frontend_1

CSS совет 💡

Возможно, вы не знали, что в CSS можно задавать поворот, используя единицу измерения turn

👉 @frontend_1

Распространённые коды состояния HTTP

👉 @frontend_1

Spellbook of Modern Web Dev

🧙‍♂️ Книга заклинаний современного веб-разработчика — это тщательно подобранный список ресурсов, инструментов и практик, охватывающих весь жизненный цикл современного веб-приложения.

Проект ориентирован на фронтенд, но также затрагивает аспекты бэкенда, DevOps, производительности, безопасности, тестирования, архитектуры и многое другое. Это не просто список ссылок — это настоящая карта знаний по веб-разработке.

📚 Темы включают:
- Среды разработки (IDE, терминал, Git)
- Языки и трансляторы (JS/TS, Babel, WebAssembly)
- UI/UX, CSS-инструменты и фреймворки
- Сборщики и бандлеры (Webpack, Vite, etc.)
- CI/CD, мониторинг, деплоймент
- Архитектурные шаблоны, микросервисы, серверлесс
- Безопасность, производительность, тестирование


https://github.com/dexteryy/spellbook-of-modern-webdev

👉 @frontend_1

👉 @frontend_1

🚀 С 25 по 29 августа пройдёт Podlodka React Crew #3 — сезон о паттернах и практиках фронтенда.

В программе:

💡 Паттерны и подводные камни View Transition API в React (Николай Шабалин, СберЗдоровье)

🧠 Глубокое погружение в архитектуру React Hooks (Максим Никитин, Rocket Science)

⚙️ Разбор FSD 2.1 на практике, без догм (Лев Челядинов, FSD Core team)

📚Подготовка к архитектурному интервью для фронтендеров (Игорь Антонов, Т-Банк)

📐Layout-паттерны за пределами Flexbox и CSS Grid (Саша Илатовский, Albato)

🎯 Все темы прикладные, с практикой и кейсами.

🔗 Подробности и билеты

P.S: Для подписчиков группы Frontend разработчик скидка 500 р по промокоду react_crew_3_iyBLiN

Сократите свой CSS-код с помощью :where()

Используйте псевдокласс-функцию :where(), когда нужно применить одинаковые стили к нескольким элементам, не беспокоясь о том, что порядок селекторов повлияет на специфичность правил. Это простой способ сделать CSS более предсказуемым и удобным для поддержки.

/* Without :where() */
.container > h1,
.container > .card h1,
.container > .card:last-child {
  border: 2px solid red;
  padding: 10px;
}

/* With :where() */
.container > :where(h1, .card .h1, .card:last-child) {
  border: 2px solid red;
  padding: 10px;
}

👉 @frontend_1

3 полезных совета по Tailwind CSS

Tailwind CSS произвел революцию в том, как мы подходим к веб-дизайну, предложив утилитарно-ориентированный фреймворк, который позволяет быстро разрабатывать и легко настраивать интерфейсы. В этом посте мы рассмотрим три менее известных, но очень полезных совета по Tailwind CSS, которые помогут ускорить рабочий процесс и улучшить качество кода.


1. Используйте size-{n} для одинаковой ширины и высоты

Вместо того чтобы отдельно задавать ширину и высоту, можно использовать утилиту size-{n}, если элементу нужны одинаковые размеры.

<!-- Вместо этого -->
<div class="w-12 h-12 bg-blue-500 rounded-full"></div>

<!-- Используйте это -->
<div class="size-12 bg-blue-500 rounded-full"></div>

Этот шорткат удобен для квадратов, кругов и любых элементов, где нужна равная ширина и высота.


2. Применяйте divide-{y/x}-{n} для равномерного разделения

Когда нужно добавить границы или разделители между дочерними элементами, вместо ручного добавления бордеров каждому ребёнку используйте утилиту divide-{y/x}-{n} на родительском контейнере. Это гарантирует единообразное разделение и уменьшает количество кода.

<!-- Вместо этого -->
<div>
  <div class="py-4 border-b">Item 1</div>
  <div class="py-4 border-b">Item 2</div>
  <div class="py-4">Item 3</div>
</div>

<!-- Используйте это -->
<div class="divide-y">
  <div class="py-4">Item 1</div>
  <div class="py-4">Item 2</div>
  <div class="py-4">Item 3</div>
</div>

Этот подход особенно полезен для списков, меню и любых макетов, где нужно одинаковое разделение элементов.


3. Используйте произвольные варианты с [&_selector]:

Tailwind CSS позволяет применять стили ко всем совпадающим дочерним элементам через родителя с помощью синтаксиса [&_selector]:. Это делает HTML чище и удобнее в поддержке.

<!-- Вместо этого -->
<ul>
  <li class="mb-2 text-blue-500">Item 1</li>
  <li class="mb-2 text-blue-500">Item 2</li>
  <li class="mb-2 text-blue-500">Item 3</li>
</ul>

<!-- Используйте это -->
<ul class="[&_li]:mb-2 [&_li]:text-blue-500">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Этот метод особенно полезен для единообразного применения стилей к дочерним элементам без необходимости прописывать их каждому отдельно.

👉 @frontend_1

Как добавлять условные свойства объектов в JavaScript

При создании объектов в JavaScript иногда требуется включать определённые свойства только при выполнении конкретных условий. Этот приём можно реализовать с помощью оператора расширения (…) в сочетании с условной логикой. Давайте разберём, как овладеть этим мощным инструментом для более гибкого и динамичного создания объектов.

Проблема статических свойств объектов

Представьте: вы создаёте объект пользователя и хотите добавить разные свойства в зависимости от его статуса. Возможно, он администратор, или у него есть премиум-подписка, или и то, и другое! Как создать объект, который гибко включает или исключает свойства в зависимости от условий?

Решение: условное распространение (Conditional Spreading) в JavaScript

Вот где начинается магия. Мы можем использовать оператор расширения (…) вместе с логическим оператором И (&&), чтобы условно добавлять свойства в объекты JavaScript. Такой подход позволяет создавать чистый и гибкий код, динамически добавляя свойства на основании различных условий.

Разберём это на примере:

const isAdmin = true;
const hasPremium = false;

const user = {
  username: 'johndoe',
  email: '[email protected]',
  ...(isAdmin && { role: 'admin' }),
  ...(hasPremium && { subscription: 'premium' }),
  ...((isAdmin || hasPremium) && { specialFeatures: 
  ['dashboard', 'reports'] }),
};

console.log(user);
/* 
{
  "username": "johndoe",
  "email": "[email protected]",
  "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 }
};

Этот приём позволяет создавать объекты чисто и гибко, добавляя свойства динамически на основе различных условий. Он особенно полезен при работе со сложными объектами, которые должны адаптироваться к разным сценариям или типам пользователей.

👉 @frontend_1