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

object-fit — это CSS-свойство, которое определяет, как содержимое (например, изображения или видео) вписывается в контейнер, сохраняя пропорции или заполняя пространство.

➡️ Пример:

<div class="image-container">
  <img src="example.jpg" alt="Пример">
</div>

<style>
  .image-container {
    width: 300px;
    height: 200px;
    overflow: hidden;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Заполняет контейнер, обрезая края */
  }
</style>

🗣️ В этом примере свойство object-fit: cover заставляет изображение заполнять контейнер, обрезая края, чтобы сохранить пропорции. Это удобно для создания адаптивных галерей.

CodeBase | Frontend | #CSS

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

reduceRight() — это метод массивов в JavaScript, который работает аналогично reduce, но выполняет операцию справа налево.

➡️ Пример:

const numbers = [1, 2, 3, 4];

// Сложение чисел с обходом справа налево
const sum = numbers.reduceRight((acc, num) => acc + num, 0);

console.log(sum); // 10

🗣️ В этом примере метод reduceRight суммирует элементы массива, начиная с последнего. Это полезно, когда порядок обработки элементов имеет значение.

CodeBase | Frontend | #JS

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

Атрибут alt у тега <img> задаёт текстовое описание изображения. Он используется для улучшения доступности (помогает пользователям с нарушениями зрения) и отображения текста, если изображение не удалось загрузить.

➡️ Пример:

<img src="photo.jpg" alt="Фотография заката на пляже">

🗣️ В этом примере текст "Фотография заката на пляже" будет отображён вместо изображения, если оно недоступно. Атрибут alt улучшает опыт пользователей и способствует SEO-оптимизации страницы.

CodeBase | Frontend | #Основы

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

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

➡️ Пример:

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

<style>
  .box1 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    z-index: 1; /* Будет позади box2 */
  }

  .box2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: lightgreen;
    left: 50px;
    z-index: 2; /* Отображается поверх box1 */
  }
</style>

🗣 В этом примере z-index определяет, что элемент с классом .box2 перекрывает элемент .box1. Свойство работает только с элементами, у которых задано позиционирование (position).

CodeBase | Frontend | #CSS

👨‍💻 В телеграме появился новый канал по Фронтенду

Всё что нужно для Frontend-разработчика теперь в одном месте: обучающие видео, статьи, онлайн сервисы, шпаргалки и многое другое...

➡️ Перейти в канал "Фронтенд заметки"

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

some() — это метод массивов в JavaScript, который проверяет, удовлетворяет ли хотя бы один элемент массива заданному условию. Он возвращает true, если хотя бы один элемент прошёл проверку, иначе false.

➡️ Пример:

const numbers = [1, 3, 5, 8];

// Проверяем, есть ли чётные числа
const hasEven = numbers.some(num => num % 2 === 0);

console.log(hasEven); // true

🗣️ В этом примере метод some() возвращает true, так как в массиве есть число 8, которое является чётным. Это полезно для проверки условий без необходимости проходить весь массив.

CodeBase | Frontend | #JS

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

Атрибут title добавляет всплывающую подсказку для элемента при наведении на него курсором. Это полезно для предоставления дополнительной информации пользователям или улучшения доступности.

➡️ Пример:

<a href="https://example.com" title="Перейти на главную страницу">Главная</a>

🗣️ В этом примере при наведении на ссылку появится подсказка с текстом "Перейти на главную страницу". Это улучшает взаимодействие с пользователем, добавляя полезные пояснения.

CodeBase | Frontend | #Основы

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

opacity — это CSS-свойство, которое задаёт степень прозрачности элемента. Значение opacity может быть от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Это полезно для создания визуальных эффектов, таких как затемнение или появление элементов.

➡️ Пример:

<div class="opaque-box">Прозрачный текст</div>

<style>
  .opaque-box {
    background-color: lightblue;
    opacity: 0.5; /* Устанавливаем 50% прозрачности */
    padding: 20px;
    text-align: center;
  }
</style>

🗣 В этом примере свойство opacity делает элемент .opaque-box полупрозрачным, что особенно полезно для наложений и визуального выделения интерфейсов.

CodeBase | Frontend | #CSS

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

every() — это метод массивов в JavaScript, который проверяет, удовлетворяют ли все элементы массива заданному условию. Он возвращает true, если все элементы проходят проверку, иначе false.

➡️ Пример:

const numbers = [2, 4, 6, 8];

// Проверяем, все ли числа чётные
const allEven = numbers.every(num => num % 2 === 0);

console.log(allEven); // true

🗣️ В этом примере метод every() возвращает true, так как все числа в массиве чётные. Этот метод полезен, когда требуется убедиться, что все элементы массива соответствуют определённым критериям.

CodeBase | Frontend | #JS

Простой парень-программист с 12-летним стажем в российских IT-компаниях загорелся идеей переехать в Лондон 💂

Он прошел через настоящий ад: после 10-часового рабочего дня решал тестовые задачи, проходил собеседования, терпел отказы и унижения. Отказался от встреч с друзьями, путешествий и отпусков - лишь бы выкроить время для изучения языка и подготовки.  🤯

На своем нелегком пути он набил немало шишек и получил бесценный опыт. Теперь он делится своим опытом, знаниями и советами на канале: говорит без пафоса и официоза, простым, понятным языком. Там ты узнаешь не только о тонкостях релокации, но и о реальной жизни в IT, рабочих процессах и карьерных лайфхаках.

Хочешь увидеть, как выглядит путь программиста, решившего покорить Лондон, и заодно получить инсайты о работе в IT? 🧠

Подпишись на его канал @artur_speaking!

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

Атрибут lang указывает язык содержимого HTML-документа или конкретного элемента. Это важно для улучшения доступности, корректной обработки текста браузерами и поисковыми системами.

➡️ Пример:

<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример</title>
</head>
<body>
  <p lang="en">This is English text.</p>
  <p lang="fr">Ceci est un texte en français.</p>
</body>
</html>

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

CodeBase | Frontend | #Основы