Frontend разработчик

Интернет технологии

Библиотека Frontend программиста. Книги, полезные материалы, статьи, новости, уроки по front end/web разработке.

В избранное

Купить рекламу в этом канале

Формат:

keyboard_arrow_down

1/24
2/48
3/72
7 дней
Репост

1 час в топе / 24 часа в ленте

Количество:

keyboard_arrow_down

Стоимость публикации:

6 363^.63₽

Осталось по этой цене:0

Последние посты канала

imageИзображение не доступно для предпросмотра

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

1223

08:07

18.08.2025

imageИзображение не доступно для предпросмотра

Как добавлять условные свойства объектов в 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 }
};{}

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

1422

10:31

20.08.2025

10 современных возможностей CSS, которые стоит использовать Точно так же, как и JavaScript, CSS не пользуется наилучшей репутацией среди (Rails)-разработчиков. И, как и в случае с JavaScript (вспомните Turbo, а также CoffeeScript), у CSS длинная история препроцессоров, постпроцессоров и различных абстракций (например, Tailwind CSS). И долгое время многие из этих надстроек были действительно необходимы. Трудно представить CSS без вложенных селекторов, не так ли? Но на дворе 2025 год, и CSS развивается (и будет развиваться!) очень быстрыми темпами. Позади остались времена spacer.gif или создания изображений для каждого угла карточки, чтобы имитировать скруглённые границы. Если вы какое-то время пренебрегали CSS (например, потому что пользовались Tailwind CSS), ниже я хочу выделить несколько новых возможностей CSS, которые я с удовольствием применяю в некоторых проектах (созданных под эгидой Rails Designer и не только). Хотя я всё ещё люблю использовать Tailwind CSS, понимание и реальное использование самого CSS - крайне важно. Веб строится на (открытых) стандартах, что необходимо для его доступности, поддерживаемости и долгосрочной актуальности. Min, max and clamp min() Соединяя их вместе, так как они перекрываются

    
        
/* Keeps buttons from getting too wide on large screens */
.pricing-button {
  width: min(300px, 90%);
}
{}

Думайте о min() как об установке верхнего предела. Оно выберет меньшее из значений. Удобно для того, чтобы элементы не становились слишком большими, при этом оставаясь адаптивными. То есть, пока 90% вычисляется как меньше 300px - используется 90%. Как только результат превышает 300px - используется это значение. max()

    
        
/* Ensures text stays readable even on tiny screens */
.terms-container {
  font-size: max(16px, 1.2vw);
}
{}

https://railsdesigner.com/modern-css-overview/ 👉 @frontend_1

1522