⚙️ Что такое свойство backdrop-filter в CSS и зачем оно используется?

Свойство backdrop-filter применяет визуальные эффекты к фону за элементом, а не к самому элементу.

Чаще всего используется для blur-эффекта в модальных окнах и стеклянных интерфейсах

➡️ Пример:

<div class="card">Контент</div>

<style>
  body {
    background: url(bg.jpg) no-repeat center / cover;
  }

  .card {
    width: 300px;
    padding: 20px;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
  }
</style>

🗣️ Популярные эффекты:

• blur() — размытие
• brightness() — яркость
• contrast() — контраст
• saturate() — насыщенность

backdrop-filter позволяет создавать современные UI-эффекты без изображений и JS, но требует полупрозрачного фона и поддержки браузером

CodeBase | Frontend | #Основы

👩‍💻 Метод includes() в JavaScript и как он используется

Метод includes() проверяет, содержится ли элемент в массиве.

Возвращает true или false и не изменяет исходный массив

➡️ Пример:

Метод includes() в JavaScript и как он используется

Метод includes() проверяет, содержится ли элемент в массиве.
Возвращает true или false и не изменяет исходный массив

🗣️ В этом примере:

• includes() выполняет проверку на наличие значения
• Работает корректно с примитивами (string, number, boolean)
• Читабельнее и безопаснее, чем indexOf() !== -1

includes() — простой и выразительный способ писать понятные проверки без лишней логики

CodeBase | Frontend | #JS

Найдена идеальная анимация для загрузочного экрана 🤔

CodeBase | Frontend | #meme

🖥 Этот CSS пора оставить в прошлом

Показываю, как переписать привычные решения — центрирование, сетки, эффекты и адаптивность — на свежие фичи вроде :has(), контейнерных запросов и subgrid. Коротко, практично и без JS.

🔗 Ссылка

CodeBase | Frontend | #article

⚙️Тег <noscript> используется для отображения контента, если JavaScript отключен в браузере. Он позволяет предоставить альтернативное содержимое или сообщение для пользователей, которые не могут или не хотят использовать JavaScript.

Пример:

<noscript>
  <p>Please enable JavaScript to use this website.</p>
</noscript>

- Контент внутри <noscript> отображается только при отключенном JavaScript.
- Часто используется для информирования пользователей или предоставления базовой функциональности без JavaScript.

CodeBase | Frontend | #Основы

⚙️ Что такое атрибут role в HTML и зачем он используется?

Атрибут role используется для улучшения доступности веб-страниц. Он сообщает вспомогательным технологиям (например, экранным читалкам), какую функцию выполняет элемент.

➡️ Пример:

<!-- Обозначение навигационного меню -->
<nav role="navigation">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
  </ul>
</nav>

<!-- Определение элемента как диалогового окна -->
<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Подтвердите действие</h2>
  <button>ОК</button>
</div>

🗣️ Почему полезно:

• role="navigation" помогает читалкам распознавать меню.
• role="dialog" делает <div> доступным как модальное окно.

CodeBase | Frontend | #Основы

⚡️ Псевдокласс ::first-letter ⚡️

🔥 Этот псевдокласс позволяет стилизовать первую букву текстового элемента. Он часто используется для создания инициалов или других типографических эффектов.

➡️ Принятые свойства:

🔵 color — цвет первой буквы
🔵 background-color — цвет фона
🔵 font-family — шрифт первой буквы
🔵 font-size — размер шрифта
🔵 font-weight – насыщенность шрифта
🔵 line-height — высота строки
🔵 text-decoration — текстовое оформление (подчеркивание, зачеркивание)
🔵 text-transform — преобразование текста (в верхний регистр, в нижний регистр)
🔵 margin - внешние отступы
🔵 padding - внутренние отступы
🔵 border — граница первой буквы
🔵 float — выравнивание (например, слева, справа).
🔵 text-shadow — тень текста

CodeBase | Frontend