👩‍💻 Что такое метод trim() в JavaScript и как он используется?

trim() — это метод строк в JavaScript, который удаляет пробелы и скрытые символы (переводы строк, табуляции) в начале и конце строки. Это полезно при обработке пользовательского ввода и очистке данных.

➡️ Пример:

const text = "   Привет, мир!   ";

console.log(text.trim());   // "Привет, мир!"
console.log(text.trimStart()); // "Привет, мир!   "
console.log(text.trimEnd());   // "   Привет, мир!"

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

• trim() удаляет пробелы с обеих сторон строки.
• trimStart() — удаляет только в начале, trimEnd() — только в конце.

CodeBase | Frontend | #JS

🖥 Курс: "Верстка простого сайта для самых маленьких, html/css подробное объяснение"!

🖥 Изучите шаг за шагом, как создать современный веб-макет с помощью HTML и CSS. Идеально подходит для новичков, желающих развить практические навыки в веб-разработке!

🕞 Продолжительность: 4:00:18

🔗 ссылка

CodeBase | Frontend | #CSS #html

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

Атрибут tabindex управляет порядком перехода по элементам с клавиатуры (с помощью Tab). Это важно для удобства навигации и доступности веб-страниц.

➡️ Пример:

<button tabindex="2">Кнопка 2</button>
<button tabindex="1">Кнопка 1</button>
<button tabindex="3">Кнопка 3</button>

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

• tabindex="0" делает элемент доступным для Tab по умолчанию.
• tabindex="-1" исключает элемент из последовательности табуляции, но сохраняет фокусируемость через JavaScript.
• tabindex="1" (и выше) изменяет порядок фокуса, но злоупотреблять этим не стоит — лучше использовать естественный порядок DOM.

Правильное использование tabindex улучшает доступность и удобство навигации для всех пользователей

CodeBase | Frontend | #Основы

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

user-select — это CSS-свойство, которое управляет возможностью выделения текста пользователем. Оно полезно для защиты контента от копирования или улучшения UX в интерфейсах.

➡️ Пример:

<p class="no-select">Этот текст нельзя выделить.</p>

<style>
  .no-select {
    user-select: none; /* Запрещает выделение текста */
  }
</style>

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

• user-select: none; запрещает выделение текста пользователем.
• user-select: all; позволяет выделять весь текст при клике.
• user-select: text; (по умолчанию) разрешает выделение.

Свойство user-select удобно для защиты контента, предотвращения случайного выделения и улучшения взаимодействия с пользователем.

CodeBase | Frontend | #CSS

👩‍💻 Что такое метод repeat() в JavaScript и как он используется?

repeat() — это метод строк в JavaScript, который позволяет повторить строку указанное количество раз. Он полезен для форматирования вывода, создания шаблонов и генерации текстовых данных.

➡️ Пример:

const text = "JS ";

// Повторяем строку 3 раза
console.log(text.repeat(3)); // "JS JS JS"

// Создаём разделитель
console.log("-".repeat(10)); // "----------"

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

• repeat(3) повторяет строку три раза, объединяя их в одну строку.
• repeat(10) создаёт разделитель из 10 символов -.

CodeBase | Frontend | #JS

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

Атрибут autocomplete управляет автозаполнением форм в браузере. Он позволяет указывать, должны ли поля формы предлагать сохранённые данные (например, логины, адреса, номера карт), тем самым ускоряя ввод для пользователей.

➡️ Пример:

<form autocomplete="on">
  <label>
    Имя:
    <input type="text" name="name" autocomplete="name">
  </label>
  <label>
    Email:
    <input type="email" name="email" autocomplete="email">
  </label>
</form>

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

• autocomplete="on" — включает автозаполнение (по умолчанию).
• autocomplete="off" — отключает его для конкретного поля или всей формы.
• Можно указать тип данных (email, name, street-address и т. д.) для более точной подстановки.
• Улучшает UX, особенно при повторном заполнении форм.

Грамотное использование autocomplete делает формы более быстрыми и удобными для пользователей.

CodeBase | Frontend | #Основы

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

aspect-ratio — это CSS-свойство, которое позволяет задавать соотношение сторон элемента (ширина к высоте). Оно особенно полезно для адаптивной верстки, когда нужно сохранить форму элемента независимо от содержимого или экрана.

➡️ Пример:

<div class="box"></div>

<style>
  .box {
    width: 100%;
    aspect-ratio: 16 / 9; /* Соотношение 16:9 */
    background-color: lightblue;
  }
</style>

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

• aspect-ratio: 16 / 9; заставляет элемент сохранять форму прямоугольника с шириной в 16 единиц и высотой в 9.
• Это особенно удобно для видео, изображений, контейнеров с неизвестной высотой.
• Работает без необходимости использовать padding-hack или JavaScript.

Свойство aspect-ratio делает вёрстку проще и адаптивнее без дополнительных обёрток и расчётов.

CodeBase | Frontend | #CSS

👩‍💻 Что такое метод slice() в JavaScript и как он используется?

slice() — это метод массивов и строк в JavaScript, который возвращает копию части массива или строки без изменения оригинала. Он полезен для обрезки, копирования и извлечения подмножеств данных.

➡️ Пример:

const arr = [10, 20, 30, 40, 50];
console.log(arr.slice(1, 4)); // [20, 30, 40]

const str = "JavaScript";
console.log(str.slice(0, 4)); // "Java"

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

• slice(1, 4) возвращает элементы с индексом 1 по 3 включительно (4 не включается).
• slice(0, 4) возвращает первые 4 символа строки.
• Метод не мутирует оригинальные данные, что делает его безопасным при работе с копиями.

CodeBase | Frontend | #JS

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

Атрибут required используется в формах HTML для обозначения обязательных полей. Он предотвращает отправку формы, если поле не заполнено, и помогает валидировать данные без JavaScript.

➡️ Пример:

<form>
  <label>
    Email:
    <input type="email" required>
  </label>
  <button type="submit">Отправить</button>
</form>

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

• required указывает браузеру, что поле не должно быть пустым.
• Работает без JavaScript, улучшая поведение форм "из коробки".
• Показывает встроенные ошибки валидации, улучшая UX.
• Часто используется вместе с другими атрибутами: type, pattern, minlength.

Атрибут required — это простой и надёжный способ сделать формы интерактивнее и безопаснее.

CodeBase | Frontend | #Основы

🔥 Fluid Simulation - cцена с интересной симуляцией жидкости с текстом CSS и JavaScript.

🔗 Ссылка

CodeBase | Frontend | #js #animate

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

object-position — это CSS-свойство, которое управляет положением содержимого внутри элемента, например, изображения или видео, особенно когда используется object-fit для обрезки.

➡️ Пример:

<img src="image.jpg" class="preview" alt="Пример изображения">

<style>
  .preview {
    width: 300px;
    height: 200px;
    object-fit: cover;
    object-position: top right; /* Смещаем фокус к верхнему правому углу */
  }
</style>

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

• object-fit: cover; обрезает изображение, чтобы оно заполнило контейнер.
• object-position: top right; указывает, какую часть изображения показывать в приоритете.
• Можно использовать значения вроде center, bottom, 20% 80% и др.

Свойство object-position позволяет точно управлять отображением медиа внутри контейнера и удобно при создании адаптивных и эстетичных интерфейсов.

CodeBase | Frontend | #CSS